<!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>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
background-color: #eef2f6;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px;
gap: 60px;
}
/* iPad 边框模拟 (横屏 1024x768) */
.ipad-frame {
width: 1024px;
height: 768px;
background-color: #f8fafc;
border-radius: 24px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 12px #2d3748;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* 摄像头孔 */
.camera-dot {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background-color: #1a202c;
border-radius: 50%;
z-index: 50;
}
/* 状态栏 */
.status-bar {
height: 24px;
background-color: rgba(255,255,255,0.9);
display: flex;
justify-content: space-between;
padding: 0 20px;
align-items: center;
font-size: 12px;
font-weight: 600;
color: #1e293b;
border-bottom: 1px solid #e2e8f0;
z-index: 40;
}
/* 侧边导航栏 */
.sidebar {
width: 80px;
background-color: #1e3a8a; /* Deep Blue */
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
height: 100%;
}
.nav-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: #93c5fd;
border-radius: 12px;
margin-bottom: 16px;
cursor: pointer;
transition: all 0.2s;
font-size: 20px;
}
.nav-icon.active {
background-color: #3b82f6;
color: white;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
/* 内容区域布局 */
.main-layout {
display: flex;
flex: 1;
height: calc(100% - 24px);
overflow: hidden;
}
/* 卡片样式 */
.panel-card {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
border: 1px solid #e2e8f0;
}
/* 地图模拟点 */
.map-marker {
position: absolute;
transform: translate(-50%, -100%);
display: flex;
flex-direction: column;
align-items: center;
}
.marker-icon {
font-size: 24px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.marker-label {
background: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: bold;
margin-top: 2px;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 滚动条美化 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
/* AI 语音波形 */
.wave-bar {
width: 4px;
background: #8b5cf6;
border-radius: 2px;
animation: sound 1s infinite ease-in-out;
}
@keyframes sound {
0%, 100% { height: 10px; opacity: 0.5; }
50% { height: 24px; opacity: 1; }
}
</style>
</head>
<body>
<!-- 页面一：OPO智慧协同驾驶舱 (iPad Landscape) -->
<div class="ipad-frame">
<!-- 状态栏 -->
<div class="status-bar">
<span>iPad Pro</span>
<span>10:42 AM</span>
<div class="flex items-center gap-2">
<i class="fa-solid fa-wifi"></i>
<i class="fa-solid fa-battery-full"></i>
</div>
</div>
<div class="main-layout">
<!-- 侧边导航 -->
<div class="sidebar">
<div class="nav-icon active"><i class="fa-solid fa-border-all"></i></div> <!-- 驾驶舱 -->
<div class="nav-icon"><i class="fa-solid fa-list-check"></i></div> <!-- 任务列表 -->
<div class="nav-icon"><i class="fa-regular fa-address-book"></i></div> <!-- 通讯录 -->
<div class="nav-icon"><i class="fa-solid fa-chart-pie"></i></div> <!-- 报表 -->
<div class="mt-auto mb-6 nav-icon"><i class="fa-solid fa-gear"></i></div>
</div>
<!-- 内容区 -->
<div class="flex-1 bg-gray-50 p-5 grid grid-cols-12 gap-5">
<!-- 左侧栏：任务与提醒 (4列) -->
<div class="col-span-4 flex flex-col gap-4 h-full">
<!-- 个人状态卡 -->
<div class="panel-card p-4 flex items-center gap-4 bg-gradient-to-r from-blue-900 to-blue-800 text-white">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=John" class="w-12 h-12 rounded-full border-2 border-blue-300">
<div>
<h2 class="font-bold text-lg">张协调员</h2>
<div class="flex items-center gap-2 text-xs text-blue-200">
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span>在线 | 待命状态</span>
</div>
</div>
</div>
<!-- 智能调度建议 (AI模块) -->
<div class="panel-card p-4 border-l-4 border-purple-500">
<div class="flex justify-between items-center mb-2">
<h3 class="font-bold text-gray-800 flex items-center gap-2">
<i class="fa-solid fa-robot text-purple-600"></i> AI 调度建议
</h3>
<span class="text-xs text-gray-400">刚刚更新</span>
</div>
<p class="text-sm text-gray-600 leading-relaxed">
检测到苏北人民医院有潜在供体（评分92），建议优先指派 <strong>王医生组</strong> 前往评估。系统已自动规划最优路径，预计耗时 45分钟。
</p>
<div class="mt-3 flex gap-2">
<button class="bg-purple-50 text-purple-700 px-3 py-1.5 rounded text-xs font-bold border border-purple-200">一键派单</button>
<button class="text-gray-500 px-3 py-1.5 rounded text-xs hover:bg-gray-100">忽略</button>
</div>
</div>
<!-- 任务列表 -->
<div class="flex-1 panel-card overflow-hidden flex flex-col">
<div class="p-4 border-b border-gray-100 flex justify-between items-center">
<h3 class="font-bold text-gray-800">今日任务 (3)</h3>
<i class="fa-solid fa-filter text-gray-400"></i>
</div>
<div class="overflow-y-auto p-2 space-y-2">
<!-- 任务卡 1 -->
<div class="bg-white border border-gray-200 p-3 rounded-lg hover:shadow-md transition cursor-pointer relative">
<div class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></div>
<div class="text-xs text-gray-500 mb-1">编号: JS-202309-012</div>
<h4 class="font-bold text-gray-800 mb-1">器官获取转运 - 肝脏</h4>
<div class="flex items-center gap-2 text-xs text-gray-600 mb-2">
<i class="fa-regular fa-clock"></i> 剩余时间: 3h 20m
</div>
<div class="flex justify-between items-center">
<span class="bg-red-50 text-red-600 text-[10px] px-2 py-0.5 rounded border border-red-100">紧急</span>
<button class="text-blue-600 text-xs font-bold">查看详情 ></button>
</div>
</div>
<!-- 任务卡 2 -->
<div class="bg-gray-50 border border-gray-200 p-3 rounded-lg cursor-pointer">
<div class="text-xs text-gray-500 mb-1">编号: JS-202309-015</div>
<h4 class="font-bold text-gray-800 mb-1">潜在捐献者家属沟通</h4>
<div class="flex items-center gap-2 text-xs text-gray-600 mb-2">
<i class="fa-solid fa-location-dot"></i> 南京鼓楼医院 ICU-2
</div>
<span class="bg-blue-50 text-blue-600 text-[10px] px-2 py-0.5 rounded border border-blue-100">进行中</span>
</div>
</div>
</div>
</div>
<!-- 右侧栏：GIS地图与多媒体通讯 (8列) -->
<div class="col-span-8 flex flex-col gap-4 h-full">
<!-- 融合调度地图 -->
<div class="panel-card flex-1 relative overflow-hidden bg-blue-50">
<!-- 模拟地图背景 -->
<div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px;"></div>
<div class="absolute inset-0 flex items-center justify-center text-gray-300 font-bold text-4xl select-none">GIS Map Visualization</div>
<!-- 地图浮层控件 -->
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur rounded-lg shadow-sm p-2 flex gap-2">
<button class="px-3 py-1 bg-blue-600 text-white rounded text-xs font-bold">人员分布</button>
<button class="px-3 py-1 text-gray-600 hover:bg-gray-100 rounded text-xs">车辆轨迹</button>
<button class="px-3 py-1 text-gray-600 hover:bg-gray-100 rounded text-xs">转运箱状态</button>
</div>
<!-- 模拟标记点：自己 -->
<div class="map-marker" style="top: 50%; left: 40%;">
<i class="fa-solid fa-location-dot marker-icon text-blue-600"></i>
<div class="marker-label text-blue-800">我 (鼓楼区)</div>
</div>
<!-- 模拟标记点：同事 -->
<div class="map-marker" style="top: 30%; left: 60%;">
<i class="fa-solid fa-car-side marker-icon text-green-600"></i>
<div class="marker-label text-green-800">转运车苏A·120XX</div>
</div>
<!-- 模拟标记点：医院 -->
<div class="map-marker" style="top: 65%; left: 70%;">
<i class="fa-solid fa-hospital marker-icon text-red-500"></i>
<div class="marker-label text-red-800">第一医院</div>
</div>
</div>
<!-- 多媒体融合通讯中心 -->
<div class="panel-card h-40 p-4 grid grid-cols-3 gap-4">
<!-- 视频会议状态 -->
<div class="col-span-2 bg-gray-900 rounded-lg relative overflow-hidden flex items-center justify-center group cursor-pointer">
<img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-40 transition">
<div class="relative z-10 text-center text-white">
<div class="flex items-center justify-center gap-2 mb-1">
<div class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
<span class="font-bold text-sm">省OPO调度中心会议中...</span>
</div>
<div class="text-xs text-gray-300">参会: 5人 | 时长: 12:05</div>
</div>
<div class="absolute bottom-2 right-2 flex gap-2">
<button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white"><i class="fa-solid fa-microphone-slash"></i></button>
<button class="w-8 h-8 rounded-full bg-red-600 hover:bg-red-700 flex items-center justify-center text-white"><i class="fa-solid fa-phone-slash"></i></button>
</div>
</div>
<!-- 快捷通讯按钮 -->
<div class="grid grid-rows-2 gap-2">
<button class="bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg flex items-center justify-center gap-2 transition">
<i class="fa-solid fa-headset"></i>
<span class="text-sm font-bold">呼叫中心</span>
</button>
<button class="bg-orange-50 hover:bg-orange-100 text-orange-700 rounded-lg flex items-center justify-center gap-2 transition">
<i class="fa-solid fa-walkie-talkie"></i>
<span class="text-sm font-bold">群组对讲</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 页面二：AI深化作业与合规 (iPad Landscape) -->
<div class="ipad-frame">
<!-- 状态栏 -->
<div class="status-bar">
<span>iPad Pro</span>
<span>11:20 AM</span>
<div class="flex items-center gap-2">
<i class="fa-solid fa-wifi"></i>
<i class="fa-solid fa-battery-three-quarters"></i>
</div>
</div>
<div class="main-layout">
<!-- 侧边导航 (保持一致) -->
<div class="sidebar">
<div class="nav-icon"><i class="fa-solid fa-border-all"></i></div>
<div class="nav-icon active"><i class="fa-solid fa-list-check"></i></div>
<div class="nav-icon"><i class="fa-regular fa-address-book"></i></div>
<div class="nav-icon"><i class="fa-solid fa-chart-pie"></i></div>
<div class="mt-auto mb-6 nav-icon"><i class="fa-solid fa-gear"></i></div>
</div>
<!-- 内容区 -->
<div class="flex-1 bg-gray-50 flex">
<!-- 左侧面板：案例概览与SOP流程 (30%) -->
<div class="w-80 bg-white border-r border-gray-200 flex flex-col h-full">
<div class="p-5 border-b border-gray-100">
<div class="flex justify-between items-start mb-2">
<h2 class="text-xl font-bold text-gray-800">Case #0921</h2>
<span class="bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded font-bold">进行中</span>
</div>
<div class="text-sm text-gray-600 space-y-1">
<p><i class="fa-regular fa-hospital w-5 text-center"></i> 南京市第一医院</p>
<p><i class="fa-regular fa-calendar w-5 text-center"></i> 2023-09-21</p>
<p><i class="fa-solid fa-user-doctor w-5 text-center"></i> 主责: 李华 (ICU)</p>
</div>
</div>
<div class="flex-1 overflow-y-auto p-5">
<h3 class="text-xs font-bold text-gray-400 uppercase mb-4 tracking-wider">SOP 标准流程</h3>
<div class="relative pl-4 border-l-2 border-gray-200 space-y-8">
<!-- Step 1 -->
<div class="relative">
<div class="absolute -left-[21px] top-0 w-4 h-4 rounded-full bg-green-500 border-2 border-white"></div>
<h4 class="text-sm font-bold text-gray-800">线索接报与核实</h4>
<p class="text-xs text-gray-500 mt-1">已完成 (09:30)</p>
</div>
<!-- Step 2 (Active) -->
<div class="relative">
<div class="absolute -left-[21px] top-0 w-4 h-4 rounded-full bg-blue-600 border-2 border-white ring-4 ring-blue-100"></div>
<h4 class="text-sm font-bold text-blue-700">临床评估与维护</h4>
<p class="text-xs text-blue-500 mt-1">当前阶段</p>
<div class="mt-2 bg-blue-50 p-2 rounded text-xs text-blue-800 border border-blue-100">
<i class="fa-solid fa-circle-info mr-1"></i> 需上传脑死亡判定书
</div>
</div>
<!-- Step 3 -->
<div class="relative">
<div class="absolute -left-[21px] top-0 w-4 h-4 rounded-full bg-gray-300 border-2 border-white"></div>
<h4 class="text-sm font-bold text-gray-400">家属沟通与签字</h4>
</div>
<!-- Step 4 -->
<div class="relative">
<div class="absolute -left-[21px] top-0 w-4 h-4 rounded-full bg-gray-300 border-2 border-white"></div>
<h4 class="text-sm font-bold text-gray-400">器官获取手术</h4>
</div>
</div>
</div>
</div>
<!-- 右侧工作区：智能作业 (70%) -->
<div class="flex-1 p-6 overflow-y-auto">
<!-- 顶部：智能语音/视频采集 -->
<div class="mb-6">
<div class="flex justify-between items-center mb-3">
<h3 class="font-bold text-gray-700 text-lg">现场智能记录</h3>
<div class="flex gap-2">
<button class="bg-white border border-gray-300 px-3 py-1.5 rounded text-sm text-gray-700 hover:bg-gray-50"><i class="fa-solid fa-glasses mr-1"></i> 连接智能眼镜</button>
<button class="bg-blue-600 text-white px-3 py-1.5 rounded text-sm hover:bg-blue-700 shadow-sm"><i class="fa-solid fa-microphone mr-1"></i> 开始录音</button>
</div>
</div>
<div class="bg-white rounded-xl border border-gray-200 shadow-sm p-0 overflow-hidden">
<!-- 模拟实时转写界面 -->
<div class="h-48 bg-gray-50 p-4 overflow-y-auto space-y-3">
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-xs font-bold">我</div>
<div class="bg-white p-3 rounded-tr-xl rounded-br-xl rounded-bl-xl shadow-sm max-w-[80%] text-sm text-gray-700 border border-gray-100">
<p>目前患者的血压情况如何？是否使用了升压药？</p>
</div>
</div>
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 text-xs font-bold">医</div>
<div class="bg-white p-3 rounded-tr-xl rounded-br-xl rounded-bl-xl shadow-sm max-w-[80%] text-sm text-gray-700 border border-gray-100">
<p>血压 90/60，正在使用小剂量多巴胺维持，目前生命体征相对平稳。</p>
<!-- 关键词高亮 -->
<div class="mt-2 flex gap-2">
<span class="text-[10px] bg-yellow-50 text-yellow-700 px-1.5 py-0.5 rounded border border-yellow-200">关键体征: 90/60</span>
<span class="text-[10px] bg-yellow-50 text-yellow-700 px-1.5 py-0.5 rounded border border-yellow-200">用药: 多巴胺</span>
</div>
</div>
</div>
<!-- 正在输入动画 -->
<div class="flex gap-2 items-center ml-12 opacity-50">
<div class="wave-bar" style="animation-delay: 0s"></div>
<div class="wave-bar" style="animation-delay: 0.2s"></div>
<div class="wave-bar" style="animation-delay: 0.4s"></div>
<span class="text-xs text-gray-500 ml-2">正在转写...</span>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-6">
<!-- AI OCR 材料识别 -->
<div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
<h3 class="font-bold text-gray-700 mb-3 flex justify-between items-center">
关键材料 (AI-OCR)
<i class="fa-solid fa-camera-retro text-gray-400"></i>
</h3>
<div class="flex gap-4 mb-4">
<div class="w-24 h-32 bg-gray-100 rounded-lg border border-gray-300 flex items-center justify-center overflow-hidden relative group cursor-pointer">
<div class="text-4xl text-gray-300"><i class="fa-regular fa-file-image"></i></div>
<div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-[10px] text-center py-1">检验单.jpg</div>
<div class="absolute top-1 right-1 bg-green-500 w-2 h-2 rounded-full"></div>
</div>
<div class="flex-1">
<div class="text-xs text-gray-400 mb-1">自动提取数据:</div>
<div class="space-y-1.5">
<div class="flex justify-between text-xs border-b border-dashed border-gray-200 pb-1">
<span class="text-gray-600">白蛋白 (ALB)</span>
<span class="font-bold text-gray-800">35 g/L</span>
</div>
<div class="flex justify-between text-xs border-b border-dashed border-gray-200 pb-1">
<span class="text-gray-600">总胆红素 (TBIL)</span>
<span class="font-bold text-red-500">28 μmol/L ↑</span>
</div>
<button class="w-full mt-2 text-blue-600 text-xs border border-blue-200 rounded py-1 hover:bg-blue-50">校对并保存</button>
</div>
</div>
</div>
</div>
<!-- AI 合规预警中心 -->
<div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
<h3 class="font-bold text-gray-700 mb-3 flex justify-between items-center">
合规性校验
<span class="bg-orange-100 text-orange-600 text-[10px] px-2 py-0.5 rounded-full">2项风险</span>
</h3>
<div class="space-y-3">
<!-- 警告 1 -->
<div class="flex gap-3 items-start p-2 bg-red-50 rounded-lg border border-red-100">
<i class="fa-solid fa-triangle-exclamation text-red-500 mt-0.5"></i>
<div>
<h4 class="text-xs font-bold text-red-700">材料缺失</h4>
<p class="text-[10px] text-red-600 mt-0.5">SOP阶段2要求必须上传《脑死亡判定书》（一判）。</p>
</div>
<button class="ml-auto text-[10px] bg-white text-red-600 border border-red-200 px-2 py-1 rounded hover:bg-red-50">去补全</button>
</div>
<!-- 警告 2 -->
<div class="flex gap-3 items-start p-2 bg-yellow-50 rounded-lg border border-yellow-100">
<i class="fa-solid fa-stopwatch text-yellow-600 mt-0.5"></i>
<div>
<h4 class="text-xs font-bold text-yellow-700">时效预警</h4>
<p class="text-[10px] text-yellow-700 mt-0.5">距离上一次生命体征记录已超过 4 小时，请及时更新。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
index.html
style.css
index.js
index.html