<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>医疗信息系统</title>
<!-- Tailwind CSS v3 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#64748b',
neutral: '#f1f5f9',
'neutral-dark': '#94a3b8',
'neutral-light': '#f8fafc'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
boxShadow: {
'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'modal': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.glass-effect {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.transition-all-300 {
transition: all 300ms ease-in-out;
}
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.02);
}
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<div class="min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center">
<i class="fa fa-heartbeat text-primary text-2xl mr-3"></i>
<h1 class="text-xl font-semibold text-gray-800">医疗信息管理系统</h1>
</div>
<div class="flex items-center space-x-4">
<span class="text-sm text-gray-600">2025年11月13日</span>
<div class="flex items-center">
<i class="fa fa-user-circle text-primary mr-2"></i>
<span class="text-sm font-medium text-gray-700">管理员</span>
</div>
</div>
</div>
</header>
<!-- 主要内容区域 -->
<main class="flex-grow container mx-auto px-4 py-6">
<div class="flex flex-col lg:flex-row gap-6">
<!-- 左侧区域 - 70%宽度 -->
<div class="w-full lg:w-7/12 space-y-6">
<!-- 异常监测记录卡片 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
异常监测记录
</h2>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left text-gray-700">
<thead class="text-xs text-gray-700 uppercase bg-gray-50">
<tr>
<th scope="col" class="px-4 py-3">记录时间</th>
<th scope="col" class="px-4 py-3">监测状态</th>
<th scope="col" class="px-4 py-3">异常监测因素</th>
<th scope="col" class="px-4 py-3">备注</th>
<th scope="col" class="px-4 py-3">操作</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3">2025-10-26 10:30</td>
<td class="px-4 py-3"><span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">调查中</span></td>
<td class="px-4 py-3">处方样式变动</td>
<td class="px-4 py-3 truncate max-w-[150px]" title="发现处方样式与历史记录存在差异，需进一步核实。">发现处方样式与历史记录存在差异...</td>
<td class="px-4 py-3"><a href="#" class="text-primary hover:underline" onclick="openSlideshow('异常监测材料', 0)"></a></td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3">2025-10-25 15:12</td>
<td class="px-4 py-3"><span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">通过</span></td>
<td class="px-4 py-3">处方样式变动</td>
<td class="px-4 py-3 truncate max-w-[150px]" title="经核实，处方编码连号系医院系统升级导致，已提交书面证明。">经核实，处方编码连号系医院系统升级导致...</td>
<td class="px-4 py-3"><a href="#" class="text-primary hover:underline">编辑</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- AE 记录卡片 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-gray-800">AE 记录</h2>
<button onclick="openAERecordModal()" class="flex items-center px-3 py-1.5 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-all-300 shadow-sm">
<i class="fa fa-plus mr-1.5"></i>
<span>新增 AE 记录</span>
</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left text-gray-700">
<thead class="text-xs text-gray-700 uppercase bg-gray-50">
<tr>
<th scope="col" class="px-4 py-3">患者提交时间</th>
<th scope="col" class="px-4 py-3">ATN 编号</th>
<th scope="col" class="px-4 py-3">备注</th>
<th scope="col" class="px-4 py-3">操作</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3">2025-10-20 09:15</td>
<td class="px-4 py-3">ATN20251020001</td>
<td class="px-4 py-3 truncate max-w-[200px]" title="患者反馈用药后出现轻微头痛，持续约2小时后自行缓解。">患者反馈用药后出现轻微头痛，持续约2小时后自行缓解。</td>
<td class="px-4 py-3">
<a href="#" class="text-primary hover:underline mr-3" onclick="openAEMaterialsModal()">查看 AE 材料</a>
<a href="#" class="text-primary hover:underline" onclick="editAERecord('ATN20251020001', '患者反馈用药后出现轻微头痛，持续约2小时后自行缓解。')">编辑</a>
</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3">2025-10-18 16:42</td>
<td class="px-4 py-3">ATN20251018002</td>
<td class="px-4 py-3 truncate max-w-[200px]" title="服药后出现短暂的胃部不适，建议饭后服用。">服药后出现短暂的胃部不适，建议饭后服用。</td>
<td class="px-4 py-3">
<a href="#" class="text-primary hover:underline mr-3" onclick="openAEMaterialsModal()">查看 AE 材料</a>
<a href="#" class="text-primary hover:underline" onclick="editAERecord('ATN20251020001', '患者反馈用药后出现轻微头痛，持续约2小时后自行缓解。')">编辑</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 患者信息卡片 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
患者信息
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-2">
<label class="text-xs text-gray-500">姓名</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入姓名" value="张三">
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">证件号码</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入证件号码" value="320901198601011234">
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">证件类型</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="身份证" selected>身份证</option>
<option value="护照">护照</option>
<option value="军官证">军官证</option>
<option value="其他">其他</option>
</select>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">年龄</label>
<input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入年龄" value="38">
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">性别</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="男" selected>男</option>
<option value="女">女</option>
<option value="其他">其他</option>
</select>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">联系电话</label>
<input type="tel" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入联系电话" value="138****5678">
</div>
</div>
</div>
<!-- 用药处方卡片 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
用药处方
</h2>
<!-- 处方列表 -->
<div class="space-y-4">
<!-- 处方1 -->
<div class="p-4 border border-gray-200 rounded-lg">
<div class="flex flex-col md:flex-row gap-4 items-start">
<!-- 处方图片和查验按钮 -->
<div class="w-full md:w-1/4 lg:w-1/5 flex flex-col items-center">
<div class="aspect-square cursor-pointer bg-neutral-dark rounded flex items-center justify-center text-white w-full" onclick="openSlideshow('用药处方', 0)">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
<button onclick="openVerificationModal()" class="mt-2 flex items-center text-xs text-primary hover:text-primary/80 transition-all-300">
<span>查验</span>
<i class="fa fa-search ml-1"></i>
</button>
</div>
<!-- 处方信息 -->
<div class="w-full md:w-3/4 lg:w-4/5">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<label class="text-xs text-gray-500 block mb-1">项目名称</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入项目名称" value="感冒治疗">
</div>
<div>
<label class="text-xs text-gray-500 block mb-1">医院名称</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入医院名称" value="第六人民医院">
</div>
<div>
<label class="text-xs text-gray-500 block mb-1">医生姓名</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入医生姓名" value="王医生">
</div>
<div>
<label class="text-xs text-gray-500 block mb-1">订单号</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入订单号" value="202510010001">
</div>
</div>
</div>
</div>
</div>
<!-- 处方2 -->
<div class="p-4 border border-gray-200 rounded-lg">
<div class="flex flex-col md:flex-row gap-4 items-start">
<!-- 处方图片和查验按钮 -->
<div class="w-full md:w-1/4 lg:w-1/5 flex flex-col items-center">
<div class="aspect-square cursor-pointer bg-neutral-dark rounded flex items-center justify-center text-white w-full" onclick="openSlideshow('用药处方', 1)">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
<button onclick="openVerificationModal()" class="mt-2 flex items-center text-xs text-primary hover:text-primary/80 transition-all-300">
<span>查验</span>
<i class="fa fa-search ml-1"></i>
</button>
</div>
<!-- 处方信息 -->
<div class="w-full md:w-3/4 lg:w-4/5">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<label class="text-xs text-gray-500 block mb-1">项目名称</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入项目名称" value="高血压管理">
</div>
<div>
<label class="text-xs text-gray-500 block mb-1">医院名称</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入医院名称" value="协和医院">
</div>
<div>
<label class="text-xs text-gray-500 block mb-1">医生姓名</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入医生姓名" value="李医生">
</div>
<div>
<label class="text-xs text-gray-500 block mb-1">订单号</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入订单号" value="202509250001">
</div>
</div>
</div>
</div>
</div>
<!-- 处方3 -->
<div class="p-4 border border-gray-200 rounded-lg">
<div class="flex flex-col md:flex-row gap-4 items-start">
<!-- 处方图片和查验按钮 -->
<div class="w-full md:w-1/4 lg:w-1/5 flex flex-col items-center">
<div class="aspect-square cursor-pointer bg-neutral-dark rounded flex items-center justify-center text-white w-full" onclick="openSlideshow('用药处方', 2)">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
<button onclick="openVerificationModal()" class="mt-2 flex items-center text-xs text-primary hover:text-primary/80 transition-all-300">
<span>查验</span>
<i class="fa fa-search ml-1"></i>
</button>
</div>
<!-- 处方信息 -->
<div class="w-full md:w-3/4 lg:w-4/5">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<label class="text-xs text-gray-500 block mb-1">项目名称</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入项目名称" value="糖尿病随访">
</div>
<div>
<label class="text-xs text-gray-500 block mb-1">医院名称</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入医院名称" value="中山医院">
</div>
<div>
<label class="text-xs text-gray-500 block mb-1">医生姓名</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入医生姓名" value="张医生">
</div>
<div>
<label class="text-xs text-gray-500 block mb-1">订单号</label>
<input type="text" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary" placeholder="请输入订单号" value="202508150001">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 发票信息卡片 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
发票信息
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-2">
<label class="text-xs text-gray-500">发票号码</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入发票号码" value="100009">
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">开票日期</label>
<input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="2025-10-10">
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">发票金额</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入发票金额" value="¥4500.00">
</div>
</div>
</div>
<!-- 理赔信息卡片 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
理赔信息
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-2">
<label class="text-xs text-gray-500">理赔状态</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="待提交">待提交</option>
<option value="审核中">审核中</option>
<option value="已完成" selected>已完成</option>
<option value="已拒绝">已拒绝</option>
</select>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">理赔金额</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入理赔金额" value="¥3600.00">
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">理赔日期</label>
<input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="2025-10-15">
</div>
</div>
</div>
<!-- 代理人信息卡片 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
代理人信息
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-2">
<label class="text-xs text-gray-500">代理人姓名</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入代理人姓名" value="李四">
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">代理人证件号码</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入代理人证件号码" value="320901198802023456">
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">与患者关系</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="本人">本人</option>
<option value="夫妻" selected>夫妻</option>
<option value="父母">父母</option>
<option value="子女">子女</option>
<option value="其他">其他</option>
</select>
</div>
</div>
</div>
</div>
<!-- 右侧区域 - 30%宽度 -->
<div class="w-full lg:w-3/12 space-y-6">
<!-- 异常监测记录按钮 -->
<div class="flex justify-end">
<button onclick="openAnomalyModal()" class="flex items-center px-4 py-2 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-all-300 mb-2 shadow-sm">
<i class="fa fa-exclamation-triangle mr-2"></i>
<span>异常监测记录</span>
</button>
</div>
<!-- 购药发票 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
购药发票
</h2>
<div class="grid grid-cols-3 gap-3">
<div class="aspect-square cursor-pointer" onclick="openSlideshow('购药发票', 0)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('购药发票', 1)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('购药发票', 2)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
</div>
</div>
<!-- 结算清单 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
结算清单
</h2>
<div class="grid grid-cols-3 gap-3">
<div class="aspect-square cursor-pointer" onclick="openSlideshow('结算清单', 0)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('结算清单', 1)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('结算清单', 2)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 结论区域 -->
<div class="mt-6 bg-white rounded-lg shadow-card p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">结论</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">审核结论</label>
<textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-[100px]" placeholder="请输入审核结论">根据提交的患者信息、处方信息和发票信息，经审核符合理赔条件，同意按照规定比例报销医疗费用。处方药品均在医保范围内，发票真实有效，理赔金额计算准确。</textarea>
</div>
<div class="flex justify-end space-x-3">
<button class="px-6 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-all-300">
保存草稿
</button>
<button class="px-6 py-2 bg-primary text-white rounded hover:bg-primary/90 transition-all-300">
提交审核
</button>
</div>
</div>
</div>
</main>
<!-- 底部信息 -->
<footer class="bg-white border-t border-gray-200 py-4">
<div class="container mx-auto px-4 text-center text-sm text-gray-500">
© 2025 医疗信息管理系统 - 版权所有
</div>
</footer>
</div>
<!-- 图片幻灯片 -->
<div id="slideshow" class="fixed inset-0 bg-black z-50 hidden flex flex-col">
<!-- 幻灯片头部 -->
<div class="flex justify-between items-center p-4 text-white">
<h3 id="slideshowTitle" class="text-xl font-medium">图片预览</h3>
<button onclick="closeSlideshow()" class="text-white hover:text-gray-300 transition-all-300">
<i class="fa fa-times text-2xl"></i>
</button>
</div>
<!-- 幻灯片内容 -->
<div class="flex-grow flex items-center justify-center p-4">
<button onclick="prevSlide()" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-70 transition-all-300">
<i class="fa fa-chevron-left text-2xl"></i>
</button>
<div id="slideshowContent" class="max-w-full max-h-full flex items-center justify-center">
<div class="aspect-square max-h-[80vh] bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-6xl"></i>
</div>
</div>
<button onclick="nextSlide()" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-70 transition-all-300">
<i class="fa fa-chevron-right text-2xl"></i>
</button>
</div>
<!-- 幻灯片底部 -->
<div class="p-4 text-white text-center">
<div id="slideshowCounter" class="text-sm">1 / 3</div>
</div>
</div>
<!-- 查验浮窗 -->
<div id="verificationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg max-w-6xl w-full max-h-[90vh] overflow-hidden flex flex-col">
<!-- 浮窗头部 -->
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-xl font-medium text-gray-800">处方查验</h3>
<button onclick="closeVerificationModal()" class="text-gray-500 hover:text-gray-700">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<!-- 浮窗内容 -->
<div class="flex-grow p-6 overflow-y-auto">
<div class="flex flex-col md:flex-row gap-6">
<!-- 左侧大图 -->
<div class="w-full md:w-1/2 space-y-4">
<h4 class="text-lg font-medium text-gray-700">用药处方</h4>
<div class="aspect-square bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-6xl"></i>
</div>
</div>
<!-- 右侧历史处方 -->
<div class="w-full md:w-1/2 space-y-4">
<h4 class="text-lg font-medium text-gray-700">历史处方查询</h4>
<!-- 筛选功能 -->
<div class="bg-gray-50 p-4 rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
<div class="relative">
<select id="projectNameFilter" class="w-full pl-3 pr-8 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none">
<option value="">全部项目</option>
<option value="感冒治疗">感冒治疗</option>
<option value="高血压管理">高血压管理</option>
<option value="糖尿病随访">糖尿病随访</option>
<option value="心脏病筛查">心脏病筛查</option>
<option value="胃病诊疗">胃病诊疗</option>
<option value="头痛缓解">头痛缓解</option>
<option value="过敏治疗">过敏治疗</option>
<option value="皮肤病诊疗">皮肤病诊疗</option>
<option value="眼科检查">眼科检查</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fa fa-chevron-down text-xs"></i>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">医院名称</label>
<div class="relative">
<select id="hospitalNameFilter" class="w-full pl-3 pr-8 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none">
<option value="">全部医院</option>
<option value="第六人民医院">第六人民医院</option>
<option value="协和医院">协和医院</option>
<option value="中山医院">中山医院</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fa fa-chevron-down text-xs"></i>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">医生姓名</label>
<div class="relative">
<select id="doctorNameFilter" class="w-full pl-3 pr-8 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none">
<option value="">全部医生</option>
<option value="王医生">王医生</option>
<option value="李医生">李医生</option>
<option value="张医生">张医生</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fa fa-chevron-down text-xs"></i>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">订单号</label>
<input type="text" id="orderNumberFilter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入订单号">
</div>
</div>
<button onclick="applyFilter()" class="w-full py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
应用筛选
</button>
</div>
<!-- 历史处方列表 -->
<div class="space-y-4">
<div class="p-3 border border-gray-200 rounded-lg flex items-center gap-3 cursor-pointer hover:bg-gray-50">
<div class="w-16 h-16 bg-neutral-dark rounded flex-shrink-0 flex items-center justify-center text-white">
<i class="fa fa-file-image-o"></i>
</div>
<div class="flex-grow">
<p class="text-sm font-medium text-gray-800">项目名称: 感冒治疗</p>
<p class="text-xs text-gray-500">医院: 第六人民医院 | 医生: 王医生</p>
<p class="text-xs text-gray-500">订单号: 202509010001</p>
</div>
</div>
<div class="p-3 border border-gray-200 rounded-lg flex items-center gap-3 cursor-pointer hover:bg-gray-50">
<div class="w-16 h-16 bg-neutral-dark rounded flex-shrink-0 flex items-center justify-center text-white">
<i class="fa fa-file-image-o"></i>
</div>
<div class="flex-grow">
<p class="text-sm font-medium text-gray-800">项目名称: 高血压管理</p>
<p class="text-xs text-gray-500">医院: 协和医院 | 医生: 李医生</p>
<p class="text-xs text-gray-500">订单号: 202508150002</p>
</div>
</div>
<div class="p-3 border border-gray-200 rounded-lg flex items-center gap-3 cursor-pointer hover:bg-gray-50">
<div class="w-16 h-16 bg-neutral-dark rounded flex-shrink-0 flex items-center justify-center text-white">
<i class="fa fa-file-image-o"></i>
</div>
<div class="flex-grow">
<p class="text-sm font-medium text-gray-800">项目名称: 糖尿病随访</p>
<p class="text-xs text-gray-500">医院: 中山医院 | 医生: 张医生</p>
<p class="text-xs text-gray-500">订单号: 202507200003</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 新增 AE 记录弹窗 -->
<div id="aeRecordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
<!-- 弹窗头部 -->
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-xl font-medium text-gray-800">新增 AE 记录</h3>
<button onclick="closeAERecordModal()" class="text-gray-500 hover:text-gray-700">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<!-- 弹窗内容 -->
<div class="flex-grow p-6 overflow-y-auto">
<form id="aeRecordForm" class="space-y-4">
<!-- ATN编号 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">ATN 编号 <span class="text-red-500">*</span></label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入 ATN 编号" required>
</div>
<!-- 备注 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">备注 <span class="text-red-500">*</span></label>
<textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-[100px]" placeholder="请输入备注信息" required></textarea>
</div>
</form>
</div>
<!-- 弹窗底部 -->
<div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
<button onclick="closeAERecordModal()" class="px-6 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-all-300">
取消
</button>
<button onclick="submitAERecordForm()" class="px-6 py-2 bg-primary text-white rounded hover:bg-primary/90 transition-all-300">
提交
</button>
</div>
</div>
</div>
<!-- 编辑 AE 记录弹窗 -->
<div id="editAERecordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold text-gray-900">编辑 AE 记录</h3>
<button type="button" class="text-gray-500 hover:text-gray-700" onclick="closeEditAERecordModal()">
<i class="fa fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label for="edit-atn-number" class="block text-sm font-medium text-gray-700">ATN 编号</label>
<input type="text" id="edit-atn-number" name="atn-number" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
</div>
<div>
<label for="edit-ae-remark" class="block text-sm font-medium text-gray-700">备注</label>
<textarea id="edit-ae-remark" name="ae-remark" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required></textarea>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" onclick="closeEditAERecordModal()">取消</button>
<button type="button" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" onclick="saveAERecord()">保存</button>
</div>
</div>
</div>
<div id="aeMaterialsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
<!-- 弹窗头部 -->
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-xl font-medium text-gray-800">AE 材料</h3>
<button onclick="closeAEMaterialsModal()" class="text-gray-500 hover:text-gray-700">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<!-- 弹窗内容 -->
<div class="flex-grow p-6 overflow-y-auto">
<!-- 购药发票 -->
<div class="space-y-4 mb-8">
<h4 class="text-lg font-medium text-gray-700">购药发票</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="aspect-square cursor-pointer" onclick="openSlideshow('AE购药发票', 0)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('AE购药发票', 1)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
</div>
</div>
<!-- 处方照片 -->
<div class="space-y-4">
<h4 class="text-lg font-medium text-gray-700">处方照片</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="aspect-square cursor-pointer" onclick="openSlideshow('AE处方照片', 0)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('AE处方照片', 1)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="anomalyModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
<!-- 弹窗头部 -->
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-xl font-medium text-gray-800">异常监测记录</h3>
<button onclick="closeAnomalyModal()" class="text-gray-500 hover:text-gray-700">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<!-- 弹窗内容 -->
<div class="flex-grow p-6 overflow-y-auto">
<form id="anomalyForm" class="space-y-4">
<!-- 监测状态 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">监测状态 <span class="text-red-500">*</span></label>
<div class="flex flex-wrap gap-4">
<label class="inline-flex items-center">
<input type="radio" name="monitoringStatus" value="调查中" class="form-radio text-primary focus:ring-primary" checked>
<span class="ml-2 text-sm text-gray-700">调查中</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="monitoringStatus" value="通过" class="form-radio text-primary focus:ring-primary">
<span class="ml-2 text-sm text-gray-700">通过</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="monitoringStatus" value="驳回" class="form-radio text-primary focus:ring-primary">
<span class="ml-2 text-sm text-gray-700">驳回</span>
</label>
</div>
</div>
<!-- 异常监测因素 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">异常监测因素 <span class="text-red-500">*</span></label>
<div class="space-y-2">
<label class="inline-flex items-center">
<input type="checkbox" name="anomalyFactors" value="处方样式变动" class="form-checkbox text-primary focus:ring-primary">
<span class="ml-2 text-sm text-gray-700">处方样式变动</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="anomalyFactors" value="处方编码连号" class="form-checkbox text-primary focus:ring-primary">
<span class="ml-2 text-sm text-gray-700">处方编码连号</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="anomalyFactors" value="同一医生字迹变动" class="form-checkbox text-primary focus:ring-primary">
<span class="ml-2 text-sm text-gray-700">同一医生字迹变动</span>
</label>
</div>
</div>
<!-- 书面证明材料（仅当选择"通过"时显示） -->
<div id="documentUploadSection" class="hidden">
<label class="block text-sm font-medium text-gray-700 mb-2">书面证明材料 <span class="text-red-500">*</span></label>
<div class="flex items-center justify-center w-full">
<label class="flex flex-col w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
<div class="flex flex-col items-center justify-center pt-7">
<i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
<p class="text-sm text-gray-500">点击或拖拽文件至此处上传</p>
<p class="text-xs text-gray-500 mt-1">支持PNG、JPG、PDF格式，单个文件不超过10MB</p>
</div>
<input type="file" class="hidden" accept=".png,.jpg,.jpeg,.pdf" multiple>
</label>
</div>
</div>
<!-- 备注 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">备注 <span class="text-red-500">*</span></label>
<textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-[100px]" placeholder="请输入备注信息" required></textarea>
</div>
</form>
</div>
<!-- 弹窗底部 -->
<div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
<button onclick="closeAnomalyModal()" class="px-6 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-all-300">
取消
</button>
<button onclick="submitAnomalyForm()" class="px-6 py-2 bg-primary text-white rounded hover:bg-primary/90 transition-all-300">
提交
</button>
</div>
</div>
</div>
<script>
// 图片幻灯片功能
let currentSlideshowType = '';
let currentSlideshowIndex = 0;
function openSlideshow(type, index) {
currentSlideshowType = type;
currentSlideshowIndex = index;
const slideshow = document.getElementById('slideshow');
const title = document.getElementById('slideshowTitle');
const counter = document.getElementById('slideshowCounter');
title.textContent = type;
counter.textContent = `${index + 1} / 3`;
slideshow.classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeSlideshow() {
const slideshow = document.getElementById('slideshow');
slideshow.classList.add('hidden');
document.body.style.overflow = '';
}
function nextSlide() {
currentSlideshowIndex = (currentSlideshowIndex + 1) % 3;
document.getElementById('slideshowCounter').textContent = `${currentSlideshowIndex + 1} / 3`;
}
function prevSlide() {
currentSlideshowIndex = (currentSlideshowIndex - 1 + 3) % 3;
document.getElementById('slideshowCounter').textContent = `${currentSlideshowIndex + 1} / 3`;
}
// 处方查验浮窗功能
function openVerificationModal() {
const modal = document.getElementById('verificationModal');
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeVerificationModal() {
const modal = document.getElementById('verificationModal');
modal.classList.add('hidden');
document.body.style.overflow = '';
}
function applyFilter() {
const projectFilter = document.getElementById('projectNameFilter').value;
const hospitalFilter = document.getElementById('hospitalNameFilter').value;
const doctorFilter = document.getElementById('doctorNameFilter').value;
const orderFilter = document.getElementById('orderNumberFilter').value;
alert(`应用筛选: 项目名称="${projectFilter}", 医院名称="${hospitalFilter}", 医生姓名="${doctorFilter}", 订单号="${orderFilter}"`);
}
// 新增 AE 记录弹窗功能
function openAERecordModal() {
const modal = document.getElementById('aeRecordModal');
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeAERecordModal() {
const modal = document.getElementById('aeRecordModal');
modal.classList.add('hidden');
document.body.style.overflow = '';
}
function submitAERecordForm() {
const form = document.getElementById('aeRecordForm');
const atnNumber = form.querySelector('input[type="text"]').value;
const remark = form.querySelector('textarea').value;
if (!atnNumber.trim()) {
alert('请输入 ATN 编号');
return;
}
if (!remark.trim()) {
alert('请输入备注信息');
return;
}
alert('AE 记录已提交，ATN 编号：' + atnNumber);
closeAERecordModal();
}
// 查看 AE 材料弹窗功能
function openAEMaterialsModal() {
const modal = document.getElementById('aeMaterialsModal');
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeAEMaterialsModal() {
const modal = document.getElementById('aeMaterialsModal');
modal.classList.add('hidden');
document.body.style.overflow = '';
}
function editAERecord(atnNumber, remark) {
document.getElementById('edit-atn-number').value = atnNumber;
document.getElementById('edit-ae-remark').value = remark;
document.getElementById('editAERecordModal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeEditAERecordModal() {
document.getElementById('editAERecordModal').classList.add('hidden');
document.body.style.overflow = '';
}
function saveAERecord() {
const atnNumber = document.getElementById('edit-atn-number').value;
const remark = document.getElementById('edit-ae-remark').value;
if (!atnNumber.trim()) {
alert('请输入 ATN 编号');
return;
}
if (!remark.trim()) {
alert('请输入备注信息');
return;
}
alert('AE 记录已更新！');
closeEditAERecordModal();
}
// 异常监测记录弹窗功能
function openAnomalyModal() {
const modal = document.getElementById('anomalyModal');
modal.classList.remove('hidden');
// 防止背景滚动
document.body.style.overflow = 'hidden';
// 重置表单
document.getElementById('anomalyForm').reset();
document.getElementById('documentUploadSection').classList.add('hidden');
// 添加监测状态变化监听
const statusRadios = document.querySelectorAll('input[name="monitoringStatus"]');
const factorCheckboxes = document.querySelectorAll('input[name="anomalyFactors"]');
function updateFactorsState() {
const selectedStatus = document.querySelector('input[name="monitoringStatus"]:checked').value;
const factorsSection = document.querySelector('label:has(input[name="anomalyFactors"])').parentElement.parentElement;
const documentSection = document.getElementById('documentUploadSection');
// 隐藏或显示异常监测因素
if (selectedStatus === '通过' || selectedStatus === '驳回') {
factorsSection.classList.add('hidden');
} else {
factorsSection.classList.remove('hidden');
}
// 隐藏书面证明材料
documentSection.classList.add('hidden');
}
statusRadios.forEach(radio => {
radio.addEventListener('change', updateFactorsState);
});
// 初始状态更新
updateFactorsState();
}
function closeAnomalyModal() {
const modal = document.getElementById('anomalyModal');
modal.classList.add('hidden');
// 恢复背景滚动
document.body.style.overflow = '';
}
function submitAnomalyForm() {
const form = document.getElementById('anomalyForm');
const status = document.querySelector('input[name="monitoringStatus"]:checked').value;
const factors = Array.from(document.querySelectorAll('input[name="anomalyFactors"]:checked')).map(el => el.value);
const remark = form.querySelector('textarea').value;
// 表单验证 - 仅在"调查中"状态下需要选择异常监测因素
if (status === '调查中' && factors.length === 0) {
alert('请至少选择一个异常监测因素');
return;
}
if (!remark.trim()) {
alert('请填写备注信息');
return;
}
if (status === '通过') {
const fileInput = form.querySelector('input[type="file"]');
if (fileInput.files.length === 0) {
alert('选择"通过"状态时，请上传书面证明材料');
return;
}
}
// 模拟提交
alert('异常监测记录已提交，状态：' + status);
closeAnomalyModal();
}
// 点击弹窗外部关闭
document.getElementById('anomalyModal').addEventListener('click', function(e) {
if (e.target === this) {
closeAnomalyModal();
}
});
document.getElementById('verificationModal').addEventListener('click', function(e) {
if (e.target === this) {
closeVerificationModal();
}
});
</script>
</body>
</html>
index.html
index.html