rt-sim-training-client/src/views/jlmap3d/maintainer/jl3dmaintainer.vue

<template>

  <div class="jalmap3ddiv">

    <div class="display-draft">
      <el-button-group>

        <el-button type="primary" @click="back">{{ $t('global.back') }}</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 { JLmap3dMaintainer } from '@/jlmap3d/jl3dmaintainer/jlmap3dmaintainer.js';

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

import Jlmap3dConfig from '@/views/jlmap3d/simulation/show/configmenu';
import { ProjectIcon } from '@/scripts/ProjectConfig';

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

var train;
export default {
    name: 'Jl3dMaintainer',
    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
        };
    },
    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();
        }
    },
    created() {
        document.querySelector("link[rel*='icon']").href = ProjectIcon[this.$route.query.project];
    },
    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;
            console.log(this.mapid);
            console.log(this.group);
            console.log(this.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');
          const project = this.$route.query.project;
          // console.log(project);

          if (project) {

		        this.jlmap3d = new JLmap3dMaintainer(dom, mapdata, skinCode, this.$store, group, project);
          } else {

            this.jlmap3d = new JLmap3dMaintainer(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;
            // console.log(this.stationlist);
        },

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

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

        },

        back() {
            this.$emit('back');
        }

    }
};
</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: 30;
  }

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