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 | 66 ++++++++++++++++++++------------ 1 files changed, 41 insertions(+), 25 deletions(-) diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx index abca05b..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,10 +19,13 @@ import * as Http from './http'; import WebSocketClient from './websocket' import ConfirmButton from "../page/components/ConfirmButton"; -import { FitScreen, AltRoute } 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; @@ -39,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); @@ -47,7 +51,6 @@ const [batchSelectionVisible, setBatchSelectionVisible] = useState(false); const [curSprite, setCurSprite] = useState(null); - const prevCurSpriteRef = useRef(); const [batchSprites, setBatchSprites] = useState([]); const [rcsStatus, setRcsStatus] = useState(null); @@ -77,17 +80,19 @@ Http.setMapContainer(player.mapContainer); websocket = new WebSocketClient('/ws/map/websocket'); - await Http.fetchMapData(curZone, setRcsStatus); + 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(); @@ -104,7 +109,6 @@ player.destroy(); window.removeEventListener('resize', handleResize); Tool.patchRaLayout(''); - Tool.isF }; }, []) @@ -118,6 +122,8 @@ }, [themeMode]) const switchMode = (mode) => { + modeRef.current = mode; + Tool.removeSelectedEffect(); player.hideGridLines(); @@ -179,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); @@ -189,10 +198,7 @@ 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); @@ -208,7 +214,6 @@ setSettingsVisible(false); } }, [curSprite]); - const prevCurSprite = prevCurSpriteRef.current; // watch batchSprites React.useEffect(() => { @@ -261,7 +266,7 @@ <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}> <PulseSignal negative - negativeColor = '#a4b0be' + negativeColor='#a4b0be' flag={rcsStatus} width={12} /> @@ -281,6 +286,7 @@ <Button variant="contained" color="primary"> {translate('page.map.action.monitor')} </Button> + <MoreOperate /> </> )} @@ -405,17 +411,27 @@ }} > {mode !== MAP_MODE.MOVABLE_MODE && ( - <Fab - variant="extended" - color={showRoutes ? 'primary' : 'default'} - size="small" - onClick={() => { - showRoutes ? Tool.hideRoutes(curZone, setShowRoutes) : Tool.showRoutes(curZone, setShowRoutes) - }} - > - <AltRoute /> - </Fab> + <> + <RouteFab + curZone={curZone} + showRoutes={showRoutes} + setShowRoutes={setShowRoutes} + notify={notify} + /> + <FakeFab /> + </> )} + <Fab + variant="extended" + color="primary" + size="small" + onClick={() => { + player.rotateMap(Math.PI / 2); + }} + > + <RotateRight /> + {translate('page.map.action.rotate')} + </Fab> <Fab variant="extended" color="primary" @@ -425,7 +441,7 @@ }} > <FitScreen /> - {/* {translate('page.map.action.adapt')} */} + {translate('page.map.action.adapt')} </Fab> </Box> </Box> -- Gitblit v1.9.1