From 28647ecb12f0dc6558c0c299d99e9a450d97fa22 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 12 十月 2024 13:50:12 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/MapPage.jsx |   43 ++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 1839aef..cf185ce 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -26,8 +26,11 @@
 import Device from "./Device";
 import Settings from "./settings";
 import * as Http from './http';
+import WebSocketClient from './websocket'
+import ConfirmButton from "../page/components/ConfirmButton";
 
 let player;
+let websocket;
 
 const Map = () => {
     const notify = useNotification();
@@ -46,7 +49,12 @@
     const [settingsVisible, setSettingsVisible] = useState(false);
 
     const [spriteSettings, setSpriteSettings] = useState(null);
-    const prevSpriteSettingsRef = React.useRef();
+    const prevSpriteSettingsRef = useRef();
+
+    const [curZone, setCurZone] = useState(() => {
+        const storedValue = localStorage.getItem('curZone');
+        return storedValue !== null ? JSON.parse(storedValue) : null;
+    });
 
     useEffect(() => {
         Tool.patchRaLayout('0px');
@@ -58,8 +66,13 @@
             Tool.setMapContainer(player.mapContainer);
             Tool.setThemeMode(themeMode);
             Http.setNotify(notify);
+            // websocket = new WebSocketClient('/ws/map/websocket');
 
             await Http.fetchMapData(0);
+            // websocket.connect();
+            // websocket.onMessage = (data) => {
+            //     Tool.updateMapStatusInRealTime(data, () => curFloorRef.current, setCurSPrite);
+            // }
 
         }
         initialize();
@@ -74,13 +87,22 @@
         handleResize();
         window.addEventListener('resize', handleResize);
 
-        notify('Welcome to Rcs', 'info');
+        notify.info('Welcome to Rcs');
 
         return () => {
+            if (websocket) {
+                websocket.onMessage = () => { }
+                websocket.close();
+            }
             player.destroy();
             window.removeEventListener('resize', handleResize);
             Tool.patchRaLayout('');
         };
+    }, [])
+
+    useEffect(() => {
+        player.setTheme(themeMode);
+        Tool.setThemeMode(themeMode);
     }, [themeMode])
 
     const switchMode = (mode) => {
@@ -94,6 +116,7 @@
         switch (mode) {
             case MapMode.OBSERVER_MODE:
                 player.hideGridLines();
+                player.hideStarryBackground();
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
                     console.log(selectedSprites);
@@ -102,6 +125,7 @@
                 break
             case MapMode.MOVABLE_MODE:
                 player.showGridLines();
+                player.hideStarryBackground();
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
                     Tool.spriteListBeMovable(selectedSprites, () => {
@@ -111,6 +135,7 @@
                 break
             case MapMode.SETTINGS_MODE:
                 player.hideGridLines();
+                player.showStarryBackground(); // 0x2f68ac
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
                     console.log(selectedSprites);
@@ -186,7 +211,7 @@
                     padding: '0 16px',
                     height: '64px',
                     flexShrink: 0, // keep height
-                    zIndex: 200
+                    zIndex: 200,
                 }}
             >
                 <TextField
@@ -231,6 +256,13 @@
 
                 {mode === MapMode.SETTINGS_MODE && (
                     <>
+                        <ConfirmButton
+                            label="page.map.action.save"
+                            variant="contained"
+                            onConfirm={() => {
+                                Http.saveMapData(curZone, mapContainer);
+                            }}
+                        />
                     </>
                 )}
 
@@ -299,6 +331,7 @@
                 onCancel={() => {
                     setInsightVisible(false);
                 }}
+                width={378}
             />
 
             <Device
@@ -313,8 +346,12 @@
             <Settings
                 open={settingsVisible}
                 onCancel={() => {
+                    setSpriteSettings(null);
                     setSettingsVisible(false);
                 }}
+                sprite={spriteSettings}
+                setSpriteSettings={setSpriteSettings}
+                width={570}
             />
 
         </Box>

--
Gitblit v1.9.1