From 2ec11cf252a1d9ba5aea1c1b32615237ea3603b1 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期日, 03 三月 2024 16:18:05 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/components/edit.jsx | 148 +++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 135 insertions(+), 13 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/components/edit.jsx b/zy-asrs-flow/src/pages/map/components/edit.jsx
index aea4a97..e757d1b 100644
--- a/zy-asrs-flow/src/pages/map/components/edit.jsx
+++ b/zy-asrs-flow/src/pages/map/components/edit.jsx
@@ -1,20 +1,49 @@
import React, { useState, useRef, useEffect } from 'react';
-import { Col, Form, Modal, Row, Checkbox, Image, Tree, Drawer, Space, Button, Card } from 'antd';
+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 Edit = (props) => {
+ const { styles } = useStyles();
const [dragging, setDragging] = useState(false);
- const [dragImage, setDragImage] = useState(null);
-
+ const [dragSprite, setDragSprite] = useState(null);
+
useEffect(() => {
const handleMouseMove = (e) => {
if (dragging) {
- props.onDrop(e.clientX, e.clientY);
+ props.onDrop(dragSprite, e.clientX, e.clientY);
setDragging(false);
- props.onCancel();
}
};
window.addEventListener('mousemove', handleMouseMove);
@@ -23,6 +52,10 @@
const onDragStart = (e) => {
setDragging(true)
+ props.onCancel();
+ const sprite = PIXI.Sprite.from(agv);
+ sprite.anchor.set(0.5);
+ setDragSprite(sprite);
};
return (
@@ -42,14 +75,103 @@
</Space>
}
>
- <Card>
- <Image
- src={agv}
- width='50px'
- preview={false}
- draggable="true"
- onDragStart={onDragStart}
- />
+ <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>
</>
--
Gitblit v1.9.1