rt-sim-training-client/src/views/jlmap3d/drive/jl3ddrive.vue

<template>

  <div class="jalmap3ddiv">

    <div class="trainstatus">
      车组号:{{ trainnum }}  {{ stoptimes }}
    </div>
    <div class="display-draft">
      <el-button-group>
        <!-- <el-button type="primary" @click="raystand">站台选择</el-button> -->
        <el-button type="primary" @click="cctvplane">{{ cctvbuttonmsg }}</el-button>
        <el-button type="primary" @click="showplane">{{ showbuttonmsg }}</el-button>
        <el-button type="primary" @click="back">返回</el-button>
      </el-button-group>
    </div>

    <!-- <Jlmap3d-Msg v-bind:msgdata="msgdata" >
    </Jlmap3d-Msg > -->

    <div id="jlsimulation" class="jlmap3ddraw">
      <canvas id="canvastexture" />
    </div>
    <div id="jlcctv" v-show="cctvshow" class="jlmap3cctv">
    </div>

    <Drive-Mmi v-if="mmishow" ref="mmiui" />

    <Drive-Tms v-if="mmishow" />

  </div>

</template>

<script>
import Vue from 'vue';
import localStore from 'storejs';
import axios from 'axios';

import { mapGetters } from 'vuex';

// import ShowProperty from '@/views/jlmap3d/show/property';

import { simulationNotify, setTrainingCbtcInitTime } from '@/api/simulation';

import { getPublishMapDetail, getPublish3dMapDetail } from '@/api/jlmap3d/load3ddata';

import { UrlConfig } from '@/router/index';

import { JLmapDriving } from '@/jlmap3d/jl3ddrive/jl3ddrive';

import DriveMmi from '@/views/jlmap3d/drive/sceneview/mmiview';
import DriveTms from '@/views/jlmap3d/drive/sceneview/tmsview';

