From 9483baffba9a24a2a36fc8739fc65b59317d9142 Mon Sep 17 00:00:00 2001 From: zhang <zc857179121@qq.com> Date: 星期四, 03 七月 2025 14:18:46 +0800 Subject: [PATCH] 队列拆分 --- zy-acs-flow/src/map/MapPage.jsx | 103 +++++++++++++++++++++++++++++++++++---------------- 1 files changed, 71 insertions(+), 32 deletions(-) diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx index 59298e7..84cb23f 100644 --- a/zy-acs-flow/src/map/MapPage.jsx +++ b/zy-acs-flow/src/map/MapPage.jsx @@ -8,7 +8,7 @@ useTheme, Fab, } from '@mui/material'; -import { MAP_MODE } from "./constants"; +import { MAP_MODE, MAP_DEFAULT_ROTATION } from "./constants"; import Player from './player'; import * as Tool from './tool'; import { NotificationProvider, useNotification } from './Notification'; @@ -19,8 +19,13 @@ import * as Http from './http'; import WebSocketClient from './websocket' import ConfirmButton from "../page/components/ConfirmButton"; -import { FitScreen } from '@mui/icons-material'; +import { FitScreen, RotateRight, Flip } from '@mui/icons-material'; import MapSearch from "./header/MapSearch"; +import { startupOrShutdown } from "./http"; +import PulseSignal from "../page/components/PulseSignal"; +import FakeFab from "./header/FakeFab"; +import RouteFab from "./header/RouteFab"; +import MoreOperate from "./header/MoreOperate"; let player; let websocket; @@ -37,7 +42,8 @@ const [app, setApp] = useState(null); const [mapContainer, setMapContainer] = useState(null); - const [mode, setMode] = useState(null); + const [mode, setMode] = useState(MAP_MODE.OBSERVER_MODE); + const modeRef = useRef(mode); const [dataFetched, setDataFetched] = useState(false); const [insightVisible, setInsightVisible] = useState(false); const [deviceVisible, setDeviceVisible] = useState(false); @@ -45,9 +51,10 @@ const [batchSelectionVisible, setBatchSelectionVisible] = useState(false); const [curSprite, setCurSprite] = useState(null); - const prevCurSpriteRef = useRef(); const [batchSprites, setBatchSprites] = useState([]); + const [rcsStatus, setRcsStatus] = useState(null); + const [showRoutes, setShowRoutes] = useState(false); const [curZone, setCurZone] = useState(() => { const storedValue = localStorage.getItem('curZone'); return storedValue !== null ? JSON.parse(storedValue) : null; @@ -73,17 +80,19 @@ Http.setMapContainer(player.mapContainer); websocket = new WebSocketClient('/ws/map/websocket'); - await Http.fetchMapData(); + await Http.fetchMapData(curZone, setRcsStatus, setCurSprite); websocket.connect(); websocket.onMessage = (wsMsg) => { - Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), setCurSprite); + if (modeRef.current === MAP_MODE.OBSERVER_MODE) { + Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), setCurSprite); + } } + player.rotateMap(localStorage.getItem('mapRotation') || Tool.rotationParseNum(MAP_DEFAULT_ROTATION)); setTimeout(() => { notify.info(translate('page.map.welcome')); player.adaptScreen(); setDataFetched(true); - setMode(MAP_MODE.OBSERVER_MODE); }, 200) } initialize(); @@ -100,7 +109,6 @@ player.destroy(); window.removeEventListener('resize', handleResize); Tool.patchRaLayout(''); - Tool.isF }; }, []) @@ -114,7 +122,10 @@ }, [themeMode]) const switchMode = (mode) => { + modeRef.current = mode; + Tool.removeSelectedEffect(); + player.hideGridLines(); setInsightVisible(false); setDeviceVisible(false); @@ -126,9 +137,6 @@ switch (mode) { case MAP_MODE.OBSERVER_MODE: - player.hideGridLines(); - player.hideStarryBackground(); - player.activateMapMultiSelect((selectedSprites, restartFn) => { Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites); }); @@ -139,7 +147,7 @@ break case MAP_MODE.MOVABLE_MODE: player.showGridLines(); - player.hideStarryBackground(); + Tool.hideRoutes(curZone, setShowRoutes); player.activateMapMultiSelect((selectedSprites, restartFn) => { Tool.spriteListBeMovable(selectedSprites, () => { @@ -152,9 +160,6 @@ }) break case MAP_MODE.SETTINGS_MODE: - player.hideGridLines(); - // player.showStarryBackground(); // 0x2f68ac - player.activateMapMultiSelect((selectedSprites, restartFn) => { Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites); }); @@ -180,6 +185,9 @@ sprite.x = mapX; sprite.y = mapY; + // sprite.scale.set(mapContainer.scale.x); + sprite.rotation = -mapContainer.rotation; + Tool.initSprite(sprite, type); mapContainer.addChild(sprite); Tool.beMovable(sprite); @@ -190,24 +198,22 @@ if (!mapContainer) { return; } - prevCurSpriteRef.current = curSprite; - if (curSprite && prevCurSprite !== curSprite) { - Tool.removeSelectedEffect(); - } + Tool.removeSelectedEffect(); if (curSprite) { if (mode === MAP_MODE.OBSERVER_MODE) { - Tool.showSelectedEffect(curSprite) - setInsightVisible(true) + Tool.showSelectedEffect(curSprite); + setInsightVisible(true); } if (mode === MAP_MODE.SETTINGS_MODE) { - Tool.showSelectedEffect(curSprite) - setSettingsVisible(true) + Tool.showSelectedEffect(curSprite); + setSettingsVisible(true); } } else { Tool.removeSelectedEffect(); + setInsightVisible(false); + setSettingsVisible(false); } }, [curSprite]); - const prevCurSprite = prevCurSpriteRef.current; // watch batchSprites React.useEffect(() => { @@ -257,16 +263,30 @@ {mode === MAP_MODE.OBSERVER_MODE && ( <> + <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}> + <PulseSignal + negative + negativeColor='#a4b0be' + flag={rcsStatus} + width={12} + /> + </Box> <Button variant="contained" - color="primary" + color={rcsStatus ? 'inherit' : 'primary'} sx={{ mr: 2 }} + onClick={() => { + startupOrShutdown(() => { + setRcsStatus(!rcsStatus); + }); + }} > - {translate('page.map.action.startup')} + {rcsStatus ? translate('page.map.action.shutdown') : translate('page.map.action.startup')} </Button> <Button variant="contained" color="primary"> {translate('page.map.action.monitor')} </Button> + <MoreOperate /> </> )} @@ -387,19 +407,41 @@ bottom: 30, display: 'flex', flexDirection: 'column', - gap: 1 + gap: 2 }} > + {mode !== MAP_MODE.MOVABLE_MODE && ( + <> + <RouteFab + curZone={curZone} + showRoutes={showRoutes} + setShowRoutes={setShowRoutes} + notify={notify} + /> + <FakeFab /> + </> + )} <Fab variant="extended" color="primary" - size="medium" + size="small" + onClick={() => { + player.rotateMap(Math.PI / 2); + }} + > + <RotateRight /> + {translate('page.map.action.rotate')} + </Fab> + <Fab + variant="extended" + color="primary" + size="small" onClick={() => { player.adaptScreen(); }} > <FitScreen /> - {translate('page.map.action.adapt')} + {translate('page.map.action.adapt')} </Fab> </Box> </Box> @@ -408,7 +450,6 @@ open={insightVisible} onCancel={() => { setCurSprite(null); - setInsightVisible(false); }} sprite={curSprite} width={570} @@ -427,7 +468,6 @@ open={settingsVisible} onCancel={() => { setCurSprite(null); - setSettingsVisible(false); }} sprite={curSprite} setSpriteSettings={setCurSprite} @@ -438,7 +478,6 @@ open={batchSelectionVisible} onCancel={() => { setBatchSprites([]); - setBatchSelectionVisible(false); }} batchSprites={batchSprites} mode={mode} -- Gitblit v1.9.1