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/i18n/en.js      |    8 ++++
 zy-acs-flow/src/i18n/zh.js      |    8 ++++
 zy-acs-flow/src/map/MapPage.jsx |    2 +
 zy-acs-flow/src/map/Device.jsx  |  101 +++++++++++++++++++++++++++++---------------------
 4 files changed, 77 insertions(+), 42 deletions(-)

diff --git a/zy-acs-flow/src/i18n/en.js b/zy-acs-flow/src/i18n/en.js
index ca63b42..62cf589 100644
--- a/zy-acs-flow/src/i18n/en.js
+++ b/zy-acs-flow/src/i18n/en.js
@@ -619,6 +619,14 @@
                 }
             }
         },
+        map: {
+            devices: {
+                title: 'Icons',
+                shelf: 'SHELF',
+                charge: 'CHARGE',
+                direction: 'DIRECTION',
+            },
+        },
     }
 };
 
diff --git a/zy-acs-flow/src/i18n/zh.js b/zy-acs-flow/src/i18n/zh.js
index e6c259d..1eb23d2 100644
--- a/zy-acs-flow/src/i18n/zh.js
+++ b/zy-acs-flow/src/i18n/zh.js
@@ -618,6 +618,14 @@
                 }
             }
         },
+        map: {
+            devices: {
+                title: '鍥炬爣搴�',
+                shelf: '璐ф灦',
+                charge: '鍏呯數妗�',
+                direction: '鏂瑰悜',
+            },
+        },
     }
 };
 
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>
     )
 }
 
diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 73f9769..01df102 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect, useMemo } from "react";
+import { useTranslate } from "react-admin";
 import {
     TextField,
     Select,
@@ -29,6 +30,7 @@
     const theme = useTheme();
     const themeMode = theme.palette.mode;
     const notify = useNotification();
+    const translate = useTranslate();
 
     const mapRef = useRef();
     const contentRef = useRef();

--
Gitblit v1.9.1