fix: 更新健康监测文档和页面，删除活动统计页
This commit is contained in:
liuyunqin
@@ -39,8 +39,10 @@
|
||||
.info-meta__item{padding:0 12px;border-right:1px solid var(--border);}
|
||||
.info-meta__item:first-child{padding-left:0;}
|
||||
.info-meta__item:last-child{border-right:none;}
|
||||
.info-card__right{display:flex;align-items:center;gap:40px;padding-left:32px;border-left:1px solid var(--border);flex-shrink:0;}
|
||||
.stat-item{text-align:center;}
|
||||
.info-card__right{display:flex;align-items:center;gap:40px;padding-left:32px;border-left:1px solid var(--border);flex-shrink:0;}
|
||||
.info-card__date-filter{display:flex;align-items:center;gap:8px;}
|
||||
.info-card__date-filter label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
|
||||
.stat-item{text-align:center;}
|
||||
.stat-num{font-size:28px;font-weight:700;line-height:1.2;}
|
||||
.stat-num--blue{color:var(--primary);}
|
||||
.stat-num--green{color:var(--success);}
|
||||
@@ -182,6 +184,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card__right">
|
||||
<div class="info-card__date-filter">
|
||||
<label>年份</label>
|
||||
<select class="filter-select" id="filterYear" onchange="onYearChange()">
|
||||
<option value="2026">2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ③ Tab 切换区 + 筛选栏 + 表格 -->
|
||||
@@ -479,6 +491,12 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 年份切换 ===== */
|
||||
var currentYear = '2026';
|
||||
function onYearChange(){
|
||||
currentYear = document.getElementById('filterYear').value;
|
||||
// 可根据年份刷新页面数据
|
||||
}
|
||||
// [交互] Tab 切换
|
||||
function switchTab(tab) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(el, i) {
|
||||
|
||||
@@ -42,6 +42,13 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.info-card__detail{display:flex;flex-direction:column;gap:6px;}
|
||||
.info-card__name{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.info-card__meta{display:flex;gap:24px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.info-card__right{flex-shrink:0;margin-left:auto;}
|
||||
.info-card__date-filter{display:flex;align-items:center;gap:8px;}
|
||||
.info-card__date-filter label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
|
||||
|
||||
/* 年份选择 */
|
||||
.filter-select{height:32px;min-width:110px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 10px;font-size:var(--font-xs);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;}
|
||||
|
||||
/* Tab栏 */
|
||||
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;background:#fff;padding:0 24px;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-sm);}
|
||||
.tab-item{padding:14px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;}
|
||||
@@ -206,6 +213,16 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<span id="empDept">研发部</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card__right">
|
||||
<div class="info-card__date-filter">
|
||||
<label>年份</label>
|
||||
<select class="filter-select" id="filterYear" onchange="onYearChange()">
|
||||
<option value="2026">2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 四个Tab -->
|
||||
<div class="tab-bar">
|
||||
@@ -364,6 +381,12 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/* ===== 年份切换 ===== */
|
||||
var currentYear = '2026';
|
||||
function onYearChange(){
|
||||
currentYear = document.getElementById('filterYear').value;
|
||||
// 可根据年份刷新页面数据
|
||||
}
|
||||
// 主Tab切换
|
||||
function switchMainPanel(name, el) {
|
||||
document.querySelectorAll('.tab-bar .tab-item').forEach(function(t){t.classList.remove('active');});
|
||||
|
||||
@@ -43,7 +43,6 @@
|
||||
│ │ └── 新增/编辑活动
|
||||
│ │ └── 活动详情
|
||||
│ │ └── 内Tab：已参加人员 / 未参加人员
|
||||
│ └── 活动统计
|
||||
│
|
||||
├── 穿戴监测（侧边栏）
|
||||
│ ├── 设备管理
|
||||
@@ -140,7 +139,6 @@
|
||||
| 7 | 活动管理 | 活动列表 | health-checkup/activity-manage.html | 页面 |
|
||||
| | | 新增/编辑活动 | health-checkup/activity-edit.html | 页面 |
|
||||
| | | 活动详情 | health-checkup/activity-detail.html | 页面 |
|
||||
| 8 | 活动统计 | 活动统计列表 | health-checkup/activity-stat.html | 页面 |
|
||||
|
||||
### 穿戴监测（侧边栏组：穿戴监测 / 运维中心）
|
||||
|
||||
@@ -242,13 +240,13 @@
|
||||
**功能说明：** 展示单个员工的全维度健康数据详情，涵盖健康现状、健康排查、穿戴监测三大板块。
|
||||
|
||||
**页面布局：**
|
||||
- 顶部员工信息卡片：头像（首字母）、姓名、工号、单位、部门
|
||||
- 顶部员工信息卡片：头像（首字母）、姓名、工号、单位、部门、年份筛选（下拉，默认当年）
|
||||
- 主Tab切换：健康现状 / 健康排查 / 穿戴监测
|
||||
|
||||
**健康现状Tab：**
|
||||
- 健康分类标签（如B类）
|
||||
- 医院信息网格：状态、医院、日期、联系方式
|
||||
- 慢性病表格：病名、确诊年份、医院、治疗情况
|
||||
- 住院信息网格：住院状态、所在医院、住院时间、住院次数、联系人、联系电话
|
||||
- 分类信息（如"B类慢病信息"）+ 慢性病表格：慢病名称、确诊年份、确诊医院、治疗情况
|
||||
|
||||
**健康排查Tab：**
|
||||
- 按参与状态筛选
|
||||
@@ -468,7 +466,7 @@
|
||||
|
||||
## 三、健康排查（含问卷管理、活动管理）
|
||||
|
||||
> **说明**：健康排查模块侧边栏包含三个菜单项：问卷管理、活动管理、活动统计。
|
||||
> **说明**：健康排查模块侧边栏包含两个菜单项：问卷管理、活动管理。
|
||||
|
||||
### 103. 问卷管理（health-checkup/survey-manage.html）
|
||||
|
||||
@@ -476,16 +474,20 @@
|
||||
|
||||
**功能说明：** 管理健康排查问卷，支持问卷的创建、编辑、预览和删除。
|
||||
|
||||
**筛选条件：** 问卷名称（输入框）、目标人群（多选：A~E类）
|
||||
**筛选条件：** 问卷名称（输入框）、适应人群（多选：A~E类）
|
||||
|
||||
**表格列：** 问卷名称、人群标签（彩色）、状态（开关：开启/关闭）、操作
|
||||
**表格列：** 问卷名称、适应人群（彩色标签：A类蓝色/B类绿色/C类橙色/D类紫色/E类青色）、问卷状态（开关：开启/关闭）、操作
|
||||
|
||||
**交互说明：**
|
||||
- 点击"新增问卷"打开新增弹窗
|
||||
- 点击"预览"打开预览弹窗（展示问卷基本信息+所有题目，含题型图标、选项和跳转逻辑提示）
|
||||
- 点击"编辑"打开编辑弹窗（问卷名称、人群多选、描述）
|
||||
- 操作列：预览、编辑、删除
|
||||
- 支持导出列表数据
|
||||
- 点击"编辑"跳转到编辑页面
|
||||
- 操作列：问卷预览、编辑、删除
|
||||
- 支持导出列表数据、导出问卷详情、查看导出任务
|
||||
|
||||
**新增/编辑弹窗字段：**
|
||||
- 问卷名称 *（输入框）
|
||||
- 适应人群 *（多选：A~E类）
|
||||
|
||||
---
|
||||
|
||||
@@ -496,7 +498,7 @@
|
||||
**功能说明：** 完整的问卷编辑器，支持创建和编辑健康排查问卷。
|
||||
|
||||
**页面布局：** 左右分栏布局
|
||||
- **左侧面板（吸顶）：** 问卷名称输入、目标人群多选（A~E类）、描述文本域
|
||||
- **左侧面板（吸顶）：** 问卷名称输入、适应人群多选（A~E类）、描述文本域
|
||||
- **右侧面板：** 题目列表区域，题目卡片
|
||||
- **底部保存栏：** 显示问卷名称或"未填写"，取消和保存按钮
|
||||
|
||||
@@ -519,15 +521,15 @@
|
||||
|
||||
**功能说明：** 健康排查活动的增删改查管理。
|
||||
|
||||
**筛选条件：** 活动名称（输入框）、所属单位（下拉）、活动状态（下拉：待开始/进行中/已完成）、日期范围
|
||||
**筛选条件：** 活动名称（输入框）、组织单位（下拉）、活动状态（下拉：待开始/进行中/已完成）、日期范围
|
||||
|
||||
**表格列：** 活动名称、所属单位、所属部门、日期范围、人员范围（点击可查看参与人员）、状态标签、负责人、联系电话、操作
|
||||
**表格列：** 活动名称、组织单位、组织部门、起止日期、人员筛选（点击可查看参与人员弹窗）、应参加人数、已参加人数（绿色）、未参加人数（红色）、活动状态（标签）、负责人、负责人电话、操作
|
||||
|
||||
**交互说明：**
|
||||
- 点击"新增活动"跳转到新增活动页面
|
||||
- 点击"人员范围"打开参与人员弹窗（含筛选、汇总统计、内嵌员工表格）
|
||||
- 操作列：详情、编辑、删除（带确认提示）
|
||||
- 支持导出列表数据
|
||||
- 点击"人员筛选"列打开参与人员弹窗（含筛选：单位/部门、员工姓名、员工编号、是否参加 + 汇总统计：应参加/已参加/未参加人数 + 内嵌员工表格）
|
||||
- 操作列：活动详情、编辑、删除（带确认提示）
|
||||
- 支持导出列表数据、查看导出任务
|
||||
|
||||
---
|
||||
|
||||
@@ -538,16 +540,20 @@
|
||||
**功能说明：** 创建或编辑健康排查活动。
|
||||
|
||||
**表单字段：**
|
||||
- 活动名称、所属单位（下拉）、所属部门（下拉）
|
||||
- 活动名称
|
||||
- 组织机构（树形联动选择器：展开单位后选择部门，支持多厂/多部门）
|
||||
- 问卷多选（显示每个问卷对应的人群标签）
|
||||
- 人员筛选：单选切换（全员/指定）。选择"指定"时：部门多选+员工选择器
|
||||
- 员工选择器弹窗：按部门、姓名、工号、人群类型筛选；复选选择，支持全选；显示单位/部门/姓名/工号/性别/年龄/人群
|
||||
- 日期范围、负责人（可搜索下拉，带手机号）、活动说明（文本域）
|
||||
- 文件上传区域（拖拽上传，10MB限制，支持PDF/Word/Excel/图片）
|
||||
- 员工选择器弹窗：按部门、姓名、工号、所属人群筛选；复选选择，支持全选；显示单位/部门/姓名/工号/性别/年龄/所属人群
|
||||
- 起止日期
|
||||
- 负责部门（下拉）
|
||||
- 负责人（可搜索下拉，带头像，含手机号自动填充）
|
||||
- 活动说明（文本域）
|
||||
- 活动文件上传区域（拖拽上传，10MB限制，支持PDF/Word/Excel/图片，单文件）
|
||||
- 底部保存栏：取消和保存按钮
|
||||
|
||||
**交互说明：**
|
||||
- 选择单位后启用部门和员工选择器
|
||||
- 选择组织机构后启用部门和员工选择器
|
||||
- 已选员工以可移除标签形式展示
|
||||
- 负责人搜索带头像样式选项
|
||||
|
||||
@@ -560,8 +566,8 @@
|
||||
**功能说明：** 查看活动详情和参与人员数据。
|
||||
|
||||
**页面布局：**
|
||||
- 面包屑导航：根据来源动态变化（来自activity-manage或activity-stat）
|
||||
- 信息卡片：4列网格展示所有活动字段，含问卷及人群标签
|
||||
- 面包屑导航：活动管理 / 活动详情
|
||||
- 信息卡片：4列网格展示所有活动字段（活动名称、组织单位、组织部门、起止日期、人员筛选、活动状态、负责人、负责人电话、活动说明、选择问卷（含人群标签）、活动文件）
|
||||
- Tab切换：已参加人员 / 未参加人员（带数量角标）
|
||||
|
||||
**已参加人员Tab：** 筛选（部门、姓名、工号）、导出按钮、表格列：单位、部门、姓名、工号、性别、年龄、已填问卷、填写时间、操作（问卷详情）
|
||||
@@ -572,22 +578,6 @@
|
||||
|
||||
---
|
||||
|
||||
### 108. 活动统计（health-checkup/activity-stat.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 查看各活动的参与统计情况。
|
||||
|
||||
**筛选条件：** 活动名称（输入框）、所属单位（多选）
|
||||
|
||||
**表格列：** 活动名称、所属单位、所属部门、日期范围、应参加人数、已参加人数（绿色）、未参加人数（红色）、状态标签、操作（详情）
|
||||
|
||||
**交互说明：**
|
||||
- 点击"详情"跳转到活动详情页
|
||||
- 支持导出列表数据
|
||||
|
||||
---
|
||||
|
||||
### 109. 心率异常(watch5)（wearable/ops/alarm-heartrate.html）
|
||||
|
||||
|
||||
@@ -704,11 +694,12 @@
|
||||
|
||||
**交互说明：**
|
||||
- 点击"新增设备"打开新增设备表单弹窗
|
||||
- 点击"批量入库导入"打开文件上传弹窗（Excel导入）
|
||||
- 点击"批量入库导入"打开文件上传弹窗（Excel导入，含所属单位选择）
|
||||
- 点击"批量绑定导入"打开批量绑定弹窗
|
||||
- 点击"查看导入任务"查看导入任务状态
|
||||
- 点击"导出列表数据"导出数据
|
||||
- 点击"查看导出任务"查看导出任务状态
|
||||
- 点击"绑定员工"打开绑定弹窗（搜索选择员工）
|
||||
- 点击"绑定员工"打开绑定弹窗（搜索选择员工，含绑定日期）
|
||||
- 点击"解除绑定"打开确认弹窗
|
||||
- 点击"绑定记录"打开该设备的绑定历史弹窗
|
||||
- 点击更多菜单→"设备配置"打开设备配置弹窗
|
||||
@@ -1500,7 +1491,7 @@ Tab标签：总览、心率、血氧、压力、睡眠、体温、锻炼、步
|
||||
|
||||
**表格列：** 设备名称、设备编码、所属单位、设备位置、设备详情、温度、湿度、CO₂、甲醛、PM2.5、PM10、总点击次数↕
|
||||
|
||||
> 注：实际页面各监测指标列未带"点击次数"后缀（与截图一致），多出"设备详情"列。
|
||||
> 注：表头一级分组为"移动端点击次数"，各监测指标列名直接使用指标名称（不带"点击次数"后缀）。各类型均包含"设备详情"列，位于指标列最前。
|
||||
|
||||
**交互说明：**
|
||||
- 表头支持排序
|
||||
@@ -1604,10 +1595,11 @@ Tab标签：总览、心率、血氧、压力、睡眠、体温、锻炼、步
|
||||
|
||||
#### APP记录页面差异
|
||||
|
||||
各类型的点击次数列对应各自监测指标：
|
||||
- 室外：温度/湿度/太阳辐射/PM2.5/PM10/照度/风速点击次数 + 总点击次数
|
||||
- 水质：温度/电导率/pH/盐度/电阻率/TDS点击次数 + 总点击次数
|
||||
- 花粉：榆属/松属/杨属/柏科/柳属/蒿属/藜科/苋科/花粉总数点击次数 + 总点击次数
|
||||
各类型的点击次数列对应各自监测指标（一级表头为"移动端点击次数"，二级列名直接使用指标名称，均含"设备详情"列）：
|
||||
- 室内：设备详情 + 温度/湿度/CO₂/甲醛/PM2.5/PM10 + 总点击次数（8列）
|
||||
- 室外：设备详情 + 温度/湿度/太阳辐射/PM2.5/PM10/照度/风速 + 总点击次数（9列）
|
||||
- 水质：设备详情 + 温度/电导率/PH/盐度/电阻率/TDS + 总点击次数（8列）
|
||||
- 花粉：设备详情 + 榆属/松属/杨属/柏科/柳属/蒿属/藜科/苋科/花粉总数 + 总点击次数（11列）
|
||||
|
||||
#### 历史监测详情页面差异
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 86 KiB |
@@ -193,7 +193,7 @@
|
||||
<td>IA-2024-001</td>
|
||||
<td>采油一厂</td>
|
||||
<td>办公楼1层大厅</td>
|
||||
<td><a href="indoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>245</td>
|
||||
<td>326</td><td>218</td><td>185</td><td>412</td><td>538</td><td>295</td><td>1974</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -201,7 +201,7 @@
|
||||
<td>IA-2024-002</td>
|
||||
<td>采油一厂</td>
|
||||
<td>办公楼2层会议室</td>
|
||||
<td><a href="indoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>178</td>
|
||||
<td>142</td><td>98</td><td>76</td><td>203</td><td>687</td><td>345</td><td>1551</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -209,7 +209,7 @@
|
||||
<td>IA-2024-003</td>
|
||||
<td>采油二厂</td>
|
||||
<td>新装修办公室3层</td>
|
||||
<td><a href="indoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>203</td>
|
||||
<td>89</td><td>56</td><td>112</td><td>856</td><td>234</td><td>128</td><td>1475</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -217,7 +217,7 @@
|
||||
<td>IA-2024-004</td>
|
||||
<td>采油二厂</td>
|
||||
<td>地下车库B1层</td>
|
||||
<td><a href="indoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>156</td>
|
||||
<td>67</td><td>45</td><td>523</td><td>38</td><td>156</td><td>89</td><td>918</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -225,7 +225,7 @@
|
||||
<td>IA-2024-005</td>
|
||||
<td>采油三厂</td>
|
||||
<td>生产车间1号</td>
|
||||
<td><a href="indoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>289</td>
|
||||
<td>458</td><td>312</td><td>267</td><td>189</td><td>723</td><td>456</td><td>2405</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -180,27 +180,27 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td-left">空气质量监测站-A01</td><td>OA-2024-001</td><td>采油一厂</td><td>厂区大门东侧</td>
|
||||
<td><a href="outdoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>245</td>
|
||||
<td>285</td><td>196</td><td>78</td><td>523</td><td>412</td><td>65</td><td>134</td><td>1693</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">PM10检测仪-B02</td><td>OA-2024-002</td><td>采油一厂</td><td>生产区北围栏</td>
|
||||
<td><a href="outdoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>189</td>
|
||||
<td>156</td><td>112</td><td>45</td><td>687</td><td>534</td><td>38</td><td>89</td><td>1661</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">臭氧检测仪-C01</td><td>OA-2024-003</td><td>采油二厂</td><td>办公楼楼顶</td>
|
||||
<td><a href="outdoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>134</td>
|
||||
<td>98</td><td>76</td><td>123</td><td>345</td><td>267</td><td>108</td><td>56</td><td>1073</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">气象参数监测仪-D01</td><td>OA-2024-004</td><td>采油三厂</td><td>气象观测场</td>
|
||||
<td><a href="outdoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>278</td>
|
||||
<td>412</td><td>328</td><td>256</td><td>189</td><td>145</td><td>215</td><td>367</td><td>1912</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">空气质量监测站-A03</td><td>OA-2024-005</td><td>采油三厂</td><td>储油罐区南侧</td>
|
||||
<td><a href="outdoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>198</td>
|
||||
<td>234</td><td>178</td><td>92</td><td>456</td><td>389</td><td>87</td><td>145</td><td>1581</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -182,27 +182,27 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td-left">花粉采样器-A01</td><td>PL-2024-001</td><td>采油一厂</td><td>办公区绿化带</td>
|
||||
<td><a href="pollen-device-list.html" class="link">设备详情</a></td>
|
||||
<td>198</td>
|
||||
<td>123</td><td>89</td><td>256</td><td>67</td><td>145</td><td>78</td><td>34</td><td>28</td><td>312</td><td>1132</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">花粉浓度监测仪-B01</td><td>PL-2024-002</td><td>采油一厂</td><td>厂区东侧林带</td>
|
||||
<td><a href="pollen-device-list.html" class="link">设备详情</a></td>
|
||||
<td>245</td>
|
||||
<td>198</td><td>156</td><td>423</td><td>112</td><td>234</td><td>145</td><td>56</td><td>42</td><td>478</td><td>1844</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">花粉自动计数仪-C01</td><td>PL-2024-003</td><td>采油二厂</td><td>生活区花园</td>
|
||||
<td><a href="pollen-device-list.html" class="link">设备详情</a></td>
|
||||
<td>267</td>
|
||||
<td>267</td><td>178</td><td>345</td><td>98</td><td>189</td><td>212</td><td>78</td><td>56</td><td>534</td><td>1957</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">综合气象花粉站-D01</td><td>PL-2024-004</td><td>采油二厂</td><td>气象观测场</td>
|
||||
<td><a href="pollen-device-list.html" class="link">设备详情</a></td>
|
||||
<td>312</td>
|
||||
<td>345</td><td>234</td><td>512</td><td>156</td><td>278</td><td>189</td><td>98</td><td>67</td><td>623</td><td>2502</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">花粉采样器-A03</td><td>PL-2024-005</td><td>采油三厂</td><td>杨树林防护带</td>
|
||||
<td><a href="pollen-device-list.html" class="link">设备详情</a></td>
|
||||
<td>356</td>
|
||||
<td>412</td><td>298</td><td>678</td><td>189</td><td>356</td><td>234</td><td>112</td><td>89</td><td>756</td><td>3124</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -179,27 +179,27 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td-left">多参数水质分析仪-A01</td><td>WQ-2024-001</td><td>采油一厂</td><td>生活区供水站</td>
|
||||
<td><a href="water-device-list.html" class="link">设备详情</a></td>
|
||||
<td>223</td>
|
||||
<td>312</td><td>245</td><td>478</td><td>156</td><td>89</td><td>203</td><td>1483</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">在线PH计-B02</td><td>WQ-2024-002</td><td>采油一厂</td><td>污水处理站出口</td>
|
||||
<td><a href="water-device-list.html" class="link">设备详情</a></td>
|
||||
<td>167</td>
|
||||
<td>178</td><td>134</td><td>623</td><td>98</td><td>67</td><td>145</td><td>1245</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">电导率监测仪-C01</td><td>WQ-2024-003</td><td>采油二厂</td><td>注水站入口</td>
|
||||
<td><a href="water-device-list.html" class="link">设备详情</a></td>
|
||||
<td>145</td>
|
||||
<td>95</td><td>567</td><td>112</td><td>234</td><td>189</td><td>78</td><td>1275</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">TDS检测仪-D01</td><td>WQ-2024-004</td><td>采油二厂</td><td>生产区储水池</td>
|
||||
<td><a href="water-device-list.html" class="link">设备详情</a></td>
|
||||
<td>189</td>
|
||||
<td>145</td><td>198</td><td>267</td><td>112</td><td>76</td><td>534</td><td>1332</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">多参数水质分析仪-A03</td><td>WQ-2024-005</td><td>采油三厂</td><td>排污口监测点</td>
|
||||
<td><a href="water-device-list.html" class="link">设备详情</a></td>
|
||||
<td>234</td>
|
||||
<td>256</td><td>312</td><td>345</td><td>189</td><td>123</td><td>278</td><td>1503</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -158,7 +158,6 @@
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item active">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
@@ -322,11 +321,6 @@ function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
/* 根据来源页面切换侧边栏选中和面包屑 */
|
||||
(function(){
|
||||
var ref = document.referrer || '';
|
||||
if(ref.indexOf('activity-stat.html') > -1){
|
||||
document.getElementById('sidebarActManage').classList.remove('active');
|
||||
document.getElementById('sidebarActStat').classList.add('active');
|
||||
document.getElementById('breadcrumb').innerHTML = '<a href="activity-stat.html">活动统计</a><span>/</span><span>活动详情</span>';
|
||||
}
|
||||
})();
|
||||
|
||||
/* ===== 数据 ===== */
|
||||
@@ -343,11 +337,11 @@ var surveyCrowdMap = {
|
||||
var surveyCrowdColors = {'A类':'tag-blue','B类':'tag-green','C类':'tag-orange','D类':'tag-purple','E类':'tag-cyan'};
|
||||
|
||||
var activities = [
|
||||
{id:1, name:'2026年上半年员工健康排查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-01-01', dateTo:'2026-03-31', personType:'全体人员', personCount:1280, status:'已完成', leader:'张明', phone:'13800001234', surveys:['健康记录问卷','职业健康排查问卷'], desc:'年度例行员工健康排查活动，覆盖全体员工。'},
|
||||
{id:2, name:'2026年Q2心理健康专项排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:356, status:'进行中', leader:'李华', phone:'13800005678', surveys:['心理健康评估问卷'], desc:'针对C类和D类人群的心理健康专项排查。'},
|
||||
{id:3, name:'2026年Q3职业健康排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-07-01', dateTo:'2026-09-30', personType:'指定人员', personCount:520, status:'待开始', leader:'王强', phone:'13800009012', surveys:['职业健康排查问卷','健康记录问卷'], desc:'第三季度职业健康专项排查，针对A类和B类人群。'},
|
||||
{id:4, name:'新员工入职健康基线调查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-06-01', dateTo:'2026-12-31', personType:'指定人员', personCount:85, status:'进行中', leader:'赵芳', phone:'13800003456', surveys:['新员工健康基线问卷'], desc:'2026年度新入职员工健康基线数据采集。'},
|
||||
{id:5, name:'慢病患者季度随访', org:'能源集团', dept:'工会', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:128, status:'进行中', leader:'孙丽', phone:'13800007890', surveys:['慢病管理随访问卷'], desc:'E类慢病患者第二季度定期随访。'}
|
||||
{id:1, name:'2026年上半年员工健康排查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-01-01', dateTo:'2026-03-31', personType:'全体人员', personCount:1280, status:'已完成', leader:'张明', phone:'13800001234', surveys:['健康记录问卷','职业健康排查问卷'], desc:'年度例行员工健康排查活动，覆盖全体员工。', file:'2026上半年健康排查通知.pdf'},
|
||||
{id:2, name:'2026年Q2心理健康专项排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:356, status:'进行中', leader:'李华', phone:'13800005678', surveys:['心理健康评估问卷'], desc:'针对C类和D类人群的心理健康专项排查。', file:'心理健康排查实施方案.pdf'},
|
||||
{id:3, name:'2026年Q3职业健康排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-07-01', dateTo:'2026-09-30', personType:'指定人员', personCount:520, status:'待开始', leader:'王强', phone:'13800009012', surveys:['职业健康排查问卷','健康记录问卷'], desc:'第三季度职业健康专项排查，针对A类和B类人群。', file:''},
|
||||
{id:4, name:'新员工入职健康基线调查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-06-01', dateTo:'2026-12-31', personType:'指定人员', personCount:85, status:'进行中', leader:'赵芳', phone:'13800003456', surveys:['新员工健康基线问卷'], desc:'2026年度新入职员工健康基线数据采集。', file:'新员工健康基线调查通知.pdf'},
|
||||
{id:5, name:'慢病患者季度随访', org:'能源集团', dept:'工会', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:128, status:'进行中', leader:'孙丽', phone:'13800007890', surveys:['慢病管理随访问卷'], desc:'E类慢病患者第二季度定期随访。', file:'慢病随访安排表.xlsx'}
|
||||
];
|
||||
|
||||
/* 参与人员模拟数据 */
|
||||
@@ -551,6 +545,12 @@ var currentTab = 'done';
|
||||
html += '<div class="info-item"><span class="info-item__label">负责人电话</span><span class="info-item__value">'+currentAct.phone+'</span></div>';
|
||||
html += '<div class="info-item"><span class="info-item__label">活动说明</span><span class="info-item__value">'+esc(currentAct.desc||'—')+'</span></div>';
|
||||
html += '<div class="info-item"><span class="info-item__label">选择问卷</span><span class="info-item__value">'+surveyNames+'</span></div>';
|
||||
// 活动文件
|
||||
var file = currentAct.file || '';
|
||||
var fileHtml = file ? '<a class="link" href="javascript:void(0)" onclick="viewFile(\''+esc(file)+'\')" style="display:inline-flex;align-items:center;gap:4px;">'+
|
||||
'<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 1h5l4 4v8H3V1z" stroke="currentColor" stroke-width="1.3"/><path d="M8 1v4h4" stroke="currentColor" stroke-width="1.3"/></svg>'+
|
||||
esc(file)+'</a>' : '—';
|
||||
html += '<div class="info-item info-item__half"><span class="info-item__label">活动文件</span><span class="info-item__value">'+fileHtml+'</span></div>';
|
||||
document.getElementById('infoGrid').innerHTML = html;
|
||||
|
||||
/* 计算已参加/未参加 */
|
||||
@@ -710,6 +710,11 @@ function closeModal(id){document.getElementById(id).classList.remove('show');}
|
||||
|
||||
function esc(s){return (s||'').replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>');}
|
||||
|
||||
/* ===== 查看活动文件 ===== */
|
||||
function viewFile(fileName){
|
||||
alert('查看文件：' + fileName + '\n（原型示意，实际项目中跳转至文件预览或下载）');
|
||||
}
|
||||
|
||||
/* 点击遮罩关闭弹窗 */
|
||||
document.querySelectorAll('.modal-mask').forEach(function(m){
|
||||
m.addEventListener('click',function(e){if(e.target === m) closeModal(m.id);});
|
||||
|
||||
@@ -159,7 +159,28 @@
|
||||
.emp-table__info{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.emp-table__info strong{color:var(--primary);}
|
||||
|
||||
/* 文件上传 */
|
||||
/* 树形选择器（组织机构） */
|
||||
.tree-select{position:relative;width:100%;}
|
||||
.tree-select__trigger{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);background:#fff;cursor:pointer;display:flex;align-items:center;user-select:none;transition:border-color .2s;box-sizing:border-box;position:relative;}
|
||||
.tree-select__trigger:hover{border-color:var(--primary);}
|
||||
.tree-select__trigger::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-top:5px solid #999;pointer-events:none;}
|
||||
.tree-select__text{color:var(--text-placeholder);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.tree-select__text.has-value{color:var(--text-primary);}
|
||||
.tree-select__panel{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:500;display:none;max-height:320px;overflow-y:auto;}
|
||||
.tree-select__panel.show{display:block;}
|
||||
.tree-select__group{border-bottom:1px solid #F5F5F5;}
|
||||
.tree-select__group:last-child{border-bottom:none;}
|
||||
.tree-select__group-header{display:flex;align-items:center;gap:6px;padding:9px 16px;font-size:var(--font-sm);font-weight:500;color:var(--text-primary);cursor:pointer;transition:background .1s;user-select:none;}
|
||||
.tree-select__group-header:hover{background:#F5F7FA;}
|
||||
.tree-select__group-arrow{width:16px;height:16px;display:flex;align-items:center;justify-content:center;transition:transform .2s;flex-shrink:0;color:var(--text-placeholder);}
|
||||
.tree-select__group-arrow.expanded{transform:rotate(90deg);}
|
||||
.tree-select__group-label{flex:1;}
|
||||
.tree-select__option{padding:8px 16px 8px 38px;font-size:var(--font-sm);cursor:pointer;transition:background .1s;display:none;color:var(--text-secondary);}
|
||||
.tree-select__option.show{display:block;}
|
||||
.tree-select__option:hover{background:#F5F7FA;}
|
||||
.tree-select__option.selected{color:var(--primary);background:var(--primary-light);}
|
||||
|
||||
/* 文件上传 */
|
||||
.upload-area{border:2px dashed var(--border);border-radius:var(--radius-md);padding:32px;text-align:center;cursor:pointer;transition:all .2s;background:#FAFAFA;}
|
||||
.upload-area:hover{border-color:var(--primary);background:var(--primary-light);}
|
||||
.upload-area svg{width:40px;height:40px;color:var(--text-placeholder);margin-bottom:8px;}
|
||||
@@ -208,7 +229,6 @@
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item active">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="form-card">
|
||||
@@ -223,34 +243,96 @@
|
||||
<input class="form-input" id="actName" placeholder="请输入活动名称">
|
||||
</div>
|
||||
|
||||
<!-- 组织单位 & 组织部门 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>组织单位 <span class="req">*</span></label>
|
||||
<select class="form-input" id="actOrg">
|
||||
<option value="">请选择组织单位</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
<option>第三采油厂</option>
|
||||
<option>第四采油厂</option>
|
||||
<option>第五采油厂</option>
|
||||
<option>第六采油厂</option>
|
||||
<option>第七采油厂</option>
|
||||
<option>第八采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>组织部门 <span class="req">*</span></label>
|
||||
<select class="form-input" id="actDept">
|
||||
<option value="">请选择组织部门</option>
|
||||
<option>人力资源部</option>
|
||||
<option>安全环保部</option>
|
||||
<option>工会</option>
|
||||
<option>生产技术部</option>
|
||||
<option>财务部</option>
|
||||
<option>信息中心</option>
|
||||
<option>综合办公室</option>
|
||||
</select>
|
||||
<!-- 组织机构（树形联动选择器） -->
|
||||
<div class="form-group">
|
||||
<label>组织机构 <span class="req">*</span></label>
|
||||
<div class="tree-select" id="orgTreeSelect">
|
||||
<input type="hidden" id="actOrgValue" value="">
|
||||
<div class="tree-select__trigger" onclick="toggleOrgTree()">
|
||||
<span class="tree-select__text" id="orgTreeText">请选择组织机构</span>
|
||||
</div>
|
||||
<div class="tree-select__panel" id="orgTreePanel">
|
||||
<div class="tree-select__group" data-unit="第一采油厂">
|
||||
<div class="tree-select__group-header" onclick="toggleOrgGroup(this, event)">
|
||||
<span class="tree-select__group-arrow">▶</span>
|
||||
<span class="tree-select__group-label">第一采油厂</span>
|
||||
</div>
|
||||
<div class="tree-select__option" data-val="第一采油厂|人力资源部" onclick="selectOrgOption(this,'第一采油厂 / 人力资源部')">人力资源部</div>
|
||||
<div class="tree-select__option" data-val="第一采油厂|安全环保部" onclick="selectOrgOption(this,'第一采油厂 / 安全环保部')">安全环保部</div>
|
||||
<div class="tree-select__option" data-val="第一采油厂|生产技术部" onclick="selectOrgOption(this,'第一采油厂 / 生产技术部')">生产技术部</div>
|
||||
<div class="tree-select__option" data-val="第一采油厂|综合办公室" onclick="selectOrgOption(this,'第一采油厂 / 综合办公室')">综合办公室</div>
|
||||
</div>
|
||||
<div class="tree-select__group" data-unit="第二采油厂">
|
||||
<div class="tree-select__group-header" onclick="toggleOrgGroup(this, event)">
|
||||
<span class="tree-select__group-arrow">▶</span>
|
||||
<span class="tree-select__group-label">第二采油厂</span>
|
||||
</div>
|
||||
<div class="tree-select__option" data-val="第二采油厂|工会" onclick="selectOrgOption(this,'第二采油厂 / 工会')">工会</div>
|
||||
<div class="tree-select__option" data-val="第二采油厂|生产技术部" onclick="selectOrgOption(this,'第二采油厂 / 生产技术部')">生产技术部</div>
|
||||
<div class="tree-select__option" data-val="第二采油厂|财务部" onclick="selectOrgOption(this,'第二采油厂 / 财务部')">财务部</div>
|
||||
<div class="tree-select__option" data-val="第二采油厂|信息中心" onclick="selectOrgOption(this,'第二采油厂 / 信息中心')">信息中心</div>
|
||||
</div>
|
||||
<div class="tree-select__group" data-unit="第三采油厂">
|
||||
<div class="tree-select__group-header" onclick="toggleOrgGroup(this, event)">
|
||||
<span class="tree-select__group-arrow">▶</span>
|
||||
<span class="tree-select__group-label">第三采油厂</span>
|
||||
</div>
|
||||
<div class="tree-select__option" data-val="第三采油厂|信息中心" onclick="selectOrgOption(this,'第三采油厂 / 信息中心')">信息中心</div>
|
||||
<div class="tree-select__option" data-val="第三采油厂|综合办公室" onclick="selectOrgOption(this,'第三采油厂 / 综合办公室')">综合办公室</div>
|
||||
<div class="tree-select__option" data-val="第三采油厂|人力资源部" onclick="selectOrgOption(this,'第三采油厂 / 人力资源部')">人力资源部</div>
|
||||
<div class="tree-select__option" data-val="第三采油厂|安全环保部" onclick="selectOrgOption(this,'第三采油厂 / 安全环保部')">安全环保部</div>
|
||||
</div>
|
||||
<div class="tree-select__group" data-unit="第四采油厂">
|
||||
<div class="tree-select__group-header" onclick="toggleOrgGroup(this, event)">
|
||||
<span class="tree-select__group-arrow">▶</span>
|
||||
<span class="tree-select__group-label">第四采油厂</span>
|
||||
</div>
|
||||
<div class="tree-select__option" data-val="第四采油厂|安全环保部" onclick="selectOrgOption(this,'第四采油厂 / 安全环保部')">安全环保部</div>
|
||||
<div class="tree-select__option" data-val="第四采油厂|生产技术部" onclick="selectOrgOption(this,'第四采油厂 / 生产技术部')">生产技术部</div>
|
||||
<div class="tree-select__option" data-val="第四采油厂|工会" onclick="selectOrgOption(this,'第四采油厂 / 工会')">工会</div>
|
||||
<div class="tree-select__option" data-val="第四采油厂|财务部" onclick="selectOrgOption(this,'第四采油厂 / 财务部')">财务部</div>
|
||||
</div>
|
||||
<div class="tree-select__group" data-unit="第五采油厂">
|
||||
<div class="tree-select__group-header" onclick="toggleOrgGroup(this, event)">
|
||||
<span class="tree-select__group-arrow">▶</span>
|
||||
<span class="tree-select__group-label">第五采油厂</span>
|
||||
</div>
|
||||
<div class="tree-select__option" data-val="第五采油厂|工会" onclick="selectOrgOption(this,'第五采油厂 / 工会')">工会</div>
|
||||
<div class="tree-select__option" data-val="第五采油厂|财务部" onclick="selectOrgOption(this,'第五采油厂 / 财务部')">财务部</div>
|
||||
<div class="tree-select__option" data-val="第五采油厂|人力资源部" onclick="selectOrgOption(this,'第五采油厂 / 人力资源部')">人力资源部</div>
|
||||
<div class="tree-select__option" data-val="第五采油厂|生产技术部" onclick="selectOrgOption(this,'第五采油厂 / 生产技术部')">生产技术部</div>
|
||||
</div>
|
||||
<div class="tree-select__group" data-unit="第六采油厂">
|
||||
<div class="tree-select__group-header" onclick="toggleOrgGroup(this, event)">
|
||||
<span class="tree-select__group-arrow">▶</span>
|
||||
<span class="tree-select__group-label">第六采油厂</span>
|
||||
</div>
|
||||
<div class="tree-select__option" data-val="第六采油厂|信息中心" onclick="selectOrgOption(this,'第六采油厂 / 信息中心')">信息中心</div>
|
||||
<div class="tree-select__option" data-val="第六采油厂|综合办公室" onclick="selectOrgOption(this,'第六采油厂 / 综合办公室')">综合办公室</div>
|
||||
<div class="tree-select__option" data-val="第六采油厂|安全环保部" onclick="selectOrgOption(this,'第六采油厂 / 安全环保部')">安全环保部</div>
|
||||
<div class="tree-select__option" data-val="第六采油厂|生产技术部" onclick="selectOrgOption(this,'第六采油厂 / 生产技术部')">生产技术部</div>
|
||||
</div>
|
||||
<div class="tree-select__group" data-unit="第七采油厂">
|
||||
<div class="tree-select__group-header" onclick="toggleOrgGroup(this, event)">
|
||||
<span class="tree-select__group-arrow">▶</span>
|
||||
<span class="tree-select__group-label">第七采油厂</span>
|
||||
</div>
|
||||
<div class="tree-select__option" data-val="第七采油厂|人力资源部" onclick="selectOrgOption(this,'第七采油厂 / 人力资源部')">人力资源部</div>
|
||||
<div class="tree-select__option" data-val="第七采油厂|安全环保部" onclick="selectOrgOption(this,'第七采油厂 / 安全环保部')">安全环保部</div>
|
||||
<div class="tree-select__option" data-val="第七采油厂|工会" onclick="selectOrgOption(this,'第七采油厂 / 工会')">工会</div>
|
||||
<div class="tree-select__option" data-val="第七采油厂|信息中心" onclick="selectOrgOption(this,'第七采油厂 / 信息中心')">信息中心</div>
|
||||
</div>
|
||||
<div class="tree-select__group" data-unit="第八采油厂">
|
||||
<div class="tree-select__group-header" onclick="toggleOrgGroup(this, event)">
|
||||
<span class="tree-select__group-arrow">▶</span>
|
||||
<span class="tree-select__group-label">第八采油厂</span>
|
||||
</div>
|
||||
<div class="tree-select__option" data-val="第八采油厂|生产技术部" onclick="selectOrgOption(this,'第八采油厂 / 生产技术部')">生产技术部</div>
|
||||
<div class="tree-select__option" data-val="第八采油厂|工会" onclick="selectOrgOption(this,'第八采油厂 / 工会')">工会</div>
|
||||
<div class="tree-select__option" data-val="第八采油厂|财务部" onclick="selectOrgOption(this,'第八采油厂 / 财务部')">财务部</div>
|
||||
<div class="tree-select__option" data-val="第八采油厂|综合办公室" onclick="selectOrgOption(this,'第八采油厂 / 综合办公室')">综合办公室</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -322,6 +404,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 负责部门 -->
|
||||
<div class="form-group">
|
||||
<label>负责部门 <span class="req">*</span></label>
|
||||
<select class="form-input" id="responsibleDept">
|
||||
<option value="">请选择负责部门</option>
|
||||
<option>人力资源部</option>
|
||||
<option>安全环保部</option>
|
||||
<option>工会</option>
|
||||
<option>生产技术部</option>
|
||||
<option>财务部</option>
|
||||
<option>信息中心</option>
|
||||
<option>综合办公室</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 负责人 -->
|
||||
<div class="form-group">
|
||||
<label>负责人 <span class="req">*</span></label>
|
||||
@@ -350,9 +447,9 @@
|
||||
<div class="upload-area" id="uploadArea" onclick="document.getElementById('fileInput').click()">
|
||||
<svg viewBox="0 0 40 40" fill="none"><path d="M20 8v24M12 16l8-8 8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 28v4a2 2 0 002 2h20a2 2 0 002-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<div class="upload-area__text">点击或拖拽文件到此区域上传</div>
|
||||
<div class="upload-area__hint">支持 PDF、Word、Excel、图片等格式，单个文件不超过 10MB</div>
|
||||
<div class="upload-area__hint">支持 PDF、Word、Excel、图片等格式，文件不超过 10MB</div>
|
||||
</div>
|
||||
<input type="file" id="fileInput" style="display:none" multiple onchange="handleFiles(this.files)">
|
||||
<input type="file" id="fileInput" style="display:none" onchange="handleFile(this.files)">
|
||||
<div class="file-list" id="fileList"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -450,6 +547,114 @@
|
||||
function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
/* ===== 组织机构树形选择器 ===== */
|
||||
// 从组织机构值中提取单位名称（兼容"单位|部门"格式）
|
||||
function getOrgUnit(val){
|
||||
var idx = val.indexOf('|');
|
||||
return idx > -1 ? val.substring(0, idx) : val;
|
||||
}
|
||||
|
||||
// 从组织机构值中提取部门名称（兼容"单位|部门"格式）
|
||||
function getOrgDept(val){
|
||||
var idx = val.indexOf('|');
|
||||
return idx > -1 ? val.substring(idx + 1) : '';
|
||||
}
|
||||
|
||||
// 点击触发器展开/收起下拉面板
|
||||
function toggleOrgTree(){
|
||||
var panel = document.getElementById('orgTreePanel');
|
||||
var isShow = panel.classList.contains('show');
|
||||
closeAllPanels();
|
||||
if(!isShow) panel.classList.add('show');
|
||||
}
|
||||
|
||||
// 点击单位标题展开/收起部门列表，或选中该单位
|
||||
function toggleOrgGroup(headerEl, event){
|
||||
event.stopPropagation();
|
||||
var arrow = headerEl.querySelector('.tree-select__group-arrow');
|
||||
var group = headerEl.parentElement;
|
||||
var options = group.querySelectorAll('.tree-select__option');
|
||||
var isExpanded = arrow.classList.contains('expanded');
|
||||
if(isExpanded){
|
||||
// 收起：隐藏部门选项，并选中该单位
|
||||
arrow.classList.remove('expanded');
|
||||
options.forEach(function(opt){ opt.classList.remove('show'); });
|
||||
var unitName = group.getAttribute('data-unit');
|
||||
selectOrgOptionInner(unitName, unitName);
|
||||
} else {
|
||||
// 收起其他已展开的分组
|
||||
document.querySelectorAll('.tree-select__group-arrow.expanded').forEach(function(a){
|
||||
a.classList.remove('expanded');
|
||||
});
|
||||
document.querySelectorAll('.tree-select__option.show').forEach(function(o){
|
||||
o.classList.remove('show');
|
||||
});
|
||||
// 展开当前分组
|
||||
arrow.classList.add('expanded');
|
||||
options.forEach(function(opt){ opt.classList.add('show'); });
|
||||
}
|
||||
}
|
||||
|
||||
// 点击部门选项选中
|
||||
function selectOrgOption(el, displayText){
|
||||
var val = el.getAttribute('data-val');
|
||||
selectOrgOptionInner(val, displayText);
|
||||
}
|
||||
|
||||
// 内部选中逻辑
|
||||
function selectOrgOptionInner(val, displayText){
|
||||
var hidden = document.getElementById('actOrgValue');
|
||||
var oldVal = hidden.value;
|
||||
hidden.value = val;
|
||||
// 更新触发器显示
|
||||
var textEl = document.getElementById('orgTreeText');
|
||||
textEl.textContent = displayText;
|
||||
textEl.className = 'tree-select__text has-value';
|
||||
// 更新面板选中态
|
||||
document.querySelectorAll('#orgTreePanel .tree-select__option.selected').forEach(function(o){
|
||||
o.classList.remove('selected');
|
||||
});
|
||||
var targetOpt = document.querySelector('#orgTreePanel .tree-select__option[data-val="' + val + '"]');
|
||||
if(targetOpt){ targetOpt.classList.add('selected'); }
|
||||
// 关闭面板
|
||||
document.getElementById('orgTreePanel').classList.remove('show');
|
||||
// 触发change事件
|
||||
if(oldVal !== val){
|
||||
updateOrgDependent();
|
||||
}
|
||||
}
|
||||
|
||||
// 监听组织机构变化，同步更新部门和员工选择器状态
|
||||
function updateOrgDependent(){
|
||||
var orgVal = document.getElementById('actOrgValue').value;
|
||||
var orgUnit = getOrgUnit(orgVal);
|
||||
var deptTrigger = document.getElementById('deptTrigger');
|
||||
if(orgUnit){
|
||||
deptTrigger.classList.remove('disabled');
|
||||
if(selectedDepts.length===0){
|
||||
deptTrigger.textContent = '请选择部门（可多选）';
|
||||
}
|
||||
} else {
|
||||
deptTrigger.classList.add('disabled');
|
||||
deptTrigger.textContent = '请先选择组织机构';
|
||||
selectedDepts = [];
|
||||
updateDeptTrigger();
|
||||
}
|
||||
var empTrigger = document.getElementById('empTrigger');
|
||||
var text = document.getElementById('empTriggerText');
|
||||
if(orgUnit){
|
||||
empTrigger.classList.remove('disabled');
|
||||
text.className = 'emp-trigger__text';
|
||||
text.textContent = '点击选择员工';
|
||||
} else {
|
||||
empTrigger.classList.add('disabled');
|
||||
text.className = 'emp-trigger__text';
|
||||
text.textContent = '请先选择组织机构';
|
||||
selectedEmployees = [];
|
||||
renderSelectedPersons();
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 问卷多选 ===== */
|
||||
var selectedSurveys = [];
|
||||
|
||||
@@ -498,9 +703,9 @@ function removeSurveyTag(val){
|
||||
var selectedDepts = [];
|
||||
|
||||
function toggleDeptPanel(){
|
||||
var org = document.getElementById('actOrg').value;
|
||||
var org = document.getElementById('actOrgValue').value;
|
||||
if(!org){
|
||||
showToast('请先选择组织单位');
|
||||
showToast('请先选择组织机构');
|
||||
return;
|
||||
}
|
||||
var panel = document.getElementById('deptPanel');
|
||||
@@ -579,71 +784,20 @@ var mockEmployees = [
|
||||
{org:'第八采油厂',dept:'工会',name:'罗琳',id:'015123',gender:'女',age:32,crowd:'B类'},
|
||||
];
|
||||
|
||||
// 监听组织单位变化，同步更新部门和员工选择器状态
|
||||
document.getElementById('actOrg').addEventListener('change', updateOrgDependent);
|
||||
|
||||
function updateOrgDependent(){
|
||||
var org = document.getElementById('actOrg').value;
|
||||
// 更新部门选择器状态
|
||||
var deptTrigger = document.getElementById('deptTrigger');
|
||||
if(org){
|
||||
deptTrigger.classList.remove('disabled');
|
||||
if(selectedDepts.length === 0){
|
||||
deptTrigger.textContent = '请选择部门（可多选）';
|
||||
}
|
||||
} else {
|
||||
deptTrigger.classList.add('disabled');
|
||||
deptTrigger.textContent = '请先选择组织单位';
|
||||
// 清空已选部门
|
||||
selectedDepts = [];
|
||||
updateDeptTrigger();
|
||||
}
|
||||
// 更新员工选择器状态
|
||||
var empTrigger = document.getElementById('empTrigger');
|
||||
var text = document.getElementById('empTriggerText');
|
||||
if(org){
|
||||
empTrigger.classList.remove('disabled');
|
||||
text.className = 'emp-trigger__text';
|
||||
text.textContent = '点击选择员工';
|
||||
} else {
|
||||
empTrigger.classList.add('disabled');
|
||||
text.className = 'emp-trigger__text';
|
||||
text.textContent = '请先选择组织单位';
|
||||
// 清空已选员工
|
||||
selectedEmployees = [];
|
||||
renderSelectedPersons();
|
||||
}
|
||||
}
|
||||
|
||||
// 打开员工弹窗
|
||||
function openEmpModal(){
|
||||
var org = document.getElementById('actOrg').value;
|
||||
if(!org){
|
||||
showToast('请先选择组织单位');
|
||||
return;
|
||||
}
|
||||
// 初始化临时选中列表为当前已选
|
||||
tempSelectedEmps = selectedEmployees.slice();
|
||||
renderEmpTable();
|
||||
document.getElementById('empModal').classList.add('show');
|
||||
}
|
||||
|
||||
// 关闭员工弹窗
|
||||
function closeEmpModal(){
|
||||
document.getElementById('empModal').classList.remove('show');
|
||||
}
|
||||
|
||||
// 渲染员工表格
|
||||
function renderEmpTable(){
|
||||
var org = document.getElementById('actOrg').value;
|
||||
var orgVal = document.getElementById('actOrgValue').value;
|
||||
var orgUnit = getOrgUnit(orgVal);
|
||||
var orgDept = getOrgDept(orgVal);
|
||||
var filterDept = document.getElementById('empFilterDept').value;
|
||||
var filterName = document.getElementById('empFilterName').value.trim().toLowerCase();
|
||||
var filterId = document.getElementById('empFilterId').value.trim().toLowerCase();
|
||||
var filterCrowd = document.getElementById('empFilterCrowd').value;
|
||||
|
||||
// 根据组织单位筛选
|
||||
// 根据组织机构筛选
|
||||
var filtered = mockEmployees.filter(function(e){
|
||||
if(e.org !== org) return false;
|
||||
if(e.org !== orgUnit) return false;
|
||||
if(orgDept && e.dept !== orgDept) return false;
|
||||
if(filterDept && e.dept !== filterDept) return false;
|
||||
if(filterName && e.name.indexOf(filterName) === -1) return false;
|
||||
if(filterId && e.id.toLowerCase().indexOf(filterId) === -1) return false;
|
||||
@@ -814,36 +968,37 @@ function removeEmp(empId){
|
||||
renderSelectedPersons();
|
||||
}
|
||||
|
||||
/* ===== 文件上传 ===== */
|
||||
var uploadedFiles = [];
|
||||
/* ===== 文件上传（仅支持单个文件） ===== */
|
||||
var uploadedFile = null;
|
||||
|
||||
function handleFiles(files){
|
||||
for(var i=0;i<files.length;i++){
|
||||
var f = files[i];
|
||||
if(f.size > 10*1024*1024){alert('文件「'+f.name+'」超过10MB限制');continue;}
|
||||
uploadedFiles.push({name:f.name, size:f.size});
|
||||
}
|
||||
function handleFile(files){
|
||||
if(!files || files.length === 0) return;
|
||||
var f = files[0];
|
||||
if(f.size > 10*1024*1024){alert('文件「'+f.name+'」超过10MB限制');return;}
|
||||
uploadedFile = {name:f.name, size:f.size};
|
||||
renderFileList();
|
||||
document.getElementById('fileInput').value = '';
|
||||
}
|
||||
|
||||
function renderFileList(){
|
||||
var container = document.getElementById('fileList');
|
||||
var html = '';
|
||||
uploadedFiles.forEach(function(f,i){
|
||||
var sizeStr = f.size > 1024*1024 ? (f.size/(1024*1024)).toFixed(1)+' MB' : (f.size/1024).toFixed(0)+' KB';
|
||||
html += '<div class="file-item">';
|
||||
html += '<div class="file-item__icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 1h6l4 4v10H3V1z" stroke="#1890FF" stroke-width="1.3"/><path d="M9 1v4h4" stroke="#1890FF" stroke-width="1.3"/></svg></div>';
|
||||
html += '<span class="file-item__name">'+esc(f.name)+'</span>';
|
||||
html += '<span class="file-item__size">'+sizeStr+'</span>';
|
||||
html += '<button class="file-item__del" onclick="removeFile('+i+')" title="删除"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>';
|
||||
html += '</div>';
|
||||
});
|
||||
if(!uploadedFile){
|
||||
container.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
var f = uploadedFile;
|
||||
var sizeStr = f.size > 1024*1024 ? (f.size/(1024*1024)).toFixed(1)+' MB' : (f.size/1024).toFixed(0)+' KB';
|
||||
var html = '<div class="file-item">';
|
||||
html += '<div class="file-item__icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 1h6l4 4v10H3V1z" stroke="#1890FF" stroke-width="1.3"/><path d="M9 1v4h4" stroke="#1890FF" stroke-width="1.3"/></svg></div>';
|
||||
html += '<span class="file-item__name">'+esc(f.name)+'</span>';
|
||||
html += '<span class="file-item__size">'+sizeStr+'</span>';
|
||||
html += '<button class="file-item__del" onclick="removeFile()" title="删除"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>';
|
||||
html += '</div>';
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function removeFile(idx){
|
||||
uploadedFiles.splice(idx, 1);
|
||||
function removeFile(){
|
||||
uploadedFile = null;
|
||||
renderFileList();
|
||||
}
|
||||
|
||||
@@ -854,7 +1009,7 @@ function removeFile(idx){
|
||||
area.addEventListener('dragleave', function(){area.style.borderColor='';area.style.background='';});
|
||||
area.addEventListener('drop', function(e){
|
||||
e.preventDefault();area.style.borderColor='';area.style.background='';
|
||||
handleFiles(e.dataTransfer.files);
|
||||
handleFile(e.dataTransfer.files);
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -863,6 +1018,7 @@ function closeAllPanels(){
|
||||
document.getElementById('surveyPanel').classList.remove('show');
|
||||
document.getElementById('deptPanel').classList.remove('show');
|
||||
document.getElementById('leaderPanel').classList.remove('show');
|
||||
document.getElementById('orgTreePanel').classList.remove('show');
|
||||
}
|
||||
|
||||
/* ===== 保存 ===== */
|
||||
@@ -877,9 +1033,10 @@ function saveActivity(){
|
||||
var dateFrom = document.getElementById('dateFrom').value;
|
||||
var dateTo = document.getElementById('dateTo').value;
|
||||
if(!dateFrom||!dateTo){alert('请选择起止日期');return;}
|
||||
var org = document.getElementById('actOrg').value.trim();
|
||||
var dept = document.getElementById('actDept').value.trim();
|
||||
if(!org||!dept){alert('请输入组织单位和组织部门');return;}
|
||||
var org = document.getElementById('actOrgValue').value;
|
||||
var responsibleDept = document.getElementById('responsibleDept').value;
|
||||
if(!org){alert('请选择组织机构');return;}
|
||||
if(!responsibleDept){alert('请选择负责部门');return;}
|
||||
if(!selectedLeader){alert('请选择负责人');return;}
|
||||
showToast('保存成功！');
|
||||
setTimeout(function(){window.location.href='activity-manage.html';},1000);
|
||||
@@ -899,6 +1056,7 @@ document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('#surveySelect')) document.getElementById('surveyPanel').classList.remove('show');
|
||||
if(!e.target.closest('#deptSelect')) document.getElementById('deptPanel').classList.remove('show');
|
||||
if(!e.target.closest('#leaderSelect')) document.getElementById('leaderPanel').classList.remove('show');
|
||||
if(!e.target.closest('#orgTreeSelect')) document.getElementById('orgTreePanel').classList.remove('show');
|
||||
});
|
||||
|
||||
// 点击弹窗遮罩关闭
|
||||
|
||||
@@ -133,7 +133,6 @@
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item active">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
@@ -193,17 +192,20 @@
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:18%;">活动名称</th>
|
||||
<th style="width:10%;">组织单位</th>
|
||||
<th style="width:10%;">组织部门</th>
|
||||
<th style="width:12%;">起止日期</th>
|
||||
<th style="width:10%;">人员筛选</th>
|
||||
<th style="width:8%;">活动状态</th>
|
||||
<th style="width:8%;">负责人</th>
|
||||
<th style="width:10%;">负责人电话</th>
|
||||
<th style="width:14%;">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width:14%;">活动名称</th>
|
||||
<th style="width:8%;">组织单位</th>
|
||||
<th style="width:8%;">组织部门</th>
|
||||
<th style="width:10%;">起止日期</th>
|
||||
<th style="width:8%;">人员筛选</th>
|
||||
<th style="width:8%;">应参加人数</th>
|
||||
<th style="width:8%;">已参加人数</th>
|
||||
<th style="width:8%;">未参加人数</th>
|
||||
<th style="width:6%;">活动状态</th>
|
||||
<th style="width:6%;">负责人</th>
|
||||
<th style="width:8%;">负责人电话</th>
|
||||
<th style="width:8%;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
@@ -298,13 +300,13 @@ function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
/* ===== 数据 ===== */
|
||||
var statusMap = {'待开始':'tag-blue','进行中':'tag-orange','已完成':'tag-green'};
|
||||
|
||||
var activities = [
|
||||
{id:1, name:'2026年上半年员工健康排查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-01-01', dateTo:'2026-03-31', personType:'全体人员', personCount:1280, status:'已完成', leader:'张明', phone:'13800001234', surveys:['健康记录问卷','职业健康排查问卷'], desc:'年度例行员工健康排查活动，覆盖全体员工。'},
|
||||
{id:2, name:'2026年Q2心理健康专项排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:356, status:'进行中', leader:'李华', phone:'13800005678', surveys:['心理健康评估问卷'], desc:'针对C类和D类人群的心理健康专项排查。'},
|
||||
{id:3, name:'2026年Q3职业健康排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-07-01', dateTo:'2026-09-30', personType:'指定人员', personCount:520, status:'待开始', leader:'王强', phone:'13800009012', surveys:['职业健康排查问卷','健康记录问卷'], desc:'第三季度职业健康专项排查，针对A类和B类人群。'},
|
||||
{id:4, name:'新员工入职健康基线调查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-06-01', dateTo:'2026-12-31', personType:'指定人员', personCount:85, status:'进行中', leader:'赵芳', phone:'13800003456', surveys:['新员工健康基线问卷'], desc:'2026年度新入职员工健康基线数据采集。'},
|
||||
{id:5, name:'慢病患者季度随访', org:'能源集团', dept:'工会', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:128, status:'进行中', leader:'孙丽', phone:'13800007890', surveys:['慢病管理随访问卷'], desc:'E类慢病患者第二季度定期随访。'}
|
||||
];
|
||||
var activities = [
|
||||
{id:1, name:'2026年上半年员工健康排查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-01-01', dateTo:'2026-03-31', personType:'全体人员', personCount:1280, doneCount:1150, status:'已完成', leader:'张明', phone:'13800001234', surveys:['健康记录问卷','职业健康排查问卷'], desc:'年度例行员工健康排查活动，覆盖全体员工。'},
|
||||
{id:2, name:'2026年Q2心理健康专项排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:356, doneCount:280, status:'进行中', leader:'李华', phone:'13800005678', surveys:['心理健康评估问卷'], desc:'针对C类和D类人群的心理健康专项排查。'},
|
||||
{id:3, name:'2026年Q3职业健康排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-07-01', dateTo:'2026-09-30', personType:'指定人员', personCount:520, doneCount:0, status:'待开始', leader:'王强', phone:'13800009012', surveys:['职业健康排查问卷','健康记录问卷'], desc:'第三季度职业健康专项排查，针对A类和B类人群。'},
|
||||
{id:4, name:'新员工入职健康基线调查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-06-01', dateTo:'2026-12-31', personType:'指定人员', personCount:85, doneCount:60, status:'进行中', leader:'赵芳', phone:'13800003456', surveys:['新员工健康基线问卷'], desc:'2026年度新入职员工健康基线数据采集。'},
|
||||
{id:5, name:'慢病患者季度随访', org:'能源集团', dept:'工会', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:128, doneCount:98, status:'进行中', leader:'孙丽', phone:'13800007890', surveys:['慢病管理随访问卷'], desc:'E类慢病患者第二季度定期随访。'}
|
||||
];
|
||||
|
||||
/* 参与人员模拟数据 */
|
||||
var allPersons = [
|
||||
@@ -331,30 +333,34 @@ var allPersons = [
|
||||
];
|
||||
|
||||
/* ===== 渲染表格 ===== */
|
||||
function renderTable(data){
|
||||
var html = '';
|
||||
data.forEach(function(a){
|
||||
html += '<tr>';
|
||||
html += '<td>'+esc(a.name)+'</td>';
|
||||
html += '<td>'+esc(a.org)+'</td>';
|
||||
html += '<td>'+esc(a.dept)+'</td>';
|
||||
html += '<td>'+a.dateFrom+' ~ '+a.dateTo+'</td>';
|
||||
html += '<td><span class="link link-clickable" onclick="openPersonModal('+a.id+')">'+a.personCount+'人</span></td>';
|
||||
html += '<td><span class="tag '+statusMap[a.status]+'">'+a.status+'</span></td>';
|
||||
html += '<td>'+esc(a.leader)+'</td>';
|
||||
html += '<td>'+a.phone+'</td>';
|
||||
html += '<td>';
|
||||
html += '<button class="link" onclick="openDetail('+a.id+')">活动详情</button>';
|
||||
html += '<span class="link-separator">|</span>';
|
||||
html += '<button class="link" onclick="openEdit('+a.id+')">编辑</button>';
|
||||
html += '<span class="link-separator">|</span>';
|
||||
html += '<button class="link link-danger" onclick="deleteActivity('+a.id+')">删除</button>';
|
||||
html += '</td></tr>';
|
||||
});
|
||||
document.getElementById('tbody').innerHTML = html || '<tr><td colspan="9" style="text-align:center;padding:40px;color:var(--text-placeholder);">暂无数据</td></tr>';
|
||||
document.getElementById('totalCount').textContent = '共 '+data.length+' 条数据';
|
||||
document.getElementById('pageTotal').textContent = '共 '+data.length+' 条数据';
|
||||
}
|
||||
function renderTable(data){
|
||||
var html = '';
|
||||
data.forEach(function(a){
|
||||
var pending = a.personCount - (a.doneCount||0);
|
||||
html += '<tr>';
|
||||
html += '<td>'+esc(a.name)+'</td>';
|
||||
html += '<td>'+esc(a.org)+'</td>';
|
||||
html += '<td>'+esc(a.dept)+'</td>';
|
||||
html += '<td>'+a.dateFrom+' ~ '+a.dateTo+'</td>';
|
||||
html += '<td><span class="link link-clickable" onclick="openPersonModal('+a.id+')">'+esc(a.personType)+'</span></td>';
|
||||
html += '<td>'+a.personCount+'</td>';
|
||||
html += '<td style="color:var(--success);">'+(a.doneCount||0)+'</td>';
|
||||
html += '<td style="color:var(--danger);">'+pending+'</td>';
|
||||
html += '<td><span class="tag '+statusMap[a.status]+'">'+a.status+'</span></td>';
|
||||
html += '<td>'+esc(a.leader)+'</td>';
|
||||
html += '<td>'+a.phone+'</td>';
|
||||
html += '<td>';
|
||||
html += '<button class="link" onclick="openDetail('+a.id+')">活动详情</button>';
|
||||
html += '<span class="link-separator">|</span>';
|
||||
html += '<button class="link" onclick="openEdit('+a.id+')">编辑</button>';
|
||||
html += '<span class="link-separator">|</span>';
|
||||
html += '<button class="link link-danger" onclick="deleteActivity('+a.id+')">删除</button>';
|
||||
html += '</td></tr>';
|
||||
});
|
||||
document.getElementById('tbody').innerHTML = html || '<tr><td colspan="12" style="text-align:center;padding:40px;color:var(--text-placeholder);">暂无数据</td></tr>';
|
||||
document.getElementById('totalCount').textContent = '共 '+data.length+' 条数据';
|
||||
document.getElementById('pageTotal').textContent = '共 '+data.length+' 条数据';
|
||||
}
|
||||
|
||||
/* ===== 筛选 ===== */
|
||||
function filterTable(){
|
||||
|
||||
@@ -1,317 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康监测 - 活动统计 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap;background:#fff;padding:16px 24px;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-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
/* 多选下拉 */
|
||||
.multi-select{position:relative;display:inline-block;min-width:200px;}
|
||||
.multi-select__trigger{min-height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 32px 4px 8px;font-size:var(--font-sm);background:#fff;cursor:pointer;display:flex;align-items:center;gap:4px;flex-wrap:wrap;user-select:none;position:relative;}
|
||||
.multi-select__trigger::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-top:5px solid #999;pointer-events:none;}
|
||||
.multi-select__trigger.placeholder{padding:0 32px 0 12px;color:var(--text-placeholder);align-items:center;}
|
||||
.multi-select__trigger .sel-tag{display:inline-flex;align-items:center;gap:2px;background:var(--primary-light);color:var(--primary);padding:1px 6px;border-radius:var(--radius-sm);font-size:var(--font-xs);line-height:1.6;}
|
||||
.multi-select__trigger .sel-tag .tag-x{cursor:pointer;font-size:12px;line-height:1;margin-left:2px;}
|
||||
.multi-select__trigger .sel-tag .tag-x:hover{color:var(--danger);}
|
||||
.multi-select__panel{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:300;display:none;min-width:200px;padding:8px 0;}
|
||||
.multi-select__panel.show{display:block;}
|
||||
.multi-select__opt{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:var(--font-sm);cursor:pointer;transition:background .1s;}
|
||||
.multi-select__opt:hover{background:#F5F7FA;}
|
||||
.multi-select__opt.checked{color:var(--primary);background:var(--primary-light);}
|
||||
.multi-select__cb{width:14px;height:14px;border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
|
||||
.multi-select__cb.checked{background:var(--primary);border-color:var(--primary);}
|
||||
.multi-select__cb.checked::after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-2px;}
|
||||
/* 工具栏 */
|
||||
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
|
||||
.toolbar .spacer{flex:1;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--text-primary);transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.btn-primary:hover{background:#40a9ff;border-color:#40a9ff;color:#fff;}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;background:none;border:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-separator{color:var(--border);margin:0 6px;user-select:none;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px 24px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.pagination__pages{display:flex;align-items:center;gap:4px;}
|
||||
.page-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;}
|
||||
.page-item:hover{color:var(--primary);}
|
||||
.page-item.active{background:var(--primary);color:#fff;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="../archive-personal.html">档案</a>
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="survey-manage.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item active">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">活动名称</span>
|
||||
<input class="filter-input" id="filterName" placeholder="请输入活动名称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">组织单位</span>
|
||||
<div class="multi-select" id="orgSelect">
|
||||
<div class="multi-select__trigger placeholder" onclick="toggleOrgSelect()">全部</div>
|
||||
<div class="multi-select__panel" id="orgPanel">
|
||||
<div class="multi-select__opt" data-val="全部" onclick="toggleOrgOpt(this,'全部')"><span class="multi-select__cb"></span>全部</div>
|
||||
<div class="multi-select__opt" data-val="能源集团" onclick="toggleOrgOpt(this,'能源集团')"><span class="multi-select__cb"></span>能源集团</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="filterTable()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.5"/><path d="M10.5 10.5l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn" onclick="resetFilter()">重置</button>
|
||||
</div>
|
||||
<!-- 操作栏 -->
|
||||
<div class="toolbar">
|
||||
<button class="btn" onclick="alert('导出列表数据')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v8M4 6l3 3 3-3M2 11h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn" onclick="alert('查看导出任务')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.3"/><path d="M7 4v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">活动统计</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);" id="totalCount">共 0 条数据</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:18%;">活动名称</th>
|
||||
<th style="width:10%;">组织单位</th>
|
||||
<th style="width:10%;">组织部门</th>
|
||||
<th style="width:12%;">起止日期</th>
|
||||
<th style="width:8%;">应参加人数</th>
|
||||
<th style="width:8%;">已参加人数</th>
|
||||
<th style="width:8%;">未参加人数</th>
|
||||
<th style="width:8%;">活动状态</th>
|
||||
<th style="width:18%;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span class="pagination__total" id="pageTotal"></span>
|
||||
<div class="pagination__pages">
|
||||
<span class="page-item active">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
/* ===== 数据 ===== */
|
||||
var statusMap = {'待开始':'tag-blue','进行中':'tag-orange','已完成':'tag-green'};
|
||||
|
||||
var activities = [
|
||||
{id:1, name:'2026年上半年员工健康排查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-01-01', dateTo:'2026-03-31', personCount:1280, doneCount:1150, status:'已完成', leader:'张明', surveys:['健康记录问卷','职业健康排查问卷'], desc:'年度例行员工健康排查活动，覆盖全体员工。'},
|
||||
{id:2, name:'2026年Q2心理健康专项排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-04-01', dateTo:'2026-06-30', personCount:356, doneCount:280, status:'进行中', leader:'李华', surveys:['心理健康评估问卷'], desc:'针对C类和D类人群的心理健康专项排查。'},
|
||||
{id:3, name:'2026年Q3职业健康排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-07-01', dateTo:'2026-09-30', personCount:520, doneCount:0, status:'待开始', leader:'王强', surveys:['职业健康排查问卷','健康记录问卷'], desc:'第三季度职业健康专项排查，针对A类和B类人群。'},
|
||||
{id:4, name:'新员工入职健康基线调查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-06-01', dateTo:'2026-12-31', personCount:85, doneCount:60, status:'进行中', leader:'赵芳', surveys:['新员工健康基线问卷'], desc:'2026年度新入职员工健康基线数据采集。'},
|
||||
{id:5, name:'慢病患者季度随访', org:'能源集团', dept:'工会', dateFrom:'2026-04-01', dateTo:'2026-06-30', personCount:128, doneCount:98, status:'进行中', leader:'孙丽', surveys:['慢病管理随访问卷'], desc:'E类慢病患者第二季度定期随访。'}
|
||||
];
|
||||
|
||||
/* 组织单位多选 */
|
||||
var filterOrgs = [];
|
||||
|
||||
function toggleOrgSelect(){
|
||||
var panel = document.getElementById('orgPanel');
|
||||
var isShow = panel.classList.contains('show');
|
||||
closeAllPanels();
|
||||
if(!isShow) panel.classList.add('show');
|
||||
}
|
||||
|
||||
function toggleOrgOpt(el, val){
|
||||
var cb = el.querySelector('.multi-select__cb');
|
||||
if(val === '全部'){
|
||||
filterOrgs = [];
|
||||
document.querySelectorAll('#orgPanel .multi-select__opt').forEach(function(opt){
|
||||
opt.classList.remove('checked');opt.querySelector('.multi-select__cb').classList.remove('checked');
|
||||
});
|
||||
el.classList.add('checked');cb.classList.add('checked');
|
||||
} else {
|
||||
document.querySelector('#orgPanel .multi-select__opt[data-val="全部"]').classList.remove('checked');
|
||||
document.querySelector('#orgPanel .multi-select__opt[data-val="全部"]').querySelector('.multi-select__cb').classList.remove('checked');
|
||||
if(cb.classList.contains('checked')){
|
||||
el.classList.remove('checked');cb.classList.remove('checked');
|
||||
filterOrgs = filterOrgs.filter(function(c){return c!==val;});
|
||||
} else {
|
||||
el.classList.add('checked');cb.classList.add('checked');
|
||||
filterOrgs.push(val);
|
||||
}
|
||||
}
|
||||
updateOrgTrigger();
|
||||
}
|
||||
|
||||
function updateOrgTrigger(){
|
||||
var trigger = document.querySelector('#orgSelect .multi-select__trigger');
|
||||
if(filterOrgs.length===0){
|
||||
trigger.textContent = '全部';
|
||||
trigger.className = 'multi-select__trigger placeholder';
|
||||
} else {
|
||||
trigger.className = 'multi-select__trigger';
|
||||
var html = '';
|
||||
filterOrgs.forEach(function(c){
|
||||
html += '<span class="sel-tag">'+esc(c)+'<span class="tag-x" onclick="removeOrgTag(\''+c+'\')">×</span></span>';
|
||||
});
|
||||
trigger.innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
function removeOrgTag(val){
|
||||
filterOrgs = filterOrgs.filter(function(c){return c!==val;});
|
||||
var opt = document.querySelector('#orgPanel .multi-select__opt[data-val="'+val+'"]');
|
||||
opt.classList.remove('checked');opt.querySelector('.multi-select__cb').classList.remove('checked');
|
||||
updateOrgTrigger();
|
||||
}
|
||||
|
||||
function closeAllPanels(){
|
||||
document.querySelectorAll('.multi-select__panel').forEach(function(p){p.classList.remove('show');});
|
||||
}
|
||||
|
||||
/* ===== 渲染表格 ===== */
|
||||
function renderTable(data){
|
||||
var html = '';
|
||||
data.forEach(function(a){
|
||||
var pending = a.personCount - a.doneCount;
|
||||
html += '<tr>';
|
||||
html += '<td>'+esc(a.name)+'</td>';
|
||||
html += '<td>'+esc(a.org)+'</td>';
|
||||
html += '<td>'+esc(a.dept)+'</td>';
|
||||
html += '<td>'+a.dateFrom+' ~ '+a.dateTo+'</td>';
|
||||
html += '<td>'+a.personCount+'</td>';
|
||||
html += '<td style="color:var(--success);">'+a.doneCount+'</td>';
|
||||
html += '<td style="color:var(--danger);">'+pending+'</td>';
|
||||
html += '<td><span class="tag '+statusMap[a.status]+'">'+a.status+'</span></td>';
|
||||
html += '<td>';
|
||||
html += '<button class="link" onclick="window.location.href=\'activity-detail.html?id='+a.id+'\'">活动详情</button>';
|
||||
html += '</td></tr>';
|
||||
});
|
||||
document.getElementById('tbody').innerHTML = html || '<tr><td colspan="9" style="text-align:center;padding:40px;color:var(--text-placeholder);">暂无数据</td></tr>';
|
||||
document.getElementById('totalCount').textContent = '共 '+data.length+' 条数据';
|
||||
document.getElementById('pageTotal').textContent = '共 '+data.length+' 条数据';
|
||||
}
|
||||
|
||||
/* ===== 筛选 ===== */
|
||||
function filterTable(){
|
||||
var name = document.getElementById('filterName').value.trim().toLowerCase();
|
||||
var filtered = activities.filter(function(a){
|
||||
if(name && a.name.toLowerCase().indexOf(name) === -1) return false;
|
||||
if(filterOrgs.length > 0 && filterOrgs.indexOf(a.org) === -1) return false;
|
||||
return true;
|
||||
});
|
||||
renderTable(filtered);
|
||||
}
|
||||
|
||||
function resetFilter(){
|
||||
document.getElementById('filterName').value = '';
|
||||
filterOrgs = [];
|
||||
document.querySelectorAll('#orgPanel .multi-select__opt').forEach(function(opt){
|
||||
opt.classList.remove('checked');opt.querySelector('.multi-select__cb').classList.remove('checked');
|
||||
});
|
||||
var allOpt = document.querySelector('#orgPanel .multi-select__opt[data-val="全部"]');
|
||||
allOpt.classList.add('checked');allOpt.querySelector('.multi-select__cb').classList.add('checked');
|
||||
updateOrgTrigger();
|
||||
renderTable(activities);
|
||||
}
|
||||
|
||||
function esc(s){return (s||'').replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>');}
|
||||
|
||||
/* ===== 初始化 ===== */
|
||||
renderTable(activities);
|
||||
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('.multi-select')) closeAllPanels();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -251,7 +251,6 @@
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="editor-layout">
|
||||
|
||||
@@ -161,7 +161,6 @@
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<a href="survey-manage.html" class="sidebar-item active">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
|
||||
@@ -318,6 +318,9 @@
|
||||
<button class="btn btn-default" onclick="openImportModal()">
|
||||
批量入库导入
|
||||
</button>
|
||||
<button class="btn btn-default" onclick="void(0)">
|
||||
批量绑定导入
|
||||
</button>
|
||||
<button class="btn btn-default" onclick="void(0)">
|
||||
查看导入任务
|
||||
</button>
|
||||
@@ -570,7 +573,7 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>绑定日期 <span style="color:var(--danger)">*</span></label>
|
||||
<input class="form-control" type="date" value="2026-05-11" id="bindDate">
|
||||
<input class="form-control" type="datetime-local" id="bindDate">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
@@ -646,6 +649,17 @@
|
||||
下载导入模板
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom:16px;">
|
||||
<label>所属单位 <span style="color:var(--danger)">*</span></label>
|
||||
<select class="form-control filter-select" style="width:100%;">
|
||||
<option value="">请选择所属单位</option>
|
||||
<option value="采油一厂">采油一厂</option>
|
||||
<option value="采油二厂">采油二厂</option>
|
||||
<option value="采气一厂">采气一厂</option>
|
||||
<option value="采气二厂">采气二厂</option>
|
||||
<option value="天然气处理厂">天然气处理厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="upload-area">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none"><rect x="4" y="4" width="40" height="40" rx="6" stroke="#999" stroke-width="2"/><path d="M24 14v20M16 22l8-8 8 8" stroke="#999" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>点击或拖拽文件到此区域上传</p>
|
||||
@@ -693,10 +707,6 @@
|
||||
<div style="background:#F0F7FF;border:1px solid #BAE0FF;border-radius:var(--radius-md);padding:10px 16px;flex-shrink:0;">
|
||||
<span style="font-size:var(--font-sm);color:#0958D9;">设备编码：<strong id="msDeviceCode">WD-2024-001</strong></span>
|
||||
</div>
|
||||
<button class="btn btn-default btn-sm" onclick="showAddTypeForm()">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
新增类型配置
|
||||
</button>
|
||||
</div>
|
||||
<div class="monitor-setting-list" id="monitorSettingList">
|
||||
<!-- 心率 -->
|
||||
@@ -877,6 +887,10 @@ function openBindModal(code, name) {
|
||||
document.getElementById('bindEmpSearch').value = '';
|
||||
document.getElementById('empDropdown').classList.remove('show');
|
||||
document.getElementById('empCard').style.display = 'none';
|
||||
// 绑定日期默认当前时间
|
||||
var now = new Date();
|
||||
var pad = function(n){ return n < 10 ? '0' + n : n; };
|
||||
document.getElementById('bindDate').value = now.getFullYear() + '-' + pad(now.getMonth()+1) + '-' + pad(now.getDate()) + 'T' + pad(now.getHours()) + ':' + pad(now.getMinutes());
|
||||
document.getElementById('bindModal').classList.add('show');
|
||||
}
|
||||
var selectedEmp = null;
|
||||
|
||||
@@ -632,6 +632,65 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 血压面板（独立：双线图 + 收缩压/舒张压分开） -->
|
||||
<div class="tab-panel" id="panel-bp" style="display:none;">
|
||||
<div class="metric-toolbar">
|
||||
<div class="metric-toolbar__left">
|
||||
<div class="time-granularity">
|
||||
<button class="time-btn active" onclick="switchGranularityBp(this)">日</button>
|
||||
<button class="time-btn" onclick="switchGranularityBp(this)">周</button>
|
||||
<button class="time-btn" onclick="switchGranularityBp(this)">月</button>
|
||||
<button class="time-btn" onclick="switchGranularityBp(this)">年</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-default" id="btnToggleBpList" onclick="toggleBpView()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 3h10M2 7h10M2 11h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
列表展示
|
||||
</button>
|
||||
</div>
|
||||
<!-- 趋势图视图 -->
|
||||
<div id="bp-chart-view">
|
||||
<div class="date-nav">
|
||||
<button class="date-nav__btn" onclick="void(0)">‹</button>
|
||||
<span class="date-nav__text">2026-05-12</span>
|
||||
<button class="date-nav__btn" onclick="void(0)">›</button>
|
||||
</div>
|
||||
<div class="metric-summary" id="bpSummary">
|
||||
<div class="metric-summary__item"><span class="metric-summary__value" style="color:#EB2F96;">135</span><span class="metric-summary__unit">mmHg</span><span class="metric-summary__label">收缩压最高</span></div>
|
||||
<div class="metric-summary__item"><span class="metric-summary__value" style="color:#EB2F96;">112</span><span class="metric-summary__unit">mmHg</span><span class="metric-summary__label">收缩压最低</span></div>
|
||||
<div class="metric-summary__item"><span class="metric-summary__value" style="color:#1890FF;">88</span><span class="metric-summary__unit">mmHg</span><span class="metric-summary__label">舒张压最高</span></div>
|
||||
<div class="metric-summary__item"><span class="metric-summary__value" style="color:#1890FF;">72</span><span class="metric-summary__unit">mmHg</span><span class="metric-summary__label">舒张压最低</span></div>
|
||||
</div>
|
||||
<div class="chart-area" id="bpTrendChart"></div>
|
||||
</div>
|
||||
<!-- 列表视图 -->
|
||||
<div id="bp-table-view" style="display:none;">
|
||||
<div style="display:flex;gap:16px;margin-bottom:16px;align-items:center;">
|
||||
<div class="filter-item">
|
||||
<label style="font-size:var(--font-sm);color:var(--text-secondary);">日期</label>
|
||||
<input type="date" value="2026-05-12" style="height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;">
|
||||
</div>
|
||||
<button class="btn btn-default">导出</button>
|
||||
</div>
|
||||
<table class="data-history-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>上报时间</th>
|
||||
<th>收缩压 (mmHg)</th>
|
||||
<th>舒张压 (mmHg)</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="bpTableBody">
|
||||
<tr><td>14:32:05</td><td>120</td><td>78</td><td><span class="tag tag-green">正常</span></td></tr>
|
||||
<tr><td>14:02:05</td><td>124</td><td>80</td><td><span class="tag tag-green">正常</span></td></tr>
|
||||
<tr><td>13:32:05</td><td>118</td><td>75</td><td><span class="tag tag-green">正常</span></td></tr>
|
||||
<tr><td>13:02:05</td><td>131</td><td>85</td><td><span class="tag tag-green">正常</span></td></tr>
|
||||
<tr><td>12:32:05</td><td>142</td><td>92</td><td><span class="tag tag-red">异常</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -675,12 +734,20 @@ function switchMainTab(el, tab) {
|
||||
document.getElementById('panel-metric').style.display = 'none';
|
||||
document.getElementById('panel-exercise').style.display = 'none';
|
||||
document.getElementById('panel-ecg').style.display = 'none';
|
||||
document.getElementById('panel-bp').style.display = 'none';
|
||||
if (tab === 'overview') {
|
||||
document.getElementById('panel-overview').style.display = '';
|
||||
} else if (tab === 'exercise') {
|
||||
document.getElementById('panel-exercise').style.display = '';
|
||||
} else if (tab === 'ecg') {
|
||||
document.getElementById('panel-ecg').style.display = '';
|
||||
} else if (tab === 'bp') {
|
||||
document.getElementById('panel-bp').style.display = '';
|
||||
bpListView = false;
|
||||
document.getElementById('btnToggleBpList').innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 3h10M2 7h10M2 11h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 列表展示';
|
||||
document.getElementById('bp-chart-view').style.display = '';
|
||||
document.getElementById('bp-table-view').style.display = 'none';
|
||||
renderBpTrendChart();
|
||||
} else {
|
||||
document.getElementById('panel-metric').style.display = '';
|
||||
isListView = false;
|
||||
@@ -760,8 +827,71 @@ function renderTrendChart() {
|
||||
+ '<polyline points="'+pts+'" fill="none" stroke="#1890FF" stroke-width="2"/>'
|
||||
+ xLabels
|
||||
+ '</svg>';
|
||||
}
|
||||
function openEcgDetail(time, result, value) {
|
||||
}
|
||||
/* ===== 血压面板专用 ===== */
|
||||
var bpListView = false;
|
||||
function toggleBpView() {
|
||||
bpListView = !bpListView;
|
||||
var btn = document.getElementById('btnToggleBpList');
|
||||
if (bpListView) {
|
||||
document.getElementById('bp-chart-view').style.display = 'none';
|
||||
document.getElementById('bp-table-view').style.display = '';
|
||||
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3h8v8H3z" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M3 7h8" stroke="currentColor" stroke-width="1"/></svg> 趋势图展示';
|
||||
} else {
|
||||
document.getElementById('bp-chart-view').style.display = '';
|
||||
document.getElementById('bp-table-view').style.display = 'none';
|
||||
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 3h10M2 7h10M2 11h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 列表展示';
|
||||
renderBpTrendChart();
|
||||
}
|
||||
}
|
||||
function switchGranularityBp(el) {
|
||||
document.querySelectorAll('#panel-bp .time-granularity .time-btn').forEach(function(b){ b.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
renderBpTrendChart();
|
||||
}
|
||||
function renderBpTrendChart() {
|
||||
var c = document.getElementById('bpTrendChart');
|
||||
if (!c) return;
|
||||
var W = c.offsetWidth || 880, H = 280;
|
||||
var pad = {t:20,r:20,b:40,l:50};
|
||||
var cw = W - pad.l - pad.r, ch = H - pad.t - pad.b;
|
||||
// 24小时数据点
|
||||
var n = 25;
|
||||
// 收缩压数据 (systolic)
|
||||
var sysData = [118,116,114,112,115,118,120,122,125,128,130,128,124,122,120,124,128,132,135,130,126,122,120,118,116];
|
||||
// 舒张压数据 (diastolic)
|
||||
var diaData = [75,74,72,73,74,76,78,78,80,82,84,82,80,78,76,78,80,84,86,82,80,78,76,74,72];
|
||||
var minV = 60, maxV = 150;
|
||||
function px(i){ return pad.l + i/(n-1)*cw; }
|
||||
function py(v){ return pad.t + ch - (v-minV)/(maxV-minV)*ch; }
|
||||
// 网格线
|
||||
var yLines = [60,80,100,120,140];
|
||||
var gridLines = yLines.map(function(v){
|
||||
return '<line x1="'+pad.l+'" y1="'+py(v)+'" x2="'+(pad.l+cw)+'" y2="'+py(v)+'" stroke="#f0f0f0" stroke-width="1"/>'
|
||||
+ '<text x="'+(pad.l-8)+'" y="'+(py(v)+4)+'" text-anchor="end" font-size="11" fill="#999">'+v+'</text>';
|
||||
}).join('');
|
||||
// X轴标签
|
||||
var xTicks = [0,4,8,12,16,20,24];
|
||||
var xLabels = xTicks.map(function(h){
|
||||
var label = (h<10?'0':'')+h+':00';
|
||||
return '<text x="'+px(h)+'" y="'+(H-10)+'" text-anchor="middle" font-size="10" fill="#aaa">'+label+'</text>';
|
||||
}).join('');
|
||||
// 收缩压折线
|
||||
var sysPts = sysData.map(function(v,i){ return px(i)+','+py(v); }).join(' ');
|
||||
// 舒张压折线
|
||||
var diaPts = diaData.map(function(v,i){ return px(i)+','+py(v); }).join(' ');
|
||||
c.innerHTML = '<svg width="'+W+'" height="'+H+'" viewBox="0 0 '+W+' '+H+'">'
|
||||
+ gridLines + xLabels
|
||||
// 舒张压（蓝色）
|
||||
+ '<polyline points="'+diaPts+'" fill="none" stroke="#1890FF" stroke-width="2" stroke-dasharray="6,3"/>'
|
||||
// 收缩压（粉色）
|
||||
+ '<polyline points="'+sysPts+'" fill="none" stroke="#EB2F96" stroke-width="2"/>'
|
||||
// 图例
|
||||
+ '<circle cx="'+(W-130)+'" cy="22" r="4" fill="#EB2F96"/><text x="'+(W-120)+'" y="26" font-size="11" fill="#666">收缩压</text>'
|
||||
+ '<circle cx="'+(W-60)+'" cy="22" r="4" fill="#1890FF"/><text x="'+(W-50)+'" y="26" font-size="11" fill="#666">舒张压</text>'
|
||||
+ '</svg>';
|
||||
}
|
||||
function openEcgDetail(time, result, value) {
|
||||
document.getElementById('ecgTime').textContent = time;
|
||||
document.getElementById('ecgResult').textContent = result;
|
||||
document.getElementById('ecgValue').textContent = value;
|
||||
|
||||
Reference in New Issue
Block a user