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 |   60 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 5ed4622..cf185ce 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -22,10 +22,15 @@
 import Player from './player';
 import * as Tool from './tool';
 import { NotificationProvider, useNotification } from './Notification';
+import Insight from "./insight";
 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();
@@ -39,11 +44,17 @@
     const [mapContainer, setMapContainer] = useState(null);
 
     const [mode, setMode] = useState(MapMode.OBSERVER_MODE);
+    const [insightVisible, setInsightVisible] = useState(false);
     const [deviceVisible, setDeviceVisible] = useState(false);
     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');
@@ -55,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();
@@ -71,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) => {
@@ -91,6 +116,7 @@
         switch (mode) {
             case MapMode.OBSERVER_MODE:
                 player.hideGridLines();
+                player.hideStarryBackground();
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
                     console.log(selectedSprites);
@@ -99,6 +125,7 @@
                 break
             case MapMode.MOVABLE_MODE:
                 player.showGridLines();
+                player.hideStarryBackground();
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
                     Tool.spriteListBeMovable(selectedSprites, () => {
@@ -108,6 +135,7 @@
                 break
             case MapMode.SETTINGS_MODE:
                 player.hideGridLines();
+                player.showStarryBackground(); // 0x2f68ac
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
                     console.log(selectedSprites);
@@ -183,7 +211,7 @@
                     padding: '0 16px',
                     height: '64px',
                     flexShrink: 0, // keep height
-                    zIndex: 200
+                    zIndex: 200,
                 }}
             >
                 <TextField
@@ -228,6 +256,13 @@
 
                 {mode === MapMode.SETTINGS_MODE && (
                     <>
+                        <ConfirmButton
+                            label="page.map.action.save"
+                            variant="contained"
+                            onConfirm={() => {
+                                Http.saveMapData(curZone, mapContainer);
+                            }}
+                        />
                     </>
                 )}
 
@@ -291,6 +326,14 @@
                 </SpeedDial>
             </Box>
 
+            <Insight
+                open={insightVisible}
+                onCancel={() => {
+                    setInsightVisible(false);
+                }}
+                width={378}
+            />
+
             <Device
                 open={deviceVisible}
                 onCancel={() => {
@@ -300,6 +343,17 @@
                 width={378}
             />
 
+            <Settings
+                open={settingsVisible}
+                onCancel={() => {
+                    setSpriteSettings(null);
+                    setSettingsVisible(false);
+                }}
+                sprite={spriteSettings}
+                setSpriteSettings={setSpriteSettings}
+                width={570}
+            />
+
         </Box>
     );
 }

--
Gitblit v1.9.1