fix: 更新文档截图和页面,新增管理员体重管理文档
@@ -0,0 +1,988 @@
|
||||
# 体重管理(管理端)产品需求文档
|
||||
|
||||
## 模块概述
|
||||
|
||||
体重管理管理端为管理人员提供员工体重健康的全方位干预管理能力,涵盖干预计划创建与管理、员工报名跟踪与目标体重审核、过程数据监测(行动记录/详细数据/体重排名/活动总览/食谱记录)、历史干预数据归档、个人体重目标管理、多类型体重测量设备管理以及异常事件汇总等功能。
|
||||
|
||||
### 页面导航结构
|
||||
|
||||
```
|
||||
体重管理(管理端)
|
||||
├── 顶部导航栏(所有页面共用)
|
||||
│ ├── 档案
|
||||
│ ├── 计划管理
|
||||
│ ├── 报名管理
|
||||
│ ├── 过程管理
|
||||
│ ├── 历史干预
|
||||
│ ├── 个人体重管理
|
||||
│ ├── 设备管理
|
||||
│ └── 异常事件
|
||||
│
|
||||
├── 档案(侧边栏)
|
||||
│ ├── 个人体重数据
|
||||
│ │ └── 个人体重详情
|
||||
│ ├── 单位报表数据
|
||||
│ │ └── 单位报表详情(内Tab:二级单位/三级单位)
|
||||
│ └── 算法模型(占位页面)
|
||||
│
|
||||
├── 计划管理(侧边栏)
|
||||
│ └── 计划列表
|
||||
│ └── 新增/编辑计划(表单页)
|
||||
│ ├── 人员筛选弹窗
|
||||
│ ├── 员工选择弹窗
|
||||
│ └── 审核人员选择弹窗
|
||||
│
|
||||
├── 报名管理(侧边栏)
|
||||
│ ├── 报名跟踪
|
||||
│ │ └── 内Tab:未提交任务书/已提交待审核/已通过待签署/已签署
|
||||
│ └── 目标体重审核
|
||||
│ ├── 内Tab:待审核/已通过/已通过待签署/已驳回
|
||||
│ ├── 审核弹窗(通过/驳回)
|
||||
│ └── 承诺书预览弹窗
|
||||
│
|
||||
├── 设备管理(侧边栏,×4种设备类型,每组含设备管理+设备监测)
|
||||
│ ├── 体重秤
|
||||
│ │ ├── 设备管理
|
||||
│ │ │ └── 新增设备(弹窗)
|
||||
│ │ └── 设备监测
|
||||
│ │ └── 监测详情(弹窗)
|
||||
│ ├── 蓝牙称(同上结构)
|
||||
│ ├── 体脂仪(同上结构)
|
||||
│ ├── 运动器械(同上结构)
|
||||
│ ├── 员工监测数据
|
||||
│ │ └── 测量记录
|
||||
│ ├── 单位数据统计
|
||||
│ │ └── 内Tab:二级单位/三级单位
|
||||
│ └── 员工数据统计
|
||||
│
|
||||
├── 过程管理(侧边栏)
|
||||
│ ├── 行动记录
|
||||
│ │ ├── 单位统计表(含三测率等指标)
|
||||
│ │ └── 个人详情抽屉弹窗(含体重趋势图/饮食记录/运动记录)
|
||||
│ ├── 详细数据
|
||||
│ │ └── 个人指标详情抽屉弹窗(含体重趋势图)
|
||||
│ ├── 体重排名
|
||||
│ │ └── 内Tab:二级单位/三级单位
|
||||
│ ├── 活动总览
|
||||
│ │ └── 活动详情
|
||||
│ ├── 活动统计
|
||||
│ └── 食谱记录
|
||||
│ └── 餐品详情弹窗
|
||||
│
|
||||
├── 历史干预(侧边栏)
|
||||
│ ├── 计划列表
|
||||
│ │ ├── 人员范围弹窗
|
||||
│ │ └── 计划详情
|
||||
│ └── 人员列表
|
||||
│ └── 人员详情
|
||||
│
|
||||
├── 个人体重管理(侧边栏)
|
||||
│ └── 个人目标数据
|
||||
│ └── 个人目标详情(含体重趋势图)
|
||||
│
|
||||
└── 异常事件(侧边栏)
|
||||
├── 系统脏数据
|
||||
└── 结果异常
|
||||
```
|
||||
|
||||
### 状态流转图
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> 创建干预计划
|
||||
创建干预计划 --> 计划进行中: 发布计划
|
||||
计划进行中 --> 员工报名: 员工收到通知
|
||||
员工报名 --> 提交任务书: 员工设置目标体重
|
||||
提交任务书 --> 管理员审核: 提交审核
|
||||
管理员审核 --> 签署承诺书: 审核通过
|
||||
管理员审核 --> 重新提交: 审核驳回
|
||||
重新提交 --> 管理员审核
|
||||
签署承诺书 --> 过程监测: 签署完成
|
||||
过程监测 --> 计划结束: 计划到期
|
||||
计划结束 --> 历史归档: 数据归档
|
||||
|
||||
note right of 过程监测
|
||||
行动记录/详细数据/
|
||||
体重排名/活动总览/
|
||||
食谱记录
|
||||
end note
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 页面清单
|
||||
|
||||
### 档案(侧边栏组:"档案")
|
||||
|
||||
| 序号 | 菜单项 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|--------|-----------|------|------|
|
||||
| 1 | 个人体重数据 | 个人体重数据列表 | archive-personal-weight-data.html | 页面 |
|
||||
| | | 个人体重详情 | archive-personal-weight-detail.html | 页面 |
|
||||
| 2 | 单位报表数据 | 单位报表数据列表 | archive-unit-report.html | 页面 |
|
||||
| | | 单位报表详情 | archive-unit-report-detail.html | 页面 |
|
||||
| 3 | 算法模型 | 算法模型(占位) | archive-algorithm-model.html | 页面 |
|
||||
|
||||
### 计划管理(侧边栏组:"计划管理")
|
||||
|
||||
| 序号 | 菜单项 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|--------|-----------|------|------|
|
||||
| 4 | 计划列表 | 计划列表 | plan-list.html | 页面 |
|
||||
| | | 新增/编辑计划 | plan-edit.html | 页面 |
|
||||
| | | 人员筛选弹窗 | (内嵌弹窗) | 弹窗 |
|
||||
| | | 员工选择弹窗 | (内嵌弹窗) | 弹窗 |
|
||||
| | | 审核人员弹窗 | (内嵌弹窗) | 弹窗 |
|
||||
|
||||
### 报名管理(侧边栏组:"报名管理")
|
||||
|
||||
| 序号 | 菜单项 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|--------|-----------|------|------|
|
||||
| 5 | 报名跟踪 | 报名跟踪列表 | registration-tracking.html | 页面 |
|
||||
| | | 承诺书预览弹窗 | (内嵌弹窗) | 弹窗 |
|
||||
| 6 | 目标体重审核 | 目标体重审核列表 | target-weight-review.html | 页面 |
|
||||
| | | 审核弹窗(含指标对比) | (内嵌弹窗) | 弹窗 |
|
||||
| | | 承诺书预览弹窗 | (内嵌弹窗) | 弹窗 |
|
||||
|
||||
### 设备管理(侧边栏组:设备管理,×4设备类型 + 3个公共统计页)
|
||||
|
||||
| 序号 | 设备类型 | 菜单项 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|---------|--------|-----------|------|------|
|
||||
| 7 | 体重秤 | 设备管理 | 体重秤设备列表 | scale-device.html | 页面 |
|
||||
| | | | 新增设备 | scale-device-add.html | 弹窗 |
|
||||
| | | 设备监测 | 体重秤监测数据 | scale-monitor.html | 页面 |
|
||||
| | | | 监测详情 | scale-monitor-detail.html | 弹窗 |
|
||||
| 8 | 蓝牙称 | 设备管理 | 蓝牙称设备列表 | bluetooth-device.html | 页面 |
|
||||
| | | | 新增设备 | bluetooth-device-add.html | 弹窗 |
|
||||
| | | 设备监测 | 蓝牙称监测数据 | bluetooth-monitor.html | 页面 |
|
||||
| | | | 监测详情 | bluetooth-monitor-detail.html | 弹窗 |
|
||||
| 9 | 体脂仪 | 设备管理 | 体脂仪设备列表 | fat-device.html | 页面 |
|
||||
| | | | 新增设备 | fat-device-add.html | 弹窗 |
|
||||
| | | 设备监测 | 体脂仪监测数据 | fat-monitor.html | 页面 |
|
||||
| | | | 监测详情 | fat-monitor-detail.html | 弹窗 |
|
||||
| 10 | 运动器械 | 设备管理 | 运动器械设备列表 | sport-device.html | 页面 |
|
||||
| | | | 新增设备 | sport-device-add.html | 弹窗 |
|
||||
| | | 设备监测 | 运动器械监测数据 | sport-monitor.html | 页面 |
|
||||
| | | | 监测详情 | sport-monitor-detail.html | 弹窗 |
|
||||
| 11 | (公共) | 员工监测数据 | 员工监测数据列表 | employee-data.html | 页面 |
|
||||
| | | | 测量记录详情 | employee-data-record.html | 页面 |
|
||||
| 12 | (公共) | 单位数据统计 | 单位数据统计列表 | dept-stat.html | 页面 |
|
||||
| 13 | (公共) | 员工数据统计 | 员工数据统计列表 | employee-stat.html | 页面 |
|
||||
|
||||
### 过程管理(侧边栏组:"过程管理")
|
||||
|
||||
| 序号 | 菜单项 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|--------|-----------|------|------|
|
||||
| 14 | 行动记录 | 行动记录列表 | action-record.html | 页面 |
|
||||
| | | 个人详情抽屉 | (内嵌抽屉弹窗) | 弹窗 |
|
||||
| | | 饮食记录弹窗 | (内嵌弹窗) | 弹窗 |
|
||||
| | | 运动记录弹窗 | (内嵌弹窗) | 弹窗 |
|
||||
| 15 | 详细数据 | 详细数据列表 | detail-data.html | 页面 |
|
||||
| | | 个人指标详情抽屉 | (内嵌抽屉弹窗) | 弹窗 |
|
||||
| 16 | 体重排名 | 体重排名列表 | weight-ranking.html | 页面 |
|
||||
| 17 | 活动总览 | 活动总览列表 | action-overview.html | 页面 |
|
||||
| | | 活动详情 | action-overview-detail.html | 页面 |
|
||||
| 18 | 活动统计 | 活动统计列表 | activity-statistics.html | 页面 |
|
||||
| 19 | 食谱记录 | 食谱记录列表 | recipe-record.html | 页面 |
|
||||
| | | 餐品详情弹窗 | (内嵌弹窗) | 弹窗 |
|
||||
|
||||
### 历史干预(侧边栏组:"历史干预")
|
||||
|
||||
| 序号 | 菜单项 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|--------|-----------|------|------|
|
||||
| 20 | 计划列表 | 历史计划列表 | history-plan-list.html | 页面 |
|
||||
| | | 人员范围弹窗 | (内嵌弹窗) | 弹窗 |
|
||||
| | | 计划详情 | history-plan-detail.html | 页面 |
|
||||
| 21 | 人员列表 | 历史人员列表 | history-personnel-list.html | 页面 |
|
||||
| | | 人员详情 | history-personnel-detail.html | 页面 |
|
||||
|
||||
### 个人体重管理(侧边栏组:"个人体重管理")
|
||||
|
||||
| 序号 | 菜单项 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|--------|-----------|------|------|
|
||||
| 22 | 个人目标数据 | 个人目标数据列表 | personal-target-data.html | 页面 |
|
||||
| | | 个人目标详情 | personal-target-detail.html | 页面 |
|
||||
|
||||
### 异常事件(侧边栏组:"异常事件")
|
||||
|
||||
| 序号 | 菜单项 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|--------|-----------|------|------|
|
||||
| 23 | 系统脏数据 | 系统脏数据列表 | exception-system-dirty.html | 页面 |
|
||||
| 24 | 结果异常 | 结果异常列表 | exception-result-abnormal.html | 页面 |
|
||||
|
||||
---
|
||||
|
||||
## 逐页说明
|
||||
|
||||
---
|
||||
|
||||
## 一、档案
|
||||
|
||||
### 1. 个人体重数据(archive-personal-weight-data.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 以员工为维度展示个人体重管理相关数据的汇总列表,支持按姓名、单位等多维筛选。
|
||||
|
||||
**筛选条件:** 姓名(输入框)、员工编号(输入框)、单位部门(二级联动下拉)
|
||||
|
||||
**表格列(多级表头):**
|
||||
- 第一级:姓名、员工编号、性别、年龄、单位、部门、体重(kg)、BMI、体脂肪率(%)、腰围(cm)、操作
|
||||
- 体重子列:初始体重、当前体重、目标体重、变化(带颜色标注:下降绿色、上升红色)
|
||||
|
||||
**业务规则:**
|
||||
- 体重变化正值红色标注(增重),负值绿色标注(减重)
|
||||
- 变化列使用 `change-up`/`change-down` 样式区分颜色
|
||||
|
||||
**交互说明:**
|
||||
- 操作列点击"详情"跳转到个人体重详情页
|
||||
- 支持导出列表数据
|
||||
- 各数值列支持排序
|
||||
|
||||
---
|
||||
|
||||
### 1-1. 个人体重详情(archive-personal-weight-detail.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 展示单个员工的完整体重管理数据,包括体重趋势、目标达成情况、历史测量记录等。
|
||||
|
||||
**页面布局:**
|
||||
- 顶部员工信息卡片:头像(首字母)、姓名、工号、单位、部门
|
||||
- 体重趋势图区域:SVG折线图展示体重变化趋势
|
||||
- 指标总览网格:初始体重、当前体重、目标体重、已减重量、BMI变化等
|
||||
- 历史测量记录表格
|
||||
|
||||
**交互说明:**
|
||||
- 通过URL参数加载指定员工数据
|
||||
- 趋势图以SVG动态渲染
|
||||
- 返回按钮跳转回个人体重数据列表页
|
||||
|
||||
---
|
||||
|
||||
### 2. 单位报表数据(archive-unit-report.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 以单位/部门为维度展示体重管理干预的汇总统计数据,支持二级单位和三级单位两个维度切换。
|
||||
|
||||
**Tab切换:** 二级单位 / 三级单位
|
||||
|
||||
**筛选条件:** 组织机构(二级联动下拉)、年份(下拉,默认当年)
|
||||
|
||||
**二级单位表格列:**
|
||||
- 序号、单位、总人数、组织活动次数、人均减重(kg)、人均减重率(%)、人均BMI降低、人均体脂率降低(%)、人均腰围减少(cm)、人均每日摄入热量(kcal)、人均每日消耗热量(kcal)、人均每日热量缺口、人均综合得分、人均行动得分、操作
|
||||
|
||||
**三级单位表格列:** 在二级单位基础上增加"部门"列(位于单位和总人数之间)
|
||||
|
||||
**业务规则:**
|
||||
- 表格列较多,序号、单位、总人数三列做左侧固定(sticky),操作列右侧固定
|
||||
- 所有数据列支持排序
|
||||
|
||||
**交互说明:**
|
||||
- 操作列点击"详细数据"跳转到单位报表详情页(archive-unit-report-detail.html),通过URL参数传递单位/部门及各项数值
|
||||
- 支持导出列表数据、查看导出任务
|
||||
|
||||
---
|
||||
|
||||
### 2-1. 单位报表详情(archive-unit-report-detail.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 展示指定单位/部门的干预计划维度的详细数据,汇总该单位下各干预计划的执行情况和效果指标。
|
||||
|
||||
**面包屑导航:** 体重管理 / 档案 / 单位报表数据 / **单位名称**
|
||||
|
||||
**筛选条件:** 年份(下拉)
|
||||
|
||||
**表格列:**
|
||||
- 干预计划、组织机构、组织部门、起止日期、人员范围、应参加人数、已参加人数、未参加人数、完成体重目标人数、完成体脂目标人数、完成腰围目标人数、人均减重(kg)、人均减重率(%)、人均腰围减少(cm)、人均每日摄入(千卡)、人均每日消耗(千卡)、人均每日热量缺口、人均综合得分、人均行动得分、负责人
|
||||
|
||||
**交互说明:**
|
||||
- 面包屑导航支持点击跳回上级页面
|
||||
- 返回按钮跳转回单位报表数据列表页
|
||||
- 页面标题和面包屑通过URL参数动态显示单位信息
|
||||
- 支持导出列表数据、查看导出任务
|
||||
|
||||
---
|
||||
|
||||
### 3. 算法模型(archive-algorithm-model.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 占位页面,主内容区域为空,仅包含顶部导航栏和侧边栏框架。**当前为占位页面**,实际内容待实现。
|
||||
|
||||
**业务规则:**
|
||||
- 预留用于管理体重管理相关的算法模型文档(如体重预测模型、健康风险评估模型等)
|
||||
|
||||
---
|
||||
|
||||
## 二、计划管理
|
||||
|
||||
### 4. 计划列表(plan-list.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 体重管理干预计划的增删改查管理,管理员在此创建和管理各单位/部门的体重干预计划。
|
||||
|
||||
**筛选条件:** 计划名称(输入框)、组织机构(二级联动下拉)、活动状态(下拉:全部/进行中/已结束/未开始)、年份选择(下拉)
|
||||
|
||||
**表格列:** 序号、组织机构、计划名称、起止日期、人员筛选(可点击数字)、审核人员(可点击数字)、活动状态(标签)、组织部门、负责人、负责人电话、操作
|
||||
|
||||
**业务规则:**
|
||||
- 活动状态标签:进行中(蓝色)、已结束(绿色)、未开始(橙色)
|
||||
- 人员筛选列显示参与人数,点击弹出人员筛选弹窗
|
||||
- 审核人员列显示审核人数,点击弹出审核人员明细弹窗
|
||||
- 操作列包含编辑和删除,删除需二次确认
|
||||
|
||||
**交互说明:**
|
||||
- 点击"新增计划"跳转到新增计划页面(plan-edit.html)
|
||||
- 点击"编辑"跳转到编辑计划页面,回填数据
|
||||
- 点击"删除"弹出确认提示后删除
|
||||
- 点击人员筛选数字打开人员筛选弹窗(展示指定/全部参与人员列表)
|
||||
- 点击审核人员数字打开审核人员弹窗
|
||||
- 支持导出列表数据、查看导出任务
|
||||
|
||||
---
|
||||
|
||||
### 4-1. 新增/编辑计划(plan-edit.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 完整的干预计划创建/编辑表单页面,包含组织机构选择、人员筛选、审核人指定等功能。
|
||||
|
||||
**页面布局:** 表单卡片式布局
|
||||
- 页面标题区:动态显示"新增计划"或"编辑计划"
|
||||
- 表单区域:按照表单字段排列
|
||||
- 底部保存栏:固定在页面底部,包含取消和保存按钮
|
||||
|
||||
**表单字段:**
|
||||
|
||||
| 字段名 | 类型 | 必填 | 校验规则 |
|
||||
|--------|------|------|----------|
|
||||
| 活动组织机构 | 树形选择器 | 是 | 选择单位→部门的树形结构 |
|
||||
| 计划名称 | 文本输入框 | 是 | 不超过50字符 |
|
||||
| 人员筛选 | 单选按钮组 | 是 | "全体人员" / "指定人员" |
|
||||
| 指定部门 | 多选下拉 | 否 | 选择"指定人员"时显示,需先选组织机构 |
|
||||
| 指定员工 | 员工选择器 | 否 | 选择"指定人员"时显示,点击打开员工选择弹窗 |
|
||||
| 起止日期 | 日期范围选择 | 是 | 结束日期不得早于开始日期 |
|
||||
| 审核人员 | 搜索下拉 | 是 | 支持搜索姓名,可多选 |
|
||||
| 负责人 | 搜索下拉 | 是 | 支持搜索姓名,单选,选项含头像和手机号 |
|
||||
| 负责人电话 | 文本输入框 | 是 | 11位手机号格式 |
|
||||
| 活动说明 | 多行文本域 | 否 | 不超过500字符 |
|
||||
|
||||
**人员选择弹窗:**
|
||||
- 筛选条件:部门、姓名、工号
|
||||
- 表格列:复选框、姓名、工号、性别、年龄、单位、部门
|
||||
- 已选员工以可移除标签形式展示在表单中
|
||||
|
||||
**审核人员弹窗:**
|
||||
- 搜索输入框,支持按姓名实时搜索
|
||||
- 列表展示可选审核人员,含头像、姓名、职位信息
|
||||
- 支持多选,已选审核人以标签展示
|
||||
|
||||
**交互说明:**
|
||||
- 选择组织机构后启用部门多选和员工选择器
|
||||
- 人员筛选切换"全体人员"/"指定人员"时,展开/收起指定人员配置区
|
||||
- 已选员工以可移除标签列表展示
|
||||
- 底部保存栏固定,滚动表单时始终可见
|
||||
- 点击"取消"返回计划列表页
|
||||
- 编辑模式下通过URL参数(`?id=N`)回填表单数据
|
||||
- 审核人员和负责人搜索使用搜索下拉组件
|
||||
|
||||
---
|
||||
|
||||
## 三、报名管理
|
||||
|
||||
### 5. 报名跟踪(registration-tracking.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 跟踪干预计划中员工的报名和任务书提交流程,按不同的报名状态分Tab管理。
|
||||
|
||||
**干预计划选择区:** 搜索下拉选择干预计划,选中后右侧展示计划基本信息(组织机构、起止日期、进行天数、应参加人数、实际参加人数)
|
||||
|
||||
**Tab切换:** 未提交任务书 / 已提交待审核 / 已通过待签署 / 已签署(各Tab带数量角标)
|
||||
|
||||
**筛选条件:** 单位部门(二级联动下拉)、姓名(输入框)、员工编号(输入框)、体重(kg)(运算符+值输入,支持等于/大于/小于/大于等于/小于等于/范围)、BMI(运算符+值输入,同上)
|
||||
|
||||
**各Tab表格列:**
|
||||
|
||||
| Tab | 表格列 |
|
||||
|-----|-------|
|
||||
| 未提交任务书 | 计划名称、姓名、员工编号、性别、年龄、所属单位、所属部门、身高(cm)、初始体重(kg)、初始BMI、目标体重(kg)、目标BMI |
|
||||
| 已提交待审核 | 同上 + 提交时间 |
|
||||
| 已通过待签署 | 同上 + 通过时间、操作(承诺书) |
|
||||
| 已签署 | 同上 + 签署时间、操作(承诺书) |
|
||||
|
||||
**承诺书预览弹窗:**
|
||||
- 展示承诺书正文内容,含员工信息、目标体重、承诺事项
|
||||
- 包含承诺人签名和日期区域
|
||||
- 仅查看模式
|
||||
|
||||
**交互说明:**
|
||||
- 必须先选择干预计划才能查看数据,未选择时显示占位提示
|
||||
- Tab切换筛选不同状态的报名记录
|
||||
- 体重和BMI筛选支持自定义运算符(等于/大于/小于/大于等于/小于等于/范围),选择"范围"时展开第二个输入框
|
||||
- 承诺书弹窗展示完整的承诺书内容
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
### 6. 目标体重审核(target-weight-review.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 管理员审核员工提交的目标体重设置,支持通过/驳回操作,驳回时需填写原因。
|
||||
|
||||
**干预计划选择区:** 与报名跟踪页面结构一致
|
||||
|
||||
**Tab切换:** 待审核 / 已通过 / 已通过待签署 / 已驳回(各Tab带数量角标)
|
||||
|
||||
**筛选条件:** 单位部门(二级联动下拉)、姓名(输入框)、员工编号(输入框)、体重(kg)(运算符筛选)、BMI(运算符筛选)
|
||||
|
||||
**各Tab表格列:**
|
||||
|
||||
| Tab | 表格列 |
|
||||
|-----|-------|
|
||||
| 待审核 | 姓名、员工编号、性别、年龄、所属单位、所属部门、身高(cm)、初始体重(kg)、初始BMI、目标体重(kg)、目标BMI、目标体脂(%)、目标腰围(cm)、操作(审核) |
|
||||
| 已通过 | 同上 + 审核时间、审核人、操作(查看) |
|
||||
| 已通过待签署 | 同上 + 操作(承诺书) |
|
||||
| 已驳回 | 同上 + 驳回原因(hover展示完整文本)、驳回时间、操作(查看) |
|
||||
|
||||
**审核弹窗:**
|
||||
- 员工基本信息卡片(姓名、工号、单位、部门)
|
||||
- 指标对比表格:指标名称、干预前数值、箭头、目标数值、变化量(差值带颜色:达标绿色、未达标红色)
|
||||
- 对比指标:体重(kg)、BMI、体脂率(%)、腰围(cm)
|
||||
- 审核决策按钮组:通过 / 驳回(大按钮,点击选中高亮)
|
||||
- 选择"驳回"时展开驳回原因输入区:
|
||||
- 驳回原因文本域(必填,最多200字)
|
||||
|
||||
**承诺书预览弹窗:** 与报名跟踪中的承诺书弹窗结构一致
|
||||
|
||||
**业务规则:**
|
||||
- 指标对比表格中,变化量为正(增重)红色标注,变化量为负(减重)绿色标注
|
||||
- 目标体重不得低于健康体重下限(BMI 18.5对应体重)
|
||||
- 通过审核后员工状态变为"已通过",需员工签署承诺后变为"已签署"
|
||||
|
||||
**交互说明:**
|
||||
- 点击"审核"打开审核弹窗
|
||||
- 审核弹窗中通过/驳回按钮为互斥选择,选中后高亮显示
|
||||
- 选择驳回时必须填写驳回原因,否则无法提交
|
||||
- 查看模式下弹窗仅展示信息,无决策按钮
|
||||
- 承诺书预览弹窗展示完整承诺书
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
## 四、设备管理
|
||||
|
||||
### 7-10. 四种设备类型的设备管理与设备监测
|
||||
|
||||
体重管理模块支持四种设备类型:**体重秤、蓝牙称、体脂仪、运动器械**。每种设备类型均包含设备管理和设备监测两个子页面,功能结构完全一致。
|
||||
|
||||
#### 设备管理(以体重秤为例:scale-device.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 管理体重秤设备的增删改查,维护设备基础信息。
|
||||
|
||||
**筛选条件:** 设备编码(输入框)、设备名称(输入框)、所属单位(下拉)、设备厂商(下拉)、设备型号(下拉)、设备状态(下拉:全部/正常/维护中/已停用)
|
||||
|
||||
**表格列:** 设备编码、设备名称、设备厂商、设备型号、所属单位、布放位置、入库日期、设备状态(标签)、操作
|
||||
|
||||
**业务规则:**
|
||||
- 设备状态标签:正常(绿色)、维护中(橙色)、已停用(红色)
|
||||
- 操作列包含详情、编辑、删除
|
||||
|
||||
**交互说明:**
|
||||
- 点击"新增设备"打开新增设备弹窗
|
||||
- 点击"详情"查看设备详细信息
|
||||
- 点击"编辑"打开编辑弹窗,回填数据
|
||||
- 点击"删除"弹出确认提示后删除
|
||||
- 支持导出列表数据
|
||||
|
||||
**新增/编辑设备弹窗(scale-device-add.html、bluetooth-device-add.html、fat-device-add.html、sport-device-add.html):**
|
||||
|
||||
| 字段名 | 类型 | 必填 | 校验规则 |
|
||||
|--------|------|------|----------|
|
||||
| 设备编码 | 文本输入框 | 是 | 唯一性校验 |
|
||||
| 设备名称 | 文本输入框 | 是 | 不超过30字符 |
|
||||
| 设备厂商 | 下拉选择 | 是 | 预设厂商列表 |
|
||||
| 设备型号 | 文本输入框 | 是 | 不超过20字符 |
|
||||
| 所属单位 | 下拉选择 | 是 | 从组织机构选择 |
|
||||
| 布放位置 | 文本输入框 | 是 | 不超过50字符 |
|
||||
| 入库日期 | 日期选择 | 是 | 不得晚于当前日期 |
|
||||
|
||||
---
|
||||
|
||||
#### 设备监测(以体重秤为例:scale-monitor.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 实时展示体重秤设备的监测数据,监控设备运行状态。
|
||||
|
||||
**筛选条件:** 设备编码(输入框)、设备名称(输入框)、所属单位(下拉)、日期范围
|
||||
|
||||
**表格列(体重秤):** 设备编码、设备名称、所属单位、布放位置、最后测量时间、当日测量人次、当日异常次数、设备状态(标签)、操作
|
||||
|
||||
**监测详情弹窗(scale-monitor-detail.html、bluetooth-monitor-detail.html、fat-monitor-detail.html、sport-monitor-detail.html):**
|
||||
- 设备基本信息卡片
|
||||
- 当日测量统计(测量人次、异常次数)
|
||||
- 近期测量趋势折线图
|
||||
- 测量记录明细表格
|
||||
|
||||
**各设备类型监测指标差异:**
|
||||
|
||||
| 设备类型 | 监测指标 |
|
||||
|---------|---------|
|
||||
| 体重秤 | 测量时间、体重(kg)、BMI |
|
||||
| 蓝牙称 | 测量时间、体重(kg)、BMI、蓝牙连接状态 |
|
||||
| 体脂仪 | 测量时间、体重(kg)、BMI、体脂率(%)、肌肉量(kg)、水分率(%)、骨量(kg)、基础代谢(kcal) |
|
||||
| 运动器械 | 使用时间、运动类型、运动时长(分钟)、消耗热量(kcal)、运动距离(km) |
|
||||
|
||||
**交互说明:**
|
||||
- 点击"详情"打开监测详情弹窗
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
### 11. 员工监测数据(employee-data.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 以员工为维度展示各设备采集的最新体重测量数据汇总。
|
||||
|
||||
**筛选条件:** 姓名(输入框)、员工编号(输入框)、单位部门(二级联动下拉)
|
||||
|
||||
**表格列(多级表头):**
|
||||
- 第一级:姓名、员工编号、性别、年龄、所属单位、所属部门、最新测量数据(6列)、操作
|
||||
- 最新测量数据子列:测量时间、测量设备、身高(cm)、体重(kg)、BMI、体脂肪率(%)
|
||||
|
||||
**业务规则:**
|
||||
- 异常BMI值红色标注(BMI<18.5或BMI≥28)
|
||||
- 测量设备显示设备类型名称(体重秤/蓝牙称/体脂仪)
|
||||
|
||||
**交互说明:**
|
||||
- 操作列点击"测量记录"跳转到员工测量记录详情页(employee-data-record.html)
|
||||
- 支持导出列表数据、查看导出任务
|
||||
|
||||
---
|
||||
|
||||
### 11-1. 测量记录(employee-data-record.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 展示单个员工在所有设备上的历史测量记录详情。
|
||||
|
||||
**页面布局:**
|
||||
- 员工信息卡片
|
||||
- 筛选条件:日期范围、测量设备类型(下拉)
|
||||
- BMI趋势折线图
|
||||
- 测量记录表格:测量时间、测量设备、身高(cm)、体重(kg)、BMI、体脂肪率(%)
|
||||
|
||||
**交互说明:**
|
||||
- 通过URL参数加载指定员工数据
|
||||
- 表格支持按时间和设备类型筛选
|
||||
- 返回按钮跳转回员工监测数据列表页
|
||||
|
||||
---
|
||||
|
||||
### 12. 单位数据统计(dept-stat.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 以单位/部门为维度统计各类型设备的使用情况,包括入库数、使用人次等指标。
|
||||
|
||||
**Tab切换:** 二级单位 / 三级单位
|
||||
|
||||
**筛选条件:** 组织机构(二级联动下拉)、年份(下拉,默认当年)
|
||||
|
||||
**二级单位表格列(多级表头):**
|
||||
- 第一级:单位、总人数
|
||||
- 体重秤子列:入库数、使用人次、使用率
|
||||
- 蓝牙称子列:入库数、使用人次、使用率
|
||||
- 体脂仪子列:入库数、使用人次、使用率
|
||||
- 运动器械子列:入库数、使用人次、使用率
|
||||
|
||||
**三级单位表格列:** 在二级单位基础上增加"部门"列
|
||||
|
||||
**交互说明:**
|
||||
- 支持导出列表数据、查看导出任务
|
||||
|
||||
---
|
||||
|
||||
### 13. 员工数据统计(employee-stat.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 以员工为维度统计各类型设备的使用频次和最近使用时间。
|
||||
|
||||
**筛选条件:** 姓名(输入框)、员工编号(输入框)、单位部门(二级联动下拉)
|
||||
|
||||
**表格列:**
|
||||
- 姓名、员工编号、性别、年龄、所属单位、所属部门
|
||||
- 体重秤使用次数(可排序)
|
||||
- 蓝牙称使用次数(可排序)
|
||||
- 体脂仪使用次数(可排序)
|
||||
- 运动器械使用次数(可排序)
|
||||
- 最近使用时间
|
||||
|
||||
**交互说明:**
|
||||
- 各使用次数列支持点击表头排序
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
## 五、过程管理
|
||||
|
||||
> **说明:** 过程管理模块的所有页面均包含干预计划选择区,必须先选择干预计划才能查看数据。
|
||||
|
||||
### 14. 行动记录(action-record.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 监控干预计划中各单位/部门员工的体重管理行动执行情况,包括三测率(测体重、测体脂、测腰围的完成比例)。
|
||||
|
||||
**干预计划选择区:** 搜索下拉选择干预计划,选中后右侧展示计划基本信息
|
||||
|
||||
**页面布局:** 上半部分为单位统计汇总表,下半部分为个人详情抽屉
|
||||
|
||||
**单位统计表格列:** 单位、总人数、三测人数、三测率(进度条)
|
||||
|
||||
**业务规则:**
|
||||
- 三测率 = 三测人数 / 总人数 × 100%
|
||||
- 三测率以进度条形式展示,低于60%标红
|
||||
|
||||
**交互说明:**
|
||||
- 点击单位行展开该单位的员工详情列表(抽屉弹窗)
|
||||
- 员工详情抽屉内含:
|
||||
- 员工基本信息
|
||||
- 体重变化趋势图(SVG折线图,含目标线)
|
||||
- 饮食记录入口(点击打开饮食记录弹窗)
|
||||
- 运动记录入口(点击打开运动记录弹窗)
|
||||
- 最新指标数据网格(体重、BMI、体脂率、腰围及其变化量)
|
||||
|
||||
**饮食记录弹窗:**
|
||||
- 筛选:日期范围
|
||||
- 表格列:序号、餐次(早餐/午餐/晚餐/加餐)、摄入时间、总摄入(千卡)、数据来源(手动/自动识别)
|
||||
- 餐饮明细可展开
|
||||
|
||||
**运动记录弹窗:**
|
||||
- 筛选:日期范围
|
||||
- 表格列:日期、运动类型、开始时间、结束时间、运动时长(分钟)、消耗热量(千卡)、数据来源
|
||||
|
||||
---
|
||||
|
||||
### 15. 详细数据(detail-data.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 以员工为维度展示干预计划中每个人的详细体重指标数据和变化情况。
|
||||
|
||||
**干预计划选择区:** 标准结构
|
||||
|
||||
**筛选条件:** 日期范围(默认当日)、单位部门(二级联动下拉)、姓名(输入框)、员工编号(输入框)
|
||||
|
||||
**表格列:** 姓名、员工编号、性别、年龄、所属单位、所属部门、身高(cm)、初始体重(kg)、初始BMI、最近体重(kg)、最近BMI、体重变化(kg)、BMI变化、三测状态(标签)、操作
|
||||
|
||||
**业务规则:**
|
||||
- 体重变化正值红色(增重),负值绿色(减重)
|
||||
- 三测状态标签:已完成(绿色)、部分完成(橙色)、未完成(红色)
|
||||
|
||||
**交互说明:**
|
||||
- 操作列点击"详情"打开个人指标详情抽屉弹窗
|
||||
- 弹窗内含体重趋势折线图(含初始值线和目标值线)、指标变化明细表
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
### 16. 体重排名(weight-ranking.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 在干预计划内按单位或员工进行体重管理效果的排名对比。
|
||||
|
||||
**干预计划选择区:** 标准结构
|
||||
|
||||
**Tab切换(分段控件):** 二级单位 / 三级单位
|
||||
|
||||
**筛选条件:** 单位多选下拉(支持全选/清空)
|
||||
|
||||
**二级单位排名表格列:**
|
||||
- 排名、单位、总人数
|
||||
- 人均减重量(kg)、人均减重率(%)、人均BMI降低
|
||||
- 排名变化(↑/↓/-,带颜色)
|
||||
- 三测率(%)
|
||||
|
||||
**三级单位排名表格列:** 在二级单位基础上增加"部门"列
|
||||
|
||||
**业务规则:**
|
||||
- 排名变化列:排名上升绿色↑、排名下降红色↓、不变灰色-
|
||||
- 排名支持按各指标列排序(点击表头)
|
||||
- 表格较宽,排名靠后的列(变化、三测率等)做右侧sticky固定
|
||||
|
||||
**交互说明:**
|
||||
- 点击表头排序列切换升降序
|
||||
- 排名变化hover展示上次排名数值
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
### 17. 活动总览(action-overview.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 以活动为维度展示干预计划下所有体重管理活动的参与情况和效果汇总。
|
||||
|
||||
**干预计划选择区:** 标准结构
|
||||
|
||||
**筛选条件:** 单位部门(二级联动下拉)、姓名(输入框)、员工编号(输入框)
|
||||
|
||||
**表格列:** 活动名称、活动类型、活动日期、组织单位、应参加人数、实际参加人数、参与率、活动得分、操作
|
||||
|
||||
**业务规则:**
|
||||
- 参与率 = 实际参加人数 / 应参加人数 × 100%
|
||||
- 活动类型含体重测量、体脂检测、腰围测量、饮食指导、运动指导等
|
||||
|
||||
**交互说明:**
|
||||
- 操作列点击"详情"跳转到活动详情页(action-overview-detail.html)
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
### 17-1. 活动详情(action-overview-detail.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 展示单个活动的完整详情,包括参与人员列表和活动效果数据。
|
||||
|
||||
**页面布局:**
|
||||
- 面包屑导航
|
||||
- 活动信息卡片(活动名称、类型、日期、组织单位、负责人等)
|
||||
- Tab切换:已参加人员 / 未参加人员(带数量角标)
|
||||
|
||||
**已参加人员Tab表格列:** 姓名、员工编号、性别、年龄、所属单位、所属部门、参与时间、测量数据(体重变化/BMI变化)、活动得分
|
||||
|
||||
**未参加人员Tab表格列:** 姓名、员工编号、性别、年龄、所属单位、所属部门
|
||||
|
||||
**交互说明:**
|
||||
- 面包屑导航支持返回活动总览
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
### 18. 活动统计(activity-statistics.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 以单位维度汇总干预计划中各项活动的统计数据。
|
||||
|
||||
**干预计划选择区:** 标准结构
|
||||
|
||||
**筛选条件:** 单位多选下拉(支持全选/清空)
|
||||
|
||||
**表格列:** 干预计划、组织机构、起止日期、应参加人数、已参加人数、未参加人数、人均初始体重(kg)、人均初始BMI、人均现体重(kg)、人均现BMI、人均减重量(kg)、人均减重率(%)、人均综合得分、人均行动得分
|
||||
|
||||
**业务规则:**
|
||||
- 减重量正值绿色(减重),负值红色(增重)
|
||||
|
||||
**交互说明:**
|
||||
- 支持导出列表数据、查看导出任务
|
||||
|
||||
---
|
||||
|
||||
### 19. 食谱记录(recipe-record.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 展示干预计划中各食堂/供餐点的餐品供应记录,辅助管理人员了解员工的饮食营养摄入情况。
|
||||
|
||||
**干预计划选择区:** 标准结构
|
||||
|
||||
**筛选条件:** 单位(下拉)、日期范围
|
||||
|
||||
**表格列:** 单位、食堂名称、用餐日期、餐次(早餐/午餐/晚餐/加餐)、餐品名称
|
||||
|
||||
**餐品详情弹窗:**
|
||||
- 餐品基本信息:名称、类别、份量
|
||||
- 营养成分表:热量(kcal)、蛋白质(g)、脂肪(g)、碳水化合物(g)、膳食纤维(g)、钠(mg)
|
||||
- 食材清单
|
||||
|
||||
**交互说明:**
|
||||
- 点击餐品名称打开餐品详情弹窗
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
## 六、历史干预
|
||||
|
||||
### 20. 历史计划列表(history-plan-list.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 查看所有已结束的历史干预计划及其执行效果统计数据。
|
||||
|
||||
**筛选条件:** 组织机构(二级联动下拉)、年份(下拉:全部年份/2026/2025/2024)
|
||||
|
||||
**表格列:** 干预计划、组织机构、组织部门、起止日期、人员范围(可点击查看)、应参加人数、已参加人数、未参加人数、完成体重目标人数、完成体脂目标人数、完成腰围目标人数、人均减重(kg)、人均减重率(%)、人均腰围减少(cm)、人均每日摄入(千卡)、人均每日消耗(千卡)、人均每日热量缺口、人均综合得分、人均行动得分、负责人
|
||||
|
||||
**业务规则:**
|
||||
- 表格列较多,前几列(干预计划、组织机构等)做左侧固定,支持横向滚动
|
||||
- 人员范围列显示人数,可点击查看人员明细
|
||||
|
||||
**交互说明:**
|
||||
- 点击"人员范围"数字打开人员范围弹窗(展示参与人员列表)
|
||||
- 操作列点击"详情"跳转到计划详情页(history-plan-detail.html)
|
||||
- 支持导出列表数据、查看导出任务
|
||||
|
||||
**人员范围弹窗:**
|
||||
- 标题:人员范围 - **计划名称**
|
||||
- 表格列:姓名、员工编号、性别、年龄、所属单位、所属部门、初始体重(kg)、最终体重(kg)、体重变化(kg)、是否完成目标
|
||||
|
||||
---
|
||||
|
||||
### 20-1. 历史计划详情(history-plan-detail.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 展示历史干预计划的完整详情和效果分析数据。
|
||||
|
||||
**页面布局:**
|
||||
- 面包屑导航:体重管理 / 历史干预 / 计划列表 / **计划名称**
|
||||
- 计划信息卡片:计划名称、组织机构、起止日期、负责人、审核人等
|
||||
- 效果统计汇总卡片组:应参加/已参加/未参加人数、完成目标人数、人均减重、人均BMI降低等
|
||||
- 人员明细表格
|
||||
|
||||
**交互说明:**
|
||||
- 面包屑支持返回历史计划列表
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
### 21. 历史人员列表(history-personnel-list.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 以员工为维度查看所有参与过历史干预计划的人员及其干预效果数据。
|
||||
|
||||
**筛选条件:** 组织机构(二级联动下拉)、姓名(输入框)、员工编号(输入框)、年份(下拉)
|
||||
|
||||
**表格列:** 姓名、员工编号、性别、年龄、所属单位、所属部门、参与计划数、初始体重(kg)、最终体重(kg)、体重变化(kg)、BMI变化、体脂率变化(%)、腰围变化(cm)、操作
|
||||
|
||||
**业务规则:**
|
||||
- 体重变化负值绿色(减重),正值红色(增重)
|
||||
- 参与计划数列点击可展开查看参与的计划明细
|
||||
|
||||
**交互说明:**
|
||||
- 操作列点击"详情"跳转到人员详情页(history-personnel-detail.html)
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
### 21-1. 历史人员详情(history-personnel-detail.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 展示单个员工在所有历史干预计划中的完整数据和效果变化。
|
||||
|
||||
**页面布局:**
|
||||
- 面包屑导航
|
||||
- 员工信息卡片
|
||||
- 参与历史时间轴
|
||||
- 体重变化趋势图(跨多次干预计划)
|
||||
- 各干预计划效果明细表格
|
||||
|
||||
**交互说明:**
|
||||
- 面包屑支持返回历史人员列表
|
||||
- 趋势图展示跨计划周期的体重变化
|
||||
|
||||
---
|
||||
|
||||
## 七、个人体重管理
|
||||
|
||||
### 22. 个人目标数据(personal-target-data.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 展示所有员工的个人体重管理目标设置情况和目标达成进度。
|
||||
|
||||
**筛选条件:** 姓名(输入框)、员工编号(输入框)、单位部门(二级联动下拉)
|
||||
|
||||
**表格列(多级表头):**
|
||||
- 第一级:姓名、员工编号、性别、年龄、所属单位、所属部门
|
||||
- 目标信息子列:目标起止日期、目标天数
|
||||
- 初始指标子列:身高(cm)、初始体重(kg)、初始BMI、初始体脂(%)、初始腰围(cm)
|
||||
- 目标指标子列:目标体重(kg)、目标BMI、目标体脂(%)、目标腰围(cm)
|
||||
- 当前指标子列:现体重(kg)、现BMI、现体脂(%)、现腰围(cm)
|
||||
- 变化子列:体重变化(kg)、BMI变化、体脂变化(%)、腰围变化(cm)
|
||||
- 操作列:详细数据
|
||||
|
||||
**业务规则:**
|
||||
- 变化列负值绿色(改善),正值红色(恶化)
|
||||
- 未设置目标的员工,目标周期和目标指标列显示"-",仅当前指标有实际称重数据
|
||||
- 姓名和员工编号列做左侧固定
|
||||
- 详细数据列做右侧固定
|
||||
|
||||
**交互说明:**
|
||||
- 操作列点击"查看"跳转到个人目标详情页(personal-target-detail.html),通过URL参数传递员工ID
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
### 22-1. 个人目标详情(personal-target-detail.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 展示单个员工的目标设定详情、达成进度和历史称重记录。
|
||||
|
||||
**页面布局:**
|
||||
- 面包屑导航
|
||||
- 员工信息卡片
|
||||
- 目标达成进度卡片(目标体重 vs 实际体重、达成率百分比)
|
||||
- 体重变化趋势图(SVG折线图,含目标线)
|
||||
- 历史称重记录表格:测量时间、体重(kg)、BMI、体脂率(%)、腰围(cm)、测量设备
|
||||
|
||||
**交互说明:**
|
||||
- 返回按钮跳转回个人目标数据列表页
|
||||
- 趋势图以SVG动态渲染
|
||||
|
||||
---
|
||||
|
||||
## 八、异常事件
|
||||
|
||||
### 23. 系统脏数据(exception-system-dirty.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 展示体重管理模块中检测到的脏数据记录,供管理员排查和清理。
|
||||
|
||||
**筛选条件:** 业务模块(下拉)、异常类型(下拉)、年份(下拉)
|
||||
|
||||
**表格列:** 业务模块(标签)、异常类型(标签)、异常描述、异常检测时间、表名、字段名、编号、异常值(高亮显示)、数据产生时间
|
||||
|
||||
**业务规则:**
|
||||
- 异常值以红色/橙色高亮显示
|
||||
- 操作栏显示"共N条脏数据"统计
|
||||
|
||||
**交互说明:**
|
||||
- 支持导出列表数据、查看导出任务
|
||||
|
||||
---
|
||||
|
||||
### 24. 结果异常(exception-result-abnormal.html)
|
||||
|
||||

