From ffbe884e10222d441bf21c397730e93e00dbae38 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 09 十月 2024 12:58:01 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/Device.jsx | 101 +++++++++++++++++++++++++++++---------------------
1 files changed, 59 insertions(+), 42 deletions(-)
diff --git a/zy-acs-flow/src/map/Device.jsx b/zy-acs-flow/src/map/Device.jsx
index 0bb2b95..207953e 100644
--- a/zy-acs-flow/src/map/Device.jsx
+++ b/zy-acs-flow/src/map/Device.jsx
@@ -1,5 +1,6 @@
import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { Drawer, Box, Typography, Grid, IconButton, Stack } from '@mui/material';
+import { useTranslate } from "react-admin";
+import { Drawer, Box, Typography, Grid, IconButton, Stack, useTheme } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import * as Common from '@/utils/common';
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
@@ -9,23 +10,22 @@
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' },
+ { src: shelf, label: 'page.map.devices.shelf', type: 'SHELF', scale: 1 },
+ { src: charge, label: 'page.map.devices.charge', type: 'CHARGE', scale: .7 },
+ { src: direction, label: 'page.map.devices.direction', type: 'DIRECTION', scale: 1 },
];
const Device = (props) => {
const {
- title = 'Drawer',
+ title,
open,
onCancel,
closeCallback,
width = PAGE_DRAWER_WIDTH,
children
} = props;
+
+ const translate = useTranslate();
const handleClose = () => {
onCancel();
@@ -47,7 +47,7 @@
}}>
<Stack direction="row" p={2}>
<Typography variant="h6" flex="1">
- {title}
+ {title || translate('page.map.devices.title')}
</Typography>
<IconButton onClick={handleClose} size="small">
<CloseIcon />
@@ -61,6 +61,9 @@
}
const DeviceContent = (props) => {
+ const theme = useTheme();
+ const themeMode = theme.palette.mode;
+ const translate = useTranslate();
const onDragStart = (e, type) => {
// setDragging(true);
@@ -69,40 +72,54 @@
};
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,
- },
- }}
+ <Box p={3}>
+ <Grid container spacing={0} sx={{
+ borderTop: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
+ borderLeft: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
+ }}>
+ {items.map((item, index) => {
+ return (
+ <Grid
+ key={index}
+ item
+ xs={4}
+ onDragStart={(e) => onDragStart(e, item.type)}
+ draggable="true"
>
- <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>
+ <Box
+ sx={{
+ height: '100px',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ p: 2,
+ cursor: 'pointer',
+ borderRight: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
+ borderBottom: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
+ borderColor: 'divider',
+ '&:hover': {
+ boxShadow: themeMode === 'light' ? '0px 5px 5px rgba(0, 0, 0, 0.15)' : '0px 5px 5px rgba(63, 63, 63, 0.8)',
+ transition: 'all 0.3s ease !important',
+ },
+ }}
+ >
+ <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '70%' }}>
+ <img src={item.src} alt={item.label} width="50px" style={{
+ transform: `scale(${item.scale || 1})`,
+ }} />
+ </Box>
+ <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30%' }}>
+ <Typography variant="body2" sx={{ mt: 2.5, textAlign: 'center' }}>
+ {translate(item.label)}
+ </Typography>
+ </Box>
+ </Box>
+ </Grid>
+ )
+ })}
+ </Grid>
+ </Box>
)
}
--
Gitblit v1.9.1