|  |  | 
 |  |  | 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); | 
 |  |  |  | 
 |  |  | 
 |  |  |                     </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> | 
 |  |  |         </> |