#

vincentlu

2025-12-17 1e99f0d8260b8343437015032c4faa113b5124f3

#

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

@@ -676,6 +676,7 @@
                oneClickPatrol: 'One-click Patrol',
                cancelPatrol: 'Cancel Patrol',
                addArea: 'Add Area',
                areaList: 'Area List',
            },
            mode: {
                observer: 'OBSERVER',

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

@@ -676,6 +676,7 @@
                oneClickPatrol: '一键巡逻',
                cancelPatrol: '取消巡逻',
                addArea: '添加区域',
                areaList: '区域列表',
            },
            mode: {
                observer: '观察模式',

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

New file
@@ -0,0 +1,138 @@
import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
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';
import * as Tool from './tool';

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

const items = [
    { src: shelf, label: 'page.map.devices.shelf', type: 'SHELF', scale: 1 },
    { src: charge, label: 'page.map.devices.charge', type: 'CHARGE', scale: .7 },
    { src: station, label: 'page.map.devices.station', type: 'STATION', scale: 1 },
    { src: direction, label: 'page.map.devices.direction', type: 'DIRECTION', scale: 1 },
];

const AreaList = (props) => {
    const {
        title,
        open,
        onCancel,
        closeCallback,
        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();
        if (closeCallback) {
            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
            variant="persistent"
            open={open}
            anchor="right"
            onClose={handleClose}
            sx={{ zIndex: 100, opacity: .8 }}
        >
            {open && (
                <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }} sx={{
                }}>
                    <Stack direction="row" p={2}>
                        <Typography variant="h6" flex="1">
                            {title || translate('page.map.devices.title')}
                        </Typography>
                        <IconButton onClick={handleClose} size="small">
                            <CloseIcon />
                        </IconButton>
                    </Stack>
                    <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>
    )
}

export default AreaList;

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

@@ -14,6 +14,7 @@
import { NotificationProvider, useNotification } from './Notification';
import Insight from "./insight";
import Device from "./Device";
import AreaList from "./AreaList";
import Settings from "./settings";
import Batch from "./batch";
import AreaSettings from "./areaSettings";
@@ -52,6 +53,7 @@
    const [settingsVisible, setSettingsVisible] = useState(false);
    const [batchSelectionVisible, setBatchSelectionVisible] = useState(false);
    const [areaSettingsVisible, setAreaSettingsVisible] = useState(false);
    const [areaListVisible, setAreaListVisible] = useState(false);
    const [areaDrawing, setAreaDrawing] = useState(false);

    const [curSprite, setCurSprite] = useState(null);
@@ -139,6 +141,7 @@
        setBatchSelectionVisible(false);
        setAreaSettingsVisible(false);
        setAreaDrawing(false);
        setAreaListVisible(false);
        Tool.cancelAreaDrawing();
        Tool.hideAreas(curZone, setShowAreas);

@@ -365,6 +368,13 @@
                {mode === MAP_MODE.AREA_MODE && (
                    <>
                        <Button
                            variant="outlined"
                            onClick={() => setAreaListVisible(!areaListVisible)}
                            sx={{ mr: 2 }}
                        >
                            {translate('page.map.action.areaList')}
                        </Button>
                        <Button
                            variant={areaDrawing ? "outlined" : "contained"}
                            color="primary"
                            sx={{}}
@@ -562,6 +572,15 @@
                width={570}
            />

            <AreaList
                open={areaListVisible}
                onCancel={() => {
                    setAreaListVisible(false);
                }}
                onDrop={onDrop}
                width={400}
            />

        </Box>
    );
}

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

@@ -1001,7 +1001,7 @@
    if (setCurSprite) {
        draft.zIndex = DEVICE_Z_INDEX.AREA;
    }
    draft.lineStyle(.5 / Math.abs(mapContainer.scale.x || 1), AREA_BORDER_COLOR, 0.9);
    draft.lineStyle(1 / Math.abs(mapContainer.scale.x || 1), AREA_BORDER_COLOR, 0.9);
    draft.beginFill(areaColor, 0.18);
    draft.drawRect(
        Math.min(from.x, to.x),