feat: 健康监测多端原型新增与优化
- 员工端新增体重监测模块(主页/历史数据/详细报告)，支持按设备来源(体重秤/蓝牙秤/体脂仪)显示不同字段 - 员工端新增健康排查模块(首页/打卡填写/打卡记录/问卷详情/题目设置)，含打卡成功dialog弹窗 - 管理端体重监测数据明细页使用次数统计靠右显示 - 管理端体重监测dialog弹窗改为分类展示监测字段 - 导航页SITE_MAP同步更新新增页面条目 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -78,8 +78,8 @@
|
||||
.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:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.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:900px;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;}
|
||||
@@ -492,7 +492,8 @@ function renderTrendChart(){
|
||||
var legend='';
|
||||
keys.forEach(function(key){
|
||||
var d=TREND_DATA[key];
|
||||
legend+='<div class="trend-legend-item"><div class="trend-legend-color" style="background:'+d.color+'"></div>'+d.label+(d.unit?' ('+d.unit+')')+'</div>';
|
||||
var unitStr = d.unit ? ' (' + d.unit + ')' : '';
|
||||
legend+='<div class="trend-legend-item"><div class="trend-legend-color" style="background:'+d.color+'"></div>'+d.label+unitStr+'</div>';
|
||||
});
|
||||
document.getElementById('trendLegend').innerHTML=legend;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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" 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="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-item">个人监测数据</a>
|
||||
<a href="archive-unit.html" class="sidebar-item">单位报表数据</a>
|
||||
<a href="archive-algorithm.html" class="sidebar-item active">算法模型</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>算法模型</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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" 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="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-item active">个人监测数据</a>
|
||||
<a href="archive-unit.html" class="sidebar-item">单位报表数据</a>
|
||||
<a href="archive-algorithm.html" class="sidebar-item">算法模型</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>个人监测数据</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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" 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="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a href="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="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>单位报表数据</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
# 健康监测管理端 CHANGELOG
|
||||
|
||||
## [2026-05-11]
|
||||
|
||||
### 新增 — 穿戴监测模块（`wearable/`）完整实现
|
||||
|
||||
- **`wearable/tool-manage.html`** 工具管理
|
||||
- 设备列表：设备编码/名称/类型/厂商/绑定状态/绑定员工/所属单位/入库时间
|
||||
- 筛选：设备编码、设备类型、绑定状态、所属单位
|
||||
- 操作：新增设备、批量入库（文件导入）、绑定员工/换绑/绑定记录/报废
|
||||
- 弹窗：新增设备表单、绑定员工、绑定记录、批量入库上传
|
||||
|
||||
- **`wearable/bind-record.html`** 绑定记录
|
||||
- 绑定历史列表：设备编码/类型/员工/单位/作业区/绑定时间/解绑时间/状态
|
||||
- 筛选：设备编码、所属单位、员工姓名、工号、绑定状态、绑定时间范围
|
||||
- 支持导出
|
||||
|
||||
- **`wearable/user-data.html`** 用户数据
|
||||
- 员工监测数据列表：心率/血氧/体温/收缩压/舒张压/步数（最新值）
|
||||
- 异常值红色标注
|
||||
- 数据详情弹窗：当日统计卡片 + 趋势图Tab + 历史明细Tab
|
||||
- 趋势图：内联SVG折线图，支持切换监测项和时间范围
|
||||
|
||||
- **`wearable/exception-event.html`** 异常事件
|
||||
- 今日告警统计概览（5类型卡片：总计/一键告警/心率/血氧/体温压力）
|
||||
- 告警列表：类型Tag、告警值、参考范围、告警位置
|
||||
- 筛选：员工姓名、所属单位、告警类型、告警时间范围
|
||||
- 告警详情弹窗（含位置信息）
|
||||
|
||||
- **`wearable/notification.html`** 通知消息
|
||||
- 通知记录列表：标题/范围/目标人数/已读人数/发送时间
|
||||
- 发送通知弹窗：标题/内容/通知范围（全员/指定员工）
|
||||
- 通知详情弹窗
|
||||
- 阅读统计弹窗（已读/未读人员列表）
|
||||
|
||||
- **`wearable/dept-stat.html`** 部门数据统计
|
||||
- Tab切换：部门佩戴统计 / 员工每日明细
|
||||
- 部门统计：分配设备数/今日佩戴人数/佩戴率进度条/各类型异常人数
|
||||
- 明细数据：员工每日佩戴时长/数据上报次数/是否有异常
|
||||
- 支持导出
|
||||
|
||||
- **`wearable/personal-stat.html`** 个人数据统计
|
||||
- 以天为维度，统计每位员工心率/血氧/体温的最大值/最小值/平均值及步数/有效佩戴时段
|
||||
- 多级表头分组展示
|
||||
- 异常值标红
|
||||
|
||||
### 更新 — `index.html` SITE_MAP
|
||||
- 健康监测模块 `pages:[]` 更新为完整57条页面条目（含档案/健康排查/穿戴监测/体重监测/环境监测/异常事件各子模块）
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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__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 active">应用记录</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">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>应用记录</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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__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 active">数据监测</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">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>数据监测</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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__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-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">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>设备分类</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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__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-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">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>设备列表</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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__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 active">异常报警</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">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>异常报警</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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__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 active">历史数据</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">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>历史数据</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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="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 active">应用记录</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">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>应用记录</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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="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>
|
||||
</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>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>数据监测</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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="outdoor-device-list.html" class="sidebar-item">设备列表</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>
|
||||
<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">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>设备分类</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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="outdoor-device-list.html" class="sidebar-item active">设备列表</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">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>设备列表</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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="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 active">异常报警</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">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>异常报警</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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="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 active">历史数据</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">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>历史数据</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 active">应用记录</a>
|
||||
<a href="pollen-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>应用记录</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>数据监测</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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>
|
||||
<a href="pollen-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>设备分类</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 active">设备列表</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-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>设备列表</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 active">异常报警</a>
|
||||
<a href="pollen-app-record.html" class="sidebar-item">应用记录</a>
|
||||
<a href="pollen-history-data.html" class="sidebar-item">历史数据</a>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>异常报警</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>历史数据</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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">历史数据</a>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item active">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>知识科普</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item">异常报警</a>
|
||||
<a href="water-app-record.html" class="sidebar-item active">应用记录</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>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>应用记录</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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>
|
||||
</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>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>数据监测</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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 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>
|
||||
<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>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>设备分类</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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 active">设备列表</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>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>设备列表</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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">数据监测</a>
|
||||
<a href="water-exception-alarm.html" class="sidebar-item active">异常报警</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>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>异常报警</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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-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 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">数据监测</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 active">历史数据</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>
|
||||
<a href="pollen-knowledge.html" class="sidebar-item">知识科普</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>历史数据</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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">环境监测</a>
|
||||
<a href="exception-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-dirty.html" class="sidebar-item active">系统脏数据</a>
|
||||
<a href="exception-result.html" class="sidebar-item">结果异常</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>系统脏数据</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);color:var(--text-placeholder);gap:12px;}
|
||||
.page-placeholder svg{opacity:.25;}
|
||||
.page-placeholder p{font-size:var(--font-base);}
|
||||
</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">环境监测</a>
|
||||
<a href="exception-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-dirty.html" class="sidebar-item">系统脏数据</a>
|
||||
<a href="exception-result.html" class="sidebar-item active">结果异常</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="page-placeholder">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="8" stroke="#ccc" stroke-width="2"/><path d="M20 32h24M32 20v24" stroke="#ccc" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<p>结果异常</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,242 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{display:flex;align-items:center;gap:16px;margin-bottom:16px;background:#fff;padding:16px 24px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item__label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.form-control{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-control:focus{border-color:var(--primary);}
|
||||
textarea.form-control{height:auto;padding:10px 12px;resize:vertical;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
.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:560px;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);}
|
||||
.modal__close:hover{background:#f5f5f5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
|
||||
.form-group label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.td-content{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
</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-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="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item active">格言管理</a>
|
||||
<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="record-user.html" class="sidebar-item">用户排查</a>
|
||||
<a href="record-dept.html" class="sidebar-item">部门排查</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">格言内容</span>
|
||||
<input class="form-control" id="filterContent" placeholder="请输入关键词" style="width:240px;">
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="filterTable()">查询</button>
|
||||
<button class="btn btn-default" onclick="resetFilter()">重置</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">格言列表</span>
|
||||
<button class="btn btn-primary" onclick="openModal(null)">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
新增
|
||||
</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>格言内容</th>
|
||||
<th>格言作者</th>
|
||||
<th>格言来源</th>
|
||||
<th>创建日期</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<div class="modal-mask" id="editModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3 id="modalTitle">新增格言</h3>
|
||||
<button class="modal__close" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-group">
|
||||
<label>格言内容 <span style="color:var(--danger)">*</span></label>
|
||||
<textarea class="form-control" id="editContent" rows="4" placeholder="请输入格言内容"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>格言作者</label>
|
||||
<input class="form-control" id="editAuthor" placeholder="请输入作者">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>格言来源</label>
|
||||
<input class="form-control" id="editSource" placeholder="请输入来源">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveMaxim()">确定</button>
|
||||
</div>
|
||||
</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');})();
|
||||
|
||||
var maxims=[
|
||||
{content:'健康是人生第一财富。',author:'爱默生',source:'《处世之道》',date:'2026-03-10'},
|
||||
{content:'早睡早起，使人健康、富有、明智。',author:'富兰克林',source:'《穷理查年鉴》',date:'2026-03-12'},
|
||||
{content:'运动是一切生命的源泉。',author:'达·芬奇',source:'《笔记》',date:'2026-03-15'},
|
||||
{content:'保持身体健康是一种责任，否则我们将无法保持头脑清醒和强健。',author:'释迦牟尼',source:'佛经',date:'2026-03-18'},
|
||||
{content:'饮食有节，起居有常，不妄作劳，故能形与神俱。',author:'黄帝内经',source:'《素问·上古天真论》',date:'2026-04-01'},
|
||||
{content:'生命在于运动。',author:'伏尔泰',source:'',date:'2026-04-05'},
|
||||
{content:'心宽体健，乐观长寿。',author:'民间谚语',source:'',date:'2026-04-10'}
|
||||
];
|
||||
|
||||
var editingIdx=null;
|
||||
|
||||
function renderTable(data){
|
||||
var html='';
|
||||
data.forEach(function(m){
|
||||
var idx=maxims.indexOf(m);
|
||||
html+='<tr>';
|
||||
html+='<td class="td-content" title="'+m.content+'">'+m.content+'</td>';
|
||||
html+='<td>'+m.author+'</td>';
|
||||
html+='<td>'+(m.source||'-')+'</td>';
|
||||
html+='<td>'+m.date+'</td>';
|
||||
html+='<td><span class="link" onclick="openModal('+idx+')">编辑</span>';
|
||||
html+='<span style="color:var(--border);margin:0 6px;">|</span>';
|
||||
html+='<span class="link" style="color:var(--danger);">删除</span></td>';
|
||||
html+='</tr>';
|
||||
});
|
||||
document.getElementById('tbody').innerHTML=html||'<tr><td colspan="5" style="text-align:center;padding:40px;color:var(--text-placeholder);">暂无数据</td></tr>';
|
||||
}
|
||||
|
||||
function filterTable(){
|
||||
var kw=document.getElementById('filterContent').value.trim().toLowerCase();
|
||||
var filtered=maxims.filter(function(m){
|
||||
return !kw||m.content.toLowerCase().indexOf(kw)>-1;
|
||||
});
|
||||
renderTable(filtered);
|
||||
}
|
||||
function resetFilter(){
|
||||
document.getElementById('filterContent').value='';
|
||||
renderTable(maxims);
|
||||
}
|
||||
|
||||
function openModal(idx){
|
||||
editingIdx=idx;
|
||||
if(idx===null){
|
||||
document.getElementById('modalTitle').textContent='新增格言';
|
||||
document.getElementById('editContent').value='';
|
||||
document.getElementById('editAuthor').value='';
|
||||
document.getElementById('editSource').value='';
|
||||
}else{
|
||||
var m=maxims[idx];
|
||||
document.getElementById('modalTitle').textContent='编辑格言';
|
||||
document.getElementById('editContent').value=m.content;
|
||||
document.getElementById('editAuthor').value=m.author;
|
||||
document.getElementById('editSource').value=m.source;
|
||||
}
|
||||
document.getElementById('editModal').classList.add('show');
|
||||
}
|
||||
function closeModal(){document.getElementById('editModal').classList.remove('show');}
|
||||
function saveMaxim(){closeModal();}
|
||||
|
||||
renderTable(maxims);
|
||||
document.getElementById('editModal').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,277 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{display:flex;align-items:center;gap:16px;margin-bottom:16px;background:#fff;padding:16px 24px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);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;}
|
||||
.form-control{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-control:focus{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{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
.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:780px;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);}
|
||||
.modal__close:hover{background:#f5f5f5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);z-index:9999;opacity:0;transition:opacity .2s;pointer-events:none;}
|
||||
.toast.show{opacity:1;}
|
||||
</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-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="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<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="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item active">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">筛选日期</span>
|
||||
<input class="form-control" id="filterDate" type="date" value="2026-05-13">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">单位</span>
|
||||
<select class="form-control" id="filterUnit">
|
||||
<option value="">全部单位</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="filterTable()">查询</button>
|
||||
<button class="btn btn-default" onclick="resetFilter()">重置</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-left:auto;display:flex;gap:8px;">
|
||||
<button class="btn btn-default" onclick="showToast('导出任务已创建')">导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="showToast('暂无导出任务')">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">单位排查统计</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位名称</th>
|
||||
<th>员工总数</th>
|
||||
<th>已打卡人数</th>
|
||||
<th>未打卡人数</th>
|
||||
<th>打卡日期</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 打卡记录弹窗 -->
|
||||
<div class="modal-mask" id="recordModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3 id="recordTitle">打卡记录</h3>
|
||||
<button class="modal__close" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="display:flex;justify-content:flex-end;margin-bottom:12px;">
|
||||
<button class="btn btn-default" onclick="showToast('导出成功')">导出</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>单位名称</th>
|
||||
<th>部门名称</th>
|
||||
<th>是否打卡</th>
|
||||
<th>打卡时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="recordTbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></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');})();
|
||||
|
||||
var units=['长庆油田公司','西安分公司','庆阳分公司'];
|
||||
|
||||
var deptData=[
|
||||
{unit:'长庆油田公司',total:320,checked:298,unchecked:22,date:'2026-05-13'},
|
||||
{unit:'西安分公司',total:85,checked:79,unchecked:6,date:'2026-05-13'},
|
||||
{unit:'庆阳分公司',total:120,checked:108,unchecked:12,date:'2026-05-13'}
|
||||
];
|
||||
|
||||
var recordData=[
|
||||
{name:'张伟',code:'CQ10021',unit:'长庆油田公司',dept:'采油一厂',checked:'是',time:'2026-05-13 07:45'},
|
||||
{name:'李娜',code:'CQ10035',unit:'长庆油田公司',dept:'采油二厂',checked:'是',time:'2026-05-13 08:02'},
|
||||
{name:'王强',code:'CQ10048',unit:'长庆油田公司',dept:'采气一厂',checked:'是',time:'2026-05-13 07:30'},
|
||||
{name:'马超',code:'CQ10055',unit:'长庆油田公司',dept:'采油一厂',checked:'否',time:'-'},
|
||||
{name:'赵敏',code:'XA20012',unit:'长庆油田公司',dept:'输油处',checked:'是',time:'2026-05-13 08:15'},
|
||||
{name:'刘洋',code:'CQ10070',unit:'长庆油田公司',dept:'采油三厂',checked:'否',time:'-'}
|
||||
];
|
||||
|
||||
function initUnitSelect(){
|
||||
var s=document.getElementById('filterUnit');
|
||||
s.innerHTML='<option value="">全部单位</option>';
|
||||
units.forEach(function(u){s.innerHTML+='<option>'+u+'</option>';});
|
||||
}
|
||||
|
||||
function renderTable(data){
|
||||
var html='';
|
||||
data.forEach(function(d,i){
|
||||
html+='<tr>';
|
||||
html+='<td>'+d.unit+'</td>';
|
||||
html+='<td>'+d.total+'</td>';
|
||||
html+='<td style="color:var(--success);font-weight:500;">'+d.checked+'</td>';
|
||||
html+='<td style="color:var(--danger);font-weight:500;">'+d.unchecked+'</td>';
|
||||
html+='<td>'+d.date+'</td>';
|
||||
html+='<td><span class="link" onclick="showToast(\'导出成功\')">按日导出</span>';
|
||||
html+='<span style="color:var(--border);margin:0 6px;">|</span>';
|
||||
html+='<span class="link" onclick="openRecordModal('+i+')">打卡记录</span></td>';
|
||||
html+='</tr>';
|
||||
});
|
||||
document.getElementById('tbody').innerHTML=html||'<tr><td colspan="6" style="text-align:center;padding:40px;color:var(--text-placeholder);">暂无数据</td></tr>';
|
||||
}
|
||||
|
||||
function filterTable(){
|
||||
var unit=document.getElementById('filterUnit').value;
|
||||
var filtered=deptData.filter(function(d){
|
||||
if(unit&&d.unit!==unit)return false;
|
||||
return true;
|
||||
});
|
||||
renderTable(filtered);
|
||||
}
|
||||
function resetFilter(){
|
||||
document.getElementById('filterUnit').value='';
|
||||
document.getElementById('filterDate').value='2026-05-13';
|
||||
renderTable(deptData);
|
||||
}
|
||||
|
||||
function openRecordModal(idx){
|
||||
var d=deptData[idx];
|
||||
document.getElementById('recordTitle').textContent=d.unit+' - 打卡记录';
|
||||
var html='';
|
||||
recordData.forEach(function(r){
|
||||
var checkedColor=r.checked==='是'?'var(--success)':'var(--danger)';
|
||||
html+='<tr>';
|
||||
html+='<td>'+r.name+'</td>';
|
||||
html+='<td>'+r.code+'</td>';
|
||||
html+='<td>'+r.unit+'</td>';
|
||||
html+='<td>'+r.dept+'</td>';
|
||||
html+='<td><span style="color:'+checkedColor+'">'+r.checked+'</span></td>';
|
||||
html+='<td>'+r.time+'</td>';
|
||||
html+='</tr>';
|
||||
});
|
||||
document.getElementById('recordTbody').innerHTML=html;
|
||||
document.getElementById('recordModal').classList.add('show');
|
||||
}
|
||||
|
||||
function closeModal(){document.getElementById('recordModal').classList.remove('show');}
|
||||
function showToast(msg){
|
||||
var t=document.getElementById('toast');
|
||||
t.textContent=msg;t.classList.add('show');
|
||||
setTimeout(function(){t.classList.remove('show');},2000);
|
||||
}
|
||||
|
||||
initUnitSelect();
|
||||
renderTable(deptData);
|
||||
|
||||
document.getElementById('recordModal').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,404 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{display:flex;align-items:center;gap:16px;margin-bottom:16px;background:#fff;padding:16px 24px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);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;}
|
||||
.form-control{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-control:focus{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__actions{display:flex;gap:8px;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
.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:560px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
|
||||
.modal-lg{width:780px;}
|
||||
.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);}
|
||||
.modal__close:hover{background:#f5f5f5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
|
||||
.form-group label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.info-card{background:var(--primary-light);border-radius:var(--radius-md);padding:16px 20px;margin-bottom:16px;display:flex;gap:24px;flex-wrap:wrap;}
|
||||
.info-card__item{display:flex;flex-direction:column;gap:2px;}
|
||||
.info-card__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.info-card__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);z-index:9999;opacity:0;transition:opacity .2s;pointer-events:none;}
|
||||
.toast.show{opacity:1;}
|
||||
.cascade-wrap{display:flex;gap:8px;}
|
||||
.cascade-wrap select{flex:1;}
|
||||
</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-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="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<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="record-user.html" class="sidebar-item active">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">姓名</span>
|
||||
<input class="form-control" id="filterName" placeholder="请输入姓名" style="width:140px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">员工编号</span>
|
||||
<input class="form-control" id="filterCode" placeholder="请输入编号" style="width:140px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">单位部门</span>
|
||||
<div class="cascade-wrap">
|
||||
<select class="form-control" id="filterUnit" onchange="onUnitChange()">
|
||||
<option value="">选择单位</option>
|
||||
</select>
|
||||
<select class="form-control" id="filterDept">
|
||||
<option value="">选择部门</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="filterTable()">查询</button>
|
||||
<button class="btn btn-default" onclick="resetFilter()">重置</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-left:auto;display:flex;gap:8px;">
|
||||
<button class="btn btn-default" onclick="showToast('导出任务已创建')">导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="showToast('暂无导出任务')">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">员工排查统计</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>单位名称</th>
|
||||
<th>部门名称</th>
|
||||
<th>总计积分</th>
|
||||
<th>连续签到天数</th>
|
||||
<th>最新签到时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 按月导出弹窗 -->
|
||||
<div class="modal-mask" id="exportModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3>按月导出</h3>
|
||||
<button class="modal__close" onclick="closeModal('exportModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>开始月份 <span style="color:var(--danger)">*</span></label>
|
||||
<input class="form-control" id="exportStart" type="month" value="2026-01">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>结束月份 <span style="color:var(--danger)">*</span></label>
|
||||
<input class="form-control" id="exportEnd" type="month" value="2026-05">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('exportModal')">取消</button>
|
||||
<button class="btn btn-primary" onclick="doExport()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 打卡记录弹窗 -->
|
||||
<div class="modal-mask" id="recordModal">
|
||||
<div class="modal modal-lg">
|
||||
<div class="modal__header">
|
||||
<h3>打卡记录</h3>
|
||||
<button class="modal__close" onclick="closeModal('recordModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="info-card" id="recordInfoCard"></div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>打卡时间</th>
|
||||
<th>增加积分</th>
|
||||
<th>完成状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="recordTbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('recordModal')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查看问卷弹窗 -->
|
||||
<div class="modal-mask" id="surveyModal">
|
||||
<div class="modal modal-lg">
|
||||
<div class="modal__header">
|
||||
<h3>问卷详情</h3>
|
||||
<button class="modal__close" onclick="closeModal('surveyModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body" style="padding:0;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>问题分类</th>
|
||||
<th>问题描述</th>
|
||||
<th>员工选项</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="surveyTbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('surveyModal')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></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');})();
|
||||
|
||||
var orgTree=[
|
||||
{label:'长庆油田公司',children:['采油一厂','采油二厂','采油三厂','采气一厂','输油处']},
|
||||
{label:'西安分公司',children:['技术中心','信息中心','后勤服务中心']},
|
||||
{label:'庆阳分公司',children:['生产运行部','安全环保部','人力资源部']}
|
||||
];
|
||||
|
||||
var employees=[
|
||||
{name:'张伟',code:'CQ10021',unit:'长庆油田公司',dept:'采油一厂',score:186,days:32,lastTime:'2026-05-13 07:45'},
|
||||
{name:'李娜',code:'CQ10035',unit:'长庆油田公司',dept:'采油二厂',score:152,days:18,lastTime:'2026-05-13 08:02'},
|
||||
{name:'王强',code:'CQ10048',unit:'长庆油田公司',dept:'采气一厂',score:210,days:45,lastTime:'2026-05-12 07:30'},
|
||||
{name:'赵敏',code:'XA20012',unit:'西安分公司',dept:'技术中心',score:98,days:12,lastTime:'2026-05-13 08:15'},
|
||||
{name:'刘洋',code:'XA20025',unit:'西安分公司',dept:'信息中心',score:134,days:22,lastTime:'2026-05-11 07:55'},
|
||||
{name:'陈静',code:'QY30008',unit:'庆阳分公司',dept:'生产运行部',score:167,days:28,lastTime:'2026-05-13 07:38'},
|
||||
{name:'周磊',code:'QY30015',unit:'庆阳分公司',dept:'安全环保部',score:78,days:8,lastTime:'2026-05-10 08:20'},
|
||||
{name:'孙丽',code:'CQ10062',unit:'长庆油田公司',dept:'输油处',score:145,days:20,lastTime:'2026-05-12 08:10'}
|
||||
];
|
||||
|
||||
var checkRecords=[
|
||||
{time:'2026-05-13 07:45',score:5,status:'已完成'},
|
||||
{time:'2026-05-12 07:42',score:5,status:'已完成'},
|
||||
{time:'2026-05-11 07:50',score:5,status:'已完成'},
|
||||
{time:'2026-05-10 07:38',score:3,status:'部分完成'},
|
||||
{time:'2026-05-09 07:55',score:5,status:'已完成'},
|
||||
{time:'2026-05-08 08:01',score:5,status:'已完成'}
|
||||
];
|
||||
|
||||
var surveyAnswers=[
|
||||
{cat:'饮食习惯',desc:'今天是否按时吃早餐？',answer:'是'},
|
||||
{cat:'饮食习惯',desc:'今天饮水量是否达到1500ml？',answer:'是'},
|
||||
{cat:'运动锻炼',desc:'今天是否进行了30分钟以上运动？',answer:'否'},
|
||||
{cat:'睡眠质量',desc:'昨晚睡眠时间是否达到7小时？',answer:'是'},
|
||||
{cat:'心理状态',desc:'今天是否感到焦虑或压力过大？',answer:'否'}
|
||||
];
|
||||
|
||||
// 初始化单位下拉
|
||||
function initUnitSelect(){
|
||||
var s=document.getElementById('filterUnit');
|
||||
s.innerHTML='<option value="">选择单位</option>';
|
||||
orgTree.forEach(function(o){s.innerHTML+='<option>'+o.label+'</option>';});
|
||||
}
|
||||
function onUnitChange(){
|
||||
var s1=document.getElementById('filterUnit'),s2=document.getElementById('filterDept');
|
||||
s2.innerHTML='<option value="">请选择</option>';
|
||||
if(!s1.value)return;
|
||||
var node=orgTree.find(function(o){return o.label===s1.value;});
|
||||
if(node)node.children.forEach(function(d){s2.innerHTML+='<option>'+d+'</option>';});
|
||||
}
|
||||
|
||||
function renderTable(data){
|
||||
var html='';
|
||||
data.forEach(function(e,i){
|
||||
var idx=employees.indexOf(e);
|
||||
html+='<tr>';
|
||||
html+='<td>'+e.name+'</td>';
|
||||
html+='<td>'+e.code+'</td>';
|
||||
html+='<td>'+e.unit+'</td>';
|
||||
html+='<td>'+e.dept+'</td>';
|
||||
html+='<td style="font-weight:600;color:var(--primary);">'+e.score+'</td>';
|
||||
html+='<td>'+e.days+'天</td>';
|
||||
html+='<td>'+e.lastTime+'</td>';
|
||||
html+='<td><span class="link" onclick="openExportModal('+idx+')">按月导出</span>';
|
||||
html+='<span style="color:var(--border);margin:0 6px;">|</span>';
|
||||
html+='<span class="link" onclick="openRecordModal('+idx+')">打卡记录</span></td>';
|
||||
html+='</tr>';
|
||||
});
|
||||
document.getElementById('tbody').innerHTML=html||'<tr><td colspan="8" style="text-align:center;padding:40px;color:var(--text-placeholder);">暂无数据</td></tr>';
|
||||
}
|
||||
|
||||
function filterTable(){
|
||||
var name=document.getElementById('filterName').value.trim();
|
||||
var code=document.getElementById('filterCode').value.trim();
|
||||
var unit=document.getElementById('filterUnit').value;
|
||||
var dept=document.getElementById('filterDept').value;
|
||||
var filtered=employees.filter(function(e){
|
||||
if(name&&e.name.indexOf(name)===-1)return false;
|
||||
if(code&&e.code.indexOf(code)===-1)return false;
|
||||
if(unit&&e.unit!==unit)return false;
|
||||
if(dept&&e.dept!==dept)return false;
|
||||
return true;
|
||||
});
|
||||
renderTable(filtered);
|
||||
}
|
||||
function resetFilter(){
|
||||
document.getElementById('filterName').value='';
|
||||
document.getElementById('filterCode').value='';
|
||||
document.getElementById('filterUnit').value='';
|
||||
document.getElementById('filterDept').innerHTML='<option value="">选择部门</option>';
|
||||
renderTable(employees);
|
||||
}
|
||||
|
||||
function openExportModal(){document.getElementById('exportModal').classList.add('show');}
|
||||
function doExport(){
|
||||
closeModal('exportModal');
|
||||
showToast('导出成功');
|
||||
}
|
||||
|
||||
function openRecordModal(idx){
|
||||
var e=employees[idx];
|
||||
var card=document.getElementById('recordInfoCard');
|
||||
card.innerHTML='<div class="info-card__item"><span class="info-card__label">姓名</span><span class="info-card__value">'+e.name+'</span></div>'
|
||||
+'<div class="info-card__item"><span class="info-card__label">员工编号</span><span class="info-card__value">'+e.code+'</span></div>'
|
||||
+'<div class="info-card__item"><span class="info-card__label">单位</span><span class="info-card__value">'+e.unit+'</span></div>'
|
||||
+'<div class="info-card__item"><span class="info-card__label">部门</span><span class="info-card__value">'+e.dept+'</span></div>'
|
||||
+'<div class="info-card__item"><span class="info-card__label">总积分</span><span class="info-card__value">'+e.score+'</span></div>'
|
||||
+'<div class="info-card__item"><span class="info-card__label">连续签到</span><span class="info-card__value">'+e.days+'天</span></div>';
|
||||
var html='';
|
||||
checkRecords.forEach(function(r,i){
|
||||
var statusColor=r.status==='已完成'?'var(--success)':'var(--warning)';
|
||||
html+='<tr>';
|
||||
html+='<td>'+r.time+'</td>';
|
||||
html+='<td>+'+r.score+'</td>';
|
||||
html+='<td><span style="color:'+statusColor+'">'+r.status+'</span></td>';
|
||||
html+='<td><span class="link" onclick="openSurveyModal()">查看问卷</span></td>';
|
||||
html+='</tr>';
|
||||
});
|
||||
document.getElementById('recordTbody').innerHTML=html;
|
||||
document.getElementById('recordModal').classList.add('show');
|
||||
}
|
||||
|
||||
function openSurveyModal(){
|
||||
var html='';
|
||||
surveyAnswers.forEach(function(s){
|
||||
html+='<tr><td>'+s.cat+'</td><td>'+s.desc+'</td><td>'+s.answer+'</td></tr>';
|
||||
});
|
||||
document.getElementById('surveyTbody').innerHTML=html;
|
||||
document.getElementById('surveyModal').classList.add('show');
|
||||
}
|
||||
|
||||
function closeModal(id){document.getElementById(id).classList.remove('show');}
|
||||
function showToast(msg){
|
||||
var t=document.getElementById('toast');
|
||||
t.textContent=msg;t.classList.add('show');
|
||||
setTimeout(function(){t.classList.remove('show');},2000);
|
||||
}
|
||||
|
||||
// 初始化
|
||||
initUnitSelect();
|
||||
renderTable(employees);
|
||||
|
||||
document.querySelectorAll('.modal-mask').forEach(function(m){
|
||||
m.addEventListener('click',function(e){if(e.target===m)m.classList.remove('show');});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,296 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{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);}
|
||||
/* 工具栏 */
|
||||
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;background:#fff;color:var(--text-primary);transition:all .15s;}
|
||||
.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.btn--primary:hover{background:#40a9ff;border-color:#40a9ff;}
|
||||
/* 表格 */
|
||||
.table-wrap{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.tree-table{width:100%;border-collapse:collapse;font-size:var(--font-sm);}
|
||||
.tree-table th{background:#FAFBFC;font-weight:500;color:var(--text-secondary);text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);}
|
||||
.tree-table td{padding:12px 16px;border-bottom:1px solid #f0f0f0;vertical-align:middle;}
|
||||
.tree-table tbody tr:hover{background:#FAFBFC;}
|
||||
.col-expand{width:40px;}
|
||||
.col-name{min-width:240px;}
|
||||
.col-sort{width:200px;text-align:center!important;}
|
||||
.col-action{width:220px;text-align:right!important;}
|
||||
.tree-table td.col-sort{text-align:center;}
|
||||
.tree-table td.col-action{text-align:right;}
|
||||
/* 展开按钮 */
|
||||
.expand-btn{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:transform .2s;border:none;background:none;font-size:16px;}
|
||||
.expand-btn.open{transform:rotate(90deg);}
|
||||
.expand-btn.hidden{visibility:hidden;}
|
||||
/* 子行缩进 */
|
||||
.row-child .cell-name{padding-left:32px;}
|
||||
.row-child{display:none;}
|
||||
.row-child.visible{display:table-row;}
|
||||
/* 操作链接 */
|
||||
.action-link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);margin-left:16px;background:none;border:none;text-decoration:none;}
|
||||
.action-link:hover{color:#40a9ff;}
|
||||
.action-link.danger{color:var(--danger);}
|
||||
.action-link.danger:hover{color:#ff7875;}
|
||||
/* 弹窗 */
|
||||
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);width:480px;max-width:90vw;box-shadow:0 8px 32px rgba(0,0,0,.15);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);}
|
||||
.modal__close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:var(--text-placeholder);font-size:18px;transition:all .15s;border:none;background:none;}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
.form-group{margin-bottom:16px;}
|
||||
.form-group:last-child{margin-bottom:0;}
|
||||
.form-group label{display:block;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:6px;}
|
||||
.form-group label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-group .form-control{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;box-sizing:border-box;}
|
||||
.form-group .form-control:focus{border-color:var(--primary);}
|
||||
.form-group select.form-control{appearance: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 12px center;padding-right:32px;cursor:pointer;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px 0;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.pagination__pages{display:flex;align-items:center;gap:4px;}
|
||||
.page-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;}
|
||||
.page-item:hover{color:var(--primary);}
|
||||
.page-item.active{background:var(--primary);color:#fff;}
|
||||
.pagination__size{cursor:pointer;}
|
||||
.jump-input{width:40px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;font-size:var(--font-sm);outline:none;}
|
||||
.jump-input:focus{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>
|
||||
<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-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__body">
|
||||
<a href="survey-category.html" class="sidebar-item active">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<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="record-user.html" class="sidebar-item">用户排查</a>
|
||||
<a href="record-dept.html" class="sidebar-item">部门排查</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>分类名称</label>
|
||||
<input class="filter-input" placeholder="请输入分类名称">
|
||||
</div>
|
||||
<button class="btn btn--primary" onclick="alert('查询')"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.5"/><path d="M10.5 10.5l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 查询</button>
|
||||
<button class="btn" onclick="alert('重置')">重置</button>
|
||||
</div>
|
||||
<!-- 操作栏 -->
|
||||
<div class="toolbar">
|
||||
<button class="btn btn--primary" onclick="openModal()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg> 新增</button>
|
||||
</div>
|
||||
<!-- 树状表格 -->
|
||||
<div class="table-wrap">
|
||||
<table class="tree-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-expand"></th>
|
||||
<th class="col-name">分类名称</th>
|
||||
<th class="col-sort">分类排序</th>
|
||||
<th class="col-action">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="treeBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span class="pagination__total">共 12 条数据</span>
|
||||
<div class="pagination__pages">
|
||||
<span class="page-item active">1</span>
|
||||
<span class="page-item">2</span>
|
||||
<span class="page-item next">></span>
|
||||
</div>
|
||||
<div class="pagination__size">10条/页 ▾</div>
|
||||
<div class="pagination__jump">跳至 <input type="text" class="jump-input"> 页</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增分类弹窗 -->
|
||||
<div class="modal-mask" id="addModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__title">新增分类</span>
|
||||
<button class="modal__close" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-group">
|
||||
<label>分类名称 <span class="required">*</span></label>
|
||||
<input type="text" class="form-control" placeholder="请输入分类名称">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>分类排序</label>
|
||||
<input type="text" class="form-control" placeholder="请输入排序号">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>所属分类</label>
|
||||
<select class="form-control">
|
||||
<option value="">无（作为一级分类）</option>
|
||||
<option value="1">夯实四大健康基石</option>
|
||||
<option value="2">提升健康素养</option>
|
||||
<option value="3">监测重点指标</option>
|
||||
<option value="4">参与单位活动</option>
|
||||
<option value="5">消减危险因素</option>
|
||||
<option value="6">控降风险级别</option>
|
||||
<option value="7">消减异常源头</option>
|
||||
<option value="8">控降异常结果</option>
|
||||
<option value="9">慢病就诊用药</option>
|
||||
<option value="10">控降慢病指标</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn--primary" onclick="alert('保存成功');closeModal()">确定</button>
|
||||
</div>
|
||||
</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');})();
|
||||
|
||||
// 树状数据
|
||||
var treeData = [
|
||||
{id:1, name:'夯实四大健康基石', sort:1, children:[
|
||||
{id:101, name:'合理膳食', sort:1},
|
||||
{id:102, name:'适量运动', sort:2},
|
||||
{id:103, name:'戒烟限酒', sort:3},
|
||||
{id:104, name:'心理平衡', sort:4}
|
||||
]},
|
||||
{id:2, name:'提升健康素养', sort:2, children:[
|
||||
{id:201, name:'健康知识掌握', sort:1},
|
||||
{id:202, name:'健康行为养成', sort:2}
|
||||
]},
|
||||
{id:3, name:'监测重点指标', sort:3, children:[]},
|
||||
{id:4, name:'参与单位活动', sort:4, children:[]},
|
||||
{id:5, name:'消减危险因素', sort:5, children:[]},
|
||||
{id:6, name:'控降风险级别', sort:6, children:[]},
|
||||
{id:7, name:'消减异常源头', sort:7, children:[]},
|
||||
{id:8, name:'控降异常结果', sort:8, children:[]},
|
||||
{id:9, name:'慢病就诊用药', sort:9, children:[]},
|
||||
{id:10, name:'控降慢病指标', sort:10, children:[]}
|
||||
];
|
||||
|
||||
function renderTree(){
|
||||
var tbody = document.getElementById('treeBody');
|
||||
var html = '';
|
||||
treeData.forEach(function(item){
|
||||
var hasChild = item.children && item.children.length > 0;
|
||||
html += '<tr class="row-parent" data-id="'+item.id+'">';
|
||||
html += '<td class="col-expand"><button class="expand-btn'+(hasChild?'':' hidden')+'" onclick="toggleRow(this,'+item.id+')">+</button></td>';
|
||||
html += '<td class="col-name">'+item.name+'</td>';
|
||||
html += '<td class="col-sort">'+item.sort+'</td>';
|
||||
html += '<td class="col-action">';
|
||||
html += '<a class="action-link" onclick="alert(\'添加下级: '+item.name+'\')">添加下级</a>';
|
||||
html += '<a class="action-link" onclick="alert(\'编辑: '+item.name+'\')">编辑</a>';
|
||||
html += '<a class="action-link danger" onclick="alert(\'删除: '+item.name+'\')">删除</a>';
|
||||
html += '</td></tr>';
|
||||
if(hasChild){
|
||||
item.children.forEach(function(child){
|
||||
html += '<tr class="row-child" data-parent="'+item.id+'">';
|
||||
html += '<td class="col-expand"></td>';
|
||||
html += '<td class="col-name"><span class="cell-name">'+child.name+'</span></td>';
|
||||
html += '<td class="col-sort">'+child.sort+'</td>';
|
||||
html += '<td class="col-action">';
|
||||
html += '<a class="action-link" onclick="alert(\'编辑: '+child.name+'\')">编辑</a>';
|
||||
html += '<a class="action-link danger" onclick="alert(\'删除: '+child.name+'\')">删除</a>';
|
||||
html += '</td></tr>';
|
||||
});
|
||||
}
|
||||
});
|
||||
tbody.innerHTML = html;
|
||||
}
|
||||
|
||||
function toggleRow(btn, parentId){
|
||||
var isOpen = btn.classList.toggle('open');
|
||||
btn.textContent = isOpen ? '−' : '+';
|
||||
var rows = document.querySelectorAll('tr[data-parent="'+parentId+'"]');
|
||||
rows.forEach(function(r){ r.classList.toggle('visible', isOpen); });
|
||||
}
|
||||
|
||||
function openModal(){ document.getElementById('addModal').classList.add('show'); }
|
||||
function closeModal(){ document.getElementById('addModal').classList.remove('show'); }
|
||||
|
||||
renderTree();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,431 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap;background:#fff;padding:16px 24px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item__label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-bar .form-control{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:140px;}
|
||||
.filter-bar .form-control:focus{border-color:var(--primary);}
|
||||
/* 级联下拉 */
|
||||
.cascade-select{position:relative;display:inline-block;}
|
||||
.cascade-select__trigger{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);background:#fff;cursor:pointer;display:flex;align-items:center;min-width:180px;color:var(--text-primary);user-select:none;}
|
||||
.cascade-select__trigger.placeholder{color:var(--text-placeholder);}
|
||||
.cascade-select__trigger::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-top:5px solid #999;}
|
||||
.cascade-select__panel{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:300;display:none;white-space:nowrap;}
|
||||
.cascade-select__panel.show{display:flex;}
|
||||
.cascade-select__col{min-width:140px;max-height:260px;overflow-y:auto;border-right:1px solid var(--border);padding:6px 0;}
|
||||
.cascade-select__col:last-child{border-right:none;}
|
||||
.cascade-select__opt{padding:8px 16px;font-size:var(--font-sm);cursor:pointer;transition:background .1s;}
|
||||
.cascade-select__opt:hover{background:#F5F7FA;}
|
||||
.cascade-select__opt.active{color:var(--primary);background:var(--primary-light);}
|
||||
/* 问题选项 */
|
||||
.option-list{display:flex;flex-direction:column;gap:8px;}
|
||||
.option-item{display:flex;align-items:center;gap:8px;}
|
||||
.option-item input{flex:1;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);outline:none;}
|
||||
.option-item input:focus{border-color:var(--primary);}
|
||||
.option-item .btn-icon{width:28px;height:28px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .15s;}
|
||||
.option-item .btn-icon:hover{background:#FFF1F0;color:var(--danger);}
|
||||
.btn-add-option{display:inline-flex;align-items:center;gap:4px;color:var(--primary);font-size:var(--font-sm);cursor:pointer;padding:4px 0;border:none;background:none;}
|
||||
.btn-add-option:hover{color:#40a9ff;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-gray{background:#F5F5F5;color:#666;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
.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:640px;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);}
|
||||
.modal__close:hover{background:#f5f5f5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
|
||||
.form-group label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.form-group .form-control{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-group .form-control:focus{border-color:var(--primary);}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;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-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__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item active">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<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="record-user.html" class="sidebar-item">用户排查</a>
|
||||
<a href="record-dept.html" class="sidebar-item">部门排查</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">问题分类</span>
|
||||
<div class="cascade-select" id="filterCascade">
|
||||
<div class="cascade-select__trigger placeholder" onclick="toggleCascade('filterCascade')">请选择分类</div>
|
||||
<div class="cascade-select__panel" id="filterPanel">
|
||||
<div class="cascade-select__col" id="filterCol1"></div>
|
||||
<div class="cascade-select__col" id="filterCol2" style="display:none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">问题描述</span>
|
||||
<input class="form-control" id="filterDesc" placeholder="请输入关键词" style="width:200px;">
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="filterTable()">查询</button>
|
||||
<button class="btn btn-default" onclick="resetFilter()">重置</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">问题列表</span>
|
||||
<button class="btn btn-primary" onclick="openModal(null)">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
新增
|
||||
</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>问题分类</th>
|
||||
<th>问题描述</th>
|
||||
<th>问题类型</th>
|
||||
<th>问题排序</th>
|
||||
<th>是否必填</th>
|
||||
<th>频次</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<div class="modal-mask" id="editModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3 id="modalTitle">新增问题</h3>
|
||||
<button class="modal__close" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-group">
|
||||
<label>问题分类 <span style="color:var(--danger)">*</span></label>
|
||||
<div class="cascade-select" id="editCascade">
|
||||
<div class="cascade-select__trigger placeholder" onclick="toggleCascade('editCascade')">请选择分类</div>
|
||||
<div class="cascade-select__panel" id="editPanel">
|
||||
<div class="cascade-select__col" id="editCol1"></div>
|
||||
<div class="cascade-select__col" id="editCol2" style="display:none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>问题描述 <span style="color:var(--danger)">*</span></label>
|
||||
<input class="form-control" id="editDesc" placeholder="请输入问题描述">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>问题类型 <span style="color:var(--danger)">*</span></label>
|
||||
<select class="form-control" id="editType" onchange="onTypeChange()">
|
||||
<option>单选</option>
|
||||
<option>多选</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>问题排序</label>
|
||||
<input class="form-control" id="editSort" type="number" placeholder="数字越小越靠前" min="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>问题选项 <span style="color:var(--danger)">*</span></label>
|
||||
<div class="option-list" id="optionList"></div>
|
||||
<button class="btn-add-option" id="btnAddOption" onclick="addOption()" style="display:none;">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
添加选项
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>是否必填</label>
|
||||
<select class="form-control" id="editRequired">
|
||||
<option value="是">是</option>
|
||||
<option value="否">否</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>频次 <span style="color:var(--danger)">*</span></label>
|
||||
<select class="form-control" id="editFreq">
|
||||
<option>每日</option>
|
||||
<option>每周</option>
|
||||
<option>每月</option>
|
||||
<option>每季</option>
|
||||
<option>每半年</option>
|
||||
<option>每年</option>
|
||||
<option>自定义时间</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveQuestion()">确定</button>
|
||||
</div>
|
||||
</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');})();
|
||||
|
||||
var categoryTree=[
|
||||
{label:'生活习惯',children:['饮食习惯','运动锻炼','睡眠质量','体重管理']},
|
||||
{label:'心理健康',children:['心理状态','压力管理','情绪调节']},
|
||||
{label:'疾病管理',children:['慢病管理','用药提醒','康复训练']},
|
||||
{label:'职业防护',children:['职业健康','劳动防护','职业禁忌']}
|
||||
];
|
||||
|
||||
var questions=[
|
||||
{cat1:'生活习惯',cat2:'饮食习惯',desc:'今天是否按时吃早餐？',type:'单选',sort:1,required:'是',freq:'每日',options:['是','否']},
|
||||
{cat1:'生活习惯',cat2:'饮食习惯',desc:'今天饮水量是否达到1500ml？',type:'单选',sort:2,required:'是',freq:'每日',options:['是','否']},
|
||||
{cat1:'生活习惯',cat2:'运动锻炼',desc:'今天是否进行了30分钟以上运动？',type:'单选',sort:3,required:'是',freq:'每日',options:['是','否']},
|
||||
{cat1:'生活习惯',cat2:'睡眠质量',desc:'昨晚睡眠时间是否达到7小时？',type:'单选',sort:4,required:'是',freq:'每日',options:['是','否']},
|
||||
{cat1:'心理健康',cat2:'心理状态',desc:'今天是否感到焦虑或压力过大？',type:'单选',sort:5,required:'否',freq:'每周',options:['是','否']},
|
||||
{cat1:'心理健康',cat2:'压力管理',desc:'本周是否进行了放松训练？',type:'多选',sort:6,required:'否',freq:'每周',options:['冥想','运动','阅读','听音乐','其他']},
|
||||
{cat1:'疾病管理',cat2:'慢病管理',desc:'今天是否按时服药？',type:'单选',sort:7,required:'是',freq:'每日',options:['是','否']},
|
||||
{cat1:'职业防护',cat2:'职业健康',desc:'今天工作中是否佩戴了防护用品？',type:'单选',sort:8,required:'是',freq:'每日',options:['是','否']},
|
||||
{cat1:'职业防护',cat2:'劳动防护',desc:'本月是否参加了安全培训？',type:'单选',sort:9,required:'否',freq:'每月',options:['是','否']}
|
||||
];
|
||||
|
||||
var editingIdx=null;
|
||||
var currentOptions=[];
|
||||
|
||||
/* ===== 级联选择 ===== */
|
||||
var cascadeState={filterCascade:{cat1:'',cat2:''},editCascade:{cat1:'',cat2:''}};
|
||||
|
||||
function toggleCascade(id){
|
||||
var panel=document.getElementById(id==='filterCascade'?'filterPanel':'editPanel');
|
||||
var isShow=panel.classList.contains('show');
|
||||
closeAllCascade();
|
||||
if(!isShow){panel.classList.add('show');renderCascadeCol1(id);}
|
||||
}
|
||||
function closeAllCascade(){
|
||||
document.querySelectorAll('.cascade-select__panel').forEach(function(p){p.classList.remove('show');});
|
||||
}
|
||||
function renderCascadeCol1(id){
|
||||
var col1=document.getElementById(id==='filterCascade'?'filterCol1':'editCol1');
|
||||
var col2=document.getElementById(id==='filterCascade'?'filterCol2':'editCol2');
|
||||
var state=cascadeState[id];
|
||||
var html='';
|
||||
categoryTree.forEach(function(c){
|
||||
html+='<div class="cascade-select__opt'+(state.cat1===c.label?' active':'')+'" onclick="selectCat1(\''+id+'\',\''+c.label+'\')">'+c.label+'</div>';
|
||||
});
|
||||
col1.innerHTML=html;
|
||||
if(state.cat1){renderCascadeCol2(id);}else{col2.style.display='none';}
|
||||
}
|
||||
function renderCascadeCol2(id){
|
||||
var col2=document.getElementById(id==='filterCascade'?'filterCol2':'editCol2');
|
||||
var state=cascadeState[id];
|
||||
var node=categoryTree.find(function(c){return c.label===state.cat1;});
|
||||
if(!node){col2.style.display='none';return;}
|
||||
col2.style.display='';
|
||||
var html='';
|
||||
node.children.forEach(function(ch){
|
||||
html+='<div class="cascade-select__opt'+(state.cat2===ch?' active':'')+'" onclick="selectCat2(\''+id+'\',\''+ch+'\')">'+ch+'</div>';
|
||||
});
|
||||
col2.innerHTML=html;
|
||||
}
|
||||
function selectCat1(id,val){
|
||||
cascadeState[id].cat1=val;cascadeState[id].cat2='';
|
||||
renderCascadeCol1(id);
|
||||
}
|
||||
function selectCat2(id,val){
|
||||
cascadeState[id].cat2=val;
|
||||
var trigger=document.querySelector('#'+id+' .cascade-select__trigger');
|
||||
trigger.textContent=cascadeState[id].cat1+' / '+val;
|
||||
trigger.classList.remove('placeholder');
|
||||
closeAllCascade();
|
||||
}
|
||||
function setCascadeValue(id,cat1,cat2){
|
||||
cascadeState[id]={cat1:cat1,cat2:cat2};
|
||||
var trigger=document.querySelector('#'+id+' .cascade-select__trigger');
|
||||
if(cat1&&cat2){trigger.textContent=cat1+' / '+cat2;trigger.classList.remove('placeholder');}
|
||||
else{trigger.textContent='请选择分类';trigger.classList.add('placeholder');}
|
||||
}
|
||||
|
||||
/* ===== 问题选项 ===== */
|
||||
function renderOptions(){
|
||||
var list=document.getElementById('optionList');
|
||||
var html='';
|
||||
currentOptions.forEach(function(opt,i){
|
||||
html+='<div class="option-item">';
|
||||
html+='<input value="'+opt+'" onchange="currentOptions['+i+']=this.value">';
|
||||
html+='<button class="btn-icon" onclick="removeOption('+i+')" title="删除"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>';
|
||||
html+='</div>';
|
||||
});
|
||||
list.innerHTML=html;
|
||||
document.getElementById('btnAddOption').style.display='';
|
||||
}
|
||||
function addOption(){currentOptions.push('选项'+(currentOptions.length+1));renderOptions();}
|
||||
function removeOption(i){if(currentOptions.length<=2)return;currentOptions.splice(i,1);renderOptions();}
|
||||
function onTypeChange(){
|
||||
var type=document.getElementById('editType').value;
|
||||
if(type==='单选'){currentOptions=['是','否'];}
|
||||
renderOptions();
|
||||
}
|
||||
|
||||
/* ===== 表格 ===== */
|
||||
function renderTable(data){
|
||||
var html='';
|
||||
data.forEach(function(q){
|
||||
var idx=questions.indexOf(q);
|
||||
html+='<tr>';
|
||||
html+='<td>'+q.cat1+' / '+q.cat2+'</td>';
|
||||
html+='<td>'+q.desc+'</td>';
|
||||
html+='<td><span class="tag '+(q.type==='单选'?'tag-blue':'tag-green')+'">'+q.type+'</span></td>';
|
||||
html+='<td>'+q.sort+'</td>';
|
||||
html+='<td>'+q.required+'</td>';
|
||||
html+='<td>'+q.freq+'</td>';
|
||||
html+='<td><span class="link" onclick="openModal('+idx+')">编辑</span>';
|
||||
html+='<span style="color:var(--border);margin:0 6px;">|</span>';
|
||||
html+='<span class="link" style="color:var(--danger);">删除</span></td>';
|
||||
html+='</tr>';
|
||||
});
|
||||
document.getElementById('tbody').innerHTML=html||'<tr><td colspan="7" style="text-align:center;padding:40px;color:var(--text-placeholder);">暂无数据</td></tr>';
|
||||
}
|
||||
|
||||
function filterTable(){
|
||||
var state=cascadeState.filterCascade;
|
||||
var desc=document.getElementById('filterDesc').value.trim().toLowerCase();
|
||||
var filtered=questions.filter(function(q){
|
||||
if(state.cat1&&q.cat1!==state.cat1)return false;
|
||||
if(state.cat2&&q.cat2!==state.cat2)return false;
|
||||
if(desc&&q.desc.toLowerCase().indexOf(desc)===-1)return false;
|
||||
return true;
|
||||
});
|
||||
renderTable(filtered);
|
||||
}
|
||||
function resetFilter(){
|
||||
setCascadeValue('filterCascade','','');
|
||||
document.getElementById('filterDesc').value='';
|
||||
renderTable(questions);
|
||||
}
|
||||
|
||||
/* ===== 弹窗 ===== */
|
||||
function openModal(idx){
|
||||
editingIdx=idx;
|
||||
if(idx===null){
|
||||
document.getElementById('modalTitle').textContent='新增问题';
|
||||
setCascadeValue('editCascade','','');
|
||||
document.getElementById('editDesc').value='';
|
||||
document.getElementById('editType').value='单选';
|
||||
document.getElementById('editSort').value='';
|
||||
document.getElementById('editRequired').value='是';
|
||||
document.getElementById('editFreq').value='每日';
|
||||
currentOptions=['是','否'];
|
||||
}else{
|
||||
var q=questions[idx];
|
||||
document.getElementById('modalTitle').textContent='编辑问题';
|
||||
setCascadeValue('editCascade',q.cat1,q.cat2);
|
||||
document.getElementById('editDesc').value=q.desc;
|
||||
document.getElementById('editType').value=q.type;
|
||||
document.getElementById('editSort').value=q.sort;
|
||||
document.getElementById('editRequired').value=q.required;
|
||||
document.getElementById('editFreq').value=q.freq;
|
||||
currentOptions=q.options.slice();
|
||||
}
|
||||
renderOptions();
|
||||
document.getElementById('editModal').classList.add('show');
|
||||
}
|
||||
function closeModal(){document.getElementById('editModal').classList.remove('show');closeAllCascade();}
|
||||
function saveQuestion(){closeModal();}
|
||||
|
||||
// 初始化
|
||||
renderTable(questions);
|
||||
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('.cascade-select'))closeAllCascade();
|
||||
});
|
||||
document.getElementById('editModal').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,138 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.score-wrap{display:flex;align-items:center;justify-content:center;height:calc(100vh - 56px - 48px);}
|
||||
.score-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:40px 48px;width:480px;}
|
||||
.score-card__title{font-size:var(--font-lg);font-weight:600;margin-bottom:32px;text-align:center;}
|
||||
.score-form-group{margin-bottom:24px;}
|
||||
.score-form-group label{display:block;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;}
|
||||
.score-form-group .score-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 14px;font-size:var(--font-sm);outline:none;transition:border-color .2s;}
|
||||
.score-form-group .score-input:focus{border-color:var(--primary);}
|
||||
.score-form-group .score-hint{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:6px;}
|
||||
.score-actions{display:flex;gap:12px;justify-content:center;margin-top:36px;}
|
||||
.score-actions .btn{height:40px;padding:0 28px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;}
|
||||
.score-actions .btn-primary{background:var(--primary);color:#fff;}
|
||||
.score-actions .btn-primary:hover{background:#40a9ff;}
|
||||
.score-actions .btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.score-actions .btn-default:hover{color:var(--primary);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>
|
||||
<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-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__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item active">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<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="record-user.html" class="sidebar-item">用户排查</a>
|
||||
<a href="record-dept.html" class="sidebar-item">部门排查</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="score-wrap">
|
||||
<div class="score-card">
|
||||
<div class="score-card__title">积分规则设置</div>
|
||||
<div class="score-form-group">
|
||||
<label>积分奖励起始值</label>
|
||||
<input class="score-input" type="number" value="10" min="0">
|
||||
<div class="score-hint">用户首次完成排查获得的基础积分</div>
|
||||
</div>
|
||||
<div class="score-form-group">
|
||||
<label>积分奖励递增值</label>
|
||||
<input class="score-input" type="number" value="5" min="0">
|
||||
<div class="score-hint">连续完成排查时每次递增的积分数</div>
|
||||
</div>
|
||||
<div class="score-form-group">
|
||||
<label>积分奖励最大值</label>
|
||||
<input class="score-input" type="number" value="50" min="0">
|
||||
<div class="score-hint">单次排查可获得的积分上限</div>
|
||||
</div>
|
||||
<div class="score-actions">
|
||||
<button class="btn btn-primary" onclick="saveScore()">保存</button>
|
||||
<button class="btn btn-default" onclick="resetScore()">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
var defaults={start:10,step:5,max:50};
|
||||
function saveScore(){alert('保存成功');}
|
||||
function resetScore(){
|
||||
var inputs=document.querySelectorAll('.score-input');
|
||||
inputs[0].value=defaults.start;
|
||||
inputs[1].value=defaults.step;
|
||||
inputs[2].value=defaults.max;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,490 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-gray{background:#F5F5F5;color:#666;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
/* 弹窗 */
|
||||
.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:640px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
|
||||
.modal-lg{width:860px;}
|
||||
.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);}
|
||||
.modal__close:hover{background:#f5f5f5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
|
||||
.form-group label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.form-control{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-control:focus{border-color:var(--primary);}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
|
||||
/* 多选标签 */
|
||||
.tag-select{border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;min-height:36px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;cursor:text;position:relative;}
|
||||
.tag-select:focus-within{border-color:var(--primary);}
|
||||
.tag-select__tag{display:inline-flex;align-items:center;gap:4px;background:var(--primary-light);color:var(--primary);padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-xs);}
|
||||
.tag-select__tag .tag-remove{cursor:pointer;font-size:14px;line-height:1;}
|
||||
.tag-select__tag .tag-remove:hover{color:var(--danger);}
|
||||
.tag-select__input{border:none;outline:none;font-size:var(--font-sm);flex:1;min-width:80px;padding:0;}
|
||||
.tag-select__dropdown{position:absolute;top:100%;left:-1px;right:-1px;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:300;max-height:260px;overflow-y:auto;display:none;padding:8px 0;}
|
||||
.tag-select__dropdown.show{display:block;}
|
||||
/* 树状节点 */
|
||||
.tree-node{user-select:none;}
|
||||
.tree-node__header{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .1s;border-radius:var(--radius-sm);margin:0 4px;}
|
||||
.tree-node__header:hover{background:#F5F7FA;}
|
||||
.tree-node__arrow{width:12px;height:12px;transition:transform .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
|
||||
.tree-node__arrow svg{width:10px;height:10px;}
|
||||
.tree-node__arrow.expanded{transform:rotate(90deg);}
|
||||
.tree-node__arrow.hidden{visibility:hidden;}
|
||||
.tree-node__checkbox{width:16px;height:16px;border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
|
||||
.tree-node__checkbox.checked{background:var(--primary);border-color:var(--primary);}
|
||||
.tree-node__checkbox.checked::after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-2px;}
|
||||
.tree-node__checkbox.indeterminate{border-color:var(--primary);}
|
||||
.tree-node__checkbox.indeterminate::after{content:'';width:8px;height:2px;background:var(--primary);}
|
||||
.tree-node__label{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.tree-node__children{padding-left:24px;display:none;}
|
||||
.tree-node__children.expanded{display:block;}
|
||||
</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-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__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item active">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<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="record-user.html" class="sidebar-item">用户排查</a>
|
||||
<a href="record-dept.html" class="sidebar-item">部门排查</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">模板列表</span>
|
||||
<button class="btn btn-primary" onclick="openEditModal(null)">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
新增模板
|
||||
</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>模板名称</th>
|
||||
<th>用户类别</th>
|
||||
<th>模板状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>健康打卡-E类</td>
|
||||
<td>E类</td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td>
|
||||
<span class="link" onclick="openEditModal(0)">编辑</span>
|
||||
<span style="color:var(--border);margin:0 6px;">|</span>
|
||||
<span class="link" style="color:var(--danger);" onclick="void(0)">删除</span>
|
||||
<span style="color:var(--border);margin:0 6px;">|</span>
|
||||
<span class="link" onclick="openViewModal(0)">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>健康打卡-D类</td>
|
||||
<td>D类</td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td>
|
||||
<span class="link" onclick="openEditModal(1)">编辑</span>
|
||||
<span style="color:var(--border);margin:0 6px;">|</span>
|
||||
<span class="link" style="color:var(--danger);" onclick="void(0)">删除</span>
|
||||
<span style="color:var(--border);margin:0 6px;">|</span>
|
||||
<span class="link" onclick="openViewModal(1)">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>健康打卡-C类</td>
|
||||
<td>C类</td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td>
|
||||
<span class="link" onclick="openEditModal(2)">编辑</span>
|
||||
<span style="color:var(--border);margin:0 6px;">|</span>
|
||||
<span class="link" style="color:var(--danger);" onclick="void(0)">删除</span>
|
||||
<span style="color:var(--border);margin:0 6px;">|</span>
|
||||
<span class="link" onclick="openViewModal(2)">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>健康打卡-B类</td>
|
||||
<td>B类</td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td>
|
||||
<span class="link" onclick="openEditModal(3)">编辑</span>
|
||||
<span style="color:var(--border);margin:0 6px;">|</span>
|
||||
<span class="link" style="color:var(--danger);" onclick="void(0)">删除</span>
|
||||
<span style="color:var(--border);margin:0 6px;">|</span>
|
||||
<span class="link" onclick="openViewModal(3)">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>健康打卡-A类</td>
|
||||
<td>A类</td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td>
|
||||
<span class="link" onclick="openEditModal(4)">编辑</span>
|
||||
<span style="color:var(--border);margin:0 6px;">|</span>
|
||||
<span class="link" style="color:var(--danger);" onclick="void(0)">删除</span>
|
||||
<span style="color:var(--border);margin:0 6px;">|</span>
|
||||
<span class="link" onclick="openViewModal(4)">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 查看弹窗 -->
|
||||
<div class="modal-mask" id="viewModal">
|
||||
<div class="modal modal-lg">
|
||||
<div class="modal__header">
|
||||
<h3 id="viewModalTitle">查看模板 - 健康打卡-E类</h3>
|
||||
<button class="modal__close" onclick="closeModal('viewModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body" style="padding:0;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>问题分类</th>
|
||||
<th>问题描述</th>
|
||||
<th>问题选项</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="viewTbody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('viewModal')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<div class="modal-mask" id="editModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3 id="editModalTitle">编辑模板</h3>
|
||||
<button class="modal__close" onclick="closeModal('editModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-group">
|
||||
<label>模板名称 <span style="color:var(--danger)">*</span></label>
|
||||
<input class="form-control" id="editName" placeholder="请输入模板名称">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>用户类别 <span style="color:var(--danger)">*</span></label>
|
||||
<select class="form-control" id="editCategory">
|
||||
<option value="">请选择</option>
|
||||
<option>A类</option>
|
||||
<option>B类</option>
|
||||
<option>C类</option>
|
||||
<option>D类</option>
|
||||
<option>E类</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>模板状态</label>
|
||||
<select class="form-control" id="editStatus">
|
||||
<option>有效</option>
|
||||
<option>无效</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>问题分类 <span style="color:var(--danger)">*</span></label>
|
||||
<div class="tag-select" id="tagSelect" onclick="toggleTreeDropdown(event)">
|
||||
<span class="tag-select__tag" data-val="饮食习惯">饮食习惯<span class="tag-remove" onclick="removeTag(this,event)">×</span></span>
|
||||
<span class="tag-select__tag" data-val="运动锻炼">运动锻炼<span class="tag-remove" onclick="removeTag(this,event)">×</span></span>
|
||||
<input class="tag-select__input" id="tagInput" placeholder="搜索问题分类" oninput="filterTree()" onfocus="openTreeDropdown()">
|
||||
<div class="tag-select__dropdown" id="catDropdown"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('editModal')">取消</button>
|
||||
<button class="btn btn-primary" onclick="closeModal('editModal')">确定</button>
|
||||
</div>
|
||||
</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');})();
|
||||
|
||||
var templates=[
|
||||
{name:'健康打卡-E类',cat:'E类',status:'有效',questions:[
|
||||
{cat:'饮食习惯',desc:'今天是否按时吃早餐？',opt:'单选题（是/否）'},
|
||||
{cat:'饮食习惯',desc:'今天饮水量是否达到1500ml？',opt:'单选题（是/否）'},
|
||||
{cat:'运动锻炼',desc:'今天是否进行了30分钟以上运动？',opt:'单选题（是/否）'},
|
||||
{cat:'睡眠质量',desc:'昨晚睡眠时间是否达到7小时？',opt:'单选题（是/否）'},
|
||||
{cat:'心理状态',desc:'今天是否感到焦虑或压力过大？',opt:'单选题（是/否）'}
|
||||
]},
|
||||
{name:'健康打卡-D类',cat:'D类',status:'有效',questions:[
|
||||
{cat:'饮食习惯',desc:'今天是否摄入了足够的蔬菜水果？',opt:'单选题（是/否）'},
|
||||
{cat:'运动锻炼',desc:'今天是否完成了步行目标？',opt:'单选题（是/否）'},
|
||||
{cat:'慢病管理',desc:'今天是否按时服药？',opt:'单选题（是/否）'},
|
||||
{cat:'睡眠质量',desc:'昨晚是否有失眠情况？',opt:'单选题（是/否）'}
|
||||
]},
|
||||
{name:'健康打卡-C类',cat:'C类',status:'有效',questions:[
|
||||
{cat:'饮食习惯',desc:'今天是否控制了高盐高油饮食？',opt:'单选题（是/否）'},
|
||||
{cat:'运动锻炼',desc:'今天是否进行了有氧运动？',opt:'单选题（是/否）'},
|
||||
{cat:'心理状态',desc:'今天情绪是否稳定？',opt:'单选题（是/否）'}
|
||||
]},
|
||||
{name:'健康打卡-B类',cat:'B类',status:'有效',questions:[
|
||||
{cat:'运动锻炼',desc:'今天是否完成了体能训练？',opt:'单选题（是/否）'},
|
||||
{cat:'睡眠质量',desc:'昨晚睡眠质量是否良好？',opt:'单选题（是/否）'},
|
||||
{cat:'职业健康',desc:'今天工作中是否佩戴了防护用品？',opt:'单选题（是/否）'}
|
||||
]},
|
||||
{name:'健康打卡-A类',cat:'A类',status:'有效',questions:[
|
||||
{cat:'饮食习惯',desc:'今天三餐是否规律？',opt:'单选题（是/否）'},
|
||||
{cat:'运动锻炼',desc:'今天是否进行了户外活动？',opt:'单选题（是/否）'},
|
||||
{cat:'心理状态',desc:'今天是否有充足的休息时间？',opt:'单选题（是/否）'},
|
||||
{cat:'职业健康',desc:'今天是否有身体不适症状？',opt:'单选题（是/否）'}
|
||||
]}
|
||||
];
|
||||
|
||||
// 树状分类数据
|
||||
var categoryTree=[
|
||||
{label:'生活习惯',children:[
|
||||
{label:'饮食习惯'},{label:'运动锻炼'},{label:'睡眠质量'},{label:'体重管理'}
|
||||
]},
|
||||
{label:'心理健康',children:[
|
||||
{label:'心理状态'},{label:'压力管理'},{label:'情绪调节'}
|
||||
]},
|
||||
{label:'疾病管理',children:[
|
||||
{label:'慢病管理'},{label:'用药提醒'},{label:'康复训练'}
|
||||
]},
|
||||
{label:'职业防护',children:[
|
||||
{label:'职业健康'},{label:'劳动防护'},{label:'职业禁忌'}
|
||||
]}
|
||||
];
|
||||
|
||||
function closeModal(id){document.getElementById(id).classList.remove('show');}
|
||||
function openViewModal(idx){
|
||||
var t=templates[idx];
|
||||
document.getElementById('viewModalTitle').textContent='查看模板 - '+t.name;
|
||||
var html='';
|
||||
t.questions.forEach(function(q){
|
||||
html+='<tr><td>'+q.cat+'</td><td>'+q.desc+'</td><td>'+q.opt+'</td></tr>';
|
||||
});
|
||||
document.getElementById('viewTbody').innerHTML=html;
|
||||
document.getElementById('viewModal').classList.add('show');
|
||||
}
|
||||
function openEditModal(idx){
|
||||
if(idx===null){
|
||||
document.getElementById('editModalTitle').textContent='新增模板';
|
||||
document.getElementById('editName').value='';
|
||||
document.getElementById('editCategory').value='';
|
||||
document.getElementById('editStatus').value='有效';
|
||||
clearAllTags();
|
||||
}else{
|
||||
var t=templates[idx];
|
||||
document.getElementById('editModalTitle').textContent='编辑模板';
|
||||
document.getElementById('editName').value=t.name;
|
||||
document.getElementById('editCategory').value=t.cat;
|
||||
document.getElementById('editStatus').value=t.status;
|
||||
clearAllTags();
|
||||
var cats=[];t.questions.forEach(function(q){if(cats.indexOf(q.cat)===-1)cats.push(q.cat);});
|
||||
cats.forEach(function(c){addTag(c);});
|
||||
}
|
||||
document.getElementById('editModal').classList.add('show');
|
||||
}
|
||||
function clearAllTags(){
|
||||
document.getElementById('tagSelect').querySelectorAll('.tag-select__tag').forEach(function(el){el.remove();});
|
||||
}
|
||||
function addTag(val){
|
||||
var container=document.getElementById('tagSelect');
|
||||
var input=document.getElementById('tagInput');
|
||||
var span=document.createElement('span');
|
||||
span.className='tag-select__tag';span.setAttribute('data-val',val);
|
||||
span.innerHTML=val+'<span class="tag-remove" onclick="removeTag(this,event)">×</span>';
|
||||
container.insertBefore(span,input);
|
||||
}
|
||||
function removeTag(el,e){
|
||||
e.stopPropagation();
|
||||
el.parentElement.remove();
|
||||
renderTree();
|
||||
}
|
||||
function getSelectedTags(){
|
||||
var tags=[];
|
||||
document.getElementById('tagSelect').querySelectorAll('.tag-select__tag').forEach(function(t){tags.push(t.getAttribute('data-val'));});
|
||||
return tags;
|
||||
}
|
||||
function toggleTreeDropdown(e){
|
||||
if(e.target.closest('.tag-remove'))return;
|
||||
document.getElementById('tagInput').focus();
|
||||
}
|
||||
function openTreeDropdown(){
|
||||
renderTree();
|
||||
document.getElementById('catDropdown').classList.add('show');
|
||||
}
|
||||
function filterTree(){renderTree();document.getElementById('catDropdown').classList.add('show');}
|
||||
function renderTree(){
|
||||
var dd=document.getElementById('catDropdown');
|
||||
var keyword=document.getElementById('tagInput').value.toLowerCase();
|
||||
var selected=getSelectedTags();
|
||||
var html='';
|
||||
categoryTree.forEach(function(parent,pi){
|
||||
var visibleChildren=parent.children.filter(function(c){
|
||||
return !keyword||c.label.toLowerCase().indexOf(keyword)>-1;
|
||||
});
|
||||
if(visibleChildren.length===0)return;
|
||||
// 父节点checkbox状态
|
||||
var checkedCount=0;
|
||||
visibleChildren.forEach(function(c){if(selected.indexOf(c.label)>-1)checkedCount++;});
|
||||
var allChecked=checkedCount===visibleChildren.length;
|
||||
var someChecked=checkedCount>0&&!allChecked;
|
||||
var cbCls='tree-node__checkbox'+(allChecked?' checked':'')+(someChecked?' indeterminate':'');
|
||||
html+='<div class="tree-node">';
|
||||
html+='<div class="tree-node__header" onclick="toggleTreeExpand(this)">';
|
||||
html+='<span class="tree-node__arrow expanded"><svg viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke="#999" stroke-width="1.5" stroke-linecap="round"/></svg></span>';
|
||||
html+='<span class="'+cbCls+'" onclick="toggleParentCheck(event,'+pi+')"></span>';
|
||||
html+='<span class="tree-node__label" style="font-weight:500;">'+parent.label+'</span>';
|
||||
html+='</div>';
|
||||
html+='<div class="tree-node__children expanded">';
|
||||
visibleChildren.forEach(function(child){
|
||||
var isChecked=selected.indexOf(child.label)>-1;
|
||||
var childCbCls='tree-node__checkbox'+(isChecked?' checked':'');
|
||||
html+='<div class="tree-node__header" onclick="toggleLeafCheck(event,\''+child.label+'\')">';
|
||||
html+='<span class="tree-node__arrow hidden"><svg viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke="#999" stroke-width="1.5" stroke-linecap="round"/></svg></span>';
|
||||
html+='<span class="'+childCbCls+'"></span>';
|
||||
html+='<span class="tree-node__label">'+child.label+'</span>';
|
||||
html+='</div>';
|
||||
});
|
||||
html+='</div></div>';
|
||||
});
|
||||
dd.innerHTML=html||'<div style="padding:12px;text-align:center;color:var(--text-placeholder);font-size:var(--font-sm);">无匹配项</div>';
|
||||
}
|
||||
function toggleTreeExpand(header){
|
||||
var arrow=header.querySelector('.tree-node__arrow');
|
||||
var children=header.nextElementSibling;
|
||||
if(!children||!children.classList.contains('tree-node__children'))return;
|
||||
arrow.classList.toggle('expanded');
|
||||
children.classList.toggle('expanded');
|
||||
}
|
||||
function toggleParentCheck(e,pi){
|
||||
e.stopPropagation();
|
||||
var selected=getSelectedTags();
|
||||
var parent=categoryTree[pi];
|
||||
var keyword=document.getElementById('tagInput').value.toLowerCase();
|
||||
var visibleChildren=parent.children.filter(function(c){return !keyword||c.label.toLowerCase().indexOf(keyword)>-1;});
|
||||
var allChecked=visibleChildren.every(function(c){return selected.indexOf(c.label)>-1;});
|
||||
if(allChecked){
|
||||
visibleChildren.forEach(function(c){
|
||||
document.getElementById('tagSelect').querySelectorAll('.tag-select__tag[data-val="'+c.label+'"]').forEach(function(t){t.remove();});
|
||||
});
|
||||
}else{
|
||||
visibleChildren.forEach(function(c){
|
||||
if(selected.indexOf(c.label)===-1)addTag(c.label);
|
||||
});
|
||||
}
|
||||
renderTree();
|
||||
}
|
||||
function toggleLeafCheck(e,label){
|
||||
e.stopPropagation();
|
||||
var selected=getSelectedTags();
|
||||
if(selected.indexOf(label)>-1){
|
||||
document.getElementById('tagSelect').querySelectorAll('.tag-select__tag[data-val="'+label+'"]').forEach(function(t){t.remove();});
|
||||
}else{
|
||||
addTag(label);
|
||||
}
|
||||
renderTree();
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('.tag-select'))document.getElementById('catDropdown').classList.remove('show');
|
||||
});
|
||||
document.querySelectorAll('.modal-mask').forEach(function(m){
|
||||
m.addEventListener('click',function(e){if(e.target===m)m.classList.remove('show');});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,254 @@
|
||||
<!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__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);}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.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:150px;}
|
||||
.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: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__actions{display:flex;gap:8px;}
|
||||
.table-card__content{overflow-x:auto;}
|
||||
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);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);}
|
||||
.tag-gray{background:#F5F5F5;color:#666;}
|
||||
.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);}
|
||||
.date-range{display:flex;align-items:center;gap:8px;}
|
||||
.date-range input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;width:150px;}
|
||||
.date-range input:focus{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>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="../archive-personal.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="../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>系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">穿戴监测</div>
|
||||
<a href="tool-manage.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bind-record.html" class="sidebar-item active">绑定记录</a>
|
||||
<a href="user-data.html" class="sidebar-item">用户数据</a>
|
||||
<a href="exception-event.html" class="sidebar-item">异常事件</a>
|
||||
<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>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>设备编码</label>
|
||||
<input class="filter-input" placeholder="请输入设备编码">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" style="min-width:150px;">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>采气二厂</option>
|
||||
<option>天然气处理厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" placeholder="请输入员工姓名" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" placeholder="请输入员工编号" style="min-width:120px;">
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label>绑定时间</label>
|
||||
<div class="date-range">
|
||||
<input type="date" value="2026-04-01">
|
||||
<span style="color:var(--text-secondary)">至</span>
|
||||
<input type="date" value="2026-05-11">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="table-card__actions" style="display:flex;gap:8px;margin-bottom:16px;">
|
||||
<button class="btn btn-default" onclick="void(0)">导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="void(0)">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">绑定记录 <span style="font-size:var(--font-sm);color:var(--text-secondary);font-weight:400;">共 256 条</span></span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>设备编码</th>
|
||||
<th>设备类型</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
<th>绑定时间</th>
|
||||
<th>解绑时间</th>
|
||||
<th>操作人</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span style="font-family:monospace">WD-2024-001</span></td>
|
||||
<td>智能手环</td>
|
||||
<td>张伟</td>
|
||||
<td>CQ001234</td>
|
||||
<td>采油一厂</td>
|
||||
<td>第一作业区</td>
|
||||
<td>2024-03-01 09:15</td>
|
||||
<td>—</td>
|
||||
<td>管理员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span style="font-family:monospace">WD-2024-002</span></td>
|
||||
<td>智能手环</td>
|
||||
<td>李建国</td>
|
||||
<td>CQ001156</td>
|
||||
<td>采油一厂</td>
|
||||
<td>第二作业区</td>
|
||||
<td>2024-03-01 09:20</td>
|
||||
<td>—</td>
|
||||
<td>管理员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span style="font-family:monospace">WD-2024-031</span></td>
|
||||
<td>胸贴式监测仪</td>
|
||||
<td>王磊</td>
|
||||
<td>CQ002301</td>
|
||||
<td>采气一厂</td>
|
||||
<td>第一作业区</td>
|
||||
<td>2024-04-10 08:30</td>
|
||||
<td>—</td>
|
||||
<td>管理员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span style="font-family:monospace">WD-2024-015</span></td>
|
||||
<td>智能手表</td>
|
||||
<td>赵明辉</td>
|
||||
<td>CQ003042</td>
|
||||
<td>采油二厂</td>
|
||||
<td>第三作业区</td>
|
||||
<td>2024-02-20 10:00</td>
|
||||
<td>2024-04-30 17:00</td>
|
||||
<td>管理员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span style="font-family:monospace">WD-2024-016</span></td>
|
||||
<td>智能手表</td>
|
||||
<td>刘洋</td>
|
||||
<td>CQ003159</td>
|
||||
<td>采油二厂</td>
|
||||
<td>第一作业区</td>
|
||||
<td>2024-03-15 14:30</td>
|
||||
<td>2024-05-01 08:00</td>
|
||||
<td>管理员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span style="font-family:monospace">WD-2024-008</span></td>
|
||||
<td>智能手环</td>
|
||||
<td>陈晓燕</td>
|
||||
<td>CQ001890</td>
|
||||
<td>采油一厂</td>
|
||||
<td>第二作业区</td>
|
||||
<td>2024-01-20 09:00</td>
|
||||
<td>—</td>
|
||||
<td>管理员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span style="font-family:monospace">WD-2024-022</span></td>
|
||||
<td>智能手环</td>
|
||||
<td>孙浩然</td>
|
||||
<td>CQ004210</td>
|
||||
<td>天然气处理厂</td>
|
||||
<td>压缩作业区</td>
|
||||
<td>2024-04-01 11:00</td>
|
||||
<td>—</td>
|
||||
<td>管理员</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 256 条</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">26</button>
|
||||
<button class="page-btn">»</button>
|
||||
<select class="filter-select" style="min-width:90px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,231 @@
|
||||
<!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;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);display:flex;gap:16px;}
|
||||
/* 左侧树 */
|
||||
.tree-panel{width:240px;flex-shrink:0;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:16px 0;overflow-y:auto;max-height:calc(100vh - 56px - 48px);}
|
||||
.tree-node{user-select:none;}
|
||||
.tree-node__header{display:flex;align-items:center;gap:4px;padding:8px 16px;font-size:var(--font-sm);cursor:pointer;transition:background .1s;white-space:nowrap;}
|
||||
.tree-node__header:hover{background:#F5F7FA;}
|
||||
.tree-node__header.active{color:var(--primary);background:var(--primary-light);font-weight:500;}
|
||||
.tree-node__arrow{width:12px;height:12px;transition:transform .2s;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
|
||||
.tree-node__arrow svg{width:10px;height:10px;}
|
||||
.tree-node__arrow.expanded{transform:rotate(90deg);}
|
||||
.tree-node__arrow.hidden{visibility:hidden;}
|
||||
.tree-node__children{padding-left:20px;display:none;}
|
||||
.tree-node__children.expanded{display:block;}
|
||||
/* 右侧内容 */
|
||||
.content-panel{flex:1;min-width:0;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:16px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item__label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.form-control{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-control:focus{border-color:var(--primary);}
|
||||
.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);}
|
||||
.btn-download{background:#4D7CFE;color:#fff;padding:0 12px;height:30px;font-size:var(--font-xs);border-radius:var(--radius-sm);border:none;cursor:pointer;}.btn-download:hover{background:#3a6ae8;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:3px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#E6FFFB;color:#13C2C2;border:1px solid #87E8DE;}
|
||||
.tag-gray{background:#F5F5F5;color:#8C8C8C;border:1px solid #D9D9D9;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}.link-danger:hover{color:#ff7875;}
|
||||
.link-disabled{color:#C0C0C0;cursor:not-allowed;font-size:var(--font-sm);}
|
||||
.btn-download-disabled{background:#C0C0C0;color:#fff;padding:0 12px;height:30px;font-size:var(--font-xs);border-radius:var(--radius-sm);border:none;cursor:not-allowed;}
|
||||
.tag-blue{background:#E6F7FF;color:var(--primary);border:1px solid #91D5FF;}
|
||||
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);z-index:9999;opacity:0;transition:opacity .2s;pointer-events:none;}
|
||||
.toast.show{opacity:1;}
|
||||
</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="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>系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">穿戴监测</div>
|
||||
<a href="tool-manage.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bind-record.html" class="sidebar-item">绑定记录</a>
|
||||
<a href="user-data.html" class="sidebar-item">用户数据</a>
|
||||
<a href="exception-event.html" class="sidebar-item">异常事件</a>
|
||||
<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>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 左侧单位树 -->
|
||||
<div class="tree-panel" id="treePanel"></div>
|
||||
<!-- 右侧内容 -->
|
||||
<div class="content-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">日期：</span>
|
||||
<select class="form-control" id="filterYear" style="width:100px;">
|
||||
<option value="2024">2024</option>
|
||||
<option value="2025">2025</option>
|
||||
<option value="2026" selected>2026</option>
|
||||
<option value="2027">2027</option>
|
||||
<option value="2028">2028</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="renderTable()">查询</button>
|
||||
<button class="btn btn-default" onclick="resetFilter()">重置</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>月份</th>
|
||||
<th>报告状态</th>
|
||||
<th>报告生成时间</th>
|
||||
<th>报告下载</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="toast" id="toast"></div>
|
||||
<script>
|
||||
var orgTree=[
|
||||
{label:'长庆油田',children:['公司机关','陇东油气开发分公司','苏里格气田开发分公司','公共事务中心','勘探事业部','数字和智能化事业部','第一采油厂','第二采油厂','第三采油厂','第四采油厂','第五采油厂','第六采油厂','第七采油厂','第八采油厂','第九采油厂','第十采油厂','第十一采油厂','第十二采油厂','长庆实业集团有限公司','长庆油田页岩油开发分公司']}
|
||||
];
|
||||
|
||||
var selectedUnit='公司机关';
|
||||
|
||||
var reportData={
|
||||
'公司机关':[
|
||||
{month:1,status:'已生成',time:'2026-01-14 11:00:10'},
|
||||
{month:2,status:'生成中',time:''}
|
||||
]
|
||||
};
|
||||
|
||||
function renderTree(){
|
||||
var html='';
|
||||
orgTree.forEach(function(node){
|
||||
html+='<div class="tree-node">';
|
||||
html+='<div class="tree-node__header" onclick="toggleTreeNode(this)">';
|
||||
html+='<span class="tree-node__arrow expanded"><svg viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke="#999" stroke-width="1.5" stroke-linecap="round"/></svg></span>';
|
||||
html+='<span>'+node.label+'</span></div>';
|
||||
html+='<div class="tree-node__children expanded">';
|
||||
node.children.forEach(function(child){
|
||||
var cls=child===selectedUnit?' active':'';
|
||||
html+='<div class="tree-node__header'+cls+'" onclick="selectUnit(this,\''+child+'\')">';
|
||||
html+='<span class="tree-node__arrow hidden"><svg viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke="#999" stroke-width="1.5" stroke-linecap="round"/></svg></span>';
|
||||
html+='<span>'+child+'</span></div>';
|
||||
});
|
||||
html+='</div></div>';
|
||||
});
|
||||
document.getElementById('treePanel').innerHTML=html;
|
||||
}
|
||||
|
||||
function toggleTreeNode(header){
|
||||
var children=header.nextElementSibling;
|
||||
var arrow=header.querySelector('.tree-node__arrow');
|
||||
if(!children)return;
|
||||
children.classList.toggle('expanded');
|
||||
arrow.classList.toggle('expanded');
|
||||
}
|
||||
|
||||
function selectUnit(el,name){
|
||||
document.querySelectorAll('.tree-node__header').forEach(function(h){h.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
selectedUnit=name;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
function renderTable(){
|
||||
var data=reportData[selectedUnit]||[];
|
||||
var html='';
|
||||
for(var m=1;m<=12;m++){
|
||||
var record=data.find(function(r){return r.month===m;});
|
||||
var status=record?record.status:'未生成';
|
||||
var tagCls=status==='已生成'?'tag-green':(status==='生成中'?'tag-blue':'tag-gray');
|
||||
var time=(status==='已生成'&&record)?record.time:'-';
|
||||
var downloadBtn=(status==='已生成')?'<button class="btn-download" onclick="showToast(\'下载中...\')">报告下载</button>':'<span style="color:var(--text-placeholder);">-</span>';
|
||||
var isGenerating=(status==='生成中');
|
||||
var genLink=isGenerating?'<span class="link-disabled">生成报告</span>':'<span class="link" onclick="showToast(\'报告生成中，请稍候\')">生成报告</span>';
|
||||
var forceLink=isGenerating?'<span class="link-danger" onclick="showToast(\'已强制结束\')">强制结束</span>':'<span class="link-disabled">强制结束</span>';
|
||||
html+='<tr>';
|
||||
html+='<td>'+m+'</td>';
|
||||
html+='<td><span class="tag '+tagCls+'">'+status+'</span></td>';
|
||||
html+='<td>'+time+'</td>';
|
||||
html+='<td>'+downloadBtn+'</td>';
|
||||
html+='<td>'+genLink+'<span style="color:var(--border);margin:0 8px;">|</span>'+forceLink+'</td>';
|
||||
html+='</tr>';
|
||||
}
|
||||
document.getElementById('tbody').innerHTML=html;
|
||||
}
|
||||
|
||||
function resetFilter(){
|
||||
document.getElementById('filterYear').value='2026';
|
||||
renderTable();
|
||||
}
|
||||
|
||||
function showToast(msg){
|
||||
var t=document.getElementById('toast');
|
||||
t.textContent=msg;t.classList.add('show');
|
||||
setTimeout(function(){t.classList.remove('show');},2000);
|
||||
}
|
||||
|
||||
renderTree();
|
||||
renderTable();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,530 @@
|
||||
<!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;
|
||||
--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);--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__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);}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.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:150px;}
|
||||
.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: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);}
|
||||
/* Tab切换 */
|
||||
.page-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);}
|
||||
.page-tab{padding:14px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;}
|
||||
.page-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-panel{display:none;}.tab-panel.active{display:block;}
|
||||
.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__actions{display:flex;gap:8px;}
|
||||
.table-card__content{overflow-x:auto;}
|
||||
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);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);}
|
||||
.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);}.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);}
|
||||
/* 进度条 */
|
||||
.progress-bar{height:8px;background:#F0F0F0;border-radius:4px;overflow:hidden;min-width:80px;}
|
||||
.progress-bar__fill{height:100%;background:var(--primary);border-radius:4px;transition:width .3s;}
|
||||
.progress-bar__fill.danger{background:var(--danger);}
|
||||
.progress-bar__fill.warning{background:var(--warning);}
|
||||
.date-range{display:flex;align-items:center;gap:8px;}
|
||||
.date-range input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;width:140px;}
|
||||
/* 弹窗 */
|
||||
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;display:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:92vw;max-width:1400px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,0.2);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;}
|
||||
.modal__close:hover{background:#f0f0f0;}
|
||||
.modal__info{padding:16px 24px;border-bottom:1px solid #f5f5f5;flex-shrink:0;display:flex;gap:32px;flex-wrap:wrap;background:#FAFCFF;}
|
||||
.modal__info-item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);}
|
||||
.modal__info-label{color:var(--text-secondary);}
|
||||
.modal__info-val{color:var(--text-primary);font-weight:500;}
|
||||
.modal__toolbar{display:flex;align-items:center;justify-content:flex-end;padding:12px 24px;border-bottom:1px solid #f5f5f5;flex-shrink:0;}
|
||||
.modal__body{flex:1;overflow-x:auto;overflow-y:auto;padding:0;position:relative;}
|
||||
.modal__body table{border-collapse:separate;border-spacing:0;min-width:100%;}
|
||||
.modal__body table th,.modal__body table td{padding:10px 14px;font-size:var(--font-xs);text-align:center;white-space:nowrap;border-bottom:1px solid var(--border);}
|
||||
.modal__body table th{position:sticky;top:0;z-index:6;background:#FAFAFA;font-weight:500;}
|
||||
.modal__body .wear-yes{color:var(--success);font-size:14px;}
|
||||
.modal__body .wear-no{color:var(--danger);font-size:13px;font-weight:500;}
|
||||
/* 固定列 - 使用clip-path隐藏溢出 */
|
||||
.modal__body table .col-fixed-left{position:sticky;z-index:8;background:#fff;}
|
||||
.modal__body table th.col-fixed-left{background:#FAFAFA;z-index:10;}
|
||||
.modal__body table .col-fixed-left-0{left:0;min-width:80px;}
|
||||
.modal__body table .col-fixed-left-1{left:80px;min-width:90px;}
|
||||
.modal__body table .col-fixed-left-1::after{content:'';position:absolute;top:0;right:-6px;bottom:0;width:6px;background:linear-gradient(to right,rgba(0,0,0,0.06),transparent);pointer-events:none;}
|
||||
.modal__body table .col-fixed-right{position:sticky;z-index:8;background:#fff;}
|
||||
.modal__body table th.col-fixed-right{background:#FAFAFA;z-index:10;}
|
||||
.modal__body table .col-fixed-right-2{right:0;min-width:140px;}
|
||||
.modal__body table .col-fixed-right-1{right:140px;min-width:100px;}
|
||||
.modal__body table .col-fixed-right-0{right:240px;min-width:100px;}
|
||||
.modal__body table .col-fixed-right-0::before{content:'';position:absolute;top:0;left:-6px;bottom:0;width:6px;background:linear-gradient(to left,rgba(0,0,0,0.06),transparent);pointer-events:none;}
|
||||
.modal__body table td,.modal__body table th{position:relative;}
|
||||
.modal__body table tbody tr:hover td{background:#F8FBFF;}
|
||||
.modal__body table tbody tr:hover .col-fixed-left,.modal__body table tbody tr:hover .col-fixed-right{background:#F8FBFF;}
|
||||
.modal__footer{display:flex;align-items:center;justify-content:flex-end;padding:12px 24px;border-top:1px solid var(--border);flex-shrink:0;gap:8px;}
|
||||
/* Toast */
|
||||
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 24px;border-radius:6px;font-size:var(--font-sm);z-index:2000;opacity:0;transition:opacity .3s;pointer-events:none;}
|
||||
.toast.show{opacity:1;}
|
||||
</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="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>系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">穿戴监测</div>
|
||||
<a href="tool-manage.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bind-record.html" class="sidebar-item">绑定记录</a>
|
||||
<a href="user-data.html" class="sidebar-item">用户数据</a>
|
||||
<a href="exception-event.html" class="sidebar-item">异常事件</a>
|
||||
<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>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- Tab切换：二级单位 / 三级单位 -->
|
||||
<div class="page-tabs">
|
||||
<div class="page-tab active" onclick="switchTab(this,'level2')">二级单位</div>
|
||||
<div class="page-tab" onclick="switchTab(this,'level3')">三级单位</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级单位筛选栏 -->
|
||||
<div class="filter-bar" id="filter-level2">
|
||||
<div class="filter-item">
|
||||
<label>日期范围</label>
|
||||
<div class="date-range">
|
||||
<input type="date" class="filter-input" value="2026-05-05" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary)">至</span>
|
||||
<input type="date" class="filter-input" value="2026-05-11" style="min-width:140px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" style="min-width:150px;">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>采气二厂</option>
|
||||
<option>天然气处理厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 三级单位筛选栏 -->
|
||||
<div class="filter-bar" id="filter-level3" style="display:none;">
|
||||
<div class="filter-item">
|
||||
<label>日期范围</label>
|
||||
<div class="date-range">
|
||||
<input type="date" class="filter-input" value="2026-05-05" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary)">至</span>
|
||||
<input type="date" class="filter-input" value="2026-05-11" style="min-width:140px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" style="min-width:150px;">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>采气二厂</option>
|
||||
<option>天然气处理厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属部门</label>
|
||||
<select class="filter-select" style="min-width:150px;">
|
||||
<option>全部</option>
|
||||
<option>第一作业区</option>
|
||||
<option>第二作业区</option>
|
||||
<option>集输大队</option>
|
||||
<option>采气作业区</option>
|
||||
<option>集气站</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 二级单位面板 -->
|
||||
<div class="tab-panel active" id="tab-level2">
|
||||
<div class="table-card__actions" style="display:flex;gap:8px;margin-bottom:16px;">
|
||||
<button class="btn btn-default" onclick="void(0)">导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="void(0)">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">二级单位数据统计</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-weight:500">采油一厂</td>
|
||||
<td>50</td><td>35</td><td>32</td><td>3</td>
|
||||
<td style="color:var(--danger)">1</td>
|
||||
<td>2</td><td>1</td><td>1</td><td>1</td><td>0</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500">采油二厂</td>
|
||||
<td>40</td><td>28</td><td>22</td><td>6</td>
|
||||
<td>0</td>
|
||||
<td>1</td><td>0</td><td>1</td><td>1</td><td>1</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500">采气一厂</td>
|
||||
<td>30</td><td>20</td><td>19</td><td>1</td>
|
||||
<td style="color:var(--danger)">1</td>
|
||||
<td>1</td><td>1</td><td>0</td><td>0</td><td>0</td><td>1</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500">采气二厂</td>
|
||||
<td>25</td><td>18</td><td>16</td><td>2</td>
|
||||
<td>0</td>
|
||||
<td>1</td><td>0</td><td>0</td><td>0</td><td>1</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500">天然气处理厂</td>
|
||||
<td>20</td><td>12</td><td>10</td><td>2</td>
|
||||
<td style="color:var(--danger)">1</td>
|
||||
<td>0</td><td>0</td><td>1</td><td>1</td><td>0</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 三级单位面板 -->
|
||||
<div class="tab-panel" id="tab-level3">
|
||||
<div class="table-card__actions" style="display:flex;gap:8px;margin-bottom:16px;">
|
||||
<button class="btn btn-default" onclick="void(0)">导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="void(0)">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">三级单位数据统计</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-weight:500">采油一厂</td><td>第一作业区</td>
|
||||
<td>20</td><td>15</td><td>14</td><td>1</td>
|
||||
<td>0</td><td>1</td><td>0</td><td>0</td><td>1</td><td>0</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500">采油一厂</td><td>第二作业区</td>
|
||||
<td>18</td><td>12</td><td>11</td><td>1</td>
|
||||
<td style="color:var(--danger)">1</td><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500">采油一厂</td><td>集输大队</td>
|
||||
<td>12</td><td>8</td><td>7</td><td>1</td>
|
||||
<td>0</td><td>0</td><td>0</td><td>1</td><td>0</td><td>0</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500">采油二厂</td><td>第一作业区</td>
|
||||
<td>22</td><td>16</td><td>13</td><td>3</td>
|
||||
<td>0</td><td>1</td><td>0</td><td>0</td><td>1</td><td>1</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500">采油二厂</td><td>第二作业区</td>
|
||||
<td>18</td><td>12</td><td>9</td><td>3</td>
|
||||
<td>0</td><td>0</td><td>0</td><td>1</td><td>0</td><td>0</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500">采气一厂</td><td>采气作业区</td>
|
||||
<td>16</td><td>12</td><td>11</td><td>1</td>
|
||||
<td style="color:var(--danger)">1</td><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td><td>1</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500">采气一厂</td><td>集气站</td>
|
||||
<td>14</td><td>8</td><td>8</td><td>0</td>
|
||||
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 15 条</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>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<!-- 查看明细弹窗 -->
|
||||
<div class="modal-mask" id="detailModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__title" id="modalTitle">佩戴明细 - 采油一厂</span>
|
||||
<button class="modal__close" onclick="closeDetailModal()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="#666" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal__info" id="modalInfo"></div>
|
||||
<div class="modal__toolbar">
|
||||
<button class="btn btn-primary" onclick="handleExport()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 9V1M4 4l3-3 3 3M2 11h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
导出
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<table id="detailTable">
|
||||
<thead>
|
||||
<tr id="detailThead"></tr>
|
||||
</thead>
|
||||
<tbody id="detailTbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeDetailModal()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(el, tab) {
|
||||
document.querySelectorAll('.page-tab').forEach(function(t){ t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p){ p.classList.remove('active'); });
|
||||
document.getElementById('tab-' + tab).classList.add('active');
|
||||
document.getElementById('filter-level2').style.display = tab === 'level2' ? '' : 'none';
|
||||
document.getElementById('filter-level3').style.display = tab === 'level3' ? '' : 'none';
|
||||
}
|
||||
|
||||
/* 明细弹窗逻辑 */
|
||||
function getDateRange() {
|
||||
var inputs = document.querySelector('.filter-bar:not([style*="display:none"]) .date-range, .filter-bar:not([style*="none"]) .date-range');
|
||||
if (!inputs) inputs = document.querySelector('.date-range');
|
||||
var dateInputs = inputs.querySelectorAll('input[type="date"]');
|
||||
return { start: dateInputs[0].value, end: dateInputs[1].value };
|
||||
}
|
||||
|
||||
function getDatesInRange(start, end) {
|
||||
var dates = [];
|
||||
var cur = new Date(start);
|
||||
var endD = new Date(end);
|
||||
while (cur <= endD) {
|
||||
dates.push(cur.toISOString().slice(0, 10));
|
||||
cur.setDate(cur.getDate() + 1);
|
||||
}
|
||||
return dates;
|
||||
}
|
||||
|
||||
function openDetailModal(unitName, deptName) {
|
||||
var range = getDateRange();
|
||||
var dates = getDatesInRange(range.start, range.end);
|
||||
var title = '佩戴明细 - ' + unitName + (deptName ? ' / ' + deptName : '');
|
||||
document.getElementById('modalTitle').textContent = title;
|
||||
document.getElementById('modalInfo').innerHTML =
|
||||
'<div class="modal__info-item"><span class="modal__info-label">单位：</span><span class="modal__info-val">' + unitName + '</span></div>' +
|
||||
(deptName ? '<div class="modal__info-item"><span class="modal__info-label">部门：</span><span class="modal__info-val">' + deptName + '</span></div>' : '') +
|
||||
'<div class="modal__info-item"><span class="modal__info-label">统计时间：</span><span class="modal__info-val">' + range.start + ' 至 ' + range.end + '</span></div>';
|
||||
|
||||
/* 构建表头 */
|
||||
var thead = document.getElementById('detailThead');
|
||||
var ths = '<th class="col-fixed-left col-fixed-left-0">员工姓名</th><th class="col-fixed-left col-fixed-left-1">员工编号</th><th>单位名称</th><th>部门名称</th><th>设备编码</th><th>设备所属单位</th>';
|
||||
dates.forEach(function(d) { ths += '<th>' + d + '</th>'; });
|
||||
ths += '<th class="col-fixed-right col-fixed-right-0">应佩戴天数</th><th class="col-fixed-right col-fixed-right-1">实际佩戴天数</th><th class="col-fixed-right col-fixed-right-2">最大连续未佩戴天数</th>';
|
||||
thead.innerHTML = ths;
|
||||
|
||||
/* 模拟数据 */
|
||||
var mockEmployees = [
|
||||
{ name:'张三', code:'EMP001', unit: unitName, dept: deptName||'第一作业区', device:'WD-20260101', deviceUnit: unitName },
|
||||
{ name:'李四', code:'EMP002', unit: unitName, dept: deptName||'第一作业区', device:'WD-20260102', deviceUnit: unitName },
|
||||
{ name:'王五', code:'EMP003', unit: unitName, dept: deptName||'第二作业区', device:'WD-20260103', deviceUnit: unitName },
|
||||
{ name:'赵六', code:'EMP004', unit: unitName, dept: deptName||'第二作业区', device:'WD-20260104', deviceUnit: unitName },
|
||||
{ name:'孙七', code:'EMP005', unit: unitName, dept: deptName||'集输大队', device:'WD-20260105', deviceUnit: unitName },
|
||||
{ name:'周八', code:'EMP006', unit: unitName, dept: deptName||'集输大队', device:'WD-20260106', deviceUnit: unitName },
|
||||
{ name:'吴九', code:'EMP007', unit: unitName, dept: deptName||'第一作业区', device:'WD-20260107', deviceUnit: unitName },
|
||||
{ name:'郑十', code:'EMP008', unit: unitName, dept: deptName||'第二作业区', device:'WD-20260108', deviceUnit: unitName },
|
||||
];
|
||||
|
||||
var tbody = document.getElementById('detailTbody');
|
||||
var rows = '';
|
||||
mockEmployees.forEach(function(emp) {
|
||||
var wearDays = [];
|
||||
dates.forEach(function() { wearDays.push(Math.random() > 0.2); });
|
||||
var actual = wearDays.filter(function(w){ return w; }).length;
|
||||
var maxConsec = 0, consec = 0;
|
||||
wearDays.forEach(function(w) {
|
||||
if (!w) { consec++; maxConsec = Math.max(maxConsec, consec); }
|
||||
else { consec = 0; }
|
||||
});
|
||||
rows += '<tr>';
|
||||
rows += '<td class="col-fixed-left col-fixed-left-0">' + emp.name + '</td>';
|
||||
rows += '<td class="col-fixed-left col-fixed-left-1">' + emp.code + '</td>';
|
||||
rows += '<td>' + emp.unit + '</td>';
|
||||
rows += '<td>' + emp.dept + '</td>';
|
||||
rows += '<td>' + emp.device + '</td>';
|
||||
rows += '<td>' + emp.deviceUnit + '</td>';
|
||||
wearDays.forEach(function(w) {
|
||||
rows += '<td>' + (w ? '<span class="wear-yes">✓</span>' : '<span class="wear-no">✗</span>') + '</td>';
|
||||
});
|
||||
rows += '<td class="col-fixed-right col-fixed-right-0">' + dates.length + '</td>';
|
||||
rows += '<td class="col-fixed-right col-fixed-right-1">' + actual + '</td>';
|
||||
rows += '<td class="col-fixed-right col-fixed-right-2">' + (maxConsec > 0 ? '<span style="color:var(--danger)">' + maxConsec + '</span>' : '0') + '</td>';
|
||||
rows += '</tr>';
|
||||
});
|
||||
tbody.innerHTML = rows;
|
||||
|
||||
document.getElementById('detailModal').classList.add('show');
|
||||
}
|
||||
|
||||
function closeDetailModal() {
|
||||
document.getElementById('detailModal').classList.remove('show');
|
||||
}
|
||||
|
||||
/* Toast提示 */
|
||||
function showToast(msg) {
|
||||
var el = document.getElementById('toast');
|
||||
el.textContent = msg;
|
||||
el.classList.add('show');
|
||||
setTimeout(function() { el.classList.remove('show'); }, 2500);
|
||||
}
|
||||
|
||||
/* 导出 */
|
||||
function handleExport() {
|
||||
closeDetailModal();
|
||||
}
|
||||
|
||||
/* 点击遮罩关闭 */
|
||||
document.getElementById('detailModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) closeDetailModal();
|
||||
});
|
||||
|
||||
/* 绑定所有"查看明细"链接 */
|
||||
document.querySelectorAll('.link').forEach(function(link) {
|
||||
link.addEventListener('click', function() {
|
||||
var row = this.closest('tr');
|
||||
var cells = row.querySelectorAll('td');
|
||||
var unitName = cells[0].textContent.trim();
|
||||
var deptName = cells.length > 13 ? cells[1].textContent.trim() : '';
|
||||
openDetailModal(unitName, deptName);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,423 @@
|
||||
<!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;
|
||||
--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);--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__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);}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 统计卡片 */
|
||||
.stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:16px 20px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;}
|
||||
.stat-card__icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
||||
.stat-card__body .num{font-size:22px;font-weight:700;line-height:1;}
|
||||
.stat-card__body .label{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;}
|
||||
.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:150px;}
|
||||
.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: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__actions{display:flex;gap:8px;}
|
||||
.table-card__content{overflow-x:auto;}
|
||||
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);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-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-purple{background:#F9F0FF;color:#722ED1;}
|
||||
.tag-cyan{background:#E6FFFB;color:#08979C;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.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);}
|
||||
.modal__close:hover{background:#f5f5f5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;}
|
||||
.detail-item label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.detail-item span{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.date-range{display:flex;align-items:center;gap:8px;}
|
||||
.date-range input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;width:160px;}
|
||||
</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="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>系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">穿戴监测</div>
|
||||
<a href="tool-manage.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bind-record.html" class="sidebar-item">绑定记录</a>
|
||||
<a href="user-data.html" class="sidebar-item">用户数据</a>
|
||||
<a href="exception-event.html" class="sidebar-item active">异常事件</a>
|
||||
<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>
|
||||
</aside>
|
||||
<main class="main">
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门</label>
|
||||
<select class="filter-select" style="min-width:150px;">
|
||||
<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>全部</option>
|
||||
<option>一键告警</option>
|
||||
<option>心率异常</option>
|
||||
<option>血氧异常</option>
|
||||
<option>体温异常</option>
|
||||
<option>压力异常</option>
|
||||
<option>摔倒</option>
|
||||
<option>定位服务开关修改</option>
|
||||
<option>血压异常</option>
|
||||
<option>心电图异常</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>告警时间</label>
|
||||
<div class="date-range">
|
||||
<input type="date" value="2026-05-01">
|
||||
<span style="color:var(--text-secondary)">至</span>
|
||||
<input type="date" value="2026-05-11">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="table-card__actions" style="display:flex;gap:8px;margin-bottom:16px;">
|
||||
<button class="btn btn-default" onclick="void(0)">导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="void(0)">查看导出任务</button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">告警记录 <span style="font-size:var(--font-sm);color:var(--text-secondary);font-weight:400;">共 156 条</span></span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>李建国</td>
|
||||
<td>CQ001156</td>
|
||||
<td>采油一厂</td>
|
||||
<td>第二作业区</td>
|
||||
<td>138****5621</td>
|
||||
<td><span style="font-family:monospace">WD-2024-002</span></td>
|
||||
<td><span class="tag tag-red">一键告警</span></td>
|
||||
<td style="font-weight:500">主动触发</td>
|
||||
<td>—</td>
|
||||
<td>2026-05-11 14:28</td>
|
||||
<td>采油一厂 第二作业区</td>
|
||||
<td><span class="link" onclick="openDetail('李建国','CQ001156','一键告警')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>王磊</td>
|
||||
<td>CQ002301</td>
|
||||
<td>采气一厂</td>
|
||||
<td>第一作业区</td>
|
||||
<td>139****8834</td>
|
||||
<td><span style="font-family:monospace">WD-2024-031</span></td>
|
||||
<td><span class="tag tag-purple">血氧异常</span></td>
|
||||
<td style="font-weight:500">88%</td>
|
||||
<td>≥95%</td>
|
||||
<td>2026-05-11 14:15</td>
|
||||
<td>采气一厂 第一作业区</td>
|
||||
<td><span class="link" onclick="openDetail('王磊','CQ002301','血氧异常')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孙浩然</td>
|
||||
<td>CQ004210</td>
|
||||
<td>天然气处理厂</td>
|
||||
<td>压缩作业区</td>
|
||||
<td>137****2209</td>
|
||||
<td><span style="font-family:monospace">WD-2024-022</span></td>
|
||||
<td><span class="tag tag-cyan">体温异常</span></td>
|
||||
<td style="font-weight:500">37.6℃</td>
|
||||
<td>36.0~37.3℃</td>
|
||||
<td>2026-05-11 13:50</td>
|
||||
<td>天然气处理厂 压缩作业区</td>
|
||||
<td><span class="link" onclick="openDetail('孙浩然','CQ004210','体温异常')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张伟</td>
|
||||
<td>CQ001234</td>
|
||||
<td>采油一厂</td>
|
||||
<td>第一作业区</td>
|
||||
<td>136****7745</td>
|
||||
<td><span style="font-family:monospace">WD-2024-001</span></td>
|
||||
<td><span class="tag tag-orange">心率异常</span></td>
|
||||
<td style="font-weight:500">150 次/分钟</td>
|
||||
<td>60~100 bpm</td>
|
||||
<td>2026-05-11 11:20</td>
|
||||
<td>采油一厂 第一作业区</td>
|
||||
<td><span class="link" onclick="openDetail('张伟','CQ001234','心率异常')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>陈晓燕</td>
|
||||
<td>CQ001890</td>
|
||||
<td>采油一厂</td>
|
||||
<td>第二作业区</td>
|
||||
<td>135****4412</td>
|
||||
<td><span style="font-family:monospace">WD-2024-008</span></td>
|
||||
<td><span class="tag tag-red">一键告警</span></td>
|
||||
<td style="font-weight:500">主动触发</td>
|
||||
<td>—</td>
|
||||
<td>2026-05-11 09:45</td>
|
||||
<td>采油一厂 第二作业区</td>
|
||||
<td><span class="link" onclick="openDetail('陈晓燕','CQ001890','一键告警')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>刘志强</td>
|
||||
<td>CQ003102</td>
|
||||
<td>采油二厂</td>
|
||||
<td>第三作业区</td>
|
||||
<td>158****3301</td>
|
||||
<td><span style="font-family:monospace">WD-2024-045</span></td>
|
||||
<td><span class="tag tag-red">摔倒</span></td>
|
||||
<td style="font-weight:500">检测到摔倒</td>
|
||||
<td>—</td>
|
||||
<td>2026-05-11 08:32</td>
|
||||
<td>采油二厂 第三作业区</td>
|
||||
<td><span class="link" onclick="openDetail('刘志强','CQ003102','摔倒')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>赵明辉</td>
|
||||
<td>CQ002078</td>
|
||||
<td>采气一厂</td>
|
||||
<td>第二作业区</td>
|
||||
<td>186****7720</td>
|
||||
<td><span style="font-family:monospace">WD-2024-019</span></td>
|
||||
<td><span class="tag tag-orange">定位服务开关修改</span></td>
|
||||
<td style="font-weight:500">已关闭</td>
|
||||
<td>开启</td>
|
||||
<td>2026-05-11 08:10</td>
|
||||
<td>采气一厂 第二作业区</td>
|
||||
<td><span class="link" onclick="openDetail('赵明辉','CQ002078','定位服务开关修改')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>周婷</td>
|
||||
<td>CQ001567</td>
|
||||
<td>采油一厂</td>
|
||||
<td>第一作业区</td>
|
||||
<td>133****9956</td>
|
||||
<td><span style="font-family:monospace">WD-2024-012</span></td>
|
||||
<td><span class="tag tag-purple">血压异常</span></td>
|
||||
<td style="font-weight:500">152/98 mmHg</td>
|
||||
<td>90~140/60~90 mmHg</td>
|
||||
<td>2026-05-11 07:55</td>
|
||||
<td>采油一厂 第一作业区</td>
|
||||
<td><span class="link" onclick="openDetail('周婷','CQ001567','血压异常')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>马国庆</td>
|
||||
<td>CQ004501</td>
|
||||
<td>天然气处理厂</td>
|
||||
<td>净化作业区</td>
|
||||
<td>159****6643</td>
|
||||
<td><span style="font-family:monospace">WD-2024-038</span></td>
|
||||
<td><span class="tag tag-cyan">心电图异常</span></td>
|
||||
<td style="font-weight:500">房颤 100</td>
|
||||
<td>正常心电图</td>
|
||||
<td>2026-05-11 07:30</td>
|
||||
<td>天然气处理厂 净化作业区</td>
|
||||
<td><span class="link" onclick="openDetail('马国庆','CQ004501','心电图异常')">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 156 条</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">16</button>
|
||||
<button class="page-btn">»</button>
|
||||
<select class="filter-select" style="min-width:90px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 告警详情弹窗 -->
|
||||
<div class="modal-mask" id="detailModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3>告警详情</h3>
|
||||
<button class="modal__close" onclick="document.getElementById('detailModal').classList.remove('show')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:12px 16px;background:#FFF1F0;border-radius:var(--radius-md);margin-bottom:20px;border:1px solid #FFCCC7;">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8" stroke="#FF4D4F" stroke-width="2"/><path d="M10 6v4M10 13v1" stroke="#FF4D4F" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<span id="alertTypeBadge" style="font-size:var(--font-base);font-weight:600;color:var(--danger)">一键告警</span>
|
||||
</div>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item"><label>员工姓名</label><br><span id="dName">—</span></div>
|
||||
<div class="detail-item"><label>工号</label><br><span id="dEmpId">—</span></div>
|
||||
<div class="detail-item"><label>所属单位</label><br><span>采油一厂</span></div>
|
||||
<div class="detail-item"><label>作业区</label><br><span>第二作业区</span></div>
|
||||
<div class="detail-item"><label>设备编码</label><br><span style="font-family:monospace">WD-2024-002</span></div>
|
||||
<div class="detail-item"><label>设备类型</label><br><span>智能手环</span></div>
|
||||
<div class="detail-item"><label>告警时间</label><br><span>2026-05-11 14:28:33</span></div>
|
||||
<div class="detail-item"><label>当前数值</label><br><span id="alertValue" style="color:var(--danger);font-weight:600">主动触发</span></div>
|
||||
</div>
|
||||
<div style="margin-top:20px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2C4.79 2 3 3.79 3 6c0 3 4 6 4 6s4-3 4-6c0-2.21-1.79-4-4-4zm0 5.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3z" fill="#666"/></svg>
|
||||
<span style="font-size:var(--font-sm);font-weight:500;">告警位置</span>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);margin-left:8px;">陕西省西安市雁塔区电子一路96号</span>
|
||||
</div>
|
||||
<div style="position:relative;width:100%;height:220px;border-radius:var(--radius-md);overflow:hidden;background:#e8f4f8;border:1px solid var(--border);">
|
||||
<!-- 模拟地图底图 -->
|
||||
<svg width="100%" height="100%" viewBox="0 0 632 220" fill="none" preserveAspectRatio="xMidYMid slice">
|
||||
<rect width="632" height="220" fill="#EAF3E8"/>
|
||||
<!-- 道路 -->
|
||||
<path d="M0 110h632" stroke="#fff" stroke-width="8"/>
|
||||
<path d="M0 160h632" stroke="#fff" stroke-width="5" stroke-dasharray="0"/>
|
||||
<path d="M316 0v220" stroke="#fff" stroke-width="6"/>
|
||||
<path d="M150 0v220" stroke="#fff" stroke-width="4"/>
|
||||
<path d="M480 0v220" stroke="#fff" stroke-width="4"/>
|
||||
<!-- 建筑区块 -->
|
||||
<rect x="40" y="30" width="80" height="60" rx="4" fill="#D4E4D0" stroke="#B8D4B0"/>
|
||||
<rect x="180" y="30" width="100" height="55" rx="4" fill="#D4E4D0" stroke="#B8D4B0"/>
|
||||
<rect x="350" y="25" width="90" height="65" rx="4" fill="#D4E4D0" stroke="#B8D4B0"/>
|
||||
<rect x="500" y="35" width="95" height="55" rx="4" fill="#D4E4D0" stroke="#B8D4B0"/>
|
||||
<rect x="40" y="130" width="75" height="50" rx="4" fill="#D4E4D0" stroke="#B8D4B0"/>
|
||||
<rect x="180" y="125" width="100" height="60" rx="4" fill="#D4E4D0" stroke="#B8D4B0"/>
|
||||
<rect x="350" y="130" width="85" height="55" rx="4" fill="#D4E4D0" stroke="#B8D4B0"/>
|
||||
<rect x="510" y="125" width="80" height="60" rx="4" fill="#D4E4D0" stroke="#B8D4B0"/>
|
||||
<!-- 标注文字 -->
|
||||
<text x="80" y="65" text-anchor="middle" font-size="10" fill="#666">采油站A</text>
|
||||
<text x="230" y="62" text-anchor="middle" font-size="10" fill="#666">集输站</text>
|
||||
<text x="395" y="62" text-anchor="middle" font-size="10" fill="#666">注水站</text>
|
||||
<text x="547" y="67" text-anchor="middle" font-size="10" fill="#666">配电间</text>
|
||||
<!-- 定位标记点 -->
|
||||
<g transform="translate(316,110)">
|
||||
<circle r="20" fill="#FF4D4F" fill-opacity="0.15"/>
|
||||
<circle r="10" fill="#FF4D4F" fill-opacity="0.3"/>
|
||||
<circle r="5" fill="#FF4D4F"/>
|
||||
</g>
|
||||
<!-- 定位图标 -->
|
||||
<g transform="translate(316,85)">
|
||||
<path d="M0-18c-6.6 0-12 5.4-12 12 0 9 12 20 12 20s12-11 12-20c0-6.6-5.4-12-12-12zm0 16a4 4 0 110-8 4 4 0 010 8z" fill="#FF4D4F"/>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- 地图控件 -->
|
||||
<div style="position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:4px;">
|
||||
<button style="width:28px;height:28px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);">+</button>
|
||||
<button style="width:28px;height:28px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);">−</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="document.getElementById('detailModal').classList.remove('show')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openDetail(name, empId, type) {
|
||||
document.getElementById('dName').textContent = name;
|
||||
document.getElementById('dEmpId').textContent = empId;
|
||||
document.getElementById('alertTypeBadge').textContent = type;
|
||||
document.getElementById('detailModal').classList.add('show');
|
||||
}
|
||||
document.getElementById('detailModal').addEventListener('click', function(e){ if(e.target===this) this.classList.remove('show'); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,440 @@
|
||||
<!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;
|
||||
--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);--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__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);}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.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:150px;}
|
||||
.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: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__actions{display:flex;gap:8px;}
|
||||
.table-card__content{overflow-x:auto;}
|
||||
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);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.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);}
|
||||
.modal__close:hover{background:#f5f5f5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
|
||||
.form-group label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.form-group .form-control{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;font-family:inherit;}
|
||||
.form-group .form-control:focus{border-color:var(--primary);}
|
||||
.radio-group{display:flex;gap:24px;align-items:center;}
|
||||
.radio-group label{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);cursor:pointer;}
|
||||
.scope-panel{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;margin-top:8px;}
|
||||
.scope-panel .filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
|
||||
.date-range{display:flex;align-items:center;gap:8px;}
|
||||
.date-range input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;width:160px;}
|
||||
</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="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>系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">穿戴监测</div>
|
||||
<a href="tool-manage.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bind-record.html" class="sidebar-item">绑定记录</a>
|
||||
<a href="user-data.html" class="sidebar-item">用户数据</a>
|
||||
<a href="exception-event.html" class="sidebar-item">异常事件</a>
|
||||
<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>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>通知标题</label>
|
||||
<input class="filter-input" placeholder="请输入通知标题关键词">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>通知范围</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>全员通知</option>
|
||||
<option>指定员工</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>发送时间</label>
|
||||
<div class="date-range">
|
||||
<input type="date" value="2026-05-01">
|
||||
<span style="color:var(--text-secondary)">至</span>
|
||||
<input type="date" value="2026-05-11">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="table-card__actions" style="display:flex;gap:8px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary" onclick="openSendModal()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l10-5-5 10-2-4-3-1z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
发送通知
|
||||
</button>
|
||||
<button class="btn btn-default" onclick="void(0)">导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="void(0)">查看导出任务</button>
|
||||
</div>
|
||||
<!-- 通知记录表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">通知记录 <span style="font-size:var(--font-sm);color:var(--text-secondary);font-weight:400;">共 42 条</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>通知标题</th>
|
||||
<th>通知内容摘要</th>
|
||||
<th>通知范围</th>
|
||||
<th>发送时间</th>
|
||||
<th>发送人</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>关于高温作业期间加强健康监测的通知</td>
|
||||
<td style="max-width:240px;overflow:hidden;text-overflow:ellipsis;">近期气温持续偏高，请各位佩戴设备员工注意加强监测频次…</td>
|
||||
<td><span class="tag tag-blue">全员通知</span></td>
|
||||
<td>2026-05-10 09:00</td>
|
||||
<td>管理员</td>
|
||||
<td>
|
||||
<span class="link" onclick="openDetailModal(0)">查看详情</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>健康监测设备固件升级提醒</td>
|
||||
<td style="max-width:240px;overflow:hidden;text-overflow:ellipsis;">您的穿戴设备有新固件版本可用，请在安全区域操作升级…</td>
|
||||
<td><span class="tag tag-orange">指定员工</span></td>
|
||||
<td>2026-05-08 14:30</td>
|
||||
<td>管理员</td>
|
||||
<td>
|
||||
<span class="link" onclick="openDetailModal(1)">查看详情</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>关于本月体检数据核实的通知</td>
|
||||
<td style="max-width:240px;overflow:hidden;text-overflow:ellipsis;">请各位员工在本周内确认设备数据上传完整，如有异常请联系健管员…</td>
|
||||
<td><span class="tag tag-blue">全员通知</span></td>
|
||||
<td>2026-05-06 10:00</td>
|
||||
<td>管理员</td>
|
||||
<td>
|
||||
<span class="link" onclick="openDetailModal(2)">查看详情</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>血氧异常员工健康关怀通知</td>
|
||||
<td style="max-width:240px;overflow:hidden;text-overflow:ellipsis;">系统监测到您近期血氧数据偏低，请注意休息并联系健管员进行评估…</td>
|
||||
<td><span class="tag tag-orange">指定员工</span></td>
|
||||
<td>2026-05-05 15:20</td>
|
||||
<td>管理员</td>
|
||||
<td>
|
||||
<span class="link" onclick="openDetailModal(3)">查看详情</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>穿戴设备使用规范宣导</td>
|
||||
<td style="max-width:240px;overflow:hidden;text-overflow:ellipsis;">请各位员工严格按照操作手册佩戴使用健康监测设备，确保数据准确性…</td>
|
||||
<td><span class="tag tag-blue">全员通知</span></td>
|
||||
<td>2026-05-01 09:00</td>
|
||||
<td>管理员</td>
|
||||
<td>
|
||||
<span class="link" onclick="openDetailModal(4)">查看详情</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 42 条</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">4</button>
|
||||
<button class="page-btn">»</button>
|
||||
<select class="filter-select" style="min-width:90px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 发送通知弹窗 -->
|
||||
<div class="modal-mask" id="sendModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3>发送通知</h3>
|
||||
<button class="modal__close" onclick="closeModal('sendModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-group">
|
||||
<label>通知标题 <span style="color:var(--danger)">*</span></label>
|
||||
<input class="form-control" placeholder="请输入通知标题" style="height:36px;">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>通知内容 <span style="color:var(--danger)">*</span></label>
|
||||
<textarea class="form-control" rows="5" placeholder="请输入通知内容"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>通知范围 <span style="color:var(--danger)">*</span></label>
|
||||
<div class="radio-group">
|
||||
<label><input type="radio" name="scope" value="all" checked onchange="toggleScopePanel(this)"> 全员通知</label>
|
||||
<label><input type="radio" name="scope" value="specific" onchange="toggleScopePanel(this)"> 指定员工</label>
|
||||
</div>
|
||||
<!-- 指定员工选择面板 -->
|
||||
<div class="scope-panel" id="specificPanel" style="display:none;">
|
||||
<div class="scope-panel .filter-row" style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px;">
|
||||
<select class="filter-select" style="min-width:150px;">
|
||||
<option>选择单位</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>采气二厂</option>
|
||||
<option>天然气处理厂</option>
|
||||
</select>
|
||||
<input class="filter-input" placeholder="姓名/工号搜索" style="min-width:160px;">
|
||||
<button class="btn btn-default" style="height:36px;">搜索</button>
|
||||
</div>
|
||||
<div style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;min-height:80px;background:#FAFAFA;">
|
||||
<div style="font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:8px;">已选员工（0人）：</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-placeholder);">请搜索并选择通知对象</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('sendModal')">取消</button>
|
||||
<button class="btn btn-primary">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 通知详情弹窗 -->
|
||||
<div class="modal-mask" id="detailModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3>通知详情</h3>
|
||||
<button class="modal__close" onclick="closeModal('detailModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="margin-bottom:16px;">
|
||||
<div id="detailTitle" style="font-size:var(--font-base);font-weight:600;margin-bottom:8px;"></div>
|
||||
<div id="detailMeta" style="font-size:var(--font-xs);color:var(--text-secondary);"></div>
|
||||
</div>
|
||||
<div id="detailContent" style="border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;font-size:var(--font-sm);line-height:1.8;color:var(--text-primary);"></div>
|
||||
<!-- 指定员工时显示通知对象列表 -->
|
||||
<div id="detailTargetSection" style="display:none;margin-top:16px;">
|
||||
<div style="font-size:var(--font-sm);font-weight:600;margin-bottom:8px;">通知对象 <span id="detailTargetCount" style="font-weight:400;color:var(--text-secondary);"></span></div>
|
||||
<div style="border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;">
|
||||
<table>
|
||||
<thead><tr><th>员工姓名</th><th>工号</th><th>所属单位</th></tr></thead>
|
||||
<tbody id="detailTargetBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('detailModal')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 阅读统计弹窗 -->
|
||||
<div class="modal-mask" id="readStatModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3>阅读统计</h3>
|
||||
<button class="modal__close" onclick="closeModal('readStatModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="display:flex;gap:24px;margin-bottom:20px;padding:16px;background:#F8FBFF;border-radius:var(--radius-md);">
|
||||
<div style="text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--primary)">89</div><div style="font-size:var(--font-xs);color:var(--text-secondary)">通知人数</div></div>
|
||||
<div style="text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--success)">72</div><div style="font-size:var(--font-xs);color:var(--text-secondary)">已读人数</div></div>
|
||||
<div style="text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--warning)">17</div><div style="font-size:var(--font-xs);color:var(--text-secondary)">未读人数</div></div>
|
||||
<div style="text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--text-secondary)">80.9%</div><div style="font-size:var(--font-xs);color:var(--text-secondary)">已读率</div></div>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr><th>员工姓名</th><th>工号</th><th>所属单位</th><th>阅读时间</th><th>状态</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>张伟</td><td>CQ001234</td><td>采油一厂</td><td>2026-05-10 09:15</td><td><span class="tag tag-green">已读</span></td></tr>
|
||||
<tr><td>李建国</td><td>CQ001156</td><td>采油一厂</td><td>2026-05-10 10:02</td><td><span class="tag tag-green">已读</span></td></tr>
|
||||
<tr><td>王磊</td><td>CQ002301</td><td>采气一厂</td><td>—</td><td><span class="tag" style="background:#F5F5F5;color:#999">未读</span></td></tr>
|
||||
<tr><td>陈晓燕</td><td>CQ001890</td><td>采油一厂</td><td>2026-05-10 09:30</td><td><span class="tag tag-green">已读</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('readStatModal')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 通知示例数据 */
|
||||
var NOTIFICATIONS = [
|
||||
{
|
||||
title: '关于高温作业期间加强健康监测的通知',
|
||||
scope: '全员通知',
|
||||
time: '2026-05-10 09:00',
|
||||
sender: '管理员',
|
||||
content: '近期气温持续偏高，高温作业环境对佩戴健康监测设备的员工健康影响较大。请各位佩戴设备的员工注意以下事项：<br><br>1. 高温时段（12:00-15:00）适当减少户外作业时间；<br>2. 如设备出现心率持续超过110bpm或体温超过37.5℃的告警，请立即移至阴凉处并及时联系健管员；<br>3. 每日结束作业后请将设备放置充电，确保第二天数据上报正常。<br><br>如有任何问题，请联系您所在单位的健康管理员。',
|
||||
targets: null
|
||||
},
|
||||
{
|
||||
title: '健康监测设备固件升级提醒',
|
||||
scope: '指定员工',
|
||||
time: '2026-05-08 14:30',
|
||||
sender: '管理员',
|
||||
content: '您的穿戴设备有新固件版本（v2.3.1）可用，本次升级修复了心率采集偶发中断的问题，并优化了电池续航。请在安全区域（非高温/高压作业环境）完成升级操作。<br><br>升级步骤：<br>1. 将设备连接充电底座，确保电量 ≥ 50%；<br>2. 打开手机端"健康长庆"APP → 设备管理 → 固件更新；<br>3. 升级过程约 3 分钟，期间请勿断开连接。',
|
||||
targets: [
|
||||
{ name: '张伟', code: 'CQ001234', dept: '采油一厂' },
|
||||
{ name: '李建国', code: 'CQ001156', dept: '采油一厂' },
|
||||
{ name: '王磊', code: 'CQ002301', dept: '采气一厂' },
|
||||
{ name: '赵敏', code: 'CQ003012', dept: '天然气处理厂' },
|
||||
{ name: '刘洋', code: 'CQ001890', dept: '采油二厂' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '关于本月体检数据核实的通知',
|
||||
scope: '全员通知',
|
||||
time: '2026-05-06 10:00',
|
||||
sender: '管理员',
|
||||
content: '请各位员工在本周内确认设备数据上传完整，如有异常请联系健管员进行评估。<br><br>核实要点：<br>1. 检查最近 7 天的心率、血氧、体温数据是否有缺失时段；<br>2. 若发现数据中断超过 4 小时，请检查设备佩戴情况或联系管理员更换设备；<br>3. 数据核实截止时间为 2026-05-12 18:00。',
|
||||
targets: null
|
||||
},
|
||||
{
|
||||
title: '血氧异常员工健康关怀通知',
|
||||
scope: '指定员工',
|
||||
time: '2026-05-05 15:20',
|
||||
sender: '管理员',
|
||||
content: '系统监测到您近期血氧数据偏低（近 3 日平均 SpO₂ < 94%），请注意以下事项：<br><br>1. 减少高强度体力劳动，适当增加休息时间；<br>2. 如有头晕、胸闷等不适症状，请立即联系驻场健管员；<br>3. 建议近期进行一次线下血氧复测，排除设备误差。<br><br>您的健康是我们最大的关注，如需帮助请随时联系。',
|
||||
targets: [
|
||||
{ name: '王磊', code: 'CQ002301', dept: '采气一厂' },
|
||||
{ name: '陈晓燕', code: 'CQ001890', dept: '采油一厂' },
|
||||
{ name: '周强', code: 'CQ002156', dept: '采气二厂' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '穿戴设备使用规范宣导',
|
||||
scope: '全员通知',
|
||||
time: '2026-05-01 09:00',
|
||||
sender: '管理员',
|
||||
content: '请各位员工严格按照操作手册佩戴使用健康监测设备，确保数据准确性。<br><br>佩戴规范：<br>1. 手环/手表应佩戴于手腕上方约一指宽处，松紧适中；<br>2. 运动、洗手后请检查设备位置，避免滑落或过松；<br>3. 每日睡前将设备放置充电底座，确保次日数据采集完整；<br>4. 禁止私自拆卸或改装设备。<br><br>违规使用可能导致数据失真，影响健康预警的及时性。',
|
||||
targets: null
|
||||
}
|
||||
];
|
||||
|
||||
function openSendModal(){ document.getElementById('sendModal').classList.add('show'); }
|
||||
function openReadStat(){ document.getElementById('readStatModal').classList.add('show'); }
|
||||
function closeModal(id){ document.getElementById(id).classList.remove('show'); }
|
||||
|
||||
function openDetailModal(idx){
|
||||
var d = NOTIFICATIONS[idx];
|
||||
if(!d) return;
|
||||
var isSpecific = d.scope === '指定员工';
|
||||
var tagClass = isSpecific ? 'tag-orange' : 'tag-blue';
|
||||
/* 基本信息 */
|
||||
document.getElementById('detailTitle').textContent = d.title;
|
||||
document.getElementById('detailMeta').innerHTML = '发送时间：' + d.time + ' | 发送人：' + d.sender + ' | 通知范围：<span class="tag ' + tagClass + '">' + d.scope + '</span>';
|
||||
document.getElementById('detailContent').innerHTML = d.content;
|
||||
/* 通知对象区域 */
|
||||
var section = document.getElementById('detailTargetSection');
|
||||
if(isSpecific && d.targets && d.targets.length){
|
||||
section.style.display = '';
|
||||
document.getElementById('detailTargetCount').textContent = '（共 ' + d.targets.length + ' 人）';
|
||||
var html = '';
|
||||
d.targets.forEach(function(t){
|
||||
html += '<tr><td>' + t.name + '</td><td>' + t.code + '</td><td>' + t.dept + '</td></tr>';
|
||||
});
|
||||
document.getElementById('detailTargetBody').innerHTML = html;
|
||||
} else {
|
||||
section.style.display = 'none';
|
||||
}
|
||||
document.getElementById('detailModal').classList.add('show');
|
||||
}
|
||||
|
||||
function toggleScopePanel(el){
|
||||
document.getElementById('specificPanel').style.display = el.value === 'specific' ? '' : 'none';
|
||||
}
|
||||
document.querySelectorAll('.modal-mask').forEach(function(m){
|
||||
m.addEventListener('click', function(e){ if(e.target===m) m.classList.remove('show'); });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,393 @@
|
||||
<!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;
|
||||
--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);--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__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);}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.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:150px;}
|
||||
.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: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__actions{display:flex;gap:8px;}
|
||||
.table-card__content{overflow-x:auto;}
|
||||
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);}
|
||||
thead th.group-header{text-align:center;background:#F0F7FF;color:var(--primary);font-weight:600;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);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);}
|
||||
.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);}.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);}
|
||||
.abnormal{color:var(--danger);font-weight:500;}
|
||||
.date-range{display:flex;align-items:center;gap:8px;}
|
||||
.date-range input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;width:140px;}
|
||||
/* 说明框 */
|
||||
.info-tip{display:flex;align-items:flex-start;gap:8px;padding:10px 16px;background:#F0F7FF;border-radius:var(--radius-md);margin-bottom:16px;border:1px solid #BAE0FF;font-size:var(--font-xs);color:#0958D9;}
|
||||
</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="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>系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">穿戴监测</div>
|
||||
<a href="tool-manage.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bind-record.html" class="sidebar-item">绑定记录</a>
|
||||
<a href="user-data.html" class="sidebar-item">用户数据</a>
|
||||
<a href="exception-event.html" class="sidebar-item">异常事件</a>
|
||||
<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>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="info-tip">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:1px;"><circle cx="7" cy="7" r="6" stroke="#1890FF" stroke-width="1.5"/><path d="M7 6v4M7 4.5v.5" stroke="#1890FF" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
统计每位员工在所选日期范围内的设备佩戴情况，包括应佩戴天数、实际佩戴天数及最大连续未佩戴天数。
|
||||
</div>
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>日期范围</label>
|
||||
<div class="date-range">
|
||||
<input type="date" class="filter-input" value="2026-05-05" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary)">至</span>
|
||||
<input type="date" class="filter-input" value="2026-05-11" style="min-width:140px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工号</label>
|
||||
<input class="filter-input" placeholder="请输入工号" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门</label>
|
||||
<select class="filter-select" style="min-width:150px;">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>采气二厂</option>
|
||||
<option>天然气处理厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="table-card__actions" style="display:flex;gap:8px;margin-bottom:16px;">
|
||||
<button class="btn btn-default" onclick="void(0)">导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="void(0)">导出详细明细</button>
|
||||
<button class="btn btn-default" onclick="void(0)">查看导出任务</button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">个人数据统计 <span style="font-size:var(--font-sm);color:var(--text-secondary);font-weight:400;">共 89 条</span></span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<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>CQ001234</td><td>采油一厂</td><td>第一作业区</td><td>WD-20260101</td><td>采油一厂</td>
|
||||
<td>7</td><td>7</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李建国</td><td>CQ001156</td><td>采油一厂</td><td>第一作业区</td><td>WD-20260102</td><td>采油一厂</td>
|
||||
<td>7</td><td>5</td><td><span class="abnormal">2</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>王磊</td><td>CQ002301</td><td>采气一厂</td><td>采气作业区</td><td>WD-20260103</td><td>采气一厂</td>
|
||||
<td>7</td><td>6</td><td>1</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>陈晓燕</td><td>CQ001890</td><td>采油一厂</td><td>第二作业区</td><td>WD-20260104</td><td>采油一厂</td>
|
||||
<td>7</td><td>7</td><td>0</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孙浩然</td><td>CQ004210</td><td>天然气处理厂</td><td>集输大队</td><td>WD-20260105</td><td>天然气处理厂</td>
|
||||
<td>7</td><td>4</td><td><span class="abnormal">3</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>赵明辉</td><td>CQ003042</td><td>采油二厂</td><td>第一作业区</td><td>WD-20260106</td><td>采油二厂</td>
|
||||
<td>7</td><td>6</td><td>1</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>刘洋</td><td>CQ003159</td><td>采油二厂</td><td>第二作业区</td><td>WD-20260107</td><td>采油二厂</td>
|
||||
<td>7</td><td>0</td><td><span class="abnormal">7</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 89 条</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">9</button>
|
||||
<button class="page-btn">»</button>
|
||||
<select class="filter-select" style="min-width:90px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
/* 弹窗 */
|
||||
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;display:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:94vw;max-width:1500px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,0.2);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;}
|
||||
.modal__close:hover{background:#f0f0f0;}
|
||||
.modal__info{padding:16px 24px;border-bottom:1px solid #f5f5f5;flex-shrink:0;display:flex;gap:32px;flex-wrap:wrap;background:#FAFCFF;}
|
||||
.modal__info-item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);}
|
||||
.modal__info-label{color:var(--text-secondary);}
|
||||
.modal__info-val{color:var(--text-primary);font-weight:500;}
|
||||
.modal__toolbar{display:flex;align-items:center;justify-content:flex-end;padding:12px 24px;border-bottom:1px solid #f5f5f5;flex-shrink:0;}
|
||||
.modal__body{flex:1;overflow:auto;padding:0;}
|
||||
.modal__body table{border-collapse:separate;border-spacing:0;min-width:100%;}
|
||||
.modal__body table th,.modal__body table td{padding:10px 14px;font-size:var(--font-xs);text-align:center;white-space:nowrap;border-bottom:1px solid var(--border);}
|
||||
.modal__body table th{position:sticky;top:0;z-index:6;background:#FAFAFA;font-weight:500;}
|
||||
.modal__body table th.group-header{background:#F0F7FF;color:var(--primary);font-weight:600;}
|
||||
.modal__body table .col-fixed-left{position:sticky;left:0;z-index:8;background:#fff;min-width:100px;}
|
||||
.modal__body table th.col-fixed-left{background:#FAFAFA;z-index:10;}
|
||||
.modal__body table .col-fixed-left::after{content:'';position:absolute;top:0;right:-6px;bottom:0;width:6px;background:linear-gradient(to right,rgba(0,0,0,0.06),transparent);pointer-events:none;}
|
||||
.modal__body table tbody tr:hover td{background:#F8FBFF;}
|
||||
.modal__body table tbody tr:hover .col-fixed-left{background:#F8FBFF;}
|
||||
.modal__footer{display:flex;align-items:center;justify-content:flex-end;padding:12px 24px;border-top:1px solid var(--border);flex-shrink:0;gap:8px;}
|
||||
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 24px;border-radius:6px;font-size:var(--font-sm);z-index:2000;opacity:0;transition:opacity .3s;pointer-events:none;}
|
||||
.toast.show{opacity:1;}
|
||||
</style>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<!-- 查看明细弹窗 -->
|
||||
<div class="modal-mask" id="detailModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__title" id="modalTitle">个人数据明细</span>
|
||||
<button class="modal__close" onclick="closeModal()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="#666" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal__info" id="modalInfo"></div>
|
||||
<div class="modal__toolbar">
|
||||
<button class="btn btn-primary" onclick="handleExport()">导出</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<table>
|
||||
<thead id="detailThead"></thead>
|
||||
<tbody id="detailTbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function getDateRange() {
|
||||
var inputs = document.querySelectorAll('.date-range input[type="date"]');
|
||||
return { start: inputs[0].value, end: inputs[1].value };
|
||||
}
|
||||
function getDatesInRange(start, end) {
|
||||
var dates = [], cur = new Date(start), endD = new Date(end);
|
||||
while (cur <= endD) { dates.push(cur.toISOString().slice(0,10)); cur.setDate(cur.getDate()+1); }
|
||||
return dates;
|
||||
}
|
||||
|
||||
function openDetailModal(row) {
|
||||
var cells = row.querySelectorAll('td');
|
||||
var emp = {
|
||||
name: cells[0].textContent.trim(),
|
||||
code: cells[1].textContent.trim(),
|
||||
unit: cells[2].textContent.trim(),
|
||||
dept: cells[3].textContent.trim(),
|
||||
device: cells[4].textContent.trim(),
|
||||
deviceUnit: cells[5].textContent.trim()
|
||||
};
|
||||
|
||||
document.getElementById('modalTitle').textContent = '个人数据明细 - ' + emp.name;
|
||||
document.getElementById('modalInfo').innerHTML =
|
||||
'<div class="modal__info-item"><span class="modal__info-label">姓名：</span><span class="modal__info-val">' + emp.name + '</span></div>' +
|
||||
'<div class="modal__info-item"><span class="modal__info-label">工号：</span><span class="modal__info-val">' + emp.code + '</span></div>' +
|
||||
'<div class="modal__info-item"><span class="modal__info-label">单位：</span><span class="modal__info-val">' + emp.unit + '</span></div>' +
|
||||
'<div class="modal__info-item"><span class="modal__info-label">部门：</span><span class="modal__info-val">' + emp.dept + '</span></div>' +
|
||||
'<div class="modal__info-item"><span class="modal__info-label">设备：</span><span class="modal__info-val">' + emp.device + '</span></div>' +
|
||||
'<div class="modal__info-item"><span class="modal__info-label">日期范围：</span><span class="modal__info-val">' + getDateRange().start + ' 至 ' + getDateRange().end + '</span></div>';
|
||||
|
||||
var range = getDateRange();
|
||||
var dates = getDatesInRange(range.start, range.end);
|
||||
|
||||
/* 表头 */
|
||||
var thead = document.getElementById('detailThead');
|
||||
thead.innerHTML =
|
||||
'<tr>' +
|
||||
'<th rowspan="2" class="col-fixed-left" style="vertical-align:middle;">数据日期</th>' +
|
||||
'<th colspan="3" class="group-header">心率(bpm)</th>' +
|
||||
'<th colspan="3" class="group-header">静息心率(bpm)</th>' +
|
||||
'<th colspan="3" class="group-header">血氧(%)</th>' +
|
||||
'<th colspan="3" class="group-header">压力</th>' +
|
||||
'<th colspan="3" class="group-header">体温(℃)</th>' +
|
||||
'<th colspan="3" class="group-header">体表温度(℃)</th>' +
|
||||
'<th colspan="3" class="group-header">血压(mmHg)</th>' +
|
||||
'<th colspan="4" class="group-header">睡眠</th>' +
|
||||
'<th colspan="4" class="group-header">小睡</th>' +
|
||||
'<th colspan="4" class="group-header">运动</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><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>';
|
||||
|
||||
/* 模拟数据 */
|
||||
var tbody = document.getElementById('detailTbody');
|
||||
var rows = '';
|
||||
dates.forEach(function(d) {
|
||||
var hr = rand(60,110), hrMin = rand(55,70), hrAvg = rand(65,85);
|
||||
var rhr = rand(55,75), rhrMin = rand(50,60), rhrAvg = rand(55,65);
|
||||
var spo2 = rand(95,100), spo2Min = rand(90,96), spo2Avg = rand(94,98);
|
||||
var stress = rand(40,90), stressMin = rand(20,45), stressAvg = rand(35,60);
|
||||
var temp = (36 + Math.random()*1.5).toFixed(1), tempMin = (35.8 + Math.random()*0.5).toFixed(1), tempAvg = (36 + Math.random()*0.6).toFixed(1);
|
||||
var sTemp = (35.5 + Math.random()*1.5).toFixed(1), sTempMin = (35 + Math.random()*0.8).toFixed(1), sTempAvg = (35.5 + Math.random()*0.6).toFixed(1);
|
||||
var bpMax = rand(110,145) + '/' + rand(70,90), bpMin = rand(95,115) + '/' + rand(60,75), bpAvg = rand(105,125) + '/' + rand(65,80);
|
||||
var sleepN = rand(1,3), sleepMax = rand(4,8)+'h'+rand(0,59)+'min', sleepMin = rand(1,4)+'h'+rand(0,59)+'min', sleepTotal = rand(6,9)+'h'+rand(0,59)+'min';
|
||||
var napN = rand(0,2), napMax = rand(15,60)+'min', napMin = rand(10,30)+'min', napTotal = rand(20,90)+'min';
|
||||
var exN = rand(0,3), exTotal = rand(20,90)+'min', exDist = (Math.random()*8).toFixed(1)+'km', exCal = rand(100,500)+'kcal';
|
||||
|
||||
rows += '<tr>';
|
||||
rows += '<td class="col-fixed-left" style="font-weight:500;">' + d + '</td>';
|
||||
rows += '<td>'+hr+'</td><td>'+hrMin+'</td><td>'+hrAvg+'</td>';
|
||||
rows += '<td>'+rhr+'</td><td>'+rhrMin+'</td><td>'+rhrAvg+'</td>';
|
||||
rows += '<td>'+spo2+'</td><td>'+spo2Min+'</td><td>'+spo2Avg+'</td>';
|
||||
rows += '<td>'+stress+'</td><td>'+stressMin+'</td><td>'+stressAvg+'</td>';
|
||||
rows += '<td>'+temp+'</td><td>'+tempMin+'</td><td>'+tempAvg+'</td>';
|
||||
rows += '<td>'+sTemp+'</td><td>'+sTempMin+'</td><td>'+sTempAvg+'</td>';
|
||||
rows += '<td>'+bpMax+'</td><td>'+bpMin+'</td><td>'+bpAvg+'</td>';
|
||||
rows += '<td>'+sleepN+'</td><td>'+sleepMax+'</td><td>'+sleepMin+'</td><td>'+sleepTotal+'</td>';
|
||||
rows += '<td>'+napN+'</td><td>'+napMax+'</td><td>'+napMin+'</td><td>'+napTotal+'</td>';
|
||||
rows += '<td>'+exN+'</td><td>'+exTotal+'</td><td>'+exDist+'</td><td>'+exCal+'</td>';
|
||||
rows += '</tr>';
|
||||
});
|
||||
tbody.innerHTML = rows;
|
||||
document.getElementById('detailModal').classList.add('show');
|
||||
}
|
||||
|
||||
function rand(min, max) { return Math.floor(Math.random()*(max-min+1))+min; }
|
||||
|
||||
function closeModal() { document.getElementById('detailModal').classList.remove('show'); }
|
||||
|
||||
function showToast(msg) {
|
||||
var el = document.getElementById('toast');
|
||||
el.textContent = msg; el.classList.add('show');
|
||||
setTimeout(function(){ el.classList.remove('show'); }, 2500);
|
||||
}
|
||||
|
||||
function handleExport() { closeModal(); showToast('导出任务已生成'); }
|
||||
|
||||
document.getElementById('detailModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) closeModal();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.link').forEach(function(link) {
|
||||
link.addEventListener('click', function() { openDetailModal(this.closest('tr')); });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,762 @@
|
||||
<!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;
|
||||
--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);--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__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);}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.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:150px;}
|
||||
.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: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;}
|
||||
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);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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#666;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.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:960px;max-height:90vh;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);}
|
||||
.modal__close:hover{background:#f5f5f5;}
|
||||
.modal__body{padding:24px;}
|
||||
.emp-info-bar{display:flex;gap:32px;padding:16px 20px;background:#F8FBFF;border-radius:var(--radius-md);margin-bottom:20px;border:1px solid #D6E8FF;}
|
||||
.emp-info-item label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.emp-info-item span{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.detail-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;}
|
||||
.detail-tab{padding:10px 20px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;}
|
||||
.detail-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.chart-controls{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
|
||||
.chart-controls label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.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%;}
|
||||
.abnormal-val{color:var(--danger);font-weight:500;}
|
||||
/* 总览面板 */
|
||||
.overview-time-bar{display:flex;justify-content:center;gap:0;margin-bottom:20px;}
|
||||
.time-btn{height:32px;padding:0 16px;border:1px solid var(--border);background:#fff;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);transition:all .15s;}
|
||||
.time-btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
|
||||
.time-btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
|
||||
.time-btn:not(:first-child){border-left:none;}
|
||||
.time-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.overview-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;}
|
||||
.overview-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 20px;}
|
||||
.overview-card--wide{grid-column:1/2;}
|
||||
.overview-card__title{font-size:var(--font-sm);font-weight:600;margin-bottom:12px;color:var(--text-primary);}
|
||||
.overview-card__body--cols{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}
|
||||
.overview-card__body--cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 24px;}
|
||||
.overview-row{display:flex;justify-content:space-between;padding:6px 0;font-size:var(--font-sm);border-bottom:1px solid #f5f5f5;}
|
||||
.overview-row:last-child{border-bottom:none;}
|
||||
.overview-row span:first-child{color:var(--text-secondary);}
|
||||
.overview-row span:last-child{color:var(--text-primary);font-weight:500;}
|
||||
/* 视图切换 */
|
||||
.metric-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
|
||||
.metric-toolbar__left{display:flex;align-items:center;gap:16px;}
|
||||
.time-granularity{display:flex;gap:0;}
|
||||
.time-granularity .time-btn{min-width:48px;}
|
||||
.date-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px;}
|
||||
.date-nav__btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:16px;display:inline-flex;align-items:center;justify-content:center;}
|
||||
.date-nav__btn:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.date-nav__text{font-size:var(--font-base);font-weight:600;min-width:120px;text-align:center;}
|
||||
.metric-summary{display:flex;justify-content:center;gap:48px;margin-bottom:20px;}
|
||||
.metric-summary__item{display:flex;flex-direction:column;align-items:center;gap:2px;}
|
||||
.metric-summary__value{font-size:22px;font-weight:700;color:var(--text-primary);}
|
||||
.metric-summary__unit{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.metric-summary__label{font-size:var(--font-xs);color:var(--text-secondary);margin-top:2px;}
|
||||
.tab-panel{min-height:200px;}
|
||||
</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="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>系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">穿戴监测</div>
|
||||
<a href="tool-manage.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bind-record.html" class="sidebar-item">绑定记录</a>
|
||||
<a href="user-data.html" class="sidebar-item active">用户数据</a>
|
||||
<a href="exception-event.html" class="sidebar-item">异常事件</a>
|
||||
<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>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" placeholder="请输入员工编号" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>设备编码</label>
|
||||
<input class="filter-input" placeholder="请输入设备编码" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门</label>
|
||||
<select class="filter-select" style="min-width:150px;">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>采气二厂</option>
|
||||
<option>天然气处理厂</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="table-card__actions" style="display:flex;gap:8px;margin-bottom:16px;">
|
||||
<button class="btn btn-default" onclick="void(0)">导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="void(0)">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">用户监测数据 <span style="font-size:var(--font-sm);color:var(--text-secondary);font-weight:400;">共 89 人</span></span>
|
||||
</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 rowspan="2">设备编码</th>
|
||||
<th colspan="9" style="text-align:center;">最新监测数据</th>
|
||||
<th rowspan="2">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>心率(次/分钟)</th>
|
||||
<th>血氧(%)</th>
|
||||
<th>压力</th>
|
||||
<th>睡眠(分钟)</th>
|
||||
<th>体温(℃)</th>
|
||||
<th>步数(千米)</th>
|
||||
<th>锻炼(分钟)</th>
|
||||
<th>血压(mmHg)</th>
|
||||
<th>心电图(次/分钟)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张伟</td>
|
||||
<td>CQ001234</td>
|
||||
<td>采油一厂</td>
|
||||
<td>作业一区</td>
|
||||
<td><span style="font-family:monospace">WD-2024-001</span></td>
|
||||
<td>76</td>
|
||||
<td>98</td>
|
||||
<td>32</td>
|
||||
<td>436</td>
|
||||
<td>36.5</td>
|
||||
<td>8.4</td>
|
||||
<td>45</td>
|
||||
<td>120/78</td>
|
||||
<td>窦性心率 75</td>
|
||||
<td><span class="link" onclick="openDetail('张伟','CQ001234')">数据详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李建国</td>
|
||||
<td>CQ001156</td>
|
||||
<td>采油一厂</td>
|
||||
<td>作业二区</td>
|
||||
<td><span style="font-family:monospace">WD-2024-002</span></td>
|
||||
<td><span class="abnormal-val">108</span></td>
|
||||
<td>97</td>
|
||||
<td>48</td>
|
||||
<td>385</td>
|
||||
<td>36.8</td>
|
||||
<td>5.2</td>
|
||||
<td>30</td>
|
||||
<td><span class="abnormal-val">152/98</span></td>
|
||||
<td>窦性心率 82</td>
|
||||
<td><span class="link" onclick="openDetail('李建国','CQ001156')">数据详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>王磊</td>
|
||||
<td>CQ002301</td>
|
||||
<td>采气一厂</td>
|
||||
<td>集气站</td>
|
||||
<td><span style="font-family:monospace">WD-2024-031</span></td>
|
||||
<td>72</td>
|
||||
<td><span class="abnormal-val">88</span></td>
|
||||
<td>55</td>
|
||||
<td>410</td>
|
||||
<td>36.6</td>
|
||||
<td>3.9</td>
|
||||
<td>20</td>
|
||||
<td>118/75</td>
|
||||
<td><span class="abnormal-val">房颤 100</span></td>
|
||||
<td><span class="link" onclick="openDetail('王磊','CQ002301')">数据详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>陈晓燕</td>
|
||||
<td>CQ001890</td>
|
||||
<td>采油一厂</td>
|
||||
<td>计量站</td>
|
||||
<td><span style="font-family:monospace">WD-2024-008</span></td>
|
||||
<td>68</td>
|
||||
<td>99</td>
|
||||
<td>25</td>
|
||||
<td>462</td>
|
||||
<td>36.4</td>
|
||||
<td>12.0</td>
|
||||
<td>60</td>
|
||||
<td>115/72</td>
|
||||
<td>窦性心率 68</td>
|
||||
<td><span class="link" onclick="openDetail('陈晓燕','CQ001890')">数据详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孙浩然</td>
|
||||
<td>CQ004210</td>
|
||||
<td>天然气处理厂</td>
|
||||
<td>压缩作业区</td>
|
||||
<td><span style="font-family:monospace">WD-2024-022</span></td>
|
||||
<td>82</td>
|
||||
<td>96</td>
|
||||
<td>38</td>
|
||||
<td>320</td>
|
||||
<td><span class="abnormal-val">37.6</span></td>
|
||||
<td>2.2</td>
|
||||
<td>15</td>
|
||||
<td>128/82</td>
|
||||
<td>窦性心率 80</td>
|
||||
<td><span class="link" onclick="openDetail('孙浩然','CQ004210')">数据详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 89 条</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>
|
||||
<select class="filter-select" style="min-width:90px;height:32px;"><option>20条/页</option><option>50条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 数据详情弹窗 -->
|
||||
<div class="modal-mask" id="detailModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3>监测数据详情 — <span id="detailName"></span></h3>
|
||||
<button class="modal__close" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="emp-info-bar">
|
||||
<div class="emp-info-item"><label>员工编号</label><br><span id="detailEmpId"></span></div>
|
||||
<div class="emp-info-item"><label>设备编码</label><br><span>WD-2024-001</span></div>
|
||||
<div class="emp-info-item"><label>设备型号</label><br><span>Band 9</span></div>
|
||||
<div class="emp-info-item"><label>所属单位</label><br><span>采油一厂</span></div>
|
||||
<div class="emp-info-item"><label>所属部门</label><br><span>作业一区</span></div>
|
||||
</div>
|
||||
<!-- Tab标签栏 -->
|
||||
<div class="detail-tabs">
|
||||
<div class="detail-tab active" onclick="switchMainTab(this,'overview')">总览</div>
|
||||
<div class="detail-tab" onclick="switchMainTab(this,'heart')">心率</div>
|
||||
<div class="detail-tab" onclick="switchMainTab(this,'oxygen')">血氧</div>
|
||||
<div class="detail-tab" onclick="switchMainTab(this,'stress')">压力</div>
|
||||
<div class="detail-tab" onclick="switchMainTab(this,'sleep')">睡眠</div>
|
||||
<div class="detail-tab" onclick="switchMainTab(this,'temp')">体温</div>
|
||||
<div class="detail-tab" onclick="switchMainTab(this,'exercise')">锻炼</div>
|
||||
<div class="detail-tab" onclick="switchMainTab(this,'steps')">步数</div>
|
||||
<div class="detail-tab" onclick="switchMainTab(this,'bp')">血压</div>
|
||||
<div class="detail-tab" onclick="switchMainTab(this,'ecg')">心电图</div>
|
||||
</div>
|
||||
<!-- 总览面板 -->
|
||||
<div class="tab-panel" id="panel-overview">
|
||||
<div class="overview-time-bar">
|
||||
<button class="time-btn active" onclick="switchTime(this)">今日</button>
|
||||
<button class="time-btn" onclick="switchTime(this)">近7日</button>
|
||||
<button class="time-btn" onclick="switchTime(this)">近14日</button>
|
||||
</div>
|
||||
<div class="overview-grid">
|
||||
<!-- 心率 -->
|
||||
<div class="overview-card overview-card--wide">
|
||||
<div class="overview-card__title">❤️ 心率</div>
|
||||
<div class="overview-card__body overview-card__body--cols">
|
||||
<div class="overview-col">
|
||||
<div class="overview-row"><span>心率最大值</span><span>92 (次/分钟)</span></div>
|
||||
<div class="overview-row"><span>心率最小值</span><span>62 (次/分钟)</span></div>
|
||||
<div class="overview-row"><span>心率平均值</span><span>76 (次/分钟)</span></div>
|
||||
</div>
|
||||
<div class="overview-col">
|
||||
<div class="overview-row"><span>静息心率最大值</span><span>78 (次/分钟)</span></div>
|
||||
<div class="overview-row"><span>静息心率最小值</span><span>58 (次/分钟)</span></div>
|
||||
<div class="overview-row"><span>静息心率平均值</span><span>65 (次/分钟)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 血氧 -->
|
||||
<div class="overview-card">
|
||||
<div class="overview-card__title">🫁 血氧</div>
|
||||
<div class="overview-card__body">
|
||||
<div class="overview-row"><span>血氧最大值</span><span>99 (%)</span></div>
|
||||
<div class="overview-row"><span>血氧最小值</span><span>95 (%)</span></div>
|
||||
<div class="overview-row"><span>血氧平均值</span><span>97 (%)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 睡眠 -->
|
||||
<div class="overview-card overview-card--wide">
|
||||
<div class="overview-card__title">🌙 睡眠</div>
|
||||
<div class="overview-card__body overview-card__body--cols">
|
||||
<div class="overview-col">
|
||||
<div class="overview-row"><span>夜间睡眠次数</span><span>1 (次)</span></div>
|
||||
<div class="overview-row"><span>夜间睡眠最长时长</span><span>7时32分</span></div>
|
||||
<div class="overview-row"><span>夜间睡眠最短时长</span><span>7时32分</span></div>
|
||||
<div class="overview-row"><span>夜间睡眠总时长</span><span>7时32分</span></div>
|
||||
</div>
|
||||
<div class="overview-col">
|
||||
<div class="overview-row"><span>零星小睡次数</span><span>2 (次)</span></div>
|
||||
<div class="overview-row"><span>零星睡眠最长时长</span><span>0时45分</span></div>
|
||||
<div class="overview-row"><span>零星小睡最短时长</span><span>0时20分</span></div>
|
||||
<div class="overview-row"><span>零星睡眠总时长</span><span>1时05分</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 压力 -->
|
||||
<div class="overview-card">
|
||||
<div class="overview-card__title">🧠 压力</div>
|
||||
<div class="overview-card__body">
|
||||
<div class="overview-row"><span>压力最大值</span><span>55</span></div>
|
||||
<div class="overview-row"><span>压力最小值</span><span>18</span></div>
|
||||
<div class="overview-row"><span>压力平均值</span><span>32</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 运动/锻炼 -->
|
||||
<div class="overview-card overview-card--wide">
|
||||
<div class="overview-card__title">🏃 运动</div>
|
||||
<div class="overview-card__body overview-card__body--cols3">
|
||||
<div class="overview-col">
|
||||
<div class="overview-row"><span>运动最大距离</span><span>5.2 (km)</span></div>
|
||||
<div class="overview-row"><span>运动最小距离</span><span>1.8 (km)</span></div>
|
||||
<div class="overview-row"><span>运动总距离</span><span>8.4 (km)</span></div>
|
||||
<div class="overview-row"><span>运动距离有效次数</span><span>2 (次)</span></div>
|
||||
</div>
|
||||
<div class="overview-col">
|
||||
<div class="overview-row"><span>最大卡路里</span><span>320 (千卡)</span></div>
|
||||
<div class="overview-row"><span>最小卡路里</span><span>150 (千卡)</span></div>
|
||||
<div class="overview-row"><span>总卡路里</span><span>470 (千卡)</span></div>
|
||||
<div class="overview-row"><span>卡路里有效次数</span><span>2 (次)</span></div>
|
||||
</div>
|
||||
<div class="overview-col">
|
||||
<div class="overview-row"><span>运动最大时长</span><span>0时52分</span></div>
|
||||
<div class="overview-row"><span>运动最小时长</span><span>0时25分</span></div>
|
||||
<div class="overview-row"><span>运动总时长</span><span>1时17分</span></div>
|
||||
<div class="overview-row"><span>运动有效次数</span><span>2 (次)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 体温 -->
|
||||
<div class="overview-card overview-card--wide">
|
||||
<div class="overview-card__title">🌡️ 体温</div>
|
||||
<div class="overview-card__body overview-card__body--cols">
|
||||
<div class="overview-col">
|
||||
<div class="overview-row"><span>体温最大值</span><span>36.8 (℃)</span></div>
|
||||
<div class="overview-row"><span>体温最小值</span><span>36.2 (℃)</span></div>
|
||||
<div class="overview-row"><span>体温平均值</span><span>36.5 (℃)</span></div>
|
||||
</div>
|
||||
<div class="overview-col">
|
||||
<div class="overview-row"><span>体表温度最大值</span><span>34.5 (℃)</span></div>
|
||||
<div class="overview-row"><span>体表温度最小值</span><span>33.8 (℃)</span></div>
|
||||
<div class="overview-row"><span>体表温度平均值</span><span>34.1 (℃)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 步数 -->
|
||||
<div class="overview-card">
|
||||
<div class="overview-card__title">👟 步数</div>
|
||||
<div class="overview-card__body">
|
||||
<div class="overview-row"><span>总步数数值</span><span>8,432</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 血压 -->
|
||||
<div class="overview-card">
|
||||
<div class="overview-card__title">🩸 血压</div>
|
||||
<div class="overview-card__body">
|
||||
<div class="overview-row"><span>收缩压最大值</span><span>135 (mmHg)</span></div>
|
||||
<div class="overview-row"><span>收缩压最小值</span><span>112 (mmHg)</span></div>
|
||||
<div class="overview-row"><span>舒张压最大值</span><span>88 (mmHg)</span></div>
|
||||
<div class="overview-row"><span>舒张压最小值</span><span>72 (mmHg)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 心电图 -->
|
||||
<div class="overview-card">
|
||||
<div class="overview-card__title">📈 心电图</div>
|
||||
<div class="overview-card__body">
|
||||
<div class="overview-row"><span>心电图最大值</span><span>82 (次/分钟)</span></div>
|
||||
<div class="overview-row"><span>心电图最小值</span><span>65 (次/分钟)</span></div>
|
||||
<div class="overview-row"><span>心电图平均值</span><span>75 (次/分钟)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 指标详情面板（心率/血氧/压力/睡眠/体温/步数共用） -->
|
||||
<div class="tab-panel" id="panel-metric" style="display:none;">
|
||||
<div class="metric-toolbar">
|
||||
<div class="metric-toolbar__left">
|
||||
<div class="time-granularity">
|
||||
<button class="time-btn active" onclick="switchGranularity(this)">日</button>
|
||||
<button class="time-btn" onclick="switchGranularity(this)">周</button>
|
||||
<button class="time-btn" onclick="switchGranularity(this)">月</button>
|
||||
<button class="time-btn" onclick="switchGranularity(this)">年</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-default" id="btnToggleList" onclick="toggleMetricView()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 3h10M2 7h10M2 11h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
列表展示
|
||||
</button>
|
||||
</div>
|
||||
<!-- 趋势图视图 -->
|
||||
<div id="metric-chart-view">
|
||||
<div class="date-nav">
|
||||
<button class="date-nav__btn" onclick="void(0)">‹</button>
|
||||
<span class="date-nav__text">2026-05-12</span>
|
||||
<button class="date-nav__btn" onclick="void(0)">›</button>
|
||||
</div>
|
||||
<div class="metric-summary" id="metricSummary">
|
||||
<div class="metric-summary__item"><span class="metric-summary__value" id="msVal1">92</span><span class="metric-summary__unit" id="msUnit1">次/分钟</span><span class="metric-summary__label" id="msLabel1">最高心率</span></div>
|
||||
<div class="metric-summary__item"><span class="metric-summary__value" id="msVal2">62</span><span class="metric-summary__unit" id="msUnit2">次/分钟</span><span class="metric-summary__label" id="msLabel2">最低心率</span></div>
|
||||
<div class="metric-summary__item"><span class="metric-summary__value" id="msVal3">76</span><span class="metric-summary__unit" id="msUnit3">次/分钟</span><span class="metric-summary__label" id="msLabel3">平均心率</span></div>
|
||||
</div>
|
||||
<div class="chart-area" id="trendChart"></div>
|
||||
</div>
|
||||
<!-- 列表视图 -->
|
||||
<div id="metric-table-view" style="display:none;">
|
||||
<div style="display:flex;gap:16px;margin-bottom:16px;align-items:center;">
|
||||
<div class="filter-item">
|
||||
<label style="font-size:var(--font-sm);color:var(--text-secondary);">日期</label>
|
||||
<input type="date" value="2026-05-12" style="height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;">
|
||||
</div>
|
||||
<button class="btn btn-default">导出</button>
|
||||
</div>
|
||||
<table class="data-history-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>上报时间</th>
|
||||
<th>数值</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="metricTableBody">
|
||||
<tr><td>14:32:05</td><td>76</td><td><span class="tag tag-green">正常</span></td></tr>
|
||||
<tr><td>14:02:05</td><td>79</td><td><span class="tag tag-green">正常</span></td></tr>
|
||||
<tr><td>13:32:05</td><td>72</td><td><span class="tag tag-green">正常</span></td></tr>
|
||||
<tr><td>13:02:05</td><td>85</td><td><span class="tag tag-green">正常</span></td></tr>
|
||||
<tr><td>12:32:05</td><td>108</td><td><span class="tag tag-red">异常</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 锻炼面板（仅列表） -->
|
||||
<div class="tab-panel" id="panel-exercise" style="display:none;">
|
||||
<div style="display:flex;gap:16px;margin-bottom:16px;align-items:center;">
|
||||
<div class="filter-item">
|
||||
<label style="font-size:var(--font-sm);color:var(--text-secondary);">日期</label>
|
||||
<input type="date" value="2026-05-12" style="height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;">
|
||||
</div>
|
||||
<button class="btn btn-default">导出</button>
|
||||
</div>
|
||||
<table class="data-history-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>开始时间</th>
|
||||
<th>结束时间</th>
|
||||
<th>运动类型</th>
|
||||
<th>时长(分钟)</th>
|
||||
<th>距离(km)</th>
|
||||
<th>卡路里(千卡)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>07:15</td><td>08:07</td><td>跑步</td><td>52</td><td>5.2</td><td>320</td></tr>
|
||||
<tr><td>17:30</td><td>17:55</td><td>步行</td><td>25</td><td>1.8</td><td>150</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 心电图面板（仅列表+详情弹窗） -->
|
||||
<div class="tab-panel" id="panel-ecg" style="display:none;">
|
||||
<div style="display:flex;gap:16px;margin-bottom:16px;align-items:center;">
|
||||
<div class="filter-item">
|
||||
<label style="font-size:var(--font-sm);color:var(--text-secondary);">日期</label>
|
||||
<input type="date" value="2026-05-12" style="height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;">
|
||||
</div>
|
||||
<button class="btn btn-default">导出</button>
|
||||
</div>
|
||||
<table class="data-history-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>测量时间</th>
|
||||
<th>测量结果</th>
|
||||
<th>测量值(次/分钟)</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>2026-05-12 14:30</td><td><span class="tag tag-green">窦性心率</span></td><td>75</td><td><span class="link" onclick="openEcgDetail('2026-05-12 14:30','窦性心率',75)">查看</span></td></tr>
|
||||
<tr><td>2026-05-12 12:15</td><td><span class="tag tag-red">房颤</span></td><td>100</td><td><span class="link" onclick="openEcgDetail('2026-05-12 12:15','房颤',100)">查看</span></td></tr>
|
||||
<tr><td>2026-05-12 10:00</td><td><span class="tag tag-orange">高低心率</span></td><td>112</td><td><span class="link" onclick="openEcgDetail('2026-05-12 10:00','高低心率',112)">查看</span></td></tr>
|
||||
<tr><td>2026-05-12 08:45</td><td><span class="tag tag-green">窦性心率</span></td><td>68</td><td><span class="link" onclick="openEcgDetail('2026-05-12 08:45','窦性心率',68)">查看</span></td></tr>
|
||||
<tr><td>2026-05-12 07:20</td><td><span class="tag" style="background:#F5F5F5;color:#666;">不确定</span></td><td>78</td><td><span class="link" onclick="openEcgDetail('2026-05-12 07:20','不确定',78)">查看</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 心电图趋势详情弹窗 -->
|
||||
<div class="modal-mask" id="ecgDetailModal">
|
||||
<div class="modal" style="width:720px;">
|
||||
<div class="modal__header">
|
||||
<h3>心电图趋势</h3>
|
||||
<button class="modal__close" onclick="document.getElementById('ecgDetailModal').classList.remove('show')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="display:flex;gap:24px;margin-bottom:16px;">
|
||||
<div><span style="font-size:var(--font-xs);color:var(--text-secondary);">测量时间</span><br><span style="font-weight:500;" id="ecgTime">—</span></div>
|
||||
<div><span style="font-size:var(--font-xs);color:var(--text-secondary);">测量结果</span><br><span style="font-weight:500;" id="ecgResult">—</span></div>
|
||||
<div><span style="font-size:var(--font-xs);color:var(--text-secondary);">测量值</span><br><span style="font-weight:500;" id="ecgValue">—</span> <span style="font-size:var(--font-xs);color:var(--text-secondary);">次/分钟</span></div>
|
||||
</div>
|
||||
<div style="background:#F9FAFB;border-radius:var(--radius-md);padding:16px;border:1px solid var(--border);" id="ecgChartArea"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var currentMetricTab = 'overview';
|
||||
var isListView = false;
|
||||
|
||||
function openDetail(name, empId) {
|
||||
document.getElementById('detailName').textContent = name;
|
||||
document.getElementById('detailEmpId').textContent = empId;
|
||||
document.getElementById('detailModal').classList.add('show');
|
||||
switchMainTab(document.querySelector('.detail-tab'), 'overview');
|
||||
}
|
||||
function closeModal() { document.getElementById('detailModal').classList.remove('show'); }
|
||||
document.getElementById('detailModal').addEventListener('click', function(e){ if(e.target===this) closeModal(); });
|
||||
|
||||
function switchMainTab(el, tab) {
|
||||
currentMetricTab = tab;
|
||||
document.querySelectorAll('.detail-tab').forEach(function(t){ t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.getElementById('panel-overview').style.display = 'none';
|
||||
document.getElementById('panel-metric').style.display = 'none';
|
||||
document.getElementById('panel-exercise').style.display = 'none';
|
||||
document.getElementById('panel-ecg').style.display = 'none';
|
||||
if (tab === 'overview') {
|
||||
document.getElementById('panel-overview').style.display = '';
|
||||
} else if (tab === 'exercise') {
|
||||
document.getElementById('panel-exercise').style.display = '';
|
||||
} else if (tab === 'ecg') {
|
||||
document.getElementById('panel-ecg').style.display = '';
|
||||
} else {
|
||||
document.getElementById('panel-metric').style.display = '';
|
||||
isListView = false;
|
||||
document.getElementById('btnToggleList').innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 3h10M2 7h10M2 11h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 列表展示';
|
||||
document.getElementById('metric-chart-view').style.display = '';
|
||||
document.getElementById('metric-table-view').style.display = 'none';
|
||||
updateMetricSummary(tab);
|
||||
renderTrendChart();
|
||||
}
|
||||
}
|
||||
function updateMetricSummary(tab) {
|
||||
var cfg = {
|
||||
heart: {v:['92','62','76'], u:['次/分钟','次/分钟','次/分钟'], l:['最高心率','最低心率','平均心率']},
|
||||
oxygen: {v:['99','95','97'], u:['%','%','%'], l:['最高血氧','最低血氧','平均血氧']},
|
||||
stress: {v:['55','18','32'], u:['','',''], l:['最高压力','最低压力','平均压力']},
|
||||
sleep: {v:['7h32m','0h45m','8h17m'], u:['','',''], l:['深睡时长','浅睡时长','总时长']},
|
||||
temp: {v:['36.8','36.2','36.5'], u:['℃','℃','℃'], l:['最高体温','最低体温','平均体温']},
|
||||
steps: {v:['8432','5216','3216'], u:['步','km','千卡'], l:['总步数','总距离','总消耗']},
|
||||
bp: {v:['135/88','112/72','120/78'], u:['mmHg','mmHg','mmHg'], l:['最高血压','最低血压','平均血压']},
|
||||
ecg: {v:['82','65','75'], u:['次/分钟','次/分钟','次/分钟'], l:['最高心率','最低心率','平均心率']}
|
||||
};
|
||||
var d = cfg[tab] || cfg.heart;
|
||||
for (var i = 1; i <= 3; i++) {
|
||||
document.getElementById('msVal'+i).textContent = d.v[i-1];
|
||||
document.getElementById('msUnit'+i).textContent = d.u[i-1];
|
||||
document.getElementById('msLabel'+i).textContent = d.l[i-1];
|
||||
}
|
||||
}
|
||||
function switchGranularity(el) {
|
||||
document.querySelectorAll('.time-granularity .time-btn').forEach(function(b){ b.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
renderTrendChart();
|
||||
}
|
||||
function toggleMetricView() {
|
||||
isListView = !isListView;
|
||||
var btn = document.getElementById('btnToggleList');
|
||||
if (isListView) {
|
||||
document.getElementById('metric-chart-view').style.display = 'none';
|
||||
document.getElementById('metric-table-view').style.display = '';
|
||||
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3h8v8H3z" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M3 7h8" stroke="currentColor" stroke-width="1"/></svg> 趋势图展示';
|
||||
} else {
|
||||
document.getElementById('metric-chart-view').style.display = '';
|
||||
document.getElementById('metric-table-view').style.display = 'none';
|
||||
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 3h10M2 7h10M2 11h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 列表展示';
|
||||
renderTrendChart();
|
||||
}
|
||||
}
|
||||
function renderTrendChart() {
|
||||
var c = document.getElementById('trendChart');
|
||||
if (!c) return;
|
||||
var W = c.offsetWidth || 880, H = 280;
|
||||
var pad = {t:20,r:20,b:40,l:50};
|
||||
var cw = W - pad.l - pad.r, ch = H - pad.t - pad.b;
|
||||
// 24小时数据点（每小时一个）
|
||||
var hours = [];
|
||||
for (var h = 0; h <= 24; h++) hours.push(h);
|
||||
var data = [72,70,68,66,65,64,66,72,78,82,85,80,76,74,79,83,88,84,80,76,74,72,70,68,66];
|
||||
var minV = 55, maxV = 95;
|
||||
function px(i){ return pad.l + i/24*cw; }
|
||||
function py(v){ return pad.t + ch - (v-minV)/(maxV-minV)*ch; }
|
||||
var pts = data.map(function(v,i){ return px(i)+','+py(v); }).join(' ');
|
||||
var areaPath = 'M'+data.map(function(v,i){ return px(i)+','+py(v); }).join(' L')+' L'+px(24)+','+(pad.t+ch)+' L'+pad.l+','+(pad.t+ch)+' Z';
|
||||
var yLines = [60,70,80,90];
|
||||
var gridLines = yLines.map(function(v){
|
||||
return '<line x1="'+pad.l+'" y1="'+py(v)+'" x2="'+(pad.l+cw)+'" y2="'+py(v)+'" stroke="#f0f0f0" stroke-width="1"/>'
|
||||
+ '<text x="'+(pad.l-8)+'" y="'+(py(v)+4)+'" text-anchor="end" font-size="11" fill="#999">'+v+'</text>';
|
||||
}).join('');
|
||||
var xTicks = [0,4,8,12,16,20,24];
|
||||
var xLabels = xTicks.map(function(h){
|
||||
var label = (h<10?'0':'')+h+':00';
|
||||
return '<text x="'+px(h)+'" y="'+(H-10)+'" text-anchor="middle" font-size="10" fill="#aaa">'+label+'</text>';
|
||||
}).join('');
|
||||
c.innerHTML = '<svg width="'+W+'" height="'+H+'" viewBox="0 0 '+W+' '+H+'">'
|
||||
+ gridLines
|
||||
+ '<defs><linearGradient id="ag" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1890FF" stop-opacity="0.15"/><stop offset="100%" stop-color="#1890FF" stop-opacity="0"/></linearGradient></defs>'
|
||||
+ '<path d="'+areaPath+'" fill="url(#ag)"/>'
|
||||
+ '<polyline points="'+pts+'" fill="none" stroke="#1890FF" stroke-width="2"/>'
|
||||
+ xLabels
|
||||
+ '</svg>';
|
||||
}
|
||||
function openEcgDetail(time, result, value) {
|
||||
document.getElementById('ecgTime').textContent = time;
|
||||
document.getElementById('ecgResult').textContent = result;
|
||||
document.getElementById('ecgValue').textContent = value;
|
||||
document.getElementById('ecgDetailModal').classList.add('show');
|
||||
renderEcgChart();
|
||||
}
|
||||
function renderEcgChart() {
|
||||
var c = document.getElementById('ecgChartArea');
|
||||
if (!c) return;
|
||||
var W = 660, H = 200;
|
||||
var pad = {t:20,r:20,b:30,l:40};
|
||||
var cw = W - pad.l - pad.r, ch = H - pad.t - pad.b;
|
||||
// 模拟心电图波形数据（PQRST波形重复）
|
||||
var points = [];
|
||||
var segLen = cw / 5;
|
||||
for (var s = 0; s < 5; s++) {
|
||||
var ox = pad.l + s * segLen;
|
||||
var baseY = pad.t + ch * 0.5;
|
||||
// P波
|
||||
points.push(ox+','+baseY);
|
||||
points.push((ox+segLen*0.1)+','+(baseY-ch*0.08));
|
||||
points.push((ox+segLen*0.18)+','+baseY);
|
||||
// QRS波
|
||||
points.push((ox+segLen*0.25)+','+(baseY+ch*0.05));
|
||||
points.push((ox+segLen*0.3)+','+(baseY-ch*0.45));
|
||||
points.push((ox+segLen*0.35)+','+(baseY+ch*0.15));
|
||||
// ST段+T波
|
||||
points.push((ox+segLen*0.42)+','+baseY);
|
||||
points.push((ox+segLen*0.55)+','+(baseY-ch*0.12));
|
||||
points.push((ox+segLen*0.65)+','+baseY);
|
||||
// 基线
|
||||
points.push((ox+segLen*1)+','+baseY);
|
||||
}
|
||||
var gridH = '';
|
||||
for (var i = 0; i <= 4; i++) {
|
||||
var gy = pad.t + ch * i / 4;
|
||||
gridH += '<line x1="'+pad.l+'" y1="'+gy+'" x2="'+(W-pad.r)+'" y2="'+gy+'" stroke="#f0f0f0" stroke-width="0.5"/>';
|
||||
}
|
||||
for (var j = 0; j <= 10; j++) {
|
||||
var gx = pad.l + cw * j / 10;
|
||||
gridH += '<line x1="'+gx+'" y1="'+pad.t+'" x2="'+gx+'" y2="'+(H-pad.b)+'" stroke="#f0f0f0" stroke-width="0.5"/>';
|
||||
}
|
||||
var xLabels = '';
|
||||
for (var k = 0; k <= 5; k++) {
|
||||
xLabels += '<text x="'+(pad.l + cw*k/5)+'" y="'+(H-8)+'" text-anchor="middle" font-size="10" fill="#999">'+(k*0.2).toFixed(1)+'s</text>';
|
||||
}
|
||||
c.innerHTML = '<svg width="'+W+'" height="'+H+'" viewBox="0 0 '+W+' '+H+'">'
|
||||
+ gridH + xLabels
|
||||
+ '<polyline points="'+points.join(' ')+'" fill="none" stroke="#FF4D4F" stroke-width="1.5" stroke-linejoin="round"/>'
|
||||
+ '</svg>';
|
||||
}
|
||||
document.getElementById('ecgDetailModal').addEventListener('click', function(e){ if(e.target===this) this.classList.remove('show'); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,161 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 面包屑 */
|
||||
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb span{color:var(--text-placeholder);}
|
||||
/* 表单卡片 */
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.form-card__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.form-card__header h2{font-size:var(--font-lg);font-weight:600;}
|
||||
.form-card__body{padding:32px 24px;}
|
||||
.form-card__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);background:#FAFAFA;}
|
||||
/* 表单 */
|
||||
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;max-width:800px;}
|
||||
.form-item{display:flex;flex-direction:column;gap:6px;}
|
||||
.form-item.full{grid-column:1/-1;}
|
||||
.form-item label{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.form-item label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-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;width:100%;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-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;width:100%;}
|
||||
.map-picker{height:200px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f0f2f5;display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:var(--font-sm);cursor:pointer;}
|
||||
.map-picker:hover{border-color:var(--primary);}
|
||||
.map-picker__icon{display:flex;flex-direction:column;align-items:center;gap:8px;}
|
||||
.radio-group{display:flex;gap:20px;align-items:center;height:36px;}
|
||||
.radio-group label{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;font-weight:400;}
|
||||
.radio-group input[type="radio"]{cursor:pointer;}
|
||||
.btn{height:36px;padding:0 20px;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;text-decoration:none;}
|
||||
.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);}
|
||||
</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-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__body">
|
||||
<a href="scale-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item active">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="bluetooth-device.html">设备管理</a><span>/</span><span>新增设备</span>
|
||||
</div>
|
||||
<!-- 表单卡片 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__header"><h2>新增蓝牙称设备</h2></div>
|
||||
<div class="form-card__body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><label>设备名称<span class="required">*</span></label><input class="form-input" placeholder="请输入设备名称"></div>
|
||||
<div class="form-item"><label>设备编码<span class="required">*</span></label><input class="form-input" placeholder="请输入设备编码"></div>
|
||||
<div class="form-item"><label>所属单位<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>采油一厂</option><option>采油二厂</option><option>采气厂</option></select></div>
|
||||
<div class="form-item"><label>设备厂商<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>华为</option><option>小米</option><option>乐心</option></select></div>
|
||||
<div class="form-item"><label>设备型号<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>HW-S100</option><option>MI-Scale2</option><option>LX-Pro</option></select></div>
|
||||
<div class="form-item"><label>入库日期<span class="required">*</span></label><input class="form-input" type="date"></div>
|
||||
<div class="form-item full">
|
||||
<label>布放位置<span class="required">*</span></label>
|
||||
<!-- [交互] 点击地图区域触发地图选点，选点后将经纬度回填并更新详细地址 -->
|
||||
<div class="map-picker"><div class="map-picker__icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M16 3C11.03 3 7 7.03 7 12c0 6.75 9 17 9 17s9-10.25 9-17c0-4.97-4.03-9-9-9zm0 12.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z" fill="#999"/></svg><span>点击地图选择布放位置</span></div></div>
|
||||
</div>
|
||||
<div class="form-item full"><label>详细地址<span class="required">*</span></label><input class="form-input" placeholder="地图选点后自动填充，可手动修改"></div>
|
||||
<div class="form-item"><label>负责人</label><input class="form-input" placeholder="请输入负责人姓名"></div>
|
||||
<div class="form-item"><label>负责人电话</label><input class="form-input" placeholder="请输入联系电话"></div>
|
||||
<div class="form-item"><label>厂商电话</label><input class="form-input" placeholder="请输入厂商联系电话"></div>
|
||||
<div class="form-item"><label>设备状态</label><div class="radio-group"><label><input type="radio" name="status" checked> 正常</label><label><input type="radio" name="status"> 维护中</label><label><input type="radio" name="status"> 已停用</label></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-card__footer">
|
||||
<!-- [交互] 点击取消跳转回: ./scale-device.html -->
|
||||
<a href="bluetooth-device.html" class="btn btn-default">取消</a>
|
||||
<button class="btn btn-primary">保存</button>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{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:160px;}
|
||||
.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:140px;}
|
||||
.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);}
|
||||
.btn-success{background:var(--success);color:#fff;}.btn-success:hover{background:#73d13d;}
|
||||
/* 操作按钮栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
/* 表格 */
|
||||
.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;min-width:1000px;}
|
||||
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);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;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link-danger:hover{color:#ff7875;}
|
||||
/* 分页 */
|
||||
.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>
|
||||
<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-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__body">
|
||||
<a href="scale-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item active">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选条件 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编码</label><input class="filter-input" placeholder="请输入设备编码"></div>
|
||||
<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><select class="filter-select"><option value="">全部</option><option>华为</option><option>小米</option><option>乐心</option></select></div>
|
||||
<div class="filter-item"><label>设备型号</label><select class="filter-select"><option value="">全部</option><option>HW-S100</option><option>MI-Scale2</option><option>LX-Pro</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-bar">
|
||||
<!-- [交互] 点击跳转至: ./bluetooth-device-add.html -->
|
||||
<a href="bluetooth-device-add.html" class="btn btn-primary" style="text-decoration:none;">+ 新增设备</a>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
<button class="btn btn-success">批量入库导入</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>设备型号</th><th>所属单位</th><th>布放位置</th><th>入库日期</th><th>设备状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>BT-2024-001</td><td>蓝牙称A1</td><td>华为</td><td>HW-S100</td><td>采油一厂</td><td>职工活动中心1F</td><td>2024-03-15</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>BT-2024-002</td><td>蓝牙称A2</td><td>小米</td><td>MI-Scale2</td><td>采油一厂</td><td>办公楼2F健身房</td><td>2024-03-18</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>BT-2024-003</td><td>蓝牙称B1</td><td>乐心</td><td>LX-Pro</td><td>采油二厂</td><td>员工食堂入口</td><td>2024-04-02</td><td><span class="tag tag-orange">维护中</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>BT-2024-004</td><td>蓝牙称B2</td><td>华为</td><td>HW-S100</td><td>采油二厂</td><td>宿舍楼大厅</td><td>2024-04-10</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>BT-2024-005</td><td>蓝牙称C1</td><td>小米</td><td>MI-Scale2</td><td>采气厂</td><td>综合办公楼1F</td><td>2024-05-08</td><td><span class="tag tag-red">已停用</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</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>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,285 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
|
||||
.page-header__back{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;color:var(--text-secondary);}
|
||||
.page-header__back:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.page-header__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.device-info{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;gap:40px;flex-wrap:wrap;}
|
||||
.device-info__item{display:flex;flex-direction:column;gap:4px;}
|
||||
.device-info__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.device-info__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.device-info__value--highlight{color:var(--primary);font-size:var(--font-base);font-weight:600;}
|
||||
.device-info__stats{display:flex;gap:40px;margin-left:auto;flex-shrink:0;}
|
||||
.tab-bar{display:flex;gap:0;margin-bottom:16px;border-bottom:1px solid var(--border);background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);}
|
||||
.tab-item{padding:14px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-content{display:none;}.tab-content.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);color:var(--text-primary);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);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);}
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.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;min-width:1400px;}
|
||||
thead th{background:#FAFAFA;padding:10px 12px;text-align:center;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;}
|
||||
thead th:last-child{border-right:none;}
|
||||
tbody td{padding:10px 12px;font-size:var(--font-xs);color:var(--text-primary);border-bottom:1px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;text-align:center;}
|
||||
tbody td:last-child{border-right:none;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-xs);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
/* Dialog弹窗 */
|
||||
.dialog-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:300;display:none;align-items:center;justify-content:center;}
|
||||
.dialog-mask.show{display:flex;}
|
||||
.dialog{background:#fff;border-radius:var(--radius-lg);width:720px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,0.2);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:20px;transition:all .2s;}
|
||||
.dialog__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.dialog__body{padding:20px 24px;overflow-y:auto;flex:1;}
|
||||
.dialog-section{margin-bottom:20px;}
|
||||
.dialog-section:last-child{margin-bottom:0;}
|
||||
.dialog-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);}
|
||||
.dialog-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;}
|
||||
.dialog-cell{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:1px solid #f0f0f0;margin:-0.5px;}
|
||||
.dialog-cell__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.dialog-cell__val{font-size:var(--font-xs);color:var(--text-primary);font-weight:500;}
|
||||
.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>
|
||||
<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-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>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.html" class="sidebar-item active">设备监测</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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<a class="page-header__back" href="bluetooth-monitor.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>
|
||||
<span class="page-header__title">蓝牙称数据明细</span>
|
||||
</div>
|
||||
<!-- 设备信息卡 -->
|
||||
<div class="device-info">
|
||||
<div class="device-info__item"><span class="device-info__label">设备名称</span><span class="device-info__value">蓝牙体脂称A01</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">设备编码</span><span class="device-info__value">BT-2024-001</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">所属单位</span><span class="device-info__value">采油一厂</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">布放位置</span><span class="device-info__value">办公楼1层大厅</span></div>
|
||||
<div class="device-info__stats">
|
||||
<div class="device-info__item"><span class="device-info__label">本周使用次数</span><span class="device-info__value device-info__value--highlight">48</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">本月使用次数</span><span class="device-info__value device-info__value--highlight">205</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">本年使用次数</span><span class="device-info__value device-info__value--highlight">1,180</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">累计使用次数</span><span class="device-info__value device-info__value--highlight">3,210</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab(0)">员工实名</div>
|
||||
<div class="tab-item" onclick="switchTab(1)">员工匿名</div>
|
||||
</div>
|
||||
<!-- 员工实名 -->
|
||||
<div class="tab-content active" id="tab-0">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>员工姓名</label><input class="filter-input" placeholder="请输入姓名"></div>
|
||||
<div class="filter-item"><label>员工编号</label><input class="filter-input" placeholder="请输入编号"></div>
|
||||
<div class="filter-item"><label>单位部门</label><select class="filter-select"><option value="">全部</option><option>采油一厂</option><option>采油二厂</option></select></div>
|
||||
<div class="filter-item"><label>使用日期</label><input class="filter-input" type="date" style="min-width:130px;"> ~ <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="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<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 rowspan="2">性别</th><th rowspan="2">年龄</th><th rowspan="2">使用时间</th>
|
||||
<th colspan="6">监测数据</th><th rowspan="2">更多信息</th>
|
||||
</tr>
|
||||
<tr><th>身高(cm)</th><th>体重(kg)</th><th>BMI</th><th>基础代谢</th><th>体脂肪量(kg)</th><th>体脂肪率(%)</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>张三</td><td>EMP001</td><td>采油一厂</td><td>生产部</td><td>男</td><td>35</td><td>2026-05-13 08:30</td><td>175</td><td>72.5</td><td>23.7</td><td>1,680</td><td>15.2</td><td>21.0</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"175","体重(kg)":"72.5","BMI":"23.7","基础代谢":"1,680","体脂肪量(kg)":"15.2","体脂肪率(%)":"21.0"},"水分与蛋白质":{"体水分量(kg)":"-","体水分率(%)":"-","蛋白质量(kg)":"-","蛋白质率(%)":"-"},"肌肉与骨骼":{"体肌肉量(kg)":"-","体肌肉率(%)":"-","体骨骼量(kg)":"-"},"脂肪分析":{"皮下脂肪量(kg)":"-","皮下脂肪率(%)":"-","除脂肪量(kg)":"-"},"细胞液":{"细胞外液量(L)":"-","细胞外液率(%)":"-","细胞内液量(L)":"-","细胞内液率(%)":"-"},"其他":{"矿物质量(kg)":"-"}}'>查看</a></td></tr>
|
||||
<tr><td>李四</td><td>EMP002</td><td>采油一厂</td><td>技术部</td><td>女</td><td>28</td><td>2026-05-13 09:15</td><td>162</td><td>55.0</td><td>21.0</td><td>1,320</td><td>13.8</td><td>25.1</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"162","体重(kg)":"55.0","BMI":"21.0","基础代谢":"1,320","体脂肪量(kg)":"13.8","体脂肪率(%)":"25.1"},"水分与蛋白质":{"体水分量(kg)":"-","体水分率(%)":"-","蛋白质量(kg)":"-","蛋白质率(%)":"-"},"肌肉与骨骼":{"体肌肉量(kg)":"-","体肌肉率(%)":"-","体骨骼量(kg)":"-"},"脂肪分析":{"皮下脂肪量(kg)":"-","皮下脂肪率(%)":"-","除脂肪量(kg)":"-"},"细胞液":{"细胞外液量(L)":"-","细胞外液率(%)":"-","细胞内液量(L)":"-","细胞内液率(%)":"-"},"其他":{"矿物质量(kg)":"-"}}'>查看</a></td></tr>
|
||||
<tr><td>王五</td><td>EMP003</td><td>采油一厂</td><td>安全部</td><td>男</td><td>42</td><td>2026-05-13 10:05</td><td>170</td><td>78.0</td><td>27.0</td><td>1,580</td><td>19.5</td><td>25.0</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"170","体重(kg)":"78.0","BMI":"27.0","基础代谢":"1,580","体脂肪量(kg)":"19.5","体脂肪率(%)":"25.0"},"水分与蛋白质":{"体水分量(kg)":"-","体水分率(%)":"-","蛋白质量(kg)":"-","蛋白质率(%)":"-"},"肌肉与骨骼":{"体肌肉量(kg)":"-","体肌肉率(%)":"-","体骨骼量(kg)":"-"},"脂肪分析":{"皮下脂肪量(kg)":"-","皮下脂肪率(%)":"-","除脂肪量(kg)":"-"},"细胞液":{"细胞外液量(L)":"-","细胞外液率(%)":"-","细胞内液量(L)":"-","细胞内液率(%)":"-"},"其他":{"矿物质量(kg)":"-"}}'>查看</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>共 3 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工匿名 -->
|
||||
<div class="tab-content" id="tab-1">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>使用日期</label><input class="filter-input" type="date" style="min-width:130px;"> ~ <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="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<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>身高(cm)</th><th>体重(kg)</th><th>BMI</th><th>基础代谢</th><th>体脂肪量(kg)</th><th>体脂肪率(%)</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>匿名用户</td><td>2026-05-13 11:20</td><td>168</td><td>65.0</td><td>23.0</td><td>1,450</td><td>14.3</td><td>22.0</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"168","体重(kg)":"65.0","BMI":"23.0","基础代谢":"1,450","体脂肪量(kg)":"14.3","体脂肪率(%)":"22.0"},"水分与蛋白质":{"体水分量(kg)":"-","体水分率(%)":"-","蛋白质量(kg)":"-","蛋白质率(%)":"-"},"肌肉与骨骼":{"体肌肉量(kg)":"-","体肌肉率(%)":"-","体骨骼量(kg)":"-"},"脂肪分析":{"皮下脂肪量(kg)":"-","皮下脂肪率(%)":"-","除脂肪量(kg)":"-"},"细胞液":{"细胞外液量(L)":"-","细胞外液率(%)":"-","细胞内液量(L)":"-","细胞内液率(%)":"-"},"其他":{"矿物质量(kg)":"-"}}'>查看</a></td></tr>
|
||||
<tr><td>匿名用户</td><td>2026-05-13 14:35</td><td>180</td><td>85.0</td><td>26.2</td><td>1,750</td><td>20.4</td><td>24.0</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"180","体重(kg)":"85.0","BMI":"26.2","基础代谢":"1,750","体脂肪量(kg)":"20.4","体脂肪率(%)":"24.0"},"水分与蛋白质":{"体水分量(kg)":"-","体水分率(%)":"-","蛋白质量(kg)":"-","蛋白质率(%)":"-"},"肌肉与骨骼":{"体肌肉量(kg)":"-","体肌肉率(%)":"-","体骨骼量(kg)":"-"},"脂肪分析":{"皮下脂肪量(kg)":"-","皮下脂肪率(%)":"-","除脂肪量(kg)":"-"},"细胞液":{"细胞外液量(L)":"-","细胞外液率(%)":"-","细胞内液量(L)":"-","细胞内液率(%)":"-"},"其他":{"矿物质量(kg)":"-"}}'>查看</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>共 2 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Dialog弹窗 -->
|
||||
<div class="dialog-mask" id="dialogMask">
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<span class="dialog__title">监测数据详情</span>
|
||||
<button class="dialog__close" onclick="closeDialog()">×</button>
|
||||
</div>
|
||||
<div class="dialog__body" id="dialogBody"></div>
|
||||
</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 switchTab(idx){
|
||||
document.querySelectorAll('.tab-item').forEach(function(t,i){t.classList.toggle('active',i===idx);});
|
||||
document.querySelectorAll('.tab-content').forEach(function(c,i){c.classList.toggle('active',i===idx);});
|
||||
}
|
||||
function closeDialog(){document.getElementById('dialogMask').classList.remove('show');}
|
||||
(function(){
|
||||
var mask=document.getElementById('dialogMask');
|
||||
var body=document.getElementById('dialogBody');
|
||||
mask.addEventListener('click',function(e){if(e.target===mask)closeDialog();});
|
||||
document.addEventListener('click',function(e){
|
||||
var trigger=e.target.closest('.tip-trigger');
|
||||
if(!trigger)return;
|
||||
e.preventDefault();
|
||||
var row=trigger.closest('tr');
|
||||
var name=row.querySelector('td').textContent;
|
||||
document.querySelector('.dialog__title').textContent='监测数据详情 - '+name;
|
||||
var data=JSON.parse(trigger.getAttribute('data-tip'));
|
||||
var html='';
|
||||
for(var section in data){
|
||||
html+='<div class="dialog-section"><div class="dialog-section__title">'+section+'</div><div class="dialog-grid">';
|
||||
var items=data[section];
|
||||
for(var k in items){
|
||||
html+='<div class="dialog-cell"><span class="dialog-cell__label">'+k+'</span><span class="dialog-cell__val">'+items[k]+'</span></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
}
|
||||
body.innerHTML=html;
|
||||
mask.classList.add('show');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{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:160px;}
|
||||
.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:140px;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.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;min-width:1100px;}
|
||||
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);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;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.sortable{cursor:pointer;user-select:none;}.sortable:hover{color:var(--primary);}
|
||||
.sortable::after{content:'⇅';margin-left:4px;font-size:10px;opacity:.5;}
|
||||
.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>
|
||||
<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-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>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.html" class="sidebar-item active">设备监测</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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编码</label><input class="filter-input" placeholder="请输入设备编码"></div>
|
||||
<div class="filter-item"><label>所属单位</label><select class="filter-select"><option value="">全部</option><option>采油一厂</option><option>采油二厂</option><option>采气厂</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<!-- 操作按钮栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</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>布放位置</th>
|
||||
<th class="sortable">本周使用次数</th><th class="sortable">本月使用次数</th><th class="sortable">本年使用次数</th><th class="sortable">累计使用次数</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>蓝牙体脂称A01</td><td>BT-2024-001</td><td>采油一厂</td><td>办公楼1层大厅</td><td>48</td><td>205</td><td>1,180</td><td>3,210</td><td><a class="link" href="bluetooth-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>蓝牙体脂称A02</td><td>BT-2024-002</td><td>采油一厂</td><td>健身房</td><td>72</td><td>312</td><td>1,860</td><td>4,580</td><td><a class="link" href="bluetooth-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>蓝牙体脂称B01</td><td>BT-2024-003</td><td>采油二厂</td><td>职工活动中心</td><td>35</td><td>156</td><td>890</td><td>1,920</td><td><a class="link" href="bluetooth-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>蓝牙体脂称B02</td><td>BT-2024-004</td><td>采油二厂</td><td>办公楼2层</td><td>28</td><td>128</td><td>760</td><td>1,650</td><td><a class="link" href="bluetooth-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>蓝牙体脂称C01</td><td>BT-2024-005</td><td>采气厂</td><td>综合楼1层</td><td>58</td><td>245</td><td>1,420</td><td>3,560</td><td><a class="link" href="bluetooth-monitor-detail.html">数据明细</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 5 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">›</button>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,412 @@
|
||||
<!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;
|
||||
--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);--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__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);}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{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:150px;}
|
||||
.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: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);}
|
||||
/* Tab */
|
||||
.page-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);}
|
||||
.page-tab{padding:14px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;}
|
||||
.page-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-panel{display:none;}.tab-panel.active{display:block;}
|
||||
/* 表格 */
|
||||
.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;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);border-right:1px solid var(--border);}
|
||||
thead th:last-child{border-right:none;}
|
||||
thead th.group-header{font-weight:600;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.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);}
|
||||
.date-range{display:flex;align-items:center;gap:8px;}
|
||||
.date-range input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;width:140px;}
|
||||
/* 排序图标 */
|
||||
.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);}
|
||||
</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="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-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>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item active">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- Tab -->
|
||||
<div class="page-tabs">
|
||||
<div class="page-tab active" onclick="switchTab(this,'level2')">二级单位</div>
|
||||
<div class="page-tab" onclick="switchTab(this,'level3')">三级单位</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级单位筛选栏 -->
|
||||
<div class="filter-bar" id="filter-level2">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" style="min-width:150px;">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>采气二厂</option>
|
||||
<option>天然气处理厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 三级单位筛选栏 -->
|
||||
<div class="filter-bar" id="filter-level3" style="display:none;">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" style="min-width:150px;">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>采气二厂</option>
|
||||
<option>天然气处理厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属部门</label>
|
||||
<select class="filter-select" style="min-width:150px;">
|
||||
<option>全部</option>
|
||||
<option>第一作业区</option>
|
||||
<option>第二作业区</option>
|
||||
<option>集输大队</option>
|
||||
<option>采气作业区</option>
|
||||
<option>集气站</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- ========== 二级单位面板 ========== -->
|
||||
<div class="tab-panel active" id="tab-level2">
|
||||
<div style="display:flex;gap:8px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">二级单位数据统计</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2" style="vertical-align:middle;">单位</th>
|
||||
<th rowspan="2" style="vertical-align:middle;">总人数</th>
|
||||
<th colspan="3" class="group-header" style="border-bottom:1px solid var(--border);">体重秤</th>
|
||||
<th colspan="3" class="group-header" style="border-bottom:1px solid var(--border);">蓝牙称</th>
|
||||
<th colspan="3" class="group-header" style="border-bottom:1px solid var(--border);">体脂仪</th>
|
||||
<th colspan="3" class="group-header" style="border-bottom:1px solid var(--border);">运动器械</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="sortable" onclick="toggleSort(this)">设备数量<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用人数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">设备数量<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用人数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">设备数量<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用人数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">设备数量<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用人数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">采油一厂</td><td>283</td>
|
||||
<td>18</td><td>821</td><td>200</td>
|
||||
<td>12</td><td>505</td><td>155</td>
|
||||
<td>7</td><td>319</td><td>114</td>
|
||||
<td>4</td><td>176</td><td>72</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">采油二厂</td><td>198</td>
|
||||
<td>12</td><td>565</td><td>140</td>
|
||||
<td>7</td><td>345</td><td>103</td>
|
||||
<td>5</td><td>215</td><td>74</td>
|
||||
<td>3</td><td>123</td><td>50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">采气一厂</td><td>127</td>
|
||||
<td>8</td><td>350</td><td>93</td>
|
||||
<td>5</td><td>223</td><td>72</td>
|
||||
<td>3</td><td>145</td><td>57</td>
|
||||
<td>3</td><td>100</td><td>43</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">采气二厂</td><td>105</td>
|
||||
<td>6</td><td>285</td><td>72</td>
|
||||
<td>4</td><td>168</td><td>55</td>
|
||||
<td>2</td><td>110</td><td>42</td>
|
||||
<td>2</td><td>78</td><td>32</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">天然气处理厂</td><td>86</td>
|
||||
<td>5</td><td>220</td><td>58</td>
|
||||
<td>3</td><td>132</td><td>42</td>
|
||||
<td>2</td><td>85</td><td>35</td>
|
||||
<td>1</td><td>55</td><td>25</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== 三级单位面板 ========== -->
|
||||
<div class="tab-panel" id="tab-level3">
|
||||
<div style="display:flex;gap:8px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">三级单位数据统计</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2" style="vertical-align:middle;">单位</th>
|
||||
<th rowspan="2" style="vertical-align:middle;">部门</th>
|
||||
<th rowspan="2" style="vertical-align:middle;">总人数</th>
|
||||
<th colspan="3" class="group-header" style="border-bottom:1px solid var(--border);">体重秤</th>
|
||||
<th colspan="3" class="group-header" style="border-bottom:1px solid var(--border);">蓝牙称</th>
|
||||
<th colspan="3" class="group-header" style="border-bottom:1px solid var(--border);">体脂仪</th>
|
||||
<th colspan="3" class="group-header" style="border-bottom:1px solid var(--border);">运动器械</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="sortable" onclick="toggleSort(this)">设备数量<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用人数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">设备数量<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用人数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">设备数量<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用人数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">设备数量<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">使用人数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">采油一厂</td><td>第一作业区</td><td>120</td>
|
||||
<td>8</td><td>356</td><td>85</td>
|
||||
<td>5</td><td>210</td><td>62</td>
|
||||
<td>3</td><td>145</td><td>48</td>
|
||||
<td>2</td><td>89</td><td>35</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">采油一厂</td><td>第二作业区</td><td>95</td>
|
||||
<td>6</td><td>280</td><td>70</td>
|
||||
<td>4</td><td>175</td><td>55</td>
|
||||
<td>2</td><td>98</td><td>38</td>
|
||||
<td>1</td><td>52</td><td>22</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">采油一厂</td><td>集输大队</td><td>68</td>
|
||||
<td>4</td><td>185</td><td>45</td>
|
||||
<td>3</td><td>120</td><td>38</td>
|
||||
<td>2</td><td>76</td><td>28</td>
|
||||
<td>1</td><td>35</td><td>15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">采油二厂</td><td>第一作业区</td><td>110</td>
|
||||
<td>7</td><td>320</td><td>78</td>
|
||||
<td>4</td><td>195</td><td>58</td>
|
||||
<td>3</td><td>130</td><td>42</td>
|
||||
<td>2</td><td>75</td><td>30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">采油二厂</td><td>第二作业区</td><td>88</td>
|
||||
<td>5</td><td>245</td><td>62</td>
|
||||
<td>3</td><td>150</td><td>45</td>
|
||||
<td>2</td><td>85</td><td>32</td>
|
||||
<td>1</td><td>48</td><td>20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">采气一厂</td><td>采气作业区</td><td>75</td>
|
||||
<td>5</td><td>210</td><td>55</td>
|
||||
<td>3</td><td>135</td><td>42</td>
|
||||
<td>2</td><td>90</td><td>35</td>
|
||||
<td>2</td><td>68</td><td>28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;text-align:left;">采气一厂</td><td>集气站</td><td>52</td>
|
||||
<td>3</td><td>140</td><td>38</td>
|
||||
<td>2</td><td>88</td><td>30</td>
|
||||
<td>1</td><td>55</td><td>22</td>
|
||||
<td>1</td><td>32</td><td>15</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 12 条</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 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 switchTab(el, tab) {
|
||||
document.querySelectorAll('.page-tab').forEach(function(t){ t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p){ p.classList.remove('active'); });
|
||||
document.getElementById('tab-' + tab).classList.add('active');
|
||||
document.getElementById('filter-level2').style.display = tab === 'level2' ? '' : 'none';
|
||||
document.getElementById('filter-level3').style.display = tab === 'level3' ? '' : 'none';
|
||||
}
|
||||
|
||||
/* 排序切换 */
|
||||
function toggleSort(th) {
|
||||
var wasAsc = th.classList.contains('asc');
|
||||
var wasDesc = th.classList.contains('desc');
|
||||
th.closest('table').querySelectorAll('.sortable').forEach(function(s){ s.classList.remove('asc','desc'); });
|
||||
if (!wasAsc && !wasDesc) { th.classList.add('asc'); }
|
||||
else if (wasAsc) { th.classList.add('desc'); }
|
||||
/* desc -> 清除(第三次点击回到默认) */
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,241 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 面包屑 */
|
||||
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb span{color:var(--text-placeholder);}
|
||||
/* 员工信息卡片 */
|
||||
.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__stats{display:flex;gap:24px;margin-left:auto;}
|
||||
.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 20px;background:#FAFAFA;border-radius:var(--radius-md);min-width:90px;}
|
||||
.stat-item__value{font-size:20px;font-weight:700;color:var(--primary);}
|
||||
.stat-item__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
/* 筛选栏 */
|
||||
.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: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);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:140px;}
|
||||
.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__content{overflow-x:auto;-webkit-overflow-scrolling:touch;}
|
||||
table{width:100%;border-collapse:collapse;min-width:1200px;}
|
||||
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);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;}
|
||||
.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-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px 24px;}
|
||||
.detail-item{display:flex;flex-direction:column;gap:4px;padding:12px;background:#FAFAFA;border-radius:var(--radius-sm);}
|
||||
.detail-item__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.detail-item__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
</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-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>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.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>
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="employee-data.html">员工数据</a><span>/</span><span>测量记录</span>
|
||||
</div>
|
||||
<!-- 员工信息卡片 -->
|
||||
<div class="info-card">
|
||||
<div class="info-card__avatar">张</div>
|
||||
<div class="info-card__detail">
|
||||
<div class="info-card__name">张伟</div>
|
||||
<div class="info-card__meta">
|
||||
<span>员工编号：EMP-10001</span>
|
||||
<span>性别：男</span>
|
||||
<span>年龄：35岁</span>
|
||||
<span>采油一厂 / 生产运行科</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card__stats">
|
||||
<div class="stat-item"><span class="stat-item__value">3</span><span class="stat-item__label">本周测量</span></div>
|
||||
<div class="stat-item"><span class="stat-item__value">12</span><span class="stat-item__label">本月测量</span></div>
|
||||
<div class="stat-item"><span class="stat-item__value">58</span><span class="stat-item__label">本年测量</span></div>
|
||||
<div class="stat-item"><span class="stat-item__value">142</span><span class="stat-item__label">累计测量</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 筛选条件 -->
|
||||
<div class="filter-bar">
|
||||
<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>2024-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="openModal()">查看</a></td></tr>
|
||||
<tr><td>2024-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="openModal()">查看</a></td></tr>
|
||||
<tr><td>2024-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="openModal()">查看</a></td></tr>
|
||||
<tr><td>2024-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="openModal()">查看</a></td></tr>
|
||||
<tr><td>2024-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="openModal()">查看</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>
|
||||
</main>
|
||||
<!-- 测量详情弹窗 -->
|
||||
<div class="modal-mask" id="detailModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header"><h3>测量详情</h3><button class="modal__close" onclick="closeModal()">×</button></div>
|
||||
<div class="modal__body">
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item"><span class="detail-item__label">测量时间</span><span class="detail-item__value">2024-05-10 08:30</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">测量设备</span><span class="detail-item__value">体重秤</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">设备编码</span><span class="detail-item__value">SC-2024-001</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">身高(cm)</span><span class="detail-item__value">175</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">体重(kg)</span><span class="detail-item__value">72.5</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">BMI</span><span class="detail-item__value">23.7</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">基础代谢(kcal)</span><span class="detail-item__value">1680</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">体脂肪量(kg)</span><span class="detail-item__value">13.2</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">体脂肪率(%)</span><span class="detail-item__value">18.2</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">体水分量(kg)</span><span class="detail-item__value">40.1</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">蛋白质量(kg)</span><span class="detail-item__value">11.6</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">体肌肉量(kg)</span><span class="detail-item__value">55.8</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">体肌肉率(%)</span><span class="detail-item__value">77.0</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">去脂体重(kg)</span><span class="detail-item__value">59.3</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">内脏脂肪等级</span><span class="detail-item__value">6</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">身体年龄</span><span class="detail-item__value">32</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">矿物质量(kg)</span><span class="detail-item__value">3.5</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">皮下脂肪量(kg)</span><span class="detail-item__value">10.8</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">皮下脂肪率(%)</span><span class="detail-item__value">14.9</span></div>
|
||||
<div class="detail-item"><span class="detail-item__label">体骨骼量(kg)</span><span class="detail-item__value">2.9</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</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 openModal(){document.getElementById('detailModal').classList.add('show');}
|
||||
function closeModal(){document.getElementById('detailModal').classList.remove('show');}
|
||||
document.getElementById('detailModal').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,179 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{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:160px;}
|
||||
.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:140px;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
/* 表格 */
|
||||
.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;min-width:1100px;}
|
||||
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);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;}
|
||||
.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);}
|
||||
</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-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>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.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>
|
||||
<main class="main">
|
||||
<!-- 筛选条件 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>姓名</label><input class="filter-input" placeholder="请输入姓名" style="min-width:120px;"></div>
|
||||
<div class="filter-item"><label>员工编号</label><input class="filter-input" placeholder="请输入员工编号" style="min-width:140px;"></div>
|
||||
<div class="filter-item"><label>单位部门</label><select class="filter-select" style="min-width:120px;"><option value="">全部单位</option><option>采油一厂</option><option>采油二厂</option><option>采气厂</option></select><select class="filter-select" style="min-width:120px;"><option value="">全部部门</option><option>生产运行科</option><option>安全环保科</option><option>综合管理科</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
<!-- 数据列表 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2" style="vertical-align:middle;">姓名</th>
|
||||
<th rowspan="2" style="vertical-align:middle;">员工编号</th>
|
||||
<th rowspan="2" style="vertical-align:middle;">性别</th>
|
||||
<th rowspan="2" style="vertical-align:middle;">年龄</th>
|
||||
<th rowspan="2" style="vertical-align:middle;">所属单位</th>
|
||||
<th rowspan="2" style="vertical-align:middle;">所属部门</th>
|
||||
<th colspan="6" style="text-align:center;border-bottom:1px solid var(--border);">最新测量数据</th>
|
||||
<th rowspan="2" style="vertical-align:middle;">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>测量时间</th><th>测量设备</th><th>身高(cm)</th><th>体重(kg)</th><th>BMI</th><th>体脂肪率(%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>张伟</td><td>EMP-10001</td><td>男</td><td>35</td><td>采油一厂</td><td>生产运行科</td><td>2024-05-10 08:30</td><td>体重秤</td><td>175</td><td>72.5</td><td>23.7</td><td>18.2</td><td><a class="link" href="employee-data-record.html">测量记录</a></td></tr>
|
||||
<tr><td>李娜</td><td>EMP-10002</td><td>女</td><td>28</td><td>采油一厂</td><td>安全环保科</td><td>2024-05-09 17:15</td><td>体脂仪</td><td>163</td><td>55.0</td><td>20.7</td><td>24.5</td><td><a class="link" href="employee-data-record.html">测量记录</a></td></tr>
|
||||
<tr><td>王强</td><td>EMP-10003</td><td>男</td><td>42</td><td>采油二厂</td><td>综合管理科</td><td>2024-05-08 12:00</td><td>蓝牙称</td><td>170</td><td>80.2</td><td>27.7</td><td>26.8</td><td><a class="link" href="employee-data-record.html">测量记录</a></td></tr>
|
||||
<tr><td>赵敏</td><td>EMP-10004</td><td>女</td><td>31</td><td>采油二厂</td><td>生产运行科</td><td>2024-05-10 09:45</td><td>体重秤</td><td>160</td><td>52.3</td><td>20.4</td><td>22.1</td><td><a class="link" href="employee-data-record.html">测量记录</a></td></tr>
|
||||
<tr><td>刘洋</td><td>EMP-10005</td><td>男</td><td>38</td><td>采气厂</td><td>安全环保科</td><td>2024-05-07 16:30</td><td>体脂仪</td><td>178</td><td>85.0</td><td>26.8</td><td>25.3</td><td><a class="link" href="employee-data-record.html">测量记录</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 156 条</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">16</button>
|
||||
<button class="page-btn">›</button>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,219 @@
|
||||
<!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;
|
||||
--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);--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__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);}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{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:150px;}
|
||||
.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: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);}
|
||||
.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__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;}
|
||||
.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);}
|
||||
.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);}
|
||||
</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="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-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>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item active">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选条件 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item"><label>姓名</label><input class="filter-input" placeholder="请输入姓名" style="min-width:120px;"></div>
|
||||
<div class="filter-item"><label>员工编号</label><input class="filter-input" placeholder="请输入员工编号" style="min-width:140px;"></div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门</label>
|
||||
<select class="filter-select" style="min-width:180px;">
|
||||
<option value="">全部</option>
|
||||
<option>采油一厂 / 第一作业区</option>
|
||||
<option>采油一厂 / 第二作业区</option>
|
||||
<option>采油一厂 / 集输大队</option>
|
||||
<option>采油二厂 / 第一作业区</option>
|
||||
<option>采油二厂 / 第二作业区</option>
|
||||
<option>采气一厂 / 采气作业区</option>
|
||||
<option>采气一厂 / 集气站</option>
|
||||
<option>采气二厂 / 采气作业区</option>
|
||||
<option>天然气处理厂 / 综合管理科</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</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>年龄</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
<th class="sortable" onclick="toggleSort(this)">体重秤使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">蓝牙称使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">体脂仪使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">运动器械使用次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>张伟</td><td>EMP-10001</td><td>男</td><td>35</td><td>采油一厂</td><td>第一作业区</td><td>42</td><td>18</td><td>12</td><td>8</td></tr>
|
||||
<tr><td>李娜</td><td>EMP-10002</td><td>女</td><td>28</td><td>采油一厂</td><td>第二作业区</td><td>35</td><td>22</td><td>15</td><td>5</td></tr>
|
||||
<tr><td>王强</td><td>EMP-10003</td><td>男</td><td>42</td><td>采油二厂</td><td>第一作业区</td><td>28</td><td>30</td><td>8</td><td>12</td></tr>
|
||||
<tr><td>赵敏</td><td>EMP-10004</td><td>女</td><td>31</td><td>采油二厂</td><td>第二作业区</td><td>50</td><td>15</td><td>20</td><td>3</td></tr>
|
||||
<tr><td>刘洋</td><td>EMP-10005</td><td>男</td><td>38</td><td>采气一厂</td><td>采气作业区</td><td>18</td><td>25</td><td>10</td><td>15</td></tr>
|
||||
<tr><td>陈静</td><td>EMP-10006</td><td>女</td><td>26</td><td>采气一厂</td><td>集气站</td><td>32</td><td>12</td><td>18</td><td>6</td></tr>
|
||||
<tr><td>孙磊</td><td>EMP-10007</td><td>男</td><td>45</td><td>采气二厂</td><td>采气作业区</td><td>22</td><td>28</td><td>5</td><td>20</td></tr>
|
||||
<tr><td>周芳</td><td>EMP-10008</td><td>女</td><td>33</td><td>天然气处理厂</td><td>综合管理科</td><td>38</td><td>20</td><td>14</td><td>9</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 156 条</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">16</button>
|
||||
<button class="page-btn">›</button>
|
||||
</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');})();
|
||||
|
||||
function toggleSort(th) {
|
||||
var wasAsc = th.classList.contains('asc');
|
||||
var wasDesc = th.classList.contains('desc');
|
||||
th.closest('table').querySelectorAll('.sortable').forEach(function(s){ s.classList.remove('asc','desc'); });
|
||||
if (!wasAsc && !wasDesc) { th.classList.add('asc'); }
|
||||
else if (wasAsc) { th.classList.add('desc'); }
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,161 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 面包屑 */
|
||||
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb span{color:var(--text-placeholder);}
|
||||
/* 表单卡片 */
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.form-card__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.form-card__header h2{font-size:var(--font-lg);font-weight:600;}
|
||||
.form-card__body{padding:32px 24px;}
|
||||
.form-card__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);background:#FAFAFA;}
|
||||
/* 表单 */
|
||||
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;max-width:800px;}
|
||||
.form-item{display:flex;flex-direction:column;gap:6px;}
|
||||
.form-item.full{grid-column:1/-1;}
|
||||
.form-item label{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.form-item label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-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;width:100%;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-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;width:100%;}
|
||||
.map-picker{height:200px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f0f2f5;display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:var(--font-sm);cursor:pointer;}
|
||||
.map-picker:hover{border-color:var(--primary);}
|
||||
.map-picker__icon{display:flex;flex-direction:column;align-items:center;gap:8px;}
|
||||
.radio-group{display:flex;gap:20px;align-items:center;height:36px;}
|
||||
.radio-group label{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;font-weight:400;}
|
||||
.radio-group input[type="radio"]{cursor:pointer;}
|
||||
.btn{height:36px;padding:0 20px;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;text-decoration:none;}
|
||||
.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);}
|
||||
</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-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__body">
|
||||
<a href="scale-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item active">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="fat-device.html">设备管理</a><span>/</span><span>新增设备</span>
|
||||
</div>
|
||||
<!-- 表单卡片 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__header"><h2>新增体脂仪设备</h2></div>
|
||||
<div class="form-card__body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><label>设备名称<span class="required">*</span></label><input class="form-input" placeholder="请输入设备名称"></div>
|
||||
<div class="form-item"><label>设备编码<span class="required">*</span></label><input class="form-input" placeholder="请输入设备编码"></div>
|
||||
<div class="form-item"><label>所属单位<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>采油一厂</option><option>采油二厂</option><option>采气厂</option></select></div>
|
||||
<div class="form-item"><label>设备厂商<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>华为</option><option>小米</option><option>乐心</option></select></div>
|
||||
<div class="form-item"><label>设备型号<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>HW-S100</option><option>MI-Scale2</option><option>LX-Pro</option></select></div>
|
||||
<div class="form-item"><label>入库日期<span class="required">*</span></label><input class="form-input" type="date"></div>
|
||||
<div class="form-item full">
|
||||
<label>布放位置<span class="required">*</span></label>
|
||||
<!-- [交互] 点击地图区域触发地图选点，选点后将经纬度回填并更新详细地址 -->
|
||||
<div class="map-picker"><div class="map-picker__icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M16 3C11.03 3 7 7.03 7 12c0 6.75 9 17 9 17s9-10.25 9-17c0-4.97-4.03-9-9-9zm0 12.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z" fill="#999"/></svg><span>点击地图选择布放位置</span></div></div>
|
||||
</div>
|
||||
<div class="form-item full"><label>详细地址<span class="required">*</span></label><input class="form-input" placeholder="地图选点后自动填充，可手动修改"></div>
|
||||
<div class="form-item"><label>负责人</label><input class="form-input" placeholder="请输入负责人姓名"></div>
|
||||
<div class="form-item"><label>负责人电话</label><input class="form-input" placeholder="请输入联系电话"></div>
|
||||
<div class="form-item"><label>厂商电话</label><input class="form-input" placeholder="请输入厂商联系电话"></div>
|
||||
<div class="form-item"><label>设备状态</label><div class="radio-group"><label><input type="radio" name="status" checked> 正常</label><label><input type="radio" name="status"> 维护中</label><label><input type="radio" name="status"> 已停用</label></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-card__footer">
|
||||
<!-- [交互] 点击取消跳转回: ./scale-device.html -->
|
||||
<a href="fat-device.html" class="btn btn-default">取消</a>
|
||||
<button class="btn btn-primary">保存</button>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{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:160px;}
|
||||
.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:140px;}
|
||||
.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);}
|
||||
.btn-success{background:var(--success);color:#fff;}.btn-success:hover{background:#73d13d;}
|
||||
/* 操作按钮栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
/* 表格 */
|
||||
.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;min-width:1000px;}
|
||||
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);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;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link-danger:hover{color:#ff7875;}
|
||||
/* 分页 */
|
||||
.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>
|
||||
<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-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__body">
|
||||
<a href="scale-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item active">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选条件 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编码</label><input class="filter-input" placeholder="请输入设备编码"></div>
|
||||
<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><select class="filter-select"><option value="">全部</option><option>华为</option><option>小米</option><option>乐心</option></select></div>
|
||||
<div class="filter-item"><label>设备型号</label><select class="filter-select"><option value="">全部</option><option>HW-S100</option><option>MI-Scale2</option><option>LX-Pro</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-bar">
|
||||
<!-- [交互] 点击跳转至: ./fat-device-add.html -->
|
||||
<a href="fat-device-add.html" class="btn btn-primary" style="text-decoration:none;">+ 新增设备</a>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
<button class="btn btn-success">批量入库导入</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>设备型号</th><th>所属单位</th><th>布放位置</th><th>入库日期</th><th>设备状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>FT-2024-001</td><td>体脂仪A1</td><td>华为</td><td>HW-S100</td><td>采油一厂</td><td>职工活动中心1F</td><td>2024-03-15</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>FT-2024-002</td><td>体脂仪A2</td><td>小米</td><td>MI-Scale2</td><td>采油一厂</td><td>办公楼2F健身房</td><td>2024-03-18</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>FT-2024-003</td><td>体脂仪B1</td><td>乐心</td><td>LX-Pro</td><td>采油二厂</td><td>员工食堂入口</td><td>2024-04-02</td><td><span class="tag tag-orange">维护中</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>FT-2024-004</td><td>体脂仪B2</td><td>华为</td><td>HW-S100</td><td>采油二厂</td><td>宿舍楼大厅</td><td>2024-04-10</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>FT-2024-005</td><td>体脂仪C1</td><td>小米</td><td>MI-Scale2</td><td>采气厂</td><td>综合办公楼1F</td><td>2024-05-08</td><td><span class="tag tag-red">已停用</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</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>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,290 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
|
||||
.page-header__back{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;color:var(--text-secondary);}
|
||||
.page-header__back:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.page-header__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
/* 设备信息卡 */
|
||||
.device-info{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;gap:40px;flex-wrap:wrap;}
|
||||
.device-info__item{display:flex;flex-direction:column;gap:4px;}
|
||||
.device-info__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.device-info__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.device-info__value--highlight{color:var(--primary);font-size:var(--font-base);font-weight:600;}
|
||||
.device-info__stats{display:flex;gap:40px;margin-left:auto;flex-shrink:0;}
|
||||
/* Tab */
|
||||
.tab-bar{display:flex;gap:0;margin-bottom:16px;border-bottom:1px solid var(--border);background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);}
|
||||
.tab-item{padding:14px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-content{display:none;}.tab-content.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);color:var(--text-primary);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);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);}
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
/* 表格 */
|
||||
.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;min-width:1400px;}
|
||||
thead th{background:#FAFAFA;padding:10px 12px;text-align:center;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;}
|
||||
thead th:last-child{border-right:none;}
|
||||
tbody td{padding:10px 12px;font-size:var(--font-xs);color:var(--text-primary);border-bottom:1px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;text-align:center;}
|
||||
tbody td:last-child{border-right:none;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-xs);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);}
|
||||
/* Dialog弹窗 */
|
||||
.dialog-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:300;display:none;align-items:center;justify-content:center;}
|
||||
.dialog-mask.show{display:flex;}
|
||||
.dialog{background:#fff;border-radius:var(--radius-lg);width:720px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,0.2);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:20px;transition:all .2s;}
|
||||
.dialog__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.dialog__body{padding:20px 24px;overflow-y:auto;flex:1;}
|
||||
.dialog-section{margin-bottom:20px;}
|
||||
.dialog-section:last-child{margin-bottom:0;}
|
||||
.dialog-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);}
|
||||
.dialog-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;}
|
||||
.dialog-cell{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:1px solid #f0f0f0;margin:-0.5px;}
|
||||
.dialog-cell__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.dialog-cell__val{font-size:var(--font-xs);color:var(--text-primary);font-weight:500;}
|
||||
</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-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>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.html" class="sidebar-item active">设备监测</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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<a class="page-header__back" href="fat-monitor.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>
|
||||
<span class="page-header__title">体脂仪数据明细</span>
|
||||
</div>
|
||||
<!-- 设备信息卡 -->
|
||||
<div class="device-info">
|
||||
<div class="device-info__item"><span class="device-info__label">设备名称</span><span class="device-info__value">智能体脂仪A01</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">设备编码</span><span class="device-info__value">FT-2024-001</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">所属单位</span><span class="device-info__value">采油一厂</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">布放位置</span><span class="device-info__value">办公楼1层大厅</span></div>
|
||||
<div class="device-info__stats">
|
||||
<div class="device-info__item"><span class="device-info__label">本周使用次数</span><span class="device-info__value device-info__value--highlight">48</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">本月使用次数</span><span class="device-info__value device-info__value--highlight">205</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">本年使用次数</span><span class="device-info__value device-info__value--highlight">1,230</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">累计使用次数</span><span class="device-info__value device-info__value--highlight">3,420</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab(0)">员工实名</div>
|
||||
<div class="tab-item" onclick="switchTab(1)">员工匿名</div>
|
||||
</div>
|
||||
<!-- 员工实名 -->
|
||||
<div class="tab-content active" id="tab-0">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>员工姓名</label><input class="filter-input" placeholder="请输入姓名"></div>
|
||||
<div class="filter-item"><label>员工编号</label><input class="filter-input" placeholder="请输入编号"></div>
|
||||
<div class="filter-item"><label>单位部门</label><select class="filter-select"><option value="">全部</option><option>采油一厂</option><option>采油二厂</option></select></div>
|
||||
<div class="filter-item"><label>使用日期</label><input class="filter-input" type="date" style="min-width:130px;"> ~ <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="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<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 rowspan="2">性别</th><th rowspan="2">年龄</th><th rowspan="2">使用时间</th>
|
||||
<th colspan="8">监测数据</th><th rowspan="2">更多信息</th>
|
||||
</tr>
|
||||
<tr><th>身高(cm)</th><th>体重(kg)</th><th>BMI</th><th>基础代谢</th><th>体脂肪量(kg)</th><th>体脂肪率(%)</th><th>体水分量(kg)</th><th>蛋白质量(kg)</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>张三</td><td>EMP001</td><td>采油一厂</td><td>生产部</td><td>男</td><td>35</td><td>2026-05-13 08:30</td><td>175</td><td>72.5</td><td>23.7</td><td>1,680</td><td>15.2</td><td>21.0</td><td>38.6</td><td>8.5</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"175","体重(kg)":"72.5","BMI":"23.7","基础代谢":"1,680","InBody评分(分)":"62"},"体脂分析":{"体脂肪量(kg)":"15.2","体脂肪率(%)":"21.0","内脏脂肪等级":"-","肥胖度(%)":"147","去脂体重(kg)":"59.6"},"体成分":{"体水分(L)":"43.7","蛋白质(kg)":"11.8","无机盐(kg)":"4.11","骨骼肌量(kg)":"33.6","骨骼肌指数(kg)":"8.8"},"体重管理":{"目标体重(kg)":"70.2","体重控制(kg)":"-23.1","脂肪控制(kg)":"-23.1","肌肉控制(kg)":"0.0","腰臀比(%)":"0.98"},"节段脂肪":{"左上肢(kg)":"2.7","左下肢(kg)":"4.7","右上肢(kg)":"2.6","右下肢(kg)":"4.8","躯干(kg)":"17.5"},"节段肌肉":{"左上肢(kg)":"3.35","左下肢(kg)":"9.11","右上肢(kg)":"3.5","右下肢(kg)":"9.4","躯干(kg)":"26.9"}}'>查看</a></td></tr>
|
||||
<tr><td>李四</td><td>EMP002</td><td>采油一厂</td><td>技术部</td><td>女</td><td>28</td><td>2026-05-13 09:15</td><td>162</td><td>55.0</td><td>21.0</td><td>1,320</td><td>13.8</td><td>25.1</td><td>28.6</td><td>6.2</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"162","体重(kg)":"55.0","BMI":"21.0","基础代谢":"1,320","InBody评分(分)":"75"},"体脂分析":{"体脂肪量(kg)":"13.8","体脂肪率(%)":"25.1","内脏脂肪等级":"-","肥胖度(%)":"105","去脂体重(kg)":"41.2"},"体成分":{"体水分(L)":"30.2","蛋白质(kg)":"8.1","无机盐(kg)":"2.95","骨骼肌量(kg)":"22.4","骨骼肌指数(kg)":"6.2"},"体重管理":{"目标体重(kg)":"52.0","体重控制(kg)":"-3.0","脂肪控制(kg)":"-5.8","肌肉控制(kg)":"2.8","腰臀比(%)":"0.82"},"节段脂肪":{"左上肢(kg)":"1.5","左下肢(kg)":"3.2","右上肢(kg)":"1.4","右下肢(kg)":"3.1","躯干(kg)":"4.6"},"节段肌肉":{"左上肢(kg)":"2.1","左下肢(kg)":"6.8","右上肢(kg)":"2.2","右下肢(kg)":"7.0","躯干(kg)":"18.5"}}'>查看</a></td></tr>
|
||||
<tr><td>王五</td><td>EMP003</td><td>采油一厂</td><td>安全部</td><td>男</td><td>42</td><td>2026-05-13 10:05</td><td>170</td><td>78.0</td><td>27.0</td><td>1,580</td><td>19.5</td><td>25.0</td><td>40.2</td><td>9.1</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"170","体重(kg)":"78.0","BMI":"27.0","基础代谢":"1,580","InBody评分(分)":"58"},"体脂分析":{"体脂肪量(kg)":"19.5","体脂肪率(%)":"25.0","内脏脂肪等级":"12","肥胖度(%)":"125","去脂体重(kg)":"58.5"},"体成分":{"体水分(L)":"42.1","蛋白质(kg)":"11.2","无机盐(kg)":"3.88","骨骼肌量(kg)":"31.8","骨骼肌指数(kg)":"8.2"},"体重管理":{"目标体重(kg)":"68.0","体重控制(kg)":"-10.0","脂肪控制(kg)":"-12.5","肌肉控制(kg)":"2.5","腰臀比(%)":"0.92"},"节段脂肪":{"左上肢(kg)":"2.4","左下肢(kg)":"4.2","右上肢(kg)":"2.3","右下肢(kg)":"4.3","躯干(kg)":"6.3"},"节段肌肉":{"左上肢(kg)":"3.2","左下肢(kg)":"8.9","右上肢(kg)":"3.3","右下肢(kg)":"9.1","躯干(kg)":"25.2"}}'>查看</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>共 3 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工匿名 -->
|
||||
<div class="tab-content" id="tab-1">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>使用日期</label><input class="filter-input" type="date" style="min-width:130px;"> ~ <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="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">姓名</th><th rowspan="2">使用时间</th>
|
||||
<th colspan="8">监测数据</th><th rowspan="2">更多信息</th>
|
||||
</tr>
|
||||
<tr><th>身高(cm)</th><th>体重(kg)</th><th>BMI</th><th>基础代谢</th><th>体脂肪量(kg)</th><th>体脂肪率(%)</th><th>体水分量(kg)</th><th>蛋白质量(kg)</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>匿名用户</td><td>2026-05-13 11:20</td><td>168</td><td>65.0</td><td>23.0</td><td>1,450</td><td>14.3</td><td>22.0</td><td>34.5</td><td>7.8</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"168","体重(kg)":"65.0","BMI":"23.0","基础代谢":"1,450","InBody评分(分)":"68"},"体脂分析":{"体脂肪量(kg)":"14.3","体脂肪率(%)":"22.0","内脏脂肪等级":"-","肥胖度(%)":"112","去脂体重(kg)":"50.7"},"体成分":{"体水分(L)":"36.8","蛋白质(kg)":"9.8","无机盐(kg)":"3.42","骨骼肌量(kg)":"28.5","骨骼肌指数(kg)":"7.5"},"体重管理":{"目标体重(kg)":"62.0","体重控制(kg)":"-3.0","脂肪控制(kg)":"-5.3","肌肉控制(kg)":"2.3","腰臀比(%)":"0.86"},"节段脂肪":{"左上肢(kg)":"1.8","左下肢(kg)":"3.5","右上肢(kg)":"1.7","右下肢(kg)":"3.4","躯干(kg)":"3.9"},"节段肌肉":{"左上肢(kg)":"2.8","左下肢(kg)":"7.8","右上肢(kg)":"2.9","右下肢(kg)":"8.0","躯干(kg)":"22.1"}}'>查看</a></td></tr>
|
||||
<tr><td>匿名用户</td><td>2026-05-13 14:35</td><td>180</td><td>85.0</td><td>26.2</td><td>1,750</td><td>20.4</td><td>24.0</td><td>44.2</td><td>10.2</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"180","体重(kg)":"85.0","BMI":"26.2","基础代谢":"1,750","InBody评分(分)":"55"},"体脂分析":{"体脂肪量(kg)":"20.4","体脂肪率(%)":"24.0","内脏脂肪等级":"10","肥胖度(%)":"130","去脂体重(kg)":"64.6"},"体成分":{"体水分(L)":"46.5","蛋白质(kg)":"12.4","无机盐(kg)":"4.35","骨骼肌量(kg)":"35.2","骨骼肌指数(kg)":"9.2"},"体重管理":{"目标体重(kg)":"75.0","体重控制(kg)":"-10.0","脂肪控制(kg)":"-13.4","肌肉控制(kg)":"3.4","腰臀比(%)":"0.95"},"节段脂肪":{"左上肢(kg)":"2.5","左下肢(kg)":"4.5","右上肢(kg)":"2.4","右下肢(kg)":"4.6","躯干(kg)":"6.4"},"节段肌肉":{"左上肢(kg)":"3.5","左下肢(kg)":"9.5","右上肢(kg)":"3.6","右下肢(kg)":"9.7","躯干(kg)":"27.8"}}'>查看</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>共 2 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Dialog弹窗 -->
|
||||
<div class="dialog-mask" id="dialogMask">
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<span class="dialog__title">监测数据详情</span>
|
||||
<button class="dialog__close" onclick="closeDialog()">×</button>
|
||||
</div>
|
||||
<div class="dialog__body" id="dialogBody"></div>
|
||||
</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 switchTab(idx){
|
||||
document.querySelectorAll('.tab-item').forEach(function(t,i){t.classList.toggle('active',i===idx);});
|
||||
document.querySelectorAll('.tab-content').forEach(function(c,i){c.classList.toggle('active',i===idx);});
|
||||
}
|
||||
function closeDialog(){document.getElementById('dialogMask').classList.remove('show');}
|
||||
(function(){
|
||||
var mask=document.getElementById('dialogMask');
|
||||
var body=document.getElementById('dialogBody');
|
||||
mask.addEventListener('click',function(e){if(e.target===mask)closeDialog();});
|
||||
document.addEventListener('click',function(e){
|
||||
var trigger=e.target.closest('.tip-trigger');
|
||||
if(!trigger)return;
|
||||
e.preventDefault();
|
||||
var row=trigger.closest('tr');
|
||||
var name=row.querySelector('td').textContent;
|
||||
document.querySelector('.dialog__title').textContent='监测数据详情 - '+name;
|
||||
var data=JSON.parse(trigger.getAttribute('data-tip'));
|
||||
var html='';
|
||||
for(var section in data){
|
||||
html+='<div class="dialog-section"><div class="dialog-section__title">'+section+'</div><div class="dialog-grid">';
|
||||
var items=data[section];
|
||||
for(var k in items){
|
||||
html+='<div class="dialog-cell"><span class="dialog-cell__label">'+k+'</span><span class="dialog-cell__val">'+items[k]+'</span></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
}
|
||||
body.innerHTML=html;
|
||||
mask.classList.add('show');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{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:160px;}
|
||||
.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:140px;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.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;min-width:1100px;}
|
||||
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);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;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.sortable{cursor:pointer;user-select:none;}.sortable:hover{color:var(--primary);}
|
||||
.sortable::after{content:'⇅';margin-left:4px;font-size:10px;opacity:.5;}
|
||||
.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>
|
||||
<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-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>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.html" class="sidebar-item active">设备监测</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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编码</label><input class="filter-input" placeholder="请输入设备编码"></div>
|
||||
<div class="filter-item"><label>所属单位</label><select class="filter-select"><option value="">全部</option><option>采油一厂</option><option>采油二厂</option><option>采气厂</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<!-- 操作按钮栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</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>布放位置</th>
|
||||
<th class="sortable">本周使用次数</th><th class="sortable">本月使用次数</th><th class="sortable">本年使用次数</th><th class="sortable">累计使用次数</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>智能体脂仪A01</td><td>FT-2024-001</td><td>采油一厂</td><td>办公楼1层大厅</td><td>48</td><td>205</td><td>1,230</td><td>3,420</td><td><a class="link" href="fat-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能体脂仪A02</td><td>FT-2024-002</td><td>采油一厂</td><td>健身房</td><td>76</td><td>312</td><td>1,890</td><td>4,680</td><td><a class="link" href="fat-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能体脂仪B01</td><td>FT-2024-003</td><td>采油二厂</td><td>职工活动中心</td><td>38</td><td>162</td><td>920</td><td>1,985</td><td><a class="link" href="fat-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能体脂仪B02</td><td>FT-2024-004</td><td>采油二厂</td><td>办公楼2层</td><td>27</td><td>128</td><td>756</td><td>1,650</td><td><a class="link" href="fat-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能体脂仪C01</td><td>FT-2024-005</td><td>采气厂</td><td>综合楼1层</td><td>59</td><td>256</td><td>1,520</td><td>3,780</td><td><a class="link" href="fat-monitor-detail.html">数据明细</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 5 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">›</button>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,161 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 面包屑 */
|
||||
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb span{color:var(--text-placeholder);}
|
||||
/* 表单卡片 */
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.form-card__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.form-card__header h2{font-size:var(--font-lg);font-weight:600;}
|
||||
.form-card__body{padding:32px 24px;}
|
||||
.form-card__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);background:#FAFAFA;}
|
||||
/* 表单 */
|
||||
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;max-width:800px;}
|
||||
.form-item{display:flex;flex-direction:column;gap:6px;}
|
||||
.form-item.full{grid-column:1/-1;}
|
||||
.form-item label{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.form-item label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-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;width:100%;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-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;width:100%;}
|
||||
.map-picker{height:200px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f0f2f5;display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:var(--font-sm);cursor:pointer;}
|
||||
.map-picker:hover{border-color:var(--primary);}
|
||||
.map-picker__icon{display:flex;flex-direction:column;align-items:center;gap:8px;}
|
||||
.radio-group{display:flex;gap:20px;align-items:center;height:36px;}
|
||||
.radio-group label{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;font-weight:400;}
|
||||
.radio-group input[type="radio"]{cursor:pointer;}
|
||||
.btn{height:36px;padding:0 20px;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;text-decoration:none;}
|
||||
.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);}
|
||||
</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-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__body">
|
||||
<a href="scale-device.html" class="sidebar-item active">设备管理</a>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="scale-device.html">设备管理</a><span>/</span><span>新增设备</span>
|
||||
</div>
|
||||
<!-- 表单卡片 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__header"><h2>新增体重秤设备</h2></div>
|
||||
<div class="form-card__body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><label>设备名称<span class="required">*</span></label><input class="form-input" placeholder="请输入设备名称"></div>
|
||||
<div class="form-item"><label>设备编码<span class="required">*</span></label><input class="form-input" placeholder="请输入设备编码"></div>
|
||||
<div class="form-item"><label>所属单位<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>采油一厂</option><option>采油二厂</option><option>采气厂</option></select></div>
|
||||
<div class="form-item"><label>设备厂商<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>华为</option><option>小米</option><option>乐心</option></select></div>
|
||||
<div class="form-item"><label>设备型号<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>HW-S100</option><option>MI-Scale2</option><option>LX-Pro</option></select></div>
|
||||
<div class="form-item"><label>入库日期<span class="required">*</span></label><input class="form-input" type="date"></div>
|
||||
<div class="form-item full">
|
||||
<label>布放位置<span class="required">*</span></label>
|
||||
<!-- [交互] 点击地图区域触发地图选点，选点后将经纬度回填并更新详细地址 -->
|
||||
<div class="map-picker"><div class="map-picker__icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M16 3C11.03 3 7 7.03 7 12c0 6.75 9 17 9 17s9-10.25 9-17c0-4.97-4.03-9-9-9zm0 12.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z" fill="#999"/></svg><span>点击地图选择布放位置</span></div></div>
|
||||
</div>
|
||||
<div class="form-item full"><label>详细地址<span class="required">*</span></label><input class="form-input" placeholder="地图选点后自动填充，可手动修改"></div>
|
||||
<div class="form-item"><label>负责人</label><input class="form-input" placeholder="请输入负责人姓名"></div>
|
||||
<div class="form-item"><label>负责人电话</label><input class="form-input" placeholder="请输入联系电话"></div>
|
||||
<div class="form-item"><label>厂商电话</label><input class="form-input" placeholder="请输入厂商联系电话"></div>
|
||||
<div class="form-item"><label>设备状态</label><div class="radio-group"><label><input type="radio" name="status" checked> 正常</label><label><input type="radio" name="status"> 维护中</label><label><input type="radio" name="status"> 已停用</label></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-card__footer">
|
||||
<!-- [交互] 点击取消跳转回: ./scale-device.html -->
|
||||
<a href="scale-device.html" class="btn btn-default">取消</a>
|
||||
<button class="btn btn-primary">保存</button>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{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:160px;}
|
||||
.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:140px;}
|
||||
.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);}
|
||||
.btn-success{background:var(--success);color:#fff;}.btn-success:hover{background:#73d13d;}
|
||||
/* 操作按钮栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
/* 表格 */
|
||||
.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;min-width:1000px;}
|
||||
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);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;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link-danger:hover{color:#ff7875;}
|
||||
/* 分页 */
|
||||
.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>
|
||||
<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-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__body">
|
||||
<a href="scale-device.html" class="sidebar-item active">设备管理</a>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选条件 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编码</label><input class="filter-input" placeholder="请输入设备编码"></div>
|
||||
<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><select class="filter-select"><option value="">全部</option><option>华为</option><option>小米</option><option>乐心</option></select></div>
|
||||
<div class="filter-item"><label>设备型号</label><select class="filter-select"><option value="">全部</option><option>HW-S100</option><option>MI-Scale2</option><option>LX-Pro</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-bar">
|
||||
<!-- [交互] 点击跳转至: ./scale-device-add.html -->
|
||||
<a href="scale-device-add.html" class="btn btn-primary" style="text-decoration:none;">+ 新增设备</a>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
<button class="btn btn-success">批量入库导入</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>设备型号</th><th>所属单位</th><th>布放位置</th><th>入库日期</th><th>设备状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>SC-2024-001</td><td>体重秤A1</td><td>华为</td><td>HW-S100</td><td>采油一厂</td><td>职工活动中心1F</td><td>2024-03-15</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>SC-2024-002</td><td>体重秤A2</td><td>小米</td><td>MI-Scale2</td><td>采油一厂</td><td>办公楼2F健身房</td><td>2024-03-18</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>SC-2024-003</td><td>体重秤B1</td><td>乐心</td><td>LX-Pro</td><td>采油二厂</td><td>员工食堂入口</td><td>2024-04-02</td><td><span class="tag tag-orange">维护中</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>SC-2024-004</td><td>体重秤B2</td><td>华为</td><td>HW-S100</td><td>采油二厂</td><td>宿舍楼大厅</td><td>2024-04-10</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>SC-2024-005</td><td>体重秤C1</td><td>小米</td><td>MI-Scale2</td><td>采气厂</td><td>综合办公楼1F</td><td>2024-05-08</td><td><span class="tag tag-red">已停用</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</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>
|
||||
</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>
|
||||
</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;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
|
||||
.page-header__back{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;color:var(--text-secondary);}
|
||||
.page-header__back:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.page-header__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
/* 设备信息卡 */
|
||||
.device-info{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;gap:40px;flex-wrap:wrap;}
|
||||
.device-info__item{display:flex;flex-direction:column;gap:4px;}
|
||||
.device-info__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.device-info__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.device-info__value--highlight{color:var(--primary);font-size:var(--font-base);font-weight:600;}
|
||||
.device-info__stats{display:flex;gap:40px;margin-left:auto;flex-shrink:0;}
|
||||
/* Tab */
|
||||
.tab-bar{display:flex;gap:0;margin-bottom:16px;border-bottom:1px solid var(--border);background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);}
|
||||
.tab-item{padding:14px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-content{display:none;}.tab-content.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);color:var(--text-primary);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);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);}
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
/* 表格 */
|
||||
.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;min-width:1400px;}
|
||||
thead th{background:#FAFAFA;padding:10px 12px;text-align:center;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;}
|
||||
thead th:last-child{border-right:none;}
|
||||
tbody td{padding:10px 12px;font-size:var(--font-xs);color:var(--text-primary);border-bottom:1px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;text-align:center;}
|
||||
tbody td:last-child{border-right:none;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-xs);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
/* Dialog弹窗 */
|
||||
.dialog-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:300;display:none;align-items:center;justify-content:center;}
|
||||
.dialog-mask.show{display:flex;}
|
||||
.dialog{background:#fff;border-radius:var(--radius-lg);width:720px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,0.2);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:20px;transition:all .2s;}
|
||||
.dialog__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.dialog__body{padding:20px 24px;overflow-y:auto;flex:1;}
|
||||
.dialog-section{margin-bottom:20px;}
|
||||
.dialog-section:last-child{margin-bottom:0;}
|
||||
.dialog-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);}
|
||||
.dialog-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;}
|
||||
.dialog-cell{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:1px solid #f0f0f0;margin:-0.5px;}
|
||||
.dialog-cell__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.dialog-cell__val{font-size:var(--font-xs);color:var(--text-primary);font-weight:500;}
|
||||
.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>
|
||||
<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-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__body">
|
||||
<a href="scale-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="scale-monitor.html" class="sidebar-item active">设备监测</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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<a class="page-header__back" href="scale-monitor.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>
|
||||
<span class="page-header__title">体重秤数据明细</span>
|
||||
</div>
|
||||
<!-- 设备信息卡 -->
|
||||
<div class="device-info">
|
||||
<div class="device-info__item"><span class="device-info__label">设备名称</span><span class="device-info__value">智能体重秤A01</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">设备编码</span><span class="device-info__value">SC-2024-001</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">所属单位</span><span class="device-info__value">采油一厂</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">布放位置</span><span class="device-info__value">办公楼1层大厅</span></div>
|
||||
<div class="device-info__stats">
|
||||
<div class="device-info__item"><span class="device-info__label">本周使用次数</span><span class="device-info__value device-info__value--highlight">56</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">本月使用次数</span><span class="device-info__value device-info__value--highlight">238</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">本年使用次数</span><span class="device-info__value device-info__value--highlight">1,420</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">累计使用次数</span><span class="device-info__value device-info__value--highlight">3,856</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab(0)">员工实名</div>
|
||||
<div class="tab-item" onclick="switchTab(1)">员工匿名</div>
|
||||
</div>
|
||||
<!-- 员工实名 -->
|
||||
<div class="tab-content active" id="tab-0">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>员工姓名</label><input class="filter-input" placeholder="请输入姓名"></div>
|
||||
<div class="filter-item"><label>员工编号</label><input class="filter-input" placeholder="请输入编号"></div>
|
||||
<div class="filter-item"><label>单位部门</label><select class="filter-select"><option value="">全部</option><option>采油一厂</option><option>采油二厂</option></select></div>
|
||||
<div class="filter-item"><label>使用日期</label><input class="filter-input" type="date" style="min-width:130px;"> ~ <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="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<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 rowspan="2">性别</th><th rowspan="2">年龄</th><th rowspan="2">使用时间</th>
|
||||
<th colspan="10">监测数据</th><th rowspan="2">更多信息</th>
|
||||
</tr>
|
||||
<tr><th>身高(cm)</th><th>体重(kg)</th><th>BMI</th><th>基础代谢</th><th>体脂肪量(kg)</th><th>体脂肪率(%)</th><th>体水分量(kg)</th><th>体水分率(%)</th><th>蛋白质量(kg)</th><th>蛋白质率(%)</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>张三</td><td>EMP001</td><td>采油一厂</td><td>生产部</td><td>男</td><td>35</td><td>2026-05-13 08:30</td><td>175</td><td>72.5</td><td>23.7</td><td>1,680</td><td>15.2</td><td>21.0</td><td>38.6</td><td>53.2</td><td>8.5</td><td>11.7</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"175","体重(kg)":"72.5","BMI":"23.7","基础代谢":"1,680","体脂肪量(kg)":"15.2","体脂肪率(%)":"21.0"},"水分与蛋白质":{"体水分量(kg)":"38.6","体水分率(%)":"53.2","蛋白质量(kg)":"8.5","蛋白质率(%)":"11.7"},"肌肉与骨骼":{"肌肉率(%)":"-","肌肉量(kg)":"-","体骨骼量/骨量(kg)":"-"},"脂肪分析":{"皮下脂肪率(%)":"-","内脏脂肪等级":"-","去脂体重(kg)":"-"},"其他":{"无机盐量/矿物质量(kg)":"-","细胞内液(kg)":"-","细胞外液(kg)":"-","健康评分":"-"}}'>查看</a></td></tr>
|
||||
<tr><td>李四</td><td>EMP002</td><td>采油一厂</td><td>技术部</td><td>女</td><td>28</td><td>2026-05-13 09:15</td><td>162</td><td>55.0</td><td>21.0</td><td>1,320</td><td>13.8</td><td>25.1</td><td>28.6</td><td>52.0</td><td>6.2</td><td>11.3</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"162","体重(kg)":"55.0","BMI":"21.0","基础代谢":"1,320","体脂肪量(kg)":"13.8","体脂肪率(%)":"25.1"},"水分与蛋白质":{"体水分量(kg)":"28.6","体水分率(%)":"52.0","蛋白质量(kg)":"6.2","蛋白质率(%)":"11.3"},"肌肉与骨骼":{"肌肉率(%)":"-","肌肉量(kg)":"-","体骨骼量/骨量(kg)":"-"},"脂肪分析":{"皮下脂肪率(%)":"-","内脏脂肪等级":"-","去脂体重(kg)":"-"},"其他":{"无机盐量/矿物质量(kg)":"-","细胞内液(kg)":"-","细胞外液(kg)":"-","健康评分":"-"}}'>查看</a></td></tr>
|
||||
<tr><td>王五</td><td>EMP003</td><td>采油一厂</td><td>安全部</td><td>男</td><td>42</td><td>2026-05-13 10:05</td><td>170</td><td>78.0</td><td>27.0</td><td>1,580</td><td>19.5</td><td>25.0</td><td>40.2</td><td>51.5</td><td>9.1</td><td>11.7</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"170","体重(kg)":"78.0","BMI":"27.0","基础代谢":"1,580","体脂肪量(kg)":"19.5","体脂肪率(%)":"25.0"},"水分与蛋白质":{"体水分量(kg)":"40.2","体水分率(%)":"51.5","蛋白质量(kg)":"9.1","蛋白质率(%)":"11.7"},"肌肉与骨骼":{"肌肉率(%)":"-","肌肉量(kg)":"-","体骨骼量/骨量(kg)":"-"},"脂肪分析":{"皮下脂肪率(%)":"-","内脏脂肪等级":"-","去脂体重(kg)":"-"},"其他":{"无机盐量/矿物质量(kg)":"-","细胞内液(kg)":"-","细胞外液(kg)":"-","健康评分":"-"}}'>查看</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>共 3 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工匿名 -->
|
||||
<div class="tab-content" id="tab-1">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>使用日期</label><input class="filter-input" type="date" style="min-width:130px;"> ~ <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="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">姓名</th><th rowspan="2">使用时间</th>
|
||||
<th colspan="10">监测数据</th><th rowspan="2">更多信息</th>
|
||||
</tr>
|
||||
<tr><th>身高(cm)</th><th>体重(kg)</th><th>BMI</th><th>基础代谢</th><th>体脂肪量(kg)</th><th>体脂肪率(%)</th><th>体水分量(kg)</th><th>体水分率(%)</th><th>蛋白质量(kg)</th><th>蛋白质率(%)</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>匿名用户</td><td>2026-05-13 11:20</td><td>168</td><td>65.0</td><td>23.0</td><td>1,450</td><td>14.3</td><td>22.0</td><td>34.5</td><td>53.1</td><td>7.8</td><td>12.0</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"168","体重(kg)":"65.0","BMI":"23.0","基础代谢":"1,450","体脂肪量(kg)":"14.3","体脂肪率(%)":"22.0"},"水分与蛋白质":{"体水分量(kg)":"34.5","体水分率(%)":"53.1","蛋白质量(kg)":"7.8","蛋白质率(%)":"12.0"},"肌肉与骨骼":{"肌肉率(%)":"-","肌肉量(kg)":"-","体骨骼量/骨量(kg)":"-"},"脂肪分析":{"皮下脂肪率(%)":"-","内脏脂肪等级":"-","去脂体重(kg)":"-"},"其他":{"无机盐量/矿物质量(kg)":"-","细胞内液(kg)":"-","细胞外液(kg)":"-","健康评分":"-"}}'>查看</a></td></tr>
|
||||
<tr><td>匿名用户</td><td>2026-05-13 14:35</td><td>180</td><td>85.0</td><td>26.2</td><td>1,750</td><td>20.4</td><td>24.0</td><td>44.2</td><td>52.0</td><td>10.2</td><td>12.0</td><td><a class="link tip-trigger" data-tip='{"基础指标":{"身高(cm)":"180","体重(kg)":"85.0","BMI":"26.2","基础代谢":"1,750","体脂肪量(kg)":"20.4","体脂肪率(%)":"24.0"},"水分与蛋白质":{"体水分量(kg)":"44.2","体水分率(%)":"52.0","蛋白质量(kg)":"10.2","蛋白质率(%)":"12.0"},"肌肉与骨骼":{"肌肉率(%)":"-","肌肉量(kg)":"-","体骨骼量/骨量(kg)":"-"},"脂肪分析":{"皮下脂肪率(%)":"-","内脏脂肪等级":"-","去脂体重(kg)":"-"},"其他":{"无机盐量/矿物质量(kg)":"-","细胞内液(kg)":"-","细胞外液(kg)":"-","健康评分":"-"}}'>查看</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>共 2 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Dialog弹窗 -->
|
||||
<div class="dialog-mask" id="dialogMask">
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<span class="dialog__title">监测数据详情</span>
|
||||
<button class="dialog__close" onclick="closeDialog()">×</button>
|
||||
</div>
|
||||
<div class="dialog__body" id="dialogBody"></div>
|
||||
</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 switchTab(idx){
|
||||
document.querySelectorAll('.tab-item').forEach(function(t,i){t.classList.toggle('active',i===idx);});
|
||||
document.querySelectorAll('.tab-content').forEach(function(c,i){c.classList.toggle('active',i===idx);});
|
||||
}
|
||||
function closeDialog(){document.getElementById('dialogMask').classList.remove('show');}
|
||||
(function(){
|
||||
var mask=document.getElementById('dialogMask');
|
||||
var body=document.getElementById('dialogBody');
|
||||
mask.addEventListener('click',function(e){if(e.target===mask)closeDialog();});
|
||||
document.addEventListener('click',function(e){
|
||||
var trigger=e.target.closest('.tip-trigger');
|
||||
if(!trigger)return;
|
||||
e.preventDefault();
|
||||
var row=trigger.closest('tr');
|
||||
var name=row.querySelector('td').textContent;
|
||||
document.querySelector('.dialog__title').textContent='监测数据详情 - '+name;
|
||||
var data=JSON.parse(trigger.getAttribute('data-tip'));
|
||||
var html='';
|
||||
for(var section in data){
|
||||
html+='<div class="dialog-section"><div class="dialog-section__title">'+section+'</div><div class="dialog-grid">';
|
||||
var items=data[section];
|
||||
for(var k in items){
|
||||
html+='<div class="dialog-cell"><span class="dialog-cell__label">'+k+'</span><span class="dialog-cell__val">'+items[k]+'</span></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
}
|
||||
body.innerHTML=html;
|
||||
mask.classList.add('show');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{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:160px;}
|
||||
.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:140px;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.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;min-width:1100px;}
|
||||
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);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;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.sortable{cursor:pointer;user-select:none;}.sortable:hover{color:var(--primary);}
|
||||
.sortable::after{content:'⇅';margin-left:4px;font-size:10px;opacity:.5;}
|
||||
.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>
|
||||
<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-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__body">
|
||||
<a href="scale-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="scale-monitor.html" class="sidebar-item active">设备监测</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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编码</label><input class="filter-input" placeholder="请输入设备编码"></div>
|
||||
<div class="filter-item"><label>所属单位</label><select class="filter-select"><option value="">全部</option><option>采油一厂</option><option>采油二厂</option><option>采气厂</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<!-- 操作按钮栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</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>布放位置</th>
|
||||
<th class="sortable">本周使用次数</th><th class="sortable">本月使用次数</th><th class="sortable">本年使用次数</th><th class="sortable">累计使用次数</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>智能体重秤A01</td><td>SC-2024-001</td><td>采油一厂</td><td>办公楼1层大厅</td><td>56</td><td>238</td><td>1,420</td><td>3,856</td><td><a class="link" href="scale-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能体重秤A02</td><td>SC-2024-002</td><td>采油一厂</td><td>健身房</td><td>89</td><td>356</td><td>2,105</td><td>5,230</td><td><a class="link" href="scale-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能体重秤B01</td><td>SC-2024-003</td><td>采油二厂</td><td>职工活动中心</td><td>42</td><td>178</td><td>980</td><td>2,145</td><td><a class="link" href="scale-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能体重秤B02</td><td>SC-2024-004</td><td>采油二厂</td><td>办公楼2层</td><td>31</td><td>145</td><td>876</td><td>1,920</td><td><a class="link" href="scale-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能体重秤C01</td><td>SC-2024-005</td><td>采气厂</td><td>综合楼1层</td><td>67</td><td>289</td><td>1,680</td><td>4,102</td><td><a class="link" href="scale-monitor-detail.html">数据明细</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 5 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">›</button>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,162 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 面包屑 */
|
||||
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb span{color:var(--text-placeholder);}
|
||||
/* 表单卡片 */
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.form-card__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.form-card__header h2{font-size:var(--font-lg);font-weight:600;}
|
||||
.form-card__body{padding:32px 24px;}
|
||||
.form-card__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);background:#FAFAFA;}
|
||||
/* 表单 */
|
||||
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;max-width:800px;}
|
||||
.form-item{display:flex;flex-direction:column;gap:6px;}
|
||||
.form-item.full{grid-column:1/-1;}
|
||||
.form-item label{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.form-item label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-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;width:100%;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-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;width:100%;}
|
||||
.map-picker{height:200px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f0f2f5;display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:var(--font-sm);cursor:pointer;}
|
||||
.map-picker:hover{border-color:var(--primary);}
|
||||
.map-picker__icon{display:flex;flex-direction:column;align-items:center;gap:8px;}
|
||||
.radio-group{display:flex;gap:20px;align-items:center;height:36px;}
|
||||
.radio-group label{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;font-weight:400;}
|
||||
.radio-group input[type="radio"]{cursor:pointer;}
|
||||
.btn{height:36px;padding:0 20px;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;text-decoration:none;}
|
||||
.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);}
|
||||
</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-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__body">
|
||||
<a href="scale-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item active">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="sport-device.html">设备管理</a><span>/</span><span>新增设备</span>
|
||||
</div>
|
||||
<!-- 表单卡片 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__header"><h2>新增运动器械设备</h2></div>
|
||||
<div class="form-card__body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><label>设备名称<span class="required">*</span></label><input class="form-input" placeholder="请输入设备名称"></div>
|
||||
<div class="form-item"><label>设备编码<span class="required">*</span></label><input class="form-input" placeholder="请输入设备编码"></div>
|
||||
<div class="form-item"><label>所属单位<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>采油一厂</option><option>采油二厂</option><option>采气厂</option></select></div>
|
||||
<div class="form-item"><label>设备厂商<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>舒华</option><option>岱宇</option><option>康乐佳</option></select></div>
|
||||
<div class="form-item"><label>设备型号<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>SH-T5170</option><option>DY-E600</option><option>KLJ-R800</option><option>SH-G6560</option><option>KLJ-F800</option></select></div>
|
||||
<div class="form-item"><label>设备类型<span class="required">*</span></label><select class="form-select"><option value="">请选择</option><option>有氧器械</option><option>力量器械</option></select></div>
|
||||
<div class="form-item"><label>入库日期<span class="required">*</span></label><input class="form-input" type="date"></div>
|
||||
<div class="form-item full">
|
||||
<label>布放位置<span class="required">*</span></label>
|
||||
<!-- [交互] 点击地图区域触发地图选点，选点后将经纬度回填并更新详细地址 -->
|
||||
<div class="map-picker"><div class="map-picker__icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M16 3C11.03 3 7 7.03 7 12c0 6.75 9 17 9 17s9-10.25 9-17c0-4.97-4.03-9-9-9zm0 12.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z" fill="#999"/></svg><span>点击地图选择布放位置</span></div></div>
|
||||
</div>
|
||||
<div class="form-item full"><label>详细地址<span class="required">*</span></label><input class="form-input" placeholder="地图选点后自动填充，可手动修改"></div>
|
||||
<div class="form-item"><label>负责人</label><input class="form-input" placeholder="请输入负责人姓名"></div>
|
||||
<div class="form-item"><label>负责人电话</label><input class="form-input" placeholder="请输入联系电话"></div>
|
||||
<div class="form-item"><label>厂商电话</label><input class="form-input" placeholder="请输入厂商联系电话"></div>
|
||||
<div class="form-item"><label>设备状态</label><div class="radio-group"><label><input type="radio" name="status" checked> 正常</label><label><input type="radio" name="status"> 维护中</label><label><input type="radio" name="status"> 已停用</label></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-card__footer">
|
||||
<!-- [交互] 点击取消跳转回: ./scale-device.html -->
|
||||
<a href="sport-device.html" class="btn btn-default">取消</a>
|
||||
<button class="btn btn-primary">保存</button>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,178 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{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:160px;}
|
||||
.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:140px;}
|
||||
.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);}
|
||||
.btn-success{background:var(--success);color:#fff;}.btn-success:hover{background:#73d13d;}
|
||||
/* 操作按钮栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
/* 表格 */
|
||||
.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;min-width:1000px;}
|
||||
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);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);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-purple{background:#F9F0FF;color:#722ED1;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link-danger:hover{color:#ff7875;}
|
||||
/* 分页 */
|
||||
.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>
|
||||
<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-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__body">
|
||||
<a href="scale-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item active">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选条件 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编码</label><input class="filter-input" placeholder="请输入设备编码"></div>
|
||||
<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><select class="filter-select"><option value="">全部</option><option>舒华</option><option>岱宇</option><option>康乐佳</option></select></div>
|
||||
<div class="filter-item"><label>设备型号</label><select class="filter-select"><option value="">全部</option><option>SH-T5170</option><option>DY-E600</option><option>KLJ-R800</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-bar">
|
||||
<!-- [交互] 点击跳转至: ./sport-device-add.html -->
|
||||
<a href="sport-device-add.html" class="btn btn-primary" style="text-decoration:none;">+ 新增设备</a>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
<button class="btn btn-success">批量入库导入</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>设备厂商</th><th>设备型号</th><th>所属单位</th><th>布放位置</th><th>入库日期</th><th>设备状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>SP-2024-001</td><td>跑步机T1</td><td><span class="tag tag-blue">有氧器械</span></td><td>舒华</td><td>SH-T5170</td><td>采油一厂</td><td>职工活动中心1F</td><td>2024-03-15</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>SP-2024-002</td><td>椭圆机E1</td><td><span class="tag tag-blue">有氧器械</span></td><td>岱宇</td><td>DY-E600</td><td>采油一厂</td><td>办公楼2F健身房</td><td>2024-03-18</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>SP-2024-003</td><td>划船机R1</td><td><span class="tag tag-blue">有氧器械</span></td><td>康乐佳</td><td>KLJ-R800</td><td>采油二厂</td><td>员工食堂入口</td><td>2024-04-02</td><td><span class="tag tag-orange">维护中</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>SP-2024-004</td><td>史密斯架S1</td><td><span class="tag tag-purple">力量器械</span></td><td>舒华</td><td>SH-G6560</td><td>采油二厂</td><td>宿舍楼大厅</td><td>2024-04-10</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
<tr><td>SP-2024-005</td><td>龙门架L1</td><td><span class="tag tag-purple">力量器械</span></td><td>康乐佳</td><td>KLJ-F800</td><td>采气厂</td><td>综合办公楼1F</td><td>2024-05-08</td><td><span class="tag tag-red">已停用</span></td><td><a class="link">详情</a> <a class="link">编辑</a> <a class="link-danger">删除</a></td></tr>
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-purple{background:#F9F0FF;color:#722ED1;}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</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>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,227 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.page-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
|
||||
.page-header__back{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;color:var(--text-secondary);}
|
||||
.page-header__back:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.page-header__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.device-info{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;gap:40px;flex-wrap:wrap;}
|
||||
.device-info__item{display:flex;flex-direction:column;gap:4px;}
|
||||
.device-info__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.device-info__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.device-info__value--highlight{color:var(--primary);font-size:var(--font-base);font-weight:600;}
|
||||
.device-info__stats{display:flex;gap:40px;margin-left:auto;flex-shrink:0;}
|
||||
.tab-bar{display:flex;gap:0;margin-bottom:16px;border-bottom:1px solid var(--border);background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);}
|
||||
.tab-item{padding:14px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-content{display:none;}.tab-content.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);color:var(--text-primary);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);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);}
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.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;min-width:1100px;}
|
||||
thead th{background:#FAFAFA;padding:12px 14px;text-align:center;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:12px 14px;font-size:var(--font-xs);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-xs);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);}
|
||||
</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-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>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item active">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<a class="page-header__back" href="sport-monitor.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>
|
||||
<span class="page-header__title">运动器械数据明细</span>
|
||||
</div>
|
||||
<!-- 设备信息卡 -->
|
||||
<div class="device-info">
|
||||
<div class="device-info__item"><span class="device-info__label">设备名称</span><span class="device-info__value">智能跑步机A01</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">设备编码</span><span class="device-info__value">SP-2024-001</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">所属单位</span><span class="device-info__value">采油一厂</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">布放位置</span><span class="device-info__value">健身房</span></div>
|
||||
<div class="device-info__stats">
|
||||
<div class="device-info__item"><span class="device-info__label">本周使用次数</span><span class="device-info__value device-info__value--highlight">120</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">本月使用次数</span><span class="device-info__value device-info__value--highlight">485</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">本年使用次数</span><span class="device-info__value device-info__value--highlight">2,860</span></div>
|
||||
<div class="device-info__item"><span class="device-info__label">累计使用次数</span><span class="device-info__value device-info__value--highlight">6,320</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab(0)">员工实名</div>
|
||||
<div class="tab-item" onclick="switchTab(1)">员工匿名</div>
|
||||
</div>
|
||||
<!-- 员工实名 -->
|
||||
<div class="tab-content active" id="tab-0">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>员工姓名</label><input class="filter-input" placeholder="请输入姓名"></div>
|
||||
<div class="filter-item"><label>员工编号</label><input class="filter-input" placeholder="请输入编号"></div>
|
||||
<div class="filter-item"><label>单位部门</label><select class="filter-select"><option value="">全部</option><option>采油一厂</option><option>采油二厂</option></select></div>
|
||||
<div class="filter-item"><label>运动日期</label><input class="filter-input" type="date" style="min-width:130px;"> ~ <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="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</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>所属部门</th><th>性别</th><th>年龄</th><th>身高(cm)</th><th>体重(kg)</th><th>运动时间</th><th>运动时长(分钟)</th><th>运动消耗(千卡)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>张三</td><td>EMP001</td><td>采油一厂</td><td>生产部</td><td>男</td><td>35</td><td>175</td><td>72.5</td><td>2026-05-13 07:30</td><td>45</td><td>380</td></tr>
|
||||
<tr><td>李四</td><td>EMP002</td><td>采油一厂</td><td>技术部</td><td>女</td><td>28</td><td>162</td><td>55.0</td><td>2026-05-13 08:15</td><td>30</td><td>245</td></tr>
|
||||
<tr><td>王五</td><td>EMP003</td><td>采油一厂</td><td>安全部</td><td>男</td><td>42</td><td>170</td><td>78.0</td><td>2026-05-13 12:00</td><td>60</td><td>520</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>共 3 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工匿名 -->
|
||||
<div class="tab-content" id="tab-1">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>运动日期</label><input class="filter-input" type="date" style="min-width:130px;"> ~ <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="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</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>身高(cm)</th><th>体重(kg)</th><th>运动时间</th><th>运动时长(分钟)</th><th>运动消耗(千卡)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>匿名用户</td><td>2026-05-13 11:20</td><td>168</td><td>65.0</td><td>2026-05-13 11:20</td><td>35</td><td>290</td></tr>
|
||||
<tr><td>匿名用户</td><td>2026-05-13 14:35</td><td>180</td><td>85.0</td><td>2026-05-13 14:35</td><td>50</td><td>450</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>共 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 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 switchTab(idx){
|
||||
document.querySelectorAll('.tab-item').forEach(function(t,i){t.classList.toggle('active',i===idx);});
|
||||
document.querySelectorAll('.tab-content').forEach(function(c,i){c.classList.toggle('active',i===idx);});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{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:160px;}
|
||||
.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:140px;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.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;min-width:1100px;}
|
||||
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);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;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.sortable{cursor:pointer;user-select:none;}.sortable:hover{color:var(--primary);}
|
||||
.sortable::after{content:'⇅';margin-left:4px;font-size:10px;opacity:.5;}
|
||||
.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>
|
||||
<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-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>
|
||||
<a href="scale-monitor.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="bluetooth-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="bluetooth-monitor.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="fat-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="fat-monitor.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="sport-device.html" class="sidebar-item">设备管理</a>
|
||||
<a href="sport-monitor.html" class="sidebar-item active">设备监测</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="employee-data.html" class="sidebar-item">员工监测数据</a>
|
||||
<a href="dept-stat.html" class="sidebar-item">单位数据统计</a>
|
||||
<a href="employee-stat.html" class="sidebar-item">员工数据统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编码</label><input class="filter-input" placeholder="请输入设备编码"></div>
|
||||
<div class="filter-item"><label>所属单位</label><select class="filter-select"><option value="">全部</option><option>采油一厂</option><option>采油二厂</option><option>采气厂</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<!-- 操作按钮栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-default">导出列表数据</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>布放位置</th>
|
||||
<th class="sortable">本周使用次数</th><th class="sortable">本月使用次数</th><th class="sortable">本年使用次数</th><th class="sortable">累计使用次数</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>智能跑步机A01</td><td>SP-2024-001</td><td>采油一厂</td><td>健身房</td><td>120</td><td>485</td><td>2,860</td><td>6,320</td><td><a class="link" href="sport-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能跑步机A02</td><td>SP-2024-002</td><td>采油一厂</td><td>职工活动中心</td><td>98</td><td>412</td><td>2,350</td><td>5,180</td><td><a class="link" href="sport-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能椭圆机B01</td><td>SP-2024-003</td><td>采油二厂</td><td>健身房</td><td>65</td><td>278</td><td>1,560</td><td>3,420</td><td><a class="link" href="sport-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能动感单车B02</td><td>SP-2024-004</td><td>采油二厂</td><td>职工活动中心</td><td>78</td><td>320</td><td>1,890</td><td>4,150</td><td><a class="link" href="sport-monitor-detail.html">数据明细</a></td></tr>
|
||||
<tr><td>智能划船机C01</td><td>SP-2024-005</td><td>采气厂</td><td>综合楼健身房</td><td>45</td><td>198</td><td>1,120</td><td>2,560</td><td><a class="link" href="sport-monitor-detail.html">数据明细</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 5 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">›</button>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user