This commit is contained in:
fengpu
2026-09-09 15:16:25 +08:00
47 changed files with 18991 additions and 16730 deletions
@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, initial-scale=1.0">
<title>五类人群信息登记 | 医疗点PAD端</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif; background: #05080f; min-height: 840px; min-width: 1320px; display: grid; place-items: center; padding: 20px; }
.device-frame { width: 1280px; height: 800px; background: #eef1f6; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04); position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
.drawer__head { height: 56px; background: #fff; display: flex; align-items: center; padding: 0 20px; gap: 12px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(74,90,127,.06); }
.drawer__back { color: #1890ff; font-size: 14px; cursor: pointer; text-decoration: none; }
.drawer__title { font-size: 16px; font-weight: 600; color: #333; }
.drawer__body { flex: 1; overflow-y: auto; padding: 16px 24px; scrollbar-width: none; }
.drawer__body::-webkit-scrollbar { display: none; }
.drawer__foot { height: 60px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 14px; flex-shrink: 0; box-shadow: 0 -2px 6px rgba(74,90,127,.06); }
.btn { height: 32px; padding: 0 18px; border-radius: 6px; border: 1px solid #d9dee8; background: #fff; color: #4a5a7f; font-size: 13px; cursor: pointer; }
.btn--primary { background: #1890ff; border-color: #1890ff; color: #fff; }
/* 顶部只读员工信息 */
.emp-bar { background: #fff; border-radius: 12px; padding: 12px 18px; display: flex; gap: 34px; font-size: 13px; color: #4a5a7f; box-shadow: 0 2px 8px rgba(74,90,127,.05); }
.emp-bar b { color: #333; font-weight: 500; }
/* 分类单选 */
.cls-row { background: #fff; border-radius: 12px; padding: 14px 18px; margin-top: 12px; box-shadow: 0 2px 8px rgba(74,90,127,.05); display: flex; align-items: center; gap: 22px; font-size: 13px; color: #333; }
.cls-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.cls-row input { accent-color: #1890ff; width: 15px; height: 15px; }
.sec { background: #fff; border-radius: 12px; padding: 14px 18px; margin-top: 12px; box-shadow: 0 2px 8px rgba(74,90,127,.05); }
.sec__head { display: flex; align-items: center; margin-bottom: 10px; }
.sec__title { font-size: 14px; font-weight: 600; color: #333; border-left: 3px solid #1890ff; padding-left: 8px; flex: 1; }
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th { background: #f6f8fc; color: #4a5a7f; font-weight: 500; padding: 8px 10px; text-align: left; }
.table td { padding: 7px 10px; border-bottom: 1px solid #f0f2f5; }
.table input, .table select { width: 100%; height: 30px; border: 1px solid #d9dee8; border-radius: 6px; padding: 0 8px; font-size: 12px; outline: none; box-sizing: border-box; }
.op-del { color: #f5222d; cursor: pointer; font-size: 12px; }
.link-add { color: #1890ff; font-size: 12px; cursor: pointer; text-decoration: none; }
</style>
</head>
<body>
<div class="device-frame">
<div class="drawer__head">
<a class="drawer__back" href="javascript:history.back()">&#x2039; 返回</a>
<span class="drawer__title">五类人群信息登记</span>
</div>
<div class="drawer__body">
<div class="emp-bar">
<span>单位:<b>CQ能源采油三大队</b></span>
<span>部门:<b>采油三队</b></span>
<span>姓名:<b>石维国</b></span>
<span>身份证号:<b>612427********3417</b></span>
</div>
<div class="sec">
<div class="sec__head"><span class="sec__title">人群分类</span></div>
<div class="cls-row" style="padding:0;box-shadow:none;border-radius:0">
<label><input type="radio" name="cls">a-大病人群A</label>
<label><input type="radio" name="cls" checked onclick="showCls('b')">b-慢病人群B</label>
<label><input type="radio" name="cls" onclick="showCls('c')">c-异常人群C</label>
<label><input type="radio" name="cls" onclick="showCls('d')">d-风险人群D</label>
<label><input type="radio" name="cls" onclick="showCls('e')">e-健康人群E</label>
</div>
</div>
<!-- B 慢病人群 -->
<div class="sec" id="secB">
<div class="sec__head">
<span class="sec__title">慢病信息</span>
<!-- [交互] 添加一行慢病记录 -->
<button class="btn btn--primary" style="height:28px;padding:0 12px">添 加</button>
</div>
<table class="table">
<tr><th style="width:26%">慢病名称</th><th style="width:16%">确诊年份</th><th style="width:26%">确诊医院</th><th>治疗情况</th><th style="width:50px">操作</th></tr>
<tr><td><input value="原发性高血压3级"></td><td><input value="2019"></td><td><input value="定边县人民医院"></td><td><input value="口服降压药,血压控制一般"></td><td><span class="op-del">删除</span></td></tr>
<tr><td><input value="2型糖尿病"></td><td><input value="2022"></td><td><input value="CQ能源职工医院"></td><td><input value="二甲双胍治疗,定期监测"></td><td><span class="op-del">删除</span></td></tr>
</table>
</div>
<!-- C 异常人群 -->
<div class="sec" id="secC" style="display:none">
<div class="sec__head">
<span class="sec__title">异常指标信息</span>
<!-- [交互] 添加时打开「体检报告」指标多选弹窗(旧系统 chooseModal),勾选指标回填本表 -->
<a class="link-add" href="javascript:void(0)"> 从体检报告添加</a>
</div>
<table class="table">
<tr><th>指标名称</th><th>指标值</th><th>参考范围</th><th style="width:12%">确诊年份</th><th style="width:22%">确诊医院</th><th style="width:50px">操作</th></tr>
<tr><td>空腹血糖</td><td><input value="7.8"></td><td>3.9~6.1</td><td><input value="2025"></td><td><input value="定边县人民医院"></td><td><span class="op-del">删除</span></td></tr>
<tr><td>血清总胆固醇</td><td><input value="6.12"></td><td>0~5.2</td><td><input value="2025"></td><td><input value="定边县人民医院"></td><td><span class="op-del">删除</span></td></tr>
</table>
</div>
<!-- D 风险人群 -->
<div class="sec" id="secD" style="display:none">
<div class="sec__head">
<span class="sec__title">风险疾病信息</span>
<!-- [交互] 添加时打开「评估结果」多选弹窗 -->
<a class="link-add" href="javascript:void(0)"> 从评估结果添加</a>
</div>
<table class="table">
<tr><th>疾病名称</th><th style="width:24%">风险等级</th><th style="width:20%">评估年份</th><th style="width:50px">操作</th></tr>
<tr><td>心脑血管疾病风险</td><td><select><option>中风险</option><option selected>高风险</option></select></td><td><input value="2025"></td><td><span class="op-del">删除</span></td></tr>
</table>
</div>
<!-- A 大病人群 -->
<div class="sec" id="secA" style="display:none">
<div class="sec__head">
<span class="sec__title">大病信息</span>
<button class="btn btn--primary" style="height:28px;padding:0 12px">添 加</button>
</div>
<table class="table">
<tr><th>大病名称</th><th style="width:12%">确诊年份</th><th style="width:20%">确诊医院</th><th style="width:16%">大病状态</th><th>治疗情况</th><th style="width:50px">操作</th></tr>
<tr><td><input value="—"></td><td><input></td><td><input></td><td><select><option>治疗期</option><option>康复期</option></select></td><td><input></td><td><span class="op-del">删除</span></td></tr>
</table>
</div>
<!-- E 健康人群 -->
<div class="sec" id="secE" style="display:none">
<div style="font-size:13px;color:#969eb0;text-align:center;padding:16px 0">健康人群无需登记附加信息</div>
</div>
</div>
<div class="drawer__foot">
<button class="btn" onclick="history.back()">取 消</button>
<!-- [交互] 确认保存五类人群登记信息,返回解读抽屉 -->
<button class="btn btn--primary" onclick="history.back()">确 认</button>
</div>
</div>
<script>
// 按人群分类切换信息表显隐
function showCls(k) {
['A', 'B', 'C', 'D', 'E'].forEach(function (c) {
document.getElementById('sec' + c).style.display = c === k.toUpperCase() ? 'block' : 'none';
});
}
</script>
</body>
</html>
+118 -68
View File
@@ -45,6 +45,8 @@
.tag--ht { background: rgba(24,144,255,.12); color: #1890ff; }
.tag--dm { background: rgba(42,193,139,.12); color: #2ac18b; }
.tag--chd { background: rgba(0,195,195,.12); color: #00c3c3; }
.tag--ob { background: rgba(252,163,24,.12); color: #fca318; }
.tag--oth { background: rgba(104,98,214,.12); color: #6862d6; }
/* 医药信息 */
.med-card { background: #f2f6ff; border-radius: 10px; padding: 10px 14px; font-size: 12px; color: #4a5a7f; line-height: 1.9; position: relative; }
.med-card b { color: #333; font-size: 13px; }
@@ -57,6 +59,7 @@
.task-opt input { accent-color: #1890ff; width: 15px; height: 15px; }
.task-opt--on { background: #dae3f3; }
.pill { display: inline-block; padding: 1px 10px; border-radius: 12px; font-size: 11px; background: rgba(252,163,24,.12); color: #fca318; }
.pill--over { background: rgba(253,33,33,.08); color: #fd2121; }
/* 签名块 */
.sign-box { flex: 1; height: 110px; border: 1px dashed #b7c3d6; border-radius: 8px; background: #f7f9fc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #969eb0; font-size: 13px; cursor: pointer; }
.sign-box svg { width: 22px; height: 22px; stroke: #969eb0; fill: none; stroke-width: 2; }
@@ -99,8 +102,8 @@
<body>
<div class="device-frame">
<div class="drawer__head">
<!-- [交互] 返回随访管理列表: follow-records.html -->
<a class="drawer__back" href="follow-records.html">&#x2039; 返回</a>
<!-- [交互] 点击返回来源页面(来源记录为空时回退到浏览器历史) -->
<a class="drawer__back" href="follow-records.html" onclick="goBack(); return false;">&#x2039; 返回</a>
<span class="drawer__title">新增随访</span>
</div>
@@ -123,14 +126,14 @@
</div>
</div>
<div class="form-grid" style="margin-top:14px">
<div class="fld"><span class="fld__label">姓名</span><input value="岳春生" readonly></div>
<div class="fld"><span class="fld__label">性别</span><input value="男" readonly></div>
<div class="fld"><span class="fld__label">年龄</span><input value="54" readonly></div>
<div class="fld"><span class="fld__label">工号</span><input value="1035678" readonly></div>
<div class="fld"><span class="fld__label">联系电话</span><input value="139****2214" readonly></div>
<div class="fld"><span class="fld__label">单位/部门</span><input value="陕E作业区 / 管理四中心" readonly></div>
<div class="fld"><span class="fld__label">姓名</span><input id="empName" value="岳春生" readonly></div>
<div class="fld"><span class="fld__label">性别</span><input id="empGender" value="男" readonly></div>
<div class="fld"><span class="fld__label">年龄</span><input id="empAge" value="54" readonly></div>
<div class="fld"><span class="fld__label">工号</span><input id="empNo" value="1035678" readonly></div>
<div class="fld"><span class="fld__label">联系电话</span><input value="13956282214" readonly></div>
<div class="fld"><span class="fld__label">单位/部门</span><input id="empUnitDept" value="陕E作业区 / 管理四中心" readonly></div>
<!-- 慢病标签由员工慢病档案自动回显,不可手工修改 -->
<div class="fld fld--full"><span class="fld__label">慢病</span><span style="line-height:26px"><span class="tag tag--ht">高血压</span><span class="tag tag--dm">糖尿病</span></span></div>
<div class="fld fld--full"><span class="fld__label">慢病</span><span id="empTags" style="line-height:26px"><span class="tag tag--ht">高血压</span><span class="tag tag--dm">糖尿病</span></span></div>
</div>
</div>
@@ -139,7 +142,6 @@
<div class="form-grid">
<div class="fld"><span class="fld__label">随访医生</span><input value="石维国(当前登录)" readonly></div>
<div class="fld"><span class="fld__label">随访日期</span><input value="2026-09-04" readonly></div>
<div class="fld"><span class="fld__label"><span class="fld__req">*</span>下次随访</span><input value="2026-10-04"></div>
<div class="fld fld--full"><span class="fld__label"><span class="fld__req">*</span>随访形式</span>
<span class="radio">
<label><input type="radio" name="form" checked>门诊随访</label>
@@ -149,9 +151,6 @@
</span>
</div>
<div class="fld fld--full"><span class="fld__label"><span class="fld__req">*</span>症状</span><textarea placeholder="请输入目前症状与主诉">偶有头晕,血压波动,无胸闷心悸。</textarea></div>
<div class="fld"><span class="fld__label"><span class="fld__req">*</span>效果评价</span>
<select><option>良好</option><option selected>一般</option><option>不良</option></select>
</div>
</div>
</div>
@@ -184,7 +183,11 @@
<span class="radio"><label><input type="radio" name="salt"></label><label><input type="radio" name="salt"></label><label><input type="radio" name="salt" checked></label></span>
</div>
<div class="fld"><span class="fld__label">心理调整</span>
<select><option selected>良好</option><option>一般</option><option></option></select>
<span class="radio">
<label><input type="radio" name="psych" checked>良好</label>
<label><input type="radio" name="psych">一般</label>
<label><input type="radio" name="psych"></label>
</span>
</div>
<div class="fld fld--full"><span class="fld__label">遵医行为</span>
<span class="radio"><label><input type="radio" name="comp" >良好</label><label><input type="radio" name="comp" checked>一般</label><label><input type="radio" name="comp"></label></span>
@@ -195,8 +198,8 @@
<div class="sec">
<div class="sec__title">用药情况</div>
<div class="med-grid">
<div class="med-card"><b>苯磺酸氨氯地平片</b>5mg×7片 · 23.80元)<br>数量:2盒 用法用量:口服,一日1次,一次1片<div class="med-card__ops"><span class="op-del">删除</span></div></div>
<div class="med-card"><b>二甲双胍缓释片</b>0.5g×30片 · 32.40元)<br>数量:1盒 用法用量:口服,一日2次,一次1片<div class="med-card__ops"><span class="op-del">删除</span></div></div>
<div class="med-card"><b>苯磺酸氨氯地平片</b><br>用法用量:口服,一日1次,一次1片<div class="med-card__ops"><span class="op-del" onclick="this.parentNode.parentNode.remove()">删除</span></div></div>
<div class="med-card"><b>二甲双胍缓释片</b><br>用法用量:口服,一日2次,一次1片<div class="med-card__ops"><span class="op-del" onclick="this.parentNode.parentNode.remove()">删除</span></div></div>
</div>
<!-- [交互] 点击打开页内「新增用药」弹窗 -->
<button class="add-med-btn" onclick="openModal('medModal')"> 新增用药</button>
@@ -232,19 +235,51 @@
<!-- [交互] 员工存在待随访的巡诊任务时在此显示,勾选后随本次随访一并处理;选中态底色加深 -->
<label class="task-opt task-opt--on" onclick="this.classList.toggle('task-opt--on')">
<input type="checkbox" checked>
<span style="flex:1">2026年第三季度高血压随访任务<br><span style="color:#969eb0">任务来源:慢病干预计划 随访时限2026-09-06 前</span></span>
<span class="pill">待随访 · 还剩2</span>
<span style="flex:1"><b style="color:#333">频次巡诊</b><br><span style="color:#969eb0">计划随访日期2026-09-04</span></span>
<span class="pill pill--over">已逾期 · 逾期4</span>
</label>
<label class="task-opt" style="margin-top:10px" onclick="this.classList.toggle('task-opt--on')">
<input type="checkbox">
<span style="flex:1"><b style="color:#333">单次巡诊</b><br><span style="color:#969eb0">计划随访日期:2026-09-12</span></span>
<span class="pill">待随访 · 还剩4天</span>
</label>
<label class="task-opt" style="margin-top:10px" onclick="this.classList.toggle('task-opt--on')">
<input type="checkbox">
<span style="flex:1"><b style="color:#333">申请随诊</b><br><span style="color:#969eb0">计划随访日期:2026-09-15</span></span>
<span class="pill">待随访 · 还剩7天</span>
</label>
</div>
<div class="sec">
<div class="sec__title">员工签字</div>
<div class="fld fld--full" style="align-items:flex-start">
<div class="form-grid">
<div class="fld"><span class="fld__label"><span class="fld__req">*</span>下次随访</span><input value="2026-10-04"></div>
<div class="fld"><span class="fld__label"><span class="fld__req">*</span>随访效果</span>
<span class="radio">
<label><input type="radio" name="effect">良好</label>
<label><input type="radio" name="effect" checked>一般</label>
<label><input type="radio" name="effect">不良</label>
</span>
</div>
</div>
<div class="fld fld--full" style="align-items:flex-start;margin-top:14px">
<span class="fld__label" style="padding-top:8px"><span class="fld__req">*</span>签字</span>
<!-- [交互] 点击打开页内手写签名弹窗 -->
<div class="sign-box" onclick="openSign()">
<svg viewBox="0 0 24 24"><path d="M17 3a2.8 2.8 0 014 4L7.5 20.5 2 22l1.5-5.5z"/></svg>
点击签名
<div style="flex:1">
<div class="radio" style="margin-bottom:10px">
<label><input type="radio" name="signType" checked onclick="switchSignType('hand')">手写签名</label>
<label><input type="radio" name="signType" onclick="switchSignType('img')">签字图片</label>
</div>
<!-- [交互] 手写签名:点击打开页内手写签名弹窗 -->
<div class="sign-box" id="signHandBox" onclick="openSign()">
<svg viewBox="0 0 24 24"><path d="M17 3a2.8 2.8 0 014 4L7.5 20.5 2 22l1.5-5.5z"/></svg>
点击签名
</div>
<!-- [交互] 签字图片:点击上传图片,与手写签名两者选其一即可 -->
<div class="sign-box" id="signImgBox" style="display:none" onclick="document.getElementById('signImgInput').click()">
<svg viewBox="0 0 24 24"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 20h16"/></svg>
上传签字图片
</div>
<input type="file" id="signImgInput" accept="image/*" style="display:none" onchange="onSignImg(this)">
</div>
</div>
</div>
@@ -261,36 +296,13 @@
<div class="modal">
<div class="modal__head"><span class="modal__title">新增用药</span><button class="modal__close" onclick="closeModal('medModal')">&#x2715;</button></div>
<div class="modal__body">
<div class="search-line">
<input placeholder="请输入药品名称查询" value="氨氯地平">
<button class="btn btn--primary">查 询</button>
<div class="drug-list">
<table>
<tr><th>名称</th><th>规格</th><th>单位</th><th>售价(元)</th><th>库存</th></tr>
<tr onclick="pickDrug(this)"><td>苯磺酸氨氯地平片</td><td>5mg×7片</td><td></td><td>23.80</td><td>86</td></tr>
<tr onclick="pickDrug(this)"><td>苯磺酸左氨氯地平片</td><td>2.5mg×14片</td><td></td><td>28.50</td><td>40</td></tr>
<tr onclick="pickDrug(this)"><td>氨氯地平贝那普利片</td><td>5mg×7片</td><td></td><td>45.00</td><td>12</td></tr>
</table>
</div>
</div>
<div class="ro-row" style="margin-top:210px">
<div class="ro-box">规格<b>5mg×7片</b></div>
<div class="ro-box">单位<b></b></div>
<div class="ro-box">售价<b>23.80 元</b></div>
<div class="ro-box">库存<b>86</b></div>
</div>
<div class="fld" style="margin-bottom:14px"><span class="fld__label" style="width:88px"><span class="fld__req">*</span>数量</span>
<span class="stepper">
<button onclick="step(-1)"></button><input id="qty" value="2"><button onclick="step(1)"></button>
</span>
<span style="font-size:12px;color:#969eb0;margin-left:8px">不可超过库存 86</span>
</div>
<div class="fld"><span class="fld__label" style="width:88px"><span class="fld__req">*</span>用法用量</span><input value="口服,一日1次,一次1片"></div>
<div class="fld" style="margin-bottom:14px"><span class="fld__label" style="width:88px"><span class="fld__req">*</span>药物名称</span><input id="medName" placeholder="请输入药物名称"></div>
<div class="fld"><span class="fld__label" style="width:88px"><span class="fld__req">*</span>用法用量</span><input id="medUsage" placeholder="如:口服,一日1次,一次1片"></div>
</div>
<div class="modal__foot">
<button class="btn" onclick="closeModal('medModal')">取 消</button>
<!-- [交互] 确认后生成一张用药卡片加入用药情况 -->
<button class="btn btn--primary" onclick="closeModal('medModal')">确 认</button>
<!-- [交互] 确认后生成一张用药卡片加入用药情况,可多次新增 -->
<button class="btn btn--primary" onclick="addMed()">确 认</button>
</div>
</div>
</div>
@@ -319,31 +331,69 @@
</div>
<script>
// 返回来源页面:优先取 referrer,取不到则回退浏览器历史
function goBack() {
if (document.referrer) { location.href = document.referrer; }
else { history.back(); }
}
// 从 URL 参数回填员工信息(由任务中心「进行随访」带入)
(function () {
var p = new URLSearchParams(location.search);
if (!p.get('name')) return;
// 带入了员工信息(来自任务中心)时隐藏姓名搜索行;无参数(来自随访管理)则保留搜索
document.querySelector('.inquiry').style.display = 'none';
document.getElementById('empName').value = p.get('name');
document.getElementById('empGender').value = p.get('gender') || '';
document.getElementById('empAge').value = p.get('age') || '';
document.getElementById('empNo').value = p.get('empno') || '';
var unit = p.get('unit') || '', dept = p.get('dept') || '';
document.getElementById('empUnitDept').value = dept ? (unit + ' / ' + dept) : unit;
var tagClass = { '高血压': 'tag--ht', '糖尿病': 'tag--dm', '冠心病': 'tag--chd', '肥胖': 'tag--ob', '其他': 'tag--oth' };
var tags = (p.get('tags') || '').split(',').filter(Boolean);
document.getElementById('empTags').innerHTML = tags.map(function (t) {
return '<span class="tag ' + (tagClass[t] || 'tag--oth') + '">' + t + '</span>';
}).join('');
})();
function openModal(id) { document.getElementById(id).classList.add('open'); }
function closeModal(id) { document.getElementById(id).classList.remove('open'); }
// 搜索结果回填:收起浮层
function pickEmp() { document.getElementById('iqResult').style.display = 'none'; }
// 药品选中:隐藏结果浮层并回填只读区
function pickDrug(tr) {
document.querySelector('.drug-list').style.display = 'none';
var tds = tr.querySelectorAll('td');
var boxes = document.querySelectorAll('.ro-box b');
boxes[0].textContent = tds[1].textContent;
boxes[1].textContent = tds[2].textContent;
boxes[2].textContent = tds[3].textContent + ' 元';
boxes[3].textContent = tds[4].textContent;
}
// 数量步进(上限为库存)
function step(d) {
var el = document.getElementById('qty');
var v = parseInt(el.value || '1', 10) + d;
if (v < 1) v = 1;
if (v > 86) v = 86;
el.value = v;
// 新增用药:手动录入药物名称与用法用量,生成用药卡片(可多次新增)
function addMed() {
var name = document.getElementById('medName').value.trim();
var usage = document.getElementById('medUsage').value.trim();
if (!name) { alert('请输入药物名称'); return; }
if (!usage) { alert('请输入用法用量'); return; }
var card = document.createElement('div');
card.className = 'med-card';
card.innerHTML = '<b>' + name + '</b><br>用法用量:' + usage +
'<div class="med-card__ops"><span class="op-del" onclick="this.parentNode.parentNode.remove()">删除</span></div>';
document.querySelector('.med-grid').appendChild(card);
document.getElementById('medName').value = '';
document.getElementById('medUsage').value = '';
closeModal('medModal');
}
// 手写签名(页内弹窗)
function openSign() { document.getElementById('signModal').classList.add('open'); }
function closeSign() { document.getElementById('signModal').classList.remove('open'); }
// 签字方式切换:手写签名 / 签字图片(两者选其一)
function switchSignType(type) {
var isHand = type === 'hand';
document.getElementById('signHandBox').style.display = isHand ? 'flex' : 'none';
document.getElementById('signImgBox').style.display = isHand ? 'none' : 'flex';
}
// 签字图片:读取上传图片并预览
function onSignImg(input) {
var file = input.files && input.files[0];
if (!file) return;
var reader = new FileReader();
reader.onload = function (e) {
var box = document.getElementById('signImgBox');
box.innerHTML = '<img src="' + e.target.result + '" style="max-width:100%;max-height:92px;object-fit:contain">' +
'<span style="font-size:11px;color:#969eb0">已上传 · 点击可重新上传</span>';
};
reader.readAsDataURL(file);
}
var canvas = document.getElementById('signCanvas');
var ctx = canvas.getContext('2d');
var drawing = false, hasInk = false;
@@ -366,7 +416,7 @@
}
function confirmSign() {
if (!hasInk) { alert('您还没有进行签字!'); return; }
var box = document.querySelector('.sign-box');
var box = document.getElementById('signHandBox');
box.innerHTML = '<span style="font-size:26px;font-family:KaiTi,serif;color:#333">岳春生</span><span style="font-size:11px">已签名 · 点击可重签</span>';
closeSign();
}
+39 -13
View File
@@ -44,6 +44,8 @@
/* 签名块 */
.sign-box { flex: 1; height: 130px; border: 1px dashed #b7c3d6; border-radius: 8px; background: #f7f9fc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #969eb0; font-size: 13px; cursor: pointer; }
.sign-box svg { width: 22px; height: 22px; stroke: #969eb0; fill: none; stroke-width: 2; }
.radio { display: flex; gap: 16px; align-items: center; font-size: 13px; color: #333; }
.radio input { accent-color: #1890ff; width: 14px; height: 14px; }
.drawer__foot { height: 60px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 14px; flex-shrink: 0; box-shadow: 0 -2px 6px rgba(74,90,127,.06); }
/* 页内弹窗:手写签名 */
.overlay { position: absolute; inset: 0; background: rgba(15,23,42,.45); z-index: 60; display: none; align-items: center; justify-content: center; }
@@ -120,9 +122,8 @@
<div class="fld"><span class="fld__label"><span class="fld__req">*</span>综合解读建议</span>
<textarea placeholder="请输入综合解读建议">血压、血糖控制欠佳,建议调整降压方案并内分泌科评估降糖治疗;加强生活方式干预,2 周后门诊复查。</textarea>
</div>
<div class="fld"><span class="fld__label">重新分类</span>
<div class="fld"><span class="fld__label">五类人群分类</span>
<select>
<!-- [交互] 选择 A/B/C/D 类时需完成五类人群信息登记,打开五类人群抽屉: five-class-drawer.html -->
<option>请选择五类人群分类</option>
<option>a-大病人群A</option>
<option selected>b-慢病人群B</option>
@@ -131,23 +132,30 @@
<option>e-健康人群E</option>
</select>
</div>
<button class="btn" style="width:100%" onclick="location.href='five-class-drawer.html'">登记五类人群信息</button>
</div>
<div class="form-card">
<div class="form-card__title">员工确认签字</div>
<div style="font-size:12px;color:#969eb0;margin-bottom:8px">本人已确认健康随访</div>
<div class="fld"><span class="fld__label">签名</span>
<!-- [交互] 点击打开页内手写签名弹窗 -->
<div class="sign-box" onclick="openSign()" style="flex:1">
<svg viewBox="0 0 24 24"><path d="M17 3a2.8 2.8 0 014 4L7.5 20.5 2 22l1.5-5.5z"/></svg>
点击签名
<div class="fld"><span class="fld__label"><span class="fld__req">*</span>签字</span>
<div style="flex:1">
<div class="radio" style="margin-bottom:10px">
<label><input type="radio" name="signType" checked onclick="switchSignType('hand')">手写签名</label>
<label><input type="radio" name="signType" onclick="switchSignType('img')">签字图片</label>
</div>
<!-- [交互] 手写签名:点击打开页内手写签名弹窗 -->
<div class="sign-box" id="signHandBox" onclick="openSign()">
<svg viewBox="0 0 24 24"><path d="M17 3a2.8 2.8 0 014 4L7.5 20.5 2 22l1.5-5.5z"/></svg>
点击签名
</div>
<!-- [交互] 签字图片:点击上传图片,与手写签名两者选其一即可 -->
<div class="sign-box" id="signImgBox" style="display:none" onclick="document.getElementById('signImgInput').click()">
<svg viewBox="0 0 24 24"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 20h16"/></svg>
上传签字图片
</div>
<input type="file" id="signImgInput" accept="image/*" style="display:none" onchange="onSignImg(this)">
</div>
</div>
<div class="fld"><span class="fld__label">签字图片</span>
<!-- [交互] 上传签字图片(仅 png/jpg),旧系统调起相册/拍照 -->
<select style="height:32px;padding:6px 10px"><option>上传文件(png/jpg)…</option></select>
</div>
</div>
</div>
</div>
@@ -185,6 +193,24 @@
// 手写签名(页内弹窗)
function openSign() { document.getElementById('signModal').classList.add('open'); }
function closeSign() { document.getElementById('signModal').classList.remove('open'); }
// 签字方式切换:手写签名 / 签字图片(两者选其一)
function switchSignType(type) {
var isHand = type === 'hand';
document.getElementById('signHandBox').style.display = isHand ? 'flex' : 'none';
document.getElementById('signImgBox').style.display = isHand ? 'none' : 'flex';
}
// 签字图片:读取上传图片并预览
function onSignImg(input) {
var file = input.files && input.files[0];
if (!file) return;
var reader = new FileReader();
reader.onload = function (e) {
var box = document.getElementById('signImgBox');
box.innerHTML = '<img src="' + e.target.result + '" style="max-width:100%;max-height:100px;object-fit:contain">' +
'<span style="font-size:11px;color:#969eb0">已上传 · 点击可重新上传</span>';
};
reader.readAsDataURL(file);
}
var canvas = document.getElementById('signCanvas');
var ctx = canvas.getContext('2d');
var drawing = false, hasInk = false;
@@ -207,7 +233,7 @@
}
function confirmSign() {
if (!hasInk) { alert('您还没有进行签字!'); return; }
var box = document.querySelector('.sign-box');
var box = document.getElementById('signHandBox');
box.innerHTML = '<span style="font-size:26px;font-family:KaiTi,serif;color:#333">石维国</span><span style="font-size:11px">已签名 · 点击可重签</span>';
closeSign();
}
+3 -12
View File
@@ -205,7 +205,7 @@
</div>
</div>
<div class="login-form__item">
<!-- [交互] 点击登录,校验通过后跳转至任务中心(主页): ./task.html -->
<!-- [交互] 点击登录,直接跳转至任务中心(主页): ./task.html -->
<button class="login-form__submit" onclick="doLogin()">登 录</button>
</div>
</div>
@@ -220,18 +220,9 @@
captchaIdx = (captchaIdx + 1) % captchaList.length;
document.getElementById('captchaText').textContent = captchaList[captchaIdx];
}
// 登录校验与跳转(原型不做真实鉴权)
// 登录跳转(原型不做鉴权校验,直接进入系统
function doLogin() {
var toast = document.getElementById('toast');
function showToast(msg) {
toast.textContent = msg;
toast.style.display = 'block';
setTimeout(function () { toast.style.display = 'none'; }, 1600);
}
if (!document.getElementById('username').value) { showToast('请输入账号!'); return; }
if (!document.getElementById('password').value) { showToast('请输入密码!'); return; }
showToast('登录成功,正在进入系统…');
setTimeout(function () { location.href = './task.html'; }, 800);
location.href = './task.html';
}
</script>
+25 -20
View File
@@ -161,39 +161,39 @@
<div class="tcard">
<div class="tcard__head"><span class="tcard__times">待随访 2 次</span><span class="pill pill--wait">待随访</span></div>
<div class="tcard__dates">计划随访:2026-09-08 截止日期:2026-09-15</div>
<div class="info-block"><b>岳春生</b> 男 · 54岁 · 1035678<br><span class="tag tag--ht">高血压</span><span class="tag tag--dm">糖尿病</span><br>陕E作业区管理四中心</div>
<!-- [交互] 点击打开新增随访抽屉: follow-drawer.html -->
<button class="tcard__btn" onclick="location.href='follow-drawer.html'">进行随访</button>
<div class="info-block"><b>岳春生</b> 男 · 54岁 · 1035678<br><span class="tag tag--ht">高血压</span><span class="tag tag--dm">糖尿病</span><br>采油一厂-信息部</div>
<!-- [交互] 点击打开新增随访抽屉并带入员工信息: follow-drawer.html -->
<button class="tcard__btn" onclick="goFollow('岳春生','男','54','1035678','采油一厂','信息部','高血压,糖尿病')">进行随访</button>
</div>
<div class="tcard">
<div class="tcard__head"><span class="tcard__times">待随访 1 次</span><span class="pill pill--over">已逾期</span></div>
<div class="tcard__dates">计划随访:2026-08-25 截止日期:2026-09-01</div>
<div class="info-block"><b>田淑珍</b> 女 · 61岁 · 1042237<br><span class="tag tag--chd">冠心病</span><br>陕E作业区转运站</div>
<button class="tcard__btn" onclick="location.href='follow-drawer.html'">进行随访</button>
<div class="info-block"><b>田淑珍</b> 女 · 61岁 · 1042237<br><span class="tag tag--chd">冠心病</span><br>采油一厂-转运站</div>
<button class="tcard__btn" onclick="goFollow('田淑珍','女','61','1042237','采油一厂','转运站','冠心病')">进行随访</button>
</div>
<div class="tcard">
<div class="tcard__head"><span class="tcard__times">待随访 3 次</span><span class="pill pill--wait">待随访</span></div>
<div class="tcard__dates">计划随访:2026-09-12 截止日期:2026-09-19</div>
<div class="info-block"><b>尹立春</b> 男 · 47岁 · 1028945<br><span class="tag tag--ob">肥胖</span><span class="tag tag--oth">其他</span><br>陕E作业区注水大队</div>
<button class="tcard__btn" onclick="location.href='follow-drawer.html'">进行随访</button>
<div class="info-block"><b>尹立春</b> 男 · 47岁 · 1028945<br><span class="tag tag--ob">肥胖</span><span class="tag tag--oth">其他</span><br>采油一厂-注水大队</div>
<button class="tcard__btn" onclick="goFollow('尹立春','男','47','1028945','采油一厂','注水大队','肥胖,其他')">进行随访</button>
</div>
<div class="tcard">
<div class="tcard__head"><span class="tcard__times">待随访 1 次</span><span class="pill pill--wait">待随访</span></div>
<div class="tcard__dates">计划随访:2026-09-10 截止日期:2026-09-17</div>
<div class="info-block"><b>戴文广</b> 男 · 58岁 · 1031002<br><span class="tag tag--ht">高血压</span><br>采油一大队</div>
<button class="tcard__btn" onclick="location.href='follow-drawer.html'">进行随访</button>
<div class="info-block"><b>戴文广</b> 男 · 58岁 · 1031002<br><span class="tag tag--ht">高血压</span><br>采油一厂-作业一大队</div>
<button class="tcard__btn" onclick="goFollow('戴文广','男','58','1031002','采油一厂','作业一大队','高血压')">进行随访</button>
</div>
<div class="tcard">
<div class="tcard__head"><span class="tcard__times">待随访 2 次</span><span class="pill pill--wait">待随访</span></div>
<div class="tcard__dates">计划随访:2026-09-14 截止日期:2026-09-21</div>
<div class="info-block"><b>付桂荣</b> 女 · 52岁 · 1044518<br><span class="tag tag--dm">糖尿病</span><br>采油二大队</div>
<button class="tcard__btn" onclick="location.href='follow-drawer.html'">进行随访</button>
<div class="info-block"><b>付桂荣</b> 女 · 52岁 · 1044518<br><span class="tag tag--dm">糖尿病</span><br>采油二厂-作业二大队</div>
<button class="tcard__btn" onclick="goFollow('付桂荣','女','52','1044518','采油二厂','作业二大队','糖尿病')">进行随访</button>
</div>
<div class="tcard">
<div class="tcard__head"><span class="tcard__times">待随访 1 次</span><span class="pill pill--wait">待随访</span></div>
<div class="tcard__dates">计划随访:2026-09-16 截止日期:2026-09-23</div>
<div class="info-block"><b>曲志明</b> 男 · 45岁 · 1037781<br><span class="tag tag--chd">冠心病</span><span class="tag tag--ht">高血压</span><br>输气作业区</div>
<button class="tcard__btn" onclick="location.href='follow-drawer.html'">进行随访</button>
<div class="info-block"><b>曲志明</b> 男 · 45岁 · 1037781<br><span class="tag tag--chd">冠心病</span><span class="tag tag--ht">高血压</span><br>输气厂-输气作业区</div>
<button class="tcard__btn" onclick="goFollow('曲志明','男','45','1037781','输气厂','输气作业区','冠心病,高血压')">进行随访</button>
</div>
</div>
@@ -203,7 +203,7 @@
<div class="tcard">
<div class="tcard__head"><span class="tcard__times">待解读 1 次<span class="tcard__edit" onclick="openModal('deadlineModal')">编辑</span></span><span class="pill pill--wait">待解读</span></div>
<div class="tcard__dates">截止日期:2026-09-12</div>
<div class="info-block"><b>石维国</b> 男 · 50岁 · 1029334<br><span class="tag tag--ht">高血压</span><br>采油三大队</div>
<div class="info-block"><b>石维国</b> 男 · 50岁 · 1029334<br><span class="tag tag--ht">高血压</span><br>采油三厂-作业三大队</div>
<!-- [交互] 点击打开解读报告抽屉: interpret-drawer.html -->
<button class="tcard__btn" onclick="location.href='interpret-drawer.html'">进行解读</button>
</div>
@@ -211,20 +211,20 @@
<div class="tcard">
<div class="tcard__head"><span class="tcard__times">待解读 2 次<span class="tcard__edit" onclick="openModal('deadlineModal')">编辑</span></span><span class="pill pill--wait">待解读</span></div>
<div class="tcard__dates">截止日期:2026-09-18<br>截止日期:2026-09-20</div>
<div class="info-block"><b>赵春霞</b> 女 · 46岁 · 1045690<br><span class="tag tag--dm">糖尿病</span><span class="tag tag--ob">肥胖</span><br>采油一大队</div>
<div class="info-block"><b>赵春霞</b> 女 · 46岁 · 1045690<br><span class="tag tag--dm">糖尿病</span><span class="tag tag--ob">肥胖</span><br>采油一厂-作业一大队</div>
<!-- [交互] 多条待解读,点击先打开「选择解读任务」页内弹窗 -->
<button class="tcard__btn" onclick="openModal('selectModal')">进行解读</button>
</div>
<div class="tcard">
<div class="tcard__head"><span class="tcard__times">待解读 1 次<span class="tcard__edit" onclick="openModal('deadlineModal')">编辑</span></span><span class="pill pill--over">已逾期</span></div>
<div class="tcard__dates">截止日期:2026-08-30</div>
<div class="info-block"><b>马福成</b> 男 · 63岁 · 1026011<br><span class="tag tag--chd">冠心病</span><br>运输大队</div>
<div class="info-block"><b>马福成</b> 男 · 63岁 · 1026011<br><span class="tag tag--chd">冠心病</span><br>运输公司-运输大队</div>
<button class="tcard__btn" onclick="location.href='interpret-drawer.html'">进行解读</button>
</div>
<div class="tcard">
<div class="tcard__head"><span class="tcard__times">待解读 1 次<span class="tcard__edit" onclick="openModal('deadlineModal')">编辑</span></span><span class="pill pill--wait">待解读</span></div>
<div class="tcard__dates">截止日期:2026-09-25</div>
<div class="info-block"><b>杨海燕</b> 女 · 49岁 · 1043358<br><span class="tag tag--oth">其他</span><br>供电服务班</div>
<div class="info-block"><b>杨海燕</b> 女 · 49岁 · 1043358<br><span class="tag tag--oth">其他</span><br>供电公司-供电服务班</div>
<button class="tcard__btn" onclick="location.href='interpret-drawer.html'">进行解读</button>
</div>
</div>
@@ -259,7 +259,7 @@
<div class="modal__body">
<div class="emp-card">
<div><b>赵春霞</b> 女 · 46岁 · 工号 1045690</div>
<div>所属单位:CQ能源采油一大队 <span class="tag tag--dm">糖尿病</span><span class="tag tag--ob">肥胖</span></div>
<div>所属单位:CQ能源采油一厂-作业一大队 <span class="tag tag--dm">糖尿病</span><span class="tag tag--ob">肥胖</span></div>
</div>
<div class="section-label">该员工有 2 条待解读任务,请选择一条进入解读:</div>
<!-- [交互] 点击任务行进入解读报告抽屉: interpret-drawer.html -->
@@ -267,13 +267,11 @@
<span class="task-row__name">2025年体检报告</span>
<span class="pill pill--wait">待解读</span>
<span class="task-row__date">截止日期:2026-09-18</span>
<span style="color:#969eb0">高血压、糖尿病</span>
</div>
<div class="task-row" onclick="location.href='interpret-drawer.html'">
<span class="task-row__name">2024年体检报告</span>
<span class="pill pill--wait">待解读</span>
<span class="task-row__date">截止日期:2026-09-20</span>
<span style="color:#969eb0">糖尿病</span>
</div>
</div>
<div class="modal__foot"><button class="btn" onclick="closeModal('selectModal')">取 消</button></div>
@@ -282,6 +280,13 @@
</div>
<script>
// 携带员工信息跳转至新增随访抽屉
function goFollow(name, gender, age, empno, unit, dept, tags) {
var p = new URLSearchParams();
p.set('name', name); p.set('gender', gender); p.set('age', age);
p.set('empno', empno); p.set('unit', unit); p.set('dept', dept); p.set('tags', tags);
location.href = 'follow-drawer.html?' + p.toString();
}
// 随访/解读 Tab 切换(切换时重置表单)
function switchTab(name) {
var isFollow = name === 'follow';