From 14ac9801a63353693fb7e65c07d53eb69fb39b8a Mon Sep 17 00:00:00 2001
From: liuyunqin <liuyunqin@rk-health.com>
Date: Thu, 4 Jun 2026 14:10:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A9=BA=E6=B0=94=E8=B4=A8=E9=87=8F?=
 =?UTF-8?q?=E6=8C=87=E6=95=B0=E7=AD=89=E7=BA=A7=E8=83=8C=E6=99=AF=E5=B1=82?=
 =?UTF-8?q?=E9=94=99=E4=BD=8D=E5=92=8C=E9=81=AE=E6=8C=A1=E6=A8=AA=E5=9D=90?=
 =?UTF-8?q?=E6=A0=87=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- levelBands从硬编码SVG像素坐标改为数据值(0-20/21-50/51-100/101-150/151-200)
- 渲染时通过valToY将数据值动态映射为SVG像素坐标,适配手机图表尺寸
- SVG渲染层级重排: levelBands放最底层,网格线和横坐标标签在其上,不再被遮挡
---
 .../environment/device-detail.html            | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/employee-app/health-monitor/environment/device-detail.html b/employee-app/health-monitor/environment/device-detail.html
index 484b96b..e7262c6 100644
--- a/employee-app/health-monitor/environment/device-detail.html
+++ b/employee-app/health-monitor/environment/device-detail.html
@@ -277,11 +277,11 @@ function genTrend(metricName, period) {
       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}
+        {yMin:0,yMax:20,label:'清洁',color:'#13C2C2',opacity:.1},
+        {yMin:21,yMax:50,label:'未污染',color:'#52C41A',opacity:.1},
+        {yMin:51,yMax:100,label:'轻污染',color:'#FAAD14',opacity:.1},
+        {yMin:101,yMax:150,label:'中污染',color:'#FA541C',opacity:.1},
+        {yMin:151,yMax:200,label:'重污染',color:'#FF4D4F',opacity:.1}
       ],
       '24h': {points:[55,42,35,48,65,78,82,75,62,58,52,48]},
       '7d':  {barData:[
@@ -480,6 +480,18 @@ function renderTrend(metricName, period) {
   var yMax = cfg.yMax;
   var yTicks = cfg.yTicks;
 
+  // AQI 等级背景（先渲染，作为底层）
+  var levelBandsHtml = '';
+  if (cfg.isAQI && cfg.levelBands) {
+    for (var i = 0; i < cfg.levelBands.length; i++) {
+      var b = cfg.levelBands[i];
+      var bandY1 = valToY(b.yMax, yMax); // yMin value in data → SVG y
+      var bandY2 = valToY(b.yMin, yMax); // yMax value in data → SVG y (inverted)
+      levelBandsHtml += '<rect x="' + chartLeft + '" y="' + bandY1 + '" width="' + chartWidth + '" height="' + (bandY2 - bandY1) + '" fill="' + b.color + '" opacity="' + b.opacity + '"/>';
+      levelBandsHtml += '<text x="' + (chartLeft + 6) + '" y="' + (bandY1 + (bandY2 - bandY1) / 2 + 4) + '" fill="' + b.color + '" font-size="9" font-weight="500">' + b.label + '</text>';
+    }
+  }
+
   // 网格线
   var gridLines = '';
   for (var i = 0; i < yTicks.length; i++) {
@@ -497,16 +509,6 @@ function renderTrend(metricName, period) {
     }
   }
 
-  // AQI 等级背景
-  var levelBandsHtml = '';
-  if (cfg.isAQI && cfg.levelBands) {
-    for (var i = 0; i < cfg.levelBands.length; i++) {
-      var b = cfg.levelBands[i];
-      levelBandsHtml += '<rect x="' + chartLeft + '" y="' + b.yMin + '" width="' + chartWidth + '" height="' + (b.yMax - b.yMin) + '" fill="' + b.color + '" opacity="' + b.opacity + '"/>';
-      levelBandsHtml += '<text x="' + (chartLeft + 6) + '" y="' + (b.yMin + (b.yMax - b.yMin) / 2 + 4) + '" fill="' + b.color + '" font-size="9" font-weight="500">' + b.label + '</text>';
-    }
-  }
-
   // 超标区域和虚线
   var limitHtml = '';
   if (cfg.limitUpper) {
@@ -547,9 +549,10 @@ function renderTrend(metricName, period) {
     '<stop offset="0%" stop-color="#1aad8d" stop-opacity="0.25"/>' +
     '<stop offset="100%" stop-color="#1aad8d" stop-opacity="0.02"/>' +
     '</linearGradient></defs>' +
+    levelBandsHtml +
     gridLines + xLabelsHtml +
     '<line x1="' + chartLeft + '" y1="' + chartBottom + '" x2="' + chartRight + '" y2="' + chartBottom + '" class="chart-x-axis"/>' +
-    levelBandsHtml + limitHtml +
+    limitHtml +
     '<path class="chart-area-fill" d="' + pathD + '"/>' +
     '<polyline class="chart-line" points="' + polylinePoints.trim() + '"/>' +
     dotsHtml + '</svg>';