#

luxiaotao1123

2024-03-13 d0fb2d77c9070d7a55551f13d9cbd83d61a819e0

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

@@ -3,7 +3,7 @@
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import * as PIXI from 'pixi.js';
import { createStyles } from 'antd-style';
import './index.css'
import * as Utils from '../utils'

const useStyles = createStyles(({ token, css }) => {
    let dark = token.colorBgBase === '#000';
@@ -28,35 +28,41 @@
                transition: all 0.3s ease !important;
            }
        `,
        color: dark ? '#303030' : '#f0f0f0'
        color: dark ? '#303030' : '#f0f0f0',
        title: {
            color: dark ? '#f0f0f0' : '#303030'
        }
    };
});

import agv from '/public/img/map/agv.svg'
import shelf from '/public/img/map/shelf.png'
import { Util } from '@antv/g6';

const Device = (props) => {
    const { styles } = useStyles();
    const [dragging, setDragging] = useState(false);
    const [dragSprite, setDragSprite] = useState(null);
    const [dragSpriteType, setDragSpriteType] = useState(null);

    const onDragStart = (e, type) => {
        setDragging(true);
        setDragSpriteType(type);
        const sprite = PIXI.Sprite.from(e.target);
        setDragSprite(sprite);
    };

    useEffect(() => {
        const handleMouseMove = (e) => {
            if (dragging) {
                props.onDrop(dragSprite, e.clientX, e.clientY);
                props.onDrop(dragSprite, dragSpriteType, e.clientX, e.clientY);
                setDragging(false);
                setDragSpriteType(null);
            }
        };
        window.addEventListener('mousemove', handleMouseMove);
        return () => window.removeEventListener('mousemove', handleMouseMove);
    }, [dragging, props.onDrop, props.onCancel]);

    const onDragStart = (e) => {
        setDragging(true)
        props.onCancel();
        const sprite = PIXI.Sprite.from(agv);
        sprite.anchor.set(0.5);
        setDragSprite(sprite);
    };

    return (
        <>
@@ -75,104 +81,102 @@
                    </Space>
                }
            >
                <Card className={styles.mapCard}>
                    <Row className={styles.mapRow}>
                        <Col className={styles.mapCol} span={8} >
                            <Image
                                src={agv}
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                            />
                            <div>AGV</div>
                        </Col>
                        <Col className={styles.mapCol} span={8} >
                            <Image
                                src={agv}
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                            />
                            <div>AGV</div>
                        </Col>
                        <Col className={styles.mapCol} span={8} >
                            <Image
                                src={agv}
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                            />
                            <div>AGV</div>
                        </Col>
                    </Row>
                    <Row className={styles.mapRow}>
                        <Col className={styles.mapCol} span={8} >
                            <Image
                                src={agv}
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                            />
                            <div>AGV</div>
                        </Col>
                        <Col className={styles.mapCol} span={8} >
                            <Image
                                src={agv}
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                            />
                            <div>AGV</div>
                        </Col>
                        <Col className={styles.mapCol} span={8} >
                            <Image
                                src={agv}
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                            />
                            <div>AGV</div>
                        </Col>
                    </Row>
                    <Row className={styles.mapRow}>
                        <Col className={styles.mapCol} span={8} >
                            <Image
                                src={agv}
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                            />
                            <div>AGV</div>
                        </Col>
                        <Col className={styles.mapCol} span={8} >
                            <Image
                                src={agv}
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                            />
                            <div>AGV</div>
                        </Col>
                        <Col className={styles.mapCol} span={8} >
                            <Image
                                src={agv}
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                            />
                            <div>AGV</div>
                        </Col>
                    </Row>
                </Card>
                <Row className={styles.mapRow}>
                    <Col className={styles.mapCol} span={8} >
                        <Image
                            src={agv}
                            width='50px'
                            preview={false}
                            draggable="true"
                            onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.AGV)}
                        />
                        <div className={styles.title}>AGV</div>
                    </Col>
                    <Col className={styles.mapCol} span={8} >
                        <Image
                            src={shelf}
                            width='35px'
                            preview={false}
                            draggable="true"
                            onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.SHELF)}
                        />
                        <div className={styles.title}>SHELF</div>
                    </Col>
                    <Col className={styles.mapCol} span={8} >
                        <Image
                            src={agv}
                            width='50px'
                            preview={false}
                            draggable="true"
                            onDragStart={(e) => onDragStart(e, 'AGV')}
                        />
                        <div>AGV</div>
                    </Col>
                </Row>
                <Row className={styles.mapRow}>
                    <Col className={styles.mapCol} span={8} >
                        <Image
                            src={agv}
                            width='50px'
                            preview={false}
                            draggable="true"
                            onDragStart={(e) => onDragStart(e, 'AGV')}
                        />
                        <div>AGV</div>
                    </Col>
                    <Col className={styles.mapCol} span={8} >
                        <Image
                            src={agv}
                            width='50px'
                            preview={false}
                            draggable="true"
                            onDragStart={(e) => onDragStart(e, 'AGV')}
                        />
                        <div>AGV</div>
                    </Col>
                    <Col className={styles.mapCol} span={8} >
                        <Image
                            src={agv}
                            width='50px'
                            preview={false}
                            draggable="true"
                            onDragStart={(e) => onDragStart(e, 'AGV')}
                        />
                        <div>AGV</div>
                    </Col>
                </Row>
                <Row className={styles.mapRow}>
                    <Col className={styles.mapCol} span={8} >
                        <Image
                            src={agv}
                            width='50px'
                            preview={false}
                            draggable="true"
                            onDragStart={(e) => onDragStart(e, 'AGV')}
                        />
                        <div>AGV</div>
                    </Col>
                    <Col className={styles.mapCol} span={8} >
                        <Image
                            src={agv}
                            width='50px'
                            preview={false}
                            draggable="true"
                            onDragStart={(e) => onDragStart(e, 'AGV')}
                        />
                        <div>AGV</div>
                    </Col>
                    <Col className={styles.mapCol} span={8} >
                        <Image
                            src={agv}
                            width='50px'
                            preview={false}
                            draggable="true"
                            onDragStart={(e) => onDragStart(e, 'AGV')}
                        />
                        <div>AGV</div>
                    </Col>
                </Row>
            </Drawer>
        </>
    )