#

luxiaotao1123

2024-03-21 f547e6200ad888ed47dd32ed566c5e2b319507ac

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

@@ -1,7 +1,7 @@
import * as React from 'react'
import * as PIXI from 'pixi.js';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { Layout, Button, Flex, Row, Col, FloatButton, Select, Spin, AutoComplete } from 'antd';
import { Layout, Button, Flex, Row, Col, FloatButton, Select, notification, Segmented } from 'antd';
const { Header, Content } = Layout;
import {
    AppstoreAddOutlined,
@@ -17,6 +17,7 @@
import * as Utils from './utils'
import Player from './player';
import MapSearch from './header/search';
import MapFloor from './header/floor';
import MapDrawer from './drawer';

const useStyles = createStyles(({ token }) => {
@@ -39,7 +40,8 @@
        },
        content: {
            backgroundColor: '#F8FAFB',
            height: 'calc(100vh - 120px)'
            height: 'calc(100vh - 120px)',
            position: 'relative'
        },
        select: {
            color: 'red',
@@ -62,6 +64,7 @@
const Map = () => {
    const intl = useIntl();
    const { initialState, setInitialState } = useModel('@@initialState');
    const [notify, contextHolder] = notification.useNotification();
    const { styles } = useStyles();
    const mapRef = React.useRef();
    const contentRef = React.useRef();
@@ -82,6 +85,9 @@
    const [dataFetched, setDataFetched] = React.useState(false);
    const [curSprite, setCurSPrite] = React.useState(null);
    const prevCurSpriteRef = React.useRef();
    const hasFloor = true;
    // const [hasFloor, setHasFloor] = React.useState(true);
    const [curFloor, setCurFloor] = React.useState(1);

    // init func
    React.useEffect(() => {
@@ -91,6 +97,7 @@
            setMapContainer(player.mapContainer);
            Utils.syncApp(player.app);
            Utils.syncMapContainer(player.mapContainer);
            Utils.syncNotify(notify);

            const handleResize = () => {
                setWindowSize({
@@ -104,6 +111,7 @@
            setModel(MapModel.OBSERVER_MODEL)
            setTimeout(() => {
                player.adaptScreen();
                Utils.mapNotify(intl.formatMessage({ id: 'map.load.success', defaultMessage: '欢迎使用WCS系统' }));
            }, 200)
        }
        initialize();
@@ -127,7 +135,6 @@
        if (!mapContainer && !dataFetched) {
            return;
        }

        switch (model) {
            case MapModel.OBSERVER_MODEL:

@@ -137,6 +144,7 @@
                player.activateMapEvent(null);

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

@@ -149,7 +157,7 @@
                player.showGridlines();
                player.hideStarryBackground();

                player.activateMapEvent(Utils.MapEvent.SELECTION_BOX);
                player.activateMapEvent(Utils.MapEvent.SELECTION_BOX, model);

                Utils.removeSelectedEffect();
                setSpriteBySettings(null);
@@ -165,7 +173,7 @@
                player.showGridlines();
                player.showStarryBackground();

                player.activateMapEvent(null);
                player.activateMapEvent(Utils.MapEvent.SELECTION_BOX, model);

                setDeviceVisible(false);
                setDrawerVisible(false);
@@ -210,6 +218,10 @@
    }, [curSprite]);
    const prevCurSprite = prevCurSpriteRef.current;

    // watch curFloor
    React.useEffect(() => {
    }, [curFloor]);

    // didClickSprite, stop triggers both sprite click and play's selection boxs
    React.useEffect(() => {
        player.updateDidClickSprite(didClickSprite);
@@ -241,6 +253,7 @@

    return (
        <>
            {contextHolder}
            <Layout className={styles.layout}>
                <Header className={styles.header}>
                    <Row style={{ height: '100%' }}>
@@ -256,7 +269,7 @@
                                />
                            )}
                        </Col>
                        <Col span={12} style={{ backgroundColor: '#4a69bd' }}>
                        <Col span={12} style={{ backgroundColor: styles.dark ? '#2f3542' : '#4a69bd' }}>
                            <Flex className={styles.flex} gap={'large'} justify={'flex-end'} align={'center'}>

                                {model === MapModel.OBSERVER_MODEL && (
@@ -264,8 +277,24 @@
                                        <Button
                                            className='map-header-button'
                                            size={'large'}
                                            onClick={() => {
                                                Utils.fetchMapData(intl);
                                            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='加载地图' />
@@ -320,55 +349,62 @@
                    </Row>
                </Header>
                <Content ref={contentRef} className={styles.content}>
                    <div ref={mapRef} style={{ position: "relative" }} >
                        <FloatButton.Group
                            shape="square"
                            style={{
                                left: 35,
                                bottom: 35
                            }}
                        >
                            <FloatButton
                                icon={<CompressOutlined />}
                                onClick={() => {
                                    player.adaptScreen();
                                }}
                            />
                        </FloatButton.Group>
                    <div ref={mapRef} />

                        <FloatButton.Group
                            hidden={model === MapModel.OBSERVER_MODEL}
                            style={{
                                left: 35,
                                bottom: window.innerHeight / 2
                    {hasFloor && (
                        <MapFloor
                            curFloor={curFloor}
                            setCurFloor={setCurFloor}
                        />
                    )}
                    
                    <FloatButton.Group
                        shape="square"
                        style={{
                            left: 35,
                            bottom: 35
                        }}
                    >
                        <FloatButton
                            icon={<CompressOutlined />}
                            onClick={() => {
                                player.adaptScreen();
                            }}
                            icon={<AppstoreAddOutlined />}
                        >
                            <FloatButton
                                hidden={model === MapModel.OBSERVER_MODEL}
                                type={deviceVisible ? 'primary' : 'default'}
                                tooltip={<div><FormattedMessage id='map.device.add' defaultMessage='添加设备' /></div>}
                                icon={<FileAddOutlined />}
                                onClick={() => {
                                    if (deviceVisible) {
                                        setDeviceVisible(false);
                                    } else {
                                        setDeviceVisible(true);
                                        setModel(MapModel.MOVABLE_MODEL);
                                    }
                                }}
                            />
                            <FloatButton
                                hidden={model === MapModel.OBSERVER_MODEL}
                                type={model === MapModel.SETTINGS_MODEL ? 'primary' : 'default'}
                                tooltip={<div><FormattedMessage id='map.device.oper' defaultMessage='参数设置' /></div>}
                                icon={<SettingOutlined />}
                                onClick={() => {
                                    setModel(model === MapModel.SETTINGS_MODEL ? MapModel.MOVABLE_MODEL : MapModel.SETTINGS_MODEL)
                                }}
                            />
                        </FloatButton.Group>
                    </div>
                        />
                    </FloatButton.Group>

                    <FloatButton.Group
                        hidden={model === MapModel.OBSERVER_MODEL}
                        style={{
                            left: 35,
                            bottom: window.innerHeight / 2
                        }}
                        icon={<AppstoreAddOutlined />}
                    >
                        <FloatButton
                            hidden={model === MapModel.OBSERVER_MODEL}
                            type={deviceVisible ? 'primary' : 'default'}
                            tooltip={<div><FormattedMessage id='map.device.add' defaultMessage='添加设备' /></div>}
                            icon={<FileAddOutlined />}
                            onClick={() => {
                                if (deviceVisible) {
                                    setDeviceVisible(false);
                                } else {
                                    setDeviceVisible(true);
                                    setModel(MapModel.MOVABLE_MODEL);
                                }
                            }}
                        />
                        <FloatButton
                            hidden={model === MapModel.OBSERVER_MODEL}
                            type={model === MapModel.SETTINGS_MODEL ? 'primary' : 'default'}
                            tooltip={<div><FormattedMessage id='map.device.oper' defaultMessage='参数设置' /></div>}
                            icon={<SettingOutlined />}
                            onClick={() => {
                                setModel(model === MapModel.SETTINGS_MODEL ? MapModel.MOVABLE_MODEL : MapModel.SETTINGS_MODEL)
                            }}
                        />
                    </FloatButton.Group>
                </Content>
            </Layout >