blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
zhang
6 天以前 9483baffba9a24a2a36fc8739fc65b59317d9142 
 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,9 +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;


@@ -38,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);


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


@@ -75,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();


@@ -102,7 +109,6 @@


            player.destroy();


            window.removeEventListener('resize', handleResize);


            Tool.patchRaLayout('');


            Tool.isF


        };


    }, [])




@@ -116,7 +122,10 @@


    }, [themeMode])




    const switchMode = (mode) => {


        modeRef.current = mode;




        Tool.removeSelectedEffect();


        player.hideGridLines();




        setInsightVisible(false);


        setDeviceVisible(false);


@@ -128,9 +137,6 @@




        switch (mode) {


            case MAP_MODE.OBSERVER_MODE:


                player.hideGridLines();


                player.hideStarryBackground();




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


                    Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);


                });


@@ -141,7 +147,7 @@


                break


            case MAP_MODE.MOVABLE_MODE:


                player.showGridLines();


                player.hideStarryBackground();


                Tool.hideRoutes(curZone, setShowRoutes);




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


                    Tool.spriteListBeMovable(selectedSprites, () => {


@@ -154,9 +160,6 @@


                })


                break


            case MAP_MODE.SETTINGS_MODE:


                player.hideGridLines();


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




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


                    Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);


                });


@@ -182,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);


@@ -192,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);


@@ -211,7 +214,6 @@


            setSettingsVisible(false);


        }


    }, [curSprite]);


    const prevCurSprite = prevCurSpriteRef.current;




    // watch batchSprites


    React.useEffect(() => {


@@ -261,6 +263,14 @@




                {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={rcsStatus ? 'inherit' : 'primary'}


@@ -276,6 +286,7 @@


                        <Button variant="contained" color="primary">


                            {translate('page.map.action.monitor')}


                        </Button>


                        <MoreOperate />


                    </>


                )}




@@ -396,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 />


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


                    </Fab>


                    <Fab


                        variant="extended"


                        color="primary"


                        size="small"


                        onClick={() => {


                            player.adaptScreen();


                        }}


                    >


                        <FitScreen />


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


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


                    </Fab>


                </Box>


            </Box>