feat: 更新体重管理报告详情页及蓝牙秤小程序页面
This commit is contained in:
@@ -210,7 +210,6 @@
|
||||
|
||||
<!-- 家庭成员表单 -->
|
||||
<div id="familyForm" style="display:none;">
|
||||
<button id="selectMemberBtn" onclick="openMemberSelector()" style="width:100%;margin-bottom:12px;background:#e8f8ef;color:#07c160;border:2px solid #07c160;border-radius:12px;padding:12px;font-size:15px;font-weight:600;cursor:pointer;">从已有成员中选择</button>
|
||||
<div class="form-card">
|
||||
<div class="form-item">
|
||||
<span class="form-label">昵称<span style="color:#ff4d4f;">*</span></span>
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
font-weight: 600; color: #1a1a1a; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .icons { display: flex; gap: 6px; font-size: 12px; color: #666; }
|
||||
|
||||
.nav-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
padding: 0 16px; border-bottom: 0.5px solid var(--border);
|
||||
@@ -41,6 +42,44 @@
|
||||
}
|
||||
.nav-bar .back { font-size: 22px; color: var(--primary); cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
|
||||
.nav-bar__right { margin-left: auto; position: relative; z-index: 100; }
|
||||
.nav-bar__more {
|
||||
font-size: 15px; color: var(--primary); background: none; border: none;
|
||||
padding: 4px 8px; cursor: pointer; font-weight: 500;
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
}
|
||||
.nav-bar__more::after { content: '▾'; font-size: 10px; }
|
||||
|
||||
.model-menu__overlay {
|
||||
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 98; display: none;
|
||||
}
|
||||
.model-menu__overlay--show { display: block; }
|
||||
|
||||
.model-menu {
|
||||
position: absolute; top: 38px; right: 0;
|
||||
background: #fff; border-radius: 12px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
||||
padding: 6px 0; min-width: 140px;
|
||||
display: none; z-index: 99;
|
||||
}
|
||||
.model-menu--show { display: block; animation: menuSlideIn 0.15s ease; }
|
||||
@keyframes menuSlideIn {
|
||||
from { opacity: 0; transform: translateY(-6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.model-menu__item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 10px 18px; font-size: 14px; color: var(--text-primary);
|
||||
cursor: pointer; transition: background 0.15s; border: none;
|
||||
background: none; width: 100%; text-align: left;
|
||||
}
|
||||
.model-menu__item:hover { background: #f5f5f5; }
|
||||
.model-menu__item .dot { font-size: 10px; width: 16px; text-align: center; }
|
||||
.model-menu__item--active { color: var(--primary); font-weight: 600; }
|
||||
.model-menu__divider { height: 1px; background: var(--border); margin: 4px 12px; }
|
||||
|
||||
.page-content { flex: 1; overflow-y: auto; background: var(--bg); padding: 12px; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
@@ -55,10 +94,14 @@
|
||||
width: 100px; height: 100px; background: rgba(255,255,255,0.08); border-radius: 50%;
|
||||
}
|
||||
.report-header__top {
|
||||
display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.report-header__time { font-size: 13px; opacity: 0.85; display: flex; align-items: center; gap: 6px; }
|
||||
.report-header__model-badge {
|
||||
font-size: 11px; background: rgba(255,255,255,0.25); border-radius: 10px;
|
||||
padding: 2px 8px; opacity: 0.9;
|
||||
}
|
||||
.report-header__main {
|
||||
display: flex; align-items: center; gap: 20px; position: relative; z-index: 1;
|
||||
}
|
||||
@@ -80,9 +123,20 @@
|
||||
content: ''; width: 3px; height: 16px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 2px;
|
||||
}
|
||||
.data-section__badge {
|
||||
font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 4px;
|
||||
background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* 网格布局 */
|
||||
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
|
||||
.data-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
|
||||
.data-grid--3col .data-cell { border-right: 1px solid #f5f5f5; }
|
||||
.data-grid--3col .data-cell:nth-child(3n) { border-right: none; }
|
||||
.data-grid--3col .data-cell:nth-last-child(-n+3) { border-bottom: none; }
|
||||
.data-grid--3col .data-cell:nth-last-child(1):nth-child(3n-2),
|
||||
.data-grid--3col .data-cell:nth-last-child(2):nth-child(3n-2) { border-bottom: none; }
|
||||
.data-cell {
|
||||
padding: 12px; border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
@@ -92,13 +146,10 @@
|
||||
.data-cell__label { font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.data-cell__value { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.data-cell__unit { font-size: 11px; color: #999; margin-left: 2px; }
|
||||
.data-cell__status {
|
||||
.data-cell__tag {
|
||||
display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.data-cell__status--normal { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
|
||||
.data-cell__status--warn { background: #fff7e6; color: #fa8c16; border: 1px solid #ffd591; }
|
||||
.data-cell__status--high { background: #fff2f0; color: #ff4d4f; border: 1px solid #ffccc7; }
|
||||
.data-cell__status--low { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }
|
||||
|
||||
/* 行布局 */
|
||||
.data-row {
|
||||
@@ -110,6 +161,10 @@
|
||||
.data-row__right { display: flex; align-items: center; gap: 6px; }
|
||||
.data-row__value { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.data-row__unit { font-size: 12px; color: #999; }
|
||||
.data-row__tag {
|
||||
display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* BMI 指示条 */
|
||||
.bmi-bar { margin-top: 12px; }
|
||||
@@ -144,116 +199,398 @@
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="main.html">‹</a>
|
||||
<span class="title">详细报告</span>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 报告头部 -->
|
||||
<div class="report-header">
|
||||
<div class="report-header__top">
|
||||
<div class="report-header__time">📅 2026-07-16 08:32</div>
|
||||
</div>
|
||||
<div class="report-header__main">
|
||||
<div class="report-header__weight">
|
||||
<span class="report-header__weight-num">72.5</span>
|
||||
<span class="report-header__weight-unit">kg</span>
|
||||
<div class="nav-bar__right">
|
||||
<button class="nav-bar__more" onclick="toggleModelMenu()">更多</button>
|
||||
<div class="model-menu__overlay" id="modelMenuOverlay" onclick="closeModelMenu()"></div>
|
||||
<div class="model-menu" id="modelMenu">
|
||||
<div class="model-menu__item model-menu__item--active" onclick="switchModel('8')">
|
||||
<span class="dot">●</span> 8电极
|
||||
</div>
|
||||
<div class="report-header__tags">
|
||||
<span class="report-tag report-tag--normal">BMI 正常</span>
|
||||
<span class="report-tag report-tag--change">较上次 -0.3kg</span>
|
||||
<div class="model-menu__divider"></div>
|
||||
<div class="model-menu__item" onclick="switchModel('4')">
|
||||
<span class="dot">○</span> 4电极
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础指标 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">基础指标</div>
|
||||
<div class="data-grid">
|
||||
<div class="data-cell"><div class="data-cell__label">身高</div><div class="data-cell__value">175<span class="data-cell__unit">cm</span></div></div>
|
||||
<div class="data-cell"><div class="data-cell__label">体重</div><div class="data-cell__value">72.5<span class="data-cell__unit">kg</span></div></div>
|
||||
<div class="data-cell"><div class="data-cell__label">BMI</div><div class="data-cell__value">23.7<span class="data-cell__status data-cell__status--normal">正常</span></div></div>
|
||||
<div class="data-cell"><div class="data-cell__label">基础代谢</div><div class="data-cell__value">1,680<span class="data-cell__unit">kcal</span></div></div>
|
||||
<div class="data-cell"><div class="data-cell__label">体脂肪量</div><div class="data-cell__value">15.2<span class="data-cell__unit">kg</span></div></div>
|
||||
<div class="data-cell"><div class="data-cell__label">体脂肪率</div><div class="data-cell__value">21.0<span class="data-cell__unit">%</span><span class="data-cell__status data-cell__status--normal" id="detailFatLevelTag">正常</span></div></div>
|
||||
</div>
|
||||
<div class="bmi-bar">
|
||||
<div class="bmi-bar__track"><div class="bmi-bar__pointer" style="left:43.5%"></div></div>
|
||||
<div class="bmi-bar__labels"><span>BMI<18.5 消瘦</span><span>18.5≤BMI<24 正常</span><span>24≤BMI<28 超重</span><span>BMI≥28 肥胖</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 水分与蛋白质 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">水分与蛋白质</div>
|
||||
<div class="data-row"><span class="data-row__label">体水分量</span><div class="data-row__right"><span class="data-row__value">37.8</span><span class="data-row__unit">kg</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">体水分率</span><div class="data-row__right"><span class="data-row__value">52.1</span><span class="data-row__unit">%</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">蛋白质量</span><div class="data-row__right"><span class="data-row__value">8.2</span><span class="data-row__unit">kg</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">蛋白质率</span><div class="data-row__right"><span class="data-row__value">11.3</span><span class="data-row__unit">%</span></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 肌肉与骨骼 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">肌肉与骨骼</div>
|
||||
<div class="data-row"><span class="data-row__label">体肌肉量</span><div class="data-row__right"><span class="data-row__value">30.5</span><span class="data-row__unit">kg</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">体肌肉率</span><div class="data-row__right"><span class="data-row__value">42.1</span><span class="data-row__unit">%</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">体骨骼量</span><div class="data-row__right"><span class="data-row__value">3.0</span><span class="data-row__unit">kg</span></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 脂肪分析 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">脂肪分析</div>
|
||||
<div class="data-row"><span class="data-row__label">皮下脂肪量</span><div class="data-row__right"><span class="data-row__value">12.8</span><span class="data-row__unit">kg</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">皮下脂肪率</span><div class="data-row__right"><span class="data-row__value">17.7</span><span class="data-row__unit">%</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">除脂肪量</span><div class="data-row__right"><span class="data-row__value">57.3</span><span class="data-row__unit">kg</span></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 细胞液 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">细胞液</div>
|
||||
<div class="data-row"><span class="data-row__label">细胞外液量</span><div class="data-row__right"><span class="data-row__value">14.2</span><span class="data-row__unit">L</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">细胞外液率</span><div class="data-row__right"><span class="data-row__value">37.6</span><span class="data-row__unit">%</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">细胞内液量</span><div class="data-row__right"><span class="data-row__value">23.6</span><span class="data-row__unit">L</span></div></div>
|
||||
<div class="data-row"><span class="data-row__label">细胞内液率</span><div class="data-row__right"><span class="data-row__value">62.4</span><span class="data-row__unit">%</span></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 其他 -->
|
||||
<div class="data-section">
|
||||
<div class="data-section__title">其他</div>
|
||||
<div class="data-row"><span class="data-row__label">矿物质量</span><div class="data-row__right"><span class="data-row__value">3.48</span><span class="data-row__unit">kg</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-content" id="pageContent"></div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 体脂率等级判断 ===== */
|
||||
function getBodyFatLevel(sex, age, bf) {
|
||||
// 日本肥胖学会分龄分性别标准
|
||||
var thresholds;
|
||||
if (sex === 'male' || sex === '男') {
|
||||
if (age < 40) thresholds = { thin: 11, fit: 20, heavy: 25 };
|
||||
else if (age < 60) thresholds = { thin: 12, fit: 21, heavy: 26 };
|
||||
else thresholds = { thin: 14, fit: 23, heavy: 28 };
|
||||
} else {
|
||||
if (age < 40) thresholds = { thin: 21, fit: 32, heavy: 37 };
|
||||
else if (age < 60) thresholds = { thin: 23, fit: 34, heavy: 39 };
|
||||
else thresholds = { thin: 25, fit: 36, heavy: 41 };
|
||||
}
|
||||
if (bf < thresholds.thin) return { label: '偏瘦', cssClass: 'data-cell__status--low' };
|
||||
if (bf <= thresholds.fit) return { label: '正常', cssClass: 'data-cell__status--normal' };
|
||||
if (bf <= thresholds.heavy) return { label: '偏胖', cssClass: 'data-cell__status--warn' };
|
||||
return { label: '肥胖', cssClass: 'data-cell__status--high' };
|
||||
/* ========================================================================
|
||||
* 4电极 指标(以 Excel 为准:30项)
|
||||
* ======================================================================== */
|
||||
var lefuData4 = [
|
||||
{ bodyParamName:"BMI", bodyParamKey:"ppBMI", currentValue:22.6, standardTitle:"标准", standColor:"#14CCAD", unit:"" },
|
||||
{ bodyParamName:"体重", bodyParamKey:"ppWeightKg", currentValue:67.9, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"体脂率", bodyParamKey:"ppFat", currentValue:15.7, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"骨量", bodyParamKey:"ppBoneKg", currentValue:2.8, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"内脏脂肪", bodyParamKey:"ppVisceralFat", currentValue:8, standardTitle:"标准", standColor:"#14CCAD", unit:"" },
|
||||
{ bodyParamName:"BMR", bodyParamKey:"ppBMR", currentValue:1559, standardTitle:"偏低", standColor:"#F5A623", unit:"kcal/天" },
|
||||
{ bodyParamName:"水分率", bodyParamKey:"ppWaterPercentage", currentValue:56, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"肌肉量", bodyParamKey:"ppMuscleKg", currentValue:52.8, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"蛋白质率", bodyParamKey:"ppProteinPercentage", currentValue:16.9, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"肥胖等级", bodyParamKey:"ppFatGrade", currentValue:22.6, standardTitle:"标准", standColor:"#14CCAD", unit:"" },
|
||||
{ bodyParamName:"皮下脂肪率", bodyParamKey:"ppBodyFatSubCutPercentage",currentValue:10.5, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"身体得分", bodyParamKey:"ppBodyScore", currentValue:94, standardTitle:"很棒", standColor:"#0F9982", unit:"" },
|
||||
{ bodyParamName:"身体年龄", bodyParamKey:"ppBodyAge", currentValue:19, standardTitle:"年轻", standColor:"#14CCAD", unit:"岁" },
|
||||
{ bodyParamName:"身体类型", bodyParamKey:"ppBodyType", currentValue:"标准型",standardTitle:"标准型",standColor:"", unit:"" },
|
||||
{ bodyParamName:"去脂体重", bodyParamKey:"ppLoseFatWeightKg", currentValue:55.5, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"心率", bodyParamKey:"ppHeartRate", currentValue:89, standardTitle:"偏高", standColor:"#F43F31", unit:"次/分" },
|
||||
{ bodyParamName:"理想体重", bodyParamKey:"ppBodyStandardWeightKg", currentValue:65.1, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"健康评估", bodyParamKey:"ppBodyHealth", currentValue:4, standardTitle:"良好", standColor:"#14CCAD", unit:"" },
|
||||
{ bodyParamName:"骨骼肌率", bodyParamKey:"ppBodySkeletal", currentValue:42.4, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"骨骼肌量", bodyParamKey:"ppBodySkeletalKg", currentValue:28.8, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"控制体重", bodyParamKey:"ppControlWeightKg", currentValue:2.8, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"脂肪控制量", bodyParamKey:"ppFatControlKg", currentValue:1.7, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"肌肉控制量", bodyParamKey:"ppBodyMuscleControl", currentValue:0.9, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"肌肉率", bodyParamKey:"ppMusclePercentage", currentValue:77.6, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"脂肪量", bodyParamKey:"ppBodyfatKg", currentValue:10.7, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"水分量", bodyParamKey:"ppWaterKg", currentValue:38.0, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"蛋白质量", bodyParamKey:"ppProteinKg", currentValue:11.5, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"皮下脂肪量", bodyParamKey:"ppBodyFatSubCutKg", currentValue:7.1, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"脚长", bodyParamKey:"ppFootLen", currentValue:25.5, standardTitle:"", standColor:"", unit:"cm" }
|
||||
];
|
||||
|
||||
/* ========================================================================
|
||||
* 8电极 API 返回数据
|
||||
* ======================================================================== */
|
||||
var lefuData8 = [
|
||||
{ bodyParamName:"BMI", bodyParamKey:"ppBMI", currentValue:19.6, standardTitle:"标准", standColor:"#14CCAD", unit:"" },
|
||||
{ bodyParamName:"体重", bodyParamKey:"ppWeightKg", currentValue:56, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"体脂率", bodyParamKey:"ppFat", currentValue:25.5, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"骨量", bodyParamKey:"ppBoneKg", currentValue:2.3, standardTitle:"偏低", standColor:"#F5A623", unit:"kg" },
|
||||
{ bodyParamName:"内脏脂肪", bodyParamKey:"ppVisceralFat", currentValue:6, standardTitle:"标准", standColor:"#14CCAD", unit:"" },
|
||||
{ bodyParamName:"BMR", bodyParamKey:"ppBMR", currentValue:1270, standardTitle:"标准", standColor:"#14CCAD", unit:"kcal/天" },
|
||||
{ bodyParamName:"肌肉量", bodyParamKey:"ppMuscleKg", currentValue:38.8, standardTitle:"偏低", standColor:"#F5A623", unit:"kg" },
|
||||
{ bodyParamName:"蛋白质率", bodyParamKey:"ppProteinPercentage", currentValue:10, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"蛋白质量", bodyParamKey:"ppProteinKg", currentValue:8.2, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"皮下脂肪率", bodyParamKey:"ppBodyFatSubCutPercentage",currentValue:22.5, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"身体得分", bodyParamKey:"ppBodyScore", currentValue:73, standardTitle:"", standColor:"", unit:"" },
|
||||
{ bodyParamName:"身体年龄", bodyParamKey:"ppBodyAge", currentValue:20, standardTitle:"", standColor:"", unit:"" },
|
||||
{ bodyParamName:"身体类型", bodyParamKey:"ppBodyType", currentValue:"缺乏运动型",standardTitle:"缺乏运动型",standColor:"", unit:"" },
|
||||
{ bodyParamName:"去脂体重", bodyParamKey:"ppLoseFatWeightKg", currentValue:41.7, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"心率", bodyParamKey:"ppHeartRate", currentValue:69, standardTitle:"", standColor:"", unit:"次/分" },
|
||||
{ bodyParamName:"理想体重", bodyParamKey:"ppBodyStandardWeightKg", currentValue:62.1, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"健康评估", bodyParamKey:"ppBodyHealth", currentValue:2, standardTitle:"一般", standColor:"#F5A623", unit:"" },
|
||||
{ bodyParamName:"骨骼肌量", bodyParamKey:"ppBodySkeletalKg", currentValue:22.5, standardTitle:"不足", standColor:"#F5A623", unit:"kg" },
|
||||
{ bodyParamName:"骨骼肌率", bodyParamKey:"ppBodySkeletal", currentValue:40, standardTitle:"偏低", standColor:"#F5A623", unit:"%" },
|
||||
{ bodyParamName:"控制体重", bodyParamKey:"ppControlWeightKg", currentValue:3.9, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"脂肪控制量", bodyParamKey:"ppFatControlKg", currentValue:-0.5, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"肌肉控制量", bodyParamKey:"ppBodyMuscleControl", currentValue:4.4, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"肌肉率", bodyParamKey:"ppMusclePercentage", currentValue:69.2, standardTitle:"", standColor:"", unit:"%" },
|
||||
{ bodyParamName:"脂肪量", bodyParamKey:"ppBodyfatKg", currentValue:14.3, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"水分量", bodyParamKey:"ppWaterKg", currentValue:30.6, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"水分率", bodyParamKey:"ppWaterPercentage", currentValue:50, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"皮下脂肪量", bodyParamKey:"ppBodyFatSubCutKg", currentValue:12.6, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"身体细胞量", bodyParamKey:"ppCellMassKg", currentValue:27.4, standardTitle:"偏低", standColor:"#F5A623", unit:"kg" },
|
||||
{ bodyParamName:"建议卡路里摄入量", bodyParamKey:"ppDCI", currentValue:1651, standardTitle:"", standColor:"", unit:"kcal/天" },
|
||||
{ bodyParamName:"无机盐量", bodyParamKey:"ppMineralKg", currentValue:2.9, standardTitle:"标准", standColor:"#14CCAD", unit:"kg" },
|
||||
{ bodyParamName:"骨骼肌质量指数", bodyParamKey:"ppSmi", currentValue:7.2, standardTitle:"", standColor:"", unit:"kg/m²" },
|
||||
{ bodyParamName:"肥胖度", bodyParamKey:"ppObesity", currentValue:93, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"细胞外水量", bodyParamKey:"ppWaterECWKg", currentValue:11.4, standardTitle:"偏低", standColor:"#F5A623", unit:"kg" },
|
||||
{ bodyParamName:"细胞内水量", bodyParamKey:"ppWaterICWKg", currentValue:19.1, standardTitle:"偏低", standColor:"#F5A623", unit:"kg" },
|
||||
{ bodyParamName:"推测腰臀比", bodyParamKey:"ppWHR", currentValue:0.8, standardTitle:"标准", standColor:"#14CCAD", unit:"%" },
|
||||
{ bodyParamName:"左腿脂肪量", bodyParamKey:"ppBodyFatKgLeftLeg", currentValue:1.9, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"左臂脂肪量", bodyParamKey:"ppBodyFatKgLeftArm", currentValue:0.8, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"右臂脂肪量", bodyParamKey:"ppBodyFatKgRightArm", currentValue:0.8, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"右腿脂肪量", bodyParamKey:"ppBodyFatKgRightLeg", currentValue:1.8, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"躯干脂肪量", bodyParamKey:"ppBodyFatKgTrunk", currentValue:7.2, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"左臂脂肪率", bodyParamKey:"ppBodyFatRateLeftArm", currentValue:80, standardTitle:"", standColor:"", unit:"%" },
|
||||
{ bodyParamName:"左腿脂肪率", bodyParamKey:"ppBodyFatRateLeftLeg", currentValue:73, standardTitle:"", standColor:"", unit:"%" },
|
||||
{ bodyParamName:"右臂脂肪率", bodyParamKey:"ppBodyFatRateRightArm", currentValue:80, standardTitle:"", standColor:"", unit:"%" },
|
||||
{ bodyParamName:"右腿脂肪率", bodyParamKey:"ppBodyFatRateRightLeg", currentValue:69.2, standardTitle:"", standColor:"", unit:"%" },
|
||||
{ bodyParamName:"躯干脂肪率", bodyParamKey:"ppBodyFatRateTrunk", currentValue:128.5, standardTitle:"", standColor:"", unit:"%" },
|
||||
{ bodyParamName:"左臂肌肉量", bodyParamKey:"ppMuscleKgLeftArm", currentValue:2, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"左腿肌肉量", bodyParamKey:"ppMuscleKgLeftLeg", currentValue:6.5, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"右臂肌肉量", bodyParamKey:"ppMuscleKgRightArm", currentValue:2.1, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"右腿肌肉量", bodyParamKey:"ppMuscleKgRightLeg", currentValue:6.6, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"躯干肌肉量", bodyParamKey:"ppMuscleKgTrunk", currentValue:18.4, standardTitle:"", standColor:"", unit:"kg" },
|
||||
{ bodyParamName:"左臂肌肉率", bodyParamKey:"ppMuscleRateLeftArm", currentValue:90.9, standardTitle:"", standColor:"", unit:"%" },
|
||||
{ bodyParamName:"左腿肌肉率", bodyParamKey:"ppMuscleRateLeftLeg", currentValue:100, standardTitle:"", standColor:"", unit:"%" },
|
||||
{ bodyParamName:"右臂肌肉率", bodyParamKey:"ppMuscleRateRightArm", currentValue:95.4, standardTitle:"", standColor:"", unit:"%" },
|
||||
{ bodyParamName:"右腿肌肉率", bodyParamKey:"ppMuscleRateRightLeg", currentValue:101.5, standardTitle:"", standColor:"", unit:"%" },
|
||||
{ bodyParamName:"躯干肌肉率", bodyParamKey:"ppMuscleRateTrunk", currentValue:97.8, standardTitle:"", standColor:"", unit:"%" }
|
||||
];
|
||||
|
||||
/* ===== 工具函数 ===== */
|
||||
function buildMap(data) {
|
||||
var map = {};
|
||||
data.forEach(function(item) {
|
||||
map[item.bodyParamKey.trim()] = item;
|
||||
});
|
||||
return map;
|
||||
}
|
||||
|
||||
function formatVal(v) {
|
||||
if (typeof v === 'number') {
|
||||
return v % 1 === 0 ? v.toLocaleString() : v.toLocaleString(undefined, { minimumFractionDigits:1, maximumFractionDigits:1 });
|
||||
}
|
||||
return String(v);
|
||||
}
|
||||
|
||||
function displayVal(item) {
|
||||
// ppBodyHealth 的 currentValue 是编号,应显示等级名称
|
||||
if (item.bodyParamKey === 'ppBodyHealth') {
|
||||
return item.standardTitle || String(item.currentValue);
|
||||
}
|
||||
return formatVal(item.currentValue);
|
||||
}
|
||||
|
||||
function needsStatusTag(item) {
|
||||
// ppBodyHealth 的值本身就是等级,不需要额外标签
|
||||
// ppBodyScore 只显示分数,不需要等级标签
|
||||
// 体重、体脂率 不显示等级标签
|
||||
var noTag = ['ppBodyHealth','ppBodyScore','ppWeightKg','ppFat'];
|
||||
if (noTag.indexOf(item.bodyParamKey) !== -1) return false;
|
||||
return !!(item.standardTitle);
|
||||
}
|
||||
|
||||
function getBMITag(bmi) {
|
||||
if (bmi < 18.5) return { label:'消瘦', color:'#1890ff' };
|
||||
if (bmi < 24) return { label:'正常', color:'#52c41a' };
|
||||
if (bmi < 28) return { label:'超重', color:'#fa8c16' };
|
||||
return { label:'肥胖', color:'#ff4d4f' };
|
||||
}
|
||||
|
||||
function statusTag(item) {
|
||||
if (!needsStatusTag(item)) return '';
|
||||
var label, color;
|
||||
if (item.bodyParamKey === 'ppBMI') {
|
||||
var t = getBMITag(parseFloat(item.currentValue));
|
||||
label = t.label; color = t.color;
|
||||
} else {
|
||||
label = item.standardTitle; color = item.standColor || '#999';
|
||||
}
|
||||
return '<span class="data-cell__tag" style="background:' + color + '15; color:' + color + '; border:1px solid ' + color + '44">' + label + '</span>';
|
||||
}
|
||||
|
||||
function statusTagRow(item) {
|
||||
if (!needsStatusTag(item)) return '';
|
||||
var color = item.standColor || '#999';
|
||||
return '<span class="data-row__tag" style="background:' + color + '15; color:' + color + '; border:1px solid ' + color + '44">' + item.standardTitle + '</span>';
|
||||
}
|
||||
|
||||
/* ===== 分区定义 ===== */
|
||||
var sectionConfig = [
|
||||
// ---- 基础指标 (grid, 共用) ----
|
||||
{
|
||||
id: 'basic', title: '基础指标', layout: 'grid',
|
||||
keys: ['ppWeightKg','ppBMI','ppFat','ppBodyScore','ppBodyHealth']
|
||||
},
|
||||
// ---- 身体成分 (row, 共用) ----
|
||||
{
|
||||
id: 'composition', title: '身体成分', layout: 'row',
|
||||
keys: ['ppWaterPercentage','ppWaterKg','ppProteinPercentage','ppProteinKg','ppBodyfatKg','ppMuscleKg','ppMusclePercentage','ppBodySkeletalKg','ppBodySkeletal','ppBoneKg']
|
||||
},
|
||||
// ---- 脂肪分析 (row, 共用) ----
|
||||
{
|
||||
id: 'fat', title: '脂肪分析', layout: 'row',
|
||||
keys: ['ppVisceralFat','ppBodyFatSubCutPercentage','ppBodyFatSubCutKg'],
|
||||
},
|
||||
// ---- 体态管理 (row, 共用) ----
|
||||
{
|
||||
id: 'management', title: '体态管理', layout: 'row',
|
||||
keys: ['ppBodyStandardWeightKg','ppLoseFatWeightKg','ppBodyAge','ppBodyType','ppFootLen'],
|
||||
keys8: ['ppWHR']
|
||||
},
|
||||
// ---- 体重管控 (row, 共用) ----
|
||||
{
|
||||
id: 'control', title: '体重管控', layout: 'row',
|
||||
keys: ['ppControlWeightKg','ppFatControlKg','ppBodyMuscleControl']
|
||||
},
|
||||
// ---- 8电极独有 ----
|
||||
{
|
||||
id: 'fluid', title: '细胞液分析', layout: 'row', only8: true, badge: '8电极',
|
||||
keys: ['ppWaterICWKg','ppWaterECWKg']
|
||||
},
|
||||
{
|
||||
id: 'advanced', title: '进阶成分', layout: 'row', only8: true, badge: '8电极',
|
||||
keys: ['ppMineralKg','ppCellMassKg','ppSmi']
|
||||
},
|
||||
{
|
||||
id: 'limbFat', title: '躯干/四肢脂肪', layout: 'limb', only8: true, badge: '8电极',
|
||||
massUnit: 'kg', rateUnit: '%',
|
||||
limbs: [
|
||||
{ label: '左臂', massKey: 'ppBodyFatKgLeftArm', rateKey: 'ppBodyFatRateLeftArm' },
|
||||
{ label: '右臂', massKey: 'ppBodyFatKgRightArm', rateKey: 'ppBodyFatRateRightArm' },
|
||||
{ label: '左腿', massKey: 'ppBodyFatKgLeftLeg', rateKey: 'ppBodyFatRateLeftLeg' },
|
||||
{ label: '右腿', massKey: 'ppBodyFatKgRightLeg', rateKey: 'ppBodyFatRateRightLeg' },
|
||||
{ label: '躯干', massKey: 'ppBodyFatKgTrunk', rateKey: 'ppBodyFatRateTrunk' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'limbMus', title: '躯干/四肢肌肉', layout: 'limb', only8: true, badge: '8电极',
|
||||
massUnit: 'kg', rateUnit: '%',
|
||||
limbs: [
|
||||
{ label: '左臂', massKey: 'ppMuscleKgLeftArm', rateKey: 'ppMuscleRateLeftArm' },
|
||||
{ label: '右臂', massKey: 'ppMuscleKgRightArm', rateKey: 'ppMuscleRateRightArm' },
|
||||
{ label: '左腿', massKey: 'ppMuscleKgLeftLeg', rateKey: 'ppMuscleRateLeftLeg' },
|
||||
{ label: '右腿', massKey: 'ppMuscleKgRightLeg', rateKey: 'ppMuscleRateRightLeg' },
|
||||
{ label: '躯干', massKey: 'ppMuscleKgTrunk', rateKey: 'ppMuscleRateTrunk' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
/* ===== 生成单个分区 HTML ===== */
|
||||
function renderSection(section, map, type) {
|
||||
var keys = (section.keys || []).slice();
|
||||
if (type === '4' && section.keys4) keys = keys.concat(section.keys4);
|
||||
if (type === '8' && section.keys8) keys = keys.concat(section.keys8);
|
||||
|
||||
// 过滤出有数据的 key
|
||||
var items = [];
|
||||
if (section.layout !== 'limb') {
|
||||
keys.forEach(function(k) {
|
||||
var item = map[k];
|
||||
if (item) items.push(item);
|
||||
});
|
||||
if (items.length === 0) return '';
|
||||
}
|
||||
|
||||
// 初始化体脂肪率等级标签(张建国:男,45岁,体脂率21.0%)
|
||||
(function() {
|
||||
var tag = document.getElementById('detailFatLevelTag');
|
||||
if (tag) {
|
||||
var level = getBodyFatLevel('male', 45, 21.0);
|
||||
tag.textContent = level.label;
|
||||
tag.className = 'data-cell__status ' + level.cssClass;
|
||||
var badgeHtml = '';
|
||||
if (type === '8' && section.badge) {
|
||||
badgeHtml = '<span class="data-section__badge">' + section.badge + '</span>';
|
||||
}
|
||||
|
||||
var titleHtml = '<div class="data-section__title">' + section.title + badgeHtml + '</div>';
|
||||
var bodyHtml = '';
|
||||
|
||||
if (section.layout === 'grid') {
|
||||
var gridClass = 'data-grid' + (section.id === 'basic' ? ' data-grid--3col' : '');
|
||||
bodyHtml = '<div class="' + gridClass + '">';
|
||||
items.forEach(function(item) {
|
||||
bodyHtml += '<div class="data-cell">' +
|
||||
'<div class="data-cell__label">' + item.bodyParamName + '</div>' +
|
||||
'<div class="data-cell__value">' + displayVal(item) +
|
||||
(item.unit ? '<span class="data-cell__unit">' + item.unit + '</span>' : '') +
|
||||
statusTag(item) + '</div></div>';
|
||||
});
|
||||
bodyHtml += '</div>';
|
||||
|
||||
// BMI 分区附加进度条
|
||||
if (section.id === 'basic') {
|
||||
var bmiItem = map['ppBMI'];
|
||||
var bmi = bmiItem ? parseFloat(bmiItem.currentValue) : 22;
|
||||
var bmiPct = Math.min(Math.max((bmi - 14) / 26 * 100, 2), 98);
|
||||
bodyHtml += '<div class="bmi-bar">' +
|
||||
'<div class="bmi-bar__track"><div class="bmi-bar__pointer" style="left:' + bmiPct + '%"></div></div>' +
|
||||
'<div class="bmi-bar__labels"><span>BMI<18.5 消瘦</span><span>18.5≤BMI<24 正常</span><span>24≤BMI<28 超重</span><span>BMI≥28 肥胖</span></div></div>';
|
||||
}
|
||||
})();
|
||||
} else if (section.layout === 'limb') {
|
||||
bodyHtml = '<div class="data-grid">';
|
||||
(section.limbs || []).forEach(function(lb) {
|
||||
var massItem = map[lb.massKey];
|
||||
var rateItem = map[lb.rateKey];
|
||||
var massVal = massItem ? formatVal(massItem.currentValue) : '--';
|
||||
var rateVal = rateItem ? formatVal(rateItem.currentValue) : '--';
|
||||
bodyHtml += '<div class="data-cell">' +
|
||||
'<div class="data-cell__label">' + lb.label + '</div>' +
|
||||
'<div class="data-cell__value" style="font-size:15px">' +
|
||||
massVal + '<span class="data-cell__unit">' + section.massUnit + '</span>' +
|
||||
'<span style="color:#ddd;margin:0 6px;">|</span>' +
|
||||
rateVal + '<span class="data-cell__unit">' + section.rateUnit + '</span>' +
|
||||
'</div></div>';
|
||||
});
|
||||
bodyHtml += '</div>';
|
||||
} else {
|
||||
items.forEach(function(item) {
|
||||
bodyHtml += '<div class="data-row">' +
|
||||
'<span class="data-row__label">' + item.bodyParamName + '</span>' +
|
||||
'<div class="data-row__right">' +
|
||||
'<span class="data-row__value">' + displayVal(item) + '</span>' +
|
||||
(item.unit ? '<span class="data-row__unit">' + item.unit + '</span>' : '') +
|
||||
statusTagRow(item) + '</div></div>';
|
||||
});
|
||||
}
|
||||
|
||||
return '<div class="data-section">' + titleHtml + bodyHtml + '</div>';
|
||||
}
|
||||
|
||||
/* ===== 渲染报告头部 ===== */
|
||||
function renderHeader(map, type) {
|
||||
var weightItem = map['ppWeightKg'];
|
||||
var weight = weightItem ? weightItem.currentValue : '--';
|
||||
var bmiItem = map['ppBMI'];
|
||||
var bmiVal = bmiItem ? parseFloat(bmiItem.currentValue) : 22;
|
||||
var bmiTag = getBMITag(bmiVal);
|
||||
var bmiTitle = bmiTag.label;
|
||||
|
||||
return '<div class="report-header">' +
|
||||
'<div class="report-header__top">' +
|
||||
'<div class="report-header__time">📅 2026-07-16 08:32</div>' +
|
||||
'</div>' +
|
||||
'<div class="report-header__main">' +
|
||||
'<div class="report-header__weight">' +
|
||||
'<span class="report-header__weight-num">' + formatVal(weight) + '</span>' +
|
||||
'<span class="report-header__weight-unit">kg</span>' +
|
||||
'</div>' +
|
||||
'<div class="report-header__tags">' +
|
||||
'<span class="report-tag report-tag--normal">BMI ' + bmiTitle + '</span>' +
|
||||
'<span class="report-tag report-tag--change">较上次 -0.3kg</span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
/* ===== 整体渲染 ===== */
|
||||
var currentModel = '8';
|
||||
|
||||
function renderAll(type) {
|
||||
var data = type === '4' ? lefuData4 : lefuData8;
|
||||
var map = buildMap(data);
|
||||
var html = renderHeader(map, type);
|
||||
|
||||
sectionConfig.forEach(function(section) {
|
||||
// 仅4电极分区在8模式下跳过
|
||||
if (section.only4 && type !== '4') return;
|
||||
// 仅8电极分区在4模式下跳过
|
||||
if (section.only8 && type !== '8') return;
|
||||
html += renderSection(section, map, type);
|
||||
});
|
||||
|
||||
document.getElementById('pageContent').innerHTML = html;
|
||||
}
|
||||
|
||||
/* ===== 型号切换菜单 ===== */
|
||||
function toggleModelMenu() {
|
||||
var menu = document.getElementById('modelMenu');
|
||||
var overlay = document.getElementById('modelMenuOverlay');
|
||||
if (menu.classList.contains('model-menu--show')) {
|
||||
closeModelMenu();
|
||||
} else {
|
||||
menu.classList.add('model-menu--show');
|
||||
overlay.classList.add('model-menu__overlay--show');
|
||||
}
|
||||
}
|
||||
|
||||
function closeModelMenu() {
|
||||
document.getElementById('modelMenu').classList.remove('model-menu--show');
|
||||
document.getElementById('modelMenuOverlay').classList.remove('model-menu__overlay--show');
|
||||
}
|
||||
|
||||
function switchModel(type) {
|
||||
if (currentModel === type) { closeModelMenu(); return; }
|
||||
currentModel = type;
|
||||
closeModelMenu();
|
||||
|
||||
// 更新菜单选中态
|
||||
var items = document.querySelectorAll('#modelMenu .model-menu__item');
|
||||
items.forEach(function(item) {
|
||||
var m = item.getAttribute('onclick').match(/switchModel\('(\d)'\)/);
|
||||
var active = m && m[1] === type;
|
||||
item.classList.toggle('model-menu__item--active', active);
|
||||
var dot = item.querySelector('.dot');
|
||||
if (dot) dot.textContent = active ? '●' : '○';
|
||||
});
|
||||
|
||||
renderAll(type);
|
||||
}
|
||||
|
||||
/* ===== 初始化 ===== */
|
||||
renderAll('8');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -150,14 +150,11 @@
|
||||
- 测量时间
|
||||
- 体重数字
|
||||
- 较上次变化量(绿色↓/红色↑/无变化不显示)
|
||||
- BMI和体脂率并列展示
|
||||
- BMI和体脂率并列展示(仅数值,不显示等级标签)
|
||||
- 详细数据网格(体脂肪量、体水分量、蛋白质量)
|
||||
|
||||
**业务规则:**
|
||||
- BMI参考范围:<18.5消瘦、18.5≤BMI<24正常、24≤BMI<28超重、≥28肥胖
|
||||
- 体脂率等级标准:
|
||||
- 男性:18-39岁(偏瘦<11%、标准11-20%、偏胖20-25%、肥胖>25%);40-59岁(偏瘦<12%、标准12-21%、偏胖21-26%、肥胖>26%);60岁以上(偏瘦<14%、标准14-23%、偏胖23-28%、肥胖>28%)
|
||||
- 女性:18-39岁(偏瘦<21%、标准21-32%、偏胖32-37%、肥胖>37%);40-59岁(偏瘦<23%、标准23-34%、偏胖34-39%、肥胖>39%);60岁以上(偏瘦<25%、标准25-36%、偏胖36-41%、肥胖>41%)
|
||||
- 首次使用无测量数据时显示空状态
|
||||
|
||||
**交互说明:**
|
||||
@@ -383,22 +380,18 @@
|
||||
- 查询结果卡片(姓名、单位-部门、性别、年龄)
|
||||
- 补充信息表单(身高必填、体重选填,员工有数据则自动填入)
|
||||
- 家庭成员表单:
|
||||
- "从已有成员中选择"按钮
|
||||
- 昵称(必填)、身份证(选填,填写后自动识别性别和出生年月)
|
||||
- 性别选择(男女按钮)、出生年月(月份选择器,必填)
|
||||
- 身高(必填,cm)、体重(选填,kg)
|
||||
- 已有成员选择器弹窗(底部弹出,列出可选成员(本人添加过的当前设备外其他设备已录入的成员),点击选择后自动填充表单)
|
||||
|
||||
**业务规则:**
|
||||
- 员工类型:通过员工编号查询系统返回基本信息,身高和体重查询到数据后自动填入
|
||||
- 家庭成员类型:身份证填写后可自动解析性别和出生年月
|
||||
- 家庭成员可从"已有成员"中选择,快速填充当前设备外其他设备已录入的成员
|
||||
|
||||
**交互说明:**
|
||||
- 点击用户类型Tab切换员工/家庭成员表单
|
||||
- 员工模式:输入编号后点击"确认查询"展示查询结果和补充表单
|
||||
- 家庭成员模式:点击"从已有成员中选择"打开底部成员选择器弹窗
|
||||
- 选择已有成员后自动填充昵称、性别、出生年月、身高、体重
|
||||
- 家庭成员模式:手动填写昵称、性别、出生年月、身高、体重
|
||||
- 输入身份证自动解析性别和出生年月
|
||||
- 点击"保存用户信息" → 保存成功后Toast提示"保存成功!"并返回上一页
|
||||
|
||||
@@ -456,38 +449,107 @@
|
||||
|
||||

|
||||
|
||||
**功能说明:** 展示单次测量的完整身体成分报告,包含体重的核心指标、身体成分分析(水分、蛋白质、肌肉、骨骼、脂肪、细胞液)。
|
||||
**功能说明:** 展示单次测量的完整身体成分报告,根据设备类型区分4电极/8电极两种型号查看不同指标范围。
|
||||
|
||||
**主要UI元素:**
|
||||
- 报告头部(绿色渐变背景):
|
||||
- 导航栏:返回按钮 + 标题"详细报告"
|
||||
- 报告头部:
|
||||
- 测量时间
|
||||
- 体重数字大字展示
|
||||
- 标签(BMI状态如"正常"、较上次变化量)
|
||||
- 基础指标(网格布局2列):
|
||||
- 身高/体重/BMI(含状态标签)/基础代谢
|
||||
- 体脂肪量/体脂肪率(含状态标签)
|
||||
- BMI彩色标尺
|
||||
- 水分与蛋白质(行布局):
|
||||
- 体水分量/体水分率/蛋白质量/蛋白质率
|
||||
- 肌肉与骨骼:
|
||||
- 体肌肉量/体肌肉率/体骨骼量
|
||||
- 脂肪分析:
|
||||
- 皮下脂肪量/皮下脂肪率/除脂肪量
|
||||
- 细胞液:
|
||||
- 细胞外液量/细胞外液率/细胞内液量/细胞内液率
|
||||
- 其他:
|
||||
- 矿物质量
|
||||
- 标签(BMI状态、较上次变化量)
|
||||
|
||||
各分区字段明细(8电极完整列表,4电极见差异说明):
|
||||
|
||||
**① 基础指标** | 布局:3列网格 | BMI彩色标尺
|
||||
|
||||
| 指标名 | bodyParamKey | 单位 | 等级标签 |
|
||||
|--------|-------------|------|---------|
|
||||
| 体重 | ppWeightKg | kg | — |
|
||||
| BMI | ppBMI | — | 动态计算(消瘦/正常/超重/肥胖) |
|
||||
| 体脂率 | ppFat | % | — |
|
||||
| 身体得分 | ppBodyScore | — | —(仅数值) |
|
||||
| 健康评估 | ppBodyHealth | — | 显示等级名(注意/亚健康/一般/良好/很棒),非编号 |
|
||||
|
||||
**② 身体成分** | 布局:行布局,按关联指标配对排列
|
||||
|
||||
| 指标名 | bodyParamKey | 单位 | 等级标签 |
|
||||
|--------|-------------|------|---------|
|
||||
| 水分率 | ppWaterPercentage | % | ✓ |
|
||||
| 水分量 | ppWaterKg | kg | ✓ |
|
||||
| 蛋白质率 | ppProteinPercentage | % | ✓ |
|
||||
| 蛋白质量 | ppProteinKg | kg | ✓ |
|
||||
| 脂肪量 | ppBodyfatKg | kg | ✓ |
|
||||
| 肌肉量 | ppMuscleKg | kg | ✓ |
|
||||
| 肌肉率 | ppMusclePercentage | % | ✓ |
|
||||
| 骨骼肌量 | ppBodySkeletalKg | kg | ✓ |
|
||||
| 骨骼肌率 | ppBodySkeletal | % | ✓ |
|
||||
| 骨量 | ppBoneKg | kg | ✓ |
|
||||
|
||||
**③ 脂肪分析** | 布局:行布局
|
||||
|
||||
| 指标名 | bodyParamKey | 单位 | 等级标签 |
|
||||
|--------|-------------|------|---------|
|
||||
| 内脏脂肪 | ppVisceralFat | — | ✓ |
|
||||
| 皮下脂肪率 | ppBodyFatSubCutPercentage | % | ✓ |
|
||||
| 皮下脂肪量 | ppBodyFatSubCutKg | kg | ✓ |
|
||||
|
||||
**④ 体态管理** | 布局:行布局
|
||||
|
||||
| 指标名 | bodyParamKey | 单位 | 等级标签 | 备注 |
|
||||
|--------|-------------|------|---------|------|
|
||||
| 理想体重 | ppBodyStandardWeightKg | kg | — | |
|
||||
| 去脂体重 | ppLoseFatWeightKg | kg | ✓ | |
|
||||
| 身体年龄 | ppBodyAge | 岁 | ✓ | |
|
||||
| 身体类型 | ppBodyType | — | ✓(显示类型名) | |
|
||||
| 推测腰臀比 | ppWHR | % | ✓ | 🔵8电极 |
|
||||
|
||||
**⑤ 体重管控** | 布局:行布局
|
||||
|
||||
| 指标名 | bodyParamKey | 单位 | 等级标签 |
|
||||
|--------|-------------|------|---------|
|
||||
| 控制体重 | ppControlWeightKg | kg | — |
|
||||
| 脂肪控制量 | ppFatControlKg | kg | — |
|
||||
| 肌肉控制量 | ppBodyMuscleControl | kg | — |
|
||||
|
||||
**⑥ 细胞液分析** | 布局:行布局 | 🔵8电极专属
|
||||
|
||||
| 指标名 | bodyParamKey | 单位 | 等级标签 |
|
||||
|--------|-------------|------|---------|
|
||||
| 细胞内水量 | ppWaterICWKg | kg | ✓ |
|
||||
| 细胞外水量 | ppWaterECWKg | kg | ✓ |
|
||||
|
||||
**⑦ 进阶成分** | 布局:行布局 | 🔵8电极专属
|
||||
|
||||
| 指标名 | bodyParamKey | 单位 | 等级标签 |
|
||||
|--------|-------------|------|---------|
|
||||
| 无机盐量 | ppMineralKg | kg | ✓ |
|
||||
| 身体细胞量 | ppCellMassKg | kg | ✓ |
|
||||
| 骨骼肌质量指数 | ppSmi | kg/m² | — |
|
||||
|
||||
**⑧ 躯干/四肢脂肪** | 布局:部位网格(每格含脂肪量+脂肪率) | 🔵8电极专属
|
||||
|
||||
| 部位 | 脂肪量 bodyParamKey | 脂肪率 bodyParamKey |
|
||||
|------|-------------------|-------------------|
|
||||
| 左臂 | ppBodyFatKgLeftArm | ppBodyFatRateLeftArm |
|
||||
| 右臂 | ppBodyFatKgRightArm | ppBodyFatRateRightArm |
|
||||
| 左腿 | ppBodyFatKgLeftLeg | ppBodyFatRateLeftLeg |
|
||||
| 右腿 | ppBodyFatKgRightLeg | ppBodyFatRateRightLeg |
|
||||
| 躯干 | ppBodyFatKgTrunk | ppBodyFatRateTrunk |
|
||||
|
||||
**⑨ 躯干/四肢肌肉** | 布局:部位网格(每格含肌肉量+肌肉率) | 🔵8电极专属
|
||||
|
||||
| 部位 | 肌肉量 bodyParamKey | 肌肉率 bodyParamKey |
|
||||
|------|-------------------|-------------------|
|
||||
| 左臂 | ppMuscleKgLeftArm | ppMuscleRateLeftArm |
|
||||
| 右臂 | ppMuscleKgRightArm | ppMuscleRateRightArm |
|
||||
| 左腿 | ppMuscleKgLeftLeg | ppMuscleRateLeftLeg |
|
||||
| 右腿 | ppMuscleKgRightLeg | ppMuscleRateRightLeg |
|
||||
| 躯干 | ppMuscleKgTrunk | ppMuscleRateTrunk |
|
||||
|
||||
|
||||
**业务规则:**
|
||||
- 各项指标状态通过标准参考范围判断。体脂肪率等级结合性别和年龄动态计算
|
||||
- BMI参考范围:<18.5消瘦、18.5≤BMI<24正常、24≤BMI<28超重、≥28肥胖
|
||||
- 体脂率等级标准:
|
||||
- 男性:18-39岁(偏瘦<11%、标准11-20%、偏胖20-25%、肥胖>25%);40-59岁(偏瘦<12%、标准12-21%、偏胖21-26%、肥胖>26%);60岁以上(偏瘦<14%、标准14-23%、偏胖23-28%、肥胖>28%)
|
||||
- 女性:18-39岁(偏瘦<21%、标准21-32%、偏胖32-37%、肥胖>37%);40-59岁(偏瘦<23%、标准23-34%、偏胖34-39%、肥胖>39%);60岁以上(偏瘦<25%、标准25-36%、偏胖36-41%、肥胖>41%)
|
||||
|
||||
**交互说明:**
|
||||
- 点击返回按钮返回主页
|
||||
- 页面为纯展示,无可交互元素
|
||||
|
||||
---
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 368 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 135 KiB |
@@ -501,7 +501,6 @@
|
||||
<div class="measure-card__stat">
|
||||
<div class="measure-card__stat-label">体脂率</div>
|
||||
<div class="measure-card__stat-val">22.1<span style="font-size:11px;color:#999;">%</span></div>
|
||||
<div class="measure-card__stat-tag"><span class="tag-green" id="homeFatLevelTag">标准</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1076,34 +1075,6 @@
|
||||
showToast('已切换到「' + name + '」');
|
||||
}
|
||||
|
||||
/* ===== 体脂率等级判断 ===== */
|
||||
function getBodyFatLevel(sex, age, bf) {
|
||||
// 日本肥胖学会分龄分性别标准
|
||||
var thresholds;
|
||||
if (sex === 'male' || sex === '男') {
|
||||
if (age < 40) thresholds = { thin: 11, fit: 20, heavy: 25 };
|
||||
else if (age < 60) thresholds = { thin: 12, fit: 21, heavy: 26 };
|
||||
else thresholds = { thin: 14, fit: 23, heavy: 28 };
|
||||
} else {
|
||||
if (age < 40) thresholds = { thin: 21, fit: 32, heavy: 37 };
|
||||
else if (age < 60) thresholds = { thin: 23, fit: 34, heavy: 39 };
|
||||
else thresholds = { thin: 25, fit: 36, heavy: 41 };
|
||||
}
|
||||
if (bf < thresholds.thin) return { label: '偏瘦', cssClass: 'tag-blue' };
|
||||
if (bf <= thresholds.fit) return { label: '标准', cssClass: 'tag-green' };
|
||||
if (bf <= thresholds.heavy) return { label: '偏胖', cssClass: 'tag-orange' };
|
||||
return { label: '肥胖', cssClass: 'tag-red' };
|
||||
}
|
||||
|
||||
// 初始化首页体脂率等级标签(张建国:男,45岁,体脂率22.1%)
|
||||
(function() {
|
||||
var tag = document.getElementById('homeFatLevelTag');
|
||||
if (tag) {
|
||||
var level = getBodyFatLevel('male', 45, 22.1);
|
||||
tag.textContent = level.label;
|
||||
tag.className = level.cssClass;
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- 连接弹窗 -->
|
||||
|
||||
Reference in New Issue
Block a user