feat: 健康体检管理端新增员工体检大表与冠脉CTA体检分组（检后新增员工体检大表页，三层合并表头95列含重点项目85列与异常红色高亮、冻结前三列，个人体检数据档案页整体替换照搬该大表；检前/检中/检后侧边栏各新增冠脉CTA体检二级分组共复刻8个页面，医院承检范围/单位计划管理/预约跟踪/单位预约统计/CTA报告（专业报告版式弹窗含钙化积分与CAD-RADS）/CTA统计，特殊人员配置下冠脉CTA体检人员页挪入新分组；检后新增单位体检费用统计页含单位/部门TAB与员工费用明细及项目列表二层弹窗；单位体检人数统计新增受检率/检出率/患病率三列带公式气泡并移除大病人数列；20+检后/13检中/21检前页面侧边栏统一重建，首页站点地图同步新增入口，CHANGELOG记录）
This commit is contained in:
liuyunqin
@@ -214,6 +214,8 @@ const SITE_MAP = [
|
||||
{ file:'pre-special-gastro.html', label:'胃肠镜人员配置' },
|
||||
{ file:'pre-gastro-hospital-scope.html', label:'胃肠镜医院承检范围配置' },
|
||||
{ file:'pre-gastro-plan-mgmt.html', label:'胃肠镜单位体检计划管理' },
|
||||
{ file:'pre-cta-hospital-scope.html', label:'冠脉CTA医院承检范围配置' },
|
||||
{ file:'pre-cta-plan-mgmt.html', label:'冠脉CTA单位体检计划管理' },
|
||||
{ file:'pre-special-cta.html', label:'冠脉CTA体检人员' },
|
||||
{ file:'pre-special-hospital.html', label:'指定员工体检医院' },
|
||||
{ file:'mid-appointment-track.html', label:'员工预约跟踪' },
|
||||
@@ -226,8 +228,11 @@ const SITE_MAP = [
|
||||
{ file:'mid-gastro-appointment-track.html', label:'员工预约跟踪（胃肠镜）' },
|
||||
{ file:'mid-gastro-unit-appointment.html', label:'单位预约统计（胃肠镜）' },
|
||||
{ file:'mid-gastro-questionnaire.html', label:'胃肠镜问卷信息' },
|
||||
{ file:'mid-cta-appointment-track.html', label:'员工预约跟踪（冠脉CTA）' },
|
||||
{ file:'mid-cta-unit-appointment.html', label:'单位预约统计（冠脉CTA）' },
|
||||
{ file:'mid-unit-expected.html', label:'签约单位应检人数' },
|
||||
{ file:'post-unit-count.html', label:'单位体检人数统计' },
|
||||
{ file:'post-unit-cost-stat.html', label:'单位体检费用统计' },
|
||||
{ file:'post-hospital-count.html', label:'医院体检人数统计' },
|
||||
{ file:'post-doctor-count.html', label:'医生检查人数统计' },
|
||||
{ file:'post-item-stat.html', label:'医院体检项目统计' },
|
||||
@@ -236,7 +241,10 @@ const SITE_MAP = [
|
||||
{ file:'post-contracted-hospital.html', label:'签约医院人数统计' },
|
||||
{ file:'post-key-indicator-stat.html', label:'重点指标异常统计' },
|
||||
{ file:'post-gastro-stat.html', label:'胃肠镜体检统计' },
|
||||
{ file:'post-cta-report.html', label:'冠脉CTA体检报告' },
|
||||
{ file:'post-cta-stat.html', label:'冠脉CTA体检统计' },
|
||||
{ file:'post-report-employee.html', label:'常规体检报告' },
|
||||
{ file:'post-employee-master.html', label:'员工体检大表' },
|
||||
{ file:'post-illness-personnel.html', label:'大病人员信息' },
|
||||
{ file:'post-indicator-notify.html', label:'指标异常通知' },
|
||||
{ file:'post-report-gastro.html', label:'胃肠镜体检报告' },
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 个人体检数据 | 健康CQ原型</title>
|
||||
<title>健康体检 - 个人体检数据（员工体检大表） | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
@@ -18,14 +18,14 @@
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
@@ -41,6 +41,9 @@
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
@@ -53,30 +56,43 @@
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
.table-card__content table{white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
thead th{background:#FAFAFA;padding:10px 14px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border:1px solid var(--border);white-space:nowrap;}
|
||||
/* 三层表头：一级分类 / 二级分类 */
|
||||
thead th.lvl1{background:#F0F5FF;color:var(--primary);text-align:center;font-weight:600;}
|
||||
thead th.lvl2{background:#F5F7FA;color:var(--text-secondary);text-align:center;font-weight:500;}
|
||||
thead th.item{background:#fff;color:var(--text-primary);text-align:center;font-weight:500;}
|
||||
/* 冻结前三列 */
|
||||
tbody td{padding:12px 14px;font-size:var(--font-sm);color:var(--text-primary);border:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td.item{text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:1px solid var(--border);}
|
||||
tbody tr:hover td{background:#F8FBFF;}
|
||||
.th-base{position:sticky;background:#FAFAFA;z-index:3;}
|
||||
.td-base{position:sticky;background:#fff;z-index:2;}
|
||||
tr:hover .td-base{background:#F8FBFF;}
|
||||
.col0{left:0;width:56px;min-width:56px;max-width:56px;}
|
||||
.col1{left:56px;width:110px;min-width:110px;max-width:110px;}
|
||||
.col2{left:166px;width:120px;min-width:120px;max-width:120px;}
|
||||
.th-base.col0,.th-base.col1,.th-base.col2{z-index:5;}
|
||||
.res-abn{color:var(--danger);font-weight:600;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 轻提示 */
|
||||
.toast{position:fixed;top:76px;left:50%;transform:translateX(-50%) translateY(-16px);background:#fff;box-shadow:var(--shadow-md);border-radius:var(--radius-sm);padding:10px 20px;font-size:var(--font-sm);color:var(--text-primary);opacity:0;pointer-events:none;transition:all .25s;z-index:1000;display:flex;align-items:center;gap:8px;}
|
||||
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
|
||||
.toast svg{flex-shrink:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -117,34 +133,35 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份</label>
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:90px;">
|
||||
<option>2026</option><option>2025</option><option>2024</option><option>2023</option>
|
||||
<option>2026</option><option>2025</option><option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option value="">全部</option><option>公司机关</option><option>采油一厂</option><option>采油二厂</option>
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>请选择</option><option>公司机关</option><option>第一采油厂</option><option>第二采油厂</option><option>公共事务中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名</label>
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号</label>
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:160px;min-width:unset;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div id="actionBar" style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
@@ -155,53 +172,180 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<!-- 数据表格（三层合并表头） -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">个人体检数据</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">序号</th><th rowspan="2">姓名</th><th rowspan="2">员工编号</th><th rowspan="2">性别</th><th rowspan="2">年龄</th><th rowspan="2">单位</th><th rowspan="2">部门</th><th rowspan="2">体检日期</th><th rowspan="2">体检医院</th>
|
||||
<th colspan="10" style="text-align:center;">重点指标体检结果</th>
|
||||
<th rowspan="2">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>身高cm</th><th>体重kg</th><th>BMI</th><th>血压mmHg</th><th>总胆固醇mmol/L</th><th>高密度胆固醇mmol/L</th><th>低密度胆固醇mmol/L</th><th>甘油三酯mmol/L</th><th>血糖mmol/L</th><th>尿酸μmol/L</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>王旭</td><td>342423</td><td>男</td><td>45</td><td>公司机关</td><td>办公室</td><td>2026-03-21</td><td>宝石花医院</td><td>170</td><td>180</td><td><span class="tag tag-red">32(肥胖)</span></td><td>86/140</td><td>3.66</td><td>0.90</td><td>2.08</td><td>0.91</td><td>13.05</td><td>283</td><td><span class="link">体检详情</span></td></tr>
|
||||
<tr><td>2</td><td>刘艳</td><td>342423</td><td>男</td><td>45</td><td>公司机关</td><td>办公室</td><td>2026-03-21</td><td>宝石花医院</td><td>170</td><td>180</td><td><span class="tag tag-red">32(肥胖)</span></td><td>86/140</td><td>3.66</td><td>0.90</td><td>2.08</td><td>0.91</td><td>13.05</td><td>283</td><td><span class="link">体检详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-card__title">员工体检大表 <span id="keyCount" class="tag tag-blue" style="margin-left:8px;"></span></div>
|
||||
</div>
|
||||
<div class="table-card__content" id="bigTable"></div>
|
||||
<div class="pagination">
|
||||
<span>显示 10 条，共 243 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<span id="pageTotal">共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 轻提示 -->
|
||||
<div class="toast" id="toast">
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="7.5" r="6.5" fill="#52C41A"/><path d="M4.6 7.7l2 2 3.8-4" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span id="toastText"></span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
/* 基本信息列 */
|
||||
var BASE_COLS=[
|
||||
{key:'idx',label:'序号'},{key:'name',label:'姓名'},{key:'empNo',label:'员工编号'},
|
||||
{key:'gender',label:'性别'},{key:'age',label:'年龄'},{key:'idCard',label:'身份证号'},
|
||||
{key:'unit',label:'单位'},{key:'dept',label:'部门'},{key:'hospital',label:'体检医院'},
|
||||
{key:'checkDate',label:'体检日期'}
|
||||
];
|
||||
/* 体检基本项三层结构：一级分类 -> 二级分类(项目分类) -> 重点项目（是否重点指标=是）
|
||||
数据取自线上系统 console.cqygjk.com/medical/standard/uniinfo 重点项目（是否重点指标=是）
|
||||
编码体系 CQxx.yy，编码前缀为二级分类。为控制表宽，每个二级分类下的重点项目全部展开为列。 */
|
||||
var ITEM_TREE=[
|
||||
{lvl1:'血液检验',lvl2:[
|
||||
{name:'血常规',code:'CQ01.01',items:['红细胞','血小板数目','白细胞','血红蛋白']},
|
||||
{name:'尿常规',code:'CQ02.01',items:['尿糖','酮体','隐血','尿蛋白','胆红素','白细胞','亚硝酸盐','红细胞','上皮细胞']},
|
||||
{name:'肝功能',code:'CQ03.01',items:['碱性磷酸酶','总蛋白','ALT','总胆红素','AST','白蛋白','γ-谷氨酰转移酶','球蛋白','白球比','直接胆红素','间接胆红素','总胆汁酸','胆碱脂酶']},
|
||||
{name:'肾功能2',code:'CQ04.01',items:['尿酸','肌酐','尿素','eGFR','胱抑素-C','渗透压','尿微量白蛋白']},
|
||||
{name:'血脂四项',code:'CQ05.01',items:['总胆固醇','甘油三酯','高密度脂蛋白胆固醇','高密度脂蛋白胆固醇2','低密度脂蛋白胆固醇','极低密度脂蛋白','脂蛋白a','ApoA1','ApoB']},
|
||||
{name:'心肌酶谱',code:'CQ06.01',items:['肌酸激酶','乳酸脱氢酶','天门冬氨酸氨基转移酶同工酶','α-羟丁酸脱氢酶','肌酸激酶同工酶MB']},
|
||||
{name:'电解质检测',code:'CQ09.01',items:['氯','无机磷','镁','钙']}
|
||||
]},
|
||||
{lvl1:'肿瘤标志物',lvl2:[
|
||||
{name:'肿瘤标志物检测M',code:'CQ07',items:['癌胚抗原','甲胎蛋白','CA19-9','CA242','CA72-4','神经元特异性烯醇化酶','细胞角蛋白19片段','鳞状细胞癌相关抗原','CA15-3','CA50','肿瘤特异性生长因子','总前列腺特异性抗原','游离前列腺特异性抗原','细胞角蛋白','表皮生长因子','CC16','细胞角蛋白20片段','p53蛋白','血管内皮生长因子','CA125','HE4','胃蛋白酶原比值比值']},
|
||||
{name:'糖化血红蛋白',code:'CQ13',items:['糖化血红蛋白(生化检测)','糖化血红蛋白HPLC法定性']},
|
||||
{name:'血糖',code:'CQ10',items:['血糖测定','餐后2小时血糖','糖化白蛋白','胰岛素']}
|
||||
]},
|
||||
{lvl1:'专科与专项检查',lvl2:[
|
||||
{name:'幽门螺杆菌检测',code:'CQ08',items:['幽门螺旋杆菌抗体定量','碳13呼气试验']},
|
||||
{name:'同型半胱氨酸',code:'CQ11',items:['同型半胱氨酸']},
|
||||
{name:'淀粉酶',code:'CQ12',items:['淀粉酶']},
|
||||
{name:'Homa-B',code:'CQ14',items:['Homa-B']},
|
||||
{name:'Homa-IR',code:'CQ14',items:['Homa-IR']}
|
||||
]}
|
||||
];
|
||||
/* 员工行：基本信息 + 各项目结果；结果对象 {v:值,a:是否异常} */
|
||||
/* 员工行：基本信息 + 各项目结果 {值[,异常1]}；未列出的项目按分类默认"未见异常/-"填充 */
|
||||
var MASTER_ROWS=[
|
||||
{idx:1,name:'王旭',empNo:'342423',gender:'男',age:41,idCard:'430626198502560029',unit:'公司机关',dept:'办公室',hospital:'延安医院',checkDate:'2026-03-10',
|
||||
r:{'红细胞':['4.80×10¹²/L'],'血小板数目':['220×10⁹/L'],'白细胞':['6.2×10⁹/L'],'血红蛋白':['145g/L'],
|
||||
'尿糖':['阴性'],'酮体':['阴性'],'隐血':['阴性'],'尿蛋白':['阴性'],'胆红素':['阴性'],'尿常规|白细胞':['阴性'],'亚硝酸盐':['阴性'],'尿常规|红细胞':['阴性'],'上皮细胞':['阴性'],
|
||||
'碱性磷酸酶':['76U/L'],'总蛋白':['72.0g/L'],'ALT':['25U/L'],'总胆红素':['12.5μmol/L'],'AST':['22U/L'],'白蛋白':['45.0g/L'],'γ-谷氨酰转移酶':['38U/L'],'球蛋白':['27.0g/L'],'白球比':['1.67'],'直接胆红素':['4.2μmol/L'],'间接胆红素':['8.3μmol/L'],'总胆汁酸':['5.2μmol/L'],'胆碱脂酶':['8200U/L'],
|
||||
'尿酸':['428μmol/L',1],'肌酐':['78μmol/L'],'尿素':['5.6mmol/L'],'eGFR':['92.0(正常)'],'胱抑素-C':['0.9mg/L'],'渗透压':['300mOsm/L'],'尿微量白蛋白':['12.0mg/L'],
|
||||
'总胆固醇':['4.60mmol/L'],'甘油三酯':['1.80mmol/L',1],'高密度脂蛋白胆固醇':['1.25mmol/L'],'高密度脂蛋白胆固醇2':['0.42mmol/L'],'低密度脂蛋白胆固醇':['2.80mmol/L'],'极低密度脂蛋白':['0.35mmol/L'],'脂蛋白a':['120mg/L'],'ApoA1':['1.20g/L'],'ApoB':['0.90g/L'],
|
||||
'肌酸激酶':['120U/L'],'乳酸脱氢酶':['180U/L'],'天门冬氨酸氨基转移酶同工酶':['18U/L'],'α-羟丁酸脱氢酶':['145U/L'],'肌酸激酶同工酶MB':['16U/L'],
|
||||
'氯':['102.0mmol/L'],'无机磷':['1.10mmol/L'],'镁':['0.88mmol/L'],'钙':['2.35mmol/L'],
|
||||
'癌胚抗原':['<1.0ng/mL',1],'甲胎蛋白':['<7.0ng/mL',1],'CA19-9':['<12.0U/mL',1],'CA242':['<1.1U/mL',1],'CA72-4':['<0.3U/mL',1],'神经元特异性烯醇化酶':['<5.0ng/mL',1],'细胞角蛋白19片段':['<1.0ng/mL',1],'鳞状细胞癌相关抗原':['<0.1ng/mL',1],'CA15-3':['<2.0U/mL',1],'CA50':['<1.0U/mL',1],'肿瘤特异性生长因子':['25.0U/mL'],'总前列腺特异性抗原':['0.80ng/mL'],'游离前列腺特异性抗原':['0.20ng/mL'],'细胞角蛋白':['<1.0ng/mL',1],'表皮生长因子':['<0.5U/mL',1],'CC16':['<0.1U/mL',1],'细胞角蛋白20片段':['<0.1ng/mL',1],'p53蛋白':['<0.5U/mL',1],'血管内皮生长因子':['<10.0pg/mL',1],'CA125':['<2.0U/mL',1],'HE4':['25.0pmol/L'],'胃蛋白酶原比值比值':['6.5'],
|
||||
'糖化血红蛋白(生化检测)':['5.4%'],'糖化血红蛋白HPLC法定性':['5.6%'],
|
||||
'血糖测定':['5.3mmol/L'],'餐后2小时血糖':['6.8mmol/L'],'糖化白蛋白':['13.5%'],'胰岛素':['8.5μIU/mL'],
|
||||
'幽门螺旋杆菌抗体定量':['<5.0AU/mL',1],'碳13呼气试验':['阴性'],
|
||||
'同型半胱氨酸':['14.5μmol/L'],'淀粉酶':['65U/L'],'Homa-B':['85.0'],'Homa-IR':['1.8']}},
|
||||
{idx:2,name:'张丽娟',empNo:'324321',gender:'女',age:36,idCard:'430626198502560030',unit:'公司机关',dept:'办公室',hospital:'延安医院',checkDate:'2026-03-10',
|
||||
r:{'红细胞':['4.30×10¹²/L'],'血小板数目':['210×10⁹/L'],'白细胞':['5.8×10⁹/L'],'血红蛋白':['128g/L'],
|
||||
'碱性磷酸酶':['68U/L'],'总蛋白':['70.0g/L'],'ALT':['18U/L'],'总胆红素':['10.2μmol/L'],'AST':['20U/L'],'白蛋白':['43.0g/L'],'γ-谷氨酰转移酶':['25U/L'],'球蛋白':['27.0g/L'],'白球比':['1.59'],'直接胆红素':['3.1μmol/L'],'间接胆红素':['7.1μmol/L'],'总胆汁酸':['4.0μmol/L'],'胆碱脂酶':['7600U/L'],
|
||||
'尿酸':['298μmol/L'],'肌酐':['62μmol/L'],'尿素':['4.8mmol/L'],'eGFR':['108.0(正常)'],'胱抑素-C':['0.8mg/L'],'渗透压':['298mOsm/L'],'尿微量白蛋白':['8.0mg/L'],
|
||||
'总胆固醇':['4.20mmol/L'],'甘油三酯':['0.90mmol/L'],'高密度脂蛋白胆固醇':['1.42mmol/L'],'高密度脂蛋白胆固醇2':['0.45mmol/L'],'低密度脂蛋白胆固醇':['2.30mmol/L'],'极低密度脂蛋白':['0.28mmol/L'],'脂蛋白a':['60mg/L'],'ApoA1':['1.45g/L'],'ApoB':['0.75g/L'],
|
||||
'肌酸激酶':['95U/L'],'乳酸脱氢酶':['165U/L'],'天门冬氨酸氨基转移酶同工酶':['15U/L'],'α-羟丁酸脱氢酶':['130U/L'],'肌酸激酶同工酶MB':['12U/L'],
|
||||
'氯':['101.0mmol/L'],'无机磷':['1.05mmol/L'],'镁':['0.85mmol/L'],'钙':['2.30mmol/L'],
|
||||
'糖化血红蛋白(生化检测)':['5.2%'],'糖化血红蛋白HPLC法定性':['5.3%'],
|
||||
'血糖测定':['4.9mmol/L'],'餐后2小时血糖':['6.1mmol/L'],'糖化白蛋白':['12.0%'],'胰岛素':['6.8μIU/mL'],
|
||||
'碳13呼气试验':['阴性'],
|
||||
'同型半胱氨酸':['10.2μmol/L'],'淀粉酶':['58U/L'],'Homa-B':['92.0'],'Homa-IR':['1.2']}},
|
||||
{idx:3,name:'石维国',empNo:'50643889',gender:'男',age:47,idCard:'654201197904060414',unit:'第一采油厂',dept:'采油作业一区',hospital:'唐都医院',checkDate:'2026-04-02',
|
||||
r:{'红细胞':['5.00×10¹²/L'],'血小板数目':['240×10⁹/L'],'白细胞':['7.1×10⁹/L'],'血红蛋白':['152g/L'],
|
||||
'尿蛋白':['±',1],'隐血':['±',1],
|
||||
'碱性磷酸酶':['88U/L'],'总蛋白':['74.0g/L'],'ALT':['42U/L'],'总胆红素':['15.8μmol/L'],'AST':['35U/L'],'白蛋白':['46.0g/L'],'γ-谷氨酰转移酶':['75U/L',1],'球蛋白':['28.0g/L'],'白球比':['1.64'],'直接胆红素':['5.0μmol/L'],'间接胆红素':['10.8μmol/L'],'总胆汁酸':['8.5μmol/L'],'胆碱脂酶':['9500U/L'],
|
||||
'尿酸':['460μmol/L',1],'肌酐':['88μmol/L'],'尿素':['6.8mmol/L'],'eGFR':['86.0(正常)'],'胱抑素-C':['1.0mg/L'],'渗透压':['305mOsm/L'],'尿微量白蛋白':['28.0mg/L',1],
|
||||
'总胆固醇':['5.60mmol/L',1],'甘油三酯':['2.40mmol/L',1],'高密度脂蛋白胆固醇':['0.98mmol/L',1],'高密度脂蛋白胆固醇2':['0.31mmol/L'],'低密度脂蛋白胆固醇':['3.70mmol/L',1],'极低密度脂蛋白':['0.52mmol/L',1],'脂蛋白a':['180mg/L'],'ApoA1':['1.05g/L'],'ApoB':['1.12g/L',1],
|
||||
'肌酸激酶':['165U/L'],'乳酸脱氢酶':['195U/L'],'天门冬氨酸氨基转移酶同工酶':['22U/L'],'α-羟丁酸脱氢酶':['160U/L'],'肌酸激酶同工酶MB':['20U/L'],
|
||||
'氯':['103.0mmol/L'],'无机磷':['1.15mmol/L'],'镁':['0.90mmol/L'],'钙':['2.42mmol/L'],
|
||||
'碳13呼气试验':['阳性',1],'幽门螺旋杆菌抗体定量':['<5.0AU/mL',1],
|
||||
'癌胚抗原':['<1.0ng/mL',1],'甲胎蛋白':['<7.0ng/mL',1],'CA19-9':['<12.0U/mL',1],'CA72-4':['<0.3U/mL',1],'神经元特异性烯醇化酶':['<5.0ng/mL',1],'鳞状细胞癌相关抗原':['<0.1ng/mL',1],'CA15-3':['<2.0U/mL',1],'CA50':['<1.0U/mL',1],'肿瘤特异性生长因子':['32.0U/mL'],'总前列腺特异性抗原':['1.20ng/mL'],'游离前列腺特异性抗原':['0.28ng/mL'],'细胞角蛋白':['<1.0ng/mL',1],'表皮生长因子':['<0.5U/mL',1],'CC16':['<0.1U/mL',1],'细胞角蛋白20片段':['<0.1ng/mL',1],'p53蛋白':['<0.5U/mL',1],'血管内皮生长因子':['<10.0pg/mL',1],'CA125':['<2.0U/mL',1],'CA242':['<1.1U/mL',1],'细胞角蛋白19片段':['<1.0ng/mL',1],'HE4':['32.0pmol/L'],'胃蛋白酶原比值比值':['7.8'],
|
||||
'糖化血红蛋白(生化检测)':['6.0%'],'糖化血红蛋白HPLC法定性':['6.1%'],
|
||||
'血糖测定':['6.3mmol/L',1],'餐后2小时血糖':['8.2mmol/L',1],'糖化白蛋白':['14.8%'],'胰岛素':['12.5μIU/mL'],
|
||||
'同型半胱氨酸':['18.5μmol/L',1],'淀粉酶':['72U/L'],'Homa-B':['78.0'],'Homa-IR':['2.9',1]}},
|
||||
{idx:4,name:'李莉',empNo:'80224641',gender:'女',age:55,idCard:'612628197104150027',unit:'公共事务中心',dept:'长庆宾馆',hospital:'泾河医院',checkDate:'2026-04-08',
|
||||
r:{'红细胞':['4.10×10¹²/L'],'血小板数目':['190×10⁹/L'],'白细胞':['6.0×10⁹/L'],'血红蛋白':['118g/L',1],
|
||||
'碱性磷酸酶':['72U/L'],'总蛋白':['68.0g/L'],'ALT':['22U/L'],'总胆红素':['11.0μmol/L'],'AST':['24U/L'],'白蛋白':['42.0g/L'],'γ-谷氨酰转移酶':['30U/L'],'球蛋白':['26.0g/L'],'白球比':['1.62'],'直接胆红素':['3.5μmol/L'],'间接胆红素':['7.5μmol/L'],'总胆汁酸':['5.0μmol/L'],'胆碱脂酶':['8000U/L'],
|
||||
'尿酸':['276μmol/L'],'肌酐':['58μmol/L'],'尿素':['5.2mmol/L'],'eGFR':['102.0(正常)'],'胱抑素-C':['0.9mg/L'],'渗透压':['296mOsm/L'],'尿微量白蛋白':['10.0mg/L'],
|
||||
'总胆固醇':['5.00mmol/L'],'甘油三酯':['1.40mmol/L'],'高密度脂蛋白胆固醇':['1.18mmol/L'],'高密度脂蛋白胆固醇2':['0.38mmol/L'],'低密度脂蛋白胆固醇':['3.10mmol/L'],'极低密度脂蛋白':['0.30mmol/L'],'脂蛋白a':['90mg/L'],'ApoA1':['1.32g/L'],'ApoB':['0.88g/L'],
|
||||
'肌酸激酶':['88U/L'],'乳酸脱氢酶':['172U/L'],'天门冬氨酸氨基转移酶同工酶':['16U/L'],'α-羟丁酸脱氢酶':['138U/L'],'肌酸激酶同工酶MB':['13U/L'],
|
||||
'氯':['100.0mmol/L'],'无机磷':['1.02mmol/L'],'镁':['0.82mmol/L'],'钙':['2.28mmol/L'],
|
||||
'癌胚抗原':['<1.0ng/mL',1],'甲胎蛋白':['<7.0ng/mL',1],'CA19-9':['<12.0U/mL',1],'CA242':['<1.1U/mL',1],'CA72-4':['<0.3U/mL',1],'神经元特异性烯醇化酶':['<5.0ng/mL',1],'细胞角蛋白19片段':['<1.0ng/mL',1],'鳞状细胞癌相关抗原':['<0.1ng/mL',1],'CA15-3':['<2.0U/mL',1],'CA50':['<1.0U/mL',1],'肿瘤特异性生长因子':['28.0U/mL'],'总前列腺特异性抗原':['<0.01ng/mL',1],'游离前列腺特异性抗原':['<0.01ng/mL',1],'细胞角蛋白':['<1.0ng/mL',1],'表皮生长因子':['<0.5U/mL',1],'CC16':['<0.1U/mL',1],'细胞角蛋白20片段':['<0.1ng/mL',1],'p53蛋白':['<0.5U/mL',1],'血管内皮生长因子':['<10.0pg/mL',1],'CA125':['12.5U/mL'],'HE4':['42.0pmol/L',1],'胃蛋白酶原比值比值':['12.5',1],
|
||||
'糖化血红蛋白(生化检测)':['5.5%'],'糖化血红蛋白HPLC法定性':['5.7%'],
|
||||
'血糖测定':['5.6mmol/L'],'餐后2小时血糖':['7.0mmol/L'],'糖化白蛋白':['13.0%'],'胰岛素':['7.8μIU/mL'],
|
||||
'幽门螺旋杆菌抗体定量':['35.0AU/mL',1],'碳13呼气试验':['阴性'],
|
||||
'同型半胱氨酸':['12.8μmol/L'],'淀粉酶':['60U/L'],'Homa-B':['88.0'],'Homa-IR':['1.5']}}
|
||||
];
|
||||
/* 分类默认值：未显式给出结果的项目按分类填充（重点定性项默认阴性） */
|
||||
var CAT_DEFAULTS={
|
||||
'血常规':['未见异常'],'尿常规':['阴性'],'肝功能':['-'],'肾功能2':['-'],'血脂':['-'],'心肌酶谱':['-'],
|
||||
'电解质检测':['-'],'肿瘤标志物检测M':['-'],'糖化血红蛋白':['-'],'血糖':['-'],'幽门螺杆菌检测':['阴性'],
|
||||
'同型半胱氨酸':['-'],'淀粉酶':['-'],'Homa-B':['-'],'Homa-IR':['-']
|
||||
};
|
||||
/* 展开所有项目列：[{name,cat}]（保持顺序） */
|
||||
function allItems(){
|
||||
var arr=[];
|
||||
ITEM_TREE.forEach(function(g){g.lvl2.forEach(function(s){s.items.forEach(function(it){arr.push({name:it,cat:s.name});});});});
|
||||
return arr;
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
function buildHead(){
|
||||
/* 行1：基本信息(rowspan=3) + 一级分类(colspan)；行2：二级分类(colspan)；行3：具体项目 */
|
||||
var r1=[],r2=[],r3=[];
|
||||
BASE_COLS.forEach(function(c,i){
|
||||
var cls='th-base'+(i<3?' col'+i:'');
|
||||
r1.push('<th class="'+cls+'" rowspan="3">'+c.label+'</th>');
|
||||
});
|
||||
ITEM_TREE.forEach(function(g){
|
||||
var cnt=0;g.lvl2.forEach(function(s){cnt+=s.items.length;});
|
||||
r1.push('<th class="lvl1" colspan="'+cnt+'">'+g.lvl1+'</th>');
|
||||
g.lvl2.forEach(function(s){
|
||||
r2.push('<th class="lvl2" colspan="'+s.items.length+'">'+s.name+'</th>');
|
||||
s.items.forEach(function(it){r3.push('<th class="item">'+it+'</th>');});
|
||||
});
|
||||
});
|
||||
return '<table><thead><tr>'+r1.join('')+'</tr><tr>'+r2.join('')+'</tr><tr>'+r3.join('')+'</tr></thead>';
|
||||
}
|
||||
function buildBody(){
|
||||
var items=allItems();
|
||||
var baseKeys=['idx','name','empNo','gender','age','idCard','unit','dept','hospital','checkDate'];
|
||||
var rows=MASTER_ROWS.map(function(r){
|
||||
var cells='';
|
||||
baseKeys.forEach(function(k,i){
|
||||
var cls='td-base'+(i<3?' col'+i:'');
|
||||
cells+='<td class="'+cls+'">'+r[k]+'</td>';
|
||||
});
|
||||
items.forEach(function(col){
|
||||
var val=r.r[col.cat+'|'+col.name]||r.r[col.name];
|
||||
if(!val)val=[(CAT_DEFAULTS[col.cat]||['-'])[0]];
|
||||
cells+='<td class="item'+(val[1]?' res-abn':'')+'">'+val[0]+'</td>';
|
||||
});
|
||||
return '<tr>'+cells+'</tr>';
|
||||
}).join('');
|
||||
return '<tbody>'+rows+'</tbody></table>';
|
||||
}
|
||||
function renderBigTable(){
|
||||
document.getElementById('bigTable').innerHTML=buildHead()+buildBody();
|
||||
document.getElementById('pageTotal').textContent='共 '+MASTER_ROWS.length+' 条';
|
||||
var k=document.getElementById('keyCount');
|
||||
if(k)k.textContent='重点项目 '+allItems().length+' 列';
|
||||
}
|
||||
var toastTimer=null;
|
||||
function showToast(msg){
|
||||
document.getElementById('toastText').textContent=msg;
|
||||
var t=document.getElementById('toast');
|
||||
t.classList.add('show');clearTimeout(toastTimer);
|
||||
toastTimer=setTimeout(function(){t.classList.remove('show');},2400);
|
||||
}
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
while(sub){sub.classList.add('open');sub=sub.parentElement.closest('.sidebar-subgroup');}
|
||||
})();
|
||||
renderBigTable();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,5 +1,20 @@
|
||||
# 健康体检模块 CHANGELOG
|
||||
|
||||
## [Unreleased] 2026-09-07
|
||||
|
||||
### Added
|
||||
- `post-employee-master.html`：新增"员工体检大表"页面（检后/常规体检分组，位于常规体检报告之下）。筛选条件：体检年份、单位部门、姓名、员工编号、身份证号（含查询/重置）；操作按钮：导出列表数据、查看导出任务；列表为三层合并表头大表——基本信息 10 列（序号/姓名/员工编号/性别/年龄/身份证号/单位/部门/体检医院/体检日期，rowspan=3 且前三列冻结便于横向浏览），其后为体检项目列共 85 列，按线上系统"体检基本项"中是否重点指标=是的真实重点项目构建（2026-09-07 对齐 console.cqygjk.com/medical/standard/uniinfo）：一级分类 3 组（血液检验/肿瘤标志物/专科与专项检查）colspan 合并、二级分类 15 个与线上项目分类一致（血常规、尿常规、肝功能、肾功能2、血脂四项、心肌酶谱、电解质检测、肿瘤标志物检测M、糖化血红蛋白、血糖、幽门螺杆菌检测、同型半胱氨酸、淀粉酶、Homa-B、Homa-IR）colspan 合并、第三层为具体重点项目，每格显示检查结果（定量项带单位、定性项阴性/±、eGFR 带正常标注），异常值红色高亮（如尿酸 428↑、甘油三酯 1.80↑、HE4 42.0↑、尿蛋白 ±、碳13 阳性等，血常规与尿常规同名项目白细胞/红细胞通过分类前缀键区分取值）；卡片标题附"重点项目 85 列"标签，表头网格 95 列与 4 行数据对齐已校验；20 个检后页面侧边栏"常规体检"分组及首页站点地图同步新增入口
|
||||
- 检后侧边栏新增"冠脉CTA体检"二级菜单（位于胃肠镜体检分组之后），参照胃肠镜体检分组复刻两个页面：`post-cta-report.html`（冠脉CTA体检报告，复刻自胃肠镜体检报告页并移除肠镜对应内容，报告缩略图列整体去除、不设图片上传编辑入口，列表通过操作列查看下载。操作列为查看报告/下载报告/下载影像：查看报告弹窗重做为专业报告版式——患者信息带、检查条件（心率/β阻滞剂/冠脉分布类型）、冠状动脉钙化积分（Agatston 分值及轻中重评价）、冠脉分段所见表（LM、LAD 近/中段、D1、LCX 近/远段、OM、RCA 近/中远段、PDA 共 10 行，含斑块性质标签、彩色狭窄分级与描述）、心脏及冠脉外所见、结论与 CAD-RADS 分级卡（0/2/3 三档示例病例按员工编号确定性分布）、建议及报告/审核医师签名，无报告行显示空状态；下载报告为同结构纯文本（真实生成 .txt 文件），下载影像输出文件清单）、`post-cta-stat.html`（冠脉CTA体检统计，复刻自胃肠镜体检统计页，仅页面与卡片标题适配，统计列不变），交互逻辑与筛选分页一致；20 个检后页面侧边栏统一新增该分组（含两个新页面自身的 active 指向），首页站点地图同步新增两个入口
|
||||
- 检中侧边栏新增"冠脉CTA体检"二级菜单（位于胃肠镜体检分组之后），参照胃肠镜体检分组复刻两个页面：`mid-cta-appointment-track.html`（员工预约跟踪，复刻自胃肠镜同名页，浏览器标题"（胃肠镜）"改"（冠脉CTA）"、示例体检计划"2026年度胃肠镜专项体检"改"2026年度冠脉CTA专项体检"）、`mid-cta-unit-appointment.html`（单位预约统计，复刻自胃肠镜同名页，仅浏览器标题适配），交互逻辑与数据口径不变；13 个检中页面侧边栏统一新增该分组（含两个新页面自身的 active 指向），首页站点地图同步新增两个入口
|
||||
- 检前侧边栏新增"冠脉CTA体检"二级菜单（位于胃肠镜体检分组之后），参照胃肠镜体检分组结构复刻两个页面：`pre-cta-hospital-scope.html`（医院承检范围配置，复刻自胃肠镜同名页，页面标题/表格标题"胃肠镜体检承检范围列表"改"冠脉CTA体检承检范围列表"、示例医院"长安胃肠镜医院"改"长安心血管医院"）、`pre-cta-plan-mgmt.html`（单位体检计划管理，复刻自胃肠镜同名页，"胃肠镜体检计划"相关标题/抽屉/详情弹窗与示例计划名称统一改"冠脉CTA体检计划/员工冠脉CTA体检"），交互逻辑与数据口径不变；原"常规体检/特殊人员配置"下的"冠脉CTA体检人员"（`pre-special-cta.html`）挪入该分组；21 个检前页面侧边栏统一重建（新增分组、移除旧入口、三页 active 指向修正），首页站点地图同步新增两个入口
|
||||
- `post-unit-cost-stat.html`：新增"单位体检费用统计"页面（检后/常规体检/体检统计汇总分组，位于单位体检人数统计之下）。页面顶部二级单位/三级单位 TAB（切至三级单位显示部门列，沿用人数统计页交互）；筛选条件：体检年份、单位；操作栏：导出列表数据、查看导出任务；列表列：序号、单位、部门（三级单位可见）、总人数、已体检人数、计划总体检费用（元）、实际总体检费用（元）、体检年份、操作（员工费用明细），按年份分行共 6 条模拟数据，费用数字不做颜色强调；"员工费用明细"弹窗展示该单位该年份的员工费用列表（序号/姓名/员工编号/部门/体检日期/体检医院/应检项目数/已检项目数/计划体检费用/实际体检费用，8 条示例数据按行确定性生成，含合计行），其中应检项目数、已检项目数（附"含未检/弃检 N"灰字注）为蓝色链接，点击打开二层"项目列表"弹窗展示该员工具体项目及对应项目费用（应检视角列出全部项目及应检项目费用、已检视角仅列已检项目及费用，两视角均含体检状态列以已检/未检/弃检标签标注），合计分别等于计划/实际体检费用，四档体检套餐项目费用合计恰与额度档 1000/1500/2500/4000 元一致、主表计划/实际总费用与明细人均口径一致；弹窗支持 ✕/遮罩/Esc 逐层关闭。检后各页面侧边栏"体检统计汇总"分组及首页站点地图同步新增入口
|
||||
|
||||
### Changed
|
||||
- `post-unit-count.html`（单位体检人数统计）：二级单位/三级单位 TAB 共用列表在"未预约人数"与"体检年份"之间新增三列——受检率（实际检查人数/应检人数）、检出率（异常人数/实际检查人数）、患病率（单病种异常人数/实际参加检查人数）），三个表头文字后附圆形问号图标，鼠标悬停弹出黑色气泡显示计算公式（纯 CSS 实现，患病率气泡右对齐防止溢出、图标悬停变主题蓝），示例数据受检率与现有人数字段勾稽一致（3000/8000=37.5%）；同日再移除"大病人数"列——三个 TAB 涉及的单位表与体检医院表（含各自表头与示例数据行）均删除该列，删列后单位表 13 列、医院表 8 列，表头 rowspan/colspan 网格与数据行对齐已校验
|
||||
|
||||
### Changed
|
||||
- `archive-personal.html`（档案/个人体检数据）：页面内容整体照搬"员工体检大表"（post-employee-master.html）——三层合并表头 95 列大表、重点项目 85 列、筛选栏/操作栏/冻结前三列/异常红色高亮及渲染脚本全部一致；仅保留档案域导航上下文（顶栏高亮"档案"、侧边栏为档案菜单且"个人体检数据"处于 active、浏览器标题标注档案域），原"个人体检数据"简表（重点指标体检结果 10 列）被替换
|
||||
|
||||
## [Unreleased] 2026-09-02
|
||||
|
||||
### Changed
|
||||
|
||||
@@ -169,6 +169,16 @@
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -0,0 +1,469 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 员工预约跟踪（冠脉CTA） | 健康CQ原型</title>
|
||||
<style>
|
||||
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#FAFAFA;color:#666;border:1px solid var(--border);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
/* 固定列：前三列 + 最后一列 */
|
||||
.sticky-l1{position:sticky;left:0;z-index:6;min-width:64px;}
|
||||
.sticky-l2{position:sticky;left:64px;z-index:6;min-width:88px;}
|
||||
.sticky-l3{position:sticky;left:152px;z-index:6;min-width:104px;box-shadow:2px 0 6px rgba(0,0,0,0.08);}
|
||||
.sticky-r{position:sticky;right:0;z-index:6;min-width:72px;box-shadow:-2px 0 6px rgba(0,0,0,0.08);}
|
||||
thead .sticky-l1,thead .sticky-l2,thead .sticky-l3,thead .sticky-r{z-index:8;background:#FAFAFA;}
|
||||
tbody .sticky-l1,tbody .sticky-l2,tbody .sticky-l3,tbody .sticky-r{background:#fff;}
|
||||
tbody tr:hover .sticky-l1,tbody tr:hover .sticky-l2,tbody tr:hover .sticky-l3,tbody tr:hover .sticky-r{background:#F8FBFF;}
|
||||
.sticky-l1:not(.sticky-l3):not(.sticky-r),.sticky-l2{box-shadow:none;}
|
||||
/* 详情弹窗 */
|
||||
.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;}
|
||||
.modal-mask.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);width:880px;max-width:92vw;max-height:86vh;display:flex;flex-direction:column;box-shadow:var(--shadow-md);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:28px;height:28px;border:none;background:none;cursor:pointer;color:var(--text-secondary);font-size:18px;line-height:1;border-radius:var(--radius-sm);}
|
||||
.modal__close:hover{color:var(--text-primary);background:#F5F5F5;}
|
||||
.modal__body{padding:20px 24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
.detail-section{margin-bottom:20px;}
|
||||
.detail-section:last-child{margin-bottom:0;}
|
||||
.detail-section__title{font-size:var(--font-sm);font-weight:600;color:var(--primary);margin-bottom:10px;padding-left:8px;border-left:3px solid var(--primary);}
|
||||
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 24px;}
|
||||
.detail-item{display:flex;align-items:baseline;gap:8px;font-size:var(--font-sm);min-width:0;}
|
||||
.detail-item label{color:var(--text-secondary);white-space:nowrap;flex-shrink:0;}
|
||||
.detail-item span{color:var(--text-primary);word-break:break-all;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html">检前</a>
|
||||
<a href="mid-appointment-track.html" class="active">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检中</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-appointment-track.html" class="sidebar-item">员工预约体检跟踪</a>
|
||||
<a href="mid-selected-items.html" class="sidebar-item">已选项目员工信息</a>
|
||||
<a href="mid-participation.html" class="sidebar-item">已参检员工信息</a>
|
||||
<a href="mid-unit-appointment.html" class="sidebar-item">单位预约人数统计</a>
|
||||
<a href="mid-hospital-realtime.html" class="sidebar-item">医院实时预约人数</a>
|
||||
<a href="mid-doctor-realtime.html" class="sidebar-item">医生实时检查情况</a>
|
||||
<a href="mid-hospital-appointment.html" class="sidebar-item">医院预约人数统计</a>
|
||||
<a href="mid-unit-expected.html" class="sidebar-item">签约单位应检人数</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-gastro-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-gastro-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item active">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option selected>2026</option><option>2025</option><option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>公司机关</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检医院：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>延安医院</option><option>泾河医院</option><option>市中心医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:140px;min-width:unset;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:180px;min-width:unset;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>未体检</option><option>体检中</option><option>已体检</option><option>已出报告</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预约状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>未预约</option><option>已预约</option><option>已取消预约</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
<button class="btn btn-primary" id="btnBatchDone">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7.5L5.5 11L12 3.5" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
批量置为已体检
|
||||
</button>
|
||||
<button class="btn btn-default" id="btnBatchUndone">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
批量置为未体检
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">员工预约跟踪列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="min-width:36px;"><input type="checkbox" id="checkAll" title="全选"></th><th>序号</th><th>姓名</th><th>员工编号</th><th>性别</th><th>年龄</th><th>身份证号</th><th>单位</th><th>部门</th><th>机构分类</th><th>预约状态</th><th>预约日期</th><th>体检状态</th><th>体检医院</th><th>体检日期</th><th>体检年份</th><th>体检计划</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="row-check"><input type="checkbox" class="row-checkbox"></td><td>1</td><td>王旭</td><td>342423</td><td>男</td><td>41</td><td>430626198502560029</td><td>公司机关</td><td>办公室</td><td>一类机构</td><td><span class="tag tag-green">已预约</span></td><td>2026-03-10</td><td><span class="tag tag-green">已出报告</span></td><td>延安医院</td><td>2026-03-12</td>
|
||||
<td>2026</td><td>2026年度冠脉CTA专项体检</td><td><span class="link">详情</span><span class="link edit-link" style="margin-left:8px;">编辑</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="row-check"><input type="checkbox" class="row-checkbox"></td><td>2</td><td>张武</td><td>324321</td><td>男</td><td>38</td><td>430626198806120037</td><td>公司机关</td><td>办公室</td><td>一类机构</td><td><span class="tag tag-green">已预约</span></td><td>2026-03-10</td><td><span class="tag tag-blue">已体检</span></td><td>延安医院</td><td>2026-03-11</td>
|
||||
<td>2026</td><td>2026年度职工常规体检</td><td><span class="link">详情</span><span class="link edit-link" style="margin-left:8px;">编辑</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="row-check"><input type="checkbox" class="row-checkbox"></td><td>3</td><td>李明</td><td>456789</td><td>男</td><td>36</td><td>610402199003150045</td><td>第一采油厂</td><td>生产一队</td><td>二类机构</td><td><span class="tag tag-green">已预约</span></td><td>2026-03-15</td><td><span class="tag tag-blue">体检中</span></td><td>泾河医院</td><td>2026-03-16</td>
|
||||
<td>2026</td><td>2026年度职工常规体检</td><td><span class="link">详情</span><span class="link edit-link" style="margin-left:8px;">编辑</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="row-check"><input type="checkbox" class="row-checkbox"></td><td>4</td><td>赵芳</td><td>512336</td><td>女</td><td>45</td><td>610402198109230028</td><td>第二采油厂</td><td>地质研究所</td><td>一类机构</td><td><span class="tag tag-orange">未预约</span></td><td>-</td><td><span class="tag tag-orange">未体检</span></td><td>-</td><td>-</td>
|
||||
<td>2026</td><td>2026年度职工常规体检</td><td><span class="link">详情</span><span class="link edit-link" style="margin-left:8px;">编辑</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="row-check"><input type="checkbox" class="row-checkbox"></td><td>5</td><td>陈强</td><td>601178</td><td>男</td><td>52</td><td>610402197407080011</td><td>第三采油厂</td><td>集输大队</td><td>三类机构</td><td><span class="tag tag-red">已取消预约</span></td><td>2026-03-08</td><td><span class="tag tag-orange">未体检</span></td><td>市中心医院</td><td>-</td>
|
||||
<td>2026</td><td>2026年度冠脉CTA专项体检</td><td><span class="link">详情</span><span class="link edit-link" style="margin-left:8px;">编辑</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<span>显示 10 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">50</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 编辑体检状态弹窗 -->
|
||||
<div class="modal-mask" id="editModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">编辑体检状态</div>
|
||||
<button class="modal__close" data-close="editModal">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;">仅支持修改体检状态为"已体检"或"未体检"</div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<label style="display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-base);">
|
||||
<input type="radio" name="editStatus" id="editStatusDone" value="done">已体检
|
||||
</label>
|
||||
<label style="display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-base);">
|
||||
<input type="radio" name="editStatus" id="editStatusUndone" value="undone">未体检
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-primary" id="editConfirm">确 定</button>
|
||||
<button class="btn btn-default" data-close="editModal">取 消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<div class="modal-mask" id="detailModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">预约跟踪详情</div>
|
||||
<button class="modal__close" data-close="detailModal">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="detail-section">
|
||||
<div class="detail-section__title">基本信息</div>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item"><label>姓名：</label><span data-f="name">王旭</span></div>
|
||||
<div class="detail-item"><label>员工编号：</label><span data-f="empNo">342423</span></div>
|
||||
<div class="detail-item"><label>性别：</label><span data-f="gender">男</span></div>
|
||||
<div class="detail-item"><label>年龄：</label><span data-f="age">41</span></div>
|
||||
<div class="detail-item detail-item--full"><label>身份证号：</label><span data-f="idNo">430626198502560029</span></div>
|
||||
<div class="detail-item"><label>单位：</label><span data-f="unit">公司机关</span></div>
|
||||
<div class="detail-item"><label>部门：</label><span data-f="dept">办公室</span></div>
|
||||
<div class="detail-item"><label>机构分类：</label><span data-f="orgType">一类机构</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<div class="detail-section__title">预约与体检信息</div>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item"><label>预约状态：</label><span><span class="tag tag-green" data-f="bookTag">已预约</span></span></div>
|
||||
<div class="detail-item"><label>预约日期：</label><span data-f="bookDate">2026-03-10</span></div>
|
||||
<div class="detail-item"><label>体检状态：</label><span><span class="tag tag-green" data-f="examTag">已出报告</span></span></div>
|
||||
<div class="detail-item"><label>体检医院：</label><span data-f="hospital">延安医院</span></div>
|
||||
<div class="detail-item"><label>体检日期：</label><span data-f="examDate">2026-03-12</span></div>
|
||||
<div class="detail-item"><label>体检年份：</label><span data-f="year">2026</span></div>
|
||||
<div class="detail-item detail-item--full"><label>体检计划：</label><span data-f="plan">2026年度冠脉CTA专项体检</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" data-close="detailModal">关 闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 固定列：表头与数据行的前三列、最后一列打标 */
|
||||
(function(){
|
||||
var table=document.querySelector('.table-card__content table');
|
||||
if(!table)return;
|
||||
var rows=table.rows;
|
||||
for(var i=0;i<rows.length;i++){
|
||||
var cells=rows[i].cells;
|
||||
if(cells.length<5)continue;
|
||||
['sticky-l1','sticky-l2','sticky-l3'].forEach(function(cls,idx){
|
||||
if(cells[idx])cells[idx].classList.add(cls);
|
||||
});
|
||||
var last=cells[cells.length-1];
|
||||
if(last)last.classList.add('sticky-r');
|
||||
}
|
||||
})();
|
||||
/* 弹窗通用开关 */
|
||||
var TAG_CLASS={'未预约':'tag-orange','已预约':'tag-green','已取消预约':'tag-red','未体检':'tag-orange','体检中':'tag-blue','已体检':'tag-blue','已出报告':'tag-green'};
|
||||
function openModal(id){document.getElementById(id).classList.add('open');}
|
||||
function closeModal(id){document.getElementById(id).classList.remove('open');}
|
||||
document.querySelectorAll('[data-close]').forEach(function(btn){
|
||||
btn.addEventListener('click',function(){closeModal(btn.getAttribute('data-close'));});
|
||||
});
|
||||
document.querySelectorAll('.modal-mask').forEach(function(mask){
|
||||
mask.addEventListener('click',function(e){if(e.target===mask)mask.classList.remove('open');});
|
||||
});
|
||||
document.addEventListener('keydown',function(e){
|
||||
if(e.key==='Escape')document.querySelectorAll('.modal-mask.open').forEach(function(m){m.classList.remove('open');});
|
||||
});
|
||||
/* 详情弹窗：点击"详情"用该行数据填充并打开 */
|
||||
document.querySelectorAll('tbody .link:not(.edit-link)').forEach(function(link){
|
||||
link.addEventListener('click',function(){
|
||||
var tds=link.closest('tr').querySelectorAll('td');
|
||||
var txt=function(i){var td=tds[i];if(!td)return '-';var s=td.querySelector('.tag');return s?s.textContent.trim():(td.textContent.trim()||'-');};
|
||||
var tag=function(el,cls,text){el.className='tag '+cls;el.textContent=text;};
|
||||
var set=function(f,v){var el=document.querySelector('[data-f="'+f+'"]');if(el)el.textContent=v;};
|
||||
set('name',txt(2));set('empNo',txt(3));set('gender',txt(4));set('age',txt(5));set('idNo',txt(6));
|
||||
set('unit',txt(7));set('dept',txt(8));set('orgType',txt(9));
|
||||
var bookStatus=txt(10);set('bookDate',txt(11));
|
||||
var examStatus=txt(12);set('hospital',txt(13));set('examDate',txt(14));
|
||||
set('year',txt(15));set('plan',txt(16));
|
||||
var bt=document.querySelector('[data-f="bookTag"]');
|
||||
if(bt)tag(bt,TAG_CLASS[bookStatus]||'tag-blue',bookStatus);
|
||||
var et=document.querySelector('[data-f="examTag"]');
|
||||
if(et)tag(et,TAG_CLASS[examStatus]||'tag-blue',examStatus);
|
||||
openModal('detailModal');
|
||||
});
|
||||
});
|
||||
/* 全选/取消全选 */
|
||||
document.getElementById('checkAll').addEventListener('change',function(){
|
||||
var checked=this.checked;
|
||||
document.querySelectorAll('.row-checkbox').forEach(function(cb){cb.checked=checked;});
|
||||
});
|
||||
/* 将指定行的体检状态列（第13列，含勾选列）更新为目标状态 */
|
||||
function setRowExamStatus(tr,text){
|
||||
var td=tr.cells[12];
|
||||
if(!td)return;
|
||||
var span=td.querySelector('.tag');
|
||||
if(!span){span=document.createElement('span');td.textContent='';td.appendChild(span);}
|
||||
span.className='tag '+(TAG_CLASS[text]||'tag-blue');
|
||||
span.textContent=text;
|
||||
}
|
||||
/* 批量置为已体检/未体检：作用于勾选行 */
|
||||
function batchSetExamStatus(text){
|
||||
var checked=document.querySelectorAll('.row-checkbox:checked');
|
||||
if(!checked.length){alert('请先勾选需要操作的员工');return;}
|
||||
checked.forEach(function(cb){setRowExamStatus(cb.closest('tr'),text);});
|
||||
}
|
||||
document.getElementById('btnBatchDone').addEventListener('click',function(){batchSetExamStatus('已体检');});
|
||||
document.getElementById('btnBatchUndone').addEventListener('click',function(){batchSetExamStatus('未体检');});
|
||||
/* 编辑弹窗：仅可修改体检状态（已体检/未体检） */
|
||||
var editingRow=null;
|
||||
document.querySelectorAll('.edit-link').forEach(function(link){
|
||||
link.addEventListener('click',function(){
|
||||
editingRow=link.closest('tr');
|
||||
var span=editingRow.cells[12].querySelector('.tag');
|
||||
var cur=span?span.textContent.trim():'';
|
||||
document.getElementById('editStatusDone').checked=cur==='已体检';
|
||||
document.getElementById('editStatusUndone').checked=cur==='未体检';
|
||||
if(!document.getElementById('editStatusDone').checked&&!document.getElementById('editStatusUndone').checked){
|
||||
document.getElementById('editStatusUndone').checked=true;
|
||||
}
|
||||
openModal('editModal');
|
||||
});
|
||||
});
|
||||
document.getElementById('editConfirm').addEventListener('click',function(){
|
||||
if(editingRow){
|
||||
setRowExamStatus(editingRow,document.getElementById('editStatusDone').checked?'已体检':'未体检');
|
||||
}
|
||||
closeModal('editModal');
|
||||
});
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,250 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 单位预约统计（冠脉CTA） | 健康CQ原型</title>
|
||||
<style>
|
||||
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 单位级别TAB */
|
||||
.unit-level-tab{display:flex;align-items:center;gap:0;margin-bottom:16px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:0 24px;border-bottom:1px solid var(--border);}
|
||||
.unit-level-tab__item{position:relative;padding:14px 20px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s;user-select:none;}
|
||||
.unit-level-tab__item:hover{color:var(--primary);}
|
||||
.unit-level-tab__item.active{color:var(--primary);font-weight:500;}
|
||||
.unit-level-tab__item.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--primary);border-radius:1px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 三级单位tab下才显示的部门列 */
|
||||
.col-dept{display:none;}
|
||||
body.level-3 .col-dept{display:table-cell;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html">检前</a>
|
||||
<a href="mid-appointment-track.html" class="active">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检中</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-appointment-track.html" class="sidebar-item">员工预约体检跟踪</a>
|
||||
<a href="mid-selected-items.html" class="sidebar-item">已选项目员工信息</a>
|
||||
<a href="mid-participation.html" class="sidebar-item">已参检员工信息</a>
|
||||
<a href="mid-unit-appointment.html" class="sidebar-item">单位预约人数统计</a>
|
||||
<a href="mid-hospital-realtime.html" class="sidebar-item">医院实时预约人数</a>
|
||||
<a href="mid-doctor-realtime.html" class="sidebar-item">医生实时检查情况</a>
|
||||
<a href="mid-hospital-appointment.html" class="sidebar-item">医院预约人数统计</a>
|
||||
<a href="mid-unit-expected.html" class="sidebar-item">签约单位应检人数</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-gastro-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-gastro-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item active">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 单位级别切换TAB -->
|
||||
<div class="unit-level-tab">
|
||||
<div class="unit-level-tab__item active" onclick="switchUnitLevel(this)">二级单位</div>
|
||||
<div class="unit-level-tab__item" onclick="switchUnitLevel(this)">三级单位</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option><option>公司机关</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位预约统计</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">序号</th><th rowspan="2">单位</th><th rowspan="2" class="col-dept">部门</th><th rowspan="2">应体检人数</th><th rowspan="2">填写问卷人数</th><th colspan="3" style="text-align:center;">已预约情况</th><th rowspan="2">未预约人数</th><th rowspan="2">体检年份</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>已预约人数</th><th>已参检人数</th><th>未参检人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>第一采油厂</td><td class="col-dept">采油作业一区</td><td>5200</td><td>3600</td><td>4000</td><td>3000</td><td>1000</td><td>1000</td><td>2025</td></tr>
|
||||
<tr><td>2</td><td>第二采油厂</td><td class="col-dept">采油作业二区</td><td>5200</td><td>3600</td><td>4000</td><td>3000</td><td>1000</td><td>1000</td><td>2025</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<span>显示 10 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">50</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/* 单位级别TAB切换：三级单位显示部门列 */
|
||||
function switchUnitLevel(el){
|
||||
el.parentElement.querySelectorAll('.unit-level-tab__item').forEach(function(item){item.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
document.body.classList.toggle('level-3', el.textContent.trim()==='三级单位');
|
||||
}
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -136,6 +136,16 @@
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -162,6 +162,16 @@
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -141,6 +141,16 @@
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item active">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -145,6 +145,16 @@
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -136,6 +136,16 @@
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -140,6 +140,16 @@
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -159,6 +159,16 @@
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -159,6 +159,16 @@
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -145,6 +145,16 @@
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -125,6 +125,16 @@
|
||||
<a href="mid-gastro-questionnaire.html" class="sidebar-item">胃肠镜问卷信息</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="mid-cta-appointment-track.html" class="sidebar-item">员工预约跟踪</a>
|
||||
<a href="mid-cta-unit-appointment.html" class="sidebar-item">单位预约统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -144,6 +144,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -154,6 +155,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -186,6 +188,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -118,6 +118,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -128,6 +129,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -160,6 +162,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -154,6 +154,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -164,6 +165,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -196,6 +198,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -118,6 +118,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -128,6 +129,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -160,6 +162,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -0,0 +1,652 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 冠脉CTA体检报告 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px 8px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:flex-start;gap:8px 24px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:200px;}
|
||||
.filter-item select.filter-placeholder{color:var(--text-placeholder);}
|
||||
.year-picker{position:relative;}
|
||||
.year-picker .filter-input{padding-right:30px;cursor:pointer;}
|
||||
.year-picker>svg{position:absolute;right:9px;top:10px;pointer-events:none;}
|
||||
.year-picker__dropdown{display:none;position:absolute;top:40px;left:0;width:120px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:50;max-height:180px;overflow-y:auto;}
|
||||
.year-picker__dropdown.open{display:block;}
|
||||
.year-picker__dropdown div{padding:8px 14px;font-size:var(--font-sm);cursor:pointer;}
|
||||
.year-picker__dropdown div:hover{background:var(--primary-light);}
|
||||
.year-picker__dropdown div.selected{color:var(--primary);font-weight:600;}
|
||||
.filter-actions{margin-left:auto;margin-bottom:12px;display:flex;gap:12px;align-self:flex-end;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-success{background:var(--success);color:#fff;}.btn-success:hover{background:#73d13d;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.action-bar .spacer{flex:1;}
|
||||
.icon-btn{width:32px;height:32px;border:none;background:transparent;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);}
|
||||
.icon-btn:hover{background:#EFF6FF;color:var(--primary);}
|
||||
/* 列设置气泡 */
|
||||
.col-pop{display:none;position:fixed;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:12px 16px;z-index:200;min-width:130px;}
|
||||
.col-pop.open{display:block;}
|
||||
.col-pop label{display:flex;align-items:center;gap:8px;font-size:var(--font-sm);color:var(--text-primary);padding:6px 0;cursor:pointer;white-space:nowrap;}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:10px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:640px;max-height:85vh;display:flex;flex-direction:column;}
|
||||
.modal--wide{width:900px;}
|
||||
.modal--narrow{width:560px;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 详情弹窗（专业报告版式，样式见下） */
|
||||
.dempty{padding:48px 0;text-align:center;font-size:var(--font-sm);color:var(--text-placeholder);}
|
||||
/* 冠脉CTA专业报告 */
|
||||
.cta-rpt{border:1px solid var(--border);border-radius:var(--radius-md);padding:0;overflow:hidden;}
|
||||
.cta-rpt__band{background:#001529;color:#fff;padding:14px 20px;font-size:var(--font-base);font-weight:600;display:flex;align-items:center;justify-content:space-between;}
|
||||
.cta-rpt__band small{font-size:var(--font-xs);font-weight:400;opacity:.7;}
|
||||
.cta-rpt__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 20px;padding:14px 20px;border-bottom:1px dashed var(--border);font-size:var(--font-sm);}
|
||||
.cta-rpt__meta b{color:var(--text-secondary);font-weight:400;}
|
||||
.cta-rpt__sec{padding:14px 20px;border-bottom:1px solid var(--border);}
|
||||
.cta-rpt__sec:last-child{border-bottom:none;}
|
||||
.cta-rpt__sec-t{font-size:var(--font-sm);font-weight:600;color:var(--primary);margin-bottom:8px;}
|
||||
.cta-rpt__txt{font-size:var(--font-sm);color:var(--text-primary);line-height:1.7;}
|
||||
.cta-vessel{width:100%;border-collapse:collapse;}
|
||||
.cta-vessel th,.cta-vessel td{border:1px solid var(--border);padding:8px 10px;font-size:var(--font-sm);text-align:left;vertical-align:top;}
|
||||
.cta-vessel th{background:#FAFAFA;color:var(--text-secondary);font-weight:500;white-space:nowrap;}
|
||||
.cta-vessel td.v-name{white-space:nowrap;font-weight:500;}
|
||||
.cta-vessel td.v-grade{white-space:nowrap;text-align:center;}
|
||||
.cta-plaque{display:inline-flex;align-items:center;padding:1px 8px;border-radius:10px;font-size:var(--font-xs);margin-right:6px;}
|
||||
.cta-plaque--calc{background:#E6F7FF;color:#1890FF;}
|
||||
.cta-plaque--noncalc{background:#FFF7E6;color:#FAAD14;}
|
||||
.cta-plaque--mixed{background:#FFF1F0;color:#FF4D4F;}
|
||||
.cta-plaque--none{background:#F6FFED;color:#52C41A;}
|
||||
.cta-narrow{font-weight:600;}
|
||||
.cta-narrow--0{color:#52C41A;}
|
||||
.cta-narrow--1{color:#8CB800;}
|
||||
.cta-narrow--2{color:#FAAD14;}
|
||||
.cta-narrow--3{color:#FA8C16;}
|
||||
.cta-narrow--4{color:#FF4D4F;}
|
||||
.cta-imp{display:flex;align-items:center;gap:14px;padding:14px 20px;background:#F6FBFF;border-top:1px solid var(--border);}
|
||||
.cta-cad{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:64px;border-radius:var(--radius-md);color:#fff;font-weight:700;line-height:1.1;}
|
||||
.cta-cad small{font-size:var(--font-xs);font-weight:400;opacity:.9;}
|
||||
.cta-cad--0{background:#52C41A;}.cta-cad--1{background:#8CB800;}.cta-cad--2{background:#FAAD14;}.cta-cad--3{background:#FA8C16;}.cta-cad--4{background:#FF4D4F;}
|
||||
.cta-imp__list{font-size:var(--font-sm);color:var(--text-primary);line-height:1.7;}
|
||||
/* 轻提示 */
|
||||
.toast{position:fixed;top:76px;left:50%;transform:translateX(-50%) translateY(-16px);background:#fff;box-shadow:var(--shadow-md);border-radius:var(--radius-sm);padding:10px 20px;font-size:var(--font-sm);color:var(--text-primary);opacity:0;pointer-events:none;transition:all .25s;z-index:1000;display:flex;align-items:center;gap:8px;}
|
||||
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
|
||||
.toast svg{flex-shrink:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html" class="active">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检后</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检统计汇总
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
<a href="post-cancer-screening.html" class="sidebar-item">防癌筛查人数统计</a>
|
||||
<a href="post-standard-stat.html" class="sidebar-item">系统标准化项目统计</a>
|
||||
<a href="post-contracted-hospital.html" class="sidebar-item">签约医院人数统计</a>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
病种信息管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-disease-info.html" class="sidebar-item">病种信息配置</a>
|
||||
<a href="post-conclusion-disease.html" class="sidebar-item">体检结论关联病种</a>
|
||||
<a href="post-auto-select-disease.html" class="sidebar-item">员工病种信息</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item active">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<div class="year-picker" id="yearPicker">
|
||||
<input class="filter-input" id="f-year" type="text" value="2026" readonly>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="2.5" width="11" height="10" rx="1.5" stroke="#999" stroke-width="1.2"/><path d="M1.5 5.5h11M4.5 1v3M9.5 1v3" stroke="#999" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<div class="year-picker__dropdown" id="yearDropdown"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select filter-placeholder" id="f-unitdept" style="min-width:220px;">
|
||||
<option value="">请选择单位部门</option>
|
||||
<optgroup label="公司机关">
|
||||
<option value="公司机关|办公室">公司机关 / 办公室</option>
|
||||
<option value="公司机关|发展计划部">公司机关 / 发展计划部</option>
|
||||
<option value="公司机关|纪检监察组五中心">公司机关 / 纪检监察组五中心</option>
|
||||
<option value="公司机关|纪检审计中心">公司机关 / 纪检审计中心</option>
|
||||
<option value="公司机关|党委宣传部">公司机关 / 党委宣传部</option>
|
||||
<option value="公司机关|基建工程部">公司机关 / 基建工程部</option>
|
||||
</optgroup>
|
||||
<optgroup label="公共事务中心">
|
||||
<option value="公共事务中心|长庆宾馆（会议室）">公共事务中心 / 长庆宾馆（会议室）</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检医院：</label>
|
||||
<select class="filter-select filter-placeholder" id="f-hospital">
|
||||
<option value="">请选择体检医院</option>
|
||||
<option>唐都医院</option><option>延安医院</option><option>西京医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" id="f-name" type="text" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" id="f-empno" type="text" placeholder="请输入员工编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" id="f-idcard" type="text" placeholder="请输入身份证号" style="min-width:230px;">
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button class="btn btn-primary" onclick="doQuery()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.4"/><path d="M9.5 9.5l3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default" onclick="doReset()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M11.5 4A4.5 4.5 0 0 0 3.2 2.8M2.5 10a4.5 4.5 0 0 0 8.3 1.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M11.5 1.5v2.5H9M2.5 12.5V10h2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M12.5 8v3a1.5 1.5 0 0 1-1.5 1.5H3A1.5 1.5 0 0 1 1.5 11V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M7 9V1.5M4.5 3.5L7 1l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M12.5 8v3a1.5 1.5 0 0 1-1.5 1.5H3A1.5 1.5 0 0 1 1.5 11V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M7 9V1.5M4.5 3.5L7 1l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出体检数据
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.4"/><path d="M9.5 9.5l3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
<button class="btn btn-success">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1.5 9.5V11A1.5 1.5 0 0 0 3 12.5h8A1.5 1.5 0 0 0 12.5 11V9.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M7 8.5V2M4.5 4L7 1.5 9.5 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导入体检数据
|
||||
</button>
|
||||
<button class="btn btn-success">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.4"/><path d="M9.5 9.5l3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查看导入任务
|
||||
</button>
|
||||
<div class="spacer"></div>
|
||||
<button class="icon-btn" title="列设置" onclick="toggleColPop(event)">
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none"><circle cx="8.5" cy="8.5" r="2.4" stroke="currentColor" stroke-width="1.4"/><path d="M8.5 1.5l1 2.1 2.3-.5 1 2-1.4 1.9 1.4 1.9-1 2-2.3-.5-1 2.1h-.1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" opacity="0"/><path d="M14.2 10.8l1.4.6-.6 1.9-1.5-.2-1.1 1.1.2 1.5-1.9.6-.9-1.3h-1.6l-.9 1.3-1.9-.6.2-1.5-1.1-1.1-1.5.2-.6-1.9 1.4-.6v-1.6l-1.4-.6.6-1.9 1.5.2 1.1-1.1-.2-1.5 1.9-.6.9 1.3h1.6l.9-1.3 1.9.6-.2 1.5 1.1 1.1 1.5-.2.6 1.9-1.4.6v1.6z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 列设置气泡 -->
|
||||
<div class="col-pop" id="colPop"></div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">冠脉CTA体检报告</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead id="tableHead"></thead>
|
||||
<tbody id="tableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span id="pageTotal">共 7 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<div class="modal-overlay" id="detail-modal" onclick="if(event.target===this)closeModal('detail-modal')">
|
||||
<div class="modal modal--wide">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="detail-title">报告详情</div>
|
||||
<button class="modal__close" onclick="closeModal('detail-modal')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" id="detail-body"></div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('detail-modal')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 轻提示 -->
|
||||
<div class="toast" id="toast">
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="7.5" r="6.5" fill="#52C41A"/><path d="M4.6 7.7l2 2 3.8-4" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span id="toastText"></span>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/* ============ 数据 ============ */
|
||||
var rows=[
|
||||
{name:'陈红山',unit:'公司机关',dept:'纪检监察组五中心',empNo:'50643889',idCard:'654201197904060414',gender:'男',age:47,hospital:'唐都医院',checkDate:'2026-08-13',year:'2026',gastro:true,createTime:'2026-08-18'},
|
||||
{name:'吴大康',unit:'公司机关',dept:'发展计划部',empNo:'80206154',idCard:'610602196912283215',gender:'男',age:57,hospital:'唐都医院',checkDate:'2026-08-14',year:'2026',gastro:false,createTime:'2026-08-18'},
|
||||
{name:'刘永红',unit:'公司机关',dept:'纪检审计中心',empNo:'80226406',idCard:'622821196808160411',gender:'男',age:58,hospital:'唐都医院',checkDate:'2026-08-07',year:'2026',gastro:true,createTime:'2026-08-18'},
|
||||
{name:'罗尚贤',unit:'公司机关',dept:'党委宣传部',empNo:'50157518',idCard:'452730198410145017',gender:'男',age:42,hospital:'唐都医院',checkDate:'2026-08-06',year:'2026',gastro:true,createTime:'2026-08-18'},
|
||||
{name:'黄昊',unit:'公司机关',dept:'发展计划部',empNo:'00014289',idCard:'510723196912261597',gender:'男',age:57,hospital:'唐都医院',checkDate:'2026-07-31',year:'2026',gastro:true,createTime:'2026-08-18'},
|
||||
{name:'胡垚',unit:'公司机关',dept:'基建工程部',empNo:'00019435',idCard:'610422198211100010',gender:'男',age:44,hospital:'唐都医院',checkDate:'2026-07-30',year:'2026',gastro:false,createTime:'2026-08-18'},
|
||||
{name:'李莉',unit:'公共事务中心',dept:'长庆宾馆（会议室）',empNo:'80224641',idCard:'612628197104150027',gender:'女',age:55,hospital:'唐都医院',checkDate:'2026-07-28',year:'2026',gastro:true,createTime:'2026-08-18'}
|
||||
];
|
||||
/* 列配置：fixed=true 表示不允许隐藏 */
|
||||
var cols=[
|
||||
{key:'name',label:'姓名',fixed:true},
|
||||
{key:'empNo',label:'员工编号',fixed:true},
|
||||
{key:'gender',label:'性别',hideable:true},
|
||||
{key:'age',label:'年龄',hideable:true},
|
||||
{key:'unit',label:'单位',fixed:true},
|
||||
{key:'dept',label:'部门',fixed:true},
|
||||
{key:'idCard',label:'身份证号',hideable:true},
|
||||
{key:'hospital',label:'体检医院',hideable:true},
|
||||
{key:'checkDate',label:'检查日期',hideable:true},
|
||||
{key:'createTime',label:'创建时间',hideable:true},
|
||||
{key:'year',label:'体检年份',hideable:true},
|
||||
{key:'op',label:'操作',fixed:true}
|
||||
];
|
||||
var filter={name:'',empNo:'',idCard:'',unitDept:'',hospital:'',year:'2026'};
|
||||
|
||||
/* ============ 表格渲染 ============ */
|
||||
function visibleCols(){return cols.filter(function(c){return c.fixed||!c.hidden;});}
|
||||
function cellHtml(c,r,idx){
|
||||
if(c.key==='op')return '<span class="link" onclick="openDetail('+idx+')">查看报告</span><span class="link" style="margin-left:14px;" onclick="downloadReport('+idx+')">下载报告</span><span class="link" style="margin-left:14px;" onclick="downloadImages('+idx+')">下载影像</span>';
|
||||
return r[c.key];
|
||||
}
|
||||
function renderTable(){
|
||||
var vCols=visibleCols();
|
||||
document.getElementById('tableHead').innerHTML='<tr>'+vCols.map(function(c){return '<th>'+c.label+'</th>';}).join('')+'</tr>';
|
||||
var list=rows.filter(function(r){
|
||||
if(filter.name&&r.name.indexOf(filter.name)<0)return false;
|
||||
if(filter.empNo&&r.empNo.indexOf(filter.empNo)<0)return false;
|
||||
if(filter.idCard&&r.idCard.indexOf(filter.idCard)<0)return false;
|
||||
if(filter.unitDept){var ud=filter.unitDept.split('|');if(r.unit!==ud[0]||r.dept!==ud[1])return false;}
|
||||
if(filter.hospital&&r.hospital!==filter.hospital)return false;
|
||||
if(filter.year&&r.year!==filter.year)return false;
|
||||
return true;
|
||||
});
|
||||
document.getElementById('tableBody').innerHTML=list.map(function(r){
|
||||
var idx=rows.indexOf(r);
|
||||
return '<tr>'+vCols.map(function(c){return '<td>'+cellHtml(c,r,idx)+'</td>';}).join('')+'</tr>';
|
||||
}).join('')||'<tr><td colspan="'+vCols.length+'" style="text-align:center;color:#999;padding:40px 0;">暂无数据</td></tr>';
|
||||
document.getElementById('pageTotal').textContent='共 '+list.length+' 条';
|
||||
}
|
||||
/* ============ 筛选 ============ */
|
||||
function doQuery(){
|
||||
filter.name=document.getElementById('f-name').value.trim();
|
||||
filter.empNo=document.getElementById('f-empno').value.trim();
|
||||
filter.idCard=document.getElementById('f-idcard').value.trim();
|
||||
filter.unitDept=document.getElementById('f-unitdept').value;
|
||||
filter.hospital=document.getElementById('f-hospital').value;
|
||||
filter.year=document.getElementById('f-year').value;
|
||||
renderTable();
|
||||
}
|
||||
function doReset(){
|
||||
['f-name','f-empno','f-idcard'].forEach(function(id){document.getElementById(id).value='';});
|
||||
['f-unitdept','f-hospital'].forEach(function(id){
|
||||
var s=document.getElementById(id);s.selectedIndex=0;s.classList.add('filter-placeholder');
|
||||
});
|
||||
document.getElementById('f-year').value='2026';
|
||||
doQuery();
|
||||
}
|
||||
document.querySelectorAll('#f-unitdept,#f-hospital').forEach(function(s){
|
||||
s.addEventListener('change',function(){s.classList.remove('filter-placeholder');});
|
||||
});
|
||||
/* 年份选择 */
|
||||
var years=['2026','2025','2024'];
|
||||
document.getElementById('yearDropdown').innerHTML=years.map(function(y){
|
||||
return '<div class="'+(y==='2026'?'selected':'')+'" onclick="pickYear(\''+y+'\')">'+y+'</div>';
|
||||
}).join('');
|
||||
function pickYear(y){
|
||||
document.getElementById('f-year').value=y;
|
||||
document.querySelectorAll('#yearDropdown div').forEach(function(d){d.classList.toggle('selected',d.textContent===y);});
|
||||
document.getElementById('yearDropdown').classList.remove('open');
|
||||
doQuery();
|
||||
}
|
||||
document.getElementById('f-year').addEventListener('click',function(e){
|
||||
e.stopPropagation();
|
||||
document.getElementById('yearDropdown').classList.toggle('open');
|
||||
});
|
||||
document.addEventListener('click',function(e){
|
||||
var dp=document.getElementById('yearDropdown');
|
||||
if(!document.getElementById('yearPicker').contains(e.target))dp.classList.remove('open');
|
||||
var pop=document.getElementById('colPop');
|
||||
if(pop.classList.contains('open')&&!pop.contains(e.target))pop.classList.remove('open');
|
||||
});
|
||||
/* ============ 列设置 ============ */
|
||||
function renderColPop(){
|
||||
document.getElementById('colPop').innerHTML=cols.filter(function(c){return c.hideable;}).map(function(c){
|
||||
return '<label><input type="checkbox" '+(c.hidden?'':'checked')+' onchange="toggleCol(\''+c.key+'\',this.checked)">'+c.label+'</label>';
|
||||
}).join('');
|
||||
}
|
||||
function toggleCol(key,show){
|
||||
cols.forEach(function(c){if(c.key===key)c.hidden=!show;});
|
||||
renderTable();
|
||||
}
|
||||
function toggleColPop(e){
|
||||
e.stopPropagation();
|
||||
var pop=document.getElementById('colPop'),btn=e.currentTarget;
|
||||
if(pop.classList.contains('open')){pop.classList.remove('open');return;}
|
||||
var rect=btn.getBoundingClientRect();
|
||||
pop.style.top=(rect.bottom+8)+'px';
|
||||
pop.style.left=Math.min(rect.left,window.innerWidth-160)+'px';
|
||||
renderColPop();
|
||||
pop.classList.add('open');
|
||||
}
|
||||
/* ============ 下载 ============ */
|
||||
function saveFile(name,text){
|
||||
var blob=new Blob(['\ufeff'+text],{type:'text/plain;charset=utf-8'});
|
||||
var a=document.createElement('a');
|
||||
a.href=URL.createObjectURL(blob);
|
||||
a.download=name;
|
||||
document.body.appendChild(a);a.click();
|
||||
setTimeout(function(){URL.revokeObjectURL(a.href);a.remove();},0);
|
||||
}
|
||||
function downloadReport(idx){
|
||||
var r=rows[idx];
|
||||
var L=['==============================',' 冠状动脉CT血管成像（冠脉CTA）报告',' Coronary CT Angiography Report','==============================',
|
||||
'姓名：'+r.name+' 性别：'+r.gender+' 年龄：'+r.age+'岁',
|
||||
'检查编号：'+r.empNo+' 检查日期：'+r.checkDate,
|
||||
'单位：'+r.unit+' / '+r.dept,'检查医院：'+r.hospital,'','【检查条件】'];
|
||||
if(!r.gastro){L.push('（该员工暂无冠脉CTA报告）');}
|
||||
else{
|
||||
var p=ctaProfile(r);
|
||||
L.push('扫描心率 '+p.rate+' 次/分'+(p.beta?'（已用β受体阻滞剂）':'')+'；图像质量满足诊断；冠脉分布：'+p.dominant+'。',
|
||||
'','【冠状动脉钙化积分】','Agatston 总积分约 '+p.agatston+' 分。',
|
||||
'','【冠状动脉分段所见】');
|
||||
p.vessels.forEach(function(v){L.push(v.n+'：'+PLAQUE_TXT[v.p][0]+'；'+v.d);});
|
||||
L.push('','【心脏及冠脉外所见】',p.cardiac,
|
||||
'','【结论与分级】',CAD_TXT[p.cad]);
|
||||
p.impression.forEach(function(x,i){L.push('（'+(i+1)+'）'+x);});
|
||||
L.push('','【建议】',p.advise);
|
||||
}
|
||||
L.push('','报告医师：李慧敏 审核医师：张国强 报告日期：'+r.createTime);
|
||||
saveFile(r.name+'_'+r.empNo+'_冠脉CTA报告.txt',L.join('\r\n'));
|
||||
showToast('冠脉CTA报告已开始下载');
|
||||
}
|
||||
function downloadImages(idx){
|
||||
var r=rows[idx];
|
||||
var lines=['冠脉CTA影像文件清单','姓名：'+r.name+' 员工编号：'+r.empNo+'',''];
|
||||
lines.push(r.gastro?'冠脉CTA报告图片：cta-report-'+r.empNo+'-1.jpg、cta-report-'+r.empNo+'-2.jpg、cta-report-'+r.empNo+'-3.jpg':'冠脉CTA报告图片：暂无');
|
||||
saveFile(r.name+'_'+r.empNo+'_冠脉CTA影像清单.txt',lines.join('\r\n'));
|
||||
showToast('影像已开始下载');
|
||||
}
|
||||
/* ============ 冠脉CTA报告数据（按行确定性生成） ============ */
|
||||
var CTA_PROFILES=[
|
||||
{dominant:'右优势型',rate:'68',beta:true,agatston:86,cad:2,
|
||||
vessels:[
|
||||
{n:'左主干 LM',p:'none',g:0,d:'未见斑块及狭窄'},
|
||||
{n:'左前降支 LAD（近段）',p:'mixed',g:2,d:'混合斑块，管腔狭窄约30%'},
|
||||
{n:'左前降支 LAD（中段）',p:'none',g:0,d:'管壁光滑，未见狭窄'},
|
||||
{n:'第一对角支 D1',p:'calc',g:1,d:'钙化斑块，管腔狭窄<25%'},
|
||||
{n:'左回旋支 LCX（近段）',p:'none',g:0,d:'管壁光滑，未见狭窄'},
|
||||
{n:'左回旋支 LCX（远段）',p:'calc',g:1,d:'少量钙化斑块，管腔未见明显狭窄'},
|
||||
{n:'钝缘支 OM',p:'none',g:0,d:'未见异常'},
|
||||
{n:'右冠状动脉 RCA（近段）',p:'calc',g:2,d:'钙化斑块，管腔狭窄约40%'},
|
||||
{n:'右冠状动脉 RCA（中远段）',p:'none',g:0,d:'管壁光滑，未见狭窄'},
|
||||
{n:'后降支 PDA',p:'none',g:0,d:'未见异常'}
|
||||
],
|
||||
cardiac:'各心腔大小未见扩大，左心耳未见血栓，主动脉及瓣膜未见明显钙化，心包少量积液。双肺下叶少许条索影。',
|
||||
impression:['冠状动脉粥样硬化表现','LAD近段混合斑块伴管腔约30%狭窄；RCA近段钙化斑块伴约40%狭窄','余所见冠脉未见明显狭窄'],
|
||||
advise:'建议心内科专科门诊评估，控制血压、血脂等危险因素，必要时行运动负荷心肌灌注或冠脉造影进一步检查。'}
|
||||
,
|
||||
{dominant:'右优势型',rate:'72',beta:true,agatston:0,cad:0,
|
||||
vessels:[
|
||||
{n:'左主干 LM',p:'none',g:0,d:'未见斑块及狭窄'},
|
||||
{n:'左前降支 LAD（近段）',p:'none',g:0,d:'管壁光滑，未见狭窄'},
|
||||
{n:'左前降支 LAD（中段）',p:'none',g:0,d:'管壁光滑，未见狭窄'},
|
||||
{n:'第一对角支 D1',p:'none',g:0,d:'未见异常'},
|
||||
{n:'左回旋支 LCX（近段）',p:'none',g:0,d:'管壁光滑，未见狭窄'},
|
||||
{n:'左回旋支 LCX（远段）',p:'none',g:0,d:'管壁光滑，未见狭窄'},
|
||||
{n:'钝缘支 OM',p:'none',g:0,d:'未见异常'},
|
||||
{n:'右冠状动脉 RCA（近段）',p:'none',g:0,d:'管壁光滑，未见狭窄'},
|
||||
{n:'右冠状动脉 RCA（中远段）',p:'none',g:0,d:'管壁光滑，未见狭窄'},
|
||||
{n:'后降支 PDA',p:'none',g:0,d:'未见异常'}
|
||||
],
|
||||
cardiac:'各心腔大小、形态正常，左心耳未见血栓，瓣膜未见明显钙化，心包未见积液。双肺未见明显异常。',
|
||||
impression:['冠脉CTA未见明显异常','未见确切斑块及管腔狭窄'],
|
||||
advise:'本次冠脉CTA未见明显异常，建议结合临床，定期体检随访。'}
|
||||
,
|
||||
{dominant:'均衡型',rate:'65',beta:false,agatston:265,cad:3,
|
||||
vessels:[
|
||||
{n:'左主干 LM',p:'calc',g:1,d:'钙化斑块，管腔狭窄<25%'},
|
||||
{n:'左前降支 LAD（近段）',p:'mixed',g:3,d:'混合斑块，管腔狭窄约60%'},
|
||||
{n:'左前降支 LAD（中段）',p:'noncalc',g:2,d:'非钙化斑块，管腔狭窄约45%'},
|
||||
{n:'第一对角支 D1',p:'calc',g:1,d:'钙化斑块，管腔狭窄<25%'},
|
||||
{n:'左回旋支 LCX（近段）',p:'calc',g:2,d:'钙化斑块，管腔狭窄约35%'},
|
||||
{n:'左回旋支 LCX（远段）',p:'none',g:0,d:'未见明显狭窄'},
|
||||
{n:'钝缘支 OM',p:'calc',g:1,d:'少量钙化，管腔未见明显狭窄'},
|
||||
{n:'右冠状动脉 RCA（近段）',p:'mixed',g:2,d:'混合斑块，管腔狭窄约45%'},
|
||||
{n:'右冠状动脉 RCA（中远段）',p:'calc',g:3,d:'钙化斑块，管腔狭窄约55%'},
|
||||
{n:'后降支 PDA',p:'none',g:0,d:'未见异常'}
|
||||
],
|
||||
cardiac:'左心室稍增大，各瓣膜未见明显钙化，心包未见积液。升主动脉增宽约38mm。双肺下叶纤维灶。',
|
||||
impression:['多支冠状动脉粥样硬化并多发斑块形成','LAD近段混合斑块伴管腔中度狭窄（约60%）；RCA远段钙化斑块伴中度狭窄（约55%）','LAD中段、LCX近段、RCA近段轻-中度狭窄'],
|
||||
advise:'建议尽快心内科专科就诊，行冠脉造影及必要时的血流储备分数（FFR）评估，规范抗血小板及降脂治疗。'}
|
||||
];
|
||||
function ctaProfile(r){
|
||||
var t=0;for(var i=0;i<r.empNo.length;i++)t+=r.empNo.charCodeAt(i);
|
||||
return CTA_PROFILES[t%3];
|
||||
}
|
||||
var PLAQUE_TXT={none:['未见斑块','none'],calc:['钙化斑块','calc'],noncalc:['非钙化斑块','noncalc'],mixed:['混合斑块','mixed']};
|
||||
var NARROW_TXT=['未见','<25%','25%~49%','50%~69%','≥70%'];
|
||||
var CAD_TXT=['CAD-RADS 0','CAD-RADS 1','CAD-RADS 2','CAD-RADS 3','CAD-RADS 4'];
|
||||
/* 专业版查看报告弹窗：患者信息已含在报告题头内，不再重复展示 */
|
||||
function openDetail(idx){
|
||||
var r=rows[idx];
|
||||
document.getElementById('detail-title').textContent=r.name+' · 冠脉CTA报告';
|
||||
/* 报告体 */
|
||||
function reportHtml(){
|
||||
if(!r.gastro)return '<div class="dempty">该员工暂无冠脉CTA报告</div>';
|
||||
var p=ctaProfile(r);
|
||||
var vrows=p.vessels.map(function(v){
|
||||
var pl=PLAQUE_TXT[v.p];
|
||||
var gcls=v.g>0?('cta-narrow--'+Math.min(v.g,4)):'';
|
||||
return '<tr><td class="v-name">'+v.n+'</td>'
|
||||
+'<td><span class="cta-plaque cta-plaque--'+pl[1]+'">'+pl[0]+'</span></td>'
|
||||
+'<td class="v-grade">'+(v.g>0?('<span class="cta-narrow '+gcls+'">'+NARROW_TXT[v.g]+'</span>'):'<span class="cta-narrow cta-narrow--0">0%</span>')+'</td>'
|
||||
+'<td>'+v.d+'</td></tr>';
|
||||
}).join('');
|
||||
return '<div class="cta-rpt">'
|
||||
+'<div class="cta-rpt__band">冠状动脉CT血管成像报告<small>Coronary CTA</small></div>'
|
||||
+'<div class="cta-rpt__meta">'
|
||||
+'<span><b>姓名：</b>'+r.name+'</span><span><b>性别：</b>'+r.gender+'</span><span><b>年龄：</b>'+r.age+'岁</span>'
|
||||
+'<span><b>检查编号：</b>'+r.empNo+'</span><span><b>检查日期：</b>'+r.checkDate+'</span><span><b>检查医院：</b>'+r.hospital+'</span>'
|
||||
+'</div>'
|
||||
+'<div class="cta-rpt__sec"><div class="cta-rpt__sec-t">检查条件</div><div class="cta-rpt__txt">'
|
||||
+'扫描时心率 '+p.rate+' 次/分'+(p.beta?'（已使用β受体阻滞剂控制心率）':'')+'，屏气良好；图像质量满足诊断要求。冠脉分布：'+p.dominant+'。'
|
||||
+'</div></div>'
|
||||
+'<div class="cta-rpt__sec"><div class="cta-rpt__sec-t">冠状动脉钙化积分</div><div class="cta-rpt__txt">'
|
||||
+'Agatston 总积分约 '+p.agatston+' 分'+(p.agatston===0?'（未见钙化）':(p.agatston<100?'（轻度）':(p.agatston<400?'（中度）':'（重度）')))+'。'
|
||||
+'</div></div>'
|
||||
+'<div class="cta-rpt__sec"><div class="cta-rpt__sec-t">冠状动脉分段所见</div>'
|
||||
+'<table class="cta-vessel"><thead><tr><th style="width:170px;">血管 / 段</th><th style="width:110px;">斑块性质</th><th style="width:88px;">狭窄程度</th><th>描述</th></tr></thead><tbody>'
|
||||
+vrows+'</tbody></table></div>'
|
||||
+'<div class="cta-rpt__sec"><div class="cta-rpt__sec-t">心脏及冠脉外所见</div><div class="cta-rpt__txt">'+p.cardiac+'</div></div>'
|
||||
+'<div class="cta-rpt__sec"><div class="cta-rpt__sec-t">结论与分级</div>'
|
||||
+'<div class="cta-imp"><div class="cta-cad cta-cad--'+p.cad+'"><span style="font-size:22px;">'+p.cad+'</span><small>CAD-RADS 分级</small></div>'
|
||||
+'<div class="cta-imp__list">'+p.impression.map(function(x,i){return '（'+(i+1)+'）'+x;}).join('<br>')+'</div></div></div>'
|
||||
+'<div class="cta-rpt__sec"><div class="cta-rpt__sec-t">建议</div><div class="cta-rpt__txt">'+p.advise+'</div></div>'
|
||||
+'<div class="cta-rpt__sec"><div class="cta-rpt__txt" style="display:flex;justify-content:space-between;color:var(--text-secondary);">'
|
||||
+'<span>报告医师：李慧敏</span><span>审核医师：张国强</span><span>报告日期：'+r.createTime+'</span></div></div>'
|
||||
+'</div>';
|
||||
}
|
||||
document.getElementById('detail-body').innerHTML=reportHtml();
|
||||
document.getElementById('detail-modal').classList.add('open');
|
||||
}
|
||||
/* ============ 通用 ============ */
|
||||
function closeModal(id){document.getElementById(id).classList.remove('open');}
|
||||
var toastTimer=null;
|
||||
function showToast(msg){
|
||||
document.getElementById('toastText').textContent=msg;
|
||||
var t=document.getElementById('toast');
|
||||
t.classList.add('show');
|
||||
clearTimeout(toastTimer);
|
||||
toastTimer=setTimeout(function(){t.classList.remove('show');},2400);
|
||||
}
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
renderTable();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,413 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 冠脉CTA体检统计 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:200px;}
|
||||
.filter-select:focus{border-color:var(--primary);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 年份选择器 */
|
||||
.year-picker{position:relative;}
|
||||
.year-picker input{height:36px;width:160px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 36px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;cursor:pointer;}
|
||||
.year-picker input:focus{border-color:var(--primary);}
|
||||
.year-picker__icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#999;display:flex;}
|
||||
.year-picker__dropdown{display:none;position:absolute;top:40px;left:0;width:160px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:50;max-height:180px;overflow-y:auto;}
|
||||
.year-picker__dropdown.open{display:block;}
|
||||
.year-picker__dropdown div{padding:8px 16px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;}
|
||||
.year-picker__dropdown div:hover{background:var(--primary-light);}
|
||||
.year-picker__dropdown div.selected{color:var(--primary);font-weight:600;}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.empty-tip{padding:48px 0;text-align:center;font-size:var(--font-sm);color:var(--text-placeholder);}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);flex-wrap:wrap;}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;color:var(--text-primary);}
|
||||
.page-btn:hover:not(:disabled),.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.page-btn:disabled{color:var(--text-placeholder);cursor:not-allowed;background:#FAFAFA;}
|
||||
.page-ellipsis{width:24px;text-align:center;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
.page-size{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24px 0 10px;font-size:var(--font-sm);color:var(--text-primary);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;cursor:pointer;outline:none;}
|
||||
.page-jump input{width:48px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;font-size:var(--font-sm);outline:none;margin:0 4px;}
|
||||
.page-jump input:focus{border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html" class="active">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检后</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检统计汇总
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
<a href="post-cancer-screening.html" class="sidebar-item">防癌筛查人数统计</a>
|
||||
<a href="post-standard-stat.html" class="sidebar-item">系统标准化项目统计</a>
|
||||
<a href="post-contracted-hospital.html" class="sidebar-item">签约医院人数统计</a>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
病种信息管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-disease-info.html" class="sidebar-item">病种信息配置</a>
|
||||
<a href="post-conclusion-disease.html" class="sidebar-item">体检结论关联病种</a>
|
||||
<a href="post-auto-select-disease.html" class="sidebar-item">员工病种信息</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item active">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<div class="year-picker">
|
||||
<input type="text" id="yearInput" value="2026" readonly onclick="toggleYearPop(event)">
|
||||
<span class="year-picker__icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="2.5" width="11" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M1.5 5.5h11M4.5 1v3M9.5 1v3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></span>
|
||||
<div class="year-picker__dropdown" id="yearPop">
|
||||
<div class="selected" onclick="pickYear('2026')">2026</div>
|
||||
<div onclick="pickYear('2025')">2025</div>
|
||||
<div onclick="pickYear('2024')">2024</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" id="f-unit" onchange="onUnitChange()">
|
||||
<option value="">请选择单位</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>部门：</label>
|
||||
<select class="filter-select" id="f-dept" onchange="state.dept=this.value;state.page=1;renderTable();">
|
||||
<option value="">请选择部门</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="margin-left:auto;display:flex;gap:12px;">
|
||||
<button class="btn btn-primary" onclick="doQuery()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="#fff" stroke-width="1.4"/><path d="M9.5 9.5l3 3" stroke="#fff" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default" onclick="doReset()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M12 7a5 5 0 1 1-1.5-3.6M12 1.5V4h-2.5" stroke="#666" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="1.5" width="10" height="11" rx="1.5" stroke="#fff" stroke-width="1.4"/><path d="M4.5 5h5M4.5 7.5h5M4.5 10h3" stroke="#fff" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出记录
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">冠脉CTA体检统计</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table id="statTable">
|
||||
<thead>
|
||||
<tr><th>单位</th><th>部门</th><th>应检人数</th><th>已体检人数</th><th>已预约人数</th><th>已出报告人数</th><th>未预约人数</th><th>体检年份</th></tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination" id="pagination"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/* ============ 数据 ============ */
|
||||
/* 确定性伪随机（0-1），保证每次打开数据一致 */
|
||||
function pseudo(i){var x=Math.sin(i*127.1)*43758.5453;return x-Math.floor(x);}
|
||||
function mkRow(unit,dept,total,checked,booked){
|
||||
return {unit:unit,dept:dept,total:total,checked:checked,booked:booked,reported:0,unbooked:total-checked-booked,year:'2026'};
|
||||
}
|
||||
var rows=[];
|
||||
/* 参考图前10条（第二采油厂） */
|
||||
[['南梁采油作业区',205,0,4],['消防大队',88,0,1],['温台采油作业区',174,1,27],['樊家川采油作业区',161,0,15],['科技信息部',7,0,0],['西峰采油二区',206,0,5],['地质研究所',31,0,2],['西峰采油三区',158,0,10],['华池采油作业区',198,0,30],['马岭北采油作业区',174,0,11]].forEach(function(d){
|
||||
rows.push(mkRow('第二采油厂',d[0],d[1],d[2],d[3]));
|
||||
});
|
||||
var BASE_DEPTS=['采油作业一区','采油作业二区','采油作业三区','采油作业四区','采油作业五区','采油作业六区','集输作业区','地质研究所','工艺研究所','信息中心','安全环保科','生产运行科','经营管理科','人力资源科','财务资产科','物资供应站','维修抢修中心','消防大队','综合办公室','后勤服务部','质量监督站','培训站','离退休管理科','保卫科'];
|
||||
var EXTRA_UNITS=[['第三采油厂',24],['第四采油厂',24],['第五采油厂',24],['公用事业公司',24],['运输公司',24],['水电厂',24],['采气一厂',10]];
|
||||
/* 第二采油厂补充5条，其余单位按部门池生成，合计169条 */
|
||||
['采油作业一区','采油作业六区','集输作业区','生产运行科','保卫科'].forEach(function(dept,i){
|
||||
var idx=100+i,total=20+Math.floor(pseudo(idx)*260),checked=pseudo(idx+0.31)<0.12?1:0;
|
||||
var booked=Math.floor(pseudo(idx+0.67)*Math.min(35,Math.floor(total*0.18)));
|
||||
rows.push(mkRow('第二采油厂',dept,total,checked,booked));
|
||||
});
|
||||
var gi=0;
|
||||
EXTRA_UNITS.forEach(function(u){
|
||||
for(var i=0;i<u[1];i++){
|
||||
gi++;
|
||||
var idx=200+gi,total=20+Math.floor(pseudo(idx)*260),checked=pseudo(idx+0.31)<0.12?1:0;
|
||||
var booked=Math.floor(pseudo(idx+0.67)*Math.min(35,Math.floor(total*0.18)));
|
||||
rows.push(mkRow(u[0],BASE_DEPTS[i],total,checked,booked));
|
||||
}
|
||||
});
|
||||
var state={unit:'',dept:'',year:'2026',page:1,pageSize:10};
|
||||
|
||||
/* ============ 筛选 ============ */
|
||||
function initUnitOptions(){
|
||||
var units=[];
|
||||
rows.forEach(function(r){if(units.indexOf(r.unit)<0)units.push(r.unit);});
|
||||
var sel=document.getElementById('f-unit');
|
||||
units.forEach(function(u){
|
||||
var opt=document.createElement('option');opt.value=u;opt.textContent=u;sel.appendChild(opt);
|
||||
});
|
||||
}
|
||||
function onUnitChange(){
|
||||
state.unit=document.getElementById('f-unit').value;
|
||||
state.dept='';
|
||||
var sel=document.getElementById('f-dept');
|
||||
sel.innerHTML='<option value="">请选择部门</option>';
|
||||
if(state.unit){
|
||||
var depts=[];
|
||||
rows.forEach(function(r){if(r.unit===state.unit&&depts.indexOf(r.dept)<0)depts.push(r.dept);});
|
||||
depts.forEach(function(d){
|
||||
var opt=document.createElement('option');opt.value=d;opt.textContent=d;sel.appendChild(opt);
|
||||
});
|
||||
}
|
||||
sel.disabled=!state.unit;
|
||||
state.page=1;
|
||||
renderTable();
|
||||
}
|
||||
function doQuery(){
|
||||
state.unit=document.getElementById('f-unit').value;
|
||||
state.dept=document.getElementById('f-dept').value;
|
||||
state.page=1;
|
||||
renderTable();
|
||||
}
|
||||
function doReset(){
|
||||
document.getElementById('f-unit').value='';
|
||||
onUnitChange();
|
||||
document.getElementById('f-dept').disabled=true;
|
||||
pickYear('2026');
|
||||
state.page=1;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
/* ============ 年份选择 ============ */
|
||||
function toggleYearPop(e){
|
||||
e.stopPropagation();
|
||||
document.getElementById('yearPop').classList.toggle('open');
|
||||
}
|
||||
function pickYear(y){
|
||||
state.year=y;
|
||||
document.getElementById('yearInput').value=y;
|
||||
var opts=document.querySelectorAll('#yearPop div');
|
||||
opts.forEach(function(o){o.classList.toggle('selected',o.textContent===y);});
|
||||
document.getElementById('yearPop').classList.remove('open');
|
||||
state.page=1;
|
||||
renderTable();
|
||||
}
|
||||
document.addEventListener('click',function(){
|
||||
var pop=document.getElementById('yearPop');
|
||||
if(pop)pop.classList.remove('open');
|
||||
});
|
||||
|
||||
/* ============ 表格渲染 ============ */
|
||||
function filteredRows(){
|
||||
return rows.filter(function(r){
|
||||
return (!state.unit||r.unit===state.unit)&&(!state.dept||r.dept===state.dept)&&(!state.year||r.year===state.year);
|
||||
});
|
||||
}
|
||||
function renderTable(){
|
||||
var list=filteredRows();
|
||||
var totalPages=Math.max(1,Math.ceil(list.length/state.pageSize));
|
||||
if(state.page>totalPages)state.page=totalPages;
|
||||
var start=(state.page-1)*state.pageSize;
|
||||
var pageRows=list.slice(start,start+state.pageSize);
|
||||
var tbody=document.querySelector('#statTable tbody');
|
||||
tbody.innerHTML=pageRows.length?pageRows.map(function(r){
|
||||
return '<tr><td>'+r.unit+'</td><td>'+r.dept+'</td><td>'+r.total+'</td><td>'+r.checked+'</td><td>'+r.booked+'</td><td>'+r.reported+'</td><td>'+r.unbooked+'</td><td>'+r.year+'</td></tr>';
|
||||
}).join(''):'<tr><td colspan="8" style="padding:0;border-bottom:none;"><div class="empty-tip">暂无数据</div></td></tr>';
|
||||
renderPagination(list.length,totalPages);
|
||||
}
|
||||
|
||||
/* ============ 分页 ============ */
|
||||
function pageSeq(p,last){
|
||||
var seq=[];
|
||||
if(last<=7){for(var i=1;i<=last;i++)seq.push(i);return seq;}
|
||||
if(p<=4){seq=[1,2,3,4,5,'...',last];}
|
||||
else if(p>=last-3){seq=[1,'...',last-4,last-3,last-2,last-1,last];}
|
||||
else{seq=[1,'...',p-1,p,p+1,'...',last];}
|
||||
return seq;
|
||||
}
|
||||
function renderPagination(total,totalPages){
|
||||
var html='<span>共 '+total+' 条数据</span>';
|
||||
if(totalPages>1){
|
||||
html+='<button class="page-btn"'+(state.page===1?' disabled':'')+' onclick="goPage('+(state.page-1)+')"><</button>';
|
||||
pageSeq(state.page,totalPages).forEach(function(p){
|
||||
if(p==='...')html+='<span class="page-ellipsis">...</span>';
|
||||
else html+='<button class="page-btn'+(p===state.page?' active':'')+'" onclick="goPage('+p+')">'+p+'</button>';
|
||||
});
|
||||
html+='<button class="page-btn"'+(state.page===totalPages?' disabled':'')+' onclick="goPage('+(state.page+1)+')">></button>';
|
||||
}
|
||||
html+='<select class="page-size" onchange="changeSize(this.value)">'
|
||||
+[10,20,50].map(function(n){return '<option value="'+n+'"'+(n===state.pageSize?' selected':'')+'>'+n+'条/页</option>';}).join('')
|
||||
+'</select>';
|
||||
html+='<span class="page-jump">跳至<input type="number" id="jumpInput" min="1" value="'+state.page+'" onkeydown="if(event.key===\'Enter\')jumpTo('+totalPages+')">页<button class="page-btn" onclick="jumpTo('+totalPages+')">跳</button></span>';
|
||||
document.getElementById('pagination').innerHTML=html;
|
||||
}
|
||||
function goPage(p){state.page=p;renderTable();}
|
||||
function changeSize(v){state.pageSize=parseInt(v,10);state.page=1;renderTable();}
|
||||
function jumpTo(totalPages){
|
||||
var input=document.getElementById('jumpInput');
|
||||
var p=parseInt(input.value,10);
|
||||
if(isNaN(p)||p<1)p=1;
|
||||
if(p>totalPages)p=totalPages;
|
||||
state.page=p;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
/* ============ 通用 ============ */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
initUnitOptions();
|
||||
renderTable();
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -152,6 +152,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -162,6 +163,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -194,6 +196,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -118,6 +118,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -128,6 +129,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item active">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -160,6 +162,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -0,0 +1,410 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 员工体检大表 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:10px 14px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border:1px solid var(--border);white-space:nowrap;}
|
||||
/* 三层表头：一级分类 / 二级分类 */
|
||||
thead th.lvl1{background:#F0F5FF;color:var(--primary);text-align:center;font-weight:600;}
|
||||
thead th.lvl2{background:#F5F7FA;color:var(--text-secondary);text-align:center;font-weight:500;}
|
||||
thead th.item{background:#fff;color:var(--text-primary);text-align:center;font-weight:500;}
|
||||
/* 冻结前三列 */
|
||||
tbody td{padding:12px 14px;font-size:var(--font-sm);color:var(--text-primary);border:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td.item{text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:1px solid var(--border);}
|
||||
tbody tr:hover td{background:#F8FBFF;}
|
||||
.th-base{position:sticky;background:#FAFAFA;z-index:3;}
|
||||
.td-base{position:sticky;background:#fff;z-index:2;}
|
||||
tr:hover .td-base{background:#F8FBFF;}
|
||||
.col0{left:0;width:56px;min-width:56px;max-width:56px;}
|
||||
.col1{left:56px;width:110px;min-width:110px;max-width:110px;}
|
||||
.col2{left:166px;width:120px;min-width:120px;max-width:120px;}
|
||||
.th-base.col0,.th-base.col1,.th-base.col2{z-index:5;}
|
||||
.res-abn{color:var(--danger);font-weight:600;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 轻提示 */
|
||||
.toast{position:fixed;top:76px;left:50%;transform:translateX(-50%) translateY(-16px);background:#fff;box-shadow:var(--shadow-md);border-radius:var(--radius-sm);padding:10px 20px;font-size:var(--font-sm);color:var(--text-primary);opacity:0;pointer-events:none;transition:all .25s;z-index:1000;display:flex;align-items:center;gap:8px;}
|
||||
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
|
||||
.toast svg{flex-shrink:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html" class="active">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检后</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item active">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检统计汇总
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
<a href="post-cancer-screening.html" class="sidebar-item">防癌筛查人数统计</a>
|
||||
<a href="post-standard-stat.html" class="sidebar-item">系统标准化项目统计</a>
|
||||
<a href="post-contracted-hospital.html" class="sidebar-item">签约医院人数统计</a>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
病种信息管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-disease-info.html" class="sidebar-item">病种信息配置</a>
|
||||
<a href="post-conclusion-disease.html" class="sidebar-item">体检结论关联病种</a>
|
||||
<a href="post-auto-select-disease.html" class="sidebar-item">员工病种信息</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:90px;">
|
||||
<option>2026</option><option>2025</option><option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>请选择</option><option>公司机关</option><option>第一采油厂</option><option>第二采油厂</option><option>公共事务中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:160px;min-width:unset;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div style="display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格（三层合并表头） -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">员工体检大表 <span id="keyCount" class="tag tag-blue" style="margin-left:8px;"></span></div>
|
||||
</div>
|
||||
<div class="table-card__content" id="bigTable"></div>
|
||||
<div class="pagination">
|
||||
<span id="pageTotal">共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 轻提示 -->
|
||||
<div class="toast" id="toast">
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="7.5" r="6.5" fill="#52C41A"/><path d="M4.6 7.7l2 2 3.8-4" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span id="toastText"></span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 基本信息列 */
|
||||
var BASE_COLS=[
|
||||
{key:'idx',label:'序号'},{key:'name',label:'姓名'},{key:'empNo',label:'员工编号'},
|
||||
{key:'gender',label:'性别'},{key:'age',label:'年龄'},{key:'idCard',label:'身份证号'},
|
||||
{key:'unit',label:'单位'},{key:'dept',label:'部门'},{key:'hospital',label:'体检医院'},
|
||||
{key:'checkDate',label:'体检日期'}
|
||||
];
|
||||
/* 体检基本项三层结构：一级分类 -> 二级分类(项目分类) -> 重点项目（是否重点指标=是）
|
||||
数据取自线上系统 console.cqygjk.com/medical/standard/uniinfo 重点项目（是否重点指标=是）
|
||||
编码体系 CQxx.yy，编码前缀为二级分类。为控制表宽，每个二级分类下的重点项目全部展开为列。 */
|
||||
var ITEM_TREE=[
|
||||
{lvl1:'血液检验',lvl2:[
|
||||
{name:'血常规',code:'CQ01.01',items:['红细胞','血小板数目','白细胞','血红蛋白']},
|
||||
{name:'尿常规',code:'CQ02.01',items:['尿糖','酮体','隐血','尿蛋白','胆红素','白细胞','亚硝酸盐','红细胞','上皮细胞']},
|
||||
{name:'肝功能',code:'CQ03.01',items:['碱性磷酸酶','总蛋白','ALT','总胆红素','AST','白蛋白','γ-谷氨酰转移酶','球蛋白','白球比','直接胆红素','间接胆红素','总胆汁酸','胆碱脂酶']},
|
||||
{name:'肾功能2',code:'CQ04.01',items:['尿酸','肌酐','尿素','eGFR','胱抑素-C','渗透压','尿微量白蛋白']},
|
||||
{name:'血脂四项',code:'CQ05.01',items:['总胆固醇','甘油三酯','高密度脂蛋白胆固醇','高密度脂蛋白胆固醇2','低密度脂蛋白胆固醇','极低密度脂蛋白','脂蛋白a','ApoA1','ApoB']},
|
||||
{name:'心肌酶谱',code:'CQ06.01',items:['肌酸激酶','乳酸脱氢酶','天门冬氨酸氨基转移酶同工酶','α-羟丁酸脱氢酶','肌酸激酶同工酶MB']},
|
||||
{name:'电解质检测',code:'CQ09.01',items:['氯','无机磷','镁','钙']}
|
||||
]},
|
||||
{lvl1:'肿瘤标志物',lvl2:[
|
||||
{name:'肿瘤标志物检测M',code:'CQ07',items:['癌胚抗原','甲胎蛋白','CA19-9','CA242','CA72-4','神经元特异性烯醇化酶','细胞角蛋白19片段','鳞状细胞癌相关抗原','CA15-3','CA50','肿瘤特异性生长因子','总前列腺特异性抗原','游离前列腺特异性抗原','细胞角蛋白','表皮生长因子','CC16','细胞角蛋白20片段','p53蛋白','血管内皮生长因子','CA125','HE4','胃蛋白酶原比值比值']},
|
||||
{name:'糖化血红蛋白',code:'CQ13',items:['糖化血红蛋白(生化检测)','糖化血红蛋白HPLC法定性']},
|
||||
{name:'血糖',code:'CQ10',items:['血糖测定','餐后2小时血糖','糖化白蛋白','胰岛素']}
|
||||
]},
|
||||
{lvl1:'专科与专项检查',lvl2:[
|
||||
{name:'幽门螺杆菌检测',code:'CQ08',items:['幽门螺旋杆菌抗体定量','碳13呼气试验']},
|
||||
{name:'同型半胱氨酸',code:'CQ11',items:['同型半胱氨酸']},
|
||||
{name:'淀粉酶',code:'CQ12',items:['淀粉酶']},
|
||||
{name:'Homa-B',code:'CQ14',items:['Homa-B']},
|
||||
{name:'Homa-IR',code:'CQ14',items:['Homa-IR']}
|
||||
]}
|
||||
];
|
||||
/* 员工行：基本信息 + 各项目结果；结果对象 {v:值,a:是否异常} */
|
||||
/* 员工行：基本信息 + 各项目结果 {值[,异常1]}；未列出的项目按分类默认"未见异常/-"填充 */
|
||||
var MASTER_ROWS=[
|
||||
{idx:1,name:'王旭',empNo:'342423',gender:'男',age:41,idCard:'430626198502560029',unit:'公司机关',dept:'办公室',hospital:'延安医院',checkDate:'2026-03-10',
|
||||
r:{'红细胞':['4.80×10¹²/L'],'血小板数目':['220×10⁹/L'],'白细胞':['6.2×10⁹/L'],'血红蛋白':['145g/L'],
|
||||
'尿糖':['阴性'],'酮体':['阴性'],'隐血':['阴性'],'尿蛋白':['阴性'],'胆红素':['阴性'],'尿常规|白细胞':['阴性'],'亚硝酸盐':['阴性'],'尿常规|红细胞':['阴性'],'上皮细胞':['阴性'],
|
||||
'碱性磷酸酶':['76U/L'],'总蛋白':['72.0g/L'],'ALT':['25U/L'],'总胆红素':['12.5μmol/L'],'AST':['22U/L'],'白蛋白':['45.0g/L'],'γ-谷氨酰转移酶':['38U/L'],'球蛋白':['27.0g/L'],'白球比':['1.67'],'直接胆红素':['4.2μmol/L'],'间接胆红素':['8.3μmol/L'],'总胆汁酸':['5.2μmol/L'],'胆碱脂酶':['8200U/L'],
|
||||
'尿酸':['428μmol/L',1],'肌酐':['78μmol/L'],'尿素':['5.6mmol/L'],'eGFR':['92.0(正常)'],'胱抑素-C':['0.9mg/L'],'渗透压':['300mOsm/L'],'尿微量白蛋白':['12.0mg/L'],
|
||||
'总胆固醇':['4.60mmol/L'],'甘油三酯':['1.80mmol/L',1],'高密度脂蛋白胆固醇':['1.25mmol/L'],'高密度脂蛋白胆固醇2':['0.42mmol/L'],'低密度脂蛋白胆固醇':['2.80mmol/L'],'极低密度脂蛋白':['0.35mmol/L'],'脂蛋白a':['120mg/L'],'ApoA1':['1.20g/L'],'ApoB':['0.90g/L'],
|
||||
'肌酸激酶':['120U/L'],'乳酸脱氢酶':['180U/L'],'天门冬氨酸氨基转移酶同工酶':['18U/L'],'α-羟丁酸脱氢酶':['145U/L'],'肌酸激酶同工酶MB':['16U/L'],
|
||||
'氯':['102.0mmol/L'],'无机磷':['1.10mmol/L'],'镁':['0.88mmol/L'],'钙':['2.35mmol/L'],
|
||||
'癌胚抗原':['<1.0ng/mL',1],'甲胎蛋白':['<7.0ng/mL',1],'CA19-9':['<12.0U/mL',1],'CA242':['<1.1U/mL',1],'CA72-4':['<0.3U/mL',1],'神经元特异性烯醇化酶':['<5.0ng/mL',1],'细胞角蛋白19片段':['<1.0ng/mL',1],'鳞状细胞癌相关抗原':['<0.1ng/mL',1],'CA15-3':['<2.0U/mL',1],'CA50':['<1.0U/mL',1],'肿瘤特异性生长因子':['25.0U/mL'],'总前列腺特异性抗原':['0.80ng/mL'],'游离前列腺特异性抗原':['0.20ng/mL'],'细胞角蛋白':['<1.0ng/mL',1],'表皮生长因子':['<0.5U/mL',1],'CC16':['<0.1U/mL',1],'细胞角蛋白20片段':['<0.1ng/mL',1],'p53蛋白':['<0.5U/mL',1],'血管内皮生长因子':['<10.0pg/mL',1],'CA125':['<2.0U/mL',1],'HE4':['25.0pmol/L'],'胃蛋白酶原比值比值':['6.5'],
|
||||
'糖化血红蛋白(生化检测)':['5.4%'],'糖化血红蛋白HPLC法定性':['5.6%'],
|
||||
'血糖测定':['5.3mmol/L'],'餐后2小时血糖':['6.8mmol/L'],'糖化白蛋白':['13.5%'],'胰岛素':['8.5μIU/mL'],
|
||||
'幽门螺旋杆菌抗体定量':['<5.0AU/mL',1],'碳13呼气试验':['阴性'],
|
||||
'同型半胱氨酸':['14.5μmol/L'],'淀粉酶':['65U/L'],'Homa-B':['85.0'],'Homa-IR':['1.8']}},
|
||||
{idx:2,name:'张丽娟',empNo:'324321',gender:'女',age:36,idCard:'430626198502560030',unit:'公司机关',dept:'办公室',hospital:'延安医院',checkDate:'2026-03-10',
|
||||
r:{'红细胞':['4.30×10¹²/L'],'血小板数目':['210×10⁹/L'],'白细胞':['5.8×10⁹/L'],'血红蛋白':['128g/L'],
|
||||
'碱性磷酸酶':['68U/L'],'总蛋白':['70.0g/L'],'ALT':['18U/L'],'总胆红素':['10.2μmol/L'],'AST':['20U/L'],'白蛋白':['43.0g/L'],'γ-谷氨酰转移酶':['25U/L'],'球蛋白':['27.0g/L'],'白球比':['1.59'],'直接胆红素':['3.1μmol/L'],'间接胆红素':['7.1μmol/L'],'总胆汁酸':['4.0μmol/L'],'胆碱脂酶':['7600U/L'],
|
||||
'尿酸':['298μmol/L'],'肌酐':['62μmol/L'],'尿素':['4.8mmol/L'],'eGFR':['108.0(正常)'],'胱抑素-C':['0.8mg/L'],'渗透压':['298mOsm/L'],'尿微量白蛋白':['8.0mg/L'],
|
||||
'总胆固醇':['4.20mmol/L'],'甘油三酯':['0.90mmol/L'],'高密度脂蛋白胆固醇':['1.42mmol/L'],'高密度脂蛋白胆固醇2':['0.45mmol/L'],'低密度脂蛋白胆固醇':['2.30mmol/L'],'极低密度脂蛋白':['0.28mmol/L'],'脂蛋白a':['60mg/L'],'ApoA1':['1.45g/L'],'ApoB':['0.75g/L'],
|
||||
'肌酸激酶':['95U/L'],'乳酸脱氢酶':['165U/L'],'天门冬氨酸氨基转移酶同工酶':['15U/L'],'α-羟丁酸脱氢酶':['130U/L'],'肌酸激酶同工酶MB':['12U/L'],
|
||||
'氯':['101.0mmol/L'],'无机磷':['1.05mmol/L'],'镁':['0.85mmol/L'],'钙':['2.30mmol/L'],
|
||||
'糖化血红蛋白(生化检测)':['5.2%'],'糖化血红蛋白HPLC法定性':['5.3%'],
|
||||
'血糖测定':['4.9mmol/L'],'餐后2小时血糖':['6.1mmol/L'],'糖化白蛋白':['12.0%'],'胰岛素':['6.8μIU/mL'],
|
||||
'碳13呼气试验':['阴性'],
|
||||
'同型半胱氨酸':['10.2μmol/L'],'淀粉酶':['58U/L'],'Homa-B':['92.0'],'Homa-IR':['1.2']}},
|
||||
{idx:3,name:'石维国',empNo:'50643889',gender:'男',age:47,idCard:'654201197904060414',unit:'第一采油厂',dept:'采油作业一区',hospital:'唐都医院',checkDate:'2026-04-02',
|
||||
r:{'红细胞':['5.00×10¹²/L'],'血小板数目':['240×10⁹/L'],'白细胞':['7.1×10⁹/L'],'血红蛋白':['152g/L'],
|
||||
'尿蛋白':['±',1],'隐血':['±',1],
|
||||
'碱性磷酸酶':['88U/L'],'总蛋白':['74.0g/L'],'ALT':['42U/L'],'总胆红素':['15.8μmol/L'],'AST':['35U/L'],'白蛋白':['46.0g/L'],'γ-谷氨酰转移酶':['75U/L',1],'球蛋白':['28.0g/L'],'白球比':['1.64'],'直接胆红素':['5.0μmol/L'],'间接胆红素':['10.8μmol/L'],'总胆汁酸':['8.5μmol/L'],'胆碱脂酶':['9500U/L'],
|
||||
'尿酸':['460μmol/L',1],'肌酐':['88μmol/L'],'尿素':['6.8mmol/L'],'eGFR':['86.0(正常)'],'胱抑素-C':['1.0mg/L'],'渗透压':['305mOsm/L'],'尿微量白蛋白':['28.0mg/L',1],
|
||||
'总胆固醇':['5.60mmol/L',1],'甘油三酯':['2.40mmol/L',1],'高密度脂蛋白胆固醇':['0.98mmol/L',1],'高密度脂蛋白胆固醇2':['0.31mmol/L'],'低密度脂蛋白胆固醇':['3.70mmol/L',1],'极低密度脂蛋白':['0.52mmol/L',1],'脂蛋白a':['180mg/L'],'ApoA1':['1.05g/L'],'ApoB':['1.12g/L',1],
|
||||
'肌酸激酶':['165U/L'],'乳酸脱氢酶':['195U/L'],'天门冬氨酸氨基转移酶同工酶':['22U/L'],'α-羟丁酸脱氢酶':['160U/L'],'肌酸激酶同工酶MB':['20U/L'],
|
||||
'氯':['103.0mmol/L'],'无机磷':['1.15mmol/L'],'镁':['0.90mmol/L'],'钙':['2.42mmol/L'],
|
||||
'碳13呼气试验':['阳性',1],'幽门螺旋杆菌抗体定量':['<5.0AU/mL',1],
|
||||
'癌胚抗原':['<1.0ng/mL',1],'甲胎蛋白':['<7.0ng/mL',1],'CA19-9':['<12.0U/mL',1],'CA72-4':['<0.3U/mL',1],'神经元特异性烯醇化酶':['<5.0ng/mL',1],'鳞状细胞癌相关抗原':['<0.1ng/mL',1],'CA15-3':['<2.0U/mL',1],'CA50':['<1.0U/mL',1],'肿瘤特异性生长因子':['32.0U/mL'],'总前列腺特异性抗原':['1.20ng/mL'],'游离前列腺特异性抗原':['0.28ng/mL'],'细胞角蛋白':['<1.0ng/mL',1],'表皮生长因子':['<0.5U/mL',1],'CC16':['<0.1U/mL',1],'细胞角蛋白20片段':['<0.1ng/mL',1],'p53蛋白':['<0.5U/mL',1],'血管内皮生长因子':['<10.0pg/mL',1],'CA125':['<2.0U/mL',1],'CA242':['<1.1U/mL',1],'细胞角蛋白19片段':['<1.0ng/mL',1],'HE4':['32.0pmol/L'],'胃蛋白酶原比值比值':['7.8'],
|
||||
'糖化血红蛋白(生化检测)':['6.0%'],'糖化血红蛋白HPLC法定性':['6.1%'],
|
||||
'血糖测定':['6.3mmol/L',1],'餐后2小时血糖':['8.2mmol/L',1],'糖化白蛋白':['14.8%'],'胰岛素':['12.5μIU/mL'],
|
||||
'同型半胱氨酸':['18.5μmol/L',1],'淀粉酶':['72U/L'],'Homa-B':['78.0'],'Homa-IR':['2.9',1]}},
|
||||
{idx:4,name:'李莉',empNo:'80224641',gender:'女',age:55,idCard:'612628197104150027',unit:'公共事务中心',dept:'长庆宾馆',hospital:'泾河医院',checkDate:'2026-04-08',
|
||||
r:{'红细胞':['4.10×10¹²/L'],'血小板数目':['190×10⁹/L'],'白细胞':['6.0×10⁹/L'],'血红蛋白':['118g/L',1],
|
||||
'碱性磷酸酶':['72U/L'],'总蛋白':['68.0g/L'],'ALT':['22U/L'],'总胆红素':['11.0μmol/L'],'AST':['24U/L'],'白蛋白':['42.0g/L'],'γ-谷氨酰转移酶':['30U/L'],'球蛋白':['26.0g/L'],'白球比':['1.62'],'直接胆红素':['3.5μmol/L'],'间接胆红素':['7.5μmol/L'],'总胆汁酸':['5.0μmol/L'],'胆碱脂酶':['8000U/L'],
|
||||
'尿酸':['276μmol/L'],'肌酐':['58μmol/L'],'尿素':['5.2mmol/L'],'eGFR':['102.0(正常)'],'胱抑素-C':['0.9mg/L'],'渗透压':['296mOsm/L'],'尿微量白蛋白':['10.0mg/L'],
|
||||
'总胆固醇':['5.00mmol/L'],'甘油三酯':['1.40mmol/L'],'高密度脂蛋白胆固醇':['1.18mmol/L'],'高密度脂蛋白胆固醇2':['0.38mmol/L'],'低密度脂蛋白胆固醇':['3.10mmol/L'],'极低密度脂蛋白':['0.30mmol/L'],'脂蛋白a':['90mg/L'],'ApoA1':['1.32g/L'],'ApoB':['0.88g/L'],
|
||||
'肌酸激酶':['88U/L'],'乳酸脱氢酶':['172U/L'],'天门冬氨酸氨基转移酶同工酶':['16U/L'],'α-羟丁酸脱氢酶':['138U/L'],'肌酸激酶同工酶MB':['13U/L'],
|
||||
'氯':['100.0mmol/L'],'无机磷':['1.02mmol/L'],'镁':['0.82mmol/L'],'钙':['2.28mmol/L'],
|
||||
'癌胚抗原':['<1.0ng/mL',1],'甲胎蛋白':['<7.0ng/mL',1],'CA19-9':['<12.0U/mL',1],'CA242':['<1.1U/mL',1],'CA72-4':['<0.3U/mL',1],'神经元特异性烯醇化酶':['<5.0ng/mL',1],'细胞角蛋白19片段':['<1.0ng/mL',1],'鳞状细胞癌相关抗原':['<0.1ng/mL',1],'CA15-3':['<2.0U/mL',1],'CA50':['<1.0U/mL',1],'肿瘤特异性生长因子':['28.0U/mL'],'总前列腺特异性抗原':['<0.01ng/mL',1],'游离前列腺特异性抗原':['<0.01ng/mL',1],'细胞角蛋白':['<1.0ng/mL',1],'表皮生长因子':['<0.5U/mL',1],'CC16':['<0.1U/mL',1],'细胞角蛋白20片段':['<0.1ng/mL',1],'p53蛋白':['<0.5U/mL',1],'血管内皮生长因子':['<10.0pg/mL',1],'CA125':['12.5U/mL'],'HE4':['42.0pmol/L',1],'胃蛋白酶原比值比值':['12.5',1],
|
||||
'糖化血红蛋白(生化检测)':['5.5%'],'糖化血红蛋白HPLC法定性':['5.7%'],
|
||||
'血糖测定':['5.6mmol/L'],'餐后2小时血糖':['7.0mmol/L'],'糖化白蛋白':['13.0%'],'胰岛素':['7.8μIU/mL'],
|
||||
'幽门螺旋杆菌抗体定量':['35.0AU/mL',1],'碳13呼气试验':['阴性'],
|
||||
'同型半胱氨酸':['12.8μmol/L'],'淀粉酶':['60U/L'],'Homa-B':['88.0'],'Homa-IR':['1.5']}}
|
||||
];
|
||||
/* 分类默认值：未显式给出结果的项目按分类填充（重点定性项默认阴性） */
|
||||
var CAT_DEFAULTS={
|
||||
'血常规':['未见异常'],'尿常规':['阴性'],'肝功能':['-'],'肾功能2':['-'],'血脂':['-'],'心肌酶谱':['-'],
|
||||
'电解质检测':['-'],'肿瘤标志物检测M':['-'],'糖化血红蛋白':['-'],'血糖':['-'],'幽门螺杆菌检测':['阴性'],
|
||||
'同型半胱氨酸':['-'],'淀粉酶':['-'],'Homa-B':['-'],'Homa-IR':['-']
|
||||
};
|
||||
/* 展开所有项目列：[{name,cat}]（保持顺序） */
|
||||
function allItems(){
|
||||
var arr=[];
|
||||
ITEM_TREE.forEach(function(g){g.lvl2.forEach(function(s){s.items.forEach(function(it){arr.push({name:it,cat:s.name});});});});
|
||||
return arr;
|
||||
}
|
||||
function buildHead(){
|
||||
/* 行1：基本信息(rowspan=3) + 一级分类(colspan)；行2：二级分类(colspan)；行3：具体项目 */
|
||||
var r1=[],r2=[],r3=[];
|
||||
BASE_COLS.forEach(function(c,i){
|
||||
var cls='th-base'+(i<3?' col'+i:'');
|
||||
r1.push('<th class="'+cls+'" rowspan="3">'+c.label+'</th>');
|
||||
});
|
||||
ITEM_TREE.forEach(function(g){
|
||||
var cnt=0;g.lvl2.forEach(function(s){cnt+=s.items.length;});
|
||||
r1.push('<th class="lvl1" colspan="'+cnt+'">'+g.lvl1+'</th>');
|
||||
g.lvl2.forEach(function(s){
|
||||
r2.push('<th class="lvl2" colspan="'+s.items.length+'">'+s.name+'</th>');
|
||||
s.items.forEach(function(it){r3.push('<th class="item">'+it+'</th>');});
|
||||
});
|
||||
});
|
||||
return '<table><thead><tr>'+r1.join('')+'</tr><tr>'+r2.join('')+'</tr><tr>'+r3.join('')+'</tr></thead>';
|
||||
}
|
||||
function buildBody(){
|
||||
var items=allItems();
|
||||
var baseKeys=['idx','name','empNo','gender','age','idCard','unit','dept','hospital','checkDate'];
|
||||
var rows=MASTER_ROWS.map(function(r){
|
||||
var cells='';
|
||||
baseKeys.forEach(function(k,i){
|
||||
var cls='td-base'+(i<3?' col'+i:'');
|
||||
cells+='<td class="'+cls+'">'+r[k]+'</td>';
|
||||
});
|
||||
items.forEach(function(col){
|
||||
var val=r.r[col.cat+'|'+col.name]||r.r[col.name];
|
||||
if(!val)val=[(CAT_DEFAULTS[col.cat]||['-'])[0]];
|
||||
cells+='<td class="item'+(val[1]?' res-abn':'')+'">'+val[0]+'</td>';
|
||||
});
|
||||
return '<tr>'+cells+'</tr>';
|
||||
}).join('');
|
||||
return '<tbody>'+rows+'</tbody></table>';
|
||||
}
|
||||
function renderBigTable(){
|
||||
document.getElementById('bigTable').innerHTML=buildHead()+buildBody();
|
||||
document.getElementById('pageTotal').textContent='共 '+MASTER_ROWS.length+' 条';
|
||||
var k=document.getElementById('keyCount');
|
||||
if(k)k.textContent='重点项目 '+allItems().length+' 列';
|
||||
}
|
||||
var toastTimer=null;
|
||||
function showToast(msg){
|
||||
document.getElementById('toastText').textContent=msg;
|
||||
var t=document.getElementById('toast');
|
||||
t.classList.add('show');clearTimeout(toastTimer);
|
||||
toastTimer=setTimeout(function(){t.classList.remove('show');},2400);
|
||||
}
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){sub.classList.add('open');sub=sub.parentElement.closest('.sidebar-subgroup');}
|
||||
})();
|
||||
renderBigTable();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -125,6 +125,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -135,6 +136,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -167,6 +169,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item active">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -118,6 +118,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -128,6 +129,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item active">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -160,6 +162,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -154,6 +154,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item active">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -164,6 +165,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -196,6 +198,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -126,6 +126,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item active">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -136,6 +137,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -168,6 +170,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -118,6 +118,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -128,6 +129,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item active">医院体检项目统计</a>
|
||||
@@ -160,6 +162,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -151,6 +151,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -161,6 +162,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -193,6 +195,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -139,6 +139,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item active">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -149,6 +150,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -181,6 +183,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -209,6 +209,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -219,6 +220,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -251,6 +253,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -137,6 +137,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item active">体检报告未匹配项目</a>
|
||||
@@ -147,6 +148,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -179,6 +181,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -118,6 +118,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -128,6 +129,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -160,6 +162,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -0,0 +1,421 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 单位体检费用统计 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 单位级别TAB */
|
||||
.unit-level-tab{display:flex;align-items:center;gap:0;margin-bottom:16px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:0 24px;border-bottom:1px solid var(--border);}
|
||||
.unit-level-tab__item{position:relative;padding:14px 20px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s;user-select:none;}
|
||||
.unit-level-tab__item:hover{color:var(--primary);}
|
||||
.unit-level-tab__item.active{color:var(--primary);font-weight:500;}
|
||||
.unit-level-tab__item.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--primary);border-radius:1px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.sub-hint{color:var(--text-placeholder);font-size:var(--font-xs);}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 三级单位tab下才显示的部门列 */
|
||||
.col-dept{display:none;}
|
||||
body.level-3 .col-dept{display:table-cell;}
|
||||
/* 员工费用明细弹窗 */
|
||||
.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;display:flex;align-items:center;justify-content:center;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-md);width:1000px;max-width:92vw;display:flex;flex-direction:column;max-height:82vh;}
|
||||
.modal--narrow{width:560px;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{font-size:22px;color:var(--text-placeholder);cursor:pointer;line-height:1;}
|
||||
.modal__close:hover{color:var(--text-secondary);}
|
||||
.modal__body{padding:16px 24px;overflow:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html" class="active">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检后</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检统计汇总
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item active">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
<a href="post-cancer-screening.html" class="sidebar-item">防癌筛查人数统计</a>
|
||||
<a href="post-standard-stat.html" class="sidebar-item">系统标准化项目统计</a>
|
||||
<a href="post-contracted-hospital.html" class="sidebar-item">签约医院人数统计</a>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
病种信息管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-disease-info.html" class="sidebar-item">病种信息配置</a>
|
||||
<a href="post-conclusion-disease.html" class="sidebar-item">体检结论关联病种</a>
|
||||
<a href="post-auto-select-disease.html" class="sidebar-item">员工病种信息</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 单位级别切换TAB -->
|
||||
<div class="unit-level-tab">
|
||||
<div class="unit-level-tab__item active" onclick="switchUnitLevel(this)">二级单位</div>
|
||||
<div class="unit-level-tab__item" onclick="switchUnitLevel(this)">三级单位</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select">
|
||||
<option>2024</option><option>2025</option><option selected>2026</option><option>2027</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位体检费用统计</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>单位</th>
|
||||
<th class="col-dept">部门</th>
|
||||
<th>总人数</th>
|
||||
<th>已体检人数</th>
|
||||
<th>计划总体检费用（元）</th>
|
||||
<th>实际总体检费用（元）</th>
|
||||
<th>体检年份</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>第一采油厂</td><td class="col-dept">采油作业一区</td><td>8000</td><td>7520</td><td>15,510,000.00</td><td>13,432,600.00</td><td>2026</td><td><span class="link" onclick="showCostDetail(0)">员工费用明细</span></td></tr>
|
||||
<tr><td>2</td><td>第二采油厂</td><td class="col-dept">采油作业二区</td><td>8000</td><td>7310</td><td>15,076,875.00</td><td>13,075,762.50</td><td>2026</td><td><span class="link" onclick="showCostDetail(1)">员工费用明细</span></td></tr>
|
||||
<tr><td>3</td><td>第三采油厂</td><td class="col-dept">集输作业一区</td><td>6500</td><td>5980</td><td>12,333,750.00</td><td>10,681,775.00</td><td>2026</td><td><span class="link" onclick="showCostDetail(2)">员工费用明细</span></td></tr>
|
||||
<tr><td>4</td><td>第一采油厂</td><td class="col-dept">采油作业一区</td><td>8000</td><td>7680</td><td>15,840,000.00</td><td>13,737,600.00</td><td>2025</td><td><span class="link" onclick="showCostDetail(3)">员工费用明细</span></td></tr>
|
||||
<tr><td>5</td><td>第二采油厂</td><td class="col-dept">采油作业二区</td><td>8000</td><td>7450</td><td>15,365,625.00</td><td>13,307,562.50</td><td>2025</td><td><span class="link" onclick="showCostDetail(4)">员工费用明细</span></td></tr>
|
||||
<tr><td>6</td><td>第三采油厂</td><td class="col-dept">集输作业一区</td><td>6500</td><td>6120</td><td>12,622,500.00</td><td>10,947,150.00</td><td>2025</td><td><span class="link" onclick="showCostDetail(5)">员工费用明细</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 6 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 员工费用明细弹窗 -->
|
||||
<div class="modal-mask" id="cost-detail-modal" style="display:none;" onclick="if(event.target===this)hideCostDetail()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="cost-detail-title">员工费用明细</div>
|
||||
<span class="modal__close" onclick="hideCostDetail()">×</span>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>序号</th><th>姓名</th><th>员工编号</th><th>部门</th><th>体检日期</th><th>体检医院</th><th>应检项目数</th><th>已检项目数</th><th>计划体检费用（元）</th><th>实际体检费用（元）</th></tr>
|
||||
</thead>
|
||||
<tbody id="cost-detail-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="hideCostDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 项目费用列表弹窗（叠在员工费用明细之上） -->
|
||||
<div class="modal-mask" id="item-modal" style="display:none;z-index:300;" onclick="if(event.target===this)this.style.display='none'">
|
||||
<div class="modal modal--narrow">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="item-modal-title">项目列表</div>
|
||||
<span class="modal__close" onclick="hideItemModal()">×</span>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<table>
|
||||
<thead id="item-modal-head"></thead>
|
||||
<tbody id="item-modal-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="hideItemModal()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
/* 单位级别TAB切换：三级单位显示部门列 */
|
||||
function switchUnitLevel(el){
|
||||
var items=el.parentElement.querySelectorAll('.unit-level-tab__item');
|
||||
items.forEach(function(item){item.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
document.body.classList.toggle('level-3', el.textContent.trim()==='三级单位');
|
||||
}
|
||||
/* 行配置：单位/部门/年份/总人数/已体检人数；计划与实际总体检费用为明细弹窗 8 名员工合计×(已体检人数/8)，主表与明细人均口径一致 */
|
||||
var ROWS=[
|
||||
{unit:'第一采油厂',dept:'采油作业一区',year:2026,total:8000,checked:7520},
|
||||
{unit:'第二采油厂',dept:'采油作业二区',year:2026,total:8000,checked:7310},
|
||||
{unit:'第三采油厂',dept:'集输作业一区',year:2026,total:6500,checked:5980},
|
||||
{unit:'第一采油厂',dept:'采油作业一区',year:2025,total:8000,checked:7680},
|
||||
{unit:'第二采油厂',dept:'采油作业二区',year:2025,total:8000,checked:7450},
|
||||
{unit:'第三采油厂',dept:'集输作业一区',year:2025,total:6500,checked:6120}
|
||||
];
|
||||
/* 体检项目字典：四档套餐项目费用合计恰为额度值 1000/1500/2500/4000 元 */
|
||||
var TIERS=[
|
||||
[['一般检查',30,'临床检查'],['内科',30,'临床检查'],['外科',30,'临床检查'],['眼科',30,'临床检查'],['血常规',30,'检验'],['尿常规',20,'检验'],['空腹血糖',25,'检验'],['心电图',60,'医技'],['腹部彩超',180,'医技'],['肝胆胰脾肾彩超',180,'医技'],['胸部正位片',45,'医技'],['大便常规+隐血',35,'检验'],['血流变',40,'检验'],['肿瘤标志物',265,'检验']],
|
||||
[['一般检查',30,'临床检查'],['内科',30,'临床检查'],['外科',30,'临床检查'],['眼科',30,'临床检查'],['耳鼻喉科',30,'临床检查'],['口腔科',30,'临床检查'],['血常规',30,'检验'],['尿常规',20,'检验'],['空腹血糖',25,'检验'],['肝功能',120,'检验'],['肾功能',80,'检验'],['血脂',120,'检验'],['心电图',60,'医技'],['腹部彩超',210,'医技'],['甲状腺彩超',190,'医技'],['甲状腺功能',200,'检验'],['胸部正位片',55,'医技'],['妇科彩超',210,'医技']],
|
||||
[['一般检查',30,'临床检查'],['内科',30,'临床检查'],['外科',30,'临床检查'],['眼科',30,'临床检查'],['耳鼻喉科',30,'临床检查'],['口腔科',30,'临床检查'],['血常规',30,'检验'],['尿常规',20,'检验'],['空腹血糖',25,'检验'],['肝功能',120,'检验'],['肾功能',80,'检验'],['血脂',90,'检验'],['心肌酶谱',150,'检验'],['肿瘤标志物',220,'检验'],['甲状腺功能',150,'检验'],['心电图',60,'医技'],['上腹部彩超',90,'医技'],['下腹部彩超',90,'医技'],['甲状腺彩超',160,'医技'],['胸部CT',260,'医技'],['妇科彩超',160,'医技'],['经颅多普勒',160,'医技'],['骨密度检测',160,'医技'],['幽门螺杆菌检测',220,'检验'],['大便常规+隐血',35,'检验'],['血流变',40,'检验']],
|
||||
[['一般检查',30,'临床检查'],['内科',30,'临床检查'],['外科',30,'临床检查'],['眼科',30,'临床检查'],['耳鼻喉科',30,'临床检查'],['口腔科',30,'临床检查'],['血常规',30,'检验'],['尿常规',20,'检验'],['空腹血糖',25,'检验'],['糖化血红蛋白',60,'检验'],['肝功能',120,'检验'],['肾功能',80,'检验'],['血脂',90,'检验'],['心肌酶谱',150,'检验'],['肿瘤标志物',350,'检验'],['甲状腺功能',150,'检验'],['幽门螺杆菌检测',90,'检验'],['心电图',60,'医技'],['腹部彩超',180,'医技'],['妇科彩超+TCT',240,'医技'],['乳腺彩超',160,'医技'],['甲状腺彩超',160,'医技'],['颈动脉彩超',180,'医技'],['心脏彩超',280,'医技'],['胸部CT',260,'医技'],['经颅多普勒',150,'医技'],['骨密度检测',225,'医技'],['动态心电图',260,'医技'],['头颅核磁共振',500,'医技']]
|
||||
];
|
||||
/* 示例员工：tier 为额度档位索引 */
|
||||
var EMP_POOL=[
|
||||
{name:'石维国',id:'CQ001234',hospital:'泾河医院',tier:1},
|
||||
{name:'曲志明',id:'CQ002187',hospital:'庆阳医院',tier:2},
|
||||
{name:'李秀兰',id:'CQ003412',hospital:'延安医院',tier:0},
|
||||
{name:'张卫东',id:'CQ004098',hospital:'CQ总医院',tier:3},
|
||||
{name:'王海燕',id:'CQ005263',hospital:'泾河医院',tier:2},
|
||||
{name:'刘振华',id:'CQ006175',hospital:'庆阳医院',tier:0},
|
||||
{name:'陈国庆',id:'CQ007321',hospital:'延安医院',tier:1},
|
||||
{name:'杨春梅',id:'CQ008456',hospital:'CQ总医院',tier:2}
|
||||
];
|
||||
/* 弃检项目示例（与档位套餐内项目对应，不足部分由 buildPlan 追加最贵项目凑数） */
|
||||
var DROPPED_BY_TIER=[[],['妇科彩超'],['上腹部彩超','下腹部彩超'],['心脏彩超','肿瘤标志物']];
|
||||
function fmtMoney(v){return v.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g,',');}
|
||||
/* 确定性派生某行某员工的应检/已检项目集合：弃检数 = 1 + (员工序+行序)%2，实际费用 = 应检合计 - 弃检项目合计 */
|
||||
function buildPlan(rowIdx,empIdx){
|
||||
var tier=TIERS[EMP_POOL[empIdx].tier];
|
||||
var items=tier.map(function(it){return {name:it[0],fee:it[1],cat:it[2],status:'已检'};});
|
||||
var plan=0;items.forEach(function(it){plan+=it.fee;});
|
||||
var dropN=1+((empIdx+rowIdx)%2);
|
||||
var byName={};items.forEach(function(it){byName[it.name]=it;});
|
||||
var pool=(DROPPED_BY_TIER[EMP_POOL[empIdx].tier]||[]).map(function(n){return byName[n];}).filter(Boolean);
|
||||
var sum=pool.reduce(function(s,it){return s+it.fee;},0);
|
||||
var rest=items.filter(function(it){return pool.indexOf(it)<0&&it.fee>60;}).sort(function(a,b){return b.fee-a.fee;});
|
||||
var k=0;
|
||||
while(pool.length<dropN&&k<rest.length){pool.push(rest[k]);sum+=rest[k].fee;k++;}
|
||||
while(pool.length>dropN){sum-=pool.pop().fee;}
|
||||
pool.forEach(function(it){it.status=(it.fee>=240)?'弃检':'未检';});
|
||||
return {items:items,plan:plan,actual:plan-sum,dropN:dropN,planN:items.length,checkedCnt:items.length-pool.length};
|
||||
}
|
||||
var CUR_ROW=null;
|
||||
function showCostDetail(rowIdx){
|
||||
CUR_ROW=ROWS[rowIdx];
|
||||
var html='',pSum=0,aSum=0,cnSum=0,pnSum=0;
|
||||
EMP_POOL.forEach(function(e,i){
|
||||
var d=buildPlan(rowIdx,i);
|
||||
pSum+=d.plan;aSum+=d.actual;cnSum+=d.checkedCnt;pnSum+=d.planN;
|
||||
html+='<tr><td>'+(i+1)+'</td><td>'+e.name+'</td><td>'+e.id+'</td><td>'+CUR_ROW.dept+'</td><td>'+CUR_ROW.year+'-'+(6+(i%3))+'-'+(11+i*2)+'</td><td>'+e.hospital+'</td>'+
|
||||
'<td><span class="link" onclick="showItems('+rowIdx+','+i+',\'plan\')">'+d.planN+'</span></td>'+
|
||||
'<td><span class="link" onclick="showItems('+rowIdx+','+i+',\'checked\')">'+d.checkedCnt+' <span class="sub-hint">(含未检/弃检'+d.dropN+')</span></span></td>'+
|
||||
'<td>'+fmtMoney(d.plan)+'</td><td>'+fmtMoney(d.actual)+'</td></tr>';
|
||||
});
|
||||
html+='<tr style="font-weight:600;"><td></td><td>合计</td><td></td><td></td><td></td><td></td><td>'+pnSum+'</td><td>'+cnSum+'</td><td>'+fmtMoney(pSum)+'</td><td>'+fmtMoney(aSum)+'</td></tr>';
|
||||
document.getElementById('cost-detail-title').textContent='「'+CUR_ROW.unit+'」'+CUR_ROW.year+'年 员工费用明细';
|
||||
document.getElementById('cost-detail-body').innerHTML=html;
|
||||
document.getElementById('cost-detail-modal').style.display='flex';
|
||||
}
|
||||
/* 第二层弹窗：应检=全部项目及应检费用；已检=已检项目及费用；两视角均标注体检状态 */
|
||||
function showItems(rowIdx,empIdx,mode){
|
||||
var d=buildPlan(rowIdx,empIdx),e=EMP_POOL[empIdx],rows=[],total=0;
|
||||
d.items.forEach(function(it){
|
||||
if(mode==='plan'||it.status==='已检'){rows.push(it);total+=it.fee;}
|
||||
});
|
||||
var html='';
|
||||
rows.forEach(function(it,i2){
|
||||
var st=it.status==='已检'?'<span class="tag tag-green">已检</span>':(it.status==='弃检'?'<span class="tag tag-red">弃检</span>':'<span class="tag tag-orange">未检</span>');
|
||||
html+='<tr><td>'+(i2+1)+'</td><td>'+it.name+'</td><td>'+it.cat+'</td><td>'+fmtMoney(it.fee)+'</td><td>'+st+'</td></tr>';
|
||||
});
|
||||
html+='<tr style="font-weight:600;"><td></td><td>合计</td><td></td><td>'+fmtMoney(total)+'</td><td></td></tr>';
|
||||
document.getElementById('item-modal-head').innerHTML='<tr><th>序号</th><th>项目名称</th><th>项目类别</th><th>'+(mode==='plan'?'应检项目费用（元）':'项目费用（元）')+'</th><th>体检状态</th></tr>';
|
||||
document.getElementById('item-modal-body').innerHTML=html;
|
||||
document.getElementById('item-modal-title').textContent='「'+e.name+'」'+(mode==='plan'?'应检项目':'已检项目')+'（'+CUR_ROW.year+'年）';
|
||||
document.getElementById('item-modal').style.display='flex';
|
||||
}
|
||||
function hideItemModal(){
|
||||
document.getElementById('item-modal').style.display='none';
|
||||
}
|
||||
function hideCostDetail(){
|
||||
document.getElementById('cost-detail-modal').style.display='none';
|
||||
hideItemModal();
|
||||
}
|
||||
/* Esc 关闭弹窗：先关上层项目弹窗，再关员工费用明细 */
|
||||
document.addEventListener('keydown',function(e){
|
||||
if(e.key!=='Escape')return;
|
||||
var im=document.getElementById('item-modal');
|
||||
if(im.style.display==='flex'){hideItemModal();return;}
|
||||
hideCostDetail();
|
||||
});
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -86,6 +86,14 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 表头计算规则提示（问号+悬浮气泡） */
|
||||
.th-help{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#BFBFBF;color:#fff;font-size:10px;font-weight:600;cursor:help;vertical-align:middle;margin-left:4px;}
|
||||
.th-help:hover{background:var(--primary);}
|
||||
.th-help__tip{visibility:hidden;opacity:0;position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:#fff;font-size:var(--font-sm);font-weight:400;padding:7px 12px;border-radius:var(--radius-sm);white-space:nowrap;z-index:130;transition:opacity .15s;line-height:1.5;}
|
||||
.th-help__tip::before{content:'';position:absolute;top:-4px;left:50%;margin-left:-4px;width:8px;height:8px;background:rgba(0,0,0,0.8);transform:rotate(45deg);}
|
||||
.th-help__tip--right{left:auto;right:-7px;transform:none;}
|
||||
.th-help__tip--right::before{left:auto;right:11px;margin-left:0;}
|
||||
.th-help:hover .th-help__tip{visibility:visible;opacity:1;}
|
||||
/* 三级单位tab下才显示的部门列 */
|
||||
.col-dept{display:none;}
|
||||
body.level-3 .col-dept{display:table-cell;}
|
||||
@@ -140,6 +148,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-employee-master.html" class="sidebar-item">员工体检大表</a>
|
||||
<a href="post-illness-personnel.html" class="sidebar-item">大病人员信息</a>
|
||||
<a href="post-indicator-notify.html" class="sidebar-item">指标异常通知</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
@@ -150,6 +159,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.html" class="sidebar-item active">单位体检人数统计</a>
|
||||
<a href="post-unit-cost-stat.html" class="sidebar-item">单位体检费用统计</a>
|
||||
<a href="post-hospital-count.html" class="sidebar-item">医院体检人数统计</a>
|
||||
<a href="post-doctor-count.html" class="sidebar-item">医生检查人数统计</a>
|
||||
<a href="post-item-stat.html" class="sidebar-item">医院体检项目统计</a>
|
||||
@@ -182,6 +192,16 @@
|
||||
<a href="post-gastro-stat.html" class="sidebar-item">胃肠镜体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-cta-report.html" class="sidebar-item">冠脉CTA体检报告</a>
|
||||
<a href="post-cta-stat.html" class="sidebar-item">冠脉CTA体检统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
@@ -244,7 +264,9 @@
|
||||
<th rowspan="2">已选项目人数</th>
|
||||
<th colspan="3" style="text-align:center;">已预约情况</th>
|
||||
<th rowspan="2">未预约人数</th>
|
||||
<th rowspan="2">大病人数</th>
|
||||
<th rowspan="2">受检率<span class="th-help">?<span class="th-help__tip">受检率 = 实际检查人数 ÷ 应检人数</span></span></th>
|
||||
<th rowspan="2">检出率<span class="th-help">?<span class="th-help__tip">检出率 = 异常人数 ÷ 实际检查人数</span></span></th>
|
||||
<th rowspan="2">患病率<span class="th-help">?<span class="th-help__tip th-help__tip--right">患病率 = 单病种异常人数 ÷ 实际参加检查人数</span></span></th>
|
||||
<th rowspan="2">体检年份</th>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -254,8 +276,8 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>第一采油厂</td><td class="col-dept">采油作业一区</td><td>8000</td><td>5000</td><td>4000</td><td>3000</td><td>1000</td><td>1000</td><td>500</td><td>2025</td></tr>
|
||||
<tr><td>2</td><td>第二采油厂</td><td class="col-dept">采油作业二区</td><td>8000</td><td>5000</td><td>4000</td><td>3000</td><td>1000</td><td>1000</td><td>500</td><td>2025</td></tr>
|
||||
<tr><td>1</td><td>第一采油厂</td><td class="col-dept">采油作业一区</td><td>8000</td><td>5000</td><td>4000</td><td>3000</td><td>1000</td><td>1000</td><td>37.5%</td><td>42.0%</td><td>18.0%</td><td>2025</td></tr>
|
||||
<tr><td>2</td><td>第二采油厂</td><td class="col-dept">采油作业二区</td><td>8000</td><td>5000</td><td>4000</td><td>3000</td><td>1000</td><td>1000</td><td>37.5%</td><td>39.5%</td><td>16.5%</td><td>2025</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -275,12 +297,12 @@
|
||||
<thead>
|
||||
<!-- 按体检医院维度统计 -->
|
||||
<tr>
|
||||
<th>医院名称</th><th>单位</th><th>已选项目人数</th><th>已预约人数</th><th>已参检人数</th><th>未检人数</th><th>未预约人数</th><th>大病人数</th><th>体检年份</th>
|
||||
<th>医院名称</th><th>单位</th><th>已选项目人数</th><th>已预约人数</th><th>已参检人数</th><th>未检人数</th><th>未预约人数</th><th>体检年份</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>泾河医院</td><td>第一采油厂</td><td>5000 <span class="link cell-link" onclick="showAgeStat('已选项目人数')">查看分类统计</span></td><td>4000 <span class="link cell-link" onclick="showAgeStat('已预约人数')">查看分类统计</span></td><td>3000 <span class="link cell-link" onclick="showAgeStat('已参检人数')">查看分类统计</span></td><td>1000 <span class="link cell-link" onclick="showAgeStat('未检人数')">查看分类统计</span></td><td>1000 <span class="link cell-link" onclick="showAgeStat('未预约人数')">查看分类统计</span></td><td>500</td><td>2025</td></tr>
|
||||
<tr><td>庆阳医院</td><td>第二采油厂</td><td>5000 <span class="link cell-link" onclick="showAgeStat('已选项目人数')">查看分类统计</span></td><td>4000 <span class="link cell-link" onclick="showAgeStat('已预约人数')">查看分类统计</span></td><td>3000 <span class="link cell-link" onclick="showAgeStat('已参检人数')">查看分类统计</span></td><td>1000 <span class="link cell-link" onclick="showAgeStat('未检人数')">查看分类统计</span></td><td>1000 <span class="link cell-link" onclick="showAgeStat('未预约人数')">查看分类统计</span></td><td>500</td><td>2025</td></tr>
|
||||
<tr><td>泾河医院</td><td>第一采油厂</td><td>5000 <span class="link cell-link" onclick="showAgeStat('已选项目人数')">查看分类统计</span></td><td>4000 <span class="link cell-link" onclick="showAgeStat('已预约人数')">查看分类统计</span></td><td>3000 <span class="link cell-link" onclick="showAgeStat('已参检人数')">查看分类统计</span></td><td>1000 <span class="link cell-link" onclick="showAgeStat('未检人数')">查看分类统计</span></td><td>1000 <span class="link cell-link" onclick="showAgeStat('未预约人数')">查看分类统计</span></td><td>2025</td></tr>
|
||||
<tr><td>庆阳医院</td><td>第二采油厂</td><td>5000 <span class="link cell-link" onclick="showAgeStat('已选项目人数')">查看分类统计</span></td><td>4000 <span class="link cell-link" onclick="showAgeStat('已预约人数')">查看分类统计</span></td><td>3000 <span class="link cell-link" onclick="showAgeStat('已参检人数')">查看分类统计</span></td><td>1000 <span class="link cell-link" onclick="showAgeStat('未检人数')">查看分类统计</span></td><td>1000 <span class="link cell-link" onclick="showAgeStat('未预约人数')">查看分类统计</span></td><td>2025</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,821 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 冠脉CTA医院承检范围 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 中间弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1001;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{width:860px;max-width:calc(100vw - 48px);max-height:calc(100vh - 80px);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{flex:1;overflow-y:auto;padding:20px 24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:14px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:16px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;}
|
||||
.form-input:disabled{background:#F5F5F5;color:var(--text-secondary);cursor:not-allowed;}
|
||||
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
|
||||
/* 开关 */
|
||||
.switch-row{display:flex;align-items:center;gap:12px;}
|
||||
.switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch.on::after{left:20px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.switch-group{display:flex;align-items:center;gap:28px;}
|
||||
/* 可搜索下拉（筛选栏） */
|
||||
.search-select{position:relative;}
|
||||
.search-select__input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center;}
|
||||
.search-select__input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.search-select__dropdown{position:absolute;top:44px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.1);max-height:220px;overflow-y:auto;z-index:10;display:none;}
|
||||
.search-select__dropdown.show{display:block;}
|
||||
.search-select__option{padding:10px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .15s;color:var(--text-primary);}
|
||||
.search-select__option:hover,.search-select__option.active{background:var(--primary-light);color:var(--primary);}
|
||||
.search-select__empty{padding:10px 12px;font-size:var(--font-sm);color:var(--text-placeholder);text-align:center;}
|
||||
/* 筛选栏搜索下拉 */
|
||||
.filter-bar .search-select{width:200px;}
|
||||
.filter-bar .search-select__input{height:36px;}
|
||||
.filter-bar .search-select__dropdown{top:40px;}
|
||||
/* 分区标题 */
|
||||
.form-section{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin:20px 0 8px;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
|
||||
.form-tip{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:10px;line-height:1.5;}
|
||||
/* 月视图日历 */
|
||||
.cal-nav{display:flex;align-items:center;gap:8px;}
|
||||
.cal-nav__btn{width:26px;height:26px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;}
|
||||
.cal-nav__btn:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.cal-nav__label{font-size:var(--font-sm);font-weight:600;min-width:88px;text-align:center;}
|
||||
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
|
||||
.cal-week{font-size:var(--font-xs);color:var(--text-secondary);text-align:center;padding:2px 0;}
|
||||
.cal-cell{min-height:58px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 5px;background:#fff;}
|
||||
.cal-cell__day{font-size:var(--font-xs);color:var(--text-primary);margin-bottom:4px;}
|
||||
.cal-cell__day .cal-name{color:var(--danger);margin-left:2px;}
|
||||
.cal-cell__input{width:100%;height:24px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-xs);padding:0 4px;outline:none;color:var(--text-primary);}
|
||||
.cal-cell__input:focus{border-color:var(--primary);}
|
||||
.cal-cell__input::placeholder{color:#C0C4CC;}
|
||||
.cal-cell.rest{background:#F5F5F5;border-color:#EBEBEB;}
|
||||
.cal-cell.rest .cal-cell__day{color:var(--text-placeholder);}
|
||||
.cal-cell.rest .cal-name{color:var(--text-placeholder);}
|
||||
.cal-cell__rest{font-size:var(--font-xs);color:var(--text-placeholder);text-align:center;padding:3px 0;}
|
||||
.cal-legend{display:flex;align-items:center;gap:16px;margin-top:10px;font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.cal-legend__item{display:inline-flex;align-items:center;gap:5px;}
|
||||
.cal-legend__box{width:12px;height:12px;border-radius:2px;border:1px solid var(--border);display:inline-block;}
|
||||
.cal-legend__box.rest{background:#F5F5F5;border-color:#EBEBEB;}
|
||||
.cal-legend__box.edit{background:#fff;}
|
||||
/* 详情展示 */
|
||||
.detail-item{margin-bottom:16px;}
|
||||
.detail-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:6px;}
|
||||
.detail-value{font-size:var(--font-sm);color:var(--text-primary);line-height:1.6;}
|
||||
.detail-list-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#F8FBFF;border-radius:var(--radius-sm);margin-bottom:6px;font-size:var(--font-sm);}
|
||||
.detail-list-row .detail-count{color:var(--primary);font-weight:600;}
|
||||
.detail-empty{font-size:var(--font-sm);color:var(--text-placeholder);padding:4px 0;}
|
||||
.detail-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;margin-bottom:4px;}
|
||||
.detail-summary .detail-item{margin-bottom:0;}
|
||||
.cal-cell__count{font-size:var(--font-xs);color:var(--primary);font-weight:600;text-align:center;background:var(--primary-light);border-radius:var(--radius-sm);padding:3px 0;}
|
||||
.cal-cell__count.def{color:var(--text-secondary);font-weight:400;background:#F8FBFF;}
|
||||
.tab-pane{display:none;}
|
||||
.tab-pane.active{display:block;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-cta-hospital-scope.html" class="sidebar-item active">医院承检范围配置</a>
|
||||
<a href="pre-cta-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>承检医院</label>
|
||||
<div class="search-select" id="filter-search-select">
|
||||
<input type="text" class="search-select__input" id="filter-search-input" placeholder="请输入医院名称搜索" autocomplete="off">
|
||||
<input type="hidden" id="filter-search-value">
|
||||
<div class="search-select__dropdown" id="filter-search-dropdown"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="queryTable()">查询</button>
|
||||
<button class="btn btn-default" onclick="resetFilter()">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 冠脉CTA体检 -->
|
||||
<div class="tab-pane active" id="pane-cta">
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">冠脉CTA体检承检范围列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>医院名称</th><th>每日最大承检人数</th><th>承检开始日期</th><th>承检结束日期</th><th>有效标志</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr data-daycounts='{"2026-05-10":"50"}' data-skip-holiday="1" data-skip-sat="1" data-skip-sun="1"><td>1</td><td>长安心血管医院</td><td>80</td><td>2026-03-01</td><td>2026-10-31</td><td><span class="tag tag-green">有效</span></td><td><span class="link" onclick="openDetail(this)">详情</span> <span class="link" style="margin-left:8px;" onclick="openEdit(this)">编辑</span></td></tr>
|
||||
<tr data-daycounts='{}' data-skip-holiday="0" data-skip-sat="0" data-skip-sun="0"><td>2</td><td>庆阳医院</td><td>60</td><td>2026-03-01</td><td>2026-10-31</td><td><span class="tag tag-green">有效</span></td><td><span class="link" onclick="openDetail(this)">详情</span> <span class="link" style="margin-left:8px;" onclick="openEdit(this)">编辑</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 87 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 编辑医院承检范围中间弹窗 -->
|
||||
<div class="modal-overlay" id="scope-modal-overlay">
|
||||
<div class="modal" id="scope-modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">编辑医院承检范围</div>
|
||||
<button class="modal__close" onclick="closeModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 医院</div>
|
||||
<input class="form-input" id="form-hospital" type="text" disabled>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 每日最大承检人数</div>
|
||||
<input class="form-input" id="form-capacity" type="number" min="1" placeholder="未单独设定的日期按此人数承检">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">有效标志</div>
|
||||
<div class="switch-row" style="height:36px;">
|
||||
<div class="switch on" id="switch-valid" onclick="toggleSwitch(this,'switch-valid-label','有效','无效')"></div>
|
||||
<span class="switch-label" id="switch-valid-label">有效</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 承检开始日期</div>
|
||||
<input class="form-input" id="form-start" type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 承检结束日期</div>
|
||||
<input class="form-input" id="form-end" type="date">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">休息日设置</div>
|
||||
<div class="switch-group">
|
||||
<div class="switch-row">
|
||||
<div class="switch" id="switch-skip-holiday" onclick="toggleSkipSwitch(this)"></div>
|
||||
<span class="switch-label">跳过节假日</span>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch" id="switch-skip-sat" onclick="toggleSkipSwitch(this)"></div>
|
||||
<span class="switch-label">跳过周六</span>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch" id="switch-skip-sun" onclick="toggleSkipSwitch(this)"></div>
|
||||
<span class="switch-label">跳过周日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按月设定承检人数 -->
|
||||
<div class="form-section">
|
||||
<span>按月设定承检人数</span>
|
||||
<span class="cal-nav">
|
||||
<button class="cal-nav__btn" onclick="calPrevMonth()">‹</button>
|
||||
<span class="cal-nav__label" id="cal-label"></span>
|
||||
<button class="cal-nav__btn" onclick="calNextMonth()">›</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-tip">每个日期下方可自由设定当日承检人数，默认按"每日最大承检人数"执行；被跳过的节假日与周六日自动置灰、不可设定。</div>
|
||||
<div class="cal-grid" id="cal-weekdays"></div>
|
||||
<div class="cal-grid" id="cal-days" style="margin-top:6px;"></div>
|
||||
<div class="cal-legend">
|
||||
<span class="cal-legend__item"><span class="cal-legend__box edit"></span>可设定日期</span>
|
||||
<span class="cal-legend__item"><span class="cal-legend__box rest"></span>置灰休息日（节假日 / 周六 / 周日 / 超出承检期）</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveEdit()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医院承检范围详情中间弹窗 -->
|
||||
<div class="modal-overlay" id="detail-overlay">
|
||||
<div class="modal" id="detail-modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">医院承检范围详情</div>
|
||||
<button class="modal__close" onclick="closeDetail()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="detail-summary">
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">医院</div>
|
||||
<div class="detail-value" id="detail-hospital"></div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">每日最大承检人数</div>
|
||||
<div class="detail-value" id="detail-capacity"></div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">承检开始日期</div>
|
||||
<div class="detail-value" id="detail-start"></div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">承检结束日期</div>
|
||||
<div class="detail-value" id="detail-end"></div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">有效标志</div>
|
||||
<div class="detail-value" id="detail-valid"></div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">休息日设置</div>
|
||||
<div class="detail-value" id="detail-skips"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按月查看承检人数（只读） -->
|
||||
<div class="form-section">
|
||||
<span>按月查看承检人数</span>
|
||||
<span class="cal-nav">
|
||||
<button class="cal-nav__btn" onclick="detailCalPrevMonth()">‹</button>
|
||||
<span class="cal-nav__label" id="detail-cal-label"></span>
|
||||
<button class="cal-nav__btn" onclick="detailCalNextMonth()">›</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-tip">标"休"的日期为承检休息日，不开放预约。</div>
|
||||
<div class="cal-grid" id="detail-cal-weekdays"></div>
|
||||
<div class="cal-grid" id="detail-cal-days" style="margin-top:6px;"></div>
|
||||
<div class="cal-legend">
|
||||
<span class="cal-legend__item"><span class="cal-legend__box edit"></span>可承检日期</span>
|
||||
<span class="cal-legend__item"><span class="cal-legend__box rest"></span>休息日（节假日 / 周六 / 周日 / 超出承检期）</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-primary" onclick="closeDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 数据 ===== */
|
||||
var hospitalData = {
|
||||
'h1': '庆阳医院',
|
||||
'h2': '兴隆园医院',
|
||||
'h3': '泾河医院',
|
||||
'h4': '西安市中心医院',
|
||||
'h5': '陕西省人民医院',
|
||||
'h6': '咸阳市中心医院',
|
||||
'h7': '宝鸡市人民医院',
|
||||
'h8': '长安心血管医院'
|
||||
};
|
||||
|
||||
/* 2026 年法定节假日（休假日，原型内置） */
|
||||
var holidayData = {
|
||||
'2026-01-01':'元旦','2026-01-02':'元旦','2026-01-03':'元旦',
|
||||
'2026-02-15':'春节','2026-02-16':'春节','2026-02-17':'春节','2026-02-18':'春节','2026-02-19':'春节','2026-02-20':'春节','2026-02-21':'春节','2026-02-22':'春节',
|
||||
'2026-04-04':'清明节','2026-04-05':'清明节','2026-04-06':'清明节',
|
||||
'2026-05-01':'劳动节','2026-05-02':'劳动节','2026-05-03':'劳动节','2026-05-04':'劳动节','2026-05-05':'劳动节',
|
||||
'2026-06-19':'端午节','2026-06-20':'端午节','2026-06-21':'端午节',
|
||||
'2026-09-25':'中秋节','2026-09-26':'中秋节','2026-09-27':'中秋节',
|
||||
'2026-10-01':'国庆节','2026-10-02':'国庆节','2026-10-03':'国庆节','2026-10-04':'国庆节','2026-10-05':'国庆节','2026-10-06':'国庆节','2026-10-07':'国庆节'
|
||||
};
|
||||
|
||||
/* 通用开关 */
|
||||
function toggleSwitch(el, labelId, onText, offText){
|
||||
el.classList.toggle('on');
|
||||
document.getElementById(labelId).textContent = el.classList.contains('on') ? onText : offText;
|
||||
}
|
||||
|
||||
/* ===== 编辑医院承检范围中间弹窗 ===== */
|
||||
var editingTr = null;
|
||||
var calYear = 2026, calMonth = 1; // calMonth: 1-12
|
||||
var dayCounts = {}; // 弹窗内暂存的 { 'YYYY-MM-DD': '100' }
|
||||
|
||||
function pad2(n){ return n < 10 ? '0' + n : '' + n; }
|
||||
function dateKey(y, m, d){ return y + '-' + pad2(m) + '-' + pad2(d); }
|
||||
|
||||
function readRowState(tr){
|
||||
var counts = {};
|
||||
try { counts = JSON.parse(tr.dataset.daycounts || '{}'); } catch(e){}
|
||||
return {
|
||||
daycounts: counts,
|
||||
skipHoliday: tr.dataset.skipHoliday === '1',
|
||||
skipSat: tr.dataset.skipSat === '1',
|
||||
skipSun: tr.dataset.skipSun === '1'
|
||||
};
|
||||
}
|
||||
|
||||
function openEdit(btn){
|
||||
var tr = btn.closest('tr');
|
||||
editingTr = tr;
|
||||
var cells = tr.cells;
|
||||
|
||||
document.getElementById('form-hospital').value = cells[1].textContent.trim();
|
||||
document.getElementById('form-capacity').value = cells[2].textContent.trim();
|
||||
document.getElementById('form-start').value = cells[3].textContent.trim();
|
||||
document.getElementById('form-end').value = cells[4].textContent.trim();
|
||||
|
||||
var valid = cells[5].textContent.trim() === '有效';
|
||||
var sw = document.getElementById('switch-valid');
|
||||
sw.classList.toggle('on', valid);
|
||||
document.getElementById('switch-valid-label').textContent = valid ? '有效' : '无效';
|
||||
|
||||
var state = readRowState(tr);
|
||||
document.getElementById('switch-skip-holiday').classList.toggle('on', state.skipHoliday);
|
||||
document.getElementById('switch-skip-sat').classList.toggle('on', state.skipSat);
|
||||
document.getElementById('switch-skip-sun').classList.toggle('on', state.skipSun);
|
||||
|
||||
dayCounts = state.daycounts;
|
||||
var start = document.getElementById('form-start').value;
|
||||
if(start){
|
||||
calYear = parseInt(start.slice(0,4), 10);
|
||||
calMonth = parseInt(start.slice(5,7), 10);
|
||||
}
|
||||
renderCalendar();
|
||||
|
||||
document.getElementById('scope-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeModal(){
|
||||
document.getElementById('scope-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function getSkipState(){
|
||||
return {
|
||||
skipHoliday: document.getElementById('switch-skip-holiday').classList.contains('on'),
|
||||
skipSat: document.getElementById('switch-skip-sat').classList.contains('on'),
|
||||
skipSun: document.getElementById('switch-skip-sun').classList.contains('on')
|
||||
};
|
||||
}
|
||||
|
||||
/* 切换跳过开关：先留存当前页人数输入，再重渲染日历（置灰状态随之变化） */
|
||||
function toggleSkipSwitch(el){
|
||||
commitCalendarInputs();
|
||||
el.classList.toggle('on');
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
/* 日期是否置灰：承检期之外，或被开关命中的节假日 / 周六 / 周日 */
|
||||
function isRestDay(key, dow){
|
||||
var start = document.getElementById('form-start').value;
|
||||
var end = document.getElementById('form-end').value;
|
||||
if(start && key < start) return true;
|
||||
if(end && key > end) return true;
|
||||
var s = getSkipState();
|
||||
if(s.skipSun && dow === 0) return true;
|
||||
if(s.skipSat && dow === 6) return true;
|
||||
if(s.skipHoliday && holidayData[key]) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
function calPrevMonth(){ commitCalendarInputs(); if(calMonth === 1){ calMonth = 12; calYear--; } else calMonth--; renderCalendar(); }
|
||||
function calNextMonth(){ commitCalendarInputs(); if(calMonth === 12){ calMonth = 1; calYear++; } else calMonth++; renderCalendar(); }
|
||||
|
||||
function renderCalendar(){
|
||||
document.getElementById('cal-label').textContent = calYear + ' 年 ' + calMonth + ' 月';
|
||||
var wk = document.getElementById('cal-weekdays');
|
||||
if(!wk.children.length){
|
||||
wk.innerHTML = ['日','一','二','三','四','五','六'].map(function(w){ return '<div class="cal-week">' + w + '</div>'; }).join('');
|
||||
}
|
||||
var grid = document.getElementById('cal-days');
|
||||
grid.innerHTML = '';
|
||||
var firstDow = new Date(calYear, calMonth - 1, 1).getDay();
|
||||
var daysInMonth = new Date(calYear, calMonth, 0).getDate();
|
||||
for(var i = 0; i < firstDow; i++){
|
||||
var blank = document.createElement('div');
|
||||
grid.appendChild(blank);
|
||||
}
|
||||
for(var d = 1; d <= daysInMonth; d++){
|
||||
var key = dateKey(calYear, calMonth, d);
|
||||
var dow = new Date(calYear, calMonth - 1, d).getDay();
|
||||
var cell = document.createElement('div');
|
||||
var hName = holidayData[key] || '';
|
||||
var dayLabel = '<div class="cal-cell__day">' + d + (hName ? '<span class="cal-name">' + hName + '</span>' : '') + '</div>';
|
||||
if(isRestDay(key, dow)){
|
||||
cell.className = 'cal-cell rest';
|
||||
cell.innerHTML = dayLabel + '<div class="cal-cell__rest">休</div>';
|
||||
} else {
|
||||
cell.className = 'cal-cell';
|
||||
cell.innerHTML = dayLabel + '<input type="number" min="0" class="cal-cell__input" data-key="' + key + '" placeholder="' + (document.getElementById('form-capacity').value.trim() || '人数') + '" value="' + (dayCounts[key] != null ? dayCounts[key] : '') + '">';
|
||||
}
|
||||
grid.appendChild(cell);
|
||||
}
|
||||
}
|
||||
|
||||
/* 把当前页输入写回 dayCounts */
|
||||
function commitCalendarInputs(){
|
||||
document.querySelectorAll('#cal-days .cal-cell__input').forEach(function(inp){
|
||||
var v = inp.value.trim();
|
||||
if(v) dayCounts[inp.dataset.key] = v;
|
||||
else delete dayCounts[inp.dataset.key];
|
||||
});
|
||||
}
|
||||
|
||||
/* 承检起止日期变化时重渲染（置灰范围随之变化） */
|
||||
function bindDateReRender(){
|
||||
['form-start','form-end','form-capacity'].forEach(function(id){
|
||||
document.getElementById(id).addEventListener('change', function(){
|
||||
commitCalendarInputs();
|
||||
renderCalendar();
|
||||
});
|
||||
});
|
||||
}
|
||||
bindDateReRender();
|
||||
|
||||
/* 保存编辑 */
|
||||
function saveEdit(){
|
||||
if(!editingTr){ return; }
|
||||
var name = document.getElementById('form-hospital').value.trim();
|
||||
if(!name){ alert('未找到医院信息'); return; }
|
||||
var capacity = document.getElementById('form-capacity').value.trim();
|
||||
if(!capacity || Number(capacity) <= 0){ alert('请输入正确的每日最大承检人数'); return; }
|
||||
var start = document.getElementById('form-start').value;
|
||||
var end = document.getElementById('form-end').value;
|
||||
if(!start){ alert('请选择承检开始日期'); return; }
|
||||
if(!end){ alert('请选择承检结束日期'); return; }
|
||||
if(start > end){ alert('承检结束日期不能早于开始日期'); return; }
|
||||
|
||||
commitCalendarInputs();
|
||||
var s = getSkipState();
|
||||
var valid = document.getElementById('switch-valid').classList.contains('on');
|
||||
var cells = editingTr.cells;
|
||||
cells[2].textContent = capacity;
|
||||
cells[3].textContent = start;
|
||||
cells[4].textContent = end;
|
||||
cells[5].innerHTML = valid ? '<span class="tag tag-green">有效</span>' : '<span class="tag tag-red">无效</span>';
|
||||
editingTr.dataset.daycounts = JSON.stringify(dayCounts);
|
||||
editingTr.dataset.skipHoliday = s.skipHoliday ? '1' : '0';
|
||||
editingTr.dataset.skipSat = s.skipSat ? '1' : '0';
|
||||
editingTr.dataset.skipSun = s.skipSun ? '1' : '0';
|
||||
closeModal();
|
||||
}
|
||||
|
||||
/* 筛选栏可搜索下拉 */
|
||||
(function(){
|
||||
var input = document.getElementById('filter-search-input');
|
||||
var dropdown = document.getElementById('filter-search-dropdown');
|
||||
var hidden = document.getElementById('filter-search-value');
|
||||
|
||||
function renderOptions(keyword){
|
||||
dropdown.innerHTML = '';
|
||||
var kw = keyword.trim().toLowerCase();
|
||||
var has = false;
|
||||
for(var key in hospitalData){
|
||||
var name = hospitalData[key];
|
||||
if(!kw || name.toLowerCase().indexOf(kw) !== -1){
|
||||
has = true;
|
||||
var opt = document.createElement('div');
|
||||
opt.className = 'search-select__option';
|
||||
if(hidden.value === key) opt.classList.add('active');
|
||||
opt.textContent = name;
|
||||
opt.dataset.value = key;
|
||||
opt.onclick = function(){
|
||||
hidden.value = key;
|
||||
input.value = name;
|
||||
dropdown.classList.remove('show');
|
||||
};
|
||||
dropdown.appendChild(opt);
|
||||
}
|
||||
}
|
||||
if(!has){
|
||||
var empty = document.createElement('div');
|
||||
empty.className = 'search-select__empty';
|
||||
empty.textContent = '无匹配医院';
|
||||
dropdown.appendChild(empty);
|
||||
}
|
||||
}
|
||||
|
||||
input.addEventListener('focus', function(){
|
||||
renderOptions(this.value);
|
||||
dropdown.classList.add('show');
|
||||
});
|
||||
input.addEventListener('input', function(){
|
||||
hidden.value = '';
|
||||
renderOptions(this.value);
|
||||
dropdown.classList.add('show');
|
||||
});
|
||||
document.addEventListener('click', function(e){
|
||||
if(!e.target.closest('#filter-search-select')){
|
||||
dropdown.classList.remove('show');
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
/* 筛选查询 */
|
||||
function queryTable(){
|
||||
var value = document.getElementById('filter-search-value').value;
|
||||
var activePane = document.querySelector('.tab-pane.active');
|
||||
if(!activePane) return;
|
||||
activePane.querySelectorAll('tbody tr').forEach(function(tr){
|
||||
var name = tr.cells[1] ? tr.cells[1].textContent.trim() : '';
|
||||
if(!value || (hospitalData[value] && name === hospitalData[value])){
|
||||
tr.style.display = '';
|
||||
} else {
|
||||
tr.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* 筛选重置 */
|
||||
function resetFilter(){
|
||||
document.getElementById('filter-search-input').value = '';
|
||||
document.getElementById('filter-search-value').value = '';
|
||||
document.getElementById('filter-search-dropdown').innerHTML = '';
|
||||
var activePane = document.querySelector('.tab-pane.active');
|
||||
if(activePane) activePane.querySelectorAll('tbody tr').forEach(function(tr){ tr.style.display = ''; });
|
||||
}
|
||||
|
||||
/* 详情（只读月历） */
|
||||
var detailState = null; // 当前查看行的承检配置快照
|
||||
var detailCalYear = 2026, detailCalMonth = 1;
|
||||
|
||||
function isRestDayByState(key, dow, s){
|
||||
if(s.start && key < s.start) return true;
|
||||
if(s.end && key > s.end) return true;
|
||||
if(s.skipSun && dow === 0) return true;
|
||||
if(s.skipSat && dow === 6) return true;
|
||||
if(s.skipHoliday && holidayData[key]) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
function detailCalPrevMonth(){ if(detailCalMonth === 1){ detailCalMonth = 12; detailCalYear--; } else detailCalMonth--; renderDetailCalendar(); }
|
||||
function detailCalNextMonth(){ if(detailCalMonth === 12){ detailCalMonth = 1; detailCalYear++; } else detailCalMonth++; renderDetailCalendar(); }
|
||||
|
||||
function renderDetailCalendar(){
|
||||
if(!detailState) return;
|
||||
document.getElementById('detail-cal-label').textContent = detailCalYear + ' 年 ' + detailCalMonth + ' 月';
|
||||
var wk = document.getElementById('detail-cal-weekdays');
|
||||
if(!wk.children.length){
|
||||
wk.innerHTML = ['日','一','二','三','四','五','六'].map(function(w){ return '<div class="cal-week">' + w + '</div>'; }).join('');
|
||||
}
|
||||
var grid = document.getElementById('detail-cal-days');
|
||||
grid.innerHTML = '';
|
||||
var firstDow = new Date(detailCalYear, detailCalMonth - 1, 1).getDay();
|
||||
var daysInMonth = new Date(detailCalYear, detailCalMonth, 0).getDate();
|
||||
for(var i = 0; i < firstDow; i++){
|
||||
grid.appendChild(document.createElement('div'));
|
||||
}
|
||||
for(var d = 1; d <= daysInMonth; d++){
|
||||
var key = dateKey(detailCalYear, detailCalMonth, d);
|
||||
var dow = new Date(detailCalYear, detailCalMonth - 1, d).getDay();
|
||||
var cell = document.createElement('div');
|
||||
var hName = holidayData[key] || '';
|
||||
var dayLabel = '<div class="cal-cell__day">' + d + (hName ? '<span class="cal-name">' + hName + '</span>' : '') + '</div>';
|
||||
if(isRestDayByState(key, dow, detailState)){
|
||||
cell.className = 'cal-cell rest';
|
||||
cell.innerHTML = dayLabel + '<div class="cal-cell__rest">休</div>';
|
||||
} else {
|
||||
cell.className = 'cal-cell';
|
||||
var v = detailState.daycounts[key];
|
||||
cell.innerHTML = dayLabel + (v != null && v !== ''
|
||||
? '<div class="cal-cell__count">' + v + ' 人</div>'
|
||||
: '<div class="cal-cell__count def">' + detailState.capacity + ' 人</div>');
|
||||
}
|
||||
grid.appendChild(cell);
|
||||
}
|
||||
}
|
||||
|
||||
function openDetail(el){
|
||||
var tr = el.closest('tr');
|
||||
var cells = tr.cells;
|
||||
document.getElementById('detail-hospital').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('detail-capacity').textContent = cells[2].textContent.trim() + ' 人/日';
|
||||
document.getElementById('detail-start').textContent = cells[3].textContent.trim();
|
||||
document.getElementById('detail-end').textContent = cells[4].textContent.trim();
|
||||
var valid = cells[5].textContent.trim() === '有效';
|
||||
document.getElementById('detail-valid').innerHTML = valid
|
||||
? '<span class="tag tag-green">有效</span>'
|
||||
: '<span class="tag tag-red">无效</span>';
|
||||
|
||||
var state = readRowState(tr);
|
||||
var skipTags = [];
|
||||
if(state.skipHoliday) skipTags.push('<span class="tag tag-orange">跳过节假日</span>');
|
||||
if(state.skipSat) skipTags.push('<span class="tag tag-orange">跳过周六</span>');
|
||||
if(state.skipSun) skipTags.push('<span class="tag tag-orange">跳过周日</span>');
|
||||
document.getElementById('detail-skips').innerHTML = skipTags.length ? skipTags.join(' ') : '<span class="tag tag-gray">不跳过</span>';
|
||||
|
||||
detailState = {
|
||||
daycounts: state.daycounts,
|
||||
skipHoliday: state.skipHoliday,
|
||||
skipSat: state.skipSat,
|
||||
skipSun: state.skipSun,
|
||||
capacity: cells[2].textContent.trim(),
|
||||
start: cells[3].textContent.trim(),
|
||||
end: cells[4].textContent.trim()
|
||||
};
|
||||
var start = detailState.start;
|
||||
if(start){
|
||||
detailCalYear = parseInt(start.slice(0,4), 10);
|
||||
detailCalMonth = parseInt(start.slice(5,7), 10);
|
||||
}
|
||||
renderDetailCalendar();
|
||||
|
||||
document.getElementById('detail-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeDetail(){
|
||||
document.getElementById('detail-overlay').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,289 +1,299 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 员工预选信息 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 员工预选信息 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item active">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-cta-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-cta-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item active">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选计划名称：</label>
|
||||
<select class="filter-select" style="min-width:180px;">
|
||||
<option>请选择</option>
|
||||
<option>2026年度胃肠镜预选</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油四厂-工程技术科</option>
|
||||
<option>采油四厂-综合办</option>
|
||||
<option>采油五厂-采油队</option>
|
||||
<option>采油六厂-地质所</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:110px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入身份证号" style="min-width:170px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">员工预选信息</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th><th>员工编号</th><th>身份证号</th><th>单位</th><th>部门</th><th>预选计划</th><th>预选医院</th><th>提交时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>陈伟</td><td>30078912</td><td>610103197809220015</td><td>采油四厂</td><td>工程技术科</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td>2026-03-05 10:23</td></tr>
|
||||
<tr><td>刘芳</td><td>30082345</td><td>610103197905120034</td><td>采油四厂</td><td>综合办</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td>2026-03-06 14:41</td></tr>
|
||||
<tr><td>王强</td><td>30085678</td><td>610103197403080024</td><td>采油五厂</td><td>采油队</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td>2026-04-02 09:15</td></tr>
|
||||
<tr><td>李娜</td><td>30088901</td><td>610103198511090026</td><td>采油五厂</td><td>财务科</td><td>2026年度胃肠镜预选</td><td>长安胃肠镜医院</td><td>2026-04-08 16:52</td></tr>
|
||||
<tr><td>赵敏</td><td>30094567</td><td>610103196807260046</td><td>采油六厂</td><td>地质所</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td>2026-04-11 11:30</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 5 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选计划名称：</label>
|
||||
<select class="filter-select" style="min-width:180px;">
|
||||
<option>请选择</option>
|
||||
<option>2026年度胃肠镜预选</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油四厂-工程技术科</option>
|
||||
<option>采油四厂-综合办</option>
|
||||
<option>采油五厂-采油队</option>
|
||||
<option>采油六厂-地质所</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:110px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入身份证号" style="min-width:170px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">员工预选信息</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th><th>员工编号</th><th>身份证号</th><th>单位</th><th>部门</th><th>预选计划</th><th>预选医院</th><th>提交时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>陈伟</td><td>30078912</td><td>610103197809220015</td><td>采油四厂</td><td>工程技术科</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td>2026-03-05 10:23</td></tr>
|
||||
<tr><td>刘芳</td><td>30082345</td><td>610103197905120034</td><td>采油四厂</td><td>综合办</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td>2026-03-06 14:41</td></tr>
|
||||
<tr><td>王强</td><td>30085678</td><td>610103197403080024</td><td>采油五厂</td><td>采油队</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td>2026-04-02 09:15</td></tr>
|
||||
<tr><td>李娜</td><td>30088901</td><td>610103198511090026</td><td>采油五厂</td><td>财务科</td><td>2026年度胃肠镜预选</td><td>长安胃肠镜医院</td><td>2026-04-08 16:52</td></tr>
|
||||
<tr><td>赵敏</td><td>30094567</td><td>610103196807260046</td><td>采油六厂</td><td>地质所</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td>2026-04-11 11:30</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 5 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,403 +1,413 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 单位预选计划 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 单位预选计划 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item active">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-cta-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-cta-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item active">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选计划名称：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入预选计划名称" style="min-width:180px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>有效标志：</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>请选择</option>
|
||||
<option>有效</option>
|
||||
<option>无效</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-primary" onclick="openEditModal()">+ 新增</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位预选计划</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位</th><th>体检年份</th><th>预选计划名称</th><th>预选开始日期</th><th>预选结束日期</th><th>创建日期</th><th>有效标志</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>采油四厂</td><td>2026</td><td>2026年度胃肠镜预选</td><td>2026-03-01</td><td>2026-03-31</td><td>2026-02-20</td><td><span class="tag tag-green">有效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>采油五厂</td><td>2026</td><td>2026年度胃肠镜预选</td><td>2026-04-01</td><td>2026-04-30</td><td>2026-03-15</td><td><span class="tag tag-green">有效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>采油六厂</td><td>2025</td><td>2025年度胃肠镜预选</td><td>2025-03-01</td><td>2025-03-31</td><td>2025-02-18</td><td><span class="tag tag-red">无效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 3 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑预选计划弹窗 -->
|
||||
<div class="modal-overlay" id="edit-modal-overlay" onclick="if(event.target===this)closeEditModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="edit-modal-title">新增预选计划</div>
|
||||
<button class="modal__close" onclick="closeEditModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 单位</div>
|
||||
<select class="form-select" id="form-unit">
|
||||
<option value="">请选择单位</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检年份</div>
|
||||
<input class="form-input" id="form-year" type="text" placeholder="请输入体检年份" value="2026">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选计划名称</div>
|
||||
<input class="form-input" id="form-name" type="text" placeholder="请输入预选计划名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选开始日期</div>
|
||||
<input class="form-input" id="form-start" type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选结束日期</div>
|
||||
<input class="form-input" id="form-end" type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">有效标志</div>
|
||||
<select class="form-select" id="form-valid">
|
||||
<option>有效</option>
|
||||
<option>无效</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeEditModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveEditModal()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* 当前正在编辑的行（null 表示新增） */
|
||||
var editingRow = null;
|
||||
|
||||
function openEditModal(row){
|
||||
var isEdit = !!row;
|
||||
editingRow = isEdit ? row.closest('tr') : null;
|
||||
document.getElementById('edit-modal-title').textContent = isEdit ? '编辑预选计划' : '新增预选计划';
|
||||
if(isEdit){
|
||||
var tds = row.closest('tr').querySelectorAll('td');
|
||||
document.getElementById('form-unit').value = tds[0].textContent;
|
||||
document.getElementById('form-year').value = tds[1].textContent;
|
||||
document.getElementById('form-name').value = tds[2].textContent;
|
||||
document.getElementById('form-start').value = tds[3].textContent;
|
||||
document.getElementById('form-end').value = tds[4].textContent;
|
||||
document.getElementById('form-valid').value = tds[6].textContent.trim();
|
||||
} else {
|
||||
document.getElementById('form-unit').value = '';
|
||||
document.getElementById('form-year').value = '2026';
|
||||
document.getElementById('form-name').value = '';
|
||||
document.getElementById('form-start').value = '';
|
||||
document.getElementById('form-end').value = '';
|
||||
document.getElementById('form-valid').value = '有效';
|
||||
}
|
||||
document.getElementById('edit-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeEditModal(){
|
||||
document.getElementById('edit-modal-overlay').classList.remove('open');
|
||||
}
|
||||
function saveEditModal(){
|
||||
var unit = document.getElementById('form-unit');
|
||||
var year = document.getElementById('form-year').value.trim();
|
||||
var name = document.getElementById('form-name').value.trim();
|
||||
var start = document.getElementById('form-start').value;
|
||||
var end = document.getElementById('form-end').value;
|
||||
var valid = document.getElementById('form-valid').value;
|
||||
if(!unit.value){ alert('请选择单位'); unit.focus(); return; }
|
||||
if(!/^\d{4}$/.test(year)){ alert('请输入 4 位体检年份'); document.getElementById('form-year').focus(); return; }
|
||||
if(!name){ alert('请输入预选计划名称'); document.getElementById('form-name').focus(); return; }
|
||||
if(!start){ alert('请选择预选开始日期'); return; }
|
||||
if(!end){ alert('请选择预选结束日期'); return; }
|
||||
if(end < start){ alert('预选结束日期不能早于开始日期'); return; }
|
||||
var validTag = valid === '有效'
|
||||
? '<span class="tag tag-green">有效</span>'
|
||||
: '<span class="tag tag-red">无效</span>';
|
||||
var actions = '<span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span>';
|
||||
if(editingRow){
|
||||
/* 编辑：回写当前行 */
|
||||
var tds = editingRow.querySelectorAll('td');
|
||||
tds[0].textContent = unit.value;
|
||||
tds[1].textContent = year;
|
||||
tds[2].textContent = name;
|
||||
tds[3].textContent = start;
|
||||
tds[4].textContent = end;
|
||||
tds[5].textContent = new Date().toISOString().slice(0,10);
|
||||
tds[6].innerHTML = validTag;
|
||||
editingRow = null;
|
||||
} else {
|
||||
/* 新增：插入到列表第一行 */
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td>' + unit.value + '</td>' +
|
||||
'<td>' + year + '</td>' +
|
||||
'<td>' + name + '</td>' +
|
||||
'<td>' + start + '</td>' +
|
||||
'<td>' + end + '</td>' +
|
||||
'<td>' + new Date().toISOString().slice(0,10) + '</td>' +
|
||||
'<td>' + validTag + '</td>' +
|
||||
'<td>' + actions + '</td>';
|
||||
tbody.insertBefore(tr, tbody.firstChild);
|
||||
updateTotalCount(1);
|
||||
}
|
||||
closeEditModal();
|
||||
}
|
||||
|
||||
/* 更新分页总数 */
|
||||
function updateTotalCount(delta){
|
||||
var el = document.querySelector('.pagination span');
|
||||
if(!el) return;
|
||||
var m = el.textContent.match(/共\s*(\d+)\s*条/);
|
||||
if(m) el.textContent = '共 ' + (parseInt(m[1],10) + delta) + ' 条';
|
||||
}
|
||||
function deleteRow(el){
|
||||
if(!confirm('确定删除该预选计划吗？')) return;
|
||||
el.closest('tr').remove();
|
||||
updateTotalCount(-1);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选计划名称：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入预选计划名称" style="min-width:180px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>有效标志：</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>请选择</option>
|
||||
<option>有效</option>
|
||||
<option>无效</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-primary" onclick="openEditModal()">+ 新增</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位预选计划</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位</th><th>体检年份</th><th>预选计划名称</th><th>预选开始日期</th><th>预选结束日期</th><th>创建日期</th><th>有效标志</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>采油四厂</td><td>2026</td><td>2026年度胃肠镜预选</td><td>2026-03-01</td><td>2026-03-31</td><td>2026-02-20</td><td><span class="tag tag-green">有效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>采油五厂</td><td>2026</td><td>2026年度胃肠镜预选</td><td>2026-04-01</td><td>2026-04-30</td><td>2026-03-15</td><td><span class="tag tag-green">有效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>采油六厂</td><td>2025</td><td>2025年度胃肠镜预选</td><td>2025-03-01</td><td>2025-03-31</td><td>2025-02-18</td><td><span class="tag tag-red">无效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 3 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑预选计划弹窗 -->
|
||||
<div class="modal-overlay" id="edit-modal-overlay" onclick="if(event.target===this)closeEditModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="edit-modal-title">新增预选计划</div>
|
||||
<button class="modal__close" onclick="closeEditModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 单位</div>
|
||||
<select class="form-select" id="form-unit">
|
||||
<option value="">请选择单位</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检年份</div>
|
||||
<input class="form-input" id="form-year" type="text" placeholder="请输入体检年份" value="2026">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选计划名称</div>
|
||||
<input class="form-input" id="form-name" type="text" placeholder="请输入预选计划名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选开始日期</div>
|
||||
<input class="form-input" id="form-start" type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选结束日期</div>
|
||||
<input class="form-input" id="form-end" type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">有效标志</div>
|
||||
<select class="form-select" id="form-valid">
|
||||
<option>有效</option>
|
||||
<option>无效</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeEditModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveEditModal()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* 当前正在编辑的行（null 表示新增） */
|
||||
var editingRow = null;
|
||||
|
||||
function openEditModal(row){
|
||||
var isEdit = !!row;
|
||||
editingRow = isEdit ? row.closest('tr') : null;
|
||||
document.getElementById('edit-modal-title').textContent = isEdit ? '编辑预选计划' : '新增预选计划';
|
||||
if(isEdit){
|
||||
var tds = row.closest('tr').querySelectorAll('td');
|
||||
document.getElementById('form-unit').value = tds[0].textContent;
|
||||
document.getElementById('form-year').value = tds[1].textContent;
|
||||
document.getElementById('form-name').value = tds[2].textContent;
|
||||
document.getElementById('form-start').value = tds[3].textContent;
|
||||
document.getElementById('form-end').value = tds[4].textContent;
|
||||
document.getElementById('form-valid').value = tds[6].textContent.trim();
|
||||
} else {
|
||||
document.getElementById('form-unit').value = '';
|
||||
document.getElementById('form-year').value = '2026';
|
||||
document.getElementById('form-name').value = '';
|
||||
document.getElementById('form-start').value = '';
|
||||
document.getElementById('form-end').value = '';
|
||||
document.getElementById('form-valid').value = '有效';
|
||||
}
|
||||
document.getElementById('edit-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeEditModal(){
|
||||
document.getElementById('edit-modal-overlay').classList.remove('open');
|
||||
}
|
||||
function saveEditModal(){
|
||||
var unit = document.getElementById('form-unit');
|
||||
var year = document.getElementById('form-year').value.trim();
|
||||
var name = document.getElementById('form-name').value.trim();
|
||||
var start = document.getElementById('form-start').value;
|
||||
var end = document.getElementById('form-end').value;
|
||||
var valid = document.getElementById('form-valid').value;
|
||||
if(!unit.value){ alert('请选择单位'); unit.focus(); return; }
|
||||
if(!/^\d{4}$/.test(year)){ alert('请输入 4 位体检年份'); document.getElementById('form-year').focus(); return; }
|
||||
if(!name){ alert('请输入预选计划名称'); document.getElementById('form-name').focus(); return; }
|
||||
if(!start){ alert('请选择预选开始日期'); return; }
|
||||
if(!end){ alert('请选择预选结束日期'); return; }
|
||||
if(end < start){ alert('预选结束日期不能早于开始日期'); return; }
|
||||
var validTag = valid === '有效'
|
||||
? '<span class="tag tag-green">有效</span>'
|
||||
: '<span class="tag tag-red">无效</span>';
|
||||
var actions = '<span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span>';
|
||||
if(editingRow){
|
||||
/* 编辑：回写当前行 */
|
||||
var tds = editingRow.querySelectorAll('td');
|
||||
tds[0].textContent = unit.value;
|
||||
tds[1].textContent = year;
|
||||
tds[2].textContent = name;
|
||||
tds[3].textContent = start;
|
||||
tds[4].textContent = end;
|
||||
tds[5].textContent = new Date().toISOString().slice(0,10);
|
||||
tds[6].innerHTML = validTag;
|
||||
editingRow = null;
|
||||
} else {
|
||||
/* 新增：插入到列表第一行 */
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td>' + unit.value + '</td>' +
|
||||
'<td>' + year + '</td>' +
|
||||
'<td>' + name + '</td>' +
|
||||
'<td>' + start + '</td>' +
|
||||
'<td>' + end + '</td>' +
|
||||
'<td>' + new Date().toISOString().slice(0,10) + '</td>' +
|
||||
'<td>' + validTag + '</td>' +
|
||||
'<td>' + actions + '</td>';
|
||||
tbody.insertBefore(tr, tbody.firstChild);
|
||||
updateTotalCount(1);
|
||||
}
|
||||
closeEditModal();
|
||||
}
|
||||
|
||||
/* 更新分页总数 */
|
||||
function updateTotalCount(delta){
|
||||
var el = document.querySelector('.pagination span');
|
||||
if(!el) return;
|
||||
var m = el.textContent.match(/共\s*(\d+)\s*条/);
|
||||
if(m) el.textContent = '共 ' + (parseInt(m[1],10) + delta) + ' 条';
|
||||
}
|
||||
function deleteRow(el){
|
||||
if(!confirm('确定删除该预选计划吗？')) return;
|
||||
el.closest('tr').remove();
|
||||
updateTotalCount(-1);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,394 +1,404 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 预选信息统计 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* Tab 切换 */
|
||||
.tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-sm);padding:0 24px;margin-bottom:0;}
|
||||
.tab{padding:14px 24px;font-size:var(--font-base);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;user-select:none;}
|
||||
.tab:hover{color:var(--primary);}
|
||||
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
||||
.num-link{color:var(--primary);cursor:pointer;font-weight:600;}
|
||||
.num-link:hover{color:#40a9ff;text-decoration:underline;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 预选信息统计 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* Tab 切换 */
|
||||
.tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-sm);padding:0 24px;margin-bottom:0;}
|
||||
.tab{padding:14px 24px;font-size:var(--font-base);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;user-select:none;}
|
||||
.tab:hover{color:var(--primary);}
|
||||
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
||||
.num-link{color:var(--primary);cursor:pointer;font-weight:600;}
|
||||
.num-link:hover{color:#40a9ff;text-decoration:underline;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item active">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-cta-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-cta-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item active">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="tabs">
|
||||
<div class="tab active" data-tab="dept" onclick="switchTab('dept')">部门</div>
|
||||
<div class="tab" data-tab="hospital" onclick="switchTab('hospital')">医院</div>
|
||||
</div>
|
||||
|
||||
<!-- 部门tab -->
|
||||
<div id="panel-dept">
|
||||
<div class="filter-bar" style="border-radius:0 0 var(--radius-md) var(--radius-md);margin-bottom:16px;">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂-工程技术科</option>
|
||||
<option>采油四厂-综合办</option>
|
||||
<option>采油五厂-采油队</option>
|
||||
<option>采油六厂-地质所</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">预选信息统计（部门）</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位</th><th>部门</th><th>体检年份</th><th>预选计划</th><th>预选医院</th><th>预选人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>采油四厂</td><td>工程技术科</td><td>2026</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td><span class="num-link" onclick="openDetail('采油四厂 工程技术科 / 宁夏宝石花医院')">12</span></td></tr>
|
||||
<tr><td>采油四厂</td><td>综合办</td><td>2026</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td><span class="num-link" onclick="openDetail('采油四厂 综合办 / 宁夏宝石花医院')">8</span></td></tr>
|
||||
<tr><td>采油五厂</td><td>采油队</td><td>2026</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td><span class="num-link" onclick="openDetail('采油五厂 采油队 / CQ油田医院')">23</span></td></tr>
|
||||
<tr><td>采油六厂</td><td>地质所</td><td>2026</td><td>2026年度胃肠镜预选</td><td>长安胃肠镜医院</td><td><span class="num-link" onclick="openDetail('采油六厂 地质所 / 长安胃肠镜医院')">6</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医院tab -->
|
||||
<div id="panel-hospital" style="display:none;">
|
||||
<div class="filter-bar" style="border-radius:0 0 var(--radius-md) var(--radius-md);margin-bottom:16px;">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">预选信息统计（医院）</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>预选医院</th><th>体检年份</th><th>单位</th><th>预选人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>宁夏宝石花医院</td><td>2026</td><td>采油四厂</td><td><span class="num-link" onclick="openDetail('宁夏宝石花医院 / 采油四厂')">20</span></td></tr>
|
||||
<tr><td>宁夏宝石花医院</td><td>2026</td><td>采油五厂</td><td><span class="num-link" onclick="openDetail('宁夏宝石花医院 / 采油五厂')">15</span></td></tr>
|
||||
<tr><td>CQ油田医院</td><td>2026</td><td>采油五厂</td><td><span class="num-link" onclick="openDetail('CQ油田医院 / 采油五厂')">31</span></td></tr>
|
||||
<tr><td>长安胃肠镜医院</td><td>2026</td><td>采油六厂</td><td><span class="num-link" onclick="openDetail('长安胃肠镜医院 / 采油六厂')">9</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 预选人数明细弹窗 -->
|
||||
<div class="modal-overlay" id="detail-modal-overlay" onclick="if(event.target===this)closeDetail()">
|
||||
<div class="modal" style="width:860px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="detail-title">预选人数明细</div>
|
||||
<button class="modal__close" onclick="closeDetail()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="display:flex;justify-content:flex-end;margin-bottom:12px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>姓名</th><th>员工编号</th><th>身份证号</th><th>单位</th><th>部门</th><th>预选医院</th><th>提交时间</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>陈伟</td><td>30078912</td><td>610103197809220015</td><td>采油四厂</td><td>工程技术科</td><td>宁夏宝石花医院</td><td>2026-03-05 10:23</td></tr>
|
||||
<tr><td>刘芳</td><td>30082345</td><td>610103197905120034</td><td>采油四厂</td><td>综合办</td><td>宁夏宝石花医院</td><td>2026-03-06 14:41</td></tr>
|
||||
<tr><td>王强</td><td>30085678</td><td>610103197403080024</td><td>采油五厂</td><td>采油队</td><td>CQ油田医院</td><td>2026-04-02 09:15</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* tab 切换 */
|
||||
function switchTab(key){
|
||||
document.querySelectorAll('.tab').forEach(function(t){
|
||||
t.classList.toggle('active', t.getAttribute('data-tab') === key);
|
||||
});
|
||||
document.getElementById('panel-dept').style.display = key === 'dept' ? '' : 'none';
|
||||
document.getElementById('panel-hospital').style.display = key === 'hospital' ? '' : 'none';
|
||||
}
|
||||
|
||||
/* 预选人数明细 */
|
||||
function openDetail(title){
|
||||
document.getElementById('detail-title').textContent = '预选人数明细 - ' + title;
|
||||
document.getElementById('detail-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeDetail(){
|
||||
document.getElementById('detail-modal-overlay').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="tabs">
|
||||
<div class="tab active" data-tab="dept" onclick="switchTab('dept')">部门</div>
|
||||
<div class="tab" data-tab="hospital" onclick="switchTab('hospital')">医院</div>
|
||||
</div>
|
||||
|
||||
<!-- 部门tab -->
|
||||
<div id="panel-dept">
|
||||
<div class="filter-bar" style="border-radius:0 0 var(--radius-md) var(--radius-md);margin-bottom:16px;">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂-工程技术科</option>
|
||||
<option>采油四厂-综合办</option>
|
||||
<option>采油五厂-采油队</option>
|
||||
<option>采油六厂-地质所</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">预选信息统计（部门）</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位</th><th>部门</th><th>体检年份</th><th>预选计划</th><th>预选医院</th><th>预选人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>采油四厂</td><td>工程技术科</td><td>2026</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td><span class="num-link" onclick="openDetail('采油四厂 工程技术科 / 宁夏宝石花医院')">12</span></td></tr>
|
||||
<tr><td>采油四厂</td><td>综合办</td><td>2026</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td><span class="num-link" onclick="openDetail('采油四厂 综合办 / 宁夏宝石花医院')">8</span></td></tr>
|
||||
<tr><td>采油五厂</td><td>采油队</td><td>2026</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td><span class="num-link" onclick="openDetail('采油五厂 采油队 / CQ油田医院')">23</span></td></tr>
|
||||
<tr><td>采油六厂</td><td>地质所</td><td>2026</td><td>2026年度胃肠镜预选</td><td>长安胃肠镜医院</td><td><span class="num-link" onclick="openDetail('采油六厂 地质所 / 长安胃肠镜医院')">6</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医院tab -->
|
||||
<div id="panel-hospital" style="display:none;">
|
||||
<div class="filter-bar" style="border-radius:0 0 var(--radius-md) var(--radius-md);margin-bottom:16px;">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">预选信息统计（医院）</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>预选医院</th><th>体检年份</th><th>单位</th><th>预选人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>宁夏宝石花医院</td><td>2026</td><td>采油四厂</td><td><span class="num-link" onclick="openDetail('宁夏宝石花医院 / 采油四厂')">20</span></td></tr>
|
||||
<tr><td>宁夏宝石花医院</td><td>2026</td><td>采油五厂</td><td><span class="num-link" onclick="openDetail('宁夏宝石花医院 / 采油五厂')">15</span></td></tr>
|
||||
<tr><td>CQ油田医院</td><td>2026</td><td>采油五厂</td><td><span class="num-link" onclick="openDetail('CQ油田医院 / 采油五厂')">31</span></td></tr>
|
||||
<tr><td>长安胃肠镜医院</td><td>2026</td><td>采油六厂</td><td><span class="num-link" onclick="openDetail('长安胃肠镜医院 / 采油六厂')">9</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 预选人数明细弹窗 -->
|
||||
<div class="modal-overlay" id="detail-modal-overlay" onclick="if(event.target===this)closeDetail()">
|
||||
<div class="modal" style="width:860px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="detail-title">预选人数明细</div>
|
||||
<button class="modal__close" onclick="closeDetail()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="display:flex;justify-content:flex-end;margin-bottom:12px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>姓名</th><th>员工编号</th><th>身份证号</th><th>单位</th><th>部门</th><th>预选医院</th><th>提交时间</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>陈伟</td><td>30078912</td><td>610103197809220015</td><td>采油四厂</td><td>工程技术科</td><td>宁夏宝石花医院</td><td>2026-03-05 10:23</td></tr>
|
||||
<tr><td>刘芳</td><td>30082345</td><td>610103197905120034</td><td>采油四厂</td><td>综合办</td><td>宁夏宝石花医院</td><td>2026-03-06 14:41</td></tr>
|
||||
<tr><td>王强</td><td>30085678</td><td>610103197403080024</td><td>采油五厂</td><td>采油队</td><td>CQ油田医院</td><td>2026-04-02 09:15</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* tab 切换 */
|
||||
function switchTab(key){
|
||||
document.querySelectorAll('.tab').forEach(function(t){
|
||||
t.classList.toggle('active', t.getAttribute('data-tab') === key);
|
||||
});
|
||||
document.getElementById('panel-dept').style.display = key === 'dept' ? '' : 'none';
|
||||
document.getElementById('panel-hospital').style.display = key === 'hospital' ? '' : 'none';
|
||||
}
|
||||
|
||||
/* 预选人数明细 */
|
||||
function openDetail(title){
|
||||
document.getElementById('detail-title').textContent = '预选人数明细 - ' + title;
|
||||
document.getElementById('detail-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeDetail(){
|
||||
document.getElementById('detail-modal-overlay').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,365 +1,375 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 单位体检项目费用 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 媒体预览图标 */
|
||||
.media-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;}
|
||||
.media-icon--active{background:var(--primary-light);color:var(--primary);}
|
||||
.media-icon--empty{background:#F5F5F5;color:var(--text-placeholder);}
|
||||
.media-icon:hover{opacity:.8;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 信息展示 */
|
||||
.fee-info{background:#FAFAFA;border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:20px;display:flex;flex-direction:column;gap:10px;}
|
||||
.fee-info__item{display:flex;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.fee-info__item label{color:var(--text-secondary);width:88px;flex-shrink:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 单位体检项目费用 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 媒体预览图标 */
|
||||
.media-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;}
|
||||
.media-icon--active{background:var(--primary-light);color:var(--primary);}
|
||||
.media-icon--empty{background:#F5F5F5;color:var(--text-placeholder);}
|
||||
.media-icon:hover{opacity:.8;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 信息展示 */
|
||||
.fee-info{background:#FAFAFA;border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:20px;display:flex;flex-direction:column;gap:10px;}
|
||||
.fee-info__item{display:flex;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.fee-info__item label{color:var(--text-secondary);width:88px;flex-shrink:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item active">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item active">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-cta-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-cta-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option selected>2025</option><option>2024</option><option>2026</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检医院：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>泾河医院</option><option>庆阳医院</option><option>延安医院</option><option>兴隆园医院</option><option>宁夏宝石花医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检项目：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入项目名称" style="min-width:160px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary" onclick="openGenerateConfirm()">+ 生成单位本年度体检项目费用</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位体检项目费用</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>单位</th><th>体检年份</th><th>医院名称</th><th>体检项目</th><th>体检项目图片</th><th>项目费用（元）</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>第一采油厂</td><td>2025</td><td>泾河医院</td><td>经颅多普勒</td><td><span class="media-icon media-icon--active" title="查看图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>280.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
<tr><td>2</td><td>第二采油厂</td><td>2025</td><td>庆阳医院</td><td>腹部彩超</td><td><span class="media-icon media-icon--active" title="查看图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>200.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
<tr><td>3</td><td>第三采油厂</td><td>2025</td><td>延安医院</td><td>血常规</td><td><span class="media-icon media-icon--empty" title="暂无图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>40.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 更改费用弹窗 -->
|
||||
<div class="modal-overlay" id="fee-modal-overlay" onclick="if(event.target===this)closeFeeModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">更改费用</div>
|
||||
<button class="modal__close" onclick="closeFeeModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="fee-info">
|
||||
<div class="fee-info__item"><label>单位：</label><span id="fee-unit"></span></div>
|
||||
<div class="fee-info__item"><label>体检年份：</label><span id="fee-year"></span></div>
|
||||
<div class="fee-info__item"><label>医院名称：</label><span id="fee-hospital"></span></div>
|
||||
<div class="fee-info__item"><label>体检项目：</label><span id="fee-item"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 项目费用（元）</div>
|
||||
<input class="form-input" id="fee-amount" type="number" min="0" step="0.01" placeholder="请输入项目费用">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeFeeModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveFee()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生成费用二次确认弹窗 -->
|
||||
<div class="modal-overlay" id="generate-confirm-overlay" onclick="if(event.target===this)closeGenerateConfirm()">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">生成确认</div>
|
||||
<button class="modal__close" onclick="closeGenerateConfirm()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" style="display:flex;gap:12px;align-items:flex-start;">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" style="flex-shrink:0;margin-top:2px;"><circle cx="11" cy="11" r="10" fill="#FAAD14"/><path d="M11 6.5v6" stroke="#fff" stroke-width="2" stroke-linecap="round"/><circle cx="11" cy="15.5" r="1.2" fill="#fff"/></svg>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-primary);line-height:1.7;">
|
||||
确定要生成单位本年度体检项目费用吗？<br>
|
||||
<span style="color:var(--text-secondary);">生成后将按医院项目费用基准初始化本年度各单位的体检项目费用。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeGenerateConfirm()">取消</button>
|
||||
<button class="btn btn-primary" onclick="confirmGenerate()">确认生成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 更改费用弹窗 ===== */
|
||||
var feeTr = null;
|
||||
|
||||
function openFeeModal(btn){
|
||||
feeTr = btn.closest('tr');
|
||||
var cells = feeTr.cells;
|
||||
document.getElementById('fee-unit').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('fee-year').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('fee-hospital').textContent = cells[3].textContent.trim();
|
||||
document.getElementById('fee-item').textContent = cells[4].textContent.trim();
|
||||
document.getElementById('fee-amount').value = cells[6].textContent.trim();
|
||||
document.getElementById('fee-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeFeeModal(){
|
||||
document.getElementById('fee-modal-overlay').classList.remove('open');
|
||||
}
|
||||
function saveFee(){
|
||||
if(!feeTr) return;
|
||||
var amount = document.getElementById('fee-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的项目费用'); return; }
|
||||
feeTr.cells[6].textContent = Number(amount).toFixed(2);
|
||||
closeFeeModal();
|
||||
}
|
||||
|
||||
/* ===== 生成费用二次确认 ===== */
|
||||
function openGenerateConfirm(){
|
||||
document.getElementById('generate-confirm-overlay').classList.add('open');
|
||||
}
|
||||
function closeGenerateConfirm(){
|
||||
document.getElementById('generate-confirm-overlay').classList.remove('open');
|
||||
}
|
||||
function confirmGenerate(){
|
||||
closeGenerateConfirm();
|
||||
alert('单位本年度体检项目费用生成任务已提交（原型演示）');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option selected>2025</option><option>2024</option><option>2026</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检医院：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>泾河医院</option><option>庆阳医院</option><option>延安医院</option><option>兴隆园医院</option><option>宁夏宝石花医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检项目：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入项目名称" style="min-width:160px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary" onclick="openGenerateConfirm()">+ 生成单位本年度体检项目费用</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位体检项目费用</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>单位</th><th>体检年份</th><th>医院名称</th><th>体检项目</th><th>体检项目图片</th><th>项目费用（元）</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>第一采油厂</td><td>2025</td><td>泾河医院</td><td>经颅多普勒</td><td><span class="media-icon media-icon--active" title="查看图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>280.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
<tr><td>2</td><td>第二采油厂</td><td>2025</td><td>庆阳医院</td><td>腹部彩超</td><td><span class="media-icon media-icon--active" title="查看图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>200.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
<tr><td>3</td><td>第三采油厂</td><td>2025</td><td>延安医院</td><td>血常规</td><td><span class="media-icon media-icon--empty" title="暂无图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>40.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 更改费用弹窗 -->
|
||||
<div class="modal-overlay" id="fee-modal-overlay" onclick="if(event.target===this)closeFeeModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">更改费用</div>
|
||||
<button class="modal__close" onclick="closeFeeModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="fee-info">
|
||||
<div class="fee-info__item"><label>单位：</label><span id="fee-unit"></span></div>
|
||||
<div class="fee-info__item"><label>体检年份：</label><span id="fee-year"></span></div>
|
||||
<div class="fee-info__item"><label>医院名称：</label><span id="fee-hospital"></span></div>
|
||||
<div class="fee-info__item"><label>体检项目：</label><span id="fee-item"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 项目费用（元）</div>
|
||||
<input class="form-input" id="fee-amount" type="number" min="0" step="0.01" placeholder="请输入项目费用">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeFeeModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveFee()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生成费用二次确认弹窗 -->
|
||||
<div class="modal-overlay" id="generate-confirm-overlay" onclick="if(event.target===this)closeGenerateConfirm()">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">生成确认</div>
|
||||
<button class="modal__close" onclick="closeGenerateConfirm()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" style="display:flex;gap:12px;align-items:flex-start;">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" style="flex-shrink:0;margin-top:2px;"><circle cx="11" cy="11" r="10" fill="#FAAD14"/><path d="M11 6.5v6" stroke="#fff" stroke-width="2" stroke-linecap="round"/><circle cx="11" cy="15.5" r="1.2" fill="#fff"/></svg>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-primary);line-height:1.7;">
|
||||
确定要生成单位本年度体检项目费用吗？<br>
|
||||
<span style="color:var(--text-secondary);">生成后将按医院项目费用基准初始化本年度各单位的体检项目费用。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeGenerateConfirm()">取消</button>
|
||||
<button class="btn btn-primary" onclick="confirmGenerate()">确认生成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 更改费用弹窗 ===== */
|
||||
var feeTr = null;
|
||||
|
||||
function openFeeModal(btn){
|
||||
feeTr = btn.closest('tr');
|
||||
var cells = feeTr.cells;
|
||||
document.getElementById('fee-unit').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('fee-year').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('fee-hospital').textContent = cells[3].textContent.trim();
|
||||
document.getElementById('fee-item').textContent = cells[4].textContent.trim();
|
||||
document.getElementById('fee-amount').value = cells[6].textContent.trim();
|
||||
document.getElementById('fee-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeFeeModal(){
|
||||
document.getElementById('fee-modal-overlay').classList.remove('open');
|
||||
}
|
||||
function saveFee(){
|
||||
if(!feeTr) return;
|
||||
var amount = document.getElementById('fee-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的项目费用'); return; }
|
||||
feeTr.cells[6].textContent = Number(amount).toFixed(2);
|
||||
closeFeeModal();
|
||||
}
|
||||
|
||||
/* ===== 生成费用二次确认 ===== */
|
||||
function openGenerateConfirm(){
|
||||
document.getElementById('generate-confirm-overlay').classList.add('open');
|
||||
}
|
||||
function closeGenerateConfirm(){
|
||||
document.getElementById('generate-confirm-overlay').classList.remove('open');
|
||||
}
|
||||
function confirmGenerate(){
|
||||
closeGenerateConfirm();
|
||||
alert('单位本年度体检项目费用生成任务已提交（原型演示）');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1396
-1386
File diff suppressed because it is too large
Load Diff
@@ -1,322 +1,332 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 群体额度配置 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 弹窗表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 群体信息（纯展示） */
|
||||
.group-info{background:#F5F7FA;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px 28px;}
|
||||
.group-info__item{font-size:var(--font-sm);}
|
||||
.group-info__item label{color:var(--text-secondary);}
|
||||
.group-info__item span{color:var(--text-primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 群体额度配置 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 弹窗表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 群体信息（纯展示） */
|
||||
.group-info{background:#F5F7FA;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px 28px;}
|
||||
.group-info__item{font-size:var(--font-sm);}
|
||||
.group-info__item label{color:var(--text-secondary);}
|
||||
.group-info__item span{color:var(--text-primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item active">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item active">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-cta-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-cta-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:90px;">
|
||||
<option>请选择</option><option>男</option><option>女</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 - 群体额度 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">群体额度列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>群体名称</th><th>年龄区间</th><th>性别</th><th>体检额度(元)</th><th>批量更新规则</th><th>是否已生成</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>45岁及以上-女</td><td>45岁及以上</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>2</td><td>45岁及以上-男</td><td>45岁及以上</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>3</td><td>36~44岁-女</td><td>35岁至44岁</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>4</td><td>36~44岁-男</td><td>35岁至44岁</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>5</td><td>35岁及以下-女</td><td>35岁以下</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>6</td><td>35岁及以下-男</td><td>35岁以下</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 6 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 设置群体额度弹窗 -->
|
||||
<div class="modal-overlay" id="quota-modal-overlay" onclick="if(event.target===this)closeQuotaModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">设置群体额度</div>
|
||||
<button class="modal__close" onclick="closeQuotaModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="group-info">
|
||||
<div class="group-info__item"><label>群体名称：</label><span id="quota-group-name"></span></div>
|
||||
<div class="group-info__item"><label>年龄区间：</label><span id="quota-age"></span></div>
|
||||
<div class="group-info__item"><label>性别：</label><span id="quota-gender"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检额度(元)</div>
|
||||
<input class="form-input" id="quota-amount" type="number" min="0" step="0.01" placeholder="请输入体检额度">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 批量更新规则</div>
|
||||
<select class="form-select" id="quota-rule">
|
||||
<option value="全量">全量</option>
|
||||
<option value="忽略手动修改">忽略手动修改</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeQuotaModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveQuota()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 设置群体额度弹窗 ===== */
|
||||
var quotaTr = null;
|
||||
|
||||
function openQuotaModal(btn){
|
||||
quotaTr = btn.closest('tr');
|
||||
var cells = quotaTr.cells;
|
||||
document.getElementById('quota-group-name').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('quota-age').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('quota-gender').textContent = cells[3].textContent.trim();
|
||||
document.getElementById('quota-amount').value = cells[4].textContent.trim();
|
||||
document.getElementById('quota-rule').value = cells[5].textContent.trim() || '全量';
|
||||
document.getElementById('quota-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeQuotaModal(){
|
||||
document.getElementById('quota-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function saveQuota(){
|
||||
if(!quotaTr) return;
|
||||
var amount = document.getElementById('quota-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的体检额度'); return; }
|
||||
quotaTr.cells[4].textContent = Number(amount).toFixed(2);
|
||||
quotaTr.cells[5].textContent = document.getElementById('quota-rule').value;
|
||||
closeQuotaModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:90px;">
|
||||
<option>请选择</option><option>男</option><option>女</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 - 群体额度 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">群体额度列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>群体名称</th><th>年龄区间</th><th>性别</th><th>体检额度(元)</th><th>批量更新规则</th><th>是否已生成</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>45岁及以上-女</td><td>45岁及以上</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>2</td><td>45岁及以上-男</td><td>45岁及以上</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>3</td><td>36~44岁-女</td><td>35岁至44岁</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>4</td><td>36~44岁-男</td><td>35岁至44岁</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>5</td><td>35岁及以下-女</td><td>35岁以下</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>6</td><td>35岁及以下-男</td><td>35岁以下</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 6 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 设置群体额度弹窗 -->
|
||||
<div class="modal-overlay" id="quota-modal-overlay" onclick="if(event.target===this)closeQuotaModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">设置群体额度</div>
|
||||
<button class="modal__close" onclick="closeQuotaModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="group-info">
|
||||
<div class="group-info__item"><label>群体名称：</label><span id="quota-group-name"></span></div>
|
||||
<div class="group-info__item"><label>年龄区间：</label><span id="quota-age"></span></div>
|
||||
<div class="group-info__item"><label>性别：</label><span id="quota-gender"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检额度(元)</div>
|
||||
<input class="form-input" id="quota-amount" type="number" min="0" step="0.01" placeholder="请输入体检额度">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 批量更新规则</div>
|
||||
<select class="form-select" id="quota-rule">
|
||||
<option value="全量">全量</option>
|
||||
<option value="忽略手动修改">忽略手动修改</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeQuotaModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveQuota()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 设置群体额度弹窗 ===== */
|
||||
var quotaTr = null;
|
||||
|
||||
function openQuotaModal(btn){
|
||||
quotaTr = btn.closest('tr');
|
||||
var cells = quotaTr.cells;
|
||||
document.getElementById('quota-group-name').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('quota-age').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('quota-gender').textContent = cells[3].textContent.trim();
|
||||
document.getElementById('quota-amount').value = cells[4].textContent.trim();
|
||||
document.getElementById('quota-rule').value = cells[5].textContent.trim() || '全量';
|
||||
document.getElementById('quota-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeQuotaModal(){
|
||||
document.getElementById('quota-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function saveQuota(){
|
||||
if(!quotaTr) return;
|
||||
var amount = document.getElementById('quota-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的体检额度'); return; }
|
||||
quotaTr.cells[4].textContent = Number(amount).toFixed(2);
|
||||
quotaTr.cells[5].textContent = document.getElementById('quota-rule').value;
|
||||
closeQuotaModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,345 +1,355 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 员工额度配置 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 人员信息 */
|
||||
.person-info{background:#F5F7FA;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px 28px;}
|
||||
.person-info__item{font-size:var(--font-sm);}
|
||||
.person-info__item label{color:var(--text-secondary);}
|
||||
.person-info__item span{color:var(--text-primary);font-weight:500;}
|
||||
/* 开关 */
|
||||
.switch-row{display:flex;align-items:center;gap:12px;}
|
||||
.switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch.on::after{left:20px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 员工额度配置 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 人员信息 */
|
||||
.person-info{background:#F5F7FA;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px 28px;}
|
||||
.person-info__item{font-size:var(--font-sm);}
|
||||
.person-info__item label{color:var(--text-secondary);}
|
||||
.person-info__item span{color:var(--text-primary);font-weight:500;}
|
||||
/* 开关 */
|
||||
.switch-row{display:flex;align-items:center;gap:12px;}
|
||||
.switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch.on::after{left:20px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item active">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
冠脉CTA体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item active">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-cta-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-cta-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>公司机关</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">个人额度列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>姓名</th><th>员工编号</th><th>性别</th><th>年龄</th><th>身份证号</th><th>单位</th><th>部门</th><th>体检额度(元)</th><th>是否手动输入</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>张明</td><td>100234</td><td>男</td><td>38</td><td>610113199602632255</td><td>公司机关</td><td>人事部</td><td>2500.00</td><td>否</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
<tr><td>2</td><td>李芳</td><td>100567</td><td>女</td><td>42</td><td>610113199602632255</td><td>公司机关</td><td>财务部</td><td>2500.00</td><td>否</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
<tr><td>3</td><td>王强</td><td>200891</td><td>男</td><td>50</td><td>610113199602632255</td><td>采油一厂</td><td>生产办</td><td>2500.00</td><td>是</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 1260 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">126</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 设置个人额度弹窗 -->
|
||||
<div class="modal-overlay" id="quota-modal-overlay" onclick="if(event.target===this)closeQuotaModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">设置个人额度</div>
|
||||
<button class="modal__close" onclick="closeQuotaModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="person-info">
|
||||
<div class="person-info__item"><label>姓名：</label><span id="quota-name"></span></div>
|
||||
<div class="person-info__item"><label>员工编号：</label><span id="quota-code"></span></div>
|
||||
<div class="person-info__item"><label>单位部门：</label><span id="quota-unit"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检额度(元)</div>
|
||||
<input class="form-input" id="quota-amount" type="number" min="0" step="0.01" placeholder="请输入体检额度">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeQuotaModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveQuota()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 设置个人额度弹窗 ===== */
|
||||
var quotaTr = null;
|
||||
|
||||
function openQuotaModal(btn){
|
||||
quotaTr = btn.closest('tr');
|
||||
var cells = quotaTr.cells;
|
||||
document.getElementById('quota-name').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('quota-code').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('quota-unit').textContent = cells[6].textContent.trim() + ' / ' + cells[7].textContent.trim();
|
||||
document.getElementById('quota-amount').value = cells[8].textContent.trim();
|
||||
document.getElementById('quota-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeQuotaModal(){
|
||||
document.getElementById('quota-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function saveQuota(){
|
||||
if(!quotaTr) return;
|
||||
var amount = document.getElementById('quota-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的体检额度'); return; }
|
||||
quotaTr.cells[8].textContent = Number(amount).toFixed(2);
|
||||
closeQuotaModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>公司机关</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">个人额度列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>姓名</th><th>员工编号</th><th>性别</th><th>年龄</th><th>身份证号</th><th>单位</th><th>部门</th><th>体检额度(元)</th><th>是否手动输入</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>张明</td><td>100234</td><td>男</td><td>38</td><td>610113199602632255</td><td>公司机关</td><td>人事部</td><td>2500.00</td><td>否</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
<tr><td>2</td><td>李芳</td><td>100567</td><td>女</td><td>42</td><td>610113199602632255</td><td>公司机关</td><td>财务部</td><td>2500.00</td><td>否</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
<tr><td>3</td><td>王强</td><td>200891</td><td>男</td><td>50</td><td>610113199602632255</td><td>采油一厂</td><td>生产办</td><td>2500.00</td><td>是</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 1260 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">126</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 设置个人额度弹窗 -->
|
||||
<div class="modal-overlay" id="quota-modal-overlay" onclick="if(event.target===this)closeQuotaModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">设置个人额度</div>
|
||||
<button class="modal__close" onclick="closeQuotaModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="person-info">
|
||||
<div class="person-info__item"><label>姓名：</label><span id="quota-name"></span></div>
|
||||
<div class="person-info__item"><label>员工编号：</label><span id="quota-code"></span></div>
|
||||
<div class="person-info__item"><label>单位部门：</label><span id="quota-unit"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检额度(元)</div>
|
||||
<input class="form-input" id="quota-amount" type="number" min="0" step="0.01" placeholder="请输入体检额度">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeQuotaModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveQuota()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 设置个人额度弹窗 ===== */
|
||||
var quotaTr = null;
|
||||
|
||||
function openQuotaModal(btn){
|
||||
quotaTr = btn.closest('tr');
|
||||
var cells = quotaTr.cells;
|
||||
document.getElementById('quota-name').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('quota-code').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('quota-unit').textContent = cells[6].textContent.trim() + ' / ' + cells[7].textContent.trim();
|
||||
document.getElementById('quota-amount').value = cells[8].textContent.trim();
|
||||
document.getElementById('quota-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeQuotaModal(){
|
||||
document.getElementById('quota-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function saveQuota(){
|
||||
if(!quotaTr) return;
|
||||
var amount = document.getElementById('quota-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的体检额度'); return; }
|
||||
quotaTr.cells[8].textContent = Number(amount).toFixed(2);
|
||||
closeQuotaModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user