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/areaSettings/index.jsx | 202 +++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 164 insertions(+), 38 deletions(-)
diff --git a/zy-acs-flow/src/map/areaSettings/index.jsx b/zy-acs-flow/src/map/areaSettings/index.jsx
index db2f207..d86d5be 100644
--- a/zy-acs-flow/src/map/areaSettings/index.jsx
+++ b/zy-acs-flow/src/map/areaSettings/index.jsx
@@ -17,6 +17,34 @@
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
import AreaBasicTab from './AreaBasicTab';
import AreaAdvancedTab from './AreaAdvancedTab';
+import { getAreaInfo, fetchAgvListAll, updateAreaData, removeArea } from '../http';
+import * as Tool from '../tool';
+
+const getAgvOptionId = (option) => {
+ if (option == null) {
+ return '';
+ }
+ if (typeof option === 'string' || typeof option === 'number') {
+ return String(option);
+ }
+ return option?.id ?? '';
+};
+
+const areAgvSelectionsEqual = (aIds = [], bIds = []) => {
+ if (aIds.length !== bIds.length) {
+ return false;
+ }
+ const setA = new Set(aIds);
+ return bIds.every(id => setA.has(id));
+};
+
+const mapSelectionToOptions = (selection = [], options = []) => {
+ const optionMap = new Map(options.map(option => [getAgvOptionId(option), option]));
+ return selection
+ .map(item => optionMap.get(item) || null)
+ .filter(Boolean);
+
+};
const AreaSettings = (props) => {
const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH } = props;
@@ -29,49 +57,142 @@
}
const [activeTab, setActiveTab] = useState(0);
- const [areaName, setAreaName] = useState('');
- const [agvList, setAgvList] = useState('');
- const [barcodeList, setBarcodeList] = useState('');
- const [areaCode, setAreaCode] = useState('');
- const [maxQty, setMaxQty] = useState('');
+ const [name, setName] = useState('');
+ const [agvList, setAgvList] = useState([]);
+ const [codeList, setCodeList] = useState([]);
+ const [code, setCode] = useState('');
+ const [maxCount, setMaxCount] = useState('');
const [speedLimit, setSpeedLimit] = useState('');
- const [shapeData, setShapeData] = useState('');
+ const [startPoint, setStartPoint] = useState({ x: '', y: '' });
+ const [endPoint, setEndPoint] = useState({ x: '', y: '' });
const [priority, setPriority] = useState('');
+ const [memo, setMemo] = useState('');
+ const [agvOptions, setAgvOptions] = useState([]);
+ const [initialBasic, setInitialBasic] = useState({ name: '', agvIds: [] });
+ const [curAreaInfo, setCurAreaInfo] = useState(null);
+
+ const fetchAreaInfo = (areaId) => {
+ getAreaInfo({ params: { areaId: areaId } }, (data) => {
+ setCurAreaInfo(data);
+ })
+ }
useEffect(() => {
- if (sprite?.data) {
- setAreaName(sprite.data.name || '');
- setAreaCode(sprite.data.code || '');
- setMaxQty(sprite.data.maxQty || '');
- setSpeedLimit(sprite.data.speedLimit || '');
- setShapeData(sprite.data.shape || '');
- setPriority(sprite.data.priority || '');
- setAgvList((sprite.data.agvs || []).join(', '));
- setBarcodeList((sprite.data.barcodes || []).join('\n'));
+ if (sprite?.data?.id) {
+ fetchAreaInfo(sprite.data.id);
} else {
- setAreaName('');
- setAreaCode('');
- setMaxQty('');
+ setCurAreaInfo(null);
+ setName('');
+ setCode('');
+ setMaxCount('');
setSpeedLimit('');
- setShapeData('');
+ setStartPoint({ x: '', y: '' });
+ setEndPoint({ x: '', y: '' });
setPriority('');
- setAgvList('');
- setBarcodeList('');
+ setMemo('');
+ setAgvList([]);
+ setCodeList([]);
+ setInitialBasic({ name: '', agvIds: [] });
}
}, [sprite]);
+
+ useEffect(() => {
+ if (!open) {
+ return;
+ }
+ fetchAgvListAll().then((options) => {
+ setAgvOptions(options || []);
+ });
+ }, [open]);
+
+ useEffect(() => {
+ if (curAreaInfo) {
+ setName(curAreaInfo.name || '');
+ setCode(curAreaInfo.code || '');
+ setMaxCount(curAreaInfo.maxCount ?? '');
+ setSpeedLimit(curAreaInfo.speedLimit ?? '');
+ setStartPoint({
+ x: curAreaInfo.start?.x ?? '',
+ y: curAreaInfo.start?.y ?? '',
+ });
+ setEndPoint({
+ x: curAreaInfo.end?.x ?? '',
+ y: curAreaInfo.end?.y ?? '',
+ });
+ setPriority(curAreaInfo.priority ?? '');
+ setMemo(curAreaInfo.memo || '');
+
+ const selected = curAreaInfo.agvList || [];
+ const normalizedSelection = mapSelectionToOptions(selected, agvOptions);
+ setAgvList(normalizedSelection);
+ setInitialBasic({
+ name: curAreaInfo.name || '',
+ agvIds: normalizedSelection.map(getAgvOptionId)
+ });
+
+ const codes = curAreaInfo.codeList || [];
+ setCodeList(Array.isArray(codes) ? codes : []);
+ }
+ }, [curAreaInfo, agvOptions]);
const handleTabChange = (event, newValue) => {
setActiveTab(newValue);
};
- const handleSaveBasic = () => {
- // placeholder for save logic
+ const submitAreaUpdate = async (payload = {}) => {
+ const id = sprite?.data?.id;
+ if (!id) {
+ return;
+ }
+ const data = await updateAreaData({ id, ...payload });
+ if (data) {
+ setCurAreaInfo(data);
+ if (sprite) {
+ Tool.updateAreaSpriteName(sprite, data.name || name);
+ }
+ }
};
- const handleSaveAdvanced = () => {
- // placeholder for save logic
+ const handleSaveBasic = async () => {
+ await submitAreaUpdate({
+ name,
+ agvIds: agvList.map(getAgvOptionId),
+ });
};
+ const handleSaveAdvanced = async () => {
+ await submitAreaUpdate({
+ name,
+ agvIds: agvList.map(getAgvOptionId),
+ code,
+ maxCount,
+ speedLimit,
+ priority,
+ memo,
+ start: startPoint,
+ end: endPoint,
+ });
+ };
+
+ const handleDeleteArea = async () => {
+ const id = sprite?.data?.id;
+ if (!id) {
+ return;
+ }
+ const success = await removeArea(id);
+ if (success) {
+ if (sprite) {
+ Tool.removeAreaSprite(sprite);
+ }
+ onCancel?.();
+ }
+ };
+
+ const basicDirty = name !== initialBasic.name
+ || !areAgvSelectionsEqual(
+ agvList.map(getAgvOptionId),
+ initialBasic.agvIds
+ );
return (
<>
<Drawer
@@ -88,7 +209,7 @@
<Typography variant="h6" flex="1">
{sprite
? translate(`page.map.devices.${sprite?.data?.type?.toLowerCase()}`) + ' - ' + sprite?.data?.name
- : translate('page.map.settings.title')}
+ : translate('page.map.area.title')}
</Typography>
<IconButton onClick={handleClose} size="small">
<CloseIcon />
@@ -117,8 +238,8 @@
variant="fullWidth"
sx={{ mb: 0 }}
>
- <Tab label={translate('page.map.area.basic', { _: '鍩虹' })} />
- <Tab label={translate('page.map.area.advanced', { _: '楂樼骇' })} />
+ <Tab label={translate('page.map.area.tabs.basic')} />
+ <Tab label={translate('page.map.area.tabs.advanced')} />
</Tabs>
<Divider />
@@ -126,27 +247,32 @@
<Box p={3}>
{activeTab === 0 && (
<AreaBasicTab
- areaName={areaName}
- setAreaName={setAreaName}
+ name={name}
+ setName={setName}
+ agvOptions={agvOptions}
agvList={agvList}
setAgvList={setAgvList}
- barcodeList={barcodeList}
- setBarcodeList={setBarcodeList}
+ codeList={codeList}
onSave={handleSaveBasic}
+ disableSave={!basicDirty}
+ onDelete={handleDeleteArea}
+ canDelete={Boolean(sprite?.data?.id)}
/>
)}
{activeTab === 1 && (
<AreaAdvancedTab
- areaCode={areaCode}
- setAreaCode={setAreaCode}
- maxQty={maxQty}
- setMaxQty={setMaxQty}
+ areaCode={code}
+ setAreaCode={setCode}
+ maxQty={maxCount}
+ setMaxQty={setMaxCount}
speedLimit={speedLimit}
setSpeedLimit={setSpeedLimit}
- shapeData={shapeData}
- setShapeData={setShapeData}
+ startPoint={startPoint}
+ endPoint={endPoint}
priority={priority}
setPriority={setPriority}
+ memo={memo}
+ setMemo={setMemo}
onSave={handleSaveAdvanced}
/>
)}
--
Gitblit v1.9.1