#

luxiaotao1123

2024-10-09 ffbe884e10222d441bf21c397730e93e00dbae38

#

 zy-acs-flow/src/i18n/en.js

@@ -619,6 +619,14 @@
                }
            }
        },
        map: {
            devices: {
                title: 'Icons',
                shelf: 'SHELF',
                charge: 'CHARGE',
                direction: 'DIRECTION',
            },
        },
    }
};


 zy-acs-flow/src/i18n/zh.js

@@ -618,6 +618,14 @@
                }
            }
        },
        map: {
            devices: {
                title: '图标库',
                shelf: '货架',
                charge: '充电桩',
                direction: '方向',
            },
        },
    }
};


 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>
    )
}


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