From 0e6d97436f58866063736781061c22b1cc4f5e6e Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 18 十月 2024 17:11:05 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/MapPage.jsx |   66 +++++++++++++++++++++------------
 1 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 314f02b..b2a887a 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect, useMemo } from "react";
 import { useTranslate, useRefresh, useSidebarState } from "react-admin";
 import {
-    TextField,
     Select,
     MenuItem,
     Button,
@@ -48,14 +47,15 @@
     const [app, setApp] = useState(null);
     const [mapContainer, setMapContainer] = useState(null);
 
-    const [mode, setMode] = useState(MAP_MODE.OBSERVER_MODE);
+    const [mode, setMode] = useState(null);
+    const [dataFetched, setDataFetched] = useState(false);
     const [insightVisible, setInsightVisible] = useState(false);
     const [deviceVisible, setDeviceVisible] = useState(false);
     const [settingsVisible, setSettingsVisible] = useState(false);
     const [batchSelectionVisible, setBatchSelectionVisible] = useState(false);
 
-    const [spriteSettings, setSpriteSettings] = useState(null);
-    const prevSpriteSettingsRef = useRef();
+    const [curSprite, setCurSprite] = useState(null);
+    const prevCurSpriteRef = useRef();
     const [batchSprites, setBatchSprites] = useState([]);
 
     const [curZone, setCurZone] = useState(() => {
@@ -64,6 +64,7 @@
     });
 
     const handleResize = () => {
+        if (!contentRef) { return; }
         const width = contentRef.current.offsetWidth;
         const height = contentRef.current.offsetHeight;
         player.resize(width, height);
@@ -85,12 +86,14 @@
             await Http.fetchMapData();
             websocket.connect();
             websocket.onMessage = (wsMsg) => {
-                Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg));
+                Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), setCurSprite);
             }
 
             setTimeout(() => {
                 player.adaptScreen();
                 notify.info(translate('page.map.welcome'));
+                setDataFetched(true);
+                setMode(MAP_MODE.OBSERVER_MODE);
             }, 200)
         }
         initialize();
@@ -107,6 +110,7 @@
             player.destroy();
             window.removeEventListener('resize', handleResize);
             Tool.patchRaLayout('');
+            Tool.isF
         };
     }, [])
 
@@ -122,11 +126,12 @@
     const switchMode = (mode) => {
         Tool.removeSelectedEffect();
 
+        setInsightVisible(false);
         setDeviceVisible(false);
         setSettingsVisible(false);
         setBatchSelectionVisible(false);
 
-        setSpriteSettings(null);
+        setCurSprite(null);
         setBatchSprites([]);
 
         switch (mode) {
@@ -135,9 +140,12 @@
                 player.hideStarryBackground();
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
-                    setBatchSprites(selectedSprites);
+                    Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);
                 });
 
+                mapContainer.children.forEach(child => {
+                    Tool.beInsight(child, setCurSprite);
+                })
                 break
             case MAP_MODE.MOVABLE_MODE:
                 player.showGridLines();
@@ -158,11 +166,11 @@
                 // player.showStarryBackground(); // 0x2f68ac
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
-                    setBatchSprites(selectedSprites);
+                    Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);
                 });
 
                 mapContainer.children.forEach(child => {
-                    Tool.beSettings(child, setSpriteSettings);
+                    Tool.beSettings(child, setCurSprite);
                 })
                 break
             default:
@@ -187,23 +195,29 @@
         Tool.beMovable(sprite);
     };
 
-    // watch spriteSettings
-    useEffect(() => {
+    // watch curSprite
+    React.useEffect(() => {
         if (!mapContainer) {
             return;
         }
-        prevSpriteSettingsRef.current = spriteSettings;
-        if (spriteSettings && prevSpriteSettings !== spriteSettings) {
+        prevCurSpriteRef.current = curSprite;
+        if (curSprite && prevCurSprite !== curSprite) {
             Tool.removeSelectedEffect();
         }
-        if (spriteSettings) {
-            Tool.showSelectedEffect(spriteSettings)
-            setSettingsVisible(true);
+        if (curSprite) {
+            if (mode === MAP_MODE.OBSERVER_MODE) {
+                Tool.showSelectedEffect(curSprite)
+                setInsightVisible(true)
+            }
+            if (mode === MAP_MODE.SETTINGS_MODE) {
+                Tool.showSelectedEffect(curSprite)
+                setSettingsVisible(true)
+            }
         } else {
             Tool.removeSelectedEffect();
         }
-    }, [spriteSettings, mapContainer])
-    const prevSpriteSettings = prevSpriteSettingsRef.current;
+    }, [curSprite]);
+    const prevCurSprite = prevCurSpriteRef.current;
 
     // watch batchSprites
     React.useEffect(() => {
@@ -252,8 +266,10 @@
                 <MapSearch
                     mode={mode}
                     setMode={setMode}
+                    dataFetched={dataFetched}
                     curZone={curZone}
-                    setSpriteSettings={setSpriteSettings}
+                    curSprite={curSprite}
+                    setCurSprite={setCurSprite}
                 />
                 <Box sx={{ flexGrow: 1 }} />
 
@@ -323,7 +339,7 @@
                 )}
 
                 <Select
-                    value={mode}
+                    value={mode ?? ''}
                     onChange={(event) => {
                         setMode(event.target.value);
                     }}
@@ -409,9 +425,11 @@
             <Insight
                 open={insightVisible}
                 onCancel={() => {
+                    setCurSprite(null);
                     setInsightVisible(false);
                 }}
-                width={378}
+                sprite={curSprite}
+                width={570}
             />
 
             <Device
@@ -426,11 +444,11 @@
             <Settings
                 open={settingsVisible}
                 onCancel={() => {
-                    setSpriteSettings(null);
+                    setCurSprite(null);
                     setSettingsVisible(false);
                 }}
-                sprite={spriteSettings}
-                setSpriteSettings={setSpriteSettings}
+                sprite={curSprite}
+                setSpriteSettings={setCurSprite}
                 width={570}
             />
 

--
Gitblit v1.9.1