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,10 +19,13 @@


import * as Http from './http';


import WebSocketClient from './websocket'


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


import { FitScreen, AltRoute, RotateRight } 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(() => {


@@ -281,6 +286,7 @@


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


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


                        </Button>


                        <MoreOperate />


                    </>


                )}




@@ -405,30 +411,26 @@


                    }}


                >


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


                            // setTimeout(() => {


                            //     player.adaptScreen();


                            // }, 500)


                            player.rotateMap(Math.PI / 2);


                        }}


                    >


                        <RotateRight />


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


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


                    </Fab>


                    <Fab


                        variant="extended"


@@ -439,7 +441,7 @@


                        }}


                    >


                        <FitScreen />


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


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


                    </Fab>


                </Box>


            </Box>