From 1bc33546a044cbc84dd9595c19dbcd9a4e309fc9 Mon Sep 17 00:00:00 2001
From: vincentlu <t1341870251@gmail.com>
Date: 星期六, 10 一月 2026 14:06:10 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/AreaList.jsx | 202 ++++++++++++++++++++++++++++++++++----------------
1 files changed, 137 insertions(+), 65 deletions(-)
diff --git a/zy-acs-flow/src/map/AreaList.jsx b/zy-acs-flow/src/map/AreaList.jsx
index b454ea6..629cc4a 100644
--- a/zy-acs-flow/src/map/AreaList.jsx
+++ b/zy-acs-flow/src/map/AreaList.jsx
@@ -1,92 +1,164 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import React, { useEffect, useState } from "react";
import { useTranslate } from "react-admin";
-import { Drawer, Box, Typography, Grid, IconButton, Stack, useTheme } from '@mui/material';
+import {
+ Drawer,
+ Box,
+ Typography,
+ IconButton,
+ Stack,
+ useTheme,
+ List,
+ ListItemButton,
+ ListItemText,
+ CircularProgress,
+} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
-import * as Common from '@/utils/common';
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
+import { fetchAreaList } from './http';
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 AreaList = ({
+ open,
+ onClose,
+ zoneId,
+ width = PAGE_DRAWER_WIDTH,
+ setCurSprite,
+}) => {
+ const translate = useTranslate();
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);
- };
+ const [areas, setAreas] = useState([]);
+ const [loading, setLoading] = useState(false);
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]);
+ if (!open) {
+ setAreas([]);
+ return;
+ }
+ setLoading(true);
+ fetchAreaList(zoneId)
+ .then((list) => {
+ setAreas(Array.isArray(list) ? list : []);
+ })
+ .finally(() => setLoading(false));
+ }, [open, zoneId]);
+ const handleItemClick = (area) => {
+ if (!area?.id) {
+ return;
+ }
+ const sprite = Tool.findAreaSpriteById(area.id);
+ if (sprite) {
+ Tool.focusAreaSprite(sprite, 570);
+ onClose();
+ setCurSprite(sprite);
+ }
+ };
return (
<Drawer
variant="persistent"
open={open}
anchor="right"
- onClose={handleClose}
- sx={{ zIndex: 100, opacity: .8 }}
+ onClose={onClose}
+ sx={{ zIndex: 100, opacity: 0.95 }}
>
{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.area.title')} */}
+ <Box pt={12} width={{ xs: '100vw', sm: width }} height={'calc(100vh - 200px)'} mt={{ xs: 2, sm: 1 }}>
+ <Stack direction="row" alignItems="center" px={3} py={2}>
+ <Typography variant="h6" flex={1}>
+ {translate('page.map.action.areaList')}
</Typography>
- <IconButton onClick={handleClose} size="small">
+ <IconButton onClick={onClose} size="small">
<CloseIcon />
</IconButton>
</Stack>
- <Box p={3}>
+
+ <Box px={3} pb={3}>
+ {loading ? (
+ <Box display="flex" justifyContent="center" mt={6}>
+ <CircularProgress />
+ </Box>
+ ) : (
+ <List dense sx={{ maxHeight: '70vh', overflowY: 'auto' }}>
+ {areas.length === 0 && (
+ <Typography variant="body2" color="text.secondary" textAlign="center" py={4}>
+ {translate('page.map.area.form.codesEmpty')}
+ </Typography>
+ )}
+ {areas.map((area) => {
+ const agvCount = Array.isArray(area.agvList) ? area.agvList.length : 0;
+ const width = Math.abs((area?.end?.x ?? 0) - (area?.start?.x ?? 0));
+ const height = Math.abs((area?.end?.y ?? 0) - (area?.start?.y ?? 0));
+ const areaSize = (width * height) / 1_000_000;
+ const formattedSize = areaSize > 0 ? areaSize.toFixed(2) : '0.00';
+ return (
+ <ListItemButton
+ key={area.id}
+ onClick={() => handleItemClick(area)}
+ sx={{
+ borderRadius: 2,
+ mb: 1,
+ px: 2,
+ py: 1.5,
+ background:
+ themeMode === 'light'
+ ? 'linear-gradient(145deg, #f8f9fa, #ffffff)'
+ : 'linear-gradient(145deg, #2d3436, #353b48)',
+ border: `1px solid ${theme.palette.divider}`,
+ display: 'flex',
+ gap: 1.5,
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+ boxShadow:
+ themeMode === 'light'
+ ? '0 6px 12px rgba(0,0,0,0.06)'
+ : '0 6px 12px rgba(0,0,0,0.25)',
+ '&:hover': {
+ transform: 'translateY(-2px)',
+ boxShadow:
+ themeMode === 'light'
+ ? '0 12px 24px rgba(0,0,0,0.08)'
+ : '0 12px 24px rgba(0,0,0,0.35)',
+ },
+ }}
+ >
+ <Box
+ sx={{
+ width: 12,
+ height: 12,
+ borderRadius: '50%',
+ bgcolor: area.color ? Number(area.color) : theme.palette.info.light,
+ border: `1px solid ${theme.palette.common.white}`,
+ boxShadow: '0 0 4px rgba(0,0,0,0.2)',
+ }}
+ />
+ <ListItemText
+ primary={area.name || translate('page.map.area.form.name')}
+ primaryTypographyProps={{
+ fontWeight: 600,
+ fontSize: 16,
+ }}
+ />
+ <Box textAlign="right">
+ <Typography variant="body2" fontWeight={500}>
+ {translate('page.map.area.form.agvCount', { count: agvCount })}
+ </Typography>
+ <Typography variant="caption" color="text.secondary">
+ {translate('page.map.area.form.areaSize', { size: formattedSize })}
+ </Typography>
+ </Box>
+ </ListItemButton>
+ );
+ })}
+ </List>
+ )}
</Box>
</Box>
)}
</Drawer>
- )
-}
+ );
+};
-export default AreaList;
\ No newline at end of file
+export default AreaList;
--
Gitblit v1.9.1