rt-sim-training-client/src/views/jlmap3d/simulation/jl3dsimulation.vue

<template>

  <div class="jalmap3ddiv">

    <div class="display-draft">
      <el-button-group>
        <!-- <el-button type="primary" @click="raystand">站台选择</el-button>
        <el-button type="primary" @click="raytrain">列车选择</el-button> -->
        <el-button type="primary" @click="railmove">{{$t('jlmap3d.cameraRailMove')}}</el-button>
        <el-button type="primary" @click="raysection">{{$t('jlmap3d.trackCheck')}}</el-button>
        <el-button type="primary" @click="rayswitch">{{$t('jlmap3d.turnoutCheck')}}</el-button>
        <el-button type="primary" @click="raysignal">{{$t('jlmap3d.signalCheck')}}</el-button>
        <el-button type="primary" @click="back">{{$t('global.exit')}}</el-button>
      </el-button-group>



    </div>

    <Jlmap3d-Menu :trainlist="trainlist" :stationlist="stationlist" @sstation="sstation" @strain="strain" />

    <Jlmap3d-Config @showstationmsg="showstationmsg" @showtrainmsg="showtrainmsg" />

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

    <div id="testjlmap3d" class="jlmap3ddraw">
      <canvas id="canvastexture" />
    </div>

  </div>

</template>

<script>
import Vue from 'vue';
import localStore from 'storejs';
import { mapGetters } from 'vuex';

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

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

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

import { JLmap3d } from '@/jlmap3d/jl3dsimulation/jlmap3d.js';

// components
import Jlmap3dMenu from '@/views/jlmap3d/simulation/show/menu';

import Jlmap3dConfig from '@/views/jlmap3d/simulation/show/configmenu';

// import Jlmap3dMsg from '@/views/jlmap3d/show/msg';

var train;
export default {
	name: 'Jl3dSimulation',
	components: {
		Jlmap3dMenu,
		Jlmap3dConfig
		// Jlmap3dMsg
		// ShowProperty
	},
	data() {
		return {
			trainlist: null,
			stationlist: null,
			msgdata: null,

			training: {
				id: '',
				name: '',
				remarks: ''
			},

			mapdata: null,
			jlmap3d: null,
			selectmodel: null,
      mapid:null,
      group:null,
      token:null
		};
	},
	watch: {
		'jlmap3d.selectmodel.code': {
			deep: true,
			handler: function (newVal, oldVal) {
				if (newVal != oldVal) {
					// this.selectmodel = this.jlmap3dedit.selectmodel;
					// this.$refs.property.switchproperty();
					// console.log(this.jlmap3dedit.selectmodel);
				}
			}
		},

	},
	beforeDestroy() {
		// console.log("destroy");
		if (this.jlmap3d) {
      this.jlmap3d.webwork.postMessage('off');
      this.jlmap3d.webwork.terminate();
      this.jlmap3d.jsonwebwork.terminate();
			this.jlmap3d.dispose();
			this.jlmap3d = null;
			// this.$destroy();
		}
	},

	mounted() {
		window.updatemenulist = this.updatemenulist;
    this.getParams();

    // console.log("");
	},
	methods: {
    getParams:function(){
      var routerParams = this.$route.query.group
      this.mapid = this.$route.query.mapid;
      this.group = this.$route.query.group;
      this.token = this.$route.query.token;
      this.init(this.mapid,this.group);
    },
		show: function (skinCode,group) {
			if (this.jlmap3d == null) {
				this.init(skinCode,group);
			} else {
				// this.jlmap3d.restart();
				this.jlmap3d.eventon();
				this.jlmap3d.animateon();

			}
		},
		init: function (skinCode,group) {
			const mapdata = this.$store.getters['map/map'];
			const dom = document.getElementById('app');
			this.jlmap3d = new JLmap3d(dom, mapdata, skinCode,this.$store,group);
			this.jlmap3d.eventon();
		},
		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');
		},
    railmove() {
      this.jlmap3d.camerarailmove();
    },
		showstationmsg(showtype) {
			this.jlmap3d.showstationmsg(showtype);
		},
		showtrainmsg(showtype) {
			this.jlmap3d.showtrainmsg(showtype);
		},
		updatemenulist(stationlist, trainlist) {
			const stations = [];
			for (const k in stationlist) {
				stations.push(stationlist[k]);
			}
			const trains = [];
			for (const k in trainlist) {
				trains.push(trainlist[k]);
			}
			this.stationlist = stations;
			this.trainlist = trains;

		},

		sstation(changedata) {
			this.jlmap3d.updatecamera(changedata.mesh, 'station');
		},
		strain(changedata) {

			if (changedata.dispose == false) {
				this.jlmap3d.updatecamera(changedata, 'train');
			}

		},

		back() {
      window.close();
			// this.$emit('showpanel');
			// this.jlmap3d.eventoff();
			// this.jlmap3d.animateoff();
			// this.jlmap3d = null;
		}

	}
};
</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;
    bottom: 28px;
  }

  #testjlmap3d {
  }

  .jalmap3ddiv {
    position:absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

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

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