From f379b86fa145eacdf9ee6418f65f5f6e5258db34 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 16 十月 2024 09:18:08 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/MapPage.jsx |   70 ++++++++++++++++++++++++----------
 1 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 11179da..cfbd71f 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -31,7 +31,7 @@
 import WebSocketClient from './websocket'
 import ConfirmButton from "../page/components/ConfirmButton";
 import { FitScreen } from '@mui/icons-material';
-
+import MapSearch from "./header/MapSearch";
 
 let player;
 let websocket;
@@ -48,12 +48,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 [curSprite, setCurSprite] = useState(null);
+    const prevCurSpriteRef = useRef();
     const [spriteSettings, setSpriteSettings] = useState(null);
     const prevSpriteSettingsRef = useRef();
     const [batchSprites, setBatchSprites] = useState([]);
@@ -64,6 +67,7 @@
     });
 
     const handleResize = () => {
+        if (!contentRef) { return; }
         const width = contentRef.current.offsetWidth;
         const height = contentRef.current.offsetHeight;
         player.resize(width, height);
@@ -80,20 +84,21 @@
             Tool.setThemeMode(themeMode);
             Http.setNotify(notify);
             Http.setMapContainer(player.mapContainer);
-            // websocket = new WebSocketClient('/ws/map/websocket');
+            websocket = new WebSocketClient('/ws/map/websocket');
 
             await Http.fetchMapData();
+            websocket.connect();
+            websocket.onMessage = (wsMsg) => {
+                Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), () => {
+                    setDataFetched(true);
+                    setMode(MAP_MODE.OBSERVER_MODE);
+                });
+            }
 
             setTimeout(() => {
                 player.adaptScreen();
                 notify.info(translate('page.map.welcome'));
             }, 200)
-
-            // websocket.connect();
-            // websocket.onMessage = (data) => {
-            //     Tool.updateMapStatusInRealTime(data, () => curFloorRef.current, setCurSPrite);
-            // }
-
         }
         initialize();
 
@@ -140,6 +145,9 @@
                     setBatchSprites(selectedSprites);
                 });
 
+                mapContainer.children.forEach(child => {
+                    Tool.beInsight(child, setCurSprite);
+                })
                 break
             case MAP_MODE.MOVABLE_MODE:
                 player.showGridLines();
@@ -157,7 +165,7 @@
                 break
             case MAP_MODE.SETTINGS_MODE:
                 player.hideGridLines();
-                player.showStarryBackground(); // 0x2f68ac
+                // player.showStarryBackground(); // 0x2f68ac
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
                     setBatchSprites(selectedSprites);
@@ -188,6 +196,26 @@
         mapContainer.addChild(sprite);
         Tool.beMovable(sprite);
     };
+
+    // watch curSprite
+    React.useEffect(() => {
+        if (!mapContainer) {
+            return;
+        }
+        prevCurSpriteRef.current = curSprite;
+        if (curSprite && prevCurSprite !== curSprite) {
+            Tool.removeSelectedEffect();
+        }
+        if (curSprite) {
+            if (mode === MAP_MODE.OBSERVER_MODE) {
+                Tool.showSelectedEffect(curSprite)
+                setInsightVisible(true)
+            }
+        } else {
+            Tool.removeSelectedEffect();
+        }
+    }, [curSprite]);
+    const prevCurSprite = prevCurSpriteRef.current;
 
     // watch spriteSettings
     useEffect(() => {
@@ -251,15 +279,13 @@
                     boxShadow: theme.shadows[1],
                 }}
             >
-                <TextField
-                    variant="outlined"
-                    size="small"
-                    placeholder="鎼滅储..."
-                    sx={{
-                        width: '200px',
-                        backgroundColor: theme.palette.background.paper,
-                        borderRadius: 1,
-                    }}
+                <MapSearch
+                    mode={mode}
+                    setMode={setMode}
+                    dataFetched={dataFetched}
+                    curZone={curZone}
+                    setCurSprite={setCurSprite}
+                    setSpriteSettings={setSpriteSettings}
                 />
                 <Box sx={{ flexGrow: 1 }} />
 
@@ -329,7 +355,7 @@
                 )}
 
                 <Select
-                    value={mode}
+                    value={mode ?? ''}
                     onChange={(event) => {
                         setMode(event.target.value);
                     }}
@@ -415,9 +441,11 @@
             <Insight
                 open={insightVisible}
                 onCancel={() => {
+                    setCurSprite(null);
                     setInsightVisible(false);
                 }}
-                width={378}
+                sprite={curSprite}
+                width={570}
             />
 
             <Device

--
Gitblit v1.9.1