blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
#
luxiaotao1123
2024-11-12 ce7cab3f73e46f76b10efd7f8ff8dd5ce712482b 
 zy-acs-flow/src/map/MapPage.jsx


@@ -19,10 +19,11 @@


import * as Http from './http';


import WebSocketClient from './websocket'


import ConfirmButton from "../page/components/ConfirmButton";


import { FitScreen } from '@mui/icons-material';


import { FitScreen, AltRoute, RotateRight } from '@mui/icons-material';


import MapSearch from "./header/MapSearch";


import { startupOrShutdown } from "./http";


import PulseSignal from "../page/components/PulseSignal";


import FakeFab from "./header/FakeFab";




let player;


let websocket;


@@ -39,7 +40,7 @@


    const [app, setApp] = useState(null);


    const [mapContainer, setMapContainer] = useState(null);




    const [mode, setMode] = useState(null);


    const [mode, setMode] = useState(MAP_MODE.OBSERVER_MODE);


    const [dataFetched, setDataFetched] = useState(false);


    const [insightVisible, setInsightVisible] = useState(false);


    const [deviceVisible, setDeviceVisible] = useState(false);


@@ -47,10 +48,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;


@@ -76,17 +77,17 @@


            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);


            }




            player.rotateMap(localStorage.getItem('mapRotation'));


            setTimeout(() => {


                notify.info(translate('page.map.welcome'));


                player.adaptScreen();


                setDataFetched(true);


                setMode(MAP_MODE.OBSERVER_MODE);


            }, 200)


        }


        initialize();


@@ -118,6 +119,7 @@




    const switchMode = (mode) => {


        Tool.removeSelectedEffect();


        player.hideGridLines();




        setInsightVisible(false);


        setDeviceVisible(false);


@@ -129,9 +131,6 @@




        switch (mode) {


            case MAP_MODE.OBSERVER_MODE:


                player.hideGridLines();


                player.hideStarryBackground();




                player.activateMapMultiSelect((selectedSprites, restartFn) => {


                    Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);


                });


@@ -142,7 +141,7 @@


                break


            case MAP_MODE.MOVABLE_MODE:


                player.showGridLines();


                player.hideStarryBackground();


                Tool.hideRoutes(curZone, setShowRoutes);




                player.activateMapMultiSelect((selectedSprites, restartFn) => {


                    Tool.spriteListBeMovable(selectedSprites, () => {


@@ -155,9 +154,6 @@


                })


                break


            case MAP_MODE.SETTINGS_MODE:


                player.hideGridLines();


                // player.showStarryBackground(); // 0x2f68ac




                player.activateMapMultiSelect((selectedSprites, restartFn) => {


                    Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);


                });


@@ -193,10 +189,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);


@@ -212,7 +205,6 @@


            setSettingsVisible(false);


        }


    }, [curSprite]);


    const prevCurSprite = prevCurSpriteRef.current;




    // watch batchSprites


    React.useEffect(() => {


@@ -263,7 +255,12 @@


                {mode === MAP_MODE.OBSERVER_MODE && (


                    <>


                        <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>


                            <PulseSignal negative flag={rcsStatus} width={12} />


                            <PulseSignal


                                negative


                                negativeColor='#a4b0be'


                                flag={rcsStatus}


                                width={12}


                            />


                        </Box>


                        <Button


                            variant="contained"


@@ -400,19 +397,46 @@


                        bottom: 30,


                        display: 'flex',


                        flexDirection: 'column',


                        gap: 1


                        gap: 2


                    }}


                >


                    {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>


                            <FakeFab


                            />


                        </>


                    )}


                    <Fab


                        variant="extended"


                        color="primary"


                        size="medium"


                        size="small"


                        onClick={() => {


                            player.rotateMap(Math.PI / 2);


                        }}


                    >


                        <RotateRight />


                        {/* &nbsp;{translate('page.map.action.adapt')} */}


                    </Fab>


                    <Fab


                        variant="extended"


                        color="primary"


                        size="small"


                        onClick={() => {


                            player.adaptScreen();


                        }}


                    >


                        <FitScreen />


                        &nbsp;{translate('page.map.action.adapt')}


                        {/* &nbsp;{translate('page.map.action.adapt')} */}


                    </Fab>


                </Box>


            </Box>