#

Junjie

2024-10-17 d835d1b51f832889929cdf69010034a30ef44d02

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

@@ -1,7 +1,7 @@
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';
import { Layout, Button, Flex, Row, Col, FloatButton, Select, notification, Segmented, message, Popconfirm } from 'antd';
const { Header, Content } = Layout;
import {
    AppstoreAddOutlined,
@@ -12,6 +12,7 @@
import './index.css'
import { createStyles } from 'antd-style';
import Edit from './components/device';
import Http from '@/utils/http';
import Settings from './components/settings'
import * as Utils from './utils'
import WebSocketClient from './websocket'
@@ -90,6 +91,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);

@@ -105,6 +107,9 @@

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

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

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

    // resize
@@ -238,6 +250,29 @@
    }, [curSprite]);
    const prevCurSprite = prevCurSpriteRef.current;

    const clearLockPathConfirm = (e) => {
        clearLockPath(curFloor);
    };

    const clearLockPath = async (floor) => {
        const hide = message.loading(intl.formatMessage({ id: 'page.clearing', defaultMessage: '正在清空' }));
        try {
            const resp = await Http.doGet('api/map/clearLockPath', { lev: floor });
            if (resp.code === 200) {
                message.success(intl.formatMessage({ id: 'page.clearing.success', defaultMessage: '清空成功' }));
                return true;
            } else {
                message.error(resp.msg);
                return false;
            }
        } catch (error) {
            message.error(intl.formatMessage({ id: 'page.clearing.fail', defaultMessage: '清空失败请重试！' }));
            return false;
        } finally {
            hide();
        }
    }

    // fn switch floor
    const switchFloor = async (floor) => {
        await Utils.fetchMapData(floor);
@@ -251,6 +286,7 @@

    // watch curFloor
    React.useEffect(() => {
        curFloorRef.current = curFloor;
        if (!mapContainer && !dataFetched) {
            return;
        }
@@ -313,6 +349,22 @@

                                {model === MapModel.OBSERVER_MODEL && (
                                    <>
                                        <Popconfirm
                                            title="清空路径"
                                            description="此操作可能导致小车碰撞，确认清空路径吗？"
                                            onConfirm={clearLockPathConfirm}
                                            okText="确认"
                                            cancelText="取消"
                                        >
                                            <Button
                                                className='map-header-button'
                                                size={'large'}
                                            >
                                                <FormattedMessage id='map.clearLockPath' defaultMessage='清空路径' />
                                            </Button>
                                        </Popconfirm>


                                        <Button
                                            className='map-header-button'
                                            size={'large'}