<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>江苏省OPO移动端</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1E40AF', // 稳重的医疗蓝 blue-800
primaryLight: '#EFF6FF', // blue-50
danger: '#EF4444', // 抢眼的红色 red-500
dangerLight: '#FEF2F2', // red-50
status: {
pending: '#F97316', // orange-500 (待审核/待调度)
pendingBg: '#FFEDD5', // orange-100
active: '#10B981', // emerald-500 (进行中)
activeBg: '#D1FAE5', // emerald-100
done: '#6B7280', // gray-500 (已完成)
doneBg: '#F3F4F6' // gray-100
}
},
animation: {
'marquee-y': 'marquee-y 8s infinite cubic-bezier(0.4, 0, 0.2, 1)',
},
keyframes: {
'marquee-y': {
'0%, 25%': { transform: 'translateY(0)' },
'33%, 58%': { transform: 'translateY(-20px)' },
'66%, 91%': { transform: 'translateY(-40px)' },
'100%': { transform: 'translateY(-60px)' },
}
}
}
}
}
</script>
<style>
/* 隐藏滚动条但保留滚动功能 */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-gray-200 flex items-center justify-center min-h-screen font-sans">
<!-- 手机设备模拟容器 -->
<div class="w-full max-w-[400px] h-[800px] bg-gray-50 rounded-[2.5rem] shadow-2xl relative overflow-hidden border-[8px] border-gray-800 flex flex-col">
<!-- 顶部状态栏模拟 (仅作视觉修饰) -->
<div class="h-6 w-full bg-primary flex justify-between items-center px-4 text-white text-[10px] z-50 absolute top-0 left-0 right-0">
<span>15:38</span>
<div class="w-32 h-4 bg-black absolute left-1/2 -translate-x-1/2 rounded-b-xl top-0"></div> <!-- 刘海屏模拟 -->
<div class="flex gap-1">
<i class="fa-solid fa-signal"></i>
<i class="fa-solid fa-wifi"></i>
<i class="fa-solid fa-battery-three-quarters"></i>
</div>
</div>
<!-- 主要内容区域 -->
<div id="main-content" class="flex-1 mt-6 mb-16 overflow-y-auto hide-scrollbar relative">
<!-- ====== 视图 1：首页 (工作台) ====== -->
<div id="view-home" class="view-panel block min-h-full">
<!-- 顶部综合功能区 (Logo与快捷操作融合) -->
<div class="bg-gradient-to-b from-primary to-blue-700 pt-6 pb-8 px-4 rounded-b-3xl shadow-md relative z-10">
<!-- 融入式 Logo -->
<div class="flex justify-center items-center gap-2 text-white mb-6">
<i class="fa-solid fa-heart-pulse text-2xl"></i>
<span class="text-xl font-bold tracking-widest">江苏省OPO</span>
</div>
<!-- 快捷操作区 -->
<div class="flex justify-between items-center px-2">
<div class="flex flex-col items-center gap-2 cursor-pointer active:scale-95 transition-transform">
<div class="w-12 h-12 bg-white/20 text-white rounded-full flex items-center justify-center text-xl backdrop-blur-sm shadow-inner border border-white/30">
<i class="fa-solid fa-file-medical"></i>
</div>
<span class="text-[11px] text-blue-50 font-medium">案例管理</span>
</div>
<div class="flex flex-col items-center gap-2 cursor-pointer active:scale-95 transition-transform">
<div class="w-12 h-12 bg-white/20 text-white rounded-full flex items-center justify-center text-xl backdrop-blur-sm shadow-inner border border-white/30">
<i class="fa-solid fa-clipboard-check"></i>
</div>
<span class="text-[11px] text-blue-50 font-medium">任务申请</span>
</div>
<div class="flex flex-col items-center gap-2 cursor-pointer active:scale-95 transition-transform">
<div class="w-12 h-12 bg-white/20 text-white rounded-full flex items-center justify-center text-xl backdrop-blur-sm shadow-inner border border-white/30">
<i class="fa-solid fa-phone-volume"></i>
</div>
<span class="text-[11px] text-blue-50 font-medium">融合通讯</span>
</div>
<div class="flex flex-col items-center gap-2 cursor-pointer active:scale-95 transition-transform">
<div class="w-12 h-12 bg-white/20 text-white rounded-full flex items-center justify-center text-xl backdrop-blur-sm shadow-inner border border-white/30">
<i class="fa-solid fa-robot"></i>
</div>
<span class="text-[11px] text-blue-50 font-medium">智能问询</span>
</div>
</div>
</div>
<!-- 核心功能区 (移除负边距，因为背景已融合) -->
<div class="px-4 mt-5 relative z-10">
<!-- 预警播报区 -->
<div class="bg-dangerLight border border-red-100 rounded-lg py-2.5 px-3 flex items-center justify-between mb-5 shadow-sm overflow-hidden">
<div class="flex-1 overflow-hidden relative h-[20px]">
<div class="text-sm absolute w-full animate-marquee-y flex flex-col">
<!-- L1 致命 (红色) -->
<div class="h-[20px] flex items-center text-red-600">
<div class="flex items-center gap-1.5 font-bold">
<i class="fa-solid fa-circle-exclamation animate-pulse"></i>
<span>温度异常</span>
</div>
<span class="ml-2.5 font-normal opacity-90 truncate">T04-JSSQ00032-05</span>
</div>
<!-- L2 严重 (橙色) -->
<div class="h-[20px] flex items-center text-orange-500">
<div class="flex items-center gap-1.5 font-bold">
<i class="fa-solid fa-triangle-exclamation animate-pulse"></i>
<span>冷缺血超时风险</span>
</div>
<span class="ml-2.5 font-normal opacity-90 truncate">T03-JSSQ00041-02</span>
</div>
<!-- L3 提示 (黄色) -->
<div class="h-[20px] flex items-center text-yellow-600">
<div class="flex items-center gap-1.5 font-bold">
<i class="fa-solid fa-circle-info animate-pulse"></i>
<span>到达偏离</span>
</div>
<span class="ml-2.5 font-normal opacity-90 truncate">T04-JSSQ00015-01</span>
</div>
<!-- 复制第一条以实现无缝循环过渡 -->
<div class="h-[20px] flex items-center text-red-600">
<div class="flex items-center gap-1.5 font-bold">
<i class="fa-solid fa-circle-exclamation animate-pulse"></i>
<span>温度异常</span>
</div>
<span class="ml-2.5 font-normal opacity-90 truncate">T04-JSSQ00032-05</span>
</div>
</div>
</div>
<div class="text-gray-400 text-xs flex-shrink-0 cursor-pointer hover:text-gray-600 pl-2 border-l border-red-100 ml-1">详情 <i class="fa-solid fa-chevron-right text-[10px]"></i></div>
</div>
<!-- 我的待办 -->
<div class="mb-6">
<h2 class="text-base font-bold text-gray-800 mb-3 flex justify-between items-end">
<span>我的待办</span>
<span class="text-xs text-primary font-normal">全部 12 <i class="fa-solid fa-angle-right"></i></span>
</h2>
<!-- 待办列表容器 -->
<div class="flex flex-col gap-3">
<!-- 卡片1：资源调拨 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 active:bg-gray-50 transition-colors">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">【资源调拨】<span class="text-gray-500 font-normal">T05-JSSQ00050-01</span></div>
<span class="bg-status-pendingBg text-status-pending text-xs px-1.5 py-0.5 rounded font-medium">待调度</span>
</div>
<div class="text-gray-600 text-xs mb-2">
<i class="fa-regular fa-user mr-1 text-gray-400"></i>申请来源：李医生 (江苏省OPO-南京区)
</div>
<div class="border-t border-gray-100 pt-2 mt-1 flex justify-between items-center">
<div class="text-gray-700 text-xs truncate flex-1">
<span class="font-medium text-gray-900">李医生</span> 提交了资源调拨申请
</div>
<div class="flex gap-1.5 flex-shrink-0 ml-2">
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-user-doctor"></i></span>
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-ambulance"></i></span>
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-box"></i></span>
</div>
</div>
</div>
<!-- 卡片2：器官转运 (带有预警标识的特殊卡片) -->
<div class="bg-red-50 rounded-lg shadow-sm border border-red-200 p-4 active:bg-red-100 transition-colors relative">
<!-- 卡片右上角预警光环 -->
<div class="absolute -top-1 -right-1 w-3 h-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500 border-2 border-white"></span>
</div>
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">【器官转运】<span class="text-gray-500 font-normal">T04-JSSQ00032-05</span></div>
<div class="flex gap-1.5">
<span class="bg-status-pendingBg text-status-pending text-xs px-1.5 py-0.5 rounded font-medium">待执行</span>
</div>
</div>
<div class="text-gray-600 text-xs mb-2 flex items-center">
<i class="fa-solid fa-route mr-1 text-gray-400"></i>转运路线：南京鼓楼医院 <i class="fa-solid fa-arrow-right mx-1 text-gray-400 text-[10px]"></i> 苏州人民医院
</div>
<div class="border-t border-red-100 pt-2 mt-1 flex justify-between items-center">
<div class="text-gray-700 text-xs truncate flex-1">
<span class="font-medium text-gray-900">指挥中心：</span>下发了器官转运任务
</div>
<div class="flex gap-1.5 flex-shrink-0 ml-2">
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-ambulance"></i></span>
</div>
</div>
</div>
<!-- 卡片3：案例维护 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 active:bg-gray-50 transition-colors">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">【案例维护】<span class="text-gray-500 font-normal">CA-JSSQ00036</span></div>
<span class="bg-status-activeBg text-status-active text-xs px-1.5 py-0.5 rounded font-medium">进行中</span>
</div>
<div class="text-gray-600 text-xs mb-2">
<i class="fa-solid fa-bed-pulse mr-1 text-gray-400"></i>王*明 <span class="mx-1 text-gray-300">|</span> 男 <span class="mx-1 text-gray-300">|</span> 45岁 <span class="mx-1 text-gray-300">|</span> 江苏省人民医院ICU
</div>
<div class="border-t border-gray-100 pt-2 mt-1 flex justify-between items-center">
<div class="text-gray-700 text-xs truncate flex-1">
当前阶段：<span class="font-medium text-gray-900">捐献确认</span> <span class="text-status-pending ml-1">[待维护]</span>
</div>
</div>
</div>
<!-- 卡片4：线索审核 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 active:bg-gray-50 transition-colors">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">【线索审核】<span class="text-gray-500 font-normal">JSSQ00036</span></div>
<span class="bg-status-pendingBg text-status-pending text-xs px-1.5 py-0.5 rounded font-medium">待审核</span>
</div>
<div class="text-gray-600 text-xs mb-1">
<i class="fa-regular fa-hospital mr-1 text-gray-400"></i>徐州医科大学附属医院
</div>
<div class="border-t border-gray-100 pt-2 mt-2 flex justify-between items-center">
<div class="text-gray-500 text-[11px] truncate flex-1">
登记人：<span class="text-gray-800 mr-2">殷镭</span> 登记时间：2026-03-11 08:39
</div>
</div>
</div>
</div>
</div>
<div class="text-center text-gray-400 text-xs pb-6">—— 到底了 ——</div>
</div>
</div>
<!-- ====== 视图 2：案例 ====== -->
<div id="view-case" class="view-panel hidden min-h-full bg-gray-50 flex-col relative pb-6">
<!-- 顶部 Tab 切换区 -->
<div class="bg-white border-b border-gray-200 sticky top-0 z-20">
<div class="flex px-4 pt-2">
<div class="flex-1 text-center py-3 text-primary font-bold border-b-2 border-primary cursor-pointer top-tab-btn transition-colors" data-target="list-clue">线索 (3)</div>
<div class="flex-1 text-center py-3 text-gray-400 font-medium border-b-2 border-transparent cursor-pointer top-tab-btn transition-colors" data-target="list-case">案例 (12)</div>
</div>
</div>
<!-- 搜索与筛选区 -->
<div class="bg-white px-4 py-2 flex items-center gap-3 shadow-sm sticky top-[46px] z-10">
<div class="flex-1 bg-gray-100 rounded-full flex items-center px-3 py-1.5 text-sm">
<i class="fa-solid fa-magnifying-glass text-gray-400 mr-2"></i>
<input type="text" placeholder="搜索编号/医院等" class="bg-transparent outline-none w-full text-gray-700 placeholder-gray-400">
</div>
<div id="filter-btn-case" class="flex items-center text-sm text-gray-600 font-medium cursor-pointer">
<span class="filter-text">全部</span> <i class="fa-solid fa-caret-down ml-1 text-gray-400"></i>
</div>
</div>
<!-- 列表容器 -->
<div class="p-4 flex-1">
<!-- ====== 线索列表 ====== -->
<div id="list-clue" class="flex flex-col gap-3">
<!-- 线索卡片 1：待审核 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">潜在登记编号：<span class="text-gray-600 font-normal">JSSQ00036</span></div>
<span class="bg-status-pendingBg text-status-pending text-xs px-1.5 py-0.5 rounded font-medium">待审核</span>
</div>
<div class="text-gray-600 text-xs mb-1">
<i class="fa-regular fa-hospital mr-1.5 text-gray-400"></i>徐州医科大学附属医院
</div>
<div class="text-gray-500 text-[11px] mb-3">
登记人：殷镭<span class="mx-2 text-gray-200">|</span>2026-03-11 08:39
</div>
<div class="border-t border-gray-100 pt-3 flex justify-end gap-2">
<button class="px-3 py-1 text-xs border border-gray-300 text-gray-600 rounded-full hover:bg-gray-50 active:bg-gray-100">录入进展</button>
<button class="px-3 py-1 text-xs border border-primary text-primary rounded-full hover:bg-blue-50 active:bg-blue-100">线索审核</button>
</div>
</div>
<!-- 线索卡片 2：已通过 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 opacity-80">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">潜在登记编号：<span class="text-gray-600 font-normal">JSSQ00032</span></div>
<span class="bg-status-activeBg text-status-active text-xs px-1.5 py-0.5 rounded font-medium">已通过</span>
</div>
<div class="text-gray-600 text-xs mb-1">
<i class="fa-regular fa-hospital mr-1.5 text-gray-400"></i>江苏省人民医院
</div>
<div class="text-gray-500 text-[11px] mb-3">
登记人：张伟<span class="mx-2 text-gray-200">|</span>2026-03-10 14:20
</div>
<div class="border-t border-gray-100 pt-3 flex justify-between items-center">
<div class="text-[11px] text-gray-500">审核结果：<span class="text-status-active">符合案例转换标准</span></div>
<button class="px-3 py-1 text-xs border border-gray-300 text-gray-600 rounded-full hover:bg-gray-50 active:bg-gray-100">查看详情</button>
</div>
</div>
<!-- 线索卡片 3：未通过 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 opacity-80">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">潜在登记编号：<span class="text-gray-600 font-normal">JSSQ00037</span></div>
<span class="bg-gray-100 text-gray-500 text-xs px-1.5 py-0.5 rounded font-medium">未通过</span>
</div>
<div class="text-gray-600 text-xs mb-1">
<i class="fa-regular fa-hospital mr-1.5 text-gray-400"></i>南京鼓楼医院
</div>
<div class="text-gray-500 text-[11px] mb-3">
登记人：刘悦<span class="mx-2 text-gray-200">|</span>2026-03-09 17:27
</div>
<div class="border-t border-gray-100 pt-3 flex justify-between items-center">
<div class="text-[11px] text-gray-500">终止原因：家属明确拒绝捐献</div>
<button class="px-3 py-1 text-xs border border-gray-300 text-gray-600 rounded-full hover:bg-gray-50 active:bg-gray-100">查看详情</button>
</div>
</div>
<div class="text-center text-gray-400 text-xs mt-2">—— 到底了 ——</div>
</div>
<!-- ====== 案例列表 ====== -->
<div id="list-case" class="hidden flex-col gap-3">
<!-- 案例卡片 1：进行中 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">案例编号：<span class="text-gray-600 font-normal">JSSQ00036</span></div>
<span class="bg-status-activeBg text-status-active text-xs px-1.5 py-0.5 rounded font-medium">进行中</span>
</div>
<div class="text-gray-600 text-xs mb-1">
潜在捐献者：<span class="font-bold text-gray-800">王*明</span><span class="mx-2 text-gray-200">|</span>男<span class="mx-2 text-gray-200">|</span>45岁
</div>
<div class="text-gray-500 text-xs mb-3">
<i class="fa-regular fa-hospital mr-1.5 text-gray-400"></i>江苏省人民医院ICU
</div>
<div class="border-t border-gray-100 pt-3">
<div class="text-[11px] text-gray-500 mb-1.5 flex justify-between">
<span>资料进度 (3/8)</span>
<span class="text-primary font-medium">捐献确认 [待维护]</span>
</div>
<div class="flex gap-1 h-1.5">
<div class="flex-1 bg-primary rounded-full"></div>
<div class="flex-1 bg-primary rounded-full"></div>
<div class="flex-1 bg-primary rounded-full"></div>
<div class="flex-1 bg-gray-200 rounded-full"></div>
<div class="flex-1 bg-gray-200 rounded-full"></div>
<div class="flex-1 bg-gray-200 rounded-full"></div>
<div class="flex-1 bg-gray-200 rounded-full"></div>
<div class="flex-1 bg-gray-200 rounded-full"></div>
</div>
</div>
</div>
<!-- 案例卡片 2：进行中 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">案例编号：<span class="text-gray-600 font-normal">JSSQ00032</span></div>
<span class="bg-status-activeBg text-status-active text-xs px-1.5 py-0.5 rounded font-medium">进行中</span>
</div>
<div class="text-gray-600 text-xs mb-1">
潜在捐献者：<span class="font-bold text-gray-800">张*伟</span><span class="mx-2 text-gray-200">|</span>男<span class="mx-2 text-gray-200">|</span>38岁
</div>
<div class="text-gray-500 text-xs mb-3">
<i class="fa-regular fa-hospital mr-1.5 text-gray-400"></i>南京鼓楼医院急诊科
</div>
<div class="border-t border-gray-100 pt-3">
<div class="text-[11px] text-gray-500 mb-1.5 flex justify-between">
<span>资料进度 (6/8)</span>
<span class="text-primary font-medium">捐献见证 [待维护]</span>
</div>
<div class="flex gap-1 h-1.5">
<div class="flex-1 bg-primary rounded-full"></div>
<div class="flex-1 bg-primary rounded-full"></div>
<div class="flex-1 bg-primary rounded-full"></div>
<div class="flex-1 bg-primary rounded-full"></div>
<div class="flex-1 bg-primary rounded-full"></div>
<div class="flex-1 bg-primary rounded-full"></div>
<div class="flex-1 bg-gray-200 rounded-full"></div>
<div class="flex-1 bg-gray-200 rounded-full"></div>
</div>
</div>
</div>
<!-- 案例卡片 3：已完成 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 opacity-80">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">案例编号：<span class="text-gray-600 font-normal">JSSQ00018</span></div>
<span class="bg-gray-100 text-gray-500 text-xs px-1.5 py-0.5 rounded font-medium">已完成</span>
</div>
<div class="text-gray-600 text-xs mb-1">
潜在捐献者：<span class="font-bold text-gray-800">李*华</span><span class="mx-2 text-gray-200">|</span>女<span class="mx-2 text-gray-200">|</span>52岁
</div>
<div class="text-gray-500 text-xs mb-3">
<i class="fa-regular fa-hospital mr-1.5 text-gray-400"></i>徐州医科大学附属医院
</div>
<div class="border-t border-gray-100 pt-3">
<div class="text-[11px] text-gray-500 mb-1.5 flex justify-between">
<span>资料进度 (8/8)</span>
<span class="text-gray-500">已归档</span>
</div>
<div class="flex gap-1 h-1.5">
<div class="flex-1 bg-gray-300 rounded-full"></div>
<div class="flex-1 bg-gray-300 rounded-full"></div>
<div class="flex-1 bg-gray-300 rounded-full"></div>
<div class="flex-1 bg-gray-300 rounded-full"></div>
<div class="flex-1 bg-gray-300 rounded-full"></div>
<div class="flex-1 bg-gray-300 rounded-full"></div>
<div class="flex-1 bg-gray-300 rounded-full"></div>
<div class="flex-1 bg-gray-300 rounded-full"></div>
</div>
</div>
</div>
<div class="text-center text-gray-400 text-xs mt-2">—— 到底了 ——</div>
</div>
</div>
<!-- 悬浮新建按钮 (+)，仅在“线索”Tab下显示 -->
<div id="fab-new-clue" class="absolute bottom-6 right-4 w-12 h-12 bg-primary text-white rounded-full shadow-lg flex items-center justify-center text-xl cursor-pointer active:scale-95 transition-transform z-30">
<i class="fa-solid fa-plus"></i>
</div>
</div>
<!-- ====== 视图 3：任务 ====== -->
<div id="view-task" class="view-panel hidden min-h-full bg-gray-50 flex-col relative pb-6">
<div class="bg-white h-12 flex justify-center items-center font-bold text-lg border-b sticky top-0 z-20">任务列表</div>
<!-- 搜索与筛选区 -->
<div class="bg-white px-4 py-2 flex items-center gap-3 shadow-sm sticky top-[48px] z-10">
<div class="flex-1 bg-gray-100 rounded-full flex items-center px-3 py-1.5 text-sm">
<i class="fa-solid fa-magnifying-glass text-gray-400 mr-2"></i>
<input type="text" placeholder="搜索任务编号/关联案例" class="bg-transparent outline-none w-full text-gray-700 placeholder-gray-400">
</div>
<div id="filter-btn-task" class="flex items-center text-sm text-gray-600 font-medium cursor-pointer">
<span class="filter-text">全部</span> <i class="fa-solid fa-caret-down ml-1 text-gray-400"></i>
</div>
</div>
<!-- 任务列表容器 -->
<div class="p-4 flex flex-col gap-3">
<!-- 卡片1：待执行 (供体评估 T01) -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 active:bg-gray-50 transition-colors cursor-pointer" onclick="document.getElementById('detail-t01').classList.remove('hidden'); document.getElementById('detail-t01').classList.add('flex');">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">【供体评估】<span class="text-gray-500 font-normal">T01-JSSQ00041-01</span></div>
<span class="bg-status-pendingBg text-status-pending text-xs px-1.5 py-0.5 rounded font-medium">待执行</span>
</div>
<div class="text-gray-600 text-xs mb-2">
<i class="fa-solid fa-location-dot mr-1 text-gray-400"></i>任务地点：南京鼓楼医院
</div>
<div class="border-t border-gray-100 pt-2 mt-1 flex justify-between items-center">
<div class="text-gray-700 text-xs truncate flex-1">
<span class="font-medium text-gray-900">指挥中心</span> 已派发任务指令，等待接收
</div>
<div class="flex gap-1.5 flex-shrink-0 ml-2">
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-user-doctor"></i></span>
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-ambulance"></i></span>
</div>
</div>
</div>
<!-- 卡片2：待作业 (器官获取 T03) -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 active:bg-gray-50 transition-colors cursor-pointer" onclick="document.getElementById('detail-t03').classList.remove('hidden'); document.getElementById('detail-t03').classList.add('flex');">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">【器官获取】<span class="text-gray-500 font-normal">T03-JSSQ00036-02</span></div>
<span class="bg-yellow-100 text-yellow-600 text-xs px-1.5 py-0.5 rounded font-medium">待作业</span>
</div>
<div class="text-gray-600 text-xs mb-2">
<i class="fa-solid fa-location-dot mr-1 text-gray-400"></i>任务地点：徐州医科大学附属医院
</div>
<div class="border-t border-gray-100 pt-2 mt-1 flex justify-between items-center">
<div class="text-gray-700 text-xs truncate flex-1">
<span class="font-medium text-gray-900">肝脏组</span> 已确认到达，准备手术
</div>
<div class="flex gap-1.5 flex-shrink-0 ml-2">
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-user-doctor"></i></span>
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-box"></i></span>
</div>
</div>
</div>
<!-- 卡片3：器官转运 (带有预警标识的特殊卡片 T04) -->
<div class="bg-red-50 rounded-lg shadow-sm border border-red-200 p-4 active:bg-red-100 transition-colors relative cursor-pointer" onclick="document.getElementById('detail-t04').classList.remove('hidden'); document.getElementById('detail-t04').classList.add('flex');">
<!-- 卡片右上角预警光环 -->
<div class="absolute -top-1 -right-1 w-3 h-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500 border-2 border-white"></span>
</div>
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">【器官转运】<span class="text-gray-500 font-normal">T04-JSSQ00032-05</span></div>
<div class="flex gap-1.5">
<span class="bg-status-activeBg text-status-active text-xs px-1.5 py-0.5 rounded font-medium">执行中</span>
</div>
</div>
<div class="text-gray-600 text-xs mb-2 flex items-center">
<i class="fa-solid fa-route mr-1 text-gray-400"></i>转运路线：南京鼓楼医院 <i class="fa-solid fa-arrow-right mx-1 text-gray-400 text-[10px]"></i> 苏州人民医院
</div>
<div class="border-t border-red-100 pt-2 mt-1 flex justify-between items-center">
<div class="text-gray-700 text-xs truncate flex-1 text-red-600 font-medium">
<i class="fa-solid fa-circle-exclamation mr-1"></i> 设备温度异常，请处理
</div>
<div class="flex gap-1.5 flex-shrink-0 ml-2">
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-ambulance"></i></span>
</div>
</div>
</div>
<!-- 卡片4：待调度 (资源调拨 T05) -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 active:bg-gray-50 transition-colors">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">【资源调拨】<span class="text-gray-500 font-normal">T05-JSSQ00050-01</span></div>
<span class="bg-status-pendingBg text-status-pending text-xs px-1.5 py-0.5 rounded font-medium">待调度</span>
</div>
<div class="text-gray-600 text-xs mb-2">
<i class="fa-regular fa-user mr-1 text-gray-400"></i>申请来源：李医生 (江苏省OPO-南京区)
</div>
<div class="border-t border-gray-100 pt-2 mt-1 flex justify-between items-center">
<div class="text-gray-700 text-xs truncate flex-1">
<span class="font-medium text-gray-900">李医生</span> 提交了资源调拨申请
</div>
<div class="flex gap-1.5 flex-shrink-0 ml-2">
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-user-doctor"></i></span>
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-ambulance"></i></span>
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-box"></i></span>
</div>
</div>
</div>
<!-- 卡片5：执行中 (穿刺活检 T02) -->
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 active:bg-gray-50 transition-colors">
<div class="flex justify-between items-start mb-2">
<div class="font-bold text-gray-800 text-sm">【穿刺活检】<span class="text-gray-500 font-normal">T02-JSSQ00045-01</span></div>
<span class="bg-status-activeBg text-status-active text-xs px-1.5 py-0.5 rounded font-medium">执行中</span>
</div>
<div class="text-gray-600 text-xs mb-2">
<i class="fa-solid fa-location-dot mr-1 text-gray-400"></i>任务地点：连云港市第一人民医院
</div>
<div class="border-t border-gray-100 pt-2 mt-1 flex justify-between items-center">
<div class="text-gray-700 text-xs truncate flex-1">
<span class="font-medium text-gray-900">活检二组</span> 已确认出发前往目标医院
</div>
<div class="flex gap-1.5 flex-shrink-0 ml-2">
<span class="bg-blue-50 text-primary border border-blue-100 w-5 h-5 flex items-center justify-center rounded text-[10px] shadow-sm"><i class="fa-solid fa-user-doctor"></i></span>
</div>
</div>
</div>
<div class="text-center text-gray-400 text-xs mt-2">—— 到底了 ——</div>
</div>
</div>
<!-- ====== 视图 4：我的 ====== -->
<div id="view-my" class="view-panel hidden min-h-full bg-gray-50 flex-col relative pb-6">
<div class="bg-white h-12 flex justify-center items-center font-bold text-lg border-b sticky top-0 z-20">个人中心</div>
<div class="p-4 flex flex-col gap-4">
<!-- 个人信息卡片 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5 flex items-center gap-4">
<div class="w-16 h-16 bg-blue-50 text-primary rounded-full flex items-center justify-center text-3xl flex-shrink-0 border-2 border-white shadow-sm">
<i class="fa-solid fa-user-doctor"></i>
</div>
<div class="flex flex-col gap-1.5 flex-1">
<div class="text-lg font-bold text-gray-800">张医生</div>
<div class="flex items-center gap-2">
<span class="bg-blue-50 text-primary text-[10px] px-2 py-0.5 rounded border border-blue-100 font-medium">医疗专家（获取、转运）</span>
</div>
<div class="text-xs text-gray-500 mt-0.5">
<i class="fa-regular fa-building mr-1"></i>江苏省人民医院OPO
</div>
</div>
</div>
<!-- 设置列表 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mt-2">
<div class="flex justify-between items-center p-4 border-b border-gray-50 active:bg-gray-50 cursor-pointer transition-colors">
<span class="text-gray-800 text-sm font-medium"><i class="fa-solid fa-lock text-gray-400 mr-2 w-4 text-center"></i> 密码修改</span>
<i class="fa-solid fa-chevron-right text-gray-300 text-xs"></i>
</div>
<div class="flex justify-between items-center p-4 active:bg-gray-50 cursor-pointer transition-colors">
<span class="text-gray-800 text-sm font-medium"><i class="fa-solid fa-arrows-rotate text-gray-400 mr-2 w-4 text-center"></i> 检查版本更新</span>
<span class="text-gray-400 text-xs font-mono">当前版本 V1.0.0</span>
</div>
</div>
<!-- 退出登录按钮 -->
<button id="btn-logout" class="mt-4 bg-white border border-red-100 text-danger rounded-xl p-3.5 text-center text-sm font-bold shadow-sm active:bg-red-50 transition-colors w-full">
退出登录
</button>
</div>
<!-- 退出登录确认弹窗 (模态框) -->
<div id="modal-logout" class="absolute inset-0 z-[100] hidden flex-col justify-center items-center px-8">
<!-- 背景遮罩 -->
<div id="modal-logout-overlay" class="absolute inset-0 bg-black/40 transition-opacity opacity-0 duration-300"></div>
<!-- 弹窗内容 -->
<div id="modal-logout-content" class="bg-white rounded-2xl relative z-10 w-full max-w-sm overflow-hidden transform scale-95 opacity-0 transition-all duration-300 flex flex-col shadow-2xl">
<div class="p-6 text-center">
<div class="w-12 h-12 rounded-full bg-red-50 text-red-500 flex items-center justify-center text-xl mx-auto mb-4">
<i class="fa-solid fa-arrow-right-from-bracket"></i>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-2">退出登录</h3>
<p class="text-sm text-gray-500">是否确认退出当前账号？<br>退出后需重新登录。</p>
</div>
<div class="flex border-t border-gray-100 bg-gray-50/50">
<button id="btn-logout-cancel" class="flex-1 py-3.5 text-gray-600 text-sm font-medium active:bg-gray-100 border-r border-gray-100 transition-colors">取消</button>
<button id="btn-logout-confirm" class="flex-1 py-3.5 text-danger text-sm font-bold active:bg-red-50 transition-colors">确认退出</button>
</div>
</div>
</div>
</div>
</div>
<!-- ======================= 详情页弹窗层 (覆盖全局) ======================= -->
<!-- 详情页 1：通用任务详情 (T01 供体评估) -->
<div id="detail-t01" class="absolute inset-0 z-[60] bg-gray-50 hidden flex-col">
<!-- Header -->
<div class="h-12 bg-white flex items-center px-4 border-b border-gray-200 shrink-0 sticky top-0 z-10 shadow-sm">
<div class="w-10 h-full flex items-center -ml-2 cursor-pointer active:opacity-50" onclick="document.getElementById('detail-t01').classList.add('hidden'); document.getElementById('detail-t01').classList.remove('flex');">
<i class="fa-solid fa-chevron-left text-gray-600 text-lg"></i>
</div>
<div class="flex-1 text-center font-bold text-gray-800 text-lg pr-8">任务详情</div>
</div>
<!-- 内容区 -->
<div class="flex-1 overflow-y-auto p-4 pb-20 flex flex-col gap-4">
<!-- 基本信息 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
<div class="border-l-4 border-primary pl-2 font-bold text-gray-800 mb-3 text-sm leading-none">【 基本信息 】</div>
<div class="space-y-2.5 text-xs text-gray-600">
<div class="flex"><span class="w-20 text-gray-400 shrink-0">任务编号：</span><span class="font-medium text-gray-800">T01-JSSQ00041-01</span></div>
<div class="flex"><span class="w-20 text-gray-400 shrink-0">任务类型：</span><span>供体评估</span></div>
<div class="flex"><span class="w-20 text-gray-400 shrink-0">申请来源：</span><span>李医生 (江苏省OPO-南京区)</span></div>
<div class="flex"><span class="w-20 text-gray-400 shrink-0">现场负责：</span><span>张主任 (13800138000)</span></div>
<div class="flex"><span class="w-20 text-gray-400 shrink-0">任务地点：</span><span class="font-bold text-gray-800">南京鼓楼医院</span></div>
</div>
</div>
<!-- 任务资源 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
<div class="border-l-4 border-primary pl-2 font-bold text-gray-800 mb-3 text-sm leading-none">【 任务资源 】</div>
<div class="flex flex-col gap-3">
<!-- 资源组 1 -->
<div class="border border-gray-100 rounded-lg p-3 bg-gray-50/50">
<div class="flex justify-between items-center border-b border-gray-100 pb-2 mb-2">
<span class="font-bold text-gray-700 text-sm">评估一组</span>
<span class="bg-status-pendingBg text-status-pending text-[10px] px-1.5 py-0.5 rounded">待执行</span>
</div>
<div class="space-y-1.5 text-xs text-gray-600 mb-3">
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">人员：</span><span>张医生、李护士</span></div>
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">车辆：</span><span>苏A·12345 (救护车)</span></div>
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">设备：</span><span class="text-gray-400">(无)</span></div>
</div>
<div class="flex justify-end gap-2">
<button class="px-4 py-1.5 text-xs border border-gray-300 text-gray-600 rounded hover:bg-gray-100 transition" onclick="showToast('已拒绝该资源分配'); this.parentElement.parentElement.style.opacity='0.5'; this.disabled=true;">拒绝</button>
<button class="px-4 py-1.5 text-xs bg-primary text-white rounded hover:bg-blue-700 shadow-sm transition" onclick="showToast('任务已开始执行'); this.innerText='执行中'; this.classList.replace('bg-primary', 'bg-gray-400'); this.classList.remove('hover:bg-blue-700'); this.disabled=true;">开 始</button>
</div>
</div>
<!-- 资源组 2 -->
<div class="border border-gray-100 rounded-lg p-3 bg-gray-50/50">
<div class="flex justify-between items-center border-b border-gray-100 pb-2 mb-2">
<span class="font-bold text-gray-700 text-sm">评估二组</span>
<span class="bg-status-activeBg text-status-active text-[10px] px-1.5 py-0.5 rounded">执行中</span>
</div>
<div class="space-y-1.5 text-xs text-gray-600 mb-3">
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">人员：</span><span>赵医生</span></div>
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">车辆：</span><span class="text-gray-400">(无)</span></div>
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">设备：</span><span>便携式B超机</span></div>
</div>
<div class="flex justify-end">
<button class="px-4 py-1.5 text-xs border border-primary text-primary bg-blue-50 rounded hover:bg-blue-100 transition" onclick="showToast('已确认到达目标地点'); this.innerText='已到达'; this.classList.replace('border-primary', 'border-gray-300'); this.classList.replace('text-primary', 'text-gray-400'); this.classList.replace('hover:bg-blue-100', 'bg-gray-100'); this.disabled=true;">确 认 到 达</button>
</div>
</div>
</div>
</div>
<!-- 任务日志 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
<div class="border-l-4 border-primary pl-2 font-bold text-gray-800 mb-4 text-sm leading-none">【 任务日志 】</div>
<!-- Timeline -->
<div class="relative border-l border-gray-200 ml-2 space-y-4">
<div class="relative pl-4">
<div class="absolute w-2 h-2 bg-primary rounded-full -left-[4.5px] top-1.5 ring-4 ring-blue-50"></div>
<div class="text-[10px] text-gray-400 mb-0.5">2026-03-22 08:30</div>
<div class="text-xs text-gray-700"><span class="font-medium">张主任 (负责人)：</span>确认评估二组出发，开始执行。</div>
</div>
<div class="relative pl-4">
<div class="absolute w-2 h-2 bg-gray-300 rounded-full -left-[4.5px] top-1.5 ring-4 ring-white"></div>
<div class="text-[10px] text-gray-400 mb-0.5">2026-03-22 08:00</div>
<div class="text-xs text-gray-700"><span class="font-medium text-primary">指挥中心：</span>下发了供体评估任务。</div>
</div>
</div>
</div>
</div>
<!-- 全局悬浮组件 -->
<div class="absolute right-4 bottom-[100px] flex flex-col gap-3 z-20">
<div class="w-12 h-12 bg-white rounded-full shadow-lg border border-gray-100 flex items-center justify-center text-xl text-primary cursor-pointer active:scale-95" onclick="openContactSheet()"><i class="fa-solid fa-phone-volume"></i></div>
<div class="w-12 h-12 bg-white rounded-full shadow-lg border border-gray-100 flex items-center justify-center text-xl text-blue-500 cursor-pointer active:scale-95" onclick="openMapView()"><i class="fa-solid fa-map-location-dot"></i></div>
</div>
</div>
<!-- 详情页 2：器官获取详情 (T03 器官获取) -->
<div id="detail-t03" class="absolute inset-0 z-[60] bg-gray-50 hidden flex-col">
<div class="h-12 bg-white flex items-center px-4 border-b border-gray-200 shrink-0 sticky top-0 z-10 shadow-sm">
<div class="w-10 h-full flex items-center -ml-2 cursor-pointer active:opacity-50" onclick="document.getElementById('detail-t03').classList.add('hidden'); document.getElementById('detail-t03').classList.remove('flex');">
<i class="fa-solid fa-chevron-left text-gray-600 text-lg"></i>
</div>
<div class="flex-1 text-center font-bold text-gray-800 text-lg pr-8">任务详情</div>
</div>
<div class="flex-1 overflow-y-auto p-4 pb-20 flex flex-col gap-4">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
<div class="border-l-4 border-primary pl-2 font-bold text-gray-800 mb-3 text-sm leading-none">【 基本信息 】</div>
<div class="space-y-2.5 text-xs text-gray-600">
<div class="flex"><span class="w-20 text-gray-400 shrink-0">任务编号：</span><span class="font-medium text-gray-800">T03-JSSQ00036-02</span></div>
<div class="flex"><span class="w-20 text-gray-400 shrink-0">任务类型：</span><span>器官获取</span></div>
<div class="flex"><span class="w-20 text-gray-400 shrink-0">申请来源：</span><span>指挥中心</span></div>
<div class="flex"><span class="w-20 text-gray-400 shrink-0">现场负责：</span><span>王主任 (13900139000)</span></div>
<div class="flex"><span class="w-20 text-gray-400 shrink-0">任务地点：</span><span class="font-bold text-gray-800">徐州医科大学附属医院</span></div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
<div class="border-l-4 border-primary pl-2 font-bold text-gray-800 mb-3 text-sm leading-none">【 任务资源 】</div>
<div class="flex flex-col gap-3">
<!-- 肝脏组 - 待作业 -->
<div class="border border-gray-100 rounded-lg p-3 bg-gray-50/50">
<div class="flex justify-between items-center border-b border-gray-100 pb-2 mb-2">
<span class="font-bold text-gray-800 text-sm">获取目标：[肝脏]</span>
<span class="bg-yellow-100 text-yellow-600 text-[10px] px-1.5 py-0.5 rounded">待作业</span>
</div>
<div class="space-y-1.5 text-xs text-gray-600 mb-3">
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">人员：</span><span>王主任 (操作人)、刘医生</span></div>
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">车辆：</span><span>苏A·99999 (商务车)</span></div>
</div>
<div class="flex justify-end">
<button class="w-full py-2.5 text-xs font-bold bg-primary text-white rounded hover:bg-blue-700 shadow-sm transition tracking-widest" onclick="showToast('开始作业，已同步系统时间'); this.innerText='作 业 中 ...'; this.classList.replace('bg-primary', 'bg-status-active'); this.classList.remove('hover:bg-blue-700'); this.disabled=true;">开 始 作 业</button>
</div>
</div>
<!-- 肾脏组 - 作业中 -->
<div class="border border-blue-100 rounded-lg p-3 bg-blue-50/30">
<div class="flex justify-between items-center border-b border-gray-100 pb-2 mb-2">
<span class="font-bold text-gray-800 text-sm">获取目标：[左肾]、[右肾]</span>
<span class="bg-status-activeBg text-status-active text-[10px] px-1.5 py-0.5 rounded animate-pulse">作业中</span>
</div>
<div class="space-y-1.5 text-xs text-gray-600 mb-3">
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">人员：</span><span>李主任 (操作人)</span></div>
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">设备：</span><span>冷链箱(BOX-002)</span></div>
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">用时：</span><span class="font-mono font-bold text-primary">01:30:45</span></div>
</div>
<div class="flex justify-end">
<button id="btn-t03-complete-trigger" class="w-full py-2.5 text-xs font-bold border border-primary text-primary bg-white rounded hover:bg-blue-50 shadow-sm transition tracking-widest" onclick="openT03CompleteSheet()">完 成 作 业</button>
</div>
</div>
<!-- 心脏组 - 已完成 -->
<div class="border border-gray-100 rounded-lg p-3 bg-gray-50 opacity-70">
<div class="flex justify-between items-center border-b border-gray-100 pb-2 mb-2">
<span class="font-bold text-gray-800 text-sm">获取目标：[心脏]</span>
<span class="bg-gray-200 text-gray-600 text-[10px] px-1.5 py-0.5 rounded">已完成</span>
</div>
<div class="space-y-1.5 text-xs text-gray-600">
<div class="flex items-start"><span class="w-10 text-gray-400 shrink-0">人员：</span><span>张主任</span></div>
<div class="flex items-start pt-1.5 border-t border-gray-100 mt-1"><span class="w-16 font-bold text-gray-700 shrink-0">确认结果：</span><span class="text-status-active font-medium">获取成功</span></div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
<div class="border-l-4 border-primary pl-2 font-bold text-gray-800 mb-4 text-sm leading-none">【 任务日志 】</div>
<div class="relative border-l border-gray-200 ml-2 space-y-4">
<div class="relative pl-4">
<div class="absolute w-2 h-2 bg-primary rounded-full -left-[4.5px] top-1.5 ring-4 ring-blue-50"></div>
<div class="text-[10px] text-gray-400 mb-0.5">2026-03-22 14:15</div>
<div class="text-xs text-gray-700"><span class="font-medium">李主任 (肾脏组)：</span>已确认开始手术作业。</div>
</div>
<div class="relative pl-4">
<div class="absolute w-2 h-2 bg-gray-300 rounded-full -left-[4.5px] top-1.5 ring-4 ring-white"></div>
<div class="text-[10px] text-gray-400 mb-0.5">2026-03-22 14:00</div>
<div class="text-xs text-gray-700"><span class="font-medium">王主任 (负责人)：</span>确认评估组到达目标医院。</div>
</div>
</div>
</div>
</div>
<div class="absolute right-4 bottom-[100px] flex flex-col gap-3 z-20">
<div class="w-12 h-12 bg-white rounded-full shadow-lg border border-gray-100 flex items-center justify-center text-xl text-primary cursor-pointer active:scale-95" onclick="openContactSheet()"><i class="fa-solid fa-phone-volume"></i></div>
<div class="w-12 h-12 bg-white rounded-full shadow-lg border border-gray-100 flex items-center justify-center text-xl text-blue-500 cursor-pointer active:scale-95" onclick="openMapView()"><i class="fa-solid fa-map-location-dot"></i></div>
</div>
</div>
<!-- 详情页 3：器官转运详情 (T04 器官转运) -->
<div id="detail-t04" class="absolute inset-0 z-[60] bg-gray-50 hidden flex-col">
<div class="h-12 bg-white flex items-center px-4 border-b border-gray-200 shrink-0 sticky top-0 z-10 shadow-sm">
<div class="w-10 h-full flex items-center -ml-2 cursor-pointer active:opacity-50" onclick="document.getElementById('detail-t04').classList.add('hidden'); document.getElementById('detail-t04').classList.remove('flex');">
<i class="fa-solid fa-chevron-left text-gray-600 text-lg"></i>
</div>
<div class="flex-1 text-center font-bold text-gray-800 text-lg pr-8">任务详情</div>
</div>
<div class="flex-1 overflow-y-auto p-4 pb-28 flex flex-col gap-4">
<!-- 转运专属基本信息 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
<div class="border-l-4 border-primary pl-2 font-bold text-gray-800 mb-3 text-sm leading-none">【 基本信息 】</div>
<div class="space-y-2 text-xs text-gray-600">
<div class="flex items-center"><span class="w-16 text-gray-400">转运目标：</span><span class="font-bold text-gray-800 bg-gray-100 px-1.5 py-0.5 rounded mr-1"><i class="fa-solid fa-heart mr-1 text-red-400"></i>[肝脏]</span> ORG-20260322-001</div>
<div class="flex"><span class="w-16 text-gray-400">所属案例：</span><span>CA-JSSQ00032</span></div>
<div class="flex"><span class="w-16 text-gray-400">冷藏箱号：</span><span class="font-medium">DEVICE-005</span></div>
<div class="flex"><span class="w-16 text-gray-400">转运负责：</span><span>王司机 (13800000000)</span></div>
</div>
<div class="border-t border-dashed border-gray-200 my-3"></div>
<!-- 起点与终点排版 -->
<div class="relative pl-6 space-y-3">
<!-- 连接线 -->
<div class="absolute left-[7px] top-2 bottom-2 w-0.5 bg-gray-200"></div>
<!-- 起点 -->
<div class="relative">
<div class="absolute w-3 h-3 bg-white border-2 border-primary rounded-full -left-[23px] top-0.5"></div>
<div class="text-sm font-bold text-gray-800">南京鼓楼医院</div>
<div class="text-xs text-gray-500 mt-1">捐赠者：张* (320102********1234)</div>
</div>
<!-- 终点 -->
<div class="relative pt-2">
<div class="absolute w-3 h-3 bg-white border-2 border-green-500 rounded-full -left-[23px] top-2.5"></div>
<div class="text-sm font-bold text-gray-800">苏州人民医院</div>
<div class="text-xs text-gray-500 mt-1">待移植：李* (320502********5678)</div>
</div>
</div>
</div>
<!-- 时效监控 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
<div class="border-l-4 border-primary pl-2 font-bold text-gray-800 mb-4 text-sm leading-none">【 任务用时 】</div>
<div class="flex divide-x divide-gray-100">
<div class="flex-1 flex flex-col items-center justify-center">
<div class="text-xl font-bold font-mono text-gray-800">2<span class="text-xs text-gray-500 font-sans mx-0.5">h</span>10<span class="text-xs text-gray-500 font-sans ml-0.5">m</span></div>
<div class="text-xs text-gray-400 mt-1">在途时长</div>
</div>
<div class="flex-1 flex flex-col items-center justify-center">
<div class="text-xl font-bold font-mono text-gray-800">10:45</div>
<div class="text-xs text-gray-400 mt-1">预计到达</div>
</div>
<div class="flex-1 flex flex-col items-center justify-center">
<div class="text-xl font-bold font-mono text-gray-800">4<span class="text-xs text-gray-500 font-sans ml-0.5">h</span></div>
<div class="text-xs text-gray-400 mt-1">冷缺血参考</div>
</div>
</div>
</div>
<!-- 硬件状态监控 (双卡片) -->
<div class="flex gap-3">
<div class="flex-1 bg-white rounded-xl shadow-sm border border-red-200 p-3 relative overflow-hidden">
<div class="absolute top-0 left-0 w-1 h-full bg-danger"></div>
<div class="text-xs text-gray-500 font-bold mb-2 flex items-center justify-between">
<span><i class="fa-solid fa-box-open mr-1"></i>冷藏箱监测</span>
<i class="fa-solid fa-triangle-exclamation text-danger animate-pulse"></i>
</div>
<div class="flex items-end gap-2 mb-1">
<span class="text-2xl font-bold text-danger leading-none">8.5</span><span class="text-xs text-danger font-bold mb-0.5">℃</span>
</div>
<div class="flex gap-1">
<span class="bg-red-50 text-danger text-[9px] px-1 rounded border border-red-100">超限预警</span>
<span class="bg-green-50 text-green-600 text-[9px] px-1 rounded border border-green-100">电量85%</span>
</div>
</div>
<div class="flex-1 bg-white rounded-xl shadow-sm border border-gray-100 p-3 relative overflow-hidden">
<div class="absolute top-0 left-0 w-1 h-full bg-green-500"></div>
<div class="text-xs text-gray-500 font-bold mb-2"><i class="fa-solid fa-road mr-1"></i>路况监测</div>
<div class="flex items-end gap-2 mb-2">
<span class="text-lg font-bold text-green-600 leading-none">畅通</span>
</div>
<div class="text-[10px] text-gray-500 truncate whitespace-nowrap"><i class="fa-solid fa-location-arrow text-gray-400 mr-1"></i>苏州市相城区G2京沪高速</div>
</div>
</div>
<!-- 任务日志 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
<div class="border-l-4 border-primary pl-2 font-bold text-gray-800 mb-4 text-sm leading-none">【 任务日志 】</div>
<div class="relative border-l border-gray-200 ml-2 space-y-4">
<div class="relative pl-4">
<div class="absolute w-2 h-2 bg-danger rounded-full -left-[4.5px] top-1.5 ring-4 ring-red-50"></div>
<div class="text-[10px] text-red-400 mb-0.5">2026-03-22 17:30</div>
<div class="text-xs text-danger bg-red-50 p-2 rounded border border-red-100"><span class="font-bold"><i class="fa-solid fa-robot mr-1"></i>系统预警：</span>监测到箱温(8.5℃)超过阈值上限(8.0℃)，已触发 L1 致命预警！</div>
</div>
<div class="relative pl-4">
<div class="absolute w-2 h-2 bg-primary rounded-full -left-[4.5px] top-1.5 ring-4 ring-blue-50"></div>
<div class="text-[10px] text-gray-400 mb-0.5">2026-03-22 17:00</div>
<div class="text-xs text-gray-700"><span class="font-medium">赵护士 (负责人)：</span>核对器官与设备无误，开始转运。</div>
</div>
</div>
</div>
</div>
<!-- 全局悬浮与底部栏 -->
<div class="absolute right-4 bottom-[90px] flex flex-col gap-3 z-20">
<div class="w-10 h-10 bg-white rounded-full shadow-lg border border-gray-100 flex items-center justify-center text-primary cursor-pointer active:scale-95" onclick="openContactSheet()"><i class="fa-solid fa-phone-volume"></i></div>
<div class="w-10 h-10 bg-white rounded-full shadow-lg border border-gray-100 flex items-center justify-center text-blue-500 cursor-pointer active:scale-95" onclick="openMapView()"><i class="fa-solid fa-map-location-dot"></i></div>
</div>
<div class="absolute bottom-0 w-full bg-white border-t border-gray-200 p-3 shadow-[0_-5px_15px_rgba(0,0,0,0.05)] z-30">
<button id="btn-t04-delivery-trigger" class="w-full bg-primary text-white font-bold text-sm py-3.5 rounded-xl hover:bg-blue-700 active:scale-95 transition-transform tracking-widest" onclick="openT04DeliverySheet()">
确 认 交 付
</button>
</div>
</div>
<!-- ======================= 新增交互页面 ======================= -->
<!-- [V1.1.0新增] 器官获取结果确认弹窗 -->
<div id="sheet-t03-complete" class="absolute inset-0 z-[100] hidden flex-col justify-end">
<!-- 背景遮罩 -->
<div id="t03-complete-overlay" class="absolute inset-0 bg-black/40 transition-opacity opacity-0 duration-300" onclick="closeT03CompleteSheet()"></div>
<!-- 弹窗内容 -->
<div id="t03-complete-content" class="bg-gray-50 rounded-t-2xl relative z-10 transform translate-y-full transition-transform duration-300 flex flex-col pb-6 max-h-[85%]">
<div class="bg-white py-4 flex justify-center items-center border-b border-gray-100 relative shrink-0 rounded-t-2xl">
<span class="text-sm font-bold text-gray-800">器官获取结果确认</span>
<i class="fa-solid fa-xmark absolute right-4 text-gray-400 p-2 cursor-pointer hover:text-gray-600" onclick="closeT03CompleteSheet()"></i>
</div>
<div class="flex-1 overflow-y-auto p-4 flex flex-col gap-3">
<!-- 器官：左肾 -->
<div class="bg-white border border-gray-100 rounded-lg p-3 shadow-sm">
<div class="font-bold text-sm text-gray-800 mb-2.5">获取目标：[左肾]</div>
<div class="flex gap-6 mb-1">
<label class="flex items-center gap-1.5 text-sm cursor-pointer"><input type="radio" name="ls-result" value="success" checked onchange="document.getElementById('ls-reason').classList.add('hidden')" class="text-primary focus:ring-primary w-4 h-4"> 获取成功</label>
<label class="flex items-center gap-1.5 text-sm cursor-pointer text-danger"><input type="radio" name="ls-result" value="discard" onchange="document.getElementById('ls-reason').classList.remove('hidden')" class="text-danger focus:ring-danger w-4 h-4"> 已废弃</label>
</div>
<div id="ls-reason" class="hidden mt-2 pt-2 border-t border-dashed border-gray-100">
<input type="text" placeholder="请输入废弃原因 (必填)" class="w-full bg-gray-50 border border-gray-200 rounded px-3 py-2 text-xs outline-none focus:border-primary">
</div>
</div>
<!-- 器官：右肾 -->
<div class="bg-white border border-gray-100 rounded-lg p-3 shadow-sm">
<div class="font-bold text-sm text-gray-800 mb-2.5">获取目标：[右肾]</div>
<div class="flex gap-6 mb-1">
<label class="flex items-center gap-1.5 text-sm cursor-pointer"><input type="radio" name="rs-result" value="success" checked onchange="document.getElementById('rs-reason').classList.add('hidden')" class="text-primary focus:ring-primary w-4 h-4"> 获取成功</label>
<label class="flex items-center gap-1.5 text-sm cursor-pointer text-danger"><input type="radio" name="rs-result" value="discard" onchange="document.getElementById('rs-reason').classList.remove('hidden')" class="text-danger focus:ring-danger w-4 h-4"> 已废弃</label>
</div>
<div id="rs-reason" class="hidden mt-2 pt-2 border-t border-dashed border-gray-100">
<input type="text" placeholder="请输入废弃原因 (必填)" class="w-full bg-gray-50 border border-gray-200 rounded px-3 py-2 text-xs outline-none focus:border-primary">
</div>
</div>
<!-- 转运衔接 (V1.1.0 核心逻辑) -->
<div class="bg-blue-50 border border-blue-100 rounded-lg p-3.5 flex justify-between items-center shadow-sm">
<div>
<div class="text-sm font-bold text-gray-800"><i class="fa-solid fa-link text-primary mr-1"></i>转运任务衔接</div>
<div class="text-[10px] text-gray-500 mt-1">默认开启：本组直接承接获取成功器官的转运</div>
</div>
<!-- Tailwind 开关组件 -->
<div class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full bg-primary transition-colors duration-200 ease-in-out border-2 border-transparent" id="toggle-transport" onclick="this.classList.toggle('bg-primary'); this.classList.toggle('bg-gray-300'); this.querySelector('span').classList.toggle('translate-x-5');">
<span class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out translate-x-5 ml-[2px]"></span>
</div>
</div>
</div>
<div class="px-4 pt-2 shrink-0">
<button class="w-full py-3.5 bg-primary text-white rounded-xl font-bold text-sm active:scale-95 transition-transform shadow-sm" onclick="submitT03Complete()">保 存 并 提 交</button>
</div>
</div>
</div>
<!-- [V1.1.0新增] 器官交付确认弹窗 -->
<div id="sheet-t04-delivery" class="absolute inset-0 z-[100] hidden flex-col justify-end">
<!-- 背景遮罩 -->
<div id="t04-delivery-overlay" class="absolute inset-0 bg-black/40 transition-opacity opacity-0 duration-300" onclick="closeT04DeliverySheet()"></div>
<!-- 弹窗内容 -->
<div id="t04-delivery-content" class="bg-gray-50 rounded-t-2xl relative z-10 transform translate-y-full transition-transform duration-300 flex flex-col pb-6 max-h-[85%]">
<div class="bg-white py-4 flex justify-center items-center border-b border-gray-100 relative shrink-0 rounded-t-2xl">
<span class="text-sm font-bold text-gray-800">转运交付确认</span>
<i class="fa-solid fa-xmark absolute right-4 text-gray-400 p-2 cursor-pointer hover:text-gray-600" onclick="closeT04DeliverySheet()"></i>
</div>
<div class="flex-1 overflow-y-auto p-4 flex flex-col gap-3">
<!-- GPS 定位校验区块 -->
<div class="bg-white border border-gray-100 rounded-lg p-4 shadow-sm">
<div class="text-sm font-bold text-gray-800 mb-3 border-l-2 border-primary pl-2 leading-none">GPS 位置比对</div>
<div class="flex flex-col gap-2">
<div class="text-[11px] text-gray-500">当前实时定位：</div>
<div class="text-sm font-bold text-gray-800 flex items-start gap-1.5"><i class="fa-solid fa-location-dot text-primary mt-0.5"></i> <span>苏州人民医院 急诊大楼<br><span class="text-xs font-normal text-gray-400">江苏省苏州市平江区干将东路</span></span></div>
<div class="bg-green-50 text-status-active text-xs px-2 py-1.5 rounded flex items-center gap-1.5 mt-1 border border-green-100 w-max"><i class="fa-solid fa-circle-check"></i> 定位与目标终点匹配正常</div>
</div>
</div>
<!-- 回执单留档区块 -->
<div class="bg-white border border-gray-100 rounded-lg p-4 shadow-sm">
<div class="text-sm font-bold text-gray-800 mb-1 border-l-2 border-primary pl-2 leading-none">交接凭证留档 <span class="text-danger">*</span></div>
<div class="text-[10px] text-gray-500 mb-4 pl-2">按规范要求，必须拍摄接收方现场签署的纸质确认单或实体交接照片。</div>
<div class="flex gap-3">
<div class="w-20 h-20 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300 flex flex-col items-center justify-center text-gray-400 cursor-pointer active:bg-gray-200 transition-colors">
<i class="fa-solid fa-camera text-xl mb-1 text-gray-400"></i>
<span class="text-[10px] font-medium">点击拍摄</span>
</div>
</div>
</div>
</div>
<div class="px-4 pt-2 shrink-0">
<button class="w-full py-3.5 bg-primary text-white rounded-xl font-bold text-sm active:scale-95 transition-transform shadow-sm" onclick="submitT04Delivery()">确 认 完 成 交 付</button>
</div>
</div>
</div>
<!-- 全局 Toast 提示框 -->
<div id="global-toast" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black/75 text-white px-5 py-3 rounded-lg text-sm font-medium z-[200] opacity-0 pointer-events-none transition-opacity duration-300 whitespace-nowrap shadow-lg flex items-center gap-2">
<i class="fa-solid fa-circle-check text-green-400"></i>
<span id="toast-msg">操作成功</span>
</div>
<!-- 地图轨迹视图 (Map View) -->
<div id="view-map" class="absolute inset-0 z-[80] bg-gray-100 hidden flex-col">
<div class="h-12 bg-white flex items-center px-4 border-b border-gray-200 shrink-0 sticky top-0 z-10 shadow-sm">
<div class="w-10 h-full flex items-center -ml-2 cursor-pointer active:opacity-50" onclick="closeMapView()">
<i class="fa-solid fa-chevron-left text-gray-600 text-lg"></i>
</div>
<div class="flex-1 text-center font-bold text-gray-800 text-lg">任务轨迹</div>
<div class="w-10 h-full flex items-center justify-end cursor-pointer active:opacity-50" onclick="showToast('位置信息已刷新')">
<i class="fa-solid fa-rotate-right text-primary text-lg"></i>
</div>
</div>
<!-- 模拟地图区域 -->
<div class="flex-1 relative overflow-hidden flex flex-col bg-[#E5E3DF]">
<!-- 模拟地图网格与道路背景 -->
<div class="absolute inset-0 opacity-30" style="background-image: linear-gradient(#ffffff 2px, transparent 2px), linear-gradient(90deg, #ffffff 2px, transparent 2px); background-size: 50px 50px;"></div>
<!-- 路线图叠加层 (严格按照线框图：起点-车-终点) -->
<div class="relative z-10 flex-1 flex flex-col items-center justify-center py-10 mb-16">
<!-- 路线纵轴连线 -->
<div class="absolute w-1.5 bg-blue-200 h-[60%] left-1/2 -translate-x-1/2 top-[20%] rounded-full"></div>
<div class="absolute w-1.5 bg-primary h-[30%] left-1/2 -translate-x-1/2 top-[20%] rounded-t-full"></div>
<!-- 起点 -->
<div class="absolute top-[15%] flex flex-col items-center">
<div class="bg-white text-gray-800 text-xs font-bold px-3 py-1.5 rounded-full shadow-sm border border-gray-200 mb-1">南京鼓楼医院</div>
<div class="w-4 h-4 bg-white border-4 border-gray-800 rounded-full shadow"></div>
</div>
<!-- 车辆当前位置 -->
<div class="absolute top-[45%] flex flex-col items-center animate-bounce">
<div class="bg-primary text-white text-[10px] px-2 py-1 rounded shadow-md mb-1 whitespace-nowrap flex items-center gap-1"><i class="fa-solid fa-truck-medical"></i> 苏A·99999</div>
<div class="w-6 h-6 bg-white rounded-full shadow-lg flex items-center justify-center border-2 border-primary">
<div class="w-3 h-3 bg-primary rounded-full"></div>
</div>
</div>
<!-- 终点 -->
<div class="absolute bottom-[75%] flex flex-col items-center">
<div class="w-4 h-4 bg-white border-4 border-green-500 rounded-full shadow mb-1"></div>
<div class="bg-white text-gray-800 text-xs font-bold px-3 py-1.5 rounded-full shadow-sm border border-gray-200">苏州人民医院</div>
</div>
</div>
<!-- 底部行驶信息面板 -->
<div class="absolute bottom-6 left-4 right-4 bg-white rounded-xl shadow-xl p-4 z-20 border border-gray-100">
<div class="flex justify-between items-center mb-3">
<div class="font-bold text-gray-800">G2 京沪高速</div>
<span class="bg-green-50 text-green-600 border border-green-100 text-[10px] px-2 py-0.5 rounded-full font-bold">路况畅通</span>
</div>
<div class="text-xs text-gray-500 flex justify-between items-end">
<div>
<div class="mb-1">距目的地：<span class="font-bold text-gray-800 text-lg">35</span> km</div>
<div>预计到达：<span class="font-medium text-primary">10:45</span></div>
</div>
<div class="w-10 h-10 bg-blue-50 text-primary rounded-full flex items-center justify-center text-lg shadow-sm cursor-pointer active:scale-95">
<i class="fa-solid fa-location-crosshairs"></i>
</div>
</div>
</div>
</div>
</div>
<!-- 融合通讯弹窗 (Contact Sheet) -->
<div id="sheet-contact" class="absolute inset-0 z-[90] hidden flex-col justify-end">
<!-- 背景遮罩 -->
<div id="contact-overlay" class="absolute inset-0 bg-black/40 transition-opacity opacity-0 duration-300" onclick="closeContactSheet()"></div>
<!-- 弹窗内容 -->
<div id="contact-content" class="bg-white rounded-t-2xl relative z-10 transform translate-y-full transition-transform duration-300 flex flex-col pb-6">
<div class="py-4 flex justify-center items-center border-b border-gray-50 relative">
<span class="text-sm font-bold text-gray-800">融合通讯</span>
<i class="fa-solid fa-xmark absolute right-4 text-gray-400 p-2 cursor-pointer hover:text-gray-600" onclick="closeContactSheet()"></i>
</div>
<div class="flex flex-col py-1">
<!-- 调度台 -->
<div class="px-6 py-4 flex justify-between items-center border-b border-gray-50 active:bg-gray-50 cursor-pointer transition-colors" onclick="callNumber('指挥中心调度台')">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-blue-50 text-primary border border-blue-100 flex items-center justify-center text-lg"><i class="fa-solid fa-headset"></i></div>
<div>
<div class="text-gray-800 text-sm font-bold mb-0.5">指挥中心</div>
<div class="text-xs text-gray-400">调度台官方热线</div>
</div>
</div>
<i class="fa-solid fa-phone text-green-500 bg-green-50 p-2.5 rounded-full"></i>
</div>
<!-- 司机(我) - 遵循自我标识与去重规则 -->
<div class="px-6 py-4 flex justify-between items-center border-b border-gray-50 transition-colors">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-gray-50 text-gray-400 border border-gray-100 flex items-center justify-center text-lg"><i class="fa-solid fa-truck-medical"></i></div>
<div>
<div class="text-gray-800 text-sm font-bold mb-0.5 flex items-center">王司机 <span class="bg-blue-50 text-primary border border-blue-100 text-[10px] px-1 rounded ml-1.5 font-normal">(我)</span></div>
<div class="text-xs text-gray-400">转运救护车 (苏A·99999)</div>
</div>
</div>
<i class="fa-solid fa-phone text-gray-400 bg-gray-50 border border-gray-100 p-2.5 rounded-full cursor-not-allowed" onclick="showToast('不能呼叫自己')"></i>
</div>
<!-- 现场医疗专家 -->
<div class="px-6 py-4 flex justify-between items-center active:bg-gray-50 cursor-pointer transition-colors" onclick="callNumber('李主任 (获取组)')">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-blue-50 text-primary border border-blue-100 flex items-center justify-center text-lg"><i class="fa-solid fa-user-doctor"></i></div>
<div>
<div class="text-gray-800 text-sm font-bold mb-0.5">李主任</div>
<div class="text-xs text-gray-400">现场获取组医疗专家</div>
</div>
</div>
<i class="fa-solid fa-phone text-green-500 bg-green-50 p-2.5 rounded-full"></i>
</div>
</div>
</div>
</div>
<!-- 通用底部筛选弹窗 (Action Sheet) -->
<div id="bottom-sheet" class="absolute inset-0 z-[100] hidden flex-col justify-end">
<!-- 背景遮罩 -->
<div id="sheet-overlay" class="absolute inset-0 bg-black/40 transition-opacity opacity-0 duration-300"></div>
<!-- 弹窗内容 -->
<div id="sheet-content" class="bg-gray-100 rounded-t-2xl relative z-10 transform translate-y-full transition-transform duration-300 flex flex-col max-h-[70%] pb-6">
<div class="bg-white rounded-t-2xl flex flex-col">
<div class="py-3.5 flex justify-center items-center border-b border-gray-100 relative">
<span class="text-sm font-bold text-gray-800">请选择状态</span>
<i id="sheet-close" class="fa-solid fa-xmark absolute right-4 text-gray-400 p-2 cursor-pointer hover:text-gray-600"></i>
</div>
<div id="sheet-options" class="flex flex-col py-2 overflow-y-auto max-h-[300px]">
<!-- 动态填充选项 -->
</div>
</div>
</div>
</div>
<!-- 底部 TabBar -->
<div class="h-16 bg-white border-t border-gray-200 absolute bottom-0 w-full flex justify-around items-center z-50 pb-2 pt-1 shadow-[0_-2px_10px_rgba(0,0,0,0.05)]">
<div class="tab-btn flex flex-col items-center justify-center w-1/4 h-full cursor-pointer text-primary" data-target="view-home">
<i class="fa-solid fa-house text-xl mb-1"></i>
<span class="text-[10px] font-medium">首页</span>
</div>
<div class="tab-btn flex flex-col items-center justify-center w-1/4 h-full cursor-pointer text-gray-400 hover:text-gray-600 transition-colors" data-target="view-case">
<i class="fa-solid fa-folder-open text-xl mb-1"></i>
<span class="text-[10px] font-medium">案例</span>
</div>
<div class="tab-btn flex flex-col items-center justify-center w-1/4 h-full cursor-pointer text-gray-400 hover:text-gray-600 transition-colors" data-target="view-task">
<i class="fa-solid fa-clipboard-list text-xl mb-1"></i>
<span class="text-[10px] font-medium">任务</span>
</div>
<div class="tab-btn flex flex-col items-center justify-center w-1/4 h-full cursor-pointer text-gray-400 hover:text-gray-600 transition-colors" data-target="view-my">
<i class="fa-regular fa-user text-xl mb-1"></i>
<span class="text-[10px] font-medium">我的</span>
</div>
</div>
</div>
<!-- 交互逻辑 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const tabBtns = document.querySelectorAll('.tab-btn');
const viewPanels = document.querySelectorAll('.view-panel');
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
// 1. 获取目标视图 ID
const targetId = btn.getAttribute('data-target');
// 2. 隐藏所有视图，显示目标视图
viewPanels.forEach(panel => {
if (panel.id === targetId) {
panel.classList.remove('hidden');
panel.classList.add('block');
} else {
panel.classList.remove('block');
panel.classList.add('hidden');
}
});
// 3. 更新 Tab 样式 (颜色切换)
tabBtns.forEach(tBtn => {
if (tBtn === btn) {
tBtn.classList.remove('text-gray-400', 'hover:text-gray-600');
tBtn.classList.add('text-primary');
} else {
tBtn.classList.remove('text-primary');
tBtn.classList.add('text-gray-400', 'hover:text-gray-600');
}
});
});
});
// ====== 案例页面内部：线索/案例 Tab 切换逻辑 ======
const topTabBtns = document.querySelectorAll('.top-tab-btn');
const listClue = document.getElementById('list-clue');
const listCase = document.getElementById('list-case');
const fabNewClue = document.getElementById('fab-new-clue');
topTabBtns.forEach(btn => {
btn.addEventListener('click', () => {
const targetId = btn.getAttribute('data-target');
// 1. 切换顶部 Tab 样式
topTabBtns.forEach(tBtn => {
if (tBtn === btn) {
tBtn.classList.remove('text-gray-400', 'border-transparent');
tBtn.classList.add('text-primary', 'border-primary');
} else {
tBtn.classList.remove('text-primary', 'border-primary');
tBtn.classList.add('text-gray-400', 'border-transparent');
}
});
// 2. 切换列表视图与悬浮按钮显示状态
if (targetId === 'list-clue') {
listClue.classList.remove('hidden');
listClue.classList.add('flex');
listCase.classList.remove('flex');
listCase.classList.add('hidden');
fabNewClue.classList.remove('hidden'); // 在线索列表显示新建按钮
} else {
listCase.classList.remove('hidden');
listCase.classList.add('flex');
listClue.classList.remove('flex');
listClue.classList.add('hidden');
fabNewClue.classList.add('hidden'); // 在案例列表隐藏新建按钮
// 切换Tab时，重置筛选按钮文本为"全部"
document.querySelector('#filter-btn-case .filter-text').innerText = '全部';
document.querySelector('#filter-btn-case').classList.remove('text-primary');
}
});
});
// ====== 筛选弹窗交互逻辑 ======
const bottomSheet = document.getElementById('bottom-sheet');
const sheetOverlay = document.getElementById('sheet-overlay');
const sheetContent = document.getElementById('sheet-content');
const sheetOptions = document.getElementById('sheet-options');
const sheetClose = document.getElementById('sheet-close');
// 状态字典，根据不同场景配置不同的菜单
const filterDict = {
'clue': ['全部', '待审核', '已通过', '未通过'],
'case': ['全部', '进行中', '已完成', '已终止'],
'task': ['全部', '待调度', '待执行', '执行中', '待作业', '已完成', '已终止', '已驳回']
};
let currentFilterBtn = null;
function openSheet(context, btnElement) {
currentFilterBtn = btnElement;
// 清空并动态生成选项 HTML
sheetOptions.innerHTML = '';
const options = filterDict[context];
const currentVal = btnElement.querySelector('.filter-text').innerText;
options.forEach(opt => {
const isSelected = opt === currentVal || (opt === '全部' && currentVal === '状态');
const colorClass = isSelected ? 'text-primary font-bold' : 'text-gray-700';
const iconHtml = isSelected ? '<i class="fa-solid fa-check text-primary"></i>' : '';
const optionDiv = document.createElement('div');
optionDiv.className = `px-5 py-3.5 flex justify-between items-center border-b border-gray-50 active:bg-gray-50 cursor-pointer filter-option`;
optionDiv.innerHTML = `
<span class="${colorClass} text-sm">${opt}</span>
${iconHtml}
`;
// 绑定选项点击事件
optionDiv.addEventListener('click', function() {
currentFilterBtn.querySelector('.filter-text').innerText = opt;
if (opt !== '全部') {
currentFilterBtn.classList.add('text-primary'); // 选中特定状态后高亮蓝色
} else {
currentFilterBtn.classList.remove('text-primary'); // 恢复默认颜色
}
closeSheet();
});
sheetOptions.appendChild(optionDiv);
});
// 显示弹窗层
bottomSheet.classList.remove('hidden');
bottomSheet.classList.add('flex');
// 延迟一帧移除隐藏类以触发 CSS 平滑位移动画
setTimeout(() => {
sheetOverlay.classList.remove('opacity-0');
sheetContent.classList.remove('translate-y-full');
}, 10);
}
function closeSheet() {
// 动画收起
sheetOverlay.classList.add('opacity-0');
sheetContent.classList.add('translate-y-full');
setTimeout(() => {
bottomSheet.classList.add('hidden');
bottomSheet.classList.remove('flex');
}, 300); // 等待300ms过渡动画完成
}
// 点击背景遮罩或X按钮都可以关闭
sheetOverlay.addEventListener('click', closeSheet);
sheetClose.addEventListener('click', closeSheet);
// 绑定【案例】页面筛选按钮
document.getElementById('filter-btn-case').addEventListener('click', function() {
// 判断当前处于线索Tab还是案例Tab，调取对应字典
const activeTab = document.querySelector('.top-tab-btn.text-primary').getAttribute('data-target');
const context = activeTab === 'list-clue' ? 'clue' : 'case';
openSheet(context, this);
});
// 绑定【任务】页面筛选按钮
document.getElementById('filter-btn-task').addEventListener('click', function() {
openSheet('task', this);
});
// ====== 退出登录弹窗交互逻辑 ======
const btnLogout = document.getElementById('btn-logout');
const modalLogout = document.getElementById('modal-logout');
const modalLogoutOverlay = document.getElementById('modal-logout-overlay');
const modalLogoutContent = document.getElementById('modal-logout-content');
const btnLogoutCancel = document.getElementById('btn-logout-cancel');
const btnLogoutConfirm = document.getElementById('btn-logout-confirm');
function openLogoutModal() {
modalLogout.classList.remove('hidden');
modalLogout.classList.add('flex');
// 触发动画
setTimeout(() => {
modalLogoutOverlay.classList.remove('opacity-0');
modalLogoutContent.classList.remove('scale-95', 'opacity-0');
modalLogoutContent.classList.add('scale-100', 'opacity-100');
}, 10);
}
function closeLogoutModal() {
modalLogoutOverlay.classList.add('opacity-0');
modalLogoutContent.classList.remove('scale-100', 'opacity-100');
modalLogoutContent.classList.add('scale-95', 'opacity-0');
setTimeout(() => {
modalLogout.classList.add('hidden');
modalLogout.classList.remove('flex');
}, 300);
}
btnLogout.addEventListener('click', openLogoutModal);
btnLogoutCancel.addEventListener('click', closeLogoutModal);
modalLogoutOverlay.addEventListener('click', closeLogoutModal);
btnLogoutConfirm.addEventListener('click', () => {
// 模拟退出成功状态
btnLogoutConfirm.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> 退出中...';
setTimeout(() => {
closeLogoutModal();
// 在真实环境中这里会跳转到登录页，由于是单页面原型，我们给出视觉重置
setTimeout(() => {
btnLogoutConfirm.innerText = '确认退出';
// 强制跳回首页以模拟重新进入
document.querySelector('.tab-btn[data-target="view-home"]').click();
}, 300);
}, 800);
});
// ================= 新增交互函数注入 =================
// 全局轻提示 (Toast)
window.showToast = function(msg) {
const toast = document.getElementById('global-toast');
document.getElementById('toast-msg').innerText = msg;
toast.classList.remove('opacity-0');
// 重置隐藏定时器，防止连续点击时闪烁
if(window.toastTimer) clearTimeout(window.toastTimer);
window.toastTimer = setTimeout(() => {
toast.classList.add('opacity-0');
}, 2000);
};
// 地图视图控制
window.openMapView = function() {
const map = document.getElementById('view-map');
map.classList.remove('hidden');
map.classList.add('flex');
};
window.closeMapView = function() {
const map = document.getElementById('view-map');
map.classList.add('hidden');
map.classList.remove('flex');
};
// 融合通讯拨号盘控制
window.openContactSheet = function() {
const sheet = document.getElementById('sheet-contact');
const overlay = document.getElementById('contact-overlay');
const content = document.getElementById('contact-content');
sheet.classList.remove('hidden');
sheet.classList.add('flex');
setTimeout(() => {
overlay.classList.remove('opacity-0');
content.classList.remove('translate-y-full');
}, 10);
};
window.closeContactSheet = function() {
const sheet = document.getElementById('sheet-contact');
const overlay = document.getElementById('contact-overlay');
const content = document.getElementById('contact-content');
overlay.classList.add('opacity-0');
content.classList.add('translate-y-full');
setTimeout(() => {
sheet.classList.add('hidden');
sheet.classList.remove('flex');
}, 300);
};
// 模拟拨打电话
window.callNumber = function(name) {
showToast('正在呼叫 ' + name + ' ...');
setTimeout(() => {
closeContactSheet();
}, 400); // 延迟一点关闭，给用户操作反馈时间
};
// ====== T03 器官获取任务 交互弹窗逻辑 ======
window.openT03CompleteSheet = function() {
const sheet = document.getElementById('sheet-t03-complete');
const overlay = document.getElementById('t03-complete-overlay');
const content = document.getElementById('t03-complete-content');
sheet.classList.remove('hidden');
sheet.classList.add('flex');
setTimeout(() => {
overlay.classList.remove('opacity-0');
content.classList.remove('translate-y-full');
}, 10);
};
window.closeT03CompleteSheet = function() {
const sheet = document.getElementById('sheet-t03-complete');
const overlay = document.getElementById('t03-complete-overlay');
const content = document.getElementById('t03-complete-content');
overlay.classList.add('opacity-0');
content.classList.add('translate-y-full');
setTimeout(() => {
sheet.classList.add('hidden');
sheet.classList.remove('flex');
}, 300);
};
window.submitT03Complete = function() {
closeT03CompleteSheet();
showToast('获取结果已提交，自动创建关联转运任务');
// 模拟按钮状态变化
const btn = document.getElementById('btn-t03-complete-trigger');
btn.innerText = '已 完 成';
btn.classList.replace('border-primary', 'border-gray-300');
btn.classList.replace('text-primary', 'text-gray-400');
btn.classList.replace('hover:bg-blue-50', 'bg-gray-50');
btn.disabled = true;
btn.onclick = null;
};
// ====== T04 器官转运任务 交互弹窗逻辑 ======
window.openT04DeliverySheet = function() {
const sheet = document.getElementById('sheet-t04-delivery');
const overlay = document.getElementById('t04-delivery-overlay');
const content = document.getElementById('t04-delivery-content');
sheet.classList.remove('hidden');
sheet.classList.add('flex');
setTimeout(() => {
overlay.classList.remove('opacity-0');
content.classList.remove('translate-y-full');
}, 10);
};
window.closeT04DeliverySheet = function() {
const sheet = document.getElementById('sheet-t04-delivery');
const overlay = document.getElementById('t04-delivery-overlay');
const content = document.getElementById('t04-delivery-content');
overlay.classList.add('opacity-0');
content.classList.add('translate-y-full');
setTimeout(() => {
sheet.classList.add('hidden');
sheet.classList.remove('flex');
}, 300);
};
window.submitT04Delivery = function() {
closeT04DeliverySheet();
showToast('器官交付成功，流转至下一环节');
// 模拟退出详情页
setTimeout(() => {
document.getElementById('detail-t04').classList.add('hidden');
document.getElementById('detail-t04').classList.remove('flex');
}, 1500);
};
});
</script>
</body>
</html>
index.html
style.css
index.js
md
README.md
index.html