fix: 更新健康监测模块页面与文档,新增静态服务配置

This commit is contained in:
liuyunqin
2026-07-15 17:34:52 +08:00
parent ff11ee0e1c
commit c7096947e0
18 changed files with 756 additions and 472 deletions
@@ -69,11 +69,18 @@ tbody tr:hover{background:#F8FBFF;}
.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);}
.detail-title{font-size:var(--font-lg);font-weight:600;margin-bottom:4px;}
.detail-meta{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-placeholder);}
.empty-state svg{width:64px;height:64px;margin-bottom:12px;opacity:0.3;}
.empty-state__title{font-size:var(--font-sm);color:var(--text-secondary);}
/* 单位信息卡片 */
.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);}
.info-card__right{flex-shrink:0;margin-left:auto;}
.info-card__date-filter{display:flex;align-items:center;gap:8px;}
.info-card__date-filter label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
</style>
</head>
<body>
@@ -126,16 +133,33 @@ tbody tr:hover{background:#F8FBFF;}
<span class="sep">/</span>
<span>健康现状</span>
</div>
<div class="detail-title" id="detailTitle"></div>
<div class="detail-meta" id="detailMeta"></div>
<!-- 单位信息卡片 -->
<div class="info-card">
<div class="info-card__detail">
<div class="info-card__name" id="unitName">采油一厂</div>
<div class="info-card__meta">
<span id="unitTotal">总人数:1280</span>
</div>
</div>
<div class="info-card__right">
<div class="info-card__date-filter">
<label>年份</label>
<select class="filter-select" id="filterYear" onchange="onYearChange()" style="height:32px;min-width:110px;font-size:var(--font-xs);">
<option value="2026">2026年</option>
<option value="2025">2025年</option>
<option value="2024">2024年</option>
</select>
</div>
</div>
</div>
<!-- Tab 切换 -->
<div class="tab-bar">
<div class="tab-item active" onclick="switchTab('a',this)">A类(人数)</div>
<div class="tab-item" onclick="switchTab('b',this)">B类(人数)</div>
<div class="tab-item" onclick="switchTab('c',this)">C类(人数)</div>
<div class="tab-item" onclick="switchTab('d',this)">D类(人数)</div>
<div class="tab-item" onclick="switchTab('e',this)">E类(人数)</div>
<div class="tab-item active" onclick="switchTab('a',this)">A类(768)</div>
<div class="tab-item" onclick="switchTab('b',this)">B类(256)</div>
<div class="tab-item" onclick="switchTab('c',this)">C类(128)</div>
<div class="tab-item" onclick="switchTab('d',this)">D类(89)</div>
<div class="tab-item" onclick="switchTab('e',this)">E类(39)</div>
</div>
<!-- A类面板 -->
@@ -511,15 +535,22 @@ function resetPanel(cat) {
renderPanel(cat, empData[cat]);
}
/* ===== 年份切换 ===== */
var currentYear = '2026';
function onYearChange(){
currentYear = document.getElementById('filterYear').value;
// 可根据年份刷新页面数据
}
/* ===== 初始化 ===== */
(function() {
var unit = getUrlParam('unit') || '采油一厂';
var dept = getUrlParam('dept') || '';
var displayName = unit + (dept ? ' - ' + dept : '');
document.getElementById('unitDept').textContent = displayName;
document.getElementById('detailTitle').textContent = displayName + ' — 健康现状 详情';
document.getElementById('detailMeta').textContent = '2026年 · A类768人 · B类256人 · C类128人 · D类89人 · E类39人';
document.getElementById('unitDept').textContent = displayName;
document.getElementById('unitName').textContent = displayName;
document.getElementById('unitTotal').textContent = '总人数:1280';
// 渲染所有面板
['a','b','c','d','e'].forEach(function(cat) { renderPanel(cat); });
@@ -63,8 +63,15 @@ tbody tr:hover{background:#F8FBFF;}
.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);}
.detail-title{font-size:var(--font-lg);font-weight:600;margin-bottom:4px;}
.detail-meta{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
/* 单位信息卡片 */
.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);}
.info-card__right{flex-shrink:0;margin-left:auto;}
.info-card__date-filter{display:flex;align-items:center;gap:8px;}
.info-card__date-filter label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
</style>
</head>
<body>
@@ -117,16 +124,33 @@ tbody tr:hover{background:#F8FBFF;}
<span class="sep">/</span>
<span>健康环境</span>
</div>
<div class="detail-title" id="detailTitle"></div>
<div class="detail-meta" id="detailMeta"></div>
<!-- 单位信息卡片 -->
<div class="info-card">
<div class="info-card__detail">
<div class="info-card__name" id="unitName">采油一厂</div>
<div class="info-card__meta">
<span id="unitTotal">设备总数:39</span>
</div>
</div>
<div class="info-card__right">
<div class="info-card__date-filter">
<label>年份</label>
<select class="filter-select" id="filterYear" onchange="onYearChange()" style="height:32px;min-width:110px;font-size:var(--font-xs);">
<option value="2026">2026年</option>
<option value="2025">2025年</option>
<option value="2024">2024年</option>
</select>
</div>
</div>
</div>
<!-- [交互] Tab 切换 -->
<div class="tab-bar">
<div class="tab-item active" onclick="switchTab('indoor',this)">室内设备</div>
<div class="tab-item" onclick="switchTab('outdoor',this)">室外设备</div>
<div class="tab-item" onclick="switchTab('water',this)">水质设备</div>
<div class="tab-item" onclick="switchTab('pollen',this)">花粉设备</div>
<div class="tab-item" onclick="switchTab('alarm',this)">报警次数</div>
<div class="tab-item active" onclick="switchTab('indoor',this)">室内设备(24)</div>
<div class="tab-item" onclick="switchTab('outdoor',this)">室外设备(8)</div>
<div class="tab-item" onclick="switchTab('water',this)">水质设备(5)</div>
<div class="tab-item" onclick="switchTab('pollen',this)">花粉设备(2)</div>
<div class="tab-item" onclick="switchTab('alarm',this)">报警次数(12)</div>
</div>
<!-- 室内设备面板 -->
@@ -495,13 +519,20 @@ function switchTab(tabName, elem) {
document.getElementById('panel-' + tabName).classList.add('active');
}
/* ===== 年份切换 ===== */
var currentYear = '2026';
function onYearChange(){
currentYear = document.getElementById('filterYear').value;
// 可根据年份刷新页面数据
}
var unit = getUrlParam('unit') || '采油一厂';
var dept = getUrlParam('dept') || '';
var displayName = unit + (dept ? ' - ' + dept : '');
document.getElementById('unitDept').textContent = displayName;
document.getElementById('detailTitle').textContent = displayName + ' — 健康环境 详情';
document.getElementById('detailMeta').textContent = '2026年 · 设备总数 39';
document.getElementById('unitName').textContent = displayName;
document.getElementById('unitTotal').textContent = '设备总数39';
// 根据URL参数自动切换tab
var tab = getUrlParam('tab');
@@ -70,6 +70,15 @@ tbody tr:hover{background:#F8FBFF;}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-placeholder);}
.empty-state svg{width:64px;height:64px;margin-bottom:12px;opacity:0.3;}
.empty-state__title{font-size:var(--font-sm);color:var(--text-secondary);}
/* 单位信息卡片 */
.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);}
.info-card__right{flex-shrink:0;margin-left:auto;}
.info-card__date-filter{display:flex;align-items:center;gap:8px;}
.info-card__date-filter label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
/* 弹窗 */
.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;}
@@ -135,10 +144,30 @@ tbody tr:hover{background:#F8FBFF;}
<span>健康排查详情</span>
</div>
<!-- 单位信息卡片 -->
<div class="info-card">
<div class="info-card__detail">
<div class="info-card__name" id="unitName">采油一厂</div>
<div class="info-card__meta">
<span id="unitTotal">排查活动:5个</span>
</div>
</div>
<div class="info-card__right">
<div class="info-card__date-filter">
<label>年份</label>
<select class="filter-select" id="filterYear" onchange="onYearChange()" style="height:32px;min-width:110px;font-size:var(--font-xs);">
<option value="2026">2026年</option>
<option value="2025">2025年</option>
<option value="2024">2024年</option>
</select>
</div>
</div>
</div>
<!-- Tab 切换 -->
<div class="tab-bar">
<div class="tab-item active" onclick="switchTab('activity-list',this)">活动列表</div>
<div class="tab-item" onclick="switchTab('pending-emp',this)">未参加员工</div>
<div class="tab-item active" onclick="switchTab('activity-list',this)">活动列表(5)</div>
<div class="tab-item" onclick="switchTab('pending-emp',this)">未参加员工(8)</div>
</div>
<!-- Tab1: 活动列表 -->
@@ -731,14 +760,24 @@ function resetPendingEmpFilter(){
renderPendingEmpTable(buildPendingEmpList());
}
/* ===== 年份切换 ===== */
var currentYear = '2026';
function onYearChange(){
currentYear = document.getElementById('filterYear').value;
// 可根据年份刷新页面数据
}
/* ===== 初始化 ===== */
(function(){
var unit = getUrlParam('unit') || '采油一厂';
var dept = getUrlParam('dept') || '';
var displayName = unit + (dept ? ' - ' + dept : '');
document.getElementById('bcUnit').textContent = displayName;
renderActivityList(activities);
renderPendingEmpTable(buildPendingEmpList());
var unit = getUrlParam('unit') || '采油一厂';
var dept = getUrlParam('dept') || '';
var displayName = unit + (dept ? ' - ' + dept : '');
document.getElementById('bcUnit').textContent = displayName;
// 填充单位信息卡片
document.getElementById('unitName').textContent = displayName;
document.getElementById('unitTotal').textContent = '排查活动:'+activities.length+'个';
renderActivityList(activities);
renderPendingEmpTable(buildPendingEmpList());
// 根据URL参数自动切换tab
var tab = getUrlParam('tab');
if(tab){
@@ -63,8 +63,15 @@ tbody tr:hover{background:#F8FBFF;}
.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);}
.detail-title{font-size:var(--font-lg);font-weight:600;margin-bottom:4px;}
.detail-meta{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
/* 单位信息卡片 */
.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);}
.info-card__right{flex-shrink:0;margin-left:auto;}
.info-card__date-filter{display:flex;align-items:center;gap:8px;}
.info-card__date-filter label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
</style>
</head>
<body>
@@ -117,8 +124,25 @@ tbody tr:hover{background:#F8FBFF;}
<span class="sep">/</span>
<span>穿戴监测</span>
</div>
<div class="detail-title" id="detailTitle"></div>
<div class="detail-meta" id="detailMeta"></div>
<!-- 单位信息卡片 -->
<div class="info-card">
<div class="info-card__detail">
<div class="info-card__name" id="unitName">采油一厂</div>
<div class="info-card__meta">
<span id="unitTotal">总设备数:90</span>
</div>
</div>
<div class="info-card__right">
<div class="info-card__date-filter">
<label>年份</label>
<select class="filter-select" id="filterYear" onchange="onYearChange()" style="height:32px;min-width:110px;font-size:var(--font-xs);">
<option value="2026">2026年</option>
<option value="2025">2025年</option>
<option value="2024">2024年</option>
</select>
</div>
</div>
</div>
<!-- [交互] Tab 切换 -->
<div class="tab-bar">
@@ -473,13 +497,20 @@ function switchTab(tabName, elem) {
document.getElementById('panel-' + tabName).classList.add('active');
}
/* ===== 年份切换 ===== */
var currentYear = '2026';
function onYearChange(){
currentYear = document.getElementById('filterYear').value;
// 可根据年份刷新页面数据
}
var unit = getUrlParam('unit') || '采油一厂';
var dept = getUrlParam('dept') || '';
var displayName = unit + (dept ? ' - ' + dept : '');
document.getElementById('unitDept').textContent = displayName;
document.getElementById('detailTitle').textContent = displayName + ' — 穿戴监测 详情';
document.getElementById('detailMeta').textContent = '2026年 · 总设备数 90';
document.getElementById('unitName').textContent = displayName;
document.getElementById('unitTotal').textContent = '总设备数90';
// 根据URL参数自动切换tab
var tab = getUrlParam('tab');
File diff suppressed because it is too large Load Diff
Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 55 KiB

@@ -707,6 +707,7 @@
<div style="background:#F0F7FF;border:1px solid #BAE0FF;border-radius:var(--radius-md);padding:10px 16px;flex-shrink:0;">
<span style="font-size:var(--font-sm);color:#0958D9;">设备编码:<strong id="msDeviceCode">WD-2024-001</strong></span>
</div>
<button class="btn btn-primary btn-sm" onclick="showAddTypeForm()" style="flex-shrink:0;">+ 新增类型配置</button>
</div>
<div class="monitor-setting-list" id="monitorSettingList">
<!-- 心率 -->