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>

    <Devicefault-List
      v-show="faultlistshow"
      :devicelist="devicelist"
      @selectdevice="selectdevice"
    >
    </Devicefault-List>
    <Fault-Device
      v-show="deviceShow"
      ref = "faultdevice"
      @closedevice3dview ="devicemodel"
    />

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

    <div class="msg" v-show ="msgshow">
      <div class="msgtext">
        {{controlmsg}}
      </div>
    </div>

    <div id="jl3droom" class="roombutton" @click="showroom"></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';

import DevicefaultList from '@/views/jlmap3d/maintainer/component/devicefaultlist';
import FaultDevice from '@/views/jlmap3d/maintainer/component/faultdevice';


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: {
        DevicefaultList,
        FaultDevice,

        // Jlmap3dMsg
        // ShowProperty
    },
    data() {
        return {
            training: {
                id: '',
                name: '',
                remarks: ''
            },

            mapdata: null,
            jlmap3d: null,
            selectmodel: null,
            mapid:null,
            group:null,
            token:null,
            faultlistshow:true,
            devicelist:[],
            deviceShow:true,
            msgshow:false,
            controlmsg:"",

        };
    },
    beforeDestroy() {
        // console.log("destroy");
        if (this.jlmap3d) {
            this.jlmap3d.webwork.postMessage('off');
            this.jlmap3d.webwork.terminate();
            console.log("www");
            this.jlmap3d.jsonwebworknew.terminate();
            this.jlmap3d.dispose();
            this.jlmap3d = null;
            // this.$destroy();
        }
    },
    created() {
        // document.querySelector("link[rel*='icon']").href = loginInfo[this.$route.query.project].linkIcon || ProjectIcon[this.$route.query.project];
    },
    mounted() {
        window.updatefault = this.updatefault;
        window.resetfaultlist = this.resetfaultlist;
        window.deletefault = this.deletefault;
        window.warningmsg = this.warningmsg;
        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');
          const project = this.$route.query.project;
          // console.log(project);
          this.deviceShow = false;
          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);
        },
        resetfaultlist(){
          this.devicelist = [];
        },
        updatefault(fault) {
          this.devicelist.push(fault);
        },
        deletefault(code){
          console.log(code);
          console.log(this.devicelist);
          for(let i=0,leni=this.devicelist.length;i<leni;i++){
            if(code == this.devicelist[i].code){
              this.devicelist.splice(i,1);
              break;
            }
          }
        },
        devicemodel(){
          if (this.deviceShow == false) {
              this.deviceShow = true;
          } else {
              this.deviceShow = false;
          }
        },
        selectdevice(divicedata){
          this.deviceShow = true;
          // console.log(divicedata);
          this.$refs.faultdevice.showmodel(divicedata);
        },
        warningmsg(nowmsg){
          console.log(nowmsg);
          this.controlmsg = nowmsg;
          this.msgshow = true;
          setTimeout(this.warningmsgoff,3000);
        },
        warningmsgoff(){
          this.msgshow = false;

        },
        showroom(){
          this.deviceShow = true;
          this.$refs.faultdevice.showroom();
        },
        back() {
            this.$emit('back');
            this.isswitch = false;
        },

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

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

  .msg{
    width:40%;
    // height:50px;
    left:30%;
    top:10%;
    text-align: center;
    position:absolute;
    z-index:5;
  }
  .msgtext{
    width:100%;
    // height:50px;
    border-radius:5px;
    background:#C0C0C0;
    color:#FFFFFF;
    font-size: 40px;
  }

  .roombutton{
    width:50px;
    height:50px;
    position: absolute;
    right:185px;
    top:5px;
    z-index:30;
    background-image:url("/static/texture/room.png");
    background-repeat:no-repeat;
    background-size:100%;
  }
  #canvastexture {
    position: absolute;
    float: left;
    left: 0;
    z-index: -12;
  }


</style>