diff --git a/employee-app/health-monitor/doc/CHANGELOG.md b/employee-app/health-monitor/doc/CHANGELOG.md index a8680bb..44ea667 100644 --- a/employee-app/health-monitor/doc/CHANGELOG.md +++ b/employee-app/health-monitor/doc/CHANGELOG.md @@ -4,18 +4,18 @@ --- -## [2026-06-04] feat: 设备详情页变化趋势改造为折线图+新增空气质量指数 +## [2026-06-04] feat: 设备详情页变化趋势改造+新增空气质量指数 **涉及文件（1个修改）：** -- `environment/device-detail.html` — 变化趋势图表从柱状图改为 SVG 折线图，下拉框新增"空气质量指数"选项并默认选中 +- `environment/device-detail.html` — 变化趋势图表全面重构，参考 web-admin 端 indoor-data-analysis.html 样式 **变更说明：** -- 变化趋势图表从柱状图改为 SVG 折线图，参考 web-admin 端 indoor-data-analysis.html 样式 -- 折线图支持渐变面积填充、数据点交互提示（Tooltip） - 下拉选择框新增"空气质量指数"虚拟指标，并设为默认选中项 -- 所有原有指标（温度、湿度、PM2.5 等）均改为折线图方式展示 -- 支持近24小时（12个数据点）和近7日（7个数据点）两种时间维度 -- 各指标拥有独立的数值范围配置，确保折线图 Y 轴比例合理 +- **空气质量指数 - 近24小时**：SVG 折线图 + 渐变面积填充 + AQI 等级背景区域（清洁/未污染/轻污染/中污染/重污染）+ 数据点颜色随 AQI 等级动态变化 + 超标限制虚线 +- **空气质量指数 - 近7日/近30日**：柱状堆积图，每根柱子按5个AQI等级分段堆积，Y 轴为 0-24 小时分布，底部带图例 +- **其他指标**：统一改为 SVG 折线图，支持上下限超标限制区域和虚线 +- **交互提示**：折线图 hover 数据点显示日期+数值+彩色圆点；柱状图 hover 显示日期+各等级占比百分比 +- 各指标拥有独立的数值范围配置，确保 Y 轴比例合理 --- diff --git a/employee-app/health-monitor/environment/device-detail.html b/employee-app/health-monitor/environment/device-detail.html index b6956e9..b60206b 100644 --- a/employee-app/health-monitor/environment/device-detail.html +++ b/employee-app/health-monitor/environment/device-detail.html @@ -44,20 +44,26 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .time-tabs { display: flex; gap: 0; background: #f0f2f5; border-radius: 20px; padding: 3px; margin-bottom: 16px; width: fit-content; } .time-tab { padding: 4px 14px; border-radius: 16px; font-size: 12px; color: #999; cursor: pointer; transition: all 0.2s; font-weight: 500; } .time-tab.active { background: #1aad8d; color: #fff; font-weight: 600; } -/* 折线图样式 */ +/* 折线图/柱状图样式 */ .line-chart-outer { position: relative; width: 100%; } .line-chart-outer svg { width: 100%; height: auto; } .chart-grid-line { stroke: #f0f0f0; stroke-width: 1; } .chart-axis-label { fill: #bbb; font-size: 9px; } .chart-line { fill: none; stroke: #1aad8d; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart-area-fill { fill: url(#trendAreaGrad); } -.chart-dot { fill: #1aad8d; stroke: #fff; stroke-width: 1.5; } +.chart-dot { stroke: #fff; stroke-width: 1.5; } .chart-x-axis { stroke: #e8e8e8; stroke-width: 1; } +.chart-limit-line { stroke: #ff4d4f; stroke-width: 1.5; stroke-dasharray: 6,3; opacity: .7; } +.chart-limit-exceed { fill: #ff4d4f; opacity: .08; } +.chart-limit-label { fill: #ff4d4f; font-size: 9px; font-weight: 500; } /* 数据点 Tip 弹窗 */ -.chart-tooltip { display: none; position: fixed; background: #fff; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 8px 12px; z-index: 400; pointer-events: none; font-size: 12px; min-width: 100px; } +.chart-tooltip { display: none; position: fixed; background: #fff; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 8px 12px; z-index: 400; pointer-events: none; font-size: 12px; min-width: 120px; } .chart-tooltip.show { display: block; } -.chart-tooltip__label { color: #999; font-size: 11px; } -.chart-tooltip__val { font-size: 14px; color: #1a1a1a; font-weight: 700; } +.chart-tooltip__date { font-size: 10px; color: #999; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid #f0f0f0; } +.chart-tooltip__row { display: flex; align-items: center; gap: 4px; padding: 2px 0; } +.chart-tooltip__dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } +.chart-tooltip__label { color: #999; font-size: 11px; flex: 1; } +.chart-tooltip__val { font-size: 13px; color: #1a1a1a; font-weight: 700; } .bottom-btn-wrap { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 20px 28px; background: linear-gradient(transparent, #f5f7fa 35%); } .alarm-btn { width: 100%; height: 48px; background: linear-gradient(90deg, #1aad8d, #36cfc9); border: none; border-radius: 24px; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(26,173,141,0.35); } @@ -235,127 +241,298 @@ const ALL_DATA = { } }; -// 趋势模拟数据生成 -function genTrend(metricName, baseVal, period) { - // 根据指标生成不同的基础值范围 +/* AQI 等级配置 */ +var aqiLevels = [ + {name:'清洁', color:'#13C2C2', range:[0,20]}, + {name:'未污染', color:'#52C41A', range:[21,50]}, + {name:'轻污染', color:'#FAAD14', range:[51,100]}, + {name:'中污染', color:'#FA541C', range:[101,150]}, + {name:'重污染', color:'#FF4D4F', range:[151,200]} +]; + +/* 获取 AQI 颜色 */ +function getAqiColor(val) { + if (val >= 151) return '#FF4D4F'; + if (val >= 101) return '#FA541C'; + if (val >= 51) return '#FAAD14'; + if (val >= 21) return '#52C41A'; + return '#13C2C2'; +} + +/* 根据数值映射到 SVG Y 坐标 */ +function valToY(val, yMax) { + return chartBottom - (val / yMax) * chartHeight; +} + +/* 图表常量（供 renderTrend 内部使用） */ +var chartLeft = 36, chartRight = 330, chartWidth = chartRight - chartLeft; +var chartTop = 15, chartBottom = 140, chartHeight = chartBottom - chartTop; +var chartLine = '#1aad8d'; + +/* 趋势数据模拟 */ +function genTrend(metricName, period) { + // 各指标的模拟数据 var configs = { - '空气质量指数': { range: [30, 120], unit: '' }, - '温度': { range: [18, 35], unit: '℃' }, - '湿度': { range: [30, 80], unit: '%' }, - 'CO₂': { range: [350, 1100], unit: 'ppm' }, - '甲醛': { range: [0.02, 0.12], unit: 'mg/m³' }, - 'PM2.5': { range: [20, 150], unit: 'μg/m³' }, - 'PM10': { range: [40, 200], unit: 'μg/m³' }, - '太阳辐射': { range: [200, 950], unit: 'W/m²' }, - '照度': { range: [20000, 95000], unit: 'lm/m²' }, - '风速': { range: [1, 8], unit: 'm/s' }, - '榆属': { range: [5, 200], unit: '粒/千mm²' }, - '松属': { range: [5, 150], unit: '粒/千mm²' }, - '杨属': { range: [8, 280], unit: '粒/千mm²' }, - '柏科': { range: [3, 110], unit: '粒/千mm²' }, - '柳属': { range: [5, 170], unit: '粒/千mm²' }, - '蒿属': { range: [2, 90], unit: '粒/千mm²' }, - '藜科': { range: [2, 55], unit: '粒/千mm²' }, - '苋科': { range: [1, 38], unit: '粒/千mm²' }, - '花粉总数': { range: [50, 1100], unit: '粒/千mm²' }, - '电导率': { range: [200, 1700], unit: 'μS/cm' }, - 'PH': { range: [6.0, 9.5], unit: '' }, - '盐度': { range: [100, 950], unit: 'mg/L' }, - '电阻率': { range: [400, 3200], unit: 'Ω·m' }, - 'TDS': { range: [100, 850], unit: 'mg/L' }, + '空气质量指数': { + isAQI: true, yMax: 200, yTicks: [200,150,100,50,0], + limitUpper: null, limitLower: null, + levelBands: [ + {yMin:15,yMax:55,label:'清洁',color:'#13C2C2',opacity:.1}, + {yMin:55,yMax:105,label:'未污染',color:'#52C41A',opacity:.1}, + {yMin:105,yMax:135,label:'轻污染',color:'#FAAD14',opacity:.1}, + {yMin:135,yMax:165,label:'中污染',color:'#FA541C',opacity:.1}, + {yMin:165,yMax:chartBottom,label:'重污染',color:'#FF4D4F',opacity:.1} + ], + '24h': {points:[55,42,35,48,65,78,82,75,62,58,52,48]}, + '7d': {barData:[ + {clean:6,good:8,light:6,moderate:4,heavy:0}, + {clean:8,good:7,light:5,moderate:4,heavy:0}, + {clean:4,good:6,light:8,moderate:5,heavy:1}, + {clean:2,good:5,light:7,moderate:8,heavy:2}, + {clean:7,good:8,light:5,moderate:4,heavy:0}, + {clean:9,good:7,light:4,moderate:4,heavy:0}, + {clean:6,good:9,light:5,moderate:4,heavy:0} + ]}, + '30d': {barData:(function(){var r=[];for(var i=0;i<30;i++){r.push({clean:Math.floor(Math.random()*8)+2,good:Math.floor(Math.random()*8)+2,light:Math.floor(Math.random()*6)+2,moderate:Math.floor(Math.random()*6)+2,heavy:Math.floor(Math.random()*3)})}return r})()} + } }; - var cfg = configs[metricName] || { range: [baseVal * 0.6, baseVal * 1.4], unit: '' }; - if (period === '24h') { - var labels = ['00:00','02:00','04:00','06:00','08:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00']; - var vals = labels.map(function() { - var v = cfg.range[0] + Math.random() * (cfg.range[1] - cfg.range[0]); - return Math.round(v * 100) / 100; - }); - return { labels: labels, vals: vals, unit: cfg.unit }; - } else if (period === '7d') { - var now = new Date(2026, 5, 4); // June 4, 2026 - var labels7 = []; - var vals7 = []; - for (var i = 6; i >= 0; i--) { - var d = new Date(now); - d.setDate(d.getDate() - i); - labels7.push((d.getMonth()+1) + '/' + d.getDate()); - var v = cfg.range[0] + Math.random() * (cfg.range[1] - cfg.range[0]); - vals7.push(Math.round(v * 100) / 100); + // 普通指标 + var ranges = { + '温度':{range:[18,35],unit:'℃',limitUpper:28,limitLower:16},'湿度':{range:[30,80],unit:'%',limitUpper:70,limitLower:30}, + 'CO₂':{range:[350,1100],unit:'ppm',limitUpper:1000,limitLower:350},'甲醛':{range:[0.02,0.12],unit:'mg/m³',limitUpper:0.1,limitLower:0.02}, + 'PM2.5':{range:[20,150],unit:'μg/m³',limitUpper:75,limitLower:0},'PM10':{range:[40,200],unit:'μg/m³',limitUpper:150,limitLower:0}, + '太阳辐射':{range:[200,950],unit:'W/m²'},'照度':{range:[20000,95000],unit:'lm/m²'}, + '风速':{range:[1,8],unit:'m/s'}, + '榆属':{range:[5,200],unit:'粒/千mm²'},'松属':{range:[5,150],unit:'粒/千mm²'}, + '杨属':{range:[8,280],unit:'粒/千mm²'},'柏科':{range:[3,110],unit:'粒/千mm²'}, + '柳属':{range:[5,170],unit:'粒/千mm²'},'蒿属':{range:[2,90],unit:'粒/千mm²'}, + '藜科':{range:[2,55],unit:'粒/千mm²'},'苋科':{range:[1,38],unit:'粒/千mm²'}, + '花粉总数':{range:[50,1100],unit:'粒/千mm²'}, + '电导率':{range:[200,1700],unit:'μS/cm'},'PH':{range:[6.0,9.5],unit:''}, + '盐度':{range:[100,950],unit:'mg/L'},'电阻率':{range:[400,3200],unit:'Ω·m'}, + 'TDS':{range:[100,850],unit:'mg/L'} + }; + + if (configs[metricName]) return { metricName: metricName, cfg: configs[metricName], period: period }; + + var r = ranges[metricName]; + if (!r) r = { range: [10, 100], unit: '' }; + + var genPoints = function() { + var pts = []; + for (var i = 0; i < 12; i++) { + pts.push(+(r.range[0] + Math.random() * (r.range[1] - r.range[0])).toFixed(2)); } - return { labels: labels7, vals: vals7, unit: cfg.unit }; - } else { - var labels30 = []; - var vals30 = []; - for (var i = 0; i < 4; i++) { - labels30.push('第' + (i+1) + '周'); - var v = cfg.range[0] + Math.random() * (cfg.range[1] - cfg.range[0]); - vals30.push(Math.round(v * 100) / 100); + return pts; + }; + var genPoints7 = function() { + var pts = []; + for (var i = 0; i < 7; i++) { + pts.push(+(r.range[0] + Math.random() * (r.range[1] - r.range[0])).toFixed(2)); } - return { labels: labels30, vals: vals30, unit: cfg.unit }; - } -} - -// 计算 Y 坐标 -function valToY(val, yMax, chartHeight, chartTop) { - return chartTop + chartHeight - (val / yMax) * chartHeight; -} - -// 渲染 SVG 折线图 -function renderLineChart(metricName, baseVal, period) { - var data = genTrend(metricName, baseVal, period); - var labels = data.labels; - var vals = data.vals; - var unit = data.unit; - var n = vals.length; - - // 图表尺寸 - var chartLeft = 40, chartRight = 330, chartWidth = chartRight - chartLeft; - var chartTop = 15, chartBottom = 140, chartHeight = chartBottom - chartTop; - var yMax = Math.max.apply(null, vals) * 1.2; - // 整数化 Y 轴 - yMax = Math.ceil(yMax); - - // Y 轴刻度 + return pts; + }; + var genPoints30 = function() { + var pts = []; + for (var i = 0; i < 30; i++) { + pts.push(+(r.range[0] + Math.random() * (r.range[1] - r.range[0])).toFixed(2)); + } + return pts; + }; + var maxVal = Math.max(r.range[1]); var yTicks = 5; - var gridLines = ''; - for (var i = 0; i <= yTicks; i++) { - var tickVal = (yMax / yTicks * i).toFixed(unit === 'mg/m³' || unit === 'm/s' ? 2 : 0); - var y = valToY(parseFloat(tickVal), yMax, chartHeight, chartTop); - gridLines += ''; - gridLines += '' + tickVal + ''; - } - // X 轴坐标 + return { + metricName: metricName, + isAQI: false, yMax: maxVal, yTicks: Array.from({length: yTicks+1}, function(_, i) { + var v = maxVal / yTicks * i; + return r.unit === 'mg/m³' ? +v.toFixed(2) : Math.round(v); + }), + limitUpper: r.limitUpper || null, limitLower: r.limitLower || null, + levelBands: null, + '24h': { points: genPoints() }, + '7d': { points: genPoints7() }, + '30d': { points: genPoints30() } + }; +} + +/* X 轴标签 */ +var xLabels24 = ['00:00','02:00','04:00','06:00','08:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00']; +function getXLabels7() { + var labels = [], now = new Date(2026, 5, 4); + for (var i = 6; i >= 0; i--) { + var d = new Date(now); d.setDate(d.getDate() - i); + labels.push((d.getMonth()+1) + '/' + d.getDate()); + } + return labels; +} + +/* X 坐标计算 */ +function calcXPositions(count) { + var positions = [], step = chartWidth / (count - 1); + for (var i = 0; i < count; i++) positions.push(chartLeft + step * i); + return positions; +} + +/* 渲染 AQI 柱状堆积图 */ +function renderAQIBarChart(timeData, labels) { + var barData = timeData.barData; + var barCount = barData.length; + var barGap = Math.max(2, Math.floor(chartWidth / (barCount * 6))); + var barWidth = Math.max(6, Math.floor((chartWidth - barGap * (barCount + 1)) / barCount)); var xPositions = []; - for (var i = 0; i < n; i++) { - xPositions.push(chartLeft + (chartWidth / (n - 1)) * i); + for (var i = 0; i < barCount; i++) { + xPositions.push(chartLeft + barGap + i * (barWidth + barGap) + Math.floor(barWidth / 2)); } - // X 轴标签 - 点数多时只显示部分 + // Y 轴：0-24 小时 + var yTicks24 = [24, 18, 12, 6, 0]; + var gridLines = ''; + for (var i = 0; i < yTicks24.length; i++) { + var y = chartBottom - (yTicks24[i] / 24) * chartHeight; + gridLines += ''; + gridLines += '' + yTicks24[i] + 'h'; + } + + // X 轴标签 var xLabelsHtml = ''; - var skip = n > 12 ? Math.ceil(n / 6) : 1; - for (var i = 0; i < n; i++) { - if (i % skip === 0 || i === n - 1) { + var skip = barCount > 16 ? Math.floor(barCount / 7) : 1; + for (var i = 0; i < labels.length; i++) { + if (i < xPositions.length && i % skip === 0) { xLabelsHtml += '' + labels[i] + ''; } } - // 折线 + 面积填充 + // 柱状堆积 + var barsHtml = ''; + for (var i = 0; i < barCount; i++) { + var bd = barData[i]; + var x = xPositions[i] - Math.floor(barWidth / 2); + var segments = [ + {val: bd.heavy, color:'#FF4D4F', name:'重污染'}, + {val: bd.moderate, color:'#FA541C', name:'中污染'}, + {val: bd.light, color:'#FAAD14', name:'轻污染'}, + {val: bd.good, color:'#52C41A', name:'未污染'}, + {val: bd.clean, color:'#13C2C2', name:'清洁'} + ]; + var yBase = chartBottom; + for (var j = 0; j < segments.length; j++) { + var seg = segments[j]; + if (seg.val > 0) { + var segH = (seg.val / 24) * chartHeight; + var segY = yBase - segH; + barsHtml += ''; + yBase = segY; + } + } + } + + // 图例 + var legendY = chartBottom + 22; + var legendHtml = ''; + var lx = 0; + for (var i = 0; i < aqiLevels.length; i++) { + var lv = aqiLevels[i]; + legendHtml += ''; + legendHtml += '' + lv.name + ''; + lx += 52; + } + legendHtml += ''; + + var svg = '' + + gridLines + xLabelsHtml + + '' + + barsHtml + legendHtml + ''; + + window._trendTooltipData = { key: 'aqiBar', barData: barData, labels: labels, xPositions: xPositions }; + return svg; +} + +/* 渲染趋势图主函数 */ +function renderTrend(metricName, period) { + var gen = genTrend(metricName, period); + var cfg = gen.cfg || gen; + var timeData = cfg[period]; + if (!timeData) return ''; + + // AQI 非 24h → 柱状堆积图 + if (cfg.isAQI && period !== '24h') { + var labels = period === '7d' ? getXLabels7() : Array.from({length:4}, function(_, i) { return '第' + (i+1) + '周'; }); + return renderAQIBarChart(timeData, labels); + } + + var points = timeData.points; + var n = points.length; + var labels = cfg.isAQI ? (period === '24h' ? xLabels24 : getXLabels7()) : (period === '24h' ? xLabels24 : getXLabels7()); + if (period === '30d' && n === 30) labels = (function() { var l = [], now = new Date(2026,5,4); for (var i = 29; i >= 0; i--) { var d = new Date(now); d.setDate(d.getDate() - i); l.push((d.getMonth()+1) + '/' + d.getDate()); } return l; })(); + + var xPositions = calcXPositions(n); + var yMax = cfg.yMax; + var yTicks = cfg.yTicks; + + // 网格线 + var gridLines = ''; + for (var i = 0; i < yTicks.length; i++) { + var y = valToY(yTicks[i], yMax); + gridLines += ''; + gridLines += '' + yTicks[i] + ''; + } + + // X 轴标签 + var xLabelsHtml = ''; + var skip = n > 16 ? Math.floor(n / 7) : 1; + for (var i = 0; i < labels.length; i++) { + if (i < xPositions.length && i % skip === 0) { + xLabelsHtml += '' + labels[i] + ''; + } + } + + // AQI 等级背景 + var levelBandsHtml = ''; + if (cfg.isAQI && cfg.levelBands) { + for (var i = 0; i < cfg.levelBands.length; i++) { + var b = cfg.levelBands[i]; + levelBandsHtml += ''; + levelBandsHtml += '' + b.label + ''; + } + } + + // 超标区域和虚线 + var limitHtml = ''; + if (cfg.limitUpper) { + var upperY = valToY(cfg.limitUpper, yMax); + var lowerY = valToY(cfg.limitLower, yMax); + if (upperY > chartTop) { + limitHtml += ''; + } + if (lowerY < chartBottom) { + limitHtml += ''; + } + limitHtml += ''; + limitHtml += ''; + limitHtml += '上限 ' + cfg.limitUpper + ''; + limitHtml += '下限 ' + cfg.limitLower + ''; + } + + // 折线 + 数据点 var pathD = ''; var polylinePoints = ''; var dotsHtml = ''; var dotR = n > 20 ? 2.5 : 3.5; + var unit = cfg.isAQI ? '' : (gen.unit || ''); + window._trendTooltipData = { key: 'line', points: points, labels: labels, unit: unit, isAQI: cfg.isAQI, xPositions: xPositions }; for (var i = 0; i < n; i++) { - var y = valToY(vals[i], yMax, chartHeight, chartTop); + var y = valToY(points[i], yMax); var x = xPositions[i]; pathD += (i === 0 ? 'M' : 'L') + x + ',' + y + ' '; polylinePoints += x + ',' + y + ' '; - dotsHtml += ''; } - // 面积闭合路径 pathD += 'L' + xPositions[n-1] + ',' + chartBottom + ' L' + xPositions[0] + ',' + chartBottom + ' Z'; var svg = '' + @@ -363,32 +540,65 @@ function renderLineChart(metricName, baseVal, period) { '' + '' + '' + - gridLines + - xLabelsHtml + + gridLines + xLabelsHtml + '' + - '' + + levelBandsHtml + limitHtml + + '' + '' + - dotsHtml + - ''; - - // 存储 tooltip 数据 - window._trendTooltipData = { labels: labels, vals: vals, unit: unit, xPositions: xPositions, yMax: yMax, chartHeight: chartHeight, chartTop: chartTop }; + dotsHtml + ''; return svg; } -// 显示数据点 Tip +/* 显示折线图数据点 Tip */ function showTrendTip(e, el) { var td = window._trendTooltipData; if (!td) return; var idx = parseInt(el.getAttribute('data-idx')); var dateStr = td.labels[idx] || ''; - var val = td.vals[idx]; + var val = td.points[idx]; var unit = td.unit || ''; + var color = td.isAQI ? getAqiColor(val) : chartLine; document.getElementById('tooltipDate').textContent = dateStr; document.getElementById('tooltipBody').innerHTML = - '' + val + '' + - '' + (unit ? ' ' + unit : '') + ''; + '
' + + '' + + '数值' + + '' + val + (unit ? ' ' + unit : '') + '
'; + showTooltip(el); +} + +/* 显示柱状图 Tip - 显示当天所有等级占比 */ +function showBarTip(e, el) { + var td = window._trendTooltipData; + if (!td) return; + var idx = parseInt(el.getAttribute('data-idx')); + var bd = td.barData[idx]; + if (!bd) return; + var dateStr = td.labels[idx] || ''; + document.getElementById('tooltipDate').textContent = dateStr; + var rows = ''; + var levels = [ + {name:'清洁', color:'#13C2C2', val:bd.clean}, + {name:'未污染', color:'#52C41A', val:bd.good}, + {name:'轻污染', color:'#FAAD14', val:bd.light}, + {name:'中污染', color:'#FA541C', val:bd.moderate}, + {name:'重污染', color:'#FF4D4F', val:bd.heavy} + ]; + for (var i = 0; i < levels.length; i++) { + var lv = levels[i]; + var pct = Math.round(lv.val / 24 * 100); + rows += '
' + + '' + + '' + lv.name + '' + + '' + pct + '%
'; + } + document.getElementById('tooltipBody').innerHTML = rows; + showTooltip(el); +} + +/* 统一 Tooltip 定位 */ +function showTooltip(el) { var tip = document.getElementById('chartTooltip'); tip.classList.add('show'); var rect = el.getBoundingClientRect(); @@ -398,9 +608,11 @@ function showTrendTip(e, el) { var top = rect.top - tipH - 10; if (left < 8) left = 8; if (left + tipW > window.innerWidth - 8) left = window.innerWidth - tipW - 8; + if (top < 8) top = rect.bottom + 10; tip.style.left = left + 'px'; tip.style.top = top + 'px'; } + function hideTrendTip() { document.getElementById('chartTooltip').classList.remove('show'); } @@ -444,12 +656,10 @@ function buildGauge(levelIdx, total, color) { } function renderChart(metricIdx, period) { - // metricIdx === -1 表示"空气质量指数"虚拟指标 if (metricIdx === -1) { - // 用设备各指标综合计算一个模拟 AQI 值 - return renderLineChart('空气质量指数', 55, period); + return renderTrend('空气质量指数', period); } - return renderLineChart(dev.metrics[metricIdx].k, parseFloat(dev.metrics[metricIdx].v) || 50, period); + return renderTrend(dev.metrics[metricIdx].k, period); } function render() {