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>

</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:[],
				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 = "设备归位";
						}
						console.log(newVal);
					}
				}
			},
		},
		computed: {
			code() {
				return this.$route.query.code;
			}
		},
		mounted() {
			window.updatemenulist = this.updatemenulist;
      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) {
				console.log(devicelist);
				this.devicelist = devicelist;
			},
			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; */
	}

	#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>