完善时间轴数据更新函数；完善图层显示控制函数；修复图例样式显示异常问题；

src/app/OlMap/Controls/Timeline.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import React, { useState, useEffect, useRef, useCallback } from "react";
+import { useNotification } from "@refinedev/core";
+
 import {
   Box,
   Button,
@@ -20,21 +22,28 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { zhCN } from "date-fns/locale";
 import { PlayArrow, Pause, Stop, Refresh } from "@mui/icons-material";
-import { TbRewindBackward5, TbRewindForward5 } from "react-icons/tb";
+import { TbRewindBackward15, TbRewindForward15 } from "react-icons/tb";
 import { useData } from "../MapComponent";
 import { config } from "@/config/config";
-
+import { useMap } from "../MapComponent";
+import { set } from "ol/transform";
 const backendUrl = config.backendUrl;
 const Timeline: React.FC = () => {
   const data = useData();
   if (!data) {
     return <div>Loading...</div>; // 或其他占位符
   }
-  const { setJunctionDataState, setPipeDataState, junctionText, pipeText } =
-    data;
+  const {
+    setCurrentJunctionCalData,
+    setCurrentPipeCalData,
+    junctionText,
+    pipeText,
+  } = data;
+  const { open, close } = useNotification();
 
   const [currentTime, setCurrentTime] = useState<number>(0); // 分钟数 (0-1439)
-  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
+  // const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 默认今天
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [playInterval, setPlayInterval] = useState<number>(5000); // 毫秒
   const [calculatedInterval, setCalculatedInterval] = useState<number>(1440); // 分钟
@@ -52,7 +61,9 @@ const Timeline: React.FC = () => {
   const fetchFrameData = async (queryTime: Date) => {
     const query_time = queryTime.toISOString();
     const cacheKey = query_time;
-
+    // console.log("Fetching data for time:", query_time);
+    // console.log("Junction Property:", junctionText);
+    // console.log("Pipe Property:", pipeText);
     // 检查缓存
     if (cacheRef.current.has(cacheKey)) {
       const { nodeRecords, linkRecords } = cacheRef.current.get(cacheKey)!;
@@ -65,12 +76,8 @@ const Timeline: React.FC = () => {
       // 定义需要查询的属性
       const junctionProperties = junctionText;
       const pipeProperties = pipeText;
-      if (
-        !junctionProperties ||
-        !pipeProperties ||
-        junctionProperties === "" ||
-        pipeProperties === ""
-      ) {
+      // 如果属性未定义或为空，直接返回
+      if (junctionProperties === "" || pipeProperties === "") {
         return;
       }
       console.log(
@@ -105,50 +112,16 @@ const Timeline: React.FC = () => {
 
   // 提取更新状态的逻辑
   const updateDataStates = (nodeResults: any[], linkResults: any[]) => {
-    const junctionProperties = junctionText;
-    const pipeProperties = pipeText;
-
-    // 将 nodeRecords 转换为 Map 以提高查找效率
-    const nodeMap: Map<string, any> = new Map(
-      nodeResults.map((r: any) => [r.ID, r])
-    );
-    // 将 linkRecords 转换为 Map 以提高查找效率
-    const linkMap: Map<string, any> = new Map(
-      linkResults.map((r: any) => [r.ID, r])
-    );
-
-    // 更新junctionData
-    setJunctionDataState((prev: any[]) =>
-      prev.map((j) => {
-        const record = nodeMap.get(j.id);
-        if (record) {
-          return {
-            ...j,
-            [junctionProperties]: record.value,
-          };
-        }
-        return j;
-      })
-    );
-
-    // 更新pipeData
-    setPipeDataState((prev: any[]) =>
-      prev.map((p) => {
-        const record = linkMap.get(p.id);
-        if (record) {
-          return {
-            ...p,
-            flowFlag: pipeProperties === "flow" && record.value < 0 ? -1 : 1,
-            path:
-              pipeProperties === "flow" && record.value < 0 && p.flowFlag > 0
-                ? [...p.path].reverse()
-                : p.path,
-            [pipeProperties]: record.value,
-          };
-        }
-        return p;
-      })
-    );
+    if (setCurrentJunctionCalData) {
+      setCurrentJunctionCalData(nodeResults);
+    } else {
+      console.log("setCurrentJunctionCalData is undefined");
+    }
+    if (setCurrentPipeCalData) {
+      setCurrentPipeCalData(linkResults);
+    } else {
+      console.log("setCurrentPipeCalData is undefined");
+    }
   };
 
   // 时间刻度数组 (每5分钟一个刻度)
@@ -209,11 +182,18 @@ const Timeline: React.FC = () => {
   // 播放控制
   const handlePlay = useCallback(() => {
     if (!isPlaying) {
+      if (junctionText === "" || pipeText === "") {
+        open?.({
+          type: "error",
+          message: "请先设置节点和管道的属性。",
+        });
+        return;
+      }
       setIsPlaying(true);
 
       intervalRef.current = setInterval(() => {
         setCurrentTime((prev) => {
-          const next = prev >= 1435 ? 0 : prev + 5; // 到达23:55后回到00:00
+          const next = prev >= 1440 ? 0 : prev + 15; // 到达24:00后回到00:00
           setSliderValue(next);
           return next;
         });
@@ -242,7 +222,7 @@ const Timeline: React.FC = () => {
   // 步进控制
   const handleStepBackward = useCallback(() => {
     setCurrentTime((prev) => {
-      const next = prev <= 0 ? 1435 : prev - 5;
+      const next = prev <= 0 ? 1440 : prev - 15;
       setSliderValue(next);
       return next;
     });
@@ -250,7 +230,7 @@ const Timeline: React.FC = () => {
 
   const handleStepForward = useCallback(() => {
     setCurrentTime((prev) => {
-      const next = prev >= 1435 ? 0 : prev + 5;
+      const next = prev >= 1440 ? 0 : prev + 15;
       setSliderValue(next);
       return next;
     });
@@ -274,7 +254,7 @@ const Timeline: React.FC = () => {
         clearInterval(intervalRef.current);
         intervalRef.current = setInterval(() => {
           setCurrentTime((prev) => {
-            const next = prev >= 1435 ? 0 : prev + 5;
+            const next = prev >= 1440 ? 0 : prev + 15;
             setSliderValue(next);
             return next;
           });
@@ -305,6 +285,23 @@ const Timeline: React.FC = () => {
       }
     };
   }, []);
+  // 获取地图实例
+  const map = useMap();
+  // 这里防止地图缩放时，瓦片重新加载引起的属性更新出错
+  useEffect(() => {
+    // 监听地图缩放事件，缩放时停止播放
+    if (map) {
+      const onZoom = () => {
+        handlePause();
+      };
+      map.getView().on("change:resolution", onZoom);
+
+      // 清理事件监听
+      return () => {
+        map.getView().un("change:resolution", onZoom);
+      };
+    }
+  }, [map, handlePause]);
 
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={zhCN}>
@@ -370,7 +367,7 @@ const Timeline: React.FC = () => {
                   onClick={handleStepBackward}
                   size="small"
                 >
-                  <TbRewindBackward5 />
+                  <TbRewindBackward15 />
                 </IconButton>
               </Tooltip>
 
@@ -390,7 +387,7 @@ const Timeline: React.FC = () => {
                   onClick={handleStepForward}
                   size="small"
                 >
-                  <TbRewindForward5 />
+                  <TbRewindForward15 />
                 </IconButton>
               </Tooltip>
 
@@ -448,8 +445,8 @@ const Timeline: React.FC = () => {
             <Slider
               value={sliderValue}
               min={0}
-              max={1435} // 23:55 = 1435分钟
-              step={5}
+              max={1440} // 24:00 = 1440分钟
+              step={15} // 每15分钟一个步进
               marks={timeMarks.filter((_, index) => index % 12 === 0)} // 每小时显示一个标记
               onChange={handleSliderChange}
               valueLabelDisplay="auto"