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

<template>

  <div class="jl3dmap3dMaintainer">
    <div  class="jl3dmap3dMaintainerSelect">
      <div class="maintainerSelectButton selectButtonImg1" style="left:20%"  @mouseenter="onMouseOverNormal"></div>
      <div class="maintainerSelectButton selectButtonImg2" style="left:20%;" v-show="normalShow"@mouseleave="onMouseOutNormal" @click="initNormal"></div>
      <div class="maintainerSelectButton selectButtonImg3" style="right:20%;"  @mouseenter="onMouseOverVr"></div>
      <div class="maintainerSelectButton selectButtonImg4" style="right:20%;" v-show="vrShow" @mouseleave="onMouseOutVr" @click="initVR"></div>
    </div>
  </div>

</template>

<script>

import { ProjectIcon } from '@/scripts/ProjectConfig';

import bgPsdImg from '@/assets/bg_psd.png';
// import Jlmap3dMsg from '@/views/jlmap3d/show/msg';

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

    },

    data() {
        return {

          normalShow:false,
          vrShow: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);
        },

        onMouseOverNormal() {
           this.normalShow=true;
        },
        onMouseOutNormal() {
           this.normalShow=false;
        },
        onMouseOverVr() {
          this.vrShow=true;
        },
        onMouseOutVr() {
          this.vrShow=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-image:url("/static/background/other.jpg");
    // 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;

  }

  .selectButtonImg1{
    background-image:url("/static/vrtest/maintainer.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  .selectButtonImg2{
    background-image:url("/static/vrtest/zc.png");
    background-repeat:no-repeat;
    background-size:100% 100%;

  }

  .selectButtonImg3{
    background-image:url("/static/vrtest/maintainervr.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  .selectButtonImg4{
    background-image:url("/static/vrtest/vr.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
  }




</style>