添加agv信息显示

hw-ui/src/components/model/demo.vue

@@ -1,9 +1,16 @@
 <template>
   <div class="demo">
-    <div>全自动拆包机装配线</div>
-    <div class="chart">
-      <Chart ref="chart" />
+    <div class="bg" :style="`display:${online?'block':'none'}`">
+      <div>{{ data.agvName }}</div>
+      <div class="info">
+        <p>电量：{{ data.battery }}</p>
+        <p>速度：{{ data.speed }}</p>
+        <p>是否在线：{{ data.online }}</p>
+      </div>
     </div>
+    <div class="online" :style="`background-color:${data.online==='true'?'#1AAD19':'#ff0000'}`" @click="changeOnline"
+    ></div>
+    <!--    {{ data }}-->
   </div>
 </template>
 
@@ -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)
+    }
   }
-};
+}
 </script>
 <style scope>
-.demo{
-  background-color:#66b1ff;
+.demo {
   position: absolute;
-  padding:12px;
-  transform: translate(-100%,-100%);
+  transform: translate(-100%, -60%);
   color: #fff;
-  width:15vw;
-  height: auto;
+  width: 15vw;
+  height: 7.67vw;
 }
-.chart{
+
+.bg {
+  background-image: url("~@/assets/board/info.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  padding: 12px;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.chart {
   width: 100%;
   height: 200px;
 }
+
+.info {
+  position: absolute;
+  top: 30%;
+
+}
+
+.online {
+  position: absolute;
+  width: 1vw;
+  height: 1vw;
+  border-radius: 50%;
+  top: 60%;
+  left: 100%;
+  pointer-events: auto;
+  transform: translate(-50%, -50%);
+}
 </style>

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
 }

hw-ui/src/views/board/model/index.vue

@@ -3,7 +3,19 @@
     <div ref="threeJs" class="app-container">
     </div>
     <div ref="demo" class="model">
-      <Demo/>
+      <Demo ref="demoData"/>
+    </div>
+    <div ref="demo1" class="model">
+      <Demo ref="demo1Data"/>
+    </div>
+    <div ref="demo2" class="model">
+      <Demo ref="demo2Data"/>
+    </div>
+    <div ref="demo3" class="model">
+      <Demo ref="demo3Data"/>
+    </div>
+    <div ref="demo4" class="model">
+      <Demo ref="demo4Data"/>
     </div>
     <div style="position:absolute;top: 0;left: 0;">
       <el-input-number v-model="num" @change="handleChange" :step="0.1" label="描述文字"></el-input-number>
@@ -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)
     }
   }
 }