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

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

    </div>
</template>
<script>
	import Vue from 'vue';
	import { Jl3ddevice } from '@/jlmap3d/jl3ddevicetrain/jl3ddevicetrain.js';


	export default {
		name: 'devicetrain',
		components: {

		},
		data() {
			return {
				jl3d: null,
			}
		},
		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 {
      //
			// 		}
      //
			// 	}
			// },
			// '$store.state.socket.simulationOverCount': function () {
			// 	this.unsubscribe();
			// }
		},
		computed: {
			code() {
				return this.$route.query.code;
			}
		},
		mounted() {
			let code = this.$route.query.code;
			let group = this.$route.query.group;
			let header = this.$route.query.token;
			// if (group) {
      //   this.init(group,header);
			// 	// this.subscribe(code,group,header);
			// }
      this.init(group,header);
		},
		beforeDestroy() {
		},
		methods: {
			init: function (group,header) {
				// let mapdata = this.$store.state.socket.device;
				let dom = document.getElementById('jl3d');
				this.jl3d = new Jl3ddevice(dom,group,header);
			},
		}
	}
</script>
<style scoped>
	/* #jl3d {
		width: 937px;
		height: 937px;
	} */

	.jl3ddraw {
    position: absolute;
		float: right;
    top:0;
		/* left: 0; */
		width: 100%;
		height: 100%;
		z-index: 1500;
	}

	#canvastexture {
		position: absolute;
		float: left;
		left: 0;
		z-index: -12;
	}
</style>