rt-sim-training-client/src/views/jlmap3d/index.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="raysection">轨道检查</el-button>
        <el-button type="primary" @click="rayswitch">道岔检查</el-button>
        <el-button type="primary" @click="raysignal">信号机检查</el-button>
        <el-button type="primary" @click="back">返回</el-button>
      </el-button-group>
    </div>

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

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

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

    <div id="testjlmap3d" class="jlmap3ddraw">
      <canvas id="canvastexture"></canvas>
    </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/jlmap3d.js';

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

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

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

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

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

        mapdata: null,
        jlmap3d: null,
        selectmodel: 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.dispose();
        this.jlmap3d = null;
        //this.$destroy();
      }
    },
    methods: {
      show: function (skinStyle) {
        // console.log("show");
        // console.log(skinStyle);
        // console.log(this.jlmap3d);
        if (this.jlmap3d == null) {
          this.init(skinStyle);
        } else {
          //this.jlmap3d.restart();
          this.jlmap3d.eventon();
          this.jlmap3d.animateon();

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

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

    },

    mounted() {
      window.updatemenulist = this.updatemenulist;
      //this.init();
    }
  }
</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>