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.
341 lines
12 KiB
Vue
341 lines
12 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 {-->
|
|
<!-- 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() {-->
|
|
|
|
<!-- 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*/-->
|
|
<!-- },-->
|
|
|
|
<!-- }-->
|
|
<!--}-->
|
|
<!--</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>-->
|