From ae81dbb1364e69cc8c73462795a64cbc6316c1fc Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期四, 17 十月 2024 10:03:50 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/http.js | 19 ++ zy-acs-flow/src/map/insight/agv/AgvMain.jsx | 134 ++++++++++++++ zy-acs-flow/public/model/agv/fork.fbx | 0 zy-acs-flow/src/map/insight/index.jsx | 2 zy-acs-flow/src/map/insight/agv/index.jsx | 51 +++++ zy-acs-manager/src/main/java/com/zy/acs/manager/manager/controller/MapController.java | 15 + zy-acs-flow/public/model/agv/body.fbx | 0 zy-acs-flow/src/map/insight/agv/AgvThree.js | 275 ++++++++++++++++++++++++++++++ zy-acs-flow/public/model/agv/loader.fbx | 0 zy-acs-manager/src/main/java/com/zy/acs/manager/manager/controller/result/MapAgvVo.java | 13 + zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx | 8 11 files changed, 501 insertions(+), 16 deletions(-) diff --git a/zy-acs-flow/public/model/agv/body.fbx b/zy-acs-flow/public/model/agv/body.fbx new file mode 100644 index 0000000..618f057 --- /dev/null +++ b/zy-acs-flow/public/model/agv/body.fbx Binary files differ diff --git a/zy-acs-flow/public/model/agv/fork.fbx b/zy-acs-flow/public/model/agv/fork.fbx new file mode 100644 index 0000000..05a3597 --- /dev/null +++ b/zy-acs-flow/public/model/agv/fork.fbx Binary files differ diff --git a/zy-acs-flow/public/model/agv/loader.fbx b/zy-acs-flow/public/model/agv/loader.fbx new file mode 100644 index 0000000..15f3ac3 --- /dev/null +++ b/zy-acs-flow/public/model/agv/loader.fbx Binary files differ diff --git a/zy-acs-flow/src/map/http.js b/zy-acs-flow/src/map/http.js index b329a1f..663e064 100644 --- a/zy-acs-flow/src/map/http.js +++ b/zy-acs-flow/src/map/http.js @@ -108,7 +108,6 @@ }) } - export const getLocGroup = async (row, bay, callback) => { await request.post('/map/shelf/group', { row: row, @@ -127,3 +126,21 @@ console.error(error.message); }) } + +export const getAgvInfo = async (agvNo, callback) => { + await request.post('/map/agv/info', { + agvNo: agvNo, + }, { + headers: { 'Content-Type': 'application/x-www-form-urlencoded' } + }).then((res) => { + const { code, msg, data } = res.data; + if (code === 200) { + callback(data) + } else { + notify.error(msg); + } + }).catch((error) => { + notify.error(error.message); + console.error(error.message); + }) +} diff --git a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx new file mode 100644 index 0000000..ada1503 --- /dev/null +++ b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx @@ -0,0 +1,134 @@ +import React, { useRef, useEffect, useState } from 'react'; +import { useTranslate } from 'react-admin'; +import { + Box, + CircularProgress, + Grid, + Typography, + Paper, + Button, + Divider, + Stack, +} from '@mui/material'; +import ShelfThree from './AgvThree'; +import { getAgvInfo } from '../../http'; +import { grey } from '@mui/material/colors'; + +let shelfThree; + +const startThree = (dom) => { + shelfThree = new ShelfThree(dom); + shelfThree.startup(); +} + +const endThree = () => { + if (shelfThree) { + shelfThree.destroy(); + shelfThree = null; + } +} + +const renderThree = (info, curAgvNo) => { + if (info && shelfThree) { + shelfThree.generateMesh((loader, addObject) => { + const promises = []; + promises.push(new Promise((resolve) => { + loader.load('model/agv.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.castShadow = true; + child.receiveShadow = true; + } + }); + addObject(mesh); + resolve(); + }) + })); + + Promise.all(promises).then(() => { + shelfThree.setNewSelectedMesh(curLocNo); + shelfThree.rePerspective(singleHeight * info.length, 500); + }).catch(error => { + console.error(error); + }); + }) + } +} + +const AgvMain = (props) => { + const { data, curAgvNo, setCurAgvNo } = props; + const translate = useTranslate(); + const containerRef = useRef(); + const [loading, setLoading] = useState(true); + const [info, setInfo] = useState(null); + + useEffect(() => { + if (data) { + getAgvInfo(data.no, (response) => { + setInfo(response); + setCurAgvNo(data.no); + }); + } + }, [data]); + + useEffect(() => { + if (info) { + endThree(); + setLoading(true); + setTimeout(() => { + startThree(containerRef.current); + shelfThree.handleClick = (objName) => { + setCurAgvNo(objName); + }; + renderThree(info, curAgvNo); + setLoading(false); + }, 300) + } + return endThree; + }, [info]); + + return ( + <Box display="flex" height="100%"> + <Box + position="relative" + width="50%" + height="100%" + ref={containerRef} + style={{ backgroundColor: '#7a7a7a' }} + > + {loading && ( + <Box + position="absolute" + top="50%" + left="50%" + style={{ transform: 'translate(-50%, -50%)' }} + > + <CircularProgress sx={{ color: grey[50] }} /> + </Box> + )} + </Box> + <Box width="50%" height="100%" overflow="auto" pl={1}> + </Box> + </Box> + ); +} + +export default AgvMain; \ No newline at end of file diff --git a/zy-acs-flow/src/map/insight/agv/AgvThree.js b/zy-acs-flow/src/map/insight/agv/AgvThree.js new file mode 100644 index 0000000..01b60c0 --- /dev/null +++ b/zy-acs-flow/src/map/insight/agv/AgvThree.js @@ -0,0 +1,275 @@ +import * as THREE from 'three' +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; + +export default class ShelfThree { + + constructor(dom) { + this.dom = dom; + + this.objects = []; + } + + startup = () => { + this.scene = this.initScene(); + this.camera = this.initCamera(); + this.renderer = this.initRenderer(); + this.controls = this.initControls(); + this.stats = this.initStats(); + this.composer = this.initComposer(); + this.windowResize(); + this.initRaycaster(); + initLight(this.scene); + + this.animate(); + } + + animate = () => { + this.animationFrame = requestAnimationFrame(this.animate); + this.render(); + TWEEN.update(); + } + + render = () => { + // this.renderer.render(this.scene, this.camera); + this.composer.render(); // use special effects + this.stats.update(); + // Rotate the scene + this.controls.update() + this.controls.autoRotateSpeed = 2; + } + + getFullWidth = () => { + return this.dom?.offsetWidth; + } + + getFullHeight = () => { + return this.dom?.offsetHeight; + } + + addObject = (object) => { + this.scene?.add(object); + this.objects?.push(object); + } + + initScene = () => { + const scene = new THREE.Scene(); + // scene.background = new THREE.Color(0xf8f8f8); + scene.background = new THREE.Color(0x7a7a7a); + scene.fog = new THREE.Fog(scene.background, 1, 5000); + if (help) { + scene.add(new THREE.AxesHelper(1000)); + } + return scene; + } + + initCamera = () => { + const camera = new THREE.PerspectiveCamera(70, this.getFullWidth() / this.getFullHeight(), 1, 60000); + camera.position.set(-400, 400, 400); + this.scene.add(camera); + return camera; + } + + initRenderer = () => { + const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); + renderer.setClearAlpha(0); + // renderer.useLegacyLights = false; // 鏃х増鍏夋簮 閲嶈 + renderer.shadowMap.enabled = true; + // this.renderer.shadowMap.type = THREE.BasicShadowMap; // 鏈�浣庨槾褰� + // renderer.toneMapping = THREE.ReinhardToneMapping; + renderer.toneMapping = THREE.ACESFilmicToneMapping; + renderer.setPixelRatio(window.devicePixelRatio); + 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); + // pixel ratio + 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); + // antialias + const effectFXAA = new ShaderPass(FXAAShader); + effectFXAA.uniforms['resolution'].value.set(1 / newWidth, 1 / newHeight); + composer.addPass(effectFXAA); + // outline + this.outlinePass = new OutlinePass(new THREE.Vector2(this.getFullWidth(), this.getFullHeight()), this.scene, this.camera); + this.outlinePass.visibleEdgeColor.set('#ffffff'); // outline color + this.outlinePass.edgeStrength = 10; // outline weight + composer.addPass(this.outlinePass); + return composer; + } + + initControls = () => { + const controls = new OrbitControls(this.camera, this.renderer.domElement); + // controls.enableRotate = false; // 绂佺敤鏁翠綋鏃嬭浆鍔熻兘 + controls.enablePan = false; // 鍏佽骞崇Щ + controls.enableDamping = true; // 寮�鍚樆灏� + controls.dampingFactor = 0.08; // 闃诲凹鍥犲瓙 + controls.enableZoom = true; // 鍏佽缂╂斁 + // controls.minDistance = 1; // 鏈�灏忕缉鏀捐窛绂� + // controls.maxDistance = 30; // 鏈�澶х缉鏀捐窛绂� + controls.minPolarAngle = 0; // 鏈�灏忎刊浠拌搴︼紙鍚戜笅鐪嬶級 + controls.minPolarAngle = Math.PI / 2.1; + controls.maxPolarAngle = Math.PI / 2.1; // 鏈�澶т刊浠拌搴︼紙鍚戜笂鐪嬶級 + controls.rotateSpeed = 0.6; // 瑙嗚绉诲姩閫熷害鍑忔參 + controls.autoRotate = true; // 鑷姩鏃嬭浆 + + controls.target = new THREE.Vector3(0, 250, 0) // 灞忓箷涓績鐐� 骞虫浛 camera鐨刲ookAt + return controls; + } + + initStats = () => { + const stats = new Stats(); + this.dom?.appendChild(stats.dom); + if (!help) { + stats.domElement.style.display = 'none'; + } + return stats; + } + + windowResize = () => { + this.resizeHandler = () => { + this.camera.aspect = this.getFullWidth() / this.getFullHeight(); + this.camera.updateProjectionMatrix(); + this.renderer.setSize(this.getFullWidth(), this.getFullHeight()); + }; + window.addEventListener('resize', this.resizeHandler, false); + } + + initRaycaster = () => { + const raycaster = new THREE.Raycaster(); + const 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(); + mouse.x = ((x - rect.left) / rect.width) * 2 - 1; + mouse.y = -((y - rect.top) / rect.height) * 2 + 1; + event.preventDefault(); + raycaster.setFromCamera(mouse, this.camera); + let intersects = 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 mesh of this.objects) { + if (mesh.name === objName) { + this.outlinePass.selectedObjects = [mesh]; + break; + } + } + } + + rePerspective = (maxHeight, normalHeight) => { + const height = Math.max(maxHeight, normalHeight) + const cameraPosScale = 0.7; + this.camera.position.set( + -height * cameraPosScale, + height * cameraPosScale, + height * cameraPosScale + ); + this.controls.target = new THREE.Vector3(0, maxHeight * 0.53, 0); + } + + destroy = () => { + cancelAnimationFrame(this.animationFrame); + window.removeEventListener('resize', this.resizeHandler); + if (this.scene) { + while (this.scene.children.length > 0) { + this.removeEntity(this.scene.children[0]); + } + this.scene = null; + } + if (this.renderer) { + this.renderer.dispose(); + this.renderer.forceContextLoss(); + this.renderer.context = null; + 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) { + this.dom.removeChild(this.dom.firstChild); + } + } + + removeEntity = (object) => { + if (object.material) object.material.dispose(); + if (object.geometry) object.geometry.dispose(); + if (object.texture) object.texture.dispose(); + this.scene.remove(object); + } +}; + +const initLight = (scene) => { + const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 6); + hemiLight.color.setHSL(0.6, 1, 0.6); + hemiLight.groundColor.setHSL(0.095, 1, 0.75); + hemiLight.position.set(0, 1500, 0); + scene.add(hemiLight); + + const dirLight = new THREE.DirectionalLight(0xffffff, 2.5); + dirLight.color.setHSL(0.1, 1, 0.95); + dirLight.position.set(-10, 10, 10); + dirLight.position.multiplyScalar(30); + scene.add(dirLight); + + const dirLight1 = new THREE.DirectionalLight(0xffffff, 2.5); + dirLight1.color.setHSL(0.1, 1, 0.95); + dirLight1.position.set(10, 10, -10); + dirLight1.position.multiplyScalar(30); + scene.add(dirLight1); +} \ No newline at end of file diff --git a/zy-acs-flow/src/map/insight/agv/index.jsx b/zy-acs-flow/src/map/insight/agv/index.jsx index 5d678c0..af002ed 100644 --- a/zy-acs-flow/src/map/insight/agv/index.jsx +++ b/zy-acs-flow/src/map/insight/agv/index.jsx @@ -1,11 +1,54 @@ - +import React, { useState, useRef, useEffect } from 'react'; +import { useTranslate } from "react-admin"; +import { Box, Typography, Tabs, Tab, Stack, useTheme, Divider } from '@mui/material'; +// import AgvMain from './AgvMain'; +import JsonShow from '../../JsonShow'; const AgvInsight = (props) => { + const { sprite } = props; + const theme = useTheme(); + const themeMode = theme.palette.mode; + const translate = useTranslate(); + + const [activeTab, setActiveTab] = useState(0); + const [curAgvNo, setCurAgvNo] = useState(null); + + const handleTabChange = (event, newValue) => { + setActiveTab(newValue); + }; return ( - <> - <h1>Agv</h1> - </> + <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}> + <Tabs + value={activeTab} + onChange={handleTabChange} + centered + sx={{ mb: 0 }} + > + <Tab label={translate('page.map.insight.title')} /> + <Tab label={'JSON'} /> + </Tabs> + + <Divider /> + + <Box flex={1} pt={2}> + {activeTab === 0 && ( + <> + </> + // <AgvMain + // data={sprite?.data} + // curAgvNo={curAgvNo} + // setCurAgvNo={setCurAgvNo} + // /> + )} + {activeTab === 1 && ( + <JsonShow + data={sprite?.data} + height={550} + /> + )} + </Box> + </Box> ) } diff --git a/zy-acs-flow/src/map/insight/index.jsx b/zy-acs-flow/src/map/insight/index.jsx index a601a51..ec213a8 100644 --- a/zy-acs-flow/src/map/insight/index.jsx +++ b/zy-acs-flow/src/map/insight/index.jsx @@ -70,7 +70,7 @@ {deviceType === DEVICE_TYPE.AGV && ( <> <AgvInsight - + sprite={sprite} /> </> )} diff --git a/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx b/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx index fe2b0fb..275fbac 100644 --- a/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx +++ b/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx @@ -1,5 +1,4 @@ import React, { useRef, useEffect, useState } from 'react'; -import * as THREE from 'three'; import { useTranslate } from 'react-admin'; import { Box, @@ -10,13 +9,10 @@ Button, Divider, Stack, - Card, - CardContent, } from '@mui/material'; import ShelfThree from './ShelfThree'; import { getLocGroup } from '../../http'; import { grey } from '@mui/material/colors'; -import { styled } from '@mui/system'; let shelfThree; @@ -117,10 +113,6 @@ } return endThree; }, [info]); - - useEffect(() => { - console.log(selectedLoc); - }, [selectedLoc]) return ( <Box display="flex" height="100%"> diff --git a/zy-acs-manager/src/main/java/com/zy/acs/manager/manager/controller/MapController.java b/zy-acs-manager/src/main/java/com/zy/acs/manager/manager/controller/MapController.java index aebae1e..299d4e2 100644 --- a/zy-acs-manager/src/main/java/com/zy/acs/manager/manager/controller/MapController.java +++ b/zy-acs-manager/src/main/java/com/zy/acs/manager/manager/controller/MapController.java @@ -17,8 +17,9 @@ import com.zy.acs.manager.core.service.floyd.FloydNavigateService; import com.zy.acs.manager.manager.controller.param.MapDataParam; import com.zy.acs.manager.manager.controller.param.MapParam; -import com.zy.acs.manager.manager.entity.*; +import com.zy.acs.manager.manager.controller.result.MapAgvVo; import com.zy.acs.manager.manager.entity.Map; +import com.zy.acs.manager.manager.entity.*; import com.zy.acs.manager.manager.enums.AgvStsType; import com.zy.acs.manager.manager.mapper.MapMapper; import com.zy.acs.manager.manager.service.*; @@ -124,7 +125,17 @@ return R.ok().add(locList); } - + @PostMapping("/agv/info") + public R agvInfo(@RequestParam(required = false) String agvNo) { + if (Cools.isEmpty(agvNo)) { + return R.error(); + } + Agv agv = agvService.selectByUuid(agvNo); + AgvDetail agvDetail = agvDetailService.selectByAgvNo(agvNo); + MapAgvVo vo = new MapAgvVo(); + vo.setAgvNo(agv.getUuid()); + return R.ok().add(vo); + } diff --git a/zy-acs-manager/src/main/java/com/zy/acs/manager/manager/controller/result/MapAgvVo.java b/zy-acs-manager/src/main/java/com/zy/acs/manager/manager/controller/result/MapAgvVo.java new file mode 100644 index 0000000..9243e1c --- /dev/null +++ b/zy-acs-manager/src/main/java/com/zy/acs/manager/manager/controller/result/MapAgvVo.java @@ -0,0 +1,13 @@ +package com.zy.acs.manager.manager.controller.result; + +import lombok.Data; + +/** + * Created by vincent on 10/17/2024 + */ +@Data +public class MapAgvVo { + + private String agvNo; + +} -- Gitblit v1.9.1