#

luxiaotao1123

2024-10-23 3af87f4424fda51760188233983cd8d4a4586c50

#

 zy-acs-flow/src/map/insight/agv/AgvMain.jsx

@@ -19,65 +19,6 @@
import ConfirmButton from '../../../page/components/ConfirmButton';
import { grey } from '@mui/material/colors';

let three;

const startThree = (dom) => {
    three = new AgvThree(dom);
    three.startup();
}

const endThree = () => {
    if (three) {
        three.destroy();
        three = null;
    }
}

const renderThree = (curAgvNo) => {
    if (curAgvNo && three) {
        three.generateMesh((loader, addObject) => {
            const loadModel = (path) => {
                return new Promise((resolve, reject) => {
                    loader.load(path, (mesh) => {
                        resolve(mesh);
                    }, undefined, (error) => {
                        reject(error);
                    });
                });
            };

            Promise.all([
                loadModel('model/agv/body.fbx'),
                loadModel('model/agv/loader.fbx'),
                loadModel('model/agv/fork.fbx'),
            ]).then(([bodyMesh, loaderMesh, forkMesh]) => {
                const scaleVal = 1;
                bodyMesh.scale.set(scaleVal, scaleVal, scaleVal);
                loaderMesh.scale.set(scaleVal, scaleVal, scaleVal);
                forkMesh.scale.set(scaleVal, scaleVal, scaleVal);

                bodyMesh.position.set(55, 0, 0);;
                loaderMesh.position.set(55, 150, 0);;
                forkMesh.position.set(55, 165, 0);;

                const agvGroup = new THREE.Group();
                agvGroup.add(bodyMesh);
                agvGroup.add(loaderMesh);
                agvGroup.add(forkMesh);

                agvGroup.name = curAgvNo;

                addObject(agvGroup);

                three?.rePerspective(350, 450);

            }).catch((error) => {
                console.error(error);
            });
        });
    }
}

