```json
{
"summary": "将矿车运营数据仪表盘从深色主题转换为白色背景风格，采用白底灰卡、柔和阴影、琥珀金强调色的企业级设计，保持16:9比例、8项核心指标、折线/柱状图和数据明细表完整功能。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>矿车生产运营数据统计</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;80…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --bg-page: #f2f4f7;\n --bg-panel: #fafbfc;\n --bg-card: #ffffff;\n --bg-elevated: #f8f9fb;\n --bg-table-stripe: #f9fafb;\n --border: #e2e5ea;\n --border-light: #edf0f4;\n --border-active: #c8cdd6;\n --text-primary: #11161e;\n --text-secondary: #5a6072;\n --text-muted: #9aa0af;\n --accent-amber: #c7871c;\n --accent-amber-light: #f5e6cc;\n --accent-amber-glow: rgba(199, 135, 28, 0.18);\n --accent-orange: #e8722a;\n --accent-teal: #0d9488;\n --accent-cyan: #0e7bb5;\n --accent-red: #d93b3b;\n --accent-purple: #7c3aed;\n --accent-green: #16a34a;\n --accent-blue: #2563eb;\n --radius-sm: 4px;\n --radius: 8px;\n --radius-lg: 12px;\n --radius-xl: 16px;\n --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);\n --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);\n --shadow-card: 0 2px 8px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);\n --shadow-elevated: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);\n --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);\n --font-display: 'Outfit', 'Noto Sans SC', sans-serif;\n --font-body: 'Noto Sans SC', 'Outfit', sans-serif;\n --font-mono: 'Outfit', monospace;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n background: var(--bg-page);\n color: var(--text-primary);\n font-family: var(--font-body);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 14px;\n background-image:\n radial-gradient(ellipse at 20% 15%, rgba(199,135,28,0.04) 0%, transparent 55%),\n radial-gradient(ellipse at 75% 85%, rgba(14,123,181,0.03) 0%, transparent 55%),\n radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.01) 0%, transparent 100%);\n }\n\n .dashboard {\n width: 100%;\n max-width: 1600px;\n aspect-ratio: 16 / 9;\n max-height: calc(100vh - 28px);\n display: flex;\n flex-direction: column;\n gap: 10px;\n background: var(--bg-panel);\n border-radius: var(--radius-xl);\n padding: 18px 22px;\n box-shadow: var(--shadow-elevated);\n border: 1px solid var(--border);\n position: relative;\n overflow: hidden;\n }\n\n .dashboard::before {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n background:\n linear-gradient(180deg, rgba(199,135,28,0.025) 0%, transparent 30%),\n linear-gradient(0deg, rgba(14,123,181,0.015) 0%, transparent 40%);\n border-radius: var(--radius-xl);\n z-index: 0;\n }\n\n .dashboard > * { position: relative; z-index: 1; }\n\n /* ============ HEADER ============ */\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-shrink: 0;\n padding-bottom: 10px;\n border-bottom: 1px solid var(--border-light);\n }\n\n .header-left {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .logo-mark {\n width: 36px;\n height: 36px;\n background: linear-gradient(135deg, var(--accent-amber), #a0681a);\n border-radius: var(--radius);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 17px;\n color: #ffffff;\n font-weight: 700;\n flex-shrink: 0;\n box-shadow: 0 2px 12px var(--accent-amber-glow);\n }\n\n .header-title h1 {\n font-family: var(--font-display);\n font-size: clamp(16px, 1.4vw, 22px);\n font-weight: 700;\n letter-spacing: 0.02em;\n color: var(--text-primary);\n line-height: 1.1;\n }\n\n .header-title span {\n font-size: 11px;\n color: var(--text-muted);\n font-weight: 400;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n }\n\n .header-right {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n justify-content: flex-end;\n }\n\n .btn-group {\n display: flex;\n background: var(--bg-card);\n border-radius: var(--radius);\n border: 1px solid var(--border);\n overflow: hidden;\n box-shadow: var(--shadow-xs);\n }\n\n .btn-group button {\n background: transparent;\n border: none;\n color: var(--text-secondary);\n padding: 7px 14px;\n cursor: pointer;\n font-family: var(--font-display);\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0.02em;\n transition: all var(--transition-base);\n white-space: nowrap;\n position: relative;\n }\n\n .btn-group button:not(:last-child)::after {\n content: '';\n position: absolute;\n right: 0;\n top: 20%;\n height: 60%;\n width: 1px;\n background: var(--border);\n }\n\n .btn-group button:hover { color: var(--text-primary); background: var(--bg-elevated); }\n .btn-group button.active {\n color: #ffffff;\n background: var(--accent-amber);\n box-shadow: 0 0 14px var(--accent-amber-glow);\n border-radius: 0;\n }\n .btn-group button.active::after { display: none; }\n .btn-group button:first-child.active { border-radius: var(--radius) 0 0 var(--radius); }\n .btn-group button:last-child.active { border-radius: 0 var(--radius) var(--radius) 0; }\n .btn-group button:only-child.active { border-radius: var(--radius); }\n\n .date-input {\n background: var(--bg-card);\n border: 1px solid var(--border);\n color: var(--text-primary);\n padding: 7px 10px;\n border-radius: var(--radius);\n font-family: var(--font-display);\n font-size: 13px;\n outline: none;\n transition: all var(--transition-base);\n width: 130px;\n cursor: pointer;\n box-shadow: var(--shadow-xs);\n }\n\n .date-input:focus { border-color: var(--accent-amber); box-shadow: 0 0 0 3px var(--accent-amber-glow); }\n\n .date-separator {\n color: var(--text-muted);\n font-size: 12px;\n font-weight: 500;\n }\n\n .btn-action {\n background: var(--bg-card);\n border: 1px solid var(--border);\n color: var(--text-secondary);\n width: 34px;\n height: 34px;\n border-radius: var(--radius);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all var(--transition-base);\n font-size: 14px;\n box-shadow: var(--shadow-xs);\n }\n\n .btn-action:hover { color: var(--text-primary); border-color: var(--border-active); background: var(--bg-elevated); }\n\n .btn-primary {\n background: linear-gradient(135deg, var(--accent-amber), #a0681a);\n border: none;\n color: #ffffff;\n padding: 7px 18px;\n border-radius: var(--radius);\n cursor: pointer;\n font-family: var(--font-display);\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0.02em;\n transition: all var(--transition-base);\n white-space: nowrap;\n box-shadow: 0 2px 10px var(--accent-amber-glow);\n }\n\n .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 18px var(--accent-amber-glow); }\n .btn-primary:active { transform: scale(0.97); }\n\n /* ============ METRICS ROW ============ */\n .metrics-row {\n display: grid;\n grid-template-columns: repeat(8, 1fr);\n gap: 8px;\n flex-shrink: 0;\n }\n\n .metric-card {\n background: var(--bg-card);\n border-radius: var(--radius-lg);\n padding: 11px 13px;\n border: 1px solid var(--border-light);\n position: relative;\n overflow: hidden;\n transition: all var(--transition-base);\n cursor: default;\n display: flex;\n flex-direction: column;\n gap: 3px;\n box-shadow: var(--shadow-sm);\n }\n\n .metric-card:hover {\n border-color: var(--border-active);\n box-shadow: var(--shadow-elevated);\n transform: translateY(-2px);\n }\n\n .metric-card .card-indicator {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 3px;\n opacity: 0.85;\n }\n\n .metric-card:nth-child(1) .card-indicator { background: var(--accent-amber); }\n .metric-card:nth-child(2) .card-indicator { background: var(--accent-cyan); }\n .metric-card:nth-child(3) .card-indicator { background: var(--accent-teal); }\n .metric-card:nth-child(4) .card-indicator { background: var(--accent-orange); }\n .metric-card:nth-child(5) .card-indicator { background: var(--accent-purple); }\n .metric-card:nth-child(6) .card-indicator { background: var(--accent-blue); }\n .metric-card:nth-child(7) .card-indicator { background: var(--accent-green); }\n .metric-card:nth-child(8) .card-indicator { background: var(--accent-red); }\n\n .metric-card .card-icon {\n font-size: 11px;\n color: var(--text-muted);\n margin-bottom: 1px;\n }\n\n .metric-card .card-label {\n font-size: 10px;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n font-weight: 500;\n }\n\n .metric-card .card-value {\n font-family: var(--font-display);\n font-size: clamp(17px, 1.9vw, 25px);\n font-weight: 700;\n color: var(--text-primary);\n letter-spacing: -0.02em;\n line-height: 1;\n }\n\n .metric-card .card-sub {\n font-size: 10px;\n color: var(--text-muted);\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .metric-card .card-sub .trend-up { color: var(--accent-green); }\n .metric-card .card-sub .trend-down { color: var(--accent-red); }\n\n /* ============ CHARTS AREA ============ */\n .charts-area {\n display: grid;\n grid-template-columns: 1.4fr 1fr;\n gap: 10px;\n flex: 1;\n min-height: 0;\n }\n\n .chart-box {\n background: var(--bg-card);\n border-radius: var(--radius-lg);\n border: 1px solid var(--border-light);\n padding: 14px 16px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-shadow: var(--shadow-sm);\n }\n\n .chart-box-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n margin-bottom: 8px;\n }\n\n .chart-box-title {\n font-family: var(--font-display);\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0.03em;\n color: var(--text-secondary);\n text-transform: uppercase;\n }\n\n .chart-legend {\n display: flex;\n gap: 10px;\n font-size: 10px;\n color: var(--text-muted);\n flex-wrap: wrap;\n }\n\n .chart-legend span {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .chart-legend .dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n display: inline-block;\n }\n\n .chart-canvas-wrap {\n flex: 1;\n min-height: 0;\n position: relative;\n width: 100%;\n }\n\n .chart-canvas-wrap canvas {\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* ============ DATA TABLE ============ */\n .table-section {\n flex-shrink: 0;\n background: var(--bg-card);\n border-radius: var(--radius-lg);\n border: 1px solid var(--border-light);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n max-height: 155px;\n box-shadow: var(--shadow-sm);\n }\n\n .table-section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 16px;\n border-bottom: 1px solid var(--border-light);\n flex-shrink: 0;\n }\n\n .table-section-title {\n font-family: var(--font-display);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.03em;\n color: var(--text-secondary);\n text-transform: uppercase;\n }\n\n .table-wrap {\n overflow-y: auto;\n flex: 1;\n }\n\n .table-wrap::-webkit-scrollbar { width: 4px; }\n .table-wrap::-webkit-scrollbar-track { background: transparent; }\n .table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }\n\n table {\n width: 100%;\n border-collapse: collapse;\n font-size: 11px;\n font-family: var(--font-display);\n }\n\n thead th {\n text-align: left;\n padding: 7px 10px;\n color: var(--text-muted);\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n font-size: 10px;\n position: sticky;\n top: 0;\n background: var(--bg-card);\n z-index: 2;\n border-bottom: 1px solid var(--border-light);\n }\n\n tbody td {\n padding: 6px 10px;\n border-bottom: 1px solid var(--border-light);\n color: var(--text-primary);\n font-weight: 500;\n letter-spacing: 0.02em;\n }\n\n tbody tr { transition: background var(--transition-base); }\n tbody tr:nth-child(even) { background: var(--bg-table-stripe); }\n tbody tr:hover { background: rgba(199,135,28,0.05); }\n\n .cell-highlight {\n color: var(--accent-amber);\n font-weight: 700;\n }\n\n .cell-muted {\n color: var(--text-muted);\n }\n\n /* ============ TOAST ============ */\n .toast-container {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n gap: 8px;\n pointer-events: none;\n }\n\n .toast {\n background: #ffffff;\n border: 1px solid var(--border);\n border-left: 3px solid var(--accent-amber);\n color: var(--text-primary);\n padding: 10px 16px;\n border-radius: var(--radius);\n font-size: 12px;\n font-family: var(--font-body);\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n opacity: 0;\n transform: translateX(30px);\n transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: auto;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .toast.show {\n opacity: 1;\n transform: translateX(0);\n }\n\n .toast i { color: var(--accent-amber); font-size: 14px; }\n\n /* ============ RESPONSIVE ============ */\n @media (max-width: 1400px) {\n .metrics-row { grid-template-columns: repeat(4, 1fr); }\n .charts-area { grid-template-columns: 1fr; }\n .dashboard { aspect-ratio: auto; max-height: none; }\n .chart-box { min-height: 220px; }\n }\n\n @media (max-width: 900px) {\n .metrics-row { grid-template-columns: repeat(3, 1fr); }\n .header { flex-direction: column; align-items: stretch; }\n .header-right { justify-content: flex-start; }\n .date-input { width: 100px; }\n .dashboard { padding: 12px; }\n }\n\n @media (max-width: 600px) {\n .metrics-row { grid-template-columns: repeat(2, 1fr); }\n .btn-group button { padding: 6px 10px; font-size: 11px; }\n .date-input { width: 85px; font-size: 11px; }\n .header-right { gap: 4px; }\n table { font-size: 10px; }\n thead th, tbody td { padding: 5px 6px; }\n }\n\n @media print {\n body { background: #fff; padding: 0; }\n .dashboard { box-shadow: none; border: none; aspect-ratio: auto; max-height: none; }\n .btn-primary, .btn-action, .btn-group { display: none; }\n .toast-container { display: none; }\n }\n </style>\n</head>\n<body>\n\n<div class=\"dashboard\" id=\"dashboard\">\n <!-- HEADER -->\n <div class=\"header\">\n <div class=\"header-left\">\n <div class=\"logo-mark\"><i class=\"fa-solid fa-truck\"></i></div>\n <div class=\"header-title\">\n <h1>矿车运营数据统计</h1>\n <span>Mining Truck Operations Analytics</span>\n </div>\n </div>\n <div class=\"header-right\">\n <div class=\"btn-group\" id=\"granularityGroup\">\n <button data-gran=\"day\" class=\"active\">按日</button>\n <button data-gran=\"month\">按月</button>\n <button data-gran=\"year\">按年</button>\n </div>\n <input type=\"date\" class=\"date-input\" id=\"startDate\" value=\"2026-04-01\">\n <span class=\"date-separator\">至</span>\n <input type=\"date\" class=\"date-input\" id=\"endDate\" value=\"2026-04-27\">\n <button class=\"btn-primary\" onclick=\"refreshData()\"><i class=\"fa-solid fa-arrows-rotate\"></i> 刷新</button>\n <button class=\"btn-action\" onclick=\"exportCSV()\" title=\"导出CSV\"><i class=\"fa-solid fa-file-csv\"></i></button>\n <button class=\"btn-action\" onclick=\"printDashboard()\" title=\"打印\"><i class=\"fa-solid fa-print\"></i></button>\n </div>\n </div>\n\n <!-- METRICS -->\n <div class=\"metrics-row\" id=\"metricsRow\">\n <!-- Injected by JS -->\n </div>\n\n <!-- CHARTS -->\n <div class=\"charts-area\">\n <div class=\"chart-box\" id=\"lineChartBox\">\n <div class=\"chart-box-header\">\n <span class=\"chart-box-title\"><i class=\"fa-solid fa-chart-line\"></i> 运行趋势分布</span>\n <div class=\"chart-legend\">\n <span><span class=\"dot\" style=\"background:#c7871c\"></span>运行时长</span>\n <span><span class=\"dot\" style=\"background:#0e7bb5\"></span>重车运行</span>\n <span><span class=\"dot\" style=\"background:#0d9488\"></span>作业时长</span>\n </div>\n </div>\n <div class=\"chart-canvas-wrap\"><canvas id=\"lineChart\"></canvas></div>\n </div>\n <div class=\"chart-box\" id=\"barChartBox\">\n <div class=\"chart-box-header\">\n <span class=\"chart-box-title\"><i class=\"fa-solid fa-chart-bar\"></i> 时长构成分布</span>\n <div class=\"chart-legend\">\n <span><span class=\"dot\" style=\"background:#e8722a\"></span>装载</span>\n <span><span class=\"dot\" style=\"background:#7c3aed\"></span>卸载</span>\n <span><span class=\"dot\" style=\"background:#16a34a\"></span>空返</span>\n <span><span class=\"dot\" style=\"background:#d93b3b\"></span>怠速</span>\n </div>\n </div>\n <div class=\"chart-canvas-wrap\"><canvas id=\"barChart\"></canvas></div>\n </div>\n </div>\n\n <!-- TABLE -->\n <div class=\"table-section\">\n <div class=\"table-section-header\">\n <span class=\"table-section-title\"><i class=\"fa-solid fa-table-list\"></i> 数据明细</span>\n <span style=\"font-size:10px;color:var(--text-muted)\" id=\"tableInfo\">共 0 条记录</span>\n </div>\n <div class=\"table-wrap\">\n <table>\n <thead>\n <tr>\n <th>周期</th>\n <th>运行时长(h)</th>\n <th>作业时长(h)</th>\n <th>循环次数</th>\n <th>怠速(h)</th>\n <th>装载(h)</th>\n <th>卸载(h)</th>\n <th>空返(h)</th>\n <th>重车(h)</th>\n </tr>\n </thead>\n <tbody id=\"tableBody\">\n <!-- Injected by JS -->\n </tbody>\n </table>\n </div>\n </div>\n</div>\n\n<div class=\"toast-container\" id=\"toastContainer\"></div>\n\n<script>\n(function() {\n 'use strict';\n\n // ============ STATE ============\n const state = {\n granularity: 'day',\n startDate: '2026-04-01',\n endDate: '2026-04-27',\n };\n\n // ============ DOM REFS ============\n const $ = (sel) => document.querySelector(sel);\n const $$ = (sel) => document.querySelectorAll(sel);\n\n const dom = {\n granularityGroup: $('#granularityGroup'),\n startDate: $('#startDate'),\n endDate: $('#endDate'),\n metricsRow: $('#metricsRow'),\n lineChart: $('#lineChart'),\n barChart: $('#barChart'),\n tableBody: $('#tableBody'),\n tableInfo: $('#tableInfo'),\n toastContainer: $('#toastContainer'),\n };\n\n // ============ TOAST ============\n function showToast(msg, icon) {\n const el = document.createElement('div');\n el.className = 'toast';\n el.innerHTML = `<i class=\"fa-solid ${icon || 'fa-circle-check'}\"></i>${msg}`;\n dom.toastContainer.appendChild(el);\n requestAnimationFrame(() => el.classList.add('show'));\n setTimeout(() => {\n el.classList.remove('show');\n setTimeout(() => el.remove(), 350);\n }, 2200);\n }\n\n // ============ DATA GENERATION ============\n function seedRandom(seed) {\n let s = seed;\n return function() {\n s = (s * 16807 + 0) % 2147483647;\n return (s - 1) / 2147483646;\n };\n }\n\n function generateRecords(granularity, start, end) {\n const records = [];\n const startD = new Date(start);\n const endD = new Date(end);\n\n if (isNaN(startD.getTime()) || isNaN(endD.getTime()) || startD > endD) {\n return records;\n }\n\n let labels = [];\n let current = new Date(startD);\n\n if (granularity === 'day') {\n while (current <= endD) {\n labels.push(new Date(current));\n current.setDate(current.getDate() + 1);\n }\n } else if (granularity === 'month') {\n current = new Date(startD.getFullYear(), startD.getMonth(), 1);\n const endMonth = new Date(endD.getFullYear(), endD.getMonth(), 1);\n while (current <= endMonth) {\n labels.push(new Date(current));\n current.setMonth(current.getMonth() + 1);\n }\n } else {\n current = new Date(startD.getFullYear(), 0, 1);\n const endYear = new Date(endD.getFullYear(), 0, 1);\n while (current <= endYear) {\n labels.push(new Date(current));\n current.setFullYear(current.getFullYear() + 1);\n }\n }\n\n // Cap records for performance\n if (labels.length > 120) {\n const step = Math.ceil(labels.length / 100);\n labels = labels.filter((_, i) => i % step === 0);\n }\n\n labels.forEach((d, i) => {\n const rng = seedRandom(d.getTime() % 100000 + i * 73);\n const cyclesBase = granularity === 'year' ? 4500 + rng() * 3000 : granularity === 'month' ? 380 + rng() * 250 : 15 + rng() * 12;\n const cycles = Math.round(cyclesBase);\n\n const idlePerCycle = 0.08 + rng() * 0.12;\n const loadPerCycle = 0.10 + rng() * 0.08;\n const unloadPerCycle = 0.03 + rng() * 0.04;\n const emptyReturnPerCycle = 0.12 + rng() * 0.10;\n const loadedRunPerCycle = 0.18 + rng() * 0.14;\n\n const idleTime = Math.round(cycles * idlePerCycle * 10) / 10;\n const loadTime = Math.round(cycles * loadPerCycle * 10) / 10;\n const unloadTime = Math.round(cycles * unloadPerCycle * 10) / 10;\n const emptyReturnTime = Math.round(cycles * emptyReturnPerCycle * 10) / 10;\n const loadedRunTime = Math.round(cycles * loadedRunPerCycle * 10) / 10;\n const workTime = Math.round((loadTime + unloadTime + loadedRunTime) * 10) / 10;\n const totalTime = Math.round((workTime + idleTime + emptyReturnTime) * 10) / 10;\n\n records.push({\n label: d,\n totalTime,\n workTime,\n cycles,\n idleTime,\n loadTime,\n unloadTime,\n emptyReturnTime,\n loadedRunTime,\n });\n });\n\n return records;\n }\n\n function formatLabel(d, granularity) {\n if (granularity === 'day') {\n return `${d.getMonth() + 1}/${d.getDate()}`;\n } else if (granularity === 'month') {\n return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, '0')}`;\n } else {\n return `${d.getFullYear()}`;\n }\n }\n\n function formatFullLabel(d, granularity) {\n if (granularity === 'day') {\n return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;\n } else if (granularity === 'month') {\n return `${d.getFullYear()}年${d.getMonth() + 1}月`;\n } else {\n return `${d.getFullYear()}年`;\n }\n }\n\n // ============ RENDER METRICS ============\n function renderMetrics(records) {\n if (records.length === 0) {\n const html = Array.from({ length: 8 }, () => `\n <div class=\"metric-card\">\n <div class=\"card-indicator\"></div>\n <div class=\"card-label\">--</div>\n <div class=\"card-value\">0</div>\n </div>`).join('');\n dom.metricsRow.innerHTML = html;\n return;\n }\n\n const sums = records.reduce((acc, r) => ({\n totalTime: acc.totalTime + r.totalTime,\n workTime: acc.workTime + r.workTime,\n cycles: acc.cycles + r.cycles,\n idleTime: acc.idleTime + r.idleTime,\n loadTime: acc.loadTime + r.loadTime,\n unloadTime: acc.unloadTime + r.unloadTime,\n emptyReturnTime: acc.emptyReturnTime + r.emptyReturnTime,\n loadedRunTime: acc.loadedRunTime + r.loadedRunTime,\n }), { totalTime: 0, workTime: 0, cycles: 0, idleTime: 0, loadTime: 0, unloadTime: 0, emptyReturnTime: 0, loadedRunTime: 0 });\n\n const cfg = [\n { icon: 'fa-clock', label: '运行时长', value: sums.totalTime.toFixed(1), unit: 'h', color: '#c7871c' },\n { icon: 'fa-gears', label: '作业时长', value: sums.workTime.toFixed(1), unit: 'h', color: '#0e7bb5' },\n { icon: 'fa-rotate', label: '循环次数', value: sums.cycles.toString(), unit: '次', color: '#0d9488' },\n { icon: 'fa-pause', label: '怠速时长', value: sums.idleTime.toFixed(1), unit: 'h', color: '#e8722a' },\n { icon: 'fa-arrow-down', label: '装载时长', value: sums.loadTime.toFixed(1), unit: 'h', color: '#7c3aed' },\n { icon: 'fa-arrow-up', label: '卸载时长', value: sums.unloadTime.toFixed(1), unit: 'h', color: '#2563eb' },\n { icon: 'fa-truck-fast', label: '空车返回', value: sums.emptyReturnTime.toFixed(1), unit: 'h', color: '#16a34a' },\n { icon: 'fa-weight-hanging', label: '重车运行', value: sums.loadedRunTime.toFixed(1), unit: 'h', color: '#d93b3b' },\n ];\n\n dom.metricsRow.innerHTML = cfg.map(c => `\n <div class=\"metric-card\">\n <div class=\"card-indicator\"></div>\n <div class=\"card-icon\"><i class=\"fa-solid ${c.icon}\"></i></div>\n <div class=\"card-label\">${c.label}</div>\n <div class=\"card-value\" style=\"color:${c.color}\">${c.value}</div>\n <div class=\"card-sub\">${c.unit}</div>\n </div>\n `).join('');\n }\n\n // ============ CANVAS CHARTS (Light Theme) ============\n function renderLineChart(canvas, records, granularity) {\n if (!canvas || records.length === 0) return;\n const dpr = window.devicePixelRatio || 1;\n const rect = canvas.parentElement.getBoundingClientRect();\n const w = rect.width;\n const h = rect.height;\n canvas.width = w * dpr;\n canvas.height = h * dpr;\n canvas.style.width = w + 'px';\n canvas.style.height = h + 'px';\n const ctx = canvas.getContext('2d');\n ctx.scale(dpr, dpr);\n\n const pad = { top: 14, right: 22, bottom: 32, left: 52 };\n const cw = w - pad.left - pad.right;\n const ch = h - pad.top - pad.bottom;\n\n ctx.clearRect(0, 0, w, h);\n\n const datasets = [\n { key: 'totalTime', color: '#c7871c', label: '运行时长' },\n { key: 'loadedRunTime', color: '#0e7bb5', label: '重车运行' },\n { key: 'workTime', color: '#0d9488', label: '作业时长' },\n ];\n\n let maxVal = 0;\n datasets.forEach(ds => {\n records.forEach(r => { if (r[ds.key] > maxVal) maxVal = r[ds.key]; });\n });\n maxVal = Math.ceil(maxVal * 1.15);\n if (maxVal === 0) maxVal = 10;\n\n // Grid lines\n const gridLines = 5;\n ctx.strokeStyle = '#e5e7ec';\n ctx.lineWidth = 1;\n for (let i = 0; i <= gridLines; i++) {\n const y = pad.top + (ch / gridLines) * i;\n ctx.beginPath();\n ctx.moveTo(pad.left, y);\n ctx.lineTo(w - pad.right, y);\n ctx.stroke();\n\n ctx.fillStyle = '#9aa0af';\n ctx.font = '10px Outfit, sans-serif';\n ctx.textAlign = 'right';\n const val = Math.round(maxVal - (maxVal / gridLines) * i);\n ctx.fillText(val, pad.left - 8, y + 4);\n }\n\n // X labels\n const xStep = cw / Math.max(records.length - 1, 1);\n const maxLabels = Math.min(records.length, 12);\n const labelStep = Math.max(1, Math.floor(records.length / maxLabels));\n ctx.fillStyle = '#9aa0af';\n ctx.font = '10px Outfit, sans-serif';\n ctx.textAlign = 'center';\n records.forEach((r, i) => {\n if (i % labelStep === 0 || i === records.length - 1) {\n const x = pad.left + xStep * i;\n ctx.fillText(formatLabel(r.label, granularity), x, pad.top + ch + 17);\n }\n });\n\n // Draw lines\n datasets.forEach((ds, di) => {\n ctx.strokeStyle = ds.color;\n ctx.lineWidth = 2.2;\n ctx.lineJoin = 'round';\n ctx.lineCap = 'round';\n ctx.beginPath();\n records.forEach((r, i) => {\n const x = pad.left + xStep * i;\n const y = pad.top + ch - (r[ds.key] / maxVal) * ch;\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n });\n ctx.stroke();\n\n // Dots\n records.forEach((r, i) => {\n const x = pad.left + xStep * i;\n const y = pad.top + ch - (r[ds.key] / maxVal) * ch;\n ctx.fillStyle = '#ffffff';\n ctx.beginPath();\n ctx.arc(x, y, 4, 0, Math.PI * 2);\n ctx.fill();\n ctx.fillStyle = ds.color;\n ctx.beginPath();\n ctx.arc(x, y, 2.5, 0, Math.PI * 2);\n ctx.fill();\n });\n });\n }\n\n function renderBarChart(canvas, records, granularity) {\n if (!canvas || records.length === 0) return;\n const dpr = window.devicePixelRatio || 1;\n const rect = canvas.parentElement.getBoundingClientRect();\n const w = rect.width;\n const h = rect.height;\n canvas.width = w * dpr;\n canvas.height = h * dpr;\n canvas.style.width = w + 'px';\n canvas.style.height = h + 'px';\n const ctx = canvas.getContext('2d');\n ctx.scale(dpr, dpr);\n\n const pad = { top: 14, right: 22, bottom: 32, left: 50 };\n const cw = w - pad.left - pad.right;\n const ch = h - pad.top - pad.bottom;\n\n ctx.clearRect(0, 0, w, h);\n\n const datasets = [\n { key: 'loadTime', color: '#e8722a', label: '装载' },\n { key: 'unloadTime', color: '#7c3aed', label: '卸载' },\n { key: 'emptyReturnTime', color: '#16a34a', label: '空返' },\n { key: 'idleTime', color: '#d93b3b', label: '怠速' },\n ];\n\n let maxStack = 0;\n records.forEach(r => {\n const stack = datasets.reduce((s, ds) => s + r[ds.key], 0);\n if (stack > maxStack) maxStack = stack;\n });\n maxStack = Math.ceil(maxStack * 1.2);\n if (maxStack === 0) maxStack = 10;\n\n // Grid\n const gridLines = 4;\n ctx.strokeStyle = '#e5e7ec';\n ctx.lineWidth = 1;\n for (let i = 0; i <= gridLines; i++) {\n const y = pad.top + (ch / gridLines) * i;\n ctx.beginPath();\n ctx.moveTo(pad.left, y);\n ctx.lineTo(w - pad.right, y);\n ctx.stroke();\n ctx.fillStyle = '#9aa0af';\n ctx.font = '10px Outfit, sans-serif';\n ctx.textAlign = 'right';\n ctx.fillText(Math.round(maxStack - (maxStack / gridLines) * i), pad.left - 8, y + 4);\n }\n\n // Max visible bars\n const maxBars = Math.min(records.length, 24);\n const step = Math.max(1, Math.floor(records.length / maxBars));\n const displayRecords = records.filter((_, i) => i % step === 0 || i === records.length - 1);\n const barGap = 3;\n const barTotalWidth = (cw / displayRecords.length) - barGap;\n if (barTotalWidth <= 0) return;\n\n displayRecords.forEach((r, di) => {\n const x = pad.left + (cw / displayRecords.length) * di + barGap / 2;\n let stackY = pad.top + ch;\n datasets.forEach((ds, dsi) => {\n const val = r[ds.key];\n const barH = (val / maxStack) * ch;\n const y = stackY - barH;\n ctx.fillStyle = ds.color;\n ctx.fillRect(x, y, barTotalWidth, barH);\n // subtle separator\n if (dsi > 0) {\n ctx.fillStyle = 'rgba(255,255,255,0.25)';\n ctx.fillRect(x, y, barTotalWidth, 0.8);\n }\n stackY = y;\n });\n\n // X label\n const labelStep2 = Math.max(1, Math.floor(displayRecords.length / 8));\n if (di % labelStep2 === 0 || di === displayRecords.length - 1) {\n ctx.fillStyle = '#9aa0af';\n ctx.font = '10px Outfit, sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText(formatLabel(r.label, granularity), x + barTotalWidth / 2, pad.top + ch + 17);\n }\n });\n }\n\n // ============ RENDER TABLE ============\n function renderTable(records, granularity) {\n dom.tableInfo.textContent = `共 ${records.length} 条记录`;\n if (records.length === 0) {\n dom.tableBody.innerHTML = '<tr><td colspan=\"9\" style=\"text-align:center;color:var(--text-muted);padding:20px;\">暂无数据</td></tr>';\n return;\n }\n\n const display = records.slice(-30);\n dom.tableBody.innerHTML = display.map(r => `\n <tr>\n <td>${formatFullLabel(r.label, granularity)}</td>\n <td class=\"cell-highlight\">${r.totalTime.toFixed(1)}</td>\n <td>${r.workTime.toFixed(1)}</td>\n <td>${r.cycles}</td>\n <td>${r.idleTime.toFixed(1)}</td>\n <td>${r.loadTime.toFixed(1)}</td>\n <td>${r.unloadTime.toFixed(1)}</td>\n <td>${r.emptyReturnTime.toFixed(1)}</td>\n <td>${r.loadedRunTime.toFixed(1)}</td>\n </tr>\n `).join('');\n }\n\n // ============ MAIN UPDATE ============\n let currentRecords = [];\n\n function updateDashboard(silent) {\n const records = generateRecords(state.granularity, state.startDate, state.endDate);\n currentRecords = records;\n\n renderMetrics(records);\n renderLineChart(dom.lineChart, records, state.granularity);\n renderBarChart(dom.barChart, records, state.granularity);\n renderTable(records, state.granularity);\n\n if (!silent) {\n showToast(`已加载 ${records.length} 条${state.granularity === 'day' ? '日' : state.granularity === 'month' ? '月' : '年'}度统计数据`, 'fa-circle-check');\n }\n }\n\n // ============ EVENT HANDLERS ============\n dom.granularityGroup.addEventListener('click', (e) => {\n const btn = e.target.closest('button');\n if (!btn) return;\n dom.granularityGroup.querySelectorAll('button').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n state.granularity = btn.dataset.gran;\n\n const now = new Date();\n if (state.granularity === 'day') {\n state.startDate = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10);\n state.endDate = now.toISOString().slice(0, 10);\n } else if (state.granularity === 'month') {\n state.startDate = new Date(now.getFullYear() - 1, now.getMonth(), 1).toISOString().slice(0, 10);\n state.endDate = now.toISOString().slice(0, 10);\n } else {\n state.startDate = new Date(now.getFullYear() - 4, 0, 1).toISOString().slice(0, 10);\n state.endDate = now.toISOString().slice(0, 10);\n }\n dom.startDate.value = state.startDate;\n dom.endDate.value = state.endDate;\n updateDashboard();\n });\n\n dom.startDate.addEventListener('change', () => {\n state.startDate = dom.startDate.value;\n updateDashboard();\n });\n\n dom.endDate.addEventListener('change', () => {\n state.endDate = dom.endDate.value;\n updateDashboard();\n });\n\n // ============ GLOBAL FUNCTIONS ============\n window.refreshData = function() {\n state.startDate = dom.startDate.value;\n state.endDate = dom.endDate.value;\n updateDashboard();\n };\n\n window.exportCSV = function() {\n if (currentRecords.length === 0) {\n showToast('无数据可导出', 'fa-triangle-exclamation');\n return;\n }\n let csv = '周期,运行时长(h),作业时长(h),循环次数,怠速时长(h),装载时长(h),卸载时长(h),空车返回(h),重车运行(h)\\n';\n currentRecords.forEach(r => {\n csv += [\n formatFullLabel(r.label, state.granularity),\n r.totalTime.toFixed(1),\n r.workTime.toFixed(1),\n r.cycles,\n r.idleTime.toFixed(1),\n r.loadTime.toFixed(1),\n r.unloadTime.toFixed(1),\n r.emptyReturnTime.toFixed(1),\n r.loadedRunTime.toFixed(1),\n ].join(',') + '\\n';\n });\n const blob = new Blob(['\\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `矿车运营数据_${state.granularity}_${state.startDate}_${state.endDate}.csv`;\n a.click();\n URL.revokeObjectURL(url);\n showToast('CSV 文件已下载', 'fa-file-csv');\n };\n\n window.printDashboard = function() {\n showToast('正在准备打印...', 'fa-print');\n setTimeout(() => window.print(), 400);\n };\n\n // ============ RESIZE ============\n let resizeTid;\n window.addEventListener('resize', () => {\n clearTimeout(resizeTid);\n resizeTid = setTimeout(() => {\n if (currentRecords.length > 0) {\n renderLineChart(dom.lineChart, currentRecords, state.granularity);\n renderBarChart(dom.barChart, currentRecords, state.granularity);\n }\n }, 250);\n });\n\n // ============ INIT ============\n function init() {\n const now = new Date();\n state.startDate = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10);\n state.endDate = now.toISOString().slice(0, 10);\n dom.startDate.value = state.startDate;\n dom.endDate.value = state.endDate;\n updateDashboard(true);\n }\n\n init();\n})();\n</script>\n\n</body>\n</html>"
},
"next": ["按矿车编号筛选数据", "添加实时数据看板", "生成PDF运营报告", "对比不同矿区数据", "设置异常阈值告警"],
"breakpoint": "none"
}
```
推理
用户想要将之前的深色主题矿车运营数据统计仪表盘改成白色背景的风格。我需要将整个设计从深色工业风转变为浅色/白色背景风格，同时保持16:9比例和所有功能。
让我重新设计：
- 白色/浅灰背景
- 保持琥珀色作为强调色，但调整整体配色
- 卡片使用白色背景，带微妙阴影
- 文字使用深色
- 边框使用浅灰色
- Canvas图表需要适配浅色背景
- 保持所有功能：时间粒度切换、日期选择、指标卡片、折线图、柱状图、数据表格
这是一个比较大的改动，需要重写CSS和调整JS中的颜色值。
让我也调用设计系统获取一些建议。
我需要：
1. 全新设计白色主题的CSS变量
2. 调整所有组件颜色
3. 修改Canvas图表的颜色和网格线颜色
4. 保持核心功能和布局不变
设计方向：干净、专业的白底企业级仪表盘，带有精致的阴影和微妙的琥珀色点缀。设计系统返回的是深色方案，但用户要白色背景。我需要自己设计白色主题。
让我设计一个干净的白色主题仪表盘：
**配色方案（白色主题）：**
- 背景：`#f5f6f8` 或 `#f0f2f5` - 浅灰底
- 卡片：`#ffffff` - 纯白卡片
- 文字主色：`#1a1d23` - 深色
- 文字次要：`#6b7280` - 灰色
- 边框：`#e5e7eb` - 浅灰边框
- 强调色：`#d4931a` 或 `#e8a820` - 琥珀金（保持工业感）
- 辅助色：`#3b82f6` 蓝、`#10b981` 绿、`#f59e0b` 橙、`#8b5cf6` 紫、`#ef4444` 红
**字体：** 保持 Rajdhani + Noto Sans SC 或换成 DM Sans / Outfit
让我重新构建整个设计。白色主题下需要注意：
- 阴影要更柔和
- Canvas图表的网格线用浅灰色
- Canvas图表的文字用深灰色
- 卡片需要有微妙的边界和阴影
保持16:9比例，所有功能不变。
我会采用干净现代的企业级白色仪表盘设计风格。使用：
- 白色卡片带微妙阴影
- 琥珀金作为主要强调色
- 顶部指标卡片保留彩色指示条
- Canvas图表适配浅色主题
- 表格使用白色背景，交替行色
让我重写完整的HTML。
让我重新设计：
- 白色/浅灰背景
- 保持琥珀色作为强调色，但调整整体配色
- 卡片使用白色背景，带微妙阴影
- 文字使用深色
- 边框使用浅灰色
- Canvas图表需要适配浅色背景
- 保持所有功能：时间粒度切换、日期选择、指标卡片、折线图、柱状图、数据表格
这是一个比较大的改动，需要重写CSS和调整JS中的颜色值。
让我也调用设计系统获取一些建议。
我需要：
1. 全新设计白色主题的CSS变量
2. 调整所有组件颜色
3. 修改Canvas图表的颜色和网格线颜色
4. 保持核心功能和布局不变
设计方向：干净、专业的白底企业级仪表盘，带有精致的阴影和微妙的琥珀色点缀。设计系统返回的是深色方案，但用户要白色背景。我需要自己设计白色主题。
让我设计一个干净的白色主题仪表盘：
**配色方案（白色主题）：**
- 背景：`#f5f6f8` 或 `#f0f2f5` - 浅灰底
- 卡片：`#ffffff` - 纯白卡片
- 文字主色：`#1a1d23` - 深色
- 文字次要：`#6b7280` - 灰色
- 边框：`#e5e7eb` - 浅灰边框
- 强调色：`#d4931a` 或 `#e8a820` - 琥珀金（保持工业感）
- 辅助色：`#3b82f6` 蓝、`#10b981` 绿、`#f59e0b` 橙、`#8b5cf6` 紫、`#ef4444` 红
**字体：** 保持 Rajdhani + Noto Sans SC 或换成 DM Sans / Outfit
让我重新构建整个设计。白色主题下需要注意：
- 阴影要更柔和
- Canvas图表的网格线用浅灰色
- Canvas图表的文字用深灰色
- 卡片需要有微妙的边界和阴影
保持16:9比例，所有功能不变。
我会采用干净现代的企业级白色仪表盘设计风格。使用：
- 白色卡片带微妙阴影
- 琥珀金作为主要强调色
- 顶部指标卡片保留彩色指示条
- Canvas图表适配浅色主题
- 表格使用白色背景，交替行色
让我重写完整的HTML。
角色
assistant
content
total_tokens
33529
summary
将矿车运营数据仪表盘从深色主题转换为白色背景风格，采用白底灰卡、柔和阴影、琥珀金强调色的企业级设计，保持16:9比例、8项核心指标、折线/柱状图和数据明细表完整功能。
uiParsing
关闭