#
luxiaotao1123
2024-10-23 3af87f4424fda51760188233983cd8d4a4586c50
#
5个文件已修改
164 ■■■■ 已修改文件
zy-acs-flow/src/map/insight/agv/AgvMain.jsx 42 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-acs-flow/src/map/insight/agv/AgvThree.js 25 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx 67 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-acs-flow/src/map/insight/shelf/ShelfThree.js 28 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-acs-flow/src/map/player.js 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-acs-flow/src/map/insight/agv/AgvMain.jsx
@@ -19,23 +19,36 @@
import ConfirmButton from '../../../page/components/ConfirmButton';
import { grey } from '@mui/material/colors';
let three;
const AgvMain = (props) => {
    const { curAgvNo, curAgvInfo: info, fetchAgvInfo } = props;
    const theme = useTheme();
    const translate = useTranslate();
    const dataProvider = useDataProvider();
    const redirect = useRedirect();
    const notify = useNotification();
    const containerRef = useRef();
    const [loading, setLoading] = useState(true);
    const threeRef = useRef(null);
const startThree = (dom) => {
    three = new AgvThree(dom);
    three.startup();
        if (threeRef.current) {
            threeRef.current.destroy();
        }
        threeRef.current = new AgvThree(dom);
        threeRef.current.startup();
}
const endThree = () => {
    if (three) {
        three.destroy();
        three = null;
        if (threeRef.current) {
            threeRef.current.destroy();
            threeRef.current = null;
    }
}
const renderThree = (curAgvNo) => {
    if (curAgvNo && three) {
        three.generateMesh((loader, addObject) => {
        if (curAgvNo && threeRef.current) {
            threeRef.current.generateMesh((loader, addObject) => {
            const loadModel = (path) => {
                return new Promise((resolve, reject) => {
                    loader.load(path, (mesh) => {
@@ -69,7 +82,7 @@
                addObject(agvGroup);
                three?.rePerspective(350, 450);
                    threeRef.current?.rePerspective(350, 450);
            }).catch((error) => {
                console.error(error);
@@ -78,19 +91,8 @@
    }
}
const AgvMain = (props) => {
    const { curAgvNo, curAgvInfo: info, fetchAgvInfo } = props;
    const theme = useTheme();
    const translate = useTranslate();
    const dataProvider = useDataProvider();
    const redirect = useRedirect();
    const notify = useNotification();
    const containerRef = useRef();
    const [loading, setLoading] = useState(true);
    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;
        }
        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 = [];
        if (this.dom) {
            while (this.dom.firstChild) {
                if (this.dom.contains(this.dom.firstChild)) {
                    this.dom.removeChild(this.dom.firstChild);
                }
            }
        }
    }
    removeEntity = (object) => {
zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx
@@ -15,23 +15,36 @@
import { grey } from '@mui/material/colors';
import ConfirmButton from '../../../page/components/ConfirmButton';
let shelfThree;
const ShelfMain = (props) => {
    const { row, bay, curLocNo, curShelfInfo: info, setCurLocNo } = props;
    const translate = useTranslate();
    const dataProvider = useDataProvider();
    const redirect = useRedirect();
    const containerRef = useRef();
    const [selectedLoc, setSelectedLoc] = useState(null);   // loc obj
    const [loading, setLoading] = useState(true);
    const shelfThreeRef = useRef(null);
const startThree = (dom) => {
    shelfThree = new ShelfThree(dom);
    shelfThree.startup();
        if (shelfThreeRef.current) {
            shelfThreeRef.current.destroy();
}
        shelfThreeRef.current = new ShelfThree(dom);
        shelfThreeRef.current.startup();
    };
const endThree = () => {
    if (shelfThree) {
        shelfThree.destroy();
        shelfThree = null;
        if (shelfThreeRef.current) {
            shelfThreeRef.current.destroy();
            shelfThreeRef.current = null;
    }
}
    };
const renderThree = (info, curLocNo) => {
    if (info && shelfThree) {
        shelfThree.generateMesh((loader, addObject) => {
        if (info && shelfThreeRef.current) {
            shelfThreeRef.current.generateMesh((loader, addObject) => {
            const promises = [];
            const singleHeight = 123;
            for (const item of info) {
@@ -58,58 +71,46 @@
                                    default:
                                        break;
                                }
                                child.name = item.locNo
                                    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 (shelfThreeRef.current) {
                        if (typeof shelfThreeRef.current.setNewSelectedMesh === 'function') {
                            shelfThreeRef.current.setNewSelectedMesh(curLocNo);
                    }
                    if (typeof shelfThree.rePerspective === 'function') {
                        shelfThree.rePerspective(singleHeight * info.length, 500);
                        if (typeof shelfThreeRef.current.rePerspective === 'function') {
                            shelfThreeRef.current.rePerspective(singleHeight * info.length, 500);
                    }
                }
            }).catch(error => {
                console.error(error);
            });
        })
            });
    }
}
const ShelfMain = (props) => {
    const { row, bay, curLocNo, curShelfInfo: info, setCurLocNo } = props;
    const translate = useTranslate();
    const dataProvider = useDataProvider();
    const redirect = useRedirect();
    const containerRef = useRef();
    const [selectedLoc, setSelectedLoc] = useState(null);   // loc obj
    const [loading, setLoading] = useState(true);
    };
    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);
        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 = [];
        if (this.dom) {
            while (this.dom.firstChild) {
                if (this.dom.contains(this.dom.firstChild)) {
                    this.dom.removeChild(this.dom.firstChild);
                }
            }
        }
    }
    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 {