var train;
export default {
	name: 'Jl3dDrive',
	components: {
		DriveMmi,
		DriveTms
	},
	data() {
		return {
			trainlist: null,
			stationlist: null,
			msgdata: null,
			training: {
				id: '',
				name: '',
				remarks: ''
			},
			mapdata: null,
			jlmap3d: null,
			selectmodel: null,
      cctvshow:true,
      cctvbuttonmsg: '车内监控——隐藏',
			mmishow: false,
			showbuttonmsg: '列车仪表——显示',
			trainnum: '',
			stoptimes: ''
		};
	},
	watch: {
		'jlmap3d.nowspeed': {
			handler: function (newVal, oldVal) {
				if (newVal != oldVal) {
					if (this.mmishow == true) {
						this.$refs.mmiui.updatespeed(newVal);
					}
				}
			}
		},
		'jlmap3d.nowmxlen': {
			handler: function (newVal, oldVal) {
				if (newVal != oldVal) {
					if (this.mmishow == true) {
						this.$refs.mmiui.updatelen(newVal);
					}
				}
			}
		},
		'jlmap3d.atpspeed': {
			handler: function (newVal, oldVal) {
				if (newVal != oldVal) {
					if (this.mmishow == true) {
						this.$refs.mmiui.updateatpspeed(newVal);
					}
				}
			}
		},
		'jlmap3d.atospeed': {
			handler: function (newVal, oldVal) {
				if (newVal != oldVal) {
					if (this.mmishow == true) {
						this.$refs.mmiui.updateatospeed(newVal);
					}
				}
			}
		},
		'jlmap3d.trainnum': {
			handler: function (newVal, oldVal) {
				if (newVal != oldVal) {
					this.trainnum = newVal;
				}
			}
		},
		'jlmap3d.stime': {
			handler: function (newVal, oldVal) {
				if (newVal != oldVal) {
					this.stoptimes = newVal;
				}
			}
		},
    'jlmap3d.drivecount': {
			handler: function (newVal, oldVal) {
				if (newVal != oldVal) {
					this.$refs.mmiui.updatedrivedata(this.jlmap3d.drivedata);
				}
			}
		}
	},
	beforeDestroy() {
		if (this.jlmap3d) {
			this.jlmap3d.webwork.postMessage('off');
			this.jlmap3d.endsocket();
			this.jlmap3d.dispose();
			this.jlmap3d = null;

			// this.$destroy();
		}
	},

	mounted() {
		this.mmishow = true;

		// this.$refs.mmiui.init();
	},
	methods: {
		show: function (skinCode) {
			// console.log("show");
			// console.log(skinCode);
			// console.log(this.jlmap3d);

			if (this.jlmap3d == null) {
				this.init(skinCode);
			} else {
				// this.jlmap3d.restart();
				this.jlmap3d.eventon();
				this.jlmap3d.animateon();

			}
		},
		init: function (skinCode) {
			const mapdata = this.$store.getters['map/map'];
			const dom = document.getElementById('app');
			this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode);
			this.jlmap3d.eventon();
      this.cctvshow = false;

		},
		raystand() {
			this.jlmap3d.rayswitch('stand');
		},
		raytrain() {
			this.jlmap3d.rayswitch('train');
		},
		raysection() {
			this.jlmap3d.rayswitch('section');
		},
		raysignal() {
			this.jlmap3d.rayswitch('signal');
		},
		rayswitch() {
			this.jlmap3d.rayswitch('switch');
		},
		sstation(changedata) {
			this.jlmap3d.updatecamera(changedata.mesh, 'station');
		},
		strain(changedata) {
			if (changedata.dispose == false) {
				this.jlmap3d.updatecamera(changedata, 'train');
			}

		},

		back() {
			this.$emit('showdriving');
			this.jlmap3d.eventoff();
			this.jlmap3d.animateoff();
			// this.jlmap3d = null;
		},
		showplane() {
			if (this.mmishow == true) {
				this.showbuttonmsg = '列车仪表——隐藏';
				this.mmishow = false;
			} else {
				this.showbuttonmsg = '列车仪表——显示';
				this.mmishow = true;
			}

		},
    cctvplane() {
			if (this.cctvshow == true) {
				this.cctvbuttonmsg = '车内监控——隐藏';
        this.cctvshow = false;
        this.jlmap3d.cctvoff();
			} else {
				this.cctvbuttonmsg = '车内监控——显示';
        this.cctvshow = true;
        this.jlmap3d.cctvon();
			}

		}

	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";

  .display-card {
    z-index: 9;
    display: inline;
    position: absolute;
    top: 17px;
    float: left;
    left: 160px;
    height: 32px;
  }

  .display-card .el-row {
    line-height: 32px !important;
  }

  .display-score {
    background-color: black;
    display: -moz-inline-box;
    display: inline-block;
    text-align: left;
    /* border: 1px solid lightskyblue; */
    /* width: 100px; */
    height: 32px;
    line-height: 24px;
    border-radius: 4px;
    padding-left: 2px;
    margin-left: 10px;
    font-family: "Microsoft" !important;
    font-size: 18px !important;
    color: #fff;
  }

  .display-draft {
    /* z-index: 1000; */
    position: absolute;
    float: right;
    right: 40px;
    top: 28px;
  }

  #jlsimulation {
    width: 937px;
    height: 937px;
  }

  .trainstatus{
    left:0;
    top:0;
    width:350px;
    height:30px;
    background: #000000;
    position:absolute;
    text-align: center;
    color:white;
    font-size:25px;
  }

  .jalmap3ddiv {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    z-index: 1500;
  }

  .jlmap3ddraw {
    float: left;
    left: 0;
    //left:20%;
    width: 100%;
    height: 100%;
    position:absolute;
    z-index: -1;
  }

  .jlmap3cctv{
    float: left;
    left: 0;
    top:0;
    //left:20%;
    width: 20%;
    height: 20%;
    position:absolute;
    z-index: -1;
  }

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