const AgvMain = (props) => {
    const { curAgvNo, curAgvInfo: info, fetchAgvInfo } = props;
    const theme = useTheme();
@@ -88,9 +29,70 @@
    const containerRef = useRef();
    const [loading, setLoading] = useState(true);

    const threeRef = useRef(null);

    const startThree = (dom) => {
        if (threeRef.current) {
            threeRef.current.destroy();
        }
        threeRef.current = new AgvThree(dom);
        threeRef.current.startup();
    }

    const endThree = () => {
        if (threeRef.current) {
            threeRef.current.destroy();
            threeRef.current = null;
        }
    }

    const renderThree = (curAgvNo) => {
        if (curAgvNo && threeRef.current) {
            threeRef.current.generateMesh((loader, addObject) => {
                const loadModel = (path) => {
                    return new Promise((resolve, reject) => {
                        loader.load(path, (mesh) => {
                            resolve(mesh);
                        }, undefined, (error) => {
                            reject(error);
                        });
                    });
                };

                Promise.all([
                    loadModel('model/agv/body.fbx'),
                    loadModel('model/agv/loader.fbx'),
                    loadModel('model/agv/fork.fbx'),
                ]).then(([bodyMesh, loaderMesh, forkMesh]) => {
                    const scaleVal = 1;
                    bodyMesh.scale.set(scaleVal, scaleVal, scaleVal);
                    loaderMesh.scale.set(scaleVal, scaleVal, scaleVal);
                    forkMesh.scale.set(scaleVal, scaleVal, scaleVal);

                    bodyMesh.position.set(55, 0, 0);;
                    loaderMesh.position.set(55, 150, 0);;
                    forkMesh.position.set(55, 165, 0);;

                    const agvGroup = new THREE.Group();
                    agvGroup.add(bodyMesh);
                    agvGroup.add(loaderMesh);
                    agvGroup.add(forkMesh);

                    agvGroup.name = curAgvNo;

                    addObject(agvGroup);

                    threeRef.current?.rePerspective(350, 450);

                }).catch((error) => {
                    console.error(error);
                });
            });
        }
    }

    useEffect(() => {
        if (info) {
            endThree();
            setLoading(true);
            setTimeout(() => {
                startThree(containerRef.current);

 zy-acs-flow/src/map/insight/agv/AgvThree.js

@@ -71,7 +71,7 @@
        renderer.setClearAlpha(0);
        renderer.shadowMap.enabled = true;
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        renderer.setSize(this.getFullWidth(), this.getFullHeight());
        this.dom?.appendChild(renderer.domElement);
        return renderer;
@@ -159,23 +159,28 @@
        if (this.renderer) {
            this.renderer.dispose();
            this.renderer.forceContextLoss();
            this.renderer.context = null;
            this.renderer.domElement = null;
            if (this.dom && this.renderer.domElement && this.dom.contains(this.renderer.domElement)) {
                try {
                    this.dom.removeChild(this.renderer.domElement);
                } catch (error) {
                    console.warn('Failed to remove renderer.domElement:', error);
                }
            }
            this.renderer = null;
        }
        if (this.controls) {
            this.controls.dispose();
            this.controls = null;
        }
        this.camera = null;
        this.objects = [];
        if (this.dom) {
            while (this.dom.firstChild) {
                if (this.dom.contains(this.dom.firstChild)) {
                    this.dom.removeChild(this.dom.firstChild);
                }
        if (this.stats && this.stats.domElement && this.dom.contains(this.stats.domElement)) {
            try {
                this.dom.removeChild(this.stats.domElement);
            } catch (error) {
                console.warn('Failed to remove stats.domElement:', error);
            }
        }
        this.camera = null;
        this.objects = [];
    }

    removeEntity = (object) => {

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

@@ -15,77 +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(() => {
                if (shelfThree) {
                    if (typeof shelfThree.setNewSelectedMesh === 'function') {
                        shelfThree.setNewSelectedMesh(curLocNo);
                    }
                    if (typeof shelfThree.rePerspective === 'function') {
                        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();
@@ -96,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);
            }, 200)
            }, 200);
        }
        return endThree;
    }, [info]);
@@ -127,7 +128,7 @@
            notify.success(translate('common.response.fail'));
            console.error(`Error: ${error.message}`);
        });
    }
    };

    return (
        <Box display="flex" height="100%">

 zy-acs-flow/src/map/insight/shelf/ShelfThree.js

@@ -87,7 +87,7 @@
        // this.renderer.shadowMap.type = THREE.BasicShadowMap;    // 最低阴影
        // renderer.toneMapping = THREE.ReinhardToneMapping;
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        renderer.setSize(this.getFullWidth(), this.getFullHeight());
        this.dom?.appendChild(renderer.domElement);
        return renderer;
@@ -213,6 +213,7 @@
    destroy = () => {
        cancelAnimationFrame(this.animationFrame);
        window.removeEventListener('resize', this.resizeHandler);
        this.dom?.removeEventListener("click", this.handleClickEvent);
        if (this.scene) {
            while (this.scene.children.length > 0) {
                this.removeEntity(this.scene.children[0]);
@@ -222,8 +223,13 @@
        if (this.renderer) {
            this.renderer.dispose();
            this.renderer.forceContextLoss();
            this.renderer.context = null;
            this.renderer.domElement = null;
            if (this.dom && this.renderer.domElement && this.dom.contains(this.renderer.domElement)) {
                try {
                    this.dom.removeChild(this.renderer.domElement);
                } catch (error) {
                    console.warn('Failed to remove renderer.domElement:', error);
                }
            }
            this.renderer = null;
        }
        if (this.composer) {
@@ -238,16 +244,16 @@
            this.controls.dispose();
            this.controls = null;
        }
        this.dom?.removeEventListener("click", this.handleClickEvent);
        this.camera = null;
        this.objects = [];
        if (this.dom) {
            while (this.dom.firstChild) {
                if (this.dom.contains(this.dom.firstChild)) {
                    this.dom.removeChild(this.dom.firstChild);
                }
        if (this.stats && this.stats.domElement && this.dom.contains(this.stats.domElement)) {
            try {
                this.dom.removeChild(this.stats.domElement);
            } catch (error) {
                console.warn('Failed to remove stats.domElement:', error);
            }
        }

        this.camera = null;
        this.objects = [];
    }

    removeEntity = (object) => {

 zy-acs-flow/src/map/player.js

@@ -1,7 +1,7 @@
import * as PIXI from 'pixi.js';
import * as TWEEDLE from 'tweedle.js';
import * as Tool from './tool';
import star from '/public/img/map/star.png'
import star from '/img/map/star.png'

export default class Player {