From 7f70cb15d035f0c233b9e62b9e43aa985317c908 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期一, 04 十一月 2024 10:22:45 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/insight/agv/AgvMain.jsx | 142 ++++++++++++++++++++++++----------------------- 1 files changed, 72 insertions(+), 70 deletions(-) diff --git a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx index 566e2ce..c5aaf5b 100644 --- a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx +++ b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx @@ -17,65 +17,7 @@ import { handleRestoreAgvAll } from '../../http'; import BoolValueIcon from '../BoolValueIcon'; import ConfirmButton from '../../../page/components/ConfirmButton'; - -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); - }); - }); - } -} +import { grey } from '@mui/material/colors'; const AgvMain = (props) => { const { curAgvNo, curAgvInfo: info, fetchAgvInfo } = props; @@ -87,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); @@ -135,7 +138,7 @@ left="50%" style={{ transform: 'translate(-50%, -50%)' }} > - <CircularProgress /> + <CircularProgress sx={{ color: grey[50] }} /> </Box> )} </Box> @@ -200,15 +203,6 @@ > {translate('page.map.settings.map.more.title')} </Button> - - <ConfirmButton - label="page.map.action.restoreALl" - color="primary" - variant="contained" - onConfirm={() => { - handleRestoreAll(); - }} - /> {info && ( info.status === 1 ? <Button variant="contained" color="error" fullWidth onClick={() => { @@ -222,6 +216,14 @@ {translate('page.map.action.enable')} </Button> )} + <ConfirmButton + label="page.map.action.restoreALl" + color="inherit" + // variant="contained" + onConfirm={() => { + handleRestoreAll(); + }} + /> </Stack> </Grid> </Grid> -- Gitblit v1.9.1