矿车运营数据仪表盘设计：8项核心指标与三图联动分析

By 18561366332, 27 April, 2026

推理

用户要求去掉分组功能（按矿区、车辆类型、车辆），也就是说回到一个更简单的版本，不需要分组筛选。这意味着：

1. 去掉分组选择器（按矿区/按车辆类型/按车辆）
2. 去掉矿区、车辆类型、车辆的筛选下拉框
3. 图表不再按分组对比，而是显示汇总数据
4. 折线图不需要多条线（因为只有一个"全部"分组），只需要一条表示总运行时长的线
5. 柱状图还是按时间横轴的堆叠柱状
6. 占比面板不需要按分组显示多个横向条，可以改回环形图或单个横向条

让我重新设计一个简洁版本：
- 保留8项指标卡片
- 折线图：总运行时长+总作业时长+循环趋势（3条线，都是汇总数据）
- 堆叠柱状图：时间横轴，各时间段的构成分布（装载/重车/卸载/空返/怠速）
- 环形图：装载/行驶/卸载占比（汇总）
- 数据明细表

这样就是一个没有分组筛选的纯统计仪表盘。

角色

assistant

content

```json
{
"summary": "矿车运营数据统计仪表盘（无分组版），白底企业级设计，8项核心指标卡片，三图联动（折线趋势图/堆叠柱状时长构成图/环形占比图），横轴按日/月/年切换，日期区间选取，CSV导出与打印，去除了矿区/车辆类型/车辆分组筛选。",
"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=DM+Sans:opsz,wght@9..40,400;9…\" 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: #f5f6f8;\n --bg-panel: #fdfdfd;\n --bg-card: #ffffff;\n --bg-elevated: #fafbfc;\n --bg-stripe: #f8f9fb;\n --border: #e5e8ed;\n --border-light: #eff1f5;\n --border-active: #c9ced7;\n --text-primary: #0f172a;\n --text-secondary: #475569;\n --text-muted: #94a3b8;\n --accent-amber: #d4891a;\n --accent-cyan: #0d82b8;\n --accent-teal: #0f766e;\n --accent-orange: #ea570c;\n --accent-purple: #7c3aed;\n --accent-blue: #2563eb;\n --accent-green: #16a34a;\n --accent-red: #dc2626;\n --radius-sm: 4px;\n --radius: 8px;\n --radius-md: 10px;\n --radius-lg: 14px;\n --radius-xl: 18px;\n --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);\n --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);\n --shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);\n --shadow-elevated: 0 8px 28px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.03);\n --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);\n --font-display: 'DM Sans', 'Noto Sans SC', sans-serif;\n --font-body: 'Noto Sans SC', 'DM Sans', sans-serif;\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: 12px;\n background-image:\n radial-gradient(ellipse at 15% 10%, rgba(212,137,26,0.03) 0%, transparent 55%),\n radial-gradient(ellipse at 85% 90%, rgba(13,130,184,0.02) 0%, transparent 55%);\n }\n\n .dashboard {\n width: 100%;\n max-width: 1600px;\n aspect-ratio: 16 / 9;\n max-height: calc(100vh - 24px);\n display: flex;\n flex-direction: column;\n gap: 8px;\n background: var(--bg-panel);\n border-radius: var(--radius-xl);\n padding: 14px 18px;\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(212,137,26,0.012) 0%, transparent 25%),\n linear-gradient(0deg, rgba(13,130,184,0.008) 0%, transparent 35%);\n border-radius: var(--radius-xl);\n z-index: 0;\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: 12px;\n flex-shrink: 0;\n padding-bottom: 7px;\n border-bottom: 1px solid var(--border-light);\n }\n .header-left { display: flex; align-items: center; gap: 10px; }\n .logo-mark {\n width: 36px; height: 36px;\n background: linear-gradient(135deg, #d4891a, #b07214);\n border-radius: var(--radius);\n display: flex; align-items: center; justify-content: center;\n font-size: 17px; color: #ffffff; font-weight: 700; flex-shrink: 0;\n box-shadow: 0 2px 10px rgba(212,137,26,0.22);\n }\n .header-title h1 {\n font-family: var(--font-display);\n font-size: clamp(15px, 1.2vw, 20px);\n font-weight: 700; letter-spacing: -0.01em;\n color: var(--text-primary); line-height: 1.1;\n }\n .header-title span {\n font-size: 10px; color: var(--text-muted); font-weight: 500;\n letter-spacing: 0.06em; text-transform: uppercase;\n }\n .header-right {\n display: flex; align-items: center; gap: 7px;\n flex-wrap: wrap; justify-content: flex-end;\n }\n\n .btn-group {\n display: flex; background: var(--bg-card);\n border-radius: var(--radius); border: 1px solid var(--border);\n overflow: hidden; box-shadow: var(--shadow-xs);\n }\n .btn-group button {\n background: transparent; border: none; color: var(--text-secondary);\n padding: 6px 13px; cursor: pointer;\n font-family: var(--font-display); font-size: 12px; font-weight: 600;\n letter-spacing: 0.01em; transition: all var(--transition-base);\n white-space: nowrap; position: relative;\n }\n .btn-group button:not(:last-child)::after {\n content: ''; position: absolute; right: 0; top: 17%;\n height: 66%; width: 1px; background: var(--border);\n }\n .btn-group button:hover { color: var(--text-primary); background: var(--bg-elevated); }\n .btn-group button.active {\n color: #ffffff; background: #d4891a;\n box-shadow: 0 0 10px rgba(212,137,26,0.2); 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\n .date-input {\n background: var(--bg-card); border: 1px solid var(--border);\n color: var(--text-primary); padding: 6px 9px;\n border-radius: var(--radius); font-family: var(--font-display);\n font-size: 12px; outline: none; transition: all var(--transition-base);\n width: 122px; cursor: pointer; box-shadow: var(--shadow-xs);\n }\n .date-input:focus { border-color: #d4891a; box-shadow: 0 0 0 3px rgba(212,137,26,0.1); }\n .date-separator { color: var(--text-muted); font-size: 12px; font-weight: 500; }\n\n .btn-action {\n background: var(--bg-card); border: 1px solid var(--border);\n color: var(--text-secondary); width: 32px; height: 32px;\n border-radius: var(--radius); cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: all var(--transition-base); font-size: 13px; box-shadow: var(--shadow-xs);\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, #d4891a, #b07214); border: none;\n color: #ffffff; padding: 6px 16px; border-radius: var(--radius);\n cursor: pointer; font-family: var(--font-display); font-size: 12px;\n font-weight: 600; letter-spacing: 0.01em; transition: all var(--transition-base);\n white-space: nowrap; box-shadow: 0 2px 8px rgba(212,137,26,0.2);\n }\n .btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(212,137,26,0.26); }\n .btn-primary:active { transform: scale(0.97); }\n\n /* ============ METRICS ROW ============ */\n .metrics-row {\n display: grid; grid-template-columns: repeat(8, 1fr);\n gap: 6px; flex-shrink: 0;\n }\n .metric-card {\n background: var(--bg-card); border-radius: var(--radius-md);\n padding: 10px 12px; border: 1px solid var(--border-light);\n position: relative; overflow: hidden; transition: all var(--transition-base);\n cursor: default; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-sm);\n }\n .metric-card:hover { border-color: var(--border-active); box-shadow: var(--shadow-elevated); transform: translateY(-2px); }\n .metric-card .card-accent { position: absolute; top: 0; left: 0; width: 100%; height: 3px; }\n .metric-card:nth-child(1) .card-accent { background: #d4891a; }\n .metric-card:nth-child(2) .card-accent { background: #0d82b8; }\n .metric-card:nth-child(3) .card-accent { background: #0f766e; }\n .metric-card:nth-child(4) .card-accent { background: #ea570c; }\n .metric-card:nth-child(5) .card-accent { background: #7c3aed; }\n .metric-card:nth-child(6) .card-accent { background: #2563eb; }\n .metric-card:nth-child(7) .card-accent { background: #16a34a; }\n .metric-card:nth-child(8) .card-accent { background: #dc2626; }\n .metric-card .card-icon { font-size: 10px; color: var(--text-muted); }\n .metric-card .card-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }\n .metric-card .card-value { font-family: var(--font-display); font-size: clamp(15px, 1.5vw, 22px); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; }\n .metric-card .card-sub { font-size: 8px; color: var(--text-muted); font-weight: 500; }\n\n /* ============ CHARTS AREA ============ */\n .charts-area {\n display: grid; grid-template-columns: 1.3fr 0.85fr 0.85fr;\n gap: 8px; flex: 1; min-height: 0;\n }\n .chart-box {\n background: var(--bg-card); border-radius: var(--radius-md);\n border: 1px solid var(--border-light); padding: 12px 14px;\n display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-sm);\n }\n .chart-box-header {\n display: flex; align-items: center; justify-content: space-between;\n flex-shrink: 0; margin-bottom: 5px; gap: 6px;\n }\n .chart-box-title {\n font-family: var(--font-display); font-size: 11px; font-weight: 600;\n letter-spacing: 0.02em; color: var(--text-secondary);\n text-transform: uppercase; white-space: nowrap;\n }\n .chart-legend {\n display: flex; gap: 6px; font-size: 8px; color: var(--text-muted);\n flex-wrap: wrap; justify-content: flex-end;\n }\n .chart-legend span { display: flex; align-items: center; gap: 3px; white-space: nowrap; }\n .chart-legend .dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; flex-shrink: 0; }\n .chart-legend .dash { width: 8px; height: 0; border-top: 2px dashed; display: inline-block; flex-shrink: 0; }\n .chart-canvas-wrap { flex: 1; min-height: 0; position: relative; width: 100%; }\n .chart-canvas-wrap canvas { width: 100%; height: 100%; display: block; }\n\n /* ============ DONUT PANEL ============ */\n .donut-panel {\n background: var(--bg-card); border-radius: var(--radius-md);\n border: 1px solid var(--border-light); padding: 12px 14px;\n display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-sm);\n }\n .donut-header { flex-shrink: 0; margin-bottom: 4px; }\n .donut-body {\n flex: 1; display: flex; align-items: center; justify-content: center;\n gap: 10px; min-height: 0;\n }\n .donut-canvas-wrap { flex: 1; min-width: 0; height: 100%; position: relative; }\n .donut-canvas-wrap canvas { width: 100%; height: 100%; display: block; }\n .donut-legend {\n display: flex; flex-direction: column; gap: 8px;\n flex-shrink: 0; font-size: 10px; font-family: var(--font-display);\n }\n .donut-legend-item { display: flex; align-items: center; gap: 6px; }\n .donut-legend-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }\n .donut-legend-val { font-weight: 700; font-size: 14px; color: var(--text-primary); line-height: 1; }\n .donut-legend-label { color: var(--text-muted); font-size: 8px; }\n\n /* ============ TABLE ============ */\n .table-section {\n flex-shrink: 0; background: var(--bg-card); border-radius: var(--radius-md);\n border: 1px solid var(--border-light); overflow: hidden;\n display: flex; flex-direction: column; max-height: 125px; box-shadow: var(--shadow-sm);\n }\n .table-section-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 6px 14px; border-bottom: 1px solid var(--border-light); flex-shrink: 0;\n }\n .table-section-title { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--text-secondary); text-transform: uppercase; }\n .table-wrap { overflow-y: auto; flex: 1; }\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 table { width: 100%; border-collapse: collapse; font-size: 10px; font-family: var(--font-display); }\n thead th { text-align: left; padding: 6px 9px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 9px; position: sticky; top: 0; background: var(--bg-card); z-index: 2; border-bottom: 1px solid var(--border-light); }\n tbody td { padding: 5px 9px; border-bottom: 1px solid rgba(0,0,0,0.03); color: var(--text-primary); font-weight: 500; letter-spacing: 0.01em; }\n tbody tr:nth-child(even) { background: var(--bg-stripe); }\n tbody tr:hover { background: rgba(212,137,26,0.03); }\n tbody tr { transition: background var(--transition-base); }\n .cell-highlight { color: #d4891a; font-weight: 700; }\n .cell-cycles { color: #0f766e; font-weight: 700; }\n\n /* ============ TOAST ============ */\n .toast-container { position: fixed; top: 18px; right: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 7px; pointer-events: none; }\n .toast {\n background: #ffffff; border: 1px solid var(--border); border-left: 3px solid #d4891a;\n color: var(--text-primary); padding: 10px 16px; border-radius: var(--radius);\n font-size: 12px; font-family: var(--font-body); box-shadow: 0 4px 18px rgba(0,0,0,0.1);\n opacity: 0; transform: translateX(30px); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: auto; display: flex; align-items: center; gap: 7px;\n }\n .toast.show { opacity: 1; transform: translateX(0); }\n .toast i { color: #d4891a; 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 1fr; }\n .donut-panel { grid-column: span 2; }\n .dashboard { aspect-ratio: auto; max-height: none; }\n .chart-box { min-height: 200px; }\n .donut-panel { min-height: 170px; }\n }\n @media (max-width: 900px) {\n .metrics-row { grid-template-columns: repeat(3, 1fr); }\n .charts-area { grid-template-columns: 1fr; }\n .donut-panel { grid-column: span 1; }\n .header { flex-direction: column; align-items: stretch; }\n .header-right { justify-content: flex-start; }\n .date-input { width: 95px; font-size: 11px; }\n .dashboard { padding: 10px; }\n .chart-box { min-height: 180px; }\n }\n @media (max-width: 600px) {\n .metrics-row { grid-template-columns: repeat(2, 1fr); }\n .btn-group button { padding: 5px 10px; font-size: 11px; }\n .date-input { width: 82px; font-size: 10px; }\n .header-right { gap: 4px; }\n table { font-size: 8px; }\n thead th, tbody td { padding: 4px 5px; }\n .donut-body { flex-direction: column; }\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\n \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 \n <div class=\"metrics-row\" id=\"metricsRow\"></div>\n\n \n <div class=\"charts-area\">\n \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:#d4891a\"></span>运行时长</span>\n <span><span class=\"dot\" style=\"background:#0d82b8\"></span>作业时长</span>\n <span><span class=\"dash\" style=\"border-color:#0f766e\"></span>循环次数</span>\n </div>\n </div>\n <div class=\"chart-canvas-wrap\"><canvas id=\"lineChart\"></canvas></div>\n </div>\n\n \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:#ea570c\"></span>装载</span>\n <span><span class=\"dot\" style=\"background:#2563eb\"></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:#dc2626\"></span>怠速</span>\n </div>\n </div>\n <div class=\"chart-canvas-wrap\"><canvas id=\"barChart\"></canvas></div>\n </div>\n\n \n <div class=\"donut-panel\">\n <div class=\"donut-header\">\n <span class=\"chart-box-title\"><i class=\"fa-solid fa-chart-pie\"></i> 装载 / 行驶 / 卸载占比</span>\n </div>\n <div class=\"donut-body\">\n <div class=\"donut-canvas-wrap\"><canvas id=\"donutChart\"></canvas></div>\n <div class=\"donut-legend\" id=\"donutLegend\"></div>\n </div>\n </div>\n </div>\n\n \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:9px;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\"></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 const state = {\n granularity: 'day',\n startDate: '2026-04-01',\n endDate: '2026-04-27',\n };\n\n const $ = s => document.querySelector(s);\n const dom = {\n granularityGroup: $('#granularityGroup'),\n startDate: $('#startDate'),\n endDate: $('#endDate'),\n metricsRow: $('#metricsRow'),\n lineChart: $('#lineChart'),\n barChart: $('#barChart'),\n donutChart: $('#donutChart'),\n donutLegend: $('#donutLegend'),\n tableBody: $('#tableBody'),\n tableInfo: $('#tableInfo'),\n toastContainer: $('#toastContainer'),\n };\n\n function showToast(msg, icon) {\n const el = document.createElement('div'); 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(() => { el.classList.remove('show'); setTimeout(() => el.remove(), 350); }, 2100);\n }\n\n function seedRandom(seed) { let s = seed; return () => { s = (s * 16807 + 0) % 2147483647; return (s - 1) / 2147483646; }; }\n\n function generateRecords() {\n const records = [];\n const sd = new Date(state.startDate), ed = new Date(state.endDate);\n if (isNaN(sd.getTime()) || isNaN(ed.getTime()) || sd > ed) return records;\n\n const labels = [];\n const cur = new Date(sd);\n if (state.granularity === 'day') {\n while (cur <= ed) { labels.push(new Date(cur)); cur.setDate(cur.getDate() + 1); }\n } else if (state.granularity === 'month') {\n cur.setDate(1); const em = new Date(ed.getFullYear(), ed.getMonth(), 1);\n while (cur <= em) { labels.push(new Date(cur)); cur.setMonth(cur.getMonth() + 1); }\n } else {\n cur.setMonth(0, 1); const ey = new Date(ed.getFullYear(), 0, 1);\n while (cur <= ey) { labels.push(new Date(cur)); cur.setFullYear(cur.getFullYear() + 1); }\n }\n if (labels.length > 120) { const step = Math.ceil(labels.length / 100); return labels.filter((_, i) => i % step === 0).map(d => generateOneRecord(d)); }\n\n return labels.map((d, i) => generateOneRecord(d, i));\n }\n\n function generateOneRecord(d, i) {\n const rng = seedRandom(d.getTime() % 99997 + (i || 0) * 73);\n const baseMult = state.granularity === 'year' ? 15 : state.granularity === 'month' ? 15 : 1;\n const vehicleCount = 15;\n\n const totalCycles = Math.round(baseMult * vehicleCount * (13 + rng() * 11));\n const loadPerCycle = 0.09 + rng() * 0.07;\n const loadedRunPerCycle = 0.16 + rng() * 0.12;\n const unloadPerCycle = 0.03 + rng() * 0.03;\n const emptyReturnPerCycle = 0.10 + rng() * 0.08;\n const idlePerCycle = 0.06 + rng() * 0.10;\n\n const loadTime = Math.round(totalCycles * loadPerCycle * 10) / 10;\n const loadedRunTime = Math.round(totalCycles * loadedRunPerCycle * 10) / 10;\n const unloadTime = Math.round(totalCycles * unloadPerCycle * 10) / 10;\n const emptyReturnTime = Math.round(totalCycles * emptyReturnPerCycle * 10) / 10;\n const idleTime = Math.round(totalCycles * idlePerCycle * 10) / 10;\n const workTime = Math.round((loadTime + loadedRunTime + unloadTime + emptyReturnTime) * 10) / 10;\n const totalTime = Math.round((workTime + idleTime) * 10) / 10;\n\n return {\n label: d,\n totalTime, workTime, cycles: totalCycles, idleTime,\n loadTime, unloadTime, emptyReturnTime, loadedRunTime,\n };\n }\n\n function fmtLabel(d) {\n if (state.granularity === 'day') return `${d.getMonth() + 1}/${d.getDate()}`;\n if (state.granularity === 'month') return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, '0')}`;\n return `${d.getFullYear()}`;\n }\n function fmtFull(d) {\n if (state.granularity === 'day') return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;\n if (state.granularity === 'month') return `${d.getFullYear()}年${d.getMonth() + 1}月`;\n return `${d.getFullYear()}年`;\n }\n\n // ==================== METRICS ====================\n function renderMetrics(records) {\n if (!records.length) {\n dom.metricsRow.innerHTML = Array.from({ length: 8 }, () => `<div class=\"metric-card\"><div class=\"card-accent\"></div><div class=\"card-label\">--</div><div class=\"card-value\">0</div></div>`).join('');\n return;\n }\n const sm = records.reduce((a, r) => {\n Object.keys(a).forEach(k => { a[k] += r[k] || 0; });\n return a;\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: sm.totalTime.toFixed(1), unit: 'h', color: '#d4891a' },\n { icon: 'fa-gears', label: '作业时长', value: sm.workTime.toFixed(1), unit: 'h', color: '#0d82b8' },\n { icon: 'fa-rotate', label: '循环次数', value: sm.cycles.toString(), unit: '次', color: '#0f766e' },\n { icon: 'fa-pause', label: '怠速时长', value: sm.idleTime.toFixed(1), unit: 'h', color: '#ea570c' },\n { icon: 'fa-arrow-down', label: '装载时长', value: sm.loadTime.toFixed(1), unit: 'h', color: '#7c3aed' },\n { icon: 'fa-arrow-up', label: '卸载时长', value: sm.unloadTime.toFixed(1), unit: 'h', color: '#2563eb' },\n { icon: 'fa-truck-fast', label: '空车返回', value: sm.emptyReturnTime.toFixed(1), unit: 'h', color: '#16a34a' },\n { icon: 'fa-weight-hanging', label: '重车运行', value: sm.loadedRunTime.toFixed(1), unit: 'h', color: '#dc2626' },\n ];\n\n dom.metricsRow.innerHTML = cfg.map(c => `\n <div class=\"metric-card\">\n <div class=\"card-accent\"></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>`).join('');\n }\n\n // ==================== LINE CHART ====================\n function renderLineChart(canvas, records) {\n if (!canvas || !records.length) return;\n const dpr = window.devicePixelRatio || 1;\n const rect = canvas.parentElement.getBoundingClientRect();\n const w = rect.width, h = rect.height;\n canvas.width = w * dpr; canvas.height = h * dpr;\n canvas.style.width = w + 'px'; canvas.style.height = h + 'px';\n const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr); ctx.clearRect(0, 0, w, h);\n\n const pad = { top: 10, right: 38, bottom: 28, left: 44 };\n const cw = w - pad.left - pad.right, ch = h - pad.top - pad.bottom;\n\n let maxTime = 0, maxCycles = 0;\n records.forEach(r => {\n if (r.totalTime > maxTime) maxTime = r.totalTime;\n if (r.workTime > maxTime) maxTime = r.workTime;\n if (r.cycles > maxCycles) maxCycles = r.cycles;\n });\n maxTime = Math.ceil(maxTime * 1.15) || 10;\n maxCycles = Math.ceil(maxCycles * 1.2) || 10;\n\n const gridLines = 5;\n ctx.strokeStyle = '#eef0f4'; ctx.lineWidth = 1;\n for (let i = 0; i <= gridLines; i++) {\n const y = pad.top + (ch / gridLines) * i;\n ctx.beginPath(); ctx.moveTo(pad.left, y); ctx.lineTo(w - pad.right, y); ctx.stroke();\n ctx.fillStyle = '#94a3b8'; ctx.font = '9px DM Sans, sans-serif'; ctx.textAlign = 'right';\n ctx.fillText(Math.round(maxTime - (maxTime / gridLines) * i), pad.left - 6, y + 3);\n }\n for (let i = 0; i <= gridLines; i++) {\n const y = pad.top + (ch / gridLines) * i;\n ctx.fillStyle = '#94a3b8'; ctx.textAlign = 'left';\n ctx.fillText(Math.round(maxCycles - (maxCycles / gridLines) * i), w - pad.right + 5, y + 3);\n }\n\n const xStep = cw / Math.max(records.length - 1, 1);\n const maxLabels = Math.min(records.length, 14);\n const labelStep = Math.max(1, Math.floor(records.length / maxLabels));\n ctx.fillStyle = '#94a3b8'; ctx.font = '9px DM Sans, sans-serif'; ctx.textAlign = 'center';\n records.forEach((r, i) => {\n if (i % labelStep === 0 || i === records.length - 1) {\n ctx.fillText(fmtLabel(r.label), pad.left + xStep * i, pad.top + ch + 15);\n }\n });\n\n // totalTime & workTime (solid)\n const lineDefs = [\n { key: 'totalTime', color: '#d4891a', max: maxTime, dash: false },\n { key: 'workTime', color: '#0d82b8', max: maxTime, dash: false },\n ];\n lineDefs.forEach(def => {\n ctx.strokeStyle = def.color; ctx.lineWidth = 2.2; ctx.lineJoin = 'round'; ctx.lineCap = 'round';\n ctx.setLineDash([]);\n ctx.beginPath();\n records.forEach((r, ii) => {\n const x = pad.left + xStep * ii;\n const y = pad.top + ch - (r[def.key] / def.max) * ch;\n if (ii === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);\n });\n ctx.stroke();\n records.forEach((r, ii) => {\n const x = pad.left + xStep * ii;\n const y = pad.top + ch - (r[def.key] / def.max) * ch;\n ctx.fillStyle = '#ffffff'; ctx.beginPath(); ctx.arc(x, y, 3.5, 0, Math.PI * 2); ctx.fill();\n ctx.fillStyle = def.color; ctx.beginPath(); ctx.arc(x, y, 2.2, 0, Math.PI * 2); ctx.fill();\n });\n });\n\n // cycles (dashed, right axis)\n ctx.strokeStyle = '#0f766e'; ctx.lineWidth = 2; ctx.setLineDash([5, 3]);\n ctx.beginPath();\n records.forEach((r, ii) => {\n const x = pad.left + xStep * ii;\n const y = pad.top + ch - (r.cycles / maxCycles) * ch;\n if (ii === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);\n });\n ctx.stroke(); ctx.setLineDash([]);\n }\n\n // ==================== BAR CHART ====================\n function renderBarChart(canvas, records) {\n if (!canvas || !records.length) return;\n const dpr = window.devicePixelRatio || 1;\n const rect = canvas.parentElement.getBoundingClientRect();\n const w = rect.width, h = rect.height;\n canvas.width = w * dpr; canvas.height = h * dpr;\n canvas.style.width = w + 'px'; canvas.style.height = h + 'px';\n const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr); ctx.clearRect(0, 0, w, h);\n\n const datasets = [\n { key: 'loadTime', color: '#ea570c' },\n { key: 'loadedRunTime', color: '#2563eb' },\n { key: 'unloadTime', color: '#7c3aed' },\n { key: 'emptyReturnTime', color: '#16a34a' },\n { key: 'idleTime', color: '#dc2626' },\n ];\n\n let maxStack = 0;\n records.forEach(r => {\n const s = datasets.reduce((a, d) => a + r[d.key], 0);\n if (s > maxStack) maxStack = s;\n });\n maxStack = Math.ceil(maxStack * 1.18) || 10;\n\n const pad = { top: 10, right: 12, bottom: 28, left: 44 };\n const cw = w - pad.left - pad.right, ch = h - pad.top - pad.bottom;\n\n const gridLines = 5;\n ctx.strokeStyle = '#eef0f4'; ctx.lineWidth = 1;\n for (let i = 0; i <= gridLines; i++) {\n const y = pad.top + (ch / gridLines) * i;\n ctx.beginPath(); ctx.moveTo(pad.left, y); ctx.lineTo(w - pad.right, y); ctx.stroke();\n ctx.fillStyle = '#94a3b8'; ctx.font = '9px DM Sans, sans-serif'; ctx.textAlign = 'right';\n ctx.fillText(Math.round(maxStack - (maxStack / gridLines) * i), pad.left - 6, y + 3);\n }\n\n const maxBars = Math.min(records.length, 26);\n const step = Math.max(1, Math.floor(records.length / maxBars));\n const di = records.map((_, i) => i).filter((_, i) => i % step === 0 || i === records.length - 1);\n const barGap = 3;\n const barW = (cw / di.length) - barGap;\n if (barW <= 0) return;\n\n di.forEach((ri, bi) => {\n const r = records[ri];\n const x = pad.left + (cw / di.length) * bi + barGap / 2;\n let sy = pad.top + ch;\n datasets.forEach((ds, dsi) => {\n const val = r[ds.key];\n const bh = (val / maxStack) * ch;\n const y = sy - bh;\n ctx.fillStyle = ds.color; ctx.fillRect(x, y, barW, bh);\n if (dsi > 0 && bh > 1.5) { ctx.fillStyle = 'rgba(255,255,255,0.25)'; ctx.fillRect(x, y, barW, 0.5); }\n sy = y;\n });\n const ls2 = Math.max(1, Math.floor(di.length / 10));\n if (bi % ls2 === 0 || bi === di.length - 1) {\n ctx.fillStyle = '#94a3b8'; ctx.font = '9px DM Sans, sans-serif'; ctx.textAlign = 'center';\n ctx.fillText(fmtLabel(r.label), x + barW / 2, pad.top + ch + 15);\n }\n });\n }\n\n // ==================== DONUT ====================\n function renderDonutChart(canvas, records) {\n if (!canvas || !records.length) return;\n const dpr = window.devicePixelRatio || 1;\n const rect = canvas.parentElement.getBoundingClientRect();\n const w = rect.width, h = rect.height;\n canvas.width = w * dpr; canvas.height = h * dpr;\n canvas.style.width = w + 'px'; canvas.style.height = h + 'px';\n const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr); ctx.clearRect(0, 0, w, h);\n\n const sums = { loadTime: 0, haulTime: 0, unloadTime: 0 };\n records.forEach(r => {\n sums.loadTime += r.loadTime;\n sums.haulTime += (r.loadedRunTime + r.emptyReturnTime);\n sums.unloadTime += r.unloadTime;\n });\n const total = sums.loadTime + sums.haulTime + sums.unloadTime;\n\n const segments = [\n { label: '装载', value: sums.loadTime, pct: total > 0 ? (sums.loadTime / total * 100) : 0, color: '#ea570c' },\n { label: '行驶', value: sums.haulTime, pct: total > 0 ? (sums.haulTime / total * 100) : 0, color: '#2563eb' },\n { label: '卸载', value: sums.unloadTime, pct: total > 0 ? (sums.unloadTime / total * 100) : 0, color: '#7c3aed' },\n ];\n\n dom.donutLegend.innerHTML = segments.map(s => `\n <div class=\"donut-legend-item\">\n <div class=\"donut-legend-dot\" style=\"background:${s.color}\"></div>\n <div>\n <div class=\"donut-legend-val\">${s.pct.toFixed(1)}%</div>\n <div class=\"donut-legend-label\">${s.label} ${s.value.toFixed(1)}h</div>\n </div>\n </div>\n `).join('');\n\n const cx = w / 2, cy = h / 2;\n const outerR = Math.min(cx, cy) - 8;\n const innerR = outerR * 0.55;\n\n if (total === 0) {\n ctx.fillStyle = '#94a3b8'; ctx.font = '12px DM Sans, sans-serif'; ctx.textAlign = 'center';\n ctx.fillText('暂无数据', cx, cy + 4);\n return;\n }\n\n let startAngle = -Math.PI / 2;\n segments.forEach(seg => {\n const sliceAngle = (seg.pct / 100) * Math.PI * 2;\n if (sliceAngle < 0.001) return;\n ctx.beginPath();\n ctx.arc(cx, cy, outerR, startAngle, startAngle + sliceAngle);\n ctx.arc(cx, cy, innerR, startAngle + sliceAngle, startAngle, true);\n ctx.closePath();\n ctx.fillStyle = seg.color; ctx.fill();\n startAngle += sliceAngle;\n });\n\n ctx.fillStyle = '#0f172a';\n ctx.font = 'bold 14px DM Sans, sans-serif'; ctx.textAlign = 'center';\n ctx.fillText(total.toFixed(1) + 'h', cx, cy - 2);\n ctx.fillStyle = '#94a3b8';\n ctx.font = '9px DM Sans, sans-serif'; ctx.textAlign = 'center';\n ctx.fillText('作业总时长', cx, cy + 13);\n }\n\n // ==================== TABLE ====================\n function renderTable(records) {\n dom.tableInfo.textContent = `共 ${records.length} 条记录`;\n if (!records.length) {\n dom.tableBody.innerHTML = '<tr><td colspan=\"9\" style=\"text-align:center;color:var(--text-muted);padding:14px;\">暂无数据</td></tr>';\n return;\n }\n const display = records.slice(-25);\n dom.tableBody.innerHTML = display.map(r => `\n <tr>\n <td>${fmtFull(r.label)}</td>\n <td class=\"cell-highlight\">${r.totalTime.toFixed(1)}</td>\n <td>${r.workTime.toFixed(1)}</td>\n <td class=\"cell-cycles\">${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 ====================\n let currentRecords = [];\n\n function updateDashboard(silent) {\n currentRecords = generateRecords();\n renderMetrics(currentRecords);\n renderLineChart(dom.lineChart, currentRecords);\n renderBarChart(dom.barChart, currentRecords);\n renderDonutChart(dom.donutChart, currentRecords);\n renderTable(currentRecords);\n if (!silent) {\n const gl = state.granularity === 'day' ? '日' : state.granularity === 'month' ? '月' : '年';\n showToast(`横轴按${gl} · 已加载 ${currentRecords.length} 条运营数据`, 'fa-circle-check');\n }\n }\n\n // ==================== EVENTS ====================\n dom.granularityGroup.addEventListener('click', e => {\n const btn = e.target.closest('button');\n if (!btn || btn.classList.contains('active')) return;\n dom.granularityGroup.querySelectorAll('button').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n state.granularity = btn.dataset.gran;\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', () => { state.startDate = dom.startDate.value; updateDashboard(); });\n dom.endDate.addEventListener('change', () => { state.endDate = dom.endDate.value; updateDashboard(); });\n\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) { showToast('无数据可导出', 'fa-triangle-exclamation'); return; }\n let csv = '周期,运行时长(h),作业时长(h),循环次数,怠速时长(h),装载时长(h),卸载时长(h),空车返回(h),重车运行(h)\\n';\n currentRecords.forEach(r => {\n csv += [fmtFull(r.label), r.totalTime.toFixed(1), r.workTime.toFixed(1), r.cycles,\n r.idleTime.toFixed(1), r.loadTime.toFixed(1), r.unloadTime.toFixed(1),\n r.emptyReturnTime.toFixed(1), r.loadedRunTime.toFixed(1)].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 let rt;\n window.addEventListener('resize', () => {\n clearTimeout(rt);\n rt = setTimeout(() => {\n if (currentRecords.length > 0) {\n renderLineChart(dom.lineChart, currentRecords);\n renderBarChart(dom.barChart, currentRecords);\n renderDonutChart(dom.donutChart, currentRecords);\n }\n }, 250);\n });\n\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"
}
```

total_tokens

180390

summary

矿车运营数据统计仪表盘（无分组版），白底企业级设计，8项核心指标卡片，三图联动（折线趋势图/堆叠柱状时长构成图/环形占比图），横轴按日/月/年切换，日期区间选取，CSV导出与打印，去除了矿区/车辆类型/车辆分组筛选。

uiParsing

关闭