#

luxiaotao1123

2024-04-16 691372c235ee367e9d09e33546432952144519b5

 zy-asrs-flow/src/pages/map/index.jsx

@@ -1,5 +1,5 @@
import * as React from 'react'
import * as PIXI from 'pixi.js';
import * as TWEEDLE from 'tweedle.js';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { Layout, Button, Flex, Row, Col, FloatButton, Select, notification, Segmented } from 'antd';
const { Header, Content } = Layout;
@@ -8,13 +8,13 @@
    FileAddOutlined,
    CompressOutlined,
    SettingOutlined,
    CloseOutlined
} from '@ant-design/icons';
import './index.css'
import { createStyles } from 'antd-style';
import Edit from './components/device';
import Settings from './components/settings'
import * as Utils from './utils'
import WebSocketClient from './websocket'
import Player from './player';
import MapSearch from './header/search';
import MapFloor from './header/floor';
@@ -60,7 +60,7 @@
    SETTINGS_MODEL: "3",
})

let player;
let player, websocket;

const Map = () => {
    const intl = useIntl();
@@ -90,6 +90,7 @@
        const storedValue = localStorage.getItem('curFloor');
        return storedValue !== null ? JSON.parse(storedValue) : null;
    });
    const curFloorRef = React.useRef(curFloor);
    const [batchSprites, setBatchSprites] = React.useState([]);
    const [batchDrawerVisible, setBatchDrawerVisible] = React.useState(false);

@@ -102,6 +103,12 @@
            Utils.syncApp(player.app);
            Utils.syncMapContainer(player.mapContainer);
            Utils.syncNotify(notify);

            websocket = new WebSocketClient('/ws/map/websocket');
            websocket.connect();
            websocket.onMessage = (data) => {
                Utils.updateMapStatusInRealTime(data, () => curFloorRef.current, setCurSPrite);
            }

            const handleResize = () => {
                setWindowSize({
@@ -124,6 +131,13 @@
            }, 200)
        }
        initialize();

        return () => {
            websocket.onMessage = (data) => {}
            if (websocket) {
                websocket.close();
            }
        }
    }, []);

    // resize
@@ -248,6 +262,7 @@

    // watch curFloor
    React.useEffect(() => {
        curFloorRef.current = curFloor;
        if (!mapContainer && !dataFetched) {
            return;
        }
@@ -432,6 +447,7 @@
            <MapDrawer
                open={drawerVisible}
                curSprite={curSprite}
                curFloor={curFloor}
                refCurr={mapRef.current}
                onCancel={() => {
                    setCurSPrite(null);