feat: 健康体检检后新增病种信息管理/重点指标异常统计/胃肠镜体检报告与统计页面，侧边栏与首页站点地图同步调整
This commit is contained in:
liuyunqin
@@ -229,8 +229,14 @@ const SITE_MAP = [
|
||||
{ file:'post-cancer-screening.html', label:'防癌筛查人数统计' },
|
||||
{ file:'post-standard-stat.html', label:'系统标准化项目统计' },
|
||||
{ file:'post-contracted-hospital.html', label:'签约医院人数统计' },
|
||||
{ file:'post-key-indicator-stat.html', label:'重点指标异常统计' },
|
||||
{ file:'post-gastro-stat.html', label:'胃肠镜体检统计' },
|
||||
{ file:'post-report-employee.html', label:'常规体检报告' },
|
||||
{ file:'post-report-gastro.html', label:'胃肠镜体检报告' },
|
||||
{ file:'post-report-unmatched.html', label:'体检报告未匹配项目' },
|
||||
{ file:'post-disease-info.html', label:'病种信息' },
|
||||
{ file:'post-conclusion-disease.html', label:'体检结论关联病种' },
|
||||
{ file:'post-auto-select-disease.html', label:'自动勾选病种' },
|
||||
{ file:'exception-dirty.html', label:'系统脏数据' },
|
||||
{ file:'exception-result.html', label:'结果异常' }
|
||||
]},
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
# 健康体检模块 CHANGELOG
|
||||
|
||||
## [Unreleased] 2026-08-28
|
||||
|
||||
### Added
|
||||
- `post-disease-info.html`：新增"病种信息"页面（检后/病种信息管理分组）。筛选条件：病种类别（下拉）、病种名称（模糊）；操作按钮：新增、批量删除、列设置；列表列：勾选、病种名称、病种类别、操作（编辑/详情/删除，末列固定右侧，全表居中）；共 31 条模拟数据（前 10 条与参考图一致），支持查询/重置、完整分页；新增/编辑弹窗（病种类别必选、病种名称必填且同类别查重）、详情弹窗、删除/批量删除确认，支持 ✕/遮罩/Esc 关闭
|
||||
- `post-conclusion-disease.html`：新增"体检结论关联病种"页面（检后/病种信息管理分组）。筛选条件：结论描述（模糊）、审核状态（审核通过/未审核）、医院选择；操作按钮：批量审核、批量删除、列设置；列表列：勾选、医院名称、结论描述（超宽省略）、病种字典表、审核状态、操作（审核/详情/删除，末列固定右侧，全表居中）；共 27 条模拟数据（前 10 条与参考图一致），支持查询/重置、完整分页；审核弹窗必选审核结果（审核通过/未审核，默认当前状态），并可调整关联病种；批量审核一键通过，详情弹窗、删除/批量删除确认
|
||||
- 检后各页面侧边栏及首页菜单新增"病种信息管理"分组（含"病种信息""体检结论关联病种""自动勾选病种"三个入口，位于体检报告信息分组之后）
|
||||
- `post-key-indicator-stat.html`：新增"重点指标异常统计"页面（检后/常规体检统计分组末位）。筛选条件：体检年份（置首，年份选择器，默认当前年份）、单位（下拉）；操作按钮：导出列表数据、导出指标统计数据、列设置；列表列：单位、年份、体检人数、异常人数、重点指标统计（详情链接，末列固定右侧）；模拟数据覆盖 2022 至当前年份共 45 条（2022–2025 年前 10 条与参考图一致），支持查询/重置（重置恢复当前年份）、完整分页；详情弹窗按"超声/血脂/CT"分类展示项目"正常/异常"统计表格（首行数据与参考图一致，其余行按体检人数确定性生成），支持 ✕/遮罩/Esc 关闭
|
||||
- 检后各页面侧边栏"常规体检统计"分组及首页菜单新增"重点指标异常统计"入口（位于签约医院人数统计之下）
|
||||
- `post-report-gastro.html`：新增"胃肠镜体检报告"页面（检后/体检报告信息分组）。筛选条件：体检年份、单位部门、姓名、员工编号、身份证号、体检医院；操作按钮：导出列表数据、导出体检数据、查看导出任务、导入体检数据、查看导入任务、列设置；列表列顺序：姓名、员工编号、性别、年龄、单位、部门、身份证号、体检医院、检查日期、胃镜报告、肠镜报告、创建时间、体检年份、操作（体检年份紧邻操作列），胃镜/肠镜报告以图片缩略图展示（缺图显示占位符），操作列支持编辑（上传/替换报告图片）与详情（只读查看：姓名/身份证号/单位/部门/承检医院/体检年份，胃镜/肠镜/活检报告图片，体检项目/病种勾选（SE02.02 糜烂性胃炎、SE02.05 黏膜萎缩）/体检处理情况（PE01.01 病理取材、PE01.02 建议复查）/病变情况（LE01.01 胃黏膜糜烂、LE01.02 胃黏膜萎缩）页签，均为"#/项目编号/项目名称/结果"表格，无报告者显示暂无数据，无上传修改）
|
||||
- 检后各页面侧边栏"体检报告信息"分组及首页菜单新增"胃肠镜体检报告"入口（位于常规体检报告之下、体检报告未匹配项目之上）
|
||||
- `post-gastro-stat.html`：新增"胃肠镜体检统计"页面（检后/二级菜单，与"常规体检统计"分组平级，位于其下、"体检报告信息"分组之上）。筛选条件：单位（选后联动部门下拉）、部门、体检年份（年份选择器）；操作按钮：导出、查看导出记录（静态展示）；列表列：单位、部门、应检人数、已体检人数、已预约人数、已出报告人数、未预约人数、体检年份；共 169 条模拟数据（前 10 条与参考图一致），支持查询/重置、完整分页（页码省略号、每页 10/20/50 条、跳转页码）；检后各页面侧边栏及首页菜单同步新增入口
|
||||
|
||||
### Changed
|
||||
- "病种信息管理"分组整体从基础配置移至检后：三个页面重命名为 post-disease-info / post-conclusion-disease / post-auto-select-disease（原 config- 前缀），顶部导航高亮由"基础配置"改为"检后"；基础配置 8 个页面侧边栏移除该分组，检后 12 个页面侧边栏在"体检报告信息"分组之后新增该分组，首页站点地图同步调整
|
||||
- 检后全部 10 个页面侧边栏分组"体检情况统计"更名为"常规体检统计"
|
||||
|
||||
## [Unreleased] 2026-05-11
|
||||
|
||||
### Changed
|
||||
|
||||
@@ -0,0 +1,519 @@
|
||||
<!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;}
|
||||
/* 主内容 */
|
||||
.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 24px;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-input::placeholder{color:var(--text-placeholder);}
|
||||
.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);}
|
||||
.filter-select.placeholder{color:var(--text-placeholder);}
|
||||
/* 年份输入（带日历图标） */
|
||||
.year-wrap{position:relative;}
|
||||
.year-wrap .filter-input{min-width:140px;padding-right:32px;}
|
||||
.year-wrap svg{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;}
|
||||
.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);}
|
||||
/* 图标按钮（列设置） */
|
||||
.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:6px;display:inline-flex;align-items:center;transition:color .2s;}
|
||||
.icon-btn:hover{color:var(--primary);}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.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:center;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;text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 末列"操作"固定右侧 */
|
||||
#autoTable thead th:last-child{position:sticky;right:0;background:#FAFAFA;border-left:1px solid var(--border);}
|
||||
#autoTable tbody td:last-child{position:sticky;right:0;background:#fff;border-left:1px solid var(--border);}
|
||||
#autoTable tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}.link-danger:hover{color:#ff7875;}
|
||||
.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);}
|
||||
/* 弹窗 */
|
||||
.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;overflow-y:auto;}
|
||||
.modal-mask.open{display:flex;align-items:flex-start;justify-content:center;padding:60px 24px;}
|
||||
.modal{width:860px;max-width:100%;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:flex;flex-direction:column;max-height:calc(100vh - 120px);}
|
||||
.modal__header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__close{cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;transition:color .2s;}
|
||||
.modal__close:hover{color:var(--danger);}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__body{padding:20px;overflow-y:auto;}
|
||||
/* 状态标签 */
|
||||
.tag{display:inline-block;padding:2px 10px;border-radius:10px;font-size:var(--font-xs);line-height:18px;}
|
||||
.tag-success{background:#F6FFED;color:#52C41A;border:1px solid #B7EB8F;}
|
||||
.tag-warning{background:#FFFBE6;color:#FAAD14;border:1px solid #FFE58F;}
|
||||
.tag-info{background:#E6F7FF;color:#1890FF;border:1px solid #91D5FF;}
|
||||
</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-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">签约医院人数统计</a>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="post-gastro-stat.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-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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 active">自动勾选病种</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" id="f-name" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" id="f-idcard" placeholder="请输入身份证号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>勾选状态：</label>
|
||||
<select class="filter-select placeholder" id="f-status" onchange="this.classList.toggle('placeholder',!this.value)">
|
||||
<option value="">请选择勾选状态</option>
|
||||
<option value="部分勾选">部分勾选</option>
|
||||
<option value="全部勾选">全部勾选</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<span class="year-wrap">
|
||||
<input class="filter-input" type="text" id="f-year" placeholder="请选择年份" value="2025">
|
||||
<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 1.2v2.2M9.5 1.2v2.2" stroke="#999" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select placeholder" id="f-unit" onchange="this.classList.toggle('placeholder',!this.value)">
|
||||
<option value="">请选择单位</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>部门：</label>
|
||||
<select class="filter-select placeholder" id="f-dept" onchange="this.classList.toggle('placeholder',!this.value)">
|
||||
<option value="">请选择部门</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>医院名称：</label>
|
||||
<select class="filter-select placeholder" id="f-hospital" onchange="this.classList.toggle('placeholder',!this.value)">
|
||||
<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;align-items:center;">
|
||||
<button class="btn btn-primary" onclick="runAutoSelect()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9.3 2.2l2.5 2.5M2 12l.9-3.4 7-7a1.3 1.3 0 0 1 1.9 0l.6.6a1.3 1.3 0 0 1 0 1.9l-7 7L2 12z" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
自动勾选病种
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="openRecord('select')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v7M4 6l3 3 3-3M2 11.5h10" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
查看自动勾选记录
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="runAutoFilter()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9.3 2.2l2.5 2.5M2 12l.9-3.4 7-7a1.3 1.3 0 0 1 1.9 0l.6.6a1.3 1.3 0 0 1 0 1.9l-7 7L2 12z" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
自动筛选异常项
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="openRecord('filter')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v7M4 6l3 3 3-3M2 11.5h10" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
查看自动筛选记录
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="exportDisease()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M8.5 2H11a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h2.5M7 1.5v6M4.8 5.3L7 7.5l2.2-2.2" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出员工病种
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="openRecord('export')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v7M4 6l3 3 3-3M2 11.5h10" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
查看病种导出记录
|
||||
</button>
|
||||
<button class="icon-btn" title="列设置" style="margin-left:auto;">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="1.8" stroke="currentColor" stroke-width="1.2"/><path d="M8 1.8v1.7M8 12.5v1.7M1.8 8h1.7M12.5 8h1.7M3.6 3.6l1.2 1.2M9.2 9.2l1.2 1.2M12.4 3.6l-1.2 1.2M4.8 9.2l-1.2 1.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__content">
|
||||
<table id="autoTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>身份证号</th>
|
||||
<th>单位</th>
|
||||
<th>部门</th>
|
||||
<th>医院名称</th>
|
||||
<th>体检年份</th>
|
||||
<th>勾选状态</th>
|
||||
<th>勾选病种数</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination" id="pagination"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 记录弹窗 -->
|
||||
<div class="modal-mask" id="recordMask" onclick="if(event.target===this)closeRecord()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__close" onclick="closeRecord()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span class="modal__title" id="recordTitle">记录</span>
|
||||
</div>
|
||||
<div class="modal__body" style="padding:0;" id="recordBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ============ 数据 ============ */
|
||||
/* [姓名, 身份证号, 单位, 部门, 医院名称, 体检年份, 勾选状态, 勾选病种数] */
|
||||
var rows=[
|
||||
['王军文','642103197412105210','第六采油厂','生产保障大队','宁夏宝石花医院','2025','部分勾选',3],
|
||||
['郭锋','642103197601275235','第六采油厂','武峁子采油作业区','宁夏宝石花医院','2025','部分勾选',4],
|
||||
['周扬','642103198907275216','第六采油厂','武峁子采油作业区','宁夏宝石花医院','2025','部分勾选',2],
|
||||
['张兴文','622821197512150016','第六采油厂','武峁子采油作业区','宁夏宝石花医院','2025','部分勾选',3],
|
||||
['李长青','640382198608185215','第六采油厂','武峁子采油作业区','宁夏宝石花医院','2025','部分勾选',3],
|
||||
['施亚亮','642103198010295212','第六采油厂','生产保障大队','宁夏宝石花医院','2025','部分勾选',4],
|
||||
['袁雪利','642101197909030549','第六采油厂','武峁子采油作业区','宁夏宝石花医院','2025','部分勾选',4],
|
||||
['李星','640382199212225123','第六采油厂','武峁子采油作业区','宁夏宝石花医院','2025','部分勾选',2],
|
||||
['刘军','642103199108065217','第六采油厂','武峁子采油作业区','宁夏宝石花医院','2025','部分勾选',1],
|
||||
['张亮','642103198304055230','第六采油厂','安边采油作业区','宁夏宝石花医院','2025','部分勾选',2],
|
||||
['高建峰','642103198705205211','第六采油厂','井诺采油作业区','宁夏宝石花医院','2025','全部勾选',5],
|
||||
['马晓燕','640382199003158246','第六采油厂','生产保障大队','庆阳医院','2025','部分勾选',2],
|
||||
['白学东','642103197806015239','第六采油厂','安边采油作业区','庆阳医院','2024','部分勾选',3],
|
||||
['柴永军','622821198211030015','第六采油厂','井诺采油作业区','庆阳医院','2024','全部勾选',4]
|
||||
];
|
||||
/* 记录数据 */
|
||||
var selectRecords=[
|
||||
['2025-11-08 15:20:31','2025','128',512,'系统管理员','成功'],
|
||||
['2025-11-05 09:12:44','2025','96',388,'系统管理员','成功'],
|
||||
['2025-10-28 14:03:17','2025','152',603,'李红','部分失败'],
|
||||
['2025-10-20 10:45:02','2025','143',571,'系统管理员','成功']
|
||||
];
|
||||
var filterRecords=[
|
||||
['2025-11-08 15:26:02','2025','128',64,'系统管理员','成功'],
|
||||
['2025-11-05 09:18:55','2025','96',41,'系统管理员','成功'],
|
||||
['2025-10-28 14:11:38','2025','152',77,'李红','成功']
|
||||
];
|
||||
var exportRecords=[
|
||||
['员工病种导出_2025.xlsx','2025-11-08 15:31:12','系统管理员','成功'],
|
||||
['员工病种导出_2025-11-05.xlsx','2025-11-05 09:22:40','系统管理员','成功'],
|
||||
['员工病种导出_2025-10-28.xlsx','2025-10-28 14:20:05','李红','已过期']
|
||||
];
|
||||
var state={name:'',idcard:'',status:'',year:'2025',unit:'',dept:'',hospital:'',page:1,pageSize:10};
|
||||
|
||||
/* ============ 初始化下拉 ============ */
|
||||
function uniq(col){var s=[];rows.forEach(function(r){if(s.indexOf(r[col])===-1)s.push(r[col]);});return s;}
|
||||
function fillSelect(id,list,placeholder){
|
||||
var sel=document.getElementById(id);
|
||||
list.forEach(function(v){var opt=document.createElement('option');opt.value=v;opt.textContent=v;sel.appendChild(opt);});
|
||||
}
|
||||
function initOptions(){
|
||||
fillSelect('f-unit',uniq(2));
|
||||
fillSelect('f-dept',uniq(3));
|
||||
fillSelect('f-hospital',uniq(4));
|
||||
}
|
||||
|
||||
/* ============ 查询/重置 ============ */
|
||||
function doQuery(){
|
||||
state.name=document.getElementById('f-name').value.trim();
|
||||
state.idcard=document.getElementById('f-idcard').value.trim();
|
||||
state.status=document.getElementById('f-status').value;
|
||||
state.year=document.getElementById('f-year').value.trim();
|
||||
state.unit=document.getElementById('f-unit').value;
|
||||
state.dept=document.getElementById('f-dept').value;
|
||||
state.hospital=document.getElementById('f-hospital').value;
|
||||
state.page=1;
|
||||
renderTable();
|
||||
}
|
||||
function doReset(){
|
||||
['f-name','f-idcard'].forEach(function(id){document.getElementById(id).value='';});
|
||||
document.getElementById('f-year').value='';
|
||||
['f-status','f-unit','f-dept','f-hospital'].forEach(function(id){
|
||||
var s=document.getElementById(id);s.value='';s.classList.add('placeholder');
|
||||
});
|
||||
state.name='';state.idcard='';state.status='';state.year='';state.unit='';state.dept='';state.hospital='';
|
||||
state.page=1;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
/* ============ 表格渲染 ============ */
|
||||
function filteredRows(){
|
||||
var list=[];
|
||||
rows.forEach(function(r,i){
|
||||
if(state.name&&r[0].indexOf(state.name)===-1)return;
|
||||
if(state.idcard&&r[1].indexOf(state.idcard)===-1)return;
|
||||
if(state.status&&r[6]!==state.status)return;
|
||||
if(state.year&&r[5]!==state.year)return;
|
||||
if(state.unit&&r[2]!==state.unit)return;
|
||||
if(state.dept&&r[3]!==state.dept)return;
|
||||
if(state.hospital&&r[4]!==state.hospital)return;
|
||||
list.push(i);
|
||||
});
|
||||
return list;
|
||||
}
|
||||
function statusTag(s){
|
||||
var cls=s==='全部勾选'?'tag-success':'tag-info';
|
||||
return '<span class="tag '+cls+'">'+s+'</span>';
|
||||
}
|
||||
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 pageIdx=list.slice(start,start+state.pageSize);
|
||||
var tbody=document.getElementById('tbody');
|
||||
tbody.innerHTML=pageIdx.length?pageIdx.map(function(i){
|
||||
var r=rows[i];
|
||||
return '<tr>'
|
||||
+'<td>'+r[0]+'</td>'
|
||||
+'<td>'+r[1]+'</td>'
|
||||
+'<td>'+r[2]+'</td>'
|
||||
+'<td>'+r[3]+'</td>'
|
||||
+'<td>'+r[4]+'</td>'
|
||||
+'<td>'+r[5]+'</td>'
|
||||
+'<td>'+statusTag(r[6])+'</td>'
|
||||
+'<td>'+r[7]+'</td>'
|
||||
+'<td><span class="link-danger" onclick="deleteRow('+i+')">删除</span></td>'
|
||||
+'</tr>';
|
||||
}).join(''):'<tr><td colspan="9"><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 deleteRow(idx){
|
||||
if(!confirm('确认删除「'+rows[idx][0]+'」的自动勾选病种记录？'))return;
|
||||
rows.splice(idx,1);
|
||||
renderTable();
|
||||
}
|
||||
|
||||
/* ============ 自动勾选 / 筛选 / 导出 ============ */
|
||||
function runAutoSelect(){
|
||||
var year=document.getElementById('f-year').value.trim()||'2025';
|
||||
if(!confirm('确认对 '+year+' 年度已完成体检的员工执行自动勾选病种？'))return;
|
||||
alert('任务已提交，稍后可通过「查看自动勾选记录」了解执行结果。');
|
||||
}
|
||||
function runAutoFilter(){
|
||||
var year=document.getElementById('f-year').value.trim()||'2025';
|
||||
if(!confirm('确认对 '+year+' 年度已完成体检的员工执行自动筛选异常项？'))return;
|
||||
alert('任务已提交，稍后可通过「查看自动筛选记录」了解执行结果。');
|
||||
}
|
||||
function exportDisease(){
|
||||
if(!confirm('确认按当前查询条件导出员工病种？'))return;
|
||||
alert('导出任务已提交，可通过「查看病种导出记录」下载文件。');
|
||||
}
|
||||
|
||||
/* ============ 记录弹窗 ============ */
|
||||
function recordTable(headers,data){
|
||||
return '<table><thead><tr>'+headers.map(function(h){return '<th>'+h+'</th>';}).join('')+'</tr></thead><tbody>'
|
||||
+(data.length?data.map(function(r){
|
||||
return '<tr>'+r.map(function(c,ci){
|
||||
if(ci===r.length-1&&typeof c==='string'&&/成功|失败|已过期/.test(c)){
|
||||
var cls=c==='成功'?'tag-success':c==='已过期'?'tag-warning':'tag-warning';
|
||||
return '<td><span class="tag '+cls+'">'+c+'</span></td>';
|
||||
}
|
||||
return '<td>'+c+'</td>';
|
||||
}).join('')+'</tr>';
|
||||
}).join(''):'<tr><td colspan="'+headers.length+'"><div class="empty-tip">暂无数据</div></td></tr>')
|
||||
+'</tbody></table>';
|
||||
}
|
||||
var RECORD_TITLES={select:'自动勾选记录',filter:'自动筛选记录',export:'病种导出记录'};
|
||||
function openRecord(type){
|
||||
document.getElementById('recordTitle').textContent=RECORD_TITLES[type];
|
||||
var body=document.getElementById('recordBody');
|
||||
if(type==='select')body.innerHTML=recordTable(['执行时间','体检年份','执行人数','勾选病种数','操作人','结果'],selectRecords);
|
||||
else if(type==='filter')body.innerHTML=recordTable(['执行时间','体检年份','执行人数','异常项人数','操作人','结果'],filterRecords);
|
||||
else body.innerHTML=recordTable(['文件名称','导出时间','操作人','结果'],exportRecords);
|
||||
document.getElementById('recordMask').classList.add('open');
|
||||
}
|
||||
function closeRecord(){document.getElementById('recordMask').classList.remove('open');}
|
||||
document.addEventListener('keydown',function(e){if(e.key==='Escape')closeRecord();});
|
||||
|
||||
/* ============ 通用 ============ */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
initOptions();
|
||||
renderTable();
|
||||
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>
|
||||
@@ -111,7 +111,7 @@
|
||||
<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>
|
||||
@@ -121,8 +121,10 @@
|
||||
<a href="post-cancer-screening.html" class="sidebar-item active">防癌筛查人数统计</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>
|
||||
<a href="post-gastro-stat.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>
|
||||
@@ -130,9 +132,21 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -0,0 +1,535 @@
|
||||
<!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;}
|
||||
/* 主内容 */
|
||||
.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:220px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-input::placeholder{color:var(--text-placeholder);}
|
||||
.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:220px;}
|
||||
.filter-select:focus{border-color:var(--primary);}
|
||||
.filter-select.placeholder{color:var(--text-placeholder);}
|
||||
.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);}
|
||||
/* 图标按钮（列设置） */
|
||||
.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:6px;display:inline-flex;align-items:center;transition:color .2s;}
|
||||
.icon-btn:hover{color:var(--primary);}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.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:center;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;text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 结论描述列超宽省略 */
|
||||
.td-desc{max-width:320px;overflow:hidden;text-overflow:ellipsis;}
|
||||
/* 末列"操作"固定右侧 */
|
||||
#linkTable thead th:last-child{position:sticky;right:0;background:#FAFAFA;border-left:1px solid var(--border);}
|
||||
#linkTable tbody td:last-child{position:sticky;right:0;background:#fff;border-left:1px solid var(--border);}
|
||||
#linkTable tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}.link-danger:hover{color:#ff7875;}
|
||||
.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);}
|
||||
/* 弹窗 */
|
||||
.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;overflow-y:auto;}
|
||||
.modal-mask.open{display:flex;align-items:flex-start;justify-content:center;padding:60px 24px;}
|
||||
.modal{width:560px;max-width:100%;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:flex;flex-direction:column;max-height:calc(100vh - 120px);}
|
||||
.modal__header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__close{cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;transition:color .2s;}
|
||||
.modal__close:hover{color:var(--danger);}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__body{padding:20px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:16px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:6px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.radio-row{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;margin-right:24px;}
|
||||
.radio-row input{cursor:pointer;accent-color:var(--primary);width:14px;height:14px;}
|
||||
.form-select{width:100%;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;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-select.placeholder{color:var(--text-placeholder);}
|
||||
/* 详情 */
|
||||
.detail-table{width:100%;border-collapse:collapse;border:1px solid var(--border);}
|
||||
.detail-table th,.detail-table td{border-bottom:1px solid var(--border);text-align:left;padding:12px 16px;font-size:var(--font-sm);}
|
||||
.detail-table tr:last-child td{border-bottom:none;}
|
||||
.detail-table th{width:110px;background:#FAFAFA;color:var(--text-secondary);font-weight:500;}
|
||||
.detail-desc{white-space:normal;word-break:break-all;}
|
||||
</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-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">签约医院人数统计</a>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="post-gastro-stat.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-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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 active">体检结论关联病种</a>
|
||||
<a href="post-auto-select-disease.html" class="sidebar-item">自动勾选病种</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>结论描述：</label>
|
||||
<input class="filter-input" type="text" id="f-desc" placeholder="请输入结论描述">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>审核状态：</label>
|
||||
<select class="filter-select placeholder" id="f-status" onchange="this.classList.toggle('placeholder',!this.value)">
|
||||
<option value="">请选择审核状态</option>
|
||||
<option value="审核通过">审核通过</option>
|
||||
<option value="未审核">未审核</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>医院选择：</label>
|
||||
<select class="filter-select placeholder" id="f-hospital" onchange="this.classList.toggle('placeholder',!this.value)">
|
||||
<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;align-items:center;">
|
||||
<button class="btn btn-primary" onclick="batchAudit()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9.3 2.2l2.5 2.5M2 12l.9-3.4 7-7a1.3 1.3 0 0 1 1.9 0l.6.6a1.3 1.3 0 0 1 0 1.9l-7 7L2 12z" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
批量审核
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="batchDelete()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 3.5h10M5.5 3.5V2h3v1.5M3.5 3.5l.7 8.5h5.6l.7-8.5" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
批量删除
|
||||
</button>
|
||||
<button class="icon-btn" title="列设置" style="margin-left:auto;">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="1.8" stroke="currentColor" stroke-width="1.2"/><path d="M8 1.8v1.7M8 12.5v1.7M1.8 8h1.7M12.5 8h1.7M3.6 3.6l1.2 1.2M9.2 9.2l1.2 1.2M12.4 3.6l-1.2 1.2M4.8 9.2l-1.2 1.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__content">
|
||||
<table id="linkTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:48px;"><input type="checkbox" id="checkAll" onclick="toggleCheckAll(this)"></th>
|
||||
<th>医院名称</th>
|
||||
<th>结论描述</th>
|
||||
<th>病种字典表</th>
|
||||
<th>审核状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination" id="pagination"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 审核弹窗 -->
|
||||
<div class="modal-mask" id="auditMask" onclick="if(event.target===this)closeAudit()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__close" onclick="closeAudit()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span class="modal__title">结论审核</span>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<table class="detail-table" style="margin-bottom:16px;"><tbody>
|
||||
<tr><th>医院名称</th><td id="auditHospital"></td></tr>
|
||||
<tr><th>结论描述</th><td class="detail-desc" id="auditDesc"></td></tr>
|
||||
</tbody></table>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 审核结果</div>
|
||||
<label class="radio-row"><input type="radio" name="auditResult" value="审核通过"> 审核通过</label>
|
||||
<label class="radio-row"><input type="radio" name="auditResult" value="未审核"> 未审核</label>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">关联病种字典</div>
|
||||
<select class="form-select placeholder" id="auditDisease" onchange="this.classList.toggle('placeholder',!this.value)">
|
||||
<option value="">不关联病种</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeAudit()">取消</button>
|
||||
<button class="btn btn-primary" onclick="confirmAudit()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<div class="modal-mask" id="detailMask" onclick="if(event.target===this)closeDetail()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__close" onclick="closeDetail()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span class="modal__title">详情</span>
|
||||
</div>
|
||||
<div class="modal__body" id="detailBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ============ 数据 ============ */
|
||||
var hospitals=['庆阳医院','延安医院','兴隆园医院','泾河医院'];
|
||||
var diseaseDict=['高脂血','高血压','高血糖','超重','消瘦','甲状腺结节','心电图异常','心律失常','肺部结节','脂肪肝','肝囊肿','胆囊息肉','肾囊肿','前列腺增生','子宫肌瘤','乳腺结节','白内障','牙病','痔疮','颈部淋巴结增大','外耳道异物','其它一'];
|
||||
/* 前 10 条与参考图一致 */
|
||||
var rows=[
|
||||
['庆阳医院','体格检查:超重(BMI:24.16)','超重','审核通过'],
|
||||
['延安医院',':甲状腺多发性结节','甲状腺结节','审核通过'],
|
||||
['延安医院',':颈部浅表淋巴结肿大','颈部淋巴结增大','审核通过'],
|
||||
['延安医院',':外耳道异物','其它一','审核通过'],
|
||||
['延安医院',':唇红肿','','未审核'],
|
||||
['延安医院',':U波增高','心电图异常','审核通过'],
|
||||
['兴隆园医院','一般情况:体重偏低(BMI:18.29)','消瘦','审核通过'],
|
||||
['兴隆园医院','口腔科:牙齿:16.26残根','牙病','审核通过'],
|
||||
['兴隆园医院','以心脏彩超结果为主','','审核通过'],
|
||||
['兴隆园医院','生化:载脂蛋白B(APO-B)偏低低密度脂蛋白胆固醇(LDL-C)偏低','高脂血','审核通过'],
|
||||
['庆阳医院','心电图:窦性心动过缓','心电图异常','审核通过'],
|
||||
['庆阳医院','外科:痔疮','痔疮','审核通过'],
|
||||
['庆阳医院','B超:脂肪肝(轻度)','脂肪肝','审核通过'],
|
||||
['庆阳医院','血压偏高(BP:146/92mmHg)','高血压','未审核'],
|
||||
['庆阳医院','甘油三酯增高(TG:2.36mmol/L)','高脂血','审核通过'],
|
||||
['延安医院','内科:心律不齐','心律失常','未审核'],
|
||||
['延安医院','胸部CT:肺结节影','肺部结节','审核通过'],
|
||||
['延安医院','B超:双侧乳腺结构不良','乳腺结节','未审核'],
|
||||
['延安医院','眼科:双眼晶状体混浊','白内障','审核通过'],
|
||||
['延安医院','B超:肝囊肿','肝囊肿','审核通过'],
|
||||
['兴隆园医院','B超:胆囊息肉样病变','胆囊息肉','审核通过'],
|
||||
['兴隆园医院','B超:左肾囊肿','肾囊肿','审核通过'],
|
||||
['兴隆园医院','外科:前列腺增生','前列腺增生','未审核'],
|
||||
['兴隆园医院','妇科:B超示子宫肌瘤','子宫肌瘤','审核通过'],
|
||||
['兴隆园医院','空腹血糖增高(GLU:6.8mmol/L)','高血糖','未审核'],
|
||||
['泾河医院','体重偏高(BMI:26.40)','超重','审核通过'],
|
||||
['泾河医院','耳鼻喉科:外耳道耵聍栓塞','外耳道异物','未审核']
|
||||
];
|
||||
var state={desc:'',status:'',hospital:'',page:1,pageSize:10};
|
||||
|
||||
/* ============ 初始化下拉 ============ */
|
||||
function initHospitalOptions(){
|
||||
var sel=document.getElementById('f-hospital');
|
||||
hospitals.forEach(function(h){
|
||||
var opt=document.createElement('option');opt.value=h;opt.textContent=h;sel.appendChild(opt);
|
||||
});
|
||||
var audit=document.getElementById('auditDisease');
|
||||
diseaseDict.forEach(function(d){
|
||||
var opt=document.createElement('option');opt.value=d;opt.textContent=d;audit.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
/* ============ 查询/重置 ============ */
|
||||
function doQuery(){
|
||||
state.desc=document.getElementById('f-desc').value.trim();
|
||||
state.status=document.getElementById('f-status').value;
|
||||
state.hospital=document.getElementById('f-hospital').value;
|
||||
state.page=1;
|
||||
renderTable();
|
||||
}
|
||||
function doReset(){
|
||||
document.getElementById('f-desc').value='';
|
||||
var status=document.getElementById('f-status');
|
||||
status.value='';status.classList.add('placeholder');
|
||||
var hospital=document.getElementById('f-hospital');
|
||||
hospital.value='';hospital.classList.add('placeholder');
|
||||
state.desc='';state.status='';state.hospital='';
|
||||
state.page=1;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
/* ============ 表格渲染 ============ */
|
||||
function filteredRows(){
|
||||
var list=[];
|
||||
rows.forEach(function(r,i){
|
||||
if(state.desc&&r[1].indexOf(state.desc)===-1)return;
|
||||
if(state.status&&r[3]!==state.status)return;
|
||||
if(state.hospital&&r[0]!==state.hospital)return;
|
||||
list.push(i);
|
||||
});
|
||||
return list;
|
||||
}
|
||||
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 pageIdx=list.slice(start,start+state.pageSize);
|
||||
var tbody=document.getElementById('tbody');
|
||||
tbody.innerHTML=pageIdx.length?pageIdx.map(function(i){
|
||||
var r=rows[i];
|
||||
return '<tr>'
|
||||
+'<td><input type="checkbox" class="row-check" data-idx="'+i+'"></td>'
|
||||
+'<td>'+r[0]+'</td>'
|
||||
+'<td><span class="td-desc" title="'+r[1]+'">'+r[1]+'</span></td>'
|
||||
+'<td>'+(r[2]||'')+'</td>'
|
||||
+'<td>'+r[3]+'</td>'
|
||||
+'<td><span class="link" onclick="openAudit('+i+')">审核</span> <span class="link" style="margin-left:8px;" onclick="openDetail('+i+')">详情</span> <span class="link-danger" style="margin-left:8px;" onclick="deleteRow('+i+')">删除</span></td>'
|
||||
+'</tr>';
|
||||
}).join(''):'<tr><td colspan="6"><div class="empty-tip">暂无数据</div></td></tr>';
|
||||
var all=tbody.querySelectorAll('.row-check');
|
||||
var checked=tbody.querySelectorAll('.row-check:checked');
|
||||
document.getElementById('checkAll').checked=all.length>0&&all.length===checked.length;
|
||||
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 toggleCheckAll(cb){
|
||||
document.querySelectorAll('.row-check').forEach(function(c){c.checked=cb.checked;});
|
||||
}
|
||||
function checkedIdx(){
|
||||
var arr=[];
|
||||
document.querySelectorAll('.row-check:checked').forEach(function(c){arr.push(parseInt(c.dataset.idx,10));});
|
||||
return arr;
|
||||
}
|
||||
|
||||
/* ============ 审核 ============ */
|
||||
var auditingIdx=null;
|
||||
function openAudit(idx){
|
||||
auditingIdx=idx;
|
||||
var r=rows[idx];
|
||||
document.getElementById('auditHospital').textContent=r[0];
|
||||
document.getElementById('auditDesc').textContent=r[1];
|
||||
var result=document.querySelectorAll('input[name="auditResult"]');
|
||||
result.forEach(function(radio){radio.checked=(radio.value===r[3]);});
|
||||
var sel=document.getElementById('auditDisease');
|
||||
sel.value=r[2]||'';
|
||||
sel.classList.toggle('placeholder',!sel.value);
|
||||
document.getElementById('auditMask').classList.add('open');
|
||||
}
|
||||
function closeAudit(){
|
||||
auditingIdx=null;
|
||||
document.getElementById('auditMask').classList.remove('open');
|
||||
}
|
||||
function confirmAudit(){
|
||||
if(auditingIdx===null)return;
|
||||
var result='';
|
||||
document.querySelectorAll('input[name="auditResult"]').forEach(function(radio){if(radio.checked)result=radio.value;});
|
||||
if(!result){alert('请选择审核结果');return;}
|
||||
var disease=document.getElementById('auditDisease').value;
|
||||
rows[auditingIdx][2]=disease;
|
||||
rows[auditingIdx][3]=result;
|
||||
closeAudit();
|
||||
renderTable();
|
||||
}
|
||||
function batchAudit(){
|
||||
var idxs=checkedIdx();
|
||||
if(!idxs.length){alert('请先勾选要审核的记录');return;}
|
||||
if(!confirm('确认对选中的 '+idxs.length+' 条记录执行审核通过？'))return;
|
||||
idxs.forEach(function(i){rows[i][3]='审核通过';});
|
||||
renderTable();
|
||||
}
|
||||
|
||||
/* ============ 删除 ============ */
|
||||
function deleteRow(idx){
|
||||
if(!confirm('确认删除该条结论记录？'))return;
|
||||
rows.splice(idx,1);
|
||||
renderTable();
|
||||
}
|
||||
function batchDelete(){
|
||||
var idxs=checkedIdx();
|
||||
if(!idxs.length){alert('请先勾选要删除的记录');return;}
|
||||
if(!confirm('确认删除选中的 '+idxs.length+' 条记录？'))return;
|
||||
idxs.sort(function(a,b){return b-a;}).forEach(function(i){rows.splice(i,1);});
|
||||
renderTable();
|
||||
}
|
||||
|
||||
/* ============ 详情 ============ */
|
||||
function openDetail(idx){
|
||||
var r=rows[idx];
|
||||
document.getElementById('detailBody').innerHTML=
|
||||
'<table class="detail-table"><tbody>'
|
||||
+'<tr><th>医院名称</th><td>'+r[0]+'</td></tr>'
|
||||
+'<tr><th>结论描述</th><td class="detail-desc">'+r[1]+'</td></tr>'
|
||||
+'<tr><th>病种字典表</th><td>'+(r[2]||'-')+'</td></tr>'
|
||||
+'<tr><th>审核状态</th><td>'+r[3]+'</td></tr>'
|
||||
+'</tbody></table>';
|
||||
document.getElementById('detailMask').classList.add('open');
|
||||
}
|
||||
function closeDetail(){document.getElementById('detailMask').classList.remove('open');}
|
||||
document.addEventListener('keydown',function(e){
|
||||
if(e.key==='Escape'){closeAudit();closeDetail();}
|
||||
});
|
||||
|
||||
/* ============ 通用 ============ */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
initHospitalOptions();
|
||||
renderTable();
|
||||
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>
|
||||
@@ -111,7 +111,7 @@
|
||||
<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>
|
||||
@@ -121,8 +121,10 @@
|
||||
<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>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="post-gastro-stat.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>
|
||||
@@ -130,9 +132,21 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -0,0 +1,508 @@
|
||||
<!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;}
|
||||
/* 主内容 */
|
||||
.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:220px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-input::placeholder{color:var(--text-placeholder);}
|
||||
.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:220px;}
|
||||
.filter-select:focus{border-color:var(--primary);}
|
||||
.filter-select.placeholder{color:var(--text-placeholder);}
|
||||
.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);}
|
||||
/* 图标按钮（列设置） */
|
||||
.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:6px;display:inline-flex;align-items:center;transition:color .2s;}
|
||||
.icon-btn:hover{color:var(--primary);}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.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:center;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;text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 末列"操作"固定右侧 */
|
||||
#diseaseTable thead th:last-child{position:sticky;right:0;background:#FAFAFA;border-left:1px solid var(--border);}
|
||||
#diseaseTable tbody td:last-child{position:sticky;right:0;background:#fff;border-left:1px solid var(--border);}
|
||||
#diseaseTable tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}.link-danger:hover{color:#ff7875;}
|
||||
.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);}
|
||||
/* 弹窗 */
|
||||
.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;overflow-y:auto;}
|
||||
.modal-mask.open{display:flex;align-items:flex-start;justify-content:center;padding:60px 24px;}
|
||||
.modal{width:560px;max-width:100%;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:flex;flex-direction:column;max-height:calc(100vh - 120px);}
|
||||
.modal__header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__close{cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;transition:color .2s;}
|
||||
.modal__close:hover{color:var(--danger);}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__body{padding:20px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:16px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:6px;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::placeholder{color:var(--text-placeholder);}
|
||||
.form-select{width:100%;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;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-select.placeholder{color:var(--text-placeholder);}
|
||||
/* 详情 */
|
||||
.detail-table{width:100%;border-collapse:collapse;border:1px solid var(--border);}
|
||||
.detail-table th,.detail-table td{border-bottom:1px solid var(--border);text-align:left;padding:12px 16px;font-size:var(--font-sm);}
|
||||
.detail-table tr:last-child td{border-bottom:none;}
|
||||
.detail-table th{width:120px;background:#FAFAFA;color:var(--text-secondary);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">检前</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-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">签约医院人数统计</a>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="post-gastro-stat.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-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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 active">病种信息</a>
|
||||
<a href="post-conclusion-disease.html" class="sidebar-item">体检结论关联病种</a>
|
||||
<a href="post-auto-select-disease.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 placeholder" id="f-category" onchange="this.classList.toggle('placeholder',!this.value)">
|
||||
<option value="">请选择病种类别</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>病种名称：</label>
|
||||
<input class="filter-input" type="text" id="f-name" placeholder="请输入病种名称">
|
||||
</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;align-items:center;">
|
||||
<button class="btn btn-primary" onclick="openForm()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||||
新增
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="batchDelete()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 3.5h10M5.5 3.5V2h3v1.5M3.5 3.5l.7 8.5h5.6l.7-8.5" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
批量删除
|
||||
</button>
|
||||
<button class="icon-btn" title="列设置" style="margin-left:auto;">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="1.8" stroke="currentColor" stroke-width="1.2"/><path d="M8 1.8v1.7M8 12.5v1.7M1.8 8h1.7M12.5 8h1.7M3.6 3.6l1.2 1.2M9.2 9.2l1.2 1.2M12.4 3.6l-1.2 1.2M4.8 9.2l-1.2 1.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__content">
|
||||
<table id="diseaseTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:48px;"><input type="checkbox" id="checkAll" onclick="toggleCheckAll(this)"></th>
|
||||
<th>病种名称</th>
|
||||
<th>病种类别</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination" id="pagination"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<div class="modal-mask" id="formMask" onclick="if(event.target===this)closeForm()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__close" onclick="closeForm()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span class="modal__title" id="formTitle">新增病种</span>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 病种类别</div>
|
||||
<select class="form-select placeholder" id="formCategory" onchange="this.classList.toggle('placeholder',!this.value)">
|
||||
<option value="">请选择病种类别</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 病种名称</div>
|
||||
<input class="form-input" id="formName" type="text" placeholder="请输入病种名称">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeForm()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveForm()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<div class="modal-mask" id="detailMask" onclick="if(event.target===this)closeDetail()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__close" onclick="closeDetail()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span class="modal__title">病种详情</span>
|
||||
</div>
|
||||
<div class="modal__body" id="detailBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ============ 数据 ============ */
|
||||
var categories=['血液及动脉病种','内分泌及代谢病种','消化系统病种','泌尿系统病种','心血管病种','呼吸系统病种','五官科病种','妇科病种','其他病种'];
|
||||
/* 前 10 条与参考图一致 */
|
||||
var rows=[
|
||||
['高粘血','血液及动脉病种'],
|
||||
['高同型半胱氨酸','血液及动脉病种'],
|
||||
['高脂血','血液及动脉病种'],
|
||||
['高血压','血液及动脉病种'],
|
||||
['痛风(高尿酸)','血液及动脉病种'],
|
||||
['TCD异常脑供血不足','血液及动脉病种'],
|
||||
['颈动脉内膜增厚','血液及动脉病种'],
|
||||
['颈动脉粥样硬化','血液及动脉病种'],
|
||||
['主动脉硬化','血液及动脉病种'],
|
||||
['主动脉迂曲','血液及动脉病种'],
|
||||
['动脉斑块','血液及动脉病种'],
|
||||
['血黏度增高','血液及动脉病种'],
|
||||
['超重','内分泌及代谢病种'],
|
||||
['消瘦','内分泌及代谢病种'],
|
||||
['甲状腺结节','内分泌及代谢病种'],
|
||||
['高血糖','内分泌及代谢病种'],
|
||||
['脂肪肝','消化系统病种'],
|
||||
['胆囊息肉','消化系统病种'],
|
||||
['肝囊肿','消化系统病种'],
|
||||
['痔疮','消化系统病种'],
|
||||
['肾囊肿','泌尿系统病种'],
|
||||
['前列腺增生','泌尿系统病种'],
|
||||
['心电图异常','心血管病种'],
|
||||
['心律失常','心血管病种'],
|
||||
['肺部结节','呼吸系统病种'],
|
||||
['颈部淋巴结增大','其他病种'],
|
||||
['牙病','五官科病种'],
|
||||
['白内障','五官科病种'],
|
||||
['外耳道异物','五官科病种'],
|
||||
['子宫肌瘤','妇科病种'],
|
||||
['其它一','其他病种']
|
||||
];
|
||||
var state={category:'',name:'',page:1,pageSize:10};
|
||||
|
||||
/* ============ 初始化下拉 ============ */
|
||||
function initCategoryOptions(){
|
||||
['f-category','formCategory'].forEach(function(id){
|
||||
var sel=document.getElementById(id);
|
||||
categories.forEach(function(c){
|
||||
var opt=document.createElement('option');opt.value=c;opt.textContent=c;sel.appendChild(opt);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ============ 查询/重置 ============ */
|
||||
function doQuery(){
|
||||
state.category=document.getElementById('f-category').value;
|
||||
state.name=document.getElementById('f-name').value.trim();
|
||||
state.page=1;
|
||||
renderTable();
|
||||
}
|
||||
function doReset(){
|
||||
var sel=document.getElementById('f-category');
|
||||
sel.value='';sel.classList.add('placeholder');
|
||||
document.getElementById('f-name').value='';
|
||||
state.category='';state.name='';
|
||||
state.page=1;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
/* ============ 表格渲染 ============ */
|
||||
function filteredRows(){
|
||||
var list=[];
|
||||
rows.forEach(function(r,i){
|
||||
if(state.category&&r[1]!==state.category)return;
|
||||
if(state.name&&r[0].indexOf(state.name)===-1)return;
|
||||
list.push(i);
|
||||
});
|
||||
return list;
|
||||
}
|
||||
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 pageIdx=list.slice(start,start+state.pageSize);
|
||||
var tbody=document.getElementById('tbody');
|
||||
tbody.innerHTML=pageIdx.length?pageIdx.map(function(i){
|
||||
var r=rows[i];
|
||||
return '<tr>'
|
||||
+'<td><input type="checkbox" class="row-check" data-idx="'+i+'"></td>'
|
||||
+'<td>'+r[0]+'</td><td>'+r[1]+'</td>'
|
||||
+'<td><span class="link" onclick="openForm('+i+')">编辑</span> <span class="link" style="margin-left:8px;" onclick="openDetail('+i+')">详情</span> <span class="link-danger" style="margin-left:8px;" onclick="deleteRow('+i+')">删除</span></td>'
|
||||
+'</tr>';
|
||||
}).join(''):'<tr><td colspan="4"><div class="empty-tip">暂无数据</div></td></tr>';
|
||||
var all=tbody.querySelectorAll('.row-check');
|
||||
var checked=tbody.querySelectorAll('.row-check:checked');
|
||||
document.getElementById('checkAll').checked=all.length>0&&all.length===checked.length;
|
||||
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 toggleCheckAll(cb){
|
||||
document.querySelectorAll('.row-check').forEach(function(c){c.checked=cb.checked;});
|
||||
}
|
||||
function checkedIdx(){
|
||||
var arr=[];
|
||||
document.querySelectorAll('.row-check:checked').forEach(function(c){arr.push(parseInt(c.dataset.idx,10));});
|
||||
return arr;
|
||||
}
|
||||
|
||||
/* ============ 新增/编辑 ============ */
|
||||
var editingIdx=null;
|
||||
function openForm(idx){
|
||||
editingIdx=(typeof idx==='number')?idx:null;
|
||||
document.getElementById('formTitle').textContent=editingIdx===null?'新增病种':'编辑病种';
|
||||
var sel=document.getElementById('formCategory');
|
||||
var name=document.getElementById('formName');
|
||||
if(editingIdx===null){
|
||||
sel.value='';sel.classList.add('placeholder');
|
||||
name.value='';
|
||||
}else{
|
||||
sel.value=rows[editingIdx][1];sel.classList.remove('placeholder');
|
||||
name.value=rows[editingIdx][0];
|
||||
}
|
||||
document.getElementById('formMask').classList.add('open');
|
||||
}
|
||||
function closeForm(){document.getElementById('formMask').classList.remove('open');}
|
||||
function saveForm(){
|
||||
var category=document.getElementById('formCategory').value;
|
||||
var name=document.getElementById('formName').value.trim();
|
||||
if(!category){alert('请选择病种类别');return;}
|
||||
if(!name){alert('请输入病种名称');return;}
|
||||
var dup=rows.some(function(r,i){return r[0]===name&&r[1]===category&&i!==editingIdx;});
|
||||
if(dup){alert('该病种名称在当前类别下已存在');return;}
|
||||
if(editingIdx===null){
|
||||
rows.push([name,category]);
|
||||
var list=filteredRows();
|
||||
state.page=Math.max(1,Math.ceil((list.length)/state.pageSize));
|
||||
}else{
|
||||
rows[editingIdx]=[name,category];
|
||||
}
|
||||
closeForm();
|
||||
renderTable();
|
||||
}
|
||||
|
||||
/* ============ 删除 ============ */
|
||||
function deleteRow(idx){
|
||||
if(!confirm('确认删除病种「'+rows[idx][0]+'」？'))return;
|
||||
rows.splice(idx,1);
|
||||
renderTable();
|
||||
}
|
||||
function batchDelete(){
|
||||
var idxs=checkedIdx();
|
||||
if(!idxs.length){alert('请先勾选要删除的病种');return;}
|
||||
if(!confirm('确认删除选中的 '+idxs.length+' 个病种？'))return;
|
||||
idxs.sort(function(a,b){return b-a;}).forEach(function(i){rows.splice(i,1);});
|
||||
renderTable();
|
||||
}
|
||||
|
||||
/* ============ 详情 ============ */
|
||||
function openDetail(idx){
|
||||
var r=rows[idx];
|
||||
document.getElementById('detailBody').innerHTML=
|
||||
'<table class="detail-table"><tbody>'
|
||||
+'<tr><th>病种名称</th><td>'+r[0]+'</td></tr>'
|
||||
+'<tr><th>病种类别</th><td>'+r[1]+'</td></tr>'
|
||||
+'</tbody></table>';
|
||||
document.getElementById('detailMask').classList.add('open');
|
||||
}
|
||||
function closeDetail(){document.getElementById('detailMask').classList.remove('open');}
|
||||
document.addEventListener('keydown',function(e){
|
||||
if(e.key==='Escape'){closeForm();closeDetail();}
|
||||
});
|
||||
|
||||
/* ============ 通用 ============ */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
initCategoryOptions();
|
||||
renderTable();
|
||||
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>
|
||||
@@ -111,7 +111,7 @@
|
||||
<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>
|
||||
@@ -121,8 +121,10 @@
|
||||
<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>
|
||||
<a href="post-gastro-stat.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>
|
||||
@@ -130,9 +132,21 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -0,0 +1,388 @@
|
||||
<!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;}
|
||||
/* 主内容 */
|
||||
.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-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">签约医院人数统计</a>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="post-gastro-stat.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-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<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 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 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">胃肠镜体检统计</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');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -111,7 +111,7 @@
|
||||
<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>
|
||||
@@ -121,8 +121,10 @@
|
||||
<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>
|
||||
<a href="post-gastro-stat.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>
|
||||
@@ -130,9 +132,21 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -111,7 +111,7 @@
|
||||
<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>
|
||||
@@ -121,8 +121,10 @@
|
||||
<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>
|
||||
<a href="post-gastro-stat.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>
|
||||
@@ -130,9 +132,21 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -0,0 +1,479 @@
|
||||
<!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;}
|
||||
/* 主内容 */
|
||||
.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:280px;}
|
||||
.filter-select:focus{border-color:var(--primary);}
|
||||
.filter-select.placeholder{color:var(--text-placeholder);}
|
||||
.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);}
|
||||
/* 图标按钮（列设置） */
|
||||
.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:6px;display:inline-flex;align-items:center;transition:color .2s;}
|
||||
.icon-btn:hover{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 input::placeholder{color:var(--text-placeholder);}
|
||||
.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__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:center;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;text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 末列"重点指标统计"固定右侧 */
|
||||
#statTable thead th:last-child{position:sticky;right:0;background:#FAFAFA;border-left:1px solid var(--border);}
|
||||
#statTable tbody td:last-child{position:sticky;right:0;background:#fff;border-left:1px solid var(--border);}
|
||||
#statTable tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
/* 详情弹窗 */
|
||||
.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;overflow-y:auto;}
|
||||
.modal-mask.open{display:flex;align-items:flex-start;justify-content:center;padding:60px 24px;}
|
||||
.modal{width:640px;max-width:100%;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:flex;flex-direction:column;max-height:calc(100vh - 120px);}
|
||||
.modal__header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__close{cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;transition:color .2s;}
|
||||
.modal__close:hover{color:var(--danger);}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__body{padding:20px;overflow-y:auto;}
|
||||
.detail-table{width:100%;border-collapse:collapse;margin-bottom:20px;border:1px solid var(--border);}
|
||||
.detail-table:last-child{margin-bottom:0;}
|
||||
.detail-table th,.detail-table td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);text-align:center;padding:12px 8px;font-size:var(--font-sm);}
|
||||
.detail-table th:last-child,.detail-table td:last-child{border-right:none;}
|
||||
.detail-table tr:last-child td{border-bottom:none;}
|
||||
.detail-table .cat-row th{background:#FAFAFA;font-weight:600;color:var(--text-primary);padding:14px 8px;}
|
||||
.detail-table thead th{background:#fff;font-weight:400;color:var(--text-primary);}
|
||||
.detail-table td:nth-child(2){color:var(--success);}
|
||||
.detail-table td:nth-child(3){color:var(--danger);}
|
||||
</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-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">签约医院人数统计</a>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item active">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="post-gastro-stat.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-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<div class="year-picker">
|
||||
<input type="text" id="yearInput" value="" placeholder="请选择年份" 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select placeholder" id="f-unit" onchange="onUnitChange()">
|
||||
<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;align-items:center;">
|
||||
<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"><path d="M2 10v2h10v-2" stroke="#fff" stroke-width="1.4" stroke-linecap="round"/><path d="M4 8.5V6M7 8.5V3.5M10 8.5V5" stroke="#fff" stroke-width="1.4" stroke-linecap="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>
|
||||
<button class="icon-btn" title="列设置" style="margin-left:auto;">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" stroke="currentColor" stroke-width="1.3"/><path d="M13.2 8c0-.4.5-.8.5-1.2 0-.4-.6-.7-.7-1.1-.1-.4.2-1-.1-1.3-.3-.3-.9 0-1.3-.1-.4-.1-.7-.7-1.1-.7-.4 0-.8.5-1.2.5h-.6c-.4 0-.8-.5-1.2-.5-.4 0-.7.6-1.1.7-.4.1-1-.2-1.3.1-.3.3 0 .9-.1 1.3-.1.4-.7.7-.7 1.1 0 .4.5.8.5 1.2s-.5.8-.5 1.2c0 .4.6.7.7 1.1.1.4-.2 1 .1 1.3.3.3.9 0 1.3.1.4.1.7.7 1.1.7.4 0 .8-.5 1.2-.5h.6c.4 0 .8.5 1.2.5.4 0 .7-.6 1.1-.7.4-.1 1 .2 1.3-.1.3-.3 0-.9.1-1.3.1-.4.7-.7.7-1.1 0-.4-.5-.8-.5-1.2z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round" opacity="0"/><path d="M2.5 8c0-1.1-.3-1.7.4-2.4.7-.7 1.3-.4 2.4-.4s1.7.3 2.4-.4h.6c.7.7 1.3.4 2.4.4s1.7.3 2.4.4c.7.7.4 1.3.4 2.4s.3 1.7-.4 2.4c-.7.7-1.3.4-2.4.4s-1.7.3-2.4.4h-.6c-.7-.7-1.3-.4-2.4-.4s-1.7.3-2.4-.4C2.2 9.7 2.5 9.1 2.5 8z" stroke="currentColor" stroke-width="1.2" opacity="0"/><circle cx="8" cy="8" r="1.8" stroke="currentColor" stroke-width="1.2"/><path d="M8 1.8v1.7M8 12.5v1.7M1.8 8h1.7M12.5 8h1.7M3.6 3.6l1.2 1.2M9.2 9.2l1.2 1.2M12.4 3.6l-1.2 1.2M4.8 9.2l-1.2 1.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__content">
|
||||
<table id="statTable">
|
||||
<thead>
|
||||
<tr><th>单位</th><th>年份</th><th>体检人数</th><th>异常人数</th><th>重点指标统计</th></tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination" id="pagination"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<div class="modal-mask" id="modalMask" onclick="if(event.target===this)closeModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__close" onclick="closeModal()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span class="modal__title">详情</span>
|
||||
</div>
|
||||
<div class="modal__body" id="modalBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ============ 数据 ============ */
|
||||
/* 确定性伪随机（0-1），保证每次打开数据一致 */
|
||||
function pseudo(i){var x=Math.sin(i*127.1)*43758.5453;return x-Math.floor(x);}
|
||||
/* 前10条与参考图一致 */
|
||||
var rows=[
|
||||
['质量安全环保技术监督中心','2022',497],
|
||||
['质量安全环保技术监督中心','2023',137],
|
||||
['质量安全环保技术监督中心','2024',521],
|
||||
['质量安全环保技术监督中心','2025',524],
|
||||
['伴生气综合利用项目部','2022',197],
|
||||
['伴生气综合利用项目部','2023',25],
|
||||
['伴生气综合利用项目部','2024',204],
|
||||
['伴生气综合利用项目部','2025',207],
|
||||
['第八采油厂','2022',2084],
|
||||
['第八采油厂','2023',270]
|
||||
];
|
||||
[['第八采油厂','2024'],['第八采油厂','2025']].forEach(function(u){
|
||||
rows.push([u[0],u[1],1800+Math.floor(pseudo(rows.length+11)*400)]);
|
||||
});
|
||||
[['第九采油厂'],['第十一采油厂'],['采气一厂'],['水电厂'],['公用事业公司'],['运输公司']].forEach(function(u,ui){
|
||||
['2022','2023','2024','2025'].forEach(function(y){
|
||||
rows.push([u[0],y,80+Math.floor(pseudo(50+ui*4+rows.length)*1720)]);
|
||||
});
|
||||
});
|
||||
/* 每个单位补充当前年份一行，保证默认筛选下有数据 */
|
||||
var CURRENT_YEAR=new Date().getFullYear();
|
||||
var unitsOrder=[];
|
||||
rows.forEach(function(r){if(unitsOrder.indexOf(r[0])<0)unitsOrder.push(r[0]);});
|
||||
unitsOrder.forEach(function(u,ui){
|
||||
var lastIdx=0;
|
||||
rows.forEach(function(r,i){if(r[0]===u)lastIdx=i;});
|
||||
rows.splice(lastIdx+1,0,[u,String(CURRENT_YEAR),100+Math.floor(pseudo(900+ui*7)*1400)]);
|
||||
});
|
||||
/* 补充异常人数（至少一项重点指标异常的人数，确定性生成） */
|
||||
rows.forEach(function(r,i){
|
||||
r.push(Math.max(1,Math.round(r[2]*(0.05+pseudo(i*3.7+0.23)*0.35))));
|
||||
});
|
||||
var state={unit:'',year:String(CURRENT_YEAR),page:1,pageSize:10};
|
||||
|
||||
/* ============ 详情数据 ============ */
|
||||
var DETAIL_CATS=[
|
||||
{name:'超声',items:['前列腺彩超','胰腺','膀胱','输尿管']},
|
||||
{name:'血脂',items:['高密度脂蛋白','总胆固醇','甘油三酯','低密度脂蛋白']},
|
||||
{name:'CT',items:['颈椎CT','胸部CT','腰椎CT']}
|
||||
];
|
||||
/* 首行详情与参考图一致（展开为 11 个项目的 正常/异常） */
|
||||
var EXACT_DETAIL=[[16,0],[22,0],[22,0],[17,0],[318,176],[422,72],[249,245],[353,141],[132,0],[257,0],[78,0]];
|
||||
function buildDetail(row,idx){
|
||||
var res=[],k=0;
|
||||
DETAIL_CATS.forEach(function(cat,ci){
|
||||
cat.items.forEach(function(item,ii){
|
||||
if(idx===0){
|
||||
res.push({cat:cat.name,item:item,normal:EXACT_DETAIL[k][0],abnormal:EXACT_DETAIL[k][1]});
|
||||
}else{
|
||||
var seed=idx*13.7+ci*3.1+ii*1.7;
|
||||
var examined=Math.round(row[2]*(0.2+pseudo(seed)*0.55));
|
||||
var abn=Math.round(examined*pseudo(seed+0.37)*0.45);
|
||||
res.push({cat:cat.name,item:item,normal:examined-abn,abnormal:abn});
|
||||
}
|
||||
k++;
|
||||
});
|
||||
});
|
||||
return res;
|
||||
}
|
||||
|
||||
/* ============ 筛选 ============ */
|
||||
function initUnitOptions(){
|
||||
var units=[];
|
||||
rows.forEach(function(r){if(units.indexOf(r[0])<0)units.push(r[0]);});
|
||||
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 initYearOptions(){
|
||||
var html='';
|
||||
for(var i=0;i<5;i++){
|
||||
var y=String(CURRENT_YEAR-i);
|
||||
html+='<div'+(y===state.year?' class="selected"':'')+' onclick="pickYear(\''+y+'\')">'+y+'</div>';
|
||||
}
|
||||
document.getElementById('yearPop').innerHTML=html;
|
||||
document.getElementById('yearInput').value=state.year;
|
||||
}
|
||||
function onUnitChange(){
|
||||
var sel=document.getElementById('f-unit');
|
||||
sel.classList.toggle('placeholder',!sel.value);
|
||||
state.page=1;
|
||||
}
|
||||
function doQuery(){
|
||||
state.unit=document.getElementById('f-unit').value;
|
||||
state.page=1;
|
||||
renderTable();
|
||||
}
|
||||
function doReset(){
|
||||
var sel=document.getElementById('f-unit');
|
||||
sel.value='';sel.classList.add('placeholder');
|
||||
state.unit='';
|
||||
pickYear(String(CURRENT_YEAR));
|
||||
}
|
||||
|
||||
/* ============ 年份选择 ============ */
|
||||
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(){
|
||||
var list=[];
|
||||
rows.forEach(function(r,i){
|
||||
if((!state.unit||r[0]===state.unit)&&(!state.year||r[1]===state.year))list.push(i);
|
||||
});
|
||||
return list;
|
||||
}
|
||||
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 pageIdx=list.slice(start,start+state.pageSize);
|
||||
var tbody=document.querySelector('#statTable tbody');
|
||||
tbody.innerHTML=pageIdx.length?pageIdx.map(function(i){
|
||||
var r=rows[i];
|
||||
return '<tr><td>'+r[0]+'</td><td>'+r[1]+'</td><td>'+r[2]+'</td><td>'+r[3]+'</td>'
|
||||
+'<td><span class="link" onclick="openDetail('+i+')">详情</span></td></tr>';
|
||||
}).join(''):'<tr><td colspan="5" 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 openDetail(idx){
|
||||
var detail=buildDetail(rows[idx],idx);
|
||||
var html='';
|
||||
DETAIL_CATS.forEach(function(cat){
|
||||
html+='<table class="detail-table"><tbody>';
|
||||
html+='<tr class="cat-row"><th colspan="3">'+cat.name+'</th></tr>';
|
||||
html+='<tr><th style="width:40%;">项目名称</th><th style="width:30%;">正常</th><th style="width:30%;">异常</th></tr>';
|
||||
detail.filter(function(d){return d.cat===cat.name;}).forEach(function(d){
|
||||
html+='<tr><td>'+d.item+'</td><td>'+d.normal+'</td><td>'+d.abnormal+'</td></tr>';
|
||||
});
|
||||
html+='</tbody></table>';
|
||||
});
|
||||
document.getElementById('modalBody').innerHTML=html;
|
||||
document.getElementById('modalMask').classList.add('open');
|
||||
}
|
||||
function closeModal(){
|
||||
document.getElementById('modalMask').classList.remove('open');
|
||||
}
|
||||
document.addEventListener('keydown',function(e){
|
||||
if(e.key==='Escape')closeModal();
|
||||
});
|
||||
|
||||
/* ============ 通用 ============ */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
initUnitOptions();
|
||||
initYearOptions();
|
||||
renderTable();
|
||||
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>
|
||||
@@ -132,7 +132,7 @@
|
||||
<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>
|
||||
@@ -142,8 +142,10 @@
|
||||
<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>
|
||||
<a href="post-gastro-stat.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>
|
||||
@@ -151,9 +153,21 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item active">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -0,0 +1,658 @@
|
||||
<!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;}
|
||||
/* 主内容 */
|
||||
.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);}
|
||||
/* 报告缩略图 */
|
||||
.report-thumb{width:96px;height:58px;border:1px solid #EFEFEF;border-radius:4px;background:#fff;cursor:zoom-in;padding:7px 9px;display:inline-flex;flex-direction:column;justify-content:space-between;vertical-align:middle;}
|
||||
.report-thumb:hover{border-color:var(--primary);box-shadow:var(--shadow-sm);}
|
||||
.report-thumb__imgs{display:flex;gap:5px;}
|
||||
.report-thumb__imgs i{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#F3B07C,#B45A28);}
|
||||
.report-thumb__imgs i:nth-child(2){background:radial-gradient(circle at 40% 35%,#E89A5F,#9C4E1F);}
|
||||
.report-thumb__imgs i:nth-child(3){background:radial-gradient(circle at 32% 38%,#EFAF74,#A65822);}
|
||||
.report-thumb__imgs i:nth-child(4){background:radial-gradient(circle at 38% 30%,#F0A868,#8F4A1D);}
|
||||
.report-thumb__lines i{display:block;height:3px;border-radius:2px;background:#E4E4E4;}
|
||||
.report-thumb__lines i+i{margin-top:4px;}
|
||||
.report-thumb--empty{background:#DBDBDB;border-color:#DBDBDB;align-items:center;justify-content:center;}
|
||||
.report-thumb--empty:hover{border-color:#BFBFBF;box-shadow:none;}
|
||||
/* 分页 */
|
||||
.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;}
|
||||
/* 弹窗区块 */
|
||||
.report-section{margin-bottom:24px;}
|
||||
.report-section:last-child{margin-bottom:0;}
|
||||
.report-section__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:12px;line-height:1.4;}
|
||||
.info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 24px;}
|
||||
.info-grid .info-label{font-size:var(--font-sm);color:var(--text-placeholder);}
|
||||
.info-grid .info-value{font-size:var(--font-sm);color:var(--text-primary);margin-top:4px;}
|
||||
/* 详情弹窗 */
|
||||
.dform{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;}
|
||||
.dform__item{display:flex;align-items:flex-start;}
|
||||
.dform__label{width:104px;flex:none;text-align:right;padding-right:8px;font-size:var(--font-sm);color:var(--text-primary);line-height:34px;white-space:nowrap;}
|
||||
.dform__label .req{color:#FF4D4F;margin-right:2px;}
|
||||
.dform__box{flex:1;min-width:0;}
|
||||
.dbox{height:34px;border:1px solid #DCDFE6;border-radius:var(--radius-sm);background:#F5F7FA;padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);display:flex;align-items:center;justify-content:space-between;gap:8px;}
|
||||
.dbox svg{flex:none;color:#A8ABB2;}
|
||||
.dbox--year{max-width:220px;}
|
||||
.dpick{width:112px;height:122px;border:1px solid #EFEFEF;border-radius:4px;background:#fff;padding:10px;display:flex;flex-direction:column;justify-content:space-between;}
|
||||
.dpick__imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
|
||||
.dpick__imgs i{width:100%;aspect-ratio:1/1;border-radius:2px;background:radial-gradient(circle at 35% 32%,#F3B07C,#B45A28);}
|
||||
.dpick__imgs i:nth-child(2n){background:radial-gradient(circle at 40% 35%,#E89A5F,#9C4E1F);}
|
||||
.dpick__lines i{display:block;height:3px;border-radius:2px;background:#E4E4E4;}
|
||||
.dpick__lines i+i{margin-top:4px;}
|
||||
.dpick--empty{border:1px dashed #D9D9D9;align-items:center;justify-content:center;font-size:var(--font-sm);color:var(--text-placeholder);}
|
||||
.dtabs{display:flex;border-bottom:1px solid #E8E8E8;margin-top:28px;}
|
||||
.dtabs__item{padding:0 4px 10px;margin-right:40px;font-size:var(--font-base);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
|
||||
.dtabs__item.active{color:var(--primary);font-weight:600;border-bottom-color:var(--primary);}
|
||||
.dtab-pane{display:none;padding-top:4px;}
|
||||
.dtab-pane.active{display:block;}
|
||||
.dtab-pane td.res{max-width:460px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.dempty{padding:48px 0;text-align:center;font-size:var(--font-sm);color:var(--text-placeholder);}
|
||||
/* 报告大图 */
|
||||
.report-large{width:380px;height:230px;border:1px solid var(--border);border-radius:4px;background:#fff;padding:16px 20px;}
|
||||
.report-large__imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
|
||||
.report-large__imgs i{width:100%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 35% 32%,#F3B07C,#B45A28);}
|
||||
.report-large__imgs i:nth-child(2n){background:radial-gradient(circle at 40% 35%,#E89A5F,#9C4E1F);}
|
||||
.report-large__lines{margin-top:14px;}
|
||||
.report-large__lines i{display:block;height:5px;border-radius:3px;background:#EAEAEA;}
|
||||
.report-large__lines i+i{margin-top:8px;}
|
||||
/* 编辑上传 */
|
||||
.upload-row{display:flex;gap:16px;align-items:flex-start;}
|
||||
.upload-box{width:380px;height:230px;border:1px dashed #D9D9D9;border-radius:4px;background:#FAFAFA;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-placeholder);font-size:var(--font-sm);cursor:pointer;transition:all .2s;}
|
||||
.upload-box:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.upload-box--filled{border-style:solid;background:#fff;cursor:default;padding:12px 14px;}
|
||||
.upload-box--filled .report-large{cursor:zoom-in;}
|
||||
.upload-box__ops{display:flex;gap:12px;}
|
||||
/* 轻提示 */
|
||||
.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-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">签约医院人数统计</a>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="post-gastro-stat.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-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item active">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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>
|
||||
</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>
|
||||
<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-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-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">胃肠镜体检报告</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="modal-overlay" id="edit-modal" onclick="if(event.target===this)closeModal('edit-modal')">
|
||||
<div class="modal modal--wide">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="edit-title">编辑报告</div>
|
||||
<button class="modal__close" onclick="closeModal('edit-modal')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" id="edit-body"></div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('edit-modal')">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveEdit()">保存</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,colon:true,createTime:'2026-08-18'},
|
||||
{name:'吴大康',unit:'公司机关',dept:'发展计划部',empNo:'80206154',idCard:'610602196912283215',gender:'男',age:57,hospital:'唐都医院',checkDate:'2026-08-14',year:'2026',gastro:false,colon:false,createTime:'2026-08-18'},
|
||||
{name:'刘永红',unit:'公司机关',dept:'纪检审计中心',empNo:'80226406',idCard:'622821196808160411',gender:'男',age:58,hospital:'唐都医院',checkDate:'2026-08-07',year:'2026',gastro:true,colon:true,createTime:'2026-08-18'},
|
||||
{name:'罗尚贤',unit:'公司机关',dept:'党委宣传部',empNo:'50157518',idCard:'452730198410145017',gender:'男',age:42,hospital:'唐都医院',checkDate:'2026-08-06',year:'2026',gastro:true,colon:true,createTime:'2026-08-18'},
|
||||
{name:'黄昊',unit:'公司机关',dept:'发展计划部',empNo:'00014289',idCard:'510723196912261597',gender:'男',age:57,hospital:'唐都医院',checkDate:'2026-07-31',year:'2026',gastro:true,colon:true,createTime:'2026-08-18'},
|
||||
{name:'胡垚',unit:'公司机关',dept:'基建工程部',empNo:'00019435',idCard:'610422198211100010',gender:'男',age:44,hospital:'唐都医院',checkDate:'2026-07-30',year:'2026',gastro:false,colon:false,createTime:'2026-08-18'},
|
||||
{name:'李莉',unit:'公共事务中心',dept:'长庆宾馆（会议室）',empNo:'80224641',idCard:'612628197104150027',gender:'女',age:55,hospital:'唐都医院',checkDate:'2026-07-28',year:'2026',gastro:true,colon: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:'gastro',label:'胃镜报告',hideable:true,type:'thumb'},
|
||||
{key:'colon',label:'肠镜报告',hideable:true,type:'thumb'},
|
||||
{key:'createTime',label:'创建时间',hideable:true},
|
||||
{key:'year',label:'体检年份',hideable:true},
|
||||
{key:'op',label:'操作',fixed:true}
|
||||
];
|
||||
var filter={name:'',empNo:'',idCard:'',unitDept:'',hospital:'',year:'2026'};
|
||||
var editIdx=-1,editDraft=null;
|
||||
|
||||
/* ============ 表格渲染 ============ */
|
||||
function visibleCols(){return cols.filter(function(c){return c.fixed||!c.hidden;});}
|
||||
function thumbHtml(has,idx,key,label){
|
||||
if(has)return '<div class="report-thumb" title="点击查看大图" onclick="openDetail('+idx+')">'
|
||||
+'<div class="report-thumb__imgs"><i></i><i></i><i></i><i></i></div>'
|
||||
+'<div class="report-thumb__lines"><i style="width:92%"></i><i style="width:70%"></i><i style="width:82%"></i><i style="width:55%"></i></div></div>';
|
||||
return '<div class="report-thumb report-thumb--empty" title="暂无'+label+'图片，点击编辑上传" onclick="openEdit('+idx+')">'
|
||||
+'<svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="2.5" y="4.5" width="17" height="13" rx="1.5" stroke="#9E9E9E" stroke-width="1.4"/><circle cx="7.5" cy="9" r="1.5" fill="#9E9E9E"/><path d="M2.5 14.5l4.5-3.5 3 2.5 4-3.5 5.5 4.5" stroke="#9E9E9E" stroke-width="1.4" stroke-linejoin="round"/><path d="M13 4.5l2 3M15.5 3l1.5 2.5" stroke="#9E9E9E" stroke-width="1.4" stroke-linecap="round"/></svg></div>';
|
||||
}
|
||||
function cellHtml(c,r,idx){
|
||||
if(c.type==='thumb')return thumbHtml(r[c.key],idx,c.key,c.label);
|
||||
if(c.key==='op')return '<span class="link" onclick="openEdit('+idx+')">编辑</span><span class="link" style="margin-left:14px;" onclick="openDetail('+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 detailItems(r){
|
||||
var items=[];
|
||||
if(r.gastro){
|
||||
items.push({cat:'胃镜',no:'EM01.01',name:'食管',res:'食管：粘膜光滑、通畅，扩张良好，齿状线清晰，未见糜烂及肿物。'});
|
||||
items.push({cat:'胃镜',no:'EM01.02',name:'胃',res:'贲门：粘膜光滑、开闭自如。胃底：粘膜光滑，皱襞排列整齐。胃体：粘膜光滑，未见溃疡及占位。'});
|
||||
}
|
||||
if(r.colon){
|
||||
items.push({cat:'肠镜',no:'EM02.01',name:'回盲部',res:'回盲瓣呈唇形，阑尾开口清晰，末段回肠粘膜未见异常。'});
|
||||
items.push({cat:'肠镜',no:'EM02.02',name:'结肠',res:'升结肠、横结肠、降结肠及乙状结肠粘膜光滑，血管纹理清晰，未见息肉及肿物。'});
|
||||
}
|
||||
return items;
|
||||
}
|
||||
function openDetail(idx){
|
||||
var r=rows[idx];
|
||||
document.getElementById('detail-title').textContent=r.name+' · 胃肠镜报告详情';
|
||||
var caret='<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 4.5L6 7.5 9 4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
var cal='<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>';
|
||||
var box=function(v,extra,cls){return '<div class="dbox'+(cls?' '+cls:'')+'"><span>'+v+'</span>'+(extra||'')+'</div>';};
|
||||
var pick=function(has){
|
||||
if(!has)return '<div class="dpick dpick--empty">暂无图片</div>';
|
||||
return '<div class="dpick"><div class="dpick__imgs"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>'
|
||||
+'<div class="dpick__lines"><i style="width:94%"></i><i style="width:82%"></i><i style="width:60%"></i></div></div>';
|
||||
};
|
||||
var item=function(label,html,req){return '<div class="dform__item"><div class="dform__label">'+(req?'<span class="req">*</span>':'')+label+'：</div><div class="dform__box">'+html+'</div></div>';};
|
||||
var its=detailItems(r);
|
||||
var tabRows=its.length?its.map(function(t,i){
|
||||
return '<tr><td>'+(i+1)+'</td><td>'+t.cat+'</td><td>'+t.no+'</td><td>'+t.name+'</td><td class="res" title="'+t.res+'">'+t.res+'</td></tr>';
|
||||
}).join(''):'<tr><td colspan="5" style="padding:0;border-bottom:none;"><div class="dempty">暂无数据</div></td></tr>';
|
||||
var checkTable=function(data){
|
||||
var bodyRows=data.length?data.map(function(d,i){
|
||||
return '<tr><td>'+(i+1)+'</td><td>'+d.no+'</td><td>'+d.name+'</td><td>'+d.res+'</td></tr>';
|
||||
}).join(''):'<tr><td colspan="4" style="padding:0;border-bottom:none;"><div class="dempty">暂无数据</div></td></tr>';
|
||||
return '<table style="table-layout:fixed;"><thead><tr><th style="width:56px;">#</th><th style="width:220px;">项目编号</th><th>项目名称</th><th style="width:220px;">结果</th></tr></thead><tbody>'+bodyRows+'</tbody></table>';
|
||||
};
|
||||
var diseases=r.gastro?[
|
||||
{no:'SE02.02',name:'糜烂性胃炎',res:'1'},
|
||||
{no:'SE02.05',name:'黏膜萎缩',res:'1'}
|
||||
]:[];
|
||||
var handles=r.gastro?[
|
||||
{no:'PE01.01',name:'病理取材',res:'1'},
|
||||
{no:'PE01.02',name:'建议复查',res:'1'}
|
||||
]:[];
|
||||
var lesions=r.gastro?[
|
||||
{no:'LE01.01',name:'胃黏膜糜烂',res:'1'},
|
||||
{no:'LE01.02',name:'胃黏膜萎缩',res:'1'}
|
||||
]:[];
|
||||
document.getElementById('detail-body').innerHTML=
|
||||
'<div class="dform">'
|
||||
+item('姓名',box(r.name))
|
||||
+item('身份证号',box(r.idCard))
|
||||
+item('单位',box(r.unit,caret))
|
||||
+item('部门',box(r.dept,caret))
|
||||
+item('承检医院',box(r.hospital))
|
||||
+item('体检年份',box(r.year,cal,'dbox--year'))
|
||||
+item('胃镜报告图片',pick(r.gastro),true)
|
||||
+item('肠镜报告图片',pick(r.colon),true)
|
||||
+item('活检报告图片',pick(false))
|
||||
+'</div>'
|
||||
+'<div class="dtabs">'
|
||||
+'<div class="dtabs__item active" data-tab="items" onclick="switchDetailTab(\'items\')">体检项目</div>'
|
||||
+'<div class="dtabs__item" data-tab="disease" onclick="switchDetailTab(\'disease\')">病种勾选</div>'
|
||||
+'<div class="dtabs__item" data-tab="handle" onclick="switchDetailTab(\'handle\')">体检处理情况</div>'
|
||||
+'<div class="dtabs__item" data-tab="lesion" onclick="switchDetailTab(\'lesion\')">病变情况</div>'
|
||||
+'</div>'
|
||||
+'<div class="dtab-pane active" data-tab="items"><table style="table-layout:fixed;"><thead><tr><th style="width:56px;">#</th><th style="width:120px;">检查类别</th><th style="width:130px;">项目编号</th><th style="width:160px;">项目名称</th><th>结果</th></tr></thead><tbody>'+tabRows+'</tbody></table></div>'
|
||||
+'<div class="dtab-pane" data-tab="disease">'+checkTable(diseases)+'</div>'
|
||||
+'<div class="dtab-pane" data-tab="handle">'+checkTable(handles)+'</div>'
|
||||
+'<div class="dtab-pane" data-tab="lesion">'+checkTable(lesions)+'</div>';
|
||||
document.getElementById('detail-modal').classList.add('open');
|
||||
}
|
||||
function switchDetailTab(key){
|
||||
var tabs=document.querySelectorAll('#detail-modal .dtabs__item');
|
||||
for(var i=0;i<tabs.length;i++)tabs[i].classList.toggle('active',tabs[i].getAttribute('data-tab')===key);
|
||||
var panes=document.querySelectorAll('#detail-modal .dtab-pane');
|
||||
for(var j=0;j<panes.length;j++)panes[j].classList.toggle('active',panes[j].getAttribute('data-tab')===key);
|
||||
}
|
||||
/* ============ 编辑弹窗 ============ */
|
||||
function infoGridHtml(r){
|
||||
var items=[['姓名',r.name],['性别',r.gender],['年龄',r.age],['员工编号',r.empNo],['身份证号',r.idCard],['单位',r.unit],['部门',r.dept],['体检医院',r.hospital],['检查日期',r.checkDate],['体检年份',r.year],['创建时间',r.createTime]];
|
||||
return '<div class="info-grid">'+items.map(function(it){
|
||||
return '<div><div class="info-label">'+it[0]+'</div><div class="info-value">'+it[1]+'</div></div>';
|
||||
}).join('')+'</div>';
|
||||
}
|
||||
function uploadBoxHtml(has,label,field){
|
||||
var inner=has
|
||||
?'<div class="upload-box upload-box--filled"><div class="report-large" style="width:100%;height:100%;padding:12px 16px;">'
|
||||
+'<div class="report-large__imgs" style="gap:8px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>'
|
||||
+'<div class="report-large__lines" style="margin-top:12px;"><i style="width:96%"></i><i style="width:84%"></i><i style="width:60%"></i></div></div></div>'
|
||||
:'<div class="upload-box" onclick="fakeUpload(\''+field+'\')"><svg width="34" height="34" viewBox="0 0 34 34" fill="none"><path d="M17 22V8M11.5 13L17 7.5 22.5 13" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 22v3.5A2.5 2.5 0 0 0 8.5 28h17a2.5 2.5 0 0 0 2.5-2.5V22" stroke="#999" stroke-width="2" stroke-linecap="round"/></svg>点击上传'+label+'图片</div>';
|
||||
var ops='<div class="upload-box__ops">'+(has
|
||||
?'<span class="link" onclick="fakeUpload(\''+field+'\')">重新上传</span><span class="link" style="color:#FF4D4F;" onclick="removeUpload(\''+field+'\')">删除</span>'
|
||||
:'<span class="link" onclick="fakeUpload(\''+field+'\')">上传图片</span>')+'</div>';
|
||||
return inner+ops;
|
||||
}
|
||||
function openEdit(idx){
|
||||
editIdx=idx;
|
||||
var r=rows[idx];
|
||||
editDraft={gastro:r.gastro,colon:r.colon};
|
||||
document.getElementById('edit-title').textContent='编辑报告 · '+r.name;
|
||||
document.getElementById('edit-body').innerHTML=
|
||||
'<div class="report-section"><div class="report-section__title">基本信息</div>'+infoGridHtml(r)+'</div>'
|
||||
+'<div class="report-section"><div class="report-section__title">胃镜报告图片</div><div class="upload-row" id="edit-gastro">'+uploadBoxHtml(r.gastro,'胃镜','gastro')+'</div></div>'
|
||||
+'<div class="report-section"><div class="report-section__title">肠镜报告图片</div><div class="upload-row" id="edit-colon">'+uploadBoxHtml(r.colon,'肠镜','colon')+'</div></div>';
|
||||
document.getElementById('edit-modal').classList.add('open');
|
||||
}
|
||||
function fakeUpload(field){
|
||||
editDraft[field]=true;
|
||||
document.getElementById('edit-'+field).innerHTML=uploadBoxHtml(true,field==='gastro'?'胃镜':'肠镜',field);
|
||||
showToast('已选择报告图片 '+field+'-report-'+rows[editIdx].empNo+'.jpg');
|
||||
}
|
||||
function removeUpload(field){
|
||||
editDraft[field]=false;
|
||||
document.getElementById('edit-'+field).innerHTML=uploadBoxHtml(false,field==='gastro'?'胃镜':'肠镜',field);
|
||||
}
|
||||
function saveEdit(){
|
||||
rows[editIdx].gastro=editDraft.gastro;
|
||||
rows[editIdx].colon=editDraft.colon;
|
||||
closeModal('edit-modal');
|
||||
renderTable();
|
||||
showToast('保存成功');
|
||||
}
|
||||
/* ============ 通用 ============ */
|
||||
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');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
renderTable();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -130,7 +130,7 @@
|
||||
<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>
|
||||
@@ -140,8 +140,10 @@
|
||||
<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>
|
||||
<a href="post-gastro-stat.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>
|
||||
@@ -149,9 +151,21 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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="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>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -111,7 +111,7 @@
|
||||
<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>
|
||||
@@ -121,8 +121,10 @@
|
||||
<a href="post-cancer-screening.html" class="sidebar-item">防癌筛查人数统计</a>
|
||||
<a href="post-standard-stat.html" class="sidebar-item active">系统标准化项目统计</a>
|
||||
<a href="post-contracted-hospital.html" class="sidebar-item">签约医院人数统计</a>
|
||||
<a href="post-key-indicator-stat.html" class="sidebar-item">重点指标异常统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="post-gastro-stat.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>
|
||||
@@ -130,9 +132,21 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -133,7 +133,7 @@
|
||||
<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 active">单位体检人数统计</a>
|
||||
@@ -143,8 +143,10 @@
|
||||
<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>
|
||||
<a href="post-gastro-stat.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>
|
||||
@@ -152,9 +154,21 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="post-report-employee.html" class="sidebar-item">常规体检报告</a>
|
||||
<a href="post-report-gastro.html" class="sidebar-item">胃肠镜体检报告</a>
|
||||
<a href="post-report-unmatched.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>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
Reference in New Issue
Block a user