From b5a0c724fe1afbcfef4276b50b7121ca08459b17 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期日, 03 三月 2024 13:26:24 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/components/edit.jsx | 137 ++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 128 insertions(+), 9 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/components/edit.jsx b/zy-asrs-flow/src/pages/map/components/edit.jsx
index e83ff62..e757d1b 100644
--- a/zy-asrs-flow/src/pages/map/components/edit.jsx
+++ b/zy-asrs-flow/src/pages/map/components/edit.jsx
@@ -1,11 +1,41 @@
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 [dragSprite, setDragSprite] = useState(null);
@@ -45,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