#

luxiaotao1123

2024-03-04 8822c17c8f7ff9c5b1f0657814e4968f98520a4f

#

 zy-asrs-flow/src/locales/en-US/map.ts

@@ -2,7 +2,7 @@
    'map.edit': 'Edit Model',
    'map.edit.close': 'Exit Edit',
    'map.device.add': 'Add New Device',
    '': '',
    'map.device.oper': 'Param Settings',
    '': '',
    '': '',
    '': '',

 zy-asrs-flow/src/pages/map/components/settings.jsx

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

@@ -7,6 +7,7 @@
    AppstoreAddOutlined,
    FileAddOutlined,
    CompressOutlined,
    SettingOutlined,
} from '@ant-design/icons';
import './index.css'
import { createStyles } from 'antd-style';
@@ -55,7 +56,9 @@
    const [app, setApp] = React.useState(null);
    const [mapContainer, setMapContainer] = React.useState(null);
    const [mapEditModel, setMapEditModel] = React.useState(false);
    const [deviceSettingModel, setDeviceSettingModel] = React.useState(false);

    // init func
    React.useEffect(() => {
        player = new Player(mapRef.current, styles.dark);
        setApp(player.app);
@@ -72,6 +75,7 @@
        window.addEventListener('resize', handleResize);
    }, []);

    // resize
    React.useEffect(() => {
        if (!app) {
            return;
@@ -81,17 +85,39 @@
        app.renderer.resize(width, height);
    }, [app, mapContainer, windowSize])

    // Edit Model
    React.useEffect(() => {
        if (!mapContainer) {
            return;
        }
        if (mapEditModel) {
            player.showGridlines();
            mapContainer.children.forEach(child => {
                Utils.beMovable(child);
            })
        } else {
            player.hideGridlines();
            mapContainer.children.forEach(child => {
                child.off('pointerup');
                child.off('pointerdown');
                child.off('click');
            })
        }
    }, [mapEditModel]);

    // Settings Model
    React.useEffect(() => {
        if (!mapContainer) {
            return;
        }
        if (deviceSettingModel) {

        } else {
        
        }
    }, [deviceSettingModel]);

    // Add New Device
    const onDrop = (sprite, x, y) => {
        const { mapX, mapY } = Utils.getRealPosition(x, y, mapContainer);
        sprite.x = mapX;
@@ -152,6 +178,13 @@
                                setDeviceVisible(true);
                            }}
                        />
                        <FloatButton
                            tooltip={<div><FormattedMessage id='map.device.oper' defaultMessage='参数设置' /></div>}
                            icon={<SettingOutlined />}
                            onClick={() => {
                                setDeviceSettingModel(true);
                            }}
                        />
                    </FloatButton.Group>
                </Content>
            </Layout>