Compare commits
12
Commits
cbf21d1817
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
 liuyunqin
|
2fc599fabe | ||
|
liuyunqin
|
80b0c78bdd | ||
|
fengpu
|
4767c24d3d | ||
|
fengpu
|
44d7d0b219 | ||
|
liuyunqin
|
8e6c10f0bc | ||
|
fengpu
|
a900886061 | ||
|
fengpu
|
71ddc7fa0a | ||
|
fengpu
|
63407a20c2 | ||
|
liuyunqin
|
5e479bc6fe | ||
|
fengpu
|
b0479ee9d1 | ||
 lianlonggang
|
c3c51978de | ||
|
liuyunqin
|
3ae4e98f9a |
@@ -130,7 +130,7 @@ Web 管理端和员工端 APP 的其余模块（系统管理、运动管理、
|
||||
|
||||
- 2026-09-07：净菜类型拆分独立管理（commit 891678d）——①`din-ingredient.html`/`din-ingredient-add.html` 净菜类型按**规格行级**维护「可食部(%)」字段（位于规格别名后，新增规格时随行出现，新增/编辑/详情三页同步）；②食材列表操作区「食材分类管理」按钮后新增「净菜管理」入口；③新建 `din-clean-veg-mgmt.html` 净菜管理二级页：统计卡片 + 食材名称（下拉搜索）/食材编码/净菜类型（净菜俗名/净菜标准名/规格俗名三源关键字）/切配形状筛选 + 异步导出按钮组（导出列表数据+查看导出任务，样式对齐全仓列表页惯例）+ 列表组级列 rowspan 合并、可食部/规格别名/切配规格/刀工按规格逐行拆分（组内虚线分隔、规格列区纵向分隔线）+ 先选食材回显已有净菜类型再新增/编辑的维护弹窗；SITE_MAP 与营养模块 CHANGELOG 同步。（相关决策：[[decisions.md#净菜类型数据模型与净菜管理页展示模式]]）
|
||||
- 2026-09-07：全仓截图脚本与截图质量修复（commit 7f18470）——assistant/expert/health-monitor 截图脚本失效页面引用改回现存文件名并清理孤儿截图；weight-main-v2 初始化改为解析 `?type=` 参数，修复设计总览六种目标状态截图雷同问题，重拍 weight-main/bluetooth-scale 共 10 张；补拍 PRD 引用但从未生成的视频进行中截图；体重管理 PRD 修复两处截图断链。
|
||||
- 2026-09-04：医疗点PAD端首版原型（commit 15ca37b）——新建 `other-module/medical-pad/` 20 页（1280×800 横屏，抽屉交互页内实现），SITE_MAP 与项目背景尺寸规范同步，新增模块 CHANGELOG；同提交：全站演示数据脱敏（示例人名王建国→石维国、周明远→曲志明，机构长庆油田→CQ油田，覆盖约 30 页）、现场体检签到码改条形码/二维码双选项卡切换、新增健康长寿系统升级改造详细规划 V8 文档。（相关规范：[[feedback_medical_pad_migration.md]]）
|
||||
- 2026-09-04：医疗点PAD端首版原型（commit 15ca37b）——新建 `other-module/medical-pad/` 20 页（1280×800 横屏，抽屉交互页内实现），SITE_MAP 与项目背景尺寸规范同步，新增模块 CHANGELOG；同提交：全站演示数据脱敏（示例人名王建国→石维国、周明远→曲志明，机构CQ能源→CQ油田，覆盖约 30 页）、现场体检签到码改条形码/二维码双选项卡切换、新增健康长寿系统升级改造详细规划 V8 文档。（相关规范：[[feedback_medical_pad_migration.md]]）
|
||||
- 2026-09-04：体重管理员工端设计总览重构（commit 29a09e9）——总览页按目标承诺与签署/体重主页/每日打卡/历史记录/建议与报告/蓝牙设备六大主线重排，页面清单全面切换到 weight-main-v2/goal-management-v2 等 v2 新版页面，新增 playwright 统一截图脚本 `screenshot-weight.mjs` 并重新生成全部截图。
|
||||
- 2026-09-03~09-04：健康体检员工端与管理端多轮完善（commit 118d143、05e157e）——员工端：选项目页费用横幅重做为体检额度卡片（额度使用进度条+必检/选检/可用额度三格，年度额度 1600，新增心脏彩超与胃幽门螺杆菌两项选检），"我的预约"更名重做为"现场体检"，胃肠镜预约结果页成功/失败两态演示；管理端：体检报告模板更名体检导入模板管理、模板额度配置更名群体额度配置、大病人员信息新增弹窗（员工搜索下拉+信息卡片）、指标异常通知固定列+发送通知/短信、单位/胃肠镜预约统计改单位级别 TAB。
|
||||
- 2026-09-02~09-03：健康体检预约流程与检中页面完善（commit a443c61、0d1c770、37ae054、3a838d0、2213106）——员工端"我的预约"合并单页+新增指标纵向对比与消息中心；胃肠镜医院预选征集/已提交页、检前首页预选通知条、选日期页预约状态条与可约窗口限制（常规近30天/胃肠镜7~30天）、预约结果页成功/失败演示与取消预约二次确认；管理端新增大病人员信息/指标异常通知/已选项目员工信息页，胃肠镜体检计划管理新增/编辑/详情抽屉（承检医院多选+机构树选人），组合模板/例外配置/医院费用/单位费用统一详情弹窗与编辑抽屉，检中页更名员工预约体检跟踪、统一员工编号筛选与列、体检编号更名体检编码。
|
||||
|
||||
@@ -238,7 +238,7 @@
|
||||
- 员工信息：姓名（张晓红）、性别、年龄、部门
|
||||
- 数据对比表：初始数据 / 目标数据 / 当前数据（体重、BMI、体脂率、腰围）
|
||||
- 变化指标：绿色显示下降数值
|
||||
- 体重记录列表：按时间倒序，每条显示时间、体重、体脂率、腰围、来源标签(身高秤、蓝牙称、体脂仪、自记)
|
||||
- 体重记录列表：按时间倒序，每条显示时间、体重、体脂率、腰围、来源标签(体重秤、蓝牙称、体脂仪、自记)
|
||||
|
||||
**交互说明：**
|
||||
- 点击返回：返回体重记录页
|
||||
|
||||
@@ -158,7 +158,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="record-item__metric"><div class="record-item__metric-label">体重</div><div class="record-item__metric-val">66.8<span class="record-item__metric-unit">kg</span></div></div>
|
||||
<div class="record-item__metric"><div class="record-item__metric-label">体脂率</div><div class="record-item__metric-val">29.1<span class="record-item__metric-unit">%</span></div></div>
|
||||
<div class="record-item__metric"><div class="record-item__metric-label">腰围</div><div class="record-item__metric-val">80.5<span class="record-item__metric-unit">cm</span></div></div>
|
||||
<div class="record-item__source"><span class="source-badge source-badge--scale">身高秤</span></div>
|
||||
<div class="record-item__source"><span class="source-badge source-badge--scale">体重秤</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -129,7 +129,8 @@ function initTabLinks() {
|
||||
professional: '../professional',
|
||||
operator: '../operator',
|
||||
onsite: '../onsite',
|
||||
admin: '../admin'
|
||||
admin: '../admin',
|
||||
nutritionist: '../nutritionist'
|
||||
};
|
||||
var base = roleBaseMap[role] || '../expert';
|
||||
document.getElementById('link-workbench').href = base + '/workbench/index.html';
|
||||
|
||||
@@ -265,7 +265,8 @@ function initTabLinks() {
|
||||
professional: '../professional',
|
||||
operator: '../operator',
|
||||
onsite: '../onsite',
|
||||
admin: '../admin'
|
||||
admin: '../admin',
|
||||
nutritionist: '../nutritionist'
|
||||
};
|
||||
var base = roleBaseMap[role] || '../expert';
|
||||
document.getElementById('link-workbench').href = base + '/workbench/index.html';
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="window.location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title" id="kd-nav-title">知识详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div id="kd-content" style="background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,0.06);"></div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 营养知识库数据集合 */
|
||||
var KB_DATA = {
|
||||
'pyramid': {
|
||||
icon: '🥗', bg: '#f6ffed', title: '中国居民膳食宝塔（2022）', cat: '膳食营养', date: '2026-03-15',
|
||||
summary: '膳食宝塔是中国居民平衡膳食的指导框架，将食物分为五大类，按推荐摄入量由多到少排列，是制定食谱与营养指导的基础依据。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '谷薯类', desc: '每日 250-400g，其中全谷物和杂豆 50-150g，薯类 50-100g。谷类是膳食能量的主要来源，建议粗细搭配。' },
|
||||
{ color: '#1677ff', name: '蔬菜水果', desc: '每日蔬菜 300-500g（深色蔬菜占一半），水果 200-350g。保证维生素、矿物质和膳食纤维摄入。' },
|
||||
{ color: '#fa8c16', name: '畜禽鱼蛋', desc: '每日畜禽肉 40-75g、水产品 40-75g、蛋类 40-50g。优先选择鱼禽，减少肥肉和加工肉制品。' },
|
||||
{ color: '#722ed1', name: '奶豆坚果', desc: '每日奶及奶制品 300-500g，大豆及坚果 25-35g。是优质蛋白和钙的重要来源。' }
|
||||
]
|
||||
},
|
||||
'macro': {
|
||||
icon: '🍚', bg: '#e6f4ff', title: '三大营养素摄入指南', cat: '膳食营养', date: '2026-03-10',
|
||||
summary: '蛋白质、脂肪、碳水化合物是人体必需的三大产能营养素，合理配比是维持健康体重和代谢功能的关键。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '碳水化合物', desc: '供能比 50-65%。优先选择全谷物、杂豆、薯类等复合碳水，限制添加糖摄入（每日<25g）。' },
|
||||
{ color: '#52c41a', name: '蛋白质', desc: '供能比 15-20%。优质蛋白来源包括鱼、禽、蛋、奶、豆制品。轻体力成人每日约 1.0g/kg 体重。' },
|
||||
{ color: '#fa8c16', name: '脂肪', desc: '供能比 20-30%。优先不饱和脂肪酸（橄榄油、坚果、鱼类），限制饱和脂肪（<10%）和反式脂肪（<1%）。' }
|
||||
]
|
||||
},
|
||||
'vitamin': {
|
||||
icon: '🍎', bg: '#fff7e6', title: '维生素与矿物质需求', cat: '膳食营养', date: '2026-03-05',
|
||||
summary: '维生素和矿物质虽然需求量小，却是维持正常生理功能不可或缺的微量营养素，缺乏时会出现特定症状。',
|
||||
items: [
|
||||
{ color: '#fa8c16', name: '维生素 C', desc: '每日 100mg。来源：新鲜果蔬（猕猴桃、橙子、青椒）。缺乏可致牙龈出血、伤口愈合不良。' },
|
||||
{ color: '#1677ff', name: '钙', desc: '每日 800-1000mg。来源：奶制品、豆制品、绿叶菜。缺乏可致骨质疏松、肌肉痉挛。' },
|
||||
{ color: '#ff4d4f', name: '铁', desc: '男性每日 12mg、女性 20mg。来源：动物肝脏、瘦肉、动物血。缺乏可致缺铁性贫血。' }
|
||||
]
|
||||
},
|
||||
'fatloss': {
|
||||
icon: '🏃', bg: '#f6ffed', title: '科学减脂饮食原则', cat: '减脂控糖', date: '2026-02-28',
|
||||
summary: '减脂的核心是热量缺口，但必须在保证营养均衡的前提下进行，避免极端节食导致肌肉流失和代谢下降。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '热量缺口', desc: '每日热量缺口 300-500kcal，减重速度以每周 0.5-1kg 为宜。避免过度节食（不低于基础代谢）。' },
|
||||
{ color: '#1677ff', name: '高蛋白饮食', desc: '蛋白质供能比可提高至 20-30%，增加饱腹感并减少肌肉流失。选择鸡胸、鱼虾、蛋白、豆制品。' },
|
||||
{ color: '#fa8c16', name: '控制精制碳水', desc: '减少白米饭、白面包等精制碳水，替换为全谷物、杂豆，稳定血糖、增强饱腹感。' }
|
||||
]
|
||||
},
|
||||
'lowgi': {
|
||||
icon: '🍬', bg: '#e6f4ff', title: '低 GI 饮食控糖策略', cat: '减脂控糖', date: '2026-02-20',
|
||||
summary: '低升糖指数（GI）饮食可延缓血糖上升速度，是糖尿病管理和预防的重要饮食策略。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '食物选择', desc: '优先低 GI 食物：全谷物、豆类、大部分蔬菜、低糖水果。避免精制米面、含糖饮料、糕点。' },
|
||||
{ color: '#52c41a', name: '进餐顺序', desc: '先吃蔬菜和蛋白质，再吃主食，可显著降低餐后血糖峰值，改善血糖控制。' },
|
||||
{ color: '#fa8c16', name: '烹饪方式', desc: '主食不要煮得过烂，粗细搭配；避免勾芡、油炸；控制每餐主食总量，少量多餐。' }
|
||||
]
|
||||
},
|
||||
'hyperlipid': {
|
||||
icon: '🫀', bg: '#fff7e6', title: '高血脂饮食管理', cat: '慢性病营养', date: '2026-03-01',
|
||||
summary: '高血脂是动脉粥样硬化的重要危险因素，饮食管理重点是限制饱和脂肪和反式脂肪，增加膳食纤维。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '限制饱和脂肪', desc: '每日饱和脂肪<总能量10%。减少肥肉、动物内脏、黄油、椰子油，选择瘦肉和低脂奶制品。' },
|
||||
{ color: '#fa8c16', name: '杜绝反式脂肪', desc: '避免人造黄油、植脂末、油炸食品、起酥点心。反式脂肪显著升高 LDL-C，增加心血管风险。' },
|
||||
{ color: '#52c41a', name: '增加膳食纤维', desc: '每日 25-30g 膳食纤维。多吃燕麦、豆类、蔬菜、水果，可降低胆固醇吸收。' }
|
||||
]
|
||||
},
|
||||
'uric': {
|
||||
icon: '🦴', bg: '#fff1f0', title: '高尿酸人群饮食禁忌', cat: '慢性病营养', date: '2026-02-15',
|
||||
summary: '高尿酸血症是痛风的生化基础，通过限制高嘌呤食物、增加水分摄入可有效降低尿酸水平。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '限制高嘌呤食物', desc: '避免动物内脏、浓肉汤、海鲜（沙丁鱼、贝类）、啤酒。嘌呤>150mg/100g 的食物应严格限制。' },
|
||||
{ color: '#fa8c16', name: '低嘌呤食物选择', desc: '优先选择蛋类、奶类、蔬菜、水果、谷物。肉类焯水后再烹饪可减少嘌呤含量。' },
|
||||
{ color: '#1677ff', name: '多饮水', desc: '每日饮水 2000ml 以上，促进尿酸排泄。避免含糖饮料和酒精，尤其是啤酒和白酒。' }
|
||||
]
|
||||
},
|
||||
'safety': {
|
||||
icon: '🧪', bg: '#f6ffed', title: '食品添加剂使用规范', cat: '食品安全', date: '2026-02-25',
|
||||
summary: '食品添加剂在合规使用范围内是安全的，了解常见添加剂的用途和限量有助于科学评估食品安全。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '防腐剂', desc: '如苯甲酸钠、山梨酸钾。用于抑制微生物生长，延长保质期。在规定限量内使用安全。' },
|
||||
{ color: '#1677ff', name: '抗氧化剂', desc: '如 BHA、BHT、维生素 E。防止油脂氧化酸败，常用于食用油和坚果制品。' },
|
||||
{ color: '#fa8c16', name: '着色剂', desc: '如焦糖色、胭脂红。用于改善食品色泽。天然色素（姜黄、红曲）安全性更高。' }
|
||||
]
|
||||
},
|
||||
'trace': {
|
||||
icon: '🔍', bg: '#e6f4ff', title: '食材溯源与质量安全', cat: '食品安全', date: '2026-02-10',
|
||||
summary: '食材溯源是通过溯源码记录食材从种植养殖、加工、运输到餐桌的全链路信息，保障食品安全可追溯。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '溯源码体系', desc: '每一批次食材赋予唯一溯源码，关联产地、检测报告、流转节点，实现一物一码、全程可查。' },
|
||||
{ color: '#52c41a', name: '质量检测节点', desc: '毛菜入库时进行农残/重金属/微生物检测，净菜加工后二次质检，合格品方可进入厨房。' },
|
||||
{ color: '#fa8c16', name: '异常处置', desc: '检测不合格的食材立即隔离并追溯同批次产品，防止问题食材流入餐桌。' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
/* 页面加载时根据URL参数渲染知识详情 */
|
||||
function renderDetail() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var key = params.get('key') || 'pyramid';
|
||||
var d = KB_DATA[key];
|
||||
if (!d) d = KB_DATA['pyramid'];
|
||||
|
||||
document.getElementById('kd-nav-title').textContent = d.title;
|
||||
|
||||
var itemsHtml = d.items.map(function(it) {
|
||||
return '<div style="background:#f7f8fa;border-radius:10px;padding:14px;margin-bottom:12px;">' +
|
||||
'<div style="font-size:13px;font-weight:600;color:' + it.color + ';margin-bottom:6px;">' + it.name + '</div>' +
|
||||
'<div style="font-size:13px;color:#444;line-height:1.7;">' + it.desc + '</div>' +
|
||||
'</div>';
|
||||
}).join('');
|
||||
|
||||
document.getElementById('kd-content').innerHTML =
|
||||
'<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f5f5f5;">' +
|
||||
'<div style="width:48px;height:48px;border-radius:12px;background:' + d.bg + ';display:flex;align-items:center;justify-content:center;font-size:24px;">' + d.icon + '</div>' +
|
||||
'<div><div style="font-size:17px;font-weight:700;color:#1a1a1a;">' + d.title + '</div><div style="font-size:12px;color:#999;margin-top:3px;">' + d.cat + ' · 更新于 ' + d.date + '</div></div>' +
|
||||
'</div>' +
|
||||
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">概述</div>' +
|
||||
'<div style="font-size:14px;color:#444;line-height:1.8;margin-bottom:16px;">' + d.summary + '</div>' +
|
||||
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">主要内容</div>' +
|
||||
itemsHtml;
|
||||
}
|
||||
|
||||
renderDetail();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,153 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.sub-tabs { display: flex; gap: 8px; padding: 10px 16px; background: #fff; flex-shrink: 0; }
|
||||
.sub-tab { font-size: 12px; padding: 4px 14px; border-radius: 16px; background: #f5f5f5; color: #666; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
|
||||
.sub-tab.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; text-decoration: none; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部 -->
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">营养专业参考</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">知识库</div>
|
||||
</div>
|
||||
|
||||
<!-- 子分类Tab -->
|
||||
<div class="sub-tabs">
|
||||
<div class="sub-tab active" onclick="switchKbTab(this,'kb-diet')">膳食营养</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-weight')">减脂控糖</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-chronic')">慢性病营养</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-safe')">食品安全</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 膳食营养 -->
|
||||
<div id="kb-diet">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('pyramid')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🥗</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">中国居民膳食宝塔（2022）</div><div style="font-size:12px;color:#999;margin-top:3px;">五大类食物推荐摄入量与搭配原则</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('macro')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🍚</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">三大营养素摄入指南</div><div style="font-size:12px;color:#999;margin-top:3px;">蛋白质、脂肪、碳水化合物的合理配比</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('vitamin')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🍎</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">维生素与矿物质需求</div><div style="font-size:12px;color:#999;margin-top:3px;">常见微量营养素的食物来源与缺乏症状</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 减脂控糖 -->
|
||||
<div id="kb-weight" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('fatloss')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🏃</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">科学减脂饮食原则</div><div style="font-size:12px;color:#999;margin-top:3px;">热量缺口与营养均衡的减脂方案</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('lowgi')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🍬</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">低 GI 饮食控糖策略</div><div style="font-size:12px;color:#999;margin-top:3px;">低升糖指数食物选择与餐序调整</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 慢性病营养 -->
|
||||
<div id="kb-chronic" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('hyperlipid')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🫀</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">高血脂饮食管理</div><div style="font-size:12px;color:#999;margin-top:3px;">限制饱和脂肪与反式脂肪的摄入</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('uric')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff1f0;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🦴</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">高尿酸人群饮食禁忌</div><div style="font-size:12px;color:#999;margin-top:3px;">嘌呤含量分级与低嘌呤饮食建议</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 食品安全 -->
|
||||
<div id="kb-safe" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('safety')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🧪</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">食品添加剂使用规范</div><div style="font-size:12px;color:#999;margin-top:3px;">常见添加剂的安全性与使用限量</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('trace')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🔍</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">食材溯源与质量安全</div><div style="font-size:12px;color:#999;margin-top:3px;">从田间到餐桌的全链路安全把控</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部Tab栏 -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item" href="../workbench/index.html"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></a>
|
||||
<a class="tab-item active" href="./index.html"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></a>
|
||||
<a class="tab-item" href="../../ai-assistant/index.html"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></a>
|
||||
<a class="tab-item" href="../../message/index.html"><span class="tab-icon">💬</span><span class="tab-label">消息</span><span class="tab-badge">2</span></a>
|
||||
<a class="tab-item" href="../profile/index.html"><span class="tab-icon">👤</span><span class="tab-label">我的</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
/* 切换知识库分类Tab */
|
||||
function switchKbTab(el, panelId) {
|
||||
el.closest('.sub-tabs').querySelectorAll('.sub-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
['kb-diet','kb-weight','kb-chronic','kb-safe'].forEach(function(id) {
|
||||
document.getElementById(id).style.display = id === panelId ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/* 跳转到知识详情页 */
|
||||
function goDetail(key) {
|
||||
window.location.href = './detail.html?key=' + key;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.btn-primary { background: #1677ff; color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">修改密码</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:20px;">
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">当前密码</span>
|
||||
<input type="password" placeholder="请输入当前密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">新密码</span>
|
||||
<input type="password" placeholder="请输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">确认新密码</span>
|
||||
<input type="password" placeholder="再次输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick="openModal('modal-pwd-saved')" class="btn-primary">保存修改</button>
|
||||
</div>
|
||||
|
||||
<div id="modal-pwd-saved" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">修改成功</div>
|
||||
<div class="modal-body">密码已更新，下次登录请使用新密码。</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal('modal-pwd-saved');location.href='./index.html'" style="color:#1677ff;font-weight:600;flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; color: #1677ff; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">个人信息设置</span>
|
||||
<button class="nav-right">保存</button>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<!-- 头像区 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:20px;margin-bottom:12px;text-align:center;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="position:relative;display:inline-block;">
|
||||
<div style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:40px;">🥗</div>
|
||||
<div style="position:absolute;bottom:0;right:0;width:26px;height:26px;background:#1677ff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid #fff;cursor:pointer;">📷</div>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#999;margin-top:10px;">点击更换头像</div>
|
||||
</div>
|
||||
|
||||
<!-- 擅长领域 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">擅长领域</div>
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:16px;">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;">
|
||||
<div onclick="toggleTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#1677ff;color:#fff;border:1px solid #1677ff;cursor:pointer;">减脂</div>
|
||||
<div onclick="toggleTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#1677ff;color:#fff;border:1px solid #1677ff;cursor:pointer;">控糖</div>
|
||||
<div onclick="toggleTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#1677ff;color:#fff;border:1px solid #1677ff;cursor:pointer;">增肌</div>
|
||||
<div onclick="toggleTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;border:1px solid #e8e8e8;cursor:pointer;">高血脂</div>
|
||||
<div onclick="toggleTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;border:1px solid #e8e8e8;cursor:pointer;">高尿酸</div>
|
||||
<div onclick="toggleTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;border:1px solid #e8e8e8;cursor:pointer;">术后营养</div>
|
||||
<div onclick="toggleTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;border:1px solid #e8e8e8;cursor:pointer;">孕期营养</div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#bbb;margin-top:10px;">点击标签切换选中状态</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人简介 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">个人简介</div>
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:16px;">
|
||||
<textarea style="width:100%;border:none;font-size:14px;color:#1a1a1a;outline:none;resize:none;line-height:1.7;background:transparent;" rows="4" placeholder="请输入个人简介...">注册营养师，从事营养健康管理工作 8 年，擅长体重管理、慢性病营养干预与个性化食谱制定，累计服务员工 2000 余人次。</textarea>
|
||||
<div style="text-align:right;font-size:11px;color:#bbb;">已输入 68/300 字</div>
|
||||
</div>
|
||||
|
||||
<!-- 职业经历 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">职业经历</div>
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:20px;">
|
||||
<textarea style="width:100%;border:none;font-size:14px;color:#1a1a1a;outline:none;resize:none;line-height:1.7;background:transparent;" rows="4" placeholder="请描述您的职业经历..."></textarea>
|
||||
<div style="text-align:right;font-size:11px;color:#bbb;">已输入 62/300 字</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
/* 切换擅长领域标签选中状态 */
|
||||
function toggleTag(el) {
|
||||
var isOn = el.style.background === 'rgb(22, 119, 255)' || el.style.background === '#1677ff';
|
||||
el.style.background = isOn ? '#f5f5f5' : '#1677ff';
|
||||
el.style.color = isOn ? '#666' : '#fff';
|
||||
el.style.borderColor = isOn ? '#e8e8e8' : '#1677ff';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,155 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #1677ff; font-weight: 600; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar" style="background:transparent;position:absolute;top:0;left:0;right:0;z-index:10;">
|
||||
<span class="time" style="color:#fff;">9:41</span>
|
||||
<div class="icons" style="color:#fff;"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部 -->
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:30px 20px 24px;flex-shrink:0;padding-top:60px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<div style="width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:34px;border:3px solid rgba(255,255,255,0.5);">🥗</div>
|
||||
<div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">李静</div>
|
||||
<div style="color:rgba(255,255,255,0.8);font-size:13px;margin-top:3px;">注册营养师</div>
|
||||
<div style="color:rgba(255,255,255,0.65);font-size:12px;margin-top:2px;">健康管理科</div>
|
||||
</div>
|
||||
<!-- 服务中按钮 -->
|
||||
<button onclick="togglePause()" id="pause-btn-mine" style="margin-left:auto;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);border-radius:20px;padding:6px 12px;color:#fff;font-size:12px;cursor:pointer;">
|
||||
<span style="width:7px;height:7px;border-radius:50%;background:#52c41a;display:inline-block;"></span><span id="pause-text">咨询已开启</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能列表滚动区域 -->
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:12px;">
|
||||
<div onclick="location.href='./stats.html'" style="display:flex;align-items:center;padding:16px;cursor:pointer;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:18px;margin-right:12px;">📊</span><span style="font-size:15px;color:#1a1a1a;flex:1;">营养咨询统计</span>
|
||||
<span style="font-size:13px;color:#1677ff;margin-right:8px;">今日 12 次</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div onclick="location.href='./schedule.html'" style="display:flex;align-items:center;padding:16px;cursor:pointer;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:18px;margin-right:12px;">📅</span><span style="font-size:15px;color:#1a1a1a;flex:1;">排班设置</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div onclick="location.href='./edit-profile.html'" style="display:flex;align-items:center;padding:16px;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">👤</span><span style="font-size:15px;color:#1a1a1a;flex:1;">个人信息设置</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:12px;">
|
||||
<div onclick="location.href='./change-pwd.html'" style="display:flex;align-items:center;padding:16px;border-bottom:1px solid #f5f5f5;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">🔒</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改密码</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:16px;">
|
||||
<span style="font-size:18px;margin-right:12px;">ℹ️</span><span style="font-size:15px;color:#1a1a1a;flex:1;">关于我们</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick="openModal('modal-logout')" style="width:100%;padding:14px;background:#fff;color:#ff4d4f;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,0.06);">退出登录</button>
|
||||
</div>
|
||||
|
||||
<!-- 退出确认弹窗 -->
|
||||
<div id="modal-logout" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">退出登录</div>
|
||||
<div class="modal-body">确认退出当前账号？</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal('modal-logout')">取消</button>
|
||||
<button onclick="closeModal('modal-logout')" style="color:#ff4d4f;">确认退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 咨询状态切换确认弹窗 -->
|
||||
<div id="modal-pause" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title" id="pause-modal-title">关闭咨询</div>
|
||||
<div class="modal-body" id="pause-modal-body">是否要关闭营养咨询？关闭后，员工无法发起营养咨询。</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal('modal-pause')">取消</button>
|
||||
<button onclick="confirmTogglePause()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部Tab栏，我的为active状态 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="location.href='../workbench/index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
let isPaused = false;
|
||||
|
||||
function togglePause() {
|
||||
var title = isPaused ? '开启咨询' : '关闭咨询';
|
||||
var body = isPaused ? '是否要开启营养咨询？开启后，员工可发起营养咨询。' : '是否要关闭营养咨询？关闭后，员工无法发起营养咨询。';
|
||||
document.getElementById('pause-modal-title').textContent = title;
|
||||
document.getElementById('pause-modal-body').textContent = body;
|
||||
openModal('modal-pause');
|
||||
}
|
||||
|
||||
function confirmTogglePause() {
|
||||
isPaused = !isPaused;
|
||||
var bg = isPaused ? '#ff4d4f' : '#52c41a';
|
||||
var text = isPaused ? '咨询已关闭' : '咨询已开启';
|
||||
var mineBtn = document.getElementById('pause-btn-mine');
|
||||
if (mineBtn) {
|
||||
var dot = mineBtn.querySelector('span');
|
||||
if (dot) dot.style.background = bg;
|
||||
var pauseText = document.getElementById('pause-text');
|
||||
if (pauseText) pauseText.textContent = text;
|
||||
}
|
||||
closeModal('modal-pause');
|
||||
}
|
||||
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,183 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; color: #1677ff; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.toggle { position: relative; width: 44px; height: 24px; border-radius: 12px; background: #e0e0e0; cursor: pointer; transition: background .2s; flex-shrink: 0; }
|
||||
.toggle.on { background: #4cd964; }
|
||||
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
|
||||
.toggle.on::after { transform: translateX(20px); }
|
||||
.day-card { background: #fff; border-radius: 12px; margin: 0 16px 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); overflow: hidden; }
|
||||
.day-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
|
||||
.day-header .day-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.day-header .day-summary { font-size: 12px; color: #999; }
|
||||
.day-header .arrow { width: 16px; height: 16px; color: #ccc; transition: transform .2s; flex-shrink: 0; }
|
||||
.day-header .arrow.open { transform: rotate(180deg); }
|
||||
.day-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
|
||||
.day-body.open { max-height: 400px; }
|
||||
.day-body-inner { padding: 0 16px 14px; }
|
||||
.slot-row { display: flex; align-items: center; padding: 10px 0; border-top: 1px solid #f5f5f5; }
|
||||
.slot-row:first-child { border-top: none; }
|
||||
.slot-info { flex: 1; min-width: 0; }
|
||||
.slot-period { font-size: 11px; color: #1677ff; font-weight: 500; margin-bottom: 1px; }
|
||||
.slot-time { font-size: 13px; color: #1a1a1a; }
|
||||
.slot-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
.slot-toggle { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #e0e0e0; cursor: pointer; transition: background .2s; }
|
||||
.slot-toggle.on { background: #4cd964; }
|
||||
.slot-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
|
||||
.slot-toggle.on::after { transform: translateX(18px); }
|
||||
.slot-count { display: flex; align-items: center; gap: 4px; }
|
||||
.count-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e8e8e8; background: #fff; font-size: 15px; color: #666; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
|
||||
.count-btn:active { background: #f5f5f5; }
|
||||
.count-val { font-size: 15px; font-weight: 700; color: #1677ff; min-width: 18px; text-align: center; }
|
||||
.count-unit { font-size: 11px; color: #999; }
|
||||
.slot-row.disabled .slot-time { color: #ccc; }
|
||||
.slot-row.disabled .slot-period { color: #b8d4ff; }
|
||||
.slot-row.disabled .count-val { color: #ccc; }
|
||||
.slot-row.disabled .count-btn { border-color: #f0f0f0; color: #ccc; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">排班设置</span>
|
||||
<button class="nav-right">保存</button>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- 开启营养咨询 -->
|
||||
<div style="background:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;margin-bottom:10px;">
|
||||
<span style="font-size:14px;color:#1a1a1a;font-weight:500;">开启营养咨询</span>
|
||||
<div class="toggle on" onclick="this.classList.toggle('on');var t=this.nextElementSibling;t.textContent=this.classList.contains('on')?'已开启 — 员工可发起营养咨询':'已关闭';t.style.color=this.classList.contains('on')?'#4cd964':'#999';"></div>
|
||||
<span style="font-size:12px;color:#4cd964;flex:1;">已开启 — 员工可发起营养咨询</span>
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
<div style="padding:2px 16px 10px;display:flex;align-items:center;gap:6px;">
|
||||
<span style="width:3px;height:14px;background:#1677ff;border-radius:2px;display:inline-block;"></span>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">每周排班设置</span>
|
||||
</div>
|
||||
<div id="cardList"></div>
|
||||
<div style="height:20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var DAYS = ['周一','周二','周三','周四','周五','周六','周日'];
|
||||
var SLOTS = [
|
||||
{ period: '上午', time: '8:00 – 10:00' },
|
||||
{ period: '上午', time: '10:00 – 12:00' },
|
||||
{ period: '下午', time: '14:00 – 16:00' },
|
||||
{ period: '下午', time: '16:00 – 18:00' }
|
||||
];
|
||||
var DATA = DAYS.map(function(_, i) {
|
||||
var off = i >= 5;
|
||||
return { slots: SLOTS.map(function(_, si) {
|
||||
return { on: !off, n: off ? 0 : (si < 2 ? 5 : 4) };
|
||||
})};
|
||||
});
|
||||
|
||||
var arrowSvg = '<svg class="arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6l4 4 4-4"/></svg>';
|
||||
|
||||
function getSummary(di) {
|
||||
var d = DATA[di], cnt = 0;
|
||||
d.slots.forEach(function(s) { if (s.on) cnt++; });
|
||||
return cnt > 0 ? cnt + '个时段开诊' : '休息';
|
||||
}
|
||||
|
||||
function render() {
|
||||
var wrap = document.getElementById('cardList');
|
||||
wrap.innerHTML = '';
|
||||
DAYS.forEach(function(day, di) {
|
||||
var card = document.createElement('div');
|
||||
card.className = 'day-card';
|
||||
card.innerHTML =
|
||||
'<div class="day-header" onclick="toggle(' + di + ')">' +
|
||||
'<div><span class="day-name">' + day + '</span> ' +
|
||||
'<span class="day-summary">' + getSummary(di) + '</span></div>' +
|
||||
arrowSvg +
|
||||
'</div>' +
|
||||
'<div class="day-body" id="body-' + di + '">' +
|
||||
'<div class="day-body-inner">' + renderSlots(di) + '</div>' +
|
||||
'</div>';
|
||||
wrap.appendChild(card);
|
||||
});
|
||||
var first = document.getElementById('body-0');
|
||||
if (first) { first.classList.add('open'); first.previousElementSibling.querySelector('.arrow').classList.add('open'); }
|
||||
}
|
||||
|
||||
function renderSlots(di) {
|
||||
var html = '';
|
||||
DATA[di].slots.forEach(function(s, si) {
|
||||
var dis = s.on ? '' : ' disabled';
|
||||
var tCls = s.on ? 'slot-toggle on' : 'slot-toggle';
|
||||
html += '<div class="slot-row' + dis + '">' +
|
||||
'<div class="slot-info">' +
|
||||
'<div class="slot-period">' + SLOTS[si].period + '</div>' +
|
||||
'<div class="slot-time">' + SLOTS[si].time + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="slot-right">' +
|
||||
'<div class="' + tCls + '" onclick="toggleSlot(' + di + ',' + si + ')"></div>' +
|
||||
'<div class="slot-count">' +
|
||||
'<button class="count-btn" ' + (s.on ? '' : 'disabled ') + 'onclick="adj(' + di + ',' + si + ',-1)">−</button>' +
|
||||
'<span class="count-val">' + (s.on ? s.n : '—') + '</span>' +
|
||||
'<button class="count-btn" ' + (s.on ? '' : 'disabled ') + 'onclick="adj(' + di + ',' + si + ',1)">+</button>' +
|
||||
'<span class="count-unit">人</span>' +
|
||||
'</div>' +
|
||||
'</div></div>';
|
||||
});
|
||||
return html;
|
||||
}
|
||||
|
||||
function toggle(di) {
|
||||
var body = document.getElementById('body-' + di);
|
||||
var arrow = body.previousElementSibling.querySelector('.arrow');
|
||||
body.classList.toggle('open');
|
||||
arrow.classList.toggle('open');
|
||||
}
|
||||
|
||||
function toggleSlot(di, si) {
|
||||
var s = DATA[di].slots[si];
|
||||
s.on = !s.on;
|
||||
if (s.on && s.n === 0) s.n = 3;
|
||||
refreshCard(di);
|
||||
}
|
||||
|
||||
function adj(di, si, delta) {
|
||||
var s = DATA[di].slots[si];
|
||||
if (!s.on) return;
|
||||
s.n = Math.max(1, Math.min(20, s.n + delta));
|
||||
refreshCard(di);
|
||||
}
|
||||
|
||||
function refreshCard(di) {
|
||||
var body = document.getElementById('body-' + di);
|
||||
var wasOpen = body.classList.contains('open');
|
||||
body.querySelector('.day-body-inner').innerHTML = renderSlots(di);
|
||||
var header = body.previousElementSibling;
|
||||
header.querySelector('.day-summary').textContent = getSummary(di);
|
||||
if (wasOpen) body.classList.add('open');
|
||||
}
|
||||
|
||||
render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,143 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">营养咨询统计</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
|
||||
<!-- 月度统计 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px;">
|
||||
<button onclick="prevMonth()" style="background:none;border:none;color:#1677ff;font-size:18px;cursor:pointer;padding:4px 8px;">
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 1L1 7l6 6"/></svg>
|
||||
</button>
|
||||
<div style="font-size:17px;font-weight:600;color:#1a1a1a;min-width:120px;text-align:center;" id="current-month">2026年9月</div>
|
||||
<button onclick="nextMonth()" style="background:none;border:none;color:#1677ff;font-size:18px;cursor:pointer;padding:4px 8px;">
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 1l6 6-6 6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 概览（3列） -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:24px;">
|
||||
<div style="flex:1;background:#e6f4ff;border-radius:10px;padding:14px 8px;text-align:center;">
|
||||
<div style="font-size:20px;font-weight:700;color:#1677ff;">213</div>
|
||||
<div style="font-size:11px;color:#666;margin-top:4px;">营养咨询</div>
|
||||
</div>
|
||||
<div style="flex:1;background:#f6ffed;border-radius:10px;padding:14px 8px;text-align:center;">
|
||||
<div style="font-size:20px;font-weight:700;color:#52c41a;">48</div>
|
||||
<div style="font-size:11px;color:#666;margin-top:4px;">营养方案</div>
|
||||
</div>
|
||||
<div style="flex:1;background:#fff7e6;border-radius:10px;padding:14px 8px;text-align:center;">
|
||||
<div style="font-size:20px;font-weight:700;color:#fa8c16;">12</div>
|
||||
<div style="font-size:11px;color:#666;margin-top:4px;">发布食谱</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 咨询主题分布（饼状图） -->
|
||||
<div style="display:flex;align-items:center;gap:24px;margin-bottom:24px;">
|
||||
<svg width="130" height="130" viewBox="0 0 100 100" style="flex-shrink:0;">
|
||||
<circle cx="50" cy="50" r="40" fill="none" stroke="#1677ff" stroke-width="20"
|
||||
stroke-dasharray="126 250" stroke-dashoffset="0" transform="rotate(-90 50 50)"/>
|
||||
<circle cx="50" cy="50" r="40" fill="none" stroke="#52c41a" stroke-width="20"
|
||||
stroke-dasharray="75 250" stroke-dashoffset="-126" transform="rotate(-90 50 50)"/>
|
||||
<circle cx="50" cy="50" r="40" fill="none" stroke="#fa8c16" stroke-width="20"
|
||||
stroke-dasharray="49 250" stroke-dashoffset="-201" transform="rotate(-90 50 50)"/>
|
||||
<circle cx="50" cy="50" r="28" fill="#fff"/>
|
||||
<text x="50" y="48" text-anchor="middle" font-size="18" font-weight="700" fill="#1a1a1a">213</text>
|
||||
<text x="50" y="60" text-anchor="middle" font-size="10" fill="#999">总咨询</text>
|
||||
</svg>
|
||||
|
||||
<div style="flex:1;">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
|
||||
<div style="width:12px;height:12px;background:#1677ff;border-radius:3px;flex-shrink:0;"></div>
|
||||
<div style="flex:1;"><span style="font-size:13px;color:#666;">减脂控糖</span></div>
|
||||
<span style="font-size:15px;font-weight:700;color:#1a1a1a;">107<span style="font-size:11px;color:#999;"> (50%)</span></span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
|
||||
<div style="width:12px;height:12px;background:#52c41a;border-radius:3px;flex-shrink:0;"></div>
|
||||
<div style="flex:1;"><span style="font-size:13px;color:#666;">慢性病营养</span></div>
|
||||
<span style="font-size:15px;font-weight:700;color:#1a1a1a;">64<span style="font-size:11px;color:#999;"> (30%)</span></span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:12px;height:12px;background:#fa8c16;border-radius:3px;flex-shrink:0;"></div>
|
||||
<div style="flex:1;"><span style="font-size:13px;color:#666;">其他</span></div>
|
||||
<span style="font-size:15px;font-weight:700;color:#1a1a1a;">42<span style="font-size:11px;color:#999;"> (20%)</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 月度趋势折线图 -->
|
||||
<div style="border-top:1px solid #f0f0f0;padding-top:20px;">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:16px;">月度趋势</div>
|
||||
<svg width="100%" height="180" viewBox="0 0 340 180" style="overflow:visible;">
|
||||
<line x1="0" y1="150" x2="340" y2="150" stroke="#f0f0f0" stroke-width="1"/>
|
||||
<line x1="0" y1="120" x2="340" y2="120" stroke="#f0f0f0" stroke-width="1"/>
|
||||
<line x1="0" y1="90" x2="340" y2="90" stroke="#f0f0f0" stroke-width="1"/>
|
||||
<line x1="0" y1="60" x2="340" y2="60" stroke="#f0f0f0" stroke-width="1"/>
|
||||
<line x1="0" y1="30" x2="340" y2="30" stroke="#f0f0f0" stroke-width="1"/>
|
||||
|
||||
<polyline points="5,126 27,108 49,90 71,60 93,138 115,48 137,96 159,78 181,114 203,66 225,132 247,90 269,120 291,54 313,144 335,42"
|
||||
fill="none" stroke="#1677ff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<circle cx="93" cy="138" r="3.5" fill="#1677ff"/>
|
||||
<circle cx="159" cy="78" r="3.5" fill="#1677ff"/>
|
||||
<circle cx="203" cy="66" r="6" fill="#1677ff" stroke="#fff" stroke-width="2.5"/>
|
||||
|
||||
<text x="93" y="168" text-anchor="middle" font-size="11" fill="#bbb">6</text>
|
||||
<text x="159" y="168" text-anchor="middle" font-size="11" fill="#bbb">12</text>
|
||||
<text x="203" y="168" text-anchor="middle" font-size="11" fill="#1677ff" font-weight="600">今</text>
|
||||
<text x="335" y="168" text-anchor="middle" font-size="11" fill="#bbb">30</text>
|
||||
|
||||
<text x="203" y="54" text-anchor="middle" font-size="12" fill="#1677ff" font-weight="600">15</text>
|
||||
<text x="-5" y="153" text-anchor="end" font-size="10" fill="#bbb">0</text>
|
||||
<text x="-5" y="123" text-anchor="end" font-size="10" fill="#bbb">5</text>
|
||||
<text x="-5" y="93" text-anchor="end" font-size="10" fill="#bbb">10</text>
|
||||
<text x="-5" y="63" text-anchor="end" font-size="10" fill="#bbb">15</text>
|
||||
<text x="-5" y="33" text-anchor="end" font-size="10" fill="#bbb">20</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
function prevMonth() { alert('切换到上个月（演示）'); }
|
||||
function nextMonth() { alert('切换到下个月（演示）'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">赵磊</span>
|
||||
</div>
|
||||
|
||||
<!-- 咨询已结束提示条 -->
|
||||
<div style="background:#fff7e6;padding:8px 16px;font-size:12px;color:#d46b08;flex-shrink:0;text-align:center;">本次营养咨询已结束，仅可查看历史记录</div>
|
||||
|
||||
<!-- 消息区（只读） -->
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">昨天 08:30</span></div>
|
||||
<!-- 员工消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">赵磊</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">营养师您好，我最近体检尿酸偏高，日常饮食要注意什么？</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 营养师消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🥗</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">李营养师（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">高尿酸人群建议限制高嘌呤食物（动物内脏、海鲜、浓肉汤），避免饮酒，多饮水，每日 2000ml 以上，控制体重。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">昨天 08:45</span></div>
|
||||
<!-- 员工结束消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">赵磊</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">谢谢营养师，方案很实用，我会坚持执行。</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 结束标记 -->
|
||||
<div style="text-align:center;margin:16px 0;">
|
||||
<span style="font-size:12px;color:#bbb;">— 咨询已结束 —</span>
|
||||
</div>
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,328 @@
|
||||
<!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>
|
||||
/* 公共重置与布局 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
/* 导航栏 */
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; color: #ff4d4f; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #1677ff; font-weight: 600; }
|
||||
/* 员工档案卡片 */
|
||||
.bubble-record { max-width: 260px; border-radius: 0 12px 12px 12px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; }
|
||||
.bubble-record__header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(135deg, #e8f4ff, #bae0ff); }
|
||||
.bubble-record__avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
||||
.bubble-record__name { font-size: 13px; font-weight: 600; color: #333; }
|
||||
.bubble-record__meta { font-size: 11px; color: #666; }
|
||||
.bubble-record__body { padding: 10px 12px; }
|
||||
.bubble-record__title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }
|
||||
.bubble-record__desc { font-size: 12px; color: #666; line-height: 1.5; }
|
||||
.bubble-record__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
|
||||
.bubble-record__tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
|
||||
.bubble-record__tag--green { color: #52c41a; background: #f6ffed; }
|
||||
.bubble-record__tag--orange { color: #d46b08; background: #fff7e6; }
|
||||
/* 常用语分类与列表 */
|
||||
.quick-cat { font-size: 12px; padding: 4px 12px; border-radius: 14px; background: #f5f5f5; color: #666; cursor: pointer; user-select: none; transition: all .2s; }
|
||||
.quick-cat.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.quick-item { font-size: 13px; color: #1a1a1a; padding: 8px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
|
||||
.quick-item:last-child { border-bottom: none; }
|
||||
.quick-item:active { color: #1677ff; }
|
||||
/* 快捷操作栏 */
|
||||
.action-bar { display: flex; gap: 8px; background: #fff; border-bottom: 1px solid #f0f0f0; padding: 8px 16px; flex-shrink: 0; }
|
||||
.action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; border-radius: 8px; font-size: 13px; cursor: pointer; }
|
||||
.action-btn--blue { background: #e6f4ff; color: #1677ff; }
|
||||
.action-btn--green { background: #f6ffed; color: #52c41a; }
|
||||
/* 底部弹层 */
|
||||
.sheet-mask { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; align-items: flex-end; justify-content: center; }
|
||||
.sheet-mask.active { display: flex; }
|
||||
.sheet-panel { width: 100%; max-height: 80%; background: #fff; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; overflow: hidden; }
|
||||
.sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 0.5px solid #f0f0f0; flex-shrink: 0; }
|
||||
.sheet-header .s-cancel { font-size: 14px; color: #999; cursor: pointer; background: none; border: none; }
|
||||
.sheet-header .s-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.sheet-header .s-save { font-size: 14px; color: #1677ff; font-weight: 600; cursor: pointer; background: none; border: none; }
|
||||
.sheet-body { padding: 12px 16px 20px; overflow-y: auto; flex: 1; }
|
||||
.sheet-body::-webkit-scrollbar { display: none; }
|
||||
.form-item { margin-bottom: 14px; }
|
||||
.form-item__label { font-size: 13px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.form-input { width: 100%; border: 1px solid #e8e8e8; border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none; color: #1a1a1a; }
|
||||
.form-input:focus { border-color: #1677ff; }
|
||||
.ratio-row { display: flex; gap: 8px; }
|
||||
.ratio-row .form-input { flex: 1; text-align: center; }
|
||||
.tag-picker { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.tag-picker .tag-opt { font-size: 12px; padding: 5px 12px; border-radius: 14px; background: #f5f5f5; color: #666; cursor: pointer; }
|
||||
.tag-picker .tag-opt.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">张小红</span>
|
||||
<!-- [交互] 点击打开结束咨询弹窗 -->
|
||||
<button class="nav-right" onclick="openModal('modal-end-confirm')">结束咨询</button>
|
||||
</div>
|
||||
|
||||
<!-- 快捷操作栏 -->
|
||||
<div class="action-bar">
|
||||
<!-- [交互] 点击跳转至: ./employee-health.html 查看员工健康档案 -->
|
||||
<div class="action-btn action-btn--blue" onclick="location.href='./employee-health.html'">📋 健康档案</div>
|
||||
<!-- [交互] 点击打开制定营养方案弹层 -->
|
||||
<div class="action-btn action-btn--green" onclick="openSheet('sheet-plan')">🎯 制定方案</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="scroll-content" id="chat-scroll" style="padding:12px 16px;">
|
||||
<!-- 时间标记 -->
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:20</span></div>
|
||||
<!-- [交互] 员工营养档案卡片 - 点击查看员工营养详情 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div class="bubble-record" onclick="location.href='./employee-detail.html'">
|
||||
<div class="bubble-record__header">
|
||||
<div class="bubble-record__avatar">👩</div>
|
||||
<div>
|
||||
<div class="bubble-record__name">张小红 · 女 · 32岁</div>
|
||||
<div class="bubble-record__meta">162cm · 67kg · BMI 25.6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bubble-record__body">
|
||||
<div class="bubble-record__title">减脂营养咨询</div>
|
||||
<div class="bubble-record__desc">食堂饭菜偏油，想请教日常减脂怎么搭配饮食</div>
|
||||
<div class="bubble-record__tags">
|
||||
<span class="bubble-record__tag bubble-record__tag--green">目标：减脂 5kg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工消息（左侧） -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">营养师您好，我最近在减脂，但食堂的红烧肉、油炸类菜品偏多，不知道怎么吃才不会超标。</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 时间标记 -->
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:23</span></div>
|
||||
<!-- 营养师消息（右侧） -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🥗</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">李营养师（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">您好，减脂期在食堂就餐建议：主菜优先选清蒸、白灼、凉拌类，肉类选去皮鸡胸、鱼虾；主食粗细搭配，每餐一拳主食、一掌蛋白质、两拳蔬菜。</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 营养师消息：推荐食谱卡片 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🥗</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">李营养师（我）</div>
|
||||
<div style="background:#fff;border-radius:12px 0 12px 12px;padding:10px;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.08);cursor:pointer;" onclick="location.href='./plan-detail.html'">
|
||||
<div style="font-size:12px;color:#999;margin-bottom:6px;">为您推荐个性化营养方案</div>
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;">减脂期一周饮食方案</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:4px;line-height:1.5;">每日热量 1400 kcal · 蛋白质 25% · 脂肪 20% · 碳水 55%</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid #f0f0f0;">
|
||||
<span style="font-size:11px;color:#52c41a;">● 已生成</span>
|
||||
<span style="font-size:12px;color:#1677ff;">查看详情 ›</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 常用语面板 -->
|
||||
<div id="quick-panel" style="display:none;background:#fff;border-top:1px solid #f0f0f0;padding:10px 16px;flex-shrink:0;max-height:200px;overflow-y:auto;">
|
||||
<div style="display:flex;gap:6px;margin-bottom:10px;">
|
||||
<span class="quick-cat active" data-cat="all" onclick="filterQuick(this)">全部</span>
|
||||
<span class="quick-cat" data-cat="greet" onclick="filterQuick(this)">问候语</span>
|
||||
<span class="quick-cat" data-cat="ask" onclick="filterQuick(this)">问询</span>
|
||||
<span class="quick-cat" data-cat="advice" onclick="filterQuick(this)">建议</span>
|
||||
<span class="quick-cat" data-cat="end" onclick="filterQuick(this)">结束语</span>
|
||||
</div>
|
||||
<div id="quick-list">
|
||||
<div class="quick-item" data-cat="greet" onclick="useQuick(this)">您好，我是您的专属营养师</div>
|
||||
<div class="quick-item" data-cat="greet" onclick="useQuick(this)">您好，请描述您的饮食与健康目标</div>
|
||||
<div class="quick-item" data-cat="ask" onclick="useQuick(this)">请问您目前的身高体重是多少？</div>
|
||||
<div class="quick-item" data-cat="ask" onclick="useQuick(this)">是否有高血脂、糖尿病等慢性病史？</div>
|
||||
<div class="quick-item" data-cat="ask" onclick="useQuick(this)">平时主要在食堂就餐还是自带餐？</div>
|
||||
<div class="quick-item" data-cat="advice" onclick="useQuick(this)">建议主食粗细搭配，每餐一拳量</div>
|
||||
<div class="quick-item" data-cat="advice" onclick="useQuick(this)">优先选择清蒸、白灼类菜品</div>
|
||||
<div class="quick-item" data-cat="advice" onclick="useQuick(this)">控制油脂摄入，每日不超过 25g</div>
|
||||
<div class="quick-item" data-cat="end" onclick="useQuick(this)">如有不适请及时调整并反馈</div>
|
||||
<div class="quick-item" data-cat="end" onclick="useQuick(this)">祝您健康，欢迎随时咨询！</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区 -->
|
||||
<div style="background:#fff;border-top:1px solid #f0f0f0;padding:8px 12px 14px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<button onclick="toggleQuick()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;flex-shrink:0;">⚡</button>
|
||||
<button id="voice-btn" onclick="toggleVoice()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;flex-shrink:0;">🎤</button>
|
||||
<input id="chat-input" type="text" placeholder="输入营养建议..." style="flex:1;background:#f5f5f5;border:none;border-radius:20px;padding:8px 14px;font-size:14px;outline:none;color:#1a1a1a;" />
|
||||
<button id="voice-record-btn" style="display:none;flex:1;height:36px;background:#f5f5f5;border:1.5px solid #d9d9d9;border-radius:20px;font-size:13px;color:#555;cursor:pointer;text-align:center;align-items:center;justify-content:center;letter-spacing:1px;">按住说话</button>
|
||||
<button onclick="sendMsg()" style="width:34px;height:34px;border-radius:50%;background:#1677ff;border:none;font-size:16px;cursor:pointer;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;">➤</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结束咨询确认弹窗 -->
|
||||
<div id="modal-end-confirm" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">结束咨询</div>
|
||||
<div class="modal-body">确认结束与张小红的营养咨询？结束后将无法继续发送消息。</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal('modal-end-confirm')">取消</button>
|
||||
<button onclick="closeModal('modal-end-confirm');location.href='./index.html'">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 制定营养方案底部弹层 -->
|
||||
<div id="sheet-plan" class="sheet-mask" onclick="if(event.target===this)closeSheet('sheet-plan')">
|
||||
<div class="sheet-panel" onclick="event.stopPropagation()">
|
||||
<div class="sheet-header">
|
||||
<button class="s-cancel" onclick="closeSheet('sheet-plan')">取消</button>
|
||||
<span class="s-title">为张小红制定营养方案</span>
|
||||
<button class="s-save" onclick="savePlan()">保存</button>
|
||||
</div>
|
||||
<div class="sheet-body">
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">目标热量（kcal/日）</div>
|
||||
<input class="form-input" type="text" value="1400" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">三大营养素占比（%）</div>
|
||||
<div class="ratio-row">
|
||||
<input class="form-input" type="text" value="25" placeholder="蛋白" />
|
||||
<input class="form-input" type="text" value="20" placeholder="脂肪" />
|
||||
<input class="form-input" type="text" value="55" placeholder="碳水" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">饮食禁忌</div>
|
||||
<div class="tag-picker">
|
||||
<span class="tag-opt active" onclick="toggleTag(this)">高糖</span>
|
||||
<span class="tag-opt active" onclick="toggleTag(this)">高脂</span>
|
||||
<span class="tag-opt" onclick="toggleTag(this)">高盐</span>
|
||||
<span class="tag-opt active" onclick="toggleTag(this)">高嘌呤</span>
|
||||
<span class="tag-opt" onclick="toggleTag(this)">乳糖</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">目标描述</div>
|
||||
<input class="form-input" type="text" value="减脂 5kg，控制尿酸" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
|
||||
/* 切换常用语面板 */
|
||||
function toggleQuick() {
|
||||
var p = document.getElementById('quick-panel');
|
||||
p.style.display = p.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
/* 语音模式状态 */
|
||||
var isVoiceMode = false;
|
||||
function toggleVoice() {
|
||||
isVoiceMode = !isVoiceMode;
|
||||
var input = document.getElementById('chat-input');
|
||||
var voiceBtn = document.getElementById('voice-btn');
|
||||
var recordBtn = document.getElementById('voice-record-btn');
|
||||
if (isVoiceMode) {
|
||||
input.style.display = 'none';
|
||||
recordBtn.style.display = 'flex';
|
||||
voiceBtn.textContent = '⌨️';
|
||||
voiceBtn.style.background = '#e6f4ff';
|
||||
} else {
|
||||
input.style.display = '';
|
||||
recordBtn.style.display = 'none';
|
||||
voiceBtn.textContent = '🎤';
|
||||
voiceBtn.style.background = '#f5f5f5';
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用常用语填充输入框 */
|
||||
function useQuick(el) {
|
||||
document.getElementById('chat-input').value = el.textContent;
|
||||
document.getElementById('quick-panel').style.display = 'none';
|
||||
}
|
||||
|
||||
/* 常用语分类筛选 */
|
||||
function filterQuick(tab) {
|
||||
tab.parentElement.querySelectorAll('.quick-cat').forEach(function(t) { t.classList.remove('active'); });
|
||||
tab.classList.add('active');
|
||||
var cat = tab.dataset.cat;
|
||||
document.querySelectorAll('#quick-list .quick-item').forEach(function(item) {
|
||||
item.style.display = (cat === 'all' || item.dataset.cat === cat) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/* 发送消息，在聊天区追加一条营养师消息气泡 */
|
||||
function sendMsg() {
|
||||
var input = document.getElementById('chat-input');
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
var scroll = document.getElementById('chat-scroll');
|
||||
var bubble = document.createElement('div');
|
||||
bubble.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
|
||||
bubble.innerHTML = '<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🥗</div><div style="display:flex;flex-direction:column;align-items:flex-end;"><div style="font-size:11px;color:#999;margin-bottom:4px;">李营养师（我）</div><div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">' + text + '</div></div>';
|
||||
scroll.insertBefore(bubble, scroll.lastElementChild);
|
||||
input.value = '';
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
}
|
||||
|
||||
/* 打开底部弹层 */
|
||||
function openSheet(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
/* 关闭底部弹层 */
|
||||
function closeSheet(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
/* 禁忌标签选择 */
|
||||
function toggleTag(el) { el.classList.toggle('active'); }
|
||||
/* 保存方案并关闭弹层 */
|
||||
function savePlan() {
|
||||
closeSheet('sheet-plan');
|
||||
alert('营养方案已保存，系统将自动生成一周专属食谱并推送至员工端（原型演示）');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,249 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #f7f8fa; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; position: relative; }
|
||||
.nav-back { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 员工信息头 */
|
||||
.emp-header { background: linear-gradient(135deg,#1677ff,#0958d9); padding: 16px 20px; color: #fff; }
|
||||
.emp-header__name { font-size: 18px; font-weight: 700; }
|
||||
.emp-header__meta { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 4px; }
|
||||
.emp-header__tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
|
||||
.emp-header__tag { font-size: 11px; padding: 3px 10px; border-radius: 12px; background: rgba(255,255,255,0.2); }
|
||||
/* 区块卡片 */
|
||||
.card { background: #fff; border-radius: 12px; margin: 10px 12px 0; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.card__title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.card__title-extra { font-size: 12px; color: #1677ff; font-weight: 400; cursor: pointer; }
|
||||
/* 达标概览 */
|
||||
.overview-row { display: flex; }
|
||||
.overview-item { flex: 1; text-align: center; }
|
||||
.overview-item + .overview-item { border-left: 1px solid #f0f0f0; }
|
||||
.overview-item__val { font-size: 18px; font-weight: 700; }
|
||||
.overview-item__val--good { color: #52c41a; }
|
||||
.overview-item__val--bad { color: #ff4d4f; }
|
||||
.overview-item__label { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
/* 膳食宝塔 */
|
||||
.pyramid { display: flex; flex-direction: column; gap: 6px; }
|
||||
.pyramid-row { display: flex; align-items: center; gap: 8px; }
|
||||
.pyramid-row__label { width: 56px; font-size: 12px; color: #666; flex-shrink: 0; }
|
||||
.pyramid-row__bar { flex: 1; height: 10px; background: #f0f0f0; border-radius: 5px; overflow: hidden; }
|
||||
.pyramid-row__fill { height: 100%; border-radius: 5px; }
|
||||
.pyramid-row__val { width: 40px; font-size: 11px; color: #999; text-align: right; flex-shrink: 0; }
|
||||
/* 摄入明细 */
|
||||
.meal-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
|
||||
.meal-row:last-child { border-bottom: none; }
|
||||
.meal-row__left { display: flex; align-items: center; gap: 8px; }
|
||||
.meal-row__icon { font-size: 18px; }
|
||||
.meal-row__name { font-size: 14px; color: #1a1a1a; font-weight: 500; }
|
||||
.meal-row__kcal { font-size: 14px; font-weight: 700; color: #fa8c16; }
|
||||
.meal-row__kcal span { font-size: 11px; font-weight: 400; color: #999; }
|
||||
/* 营养方案 */
|
||||
.plan-box { background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 10px; padding: 12px; }
|
||||
.plan-box__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.plan-box__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.plan-box__status { font-size: 11px; color: #52c41a; font-weight: 600; }
|
||||
.plan-box__row { display: flex; justify-content: space-between; font-size: 12px; color: #666; padding: 3px 0; }
|
||||
.plan-box__row .val { color: #333; font-weight: 600; }
|
||||
/* 方案编辑表单 */
|
||||
.plan-form { background: #fff; border-radius: 12px; margin: 10px 12px 0; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.form-item { margin-bottom: 14px; }
|
||||
.form-item__label { font-size: 13px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.form-input { width: 100%; border: 1px solid #e8e8e8; border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none; color: #1a1a1a; }
|
||||
.form-input:focus { border-color: #1677ff; }
|
||||
.ratio-row { display: flex; gap: 8px; }
|
||||
.ratio-row .form-input { flex: 1; text-align: center; }
|
||||
.tag-picker { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.tag-picker .tag-opt { font-size: 12px; padding: 5px 12px; border-radius: 14px; background: #f5f5f5; color: #666; cursor: pointer; }
|
||||
.tag-picker .tag-opt.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.btn-primary { width: 100%; padding: 12px; background: #1677ff; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
.btn-ghost { width: 100%; padding: 12px; background: #fff; color: #1677ff; border: 1px solid #1677ff; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #1677ff; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<button class="nav-back" onclick="location.href='./employee-list.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">员工营养详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 员工信息头 -->
|
||||
<div class="emp-header">
|
||||
<div style="display:flex;justify-content:space-between;align-items:flex-start;">
|
||||
<div>
|
||||
<div class="emp-header__name">张小红</div>
|
||||
<div class="emp-header__meta">女 · 32岁 · 公司机关 · 办公室 · 162cm · 67.2kg · BMI 25.6</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./employee-health.html 查看员工健康档案 -->
|
||||
<button onclick="location.href='./employee-health.html'" style="display:flex;align-items:center;gap:4px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);border-radius:16px;padding:6px 12px;color:#fff;font-size:12px;cursor:pointer;flex-shrink:0;">📋 健康档案</button>
|
||||
</div>
|
||||
<div class="emp-header__tags">
|
||||
<span class="emp-header__tag">减脂需求</span>
|
||||
<span class="emp-header__tag">轻体力活动</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养达标概览 -->
|
||||
<div class="card">
|
||||
<div class="card__title">营养达标概览</div>
|
||||
<div class="overview-row">
|
||||
<div class="overview-item"><div class="overview-item__val overview-item__val--bad">68%</div><div class="overview-item__label">综合达标率</div></div>
|
||||
<div class="overview-item"><div class="overview-item__val">22</div><div class="overview-item__label">本月用餐天数</div></div>
|
||||
<div class="overview-item"><div class="overview-item__val">1890</div><div class="overview-item__label">日均摄入(kcal)</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 膳食宝塔评估 -->
|
||||
<div class="card">
|
||||
<div class="card__title">膳食宝塔评估</div>
|
||||
<div class="pyramid">
|
||||
<div class="pyramid-row"><span class="pyramid-row__label">谷薯类</span><div class="pyramid-row__bar"><div class="pyramid-row__fill" style="width:82%;background:#52c41a;"></div></div><span class="pyramid-row__val">82%</span></div>
|
||||
<div class="pyramid-row"><span class="pyramid-row__label">蔬菜水果</span><div class="pyramid-row__bar"><div class="pyramid-row__fill" style="width:45%;background:#fa8c16;"></div></div><span class="pyramid-row__val">45%</span></div>
|
||||
<div class="pyramid-row"><span class="pyramid-row__label">畜禽鱼蛋</span><div class="pyramid-row__bar"><div class="pyramid-row__fill" style="width:110%;background:#ff4d4f;"></div></div><span class="pyramid-row__val">110%</span></div>
|
||||
<div class="pyramid-row"><span class="pyramid-row__label">奶豆坚果</span><div class="pyramid-row__bar"><div class="pyramid-row__fill" style="width:38%;background:#fa8c16;"></div></div><span class="pyramid-row__val">38%</span></div>
|
||||
<div class="pyramid-row"><span class="pyramid-row__label">油盐</span><div class="pyramid-row__bar"><div class="pyramid-row__fill" style="width:135%;background:#ff4d4f;"></div></div><span class="pyramid-row__val">135%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 今日摄入明细 -->
|
||||
<div class="card">
|
||||
<div class="card__title">今日摄入明细<span class="card__title-extra" onclick="location.href='./employee-diet-history.html'">查看历史 ›</span></div>
|
||||
<div class="meal-row"><div class="meal-row__left"><span class="meal-row__icon">🥣</span><span class="meal-row__name">早餐</span></div><div class="meal-row__kcal">486 <span>kcal</span></div></div>
|
||||
<div class="meal-row"><div class="meal-row__left"><span class="meal-row__icon">🍱</span><span class="meal-row__name">午餐</span></div><div class="meal-row__kcal">720 <span>kcal</span></div></div>
|
||||
<div class="meal-row"><div class="meal-row__left"><span class="meal-row__icon">🍎</span><span class="meal-row__name">加餐</span></div><div class="meal-row__kcal">185 <span>kcal</span></div></div>
|
||||
<div class="meal-row"><div class="meal-row__left"><span class="meal-row__icon">🍽️</span><span class="meal-row__name">晚餐</span></div><div class="meal-row__kcal">560 <span>kcal</span></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 营养方案 -->
|
||||
<div class="card">
|
||||
<div class="card__title">营养方案</div>
|
||||
<div class="plan-box" id="plan-box">
|
||||
<div class="plan-box__head">
|
||||
<span class="plan-box__name">减脂期一周饮食方案</span>
|
||||
<span class="plan-box__status">执行中</span>
|
||||
</div>
|
||||
<div class="plan-box__row"><span>目标热量</span><span class="val">1400 kcal/日</span></div>
|
||||
<div class="plan-box__row"><span>蛋白质 : 脂肪 : 碳水</span><span class="val">25% : 20% : 55%</span></div>
|
||||
<div class="plan-box__row"><span>饮食禁忌</span><span class="val">高糖 · 高脂</span></div>
|
||||
<div class="plan-box__row"><span>执行进度</span><span class="val">第 3 天 / 7 天</span></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;margin-top:12px;">
|
||||
<!-- [交互] 点击跳转至: ./plan-detail.html 查看方案详情 -->
|
||||
<button onclick="location.href='./plan-detail.html'" style="flex:1;padding:12px;background:#fff;color:#1677ff;border:1px solid #1677ff;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;">查看详情</button>
|
||||
<!-- [交互] 点击展开方案编辑表单 -->
|
||||
<button onclick="togglePlanForm()" style="flex:1;padding:12px;background:#1677ff;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;">调整方案</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 方案编辑表单 -->
|
||||
<div class="plan-form" id="plan-form" style="display:none;">
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">目标热量（kcal/日）</div>
|
||||
<input class="form-input" type="text" value="1400" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">三大营养素占比（%）</div>
|
||||
<div class="ratio-row">
|
||||
<input class="form-input" type="text" value="25" placeholder="蛋白" />
|
||||
<input class="form-input" type="text" value="20" placeholder="脂肪" />
|
||||
<input class="form-input" type="text" value="55" placeholder="碳水" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">饮食禁忌</div>
|
||||
<div class="tag-picker">
|
||||
<span class="tag-opt active" onclick="toggleTag(this)">高糖</span>
|
||||
<span class="tag-opt active" onclick="toggleTag(this)">高脂</span>
|
||||
<span class="tag-opt" onclick="toggleTag(this)">高盐</span>
|
||||
<span class="tag-opt" onclick="toggleTag(this)">高嘌呤</span>
|
||||
<span class="tag-opt" onclick="toggleTag(this)">乳糖</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">目标描述</div>
|
||||
<input class="form-input" type="text" value="减脂 5kg，控制体脂率" />
|
||||
</div>
|
||||
<!-- [交互] 点击保存方案 -->
|
||||
<button class="btn-primary" onclick="savePlan()">保存方案</button>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 保存成功弹窗 -->
|
||||
<div id="modal-saved" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">保存成功</div>
|
||||
<div class="modal-body">营养方案已保存，系统将自动生成一周专属食谱并推送至员工端小程序。</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal('modal-saved')">知道了</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
/* 展开/收起方案编辑表单 */
|
||||
function togglePlanForm() {
|
||||
var form = document.getElementById('plan-form');
|
||||
var isHidden = form.style.display === 'none';
|
||||
form.style.display = isHidden ? 'block' : 'none';
|
||||
if (isHidden) {
|
||||
/* 展开后自动滚动到表单位置，避免表单在视口外用户看不到 */
|
||||
setTimeout(function() {
|
||||
form.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
|
||||
/* 禁忌标签选择 */
|
||||
function toggleTag(el) {
|
||||
el.classList.toggle('active');
|
||||
}
|
||||
|
||||
/* 保存方案 */
|
||||
function savePlan() {
|
||||
document.getElementById('plan-form').style.display = 'none';
|
||||
openModal('modal-saved');
|
||||
}
|
||||
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,284 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #f7f8fa; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; position: relative; }
|
||||
.nav-back { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 员工信息 */
|
||||
.emp-info { background: linear-gradient(135deg,#1677ff,#0958d9); padding: 14px 20px; color: #fff; display: flex; align-items: center; gap: 12px; }
|
||||
.emp-info__avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.25); border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.emp-info__name { font-size: 16px; font-weight: 700; }
|
||||
.emp-info__meta { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 2px; }
|
||||
/* 日期导航 */
|
||||
.date-nav { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #f0f0f0; position: relative; flex-shrink: 0; }
|
||||
.date-nav__arrow { width: 32px; height: 32px; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; color: #666; font-size: 16px; flex-shrink: 0; }
|
||||
.date-nav__arrow:active { background: #e6f4ff; }
|
||||
.date-nav__text { font-size: 15px; font-weight: 600; color: #1a1a1a; min-width: 110px; text-align: center; }
|
||||
.date-nav__cal { width: 28px; height: 28px; border-radius: 6px; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; font-size: 16px; flex-shrink: 0; color: #1677ff; }
|
||||
/* 日历面板 */
|
||||
.cal-panel { display: none; position: absolute; top: 42px; left: 16px; right: 16px; background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); z-index: 100; padding: 16px; }
|
||||
.cal-panel.active { display: block; }
|
||||
.cal-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.cal-panel__month { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.cal-panel__nav { width: 28px; height: 28px; border-radius: 50%; border: none; background: #f5f5f5; cursor: pointer; font-size: 14px; color: #666; display: flex; align-items: center; justify-content: center; }
|
||||
.cal-panel__weekdays { display: flex; margin-bottom: 6px; }
|
||||
.cal-panel__weekday { flex: 1; text-align: center; font-size: 11px; color: #999; padding: 4px 0; }
|
||||
.cal-panel__grid { display: flex; flex-wrap: wrap; }
|
||||
.cal-panel__day { width: calc(100% / 7); text-align: center; padding: 8px 0; font-size: 13px; color: #333; cursor: pointer; border-radius: 8px; }
|
||||
.cal-panel__day--other { color: #ddd; }
|
||||
.cal-panel__day:hover { background: #f5f5f5; }
|
||||
.cal-panel__day--today { font-weight: 700; color: #1677ff; }
|
||||
.cal-panel__day--selected { background: #1677ff; color: #fff; font-weight: 700; }
|
||||
/* 摄入汇总 */
|
||||
.summary-card { background: #fff; border-radius: 12px; margin: 10px 12px 0; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.summary-card__title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
|
||||
.summary-row { display: flex; }
|
||||
.summary-item { flex: 1; text-align: center; }
|
||||
.summary-item + .summary-item { border-left: 1px solid #f0f0f0; }
|
||||
.summary-item__val { font-size: 18px; font-weight: 700; }
|
||||
.summary-item__val--over { color: #ff4d4f; }
|
||||
.summary-item__val--ok { color: #52c41a; }
|
||||
.summary-item__label { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
/* 三餐明细 */
|
||||
.section-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 14px 12px 6px; }
|
||||
.meal-card { background: #fff; border-radius: 12px; margin: 8px 12px 0; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.meal-card__head { display: flex; align-items: center; margin-bottom: 8px; }
|
||||
.meal-card__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.meal-card__time { font-size: 12px; color: #999; margin-left: 8px; }
|
||||
.meal-card__kcal { margin-left: auto; font-size: 15px; font-weight: 700; color: #fa8c16; }
|
||||
.meal-card__kcal span { font-size: 11px; font-weight: 400; color: #999; }
|
||||
.meal-card__foods { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.food-tag { font-size: 12px; padding: 4px 10px; border-radius: 12px; background: #f0f6ff; color: #1677ff; }
|
||||
.meal-card__source { margin-top: 8px; font-size: 11px; color: #999; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-purple { background: #f9f0ff; color: #722ed1; }
|
||||
/* 空状态 */
|
||||
.empty-state { text-align: center; padding: 40px 0; color: #bbb; font-size: 13px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<button class="nav-back" onclick="location.href='./employee-detail.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">饮食记录</span>
|
||||
</div>
|
||||
|
||||
<!-- 员工信息 -->
|
||||
<div class="emp-info">
|
||||
<div class="emp-info__avatar">👩</div>
|
||||
<div>
|
||||
<div class="emp-info__name">张小红</div>
|
||||
<div class="emp-info__meta">女 · 32岁 · 公司机关 · 办公室</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日期导航 -->
|
||||
<div class="date-nav">
|
||||
<button class="date-nav__arrow" onclick="changeDate(-1)">‹</button>
|
||||
<button class="date-nav__cal" onclick="toggleCalPanel()">📅</button>
|
||||
<span class="date-nav__text" id="dateText">2026-06-22</span>
|
||||
<button class="date-nav__arrow" onclick="changeDate(1)">›</button>
|
||||
<!-- 日历选择面板 -->
|
||||
<div class="cal-panel" id="calPanel">
|
||||
<div class="cal-panel__head">
|
||||
<button class="cal-panel__nav" onclick="calPrevMonth(event)">‹</button>
|
||||
<span class="cal-panel__month" id="calMonthLabel">2026年6月</span>
|
||||
<button class="cal-panel__nav" onclick="calNextMonth(event)">›</button>
|
||||
</div>
|
||||
<div class="cal-panel__weekdays">
|
||||
<div class="cal-panel__weekday">日</div><div class="cal-panel__weekday">一</div><div class="cal-panel__weekday">二</div><div class="cal-panel__weekday">三</div><div class="cal-panel__weekday">四</div><div class="cal-panel__weekday">五</div><div class="cal-panel__weekday">六</div>
|
||||
</div>
|
||||
<div class="cal-panel__grid" id="calGrid"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 摄入汇总 -->
|
||||
<div class="summary-card" id="summary-card">
|
||||
<div class="summary-card__title">每日摄入汇总</div>
|
||||
<div class="summary-row" id="summary-row"></div>
|
||||
</div>
|
||||
|
||||
<!-- 当日三餐明细 -->
|
||||
<div class="section-title">当日三餐明细</div>
|
||||
<div id="meal-list"></div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
/* ===== 饮食记录历史数据 ===== */
|
||||
var DIET_HISTORY = {
|
||||
'2026-06-22': {
|
||||
target: 1400,
|
||||
meals: [
|
||||
{ icon: '🥣', name: '早餐', time: '07:30', kcal: 486, source: '智记', cls: 'tag-blue', foods: ['全麦面包 80g', '水煮蛋 60g', '牛奶 250ml'] },
|
||||
{ icon: '🍱', name: '午餐', time: '12:15', kcal: 720, source: '智记', cls: 'tag-blue', foods: ['清蒸鲈鱼 150g', '杂粮饭 200g', '蒜蓉西兰花 150g'] },
|
||||
{ icon: '🍎', name: '加餐', time: '15:40', kcal: 185, source: '自记', cls: 'tag-purple', foods: ['苹果 1个', '坚果 30g'] },
|
||||
{ icon: '🍽️', name: '晚餐', time: '18:30', kcal: 560, source: '智记', cls: 'tag-blue', foods: ['香煎鸡胸 120g', '蔬菜沙拉 200g', '小米粥 200g'] }
|
||||
]
|
||||
},
|
||||
'2026-06-21': {
|
||||
target: 1400,
|
||||
meals: [
|
||||
{ icon: '🥣', name: '早餐', time: '07:42', kcal: 450, source: '智记', cls: 'tag-blue', foods: ['燕麦牛奶 300ml', '水煮蛋 60g'] },
|
||||
{ icon: '🍱', name: '午餐', time: '12:08', kcal: 680, source: '智记', cls: 'tag-blue', foods: ['白灼虾 150g', '糙米饭 200g', '清炒时蔬 150g'] },
|
||||
{ icon: '🍎', name: '加餐', time: '15:30', kcal: 120, source: '自记', cls: 'tag-purple', foods: ['酸奶 1杯'] },
|
||||
{ icon: '🍽️', name: '晚餐', time: '18:45', kcal: 520, source: '智记', cls: 'tag-blue', foods: ['蔬菜豆腐汤 300g', '杂粮馒头 100g'] }
|
||||
]
|
||||
},
|
||||
'2026-06-20': {
|
||||
target: 1400,
|
||||
meals: [
|
||||
{ icon: '🥣', name: '早餐', time: '07:35', kcal: 470, source: '智记', cls: 'tag-blue', foods: ['水煮蛋 60g', '豆浆 250ml', '蒸红薯 100g'] },
|
||||
{ icon: '🍱', name: '午餐', time: '12:20', kcal: 660, source: '智记', cls: 'tag-blue', foods: ['卤牛肉 100g', '荞麦面 200g', '凉拌黄瓜 150g'] },
|
||||
{ icon: '🍽️', name: '晚餐', time: '18:20', kcal: 540, source: '智记', cls: 'tag-blue', foods: ['清炒时蔬 200g', '玉米 150g', '菌菇汤 200g'] }
|
||||
]
|
||||
},
|
||||
'2026-06-19': {
|
||||
target: 1400,
|
||||
meals: [
|
||||
{ icon: '🥣', name: '早餐', time: '07:50', kcal: 430, source: '智记', cls: 'tag-blue', foods: ['杂粮粥 300g', '水煮蛋 60g'] },
|
||||
{ icon: '🍱', name: '午餐', time: '12:10', kcal: 700, source: '智记', cls: 'tag-blue', foods: ['香煎鸡胸 150g', '藜麦饭 150g', '西兰花 150g'] },
|
||||
{ icon: '🍎', name: '加餐', time: '16:00', kcal: 150, source: '自记', cls: 'tag-purple', foods: ['虾仁沙拉 200g'] },
|
||||
{ icon: '🍽️', name: '晚餐', time: '18:40', kcal: 480, source: '智记', cls: 'tag-blue', foods: ['蔬菜沙拉 200g', '全麦面包 50g'] }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var currentDate = new Date(2026, 5, 22);
|
||||
var calViewYear = currentDate.getFullYear();
|
||||
var calViewMonth = currentDate.getMonth();
|
||||
|
||||
/* 计算某天总摄入 */
|
||||
function dayTotal(data) {
|
||||
return data.meals.reduce(function(s, m) { return s + m.kcal; }, 0);
|
||||
}
|
||||
|
||||
/* 格式化日期为 YYYY-MM-DD */
|
||||
function fmtDate(d) {
|
||||
var y = d.getFullYear();
|
||||
var m = String(d.getMonth() + 1).padStart(2, '0');
|
||||
var day = String(d.getDate()).padStart(2, '0');
|
||||
return y + '-' + m + '-' + day;
|
||||
}
|
||||
|
||||
/* 渲染当前日期的饮食记录 */
|
||||
function render() {
|
||||
var key = fmtDate(currentDate);
|
||||
document.getElementById('dateText').textContent = key;
|
||||
var data = DIET_HISTORY[key];
|
||||
|
||||
if (!data) {
|
||||
document.getElementById('summary-card').style.display = 'none';
|
||||
document.getElementById('meal-list').innerHTML = '<div class="empty-state">当日暂无饮食记录</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('summary-card').style.display = 'block';
|
||||
var total = dayTotal(data);
|
||||
var diff = total - data.target;
|
||||
var diffText = diff > 0 ? '+' + diff : diff;
|
||||
var diffCls = diff > 0 ? 'summary-item__val--over' : 'summary-item__val--ok';
|
||||
|
||||
document.getElementById('summary-row').innerHTML =
|
||||
'<div class="summary-item"><div class="summary-item__val" style="color:#1677ff;">' + total + '</div><div class="summary-item__label">总摄入 kcal</div></div>' +
|
||||
'<div class="summary-item"><div class="summary-item__val" style="color:#333;">' + data.target + '</div><div class="summary-item__label">目标 kcal</div></div>' +
|
||||
'<div class="summary-item"><div class="summary-item__val ' + diffCls + '">' + diffText + '</div><div class="summary-item__label">与目标差值</div></div>';
|
||||
|
||||
var mealsHtml = data.meals.map(function(m) {
|
||||
var foodsHtml = m.foods.map(function(f) {
|
||||
return '<span class="food-tag">' + f + '</span>';
|
||||
}).join('');
|
||||
return '<div class="meal-card">' +
|
||||
'<div class="meal-card__head"><span class="meal-card__name">' + m.icon + ' ' + m.name + '</span><span class="meal-card__time">' + m.time + '</span><span class="meal-card__kcal">' + m.kcal + ' <span>kcal</span></span></div>' +
|
||||
'<div class="meal-card__foods">' + foodsHtml + '</div>' +
|
||||
'<div class="meal-card__source"><span class="tag ' + m.cls + '">' + m.source + '</span></div>' +
|
||||
'</div>';
|
||||
}).join('');
|
||||
document.getElementById('meal-list').innerHTML = mealsHtml;
|
||||
}
|
||||
|
||||
/* 切换日期 */
|
||||
function changeDate(delta) {
|
||||
currentDate.setDate(currentDate.getDate() + delta);
|
||||
calViewYear = currentDate.getFullYear();
|
||||
calViewMonth = currentDate.getMonth();
|
||||
render();
|
||||
}
|
||||
|
||||
/* 日历面板 */
|
||||
function toggleCalPanel() {
|
||||
var panel = document.getElementById('calPanel');
|
||||
if (panel.classList.contains('active')) { panel.classList.remove('active'); return; }
|
||||
calViewYear = currentDate.getFullYear();
|
||||
calViewMonth = currentDate.getMonth();
|
||||
renderCal();
|
||||
panel.classList.add('active');
|
||||
}
|
||||
function calPrevMonth(e) { e.stopPropagation(); calViewMonth--; if (calViewMonth < 0) { calViewMonth = 11; calViewYear--; } renderCal(); }
|
||||
function calNextMonth(e) { e.stopPropagation(); calViewMonth++; if (calViewMonth > 11) { calViewMonth = 0; calViewYear++; } renderCal(); }
|
||||
|
||||
function renderCal() {
|
||||
document.getElementById('calMonthLabel').textContent = calViewYear + '年' + (calViewMonth + 1) + '月';
|
||||
var firstDay = new Date(calViewYear, calViewMonth, 1).getDay();
|
||||
var daysInMonth = new Date(calViewYear, calViewMonth + 1, 0).getDate();
|
||||
var today = new Date(2026, 5, 22);
|
||||
var html = '';
|
||||
for (var i = 0; i < firstDay; i++) { html += '<div class="cal-panel__day cal-panel__day--other"></div>'; }
|
||||
for (var d = 1; d <= daysInMonth; d++) {
|
||||
var cls = 'cal-panel__day';
|
||||
if (calViewYear === today.getFullYear() && calViewMonth === today.getMonth() && d === today.getDate()) cls += ' cal-panel__day--today';
|
||||
if (calViewYear === currentDate.getFullYear() && calViewMonth === currentDate.getMonth() && d === currentDate.getDate()) cls += ' cal-panel__day--selected';
|
||||
html += '<div class="' + cls + '" onclick="selectCalDay(event,' + d + ')">' + d + '</div>';
|
||||
}
|
||||
document.getElementById('calGrid').innerHTML = html;
|
||||
}
|
||||
|
||||
function selectCalDay(e, day) {
|
||||
e.stopPropagation();
|
||||
currentDate = new Date(calViewYear, calViewMonth, day);
|
||||
calViewYear = currentDate.getFullYear();
|
||||
calViewMonth = currentDate.getMonth();
|
||||
render();
|
||||
document.getElementById('calPanel').classList.remove('active');
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.date-nav') && !e.target.closest('.cal-panel')) {
|
||||
document.getElementById('calPanel').classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
/* 初始化渲染 */
|
||||
render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,269 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #f7f8fa; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; position: relative; }
|
||||
.nav-back { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 员工卡片 */
|
||||
.emp-card { background: linear-gradient(135deg,#1677ff,#0958d9); padding: 16px 20px; color: #fff; }
|
||||
.emp-card__row { display: flex; align-items: center; gap: 12px; }
|
||||
.emp-card__avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.25); border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
|
||||
.emp-card__name { font-size: 18px; font-weight: 700; }
|
||||
.emp-card__meta { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 2px; }
|
||||
.emp-card__tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
|
||||
.emp-card__tag { font-size: 11px; padding: 3px 10px; border-radius: 12px; background: rgba(255,255,255,0.2); }
|
||||
/* 卡片区块 */
|
||||
.card { background: #fff; border-radius: 12px; margin: 10px 12px 0; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.card__title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
|
||||
.card__title .readonly { font-size: 10px; color: #999; font-weight: 400; background: #f5f5f5; padding: 1px 6px; border-radius: 8px; }
|
||||
/* 关键摘要 */
|
||||
.alert-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
|
||||
.alert-item:last-child { border-bottom: none; }
|
||||
.alert-item__label { font-size: 12px; color: #999; width: 64px; flex-shrink: 0; margin-top: 2px; }
|
||||
.alert-item__tags { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.atag { font-size: 12px; padding: 3px 10px; border-radius: 12px; }
|
||||
.atag--danger { background: #fff1f0; color: #f5222d; }
|
||||
.atag--warn { background: #fff7e6; color: #fa8c16; }
|
||||
.atag--blue { background: #f0f7ff; color: #1677ff; }
|
||||
.atag--normal { background: #f6ffed; color: #52c41a; }
|
||||
/* 信息行 */
|
||||
.info-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 0.5px solid #f5f5f5; }
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-row .i-label { font-size: 13px; color: #666; }
|
||||
.info-row .i-value { font-size: 13px; color: #333; font-weight: 500; }
|
||||
.info-row .i-value .i-unit { font-size: 11px; color: #999; margin-left: 2px; }
|
||||
/* 标签组 */
|
||||
.tag-group { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.tag-group .tg { font-size: 12px; padding: 4px 10px; border-radius: 12px; background: #f0f7ff; color: #1677ff; }
|
||||
.tag-group .tg.warn { background: #fff7e6; color: #fa8c16; }
|
||||
.tag-group .tg.danger { background: #fff1f0; color: #f5222d; }
|
||||
.tag-group .tg.green { background: #f6ffed; color: #52c41a; }
|
||||
/* 子标签 */
|
||||
.sub-label { font-size: 12px; color: #999; margin-bottom: 6px; }
|
||||
.sub-block { padding: 8px 0; border-bottom: 0.5px solid #f5f5f5; }
|
||||
.sub-block:last-child { border-bottom: none; }
|
||||
/* 餐次配比 */
|
||||
.ratio-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #f0f0f0; margin-bottom: 10px; }
|
||||
.ratio-bar .ratio-seg { height: 100%; }
|
||||
.ratio-list { display: flex; }
|
||||
.ratio-list .ratio-item { flex: 1; display: flex; align-items: center; gap: 4px; font-size: 12px; }
|
||||
.ratio-list .ratio-item .r-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.ratio-list .ratio-item .r-name { color: #999; }
|
||||
.ratio-list .ratio-item .r-val { color: #333; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回上一页 -->
|
||||
<button class="nav-back" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">员工健康档案</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 员工卡片 -->
|
||||
<div class="emp-card">
|
||||
<div class="emp-card__row">
|
||||
<div class="emp-card__avatar">👩</div>
|
||||
<div>
|
||||
<div class="emp-card__name">张小红</div>
|
||||
<div class="emp-card__meta">女 · 32岁 · 公司机关 · 办公室 · 162cm · 67.2kg · BMI 25.6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="emp-card__tags">
|
||||
<span class="emp-card__tag">减脂需求</span>
|
||||
<span class="emp-card__tag">中度活动</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关键摘要（营养师定制方案重点参考） -->
|
||||
<div class="card" style="border-left:3px solid #1677ff;">
|
||||
<div class="card__title">🎯 方案定制关键信息</div>
|
||||
<div class="alert-item">
|
||||
<span class="alert-item__label">体检异常</span>
|
||||
<div class="alert-item__tags">
|
||||
<span class="atag atag--warn">尿酸 380 偏高</span>
|
||||
<span class="atag atag--normal">血压/血糖正常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-item">
|
||||
<span class="alert-item__label">疾病史</span>
|
||||
<div class="alert-item__tags">
|
||||
<span class="atag atag--danger">胃炎</span>
|
||||
<span class="atag atag--danger">高尿酸</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-item">
|
||||
<span class="alert-item__label">用药情况</span>
|
||||
<div class="alert-item__tags">
|
||||
<span class="atag atag--blue">别嘌醇片</span>
|
||||
<span class="atag atag--blue">依那普利</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-item">
|
||||
<span class="alert-item__label">过敏原</span>
|
||||
<div class="alert-item__tags">
|
||||
<span class="atag atag--danger">🥜 花生</span>
|
||||
<span class="atag atag--danger">🦐 海鲜</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-item">
|
||||
<span class="alert-item__label">饮食禁忌</span>
|
||||
<div class="alert-item__tags">
|
||||
<span class="atag atag--warn">🌶️ 少辣</span>
|
||||
<span class="atag atag--warn">🧂 低盐</span>
|
||||
<span class="atag atag--warn">🍬 控糖</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 1. 身体指标 -->
|
||||
<div class="card">
|
||||
<div class="card__title">📏 身体指标</div>
|
||||
<div class="info-row"><span class="i-label">身高</span><span class="i-value">172<span class="i-unit">cm</span></span></div>
|
||||
<div class="info-row"><span class="i-label">体重</span><span class="i-value">68<span class="i-unit">kg</span></span></div>
|
||||
<div class="info-row"><span class="i-label">BMI</span><span class="i-value">23.0 <span style="color:#52c41a;font-size:11px;">正常</span></span></div>
|
||||
<div class="info-row"><span class="i-label">体脂率</span><span class="i-value">18.5% <span style="color:#52c41a;font-size:11px;">标准</span></span></div>
|
||||
<div class="info-row"><span class="i-label">活动水平</span><span class="i-value">中度活动<span class="i-unit">每周3-5次</span></span></div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 体检信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">🩺 体检信息<span class="readonly">只读</span></div>
|
||||
<div class="info-row"><span class="i-label">体检日期</span><span class="i-value">2026-03-15</span></div>
|
||||
<div class="info-row"><span class="i-label">血压</span><span class="i-value">125/80<span class="i-unit">mmHg</span></span></div>
|
||||
<div class="info-row"><span class="i-label">空腹血糖</span><span class="i-value">5.2<span class="i-unit">mmol/L</span></span></div>
|
||||
<div class="info-row"><span class="i-label">血脂</span><span class="i-value">正常</span></div>
|
||||
<div class="info-row"><span class="i-label">尿酸</span><span class="i-value" style="color:#fa8c16;">380<span class="i-unit">μmol/L</span> <span style="color:#fa8c16;font-size:11px;">偏高</span></span></div>
|
||||
<div class="info-row"><span class="i-label">肝功能</span><span class="i-value">正常</span></div>
|
||||
<div class="info-row"><span class="i-label">肾功能</span><span class="i-value">正常</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 疾病信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">🏥 疾病信息</div>
|
||||
<div class="sub-block">
|
||||
<div class="sub-label">疾病史</div>
|
||||
<div class="tag-group"><span class="tg danger">胃炎</span><span class="tg danger">高尿酸</span></div>
|
||||
</div>
|
||||
<div class="sub-block">
|
||||
<div class="sub-label">用药情况</div>
|
||||
<div class="tag-group"><span class="tg">别嘌醇片</span><span class="tg">依那普利</span></div>
|
||||
</div>
|
||||
<div class="sub-block">
|
||||
<div class="sub-label">家族病史</div>
|
||||
<div class="tag-group"><span class="tg warn">高血压</span><span class="tg warn">糖尿病</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. 口味偏好 -->
|
||||
<div class="card">
|
||||
<div class="card__title">👅 口味偏好</div>
|
||||
<div class="sub-block">
|
||||
<div class="sub-label">口味偏好</div>
|
||||
<div class="tag-group"><span class="tg">偏辣</span></div>
|
||||
</div>
|
||||
<div class="sub-block">
|
||||
<div class="sub-label">地域菜系</div>
|
||||
<div class="tag-group"><span class="tg">川菜</span><span class="tg">湘菜</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 5. 禁忌关联 -->
|
||||
<div class="card">
|
||||
<div class="card__title">🚫 禁忌关联</div>
|
||||
<div class="sub-block">
|
||||
<div class="sub-label">饮食禁忌</div>
|
||||
<div class="tag-group"><span class="tg warn">🌶️ 少辣</span><span class="tg warn">🧂 低盐</span><span class="tg warn">🍬 控糖</span></div>
|
||||
</div>
|
||||
<div class="sub-block">
|
||||
<div class="sub-label">过敏原</div>
|
||||
<div class="tag-group"><span class="tg danger">🥜 花生</span><span class="tg danger">🦐 海鲜</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 6. 动态生理 -->
|
||||
<div class="card">
|
||||
<div class="card__title">📊 动态生理<span class="readonly">只读</span></div>
|
||||
<div class="info-row"><span class="i-label">日均运动量</span><span class="i-value">6000步/日</span></div>
|
||||
<div class="info-row"><span class="i-label">静息心率</span><span class="i-value">68<span class="i-unit">bpm</span></span></div>
|
||||
<div class="info-row"><span class="i-label">平均睡眠</span><span class="i-value">7.5h</span></div>
|
||||
<div class="info-row"><span class="i-label">压力指数</span><span class="i-value">低</span></div>
|
||||
<div class="info-row"><span class="i-label">数据来源</span><span class="i-value">智能手环</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 7. 菜品偏好 -->
|
||||
<div class="card">
|
||||
<div class="card__title">🍲 菜品偏好</div>
|
||||
<div class="sub-block">
|
||||
<div class="sub-label">常点菜品</div>
|
||||
<div class="tag-group"><span class="tg green">宫保鸡丁</span><span class="tg green">清炒西兰花</span><span class="tg green">杂粮饭</span></div>
|
||||
</div>
|
||||
<div class="sub-block">
|
||||
<div class="sub-label">忌口菜品</div>
|
||||
<div class="tag-group"><span class="tg warn">油炸花生</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 8. 妈妈味道 -->
|
||||
<div class="card">
|
||||
<div class="card__title">🏡 妈妈味道</div>
|
||||
<div class="info-row"><span class="i-label">家乡</span><span class="i-value">四川成都</span></div>
|
||||
<div class="sub-block">
|
||||
<div class="sub-label">口味标签</div>
|
||||
<div class="tag-group"><span class="tg warn">麻辣</span><span class="tg warn">红油</span><span class="tg warn">鲜香</span></div>
|
||||
</div>
|
||||
<div class="sub-block">
|
||||
<div class="sub-label">思乡菜清单</div>
|
||||
<div class="tag-group"><span class="tg warn">回锅肉</span><span class="tg warn">麻婆豆腐</span><span class="tg warn">水煮鱼</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 9. 餐次配比 -->
|
||||
<div class="card">
|
||||
<div class="card__title">⚖️ 餐次配比</div>
|
||||
<div class="ratio-bar">
|
||||
<span class="ratio-seg" style="width:30%; background:#FFB84C;"></span>
|
||||
<span class="ratio-seg" style="width:40%; background:#52C41A;"></span>
|
||||
<span class="ratio-seg" style="width:30%; background:#1677FF;"></span>
|
||||
</div>
|
||||
<div class="ratio-list">
|
||||
<div class="ratio-item"><span class="r-dot" style="background:#FFB84C;"></span><span class="r-name">早餐</span><span class="r-val">30%</span></div>
|
||||
<div class="ratio-item"><span class="r-dot" style="background:#52C41A;"></span><span class="r-name">午餐</span><span class="r-val">40%</span></div>
|
||||
<div class="ratio-item"><span class="r-dot" style="background:#1677FF;"></span><span class="r-name">晚餐</span><span class="r-val">30%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,192 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #f7f8fa; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; position: relative; }
|
||||
.nav-back { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 搜索与筛选 */
|
||||
.search-bar { background: #fff; padding: 10px 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.search-input { display: flex; align-items: center; gap: 8px; background: #f5f5f5; border-radius: 20px; padding: 8px 14px; }
|
||||
.search-input input { flex: 1; border: none; background: none; font-size: 14px; outline: none; color: #1a1a1a; }
|
||||
/* Tab */
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #e8e8e8; color: #666; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
.seg-tab.active .badge { background: #e6f4ff; color: #1677ff; }
|
||||
/* 员工卡片 */
|
||||
.employee-card { background: #fff; border-radius: 12px; margin: 10px 12px 0; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 10px; cursor: pointer; }
|
||||
.employee-card:active { transform: scale(0.98); }
|
||||
.employee-card__avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.employee-card__info { flex: 1; min-width: 0; }
|
||||
.employee-card__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.employee-card__meta { font-size: 12px; color: #999; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.employee-card__rate { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
|
||||
.employee-card__rate-num { font-size: 15px; font-weight: 700; }
|
||||
.employee-card__rate-num--good { color: #52c41a; }
|
||||
.employee-card__rate-num--bad { color: #ff4d4f; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<button class="nav-back" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">员工营养管理</span>
|
||||
</div>
|
||||
|
||||
<!-- 搜索与筛选 -->
|
||||
<div class="search-bar">
|
||||
<div class="search-input">
|
||||
<span style="font-size:14px;">🔍</span>
|
||||
<input type="text" placeholder="搜索员工姓名 / 工号" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab：全部 / 达标 / 未达标 -->
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTab(this,'panel-all')">全部<span class="badge">86</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-good')">达标<span class="badge">62</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-bad')">未达标<span class="badge">24</span></div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 全部列表 -->
|
||||
<div id="panel-all">
|
||||
<!-- [交互] 点击跳转至: ./employee-detail.html -->
|
||||
<div class="employee-card" onclick="location.href='./employee-detail.html'">
|
||||
<div class="employee-card__avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div>
|
||||
<div class="employee-card__info">
|
||||
<div class="employee-card__name">张小红</div>
|
||||
<div class="employee-card__meta"><span>女 · 32岁</span><span>公司机关 · 办公室</span></div>
|
||||
</div>
|
||||
<div class="employee-card__rate"><span class="employee-card__rate-num employee-card__rate-num--bad">68%</span><span class="tag tag-red">未达标</span></div>
|
||||
</div>
|
||||
<div class="employee-card" onclick="location.href='./employee-detail.html'">
|
||||
<div class="employee-card__avatar" style="background:linear-gradient(135deg,#e8f4ff,#bdd7ff);">👨</div>
|
||||
<div class="employee-card__info">
|
||||
<div class="employee-card__name">李建国</div>
|
||||
<div class="employee-card__meta"><span>男 · 45岁</span><span>采油一厂 · 技术部</span></div>
|
||||
</div>
|
||||
<div class="employee-card__rate"><span class="employee-card__rate-num employee-card__rate-num--bad">71%</span><span class="tag tag-orange">待干预</span></div>
|
||||
</div>
|
||||
<div class="employee-card" onclick="location.href='./employee-detail.html'">
|
||||
<div class="employee-card__avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👩</div>
|
||||
<div class="employee-card__info">
|
||||
<div class="employee-card__name">王芳</div>
|
||||
<div class="employee-card__meta"><span>女 · 28岁</span><span>信息技术中心 · 数据部</span></div>
|
||||
</div>
|
||||
<div class="employee-card__rate"><span class="employee-card__rate-num employee-card__rate-num--good">92%</span><span class="tag tag-green">达标</span></div>
|
||||
</div>
|
||||
<div class="employee-card" onclick="location.href='./employee-detail.html'">
|
||||
<div class="employee-card__avatar" style="background:linear-gradient(135deg,#e8f4ff,#bdd7ff);">👨</div>
|
||||
<div class="employee-card__info">
|
||||
<div class="employee-card__name">陈伟</div>
|
||||
<div class="employee-card__meta"><span>男 · 36岁</span><span>安全环保部 · 安环部</span></div>
|
||||
</div>
|
||||
<div class="employee-card__rate"><span class="employee-card__rate-num employee-card__rate-num--good">88%</span><span class="tag tag-green">达标</span></div>
|
||||
</div>
|
||||
<div class="employee-card" onclick="location.href='./employee-detail.html'">
|
||||
<div class="employee-card__avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">👨</div>
|
||||
<div class="employee-card__info">
|
||||
<div class="employee-card__name">赵志强</div>
|
||||
<div class="employee-card__meta"><span>男 · 61岁</span><span>公司机关 · 后勤部</span></div>
|
||||
</div>
|
||||
<div class="employee-card__rate"><span class="employee-card__rate-num employee-card__rate-num--bad">59%</span><span class="tag tag-red">未达标</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 达标列表 -->
|
||||
<div id="panel-good" style="display:none;">
|
||||
<div class="employee-card" onclick="location.href='./employee-detail.html'">
|
||||
<div class="employee-card__avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👩</div>
|
||||
<div class="employee-card__info">
|
||||
<div class="employee-card__name">王芳</div>
|
||||
<div class="employee-card__meta"><span>女 · 28岁</span><span>信息技术中心 · 数据部</span></div>
|
||||
</div>
|
||||
<div class="employee-card__rate"><span class="employee-card__rate-num employee-card__rate-num--good">92%</span><span class="tag tag-green">达标</span></div>
|
||||
</div>
|
||||
<div class="employee-card" onclick="location.href='./employee-detail.html'">
|
||||
<div class="employee-card__avatar" style="background:linear-gradient(135deg,#e8f4ff,#bdd7ff);">👨</div>
|
||||
<div class="employee-card__info">
|
||||
<div class="employee-card__name">陈伟</div>
|
||||
<div class="employee-card__meta"><span>男 · 36岁</span><span>安全环保部 · 安环部</span></div>
|
||||
</div>
|
||||
<div class="employee-card__rate"><span class="employee-card__rate-num employee-card__rate-num--good">88%</span><span class="tag tag-green">达标</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 未达标列表 -->
|
||||
<div id="panel-bad" style="display:none;">
|
||||
<div class="employee-card" onclick="location.href='./employee-detail.html'">
|
||||
<div class="employee-card__avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div>
|
||||
<div class="employee-card__info">
|
||||
<div class="employee-card__name">张小红</div>
|
||||
<div class="employee-card__meta"><span>女 · 32岁</span><span>公司机关 · 办公室</span></div>
|
||||
</div>
|
||||
<div class="employee-card__rate"><span class="employee-card__rate-num employee-card__rate-num--bad">68%</span><span class="tag tag-red">未达标</span></div>
|
||||
</div>
|
||||
<div class="employee-card" onclick="location.href='./employee-detail.html'">
|
||||
<div class="employee-card__avatar" style="background:linear-gradient(135deg,#e8f4ff,#bdd7ff);">👨</div>
|
||||
<div class="employee-card__info">
|
||||
<div class="employee-card__name">李建国</div>
|
||||
<div class="employee-card__meta"><span>男 · 45岁</span><span>采油一厂 · 技术部</span></div>
|
||||
</div>
|
||||
<div class="employee-card__rate"><span class="employee-card__rate-num employee-card__rate-num--bad">71%</span><span class="tag tag-orange">待干预</span></div>
|
||||
</div>
|
||||
<div class="employee-card" onclick="location.href='./employee-detail.html'">
|
||||
<div class="employee-card__avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">👨</div>
|
||||
<div class="employee-card__info">
|
||||
<div class="employee-card__name">赵志强</div>
|
||||
<div class="employee-card__meta"><span>男 · 61岁</span><span>公司机关 · 后勤部</span></div>
|
||||
</div>
|
||||
<div class="employee-card__rate"><span class="employee-card__rate-num employee-card__rate-num--bad">59%</span><span class="tag tag-red">未达标</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
/* Tab 切换 */
|
||||
function switchTab(el, panelId) {
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
['panel-all','panel-good','panel-bad'].forEach(function(id) {
|
||||
document.getElementById(id).style.display = id === panelId ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,229 @@
|
||||
<!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>
|
||||
/* 公共重置与布局 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
/* 手机壳容器 */
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
/* 状态栏 */
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
/* 滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 底部Tab栏 */
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
/* 分段Tab */
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #e8e8e8; color: #666; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
.seg-tab.active .badge { background: #e6f4ff; color: #1677ff; }
|
||||
/* 标签 */
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
/* 快捷入口网格 */
|
||||
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 16px 0; }
|
||||
.quick-card { background: #fff; border-radius: 12px; padding: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 10px; transition: transform 0.15s; }
|
||||
.quick-card:active { transform: scale(0.98); }
|
||||
.quick-card__icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.quick-card__info { flex: 1; min-width: 0; }
|
||||
.quick-card__title { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.quick-card__desc { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
/* 咨询卡片 */
|
||||
.consult-card { background: #fff; border-radius: 12px; margin: 10px 16px 0; padding: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.15s; }
|
||||
.consult-card:active { transform: scale(0.98); }
|
||||
.cc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||||
.cc-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #e8f4ff, #bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.cc-info { flex: 1; min-width: 0; }
|
||||
.cc-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.cc-meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.cc-bottom { display: flex; align-items: center; justify-content: space-between; }
|
||||
.cc-preview { font-size: 13px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
|
||||
.cc-time { font-size: 12px; color: #bbb; flex-shrink: 0; }
|
||||
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; flex-shrink: 0; }
|
||||
/* 弹窗样式 */
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #1677ff; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部区域 -->
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">你好，李营养师</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">工作台</div>
|
||||
</div>
|
||||
<!-- [交互] 点击切换营养咨询服务状态 -->
|
||||
<button id="wb-pause-btn" onclick="togglePause()" style="display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);border-radius:20px;padding:6px 14px;color:#fff;font-size:13px;cursor:pointer;">
|
||||
<span id="pause-dot" style="width:8px;height:8px;border-radius:50%;background:#52c41a;display:inline-block;flex-shrink:0;"></span>
|
||||
<span id="pause-label">咨询已开启</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 统计数字 -->
|
||||
<div style="display:flex;">
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">营养咨询待回复</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">3</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">方案待跟进</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">5</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">食谱被引用</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 快捷功能入口（2 个大 tab） -->
|
||||
<div style="display:flex;gap:10px;margin:10px 16px 0;">
|
||||
<!-- [交互] 点击跳转至: ./employee-list.html -->
|
||||
<div onclick="location.href='./employee-list.html'" style="flex:1;background:#fff;border-radius:12px;padding:16px 14px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.06);text-align:center;transition:transform 0.15s;">
|
||||
<div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#e6f4ff,#b7d8ff);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 8px;">👥</div>
|
||||
<div style="font-size:15px;font-weight:600;color:#1a1a1a;">员工营养管理</div>
|
||||
<div style="font-size:11px;color:#999;margin-top:4px;">达标监控 · 一对一指导</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./recipe-list.html -->
|
||||
<div onclick="location.href='./recipe-list.html'" style="flex:1;background:#fff;border-radius:12px;padding:16px 14px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.06);text-align:center;transition:transform 0.15s;">
|
||||
<div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#fff7e6,#ffd591);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 8px;">🥗</div>
|
||||
<div style="font-size:15px;font-weight:600;color:#1a1a1a;">我的食谱</div>
|
||||
<div style="font-size:11px;color:#999;margin-top:4px;">按周发布 · 引用查看</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养咨询列表 -->
|
||||
<div id="consult-list" style="margin-top:4px;">
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchWorkTab(this,'wb-text-pending')">待回复<span class="badge">2</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-text-ongoing')">进行中<span class="badge" style="background:#fff7e6;color:#fa8c16;">1</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-text-done')">已结束</div>
|
||||
</div>
|
||||
|
||||
<!-- 待回复列表 -->
|
||||
<div id="wb-text-pending">
|
||||
<!-- [交互] 点击跳转至: ./consult-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./consult-chat.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👩</div><div class="cc-info"><div class="cc-name">张小红</div><div class="cc-meta">女 · 32岁 · 减脂需求</div></div><span class="tag tag-red">待回复</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">食堂太油了，想请教怎么吃才能减脂...</div><div style="display:flex;align-items:center;gap:6px;"><span class="cc-time">10:23</span><span class="unread-dot"></span></div></div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./consult-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./consult-chat.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">李建国</div><div class="cc-meta">男 · 45岁 · 高血脂</div></div><span class="tag tag-red">待回复</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">血脂偏高，日常饮食有什么忌口...</div><div style="display:flex;align-items:center;gap:6px;"><span class="cc-time">09:55</span><span class="unread-dot"></span></div></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<!-- 进行中列表 -->
|
||||
<div id="wb-text-ongoing" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./consult-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./consult-chat.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">陈伟</div><div class="cc-meta">男 · 36岁 · 增肌需求</div></div><span class="tag tag-blue">进行中</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">好的，我按您给的食谱吃一周看看</div><span class="cc-time">昨天</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<!-- 已结束列表 -->
|
||||
<div id="wb-text-done" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./consult-chat-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./consult-chat-done.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">赵磊</div><div class="cc-meta">男 · 35岁</div></div><span class="tag tag-green">已完成</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">谢谢营养师，方案很实用</div><span class="cc-time">08:40</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 服务状态切换确认弹窗 -->
|
||||
<div id="modal-pause" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title" id="pause-modal-title">关闭咨询</div>
|
||||
<div class="modal-body" id="pause-modal-body">是否要关闭营养咨询？关闭后，员工无法发起营养咨询。</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal('modal-pause')">取消</button>
|
||||
<button onclick="confirmTogglePause()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部5Tab导航栏 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师，供共用页面（消息、AI助手）判断返回目标 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
/**
|
||||
* 切换二级Tab（待回复/进行中/已结束）
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
* @param {string} panelId - 目标面板ID
|
||||
*/
|
||||
function switchWorkTab(el, panelId) {
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
var scrollContent = el.closest('.seg-tabs').nextElementSibling;
|
||||
Array.from(scrollContent.children).forEach(function(p) {
|
||||
if (p.id) p.style.display = p.id === panelId ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/* 服务状态切换 */
|
||||
var isPaused = false;
|
||||
function togglePause() {
|
||||
var title = isPaused ? '开启咨询' : '关闭咨询';
|
||||
var body = isPaused ? '是否要开启营养咨询？开启后，员工可发起营养咨询。' : '是否要关闭营养咨询？关闭后，员工无法发起营养咨询。';
|
||||
document.getElementById('pause-modal-title').textContent = title;
|
||||
document.getElementById('pause-modal-body').textContent = body;
|
||||
openModal('modal-pause');
|
||||
}
|
||||
function confirmTogglePause() {
|
||||
isPaused = !isPaused;
|
||||
var bg = isPaused ? '#ff4d4f' : '#52c41a';
|
||||
var text = isPaused ? '咨询已关闭' : '咨询已开启';
|
||||
document.getElementById('pause-dot').style.background = bg;
|
||||
document.getElementById('pause-label').textContent = text;
|
||||
closeModal('modal-pause');
|
||||
}
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,407 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #f7f8fa; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; position: relative; }
|
||||
.nav-back { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 头部 */
|
||||
.plan-header { background: linear-gradient(135deg,#1677ff,#0958d9); padding: 16px 20px; color: #fff; }
|
||||
.plan-header__top { display: flex; align-items: center; gap: 12px; }
|
||||
.plan-header__avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; background: rgba(255,255,255,0.25); border: 2px solid rgba(255,255,255,0.4); }
|
||||
.plan-header__name { font-size: 17px; font-weight: 700; }
|
||||
.plan-header__meta { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 2px; }
|
||||
.plan-header__tag { margin-left: auto; font-size: 12px; padding: 4px 12px; border-radius: 14px; background: rgba(255,255,255,0.2); }
|
||||
/* 卡片 */
|
||||
.card { background: #fff; border-radius: 12px; margin: 10px 12px 0; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.card__title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; display: flex; align-items: center; }
|
||||
/* 营养目标 */
|
||||
.goal-row { display: flex; }
|
||||
.goal-item { flex: 1; text-align: center; }
|
||||
.goal-item + .goal-item { border-left: 1px solid #f0f0f0; }
|
||||
.goal-item__val { font-size: 16px; font-weight: 700; color: #1677ff; }
|
||||
.goal-item__label { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
/* 三大营养素 */
|
||||
.macro-bar { display: flex; height: 24px; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
|
||||
.macro-bar__seg { display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 600; }
|
||||
.macro-legend { display: flex; gap: 12px; }
|
||||
.macro-legend__item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #666; }
|
||||
.macro-legend__dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
/* 一周饮食安排（按天折叠，每天三餐，食物含分量与热量） */
|
||||
.day-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
|
||||
.day-card:last-child { margin-bottom: 0; }
|
||||
.day-header { display: flex; align-items: center; justify-content: space-between; padding: 12px; cursor: pointer; }
|
||||
.day-header__day { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.day-header__summary { font-size: 12px; color: #999; }
|
||||
.day-header__kcal { font-size: 12px; color: #fa8c16; font-weight: 600; }
|
||||
.day-header .arrow { transition: transform .2s; flex-shrink: 0; }
|
||||
.day-header .arrow.open { transform: rotate(180deg); }
|
||||
.day-body { display: none; padding: 0 12px 12px; }
|
||||
.day-body.open { display: block; }
|
||||
.meal-block { background: #fafafa; border-radius: 8px; padding: 10px; margin-bottom: 8px; }
|
||||
.meal-block:last-child { margin-bottom: 0; }
|
||||
.meal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
|
||||
.meal-head__name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
|
||||
.meal-head__subtotal { font-size: 12px; color: #fa8c16; font-weight: 600; }
|
||||
.food-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed #f0f0f0; }
|
||||
.food-row:last-child { border-bottom: none; }
|
||||
.food-row__name { flex: 1; font-size: 13px; color: #333; }
|
||||
.food-row__amount { font-size: 12px; color: #666; width: 44px; text-align: right; flex-shrink: 0; }
|
||||
.food-row__kcal { font-size: 12px; color: #fa8c16; font-weight: 600; width: 56px; text-align: right; flex-shrink: 0; }
|
||||
/* 执行进度 */
|
||||
.checkin-row { display: flex; gap: 6px; }
|
||||
.checkin-day { flex: 1; text-align: center; }
|
||||
.checkin-day__dot { width: 26px; height: 26px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 12px; }
|
||||
.checkin-day__dot--done { background: #52c41a; color: #fff; }
|
||||
.checkin-day__dot--today { background: #e6f4ff; color: #1677ff; border: 1px solid #1677ff; }
|
||||
.checkin-day__dot--pending { background: #f5f5f5; color: #bbb; }
|
||||
.checkin-day__label { font-size: 10px; color: #999; margin-top: 4px; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
/* 底部弹层 */
|
||||
.sheet-mask { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; align-items: flex-end; justify-content: center; }
|
||||
.sheet-mask.active { display: flex; }
|
||||
.sheet-panel { width: 100%; max-height: 80%; background: #fff; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; overflow: hidden; }
|
||||
.sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 0.5px solid #f0f0f0; flex-shrink: 0; }
|
||||
.sheet-header .s-cancel { font-size: 14px; color: #999; cursor: pointer; background: none; border: none; }
|
||||
.sheet-header .s-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.sheet-header .s-save { font-size: 14px; color: #1677ff; font-weight: 600; cursor: pointer; background: none; border: none; }
|
||||
.sheet-body { padding: 12px 16px 20px; overflow-y: auto; flex: 1; }
|
||||
.sheet-body::-webkit-scrollbar { display: none; }
|
||||
.sheet-tip { font-size: 12px; color: #999; background: #fafafa; border-radius: 8px; padding: 10px 12px; line-height: 1.6; margin-bottom: 12px; }
|
||||
.adj-meal { margin-bottom: 14px; }
|
||||
.adj-meal__label { font-size: 13px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.adj-dish { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 14px; background: #f0f6ff; color: #1677ff; margin: 0 6px 6px 0; cursor: pointer; }
|
||||
.adj-dish .x { color: #999; font-size: 12px; line-height: 1; }
|
||||
.adj-add { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 5px 12px; border-radius: 14px; border: 1px dashed #1677ff; color: #1677ff; margin-bottom: 6px; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<button class="nav-back" onclick="location.href='./employee-detail.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">营养方案详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 头部 -->
|
||||
<div class="plan-header">
|
||||
<div class="plan-header__top">
|
||||
<div class="plan-header__avatar">👩</div>
|
||||
<div>
|
||||
<div class="plan-header__name">张小红</div>
|
||||
<div class="plan-header__meta">减脂期一周饮食方案 · 女 32岁</div>
|
||||
</div>
|
||||
<span class="plan-header__tag">执行中</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 方案依据（健康档案摘要） -->
|
||||
<div class="card" style="border-left:3px solid #1677ff;">
|
||||
<div class="card__title">🎯 方案依据<span style="font-size:12px;color:#1677ff;font-weight:400;margin-left:auto;cursor:pointer;" onclick="location.href='./employee-health.html'">查看完整健康档案 ›</span></div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:6px;">
|
||||
<span class="tag tag-orange">尿酸 380 偏高</span>
|
||||
<span class="tag tag-red">胃炎</span>
|
||||
<span class="tag tag-red">高尿酸</span>
|
||||
<span class="tag tag-red">过敏原：花生</span>
|
||||
<span class="tag tag-red">过敏原：海鲜</span>
|
||||
<span class="tag tag-orange">少辣 · 低盐 · 控糖</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养目标 -->
|
||||
<div class="card">
|
||||
<div class="card__title">营养目标</div>
|
||||
<div class="goal-row">
|
||||
<div class="goal-item"><div class="goal-item__val">1400</div><div class="goal-item__label">热量 kcal/日</div></div>
|
||||
<div class="goal-item"><div class="goal-item__val">75</div><div class="goal-item__label">蛋白质 g</div></div>
|
||||
<div class="goal-item"><div class="goal-item__val">30</div><div class="goal-item__label">脂肪 g</div></div>
|
||||
<div class="goal-item"><div class="goal-item__val">190</div><div class="goal-item__label">碳水 g</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 三大营养素占比 -->
|
||||
<div class="card">
|
||||
<div class="card__title">三大营养素占比</div>
|
||||
<div class="macro-bar">
|
||||
<div class="macro-bar__seg" style="width:25%;background:#1677ff;">蛋白25%</div>
|
||||
<div class="macro-bar__seg" style="width:20%;background:#fa8c16;">脂肪20%</div>
|
||||
<div class="macro-bar__seg" style="width:55%;background:#52c41a;">碳水55%</div>
|
||||
</div>
|
||||
<div class="macro-legend">
|
||||
<span class="macro-legend__item"><span class="macro-legend__dot" style="background:#1677ff;"></span>蛋白质</span>
|
||||
<span class="macro-legend__item"><span class="macro-legend__dot" style="background:#fa8c16;"></span>脂肪</span>
|
||||
<span class="macro-legend__item"><span class="macro-legend__dot" style="background:#52c41a;"></span>碳水化合物</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 饮食禁忌 -->
|
||||
<div class="card">
|
||||
<div class="card__title">饮食禁忌</div>
|
||||
<div style="display:flex;gap:6px;">
|
||||
<span class="tag tag-red">高糖</span>
|
||||
<span class="tag tag-red">高脂</span>
|
||||
<span class="tag tag-orange">高盐</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一周饮食安排 -->
|
||||
<div class="card">
|
||||
<div class="card__title">一周饮食安排<span style="font-size:10px;color:#52c41a;font-weight:400;background:#f6ffed;padding:2px 8px;border-radius:8px;margin-left:8px;">系统生成</span><span style="font-size:12px;color:#1677ff;font-weight:400;margin-left:auto;cursor:pointer;" onclick="openSheet('sheet-adjust')">微调食谱 ›</span></div>
|
||||
<div id="day-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- 执行进度 -->
|
||||
<div class="card">
|
||||
<div class="card__title">执行进度<span style="font-size:12px;color:#999;font-weight:400;margin-left:8px;">第 3 天 / 7 天</span></div>
|
||||
<div class="checkin-row">
|
||||
<div class="checkin-day"><div class="checkin-day__dot checkin-day__dot--done">✓</div><div class="checkin-day__label">周一</div></div>
|
||||
<div class="checkin-day"><div class="checkin-day__dot checkin-day__dot--done">✓</div><div class="checkin-day__label">周二</div></div>
|
||||
<div class="checkin-day"><div class="checkin-day__dot checkin-day__dot--today">3</div><div class="checkin-day__label">周三</div></div>
|
||||
<div class="checkin-day"><div class="checkin-day__dot checkin-day__dot--pending">4</div><div class="checkin-day__label">周四</div></div>
|
||||
<div class="checkin-day"><div class="checkin-day__dot checkin-day__dot--pending">5</div><div class="checkin-day__label">周五</div></div>
|
||||
<div class="checkin-day"><div class="checkin-day__dot checkin-day__dot--pending">6</div><div class="checkin-day__label">周六</div></div>
|
||||
<div class="checkin-day"><div class="checkin-day__dot checkin-day__dot--pending">7</div><div class="checkin-day__label">周日</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 微调食谱底部弹层 -->
|
||||
<div id="sheet-adjust" class="sheet-mask" onclick="if(event.target===this)closeSheet('sheet-adjust')">
|
||||
<div class="sheet-panel" onclick="event.stopPropagation()">
|
||||
<div class="sheet-header">
|
||||
<button class="s-cancel" onclick="closeSheet('sheet-adjust')">取消</button>
|
||||
<span class="s-title">微调一周食谱</span>
|
||||
<button class="s-save" onclick="closeSheet('sheet-adjust');alert('食谱已微调（原型演示）')">保存</button>
|
||||
</div>
|
||||
<div class="sheet-body">
|
||||
<div class="sheet-tip">系统已根据方案参数（1400kcal/日 · 蛋白25% · 脂肪20% · 碳水55% · 禁忌：高糖、高脂、高嘌呤）生成一周专属食谱，可替换任意餐品。</div>
|
||||
<div id="adjust-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
/* ===== 一周专属食谱数据（每天三餐，每餐食物含分量与热量） ===== */
|
||||
var WEEK = [
|
||||
{ day: '周一', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '全麦面包', amount: 80, unit: 'g', kcal: 200 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 },
|
||||
{ name: '牛奶', amount: 250, unit: 'ml', kcal: 65 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '清蒸鲈鱼', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '杂粮饭', amount: 200, unit: 'g', kcal: 240 },
|
||||
{ name: '蒜蓉西兰花', amount: 150, unit: 'g', kcal: 60 },
|
||||
{ name: '紫菜蛋花汤', amount: 200, unit: 'ml', kcal: 40 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '香煎鸡胸', amount: 120, unit: 'g', kcal: 200 },
|
||||
{ name: '蔬菜沙拉', amount: 200, unit: 'g', kcal: 80 },
|
||||
{ name: '小米粥', amount: 200, unit: 'g', kcal: 120 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周二', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '燕麦牛奶', amount: 300, unit: 'ml', kcal: 220 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '白灼虾', amount: 150, unit: 'g', kcal: 140 },
|
||||
{ name: '糙米饭', amount: 200, unit: 'g', kcal: 230 },
|
||||
{ name: '清炒时蔬', amount: 150, unit: 'g', kcal: 55 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '蔬菜豆腐汤', amount: 300, unit: 'g', kcal: 150 },
|
||||
{ name: '杂粮馒头', amount: 100, unit: 'g', kcal: 220 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周三', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 },
|
||||
{ name: '豆浆', amount: 250, unit: 'ml', kcal: 80 },
|
||||
{ name: '蒸红薯', amount: 100, unit: 'g', kcal: 90 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '卤牛肉', amount: 100, unit: 'g', kcal: 160 },
|
||||
{ name: '荞麦面', amount: 200, unit: 'g', kcal: 230 },
|
||||
{ name: '凉拌黄瓜', amount: 150, unit: 'g', kcal: 40 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '清炒时蔬', amount: 200, unit: 'g', kcal: 60 },
|
||||
{ name: '玉米', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '菌菇汤', amount: 200, unit: 'g', kcal: 50 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周四', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '杂粮粥', amount: 300, unit: 'g', kcal: 200 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '香煎鸡胸', amount: 150, unit: 'g', kcal: 250 },
|
||||
{ name: '藜麦饭', amount: 150, unit: 'g', kcal: 180 },
|
||||
{ name: '西兰花', amount: 150, unit: 'g', kcal: 60 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '虾仁沙拉', amount: 200, unit: 'g', kcal: 150 },
|
||||
{ name: '全麦面包', amount: 50, unit: 'g', kcal: 120 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周五', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '全麦面包', amount: 80, unit: 'g', kcal: 200 },
|
||||
{ name: '牛奶', amount: 250, unit: 'ml', kcal: 65 },
|
||||
{ name: '香蕉', amount: 100, unit: 'g', kcal: 90 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '清蒸鱼', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '玉米', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '凉拌木耳', amount: 100, unit: 'g', kcal: 40 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '菌菇汤', amount: 300, unit: 'g', kcal: 120 },
|
||||
{ name: '杂粮饭', amount: 150, unit: 'g', kcal: 180 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周六', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 },
|
||||
{ name: '燕麦', amount: 50, unit: 'g', kcal: 190 },
|
||||
{ name: '牛奶', amount: 250, unit: 'ml', kcal: 65 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '白灼虾', amount: 150, unit: 'g', kcal: 140 },
|
||||
{ name: '杂粮饭', amount: 200, unit: 'g', kcal: 240 },
|
||||
{ name: '蔬菜沙拉', amount: 150, unit: 'g', kcal: 60 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '蔬菜沙拉', amount: 200, unit: 'g', kcal: 80 },
|
||||
{ name: '鸡胸肉', amount: 100, unit: 'g', kcal: 170 },
|
||||
{ name: '玉米', amount: 100, unit: 'g', kcal: 110 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周日', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '豆浆', amount: 250, unit: 'ml', kcal: 80 },
|
||||
{ name: '玉米', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '卤牛肉', amount: 100, unit: 'g', kcal: 160 },
|
||||
{ name: '糙米饭', amount: 200, unit: 'g', kcal: 230 },
|
||||
{ name: '清炒时蔬', amount: 150, unit: 'g', kcal: 55 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '鸡胸沙拉', amount: 250, unit: 'g', kcal: 200 },
|
||||
{ name: '小米粥', amount: 200, unit: 'g', kcal: 120 }
|
||||
]}
|
||||
]}
|
||||
];
|
||||
|
||||
/* 计算某餐总热量 */
|
||||
function mealSubtotal(di, mi) {
|
||||
return WEEK[di].meals[mi].foods.reduce(function(s, f) { return s + f.kcal; }, 0);
|
||||
}
|
||||
/* 计算某天总热量 */
|
||||
function dayTotal(di) {
|
||||
return WEEK[di].meals.reduce(function(s, m, mi) { return s + mealSubtotal(di, mi); }, 0);
|
||||
}
|
||||
/* 某天三餐小计摘要 */
|
||||
function daySummary(di) {
|
||||
return WEEK[di].meals.map(function(m, mi) { return m.name.charAt(0) + mealSubtotal(di, mi); }).join(' · ');
|
||||
}
|
||||
|
||||
/* 渲染一周饮食安排（折叠卡片，只读） */
|
||||
function renderDayList() {
|
||||
var html = '';
|
||||
WEEK.forEach(function(day, di) {
|
||||
html += '<div class="day-card">' +
|
||||
'<div class="day-header" onclick="toggleDay(' + di + ')">' +
|
||||
'<span class="day-header__day">' + day.day + '</span>' +
|
||||
'<span class="day-header__summary">' + daySummary(di) + '</span>' +
|
||||
'<span class="day-header__kcal">' + dayTotal(di) + ' kcal</span>' +
|
||||
'<svg class="arrow" id="arrow-' + di + '" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="2"><path d="M4 6l4 4 4-4"/></svg>' +
|
||||
'</div>' +
|
||||
'<div class="day-body" id="day-body-' + di + '">' +
|
||||
day.meals.map(function(m, mi) {
|
||||
return '<div class="meal-block">' +
|
||||
'<div class="meal-head"><span class="meal-head__name">' + m.icon + ' ' + m.name + '</span><span class="meal-head__subtotal">小计 ' + mealSubtotal(di, mi) + ' kcal</span></div>' +
|
||||
m.foods.map(function(f) {
|
||||
return '<div class="food-row"><span class="food-row__name">' + f.name + '</span><span class="food-row__amount">' + f.amount + f.unit + '</span><span class="food-row__kcal">' + f.kcal + ' kcal</span></div>';
|
||||
}).join('') +
|
||||
'</div>';
|
||||
}).join('') +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
});
|
||||
document.getElementById('day-list').innerHTML = html;
|
||||
/* 默认展开周一 */
|
||||
document.getElementById('day-body-0').classList.add('open');
|
||||
document.getElementById('arrow-0').classList.add('open');
|
||||
}
|
||||
|
||||
/* 渲染微调弹层（食物带分量与热量） */
|
||||
function renderAdjustList() {
|
||||
var html = '';
|
||||
WEEK.forEach(function(day) {
|
||||
html += '<div class="adj-meal"><div class="adj-meal__label">' + day.day + '</div>';
|
||||
day.meals.forEach(function(m) {
|
||||
m.foods.forEach(function(f) {
|
||||
html += '<span class="adj-dish">' + m.name.charAt(0) + '·' + f.name + ' ' + f.amount + f.unit + '·' + f.kcal + 'kcal<span class="x">×</span></span>';
|
||||
});
|
||||
});
|
||||
html += '<span class="adj-add">＋ 添加餐品</span></div>';
|
||||
});
|
||||
document.getElementById('adjust-list').innerHTML = html;
|
||||
}
|
||||
|
||||
/* 折叠/展开某天 */
|
||||
function toggleDay(di) {
|
||||
var body = document.getElementById('day-body-' + di);
|
||||
var arrow = document.getElementById('arrow-' + di);
|
||||
body.classList.toggle('open');
|
||||
arrow.classList.toggle('open');
|
||||
}
|
||||
|
||||
/* 打开底部弹层 */
|
||||
function openSheet(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
/* 关闭底部弹层 */
|
||||
function closeSheet(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
|
||||
/* 初始化渲染 */
|
||||
renderDayList();
|
||||
renderAdjustList();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,408 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #f7f8fa; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; position: relative; }
|
||||
.nav-back { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 表单 */
|
||||
.form-card { background: #fff; border-radius: 12px; margin: 10px 12px 0; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.form-card__title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.form-item { margin-bottom: 14px; }
|
||||
.form-item:last-child { margin-bottom: 0; }
|
||||
.form-item__label { font-size: 13px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.form-item__label .req { color: #ff4d4f; margin-left: 2px; }
|
||||
.form-input { width: 100%; border: 1px solid #e8e8e8; border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none; color: #1a1a1a; }
|
||||
.form-input:focus { border-color: #1677ff; }
|
||||
/* 分段选择 */
|
||||
.seg-picker { display: flex; background: #f5f5f5; border-radius: 8px; padding: 3px; }
|
||||
.seg-picker__opt { flex: 1; text-align: center; padding: 7px 0; font-size: 13px; color: #666; border-radius: 6px; cursor: pointer; }
|
||||
.seg-picker__opt.active { background: #fff; color: #1677ff; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
|
||||
/* 日期范围 */
|
||||
.date-range { display: flex; align-items: center; gap: 8px; }
|
||||
.date-range .form-input { flex: 1; text-align: center; }
|
||||
.date-range .sep { color: #999; flex-shrink: 0; }
|
||||
/* 餐次配置 */
|
||||
.meal-item { border: 1px solid #e8e8e8; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
|
||||
.meal-item:last-child { margin-bottom: 0; }
|
||||
.meal-item__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.meal-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.meal-item__add { font-size: 12px; color: #1677ff; cursor: pointer; }
|
||||
.meal-item__dishes { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.dish-chip { font-size: 11px; padding: 4px 10px; border-radius: 12px; background: #f0f6ff; color: #1677ff; }
|
||||
/* 营养汇总 */
|
||||
.nutri-summary { display: flex; gap: 8px; }
|
||||
.nutri-summary__item { flex: 1; text-align: center; background: #fafafa; border-radius: 8px; padding: 8px 0; }
|
||||
.nutri-summary__val { font-size: 14px; font-weight: 700; color: #1677ff; }
|
||||
.nutri-summary__label { font-size: 10px; color: #999; margin-top: 2px; }
|
||||
/* 底部操作 */
|
||||
.bottom-bar { background: #fff; border-top: 1px solid #f0f0f0; padding: 10px 16px 14px; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.btn-draft { flex: 1; padding: 12px; background: #fff; color: #1677ff; border: 1px solid #1677ff; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
.btn-pub { flex: 1; padding: 12px; background: #1677ff; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #1677ff; font-weight: 600; }
|
||||
/* 按周折叠卡片 */
|
||||
.day-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
|
||||
.day-card:last-child { margin-bottom: 0; }
|
||||
.day-header { display: flex; align-items: center; justify-content: space-between; padding: 12px; cursor: pointer; }
|
||||
.day-header__day { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.day-header__summary { font-size: 12px; color: #999; }
|
||||
.day-header__kcal { font-size: 12px; color: #fa8c16; font-weight: 600; }
|
||||
.day-header .arrow { transition: transform .2s; flex-shrink: 0; }
|
||||
.day-header .arrow.open { transform: rotate(180deg); }
|
||||
.day-body { display: none; padding: 0 12px 12px; }
|
||||
.day-body.open { display: block; }
|
||||
/* 每餐块 */
|
||||
.meal-block { background: #fafafa; border-radius: 8px; padding: 10px; margin-bottom: 8px; }
|
||||
.meal-block:last-child { margin-bottom: 0; }
|
||||
.meal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
|
||||
.meal-head__name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
|
||||
.meal-head__subtotal { font-size: 12px; color: #fa8c16; font-weight: 600; }
|
||||
/* 食物行 */
|
||||
.food-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed #f0f0f0; }
|
||||
.food-row:last-child { border-bottom: none; }
|
||||
.food-row__name { flex: 1; font-size: 13px; color: #333; }
|
||||
.food-row__input { width: 52px; border: 1px solid #e8e8e8; border-radius: 6px; padding: 4px 6px; font-size: 12px; text-align: center; outline: none; color: #333; background: #fff; }
|
||||
.food-row__input:focus { border-color: #1677ff; }
|
||||
.food-row__unit { font-size: 11px; color: #999; }
|
||||
.food-row__del { width: 20px; height: 20px; border-radius: 50%; border: none; background: #f0f0f0; color: #999; font-size: 12px; cursor: pointer; flex-shrink: 0; line-height: 1; }
|
||||
/* 添加食物 */
|
||||
.add-food { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 0; font-size: 12px; color: #1677ff; border: 1px dashed #1677ff; border-radius: 8px; cursor: pointer; margin-top: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<button class="nav-back" onclick="location.href='./recipe-list.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">制定食谱</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">基本信息</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">食谱名称<span class="req">*</span></div>
|
||||
<input class="form-input" type="text" placeholder="如：机关减脂周菜单（第 38 周）" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">食谱类型<span class="req">*</span></div>
|
||||
<div class="seg-picker">
|
||||
<div class="seg-picker__opt active" onclick="segPick(this)">周菜单</div>
|
||||
<div class="seg-picker__opt" onclick="segPick(this)">季节菜单</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">发布周期<span class="req">*</span></div>
|
||||
<div class="date-range">
|
||||
<input class="form-input" type="text" value="2026-09-21" />
|
||||
<span class="sep">至</span>
|
||||
<input class="form-input" type="text" value="2026-09-27" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">适用食堂</div>
|
||||
<div class="seg-picker">
|
||||
<div class="seg-picker__opt active" onclick="segPick(this)">全部食堂</div>
|
||||
<div class="seg-picker__opt" onclick="segPick(this)">指定食堂</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 餐次配置（按周 · 每天三餐） -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">餐次配置（按周 · 每天三餐）</div>
|
||||
<div id="day-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- 营养汇总 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">营养汇总（日均估算）</div>
|
||||
<div class="nutri-summary">
|
||||
<div class="nutri-summary__item"><div class="nutri-summary__val">1380</div><div class="nutri-summary__label">热量 kcal</div></div>
|
||||
<div class="nutri-summary__item"><div class="nutri-summary__val">78</div><div class="nutri-summary__label">蛋白质 g</div></div>
|
||||
<div class="nutri-summary__item"><div class="nutri-summary__val">32</div><div class="nutri-summary__label">脂肪 g</div></div>
|
||||
<div class="nutri-summary__item"><div class="nutri-summary__val">188</div><div class="nutri-summary__label">碳水 g</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作 -->
|
||||
<div class="bottom-bar">
|
||||
<button class="btn-draft" onclick="location.href='./recipe-list.html'">存为草稿</button>
|
||||
<button class="btn-pub" onclick="openModal('modal-pub')">发布食谱</button>
|
||||
</div>
|
||||
|
||||
<!-- 发布确认弹窗 -->
|
||||
<div id="modal-pub" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">发布食谱</div>
|
||||
<div class="modal-body">发布后该食谱将推送给适用食堂，食堂可引用至食谱排期。确认发布？</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal('modal-pub')">取消</button>
|
||||
<button onclick="closeModal('modal-pub');location.href='./recipe-list.html'">确认发布</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
/* 分段选择 */
|
||||
function segPick(el) {
|
||||
el.parentElement.querySelectorAll('.seg-picker__opt').forEach(function(o) { o.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
}
|
||||
|
||||
/* ===== 一周食谱数据（每天三餐，每餐食物含摄入量与热量） ===== */
|
||||
var WEEK = [
|
||||
{ day: '周一', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '全麦面包', amount: 80, unit: 'g', kcal: 200 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 },
|
||||
{ name: '牛奶', amount: 250, unit: 'ml', kcal: 65 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '清蒸鲈鱼', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '杂粮饭', amount: 200, unit: 'g', kcal: 240 },
|
||||
{ name: '蒜蓉西兰花', amount: 150, unit: 'g', kcal: 60 },
|
||||
{ name: '紫菜蛋花汤', amount: 200, unit: 'ml', kcal: 40 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '香煎鸡胸', amount: 120, unit: 'g', kcal: 200 },
|
||||
{ name: '蔬菜沙拉', amount: 200, unit: 'g', kcal: 80 },
|
||||
{ name: '小米粥', amount: 200, unit: 'g', kcal: 120 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周二', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '燕麦牛奶', amount: 300, unit: 'ml', kcal: 220 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '白灼虾', amount: 150, unit: 'g', kcal: 140 },
|
||||
{ name: '糙米饭', amount: 200, unit: 'g', kcal: 230 },
|
||||
{ name: '清炒时蔬', amount: 150, unit: 'g', kcal: 55 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '蔬菜豆腐汤', amount: 300, unit: 'g', kcal: 150 },
|
||||
{ name: '杂粮馒头', amount: 100, unit: 'g', kcal: 220 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周三', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 },
|
||||
{ name: '豆浆', amount: 250, unit: 'ml', kcal: 80 },
|
||||
{ name: '蒸红薯', amount: 100, unit: 'g', kcal: 90 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '卤牛肉', amount: 100, unit: 'g', kcal: 160 },
|
||||
{ name: '荞麦面', amount: 200, unit: 'g', kcal: 230 },
|
||||
{ name: '凉拌黄瓜', amount: 150, unit: 'g', kcal: 40 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '清炒时蔬', amount: 200, unit: 'g', kcal: 60 },
|
||||
{ name: '玉米', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '菌菇汤', amount: 200, unit: 'g', kcal: 50 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周四', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '杂粮粥', amount: 300, unit: 'g', kcal: 200 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '香煎鸡胸', amount: 150, unit: 'g', kcal: 250 },
|
||||
{ name: '藜麦饭', amount: 150, unit: 'g', kcal: 180 },
|
||||
{ name: '西兰花', amount: 150, unit: 'g', kcal: 60 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '虾仁沙拉', amount: 200, unit: 'g', kcal: 150 },
|
||||
{ name: '全麦面包', amount: 50, unit: 'g', kcal: 120 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周五', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '全麦面包', amount: 80, unit: 'g', kcal: 200 },
|
||||
{ name: '牛奶', amount: 250, unit: 'ml', kcal: 65 },
|
||||
{ name: '香蕉', amount: 100, unit: 'g', kcal: 90 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '清蒸鱼', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '玉米', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '凉拌木耳', amount: 100, unit: 'g', kcal: 40 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '菌菇汤', amount: 300, unit: 'g', kcal: 120 },
|
||||
{ name: '杂粮饭', amount: 150, unit: 'g', kcal: 180 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周六', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 },
|
||||
{ name: '燕麦', amount: 50, unit: 'g', kcal: 190 },
|
||||
{ name: '牛奶', amount: 250, unit: 'ml', kcal: 65 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '白灼虾', amount: 150, unit: 'g', kcal: 140 },
|
||||
{ name: '杂粮饭', amount: 200, unit: 'g', kcal: 240 },
|
||||
{ name: '蔬菜沙拉', amount: 150, unit: 'g', kcal: 60 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '蔬菜沙拉', amount: 200, unit: 'g', kcal: 80 },
|
||||
{ name: '鸡胸肉', amount: 100, unit: 'g', kcal: 170 },
|
||||
{ name: '玉米', amount: 100, unit: 'g', kcal: 110 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周日', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '豆浆', amount: 250, unit: 'ml', kcal: 80 },
|
||||
{ name: '玉米', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '卤牛肉', amount: 100, unit: 'g', kcal: 160 },
|
||||
{ name: '糙米饭', amount: 200, unit: 'g', kcal: 230 },
|
||||
{ name: '清炒时蔬', amount: 150, unit: 'g', kcal: 55 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '鸡胸沙拉', amount: 250, unit: 'g', kcal: 200 },
|
||||
{ name: '小米粥', amount: 200, unit: 'g', kcal: 120 }
|
||||
]}
|
||||
]}
|
||||
];
|
||||
|
||||
/* 计算某餐总热量 */
|
||||
function mealSubtotal(di, mi) {
|
||||
return WEEK[di].meals[mi].foods.reduce(function(s, f) { return s + (parseInt(f.kcal) || 0); }, 0);
|
||||
}
|
||||
/* 计算某天总热量 */
|
||||
function dayTotal(di) {
|
||||
return WEEK[di].meals.reduce(function(s, m, mi) { return s + mealSubtotal(di, mi); }, 0);
|
||||
}
|
||||
/* 某天三餐小计摘要 */
|
||||
function daySummary(di) {
|
||||
return WEEK[di].meals.map(function(m, mi) { return m.name.charAt(0) + mealSubtotal(di, mi); }).join(' · ');
|
||||
}
|
||||
|
||||
/* 渲染单个食物行 */
|
||||
function renderFood(di, mi, fi) {
|
||||
var f = WEEK[di].meals[mi].foods[fi];
|
||||
return '<div class="food-row">' +
|
||||
'<span class="food-row__name">' + f.name + '</span>' +
|
||||
'<input class="food-row__input" type="text" value="' + f.amount + '" oninput="updateAmount(' + di + ',' + mi + ',' + fi + ',this)" />' +
|
||||
'<span class="food-row__unit">' + f.unit + '</span>' +
|
||||
'<input class="food-row__input" type="text" value="' + f.kcal + '" oninput="updateKcal(' + di + ',' + mi + ',' + fi + ',this)" />' +
|
||||
'<span class="food-row__unit">kcal</span>' +
|
||||
'<button class="food-row__del" onclick="removeFood(' + di + ',' + mi + ',' + fi + ')">×</button>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
/* 渲染某餐块 */
|
||||
function renderMeal(di, mi) {
|
||||
var m = WEEK[di].meals[mi];
|
||||
var html = '<div class="meal-block">' +
|
||||
'<div class="meal-head"><span class="meal-head__name">' + m.icon + ' ' + m.name + '</span><span class="meal-head__subtotal" id="meal-sub-' + di + '-' + mi + '">小计 ' + mealSubtotal(di, mi) + ' kcal</span></div>';
|
||||
m.foods.forEach(function(f, fi) { html += renderFood(di, mi, fi); });
|
||||
html += '<div class="add-food" onclick="addFood(' + di + ',' + mi + ')">＋ 添加食物</div></div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
/* 渲染整周折叠卡片 */
|
||||
function renderDayList() {
|
||||
var html = '';
|
||||
WEEK.forEach(function(day, di) {
|
||||
html += '<div class="day-card">' +
|
||||
'<div class="day-header" onclick="toggleDay(' + di + ')">' +
|
||||
'<span class="day-header__day">' + day.day + '</span>' +
|
||||
'<span class="day-header__summary">' + daySummary(di) + '</span>' +
|
||||
'<span class="day-header__kcal" id="day-kcal-' + di + '">' + dayTotal(di) + ' kcal</span>' +
|
||||
'<svg class="arrow" id="arrow-' + di + '" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="2"><path d="M4 6l4 4 4-4"/></svg>' +
|
||||
'</div>' +
|
||||
'<div class="day-body" id="day-body-' + di + '">' +
|
||||
day.meals.map(function(m, mi) { return renderMeal(di, mi); }).join('') +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
});
|
||||
document.getElementById('day-list').innerHTML = html;
|
||||
/* 默认展开周一 */
|
||||
document.getElementById('day-body-0').classList.add('open');
|
||||
document.getElementById('arrow-0').classList.add('open');
|
||||
}
|
||||
|
||||
/* 折叠/展开某天 */
|
||||
function toggleDay(di) {
|
||||
var body = document.getElementById('day-body-' + di);
|
||||
var arrow = document.getElementById('arrow-' + di);
|
||||
body.classList.toggle('open');
|
||||
arrow.classList.toggle('open');
|
||||
}
|
||||
|
||||
/* 更新摄入量 */
|
||||
function updateAmount(di, mi, fi, el) {
|
||||
WEEK[di].meals[mi].foods[fi].amount = el.value;
|
||||
}
|
||||
|
||||
/* 更新热量并重算小计与总计 */
|
||||
function updateKcal(di, mi, fi, el) {
|
||||
WEEK[di].meals[mi].foods[fi].kcal = parseInt(el.value) || 0;
|
||||
document.getElementById('meal-sub-' + di + '-' + mi).textContent = '小计 ' + mealSubtotal(di, mi) + ' kcal';
|
||||
document.getElementById('day-kcal-' + di).textContent = dayTotal(di) + ' kcal';
|
||||
}
|
||||
|
||||
/* 添加食物 */
|
||||
function addFood(di, mi) {
|
||||
WEEK[di].meals[mi].foods.push({ name: '新食物', amount: 100, unit: 'g', kcal: 100 });
|
||||
var body = document.getElementById('day-body-' + di);
|
||||
body.innerHTML = WEEK[di].meals.map(function(m, mi2) { return renderMeal(di, mi2); }).join('');
|
||||
}
|
||||
|
||||
/* 删除食物 */
|
||||
function removeFood(di, mi, fi) {
|
||||
WEEK[di].meals[mi].foods.splice(fi, 1);
|
||||
var body = document.getElementById('day-body-' + di);
|
||||
body.innerHTML = WEEK[di].meals.map(function(m, mi2) { return renderMeal(di, mi2); }).join('');
|
||||
document.getElementById('day-kcal-' + di).textContent = dayTotal(di) + ' kcal';
|
||||
}
|
||||
|
||||
/* 初始化渲染 */
|
||||
renderDayList();
|
||||
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,309 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #f7f8fa; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; position: relative; }
|
||||
.nav-back { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 头部 */
|
||||
.recipe-header { background: linear-gradient(135deg,#1677ff,#0958d9); padding: 16px 20px; color: #fff; }
|
||||
.recipe-header__name { font-size: 18px; font-weight: 700; }
|
||||
.recipe-header__meta { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 6px; }
|
||||
.recipe-header__tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
|
||||
.recipe-header__tag { font-size: 11px; padding: 3px 10px; border-radius: 12px; background: rgba(255,255,255,0.2); }
|
||||
/* 卡片 */
|
||||
.card { background: #fff; border-radius: 12px; margin: 10px 12px 0; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.card__title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
|
||||
/* 引用统计 */
|
||||
.cite-stat { display: flex; gap: 8px; }
|
||||
.cite-stat__item { flex: 1; text-align: center; background: #fafafa; border-radius: 8px; padding: 10px 0; }
|
||||
.cite-stat__val { font-size: 16px; font-weight: 700; color: #1677ff; }
|
||||
.cite-stat__label { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
/* 食堂引用列表 */
|
||||
.canteen-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
|
||||
.canteen-item:last-child { border-bottom: none; }
|
||||
.canteen-item__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.canteen-item__info { flex: 1; min-width: 0; }
|
||||
.canteen-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.canteen-item__meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
/* 一周餐次安排（按天折叠，每天三餐，食物含摄入量与热量） */
|
||||
.day-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
|
||||
.day-card:last-child { margin-bottom: 0; }
|
||||
.day-header { display: flex; align-items: center; justify-content: space-between; padding: 12px; cursor: pointer; }
|
||||
.day-header__day { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.day-header__summary { font-size: 12px; color: #999; }
|
||||
.day-header__kcal { font-size: 12px; color: #fa8c16; font-weight: 600; }
|
||||
.day-header .arrow { transition: transform .2s; flex-shrink: 0; }
|
||||
.day-header .arrow.open { transform: rotate(180deg); }
|
||||
.day-body { display: none; padding: 0 12px 12px; }
|
||||
.day-body.open { display: block; }
|
||||
.meal-block { background: #fafafa; border-radius: 8px; padding: 10px; margin-bottom: 8px; }
|
||||
.meal-block:last-child { margin-bottom: 0; }
|
||||
.meal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
|
||||
.meal-head__name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
|
||||
.meal-head__subtotal { font-size: 12px; color: #fa8c16; font-weight: 600; }
|
||||
.food-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed #f0f0f0; }
|
||||
.food-row:last-child { border-bottom: none; }
|
||||
.food-row__name { flex: 1; font-size: 13px; color: #333; }
|
||||
.food-row__amount { font-size: 12px; color: #666; width: 44px; text-align: right; flex-shrink: 0; }
|
||||
.food-row__kcal { font-size: 12px; color: #fa8c16; font-weight: 600; width: 56px; text-align: right; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<button class="nav-back" onclick="location.href='./recipe-list.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">食谱详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 头部 -->
|
||||
<div class="recipe-header">
|
||||
<div class="recipe-header__name">机关减脂周菜单（第 37 周）</div>
|
||||
<div class="recipe-header__meta">周菜单 · 2026-09-14 至 09-20 · 李营养师</div>
|
||||
<div class="recipe-header__tags">
|
||||
<span class="recipe-header__tag">低脂</span>
|
||||
<span class="recipe-header__tag">均衡营养</span>
|
||||
<span class="recipe-header__tag">已发布</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引用情况 -->
|
||||
<div class="card">
|
||||
<div class="card__title">引用情况</div>
|
||||
<div class="cite-stat">
|
||||
<div class="cite-stat__item"><div class="cite-stat__val">5</div><div class="cite-stat__label">已引用食堂</div></div>
|
||||
<div class="cite-stat__item"><div class="cite-stat__val">3</div><div class="cite-stat__label">待确认</div></div>
|
||||
<div class="cite-stat__item"><div class="cite-stat__val">0</div><div class="cite-stat__label">已拒绝</div></div>
|
||||
</div>
|
||||
<div style="margin-top:12px;">
|
||||
<div class="canteen-item">
|
||||
<div class="canteen-item__icon" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">🏢</div>
|
||||
<div class="canteen-item__info"><div class="canteen-item__name">机关食堂</div><div class="canteen-item__meta">公司机关 · 已排期</div></div>
|
||||
<span class="tag tag-green">已引用</span>
|
||||
</div>
|
||||
<div class="canteen-item">
|
||||
<div class="canteen-item__icon" style="background:linear-gradient(135deg,#e6f4ff,#bdd7ff);">🏭</div>
|
||||
<div class="canteen-item__info"><div class="canteen-item__name">采油一厂食堂</div><div class="canteen-item__meta">采油一厂 · 已排期</div></div>
|
||||
<span class="tag tag-green">已引用</span>
|
||||
</div>
|
||||
<div class="canteen-item">
|
||||
<div class="canteen-item__icon" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🏪</div>
|
||||
<div class="canteen-item__info"><div class="canteen-item__name">信息中心食堂</div><div class="canteen-item__meta">信息技术中心 · 待确认</div></div>
|
||||
<span class="tag tag-orange">待确认</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一周餐次安排 -->
|
||||
<div class="card">
|
||||
<div class="card__title">一周餐次安排</div>
|
||||
<div id="day-list"></div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
/* ===== 一周食谱数据（每天三餐，每餐食物含摄入量与热量） ===== */
|
||||
var WEEK = [
|
||||
{ day: '周一', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '全麦面包', amount: 80, unit: 'g', kcal: 200 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 },
|
||||
{ name: '牛奶', amount: 250, unit: 'ml', kcal: 65 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '清蒸鲈鱼', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '杂粮饭', amount: 200, unit: 'g', kcal: 240 },
|
||||
{ name: '蒜蓉西兰花', amount: 150, unit: 'g', kcal: 60 },
|
||||
{ name: '紫菜蛋花汤', amount: 200, unit: 'ml', kcal: 40 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '香煎鸡胸', amount: 120, unit: 'g', kcal: 200 },
|
||||
{ name: '蔬菜沙拉', amount: 200, unit: 'g', kcal: 80 },
|
||||
{ name: '小米粥', amount: 200, unit: 'g', kcal: 120 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周二', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '燕麦牛奶', amount: 300, unit: 'ml', kcal: 220 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '白灼虾', amount: 150, unit: 'g', kcal: 140 },
|
||||
{ name: '糙米饭', amount: 200, unit: 'g', kcal: 230 },
|
||||
{ name: '清炒时蔬', amount: 150, unit: 'g', kcal: 55 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '蔬菜豆腐汤', amount: 300, unit: 'g', kcal: 150 },
|
||||
{ name: '杂粮馒头', amount: 100, unit: 'g', kcal: 220 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周三', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 },
|
||||
{ name: '豆浆', amount: 250, unit: 'ml', kcal: 80 },
|
||||
{ name: '蒸红薯', amount: 100, unit: 'g', kcal: 90 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '卤牛肉', amount: 100, unit: 'g', kcal: 160 },
|
||||
{ name: '荞麦面', amount: 200, unit: 'g', kcal: 230 },
|
||||
{ name: '凉拌黄瓜', amount: 150, unit: 'g', kcal: 40 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '清炒时蔬', amount: 200, unit: 'g', kcal: 60 },
|
||||
{ name: '玉米', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '菌菇汤', amount: 200, unit: 'g', kcal: 50 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周四', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '杂粮粥', amount: 300, unit: 'g', kcal: 200 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '香煎鸡胸', amount: 150, unit: 'g', kcal: 250 },
|
||||
{ name: '藜麦饭', amount: 150, unit: 'g', kcal: 180 },
|
||||
{ name: '西兰花', amount: 150, unit: 'g', kcal: 60 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '虾仁沙拉', amount: 200, unit: 'g', kcal: 150 },
|
||||
{ name: '全麦面包', amount: 50, unit: 'g', kcal: 120 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周五', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '全麦面包', amount: 80, unit: 'g', kcal: 200 },
|
||||
{ name: '牛奶', amount: 250, unit: 'ml', kcal: 65 },
|
||||
{ name: '香蕉', amount: 100, unit: 'g', kcal: 90 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '清蒸鱼', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '玉米', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '凉拌木耳', amount: 100, unit: 'g', kcal: 40 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '菌菇汤', amount: 300, unit: 'g', kcal: 120 },
|
||||
{ name: '杂粮饭', amount: 150, unit: 'g', kcal: 180 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周六', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 },
|
||||
{ name: '燕麦', amount: 50, unit: 'g', kcal: 190 },
|
||||
{ name: '牛奶', amount: 250, unit: 'ml', kcal: 65 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '白灼虾', amount: 150, unit: 'g', kcal: 140 },
|
||||
{ name: '杂粮饭', amount: 200, unit: 'g', kcal: 240 },
|
||||
{ name: '蔬菜沙拉', amount: 150, unit: 'g', kcal: 60 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '蔬菜沙拉', amount: 200, unit: 'g', kcal: 80 },
|
||||
{ name: '鸡胸肉', amount: 100, unit: 'g', kcal: 170 },
|
||||
{ name: '玉米', amount: 100, unit: 'g', kcal: 110 }
|
||||
]}
|
||||
]},
|
||||
{ day: '周日', meals: [
|
||||
{ icon: '🥣', name: '早餐', foods: [
|
||||
{ name: '豆浆', amount: 250, unit: 'ml', kcal: 80 },
|
||||
{ name: '玉米', amount: 150, unit: 'g', kcal: 160 },
|
||||
{ name: '水煮蛋', amount: 60, unit: 'g', kcal: 70 }
|
||||
]},
|
||||
{ icon: '🍱', name: '午餐', foods: [
|
||||
{ name: '卤牛肉', amount: 100, unit: 'g', kcal: 160 },
|
||||
{ name: '糙米饭', amount: 200, unit: 'g', kcal: 230 },
|
||||
{ name: '清炒时蔬', amount: 150, unit: 'g', kcal: 55 }
|
||||
]},
|
||||
{ icon: '🍽️', name: '晚餐', foods: [
|
||||
{ name: '鸡胸沙拉', amount: 250, unit: 'g', kcal: 200 },
|
||||
{ name: '小米粥', amount: 200, unit: 'g', kcal: 120 }
|
||||
]}
|
||||
]}
|
||||
];
|
||||
|
||||
/* 计算某餐总热量 */
|
||||
function mealSubtotal(di, mi) {
|
||||
return WEEK[di].meals[mi].foods.reduce(function(s, f) { return s + f.kcal; }, 0);
|
||||
}
|
||||
/* 计算某天总热量 */
|
||||
function dayTotal(di) {
|
||||
return WEEK[di].meals.reduce(function(s, m, mi) { return s + mealSubtotal(di, mi); }, 0);
|
||||
}
|
||||
/* 某天三餐小计摘要 */
|
||||
function daySummary(di) {
|
||||
return WEEK[di].meals.map(function(m, mi) { return m.name.charAt(0) + mealSubtotal(di, mi); }).join(' · ');
|
||||
}
|
||||
|
||||
/* 渲染整周折叠卡片（只读） */
|
||||
function renderDayList() {
|
||||
var html = '';
|
||||
WEEK.forEach(function(day, di) {
|
||||
html += '<div class="day-card">' +
|
||||
'<div class="day-header" onclick="toggleDay(' + di + ')">' +
|
||||
'<span class="day-header__day">' + day.day + '</span>' +
|
||||
'<span class="day-header__summary">' + daySummary(di) + '</span>' +
|
||||
'<span class="day-header__kcal">' + dayTotal(di) + ' kcal</span>' +
|
||||
'<svg class="arrow" id="arrow-' + di + '" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="2"><path d="M4 6l4 4 4-4"/></svg>' +
|
||||
'</div>' +
|
||||
'<div class="day-body" id="day-body-' + di + '">' +
|
||||
day.meals.map(function(m, mi) {
|
||||
return '<div class="meal-block">' +
|
||||
'<div class="meal-head"><span class="meal-head__name">' + m.icon + ' ' + m.name + '</span><span class="meal-head__subtotal">小计 ' + mealSubtotal(di, mi) + ' kcal</span></div>' +
|
||||
m.foods.map(function(f) {
|
||||
return '<div class="food-row"><span class="food-row__name">' + f.name + '</span><span class="food-row__amount">' + f.amount + f.unit + '</span><span class="food-row__kcal">' + f.kcal + ' kcal</span></div>';
|
||||
}).join('') +
|
||||
'</div>';
|
||||
}).join('') +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
});
|
||||
document.getElementById('day-list').innerHTML = html;
|
||||
/* 默认展开周一 */
|
||||
document.getElementById('day-body-0').classList.add('open');
|
||||
document.getElementById('arrow-0').classList.add('open');
|
||||
}
|
||||
|
||||
/* 折叠/展开某天 */
|
||||
function toggleDay(di) {
|
||||
var body = document.getElementById('day-body-' + di);
|
||||
var arrow = document.getElementById('arrow-' + di);
|
||||
body.classList.toggle('open');
|
||||
arrow.classList.toggle('open');
|
||||
}
|
||||
|
||||
/* 初始化渲染 */
|
||||
renderDayList();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,175 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #f7f8fa; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; position: relative; }
|
||||
.nav-back { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-add { margin-left: auto; color: #1677ff; font-size: 14px; cursor: pointer; background: none; border: none; font-weight: 600; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #e8e8e8; color: #666; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
.seg-tab.active .badge { background: #e6f4ff; color: #1677ff; }
|
||||
/* 食谱卡片 */
|
||||
.recipe-card { background: #fff; border-radius: 12px; margin: 10px 12px 0; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; }
|
||||
.recipe-card:active { transform: scale(0.98); }
|
||||
.recipe-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||||
.recipe-card__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
|
||||
.recipe-card__info { flex: 1; min-width: 0; }
|
||||
.recipe-card__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.recipe-card__meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.recipe-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid #f5f5f5; }
|
||||
.recipe-card__cite { font-size: 12px; color: #666; }
|
||||
.recipe-card__cite .num { font-weight: 700; color: #1677ff; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
/* 制定食谱按钮 */
|
||||
.fab { position: absolute; right: 20px; bottom: 100px; width: 56px; height: 56px; border-radius: 50%; background: #1677ff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; box-shadow: 0 4px 12px rgba(22,119,255,0.4); z-index: 50; }
|
||||
.fab:active { transform: scale(0.94); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<button class="nav-back" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">我的食谱</span>
|
||||
<!-- [交互] 点击跳转至: ./recipe-create.html -->
|
||||
<button class="nav-add" onclick="location.href='./recipe-create.html'">制定食谱</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab -->
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTab(this,'panel-all')">全部<span class="badge">6</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-pub')">已发布<span class="badge">4</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-draft')">草稿<span class="badge">2</span></div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div id="panel-all">
|
||||
<!-- [交互] 点击跳转至: ./recipe-detail.html -->
|
||||
<div class="recipe-card" onclick="location.href='./recipe-detail.html'">
|
||||
<div class="recipe-card__head">
|
||||
<div class="recipe-card__icon" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">🥗</div>
|
||||
<div class="recipe-card__info">
|
||||
<div class="recipe-card__name">机关减脂周菜单（第 37 周）</div>
|
||||
<div class="recipe-card__meta">周菜单 · 早/中/晚 · 2026-09-14 ~ 09-20</div>
|
||||
</div>
|
||||
<span class="tag tag-green">已发布</span>
|
||||
</div>
|
||||
<div class="recipe-card__footer">
|
||||
<span class="recipe-card__cite">被 <span class="num">5</span> 个食堂引用</span>
|
||||
<span style="font-size:12px;color:#1677ff;">查看详情 ›</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recipe-card" onclick="location.href='./recipe-detail.html'">
|
||||
<div class="recipe-card__head">
|
||||
<div class="recipe-card__icon" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🍚</div>
|
||||
<div class="recipe-card__info">
|
||||
<div class="recipe-card__name">一线高能量周菜单（第 37 周）</div>
|
||||
<div class="recipe-card__meta">周菜单 · 早/中/晚 · 2026-09-14 ~ 09-20</div>
|
||||
</div>
|
||||
<span class="tag tag-green">已发布</span>
|
||||
</div>
|
||||
<div class="recipe-card__footer">
|
||||
<span class="recipe-card__cite">被 <span class="num">3</span> 个食堂引用</span>
|
||||
<span style="font-size:12px;color:#1677ff;">查看详情 ›</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recipe-card" onclick="location.href='./recipe-detail.html'">
|
||||
<div class="recipe-card__head">
|
||||
<div class="recipe-card__icon" style="background:linear-gradient(135deg,#e6f4ff,#bdd7ff);">🍂</div>
|
||||
<div class="recipe-card__info">
|
||||
<div class="recipe-card__name">秋季养生季节菜单</div>
|
||||
<div class="recipe-card__meta">季节菜单 · 早/中/晚 · 2026-09 ~ 11</div>
|
||||
</div>
|
||||
<span class="tag tag-green">已发布</span>
|
||||
</div>
|
||||
<div class="recipe-card__footer">
|
||||
<span class="recipe-card__cite">被 <span class="num">8</span> 个食堂引用</span>
|
||||
<span style="font-size:12px;color:#1677ff;">查看详情 ›</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recipe-card" onclick="location.href='./recipe-detail.html'">
|
||||
<div class="recipe-card__head">
|
||||
<div class="recipe-card__icon" style="background:linear-gradient(135deg,#f9f0ff,#d3adf7);">🥩</div>
|
||||
<div class="recipe-card__info">
|
||||
<div class="recipe-card__name">控糖低 GI 周菜单（第 38 周）</div>
|
||||
<div class="recipe-card__meta">周菜单 · 早/中/晚 · 2026-09-21 ~ 09-27</div>
|
||||
</div>
|
||||
<span class="tag tag-gray">草稿</span>
|
||||
</div>
|
||||
<div class="recipe-card__footer">
|
||||
<span class="recipe-card__cite">尚未发布</span>
|
||||
<span style="font-size:12px;color:#1677ff;">继续编辑 ›</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:90px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="panel-pub" style="display:none;">
|
||||
<div class="recipe-card" onclick="location.href='./recipe-detail.html'">
|
||||
<div class="recipe-card__head">
|
||||
<div class="recipe-card__icon" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">🥗</div>
|
||||
<div class="recipe-card__info"><div class="recipe-card__name">机关减脂周菜单（第 37 周）</div><div class="recipe-card__meta">周菜单 · 2026-09-14 ~ 09-20</div></div>
|
||||
<span class="tag tag-green">已发布</span>
|
||||
</div>
|
||||
<div class="recipe-card__footer"><span class="recipe-card__cite">被 <span class="num">5</span> 个食堂引用</span><span style="font-size:12px;color:#1677ff;">查看详情 ›</span></div>
|
||||
</div>
|
||||
<div style="height:90px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="panel-draft" style="display:none;">
|
||||
<div class="recipe-card" onclick="location.href='./recipe-detail.html'">
|
||||
<div class="recipe-card__head">
|
||||
<div class="recipe-card__icon" style="background:linear-gradient(135deg,#f9f0ff,#d3adf7);">🥩</div>
|
||||
<div class="recipe-card__info"><div class="recipe-card__name">控糖低 GI 周菜单（第 38 周）</div><div class="recipe-card__meta">周菜单 · 2026-09-21 ~ 09-27</div></div>
|
||||
<span class="tag tag-gray">草稿</span>
|
||||
</div>
|
||||
<div class="recipe-card__footer"><span class="recipe-card__cite">尚未发布</span><span style="font-size:12px;color:#1677ff;">继续编辑 ›</span></div>
|
||||
</div>
|
||||
<div style="height:90px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 制定食谱悬浮按钮 -->
|
||||
<div class="fab" onclick="location.href='./recipe-create.html'">＋</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为营养师 */
|
||||
sessionStorage.setItem('appRole', 'nutritionist');
|
||||
|
||||
function switchTab(el, panelId) {
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
['panel-all','panel-pub','panel-draft'].forEach(function(id) {
|
||||
document.getElementById(id).style.display = id === panelId ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -17,7 +17,7 @@
|
||||
│ ├── 吃动平衡
|
||||
│ ├── 饮食记录 → 饮食录入 → 拍照识别
|
||||
│ ├── 运动记录 → 运动录入
|
||||
│ ├── 体重记录 → 详细报告 / 体脂仪报告 / 身高秤报告
|
||||
│ ├── 体重记录 → 详细报告 / 体脂仪报告 / 体重秤报告
|
||||
│ ├── 今日饮食建议
|
||||
│ ├── 智能运动计划
|
||||
│ ├── 排行榜
|
||||
@@ -89,7 +89,7 @@ stateDiagram-v2
|
||||
| 17 | 体重记录 | weight-detail-v2.html | 页面 |
|
||||
| 18 | 详细报告 | report-detail.html | 页面 |
|
||||
| 19 | 体脂仪报告 | body-fat-report.html | 页面 |
|
||||
| 20 | 身高秤报告 | height-scale-report.html | 页面 |
|
||||
| 20 | 体重秤报告 | height-scale-report.html | 页面 |
|
||||
| 21 | 体重报告 | weight-report.html | 页面 |
|
||||
| 22 | 数据明细 | weight-record-detail-v2.html | 页面 |
|
||||
| 23 | 排行榜 | weight-ranking.html | 页面 |
|
||||
@@ -693,9 +693,9 @@ stateDiagram-v2
|
||||
- 无记录日期显示空状态（"立即称重"按钮）
|
||||
- BMI 分档：<18.5 偏瘦 / 18.5-24 正常 / 24-28 超重 / ≥28 肥胖
|
||||
- 非自记来源（蓝牙称/体重秤/体脂仪）记录可点击查看详细报告，自记不可点击；蓝牙称跳 report-detail.html，体脂仪跳 body-fat-report.html，体重秤跳 height-scale-report.html
|
||||
- 原"记录体重"底部按钮已移除，记录入口收敛至数据来源卡片的"自记"卡片；原"身高秤"来源在本页统一更名为"体重秤"（对应报告页 height-scale-report.html 仍为身高秤报告）
|
||||
- 原"记录体重"底部按钮已移除，记录入口收敛至数据来源卡片的"自记"卡片
|
||||
- 当日最新记录与上一次记录对比显示变化，无历史记录时显示"首次记录"
|
||||
- 体重数据来源目前有体检数据、自记数据、后台管理员记录、身高秤、蓝牙秤、体脂仪这6种，其中体检数据和后台管理员需要更新最新体重但记录不计入员工打卡行动，另外三种测量设备的数据可能出现延迟上传的情况，系统至多允许补录前一天的体重数据（定时修正前一天的行动状态和排名数据），再早的数据补传后不计入体重管理行动体重打卡
|
||||
- 体重数据来源目前有体检数据、自记数据、后台管理员记录、体重秤、蓝牙秤、体脂仪这6种，其中体检数据和后台管理员需要更新最新体重但记录不计入员工打卡行动，另外三种测量设备的数据可能出现延迟上传的情况，系统至多允许补录前一天的体重数据（定时修正前一天的行动状态和排名数据），再早的数据补传后不计入体重管理行动体重打卡
|
||||
---
|
||||
|
||||
### 18. 详细报告（report-detail.html）
|
||||
@@ -718,7 +718,7 @@ stateDiagram-v2
|
||||
| 蓝牙秤（device=bluetooth） | 基础指标、身体成分、脂肪分析、体态管理、体重管控、细胞液分析（8电极）、进阶成分（8电极）、躯干/四肢脂肪（8电极）、躯干/四肢肌肉（8电极） |
|
||||
| 体脂仪（device=fat） | 基础指标、体脂分析、体成分、体重管理、节段脂肪、节段肌肉 |
|
||||
|
||||
注：体重记录页中"体重秤"（原身高秤）来源的记录已改跳转至独立页面 height-scale-report.html，"体脂仪"来源的记录已改跳转至 body-fat-report.html，本页 device=fat / device=scale 模式保留用于兼容。
|
||||
注：体重记录页中"体重秤"来源的记录已改跳转至独立页面 height-scale-report.html，"体脂仪"来源的记录已改跳转至 body-fat-report.html，本页 device=fat / device=scale 模式保留用于兼容。
|
||||
|
||||
**交互说明：**
|
||||
- 点击返回按钮返回来源页
|
||||
@@ -750,16 +750,16 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 20. 身高秤报告（height-scale-report.html）
|
||||
### 20. 体重秤报告（height-scale-report.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示身高秤单次测量的身体成分报告，含身高、体重及身体成分、体态相关指标。
|
||||
**功能说明：** 展示体重秤单次测量的身体成分报告，含身高、体重及身体成分、体态相关指标。
|
||||
|
||||
**页面状态：** 从体重记录页（weight-detail-v2.html）记录明细列表中体重秤（原身高秤）来源的记录跳转进入，页面只读。
|
||||
**页面状态：** 从体重记录页（weight-detail-v2.html）记录明细列表中体重秤来源的记录跳转进入，页面只读。
|
||||
|
||||
**主要UI元素：**
|
||||
- 报告头部（蓝青渐变卡片）：测量时间、设备标签「身高秤」、当前体重（大字）、BMI 状态标签、较上次变化
|
||||
- 报告头部（蓝青渐变卡片）：测量时间、设备标签「体重秤」、当前体重（大字）、BMI 状态标签、较上次变化
|
||||
- 基础指标：身高 / 体重 / BMI / 体脂率（含 BMI 指示条：消瘦/正常/超重/肥胖四段色轨 + 指针）
|
||||
- 身体成分：体脂肪 / 水分率 / 水分量 / 肌肉率 / 肌肉量 / 骨量 / 去脂体重
|
||||
- 体态分析：内脏脂肪 / 体型 / 理想体重 / 超重百分比 / 体表面积
|
||||
|
||||
@@ -350,7 +350,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-
|
||||
<section class="section" id="sec-history">
|
||||
<div class="section__header">
|
||||
<h2 class="section__title">四、历史记录与报告详情</h2>
|
||||
<span class="section__count">16 屏</span>
|
||||
<span class="section__count">14 屏</span>
|
||||
</div>
|
||||
<div class="sub-title">记录明细（周视图 / 月历浮层 / 数据点浮签 / 设备来源）</div>
|
||||
<div class="scroll-row">
|
||||
@@ -408,16 +408,8 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">详细报告（report-detail.html 三设备 + 体脂 / 身高报告）</div>
|
||||
<div class="sub-title">详细报告（report-detail.html 蓝牙秤 + 体脂 / 身高报告）</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/report-detail-fat.jpg','详细报告 · 体脂仪')">
|
||||
<div class="card__img"><img src="screenshots/report-detail-fat.jpg" alt=""></div>
|
||||
<div class="card__label">报告 · 体脂仪</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/report-detail-scale.jpg','详细报告 · 体重秤')">
|
||||
<div class="card__img"><img src="screenshots/report-detail-scale.jpg" alt=""></div>
|
||||
<div class="card__label">报告 · 体重秤</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/report-detail-bluetooth.jpg','详细报告 · 蓝牙秤')">
|
||||
<div class="card__img"><img src="screenshots/report-detail-bluetooth.jpg" alt=""></div>
|
||||
<div class="card__label">报告 · 蓝牙秤</div>
|
||||
@@ -426,9 +418,9 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-
|
||||
<div class="card__img"><img src="screenshots/body-fat-report.jpg" alt=""></div>
|
||||
<div class="card__label">体脂报告</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/height-scale-report.jpg','身高测量报告')">
|
||||
<div class="card" onclick="openLightbox('screenshots/height-scale-report.jpg','体重秤报告')">
|
||||
<div class="card__img"><img src="screenshots/height-scale-report.jpg" alt=""></div>
|
||||
<div class="card__label">身高测量报告</div>
|
||||
<div class="card__label">体重秤报告</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
@@ -87,7 +87,7 @@ function goBack() {
|
||||
}
|
||||
|
||||
/* ========================================================================
|
||||
* 身高秤报告数据
|
||||
* 体重秤报告数据
|
||||
* 字段名沿用统一后的命名：脂肪率→体脂率、脂肪量→体脂肪
|
||||
* ======================================================================== */
|
||||
var report = {
|
||||
@@ -183,7 +183,7 @@ var changeText = (report.weightChange < 0 ? '' : '+') + fmtVal(report.weightChan
|
||||
document.getElementById('reportHeader').innerHTML =
|
||||
'<div class="report-header__top">' +
|
||||
'<div class="report-header__time"><svg width="14" height="14" fill="none"><circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="1.5"/><path d="M7 4v3.5l2.5 1.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> ' + report.time + '</div>' +
|
||||
'<span class="device-tag device-tag--stadiometer">身高秤</span>' +
|
||||
'<span class="device-tag device-tag--stadiometer">体重秤</span>' +
|
||||
'</div>' +
|
||||
'<div class="report-header__main">' +
|
||||
'<div class="report-header__weight"><span class="report-header__weight-num">' + fmtVal(report.weight) + '</span><span class="report-header__weight-unit">kg</span></div>' +
|
||||
|
||||
+36
-4
@@ -33,7 +33,7 @@
|
||||
body { background: var(--background); font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Segoe UI', sans-serif; color: var(--text-primary); min-height: 100vh; }
|
||||
|
||||
/* ===== Header ===== */
|
||||
.header { position: relative; background: linear-gradient(135deg, #0b3d91 0%, var(--primary) 40%, #4facfe 100%); color: #fff; padding: 40px 48px 20px; overflow: hidden; }
|
||||
.header { position: sticky; top: 0; z-index: 300; background: linear-gradient(135deg, #0b3d91 0%, var(--primary) 40%, #4facfe 100%); color: #fff; padding: 40px 48px 20px; overflow: hidden; }
|
||||
.header::before { content: ''; position: absolute; top: -60px; right: -40px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%); border-radius: 50%; }
|
||||
.header::after { content: ''; position: absolute; bottom: -80px; left: 20%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); border-radius: 50%; }
|
||||
.header__inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; text-align: center; }
|
||||
@@ -219,6 +219,7 @@ const SITE_MAP = [
|
||||
{ file:'config-standard-category.html', label:'体检项目分类' },
|
||||
{ file:'config-standard-basic.html', label:'体检基本项目' },
|
||||
{ file:'config-standard-hospital.html', label:'医院体检项目' },
|
||||
{ file:'agent-device.html', label:'前置机管理' },
|
||||
{ file:'pre-hospital-scope.html', label:'医院承检范围' },
|
||||
{ file:'pre-plan.html', label:'单位体检计划管理' },
|
||||
{ file:'pre-quota-group.html', label:'群体额度配置' },
|
||||
@@ -238,6 +239,7 @@ const SITE_MAP = [
|
||||
{ file:'pre-special-cta.html', label:'冠脉CTA体检人员' },
|
||||
{ file:'pre-special-hospital.html', label:'指定员工体检医院' },
|
||||
{ file:'mid-appointment-track.html', label:'体检预约' },
|
||||
{ file:'mid-appointment-track2.html', label:'体检预约跟踪' },
|
||||
{ file:'mid-selected-items.html', label:'已选项目' },
|
||||
{ file:'mid-participation.html', label:'已检员工' },
|
||||
{ file:'mid-unit-appointment.html', label:'单位预约人数统计' },
|
||||
@@ -252,6 +254,8 @@ const SITE_MAP = [
|
||||
{ file:'mid-unit-expected.html', label:'签约单位应检人数' },
|
||||
{ file:'post-unit-count.html', label:'单位体检人数统计' },
|
||||
{ file:'post-unit-cost-stat.html', label:'单位体检费用统计' },
|
||||
{ file:'post-unit-item-stat.html', label:'单位体检项目统计' },
|
||||
{ file:'post-result-comprehensive-stat.html', label:'项目结果综合统计' },
|
||||
{ file:'post-hospital-count.html', label:'医院体检人数统计' },
|
||||
{ file:'post-doctor-count.html', label:'医生检查人数统计' },
|
||||
{ file:'post-item-stat.html', label:'医院体检项目统计' },
|
||||
@@ -271,7 +275,10 @@ const SITE_MAP = [
|
||||
{ file:'post-disease-info.html', label:'病种信息配置' },
|
||||
{ file:'post-conclusion-disease.html', label:'体检结论关联病种' },
|
||||
{ file:'post-auto-select-disease.html', label:'员工病种信息' },
|
||||
{ file:'agent-device.html', label:'前置机管理 · 常规体检前置服务' },
|
||||
{ file:'post-imc-user.html', label:'用户体检信息' },
|
||||
{ file:'post-imc-class.html', label:'用户影像文件分类' },
|
||||
{ file:'post-imc-info.html', label:'用户影像文件详细' },
|
||||
{ file:'post-imc-log.html', label:'文件处理日志' },
|
||||
{ file:'exception-dirty.html', label:'系统脏数据' },
|
||||
{ file:'exception-result.html', label:'结果异常' }
|
||||
]},
|
||||
@@ -701,7 +708,7 @@ const SITE_MAP = [
|
||||
{ file:'weight-detail-v2.html', label:'体重明细' },
|
||||
{ file:'report-detail.html', label:'测量报告详情' },
|
||||
{ file:'body-fat-report.html', label:'体脂报告' },
|
||||
{ file:'height-scale-report.html', label:'身高测量报告' },
|
||||
{ file:'height-scale-report.html', label:'体重秤报告' },
|
||||
{ file:'diet-advice-v2.html', label:'膳食建议' },
|
||||
{ file:'exercise-advice-v2.html', label:'运动建议' },
|
||||
{ file:'weight-record-detail-v2.html', label:'体重记录明细' },
|
||||
@@ -833,7 +840,7 @@ const SITE_MAP = [
|
||||
{ file:'phone-list.html', label:'手机号' }
|
||||
]}
|
||||
]},
|
||||
{ id:'emergency-app', label:'健康应急 APP', icon:'emergency', color:'#ffc069',
|
||||
{ id:'emergency-app', label:'健康服务 APP', icon:'emergency', color:'#ffc069',
|
||||
roles:[
|
||||
{ role:'咨询专家', id:'expert', modules:[
|
||||
{ name:'工作台', dir:'emergency-app/expert/workbench', prd:'emergency-app/expert/doc/PRD.md', done:true, pages:[
|
||||
@@ -952,6 +959,31 @@ const SITE_MAP = [
|
||||
{file:'index.html',label:'个人中心'},
|
||||
{file:'edit-profile.html',label:'修改个人信息'},{file:'change-pwd.html',label:'修改密码'}
|
||||
]}
|
||||
]},
|
||||
{ role:'营养师', id:'nutritionist', modules:[
|
||||
{name:'工作台',dir:'emergency-app/nutritionist/workbench',pages:[
|
||||
{file:'index.html',label:'工作台首页'},
|
||||
{file:'consult-chat.html',label:'营养咨询聊天'},
|
||||
{file:'consult-chat-done.html',label:'营养咨询聊天(已结束)'},
|
||||
{file:'employee-list.html',label:'员工营养管理'},
|
||||
{file:'employee-detail.html',label:'员工营养详情'},
|
||||
{file:'employee-health.html',label:'员工健康档案'},
|
||||
{file:'employee-diet-history.html',label:'员工饮食记录'},
|
||||
{file:'plan-detail.html',label:'营养方案详情'},
|
||||
{file:'recipe-list.html',label:'我的食谱'},
|
||||
{file:'recipe-create.html',label:'制定食谱'},
|
||||
{file:'recipe-detail.html',label:'食谱详情'}
|
||||
]},
|
||||
{name:'知识库',dir:'emergency-app/nutritionist/knowledge',pages:[
|
||||
{file:'index.html',label:'知识库首页'},{file:'detail.html',label:'知识详情'}
|
||||
]},
|
||||
{name:'我的',dir:'emergency-app/nutritionist/profile',pages:[
|
||||
{file:'index.html',label:'个人中心'},
|
||||
{file:'edit-profile.html',label:'编辑资料'},
|
||||
{file:'schedule.html',label:'排班设置'},
|
||||
{file:'stats.html',label:'营养咨询统计'},
|
||||
{file:'change-pwd.html',label:'修改密码'}
|
||||
]}
|
||||
]}
|
||||
],
|
||||
shared:[
|
||||
|
||||
@@ -1,209 +0,0 @@
|
||||
/**
|
||||
* 体重管理模块统一截图脚本
|
||||
* 规则（参考健康监测 screenshot-final.mjs）：
|
||||
* - phone-shell 尺寸 390 宽
|
||||
* - 'fixed'：弹窗/浮层类截图，严格 390×844，弹窗叠在当前页面之上
|
||||
* - 'auto' ：纯页面截图，短页面最低 844，长页面按真实内容展开
|
||||
* 用法：node screenshot-weight.mjs [输出名子串过滤...]
|
||||
*/
|
||||
import { chromium } from 'playwright';
|
||||
import { fileURLToPath } from 'url';
|
||||
import path from 'path';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const docDir = path.join(__dirname, 'employee-app', 'weight-management', 'doc');
|
||||
const root = path.join(__dirname, 'employee-app', 'weight-management');
|
||||
|
||||
const tasks = [
|
||||
// ========== 目标承诺与签署 ==========
|
||||
{ html: 'goal-management-v2.html', out: 'goal-management', mode: 'auto' },
|
||||
{ html: 'goal-management-v2.html', out: 'goal-management-personal', mode: 'auto', eval: "switchType('personal')" },
|
||||
{ html: 'goal-management-v2.html', out: 'goal-management-activity', mode: 'fixed', eval: 'openActivitySheet()' },
|
||||
{ html: 'goal-management-v2.html', out: 'goal-management-confirm', mode: 'fixed', eval: "openActivitySheet();var i=document.querySelector('#actSheet .sheet-item');i.click();confirmActivity();closeActivitySheet();submitGoal()" },
|
||||
{ html: 'goal-management-v2.html', out: 'goal-management-confirm-personal', mode: 'fixed', eval: "switchType('personal');submitGoal()" },
|
||||
{ html: 'goal-detail-v2.html', out: 'goal-detail', mode: 'auto', query: '?type=activity&state=review' },
|
||||
{ html: 'goal-detail-v2.html', out: 'goal-detail-approved', mode: 'auto', query: '?type=activity&state=approved' },
|
||||
{ html: 'goal-detail-v2.html', out: 'goal-detail-rejected', mode: 'auto', query: '?type=activity&state=rejected' },
|
||||
{ html: 'goal-detail-v2.html', out: 'goal-detail-signed', mode: 'auto', query: '?type=activity&state=signed' },
|
||||
{ html: 'goal-detail-v2.html', out: 'goal-detail-ended', mode: 'auto', query: '?type=activity&state=ended' },
|
||||
{ html: 'goal-detail-v2.html', out: 'goal-detail-personal', mode: 'auto', query: '?type=personal' },
|
||||
{ html: 'goal-detail-v2.html', out: 'goal-detail-edit', mode: 'fixed', query: '?type=personal', eval: 'openEditGoalModal()' },
|
||||
{ html: 'goal-detail-v2.html', out: 'goal-detail-menu', mode: 'fixed', query: '?type=activity&state=signed', eval: "document.getElementById('navMore').click()" },
|
||||
{ html: 'promise-signing.html', out: 'promise-signing', mode: 'auto', landscape: true },
|
||||
{ html: 'promise-signing.html', out: 'promise-signing-giveup', mode: 'fixed', landscape: true, eval: 'openGiveup()' },
|
||||
{ html: 'my-promise.html', out: 'my-promise', mode: 'auto' },
|
||||
{ html: 'goal-history-v2.html', out: 'goal-history', mode: 'auto' },
|
||||
{ html: 'goal-history-v2.html', out: 'goal-history-personal', mode: 'auto', eval: "switchTab('personal')" },
|
||||
{ html: 'activity-detail.html', out: 'activity-detail', mode: 'auto' },
|
||||
{ html: 'basic-info.html', out: 'basic-info', mode: 'auto' },
|
||||
{ html: 'basic-info.html', out: 'basic-info-height', mode: 'fixed', eval: 'openHeightSheet()' },
|
||||
{ html: 'basic-info.html', out: 'basic-info-activity', mode: 'fixed', eval: 'openSheet()' },
|
||||
|
||||
// ========== 体重管理主页 ==========
|
||||
{ html: 'weight-main-v2.html', out: 'weight-main', mode: 'auto', query: '?type=hasact-signed' },
|
||||
{ html: 'weight-main-v2.html', out: 'weight-main-review', mode: 'auto', query: '?type=hasact-review' },
|
||||
{ html: 'weight-main-v2.html', out: 'weight-main-approved', mode: 'auto', query: '?type=hasact-approved' },
|
||||
{ html: 'weight-main-v2.html', out: 'weight-main-rejected', mode: 'auto', query: '?type=hasact-rejected' },
|
||||
{ html: 'weight-main-v2.html', out: 'weight-main-personal', mode: 'auto', query: '?type=personal' },
|
||||
{ html: 'weight-main-v2.html', out: 'weight-main-none', mode: 'auto', query: '?type=none' },
|
||||
{ html: 'weight-main-v2.html', out: 'weight-main-record', mode: 'fixed', query: '?type=hasact-signed', eval: 'openRecordSheet()' },
|
||||
{ html: 'weight-main-v2.html', out: 'weight-main-record-success', mode: 'fixed', query: '?type=hasact-signed', eval: "openRecordSheet();submitRecord()" },
|
||||
|
||||
// ========== 每日打卡（吃/动/体重） ==========
|
||||
{ html: 'eat-checkin-v2.html', out: 'eat-checkin', mode: 'auto' },
|
||||
{ html: 'eat-checkin-v2.html', out: 'eat-checkin-lunch', mode: 'auto', query: '?meal=lunch' },
|
||||
{ html: 'eat-checkin-v2.html', out: 'eat-checkin-recorded', mode: 'auto', eval: "selectCategory('recorded')" },
|
||||
{ html: 'eat-checkin-v2.html', out: 'eat-checkin-bag', mode: 'fixed', eval: 'openBagPanel()' },
|
||||
{ html: 'eat-checkin-v2.html', out: 'eat-checkin-gram', mode: 'fixed', eval: "var d;Object.keys(foodData).some(function(k){return foodData[k].items.some(function(it){if(it.name){d=it;return true}})});openGramPanel(d.id)" },
|
||||
{ html: 'eat-checkin-v2.html', out: 'eat-checkin-success', mode: 'fixed', eval: 'submitCheckin()' },
|
||||
{ html: 'eat-checkin-v2.html', out: 'eat-checkin-meals', mode: 'fixed', eval: "document.querySelector('.filter-row__meal-btn').click()" },
|
||||
{ html: 'exercise-checkin-v2.html', out: 'exercise-checkin', mode: 'auto' },
|
||||
{ html: 'exercise-checkin-v2.html', out: 'exercise-checkin-recorded', mode: 'auto', eval: "selectCategory('recorded')" },
|
||||
{ html: 'exercise-checkin-v2.html', out: 'exercise-checkin-bag', mode: 'fixed', eval: 'openBagPanel()' },
|
||||
{ html: 'exercise-checkin-v2.html', out: 'exercise-checkin-duration', mode: 'fixed', eval: "var d;Object.keys(exerciseData).some(function(k){return exerciseData[k].items.some(function(it){if(it.name){d=it;return true}})});openDurPanel(d.id)" },
|
||||
{ html: 'exercise-checkin-v2.html', out: 'exercise-checkin-success', mode: 'fixed', eval: 'submitCheckin()' },
|
||||
{ html: 'scan-checkin.html', out: 'scan-checkin', mode: 'fixed' },
|
||||
{ html: 'scan-checkin.html', out: 'scan-checkin-analyzing', mode: 'fixed', eval: "takePhoto();clearInterval(analyzeTimer);analyzeTimer=null;setTimeout(function(){document.getElementById('analyzingBar').style.width='45%';document.getElementById('analyzingSub').textContent='正在匹配食物数据库...'},300)", wait: 900 },
|
||||
{ html: 'scan-checkin.html', out: 'scan-checkin-result', mode: 'fixed', eval: 'showResult()' },
|
||||
|
||||
// ========== 历史记录 ==========
|
||||
{ html: 'weight-record-detail-v2.html', out: 'weight-record-detail', mode: 'auto' },
|
||||
{ html: 'weight-record-detail-v2.html', out: 'weight-record-detail-activity', mode: 'auto', eval: "switchTab('activity')" },
|
||||
{ html: 'eat-detail-v2.html', out: 'eat-detail', mode: 'auto' },
|
||||
{ html: 'eat-detail-v2.html', out: 'eat-detail-month', mode: 'fixed', eval: 'toggleMonthPicker()' },
|
||||
{ html: 'exercise-detail-v2.html', out: 'exercise-detail', mode: 'auto' },
|
||||
{ html: 'exercise-detail-v2.html', out: 'exercise-detail-month', mode: 'fixed', eval: 'toggleMonthPicker()' },
|
||||
{ html: 'exercise-detail-v2.html', out: 'exercise-detail-tip', mode: 'fixed', eval: "document.querySelector('.chart-dot').click()" },
|
||||
{ html: 'eat-exercise-detail-v2.html', out: 'eat-exercise-detail', mode: 'auto' },
|
||||
{ html: 'eat-exercise-detail-v2.html', out: 'eat-exercise-detail-month', mode: 'fixed', eval: 'toggleMonthPicker()' },
|
||||
{ html: 'weight-detail-v2.html', out: 'weight-detail', mode: 'auto' },
|
||||
{ html: 'weight-detail-v2.html', out: 'weight-detail-record', mode: 'fixed', eval: 'openRecordSheet()' },
|
||||
{ html: 'weight-detail-v2.html', out: 'weight-detail-month', mode: 'fixed', eval: 'toggleMonthPicker()' },
|
||||
{ html: 'weight-detail-v2.html', out: 'weight-detail-tip', mode: 'fixed', eval: "document.querySelector('.chart-dot').click()" },
|
||||
{ html: 'report-detail.html', out: 'report-detail-fat', mode: 'auto', query: '?device=fat' },
|
||||
{ html: 'report-detail.html', out: 'report-detail-scale', mode: 'auto', query: '?device=scale' },
|
||||
{ html: 'report-detail.html', out: 'report-detail-bluetooth', mode: 'auto', query: '?device=bluetooth' },
|
||||
{ html: 'body-fat-report.html', out: 'body-fat-report', mode: 'auto' },
|
||||
{ html: 'height-scale-report.html', out: 'height-scale-report', mode: 'auto' },
|
||||
|
||||
// ========== 建议与报告 ==========
|
||||
{ html: 'diet-advice-v2.html', out: 'diet-advice', mode: 'auto' },
|
||||
{ html: 'diet-advice-v2.html', out: 'diet-advice-detail', mode: 'fixed', eval: "openFoodDetail('breakfast',0)" },
|
||||
{ html: 'diet-advice-v2.html', out: 'diet-advice-dislike', mode: 'fixed', eval: 'showDislikeSheet()' },
|
||||
{ html: 'diet-advice-v2.html', out: 'diet-advice-nutrition', mode: 'fixed', eval: 'showNutritionEmpty(true)' },
|
||||
{ html: 'diet-advice-v2.html', out: 'diet-advice-nutrition-tab', mode: 'auto', eval: "switchTab('nutrition')" },
|
||||
{ html: 'diet-advice-v2.html', out: 'diet-advice-month', mode: 'fixed', eval: 'toggleMonthPicker()' },
|
||||
{ html: 'exercise-advice-v2.html', out: 'exercise-advice', mode: 'auto' },
|
||||
{ html: 'exercise-advice-v2.html', out: 'exercise-advice-month', mode: 'fixed', eval: 'toggleMonthPicker()' },
|
||||
{ html: 'weight-report.html', out: 'weight-report', mode: 'auto', query: '?type=hasact' },
|
||||
{ html: 'weight-report.html', out: 'weight-report-personal', mode: 'auto', query: '?type=personal' },
|
||||
{ html: 'weight-report.html', out: 'weight-report-none', mode: 'auto', query: '?type=none' },
|
||||
{ html: 'weight-ranking.html', out: 'weight-ranking', mode: 'auto', query: '?type=hasact' },
|
||||
{ html: 'weight-ranking.html', out: 'weight-ranking-personal', mode: 'auto', query: '?type=personal' },
|
||||
{ html: 'weight-ranking.html', out: 'weight-ranking-none', mode: 'auto', query: '?type=none' },
|
||||
|
||||
// ========== 蓝牙设备 ==========
|
||||
{ html: 'bluetooth-scale-v2.html', out: 'bluetooth-scale', mode: 'auto', query: '#paired' },
|
||||
{ html: 'bluetooth-scale-v2.html', out: 'bluetooth-scale-empty', mode: 'auto' },
|
||||
{ html: 'bluetooth-device-members-v2.html', out: 'bluetooth-device-members', mode: 'auto', query: '?device=s1' },
|
||||
{ html: 'bluetooth-device-members-v2.html', out: 'bluetooth-device-members-empty', mode: 'auto', query: '?device=b2' },
|
||||
{ html: 'bluetooth-device-members-v2.html', out: 'bluetooth-device-members-delete', mode: 'fixed', query: '?device=s1', eval: "document.querySelector('.action-btn--delete').click()" },
|
||||
{ html: 'bluetooth-device-members-v2.html', out: 'bluetooth-device-members-sync', mode: 'fixed', query: '?device=s1', eval: 'syncMembers()', wait: 1600 },
|
||||
{ html: 'bluetooth-search-v2.html', out: 'bluetooth-search', mode: 'auto' },
|
||||
{ html: 'bluetooth-wifi-v2.html', out: 'bluetooth-wifi', mode: 'auto' },
|
||||
];
|
||||
|
||||
(async () => {
|
||||
const filters = process.argv.slice(2);
|
||||
const runTasks = filters.length ? tasks.filter(t => filters.some(f => t.out.includes(f))) : tasks;
|
||||
|
||||
const browser = await chromium.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
|
||||
const context = await browser.newContext({ viewport: { width: 390, height: 4000 } });
|
||||
|
||||
for (const t of runTasks) {
|
||||
const page = await context.newPage();
|
||||
const filePath = path.join(root, t.html);
|
||||
const url = `file:///${filePath.replace(/\\/g, '/')}${t.query || ''}`;
|
||||
await page.goto(url, { waitUntil: 'networkidle' });
|
||||
|
||||
if (t.eval) {
|
||||
await page.evaluate(t.eval).catch(e => console.log(`! eval failed [${t.out}]: ${e.message}`));
|
||||
await page.waitForTimeout(t.wait || 300);
|
||||
}
|
||||
|
||||
if (t.landscape) {
|
||||
// 横屏页：phone-shell 固定 844×390，不展开、按元素原尺寸截取
|
||||
await page.evaluate(() => {
|
||||
const shell = document.querySelector('.phone-shell');
|
||||
if (shell) {
|
||||
shell.style.borderRadius = '0';
|
||||
shell.style.boxShadow = 'none';
|
||||
}
|
||||
document.body.style.padding = '0';
|
||||
document.body.style.margin = '0';
|
||||
document.body.style.minHeight = 'auto';
|
||||
document.body.style.background = '#fff';
|
||||
document.documentElement.style.display = 'block';
|
||||
});
|
||||
await page.setViewportSize({ width: 844, height: 390 });
|
||||
await page.waitForTimeout(200);
|
||||
} else if (t.mode === 'fixed') {
|
||||
await page.evaluate(() => {
|
||||
const shell = document.querySelector('.phone-shell');
|
||||
if (shell) {
|
||||
shell.style.borderRadius = '0';
|
||||
shell.style.boxShadow = 'none';
|
||||
}
|
||||
document.body.style.padding = '0';
|
||||
document.body.style.minHeight = 'auto';
|
||||
document.body.style.background = '#fff';
|
||||
});
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.waitForTimeout(200);
|
||||
} else {
|
||||
await page.evaluate(() => {
|
||||
const shell = document.querySelector('.phone-shell');
|
||||
if (shell) {
|
||||
shell.style.height = 'auto';
|
||||
shell.style.minHeight = '844px';
|
||||
shell.style.maxHeight = 'none';
|
||||
shell.style.borderRadius = '0';
|
||||
shell.style.boxShadow = 'none';
|
||||
shell.style.overflow = 'visible';
|
||||
shell.style.display = 'block';
|
||||
}
|
||||
document.querySelectorAll('.scroll-content, .page-content, .main-content, .list-wrap, .content').forEach(c => {
|
||||
c.style.overflow = 'visible';
|
||||
c.style.maxHeight = 'none';
|
||||
c.style.height = 'auto';
|
||||
c.style.flex = 'none';
|
||||
});
|
||||
document.body.style.padding = '0';
|
||||
document.body.style.minHeight = 'auto';
|
||||
document.body.style.background = '#fff';
|
||||
});
|
||||
await page.waitForTimeout(300);
|
||||
const measured = await page.evaluate(() => {
|
||||
const shell = document.querySelector('.phone-shell');
|
||||
if (!shell) return document.body.scrollHeight;
|
||||
return Math.ceil(shell.getBoundingClientRect().height);
|
||||
});
|
||||
const h = Math.max(measured, 844);
|
||||
await page.setViewportSize({ width: 390, height: h });
|
||||
await page.waitForTimeout(150);
|
||||
}
|
||||
|
||||
const shell = await page.$('.phone-shell');
|
||||
const target = shell || page;
|
||||
await target.screenshot({
|
||||
path: path.join(docDir, 'screenshots', `${t.out}.jpg`),
|
||||
type: 'jpeg',
|
||||
quality: 85,
|
||||
});
|
||||
console.log(`✓ ${t.out}.jpg [${t.mode}]`);
|
||||
await page.close();
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
console.log(`\n完成！共截取 ${runTasks.length} 张`);
|
||||
})();
|
||||
@@ -45,6 +45,32 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.filter-select{height:36px;min-width:140px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;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;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;}
|
||||
.filter-input{height:36px;min-width:140px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
/* 单位部门级联筛选 + 站点搜索下拉 */
|
||||
.org-wrap{position:relative;display:inline-block;}
|
||||
.org-trigger{height:36px;min-width:130px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;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;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.org-trigger.open,.org-trigger:hover{border-color:var(--primary);}
|
||||
.org-panel{display:none;position:absolute;top:36px;left:0;z-index:310;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);width:380px;}
|
||||
.org-panel.open{display:flex;}
|
||||
.org-col{flex:1;overflow-y:auto;max-height:200px;border-right:1px solid var(--border);}
|
||||
.org-col:last-child{border-right:none;}
|
||||
.org-col__title{padding:6px 12px;font-size:var(--font-sm);color:var(--text-placeholder);background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.org-item{padding:8px 12px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;}
|
||||
.org-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.org-item.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
.station-search{position:relative;}
|
||||
.station-search__panel{display:none;position:absolute;top:34px;left:0;right:0;z-index:320;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);max-height:240px;overflow-y:auto;}
|
||||
.station-search__panel.open{display:block;}
|
||||
.station-search__item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;}
|
||||
.station-search__item:hover{background:#F0F8FF;}
|
||||
.station-search__item .ss-name{color:var(--text-primary);font-weight:500;}
|
||||
.station-search__item .ss-org{color:var(--text-placeholder);font-size:var(--font-xs);}
|
||||
.station-search__empty{padding:16px 12px;text-align:center;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
.map-picker{width:100%;height:200px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#e6f7ff;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-sm);gap:6px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s;}
|
||||
.map-picker:hover{border-color:var(--primary);}
|
||||
.map-picker__bg{position:absolute;inset:0;opacity:.15;background:repeating-linear-gradient(0deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px);}
|
||||
.map-picker__pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:2;display:none;}
|
||||
.map-picker__label{position:relative;z-index:2;display:flex;align-items:center;gap:6px;}
|
||||
.map-picker__coord{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.92);padding:4px 14px;border-radius:12px;font-size:var(--font-xs);box-shadow:0 1px 4px rgba(0,0,0,0.1);z-index:3;display:none;white-space:nowrap;color:var(--text-primary);max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;}
|
||||
.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;white-space:nowrap;}
|
||||
.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);}
|
||||
@@ -155,16 +181,20 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<!-- [交互] 筛选栏:单位→部门→站点三级级联 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" id="filterUnit" onchange="onFilterUnit()">
|
||||
<option value="">全部单位</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属部门</label>
|
||||
<select class="filter-select" id="filterDepart" onchange="onFilterDepart()" style="min-width:130px;">
|
||||
<option value="">全部部门</option>
|
||||
</select>
|
||||
<label>所属单位部门</label>
|
||||
<div class="org-wrap" id="orgWrap">
|
||||
<div class="org-trigger" id="orgTrigger" onclick="toggleOrg()">全部单位/部门</div>
|
||||
<div class="org-panel" id="orgPanel">
|
||||
<div class="org-col" id="unitCol">
|
||||
<div class="org-col__title">单位</div>
|
||||
<div class="org-item active" onclick="selectUnit(this,'')">全部单位/部门</div>
|
||||
</div>
|
||||
<div class="org-col" id="deptCol">
|
||||
<div class="org-col__title">部门</div>
|
||||
<div class="org-item active" onclick="selectDept(this,'')">全部部门</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属站点</label>
|
||||
@@ -200,7 +230,7 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:40px;"><input type="checkbox" id="ckAll" onchange="toggleAll(this)"></th>
|
||||
<th style="width:56px;">序号</th><th>所属单位</th><th>所属部门</th><th style="min-width:120px;">所属站点</th><th style="min-width:140px;">楼栋名称</th>
|
||||
<th style="width:56px;">序号</th><th style="min-width:140px;">楼栋名称</th><th style="min-width:120px;">所属站点</th><th style="min-width:160px;">所属单位部门</th>
|
||||
<th style="min-width:220px;">详细地址</th><th>宿舍数量</th><th>负责人</th><th style="min-width:110px;">负责人电话</th><th style="width:110px;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -215,28 +245,25 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<div class="modal-mask" id="editMask">
|
||||
<div class="modal--wide">
|
||||
<div class="modal__title" id="editTitle">新增楼栋信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 所属单位</span>
|
||||
<select class="form-control" id="eUnit" onchange="onEditUnit()"><option value="">请选择单位</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 所属部门</span>
|
||||
<select class="form-control" id="eDepart"><option value="">请先选择单位</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 所属站点</span>
|
||||
<select class="form-control" id="eStation"><option value="">请先选择部门</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 楼栋名称</span>
|
||||
<input class="form-control" id="eName" placeholder="如:樊学倒班宿舍1号楼">
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 所属站点</span>
|
||||
<div class="station-search" id="stationSearch">
|
||||
<input class="form-control" id="eStation" placeholder="请输入站点名称搜索" autocomplete="off" oninput="onStationInput()" onfocus="onStationFocus()">
|
||||
<div class="station-search__panel" id="stationPanel"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 楼栋名称</span>
|
||||
<input class="form-control" id="eName" placeholder="如:樊学倒班宿舍1号楼">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 详细地址</span>
|
||||
<div class="map-picker" id="mapPicker" onclick="pickLocation(event)">
|
||||
<div class="map-picker__bg"></div>
|
||||
<svg class="map-picker__pin" id="mapPin" width="28" height="36" viewBox="0 0 28 36" fill="none"><path d="M14 0C6.27 0 0 6.27 0 14c0 10.5 14 22 14 22s14-11.5 14-22C28 6.27 21.73 0 14 0z" fill="#1890FF"/><circle cx="14" cy="14" r="6" fill="#fff"/></svg>
|
||||
<span class="map-picker__label" id="mapLabel"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1C4.24 1 2 3.24 2 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.2"/><circle cx="7" cy="6" r="1.5" stroke="currentColor" stroke-width="1"/></svg>在地图上点击选择坐标位置</span>
|
||||
<div class="map-picker__coord" id="mapCoord"></div>
|
||||
</div>
|
||||
<input class="form-control" id="eAddr" placeholder="楼栋详细地址">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
@@ -262,7 +289,10 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<div class="modal__title">批量导入数据</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 选择站点(导入的楼栋将挂在该站点下)</span>
|
||||
<select class="form-control" id="iStation"><option value="">请选择站点</option><option>樊学站点基地</option><option>麻子山站点</option><option>桐园站点基地</option><option>西峰基地</option><option>姬圪台站点</option><option>靖边气田站点</option></select>
|
||||
<div class="station-search" id="importStationSearch">
|
||||
<input class="form-control" id="iStation" placeholder="请输入站点名称搜索" autocomplete="off" oninput="onImportStationInput()" onfocus="onImportStationFocus()">
|
||||
<div class="station-search__panel" id="importStationPanel"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 上传文件</span>
|
||||
@@ -359,49 +389,73 @@ var bldDorms={
|
||||
{name:'503室',beds:4,manager:'田广润',mobile:'13991923747',alloc:0,dev:'—'}
|
||||
]
|
||||
};
|
||||
function fillOptions(sel,opts,keepVal){
|
||||
var v=keepVal||'';
|
||||
sel.innerHTML='<option value="">'+(sel.dataset.tip||'全部')+'</option>'+opts.map(function(o){return '<option'+(o===v?' selected':'')+'>'+o+'</option>';}).join('');
|
||||
var selUnit='',selDept='',stationList=[],stationMeta={};
|
||||
function fillOptions(sel,opts){
|
||||
sel.innerHTML='<option value="">'+(sel.dataset.tip||'全部')+'</option>'+opts.map(function(o){return '<option>'+o+'</option>';}).join('');
|
||||
}
|
||||
function buildStationMeta(){
|
||||
stationList=[];stationMeta={};
|
||||
Object.keys(unitDeparts).forEach(function(u){
|
||||
unitDeparts[u].forEach(function(d){
|
||||
(depStations[d]||[]).forEach(function(st){
|
||||
stationList.push({name:st,unit:u,depart:d});
|
||||
stationMeta[st]={unit:u,depart:d};
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
function initFilters(){
|
||||
var su=document.getElementById('filterUnit');su.dataset.tip='全部单位';
|
||||
su.innerHTML='<option value="">全部单位</option>'+Object.keys(unitDeparts).map(function(u){return '<option>'+u+'</option>';}).join('');
|
||||
document.getElementById('filterDepart').dataset.tip='全部部门';
|
||||
document.getElementById('filterStation').dataset.tip='全部站点';
|
||||
document.getElementById('eUnit').innerHTML='<option value="">请选择单位</option>'+Object.keys(unitDeparts).map(function(u){return '<option>'+u+'</option>';}).join('');
|
||||
var unitHtml=Object.keys(unitDeparts).map(function(u){return '<div class="org-item" onclick="selectUnit(this,\''+u+'\')">'+u+'</div>';}).join('');
|
||||
document.getElementById('unitCol').insertAdjacentHTML('beforeend',unitHtml);
|
||||
var allStations=Object.keys(depStations).reduce(function(a,k){return a.concat(depStations[k]);},[]);
|
||||
var fs=document.getElementById('filterStation');fs.dataset.tip='全部站点';
|
||||
fillOptions(fs,allStations);
|
||||
buildStationMeta();
|
||||
}
|
||||
/* [交互] 单位变更时级联刷新部门与站点 */
|
||||
function onFilterUnit(){
|
||||
var u=document.getElementById('filterUnit').value;
|
||||
var depSel=document.getElementById('filterDepart'),staSel=document.getElementById('filterStation');
|
||||
var deps=u?unitDeparts[u]:Object.keys(unitDeparts).reduce(function(a,u2){return a.concat(unitDeparts[u2]);},[]);
|
||||
depSel.dataset.tip='全部部门';fillOptions(depSel,deps);
|
||||
var stas=deps.reduce(function(a,d){return a.concat(depStations[d]||[]);},[]);
|
||||
staSel.dataset.tip='全部站点';fillOptions(staSel,stas);
|
||||
/* [交互] 单位部门级联筛选 */
|
||||
function toggleOrg(){
|
||||
document.getElementById('orgPanel').classList.toggle('open');
|
||||
document.getElementById('orgTrigger').classList.toggle('open');
|
||||
}
|
||||
function selectUnit(elem,unitName){
|
||||
document.querySelectorAll('#unitCol .org-item').forEach(function(i){i.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
selUnit=unitName;
|
||||
var html='<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept(this,\'\')">全部部门</div>';
|
||||
(unitDeparts[unitName]||[]).forEach(function(d){html+='<div class="org-item" onclick="selectDept(this,\''+d+'\')">'+d+'</div>';});
|
||||
document.getElementById('deptCol').innerHTML=html;
|
||||
selDept='';
|
||||
renderTable();
|
||||
}
|
||||
function onFilterDepart(){
|
||||
var d=document.getElementById('filterDepart').value;
|
||||
var staSel=document.getElementById('filterStation');
|
||||
staSel.dataset.tip='全部站点';
|
||||
var stas=d?(depStations[d]||[]):Object.keys(depStations).reduce(function(a,k){return a.concat(depStations[k]);},[]);
|
||||
fillOptions(staSel,stas);
|
||||
function selectDept(elem,deptName){
|
||||
document.querySelectorAll('#deptCol .org-item').forEach(function(i){i.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
selDept=deptName;
|
||||
document.getElementById('orgTrigger').textContent=(selUnit||'全部单位')+' / '+(selDept||'全部部门');
|
||||
renderTable();
|
||||
}
|
||||
function resetOrg(){
|
||||
selUnit='';selDept='';
|
||||
document.getElementById('orgTrigger').textContent='全部单位/部门';
|
||||
document.getElementById('orgPanel').classList.remove('open');
|
||||
document.getElementById('orgTrigger').classList.remove('open');
|
||||
document.querySelectorAll('#unitCol .org-item').forEach(function(i,idx){i.classList.toggle('active',idx===0);});
|
||||
document.getElementById('deptCol').innerHTML='<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept(this,\'\')">全部部门</div>';
|
||||
}
|
||||
function renderTable(){
|
||||
var u=document.getElementById('filterUnit').value,d=document.getElementById('filterDepart').value,s=document.getElementById('filterStation').value,k=document.getElementById('filterName').value.trim();
|
||||
var list=buildings.filter(function(b){return (!u||b.unit===u)&&(!d||b.depart===d)&&(!s||b.station===s)&&(!k||b.name.indexOf(k)>=0);});
|
||||
var s=document.getElementById('filterStation').value,k=document.getElementById('filterName').value.trim();
|
||||
var list=buildings.filter(function(b){return (!selUnit||b.unit===selUnit)&&(!selDept||b.depart===selDept)&&(!s||b.station===s)&&(!k||b.name.indexOf(k)>=0);});
|
||||
document.getElementById('tbody').innerHTML=list.map(function(b){
|
||||
var i=buildings.indexOf(b);
|
||||
return '<tr><td><input type="checkbox" class="rowCk" value="'+i+'" onchange="syncAllCk()"></td>'
|
||||
+'<td>'+(i+1)+'</td><td>'+b.unit+'</td><td>'+b.depart+'</td><td>'+b.station+'</td><td style="font-weight:500;">'+b.name+'</td>'
|
||||
+'<td>'+(i+1)+'</td><td style="font-weight:500;">'+b.name+'</td><td>'+b.station+'</td><td>'+b.unit+' / '+b.depart+'</td>'
|
||||
+'<td>'+b.addr+'</td><td><span class="link-num" onclick="openDorm('+i+')">'+b.dorms+'</span></td><td>'+b.manager+'</td><td>'+b.mobile+'</td>'
|
||||
+'<td><button class="btn btn-link" onclick="openEdit('+i+')">编辑</button><button class="btn btn-link--danger" onclick="askDelete('+i+')">删除</button></td></tr>';
|
||||
}).join('')||'<tr><td class="td-empty" colspan="11">没有符合条件的楼栋</td></tr>';
|
||||
}).join('')||'<tr><td class="td-empty" colspan="10">没有符合条件的楼栋</td></tr>';
|
||||
document.getElementById('totalTip').textContent='共 '+list.length+' 栋';
|
||||
document.getElementById('ckAll').checked=false;
|
||||
}
|
||||
function resetFilter(){['filterUnit','filterDepart','filterStation'].forEach(function(id){document.getElementById(id).value='';});document.getElementById('filterName').value='';onFilterUnit();}
|
||||
function resetFilter(){resetOrg();document.getElementById('filterStation').value='';document.getElementById('filterName').value='';renderTable();}
|
||||
/* [交互] 复选框与批量删除 */
|
||||
function toggleAll(ck){document.querySelectorAll('.rowCk').forEach(function(c){c.checked=ck.checked;});}
|
||||
function syncAllCk(){
|
||||
@@ -416,51 +470,101 @@ function batchDelete(){
|
||||
document.getElementById('confirmMask').classList.add('open');
|
||||
}
|
||||
/* [交互] 新增/编辑 */
|
||||
var editIdx=-1;
|
||||
function onEditUnit(){
|
||||
var u=document.getElementById('eUnit').value;
|
||||
var depSel=document.getElementById('eDepart'),staSel=document.getElementById('eStation');
|
||||
depSel.innerHTML='<option value="">请选择部门</option>'+(u?unitDeparts[u]:[]).map(function(d){return '<option>'+d+'</option>';}).join('');
|
||||
staSel.innerHTML='<option value="">请先选择部门</option>';
|
||||
var editIdx=-1,selStation='';
|
||||
function onStationInput(){selStation='';renderStationPanel();}
|
||||
function onStationFocus(){renderStationPanel();}
|
||||
function renderStationPanel(){
|
||||
var q=document.getElementById('eStation').value.trim();
|
||||
var list=stationList.filter(function(st){return !q||st.name.indexOf(q)>=0;});
|
||||
document.getElementById('stationPanel').innerHTML=list.map(function(st){
|
||||
return '<div class="station-search__item" onclick="pickStation(\''+st.name+'\')"><span class="ss-name">'+st.name+'</span><span class="ss-org">'+st.unit+' / '+st.depart+'</span></div>';
|
||||
}).join('')||'<div class="station-search__empty">未查询到站点</div>';
|
||||
document.getElementById('stationPanel').classList.add('open');
|
||||
}
|
||||
function onEditDepart(){
|
||||
var d=document.getElementById('eDepart').value;
|
||||
document.getElementById('eStation').innerHTML='<option value="">请选择站点</option>'+(d?depStations[d]:[]).map(function(s){return '<option>'+s+'</option>';}).join('');
|
||||
function pickStation(name){
|
||||
selStation=name;
|
||||
document.getElementById('eStation').value=name;
|
||||
document.getElementById('stationPanel').classList.remove('open');
|
||||
}
|
||||
/* [交互] 地图选点:点击地图生成坐标并回填详细地址 */
|
||||
function pickLocation(e){
|
||||
var picker=document.getElementById('mapPicker');
|
||||
var rect=picker.getBoundingClientRect();
|
||||
var x=e.clientX-rect.left;
|
||||
var y=e.clientY-rect.top;
|
||||
var pin=document.getElementById('mapPin');
|
||||
pin.style.display='block';
|
||||
pin.style.left=x+'px';
|
||||
pin.style.top=y+'px';
|
||||
document.getElementById('mapLabel').style.display='none';
|
||||
var addresses=['樊学作业区基地营地东侧','麻子山作业区站点北门','桐园作业区生活区西区','西峰基地食堂南侧','靖边气田综合管理营地北侧'];
|
||||
var idx=Math.floor(Math.random()*addresses.length);
|
||||
var coord=document.getElementById('mapCoord');
|
||||
coord.innerHTML='<svg width="12" height="12" viewBox="0 0 14 14" fill="none" style="vertical-align:-1px;margin-right:4px;"><path d="M7 1C4.24 1 2 3.24 2 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="#1890FF" stroke-width="1.2"/><circle cx="7" cy="6" r="1.5" stroke="#1890FF" stroke-width="1"/></svg>'+addresses[idx];
|
||||
coord.style.display='block';
|
||||
document.getElementById('eAddr').value=addresses[idx];
|
||||
}
|
||||
function resetMapPicker(){
|
||||
document.getElementById('mapPin').style.display='none';
|
||||
document.getElementById('mapLabel').style.display='flex';
|
||||
document.getElementById('mapCoord').style.display='none';
|
||||
document.getElementById('mapCoord').innerHTML='';
|
||||
}
|
||||
function openEdit(i){
|
||||
editIdx=i;
|
||||
resetMapPicker();
|
||||
document.getElementById('editTitle').textContent=i<0?'新增楼栋信息':'编辑楼栋信息';
|
||||
onEditUnit();
|
||||
if(i>=0){
|
||||
var b=buildings[i];
|
||||
document.getElementById('eUnit').value=b.unit;onEditUnit();
|
||||
document.getElementById('eDepart').innerHTML='<option>请选择部门</option>'+unitDeparts[b.unit].map(function(d){return '<option'+(d===b.depart?' selected':'')+'>'+d+'</option>';}).join('');
|
||||
onEditDepart();
|
||||
document.getElementById('eStation').innerHTML='<option>请选择站点</option>'+depStations[b.depart].map(function(s){return '<option'+(s===b.station?' selected':'')+'>'+s+'</option>';}).join('');
|
||||
selStation=b.station;
|
||||
document.getElementById('eStation').value=b.station;
|
||||
document.getElementById('eName').value=b.name;document.getElementById('eAddr').value=b.addr;
|
||||
document.getElementById('eManager').value=b.manager;document.getElementById('eMobile').value=b.mobile;
|
||||
}else{
|
||||
['eName','eAddr','eManager','eMobile'].forEach(function(id){document.getElementById(id).value='';});
|
||||
document.getElementById('eUnit').value='';onEditUnit();
|
||||
selStation='';
|
||||
['eStation','eName','eAddr','eManager','eMobile'].forEach(function(id){document.getElementById(id).value='';});
|
||||
}
|
||||
document.getElementById('stationPanel').classList.remove('open');
|
||||
document.getElementById('editMask').classList.add('open');
|
||||
}
|
||||
function closeEdit(){document.getElementById('editMask').classList.remove('open');}
|
||||
function saveEdit(){
|
||||
var u=document.getElementById('eUnit').value,d=document.getElementById('eDepart').value,s=document.getElementById('eStation').value;
|
||||
var s=selStation||document.getElementById('eStation').value.trim();
|
||||
var n=document.getElementById('eName').value.trim(),a=document.getElementById('eAddr').value.trim();
|
||||
if(!u||!d||!s||!n||!a){showToast('请完整填写带 * 的必填项');return;}
|
||||
var meta=stationMeta[s];
|
||||
if(!s||!meta||!n||!a){showToast('请完整填写带 * 的必填项');return;}
|
||||
var dup=buildings.some(function(b,i){return i!==editIdx&&b.station===s&&b.name===n;});
|
||||
if(dup){showToast('该站点下已存在同名楼栋');return;}
|
||||
var obj={unit:u,depart:d,station:s,name:n,addr:a,dorms:editIdx>=0?buildings[editIdx].dorms:0,manager:document.getElementById('eManager').value.trim()||'—',mobile:document.getElementById('eMobile').value.trim()||'—'};
|
||||
var obj={unit:meta.unit,depart:meta.depart,station:s,name:n,addr:a,dorms:editIdx>=0?buildings[editIdx].dorms:0,manager:document.getElementById('eManager').value.trim()||'—',mobile:document.getElementById('eMobile').value.trim()||'—'};
|
||||
if(editIdx<0)buildings.push(obj);else buildings[editIdx]=obj;
|
||||
closeEdit();renderTable();showToast(editIdx<0?'楼栋已新增':'楼栋已更新');
|
||||
}
|
||||
/* [交互] 导入 */
|
||||
function openImport(){document.getElementById('importMask').classList.add('open');}
|
||||
var selImportStation='';
|
||||
function onImportStationInput(){selImportStation='';renderImportStationPanel();}
|
||||
function onImportStationFocus(){renderImportStationPanel();}
|
||||
function renderImportStationPanel(){
|
||||
var q=document.getElementById('iStation').value.trim();
|
||||
var list=stationList.filter(function(st){return !q||st.name.indexOf(q)>=0;});
|
||||
document.getElementById('importStationPanel').innerHTML=list.map(function(st){
|
||||
return '<div class="station-search__item" onclick="pickImportStation(\''+st.name+'\')"><span class="ss-name">'+st.name+'</span><span class="ss-org">'+st.unit+' / '+st.depart+'</span></div>';
|
||||
}).join('')||'<div class="station-search__empty">未查询到站点</div>';
|
||||
document.getElementById('importStationPanel').classList.add('open');
|
||||
}
|
||||
function pickImportStation(name){
|
||||
selImportStation=name;
|
||||
document.getElementById('iStation').value=name;
|
||||
document.getElementById('importStationPanel').classList.remove('open');
|
||||
}
|
||||
function openImport(){
|
||||
selImportStation='';
|
||||
document.getElementById('iStation').value='';
|
||||
document.getElementById('importStationPanel').classList.remove('open');
|
||||
document.getElementById('importMask').classList.add('open');
|
||||
}
|
||||
function closeImport(){document.getElementById('importMask').classList.remove('open');}
|
||||
function doImport(){
|
||||
if(!document.getElementById('iStation').value){showToast('请先选择导入目标站点');return;}
|
||||
if(!selImportStation){showToast('请先选择导入目标站点');return;}
|
||||
closeImport();showToast('导入任务已提交,请到「查看导入任务」查看结果');
|
||||
}
|
||||
/* [交互] 导入任务(异步任务演示) */
|
||||
@@ -515,7 +619,16 @@ function showToast(msg){
|
||||
var t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');
|
||||
clearTimeout(t._timer);t._timer=setTimeout(function(){t.classList.remove('show');},2200);
|
||||
}
|
||||
initFilters();onFilterUnit();
|
||||
/* [交互] 点击面板外部关闭下拉 */
|
||||
document.addEventListener('click',function(e){
|
||||
var ow=document.getElementById('orgWrap');
|
||||
if(ow&&!ow.contains(e.target)){document.getElementById('orgPanel').classList.remove('open');document.getElementById('orgTrigger').classList.remove('open');}
|
||||
var ss=document.getElementById('stationSearch');
|
||||
if(ss&&!ss.contains(e.target)){document.getElementById('stationPanel').classList.remove('open');}
|
||||
var is=document.getElementById('importStationSearch');
|
||||
if(is&&!is.contains(e.target)){document.getElementById('importStationPanel').classList.remove('open');}
|
||||
});
|
||||
initFilters();renderTable();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -45,6 +45,17 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.filter-select{height:36px;min-width:140px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;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;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;}
|
||||
.filter-input{height:36px;min-width:120px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.org-wrap{position:relative;display:inline-block;}
|
||||
.org-trigger{height:36px;min-width:130px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;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;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.org-trigger.open,.org-trigger:hover{border-color:var(--primary);}
|
||||
.org-panel{display:none;position:absolute;top:36px;left:0;z-index:310;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);width:380px;}
|
||||
.org-panel.open{display:flex;}
|
||||
.org-col{flex:1;overflow-y:auto;max-height:200px;border-right:1px solid var(--border);}
|
||||
.org-col:last-child{border-right:none;}
|
||||
.org-col__title{padding:6px 12px;font-size:var(--font-sm);color:var(--text-placeholder);background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.org-item{padding:8px 12px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;}
|
||||
.org-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.org-item.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
.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;white-space:nowrap;}
|
||||
.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);}
|
||||
@@ -152,16 +163,28 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<!-- [交互] 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" id="filterUnit" onchange="onFilterUnit()"><option value="">全部单位</option></select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属部门</label>
|
||||
<select class="filter-select" id="filterDepart" onchange="renderTable()" style="min-width:130px;"><option value="">全部部门</option></select>
|
||||
<label>所属单位部门</label>
|
||||
<div class="org-wrap" id="orgWrap">
|
||||
<div class="org-trigger" id="orgTrigger" onclick="toggleOrg()">全部单位/部门</div>
|
||||
<div class="org-panel" id="orgPanel">
|
||||
<div class="org-col" id="unitCol">
|
||||
<div class="org-col__title">单位</div>
|
||||
<div class="org-item active" onclick="selectUnit(this,'')">全部单位/部门</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'采油一厂')">采油一厂</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'采油二厂')">采油二厂</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'第四采油厂')">第四采油厂</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'采气一厂')">采气一厂</div>
|
||||
</div>
|
||||
<div class="org-col" id="deptCol">
|
||||
<div class="org-col__title">部门</div>
|
||||
<div class="org-item active" onclick="selectDept(this,'')">全部部门</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>设备编号</label>
|
||||
<input class="filter-input" id="filterCode" placeholder="如:HC-" oninput="renderTable()">
|
||||
<input class="filter-input" id="filterCode" placeholder="请输入" oninput="renderTable()">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>分配状态</label>
|
||||
@@ -189,7 +212,7 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:56px;">序号</th><th>所属单位</th><th>所属部门</th><th style="min-width:100px;">设备编号</th><th>分配状态</th><th>分配类型</th>
|
||||
<th style="width:56px;">序号</th><th>所属单位</th><th>所属部门</th><th style="min-width:100px;">设备编号</th><th style="min-width:130px;">MAC地址</th><th>分配状态</th><th>分配类型</th>
|
||||
<th style="min-width:230px;">分配宿舍/床位</th><th style="min-width:100px;">分配日期</th><th style="width:150px;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -289,43 +312,65 @@ var dormTree={
|
||||
};
|
||||
/* 与「设备列表」呼叫设备一致;alloc:1宿舍/2床位 */
|
||||
var devices=[
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-01',alloc:1,type:2,space:'樊学倒班宿舍1号楼 · 101-1',time:'2026-03-05'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-02',alloc:1,type:2,space:'樊学倒班宿舍1号楼 · 101-2',time:'2026-03-05'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-03',alloc:1,type:2,space:'樊学倒班宿舍1号楼 · 102-1',time:'2026-03-05'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-04',alloc:1,type:1,space:'樊学倒班宿舍1号楼 · 101室',time:'2026-03-05'},
|
||||
{unit:'采油一厂',depart:'麻子山作业区',code:'HC-MZ-01',alloc:1,type:1,space:'麻子山倒班宿舍楼 · 101室',time:'2026-03-19'},
|
||||
{unit:'采油二厂',depart:'桐园作业区',code:'HC-TY-01',alloc:1,type:2,space:'桐园倒班宿舍1号楼 · 301-1',time:'2026-04-10'},
|
||||
{unit:'采油二厂',depart:'桐园作业区',code:'HC-TY-02',alloc:1,type:1,space:'桐园倒班宿舍1号楼 · 201室',time:'2026-04-10'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-01',alloc:1,type:2,space:'西峰基地综合宿舍楼 · 301-1',time:'2026-05-12'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-02',alloc:1,type:2,space:'西峰基地综合宿舍楼 · 302-1',time:'2026-05-12'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-03',alloc:1,type:1,space:'西峰基地综合宿舍楼 · 402室',time:'2026-05-12'},
|
||||
{unit:'采气一厂',depart:'靖边气田',code:'HC-JB-01',alloc:1,type:2,space:'靖边气田倒班宿舍楼 · 401-1',time:'2026-06-24'},
|
||||
{unit:'采气一厂',depart:'靖边气田',code:'HC-JB-02',alloc:0,type:0,space:'',time:''}
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-01',mac:'00:1A:2B:3C:4D:01',alloc:1,type:2,space:'樊学倒班宿舍1号楼 · 101-1',time:'2026-03-05'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-02',mac:'00:1A:2B:3C:4D:02',alloc:1,type:2,space:'樊学倒班宿舍1号楼 · 101-2',time:'2026-03-05'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-03',mac:'00:1A:2B:3C:4D:03',alloc:1,type:2,space:'樊学倒班宿舍1号楼 · 102-1',time:'2026-03-05'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-04',mac:'00:1A:2B:3C:4D:04',alloc:1,type:1,space:'樊学倒班宿舍1号楼 · 101室',time:'2026-03-05'},
|
||||
{unit:'采油一厂',depart:'麻子山作业区',code:'HC-MZ-01',mac:'00:1A:2B:3C:4D:05',alloc:1,type:1,space:'麻子山倒班宿舍楼 · 101室',time:'2026-03-19'},
|
||||
{unit:'采油二厂',depart:'桐园作业区',code:'HC-TY-01',mac:'00:1A:2B:3C:4D:06',alloc:1,type:2,space:'桐园倒班宿舍1号楼 · 301-1',time:'2026-04-10'},
|
||||
{unit:'采油二厂',depart:'桐园作业区',code:'HC-TY-02',mac:'00:1A:2B:3C:4D:07',alloc:1,type:1,space:'桐园倒班宿舍1号楼 · 201室',time:'2026-04-10'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-01',mac:'00:1A:2B:3C:4D:08',alloc:1,type:2,space:'西峰基地综合宿舍楼 · 301-1',time:'2026-05-12'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-02',mac:'00:1A:2B:3C:4D:09',alloc:1,type:2,space:'西峰基地综合宿舍楼 · 302-1',time:'2026-05-12'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-03',mac:'00:1A:2B:3C:4D:0A',alloc:1,type:1,space:'西峰基地综合宿舍楼 · 402室',time:'2026-05-12'},
|
||||
{unit:'采气一厂',depart:'靖边气田',code:'HC-JB-01',mac:'00:1A:2B:3C:4D:0B',alloc:1,type:2,space:'靖边气田倒班宿舍楼 · 401-1',time:'2026-06-24'},
|
||||
{unit:'采气一厂',depart:'靖边气田',code:'HC-JB-02',mac:'00:1A:2B:3C:4D:0C',alloc:0,type:0,space:'',time:''}
|
||||
];
|
||||
function onFilterUnit(){
|
||||
var u=document.getElementById('filterUnit').value;
|
||||
var depSel=document.getElementById('filterDepart');
|
||||
var deps=u?unitDeparts[u]:Object.keys(unitDeparts).reduce(function(a,u2){return a.concat(unitDeparts[u2]);},[]);
|
||||
var uniq=[];deps.forEach(function(x){if(uniq.indexOf(x)<0)uniq.push(x);});
|
||||
depSel.innerHTML='<option value="">全部部门</option>'+uniq.map(function(d){return '<option>'+d+'</option>';}).join('');
|
||||
renderTable();
|
||||
var selUnit='',selDept='';
|
||||
function toggleOrg(){
|
||||
document.getElementById('orgPanel').classList.toggle('open');
|
||||
document.getElementById('orgTrigger').classList.toggle('open');
|
||||
}
|
||||
function selectUnit(elem,unitName){
|
||||
document.querySelectorAll('#unitCol .org-item').forEach(function(i){i.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
selUnit=unitName;
|
||||
var html='<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept(this,\'\')">全部部门</div>';
|
||||
(unitDeparts[unitName]||[]).forEach(function(d){
|
||||
html+='<div class="org-item" onclick="selectDept(this,\''+d+'\')">'+d+'</div>';
|
||||
});
|
||||
document.getElementById('deptCol').innerHTML=html;
|
||||
selDept='';
|
||||
}
|
||||
function selectDept(elem,deptName){
|
||||
document.querySelectorAll('#deptCol .org-item').forEach(function(i){i.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
selDept=deptName;
|
||||
document.getElementById('orgTrigger').textContent=(selUnit||'全部单位')+' / '+(selDept||'全部部门');
|
||||
}
|
||||
function resetOrg(){
|
||||
selUnit='';selDept='';
|
||||
document.getElementById('orgTrigger').textContent='全部单位/部门';
|
||||
document.getElementById('orgPanel').classList.remove('open');
|
||||
document.getElementById('orgTrigger').classList.remove('open');
|
||||
document.querySelectorAll('#unitCol .org-item').forEach(function(i,idx){i.classList.toggle('active',idx===0);});
|
||||
document.getElementById('deptCol').innerHTML='<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept(this,\'\')">全部部门</div>';
|
||||
}
|
||||
function renderTable(){
|
||||
var u=document.getElementById('filterUnit').value,d=document.getElementById('filterDepart').value,k=document.getElementById('filterCode').value.trim().toUpperCase(),s=document.getElementById('filterStatus').value;
|
||||
var u=selUnit,d=selDept,k=document.getElementById('filterCode').value.trim().toUpperCase(),s=document.getElementById('filterStatus').value;
|
||||
var list=devices.filter(function(r){return (!u||r.unit===u)&&(!d||r.depart===d)&&(!k||r.code.toUpperCase().indexOf(k)>=0)&&(s===''||String(r.alloc)===s);});
|
||||
document.getElementById('tbody').innerHTML=list.map(function(r){
|
||||
var i=devices.indexOf(r);
|
||||
var typeTxt=r.alloc?('<span class="badge '+(r.type===1?'badge--info':'badge--success')+'">'+(r.type===1?'宿舍':'床位')+'</span>'):'<span class="badge badge--muted">-</span>';
|
||||
var typeTxt=r.alloc?(r.type===1?'宿舍':'床位'):'-';
|
||||
var ops=r.alloc
|
||||
?'<button class="btn btn-link" onclick="openAlloc('+i+')">重新分配</button><button class="btn btn-link--danger" onclick="askUnbind('+i+')">解除分配</button>'
|
||||
:'<button class="btn btn-link" onclick="openAlloc('+i+')">设备分配</button>';
|
||||
return '<tr><td>'+(i+1)+'</td><td>'+r.unit+'</td><td>'+r.depart+'</td><td style="font-family:monospace;font-weight:500;">'+r.code+'</td>'
|
||||
return '<tr><td>'+(i+1)+'</td><td>'+r.unit+'</td><td>'+r.depart+'</td><td style="font-family:monospace;font-weight:500;">'+r.code+'</td><td style="font-family:monospace;">'+(r.mac||'—')+'</td>'
|
||||
+'<td>'+(r.alloc?'<span class="badge badge--success">已分配</span>':'<span class="badge badge--warning">未分配</span>')+'</td>'
|
||||
+'<td>'+typeTxt+'</td><td>'+(r.space||'-')+'</td><td>'+(r.time||'-')+'</td><td>'+ops+'</td></tr>';
|
||||
}).join('')||'<tr><td class="td-empty" colspan="9">没有符合条件的设备</td></tr>';
|
||||
}).join('')||'<tr><td class="td-empty" colspan="10">没有符合条件的设备</td></tr>';
|
||||
document.getElementById('totalTip').textContent='共 '+devices.length+' 台 · 已分配 '+devices.filter(function(r){return r.alloc;}).length+' 台';
|
||||
}
|
||||
function resetFilter(){['filterUnit','filterDepart','filterStatus'].forEach(function(id){document.getElementById(id).value='';});document.getElementById('filterCode').value='';onFilterUnit();}
|
||||
function resetFilter(){resetOrg();document.getElementById('filterStatus').value='';document.getElementById('filterCode').value='';renderTable();}
|
||||
/* [交互] 设备分配/重新分配 */
|
||||
var allocIdx=-1;
|
||||
function openAlloc(i){
|
||||
@@ -400,8 +445,8 @@ function showToast(msg){
|
||||
var t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');
|
||||
clearTimeout(t._timer);t._timer=setTimeout(function(){t.classList.remove('show');},2200);
|
||||
}
|
||||
document.getElementById('filterUnit').innerHTML='<option value="">全部单位</option>'+Object.keys(unitDeparts).map(function(u){return '<option>'+u+'</option>';}).join('');
|
||||
onFilterUnit();
|
||||
resetOrg();
|
||||
renderTable();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -45,6 +45,17 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.filter-select{height:36px;min-width:140px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;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;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;}
|
||||
.filter-input{height:36px;min-width:120px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.org-wrap{position:relative;display:inline-block;}
|
||||
.org-trigger{height:36px;min-width:130px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;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;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.org-trigger.open,.org-trigger:hover{border-color:var(--primary);}
|
||||
.org-panel{display:none;position:absolute;top:36px;left:0;z-index:310;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);width:380px;}
|
||||
.org-panel.open{display:flex;}
|
||||
.org-col{flex:1;overflow-y:auto;max-height:200px;border-right:1px solid var(--border);}
|
||||
.org-col:last-child{border-right:none;}
|
||||
.org-col__title{padding:6px 12px;font-size:var(--font-sm);color:var(--text-placeholder);background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.org-item{padding:8px 12px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;}
|
||||
.org-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.org-item.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
.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;white-space:nowrap;}
|
||||
.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);}
|
||||
@@ -155,21 +166,33 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<!-- [交互] 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" id="filterUnit" onchange="onFilterUnit()"><option value="">全部单位</option></select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属部门</label>
|
||||
<select class="filter-select" id="filterDepart" onchange="renderAll()" style="min-width:130px;"><option value="">全部部门</option></select>
|
||||
<label>所属单位部门</label>
|
||||
<div class="org-wrap" id="orgWrap">
|
||||
<div class="org-trigger" id="orgTrigger" onclick="toggleOrg()">全部单位/部门</div>
|
||||
<div class="org-panel" id="orgPanel">
|
||||
<div class="org-col" id="unitCol">
|
||||
<div class="org-col__title">单位</div>
|
||||
<div class="org-item active" onclick="selectUnit(this,'')">全部单位/部门</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'采油一厂')">采油一厂</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'采油二厂')">采油二厂</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'第四采油厂')">第四采油厂</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'采气一厂')">采气一厂</div>
|
||||
</div>
|
||||
<div class="org-col" id="deptCol">
|
||||
<div class="org-col__title">部门</div>
|
||||
<div class="org-item active" onclick="selectDept(this,'')">全部部门</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>设备编号</label>
|
||||
<input class="filter-input" id="filterCode" placeholder="如:HC-FX" oninput="renderAll()">
|
||||
<input class="filter-input" id="filterCode" placeholder="请输入" oninput="renderAll()">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>设备状态</label>
|
||||
<select class="filter-select" id="filterStatus" onchange="renderAll()" style="min-width:100px;">
|
||||
<option value="">全部</option><option value="0">正常</option><option value="1">故障</option><option value="2">停用</option>
|
||||
<option value="">全部</option><option value="0">在线</option><option value="1">离线</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="renderAll();showToast('查询完成')">
|
||||
@@ -217,53 +240,57 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<select class="form-control" id="eUnit" onchange="onEditUnit()"><option value="">请选择单位</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 所属部门</span>
|
||||
<span class="form-label">所属部门</span>
|
||||
<select class="form-control" id="eDepart"><option value="">请选择部门</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 设备编号</span>
|
||||
<input class="form-control" id="eCode" placeholder="全局唯一,如:HC-FX-05">
|
||||
<input class="form-control" id="eCode" placeholder="请输入">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> <span id="eNameLabel">设备名称</span></span>
|
||||
<input class="form-control" id="eName" placeholder="如:床头呼叫按钮">
|
||||
<input class="form-control" id="eName" placeholder="请输入">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<span class="form-label">设备型号</span>
|
||||
<input class="form-control" id="eModel" placeholder="如:KQ-P1">
|
||||
<input class="form-control" id="eModel" placeholder="请输入">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">入库日期</span>
|
||||
<input class="form-control" id="eStore" type="date">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">MAC地址</span>
|
||||
<input class="form-control" id="eMac" placeholder="请输入">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<span class="form-label">设备状态</span>
|
||||
<select class="form-control" id="eStatus"><option value="0">正常</option><option value="1">故障</option><option value="2">停用</option></select>
|
||||
<select class="form-control" id="eStatus"><option value="0">在线</option><option value="1">离线</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">管理人</span>
|
||||
<input class="form-control" id="eManager" placeholder="设备管理人姓名">
|
||||
<input class="form-control" id="eManager" placeholder="请输入">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<span class="form-label">管理人电话</span>
|
||||
<input class="form-control" id="eMphone" placeholder="11位手机号">
|
||||
<input class="form-control" id="eMphone" placeholder="请输入">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">设备厂家</span>
|
||||
<input class="form-control" id="eMfr" placeholder="生产厂家名称">
|
||||
<input class="form-control" id="eMfr" placeholder="请输入">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">厂家电话</span>
|
||||
<input class="form-control" id="eMfrTel" placeholder="厂家售后服务电话">
|
||||
<input class="form-control" id="eMfrTel" placeholder="请输入">
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeEdit()">取消</button>
|
||||
@@ -282,7 +309,7 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<select class="form-control" id="iUnit"><option value="">请选择单位</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 所属部门</span>
|
||||
<span class="form-label">所属部门</span>
|
||||
<select class="form-control" id="iDepart"><option value="">请选择部门</option></select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -329,52 +356,52 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
|
||||
<script>
|
||||
var unitDeparts={'采油一厂':['樊学作业区','麻子山作业区'],'采油二厂':['桐园作业区','姬圪台作业区'],'第四采油厂':['西峰作业区'],'采气一厂':['靖边气田']};
|
||||
var statusBadge={'0':'badge--success','1':'badge--danger','2':'badge--muted'};
|
||||
var statusText={'0':'正常','1':'故障','2':'停用'};
|
||||
/* 呼叫设备:分配关系与「分配管理」「床位信息」勾稽(HC-FX-03 故障见告警记录演示) */
|
||||
var statusBadge={'0':'badge--success','1':'badge--muted'};
|
||||
var statusText={'0':'在线','1':'离线'};
|
||||
/* 呼叫设备:分配关系与「分配管理」「床位信息」勾稽(HC-FX-03 离线见告警记录演示) */
|
||||
var callDevices=[
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-01',name:'床头呼叫按钮',model:'KQ-P1',store:'2026-03-02',status:'0',manager:'王守正',mphone:'13991203456',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-02',name:'床头呼叫按钮',model:'KQ-P1',store:'2026-03-02',status:'0',manager:'王守正',mphone:'13991203456',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-03',name:'床头呼叫按钮',model:'KQ-P1',store:'2026-03-02',status:'1',manager:'王守正',mphone:'13991203456',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-04',name:'房间一键呼叫面板',model:'KQ-P2',store:'2026-03-02',status:'0',manager:'王守正',mphone:'13991203456',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采油一厂',depart:'麻子山作业区',code:'HC-MZ-01',name:'房间一键呼叫面板',model:'KQ-P2',store:'2026-03-18',status:'0',manager:'安伟',mphone:'13991345012',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采油二厂',depart:'桐园作业区',code:'HC-TY-01',name:'床头呼叫按钮',model:'KQ-P1',store:'2026-04-09',status:'0',manager:'陈国栋',mphone:'13991567208',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'采油二厂',depart:'桐园作业区',code:'HC-TY-02',name:'房间一键呼叫面板',model:'KQ-P2',store:'2026-04-09',status:'0',manager:'陈国栋',mphone:'13991567208',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-01',name:'床头呼叫按钮',model:'KQ-P1',store:'2026-05-11',status:'0',manager:'马文秀',mphone:'13991784320',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-02',name:'床头呼叫按钮',model:'KQ-P1',store:'2026-05-11',status:'0',manager:'马文秀',mphone:'13991784320',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-03',name:'房间一键呼叫面板',model:'KQ-P2',store:'2026-05-11',status:'0',manager:'马文秀',mphone:'13991784320',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'采气一厂',depart:'靖边气田',code:'HC-JB-01',name:'床头呼叫按钮',model:'KQ-P1',store:'2026-06-23',status:'0',manager:'周铁祥',mphone:'13991923745',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采气一厂',depart:'靖边气田',code:'HC-JB-02',name:'床头呼叫按钮',model:'KQ-P1',store:'2026-09-01',status:'0',manager:'周铁祥',mphone:'13991923745',mfr:'CQ中控医疗',mfrTel:'029-86521700'}
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-01',name:'床头呼叫按钮',model:'KQ-P1',mac:'00:1A:2B:3C:4D:01',store:'2026-03-02',status:'0',manager:'王守正',mphone:'13991203456',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-02',name:'床头呼叫按钮',model:'KQ-P1',mac:'00:1A:2B:3C:4D:02',store:'2026-03-02',status:'0',manager:'王守正',mphone:'13991203456',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-03',name:'床头呼叫按钮',model:'KQ-P1',mac:'00:1A:2B:3C:4D:03',store:'2026-03-02',status:'1',manager:'王守正',mphone:'13991203456',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HC-FX-04',name:'房间一键呼叫面板',model:'KQ-P2',mac:'00:1A:2B:3C:4D:04',store:'2026-03-02',status:'0',manager:'王守正',mphone:'13991203456',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采油一厂',depart:'麻子山作业区',code:'HC-MZ-01',name:'房间一键呼叫面板',model:'KQ-P2',mac:'00:1A:2B:3C:4D:05',store:'2026-03-18',status:'0',manager:'安伟',mphone:'13991345012',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采油二厂',depart:'桐园作业区',code:'HC-TY-01',name:'床头呼叫按钮',model:'KQ-P1',mac:'00:1A:2B:3C:4D:06',store:'2026-04-09',status:'0',manager:'陈国栋',mphone:'13991567208',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'采油二厂',depart:'桐园作业区',code:'HC-TY-02',name:'房间一键呼叫面板',model:'KQ-P2',mac:'00:1A:2B:3C:4D:07',store:'2026-04-09',status:'0',manager:'陈国栋',mphone:'13991567208',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-01',name:'床头呼叫按钮',model:'KQ-P1',mac:'00:1A:2B:3C:4D:08',store:'2026-05-11',status:'0',manager:'马文秀',mphone:'13991784320',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-02',name:'床头呼叫按钮',model:'KQ-P1',mac:'00:1A:2B:3C:4D:09',store:'2026-05-11',status:'0',manager:'马文秀',mphone:'13991784320',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HC-XF-03',name:'房间一键呼叫面板',model:'KQ-P2',mac:'00:1A:2B:3C:4D:0A',store:'2026-05-11',status:'0',manager:'马文秀',mphone:'13991784320',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'采气一厂',depart:'靖边气田',code:'HC-JB-01',name:'床头呼叫按钮',model:'KQ-P1',mac:'00:1A:2B:3C:4D:0B',store:'2026-06-23',status:'0',manager:'周铁祥',mphone:'13991923745',mfr:'CQ中控医疗',mfrTel:'029-86521700'},
|
||||
{unit:'采气一厂',depart:'靖边气田',code:'HC-JB-02',name:'床头呼叫按钮',model:'KQ-P1',mac:'00:1A:2B:3C:4D:0C',store:'2026-09-01',status:'0',manager:'周铁祥',mphone:'13991923745',mfr:'CQ中控医疗',mfrTel:'029-86521700'}
|
||||
];
|
||||
/* 终端设备:值班室固定部署,不参与宿舍/床位分配 */
|
||||
var termDevices=[
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HD-FX-01',name:'值班室接收终端',model:'KQ-T10',store:'2026-03-02',status:'0',manager:'王守正',mphone:'13991203456',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'采油一厂',depart:'麻子山作业区',code:'HD-MZ-01',name:'值班室接收终端',model:'KQ-T10',store:'2026-03-18',status:'0',manager:'安伟',mphone:'13991345012',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'采油二厂',depart:'桐园作业区',code:'HD-TY-01',name:'值班室接收终端',model:'KQ-T10',store:'2026-04-09',status:'0',manager:'陈国栋',mphone:'13991567208',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HD-XF-01',name:'值班室接收终端',model:'KQ-T10',store:'2026-05-11',status:'1',manager:'马文秀',mphone:'13991784320',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'采气一厂',depart:'靖边气田',code:'HD-JB-01',name:'值班室接收终端',model:'KQ-T10',store:'2026-06-23',status:'0',manager:'周铁祥',mphone:'13991923745',mfr:'华旭智能',mfrTel:'029-87334210'}
|
||||
{unit:'采油一厂',depart:'樊学作业区',code:'HD-FX-01',name:'值班室接收终端',model:'KQ-T10',mac:'00:1A:2B:3C:4D:11',store:'2026-03-02',status:'0',manager:'王守正',mphone:'13991203456',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'采油一厂',depart:'麻子山作业区',code:'HD-MZ-01',name:'值班室接收终端',model:'KQ-T10',mac:'00:1A:2B:3C:4D:12',store:'2026-03-18',status:'0',manager:'安伟',mphone:'13991345012',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'采油二厂',depart:'桐园作业区',code:'HD-TY-01',name:'值班室接收终端',model:'KQ-T10',mac:'00:1A:2B:3C:4D:13',store:'2026-04-09',status:'0',manager:'陈国栋',mphone:'13991567208',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'第四采油厂',depart:'西峰作业区',code:'HD-XF-01',name:'值班室接收终端',model:'KQ-T10',mac:'00:1A:2B:3C:4D:14',store:'2026-05-11',status:'1',manager:'马文秀',mphone:'13991784320',mfr:'华旭智能',mfrTel:'029-87334210'},
|
||||
{unit:'采气一厂',depart:'靖边气田',code:'HD-JB-01',name:'值班室接收终端',model:'KQ-T10',mac:'00:1A:2B:3C:4D:15',store:'2026-06-23',status:'0',manager:'周铁祥',mphone:'13991923745',mfr:'华旭智能',mfrTel:'029-87334210'}
|
||||
];
|
||||
var curTab='call';
|
||||
function tabName(){return curTab==='call'?'呼叫设备':'终端设备';}
|
||||
function headRow(){
|
||||
var name=curTab==='call'?'设备名称':'终端名称';
|
||||
return '<tr><th style="width:40px;"><input type="checkbox" id="ckAll" onchange="toggleAll(this)"></th>'
|
||||
+'<th style="width:56px;">序号</th><th>所属单位</th><th>所属部门</th><th style="min-width:100px;">设备编号</th><th style="min-width:120px;">'+name+'</th><th>设备型号</th><th>入库日期</th><th>设备状态</th><th>管理人</th><th style="min-width:105px;">管理人电话</th><th style="min-width:110px;">设备厂家</th><th style="min-width:110px;">厂家电话</th><th style="width:110px;">操作</th></tr>';
|
||||
+'<th style="width:56px;">序号</th><th>所属单位</th><th>所属部门</th><th style="min-width:100px;">设备编号</th><th style="min-width:120px;">'+name+'</th><th>设备型号</th><th style="min-width:130px;">MAC地址</th><th>入库日期</th><th>设备状态</th><th>管理人</th><th style="min-width:105px;">管理人电话</th><th style="min-width:110px;">设备厂家</th><th style="min-width:110px;">厂家电话</th><th style="width:110px;">操作</th></tr>';
|
||||
}
|
||||
function renderAll(){
|
||||
var u=document.getElementById('filterUnit').value,d=document.getElementById('filterDepart').value,k=document.getElementById('filterCode').value.trim().toUpperCase(),s=document.getElementById('filterStatus').value;
|
||||
var u=selUnit,d=selDept,k=document.getElementById('filterCode').value.trim().toUpperCase(),s=document.getElementById('filterStatus').value;
|
||||
var src=curTab==='call'?callDevices:termDevices;
|
||||
var list=src.filter(function(r){return (!u||r.unit===u)&&(!d||r.depart===d)&&(!k||r.code.toUpperCase().indexOf(k)>=0)&&(s===''||r.status===s);});
|
||||
document.getElementById('thead').innerHTML=headRow();
|
||||
document.getElementById('tbody').innerHTML=list.map(function(r){
|
||||
var i=src.indexOf(r);
|
||||
return '<tr><td><input type="checkbox" class="rowCk" value="'+i+'" onchange="syncAllCk()"></td>'
|
||||
+'<td>'+(i+1)+'</td><td>'+r.unit+'</td><td>'+r.depart+'</td><td style="font-family:monospace;font-weight:500;">'+r.code+'</td><td>'+r.name+'</td><td>'+r.model+'</td><td>'+r.store+'</td>'
|
||||
+'<td>'+(i+1)+'</td><td>'+r.unit+'</td><td>'+r.depart+'</td><td style="font-family:monospace;font-weight:500;">'+r.code+'</td><td>'+r.name+'</td><td>'+r.model+'</td><td style="font-family:monospace;">'+(r.mac||'—')+'</td><td>'+r.store+'</td>'
|
||||
+'<td><span class="badge '+statusBadge[r.status]+'">'+statusText[r.status]+'</span></td>'
|
||||
+'<td>'+r.manager+'</td><td>'+r.mphone+'</td><td>'+r.mfr+'</td><td>'+r.mfrTel+'</td>'
|
||||
+'<td><button class="btn btn-link" onclick="openEdit('+i+')">编辑</button><button class="btn btn-link--danger" onclick="askDelete('+i+')">删除</button></td></tr>';
|
||||
}).join('')||'<tr><td class="td-empty" colspan="14">没有符合条件的设备</td></tr>';
|
||||
document.getElementById('totalTip').textContent='共 '+list.length+' 台(正常 '+list.filter(function(r){return r.status==='0';}).length+' / 故障 '+list.filter(function(r){return r.status==='1';}).length+' / 停用 '+list.filter(function(r){return r.status==='2';}).length+')';
|
||||
}).join('')||'<tr><td class="td-empty" colspan="15">没有符合条件的设备</td></tr>';
|
||||
document.getElementById('totalTip').textContent='共 '+list.length+' 台(在线 '+list.filter(function(r){return r.status==='0';}).length+' / 离线 '+list.filter(function(r){return r.status==='1';}).length+')';
|
||||
}
|
||||
function switchTab(t){
|
||||
curTab=t;
|
||||
@@ -382,15 +409,37 @@ function switchTab(t){
|
||||
document.getElementById('tabTerm').classList.toggle('active',t==='term');
|
||||
renderAll();
|
||||
}
|
||||
function onFilterUnit(){
|
||||
var u=document.getElementById('filterUnit').value;
|
||||
var depSel=document.getElementById('filterDepart');
|
||||
var deps=u?unitDeparts[u]:Object.keys(unitDeparts).reduce(function(a,u2){return a.concat(unitDeparts[u2]);},[]);
|
||||
var uniq=[];deps.forEach(function(x){if(uniq.indexOf(x)<0)uniq.push(x);});
|
||||
depSel.innerHTML='<option value="">全部部门</option>'+uniq.map(function(d){return '<option>'+d+'</option>';}).join('');
|
||||
renderAll();
|
||||
var selUnit='',selDept='';
|
||||
function toggleOrg(){
|
||||
document.getElementById('orgPanel').classList.toggle('open');
|
||||
document.getElementById('orgTrigger').classList.toggle('open');
|
||||
}
|
||||
function resetFilter(){['filterUnit','filterDepart','filterStatus'].forEach(function(id){document.getElementById(id).value='';});document.getElementById('filterCode').value='';onFilterUnit();}
|
||||
function selectUnit(elem,unitName){
|
||||
document.querySelectorAll('#unitCol .org-item').forEach(function(i){i.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
selUnit=unitName;
|
||||
var html='<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept(this,\'\')">全部部门</div>';
|
||||
(unitDeparts[unitName]||[]).forEach(function(d){
|
||||
html+='<div class="org-item" onclick="selectDept(this,\''+d+'\')">'+d+'</div>';
|
||||
});
|
||||
document.getElementById('deptCol').innerHTML=html;
|
||||
selDept='';
|
||||
}
|
||||
function selectDept(elem,deptName){
|
||||
document.querySelectorAll('#deptCol .org-item').forEach(function(i){i.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
selDept=deptName;
|
||||
document.getElementById('orgTrigger').textContent=(selUnit||'全部单位')+' / '+(selDept||'全部部门');
|
||||
}
|
||||
function resetOrg(){
|
||||
selUnit='';selDept='';
|
||||
document.getElementById('orgTrigger').textContent='全部单位/部门';
|
||||
document.getElementById('orgPanel').classList.remove('open');
|
||||
document.getElementById('orgTrigger').classList.remove('open');
|
||||
document.querySelectorAll('#unitCol .org-item').forEach(function(i,idx){i.classList.toggle('active',idx===0);});
|
||||
document.getElementById('deptCol').innerHTML='<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept(this,\'\')">全部部门</div>';
|
||||
}
|
||||
function resetFilter(){resetOrg();document.getElementById('filterStatus').value='';document.getElementById('filterCode').value='';renderAll();}
|
||||
/* [交互] 复选框与批量删除 */
|
||||
function toggleAll(ck){document.querySelectorAll('.rowCk').forEach(function(c){c.checked=ck.checked;});}
|
||||
function syncAllCk(){
|
||||
@@ -420,13 +469,13 @@ function openEdit(i){
|
||||
document.getElementById('eUnit').value=r.unit;onEditUnit();
|
||||
document.getElementById('eDepart').innerHTML='<option value="">请选择部门</option>'+unitDeparts[r.unit].map(function(d){return '<option'+(d===r.depart?' selected':'')+'>'+d+'</option>';}).join('');
|
||||
document.getElementById('eCode').value=r.code;document.getElementById('eName').value=r.name;
|
||||
document.getElementById('eModel').value=r.model;document.getElementById('eStore').value=r.store;
|
||||
document.getElementById('eModel').value=r.model;document.getElementById('eMac').value=r.mac;document.getElementById('eStore').value=r.store;
|
||||
document.getElementById('eStatus').value=r.status;document.getElementById('eManager').value=r.manager;
|
||||
document.getElementById('eMphone').value=r.mphone;document.getElementById('eMfr').value=r.mfr;
|
||||
document.getElementById('eMfrTel').value=r.mfrTel;
|
||||
}else{
|
||||
document.getElementById('eUnit').value='';onEditUnit();
|
||||
['eCode','eName','eModel','eStore','eManager','eMphone','eMfr','eMfrTel'].forEach(function(id){document.getElementById(id).value='';});
|
||||
['eCode','eName','eModel','eMac','eStore','eManager','eMphone','eMfr','eMfrTel'].forEach(function(id){document.getElementById(id).value='';});
|
||||
document.getElementById('eStatus').value='0';
|
||||
}
|
||||
document.getElementById('editMask').classList.add('open');
|
||||
@@ -434,11 +483,11 @@ function openEdit(i){
|
||||
function closeEdit(){document.getElementById('editMask').classList.remove('open');}
|
||||
function saveEdit(){
|
||||
var u=document.getElementById('eUnit').value,d=document.getElementById('eDepart').value,c=document.getElementById('eCode').value.trim(),n=document.getElementById('eName').value.trim();
|
||||
if(!u||!d||!c||!n){showToast('请完整填写带 * 的必填项');return;}
|
||||
if(!u||!c||!n){showToast('请完整填写带 * 的必填项');return;}
|
||||
var src=curTab==='call'?callDevices:termDevices;
|
||||
var dup=callDevices.concat(termDevices).some(function(r){return r!==src[editIdx]&&r.code===c;});
|
||||
if(dup){showToast('设备编号已存在,须全局唯一');return;}
|
||||
var obj={unit:u,depart:d,code:c,name:n,model:document.getElementById('eModel').value.trim()||'—',store:document.getElementById('eStore').value||'—',status:document.getElementById('eStatus').value,manager:document.getElementById('eManager').value.trim()||'—',mphone:document.getElementById('eMphone').value.trim()||'—',mfr:document.getElementById('eMfr').value.trim()||'—',mfrTel:document.getElementById('eMfrTel').value.trim()||'—'};
|
||||
var obj={unit:u,depart:d,code:c,name:n,model:document.getElementById('eModel').value.trim()||'—',mac:document.getElementById('eMac').value.trim(),store:document.getElementById('eStore').value||'—',status:document.getElementById('eStatus').value,manager:document.getElementById('eManager').value.trim()||'—',mphone:document.getElementById('eMphone').value.trim()||'—',mfr:document.getElementById('eMfr').value.trim()||'—',mfrTel:document.getElementById('eMfrTel').value.trim()||'—'};
|
||||
if(editIdx<0)src.push(obj);else src[editIdx]=obj;
|
||||
closeEdit();renderAll();showToast(editIdx<0?tabName()+'已新增':tabName()+'已更新');
|
||||
}
|
||||
@@ -455,7 +504,7 @@ function openImport(){
|
||||
}
|
||||
function closeImport(){document.getElementById('importMask').classList.remove('open');}
|
||||
function doImport(){
|
||||
if(!document.getElementById('iUnit').value||!document.getElementById('iDepart').value){showToast('请选择单位与部门');return;}
|
||||
if(!document.getElementById('iUnit').value){showToast('请选择单位');return;}
|
||||
closeImport();showToast('导入任务已提交,请到「查看导入任务」查看结果');
|
||||
}
|
||||
/* [交互] 导入任务(异步任务演示) */
|
||||
@@ -495,8 +544,8 @@ function showToast(msg){
|
||||
var t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');
|
||||
clearTimeout(t._timer);t._timer=setTimeout(function(){t.classList.remove('show');},2200);
|
||||
}
|
||||
document.getElementById('filterUnit').innerHTML='<option value="">全部单位</option>'+Object.keys(unitDeparts).map(function(u){return '<option>'+u+'</option>';}).join('');
|
||||
onFilterUnit();
|
||||
resetOrg();
|
||||
renderAll();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -45,6 +45,18 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.filter-select{height:36px;min-width:140px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;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;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;}
|
||||
.filter-input{height:36px;min-width:140px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
/* 单位部门级联筛选 */
|
||||
.org-wrap{position:relative;display:inline-block;}
|
||||
.org-trigger{height:36px;min-width:130px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;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;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.org-trigger.open,.org-trigger:hover{border-color:var(--primary);}
|
||||
.org-panel{display:none;position:absolute;top:36px;left:0;z-index:310;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);width:380px;}
|
||||
.org-panel.open{display:flex;}
|
||||
.org-col{flex:1;overflow-y:auto;max-height:200px;border-right:1px solid var(--border);}
|
||||
.org-col:last-child{border-right:none;}
|
||||
.org-col__title{padding:6px 12px;font-size:var(--font-sm);color:var(--text-placeholder);background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.org-item{padding:8px 12px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;}
|
||||
.org-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.org-item.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
.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;white-space:nowrap;}
|
||||
.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);}
|
||||
@@ -152,6 +164,28 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
|
||||
<!-- [交互] 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>所属单位部门</label>
|
||||
<div class="org-wrap" id="orgWrap">
|
||||
<div class="org-trigger" id="orgTrigger" onclick="toggleOrg()">全部单位/部门</div>
|
||||
<div class="org-panel" id="orgPanel">
|
||||
<div class="org-col" id="unitCol">
|
||||
<div class="org-col__title">单位</div>
|
||||
<div class="org-item active" onclick="selectUnit(this,'')">全部单位/部门</div>
|
||||
</div>
|
||||
<div class="org-col" id="deptCol">
|
||||
<div class="org-col__title">部门</div>
|
||||
<div class="org-item active" onclick="selectDept(this,'')">全部部门</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属站点</label>
|
||||
<select class="filter-select" id="filterStation" onchange="renderTable()" style="min-width:140px;">
|
||||
<option value="">全部站点</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属楼栋</label>
|
||||
<select class="filter-select" id="filterBuilding" onchange="renderTable()" style="min-width:180px;">
|
||||
@@ -192,8 +226,8 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:40px;"><input type="checkbox" id="ckAll" onchange="toggleAll(this)"></th>
|
||||
<th style="width:56px;">序号</th><th style="min-width:110px;">宿舍名称</th><th style="min-width:180px;">所属楼栋</th><th>床位数量</th><th>负责人</th>
|
||||
<th style="min-width:110px;">负责人电话</th><th>是否分配设备</th><th style="min-width:110px;">设备编号</th><th style="width:110px;">操作</th>
|
||||
<th style="width:56px;">序号</th><th style="min-width:110px;">宿舍名称</th><th style="min-width:180px;">所属楼栋</th><th style="min-width:120px;">所属站点</th><th style="min-width:160px;">所属单位部门</th>
|
||||
<th>床位数量</th><th>是否分配设备</th><th style="min-width:110px;">设备编号</th><th>负责人</th><th style="min-width:110px;">负责人电话</th><th style="width:110px;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
@@ -302,6 +336,17 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<script>
|
||||
/* 楼栋清单与「楼栋信息」页勾稽 */
|
||||
var buildings=['樊学倒班宿舍1号楼','麻子山倒班宿舍楼','桐园倒班宿舍1号楼','西峰基地综合宿舍楼','靖边气田倒班宿舍楼'];
|
||||
/* 单位→部门→站点三级映射与楼栋归属,与「楼栋信息」页口径一致 */
|
||||
var unitDeparts={'采油一厂':['樊学作业区','麻子山作业区'],'采油二厂':['桐园作业区','姬圪台作业区'],'第四采油厂':['西峰作业区'],'采气一厂':['靖边气田']};
|
||||
var depStations={'樊学作业区':['樊学站点基地'],'麻子山作业区':['麻子山站点'],'桐园作业区':['桐园站点基地'],'姬圪台作业区':['姬圪台站点'],'西峰作业区':['西峰基地'],'靖边气田':['靖边气田站点']};
|
||||
var buildingMeta={
|
||||
'樊学倒班宿舍1号楼':{station:'樊学站点基地',unit:'采油一厂',depart:'樊学作业区'},
|
||||
'麻子山倒班宿舍楼':{station:'麻子山站点',unit:'采油一厂',depart:'麻子山作业区'},
|
||||
'桐园倒班宿舍1号楼':{station:'桐园站点基地',unit:'采油二厂',depart:'桐园作业区'},
|
||||
'西峰基地综合宿舍楼':{station:'西峰基地',unit:'第四采油厂',depart:'西峰作业区'},
|
||||
'靖边气田倒班宿舍楼':{station:'靖边气田站点',unit:'采气一厂',depart:'靖边气田'}
|
||||
};
|
||||
var selUnit='',selDept='';
|
||||
/* alloc:绑定到宿舍本身的设备(房间级呼叫);床位级绑定见「分配管理」 */
|
||||
var dorms=[
|
||||
{name:'101室',building:'樊学倒班宿舍1号楼',beds:4,manager:'石维国',mobile:'13991203456',alloc:1,device:'HC-FX-04'},
|
||||
@@ -341,26 +386,65 @@ var bedAssigns={
|
||||
'靖边气田倒班宿舍楼|401-1':'CQ036441','靖边气田倒班宿舍楼|401-2':'CQ029905'
|
||||
};
|
||||
function initFilters(){
|
||||
var unitHtml=Object.keys(unitDeparts).map(function(u){return '<div class="org-item" onclick="selectUnit(this,\''+u+'\')">'+u+'</div>';}).join('');
|
||||
document.getElementById('unitCol').insertAdjacentHTML('beforeend',unitHtml);
|
||||
var opts='<option value="">全部楼栋</option>'+buildings.map(function(b){return '<option>'+b+'</option>';}).join('');
|
||||
document.getElementById('filterBuilding').innerHTML=opts;
|
||||
document.getElementById('eBuilding').innerHTML='<option value="">请选择楼栋</option>'+buildings.map(function(b){return '<option>'+b+'</option>';}).join('');
|
||||
document.getElementById('iBuilding').innerHTML='<option value="">请选择楼栋</option>'+buildings.map(function(b){return '<option>'+b+'</option>';}).join('');
|
||||
var allStations=Object.keys(depStations).reduce(function(a,k){return a.concat(depStations[k]);},[]);
|
||||
document.getElementById('filterStation').innerHTML='<option value="">全部站点</option>'+allStations.map(function(s){return '<option>'+s+'</option>';}).join('');
|
||||
}
|
||||
/* [交互] 单位部门级联筛选 */
|
||||
function toggleOrg(){
|
||||
document.getElementById('orgPanel').classList.toggle('open');
|
||||
document.getElementById('orgTrigger').classList.toggle('open');
|
||||
}
|
||||
function selectUnit(elem,unitName){
|
||||
document.querySelectorAll('#unitCol .org-item').forEach(function(i){i.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
selUnit=unitName;
|
||||
var html='<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept(this,\'\')">全部部门</div>';
|
||||
(unitDeparts[unitName]||[]).forEach(function(d){html+='<div class="org-item" onclick="selectDept(this,\''+d+'\')">'+d+'</div>';});
|
||||
document.getElementById('deptCol').innerHTML=html;
|
||||
selDept='';
|
||||
renderTable();
|
||||
}
|
||||
function selectDept(elem,deptName){
|
||||
document.querySelectorAll('#deptCol .org-item').forEach(function(i){i.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
selDept=deptName;
|
||||
document.getElementById('orgTrigger').textContent=(selUnit||'全部单位')+' / '+(selDept||'全部部门');
|
||||
renderTable();
|
||||
}
|
||||
function resetOrg(){
|
||||
selUnit='';selDept='';
|
||||
document.getElementById('orgTrigger').textContent='全部单位/部门';
|
||||
document.getElementById('orgPanel').classList.remove('open');
|
||||
document.getElementById('orgTrigger').classList.remove('open');
|
||||
document.querySelectorAll('#unitCol .org-item').forEach(function(i,idx){i.classList.toggle('active',idx===0);});
|
||||
document.getElementById('deptCol').innerHTML='<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept(this,\'\')">全部部门</div>';
|
||||
}
|
||||
function renderTable(){
|
||||
var b=document.getElementById('filterBuilding').value,n=document.getElementById('filterName').value.trim(),a=document.getElementById('filterAlloc').value;
|
||||
var list=dorms.filter(function(r){return (!b||r.building===b)&&(!n||r.name.indexOf(n)>=0)&&(a===''||String(r.alloc)===a);});
|
||||
var s=document.getElementById('filterStation').value,b=document.getElementById('filterBuilding').value,n=document.getElementById('filterName').value.trim(),a=document.getElementById('filterAlloc').value;
|
||||
var list=dorms.filter(function(r){
|
||||
var meta=buildingMeta[r.building]||{};
|
||||
return (!selUnit||meta.unit===selUnit)&&(!selDept||meta.depart===selDept)&&(!s||meta.station===s)&&(!b||r.building===b)&&(!n||r.name.indexOf(n)>=0)&&(a===''||String(r.alloc)===a);
|
||||
});
|
||||
document.getElementById('tbody').innerHTML=list.map(function(r){
|
||||
var i=dorms.indexOf(r);
|
||||
var meta=buildingMeta[r.building]||{};
|
||||
return '<tr><td><input type="checkbox" class="rowCk" value="'+i+'" onchange="syncAllCk()"></td>'
|
||||
+'<td>'+(i+1)+'</td><td style="font-weight:500;">'+r.name+'</td><td>'+r.building+'</td><td><span class="link-num" onclick="openBed('+i+')">'+r.beds+'</span></td><td>'+r.manager+'</td><td>'+r.mobile+'</td>'
|
||||
+'<td>'+(i+1)+'</td><td style="font-weight:500;">'+r.name+'</td><td>'+r.building+'</td><td>'+(meta.station||'')+'</td><td>'+(meta.unit?meta.unit+' / '+meta.depart:'')+'</td>'
|
||||
+'<td><span class="link-num" onclick="openBed('+i+')">'+r.beds+'</span></td>'
|
||||
+'<td>'+(r.alloc?'<span class="badge badge--success">已分配</span>':'<span class="badge badge--muted">未分配</span>')+'</td>'
|
||||
+'<td style="font-family:monospace;">'+(r.device||'-')+'</td>'
|
||||
+'<td style="font-family:monospace;">'+(r.device||'-')+'</td><td>'+r.manager+'</td><td>'+r.mobile+'</td>'
|
||||
+'<td><button class="btn btn-link" onclick="openEdit('+i+')">编辑</button><button class="btn btn-link--danger" onclick="askDelete('+i+')">删除</button></td></tr>';
|
||||
}).join('')||'<tr><td class="td-empty" colspan="10">没有符合条件的宿舍</td></tr>';
|
||||
}).join('')||'<tr><td class="td-empty" colspan="12">没有符合条件的宿舍</td></tr>';
|
||||
document.getElementById('totalTip').textContent='共 '+list.length+' 间 · 房间级设备 '+dorms.filter(function(r){return r.alloc;}).length+' 台';
|
||||
document.getElementById('ckAll').checked=false;
|
||||
}
|
||||
function resetFilter(){['filterBuilding','filterAlloc'].forEach(function(id){document.getElementById(id).value='';});document.getElementById('filterName').value='';renderTable();}
|
||||
function resetFilter(){resetOrg();['filterStation','filterBuilding','filterAlloc'].forEach(function(id){document.getElementById(id).value='';});document.getElementById('filterName').value='';renderTable();}
|
||||
/* [交互] 复选框与批量删除 */
|
||||
function toggleAll(ck){document.querySelectorAll('.rowCk').forEach(function(c){c.checked=ck.checked;});}
|
||||
function syncAllCk(){
|
||||
@@ -459,6 +543,11 @@ function showToast(msg){
|
||||
var t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');
|
||||
clearTimeout(t._timer);t._timer=setTimeout(function(){t.classList.remove('show');},2200);
|
||||
}
|
||||
/* [交互] 点击面板外部关闭下拉 */
|
||||
document.addEventListener('click',function(e){
|
||||
var ow=document.getElementById('orgWrap');
|
||||
if(ow&&!ow.contains(e.target)){document.getElementById('orgPanel').classList.remove('open');document.getElementById('orgTrigger').classList.remove('open');}
|
||||
});
|
||||
initFilters();renderTable();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -45,6 +45,17 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.filter-select{height:36px;min-width:140px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;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;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;}
|
||||
.filter-input{height:36px;min-width:140px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.org-wrap{position:relative;display:inline-block;}
|
||||
.org-trigger{height:36px;min-width:130px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;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;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.org-trigger.open,.org-trigger:hover{border-color:var(--primary);}
|
||||
.org-panel{display:none;position:absolute;top:36px;left:0;z-index:310;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);width:380px;}
|
||||
.org-panel.open{display:flex;}
|
||||
.org-col{flex:1;overflow-y:auto;max-height:200px;border-right:1px solid var(--border);}
|
||||
.org-col:last-child{border-right:none;}
|
||||
.org-col__title{padding:6px 12px;font-size:var(--font-sm);color:var(--text-placeholder);background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.org-item{padding:8px 12px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;}
|
||||
.org-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.org-item.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
.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;white-space:nowrap;}
|
||||
.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);}
|
||||
@@ -151,16 +162,24 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<!-- [交互] 筛选栏:单位→部门级联 + 站点名称 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" id="filterUnit" onchange="onFilterUnit()">
|
||||
<option value="">全部单位</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属部门</label>
|
||||
<select class="filter-select" id="filterDepart" onchange="renderTable()" style="min-width:130px;">
|
||||
<option value="">全部部门</option>
|
||||
</select>
|
||||
<label>所属单位部门</label>
|
||||
<div class="org-wrap" id="orgWrap">
|
||||
<div class="org-trigger" id="orgTrigger" onclick="toggleOrg()">全部单位/部门</div>
|
||||
<div class="org-panel" id="orgPanel">
|
||||
<div class="org-col" id="unitCol">
|
||||
<div class="org-col__title">单位</div>
|
||||
<div class="org-item active" onclick="selectUnit(this,'')">全部单位/部门</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'采油一厂')">采油一厂</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'采油二厂')">采油二厂</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'第四采油厂')">第四采油厂</div>
|
||||
<div class="org-item" onclick="selectUnit(this,'采气一厂')">采气一厂</div>
|
||||
</div>
|
||||
<div class="org-col" id="deptCol">
|
||||
<div class="org-col__title">部门</div>
|
||||
<div class="org-item active" onclick="selectDept(this,'')">全部部门</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>站点名称</label>
|
||||
@@ -186,7 +205,7 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:56px;">序号</th><th>所属单位</th><th>所属部门</th><th style="min-width:140px;">站点名称</th>
|
||||
<th style="width:56px;">序号</th><th style="min-width:140px;">站点名称</th><th>所属单位</th><th>所属部门</th>
|
||||
<th style="min-width:220px;">详细地址</th><th>负责人</th><th style="min-width:110px;">联系电话</th>
|
||||
<th style="min-width:100px;">设立日期</th><th style="min-width:220px;">简介</th><th style="width:110px;">操作</th>
|
||||
</tr>
|
||||
@@ -198,7 +217,7 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- [交互] 新增/编辑站点:地点支持地图选点/手动输入双模式 -->
|
||||
<!-- [交互] 新增/编辑站点:地点采用地图选点 + 详细地址 -->
|
||||
<div class="modal-mask" id="editMask">
|
||||
<div class="modal--wide">
|
||||
<div class="modal__title" id="editTitle">新增站点</div>
|
||||
@@ -218,41 +237,14 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 地点</span>
|
||||
<div class="radio-line">
|
||||
<label><input type="radio" name="geoType" value="0" checked onchange="switchGeoType()"> 地图选点</label>
|
||||
<label><input type="radio" name="geoType" value="1" onchange="switchGeoType()"> 手动输入</label>
|
||||
<div class="map-pick" id="mapPick" onclick="demoPickPoint()">
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M13 3c4 0 7 3 7 6.8 0 5-7 13.2-7 13.2S6 14.8 6 9.8C6 6 9 3 13 3z" stroke="#1890FF" stroke-width="1.6" fill="none"/><circle cx="13" cy="9.8" r="2.4" stroke="#1890FF" stroke-width="1.6"/></svg>
|
||||
<span id="mapPickText">点击在地图上拾取站点坐标</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图选点模式 -->
|
||||
<div id="geoMapMode">
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 地图选点</span>
|
||||
<div class="map-pick" id="mapPick" onclick="demoPickPoint()">
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M13 3c4 0 7 3 7 6.8 0 5-7 13.2-7 13.2S6 14.8 6 9.8C6 6 9 3 13 3z" stroke="#1890FF" stroke-width="1.6" fill="none"/><circle cx="13" cy="9.8" r="2.4" stroke="#1890FF" stroke-width="1.6"/></svg>
|
||||
<span id="mapPickText">点击在地图上拾取站点坐标</span>
|
||||
</div>
|
||||
<div class="form-item" style="margin-bottom:0;">
|
||||
<span class="form-label">选址地址</span>
|
||||
<input class="form-control" id="eMapAddr" readonly placeholder="选点后自动回填地址">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 手动输入模式 -->
|
||||
<div id="geoInputMode" style="display:none;">
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 经度</span>
|
||||
<input class="form-control" id="eLng" placeholder="如:107.3412">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 纬度</span>
|
||||
<input class="form-control" id="eLat" placeholder="如:36.1147">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label"><span class="req">*</span> 详细地址</span>
|
||||
<input class="form-control" id="eAddr2" placeholder="站点详细地址">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">详细地址</span>
|
||||
<input class="form-control" id="eAddr" placeholder="请补充详细地址，如：站点基地东侧">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
@@ -305,37 +297,52 @@ var stations=[
|
||||
{unit:'第四采油厂',depart:'西峰作业区',name:'西峰基地',addr:'甘肃省西峰市西峰基地食堂南侧',manager:'马文秀',mobile:'13991784320',setUp:'2017-09-01',desc:'第四采油厂机关基地,医疗点与救护车驻点合一。'},
|
||||
{unit:'采气一厂',depart:'靖边气田',name:'靖边气田站点',addr:'陕西省靖边县靖边气田综合管理营地北侧',manager:'周铁祥',mobile:'13991923745',setUp:'2020-11-11',desc:'靖边气田处理厂站点,负责气田倒班人员床头呼叫值守。'}
|
||||
];
|
||||
function fillOptions(sel,opts,keepVal){
|
||||
var v=keepVal||'';
|
||||
sel.innerHTML='<option value="">'+(sel.dataset.tip||'全部')+'</option>'+opts.map(function(o){return '<option'+(o===v?' selected':'')+'>'+o+'</option>';}).join('');
|
||||
}
|
||||
function initFilters(){
|
||||
var su=document.getElementById('filterUnit');su.dataset.tip='全部单位';
|
||||
su.innerHTML='<option value="">全部单位</option>'+Object.keys(unitDeparts).map(function(u){return '<option>'+u+'</option>';}).join('');
|
||||
document.getElementById('filterDepart').dataset.tip='全部部门';
|
||||
document.getElementById('eUnit').innerHTML='<option value="">请选择单位</option>'+Object.keys(unitDeparts).map(function(u){return '<option>'+u+'</option>';}).join('');
|
||||
}
|
||||
/* [交互] 筛选单位变更时级联刷新部门 */
|
||||
function onFilterUnit(){
|
||||
var u=document.getElementById('filterUnit').value;
|
||||
var depSel=document.getElementById('filterDepart');
|
||||
var deps=u?unitDeparts[u]:Object.keys(unitDeparts).reduce(function(a,u2){return a.concat(unitDeparts[u2]);},[]);
|
||||
depSel.dataset.tip='全部部门';fillOptions(depSel,deps);
|
||||
renderTable();
|
||||
var selUnit='',selDept='';
|
||||
function toggleOrg(){
|
||||
document.getElementById('orgPanel').classList.toggle('open');
|
||||
document.getElementById('orgTrigger').classList.toggle('open');
|
||||
}
|
||||
function selectUnit(elem,unitName){
|
||||
document.querySelectorAll('#unitCol .org-item').forEach(function(i){i.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
selUnit=unitName;
|
||||
var html='<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept(this,\'\')">全部部门</div>';
|
||||
(unitDeparts[unitName]||[]).forEach(function(d){
|
||||
html+='<div class="org-item" onclick="selectDept(this,\''+d+'\')">'+d+'</div>';
|
||||
});
|
||||
document.getElementById('deptCol').innerHTML=html;
|
||||
selDept='';
|
||||
}
|
||||
function selectDept(elem,deptName){
|
||||
document.querySelectorAll('#deptCol .org-item').forEach(function(i){i.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
selDept=deptName;
|
||||
document.getElementById('orgTrigger').textContent=(selUnit||'全部单位')+' / '+(selDept||'全部部门');
|
||||
}
|
||||
function resetOrg(){
|
||||
selUnit='';selDept='';
|
||||
document.getElementById('orgTrigger').textContent='全部单位/部门';
|
||||
document.getElementById('orgPanel').classList.remove('open');
|
||||
document.getElementById('orgTrigger').classList.remove('open');
|
||||
document.querySelectorAll('#unitCol .org-item').forEach(function(i,idx){i.classList.toggle('active',idx===0);});
|
||||
document.getElementById('deptCol').innerHTML='<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept(this,\'\')">全部部门</div>';
|
||||
}
|
||||
function renderTable(){
|
||||
var u=document.getElementById('filterUnit').value,d=document.getElementById('filterDepart').value,k=document.getElementById('filterName').value.trim();
|
||||
var u=selUnit,d=selDept,k=document.getElementById('filterName').value.trim();
|
||||
var list=stations.filter(function(s){return (!u||s.unit===u)&&(!d||s.depart===d)&&(!k||s.name.indexOf(k)>=0);});
|
||||
document.getElementById('tbody').innerHTML=list.map(function(s){
|
||||
var i=stations.indexOf(s);
|
||||
return '<tr><td>'+(i+1)+'</td><td>'+s.unit+'</td><td>'+s.depart+'</td><td style="font-weight:500;">'+s.name+'</td>'
|
||||
return '<tr><td>'+(i+1)+'</td><td style="font-weight:500;">'+s.name+'</td><td>'+s.unit+'</td><td>'+s.depart+'</td>'
|
||||
+'<td>'+s.addr+'</td><td>'+s.manager+'</td><td>'+s.mobile+'</td><td>'+s.setUp+'</td>'
|
||||
+'<td style="white-space:normal;min-width:220px;">'+s.desc+'</td>'
|
||||
+'<td><button class="btn btn-link" onclick="openEdit('+i+')">编辑</button><button class="btn btn-link--danger" onclick="askDelete('+i+')">删除</button></td></tr>';
|
||||
}).join('')||'<tr><td class="td-empty" colspan="10">没有符合条件的站点</td></tr>';
|
||||
document.getElementById('totalTip').textContent='共 '+list.length+' 个站点';
|
||||
}
|
||||
function resetFilter(){['filterUnit','filterDepart'].forEach(function(id){document.getElementById(id).value='';});document.getElementById('filterName').value='';onFilterUnit();}
|
||||
function resetFilter(){resetOrg();document.getElementById('filterName').value='';renderTable();}
|
||||
/* [交互] 新增/编辑 */
|
||||
var editIdx=-1;
|
||||
function onEditUnit(){
|
||||
@@ -343,19 +350,15 @@ function onEditUnit(){
|
||||
var depSel=document.getElementById('eDepart');
|
||||
depSel.innerHTML='<option value="">请选择部门</option>'+(u?unitDeparts[u]:[]).map(function(d){return '<option>'+d+'</option>';}).join('');
|
||||
}
|
||||
function geoTypeVal(){var r=document.querySelector('input[name="geoType"]:checked');return r?r.value:'0';}
|
||||
function switchGeoType(){
|
||||
var map=geoTypeVal()==='0';
|
||||
document.getElementById('geoMapMode').style.display=map?'':'none';
|
||||
document.getElementById('geoInputMode').style.display=map?'none':'';
|
||||
}
|
||||
/* [交互] 地图选点演示:点击拾取坐标并回填地址 */
|
||||
/* [交互] 地图选点演示:点击拾取坐标并回填详细地址 */
|
||||
var pickedPoint=null;
|
||||
function demoPickPoint(){
|
||||
pickedPoint={lng:'107.3412',lat:'36.1147'};
|
||||
document.getElementById('mapPickText').innerHTML='<span class="picked">已选坐标:107.3412, 36.1147(点击可重选)</span>';
|
||||
var addr=document.getElementById('eName').value.trim();
|
||||
document.getElementById('eMapAddr').value='已拾取:'+(addr||'站点位置')+'(经度107.3412 纬度36.1147)';
|
||||
if(!document.getElementById('eAddr').value){
|
||||
var nm=document.getElementById('eName').value.trim();
|
||||
document.getElementById('eAddr').value='陕西省延安市吴起县'+(nm||'站点')+'基地';
|
||||
}
|
||||
showToast('地图选点完成');
|
||||
}
|
||||
function openEdit(i){
|
||||
@@ -363,21 +366,19 @@ function openEdit(i){
|
||||
document.getElementById('editTitle').textContent=i<0?'新增站点':'编辑站点';
|
||||
onEditUnit();
|
||||
pickedPoint=null;document.getElementById('mapPickText').textContent='点击在地图上拾取站点坐标';
|
||||
document.getElementById('eMapAddr').value='';
|
||||
document.getElementById('eAddr').value='';
|
||||
if(i>=0){
|
||||
var s=stations[i];
|
||||
document.getElementById('eUnit').value=s.unit;onEditUnit();
|
||||
document.getElementById('eDepart').innerHTML='<option>请选择部门</option>'+unitDeparts[s.unit].map(function(d){return '<option'+(d===s.depart?' selected':'')+'>'+d+'</option>';}).join('');
|
||||
document.getElementById('eName').value=s.name;
|
||||
document.querySelector('input[name="geoType"][value="0"]').checked=true;switchGeoType();
|
||||
document.getElementById('eMapAddr').value='已拾取:'+s.addr;
|
||||
document.getElementById('eAddr').value=s.addr;
|
||||
document.getElementById('mapPickText').innerHTML='<span class="picked">已选坐标:107.3412, 36.1147(点击可重选)</span>';
|
||||
document.getElementById('eManager').value=s.manager;document.getElementById('eMobile').value=s.mobile;
|
||||
document.getElementById('eSetUp').value=s.setUp;document.getElementById('eDesc').value=s.desc;
|
||||
}else{
|
||||
['eName','eManager','eMobile','eSetUp','eDesc','eLng','eLat','eAddr2'].forEach(function(id){document.getElementById(id).value='';});
|
||||
['eName','eManager','eMobile','eSetUp','eDesc','eAddr'].forEach(function(id){document.getElementById(id).value='';});
|
||||
document.getElementById('eUnit').value='';onEditUnit();
|
||||
document.querySelector('input[name="geoType"][value="0"]').checked=true;switchGeoType();
|
||||
}
|
||||
document.getElementById('editMask').classList.add('open');
|
||||
}
|
||||
@@ -385,15 +386,8 @@ function closeEdit(){document.getElementById('editMask').classList.remove('open'
|
||||
function saveEdit(){
|
||||
var u=document.getElementById('eUnit').value,d=document.getElementById('eDepart').value,n=document.getElementById('eName').value.trim();
|
||||
if(!u||!d||!n){showToast('请完整填写带 * 的必填项');return;}
|
||||
var addr;
|
||||
if(geoTypeVal()==='0'){
|
||||
if(!document.getElementById('eMapAddr').value){showToast('请先在地图上拾取站点坐标');return;}
|
||||
addr=document.getElementById('eMapAddr').value;
|
||||
}else{
|
||||
var lng=document.getElementById('eLng').value.trim(),lat=document.getElementById('eLat').value.trim(),a2=document.getElementById('eAddr2').value.trim();
|
||||
if(!lng||!lat||!a2){showToast('手动输入模式下经度/纬度/详细地址为必填');return;}
|
||||
addr=a2;
|
||||
}
|
||||
var addr=document.getElementById('eAddr').value.trim();
|
||||
if(!addr){showToast('请先在地图上拾取站点坐标并补充详细地址');return;}
|
||||
var dup=stations.some(function(s,i){return i!==editIdx&&s.unit===u&&s.name===n;});
|
||||
if(dup){showToast('该单位下已存在同名站点');return;}
|
||||
var obj={unit:u,depart:d,name:n,addr:addr,
|
||||
@@ -419,7 +413,7 @@ function showToast(msg){
|
||||
var t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');
|
||||
clearTimeout(t._timer);t._timer=setTimeout(function(){t.classList.remove('show');},2200);
|
||||
}
|
||||
initFilters();onFilterUnit();
|
||||
initFilters();resetOrg();renderTable();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -116,6 +116,15 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
.form-control:focus{border-color:var(--primary);}
|
||||
textarea.form-control{height:64px;padding:8px 10px;resize:vertical;line-height:1.5;}
|
||||
select.form-control{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;-webkit-appearance:none;padding-right:28px;cursor:pointer;}
|
||||
/* 年份选择控件 */
|
||||
.year-picker{position:relative;}
|
||||
.year-picker .form-control{padding-right:30px;cursor:pointer;}
|
||||
.year-picker>svg{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none;}
|
||||
.year-picker__dropdown{display:none;position:absolute;top:36px;left:0;width:100%;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;}
|
||||
.radio-group{display:flex;gap:20px;height:32px;align-items:center;}
|
||||
.radio{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;}
|
||||
.radio input{accent-color:var(--primary);cursor:pointer;}
|
||||
@@ -223,7 +232,6 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<button class="btn btn-primary" onclick="openImport()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 9V2M4.5 4.5L7 2l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>批量导入数据</button>
|
||||
<button class="btn btn-default" onclick="openImportTasks()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导入任务</button>
|
||||
<button class="btn btn-primary" onclick="showToast('救护车台账已导出(演示)')"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="askDelete(checkedIds())">批量删除</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
@@ -261,54 +269,67 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 所属医疗点</span>
|
||||
<select class="form-control" id="fPoint"><option value="">请先选择所属单位</option></select></div>
|
||||
</div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 救护类型</span>
|
||||
<div class="radio-group">
|
||||
<label class="radio"><input type="radio" name="fType" value="急救型" checked>急救型</label>
|
||||
<label class="radio"><input type="radio" name="fType" value="转运型">转运型</label>
|
||||
</div></div>
|
||||
|
||||
<div class="form-section">车辆信息</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 车型</span><input class="form-control" id="fModel" placeholder="如:江铃轻型监护型救护车"></div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 车牌号</span><input class="form-control" id="fPlate" placeholder="如:CQ·0712A"></div>
|
||||
<div class="form-item"><span class="form-label">年支付费用(万元)</span><input class="form-control" id="fFee" type="number" min="0" step="0.1" placeholder="0.0"></div>
|
||||
<div class="form-item"><span class="form-label">救护车所属机构名称</span><input class="form-control" id="fOrg" placeholder="如:CQ油田总医院"></div>
|
||||
<div class="form-item"><span class="form-label">开始服务年份</span><input class="form-control" id="fYear" type="number" min="2000" max="2026" placeholder="不晚于当年"></div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 救护类型</span>
|
||||
<div class="radio-group">
|
||||
<label class="radio"><input type="radio" name="fType" value="急救型" checked>急救型</label>
|
||||
<label class="radio"><input type="radio" name="fType" value="转运型">转运型</label>
|
||||
</div></div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 车型</span><input class="form-control" id="fModel" placeholder="请输入"></div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 车牌号</span><input class="form-control" id="fPlate" placeholder="请输入"></div>
|
||||
<div class="form-item"><span class="form-label">救护车所属机构名称</span><input class="form-control" id="fOrg" placeholder="请输入"></div>
|
||||
<div class="form-item"><span class="form-label">开始服务年份</span>
|
||||
<div class="year-picker">
|
||||
<input class="form-control" id="fYear" type="text" readonly placeholder="请选择年份">
|
||||
<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">
|
||||
<div onclick="pickYear(this)">2026</div>
|
||||
<div onclick="pickYear(this)">2025</div>
|
||||
<div onclick="pickYear(this)">2024</div>
|
||||
<div onclick="pickYear(this)">2023</div>
|
||||
<div onclick="pickYear(this)">2022</div>
|
||||
<div onclick="pickYear(this)">2021</div>
|
||||
<div onclick="pickYear(this)">2020</div>
|
||||
<div onclick="pickYear(this)">2019</div>
|
||||
<div onclick="pickYear(this)">2018</div>
|
||||
<div onclick="pickYear(this)">2017</div>
|
||||
<div onclick="pickYear(this)">2016</div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="form-item"><span class="form-label">年支付费用(万元)</span><input class="form-control" id="fFee" type="number" min="0" step="0.1" placeholder="请输入"></div>
|
||||
<div class="form-item"><span class="form-label">是否安装GPS</span>
|
||||
<div class="radio-group">
|
||||
<label class="radio"><input type="radio" name="fGps" value="是" checked>是</label>
|
||||
<label class="radio"><input type="radio" name="fGps" value="否">否</label>
|
||||
</div></div>
|
||||
<div class="form-item"><span class="form-label">是否链接公司车辆管理系统</span>
|
||||
<div class="radio-group">
|
||||
<label class="radio"><input type="radio" name="fLink" value="是">是</label>
|
||||
<label class="radio"><input type="radio" name="fLink" value="否" checked>否</label>
|
||||
</div></div>
|
||||
<div class="form-item form-item--full"><span class="form-label">救护车照片(最多5张)</span>
|
||||
<div class="photo-row" id="phCar"></div>
|
||||
<div class="photo-tip">点击 + 上传,支持 jpg/png,单张不超过 5MB</div></div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">覆盖范围</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 覆盖区域</span><input class="form-control" id="fArea" placeholder="如:樊学作业区及沿线井站"></div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 覆盖人数</span><input class="form-control" id="fPeople" type="number" min="1" placeholder="正整数"></div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 覆盖区域</span><input class="form-control" id="fArea" placeholder="请输入"></div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 覆盖人数</span><input class="form-control" id="fPeople" type="number" min="1" placeholder="请输入"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">急救能力</div>
|
||||
<div class="form-item form-item--full"><span class="form-label">所配急救设备</span>
|
||||
<textarea class="form-control" id="fEquip" placeholder="如:除颤仪、心电监护仪、氧气袋、创伤固定包"></textarea></div>
|
||||
<textarea class="form-control" id="fEquip" placeholder="请输入"></textarea></div>
|
||||
<div class="form-item form-item--full"><span class="form-label">救护能力</span>
|
||||
<textarea class="form-control" id="fAbility" placeholder="描述救护车可承担的院前急救与转运能力"></textarea></div>
|
||||
<textarea class="form-control" id="fAbility" placeholder="请输入"></textarea></div>
|
||||
|
||||
<div class="form-section">驾驶员信息</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 驾驶员姓名</span><input class="form-control" id="fDriver" placeholder="请输入驾驶员姓名"></div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 联系电话</span><input class="form-control" id="fTel" placeholder="手机号或区号-座机号"></div>
|
||||
</div>
|
||||
<div class="form-item"><span class="form-label">是否安装GPS</span>
|
||||
<div class="radio-group">
|
||||
<label class="radio"><input type="radio" name="fGps" value="是" checked>是</label>
|
||||
<label class="radio"><input type="radio" name="fGps" value="否">否</label>
|
||||
</div></div>
|
||||
|
||||
<div class="form-section">证照与照片</div>
|
||||
<div class="form-item"><span class="form-label">救护车照片(最多5张)</span>
|
||||
<div class="photo-row" id="phCar"></div>
|
||||
<div class="photo-tip">点击 + 上传,支持 jpg/png,单张不超过 5MB</div></div>
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 驾驶员姓名</span><input class="form-control" id="fDriver" placeholder="请输入"></div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 联系电话</span><input class="form-control" id="fTel" placeholder="请输入"></div>
|
||||
<div class="form-item"><span class="form-label">驾驶证图片(最多5张)</span>
|
||||
<div class="photo-row" id="phLicense"></div></div>
|
||||
<div class="form-item"><span class="form-label">资格证图片(最多5张)</span>
|
||||
@@ -425,7 +446,7 @@ function renderTable(){
|
||||
+'<td><input type="checkbox" class="row-check" value="'+a.id+'"></td>'
|
||||
+'<td>'+(start+i+1)+'</td>'
|
||||
+'<td>'+a.unit+'</td>'
|
||||
+'<td style="text-align:left;font-weight:600;">'+a.point+'</td>'
|
||||
+'<td style="text-align:left;">'+a.point+'</td>'
|
||||
+'<td>'+typeBadge+'</td>'
|
||||
+'<td style="text-align:left;max-width:200px;overflow:hidden;text-overflow:ellipsis;">'+a.model+'</td>'
|
||||
+'<td>'+a.plate+'</td>'
|
||||
@@ -458,6 +479,29 @@ function turnPage(d){
|
||||
function toggleAll(el){document.querySelectorAll('.row-check').forEach(function(c){c.checked=el.checked;});}
|
||||
function checkedIds(){return [].slice.call(document.querySelectorAll('.row-check:checked')).map(function(c){return +c.value;});}
|
||||
|
||||
/* ===== 年份选择控件 ===== */
|
||||
function pickYear(el){
|
||||
var dp=el.parentElement,input=dp.parentElement.querySelector('input');
|
||||
input.value=el.textContent;
|
||||
dp.querySelectorAll('div').forEach(function(d){d.classList.toggle('selected',d===el);});
|
||||
dp.classList.remove('open');
|
||||
}
|
||||
document.querySelectorAll('.year-picker>input').forEach(function(inp){
|
||||
inp.addEventListener('click',function(e){
|
||||
e.stopPropagation();
|
||||
var dp=inp.parentElement.querySelector('.year-picker__dropdown');
|
||||
var wasOpen=dp.classList.contains('open');
|
||||
document.querySelectorAll('.year-picker__dropdown.open').forEach(function(d){d.classList.remove('open');});
|
||||
if(!wasOpen){
|
||||
dp.querySelectorAll('div').forEach(function(d){d.classList.toggle('selected',d.textContent===inp.value);});
|
||||
dp.classList.add('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
document.addEventListener('click',function(){
|
||||
document.querySelectorAll('.year-picker__dropdown.open').forEach(function(d){d.classList.remove('open');});
|
||||
});
|
||||
|
||||
/* ===== 照片占位 ===== */
|
||||
function renderPhotos(boxId,count){
|
||||
var html='';
|
||||
@@ -558,17 +602,19 @@ function openDetail(id){
|
||||
var a=ambulances.find(function(x){return x.id===id;});
|
||||
document.getElementById('detailTitle').textContent='救护车详情 · '+a.plate;
|
||||
function d(k,v,full){return '<div class="detail-item'+(full?' detail-item--full':'')+'"><div class="dk">'+k+'</div><div class="dv">'+(v===''||v==null?'—':v)+'</div></div>';}
|
||||
function dPhoto(k,tiles){return '<div class="detail-item detail-item--full"><div class="dk">'+k+'</div><div class="dv"><div class="photo-row">'+tiles+'</div></div></div>';}
|
||||
document.getElementById('detailBody').innerHTML=
|
||||
'<div class="form-section" style="margin-top:0;">归属与类型</div>'
|
||||
+'<div class="detail-grid">'+d('所属单位',a.unit)+d('所属医疗点',a.point)+d('救护类型',a.type)+d('车型',a.model)+'</div>'
|
||||
'<div class="form-section" style="margin-top:0;">归属信息</div>'
|
||||
+'<div class="detail-grid">'+d('所属单位',a.unit)+d('所属医疗点',a.point)+'</div>'
|
||||
+'<div class="form-section">车辆信息</div>'
|
||||
+'<div class="detail-grid">'+d('车牌号',a.plate)+d('年支付费用(万元)',a.fee)+d('所属机构',a.org)+d('开始服务年份',a.year)+d('链接车辆管理系统',a.link)+d('是否安装GPS',a.gps)+'</div>'
|
||||
+'<div class="detail-grid">'+d('救护类型',a.type)+d('车型',a.model)+d('车牌号',a.plate)+d('所属机构',a.org)+d('开始服务年份',a.year)+d('年支付费用(万元)',a.fee)+d('是否安装GPS',a.gps)+d('链接车辆管理系统',a.link)+'</div>'
|
||||
+dPhoto('救护车照片','<div class="photo-tile">🚑</div><div class="photo-tile">🚑</div>')
|
||||
+'<div class="form-section">覆盖与急救能力</div>'
|
||||
+'<div class="detail-grid">'+d('覆盖区域',a.area)+d('覆盖人数',a.people.toLocaleString()+' 人')+d('所配急救设备',a.equip,true)+d('救护能力',a.ability,true)+'</div>'
|
||||
+'<div class="form-section">驾驶员</div>'
|
||||
+'<div class="form-section">驾驶员信息</div>'
|
||||
+'<div class="detail-grid">'+d('驾驶员姓名',a.driver)+d('联系电话',a.tel)+'</div>'
|
||||
+'<div class="form-section">证照与照片</div>'
|
||||
+'<div class="photo-row"><div class="photo-tile">🚑</div><div class="photo-tile">🚑</div><div class="photo-tile">🪪</div><div class="photo-tile">📄</div></div>';
|
||||
+dPhoto('驾驶证图片','<div class="photo-tile">🪪</div>')
|
||||
+dPhoto('资格证图片','<div class="photo-tile">📄</div>');
|
||||
document.getElementById('detailMask').classList.add('open');
|
||||
document.getElementById('detailDrawer').classList.add('open');
|
||||
}
|
||||
|
||||
@@ -39,17 +39,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-group.open .sidebar-group__items{display:block;}
|
||||
.sidebar-item--sub{padding-left:44px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 统计卡片 */
|
||||
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:18px 20px;display:flex;align-items:center;gap:14px;}
|
||||
.stat-card__icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
|
||||
.stat-card__icon--blue{background:var(--primary-light);}
|
||||
.stat-card__icon--green{background:#F6FFED;}
|
||||
.stat-card__icon--orange{background:#FFFBE6;}
|
||||
.stat-card__icon--red{background:#FFF1F0;}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.stat-card__value{font-size:24px;font-weight:600;color:var(--text-primary);line-height:1.3;font-variant-numeric:tabular-nums;}
|
||||
.stat-card__extra{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;padding:16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
@@ -106,6 +96,15 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
.form-control:focus{border-color:var(--primary);}
|
||||
.form-control:disabled{background:#F5F5F5;color:var(--text-secondary);cursor:not-allowed;}
|
||||
select.form-control{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;-webkit-appearance:none;padding-right:28px;cursor:pointer;}
|
||||
.search-select{position:relative;}
|
||||
.search-select__list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);max-height:260px;overflow-y:auto;z-index:30;display:none;margin-top:2px;}
|
||||
.search-select__list.open{display:block;}
|
||||
.search-select__item{padding:9px 12px;font-size:var(--font-sm);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #F5F5F5;}
|
||||
.search-select__item:last-child{border-bottom:none;}
|
||||
.search-select__item:hover,.search-select__item.active{background:var(--primary-light);}
|
||||
.search-select__item .plate{font-weight:600;color:var(--text-primary);}
|
||||
.search-select__item .point{color:var(--text-secondary);font-size:var(--font-xs);}
|
||||
.search-select__empty{padding:12px;color:var(--text-placeholder);font-size:var(--font-sm);text-align:center;}
|
||||
.radio-group{display:flex;gap:20px;height:36px;align-items:center;flex-wrap:wrap;}
|
||||
.radio{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;}
|
||||
.radio input{accent-color:var(--primary);cursor:pointer;}
|
||||
@@ -158,7 +157,6 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">日常业务</div>
|
||||
<a href="daily-treatment.html" class="sidebar-item">日常诊疗</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item active">救护车出勤</a>
|
||||
<a href="daily-follow.html" class="sidebar-item">随访管理</a>
|
||||
<a href="daily-chronic.html" class="sidebar-item">慢病管理</a>
|
||||
<a href="daily-employee-search.html" class="sidebar-item">员工档案</a>
|
||||
@@ -172,40 +170,38 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
</div>
|
||||
</div>
|
||||
<a href="daily-education.html" class="sidebar-item">健康宣教</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item active">救护车出勤</a>
|
||||
<a href="daily-interpret-manage.html" class="sidebar-item">报告解读记录</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
|
||||
<!-- [状态] 统计卡片 -->
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card"><div class="stat-card__icon stat-card__icon--blue">📅</div><div><div class="stat-card__label">当周出勤</div><div class="stat-card__value" id="kWeek">0</div><div class="stat-card__extra" id="kWeekExtra">本周</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon stat-card__icon--green">🗓️</div><div><div class="stat-card__label">当月出勤</div><div class="stat-card__value" id="kMonth">0</div><div class="stat-card__extra" id="kMonthExtra">本月</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon stat-card__icon--orange">📆</div><div><div class="stat-card__label">年度出勤</div><div class="stat-card__value" id="kYear">0</div><div class="stat-card__extra" id="kYearExtra">本年度</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon stat-card__icon--red">📊</div><div><div class="stat-card__label">累计出勤</div><div class="stat-card__value" id="kTotal">0</div><div class="stat-card__extra">历史累计</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 筛选栏:医疗点→救护车级联 + 出勤类型 + 日期区间 -->
|
||||
<!-- [交互] 筛选栏:单位→医疗点级联 + 车牌号搜索 + 出勤类型 + 日期区间 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" id="filterUnit" onchange="onFilterUnit()" style="min-width:140px;">
|
||||
<option value="">全部单位</option>
|
||||
<option>采油一厂</option><option>采油二厂</option><option>第四采油厂</option><option>采气一厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属医疗点</label>
|
||||
<select class="filter-select" id="filterPoint" onchange="onFilterPoint()" style="min-width:170px;">
|
||||
<select class="filter-select" id="filterPoint" style="min-width:170px;">
|
||||
<option value="">全部医疗点</option>
|
||||
<option>樊学作业区医疗点</option><option>安塞采油队长住点医疗室</option><option>姬塬作业区医疗点</option><option>姬圪台作业区医疗点</option><option>桐园作业区医疗点</option><option>西峰基地医疗点</option><option>靖边气田医疗点</option><option>乌审旗采气区医疗点</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>救护车</label>
|
||||
<select class="filter-select" id="filterAmb" style="min-width:130px;">
|
||||
<option value="">全部救护车</option>
|
||||
</select>
|
||||
<label>车牌号</label>
|
||||
<input class="filter-input" id="filterPlate" placeholder="请输入车牌号" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>出勤类型</label>
|
||||
<select class="filter-select" id="filterType" style="min-width:110px;">
|
||||
<option value="">全部类型</option>
|
||||
<option>病情急救</option><option>伤情急救</option><option>日常巡诊</option><option>应急戒备</option>
|
||||
<option>急诊转运</option><option>平诊转运</option><option>日常巡诊</option><option>应急戒备</option><option>床头呼叫</option><option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@@ -259,9 +255,12 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<div class="form-section">救护车归属</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 所属医疗点</span>
|
||||
<select class="form-control" id="fPoint" onchange="onFormPoint()"><option value="">请选择医疗点</option><option>樊学作业区医疗点</option><option>安塞采油队长住点医疗室</option><option>姬塬作业区医疗点</option><option>姬圪台作业区医疗点</option><option>桐园作业区医疗点</option><option>西峰基地医疗点</option><option>靖边气田医疗点</option><option>乌审旗采气区医疗点</option></select></div>
|
||||
<input class="form-control" id="fPoint" disabled placeholder="默认医疗点"></div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 救护车</span>
|
||||
<select class="form-control" id="fAmb" onchange="onFormAmb()"><option value="">请先选择医疗点</option></select></div>
|
||||
<div class="search-select">
|
||||
<input class="form-control" id="fAmb" placeholder="请输入车牌号搜索" autocomplete="off" oninput="onAmbSearch()" onfocus="onAmbSearch()">
|
||||
<div class="search-select__list" id="fAmbList"></div>
|
||||
</div></div>
|
||||
<div class="form-item"><span class="form-label">救护类型</span>
|
||||
<input class="form-control" id="fAmbulanceType" disabled placeholder="选择救护车后自动带出"></div>
|
||||
</div>
|
||||
@@ -272,13 +271,14 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<input class="form-control" type="date" id="fDate"></div>
|
||||
<div class="form-item form-item--full"><span class="form-label"><span class="req">*</span> 出勤类型</span>
|
||||
<div class="radio-group">
|
||||
<label class="radio"><input type="radio" name="fDispatch" value="病情急救" checked>病情急救</label>
|
||||
<label class="radio"><input type="radio" name="fDispatch" value="伤情急救">伤情急救</label>
|
||||
<label class="radio"><input type="radio" name="fDispatch" value="急诊转运" checked>急诊转运</label>
|
||||
<label class="radio"><input type="radio" name="fDispatch" value="平诊转运">平诊转运</label>
|
||||
<label class="radio"><input type="radio" name="fDispatch" value="日常巡诊">日常巡诊</label>
|
||||
<label class="radio"><input type="radio" name="fDispatch" value="应急戒备">应急戒备</label>
|
||||
<label class="radio"><input type="radio" name="fDispatch" value="其他">其他</label>
|
||||
</div></div>
|
||||
<div class="form-item"><span class="form-label"><span class="req">*</span> 出勤司机</span>
|
||||
<select class="form-control" id="fDriver" onchange="onFormDriver()"><option value="">请选择司机</option></select></div>
|
||||
<input class="form-control" id="fDriver" disabled placeholder="选择救护车后自动带出"></div>
|
||||
<div class="form-item"><span class="form-label">司机电话</span>
|
||||
<input class="form-control" id="fTel" disabled placeholder="选择司机后自动带出"></div>
|
||||
<div class="form-item form-item--full"><span class="form-label"><span class="req">*</span> 随车医护</span>
|
||||
@@ -360,7 +360,14 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
|
||||
<script>
|
||||
/* ===== 基础数据 ===== */
|
||||
var points=['樊学作业区医疗点','安塞采油队长住点医疗室','姬塬作业区医疗点','姬圪台作业区医疗点','桐园作业区医疗点','西峰基地医疗点','靖边气田医疗点','乌审旗采气区医疗点'];
|
||||
/* 单位→医疗点映射:与「基础配置·救护车配置」一致 */
|
||||
var unitMap={
|
||||
'采油一厂':['樊学作业区医疗点','安塞采油队长住点医疗室','姬塬作业区医疗点'],
|
||||
'采油二厂':['姬圪台作业区医疗点','桐园作业区医疗点'],
|
||||
'第四采油厂':['西峰基地医疗点'],
|
||||
'采气一厂':['靖边气田医疗点','乌审旗采气区医疗点']
|
||||
};
|
||||
var allPoints=['樊学作业区医疗点','安塞采油队长住点医疗室','姬塬作业区医疗点','姬圪台作业区医疗点','桐园作业区医疗点','西峰基地医疗点','靖边气田医疗点','乌审旗采气区医疗点'];
|
||||
/* 救护车台账:与「基础配置·救护车配置」一致 */
|
||||
var ambulances=[
|
||||
{plate:'CQ·0712A',point:'樊学作业区医疗点',type:'急救型',model:'江铃轻型监护型救护车',driver:'田震',tel:'13936485218'},
|
||||
@@ -370,14 +377,6 @@ var ambulances=[
|
||||
{plate:'CQ·0917E',point:'安塞采油队长住点医疗室',type:'转运型',model:'江淮瑞风转运型救护车',driver:'苏文斌',tel:'15598486703'},
|
||||
{plate:'CQ·2201F',point:'乌审旗采气区医疗点',type:'急救型',model:'红旗轻型监护型救护车',driver:'曹雪芹',tel:'18642802940'}
|
||||
];
|
||||
/* 救护车司机列表:从救护车台账驾驶员去重提取 */
|
||||
var drivers=[];
|
||||
(function(){
|
||||
var seen={};
|
||||
ambulances.forEach(function(a){
|
||||
if(!seen[a.driver]){seen[a.driver]=true;drivers.push({name:a.driver,tel:a.tel});}
|
||||
});
|
||||
})();
|
||||
/* 医护人员池:与「基础配置·医护人员管理」一致 */
|
||||
var medStaff=[
|
||||
{id:1,name:'韩东学',job:'主治医师',post:'医生',point:'樊学作业区医疗点'},
|
||||
@@ -393,71 +392,49 @@ var medStaff=[
|
||||
{id:11,name:'荣大海',job:'副主任医师',post:'医生',point:'乌审旗采气区医疗点'},
|
||||
{id:12,name:'牛玉洁',job:'护师',post:'药师',point:'姬塬作业区医疗点'}
|
||||
];
|
||||
/* 救护车出勤记录:多救护车混合,覆盖四类出勤类型 */
|
||||
/* 救护车出勤记录:多救护车混合,覆盖六类出勤类型 */
|
||||
var attendances=[
|
||||
{id:1,date:'2026-09-08',point:'樊学作业区医疗点',plate:'CQ·0712A',type:'急救型',dispatch:'病情急救',driver:'田震',tel:'13936485218',staff:['韩东学','兰小娟'],out:'樊学作业区 7#井站',to:'CQ油田总医院'},
|
||||
{id:2,date:'2026-09-08',point:'姬圪台作业区医疗点',plate:'CQ·1366B',type:'急救型',dispatch:'伤情急救',driver:'冯保山',tel:'13581136174',staff:['窦志远','苗慧敏'],out:'姬圪台联合站',to:'庆阳市人民医院'},
|
||||
{id:1,date:'2026-09-08',point:'樊学作业区医疗点',plate:'CQ·0712A',type:'急救型',dispatch:'急诊转运',driver:'田震',tel:'13936485218',staff:['韩东学','兰小娟'],out:'樊学作业区 7#井站',to:'CQ油田总医院'},
|
||||
{id:2,date:'2026-09-08',point:'姬圪台作业区医疗点',plate:'CQ·1366B',type:'急救型',dispatch:'急诊转运',driver:'冯保山',tel:'13581136174',staff:['窦志远','苗慧敏'],out:'姬圪台联合站',to:'庆阳市人民医院'},
|
||||
{id:3,date:'2026-09-07',point:'西峰基地医疗点',plate:'CQ·0208C',type:'转运型',dispatch:'日常巡诊',driver:'罗建平',tel:'15077088357',staff:['霍静怡'],out:'西峰基地机关',to:'西峰基地卫生室'},
|
||||
{id:4,date:'2026-09-07',point:'靖边气田医疗点',plate:'CQ·1533D',type:'急救型',dispatch:'应急戒备',driver:'邓成',tel:'13392699481',staff:['康永强','花灵芝'],out:'靖边净化厂',to:'现场应急指挥部'},
|
||||
{id:5,date:'2026-09-06',point:'安塞采油队长住点医疗室',plate:'CQ·0917E',type:'转运型',dispatch:'日常巡诊',driver:'苏文斌',tel:'15598486703',staff:['白宇峰'],out:'安塞基地队部',to:'吴起油田医院'},
|
||||
{id:6,date:'2026-09-06',point:'乌审旗采气区医疗点',plate:'CQ·2201F',type:'急救型',dispatch:'伤情急救',driver:'曹雪芹',tel:'18642802940',staff:['荣大海','花灵芝'],out:'苏里格南作业区营地',to:'乌审旗人民医院'},
|
||||
{id:6,date:'2026-09-06',point:'乌审旗采气区医疗点',plate:'CQ·2201F',type:'急救型',dispatch:'平诊转运',driver:'曹雪芹',tel:'18642802940',staff:['荣大海','花灵芝'],out:'苏里格南作业区营地',to:'乌审旗人民医院'},
|
||||
{id:7,date:'2026-09-05',point:'樊学作业区医疗点',plate:'CQ·0712A',type:'急救型',dispatch:'应急戒备',driver:'田震',tel:'13936485218',staff:['韩东学'],out:'樊学作业区应急演练现场',to:'演练指挥部'},
|
||||
{id:8,date:'2026-09-05',point:'姬圪台作业区医疗点',plate:'CQ·1366B',type:'急救型',dispatch:'病情急救',driver:'冯保山',tel:'13581136174',staff:['窦志远','屈二娃'],out:'姬圪台作业区 3#站',to:'庆阳市人民医院'},
|
||||
{id:9,date:'2026-09-04',point:'西峰基地医疗点',plate:'CQ·0208C',type:'转运型',dispatch:'病情急救',driver:'罗建平',tel:'15077088357',staff:['霍静怡'],out:'西峰基地生活区',to:'第四采油厂总医院'},
|
||||
{id:8,date:'2026-09-05',point:'姬圪台作业区医疗点',plate:'CQ·1366B',type:'急救型',dispatch:'急诊转运',driver:'冯保山',tel:'13581136174',staff:['窦志远','屈二娃'],out:'姬圪台作业区 3#站',to:'庆阳市人民医院'},
|
||||
{id:9,date:'2026-09-04',point:'西峰基地医疗点',plate:'CQ·0208C',type:'转运型',dispatch:'床头呼叫',driver:'罗建平',tel:'15077088357',staff:['霍静怡'],out:'西峰基地生活区',to:'第四采油厂总医院'},
|
||||
{id:10,date:'2026-09-04',point:'靖边气田医疗点',plate:'CQ·1533D',type:'急救型',dispatch:'日常巡诊',driver:'邓成',tel:'13392699481',staff:['康永强'],out:'靖边气田井场巡诊',to:'靖边气田医疗点'},
|
||||
{id:11,date:'2026-09-03',point:'安塞采油队长住点医疗室',plate:'CQ·0917E',type:'转运型',dispatch:'日常巡诊',driver:'苏文斌',tel:'15598486703',staff:['白宇峰','牛玉洁'],out:'安塞基地各井站',to:'安塞采油队长住点医疗室'},
|
||||
{id:12,date:'2026-09-03',point:'乌审旗采气区医疗点',plate:'CQ·2201F',type:'急救型',dispatch:'病情急救',driver:'曹雪芹',tel:'18642802940',staff:['荣大海'],out:'乌审旗采气区集气站',to:'乌审旗人民医院'}
|
||||
{id:12,date:'2026-09-03',point:'乌审旗采气区医疗点',plate:'CQ·2201F',type:'急救型',dispatch:'其他',driver:'曹雪芹',tel:'18642802940',staff:['荣大海'],out:'乌审旗采气区集气站',to:'乌审旗人民医院'}
|
||||
];
|
||||
var nextId=13,editingId=null,pendingDelId=null;
|
||||
var dispatchBadge={'病情急救':'badge--danger','伤情急救':'badge--warning','日常巡诊':'badge--info','应急戒备':'badge--success'};
|
||||
var typeBadge={'急救型':'badge--danger','转运型':'badge--info'};
|
||||
var dispatchBadge={'急诊转运':'badge--danger','平诊转运':'badge--info','日常巡诊':'badge--success','应急戒备':'badge--warning','床头呼叫':'badge--info','其他':'badge--muted'};
|
||||
|
||||
/* ===== 筛选与渲染 ===== */
|
||||
var pageSize=10,currentPage=1;
|
||||
function onFilterPoint(){
|
||||
var point=document.getElementById('filterPoint').value;
|
||||
var sel=document.getElementById('filterAmb');
|
||||
sel.innerHTML='<option value="">全部救护车</option>';
|
||||
ambulances.filter(function(a){return !point||a.point===point;}).forEach(function(a){
|
||||
var o=document.createElement('option');o.textContent=a.plate;sel.appendChild(o);
|
||||
function fillFilterPoints(unit){
|
||||
var sel=document.getElementById('filterPoint');
|
||||
var list=unit?(unitMap[unit]||[]):allPoints;
|
||||
sel.innerHTML='<option value="">全部医疗点</option>';
|
||||
list.forEach(function(p){
|
||||
var o=document.createElement('option');o.textContent=p;sel.appendChild(o);
|
||||
});
|
||||
}
|
||||
function onFilterUnit(){fillFilterPoints(document.getElementById('filterUnit').value);}
|
||||
function currentData(){
|
||||
var unit=document.getElementById('filterUnit').value;
|
||||
var point=document.getElementById('filterPoint').value;
|
||||
var amb=document.getElementById('filterAmb').value;
|
||||
var plate=document.getElementById('filterPlate').value.trim();
|
||||
var type=document.getElementById('filterType').value;
|
||||
var from=document.getElementById('filterFrom').value;
|
||||
var to=document.getElementById('filterTo').value;
|
||||
var points=unit?(unitMap[unit]||[]):null;
|
||||
return attendances.filter(function(r){
|
||||
return (!point||r.point===point)&&(!amb||r.plate===amb)
|
||||
return (!point||r.point===point)&&(!points||points.indexOf(r.point)!==-1)
|
||||
&&(!plate||r.plate.indexOf(plate)!==-1)
|
||||
&&(!type||r.dispatch===type)&&(!from||r.date>=from)&&(!to||r.date<=to);
|
||||
});
|
||||
}
|
||||
var TODAY='2026-09-09';
|
||||
function pad(n){return n<10?'0'+n:''+n;}
|
||||
function fmtDate(d){return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate());}
|
||||
function weekRange(){
|
||||
var base=new Date(TODAY+'T00:00:00');
|
||||
var dow=base.getDay();
|
||||
var monOffset=dow===0?-6:1-dow;
|
||||
var mon=new Date(base);mon.setDate(base.getDate()+monOffset);
|
||||
var sun=new Date(mon);sun.setDate(mon.getDate()+6);
|
||||
return {start:fmtDate(mon),end:fmtDate(sun)};
|
||||
}
|
||||
function renderStats(){
|
||||
var list=attendances;
|
||||
var wk=weekRange();
|
||||
var week=list.filter(function(r){return r.date>=wk.start&&r.date<=wk.end;}).length;
|
||||
var month=list.filter(function(r){return r.date.slice(0,7)===TODAY.slice(0,7);}).length;
|
||||
var year=list.filter(function(r){return r.date.slice(0,4)===TODAY.slice(0,4);}).length;
|
||||
document.getElementById('kWeek').textContent=week;
|
||||
document.getElementById('kWeekExtra').textContent=wk.start+' ~ '+wk.end;
|
||||
document.getElementById('kMonth').textContent=month;
|
||||
document.getElementById('kMonthExtra').textContent=parseInt(TODAY.slice(5,7),10)+'月';
|
||||
document.getElementById('kYear').textContent=year;
|
||||
document.getElementById('kYearExtra').textContent=TODAY.slice(0,4)+'年度';
|
||||
document.getElementById('kTotal').textContent=list.length;
|
||||
}
|
||||
function renderTable(){
|
||||
var list=currentData();
|
||||
var start=(currentPage-1)*pageSize,pageData=list.slice(start,start+pageSize);
|
||||
@@ -473,15 +450,15 @@ function renderTable(){
|
||||
html+='<tr>'
|
||||
+'<td>'+(start+i+1)+'</td>'
|
||||
+'<td>'+r.date+'</td>'
|
||||
+'<td style="text-align:left;">'+r.point+'</td>'
|
||||
+'<td>'+r.point+'</td>'
|
||||
+'<td style="font-weight:600;">'+r.plate+'</td>'
|
||||
+'<td><span class="badge '+typeBadge[r.type]+'">'+r.type+'</span></td>'
|
||||
+'<td>'+r.type+'</td>'
|
||||
+'<td><span class="badge '+dispatchBadge[r.dispatch]+'">'+r.dispatch+'</span></td>'
|
||||
+'<td>'+r.driver+'</td>'
|
||||
+'<td>'+r.tel+'</td>'
|
||||
+'<td style="text-align:left;">'+(r.staff.join('、'))+'</td>'
|
||||
+'<td style="text-align:left;max-width:180px;overflow:hidden;text-overflow:ellipsis;">'+r.out+'</td>'
|
||||
+'<td style="text-align:left;max-width:180px;overflow:hidden;text-overflow:ellipsis;">'+r.to+'</td>'
|
||||
+'<td>'+(r.staff.join('、'))+'</td>'
|
||||
+'<td style="max-width:180px;overflow:hidden;text-overflow:ellipsis;">'+r.out+'</td>'
|
||||
+'<td style="max-width:180px;overflow:hidden;text-overflow:ellipsis;">'+r.to+'</td>'
|
||||
+'<td class="td-actions">'
|
||||
+'<button class="btn btn-link" onclick="openDetail('+r.id+')">详情</button>'
|
||||
+'<button class="btn btn-link" onclick="openForm('+r.id+')">编辑</button>'
|
||||
@@ -492,7 +469,9 @@ function renderTable(){
|
||||
}
|
||||
function applyFilter(){currentPage=1;renderTable();}
|
||||
function resetFilter(){
|
||||
document.getElementById('filterPoint').value='';onFilterPoint();
|
||||
document.getElementById('filterUnit').value='';
|
||||
fillFilterPoints('');
|
||||
document.getElementById('filterPlate').value='';
|
||||
document.getElementById('filterType').value='';
|
||||
document.getElementById('filterFrom').value='';
|
||||
document.getElementById('filterTo').value='';
|
||||
@@ -505,36 +484,27 @@ function turnPage(d){
|
||||
}
|
||||
|
||||
/* ===== 新增/编辑抽屉 ===== */
|
||||
function fillAmb(point,keep){
|
||||
var sel=document.getElementById('fAmb');
|
||||
sel.innerHTML='<option value="">请选择救护车</option>';
|
||||
ambulances.filter(function(a){return !point||a.point===point;}).forEach(function(a){
|
||||
var o=document.createElement('option');o.textContent=a.plate;
|
||||
if(keep&&a.plate===keep)o.selected=true;
|
||||
sel.appendChild(o);
|
||||
});
|
||||
var DEFAULT_POINT='樊学作业区医疗点';
|
||||
function onAmbSearch(){
|
||||
var kw=document.getElementById('fAmb').value.trim().toUpperCase();
|
||||
var list=ambulances.filter(function(a){return !kw||a.plate.toUpperCase().indexOf(kw)!==-1;});
|
||||
var box=document.getElementById('fAmbList');
|
||||
box.innerHTML=list.length?list.map(function(a){
|
||||
return '<div class="search-select__item" onmousedown="selectAmb(\''+a.plate+'\')">'
|
||||
+'<span class="plate">'+a.plate+'</span>'
|
||||
+'<span class="point">'+a.point+' · '+a.type+'</span></div>';
|
||||
}).join(''):'<div class="search-select__empty">无匹配救护车</div>';
|
||||
box.classList.add('open');
|
||||
}
|
||||
function fillDriverSel(keep){
|
||||
var sel=document.getElementById('fDriver');
|
||||
sel.innerHTML='<option value="">请选择司机</option>';
|
||||
drivers.forEach(function(d){
|
||||
var o=document.createElement('option');o.textContent=d.name;
|
||||
if(keep&&d.name===keep)o.selected=true;
|
||||
sel.appendChild(o);
|
||||
});
|
||||
}
|
||||
function onFormPoint(){fillAmb(document.getElementById('fPoint').value);clearAmbType();}
|
||||
function onFormAmb(){
|
||||
var plate=document.getElementById('fAmb').value;
|
||||
function selectAmb(plate){
|
||||
var a=ambulances.find(function(x){return x.plate===plate;});
|
||||
document.getElementById('fAmb').value=plate;
|
||||
document.getElementById('fAmbulanceType').value=a?a.type:'';
|
||||
document.getElementById('fDriver').value=a?a.driver:'';
|
||||
document.getElementById('fTel').value=a?a.tel:'';
|
||||
document.getElementById('fAmbList').classList.remove('open');
|
||||
}
|
||||
function clearAmbType(){document.getElementById('fAmbulanceType').value='';}
|
||||
function onFormDriver(){
|
||||
var name=document.getElementById('fDriver').value;
|
||||
var d=drivers.find(function(x){return x.name===name;});
|
||||
document.getElementById('fTel').value=d?d.tel:'';
|
||||
}
|
||||
function closeAmbList(){document.getElementById('fAmbList').classList.remove('open');}
|
||||
var selectedStaffIds=[];
|
||||
function setRadio(name,val){
|
||||
document.querySelectorAll('input[name="'+name+'"]').forEach(function(r){r.checked=(r.value===val);});
|
||||
@@ -558,23 +528,24 @@ function openForm(id){
|
||||
editingId=id||null;
|
||||
document.getElementById('formTitle').textContent=id?'编辑出勤记录':'新增出勤';
|
||||
var r=id?attendances.find(function(x){return x.id===id;}):null;
|
||||
document.getElementById('fPoint').value=r?r.point:'';
|
||||
fillAmb(r?r.point:'',r?r.plate:'');
|
||||
if(!r)document.getElementById('fAmb').innerHTML='<option value="">请先选择医疗点</option>';
|
||||
fillDriverSel(r?r.driver:'');
|
||||
document.getElementById('fDate').value=r?r.date:'';
|
||||
setRadio('fDispatch',r?r.dispatch:'病情急救');
|
||||
document.getElementById('fPoint').value=r?r.point:DEFAULT_POINT;
|
||||
document.getElementById('fAmb').value=r?r.plate:'';
|
||||
document.getElementById('fAmbulanceType').value=r?r.type:'';
|
||||
document.getElementById('fDriver').value=r?r.driver:'';
|
||||
document.getElementById('fTel').value=r?r.tel:'';
|
||||
document.getElementById('fDate').value=r?r.date:todayStr();
|
||||
setRadio('fDispatch',r?r.dispatch:'急诊转运');
|
||||
selectedStaffIds=(r?r.staff.slice():[]).map(function(n){var m=medStaff.find(function(x){return x.name===n;});return m?m.id:null;}).filter(function(id){return id!=null;});
|
||||
renderStaffChips();
|
||||
document.getElementById('fOut').value=r?r.out:'';
|
||||
document.getElementById('fTo').value=r?r.to:'';
|
||||
if(r){onFormAmb();onFormDriver();}else{clearAmbType();document.getElementById('fTel').value='';}
|
||||
closeAmbList();
|
||||
document.getElementById('formMask').classList.add('open');
|
||||
document.getElementById('formDrawer').classList.add('open');
|
||||
}
|
||||
function saveForm(){
|
||||
var point=document.getElementById('fPoint').value;
|
||||
var plate=document.getElementById('fAmb').value;
|
||||
var plate=document.getElementById('fAmb').value.trim();
|
||||
var date=document.getElementById('fDate').value;
|
||||
var dispatch=getRadio('fDispatch');
|
||||
var driver=document.getElementById('fDriver').value;
|
||||
@@ -588,19 +559,18 @@ function saveForm(){
|
||||
if(!out){showToast('请填写出勤地点');return;}
|
||||
if(!to){showToast('请填写到达地点');return;}
|
||||
var a=ambulances.find(function(x){return x.plate===plate;});
|
||||
var d=drivers.find(function(x){return x.name===driver;});
|
||||
var staffNames=selectedStaffIds.map(function(id){return medStaff.find(function(m){return m.id===id;}).name;});
|
||||
var obj={
|
||||
id:editingId||nextId++,
|
||||
date:date,point:point,plate:plate,type:a.type,dispatch:dispatch,
|
||||
driver:driver,tel:d.tel,staff:staffNames,out:out,to:to
|
||||
driver:driver,tel:a.tel,staff:staffNames,out:out,to:to
|
||||
};
|
||||
if(editingId){
|
||||
attendances.splice(attendances.findIndex(function(x){return x.id===editingId;}),1,obj);
|
||||
}else{
|
||||
attendances.push(obj);
|
||||
}
|
||||
closeDrawer('form');renderStats();renderTable();
|
||||
closeDrawer('form');renderTable();
|
||||
showToast(editingId?'出勤记录已更新':'出勤记录已新增');
|
||||
}
|
||||
|
||||
@@ -611,7 +581,7 @@ function openDetail(id){
|
||||
function d(k,v,full){return '<div class="detail-item'+(full?' detail-item--full':'')+'"><div class="dk">'+k+'</div><div class="dv">'+(v===''||v==null?'—':v)+'</div></div>';}
|
||||
document.getElementById('detailBody').innerHTML=
|
||||
'<div class="form-section" style="margin-top:0;">救护车信息</div>'
|
||||
+'<div class="detail-grid">'+d('所属医疗点',r.point)+d('救护车',r.plate)+d('救护类型','<span class="badge '+typeBadge[r.type]+'">'+r.type+'</span>')+'</div>'
|
||||
+'<div class="detail-grid">'+d('所属医疗点',r.point)+d('救护车',r.plate)+d('救护类型',r.type)+'</div>'
|
||||
+'<div class="form-section">出勤信息</div>'
|
||||
+'<div class="detail-grid">'
|
||||
+d('出勤日期',r.date)
|
||||
@@ -629,7 +599,8 @@ function openDetail(id){
|
||||
/* ===== 随车医护选择弹窗 ===== */
|
||||
function renderStaffList(){
|
||||
var kw=document.getElementById('staffKeyword').value.trim();
|
||||
var list=medStaff.filter(function(m){return !kw||m.name.indexOf(kw)!==-1;});
|
||||
var point=document.getElementById('fPoint').value;
|
||||
var list=medStaff.filter(function(m){return (!point||m.point===point)&&(!kw||m.name.indexOf(kw)!==-1);});
|
||||
var body=document.getElementById('staffListBody');
|
||||
if(!list.length){body.innerHTML='<tr><td colspan="5" class="td-empty">暂无匹配人员</td></tr>';return;}
|
||||
body.innerHTML=list.map(function(m){
|
||||
@@ -660,7 +631,7 @@ function askDelete(id){
|
||||
}
|
||||
function confirmDelete(){
|
||||
attendances=attendances.filter(function(r){return r.id!==pendingDelId;});
|
||||
closeModal('delMask');renderStats();renderTable();
|
||||
closeModal('delMask');renderTable();
|
||||
showToast('出勤记录已删除');
|
||||
pendingDelId=null;
|
||||
}
|
||||
@@ -675,12 +646,19 @@ function closeDrawer(k){
|
||||
document.getElementById(k+'Drawer').classList.remove('open');
|
||||
}
|
||||
function closeModal(id){document.getElementById(id).classList.remove('open');}
|
||||
function todayStr(){
|
||||
var d=new Date();
|
||||
return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0');
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('.search-select'))closeAmbList();
|
||||
});
|
||||
function showToast(msg){
|
||||
var t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');
|
||||
clearTimeout(t._timer);t._timer=setTimeout(function(){t.classList.remove('show');},2200);
|
||||
}
|
||||
|
||||
onFilterPoint();renderStats();renderTable();
|
||||
renderTable();
|
||||
function toggleGroup(id){document.getElementById(id).classList.toggle('open');}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -129,7 +129,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">日常业务</div>
|
||||
<a href="daily-treatment.html" class="sidebar-item">日常诊疗</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-follow.html" class="sidebar-item">随访管理</a>
|
||||
<a href="daily-chronic.html" class="sidebar-item active">慢病管理</a>
|
||||
<a href="daily-employee-search.html" class="sidebar-item">员工档案</a>
|
||||
@@ -143,6 +142,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
<a href="daily-education.html" class="sidebar-item">健康宣教</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-interpret-manage.html" class="sidebar-item">报告解读记录</a>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -145,7 +145,6 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">日常业务</div>
|
||||
<a href="daily-treatment.html" class="sidebar-item">日常诊疗</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-follow.html" class="sidebar-item">随访管理</a>
|
||||
<a href="daily-chronic.html" class="sidebar-item active">慢病管理</a>
|
||||
<a href="daily-employee-search.html" class="sidebar-item">员工档案</a>
|
||||
@@ -159,6 +158,7 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
<a href="daily-education.html" class="sidebar-item">健康宣教</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-interpret-manage.html" class="sidebar-item">报告解读记录</a>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -167,7 +167,6 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">日常业务</div>
|
||||
<a href="daily-treatment.html" class="sidebar-item">日常诊疗</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-follow.html" class="sidebar-item">随访管理</a>
|
||||
<a href="daily-chronic.html" class="sidebar-item">慢病管理</a>
|
||||
<a href="daily-employee-search.html" class="sidebar-item">员工档案</a>
|
||||
@@ -181,6 +180,7 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
</div>
|
||||
</div>
|
||||
<a href="daily-education.html" class="sidebar-item active">健康宣教</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-interpret-manage.html" class="sidebar-item">报告解读记录</a>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -193,7 +193,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">日常业务</div>
|
||||
<a href="daily-treatment.html" class="sidebar-item">日常诊疗</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-follow.html" class="sidebar-item">随访管理</a>
|
||||
<a href="daily-chronic.html" class="sidebar-item">慢病管理</a>
|
||||
<a href="daily-employee-search.html" class="sidebar-item active">员工档案</a>
|
||||
@@ -207,6 +206,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
<a href="daily-education.html" class="sidebar-item">健康宣教</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-interpret-manage.html" class="sidebar-item">报告解读记录</a>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -128,7 +128,6 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">日常业务</div>
|
||||
<a href="daily-treatment.html" class="sidebar-item">日常诊疗</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-follow.html" class="sidebar-item">随访管理</a>
|
||||
<a href="daily-chronic.html" class="sidebar-item">慢病管理</a>
|
||||
<a href="daily-employee-search.html" class="sidebar-item active">员工档案</a>
|
||||
@@ -142,6 +141,7 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
<a href="daily-education.html" class="sidebar-item">健康宣教</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-interpret-manage.html" class="sidebar-item">报告解读记录</a>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -190,7 +190,6 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">日常业务</div>
|
||||
<a href="daily-treatment.html" class="sidebar-item">日常诊疗</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-follow.html" class="sidebar-item">随访管理</a>
|
||||
<a href="daily-chronic.html" class="sidebar-item">慢病管理</a>
|
||||
<a href="daily-employee-search.html" class="sidebar-item">员工档案</a>
|
||||
@@ -204,6 +203,7 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
</div>
|
||||
</div>
|
||||
<a href="daily-education.html" class="sidebar-item">健康宣教</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-interpret-manage.html" class="sidebar-item">报告解读记录</a>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -186,7 +186,6 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">日常业务</div>
|
||||
<a href="daily-treatment.html" class="sidebar-item">日常诊疗</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-follow.html" class="sidebar-item active">随访管理</a>
|
||||
<a href="daily-chronic.html" class="sidebar-item">慢病管理</a>
|
||||
<a href="daily-employee-search.html" class="sidebar-item">员工档案</a>
|
||||
@@ -200,6 +199,7 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
</div>
|
||||
</div>
|
||||
<a href="daily-education.html" class="sidebar-item">健康宣教</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-interpret-manage.html" class="sidebar-item">报告解读记录</a>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -154,7 +154,6 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">日常业务</div>
|
||||
<a href="daily-treatment.html" class="sidebar-item">日常诊疗</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-follow.html" class="sidebar-item">随访管理</a>
|
||||
<a href="daily-chronic.html" class="sidebar-item">慢病管理</a>
|
||||
<a href="daily-employee-search.html" class="sidebar-item">员工档案</a>
|
||||
@@ -168,6 +167,7 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
<a href="daily-education.html" class="sidebar-item">健康宣教</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-interpret-manage.html" class="sidebar-item active">报告解读记录</a>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -197,7 +197,6 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">日常业务</div>
|
||||
<a href="daily-treatment.html" class="sidebar-item">日常诊疗</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-follow.html" class="sidebar-item">随访管理</a>
|
||||
<a href="daily-chronic.html" class="sidebar-item">慢病管理</a>
|
||||
<a href="daily-employee-search.html" class="sidebar-item">员工档案</a>
|
||||
@@ -211,6 +210,7 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
</div>
|
||||
</div>
|
||||
<a href="daily-education.html" class="sidebar-item">健康宣教</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-interpret-manage.html" class="sidebar-item">报告解读记录</a>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -188,7 +188,6 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">日常业务</div>
|
||||
<a href="daily-treatment.html" class="sidebar-item active">日常诊疗</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-follow.html" class="sidebar-item">随访管理</a>
|
||||
<a href="daily-chronic.html" class="sidebar-item">慢病管理</a>
|
||||
<a href="daily-employee-search.html" class="sidebar-item">员工档案</a>
|
||||
@@ -202,6 +201,7 @@ select.form-control{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http:/
|
||||
</div>
|
||||
</div>
|
||||
<a href="daily-education.html" class="sidebar-item">健康宣教</a>
|
||||
<a href="daily-ambulance-attendance.html" class="sidebar-item">救护车出勤</a>
|
||||
<a href="daily-interpret-manage.html" class="sidebar-item">报告解读记录</a>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:9px 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);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:16px 20px;min-height:calc(100vh - 56px);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:9px 24px;font-size:var(--font-sm);color:rgba(255,255,255,0.45);cursor:pointer;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;stroke:currentColor;transition:transform .2s;}
|
||||
@@ -39,28 +39,29 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-subgroup.open .sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:40px;}
|
||||
/* [交互] 所属单位→所属医疗点级联;清空单位回到全局统计(与老系统 allowClear 一致) */
|
||||
.filter-bar{background:#fff;padding:16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
.filter-bar{background:#fff;padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
.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;min-width:140px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;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;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;}
|
||||
.filter-select:disabled{background-color:#F5F5F5;color:var(--text-placeholder);cursor:not-allowed;}
|
||||
/* 卡片:基本数据(32%)+出勤次数(66%),布局与老系统 number-container 一致 */
|
||||
.num-row{display:flex;gap:16px;margin-top:16px;align-items:stretch;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:16px 20px;}
|
||||
.stat-card__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);margin-bottom:12px;font-size:var(--font-base);}
|
||||
.stat-card__grid{display:flex;justify-content:space-around;background:#F8F8FA;border-radius:10px;padding:14px 8px;}
|
||||
.num-row{display:flex;gap:16px;margin-top:12px;align-items:stretch;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:12px 16px;}
|
||||
.stat-card__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);margin-bottom:8px;}
|
||||
.stat-card__grid{display:flex;justify-content:space-around;background:#F8F8FA;border-radius:10px;padding:10px 8px;}
|
||||
.stat-cell{text-align:center;}
|
||||
.stat-cell__val{font-size:22px;font-weight:600;color:var(--text-primary);}
|
||||
.stat-cell__val{font-size:20px;font-weight:600;color:var(--text-primary);}
|
||||
.stat-cell__val small{font-size:var(--font-xs);font-weight:400;color:var(--text-placeholder);margin-left:2px;}
|
||||
.stat-cell__name{font-size:var(--font-sm);color:var(--text-secondary);margin-top:4px;}
|
||||
.stat-cell__name{font-size:var(--font-sm);color:var(--text-secondary);margin-top:2px;}
|
||||
.num-card--l{width:32%;}.num-card--r{width:68%;}
|
||||
.chart-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:16px;}
|
||||
.chart-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:18px 22px;}
|
||||
.chart-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px;}
|
||||
.chart-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:14px 18px;}
|
||||
.chart-card--full{grid-column:1/-1;}
|
||||
.chart-card__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);display:flex;align-items:center;justify-content:space-between;}
|
||||
.chart-card__title .lg{display:flex;gap:12px;font-size:var(--font-xs);font-weight:400;color:var(--text-secondary);}
|
||||
.chart-card__title .lg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px;}
|
||||
.chart-card svg{width:100%;height:auto;display:block;margin-top:10px;}
|
||||
.chart-card--full svg{max-height:230px;}
|
||||
.wk-switch{display:inline-flex;height:26px;line-height:26px;text-align:center;font-weight:400;cursor:pointer;font-size:var(--font-sm);}
|
||||
.wk-switch span{width:50px;border:1px solid var(--primary);}
|
||||
.wk-switch span:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
|
||||
@@ -155,13 +156,13 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<div class="chart-grid">
|
||||
<div class="chart-card">
|
||||
<div class="chart-card__title">救护车类型占比<span style="font-weight:400;color:var(--text-placeholder);font-size:var(--font-xs);">(辆)</span></div>
|
||||
<svg id="pieType" viewBox="0 0 560 240"></svg>
|
||||
<svg id="pieType" viewBox="0 0 560 220"></svg>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card__title">出勤次数占比
|
||||
<span class="wk-switch" id="wkDisp"><span class="on" onclick="setWeek('wkDisp',true)">本周</span><span class="off" onclick="setWeek('wkDisp',false)">累计</span></span>
|
||||
</div>
|
||||
<svg id="pieDisp" viewBox="0 0 560 260"></svg>
|
||||
<svg id="pieDisp" viewBox="0 0 560 230"></svg>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card__title">医护人员出勤次数排名TOP5
|
||||
@@ -182,7 +183,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<div class="chart-card__title">本周出勤次数变化趋势
|
||||
<span class="lg" id="trendLg"></span>
|
||||
</div>
|
||||
<svg id="chartTrend" viewBox="0 0 1120 280"></svg>
|
||||
<svg id="chartTrend" viewBox="0 0 1120 200"></svg>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -191,38 +192,38 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
|
||||
<script>
|
||||
/* 数据源与「救护车配置」页勾稽:6 辆车=4 急救型+2 转运型,辐射人数取车辆覆盖人数;
|
||||
出勤五类口径:急救转运/平诊转运/日常巡诊/应急戒备/其他出勤(dispatch_type 字典) */
|
||||
var TYPES=['jz','pz','rc','yj','qt'];
|
||||
var TYPE_NAME={jz:'急救转运',pz:'平诊转运',rc:'日常巡诊',yj:'应急戒备',qt:'其他出勤'};
|
||||
var DISC=['#5087ec','#68bbc4','#58a55c','#f2bd42','#ee752f'];
|
||||
出勤六类口径:急救转运/平诊转运/日常巡诊/应急戒备/床头呼叫/其他出勤(dispatch_type 字典) */
|
||||
var TYPES=['jz','pz','rc','yj','ct','qt'];
|
||||
var TYPE_NAME={jz:'急救转运',pz:'平诊转运',rc:'日常巡诊',yj:'应急戒备',ct:'床头呼叫',qt:'其他出勤'};
|
||||
var DISC=['#5087ec','#68bbc4','#58a55c','#f2bd42','#9966cc','#ee752f'];
|
||||
var pts=[
|
||||
{unit:'采油一厂',name:'樊学作业区医疗点',total:1,jj:1,zy:0,rad:860,
|
||||
w:{jz:3,pz:2,rc:5,yj:1,qt:1},t:{jz:42,pz:28,rc:76,yj:15,qt:9},
|
||||
staff:[{name:'李桂芳',w:{jz:2,pz:1,rc:3,yj:1,qt:1},t:{jz:24,pz:16,rc:41,yj:8,qt:5}},
|
||||
{name:'石维国',w:{jz:1,pz:1,rc:2,yj:0,qt:0},t:{jz:18,pz:12,rc:35,yj:7,qt:4}}]},
|
||||
w:{jz:3,pz:2,rc:5,yj:1,qt:1,ct:0},t:{jz:42,pz:28,rc:76,yj:15,qt:9,ct:0},
|
||||
staff:[{name:'李桂芳',w:{jz:2,pz:1,rc:3,yj:1,qt:1,ct:0},t:{jz:24,pz:16,rc:41,yj:8,qt:5,ct:0}},
|
||||
{name:'石维国',w:{jz:1,pz:1,rc:2,yj:0,qt:0,ct:0},t:{jz:18,pz:12,rc:35,yj:7,qt:4,ct:0}}]},
|
||||
{unit:'采油一厂',name:'安塞采油队长住点医疗室',total:1,jj:0,zy:1,rad:540,
|
||||
w:{jz:0,pz:3,rc:2,yj:0,qt:1},t:{jz:9,pz:41,rc:33,yj:6,qt:10},
|
||||
staff:[{name:'周娟',w:{jz:0,pz:3,rc:2,yj:0,qt:1},t:{jz:9,pz:41,rc:33,yj:6,qt:10}}]},
|
||||
w:{jz:0,pz:3,rc:2,yj:0,qt:1,ct:0},t:{jz:9,pz:41,rc:33,yj:6,qt:10,ct:0},
|
||||
staff:[{name:'周娟',w:{jz:0,pz:3,rc:2,yj:0,qt:1,ct:0},t:{jz:9,pz:41,rc:33,yj:6,qt:10,ct:0}}]},
|
||||
{unit:'采油一厂',name:'姬塬作业区医疗点',total:0,jj:0,zy:0,rad:0,
|
||||
w:{jz:0,pz:0,rc:0,yj:0,qt:0},t:{jz:0,pz:0,rc:0,yj:0,qt:0},staff:[]},
|
||||
w:{jz:0,pz:0,rc:0,yj:0,qt:0,ct:0},t:{jz:0,pz:0,rc:0,yj:0,qt:0,ct:0},staff:[]},
|
||||
{unit:'采油二厂',name:'姬圪台作业区医疗点',total:1,jj:1,zy:0,rad:1240,
|
||||
w:{jz:2,pz:1,rc:4,yj:2,qt:0},t:{jz:35,pz:22,rc:61,yj:18,qt:7},
|
||||
staff:[{name:'曲志明',w:{jz:1,pz:1,rc:2,yj:1,qt:0},t:{jz:19,pz:13,rc:34,yj:10,qt:4}},
|
||||
{name:'张秀兰',w:{jz:1,pz:0,rc:2,yj:1,qt:0},t:{jz:16,pz:9,rc:27,yj:8,qt:3}}]},
|
||||
w:{jz:2,pz:1,rc:4,yj:2,qt:0,ct:0},t:{jz:35,pz:22,rc:61,yj:18,qt:7,ct:0},
|
||||
staff:[{name:'曲志明',w:{jz:1,pz:1,rc:2,yj:1,qt:0,ct:0},t:{jz:19,pz:13,rc:34,yj:10,qt:4,ct:0}},
|
||||
{name:'张秀兰',w:{jz:1,pz:0,rc:2,yj:1,qt:0,ct:0},t:{jz:16,pz:9,rc:27,yj:8,qt:3,ct:0}}]},
|
||||
{unit:'采油二厂',name:'桐园作业区医疗点',total:0,jj:0,zy:0,rad:0,
|
||||
w:{jz:0,pz:0,rc:0,yj:0,qt:0},t:{jz:0,pz:0,rc:0,yj:0,qt:0},staff:[]},
|
||||
w:{jz:0,pz:0,rc:0,yj:0,qt:0,ct:0},t:{jz:0,pz:0,rc:0,yj:0,qt:0,ct:0},staff:[]},
|
||||
{unit:'第四采油厂',name:'西峰基地医疗点',total:1,jj:0,zy:1,rad:2100,
|
||||
w:{jz:1,pz:6,rc:7,yj:3,qt:2},t:{jz:18,pz:88,rc:97,yj:26,qt:14},
|
||||
staff:[{name:'高建军',w:{jz:1,pz:3,rc:3,yj:2,qt:1},t:{jz:10,pz:45,rc:49,yj:14,qt:8}},
|
||||
{name:'闫婷',w:{jz:0,pz:3,rc:4,yj:1,qt:1},t:{jz:8,pz:43,rc:48,yj:12,qt:6}}]},
|
||||
w:{jz:1,pz:6,rc:7,yj:3,qt:2,ct:0},t:{jz:18,pz:88,rc:97,yj:26,qt:14,ct:0},
|
||||
staff:[{name:'高建军',w:{jz:1,pz:3,rc:3,yj:2,qt:1,ct:0},t:{jz:10,pz:45,rc:49,yj:14,qt:8,ct:0}},
|
||||
{name:'闫婷',w:{jz:0,pz:3,rc:4,yj:1,qt:1,ct:0},t:{jz:8,pz:43,rc:48,yj:12,qt:6,ct:0}}]},
|
||||
{unit:'采气一厂',name:'靖边气田医疗点',total:1,jj:1,zy:0,rad:760,
|
||||
w:{jz:2,pz:1,rc:3,yj:1,qt:1},t:{jz:27,pz:19,rc:48,yj:12,qt:6},
|
||||
staff:[{name:'刘玉梅',w:{jz:2,pz:1,rc:2,yj:1,qt:0},t:{jz:16,pz:11,rc:29,yj:7,qt:3}},
|
||||
{name:'呼建国',w:{jz:0,pz:0,rc:1,yj:0,qt:1},t:{jz:11,pz:8,rc:19,yj:5,qt:3}}]},
|
||||
w:{jz:2,pz:1,rc:3,yj:1,qt:1,ct:0},t:{jz:27,pz:19,rc:48,yj:12,qt:6,ct:0},
|
||||
staff:[{name:'刘玉梅',w:{jz:2,pz:1,rc:2,yj:1,qt:0,ct:0},t:{jz:16,pz:11,rc:29,yj:7,qt:3,ct:0}},
|
||||
{name:'呼建国',w:{jz:0,pz:0,rc:1,yj:0,qt:1,ct:0},t:{jz:11,pz:8,rc:19,yj:5,qt:3,ct:0}}]},
|
||||
{unit:'采气一厂',name:'乌审旗采气区医疗点',total:1,jj:1,zy:0,rad:680,
|
||||
w:{jz:1,pz:1,rc:3,yj:2,qt:0},t:{jz:22,pz:14,rc:40,yj:16,qt:5},
|
||||
staff:[{name:'徐立成',w:{jz:1,pz:0,rc:2,yj:1,qt:0},t:{jz:13,pz:8,rc:24,yj:10,qt:3}},
|
||||
{name:'马丽华',w:{jz:0,pz:1,rc:1,yj:1,qt:0},t:{jz:9,pz:6,rc:16,yj:6,qt:2}}]}
|
||||
w:{jz:1,pz:1,rc:3,yj:2,qt:0,ct:0},t:{jz:22,pz:14,rc:40,yj:16,qt:5,ct:0},
|
||||
staff:[{name:'徐立成',w:{jz:1,pz:0,rc:2,yj:1,qt:0,ct:0},t:{jz:13,pz:8,rc:24,yj:10,qt:3,ct:0}},
|
||||
{name:'马丽华',w:{jz:0,pz:1,rc:1,yj:1,qt:0,ct:0},t:{jz:9,pz:6,rc:16,yj:6,qt:2,ct:0}}]}
|
||||
];
|
||||
var weekState={wkDisp:true,wkTop:true};
|
||||
function esc(s){return String(s).replace(/&/g,'&').replace(/</g,'<');}
|
||||
@@ -307,7 +308,7 @@ function drawTop5(id,data,color,unit){
|
||||
svg.innerHTML=html;
|
||||
svg.setAttribute('viewBox','0 0 '+W+' '+h);
|
||||
}
|
||||
/* ===== 本周逐日堆积柱状(5系列 stack,照搬老系统 barCharts) ===== */
|
||||
/* ===== 本周逐日堆积柱状(6系列 stack,照搬老系统 barCharts) ===== */
|
||||
var DAYS=['周一','周二','周三','周四','周五','周六','周日'];
|
||||
var WT=[2,1,2,1,3,2,1];
|
||||
function splitWeek(v){
|
||||
@@ -323,7 +324,7 @@ function renderTrend(){
|
||||
return {name:TYPE_NAME[k],color:DISC[i],data:days};
|
||||
});
|
||||
document.getElementById('trendLg').innerHTML=series.map(function(s){return '<span><i style="background:'+s.color+';"></i>'+s.name+'</span>';}).join('');
|
||||
var svg=document.getElementById('chartTrend'),W=1120,H=280,left=44,bottom=34,top=12,right=16;
|
||||
var svg=document.getElementById('chartTrend'),W=1120,H=200,left=44,bottom=34,top=12,right=16;
|
||||
var max=0;DAYS.forEach(function(d,i){var s=0;series.forEach(function(se){s+=se.data[i];});if(s>max)max=s;});
|
||||
max=max||1;
|
||||
var step=(W-left-right)/7,bw=Math.min(56,step*0.5),html='';
|
||||
@@ -375,7 +376,7 @@ function showToast(msg){
|
||||
var t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');
|
||||
clearTimeout(t._timer);t._timer=setTimeout(function(){t.classList.remove('show');},2200);
|
||||
}
|
||||
/* 初始化:单位下拉 + 出勤类型下拉(dispatch_type 字典五类) */
|
||||
/* 初始化:单位下拉 + 出勤类型下拉(dispatch_type 字典六类) */
|
||||
(function(){
|
||||
var us=[];pts.forEach(function(p){if(us.indexOf(p.unit)<0)us.push(p.unit);});
|
||||
document.getElementById('selUnit').innerHTML='<option value="">全部单位</option>'+us.map(function(u){return '<option>'+esc(u)+'</option>';}).join('');
|
||||
|
||||
@@ -39,6 +39,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:40px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
||||
.action-bar{display:flex;justify-content:flex-start;gap:8px;margin-top:16px;}
|
||||
.date-switch{display:inline-flex;height:32px;line-height:32px;border:1px solid var(--primary);border-radius:var(--radius-sm);overflow:hidden;font-size:var(--font-sm);}
|
||||
.date-switch span{padding:0 16px;cursor:pointer;color:var(--primary);background:#fff;border-right:1px solid var(--primary);white-space:nowrap;}
|
||||
.date-switch span:last-child{border-right:none;}
|
||||
@@ -62,7 +63,7 @@ thead tr.grp th{background:#F0F5FF;color:var(--text-primary);border-right:1px so
|
||||
tbody td{padding:12px 14px;border-bottom:1px solid #F0F0F0;text-align:center;white-space:nowrap;font-size:var(--font-sm);}
|
||||
tbody tr:hover td{background:#F8FBFF;}
|
||||
.td-empty{text-align:center;padding:48px 0;color:var(--text-placeholder);}
|
||||
.num-cur{color:var(--primary);font-weight:600;}
|
||||
.num-cur{color:var(--text-primary);font-weight:600;}
|
||||
.num-total{color:var(--text-secondary);}
|
||||
.badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:var(--font-xs);line-height:18px;}
|
||||
.badge--danger{background:#FFF1F0;color:#FF4D4F;border:1px solid #FFA39E;}
|
||||
@@ -130,7 +131,7 @@ tbody tr:hover td{background:#F8FBFF;}
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 时间切换 + 导出操作(照搬老系统 DateButtonSelector + 导出按钮) -->
|
||||
<!-- 时间切换(照搬老系统 DateButtonSelector) -->
|
||||
<div class="toolbar">
|
||||
<div class="date-switch" id="dateSwitch">
|
||||
<span class="on" data-type="week" onclick="switchDateType('week')">本周</span>
|
||||
@@ -138,10 +139,6 @@ tbody tr:hover td{background:#F8FBFF;}
|
||||
<span data-type="year" onclick="switchDateType('year')">本年</span>
|
||||
<span data-type="picker" onclick="switchDateType('picker')">自定义</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<button class="btn btn-primary" onclick="doExport()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 9V2M4.5 4.5L7 2l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出</button>
|
||||
<button class="btn btn-default" onclick="openExportLog()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>查看导出记录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏:单位→医疗点级联 + 救护类型 + 时间 -->
|
||||
@@ -178,7 +175,11 @@ tbody tr:hover td{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分组报表:基础信息 + 五类出勤次数(本周/累计) -->
|
||||
<!-- 分组报表:基础信息 + 六类出勤次数(本周/累计) -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="doExport()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 9V2M4.5 4.5L7 2l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="openExportLog()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>查看导出记录</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
@@ -193,6 +194,7 @@ tbody tr:hover td{background:#F8FBFF;}
|
||||
<th colspan="2">平诊转运</th>
|
||||
<th colspan="2">日常巡诊</th>
|
||||
<th colspan="2">应急戒备</th>
|
||||
<th colspan="2">床头呼叫</th>
|
||||
<th colspan="2">其他</th>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -206,6 +208,8 @@ tbody tr:hover td{background:#F8FBFF;}
|
||||
<th>累计出勤次数</th>
|
||||
<th><span class="period-text">本周</span>出勤次数</th>
|
||||
<th>累计出勤次数</th>
|
||||
<th><span class="period-text">本周</span>出勤次数</th>
|
||||
<th>累计出勤次数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
@@ -233,23 +237,23 @@ tbody tr:hover td{background:#F8FBFF;}
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
/* 数据源:6 辆救护车(与「救护车配置」页车牌/车型/救护类型勾稽,与「救护车统计-图表」五类出勤口径同源);
|
||||
出勤五类:急诊转运/平诊转运/日常巡诊/应急戒备/其他,各分 本周/累计 出勤次数 */
|
||||
/* 数据源:6 辆救护车(与「救护车配置」页车牌/车型/救护类型勾稽,与「救护车统计-图表」六类出勤口径同源);
|
||||
出勤六类:急诊转运/平诊转运/日常巡诊/应急戒备/床头呼叫/其他,各分 本周/累计 出勤次数 */
|
||||
var cars=[
|
||||
{unit:'采油一厂',point:'樊学作业区医疗点',type:'急救型',model:'江铃轻型监护型救护车',plate:'CQ·0712A',
|
||||
w:{jz:3,pz:2,rc:5,yj:1,qt:1},t:{jz:42,pz:28,rc:76,yj:15,qt:9}},
|
||||
w:{jz:3,pz:2,rc:5,yj:1,qt:1,ct:0},t:{jz:42,pz:28,rc:76,yj:15,qt:9,ct:0}},
|
||||
{unit:'采油二厂',point:'姬圪台作业区医疗点',type:'急救型',model:'福田图雅诺监护型救护车',plate:'CQ·1366B',
|
||||
w:{jz:2,pz:1,rc:4,yj:2,qt:0},t:{jz:35,pz:22,rc:61,yj:18,qt:7}},
|
||||
w:{jz:2,pz:1,rc:4,yj:2,qt:0,ct:0},t:{jz:35,pz:22,rc:61,yj:18,qt:7,ct:0}},
|
||||
{unit:'第四采油厂',point:'西峰基地医疗点',type:'转运型',model:'福特全顺转运型救护车',plate:'CQ·0208C',
|
||||
w:{jz:1,pz:6,rc:7,yj:3,qt:2},t:{jz:18,pz:88,rc:97,yj:26,qt:14}},
|
||||
w:{jz:1,pz:6,rc:7,yj:3,qt:2,ct:0},t:{jz:18,pz:88,rc:97,yj:26,qt:14,ct:0}},
|
||||
{unit:'采气一厂',point:'靖边气田医疗点',type:'急救型',model:'东风轻型救护车',plate:'CQ·1533D',
|
||||
w:{jz:2,pz:1,rc:3,yj:1,qt:1},t:{jz:27,pz:19,rc:48,yj:12,qt:6}},
|
||||
w:{jz:2,pz:1,rc:3,yj:1,qt:1,ct:0},t:{jz:27,pz:19,rc:48,yj:12,qt:6,ct:0}},
|
||||
{unit:'采油一厂',point:'安塞采油队长住点医疗室',type:'转运型',model:'江淮瑞风转运型救护车',plate:'CQ·0917E',
|
||||
w:{jz:0,pz:3,rc:2,yj:0,qt:1},t:{jz:9,pz:41,rc:33,yj:6,qt:10}},
|
||||
w:{jz:0,pz:3,rc:2,yj:0,qt:1,ct:0},t:{jz:9,pz:41,rc:33,yj:6,qt:10,ct:0}},
|
||||
{unit:'采气一厂',point:'乌审旗采气区医疗点',type:'急救型',model:'红旗轻型监护型救护车',plate:'CQ·2201F',
|
||||
w:{jz:1,pz:1,rc:3,yj:2,qt:0},t:{jz:22,pz:14,rc:40,yj:16,qt:5}}
|
||||
w:{jz:1,pz:1,rc:3,yj:2,qt:0,ct:0},t:{jz:22,pz:14,rc:40,yj:16,qt:5,ct:0}}
|
||||
];
|
||||
var TYPES=['jz','pz','rc','yj','qt'];
|
||||
var TYPES=['jz','pz','rc','yj','ct','qt'];
|
||||
var dateType='week';
|
||||
var PERIOD_TEXT={week:'本周',month:'本月',year:'本年',picker:'时段内'};
|
||||
function esc(s){return String(s).replace(/&/g,'&').replace(/</g,'<');}
|
||||
|
||||
@@ -38,9 +38,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-subgroup.open .sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:40px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 工具栏:时间切换 + 导出操作 */
|
||||
/* 工具栏:时间切换 */
|
||||
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
||||
.action-bar{display:flex;justify-content:flex-end;margin-top:16px;}
|
||||
.action-bar{display:flex;justify-content:flex-start;gap:8px;margin-top:16px;}
|
||||
.date-switch{display:inline-flex;height:32px;line-height:32px;border:1px solid var(--primary);border-radius:var(--radius-sm);overflow:hidden;font-size:var(--font-sm);}
|
||||
.date-switch span{padding:0 16px;cursor:pointer;color:var(--primary);background:#fff;border-right:1px solid var(--primary);white-space:nowrap;}
|
||||
.date-switch span:last-child{border-right:none;}
|
||||
@@ -135,7 +135,7 @@ th.sortable:hover{color:var(--primary);}
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 时间切换 + 导出操作(照搬老系统 DateButtonSelector + 导出按钮) -->
|
||||
<!-- 时间切换(照搬老系统 DateButtonSelector) -->
|
||||
<div class="toolbar">
|
||||
<div class="date-switch" id="dateSwitch">
|
||||
<span class="on" data-type="week" onclick="switchDateType('week')">本周</span>
|
||||
@@ -143,10 +143,6 @@ th.sortable:hover{color:var(--primary);}
|
||||
<span data-type="year" onclick="switchDateType('year')">本年</span>
|
||||
<span data-type="picker" onclick="switchDateType('picker')">自定义</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<button class="btn btn-primary" onclick="doExport()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 9V2M4.5 4.5L7 2l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出</button>
|
||||
<button class="btn btn-default" onclick="openExportLog()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>查看导出记录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏:所属单位 + 时间 -->
|
||||
@@ -176,6 +172,7 @@ th.sortable:hover{color:var(--primary);}
|
||||
<!-- 分组大表:就诊人次 / 慢病管理 / 培训宣教 / 体检报告解读 多级表头 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="doExport()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 9V2M4.5 4.5L7 2l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="openExportLog()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>查看导出记录</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__content">
|
||||
|
||||
@@ -135,11 +135,8 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<option value="">全部</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="openImport()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 9V2M4.5 4.5L7 2l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>批量导入数据</button>
|
||||
<button class="btn btn-primary" onclick="openImport()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 9V2M4.5 4.5L7 2l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导入模板数据</button>
|
||||
<button class="btn btn-default" onclick="openImportTasks()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导入任务</button>
|
||||
<button class="btn btn-default" onclick="showToast('救助物品模板下载功能演示')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v7M4.5 6.5L7 9l2.5-2.5M2 12h10" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>救助物品模板下载
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 小药棒:6 项指标通栏 -->
|
||||
@@ -181,6 +178,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<div class="modal__title"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 14V3M6.5 6.5L10 3l3.5 3.5M3 16h14" stroke="#1890FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg> 导入救助物品数据</div>
|
||||
<div style="margin-top:14px;">
|
||||
<div class="drop-zone" onclick="showToast('演示环境请选择本地文件(仅支持.xlsx)')">点击选择或拖拽文件到此处上传<br>救助物品模板.xlsx</div>
|
||||
<div style="font-size:var(--font-xs);color:var(--text-placeholder);margin-top:6px;">
|
||||
<a href="javascript:void(0)" style="color:var(--primary);text-decoration:none;" onclick="showToast('模板下载中…')">下载导入模板</a> · 请按模板列整理后上传
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeImport()">取消</button>
|
||||
|
||||
@@ -33,6 +33,15 @@
|
||||
.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);}
|
||||
/* 按钮行 */
|
||||
@@ -168,11 +177,10 @@
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="config-material-notice.html" class="active">基础配置</a>
|
||||
<a href="pre-hospital-scope.html">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="agent-device.html" class="active">前置机管理</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -187,8 +195,40 @@
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">前置机管理</div>
|
||||
<a href="agent-device.html" class="sidebar-item active">常规体检前置服务</a>
|
||||
<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="config-material-notice.html" class="sidebar-item">体检须知</a>
|
||||
<a href="config-material-video.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="config-hospital-basic.html" class="sidebar-item">基本信息配置</a>
|
||||
<a href="config-hospital-combo.html" class="sidebar-item">检查项组合配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="config-report-template.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="config-standard-category.html" class="sidebar-item">体检项目分类</a>
|
||||
<a href="config-standard-basic.html" class="sidebar-item">体检基本项目</a>
|
||||
<a href="config-standard-hospital.html" class="sidebar-item">医院体检项目</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="agent-device.html" class="sidebar-item active">前置机管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
@@ -726,6 +766,18 @@ datasource:
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* 弹窗开关 */
|
||||
function openModal(id){ document.getElementById(id).classList.add('open'); }
|
||||
function closeModal(id){ document.getElementById(id).classList.remove('open'); }
|
||||
|
||||
@@ -211,16 +211,15 @@
|
||||
<th>总人数</th><th>应检人数</th><th>已选项目人数</th><th>已预约人数</th><th>已检人数</th><th>未检人数</th>
|
||||
<th>受检率<span class="th-help">?<span class="th-help__tip">受检率 = 实际检查人数 ÷ 应检人数</span></span></th>
|
||||
<th>检出率<span class="th-help">?<span class="th-help__tip">检出率 = 异常人数 ÷ 实际检查人数</span></span></th>
|
||||
<th>患病率<span class="th-help">?<span class="th-help__tip">患病率 = 单病种异常人数 ÷ 实际参加检查人数</span></span></th>
|
||||
<th>重点指标异常人数</th><th>冠脉CTA异常人数</th><th>防癌筛查异常人数</th>
|
||||
<th>计划总费用（元）</th><th>实际总费用（元）</th><th>人均费用（元）</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td class="td-frz frz0">1</td><td class="td-frz frz1">公司机关</td><td class="td-frz frz2 col-dept">综合管理部</td><td>2025</td><td>宝石花医院</td><td>宝石花医院</td><td>2025-06-23至2025-08-31</td><td>1000</td><td>1000</td><td>980</td><td>850</td><td>800</td><td>200</td><td>80.0%</td><td>41.0%</td><td>18.0%</td><td>328</td><td>9</td><td>12</td><td>2,600,000</td><td>2,180,000</td><td>2,725.00</td></tr>
|
||||
<tr><td class="td-frz frz0">2</td><td class="td-frz frz1">采油一厂</td><td class="td-frz frz2 col-dept">采油作业一区</td><td>2025</td><td>宝石花医院</td><td>西安高新医院</td><td>2025-07-01至2025-09-15</td><td>3200</td><td>3000</td><td>2860</td><td>2450</td><td>2300</td><td>700</td><td>76.7%</td><td>40.0%</td><td>16.5%</td><td>920</td><td>24</td><td>35</td><td>7,800,000</td><td>6,210,000</td><td>2,700.00</td></tr>
|
||||
<tr><td class="td-frz frz0">3</td><td class="td-frz frz1">采油二厂</td><td class="td-frz frz2 col-dept">采油作业二区</td><td>2025</td><td>宝石花医院</td><td>长安心血管医院</td><td>2025-07-10至2025-09-30</td><td>2800</td><td>2600</td><td>2480</td><td>2100</td><td>1950</td><td>650</td><td>75.0%</td><td>40.0%</td><td>17.2%</td><td>780</td><td>21</td><td>28</td><td>6,760,000</td><td>5,265,000</td><td>2,700.00</td></tr>
|
||||
<tr><td class="td-frz frz0">4</td><td class="td-frz frz1">公司机关</td><td class="td-frz frz2 col-dept">综合管理部</td><td>2024</td><td>宝石花医院</td><td>宝石花医院</td><td>2024-06-20至2024-08-25</td><td>980</td><td>980</td><td>950</td><td>830</td><td>790</td><td>190</td><td>80.6%</td><td>39.0%</td><td>17.5%</td><td>308</td><td>8</td><td>10</td><td>2,450,000</td><td>2,020,000</td><td>2,556.96</td></tr>
|
||||
<tr><td class="td-frz frz0">1</td><td class="td-frz frz1">公司机关</td><td class="td-frz frz2 col-dept">综合管理部</td><td>2025</td><td>宝石花医院</td><td>宝石花医院</td><td>2025-06-23至2025-08-31</td><td>1000</td><td>1000</td><td>980</td><td>850</td><td>800</td><td>200</td><td>80.0%</td><td>41.0%</td><td>328</td><td>9</td><td>12</td><td>2,600,000</td><td>2,180,000</td><td>2,725.00</td></tr>
|
||||
<tr><td class="td-frz frz0">2</td><td class="td-frz frz1">采油一厂</td><td class="td-frz frz2 col-dept">采油作业一区</td><td>2025</td><td>宝石花医院</td><td>西安高新医院</td><td>2025-07-01至2025-09-15</td><td>3200</td><td>3000</td><td>2860</td><td>2450</td><td>2300</td><td>700</td><td>76.7%</td><td>40.0%</td><td>920</td><td>24</td><td>35</td><td>7,800,000</td><td>6,210,000</td><td>2,700.00</td></tr>
|
||||
<tr><td class="td-frz frz0">3</td><td class="td-frz frz1">采油二厂</td><td class="td-frz frz2 col-dept">采油作业二区</td><td>2025</td><td>宝石花医院</td><td>长安心血管医院</td><td>2025-07-10至2025-09-30</td><td>2800</td><td>2600</td><td>2480</td><td>2100</td><td>1950</td><td>650</td><td>75.0%</td><td>40.0%</td><td>780</td><td>21</td><td>28</td><td>6,760,000</td><td>5,265,000</td><td>2,700.00</td></tr>
|
||||
<tr><td class="td-frz frz0">4</td><td class="td-frz frz1">公司机关</td><td class="td-frz frz2 col-dept">综合管理部</td><td>2024</td><td>宝石花医院</td><td>宝石花医院</td><td>2024-06-20至2024-08-25</td><td>980</td><td>980</td><td>950</td><td>830</td><td>790</td><td>190</td><td>80.6%</td><td>39.0%</td><td>308</td><td>8</td><td>10</td><td>2,450,000</td><td>2,020,000</td><td>2,556.96</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -204,6 +204,7 @@
|
||||
<a href="config-standard-hospital.html" class="sidebar-item">医院体检项目</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="agent-device.html" class="sidebar-item">前置机管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -171,6 +171,7 @@
|
||||
<a href="config-standard-hospital.html" class="sidebar-item">医院体检项目</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="agent-device.html" class="sidebar-item">前置机管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -166,6 +166,7 @@
|
||||
<a href="config-standard-hospital.html" class="sidebar-item">医院体检项目</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="agent-device.html" class="sidebar-item">前置机管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -198,6 +198,7 @@
|
||||
<a href="config-standard-hospital.html" class="sidebar-item">医院体检项目</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="agent-device.html" class="sidebar-item">前置机管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -208,6 +208,7 @@
|
||||
<a href="config-standard-hospital.html" class="sidebar-item">医院体检项目</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="agent-device.html" class="sidebar-item">前置机管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -215,6 +215,7 @@
|
||||
<a href="config-standard-hospital.html" class="sidebar-item">医院体检项目</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="agent-device.html" class="sidebar-item">前置机管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -219,6 +219,7 @@
|
||||
<a href="config-standard-hospital.html" class="sidebar-item">医院体检项目</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="agent-device.html" class="sidebar-item">前置机管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -160,6 +160,7 @@
|
||||
<a href="config-standard-hospital.html" class="sidebar-item active">医院体检项目</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="agent-device.html" class="sidebar-item">前置机管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -1,11 +1,34 @@
|
||||
# 健康体检模块 CHANGELOG
|
||||
|
||||
## [Unreleased] 2026-09-20
|
||||
|
||||
### Added
|
||||
- 检后「体检统计汇总」分组新增「结果动态综合统计」页面 `post-result-comprehensive-stat.html`：以 2×2 网格展示 4 张堆积柱状图，统计维度固定为性别/年龄/部门/岗位，每张图自带「项目」「维度」下拉可独立切换，查看该维度各取值下的正常/异常人数及占比——竖向堆积柱状图（X 轴为维度取值、Y 轴为人数，每柱正常在下绿/异常在上红堆叠，柱顶标总数、段内标百分比、悬停显示明细）；纯手写 SVG，无第三方图表库；体检项目下拉 12 项数据驱动，异常判定按年龄/性别/岗位浮动、哈希保证结果稳定；4 个面板互相独立，默认项目均为血常规、维度分别为性别/年龄/部门/岗位
|
||||
- 23 个检后页面侧边栏「体检统计汇总」分组批量同步新增「结果动态综合统计」菜单项（紧邻「单位体检项目统计」之后）
|
||||
- `index.html` SITE_MAP 健康体检模块新增「结果动态综合统计」入口（紧邻「单位体检项目统计」之后）
|
||||
- `PRD.md`：补全缺失的「单位体检项目统计（post-unit-item-stat.html）」文档，新增「结果动态综合统计」导航节点/页面清单条目/逐页说明（52、53 节），页面清单与逐页说明 52 节及之后编号整体顺延 +2（原 52–68 → 54–70）
|
||||
- `PRD.md` 按实际页面补全 6 个此前未入册的页面文档并配截图——检中「体检预约跟踪（mid-appointment-track2.html，4 页签贯穿应检→已选→已预约→已参检）」、检后常规体检「单位群体报告（post-group-report.html，10 张概览卡含较上年趋势 + 6 个报告卡片）」、检后新增「体检影像管理」分组 4 页（用户体检信息/用户影像文件分类/用户影像文件详细/文件处理日志）；导航树新增「体检影像管理」分组节点，页面清单与逐页说明编号顺延（33–45 → 34–46、46–67 → 48–69、68–70 → 74–76，新增 33/47/70–73 六节）
|
||||
- `screenshot-prd.js` TASKS 新增 6 页并重拍截图 `mid-appointment-track2 / post-group-report / post-imc-user / post-imc-class / post-imc-info / post-imc-log`
|
||||
|
||||
## [Unreleased] 2026-09-18
|
||||
|
||||
### Added
|
||||
- 检后侧边栏新增「体检影像管理」二级菜单（位于冠脉CTA体检分组之后），复刻老系统 data-center-vue3 `views/imc` 四个列表页为纯 HTML 原型：
|
||||
- `post-imc-user.html`（用户体检信息）：筛选（姓名/身份证号/体检年份/医院名称）；行勾选 + 批量删除；主表列（单位信息/姓名/身份证号/体检年份/医院名称/体检编号/创建日期）；行首箭头展开子表（检查项目名称/处理状态/影像信息·预览/影像报告·查看，无数据显示「暂无/无文件」）；操作列编辑/详情/删除 + 编辑弹窗（7 字段）+ 详情弹窗
|
||||
- `post-imc-class.html`（用户影像文件分类）：筛选（影像分类/检查项目名称/处理状态）；操作栏新增/导出/导入 + 批量删除；列（影像分类/检查项目名称/影像文件类型/报告文件类型/处理状态/检查结果/错误信息/出报告时间/创建日期），检查结果与错误信息长文本截断、悬停显示全文；操作列编辑/详情/删除 + 新增/编辑弹窗（10 字段）+ 详情弹窗
|
||||
- `post-imc-info.html`（用户影像文件详细）：筛选（文件类型/患者ID/研究实例ID）；操作栏新增/导出/导入 + 批量删除；列（文件类型·影像/报告标签/影像序号/错误信息/文件地址·下载/dcm实例ID/研究实例ID/患者ID/研究ID/创建日期）；操作列编辑/详情/删除 + 新增/编辑弹窗（10 字段）+ 详情弹窗
|
||||
- `post-imc-log.html`（文件处理日志）：筛选（身份证号/体检年份/体检编号/影像分类/处理状态）；行勾选 + 批量删除；列（医院名称/姓名/身份证号/体检年份/体检编号/影像分类/json数据·截断/文件地址·下载zip/文件大小MB/处理状态/错误信息/传输开始/传输完成/解析开始/解析完成时间），默认按传输开始时间倒序；操作列详情/删除 + 详情弹窗（15 字段含 json 数据代码块）
|
||||
- 数据字典沿用老系统：影像分类（超声/CT/MRI/X射线/心电）、处理状态（新建/待解析/失败/解析中/成功/失败待重试/最终失败，彩色标签）、文件类型（影像/报告）
|
||||
- `index.html` SITE_MAP 健康体检模块新增「用户体检信息/用户影像文件分类/用户影像文件详细/文件处理日志」四个入口
|
||||
- 25 个检后页面侧边栏统一新增「体检影像管理」分组（21 个存量页面批量同步 + 4 个新页面自身 active 指向）
|
||||
|
||||
## [Unreleased] 2026-09-17
|
||||
|
||||
### Changed
|
||||
- `post-unit-cost-stat.html`：单位体检费用统计列表增加"体检医院"列（部门列之后）并在"体检年份"后增加"签约医院"列（该单位签约的体检医院，可能存在多个，逗号相隔）；因一个单位会存在多个体检医院，列表按"单位 × 体检医院"拆行——原 6 条单位年度汇总行拆为 16 条医院明细行（各分组内人数/报告/费用合计与原数据保持一致，计划费用仍按 2062.5 元/人 × 已体检人数口径），分页条数同步更新为 16 条，行配置 ROWS 补充 hospital/signed 字段供弹窗标题使用
|
||||
- `post-unit-cost-stat.html`：列表去掉"总人数"列；"体检报告缺少体检项目信息"弹窗增加"项目费用（元）""折扣后费用（元）"两列（折扣后统一按 8 折示例）；统计明细弹窗缺少项目口径的"项目总数"标蓝可点击，点击同样打开体检报告缺少体检项目信息弹窗；员工费用明细弹窗"报告缺少项目数"标蓝可点击（报告不完整时），点击同样打开体检报告缺少体检项目信息弹窗；员工费用明细弹窗顶部新增筛选栏（姓名/员工编号模糊查询、报告完整状态 全部/完整/不完整，查询/重置，打开弹窗时自动重置，无结果显示"暂无数据"，合计行随筛选结果汇总）及"导出列表数据"按钮
|
||||
- `PRD.md`：第 51 节"单位体检费用统计"功能说明改为按"单位 × 体检医院"统计（一行是一个体检医院），表格列说明同步补充"体检医院""签约医院"两列并去掉"总人数"，统计明细弹窗/缺少项目弹窗说明同步更新
|
||||
- `PRD.md`/`screenshot-prd.js`/截图：按当日 17 个页面改动同步更新 PRD 说明并重截 16 张页面截图；`screenshot-prd.js` 支持传入页面名前缀只重截指定页——具体更新：第 1 节个人体检数据报告弹窗改为常规/胃肠镜/冠脉CTA三页签专业版式；第 4 节操作说明补充封面图（JPG/PNG ≤5MB 1280×720）与视频（MP4 ≤200MB）上传提示；第 10 节医院体检项目新增"同步医院体检项目"多选医院弹窗说明并删除已落地的同步方式补充说明；第 12/27/30 节三类体检计划管理补充"新增模式体检年份锁定当年、隐藏参加人员范围"规则；第 17 节组合模板项目表格增加"金额（元）"列说明并删除已落地的默认费用补充说明；第 22 节指定员工体检医院操作栏增加"批量导入人员""查看导入任务"；第 25 节预选信息统计移除"医院"Tab 仅保留部门维度；第 32 节体检预约"体检预约信息"列移至"预约状态"之后；第 36 节医院实时预约人数日期默认改为当日至 30 日后；第 44 节冠脉CTA单位预约统计移除"填写问卷人数"列；第 45 节常规体检报告补充复选框列、"报告模板导入"按钮、体检报告补录弹窗、员工操作确认弹窗及专业版式报告弹窗；第 51 节员工费用明细弹窗补充筛选栏/导出/缺少项目数蓝链；第 62 节胃肠镜体检报告"详情"弹窗改为"查看报告"专业版式、编辑弹窗仅报告图片可修改；第 68 节结果异常移除"异常等级"筛选/列与页首定义说明框
|
||||
|
||||
## [Unreleased] 2026-09-15
|
||||
|
||||
|
||||
+287
-128
@@ -13,6 +13,7 @@
|
||||
│ ├── 基础配置 → config-material-notice.html
|
||||
│ ├── 检前 → pre-hospital-scope.html
|
||||
│ ├── 检中 → mid-appointment-track.html
|
||||
│ │ ├── 体检预约跟踪 → mid-appointment-track2.html
|
||||
│ ├── 检后 → post-unit-count.html
|
||||
│ ├── 前置机管理 → agent-device.html
|
||||
│ └── 异常事件 → exception-dirty.html
|
||||
@@ -93,6 +94,7 @@
|
||||
├── 检后（侧边栏）
|
||||
│ ├── 常规体检
|
||||
│ │ ├── 常规体检报告 → post-report-employee.html
|
||||
│ │ ├── 单位群体报告 → post-group-report.html
|
||||
│ │ ├── 员工体检大表 → post-employee-master.html
|
||||
│ │ ├── 大病人员信息 → post-illness-personnel.html
|
||||
│ │ ├── 指标异常通知 → post-indicator-notify.html
|
||||
@@ -102,6 +104,8 @@
|
||||
│ │ │ └── Tab：二级单位 / 三级单位 / 体检医院
|
||||
│ │ ├── 单位体检费用统计 → post-unit-cost-stat.html
|
||||
│ │ │ └── Tab：二级单位 / 三级单位
|
||||
│ │ ├── 单位体检项目统计 → post-unit-item-stat.html
|
||||
│ │ ├── 项目结果综合统计 → post-result-comprehensive-stat.html
|
||||
│ │ ├── 医院体检人数统计 → post-hospital-count.html
|
||||
│ │ ├── 医生检查人数统计 → post-doctor-count.html
|
||||
│ │ ├── 医院体检项目统计 → post-item-stat.html
|
||||
@@ -117,10 +121,15 @@
|
||||
│ │ ├── 胃肠镜体检报告 → post-report-gastro.html
|
||||
│ │ └── 胃肠镜体检统计 → post-gastro-stat.html
|
||||
│ │ └── Tab：二级单位 / 三级单位
|
||||
│ └── 冠脉CTA体检
|
||||
│ ├── 冠脉CTA体检
|
||||
│ ├── 冠脉CTA体检报告 → post-cta-report.html
|
||||
│ └── 冠脉CTA体检统计 → post-cta-stat.html
|
||||
│ └── Tab：二级单位 / 三级单位
|
||||
│ └── 体检影像管理
|
||||
│ ├── 用户体检信息 → post-imc-user.html
|
||||
│ ├── 用户影像文件分类 → post-imc-class.html
|
||||
│ ├── 用户影像文件详细 → post-imc-info.html
|
||||
│ └── 文件处理日志 → post-imc-log.html
|
||||
│
|
||||
├── 前置机管理（侧边栏）
|
||||
│ └── 常规体检前置服务 → agent-device.html
|
||||
@@ -196,57 +205,65 @@
|
||||
| 序号 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|-----------|------|------|
|
||||
| 32 | 体检预约 | mid-appointment-track.html | 页面 |
|
||||
| 33 | 已选项目 | mid-selected-items.html | 页面 |
|
||||
| 34 | 已检员工 | mid-participation.html | 页面 |
|
||||
| 35 | 单位预约人数统计 | mid-unit-appointment.html | 页面 |
|
||||
| 36 | 医院实时预约人数 | mid-hospital-realtime.html | 页面 |
|
||||
| 37 | 医生实时检查情况 | mid-doctor-realtime.html | 页面 |
|
||||
| 38 | 医院预约人数统计 | mid-hospital-appointment.html | 页面 |
|
||||
| 39 | 签约单位应检人数 | mid-unit-expected.html | 页面 |
|
||||
| 40 | 员工预约跟踪（胃肠镜） | mid-gastro-appointment-track.html | 页面 |
|
||||
| 41 | 单位预约统计（胃肠镜） | mid-gastro-unit-appointment.html | 页面 |
|
||||
| 42 | 胃肠镜问卷信息 | mid-gastro-questionnaire.html | 页面 |
|
||||
| 43 | 员工预约跟踪（冠脉CTA） | mid-cta-appointment-track.html | 页面 |
|
||||
| 44 | 单位预约统计（冠脉CTA） | mid-cta-unit-appointment.html | 页面 |
|
||||
| 33 | 体检预约跟踪 | mid-appointment-track2.html | 页面 |
|
||||
| 34 | 已选项目 | mid-selected-items.html | 页面 |
|
||||
| 35 | 已检员工 | mid-participation.html | 页面 |
|
||||
| 36 | 单位预约人数统计 | mid-unit-appointment.html | 页面 |
|
||||
| 37 | 医院实时预约人数 | mid-hospital-realtime.html | 页面 |
|
||||
| 38 | 医生实时检查情况 | mid-doctor-realtime.html | 页面 |
|
||||
| 39 | 医院预约人数统计 | mid-hospital-appointment.html | 页面 |
|
||||
| 40 | 签约单位应检人数 | mid-unit-expected.html | 页面 |
|
||||
| 41 | 员工预约跟踪（胃肠镜） | mid-gastro-appointment-track.html | 页面 |
|
||||
| 42 | 单位预约统计（胃肠镜） | mid-gastro-unit-appointment.html | 页面 |
|
||||
| 43 | 胃肠镜问卷信息 | mid-gastro-questionnaire.html | 页面 |
|
||||
| 44 | 员工预约跟踪（冠脉CTA） | mid-cta-appointment-track.html | 页面 |
|
||||
| 45 | 单位预约统计（冠脉CTA） | mid-cta-unit-appointment.html | 页面 |
|
||||
|
||||
### 五、检后（侧边栏：检后）
|
||||
|
||||
| 序号 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|-----------|------|------|
|
||||
| 45 | 常规体检报告 | post-report-employee.html | 页面 |
|
||||
| 46 | 员工体检大表 | post-employee-master.html | 页面 |
|
||||
| 47 | 大病人员信息 | post-illness-personnel.html | 页面 |
|
||||
| 48 | 指标异常通知 | post-indicator-notify.html | 页面 |
|
||||
| 49 | 体检报告未匹配项目 | post-report-unmatched.html | 页面 |
|
||||
| 50 | 单位体检人数统计 | post-unit-count.html | 页面 |
|
||||
| 51 | 单位体检费用统计 | post-unit-cost-stat.html | 页面 |
|
||||
| 52 | 医院体检人数统计 | post-hospital-count.html | 页面 |
|
||||
| 53 | 医生检查人数统计 | post-doctor-count.html | 页面 |
|
||||
| 54 | 医院体检项目统计 | post-item-stat.html | 页面 |
|
||||
| 55 | 防癌筛查人数统计 | post-cancer-screening.html | 页面 |
|
||||
| 56 | 系统标准化项目统计 | post-standard-stat.html | 页面 |
|
||||
| 57 | 签约医院人数统计 | post-contracted-hospital.html | 页面 |
|
||||
| 58 | 重点指标异常统计 | post-key-indicator-stat.html | 页面 |
|
||||
| 59 | 病种信息配置 | post-disease-info.html | 页面 |
|
||||
| 60 | 体检结论关联病种 | post-conclusion-disease.html | 页面 |
|
||||
| 61 | 员工病种信息 | post-auto-select-disease.html | 页面 |
|
||||
| 62 | 胃肠镜体检报告 | post-report-gastro.html | 页面 |
|
||||
| 63 | 胃肠镜体检统计 | post-gastro-stat.html | 页面 |
|
||||
| 64 | 冠脉CTA体检报告 | post-cta-report.html | 页面 |
|
||||
| 65 | 冠脉CTA体检统计 | post-cta-stat.html | 页面 |
|
||||
| 46 | 常规体检报告 | post-report-employee.html | 页面 |
|
||||
| 47 | 单位群体报告 | post-group-report.html | 页面 |
|
||||
| 48 | 员工体检大表 | post-employee-master.html | 页面 |
|
||||
| 49 | 大病人员信息 | post-illness-personnel.html | 页面 |
|
||||
| 50 | 指标异常通知 | post-indicator-notify.html | 页面 |
|
||||
| 51 | 体检报告未匹配项目 | post-report-unmatched.html | 页面 |
|
||||
| 52 | 单位体检人数统计 | post-unit-count.html | 页面 |
|
||||
| 53 | 单位体检费用统计 | post-unit-cost-stat.html | 页面 |
|
||||
| 54 | 单位体检项目统计 | post-unit-item-stat.html | 页面 |
|
||||
| 55 | 项目结果综合统计 | post-result-comprehensive-stat.html | 页面 |
|
||||
| 56 | 医院体检人数统计 | post-hospital-count.html | 页面 |
|
||||
| 57 | 医生检查人数统计 | post-doctor-count.html | 页面 |
|
||||
| 58 | 医院体检项目统计 | post-item-stat.html | 页面 |
|
||||
| 59 | 防癌筛查人数统计 | post-cancer-screening.html | 页面 |
|
||||
| 60 | 系统标准化项目统计 | post-standard-stat.html | 页面 |
|
||||
| 61 | 签约医院人数统计 | post-contracted-hospital.html | 页面 |
|
||||
| 62 | 重点指标异常统计 | post-key-indicator-stat.html | 页面 |
|
||||
| 63 | 病种信息配置 | post-disease-info.html | 页面 |
|
||||
| 64 | 体检结论关联病种 | post-conclusion-disease.html | 页面 |
|
||||
| 65 | 员工病种信息 | post-auto-select-disease.html | 页面 |
|
||||
| 66 | 胃肠镜体检报告 | post-report-gastro.html | 页面 |
|
||||
| 67 | 胃肠镜体检统计 | post-gastro-stat.html | 页面 |
|
||||
| 68 | 冠脉CTA体检报告 | post-cta-report.html | 页面 |
|
||||
| 69 | 冠脉CTA体检统计 | post-cta-stat.html | 页面 |
|
||||
| 70 | 用户体检信息 | post-imc-user.html | 页面 |
|
||||
| 71 | 用户影像文件分类 | post-imc-class.html | 页面 |
|
||||
| 72 | 用户影像文件详细 | post-imc-info.html | 页面 |
|
||||
| 73 | 文件处理日志 | post-imc-log.html | 页面 |
|
||||
|
||||
### 六、前置机管理（侧边栏：前置机管理）
|
||||
|
||||
| 序号 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|-----------|------|------|
|
||||
| 66 | 常规体检前置服务（含设备详情/编辑设备/日志查看/升级管理/接口测试/操作审计/重启确认弹窗） | agent-device.html | 页面 |
|
||||
| 74 | 常规体检前置服务（含设备详情/编辑设备/日志查看/升级管理/接口测试/操作审计/重启确认弹窗） | agent-device.html | 页面 |
|
||||
|
||||
### 七、异常事件（侧边栏：异常事件）
|
||||
|
||||
| 序号 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|-----------|------|------|
|
||||
| 67 | 系统脏数据 | exception-dirty.html | 页面 |
|
||||
| 68 | 结果异常 | exception-result.html | 页面 |
|
||||
| 75 | 系统脏数据 | exception-dirty.html | 页面 |
|
||||
| 76 | 结果异常 | exception-result.html | 页面 |
|
||||
|
||||
---
|
||||
|
||||
@@ -269,7 +286,11 @@
|
||||
- 一级分类→ 二级分类→ 具体项目，重点项目列分三组：
|
||||
- 操作列（冻结）：蓝色链接"查看报告"
|
||||
|
||||
**体检报告弹窗：** 标题"姓名 · 体检报告"，含体检结论、体检建议、体检项目；每张子表列为项目名称/结果/单位/参考值，异常结果红色标注。支持 ✕/关闭按钮/遮罩/Esc 关闭。
|
||||
**体检报告弹窗：** 标题"姓名 · 体检报告"，顶部页签切换三类报告（常规体检 / 胃肠镜体检 / 冠脉CTA体检，默认常规体检），均采用专业报告版式（深色报告头 + 基本信息 + 分节内容）：
|
||||
- 常规体检：报告头"健康体检报告"，基本信息含姓名/性别/年龄/体检编号/体检日期/体检医院；正文含体检结论（橙色提示框）、体检建议（绿色提示框）及物理检查/内科/外科/化学检查等分科明细；每张子表列为项目名称/结果/单位/参考值，异常结果红色标注
|
||||
- 胃肠镜体检：报告头"胃肠镜检查报告"，基本信息含检查编号/检查日期/检查医院；胃镜检查表（食管/胃/十二指肠/诊断结果）、肠镜检查表（结肠/诊断结果/病理诊断）+ 报告图片（胃镜报告/肠镜报告/活检报告，"查看"链接）
|
||||
- 冠脉CTA体检：报告头"冠状动脉CT血管成像报告"，基本信息含检查编号/检查日期/检查医院；检查条件（心率/屏气/冠脉分布）、冠状动脉钙化积分（Agatston 总积分）、冠脉分段表格（血管/段、斑块性质标签：钙化/非钙化/混合/无、狭窄程度按分级着色、描述）+ 心脏及心包所见 + 印象（CAD-RADS 评分色块 + 结论列表）+ 建议 + 报告图片
|
||||
- 报告内容按员工自动匹配两套示例档案（正常/异常），支持 ✕/关闭按钮/遮罩/Esc 关闭。
|
||||
|
||||
**业务规则：**
|
||||
- 异常判定：任一项目结果带异常标记即视为异常员工，"异常员工"筛选据此过滤
|
||||
@@ -325,9 +346,6 @@
|
||||
- "发布生效"将该类型须知发布至员工端
|
||||
- 三个 Tab 内容独立：常规（体检前准备/体检当天/特殊项目提醒等）、胃肠镜（检前饮食/肠道准备/检查当天等）、冠脉CTA（检前准备/心率控制/屏气练习等）
|
||||
|
||||
**补充说明**：
|
||||
- 体检须知在预约时间点会按规则发送短信，短信内容要不要在这里配置和预览？注意单条短信字数有限，字数多了会分多条短信发送
|
||||
|
||||
---
|
||||
|
||||
#### 4. 操作说明（config-material-video.html）
|
||||
@@ -346,7 +364,7 @@
|
||||
- 讲解类型 *（分段切换：图文讲解/视频讲解；编辑态锁定为只读）
|
||||
- 标题 *（输入框）、简介（多行文本域）、排序（数字，越小越靠前）
|
||||
- 图文讲解专属：操作说明（富文本编辑器）
|
||||
- 视频讲解专属：封面图（上传）、视频文件（上传）
|
||||
- 视频讲解专属：封面图（上传，提示"支持 JPG/PNG 格式，大小不超过 5MB，建议尺寸 1280×720（16:9）"）、视频文件（上传，仅 MP4，提示"支持 MP4 格式，大小不超过 200MB，时长建议 10 分钟以内"）
|
||||
- 底部：取消、保存
|
||||
|
||||
**预览弹窗：** 视频类型为 16:9 播放器占位；图文类型渲染富文本内容。
|
||||
@@ -490,14 +508,13 @@
|
||||
|
||||
**新增/编辑弹窗：** 医院 *（下拉）、体检项目名称 *、体检项目编码 *；底部取消、保存
|
||||
|
||||
**同步医院体检项目弹窗：** 点击"同步医院体检项目"打开；说明文案"选择医院进行同步医院体检项目，结果可在查看同步任务中查看"；选择医院 *（复选列表：全选 + 各医院多选）；底部取消、确认同步。
|
||||
|
||||
**同步任务记录弹窗：** 表格列：触发时间、同步人、状态（蓝色"同步中"/绿色"成功"/红色"失败"标签）、同步数据信息（"查看详情"链接）；底部关闭
|
||||
|
||||
**同步数据信息弹窗：** 点击任务行"查看详情"打开；顶部摘要显示触发时间、同步人、共同步条数；表格列：序号、医院、体检项目编码、体检项目名称、关联体检基本项、关联医院系统项目、同步结果（蓝色"新增"/绿色"更新"标签）；底部关闭
|
||||
|
||||
**业务规则：** "同步医院体检项目"确认后生成一条"同步中"任务（同步中即可查看本次明细），完成后变"成功"；编辑仅回填医院/编码/名称；删除有确认提示。
|
||||
|
||||
**补充说明**：
|
||||
考虑一下选择指定医院同步和全部医院同步
|
||||
**业务规则：** "同步医院体检项目"支持指定医院同步（可多选）或全选全部医院同步；未选医院时提示"请选择医院"；确认后生成一条"同步中"任务（同步中即可查看本次明细），完成后变"成功"，增量项目按所选医院过滤；编辑仅回填医院/编码/名称；删除有确认提示。
|
||||
|
||||
---
|
||||
|
||||
@@ -544,11 +561,11 @@
|
||||
**表格列：** 序号、组织单位、体检年份、体检计划名称、承检医院、签约医院、有效标志（绿色标签）、体检计划日期范围、允许预约日期范围（未开启时灰色"未开启"）、创建人、创建时间、操作（详情/编辑/删除）
|
||||
|
||||
**新增/编辑抽屉：**
|
||||
- 组织单位 *（下拉）、体检年份 *（下拉）、体检计划名称 *（输入框）
|
||||
- 组织单位 *（下拉）、体检年份 *（下拉，新增模式锁定为当年不可改）、体检计划名称 *（输入框）
|
||||
- 承检医院 *（多选下拉，标签可删）
|
||||
- 签约医院（多选，选项仅限已勾选的承检医院，未选承检医院时禁用并提示"请先选择承检医院"）
|
||||
- 体检计划日期范围 *（日期至日期）
|
||||
- 参加人员范围 *（指定人员面板）：指定机构（单位-部门两级树多选，部门全选自动收拢为单位级；默认选中组织单位）+ 指定员工（打开二级"选择员工"弹窗）+ 已选员工标签
|
||||
- 参加人员范围 *（指定人员面板，新增模式下隐藏该区域，编辑时显示）：指定机构（单位-部门两级树多选，部门全选自动收拢为单位级；默认选中组织单位）+ 指定员工（打开二级"选择员工"弹窗）+ 已选员工标签
|
||||
- 是否开启预约（开关，默认开启）、允许预约日期范围 *（开启时显示）
|
||||
- 底部：取消、确认新增/保存
|
||||
|
||||
@@ -562,7 +579,8 @@
|
||||
- 承检医院变化时同步剔除失效签约医院；
|
||||
- 是否开启预约关闭后，员工在移动端无法进行预约
|
||||
- 机构勾选联动员工弹窗过滤；
|
||||
- 保存校验组织单位/承检医院/计划名称/日期范围/参加人员/预约范围必填且结束≥开始；
|
||||
- 新增模式：体检年份锁定为当年、隐藏参加人员范围区域（新增后通过编辑补充）；编辑模式恢复可编辑
|
||||
- 保存校验组织单位/承检医院/计划名称/日期范围/预约范围必填且结束≥开始，参加人员范围仅编辑时校验必选；
|
||||
- 删除有确认提示。
|
||||
- 可供员工预约的日期范围是医院承检日期+单位允许日期范围的交叉日期，并且在可预约日期的前一天/当天(当天可能是刚创建体检计划，但是预约日期也是当天)给员工发送短信，提醒员工进行预约体检
|
||||
|
||||
@@ -668,16 +686,14 @@
|
||||
**新增/编辑组合模板抽屉：**
|
||||
- 组合模板名称 *、体检医院 *（搜索下拉）、性别 *（男/女/通用）、年龄范围 *、女性专项费用（元）（仅性别=女时显示）、折扣类型 *（数值/百分比）、折扣金额 *（数字）
|
||||
- 内嵌 Tab：必检项目 / 自选项目 / 妇科未婚项目 / 妇科已婚项目 / 防癌筛查项目（性别=男隐藏两个妇科 Tab；防癌筛查 Tab 显示"防癌筛查默认费用（元）"输入）
|
||||
- 每个 Tab：+ 添加项目 + 表格（体检项目[可搜索下拉]、项目编码[自动填充只读]、项目标记[一般项目/重点项目]、操作[删除]）
|
||||
- 每个 Tab：+ 添加项目 + 表格（体检项目[可搜索下拉]、项目编码[自动填充只读]、项目标记[一般项目/重点项目]、金额（元）[自动填充只读]、操作[删除]）
|
||||
- 底部：取消、确认保存
|
||||
|
||||
**复制上一年度模板弹窗：** 上一年度（复制来源，禁用）、本年度（复制目标，禁用）、体检医院 *、模板 *（未选医院时禁用）；提示"确认后将把所选医院的上一年度模板复制到本年度，已存在的同名模板将被覆盖。"；取消/确认复制
|
||||
|
||||
**组合模板详情弹窗（只读）：** 医院名称、体检年份、模板名称、性别、年龄范围、女性专项费用、折扣类型、折扣金额 + 内嵌同名 5 Tab 项目表格（防癌 Tab 末尾显示默认费用）；底部关闭
|
||||
|
||||
**业务规则：** 性别联动女性专项费用与妇科 Tab 显隐；折扣类型决定金额落在"折扣数值"或"折扣百分比"列；复制弹窗医院→模板二级联动。
|
||||
|
||||
**补充说明：** 建议增加体检项目的默认费用显示。
|
||||
**业务规则：** 性别联动女性专项费用与妇科 Tab 显隐；折扣类型决定金额落在"折扣数值"或"折扣百分比"列；复制弹窗医院→模板二级联动；选择体检项目后自动带出该项目金额（按项目库单价，妇科/防癌等特殊项目按编码匹配）。
|
||||
|
||||
---
|
||||
|
||||
@@ -796,7 +812,7 @@
|
||||
|
||||
**筛选条件：** 体检年份（年份日历选择控件，默认当年）、单位（下拉）、部门（下拉）、指定体检医院（下拉）、姓名、员工编号、身份证号（输入框）+ 查询/重置按钮
|
||||
|
||||
**操作按钮：** + 添加指定体检医院员工、导出列表数据、查看导出任务、批量删除
|
||||
**操作按钮：** + 添加指定体检医院员工、导出列表数据、查看导出任务、批量导入人员、查看导入任务、批量删除
|
||||
|
||||
**表格列：** 复选框（全选）、姓名、员工编号、性别、年龄、指定体检医院、身份证号、手机号、单位、部门、年度体检、创建日期、操作（删除）
|
||||
|
||||
@@ -848,19 +864,15 @@
|
||||
|
||||
|
||||
|
||||
**功能说明：** 按"部门"和"医院"两个维度统计胃肠镜预选人数；点击预选人数数字弹出人员明细。
|
||||
**功能说明：** 按"部门"维度统计胃肠镜预选人数；点击预选人数数字弹出人员明细。
|
||||
|
||||
**Tab 切换：** 部门 / 医院（各自独立筛选栏与表格）
|
||||
**筛选条件：** 体检年份（年份日历选择控件）、单位部门（下拉）、预选医院（下拉）+ 查询/重置
|
||||
|
||||
**部门 Tab 筛选：** 体检年份（年份日历选择控件）、单位部门（下拉）、预选医院（下拉）+ 查询/重置
|
||||
**医院 Tab 筛选：** 体检年份（年份日历选择控件）、单位（下拉）、预选医院（下拉）+ 查询/重置
|
||||
**操作按钮：** 导出列表数据、查看导出任务
|
||||
|
||||
**操作按钮（两个 Tab 相同）：** 导出列表数据、查看导出任务
|
||||
**表格列：** 单位、部门、体检年份、预选计划、预选医院、预选人数（蓝色数字链接）
|
||||
|
||||
**部门 Tab 表格列：** 单位、部门、体检年份、预选计划、预选医院、预选人数（蓝色数字链接）
|
||||
**医院 Tab 表格列：** 预选医院、体检年份、单位、预选人数（蓝色数字链接）
|
||||
|
||||
**预选人数明细弹窗（860px）：** 标题"预选人数明细 - {单位部门/医院}"；表格列：姓名、员工编号、身份证号、单位、部门、预选医院、提交时间；右上"导出列表数据"；底部关闭
|
||||
**预选人数明细弹窗（860px）：** 标题"预选人数明细 - {单位部门}"；表格列：姓名、员工编号、身份证号、单位、部门、预选医院、提交时间；右上"导出列表数据"；底部关闭
|
||||
|
||||
---
|
||||
|
||||
@@ -892,9 +904,9 @@
|
||||
|
||||
**表格列：** 序号、单位、体检年份、体检计划名称、承检医院、有效标志、体检计划日期范围、允许预约日期范围、创建人、创建时间、操作（详情/编辑/删除）
|
||||
|
||||
**新增/编辑抽屉 / 详情弹窗 / 选择员工二级弹窗：** 字段与常规体检计划管理一致（抽屉标题为"新增/编辑胃肠镜体检计划"，计划名称示例为"XX 2026年员工胃肠镜体检"）。
|
||||
**新增/编辑抽屉 / 详情弹窗 / 选择员工二级弹窗：** 字段与常规体检计划管理一致（抽屉标题为"新增/编辑胃肠镜体检计划"，计划名称示例为"XX 2026年员工胃肠镜体检"；新增模式体检年份锁定为当年、隐藏参加人员范围区域，编辑模式恢复）。
|
||||
|
||||
**业务规则：** 保存校验（toast 提示）与常规版一致；删除有确认提示。
|
||||
**业务规则：** 保存校验（toast 提示）与常规版一致（参加人员范围仅编辑时校验必选）；删除有确认提示。
|
||||
|
||||
---
|
||||
|
||||
@@ -935,7 +947,7 @@
|
||||
|
||||
|
||||
|
||||
**功能说明：** 管理各单位年度冠脉CTA体检计划。页面结构与胃肠镜版完全一致（克隆页）。
|
||||
**功能说明：** 管理各单位年度冠脉CTA体检计划。页面结构与胃肠镜版完全一致（克隆页）；新增模式体检年份锁定为当年、隐藏参加人员范围区域，编辑模式恢复（与常规/胃肠镜版一致）。
|
||||
|
||||
|
||||
---
|
||||
@@ -972,7 +984,7 @@
|
||||
|
||||
**操作按钮：** 导出列表数据、查看导出任务、同步医院体检预约信息
|
||||
|
||||
**表格列（两级表头）：** 复选框（全选）、姓名、性别、年龄、年龄范围、身份证号、单位、部门、机构分类、员工编号、体检编码、用工形式、婚姻状态、体检类型、防癌项、是否上市员工、体检医院、体检预约信息、体检总费用、体检明细费用（colspan=4：必检费用/选检费用/妇科费用/防癌筛查费用）、预约状态（标签）、预约日期、体检状态（标签）、体检日期、体检年份、体检计划、操作（详情）；前 3 列左冻结、操作列右冻结
|
||||
**表格列（两级表头）：** 复选框（全选）、姓名、性别、年龄、年龄范围、身份证号、单位、部门、机构分类、员工编号、体检编码、用工形式、婚姻状态、体检类型、防癌项、是否上市员工、体检医院、体检总费用、体检明细费用（colspan=4：必检费用/选检费用/妇科费用/防癌筛查费用）、预约状态（标签）、体检预约信息、预约日期、体检状态（标签）、体检日期、体检年份、体检计划、操作（详情）；前 3 列左冻结、操作列右冻结
|
||||
|
||||
**预约跟踪详情弹窗（880px）：**
|
||||
- 基本信息：姓名/员工编号/性别/年龄/年龄范围/身份证号/单位/部门/机构分类/体检编码/用工形式/婚姻状态/体检类型/防癌项/是否上市员工
|
||||
@@ -983,7 +995,27 @@
|
||||
|
||||
---
|
||||
|
||||
#### 33. 已选项目（mid-selected-items.html）
|
||||
#### 33. 体检预约跟踪（mid-appointment-track2.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 以 4 个页签纵向贯穿「应检 → 已选项目 → 已预约 → 已参检」的完整预约跟踪流程，支持批量状态流转与逐项置检/弃检。
|
||||
|
||||
**Tab 切换：** 所有员工 / 已选项目员工 / 已预约员工 / 已参检员工
|
||||
|
||||
**筛选条件：** 体检年份（年份选择控件，默认当年）、单位部门、医院选择、姓名、员工编号、身份证号，另有性别/年龄范围/机构分类/是否上市员工/防癌项/体检状态/预约状态/前置机预约状态（仅所有员工页签）；已参检页签额外含体检编码、系统体检状态、医院体检状态、体检日期起止；各页签均带查询/重置
|
||||
|
||||
**操作按钮：** 所有员工——导出列表数据、查看导出任务、同步医院体检预约信息；已选项目员工——导出列表/项目/预约数据、查看导出任务；已预约员工——置为已体检、置为未体检、取消预约、导出列表/项目/预约数据、查看导出任务；已参检员工——导出项目状态、导出体检指引单、查看导出任务
|
||||
|
||||
**表格列（按页签）：** 所有员工单级表头（姓名/员工编号/性别/年龄/身份证号/单位/部门/机构分类/体检编码/用工形式/婚姻状态/防癌项/是否上市员工/预约状态/前置机预约状态/预约日期/体检状态/体检日期/体检年份/体检计划/操作）；已选项目员工两级表头（体检明细费用下分必检/选检/妇科/防癌筛查费用 4 子列，另含体检项目数/体检总费用/提交项目日期等）；已预约员工单级表头（含体检编码/预约日期）；已参检员工单级表头（含系统体检状态/医院体检状态/已检项/全部）
|
||||
|
||||
**详情弹窗（4 个页签各 1 个）：** 所有员工「预约跟踪详情」（基本信息 + 预约与体检信息）；已选项目员工（信息卡 + 已选项目列表含费用合计）；已预约/已参检员工（信息卡 + 3 个 Tab：员工体检表信息/已体检项目/未体检项目，支持逐项置为已检/未检/弃检）
|
||||
|
||||
**业务规则：** 状态彩色标签（未预约橙/已预约绿/已取消红/未体检橙/体检中与已体检蓝）；前置机预约状态独立枚举（未预约/预约成功/已取消预约/预约失败/预约中/取消预约失败）；已预约页签批量置为已体检/未体检/取消预约需先勾选行；已参检员工区分系统体检状态与医院体检状态双口径。
|
||||
|
||||
---
|
||||
|
||||
#### 34. 已选项目（mid-selected-items.html）
|
||||
|
||||
|
||||
|
||||
@@ -1005,7 +1037,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 34. 已检员工（mid-participation.html）
|
||||
#### 35. 已检员工（mid-participation.html）
|
||||
|
||||
|
||||
|
||||
@@ -1025,7 +1057,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 35. 单位预约人数统计（mid-unit-appointment.html）
|
||||
#### 36. 单位预约人数统计（mid-unit-appointment.html）
|
||||
|
||||
|
||||
|
||||
@@ -1041,13 +1073,13 @@
|
||||
|
||||
---
|
||||
|
||||
#### 36. 医院实时预约人数（mid-hospital-realtime.html）
|
||||
#### 37. 医院实时预约人数（mid-hospital-realtime.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 按医院+日期查看医院承检能力与当日已预约人数的实时统计，用于监控各医院预约饱和度。
|
||||
|
||||
**筛选条件：** 体检年份（年份日历选择控件，默认当年）、医院（下拉）、日期范围（日期至日期，默认当月 1 号至当月最后一天）
|
||||
**筛选条件：** 体检年份（年份日历选择控件，默认当年）、医院（下拉）、日期范围（日期至日期，默认当日至 30 日后）
|
||||
|
||||
**操作按钮：** 导出列表数据、查看导出任务
|
||||
|
||||
@@ -1055,7 +1087,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 37. 医生实时检查情况（mid-doctor-realtime.html）
|
||||
#### 38. 医生实时检查情况（mid-doctor-realtime.html）
|
||||
|
||||
|
||||
|
||||
@@ -1069,7 +1101,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 38. 医院预约人数统计（mid-hospital-appointment.html）
|
||||
#### 39. 医院预约人数统计（mid-hospital-appointment.html）
|
||||
|
||||
|
||||
|
||||
@@ -1083,7 +1115,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 39. 签约单位应检人数（mid-unit-expected.html）
|
||||
#### 40. 签约单位应检人数（mid-unit-expected.html）
|
||||
|
||||
|
||||
|
||||
@@ -1099,7 +1131,7 @@
|
||||
|
||||
### 胃肠镜体检
|
||||
|
||||
#### 40. 员工预约跟踪（胃肠镜）（mid-gastro-appointment-track.html）
|
||||
#### 41. 员工预约跟踪（胃肠镜）（mid-gastro-appointment-track.html）
|
||||
|
||||
|
||||
|
||||
@@ -1119,7 +1151,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 41. 单位预约统计（胃肠镜）（mid-gastro-unit-appointment.html）
|
||||
#### 42. 单位预约统计（胃肠镜）（mid-gastro-unit-appointment.html）
|
||||
|
||||
|
||||
|
||||
@@ -1135,7 +1167,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 42. 胃肠镜问卷信息（mid-gastro-questionnaire.html）
|
||||
#### 43. 胃肠镜问卷信息（mid-gastro-questionnaire.html）
|
||||
|
||||
|
||||
|
||||
@@ -1153,7 +1185,7 @@
|
||||
|
||||
### 冠脉CTA体检
|
||||
|
||||
#### 43. 员工预约跟踪（冠脉CTA）（mid-cta-appointment-track.html）
|
||||
#### 44. 员工预约跟踪（冠脉CTA）（mid-cta-appointment-track.html）
|
||||
|
||||
|
||||
|
||||
@@ -1162,11 +1194,11 @@
|
||||
|
||||
---
|
||||
|
||||
#### 44. 单位预约统计（冠脉CTA）（mid-cta-unit-appointment.html）
|
||||
#### 45. 单位预约统计（冠脉CTA）（mid-cta-unit-appointment.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 按单位（二级/三级）统计冠脉CTA体检的应检、问卷填写、预约与参检人数。页面结构与胃肠镜版单位预约统计完全一致（克隆页）。
|
||||
**功能说明：** 按单位（二级/三级）统计冠脉CTA体检的应检、预约与参检人数（冠脉CTA免问卷，无问卷填写列）。页面结构与胃肠镜版单位预约统计类似（克隆页，差异：无"填写问卷人数"列）。
|
||||
|
||||
|
||||
---
|
||||
@@ -1175,25 +1207,45 @@
|
||||
|
||||
### 常规体检
|
||||
|
||||
#### 45. 常规体检报告（post-report-employee.html）
|
||||
#### 46. 常规体检报告（post-report-employee.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 常规体检报告列表，支持更新报告数据、报告补录、获取影像报告、导出，并可打开单份报告详情弹窗（结论/建议/分科明细）。
|
||||
**功能说明：** 常规体检报告列表，支持勾选员工后批量更新报告数据/获取影像报告、报告补录、报告模板导入、导出，并可打开单份专业版式报告弹窗（结论/建议/分科明细）。
|
||||
|
||||
**筛选条件：** 体检年份（年份日历选择控件，默认当年）、单位部门（下拉）、姓名、员工编号、身份证号（输入框）+ 查询/重置按钮
|
||||
|
||||
**操作按钮：** 更新体检报告数据、体检报告补录、获取影像报告、导出详细报告、查看导出任务
|
||||
**操作按钮：** 更新体检报告数据、体检报告补录、获取影像报告、报告模板导入、导出详细报告、查看导出任务
|
||||
|
||||
**表格列：** 序号、姓名、员工编号、性别、年龄、身份证号、单位、部门、体检医院、体检类型、体检日期、终审日期、更新日期、是否已读、已读时间、操作（查看报告/查看影像/下载报告）
|
||||
**表格列：** 复选框（全选）、序号、姓名、员工编号、性别、年龄、身份证号、单位、部门、体检医院、体检类型、体检日期、终审日期、更新日期、是否已读、已读时间、操作（查看报告/查看影像/下载报告）
|
||||
|
||||
**体检报告弹窗：**
|
||||
- 每个项目结果表列固定：项目名称/结果/单位/参考值，异常结果红色标注（带 ↑↓ 箭头）
|
||||
- 更新体检报告数据、体检报告补录、获取影像报告按钮：参考之前代码逻辑
|
||||
**体检报告弹窗：** 标题"姓名 · 常规体检报告"，专业报告版式：深色报告头"健康体检报告"+ 基本信息区（姓名/性别/年龄/体检编号/体检日期/体检医院）；正文含体检结论（橙色提示框）、体检建议（绿色提示框）及物理检查/内科/外科/化学检查等分科明细；每个项目结果表列固定：项目名称/结果/单位/参考值，异常结果红色标注（带 ↑↓ 箭头）；底部关闭
|
||||
|
||||
**体检报告补录弹窗（480px）：** 体检医院 *（下拉）、身份证号、体检编号、体检年份 *（年份选择控件，默认当年）；提示"身份证号与体检编号必须至少填写一项"，两者均为空时确定报错"身份证号与体检编号不能都为空，请至少填写一项"；底部取消、确定
|
||||
|
||||
**员工操作确认弹窗（420px）：** 点击"更新体检报告数据"或"获取影像报告"时触发；未勾选员工则提示"请先选择至少一位员工"；已勾选时弹窗列出已选员工（"已选择 N 位员工，请确认：姓名、…"），确认后执行操作；底部取消、确定
|
||||
|
||||
---
|
||||
|
||||
#### 46. 员工体检大表（post-employee-master.html）
|
||||
#### 47. 单位群体报告（post-group-report.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 选定某单位与体检年份后，以概览指标卡 + 图表 + 表格呈现该单位群体体检的受检/检出/异常/疾病/专项筛查情况，并支持导出 CSV。
|
||||
|
||||
**筛选条件：** 体检年份（年份选择控件，默认当年）、单位（左侧列表，含单位名称模糊搜索）
|
||||
|
||||
**操作按钮：** 导出群体报告（导出 CSV）
|
||||
|
||||
**概览指标卡（5 列 × 2 行共 10 张）：** 应检人数、已检人数、受检率（绿）、检出率（橙）、异常人数（红）、重点指标异常（红）、复查率、数据完整率、平均年龄、未见异常（绿）；每张卡下方带「较上年」趋势标注（率类 ±X.Xpp、人数/年龄类整数 + 单位，按指标方向判定绿 good/红 bad/灰 flat）
|
||||
|
||||
**报告卡片（6 个）：** ① 近三年趋势（受检率/检出率双折线图）；② 异常率 × 年龄/性别（表：年龄区间/男性异常率/女性异常率/合计异常率/异常人数，含合计行）；③ 异常指标排名（横向条形，按检出人数降序，top1 红/top2 橙/top3 绿、其余蓝，附上年对照与趋势）；④ 重点指标异常拆解（表：重点指标/异常人数/检出率/较上年，5 项：血压/血脂/空腹血糖/高尿酸/超重 BMI）；⑤ 疾病（病种）分布（按 8 类病种分组归类，表列：病种/人数/占比/较上年）；⑥ 专项筛查结果（防癌筛查 Septin9、CA724、冠脉 CTA、胃肠镜 4 项，阳性/异常率 + 已筛人数 + 较上年）
|
||||
|
||||
**业务规则：** 受检率 = 已检 ÷ 应检、检出率 = 异常 ÷ 已检，各率保留 1 位小数、除数为 0 显示 0.0%；同单位同一年数据恒定（确定性伪随机）；报告头元信息含体检年份/承检医院/体检计划起止/同比基准上一年。
|
||||
|
||||
---
|
||||
|
||||
#### 48. 员工体检大表（post-employee-master.html）
|
||||
|
||||
|
||||
|
||||
@@ -1214,7 +1266,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 47. 大病人员信息（post-illness-personnel.html）
|
||||
#### 49. 大病人员信息（post-illness-personnel.html）
|
||||
|
||||
|
||||
|
||||
@@ -1238,7 +1290,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 48. 指标异常通知（post-indicator-notify.html）
|
||||
#### 50. 指标异常通知（post-indicator-notify.html）
|
||||
|
||||
|
||||
|
||||
@@ -1254,7 +1306,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 49. 体检报告未匹配项目（post-report-unmatched.html）
|
||||
#### 51. 体检报告未匹配项目（post-report-unmatched.html）
|
||||
|
||||
|
||||
|
||||
@@ -1270,7 +1322,7 @@
|
||||
|
||||
### 体检统计汇总
|
||||
|
||||
#### 50. 单位体检人数统计（post-unit-count.html）
|
||||
#### 52. 单位体检人数统计（post-unit-count.html）
|
||||
|
||||
|
||||
|
||||
@@ -1294,7 +1346,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 51. 单位体检费用统计（post-unit-cost-stat.html）
|
||||
#### 53. 单位体检费用统计（post-unit-cost-stat.html）
|
||||
|
||||
|
||||
|
||||
@@ -1308,7 +1360,7 @@
|
||||
|
||||
**表格列：** 序号、单位、部门（仅三级单位 Tab）、体检医院、已体检人数、报告完整人数、报告不完整人数、报告缺少项目总数、计划总体检费用（元）、实际总体检费用（元）、体检年份、签约医院（该单位签约的体检医院，可能存在多个，逗号相隔，位于体检年份之后）、操作（员工费用明细）；已体检人数/报告完整人数/报告不完整人数/报告缺少项目总数 4 列为蓝色数字链接
|
||||
|
||||
**员工费用明细弹窗：** 标题"「单位」YYYY年 员工费用明细"；表格列：序号、姓名、员工编号、部门、体检日期、体检医院、应检项目数（蓝链）、已检项目数（蓝链，附灰色提示"含未检/弃检 N"）、报告完整状态（绿"完整"/橙"不完整"标签）、报告缺少项目数、计划体检费用（元）、实际体检费用（元）；底部合计行；关闭
|
||||
**员工费用明细弹窗：** 标题"「单位」YYYY年 员工费用明细"；顶部筛选栏（姓名/员工编号模糊查询、报告完整状态 全部/完整/不完整 + 查询/重置按钮，打开弹窗时自动重置）及"导出列表数据"按钮；表格列：序号、姓名、员工编号、部门、体检日期、体检医院、应检项目数（蓝链）、已检项目数（蓝链，附灰色提示"含未检/弃检 N"）、报告完整状态（绿"完整"/橙"不完整"标签）、报告缺少项目数（不完整时标蓝可点击，打开体检报告缺少体检项目信息弹窗）、计划体检费用（元）、实际体检费用（元）；无结果时显示"暂无数据"；底部合计行随筛选结果汇总；关闭
|
||||
|
||||
**项目列表弹窗（560px，二层）：** 标题"「姓名」应检项目/已检项目（YYYY年）"；表头动态：序号、项目名称、项目类别、应检项目费用（元）/项目费用（元）、体检状态（绿"已检"/红"弃检"/橙"未检"标签）；底部费用合计行。项目库为 4 档套餐，费用合计恰与额度档 1000/1500/2500/4000 元一致
|
||||
|
||||
@@ -1320,7 +1372,39 @@
|
||||
|
||||
---
|
||||
|
||||
#### 52. 医院体检人数统计（post-hospital-count.html）
|
||||
#### 54. 单位体检项目统计（post-unit-item-stat.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 按"单位 × 体检医院 × 体检项目"维度统计各体检项目的已选/已检/异常人数及患病率，人数列可点击下钻查看对应人员明细。
|
||||
|
||||
**筛选条件：** 体检年份（年份日历选择控件，默认当年）、单位（下拉）、医院（下拉）、项目名称（输入）、项目编码（输入）
|
||||
|
||||
**操作按钮：** 导出列表数据、查看导出任务
|
||||
|
||||
**表格列：** 序号、单位、体检医院、体检项目名称、项目编码、已选人数、已检人数、异常人数、患病率
|
||||
|
||||
**业务规则：** 患病率 = 异常人数 ÷ 已检人数，患病率 ≥10% 标红；已选/已检/异常三列数字为蓝色链接，点击打开对应口径人员列表弹窗（列：序号、姓名、员工编号、部门、体检医院、体检日期、体检状态/体检结果/异常结果）。
|
||||
|
||||
---
|
||||
|
||||
#### 55. 项目结果综合统计（post-result-comprehensive-stat.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 以 2×2 网格展示 4 张堆积柱状图，统计维度固定为性别/年龄/部门/岗位；每张图自带「项目」「维度」两个下拉，可独立切换体检项目与统计维度，查看该维度各取值下的正常/异常人数及占比。
|
||||
|
||||
**筛选条件：** 体检年份（年份日历选择控件，默认当年）、单位（下拉，默认第一采油厂）
|
||||
|
||||
**图表面板：** 每个面板顶部为标题 + 项目下拉（12 项）+ 维度下拉（性别/年龄/部门/岗位）+ 正常/异常图例，下方为竖向堆积柱状图。
|
||||
|
||||
**图表展示：** 竖向堆积柱状图——X 轴为所选维度取值（性别→男/女、年龄→各年龄段、部门→各部门、岗位→各岗位），Y 轴为人数；每根柱子正常在下（绿）/异常在上（红）堆叠，柱顶标总数、段内标百分比，悬停显示明细。
|
||||
|
||||
**业务规则：** 4 个面板互相独立，默认项目均为血常规、维度分别为性别/年龄/部门/岗位；异常率 = 异常人数 ÷ 受检人数；维度取值（性别男/女、年龄 5 档、部门 6 个、岗位 6 个）。
|
||||
|
||||
---
|
||||
|
||||
#### 56. 医院体检人数统计（post-hospital-count.html）
|
||||
|
||||
|
||||
|
||||
@@ -1334,7 +1418,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 53. 医生检查人数统计（post-doctor-count.html）
|
||||
#### 57. 医生检查人数统计（post-doctor-count.html）
|
||||
|
||||
|
||||
|
||||
@@ -1348,7 +1432,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 54. 医院体检项目统计（post-item-stat.html）
|
||||
#### 58. 医院体检项目统计（post-item-stat.html）
|
||||
|
||||
|
||||
|
||||
@@ -1362,7 +1446,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 55. 防癌筛查人数统计（post-cancer-screening.html）
|
||||
#### 59. 防癌筛查人数统计（post-cancer-screening.html）
|
||||
|
||||
|
||||
|
||||
@@ -1376,7 +1460,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 56. 系统标准化项目统计（post-standard-stat.html）
|
||||
#### 60. 系统标准化项目统计（post-standard-stat.html）
|
||||
|
||||
|
||||
|
||||
@@ -1390,7 +1474,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 57. 签约医院人数统计（post-contracted-hospital.html）
|
||||
#### 61. 签约医院人数统计（post-contracted-hospital.html）
|
||||
|
||||
|
||||
|
||||
@@ -1404,7 +1488,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 58. 重点指标异常统计（post-key-indicator-stat.html）
|
||||
#### 62. 重点指标异常统计（post-key-indicator-stat.html）
|
||||
|
||||
|
||||
|
||||
@@ -1424,7 +1508,7 @@
|
||||
|
||||
### 病种信息管理
|
||||
|
||||
#### 59. 病种信息配置（post-disease-info.html）
|
||||
#### 63. 病种信息配置（post-disease-info.html）
|
||||
|
||||
|
||||
|
||||
@@ -1444,7 +1528,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 60. 体检结论关联病种（post-conclusion-disease.html）
|
||||
#### 64. 体检结论关联病种（post-conclusion-disease.html）
|
||||
|
||||
|
||||
|
||||
@@ -1464,7 +1548,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 61. 员工病种信息（post-auto-select-disease.html）
|
||||
#### 65. 员工病种信息（post-auto-select-disease.html）
|
||||
|
||||
|
||||
|
||||
@@ -1487,39 +1571,42 @@
|
||||
|
||||
### 胃肠镜体检
|
||||
|
||||
#### 62. 胃肠镜体检报告（post-report-gastro.html）
|
||||
#### 66. 胃肠镜体检报告（post-report-gastro.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 管理员工胃肠镜体检的报告图片，支持查看报告详情（体检项目/病种勾选/体检处理情况/病变情况四类结构化数据）与上传/替换报告图片。提供列表导出导入及列设置。
|
||||
**功能说明：** 管理员工胃肠镜体检的报告图片，支持以专业版式查看报告（胃镜/肠镜所见与诊断、病理诊断、报告图片）及上传/替换报告图片。提供列表导出导入及列设置。
|
||||
|
||||
**筛选条件：** 体检年份（年份日历选择控件，默认当年）、单位部门（下拉，单位/部门两级分组）、体检医院（下拉）、姓名、员工编号、身份证号（输入框）+ 查询/重置按钮
|
||||
|
||||
**操作按钮：** 导出列表数据、导出体检数据、查看导出任务、导入体检数据、查看导入任务、列设置
|
||||
|
||||
**表格列：** 姓名（固定）、员工编号（固定）、性别、年龄、单位（固定）、部门（固定）、身份证号、体检医院、检查日期、胃镜报告（缩略图）、肠镜报告（缩略图）、创建时间、体检年份、操作（编辑/详情）
|
||||
**表格列：** 姓名（固定）、员工编号（固定）、性别、年龄、单位（固定）、部门（固定）、身份证号、体检医院、检查日期、胃镜报告（缩略图）、肠镜报告（缩略图）、创建时间、体检年份、操作（编辑/查看报告）
|
||||
|
||||
**业务规则：**
|
||||
- 报告缩略图：有报告时点击打开详情弹窗；无报告时灰底占位，点击打开编辑弹窗上传
|
||||
- 报告缩略图：有报告时点击打开查看报告弹窗；无报告时灰底占位，点击打开编辑弹窗上传
|
||||
- 列设置气泡：固定列（姓名/员工编号/单位/部门/操作）不可隐藏，其余列可勾选显隐
|
||||
- 上传为模拟交互（选择文件后 toast 提示），保存写回行数据
|
||||
|
||||
**报告详情弹窗（900px）：** 标题"姓名 · 胃肠镜报告详情"：
|
||||
**查看报告弹窗（宽版）：** 标题"姓名 · 胃肠镜检查报告"，专业报告版式（与个人体检数据-胃肠镜体检页签一致）：深色报告头"胃肠镜检查报告"+ 基本信息区（姓名/性别/年龄/检查编号/检查日期/检查医院）；
|
||||
- 胃镜检查表：项目（食管/胃/十二指肠/诊断结果）× 所见/结论
|
||||
- 肠镜检查表：项目（结肠/诊断结果/病理诊断）× 所见/结论
|
||||
- 报告图片：胃镜报告/肠镜报告/活检报告（"查看"链接）；底部关闭
|
||||
|
||||
**编辑报告弹窗（900px）：**
|
||||
- 基本信息两列表单（姓名/身份证号/单位/部门/承检医院/体检年份，只读）
|
||||
- 胃镜报告图片 *、肠镜报告图片 *、活检报告图片 *（图片预览块，无图时虚线框"暂无图片"）
|
||||
- 4 个页签：
|
||||
- 胃镜报告图片 *、肠镜报告图片 *、活检报告图片三个图片区（已上传：图片预览 + "重新上传"/"删除"链接；未上传："上传图片"链接）
|
||||
- 4 个只读页签：
|
||||
- 体检项目：列 #、检查类别、项目编号、项目名称、结果（胃镜/肠镜分段所见描述）
|
||||
- 病种勾选：列 #、项目编号、项目名称、结果（如 SE02.02 糜烂性胃炎、SE02.05 黏膜萎缩）
|
||||
- 体检处理情况：同列结构（如 PE01.01 病理取材、PE01.02 建议复查）
|
||||
- 病变情况：同列结构（如 LE01.01 胃黏膜糜烂、LE01.02 胃黏膜萎缩）
|
||||
- 病种/处理/病变三个页签仅当该员工有胃镜报告时有数据，否则"暂无数据"
|
||||
- 底部关闭
|
||||
|
||||
**编辑报告弹窗（900px）：** 基本信息（只读信息网格）+ 胃镜报告图片、肠镜报告图片两个上传区（已上传显示大图预览 + "重新上传""删除"链接；未上传显示"点击上传"）；取消/保存
|
||||
- 仅报告图片可修改，其余字段只读；底部取消/保存
|
||||
|
||||
---
|
||||
|
||||
#### 63. 胃肠镜体检统计（post-gastro-stat.html）
|
||||
#### 67. 胃肠镜体检统计（post-gastro-stat.html）
|
||||
|
||||
|
||||
|
||||
@@ -1542,7 +1629,7 @@
|
||||
|
||||
### 冠脉CTA体检
|
||||
|
||||
#### 64. 冠脉CTA体检报告（post-cta-report.html）
|
||||
#### 68. 冠脉CTA体检报告（post-cta-report.html）
|
||||
|
||||
|
||||
|
||||
@@ -1572,7 +1659,7 @@
|
||||
|
||||
---
|
||||
|
||||
#### 65. 冠脉CTA体检统计（post-cta-stat.html）
|
||||
#### 69. 冠脉CTA体检统计（post-cta-stat.html）
|
||||
|
||||
|
||||
|
||||
@@ -1582,9 +1669,85 @@
|
||||
|
||||
---
|
||||
|
||||
### 体检影像管理
|
||||
|
||||
#### 70. 用户体检信息（post-imc-user.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 以「人」为维度聚合展示用户体检影像信息，行内可展开查看该人各项检查项目的影像与报告处理情况。
|
||||
|
||||
**筛选条件：** 姓名、身份证号、体检年份（年份选择控件，默认当年）、医院名称
|
||||
|
||||
**操作按钮：** 批量删除
|
||||
|
||||
**表格列：** 复选框、序号、展开箭头列、单位信息、姓名、身份证号、体检年份、医院名称、体检编号、创建日期、操作（删除）
|
||||
|
||||
**展开子表列：** 序号、检查项目名称、处理状态、影像信息、影像报告；影像信息列渲染「预览」链接（无数据显示「暂无」）、影像报告列渲染「查看」链接（无数据显示「无文件」）、子表无数据显示「暂无检查项目数据」
|
||||
|
||||
**业务规则：** 姓名/身份证号/医院名称为模糊匹配、体检年份精确匹配；分页 10/20/50 条/页；删除/批量删除带确认。
|
||||
|
||||
---
|
||||
|
||||
#### 71. 用户影像文件分类（post-imc-class.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 按「检查项目」维度展示影像文件与报告文件的类型分类、处理状态与结果。
|
||||
|
||||
**筛选条件：** 影像分类（超声/CT/MRI/X射线/心电）、检查项目名称、处理状态
|
||||
|
||||
**操作按钮：** 批量删除
|
||||
|
||||
**表格列：** 复选框、序号、影像分类、检查项目名称、影像文件类型、报告文件类型、处理状态、检查结果、错误信息、出报告时间、创建日期、操作（详情 + 删除）
|
||||
|
||||
**详情弹窗：** 标题「用户影像文件分类详情」，字段：用户体检信息ID、影像分类、检查项目名称、影像文件类型、报告文件类型、处理状态、检查结果、错误信息、出报告时间、创建日期
|
||||
|
||||
**业务规则：** 检查结果/错误信息超 18 字符截断并悬停显示全文、空值显示「—」；影像文件类型 dcm/非DICOM、报告文件类型 pdf/png/jpg。
|
||||
|
||||
---
|
||||
|
||||
#### 72. 用户影像文件详细（post-imc-info.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 文件级别的影像/报告明细，展示单个文件的存储地址、DICOM 实例与研究/患者标识。
|
||||
|
||||
**筛选条件：** 文件类型（影像/报告）、患者ID、研究实例ID
|
||||
|
||||
**操作按钮：** 批量删除
|
||||
|
||||
**表格列：** 复选框、序号、文件类型（影像蓝标签/报告紫标签）、影像序号、错误信息、文件地址（下载链接）、dcm实例ID、研究实例ID、患者ID、研究ID、创建日期、操作（详情 + 删除）
|
||||
|
||||
**详情弹窗：** 标题「用户影像文件详细」，字段：用户影像文件分类ID、文件类型、影像序号、错误信息、文件地址、dcm实例ID、研究实例ID、患者ID、研究ID、创建日期
|
||||
|
||||
**业务规则：** 错误信息超 18 字符截断并悬停全文；患者ID/dcm实例ID/错误信息可为空（空显示「—」，报告的 dcm实例ID 恒为空）。
|
||||
|
||||
---
|
||||
|
||||
#### 73. 文件处理日志（post-imc-log.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示影像压缩包的传输、解析全过程日志（时间线 + 状态 + 原始 json）。
|
||||
|
||||
**筛选条件：** 身份证号、体检年份（年份选择控件）、体检编号、影像分类（超声/CT/MRI/X射线/心电）、处理状态
|
||||
|
||||
**操作按钮：** 批量删除
|
||||
|
||||
**表格列：** 复选框、序号、医院名称、姓名、身份证号、体检年份、体检编号、影像分类、json数据、文件地址（下载链接）、文件大小（MB）、处理状态、错误信息、传输开始时间、传输完成时间、解析开始时间、解析完成时间、操作（详情 + 删除）
|
||||
|
||||
**详情弹窗：** 标题「文件处理日志详情」，字段含医院名称/姓名/身份证号/体检年份/体检编号/影像分类/json 数据（代码块展示）/文件地址/文件大小（MB）/处理状态/错误信息/传输开始/传输完成/解析开始/解析完成时间
|
||||
|
||||
**业务规则：** json 数据超 24 字符截断为等宽字体并悬停全文、详情弹窗内 json 代码块可滚动；错误信息超 18 字符截断；空时间显示「—」；示例数据按传输开始时间倒序。
|
||||
|
||||
**数据字典（四页通用）：** 处理状态 1 新建（蓝）/2 待解析（灰）/3 失败（红）/4 解析中（橙）/5 成功（绿）/6 失败待重试（橙）/7 最终失败（红）。
|
||||
|
||||
---
|
||||
|
||||
## 六、前置机管理
|
||||
|
||||
### 66. 常规体检前置服务（agent-device.html）
|
||||
### 74. 常规体检前置服务（agent-device.html）
|
||||
|
||||
|
||||
|
||||
@@ -1625,7 +1788,7 @@
|
||||
|
||||
## 七、异常事件
|
||||
|
||||
### 67. 系统脏数据（exception-dirty.html）
|
||||
### 75. 系统脏数据（exception-dirty.html）
|
||||
|
||||
|
||||
|
||||
@@ -1643,18 +1806,14 @@
|
||||
|
||||
---
|
||||
|
||||
### 68. 结果异常（exception-result.html）
|
||||
### 76. 结果异常（exception-result.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示体检结果中指标超出正常参考范围的异常记录（危急/异常两级），支持按单位、时间范围、异常等级筛选与导出。
|
||||
**功能说明：** 展示体检结果中指标超出正常参考范围的异常记录，支持按单位、时间范围筛选与导出。
|
||||
|
||||
**筛选条件：** 体检年份（年份日历选择控件，默认当年）、单位（下拉）、时间范围（日期至日期）、异常等级（下拉：全部/危急/异常）+ 查询/重置按钮
|
||||
**筛选条件：** 体检年份（年份日历选择控件，默认当年）、单位（下拉）、时间范围（日期至日期）+ 查询/重置按钮
|
||||
|
||||
**操作按钮：** 导出列表数据、查看导出任务
|
||||
|
||||
**表格列：** 序号、异常等级（红色"危急"/橙色"异常"标签）、员工姓名、员工编号、单位、异常项目、异常值、参考范围、发现时间
|
||||
|
||||
**业务规则：**
|
||||
- 页首异常数据定义说明框（黄色提示框）：危急（指标严重偏离正常范围，需立即处理）、异常（指标超出参考范围但未达危急程度）；系统自动检测并记录
|
||||
- 异常等级措辞统一不带"值"字（危急/异常），表头数据列"异常值"（指偏离数值本身）不受影响
|
||||
**表格列：** 序号、员工姓名、员工编号、单位、异常项目、异常值、参考范围、发现时间
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
* 健康体检（管理端）PRD 截图生成脚本
|
||||
*
|
||||
* 用法：在 web-admin/health-checkup 目录下执行 node doc/screenshot-prd.js
|
||||
* 可选传入页面名前缀只重截指定页，如 node doc/screenshot-prd.js post-unit-cost-stat pre-plan
|
||||
* 依赖：playwright（npm i playwright && npx playwright install chromium）
|
||||
* 输出：doc/screenshots/*.jpg（与 doc/PRD.md 中  引用一一对应）
|
||||
*
|
||||
@@ -54,6 +55,7 @@ const TASKS = [
|
||||
{ page: 'pre-special-cta.html', output: 'pre-special-cta.jpg' },
|
||||
// 四、检中 · 常规体检
|
||||
{ page: 'mid-appointment-track.html', output: 'mid-appointment-track.jpg' },
|
||||
{ page: 'mid-appointment-track2.html', output: 'mid-appointment-track2.jpg' },
|
||||
{ page: 'mid-selected-items.html', output: 'mid-selected-items.jpg' },
|
||||
{ page: 'mid-participation.html', output: 'mid-participation.jpg' },
|
||||
{ page: 'mid-unit-appointment.html', output: 'mid-unit-appointment.jpg' },
|
||||
@@ -70,6 +72,7 @@ const TASKS = [
|
||||
{ page: 'mid-cta-unit-appointment.html', output: 'mid-cta-unit-appointment.jpg' },
|
||||
// 五、检后 · 常规体检
|
||||
{ page: 'post-report-employee.html', output: 'post-report-employee.jpg' },
|
||||
{ page: 'post-group-report.html', output: 'post-group-report.jpg' },
|
||||
{ page: 'post-employee-master.html', output: 'post-employee-master.jpg' },
|
||||
{ page: 'post-illness-personnel.html', output: 'post-illness-personnel.jpg' },
|
||||
{ page: 'post-indicator-notify.html', output: 'post-indicator-notify.jpg' },
|
||||
@@ -77,6 +80,8 @@ const TASKS = [
|
||||
// 五、检后 · 体检统计汇总
|
||||
{ page: 'post-unit-count.html', output: 'post-unit-count.jpg' },
|
||||
{ page: 'post-unit-cost-stat.html', output: 'post-unit-cost-stat.jpg' },
|
||||
{ page: 'post-unit-item-stat.html', output: 'post-unit-item-stat.jpg' },
|
||||
{ page: 'post-result-comprehensive-stat.html', output: 'post-result-comprehensive-stat.jpg' },
|
||||
{ page: 'post-hospital-count.html', output: 'post-hospital-count.jpg' },
|
||||
{ page: 'post-doctor-count.html', output: 'post-doctor-count.jpg' },
|
||||
{ page: 'post-item-stat.html', output: 'post-item-stat.jpg' },
|
||||
@@ -94,12 +99,25 @@ const TASKS = [
|
||||
// 五、检后 · 冠脉CTA体检
|
||||
{ page: 'post-cta-report.html', output: 'post-cta-report.jpg' },
|
||||
{ page: 'post-cta-stat.html', output: 'post-cta-stat.jpg' },
|
||||
// 五、检后 · 体检影像管理
|
||||
{ page: 'post-imc-user.html', output: 'post-imc-user.jpg' },
|
||||
{ page: 'post-imc-class.html', output: 'post-imc-class.jpg' },
|
||||
{ page: 'post-imc-info.html', output: 'post-imc-info.jpg' },
|
||||
{ page: 'post-imc-log.html', output: 'post-imc-log.jpg' },
|
||||
// 六、异常事件
|
||||
{ page: 'exception-dirty.html', output: 'exception-dirty.jpg' },
|
||||
{ page: 'exception-result.html', output: 'exception-result.jpg' },
|
||||
];
|
||||
|
||||
(async () => {
|
||||
const args = process.argv.slice(2);
|
||||
const tasks = args.length
|
||||
? TASKS.filter(t => args.some(a => t.page.startsWith(a) || t.output.startsWith(a)))
|
||||
: TASKS;
|
||||
if (!tasks.length) {
|
||||
console.error('没有匹配到页面：', args.join(' '));
|
||||
process.exit(1);
|
||||
}
|
||||
fs.mkdirSync(OUT_DIR, { recursive: true });
|
||||
const browser = await chromium.launch();
|
||||
const context = await browser.newContext({
|
||||
@@ -109,7 +127,7 @@ const TASKS = [
|
||||
const page = await context.newPage();
|
||||
|
||||
let failed = 0;
|
||||
for (const task of TASKS) {
|
||||
for (const task of tasks) {
|
||||
const file = path.join(ROOT, task.page);
|
||||
if (!fs.existsSync(file)) {
|
||||
console.error('✗ 缺少文件：', task.page);
|
||||
@@ -134,6 +152,6 @@ const TASKS = [
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
console.log(`\n完成：成功 ${TASKS.length - failed} / ${TASKS.length} 张 → ${OUT_DIR}`);
|
||||
console.log(`\n完成：成功 ${tasks.length - failed} / ${tasks.length} 张 → ${OUT_DIR}`);
|
||||
if (failed > 0) process.exit(1);
|
||||
})();
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 181 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 80 KiB |
@@ -160,6 +160,7 @@
|
||||
<a href="mid-appointment-track.html" class="sidebar-item active">体检预约</a>
|
||||
<a href="mid-selected-items.html" class="sidebar-item">已选项目</a>
|
||||
<a href="mid-participation.html" class="sidebar-item">已检员工</a>
|
||||
<a href="mid-appointment-track2.html" class="sidebar-item">体检预约跟踪</a>
|
||||
<a href="mid-unit-appointment.html" class="sidebar-item">单位预约人数统计</a>
|
||||
<a href="mid-hospital-realtime.html" class="sidebar-item">医院实时预约人数</a>
|
||||
<a href="mid-doctor-realtime.html" class="sidebar-item">医生实时检查情况</a>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -153,6 +153,7 @@
|
||||
<a href="mid-appointment-track.html" class="sidebar-item">体检预约</a>
|
||||
<a href="mid-selected-items.html" class="sidebar-item">已选项目</a>
|
||||
<a href="mid-participation.html" class="sidebar-item">已检员工</a>
|
||||
<a href="mid-appointment-track2.html" class="sidebar-item">体检预约跟踪</a>
|
||||
<a href="mid-unit-appointment.html" class="sidebar-item">单位预约人数统计</a>
|
||||
<a href="mid-hospital-realtime.html" class="sidebar-item">医院实时预约人数</a>
|
||||
<a href="mid-doctor-realtime.html" class="sidebar-item">医生实时检查情况</a>
|
||||
|
||||
@@ -127,6 +127,7 @@
|
||||
<a href="mid-appointment-track.html" class="sidebar-item">体检预约</a>
|
||||
<a href="mid-selected-items.html" class="sidebar-item">已选项目</a>
|
||||
<a href="mid-participation.html" class="sidebar-item">已检员工</a>
|
||||
<a href="mid-appointment-track2.html" class="sidebar-item">体检预约跟踪</a>
|
||||
<a href="mid-unit-appointment.html" class="sidebar-item">单位预约人数统计</a>
|
||||
<a href="mid-hospital-realtime.html" class="sidebar-item">医院实时预约人数</a>
|
||||
<a href="mid-doctor-realtime.html" class="sidebar-item">医生实时检查情况</a>
|
||||
|
||||
@@ -131,6 +131,7 @@
|
||||
<a href="mid-appointment-track.html" class="sidebar-item">体检预约</a>
|
||||
<a href="mid-selected-items.html" class="sidebar-item">已选项目</a>
|
||||
<a href="mid-participation.html" class="sidebar-item">已检员工</a>
|
||||
<a href="mid-appointment-track2.html" class="sidebar-item">体检预约跟踪</a>
|
||||
<a href="mid-unit-appointment.html" class="sidebar-item">单位预约人数统计</a>
|
||||
<a href="mid-hospital-realtime.html" class="sidebar-item">医院实时预约人数</a>
|
||||
<a href="mid-doctor-realtime.html" class="sidebar-item active">医生实时检查情况</a>
|
||||
|
||||
@@ -153,6 +153,7 @@
|
||||
<a href="mid-appointment-track.html" class="sidebar-item">体检预约</a>
|
||||
<a href="mid-selected-items.html" class="sidebar-item">已选项目</a>
|
||||
<a href="mid-participation.html" class="sidebar-item">已检员工</a>
|
||||
<a href="mid-appointment-track2.html" class="sidebar-item">体检预约跟踪</a>
|
||||
<a href="mid-unit-appointment.html" class="sidebar-item">单位预约人数统计</a>
|
||||
<a href="mid-hospital-realtime.html" class="sidebar-item">医院实时预约人数</a>
|
||||
<a href="mid-doctor-realtime.html" class="sidebar-item">医生实时检查情况</a>
|
||||
|
||||
@@ -132,6 +132,7 @@
|
||||
<a href="mid-appointment-track.html" class="sidebar-item">体检预约</a>
|
||||
<a href="mid-selected-items.html" class="sidebar-item">已选项目</a>
|
||||
<a href="mid-participation.html" class="sidebar-item">已检员工</a>
|
||||
<a href="mid-appointment-track2.html" class="sidebar-item">体检预约跟踪</a>
|
||||
<a href="mid-unit-appointment.html" class="sidebar-item">单位预约人数统计</a>
|
||||
<a href="mid-hospital-realtime.html" class="sidebar-item">医院实时预约人数</a>
|
||||
<a href="mid-doctor-realtime.html" class="sidebar-item">医生实时检查情况</a>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user