You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
475 lines
15 KiB
Vue
475 lines
15 KiB
Vue
<template>
|
|
<div>
|
|
<div class="bottomBg">
|
|
<div class="item1F" @click="toggle1">1F</div>
|
|
<div class="item2F" @click="toggle2">2F</div>
|
|
<div class="item3F" @click="toggle3">3F</div>
|
|
<div class="item4F" @click="toggle4">4F</div>
|
|
<div class="item5F" @click="toggle5">5F</div>
|
|
</div>
|
|
<div ref="threeJs" class="app-container">
|
|
</div>
|
|
<div ref="modelInfo" class="model" style="display: inline-block">
|
|
<Demo ref="modelInfoData"/>
|
|
</div>
|
|
<div ref="modelInfo1" class="model">
|
|
<Demo ref="modelInfo1Data"/>
|
|
</div>
|
|
<div ref="modelInfo2" class="model">
|
|
<Demo ref="modelInfo2Data"/>
|
|
</div>
|
|
<div ref="modelInfo3" class="model">
|
|
<Demo ref="modelInfo3Data"/>
|
|
</div>
|
|
<div ref="modelInfo4" class="model">
|
|
<Demo ref="modelInfo4Data"/>
|
|
</div>
|
|
<div style="position:absolute;top: 0;left: 0;">
|
|
<el-input-number v-model="num" @change="handleChange" :step="0.1" label="描述文字"></el-input-number>
|
|
<el-select v-model="floor" placeholder="去几楼" @change="toFloor">
|
|
<el-option
|
|
label="1楼"
|
|
:value="1"
|
|
>
|
|
</el-option>
|
|
<el-option
|
|
label="2楼"
|
|
:value="2"
|
|
>
|
|
</el-option>
|
|
<el-option
|
|
label="3楼"
|
|
:value="3"
|
|
>
|
|
</el-option>
|
|
<el-option
|
|
label="4楼"
|
|
:value="4"
|
|
>
|
|
</el-option>
|
|
<el-option
|
|
label="5楼"
|
|
:value="5"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<el-button type="primary" @click="tuopanReset">托盘复位</el-button>
|
|
<el-button type="primary" @click="tuopanOut">托盘推出</el-button>
|
|
<el-button type="primary" @click="removetuopan">删除托盘</el-button>
|
|
<el-button type="primary" @click="toggle">显示/隐藏</el-button>
|
|
<el-select v-model="tuopanFloor" placeholder="去几楼">
|
|
<el-option
|
|
label="1楼"
|
|
:value="1"
|
|
>
|
|
</el-option>
|
|
<el-option
|
|
label="2楼"
|
|
:value="2"
|
|
>
|
|
</el-option>
|
|
<el-option
|
|
label="3楼"
|
|
:value="3"
|
|
>
|
|
</el-option>
|
|
<el-option
|
|
label="4楼"
|
|
:value="4"
|
|
>
|
|
</el-option>
|
|
<el-option
|
|
label="5楼"
|
|
:value="5"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<el-button type="primary" @click="addtuopan">添加托盘</el-button>
|
|
<el-select v-model="fx" placeholder="方向">
|
|
<el-option
|
|
label="x"
|
|
value="x"
|
|
>
|
|
</el-option>
|
|
<el-option
|
|
label="z"
|
|
value="z"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<el-input-number v-model="num1" :step="0.1" label="描述文字"></el-input-number>
|
|
<el-button type="primary" @click="agvAn">移动agv</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import * as THREE from 'three'
|
|
import * as TWEEN from '@tweenjs/tween.js'
|
|
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
|
|
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 {
|
|
tuopanInishengji,
|
|
tishengjiAnimation,
|
|
tuopanXAnimation,
|
|
tuopanYAnimation,
|
|
addtuopan
|
|
} from './animation'
|
|
|
|
import {
|
|
keyidongModel,
|
|
tuopanModel,
|
|
scene,
|
|
camera,
|
|
renderer,
|
|
loadF1,
|
|
loadF2,
|
|
loadF3,
|
|
loadF4,
|
|
loadF5,
|
|
storeyHeight,
|
|
storeyWidth,
|
|
tuopanLocation,
|
|
animationLine, isLoading,
|
|
floor1Model,
|
|
floor2Model,
|
|
floor3Model,
|
|
floor4Model,
|
|
floor5Model, loadFOther, otherModel
|
|
} from './setThree'
|
|
|
|
import {
|
|
AGVAnimation, agvData, floorOrigin, floorData1, isAGVLoading, agvLabel, loadAGV
|
|
} from './agv'
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
export default {
|
|
name: 'Model',
|
|
components: { Demo },
|
|
data() {
|
|
return {
|
|
num: -60,
|
|
num1: 90,
|
|
floor: 1,
|
|
tuopanFloor: 1,
|
|
fx: '',
|
|
rotate: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
setInterval(() => {
|
|
if (isLoading && isAGVLoading) {
|
|
getAgvDeviceStatus().then(e => {
|
|
this.modelData = e.data
|
|
e.data.agvStatusList.forEach(v => {
|
|
if (v.agvName === '2楼叉车') {
|
|
this.$refs.modelInfoData.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楼叉车') {
|
|
this.$refs.modelInfo1Data.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楼叉车') {
|
|
this.$refs.modelInfo2Data.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楼背负式') {
|
|
this.$refs.modelInfo3Data.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') {
|
|
this.$refs.modelInfo4Data.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)
|
|
this.$refs.threeJs.appendChild(renderer.domElement)
|
|
|
|
// controls.rotateSpeed = -controls.rotateSpeed;
|
|
// controls.enableZoom = false
|
|
|
|
// loadF([ 'tishengji_tuopan'])
|
|
// loadF1([ 'changfang005', 'liku005', 'quanzidongchaibaojizhaungpeixian003', 'tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan', 'Uxingxian'])
|
|
// loadF2(['2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'AGVchongdianzhuang005','changfang002', 'changfang003',])
|
|
|
|
loadF1([])
|
|
loadF2(['AGVchongdianzhuang002', 'changfang002'])
|
|
loadF3(['AGVchongdianzhuang003', 'changfang003', 'quanzidongchaibaojizhaungpeixian003'])
|
|
loadF4([])
|
|
loadF5(['AGVchongdianzhuang005', '2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'changfang005', 'liku005', 'Uxingxian'])
|
|
loadFOther(['tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan'])
|
|
// loadF(['changfang002', 'changfang003', 'changfang005'])
|
|
|
|
// 创建CSS2DObject
|
|
agvLabel['2AGV'] = new CSS2DObject(this.$refs.modelInfo)
|
|
agvLabel['3AGV'] = new CSS2DObject(this.$refs.modelInfo1)
|
|
agvLabel['5CCAGV'] = new CSS2DObject(this.$refs.modelInfo2)
|
|
agvLabel['5BFAGV'] = new CSS2DObject(this.$refs.modelInfo3)
|
|
agvLabel['5CTU'] = new CSS2DObject(this.$refs.modelInfo4)
|
|
|
|
loadAGV(['chacheshiAGV002', 'chacheshiAGV003', 'chacheshiAGV005', 'beifushiAGV005', 'CTU005'])
|
|
|
|
// setInterval(()=>{
|
|
// labelObject2AGV.position.x +=0.1
|
|
// labelObject2AGV.position.y +=0.1
|
|
// labelObject2AGV.position.z +=0.1
|
|
// },40)
|
|
|
|
// 渲染循环
|
|
|
|
},
|
|
methods: {
|
|
handleChange() {
|
|
AGVAnimation('5CTU', '5CTU', 'x', this.num)
|
|
// tuopanModel.position.x = this.num
|
|
},
|
|
toFloor(e) {
|
|
animationLine.push(() => {
|
|
if (tuopanInishengji) {
|
|
return Promise.all([tishengjiAnimation(keyidongModel, e, storeyHeight[e]), tuopanYAnimation(tuopanModel, e, storeyHeight[e])])
|
|
} else {
|
|
animationLine.push(() => tishengjiAnimation(keyidongModel, e, storeyHeight[e]))
|
|
}
|
|
})
|
|
},
|
|
tuopanReset() {
|
|
animationLine.push(() => tuopanXAnimation(tuopanModel, 0))
|
|
},
|
|
tuopanOut() {
|
|
animationLine.push(() => tuopanXAnimation(tuopanModel, storeyWidth[tuopanLocation.floor]))
|
|
},
|
|
removetuopan() {
|
|
scene.remove(tuopanModel)
|
|
tuopanModel = null
|
|
},
|
|
async addtuopan() {
|
|
scene.remove(tuopanModel)
|
|
tuopanModel = null
|
|
tuopanModel = await addtuopan({ scene })
|
|
scene.add(tuopanModel)
|
|
tuopanModel.position.x = storeyWidth[this.tuopanFloor]
|
|
tuopanModel.position.y = storeyHeight[this.tuopanFloor]
|
|
tuopanLocation.floor = this.tuopanFloor
|
|
tuopanLocation.y = storeyHeight[this.tuopanFloor]
|
|
tuopanLocation.x = storeyWidth[this.tuopanFloor]
|
|
},
|
|
agvAn() {
|
|
this.rotate -= this.num1
|
|
AGVAnimation('3AGV', 'rotate', this.rotate)
|
|
},
|
|
toggle() {
|
|
console.log(agvData)
|
|
floor1Model.visible = true
|
|
floor2Model.visible = true
|
|
floor3Model.visible = true
|
|
floor4Model.visible = true
|
|
floor5Model.visible = true
|
|
otherModel.visible = true
|
|
agvData.floor2AGVGroup.visible = true
|
|
agvData.floor3AGVGroup.visible = true
|
|
agvData.floor5BFAGVGroup.visible = true
|
|
agvData.floor5CCAGVGroup.visible = true
|
|
agvData.floor5CTUGroup.visible = true
|
|
this.$refs.modelInfoData.$el.style.display = 'inline-block'
|
|
this.$refs.modelInfo1Data.$el.style.display = 'inline-block'
|
|
this.$refs.modelInfo2Data.$el.style.display = 'inline-block'
|
|
this.$refs.modelInfo3Data.$el.style.display = 'inline-block'
|
|
this.$refs.modelInfo4Data.$el.style.display = 'inline-block'
|
|
},
|
|
toggle1() {
|
|
floor1Model.visible = true
|
|
floor2Model.visible = false
|
|
floor3Model.visible = false
|
|
floor4Model.visible = false
|
|
floor5Model.visible = false
|
|
otherModel.visible = false
|
|
this.$refs.modelInfoData.$el.style.display = 'none'
|
|
this.$refs.modelInfo1Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo2Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo3Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo4Data.$el.style.display = 'none'
|
|
agvData.floor2AGVGroup.visible = false
|
|
agvData.floor3AGVGroup.visible = false
|
|
agvData.floor5BFAGVGroup.visible = false
|
|
agvData.floor5CCAGVGroup.visible = false
|
|
agvData.floor5CTUGroup.visible = false
|
|
},
|
|
toggle2() {
|
|
floor1Model.visible = false
|
|
floor2Model.visible = true
|
|
floor3Model.visible = false
|
|
floor4Model.visible = false
|
|
floor5Model.visible = false
|
|
otherModel.visible = false
|
|
agvData.floor2AGVGroup.visible = true
|
|
agvData.floor3AGVGroup.visible = false
|
|
agvData.floor5BFAGVGroup.visible = false
|
|
agvData.floor5CCAGVGroup.visible = false
|
|
agvData.floor5CTUGroup.visible = false
|
|
this.$refs.modelInfoData.$el.style.display = 'inline-block'
|
|
this.$refs.modelInfo1Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo2Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo3Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo4Data.$el.style.display = 'none'
|
|
},
|
|
toggle3() {
|
|
floor1Model.visible = false
|
|
floor2Model.visible = false
|
|
floor3Model.visible = true
|
|
floor4Model.visible = false
|
|
floor5Model.visible = false
|
|
otherModel.visible = false
|
|
agvData.floor2AGVGroup.visible = false
|
|
agvData.floor3AGVGroup.visible = true
|
|
agvData.floor5BFAGVGroup.visible = false
|
|
agvData.floor5CCAGVGroup.visible = false
|
|
agvData.floor5CTUGroup.visible = false
|
|
this.$refs.modelInfoData.$el.style.display = 'none'
|
|
this.$refs.modelInfo1Data.$el.style.display = 'inline-block'
|
|
this.$refs.modelInfo2Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo3Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo4Data.$el.style.display = 'none'
|
|
},
|
|
toggle4() {
|
|
floor1Model.visible = false
|
|
floor2Model.visible = false
|
|
floor3Model.visible = false
|
|
floor4Model.visible = true
|
|
floor5Model.visible = false
|
|
otherModel.visible = false
|
|
this.$refs.modelInfoData.$el.style.display = 'none'
|
|
this.$refs.modelInfo1Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo2Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo3Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo4Data.$el.style.display = 'none'
|
|
agvData.floor2AGVGroup.visible = false
|
|
agvData.floor3AGVGroup.visible = false
|
|
agvData.floor5BFAGVGroup.visible = false
|
|
agvData.floor5CCAGVGroup.visible = false
|
|
agvData.floor5CTUGroup.visible = false
|
|
},
|
|
toggle5() {
|
|
floor1Model.visible = false
|
|
floor2Model.visible = false
|
|
floor3Model.visible = false
|
|
floor4Model.visible = false
|
|
floor5Model.visible = true
|
|
otherModel.visible = false
|
|
this.$refs.modelInfoData.$el.style.display = 'none'
|
|
this.$refs.modelInfo1Data.$el.style.display = 'none'
|
|
this.$refs.modelInfo2Data.$el.style.display = 'inline-block'
|
|
this.$refs.modelInfo3Data.$el.style.display = 'inline-block'
|
|
this.$refs.modelInfo4Data.$el.style.display = 'inline-block'
|
|
agvData.floor2AGVGroup.visible = false
|
|
agvData.floor3AGVGroup.visible = false
|
|
agvData.floor5BFAGVGroup.visible = true
|
|
agvData.floor5CCAGVGroup.visible = true
|
|
agvData.floor5CTUGroup.visible = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.app-container {
|
|
padding: 0;
|
|
}
|
|
|
|
.model {
|
|
position: relative;
|
|
}
|
|
|
|
.bottomBg {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100vw;
|
|
height: 2.656vw;
|
|
background-image: url("~@/assets/model/bottomBg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
.item1F, .item2F, .item3F, .item4F, .item5F {
|
|
position: absolute;
|
|
top: 45%;
|
|
transform: translate(-50%, -50%);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 4.6vw;
|
|
height: 1.32vw;
|
|
line-height: 1.32vw;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.item1F {
|
|
left: 39%;
|
|
background-image: url("~@/assets/model/unselected.png");
|
|
}
|
|
|
|
.item2F {
|
|
left: 44.5%;
|
|
background-image: url("~@/assets/model/unselected.png");
|
|
}
|
|
|
|
.item3F {
|
|
left: 50%;
|
|
background-image: url("~@/assets/model/unselected.png");
|
|
}
|
|
|
|
.item4F {
|
|
left: 55.5%;
|
|
background-image: url("~@/assets/model/unselected.png");
|
|
}
|
|
|
|
.item5F {
|
|
left: 61%;
|
|
background-image: url("~@/assets/model/unselected.png");
|
|
}
|
|
}
|
|
</style>
|