```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-red: #dc2626;\n --accent-orange: #e8590c;\n --accent-blue: #0e7bb5;\n --accent-green: #16a34a;\n --accent-teal: #0d9488;\n --accent-purple: #7c3aed;\n --accent-amber: #d4891a;\n --accent-slate: #64748b;\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: 8px;\n background-image:\n radial-gradient(ellipse at 15% 10%, rgba(220,38,38,0.03) 0%, transparent 55%),\n radial-gradient(ellipse at 85% 90%, rgba(14,123,181,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 - 16px);\n display: flex;\n flex-direction: column;\n gap: 4px;\n background: var(--bg-panel);\n border-radius: var(--radius-xl);\n padding: 10px 14px;\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(220,38,38,0.012) 0%, transparent 25%),\n linear-gradient(0deg, rgba(14,123,181,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; align-items: center; justify-content: space-between;\n gap: 8px; flex-shrink: 0; padding-bottom: 3px;\n border-bottom: 1px solid var(--border-light);\n }\n .header-left { display: flex; align-items: center; gap: 8px; }\n .logo-mark {\n width: 30px; height: 30px;\n background: linear-gradient(135deg, #dc2626, #b91c1c);\n border-radius: var(--radius);\n display: flex; align-items: center; justify-content: center;\n font-size: 14px; color: #ffffff; font-weight: 700; flex-shrink: 0;\n box-shadow: 0 2px 8px rgba(220,38,38,0.22);\n }\n .header-title h1 {\n font-family: var(--font-display);\n font-size: clamp(12px, 1vw, 16px);\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: 7px; color: var(--text-muted); font-weight: 500;\n letter-spacing: 0.06em; text-transform: uppercase;\n }\n .header-right { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }\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: 3px 8px; cursor: pointer;\n font-family: var(--font-display); font-size: 10px; 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: 14%;\n height: 72%; 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: #dc2626;\n box-shadow: 0 0 8px rgba(220,38,38,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 select, .date-input {\n background: var(--bg-card); border: 1px solid var(--border);\n color: var(--text-primary); padding: 3px 6px;\n border-radius: var(--radius); font-family: var(--font-display);\n font-size: 9px; outline: none; transition: all var(--transition-base);\n cursor: pointer; box-shadow: var(--shadow-xs);\n }\n select:focus, .date-input:focus { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,0.1); }\n .date-input { width: 95px; }\n select { min-width: 64px; max-width: 110px; }\n .date-separator { color: var(--text-muted); font-size: 9px; font-weight: 500; }\n .filter-label { font-size: 7px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }\n\n .btn-action {\n background: var(--bg-card); border: 1px solid var(--border);\n color: var(--text-secondary); width: 24px; height: 24px;\n border-radius: var(--radius); cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: all var(--transition-base); font-size: 10px; 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, #dc2626, #b91c1c); border: none;\n color: #ffffff; padding: 3px 11px; border-radius: var(--radius);\n cursor: pointer; font-family: var(--font-display); font-size: 10px;\n font-weight: 600; letter-spacing: 0.01em; transition: all var(--transition-base);\n white-space: nowrap; box-shadow: 0 2px 6px rgba(220,38,38,0.2);\n }\n .btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220,38,38,0.26); }\n .btn-primary:active { transform: scale(0.97); }\n\n /* ============ FILTER BAR ============ */\n .filter-bar {\n display: flex; align-items: center; gap: 5px;\n flex-shrink: 0; flex-wrap: wrap; padding: 2px 0;\n border-bottom: 1px solid var(--border-light);\n }\n .filter-bar .sep { width: 1px; height: 15px; background: var(--border); margin: 0 1px; }\n\n /* ============ METRICS ROW ============ */\n .metrics-row {\n display: grid; grid-template-columns: repeat(8, 1fr);\n gap: 4px; flex-shrink: 0;\n }\n .metric-card {\n background: var(--bg-card); border-radius: var(--radius-md);\n padding: 5px 7px; 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: 1px; box-shadow: var(--shadow-sm);\n }\n .metric-card:hover { border-color: var(--border-active); box-shadow: var(--shadow-elevated); transform: translateY(-1px); }\n .metric-card .card-accent { position: absolute; top: 0; left: 0; width: 100%; height: 2px; }\n .metric-card:nth-child(1) .card-accent { background: #dc2626; }\n .metric-card:nth-child(2) .card-accent { background: #e8590c; }\n .metric-card:nth-child(3) .card-accent { background: #0e7bb5; }\n .metric-card:nth-child(4) .card-accent { background: #16a34a; }\n .metric-card:nth-child(5) .card-accent { background: #0d9488; }\n .metric-card:nth-child(6) .card-accent { background: #7c3aed; }\n .metric-card:nth-child(7) .card-accent { background: #d4891a; }\n .metric-card:nth-child(8) .card-accent { background: #64748b; }\n .metric-card .card-icon { font-size: 7px; color: var(--text-muted); }\n .metric-card .card-label { font-size: 6px; 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(10px, 1.1vw, 15px); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; }\n .metric-card .card-sub { font-size: 6px; color: var(--text-muted); font-weight: 500; }\n\n /* ============ CHARTS AREA ============ */\n .charts-area-top {\n flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px;\n }\n .chart-box-row-top {\n flex: 0 0 38%; background: var(--bg-card); border-radius: var(--radius-md);\n border: 1px solid var(--border-light); padding: 7px 10px;\n display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-sm);\n }\n .charts-area-bottom {\n flex: 1; min-height: 0; display: grid; grid-template-columns: 0.9fr 0.7fr 0.9fr; gap: 4px;\n }\n .chart-box {\n background: var(--bg-card); border-radius: var(--radius-md);\n border: 1px solid var(--border-light); padding: 7px 9px;\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: 2px; gap: 4px;\n }\n .chart-box-title {\n font-family: var(--font-display); font-size: 8px; 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: 4px; font-size: 6px; color: var(--text-muted);\n flex-wrap: wrap; justify-content: flex-end;\n }\n .chart-legend span { display: flex; align-items: center; gap: 2px; white-space: nowrap; }\n .chart-legend .dot { width: 4px; height: 4px; border-radius: 50%; 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 /* ============ FAULT LIST PANEL ============ */\n .fault-list-body {\n flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;\n }\n .fault-list-body::-webkit-scrollbar { width: 3px; }\n .fault-list-body::-webkit-scrollbar-track { background: transparent; }\n .fault-list-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }\n .fault-item {\n display: flex; align-items: center; gap: 4px; font-size: 7px; font-family: var(--font-display);\n }\n .fault-item .fault-rank {\n width: 14px; text-align: center; font-weight: 700; color: var(--text-muted); flex-shrink: 0;\n }\n .fault-item .fault-name {\n flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary);\n }\n .fault-item .fault-bar-wrap {\n width: 55px; height: 8px; background: #eef0f4; border-radius: 3px; overflow: hidden; flex-shrink: 0;\n }\n .fault-item .fault-bar-fill { height: 100%; border-radius: 3px; }\n .fault-item .fault-count {\n width: 28px; text-align: right; font-weight: 700; flex-shrink: 0;\n }\n\n /* ============ DONUT + PIE PANEL ============ */\n .donut-pie-body {\n flex: 1; display: flex; flex-direction: column; gap: 3px; min-height: 0;\n }\n .donut-dual-row {\n display: flex; gap: 4px; flex-shrink: 0; justify-content: center;\n }\n .donut-mini {\n display: flex; flex-direction: column; align-items: center; gap: 1px;\n }\n .donut-mini-label { font-family: var(--font-display); font-size: 6px; font-weight: 600; color: var(--text-secondary); text-align: center; }\n .donut-mini-wrap { width: 52px; height: 35px; position: relative; }\n .donut-mini-wrap canvas { width: 100%; height: 100%; display: block; }\n .donut-mini-val { font-family: var(--font-display); font-size: 9px; font-weight: 700; color: var(--text-primary); text-align: center; }\n .pie-wrap { flex: 1; min-height: 0; position: relative; }\n .pie-wrap canvas { width: 100%; height: 100%; display: block; }\n .pie-legend-row {\n display: flex; gap: 4px; flex-wrap: wrap; font-size: 6px;\n font-family: var(--font-display); flex-shrink: 0; padding: 1px 0;\n }\n .pie-legend-item { display: flex; align-items: center; gap: 2px; }\n .pie-legend-dot { width: 5px; height: 5px; border-radius: 2px; flex-shrink: 0; }\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: 80px; box-shadow: var(--shadow-sm);\n }\n .table-section-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 2px 10px; border-bottom: 1px solid var(--border-light); flex-shrink: 0;\n }\n .table-section-title { font-family: var(--font-display); font-size: 9px; 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: 3px; }\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: 7px; font-family: var(--font-display); }\n thead th { text-align: left; padding: 2px 5px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 6px; position: sticky; top: 0; background: var(--bg-card); z-index: 2; border-bottom: 1px solid var(--border-light); }\n tbody td { padding: 2px 5px; 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(220,38,38,0.03); }\n tbody tr { transition: background var(--transition-base); }\n .cell-alert { color: #dc2626; font-weight: 700; }\n .cell-warn { color: #e8590c; font-weight: 600; }\n .cell-good { color: #16a34a; font-weight: 600; }\n .cell-info { color: #0e7bb5; font-weight: 600; }\n\n /* ============ TOAST ============ */\n .toast-container { position: fixed; top: 12px; right: 12px; z-index: 9999; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }\n .toast {\n background: #ffffff; border: 1px solid var(--border); border-left: 3px solid #dc2626;\n color: var(--text-primary); padding: 6px 11px; border-radius: var(--radius);\n font-size: 10px; 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: 4px;\n }\n .toast.show { opacity: 1; transform: translateX(0); }\n .toast i { color: #dc2626; font-size: 11px; }\n\n @media (max-width: 1400px) {\n .metrics-row { grid-template-columns: repeat(4, 1fr); }\n .charts-area-bottom { grid-template-columns: 1fr 1fr; }\n .dashboard { aspect-ratio: auto; max-height: none; }\n }\n @media (max-width: 900px) {\n .metrics-row { grid-template-columns: repeat(3, 1fr); }\n .charts-area-bottom { grid-template-columns: 1fr; }\n .chart-box-row-top { flex: 0 0 200px; }\n .header { flex-direction: column; align-items: stretch; }\n .header-right { justify-content: flex-start; }\n select, .date-input { font-size: 8px; padding: 2px 4px; }\n .date-input { width: 76px; }\n .dashboard { padding: 6px; }\n }\n @media (max-width: 600px) {\n .metrics-row { grid-template-columns: repeat(2, 1fr); }\n .btn-group button { padding: 2px 6px; font-size: 9px; }\n .header-right { gap: 2px; }\n table { font-size: 6px; }\n thead th, tbody td { padding: 2px 3px; }\n .filter-bar { gap: 2px; }\n .filter-bar .sep { display: none; }\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, select, .date-input, .filter-bar { display: none; }\n .toast-container { display: none; }\n }\n </style>\n</head>\n<body>\n\n<div class=\"dashboard\" id=\"dashboard\">\n\n <!-- HEADER -->\n <div class=\"header\">\n <div class=\"header-left\">\n <div class=\"logo-mark\"><i class=\"fa-solid fa-bell\"></i></div>\n <div class=\"header-title\">\n <h1>报警数据统计</h1>\n <span>Alarm Statistics & 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 <!-- FILTER BAR: 矿区 / 车型 / 车辆 -->\n <div class=\"filter-bar\">\n <span class=\"filter-label\"><i class=\"fa-solid fa-filter\"></i> 筛选</span>\n <span class=\"sep\"></span>\n <span class=\"filter-label\">矿区</span>\n <select id=\"filterMine\"><option value=\"\">全部矿区</option></select>\n <span class=\"filter-label\">车型</span>\n <select id=\"filterType\"><option value=\"\">全部车型</option></select>\n <span class=\"filter-label\">车辆</span>\n <select id=\"filterVehicle\"><option value=\"\">全部车辆</option></select>\n <span id=\"filterSummary\" style=\"font-size:7px;color:var(--text-muted);margin-left:3px;\"></span>\n </div>\n\n <!-- METRICS ROW -->\n <div class=\"metrics-row\" id=\"metricsRow\"></div>\n\n <!-- CHARTS AREA -->\n <div class=\"charts-area-top\">\n <!-- 上行全宽: 报警数量趋势 -->\n <div class=\"chart-box-row-top\" 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:#dc2626\"></span>报警总数</span>\n <span><span class=\"dot\" style=\"background:#e8590c\"></span>高频故障</span>\n </div>\n </div>\n <div class=\"chart-canvas-wrap\"><canvas id=\"lineChart\"></canvas></div>\n </div>\n\n <!-- 下行三列 -->\n <div class=\"charts-area-bottom\">\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:#dc2626\"></span>严重</span>\n <span><span class=\"dot\" style=\"background:#e8590c\"></span>重要</span>\n <span><span class=\"dot\" style=\"background:#d4891a\"></span>一般</span>\n </div>\n </div>\n <div class=\"chart-canvas-wrap\"><canvas id=\"barChart\"></canvas></div>\n </div>\n\n <!-- 中: 高频故障词条 -->\n <div class=\"chart-box\" id=\"faultListBox\">\n <div class=\"chart-box-header\">\n <span class=\"chart-box-title\"><i class=\"fa-solid fa-fire\"></i> 高频故障统计</span>\n </div>\n <div class=\"fault-list-body\" id=\"faultListBody\"></div>\n </div>\n\n <!-- 右: 确认率 & 恢复率 + 子系统分布饼图 -->\n <div class=\"chart-box\" id=\"donutPieBox\">\n <div class=\"chart-box-header\">\n <span class=\"chart-box-title\"><i class=\"fa-solid fa-chart-pie\"></i> 确认率 & 恢复率 & 子系统分布</span>\n </div>\n <div class=\"donut-pie-body\">\n <div class=\"donut-dual-row\">\n <div class=\"donut-mini\">\n <div class=\"donut-mini-label\">确认率</div>\n <div class=\"donut-mini-wrap\"><canvas id=\"donutAck\"></canvas></div>\n <div class=\"donut-mini-val\" id=\"valAck\">0%</div>\n </div>\n <div class=\"donut-mini\">\n <div class=\"donut-mini-label\">恢复率</div>\n <div class=\"donut-mini-wrap\"><canvas id=\"donutRec\"></canvas></div>\n <div class=\"donut-mini-val\" id=\"valRec\">0%</div>\n </div>\n </div>\n <div class=\"pie-wrap\"><canvas id=\"pieChart\"></canvas></div>\n <div class=\"pie-legend-row\" id=\"pieLegend\"></div>\n </div>\n </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:7px;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>报警总数</th>\n <th>高频故障</th>\n <th>确认数</th>\n <th>恢复数</th>\n <th>确认率</th>\n <th>恢复率</th>\n <th>MTBF(h)</th>\n <th>MTTR(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 // ==================== VEHICLES ====================\n const VEHICLES = [\n { id: 'A-E-001', mine: '矿区A', type: '电动矿卡', capacity: 60 },\n { id: 'A-E-002', mine: '矿区A', type: '电动矿卡', capacity: 60 },\n { id: 'A-E-003', mine: '矿区A', type: '电动矿卡', capacity: 55 },\n { id: 'A-F-001', mine: '矿区A', type: '燃油矿卡', capacity: 70 },\n { id: 'A-F-002', mine: '矿区A', type: '燃油矿卡', capacity: 70 },\n { id: 'B-E-001', mine: '矿区B', type: '电动矿卡', capacity: 60 },\n { id: 'B-E-002', mine: '矿区B', type: '电动矿卡', capacity: 55 },\n { id: 'B-H-001', mine: '矿区B', type: '混合动力矿卡', capacity: 65 },\n { id: 'B-H-002', mine: '矿区B', type: '混合动力矿卡', capacity: 65 },\n { id: 'B-H-003', mine: '矿区B', type: '混合动力矿卡', capacity: 60 },\n { id: 'C-F-001', mine: '矿区C', type: '燃油矿卡', capacity: 70 },\n { id: 'C-F-002', mine: '矿区C', type: '燃油矿卡', capacity: 75 },\n { id: 'C-F-003', mine: '矿区C', type: '燃油矿卡', capacity: 70 },\n { id: 'C-H-001', mine: '矿区C', type: '混合动力矿卡', capacity: 65 },\n { id: 'C-H-002', mine: '矿区C', type: '混合动力矿卡', capacity: 60 },\n ];\n\n const MINES = [...new Set(VEHICLES.map(v => v.mine))];\n const TYPES = [...new Set(VEHICLES.map(v => v.type))];\n const FAULT_TYPES = [\n '发动机过热', '液压系统压力异常', '传动轴异响', '制动片磨损',\n '电气短路', '冷却液泄漏', '轮胎气压不足', '传感器信号丢失',\n '燃油系统堵塞', '电池电压异常',\n ];\n const SUBSYSTEMS = ['发动机系统', '液压系统', '传动系统', '制动系统', '电气系统', '冷却系统', '轮胎系统'];\n const SUBSYS_COLORS = ['#dc2626', '#e8590c', '#d4891a', '#0e7bb5', '#7c3aed', '#0d9488', '#16a34a'];\n const LEVELS = ['严重', '重要', '一般'];\n const LEVEL_COLORS = ['#dc2626', '#e8590c', '#d4891a'];\n\n // ==================== STATE ====================\n const state = {\n granularity: 'day',\n startDate: '2026-04-01',\n endDate: '2026-04-27',\n filterMine: '',\n filterType: '',\n filterVehicle: '',\n };\n\n const $ = s => document.querySelector(s);\n const dom = {\n granularityGroup: $('#granularityGroup'),\n startDate: $('#startDate'), endDate: $('#endDate'),\n filterMine: $('#filterMine'), filterType: $('#filterType'), filterVehicle: $('#filterVehicle'),\n filterSummary: $('#filterSummary'),\n metricsRow: $('#metricsRow'),\n lineChart: $('#lineChart'), barChart: $('#barChart'),\n donutAck: $('#donutAck'), donutRec: $('#donutRec'),\n valAck: $('#valAck'), valRec: $('#valRec'),\n pieChart: $('#pieChart'), pieLegend: $('#pieLegend'),\n faultListBody: $('#faultListBody'),\n tableBody: $('#tableBody'), 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); }, 2000);\n }\n\n // ==================== FILTERS ====================\n function getFilteredVehicles() {\n return VEHICLES.filter(v => {\n if (state.filterMine && v.mine !== state.filterMine) return false;\n if (state.filterType && v.type !== state.filterType) return false;\n if (state.filterVehicle && v.id !== state.filterVehicle) return false;\n return true;\n });\n }\n\n function populateFilterOptions() {\n const pm = dom.filterMine.value;\n dom.filterMine.innerHTML = '<option value=\"\">全部矿区</option>' + MINES.map(m => `<option value=\"${m}\" ${pm===m?'selected':''}>${m}</option>`).join('');\n if (pm && MINES.includes(pm)) dom.filterMine.value = pm;\n\n const pt = dom.filterType.value;\n const mf = dom.filterMine.value;\n const at = mf ? [...new Set(VEHICLES.filter(v=>v.mine===mf).map(v=>v.type))] : TYPES;\n dom.filterType.innerHTML = '<option value=\"\">全部车型</option>' + at.map(t => `<option value=\"${t}\" ${pt===t?'selected':''}>${t}</option>`).join('');\n if (pt && at.includes(pt)) dom.filterType.value = pt; else dom.filterType.value = '';\n\n const pv = dom.filterVehicle.value;\n const tf = dom.filterType.value;\n let av = VEHICLES; if (mf) av = av.filter(v=>v.mine===mf); if (tf) av = av.filter(v=>v.type===tf);\n dom.filterVehicle.innerHTML = '<option value=\"\">全部车辆</option>' + av.map(v => `<option value=\"${v.id}\" ${pv===v.id?'selected':''}>${v.id}(${v.capacity}t)</option>`).join('');\n if (pv && av.some(v=>v.id===pv)) dom.filterVehicle.value = pv; else dom.filterVehicle.value = '';\n\n const fv = getFilteredVehicles();\n dom.filterSummary.textContent = fv.length < VEHICLES.length ? `已筛选 ${fv.length}/${VEHICLES.length} 辆车` : '';\n }\n\n // ==================== DATA GENERATION ====================\n function seedRandom(seed) { let s = seed; return () => { s = (s * 16807 + 0) % 2147483647; return (s - 1) / 2147483646; }; }\n\n function generateRecords() {\n const vehicles = getFilteredVehicles();\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 || vehicles.length === 0) 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, i) => genOne(d, i, vehicles)); }\n return labels.map((d, i) => genOne(d, i, vehicles));\n }\n\n function genOne(d, i, vehicles) {\n const rng = seedRandom(d.getTime() % 99997 + i * 211);\n const bm = state.granularity === 'year' ? 350 : state.granularity === 'month' ? 30 : 1;\n const vCount = vehicles.length;\n\n const totalAlarms = Math.round(bm * vCount * (1.2 + rng() * 3.0));\n const highFreqFaults = Math.round(totalAlarms * (0.08 + rng() * 0.15));\n const acknowledged = Math.round(totalAlarms * (0.65 + rng() * 0.3));\n const recovered = Math.round(acknowledged * (0.6 + rng() * 0.35));\n const ackRate = totalAlarms > 0 ? Math.round(acknowledged / totalAlarms * 1000) / 10 : 0;\n const recRate = totalAlarms > 0 ? Math.round(recovered / totalAlarms * 1000) / 10 : 0;\n\n const totalRunHours = bm * vCount * (state.granularity === 'year' ? 480 : state.granularity === 'month' ? 40 : 1.3);\n const faultsForMT = Math.max(highFreqFaults, 1);\n const mtbf = Math.round(totalRunHours / faultsForMT * 10) / 10;\n const mttr = Math.round((0.3 + rng() * 3.5) * 10) / 10;\n\n // Fault type distribution\n const faultDist = {};\n let remaining = highFreqFaults;\n FAULT_TYPES.forEach((ft, fi) => {\n let share;\n if (fi === 0) share = 0.20;\n else if (fi === 1) share = 0.15;\n else if (fi === 2) share = 0.12;\n else if (fi === 3) share = 0.10;\n else if (fi === 4) share = 0.09;\n else if (fi < 9) share = 0.07;\n else share = 0.06;\n const val = Math.round(highFreqFaults * (share + (rng() - 0.5) * 0.04));\n faultDist[ft] = Math.min(val, remaining);\n remaining = Math.max(0, remaining - val);\n });\n if (remaining > 0) faultDist[FAULT_TYPES[0]] += remaining;\n\n // Subsystem distribution\n const subsysDist = {};\n SUBSYSTEMS.forEach((s, si) => {\n const shares = [0.22, 0.17, 0.15, 0.13, 0.12, 0.10, 0.11];\n subsysDist[s] = Math.round(totalAlarms * (shares[si] + (rng() - 0.5) * 0.06));\n });\n\n // Mine distribution\n const mineDist = {};\n MINES.forEach((m, mi) => {\n const shares = [0.40, 0.33, 0.27];\n mineDist[m] = Math.round(totalAlarms * (shares[mi] + (rng() - 0.5) * 0.08));\n });\n\n // Level distribution\n const levelDist = {};\n LEVELS.forEach((l, li) => {\n const shares = [0.18, 0.32, 0.50];\n levelDist[l] = Math.round(totalAlarms * (shares[li] + (rng() - 0.5) * 0.05));\n });\n\n return { label: d, totalAlarms, highFreqFaults, acknowledged, recovered, ackRate, recRate, mtbf, mttr, faultDist, subsysDist, mineDist, levelDist };\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 a.totalAlarms += r.totalAlarms; a.highFreqFaults += r.highFreqFaults;\n a.acknowledged += r.acknowledged; a.recovered += r.recovered;\n a.mtbfSum += r.mtbf; a.mttrSum += r.mttr;\n return a;\n }, { totalAlarms: 0, highFreqFaults: 0, acknowledged: 0, recovered: 0, mtbfSum: 0, mttrSum: 0 });\n const n = records.length;\n const avgAckRate = sm.totalAlarms > 0 ? Math.round(sm.acknowledged / sm.totalAlarms * 1000) / 10 : 0;\n const avgRecRate = sm.totalAlarms > 0 ? Math.round(sm.recovered / sm.totalAlarms * 1000) / 10 : 0;\n const avgMtbf = n > 0 ? Math.round(sm.mtbfSum / n * 10) / 10 : 0;\n const avgMttr = n > 0 ? Math.round(sm.mttrSum / n * 10) / 10 : 0;\n\n const cfg = [\n { icon: 'fa-fire', label: '高频故障', value: sm.highFreqFaults.toString(), unit: '次', color: '#dc2626' },\n { icon: 'fa-bell', label: '报警总数', value: sm.totalAlarms.toString(), unit: '次', color: '#e8590c' },\n { icon: 'fa-check-circle', label: '确认率', value: avgAckRate.toFixed(1), unit: '%', color: '#0e7bb5' },\n { icon: 'fa-rotate-back', label: '恢复率', value: avgRecRate.toFixed(1), unit: '%', color: '#16a34a' },\n { icon: 'fa-clock', label: 'MTBF', value: avgMtbf.toFixed(1), unit: 'h', color: '#0d9488' },\n { icon: 'fa-wrench', label: 'MTTR', value: avgMttr.toFixed(1), unit: 'h', color: '#7c3aed' },\n { icon: 'fa-microchip', label: '子系统', value: SUBSYSTEMS.length.toString(), unit: '个', color: '#d4891a' },\n { icon: 'fa-mountain', label: '矿区', value: MINES.length.toString(), unit: '个', color: '#64748b' },\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: 6, right: 12, bottom: 22, left: 36 };\n const cw = w - pad.left - pad.right, ch = h - pad.top - pad.bottom;\n\n let mx = 0; records.forEach(r => { if (r.totalAlarms > mx) mx = r.totalAlarms; if (r.highFreqFaults > mx) mx = r.highFreqFaults; });\n mx = Math.ceil(mx * 1.15) || 10;\n\n const gl = 5;\n ctx.strokeStyle = '#eef0f4'; ctx.lineWidth = 1;\n for (let i = 0; i <= gl; i++) {\n const y = pad.top + (ch / gl) * i;\n ctx.beginPath(); ctx.moveTo(pad.left, y); ctx.lineTo(w - pad.right, y); ctx.stroke();\n ctx.fillStyle = '#94a3b8'; ctx.font = '7px DM Sans, sans-serif'; ctx.textAlign = 'right';\n ctx.fillText(Math.round(mx - (mx / gl) * i), pad.left - 3, y + 3);\n }\n\n const xs = cw / Math.max(records.length - 1, 1);\n const ml = Math.min(records.length, 14);\n const ls = Math.max(1, Math.floor(records.length / ml));\n ctx.fillStyle = '#94a3b8'; ctx.font = '7px DM Sans, sans-serif'; ctx.textAlign = 'center';\n records.forEach((r, i) => { if (i % ls === 0 || i === records.length - 1) ctx.fillText(fmtLabel(r.label), pad.left + xs * i, pad.top + ch + 12); });\n\n const defs = [{ key: 'totalAlarms', color: '#dc2626' }, { key: 'highFreqFaults', color: '#e8590c' }];\n defs.forEach(def => {\n ctx.strokeStyle = def.color; ctx.lineWidth = 2; ctx.lineJoin = 'round'; ctx.lineCap = 'round';\n ctx.beginPath();\n records.forEach((r, ii) => { const x = pad.left + xs * ii, y = pad.top + ch - (r[def.key] / mx) * ch; if (ii === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); });\n ctx.stroke();\n records.forEach((r, ii) => {\n const x = pad.left + xs * ii, y = pad.top + ch - (r[def.key] / mx) * ch;\n ctx.fillStyle = '#ffffff'; ctx.beginPath(); ctx.arc(x, y, 2.5, 0, Math.PI * 2); ctx.fill();\n ctx.fillStyle = def.color; ctx.beginPath(); ctx.arc(x, y, 1.5, 0, Math.PI * 2); ctx.fill();\n });\n });\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 mineAgg = {};\n MINES.forEach(m => { mineAgg[m] = {}; LEVELS.forEach(l => { mineAgg[m][l] = 0; }); });\n records.forEach(r => {\n Object.entries(r.mineDist || {}).forEach(([mine, count]) => {\n Object.entries(r.levelDist || {}).forEach(([level, lcount]) => {\n if (mineAgg[mine] && mineAgg[mine][level] !== undefined) {\n mineAgg[mine][level] += Math.round(count * (lcount / Math.max(r.totalAlarms, 1)));\n }\n });\n });\n });\n\n let mx = 0; MINES.forEach(m => { const s = LEVELS.reduce((a, l) => a + (mineAgg[m][l] || 0), 0); if (s > mx) mx = s; });\n mx = Math.ceil(mx * 1.2) || 10;\n\n const pad = { top: 6, right: 10, bottom: 24, left: 36 };\n const cw = w - pad.left - pad.right, ch = h - pad.top - pad.bottom;\n\n const gl = 4;\n ctx.strokeStyle = '#eef0f4'; ctx.lineWidth = 1;\n for (let i = 0; i <= gl; i++) {\n const y = pad.top + (ch / gl) * i;\n ctx.beginPath(); ctx.moveTo(pad.left, y); ctx.lineTo(w - pad.right, y); ctx.stroke();\n ctx.fillStyle = '#94a3b8'; ctx.font = '7px DM Sans, sans-serif'; ctx.textAlign = 'right';\n ctx.fillText(Math.round(mx - (mx / gl) * i), pad.left - 3, y + 3);\n }\n\n const barGap = 3;\n const barW = (cw / MINES.length) - barGap;\n if (barW <= 0) return;\n\n MINES.forEach((m, mi) => {\n const x = pad.left + (cw / MINES.length) * mi + barGap / 2;\n let sy = pad.top + ch;\n LEVELS.forEach((l, li) => {\n const val = mineAgg[m][l] || 0;\n const bh = (val / mx) * ch;\n const y = sy - bh;\n ctx.fillStyle = LEVEL_COLORS[li];\n ctx.fillRect(x, y, barW, bh);\n if (li > 0 && bh > 1) { ctx.fillStyle = 'rgba(255,255,255,0.2)'; ctx.fillRect(x, y, barW, 0.3); }\n sy = y;\n });\n ctx.fillStyle = '#475569'; ctx.font = '7px DM Sans, sans-serif'; ctx.textAlign = 'center';\n ctx.fillText(m, x + barW / 2, pad.top + ch + 12);\n const total = LEVELS.reduce((a, l) => a + (mineAgg[m][l] || 0), 0);\n ctx.fillStyle = '#0f172a'; ctx.font = 'bold 7px DM Sans, sans-serif';\n ctx.fillText(total, x + barW / 2, pad.top + ch - (total / mx) * ch - 3);\n });\n }\n\n // ==================== FAULT LIST ====================\n function renderFaultList(records) {\n if (!records.length) { dom.faultListBody.innerHTML = '<div style=\"text-align:center;color:var(--text-muted);padding:8px;font-size:8px;\">暂无数据</div>'; return; }\n const totals = {};\n FAULT_TYPES.forEach(ft => { totals[ft] = 0; });\n records.forEach(r => { Object.entries(r.faultDist || {}).forEach(([ft, c]) => { if (totals[ft] !== undefined) totals[ft] += c; }); });\n const entries = Object.entries(totals).sort((a, b) => b[1] - a[1]);\n const maxVal = entries[0]?.[1] || 1;\n const faultColors = ['#dc2626', '#e8590c', '#d4891a', '#0e7bb5', '#7c3aed', '#0d9488', '#16a34a', '#db2777', '#6366f1', '#0891b2'];\n\n dom.faultListBody.innerHTML = entries.map(([name, count], i) => `\n <div class=\"fault-item\">\n <span class=\"fault-rank\">${i + 1}</span>\n <span class=\"fault-name\">${name}</span>\n <span class=\"fault-bar-wrap\"><span class=\"fault-bar-fill\" style=\"width:${(count / maxVal * 100).toFixed(0)}%;background:${faultColors[i]}\"></span></span>\n <span class=\"fault-count\" style=\"color:${faultColors[i]}\">${count}次</span>\n </div>\n `).join('');\n }\n\n // ==================== DONUTS + PIE ====================\n function renderMiniDonut(canvas, pct, color) {\n if (!canvas) 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 const cx = w / 2, cy = h / 2;\n const outerR = Math.min(cx, cy) - 2;\n const innerR = outerR * 0.6;\n ctx.beginPath(); ctx.arc(cx, cy, outerR, 0, Math.PI * 2); ctx.fillStyle = '#eef0f4'; ctx.fill();\n const startAngle = -Math.PI / 2;\n const sliceAngle = (pct / 100) * Math.PI * 2;\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 = color; ctx.fill();\n ctx.fillStyle = '#0f172a'; ctx.font = 'bold 8px DM Sans, sans-serif'; ctx.textAlign = 'center';\n ctx.fillText(pct.toFixed(0) + '%', cx, cy + 3);\n }\n\n function renderPieChart(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 totals = {};\n SUBSYSTEMS.forEach(s => { totals[s] = 0; });\n records.forEach(r => { Object.entries(r.subsysDist || {}).forEach(([s, c]) => { if (totals[s] !== undefined) totals[s] += c; }); });\n const entries = Object.entries(totals).filter(([, v]) => v > 0);\n const grandTotal = entries.reduce((a, [, v]) => a + v, 0);\n if (grandTotal === 0) return;\n\n const cx = w / 2, cy = h / 2;\n const outerR = Math.min(cx, cy) - 4;\n let startAngle = -Math.PI / 2;\n\n const legendParts = [];\n entries.forEach(([name, val], i) => {\n const sliceAngle = (val / grandTotal) * Math.PI * 2;\n if (sliceAngle < 0.01) return;\n ctx.beginPath();\n ctx.moveTo(cx, cy);\n ctx.arc(cx, cy, outerR, startAngle, startAngle + sliceAngle);\n ctx.closePath();\n ctx.fillStyle = SUBSYS_COLORS[i];\n ctx.fill();\n ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 1;\n ctx.stroke();\n const pct = (val / grandTotal * 100).toFixed(1);\n legendParts.push(`<span class=\"pie-legend-item\"><span class=\"pie-legend-dot\" style=\"background:${SUBSYS_COLORS[i]}\"></span>${name} ${pct}%</span>`);\n startAngle += sliceAngle;\n });\n dom.pieLegend.innerHTML = legendParts.join('');\n }\n\n function renderDonutsAndPie(records) {\n if (!records.length) {\n renderMiniDonut(dom.donutAck, 0, '#0e7bb5');\n renderMiniDonut(dom.donutRec, 0, '#16a34a');\n dom.valAck.textContent = '0%'; dom.valRec.textContent = '0%';\n dom.pieLegend.innerHTML = '';\n return;\n }\n const sm = records.reduce((a, r) => { a.total += r.totalAlarms; a.ack += r.acknowledged; a.rec += r.recovered; return a; }, { total: 0, ack: 0, rec: 0 });\n const ackPct = sm.total > 0 ? sm.ack / sm.total * 100 : 0;\n const recPct = sm.total > 0 ? sm.rec / sm.total * 100 : 0;\n renderMiniDonut(dom.donutAck, ackPct, '#0e7bb5');\n renderMiniDonut(dom.donutRec, recPct, '#16a34a');\n dom.valAck.textContent = ackPct.toFixed(1) + '%';\n dom.valRec.textContent = recPct.toFixed(1) + '%';\n renderPieChart(dom.pieChart, records);\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:8px;\">暂无数据</td></tr>';\n return;\n }\n const disp = records.slice(-18);\n dom.tableBody.innerHTML = disp.map(r => `\n <tr>\n <td>${fmtFull(r.label)}</td>\n <td class=\"cell-alert\">${r.totalAlarms}</td>\n <td class=\"cell-warn\">${r.highFreqFaults}</td>\n <td class=\"cell-info\">${r.acknowledged}</td>\n <td class=\"cell-good\">${r.recovered}</td>\n <td>${r.ackRate.toFixed(1)}%</td>\n <td>${r.recRate.toFixed(1)}%</td>\n <td>${r.mtbf.toFixed(1)}</td>\n <td>${r.mttr.toFixed(1)}</td>\n </tr>`).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 renderFaultList(currentRecords);\n renderDonutsAndPie(currentRecords);\n renderTable(currentRecords);\n populateFilterOptions();\n if (!silent) {\n const gl = state.granularity === 'day' ? '日' : state.granularity === 'month' ? '月' : '年';\n const vc = getFilteredVehicles().length;\n showToast(`横轴按${gl} · ${vc}辆车 · 已加载 ${currentRecords.length} 条报警数据`, 'fa-circle-check');\n }\n }\n\n // ==================== EVENTS ====================\n dom.granularityGroup.addEventListener('click', e => {\n const btn = e.target.closest('button'); if (!btn || btn.classList.contains('active')) return;\n dom.granularityGroup.querySelectorAll('button').forEach(b => b.classList.remove('active'));\n btn.classList.add('active'); state.granularity = btn.dataset.gran;\n const now = new Date();\n if (state.granularity === 'day') { state.startDate = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10); state.endDate = now.toISOString().slice(0, 10); }\n else if (state.granularity === 'month') { state.startDate = new Date(now.getFullYear() - 1, now.getMonth(), 1).toISOString().slice(0, 10); state.endDate = now.toISOString().slice(0, 10); }\n else { state.startDate = new Date(now.getFullYear() - 4, 0, 1).toISOString().slice(0, 10); state.endDate = now.toISOString().slice(0, 10); }\n dom.startDate.value = state.startDate; dom.endDate.value = state.endDate;\n updateDashboard();\n });\n\n dom.filterMine.addEventListener('change', () => { state.filterMine = dom.filterMine.value; state.filterType = ''; state.filterVehicle = ''; updateDashboard(); });\n dom.filterType.addEventListener('change', () => { state.filterType = dom.filterType.value; state.filterVehicle = ''; updateDashboard(); });\n dom.filterVehicle.addEventListener('change', () => { state.filterVehicle = dom.filterVehicle.value; updateDashboard(); });\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; state.endDate = dom.endDate.value;\n state.filterMine = dom.filterMine.value; state.filterType = dom.filterType.value; state.filterVehicle = dom.filterVehicle.value;\n updateDashboard();\n };\n\n window.exportCSV = function() {\n if (!currentRecords.length) { showToast('无数据可导出', 'fa-triangle-exclamation'); return; }\n let csv = '周期,报警总数,高频故障,确认数,恢复数,确认率(%),恢复率(%),MTBF(h),MTTR(h)\\n';\n currentRecords.forEach(r => {\n csv += [fmtFull(r.label), r.totalAlarms, r.highFreqFaults, r.acknowledged, r.recovered,\n r.ackRate.toFixed(1), r.recRate.toFixed(1), r.mtbf.toFixed(1), r.mttr.toFixed(1)].join(',') + '\\n';\n });\n const blob = new Blob(['\\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });\n const url = URL.createObjectURL(blob); const a = document.createElement('a');\n a.href = url; a.download = `报警数据统计_${state.granularity}_${state.startDate}_${state.endDate}.csv`; a.click();\n URL.revokeObjectURL(url);\n showToast('CSV 已下载', 'fa-file-csv');\n };\n\n window.printDashboard = function() { showToast('正在准备打印...', 'fa-print'); setTimeout(() => window.print(), 400); };\n\n let rt;\n window.addEventListener('resize', () => {\n clearTimeout(rt); rt = setTimeout(() => {\n if (currentRecords.length > 0) {\n renderLineChart(dom.lineChart, currentRecords);\n renderBarChart(dom.barChart, currentRecords);\n renderFaultList(currentRecords);\n renderDonutsAndPie(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; dom.endDate.value = state.endDate;\n updateDashboard(true);\n }\n\n init();\n})();\n</script>\n\n</body>\n</html>"
},
"next": ["载荷界面装载重量改次数", "添加报警实时推送面板", "导出PDF报警统计报告", "设置MTBF/MTTR预警线", "对比不同时段报警趋势"],
"breakpoint": "none"
}
```
推理
用户要求对报警数据统计仪表盘进行几个改动：
1. 将"矿区报警数量对比"和"确认率 & 恢复率 & 子系统分布"放到"报警数量趋势"下面 - 也就是说图表区域从三列改成上下两行布局？需要重新理解。
让我重新读一下：用户想把三个图表重新排列。原来布局是：
- 左：报警数量趋势（折线图）
- 中：各矿区报警数量对比（柱状图）
- 右：确认率 & 恢复率 & 子系统分布（环形图+列表）
用户说"将矿区报警数量对比、确认率 & 恢复率 & 子系统分布放到报警数量趋势下面"——这意味着报警数量趋势在上面占一整行，下面再放矿区对比和确认率恢复率子系统分布。
让我重新设计布局：
- 上面一行：报警数量趋势（折线图，全宽）
- 下面一行：左边是各矿区报警数量对比（柱状图），右边是确认率 & 恢复率 & 子系统分布面板
2. "子系统分布设计为饼图"——子系统分布从列表改为环形/饼图
3. "高频故障统计以列出高频的故障词条与数量"——需要增加高频故障词条的展示，可能是在某个面板中列出具体的故障类型和数量
4. "筛选为矿区、车型、车辆"——筛选条件从矿区/报警级别/子系统改为矿区/车型/车辆（类似之前的矿车运营数据统计的筛选方式）
现在我需要重新设计这个仪表盘。让我规划一下：
**筛选栏**：矿区 → 车型（车辆类型）→ 车辆，三级联动
**8项指标卡片**：高频故障数量、报警总数、报警确认率、报警恢复率、MTBF、MTTR、子系统数、涉及矿区数
**图表布局**：
- 上行全宽：报警数量趋势（折线图，含报警总数和高频故障两条线）
- 下行左：各矿区报警数量对比（堆叠柱状图，严重/重要/一般）
- 下行右：确认率 & 恢复率（双环形图）+ 子系统分布（饼图）
- 另外需要一个高频故障词条列表
让我想想怎么安排空间。16:9的仪表盘，我可以：
**方案**：
- 指标卡片行（8个）
- 筛选栏
- 图表区：
- 上行：报警数量趋势（全宽折线图）
- 下行左：各矿区报警数量对比（柱状图）+ 高频故障词条
- 下行右：确认率 & 恢复率（双环形图）+ 子系统分布（饼图）
或者：
- 上行：报警数量趋势（全宽）
- 下行三列：矿区对比 | 高频故障词条 | 确认率恢复率+子系统饼图
让我设计成三列布局的下行：
- 下行左：各矿区报警数量对比（柱状图）
- 下行中：高频故障词条列表（带数量的横向条）
- 下行右：确认率恢复率（双环形）+ 子系统分布（饼图）
这样比较平衡。
现在重新生成完整的HTML代码。
关于车辆数据，我需要类似之前的VEHICLES数据结构，但这是报警统计，所以筛选的是矿区/车型/车辆，用来过滤报警数据。
让我整理一下：
**VEHICLES**：和之前一样，15辆车分布在3个矿区
**筛选**：矿区 → 车型 → 车辆，三级联动，去掉报警级别和子系统筛选
**指标**：8个指标卡
**图表区**：
- 上行全宽：折线图 - 报警数量趋势（报警总数+高频故障）
- 下行三列：
- 左：各矿区报警数量对比（堆叠柱状，严重/重要/一般）
- 中：高频故障词条列表（横向条+数量）
- 右：确认率环形+恢复率环形+子系统分布饼图
对于高频故障词条，我需要定义一些具体的故障类型，比如"发动机过热"、"液压泄漏"、"制动失灵"等，然后统计它们出现的次数。
让我定义一些故障词条：
- 发动机过热
- 液压系统压力异常
- 传动轴异响
- 制动片磨损
- 电气短路
- 冷却液泄漏
- 轮胎气压不足
- 传感器故障
- 燃油系统堵塞
- 电池电压异常
然后从报警总数中分配这些故障的数量。
对于子系统分布饼图，用Canvas画一个简单的饼图。
好的，开始写代码。需要注意保持白底风格，使用红色系强调色（因为报警相关）。
现在让我重新设计布局。由于上行全宽折线图，下行三列，整体布局需要调整。
指标卡片8个一行可能会比较窄，但16:9比例下应该还好。
关于高频故障词条面板的设计：可以用横向堆叠条来展示各故障类型的数量，类似之前占比条的设计。
关于子系统饼图：用Canvas画环形图或饼图，几个子系统各占一个扇形。
开始编写完整代码。
我需要特别注意：
- 筛选栏改为矿区、车型、车辆
- 去掉报警级别和子系统的筛选
- 高频故障词条面板
- 子系统饼图
- 布局调整
另外，报警确认率和恢复率已经在上面的指标卡中展示了，在下面的环形图中也可以再展示一次作为可视化。
关于高频故障统计：在数据生成中，我需要在每个周期生成具体的高频故障词条分布，然后在面板中展示汇总后的各故障词条数量。
好的，开始编写完整的HTML代码。
我会把图表区域改成：
- 上行：全宽折线图（报警趋势）
- 下行三列：矿区对比柱状图 | 高频故障词条 | 确认恢复率环形+子系统饼图
关于饼图的实现，我将用Canvas来画。
现在开始写代码。
1. 将"矿区报警数量对比"和"确认率 & 恢复率 & 子系统分布"放到"报警数量趋势"下面 - 也就是说图表区域从三列改成上下两行布局？需要重新理解。
让我重新读一下：用户想把三个图表重新排列。原来布局是：
- 左：报警数量趋势（折线图）
- 中：各矿区报警数量对比（柱状图）
- 右：确认率 & 恢复率 & 子系统分布（环形图+列表）
用户说"将矿区报警数量对比、确认率 & 恢复率 & 子系统分布放到报警数量趋势下面"——这意味着报警数量趋势在上面占一整行，下面再放矿区对比和确认率恢复率子系统分布。
让我重新设计布局：
- 上面一行：报警数量趋势（折线图，全宽）
- 下面一行：左边是各矿区报警数量对比（柱状图），右边是确认率 & 恢复率 & 子系统分布面板
2. "子系统分布设计为饼图"——子系统分布从列表改为环形/饼图
3. "高频故障统计以列出高频的故障词条与数量"——需要增加高频故障词条的展示，可能是在某个面板中列出具体的故障类型和数量
4. "筛选为矿区、车型、车辆"——筛选条件从矿区/报警级别/子系统改为矿区/车型/车辆（类似之前的矿车运营数据统计的筛选方式）
现在我需要重新设计这个仪表盘。让我规划一下：
**筛选栏**：矿区 → 车型（车辆类型）→ 车辆，三级联动
**8项指标卡片**：高频故障数量、报警总数、报警确认率、报警恢复率、MTBF、MTTR、子系统数、涉及矿区数
**图表布局**：
- 上行全宽：报警数量趋势（折线图，含报警总数和高频故障两条线）
- 下行左：各矿区报警数量对比（堆叠柱状图，严重/重要/一般）
- 下行右：确认率 & 恢复率（双环形图）+ 子系统分布（饼图）
- 另外需要一个高频故障词条列表
让我想想怎么安排空间。16:9的仪表盘，我可以：
**方案**：
- 指标卡片行（8个）
- 筛选栏
- 图表区：
- 上行：报警数量趋势（全宽折线图）
- 下行左：各矿区报警数量对比（柱状图）+ 高频故障词条
- 下行右：确认率 & 恢复率（双环形图）+ 子系统分布（饼图）
或者：
- 上行：报警数量趋势（全宽）
- 下行三列：矿区对比 | 高频故障词条 | 确认率恢复率+子系统饼图
让我设计成三列布局的下行：
- 下行左：各矿区报警数量对比（柱状图）
- 下行中：高频故障词条列表（带数量的横向条）
- 下行右：确认率恢复率（双环形）+ 子系统分布（饼图）
这样比较平衡。
现在重新生成完整的HTML代码。
关于车辆数据，我需要类似之前的VEHICLES数据结构，但这是报警统计，所以筛选的是矿区/车型/车辆，用来过滤报警数据。
让我整理一下：
**VEHICLES**：和之前一样，15辆车分布在3个矿区
**筛选**：矿区 → 车型 → 车辆，三级联动，去掉报警级别和子系统筛选
**指标**：8个指标卡
**图表区**：
- 上行全宽：折线图 - 报警数量趋势（报警总数+高频故障）
- 下行三列：
- 左：各矿区报警数量对比（堆叠柱状，严重/重要/一般）
- 中：高频故障词条列表（横向条+数量）
- 右：确认率环形+恢复率环形+子系统分布饼图
对于高频故障词条，我需要定义一些具体的故障类型，比如"发动机过热"、"液压泄漏"、"制动失灵"等，然后统计它们出现的次数。
让我定义一些故障词条：
- 发动机过热
- 液压系统压力异常
- 传动轴异响
- 制动片磨损
- 电气短路
- 冷却液泄漏
- 轮胎气压不足
- 传感器故障
- 燃油系统堵塞
- 电池电压异常
然后从报警总数中分配这些故障的数量。
对于子系统分布饼图，用Canvas画一个简单的饼图。
好的，开始写代码。需要注意保持白底风格，使用红色系强调色（因为报警相关）。
现在让我重新设计布局。由于上行全宽折线图，下行三列，整体布局需要调整。
指标卡片8个一行可能会比较窄，但16:9比例下应该还好。
关于高频故障词条面板的设计：可以用横向堆叠条来展示各故障类型的数量，类似之前占比条的设计。
关于子系统饼图：用Canvas画环形图或饼图，几个子系统各占一个扇形。
开始编写完整代码。
我需要特别注意：
- 筛选栏改为矿区、车型、车辆
- 去掉报警级别和子系统的筛选
- 高频故障词条面板
- 子系统饼图
- 布局调整
另外，报警确认率和恢复率已经在上面的指标卡中展示了，在下面的环形图中也可以再展示一次作为可视化。
关于高频故障统计：在数据生成中，我需要在每个周期生成具体的高频故障词条分布，然后在面板中展示汇总后的各故障词条数量。
好的，开始编写完整的HTML代码。
我会把图表区域改成：
- 上行：全宽折线图（报警趋势）
- 下行三列：矿区对比柱状图 | 高频故障词条 | 确认恢复率环形+子系统饼图
关于饼图的实现，我将用Canvas来画。
现在开始写代码。
角色
assistant
content
total_tokens
243460
summary
报警数据统计仪表盘（重构版），白底红色强调设计，8项核心指标，上行全宽报警趋势折线图，下行三列（矿区对比柱状图/高频故障词条/确认恢复率双环形+子系统饼图），矿区→车型→车辆三级联动筛选，年/月/日横轴切换，CSV导出与打印。
uiParsing
关闭