属性查询面板添加计算值；完善时间轴获取数据的缓存机制；

src/app/OlMap/Controls/Timeline.tsx

@@ -33,16 +33,25 @@ const Timeline: React.FC = () => {
     return <div>Loading...</div>; // 或其他占位符
   }
   const {
+    currentTime,
+    setCurrentTime,
+    selectedDate,
+    setSelectedDate,
     setCurrentJunctionCalData,
     setCurrentPipeCalData,
     junctionText,
     pipeText,
   } = data;
+  if (
+    setCurrentTime === undefined ||
+    currentTime === undefined ||
+    selectedDate === undefined ||
+    setSelectedDate === undefined
+  ) {
+    return <div>Loading...</div>; // 或其他占位符
+  }
   const { open, close } = useNotification();
 
-  const [currentTime, setCurrentTime] = useState<number>(0); // 分钟数 (0-1439)
-  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); // 分钟
@@ -51,62 +60,79 @@ const Timeline: React.FC = () => {
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
   // 添加缓存引用
-  const cacheRef = useRef<
-    Map<string, { nodeRecords: any[]; linkRecords: any[] }>
-  >(new Map());
+  const nodeCacheRef = useRef<Map<string, any[]>>(new Map());
+  const linkCacheRef = useRef<Map<string, any[]>>(new Map());
   // 添加防抖引用
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
 
-  const fetchFrameData = async (queryTime: Date) => {
+  const fetchFrameData = async (
+    queryTime: Date,
+    junctionProperties: string,
+    pipeProperties: string
+  ) => {
     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)!;
-      // 使用缓存数据更新状态
-      updateDataStates(nodeRecords, linkRecords);
-      return;
-    }
-
-    try {
-      // 定义需要查询的属性
-      const junctionProperties = junctionText;
-      const pipeProperties = pipeText;
-      // 如果属性未定义或为空，直接返回
-      if (junctionProperties === "" || pipeProperties === "") {
-        return;
-      }
-      console.log(
-        "Query Time:",
-        queryTime.toLocaleDateString() + " " + queryTime.toLocaleTimeString()
-      );
-      // 同时查询节点和管道数据
-      const [nodeResponse, linkResponse] = await Promise.all([
-        fetch(
+    let nodeRecords: any = { results: [] };
+    let linkRecords: any = { results: [] };
+    const requests: Promise<Response>[] = [];
+    let nodePromise: Promise<any> | null = null;
+    let linkPromise: Promise<any> | null = null;
+    // 检查node缓存
+    if (junctionProperties !== "") {
+      const nodeCacheKey = `${query_time}_${junctionProperties}`;
+      if (nodeCacheRef.current.has(nodeCacheKey)) {
+        nodeRecords = nodeCacheRef.current.get(nodeCacheKey)!;
+      } else {
+        nodePromise = 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);
+        );
+        requests.push(nodePromise);
+      }
     }
+
+    // 检查link缓存
+    if (pipeProperties !== "") {
+      const linkCacheKey = `${query_time}_${pipeProperties}`;
+      if (linkCacheRef.current.has(linkCacheKey)) {
+        linkRecords = linkCacheRef.current.get(linkCacheKey)!;
+      } else {
+        linkPromise = fetch(
+          `${backendUrl}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=link&property=${pipeProperties}`
+        );
+        requests.push(linkPromise);
+      }
+    }
+
+    console.log(
+      "Query Time:",
+      queryTime.toLocaleDateString() + " " + queryTime.toLocaleTimeString()
+    );
+    // 等待所有有效请求
+    const responses = await Promise.all(requests);
+
+    if (nodePromise) {
+      const nodeResponse = responses.shift()!;
+      if (!nodeResponse.ok)
+        throw new Error(`Node fetch failed: ${nodeResponse.status}`);
+      nodeRecords = await nodeResponse.json();
+      // 缓存数据
+      nodeCacheRef.current.set(
+        `${query_time}_${junctionProperties}`,
+        nodeRecords || []
+      );
+    }
+    if (linkPromise) {
+      const linkResponse = responses.shift()!;
+      if (!linkResponse.ok)
+        throw new Error(`Link fetch failed: ${linkResponse.status}`);
+      linkRecords = await linkResponse.json();
+      // 缓存数据
+      linkCacheRef.current.set(
+        `${query_time}_${pipeProperties}`,
+        linkRecords || []
+      );
+    }
+    // 更新状态
+    updateDataStates(nodeRecords.results || [], linkRecords.results || []);
   };
 
   // 提取更新状态的逻辑
@@ -181,10 +207,10 @@ const Timeline: React.FC = () => {
   // 播放控制
   const handlePlay = useCallback(() => {
     if (!isPlaying) {
-      if (junctionText === "" || pipeText === "") {
+      if (junctionText === "" && pipeText === "") {
         open?.({
           type: "error",
-          message: "请先设置节点和管道的属性。",
+          message: "请至少设定并应用一个图层的样式。",
         });
         return;
       }
@@ -270,8 +296,25 @@ const Timeline: React.FC = () => {
 
   // 添加 useEffect 来监听 currentTime 和 selectedDate 的变化，并获取数据
   useEffect(() => {
-    fetchFrameData(currentTimeToDate(selectedDate, currentTime));
-  }, [currentTime, selectedDate]);
+    // 首次加载时，如果 selectedDate 或 currentTime 未定义，则跳过执行，避免报错
+    if (selectedDate && currentTime !== undefined) {
+      // 检查至少一个属性有值
+      const junctionProperties = junctionText;
+      const pipeProperties = pipeText;
+      if (junctionProperties === "" && pipeProperties === "") {
+        open?.({
+          type: "error",
+          message: "请至少设定并应用一个图层的样式。",
+        });
+        return;
+      }
+      fetchFrameData(
+        currentTimeToDate(selectedDate, currentTime),
+        junctionText,
+        pipeText
+      );
+    }
+  }, [junctionText, pipeText, currentTime, selectedDate]);
 
   // 组件卸载时清理定时器和防抖
   useEffect(() => {