编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>化工生产制程数字化系统 - 后台管理</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif; background: #1e1e2f; color: #f0f0f0; min-height: 100vh; }
        /* 登录页 */
        .login-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #1e1e2f 0%, #2d2d3f 100%); display: flex; align-items: center; justify-content: center; z-index: 9999; }
        .login-card { background: #2d2d3f; border-radius: 16px; padding: 48px; width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); border: 1px solid #3e3e50; }
        .login-logo { text-align: center; margin-bottom: 32px; }
        .login-logo h1 { font-size: 24px; color: #f0a500; margin-top: 16px; }
        .login-logo p { font-size: 14px; color: #a0a0b0; margin-top: 8px; }
        .form-group { margin-bottom: 24px; }
        .form-label { display: block; font-size: 14px; color: #a0a0b0; margin-bottom: 8px; }
        .form-input { width: 100%; padding: 14px 16px; background: #1e1e2f; border: 2px solid #3e3e50; border-radius: 10px; color: #f0f0f0; font-size: 15px; }
        .form-input:focus { outline: none; border-color: #f0a500; }
        .btn-login { width: 100%; padding: 16px; background: linear-gradient(135deg, #f0a500 0%, #ff6b00 100%); border: none; border-radius: 10px; color: white; font-size: 16px; font-weight: 600; cursor: pointer; }
        .btn-login:hover { box-shadow: 0 8px 24px rgba(240, 165, 0, 0.4); }
        .hint { text-align: center; margin-top: 24px; font-size: 12px; color: #606070; }
        /* 主框架 */
        .hidden { display: none !important; }
        .top-nav { height: 64px; background: #2d2d3f; border-bottom: 1px solid #3e3e50; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
        .nav-logo { display: flex; align-items: center; gap: 12px; }
        .nav-logo svg { width: 32px; height: 32px; color: #f0a500; }
        .nav-logo h1 { font-size: 18px; color: #f0a500; }
        .nav-right { display: flex; align-items: center; gap: 20px; }
        .nav-user { display: flex; align-items: center; gap: 12px; }
        .user-avatar { width: 36px; height: 36px; background: linear-gradient(135deg, #f0a500, #ff6b00); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
        .btn-logout { padding: 8px 16px; background: transparent; border: 1px solid #3e3e50; border-radius: 8px; color: #a0a0b0; cursor: pointer; font-size: 14px; }
        /* 左侧菜单 */
        .side-nav { width: 240px; background: #2d2d3f; border-right: 1px solid #3e3e50; position: fixed; top: 64px; left: 0; bottom: 0; overflow-y: auto; padding: 16px 0; }
        .nav-section { margin-bottom: 24px; }
        .nav-section-title { padding: 8px 24px; font-size: 12px; color: #606070; text-transform: uppercase; }
        .nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 24px; color: #a0a0b0; cursor: pointer; transition: all 0.2s; position: relative; }
        .nav-item:hover { background: rgba(240, 165, 0, 0.1); color: #f0f0f0; }
        .nav-item.active { background: rgba(240, 165, 0, 0.15); color: #f0a500; }
        .nav-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #f0a500; }
        .nav-item svg { width: 20px; height: 20px; }
        .nav-badge { margin-left: auto; background: #dc2626; color: white; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
        /* 主内容 */
        .main-content { margin-left: 240px; margin-top: 64px; padding: 24px; }
        .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
        .content-title { font-size: 20px; font-weight: 600; }
        .btn { padding: 10px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; border: none; }
        .btn-primary { background: linear-gradient(135deg, #f0a500, #ff6b00); color: white; }
        .btn-secondary { background: #2d2d3f; border: 1px solid #3e3e50; color: #a0a0b0; }
        /* 统计卡片 */
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
        .stat-card { background: #2d2d3f; border-radius: 12px; padding: 24px; border: 1px solid #3e3e50; }
        .stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .stat-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
        .stat-icon svg { width: 24px; height: 24px; color: white; }
        .stat-icon.orange { background: linear-gradient(135deg, #f0a500, #ff6b00); }
        .stat-icon.blue { background: linear-gradient(135deg, #0284c7, #0369a1); }
        .stat-icon.green { background: linear-gradient(135deg, #00a896, #059669); }
        .stat-icon.red { background: linear-gradient(135deg, #dc2626, #b91c1c); }
        .stat-trend { font-size: 12px; padding: 4px 8px; border-radius: 6px; }
        .stat-trend.up { background: rgba(0, 168, 150, 0.15); color: #00a896; }
        .stat-value { font-size: 32px; font-weight: 700; margin-bottom: 4px; }
        .stat-label { font-size: 14px; color: #a0a0b0; }
        /* 表格 */
        .table-card { background: #2d2d3f; border-radius: 12px; border: 1px solid #3e3e50; overflow: hidden; }
        .table-header { padding: 16px 24px; border-bottom: 1px solid #3e3e50; display: flex; justify-content: space-between; align-items: center; }
        .table-title { font-size: 16px; font-weight: 600; }
        .table-filters { display: flex; gap: 12px; }
        .table-input { padding: 8px 12px; background: #1e1e2f; border: 1px solid #3e3e50; border-radius: 6px; color: #f0f0f0; font-size: 13px; }
        .table-input:focus { outline: none; border-color: #f0a500; }
        table { width: 100%; border-collapse: collapse; }
        th { text-align: left; padding: 14px 24px; background: #252535; font-size: 13px; font-weight: 500; color: #a0a0b0; border-bottom: 1px solid #3e3e50; }
        td { padding: 16px 24px; font-size: 14px; border-bottom: 1px solid #3e3e50; }
        tr:hover { background: rgba(240, 165, 0, 0.05); }
        .status-badge { padding: 4px 12px; border-radius: 6px; font-size: 12px; display: inline-block; }
        .status-badge.pending { background: rgba(240, 165, 0, 0.15); color: #f0a500; }
        .status-badge.running { background: rgba(2, 132, 199, 0.15); color: #0284c7; }
        .status-badge.completed { background: rgba(0, 168, 150, 0.15); color: #00a896; }
        .status-badge.aborted { background: rgba(220, 38, 38, 0.15); color: #dc2626; }
        .action-btns { display: flex; gap: 8px; }
        .action-btn { padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; border: none; }
        .action-btn.view { background: rgba(2, 132, 199, 0.15); color: #0284c7; }
        .action-btn.edit { background: rgba(240, 165, 0, 0.15); color: #f0a500; }
        /* 分页 */
        .pagination { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-top: 1px solid #3e3e50; }
        .page-info { font-size: 13px; color: #a0a0b0; }
        .page-btns { display: flex; gap: 8px; }
        .page-btn { padding: 8px 14px; background: #1e1e2f; border: 1px solid #3e3e50; border-radius: 6px; color: #a0a0b0; font-size: 13px; cursor: pointer; }
        .page-btn:hover { border-color: #f0a500; color: #f0a500; }
        .page-btn.active { background: #f0a500; border-color: #f0a500; color: #1e1e2f; }
        /* 表单卡片 */
        .form-card { background: #2d2d3f; border-radius: 12px; padding: 24px; border: 1px solid #3e3e50; }
        .form-group { margin-bottom: 20px; }
        .form-label { display: block; font-size: 14px; color: #a0a0b0; margin-bottom: 8px; }
        .form-label .required { color: #dc2626; }
        .form-input, .form-select, .form-textarea { width: 100%; padding: 14px 16px; background: #1e1e2f; border: 1px solid #3e3e50; border-radius: 10px; color: #f0f0f0; font-size: 15px; }
        .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #f0a500; }
        .form-textarea { min-height: 120px; resize: vertical; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .btn-submit { width: 100%; padding: 16px; background: linear-gradient(135deg, #f0a500, #ff6b00); border: none; border-radius: 12px; color: white; font-size: 16px; font-weight: 600; cursor: pointer; }
        /* 数据卡片网格 */
        .data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
        .data-card { background: #2d2d3f; border-radius: 12px; padding: 20px; border: 1px solid #3e3e50; }
        .data-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .data-card-title { font-size: 16px; font-weight: 500; }
        .data-card-actions { display: flex; gap: 8px; }
        .data-card-meta { font-size: 13px; color: #606070; margin-bottom: 8px; }
        .data-card-content { font-size: 14px; color: #a0a0b0; }
        .mini-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; }
        .mini-badge.blue { background: rgba(2, 132, 199, 0.15); color: #0284c7; }
        .mini-badge.green { background: rgba(0, 168, 150, 0.15); color: #00a896; }
        .mini-badge.orange { background: rgba(240, 165, 0, 0.15); color: #f0a500; }
        /* 标签页 */
        .tab-bar { display: flex; gap: 4px; background: #2d2d3f; border-radius: 10px; padding: 4px; margin-bottom: 20px; }
        .tab-item { padding: 10px 20px; border-radius: 8px; font-size: 14px; color: #a0a0b0; cursor: pointer; transition: all 0.2s; }
        .tab-item:hover { color: #f0f0f0; }
        .tab-item.active { background: #f0a500; color: #1e1e2f; }
        /* 列表项 */
        .list-item { display: flex; align-items: center; gap: 16px; padding: 16px; background: #2d2d3f; border-radius: 10px; margin-bottom: 12px; border: 1px solid #3e3e50; cursor: pointer; transition: all 0.2s; }
        .list-item:hover { border-color: #f0a500; }
        .list-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #0284c7, #0369a1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .list-content { flex: 1; }
        .list-title { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
        .list-meta { font-size: 12px; color: #606070; }
        .list-status { padding: 6px 14px; border-radius: 6px; font-size: 12px; }
        @media (max-width: 1280px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
    </style>
</head>
<body>
    <!-- 登录页 -->
    <div class="login-bg" id="loginPage">
        <div class="login-card">
            <div class="login-logo">
                <svg viewBox="0 0 24 24" fill="none" stroke="#f0a500" stroke-width="2" style="width:64px;height:64px;">
                    <path d="M2 20h20M5 20V8l7-5 7 5v12M9 20v-6h6v6"/>
                    <circle cx="12" cy="14" r="2"/>
                </svg>
                <h1>化工生产制程数字化系统</h1>
                <p>后台管理系统 · 管理员登录</p>
            </div>
            <form id="loginForm">
                <div class="form-group">
                    <label class="form-label">账号</label>
                    <input type="text" class="form-input" placeholder="请输入账号" id="username" required>
                </div>
                <div class="form-group">
                    <label class="form-label">密码</label>
                    <input type="password" class="form-input" placeholder="请输入密码" id="password" required>
                </div>
                <button type="submit" class="btn-login">登 录</button>
            </form>
            <div class="hint">测试账号：admin / 123456</div>
        </div>
    </div>

    <!-- 主框架 -->
    <div id="mainApp" class="hidden">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <div class="nav-logo">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M2 20h20M5 20V8l7-5 7 5v12M9 20v-6h6v6"/>
                    <circle cx="12" cy="14" r="2"/>
                </svg>
                <h1>化工生产制程数字化系统</h1>
            </div>
            <div class="nav-right">
                <div class="nav-user">
                    <div class="user-avatar">管</div>
                    <div>
                        <div style="font-size:14px;font-weight:500;">张主管</div>
                        <div style="font-size:12px;color:#a0a0b0;">系统管理员</div>
                    </div>
                </div>
                <button class="btn-logout" onclick="logout()">退出</button>
            </div>
        </div>

        <!-- 左侧菜单 -->
        <div class="side-nav">
            <div class="nav-section">
                <div class="nav-section-title">基础数据</div>
                <div class="nav-item" onclick="switchPage(this, 'products')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
                    <span>产品管理</span>
                </div>
                <div class="nav-item" onclick="switchPage(this, 'materials')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/></svg>
                    <span>原料管理</span>
                </div>
                <div class="nav-item" onclick="switchPage(this, 'devices')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/></svg>
                    <span>设备管理</span>
                </div>
                <div class="nav-item" onclick="switchPage(this, 'templates')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/></svg>
                    <span>模板管理</span>
                </div>
                <div class="nav-item" onclick="switchPage(this, 'protocols')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83"/></svg>
                    <span>通信协议</span>
                </div>
                <div class="nav-item" onclick="switchPage(this, 'users')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                    <span>员工账号</span>
                </div>
            </div>
            <div class="nav-section">
                <div class="nav-section-title">任务管理</div>
                <div class="nav-item active" onclick="switchPage(this, 'task-publish')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
                    <span>任务发布</span>
                </div>
                <div class="nav-item" onclick="switchPage(this, 'task-monitor')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                    <span>任务监控</span>
                    <span class="nav-badge">12</span>
                </div>
            </div>
            <div class="nav-section">
                <div class="nav-section-title">系统</div>
                <div class="nav-item" onclick="switchPage(this, 'reports')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
                    <span>报表管理</span>
                </div>
                <div class="nav-item" onclick="switchPage(this, 'config')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06"/></svg>
                    <span>系统配置</span>
                </div>
            </div>
        </div>

        <!-- 主内容 -->
        <div class="main-content">
            <!-- 任务发布页 -->
            <div id="page-task-publish">
                <div class="content-header">
                    <h2 class="content-title">发布新任务</h2>
                </div>
                <div class="form-card">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">产品 <span class="required">*</span></label>
                            <select class="form-select">
                                <option value="">请选择产品</option>
                                <option>工业酒精</option>
                                <option>丙酮</option>
                                <option>硫酸</option>
                                <option>氢氧化钠</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">批次号 <span class="required">*</span></label>
                            <input type="text" class="form-input" placeholder="BATCH-20260527-04">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">工厂 <span class="required">*</span></label>
                            <select class="form-select">
                                <option value="">请选择</option>
                                <option>一厂</option>
                                <option>二厂</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">设备 <span class="required">*</span></label>
                            <select class="form-select">
                                <option value="">请先选工厂</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">流程模板 <span class="required">*</span></label>
                        <select class="form-select">
                            <option value="">请选择模板</option>
                            <option>标准化学反应流程（5步）</option>
                            <option>简易混合流程（3步）</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">备注</label>
                        <textarea class="form-textarea" placeholder="可选输入任务备注...">
任务ID	产品批次	工厂	设备	当前节点	进度	状态
TSK-2026-001	化学品A / BATCH-20260527-01	一厂	反应釜-01	第三步：加热搅拌	60%	进行中
TSK-2026-002	溶剂B / BATCH-20260527-02	二厂	混合罐-02	第一步：原料投放	20%	进行中
TSK-2026-003	催化剂C / BATCH-20260526-01	一厂	反应釜-02	已全部完成	100%	已完成
TSK-2026-004	聚合物D / BATCH-20260526-02	二厂	聚合釜-01	第三步：聚合反应	50%	待启用
TSK-2026-005	酸液E / BATCH-20260525-01	一厂	中和釜-01	已中止	40%	已中止
原料编号	原料名称	规格	库存	单位	状态
MAT-001	乙醇	99.5%	5000	升	充足
MAT-002	丙酮	99.0%	3000	升	正常
MAT-003	硫酸	98.0%	800	升	预警
工号	姓名	角色	工厂	状态	最后登录
EMP-001	张主管	系统管理员	全部	启用	2026-05-27 10:30
EMP-002	王组长	组长	一厂	启用	2026-05-27 09:15
EMP-003	李操作员	操作员	一厂	启用	2026-05-27 08:45
协议名称	类型	地址	状态	最后同步	操作
设备A通信	HTTP	192.168.1.100:8080	在线	2026-05-27 11:00
传感器B	MQTT	mqtt://192.168.1.101	在线	2026-05-27 10:58
编辑页面

任务监控

产品管理

原料管理

设备管理

流程模板管理

员工账号管理

通信协议管理

报表管理

系统配置
