rt-sim-training-client/src/views/jlmap3d/devicetrain/jl3ddevicetrain.vue

<template>
	<div class="jl3ddevice">
		<div id="jl3d" class="jl3ddraw">

    </div>
		<Jl3ddevicetrain-Menu :devicelist="devicelist"  @sdevice="sdevice" >
		</Jl3ddevicetrain-Menu>
		<div class="menutop">
			<el-button-group>
				<el-button type="primary" @click="selectdevice">选择设备</el-button>
				<el-button type="primary" @click="dispersed">{{devicestats}}</el-button>
			</el-button-group>
		</div>
		<div class="menudown">
			<el-button-group>
				<el-button type="primary" @click="back">退出</el-button>
			</el-button-group>
		</div>

		<div id="testjlmap3d" class="jlmap3ddraw">
			<canvas id="canvastexture" />
		</div>
		<div class="showmsg" v-show="msgshow">
			<div class="msgtop">
				{{devicename}}
			</div>
			<div class="msgdown">
				{{devicemsg}}
			</div>
		</div>
	</div>

</template>
<script>
	import Vue from 'vue';
	import { Jl3ddevice } from '@/jlmap3d/jl3ddevicetrain/jl3ddevicetrain.js';
	import Jl3ddevicetrainMenu from '@/views/jlmap3d/devicetrain/component/devicetrainmenu';
	export default {
		name: 'devicetrain',
		components: {
			Jl3ddevicetrainMenu
		},
		data() {
			return {
				jl3d: null,
				devicelist:[],
				msgshow:false,
				devicename:"",
				devicemsg:"",
				devicestats:"设备分解",

			}
		},
		watch: {
			// '$store.state.socket.device.code': {
			// 	handler: function (newVal, oldVal) {
			// 		if (newVal != oldVal) {
			// 			this.jl3d.selectmodel(this.$store.state.socket.device);
      //
			// 		}
			// 	}
			// },
			// '$store.state.socket.device': {
			// 	deep: true,
			// 	handler: function (newVal, oldVal) {
			// 		if (newVal.code == oldVal.code) {
			// 			this.jl3d.updateaction(newVal);
			// 		} else {
      //
			// 		}
      //
			// 	}
			// },
			'jl3d.animastats': {
				handler: function (newVal, oldVal) {
					if (newVal != oldVal) {
						if(newVal == false){
							this.devicestats = "设备分解";
						}
						if(newVal == true){
							this.devicestats = "设备归位";
						}
					}
				}
			},
		},
		computed: {
			code() {
				return this.$route.query.code;
			}
		},
		mounted() {
			window.updatemenulist = this.updatemenulist;
			window.updatemsg = this.updatemsg;
      this.init();
		},
		beforeDestroy() {
		},
		methods: {
			init: function () {
				// let mapdata = this.$store.state.socket.device;
				let dom = document.getElementById('jl3d');
				this.jl3d = new Jl3ddevice(dom);
			},
			sdevice(changedata) {

					this.jl3d.updateselect(changedata);

			},
			selectdevice(device) {
				this.jl3d.backselect();
			},
			dispersed(device) {
				this.jl3d.disperdevice();
			},
			updatemenulist(devicelist) {
				this.devicelist = devicelist;
			},
			updatemsg(name,text) {
				// console.log(name);
				// console.log(text);
				if(name){
					this.msgshow = true;
					this.devicename = name;
					this.devicemsg = text;
				}else{
					this.msgshow = false;
				}
			},
			back(changedata) {
				  window.close();
			},
		}
	}
</script>
<style scoped>
	/* #jl3d {
		width: 937px;
		height: 937px;
	} */

	.jl3ddraw {
    position: absolute;
		float: left;
    top:0;
		/* left: 0; */
		width: 80%;
		height: 100%;
		/* z-index: 1500; */
	}
	.showmsg{
    position: absolute;
    float:left;
    left:0;
    bottom:0;
    width: 20%;
    height: 40%;
		z-index: 10;
		background-image:url("/static/texture/showmsg.png");
    background-repeat: no-repeat;
    background-size: 100%;

  }

	.msgtop{
		text-align: center;
		width: 90%;
		height:10%;
		position: absolute;
		top:10%;
		font-size:30px;
	  color:#FFFFFF;
	}

	.msgdown{
		position: absolute;
		top:20%;
		left:5%;
		width: 90%;
		height:80%;
		font-size:20px;
	  color:#FFFFFF;
		word-wrap:break-word;
		letter-spacing:2px;
	}
	#canvastexture {
		position: absolute;
		float: left;
		left: 0;
		z-index: -12;
	}

  #testjlmap3d {
  }

  .jlmap3ddraw {
    float: left;
    left: 0;
    width: 100%;
    height: 100%;
    position:absolute;
    z-index: -1;
  }
	.menutop{
		top:0;
    right:20%;
		position:absolute;
	}
	.menudown{
		bottom:0;
		right:20%;
		position:absolute;
	}
  #canvastexture {
    position: absolute;
    float: left;
    left: 0;
    z-index: -12;
  }
</style>