完善管道数据渲染函数；完善统计图组件的显示

src/components/olmap/HealthRiskAnalysis/HealthRiskPieChart.tsx

@@ -2,7 +2,17 @@
 
 import React, { useMemo } from "react";
 import ReactECharts from "echarts-for-react";
-import { Paper, Typography, Box, Chip, IconButton, Tooltip, Stack } from "@mui/material";
+import {
+  Paper,
+  Typography,
+  Box,
+  Chip,
+  IconButton,
+  Tooltip,
+  Stack,
+  Slide,
+  Fade,
+} from "@mui/material";
 import { ChevronLeft, ChevronRight, PieChart } from "@mui/icons-material";
 import { RAINBOW_COLORS, RISK_BREAKS, RISK_LABELS } from "./types";
 import { useHealthRisk } from "./HealthRiskContext";
@@ -29,12 +39,9 @@ const HealthRiskPieChart: React.FC = () => {
           const index = year - 4;
           if (index >= 0 && index < y.length) {
             const probability = y[index];
-            if (
+            const lowerBound = riskIdx === 0 ? -1 : RISK_BREAKS[riskIdx - 1];
-              probability >= RISK_BREAKS[riskIdx] &&
+            const upperBound = RISK_BREAKS[riskIdx];
-              probability < RISK_BREAKS[riskIdx + 1]
+            if (probability > lowerBound && probability <= upperBound) {
-            ) {
-              count++;
-            } else if (riskIdx === 9 && probability === 1.0) {
               count++;
             }
           }
@@ -145,56 +152,92 @@ const HealthRiskPieChart: React.FC = () => {
   }
 
   return (
-    <div className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-120 flex flex-col backdrop-blur-sm z-[1000] opacity-95 hover:opacity-100 transition-all duration-300">
+    <>
-      {/* 头部 */}
+      {/* 收起时的触发按钮 */}
-      <div className="flex justify-between items-center px-5 py-4 bg-[#257DD4] text-white">
+      <Fade in={!isExpanded && predictionResults.length > 0}>
-        <div className="flex items-center gap-2">
+        <Box
-          <svg
+          className="absolute top-4 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
-            className="w-5 h-5"
+          onClick={() => setIsExpanded(true)}
-            fill="none"
+          sx={{ zIndex: 1300 }}
-            stroke="currentColor"
+        >
-            viewBox="0 0 24 24"
+          <Box className="flex flex-col items-center py-3 px-3 gap-1">
-          >
+            <PieChart className="text-[#257DD4] w-5 h-5" />
-            <path
+            <Typography
-              strokeLinecap="round"
+              variant="caption"
-              strokeLinejoin="round"
+              className="text-gray-700 font-semibold my-1 text-xs"
-              strokeWidth={2}
+              style={{ writingMode: "vertical-rl" }}
-              d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
+            >
-            />
+              风险分布
-            <path
+            </Typography>
-              strokeLinecap="round"
+            <ChevronLeft className="text-gray-600 w-4 h-4" />
-              strokeLinejoin="round"
+          </Box>
-              strokeWidth={2}
+        </Box>
-              d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"
+      </Fade>
-            />
-          </svg>
-          <h3 className="text-lg font-semibold">管道健康风险分布</h3>
-          <Chip
-            size="small"
-            label={`${predictionResults.length}`}
-            sx={{
-              backgroundColor: "rgba(255,255,255,0.2)",
-              color: "white",
-              fontWeight: "bold",
-              ml: 1,
-            }}
-          />
-        </div>
-      </div>
 
-      {/* 内容区域 */}
+      <Slide direction="left" in={isExpanded} mountOnEnter unmountOnExit>
-      <div className="p-2 h-[550px]" onMouseLeave={handleMouseLeave}>
+        <div className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-[450px] flex flex-col backdrop-blur-sm z-[1000] opacity-95 hover:opacity-100 transition-all duration-300">
-        <ReactECharts
+          {/* 头部 */}
-          ref={(e) => {
+          <div className="flex justify-between items-center px-5 py-4 bg-[#257DD4] text-white">
-            chartRef.current = e;
+            <div className="flex items-center gap-2">
-          }}
+              <svg
-          option={option}
+                className="w-5 h-5"
-          onEvents={onEvents}
+                fill="none"
-          style={{ height: "100%", width: "100%" }}
+                stroke="currentColor"
-          opts={{ renderer: "canvas" }}
+                viewBox="0 0 24 24"
-        />
+              >
-      </div>
+                <path
-    </div>
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
+                />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"
+                />
+              </svg>
+              <h3 className="text-lg font-semibold">管道健康风险分布</h3>
+              <Chip
+                size="small"
+                label={`${predictionResults.length}`}
+                sx={{
+                  backgroundColor: "rgba(255,255,255,0.2)",
+                  color: "white",
+                  fontWeight: "bold",
+                  ml: 1,
+                }}
+              />
+            </div>
+            <Stack direction="row" spacing={1}>
+              <Tooltip title="收起">
+                <IconButton
+                  size="small"
+                  onClick={() => setIsExpanded(false)}
+                  sx={{ color: "white" }}
+                >
+                  <ChevronRight fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </Stack>
+          </div>
+
+          {/* 内容区域 */}
+          <div className="p-2 h-[550px]" onMouseLeave={handleMouseLeave}>
+            <ReactECharts
+              ref={(e) => {
+                chartRef.current = e;
+              }}
+              option={option}
+              onEvents={onEvents}
+              style={{ height: "100%", width: "100%" }}
+              opts={{ renderer: "canvas" }}
+            />
+          </div>
+        </div>
+      </Slide>
+    </>
   );
 };
 

src/components/olmap/HealthRiskAnalysis/Timeline.tsx

@@ -3,7 +3,6 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useNotification } from "@refinedev/core";
 import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
