feat: 更新体重管理报告详情页及蓝牙秤小程序页面
This commit is contained in:
liuyunqin
@@ -18,6 +18,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 头部 */
|
||||
.report-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px; padding: 20px; color: #fff; margin-bottom: 12px; position: relative; overflow: hidden; }
|
||||
.report-header--bluetooth { background: linear-gradient(135deg, #07c160, #06ad56); }
|
||||
.report-header::after { content: ''; position: absolute; top: -30px; right: -30px; 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; }
|
||||
.report-header__time { font-size: 13px; opacity: 0.8; display: flex; align-items: center; gap: 6px; }
|
||||
@@ -38,6 +39,10 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.data-section__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
|
||||
.data-section__title::before { content: ''; width: 3px; height: 16px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 2px; }
|
||||
.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-cell { padding: 12px; border-bottom: 1px solid #f5f5f5; }
|
||||
.data-cell:nth-child(odd) { border-right: 1px solid #f5f5f5; }
|
||||
.data-cell:nth-last-child(-n+2) { border-bottom: none; }
|
||||
@@ -47,6 +52,9 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.data-cell__status { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
|
||||
.data-cell__status--normal { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
|
||||
.data-cell__status--high { background: #fff2f0; color: #ff4d4f; border: 1px solid #ffccc7; }
|
||||
.data-cell__tag { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; font-weight: 500; }
|
||||
.data-row__tag { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; font-weight: 500; }
|
||||
.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-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
|
||||
.data-row:last-child { border-bottom: none; }
|
||||
.data-row__label { font-size: 14px; color: #666; }
|
||||
@@ -85,7 +93,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- 头部 -->
|
||||
<div class="report-header">
|
||||
<div class="report-header" id="reportHeader">
|
||||
<div class="report-header__top">
|
||||
<div class="report-header__time">
|
||||
<svg width="14" height="14" fill="none"><circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="1.5"/><path d="M7 4v3.5l2.5 1.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
@@ -124,167 +132,298 @@ var t = tagMap[device] || tagMap.fat;
|
||||
tagEl.textContent = t[0];
|
||||
tagEl.classList.add(t[1]);
|
||||
|
||||
/* 各设备的数据配置 */
|
||||
/* ========================================================================
|
||||
* 蓝牙秤：8电极数据
|
||||
* ======================================================================== */
|
||||
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) {
|
||||
if (item.bodyParamKey === 'ppBodyHealth') { return item.standardTitle || String(item.currentValue); }
|
||||
return formatVal(item.currentValue);
|
||||
}
|
||||
|
||||
function needsStatusTag(item) {
|
||||
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 = [
|
||||
{ id:'basic', title:'基础指标', layout:'grid', keys:['ppWeightKg','ppBMI','ppFat','ppBodyScore','ppBodyHealth'] },
|
||||
{ id:'composition', title:'身体成分', layout:'row', keys:['ppWaterPercentage','ppWaterKg','ppProteinPercentage','ppProteinKg','ppBodyfatKg','ppMuscleKg','ppMusclePercentage','ppBodySkeletalKg','ppBodySkeletal','ppBoneKg'] },
|
||||
{ id:'fat', title:'脂肪分析', layout:'row', keys:['ppVisceralFat','ppBodyFatSubCutPercentage','ppBodyFatSubCutKg'] },
|
||||
{ id:'management', title:'体态管理', layout:'row', keys:['ppBodyStandardWeightKg','ppLoseFatWeightKg','ppBodyAge','ppBodyType','ppFootLen'], keys8:['ppWHR'] },
|
||||
{ id:'control', title:'体重管控', layout:'row', keys:['ppControlWeightKg','ppFatControlKg','ppBodyMuscleControl'] },
|
||||
{ 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' }
|
||||
] }
|
||||
];
|
||||
|
||||
function renderSection(section, map, type) {
|
||||
var keys = (section.keys || []).slice();
|
||||
if (type === '8' && section.keys8) keys = keys.concat(section.keys8);
|
||||
var items = [];
|
||||
if (section.layout !== 'limb') {
|
||||
keys.forEach(function(k) { var item = map[k]; if (item) items.push(item); });
|
||||
if (items.length === 0) return '';
|
||||
}
|
||||
var badgeHtml = (type === '8' && section.badge) ? '<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>';
|
||||
if (section.id === 'basic') {
|
||||
var bmiItem = map['ppBMI'], 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], 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 renderAll(type) {
|
||||
var map = buildMap(lefuData8);
|
||||
var html = '';
|
||||
sectionConfig.forEach(function(section) {
|
||||
if (section.only8 && type !== '8') return;
|
||||
html += renderSection(section, map, type);
|
||||
});
|
||||
document.getElementById('reportContent').innerHTML = html;
|
||||
}
|
||||
|
||||
/* ========================================================================
|
||||
* 其他设备数据
|
||||
* ======================================================================== */
|
||||
var deviceData = {
|
||||
/* ========== 体重秤 ========== */
|
||||
scale: [
|
||||
{ title: '基础指标', type: 'grid', fields: [
|
||||
{ label:'身高', value:'175', unit:'cm' },
|
||||
{ label:'体重', value:'72.5', unit:'kg' },
|
||||
{ label:'BMI', value:'23.7', status:'正常' },
|
||||
{ label:'基础代谢', value:'1,680', unit:'kcal' },
|
||||
{ label:'体脂肪量', value:'15.2', unit:'kg' },
|
||||
{ label:'体脂肪率', value:'21.0', unit:'%', status:'正常' }
|
||||
], bmi: true },
|
||||
{ title: '水分与蛋白质', type: 'rows', fields: [
|
||||
{ label:'体水分量', value:'38.6', unit:'kg' },
|
||||
{ label:'体水分率', value:'53.2', unit:'%' },
|
||||
{ label:'蛋白质量', value:'8.5', unit:'kg' },
|
||||
{ label:'蛋白质率', value:'11.7', unit:'%' }
|
||||
{ title:'基础指标', type:'grid', fields:[
|
||||
{ label:'身高', value:'175', unit:'cm' }, { label:'体重', value:'72.5', unit:'kg' },
|
||||
{ label:'BMI', value:'23.7', status:'正常' }, { label:'基础代谢', value:'1,680', unit:'kcal' },
|
||||
{ label:'体脂肪量', value:'15.2', unit:'kg' }, { label:'体脂肪率', value:'21.0', unit:'%', status:'正常' }
|
||||
], bmi:true },
|
||||
{ title:'水分与蛋白质', type:'rows', fields:[
|
||||
{ label:'体水分量', value:'38.6', unit:'kg' }, { label:'体水分率', value:'53.2', unit:'%' },
|
||||
{ label:'蛋白质量', value:'8.5', unit:'kg' }, { label:'蛋白质率', value:'11.7', unit:'%' }
|
||||
]},
|
||||
{ title: '肌肉与骨骼', type: 'rows', fields: [
|
||||
{ label:'肌肉率', value:'42.6', unit:'%' },
|
||||
{ label:'肌肉量', value:'30.9', unit:'kg' },
|
||||
{ title:'肌肉与骨骼', type:'rows', fields:[
|
||||
{ label:'肌肉率', value:'42.6', unit:'%' }, { label:'肌肉量', value:'30.9', unit:'kg' },
|
||||
{ label:'体骨骼量/骨量', value:'3.1', unit:'kg' }
|
||||
]},
|
||||
{ title: '脂肪分析', type: 'rows', fields: [
|
||||
{ label:'皮下脂肪率', value:'16.8', unit:'%' },
|
||||
{ label:'内脏脂肪等级', value:'6', status:'正常' },
|
||||
{ title:'脂肪分析', type:'rows', fields:[
|
||||
{ label:'皮下脂肪率', value:'16.8', unit:'%' }, { label:'内脏脂肪等级', value:'6', status:'正常' },
|
||||
{ label:'去脂体重', value:'57.3', unit:'kg' }
|
||||
]},
|
||||
{ title: '其他', type: 'rows', fields: [
|
||||
{ label:'无机盐量/矿物质量', value:'3.52', unit:'kg' },
|
||||
{ label:'细胞内液', value:'24.1', unit:'kg' },
|
||||
{ label:'细胞外液', value:'14.5', unit:'kg' },
|
||||
{ label:'健康评分', value:'82', unit:'分' }
|
||||
{ title:'其他', type:'rows', fields:[
|
||||
{ label:'无机盐量/矿物质量', value:'3.52', unit:'kg' }, { label:'细胞内液', value:'24.1', unit:'kg' },
|
||||
{ label:'细胞外液', value:'14.5', unit:'kg' }, { label:'健康评分', value:'82', unit:'分' }
|
||||
]}
|
||||
],
|
||||
/* ========== 蓝牙秤 ========== */
|
||||
bluetooth: [
|
||||
{ title: '基础指标', type: 'grid', fields: [
|
||||
{ label:'身高', value:'175', unit:'cm' },
|
||||
{ label:'体重', value:'72.5', unit:'kg' },
|
||||
{ label:'BMI', value:'23.7', status:'正常' },
|
||||
{ label:'基础代谢', value:'1,680', unit:'kcal' },
|
||||
{ label:'体脂肪量', value:'15.2', unit:'kg' },
|
||||
{ label:'体脂肪率', value:'21.0', unit:'%', status:'正常' }
|
||||
], bmi: true },
|
||||
{ title: '水分与蛋白质', type: 'rows', fields: [
|
||||
{ label:'体水分量', value:'37.8', unit:'kg' },
|
||||
{ label:'体水分率', value:'52.1', unit:'%' },
|
||||
{ label:'蛋白质量', value:'8.2', unit:'kg' },
|
||||
{ label:'蛋白质率', value:'11.3', unit:'%' }
|
||||
]},
|
||||
{ title: '肌肉与骨骼', type: 'rows', fields: [
|
||||
{ label:'体肌肉量', value:'30.5', unit:'kg' },
|
||||
{ label:'体肌肉率', value:'42.1', unit:'%' },
|
||||
{ label:'体骨骼量', value:'3.0', unit:'kg' }
|
||||
]},
|
||||
{ title: '脂肪分析', type: 'rows', fields: [
|
||||
{ label:'皮下脂肪量', value:'12.8', unit:'kg' },
|
||||
{ label:'皮下脂肪率', value:'17.7', unit:'%' },
|
||||
{ label:'除脂肪量', value:'57.3', unit:'kg' }
|
||||
]},
|
||||
{ title: '细胞液', type: 'rows', fields: [
|
||||
{ label:'细胞外液量', value:'14.2', unit:'L' },
|
||||
{ label:'细胞外液率', value:'37.6', unit:'%' },
|
||||
{ label:'细胞内液量', value:'23.6', unit:'L' },
|
||||
{ label:'细胞内液率', value:'62.4', unit:'%' }
|
||||
]},
|
||||
{ title: '其他', type: 'rows', fields: [
|
||||
{ label:'矿物质量', value:'3.48', unit:'kg' }
|
||||
]}
|
||||
],
|
||||
/* ========== 体脂仪 ========== */
|
||||
fat: [
|
||||
{ title: '基础指标', type: 'grid', fields: [
|
||||
{ label:'身高', value:'175', unit:'cm' },
|
||||
{ label:'体重', value:'72.5', unit:'kg' },
|
||||
{ label:'BMI', value:'23.7', status:'正常' },
|
||||
{ label:'基础代谢', value:'1,680', unit:'kcal' },
|
||||
{ title:'基础指标', type:'grid', fields:[
|
||||
{ label:'身高', value:'175', unit:'cm' }, { label:'体重', value:'72.5', unit:'kg' },
|
||||
{ label:'BMI', value:'23.7', status:'正常' }, { label:'基础代谢', value:'1,680', unit:'kcal' },
|
||||
{ label:'InBody评分', value:'62', unit:'分' }
|
||||
], bmi: true },
|
||||
{ title: '体脂分析', type: 'rows', fields: [
|
||||
{ label:'体脂肪量', value:'15.2', unit:'kg' },
|
||||
{ label:'体脂肪率', value:'21.0', unit:'%', status:'正常' },
|
||||
{ label:'内脏脂肪等级', value:'6', status:'正常' },
|
||||
{ label:'肥胖度', value:'147', unit:'%' },
|
||||
], bmi:true },
|
||||
{ title:'体脂分析', type:'rows', fields:[
|
||||
{ label:'体脂肪量', value:'15.2', unit:'kg' }, { label:'体脂肪率', value:'21.0', unit:'%', status:'正常' },
|
||||
{ label:'内脏脂肪等级', value:'6', status:'正常' }, { label:'肥胖度', value:'147', unit:'%' },
|
||||
{ label:'去脂体重', value:'59.6', unit:'kg' }
|
||||
]},
|
||||
{ title: '体成分', type: 'rows', fields: [
|
||||
{ label:'体水分', value:'43.7', unit:'L' },
|
||||
{ label:'蛋白质', value:'11.8', unit:'kg' },
|
||||
{ label:'无机盐', value:'4.11', unit:'kg' },
|
||||
{ label:'骨骼肌量', value:'33.6', unit:'kg' },
|
||||
{ title:'体成分', type:'rows', fields:[
|
||||
{ label:'体水分', value:'43.7', unit:'L' }, { label:'蛋白质', value:'11.8', unit:'kg' },
|
||||
{ label:'无机盐', value:'4.11', unit:'kg' }, { label:'骨骼肌量', value:'33.6', unit:'kg' },
|
||||
{ label:'骨骼肌指数', value:'8.8', unit:'kg/m²' }
|
||||
]},
|
||||
{ title: '体重管理', type: 'rows', fields: [
|
||||
{ label:'目标体重', value:'70.2', unit:'kg' },
|
||||
{ label:'体重控制', value:'-2.3', unit:'kg' },
|
||||
{ label:'脂肪控制', value:'-3.1', unit:'kg' },
|
||||
{ label:'肌肉控制', value:'+0.8', unit:'kg' },
|
||||
{ title:'体重管理', type:'rows', fields:[
|
||||
{ label:'目标体重', value:'70.2', unit:'kg' }, { label:'体重控制', value:'-2.3', unit:'kg' },
|
||||
{ label:'脂肪控制', value:'-3.1', unit:'kg' }, { label:'肌肉控制', value:'+0.8', unit:'kg' },
|
||||
{ label:'腰臀比', value:'0.88' }
|
||||
]},
|
||||
{ title: '节段脂肪', type: 'segment', cols:['部位','测量值(kg)'],
|
||||
rows: [
|
||||
['左上肢','2.7'], ['右上肢','2.6'],
|
||||
['左下肢','4.7'], ['右下肢','4.8'],
|
||||
['躯干','17.5']
|
||||
]
|
||||
},
|
||||
{ title: '节段肌肉', type: 'segment', cols:['部位','测量值(kg)'],
|
||||
rows: [
|
||||
['左上肢','3.35'], ['右上肢','3.50'],
|
||||
['左下肢','9.11'], ['右下肢','9.40'],
|
||||
['躯干','26.9']
|
||||
]
|
||||
}
|
||||
{ title:'节段脂肪', type:'segment', cols:['部位','测量值(kg)'], rows:[
|
||||
['左上肢','2.7'], ['右上肢','2.6'], ['左下肢','4.7'], ['右下肢','4.8'], ['躯干','17.5']
|
||||
]},
|
||||
{ title:'节段肌肉', type:'segment', cols:['部位','测量值(kg)'], rows:[
|
||||
['左上肢','3.35'], ['右上肢','3.50'], ['左下肢','9.11'], ['右下肢','9.40'], ['躯干','26.9']
|
||||
]}
|
||||
]
|
||||
};
|
||||
|
||||
/* 渲染 */
|
||||
var sections = deviceData[device] || deviceData.fat;
|
||||
var html = '';
|
||||
sections.forEach(function(sec) {
|
||||
html += '<div class="data-section">';
|
||||
html += '<div class="data-section__title">' + sec.title + '</div>';
|
||||
if (sec.type === 'grid') {
|
||||
html += '<div class="data-grid">';
|
||||
sec.fields.forEach(function(f) {
|
||||
html += '<div class="data-cell"><div class="data-cell__label">' + f.label + '</div>';
|
||||
html += '<div class="data-cell__value">' + f.value;
|
||||
if (f.unit) html += '<span class="data-cell__unit">' + f.unit + '</span>';
|
||||
if (f.status) html += '<span class="data-cell__status data-cell__status--normal">' + f.status + '</span>';
|
||||
html += '</div></div>';
|
||||
});
|
||||
html += '</div>';
|
||||
if (sec.bmi) {
|
||||
html += '<div class="bmi-bar"><div class="bmi-bar__track"><div class="bmi-bar__pointer" style="left:43.5%"></div></div>';
|
||||
html += '<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>';
|
||||
/* ===== 渲染 ===== */
|
||||
if (device === 'bluetooth') {
|
||||
// 蓝牙秤：8电极绿色主题
|
||||
document.getElementById('reportHeader').classList.add('report-header--bluetooth');
|
||||
var map = buildMap(lefuData8);
|
||||
var wt = map['ppWeightKg']; var bmiItem = map['ppBMI'];
|
||||
var bmiVal = bmiItem ? parseFloat(bmiItem.currentValue) : 22;
|
||||
var bmiTag = getBMITag(bmiVal);
|
||||
document.getElementById('reportHeader').innerHTML =
|
||||
'<div class="report-header__top">' +
|
||||
'<div class="report-header__time"><svg width="14" height="14" fill="none"><circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="1.5"/><path d="M7 4v3.5l2.5 1.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 2026-07-16 08:32</div>' +
|
||||
'<span class="device-tag device-tag--bluetooth" id="headerDeviceTag">蓝牙秤</span>' +
|
||||
'</div>' +
|
||||
'<div class="report-header__main">' +
|
||||
'<div class="report-header__weight"><span class="report-header__weight-num">' + formatVal(wt.currentValue) + '</span><span class="report-header__weight-unit">kg</span></div>' +
|
||||
'<div class="report-header__tags"><span class="report-tag report-tag--normal">BMI ' + bmiTag.label + '</span><span class="report-tag report-tag--change">较上次 -0.3kg</span></div>' +
|
||||
'</div>';
|
||||
renderAll('8');
|
||||
} else {
|
||||
// 其他设备：原有渲染
|
||||
var sections = deviceData[device] || deviceData.fat;
|
||||
var html = '';
|
||||
sections.forEach(function(sec) {
|
||||
html += '<div class="data-section"><div class="data-section__title">' + sec.title + '</div>';
|
||||
if (sec.type === 'grid') {
|
||||
html += '<div class="data-grid">';
|
||||
sec.fields.forEach(function(f) {
|
||||
html += '<div class="data-cell"><div class="data-cell__label">' + f.label + '</div><div class="data-cell__value">' + f.value + (f.unit ? '<span class="data-cell__unit">' + f.unit + '</span>' : '') + (f.status ? '<span class="data-cell__status data-cell__status--normal">' + f.status + '</span>' : '') + '</div></div>';
|
||||
});
|
||||
html += '</div>';
|
||||
if (sec.bmi) {
|
||||
html += '<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>';
|
||||
}
|
||||
} else if (sec.type === 'rows') {
|
||||
sec.fields.forEach(function(f) {
|
||||
html += '<div class="data-row"><span class="data-row__label">' + f.label + '</span><div class="data-row__right"><span class="data-row__value">' + f.value + '</span>' + (f.unit ? '<span class="data-row__unit">' + f.unit + '</span>' : '') + (f.status ? '<span class="data-cell__status data-cell__status--normal">' + f.status + '</span>' : '') + '</div></div>';
|
||||
});
|
||||
} else if (sec.type === 'segment') {
|
||||
html += '<table class="seg-table"><thead><tr>';
|
||||
sec.cols.forEach(function(c) { html += '<th>' + c + '</th>'; });
|
||||
html += '</tr></thead><tbody>';
|
||||
sec.rows.forEach(function(r) { html += '<tr>'; r.forEach(function(v) { html += '<td>' + v + '</td>'; }); html += '</tr>'; });
|
||||
html += '</tbody></table>';
|
||||
}
|
||||
} else if (sec.type === 'rows') {
|
||||
sec.fields.forEach(function(f, i) {
|
||||
html += '<div class="data-row' + (i === sec.fields.length - 1 ? '' : '') + '">';
|
||||
html += '<span class="data-row__label">' + f.label + '</span>';
|
||||
html += '<div class="data-row__right"><span class="data-row__value">' + f.value + '</span>';
|
||||
if (f.unit) html += '<span class="data-row__unit">' + f.unit + '</span>';
|
||||
if (f.status) html += '<span class="data-cell__status data-cell__status--normal">' + f.status + '</span>';
|
||||
html += '</div></div>';
|
||||
});
|
||||
} else if (sec.type === 'segment') {
|
||||
html += '<table class="seg-table"><thead><tr>';
|
||||
sec.cols.forEach(function(c) { html += '<th>' + c + '</th>'; });
|
||||
html += '</tr></thead><tbody>';
|
||||
sec.rows.forEach(function(r) {
|
||||
html += '<tr>';
|
||||
r.forEach(function(v, i) { html += '<td>' + v + '</td>'; });
|
||||
html += '</tr>';
|
||||
});
|
||||
html += '</tbody></table>';
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
document.getElementById('reportContent').innerHTML = html;
|
||||
html += '</div>';
|
||||
});
|
||||
document.getElementById('reportContent').innerHTML = html;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user