From b59cf6d6d0aa7737e1b4ff38e564bca21f866a4f Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期四, 17 十月 2024 10:51:09 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/insight/agv/AgvMain.jsx | 93 +++++++++++++++++++++++++++++- zy-acs-flow/src/map/insight/shelf/ShelfThree.js | 2 zy-acs-flow/src/map/insight/agv/AgvThree.js | 85 --------------------------- 3 files changed, 91 insertions(+), 89 deletions(-) diff --git a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx index 8651c52..b6686e3 100644 --- a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx +++ b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx @@ -1,6 +1,16 @@ import React, { useRef, useEffect, useState } from 'react'; import * as THREE from 'three'; -import { Box, CircularProgress } from '@mui/material'; +import { useTranslate } from 'react-admin'; +import { + Box, + CircularProgress, + Grid, + Typography, + Paper, + Button, + Divider, + Stack, +} from '@mui/material'; import AgvThree from './AgvThree'; import { getAgvInfo } from '../../http'; @@ -41,8 +51,9 @@ loaderMesh.scale.set(scaleVal, scaleVal, scaleVal); forkMesh.scale.set(scaleVal, scaleVal, scaleVal); - loaderMesh.position.set(0, 150, 0);; - forkMesh.position.set(0, 165, 0);; + 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); @@ -53,8 +64,7 @@ addObject(agvGroup); - three.setNewSelectedMesh(curAgvNo); - three.rePerspective(350, 550); + three.rePerspective(350, 450); }).catch((error) => { console.error(error); @@ -65,6 +75,7 @@ const AgvMain = (props) => { const { data, curAgvNo, setCurAgvNo } = props; + const translate = useTranslate(); const containerRef = useRef(); const [loading, setLoading] = useState(true); const [info, setInfo] = useState(null); @@ -115,9 +126,81 @@ )} </Box> <Box width="50%" height="100%" overflow="auto" pl={1}> + <Paper elevation={1} style={{ + height: "100%", + padding: '16px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + }}> + <Box> + <Grid container spacing={2} style={{ marginTop: '0px' }}> + <Grid item xs={12}> + <KeyValuePair label={translate('table.field.agv.uuid')} value={info?.uuid || 'N/A'} /> + </Grid> + <Grid item xs={12}> + <KeyValuePair label={translate('table.field.loc.row')} value={info?.row || 'N/A'} /> + </Grid> + <Grid item xs={12}> + <KeyValuePair label={translate('table.field.loc.bay')} value={info?.bay || 'N/A'} /> + </Grid> + <Grid item xs={12}> + <KeyValuePair label={translate('table.field.loc.lev')} value={info?.lev || 'N/A'} /> + </Grid> + <Grid item xs={12}> + <KeyValuePair label={translate('table.field.loc.offset')} value={info?.offset || 'N/A'} /> + </Grid> + <Grid item xs={12}> + <KeyValuePair label={translate('table.field.loc.locSts')} value={info?.locSts$ || 'N/A'} /> + </Grid> + <Grid item xs={12}> + <KeyValuePair label={translate('table.field.loc.zoneId')} value={info?.zoneId$ || 'N/A'} /> + </Grid> + <Grid item xs={12}> + <KeyValuePair label={translate('table.field.loc.code')} value={info?.code$ || 'N/A'} /> + </Grid> + </Grid> + </Box> + + <Grid container spacing={2} style={{ marginTop: '0px' }}> + <Grid item xs={12}> + <Typography variant="subtitle1"> + {translate('common.field.opt')} + </Typography> + <Stack spacing={2} mt={2}> + <Button variant="contained" fullWidth> + {translate('page.map.insight.shelf.updateStatus')} + </Button> + <Button variant="contained" color="error" disabled={info?.locStsEl !== 'STOCK'} fullWidth> + {translate('page.map.insight.shelf.outbound')} + </Button> + </Stack> + </Grid> + </Grid> + </Paper> </Box> </Box> ); } +const KeyValuePair = ({ label, value }) => ( + <> + <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}> + <Typography + variant="body2" + sx={{ width: '80px', fontWeight: 'bold', color: 'text.secondary', textAlign: 'left' }} + > + {label}: + </Typography> + <Typography + variant="body2" + sx={{ flexGrow: 1, color: 'text.primary', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} + > + {value} + </Typography> + </Stack> + <Divider /> + </> +); + export default AgvMain; diff --git a/zy-acs-flow/src/map/insight/agv/AgvThree.js b/zy-acs-flow/src/map/insight/agv/AgvThree.js index 1a15c01..58724ff 100644 --- a/zy-acs-flow/src/map/insight/agv/AgvThree.js +++ b/zy-acs-flow/src/map/insight/agv/AgvThree.js @@ -2,11 +2,6 @@ import Stats from 'three/addons/libs/stats.module.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import TWEEN from '@tweenjs/tween.js'; -import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'; -import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'; -import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'; -import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'; -import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader'; import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'; const help = false; @@ -24,9 +19,7 @@ this.renderer = this.initRenderer(); this.controls = this.initControls(); this.stats = this.initStats(); - this.composer = this.initComposer(); this.initLight(); - this.initRaycaster(); this.windowResize(); this.animate(); @@ -39,7 +32,7 @@ } render = () => { - this.composer.render(); + this.renderer.render(this.scene, this.camera); this.stats.update(); this.controls.update(); } @@ -59,7 +52,7 @@ initScene = () => { const scene = new THREE.Scene(); - scene.background = new THREE.Color(0x7a7a7a); + scene.background = new THREE.Color(0x323232); scene.fog = new THREE.Fog(scene.background, 1, 5000); if (help) { scene.add(new THREE.AxesHelper(1000)); @@ -82,28 +75,6 @@ renderer.setSize(this.getFullWidth(), this.getFullHeight()); this.dom?.appendChild(renderer.domElement); return renderer; - } - - initComposer = () => { - const composer = new EffectComposer(this.renderer); - const renderPass = new RenderPass(this.scene, this.camera); - composer.addPass(renderPass); - - const pixelRatio = this.renderer.getPixelRatio(); - const newWidth = Math.floor(this.getFullWidth() * pixelRatio) || 1; - const newHeight = Math.floor(this.getFullHeight() * pixelRatio) || 1; - composer.setSize(newWidth, newHeight); - - const effectFXAA = new ShaderPass(FXAAShader); - effectFXAA.uniforms['resolution'].value.set(1 / newWidth, 1 / newHeight); - composer.addPass(effectFXAA); - - this.outlinePass = new OutlinePass(new THREE.Vector2(this.getFullWidth(), this.getFullHeight()), this.scene, this.camera); - this.outlinePass.visibleEdgeColor.set('#ffffff'); - this.outlinePass.edgeStrength = 10; - composer.addPass(this.outlinePass); - - return composer; } initControls = () => { @@ -150,52 +121,10 @@ this.scene.add(dirLight1); } - initRaycaster = () => { - this.raycaster = new THREE.Raycaster(); - this.mouse = new THREE.Vector2(); - this.handleClickEvent = (event) => { - let x, y; - if (event.changedTouches) { - x = event.changedTouches[0].pageX; - y = event.changedTouches[0].pageY; - } else { - x = event.clientX; - y = event.clientY; - } - let rect = this.dom.getBoundingClientRect(); - this.mouse.x = ((x - rect.left) / rect.width) * 2 - 1; - this.mouse.y = -((y - rect.top) / rect.height) * 2 + 1; - event.preventDefault(); - this.raycaster.setFromCamera(this.mouse, this.camera); - let intersects = this.raycaster.intersectObjects(this.objects, true); - if (intersects.length === 0) { - return; - } - let objName = intersects[0].object.name; - this.objects.forEach(obj => { - if (obj.name === objName) { - this.outlinePass.selectedObjects = [obj]; - } - }); - if (objName && this.handleClick) { - this.handleClick(objName, x, y); - } - } - this.dom?.addEventListener("click", this.handleClickEvent, false); - } generateMesh = (fn) => { const loader = new FBXLoader(); fn(loader, this.addObject); - } - - setNewSelectedMesh = (objName) => { - for (const obj of this.objects) { - if (obj.name === objName) { - this.outlinePass.selectedObjects = [obj]; - break; - } - } } rePerspective = (maxHeight, normalHeight) => { @@ -214,7 +143,6 @@ this.camera.aspect = this.getFullWidth() / this.getFullHeight(); this.camera.updateProjectionMatrix(); this.renderer.setSize(this.getFullWidth(), this.getFullHeight()); - this.composer.setSize(this.getFullWidth(), this.getFullHeight()); }; window.addEventListener('resize', this.resizeHandler, false); } @@ -235,19 +163,10 @@ this.renderer.domElement = null; this.renderer = null; } - if (this.composer) { - this.composer.passes.forEach(pass => { - if (pass.dispose) { - pass.dispose(); - } - }); - this.composer = null; - } if (this.controls) { this.controls.dispose(); this.controls = null; } - this.dom?.removeEventListener("click", this.handleClickEvent); this.camera = null; this.objects = []; while (this.dom?.firstChild) { diff --git a/zy-acs-flow/src/map/insight/shelf/ShelfThree.js b/zy-acs-flow/src/map/insight/shelf/ShelfThree.js index 01b60c0..e239382 100644 --- a/zy-acs-flow/src/map/insight/shelf/ShelfThree.js +++ b/zy-acs-flow/src/map/insight/shelf/ShelfThree.js @@ -207,7 +207,7 @@ height * cameraPosScale, height * cameraPosScale ); - this.controls.target = new THREE.Vector3(0, maxHeight * 0.53, 0); + this.controls.target = new THREE.Vector3(0, maxHeight * 0.5, 0); } destroy = () => { -- Gitblit v1.9.1