#

luxiaotao1123

2024-03-18 c352df43ea5eea9a84e89867eb3b03ba3b2dbb83

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

@@ -16,6 +16,7 @@
import Settings from './components/settings'
import * as Utils from './utils'
import Player from './player';
import MapSearch from './header/search';
import MapDrawer from './drawer';

const useStyles = createStyles(({ token }) => {
@@ -65,7 +66,7 @@
    const mapRef = React.useRef();
    const contentRef = React.useRef();

    const [model, setModel] = React.useState(() => MapModel.OBSERVER_MODEL);
    const [model, setModel] = React.useState(null);
    const [deviceVisible, setDeviceVisible] = React.useState(false);
    const [settingsVisible, setSettingsVisible] = React.useState(false);
    const [windowSize, setWindowSize] = React.useState({
@@ -77,22 +78,35 @@
    const [didClickSprite, setDidClickSprite] = React.useState(false);
    const [spriteBySettings, setSpriteBySettings] = React.useState(null);
    const prevSpriteBySettingsRef = React.useRef();
    const [drawerVisible, setDrawerVisible] = React.useState(false);
    const [dataFetched, setDataFetched] = React.useState(false);
    const [curSprite, setCurSPrite] = React.useState(null);
    const prevCurSpriteRef = React.useRef();

    // init func
    React.useEffect(() => {
        player = new Player(mapRef.current, styles.dark, didClickSprite);
        setApp(player.app);
        setMapContainer(player.mapContainer);
        Utils.syncApp(player.app);
        Utils.syncMapContainer(player.mapContainer);
        const initialize = async () => {
            player = new Player(mapRef.current, styles.dark, didClickSprite);
            setApp(player.app);
            setMapContainer(player.mapContainer);
            Utils.syncApp(player.app);
            Utils.syncMapContainer(player.mapContainer);

        const handleResize = () => {
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight,
            });
        };
        window.addEventListener('resize', handleResize);
            const handleResize = () => {
                setWindowSize({
                    width: window.innerWidth,
                    height: window.innerHeight,
                });
            };
            window.addEventListener('resize', handleResize);
            await Utils.fetchMapData(intl);
            setDataFetched(true);
            setModel(MapModel.OBSERVER_MODEL)
            setTimeout(() => {
                player.adaptScreen();
            }, 200)
        }
        initialize();
    }, []);

    // resize
@@ -104,14 +118,13 @@
        const height = contentRef.current.offsetHeight;
        app.renderer.resize(width, height);
        if (model !== MapModel.OBSERVER_MODEL) {
            player.hideGridlines();
            player.showGridlines();
        }
    }, [app, mapContainer, windowSize])

    // model
    React.useEffect(() => {
        if (!mapContainer) {
        if (!mapContainer && !dataFetched) {
            return;
        }
        switch (model) {
@@ -123,14 +136,12 @@
                player.activateMapEvent(null);

                Utils.removeSelectedEffect();
                setCurSPrite(null);
                setDeviceVisible(false);
                setSettingsVisible(false);

                mapContainer.children.forEach(child => {
                    child.off('pointerup');
                    child.off('pointermove');
                    child.off('pointerdown');
                    child.off('click');
                    Utils.viewFeature(child, setCurSPrite);
                })
                break
            case MapModel.MOVABLE_MODEL:
@@ -143,6 +154,7 @@
                Utils.removeSelectedEffect();
                setSpriteBySettings(null);
                setSettingsVisible(false);
                setDrawerVisible(false);

                mapContainer.children.forEach(child => {
                    Utils.beMovable(child, setDidClickSprite);
@@ -156,6 +168,7 @@
                player.activateMapEvent(null);

                setDeviceVisible(false);
                setDrawerVisible(false);

                mapContainer.children.forEach(child => {
                    Utils.beSettings(child, setSpriteBySettings, setDidClickSprite);
@@ -176,6 +189,26 @@
        mapContainer.addChild(sprite);
        Utils.beMovable(sprite, setDidClickSprite);
    };

    // watch curSprite
    React.useEffect(() => {
        if (!mapContainer) {
            return;
        }
        prevCurSpriteRef.current = curSprite;
        if (curSprite && prevCurSprite !== curSprite) {
            Utils.removeSelectedEffect();
        }
        if (curSprite) {
            if (model === MapModel.OBSERVER_MODEL) {
                Utils.showSelectedEffect(curSprite)
                setDrawerVisible(true)
            }
        } else {
            Utils.removeSelectedEffect();
        }
    }, [curSprite]);
    const prevCurSprite = prevCurSpriteRef.current;

    // didClickSprite, stop triggers both sprite click and play's selection boxs
    React.useEffect(() => {
@@ -212,56 +245,73 @@
                <Header className={styles.header}>
                    <Row style={{ height: '100%' }}>
                        <Col className={styles.headerCol} span={12} style={{}}>

                            <Select
                                className='map-header-select'
                                variant='filled'
                                defaultValue="agv"
                                style={{
                                    width: 160,
                                }}
                                size={'large'}
                                onChange={(value, option) => {
                                    console.log(value, option);
                                }}
                                options={[
                                    {
                                        value: 'agv',
                                        label: 'agv',
                                    },
                                    {
                                        value: 'crn',
                                        label: 'crn',
                                    },
                                ]}
                            />
                            <AutoComplete
                                className='map-header-select'
                                variant='filled'
                                style={{
                                    width: 360,
                                }}
                                size={'large'}
                                placeholder="Email"
                                allowClear={{
                                    clearIcon: <CloseOutlined />
                                }}

                                onSearch={() => { }}
                                options={[
                                    {
                                        value: 'text 1',
                                    },
                                    {
                                        value: 'text 2',
                                    },
                                ]}
                            />

                            {dataFetched && (
                                <MapSearch
                                    model={model}
                                    setModel={setModel}
                                    ModelEnum={MapModel}
                                    curSprite={curSprite}
                                    setCurSPrite={setCurSPrite}
                                    setSpriteBySettings={setSpriteBySettings}
                                />
                            )}
                        </Col>
                        {/* 3C40C6 */}
                        <Col span={12} style={{ backgroundColor: '#4a69bd' }}>
                            <Flex className={styles.flex} gap={'large'} justify={'flex-end'} align={'center'}>

                                {model === MapModel.OBSERVER_MODEL && (
                                    <>
                                        <Button
                                            className='map-header-button'
                                            size={'large'}
                                            onClick={async () => {
                                                await Utils.fetchMapData(intl);

                                                player.hideGridlines();
                                                player.hideStarryBackground();

                                                player.activateMapEvent(null);

                                                Utils.removeSelectedEffect();
                                                setCurSPrite(null);
                                                setDeviceVisible(false);
                                                setSettingsVisible(false);
                                                setDrawerVisible(false);

                                                mapContainer.children.forEach(child => {
                                                    Utils.viewFeature(child, setCurSPrite);
                                                })

                                            }}
                                        >
                                            <FormattedMessage id='map.load' defaultMessage='加载地图' />
                                        </Button>
                                    </>
                                )}

                                {model !== MapModel.OBSERVER_MODEL && (
                                    <>
                                        <Button
                                            className='map-header-button'
                                            size={'large'}
                                            onClick={() => {
                                                Utils.clearMapData(intl);
                                            }}
                                        >
                                            <FormattedMessage id='map.clear' defaultMessage='清除地图' />
                                        </Button>
                                        <Button
                                            className='map-header-button'
                                            size={'large'}
                                            onClick={() => {
                                                Utils.saveMapData(intl);
                                            }}
                                        >
                                            <FormattedMessage id='map.save' defaultMessage='保存地图' />
                                        </Button>
                                    </>
                                )}

                                <Select
                                    className='map-header-select'
                                    size={'large'}
@@ -296,8 +346,10 @@
                        >
                            <FloatButton
                                icon={<CompressOutlined />}
                                onClick={() => {
                                    player.adaptScreen();
                                }}
                            />
                            <FloatButton.BackTop visibilityHeight={0} />
                        </FloatButton.Group>

                        <FloatButton.Group
@@ -336,6 +388,16 @@
                </Content>
            </Layout >

            <MapDrawer
                open={drawerVisible}
                curSprite={curSprite}
                refCurr={mapRef.current}
                onCancel={() => {
                    setCurSPrite(null);
                    setDrawerVisible(false);
                }}
            />

            <Edit
                open={deviceVisible}
                onCancel={() => {