diff --git a/hw-ui/src/assets/board/info.png b/hw-ui/src/assets/board/info.png new file mode 100644 index 00000000..4bd2279b Binary files /dev/null and b/hw-ui/src/assets/board/info.png differ diff --git a/hw-ui/src/assets/board/info2.png b/hw-ui/src/assets/board/info2.png new file mode 100644 index 00000000..8f1bd4cb Binary files /dev/null and b/hw-ui/src/assets/board/info2.png differ diff --git a/hw-ui/src/components/model/demo.vue b/hw-ui/src/components/model/demo.vue index 61610f21..8d75a9a4 100644 --- a/hw-ui/src/components/model/demo.vue +++ b/hw-ui/src/components/model/demo.vue @@ -1,9 +1,16 @@ @@ -11,41 +18,69 @@ import Chart from '@/components/board/Chart' export default { - name: "Demo", - components: {Chart}, + name: 'Demo', + components: { Chart }, + data() { + return { + data: {}, + online: false + } + }, mounted() { - this.$refs.chart.setData({ - xAxis: { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] - }, - yAxis: { - type: 'value' - }, - series: [ - { - data: [150, 230, 224, 218, 135, 147, 260], - type: 'line' - } - ] - }) }, - metaInfo() { + methods: { + setData(e) { + this.data = e + }, + changeOnline() { + this.online = true + setTimeout(() => { + this.online = false + }, 5000) + } } -}; +} diff --git a/hw-ui/src/views/board/model/agv.js b/hw-ui/src/views/board/model/agv.js index 758efe6f..7b38aba3 100644 --- a/hw-ui/src/views/board/model/agv.js +++ b/hw-ui/src/views/board/model/agv.js @@ -156,6 +156,20 @@ let agvData = { } } +let agvLabel = { + '2AGV': null, + '2AGVData': null, + '3AGV': null, + '3AGVData': null, + '5CCAGV': null, + '5CCAGVData': null, + '5BFAGV': null, + '5BFAGVData': null, + '5CTU': null, + '5CTUData': null + +} + let loadAGVEnum = { 'beifushiAGV005': 'floor5BFAGV', 'chacheshiAGV005': 'floor5CCAGV', @@ -184,6 +198,13 @@ let LoadAGVLocationEnum = { 'chacheshiAGV002': 'floor2AGVGroupLocation', 'chacheshiAGV003': 'floor3AGVGroupLocation' } +let AGVLabelEnum = { + 'beifushiAGV005': '5BFAGV', + 'chacheshiAGV005': '5CCAGV', + 'CTU005': '5CTU', + 'chacheshiAGV002': '2AGV', + 'chacheshiAGV003': '3AGV' +} let axisEnum = { 'chacheshiAGV002': { x: 9, @@ -210,16 +231,19 @@ const loadingManager = new THREE.LoadingManager() loadingManager.onLoad = function() { isAGVLoading = true agvData.floor5CTUGroup.position.z = -205 - AGVAnimation('5CTU', '5CTU', 'x', 7) + agvLabel['5CTU'].position.z = -205 agvData.floor5CTUGroup.position.x = 100 + agvLabel['5CTU'].position.x = -205 + AGVAnimation('5CTU', '5CTU', 'x', 7) agvData.floor5CTUGroup.rotation.y = 90 * (Math.PI / 180) } -const loadAGV = (r) => { + const loadAGV = (r) => { r.forEach(e => { let agvName = loadAGVEnum[e] let agvGroupName = loadAGVGroupEnum[e] let agvDataName = LoadAGVDataEnum[e] let agvLocationName = LoadAGVLocationEnum[e] + let agvLabelData = AGVLabelEnum[e] let mtlLoader = new MTLLoader() mtlLoader.load(`/model/${e}/${e}.mtl`, materials => { @@ -242,11 +266,13 @@ const loadAGV = (r) => { axis[v] += axisDis[v] }) agvData[agvGroupName].position.set(axis.x, axis.y, axis.z) + agvLabel[agvLabelData].position.set(axis.x, axis.y, axis.z) agvData[agvLocationName] = axis object.position.set(-axis.x, -axis.y, -axis.z) agvData[agvDataName].x = axis.x agvData[agvDataName].z = axis.z scene.add(agvData[agvGroupName]) + scene.add(agvLabel[agvLabelData]) object.name = 'tishengji_tuopan' // scene.add(object) @@ -264,7 +290,7 @@ const loadAGV = (r) => { }) }) } -loadAGV(['chacheshiAGV002', 'chacheshiAGV003', 'chacheshiAGV005', 'beifushiAGV005', 'CTU005']) + // loadAGV(['chacheshiAGV003']) let AGVGroupEnum = { @@ -331,6 +357,7 @@ const AGVAnimationF = (item, type, newLocation = {}, time = 2000) => { let AGVLocationData = AGVDataEnum[item] let group = groupEnum[item] let floor = floorEnum[item] + let agvLabelData = agvLabel?.[item] switch (type) { case 'xz': { return new Promise(async(resolve, reject) => { @@ -350,10 +377,12 @@ const AGVAnimationF = (item, type, newLocation = {}, time = 2000) => { rotate = 360 - rotate } - await AGVAnimationF(item, 'rotate', { rotate: rotate }) + if (xlength === 0 && zlength === 0) { + + } else { + await AGVAnimationF(item, 'rotate', { rotate: rotate }) + } - // let distancex = locationx - agvData[AGVLocationData].x - // let distancez = locationz - agvData[AGVLocationData].z let tween = new TWEEN.Tween(agvData[group].position) .to({ x: locationx, z: locationz }, time) .onComplete(() => { @@ -366,6 +395,18 @@ const AGVAnimationF = (item, type, newLocation = {}, time = 2000) => { tween = null }) .start() + + if(agvLabelData){ + let tween1 = new TWEEN.Tween(agvLabelData.position) + .to({ x: locationx, z: locationz }, time) + .onComplete(() => { + tween1.stop() + tween1 = null + }) + .start() + } + + }) } case 'x': { @@ -390,6 +431,16 @@ const AGVAnimationF = (item, type, newLocation = {}, time = 2000) => { tween = null }) .start() + + if(agvLabelData){ + let tween1 = new TWEEN.Tween(agvLabelData.position) + .to({ x: location }, time) + .onComplete(() => { + tween1.stop() + tween1 = null + }) + .start() + } }) } case 'z': { @@ -454,11 +505,12 @@ const AGVAnimation = (e, item, type, newLocation = {}, time = 2000) => { } } - export { agvData, AGVAnimation, floorOrigin, floorData1, - isAGVLoading + isAGVLoading, + agvLabel, + loadAGV } diff --git a/hw-ui/src/views/board/model/index.vue b/hw-ui/src/views/board/model/index.vue index 19e5095d..10b51bd5 100644 --- a/hw-ui/src/views/board/model/index.vue +++ b/hw-ui/src/views/board/model/index.vue @@ -3,7 +3,19 @@
- + +
+
+ +
+
+ +
+
+ +
+
+
@@ -92,7 +104,7 @@ import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer' import Demo from '@/components/model/demo.vue' -import {getAgvDeviceStatus} from '@/api/board/model' +import { getAgvDeviceStatus } from '@/api/board/model' import { tuopanInishengji, @@ -116,7 +128,7 @@ import { } from './setThree' import { - AGVAnimation, agvData,floorOrigin,floorData1,isAGVLoading + AGVAnimation, agvData, floorOrigin, floorData1, isAGVLoading, agvLabel, loadAGV } from './agv' const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 @@ -129,72 +141,101 @@ export default { num1: 90, floor: 1, tuopanFloor: 1, - fx:'', - rotate:0 + fx: '', + rotate: 0 } }, mounted() { - setInterval(()=>{ - if(isLoading && isAGVLoading){ - getAgvDeviceStatus().then(e=>{ - console.log(e) - e.data.agvStatusList.forEach(v=>{ - if(v.agvName === "2楼叉车"){ - let x = (v.posX - floorOrigin.floor2Data.x) / floorData1.floor2Data.x - let z = (v.posY - floorOrigin.floor2Data.y) / floorData1.floor2Data.z - console.log({x,z}) + setInterval(() => { + if (isLoading && isAGVLoading) { + getAgvDeviceStatus().then(e => { + this.modelData = e.data + e.data.agvStatusList.forEach(v => { + if (v.agvName === '2楼叉车') { + this.$refs.demoData.setData(v) + let x = (v.posX - floorOrigin.floor2Data.x) / floorData1.floor2Data.x + let z = (v.posY - floorOrigin.floor2Data.y) / floorData1.floor2Data.z AGVAnimation('2AGV', '2AGV', 'xz', { x: x * 100, z: z * 100 }) } - if(v.agvName === "3楼叉车"){ - let x = (v.posX - floorOrigin.floor3Data.x) / floorData1.floor3Data.x - let z = (v.posY - floorOrigin.floor3Data.y) / floorData1.floor3Data.z + if (v.agvName === '3楼叉车') { + this.$refs.demo1Data.setData(v) + let x = (v.posX - floorOrigin.floor3Data.x) / floorData1.floor3Data.x + let z = (v.posY - floorOrigin.floor3Data.y) / floorData1.floor3Data.z AGVAnimation('3AGV', '3AGV', 'xz', { x: x * 100, z: z * 100 }) } - if(v.agvName === "5楼叉车"){ - let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x - let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z + if (v.agvName === '5楼叉车') { + this.$refs.demo2Data.setData(v) + let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x + let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z AGVAnimation('5CCAGV', '5CCAGV', 'xz', { x: x * 100, z: z * 100 }) } - if(v.agvName === "5楼背负式"){ - let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x - let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z + if (v.agvName === '5楼背负式') { + this.$refs.demo3Data.setData(v) + let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x + let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z AGVAnimation('5BFAGV', '5BFAGV', 'xz', { x: x * 100, z: z * 100 }) } - if(v.agvName === "5楼CTU"){ - let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x - let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z + if (v.agvName === '5楼CTU') { + this.$refs.demo4Data.setData(v) + let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x + let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z AGVAnimation('5CTU', '5CTU', 'x', { x: x * 100, z: z * 100 }) } }) - + let deviseInfo = [] + e.data.realtimeStatusList.forEach(v => { + if (deviseInfo.map(vv => vv.deviceId).includes(v.deviceId)) { + deviseInfo[deviseInfo.indexOf(deviseInfo.find(vv => vv.deviceId === v.deviceId))].info.push({ + name: v.statusName, + value: v.statusValue, + id: v.statusId, + code: v.statusCode + }) + } else { + deviseInfo.push({ + deviceId: v.deviceId, + deviceName: v.deviceName, + info: [ + { + name: v.statusName, + value: v.statusValue, + id: v.statusId, + code: v.statusCode + } + ] + }) + } + }) + console.log(deviseInfo) }) } - },2500) + }, 2500) this.$refs.threeJs.appendChild(renderer.domElement) // controls.rotateSpeed = -controls.rotateSpeed; // controls.enableZoom = false // loadF([ 'tishengji_tuopan']) - loadF(['2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'AGVchongdianzhuang005', 'changfang002', 'changfang003', 'changfang005', 'liku005', 'quanzidongchaibaojizhaungpeixian003', 'tishengji','tishengji_keyidongbufen','tishengji_tuopan','Uxingxian']) + loadF(['2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'AGVchongdianzhuang005', 'changfang002', 'changfang003', 'changfang005', 'liku005', 'quanzidongchaibaojizhaungpeixian003', 'tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan', 'Uxingxian']) // loadF(['changfang002', 'changfang003', 'changfang005']) - // 创建CSS2DObject -// const label = this.$refs.demo -// const labelObject = new CSS2DObject(label) -// labelObject.position.set(-1000, 333, 130) // 根据需要调整位置 -// scene.add(labelObject) + agvLabel['2AGV'] = new CSS2DObject(this.$refs.demo) + agvLabel['3AGV'] = new CSS2DObject(this.$refs.demo1) + agvLabel['5CCAGV'] = new CSS2DObject(this.$refs.demo2) + agvLabel['5BFAGV'] = new CSS2DObject(this.$refs.demo3) + agvLabel['5CTU'] = new CSS2DObject(this.$refs.demo4) + + loadAGV(['chacheshiAGV002', 'chacheshiAGV003', 'chacheshiAGV005', 'beifushiAGV005', 'CTU005']) // setInterval(()=>{ - // labelObject.position.x +=0.1 - // labelObject.position.y +=0.1 - // labelObject.position.z +=0.1 + // labelObject2AGV.position.x +=0.1 + // labelObject2AGV.position.y +=0.1 + // labelObject2AGV.position.z +=0.1 // },40) // 渲染循环 - }, methods: { handleChange() { @@ -232,8 +273,8 @@ export default { tuopanLocation.x = storeyWidth[this.tuopanFloor] }, agvAn() { - this.rotate -=this.num1 - AGVAnimation('3AGV','rotate',this.rotate,) + this.rotate -= this.num1 + AGVAnimation('3AGV', 'rotate', this.rotate) } } }