From 9bfb2fd94cf347116834855d6c1dd6e1d6dee10d Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 14 十月 2024 17:04:22 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/MapPage.jsx |   61 ++++++++++++++----------------
 1 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 9d35888..1d34847 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -19,6 +19,7 @@
     Print as PrintIcon,
     Share as ShareIcon,
 } from '@mui/icons-material';
+import { MAP_MODE } from "./constants";
 import Player from './player';
 import * as Tool from './tool';
 import { NotificationProvider, useNotification } from './Notification';
@@ -47,7 +48,7 @@
     const [app, setApp] = useState(null);
     const [mapContainer, setMapContainer] = useState(null);
 
-    const [mode, setMode] = useState(MapMode.OBSERVER_MODE);
+    const [mode, setMode] = useState(MAP_MODE.OBSERVER_MODE);
     const [insightVisible, setInsightVisible] = useState(false);
     const [deviceVisible, setDeviceVisible] = useState(false);
     const [settingsVisible, setSettingsVisible] = useState(false);
@@ -79,20 +80,18 @@
             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));
+            }
 
             setTimeout(() => {
                 player.adaptScreen();
-                notify.info('Welcome to Rcs');
+                notify.info(translate('page.map.welcome'));
             }, 200)
-
-            // websocket.connect();
-            // websocket.onMessage = (data) => {
-            //     Tool.updateMapStatusInRealTime(data, () => curFloorRef.current, setCurSPrite);
-            // }
-
         }
         initialize();
 
@@ -131,7 +130,7 @@
         setBatchSprites([]);
 
         switch (mode) {
-            case MapMode.OBSERVER_MODE:
+            case MAP_MODE.OBSERVER_MODE:
                 player.hideGridLines();
                 player.hideStarryBackground();
 
@@ -140,7 +139,7 @@
                 });
 
                 break
-            case MapMode.MOVABLE_MODE:
+            case MAP_MODE.MOVABLE_MODE:
                 player.showGridLines();
                 player.hideStarryBackground();
 
@@ -154,9 +153,9 @@
                     Tool.beMovable(child);
                 })
                 break
-            case MapMode.SETTINGS_MODE:
+            case MAP_MODE.SETTINGS_MODE:
                 player.hideGridLines();
-                player.showStarryBackground(); // 0x2f68ac
+                // player.showStarryBackground(); // 0x2f68ac
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
                     setBatchSprites(selectedSprites);
@@ -241,12 +240,13 @@
                 sx={{
                     display: 'flex',
                     alignItems: 'center',
-                    backgroundColor: '#f5f5f5',
-                    color: '#000',
+                    backgroundColor: theme.palette.background.default,
+                    color: theme.palette.text.primary,
                     padding: '0 16px',
                     height: '64px',
                     flexShrink: 0, // keep height
                     zIndex: 200,
+                    boxShadow: theme.shadows[1],
                 }}
             >
                 <TextField
@@ -255,28 +255,28 @@
                     placeholder="鎼滅储..."
                     sx={{
                         width: '200px',
-                        backgroundColor: '#fff',
+                        backgroundColor: theme.palette.background.paper,
                         borderRadius: 1,
                     }}
                 />
                 <Box sx={{ flexGrow: 1 }} />
 
-                {mode === MapMode.OBSERVER_MODE && (
+                {mode === MAP_MODE.OBSERVER_MODE && (
                     <>
                         <Button
                             variant="contained"
                             color="primary"
                             sx={{ mr: 2 }}
                         >
-                            鍋滄RCS杩愯浆
+                            {translate('page.map.action.startup')}
                         </Button>
                         <Button variant="contained" color="primary">
-                            绯荤粺鎶ュ憡
+                            {translate('page.map.action.monitor')}
                         </Button>
                     </>
                 )}
 
-                {mode === MapMode.MOVABLE_MODE && (
+                {mode === MAP_MODE.MOVABLE_MODE && (
                     <>
                         <Button
                             variant="outlined"
@@ -298,7 +298,6 @@
                         <Button
                             variant="contained"
                             color="primary"
-                            sx={{ mr: 1 }}
                             onClick={() => setDeviceVisible(!deviceVisible)}
                         >
                             {translate('page.map.devices.title')}
@@ -306,7 +305,7 @@
                     </>
                 )}
 
-                {mode === MapMode.SETTINGS_MODE && (
+                {mode === MAP_MODE.SETTINGS_MODE && (
                     <>
                         <Button
                             variant="outlined"
@@ -336,13 +335,14 @@
                     size="small"
                     sx={{
                         ml: 2,
-                        backgroundColor: '#fff',
+                        backgroundColor: theme.palette.background.paper,
+                        color: theme.palette.text.primary,
                         borderRadius: 1,
                     }}
                 >
-                    <MenuItem value={MapMode.OBSERVER_MODE}>鐩戞帶妯″紡</MenuItem>
-                    <MenuItem value={MapMode.MOVABLE_MODE}>缂栬緫妯″紡</MenuItem>
-                    <MenuItem value={MapMode.SETTINGS_MODE}>閰嶇疆妯″紡</MenuItem>
+                    <MenuItem value={MAP_MODE.OBSERVER_MODE}>{translate('page.map.mode.observer')}</MenuItem>
+                    <MenuItem value={MAP_MODE.MOVABLE_MODE}>{translate('page.map.mode.movable')}</MenuItem>
+                    <MenuItem value={MAP_MODE.SETTINGS_MODE}>{translate('page.map.mode.settings')}</MenuItem>
                 </Select>
             </Box>
             {/* content */}
@@ -441,8 +441,11 @@
             <Batch
                 open={batchSelectionVisible}
                 onCancel={() => {
+                    setBatchSprites([]);
                     setBatchSelectionVisible(false);
                 }}
+                batchSprites={batchSprites}
+                mode={mode}
                 width={570}
             />
 
@@ -457,11 +460,5 @@
         </NotificationProvider>
     )
 }
-
-export const MapMode = Object.freeze({
-    OBSERVER_MODE: "1",
-    MOVABLE_MODE: "2",
-    SETTINGS_MODE: "3",
-})
 
 export default MapPage;

--
Gitblit v1.9.1