From 66bdca2c165ed77c12c4c787346c5e930a6aa910 Mon Sep 17 00:00:00 2001
From: JIANG <huarch97@gmail.com>
Date: Mon, 20 Oct 2025 18:16:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BB=A3=E7=A0=81=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=EF=BC=9B=E4=BF=AE=E5=A4=8D=E5=B1=9E=E6=80=A7=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E6=97=A0=E6=97=B6=E9=97=B4=E8=BD=B4=E6=83=85=E5=86=B5?=
 =?UTF-8?q?=E4=B8=8B=E4=B9=9F=E8=83=BD=E6=9F=A5=E8=AF=A2=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=9B=E4=BF=AE=E5=A4=8D=E5=B7=A5=E5=85=B7=E6=A0=8F?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E9=94=99=E8=AF=AF=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(main)/network-simulation/page.tsx |  2 +-
 src/app/OlMap/Controls/Timeline.tsx        |  4 +++-
 src/app/OlMap/Controls/Toolbar.tsx         |  4 ++--
 src/app/OlMap/MapComponent.tsx             |  4 ++--
 src/components/olmap/SCADADeviceList.tsx   | 13 ++++++++++++-
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/app/(main)/network-simulation/page.tsx b/src/app/(main)/network-simulation/page.tsx
index 68309e3..c19d6e3 100644
--- a/src/app/(main)/network-simulation/page.tsx
+++ b/src/app/(main)/network-simulation/page.tsx
@@ -77,9 +77,9 @@ export default function Home() {
   return (
     <div className="relative w-full h-full overflow-hidden">
       <MapComponent>
+        <MapToolbar />
         <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 />
-          <MapToolbar />
         </div>
       </MapComponent>
       <SCADADeviceList
diff --git a/src/app/OlMap/Controls/Timeline.tsx b/src/app/OlMap/Controls/Timeline.tsx
index 5cd1f24..b0d6b83 100644
--- a/src/app/OlMap/Controls/Timeline.tsx
+++ b/src/app/OlMap/Controls/Timeline.tsx
@@ -290,7 +290,7 @@ const Timeline: React.FC = () => {
   // 添加 useEffect 来监听 currentTime 和 selectedDate 的变化，并获取数据
   useEffect(() => {
     // 首次加载时，如果 selectedDate 或 currentTime 未定义，则跳过执行，避免报错
-    if (selectedDate && currentTime !== undefined) {
+    if (selectedDate && currentTime !== undefined && currentTime !== -1) {
       // 检查至少一个属性有值
       const junctionProperties = junctionText;
       const pipeProperties = pipeText;
@@ -311,6 +311,8 @@ const Timeline: React.FC = () => {
 
   // 组件卸载时清理定时器和防抖
   useEffect(() => {
+    setCurrentTime(0); // 组件卸载时重置时间
+
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
diff --git a/src/app/OlMap/Controls/Toolbar.tsx b/src/app/OlMap/Controls/Toolbar.tsx
index 0b2e608..7353b07 100644
--- a/src/app/OlMap/Controls/Toolbar.tsx
+++ b/src/app/OlMap/Controls/Toolbar.tsx
@@ -454,8 +454,8 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
         setComputedProperties({});
       }
     };
-
-    queryComputedProperties();
+    // 仅当 currentTime 有效时查询
+    if (currentTime !== -1) queryComputedProperties();
   }, [highlightFeature, currentTime, selectedDate]);
 
   // 从要素属性中提取属性面板需要的数据
diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx
index 2a9c2d0..65ec286 100644
--- a/src/app/OlMap/MapComponent.tsx
+++ b/src/app/OlMap/MapComponent.tsx
@@ -104,7 +104,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
 
   const [map, setMap] = useState<OlMap>();
   // currentCalData 用于存储当前计算结果
-  const [currentTime, setCurrentTime] = useState<number>(0);
+  const [currentTime, setCurrentTime] = useState<number>(-1); // 默认-1表示未选择时间
   const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
   // const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 默认今天
 
@@ -632,7 +632,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           <div className="relative w-full h-full">
             <div ref={mapRef} className="w-full h-full"></div>
             <MapTools />
-            
+
             {children}
           </div>
           <canvas id="deck-canvas" />
diff --git a/src/components/olmap/SCADADeviceList.tsx b/src/components/olmap/SCADADeviceList.tsx
index d98c253..460747a 100644
--- a/src/components/olmap/SCADADeviceList.tsx
+++ b/src/components/olmap/SCADADeviceList.tsx
@@ -67,6 +67,9 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
   const [selectedStatus, setSelectedStatus] = useState<string>("all");
   const [isExpanded, setIsExpanded] = useState<boolean>(true);
   const [internalSelection, setInternalSelection] = useState<string[]>([]);
+  const [pendingSelection, setPendingSelection] = useState<string[] | null>(
+    null
+  );
 
   const activeSelection = selectedDeviceIds ?? internalSelection;
 
@@ -76,6 +79,14 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
     }
   }, [selectedDeviceIds]);
 
+  // 添加 useEffect 来延迟调用 onSelectionChange，避免在渲染时触发父组件的 setState
+  useEffect(() => {
+    if (pendingSelection !== null) {
+      onSelectionChange?.(pendingSelection);
+      setPendingSelection(null);
+    }
+  }, [pendingSelection, onSelectionChange]);
+
   // 获取设备类型列表
   const deviceTypes = useMemo(() => {
     const types = Array.from(new Set(devices.map((device) => device.type)));
@@ -154,7 +165,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
         ? []
         : [device.id];
 
-      onSelectionChange?.(nextSelection);
+      setPendingSelection(nextSelection); // 设置待处理的 selection，延迟调用
       return nextSelection;
     });
   };