#

vincentlu

2025-12-16 01e6aae8ac9ceea44a4a36199d27d24f5cf565df

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

@@ -17,7 +17,33 @@
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
import AreaBasicTab from './AreaBasicTab';
import AreaAdvancedTab from './AreaAdvancedTab';
import { getAreaInfo } from '../http';
import { getAreaInfo, fetchAgvListAll, updateAreaData, removeArea } from '../http';

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;
@@ -30,15 +56,16 @@
    }

    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 [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) => {
@@ -48,42 +75,94 @@
    }

    useEffect(() => {
        if (sprite?.data) {
            console.log(sprite.data);
        if (sprite?.data?.id) {
            fetchAreaInfo(sprite.data.id);

            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'));
        } else {
            setAreaName('');
            setAreaCode('');
            setMaxQty('');
            setCurAreaInfo(null);
            setName('');
            setCode('');
            setMaxCount('');
            setSpeedLimit('');
            setShapeData('');
            setMemo('');
            setPriority('');
            setAgvList('');
            setBarcodeList('');
            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 ?? '');
            setMemo(curAreaInfo.memo || '');
            setPriority(curAreaInfo.priority ?? '');

            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 handleSaveBasic = async () => {
        console.log(agvList);
        const id = sprite?.data?.id;
        if (!id) {
            return;
        }
        const payload = {
            id,
            name,
            agvIds: agvList.map(getAgvOptionId),
        };
        const data = await updateAreaData(payload);
        if (data) {
            setCurAreaInfo(data);
        }
    };

    const handleDeleteArea = async () => {
        const id = sprite?.data?.id;
        if (!id) {
            return;
        }
        const success = await removeArea(id);
        if (success) {
            onCancel?.();
        }
    };

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

    const basicDirty = name !== initialBasic.name
        || !areAgvSelectionsEqual(
            agvList.map(getAgvOptionId),
            initialBasic.agvIds
        );
    return (
        <>
            <Drawer
@@ -138,25 +217,28 @@
                                    <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}
                                                shapeData={memo}
                                                setShapeData={setMemo}
                                                priority={priority}
                                                setPriority={setPriority}
                                                onSave={handleSaveAdvanced}