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 './index.css'
|
|
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'
|
};
|
});
|
|
import agv from '/public/img/map/agv.svg'
|
|
const Device = (props) => {
|
const { styles } = useStyles();
|
const [dragging, setDragging] = useState(false);
|
const [dragSprite, setDragSprite] = useState(null);
|
|
useEffect(() => {
|
const handleMouseMove = (e) => {
|
if (dragging) {
|
props.onDrop(dragSprite, e.clientX, e.clientY);
|
setDragging(false);
|
}
|
};
|
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);
|
setDragSprite(sprite);
|
};
|
|
return (
|
<>
|
<Drawer
|
open={props.open}
|
onClose={() => {
|
props.onCancel();
|
}}
|
getContainer={props.refCurr}
|
rootStyle={{ position: "absolute" }}
|
mask={false}
|
width={378}
|
extra={
|
<Space>
|
<Button onClick={() => props.onCancel()}><FormattedMessage id='common.cancel' defaultMessage='取消' /></Button>
|
</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>
|
</Drawer>
|
</>
|
)
|
}
|
|
export default Device;
|
