<!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.com" 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); /* 减去header高度 */
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. 下部：记录区 --- */
.logs-zone {
flex-grow: 1; /* 占据剩余空间 */
display: flex;
flex-direction: column;
gap: 20px;
}
.log-card {
flex: 1;
display: flex;
flex-direction: column;
}
.log-list {
flex-grow: 1;
overflow-y: auto;
padding-right: 5px; /* for scrollbar */
}
.log-list::-webkit-scrollbar { width: 4px; }
.log-list::-webkit-scrollbar-track { background: transparent; }
.log-list::-webkit-scrollbar-thumb { background: rgba(0, 175, 255, 0.3); border-radius: 2px; }
.log-item {
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 13px;
display: flex;
justify-content: space-between;
}
.log-item .content {
display: flex;
align-items: center;
gap: 8px;
}
.log-item .time { color: var(--text-secondary); font-size: 12px; }
.log-item.alert-log .content i { color: var(--warning-color); }
.log-item.alert-log .content { color: var(--warning-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="logs-zone">
<div class="panel-card log-card">
<div class="card-header"><i class="fas fa-clipboard-list"></i>调度记录</div>
<div class="log-list">
<div class="log-item">
<div class="content"><i class="fas fa-flag"></i>任务创建</div>
<div class="time">13:50:15</div>
</div>
<div class="log-item">
<div class="content"><i class="fas fa-file-signature"></i>文书确认完成</div>
<div class="time">13:48:30</div>
</div>
</div>
</div>
<div class="panel-card log-card">
<div class="card-header"><i class="fas fa-triangle-exclamation"></i>预警记录</div>
<div class="log-list">
<div class="log-item">
<div class="content" style="color:var(--text-secondary);"><i class="fas fa-check-circle"></i>暂无预警记录</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="logs-zone">
<div class="panel-card log-card">
<div class="card-header"><i class="fas fa-clipboard-list"></i>调度记录</div>
<div class="log-list">
<div class="log-item">
<div class="content"><i class="fas fa-route"></i>开始运输，路径已规划</div>
<div class="time">14:45:00</div>
</div>
<div class="log-item">
<div class="content"><i class="fas fa-box-open"></i>器官获取完成</div>
<div class="time">14:30:10</div>
</div>
<div class="log-item">
<div class="content"><i class="fas fa-hospital"></i>协调员到达获取点</div>
<div class="time">14:15:25</div>
</div>
<div class="log-item">
<div class="content"><i class="fas fa-user-plus"></i>指派协调员: 张三</div>
<div class="time">14:05:00</div>
</div>
</div>
</div>
<div class="panel-card log-card">
<div class="card-header"><i class="fas fa-triangle-exclamation"></i>预警记录</div>
<div class="log-list">
<div class="log-item">
<div class="content" style="color:var(--text-secondary);"><i class="fas fa-check-circle"></i>暂无预警记录</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="logs-zone">
<div class="panel-card log-card">
<div class="card-header"><i class="fas fa-clipboard-list"></i>调度记录</div>
<div class="log-list">
<div class="log-item">
<div class="content"><i class="fas fa-route"></i>开始运输</div>
<div class="time">14:45:00</div>
</div>
<div class="log-item">
<div class="content"><i class="fas fa-user-plus"></i>指派协调员: 李四</div>
<div class="time">14:05:00</div>
</div>
</div>
</div>
<div class="panel-card log-card">
<div class="card-header"><i class="fas fa-triangle-exclamation"></i>预警记录</div>
<div class="log-list">
<div class="log-item alert-log">
<div class="content"><i class="fas fa-temperature-high"></i>温度超标 (8.2°C)</div>
<div class="time">15:10:45</div>
</div>
<div class="log-item alert-log">
<div class="content"><i class="fas fa-car-burst"></i>G42高速严重拥堵</div>
<div class="time">15:05:20</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="logs-zone">
<div class="panel-card log-card">
<div class="card-header"><i class="fas fa-clipboard-list"></i>调度记录</div>
<div class="log-list">
<div class="log-item">
<div class="content"><i class="fas fa-flag-checkered"></i>交付成功</div>
<div class="time">16:30:00</div>
</div>
<div class="log-item">
<div class="content"><i class="fas fa-route"></i>开始运输</div>
<div class="time">13:45:00</div>
</div>
<div class="log-item">
<div class="content"><i class="fas fa-user-plus"></i>指派协调员: 王五</div>
<div class="time">13:30:00</div>
</div>
</div>
</div>
<div class="panel-card log-card">
<div class="card-header"><i class="fas fa-triangle-exclamation"></i>预警记录</div>
<div class="log-list">
<div class="log-item">
<div class="content" style="color:var(--text-secondary);"><i class="fas fa-check-circle"></i>任务期间无预警</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
index.html
style.css
index.js
index.html