<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPO 指挥调度大屏 - 任务聚焦模式原型</title>
<!-- 引入 Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<!-- 引入 Noto Sans SC 字体 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- 引入 ECharts 用于美化图表 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<style>
:root {
--bg-color: #0A192F;
--panel-bg: rgba(10, 25, 47, 0.85);
--border-color: rgba(0, 175, 255, 0.2);
--primary-color: #00AFFF;
--success-color: #28a745;
--warning-color: #FFC107;
--danger-color: #DC3545;
--muted-color: #6c757d;
--text-color: #E0E6F1;
--text-secondary: #8899B3;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--bg-color);
font-family: 'Noto Sans SC', sans-serif;
color: var(--text-color);
width: 1920px;
height: 1080px;
overflow: hidden;
position: relative;
}
.screen-container {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 380px 1fr 380px;
grid-template-rows: 80px 1fr;
grid-template-areas:
"header header header"
"left-panel center-map right-panel";
padding: 20px;
gap: 20px;
}
/* --- 顶部栏 --- */
.header {
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
}
.header .back-button {
font-size: 18px;
color: var(--primary-color);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
.header .task-title { font-size: 24px; font-weight: 700; }
.header .system-time { font-size: 18px; font-weight: 300; }
/* --- GIS 地图区域 --- */
.center-map {
grid-area: center-map;
background: url('https://i.ibb.co/hLw20v2/layout.png') no-repeat center center; /* 替换为真实的地图截图 */
background-size: cover;
border-radius: 12px;
border: 1px solid var(--border-color);
display: flex;
justify-content: center;
align-items: center;
}
.map-placeholder-text {
font-size: 48px;
font-weight: 700;
color: rgba(255,255,255,0.3);
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* --- 左右侧面板通用 --- */
.side-panel {
grid-row: 2;
background: var(--panel-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
height: 960px;
overflow-y: auto;
}
.side-panel::-webkit-scrollbar { display: none; }
.panel-card {
background: rgba(0, 175, 255, 0.05);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 15px;
}
.card-header {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 500;
padding-bottom: 10px;
margin-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.card-header i { color: var(--primary-color); }
/* --- 左侧面板：任务流程与控制 --- */
.task-summary-card .info-row,
.context-info-card .info-row {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; line-height: 1.6;
}
.task-summary-card .info-row i,
.context-info-card .info-row i {
width: 20px; text-align: center; color: var(--text-secondary); margin-top: 4px;
}
.task-summary-card .info-row strong,
.context-info-card .info-row strong { font-weight: 500; color: #fff; }
.sop-card .sop-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sop-card .sop-item { display: flex; align-items: center; gap: 10px; }
.sop-card .sop-item i { width: 20px; text-align: center; }
.sop-card .sop-item.completed { color: var(--success-color); text-decoration: line-through; opacity: 0.7; }
.sop-card .sop-item.active { color: var(--warning-color); font-weight: 700; }
.action-card .button {
width: 100%; padding: 15px; border: none; border-radius: 8px; color: #fff;
font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.2s ease;
display: flex; justify-content: center; align-items: center; gap: 10px;
}
.action-card .button:not(:last-child) { margin-bottom: 10px; }
.action-card .button.primary { background-color: var(--primary-color); }
.action-card .button.secondary { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
.action-card .button:hover { opacity: 0.9; }
/* --- 右侧面板：AI辅助与情境信息 --- */
.ai-agent-card .recommendation {
background: rgba(0, 175, 255, 0.1); border-radius: 6px; padding: 12px; margin-bottom: 10px;
}
.kpi-card .kpi-item { text-align: center; }
.kpi-card .kpi-value { font-size: 28px; font-weight: 700; margin-bottom: 5px; }
.kpi-card .kpi-label { font-size: 14px; color: var(--text-secondary); }
.echarts-gauge { width: 100%; height: 150px; }
.accordion .accordion-item {
margin-bottom: 10px;
border: 1px solid var(--border-color); border-radius: 6px;
}
.accordion .accordion-header {
padding: 12px 15px; background: rgba(0, 175, 255, 0.1); cursor: pointer;
display: flex; justify-content: space-between; align-items: center;
}
.accordion .accordion-content { padding: 15px; display: flex; flex-direction: column; gap: 12px; }
/* --- 状态化设计 --- */
.tab-content { display: none; }
.tab-content.active { display: block; }
.tabs { display: flex; justify-content: center; margin-bottom: 20px; background: rgba(0,0,0,0.2); border-radius: 8px; padding: 5px; }
.tab-button {
flex: 1; padding: 10px; border: none; background: transparent; color: var(--text-secondary);
cursor: pointer; border-radius: 6px; transition: all 0.3s ease;
}
.tab-button.active { background: var(--primary-color); color: #fff; font-weight: 500; }
/* 异常状态的特殊样式 */
.alert-mode .screen-container { box-shadow: 0 0 30px rgba(220, 53, 69, 0.7), inset 0 0 30px rgba(220, 53, 69, 0.5); }
.alert-mode .header .task-title { color: var(--danger-color); }
.alert-banner {
background: var(--danger-color); color: #fff; padding: 15px; font-size: 18px;
font-weight: 700; border-radius: 8px; text-align: center; margin-bottom: 20px;
}
.ai-agent-card.alert-ai { background: rgba(220, 53, 69, 0.1); border-color: var(--danger-color); }
.ai-agent-card.alert-ai .card-header i { color: var(--danger-color); }
.action-card .button.danger { background: var(--danger-color); }
</style>
</head>
<body id="body">
<div class="tabs">
<button class="tab-button active" onclick="switchTab('initiated')">待启动</button>
<button class="tab-button" onclick="switchTab('inprogress')">进行中-正常</button>
<button class="tab-button" onclick="switchTab('alert')">进行中-异常</button>
<button class="tab-button" onclick="switchTab('completed')">已结束</button>
</div>
<div id="initiated" class="tab-content active">
<!-- 待启动界面的 screen-container -->
<div class="screen-container">
<header class="header">
<a href="#" class="back-button"><i class="fas fa-arrow-left"></i> 返回全局监控</a>
<div class="task-title">聚焦任务: T240808-01</div>
<div class="system-time">2024-08-08 13:50:15</div>
</header>
<!-- 左侧面板 -->
<aside class="side-panel left-panel">
<div class="panel-card task-summary-card">
<div class="card-header"><i class="fas fa-file-alt"></i>任务摘要</div>
<div class="info-row"><i class="fas fa-flag"></i><div><strong>类型:</strong> 器官转运</div></div>
<div class="info-row"><i class="fas fa-location-arrow"></i><div><strong>起点:</strong> 江苏省人民医院 - OR 3</div></div>
<div class="info-row"><i class="fas fa-location-dot"></i><div><strong>终点:</strong> 南京市第一医院 - OR 8</div></div>
<div class="info-row"><i class="fas fa-lungs"></i><div><strong>器官:</strong> 肝脏 x 1, 肾脏 x 2</div></div>
</div>
<div class="panel-card sop-card">
<div class="card-header"><i class="fas fa-tasks"></i>SOP 待办清单</div>
<ul class="sop-list">
<li class="sop-item active"><i class="fas fa-user-plus"></i>1. 分配协调员与设备</li>
<li class="sop-item"><i class="fas fa-running"></i>2. 协调员出发</li>
<li class="sop-item"><i class="fas fa-hospital"></i>3. 到达获取点</li>
<li class="sop-item"><i class="fas fa-box-open"></i>4. 器官获取完成</li>
<li class="sop-item"><i class="fas fa-route"></i>5. 开始运输</li>
<li class="sop-item"><i class="fas fa-flag-checkered"></i>6. 交付完成</li>
</ul>
</div>
<div class="panel-card action-card">
<div class="card-header"><i class="fas fa-cogs"></i>任务操作</div>
<button class="button primary"><i class="fas fa-rocket"></i>指派任务</button>
<button class="button secondary"><i class="fas fa-times-circle"></i>取消任务</button>
</div>
</aside>
<!-- 地图 -->
<main class="center-map">
<div class="map-placeholder-text">GIS 地图区域</div>
</main>
<!-- 右侧面板 -->
<aside class="side-panel right-panel">
<div class="panel-card ai-agent-card">
<div class="card-header"><i class="fas fa-brain"></i>AI 调度建议</div>
<div class="recommendation">
<strong>张三</strong> <span style="color:var(--success-color);">(最优)</span><br>
<small>距起点: 5.2km | ETA: 12分钟 | 经验: ICU背景</small>
</div>
<div class="recommendation">
<strong>李四</strong><br>
<small>距起点: 8.1km | ETA: 20分钟 | 经验: 神经外科</small>
</div>
<div class="recommendation">
<strong>王五</strong><br>
<small>距起点: 6.5km | ETA: 18分钟 | 经验: 肝移植协调</small>
</div>
</div>
<div class="panel-card kpi-card">
<div class="card-header"><i class="fas fa-tachometer-alt"></i>全局资源状态</div>
<div style="display:flex; justify-content: space-around;">
<div class="kpi-item">
<div class="kpi-value" style="color:var(--success-color)">12</div>
<div class="kpi-label">空闲协调员</div>
</div>
<div class="kpi-item">
<div class="kpi-value">5</div>
<div class="kpi-label">可用转运箱</div>
</div>
</div>
</div>
<div class="panel-card context-info-card accordion">
<div class="accordion-item">
<div class="accordion-header"><strong><i class="fas fa-file-signature"></i>前置文书详情</strong> <i class="fas fa-chevron-down"></i></div>
<div class="accordion-content">
<div class="info-row"><i class="fas fa-check-circle" style="color:var(--success-color)"></i><div><strong>捐赠协议:</strong> 已签署并上传</div></div>
<div class="info-row"><i class="fas fa-check-circle" style="color:var(--success-color)"></i><div><strong>死亡证明:</strong> 已确认</div></div>
</div>
</div>
</div>
</aside>
</div>
</div>
<div id="inprogress" class="tab-content">
<!-- 进行中-正常界面的 screen-container -->
<div class="screen-container">
<header class="header">
<a href="#" class="back-button"><i class="fas fa-arrow-left"></i> 返回全局监控</a>
<div class="task-title" style="color:var(--success-color)">聚焦任务: T240808-02</div>
<div class="system-time">2024-08-08 14:30:00</div>
</header>
<aside class="side-panel left-panel">
<div class="panel-card task-summary-card">
<div class="card-header"><i class="fas fa-file-alt"></i>任务摘要</div>
<div class="info-row"><i class="fas fa-flag"></i><div><strong>类型:</strong> 器官转运</div></div>
<div class="info-row"><i class="fas fa-location-arrow"></i><div><strong>起点:</strong> 江苏省人民医院 - OR 3</div></div>
<div class="info-row"><i class="fas fa-location-dot"></i><div><strong>终点:</strong> 南京市第一医院 - OR 8</div></div>
<div class="info-row"><i class="fas fa-lungs"></i><div><strong>器官:</strong> 肝脏 x 1, 肾脏 x 2</div></div>
</div>
<div class="panel-card sop-card">
<div class="card-header"><i class="fas fa-tasks"></i>SOP 进度与日志</div>
<ul class="sop-list">
<li class="sop-item completed"><i class="fas fa-check-circle"></i>1. 分配协调员: 张三 (14:05)</li>
<li class="sop-item completed"><i class="fas fa-check-circle"></i>2. 协调员出发 (14:10)</li>
<li class="sop-item active"><i class="fas fa-hospital"></i>3. 到达获取点...</li>
</ul>
</div>
<div class="panel-card action-card">
<div class="card-header"><i class="fas fa-cogs"></i>过程干预</div>
<button class="button primary"><i class="fas fa-video"></i>视频通话</button>
<button class="button secondary"><i class="fas fa-paper-plane"></i>发送指令</button>
</div>
</aside>
<main class="center-map"><div class="map-placeholder-text">GIS 地图区域</div></main>
<aside class="side-panel right-panel">
<div class="panel-card ai-agent-card">
<div class="card-header"><i class="fas fa-shield-alt"></i>AI 质控监控</div>
<div class="info-row"><i class="fas fa-check-circle" style="color:var(--success-color)"></i><strong>设备状态正常:</strong> T08转运箱参数稳定。</div>
<div class="info-row"><i class="fas fa-check-circle" style="color:var(--success-color)"></i><strong>路线通畅:</strong> 预计将提前5分钟到达。</div>
</div>
<div class="panel-card kpi-card">
<div class="card-header"><i class="fas fa-tachometer-alt"></i>实时 KPI 监控</div>
<div id="gauge-chart" class="echarts-gauge"></div>
<div style="display:flex; justify-content: space-around;">
<div class="kpi-item">
<div class="kpi-value" style="color:var(--warning-color)">07:34:38</div>
<div class="kpi-label">冷缺血剩余时间</div>
</div>
<div class="kpi-item">
<div class="kpi-value">14:55</div>
<div class="kpi-label">预计到达</div>
</div>
</div>
</div>
<div class="panel-card context-info-card accordion">
<div class="accordion-item">
<div class="accordion-header"><strong><i class="fas fa-user-tie"></i>协调员详情</strong> <i class="fas fa-chevron-down"></i></div>
<div class="accordion-content">
<div class="info-row"><i class="fas fa-id-badge"></i><div><strong>姓名:</strong> 张三</div></div>
<div class="info-row"><i class="fas fa-phone"></i><div><strong>电话:</strong> 138****5678</div></div>
</div>
</div>
</div>
</aside>
</div>
</div>
<div id="alert" class="tab-content">
<!-- 进行中-异常界面的 screen-container -->
<div class="screen-container alert-mode">
<header class="header">
<a href="#" class="back-button"><i class="fas fa-arrow-left"></i> 返回全局监控</a>
<div class="task-title">聚焦任务: T240808-03</div>
<div class="system-time">2024-08-08 15:10:45</div>
</header>
<aside class="side-panel left-panel">
<div class="alert-banner"><i class="fas fa-exclamation-triangle"></i> 严重预警: 转运箱温度超标！</div>
<div class="panel-card task-summary-card">
<div class="card-header"><i class="fas fa-file-alt"></i>任务摘要</div>
<div class="info-row"><i class="fas fa-flag"></i><div><strong>类型:</strong> 器官转运</div></div>
<div class="info-row"><i class="fas fa-location-arrow"></i><div><strong>起点:</strong> 江苏省人民医院 - OR 3</div></div>
<div class="info-row"><i class="fas fa-location-dot"></i><div><strong>终点:</strong> 南京市第一医院 - OR 8</div></div>
</div>
<div class="panel-card sop-card">
<div class="card-header"><i class="fas fa-tasks"></i>操作日志 (最新)</div>
<ul class="sop-list">
<li class="sop-item" style="color: var(--danger-color); font-weight:700;"><i class="fas fa-exclamation-circle"></i>15:10 [预警] T03温度达到8.2°C</li>
<li class="sop-item completed"><i class="fas fa-check-circle"></i>14:45 开始运输</li>
</ul>
</div>
<div class="panel-card action-card">
<div class="card-header"><i class="fas fa-cogs"></i>应急处置</div>
<button class="button danger"><i class="fas fa-siren-on"></i>启动应急预案</button>
<button class="button secondary"><i class="fas fa-video"></i>紧急视频通话</button>
</div>
</aside>
<main class="center-map"><div class="map-placeholder-text">GIS 地图区域</div></main>
<aside class="side-panel right-panel">
<div class="panel-card ai-agent-card alert-ai">
<div class="card-header"><i class="fas fa-brain"></i>AI 紧急响应</div>
<div><strong>风险研判:</strong> <span style="color:var(--danger-color)">高风险</span>。原因分析: 设备故障概率75%。</div>
<hr style="border-color:rgba(220, 53, 69, 0.3); margin: 15px 0;">
<div><strong>处置建议:</strong></div>
<ul style="list-style:none; padding-left:10px;">
<li>1. 立即启动《冷链异常应急预案》。</li>
<li>2. 调度最近备用转运箱T11 (距15km)。</li>
<li>3. 规划至南京鼓楼医院进行临时交接。</li>
</ul>
</div>
<div class="panel-card kpi-card">
<div class="card-header"><i class="fas fa-tachometer-alt"></i>实时 KPI 监控</div>
<div id="gauge-chart-alert" class="echarts-gauge"></div>
</div>
<div class="panel-card context-info-card accordion">
<div class="accordion-item">
<div class="accordion-header"><strong><i class="fas fa-box"></i>设备实时参数</strong> <i class="fas fa-chevron-down"></i></div>
<div class="accordion-content">
<div class="info-row"><i class="fas fa-temperature-high"></i><div><strong>温度:</strong> <span style="color:var(--danger-color);font-weight:700;">8.2°C</span></div></div>
<div class="info-row"><i class="fas fa-tint"></i><div><strong>湿度:</strong> 65%</div></div>
</div>
</div>
</div>
</aside>
</div>
</div>
<div id="completed" class="tab-content">
<!-- 已结束界面的 screen-container -->
<div class="screen-container">
<header class="header">
<a href="#" class="back-button"><i class="fas fa-arrow-left"></i> 返回全局监控</a>
<div class="task-title" style="color:var(--muted-color)">聚焦任务: T240808-04</div>
<div class="system-time">2024-08-08 17:00:00</div>
</header>
<aside class="side-panel left-panel">
<div class="panel-card task-summary-card">
<div class="card-header"><i class="fas fa-file-alt"></i>任务总结报告</div>
<div class="info-row"><i class="fas fa-check-circle" style="color:var(--success-color)"></i><div><strong>最终状态:</strong> 交付成功</div></div>
<div class="info-row"><i class="fas fa-calendar-check"></i><div><strong>完成时间:</strong> 16:30:00</div></div>
<div class="info-row"><i class="fas fa-clock"></i><div><strong>总耗时:</strong> 2小时45分钟</div></div>
<div class="info-row"><i class="fas fa-road"></i><div><strong>总里程:</strong> 123.5 公里</div></div>
</div>
<div class="panel-card sop-card">
<div class="card-header"><i class="fas fa-history"></i>完整操作日志</div>
<ul class="sop-list">
<li class="sop-item completed"><i class="fas fa-check-circle"></i>16:30 交付完成</li>
<li class="sop-item completed"><i class="fas fa-check-circle"></i>13:45 开始运输</li>
<li class="sop-item completed"><i class="fas fa-check-circle"></i>13:30 器官获取完成</li>
</ul>
</div>
<div class="panel-card action-card">
<div class="card-header"><i class="fas fa-cogs"></i>任务复盘</div>
<button class="button" style="background-color:var(--muted-color)"><i class="fas fa-route"></i>轨迹回放</button>
<button class="button secondary"><i class="fas fa-file-pdf"></i>生成详细报告</button>
</div>
</aside>
<main class="center-map"><div class="map-placeholder-text">GIS 地图区域</div></main>
<aside class="side-panel right-panel">
<div class="panel-card ai-agent-card">
<div class="card-header"><i class="fas fa-chart-pie"></i>AI 绩效分析</div>
<div><strong>总耗时评估:</strong> <span style="color:var(--success-color)">优秀</span> (比同类任务平均快15分钟)。</div>
<hr style="border-color:var(--border-color); margin: 15px 0;">
<div><strong>运输效率:</strong> 高于平均水平。</div>
</div>
<div class="panel-card context-info-card accordion">
<div class="accordion-item">
<div class="accordion-header"><strong><i class="fas fa-file-invoice"></i>交付文书回执</strong> <i class="fas fa-chevron-down"></i></div>
<div class="accordion-content">
<div class="info-row"><i class="fas fa-check-circle" style="color:var(--success-color)"></i><div><strong>器官接收确认单:</strong> 已签署并归档</div></div>
</div>
</div>
</div>
</aside>
</div>
</div>
<script>
// Tab切换逻辑
function switchTab(tabId) {
const tabContents = document.querySelectorAll('.tab-content');
tabContents.forEach(content => {
content.classList.remove('active');
});
document.getElementById(tabId).classList.add('active');
const tabButtons = document.querySelectorAll('.tab-button');
tabButtons.forEach(button => {
button.classList.remove('active');
});
event.currentTarget.classList.add('active');
// 切换时改变body的class，用于触发特定状态的样式
document.getElementById('body').className = (tabId === 'alert') ? 'alert-mode' : '';
// 重新初始化图表
initCharts();
}
// ECharts 初始化
function initCharts() {
// 正常状态的仪表盘
var gaugeChartDom = document.getElementById('gauge-chart');
if (gaugeChartDom) {
var myGaugeChart = echarts.init(gaugeChartDom);
var gaugeOption = {
series: [{
type: 'gauge',
startAngle: 180, endAngle: 0,
center: ['50%', '75%'], radius: '90%',
min: 0, max: 8 * 3600, splitNumber: 8,
axisLine: { lineStyle: { width: 6, color: [[0.25, '#dc3545'], [0.5, '#ffc107'], [1, '#28a745']] } },
pointer: { icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', length: '12%', width: 20, offsetCenter: [0, '-60%'], itemStyle: { color: 'auto' } },
axisTick: { length: 12, lineStyle: { color: 'auto', width: 2 } },
splitLine: { length: 20, lineStyle: { color: 'auto', width: 5 } },
axisLabel: { color: '#fff', fontSize: 12, distance: -60, formatter: function (value) { return Math.round(value/3600); } },
title: { offsetCenter: [0, '-10%'], fontSize: 16, color: '#fff' },
detail: { fontSize: 0 },
data: [{ value: 7.5 * 3600, name: 'H' }]
}]
};
myGaugeChart.setOption(gaugeOption);
}
// 异常状态的仪表盘
var gaugeAlertChartDom = document.getElementById('gauge-chart-alert');
if(gaugeAlertChartDom){
var myGaugeAlertChart = echarts.init(gaugeAlertChartDom);
var gaugeAlertOption = {
series: [{
type: 'gauge',
startAngle: 180, endAngle: 0,
center: ['50%', '75%'], radius: '90%',
min: 0, max: 8 * 3600, splitNumber: 8,
axisLine: { lineStyle: { width: 6, color: [[0.25, '#dc3545'], [0.5, '#ffc107'], [1, '#28a745']] } },
pointer: { itemStyle: { color: '#dc3545' } },
axisTick: { length: 12, lineStyle: { color: 'auto', width: 2 } },
splitLine: { length: 20, lineStyle: { color: 'auto', width: 5 } },
axisLabel: { color: '#fff', fontSize: 12, distance: -60, formatter: function (value) { return Math.round(value/3600); } },
title: { offsetCenter: [0, '-20%'], fontSize: 20, fontWeight: 'bolder', color: '#dc3545' },
detail: { fontSize: 14, color: '#ffc2c2', offsetCenter: [0, '10%'], formatter: '{value} / 08:00:00'},
data: [{ value: '03:29:42', name: '剩余时间' }]
}]
};
// 模拟一个值来定位指针
gaugeAlertOption.series[0].data[0].value = 3.5 * 3600;
myGaugeAlertChart.setOption(gaugeAlertOption);
}
}
// 页面加载后初始化图表
document.addEventListener('DOMContentLoaded', function() {
initCharts();
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html