feat: 批量更新多模块原型页面+截图+权重管理模块迁移
- 员工端健康监测: 截图更新+索引页更新 - 管理端健康环境: 室内外/水质/花粉设备列表+数据分析+数据监测+异常报警+历史数据等页面更新 - 管理端健康排查/档案/穿戴运维: 页面导航和链接更新 - 体重管理模块: 从health-monitor/weight迁移至weight-management目录 - 设备管理(蓝牙/体脂/体脂秤/运动) - 数据监测/统计/异常结果 - 新增目标体重审核/运动记录/个人目标数据/活动统计/算法模型等页面 - web-admin/weight-management: 新增体重管理模块24个管理端页面
This commit is contained in:
liuyunqin
@@ -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">
|
||||
|
||||
@@ -108,8 +108,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">
|
||||
@@ -130,8 +129,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">
|
||||
|
||||
@@ -104,8 +104,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">
|
||||
@@ -126,8 +125,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">
|
||||
|
||||
@@ -110,8 +110,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">
|
||||
@@ -132,8 +131,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">
|
||||
|
||||
@@ -101,8 +101,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">
|
||||
@@ -123,8 +122,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">
|
||||
|
||||
@@ -108,8 +108,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">
|
||||
@@ -130,8 +129,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">
|
||||
|
||||
@@ -115,8 +115,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">
|
||||
@@ -137,8 +136,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">
|
||||
|
||||
@@ -113,8 +113,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">
|
||||
@@ -135,8 +134,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">
|
||||
|
||||
@@ -108,8 +108,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">
|
||||
@@ -130,8 +129,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">
|
||||
|
||||
@@ -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">单位数据统计</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">
|
||||
|
||||
@@ -122,8 +122,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">
|
||||
@@ -144,8 +143,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">
|
||||
|
||||
@@ -108,8 +108,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">
|
||||
@@ -130,8 +129,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">
|
||||
|
||||
@@ -121,8 +121,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">
|
||||
@@ -143,8 +142,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">
|
||||
|
||||
@@ -114,8 +114,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">
|
||||
@@ -136,8 +135,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">单位数据分析报告</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">
|
||||
|
||||
@@ -129,8 +129,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">
|
||||
@@ -153,8 +152,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>
|
||||
运维中心
|
||||
|
||||
@@ -89,8 +89,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">
|
||||
@@ -111,8 +110,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 active">个人数据统计</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">
|
||||
|
||||
@@ -175,8 +175,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">
|
||||
@@ -198,8 +197,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">
|
||||
|
||||
@@ -137,8 +137,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">
|
||||
@@ -159,8 +158,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">
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>行动总览 | 体重管理</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 体重管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html" class="active">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html">设备管理</a>
|
||||
<a href="exception-system-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">过程管理</div>
|
||||
<a href="action-record.html" class="sidebar-item">行动记录</a>
|
||||
<a href="action-overview.html" class="sidebar-item active">行动总览</a>
|
||||
<a href="detail-data.html" class="sidebar-item">详细数据</a>
|
||||
<a href="weight-ranking.html" class="sidebar-item">体重排名</a>
|
||||
<a href="activity-statistics.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 主内容区域 -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>行动记录 | 体重管理</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 体重管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html" class="active">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html">设备管理</a>
|
||||
<a href="exception-system-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">过程管理</div>
|
||||
<a href="action-record.html" class="sidebar-item active">行动记录</a>
|
||||
<a href="action-overview.html" class="sidebar-item">行动总览</a>
|
||||
<a href="detail-data.html" class="sidebar-item">详细数据</a>
|
||||
<a href="weight-ranking.html" class="sidebar-item">体重排名</a>
|
||||
<a href="activity-statistics.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 主内容区域 -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>活动统计 | 体重管理</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 体重管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html" class="active">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html">设备管理</a>
|
||||
<a href="exception-system-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">过程管理</div>
|
||||
<a href="action-record.html" class="sidebar-item">行动记录</a>
|
||||
<a href="action-overview.html" class="sidebar-item">行动总览</a>
|
||||
<a href="detail-data.html" class="sidebar-item">详细数据</a>
|
||||
<a href="weight-ranking.html" class="sidebar-item">体重排名</a>
|
||||
<a href="activity-statistics.html" class="sidebar-item active">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 主内容区域 -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>算法模型 | 体重管理</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 体重管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal-weight-data.html" class="active">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html">设备管理</a>
|
||||
<a href="exception-system-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a href="archive-personal-weight-data.html" class="sidebar-item">个人体重数据</a>
|
||||
<a href="archive-unit-report.html" class="sidebar-item">单位报表数据</a>
|
||||
<a href="archive-algorithm-model.html" class="sidebar-item active">算法模型</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 主内容区域 -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,271 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人体重数据 | 体重管理</title>
|
||||
<style>
|
||||
/* 设计令牌 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .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;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;}
|
||||
.stat-card__icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__info{display:flex;flex-direction:column;gap:4px;}
|
||||
.stat-card__value{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;-webkit-overflow-scrolling:touch;}
|
||||
table{width:100%;border-collapse:collapse;min-width:100%;white-space:nowrap;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:center;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
|
||||
/* 排序列 */
|
||||
.sortable{cursor:pointer;user-select:none;position:relative;padding-right:24px !important;}
|
||||
.sortable:hover{background:#F0F5FF;}
|
||||
.sort-icon{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1px;}
|
||||
.sort-icon .arrow-up,.sort-icon .arrow-down{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;}
|
||||
.sort-icon .arrow-up{border-bottom:5px solid #ccc;}
|
||||
.sort-icon .arrow-down{border-top:5px solid #ccc;}
|
||||
.sortable.asc .sort-icon .arrow-up{border-bottom-color:var(--primary);}
|
||||
.sortable.desc .sort-icon .arrow-down{border-top-color:var(--primary);}
|
||||
|
||||
/* 分页 */
|
||||
.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);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header 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-weight-data.html" class="active">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html">设备管理</a>
|
||||
<a href="exception-system-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>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a class="sidebar-item active" href="archive-personal-weight-data.html"><span class="mi">👤</span>个人体重数据</a>
|
||||
<a class="sidebar-item" href="archive-unit-report.html"><span class="mi">🏢</span>单位报表数据</a>
|
||||
<a class="sidebar-item" href="archive-algorithm-model.html"><span class="mi">🤖</span>算法模型</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>姓名/员工编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名或工号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>CQ能源总部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option selected>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">个人体重数据（2026年）</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">姓名</th>
|
||||
<th rowspan="2">员工编号</th>
|
||||
<th rowspan="2">所属单位</th>
|
||||
<th rowspan="2">所属部门</th>
|
||||
<th colspan="6">体重监测</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="sortable">最初体重(kg)<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable">最终体重(kg)<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable">体重变化(kg)<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable">最初BMI<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable">最终BMI<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable">BMI变化<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张伟</td><td>EMP001</td><td>CQ能源总部</td><td>研发部</td>
|
||||
<td>72.5</td><td>70.2</td><td style="color:#52C41A;">-2.3</td><td>24.1</td><td>23.4</td><td style="color:#52C41A;">-0.7</td>
|
||||
<td><a class="link" href="archive-personal-weight-detail.html?id=EMP001">详细信息</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李娜</td><td>EMP002</td><td>CQ能源总部</td><td>市场部</td>
|
||||
<td>58.3</td><td>57.8</td><td style="color:#52C41A;">-0.5</td><td>21.8</td><td>21.6</td><td style="color:#52C41A;">-0.2</td>
|
||||
<td><a class="link" href="archive-personal-weight-detail.html?id=EMP002">详细信息</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>陈刚</td><td>EMP005</td><td>CQ能源总部</td><td>人事部</td>
|
||||
<td>78.9</td><td>76.5</td><td style="color:#52C41A;">-2.4</td><td>26.1</td><td>25.3</td><td style="color:#52C41A;">-0.8</td>
|
||||
<td><a class="link" href="archive-personal-weight-detail.html?id=EMP005">详细信息</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>王磊</td><td>EMP003</td><td>采油一厂</td><td>运营部</td>
|
||||
<td>85.6</td><td>83.4</td><td style="color:#52C41A;">-2.2</td><td>28.2</td><td>27.5</td><td style="color:#52C41A;">-0.7</td>
|
||||
<td><a class="link" href="archive-personal-weight-detail.html?id=EMP003">详细信息</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>赵敏</td><td>EMP004</td><td>采油二厂</td><td>财务部</td>
|
||||
<td>62.1</td><td>61.5</td><td style="color:#52C41A;">-0.6</td><td>23.2</td><td>23.0</td><td style="color:#52C41A;">-0.2</td>
|
||||
<td><a class="link" href="archive-personal-weight-detail.html?id=EMP004">详细信息</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孙强</td><td>EMP006</td><td>采气一厂</td><td>生产部</td>
|
||||
<td>91.2</td><td>89.8</td><td style="color:#52C41A;">-1.4</td><td>30.1</td><td>29.6</td><td style="color:#52C41A;">-0.5</td>
|
||||
<td><a class="link" href="archive-personal-weight-detail.html?id=EMP006">详细信息</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>周婷</td><td>EMP007</td><td>采油一厂</td><td>技术部</td>
|
||||
<td>55.0</td><td>55.8</td><td style="color:#FF4D4F;">+0.8</td><td>20.6</td><td>20.9</td><td style="color:#FF4D4F;">+0.3</td>
|
||||
<td><a class="link" href="archive-personal-weight-detail.html?id=EMP007">详细信息</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 7 条，共 1,280 条</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">256</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 侧边栏菜单项点击高亮
|
||||
document.querySelectorAll('.sidebar-item').forEach(function(item) {
|
||||
item.addEventListener('click', function() {
|
||||
document.querySelectorAll('.sidebar-item').forEach(function(i) { i.classList.remove('active'); });
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
// 排序列点击切换
|
||||
document.querySelectorAll('.sortable').forEach(function(th) {
|
||||
th.addEventListener('click', function() {
|
||||
var isAsc = this.classList.contains('asc');
|
||||
var isDesc = this.classList.contains('desc');
|
||||
// 清除其他排序状态
|
||||
document.querySelectorAll('.sortable').forEach(function(t) { t.classList.remove('asc','desc'); });
|
||||
if (isAsc) {
|
||||
this.classList.add('desc');
|
||||
} else {
|
||||
this.classList.add('asc');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人体重数据详情 | 体重管理</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .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;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 面包屑 */
|
||||
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{color:#40a9ff;}
|
||||
/* 员工信息卡片 */
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;display:flex;align-items:center;gap:32px;}
|
||||
.info-card__avatar{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;flex-shrink:0;}
|
||||
.info-card__detail{display:flex;flex-direction:column;gap:6px;}
|
||||
.info-card__name{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.info-card__meta{display:flex;gap:24px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
/* 通用 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:140px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:140px;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__content{overflow-x:auto;-webkit-overflow-scrolling:touch;}
|
||||
table{width:100%;border-collapse:collapse;white-space:nowrap;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.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);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.modal__header h3{font-size:var(--font-lg);font-weight:600;}
|
||||
.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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<header 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-weight-data.html" class="active">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html">设备管理</a>
|
||||
<a href="exception-system-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>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a class="sidebar-item active" href="archive-personal-weight-data.html"><span class="mi">👤</span>个人体重数据</a>
|
||||
<a class="sidebar-item" href="archive-unit-report.html"><span class="mi">🏢</span>单位报表数据</a>
|
||||
<a class="sidebar-item" href="archive-algorithm-model.html"><span class="mi">🤖</span>算法模型</a>
|
||||
</aside>
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 返回+面包屑 -->
|
||||
<div style="margin-bottom:12px;">
|
||||
<a href="archive-personal-weight-data.html" style="display:inline-flex;align-items:center;gap:6px;color:var(--primary);text-decoration:none;font-size:var(--font-sm);">
|
||||
<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>
|
||||
<div class="breadcrumb">
|
||||
<a href="archive-personal-weight-data.html">个人体重数据</a>
|
||||
<span style="color:var(--text-placeholder);">/</span>
|
||||
<span>详细信息</span>
|
||||
</div>
|
||||
<!-- 员工信息卡片 -->
|
||||
<div class="info-card">
|
||||
<div class="info-card__avatar" id="empAvatar">张</div>
|
||||
<div class="info-card__detail">
|
||||
<div class="info-card__name" id="empName">张伟</div>
|
||||
<div class="info-card__meta">
|
||||
<span id="empCode">员工编号：EMP001</span>
|
||||
<span id="empUnit">CQ能源总部</span>
|
||||
<span id="empDept">研发部</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 体重测量记录 -->
|
||||
<div class="table-card" style="margin-top:20px;">
|
||||
<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>体脂肪率(%)</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>18.2</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>18.4</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>18.5</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>18.1</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>18.6</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 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>
|
||||
<script>
|
||||
// 侧边栏菜单项点击高亮
|
||||
document.querySelectorAll('.sidebar-item').forEach(function(item) {
|
||||
item.addEventListener('click', function() {
|
||||
document.querySelectorAll('.sidebar-item').forEach(function(i) { i.classList.remove('active'); });
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
// 体重详情弹窗
|
||||
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);
|
||||
var id=params.get('id');
|
||||
var empData={EMP001:{name:'张伟',unit:'CQ能源总部',dept:'研发部'},EMP002:{name:'李娜',unit:'CQ能源总部',dept:'市场部'},EMP005:{name:'陈刚',unit:'CQ能源总部',dept:'人事部'},EMP003:{name:'王磊',unit:'采油一厂',dept:'运营部'},EMP004:{name:'赵敏',unit:'采油二厂',dept:'财务部'}};
|
||||
var emp=empData[id]||empData.EMP001;
|
||||
document.getElementById('empAvatar').textContent=emp.name.charAt(0);
|
||||
document.getElementById('empName').textContent=emp.name;
|
||||
document.getElementById('empCode').textContent='员工编号：'+(id||'EMP001');
|
||||
document.getElementById('empUnit').textContent=emp.unit;
|
||||
document.getElementById('empDept').textContent=emp.dept;
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>单位报表数据 | 体重管理</title>
|
||||
<style>
|
||||
/* 全局重置与基础样式 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .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;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:center;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
tbody tr.stat-row{background:#F0F5FF;font-weight:500;}
|
||||
tbody tr.stat-row:hover{background:#E6F0FF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
/* 链接 */
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
/* TAB栏 */
|
||||
.tab-bar{display:flex;gap:0;padding:0 24px;border-bottom:1px solid var(--border);}
|
||||
.tab-item{padding:12px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;font-weight:500;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
/* 分页 */
|
||||
.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);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
体重管理
|
||||
</div>
|
||||
<div class="top-bar__nav">
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html">设备管理</a>
|
||||
<a href="exception-system-dirty.html">异常事件</a>
|
||||
</div>
|
||||
<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>系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a class="sidebar-item" href="archive-personal-weight-data.html"><span class="mi">👤</span>个人体重数据</a>
|
||||
<a class="sidebar-item active" href="archive-unit-report.html"><span class="mi">🏢</span>单位报表数据</a>
|
||||
<a class="sidebar-item" href="archive-algorithm-model.html"><span class="mi">🤖</span>算法模型</a>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- TAB切换 -->
|
||||
<div class="tab-bar" style="background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-sm);margin-bottom:0;">
|
||||
<div class="tab-item active" onclick="switchTab(0)">二级单位</div>
|
||||
<div class="tab-item" onclick="switchTab(1)">三级单位</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar" style="border-radius:0 0 var(--radius-md) var(--radius-md);margin-top:0;">
|
||||
<div class="filter-item">
|
||||
<label>单位名称</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>能源总部机关</option>
|
||||
<option>勘探开发研究院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option selected>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位体重监测数据（2026年）</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级单位表格 -->
|
||||
<div class="tab-panel active" id="tab-0">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">单位名称</th>
|
||||
<th rowspan="2">总人数</th>
|
||||
<th colspan="6">体重监测</th>
|
||||
<th rowspan="2">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>最初平均体重(kg) ↕</th>
|
||||
<th>最终平均体重(kg) ↕</th>
|
||||
<th>平均体重变化(kg) ↕</th>
|
||||
<th>最初平均BMI ↕</th>
|
||||
<th>最终平均BMI ↕</th>
|
||||
<th>平均BMI变化 ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="stat-row">
|
||||
<td>统计行</td><td>1,280</td><td>74.3</td><td>72.8</td><td>-1.5</td><td>24.8</td><td>24.3</td><td>-0.5</td><td><a class="link" href="archive-unit-weight-detail.html">查看明细</a></td>
|
||||
</tr>
|
||||
<tr><td>采油一厂</td><td>420</td><td>75.6</td><td>73.8</td><td>-1.8</td><td>25.2</td><td>24.6</td><td>-0.6</td><td><a class="link" href="archive-unit-weight-detail.html?unit=采油一厂">查看明细</a></td></tr>
|
||||
<tr><td>采油二厂</td><td>380</td><td>73.2</td><td>72.0</td><td>-1.2</td><td>24.5</td><td>24.1</td><td>-0.4</td><td><a class="link" href="archive-unit-weight-detail.html?unit=采油二厂">查看明细</a></td></tr>
|
||||
<tr><td>采气一厂</td><td>260</td><td>76.8</td><td>75.1</td><td>-1.7</td><td>25.8</td><td>25.2</td><td>-0.6</td><td><a class="link" href="archive-unit-weight-detail.html?unit=采气一厂">查看明细</a></td></tr>
|
||||
<tr><td>能源总部机关</td><td>150</td><td>70.5</td><td>69.8</td><td>-0.7</td><td>23.5</td><td>23.2</td><td>-0.3</td><td><a class="link" href="archive-unit-weight-detail.html?unit=能源总部机关">查看明细</a></td></tr>
|
||||
<tr><td>勘探开发研究院</td><td>70</td><td>72.1</td><td>71.2</td><td>-0.9</td><td>24.0</td><td>23.7</td><td>-0.3</td><td><a class="link" href="archive-unit-weight-detail.html?unit=勘探开发研究院">查看明细</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 8 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 三级单位表格 -->
|
||||
<div class="tab-panel" id="tab-1">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">单位名称</th>
|
||||
<th rowspan="2">部门名称</th>
|
||||
<th rowspan="2">总人数</th>
|
||||
<th colspan="6">体重监测</th>
|
||||
<th rowspan="2">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>最初平均体重(kg) ↕</th>
|
||||
<th>最终平均体重(kg) ↕</th>
|
||||
<th>平均体重变化(kg) ↕</th>
|
||||
<th>最初平均BMI ↕</th>
|
||||
<th>最终平均BMI ↕</th>
|
||||
<th>平均BMI变化 ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="stat-row">
|
||||
<td>统计行</td><td>—</td><td>405</td><td>75.6</td><td>73.8</td><td>-1.8</td><td>25.2</td><td>24.6</td><td>-0.6</td><td><a class="link" href="archive-unit-weight-detail.html">查看明细</a></td>
|
||||
</tr>
|
||||
<tr><td>采油一厂</td><td>研发部</td><td>85</td><td>73.2</td><td>71.5</td><td>-1.7</td><td>24.4</td><td>23.8</td><td>-0.6</td><td><a class="link" href="archive-unit-weight-detail.html?unit=采油一厂&dept=研发部">查看明细</a></td></tr>
|
||||
<tr><td>采油一厂</td><td>运营部</td><td>120</td><td>76.8</td><td>74.6</td><td>-2.2</td><td>25.8</td><td>25.1</td><td>-0.7</td><td><a class="link" href="archive-unit-weight-detail.html?unit=采油一厂&dept=运营部">查看明细</a></td></tr>
|
||||
<tr><td>采油一厂</td><td>市场部</td><td>95</td><td>74.5</td><td>73.2</td><td>-1.3</td><td>25.0</td><td>24.6</td><td>-0.4</td><td><a class="link" href="archive-unit-weight-detail.html?unit=采油一厂&dept=市场部">查看明细</a></td></tr>
|
||||
<tr><td>采油二厂</td><td>财务部</td><td>60</td><td>71.0</td><td>70.1</td><td>-0.9</td><td>23.8</td><td>23.5</td><td>-0.3</td><td><a class="link" href="archive-unit-weight-detail.html?unit=采油二厂&dept=财务部">查看明细</a></td></tr>
|
||||
<tr><td>采油二厂</td><td>人事部</td><td>45</td><td>72.3</td><td>71.5</td><td>-0.8</td><td>24.1</td><td>23.8</td><td>-0.3</td><td><a class="link" href="archive-unit-weight-detail.html?unit=采油二厂&dept=人事部">查看明细</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 24 条</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">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<script>
|
||||
/* TAB切换 */
|
||||
function switchTab(idx) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t, i) { t.classList.toggle('active', i === idx); });
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p, i) { p.classList.toggle('active', i === idx); });
|
||||
}
|
||||
/* 侧边栏当前页高亮 */
|
||||
(function(){
|
||||
var current = location.pathname.split('/').pop();
|
||||
document.querySelectorAll('.sidebar-item').forEach(function(item){
|
||||
var href = item.getAttribute('href');
|
||||
if(href === current){
|
||||
item.classList.add('active');
|
||||
} else {
|
||||
item.classList.remove('active');
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+12
-12
@@ -72,25 +72,25 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<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" class="active">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html" class="active">设备管理</a>
|
||||
<a href="exception-system-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>
|
||||
<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 open">
|
||||
<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="scale-device.html" class="sidebar-item">设备管理</a>
|
||||
@@ -157,6 +157,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>function toggleSubgroup(h){h.parentElement.classList.toggle('open');}(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();</script>
|
||||
<script>function toggleSubgroup(h){var p=h.parentElement;var sidebar=p.closest("aside");if(sidebar)sidebar.querySelectorAll(".sidebar-subgroup.open").forEach(function(g){if(g!==p)g.classList.remove("open");});p.classList.toggle("open");}(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var sidebar=document.querySelector('aside');if(sidebar)sidebar.querySelectorAll('.sidebar-subgroup.open').forEach(function(g){g.classList.remove('open');});var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();</script>
|
||||
</body>
|
||||
</html>
|
||||
+12
-12
@@ -101,25 +101,25 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<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" class="active">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html" class="active">设备管理</a>
|
||||
<a href="exception-system-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>
|
||||
<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 open">
|
||||
<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="scale-device.html" class="sidebar-item">设备管理</a>
|
||||
@@ -195,7 +195,7 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>function toggleSubgroup(h){h.parentElement.classList.toggle('open');}(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
<script>function toggleSubgroup(h){var p=h.parentElement;var sidebar=p.closest("aside");if(sidebar)sidebar.querySelectorAll(".sidebar-subgroup.open").forEach(function(g){if(g!==p)g.classList.remove("open");});p.classList.toggle("open");}(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var sidebar=document.querySelector('aside');if(sidebar)sidebar.querySelectorAll('.sidebar-subgroup.open').forEach(function(g){g.classList.remove('open');});var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
// 成员查看弹窗数据
|
||||
var deviceData = [
|
||||
+13
-13
@@ -94,24 +94,24 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<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" class="active">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html" class="active">设备管理</a>
|
||||
<a href="exception-system-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>
|
||||
<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-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">
|
||||
@@ -119,7 +119,7 @@
|
||||
<a href="scale-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
@@ -208,8 +208,8 @@
|
||||
</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');})();
|
||||
function toggleSubgroup(h){var p=h.parentElement;var sidebar=p.closest("aside");if(sidebar)sidebar.querySelectorAll(".sidebar-subgroup.open").forEach(function(g){if(g!==p)g.classList.remove("open");});p.classList.toggle("open");}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var sidebar=document.querySelector('aside');if(sidebar)sidebar.querySelectorAll('.sidebar-subgroup.open').forEach(function(g){g.classList.remove('open');});var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
function closeDialog(){document.getElementById('dialogMask').classList.remove('show');}
|
||||
(function(){
|
||||
var mask=document.getElementById('dialogMask');
|
||||
+12
-12
@@ -68,24 +68,24 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<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" class="active">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html" class="active">设备管理</a>
|
||||
<a href="exception-system-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>
|
||||
<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-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">
|
||||
@@ -93,7 +93,7 @@
|
||||
<a href="scale-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
@@ -156,6 +156,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>function toggleSubgroup(h){h.parentElement.classList.toggle('open');}(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();</script>
|
||||
<script>function toggleSubgroup(h){var p=h.parentElement;var sidebar=p.closest("aside");if(sidebar)sidebar.querySelectorAll(".sidebar-subgroup.open").forEach(function(g){if(g!==p)g.classList.remove("open");});p.classList.toggle("open");}(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var sidebar=document.querySelector('aside');if(sidebar)sidebar.querySelectorAll('.sidebar-subgroup.open').forEach(function(g){g.classList.remove('open');});var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();</script>
|
||||
</body>
|
||||
</html>
|
||||
+13
-13
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康监测 - 单位数据统计 | 健康CQ原型</title>
|
||||
<title>单位数据统计 | 体重管理</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;}
|
||||
@@ -86,18 +86,18 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<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="scale-device.html" class="active">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html" class="active">设备管理</a>
|
||||
<a href="exception-system-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<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>
|
||||
@@ -106,7 +106,7 @@
|
||||
</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__body">
|
||||
@@ -387,8 +387,8 @@
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
function toggleSubgroup(h){var p=h.parentElement;var sidebar=p.closest("aside");if(sidebar)sidebar.querySelectorAll(".sidebar-subgroup.open").forEach(function(g){if(g!==p)g.classList.remove("open");});p.classList.toggle("open");}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var sidebar=document.querySelector('aside');if(sidebar)sidebar.querySelectorAll('.sidebar-subgroup.open').forEach(function(g){g.classList.remove('open');});var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
function switchTab(el, tab) {
|
||||
document.querySelectorAll('.page-tab').forEach(function(t){ t.classList.remove('active'); });
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>详细数据 | 体重管理</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 体重管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html" class="active">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html">设备管理</a>
|
||||
<a href="exception-system-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">过程管理</div>
|
||||
<a href="action-record.html" class="sidebar-item">行动记录</a>
|
||||
<a href="action-overview.html" class="sidebar-item">行动总览</a>
|
||||
<a href="detail-data.html" class="sidebar-item active">详细数据</a>
|
||||
<a href="weight-ranking.html" class="sidebar-item">体重排名</a>
|
||||
<a href="activity-statistics.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 主内容区域 -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
+14
-13
@@ -97,24 +97,24 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<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" class="active">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html" class="active">设备管理</a>
|
||||
<a href="exception-system-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>
|
||||
<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-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">
|
||||
@@ -143,7 +143,8 @@
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item active">员工监测数据</a>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="employee-data-record.html" class="sidebar-item active">员工监测数据记录</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
@@ -212,8 +213,8 @@
|
||||
</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');})();
|
||||
function toggleSubgroup(h){var p=h.parentElement;var sidebar=p.closest("aside");if(sidebar)sidebar.querySelectorAll(".sidebar-subgroup.open").forEach(function(g){if(g!==p)g.classList.remove("open");});p.classList.toggle("open");}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var sidebar=document.querySelector('aside');if(sidebar)sidebar.querySelectorAll('.sidebar-subgroup.open').forEach(function(g){g.classList.remove('open');});var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
var records=[
|
||||
{device:'体重秤',code:'SC-2024-001',time:'2024-05-10 08:30',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"},"其他":{"无机盐量/矿物质量(kg)":"3.5","细胞内液(kg)":"25.2","细胞外液(kg)":"14.9","健康评分":"78"}}},
|
||||
+12
-12
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康监测 - 员工数据 | 健康CQ原型</title>
|
||||
<title>员工监测数据 | 体重管理</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;}
|
||||
@@ -68,18 +68,18 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<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" class="active">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html" class="active">设备管理</a>
|
||||
<a href="exception-system-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<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>
|
||||
@@ -88,7 +88,7 @@
|
||||
</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__body">
|
||||
@@ -175,6 +175,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>function toggleSubgroup(h){h.parentElement.classList.toggle('open');}(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();</script>
|
||||
<script>function toggleSubgroup(h){var p=h.parentElement;var sidebar=p.closest("aside");if(sidebar)sidebar.querySelectorAll(".sidebar-subgroup.open").forEach(function(g){if(g!==p)g.classList.remove("open");});p.classList.toggle("open");}(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var sidebar=document.querySelector('aside');if(sidebar)sidebar.querySelectorAll('.sidebar-subgroup.open').forEach(function(g){g.classList.remove('open');});var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();</script>
|
||||
</body>
|
||||
</html>
|
||||
+13
-13
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康监测 - 员工数据统计 | 健康CQ原型</title>
|
||||
<title>员工数据统计 | 体重管理</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,18 +73,18 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<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="scale-device.html" class="active">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html" class="active">设备管理</a>
|
||||
<a href="exception-system-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<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>
|
||||
@@ -93,7 +93,7 @@
|
||||
</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__body">
|
||||
@@ -205,8 +205,8 @@
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
function toggleSubgroup(h){var p=h.parentElement;var sidebar=p.closest("aside");if(sidebar)sidebar.querySelectorAll(".sidebar-subgroup.open").forEach(function(g){if(g!==p)g.classList.remove("open");});p.classList.toggle("open");}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var sidebar=document.querySelector('aside');if(sidebar)sidebar.querySelectorAll('.sidebar-subgroup.open').forEach(function(g){g.classList.remove('open');});var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
function toggleSort(th) {
|
||||
var wasAsc = th.classList.contains('asc');
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>结果异常 | 体重管理</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 体重管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html">设备管理</a>
|
||||
<a href="exception-system-dirty.html" class="active">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">异常事件</div>
|
||||
<a href="exception-system-dirty.html" class="sidebar-item">系统脏数据</a>
|
||||
<a href="exception-result-abnormal.html" class="sidebar-item active">结果异常</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 主内容区域 -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>系统脏数据 | 体重管理</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 体重管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html">设备管理</a>
|
||||
<a href="exception-system-dirty.html" class="active">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">异常事件</div>
|
||||
<a href="exception-system-dirty.html" class="sidebar-item active">系统脏数据</a>
|
||||
<a href="exception-result-abnormal.html" class="sidebar-item">结果异常</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 主内容区域 -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
+12
-12
@@ -72,25 +72,25 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<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" class="active">体重监测</a>
|
||||
<a href="../environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html" class="active">设备管理</a>
|
||||
<a href="exception-system-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>
|
||||
<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 open">
|
||||
<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="scale-device.html" class="sidebar-item">设备管理</a>
|
||||
@@ -157,6 +157,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>function toggleSubgroup(h){h.parentElement.classList.toggle('open');}(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();</script>
|
||||
<script>function toggleSubgroup(h){var p=h.parentElement;var sidebar=p.closest("aside");if(sidebar)sidebar.querySelectorAll(".sidebar-subgroup.open").forEach(function(g){if(g!==p)g.classList.remove("open");});p.classList.toggle("open");}(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var sidebar=document.querySelector('aside');if(sidebar)sidebar.querySelectorAll('.sidebar-subgroup.open').forEach(function(g){g.classList.remove('open');});var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();</script>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user