feat: 健康体检检前专项配置、异常事件及体检结果名册原型优化
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
# 健康体检模块 CHANGELOG
|
||||
|
||||
## [Unreleased] 2026-05-11
|
||||
|
||||
### Changed
|
||||
- `pre-special-occupation.html`：筛选条件补充体检年度（置首）、身份证号、用工形式、系统体检状态、医院选择、体检计划等；操作按钮更新；表格新增系统体检状态、体检医院、体检计划单位列；性别/年龄列移至身份证号前
|
||||
- `pre-special-cancer.html`：体检年份筛选移至首位，label 改为"体检年度"
|
||||
- `pre-item-required.html`：体检年份 label 改为"体检年度"
|
||||
- `pre-special-gastro.html`：筛选条件新增体检年度（首位）、身份证号、性别、年龄、体检计划、系统体检状态、医院选择；表格新增系统体检状态、体检医院列
|
||||
- `pre-special-cta.html`：同胃肠镜体检人员相同改动
|
||||
- `pre-special-hospital.html`：筛选条件按参考图重新设计；操作按钮新增批量删除、模板下载、导入清单、查看任务；表格增加 checkbox 列及手机号，调整列顺序
|
||||
- `exception-dirty.html`：新增面包屑导航（系统脏数据/结果异常）；导出按钮组新增查看导出任务；更新筛选条件（业务模块、异常类型、年份选择）；表格列调整为业务模块、异常类型、异常描述、异常检测时间、表名、字段名、编号、异常值、数据产生时间
|
||||
- `exception-result.html`：新增面包屑导航；新增异常数据定义说明框；筛选条件调整（年份选择首位，新增异常等级、单位、时间范围）；表格列调整为序号、异常等级、员工姓名、员工编号、单位、异常项目、异常值、参考范围、发现时间、操作
|
||||
- `post-report-roster.html`：表格操作列由"查看"改为"报告详情 | 趋势分析"；新增报告详情弹窗（含年份切换、分类展示、医生建议）；新增趋势分析弹窗（含项目分类筛选、年份范围选择、多指标对比折线图 SVG 渲染、图例）
|
||||
@@ -79,6 +79,14 @@
|
||||
.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);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
/* 面包屑导航 */
|
||||
.crumb-bar{background:#fff;border-radius:var(--radius-md);padding:12px 16px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:10px;}
|
||||
.crumb-back{width:24px;height:24px;border:none;border-radius:var(--radius-sm);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);cursor:pointer;}
|
||||
.crumb-back:hover{background:#F5F5F5;color:var(--text-primary);}
|
||||
.crumb-tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border);font-size:var(--font-sm);color:var(--text-primary);background:#fff;}
|
||||
.crumb-tag--active{color:var(--primary);border-color:#91Caff;background:#F0F7FF;}
|
||||
/* 按钮行 */
|
||||
.btn-row{display:flex;gap:12px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -116,61 +124,87 @@
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="crumb-bar">
|
||||
<button class="crumb-back" aria-label="返回">
|
||||
<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>
|
||||
</button>
|
||||
<span class="crumb-tag crumb-tag--active">系统脏数据</span>
|
||||
<span class="crumb-tag">结果异常</span>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>数据类型</label>
|
||||
<label>业务模块：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option><option>重复数据</option><option>格式错误</option><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:220px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>处理状态</label>
|
||||
<label>异常类型：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option><option>待处理</option><option>已处理</option><option>已忽略</option>
|
||||
<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>
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<select class="filter-select" style="min-width:94px;">
|
||||
<option selected>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 导出按钮 -->
|
||||
<div class="btn-row">
|
||||
<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="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="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M7 4.5v2.8l2 1.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="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>数据ID</th><th>数据类型</th><th>问题描述</th><th>关联员工</th><th>发现时间</th><th>处理状态</th><th>操作</th></tr>
|
||||
<tr>
|
||||
<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>DT20260501001</td><td>重复数据</td><td>同一员工存在两条相同日期的体检记录</td><td>张伟 (CQ001234)</td><td>2026-05-01 09:15</td><td><span class="tag tag-orange">待处理</span></td><td><span class="link">处理</span> | <span class="link">忽略</span></td></tr>
|
||||
<tr><td>2</td><td>DT20260501002</td><td>格式错误</td><td>血压值格式异常：字段值为"高"而非数值</td><td>李明 (CQ002571)</td><td>2026-05-01 10:32</td><td><span class="tag tag-orange">待处理</span></td><td><span class="link">处理</span> | <span class="link">忽略</span></td></tr>
|
||||
<tr><td>3</td><td>DT20260430005</td><td>缺失字段</td><td>体检报告缺少"心电图"检查项结果</td><td>王芳 (CQ003388)</td><td>2026-04-30 14:20</td><td><span class="tag tag-green">已处理</span></td><td><span class="link">查看</span></td></tr>
|
||||
<tr><td>4</td><td>DT20260429003</td><td>重复数据</td><td>同一检查项目录入两次不同结果值</td><td>刘洋 (CQ004102)</td><td>2026-04-29 16:45</td><td><span class="tag tag-gray">已忽略</span></td><td><span class="link">查看</span></td></tr>
|
||||
<tr><td>5</td><td>DT20260429007</td><td>格式错误</td><td>身份证号位数不足，仅15位</td><td>赵静 (CQ005667)</td><td>2026-04-29 11:08</td><td><span class="tag tag-orange">待处理</span></td><td><span class="link">处理</span> | <span class="link">忽略</span></td></tr>
|
||||
<tr><td>体检预约</td><td>非法数据</td><td>手机号码不合法</td><td>2026-04-21 02:01:03</td><td>exam_appointment</td><td>phone</td><td>136446464646</td><td style="color:var(--danger);">未知</td><td>2026-04-20 09:15:00</td></tr>
|
||||
<tr><td>体检档案</td><td>格式错误</td><td>身份证号位数不足，仅15位</td><td>2026-04-18 10:24:18</td><td>employee_archive</td><td>id_card</td><td>136446464647</td><td style="color:var(--danger);">41130019800101</td><td>2026-04-17 14:30:00</td></tr>
|
||||
<tr><td>体检报告</td><td>状态异常</td><td>报告状态字段值不在枚举范围内</td><td>2026-04-15 14:12:56</td><td>exam_report</td><td>report_status</td><td>136446464648</td><td style="color:var(--danger);">99</td><td>2026-04-15 13:40:11</td></tr>
|
||||
<tr><td>体检项目</td><td>缺失字段</td><td>体检项目结果值为空</td><td>2026-04-12 08:33:27</td><td>exam_item_result</td><td>result_value</td><td>136446464649</td><td style="color:var(--danger);">NULL</td><td>2026-04-12 08:18:09</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 47 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<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>
|
||||
<span>…</span>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option><option>50条</option></select>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -78,6 +78,17 @@
|
||||
.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);}
|
||||
/* 面包屑 */
|
||||
.crumb-bar{background:#fff;border-radius:var(--radius-md);padding:12px 16px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:10px;}
|
||||
.crumb-back{width:24px;height:24px;border:none;border-radius:var(--radius-sm);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);cursor:pointer;}
|
||||
.crumb-back:hover{background:#F5F5F5;color:var(--text-primary);}
|
||||
.crumb-tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border);font-size:var(--font-sm);color:var(--text-primary);background:#fff;}
|
||||
.crumb-tag--active{color:var(--primary);border-color:#91Caff;background:#F0F7FF;}
|
||||
/* 说明框 */
|
||||
.desc-box{background:#FFFBE6;border:1px solid #FFE58F;border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:var(--font-sm);color:#7C5800;line-height:1.7;}
|
||||
.desc-box strong{color:#5C3D00;}
|
||||
/* 按钮行 */
|
||||
.btn-row{display:flex;gap:12px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -115,62 +126,103 @@
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="crumb-bar">
|
||||
<button class="crumb-back" aria-label="返回">
|
||||
<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>
|
||||
</button>
|
||||
<span class="crumb-tag">系统脏数据</span>
|
||||
<span class="crumb-tag crumb-tag--active">结果异常</span>
|
||||
</div>
|
||||
|
||||
<!-- 异常数据定义说明框 -->
|
||||
<div class="desc-box">
|
||||
<strong>异常数据定义：</strong>体检结果中存在指标超出正常参考范围的情形，包括：危急值（指标严重偏离正常范围，需立即处理）、异常值（指标超出参考范围但未达危急程度）等。系统自动检测并记录，供管理员跟进处理。
|
||||
</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>
|
||||
<label>年份选择：</label>
|
||||
<select class="filter-select" style="min-width:94px;">
|
||||
<option selected>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>异常等级</label>
|
||||
<label>异常等级：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option><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:220px;">
|
||||
<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>
|
||||
<div class="filter-item">
|
||||
<label>时间范围：</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 导出按钮 -->
|
||||
<div class="btn-row">
|
||||
<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="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="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M7 4.5v2.8l2 1.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">结果异常列表</div>
|
||||
<div class="table-card__title">异常列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 89 条</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></tr>
|
||||
<tr>
|
||||
<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>CQ001234</td><td>采油一厂</td><td>空腹血糖</td><td>9.8 mmol/L</td><td>3.9~6.1 mmol/L</td><td><span class="tag tag-orange">一般</span></td><td>2026-05-01</td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>2</td><td>李明</td><td>CQ002571</td><td>采油二厂</td><td>血压(收缩压)</td><td>185 mmHg</td><td>90~140 mmHg</td><td><span class="tag tag-red">危急</span></td><td>2026-05-01</td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>3</td><td>刘洋</td><td>CQ004102</td><td>采油三厂</td><td>总胆固醇</td><td>7.2 mmol/L</td><td>2.8~5.7 mmol/L</td><td><span class="tag tag-blue">一般</span></td><td>2026-04-30</td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>4</td><td>陈磊</td><td>CQ006890</td><td>采油一厂</td><td>肌酐</td><td>186 umol/L</td><td>44~133 umol/L</td><td><span class="tag tag-orange">严重</span></td><td>2026-04-30</td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>5</td><td>周强</td><td>CQ008456</td><td>采油三厂</td><td>谷丙转氨酶</td><td>128 U/L</td><td>0~40 U/L</td><td><span class="tag tag-orange">严重</span></td><td>2026-04-29</td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>6</td><td>孙丽</td><td>CQ007234</td><td>采油二厂</td><td>心电图</td><td>ST段压低</td><td>正常心电图</td><td><span class="tag tag-red">危急</span></td><td>2026-04-28</td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>1</td><td><span class="tag tag-red">危急值</span></td><td>张伟</td><td>CQ001234</td><td>采油一厂</td><td>空腹血糖</td><td>9.8 mmol/L</td><td>3.9~6.1 mmol/L</td><td>2026-05-01</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>2</td><td><span class="tag tag-red">危急值</span></td><td>李明</td><td>CQ002571</td><td>采油二厂</td><td>血压(收缩压)</td><td>185 mmHg</td><td>90~140 mmHg</td><td>2026-05-01</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>3</td><td><span class="tag tag-orange">异常值</span></td><td>刘洋</td><td>CQ004102</td><td>采油三厂</td><td>总胆固醇</td><td>7.2 mmol/L</td><td>2.8~5.7 mmol/L</td><td>2026-04-30</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>4</td><td><span class="tag tag-orange">异常值</span></td><td>陈磊</td><td>CQ006890</td><td>采油一厂</td><td>肌酐</td><td>186 umol/L</td><td>44~133 umol/L</td><td>2026-04-30</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>5</td><td><span class="tag tag-orange">异常值</span></td><td>周强</td><td>CQ008456</td><td>采油三厂</td><td>谷丙转氨酶</td><td>128 U/L</td><td>0~40 U/L</td><td>2026-04-29</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>6</td><td><span class="tag tag-red">危急值</span></td><td>孙丽</td><td>CQ007234</td><td>采油二厂</td><td>心电图</td><td>ST段压低</td><td>正常心电图</td><td>2026-04-28</td><td><span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 89 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<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>
|
||||
<span>…</span>
|
||||
<button class="page-btn">9</button>
|
||||
<button class="page-btn">›</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option><option>50条</option></select>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,205 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 签约医院人数统计 | 健康长庆原型</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);}
|
||||
/* 筛选栏 */
|
||||
.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);}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 签约医院人数统计 | 健康长庆原型</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);}
|
||||
/* 筛选栏 */
|
||||
.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);}
|
||||
</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 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 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-unit-count.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 active">签约医院人数统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-unit-count.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 active">签约医院人数统计</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-report-employee.html" class="sidebar-item">员工体检报告</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
<a href="post-report-roster.html" class="sidebar-item">体检结果名册</a>
|
||||
</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-employee.html" class="sidebar-item">员工体检报告</a>
|
||||
<a href="post-report-unmatched.html" class="sidebar-item">体检报告未匹配项目</a>
|
||||
<a href="post-report-roster.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>
|
||||
</select>
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>医院：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</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 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 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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>延安医院</td><td>采油一厂</td><td>1200</td><td>960</td></tr>
|
||||
<tr><td>2</td><td>兴隆园医院</td><td>公司机关</td><td>800</td><td>265</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 2 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>医院名称</th><th>单位</th><th>应检人数</th><th>已检人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>延安医院</td><td>采油一厂</td><td>1200</td><td>960</td></tr>
|
||||
<tr><td>2</td><td>兴隆园医院</td><td>公司机关</td><td>800</td><td>265</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 2 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
</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');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
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>
|
||||
|
||||
@@ -77,6 +77,37 @@
|
||||
.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-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:500;display:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:900px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.modal__header h3{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;font-size:20px;color:var(--text-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:24px;}
|
||||
/* 报告详情样式 */
|
||||
.report-year-selector{display:flex;gap:12px;margin-bottom:20px;align-items:center;}
|
||||
.report-year-selector label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.report-year-selector select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);}
|
||||
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;}
|
||||
.report-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.report-item .label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.report-item .value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.report-item .value.abnormal{color:var(--danger);}
|
||||
/* 趋势分析样式 */
|
||||
.trend-controls{display:flex;gap:16px;margin-bottom:20px;align-items:center;flex-wrap:wrap;}
|
||||
.trend-controls label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.trend-controls select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);}
|
||||
.trend-items{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
|
||||
.trend-item{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;}
|
||||
.trend-item:hover{border-color:var(--primary);background:var(--primary-light);}
|
||||
.trend-item.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary);}
|
||||
.trend-item input[type="checkbox"]{cursor:pointer;}
|
||||
.trend-chart{width:100%;height:400px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fafafa;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
|
||||
.trend-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:var(--font-sm);}
|
||||
.trend-legend-item{display:flex;align-items:center;gap:6px;}
|
||||
.trend-legend-color{width:12px;height:12px;border-radius:2px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -187,12 +218,12 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>张伟</td><td>CQ001234</td><td>采油一厂</td><td>生产一队</td><td>2026-03-15</td><td><span class="tag tag-orange">异常</span></td><td>血脂偏高、脂肪肝、血压偏高</td><td><span class="link">查看</span></td></tr>
|
||||
<tr><td>2</td><td>李明</td><td>CQ002571</td><td>采油二厂</td><td>综合管理部</td><td>2026-03-12</td><td><span class="tag tag-orange">异常</span></td><td>尿酸偏高</td><td><span class="link">查看</span></td></tr>
|
||||
<tr><td>3</td><td>王芳</td><td>CQ003388</td><td>勘探开发研究院</td><td>地质研究室</td><td>2026-04-20</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">查看</span></td></tr>
|
||||
<tr><td>4</td><td>刘洋</td><td>CQ004102</td><td>采油三厂</td><td>生产二队</td><td>2026-02-28</td><td><span class="tag tag-red">重大异常</span></td><td>肺结节、肝功能异常、血糖偏高、心律不齐、甲状腺结节</td><td><span class="link">查看</span></td></tr>
|
||||
<tr><td>5</td><td>陈磊</td><td>CQ006890</td><td>采油一厂</td><td>安全环保部</td><td>2026-03-08</td><td><span class="tag tag-red">重大异常</span></td><td>肺结节、血脂异常、脂肪肝、高血压、颈动脉斑块、前列腺增生、肾囊肿</td><td><span class="link">查看</span></td></tr>
|
||||
<tr><td>6</td><td>孙丽</td><td>CQ007234</td><td>采油二厂</td><td>生产一队</td><td>2026-03-20</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">查看</span></td></tr>
|
||||
<tr><td>1</td><td>张伟</td><td>CQ001234</td><td>采油一厂</td><td>生产一队</td><td>2026-03-15</td><td><span class="tag tag-orange">异常</span></td><td>血脂偏高、脂肪肝、血压偏高</td><td><span class="link" onclick="openReportDetail('张伟','CQ001234')">报告详情</span> <span class="link" onclick="openTrendAnalysis('张伟','CQ001234')">趋势分析</span></td></tr>
|
||||
<tr><td>2</td><td>李明</td><td>CQ002571</td><td>采油二厂</td><td>综合管理部</td><td>2026-03-12</td><td><span class="tag tag-orange">异常</span></td><td>尿酸偏高</td><td><span class="link" onclick="openReportDetail('李明','CQ002571')">报告详情</span> <span class="link" onclick="openTrendAnalysis('李明','CQ002571')">趋势分析</span></td></tr>
|
||||
<tr><td>3</td><td>王芳</td><td>CQ003388</td><td>勘探开发研究院</td><td>地质研究室</td><td>2026-04-20</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link" onclick="openReportDetail('王芳','CQ003388')">报告详情</span> <span class="link" onclick="openTrendAnalysis('王芳','CQ003388')">趋势分析</span></td></tr>
|
||||
<tr><td>4</td><td>刘洋</td><td>CQ004102</td><td>采油三厂</td><td>生产二队</td><td>2026-02-28</td><td><span class="tag tag-red">重大异常</span></td><td>肺结节、肝功能异常、血糖偏高、心律不齐、甲状腺结节</td><td><span class="link" onclick="openReportDetail('刘洋','CQ004102')">报告详情</span> <span class="link" onclick="openTrendAnalysis('刘洋','CQ004102')">趋势分析</span></td></tr>
|
||||
<tr><td>5</td><td>陈磊</td><td>CQ006890</td><td>采油一厂</td><td>安全环保部</td><td>2026-03-08</td><td><span class="tag tag-red">重大异常</span></td><td>肺结节、血脂异常、脂肪肝、高血压、颈动脉斑块、前列腺增生、肾囊肿</td><td><span class="link" onclick="openReportDetail('陈磊','CQ006890')">报告详情</span> <span class="link" onclick="openTrendAnalysis('陈磊','CQ006890')">趋势分析</span></td></tr>
|
||||
<tr><td>6</td><td>孙丽</td><td>CQ007234</td><td>采油二厂</td><td>生产一队</td><td>2026-03-20</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link" onclick="openReportDetail('孙丽','CQ007234')">报告详情</span> <span class="link" onclick="openTrendAnalysis('孙丽','CQ007234')">趋势分析</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -203,6 +234,117 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 报告详情弹窗 -->
|
||||
<div class="modal-mask" id="reportDetailModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3 id="reportDetailTitle">体检报告详情</h3>
|
||||
<button class="modal__close" onclick="closeModal('reportDetailModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="report-year-selector">
|
||||
<label>查看年份：</label>
|
||||
<select class="filter-select" onchange="switchReportYear(this.value)" style="min-width:100px;">
|
||||
<option value="2026">2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
<option value="2023">2023年</option>
|
||||
</select>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);margin-left:8px;" id="reportDateLabel">体检日期：2026-03-15 体检医院：延安大学附属医院</span>
|
||||
</div>
|
||||
<div style="margin-bottom:16px;padding:12px 16px;background:#FAFAFA;border-radius:var(--radius-sm);display:flex;gap:24px;flex-wrap:wrap;">
|
||||
<span style="font-size:var(--font-sm);"><span style="color:var(--text-secondary);">姓名：</span><strong id="rdName">—</strong></span>
|
||||
<span style="font-size:var(--font-sm);"><span style="color:var(--text-secondary);">员工编号：</span><strong id="rdCode">—</strong></span>
|
||||
<span style="font-size:var(--font-sm);"><span style="color:var(--text-secondary);">结果分类：</span><strong><span class="tag tag-orange" id="rdResult">异常</span></strong></span>
|
||||
</div>
|
||||
<!-- 血液检查 -->
|
||||
<div style="margin-bottom:20px;">
|
||||
<div style="font-size:var(--font-base);font-weight:600;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--primary);">血液检查</div>
|
||||
<div class="report-grid">
|
||||
<div class="report-item"><span class="label">总胆固醇</span><span class="value abnormal">6.8 mmol/L <span style="font-size:10px;background:#FFF1F0;color:var(--danger);padding:1px 4px;border-radius:3px;">↑偏高</span></span></div>
|
||||
<div class="report-item"><span class="label">甘油三酯</span><span class="value abnormal">3.2 mmol/L <span style="font-size:10px;background:#FFF1F0;color:var(--danger);padding:1px 4px;border-radius:3px;">↑偏高</span></span></div>
|
||||
<div class="report-item"><span class="label">空腹血糖</span><span class="value">5.4 mmol/L</span></div>
|
||||
<div class="report-item"><span class="label">尿酸</span><span class="value">388 μmol/L</span></div>
|
||||
<div class="report-item"><span class="label">谷丙转氨酶</span><span class="value">32 U/L</span></div>
|
||||
<div class="report-item"><span class="label">肌酐</span><span class="value">88 μmol/L</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 体格检查 -->
|
||||
<div style="margin-bottom:20px;">
|
||||
<div style="font-size:var(--font-base);font-weight:600;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--primary);">体格检查</div>
|
||||
<div class="report-grid">
|
||||
<div class="report-item"><span class="label">血压（收缩压）</span><span class="value abnormal">148 mmHg <span style="font-size:10px;background:#FFF1F0;color:var(--danger);padding:1px 4px;border-radius:3px;">↑偏高</span></span></div>
|
||||
<div class="report-item"><span class="label">血压（舒张压）</span><span class="value">88 mmHg</span></div>
|
||||
<div class="report-item"><span class="label">身高</span><span class="value">172 cm</span></div>
|
||||
<div class="report-item"><span class="label">体重</span><span class="value">82 kg</span></div>
|
||||
<div class="report-item"><span class="label">BMI</span><span class="value abnormal">27.7 <span style="font-size:10px;background:#FFF7E6;color:var(--warning);padding:1px 4px;border-radius:3px;">超重</span></span></div>
|
||||
<div class="report-item"><span class="label">腰围</span><span class="value">92 cm</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 影像学检查 -->
|
||||
<div style="margin-bottom:20px;">
|
||||
<div style="font-size:var(--font-base);font-weight:600;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--primary);">影像学检查</div>
|
||||
<div class="report-grid">
|
||||
<div class="report-item"><span class="label">胸部X光</span><span class="value">未见明显异常</span></div>
|
||||
<div class="report-item"><span class="label">腹部超声</span><span class="value abnormal">脂肪肝（轻度）</span></div>
|
||||
<div class="report-item"><span class="label">颈动脉超声</span><span class="value">内膜增厚</span></div>
|
||||
<div class="report-item"><span class="label">心电图</span><span class="value">正常心电图</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 医生建议 -->
|
||||
<div style="background:#F6FFED;border:1px solid #B7EB8F;border-radius:var(--radius-sm);padding:12px 16px;font-size:var(--font-sm);color:#389E0D;line-height:1.7;">
|
||||
<strong>医生建议：</strong>血脂偏高，建议低脂饮食，减少油脂摄入；轻度脂肪肝，注意控制体重；血压偏高，建议减少盐分摄入，定期监测。如有不适，请及时就医。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 趋势分析弹窗 -->
|
||||
<div class="modal-mask" id="trendModal">
|
||||
<div class="modal" style="width:960px;">
|
||||
<div class="modal__header">
|
||||
<h3 id="trendTitle">体检趋势分析</h3>
|
||||
<button class="modal__close" onclick="closeModal('trendModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="trend-controls">
|
||||
<label>年份范围：</label>
|
||||
<select class="filter-select" style="min-width:90px;" id="trendYearFrom">
|
||||
<option>2022年</option><option>2023年</option><option selected>2024年</option><option>2025年</option>
|
||||
</select>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">至</span>
|
||||
<select class="filter-select" style="min-width:90px;" id="trendYearTo">
|
||||
<option>2023年</option><option>2024年</option><option>2025年</option><option selected>2026年</option>
|
||||
</select>
|
||||
<label style="margin-left:8px;">项目分类：</label>
|
||||
<select class="filter-select" style="min-width:120px;" onchange="filterTrendItems(this.value)">
|
||||
<option value="all">全部</option>
|
||||
<option value="blood">血液检查</option>
|
||||
<option value="physical">体格检查</option>
|
||||
<option value="image">影像学检查</option>
|
||||
</select>
|
||||
<button class="btn btn-primary" style="margin-left:8px;" onclick="renderTrendChart()">更新图表</button>
|
||||
</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:10px;">勾选指标项查看对应折线变化（最多同时对比6项）：</div>
|
||||
<div class="trend-items" id="trendItemList">
|
||||
<label class="trend-item active" data-key="cholesterol" data-category="blood"><input type="checkbox" checked onchange="toggleTrendItem(this)">总胆固醇</label>
|
||||
<label class="trend-item active" data-key="triglyceride" data-category="blood"><input type="checkbox" checked onchange="toggleTrendItem(this)">甘油三酯</label>
|
||||
<label class="trend-item" data-key="glucose" data-category="blood"><input type="checkbox" onchange="toggleTrendItem(this)">空腹血糖</label>
|
||||
<label class="trend-item" data-key="uricacid" data-category="blood"><input type="checkbox" onchange="toggleTrendItem(this)">尿酸</label>
|
||||
<label class="trend-item" data-key="alt" data-category="blood"><input type="checkbox" onchange="toggleTrendItem(this)">谷丙转氨酶</label>
|
||||
<label class="trend-item" data-key="sbp" data-category="physical"><input type="checkbox" onchange="toggleTrendItem(this)">收缩压</label>
|
||||
<label class="trend-item" data-key="dbp" data-category="physical"><input type="checkbox" onchange="toggleTrendItem(this)">舒张压</label>
|
||||
<label class="trend-item" data-key="bmi" data-category="physical"><input type="checkbox" onchange="toggleTrendItem(this)">BMI</label>
|
||||
<label class="trend-item" data-key="waist" data-category="physical"><input type="checkbox" onchange="toggleTrendItem(this)">腰围</label>
|
||||
</div>
|
||||
<div class="trend-chart" id="trendChartArea">
|
||||
<!-- SVG折线图将由JS渲染 -->
|
||||
</div>
|
||||
<div class="trend-legend" id="trendLegend"></div>
|
||||
<div style="margin-top:16px;font-size:var(--font-xs);color:var(--text-placeholder);">注：图表数据为原型演示数据，不代表真实体检结果。纵轴为各指标标准化百分比（0=正常下限，100=正常上限）。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
@@ -216,6 +358,144 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* ========== 弹窗通用 ========== */
|
||||
function closeModal(id){
|
||||
document.getElementById(id).classList.remove('show');
|
||||
}
|
||||
// 点击遮罩关闭
|
||||
document.querySelectorAll('.modal-mask').forEach(function(mask){
|
||||
mask.addEventListener('click',function(e){if(e.target===mask)mask.classList.remove('show');});
|
||||
});
|
||||
|
||||
/* ========== 报告详情 ========== */
|
||||
function openReportDetail(name, code){
|
||||
document.getElementById('reportDetailTitle').textContent = name + ' 的体检报告详情';
|
||||
document.getElementById('rdName').textContent = name;
|
||||
document.getElementById('rdCode').textContent = code;
|
||||
document.getElementById('reportDetailModal').classList.add('show');
|
||||
}
|
||||
function switchReportYear(year){
|
||||
var map={
|
||||
'2026':'体检日期：2026-03-15 体检医院：延安大学附属医院',
|
||||
'2025':'体检日期：2025-04-10 体检医院：宁夏宝石花医院',
|
||||
'2024':'体检日期：2024-03-22 体检医院：延安大学附属医院',
|
||||
'2023':'体检日期：2023-05-08 体检医院：宁夏宝石花医院'
|
||||
};
|
||||
document.getElementById('reportDateLabel').innerHTML = map[year]||'';
|
||||
}
|
||||
|
||||
/* ========== 趋势分析 ========== */
|
||||
// 各指标模拟数据（2022-2026，标准化百分比，100=正常上限，负值=低于下限）
|
||||
var TREND_DATA = {
|
||||
cholesterol: { label:'总胆固醇', unit:'mmol/L', color:'#1890FF', values:[72,85,98,108,120] },
|
||||
triglyceride:{ label:'甘油三酯', unit:'mmol/L', color:'#FF4D4F', values:[55,68,85,105,130] },
|
||||
glucose: { label:'空腹血糖', unit:'mmol/L', color:'#52C41A', values:[60,62,65,70,75] },
|
||||
uricacid: { label:'尿酸', unit:'μmol/L', color:'#FAAD14', values:[50,55,60,70,80] },
|
||||
alt: { label:'谷丙转氨酶',unit:'U/L', color:'#722ED1', values:[30,35,40,50,45] },
|
||||
sbp: { label:'收缩压', unit:'mmHg', color:'#EB2F96', values:[80,90,100,115,130]},
|
||||
dbp: { label:'舒张压', unit:'mmHg', color:'#13C2C2', values:[60,65,70,78,82] },
|
||||
bmi: { label:'BMI', unit:'', color:'#FA8C16', values:[85,90,95,100,107]},
|
||||
waist: { label:'腰围', unit:'cm', color:'#A0D911', values:[70,75,80,88,95] }
|
||||
};
|
||||
var YEARS = ['2022','2023','2024','2025','2026'];
|
||||
var activeKeys = ['cholesterol','triglyceride'];
|
||||
|
||||
function openTrendAnalysis(name, code){
|
||||
document.getElementById('trendTitle').textContent = name + ' 的体检趋势分析';
|
||||
renderTrendChart();
|
||||
document.getElementById('trendModal').classList.add('show');
|
||||
}
|
||||
|
||||
function toggleTrendItem(checkbox){
|
||||
var label = checkbox.closest('.trend-item');
|
||||
var key = label.getAttribute('data-key');
|
||||
if(checkbox.checked){
|
||||
if(activeKeys.length>=6){checkbox.checked=false;return;}
|
||||
label.classList.add('active');
|
||||
if(!activeKeys.includes(key))activeKeys.push(key);
|
||||
} else {
|
||||
label.classList.remove('active');
|
||||
activeKeys = activeKeys.filter(function(k){return k!==key;});
|
||||
}
|
||||
renderTrendChart();
|
||||
}
|
||||
|
||||
function filterTrendItems(category){
|
||||
document.querySelectorAll('.trend-item').forEach(function(item){
|
||||
if(category==='all'||item.getAttribute('data-category')===category){
|
||||
item.style.display='';
|
||||
} else {
|
||||
item.style.display='none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderTrendChart(){
|
||||
var W=860, H=360, padL=50, padR=20, padT=30, padB=40;
|
||||
var chartW=W-padL-padR, chartH=H-padT-padB;
|
||||
var years=YEARS;
|
||||
var keys=activeKeys.filter(function(k){return TREND_DATA[k];});
|
||||
if(!keys.length){
|
||||
document.getElementById('trendChartArea').innerHTML='<span style="color:var(--text-placeholder);">请勾选至少一个指标项</span>';
|
||||
document.getElementById('trendLegend').innerHTML='';
|
||||
return;
|
||||
}
|
||||
|
||||
// X轴
|
||||
var xStep = chartW/(years.length-1);
|
||||
// Y轴范围 0~150
|
||||
var yMin=0, yMax=150;
|
||||
|
||||
function xPos(i){ return padL + i*xStep; }
|
||||
function yPos(v){ return padT + chartH - (v-yMin)/(yMax-yMin)*chartH; }
|
||||
|
||||
var svgParts = ['<svg xmlns="http://www.w3.org/2000/svg" width="'+W+'" height="'+H+'" style="overflow:visible;">'];
|
||||
|
||||
// 网格线
|
||||
svgParts.push('<g stroke="#E8E8E8" stroke-width="1">');
|
||||
for(var g=0;g<=5;g++){
|
||||
var gv=yMin+g*(yMax-yMin)/5;
|
||||
var gy=yPos(gv);
|
||||
svgParts.push('<line x1="'+padL+'" y1="'+gy+'" x2="'+(W-padR)+'" y2="'+gy+'"/>');
|
||||
svgParts.push('<text x="'+(padL-6)+'" y="'+(gy+4)+'" text-anchor="end" font-size="11" fill="#999">'+Math.round(gv)+'</text>');
|
||||
}
|
||||
svgParts.push('</g>');
|
||||
|
||||
// 参考线：100% = 正常上限
|
||||
var refY=yPos(100);
|
||||
svgParts.push('<line x1="'+padL+'" y1="'+refY+'" x2="'+(W-padR)+'" y2="'+refY+'" stroke="#FAAD14" stroke-width="1" stroke-dasharray="6,3"/>');
|
||||
svgParts.push('<text x="'+(W-padR+4)+'" y="'+(refY+4)+'" font-size="10" fill="#FAAD14">正常上限</text>');
|
||||
|
||||
// X轴标签
|
||||
svgParts.push('<g font-size="12" fill="#666" text-anchor="middle">');
|
||||
years.forEach(function(y,i){ svgParts.push('<text x="'+xPos(i)+'" y="'+(H-padB+18)+'">'+y+'</text>'); });
|
||||
svgParts.push('</g>');
|
||||
|
||||
// 折线
|
||||
keys.forEach(function(key){
|
||||
var d=TREND_DATA[key];
|
||||
var pts=d.values.map(function(v,i){return xPos(i)+','+yPos(v);}).join(' ');
|
||||
svgParts.push('<polyline points="'+pts+'" fill="none" stroke="'+d.color+'" stroke-width="2.5" stroke-linejoin="round"/>');
|
||||
d.values.forEach(function(v,i){
|
||||
svgParts.push('<circle cx="'+xPos(i)+'" cy="'+yPos(v)+'" r="4" fill="'+d.color+'" stroke="#fff" stroke-width="1.5"/>');
|
||||
if(v>100){
|
||||
svgParts.push('<text x="'+xPos(i)+'" y="'+(yPos(v)-8)+'" text-anchor="middle" font-size="10" fill="'+d.color+'">'+Math.round(v)+'</text>');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
svgParts.push('</svg>');
|
||||
document.getElementById('trendChartArea').innerHTML=svgParts.join('');
|
||||
|
||||
// 图例
|
||||
var legend='';
|
||||
keys.forEach(function(key){
|
||||
var d=TREND_DATA[key];
|
||||
legend+='<div class="trend-legend-item"><div class="trend-legend-color" style="background:'+d.color+'"></div>'+d.label+(d.unit?' ('+d.unit+')')+'</div>';
|
||||
});
|
||||
document.getElementById('trendLegend').innerHTML=legend;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -150,7 +150,7 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<label>体检年度：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>2025</option><option>2024</option><option>2023</option>
|
||||
</select>
|
||||
|
||||
@@ -151,6 +151,15 @@
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年度：</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>请选择</option>
|
||||
<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:120px;">
|
||||
@@ -203,15 +212,6 @@
|
||||
<option>2026年度常规体检</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>请选择</option>
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
@@ -149,6 +149,10 @@
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年度：</label>
|
||||
<input class="filter-input" type="text" placeholder="2026" style="min-width:100px;" value="2026">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
@@ -157,12 +161,44 @@
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入身份证号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>请选择性别</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年龄：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入年龄" style="min-width:120px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检计划：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择体检计划</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>系统体检状态：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择系统体检状态</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>医院选择：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择医院选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
@@ -182,11 +218,11 @@
|
||||
<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><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>1</td><td>王建国</td><td>20045678</td><td>610105196712080031</td><td>男</td><td>59</td><td>公司机关</td><td>安全环保部</td><td>冠脉CTA</td><td>2026</td><td>—</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>1</td><td>王建国</td><td>20045678</td><td>610105196712080031</td><td>男</td><td>59</td><td>公司机关</td><td>安全环保部</td><td>冠脉CTA</td><td>未体检</td><td>宁夏宝石花医院</td><td>2026</td><td>—</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -149,6 +149,10 @@
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年度：</label>
|
||||
<input class="filter-input" type="text" placeholder="2026" style="min-width:100px;" value="2026">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
@@ -157,12 +161,44 @@
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入身份证号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>请选择性别</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年龄：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入年龄" style="min-width:120px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检计划：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择体检计划</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>系统体检状态：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择系统体检状态</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>医院选择：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择医院选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
@@ -182,11 +218,11 @@
|
||||
<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><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>1</td><td>陈伟</td><td>30078912</td><td>610103197809220015</td><td>男</td><td>48</td><td>采油四厂</td><td>工程技术科</td><td>胃镜,肠镜</td><td>2026</td><td>—</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>1</td><td>陈伟</td><td>30078912</td><td>610103197809220015</td><td>男</td><td>48</td><td>采油四厂</td><td>工程技术科</td><td>胃镜,肠镜</td><td>未体检</td><td>宁夏宝石花医院</td><td>2026</td><td>—</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -149,18 +149,34 @@
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<input class="filter-input" type="text" placeholder="2026" style="min-width:100px;" value="2026">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名" style="min-width:120px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
<input class="filter-input" type="text" placeholder="请输入员工编号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>指定医院：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<label>指定体检医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择指定体检医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>请选择单位</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>部门：</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>请选择部门</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -168,9 +184,12 @@
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 新增</button>
|
||||
<button class="btn btn-default">批量导入</button>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:center;">
|
||||
<button class="btn btn-primary">+ 添加指定体检医院员工</button>
|
||||
<button class="btn btn-default">批量删除</button>
|
||||
<button class="btn btn-default">↓ 模板下载</button>
|
||||
<button class="btn btn-default" style="color:var(--success);border-color:var(--success);">导入清单</button>
|
||||
<button class="btn btn-default" style="color:var(--success);border-color:var(--success);">查看任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@@ -182,23 +201,28 @@
|
||||
<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><th>操作</th>
|
||||
<th><input type="checkbox" style="cursor:pointer;"></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>50034567</td><td>610104198203170046</td><td>女</td><td>44</td><td>采油五厂</td><td>综合办</td><td>宝石花医院</td><td>距离就近</td><td>2026</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td><input type="checkbox" style="cursor:pointer;"></td><td>周晓荣</td><td>00008401</td><td>延安医院</td><td>511222198007214711</td><td>18717508585</td><td>第一采油厂</td><td>广领导</td><td>2026</td><td>2026-04-29</td><td><span class="link" style="color:var(--danger);">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 67 条</span>
|
||||
<span>共 2205 条数据</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">7</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
<button class="page-btn">221</button>
|
||||
<span>></span>
|
||||
<span>10 条/页</span>
|
||||
<span style="margin-left:8px;">跳至</span>
|
||||
<input class="filter-input" type="text" style="min-width:50px;width:50px;height:32px;text-align:center;">
|
||||
<span>页</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -149,56 +149,114 @@
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年度：</label>
|
||||
<input class="filter-input" type="text" placeholder="2026" style="min-width:100px;" value="2026">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
<input class="filter-input" type="text" placeholder="请输入员工编号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入身份证号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>用工形式：</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>请选择用工形式</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工种：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
<label>年龄：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入年龄" style="min-width:120px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>请选择性别</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>系统体检状态：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择系统体检状态</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>医院选择：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择医院选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>请选择单位</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>部门：</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>请选择部门</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检计划：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择体检计划</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;margin-top:4px;">
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</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">+ 新增</button>
|
||||
<button class="btn btn-default">批量导入</button>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:center;">
|
||||
<button class="btn btn-primary">+ 添加本次职业检查人员</button>
|
||||
<button class="btn btn-default">↓ 员工清单导出</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
<button class="btn btn-default">↓ 模板下载</button>
|
||||
<button class="btn btn-default" style="color:var(--success);border-color:var(--success);">导入清单</button>
|
||||
<button class="btn btn-default" style="color:var(--success);border-color:var(--success);">查看任务</button>
|
||||
<button class="btn btn-default" style="color:var(--primary);border-color:var(--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><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>工种</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>1</td><td>贾彬</td><td>50500790</td><td>411330199001260043</td><td>女</td><td>36</td><td>长庆工程设计有限公司</td><td>建筑设计部</td><td>热力司炉工</td><td>合同制B</td><td>1994-09-01</td><td>2000-05-01</td><td>在岗期间</td><td>噪声,一氧化碳</td><td>2026</td><td>—</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>1</td><td>贾彬</td><td>50500790</td><td>女</td><td>36</td><td>411330199001260043</td><td>长庆工程设计有限公司</td><td>建筑设计部</td><td>热力司炉工</td><td>合同制B</td><td>1994-09-01</td><td>2000-05-01</td><td>在岗期间</td><td>未体检</td><td>宁夏宝石花医院</td><td>噪声,一氧化碳</td><td>2026</td><td>第二采气厂2026年员...</td><td>第二采气厂</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<span>共 17363 条数据</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>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">1737</button>
|
||||
<span>></span>
|
||||
<span>10 条/页</span>
|
||||
<span style="margin-left:8px;">跳至</span>
|
||||
<input class="filter-input" type="text" style="min-width:50px;width:50px;height:32px;text-align:center;">
|
||||
<span>页</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user