编辑页面

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, "PingFang SC", "Microsoft YaHei", sans-serif;
            background: #f0f2f5;
            min-height: 100vh;
        }
        .layout { display: flex; min-height: 100vh; }
        .sidebar {
            width: 240px;
            background: #001529;
            color: #fff;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
        }
        .sidebar .logo {
            height: 60px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            font-size: 16px;
            font-weight: 600;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .sidebar .logo .icon { font-size: 20px; }
        .sidebar .logo span { margin-left: 10px; }
        .sidebar .nav { padding: 10px 0; }
        .sidebar .nav-group { margin-bottom: 8px; }
        .sidebar .nav-group-title {
            padding: 8px 20px;
            font-size: 12px;
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
        }
        .sidebar .nav-item {
            padding: 10px 20px 10px 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: all 0.3s;
            font-size: 14px;
        }
        .sidebar .nav-item:hover { background: rgba(255,255,255,0.08); }
        .sidebar .nav-item.active { background: #1890ff; }
        .sidebar .nav-item .icon { font-size: 16px; margin-right: 10px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
        .sidebar .nav-item .icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
        .sidebar .nav-item .text { flex: 1; }
        .sidebar .nav-item .badge {
            background: #ff4d4f;
            color: #fff;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 11px;
        }
        .main { flex: 1; margin-left: 240px; }
        .header {
            height: 60px;
            background: #fff;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .header .title { font-size: 16px; font-weight: 500; color: #333; }
        .header .user { display: flex; align-items: center; gap: 12px; }
        .header .avatar {
            width: 36px; height: 36px; border-radius: 50%;
            background: #1890ff; color: #fff;
            display: flex; align-items: center; justify-content: center;
        }
        .content { padding: 24px; }
        .card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }
        .card-title {
            font-size: 16px; font-weight: 500; color: #333;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .card-title .actions { display: flex; gap: 8px; }
        .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .stat-card {
            background: #fff; border-radius: 8px; padding: 20px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            cursor: pointer;
            transition: all 0.3s;
        }
        .stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); }
        .stat-card .stat-icon {
            width: 48px; height: 48px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; margin-bottom: 12px;
        }
        .stat-card .stat-icon svg { width: 28px; height: 28px; stroke-width: 2; fill: none; }
        .stat-card .stat-icon.blue { background: #e6f7ff; }
        .stat-card .stat-icon.blue svg { stroke: #1890ff; }
        .stat-card .stat-icon.green { background: #f6ffed; }
        .stat-card .stat-icon.green svg { stroke: #52c41a; }
        .stat-card .stat-icon.orange { background: #fff7e6; }
        .stat-card .stat-icon.orange svg { stroke: #fa8c16; }
        .stat-card .stat-icon.red { background: #fff1f0; }
        .stat-card .stat-icon.red svg { stroke: #ff4d4f; }
        .stat-card .stat-value { font-size: 28px; font-weight: 600; color: #333; }
        .stat-card .stat-label { font-size: 14px; color: #999; margin-top: 4px; }
        .stat-card .stat-change { font-size: 12px; margin-top: 8px; }
        .stat-card .stat-change.up { color: #52c41a; }
        .stat-card .stat-change.down { color: #ff4d4f; }
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #e8e8e8;
        }
        .table th { background: #fafafa; font-weight: 500; color: #333; }
        .table tr:hover { background: #fafafa; cursor: pointer; }
        .badge {
            display: inline-block; padding: 2px 8px; border-radius: 4px;
            font-size: 12px;
        }
        .badge-success { background: #f6ffed; color: #52c41a; }
        .badge-warning { background: #fff7e6; color: #fa8c16; }
        .badge-danger { background: #fff1f0; color: #ff4d4f; }
        .badge-info { background: #e6f7ff; color: #1890ff; }
        .badge-default { background: #f5f5f5; color: #666; }
        .btn {
            padding: 6px 16px; border-radius: 4px; border: none;
            font-size: 14px; cursor: pointer; transition: all 0.3s;
        }
        .btn-primary { background: #1890ff; color: #fff; }
        .btn-primary:hover { background: #40a9ff; }
        .btn-default { background: #fff; color: #333; border: 1px solid #d9d9d9; }
        .btn-default:hover { border-color: #1890ff; color: #1890ff; }
        .btn-danger { background: #ff4d4f; color: #fff; }
        .btn-danger:hover { background: #ff7875; }
        .btn-success { background: #52c41a; color: #fff; }
        .btn-success:hover { background: #73d13d; }
        .btn-warning { background: #fa8c16; color: #fff; }
        .btn-warning:hover { background: #ffb143; }
        .btn-sm { padding: 4px 12px; font-size: 12px; }
        .btn-link { background: none; border: none; color: #1890ff; padding: 0; }
        .btn-link:hover { text-decoration: underline; }
        .form-group { margin-bottom: 16px; }
        .form-label { display: block; font-size: 14px; color: #333; margin-bottom: 8px; }
        .form-input {
            width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9;
            border-radius: 4px; font-size: 14px;
        }
        .form-input:focus { outline: none; border-color: #1890ff; }
        .form-row { display: flex; gap: 16px; }
        .form-row .form-group { flex: 1; }
        .search-bar { display: flex; gap: 12px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
        .search-bar .form-input { width: 200px; }
        .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
        .pagination .page-item {
            padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px;
            cursor: pointer; font-size: 14px;
        }
        .pagination .page-item.active { background: #1890ff; color: #fff; border-color: #1890ff; }
        .pagination .page-item:hover { border-color: #1890ff; color: #1890ff; }
        .pagination .page-item.disabled { opacity: 0.5; cursor: not-allowed; }
        .modal-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5); display: none;
            align-items: center; justify-content: center; z-index: 1000;
        }
        .modal-overlay.show { display: flex; }
        .modal {
            background: #fff; border-radius: 8px; width: 600px;
            max-height: 80vh; overflow-y: auto;
        }
        .modal-header {
            padding: 16px 20px; border-bottom: 1px solid #e8e8e8;
            display: flex; justify-content: space-between; align-items: center;
        }
        .modal-header .close { font-size: 20px; cursor: pointer; color: #999; transition: color 0.3s; }
        .modal-header .close:hover { color: #333; }
        .modal-body { padding: 20px; }
        .modal-footer { padding: 16px 20px; border-top: 1px solid #e8e8e8; text-align: right; gap: 8px; display: flex; justify-content: flex-end; }
        .tag { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; }
        .tag-blue { background: #e6f7ff; color: #1890ff; }
        .tag-green { background: #f6ffed; color: #52c41a; }
        .tag-orange { background: #fff7e6; color: #fa8c16; }
        .tag-red { background: #fff1f0; color: #ff4d4f; }
        .page { display: none; }
        .page.active { display: block; }
        .hidden { display: none; }

        /* Toast 通知样式 */
        .toast {
            position: fixed;
            top: 80px;
            right: 24px;
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 2000;
            animation: slideIn 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .toast.success { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
        .toast.error { background: #fff1f0; color: #ff4d4f; border: 1px solid #ffccc7; }
        .toast.warning { background: #fff7e6; color: #fa8c16; border: 1px solid #ffe58f; }
        .toast.info { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }

        /* 详情样式 */
        .detail-item {
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .detail-item:last-child { border-bottom: none; }
        .detail-item .label { width: 100px; color: #999; font-size: 14px; }
        .detail-item .value { flex: 1; color: #333; font-size: 14px; }
        .detail-item .value.success { color: #52c41a; }
        .detail-item .value.warning { color: #fa8c16; }
        .detail-item .value.danger { color: #ff4d4f; }

        /* 设备状态指示 */
        .status-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 6px;
        }
        .status-dot.running { background: #52c41a; }
        .status-dot.idle { background: #fa8c16; }
        .status-dot.fault { background: #ff4d4f; }
        .status-dot.offline { background: #999; }

        /* 图表占位 */
        .chart-placeholder {
            height: 300px; background: #fafafa; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            color: #999; font-size: 14px;
        }

        /* 进度条 */
        .progress-bar {
            height: 8px;
            background: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
        }
        .progress-bar .fill {
            height: 100%;
            background: #1890ff;
            transition: width 0.3s;
        }
        .progress-bar .fill.success { background: #52c41a; }
        .progress-bar .fill.warning { background: #fa8c16; }
        .progress-bar .fill.danger { background: #ff4d4f; }

        /* 筛选标签 */
        .filter-tags { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
        .filter-tag {
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 12px;
            cursor: pointer;
            border: 1px solid #d9d9d9;
            background: #fff;
            transition: all 0.3s;
        }
        .filter-tag:hover { border-color: #1890ff; color: #1890ff; }
        .filter-tag.active { background: #1890ff; color: #fff; border-color: #1890ff; }

        /* 状态卡片 */
        .status-filter-card {
            padding: 16px; text-align: center; cursor: pointer;
            border-radius: 8px; background: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            transition: all 0.3s;
        }
        .status-filter-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); }
        .status-filter-card.active { border: 2px solid #1890ff; }

        /* 步骤指示器 */
        .steps {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        .step {
            display: flex;
            align-items: center;
        }
        .step .num {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #d9d9d9;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        .step.active .num { background: #1890ff; }
        .step.done .num { background: #52c41a; }
        .step .text {
            margin-left: 8px;
            font-size: 14px;
            color: #999;
        }
        .step.active .text { color: #333; font-weight: 500; }
        .step-line {
            width: 40px;
            height: 2px;
            background: #d9d9d9;
            margin: 0 8px;
        }
        .step-line.done { background: #52c41a; }

        /* 工单状态流程 */
        .order-status-flow {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .status-node {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            background: #f5f5f5;
            color: #999;
        }
        .status-node.active {
            background: #e6f7ff;
            color: #1890ff;
        }
        .status-node.done {
            background: #f6ffed;
            color: #52c41a;
        }
        .status-arrow {
            color: #d9d9d9;
            font-size: 12px;
        }

        /* 二级交互弹窗 */
        .sub-modal-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.6); display: none;
            align-items: center; justify-content: center; z-index: 2000;
        }
        .sub-modal-overlay.show { display: flex; }
        .sub-modal {
            background: #fff; border-radius: 8px; width: 500px;
            max-height: 70vh; overflow-y: auto;
        }
        .sub-modal-header {
            padding: 16px 20px; border-bottom: 1px solid #e8e8e8;
            display: flex; justify-content: space-between; align-items: center;
        }
        .sub-modal-body { padding: 20px; }
        .sub-modal-footer { padding: 16px 20px; border-top: 1px solid #e8e8e8; display: flex; justify-content: flex-end; gap: 8px; }
    </style>
</head>
<body>
    <div class="layout">
        <div class="sidebar">
            <div class="logo">
                <span class="icon">
                    <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                </span>
                <span>洗衣厂管理平台</span>
            </div>
            <div class="nav">
                <div class="nav-group">
                    <div class="nav-group-title">管理中心</div>
                    <div class="nav-item active" onclick="switchPage('dashboard')">
                        <span class="icon">
                            <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
                        </span>
                        <span class="text">数据看板</span>
                    </div>
                    <div class="nav-item" onclick="switchPage('production')">
                        <span class="icon">
                            <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                        </span>
                        <span class="text">生产管理</span>
                    </div>
                    <div class="nav-item" onclick="switchPage('equipment')">
                        <span class="icon">
                            <svg viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 12h.01M10 12h.01M14 12h.01M18 12h.01"/><path d="M6 2v4M18 2v4"/></svg>
                        </span>
                        <span class="text">设备管理</span>
                    </div>
                    <div class="nav-item" onclick="switchPage('customer')">
                        <span class="icon">
                            <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                        </span>
                        <span class="text">客户管理</span>
                    </div>
                </div>
                <div class="nav-group">
                    <div class="nav-group-title">运营分析</div>
                    <div class="nav-item" onclick="switchPage('order')">
                        <span class="icon">
                            <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                        </span>
                        <span class="text">订单管理</span>
                    </div>
                    <div class="nav-item" onclick="switchPage('quality')">
                        <span class="icon">
                            <svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        </span>
                        <span class="text">质量管理</span>
                    </div>
                    <div class="nav-item" onclick="switchPage('linens')">
                        <span class="icon">
                            <svg viewBox="0 0 24 24"><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"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
                        </span>
                        <span class="text">布草管理</span>
                    </div>
                </div>
                <div class="nav-group">
                    <div class="nav-group-title">系统设置</div>
                    <div class="nav-item" onclick="switchPage('settings')">
                        <span class="icon">
                            <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                        </span>
                        <span class="text">系统设置</span>
                    </div>
                    <div class="nav-item" onclick="switchPage('alarm')">
                        <span class="icon">
                            <svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                        </span>
                        <span class="text">告警中心</span>
                        <span class="badge">3</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="main">
            <div class="header">
                <div class="title" id="pageTitle">数据看板</div>
                <div class="user">
                    <span style="color:#999;font-size:12px;">2026-05-13 09:39</span>
                    <div class="avatar">张</div>
                    <span>管理员</span>
                </div>
            </div>

            <div class="content">
                <!-- 数据看板 -->
                <div id="dashboardPage" class="page active">
                    <div class="stat-grid">
                        <div class="stat-card" onclick="switchPage('order')">
                            <div class="stat-icon blue">
                                <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
                            </div>
                            <div class="stat-value" id="statOrders">1,256</div>
                            <div class="stat-label">今日订单量</div>
                            <div class="stat-change up">较昨日 +12%</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon green">
                                <svg viewBox="0 0 24 24"><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"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
                            </div>
                            <div class="stat-value" id="statOutput">892</div>
                            <div class="stat-label">今日产量(件)</div>
                            <div class="stat-change up">较昨日 +8%</div>
                        </div>
                        <div class="stat-card" onclick="switchPage('production')">
                            <div class="stat-icon orange">
                                <svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                            </div>
                            <div class="stat-value" id="statProgress">78%</div>
                            <div class="stat-label">完成率</div>
                            <div class="stat-change down">较昨日 -2%</div>
                        </div>
                        <div class="stat-card" onclick="switchPage('alarm')">
                            <div class="stat-icon red">
                                <svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                            </div>
                            <div class="stat-value" id="statAlerts">3</div>
                            <div class="stat-label">待处理告警</div>
                            <div class="stat-change down">-2 较昨日</div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-title">
                            设备状态总览
                            <div class="actions">
                                <button class="btn btn-sm btn-default" onclick="switchPage('equipment')">查看全部</button>
                            </div>
                        </div>
                        <div id="equipmentStatusGrid" style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;">
                            <!-- 动态渲染 -->
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-title">
                            生产进度追踪
                            <div class="actions">
                                <button class="btn btn-sm btn-primary" onclick="showModal('dispatchModal')">调度工单</button>
                            </div>
                        </div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>工单号</th>
                                    <th>客户</th>
                                    <th>品类</th>
                                    <th>数量</th>
                                    <th>当前工序</th>
                                    <th>进度</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="productionTable">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                    </div>

                    <div class="card">
                        <div class="card-title">今日产值趋势</div>
                        <div class="chart-placeholder">[产值趋势图表]</div>
                    </div>
                </div>

                <!-- 生产管理 -->
                <div id="productionPage" class="page">
                    <div class="search-bar">
                        <input type="text" class="form-input" placeholder="搜索工单号/客户" id="productionSearch">
                        <select class="form-input" style="width:120px" id="productionStatusFilter">
                            <option value="">全部状态</option>
                            <option value="待分拣">待分拣</option>
                            <option value="洗涤中">洗涤中</option>
                            <option value="烘干中">烘干中</option>
                            <option value="烫平中">烫平中</option>
                            <option value="已完成">已完成</option>
                        </select>
                        <button class="btn btn-primary" onclick="showModal('createOrderModal')">创建工单</button>
                    </div>

                    <div class="card">
                        <div class="card-title">工单列表</div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>工单号</th>
                                    <th>客户</th>
                                    <th>品类</th>
                                    <th>数量</th>
                                    <th>要求时间</th>
                                    <th>当前工序</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="workOrderTable">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                        <div class="pagination" id="workOrderPagination">
                            <div class="page-item" id="prevPage" onclick="changePage(-1)"><</div>
                            <div class="page-item active" onclick="goToPage(1)">1</div>
                            <div class="page-item" onclick="goToPage(2)">2</div>
                            <div class="page-item" onclick="goToPage(3)">3</div>
                            <div class="page-item" id="nextPage" onclick="changePage(1)">></div>
                        </div>
                    </div>
                </div>

                <!-- 设备管理 -->
                <div id="equipmentPage" class="page">
                    <div class="search-bar">
                        <select class="form-input" style="width:120px" id="equipmentTypeFilter">
                            <option value="">全部设备</option>
                            <option value="洗脱机">洗脱机</option>
                            <option value="烘干机">烘干机</option>
                            <option value="烫平机">烫平机</option>
                            <option value="折叠机">折叠机</option>
                        </select>
                        <input type="hidden" id="equipmentStatusFilter" value="">
                        <button class="btn btn-primary" onclick="showModal('addDeviceModal')">添加设备</button>
                    </div>

                    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px;">
                        <div class="status-filter-card" id="filterRunning" onclick="filterByStatus('运行中')">
                            <div class="stat-value" style="color:#52c41a" id="equipRunning">12</div>
                            <div class="stat-label">运行中</div>
                        </div>
                        <div class="status-filter-card" id="filterIdle" onclick="filterByStatus('待机')">
                            <div class="stat-value" style="color:#fa8c16" id="equipIdle">5</div>
                            <div class="stat-label">待机</div>
                        </div>
                        <div class="status-filter-card" id="filterFault" onclick="filterByStatus('故障')">
                            <div class="stat-value" style="color:#ff4d4f" id="equipFault">2</div>
                            <div class="stat-label">故障</div>
                        </div>
                        <div class="status-filter-card" id="filterOffline" onclick="filterByStatus('离线')">
                            <div class="stat-value" style="color:#999" id="equipOffline">1</div>
                            <div class="stat-label">离线</div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-title">设备列表</div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>设备编号</th>
                                    <th>设备名称</th>
                                    <th>类型</th>
                                    <th>运行时长</th>
                                    <th>状态</th>
                                    <th>当前任务</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="equipmentTable">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 客户管理 -->
                <div id="customerPage" class="page">
                    <div class="search-bar">
                        <input type="text" class="form-input" placeholder="搜索客户名称" id="customerSearch">
                        <button class="btn btn-primary" onclick="showModal('addCustomerModal')">添加客户</button>
                    </div>

                    <div class="card">
                        <div class="card-title">客户列表</div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>客户名称</th>
                                    <th>联系人</th>
                                    <th>电话</th>
                                    <th>服务协议</th>
                                    <th>本月订单</th>
                                    <th>欠款</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="customerTable">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 订单管理 -->
                <div id="orderPage" class="page">
                    <div class="search-bar">
                        <input type="text" class="form-input" placeholder="搜索订单号/客户" id="orderSearch">
                        <select class="form-input" style="width:120px" id="orderStatusFilter">
                            <option value="">全部状态</option>
                            <option value="待接单">待接单</option>
                            <option value="已接单">已接单</option>
                            <option value="洗涤中">洗涤中</option>
                            <option value="已发货">已发货</option>
                            <option value="已完成">已完成</option>
                        </select>
                        <button class="btn btn-primary" onclick="showModal('createOrderModal')">新建订单</button>
                    </div>

                    <div class="card">
                        <div class="card-title">订单列表</div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>订单号</th>
                                    <th>客户</th>
                                    <th>品类</th>
                                    <th>数量</th>
                                    <th>金额</th>
                                    <th>下单时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="orderTable">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 质量管理 -->
                <div id="qualityPage" class="page">
                    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px;">
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-value" style="color:#52c41a">98.5%</div>
                            <div class="stat-label">今日合格率</div>
                        </div>
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-value" style="color:#fa8c16">12</div>
                            <div class="stat-label">返洗数量</div>
                        </div>
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-value" style="color:#ff4d4f">3</div>
                            <div class="stat-label">报废数量</div>
                        </div>
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-value" style="color:#1890ff">156</div>
                            <div class="stat-label">质检工单</div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-title">质检记录</div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>工单号</th>
                                    <th>客户</th>
                                    <th>质检时间</th>
                                    <th>合格数量</th>
                                    <th>不合格</th>
                                    <th>处理方式</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody id="qualityTable">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 布草管理 -->
                <div id="linensPage" class="page">
                    <div class="search-bar">
                        <input type="text" class="form-input" placeholder="搜索布草编号/RFID" id="linensSearch">
                        <button class="btn btn-primary" onclick="showModal('scanLinenModal')">扫码入库</button>
                        <button class="btn btn-default" onclick="showModal('inventoryModal')">库存盘点</button>
                    </div>

                    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px;">
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-value" style="color:#1890ff">5,680</div>
                            <div class="stat-label">干净布草</div>
                        </div>
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-value" style="color:#fa8c16">1,230</div>
                            <div class="stat-label">待洗布草</div>
                        </div>
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-value" style="color:#ff4d4f">45</div>
                            <div class="stat-label">损耗数量</div>
                        </div>
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-value" style="color:#999">12</div>
                            <div class="stat-label">报废数量</div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-title">布草档案</div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>布草编号</th>
                                    <th>品类</th>
                                    <th>材质</th>
                                    <th>洗涤次数</th>
                                    <th>当前状态</th>
                                    <th>所属客户</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="linensTable">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 系统设置 -->
                <div id="settingsPage" class="page">
                    <div class="card">
                        <div class="card-title">用户管理</div>
                        <div class="search-bar">
                            <input type="text" class="form-input" placeholder="搜索用户名" id="userSearch">
                            <button class="btn btn-primary" onclick="showModal('addUserModal')">添加用户</button>
                        </div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>用户ID</th>
                                    <th>用户名</th>
                                    <th>角色</th>
                                    <th>手机</th>
                                    <th>最后登录</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="userTable">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                    </div>

                    <div class="card">
                        <div class="card-title">基础参数配置</div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">公司名称</label>
                                <input type="text" class="form-input" id="companyName" value="阳光洗衣厂">
                            </div>
                            <div class="form-group">
                                <label class="form-label">联系电话</label>
                                <input type="text" class="form-input" id="companyPhone" value="400-888-8888">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">洗涤工艺流程</label>
                            <div class="filter-tags" id="processTags">
                                <span class="filter-tag active" onclick="toggleProcessTag(this)">收布草</span>
                                <span class="filter-tag active" onclick="toggleProcessTag(this)">分拣</span>
                                <span class="filter-tag active" onclick="toggleProcessTag(this)">洗脱</span>
                                <span class="filter-tag active" onclick="toggleProcessTag(this)">烘干</span>
                                <span class="filter-tag active" onclick="toggleProcessTag(this)">烫平</span>
                                <span class="filter-tag active" onclick="toggleProcessTag(this)">折叠</span>
                                <span class="filter-tag active" onclick="toggleProcessTag(this)">质检</span>
                                <span class="filter-tag active" onclick="toggleProcessTag(this)">打包</span>
                            </div>
                        </div>
                        <button class="btn btn-primary" onclick="saveSettings()">保存配置</button>
                    </div>
                </div>

                <!-- 告警中心 -->
                <div id="alarmPage" class="page">
                    <div class="filter-tags" id="alarmFilterTags">
                        <span class="filter-tag active" onclick="filterAlarm('all', this)">全部 (3)</span>
                        <span class="filter-tag" onclick="filterAlarm('设备故障', this)">设备故障 (2)</span>
                        <span class="filter-tag" onclick="filterAlarm('参数超限', this)">参数超限 (1)</span>
                        <span class="filter-tag" onclick="filterAlarm('能耗异常', this)">能耗异常 (0)</span>
                    </div>

                    <div class="card" id="alarmList">
                        <!-- 动态渲染 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建工单弹窗 -->
    <div class="modal-overlay" id="createOrderModal">
        <div class="modal">
            <div class="modal-header">
                <span>创建工单</span>
                <span class="close" onclick="closeModal('createOrderModal')">×</span>
            </div>
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">客户</label>
                        <select class="form-input" id="orderCustomer">
<option value="">请选择客户</option>
                            <option value="杭州希尔顿酒店">杭州希尔顿酒店</option>
                            <option value="上海JW万豪酒店">上海JW万豪酒店</option>
                            <option value="苏州香格里拉酒店">苏州香格里拉酒店</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">布草品类</label>
                        <select class="form-input" id="orderCategory">
                            <option value="床单">床单</option>
                            <option value="毛巾">毛巾</option>
                            <option value="枕套">枕套</option>
                            <option value="浴巾">浴巾</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">数量</label>
                        <input type="number" class="form-input" id="orderQty" placeholder="请输入数量" value="100">
                    </div>
                    <div class="form-group">
                        <label class="form-label">要求完成时间</label>
                        <input type="datetime-local" class="form-input" id="orderDeadline" value="2026-05-14T18:00">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">备注</label>
                    <textarea class="form-input" id="orderRemark" rows="2" placeholder="特殊要求">