import React, { useState, useRef, useEffect } from 'react';
|
import { Col, Form, Modal, Row, Checkbox, Image, Tree, Drawer, Space, Button, Card, Divider } from 'antd';
|
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
|
import * as PIXI from 'pixi.js';
|
import { createStyles } from 'antd-style';
|
import * as Utils from '../utils'
|
|
const useStyles = createStyles(({ token, css }) => {
|
let dark = token.colorBgBase === '#000';
|
return {
|
mapCard: {
|
},
|
mapRow: {
|
},
|
mapCol: css`
|
height: 100px;
|
cursor: pointer;
|
border-right: 1px solid ${dark ? '#303030' : '#f0f0f0'};
|
border-bottom: 1px solid ${dark ? '#303030' : '#f0f0f0'};
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-direction: column;
|
gap: 5px;
|
padding: 20px 0;
|
&:hover {
|
box-shadow: ${dark ? '0px 5px 15px rgba(63, 63, 63, 0.8)' : '0px 5px 15px rgba(0, 0, 0, 0.15)'} ;
|
transition: all 0.3s ease !important;
|
}
|
`,
|
color: dark ? '#303030' : '#f0f0f0',
|
title: {
|
color: dark ? '#f0f0f0' : '#303030'
|
}
|
};
|
});
|
|
import shuttle from '/public/img/map/shuttle.svg'
|
import agv from '/public/img/map/agv.svg'
|
import shelf from '/public/img/map/shelf.png'
|
import conveyor from '/public/img/map/conveyor.png'
|
import point from '/public/img/map/point.svg'
|
|
const Device = (props) => {
|
const intl = useIntl();
|
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 = Utils.generateSprite(type);
|
setDragSprite(sprite);
|
};
|
|
useEffect(() => {
|
const handleMouseMove = (e) => {
|
if (dragging) {
|
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]);
|
|
return (
|
<>
|
<Drawer
|
open={props.open}
|
onClose={() => {
|
props.onCancel();
|
}}
|
getContainer={props.refCurr}
|
rootStyle={{ position: "absolute" }}
|
mask={false}
|
width={378}
|
style={{
|
opacity: .8
|
}}
|
extra={
|
<Space>
|
<Button onClick={() => props.onCancel()}><FormattedMessage id='common.cancel' defaultMessage='取消' /></Button>
|
</Space>
|
}
|
>
|
<Row className={styles.mapRow}>
|
<Col className={styles.mapCol} span={8} >
|
<Image
|
src={shuttle}
|
width='50px'
|
preview={false}
|
draggable="true"
|
onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.SHUTTLE)}
|
/>
|
<div className={styles.title}>
|
<FormattedMessage id='map.sensor.type.shuttle' defaultMessage='穿梭车' />
|
</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}>
|
<FormattedMessage id='map.sensor.type.shelf' defaultMessage='货架' />
|
</div>
|
</Col>
|
<Col className={styles.mapCol} span={8}>
|
<Image
|
src={point}
|
style={{
|
}}
|
width='50px'
|
preview={false}
|
draggable="true"
|
onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.POINT)}
|
/>
|
<div className={styles.title}>
|
<FormattedMessage id='map.sensor.type.point' defaultMessage='定位点' />
|
</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, Utils.SENSOR_TYPE.AGV)}
|
/>
|
<div className={styles.title}>
|
<FormattedMessage id='map.sensor.type.agv' defaultMessage='无人小车' />
|
</div>
|
</Col>
|
<Col className={styles.mapCol} span={8} >
|
<Image
|
src={conveyor}
|
width='35px'
|
preview={false}
|
draggable="true"
|
onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.CONVEYOR)}
|
/>
|
<div className={styles.title}>
|
<FormattedMessage id='map.sensor.type.conveyor' defaultMessage='输送线' />
|
</div>
|
</Col>
|
<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}>
|
<FormattedMessage id='map.sensor.type.agv' defaultMessage='无人小车' />
|
</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, Utils.SENSOR_TYPE.AGV)}
|
/>
|
<div className={styles.title}>
|
<FormattedMessage id='map.sensor.type.agv' defaultMessage='无人小车' />
|
</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}>
|
<FormattedMessage id='map.sensor.type.shelf' defaultMessage='货架' />
|
</div>
|
</Col>
|
<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}>
|
<FormattedMessage id='map.sensor.type.agv' defaultMessage='无人小车' />
|
</div>
|
</Col>
|
</Row>
|
</Drawer>
|
</>
|
)
|
}
|
|
export default Device;
|
