#

luxiaotao1123

2024-10-12 2a2949d61c2d4ff2cd3261ee61c065bba019b31a

 zy-acs-flow/src/map/MapPage.jsx

@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import { useTranslate } from "react-admin";
import { useTranslate, useRefresh, useSidebarState } from "react-admin";
import {
    TextField,
    Select,
@@ -27,12 +27,14 @@
import Settings from "./settings";
import * as Http from './http';
import WebSocketClient from './websocket'
import ConfirmButton from "../page/components/ConfirmButton";

let player;
let websocket;

const Map = () => {
    const notify = useNotification();
    const [sidebarOpen] = useSidebarState();
    const translate = useTranslate();
    const theme = useTheme();
    const themeMode = theme.palette.mode;
@@ -48,7 +50,18 @@
    const [settingsVisible, setSettingsVisible] = useState(false);

    const [spriteSettings, setSpriteSettings] = useState(null);
    const prevSpriteSettingsRef = React.useRef();
    const prevSpriteSettingsRef = useRef();

    const [curZone, setCurZone] = useState(() => {
        const storedValue = localStorage.getItem('curZone');
        return storedValue !== null ? JSON.parse(storedValue) : null;
    });

    const handleResize = () => {
        const width = contentRef.current.offsetWidth;
        const height = contentRef.current.offsetHeight;
        player.resize(width, height);
    };

    useEffect(() => {
        Tool.patchRaLayout('0px');
@@ -60,9 +73,16 @@
            Tool.setMapContainer(player.mapContainer);
            Tool.setThemeMode(themeMode);
            Http.setNotify(notify);
            Http.setMapContainer(player.mapContainer);
            // websocket = new WebSocketClient('/ws/map/websocket');

            await Http.fetchMapData(0);
            await Http.fetchMapData();

            setTimeout(() => {
                player.adaptScreen();
                notify.info('Welcome to Rcs');
            }, 200)

            // websocket.connect();
            // websocket.onMessage = (data) => {
            //     Tool.updateMapStatusInRealTime(data, () => curFloorRef.current, setCurSPrite);
@@ -72,16 +92,8 @@
        initialize();

        // resize
        const handleResize = () => {
            const width = contentRef.current.offsetWidth;
            const height = contentRef.current.offsetHeight;

            player.resize(width, height);
        };
        handleResize();
        window.addEventListener('resize', handleResize);

        notify('Welcome to Rcs', 'info');

        return () => {
            if (websocket) {
@@ -92,6 +104,15 @@
            window.removeEventListener('resize', handleResize);
            Tool.patchRaLayout('');
        };
    }, [])

    useEffect(() => {
        setTimeout(handleResize, 300)
    }, [sidebarOpen]);

    useEffect(() => {
        player.setTheme(themeMode);
        Tool.setThemeMode(themeMode);
    }, [themeMode])

    const switchMode = (mode) => {
@@ -121,6 +142,10 @@
                        restartFn();
                    });
                });

                mapContainer.children.forEach(child => {
                    Tool.beMovable(child);
                })
                break
            case MapMode.SETTINGS_MODE:
                player.hideGridLines();
@@ -185,6 +210,7 @@
    return (
        <Box
            sx={{
                width: '100%',
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
@@ -200,7 +226,7 @@
                    padding: '0 16px',
                    height: '64px',
                    flexShrink: 0, // keep height
                    zIndex: 200
                    zIndex: 200,
                }}
            >
                <TextField
@@ -233,6 +259,23 @@
                {mode === MapMode.MOVABLE_MODE && (
                    <>
                        <Button
                            variant="outlined"
                            sx={{ mr: 2 }}
                            onClick={() => {
                                Tool.clearMapData();
                            }}
                        >
                            {translate('page.map.action.clear')}
                        </Button>
                        <ConfirmButton
                            label="page.map.action.save"
                            variant="contained"
                            sx={{ mr: 2 }}
                            onConfirm={() => {
                                Http.saveMapData(curZone);
                            }}
                        />
                        <Button
                            variant="contained"
                            color="primary"
                            sx={{ mr: 1 }}
@@ -245,6 +288,22 @@

                {mode === MapMode.SETTINGS_MODE && (
                    <>
                        <Button
                            variant="outlined"
                            sx={{ mr: 2 }}
                            onClick={() => {
                                Tool.clearMapData();
                            }}
                        >
                            {translate('page.map.action.clear')}
                        </Button>
                        <ConfirmButton
                            label="page.map.action.save"
                            variant="contained"
                            onConfirm={() => {
                                Http.saveMapData(curZone);
                            }}
                        />
                    </>
                )}

@@ -332,6 +391,7 @@
                    setSettingsVisible(false);
                }}
                sprite={spriteSettings}
                setSpriteSettings={setSpriteSettings}
                width={570}
            />