健康风险分析，右下角新增图例；图例颜色方案重新设计，高风险（红色），低风险（绿色），符合常规颜色表达；

src/app/(main)/health-risk-analysis/page.tsx

@@ -6,6 +6,12 @@ import MapToolbar from "@app/OlMap/Controls/Toolbar";
 import { HealthRiskProvider } from "@components/olmap/HealthRiskAnalysis/HealthRiskContext";
 import HealthRiskPieChart from "@components/olmap/HealthRiskAnalysis/HealthRiskPieChart";
 import PredictDataPanel from "@components/olmap/HealthRiskAnalysis/PredictDataPanel";
+import StyleLegend from "@app/OlMap/Controls/StyleLegend";
+import {
+  RAINBOW_COLORS,
+  RISK_BREAKS,
+} from "@components/olmap/HealthRiskAnalysis/types";
+import { Box } from "@mui/material";
 
 export default function Home() {
   return (
@@ -19,6 +25,17 @@ export default function Home() {
           />
           <Timeline />
           <HealthRiskPieChart />
+          <Box className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
+            <StyleLegend
+              layerName="管道"
+              layerId="health-risk"
+              property="健康风险"
+              colors={RAINBOW_COLORS}
+              type="line"
+              dimensions={Array(RAINBOW_COLORS.length).fill(2)}
+              breaks={[0, ...RISK_BREAKS]}
+            />
+          </Box>
         </MapComponent>
       </HealthRiskProvider>
     </div>

src/app/OlMap/Controls/HistoryDataPanel.tsx

@@ -112,7 +112,9 @@ const fetchFromBackend = async (
       ]);
 
       const cleanedData = transformBackendData(cleanedRes, featureIds);
-      const rawData = transformBackendData(rawRes, featureIds);
+      // 如果清洗数据有值，则不显示原始监测值
+      const rawData =
+        cleanedData.length > 0 ? [] : transformBackendData(rawRes, featureIds);
 
       return mergeTimeSeriesData(
         cleanedData,
@@ -136,7 +138,9 @@ const fetchFromBackend = async (
       ]);
 
       const cleanedData = transformBackendData(cleanedRes, featureIds);
-      const rawData = transformBackendData(rawRes, featureIds);
+      // 如果清洗数据有值，则不显示原始监测值
+      const rawData =
+        cleanedData.length > 0 ? [] : transformBackendData(rawRes, featureIds);
       const schemeSimData = transformBackendData(schemeSimRes, featureIds);
 
       // 合并三组数据
@@ -186,7 +190,9 @@ const fetchFromBackend = async (
       ]);
 
       const cleanedData = transformBackendData(cleanedRes, featureIds);
-      const rawData = transformBackendData(rawRes, featureIds);
+      // 如果清洗数据有值，则不显示原始监测值
+      const rawData =
+        cleanedData.length > 0 ? [] : transformBackendData(rawRes, featureIds);
       const simulationData = transformBackendData(simulationRes, featureIds);
 
       // 合并三组数据

src/app/OlMap/Controls/StyleEditorPanel.tsx

@@ -185,6 +185,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
   const {
     currentJunctionCalData,
     currentPipeCalData,
+    pipeData,
     junctionText,
     pipeText,
     setShowJunctionTextLayer,

src/app/OlMap/Controls/StyleLegend.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 

src/app/OlMap/MapComponent.tsx

@@ -45,14 +45,13 @@ interface DataContextType {
   currentJunctionCalData?: any[]; // 当前计算结果
   setCurrentJunctionCalData?: React.Dispatch<React.SetStateAction<any[]>>;
   currentPipeCalData?: any[]; // 当前计算结果
+  pipeData?: any[]; // 管道数据（含坐标等信息）
   setCurrentPipeCalData?: React.Dispatch<React.SetStateAction<any[]>>;
-  pipeData?: any[]; // 管道数据（含坐标）
   showJunctionText?: boolean; // 是否显示节点文本
   showPipeText?: boolean; // 是否显示管道文本
   setShowJunctionTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
   setShowPipeTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
   setShowContourLayer?: React.Dispatch<React.SetStateAction<boolean>>;
-  // flowAnimation?: React.RefObject<boolean>;
   isContourLayerAvailable?: boolean;
   setShowWaterflowLayer?: React.Dispatch<React.SetStateAction<boolean>>;
   setContourLayerAvailable?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -972,7 +971,6 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           setShowJunctionTextLayer,
           setShowPipeTextLayer,
           setShowContourLayer,
-          // flowAnimation,
           isContourLayerAvailable,
           setContourLayerAvailable,
           isWaterflowLayerAvailable,

src/components/olmap/HealthRiskAnalysis/types.ts

@@ -14,29 +14,29 @@ export interface PredictionResult {
 }
 
 export const RAINBOW_COLORS = [
-  "rgba(255, 0, 0, 0.9)", // 红 (0.0 - 0.1) - 高风险
-  "rgba(255, 127, 0, 0.9)", // 橙
-  "rgba(255, 215, 0, 0.9)", // 金黄
-  "rgba(199, 224, 0, 0.9)", // 黄绿
-  "rgba(76, 175, 80, 0.9)", // 中绿
-  "rgba(0, 158, 115, 0.9)", // 青绿
-  "rgba(0, 188, 212, 0.9)", // 青色
-  "rgba(33, 150, 243, 0.9)", // 天蓝
-  "rgba(63, 81, 181, 0.9)", // 靛青
-  "rgba(142, 68, 173, 0.9)", // 紫 (0.9 - 1.0) - 低风险
+  "rgba(211, 47, 47, 0.9)", // 深红 (0.0 - 0.1) - 极高风险
+  "rgba(244, 67, 54, 0.9)", // 红色 (0.1 - 0.2) - 高风险
+  "rgba(255, 87, 34, 0.9)", // 深橙 (0.2 - 0.3)
+  "rgba(255, 152, 0, 0.9)", // 橙色 (0.3 - 0.4)
+  "rgba(255, 193, 7, 0.9)", // 琥珀 (0.4 - 0.5)
+  "rgba(255, 235, 59, 0.9)", // 黄色 (0.5 - 0.6)
+  "rgba(205, 220, 57, 0.9)", // 柠檬 (0.6 - 0.7)
+  "rgba(139, 195, 74, 0.9)", // 浅绿 (0.7 - 0.8)
+  "rgba(76, 175, 80, 0.9)", // 绿色 (0.8 - 0.9) - 低风险
+  "rgba(46, 125, 50, 0.9)", // 深绿 (0.9 - 1.0) - 极低风险
 ];
 
 export const RISK_BREAKS = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
 
 export const RISK_LABELS = [
   "0.0 - 0.1 (极高风险)",
-  "0.1 - 0.2",
-  "0.2 - 0.3",
-  "0.3 - 0.4",
-  "0.4 - 0.5",
-  "0.5 - 0.6",
-  "0.6 - 0.7",
-  "0.7 - 0.8",
-  "0.8 - 0.9",
+  "0.1 - 0.2 (高风险)",
+  "0.2 - 0.3 (较高风险)",
+  "0.3 - 0.4 (中高风险)",
+  "0.4 - 0.5 (中等风险)",
+  "0.5 - 0.6 (中等风险)",
+  "0.6 - 0.7 (中低风险)",
+  "0.7 - 0.8 (较低风险)",
+  "0.8 - 0.9 (低风险)",
   "0.9 - 1.0 (极低风险)",
 ];