zhang
2025-07-03 9483baffba9a24a2a36fc8739fc65b59317d9142
zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx
@@ -15,71 +15,6 @@
import { grey } from '@mui/material/colors';
import ConfirmButton from '../../../page/components/ConfirmButton';
let shelfThree;
const startThree = (dom) => {
    shelfThree = new ShelfThree(dom);
    shelfThree.startup();
}
const endThree = () => {
    if (shelfThree) {
        shelfThree.destroy();
        shelfThree = null;
    }
}
const renderThree = (info, curLocNo) => {
    if (info && shelfThree) {
        shelfThree.generateMesh((loader, addObject) => {
            const promises = [];
            const singleHeight = 123;
            for (const item of info) {
                const { lev } = item;
                promises.push(new Promise((resolve) => {
                    loader.load('model/shelf.fbx', (mesh) => {
                        mesh.position.set(0, singleHeight * (lev - 1), 0);
                        mesh.scale.set(5, 5, 5);
                        mesh.name = item.locNo;
                        mesh.traverse((child) => {
                            if (child.isMesh) {
                                switch (child.name) {
                                    case '货架':
                                        child.material.color.set(0x4680BF);
                                        break;
                                    case '托盘':
                                        child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT';
                                        child.material.color.set(0xBEBEBE);
                                        break;
                                    case '不规则':
                                        child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT';
                                        child.material.color.set(0xE8B67E);
                                        break;
                                    default:
                                        break;
                                }
                                child.name = item.locNo
                                child.castShadow = true;
                                child.receiveShadow = true;
                            }
                        });
                        addObject(mesh);
                        resolve();
                    })
                }));
            }
            Promise.all(promises).then(() => {
                shelfThree.setNewSelectedMesh(curLocNo);
                shelfThree.rePerspective(singleHeight * info.length, 500);
            }).catch(error => {
                console.error(error);
            });
        })
    }
}
const ShelfMain = (props) => {
    const { row, bay, curLocNo, curShelfInfo: info, setCurLocNo } = props;
    const translate = useTranslate();
@@ -90,20 +25,92 @@
    const [selectedLoc, setSelectedLoc] = useState(null);   // loc obj
    const [loading, setLoading] = useState(true);
    const shelfThreeRef = useRef(null);
    const startThree = (dom) => {
        if (shelfThreeRef.current) {
            shelfThreeRef.current.destroy();
        }
        shelfThreeRef.current = new ShelfThree(dom);
        shelfThreeRef.current.startup();
    };
    const endThree = () => {
        if (shelfThreeRef.current) {
            shelfThreeRef.current.destroy();
            shelfThreeRef.current = null;
        }
    };
    const renderThree = (info, curLocNo) => {
        if (info && shelfThreeRef.current) {
            shelfThreeRef.current.generateMesh((loader, addObject) => {
                const promises = [];
                const singleHeight = 123;
                for (const item of info) {
                    const { lev } = item;
                    promises.push(new Promise((resolve) => {
                        loader.load('model/shelf.fbx', (mesh) => {
                            mesh.position.set(0, singleHeight * (lev - 1), 0);
                            mesh.scale.set(5, 5, 5);
                            mesh.name = item.locNo;
                            mesh.traverse((child) => {
                                if (child.isMesh) {
                                    switch (child.name) {
                                        case '货架':
                                            child.material.color.set(0x4680BF);
                                            break;
                                        case '托盘':
                                            child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT';
                                            child.material.color.set(0xBEBEBE);
                                            break;
                                        case '不规则':
                                            child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT';
                                            child.material.color.set(0xE8B67E);
                                            break;
                                        default:
                                            break;
                                    }
                                    child.name = item.locNo;
                                    child.castShadow = true;
                                    child.receiveShadow = true;
                                }
                            });
                            addObject(mesh);
                            resolve();
                        });
                    }));
                }
                Promise.all(promises).then(() => {
                    if (shelfThreeRef.current) {
                        if (typeof shelfThreeRef.current.setNewSelectedMesh === 'function') {
                            shelfThreeRef.current.setNewSelectedMesh(curLocNo);
                        }
                        if (typeof shelfThreeRef.current.rePerspective === 'function') {
                            shelfThreeRef.current.rePerspective(singleHeight * info.length, 500);
                        }
                    }
                }).catch(error => {
                    console.error(error);
                });
            });
        }
    };
    useEffect(() => {
        if (info) {
            setSelectedLoc(info[0]);
            endThree();
            setLoading(true);
            setTimeout(() => {
                startThree(containerRef.current);
                shelfThree.handleClick = (objName) => {
                shelfThreeRef.current.handleClick = (objName) => {
                    setCurLocNo(objName);
                    setSelectedLoc(info.find(loc => objName === loc.locNo));
                };
                renderThree(info, curLocNo);
                setLoading(false);
            }, 300)
            }, 200);
        }
        return endThree;
    }, [info]);
@@ -121,7 +128,7 @@
            notify.success(translate('common.response.fail'));
            console.error(`Error: ${error.message}`);
        });
    }
    };
    return (
        <Box display="flex" height="100%">