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

<template>

  <div class="jl3dmap3dMaintainer">
    <div  class="jl3dmap3dMaintainerSelect" :style="{'background-image': 'url('+localStatic+'/background/other.jpg)'}">
      <div class="maintainerSelectButton selectButtonImg1"
      :style="{'background-image': 'url('+localStatic+'/vrtest/maintainer.png)'}"
      style="left:10%"  @mouseenter="onMouseOverNormal"></div>

      <div class="maintainerSelectButton selectButtonImg2"
      :style="{'background-image': 'url('+localStatic+'/vrtest/zc.png)'}"
      style="left:10%;" v-show="normalShow"@mouseleave="onMouseOutNormal" @click="initNormal"></div>

      <div class="maintainerSelectButton selectButtonImg3"
      :style="{'background-image': 'url('+localStatic+'/vrtest/maintainervr.png)'}"
      style="left:40%;"  @mouseenter="onMouseOverVr"></div>

      <div class="maintainerSelectButton selectButtonImg4"
      :style="{'background-image': 'url('+localStatic+'/vrtest/vr.png)'}"
      style="left:40%;" v-show="vrShow" @mouseleave="onMouseOutVr" @click="initVR"></div>

      <div class="maintainerSelectButton selectButtonImg5"
      :style="{'background-image': 'url('+localStatic+'/vrtest/trainrescue.png)'}"
      style="left:70%;"  @mouseenter="onMouseOverRescue"></div>

      <div class="maintainerSelectButton selectButtonImg6"
      :style="{'background-image': 'url('+localStatic+'/vrtest/trvr.png)'}"
      style="left:70%;" v-show="trainRescueShow" @mouseleave="onMouseOutRescue" @click="initTrainRescueVr"></div>


    </div>
  </div>

</template>

<script>

import { ProjectIcon } from '@/scripts/ProjectConfig';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
import bgPsdImg from '@/assets/bg_psd.png';
// import Jlmap3dMsg from '@/views/jlmap3d/show/msg';

var train;
export default {
    name: 'Jl3dMaintainerSelect',
    components: {

    },

    data() {
        return {
          localStatic:JL3D_LOCAL_STATIC,
          normalShow:false,
          vrShow:false,
          trainRescueShow:false,
        };
    },
    beforeDestroy() {

    },
    created() {
        // document.querySelector("link[rel*='icon']").href = loginInfo[this.$route.query.project].linkIcon || ProjectIcon[this.$route.query.project];
    },
    mounted() {
        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;
        },
        initNormal: function () {
          const routeData = this.$router.resolve({
              path:'/jlmap3d/maintainer',
              query:{
                  mapid:this.mapid,
                  group:this.group,
                  token:this.token,
                  noPreLogout: true
              }
          });
          window.open(routeData.href);
        },
        initVR:function (skinCode, group) {
            const routeData = this.$router.resolve({
                path:'/jlmap3d/maintainervr',
                query:{
                    mapid:this.mapid,
                    group:this.group,
                    token:this.token,
                    noPreLogout: true
                }
            });
            window.open(routeData.href);
        },
        initTrainRescueVr:function (skinCode, group) {
            const routeData = this.$router.resolve({
                path:'/jlmap3d/trainrescuevr',
                query:{
                    mapid:this.mapid,
                    group:this.group,
                    token:this.token,
                    noPreLogout: true
                }
            });
            window.open(routeData.href);
        },
        onMouseOverNormal() {
           this.normalShow=true;
        },
        onMouseOutNormal() {
           this.normalShow=false;
        },
        onMouseOverVr() {
          this.vrShow=true;
        },
        onMouseOutVr() {
          this.vrShow=false;
        },
        onMouseOverRescue() {
          this.trainRescueShow=true;
        },
        onMouseOutRescue() {
          this.trainRescueShow=false;
        },
    }
};
</script>

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


  .jl3dmap3dMaintainer {
    position:absolute;
    width: 100%;
    height: 100%;
    z-index: 35;
  }

  .jl3dmap3dMaintainerSelect{
    position:absolute;
    width: 100%;
    height: 100%;
    z-index: 350;
    top:0;
    left:0;
    // background-repeat:no-repeat;
    z-index: 350;
    background-size:100%;
  }

  .maintainerSelectButton{
    position:absolute;
    width: 20%;
    height: 55%;
    position:absolute;
    top:22.5%;
    text-align: center;
    font-size: 20px;
    line-height:100px;
    cursor:pointer;
  }

  .selectButtonImg1{
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  .selectButtonImg2{
    background-repeat:no-repeat;
    background-size:100% 100%;

  }

  .selectButtonImg3{
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  .selectButtonImg4{
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  .selectButtonImg5{
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  .selectButtonImg6{
    background-repeat:no-repeat;
    background-size:100% 100%;
  }





</style>