feat: 健康监测单位报表二级详情页面补齐
新增四个二级详情页面： - archive-unit-health-checkup-detail.html：健康排查详情（已签到/未签到员工列表） - archive-unit-wearable-detail.html：穿戴监测详情（已绑定/未绑定设备列表） - archive-unit-weight-detail.html：体重监测详情（正常/异常BMI员工列表） - archive-unit-environment-detail.html：环境监测详情（室内/室外/水质/花粉设备列表） 所有详情页面保持原导航结构（顶部菜单、侧边栏），支持Tab切换，动态显示单位和部门信息。 修改 archive-unit.html 链接指向正确的详情页面文件。 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Haiku 4.5
@@ -0,0 +1,398 @@
|
||||
<!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);}
|
||||
.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;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.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);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-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:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;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;}
|
||||
.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;}
|
||||
.breadcrumb .sep{color:var(--text-placeholder);}
|
||||
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;}
|
||||
.tab-item{padding:10px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);font-weight:600;border-bottom-color:var(--primary);}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
.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);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);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;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;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.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:left;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);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);}
|
||||
.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);}
|
||||
.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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康监测
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="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>
|
||||
<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-group-title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-item">个人监测数据</a>
|
||||
<a href="archive-unit.html" class="sidebar-item active">单位报表数据</a>
|
||||
<a href="archive-algorithm.html" class="sidebar-item">算法模型</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="archive-unit.html">单位报表数据</a>
|
||||
<span class="sep">/</span>
|
||||
<span id="unitDept"></span>
|
||||
<span class="sep">/</span>
|
||||
<span>环境监测</span>
|
||||
</div>
|
||||
<div class="detail-title" id="detailTitle"></div>
|
||||
<div class="detail-meta" id="detailMeta"></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>
|
||||
|
||||
<!-- 室内设备面板 -->
|
||||
<div class="tab-panel active" id="panel-indoor">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>设备名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入设备名称">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">室内设备列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 24 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>设备ID</th>
|
||||
<th>安装位置</th>
|
||||
<th>运行状态</th>
|
||||
<th>最后数据时间</th>
|
||||
<th>报警次数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>温度传感器-研发部</td>
|
||||
<td>SENSOR-001</td>
|
||||
<td>研发部办公室</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-13 08:30</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>湿度传感器-市场部</td>
|
||||
<td>SENSOR-002</td>
|
||||
<td>市场部办公室</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-13 08:15</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>空气质量传感器-会议室</td>
|
||||
<td>SENSOR-003</td>
|
||||
<td>一楼会议室</td>
|
||||
<td><span class="tag tag-orange">异常</span></td>
|
||||
<td>2026-05-13 07:45</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 3 条，共 24 条</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>
|
||||
|
||||
<!-- 室外设备面板 -->
|
||||
<div class="tab-panel" id="panel-outdoor">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>设备名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入设备名称">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">室外设备列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 8 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>设备ID</th>
|
||||
<th>安装位置</th>
|
||||
<th>运行状态</th>
|
||||
<th>最后数据时间</th>
|
||||
<th>报警次数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>气象站-停车场</td>
|
||||
<td>WEATHER-001</td>
|
||||
<td>停车场北侧</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-13 08:45</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>风速计-厂区</td>
|
||||
<td>WIND-001</td>
|
||||
<td>厂区中央</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-13 08:30</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 2 条，共 8 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 水质设备面板 -->
|
||||
<div class="tab-panel" id="panel-water">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>设备名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入设备名称">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">水质设备列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 5 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>设备ID</th>
|
||||
<th>安装位置</th>
|
||||
<th>运行状态</th>
|
||||
<th>最后数据时间</th>
|
||||
<th>报警次数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>pH传感器-取水口</td>
|
||||
<td>WATER-001</td>
|
||||
<td>取水口</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-13 07:50</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>浊度计-处理池</td>
|
||||
<td>WATER-002</td>
|
||||
<td>处理池</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-13 08:00</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 2 条，共 5 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 花粉设备面板 -->
|
||||
<div class="tab-panel" id="panel-pollen">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>设备名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入设备名称">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">花粉设备列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 2 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>设备ID</th>
|
||||
<th>安装位置</th>
|
||||
<th>运行状态</th>
|
||||
<th>最后数据时间</th>
|
||||
<th>报警次数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>花粉浓度计-办公楼前</td>
|
||||
<td>POLLEN-001</td>
|
||||
<td>办公楼前广场</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-13 06:30</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 1 条，共 2 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function getUrlParam(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
return r ? decodeURIComponent(r[2]) : null;
|
||||
}
|
||||
|
||||
function switchTab(tabName, elem) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t) { t.classList.remove('active'); });
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
|
||||
elem.classList.add('active');
|
||||
document.getElementById('panel-' + tabName).classList.add('active');
|
||||
}
|
||||
|
||||
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';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,276 @@
|
||||
<!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);}
|
||||
.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;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.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);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-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:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;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;}
|
||||
.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;}
|
||||
.breadcrumb .sep{color:var(--text-placeholder);}
|
||||
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;}
|
||||
.tab-item{padding:10px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);font-weight:600;border-bottom-color:var(--primary);}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
.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);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);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;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;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.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:left;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);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);}
|
||||
.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);}
|
||||
.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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康监测
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="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="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-group-title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-item">个人监测数据</a>
|
||||
<a href="archive-unit.html" class="sidebar-item active">单位报表数据</a>
|
||||
<a href="archive-algorithm.html" class="sidebar-item">算法模型</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="archive-unit.html">单位报表数据</a>
|
||||
<span class="sep">/</span>
|
||||
<span id="unitDept"></span>
|
||||
<span class="sep">/</span>
|
||||
<span>健康排查</span>
|
||||
</div>
|
||||
<div class="detail-title" id="detailTitle"></div>
|
||||
<div class="detail-meta" id="detailMeta"></div>
|
||||
|
||||
<!-- [交互] Tab 切换 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab('signed',this)">已签到</div>
|
||||
<div class="tab-item" onclick="switchTab('unsigned',this)">未签到</div>
|
||||
</div>
|
||||
|
||||
<!-- 已签到面板 -->
|
||||
<div class="tab-panel active" id="panel-signed">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">已签到员工列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 98 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>部门名称</th>
|
||||
<th>积分</th>
|
||||
<th>连续签到天数</th>
|
||||
<th>签到日期</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>张伟</td>
|
||||
<td>EMP001</td>
|
||||
<td>研发部</td>
|
||||
<td>92</td>
|
||||
<td>128</td>
|
||||
<td>2026-05-13 08:30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>李娜</td>
|
||||
<td>EMP002</td>
|
||||
<td>市场部</td>
|
||||
<td>88</td>
|
||||
<td>125</td>
|
||||
<td>2026-05-13 09:15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>王强</td>
|
||||
<td>EMP003</td>
|
||||
<td>运营部</td>
|
||||
<td>76</td>
|
||||
<td>98</td>
|
||||
<td>2026-05-13 07:45</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 3 条，共 98 条</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>
|
||||
|
||||
<!-- 未签到面板 -->
|
||||
<div class="tab-panel" id="panel-unsigned">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">未签到员工列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 22 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>部门名称</th>
|
||||
<th>原因</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>马超</td>
|
||||
<td>EMP004</td>
|
||||
<td>研发部</td>
|
||||
<td>休假</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>赵敏</td>
|
||||
<td>EMP005</td>
|
||||
<td>财务部</td>
|
||||
<td>出差</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 2 条，共 22 条</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>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function getUrlParam(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
return r ? decodeURIComponent(r[2]) : null;
|
||||
}
|
||||
|
||||
function switchTab(tabName, elem) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t) { t.classList.remove('active'); });
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
|
||||
elem.classList.add('active');
|
||||
document.getElementById('panel-' + tabName).classList.add('active');
|
||||
}
|
||||
|
||||
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年 · 总人数 120';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,276 @@
|
||||
<!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);}
|
||||
.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;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.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);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-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:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;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;}
|
||||
.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;}
|
||||
.breadcrumb .sep{color:var(--text-placeholder);}
|
||||
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;}
|
||||
.tab-item{padding:10px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);font-weight:600;border-bottom-color:var(--primary);}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
.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);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);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;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;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.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:left;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);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);}
|
||||
.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);}
|
||||
.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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康监测
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html" class="active">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
<a href="environment/indoor-device-list.html">环境监测</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-item">个人监测数据</a>
|
||||
<a href="archive-unit.html" class="sidebar-item active">单位报表数据</a>
|
||||
<a href="archive-algorithm.html" class="sidebar-item">算法模型</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="archive-unit.html">单位报表数据</a>
|
||||
<span class="sep">/</span>
|
||||
<span id="unitDept"></span>
|
||||
<span class="sep">/</span>
|
||||
<span>穿戴监测</span>
|
||||
</div>
|
||||
<div class="detail-title" id="detailTitle"></div>
|
||||
<div class="detail-meta" id="detailMeta"></div>
|
||||
|
||||
<!-- [交互] Tab 切换 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab('bound',this)">已绑定设备</div>
|
||||
<div class="tab-item" onclick="switchTab('unbound',this)">未绑定设备</div>
|
||||
</div>
|
||||
|
||||
<!-- 已绑定设备面板 -->
|
||||
<div class="tab-panel active" id="panel-bound">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">已绑定设备员工列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 68 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>部门名称</th>
|
||||
<th>设备类型</th>
|
||||
<th>绑定日期</th>
|
||||
<th>最后同步时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>张伟</td>
|
||||
<td>EMP001</td>
|
||||
<td>研发部</td>
|
||||
<td>智能手环</td>
|
||||
<td>2026-05-01</td>
|
||||
<td>2026-05-13 08:30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>李娜</td>
|
||||
<td>EMP002</td>
|
||||
<td>市场部</td>
|
||||
<td>智能手表</td>
|
||||
<td>2026-05-05</td>
|
||||
<td>2026-05-13 08:15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>王强</td>
|
||||
<td>EMP003</td>
|
||||
<td>运营部</td>
|
||||
<td>智能手环</td>
|
||||
<td>2026-04-28</td>
|
||||
<td>2026-05-13 07:45</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 3 条，共 68 条</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>
|
||||
|
||||
<!-- 未绑定设备面板 -->
|
||||
<div class="tab-panel" id="panel-unbound">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">未绑定设备员工列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 22 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>部门名称</th>
|
||||
<th>原因</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>马超</td>
|
||||
<td>EMP004</td>
|
||||
<td>研发部</td>
|
||||
<td>未领取</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>赵敏</td>
|
||||
<td>EMP005</td>
|
||||
<td>财务部</td>
|
||||
<td>设备故障</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 2 条，共 22 条</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>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function getUrlParam(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
return r ? decodeURIComponent(r[2]) : null;
|
||||
}
|
||||
|
||||
function switchTab(tabName, elem) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t) { t.classList.remove('active'); });
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
|
||||
elem.classList.add('active');
|
||||
document.getElementById('panel-' + tabName).classList.add('active');
|
||||
}
|
||||
|
||||
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';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,289 @@
|
||||
<!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);}
|
||||
.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;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.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);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-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:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;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;}
|
||||
.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;}
|
||||
.breadcrumb .sep{color:var(--text-placeholder);}
|
||||
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;}
|
||||
.tab-item{padding:10px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);font-weight:600;border-bottom-color:var(--primary);}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
.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);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);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;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;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.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:left;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);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);}
|
||||
.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);}
|
||||
.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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康监测
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="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>
|
||||
</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-group-title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-item">个人监测数据</a>
|
||||
<a href="archive-unit.html" class="sidebar-item active">单位报表数据</a>
|
||||
<a href="archive-algorithm.html" class="sidebar-item">算法模型</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="archive-unit.html">单位报表数据</a>
|
||||
<span class="sep">/</span>
|
||||
<span id="unitDept"></span>
|
||||
<span class="sep">/</span>
|
||||
<span>体重监测</span>
|
||||
</div>
|
||||
<div class="detail-title" id="detailTitle"></div>
|
||||
<div class="detail-meta" id="detailMeta"></div>
|
||||
|
||||
<!-- [交互] Tab 切换 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab('normal',this)">正常BMI</div>
|
||||
<div class="tab-item" onclick="switchTab('abnormal',this)">异常BMI</div>
|
||||
</div>
|
||||
|
||||
<!-- 正常BMI面板 -->
|
||||
<div class="tab-panel active" id="panel-normal">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">正常BMI员工列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 76 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>部门名称</th>
|
||||
<th>当前体重(kg)</th>
|
||||
<th>当前BMI</th>
|
||||
<th>BMI等级</th>
|
||||
<th>最后更新时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>张伟</td>
|
||||
<td>EMP001</td>
|
||||
<td>研发部</td>
|
||||
<td>70.2</td>
|
||||
<td>23.4</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-13 08:30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>李娜</td>
|
||||
<td>EMP002</td>
|
||||
<td>市场部</td>
|
||||
<td>57.8</td>
|
||||
<td>21.6</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-13 09:15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>陈刚</td>
|
||||
<td>EMP005</td>
|
||||
<td>人事部</td>
|
||||
<td>76.5</td>
|
||||
<td>25.3</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-13 07:45</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 3 条，共 76 条</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>
|
||||
|
||||
<!-- 异常BMI面板 -->
|
||||
<div class="tab-panel" id="panel-abnormal">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">异常BMI员工列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 14 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>部门名称</th>
|
||||
<th>当前体重(kg)</th>
|
||||
<th>当前BMI</th>
|
||||
<th>BMI等级</th>
|
||||
<th>最后更新时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>王磊</td>
|
||||
<td>EMP003</td>
|
||||
<td>运营部</td>
|
||||
<td>83.4</td>
|
||||
<td>27.5</td>
|
||||
<td><span class="tag tag-orange">超重</span></td>
|
||||
<td>2026-05-12 10:20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>周明</td>
|
||||
<td>EMP006</td>
|
||||
<td>采购部</td>
|
||||
<td>88.5</td>
|
||||
<td>29.2</td>
|
||||
<td><span class="tag tag-orange">肥胖</span></td>
|
||||
<td>2026-05-11 14:35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 2 条，共 14 条</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>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function getUrlParam(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
return r ? decodeURIComponent(r[2]) : null;
|
||||
}
|
||||
|
||||
function switchTab(tabName, elem) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t) { t.classList.remove('active'); });
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
|
||||
elem.classList.add('active');
|
||||
document.getElementById('panel-' + tabName).classList.add('active');
|
||||
}
|
||||
|
||||
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';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -57,10 +57,12 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.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:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);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;}
|
||||
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-blue{background:var(--primary-light);color:var(--primary);}
|
||||
@@ -93,7 +95,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
健康监测
|
||||
</div>
|
||||
<div class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a class="active" href="archive-personal.html">档案</a>
|
||||
<a href="health-checkup/survey-category.html">健康排查</a>
|
||||
<a href="wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="weight/scale-device.html">体重监测</a>
|
||||
@@ -167,28 +169,37 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位名称</th>
|
||||
<th>总人数</th>
|
||||
<th>健康排查-已签到人数</th>
|
||||
<th>健康排查-未签到人数</th>
|
||||
<th>健康排查-平均积分</th>
|
||||
<th>穿戴监测-入库设备数</th>
|
||||
<th>穿戴监测-分配设备数</th>
|
||||
<th>穿戴监测-异常次数</th>
|
||||
<th>穿戴监测-异常人数</th>
|
||||
<th>体重监测-体重秤设备数</th>
|
||||
<th>体重监测-蓝牙称设备数</th>
|
||||
<th>体重监测-体脂仪设备数</th>
|
||||
<th>体重监测-运动器械设备数</th>
|
||||
<th>体重监测-BMI异常人数</th>
|
||||
<th>环境监测-室内设备数</th>
|
||||
<th>环境监测-室外设备数</th>
|
||||
<th>环境监测-水质设备数</th>
|
||||
<th>环境监测-花粉设备数</th>
|
||||
<th>环境监测-报警次数</th>
|
||||
<th rowspan="2">单位名称</th>
|
||||
<th rowspan="2">总人数</th>
|
||||
<th colspan="3">健康排查</th>
|
||||
<th colspan="4">穿戴监测</th>
|
||||
<th colspan="5">体重监测</th>
|
||||
<th colspan="5">环境监测</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>已签到人数 ↕</th>
|
||||
<th>未签到人数 ↕</th>
|
||||
<th>平均积分 ↕</th>
|
||||
<th>入库设备数 ↕</th>
|
||||
<th>分配设备数 ↕</th>
|
||||
<th>异常次数 ↕</th>
|
||||
<th>异常人数 ↕</th>
|
||||
<th>体重秤设备数 ↕</th>
|
||||
<th>蓝牙称设备数 ↕</th>
|
||||
<th>体脂仪设备数 ↕</th>
|
||||
<th>运动器械设备数 ↕</th>
|
||||
<th>体重超标人数 ↕</th>
|
||||
<th>室内设备数 ↕</th>
|
||||
<th>室外设备数 ↕</th>
|
||||
<th>水质设备数 ↕</th>
|
||||
<th>花粉设备数 ↕</th>
|
||||
<th>报警次数 ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="stat-row">
|
||||
<td>统计行</td><td>1,280</td><td>1,147</td><td>133</td><td>85</td><td>1,280</td><td>1,147</td><td>45</td><td>27</td><td>1,147</td><td>244</td><td>129</td><td>86</td><td>53</td><td>80</td><td>25</td><td>12</td><td>6</td><td>12</td>
|
||||
</tr>
|
||||
<tr><td>采油一厂</td><td>420</td><td>398</td><td>22</td><td>87</td><td>420</td><td>398</td><td>12</td><td>8</td><td>398</td><td>85</td><td>42</td><td>28</td><td>15</td><td>24</td><td>8</td><td>4</td><td>2</td><td>3</td></tr>
|
||||
<tr><td>采油二厂</td><td>380</td><td>356</td><td>24</td><td>84</td><td>380</td><td>356</td><td>18</td><td>12</td><td>356</td><td>76</td><td>38</td><td>25</td><td>18</td><td>20</td><td>6</td><td>3</td><td>2</td><td>5</td></tr>
|
||||
<tr><td>采气一厂</td><td>260</td><td>245</td><td>15</td><td>82</td><td>260</td><td>245</td><td>8</td><td>5</td><td>245</td><td>52</td><td>26</td><td>18</td><td>12</td><td>16</td><td>5</td><td>2</td><td>1</td><td>2</td></tr>
|
||||
@@ -212,34 +223,43 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>部门名称</th>
|
||||
<th>所属二级单位</th>
|
||||
<th>总人数</th>
|
||||
<th>健康排查-已签到人数</th>
|
||||
<th>健康排查-未签到人数</th>
|
||||
<th>健康排查-平均积分</th>
|
||||
<th>穿戴监测-入库设备数</th>
|
||||
<th>穿戴监测-分配设备数</th>
|
||||
<th>穿戴监测-异常次数</th>
|
||||
<th>穿戴监测-异常人数</th>
|
||||
<th>体重监测-体重秤设备数</th>
|
||||
<th>体重监测-蓝牙称设备数</th>
|
||||
<th>体重监测-体脂仪设备数</th>
|
||||
<th>体重监测-运动器械设备数</th>
|
||||
<th>体重监测-BMI异常人数</th>
|
||||
<th>环境监测-室内设备数</th>
|
||||
<th>环境监测-室外设备数</th>
|
||||
<th>环境监测-水质设备数</th>
|
||||
<th>环境监测-花粉设备数</th>
|
||||
<th>环境监测-报警次数</th>
|
||||
<th rowspan="2">单位名称</th>
|
||||
<th rowspan="2">部门名称</th>
|
||||
<th rowspan="2">总人数</th>
|
||||
<th colspan="3">健康排查</th>
|
||||
<th colspan="4">穿戴监测</th>
|
||||
<th colspan="5">体重监测</th>
|
||||
<th colspan="5">环境监测</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>已签到人数 ↕</th>
|
||||
<th>未签到人数 ↕</th>
|
||||
<th>平均积分 ↕</th>
|
||||
<th>入库设备数 ↕</th>
|
||||
<th>分配设备数 ↕</th>
|
||||
<th>异常次数 ↕</th>
|
||||
<th>异常人数 ↕</th>
|
||||
<th>体重秤设备数 ↕</th>
|
||||
<th>蓝牙称设备数 ↕</th>
|
||||
<th>体脂仪设备数 ↕</th>
|
||||
<th>运动器械设备数 ↕</th>
|
||||
<th>体重超标人数 ↕</th>
|
||||
<th>室内设备数 ↕</th>
|
||||
<th>室外设备数 ↕</th>
|
||||
<th>水质设备数 ↕</th>
|
||||
<th>花粉设备数 ↕</th>
|
||||
<th>报警次数 ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>研发部</td><td>采油一厂</td><td>85</td><td>82</td><td>3</td><td>89</td><td>85</td><td>82</td><td>2</td><td>1</td><td>82</td><td>18</td><td>9</td><td>6</td><td>3</td><td>6</td><td>2</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>运营部</td><td>采油一厂</td><td>120</td><td>112</td><td>8</td><td>85</td><td>120</td><td>112</td><td>5</td><td>3</td><td>112</td><td>24</td><td>12</td><td>8</td><td>5</td><td>8</td><td>3</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>市场部</td><td>采油一厂</td><td>95</td><td>90</td><td>5</td><td>86</td><td>95</td><td>90</td><td>3</td><td>2</td><td>90</td><td>19</td><td>10</td><td>6</td><td>4</td><td>6</td><td>2</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>财务部</td><td>采油二厂</td><td>60</td><td>58</td><td>2</td><td>88</td><td>60</td><td>58</td><td>2</td><td>1</td><td>58</td><td>12</td><td>6</td><td>4</td><td>2</td><td>4</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>人事部</td><td>采油二厂</td><td>45</td><td>42</td><td>3</td><td>82</td><td>45</td><td>42</td><td>2</td><td>1</td><td>42</td><td>9</td><td>5</td><td>3</td><td>2</td><td>3</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr class="stat-row">
|
||||
<td>统计行</td><td>5</td><td>405</td><td>384</td><td>21</td><td>87</td><td>405</td><td>384</td><td>14</td><td>8</td><td>384</td><td>82</td><td>41</td><td>27</td><td>15</td><td>24</td><td>8</td><td>4</td><td>4</td><td>5</td>
|
||||
</tr>
|
||||
<tr><td>采油一厂</td><td>研发部</td><td>85</td><td>82</td><td>3</td><td>89</td><td>85</td><td>82</td><td>2</td><td>1</td><td>82</td><td>18</td><td>9</td><td>6</td><td>3</td><td>6</td><td>2</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油一厂</td><td>运营部</td><td>120</td><td>112</td><td>8</td><td>85</td><td>120</td><td>112</td><td>5</td><td>3</td><td>112</td><td>24</td><td>12</td><td>8</td><td>5</td><td>8</td><td>3</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油一厂</td><td>市场部</td><td>95</td><td>90</td><td>5</td><td>86</td><td>95</td><td>90</td><td>3</td><td>2</td><td>90</td><td>19</td><td>10</td><td>6</td><td>4</td><td>6</td><td>2</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油二厂</td><td>财务部</td><td>60</td><td>58</td><td>2</td><td>88</td><td>60</td><td>58</td><td>2</td><td>1</td><td>58</td><td>12</td><td>6</td><td>4</td><td>2</td><td>4</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油二厂</td><td>人事部</td><td>45</td><td>42</td><td>3</td><td>82</td><td>45</td><td>42</td><td>2</td><td>1</td><td>42</td><td>9</td><td>5</td><td>3</td><td>2</td><td>3</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -277,6 +297,68 @@ function switchTab(idx) {
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
/* 为表格数据添加链接 */
|
||||
(function(){
|
||||
function wrapLink(cell, href){
|
||||
var text = cell.textContent;
|
||||
cell.innerHTML = '<a class="link" href="' + href + '">' + text + '</a>';
|
||||
}
|
||||
|
||||
var tables = document.querySelectorAll('table tbody');
|
||||
tables.forEach(function(tbody, tableIdx){
|
||||
var rows = tbody.querySelectorAll('tr:not(.stat-row)');
|
||||
rows.forEach(function(row){
|
||||
var cells = row.querySelectorAll('td');
|
||||
if(cells.length === 0) return;
|
||||
|
||||
var unitName = cells[0].textContent;
|
||||
|
||||
// 二级单位表格
|
||||
if(tableIdx === 0){
|
||||
// 健康排查列 (2-4): 已签到、未签到、平均积分
|
||||
for(var i = 2; i <= 4; i++){
|
||||
wrapLink(cells[i], 'archive-unit-health-checkup-detail.html?unit=' + encodeURIComponent(unitName));
|
||||
}
|
||||
// 穿戴监测列 (5-8): 入库、分配、异常次数、异常人数
|
||||
for(var i = 5; i <= 8; i++){
|
||||
wrapLink(cells[i], 'archive-unit-wearable-detail.html?unit=' + encodeURIComponent(unitName));
|
||||
}
|
||||
// 体重监测列 (9-13): 体重秤、蓝牙称、体脂仪、运动器械、BMI异常
|
||||
for(var i = 9; i <= 13; i++){
|
||||
wrapLink(cells[i], 'archive-unit-weight-detail.html?unit=' + encodeURIComponent(unitName));
|
||||
}
|
||||
// 环境监测列 (14-18): 室内、室外、水质、花粉、报警
|
||||
for(var i = 14; i <= 18; i++){
|
||||
wrapLink(cells[i], 'archive-unit-environment-detail.html?unit=' + encodeURIComponent(unitName));
|
||||
}
|
||||
}
|
||||
// 三级单位表格
|
||||
else if(tableIdx === 1){
|
||||
var deptName = cells[0].textContent;
|
||||
var unitCell = cells[1];
|
||||
var unitNameFromCell = unitCell.textContent;
|
||||
|
||||
// 健康排查列 (3-5): 已签到、未签到、平均积分
|
||||
for(var i = 3; i <= 5; i++){
|
||||
wrapLink(cells[i], 'archive-unit-health-checkup-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + '&dept=' + encodeURIComponent(deptName));
|
||||
}
|
||||
// 穿戴监测列 (6-9): 入库、分配、异常次数、异常人数
|
||||
for(var i = 6; i <= 9; i++){
|
||||
wrapLink(cells[i], 'archive-unit-wearable-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + '&dept=' + encodeURIComponent(deptName));
|
||||
}
|
||||
// 体重监测列 (10-14): 体重秤、蓝牙称、体脂仪、运动器械、BMI异常
|
||||
for(var i = 10; i <= 14; i++){
|
||||
wrapLink(cells[i], 'archive-unit-weight-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + '&dept=' + encodeURIComponent(deptName));
|
||||
}
|
||||
// 环境监测列 (15-19): 室内、室外、水质、花粉、报警
|
||||
for(var i = 15; i <= 19; i++){
|
||||
wrapLink(cells[i], 'archive-unit-environment-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + '&dept=' + encodeURIComponent(deptName));
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user