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 class="jlmap3dstats">
				<div class="statusdiv">JWJXC-1700
				</div>
				<div class="statusdiv">JWJXC-1700
				</div>
				<div class="statusdiv">JWJXC-1700
				</div>
				<div class="statusdiv">JZJXC-H18
				</div>
				<div class="statusdiv">JPJXC-1000
				</div>
				<div class="statusdiv">JPJXC-480
				</div>

				<div class="statusdiv">状态:{{statsa1700}}
				</div>
				<div class="statusdiv">状态:{{statsb1700}}
				</div>
				<div class="statusdiv">状态:{{statsc1700}}
				</div>
				<div class="statusdiv">状态:{{statsh18}}
				</div>
				<div class="statusdiv">状态:{{stats1000}}
				</div>
				<div class="statusdiv">状态:{{stats480}}
				</div>

				<div class="statusdiv" @click="switcha1700">{{texta1700}}
				</div>
				<div class="statusdiv" @click="switchb1700">{{textb1700}}
				</div>
				<div class="statusdiv" @click="switchc1700">{{textc1700}}
				</div>
				<div class="statusdiv" @click="switchh18">{{texth18}}
				</div>
				<div class="statusdiv" @click="switch1000">{{text1000}}
				</div>
				<div class="statusdiv" @click="switch480">{{text480}}
				</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 {
				device: this.$route.query.device,
				jl3d: null,
				devicelist:[],
				msgshow:false,
				devicename:"",
				devicemsg:"",
				devicestats:"设备分解",
				statsa1700:"off",
				statsb1700:"off",
				statsc1700:"off",
				stats1000:"off",
				statsh18:"off",
				stats480:"off",

				texta1700:"关",
				textb1700:"关",
				textc1700:"关",
				text1000:"关",
				texth18:"关",
				text480:"关",

				ona1700:false,
				onb1700:false,
				onc1700:false,
				on1000:false,
				onh18:false,
				on480:false,
			}
		},
		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;
			window.upjdqstats = this.upjdqstats;
      this.init();
		},
		beforeDestroy() {
		},
		methods: {
			init: function () {
				// let mapdata = this.$store.state.socket.device;
				let dom = document.getElementById('jl3d');
				this.jl3d = new Jl3ddevice(dom,this.device);
			},
			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;
				}
			},
			upjdqstats(data){
				// console.log(data[0].on);
				if(data[0].on != this.ona1700){
					if(data[0].on == true){
						this.texta1700 = "开";
						this.statsa1700 = "on";
						this.ona1700 = true;
						this.jl3d.upmodelaction(0,0);
					}
					if(data[0].on == false){
						this.texta1700 = "关";
						this.statsa1700 = "off";
						this.ona1700 = false;
						this.jl3d.upmodelaction(1,0);
					}
				}

				if(data[1].on != this.onb1700){
					if(data[1].on == true){
						this.textb1700 = "开";
						this.statsb1700 = "on";
						this.onb1700 = true;
						this.jl3d.upmodelaction(0,1);
					}
					if(data[1].on == false){
						this.textb1700 = "关";
						this.statsb1700 = "off";
						this.onb1700 = false;
						this.jl3d.upmodelaction(1,1);
					}
				}

				if(data[2].on != this.onc1700){
					if(data[2].on == true){
						this.textc1700 = "开";
						this.statsc1700 = "on";
						this.onc1700 = true;
						this.jl3d.upmodelaction(0,2);
					}
					if(data[2].on == false){
						this.textc1700 = "关";
						this.statsc1700 = "off";
						this.onc1700 = false;
						this.jl3d.upmodelaction(1,2);
					}
				}
				if(data[3].on != this.onh18){
					if(data[3].on == true){
						this.texth18 = "开";
						this.statsh18 = "on";
						this.onh18 = true;
						this.jl3d.upmodelaction(0,3);
					}
					if(data[3].on == false){
						this.texth18 = "关";
						this.statsh18 = "off";
						this.onh18 = false;
						this.jl3d.upmodelaction(1,3);
					}
				}

				if(data[4].on != this.on1000){
					if(data[4].on == true){
						this.text1000 = "开";
						this.stats1000 = "on";
						this.on1000 = true;
						this.jl3d.upmodelaction(0,4);
					}
					if(data[4].on == false){
						this.text1000 = "关";
						this.stats1000 = "off";
						this.on1000 = false;
						this.jl3d.upmodelaction(1,4);
					}
				}
				if(data[5].on != this.on480){
					if(data[5].on == true){
						this.text480 = "开";
						this.stats480 = "on";
						this.on480 = true;
						this.jl3d.upmodelaction(0,5);
					}
					if(data[5].on == false){
						this.text480 = "关";
						this.stats480 = "off";
						this.on480 = false;
						this.jl3d.upmodelaction(1,5);
					}
				}
			},
			switcha1700(){
				if(this.statsa1700 == "off"){

					this.jl3d.sendmsg(0,0);
				}else if(this.statsa1700 == "on"){

					this.jl3d.sendmsg(1,0);
				}
			},
			switchb1700(){
				if(this.statsb1700 == "off"){

					this.jl3d.sendmsg(0,1);
				}else if(this.statsb1700 == "on"){

					this.jl3d.sendmsg(1,1);
				}
			},
			switchc1700(){
				if(this.statsc1700 == "off"){

					this.jl3d.sendmsg(0,2);
				}else if(this.statsc1700 == "on"){

					this.jl3d.sendmsg(1,2);
				}
			},
			switchh18(){
				if(this.statsh18 == "off"){

					this.jl3d.sendmsg(0,3);
				}else if(this.statsh18 == "on"){

					this.jl3d.sendmsg(1,3);
				}
			},
			switch1000(){
				if(this.stats1000 == "off"){

					this.jl3d.sendmsg(0,4);
				}else if(this.stats1000 == "on"){

					this.jl3d.sendmsg(1,4);
				}
			},
			switch480(){
				if(this.stats480 == "off"){

					this.jl3d.sendmsg(0,5);
				}else if(this.stats480 == "on"){

					this.jl3d.sendmsg(1,5);
				}
			},
			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%;

  }



	.jlmap3dstats{
		position: absolute;
		float:left;
		/* left:10px; */
		/* top:20px; */
		width: 60%;
		/* height: 20%; */
		z-index: 10;
		background-color: #409EFF;
		border-radius: 4px;
		color: #FFFFFF
		/* background-image:url("/static/texture/menu.png"); */
		/* background-repeat: no-repeat; */
		/* background-size: 100%; */
	}
	.statusdiv{
		float:left;
		top:50%;
		width:16.6%;
		/* height:30%; */
		font-size: 20px;
		border: 1px solid white;
		text-align: center;
		cursor:pointer;
	}
	.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>