#

luxiaotao1123

2024-10-16 b20fdb26e9d1d091fd7864de1edcc639e9da01b8

 zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx

@@ -12,6 +12,82 @@
    Stack,
} from '@mui/material';
import ShelfThree from './ShelfThree';
import request from '@/utils/request';
import { getLocGroup } from '../../http';

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(function (child) {
                            if (child.isMesh) {
                                if (child.name === '货架') {
                                    child.material.color.set(0x4680BF);
                                }
                                let palletVisible = true, cargoVisible = true;
                                switch (item.locStsEl) {
                                    case 'STOCK':
                                        cargoVisible = false;
                                        break;
                                    case 'IDLE':
                                        palletVisible = false;
                                        cargoVisible = false;
                                        break;
                                    default:
                                        break;
                                }
                                if (child.name === '托盘') {
                                    child.visible = palletVisible;
                                    child.material.color.set(0xBEBEBE);
                                }
                                if (child.name === '不规则') {
                                    child.visible = cargoVisible;
                                    child.material.color.set(0xE8B67E);
                                }
                                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 { data, curLocNo, setCurLocNo } = props;
@@ -20,6 +96,38 @@
    const [loading, setLoading] = useState(true);
    const [shelfThree, setShelfThree] = useState(null);
    const [info, setInfo] = useState(null);



    useEffect(() => {
        if (data) {
            getLocGroup(data.row, data.bay, (response) => {
                setInfo(response);
                setCurLocNo(response[0]?.locNo);
            });
        }
    }, [data]);

    useEffect(() => {
        if (info) {
            endThree();
            setLoading(true);

            setTimeout(() => {
                startThree(containerRef.current);
                shelfThree.handleClick = (objName) => {
                    setCurLocNo(objName);
                };
                renderThree(info, curLocNo);
                setLoading(false);
            }, 300)

        }

        return endThree;
    }, [info]);



    useEffect(() => {
        const initThree = () => {
@@ -31,7 +139,6 @@
            setShelfThree(shelfThreeInstance);
            setLoading(false);
            // Fetch initial data
            fetchShelfInfo(curLocNo);
        };

        initThree();
@@ -43,19 +150,7 @@
        };
    }, []);

    useEffect(() => {
        if (curLocNo) {
            fetchShelfInfo(curLocNo);
        }
    }, [curLocNo]);

    const fetchShelfInfo = async (locNo) => {
        // 假设有一个函数来获取货架信息
        const res = await fetchShelfData(locNo);
        if (res?.data) {
            setInfo(res.data);
        }
    };

    return (
        <Box display="flex" height="500px">
@@ -78,7 +173,7 @@
                )}
            </Box>
            <Box width="40%" height="100%" overflow="auto" p={2}>
                <Paper elevation={3} style={{ padding: '16px' }}>
                {/* <Paper elevation={3} style={{ padding: '16px' }}>
                    <Typography variant="h6" gutterBottom>
                        {translate('map.loc.no', { defaultMessage: '库位号' })}: {curLocNo}
                    </Typography>
@@ -118,7 +213,7 @@
                            </Stack>
                        </Grid>
                    </Grid>
                </Paper>
                </Paper> */}
            </Box>
        </Box>
    );