From 5333624bc0a4162b26cf1915c007ab92abbe7dd3 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 09 十月 2024 12:40:26 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/Device.jsx | 65 +++++++++++++++++++++++++++++++-
1 files changed, 62 insertions(+), 3 deletions(-)
diff --git a/zy-acs-flow/src/map/Device.jsx b/zy-acs-flow/src/map/Device.jsx
index 56a2ebb..0bb2b95 100644
--- a/zy-acs-flow/src/map/Device.jsx
+++ b/zy-acs-flow/src/map/Device.jsx
@@ -1,8 +1,21 @@
import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { Drawer, Box, Typography, Card, IconButton, Stack } from '@mui/material';
+import { Drawer, Box, Typography, Grid, IconButton, Stack } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import * as Common from '@/utils/common';
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
+
+import shelf from '/map/shelf.svg';
+import charge from '/map/charge.svg';
+import direction from '/map/direction.svg';
+
+const items = [
+ { src: shelf, label: 'map.device.type.shelf', type: 'SHELF' },
+ { src: charge, label: 'map.device.type.charge', type: 'CHARGE' },
+ { src: direction, label: 'map.device.type.direction', type: 'DIRECTION' },
+ // { src: point, label: 'map.device.type.point', type: 'POINT' },
+ // { src: agv, label: 'map.device.type.agv', type: 'AGV' },
+ // { src: conveyor, label: 'map.device.type.conveyor', type: 'CONVEYOR' },
+];
const Device = (props) => {
const {
@@ -27,7 +40,7 @@
open={open}
anchor="right"
onClose={handleClose}
- sx={{ zIndex: 100 }}
+ sx={{ zIndex: 100, opacity: .8 }}
>
{open && (
<Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }} sx={{
@@ -40,11 +53,57 @@
<CloseIcon />
</IconButton>
</Stack>
- {children}
+ <DeviceContent />
</Box>
)}
</Drawer>
)
}
+const DeviceContent = (props) => {
+
+ const onDragStart = (e, type) => {
+ // setDragging(true);
+ // setDragSpriteType(type);
+ // 鏍规嵁闇�瑕佸鐞嗘嫋鎷介�昏緫
+ };
+
+ return (
+ <Grid container spacing={2}>
+ {items.map((item, index) => {
+ return (
+ <Grid
+ key={index}
+ item
+ xs={4}
+ onDragStart={(e) => onDragStart(e, item.type)}
+ draggable="true"
+ >
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ p: 2,
+ cursor: 'pointer',
+ border: '1px solid',
+ borderColor: 'divider',
+ '&:hover': {
+ boxShadow: 3,
+ },
+ }}
+ >
+ <img src={item.src} alt={item.label} width="50px" />
+ {/* <Typography variant="body2" sx={{ mt: 1 }}>
+ <FormattedMessage id={item.label} defaultMessage={item.type} />
+ </Typography> */}
+ </Box>
+ </Grid>
+ )
+ })}
+ </Grid>
+ )
+}
+
export default Device;
\ No newline at end of file
--
Gitblit v1.9.1