#

luxiaotao1123

2024-10-09 62774ce5aa3f92f8aae12fb38fe773fd63bceb2a

#

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

@@ -4,6 +4,7 @@
import CloseIcon from '@mui/icons-material/Close';
import * as Common from '@/utils/common';
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
import * as Tool from './tool';

import shelf from '/map/shelf.svg';
import charge from '/map/charge.svg';
@@ -24,8 +25,13 @@
        width = PAGE_DRAWER_WIDTH,
        children
    } = props;

    const theme = useTheme();
    const themeMode = theme.palette.mode;
    const translate = useTranslate();

    const [dragging, setDragging] = useState(false);
    const [dragSprite, setDragSprite] = useState(null);
    const [dragSpriteType, setDragSpriteType] = useState(null);

    const handleClose = () => {
        onCancel();
@@ -33,6 +39,26 @@
            closeCallback();
        }
    }

    const onDragStart = (e, type) => {
        setDragging(true);
        const sprite = Tool.generateSprite(type);
        setDragSprite(sprite);
        setDragSpriteType(type);
    };

    useEffect(() => {
        const handleMouseMove = (e) => {
            if (dragging) {
                props.onDrop(dragSprite, dragSpriteType, e.clientX, e.clientY);
                setDragging(false);
                setDragSpriteType(null);
            }
        };
        window.addEventListener('mousemove', handleMouseMove);
        return () => window.removeEventListener('mousemove', handleMouseMove);
    }, [dragging, props.onDrop, props.onCancel]);


    return (
        <Drawer
@@ -53,73 +79,57 @@
                            <CloseIcon />
                        </IconButton>
                    </Stack>
                    <DeviceContent />
                    <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"
                                    >
                                        <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>
                </Box>
            )}
        </Drawer>
    )
}

const DeviceContent = (props) => {
    const theme = useTheme();
    const themeMode = theme.palette.mode;
    const translate = useTranslate();

    const onDragStart = (e, type) => {
        // setDragging(true);
        // setDragSpriteType(type);
        // 根据需要处理拖拽逻辑
    };

    return (
        <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"
                        >
                            <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

@@ -95,6 +95,8 @@
    }, [mode]);

    const onDrop = (sprite, type, x, y) => {
        console.log(sprite, type, x, y);

        const { mapX, mapY } = Tool.getRealPosition(x, y);
        sprite.x = mapX;
        sprite.y = mapY;
@@ -168,7 +170,7 @@
                            sx={{ mr: 1 }}
                            onClick={() => setDeviceVisible(!deviceVisible)}
                        >
                            添加模型
                            {translate('page.map.devices.title')}
                        </Button>
                    </>
                )}

 zy-acs-flow/src/map/constants.js

New file
@@ -0,0 +1,17 @@


export const DEVICE_TYPE = Object.freeze({
    SHELF: "SHELF",
    AGV: "AGV",
    CHARGE: 'CHARGE',
    DIRECTION: 'DIRECTION',
    POINT: "POINT",
})

export const DEVICE_Z_INDEX = Object.freeze({
    SHELF: 1,
    AGV: 1,
    CHARGE: 1,
    DIRECTION: 1,
    POINT: 1
})

 zy-acs-flow/src/map/tool.js

@@ -1,5 +1,13 @@
import * as PIXI from 'pixi.js';
import * as TWEEDLE from 'tweedle.js';
import {
    DEVICE_TYPE,
    DEVICE_Z_INDEX,
} from './constants';

import shelf from '/map/shelf.svg';
import charge from '/map/charge.svg';
import direction from '/map/direction.svg';

let app, mapContainer;

@@ -27,6 +35,32 @@
    }
}

export const generateSprite = (deviceType) => {
    let sprite;
    switch (deviceType) {
        case DEVICE_TYPE.SHELF:
            sprite = new PIXI.Sprite(PIXI.Texture.from(shelf, { resourceOptions: { scale: 5 } }));
            sprite.width = 50;
            sprite.height = 50;
            sprite.zIndex = DEVICE_Z_INDEX.SHELF;
            break;
        case DEVICE_TYPE.CHARGE:
            sprite = new PIXI.Sprite(PIXI.Texture.from(charge, { resourceOptions: { scale: 1 } }));
            sprite.width = 60;
            sprite.height = 60;
            sprite.zIndex = DEVICE_Z_INDEX.CHARGE;
            break;
        case DEVICE_TYPE.DIRECTION:
            sprite = new PIXI.Sprite(PIXI.Texture.from(direction, { resourceOptions: { scale: 5 } }));
            sprite.width = 112;
            sprite.height = 63;
            sprite.zIndex = DEVICE_Z_INDEX.DIRECTION;
            break;
        default:
            break;
    }
    return sprite;
}

export const patchRaLayout = (param) => {
    const parentElement = document.getElementById('main-content');