完成时间轴前后端数据连通

2025-10-10 15:12:23 +08:00
parent 5d54ad11d4
commit fa0970bd79
13 changed files with 416 additions and 285 deletions
--- a/src/app/(main)/network-simulation/page.tsx
+++ b/src/app/(main)/network-simulation/page.tsx
@@ -74,10 +74,11 @@ export default function Home() {

  return (
    <div className="relative w-full h-full overflow-hidden">
-      <MapComponent />
-      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[800px] opacity-90 hover:opacity-100 transition-opacity duration-300">
-        <Timeline />
-      </div>
+      <MapComponent>
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[800px] opacity-90 hover:opacity-100 transition-opacity duration-300">
+          <Timeline />
+        </div>
+      </MapComponent>
      <SCADADeviceList
        devices={devices}
        onDeviceClick={handleDeviceClick}
--- a/src/app/OlMap/Controls/DrawPanel.tsx
+++ b/src/app/OlMap/Controls/DrawPanel.tsx
@@ -300,7 +300,7 @@ const DrawPanel: React.FC = () => {
  const isSaveDisabled = drawnFeatures.length === 0;

  return (
-    <div className="absolute top-20 left-4 bg-white p-1 rounded-xl shadow-lg flex flex-col opacity-85 hover:opacity-100 transition-opacity">
+    <div className="absolute top-20 left-4 bg-white p-1 rounded-xl shadow-lg flex flex-col opacity-85 hover:opacity-100 transition-opacity z-10">
      <div className="flex">
        <ToolbarButton
          icon={<BackHandOutlinedIcon />}
--- a/src/app/OlMap/Controls/PropertyPanel.tsx
+++ b/src/app/OlMap/Controls/PropertyPanel.tsx
@@ -20,7 +20,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
 }) => {
  if (!id) {
    return (
-      <div className="absolute top-0 right-0 h-auto bg-white p-6 rounded-bl-2xl shadow-lg min-w-[320px]">
+      <div className="absolute top-0 right-0 h-auto bg-white p-6 rounded-bl-2xl shadow-lg min-w-[320px] z-10">
        <h3 className="text-lg font-semibold mb-4">属性面板</h3>
        <p className="text-gray-500">请选择一个要素以查看其属性。</p>
      </div>
@@ -38,7 +38,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
  };

  return (
-    <div className="absolute top-0 right-0 h-auto bg-white p-6 rounded-bl-2xl shadow-lg min-w-[320px]">
+    <div className="absolute top-0 right-0 h-auto bg-white p-6 rounded-bl-2xl shadow-lg min-w-[320px] z-10">
      <h3 className="text-lg font-semibold mb-4">属性面板</h3>
      <div className="space-y-2">
        <div>
--- a/src/app/OlMap/Controls/ScaleLine.tsx
+++ b/src/app/OlMap/Controls/ScaleLine.tsx
@@ -36,9 +36,9 @@ const Scale: React.FC = () => {

  return (
    <div className="absolute bottom-0 right-0 flex col-auto px-2 bg-white bg-opacity-70 text-black rounded-tl shadow-md text-sm">
-      <div className="px-1">Zoom Level: {zoomLevel.toFixed(1)}</div>
+      <div className="px-1">缩放: {zoomLevel.toFixed(1)}</div>
      <div className="px-1">
-        Coordinates: {coordinates[0]}, {coordinates[1]}
+        坐标: {coordinates[0]}, {coordinates[1]}
      </div>
    </div>
  );
--- a/src/app/OlMap/Controls/StyleEditorPanel.tsx
+++ b/src/app/OlMap/Controls/StyleEditorPanel.tsx
@@ -19,11 +19,14 @@ import {

 // 导入OpenLayers样式相关模块
 import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
-import { useMap } from "../MapComponent";
+import { useData, useMap } from "../MapComponent";

 import StyleLegend, { LegendStyleConfig } from "./StyleLegend";
 import { FlatStyleLike } from "ol/style/flat";

+import { calculateClassification } from "@utils/breaks_classification";
+import { parseColor } from "@utils/parseColor";
+
 interface StyleConfig {
  property: string;
  classificationMethod: string; // 分类方法
@@ -96,6 +99,22 @@ const CLASSIFICATION_METHODS = [

 const StyleEditorPanel: React.FC = () => {
  const map = useMap();
+  const data = useData();
+  if (!data) {
+    return <div>Loading...</div>; // 或其他占位符
+  }
+  const {
+    junctionData,
+    pipeData,
+    setShowJunctionText,
+    setShowPipeText,
+    setJunctionText,
+    setPipeText,
+  } = data;
+
+  const [applyJunctionStyle, setApplyJunctionStyle] = useState(false);
+  const [applyPipeStyle, setApplyPipeStyle] = useState(false);
+
  const [renderLayers, setRenderLayers] = useState<WebGLVectorTileLayer[]>([]);
  const [selectedRenderLayer, setSelectedRenderLayer] =
    useState<WebGLVectorTileLayer>();
@@ -134,75 +153,10 @@ const StyleEditorPanel: React.FC = () => {
      breaks: [],
    }
  );
-
  // 样式状态管理 - 存储多个图层的样式状态
  const [layerStyleStates, setLayerStyleStates] = useState<LayerStyleState[]>(
    []
  );
-
-  // 通用颜色解析函数
-  const parseColor = useCallback((color: string) => {
-    // 解析 rgba 格式的颜色
-    const match = color.match(
-      /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/
-    );
-    if (match) {
-      return {
-        r: parseInt(match[1], 10),
-        g: parseInt(match[2], 10),
-        b: parseInt(match[3], 10),
-        // 如果没有 alpha 值，默认为 1
-        a: match[4] ? parseFloat(match[4]) : 1,
-      };
-    }
-    // 如果还是十六进制格式，保持原来的解析方式
-    const hex = color.replace("#", "");
-    return {
-      r: parseInt(hex.slice(0, 2), 16),
-      g: parseInt(hex.slice(2, 4), 16),
-      b: parseInt(hex.slice(4, 6), 16),
-    };
-  }, []);
-  // 获取数据分段分类结果
-  const fetchClassification = async (
-    layer_name: string,
-    prop: string,
-    n_classes: number,
-    algorithm: string
-  ) => {
-    if (!algorithm) {
-      algorithm = "pretty_breaks"; // 默认算法
-    }
-    const response = await fetch("http://localhost:8000/jenks-classification", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        layer_name: layer_name, // 图层名称
-        prop: prop, // 属性名称
-        n_classes: n_classes, // 分段数
-        algorithm: algorithm,
-        // algorithm: "pretty_breaks",
-        // algorithm: "hybrid_jenks"
-      }),
-    });
-    if (!response.ok) {
-      console.error("API 请求失败:", response.status, response.statusText);
-      return false;
-    }
-
-    const data = await response.json();
-    const breaks = data.breaks; // 从响应对象中提取 breaks 数组
-    // console.log(breaks);
-    // 验证返回的数据
-    if (!Array.isArray(breaks) || breaks.length === 0) {
-      console.error("API 返回的 breaks 不是有效数组:", breaks);
-      return false;
-    }
-
-    return breaks;
-  };
  // 颜色方案选择
  const [singlePaletteIndex, setSinglePaletteIndex] = useState(0);
  const [gradientPaletteIndex, setGradientPaletteIndex] = useState(0);
@@ -232,21 +186,45 @@ const StyleEditorPanel: React.FC = () => {
    [gradientPaletteIndex, parseColor]
  );
  // 应用分类样式
-  const applyStyle = (breaks?: number[]) => {
+  const setStyleState = (layer: any) => {
+    if (
+      layer.get("value") !== undefined &&
+      styleConfig.property !== undefined
+    ) {
+      // 更新文字标签设置
+      if (layer.get("value") === "junctions") {
+        if (setJunctionText && setShowJunctionText) {
+          setJunctionText(styleConfig.property);
+          setShowJunctionText(styleConfig.showLabels);
+          setApplyJunctionStyle(true);
+        }
+      }
+      if (layer.get("value") === "pipes") {
+        if (setPipeText && setShowPipeText) {
+          setPipeText(styleConfig.property);
+          setShowPipeText(styleConfig.showLabels);
+          setApplyPipeStyle(true);
+        }
+      }
+    }
+  };
+  const applyStyle = (layerId: string, breaks?: number[]) => {
    // 使用传入的 breaks 数据
-    if (!breaks) {
+    if (!breaks || breaks.length === 0) {
      console.warn("没有有效的 breaks 数据");
      return;
    }
-    if (!selectedRenderLayer || !styleConfig.property) return;
+    const styleConfig = layerStyleStates.find(
+      (s) => s.layerId === layerId
+    )?.styleConfig;
+    const selectedRenderLayer = renderLayers.find(
+      (l) => l.get("id") === layerId
+    );
+    if (!selectedRenderLayer || !styleConfig?.property) return;
    const layerType: string = selectedRenderLayer?.get("type");
    const source = selectedRenderLayer.getSource();
    if (!source) return;

-    if (breaks.length === 0) {
-      console.log("没有有效的 breaks 数据，无法应用样式");
-      return;
-    }
    const breaksLength = breaks.length;
    // 根据 breaks 计算每个分段的颜色，线条粗细
    const colors: string[] =
@@ -385,8 +363,45 @@ const StyleEditorPanel: React.FC = () => {
      setLayerStyleStates((prev) =>
        prev.filter((state) => state.layerId !== layerId)
      );
+      // 重置样式应用状态
+      if (layerId === "junctions") {
+        setApplyJunctionStyle(false);
+      } else if (layerId === "pipes") {
+        setApplyPipeStyle(false);
+      }
    }
  }, [selectedRenderLayer]);
+
+  useEffect(() => {
+    if (applyJunctionStyle && junctionData.length > 0) {
+      // 应用节点样式
+      const junctionStyleConfigState = layerStyleStates.find(
+        (s) => s.layerId === "junctions"
+      );
+      if (!junctionStyleConfigState) return;
+      const segments = junctionStyleConfigState?.styleConfig.segments;
+      const breaks = calculateClassification(
+        junctionData,
+        segments,
+        styleConfig.classificationMethod
+      );
+      applyStyle(junctionStyleConfigState.layerId, breaks);
+    }
+    if (applyPipeStyle && pipeData.length > 0) {
+      // 应用管道样式
+      const pipeStyleConfigState = layerStyleStates.find(
+        (s) => s.layerId === "pipes"
+      );
+      if (!pipeStyleConfigState) return;
+      const segments = pipeStyleConfigState?.styleConfig.segments;
+      const breaks = calculateClassification(
+        pipeData,
+        segments,
+        styleConfig.classificationMethod
+      );
+      applyStyle(pipeStyleConfigState.layerId, breaks);
+    }
+  }, [junctionData, pipeData, applyJunctionStyle, applyPipeStyle]);
  // 样式状态管理功能
  // 保存当前图层的样式状态
  const saveLayerStyle = useCallback(
@@ -436,8 +451,9 @@ const StyleEditorPanel: React.FC = () => {
    const updateVisibleLayers = () => {
      const layers = map.getAllLayers();
      // 筛选矢量瓦片图层
-      const webGLVectorTileLayers = layers.filter((layer) =>
-        layer.get("value")
+      const webGLVectorTileLayers = layers.filter(
+        (layer) =>
+          layer.get("value") === "junctions" || layer.get("value") === "pipes" // 暂时只处理这两个图层
      ) as WebGLVectorTileLayer[];

      setRenderLayers(webGLVectorTileLayers);
@@ -505,6 +521,7 @@ const StyleEditorPanel: React.FC = () => {
      }));
    }
  }, [styleConfig.colorType]);
+
  // 获取所有激活的图例配置
  const getActiveLegendConfigs = useCallback(() => {
    return layerStyleStates
@@ -803,7 +820,7 @@ const StyleEditorPanel: React.FC = () => {

  return (
    <>
-      <div className="absolute top-20 left-4 bg-white p-4 rounded-xl shadow-lg opacity-95 hover:opacity-100 transition-opacity w-80">
+      <div className="absolute top-20 left-4 bg-white p-4 rounded-xl shadow-lg opacity-95 hover:opacity-100 transition-opacity w-80 z-10">
        {/* 图层选择 */}
        <FormControl variant="standard" fullWidth margin="dense">
          <InputLabel>选择图层</InputLabel>
@@ -948,25 +965,8 @@ const StyleEditorPanel: React.FC = () => {
          <Button
            variant="contained"
            color="primary"
-            onClick={async () => {
-              // 获取分段数据后应用样式
-              if (
-                selectedRenderLayer &&
-                selectedRenderLayer.get("value") !== undefined &&
-                styleConfig.property !== undefined &&
-                styleConfig.segments !== undefined
-              ) {
-                const newBreaks = await fetchClassification(
-                  selectedRenderLayer?.get("value"),
-                  styleConfig.property,
-                  styleConfig.segments,
-                  styleConfig.classificationMethod
-                );
-                if (newBreaks) {
-                  applyStyle(newBreaks);
-                  // setShowLegend(true); // 应用样式后显示图例
-                }
-              }
+            onClick={() => {
+              setStyleState(selectedRenderLayer);
            }}
            disabled={!selectedRenderLayer || !styleConfig.property}
            startIcon={<ApplyIcon />}
@@ -989,7 +989,7 @@ const StyleEditorPanel: React.FC = () => {
      </div>
      {/* 显示多图层图例 */}
      {getActiveLegendConfigs().length > 0 && (
-        <div className="fixed bottom-35 right-4 flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
+        <div className=" absolute bottom-40 right-4 shadow-lg flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
          <div className="flex flex-row gap-3">
            {getActiveLegendConfigs().map((config, index) => (
              <StyleLegend key={`${config.layerId}-${index}`} {...config} />
--- a/src/app/OlMap/Controls/StyleLegend.tsx
+++ b/src/app/OlMap/Controls/StyleLegend.tsx
@@ -27,7 +27,7 @@ const StyleLegend: React.FC<LegendStyleConfig> = ({
  return (
    <Box
      key={layerId}
-      className="bg-white p-3 rounded-xl shadow-lg max-w-xs opacity-95"
+      className="bg-white p-3 rounded-xl shadow-lg max-w-xs opacity-95  transition-opacity duration-300 hover:opacity-100"
    >
      <Typography variant="subtitle2" gutterBottom>
        {layerName} - {property}
--- a/src/app/OlMap/Controls/Timeline.tsx
+++ b/src/app/OlMap/Controls/Timeline.tsx
@@ -7,7 +7,6 @@ import {
  Slider,
  Typography,
  Paper,
-  TextField,
  MenuItem,
  Select,
  FormControl,
@@ -22,26 +21,18 @@ 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 { useData } from "../MapComponent";
+import { config } from "@/config/config";

-interface TimelineProps {
-  onTimeChange?: (time: string) => void;
-  onDateChange?: (date: Date) => void;
-  onPlay?: () => void;
-  onPause?: () => void;
-  onStop?: () => void;
-  onRefresh?: () => void;
-  onFetch?: () => void;
-}
+const backendUrl = config.backendUrl;
+const Timeline: React.FC = () => {
+  const data = useData();
+  if (!data) {
+    return <div>Loading...</div>; // 或其他占位符
+  }
+  const { setJunctionDataState, setPipeDataState, junctionText, pipeText } =
+    data;

-const Timeline: React.FC<TimelineProps> = ({
-  onTimeChange,
-  onDateChange,
-  onPlay,
-  onPause,
-  onStop,
-  onRefresh,
-  onFetch,
-}) => {
  const [currentTime, setCurrentTime] = useState<number>(0); // 分钟数 (0-1439)
  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
  const [isPlaying, setIsPlaying] = useState<boolean>(false);
@@ -51,6 +42,114 @@ const Timeline: React.FC<TimelineProps> = ({

  const intervalRef = useRef<NodeJS.Timeout | null>(null);
  const timelineRef = useRef<HTMLDivElement>(null);
+  // 添加缓存引用
+  const cacheRef = useRef<
+    Map<string, { nodeRecords: any[]; linkRecords: any[] }>
+  >(new Map());
+  // 添加防抖引用
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
+
+  const fetchFrameData = async (queryTime: Date) => {
+    const query_time = queryTime.toISOString();
+    const cacheKey = query_time;
+
+    // 检查缓存
+    if (cacheRef.current.has(cacheKey)) {
+      const { nodeRecords, linkRecords } = cacheRef.current.get(cacheKey)!;
+      // 使用缓存数据更新状态
+      updateDataStates(nodeRecords, linkRecords);
+      return;
+    }
+
+    try {
+      // 定义需要查询的属性
+      const junctionProperties = junctionText;
+      const pipeProperties = pipeText;
+      if (
+        !junctionProperties ||
+        !pipeProperties ||
+        junctionProperties === "" ||
+        pipeProperties === ""
+      ) {
+        return;
+      }
+      console.log(
+        "Query Time:",
+        queryTime.toLocaleDateString() + " " + queryTime.toLocaleTimeString()
+      );
+      // 同时查询节点和管道数据
+      const [nodeResponse, linkResponse] = await Promise.all([
+        fetch(
+          `${backendUrl}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=node&property=${junctionProperties}`
+        ),
+        fetch(
+          `${backendUrl}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=link&property=${pipeProperties}`
+        ),
+      ]);
+
+      const nodeRecords = await nodeResponse.json();
+      const linkRecords = await linkResponse.json();
+
+      // 缓存数据
+      cacheRef.current.set(cacheKey, {
+        nodeRecords: nodeRecords.results,
+        linkRecords: linkRecords.results,
+      });
+
+      // 更新状态
+      updateDataStates(nodeRecords.results, linkRecords.results);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  };
+
+  // 提取更新状态的逻辑
+  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;
+      })
+    );
+  };

  // 时间刻度数组 (每5分钟一个刻度)
  const timeMarks = Array.from({ length: 288 }, (_, i) => ({
@@ -67,14 +166,22 @@ const Timeline: React.FC<TimelineProps> = ({
      .padStart(2, "0")}`;
  }

+  function currentTimeToDate(selectedDate: Date, minutes: number): Date {
+    const date = new Date(selectedDate);
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    date.setHours(hours, mins, 0, 0);
+    return date;
+  }
+
  // 播放时间间隔选项
  const intervalOptions = [
-    { value: 1000, label: "1秒" },
+    // { value: 1000, label: "1秒" },
    { value: 2000, label: "2秒" },
    { value: 5000, label: "5秒" },
    { value: 10000, label: "10秒" },
  ];
-  // 播放时间间隔选项
+  // 强制计算时间段选项
  const calculatedIntervalOptions = [
    { value: 1440, label: "1 天" },
    { value: 60, label: "1 小时" },
@@ -88,79 +195,73 @@ const Timeline: React.FC<TimelineProps> = ({
    (event: Event, newValue: number | number[]) => {
      const value = Array.isArray(newValue) ? newValue[0] : newValue;
      setSliderValue(value);
-      setCurrentTime(value);
-      onTimeChange?.(formatTime(value));
+      // 防抖设置currentTime，避免频繁触发数据获取
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      debounceRef.current = setTimeout(() => {
+        setCurrentTime(value);
+      }, 300); // 300ms 防抖延迟
    },
-    [onTimeChange]
+    []
  );

  // 播放控制
  const handlePlay = useCallback(() => {
    if (!isPlaying) {
      setIsPlaying(true);
-      onPlay?.();

      intervalRef.current = setInterval(() => {
        setCurrentTime((prev) => {
          const next = prev >= 1435 ? 0 : prev + 5; // 到达23:55后回到00:00
          setSliderValue(next);
-          onTimeChange?.(formatTime(next));
          return next;
        });
      }, playInterval);
    }
-  }, [isPlaying, playInterval, onPlay, onTimeChange]);
+  }, [isPlaying, playInterval]);

  const handlePause = useCallback(() => {
    setIsPlaying(false);
-    onPause?.();
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
-  }, [onPause]);
+  }, []);

  const handleStop = useCallback(() => {
    setIsPlaying(false);
    setCurrentTime(0);
    setSliderValue(0);
-    onStop?.();
-    onTimeChange?.(formatTime(0));
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
-  }, [onStop, onTimeChange]);
+  }, []);

  // 步进控制
  const handleStepBackward = useCallback(() => {
    setCurrentTime((prev) => {
      const next = prev <= 0 ? 1435 : prev - 5;
      setSliderValue(next);
-      onTimeChange?.(formatTime(next));
      return next;
    });
-  }, [onTimeChange]);
+  }, []);

  const handleStepForward = useCallback(() => {
    setCurrentTime((prev) => {
      const next = prev >= 1435 ? 0 : prev + 5;
      setSliderValue(next);
-      onTimeChange?.(formatTime(next));
      return next;
    });
-  }, [onTimeChange]);
+  }, []);

  // 日期选择处理
-  const handleDateChange = useCallback(
-    (newDate: Date | null) => {
-      if (newDate) {
-        setSelectedDate(newDate);
-        onDateChange?.(newDate);
-      }
-    },
-    [onDateChange]
-  );
+  const handleDateChange = useCallback((newDate: Date | null) => {
+    if (newDate) {
+      setSelectedDate(newDate);
+    }
+  }, []);

  // 播放间隔改变处理
  const handleIntervalChange = useCallback(
@@ -175,25 +276,33 @@ const Timeline: React.FC<TimelineProps> = ({
          setCurrentTime((prev) => {
            const next = prev >= 1435 ? 0 : prev + 5;
            setSliderValue(next);
-            onTimeChange?.(formatTime(next));
            return next;
          });
        }, newInterval);
      }
    },
-    [isPlaying, onTimeChange]
+    [isPlaying]
  );
  // 计算时间段改变处理
  const handleCalculatedIntervalChange = useCallback((event: any) => {
    const newInterval = event.target.value;
    setCalculatedInterval(newInterval);
  }, []);
-  // 组件卸载时清理定时器
+
+  // 添加 useEffect 来监听 currentTime 和 selectedDate 的变化，并获取数据
+  useEffect(() => {
+    fetchFrameData(currentTimeToDate(selectedDate, currentTime));
+  }, [currentTime, selectedDate]);
+
+  // 组件卸载时清理定时器和防抖
  useEffect(() => {
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
    };
  }, []);

@@ -224,7 +333,13 @@ const Timeline: React.FC<TimelineProps> = ({
            <DatePicker
              label="模拟数据日期选择"
              value={selectedDate}
-              onChange={(newValue) => handleDateChange(newValue)}
+              onChange={(newValue) =>
+                handleDateChange(
+                  newValue && "toDate" in newValue
+                    ? newValue.toDate()
+                    : (newValue as Date | null)
+                )
+              }
              enableAccessibleFieldDOMStructure={false}
              format="yyyy-MM-dd"
              sx={{ width: 180, "& .MuiInputBase-root": { height: 40 } }}
@@ -308,7 +423,7 @@ const Timeline: React.FC<TimelineProps> = ({
                  variant="outlined"
                  size="small"
                  startIcon={<Refresh />}
-                  onClick={onRefresh}
+                  // onClick={onRefresh}
                >
                  强制计算
                </Button>
--- a/src/app/OlMap/MapComponent.tsx
+++ b/src/app/OlMap/MapComponent.tsx
@@ -24,7 +24,24 @@ import { bearing } from "@turf/turf";
 import { Deck } from "@deck.gl/core";
 import { TextLayer } from "@deck.gl/layers";
 import { TripsLayer } from "@deck.gl/geo-layers";
-import { tr } from "date-fns/locale";
+
+interface MapComponentProps {
+  children?: React.ReactNode;
+}
+interface DataContextType {
+  junctionData: any[];
+  pipeData: any[];
+  setJunctionDataState: React.Dispatch<React.SetStateAction<any[]>>;
+  setPipeDataState: React.Dispatch<React.SetStateAction<any[]>>;
+  showJunctionText?: boolean; // 是否显示节点文本
+  showPipeText?: boolean; // 是否显示管道文本
+  setShowJunctionText?: React.Dispatch<React.SetStateAction<boolean>>;
+  setShowPipeText?: React.Dispatch<React.SetStateAction<boolean>>;
+  junctionText: string;
+  pipeText: string;
+  setJunctionText?: React.Dispatch<React.SetStateAction<string>>;
+  setPipeText?: React.Dispatch<React.SetStateAction<string>>;
+}

 // 创建自定义Layer类来包装deck.gl
 class DeckLayer extends Layer {
@@ -50,8 +67,9 @@ class DeckLayer extends Layer {
 }
 // 跨组件传递
 const MapContext = createContext<OlMap | undefined>(undefined);
+const DataContext = createContext<DataContextType | undefined>(undefined);
+
 const extent = config.mapExtent;
-const backendUrl = config.backendUrl;
 const mapUrl = config.mapUrl;

 // 添加防抖函数
@@ -69,16 +87,15 @@ function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
 export const useMap = () => {
  return useContext(MapContext);
 };
+export const useData = () => {
+  return useContext(DataContext);
+};

-const MapComponent: React.FC = () => {
+const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
  const mapRef = useRef<HTMLDivElement | null>(null);
  const deckRef = useRef<Deck | null>(null);

  const [map, setMap] = useState<OlMap>();
-  const [currentTime, setCurrentTime] = useState(
-    new Date("2025-09-17T00:30:00+08:00")
-  );
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
  const [junctionData, setJunctionDataState] = useState<any[]>([]);
  const [pipeData, setPipeDataState] = useState<any[]>([]);
  const junctionDataIds = useRef(new Set<string>());
@@ -86,12 +103,11 @@ const MapComponent: React.FC = () => {
  const tileJunctionDataBuffer = useRef<any[]>([]);
  const tilePipeDataBuffer = useRef<any[]>([]);

-  let showJunctionText = true; // 控制节点文本显示
-  let showPipeText = true; // 控制管道文本显示
-  let junctionText = "pressure";
-  let pipeText = "flow";
-  let animate = false; // 控制是否动画
-  const isAnimating = useRef(false); // 添加动画控制标志
+  const [showJunctionText, setShowJunctionText] = useState(false); // 控制节点文本显示
+  const [showPipeText, setShowPipeText] = useState(false); // 控制管道文本显示
+  const [junctionText, setJunctionText] = useState("");
+  const [pipeText, setPipeText] = useState("");
+  const flowAnimation = useRef(true); // 添加动画控制标志
  const [currentZoom, setCurrentZoom] = useState(12); // 当前缩放级别
  // 防抖更新函数
  const debouncedUpdateData = useRef(
@@ -134,80 +150,6 @@ const MapComponent: React.FC = () => {
    }
  };

-  const setFrameData = async (queryTime: Date) => {
-    const query_time = queryTime.toISOString();
-    console.log("Query Time:", query_time);
-    try {
-      // 定义需要查询的属性
-      const junctionProperties = junctionText;
-      const pipeProperties = pipeText;
-      // 同时查询节点和管道数据
-      const starttime = Date.now();
-      const [nodeResponse, linkResponse] = await Promise.all([
-        fetch(
-          `${backendUrl}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=node&property=${junctionProperties}`
-        ),
-        fetch(
-          `${backendUrl}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=link&property=${pipeProperties}`
-        ),
-      ]);
-
-      const nodeRecords = await nodeResponse.json();
-      const linkRecords = await linkResponse.json();
-      // 将 nodeRecords 转换为 Map 以提高查找效率
-      const nodeMap: Map<string, any> = new Map(
-        nodeRecords.results.map((r: any) => [r.ID, r])
-      );
-      // 将 linkRecords 转换为 Map 以提高查找效率
-      const linkMap: Map<string, any> = new Map(
-        linkRecords.results.map((r: any) => [r.ID, r])
-      );
-
-      // 更新junctionData
-      setJunctionDataState((prev) =>
-        prev.map((j) => {
-          const record = nodeMap.get(j.id);
-          if (record) {
-            return {
-              ...j,
-              [junctionProperties]: record.value,
-            };
-          }
-          return j;
-        })
-      );
-
-      // 更新pipeData
-      setPipeDataState((prev) =>
-        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;
-        })
-      );
-      // 属性为 flow 时启动动画
-      if (pipeProperties === "flow" && animate) {
-        isAnimating.current = true;
-      } else {
-        isAnimating.current = false;
-      }
-      const endtime = Date.now();
-      console.log("Data fetch and update time:", endtime - starttime, "ms");
-    } catch (error) {
-      console.error("Error fetching data:", error);
-    }
-  };
-
  useEffect(() => {
    if (!mapRef.current) return;
    // 添加 MVT 瓦片加载逻辑
@@ -361,8 +303,12 @@ const MapComponent: React.FC = () => {
        value: "junctions",
        type: "point",
        properties: [
-          { name: "需求量", value: "demand" },
-          { name: "海拔高度", value: "elevation" },
+          // { name: "需求量", value: "demand" },
+          // { name: "海拔高度", value: "elevation" },
+          { name: "实际需求量", value: "actualdemand" },
+          { name: "水头", value: "head" },
+          { name: "压力", value: "pressure" },
+          { name: "水质", value: "quality" },
        ],
      },
    });
@@ -378,9 +324,17 @@ const MapComponent: React.FC = () => {
        value: "pipes",
        type: "linestring",
        properties: [
-          { name: "直径", value: "diameter" },
-          { name: "粗糙度", value: "roughness" },
-          { name: "局部损失", value: "minor_loss" },
+          // { name: "直径", value: "diameter" },
+          // { name: "粗糙度", value: "roughness" },
+          // { name: "局部损失", value: "minor_loss" },
+          { name: "流量", value: "flow" },
+          { name: "摩阻系数", value: "friction" },
+          { name: "水头损失", value: "headloss" },
+          { name: "水质", value: "quality" },
+          { name: "反应速率", value: "reaction" },
+          { name: "设置值", value: "setting" },
+          { name: "状态", value: "status" },
+          { name: "流速", value: "velocity" },
        ],
      },
    });
@@ -436,7 +390,7 @@ const MapComponent: React.FC = () => {
    const newLayers = [
      new TextLayer({
        id: "junctionTextLayer",
-        zIndex: 1000,
+        zIndex: 10,
        data: showJunctionText ? junctionData : [],
        getPosition: (d: any) => d.position,
        fontFamily: "Monaco, monospace",
@@ -456,7 +410,7 @@ const MapComponent: React.FC = () => {
      }),
      new TextLayer({
        id: "pipeTextLayer",
-        zIndex: 1000,
+        zIndex: 10,
        data: showPipeText ? pipeData : [],
        getPosition: (d: any) => d.position,
        fontFamily: "Monaco, monospace",
@@ -479,7 +433,7 @@ const MapComponent: React.FC = () => {

    // 动画循环
    const animate = () => {
-      if (!deck || !isAnimating.current) return; // 添加检查，防止空数据或停止旧循环
+      if (!deck || !flowAnimation.current) return; // 添加检查，防止空数据或停止旧循环
      // 动画总时长（秒）
      if (pipeData.length === 0) {
        requestAnimationFrame(animate);
@@ -496,7 +450,7 @@ const MapComponent: React.FC = () => {
      const waterflowLayer = new TripsLayer({
        id: "waterflowLayer",
        data: pipeData,
-        getPath: (d) => (isAnimating.current ? d.path : []),
+        getPath: (d) => (flowAnimation.current ? d.path : []),
        getTimestamps: (d) => {
          return d.timestamps; // 这些应该是与 currentTime 匹配的数值
        },
@@ -522,35 +476,31 @@ const MapComponent: React.FC = () => {
      requestAnimationFrame(animate);
    };
    animate();
-  }, [isAnimating, junctionData, pipeData]);
-
-  // 启动时间更新interval
-  useEffect(() => {
-    intervalRef.current = setInterval(() => {
-      setCurrentTime((prev) => new Date(prev.getTime() + 1800 * 1000));
-    }, 10 * 1000);
-    return () => {
-      if (intervalRef.current) clearInterval(intervalRef.current);
-    };
-  }, []);
-
-  // 当currentTime改变时，获取数据
-  useEffect(() => {
-    const fetchData = async () => {
-      await setFrameData(currentTime);
-    };
-    fetchData();
-  }, [currentTime]);
+  }, [flowAnimation, junctionData, pipeData]);

  return (
    <>
-      <MapContext.Provider value={map}>
-        <div className="relative w-full h-full">
-          <div ref={mapRef} className="w-full h-full"></div>
-          <MapTools />
-        </div>
-        <canvas id="deck-canvas" />
-      </MapContext.Provider>
+      <DataContext.Provider
+        value={{
+          junctionData,
+          pipeData,
+          setJunctionDataState,
+          setPipeDataState,
+          showJunctionText,
+          showPipeText,
+          junctionText,
+          pipeText,
+        }}
+      >
+        <MapContext.Provider value={map}>
+          <div className="relative w-full h-full">
+            <div ref={mapRef} className="w-full h-full"></div>
+            <MapTools />
+            {children}
+          </div>
+          <canvas id="deck-canvas" />
+        </MapContext.Provider>
+      </DataContext.Provider>
    </>
  );
 };
--- a/src/app/OlMap/MapTools.tsx
+++ b/src/app/OlMap/MapTools.tsx
@@ -4,8 +4,9 @@ import BaseLayers from "./Controls/BaseLayers";
 import MapToolbar from "./Controls/Toolbar";
 import ScaleLine from "./Controls/ScaleLine";
 import LayerControl from "./Controls/LayerControl";
+interface MapToolsProps {}

-const MapTools = () => {
+const MapTools: React.FC<MapToolsProps> = () => {
  return (
    <>
      <Zoom />