#

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, notification } 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',
@@ -83,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(() => {
@@ -152,7 +157,7 @@
                player.showGridlines();
                player.hideStarryBackground();

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

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

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

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

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

    // didClickSprite, stop triggers both sprite click and play's selection boxs
    React.useEffect(() => {
@@ -260,7 +269,7 @@
                                />
                            )}
                        </Col>
                        <Col span={12} style={{ backgroundColor: styles.dark ? '#2C3A47' : '#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 && (
@@ -340,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 >