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 | 155 ++++++++++++++++++++++++++------------------------- 1 files changed, 80 insertions(+), 75 deletions(-) diff --git a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx index 5e22aff..c5aaf5b 100644 --- a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx +++ b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx @@ -1,6 +1,6 @@ import React, { useRef, useEffect, useState } from 'react'; import * as THREE from 'three'; -import { useTranslate, useDataProvider } from 'react-admin'; +import { useTranslate, useDataProvider, useRedirect } from 'react-admin'; import { Box, CircularProgress, @@ -17,78 +17,82 @@ 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; 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) => { + 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); @@ -134,7 +138,7 @@ left="50%" style={{ transform: 'translate(-50%, -50%)' }} > - <CircularProgress /> + <CircularProgress sx={{ color: grey[50] }} /> </Box> )} </Box> @@ -190,22 +194,15 @@ <Grid container spacing={2} style={{ marginTop: '0px' }}> <Grid item xs={12}> <Stack spacing={2} mt={2}> - <ConfirmButton - label="page.map.action.reset" + <Button color="primary" variant="contained" - onConfirm={() => { - handleReset(); + onClick={() => { + redirect(`/agv/${info?.agvId}/show`); }} - /> - <ConfirmButton - label="page.map.action.restoreALl" - color="primary" - variant="contained" - onConfirm={() => { - handleRestoreAll(); - }} - /> + > + {translate('page.map.settings.map.more.title')} + </Button> {info && ( info.status === 1 ? <Button variant="contained" color="error" fullWidth onClick={() => { @@ -219,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