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

---
 zy-acs-flow/src/map/MapPage.jsx |   67 ++++++++++++++++++++-------------
 1 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 27af6c1..11179da 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);
@@ -85,7 +86,7 @@
 
             setTimeout(() => {
                 player.adaptScreen();
-                notify.info('Welcome to Rcs');
+                notify.info(translate('page.map.welcome'));
             }, 200)
 
             // websocket.connect();
@@ -125,20 +126,22 @@
 
         setDeviceVisible(false);
         setSettingsVisible(false);
+        setBatchSelectionVisible(false);
 
         setSpriteSettings(null);
+        setBatchSprites([]);
 
         switch (mode) {
-            case MapMode.OBSERVER_MODE:
+            case MAP_MODE.OBSERVER_MODE:
                 player.hideGridLines();
                 player.hideStarryBackground();
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
-                    console.log(selectedSprites);
+                    setBatchSprites(selectedSprites);
                 });
 
                 break
-            case MapMode.MOVABLE_MODE:
+            case MAP_MODE.MOVABLE_MODE:
                 player.showGridLines();
                 player.hideStarryBackground();
 
@@ -152,12 +155,12 @@
                     Tool.beMovable(child);
                 })
                 break
-            case MapMode.SETTINGS_MODE:
+            case MAP_MODE.SETTINGS_MODE:
                 player.hideGridLines();
                 player.showStarryBackground(); // 0x2f68ac
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
-                    console.log(selectedSprites);
+                    setBatchSprites(selectedSprites);
                 });
 
                 mapContainer.children.forEach(child => {
@@ -204,6 +207,19 @@
     }, [spriteSettings, mapContainer])
     const prevSpriteSettings = prevSpriteSettingsRef.current;
 
+    // watch batchSprites
+    React.useEffect(() => {
+        if (!mapContainer) {
+            return;
+        }
+        if (batchSprites?.length > 0) {
+            setBatchSelectionVisible(true)
+        } else {
+            player.clearSelectedSprites();
+            setBatchSelectionVisible(false)
+        }
+    }, [batchSprites])
+
     const actions = [
         { icon: <FileCopyIcon />, name: '澶嶅埗' },
         { icon: <SaveIcon />, name: '淇濆瓨' },
@@ -226,12 +242,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
@@ -240,28 +257,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"
@@ -283,7 +300,6 @@
                         <Button
                             variant="contained"
                             color="primary"
-                            sx={{ mr: 1 }}
                             onClick={() => setDeviceVisible(!deviceVisible)}
                         >
                             {translate('page.map.devices.title')}
@@ -291,7 +307,7 @@
                     </>
                 )}
 
-                {mode === MapMode.SETTINGS_MODE && (
+                {mode === MAP_MODE.SETTINGS_MODE && (
                     <>
                         <Button
                             variant="outlined"
@@ -321,13 +337,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 */}
@@ -426,8 +443,12 @@
             <Batch
                 open={batchSelectionVisible}
                 onCancel={() => {
+                    setBatchSprites([]);
                     setBatchSelectionVisible(false);
                 }}
+                batchSprites={batchSprites}
+                mode={mode}
+                width={570}
             />
 
         </Box>
@@ -441,11 +462,5 @@
         </NotificationProvider>
     )
 }
-
-export const MapMode = Object.freeze({
-    OBSERVER_MODE: "1",
-    MOVABLE_MODE: "2",
-    SETTINGS_MODE: "3",
-})
 
 export default MapPage;

--
Gitblit v1.9.1