#

vincentlu

2025-12-12 4b0ea0e7958398dd72b7bf411157cd3eb49e0ab6

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

@@ -49,6 +49,7 @@
    const [deviceVisible, setDeviceVisible] = useState(false);
    const [settingsVisible, setSettingsVisible] = useState(false);
    const [batchSelectionVisible, setBatchSelectionVisible] = useState(false);
    const [areaDrawing, setAreaDrawing] = useState(false);

    const [curSprite, setCurSprite] = useState(null);
    const [batchSprites, setBatchSprites] = useState([]);
@@ -125,15 +126,19 @@
        modeRef.current = mode;

        Tool.removeSelectedEffect();
        Tool.clearAreas();
        player.hideGridLines();

        setInsightVisible(false);
        setDeviceVisible(false);
        setSettingsVisible(false);
        setBatchSelectionVisible(false);
        setAreaDrawing(false);

        setCurSprite(null);
        setBatchSprites([]);

        player.deactivateMapMultiSelect();

        switch (mode) {
            case MAP_MODE.OBSERVER_MODE:
@@ -167,6 +172,11 @@
                mapContainer.children.forEach(child => {
                    Tool.beSettings(child, setCurSprite);
                })
                break
            case MAP_MODE.AREA_MODE:
                Tool.removeAgvGraphics();

                Tool.loadAreas(curZone, setCurSprite);
                break
            default:
                break
@@ -205,6 +215,10 @@
                setInsightVisible(true);
            }
            if (mode === MAP_MODE.SETTINGS_MODE) {
                Tool.showSelectedEffect(curSprite);
                setSettingsVisible(true);
            }
            if (mode === MAP_MODE.AREA_MODE) {
                Tool.showSelectedEffect(curSprite);
                setSettingsVisible(true);
            }
@@ -340,8 +354,35 @@
                    </>
                )}

                {mode === MAP_MODE.ZONING_MODE && (
                {mode === MAP_MODE.AREA_MODE && (
                    <>
                        <Button
                            variant={areaDrawing ? "outlined" : "contained"}
                            color="primary"
                            sx={{}}
                            disabled={areaDrawing}
                            onClick={() => {
                                setCurSprite(null);
                                const started = Tool.startAreaDrawing({
                                    promptText: translate('page.map.prompt.areaName'),
                                    onComplete: ({ name, start, end, color }) => {
                                        if (name) {
                                            Http.saveAreaData(curZone, { name, start, end, color });
                                            notify.success(translate('page.map.msg.areaCreated', { name }));
                                        }
                                    },
                                    onFinish: () => {
                                        setAreaDrawing(false);
                                    },
                                    setCurSprite,
                                });
                                if (started) {
                                    setAreaDrawing(true);
                                }
                            }}
                        >
                            {translate('page.map.action.addArea')}
                        </Button>
                    </>
                )}

@@ -362,7 +403,7 @@
                    <MenuItem value={MAP_MODE.OBSERVER_MODE}>{translate('page.map.mode.observer')}</MenuItem>
                    <MenuItem value={MAP_MODE.MOVABLE_MODE}>{translate('page.map.mode.movable')}</MenuItem>
                    <MenuItem value={MAP_MODE.SETTINGS_MODE}>{translate('page.map.mode.settings')}</MenuItem>
                    <MenuItem value={MAP_MODE.ZONING_MODE}>{translate('page.map.mode.zoning')}</MenuItem>
                    <MenuItem value={MAP_MODE.AREA_MODE}>{translate('page.map.mode.area')}</MenuItem>
                </Select>
            </Box>
            {/* content */}