<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>右侧AI决策与指挥操作面板原型 (指挥行为追溯版)</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" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<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);
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0), radial-gradient(circle at 25px 25px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
background-size: 50px 50px;
font-family: 'Noto Sans SC', sans-serif;
color: var(--text-color);
padding: 40px;
display: flex;
justify-content: center;
align-items: flex-start;
gap: 40px;
flex-wrap: wrap;
}
/* --- 右侧面板通用基础样式 --- */
.right-panel {
width: 380px;
height: 960px;
background: var(--panel-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
border-radius: 12px;
display: flex;
flex-direction: column;
padding: 20px;
gap: 20px;
}
.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); }
/* --- 1. 上部：AI辅助决策建议区 --- */
.ai-suggestion-zone { height: 280px; }
.ai-suggestion-zone .content {
height: calc(100% - 46px);
display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.recommendation {
background: rgba(0, 175, 255, 0.1); border-radius: 6px;
padding: 12px; border-left: 3px solid var(--primary-color);
}
.ai-text-block { font-size: 14px; line-height: 1.7; }
.ai-text-block strong { color: var(--primary-color); font-weight: 500; }
/* --- 2. 中部：指挥面板 --- */
.command-panel-zone { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.command-button {
background: rgba(0, 175, 255, 0.1); border: 1px solid var(--border-color);
border-radius: 8px; padding: 15px;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 10px;
cursor: pointer; transition: all 0.3s ease;
}
.command-button i { font-size: 28px; color: var(--primary-color); transition: all 0.3s ease; }
.command-button span { font-size: 14px; font-weight: 500; }
.command-button:hover { background: rgba(0, 175, 255, 0.2); border-color: var(--primary-color); }
.command-button.disabled {
opacity: 0.4; cursor: not-allowed;
background: rgba(108, 117, 125, 0.1); border-color: rgba(108, 117, 125, 0.2);
}
.command-button.disabled i { color: var(--muted-color); }
.command-button.danger { background: rgba(220, 53, 69, 0.1); border-color: var(--danger-color); }
.command-button.danger i { color: var(--danger-color); }
.command-button.danger:hover { background: rgba(220, 53, 69, 0.2); }
/* --- 3. 下部：调度信息流 --- */
.dispatch-info-zone {
flex-grow: 1; display: flex; flex-direction: column;
}
.info-stream {
flex-grow: 1; overflow-y: auto;
padding-right: 10px; margin-right: -5px;
}
.info-stream::-webkit-scrollbar { width: 4px; }
.info-stream::-webkit-scrollbar-track { background: transparent; }
.info-stream::-webkit-scrollbar-thumb { background: rgba(0, 175, 255, 0.3); border-radius: 2px; }
.info-item {
display: flex; gap: 15px;
padding: 12px 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.info-item:last-child { border-bottom: none; }
.info-icon { width: 30px; text-align: center; margin-top: 2px; }
.info-icon i { font-size: 16px; }
.info-details { flex-grow: 1; }
.info-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 4px;
}
.info-title { font-weight: 500; font-size: 14px; }
.info-time { color: var(--text-secondary); font-size: 12px; }
.info-content { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.info-content strong { color: var(--text-color); font-weight: 400; }
.info-item.alert-log {
background: rgba(255, 193, 7, 0.05);
border-left: 2px solid var(--warning-color);
margin-left: -7px; padding-left: 10px;
}
.info-item.alert-log .info-icon i { color: var(--warning-color); }
.info-item.alert-log .info-title { color: var(--warning-color); }
.info-item.command-log .info-icon i { color: var(--primary-color); }
/* --- 状态化样式 --- */
.panel-initiated .ai-suggestion-zone { border-left: 3px solid var(--primary-color); }
.panel-inprogress .ai-suggestion-zone { border-left: 3px solid var(--success-color); }
.panel-inprogress .recommendation { border-left-color: var(--success-color); }
.panel-alert .ai-suggestion-zone {
border-left: 3px solid var(--danger-color); background: rgba(220, 53, 69, 0.1);
}
.panel-alert .ai-suggestion-zone strong { color: var(--danger-color); }
.panel-completed .ai-suggestion-zone { border-left: 3px solid var(--muted-color); }
.panel-completed .recommendation { border-left-color: var(--muted-color); }
</style>
</head>
<body>
<!-- Panel 1: 待启动 -->
<div class="right-panel panel-initiated">
<div class="panel-card ai-suggestion-zone">
<div class="card-header"><i class="fas fa-brain"></i>AI 调度建议</div>
<div class="content">
<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>
<div class="command-panel-zone">
<div class="command-button disabled"><i class="fas fa-route"></i><span>调整路径</span></div>
<div class="command-button disabled"><i class="fas fa-traffic-light"></i><span>绿色通道</span></div>
<div class="command-button disabled"><i class="fas fa-siren-on"></i><span>启动预案</span></div>
<div class="command-button disabled"><i class="fas fa-headset"></i><span>融合通讯</span></div>
</div>
<div class="panel-card dispatch-info-zone">
<div class="card-header"><i class="fas fa-history"></i>调度信息</div>
<div class="info-stream">
<div class="info-item command-log">
<div class="info-icon"><i class="fas fa-user-plus"></i></div>
<div class="info-details">
<div class="info-header"><div class="info-title">指派协调员</div><div class="info-time">14:05:00</div></div>
<div class="info-content">指挥员 [<strong>王主任</strong>] 指派协调员 [<strong>张三</strong>]。</div>
</div>
</div>
<div class="info-item">
<div class="info-icon"></div>
<div class="info-details">
<div class="info-content" style="text-align: center; color: var(--text-secondary); padding: 20px 0;">等待任务启动...</div>
</div>
</div>
</div>
</div>
</div>
<!-- Panel 2: 进行中 - 正常 -->
<div class="right-panel panel-inprogress">
<div class="panel-card ai-suggestion-zone">
<div class="card-header" style="border-bottom-color: var(--success-color);"><i class="fas fa-shield-alt" style="color:var(--success-color)"></i>AI 质控监控</div>
<div class="content ai-text-block">
<div><i class="fas fa-check-circle" style="color:var(--success-color)"></i> <strong>设备状态:</strong> 转运箱T08参数稳定，电量充足。</div>
<div><i class="fas fa-check-circle" style="color:var(--success-color)"></i> <strong>路线状态:</strong> G42高速路况通畅，预计将提前5分钟到达。</div>
<div><i class="fas fa-check-circle" style="color:var(--success-color)"></i> <strong>时效状态:</strong> 冷缺血时间充裕，风险等级低。</div>
</div>
</div>
<div class="command-panel-zone">
<div class="command-button"><i class="fas fa-route"></i><span>调整路径</span></div>
<div class="command-button"><i class="fas fa-traffic-light"></i><span>绿色通道</span></div>
<div class="command-button disabled"><i class="fas fa-siren-on"></i><span>启动预案</span></div>
<div class="command-button"><i class="fas fa-headset"></i><span>融合通讯</span></div>
</div>
<div class="panel-card dispatch-info-zone">
<div class="card-header"><i class="fas fa-history"></i>调度信息</div>
<div class="info-stream">
<div class="info-item command-log">
<div class="info-icon"><i class="fas fa-headset"></i></div>
<div class="info-details">
<div class="info-header"><div class="info-title">发起融合通讯</div><div class="info-time">14:50:10</div></div>
<div class="info-content">与协调员 [<strong>张三</strong>] 进行视频通话，持续 <strong>02:15</strong>。</div>
</div>
</div>
<div class="info-item command-log">
<div class="info-icon"><i class="fas fa-traffic-light"></i></div>
<div class="info-details">
<div class="info-header"><div class="info-title">申请绿色通道</div><div class="info-time">14:46:20</div></div>
<div class="info-content">已向 [<strong>省交管局</strong>] 申请G42高速绿色通道。</div>
</div>
</div>
<div class="info-item command-log">
<div class="info-icon"><i class="fas fa-user-plus"></i></div>
<div class="info-details">
<div class="info-header"><div class="info-title">指派协调员</div><div class="info-time">14:05:00</div></div>
<div class="info-content">指挥员 [<strong>王主任</strong>] 指派协调员 [<strong>张三</strong>]。</div>
</div>
</div>
</div>
</div>
</div>
<!-- Panel 3: 进行中 - 异常 -->
<div class="right-panel panel-alert">
<div class="panel-card ai-suggestion-zone">
<div class="card-header" style="border-bottom-color: var(--danger-color);"><i class="fas fa-brain" style="color:var(--danger-color)"></i>AI 紧急响应</div>
<div class="content ai-text-block">
<div><strong>风险研判:</strong> <span style="color:var(--danger-color)">高风险</span>。设备故障概率75%。</div>
<div><strong>处置建议:</strong></div>
<ul style="list-style:none; padding-left:10px; font-size: 13px;">
<li>1. 立即启动《冷链异常应急预案》。</li>
<li>2. 调度最近备用转运箱T11 (距15km)。</li>
<li>3. 规划至南京鼓楼医院进行临时交接。</li>
</ul>
</div>
</div>
<div class="command-panel-zone">
<div class="command-button"><i class="fas fa-route"></i><span>调整路径</span></div>
<div class="command-button"><i class="fas fa-traffic-light"></i><span>绿色通道</span></div>
<div class="command-button danger"><i class="fas fa-siren-on"></i><span>启动预案</span></div>
<div class="command-button danger"><i class="fas fa-headset"></i><span>融合通讯</span></div>
</div>
<div class="panel-card dispatch-info-zone">
<div class="card-header"><i class="fas fa-history"></i>调度信息</div>
<div class="info-stream">
<div class="info-item command-log">
<div class="info-icon"><i class="fas fa-siren-on"></i></div>
<div class="info-details">
<div class="info-header"><div class="info-title">启动应急预案</div><div class="info-time">15:12:30</div></div>
<div class="info-content">已启动 [<strong>冷链异常应急预案</strong>]，并通知协调员 [<strong>王五</strong>] 携带备用设备T11前往鼓楼医院。</div>
</div>
</div>
<div class="info-item alert-log">
<div class="info-icon"><i class="fas fa-triangle-exclamation"></i></div>
<div class="info-details">
<div class="info-header"><div class="info-title">系统预警</div><div class="info-time">15:10:45</div></div>
<div class="info-content">转运箱T03温度超标 (<strong>8.2°C</strong>)，风险级别：<strong>高</strong>。</div>
</div>
</div>
<div class="info-item alert-log">
<div class="info-icon"><i class="fas fa-triangle-exclamation"></i></div>
<div class="info-details">
<div class="info-header"><div class="info-title">系统预警</div><div class="info-time">15:05:20</div></div>
<div class="info-content">G42高速严重拥堵，ETA预计延迟<strong>25分钟</strong>。</div>
</div>
</div>
<div class="info-item command-log">
<div class="info-icon"><i class="fas fa-user-plus"></i></div>
<div class="info-details">
<div class="info-header"><div class="info-title">指派协调员</div><div class="info-time">14:05:00</div></div>
<div class="info-content">指挥员 [<strong>王主任</strong>] 指派协调员 [<strong>李四</strong>]。</div>
</div>
</div>
</div>
</div>
</div>
<!-- Panel 4: 已结束 -->
<div class="right-panel panel-completed">
<div class="panel-card ai-suggestion-zone">
<div class="card-header" style="border-bottom-color: var(--muted-color);"><i class="fas fa-chart-pie" style="color:var(--muted-color)"></i>AI 绩效分析</div>
<div class="content ai-text-block">
<div class="recommendation">
<strong>总耗时评估:</strong> <span style="color:var(--success-color)">优秀</span><br>
<small>比同类任务平均快15分钟，运输环节效率提升20%。</small>
</div>
<div class="recommendation">
<strong>协调员绩效:</strong> <span style="color:var(--success-color)">高效</span><br>
<small>所有SOP节点均在标准时间内完成。</small>
</div>
</div>
</div>
<div class="command-panel-zone">
<div class="command-button disabled"><i class="fas fa-route"></i><span>调整路径</span></div>
<div class="command-button disabled"><i class="fas fa-traffic-light"></i><span>绿色通道</span></div>
<div class="command-button disabled"><i class="fas fa-siren-on"></i><span>启动预案</span></div>
<div class="command-button"><i class="fas fa-headset"></i><span>融合通讯</span></div>
</div>
<div class="panel-card dispatch-info-zone">
<div class="card-header"><i class="fas fa-history"></i>调度信息</div>
<div class="info-stream">
<div class="info-item command-log">
<div class="info-icon"><i class="fas fa-flag-checkered"></i></div>
<div class="info-details">
<div class="info-header"><div class="info-title">任务结束</div><div class="info-time">16:30:00</div></div>
<div class="info-content">协调员 [<strong>王五</strong>] 确认器官已交付成功。</div>
</div>
</div>
<div class="info-item command-log">
<div class="info-icon"><i class="fas fa-traffic-light"></i></div>
<div class="info-details">
<div class="info-header"><div class="info-title">申请绿色通道</div><div class="info-time">13:46:00</div></div>
<div class="info-content">已向 [<strong>省交管局</strong>] 申请G42高速绿色通道。</div>
</div>
</div>
<div class="info-item command-log">
<div class="info-icon"><i class="fas fa-user-plus"></i></div>
<div class="info-details">
<div class="info-header"><div class="info-title">指派协调员</div><div class="info-time">13:30:00</div></div>
<div class="info-content">指挥员 [<strong>王主任</strong>] 指派协调员 [<strong>王五</strong>]。</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
index.html
style.css
index.js
index.html