#

vincentlu

2025-12-15 4d97647ec29563c1cb0b0c01bafe9f8a70839977

 zy-acs-flow/src/map/areaSettings/index.jsx

@@ -17,13 +17,26 @@
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
import AreaBasicTab from './AreaBasicTab';
import AreaAdvancedTab from './AreaAdvancedTab';
import { getAreaInfo } from '../http';
import { getAreaInfo, fetchAgvListAll } from '../http';

const getAgvOptionId = (option) => {
    if (typeof option === 'string') {
        return option;
    }
    return option?.value ?? option?.id ?? option?.agvNo ?? option?.code ?? option?.name ?? '';
};

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(getAgvOptionId(item)) || item);
};

const AreaSettings = (props) => {
@@ -37,15 +50,16 @@
    }

    const [activeTab, setActiveTab] = useState(0);
    const [areaName, setAreaName] = useState('');
    const [selectedAgvs, setSelectedAgvs] = 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 [memo, setMemo] = useState('');
    const [priority, setPriority] = useState('');

    const [agvOptions, setAgvOptions] = useState([]);
    const [initialBasic, setInitialBasic] = useState({ name: '', agvIds: [] });
    const [curAreaInfo, setCurAreaInfo] = useState(null);

    const fetchAreaInfo = (areaId) => {
@@ -59,43 +73,43 @@
            fetchAreaInfo(sprite.data.id);
        } else {
            setCurAreaInfo(null);
            setAreaName('');
            setAreaCode('');
            setMaxQty('');
            setName('');
            setCode('');
            setMaxCount('');
            setSpeedLimit('');
            setShapeData('');
            setMemo('');
            setPriority('');
            setSelectedAgvs([]);
            setBarcodeList('');
            setAgvList([]);
            setCodeList([]);
            setInitialBasic({ name: '', agvIds: [] });
        }
    }, [sprite]);

    const agvOptions = useMemo(() => {
        if (!curAreaInfo) {
            return [];
        }
        return curAreaInfo.agvOptions || curAreaInfo.agvCandidates || curAreaInfo.agvList || [];
    }, [curAreaInfo]);
    useEffect(() => {
        fetchAgvListAll().then((options) => {
            setAgvOptions(options || []);
        });
    }, []);

    useEffect(() => {
        if (curAreaInfo) {
            setAreaName(curAreaInfo.name || '');
            setAreaCode(curAreaInfo.code || '');
            setMaxQty(curAreaInfo.maxQty || '');
            setSpeedLimit(curAreaInfo.speedLimit || '');
            setShapeData(curAreaInfo.shape || '');
            setPriority(curAreaInfo.priority || '');
            setName(curAreaInfo.name || '');
            setCode(curAreaInfo.code || '');
            setMaxCount(curAreaInfo.maxCount ?? '');
            setSpeedLimit(curAreaInfo.speedLimit ?? '');
            setMemo(curAreaInfo.memo || '');
            setPriority(curAreaInfo.priority ?? '');

            const selected = curAreaInfo.selectedAgvs || curAreaInfo.agvs || [];
            if (Array.isArray(selected) && Array.isArray(agvOptions) && agvOptions.length > 0) {
                const optionMap = new Map(agvOptions.map(option => [getAgvOptionId(option), option]));
                setSelectedAgvs(selected.map(item => optionMap.get(getAgvOptionId(item)) || item));
            } else {
                setSelectedAgvs(selected);
            }
            const selected = curAreaInfo.agvList || [];
            const normalizedSelection = mapSelectionToOptions(selected, agvOptions);
            setAgvList(normalizedSelection);
            setInitialBasic({
                name: curAreaInfo.name || '',
                agvIds: normalizedSelection.map(getAgvOptionId)
            });

            const barcodes = curAreaInfo.barcodes || curAreaInfo.barcodeList || [];
            setBarcodeList(Array.isArray(barcodes) ? barcodes.join('\n') : (barcodes || ''));
            const codes = curAreaInfo.codeList || [];
            setCodeList(Array.isArray(codes) ? codes : []);
        }
    }, [curAreaInfo, agvOptions]);

@@ -105,11 +119,22 @@

    const handleSaveBasic = () => {
        // placeholder for save logic
        setInitialBasic({
            name,
            agvIds: agvList.map(getAgvOptionId),
        });
    };

    const handleSaveAdvanced = () => {
        // placeholder for save logic
    };

    const codeListText = (codeList || []).join('\n');
    const basicDirty = name !== initialBasic.name
        || !areAgvSelectionsEqual(
            agvList.map(getAgvOptionId),
            initialBasic.agvIds
        );

    return (
        <>
@@ -165,25 +190,26 @@
                                    <Box p={3}>
                                        {activeTab === 0 && (
                                            <AreaBasicTab
                                                areaName={areaName}
                                                setAreaName={setAreaName}
                                                name={name}
                                                setName={setName}
                                                agvOptions={agvOptions}
                                                selectedAgvs={selectedAgvs}
                                                setSelectedAgvs={setSelectedAgvs}
                                                barcodeList={barcodeList}
                                                agvList={agvList}
                                                setAgvList={setAgvList}
                                                codeListText={codeListText}
                                                onSave={handleSaveBasic}
                                                disableSave={!basicDirty}
                                            />
                                        )}
                                        {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}
                                                shapeData={memo}
                                                setShapeData={setMemo}
                                                priority={priority}
                                                setPriority={setPriority}
                                                onSave={handleSaveAdvanced}