#

luxiaotao1123

2024-10-09 5333624bc0a4162b26cf1915c007ab92abbe7dd3

#

 zy-acs-flow/public/map/charge.svg

 zy-acs-flow/public/map/code.svg

 zy-acs-flow/public/map/direction.svg

 zy-acs-flow/public/map/shelf.svg

 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;

 zy-acs-flow/src/map/MapPage.jsx

@@ -242,6 +242,7 @@
                    setDeviceVisible(false);
                }}
                onDrop={onDrop}
                width={378}
            />

        </Box>