feat: 批量更新多模块原型页面+截图+权重管理模块迁移
- 员工端健康监测: 截图更新+索引页更新 - 管理端健康环境: 室内外/水质/花粉设备列表+数据分析+数据监测+异常报警+历史数据等页面更新 - 管理端健康排查/档案/穿戴运维: 页面导航和链接更新 - 体重管理模块: 从health-monitor/weight迁移至weight-management目录 - 设备管理(蓝牙/体脂/体脂秤/运动) - 数据监测/统计/异常结果 - 新增目标体重审核/运动记录/个人目标数据/活动统计/算法模型等页面 - web-admin/weight-management: 新增体重管理模块24个管理端页面
This commit is contained in:
liuyunqin
@@ -19,10 +19,11 @@
|
||||
3. 读取 `doc/PRD.md`（如存在），获取业务主线分组
|
||||
|
||||
### Step 2: 整理页面形态清单 & 复用已有截图
|
||||
1. 检查 `doc/screenshots/` 目录下已有的截图文件
|
||||
2. 将已有截图与页面一一对应（按文件名匹配）
|
||||
3. 标记出缺失的弹窗/状态截图（仅这些需要新截取）
|
||||
4. **已有截图直接复用，不重新截取**
|
||||
1. **递归扫描** `doc/screenshots/` 目录及其所有子目录，收集全部 `.jpg` / `.png` 文件
|
||||
2. 将已有截图与 Step 1 发现的 HTML 页面 **一一对应**（截图目录结构与页面目录结构一致，如 `wearable/heart-rate.html` → `screenshots/wearable/heart-rate.jpg`）
|
||||
3. **逐页交叉验证**：28 个 HTML 页面 → 至少 28 张截图，数量对不上就说明有遗漏，不得跳过
|
||||
4. 标记出缺失的弹窗/状态截图（仅这些需要新截取）
|
||||
5. **已有截图直接复用，不重新截取**
|
||||
|
||||
### Step 3: 截取缺失的弹窗截图
|
||||
|
||||
|
||||
Generated
+8
@@ -7,10 +7,14 @@
|
||||
<value>
|
||||
<TabSessionState>
|
||||
<option name="provider" value="claude" />
|
||||
<<<<<<< Updated upstream
|
||||
<<<<<<< HEAD
|
||||
<option name="sessionId" value="1d078eed-20f6-479f-ad7e-15325609b54e" />
|
||||
=======
|
||||
<option name="sessionId" value="91da2830-34f5-4d7d-aa52-2f2559a1f54f" />
|
||||
=======
|
||||
<option name="sessionId" value="effe3316-c6ce-4da1-9830-9419efa8603d" />
|
||||
>>>>>>> Stashed changes
|
||||
<option name="cwd" value="$PROJECT_DIR$" />
|
||||
<option name="model" value="claude-opus-4-7[1m]" />
|
||||
<option name="permissionMode" value="bypassPermissions" />
|
||||
@@ -22,8 +26,12 @@
|
||||
<value>
|
||||
<TabSessionState>
|
||||
<option name="provider" value="claude" />
|
||||
<<<<<<< Updated upstream
|
||||
<option name="sessionId" value="3020263d-842c-4508-accd-dd719bd76d8b" />
|
||||
>>>>>>> 871a2d46ce5c80d603f58817e2096ed7076ad713
|
||||
=======
|
||||
<option name="sessionId" value="a0eb14a4-0df5-4d6a-b0e9-bc22f47e5f49" />
|
||||
>>>>>>> Stashed changes
|
||||
<option name="cwd" value="$PROJECT_DIR$" />
|
||||
<option name="model" value="claude-opus-4-7[1m]" />
|
||||
<option name="permissionMode" value="bypassPermissions" />
|
||||
|
||||
@@ -58,10 +58,10 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-
|
||||
</nav>
|
||||
|
||||
<!-- 首页入口 -->
|
||||
<div class="section">
|
||||
<div class="section" id="sec-home">
|
||||
<div class="section__header">
|
||||
<span class="section__title">📱 首页入口</span>
|
||||
<span class="section__count">1 页面</span>
|
||||
<span class="section__count">2 页面</span>
|
||||
</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/index.jpg', '健康监测首页')">
|
||||
@@ -71,18 +71,6 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-
|
||||
<span class="tag tag--state">5个导航入口</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 健康现状 -->
|
||||
<div class="section">
|
||||
<div class="section__header">
|
||||
<span class="section__title">🏥 健康现状</span>
|
||||
<span class="section__count">1 页面</span>
|
||||
</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/health-status.jpg', '健康现状')">
|
||||
<div class="card__img"><img src="screenshots/health-status.jpg" alt="健康现状"></div>
|
||||
<div class="card__label">健康现状</div>
|
||||
@@ -94,6 +82,248 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 健康排查 -->
|
||||
<div class="section" id="sec-health-screening">
|
||||
<div class="section__header">
|
||||
<span class="section__title">📋 健康排查</span>
|
||||
<span class="section__count">5 页面</span>
|
||||
</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/health-screening/index.jpg', '健康排查首页')">
|
||||
<div class="card__img"><img src="screenshots/health-screening/index.jpg" alt="健康排查首页"></div>
|
||||
<div class="card__label">健康排查首页</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">积分/排行榜</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/health-screening/questionnaire-fill.jpg', '每日健康记录')">
|
||||
<div class="card__img"><img src="screenshots/health-screening/questionnaire-fill.jpg" alt="每日健康记录"></div>
|
||||
<div class="card__label">每日健康记录</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">问卷填写</span>
|
||||
<span class="tag tag--state">频率标签</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/health-screening/checkin-record.jpg', '历史记录')">
|
||||
<div class="card__img"><img src="screenshots/health-screening/checkin-record.jpg" alt="历史记录"></div>
|
||||
<div class="card__label">历史记录</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">日历+列表</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/health-screening/questionnaire-detail.jpg', '问卷详情')">
|
||||
<div class="card__img"><img src="screenshots/health-screening/questionnaire-detail.jpg" alt="问卷详情"></div>
|
||||
<div class="card__label">问卷详情</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">只读回顾</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/health-screening/questionnaire-setting.jpg', '题目设置')">
|
||||
<div class="card__img"><img src="screenshots/health-screening/questionnaire-setting.jpg" alt="题目设置"></div>
|
||||
<div class="card__label">题目设置</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">自定义显示</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 穿戴监测 -->
|
||||
<div class="section" id="sec-wearable">
|
||||
<div class="section__header">
|
||||
<span class="section__title">⌚ 穿戴监测</span>
|
||||
<span class="section__count">17 页面</span>
|
||||
</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/index.jpg', '穿戴监测首页')">
|
||||
<div class="card__img"><img src="screenshots/wearable/index.jpg" alt="穿戴监测首页"></div>
|
||||
<div class="card__label">穿戴监测首页</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">指标卡片</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/heart-rate.jpg', '心率详情')">
|
||||
<div class="card__img"><img src="screenshots/wearable/heart-rate.jpg" alt="心率详情"></div>
|
||||
<div class="card__label">心率详情</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">趋势图</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/heart-rate-alerts.jpg', '心率预警历史')">
|
||||
<div class="card__img"><img src="screenshots/wearable/heart-rate-alerts.jpg" alt="心率预警历史"></div>
|
||||
<div class="card__label">心率预警历史</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">预警记录</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/blood-oxygen.jpg', '血氧详情')">
|
||||
<div class="card__img"><img src="screenshots/wearable/blood-oxygen.jpg" alt="血氧详情"></div>
|
||||
<div class="card__label">血氧详情</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">柱状图</span>
|
||||
<span class="tag tag--state">三色区分</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/blood-oxygen-alerts.jpg', '血氧预警历史')">
|
||||
<div class="card__img"><img src="screenshots/wearable/blood-oxygen-alerts.jpg" alt="血氧预警历史"></div>
|
||||
<div class="card__label">血氧预警历史</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">预警记录</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/blood-pressure.jpg', '血压详情')">
|
||||
<div class="card__img"><img src="screenshots/wearable/blood-pressure.jpg" alt="血压详情"></div>
|
||||
<div class="card__label">血压详情</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">双线图表</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/blood-pressure-alerts.jpg', '血压预警历史')">
|
||||
<div class="card__img"><img src="screenshots/wearable/blood-pressure-alerts.jpg" alt="血压预警历史"></div>
|
||||
<div class="card__label">血压预警历史</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">预警记录</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/temperature.jpg', '体温详情')">
|
||||
<div class="card__img"><img src="screenshots/wearable/temperature.jpg" alt="体温详情"></div>
|
||||
<div class="card__label">体温详情</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">趋势图</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/temperature-alerts.jpg', '体温预警历史')">
|
||||
<div class="card__img"><img src="screenshots/wearable/temperature-alerts.jpg" alt="体温预警历史"></div>
|
||||
<div class="card__label">体温预警历史</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">预警记录</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/stress.jpg', '压力详情')">
|
||||
<div class="card__img"><img src="screenshots/wearable/stress.jpg" alt="压力详情"></div>
|
||||
<div class="card__label">压力详情</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">压力等级</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/stress-alerts.jpg', '压力预警历史')">
|
||||
<div class="card__img"><img src="screenshots/wearable/stress-alerts.jpg" alt="压力预警历史"></div>
|
||||
<div class="card__label">压力预警历史</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">预警记录</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/steps.jpg', '步数详情')">
|
||||
<div class="card__img"><img src="screenshots/wearable/steps.jpg" alt="步数详情"></div>
|
||||
<div class="card__label">步数详情</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">生活化换算</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/sleep.jpg', '睡眠详情')">
|
||||
<div class="card__img"><img src="screenshots/wearable/sleep.jpg" alt="睡眠详情"></div>
|
||||
<div class="card__label">睡眠详情</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">Hypnogram</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/ecg.jpg', '心电图列表')">
|
||||
<div class="card__img"><img src="screenshots/wearable/ecg.jpg" alt="心电图列表"></div>
|
||||
<div class="card__label">心电图列表</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">筛选标签</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/ecg-detail.jpg', '心电图详情')">
|
||||
<div class="card__img"><img src="screenshots/wearable/ecg-detail.jpg" alt="心电图详情"></div>
|
||||
<div class="card__label">心电图详情</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">波形图</span>
|
||||
<span class="tag tag--state">可横向滑动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/wearable/exercise.jpg', '锻炼记录')">
|
||||
<div class="card__img"><img src="screenshots/wearable/exercise.jpg" alt="锻炼记录"></div>
|
||||
<div class="card__label">锻炼记录</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">周/月视图</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 体重监测 -->
|
||||
<div class="section" id="sec-weight">
|
||||
<div class="section__header">
|
||||
<span class="section__title">⚖️ 体重监测</span>
|
||||
<span class="section__count">3 页面</span>
|
||||
</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/weight/index.jpg', '体重监测首页')">
|
||||
<div class="card__img"><img src="screenshots/weight/index.jpg" alt="体重监测首页"></div>
|
||||
<div class="card__label">体重监测首页</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">最近测量</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/weight/history.jpg', '历史数据')">
|
||||
<div class="card__img"><img src="screenshots/weight/history.jpg" alt="历史数据"></div>
|
||||
<div class="card__label">历史数据</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">图表/列表</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/weight/report-detail.jpg', '详细报告')">
|
||||
<div class="card__img"><img src="screenshots/weight/report-detail.jpg" alt="详细报告"></div>
|
||||
<div class="card__label">详细报告</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">完整报告</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 环境监测 -->
|
||||
<div class="section" id="sec-environment">
|
||||
<div class="section__header">
|
||||
<span class="section__title">🌡️ 环境监测</span>
|
||||
<span class="section__count">3 页面</span>
|
||||
</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/environment/index.jpg', '环境监测首页')">
|
||||
<div class="card__img"><img src="screenshots/environment/index.jpg" alt="环境监测首页"></div>
|
||||
<div class="card__label">环境监测首页</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">地图/列表</span>
|
||||
<span class="tag tag--state">底部弹窗</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/environment/device-detail.jpg', '设备详情')">
|
||||
<div class="card__img"><img src="screenshots/environment/device-detail.jpg" alt="设备详情"></div>
|
||||
<div class="card__label">设备详情</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">指标/趋势</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/environment/alarm-data.jpg', '报警数据')">
|
||||
<div class="card__img"><img src="screenshots/environment/alarm-data.jpg" alt="报警数据"></div>
|
||||
<div class="card__label">报警数据</div>
|
||||
<div class="card__tags">
|
||||
<span class="tag tag--state">报警记录</span>
|
||||
<span class="tag tag--state">日期筛选</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:40px;"></div>
|
||||
|
||||
<!-- 灯箱 -->
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 107 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 282 KiB After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 183 KiB After Width: | Height: | Size: 70 KiB |
@@ -29,9 +29,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.core-card__title-wrap { display: flex; align-items: center; gap: 10px; }
|
||||
.core-card__icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
|
||||
.icon--wearable { background: linear-gradient(135deg, #e6fffb 0%, #b5f5ec 100%); }
|
||||
.icon--weight { background: linear-gradient(135deg, #f0f5ff 0%, #d6e4ff 100%); }
|
||||
.core-card__name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.core-card__time { font-size: 11px; color: #bbb; margin-top: 1px; }
|
||||
.core-card__arrow { width: 16px; height: 16px; display: flex; align-items: center; }
|
||||
|
||||
/* 指标网格（穿戴：2×2） */
|
||||
@@ -43,15 +41,9 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.dot--heart { background: #ff4d4f; }
|
||||
.dot--oxygen { background: #1890ff; }
|
||||
.dot--temp { background: #fa8c16; }
|
||||
.dot--weight { background: #597ef7; }
|
||||
.dot--bmi { background: #36cfc9; }
|
||||
.dot--fat { background: #ff85c2; }
|
||||
.metric-cell__value { font-size: 22px; font-weight: 700; color: #1a1a1a; line-height: 1; }
|
||||
.metric-cell__unit { font-size: 11px; color: #aaa; margin-top: 2px; }
|
||||
|
||||
/* 指标行（体重：3列） */
|
||||
.metrics-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
|
||||
|
||||
/* 状态徽章 */
|
||||
.badge { display: inline-flex; align-items: center; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
|
||||
.badge--good { color: #52c41a; background: #f6ffed; border: 1px solid #b7eb8f; }
|
||||
@@ -72,7 +64,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.entry-metric strong { color: #1a1a1a; font-weight: 700; }
|
||||
.entry-metric .badge { font-size: 10px; padding: 1px 6px; }
|
||||
.entry-arrow { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
|
||||
.entry-time-tag { font-size: 10px; color: #bbb; margin-top: 3px; }
|
||||
|
||||
/* 健康现状卡片 */
|
||||
.health-status-card { background: linear-gradient(135deg, #f0f5ff 0%, #e6fffb 100%); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: transform 0.15s; text-decoration: none; }
|
||||
@@ -85,7 +76,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.health-status__icon--E { color: #52c41a; border: 2px solid #52c41a; }
|
||||
.health-status__info { flex: 1; min-width: 0; }
|
||||
.health-status__title { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 3px; }
|
||||
.health-status__desc { font-size: 12px; color: #666; }
|
||||
.health-status__tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
|
||||
.health-status__tag--A { color: #ff4d4f; background: #fff1f0; }
|
||||
.health-status__tag--B { color: #fa8c16; background: #fff7e6; }
|
||||
@@ -120,7 +110,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="health-status__icon health-status__icon--A">A</div>
|
||||
<div class="health-status__info">
|
||||
<div class="health-status__title">健康现状 <span class="health-status__tag health-status__tag--A">A类·大病人群</span></div>
|
||||
<div class="health-status__desc">更新时间：2026-05-26 10:30</div>
|
||||
</div>
|
||||
<div class="health-status__arrow"><svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
</a>
|
||||
@@ -133,7 +122,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="core-card__icon icon--wearable">⌚</div>
|
||||
<div>
|
||||
<div class="core-card__name">穿戴监测</div>
|
||||
<div class="core-card__time">05-25 09:38 同步</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="core-card__arrow">
|
||||
@@ -149,50 +137,17 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="metric-cell">
|
||||
<div class="metric-cell__label"><span class="metric-cell__dot dot--heart"></span>心率</div>
|
||||
<div class="metric-cell__value">72</div>
|
||||
<div class="metric-cell__unit">bpm <span class="badge badge--good">正常</span></div>
|
||||
<div class="metric-cell__unit">bpm</div>
|
||||
</div>
|
||||
<div class="metric-cell">
|
||||
<div class="metric-cell__label"><span class="metric-cell__dot dot--oxygen"></span>血氧</div>
|
||||
<div class="metric-cell__value">98</div>
|
||||
<div class="metric-cell__unit">% <span class="badge badge--good">正常</span></div>
|
||||
<div class="metric-cell__unit">%</div>
|
||||
</div>
|
||||
<div class="metric-cell">
|
||||
<div class="metric-cell__label"><span class="metric-cell__dot dot--temp"></span>体温</div>
|
||||
<div class="metric-cell__value">36.5</div>
|
||||
<div class="metric-cell__unit">°C <span class="badge badge--good">正常</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 体重监测 大卡片 -->
|
||||
<a class="core-card" href="weight/index.html">
|
||||
<div class="core-card__header">
|
||||
<div class="core-card__title-wrap">
|
||||
<div class="core-card__icon icon--weight">⚖️</div>
|
||||
<div>
|
||||
<div class="core-card__name">体重监测</div>
|
||||
<div class="core-card__time">05-24 07:15 测量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="core-card__arrow">
|
||||
<svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metrics-row">
|
||||
<div class="metric-cell">
|
||||
<div class="metric-cell__label"><span class="metric-cell__dot dot--weight"></span>体重</div>
|
||||
<div class="metric-cell__value">68.5</div>
|
||||
<div class="metric-cell__unit">kg</div>
|
||||
</div>
|
||||
<div class="metric-cell">
|
||||
<div class="metric-cell__label"><span class="metric-cell__dot dot--bmi"></span>BMI</div>
|
||||
<div class="metric-cell__value">22.3</div>
|
||||
<div class="metric-cell__unit"><span class="badge badge--good">正常</span></div>
|
||||
</div>
|
||||
<div class="metric-cell">
|
||||
<div class="metric-cell__label"><span class="metric-cell__dot dot--fat"></span>体脂率</div>
|
||||
<div class="metric-cell__value">18.2</div>
|
||||
<div class="metric-cell__unit">% <span class="badge badge--good">正常</span></div>
|
||||
<div class="metric-cell__unit">°C</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -211,7 +166,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<span class="entry-metric">水质 <span class="badge badge--good">达标</span></span>
|
||||
<span class="entry-metric">花粉 <span class="badge badge--normal">低</span></span>
|
||||
</div>
|
||||
<div class="entry-time-tag">05-25 09:30 更新</div>
|
||||
</div>
|
||||
<div class="entry-arrow"><svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
</a>
|
||||
@@ -225,7 +179,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<span class="entry-metric">积分 <strong>1,280</strong></span>
|
||||
<span class="entry-metric">连续记录 <strong>7</strong> 天</span>
|
||||
</div>
|
||||
<div class="entry-time-tag">05-25 08:00 更新</div>
|
||||
</div>
|
||||
<div class="entry-arrow"><svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
</a>
|
||||
|
||||
+1
-1
@@ -79,7 +79,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-back" onclick="location.href='../index.html'">
|
||||
<div class="nav-back" onclick="location.href='../home/index.html'">
|
||||
<svg width="12" height="20" fill="none"><path d="M10 2L2 10l8 8" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">体重监测</div>
|
||||
+41
-22
@@ -225,7 +225,43 @@ const SITE_MAP = [
|
||||
{ file:'exception-dirty.html', label:'系统脏数据' },
|
||||
{ file:'exception-result.html', label:'结果异常' }
|
||||
]},
|
||||
{ name:'体重管理', dir:'web-admin/weight-management', pages:[] },
|
||||
{ name:'体重管理', dir:'web-admin/weight-management', entry:'archive-personal-weight-data.html', pages:[
|
||||
{ file:'archive-personal-weight-data.html', label:'个人体重数据' },
|
||||
{ file:'archive-personal-weight-detail.html', label:'个人体重数据详情' },
|
||||
{ file:'archive-unit-report.html', label:'单位报表数据' },
|
||||
{ file:'archive-algorithm-model.html', label:'算法模型' },
|
||||
{ file:'plan-list.html', label:'计划列表' },
|
||||
{ file:'registration-tracking.html', label:'报名跟踪' },
|
||||
{ file:'target-weight-review.html', label:'目标体重审核' },
|
||||
{ file:'action-record.html', label:'行动记录' },
|
||||
{ file:'action-overview.html', label:'行动总览' },
|
||||
{ file:'detail-data.html', label:'详细数据' },
|
||||
{ file:'weight-ranking.html', label:'体重排名' },
|
||||
{ file:'activity-statistics.html', label:'活动统计' },
|
||||
{ file:'personal-target-data.html', label:'个人目标数据' },
|
||||
{ file:'scale-device.html', label:'体重秤-设备管理' },
|
||||
{ file:'scale-monitor.html', label:'体重秤-设备监测' },
|
||||
{ file:'scale-device-add.html', label:'体重秤-新增设备' },
|
||||
{ file:'scale-monitor-detail.html', label:'体重秤-数据明细' },
|
||||
{ file:'bluetooth-device.html', label:'蓝牙称-设备管理' },
|
||||
{ file:'bluetooth-monitor.html', label:'蓝牙称-设备监测' },
|
||||
{ file:'bluetooth-device-add.html', label:'蓝牙称-新增设备' },
|
||||
{ file:'bluetooth-monitor-detail.html', label:'蓝牙称-数据明细' },
|
||||
{ file:'fat-device.html', label:'体脂仪-设备管理' },
|
||||
{ file:'fat-monitor.html', label:'体脂仪-设备监测' },
|
||||
{ file:'fat-device-add.html', label:'体脂仪-新增设备' },
|
||||
{ file:'fat-monitor-detail.html', label:'体脂仪-数据明细' },
|
||||
{ file:'sport-device.html', label:'运动器械-设备管理' },
|
||||
{ file:'sport-monitor.html', label:'运动器械-设备监测' },
|
||||
{ file:'sport-device-add.html', label:'运动器械-新增设备' },
|
||||
{ file:'sport-monitor-detail.html', label:'运动器械-数据明细' },
|
||||
{ file:'exception-system-dirty.html', label:'系统脏数据' },
|
||||
{ file:'exception-result-abnormal.html', label:'结果异常' },
|
||||
{ file:'dept-stat.html', label:'单位数据统计' },
|
||||
{ file:'employee-data.html', label:'员工监测数据' },
|
||||
{ file:'employee-data-record.html', label:'员工监测数据记录' },
|
||||
{ file:'employee-stat.html', label:'员工数据统计' }
|
||||
]},
|
||||
{ name:'营养管理', dir:'web-admin/nutrition', entry:'trace-query.html', pages:[
|
||||
{ file:'trace-query.html', label:'溯源查询' },
|
||||
{ file:'trace-timeline.html', label:'链路可视化' },
|
||||
@@ -289,13 +325,12 @@ const SITE_MAP = [
|
||||
{ file:'ano-result.html', label:'结果异常' }
|
||||
]},
|
||||
{ name:'运动管理', dir:'web-admin/exercise', pages:[] },
|
||||
{ name:'健康监测', dir:'web-admin/health-monitor', entry:'archive-personal.html', prd:'web-admin/health-monitor/doc/PRD.md', done:true, pages:[
|
||||
{ name:'健康监测', dir:'web-admin/health-monitor', entry:'archive-personal.html', prd:'web-admin/health-monitor/doc/PRD.md', pages:[
|
||||
{ file:'archive-personal.html', label:'个人监测数据' },
|
||||
{ file:'archive-personal-detail.html', label:'个人监测数据详情' },
|
||||
{ file:'archive-unit.html', label:'单位报表数据' },
|
||||
{ file:'archive-unit-health-checkup-detail.html', label:'单位报表-健康排查详情' },
|
||||
{ file:'archive-unit-wearable-detail.html', label:'单位报表-穿戴监测详情' },
|
||||
{ file:'archive-unit-weight-detail.html', label:'单位报表-体重监测详情' },
|
||||
{ file:'archive-unit-environment-detail.html', label:'单位报表-环境监测详情' },
|
||||
{ file:'archive-algorithm.html', label:'算法模型' },
|
||||
{ file:'crowd-status-employee.html', label:'健康现状-员工评估信息' },
|
||||
@@ -314,7 +349,8 @@ const SITE_MAP = [
|
||||
{ file:'wearable/notification.html', label:'穿戴监测-通知消息' },
|
||||
{ file:'wearable/dept-stat.html', label:'穿戴监测-部门数据统计' },
|
||||
{ file:'wearable/personal-stat.html', label:'穿戴监测-个人数据统计' },
|
||||
{ file:'wearable/dept-report.html', label:'穿戴监测-单位数据分析报告' },
|
||||
/* 运维菜单：隐藏，恢复时删除注释 */
|
||||
/* { file:'wearable/dept-report.html', label:'穿戴监测-单位数据分析报告' },
|
||||
{ file:'wearable/ops/terminal-default-config.html', label:'穿戴监测-运维中心-默认配置' },
|
||||
{ file:'wearable/ops/terminal-config-info.html', label:'穿戴监测-运维中心-配置信息' },
|
||||
{ file:'wearable/ops/monitor-ecg.html', label:'穿戴监测-运维中心-心电图信息' },
|
||||
@@ -331,24 +367,7 @@ const SITE_MAP = [
|
||||
{ file:'wearable/ops/log-error.html', label:'穿戴监测-运维中心-手表错误日志' },
|
||||
{ file:'wearable/ops/log-task.html', label:'穿戴监测-运维中心-任务日志' },
|
||||
{ file:'wearable/ops/log-mqtt.html', label:'穿戴监测-运维中心-mqtt消息日志' },
|
||||
{ file:'wearable/ops/sdc-overview.html', label:'穿戴监测-运维中心-SDC信息' },
|
||||
{ file:'weight/scale-device.html', label:'体重秤-设备管理' },
|
||||
{ file:'weight/scale-monitor.html', label:'体重秤-设备监测' },
|
||||
{ file:'weight/scale-monitor-detail.html', label:'体重秤-数据明细' },
|
||||
{ file:'weight/scale-stat.html', label:'体重秤-设备统计' },
|
||||
{ file:'weight/bluetooth-device.html', label:'蓝牙称-设备管理' },
|
||||
{ file:'weight/bluetooth-monitor.html', label:'蓝牙称-设备监测' },
|
||||
{ file:'weight/bluetooth-monitor-detail.html', label:'蓝牙称-数据明细' },
|
||||
{ file:'weight/bluetooth-stat.html', label:'蓝牙称-设备统计' },
|
||||
{ file:'weight/fat-device.html', label:'体脂仪-设备管理' },
|
||||
{ file:'weight/fat-monitor.html', label:'体脂仪-设备监测' },
|
||||
{ file:'weight/fat-monitor-detail.html', label:'体脂仪-数据明细' },
|
||||
{ file:'weight/fat-stat.html', label:'体脂仪-设备统计' },
|
||||
{ file:'weight/sport-device.html', label:'运动器械-设备管理' },
|
||||
{ file:'weight/sport-monitor.html', label:'运动器械-设备监测' },
|
||||
{ file:'weight/sport-monitor-detail.html', label:'运动器械-数据明细' },
|
||||
{ file:'weight/sport-stat.html', label:'运动器械-设备统计' },
|
||||
{ file:'weight/employee-data.html', label:'体重监测-员工数据' },
|
||||
{ file:'wearable/ops/sdc-overview.html', label:'穿戴监测-运维中心-SDC信息' }, */
|
||||
{ file:'environment/indoor-device-list.html', label:'室内空气-设备列表' },
|
||||
{ file:'environment/indoor-device-category.html', label:'室内空气-设备分类' },
|
||||
{ file:'environment/indoor-data-monitor.html', label:'室内空气-数据监测' },
|
||||
|
||||
@@ -132,8 +132,7 @@
|
||||
<a href="crowd-status-employee.html">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -109,7 +109,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.metric-summary__label{font-size:var(--font-xs);color:var(--text-secondary);margin-top:2px;}
|
||||
.chart-area{width:100%;height:300px;border:1px solid var(--border);border-radius:var(--radius-md);background:#fafafa;position:relative;overflow:hidden;}
|
||||
.data-history-table{width:100%;}
|
||||
/* 体重监测弹窗 */
|
||||
/* 通用弹窗 */
|
||||
.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s;}
|
||||
.modal-mask.show{opacity:1;pointer-events:auto;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:680px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
|
||||
@@ -118,12 +118,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;font-size:20px;color:var(--text-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:24px;}
|
||||
.detail-section{margin-bottom:20px;}.detail-section:last-child{margin-bottom:0;}
|
||||
.detail-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:12px;padding-left:8px;border-left:3px solid var(--primary);}
|
||||
.detail-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;}
|
||||
.detail-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid #f0f0f0;margin:-0.5px;}
|
||||
.detail-item__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.detail-item__value{font-size:var(--font-xs);color:var(--text-primary);font-weight:500;}
|
||||
/* 健康现状 */
|
||||
.hs-field{display:flex;align-items:center;gap:12px;margin-bottom:24px;}
|
||||
.hs-field__label{font-size:var(--font-sm);color:var(--text-primary);white-space:nowrap;}
|
||||
@@ -153,8 +147,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<a href="crowd-status-employee.html">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -201,7 +194,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<div class="tab-item active" onclick="switchMainPanel('health-status',this)">健康现状</div>
|
||||
<div class="tab-item" onclick="switchMainPanel('health-checkup',this)">健康排查</div>
|
||||
<div class="tab-item" onclick="switchMainPanel('wearable',this)">穿戴监测</div>
|
||||
<div class="tab-item" onclick="switchMainPanel('weight',this)">体重监测</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab1: 健康现状 -->
|
||||
@@ -317,37 +309,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab4: 体重监测 -->
|
||||
<div class="tab-panel" id="panel-weight">
|
||||
<div style="display:flex;gap:16px;margin-bottom:16px;align-items:center;">
|
||||
<div class="filter-item"><label>测量设备</label><select class="filter-select"><option value="">全部</option><option>体重秤</option><option>蓝牙称</option><option>体脂仪</option></select></div>
|
||||
<div class="filter-item"><label>测量日期</label><input class="filter-input" type="date" style="min-width:130px;"> <span style="color:var(--text-placeholder);font-size:var(--font-sm);">至</span> <input class="filter-input" type="date" style="min-width:130px;"></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>测量时间</th><th>测量设备</th><th>设备编码</th><th>身高(cm)</th><th>体重(kg)</th><th>BMI</th><th>基础代谢(kcal)</th><th>体脂肪量(kg)</th><th>体脂肪率(%)</th><th>体水分量(kg)</th><th>蛋白质量(kg)</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>2026-05-10 08:30</td><td>体重秤</td><td>SC-2024-001</td><td>175</td><td>72.5</td><td>23.7</td><td>1680</td><td>13.2</td><td>18.2</td><td>40.1</td><td>11.6</td><td><a class="link" onclick="openWeightModal(0)">详细信息</a></td></tr>
|
||||
<tr><td>2026-05-08 07:45</td><td>体脂仪</td><td>FT-2024-002</td><td>175</td><td>72.8</td><td>23.8</td><td>1675</td><td>13.4</td><td>18.4</td><td>39.8</td><td>11.5</td><td><a class="link" onclick="openWeightModal(1)">详细信息</a></td></tr>
|
||||
<tr><td>2026-05-06 18:20</td><td>蓝牙称</td><td>BT-2024-003</td><td>175</td><td>73.0</td><td>23.8</td><td>1682</td><td>13.5</td><td>18.5</td><td>40.0</td><td>11.6</td><td><a class="link" onclick="openWeightModal(2)">详细信息</a></td></tr>
|
||||
<tr><td>2026-05-04 08:10</td><td>体重秤</td><td>SC-2024-001</td><td>175</td><td>72.3</td><td>23.6</td><td>1678</td><td>13.1</td><td>18.1</td><td>40.2</td><td>11.7</td><td><a class="link" onclick="openWeightModal(3)">详细信息</a></td></tr>
|
||||
<tr><td>2026-05-02 09:00</td><td>体脂仪</td><td>FT-2024-002</td><td>175</td><td>73.2</td><td>23.9</td><td>1685</td><td>13.6</td><td>18.6</td><td>39.9</td><td>11.5</td><td><a class="link" onclick="openWeightModal(4)">详细信息</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>共 142 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">...</button><button class="page-btn">15</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 体重详情弹窗 -->
|
||||
<div class="modal-mask" id="weightModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header"><h3 id="weightModalTitle">测量详情</h3><button class="modal__close" onclick="closeWeightModal()">×</button></div>
|
||||
<div class="modal__body" id="weightModalBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 心电图趋势详情弹窗 -->
|
||||
<div class="modal-mask" id="ecgDetailModal">
|
||||
@@ -459,21 +420,6 @@ function openSurveyModal(time){
|
||||
document.getElementById('surveyModal').classList.add('show');
|
||||
}
|
||||
document.getElementById('surveyModal').addEventListener('click',function(e){if(e.target===this)this.classList.remove('show');});
|
||||
// 体重监测弹窗
|
||||
var weightRecords=[
|
||||
{device:'体重秤',data:{"基础指标":{"身高(cm)":"175","体重(kg)":"72.5","BMI":"23.7","基础代谢":"1,680","体脂肪量(kg)":"13.2","体脂肪率(%)":"18.2"},"水分与蛋白质":{"体水分量(kg)":"40.1","体水分率(%)":"55.3","蛋白质量(kg)":"11.6","蛋白质率(%)":"16.0"},"肌肉与骨骼":{"肌肉率(%)":"77.0","肌肉量(kg)":"55.8","体骨骼量(kg)":"2.9"},"脂肪分析":{"皮下脂肪率(%)":"14.9","内脏脂肪等级":"6","去脂体重(kg)":"59.3"}}},
|
||||
{device:'体脂仪',data:{"基础指标":{"身高(cm)":"175","体重(kg)":"72.8","BMI":"23.8","基础代谢":"1,675","InBody评分(分)":"65"},"体脂分析":{"体脂肪量(kg)":"13.4","体脂肪率(%)":"18.4","内脏脂肪等级":"6","去脂体重(kg)":"59.4"},"体成分":{"体水分(L)":"43.5","蛋白质(kg)":"11.5","无机盐(kg)":"4.05","骨骼肌量(kg)":"33.2"}}},
|
||||
{device:'蓝牙称',data:{"基础指标":{"身高(cm)":"175","体重(kg)":"73.0","BMI":"23.8","基础代谢":"1,682","体脂肪量(kg)":"13.5","体脂肪率(%)":"18.5"},"水分与蛋白质":{"体水分量(kg)":"40.0","体水分率(%)":"54.8","蛋白质量(kg)":"11.6","蛋白质率(%)":"15.9"},"肌肉与骨骼":{"体肌肉量(kg)":"55.6","体肌肉率(%)":"76.2","体骨骼量(kg)":"2.9"}}},
|
||||
{device:'体重秤',data:{"基础指标":{"身高(cm)":"175","体重(kg)":"72.3","BMI":"23.6","基础代谢":"1,678","体脂肪量(kg)":"13.1","体脂肪率(%)":"18.1"},"水分与蛋白质":{"体水分量(kg)":"40.2","体水分率(%)":"55.6","蛋白质量(kg)":"11.7","蛋白质率(%)":"16.2"},"肌肉与骨骼":{"肌肉率(%)":"77.3","肌肉量(kg)":"55.9","体骨骼量(kg)":"3.0"}}},
|
||||
{device:'体脂仪',data:{"基础指标":{"身高(cm)":"175","体重(kg)":"73.2","BMI":"23.9","基础代谢":"1,685","InBody评分(分)":"63"},"体脂分析":{"体脂肪量(kg)":"13.6","体脂肪率(%)":"18.6","内脏脂肪等级":"6","去脂体重(kg)":"59.6"},"体成分":{"体水分(L)":"43.8","蛋白质(kg)":"11.5","无机盐(kg)":"4.08","骨骼肌量(kg)":"33.4"}}}
|
||||
];
|
||||
function openWeightModal(idx){
|
||||
var r=weightRecords[idx];document.getElementById('weightModalTitle').textContent='测量详情 - '+r.device;
|
||||
var html='';for(var section in r.data){html+='<div class="detail-section"><div class="detail-section__title">'+section+'</div><div class="detail-grid">';var items=r.data[section];for(var k in items){html+='<div class="detail-item"><span class="detail-item__label">'+k+'</span><span class="detail-item__value">'+items[k]+'</span></div>';}html+='</div></div>';}
|
||||
document.getElementById('weightModalBody').innerHTML=html;document.getElementById('weightModal').classList.add('show');
|
||||
}
|
||||
function closeWeightModal(){document.getElementById('weightModal').classList.remove('show');}
|
||||
document.getElementById('weightModal').addEventListener('click',function(e){if(e.target===this)closeWeightModal();});
|
||||
// URL参数回显
|
||||
(function(){
|
||||
var params=new URLSearchParams(location.search);
|
||||
|
||||
@@ -99,8 +99,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<a href="crowd-status-employee.html">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -171,19 +170,12 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<th rowspan="2">健康现状</th>
|
||||
<th colspan="2">健康排查</th>
|
||||
<th colspan="2">穿戴监测</th>
|
||||
<th colspan="6">体重监测</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>积分 ↕</th>
|
||||
<th>连续签到天数 ↕</th>
|
||||
<th>绑定设备 ↕</th>
|
||||
<th>异常次数 ↕</th>
|
||||
<th>最初体重(kg) ↕</th>
|
||||
<th>最终体重(kg) ↕</th>
|
||||
<th>体重变化(kg) ↕</th>
|
||||
<th>最初BMI ↕</th>
|
||||
<th>最终BMI ↕</th>
|
||||
<th>BMI变化 ↕</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -193,7 +185,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td><span class="tag tag-E">E类</span></td>
|
||||
<td>92</td><td>128</td>
|
||||
<td><span class="tag tag-green">是</span></td><td>2</td>
|
||||
<td>72.5</td><td>70.2</td><td>-2.3</td><td>24.1</td><td>23.4</td><td>-0.7</td>
|
||||
<td><a class="link" href="archive-personal-detail.html?id=EMP001">详细信息</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -201,7 +192,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td><span class="tag tag-D">D类</span></td>
|
||||
<td>88</td><td>125</td>
|
||||
<td><span class="tag tag-green">是</span></td><td>1</td>
|
||||
<td>58.3</td><td>57.8</td><td>-0.5</td><td>21.8</td><td>21.6</td><td>-0.2</td>
|
||||
<td><a class="link" href="archive-personal-detail.html?id=EMP002">详细信息</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -209,7 +199,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td><span class="tag tag-B">B类</span></td>
|
||||
<td>78</td><td>120</td>
|
||||
<td><span class="tag tag-green">是</span></td><td>3</td>
|
||||
<td>78.9</td><td>76.5</td><td>-2.4</td><td>26.1</td><td>25.3</td><td>-0.8</td>
|
||||
<td><a class="link" href="archive-personal-detail.html?id=EMP005">详细信息</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -217,7 +206,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td><span class="tag tag-C">C类</span></td>
|
||||
<td>76</td><td>98</td>
|
||||
<td><span class="tag tag-orange">否</span></td><td>0</td>
|
||||
<td>85.6</td><td>83.4</td><td>-2.2</td><td>28.2</td><td>27.5</td><td>-0.7</td>
|
||||
<td><a class="link" href="archive-personal-detail.html?id=EMP003">详细信息</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -225,7 +213,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td><span class="tag tag-A">A类</span></td>
|
||||
<td>95</td><td>131</td>
|
||||
<td><span class="tag tag-green">是</span></td><td>0</td>
|
||||
<td>62.1</td><td>61.5</td><td>-0.6</td><td>23.2</td><td>23.0</td><td>-0.2</td>
|
||||
<td><a class="link" href="archive-personal-detail.html?id=EMP004">详细信息</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康监测 - 单位环境监测详情 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -79,8 +79,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<a href="crowd-status-employee.html">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -116,7 +115,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<span class="sep">/</span>
|
||||
<span id="unitDept"></span>
|
||||
<span class="sep">/</span>
|
||||
<span>环境监测</span>
|
||||
<span>健康环境</span>
|
||||
</div>
|
||||
<div class="detail-title" id="detailTitle"></div>
|
||||
<div class="detail-meta" id="detailMeta"></div>
|
||||
@@ -501,7 +500,7 @@ var dept = getUrlParam('dept') || '';
|
||||
var displayName = unit + (dept ? ' - ' + dept : '');
|
||||
|
||||
document.getElementById('unitDept').textContent = displayName;
|
||||
document.getElementById('detailTitle').textContent = displayName + ' — 环境监测 详情';
|
||||
document.getElementById('detailTitle').textContent = displayName + ' — 健康环境 详情';
|
||||
document.getElementById('detailMeta').textContent = '2026年 · 设备总数 39';
|
||||
|
||||
// [交互] 设备类型与监测类型联动
|
||||
|
||||
@@ -79,8 +79,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<a href="crowd-status-employee.html">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -79,8 +79,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<a href="crowd-status-employee.html">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -79,8 +79,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<a href="crowd-status-employee.html">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -99,8 +99,7 @@ tbody tr.stat-row:hover{background:#E6F0FF;}
|
||||
<a href="crowd-status-employee.html">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</div>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -55,8 +55,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<a href="crowd-status-employee.html" class="active">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -55,8 +55,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<a href="crowd-status-employee.html" class="active">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室内空气 - 应用记录 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -93,8 +93,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -104,12 +103,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item active">应用记录</a>
|
||||
@@ -117,10 +116,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -131,7 +130,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -142,7 +141,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室内空气 - 动态分析 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -97,6 +97,17 @@
|
||||
.chart-summary__dot{width:8px;height:8px;border-radius:50%;}
|
||||
.chart-summary__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.chart-summary__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:600;}
|
||||
.chart-limit-line{stroke:#FF4D4F;stroke-width:1.5;stroke-dasharray:6,3;opacity:.7;}
|
||||
.chart-limit-exceed{fill:#FF4D4F;opacity:.08;}
|
||||
.chart-limit-label{fill:#FF4D4F;font-size:10px;font-weight:500;}
|
||||
/* 数据点 Tip 弹窗 */
|
||||
.chart-tooltip{display:none;position:fixed;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:10px 14px;z-index:400;pointer-events:none;font-size:var(--font-sm);min-width:140px;}
|
||||
.chart-tooltip.show{display:block;}
|
||||
.chart-tooltip__date{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #f0f0f0;}
|
||||
.chart-tooltip__row{display:flex;align-items:center;gap:6px;padding:2px 0;}
|
||||
.chart-tooltip__dot{display:inline-block;width:8px;height:8px;border-radius:2px;flex-shrink:0;}
|
||||
.chart-tooltip__label{color:var(--text-secondary);font-size:var(--font-xs);flex:1;}
|
||||
.chart-tooltip__val{font-size:var(--font-sm);color:var(--text-primary);font-weight:600;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -107,8 +118,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -118,12 +128,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item active">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -131,10 +141,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -145,7 +155,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -156,7 +166,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -241,105 +251,600 @@
|
||||
</div>
|
||||
<!-- 监测类型切换 -->
|
||||
<div class="metric-bar">
|
||||
<button class="metric-btn active" onclick="switchMetric(this,'temp')">温度</button>
|
||||
<button class="metric-btn active" onclick="switchMetric(this,'aqi')">空气质量指数</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'temp')">温度</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'humi')">湿度</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'co2')">二氧化碳</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'hcho')">甲醛</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'pm25')">PM2.5</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'pm10')">PM10</button>
|
||||
</div>
|
||||
<!-- 统计摘要 -->
|
||||
<div class="chart-summary">
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#1890FF;"></span><span class="chart-summary__label">平均值</span><span class="chart-summary__value" id="avgVal">24.3 ℃</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#52C41A;"></span><span class="chart-summary__label">最小值</span><span class="chart-summary__value" id="minVal">21.8 ℃</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#FF4D4F;"></span><span class="chart-summary__label">最大值</span><span class="chart-summary__value" id="maxVal">26.5 ℃</span></div>
|
||||
<!-- 统计摘要 [交互] AQI 模式下隐藏 -->
|
||||
<div class="chart-summary" id="chartSummary">
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#1890FF;"></span><span class="chart-summary__label">平均值</span><span class="chart-summary__value" id="avgVal">58</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#52C41A;"></span><span class="chart-summary__label">最小值</span><span class="chart-summary__value" id="minVal">35</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#FF4D4F;"></span><span class="chart-summary__label">最大值</span><span class="chart-summary__value" id="maxVal">82</span></div>
|
||||
<div class="chart-summary__item" style="margin-left:auto;" id="limitSummary"></div>
|
||||
</div>
|
||||
<!-- 趋势图 -->
|
||||
<div class="chart-area">
|
||||
<div class="chart-container" id="chartContainer">
|
||||
<svg viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#1890FF" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#1890FF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Y 轴网格线 -->
|
||||
<line x1="60" y1="20" x2="780" y2="20" class="chart-grid-line"/>
|
||||
<line x1="60" y1="80" x2="780" y2="80" class="chart-grid-line"/>
|
||||
<line x1="60" y1="140" x2="780" y2="140" class="chart-grid-line"/>
|
||||
<line x1="60" y1="200" x2="780" y2="200" class="chart-grid-line"/>
|
||||
<line x1="60" y1="260" x2="780" y2="260" class="chart-grid-line"/>
|
||||
<!-- Y 轴刻度 -->
|
||||
<text x="50" y="24" class="chart-axis-label" text-anchor="end">28</text>
|
||||
<text x="50" y="84" class="chart-axis-label" text-anchor="end">26</text>
|
||||
<text x="50" y="144" class="chart-axis-label" text-anchor="end">24</text>
|
||||
<text x="50" y="204" class="chart-axis-label" text-anchor="end">22</text>
|
||||
<text x="50" y="264" class="chart-axis-label" text-anchor="end">20</text>
|
||||
<!-- X 轴标签 -->
|
||||
<text x="90" y="290" class="chart-axis-label" text-anchor="middle">00:00</text>
|
||||
<text x="180" y="290" class="chart-axis-label" text-anchor="middle">04:00</text>
|
||||
<text x="270" y="290" class="chart-axis-label" text-anchor="middle">06:00</text>
|
||||
<text x="360" y="290" class="chart-axis-label" text-anchor="middle">08:00</text>
|
||||
<text x="450" y="290" class="chart-axis-label" text-anchor="middle">10:00</text>
|
||||
<text x="540" y="290" class="chart-axis-label" text-anchor="middle">12:00</text>
|
||||
<text x="630" y="290" class="chart-axis-label" text-anchor="middle">14:00</text>
|
||||
<text x="720" y="290" class="chart-axis-label" text-anchor="middle">16:00</text>
|
||||
<!-- X 轴线 -->
|
||||
<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>
|
||||
<!-- 面积填充 -->
|
||||
<path class="chart-area-fill" d="M90,200 L150,220 L210,240 L270,210 L330,170 L390,140 L450,120 L510,130 L570,110 L630,100 L690,120 L750,140 L750,270 L90,270 Z"/>
|
||||
<!-- 折线 -->
|
||||
<polyline class="chart-line" points="90,200 150,220 210,240 270,210 330,170 390,140 450,120 510,130 570,110 630,100 690,120 750,140"/>
|
||||
<!-- 数据点 -->
|
||||
<circle cx="90" cy="200" r="4" class="chart-dot"/>
|
||||
<circle cx="150" cy="220" r="4" class="chart-dot"/>
|
||||
<circle cx="210" cy="240" r="4" class="chart-dot"/>
|
||||
<circle cx="270" cy="210" r="4" class="chart-dot"/>
|
||||
<circle cx="330" cy="170" r="4" class="chart-dot"/>
|
||||
<circle cx="390" cy="140" r="4" class="chart-dot"/>
|
||||
<circle cx="450" cy="120" r="4" class="chart-dot"/>
|
||||
<circle cx="510" cy="130" r="4" class="chart-dot"/>
|
||||
<circle cx="570" cy="110" r="4" class="chart-dot"/>
|
||||
<circle cx="630" cy="100" r="4" class="chart-dot"/>
|
||||
<circle cx="690" cy="120" r="4" class="chart-dot"/>
|
||||
<circle cx="750" cy="140" r="4" class="chart-dot"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="chart-container" id="chartContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 数据点 Tip 弹窗 -->
|
||||
<div class="chart-tooltip" id="chartTooltip">
|
||||
<div class="chart-tooltip__date" id="tooltipDate"></div>
|
||||
<div id="tooltipBody"></div>
|
||||
</div>
|
||||
|
||||
<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');})();
|
||||
|
||||
/* 时间范围 Tab 切换 */
|
||||
var currentTimeRange = '近24小时';
|
||||
function switchTimeTab(el){
|
||||
var tabs = document.querySelectorAll('.time-tab');
|
||||
tabs.forEach(function(t){t.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
currentTimeRange = el.textContent;
|
||||
var activeBtn = document.querySelector('.metric-btn.active');
|
||||
if(activeBtn && currentMetricKey){
|
||||
switchMetric(activeBtn, currentMetricKey);
|
||||
}
|
||||
}
|
||||
|
||||
/* AQI 等级颜色配置（与 indoor-data-monitor 一致） */
|
||||
var aqiLevels = [
|
||||
{name:'清洁', color:'#13C2C2', range:[0,20]},
|
||||
{name:'未污染', color:'#52C41A', range:[21,50]},
|
||||
{name:'轻污染', color:'#FAAD14', range:[51,100]},
|
||||
{name:'中污染', color:'#FA541C', range:[101,150]},
|
||||
{name:'重污染', color:'#FF4D4F', range:[151,200]}
|
||||
];
|
||||
|
||||
/* 监测类型切换 */
|
||||
var currentMetricKey = 'aqi';
|
||||
var metricData = {
|
||||
temp: {avg:'24.3 ℃', min:'21.8 ℃', max:'26.5 ℃'},
|
||||
humi: {avg:'55 %', min:'42 %', max:'68 %'},
|
||||
co2: {avg:'480 ppm',min:'380 ppm',max:'620 ppm'},
|
||||
hcho: {avg:'0.04 mg/m³',min:'0.02 mg/m³',max:'0.07 mg/m³'},
|
||||
pm25: {avg:'38 μg/m³', min:'22 μg/m³', max:'56 μg/m³'},
|
||||
pm10: {avg:'72 μg/m³', min:'45 μg/m³', max:'98 μg/m³'}
|
||||
aqi: {avg:'58', min:'35', max:'82', unit:'',
|
||||
yMax:200, yTicks:[200,150,100,50,0],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
isAQI:true,
|
||||
levelBands:[
|
||||
{yMin:257,yMax:270,label:'清洁',color:'#13C2C2',opacity:.1},
|
||||
{yMin:207,yMax:257,label:'未污染',color:'#52C41A',opacity:.1},
|
||||
{yMin:145,yMax:207,label:'轻污染',color:'#FAAD14',opacity:.1},
|
||||
{yMin:82,yMax:145,label:'中污染',color:'#FA541C',opacity:.1},
|
||||
{yMin:20,yMax:82,label:'重污染',color:'#FF4D4F',opacity:.1}
|
||||
],
|
||||
data:{
|
||||
'近24小时':{avg:'58',min:'35',max:'82',points:[55,42,35,48,65,78,82,75,62,58,52,48]},
|
||||
'近7日':{barData:[
|
||||
{clean:6,good:8,light:6,moderate:4,heavy:0},
|
||||
{clean:8,good:7,light:5,moderate:4,heavy:0},
|
||||
{clean:4,good:6,light:8,moderate:5,heavy:1},
|
||||
{clean:2,good:5,light:7,moderate:8,heavy:2},
|
||||
{clean:7,good:8,light:5,moderate:4,heavy:0},
|
||||
{clean:9,good:7,light:4,moderate:4,heavy:0},
|
||||
{clean:6,good:9,light:5,moderate:4,heavy:0}
|
||||
]},
|
||||
'近30日':{barData:[
|
||||
{clean:5,good:7,light:6,moderate:5,heavy:1},
|
||||
{clean:6,good:8,light:5,moderate:5,heavy:0},
|
||||
{clean:4,good:6,light:8,moderate:5,heavy:1},
|
||||
{clean:7,good:7,light:5,moderate:5,heavy:0},
|
||||
{clean:8,good:6,light:4,moderate:4,heavy:2},
|
||||
{clean:5,good:8,light:6,moderate:4,heavy:1},
|
||||
{clean:9,good:6,light:4,moderate:5,heavy:0},
|
||||
{clean:3,good:5,light:8,moderate:6,heavy:2},
|
||||
{clean:6,good:7,light:5,moderate:6,heavy:0},
|
||||
{clean:7,good:8,light:4,moderate:5,heavy:0},
|
||||
{clean:4,good:6,light:7,moderate:6,heavy:1},
|
||||
{clean:8,good:7,light:5,moderate:4,heavy:0},
|
||||
{clean:5,good:9,light:5,moderate:5,heavy:0},
|
||||
{clean:6,good:6,light:6,moderate:5,heavy:1},
|
||||
{clean:7,good:8,light:4,moderate:4,heavy:1},
|
||||
{clean:9,good:6,light:5,moderate:4,heavy:0},
|
||||
{clean:4,good:7,light:7,moderate:5,heavy:1},
|
||||
{clean:6,good:8,light:5,moderate:5,heavy:0},
|
||||
{clean:8,good:6,light:4,moderate:5,heavy:1},
|
||||
{clean:5,good:7,light:6,moderate:6,heavy:0},
|
||||
{clean:7,good:8,light:4,moderate:4,heavy:1},
|
||||
{clean:6,good:7,light:5,moderate:5,heavy:1},
|
||||
{clean:4,good:6,light:7,moderate:6,heavy:1},
|
||||
{clean:8,good:7,light:5,moderate:3,heavy:1},
|
||||
{clean:5,good:8,light:5,moderate:6,heavy:0},
|
||||
{clean:7,good:6,light:6,moderate:5,heavy:0},
|
||||
{clean:6,good:7,light:5,moderate:6,heavy:0},
|
||||
{clean:9,good:6,light:4,moderate:4,heavy:1},
|
||||
{clean:5,good:7,light:6,moderate:5,heavy:1},
|
||||
{clean:6,good:8,light:5,moderate:5,heavy:0}
|
||||
]}
|
||||
}},
|
||||
temp: {avg:'24.3 ℃', min:'21.8 ℃', max:'26.5 ℃', unit:'℃',
|
||||
yMax:28, yTicks:[28,26,24,22,20],
|
||||
limitUpper:27, limitLower:19, limitLabel:'上限 27.0 / 下限 19.0',
|
||||
data:{
|
||||
'近24小时':{avg:'24.3 ℃',min:'21.8 ℃',max:'26.5 ℃',points:[21.8,22.5,23.2,22.0,24.0,24.8,25.5,25.2,26.5,26.0,24.5,23.8]},
|
||||
'近7日':{avg:'23.8 ℃',min:'20.5 ℃',max:'27.2 ℃',points:[22.5,21.8,23.5,25.0,24.2,22.0,21.0]},
|
||||
'近30日':{avg:'23.5 ℃',min:'19.2 ℃',max:'28.5 ℃',points:[22.0,21.5,23.0,24.5,25.0,23.8,22.5,21.0,20.5,22.8,24.2,25.5,26.0,25.2,24.0,23.5,22.8,21.5,20.0,21.8,23.5,25.0,26.5,27.2,28.5,26.8,25.0,23.8,22.5,21.8]}
|
||||
}},
|
||||
humi: {avg:'55 %', min:'42 %', max:'68 %', unit:'%',
|
||||
yMax:80, yTicks:[80,70,60,50,40],
|
||||
limitUpper:68, limitLower:42, limitLabel:'上限 68 / 下限 42',
|
||||
data:{
|
||||
'近24小时':{avg:'55 %',min:'42 %',max:'68 %',points:[58,55,52,56,60,62,65,63,58,55,52,50]},
|
||||
'近7日':{avg:'58 %',min:'45 %',max:'72 %',points:[55,62,58,52,48,45,55]},
|
||||
'近30日':{avg:'56 %',min:'40 %',max:'75 %',points:[52,55,58,62,65,60,55,50,45,42,48,55,60,65,68,72,75,70,65,60,55,50,45,40,42,48,55,60,58,55]}
|
||||
}},
|
||||
co2: {avg:'480 ppm', min:'380 ppm', max:'620 ppm', unit:'ppm',
|
||||
yMax:700, yTicks:[700,600,500,400,300],
|
||||
limitUpper:620, limitLower:380, limitLabel:'上限 620 / 下限 380',
|
||||
data:{
|
||||
'近24小时':{avg:'480 ppm',min:'380 ppm',max:'620 ppm',points:[420,400,380,410,450,480,520,550,580,620,560,500]},
|
||||
'近7日':{avg:'510 ppm',min:'400 ppm',max:'650 ppm',points:[450,480,520,550,580,600,620]},
|
||||
'近30日':{avg:'495 ppm',min:'360 ppm',max:'680 ppm',points:[420,450,480,520,550,580,600,620,650,680,620,580,550,500,480,450,420,400,380,360,400,450,500,550,600,650,620,580,520,480]}
|
||||
}},
|
||||
hcho: {avg:'0.04 mg/m³', min:'0.02 mg/m³', max:'0.07 mg/m³', unit:'mg/m³',
|
||||
yMax:0.08, yTicks:[0.08,0.07,0.06,0.05,0.04],
|
||||
limitUpper:0.07, limitLower:0.02, limitLabel:'上限 0.07 / 下限 0.02',
|
||||
data:{
|
||||
'近24小时':{avg:'0.04 mg/m³',min:'0.02 mg/m³',max:'0.07 mg/m³',points:[0.03,0.025,0.02,0.03,0.035,0.04,0.045,0.05,0.055,0.07,0.06,0.05]},
|
||||
'近7日':{avg:'0.045 mg/m³',min:'0.022 mg/m³',max:'0.075 mg/m³',points:[0.035,0.030,0.025,0.022,0.035,0.045,0.055]},
|
||||
'近30日':{avg:'0.042 mg/m³',min:'0.018 mg/m³',max:'0.082 mg/m³',points:[0.035,0.030,0.025,0.020,0.018,0.025,0.035,0.045,0.055,0.065,0.075,0.082,0.070,0.060,0.050,0.040,0.035,0.028,0.022,0.025,0.035,0.045,0.055,0.065,0.072,0.060,0.050,0.042,0.035,0.030]}
|
||||
}},
|
||||
pm25: {avg:'38 μg/m³', min:'22 μg/m³', max:'56 μg/m³', unit:'μg/m³',
|
||||
yMax:60, yTicks:[60,55,50,45,40],
|
||||
limitUpper:56, limitLower:22, limitLabel:'上限 56 / 下限 22',
|
||||
data:{
|
||||
'近24小时':{avg:'38 μg/m³',min:'22 μg/m³',max:'56 μg/m³',points:[28,25,22,30,35,38,42,45,50,56,48,40]},
|
||||
'近7日':{avg:'42 μg/m³',min:'25 μg/m³',max:'60 μg/m³',points:[35,42,38,30,28,25,32]},
|
||||
'近30日':{avg:'40 μg/m³',min:'20 μg/m³',max:'65 μg/m³',points:[32,35,38,42,45,50,55,52,48,42,38,32,28,25,22,20,25,30,35,40,45,50,55,60,65,58,50,42,35,30]}
|
||||
}},
|
||||
pm10: {avg:'72 μg/m³', min:'45 μg/m³', max:'98 μg/m³', unit:'μg/m³',
|
||||
yMax:110, yTicks:[110,100,90,80,70],
|
||||
limitUpper:98, limitLower:45, limitLabel:'上限 98 / 下限 45',
|
||||
data:{
|
||||
'近24小时':{avg:'72 μg/m³',min:'45 μg/m³',max:'98 μg/m³',points:[55,50,45,52,60,65,72,75,80,88,98,85]},
|
||||
'近7日':{avg:'75 μg/m³',min:'50 μg/m³',max:'105 μg/m³',points:[60,65,72,78,85,92,98]},
|
||||
'近30日':{avg:'70 μg/m³',min:'42 μg/m³',max:'110 μg/m³',points:[55,60,65,70,75,80,85,90,95,98,105,110,100,90,82,75,68,60,55,48,42,45,52,60,68,75,82,90,95,85]}
|
||||
}}
|
||||
};
|
||||
|
||||
/* 根据时间范围获取 X 轴配置 */
|
||||
function getTimeConfig(timeRange){
|
||||
if(timeRange === '近7日'){
|
||||
var labels = [];
|
||||
var now = new Date(2026,5,3); // June 3, 2026
|
||||
for(var i=6;i>=0;i--){
|
||||
var d = new Date(now);
|
||||
d.setDate(d.getDate() - i);
|
||||
labels.push((d.getMonth()+1)+'/'+d.getDate());
|
||||
}
|
||||
return {labels:labels,count:7};
|
||||
} else if(timeRange === '近30日'){
|
||||
var labels = [];
|
||||
var now = new Date(2026,5,3);
|
||||
for(var i=29;i>=0;i--){
|
||||
var d = new Date(now);
|
||||
d.setDate(d.getDate() - i);
|
||||
labels.push((d.getMonth()+1)+'/'+d.getDate());
|
||||
}
|
||||
return {labels:labels,count:30};
|
||||
}
|
||||
return {
|
||||
labels:['00:00','02:00','04:00','06:00','08:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'],
|
||||
count:12
|
||||
};
|
||||
}
|
||||
|
||||
/* 根据数据点数量计算 X 坐标 */
|
||||
function calcXPositions(count){
|
||||
var positions = [];
|
||||
var step = 690 / (count - 1);
|
||||
for(var i=0;i<count;i++){
|
||||
positions.push(90 + Math.round(i * step));
|
||||
}
|
||||
return positions;
|
||||
}
|
||||
|
||||
/* 根据数值映射到 SVG Y 坐标 */
|
||||
function valToY(val, yMax){
|
||||
return 270 - (val / yMax) * 250;
|
||||
}
|
||||
|
||||
/* 渲染 SVG 图表 */
|
||||
function renderChart(key){
|
||||
var d = metricData[key];
|
||||
if(!d) return;
|
||||
var timeCfg = getTimeConfig(currentTimeRange);
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData) return;
|
||||
var points = timeData.points;
|
||||
var xPositions = calcXPositions(points.length);
|
||||
var yMax = d.yMax;
|
||||
var yTicks = d.yTicks;
|
||||
|
||||
// 网格线
|
||||
var gridLines = '';
|
||||
for(var i = 0; i < yTicks.length; i++){
|
||||
var y = valToY(yTicks[i], yMax);
|
||||
gridLines += '<line x1="60" y1="'+y+'" x2="780" y2="'+y+'" class="chart-grid-line"/>';
|
||||
gridLines += '<text x="50" y="'+(y+4)+'" class="chart-axis-label" text-anchor="end">'+yTicks[i]+'</text>';
|
||||
}
|
||||
|
||||
// X 轴标签 - 当点数太多时只显示部分
|
||||
var xLabelsHtml = '';
|
||||
var skip = points.length > 16 ? Math.floor(points.length / 10) : 1;
|
||||
for(var i = 0; i < timeCfg.labels.length; i++){
|
||||
if(i < xPositions.length && i % skip === 0){
|
||||
xLabelsHtml += '<text x="'+xPositions[i]+'" y="290" class="chart-axis-label" text-anchor="middle">'+timeCfg.labels[i]+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// AQI 等级背景
|
||||
var levelBandsHtml = '';
|
||||
if(d.isAQI && d.levelBands){
|
||||
for(var i = 0; i < d.levelBands.length; i++){
|
||||
var b = d.levelBands[i];
|
||||
levelBandsHtml += '<rect x="60" y="'+b.yMin+'" width="720" height="'+(b.yMax-b.yMin)+'" fill="'+b.color+'" opacity="'+b.opacity+'"/>';
|
||||
levelBandsHtml += '<text x="68" y="'+(b.yMin + (b.yMax-b.yMin)/2 + 4)+'" fill="'+b.color+'" font-size="10" font-weight="500">'+b.label+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 超标区域和虚线
|
||||
var limitHtml = '';
|
||||
if(d.limitUpper){
|
||||
var upperY = valToY(d.limitUpper, yMax);
|
||||
var lowerY = valToY(d.limitLower, yMax);
|
||||
if(upperY > 20){
|
||||
limitHtml += '<rect x="60" y="20" width="720" height="'+(upperY-20)+'" class="chart-limit-exceed"/>';
|
||||
}
|
||||
if(lowerY < 270){
|
||||
limitHtml += '<rect x="60" y="'+lowerY+'" width="720" height="'+(270-lowerY)+'" class="chart-limit-exceed"/>';
|
||||
}
|
||||
limitHtml += '<line x1="60" y1="'+upperY+'" x2="780" y2="'+upperY+'" class="chart-limit-line"/>';
|
||||
limitHtml += '<line x1="60" y1="'+lowerY+'" x2="780" y2="'+lowerY+'" class="chart-limit-line"/>';
|
||||
if(d.limitLabelUpper){
|
||||
limitHtml += '<text x="74" y="'+(upperY-4)+'" class="chart-limit-label">'+d.limitLabelUpper+'</text>';
|
||||
limitHtml += '<text x="74" y="'+(lowerY+14)+'" class="chart-limit-label">'+d.limitLabelLower+'</text>';
|
||||
} else {
|
||||
limitHtml += '<text x="74" y="'+(upperY-4)+'" class="chart-limit-label">上限 '+d.limitUpper+'</text>';
|
||||
limitHtml += '<text x="74" y="'+(lowerY+14)+'" class="chart-limit-label">下限 '+d.limitLower+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 折线
|
||||
var pathD = '';
|
||||
var polylinePoints = '';
|
||||
var dotsHtml = '';
|
||||
var dotR = points.length > 20 ? 3 : 4;
|
||||
// 全局存储 tooltip 数据供事件处理函数访问
|
||||
window._chartTooltipData = {key:key,points:points,labels:timeCfg.labels,unit:d.unit,yMax:yMax,xPositions:xPositions};
|
||||
for(var i = 0; i < points.length; i++){
|
||||
var y = valToY(points[i], yMax);
|
||||
var x = xPositions[i];
|
||||
pathD += (i===0?'M':'L') + x + ',' + y + ' ';
|
||||
polylinePoints += x + ',' + y + ' ';
|
||||
var dotColor = d.isAQI ? getAqiColor(points[i]) : '#1890FF';
|
||||
dotsHtml += '<circle cx="'+x+'" cy="'+y+'" r="'+dotR+'" class="chart-dot" style="fill:'+dotColor+';cursor:pointer;" ' +
|
||||
'data-idx="'+i+'" onmouseenter="showDotTip(event,this)" onmouseleave="hideDotTip()"/>';
|
||||
}
|
||||
pathD += 'L'+xPositions[points.length-1]+',270 L'+xPositions[0]+',270 Z';
|
||||
|
||||
var svg = '<svg viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet">' +
|
||||
'<defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">' +
|
||||
'<stop offset="0%" stop-color="#1890FF" stop-opacity="0.3"/>' +
|
||||
'<stop offset="100%" stop-color="#1890FF" stop-opacity="0"/>' +
|
||||
'</linearGradient></defs>' +
|
||||
gridLines +
|
||||
xLabelsHtml +
|
||||
'<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>' +
|
||||
levelBandsHtml +
|
||||
limitHtml +
|
||||
'<path class="chart-area-fill" d="'+pathD+'"/>' +
|
||||
'<polyline class="chart-line" points="'+polylinePoints.trim()+'"/>' +
|
||||
dotsHtml +
|
||||
'</svg>';
|
||||
|
||||
document.getElementById('chartContainer').innerHTML = svg;
|
||||
}
|
||||
|
||||
/* AQI 颜色映射 */
|
||||
function getAqiColor(val){
|
||||
if(val >= 151) return '#FF4D4F';
|
||||
if(val >= 101) return '#FA541C';
|
||||
if(val >= 51) return '#FAAD14';
|
||||
if(val >= 21) return '#52C41A';
|
||||
return '#13C2C2';
|
||||
}
|
||||
|
||||
/* 显示数据点 Tip */
|
||||
function showDotTip(e, el){
|
||||
var td = window._chartTooltipData;
|
||||
if(!td) return;
|
||||
var idx = parseInt(el.getAttribute('data-idx'));
|
||||
var dateStr = td.labels[idx] || '';
|
||||
var val = td.points[idx];
|
||||
var unit = td.unit || (td.data && td.data[td.key] ? td.data[td.key].unit : '');
|
||||
var color = td.key === 'aqi' ? getAqiColor(val) : '#1890FF';
|
||||
document.getElementById('tooltipDate').textContent = dateStr;
|
||||
document.getElementById('tooltipBody').innerHTML = '<div class="chart-tooltip__row"><span class="chart-tooltip__dot" style="background:'+color+'"></span><span class="chart-tooltip__label">数值</span><span class="chart-tooltip__val">'+val + (unit ? ' ' + unit : '')+'</span></div>';
|
||||
var tip = document.getElementById('chartTooltip');
|
||||
tip.classList.add('show');
|
||||
var rect = el.getBoundingClientRect();
|
||||
var tipW = tip.offsetWidth;
|
||||
var tipH = tip.offsetHeight;
|
||||
var left = rect.left - tipW / 2 + rect.width / 2;
|
||||
var top = rect.top - tipH - 12;
|
||||
if(left < 8) left = 8;
|
||||
if(left + tipW > window.innerWidth - 8) left = window.innerWidth - tipW - 8;
|
||||
tip.style.left = left + 'px';
|
||||
tip.style.top = top + 'px';
|
||||
}
|
||||
function hideDotTip(){
|
||||
document.getElementById('chartTooltip').classList.remove('show');
|
||||
}
|
||||
|
||||
/* AQI 柱状图获取主导等级 */
|
||||
function getDominantLevel(bd){
|
||||
var levels = [
|
||||
{name:'清洁', color:'#13C2C2', val:bd.clean},
|
||||
{name:'未污染', color:'#52C41A', val:bd.good},
|
||||
{name:'轻污染', color:'#FAAD14', val:bd.light},
|
||||
{name:'中污染', color:'#FA541C', val:bd.moderate},
|
||||
{name:'重污染', color:'#FF4D4F', val:bd.heavy}
|
||||
];
|
||||
var max = levels[0];
|
||||
for(var i = 1; i < levels.length; i++){
|
||||
if(levels[i].val > max.val) max = levels[i];
|
||||
}
|
||||
return max;
|
||||
}
|
||||
|
||||
/* 柱状图 Tip - 仅显示主导等级 */
|
||||
function showBarTip(e, el){
|
||||
var td = window._chartTooltipData;
|
||||
if(!td) return;
|
||||
var idx = parseInt(el.getAttribute('data-idx'));
|
||||
var bd = td.barData[idx];
|
||||
if(!bd) return;
|
||||
var dateStr = td.labels[idx] || '';
|
||||
var dom = getDominantLevel(bd);
|
||||
document.getElementById('tooltipDate').textContent = dateStr;
|
||||
document.getElementById('tooltipBody').innerHTML = '<div class="chart-tooltip__row">' +
|
||||
'<span class="chart-tooltip__dot" style="background:'+dom.color+'"></span>' +
|
||||
'<span class="chart-tooltip__label">等级</span>' +
|
||||
'<span class="chart-tooltip__val">'+dom.name+'</span></div>';
|
||||
var tip = document.getElementById('chartTooltip');
|
||||
tip.classList.add('show');
|
||||
var rect = el.getBoundingClientRect();
|
||||
var tipW = tip.offsetWidth;
|
||||
var tipH = tip.offsetHeight;
|
||||
var left = rect.left - tipW / 2 + rect.width / 2;
|
||||
var top = rect.top - tipH - 12;
|
||||
if(left < 8) left = 8;
|
||||
if(left + tipW > window.innerWidth - 8) left = window.innerWidth - tipW - 8;
|
||||
tip.style.left = left + 'px';
|
||||
tip.style.top = top + 'px';
|
||||
}
|
||||
|
||||
function switchMetric(el, key){
|
||||
currentMetricKey = key;
|
||||
var btns = document.querySelectorAll('.metric-btn');
|
||||
btns.forEach(function(b){b.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
var d = metricData[key];
|
||||
document.getElementById('avgVal').textContent = d.avg;
|
||||
document.getElementById('minVal').textContent = d.min;
|
||||
document.getElementById('maxVal').textContent = d.max;
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData) return;
|
||||
|
||||
// AQI 模式下隐藏统计摘要
|
||||
var summaryEl = document.getElementById('chartSummary');
|
||||
summaryEl.style.display = key === 'aqi' ? 'none' : '';
|
||||
|
||||
document.getElementById('avgVal').textContent = timeData.avg || '';
|
||||
document.getElementById('minVal').textContent = timeData.min || '';
|
||||
document.getElementById('maxVal').textContent = timeData.max || '';
|
||||
|
||||
// 更新图例区的上下限信息
|
||||
var limitEl = document.getElementById('limitSummary');
|
||||
if(d.limitLabel){
|
||||
limitEl.innerHTML = '<svg width="16" height="8" style="vertical-align:middle;"><line x1="0" y1="4" x2="16" y2="4" stroke="#FF4D4F" stroke-width="1.5" stroke-dasharray="3,2"/></svg>' +
|
||||
'<span class="chart-summary__label" style="margin-left:6px;">'+d.limitLabel+'</span>';
|
||||
limitEl.style.display = '';
|
||||
} else {
|
||||
limitEl.style.display = 'none';
|
||||
}
|
||||
|
||||
renderChart(key);
|
||||
}
|
||||
|
||||
/* 渲染 AQI 柱状堆积图 */
|
||||
function renderAQIBarChart(key){
|
||||
var d = metricData[key];
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData || !timeData.barData) return;
|
||||
var barData = timeData.barData;
|
||||
var timeCfg = getTimeConfig(currentTimeRange);
|
||||
var barCount = barData.length;
|
||||
// X 轴坐标计算
|
||||
var chartLeft = 70, chartRight = 780, chartWidth = chartRight - chartLeft;
|
||||
var barGap = Math.max(4, Math.floor(chartWidth / (barCount * 8)));
|
||||
var barWidth = Math.max(8, Math.floor((chartWidth - barGap * (barCount + 1)) / barCount));
|
||||
var xPositions = [];
|
||||
for(var i = 0; i < barCount; i++){
|
||||
xPositions.push(chartLeft + barGap + i * (barWidth + barGap) + Math.floor(barWidth / 2));
|
||||
}
|
||||
// Y 轴：0-24 小时
|
||||
var yTicks = [24,18,12,6,0];
|
||||
var gridLines = '';
|
||||
for(var i = 0; i < yTicks.length; i++){
|
||||
var y = 270 - (yTicks[i] / 24) * 250;
|
||||
gridLines += '<line x1="60" y1="'+y+'" x2="780" y2="'+y+'" class="chart-grid-line"/>';
|
||||
gridLines += '<text x="50" y="'+(y+4)+'" class="chart-axis-label" text-anchor="end">'+yTicks[i]+'h</text>';
|
||||
}
|
||||
// X 轴标签
|
||||
var xLabelsHtml = '';
|
||||
var skip = barCount > 16 ? Math.floor(barCount / 10) : 1;
|
||||
for(var i = 0; i < timeCfg.labels.length; i++){
|
||||
if(i < xPositions.length && i % skip === 0){
|
||||
xLabelsHtml += '<text x="'+xPositions[i]+'" y="290" class="chart-axis-label" text-anchor="middle">'+timeCfg.labels[i]+'</text>';
|
||||
}
|
||||
}
|
||||
// 柱状堆积图
|
||||
var barsHtml = '';
|
||||
for(var i = 0; i < barCount; i++){
|
||||
var bd = barData[i];
|
||||
var x = xPositions[i] - Math.floor(barWidth / 2);
|
||||
var segments = [
|
||||
{val:bd.heavy, color:'#FF4D4F', name:'重污染'},
|
||||
{val:bd.moderate, color:'#FA541C', name:'中污染'},
|
||||
{val:bd.light, color:'#FAAD14', name:'轻污染'},
|
||||
{val:bd.good, color:'#52C41A', name:'未污染'},
|
||||
{val:bd.clean, color:'#13C2C2', name:'清洁'}
|
||||
];
|
||||
var yBase = 270;
|
||||
for(var j = 0; j < segments.length; j++){
|
||||
var seg = segments[j];
|
||||
if(seg.val > 0){
|
||||
var segH = (seg.val / 24) * 250;
|
||||
var segY = yBase - segH;
|
||||
barsHtml += '<rect x="'+x+'" y="'+segY+'" width="'+barWidth+'" height="'+segH+'" fill="'+seg.color+'" opacity="0.9" ' +
|
||||
'data-idx="'+i+'" data-level="'+seg.name+'" data-val="'+seg.val+'" ' +
|
||||
'onmouseenter="showBarTip(event,this)" onmouseleave="hideDotTip()"/>';
|
||||
yBase = segY;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 图例放在 X 轴下方，不被柱状图遮挡
|
||||
var legendY = 305;
|
||||
var legendBottom = '<g transform="translate(60,'+legendY+')">';
|
||||
var lx2 = 0;
|
||||
for(var i = 0; i < aqiLevels.length; i++){
|
||||
var lv = aqiLevels[i];
|
||||
legendBottom += '<rect x="'+lx2+'" y="0" width="12" height="12" fill="'+lv.color+'" rx="2"/>';
|
||||
legendBottom += '<text x="'+(lx2+16)+'" y="10" fill="#666" font-size="11">'+lv.name+'</text>';
|
||||
lx2 += 72;
|
||||
}
|
||||
legendBottom += '</g>';
|
||||
|
||||
var svg = '<svg viewBox="0 0 800 330" preserveAspectRatio="xMidYMid meet">' +
|
||||
gridLines +
|
||||
xLabelsHtml +
|
||||
'<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>' +
|
||||
barsHtml +
|
||||
legendBottom +
|
||||
'</svg>';
|
||||
|
||||
document.getElementById('chartContainer').innerHTML = svg;
|
||||
window._chartTooltipData = {key:'aqiBar',barData:barData,labels:timeCfg.labels,xPositions:xPositions};
|
||||
}
|
||||
|
||||
/* 渲染 SVG 图表 */
|
||||
function renderChart(key){
|
||||
// AQI 非24小时使用柱状堆积图
|
||||
if(key === 'aqi' && currentTimeRange !== '近24小时'){
|
||||
renderAQIBarChart(key);
|
||||
return;
|
||||
}
|
||||
var d = metricData[key];
|
||||
if(!d) return;
|
||||
var timeCfg = getTimeConfig(currentTimeRange);
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData) return;
|
||||
var points = timeData.points;
|
||||
var xPositions = calcXPositions(points.length);
|
||||
var yMax = d.yMax;
|
||||
var yTicks = d.yTicks;
|
||||
|
||||
// 网格线
|
||||
var gridLines = '';
|
||||
for(var i = 0; i < yTicks.length; i++){
|
||||
var y = valToY(yTicks[i], yMax);
|
||||
gridLines += '<line x1="60" y1="'+y+'" x2="780" y2="'+y+'" class="chart-grid-line"/>';
|
||||
gridLines += '<text x="50" y="'+(y+4)+'" class="chart-axis-label" text-anchor="end">'+yTicks[i]+'</text>';
|
||||
}
|
||||
|
||||
// X 轴标签 - 当点数太多时只显示部分
|
||||
var xLabelsHtml = '';
|
||||
var skip = points.length > 16 ? Math.floor(points.length / 10) : 1;
|
||||
for(var i = 0; i < timeCfg.labels.length; i++){
|
||||
if(i < xPositions.length && i % skip === 0){
|
||||
xLabelsHtml += '<text x="'+xPositions[i]+'" y="290" class="chart-axis-label" text-anchor="middle">'+timeCfg.labels[i]+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// AQI 等级背景
|
||||
var levelBandsHtml = '';
|
||||
if(d.isAQI && d.levelBands){
|
||||
for(var i = 0; i < d.levelBands.length; i++){
|
||||
var b = d.levelBands[i];
|
||||
levelBandsHtml += '<rect x="60" y="'+b.yMin+'" width="720" height="'+(b.yMax-b.yMin)+'" fill="'+b.color+'" opacity="'+b.opacity+'"/>';
|
||||
levelBandsHtml += '<text x="68" y="'+(b.yMin + (b.yMax-b.yMin)/2 + 4)+'" fill="'+b.color+'" font-size="10" font-weight="500">'+b.label+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 超标区域和虚线
|
||||
var limitHtml = '';
|
||||
if(d.limitUpper){
|
||||
var upperY = valToY(d.limitUpper, yMax);
|
||||
var lowerY = valToY(d.limitLower, yMax);
|
||||
if(upperY > 20){
|
||||
limitHtml += '<rect x="60" y="20" width="720" height="'+(upperY-20)+'" class="chart-limit-exceed"/>';
|
||||
}
|
||||
if(lowerY < 270){
|
||||
limitHtml += '<rect x="60" y="'+lowerY+'" width="720" height="'+(270-lowerY)+'" class="chart-limit-exceed"/>';
|
||||
}
|
||||
limitHtml += '<line x1="60" y1="'+upperY+'" x2="780" y2="'+upperY+'" class="chart-limit-line"/>';
|
||||
limitHtml += '<line x1="60" y1="'+lowerY+'" x2="780" y2="'+lowerY+'" class="chart-limit-line"/>';
|
||||
if(d.limitLabelUpper){
|
||||
limitHtml += '<text x="74" y="'+(upperY-4)+'" class="chart-limit-label">'+d.limitLabelUpper+'</text>';
|
||||
limitHtml += '<text x="74" y="'+(lowerY+14)+'" class="chart-limit-label">'+d.limitLabelLower+'</text>';
|
||||
} else {
|
||||
limitHtml += '<text x="74" y="'+(upperY-4)+'" class="chart-limit-label">上限 '+d.limitUpper+'</text>';
|
||||
limitHtml += '<text x="74" y="'+(lowerY+14)+'" class="chart-limit-label">下限 '+d.limitLower+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 折线
|
||||
var pathD = '';
|
||||
var polylinePoints = '';
|
||||
var dotsHtml = '';
|
||||
var dotR = points.length > 20 ? 3 : 4;
|
||||
window._chartTooltipData = {key:key,points:points,labels:timeCfg.labels,unit:d.unit,yMax:yMax,xPositions:xPositions};
|
||||
for(var i = 0; i < points.length; i++){
|
||||
var y = valToY(points[i], yMax);
|
||||
var x = xPositions[i];
|
||||
pathD += (i===0?'M':'L') + x + ',' + y + ' ';
|
||||
polylinePoints += x + ',' + y + ' ';
|
||||
var dotColor = d.isAQI ? getAqiColor(points[i]) : '#1890FF';
|
||||
dotsHtml += '<circle cx="'+x+'" cy="'+y+'" r="'+dotR+'" class="chart-dot" style="fill:'+dotColor+';cursor:pointer;" ' +
|
||||
'data-idx="'+i+'" onmouseenter="showDotTip(event,this)" onmouseleave="hideDotTip()"/>';
|
||||
}
|
||||
pathD += 'L'+xPositions[points.length-1]+',270 L'+xPositions[0]+',270 Z';
|
||||
|
||||
var svg = '<svg viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet">' +
|
||||
'<defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">' +
|
||||
'<stop offset="0%" stop-color="#1890FF" stop-opacity="0.3"/>' +
|
||||
'<stop offset="100%" stop-color="#1890FF" stop-opacity="0"/>' +
|
||||
'</linearGradient></defs>' +
|
||||
gridLines +
|
||||
xLabelsHtml +
|
||||
'<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>' +
|
||||
levelBandsHtml +
|
||||
limitHtml +
|
||||
'<path class="chart-area-fill" d="'+pathD+'"/>' +
|
||||
'<polyline class="chart-line" points="'+polylinePoints.trim()+'"/>' +
|
||||
dotsHtml +
|
||||
'</svg>';
|
||||
|
||||
document.getElementById('chartContainer').innerHTML = svg;
|
||||
}
|
||||
/* 页面加载时渲染默认图表 */
|
||||
(function(){switchMetric(document.querySelector('.metric-btn.active'),'aqi');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室内空气 - 数据监测 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -79,7 +79,7 @@
|
||||
.aqi-tag--clean{background:#E6FFFB;color:#13C2C2;}
|
||||
.aqi-tag--good{background:#F6FFED;color:#52C41A;}
|
||||
.aqi-tag--light{background:#FFFBE6;color:#FAAD14;}
|
||||
.aqi-tag--moderate{background:#FFF1F0;color:#FA541C;}
|
||||
.aqi-tag--moderate{background:#FFF7E6;color:#FA541C;}
|
||||
.aqi-tag--heavy{background:#FFF1F0;color:#FF4D4F;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
@@ -95,8 +95,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -106,12 +105,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item active">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -119,10 +118,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -133,7 +132,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -144,7 +143,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室内空气 - 设备分类 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -107,8 +107,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -118,12 +117,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item active">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item active">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -131,10 +130,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -145,7 +144,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -156,7 +155,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室内空气 - 设备列表 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -97,6 +97,37 @@
|
||||
.map-picker.selected .map-picker__icon,.map-picker.selected .map-picker__text{display:none;}
|
||||
.map-picker__hint{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:var(--font-xs);color:var(--text-placeholder);display:none;}
|
||||
.map-picker.selected .map-picker__hint{display:block;}
|
||||
/* 地图展示视图 */
|
||||
.map-view{display:none;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;position:relative;}
|
||||
.map-view.active{display:block;}
|
||||
.map-view__canvas{width:100%;height:calc(100vh - 200px);background:#F0F5FF;position:relative;overflow:hidden;min-height:500px;}
|
||||
.map-view__canvas::before{content:'';position:absolute;inset:0;background:
|
||||
linear-gradient(90deg,rgba(24,144,255,0.06) 1px,transparent 1px) 0 0/40px 40px,
|
||||
linear-gradient(rgba(24,144,255,0.06) 1px,transparent 1px) 0 0/40px 40px;
|
||||
pointer-events:none;}
|
||||
/* 装饰性建筑轮廓 SVG 背景 */
|
||||
.map-view__canvas .map-bg{position:absolute;inset:0;opacity:0.15;pointer-events:none;}
|
||||
/* 设备标记点 */
|
||||
.map-pin{position:absolute;cursor:pointer;transition:transform .2s;z-index:10;text-align:center;}
|
||||
.map-pin:hover{transform:scale(1.15);z-index:20;}
|
||||
.map-pin__icon{width:36px;height:44px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.15);}
|
||||
.map-pin__icon svg{transform:rotate(45deg);width:18px;height:18px;}
|
||||
.map-pin__icon{background:#1890FF;}
|
||||
.map-pin__label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;margin-top:4px;background:rgba(255,255,255,0.9);padding:2px 6px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,0.08);}
|
||||
/* 设备详情弹窗 */
|
||||
.device-modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:300;align-items:center;justify-content:center;}
|
||||
.device-modal-mask.open{display:flex;}
|
||||
.device-modal{background:#fff;border-radius:var(--radius-lg);width:680px;max-height:80vh;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.15);}
|
||||
.device-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.device-modal__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);}
|
||||
.device-modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);font-size:18px;}
|
||||
.device-modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.device-modal__body{padding:24px;overflow-y:auto;max-height:calc(80vh - 140px);}
|
||||
.device-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -107,8 +138,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -118,12 +148,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item active">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -131,10 +161,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -145,7 +175,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -156,7 +186,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -176,14 +206,18 @@
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-bar">
|
||||
<!-- [交互] 点击打开右侧抽屉弹窗 -->
|
||||
<button class="btn btn-primary" onclick="openDrawer()">+ 新增设备</button>
|
||||
<button class="btn btn-success">批量入库导入</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<!-- [交互] 点击切换地图/列表视图 -->
|
||||
<button class="btn btn-primary" id="toggleViewBtn" onclick="toggleView()">地图展示</button>
|
||||
<span id="actionButtons">
|
||||
<!-- [交互] 点击打开右侧抽屉弹窗 -->
|
||||
<button class="btn btn-primary" onclick="openDrawer()">+ 新增设备</button>
|
||||
<button class="btn btn-success">批量入库导入</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 数据列表 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card" id="tableView">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>设备名称</th><th>设备编码</th><th>设备分类</th><th>所属单位</th><th>设备位置</th><th>布点日期</th><th>监测时长(天)</th><th>操作</th></tr></thead>
|
||||
@@ -207,6 +241,50 @@
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图展示视图 -->
|
||||
<div class="map-view" id="mapView">
|
||||
<div class="map-view__canvas" id="mapCanvas">
|
||||
<!-- 装饰性建筑轮廓底图 -->
|
||||
<svg class="map-bg" viewBox="0 0 1200 600" fill="none" preserveAspectRatio="none">
|
||||
<path d="M50 400h120V280H50v120z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M50 280l60-40 60 40" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M220 450h180V300H220v150z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M220 300l90-60 90 60" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M450 380h150V250H450v130z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M450 250l75-50 75 50" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M650 420h200V320H650v100z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M650 320l100-70 100 70" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M900 360h160V220H900v140z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M900 220l80-50 80 50" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M1050 480h120V350h-120v130z" stroke="#1890FF" stroke-width="1"/>
|
||||
<!-- 道路线条 -->
|
||||
<path d="M0 500h1200" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
<path d="M300 0v600" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
<path d="M700 0v600" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
</svg>
|
||||
<!-- 设备标记点 [交互] 点击标记弹出设备详情弹窗 -->
|
||||
<div class="map-pin" style="top:18%;left:12%;" onclick="showDeviceDetail(0)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">监测仪A1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:35%;left:30%;" onclick="showDeviceDetail(1)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">监测仪A2</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:55%;left:55%;" onclick="showDeviceDetail(2)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">检测仪B1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:25%;left:72%;" onclick="showDeviceDetail(3)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5v6h2V7h-2zm1 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1z"/></svg></div>
|
||||
<div class="map-pin__label">监测仪C1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:65%;left:85%;" onclick="showDeviceDetail(4)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">检测仪D1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增设备 - 右侧抽屉弹窗 -->
|
||||
@@ -290,6 +368,81 @@ 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 openDrawer(){document.getElementById('drawerMask').classList.add('open');document.getElementById('drawer').classList.add('open');}
|
||||
function closeDrawer(){document.getElementById('drawerMask').classList.remove('open');document.getElementById('drawer').classList.remove('open');}
|
||||
|
||||
/* 地图/列表视图切换 [交互] 点击按钮切换列表和地图两种展示模式 */
|
||||
var isMapView = false;
|
||||
function toggleView(){
|
||||
var tableView = document.getElementById('tableView');
|
||||
var mapView = document.getElementById('mapView');
|
||||
var btn = document.getElementById('toggleViewBtn');
|
||||
var actions = document.getElementById('actionButtons');
|
||||
if(isMapView){
|
||||
tableView.style.display = '';
|
||||
mapView.classList.remove('active');
|
||||
actions.style.display = '';
|
||||
btn.textContent = '地图展示';
|
||||
} else {
|
||||
tableView.style.display = 'none';
|
||||
mapView.classList.add('active');
|
||||
actions.style.display = 'none';
|
||||
btn.textContent = '列表展示';
|
||||
}
|
||||
isMapView = !isMapView;
|
||||
}
|
||||
|
||||
/* 设备数据（与表格数据对应） */
|
||||
var devices = [
|
||||
{name:'室内空气监测仪A1',code:'IA-2024-001',category:'PM2.5检测仪',unit:'采油一厂',location:'办公楼3F会议室',date:'2024-06-15',days:'328',status:'在线'},
|
||||
{name:'室内空气监测仪A2',code:'IA-2024-002',category:'甲醛检测仪',unit:'采油一厂',location:'职工活动中心2F',date:'2024-07-20',days:'293',status:'在线'},
|
||||
{name:'综合空气检测仪B1',code:'IA-2024-003',category:'综合空气质量监测仪',unit:'采油二厂',location:'员工食堂1F',date:'2024-08-10',days:'272',status:'在线'},
|
||||
{name:'CO2监测仪C1',code:'IA-2024-004',category:'CO2检测仪',unit:'采气厂',location:'综合办公楼1F大厅',date:'2024-09-05',days:'246',status:'离线'},
|
||||
{name:'甲醛检测仪D1',code:'IA-2025-001',category:'甲醛检测仪',unit:'炼化公司',location:'实验楼2F研发室',date:'2025-01-08',days:'121',status:'在线'},
|
||||
];
|
||||
|
||||
/* 设备详情弹窗 */
|
||||
function showDeviceDetail(idx){
|
||||
var d = devices[idx];
|
||||
if(!d) return;
|
||||
document.getElementById('deviceModalTitle').textContent = d.name + ' - 设备详情';
|
||||
document.getElementById('deviceName').textContent = d.name;
|
||||
document.getElementById('deviceCode').textContent = d.code;
|
||||
document.getElementById('deviceCategory').textContent = d.category;
|
||||
document.getElementById('deviceUnit').textContent = d.unit;
|
||||
document.getElementById('deviceLocation').textContent = d.location;
|
||||
document.getElementById('deviceDate').textContent = d.date;
|
||||
document.getElementById('deviceDays').textContent = d.days;
|
||||
document.getElementById('deviceStatus').textContent = d.status;
|
||||
document.getElementById('deviceModalMask').classList.add('open');
|
||||
}
|
||||
function hideDeviceDetail(){
|
||||
document.getElementById('deviceModalMask').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 设备详情弹窗 [交互] 点击地图上的设备标记点弹出此弹窗 -->
|
||||
<div class="device-modal-mask" id="deviceModalMask" onclick="hideDeviceDetail()">
|
||||
<div class="device-modal" onclick="event.stopPropagation()">
|
||||
<div class="device-modal__header">
|
||||
<span class="device-modal__title" id="deviceModalTitle">设备详情</span>
|
||||
<button class="device-modal__close" onclick="hideDeviceDetail()">×</button>
|
||||
</div>
|
||||
<div class="device-modal__body">
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><span class="info-item__label">设备名称</span><span class="info-item__value" id="deviceName">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备编码</span><span class="info-item__value" id="deviceCode">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备分类</span><span class="info-item__value" id="deviceCategory">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value" id="deviceUnit">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备位置</span><span class="info-item__value" id="deviceLocation">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备状态</span><span class="info-item__value" id="deviceStatus">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">布点日期</span><span class="info-item__value" id="deviceDate">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">监测时长(天)</span><span class="info-item__value" id="deviceDays">-</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-modal__footer">
|
||||
<button class="btn btn-default" onclick="hideDeviceDetail()">关闭</button>
|
||||
<button class="btn btn-primary" onclick="hideDeviceDetail();openDrawer()">编辑</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室内空气 - 异常报警 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -80,8 +80,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -91,12 +90,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item active">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -104,10 +103,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -118,7 +117,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -129,7 +128,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室内空气 - 异常数据详情 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -81,8 +81,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -92,12 +91,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -105,10 +104,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -119,7 +118,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -130,7 +129,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室内空气 - 历史数据 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -73,8 +73,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -84,12 +83,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -97,10 +96,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -111,7 +110,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -122,7 +121,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室内空气 - 监测数据详情 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -85,8 +85,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -96,12 +95,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -109,10 +108,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -123,7 +122,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -134,7 +133,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室外空气 - 应用记录 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -87,8 +87,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -98,12 +97,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -111,10 +110,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item active">应用记录</a>
|
||||
@@ -125,7 +124,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -136,7 +135,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室外空气 - 动态分析 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -18,7 +18,8 @@
|
||||
.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;}
|
||||
.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;}
|
||||
@@ -86,6 +87,16 @@
|
||||
.chart-summary__dot{width:8px;height:8px;border-radius:50%;}
|
||||
.chart-summary__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.chart-summary__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:600;}
|
||||
.chart-limit-line{stroke:#FF4D4F;stroke-width:1.5;stroke-dasharray:6,3;opacity:.7;}
|
||||
.chart-limit-exceed{fill:#FF4D4F;opacity:.08;}
|
||||
.chart-limit-label{fill:#FF4D4F;font-size:10px;font-weight:500;}
|
||||
.chart-tooltip{display:none;position:fixed;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:10px 14px;z-index:400;pointer-events:none;font-size:var(--font-sm);min-width:140px;}
|
||||
.chart-tooltip.show{display:block;}
|
||||
.chart-tooltip__date{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #f0f0f0;}
|
||||
.chart-tooltip__row{display:flex;align-items:center;gap:6px;padding:2px 0;}
|
||||
.chart-tooltip__dot{display:inline-block;width:8px;height:8px;border-radius:2px;flex-shrink:0;}
|
||||
.chart-tooltip__label{color:var(--text-secondary);font-size:var(--font-xs);flex:1;}
|
||||
.chart-tooltip__val{font-size:var(--font-sm);color:var(--text-primary);font-weight:600;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -96,8 +107,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -107,28 +117,29 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">设备分类</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">分类管理</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">设备分类</a><a href="outdoor-data-monitor.html" class="sidebar-item active">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">分类管理</a><a href="outdoor-data-monitor.html" class="sidebar-item active">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">设备分类</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">分类管理</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">分类管理</a><a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -209,7 +220,8 @@
|
||||
<div class="time-tab" onclick="switchTimeTab(this)">近3个月</div>
|
||||
</div>
|
||||
<div class="metric-bar">
|
||||
<button class="metric-btn active" onclick="switchMetric(this,'temp')">温度</button>
|
||||
<button class="metric-btn active" onclick="switchMetric(this,'aqi')">空气质量指数</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'temp')">温度</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'humi')">湿度</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'solar')">太阳辐射</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'pm25')">PM2.5</button>
|
||||
@@ -217,87 +229,470 @@
|
||||
<button class="metric-btn" onclick="switchMetric(this,'lux')">照度</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'wind')">风速</button>
|
||||
</div>
|
||||
<div class="chart-summary">
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#1890FF;"></span><span class="chart-summary__label">平均值</span><span class="chart-summary__value" id="avgVal">31.5 ℃</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#52C41A;"></span><span class="chart-summary__label">最小值</span><span class="chart-summary__value" id="minVal">26.2 ℃</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#FF4D4F;"></span><span class="chart-summary__label">最大值</span><span class="chart-summary__value" id="maxVal">35.8 ℃</span></div>
|
||||
<!-- 统计摘要 [交互] AQI 模式下隐藏 -->
|
||||
<div class="chart-summary" id="chartSummary">
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#1890FF;"></span><span class="chart-summary__label">平均值</span><span class="chart-summary__value" id="avgVal">78</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#52C41A;"></span><span class="chart-summary__label">最小值</span><span class="chart-summary__value" id="minVal">35</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#FF4D4F;"></span><span class="chart-summary__label">最大值</span><span class="chart-summary__value" id="maxVal">132</span></div>
|
||||
<div class="chart-summary__item" style="margin-left:auto;" id="limitSummary"></div>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="chart-container" id="chartContainer">
|
||||
<svg viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#1890FF" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#1890FF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<line x1="60" y1="20" x2="780" y2="20" class="chart-grid-line"/>
|
||||
<line x1="60" y1="80" x2="780" y2="80" class="chart-grid-line"/>
|
||||
<line x1="60" y1="140" x2="780" y2="140" class="chart-grid-line"/>
|
||||
<line x1="60" y1="200" x2="780" y2="200" class="chart-grid-line"/>
|
||||
<line x1="60" y1="260" x2="780" y2="260" class="chart-grid-line"/>
|
||||
<text x="50" y="24" class="chart-axis-label" text-anchor="end">38</text>
|
||||
<text x="50" y="84" class="chart-axis-label" text-anchor="end">35</text>
|
||||
<text x="50" y="144" class="chart-axis-label" text-anchor="end">32</text>
|
||||
<text x="50" y="204" class="chart-axis-label" text-anchor="end">29</text>
|
||||
<text x="50" y="264" class="chart-axis-label" text-anchor="end">26</text>
|
||||
<text x="90" y="290" class="chart-axis-label" text-anchor="middle">00:00</text>
|
||||
<text x="180" y="290" class="chart-axis-label" text-anchor="middle">04:00</text>
|
||||
<text x="270" y="290" class="chart-axis-label" text-anchor="middle">06:00</text>
|
||||
<text x="360" y="290" class="chart-axis-label" text-anchor="middle">08:00</text>
|
||||
<text x="450" y="290" class="chart-axis-label" text-anchor="middle">10:00</text>
|
||||
<text x="540" y="290" class="chart-axis-label" text-anchor="middle">12:00</text>
|
||||
<text x="630" y="290" class="chart-axis-label" text-anchor="middle">14:00</text>
|
||||
<text x="720" y="290" class="chart-axis-label" text-anchor="middle">16:00</text>
|
||||
<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>
|
||||
<path class="chart-area-fill" d="M90,240 L150,230 L210,250 L270,220 L330,180 L390,140 L450,100 L510,90 L570,80 L630,100 L690,130 L750,150 L750,270 L90,270 Z"/>
|
||||
<polyline class="chart-line" points="90,240 150,230 210,250 270,220 330,180 390,140 450,100 510,90 570,80 630,100 690,130 750,150"/>
|
||||
<circle cx="90" cy="240" r="4" class="chart-dot"/>
|
||||
<circle cx="150" cy="230" r="4" class="chart-dot"/>
|
||||
<circle cx="210" cy="250" r="4" class="chart-dot"/>
|
||||
<circle cx="270" cy="220" r="4" class="chart-dot"/>
|
||||
<circle cx="330" cy="180" r="4" class="chart-dot"/>
|
||||
<circle cx="390" cy="140" r="4" class="chart-dot"/>
|
||||
<circle cx="450" cy="100" r="4" class="chart-dot"/>
|
||||
<circle cx="510" cy="90" r="4" class="chart-dot"/>
|
||||
<circle cx="570" cy="80" r="4" class="chart-dot"/>
|
||||
<circle cx="630" cy="100" r="4" class="chart-dot"/>
|
||||
<circle cx="690" cy="130" r="4" class="chart-dot"/>
|
||||
<circle cx="750" cy="150" r="4" class="chart-dot"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="chart-container" id="chartContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 数据点 Tip 弹窗 -->
|
||||
<div class="chart-tooltip" id="chartTooltip">
|
||||
<div class="chart-tooltip__date" id="tooltipDate"></div>
|
||||
<div id="tooltipBody"></div>
|
||||
</div>
|
||||
|
||||
<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');})();
|
||||
|
||||
/* 时间范围 Tab 切换 */
|
||||
var currentTimeRange = '近24小时';
|
||||
function switchTimeTab(el){
|
||||
var tabs=document.querySelectorAll('.time-tab');
|
||||
var tabs = document.querySelectorAll('.time-tab');
|
||||
tabs.forEach(function(t){t.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
currentTimeRange = el.textContent;
|
||||
var activeBtn = document.querySelector('.metric-btn.active');
|
||||
if(activeBtn && currentMetricKey){
|
||||
switchMetric(activeBtn, currentMetricKey);
|
||||
}
|
||||
}
|
||||
|
||||
var metricData={
|
||||
temp: {avg:'31.5 ℃', min:'26.2 ℃', max:'35.8 ℃'},
|
||||
humi: {avg:'43 %', min:'32 %', max:'56 %'},
|
||||
solar: {avg:'620 W/m²', min:'0 W/m²', max:'920 W/m²'},
|
||||
pm25: {avg:'35 μg/m³', min:'18 μg/m³', max:'58 μg/m³'},
|
||||
pm10: {avg:'68 μg/m³', min:'35 μg/m³', max:'105 μg/m³'},
|
||||
lux: {avg:'52000 lm/m²',min:'0 lm/m²', max:'92000 lm/m²'},
|
||||
wind: {avg:'3.8 m/s', min:'1.2 m/s', max:'6.5 m/s'}
|
||||
/* AQI 等级颜色配置 */
|
||||
var aqiLevels = [
|
||||
{name:'优', color:'#52C41A', range:[0,50]},
|
||||
{name:'良', color:'#13C2C2', range:[51,100]},
|
||||
{name:'轻度污染', color:'#FAAD14', range:[101,150]},
|
||||
{name:'中度污染', color:'#FA541C', range:[151,200]},
|
||||
{name:'重度污染', color:'#FF4D4F', range:[201,300]},
|
||||
{name:'严重污染', color:'#722ED1', range:[301,500]}
|
||||
];
|
||||
|
||||
/* 监测类型切换 */
|
||||
var currentMetricKey = 'aqi';
|
||||
var metricData = {
|
||||
aqi: {avg:'78', min:'35', max:'132', unit:'',
|
||||
yMax:500, yTicks:[500,400,300,200,100,0],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
isAQI:true,
|
||||
levelBands:[
|
||||
{yMin:245,yMax:270,label:'优',color:'#52C41A',opacity:.1},
|
||||
{yMin:220,yMax:245,label:'良',color:'#13C2C2',opacity:.1},
|
||||
{yMin:195,yMax:220,label:'轻度污染',color:'#FAAD14',opacity:.1},
|
||||
{yMin:170,yMax:195,label:'中度污染',color:'#FA541C',opacity:.1},
|
||||
{yMin:120,yMax:170,label:'重度污染',color:'#FF4D4F',opacity:.1},
|
||||
{yMin:20,yMax:120,label:'严重污染',color:'#722ED1',opacity:.1}
|
||||
],
|
||||
data:{
|
||||
'近24小时':{avg:'78',min:'35',max:'132',points:[35,42,55,68,78,88,98,110,120,128,132,125]},
|
||||
'近7日':{barData:[
|
||||
{excellent:8,good:6,light:5,moderate:3,heavy:2,severe:0},
|
||||
{excellent:6,good:7,light:5,moderate:4,heavy:2,severe:0},
|
||||
{excellent:4,good:5,light:6,moderate:5,heavy:3,severe:1},
|
||||
{excellent:3,good:4,light:5,moderate:7,heavy:4,severe:1},
|
||||
{excellent:5,good:6,light:5,moderate:5,heavy:3,severe:0},
|
||||
{excellent:7,good:6,light:5,moderate:4,heavy:2,severe:0},
|
||||
{excellent:9,good:6,light:4,moderate:3,heavy:2,severe:0}
|
||||
]},
|
||||
'近30日':{barData:[
|
||||
{excellent:7,good:5,light:5,moderate:4,heavy:3,severe:0},{excellent:6,good:6,light:5,moderate:4,heavy:2,severe:1},{excellent:4,good:5,light:6,moderate:5,heavy:3,severe:1},{excellent:5,good:6,light:5,moderate:5,heavy:2,severe:1},{excellent:8,good:5,light:4,moderate:4,heavy:2,severe:1},{excellent:6,good:7,light:5,moderate:4,heavy:2,severe:0},{excellent:9,good:5,light:4,moderate:4,heavy:1,severe:1},{excellent:3,good:4,light:6,moderate:6,heavy:4,severe:1},{excellent:5,good:6,light:5,moderate:5,heavy:3,severe:0},{excellent:7,good:6,light:5,moderate:4,heavy:2,severe:0},{excellent:4,good:5,light:6,moderate:5,heavy:3,severe:1},{excellent:6,good:7,light:5,moderate:4,heavy:2,severe:0},{excellent:8,good:6,light:5,moderate:3,heavy:2,severe:0},{excellent:5,good:5,light:5,moderate:6,heavy:2,severe:1},{excellent:7,good:6,light:4,moderate:4,heavy:3,severe:0},{excellent:9,good:5,light:4,moderate:4,heavy:1,severe:1},{excellent:4,good:6,light:6,moderate:5,heavy:2,severe:1},{excellent:6,good:7,light:5,moderate:4,heavy:2,severe:0},{excellent:8,good:5,light:4,moderate:5,heavy:1,severe:1},{excellent:5,good:6,light:5,moderate:5,heavy:3,severe:0},{excellent:7,good:6,light:4,moderate:4,heavy:3,severe:0},{excellent:6,good:6,light:5,moderate:5,heavy:2,severe:0},{excellent:4,good:5,light:6,moderate:6,heavy:2,severe:1},{excellent:8,good:6,light:5,moderate:3,heavy:2,severe:0},{excellent:5,good:7,light:5,moderate:4,heavy:3,severe:0},{excellent:7,good:5,light:5,moderate:5,heavy:1,severe:1},{excellent:6,good:6,light:5,moderate:5,heavy:2,severe:0},{excellent:9,good:5,light:4,moderate:4,heavy:1,severe:1},{excellent:5,good:6,light:6,moderate:5,heavy:2,severe:0},{excellent:7,good:7,light:5,moderate:3,heavy:2,severe:0}
|
||||
]}
|
||||
}},
|
||||
temp: {avg:'31.5 ℃', min:'26.2 ℃', max:'35.8 ℃', unit:'℃',
|
||||
yMax:42, yTicks:[42,38,34,30,26,22],
|
||||
limitUpper:40, limitLower:-10, limitLabel:'上限 40.0 / 下限 -10.0',
|
||||
data:{
|
||||
'近24小时':{avg:'31.5 ℃',min:'26.2 ℃',max:'35.8 ℃',points:[26.2,27.0,28.5,30.0,31.5,32.5,33.8,34.5,35.8,35.0,33.2,31.0]},
|
||||
'近7日':{avg:'30.5 ℃',min:'25.0 ℃',max:'36.5 ℃',points:[26.5,27.8,29.0,30.5,31.8,33.2,34.0]},
|
||||
'近30日':{avg:'29.8 ℃',min:'24.5 ℃',max:'37.5 ℃',points:[25.0,25.5,26.8,27.5,28.2,29.0,29.8,30.5,31.0,31.8,32.5,33.0,33.8,34.2,34.8,35.5,36.0,36.5,37.0,37.5,36.8,35.5,34.2,33.0,31.8,30.5,29.0,27.5,26.0,25.5]}
|
||||
}},
|
||||
humi: {avg:'43 %', min:'32 %', max:'56 %', unit:'%',
|
||||
yMax:60, yTicks:[60,55,50,45,40],
|
||||
limitUpper:60, limitLower:20, limitLabel:'上限 60 / 下限 20',
|
||||
data:{
|
||||
'近24小时':{avg:'43 %',min:'32 %',max:'56 %',points:[56,52,48,45,42,40,38,35,33,32,36,42]},
|
||||
'近7日':{avg:'45 %',min:'35 %',max:'58 %',points:[42,38,35,40,45,50,55]},
|
||||
'近30日':{avg:'44 %',min:'30 %',max:'60 %',points:[45,42,40,38,35,33,32,30,35,40,45,48,50,52,55,58,60,55,50,45,40,38,35,33,36,40,45,48,46,44]}
|
||||
}},
|
||||
solar: {avg:'620 W/m²', min:'0 W/m²', max:'920 W/m²', unit:'W/m²',
|
||||
yMax:1000, yTicks:[1000,800,600,400,200],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'620 W/m²',min:'0 W/m²',max:'920 W/m²',points:[0,0,0,0,120,350,580,780,920,850,650,200]},
|
||||
'近7日':{avg:'580 W/m²',min:'0 W/m²',max:'950 W/m²',points:[480,520,600,680,750,820,900]},
|
||||
'近30日':{avg:'550 W/m²',min:'0 W/m²',max:'980 W/m²',points:[420,450,480,520,550,580,600,620,650,680,700,720,750,780,800,820,850,880,900,920,950,980,850,750,650,550,480,420,380,350]}
|
||||
}},
|
||||
pm25: {avg:'35 μg/m³', min:'18 μg/m³', max:'58 μg/m³', unit:'μg/m³',
|
||||
yMax:60, yTicks:[60,55,50,45,40],
|
||||
limitUpper:60, limitLower:10, limitLabel:'上限 60 / 下限 10',
|
||||
data:{
|
||||
'近24小时':{avg:'35 μg/m³',min:'18 μg/m³',max:'58 μg/m³',points:[18,20,22,25,28,32,35,38,42,48,52,58]},
|
||||
'近7日':{avg:'38 μg/m³',min:'20 μg/m³',max:'62 μg/m³',points:[25,28,32,35,40,45,50]},
|
||||
'近30日':{avg:'36 μg/m³',min:'15 μg/m³',max:'65 μg/m³',points:[20,22,25,28,30,32,35,38,40,42,45,48,50,52,55,58,60,62,65,58,50,42,35,28,25,22,20,18,16,15]}
|
||||
}},
|
||||
pm10: {avg:'68 μg/m³', min:'35 μg/m³', max:'105 μg/m³', unit:'μg/m³',
|
||||
yMax:120, yTicks:[120,100,80,60,40],
|
||||
limitUpper:120, limitLower:20, limitLabel:'上限 120 / 下限 20',
|
||||
data:{
|
||||
'近24小时':{avg:'68 μg/m³',min:'35 μg/m³',max:'105 μg/m³',points:[35,40,45,48,52,58,62,68,75,82,90,105]},
|
||||
'近7日':{avg:'70 μg/m³',min:'38 μg/m³',max:'110 μg/m³',points:[45,50,55,60,68,75,85]},
|
||||
'近30日':{avg:'66 μg/m³',min:'30 μg/m³',max:'115 μg/m³',points:[40,42,45,48,50,52,55,58,60,65,68,70,72,75,78,80,85,90,95,100,105,110,115,95,80,65,55,45,38,30]}
|
||||
}},
|
||||
lux: {avg:'52000 lm/m²', min:'0 lm/m²', max:'92000 lm/m²', unit:'lm/m²',
|
||||
yMax:100000, yTicks:[100000,80000,60000,40000,20000],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'52000 lm/m²',min:'0 lm/m²',max:'92000 lm/m²',points:[0,0,0,0,12000,35000,58000,78000,92000,85000,65000,20000]},
|
||||
'近7日':{avg:'50000 lm/m²',min:'0 lm/m²',max:'95000 lm/m²',points:[45000,48000,52000,58000,65000,72000,80000]},
|
||||
'近30日':{avg:'48000 lm/m²',min:'0 lm/m²',max:'98000 lm/m²',points:[35000,38000,40000,42000,45000,48000,50000,52000,55000,58000,60000,62000,65000,68000,70000,72000,75000,78000,80000,82000,85000,88000,90000,92000,95000,98000,75000,55000,40000,35000]}
|
||||
}},
|
||||
wind: {avg:'3.8 m/s', min:'1.2 m/s', max:'6.5 m/s', unit:'m/s',
|
||||
yMax:8, yTicks:[8,7,6,5,4],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'3.8 m/s',min:'1.2 m/s',max:'6.5 m/s',points:[1.2,1.5,1.8,2.0,2.5,3.0,3.5,4.0,4.5,5.0,5.8,6.5]},
|
||||
'近7日':{avg:'3.5 m/s',min:'1.0 m/s',max:'7.0 m/s',points:[2.0,2.5,3.0,3.5,4.0,4.5,5.0]},
|
||||
'近30日':{avg:'3.6 m/s',min:'0.8 m/s',max:'7.5 m/s',points:[1.5,1.8,2.0,2.2,2.5,2.8,3.0,3.2,3.5,3.8,4.0,4.2,4.5,4.8,5.0,5.2,5.5,5.8,6.0,6.2,6.5,6.8,7.0,7.2,7.5,5.5,4.0,3.0,2.0,1.5]}
|
||||
}}
|
||||
};
|
||||
function switchMetric(el,key){
|
||||
var btns=document.querySelectorAll('.metric-btn');
|
||||
|
||||
/* 根据时间范围获取 X 轴配置 */
|
||||
function getTimeConfig(timeRange){
|
||||
if(timeRange === '近7日'){
|
||||
var labels = [];
|
||||
var now = new Date(2026,5,3);
|
||||
for(var i=6;i>=0;i--){
|
||||
var d = new Date(now);
|
||||
d.setDate(d.getDate() - i);
|
||||
labels.push((d.getMonth()+1)+'/'+d.getDate());
|
||||
}
|
||||
return {labels:labels,count:7};
|
||||
} else if(timeRange === '近30日'){
|
||||
var labels = [];
|
||||
var now = new Date(2026,5,3);
|
||||
for(var i=29;i>=0;i--){
|
||||
var d = new Date(now);
|
||||
d.setDate(d.getDate() - i);
|
||||
labels.push((d.getMonth()+1)+'/'+d.getDate());
|
||||
}
|
||||
return {labels:labels,count:30};
|
||||
}
|
||||
return {
|
||||
labels:['00:00','02:00','04:00','06:00','08:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'],
|
||||
count:12
|
||||
};
|
||||
}
|
||||
|
||||
/* 根据数据点数量计算 X 坐标 */
|
||||
function calcXPositions(count){
|
||||
var positions = [];
|
||||
var step = 690 / (count - 1);
|
||||
for(var i=0;i<count;i++){
|
||||
positions.push(90 + Math.round(i * step));
|
||||
}
|
||||
return positions;
|
||||
}
|
||||
|
||||
/* 根据数值映射到 SVG Y 坐标 */
|
||||
function valToY(val, yMax){
|
||||
return 270 - (val / yMax) * 250;
|
||||
}
|
||||
|
||||
/* 渲染 SVG 图表 */
|
||||
function renderChart(key){
|
||||
// AQI 非24小时使用柱状堆积图
|
||||
if(key === 'aqi' && currentTimeRange !== '近24小时'){
|
||||
renderAQIBarChart(key);
|
||||
return;
|
||||
}
|
||||
var d = metricData[key];
|
||||
if(!d) return;
|
||||
var timeCfg = getTimeConfig(currentTimeRange);
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData) return;
|
||||
var points = timeData.points;
|
||||
var xPositions = calcXPositions(points.length);
|
||||
var yMax = d.yMax;
|
||||
var yTicks = d.yTicks;
|
||||
|
||||
// 网格线
|
||||
var gridLines = '';
|
||||
for(var i = 0; i < yTicks.length; i++){
|
||||
var y = valToY(yTicks[i], yMax);
|
||||
gridLines += '<line x1="60" y1="'+y+'" x2="780" y2="'+y+'" class="chart-grid-line"/>';
|
||||
gridLines += '<text x="50" y="'+(y+4)+'" class="chart-axis-label" text-anchor="end">'+yTicks[i]+'</text>';
|
||||
}
|
||||
|
||||
// X 轴标签
|
||||
var xLabelsHtml = '';
|
||||
var skip = points.length > 16 ? Math.floor(points.length / 10) : 1;
|
||||
for(var i = 0; i < timeCfg.labels.length; i++){
|
||||
if(i < xPositions.length && i % skip === 0){
|
||||
xLabelsHtml += '<text x="'+xPositions[i]+'" y="290" class="chart-axis-label" text-anchor="middle">'+timeCfg.labels[i]+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// AQI 等级背景
|
||||
var levelBandsHtml = '';
|
||||
if(d.isAQI && d.levelBands){
|
||||
for(var i = 0; i < d.levelBands.length; i++){
|
||||
var b = d.levelBands[i];
|
||||
levelBandsHtml += '<rect x="60" y="'+b.yMin+'" width="720" height="'+(b.yMax-b.yMin)+'" fill="'+b.color+'" opacity="'+b.opacity+'"/>';
|
||||
levelBandsHtml += '<text x="68" y="'+(b.yMin + (b.yMax-b.yMin)/2 + 4)+'" fill="'+b.color+'" font-size="10" font-weight="500">'+b.label+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 超标区域和虚线
|
||||
var limitHtml = '';
|
||||
if(d.limitUpper){
|
||||
var upperY = valToY(d.limitUpper, yMax);
|
||||
var lowerY = valToY(d.limitLower, yMax);
|
||||
if(upperY > 20){
|
||||
limitHtml += '<rect x="60" y="20" width="720" height="'+(upperY-20)+'" class="chart-limit-exceed"/>';
|
||||
}
|
||||
if(lowerY < 270){
|
||||
limitHtml += '<rect x="60" y="'+lowerY+'" width="720" height="'+(270-lowerY)+'" class="chart-limit-exceed"/>';
|
||||
}
|
||||
limitHtml += '<line x1="60" y1="'+upperY+'" x2="780" y2="'+upperY+'" class="chart-limit-line"/>';
|
||||
limitHtml += '<line x1="60" y1="'+lowerY+'" x2="780" y2="'+lowerY+'" class="chart-limit-line"/>';
|
||||
if(d.limitLabelUpper){
|
||||
limitHtml += '<text x="74" y="'+(upperY-4)+'" class="chart-limit-label">'+d.limitLabelUpper+'</text>';
|
||||
limitHtml += '<text x="74" y="'+(lowerY+14)+'" class="chart-limit-label">'+d.limitLabelLower+'</text>';
|
||||
} else {
|
||||
limitHtml += '<text x="74" y="'+(upperY-4)+'" class="chart-limit-label">上限 '+d.limitUpper+'</text>';
|
||||
limitHtml += '<text x="74" y="'+(lowerY+14)+'" class="chart-limit-label">下限 '+d.limitLower+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 折线
|
||||
var pathD = '';
|
||||
var polylinePoints = '';
|
||||
var dotsHtml = '';
|
||||
var dotR = points.length > 20 ? 3 : 4;
|
||||
window._chartTooltipData = {key:key,points:points,labels:timeCfg.labels,unit:d.unit,yMax:yMax,xPositions:xPositions};
|
||||
for(var i = 0; i < points.length; i++){
|
||||
var y = valToY(points[i], yMax);
|
||||
var x = xPositions[i];
|
||||
pathD += (i===0?'M':'L') + x + ',' + y + ' ';
|
||||
polylinePoints += x + ',' + y + ' ';
|
||||
var dotColor = d.isAQI ? getAqiColor(points[i]) : '#1890FF';
|
||||
dotsHtml += '<circle cx="'+x+'" cy="'+y+'" r="'+dotR+'" class="chart-dot" style="fill:'+dotColor+';cursor:pointer;" ' +
|
||||
'data-idx="'+i+'" onmouseenter="showDotTip(event,this)" onmouseleave="hideDotTip()"/>';
|
||||
}
|
||||
pathD += 'L'+xPositions[points.length-1]+',270 L'+xPositions[0]+',270 Z';
|
||||
|
||||
var svg = '<svg viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet">' +
|
||||
'<defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">' +
|
||||
'<stop offset="0%" stop-color="#1890FF" stop-opacity="0.3"/>' +
|
||||
'<stop offset="100%" stop-color="#1890FF" stop-opacity="0"/>' +
|
||||
'</linearGradient></defs>' +
|
||||
gridLines +
|
||||
xLabelsHtml +
|
||||
'<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>' +
|
||||
levelBandsHtml +
|
||||
limitHtml +
|
||||
'<path class="chart-area-fill" d="'+pathD+'"/>' +
|
||||
'<polyline class="chart-line" points="'+polylinePoints.trim()+'"/>' +
|
||||
dotsHtml +
|
||||
'</svg>';
|
||||
|
||||
document.getElementById('chartContainer').innerHTML = svg;
|
||||
}
|
||||
|
||||
/* AQI 颜色映射 */
|
||||
function getAqiColor(val){
|
||||
if(val >= 301) return '#722ED1';
|
||||
if(val >= 201) return '#FF4D4F';
|
||||
if(val >= 151) return '#FA541C';
|
||||
if(val >= 101) return '#FAAD14';
|
||||
if(val >= 51) return '#13C2C2';
|
||||
return '#52C41A';
|
||||
}
|
||||
|
||||
/* 显示数据点 Tip */
|
||||
function showDotTip(e, el){
|
||||
var td = window._chartTooltipData;
|
||||
if(!td) return;
|
||||
var idx = parseInt(el.getAttribute('data-idx'));
|
||||
var dateStr = td.labels[idx] || '';
|
||||
var val = td.points[idx];
|
||||
var unit = td.unit || '';
|
||||
var color = td.key === 'aqi' ? getAqiColor(val) : '#1890FF';
|
||||
document.getElementById('tooltipDate').textContent = dateStr;
|
||||
document.getElementById('tooltipBody').innerHTML = '<div class="chart-tooltip__row"><span class="chart-tooltip__dot" style="background:'+color+'"></span><span class="chart-tooltip__label">数值</span><span class="chart-tooltip__val">'+val + (unit ? ' ' + unit : '')+'</span></div>';
|
||||
var tip = document.getElementById('chartTooltip');
|
||||
tip.classList.add('show');
|
||||
var rect = el.getBoundingClientRect();
|
||||
var tipW = tip.offsetWidth;
|
||||
var tipH = tip.offsetHeight;
|
||||
var left = rect.left - tipW / 2 + rect.width / 2;
|
||||
var top = rect.top - tipH - 12;
|
||||
if(left < 8) left = 8;
|
||||
if(left + tipW > window.innerWidth - 8) left = window.innerWidth - tipW - 8;
|
||||
tip.style.left = left + 'px';
|
||||
tip.style.top = top + 'px';
|
||||
}
|
||||
function hideDotTip(){
|
||||
document.getElementById('chartTooltip').classList.remove('show');
|
||||
}
|
||||
|
||||
/* AQI 柱状图获取主导等级 */
|
||||
function getDominantLevel(bd){
|
||||
var levels = [
|
||||
{name:'优', color:'#52C41A', val:bd.excellent},
|
||||
{name:'良', color:'#13C2C2', val:bd.good},
|
||||
{name:'轻度污染', color:'#FAAD14', val:bd.light},
|
||||
{name:'中度污染', color:'#FA541C', val:bd.moderate},
|
||||
{name:'重度污染', color:'#FF4D4F', val:bd.heavy},
|
||||
{name:'严重污染', color:'#722ED1', val:bd.severe}
|
||||
];
|
||||
var max = levels[0];
|
||||
for(var i = 1; i < levels.length; i++){
|
||||
if(levels[i].val > max.val) max = levels[i];
|
||||
}
|
||||
return max;
|
||||
}
|
||||
|
||||
/* 柱状图 Tip - 仅显示主导等级 */
|
||||
function showBarTip(e, el){
|
||||
var td = window._chartTooltipData;
|
||||
if(!td) return;
|
||||
var idx = parseInt(el.getAttribute('data-idx'));
|
||||
var bd = td.barData[idx];
|
||||
if(!bd) return;
|
||||
var dateStr = td.labels[idx] || '';
|
||||
var dom = getDominantLevel(bd);
|
||||
document.getElementById('tooltipDate').textContent = dateStr;
|
||||
document.getElementById('tooltipBody').innerHTML = '<div class="chart-tooltip__row">' +
|
||||
'<span class="chart-tooltip__dot" style="background:'+dom.color+'"></span>' +
|
||||
'<span class="chart-tooltip__label">等级</span>' +
|
||||
'<span class="chart-tooltip__val">'+dom.name+'</span></div>';
|
||||
var tip = document.getElementById('chartTooltip');
|
||||
tip.classList.add('show');
|
||||
var rect = el.getBoundingClientRect();
|
||||
var tipW = tip.offsetWidth;
|
||||
var tipH = tip.offsetHeight;
|
||||
var left = rect.left - tipW / 2 + rect.width / 2;
|
||||
var top = rect.top - tipH - 12;
|
||||
if(left < 8) left = 8;
|
||||
if(left + tipW > window.innerWidth - 8) left = window.innerWidth - tipW - 8;
|
||||
tip.style.left = left + 'px';
|
||||
tip.style.top = top + 'px';
|
||||
}
|
||||
|
||||
/* 渲染 AQI 柱状堆积图 */
|
||||
function renderAQIBarChart(key){
|
||||
var d = metricData[key];
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData || !timeData.barData) return;
|
||||
var barData = timeData.barData;
|
||||
var timeCfg = getTimeConfig(currentTimeRange);
|
||||
var barCount = barData.length;
|
||||
var chartLeft = 70, chartRight = 780, chartWidth = chartRight - chartLeft;
|
||||
var barGap = Math.max(4, Math.floor(chartWidth / (barCount * 8)));
|
||||
var barWidth = Math.max(8, Math.floor((chartWidth - barGap * (barCount + 1)) / barCount));
|
||||
var xPositions = [];
|
||||
for(var i = 0; i < barCount; i++){
|
||||
xPositions.push(chartLeft + barGap + i * (barWidth + barGap) + Math.floor(barWidth / 2));
|
||||
}
|
||||
var yTicks = [24,18,12,6,0];
|
||||
var gridLines = '';
|
||||
for(var i = 0; i < yTicks.length; i++){
|
||||
var y = 270 - (yTicks[i] / 24) * 250;
|
||||
gridLines += '<line x1="60" y1="'+y+'" x2="780" y2="'+y+'" class="chart-grid-line"/>';
|
||||
gridLines += '<text x="50" y="'+(y+4)+'" class="chart-axis-label" text-anchor="end">'+yTicks[i]+'h</text>';
|
||||
}
|
||||
var xLabelsHtml = '';
|
||||
var skip = barCount > 16 ? Math.floor(barCount / 10) : 1;
|
||||
for(var i = 0; i < timeCfg.labels.length; i++){
|
||||
if(i < xPositions.length && i % skip === 0){
|
||||
xLabelsHtml += '<text x="'+xPositions[i]+'" y="290" class="chart-axis-label" text-anchor="middle">'+timeCfg.labels[i]+'</text>';
|
||||
}
|
||||
}
|
||||
var barsHtml = '';
|
||||
for(var i = 0; i < barCount; i++){
|
||||
var bd = barData[i];
|
||||
var x = xPositions[i] - Math.floor(barWidth / 2);
|
||||
var segments = [
|
||||
{val:bd.severe, color:'#722ED1', name:'严重污染'},
|
||||
{val:bd.heavy, color:'#FF4D4F', name:'重度污染'},
|
||||
{val:bd.moderate, color:'#FA541C', name:'中度污染'},
|
||||
{val:bd.light, color:'#FAAD14', name:'轻度污染'},
|
||||
{val:bd.good, color:'#13C2C2', name:'良'},
|
||||
{val:bd.excellent, color:'#52C41A', name:'优'}
|
||||
];
|
||||
var yBase = 270;
|
||||
for(var j = 0; j < segments.length; j++){
|
||||
var seg = segments[j];
|
||||
if(seg.val > 0){
|
||||
var segH = (seg.val / 24) * 250;
|
||||
var segY = yBase - segH;
|
||||
barsHtml += '<rect x="'+x+'" y="'+segY+'" width="'+barWidth+'" height="'+segH+'" fill="'+seg.color+'" opacity="0.9" ' +
|
||||
'data-idx="'+i+'" data-level="'+seg.name+'" data-val="'+seg.val+'" ' +
|
||||
'onmouseenter="showBarTip(event,this)" onmouseleave="hideDotTip()"/>';
|
||||
yBase = segY;
|
||||
}
|
||||
}
|
||||
}
|
||||
var legendY = 305;
|
||||
var legendBottom = '<g transform="translate(60,'+legendY+')">';
|
||||
var lx2 = 0;
|
||||
for(var i = 0; i < aqiLevels.length; i++){
|
||||
var lv = aqiLevels[i];
|
||||
legendBottom += '<rect x="'+lx2+'" y="0" width="12" height="12" fill="'+lv.color+'" rx="2"/>';
|
||||
legendBottom += '<text x="'+(lx2+16)+'" y="10" fill="#666" font-size="11">'+lv.name+'</text>';
|
||||
lx2 += 72;
|
||||
}
|
||||
legendBottom += '</g>';
|
||||
|
||||
var svg = '<svg viewBox="0 0 800 330" preserveAspectRatio="xMidYMid meet">' +
|
||||
gridLines + xLabelsHtml +
|
||||
'<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>' +
|
||||
barsHtml + legendBottom +
|
||||
'</svg>';
|
||||
|
||||
document.getElementById('chartContainer').innerHTML = svg;
|
||||
window._chartTooltipData = {key:'aqiBar',barData:barData,labels:timeCfg.labels,xPositions:xPositions};
|
||||
}
|
||||
|
||||
function switchMetric(el, key){
|
||||
currentMetricKey = key;
|
||||
var btns = document.querySelectorAll('.metric-btn');
|
||||
btns.forEach(function(b){b.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
var d=metricData[key];
|
||||
document.getElementById('avgVal').textContent=d.avg;
|
||||
document.getElementById('minVal').textContent=d.min;
|
||||
document.getElementById('maxVal').textContent=d.max;
|
||||
var d = metricData[key];
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData) return;
|
||||
|
||||
// AQI 模式下隐藏统计摘要
|
||||
var summaryEl = document.getElementById('chartSummary');
|
||||
summaryEl.style.display = key === 'aqi' ? 'none' : '';
|
||||
|
||||
document.getElementById('avgVal').textContent = timeData.avg || '';
|
||||
document.getElementById('minVal').textContent = timeData.min || '';
|
||||
document.getElementById('maxVal').textContent = timeData.max || '';
|
||||
|
||||
var limitEl = document.getElementById('limitSummary');
|
||||
if(d.limitLabel){
|
||||
limitEl.innerHTML = '<svg width="16" height="8" style="vertical-align:middle;"><line x1="0" y1="4" x2="16" y2="4" stroke="#FF4D4F" stroke-width="1.5" stroke-dasharray="3,2"/></svg>' +
|
||||
'<span class="chart-summary__label" style="margin-left:6px;">'+d.limitLabel+'</span>';
|
||||
limitEl.style.display = '';
|
||||
} else {
|
||||
limitEl.style.display = 'none';
|
||||
}
|
||||
|
||||
renderChart(key);
|
||||
}
|
||||
/* 页面加载时渲染默认图表 */
|
||||
(function(){switchMetric(document.querySelector('.metric-btn.active'),'aqi');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室外空气 - 数据监测 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -74,7 +74,7 @@
|
||||
.aqi-tag--excellent{background:#F6FFED;color:#52C41A;}
|
||||
.aqi-tag--good{background:#E6FFFB;color:#13C2C2;}
|
||||
.aqi-tag--light{background:#FFFBE6;color:#FAAD14;}
|
||||
.aqi-tag--moderate{background:#FFF1F0;color:#FA541C;}
|
||||
.aqi-tag--moderate{background:#FFF7E6;color:#FA541C;}
|
||||
.aqi-tag--heavy{background:#FFF1F0;color:#FF4D4F;}
|
||||
.aqi-tag--severe{background:#F9F0FF;color:#722ED1;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
@@ -91,8 +91,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -102,23 +101,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">设备分类</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">分类管理</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">设备分类</a><a href="outdoor-data-monitor.html" class="sidebar-item active">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">分类管理</a><a href="outdoor-data-monitor.html" class="sidebar-item active">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">设备分类</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">分类管理</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室外空气 - 设备分类 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -102,8 +102,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -113,12 +112,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -126,10 +125,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item active">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item active">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -140,7 +139,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -151,7 +150,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室外空气 - 设备列表 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -90,6 +90,33 @@
|
||||
.map-picker.selected .map-picker__icon,.map-picker.selected .map-picker__text{display:none;}
|
||||
.map-picker__hint{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:var(--font-xs);color:var(--text-placeholder);display:none;}
|
||||
.map-picker.selected .map-picker__hint{display:block;}
|
||||
.map-view{display:none;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;position:relative;}
|
||||
.map-view.active{display:block;}
|
||||
.map-view__canvas{width:100%;height:calc(100vh - 200px);background:#F0F5FF;position:relative;overflow:hidden;min-height:500px;}
|
||||
.map-view__canvas::before{content:'';position:absolute;inset:0;background:
|
||||
linear-gradient(90deg,rgba(24,144,255,0.06) 1px,transparent 1px) 0 0/40px 40px,
|
||||
linear-gradient(rgba(24,144,255,0.06) 1px,transparent 1px) 0 0/40px 40px;
|
||||
pointer-events:none;}
|
||||
.map-view__canvas .map-bg{position:absolute;inset:0;opacity:0.15;pointer-events:none;}
|
||||
.map-pin{position:absolute;cursor:pointer;transition:transform .2s;z-index:10;text-align:center;}
|
||||
.map-pin:hover{transform:scale(1.15);z-index:20;}
|
||||
.map-pin__icon{width:36px;height:44px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.15);}
|
||||
.map-pin__icon svg{transform:rotate(45deg);width:18px;height:18px;}
|
||||
.map-pin__icon{background:#1890FF;}
|
||||
.map-pin__label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;margin-top:4px;background:rgba(255,255,255,0.9);padding:2px 6px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,0.08);}
|
||||
.device-modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:300;align-items:center;justify-content:center;}
|
||||
.device-modal-mask.open{display:flex;}
|
||||
.device-modal{background:#fff;border-radius:var(--radius-lg);width:680px;max-height:80vh;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.15);}
|
||||
.device-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.device-modal__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);}
|
||||
.device-modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);font-size:18px;}
|
||||
.device-modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.device-modal__body{padding:24px;overflow-y:auto;max-height:calc(80vh - 140px);}
|
||||
.device-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -100,8 +127,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -111,12 +137,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -124,10 +150,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item active">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -138,7 +164,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -149,7 +175,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -169,13 +195,16 @@
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="openDrawer()">+ 新增设备</button>
|
||||
<button class="btn btn-success">批量入库导入</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-primary" id="toggleViewBtn" onclick="toggleView()">地图展示</button>
|
||||
<span id="actionButtons">
|
||||
<button class="btn btn-primary" onclick="openDrawer()">+ 新增设备</button>
|
||||
<button class="btn btn-success">批量入库导入</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 数据列表 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card" id="tableView">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>设备名称</th><th>设备编码</th><th>设备分类</th><th>所属单位</th><th>设备位置</th><th>布点日期</th><th>监测时长(天)</th><th>操作</th></tr></thead>
|
||||
@@ -198,6 +227,47 @@
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图展示视图 -->
|
||||
<div class="map-view" id="mapView">
|
||||
<div class="map-view__canvas" id="mapCanvas">
|
||||
<svg class="map-bg" viewBox="0 0 1200 600" fill="none" preserveAspectRatio="none">
|
||||
<path d="M50 400h120V280H50v120z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M50 280l60-40 60 40" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M220 450h180V300H220v150z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M220 300l90-60 90 60" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M450 380h150V250H450v130z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M450 250l75-50 75 50" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M650 420h200V320H650v100z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M650 320l100-70 100 70" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M900 360h160V220H900v140z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M900 220l80-50 80 50" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M1050 480h120V350h-120v130z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M0 500h1200" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
<path d="M300 0v600" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
<path d="M700 0v600" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
</svg>
|
||||
<div class="map-pin" style="top:18%;left:12%;" onclick="showDeviceDetail(0)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">监测站A1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:35%;left:30%;" onclick="showDeviceDetail(1)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">检测仪A2</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:55%;left:55%;" onclick="showDeviceDetail(2)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">监测仪B1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:25%;left:72%;" onclick="showDeviceDetail(3)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5v6h2V7h-2zm1 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1z"/></svg></div>
|
||||
<div class="map-pin__label">参数站C1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:65%;left:85%;" onclick="showDeviceDetail(4)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">质量站D1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增设备 - 右侧抽屉弹窗 -->
|
||||
@@ -278,6 +348,75 @@ 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 openDrawer(){document.getElementById('drawerMask').classList.add('open');document.getElementById('drawer').classList.add('open');}
|
||||
function closeDrawer(){document.getElementById('drawerMask').classList.remove('open');document.getElementById('drawer').classList.remove('open');}
|
||||
var isMapView = false;
|
||||
function toggleView(){
|
||||
var tableView = document.getElementById('tableView');
|
||||
var mapView = document.getElementById('mapView');
|
||||
var btn = document.getElementById('toggleViewBtn');
|
||||
var actions = document.getElementById('actionButtons');
|
||||
if(isMapView){
|
||||
tableView.style.display = '';
|
||||
mapView.classList.remove('active');
|
||||
actions.style.display = '';
|
||||
btn.textContent = '地图展示';
|
||||
} else {
|
||||
tableView.style.display = 'none';
|
||||
mapView.classList.add('active');
|
||||
actions.style.display = 'none';
|
||||
btn.textContent = '列表展示';
|
||||
}
|
||||
isMapView = !isMapView;
|
||||
}
|
||||
var devices = [
|
||||
{name:'室外空气监测站A1',code:'OA-2024-001',category:'空气质量监测站',unit:'采油一厂',location:'厂区东门广场',date:'2024-05-10',days:'364',status:'在线'},
|
||||
{name:'PM10检测仪A2',code:'OA-2024-002',category:'PM10检测仪',unit:'采油一厂',location:'办公楼顶层平台',date:'2024-06-18',days:'325',status:'在线'},
|
||||
{name:'臭氧监测仪B1',code:'OA-2024-003',category:'臭氧检测仪',unit:'采油二厂',location:'生产区北侧围墙',date:'2024-07-25',days:'288',status:'在线'},
|
||||
{name:'气象参数站C1',code:'OA-2024-004',category:'气象参数监测仪',unit:'采气厂',location:'厂区中心绿地',date:'2024-08-30',days:'252',status:'离线'},
|
||||
{name:'空气质量站D1',code:'OA-2025-001',category:'空气质量监测站',unit:'炼化公司',location:'南门停车场旁',date:'2025-02-14',days:'84',status:'在线'},
|
||||
];
|
||||
function showDeviceDetail(idx){
|
||||
var d = devices[idx];
|
||||
if(!d) return;
|
||||
document.getElementById('deviceModalTitle').textContent = d.name + ' - 设备详情';
|
||||
document.getElementById('deviceName').textContent = d.name;
|
||||
document.getElementById('deviceCode').textContent = d.code;
|
||||
document.getElementById('deviceCategory').textContent = d.category;
|
||||
document.getElementById('deviceUnit').textContent = d.unit;
|
||||
document.getElementById('deviceLocation').textContent = d.location;
|
||||
document.getElementById('deviceDate').textContent = d.date;
|
||||
document.getElementById('deviceDays').textContent = d.days;
|
||||
document.getElementById('deviceStatus').textContent = d.status;
|
||||
document.getElementById('deviceModalMask').classList.add('open');
|
||||
}
|
||||
function hideDeviceDetail(){
|
||||
document.getElementById('deviceModalMask').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 设备详情弹窗 [交互] 点击地图上的设备标记点弹出此弹窗 -->
|
||||
<div class="device-modal-mask" id="deviceModalMask" onclick="hideDeviceDetail()">
|
||||
<div class="device-modal" onclick="event.stopPropagation()">
|
||||
<div class="device-modal__header">
|
||||
<span class="device-modal__title" id="deviceModalTitle">设备详情</span>
|
||||
<button class="device-modal__close" onclick="hideDeviceDetail()">×</button>
|
||||
</div>
|
||||
<div class="device-modal__body">
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><span class="info-item__label">设备名称</span><span class="info-item__value" id="deviceName">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备编码</span><span class="info-item__value" id="deviceCode">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备分类</span><span class="info-item__value" id="deviceCategory">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value" id="deviceUnit">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备位置</span><span class="info-item__value" id="deviceLocation">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备状态</span><span class="info-item__value" id="deviceStatus">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">布点日期</span><span class="info-item__value" id="deviceDate">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">监测时长(天)</span><span class="info-item__value" id="deviceDays">-</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-modal__footer">
|
||||
<button class="btn btn-default" onclick="hideDeviceDetail()">关闭</button>
|
||||
<button class="btn btn-primary" onclick="hideDeviceDetail();openDrawer()">编辑</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室外空气 - 异常报警 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -78,8 +78,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -89,12 +88,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -102,10 +101,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item active">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -116,7 +115,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -127,7 +126,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室外空气 - 异常数据详情 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -79,8 +79,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -90,12 +89,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -103,10 +102,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -117,7 +116,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -128,7 +127,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室外空气 - 历史数据 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -73,8 +73,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -84,12 +83,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -97,10 +96,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -111,7 +110,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -122,7 +121,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室外空气 - 监测数据详情 | 健康CQ原型</title>
|
||||
<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;}
|
||||
@@ -84,8 +84,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -95,12 +94,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -108,10 +107,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -122,7 +121,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -133,7 +132,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -87,8 +87,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -98,12 +97,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -111,10 +110,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -125,7 +124,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -136,7 +135,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item active">应用记录</a>
|
||||
|
||||
@@ -18,7 +18,8 @@
|
||||
.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;}
|
||||
.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;}
|
||||
@@ -54,7 +55,11 @@
|
||||
.device-card__label{font-size:var(--font-sm);color:var(--text-placeholder);}
|
||||
.device-card__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;text-align:right;max-width:180px;}
|
||||
.allergy-tag{display:inline-block;padding:2px 10px;border-radius:10px;font-size:var(--font-xs);font-weight:500;}
|
||||
.allergy-tag--vlow{background:#F6FFED;color:#52C41A;}
|
||||
.allergy-tag--low{background:#E6FFFB;color:#13C2C2;}
|
||||
.allergy-tag--medium{background:#FFFBE6;color:#FAAD14;}
|
||||
.allergy-tag--high{background:#FFF1F0;color:#FA541C;}
|
||||
.allergy-tag--vhigh{background:#FFF1F0;color:#FF4D4F;}
|
||||
.device-card__tip{margin-top:4px;padding:12px;background:#FFFBE6;border-radius:var(--radius-sm);border:1px solid #FFE58F;}
|
||||
.device-card__tip p{font-size:var(--font-xs);color:var(--text-secondary);line-height:1.6;margin:0;}
|
||||
.realtime-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
|
||||
@@ -85,6 +90,16 @@
|
||||
.chart-summary__dot{width:8px;height:8px;border-radius:50%;}
|
||||
.chart-summary__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.chart-summary__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:600;}
|
||||
.chart-limit-line{stroke:#FF4D4F;stroke-width:1.5;stroke-dasharray:6,3;opacity:.7;}
|
||||
.chart-limit-exceed{fill:#FF4D4F;opacity:.08;}
|
||||
.chart-limit-label{fill:#FF4D4F;font-size:10px;font-weight:500;}
|
||||
.chart-tooltip{display:none;position:fixed;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:10px 14px;z-index:400;pointer-events:none;font-size:var(--font-sm);min-width:140px;}
|
||||
.chart-tooltip.show{display:block;}
|
||||
.chart-tooltip__date{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #f0f0f0;}
|
||||
.chart-tooltip__row{display:flex;align-items:center;gap:6px;padding:2px 0;}
|
||||
.chart-tooltip__dot{display:inline-block;width:8px;height:8px;border-radius:2px;flex-shrink:0;}
|
||||
.chart-tooltip__label{color:var(--text-secondary);font-size:var(--font-xs);flex:1;}
|
||||
.chart-tooltip__val{font-size:var(--font-sm);color:var(--text-primary);font-weight:600;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -95,8 +110,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -106,29 +120,29 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">设备分类</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">分类管理</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">设备分类</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">分类管理</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">设备分类</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">分类管理</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">设备分类</a><a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">分类管理</a><a href="pollen-data-monitor.html" class="sidebar-item active">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -138,76 +152,33 @@
|
||||
<span class="page-header__title">动态分析</span>
|
||||
</div>
|
||||
<div class="analysis-layout">
|
||||
<!-- 左侧 - 设备信息 -->
|
||||
<div class="device-card">
|
||||
<div class="device-card__header">
|
||||
<div class="device-card__name">花粉自动计数仪-C01</div>
|
||||
<div class="device-card__code">PL-2024-003</div>
|
||||
</div>
|
||||
<div class="device-card__body">
|
||||
<div class="device-card__item">
|
||||
<span class="device-card__label">所属单位</span>
|
||||
<span class="device-card__value">采油二厂</span>
|
||||
</div>
|
||||
<div class="device-card__item">
|
||||
<span class="device-card__label">设备位置</span>
|
||||
<span class="device-card__value">生活区花园</span>
|
||||
</div>
|
||||
<div class="device-card__item">
|
||||
<span class="device-card__label">数据更新时间</span>
|
||||
<span class="device-card__value">2026-05-14 14:25</span>
|
||||
</div>
|
||||
<div class="device-card__item">
|
||||
<span class="device-card__label">过敏等级</span>
|
||||
<span class="device-card__value"><span class="allergy-tag allergy-tag--medium">中等</span></span>
|
||||
</div>
|
||||
<div class="device-card__tip">
|
||||
<p>花粉浓度中等偏高，过敏体质人群建议减少户外活动，外出时佩戴口罩。</p>
|
||||
</div>
|
||||
<div class="device-card__item"><span class="device-card__label">所属单位</span><span class="device-card__value">采油二厂</span></div>
|
||||
<div class="device-card__item"><span class="device-card__label">设备位置</span><span class="device-card__value">生活区花园</span></div>
|
||||
<div class="device-card__item"><span class="device-card__label">数据更新时间</span><span class="device-card__value">2026-05-14 14:25</span></div>
|
||||
<div class="device-card__item"><span class="device-card__label">过敏等级</span><span class="device-card__value"><span class="allergy-tag allergy-tag--medium">中等</span></span></div>
|
||||
<div class="device-card__tip"><p>花粉浓度中等偏高，过敏体质人群建议减少户外活动，外出时佩戴口罩。</p></div>
|
||||
<div class="realtime-section">
|
||||
<div class="realtime-title">实时监测数据(粒/千mm²)</div>
|
||||
<div class="realtime-grid">
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">68</div>
|
||||
<div class="realtime-item__label">榆属</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">45</div>
|
||||
<div class="realtime-item__label">松属</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">82</div>
|
||||
<div class="realtime-item__label">杨属</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">35</div>
|
||||
<div class="realtime-item__label">柏科</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">52</div>
|
||||
<div class="realtime-item__label">柳属</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">30</div>
|
||||
<div class="realtime-item__label">蒿属</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">18</div>
|
||||
<div class="realtime-item__label">藜科</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">12</div>
|
||||
<div class="realtime-item__label">苋科</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">342</div>
|
||||
<div class="realtime-item__label">花粉总数</div>
|
||||
</div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">68</div><div class="realtime-item__label">榆属</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">45</div><div class="realtime-item__label">松属</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">82</div><div class="realtime-item__label">杨属</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">35</div><div class="realtime-item__label">柏科</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">52</div><div class="realtime-item__label">柳属</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">30</div><div class="realtime-item__label">蒿属</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">18</div><div class="realtime-item__label">藜科</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">12</div><div class="realtime-item__label">苋科</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">342</div><div class="realtime-item__label">花粉总数</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧 - 趋势图 -->
|
||||
<div class="chart-panel">
|
||||
<div class="time-tabs">
|
||||
<div class="time-tab active" onclick="switchTimeTab(this)">近24小时</div>
|
||||
@@ -216,7 +187,8 @@
|
||||
<div class="time-tab" onclick="switchTimeTab(this)">近3个月</div>
|
||||
</div>
|
||||
<div class="metric-bar">
|
||||
<button class="metric-btn active" onclick="switchMetric(this,'elm')">榆属</button>
|
||||
<button class="metric-btn active" onclick="switchMetric(this,'allergy')">过敏等级</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'elm')">榆属</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'pine')">松属</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'poplar')">杨属</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'cypress')">柏科</button>
|
||||
@@ -226,90 +198,466 @@
|
||||
<button class="metric-btn" onclick="switchMetric(this,'amaranth')">苋科</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'total')">花粉总数</button>
|
||||
</div>
|
||||
<div class="chart-summary">
|
||||
<!-- 统计摘要 [交互] 过敏等级 模式下隐藏 -->
|
||||
<div class="chart-summary" id="chartSummary">
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#1890FF;"></span><span class="chart-summary__label">平均值</span><span class="chart-summary__value" id="avgVal">62 粒/千mm²</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#52C41A;"></span><span class="chart-summary__label">最小值</span><span class="chart-summary__value" id="minVal">28 粒/千mm²</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#FF4D4F;"></span><span class="chart-summary__label">最大值</span><span class="chart-summary__value" id="maxVal">95 粒/千mm²</span></div>
|
||||
<div class="chart-summary__item" style="margin-left:auto;" id="limitSummary"></div>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="chart-container" id="chartContainer">
|
||||
<svg viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#1890FF" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#1890FF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<line x1="60" y1="20" x2="780" y2="20" class="chart-grid-line"/>
|
||||
<line x1="60" y1="80" x2="780" y2="80" class="chart-grid-line"/>
|
||||
<line x1="60" y1="140" x2="780" y2="140" class="chart-grid-line"/>
|
||||
<line x1="60" y1="200" x2="780" y2="200" class="chart-grid-line"/>
|
||||
<line x1="60" y1="260" x2="780" y2="260" class="chart-grid-line"/>
|
||||
<text x="50" y="24" class="chart-axis-label" text-anchor="end">100</text>
|
||||
<text x="50" y="84" class="chart-axis-label" text-anchor="end">80</text>
|
||||
<text x="50" y="144" class="chart-axis-label" text-anchor="end">60</text>
|
||||
<text x="50" y="204" class="chart-axis-label" text-anchor="end">40</text>
|
||||
<text x="50" y="264" class="chart-axis-label" text-anchor="end">20</text>
|
||||
<text x="90" y="290" class="chart-axis-label" text-anchor="middle">00:00</text>
|
||||
<text x="180" y="290" class="chart-axis-label" text-anchor="middle">04:00</text>
|
||||
<text x="270" y="290" class="chart-axis-label" text-anchor="middle">06:00</text>
|
||||
<text x="360" y="290" class="chart-axis-label" text-anchor="middle">08:00</text>
|
||||
<text x="450" y="290" class="chart-axis-label" text-anchor="middle">10:00</text>
|
||||
<text x="540" y="290" class="chart-axis-label" text-anchor="middle">12:00</text>
|
||||
<text x="630" y="290" class="chart-axis-label" text-anchor="middle">14:00</text>
|
||||
<text x="720" y="290" class="chart-axis-label" text-anchor="middle">16:00</text>
|
||||
<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>
|
||||
<path class="chart-area-fill" d="M90,220 L150,210 L210,200 L270,170 L330,140 L390,110 L450,90 L510,100 L570,80 L630,110 L690,130 L750,140 L750,270 L90,270 Z"/>
|
||||
<polyline class="chart-line" points="90,220 150,210 210,200 270,170 330,140 390,110 450,90 510,100 570,80 630,110 690,130 750,140"/>
|
||||
<circle cx="90" cy="220" r="4" class="chart-dot"/>
|
||||
<circle cx="150" cy="210" r="4" class="chart-dot"/>
|
||||
<circle cx="210" cy="200" r="4" class="chart-dot"/>
|
||||
<circle cx="270" cy="170" r="4" class="chart-dot"/>
|
||||
<circle cx="330" cy="140" r="4" class="chart-dot"/>
|
||||
<circle cx="390" cy="110" r="4" class="chart-dot"/>
|
||||
<circle cx="450" cy="90" r="4" class="chart-dot"/>
|
||||
<circle cx="510" cy="100" r="4" class="chart-dot"/>
|
||||
<circle cx="570" cy="80" r="4" class="chart-dot"/>
|
||||
<circle cx="630" cy="110" r="4" class="chart-dot"/>
|
||||
<circle cx="690" cy="130" r="4" class="chart-dot"/>
|
||||
<circle cx="750" cy="140" r="4" class="chart-dot"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="chart-container" id="chartContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 数据点 Tip 弹窗 -->
|
||||
<div class="chart-tooltip" id="chartTooltip">
|
||||
<div class="chart-tooltip__date" id="tooltipDate"></div>
|
||||
<div id="tooltipBody"></div>
|
||||
</div>
|
||||
|
||||
<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');})();
|
||||
|
||||
/* 时间范围 Tab 切换 */
|
||||
var currentTimeRange = '近24小时';
|
||||
function switchTimeTab(el){
|
||||
var tabs=document.querySelectorAll('.time-tab');
|
||||
var tabs = document.querySelectorAll('.time-tab');
|
||||
tabs.forEach(function(t){t.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
currentTimeRange = el.textContent;
|
||||
var activeBtn = document.querySelector('.metric-btn.active');
|
||||
if(activeBtn && currentMetricKey){
|
||||
switchMetric(activeBtn, currentMetricKey);
|
||||
}
|
||||
}
|
||||
|
||||
var u='粒/千mm²';
|
||||
var metricData={
|
||||
elm: {avg:'62 '+u, min:'28 '+u, max:'95 '+u},
|
||||
pine: {avg:'42 '+u, min:'18 '+u, max:'68 '+u},
|
||||
poplar: {avg:'78 '+u, min:'35 '+u, max:'120 '+u},
|
||||
cypress: {avg:'32 '+u, min:'12 '+u, max:'55 '+u},
|
||||
willow: {avg:'48 '+u, min:'20 '+u, max:'75 '+u},
|
||||
mugwort: {avg:'28 '+u, min:'10 '+u, max:'48 '+u},
|
||||
cheno: {avg:'16 '+u, min:'5 '+u, max:'28 '+u},
|
||||
amaranth:{avg:'10 '+u, min:'3 '+u, max:'18 '+u},
|
||||
total: {avg:'316 '+u, min:'131 '+u, max:'507 '+u}
|
||||
/* 过敏等级颜色配置 */
|
||||
var allergyLevels = [
|
||||
{name:'很低', color:'#52C41A'},
|
||||
{name:'低', color:'#13C2C2'},
|
||||
{name:'中等', color:'#FAAD14'},
|
||||
{name:'高', color:'#FA541C'},
|
||||
{name:'很高', color:'#FF4D4F'}
|
||||
];
|
||||
|
||||
/* 监测类型切换 */
|
||||
var currentMetricKey = 'allergy';
|
||||
var u = '粒/千mm²';
|
||||
var metricData = {
|
||||
allergy:{avg:'中等', min:'很低', max:'很高', unit:'',
|
||||
yMax:5, yTicks:[5,4,3,2,1],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
isAllergy:true,
|
||||
levelBands:[
|
||||
{yMin:20,yMax:70,label:'很高',color:'#FF4D4F',opacity:.08},
|
||||
{yMin:70,yMax:120,label:'高',color:'#FA541C',opacity:.08},
|
||||
{yMin:120,yMax:170,label:'中等',color:'#FAAD14',opacity:.08},
|
||||
{yMin:170,yMax:220,label:'低',color:'#13C2C2',opacity:.08},
|
||||
{yMin:220,yMax:270,label:'很低',color:'#52C41A',opacity:.08}
|
||||
],
|
||||
data:{
|
||||
'近24小时':{avg:'中等',min:'很低',max:'很高',points:[0,0,1,1,2,2,2,3,3,3,4,3]},
|
||||
'近7日':{barData:[
|
||||
{vlow:16,low:5,medium:2,high:1,vhigh:0},
|
||||
{vlow:14,low:6,medium:3,high:1,vhigh:0},
|
||||
{vlow:12,low:5,medium:4,high:2,vhigh:1},
|
||||
{vlow:10,low:6,medium:4,high:3,vhigh:1},
|
||||
{vlow:13,low:6,medium:3,high:2,vhigh:0},
|
||||
{vlow:15,low:5,medium:3,high:1,vhigh:0},
|
||||
{vlow:18,low:4,medium:2,high:0,vhigh:0}
|
||||
]},
|
||||
'近30日':{barData:[
|
||||
{vlow:16,low:5,medium:2,high:1,vhigh:0},{vlow:14,low:6,medium:3,high:1,vhigh:0},{vlow:12,low:5,medium:4,high:2,vhigh:1},{vlow:13,low:6,medium:3,high:2,vhigh:0},{vlow:18,low:4,medium:2,high:0,vhigh:0},{vlow:15,low:5,medium:3,high:1,vhigh:0},{vlow:10,low:6,medium:4,high:3,vhigh:1},{vlow:8,low:5,medium:5,high:4,vhigh:2},{vlow:13,low:6,medium:3,high:2,vhigh:0},{vlow:16,low:5,medium:2,high:1,vhigh:0},{vlow:12,low:5,medium:4,high:2,vhigh:1},{vlow:14,low:6,medium:3,high:1,vhigh:0},{vlow:17,low:4,medium:2,high:1,vhigh:0},{vlow:11,low:6,medium:4,high:2,vhigh:1},{vlow:15,low:5,medium:3,high:1,vhigh:0},{vlow:18,low:4,medium:2,high:0,vhigh:0},{vlow:9,low:6,medium:5,high:3,vhigh:1},{vlow:14,low:6,medium:3,high:1,vhigh:0},{vlow:16,low:5,medium:2,high:1,vhigh:0},{vlow:12,low:5,medium:4,high:2,vhigh:1},{vlow:15,low:5,medium:3,high:1,vhigh:0},{vlow:13,low:6,medium:3,high:2,vhigh:0},{vlow:11,low:6,medium:4,high:2,vhigh:1},{vlow:17,low:4,medium:2,high:1,vhigh:0},{vlow:14,low:6,medium:3,high:1,vhigh:0},{vlow:16,low:5,medium:2,high:1,vhigh:0},{vlow:12,low:5,medium:4,high:2,vhigh:1},{vlow:18,low:4,medium:2,high:0,vhigh:0},{vlow:13,low:6,medium:3,high:2,vhigh:0},{vlow:15,low:5,medium:3,high:1,vhigh:0}
|
||||
]}
|
||||
}},
|
||||
elm: {avg:'62 '+u, min:'28 '+u, max:'95 '+u, unit:u, yMax:100, yTicks:[100,85,70,55,40], limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'62 '+u,min:'28 '+u,max:'95 '+u,points:[28,32,38,45,52,58,65,72,78,85,90,95]},
|
||||
'近7日':{avg:'60 '+u,min:'30 '+u,max:'92 '+u,points:[35,42,48,55,62,70,78]},
|
||||
'近30日':{avg:'58 '+u,min:'25 '+u,max:'98 '+u,points:[30,32,35,38,40,42,45,48,50,52,55,58,60,62,65,68,70,72,75,78,80,82,85,88,90,92,95,96,97,98]}
|
||||
}},
|
||||
pine: {avg:'42 '+u, min:'18 '+u, max:'68 '+u, unit:u, yMax:75, yTicks:[75,65,55,45,35], limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'42 '+u,min:'18 '+u,max:'68 '+u,points:[18,22,28,32,36,40,44,48,52,56,62,68]},
|
||||
'近7日':{avg:'40 '+u,min:'20 '+u,max:'65 '+u,points:[22,28,32,38,42,50,58]},
|
||||
'近30日':{avg:'38 '+u,min:'15 '+u,max:'70 '+u,points:[20,22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,56,58,60,62,64,66,68,69,70,55,40,25]}
|
||||
}},
|
||||
poplar: {avg:'78 '+u, min:'35 '+u, max:'120 '+u, unit:u, yMax:130, yTicks:[130,110,90,70,50], limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'78 '+u,min:'35 '+u,max:'120 '+u,points:[35,40,48,55,62,68,75,82,90,100,110,120]},
|
||||
'近7日':{avg:'75 '+u,min:'38 '+u,max:'118 '+u,points:[40,48,55,65,75,88,100]},
|
||||
'近30日':{avg:'72 '+u,min:'30 '+u,max:'125 '+u,points:[35,38,42,45,48,52,55,58,62,65,68,72,75,78,82,85,88,92,95,98,102,105,108,112,115,118,120,122,124,125]}
|
||||
}},
|
||||
cypress: {avg:'32 '+u, min:'12 '+u, max:'55 '+u, unit:u, yMax:60, yTicks:[60,50,40,30,20], limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'32 '+u,min:'12 '+u,max:'55 '+u,points:[12,15,18,22,25,28,32,35,38,42,48,55]},
|
||||
'近7日':{avg:'30 '+u,min:'14 '+u,max:'52 '+u,points:[15,18,22,28,32,38,45]},
|
||||
'近30日':{avg:'28 '+u,min:'10 '+u,max:'58 '+u,points:[14,15,16,18,19,20,22,23,24,25,26,28,29,30,31,32,33,34,35,36,38,40,42,44,46,48,50,52,54,58]}
|
||||
}},
|
||||
willow: {avg:'48 '+u, min:'20 '+u, max:'75 '+u, unit:u, yMax:80, yTicks:[80,70,60,50,40], limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'48 '+u,min:'20 '+u,max:'75 '+u,points:[20,24,28,32,36,40,44,48,52,58,65,75]},
|
||||
'近7日':{avg:'45 '+u,min:'22 '+u,max:'72 '+u,points:[24,30,35,40,48,55,65]},
|
||||
'近30日':{avg:'42 '+u,min:'18 '+u,max:'78 '+u,points:[22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,56,58,60,62,64,66,68,70,72,74,76,77,78]}
|
||||
}},
|
||||
mugwort: {avg:'28 '+u, min:'10 '+u, max:'48 '+u, unit:u, yMax:55, yTicks:[55,45,35,25,15], limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'28 '+u,min:'10 '+u,max:'48 '+u,points:[10,12,15,18,20,22,25,28,32,36,42,48]},
|
||||
'近7日':{avg:'26 '+u,min:'12 '+u,max:'45 '+u,points:[12,15,18,22,28,32,38]},
|
||||
'近30日':{avg:'24 '+u,min:'8 '+u,max:'50 '+u,points:[12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,38,40,42,45,50]}
|
||||
}},
|
||||
cheno: {avg:'16 '+u, min:'5 '+u, max:'28 '+u, unit:u, yMax:32, yTicks:[32,28,24,20,16], limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'16 '+u,min:'5 '+u,max:'28 '+u,points:[5,6,8,10,12,14,16,18,20,22,25,28]},
|
||||
'近7日':{avg:'15 '+u,min:'6 '+u,max:'26 '+u,points:[7,8,10,12,15,18,22]},
|
||||
'近30日':{avg:'14 '+u,min:'4 '+u,max:'30 '+u,points:[6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,14,14,15,15,16,16,17,18,19,20,22,24,26,30]}
|
||||
}},
|
||||
amaranth:{avg:'10 '+u, min:'3 '+u, max:'18 '+u, unit:u, yMax:20, yTicks:[20,18,16,14,12], limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'10 '+u,min:'3 '+u,max:'18 '+u,points:[3,4,5,6,7,8,9,10,12,14,16,18]},
|
||||
'近7日':{avg:'9 '+u,min:'4 '+u,max:'16 '+u,points:[4,5,6,7,8,10,12]},
|
||||
'近30日':{avg:'8 '+u,min:'3 '+u,max:'20 '+u,points:[4,4,4,5,5,5,6,6,6,7,7,7,8,8,8,9,9,9,10,10,10,11,11,12,13,14,15,16,18,20]}
|
||||
}},
|
||||
total: {avg:'316 '+u, min:'131 '+u, max:'507 '+u, unit:u, yMax:550, yTicks:[550,450,350,250,150], limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'316 '+u,min:'131 '+u,max:'507 '+u,points:[131,153,178,200,220,242,270,295,320,360,408,507]},
|
||||
'近7日':{avg:'300 '+u,min:'140 '+u,max:'480 '+u,points:[150,175,200,230,270,320,380]},
|
||||
'近30日':{avg:'280 '+u,min:'120 '+u,max:'550 '+u,points:[140,148,155,162,170,178,185,192,200,208,215,222,230,238,245,252,260,268,275,282,290,298,305,312,320,330,340,360,390,430]}
|
||||
}}
|
||||
};
|
||||
function switchMetric(el,key){
|
||||
var btns=document.querySelectorAll('.metric-btn');
|
||||
|
||||
/* 根据时间范围获取 X 轴配置 */
|
||||
function getTimeConfig(timeRange){
|
||||
if(timeRange === '近7日'){
|
||||
var labels = [];
|
||||
var now = new Date(2026,5,3);
|
||||
for(var i=6;i>=0;i--){
|
||||
var d = new Date(now);
|
||||
d.setDate(d.getDate() - i);
|
||||
labels.push((d.getMonth()+1)+'/'+d.getDate());
|
||||
}
|
||||
return {labels:labels,count:7};
|
||||
} else if(timeRange === '近30日'){
|
||||
var labels = [];
|
||||
var now = new Date(2026,5,3);
|
||||
for(var i=29;i>=0;i--){
|
||||
var d = new Date(now);
|
||||
d.setDate(d.getDate() - i);
|
||||
labels.push((d.getMonth()+1)+'/'+d.getDate());
|
||||
}
|
||||
return {labels:labels,count:30};
|
||||
}
|
||||
return {
|
||||
labels:['00:00','02:00','04:00','06:00','08:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'],
|
||||
count:12
|
||||
};
|
||||
}
|
||||
|
||||
/* 根据数据点数量计算 X 坐标 */
|
||||
function calcXPositions(count){
|
||||
var positions = [];
|
||||
var step = 690 / (count - 1);
|
||||
for(var i=0;i<count;i++){
|
||||
positions.push(90 + Math.round(i * step));
|
||||
}
|
||||
return positions;
|
||||
}
|
||||
|
||||
/* 根据数值映射到 SVG Y 坐标 */
|
||||
function valToY(val, yMax){
|
||||
return 270 - (val / yMax) * 250;
|
||||
}
|
||||
|
||||
/* 渲染 SVG 图表 */
|
||||
function renderChart(key){
|
||||
// 过敏等级 非24小时使用柱状堆积图
|
||||
if(key === 'allergy' && currentTimeRange !== '近24小时'){
|
||||
renderAllergyBarChart(key);
|
||||
return;
|
||||
}
|
||||
var d = metricData[key];
|
||||
if(!d) return;
|
||||
var timeCfg = getTimeConfig(currentTimeRange);
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData) return;
|
||||
var points = timeData.points;
|
||||
var xPositions = calcXPositions(points.length);
|
||||
var yMax = d.yMax;
|
||||
var yTicks = d.yTicks;
|
||||
|
||||
// 网格线
|
||||
var gridLines = '';
|
||||
for(var i = 0; i < yTicks.length; i++){
|
||||
var y = valToY(yTicks[i], yMax);
|
||||
gridLines += '<line x1="60" y1="'+y+'" x2="780" y2="'+y+'" class="chart-grid-line"/>';
|
||||
gridLines += '<text x="50" y="'+(y+4)+'" class="chart-axis-label" text-anchor="end">'+yTicks[i]+'</text>';
|
||||
}
|
||||
|
||||
// X 轴标签
|
||||
var xLabelsHtml = '';
|
||||
var skip = points.length > 16 ? Math.floor(points.length / 10) : 1;
|
||||
for(var i = 0; i < timeCfg.labels.length; i++){
|
||||
if(i < xPositions.length && i % skip === 0){
|
||||
xLabelsHtml += '<text x="'+xPositions[i]+'" y="290" class="chart-axis-label" text-anchor="middle">'+timeCfg.labels[i]+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 过敏等级背景
|
||||
var levelBandsHtml = '';
|
||||
if(d.isAllergy && d.levelBands){
|
||||
for(var i = 0; i < d.levelBands.length; i++){
|
||||
var b = d.levelBands[i];
|
||||
levelBandsHtml += '<rect x="60" y="'+b.yMin+'" width="720" height="'+(b.yMax-b.yMin)+'" fill="'+b.color+'" opacity="'+b.opacity+'"/>';
|
||||
levelBandsHtml += '<text x="68" y="'+(b.yMin + (b.yMax-b.yMin)/2 + 4)+'" fill="'+b.color+'" font-size="10" font-weight="500">'+b.label+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 超标区域和虚线
|
||||
var limitHtml = '';
|
||||
if(d.limitUpper){
|
||||
var upperY = valToY(d.limitUpper, yMax);
|
||||
var lowerY = valToY(d.limitLower, yMax);
|
||||
if(upperY > 20){
|
||||
limitHtml += '<rect x="60" y="20" width="720" height="'+(upperY-20)+'" class="chart-limit-exceed"/>';
|
||||
}
|
||||
if(lowerY < 270){
|
||||
limitHtml += '<rect x="60" y="'+lowerY+'" width="720" height="'+(270-lowerY)+'" class="chart-limit-exceed"/>';
|
||||
}
|
||||
limitHtml += '<line x1="60" y1="'+upperY+'" x2="780" y2="'+upperY+'" class="chart-limit-line"/>';
|
||||
limitHtml += '<line x1="60" y1="'+lowerY+'" x2="780" y2="'+lowerY+'" class="chart-limit-line"/>';
|
||||
if(d.limitLabelUpper){
|
||||
limitHtml += '<text x="74" y="'+(upperY-4)+'" class="chart-limit-label">'+d.limitLabelUpper+'</text>';
|
||||
limitHtml += '<text x="74" y="'+(lowerY+14)+'" class="chart-limit-label">'+d.limitLabelLower+'</text>';
|
||||
} else {
|
||||
limitHtml += '<text x="74" y="'+(upperY-4)+'" class="chart-limit-label">上限 '+d.limitUpper+'</text>';
|
||||
limitHtml += '<text x="74" y="'+(lowerY+14)+'" class="chart-limit-label">下限 '+d.limitLower+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 折线
|
||||
var pathD = '';
|
||||
var polylinePoints = '';
|
||||
var dotsHtml = '';
|
||||
var dotR = points.length > 20 ? 3 : 4;
|
||||
window._chartTooltipData = {key:key,points:points,labels:timeCfg.labels,unit:d.unit,yMax:yMax,xPositions:xPositions};
|
||||
for(var i = 0; i < points.length; i++){
|
||||
var y = valToY(points[i], yMax);
|
||||
var x = xPositions[i];
|
||||
pathD += (i===0?'M':'L') + x + ',' + y + ' ';
|
||||
polylinePoints += x + ',' + y + ' ';
|
||||
var dotColor = d.isAllergy ? getAllergyColor(points[i]) : '#1890FF';
|
||||
dotsHtml += '<circle cx="'+x+'" cy="'+y+'" r="'+dotR+'" class="chart-dot" style="fill:'+dotColor+';cursor:pointer;" ' +
|
||||
'data-idx="'+i+'" onmouseenter="showDotTip(event,this)" onmouseleave="hideDotTip()"/>';
|
||||
}
|
||||
pathD += 'L'+xPositions[points.length-1]+',270 L'+xPositions[0]+',270 Z';
|
||||
|
||||
var svg = '<svg viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet">' +
|
||||
'<defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">' +
|
||||
'<stop offset="0%" stop-color="#1890FF" stop-opacity="0.3"/>' +
|
||||
'<stop offset="100%" stop-color="#1890FF" stop-opacity="0"/>' +
|
||||
'</linearGradient></defs>' +
|
||||
gridLines +
|
||||
xLabelsHtml +
|
||||
'<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>' +
|
||||
levelBandsHtml +
|
||||
limitHtml +
|
||||
'<path class="chart-area-fill" d="'+pathD+'"/>' +
|
||||
'<polyline class="chart-line" points="'+polylinePoints.trim()+'"/>' +
|
||||
dotsHtml +
|
||||
'</svg>';
|
||||
|
||||
document.getElementById('chartContainer').innerHTML = svg;
|
||||
}
|
||||
|
||||
/* 过敏等级颜色映射 */
|
||||
function getAllergyColor(val){
|
||||
if(val >= 4) return '#FF4D4F';
|
||||
if(val >= 3) return '#FA541C';
|
||||
if(val >= 2) return '#FAAD14';
|
||||
if(val >= 1) return '#13C2C2';
|
||||
return '#52C41A';
|
||||
}
|
||||
|
||||
/* 显示数据点 Tip */
|
||||
function showDotTip(e, el){
|
||||
var td = window._chartTooltipData;
|
||||
if(!td) return;
|
||||
var idx = parseInt(el.getAttribute('data-idx'));
|
||||
var dateStr = td.labels[idx] || '';
|
||||
var val = td.points[idx];
|
||||
var unit = td.unit || '';
|
||||
var color = td.key === 'allergy' ? getAllergyColor(val) : '#1890FF';
|
||||
var label = td.key === 'allergy' ? '过敏等级' : '数值';
|
||||
var displayVal = td.key === 'allergy' ? getAllergyLevelName(val) : val;
|
||||
document.getElementById('tooltipDate').textContent = dateStr;
|
||||
document.getElementById('tooltipBody').innerHTML = '<div class="chart-tooltip__row"><span class="chart-tooltip__dot" style="background:'+color+'"></span><span class="chart-tooltip__label">'+label+'</span><span class="chart-tooltip__val">'+displayVal + (unit && td.key !== 'allergy' ? ' ' + unit : '')+'</span></div>';
|
||||
var tip = document.getElementById('chartTooltip');
|
||||
tip.classList.add('show');
|
||||
var rect = el.getBoundingClientRect();
|
||||
var tipW = tip.offsetWidth, tipH = tip.offsetHeight;
|
||||
var left = rect.left - tipW/2 + rect.width/2;
|
||||
var top = rect.top - tipH - 12;
|
||||
if(left < 8) left = 8;
|
||||
if(left + tipW > window.innerWidth - 8) left = window.innerWidth - tipW - 8;
|
||||
tip.style.left = left + 'px';
|
||||
tip.style.top = top + 'px';
|
||||
}
|
||||
|
||||
/* 过敏等级名称映射 */
|
||||
function getAllergyLevelName(val){
|
||||
var names = ['很低','低','中等','高','很高'];
|
||||
return names[Math.min(val, names.length-1)] || '';
|
||||
}
|
||||
|
||||
function hideDotTip(){ document.getElementById('chartTooltip').classList.remove('show'); }
|
||||
|
||||
/* 柱状图 Tip - 显示当天所有等级占比 */
|
||||
function showBarTip(e, el){
|
||||
var td = window._chartTooltipData;
|
||||
if(!td) return;
|
||||
var idx = parseInt(el.getAttribute('data-idx'));
|
||||
var bd = td.barData[idx];
|
||||
if(!bd) return;
|
||||
var dateStr = td.labels[idx] || '';
|
||||
document.getElementById('tooltipDate').textContent = dateStr;
|
||||
var rows = '';
|
||||
var levels = [
|
||||
{name:'很低', color:'#52C41A', val:bd.vlow},
|
||||
{name:'低', color:'#13C2C2', val:bd.low},
|
||||
{name:'中等', color:'#FAAD14', val:bd.medium},
|
||||
{name:'高', color:'#FA541C', val:bd.high},
|
||||
{name:'很高', color:'#FF4D4F', val:bd.vhigh}
|
||||
];
|
||||
for(var i = 0; i < levels.length; i++){
|
||||
var lv = levels[i];
|
||||
var pct = Math.round(lv.val / 24 * 100);
|
||||
rows += '<div class="chart-tooltip__row">' +
|
||||
'<span class="chart-tooltip__dot" style="background:'+lv.color+'"></span>' +
|
||||
'<span class="chart-tooltip__label">'+lv.name+'</span>' +
|
||||
'<span class="chart-tooltip__val">'+pct+'%</span></div>';
|
||||
}
|
||||
document.getElementById('tooltipBody').innerHTML = rows;
|
||||
var tip = document.getElementById('chartTooltip');
|
||||
tip.classList.add('show');
|
||||
var rect = el.getBoundingClientRect();
|
||||
var tipW = tip.offsetWidth;
|
||||
var tipH = tip.offsetHeight;
|
||||
var left = rect.left - tipW / 2 + rect.width / 2;
|
||||
var top = rect.top - tipH - 12;
|
||||
if(left < 8) left = 8;
|
||||
if(left + tipW > window.innerWidth - 8) left = window.innerWidth - tipW - 8;
|
||||
tip.style.left = left + 'px';
|
||||
tip.style.top = top + 'px';
|
||||
}
|
||||
|
||||
/* 渲染过敏等级柱状堆积图 */
|
||||
function renderAllergyBarChart(key){
|
||||
var d = metricData[key];
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData || !timeData.barData) return;
|
||||
var barData = timeData.barData;
|
||||
var timeCfg = getTimeConfig(currentTimeRange);
|
||||
var barCount = barData.length;
|
||||
var chartLeft = 70, chartRight = 780, chartWidth = chartRight - chartLeft;
|
||||
var barGap = Math.max(4, Math.floor(chartWidth / (barCount * 8)));
|
||||
var barWidth = Math.max(8, Math.floor((chartWidth - barGap * (barCount + 1)) / barCount));
|
||||
var xPositions = [];
|
||||
for(var i = 0; i < barCount; i++){
|
||||
xPositions.push(chartLeft + barGap + i * (barWidth + barGap) + Math.floor(barWidth / 2));
|
||||
}
|
||||
var yTicks = [24,18,12,6,0];
|
||||
var gridLines = '';
|
||||
for(var i = 0; i < yTicks.length; i++){
|
||||
var y = 270 - (yTicks[i] / 24) * 250;
|
||||
gridLines += '<line x1="60" y1="'+y+'" x2="780" y2="'+y+'" class="chart-grid-line"/>';
|
||||
gridLines += '<text x="50" y="'+(y+4)+'" class="chart-axis-label" text-anchor="end">'+yTicks[i]+'h</text>';
|
||||
}
|
||||
var xLabelsHtml = '';
|
||||
var skip = barCount > 16 ? Math.floor(barCount / 10) : 1;
|
||||
for(var i = 0; i < timeCfg.labels.length; i++){
|
||||
if(i < xPositions.length && i % skip === 0){
|
||||
xLabelsHtml += '<text x="'+xPositions[i]+'" y="290" class="chart-axis-label" text-anchor="middle">'+timeCfg.labels[i]+'</text>';
|
||||
}
|
||||
}
|
||||
var barsHtml = '';
|
||||
for(var i = 0; i < barCount; i++){
|
||||
var bd = barData[i];
|
||||
var x = xPositions[i] - Math.floor(barWidth / 2);
|
||||
var segments = [
|
||||
{val:bd.vhigh, color:'#FF4D4F', name:'很高'},
|
||||
{val:bd.high, color:'#FA541C', name:'高'},
|
||||
{val:bd.medium,color:'#FAAD14', name:'中等'},
|
||||
{val:bd.low, color:'#13C2C2', name:'低'},
|
||||
{val:bd.vlow, color:'#52C41A', name:'很低'}
|
||||
];
|
||||
var yBase = 270;
|
||||
for(var j = 0; j < segments.length; j++){
|
||||
var seg = segments[j];
|
||||
if(seg.val > 0){
|
||||
var segH = (seg.val / 24) * 250;
|
||||
var segY = yBase - segH;
|
||||
barsHtml += '<rect x="'+x+'" y="'+segY+'" width="'+barWidth+'" height="'+segH+'" fill="'+seg.color+'" opacity="0.9" ' +
|
||||
'data-idx="'+i+'" data-level="'+seg.name+'" data-val="'+seg.val+'" ' +
|
||||
'onmouseenter="showBarTip(event,this)" onmouseleave="hideDotTip()"/>';
|
||||
yBase = segY;
|
||||
}
|
||||
}
|
||||
}
|
||||
var legendY = 305;
|
||||
var legendBottom = '<g transform="translate(60,'+legendY+')">';
|
||||
var lx2 = 0;
|
||||
for(var i = 0; i < allergyLevels.length; i++){
|
||||
var lv = allergyLevels[i];
|
||||
legendBottom += '<rect x="'+lx2+'" y="0" width="12" height="12" fill="'+lv.color+'" rx="2"/>';
|
||||
legendBottom += '<text x="'+(lx2+16)+'" y="10" fill="#666" font-size="11">'+lv.name+'</text>';
|
||||
lx2 += 72;
|
||||
}
|
||||
legendBottom += '</g>';
|
||||
|
||||
var svg = '<svg viewBox="0 0 800 330" preserveAspectRatio="xMidYMid meet">' +
|
||||
gridLines + xLabelsHtml +
|
||||
'<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>' +
|
||||
barsHtml + legendBottom +
|
||||
'</svg>';
|
||||
|
||||
document.getElementById('chartContainer').innerHTML = svg;
|
||||
window._chartTooltipData = {key:'allergyBar',barData:barData,labels:timeCfg.labels,xPositions:xPositions};
|
||||
}
|
||||
|
||||
function switchMetric(el, key){
|
||||
currentMetricKey = key;
|
||||
var btns = document.querySelectorAll('.metric-btn');
|
||||
btns.forEach(function(b){b.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
var d=metricData[key];
|
||||
document.getElementById('avgVal').textContent=d.avg;
|
||||
document.getElementById('minVal').textContent=d.min;
|
||||
document.getElementById('maxVal').textContent=d.max;
|
||||
var d = metricData[key];
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData) return;
|
||||
|
||||
// 过敏等级 模式下隐藏统计摘要
|
||||
var summaryEl = document.getElementById('chartSummary');
|
||||
summaryEl.style.display = key === 'allergy' ? 'none' : '';
|
||||
|
||||
document.getElementById('avgVal').textContent = timeData.avg || '';
|
||||
document.getElementById('minVal').textContent = timeData.min || '';
|
||||
document.getElementById('maxVal').textContent = timeData.max || '';
|
||||
|
||||
var limitEl = document.getElementById('limitSummary');
|
||||
if(d.limitLabel){
|
||||
limitEl.innerHTML = '<svg width="16" height="8" style="vertical-align:middle;"><line x1="0" y1="4" x2="16" y2="4" stroke="#FF4D4F" stroke-width="1.5" stroke-dasharray="3,2"/></svg>' +
|
||||
'<span class="chart-summary__label" style="margin-left:6px;">'+d.limitLabel+'</span>';
|
||||
limitEl.style.display = '';
|
||||
} else {
|
||||
limitEl.style.display = 'none';
|
||||
}
|
||||
|
||||
renderChart(key);
|
||||
}
|
||||
/* 页面加载时渲染默认图表 */
|
||||
(function(){switchMetric(document.querySelector('.metric-btn.active'),'allergy');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -90,8 +90,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -101,29 +100,29 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">设备分类</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">分类管理</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">设备分类</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">分类管理</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">设备分类</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">分类管理</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">设备分类</a><a href="pollen-data-monitor.html" class="sidebar-item active">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">分类管理</a><a href="pollen-data-monitor.html" class="sidebar-item active">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -102,8 +102,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -113,12 +112,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -126,10 +125,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -140,7 +139,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -151,7 +150,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item active">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item active">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -90,6 +90,33 @@
|
||||
.map-picker.selected .map-picker__icon,.map-picker.selected .map-picker__text{display:none;}
|
||||
.map-picker__hint{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:var(--font-xs);color:var(--text-placeholder);display:none;}
|
||||
.map-picker.selected .map-picker__hint{display:block;}
|
||||
.map-view{display:none;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;position:relative;}
|
||||
.map-view.active{display:block;}
|
||||
.map-view__canvas{width:100%;height:calc(100vh - 200px);background:#F0F5FF;position:relative;overflow:hidden;min-height:500px;}
|
||||
.map-view__canvas::before{content:'';position:absolute;inset:0;background:
|
||||
linear-gradient(90deg,rgba(24,144,255,0.06) 1px,transparent 1px) 0 0/40px 40px,
|
||||
linear-gradient(rgba(24,144,255,0.06) 1px,transparent 1px) 0 0/40px 40px;
|
||||
pointer-events:none;}
|
||||
.map-view__canvas .map-bg{position:absolute;inset:0;opacity:0.15;pointer-events:none;}
|
||||
.map-pin{position:absolute;cursor:pointer;transition:transform .2s;z-index:10;text-align:center;}
|
||||
.map-pin:hover{transform:scale(1.15);z-index:20;}
|
||||
.map-pin__icon{width:36px;height:44px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.15);}
|
||||
.map-pin__icon svg{transform:rotate(45deg);width:18px;height:18px;}
|
||||
.map-pin__icon{background:#1890FF;}
|
||||
.map-pin__label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;margin-top:4px;background:rgba(255,255,255,0.9);padding:2px 6px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,0.08);}
|
||||
.device-modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:300;align-items:center;justify-content:center;}
|
||||
.device-modal-mask.open{display:flex;}
|
||||
.device-modal{background:#fff;border-radius:var(--radius-lg);width:680px;max-height:80vh;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.15);}
|
||||
.device-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.device-modal__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);}
|
||||
.device-modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);font-size:18px;}
|
||||
.device-modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.device-modal__body{padding:24px;overflow-y:auto;max-height:calc(80vh - 140px);}
|
||||
.device-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -100,8 +127,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -111,12 +137,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -124,10 +150,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -138,7 +164,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -149,7 +175,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item active">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -169,13 +195,16 @@
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="openDrawer()">+ 新增设备</button>
|
||||
<button class="btn btn-success">批量入库导入</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-primary" id="toggleViewBtn" onclick="toggleView()">地图展示</button>
|
||||
<span id="actionButtons">
|
||||
<button class="btn btn-primary" onclick="openDrawer()">+ 新增设备</button>
|
||||
<button class="btn btn-success">批量入库导入</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 数据列表 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card" id="tableView">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>设备名称</th><th>设备编码</th><th>设备分类</th><th>所属单位</th><th>设备位置</th><th>布点日期</th><th>监测时长(天)</th><th>操作</th></tr></thead>
|
||||
@@ -197,6 +226,47 @@
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图展示视图 -->
|
||||
<div class="map-view" id="mapView">
|
||||
<div class="map-view__canvas" id="mapCanvas">
|
||||
<svg class="map-bg" viewBox="0 0 1200 600" fill="none" preserveAspectRatio="none">
|
||||
<path d="M50 400h120V280H50v120z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M50 280l60-40 60 40" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M220 450h180V300H220v150z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M220 300l90-60 90 60" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M450 380h150V250H450v130z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M450 250l75-50 75 50" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M650 420h200V320H650v100z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M650 320l100-70 100 70" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M900 360h160V220H900v140z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M900 220l80-50 80 50" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M1050 480h120V350h-120v130z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M0 500h1200" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
<path d="M300 0v600" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
<path d="M700 0v600" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
</svg>
|
||||
<div class="map-pin" style="top:18%;left:12%;" onclick="showDeviceDetail(0)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">采样器A1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:35%;left:30%;" onclick="showDeviceDetail(1)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">监测仪A2</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:55%;left:55%;" onclick="showDeviceDetail(2)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">计数仪B1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:25%;left:72%;" onclick="showDeviceDetail(3)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5v6h2V7h-2zm1 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1z"/></svg></div>
|
||||
<div class="map-pin__label">花粉站C1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:65%;left:85%;" onclick="showDeviceDetail(4)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">采样器D1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增设备 - 右侧抽屉弹窗 -->
|
||||
@@ -277,6 +347,75 @@ 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 openDrawer(){document.getElementById('drawerMask').classList.add('open');document.getElementById('drawer').classList.add('open');}
|
||||
function closeDrawer(){document.getElementById('drawerMask').classList.remove('open');document.getElementById('drawer').classList.remove('open');}
|
||||
var isMapView = false;
|
||||
function toggleView(){
|
||||
var tableView = document.getElementById('tableView');
|
||||
var mapView = document.getElementById('mapView');
|
||||
var btn = document.getElementById('toggleViewBtn');
|
||||
var actions = document.getElementById('actionButtons');
|
||||
if(isMapView){
|
||||
tableView.style.display = '';
|
||||
mapView.classList.remove('active');
|
||||
actions.style.display = '';
|
||||
btn.textContent = '地图展示';
|
||||
} else {
|
||||
tableView.style.display = 'none';
|
||||
mapView.classList.add('active');
|
||||
actions.style.display = 'none';
|
||||
btn.textContent = '列表展示';
|
||||
}
|
||||
isMapView = !isMapView;
|
||||
}
|
||||
var devices = [
|
||||
{name:'花粉采样器A1',code:'PL-2024-001',category:'花粉采样器',unit:'采油一厂',location:'厂区绿化带东',date:'2024-03-01',days:'434',status:'在线'},
|
||||
{name:'花粉浓度监测仪A2',code:'PL-2024-002',category:'花粉浓度监测仪',unit:'采油一厂',location:'职工宿舍区花园',date:'2024-03-15',days:'420',status:'在线'},
|
||||
{name:'花粉计数仪B1',code:'PL-2024-003',category:'花粉自动计数仪',unit:'采油二厂',location:'办公楼南侧绿地',date:'2024-04-10',days:'394',status:'在线'},
|
||||
{name:'综合花粉站C1',code:'PL-2024-004',category:'综合气象花粉站',unit:'采气厂',location:'厂区中心公园',date:'2024-05-20',days:'354',status:'离线'},
|
||||
{name:'花粉采样器D1',code:'PL-2025-001',category:'花粉采样器',unit:'炼化公司',location:'行政楼前广场',date:'2025-03-05',days:'65',status:'在线'},
|
||||
];
|
||||
function showDeviceDetail(idx){
|
||||
var d = devices[idx];
|
||||
if(!d) return;
|
||||
document.getElementById('deviceModalTitle').textContent = d.name + ' - 设备详情';
|
||||
document.getElementById('deviceName').textContent = d.name;
|
||||
document.getElementById('deviceCode').textContent = d.code;
|
||||
document.getElementById('deviceCategory').textContent = d.category;
|
||||
document.getElementById('deviceUnit').textContent = d.unit;
|
||||
document.getElementById('deviceLocation').textContent = d.location;
|
||||
document.getElementById('deviceDate').textContent = d.date;
|
||||
document.getElementById('deviceDays').textContent = d.days;
|
||||
document.getElementById('deviceStatus').textContent = d.status;
|
||||
document.getElementById('deviceModalMask').classList.add('open');
|
||||
}
|
||||
function hideDeviceDetail(){
|
||||
document.getElementById('deviceModalMask').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 设备详情弹窗 [交互] 点击地图上的设备标记点弹出此弹窗 -->
|
||||
<div class="device-modal-mask" id="deviceModalMask" onclick="hideDeviceDetail()">
|
||||
<div class="device-modal" onclick="event.stopPropagation()">
|
||||
<div class="device-modal__header">
|
||||
<span class="device-modal__title" id="deviceModalTitle">设备详情</span>
|
||||
<button class="device-modal__close" onclick="hideDeviceDetail()">×</button>
|
||||
</div>
|
||||
<div class="device-modal__body">
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><span class="info-item__label">设备名称</span><span class="info-item__value" id="deviceName">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备编码</span><span class="info-item__value" id="deviceCode">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备分类</span><span class="info-item__value" id="deviceCategory">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value" id="deviceUnit">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备位置</span><span class="info-item__value" id="deviceLocation">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备状态</span><span class="info-item__value" id="deviceStatus">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">布点日期</span><span class="info-item__value" id="deviceDate">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">监测时长(天)</span><span class="info-item__value" id="deviceDays">-</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-modal__footer">
|
||||
<button class="btn btn-default" onclick="hideDeviceDetail()">关闭</button>
|
||||
<button class="btn btn-primary" onclick="hideDeviceDetail();openDrawer()">编辑</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -78,8 +78,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -89,12 +88,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -102,10 +101,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -116,7 +115,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -127,7 +126,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item active">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -69,15 +69,16 @@
|
||||
<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="../health-checkup/survey-category.html">健康排查</a><a href="../wearable/tool-manage.html">穿戴监测</a><a href="../weight/scale-device.html">体重监测</a><a href="../environment/indoor-device-list.html" class="active">环境监测</a><a href="../exception-dirty.html">异常事件</a></nav>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a><a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a><a href="../exception-dirty.html">异常事件</a></nav>
|
||||
<div class="top-bar__right"><a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 返回首页</a><div class="avatar">管</div><span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span></div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div><div class="sidebar-subgroup__body"><a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">设备分类</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div><div class="sidebar-subgroup__body"><a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">设备分类</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div><div class="sidebar-subgroup__body"><a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">设备分类</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup open"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div><div class="sidebar-subgroup__body"><a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">设备分类</a><a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item active">历史数据</a></div></div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div><div class="sidebar-subgroup__body"><a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">分类管理</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div><div class="sidebar-subgroup__body"><a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">分类管理</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div><div class="sidebar-subgroup__body"><a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">分类管理</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup open"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div><div class="sidebar-subgroup__body"><a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">分类管理</a><a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item active">历史数据</a></div></div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-header">
|
||||
|
||||
@@ -63,15 +63,16 @@
|
||||
<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="../health-checkup/survey-category.html">健康排查</a><a href="../wearable/tool-manage.html">穿戴监测</a><a href="../weight/scale-device.html">体重监测</a><a href="../environment/indoor-device-list.html" class="active">环境监测</a><a href="../exception-dirty.html">异常事件</a></nav>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a><a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a><a href="../exception-dirty.html">异常事件</a></nav>
|
||||
<div class="top-bar__right"><a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 返回首页</a><div class="avatar">管</div><span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span></div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div><div class="sidebar-subgroup__body"><a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">设备分类</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div><div class="sidebar-subgroup__body"><a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">设备分类</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div><div class="sidebar-subgroup__body"><a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">设备分类</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup open"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div><div class="sidebar-subgroup__body"><a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">设备分类</a><a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item active">历史数据</a></div></div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div><div class="sidebar-subgroup__body"><a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">分类管理</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div><div class="sidebar-subgroup__body"><a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">分类管理</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div><div class="sidebar-subgroup__body"><a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">分类管理</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup open"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div><div class="sidebar-subgroup__body"><a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">分类管理</a><a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item active">历史数据</a></div></div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
|
||||
@@ -73,15 +73,16 @@
|
||||
<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="../health-checkup/survey-category.html">健康排查</a><a href="../wearable/tool-manage.html">穿戴监测</a><a href="../weight/scale-device.html">体重监测</a><a href="../environment/indoor-device-list.html" class="active">环境监测</a><a href="../exception-dirty.html">异常事件</a></nav>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a><a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a><a href="../exception-dirty.html">异常事件</a></nav>
|
||||
<div class="top-bar__right"><a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 返回首页</a><div class="avatar">管</div><span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span></div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div><div class="sidebar-subgroup__body"><a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">设备分类</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div><div class="sidebar-subgroup__body"><a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">设备分类</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div><div class="sidebar-subgroup__body"><a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">设备分类</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup open"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div><div class="sidebar-subgroup__body"><a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">设备分类</a><a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item active">历史数据</a></div></div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div><div class="sidebar-subgroup__body"><a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">分类管理</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div><div class="sidebar-subgroup__body"><a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">分类管理</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div><div class="sidebar-subgroup__body"><a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">分类管理</a><a href="water-data-monitor.html" class="sidebar-item">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a></div></div>
|
||||
<div class="sidebar-subgroup open"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div><div class="sidebar-subgroup__body"><a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">分类管理</a><a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item active">历史数据</a></div></div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-header">
|
||||
|
||||
@@ -87,8 +87,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -98,12 +97,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -111,10 +110,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -125,7 +124,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item active">应用记录</a>
|
||||
@@ -136,7 +135,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -18,7 +18,8 @@
|
||||
.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;}
|
||||
.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;}
|
||||
@@ -55,6 +56,7 @@
|
||||
.device-card__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;text-align:right;max-width:180px;}
|
||||
.wqi-tag{display:inline-block;padding:2px 10px;border-radius:10px;font-size:var(--font-xs);font-weight:500;}
|
||||
.wqi-tag--pass{background:#F6FFED;color:#52C41A;}
|
||||
.wqi-tag--fail{background:#FFF1F0;color:#FF4D4F;}
|
||||
.device-card__tip{margin-top:4px;padding:12px;background:#F6FFED;border-radius:var(--radius-sm);border:1px solid #B7EB8F;}
|
||||
.device-card__tip p{font-size:var(--font-xs);color:var(--text-secondary);line-height:1.6;margin:0;}
|
||||
.realtime-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
|
||||
@@ -85,6 +87,16 @@
|
||||
.chart-summary__dot{width:8px;height:8px;border-radius:50%;}
|
||||
.chart-summary__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.chart-summary__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:600;}
|
||||
.chart-limit-line{stroke:#FF4D4F;stroke-width:1.5;stroke-dasharray:6,3;opacity:.7;}
|
||||
.chart-limit-exceed{fill:#FF4D4F;opacity:.08;}
|
||||
.chart-limit-label{fill:#FF4D4F;font-size:10px;font-weight:500;}
|
||||
.chart-tooltip{display:none;position:fixed;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:10px 14px;z-index:400;pointer-events:none;font-size:var(--font-sm);min-width:140px;}
|
||||
.chart-tooltip.show{display:block;}
|
||||
.chart-tooltip__date{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #f0f0f0;}
|
||||
.chart-tooltip__row{display:flex;align-items:center;gap:6px;padding:2px 0;}
|
||||
.chart-tooltip__dot{display:inline-block;width:8px;height:8px;border-radius:2px;flex-shrink:0;}
|
||||
.chart-tooltip__label{color:var(--text-secondary);font-size:var(--font-xs);flex:1;}
|
||||
.chart-tooltip__val{font-size:var(--font-sm);color:var(--text-primary);font-weight:600;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -95,8 +107,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -106,28 +117,29 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">设备分类</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">分类管理</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">设备分类</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">分类管理</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">设备分类</a><a href="water-data-monitor.html" class="sidebar-item active">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">分类管理</a><a href="water-data-monitor.html" class="sidebar-item active">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">分类管理</a><a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -137,64 +149,30 @@
|
||||
<span class="page-header__title">动态分析</span>
|
||||
</div>
|
||||
<div class="analysis-layout">
|
||||
<!-- 左侧 - 设备信息 -->
|
||||
<div class="device-card">
|
||||
<div class="device-card__header">
|
||||
<div class="device-card__name">多参数水质分析仪-A01</div>
|
||||
<div class="device-card__code">WQ-2024-001</div>
|
||||
</div>
|
||||
<div class="device-card__body">
|
||||
<div class="device-card__item">
|
||||
<span class="device-card__label">所属单位</span>
|
||||
<span class="device-card__value">采油一厂</span>
|
||||
</div>
|
||||
<div class="device-card__item">
|
||||
<span class="device-card__label">设备位置</span>
|
||||
<span class="device-card__value">生活区供水站</span>
|
||||
</div>
|
||||
<div class="device-card__item">
|
||||
<span class="device-card__label">数据更新时间</span>
|
||||
<span class="device-card__value">2026-05-14 14:30</span>
|
||||
</div>
|
||||
<div class="device-card__item">
|
||||
<span class="device-card__label">水质等级</span>
|
||||
<span class="device-card__value"><span class="wqi-tag wqi-tag--pass">达标</span></span>
|
||||
</div>
|
||||
<div class="device-card__tip">
|
||||
<p>各项水质指标均在国家饮用水安全标准范围内，水质状况良好。</p>
|
||||
</div>
|
||||
<div class="device-card__item"><span class="device-card__label">所属单位</span><span class="device-card__value">采油一厂</span></div>
|
||||
<div class="device-card__item"><span class="device-card__label">设备位置</span><span class="device-card__value">生活区供水站</span></div>
|
||||
<div class="device-card__item"><span class="device-card__label">数据更新时间</span><span class="device-card__value">2026-05-14 14:30</span></div>
|
||||
<div class="device-card__item"><span class="device-card__label">水质等级</span><span class="device-card__value"><span class="wqi-tag wqi-tag--pass">达标</span></span></div>
|
||||
<div class="device-card__tip"><p>各项水质指标均在国家饮用水安全标准范围内，水质状况良好。</p></div>
|
||||
<div class="realtime-section">
|
||||
<div class="realtime-title">实时监测数据</div>
|
||||
<div class="realtime-grid">
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">18.5</div>
|
||||
<div class="realtime-item__label">温度(℃)</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">320</div>
|
||||
<div class="realtime-item__label">电导率(US/cm)</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">7.2</div>
|
||||
<div class="realtime-item__label">PH</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">180</div>
|
||||
<div class="realtime-item__label">盐度(mg/L)</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">3125</div>
|
||||
<div class="realtime-item__label">电阻率(Ω·m)</div>
|
||||
</div>
|
||||
<div class="realtime-item">
|
||||
<div class="realtime-item__value">160</div>
|
||||
<div class="realtime-item__label">TDS(mg/L)</div>
|
||||
</div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">18.5</div><div class="realtime-item__label">温度(℃)</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">320</div><div class="realtime-item__label">电导率(US/cm)</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">7.2</div><div class="realtime-item__label">PH</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">180</div><div class="realtime-item__label">盐度(mg/L)</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">3125</div><div class="realtime-item__label">电阻率(Ω·m)</div></div>
|
||||
<div class="realtime-item"><div class="realtime-item__value">160</div><div class="realtime-item__label">TDS(mg/L)</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧 - 趋势图 -->
|
||||
<div class="chart-panel">
|
||||
<div class="time-tabs">
|
||||
<div class="time-tab active" onclick="switchTimeTab(this)">近24小时</div>
|
||||
@@ -203,93 +181,445 @@
|
||||
<div class="time-tab" onclick="switchTimeTab(this)">近3个月</div>
|
||||
</div>
|
||||
<div class="metric-bar">
|
||||
<button class="metric-btn active" onclick="switchMetric(this,'temp')">温度</button>
|
||||
<button class="metric-btn active" onclick="switchMetric(this,'wqi')">水质等级</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'temp')">温度</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'cond')">电导率</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'ph')">PH</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'salt')">盐度</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'resist')">电阻率</button>
|
||||
<button class="metric-btn" onclick="switchMetric(this,'tds')">TDS</button>
|
||||
</div>
|
||||
<div class="chart-summary">
|
||||
<!-- 统计摘要 [交互] 水质等级 模式下隐藏 -->
|
||||
<div class="chart-summary" id="chartSummary">
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#1890FF;"></span><span class="chart-summary__label">平均值</span><span class="chart-summary__value" id="avgVal">18.2 ℃</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#52C41A;"></span><span class="chart-summary__label">最小值</span><span class="chart-summary__value" id="minVal">15.6 ℃</span></div>
|
||||
<div class="chart-summary__item"><span class="chart-summary__dot" style="background:#FF4D4F;"></span><span class="chart-summary__label">最大值</span><span class="chart-summary__value" id="maxVal">21.3 ℃</span></div>
|
||||
<div class="chart-summary__item" style="margin-left:auto;" id="limitSummary"></div>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="chart-container" id="chartContainer">
|
||||
<svg viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#1890FF" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#1890FF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<line x1="60" y1="20" x2="780" y2="20" class="chart-grid-line"/>
|
||||
<line x1="60" y1="80" x2="780" y2="80" class="chart-grid-line"/>
|
||||
<line x1="60" y1="140" x2="780" y2="140" class="chart-grid-line"/>
|
||||
<line x1="60" y1="200" x2="780" y2="200" class="chart-grid-line"/>
|
||||
<line x1="60" y1="260" x2="780" y2="260" class="chart-grid-line"/>
|
||||
<text x="50" y="24" class="chart-axis-label" text-anchor="end">22</text>
|
||||
<text x="50" y="84" class="chart-axis-label" text-anchor="end">20</text>
|
||||
<text x="50" y="144" class="chart-axis-label" text-anchor="end">18</text>
|
||||
<text x="50" y="204" class="chart-axis-label" text-anchor="end">16</text>
|
||||
<text x="50" y="264" class="chart-axis-label" text-anchor="end">14</text>
|
||||
<text x="90" y="290" class="chart-axis-label" text-anchor="middle">00:00</text>
|
||||
<text x="180" y="290" class="chart-axis-label" text-anchor="middle">04:00</text>
|
||||
<text x="270" y="290" class="chart-axis-label" text-anchor="middle">06:00</text>
|
||||
<text x="360" y="290" class="chart-axis-label" text-anchor="middle">08:00</text>
|
||||
<text x="450" y="290" class="chart-axis-label" text-anchor="middle">10:00</text>
|
||||
<text x="540" y="290" class="chart-axis-label" text-anchor="middle">12:00</text>
|
||||
<text x="630" y="290" class="chart-axis-label" text-anchor="middle">14:00</text>
|
||||
<text x="720" y="290" class="chart-axis-label" text-anchor="middle">16:00</text>
|
||||
<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>
|
||||
<path class="chart-area-fill" d="M90,200 L150,210 L210,220 L270,200 L330,180 L390,160 L450,140 L510,130 L570,120 L630,130 L690,140 L750,150 L750,270 L90,270 Z"/>
|
||||
<polyline class="chart-line" points="90,200 150,210 210,220 270,200 330,180 390,160 450,140 510,130 570,120 630,130 690,140 750,150"/>
|
||||
<circle cx="90" cy="200" r="4" class="chart-dot"/>
|
||||
<circle cx="150" cy="210" r="4" class="chart-dot"/>
|
||||
<circle cx="210" cy="220" r="4" class="chart-dot"/>
|
||||
<circle cx="270" cy="200" r="4" class="chart-dot"/>
|
||||
<circle cx="330" cy="180" r="4" class="chart-dot"/>
|
||||
<circle cx="390" cy="160" r="4" class="chart-dot"/>
|
||||
<circle cx="450" cy="140" r="4" class="chart-dot"/>
|
||||
<circle cx="510" cy="130" r="4" class="chart-dot"/>
|
||||
<circle cx="570" cy="120" r="4" class="chart-dot"/>
|
||||
<circle cx="630" cy="130" r="4" class="chart-dot"/>
|
||||
<circle cx="690" cy="140" r="4" class="chart-dot"/>
|
||||
<circle cx="750" cy="150" r="4" class="chart-dot"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="chart-container" id="chartContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 数据点 Tip 弹窗 -->
|
||||
<div class="chart-tooltip" id="chartTooltip">
|
||||
<div class="chart-tooltip__date" id="tooltipDate"></div>
|
||||
<div id="tooltipBody"></div>
|
||||
</div>
|
||||
|
||||
<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');})();
|
||||
|
||||
/* 时间范围 Tab 切换 */
|
||||
var currentTimeRange = '近24小时';
|
||||
function switchTimeTab(el){
|
||||
var tabs=document.querySelectorAll('.time-tab');
|
||||
var tabs = document.querySelectorAll('.time-tab');
|
||||
tabs.forEach(function(t){t.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
currentTimeRange = el.textContent;
|
||||
var activeBtn = document.querySelector('.metric-btn.active');
|
||||
if(activeBtn && currentMetricKey){
|
||||
switchMetric(activeBtn, currentMetricKey);
|
||||
}
|
||||
}
|
||||
|
||||
var metricData={
|
||||
temp: {avg:'18.2 ℃', min:'15.6 ℃', max:'21.3 ℃'},
|
||||
cond: {avg:'335 US/cm', min:'280 US/cm', max:'420 US/cm'},
|
||||
ph: {avg:'7.1', min:'6.8', max:'7.5'},
|
||||
salt: {avg:'185 mg/L', min:'150 mg/L', max:'230 mg/L'},
|
||||
resist: {avg:'2985 Ω·m', min:'2380 Ω·m', max:'3570 Ω·m'},
|
||||
tds: {avg:'168 mg/L', min:'140 mg/L', max:'210 mg/L'}
|
||||
/* 水质等级颜色配置 */
|
||||
var wqiLevels = [
|
||||
{name:'达标', color:'#52C41A'},
|
||||
{name:'未达标', color:'#FF4D4F'}
|
||||
];
|
||||
|
||||
/* 监测类型切换 */
|
||||
var currentMetricKey = 'wqi';
|
||||
var metricData = {
|
||||
wqi: {avg:'达标', min:'达标', max:'未达标', unit:'',
|
||||
yMax:2, yTicks:[2,1,0],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
isWQI:true,
|
||||
levelBands:[
|
||||
{yMin:20,yMax:145,label:'未达标',color:'#FF4D4F',opacity:.08},
|
||||
{yMin:145,yMax:270,label:'达标',color:'#52C41A',opacity:.08}
|
||||
],
|
||||
data:{
|
||||
'近24小时':{avg:'达标',min:'达标',max:'未达标',points:[1,1,1,1,1,1,1,1,1,0,0,1]},
|
||||
'近7日':{barData:[
|
||||
{pass:22,fail:2},
|
||||
{pass:20,fail:4},
|
||||
{pass:18,fail:6},
|
||||
{pass:17,fail:7},
|
||||
{pass:19,fail:5},
|
||||
{pass:21,fail:3},
|
||||
{pass:23,fail:1}
|
||||
]},
|
||||
'近30日':{barData:[
|
||||
{pass:22,fail:2},{pass:20,fail:4},{pass:18,fail:6},{pass:19,fail:5},{pass:23,fail:1},{pass:21,fail:3},{pass:17,fail:7},{pass:16,fail:8},{pass:19,fail:5},{pass:22,fail:2},{pass:18,fail:6},{pass:20,fail:4},{pass:23,fail:1},{pass:17,fail:7},{pass:21,fail:3},{pass:24,fail:0},{pass:15,fail:9},{pass:20,fail:4},{pass:22,fail:2},{pass:18,fail:6},{pass:21,fail:3},{pass:19,fail:5},{pass:17,fail:7},{pass:23,fail:1},{pass:20,fail:4},{pass:22,fail:2},{pass:18,fail:6},{pass:24,fail:0},{pass:19,fail:5},{pass:21,fail:3}
|
||||
]}
|
||||
}},
|
||||
temp: {avg:'18.2 ℃', min:'15.6 ℃', max:'21.3 ℃', unit:'℃',
|
||||
yMax:22, yTicks:[22,20,18,16,14],
|
||||
limitUpper:30, limitLower:5, limitLabel:'上限 30.0 / 下限 5.0',
|
||||
data:{
|
||||
'近24小时':{avg:'18.2 ℃',min:'15.6 ℃',max:'21.3 ℃',points:[15.6,16.0,16.5,17.0,17.5,18.0,18.5,19.0,19.5,20.0,20.5,21.3]},
|
||||
'近7日':{avg:'18.5 ℃',min:'15.0 ℃',max:'22.0 ℃',points:[16.0,16.8,17.5,18.2,19.0,20.0,21.0]},
|
||||
'近30日':{avg:'17.8 ℃',min:'14.5 ℃',max:'23.5 ℃',points:[15.0,15.5,16.0,16.5,17.0,17.5,18.0,18.5,19.0,19.5,20.0,20.5,21.0,21.5,22.0,22.5,23.0,23.5,22.0,20.5,19.0,18.0,17.0,16.5,16.0,15.5,15.0,14.8,14.5,15.0]}
|
||||
}},
|
||||
cond: {avg:'335 US/cm', min:'280 US/cm', max:'420 US/cm', unit:'US/cm',
|
||||
yMax:450, yTicks:[450,400,350,300,250],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'335 US/cm',min:'280 US/cm',max:'420 US/cm',points:[280,290,300,310,320,330,340,350,360,380,400,420]},
|
||||
'近7日':{avg:'340 US/cm',min:'290 US/cm',max:'430 US/cm',points:[300,310,320,340,350,370,390]},
|
||||
'近30日':{avg:'330 US/cm',min:'270 US/cm',max:'450 US/cm',points:[290,300,310,320,330,340,350,360,370,380,390,400,410,420,430,440,450,420,390,360,340,320,310,300,290,280,275,270,280,290]}
|
||||
}},
|
||||
ph: {avg:'7.1', min:'6.8', max:'7.5', unit:'',
|
||||
yMax:8, yTicks:[8,7.8,7.5,7.2,7.0],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'7.1',min:'6.8',max:'7.5',points:[6.8,6.85,6.9,6.95,7.0,7.05,7.1,7.15,7.2,7.3,7.4,7.5]},
|
||||
'近7日':{avg:'7.1',min:'6.8',max:'7.6',points:[6.9,6.95,7.0,7.05,7.1,7.15,7.2]},
|
||||
'近30日':{avg:'7.1',min:'6.7',max:'7.7',points:[6.85,6.88,6.9,6.92,6.95,6.98,7.0,7.02,7.05,7.08,7.1,7.12,7.15,7.18,7.2,7.22,7.25,7.28,7.3,7.32,7.35,7.38,7.4,7.42,7.45,7.48,7.5,7.52,7.55,7.58]}
|
||||
}},
|
||||
salt: {avg:'185 mg/L', min:'150 mg/L', max:'230 mg/L', unit:'mg/L',
|
||||
yMax:250, yTicks:[250,225,200,175,150],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'185 mg/L',min:'150 mg/L',max:'230 mg/L',points:[150,155,160,170,175,180,185,190,200,210,220,230]},
|
||||
'近7日':{avg:'188 mg/L',min:'155 mg/L',max:'240 mg/L',points:[160,168,175,182,190,200,210]},
|
||||
'近30日':{avg:'182 mg/L',min:'145 mg/L',max:'250 mg/L',points:[155,160,165,170,175,180,185,190,195,200,205,210,215,220,225,230,235,240,245,250,230,210,195,185,175,168,160,155,150,145]}
|
||||
}},
|
||||
resist: {avg:'2985 Ω·m', min:'2380 Ω·m', max:'3570 Ω·m', unit:'Ω·m',
|
||||
yMax:3800, yTicks:[3800,3500,3200,2900,2600],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'2985 Ω·m',min:'2380 Ω·m',max:'3570 Ω·m',points:[2380,2450,2520,2600,2680,2750,2820,2900,2980,3100,3250,3570]},
|
||||
'近7日':{avg:'2950 Ω·m',min:'2400 Ω·m',max:'3600 Ω·m',points:[2500,2600,2700,2800,2900,3000,3100]},
|
||||
'近30日':{avg:'2900 Ω·m',min:'2350 Ω·m',max:'3700 Ω·m',points:[2450,2500,2550,2600,2650,2700,2750,2800,2850,2900,2950,3000,3050,3100,3150,3200,3250,3300,3350,3400,3450,3500,3550,3600,3650,3700,3500,3300,3100,2900]}
|
||||
}},
|
||||
tds: {avg:'168 mg/L', min:'140 mg/L', max:'210 mg/L', unit:'mg/L',
|
||||
yMax:230, yTicks:[230,210,190,170,150],
|
||||
limitUpper:null, limitLower:null, limitLabel:null,
|
||||
data:{
|
||||
'近24小时':{avg:'168 mg/L',min:'140 mg/L',max:'210 mg/L',points:[140,143,146,150,154,158,162,166,170,180,190,210]},
|
||||
'近7日':{avg:'170 mg/L',min:'145 mg/L',max:'215 mg/L',points:[148,152,158,165,172,180,190]},
|
||||
'近30日':{avg:'165 mg/L',min:'138 mg/L',max:'220 mg/L',points:[142,145,148,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,218,220,205,180]}
|
||||
}}
|
||||
};
|
||||
function switchMetric(el,key){
|
||||
var btns=document.querySelectorAll('.metric-btn');
|
||||
|
||||
function getTimeConfig(timeRange){
|
||||
if(timeRange === '近7日'){
|
||||
var labels = [];
|
||||
var now = new Date(2026,5,3);
|
||||
for(var i=6;i>=0;i--){
|
||||
var d = new Date(now);
|
||||
d.setDate(d.getDate() - i);
|
||||
labels.push((d.getMonth()+1)+'/'+d.getDate());
|
||||
}
|
||||
return {labels:labels,count:7};
|
||||
} else if(timeRange === '近30日'){
|
||||
var labels = [];
|
||||
var now = new Date(2026,5,3);
|
||||
for(var i=29;i>=0;i--){
|
||||
var d = new Date(now);
|
||||
d.setDate(d.getDate() - i);
|
||||
labels.push((d.getMonth()+1)+'/'+d.getDate());
|
||||
}
|
||||
return {labels:labels,count:30};
|
||||
}
|
||||
return {
|
||||
labels:['00:00','02:00','04:00','06:00','08:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'],
|
||||
count:12
|
||||
};
|
||||
}
|
||||
|
||||
function calcXPositions(count){
|
||||
var positions = [];
|
||||
var step = 690 / (count - 1);
|
||||
for(var i=0;i<count;i++){
|
||||
positions.push(90 + Math.round(i * step));
|
||||
}
|
||||
return positions;
|
||||
}
|
||||
|
||||
function valToY(val, yMax){
|
||||
return 270 - (val / yMax) * 250;
|
||||
}
|
||||
|
||||
function renderChart(key){
|
||||
// 水质等级 非24小时使用柱状堆积图
|
||||
if(key === 'wqi' && currentTimeRange !== '近24小时'){
|
||||
renderWQIBarChart(key);
|
||||
return;
|
||||
}
|
||||
var d = metricData[key];
|
||||
if(!d) return;
|
||||
var timeCfg = getTimeConfig(currentTimeRange);
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData) return;
|
||||
var points = timeData.points;
|
||||
var xPositions = calcXPositions(points.length);
|
||||
var yMax = d.yMax;
|
||||
var yTicks = d.yTicks;
|
||||
|
||||
// 网格线
|
||||
var gridLines = '';
|
||||
for(var i = 0; i < yTicks.length; i++){
|
||||
var y = valToY(yTicks[i], yMax);
|
||||
gridLines += '<line x1="60" y1="'+y+'" x2="780" y2="'+y+'" class="chart-grid-line"/>';
|
||||
gridLines += '<text x="50" y="'+(y+4)+'" class="chart-axis-label" text-anchor="end">'+yTicks[i]+'</text>';
|
||||
}
|
||||
|
||||
// X 轴标签
|
||||
var xLabelsHtml = '';
|
||||
var skip = points.length > 16 ? Math.floor(points.length / 10) : 1;
|
||||
for(var i = 0; i < timeCfg.labels.length; i++){
|
||||
if(i < xPositions.length && i % skip === 0){
|
||||
xLabelsHtml += '<text x="'+xPositions[i]+'" y="290" class="chart-axis-label" text-anchor="middle">'+timeCfg.labels[i]+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 水质等级背景
|
||||
var levelBandsHtml = '';
|
||||
if(d.isWQI && d.levelBands){
|
||||
for(var i = 0; i < d.levelBands.length; i++){
|
||||
var b = d.levelBands[i];
|
||||
levelBandsHtml += '<rect x="60" y="'+b.yMin+'" width="720" height="'+(b.yMax-b.yMin)+'" fill="'+b.color+'" opacity="'+b.opacity+'"/>';
|
||||
levelBandsHtml += '<text x="68" y="'+(b.yMin + (b.yMax-b.yMin)/2 + 4)+'" fill="'+b.color+'" font-size="10" font-weight="500">'+b.label+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 超标区域和虚线
|
||||
var limitHtml = '';
|
||||
if(d.limitUpper){
|
||||
var upperY = valToY(d.limitUpper, yMax);
|
||||
var lowerY = valToY(d.limitLower, yMax);
|
||||
if(upperY > 20){
|
||||
limitHtml += '<rect x="60" y="20" width="720" height="'+(upperY-20)+'" class="chart-limit-exceed"/>';
|
||||
}
|
||||
if(lowerY < 270){
|
||||
limitHtml += '<rect x="60" y="'+lowerY+'" width="720" height="'+(270-lowerY)+'" class="chart-limit-exceed"/>';
|
||||
}
|
||||
limitHtml += '<line x1="60" y1="'+upperY+'" x2="780" y2="'+upperY+'" class="chart-limit-line"/>';
|
||||
limitHtml += '<line x1="60" y1="'+lowerY+'" x2="780" y2="'+lowerY+'" class="chart-limit-line"/>';
|
||||
if(d.limitLabelUpper){
|
||||
limitHtml += '<text x="74" y="'+(upperY-4)+'" class="chart-limit-label">'+d.limitLabelUpper+'</text>';
|
||||
limitHtml += '<text x="74" y="'+(lowerY+14)+'" class="chart-limit-label">'+d.limitLabelLower+'</text>';
|
||||
} else {
|
||||
limitHtml += '<text x="74" y="'+(upperY-4)+'" class="chart-limit-label">上限 '+d.limitUpper+'</text>';
|
||||
limitHtml += '<text x="74" y="'+(lowerY+14)+'" class="chart-limit-label">下限 '+d.limitLower+'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// 折线
|
||||
var pathD = '';
|
||||
var polylinePoints = '';
|
||||
var dotsHtml = '';
|
||||
var dotR = points.length > 20 ? 3 : 4;
|
||||
window._chartTooltipData = {key:key,points:points,labels:timeCfg.labels,unit:d.unit,yMax:yMax,xPositions:xPositions};
|
||||
for(var i = 0; i < points.length; i++){
|
||||
var y = valToY(points[i], yMax);
|
||||
var x = xPositions[i];
|
||||
pathD += (i===0?'M':'L') + x + ',' + y + ' ';
|
||||
polylinePoints += x + ',' + y + ' ';
|
||||
var dotColor = d.isWQI ? getWqiColor(points[i]) : '#1890FF';
|
||||
dotsHtml += '<circle cx="'+x+'" cy="'+y+'" r="'+dotR+'" class="chart-dot" style="fill:'+dotColor+';cursor:pointer;" ' +
|
||||
'data-idx="'+i+'" onmouseenter="showDotTip(event,this)" onmouseleave="hideDotTip()"/>';
|
||||
}
|
||||
pathD += 'L'+xPositions[points.length-1]+',270 L'+xPositions[0]+',270 Z';
|
||||
|
||||
var svg = '<svg viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet">' +
|
||||
'<defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">' +
|
||||
'<stop offset="0%" stop-color="#1890FF" stop-opacity="0.3"/>' +
|
||||
'<stop offset="100%" stop-color="#1890FF" stop-opacity="0"/>' +
|
||||
'</linearGradient></defs>' +
|
||||
gridLines +
|
||||
xLabelsHtml +
|
||||
'<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>' +
|
||||
levelBandsHtml +
|
||||
limitHtml +
|
||||
'<path class="chart-area-fill" d="'+pathD+'"/>' +
|
||||
'<polyline class="chart-line" points="'+polylinePoints.trim()+'"/>' +
|
||||
dotsHtml +
|
||||
'</svg>';
|
||||
|
||||
document.getElementById('chartContainer').innerHTML = svg;
|
||||
}
|
||||
|
||||
/* 水质等级颜色映射 */
|
||||
function getWqiColor(val){
|
||||
return val === 0 ? '#FF4D4F' : '#52C41A';
|
||||
}
|
||||
|
||||
function showDotTip(e, el){
|
||||
var td = window._chartTooltipData;
|
||||
if(!td) return;
|
||||
var idx = parseInt(el.getAttribute('data-idx'));
|
||||
var dateStr = td.labels[idx] || '';
|
||||
var val = td.points[idx];
|
||||
var unit = td.unit || '';
|
||||
var color = td.key === 'wqi' ? getWqiColor(val) : '#1890FF';
|
||||
var label = td.key === 'wqi' ? '水质等级' : '数值';
|
||||
var displayVal = td.key === 'wqi' ? getWqiLevelName(val) : val;
|
||||
document.getElementById('tooltipDate').textContent = dateStr;
|
||||
document.getElementById('tooltipBody').innerHTML = '<div class="chart-tooltip__row"><span class="chart-tooltip__dot" style="background:'+color+'"></span><span class="chart-tooltip__label">'+label+'</span><span class="chart-tooltip__val">'+displayVal + (unit && td.key !== 'wqi' ? ' ' + unit : '')+'</span></div>';
|
||||
var tip = document.getElementById('chartTooltip');
|
||||
tip.classList.add('show');
|
||||
var rect = el.getBoundingClientRect();
|
||||
var tipW = tip.offsetWidth, tipH = tip.offsetHeight;
|
||||
var left = rect.left - tipW/2 + rect.width/2;
|
||||
var top = rect.top - tipH - 12;
|
||||
if(left < 8) left = 8;
|
||||
if(left + tipW > window.innerWidth - 8) left = window.innerWidth - tipW - 8;
|
||||
tip.style.left = left + 'px';
|
||||
tip.style.top = top + 'px';
|
||||
}
|
||||
|
||||
/* 水质等级名称映射 */
|
||||
function getWqiLevelName(val){
|
||||
return val === 0 ? '未达标' : '达标';
|
||||
}
|
||||
|
||||
function hideDotTip(){ document.getElementById('chartTooltip').classList.remove('show'); }
|
||||
|
||||
/* 柱状图 Tip - 显示当天所有等级占比 */
|
||||
function showBarTip(e, el){
|
||||
var td = window._chartTooltipData;
|
||||
if(!td) return;
|
||||
var idx = parseInt(el.getAttribute('data-idx'));
|
||||
var bd = td.barData[idx];
|
||||
if(!bd) return;
|
||||
var dateStr = td.labels[idx] || '';
|
||||
document.getElementById('tooltipDate').textContent = dateStr;
|
||||
var rows = '';
|
||||
var levels = [
|
||||
{name:'达标', color:'#52C41A', val:bd.pass},
|
||||
{name:'未达标', color:'#FF4D4F', val:bd.fail}
|
||||
];
|
||||
for(var i = 0; i < levels.length; i++){
|
||||
var lv = levels[i];
|
||||
var pct = Math.round(lv.val / 24 * 100);
|
||||
rows += '<div class="chart-tooltip__row">' +
|
||||
'<span class="chart-tooltip__dot" style="background:'+lv.color+'"></span>' +
|
||||
'<span class="chart-tooltip__label">'+lv.name+'</span>' +
|
||||
'<span class="chart-tooltip__val">'+pct+'%</span></div>';
|
||||
}
|
||||
document.getElementById('tooltipBody').innerHTML = rows;
|
||||
var tip = document.getElementById('chartTooltip');
|
||||
tip.classList.add('show');
|
||||
var rect = el.getBoundingClientRect();
|
||||
var tipW = tip.offsetWidth;
|
||||
var tipH = tip.offsetHeight;
|
||||
var left = rect.left - tipW / 2 + rect.width / 2;
|
||||
var top = rect.top - tipH - 12;
|
||||
if(left < 8) left = 8;
|
||||
if(left + tipW > window.innerWidth - 8) left = window.innerWidth - tipW - 8;
|
||||
tip.style.left = left + 'px';
|
||||
tip.style.top = top + 'px';
|
||||
}
|
||||
|
||||
/* 渲染水质等级柱状堆积图 */
|
||||
function renderWQIBarChart(key){
|
||||
var d = metricData[key];
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData || !timeData.barData) return;
|
||||
var barData = timeData.barData;
|
||||
var timeCfg = getTimeConfig(currentTimeRange);
|
||||
var barCount = barData.length;
|
||||
var chartLeft = 70, chartRight = 780, chartWidth = chartRight - chartLeft;
|
||||
var barGap = Math.max(4, Math.floor(chartWidth / (barCount * 8)));
|
||||
var barWidth = Math.max(8, Math.floor((chartWidth - barGap * (barCount + 1)) / barCount));
|
||||
var xPositions = [];
|
||||
for(var i = 0; i < barCount; i++){
|
||||
xPositions.push(chartLeft + barGap + i * (barWidth + barGap) + Math.floor(barWidth / 2));
|
||||
}
|
||||
var yTicks = [24,18,12,6,0];
|
||||
var gridLines = '';
|
||||
for(var i = 0; i < yTicks.length; i++){
|
||||
var y = 270 - (yTicks[i] / 24) * 250;
|
||||
gridLines += '<line x1="60" y1="'+y+'" x2="780" y2="'+y+'" class="chart-grid-line"/>';
|
||||
gridLines += '<text x="50" y="'+(y+4)+'" class="chart-axis-label" text-anchor="end">'+yTicks[i]+'h</text>';
|
||||
}
|
||||
var xLabelsHtml = '';
|
||||
var skip = barCount > 16 ? Math.floor(barCount / 10) : 1;
|
||||
for(var i = 0; i < timeCfg.labels.length; i++){
|
||||
if(i < xPositions.length && i % skip === 0){
|
||||
xLabelsHtml += '<text x="'+xPositions[i]+'" y="290" class="chart-axis-label" text-anchor="middle">'+timeCfg.labels[i]+'</text>';
|
||||
}
|
||||
}
|
||||
var barsHtml = '';
|
||||
for(var i = 0; i < barCount; i++){
|
||||
var bd = barData[i];
|
||||
var x = xPositions[i] - Math.floor(barWidth / 2);
|
||||
var segments = [
|
||||
{val:bd.fail, color:'#FF4D4F', name:'未达标'},
|
||||
{val:bd.pass, color:'#52C41A', name:'达标'}
|
||||
];
|
||||
var yBase = 270;
|
||||
for(var j = 0; j < segments.length; j++){
|
||||
var seg = segments[j];
|
||||
if(seg.val > 0){
|
||||
var segH = (seg.val / 24) * 250;
|
||||
var segY = yBase - segH;
|
||||
barsHtml += '<rect x="'+x+'" y="'+segY+'" width="'+barWidth+'" height="'+segH+'" fill="'+seg.color+'" opacity="0.9" ' +
|
||||
'data-idx="'+i+'" data-level="'+seg.name+'" data-val="'+seg.val+'" ' +
|
||||
'onmouseenter="showBarTip(event,this)" onmouseleave="hideDotTip()"/>';
|
||||
yBase = segY;
|
||||
}
|
||||
}
|
||||
}
|
||||
var legendY = 305;
|
||||
var legendBottom = '<g transform="translate(60,'+legendY+')">';
|
||||
var lx2 = 0;
|
||||
for(var i = 0; i < wqiLevels.length; i++){
|
||||
var lv = wqiLevels[i];
|
||||
legendBottom += '<rect x="'+lx2+'" y="0" width="12" height="12" fill="'+lv.color+'" rx="2"/>';
|
||||
legendBottom += '<text x="'+(lx2+16)+'" y="10" fill="#666" font-size="11">'+lv.name+'</text>';
|
||||
lx2 += 72;
|
||||
}
|
||||
legendBottom += '</g>';
|
||||
|
||||
var svg = '<svg viewBox="0 0 800 330" preserveAspectRatio="xMidYMid meet">' +
|
||||
gridLines + xLabelsHtml +
|
||||
'<line x1="60" y1="270" x2="780" y2="270" stroke="#d9d9d9" stroke-width="1"/>' +
|
||||
barsHtml + legendBottom +
|
||||
'</svg>';
|
||||
|
||||
document.getElementById('chartContainer').innerHTML = svg;
|
||||
window._chartTooltipData = {key:'wqiBar',barData:barData,labels:timeCfg.labels,xPositions:xPositions};
|
||||
}
|
||||
|
||||
function switchMetric(el, key){
|
||||
currentMetricKey = key;
|
||||
var btns = document.querySelectorAll('.metric-btn');
|
||||
btns.forEach(function(b){b.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
var d=metricData[key];
|
||||
document.getElementById('avgVal').textContent=d.avg;
|
||||
document.getElementById('minVal').textContent=d.min;
|
||||
document.getElementById('maxVal').textContent=d.max;
|
||||
var d = metricData[key];
|
||||
var timeData = d.data[currentTimeRange];
|
||||
if(!timeData) return;
|
||||
|
||||
// 水质等级 模式下隐藏统计摘要
|
||||
var summaryEl = document.getElementById('chartSummary');
|
||||
summaryEl.style.display = key === 'wqi' ? 'none' : '';
|
||||
|
||||
document.getElementById('avgVal').textContent = timeData.avg || '';
|
||||
document.getElementById('minVal').textContent = timeData.min || '';
|
||||
document.getElementById('maxVal').textContent = timeData.max || '';
|
||||
|
||||
var limitEl = document.getElementById('limitSummary');
|
||||
if(d.limitLabel){
|
||||
limitEl.innerHTML = '<svg width="16" height="8" style="vertical-align:middle;"><line x1="0" y1="4" x2="16" y2="4" stroke="#FF4D4F" stroke-width="1.5" stroke-dasharray="3,2"/></svg>' +
|
||||
'<span class="chart-summary__label" style="margin-left:6px;">'+d.limitLabel+'</span>';
|
||||
limitEl.style.display = '';
|
||||
} else {
|
||||
limitEl.style.display = 'none';
|
||||
}
|
||||
|
||||
renderChart(key);
|
||||
}
|
||||
/* 页面加载时渲染默认图表 */
|
||||
(function(){switchMetric(document.querySelector('.metric-btn.active'),'wqi');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -87,8 +87,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -98,28 +97,29 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">设备分类</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a><a href="indoor-device-category.html" class="sidebar-item">分类管理</a><a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="indoor-app-record.html" class="sidebar-item">应用记录</a><a href="indoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">设备分类</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a><a href="outdoor-device-category.html" class="sidebar-item">分类管理</a><a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a><a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a><a href="outdoor-app-record.html" class="sidebar-item">应用记录</a><a href="outdoor-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">设备分类</a><a href="water-data-monitor.html" class="sidebar-item active">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a><a href="water-device-category.html" class="sidebar-item">分类管理</a><a href="water-data-monitor.html" class="sidebar-item active">数据监测</a><a href="water-exception-alarm.html" class="sidebar-item">异常报警</a><a href="water-app-record.html" class="sidebar-item">应用记录</a><a href="water-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a><a href="pollen-device-category.html" class="sidebar-item">分类管理</a><a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a><a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a><a href="pollen-app-record.html" class="sidebar-item">应用记录</a><a href="pollen-history-data.html" class="sidebar-item">历史数据</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -102,8 +102,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -113,12 +112,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -126,10 +125,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -140,7 +139,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item active">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item active">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -151,7 +150,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -90,6 +90,33 @@
|
||||
.map-picker.selected .map-picker__icon,.map-picker.selected .map-picker__text{display:none;}
|
||||
.map-picker__hint{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:var(--font-xs);color:var(--text-placeholder);display:none;}
|
||||
.map-picker.selected .map-picker__hint{display:block;}
|
||||
.map-view{display:none;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;position:relative;}
|
||||
.map-view.active{display:block;}
|
||||
.map-view__canvas{width:100%;height:calc(100vh - 200px);background:#F0F5FF;position:relative;overflow:hidden;min-height:500px;}
|
||||
.map-view__canvas::before{content:'';position:absolute;inset:0;background:
|
||||
linear-gradient(90deg,rgba(24,144,255,0.06) 1px,transparent 1px) 0 0/40px 40px,
|
||||
linear-gradient(rgba(24,144,255,0.06) 1px,transparent 1px) 0 0/40px 40px;
|
||||
pointer-events:none;}
|
||||
.map-view__canvas .map-bg{position:absolute;inset:0;opacity:0.15;pointer-events:none;}
|
||||
.map-pin{position:absolute;cursor:pointer;transition:transform .2s;z-index:10;text-align:center;}
|
||||
.map-pin:hover{transform:scale(1.15);z-index:20;}
|
||||
.map-pin__icon{width:36px;height:44px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.15);}
|
||||
.map-pin__icon svg{transform:rotate(45deg);width:18px;height:18px;}
|
||||
.map-pin__icon{background:#1890FF;}
|
||||
.map-pin__label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;margin-top:4px;background:rgba(255,255,255,0.9);padding:2px 6px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,0.08);}
|
||||
.device-modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:300;align-items:center;justify-content:center;}
|
||||
.device-modal-mask.open{display:flex;}
|
||||
.device-modal{background:#fff;border-radius:var(--radius-lg);width:680px;max-height:80vh;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.15);}
|
||||
.device-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.device-modal__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);}
|
||||
.device-modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);font-size:18px;}
|
||||
.device-modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.device-modal__body{padding:24px;overflow-y:auto;max-height:calc(80vh - 140px);}
|
||||
.device-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -100,8 +127,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -111,12 +137,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -124,10 +150,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -138,7 +164,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item active">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -149,7 +175,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -169,13 +195,16 @@
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="openDrawer()">+ 新增设备</button>
|
||||
<button class="btn btn-success">批量入库导入</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-primary" id="toggleViewBtn" onclick="toggleView()">地图展示</button>
|
||||
<span id="actionButtons">
|
||||
<button class="btn btn-primary" onclick="openDrawer()">+ 新增设备</button>
|
||||
<button class="btn btn-success">批量入库导入</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 数据列表 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card" id="tableView">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>设备名称</th><th>设备编码</th><th>设备分类</th><th>所属单位</th><th>设备位置</th><th>布点日期</th><th>监测时长(天)</th><th>操作</th></tr></thead>
|
||||
@@ -198,6 +227,47 @@
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图展示视图 -->
|
||||
<div class="map-view" id="mapView">
|
||||
<div class="map-view__canvas" id="mapCanvas">
|
||||
<svg class="map-bg" viewBox="0 0 1200 600" fill="none" preserveAspectRatio="none">
|
||||
<path d="M50 400h120V280H50v120z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M50 280l60-40 60 40" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M220 450h180V300H220v150z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M220 300l90-60 90 60" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M450 380h150V250H450v130z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M450 250l75-50 75 50" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M650 420h200V320H650v100z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M650 320l100-70 100 70" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M900 360h160V220H900v140z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M900 220l80-50 80 50" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M1050 480h120V350h-120v130z" stroke="#1890FF" stroke-width="1"/>
|
||||
<path d="M0 500h1200" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
<path d="M300 0v600" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
<path d="M700 0v600" stroke="#d9d9d9" stroke-width="2" opacity="0.3"/>
|
||||
</svg>
|
||||
<div class="map-pin" style="top:18%;left:12%;" onclick="showDeviceDetail(0)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">分析仪A1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:35%;left:30%;" onclick="showDeviceDetail(1)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">检测仪A2</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:55%;left:55%;" onclick="showDeviceDetail(2)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">检测仪B1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:25%;left:72%;" onclick="showDeviceDetail(3)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5v6h2V7h-2zm1 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1z"/></svg></div>
|
||||
<div class="map-pin__label">检测仪C1</div>
|
||||
</div>
|
||||
<div class="map-pin" style="top:65%;left:85%;" onclick="showDeviceDetail(4)">
|
||||
<div class="map-pin__icon"><svg viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
|
||||
<div class="map-pin__label">分析仪D1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增设备 - 右侧抽屉弹窗 -->
|
||||
@@ -278,6 +348,75 @@ 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 openDrawer(){document.getElementById('drawerMask').classList.add('open');document.getElementById('drawer').classList.add('open');}
|
||||
function closeDrawer(){document.getElementById('drawerMask').classList.remove('open');document.getElementById('drawer').classList.remove('open');}
|
||||
var isMapView = false;
|
||||
function toggleView(){
|
||||
var tableView = document.getElementById('tableView');
|
||||
var mapView = document.getElementById('mapView');
|
||||
var btn = document.getElementById('toggleViewBtn');
|
||||
var actions = document.getElementById('actionButtons');
|
||||
if(isMapView){
|
||||
tableView.style.display = '';
|
||||
mapView.classList.remove('active');
|
||||
actions.style.display = '';
|
||||
btn.textContent = '地图展示';
|
||||
} else {
|
||||
tableView.style.display = 'none';
|
||||
mapView.classList.add('active');
|
||||
actions.style.display = 'none';
|
||||
btn.textContent = '列表展示';
|
||||
}
|
||||
isMapView = !isMapView;
|
||||
}
|
||||
var devices = [
|
||||
{name:'水质分析仪A1',code:'WQ-2024-001',category:'水质多参数分析仪',unit:'采油一厂',location:'生活区供水站',date:'2024-04-20',days:'384',status:'在线'},
|
||||
{name:'浊度检测仪A2',code:'WQ-2024-002',category:'浊度检测仪',unit:'采油一厂',location:'员工食堂水房',date:'2024-05-15',days:'359',status:'在线'},
|
||||
{name:'余氯检测仪B1',code:'WQ-2024-003',category:'余氯检测仪',unit:'采油二厂',location:'宿舍区水塔',date:'2024-06-28',days:'315',status:'在线'},
|
||||
{name:'PH检测仪C1',code:'WQ-2024-004',category:'PH值检测仪',unit:'采气厂',location:'办公区直饮水机房',date:'2024-09-12',days:'239',status:'离线'},
|
||||
{name:'水质分析仪D1',code:'WQ-2025-001',category:'水质多参数分析仪',unit:'炼化公司',location:'厂区净水站出口',date:'2025-01-20',days:'109',status:'在线'},
|
||||
];
|
||||
function showDeviceDetail(idx){
|
||||
var d = devices[idx];
|
||||
if(!d) return;
|
||||
document.getElementById('deviceModalTitle').textContent = d.name + ' - 设备详情';
|
||||
document.getElementById('deviceName').textContent = d.name;
|
||||
document.getElementById('deviceCode').textContent = d.code;
|
||||
document.getElementById('deviceCategory').textContent = d.category;
|
||||
document.getElementById('deviceUnit').textContent = d.unit;
|
||||
document.getElementById('deviceLocation').textContent = d.location;
|
||||
document.getElementById('deviceDate').textContent = d.date;
|
||||
document.getElementById('deviceDays').textContent = d.days;
|
||||
document.getElementById('deviceStatus').textContent = d.status;
|
||||
document.getElementById('deviceModalMask').classList.add('open');
|
||||
}
|
||||
function hideDeviceDetail(){
|
||||
document.getElementById('deviceModalMask').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 设备详情弹窗 [交互] 点击地图上的设备标记点弹出此弹窗 -->
|
||||
<div class="device-modal-mask" id="deviceModalMask" onclick="hideDeviceDetail()">
|
||||
<div class="device-modal" onclick="event.stopPropagation()">
|
||||
<div class="device-modal__header">
|
||||
<span class="device-modal__title" id="deviceModalTitle">设备详情</span>
|
||||
<button class="device-modal__close" onclick="hideDeviceDetail()">×</button>
|
||||
</div>
|
||||
<div class="device-modal__body">
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><span class="info-item__label">设备名称</span><span class="info-item__value" id="deviceName">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备编码</span><span class="info-item__value" id="deviceCode">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备分类</span><span class="info-item__value" id="deviceCategory">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value" id="deviceUnit">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备位置</span><span class="info-item__value" id="deviceLocation">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">设备状态</span><span class="info-item__value" id="deviceStatus">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">布点日期</span><span class="info-item__value" id="deviceDate">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">监测时长(天)</span><span class="info-item__value" id="deviceDays">-</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-modal__footer">
|
||||
<button class="btn btn-default" onclick="hideDeviceDetail()">关闭</button>
|
||||
<button class="btn btn-primary" onclick="hideDeviceDetail();openDrawer()">编辑</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -78,8 +78,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -89,12 +88,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -102,10 +101,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -116,7 +115,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item active">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -127,7 +126,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -79,8 +79,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -90,12 +89,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -103,10 +102,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -117,7 +116,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -128,7 +127,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -73,8 +73,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -84,12 +83,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -97,10 +96,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -111,7 +110,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -122,7 +121,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -80,8 +80,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html" class="active">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -91,12 +90,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">环境监测</div>
|
||||
<div class="sidebar-menu__title">健康环境</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室内空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="indoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="indoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="indoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="indoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="indoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -104,10 +103,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气</div>
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 室外空气质量</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="outdoor-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="outdoor-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="outdoor-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="outdoor-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="outdoor-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -118,7 +117,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 水质监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="water-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="water-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="water-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item">应用记录</a>
|
||||
@@ -129,7 +128,7 @@
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 花粉监测</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pollen-device-list.html" class="sidebar-item">设备列表</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">设备分类</a>
|
||||
<a href="pollen-device-category.html" class="sidebar-item">分类管理</a>
|
||||
<a href="pollen-data-monitor.html" class="sidebar-item">数据监测</a>
|
||||
<a href="pollen-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
|
||||
@@ -98,8 +98,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<a href="crowd-status-employee.html">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html" class="active">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -93,8 +93,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<a href="crowd-status-employee.html">健康现状</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="exception-dirty.html" class="active">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -80,8 +80,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -78,8 +78,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -89,8 +89,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -112,8 +112,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -106,8 +106,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -64,8 +64,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -112,8 +112,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
|
||||
@@ -29,14 +29,14 @@
|
||||
||设备监测|管理员可通过列表页查看每个体脂仪的使用频率统计并可根据使用频率排序，数据明细中可查看具体每次的使用测量记录，支持员工实名和员工匿名两个维度的查询
|
||||
||设备统计|管理员查看单位、个人两种维度的运动器械统计信息
|
||||
|员工数据||管理员可以用过列表形式查看员工最新的监测数据，包含测量时间、测量设备、身高、体重、BMI、体脂率，点击测量记录可以查看员工详细的测量历史记录信息
|
||||
环境监测|室内空气|设备列表|管理员维护室内环境监测设备的信息，列表查看所有设备，支持切换地图展示方式
|
||||
||设备分类|管理员维护室内环境监测设备分类信息，统一设置不同监测指标的阈值
|
||||
健康环境|室内空气质量|设备列表|管理员维护室内环境监测设备的信息，列表查看所有设备，支持切换地图展示方式
|
||||
||分类管理|管理员维护室内环境监测设备分类信息，统一设置不同监测指标的阈值
|
||||
||数据监测|管理员查看室内环境监测设备的最新监测数据，点开详情查看不同监测指标近30日的变化趋势
|
||||
||异常报警|管理员查看室内环境监测设备的指标异常报警信息
|
||||
||应用记录|管理员查看移动端在室内环境模块点击查看的次数
|
||||
||历史数据|管理员查看室内环境监测设备的历史监测数据和历史异常数据
|
||||
|室外空气|设备列表|管理员维护室外环境监测设备的信息，列表查看所有设备，支持切换地图展示方式
|
||||
||设备分类|管理员维护室外环境监测设备分类信息，统一设置不同监测指标的阈值
|
||||
|室外空气质量|设备列表|管理员维护室外环境监测设备的信息，列表查看所有设备，支持切换地图展示方式
|
||||
||分类管理|管理员维护室外环境监测设备分类信息，统一设置不同监测指标的阈值
|
||||
||数据监测|管理员查看室外环境监测设备的最新监测数据，点开详情查看不同监测指标近30日的变化趋势
|
||||
||异常报警|管理员查看室外环境监测设备的指标异常报警信息
|
||||
||应用记录|管理员查看移动端在室外环境模块点击查看的次数
|
||||
|
||||
@@ -84,8 +84,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="tool-manage.html" class="active">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -106,8 +105,10 @@
|
||||
<a href="notification.html" class="sidebar-item">通知消息</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="personal-stat.html" class="sidebar-item">个人数据统计</a>
|
||||
<a href="dept-report.html" class="sidebar-item">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<!-- HIDDEN: [运维菜单] 恢复时删除此注释 -->
|
||||
<!-- HIDDEN --><a href="dept-report.html" class="sidebar-item" style="display:none">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<!-- [运维菜单] 恢复显示时删除此样式及注释 -->
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 运维中心</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
|
||||
@@ -94,8 +94,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="tool-manage.html" class="active">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -116,8 +115,10 @@
|
||||
<a href="notification.html" class="sidebar-item">通知消息</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="personal-stat.html" class="sidebar-item">个人数据统计</a>
|
||||
<a href="dept-report.html" class="sidebar-item active">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<!-- HIDDEN: [运维菜单] 恢复时删除此注释 -->
|
||||
<!-- HIDDEN --><a href="dept-report.html" class="sidebar-item active" style="display:none">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<!-- [运维菜单] 恢复显示时删除此样式及注释 -->
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 运维中心</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
|
||||
@@ -133,8 +133,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="tool-manage.html" class="active">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -155,8 +154,10 @@
|
||||
<a href="notification.html" class="sidebar-item">通知消息</a>
|
||||
<a href="dept-stat.html" class="sidebar-item active">单位数据统计</a>
|
||||
<a href="personal-stat.html" class="sidebar-item">个人数据统计</a>
|
||||
<a href="dept-report.html" class="sidebar-item">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<!-- HIDDEN: [运维菜单] 恢复时删除此注释 -->
|
||||
<!-- HIDDEN --><a href="dept-report.html" class="sidebar-item" style="display:none">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<!-- [运维菜单] 恢复显示时删除此样式及注释 -->
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 运维中心</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
|
||||
@@ -105,8 +105,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="tool-manage.html" class="active">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -127,8 +126,10 @@
|
||||
<a href="notification.html" class="sidebar-item">通知消息</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="personal-stat.html" class="sidebar-item">个人数据统计</a>
|
||||
<a href="dept-report.html" class="sidebar-item">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<!-- HIDDEN: [运维菜单] 恢复时删除此注释 -->
|
||||
<!-- HIDDEN --><a href="dept-report.html" class="sidebar-item" style="display:none">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<!-- [运维菜单] 恢复显示时删除此样式及注释 -->
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 运维中心</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
|
||||
@@ -128,8 +128,7 @@
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="tool-manage.html" class="active">穿戴监测</a>
|
||||
<a href="../weight/scale-device.html">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -150,8 +149,10 @@
|
||||
<a href="notification.html" class="sidebar-item active">通知消息</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="personal-stat.html" class="sidebar-item">个人数据统计</a>
|
||||
<a href="dept-report.html" class="sidebar-item">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<!-- HIDDEN: [运维菜单] 恢复时删除此注释 -->
|
||||
<!-- HIDDEN --><a href="dept-report.html" class="sidebar-item" style="display:none">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<!-- [运维菜单] 恢复显示时删除此样式及注释 -->
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 运维中心</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
|
||||
@@ -117,8 +117,7 @@
|
||||
<a href="../../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../tool-manage.html" class="active">穿戴监测</a>
|
||||
<a href="../../weight/scale-device.html">体重监测</a>
|
||||
<a href="../../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -139,8 +138,10 @@
|
||||
<a href="../notification.html" class="sidebar-item">通知消息</a>
|
||||
<a href="../dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="../personal-stat.html" class="sidebar-item">个人数据统计</a>
|
||||
<a href="../dept-report.html" class="sidebar-item">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<!-- HIDDEN: [运维菜单] 恢复时删除此注释 -->
|
||||
<!-- HIDDEN --><a href="../dept-report.html" class="sidebar-item" style="display:none">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<!-- [运维菜单] 恢复显示时删除此样式及注释 -->
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 运维中心</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
|
||||
@@ -111,8 +111,7 @@
|
||||
<a href="../../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../../health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="../tool-manage.html" class="active">穿戴监测</a>
|
||||
<a href="../../weight/scale-device.html">体重监测</a>
|
||||
<a href="../../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
@@ -133,8 +132,10 @@
|
||||
<a href="../notification.html" class="sidebar-item">通知消息</a>
|
||||
<a href="../dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="../personal-stat.html" class="sidebar-item">个人数据统计</a>
|
||||
<a href="../dept-report.html" class="sidebar-item">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<!-- HIDDEN: [运维菜单] 恢复时删除此注释 -->
|
||||
<!-- HIDDEN --><a href="../dept-report.html" class="sidebar-item" style="display:none">单位数据分析报告</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<!-- [运维菜单] 恢复显示时删除此样式及注释 -->
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 运维中心</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user