-import { parseColor } from "@/utils/parseColor";
 
 import {
   Box,
@@ -40,6 +39,20 @@ import {
 
 const backendUrl = config.BACKEND_URL;
 
+// 辅助函数：将日期向下取整到最近的15分钟
+const getRoundedDate = (date: Date): Date => {
+  const minutes = date.getHours() * 60 + date.getMinutes();
+  const roundedMinutes = Math.floor(minutes / 15) * 15;
+  const roundedDate = new Date(date);
+  roundedDate.setHours(
+    Math.floor(roundedMinutes / 60),
+    roundedMinutes % 60,
+    0,
+    0
+  );
+  return roundedDate;
+};
+
 interface TimelineProps {
   schemeDate?: Date;
   timeRange?: { start: Date; end: Date };
@@ -64,7 +77,7 @@ const Timeline: React.FC<TimelineProps> = ({
 
   const [selectedDateTime, setSelectedDateTime] = useState<Date>(new Date());
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
-  const [playInterval, setPlayInterval] = useState<number>(15000); // 毫秒
+  const [playInterval, setPlayInterval] = useState<number>(5000); // 毫秒
   const [isPredicting, setIsPredicting] = useState<boolean>(false);
   const [pipeLayer, setPipeLayer] = useState<WebGLVectorTileLayer | null>(null);
 
@@ -89,10 +102,9 @@ const Timeline: React.FC<TimelineProps> = ({
 
   // 播放时间间隔选项
   const intervalOptions = [
+    { value: 2000, label: "2秒" },
     { value: 5000, label: "5秒" },
     { value: 10000, label: "10秒" },
-    { value: 15000, label: "15秒" },
-    { value: 20000, label: "20秒" },
   ];
 
   // 处理时间轴滑动
@@ -139,7 +151,7 @@ const Timeline: React.FC<TimelineProps> = ({
 
   const handleStop = useCallback(() => {
     setIsPlaying(false);
-    setSelectedDateTime(new Date());
+    setSelectedDateTime(getRoundedDate(new Date()));
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
@@ -180,18 +192,7 @@ const Timeline: React.FC<TimelineProps> = ({
   // 日期时间选择处理
   const handleDateTimeChange = useCallback((newDate: Date | null) => {
     if (newDate) {
-      // 将时间向下取整到最近的15分钟
+      setSelectedDateTime(getRoundedDate(newDate));
-      const minutes = newDate.getHours() * 60 + newDate.getMinutes();
-      const roundedMinutes = Math.floor(minutes / 15) * 15;
-      const roundedDate = new Date(newDate);
-      roundedDate.setHours(
-        Math.floor(roundedMinutes / 60),
-        roundedMinutes % 60,
-        0,
-        0
-      );
-
-      setSelectedDateTime(roundedDate);
     }
   }, []);
 
@@ -218,18 +219,7 @@ const Timeline: React.FC<TimelineProps> = ({
 
   // 组件加载时设置初始时间为当前时间的最近15分钟
   useEffect(() => {
-    const now = new Date();
+    setSelectedDateTime(getRoundedDate(new Date()));
-    const minutes = now.getHours() * 60 + now.getMinutes();
-    // 向下取整到最近的15分钟刻度
-    const roundedMinutes = Math.floor(minutes / 15) * 15;
-    const roundedDate = new Date(now);
-    roundedDate.setHours(
-      Math.floor(roundedMinutes / 60),
-      roundedMinutes % 60,
-      0,
-      0
-    );
-    setSelectedDateTime(roundedDate);
 
     return () => {
       if (intervalRef.current) {
@@ -295,19 +285,11 @@ const Timeline: React.FC<TimelineProps> = ({
       if (!renderFeatures || renderFeatures.length === 0) return;
 
       const healthData = healthDataRef.current;
-      let i = 0;
       renderFeatures.forEach((renderFeature: any) => {
         const featureId = renderFeature.get("id");
         const value = healthData.get(featureId);
         if (value !== undefined) {
           renderFeature.properties_["healthRisk"] = value;
-          // 输出前10个点的信息以供调试
-          if (i < 10) {
-            console.log(
-              `瓦片加载 - 设置特征 ${featureId} 的 healthRisk 为 ${value}`
-            );
-            i++;
-          }
         }
       });
     };
@@ -337,11 +319,6 @@ const Timeline: React.FC<TimelineProps> = ({
 
     // 更新 ref 数据
     healthDataRef.current = pipeHealthData;
-    // 输出前 10 条数据以供调试
-    console.log(
-      `更新健康数据，年份: ${currentYear}`,
-      Array.from(pipeHealthData.entries()).slice(0, 10)
-    );
 
     // 更新图层数据
     updatePipeHealthData(pipeHealthData);
@@ -361,35 +338,23 @@ const Timeline: React.FC<TimelineProps> = ({
     const widthCases: any[] = [];
 
     breaks.forEach((breakValue, index) => {
-      if (index < breaks.length - 1) {
+      const colorStr = colors[index];
-        const colorIndex = Math.floor(
+      // 线宽根据健康风险调整：低生存概率（高风险）用粗线
-          (index / (breaks.length - 1)) * (colors.length - 1)
+      const width = 2 + (1 - index / (breaks.length - 1)) * 4;
-        );
-        const color = parseColor(colors[colorIndex]);
 
-        // 线宽根据健康风险调整：低生存概率（高风险）用粗线
+      colorCases.push(["<=", ["get", "healthRisk"], breakValue], colorStr);
-        const width = 2 + (1 - index / (breaks.length - 1)) * 4;
+      widthCases.push(["<=", ["get", "healthRisk"], breakValue], width);
-
-        colorCases.push(
-          ["between", ["get", "healthRisk"], breakValue, breaks[index + 1]],
-          [color.r / 255, color.g / 255, color.b / 255, 1]
-        );
-        widthCases.push(
-          ["between", ["get", "healthRisk"], breakValue, breaks[index + 1]],
-          width
-        );
-      }
     });
-
+    console.log(
+      `应用健康风险样式，年份: ${currentYear}, 分段: ${breaks.length}`
+    );
+    console.log("颜色表达式:", colorCases);
+    console.log("宽度表达式:", widthCases);
     // 应用样式到图层
     pipeLayer.setStyle({
-      "stroke-color": ["case", ...colorCases, [0.5, 0.5, 0.5, 1]],
+      "stroke-color": ["case", ...colorCases, "rgba(128, 128, 128, 1)"],
       "stroke-width": ["case", ...widthCases, 2],
     });
-
-    console.log(
-      `已应用健康风险样式，年份: ${currentYear}, 分段: ${breaks.length}`
-    );
   }, [
     pipeLayer,
     predictionResults,
@@ -466,7 +431,6 @@ const Timeline: React.FC<TimelineProps> = ({
       if (response.ok) {
         const results: PredictionResult[] = await response.json();
         setPredictionResults(results);
-        console.log("预测结果:", results[0], results[1], results.length);
         open?.({
           type: "success",
           message: `模拟预测完成，获取到 ${results.length} 条管道数据`,

src/components/olmap/HealthRiskAnalysis/types.ts

@@ -26,7 +26,7 @@ export const RAINBOW_COLORS = [
   "rgba(142, 68, 173, 0.9)", // 紫 (0.9 - 1.0) - 低风险
 ];
 
-export const RISK_BREAKS = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 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 (极高风险)",