luxiaotao1123
2024-04-08 9d0acfb65c80c4948c305ca01338f894b87346a0
zy-asrs-flow/src/pages/map/components/mapSettings.jsx
@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from 'react';
import { Col, Form, Input, Row, Checkbox, Slider, Select, Drawer, Space, Button, InputNumber, Card } from 'antd';
import { Col, Form, Input, Row, message, Slider, Select, Drawer, Space, Button, InputNumber, Card } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { createStyles } from 'antd-style';
import * as Utils from '../utils'
@@ -99,6 +99,70 @@
        setLastCopiedSprites([]);
        for (let i = 0; i < values.copyCount; i++) {
            const copiedSprite = Utils.copySprite(curSprite);
            // auto-increment-value
            if (values.autoIncrement && values.type) {
                switch (values.type) {
                    case Utils.SENSOR_TYPE.SHELF:
                        if (values.incrementValue === 'row') {
                            if (values.incrementMode === 'descending') {
                                copiedSprite.data.row = curSprite.data.row - i - 1;
                            } else {
                                copiedSprite.data.row = curSprite.data.row + i + 1;
                            }
                        }
                        if (values.incrementValue === 'bay') {
                            if (values.incrementMode === 'descending') {
                                copiedSprite.data.bay = curSprite.data.bay - i - 1;
                            } else {
                                copiedSprite.data.bay = curSprite.data.bay + i + 1;
                            }
                        }
                        if (copiedSprite.data.row && copiedSprite.data.bay) {
                            copiedSprite.data.no = Utils.pureNumStr(copiedSprite.data.row) + '-' + Utils.pureNumStr(copiedSprite.data.bay);
                        }
                        break;
                    case Utils.SENSOR_TYPE.POINT:
                        if (values.incrementValue === 'vertical') {
                            if (values.incrementMode === 'descending') {
                                copiedSprite.data.vertical = curSprite.data.vertical - i - 1;
                            } else {
                                copiedSprite.data.vertical = curSprite.data.vertical + i + 1;
                            }
                        }
                        if (values.incrementValue === 'horizontal') {
                            if (values.incrementMode === 'descending') {
                                copiedSprite.data.horizontal = curSprite.data.horizontal - i - 1;
                            } else {
                                copiedSprite.data.horizontal = curSprite.data.horizontal + i + 1;
                            }
                        }
                        if (copiedSprite.data.vertical && copiedSprite.data.horizontal) {
                            copiedSprite.data.no = Utils.pureNumStr(copiedSprite.data.vertical) + '-' + Utils.pureNumStr(copiedSprite.data.horizontal);
                        }
                        break;
                    case Utils.SENSOR_TYPE.SHUTTLE:
                        if (values.incrementValue === 'no') {
                            if (values.incrementMode === 'descending') {
                                copiedSprite.data.no = Number(curSprite.data.no) - i - 1;
                            } else {
                                copiedSprite.data.no = Number(curSprite.data.no) + i + 1;
                            }
                        }
                        break;
                    case Utils.SENSOR_TYPE.AGV:
                        if (values.incrementValue === 'no') {
                            if (values.incrementMode === 'descending') {
                                copiedSprite.data.no = Number(curSprite.data.no) - i - 1;
                            } else {
                                copiedSprite.data.no = Number(curSprite.data.no) + i + 1;
                            }
                        }
                        break;
                    default:
                        break;
                }
            }
            // graph copy
            switch (values.copyDire) {
                case 'left':
                    copiedSprite.position.x -= (i + 1) * (values.copyGap + copiedSprite.width);
@@ -116,7 +180,7 @@
                    break;
            }
            Utils.getMapContainer().addChild(copiedSprite);
            Utils.beSettings(copiedSprite, props.setSpriteBySettings, props.setDidClickSprite);
            Utils.beSettings(copiedSprite, props.setSpriteBySettings);
            setLastCopiedSprites(prevArr => [...prevArr, copiedSprite]);
        }
