rt-sim-training-client/src/views/jlmap3d/maintainer/jl3dothervr.vue

<template>
		<div id="jl3ddevicefaultvr" class="jl3dfaultdraw">
			<canvas id="canvastexture" />
    </div>
</template>
<script>
	import Vue from 'vue';
	import { Jl3dOtherVR } from '@/jlmap3d/jl3dmaintainer/Jl3dothervr.js';

	import { sendCommandNew } from '@/api/jmap/training';
	import Command from '@/scripts/cmdPlugin/Command';
	import Handler from '@/scripts/cmdPlugin/Handler';

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

		},
		data() {
			return {

			}
		},
		watch: {

		},
		computed: {
			code() {
				return this.$route.query.code;
			},
			mapId() {
					return this.$route.query.mapid;
			},
			group(){
				return this.$route.query.group;
			},
		},
		mounted() {
			let code = this.$route.query.code;
			let group = this.$route.query.group;
			this.datastatus = "new";
			this.initnewdata(group);
		},
		beforeDestroy() {
		},
		methods: {
			initnewdata: function (group){
				let dom = document.getElementById('jl3ddevicefaultvr');
				this.jl3d = new Jl3dOtherVR(dom,group,this.mapId);
			},
		}
	}
</script>
<style scoped>
	/* #jl3d {
		width: 937px;
		height: 937px;
	} */

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

	#canvastexture {
		position: absolute;
		float: left;
		left: 0;
		z-index: -12;
	}

	.repirbutton{
		width:160px;
		height:160px;
		position: absolute;
		right:15px;
		bottom:5px;
		background-image:url("/cbtc/static/texture/xiuli.png");
		background-repeat:no-repeat;
		background-size:100%;
	}
	.backbutton{
		width:50px;
		height:50px;
		position: absolute;
		right:125px;
		top:5px;
		background-image:url("/cbtc/static/texture/xx.png");
		background-repeat:no-repeat;
		background-size:100%;
	}



	#canvastexture {
    position: absolute;
    float: left;
    left: 0;
    z-index: -12;
  }
	.jl3dcontrolpane{
		position: absolute;
		top:0;
		right:275px;
    z-index: 10;
	}

</style>