|
||||
|
||||
**功能说明:** 汇总展示体重管理各业务模块产生的结果异常数据,支持多维度筛选。
|
||||
|
||||
**筛选条件:** 员工名称(输入框)、员工编号(输入框)、单位部门(下拉)、业务模块(下拉:全部/体重管理)、年份(下拉)
|
||||
|
||||
**表格列:** 员工、员工编号、单位名称、部门名称、业务模块、异常指标、异常值、异常等级(标签)、异常时间
|
||||
|
||||
**业务规则:**
|
||||
- 异常等级标签:严重(红色)、中等(橙色)、轻微(绿色)
|
||||
- 异常指标含体重异常波动、BMI异常变化、设备数据异常等
|
||||
|
||||
**交互说明:**
|
||||
- 支持导出列表数据、查看导出任务
|
||||
|
||||
---
|
||||
@@ -0,0 +1,175 @@
|
||||
/**
|
||||
* Web管理端 - 体重管理模块页面截图脚本
|
||||
* 使用 Playwright 批量截取 HTML 原型页面,输出 JPEG 到 doc/screenshots/
|
||||
*
|
||||
* 截图约束(参考项目背景.md §7.4):
|
||||
* - Web端视口 1440×900,1x 缩放,全页截图
|
||||
* - JPEG 质量 85%
|
||||
* - 目标体积 ≤ 80KB
|
||||
*
|
||||
* 用法: node doc/screenshot.js
|
||||
*/
|
||||
const { chromium } = require('playwright');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
const MODULE_DIR = __dirname.replace(/\\doc$/, ''); // weight-management/
|
||||
const SCREENSHOTS_DIR = path.join(__dirname, 'screenshots');
|
||||
|
||||
// 主页面列表(排除内嵌弹窗文件,弹窗无需单独截图)
|
||||
const PAGES = [
|
||||
// ===== 档案 =====
|
||||
{ file: 'archive-personal-weight-data.html', desc: '个人体重数据列表' },
|
||||
{ file: 'archive-personal-weight-detail.html', desc: '个人体重详情' },
|
||||
{ file: 'archive-unit-report.html', desc: '单位报表数据列表' },
|
||||
{ file: 'archive-unit-report-detail.html', desc: '单位报表详情' },
|
||||
{ file: 'archive-algorithm-model.html', desc: '算法模型(占位)' },
|
||||
|
||||
// ===== 计划管理 =====
|
||||
{ file: 'plan-list.html', desc: '计划列表' },
|
||||
{ file: 'plan-edit.html', desc: '新增/编辑计划' },
|
||||
|
||||
// ===== 报名管理 =====
|
||||
{ file: 'registration-tracking.html', desc: '报名跟踪' },
|
||||
{ file: 'target-weight-review.html', desc: '目标体重审核' },
|
||||
|
||||
// ===== 设备管理 =====
|
||||
{ file: 'scale-device.html', desc: '体重秤-设备管理' },
|
||||
{ file: 'scale-monitor.html', desc: '体重秤-设备监测' },
|
||||
{ file: 'bluetooth-device.html', desc: '蓝牙称-设备管理' },
|
||||
{ file: 'bluetooth-monitor.html', desc: '蓝牙称-设备监测' },
|
||||
{ file: 'fat-device.html', desc: '体脂仪-设备管理' },
|
||||
{ file: 'fat-monitor.html', desc: '体脂仪-设备监测' },
|
||||
{ file: 'sport-device.html', desc: '运动器械-设备管理' },
|
||||
{ file: 'sport-monitor.html', desc: '运动器械-设备监测' },
|
||||
{ file: 'employee-data.html', desc: '员工监测数据' },
|
||||
{ file: 'employee-data-record.html', desc: '测量记录详情' },
|
||||
{ file: 'dept-stat.html', desc: '单位数据统计' },
|
||||
{ file: 'employee-stat.html', desc: '员工数据统计' },
|
||||
|
||||
// ===== 过程管理 =====
|
||||
{ file: 'action-record.html', desc: '行动记录' },
|
||||
{ file: 'detail-data.html', desc: '详细数据' },
|
||||
{ file: 'weight-ranking.html', desc: '体重排名' },
|
||||
{ file: 'action-overview.html', desc: '活动总览' },
|
||||
{ file: 'action-overview-detail.html', desc: '活动详情' },
|
||||
{ file: 'activity-statistics.html', desc: '活动统计' },
|
||||
{ file: 'recipe-record.html', desc: '食谱记录' },
|
||||
|
||||
// ===== 历史干预 =====
|
||||
{ file: 'history-plan-list.html', desc: '历史计划列表' },
|
||||
{ file: 'history-plan-detail.html', desc: '历史计划详情' },
|
||||
{ file: 'history-personnel-list.html', desc: '历史人员列表' },
|
||||
{ file: 'history-personnel-detail.html', desc: '历史人员详情' },
|
||||
|
||||
// ===== 个人体重管理 =====
|
||||
{ file: 'personal-target-data.html', desc: '个人目标数据列表' },
|
||||
{ file: 'personal-target-detail.html', desc: '个人目标详情' },
|
||||
|
||||
// ===== 异常事件 =====
|
||||
{ file: 'exception-system-dirty.html', desc: '系统脏数据' },
|
||||
{ file: 'exception-result-abnormal.html', desc: '结果异常' },
|
||||
];
|
||||
|
||||
function getOutputName(file) {
|
||||
return file.replace('.html', '.jpg');
|
||||
}
|
||||
|
||||
async function screenshotPage(browser, entry, index, total) {
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 1440, height: 900 },
|
||||
deviceScaleFactor: 1,
|
||||
});
|
||||
const page = await context.newPage();
|
||||
const filePath = path.join(MODULE_DIR, entry.file);
|
||||
const fileUrl = `file:///${filePath.replace(/\\/g, '/')}`;
|
||||
|
||||
try {
|
||||
await page.goto(fileUrl, { waitUntil: 'networkidle', timeout: 15000 });
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// 隐藏所有弹窗遮罩、下拉面板、toast等
|
||||
await page.addStyleTag({
|
||||
content: `
|
||||
.modal-overlay, .modal-mask, .dialog-overlay,
|
||||
.dropdown-panel, .dropdown-menu, .select-panel,
|
||||
.search-select__panel, .org-select-panel, .org-panel,
|
||||
.multi-select__panel, .tree-select__panel,
|
||||
.plan-selector__panel, .toast,
|
||||
.calendar-picker, .date-picker-panel {
|
||||
display: none !important;
|
||||
}
|
||||
`,
|
||||
});
|
||||
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
const outName = getOutputName(entry.file);
|
||||
const outPath = path.join(SCREENSHOTS_DIR, outName);
|
||||
|
||||
// 获取页面实际内容尺寸
|
||||
const bodySize = await page.evaluate(() => {
|
||||
const main = document.querySelector('.main');
|
||||
const body = document.body;
|
||||
return {
|
||||
scrollWidth: Math.max(body.scrollWidth, main ? main.scrollWidth + 240 : 0),
|
||||
scrollHeight: Math.max(body.scrollHeight, main ? main.scrollHeight + 56 : 0),
|
||||
};
|
||||
});
|
||||
|
||||
const contentHeight = Math.max(bodySize.scrollHeight || 900, 600);
|
||||
|
||||
// 根据页面高度动态调整质量,控制体积 ≤ 80KB
|
||||
// 1440×900 复杂表格页面 q75 约 100-140KB,需降到 q65 才能接近 80KB
|
||||
let jpegQuality;
|
||||
if (contentHeight > 3000) jpegQuality = 55;
|
||||
else if (contentHeight > 1800) jpegQuality = 60;
|
||||
else if (contentHeight > 1200) jpegQuality = 65;
|
||||
else jpegQuality = 65; // 900px 高度统一 65%,复杂表格页面约 65-85KB
|
||||
|
||||
await page.screenshot({
|
||||
path: outPath,
|
||||
type: 'jpeg',
|
||||
quality: jpegQuality,
|
||||
fullPage: true,
|
||||
});
|
||||
|
||||
// 检查文件大小
|
||||
const stats = fs.statSync(outPath);
|
||||
const sizeKB = (stats.size / 1024).toFixed(1);
|
||||
|
||||
const label = `[${String(index + 1).padStart(2, '0')}/${total}]`;
|
||||
console.log(` ${label} ${entry.desc} → ${outName} (${sizeKB}KB, h${contentHeight}, q${jpegQuality})`);
|
||||
} catch (err) {
|
||||
console.error(` ${'✗'.padStart(9)} ${entry.file}: ${err.message}`);
|
||||
} finally {
|
||||
await context.close();
|
||||
}
|
||||
}
|
||||
|
||||
(async () => {
|
||||
console.log('Web管理端 - 体重管理模块 页面截图');
|
||||
console.log(`模块目录: ${MODULE_DIR}`);
|
||||
console.log(`输出目录: ${SCREENSHOTS_DIR}`);
|
||||
console.log(`视口: 1440×900, 1x`);
|
||||
console.log(`共 ${PAGES.length} 个页面\n`);
|
||||
|
||||
if (!fs.existsSync(SCREENSHOTS_DIR)) {
|
||||
fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
|
||||
}
|
||||
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
|
||||
try {
|
||||
for (let i = 0; i < PAGES.length; i++) {
|
||||
await screenshotPage(browser, PAGES[i], i, PAGES.length);
|
||||
}
|
||||
console.log(`\n✅ 全部完成!共 ${PAGES.length} 张截图`);
|
||||
console.log(` 输出目录: ${SCREENSHOTS_DIR}`);
|
||||
} catch (err) {
|
||||
console.error('执行出错:', err);
|
||||
process.exit(1);
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
})();
|
||||
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 90 KiB |