@@ -128,8 +192,6 @@
            <Form
                form={form}
                onFieldsChange={formValuesChange}
                initialValues={{
                }}
                onFinish={handleFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
@@ -141,260 +203,242 @@
                labelWrap   // label 换行
                disabled={false}
                layout='horizontal'
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 20,
                }}
                initialValues={{
                    scale: 1,
                    rotation: 1
                }}
            >
                <Row gutter={[24, 16]}>
                    <Col span={24} />
                    <Col span={24}>
                        <Row gutter={24}>
                            <Col span={18}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.component', defaultMessage: '组件' })}
                                    labelCol={{ span: 4 }}
                                >
                                    <span>{curSprite?.data?.type}-{curSprite?.data?.uuid}</span>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Form.Item
                            label={intl.formatMessage({ id: 'map.settings.component', defaultMessage: '组件' })}
                        >
                            <span>{curSprite?.data?.type}-{curSprite?.data?.uuid}</span>
                        </Form.Item>
                    </Col>
                    {/* position */}
                    <Col span={24}>
                        <Row gutter={24}>
                            <Col span={18}>
                        <Form.Item
                            label={intl.formatMessage({ id: 'map.settings.position', defaultMessage: '坐标' })}
                        >
                            <Space.Compact>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.position', defaultMessage: '坐标' })}
                                    labelCol={{ span: 4 }}
                                    name='x'
                                    noStyle
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Space.Compact>
                                        <Form.Item
                                            name='x'
                                            noStyle
                                            rules={[
                                                {
                                                    required: true,
                                                },
                                            ]}
                                        >
                                            <InputNumber
                                                addonBefore={<Space.Compact>x</Space.Compact>}
                                                style={{
                                                    width: '50%',
                                                }}
                                            />
                                        </Form.Item>
                                        <Form.Item
                                            name='y'
                                            noStyle
                                            rules={[
                                                {
                                                    required: true,
                                                },
                                            ]}
                                        >
                                            <InputNumber
                                                addonBefore={<Space.Compact>y</Space.Compact>}
                                                style={{
                                                    width: '50%',
                                                }}
                                            />
                                        </Form.Item>
                                    </Space.Compact>
                                    <InputNumber
                                        addonBefore={<Space.Compact>x</Space.Compact>}
                                        style={{
                                            width: '50%',
                                        }}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>
                                <Form.Item
                                    name='y'
                                    noStyle
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <InputNumber
                                        addonBefore={<Space.Compact>y</Space.Compact>}
                                        style={{
                                            width: '50%',
                                        }}
                                    />
                                </Form.Item>
                            </Space.Compact>
                        </Form.Item>
                    </Col>
                    {/* scale */}
                    <Col span={24}>
                        <Row gutter={24}>
                            <Col span={18}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.scale', defaultMessage: '缩放' })}
                                    name="scaleSlider"
                                    labelCol={{ span: 4 }}
                                >
                                    <Slider
                                        min={0.1}
                                        max={10}
                                        step={0.1}
                                        marks={{
                                            0.1: '0.1',
                                            1: '1',
                                            10: '10',
                                        }}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item
                                    name="scale"
                                    labelCol={{ span: 4 }}
                                >
                                    <InputNumber
                                        changeOnWheel
                                        min={0.1} max={10} defaultValue={1} step={0.1}
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>
                    <Col span={18}>
                        <Form.Item
                            name="scaleSlider"
                            label={intl.formatMessage({ id: 'map.settings.scale', defaultMessage: '缩放' })}
                            labelCol={{ span: 5 }}
                        >
                            <Slider
                                min={0.1}
                                max={10}
                                step={0.1}
                                marks={{
                                    0.1: '0.1',
                                    1: '1',
                                    10: '10',
                                }}
                                style={{
                                    width: '100%'
                                }}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            name="scale"
                        >
                            <InputNumber
                                min={0.1} max={10} step={0.1}
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            />
                        </Form.Item>
                    </Col>
                    {/* rotation */}
                    <Col span={24}>
                        <Row gutter={24}>
                            <Col span={18}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.rotation', defaultMessage: '角度' })}
                                    name="rotationSlider"
                                    labelCol={{ span: 4 }}
                                >
                                    <Slider
                                        min={0}
                                        max={360}
                                        step={1}
                                        marks={{
                                            0: '0°',
                                            90: '90°',
                                            180: '180°',
                                            270: '270°',
                                            360: '360°',
                                        }}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item
                                    name="rotation"
                                    labelCol={{ span: 4 }}
                                >
                                    <InputNumber
                                        changeOnWheel
                                        min={0} max={360} defaultValue={0}
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>
                    <Col span={18}>
                        <Form.Item
                            name="rotationSlider"
                            label={intl.formatMessage({ id: 'map.settings.rotation', defaultMessage: '角度' })}
                            labelCol={{ span: 5 }}
                        >
                            <Slider
                                min={0}
                                max={360}
                                step={1}
                                marks={{
                                    0: '0°',
                                    90: '90°',
                                    180: '180°',
                                    270: '270°',
                                    360: '360°',
                                }}
                                style={{
                                    width: '100%'
                                }}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            name="rotation"
                        >
                            <InputNumber
                                min={0} max={360}
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            />
                        </Form.Item>
                    </Col>
                    {/* copy */}
                    <Col span={24}>
                        <Row gutter={0}>
                            <Col span={20}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.copy', defaultMessage: '复制' })}
                                    labelCol={{ span: 4 }}
                                >
                                    <Space.Compact>
                                        <Form.Item
                                            noStyle
                                            name="copyDire"
                                        >
                                            <Select
                                                style={{ width: 100 }}
                                                options={[
                                                    { value: 'left', label: intl.formatMessage({ id: 'map.settings.left', defaultMessage: '左' }) },
                                                    { value: 'right', label: intl.formatMessage({ id: 'map.settings.right', defaultMessage: '右' }) },
                                                    { value: 'top', label: intl.formatMessage({ id: 'map.settings.top', defaultMessage: '上' }) },
                                                    { value: 'bottom', label: intl.formatMessage({ id: 'map.settings.bottom', defaultMessage: '下' }) },
                                                ]}
                                            />
                                        </Form.Item>
                                        <Form.Item
                                            name='copyCount'
                                            noStyle
                                            rules={[
                                                {
                                                    required: true,
                                                },
                                            ]}
                                        >
                                            <InputNumber
                                                addonBefore={<Space.Compact></Space.Compact>}
                                                style={{
                                                    width: '50%',
                                                }}
                                                min={1}
                                                step={1}
                                            />
                                        </Form.Item>
                                        <Form.Item>
                                            <Button
                                                onClick={() => {
                                                    setChildrenDrawer(true);
                                                }}
                                            >
                                                <FormattedMessage id='common.execute' defaultMessage='执行' />
                                            </Button>
                                            <MapCopySettings
                                                open={childrenDrawer}
                                                refCurr={props.refCurr}
                                                curSprite={props.curSprite}
                                                values={form.getFieldsValue()}
                                                submit={handleOnCopy}
                                                onClose={() => {
                                                    setChildrenDrawer(false)
                                                }}
                                            />
                                        </Form.Item>
                                    </Space.Compact>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={0}>
                            <Col offset={16} span={8}>
                                <Form.Item>
                                    <Button
                                        type="dashed"
                                        onClick={() => {
                                            if (lastCopiedSprites) {
                                                lastCopiedSprites.forEach(copiedSprite => {
                                                    Utils.getMapContainer().removeChild(copiedSprite);
                                                })
                                                setLastCopiedSprites([]);
                                            }
                                        }}
                            <Form.Item
                                label={intl.formatMessage({ id: 'map.settings.copy', defaultMessage: '复制' })}
                            >
                                <Space.Compact>
                                    <Form.Item
                                        noStyle
                                        name="copyDire"
                                    >
                                        <FormattedMessage id='map.settings.sub.copy.undo.last.copies' defaultMessage='撤回复制' />
                                    </Button>
                                </Form.Item>
                            </Col>
                                        <Select
                                            style={{ width: 100 }}
                                            options={[
                                                { value: 'left', label: intl.formatMessage({ id: 'map.settings.left', defaultMessage: '左' }) },
                                                { value: 'right', label: intl.formatMessage({ id: 'map.settings.right', defaultMessage: '右' }) },
                                                { value: 'top', label: intl.formatMessage({ id: 'map.settings.top', defaultMessage: '上' }) },
                                                { value: 'bottom', label: intl.formatMessage({ id: 'map.settings.bottom', defaultMessage: '下' }) },
                                            ]}
                                        />
                                    </Form.Item>
                                    <Form.Item
                                        name='copyCount'
                                        noStyle
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <InputNumber
                                            addonBefore={<Space.Compact></Space.Compact>}
                                            style={{
                                                width: '50%',
                                            }}
                                            min={1}
                                            step={1}
                                        />
                                    </Form.Item>
                                    <Form.Item>
                                        <Button
                                            onClick={() => {
                                                setChildrenDrawer(true);
                                            }}
                                        >
                                            <FormattedMessage id='common.execute' defaultMessage='执行' />
                                        </Button>
                                        <MapCopySettings
                                            open={childrenDrawer}
                                            refCurr={props.refCurr}
                                            curSprite={props.curSprite}
                                            values={form.getFieldsValue()}
                                            submit={handleOnCopy}
                                            onClose={() => {
                                                setChildrenDrawer(false)
                                            }}
                                        />
                                    </Form.Item>
                                    <Form.Item>
                                        <Button
                                            type="link"
                                            onClick={() => {
                                                if (lastCopiedSprites) {
                                                    lastCopiedSprites.forEach(copiedSprite => {
                                                        Utils.getMapContainer().removeChild(copiedSprite);
                                                    })
                                                    setLastCopiedSprites([]);
                                                }
                                            }}
                                        >
                                            <FormattedMessage id='map.settings.sub.copy.reverse' defaultMessage='撤销' />
                                        </Button>
                                    </Form.Item>
                                </Space.Compact>
                            </Form.Item>
                        </Row>
                    </Col>
                    {/* more */}
                    <Col span={24}>
                        <Row gutter={24}>
                            <Col span={18}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.more', defaultMessage: '更多' })}
                                    labelCol={{ span: 4 }}
                                >
                                    <Button
                                        type="dashed"
                                        danger
                                        onClick={() => {
                                            Utils.getMapContainer().removeChild(curSprite);
                                            props.setSpriteBySettings(null);
                                            Utils.removeSelectedEffect();
                                            form.resetFields();
                                        }}
                                    >
                                        <FormattedMessage id='map.settings.delete' defaultMessage='删除' />
                                    </Button>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Form.Item
                            label={intl.formatMessage({ id: 'map.settings.more', defaultMessage: '更多' })}
                        >
                            <Button
                                type="dashed"
                                danger
                                onClick={() => {
                                    Utils.getMapContainer().removeChild(curSprite);
                                    props.setSpriteBySettings(null);
                                    Utils.removeSelectedEffect();
                                    form.resetFields();
                                }}
                            >
                                <FormattedMessage id='map.settings.delete' defaultMessage='删除' />
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>