FE-V2-PC/src/views/differenceComponent/homeSubPageKYDXNH.vue

<template>
  <div class="max-home-button-box">
    <div class="max-home-box">
      <div class="max-bottom-box">
        <div class="top-button-box">
          <!--左侧-->
          <div class="left-box">
            <!--<div class="position-button top-margin" @click="goPage('EmergencyManagement','应急管理')">-->
            <div class="position-button top-margin" @click="goPage('SafetyEducationExam','安全教育与考试')">
              <div>
                <img src="@/assets/ZDimages/home/1.png">
                <p>安全教育与考试</p>
              </div>
            </div>
            <div class="position-button" @click="goPage('null','责任体系')">
              <div>
                <img src="@/assets/ZDimages/home/2.png">
                <p>责任体系</p>
              </div>
            </div>
            <!--<div class="position-button" @click="goPage('ChemicalLibrary','化学品管理')">-->
            <div class="position-button" @click="goPage('SecureAccess','安全准入')">
              <div>
                <img src="@/assets/ZDimages/home/3.png">
                <p>安全准入</p>
              </div>
            </div>
          </div>
          <!--中间-->
          <div class="center-box">
            <div class="position-button" @click="goPage('Https://www.sxitdlc.com','数据大屏')">
              <div>
                <img src="@/assets/ZDimages/home/icon_sydlpt_sjksh.png">
                <p>数据可视化</p>
              </div>
            </div>
          </div>
          <!--右侧-->
          <div class="right-box">
            <div class="position-button" @click="goPage('HierarchicalControl','分级管控')">
              <!--<div class="position-button top-margin" @click="goPage('SecureAccess','安全准入')">-->
              <div>
                <img src="@/assets/ZDimages/home/4.png">
                <p>分级管控</p>
              </div>
            </div>
            <div class="position-button" @click="goPage('SecurityCheck','安全检查')">
              <div>
                <img src="@/assets/ZDimages/home/5.png">
                <p>安全检查</p>
              </div>
            </div>
            <div class="position-button" @click="goPage('HazardManagement','危险源管理')">
              <div>
                <img src="@/assets/ZDimages/home/6.png">
                <p>危险源管理</p>
              </div>
            </div>
          </div>
        </div>
        <div class="center-button-box display-none-one"></div>
        <!--底部-->
        <div class="bottom-button-box">
          <div class="null-button"></div>
          <div class="position-button" @click="goPage('EmergencyManagement','应急管理')">
            <!--<div class="position-button" @click="goPage('SafetyEducationExam','安全教育与考试')">-->
            <div>
              <img src="@/assets/ZDimages/home/7.png">
              <p>应急管理</p>
            </div>
          </div>
          <div class="position-button" @click="goPage('CreditViolation','信用违规管理')">
            <div>
              <img src="@/assets/ZDimages/home/8.png">
              <p>信用违规管理</p>
            </div>
          </div>
          <!--<div class="position-button" @click="goPage('HierarchicalControl','分级管控')">-->
          <!--<div>-->
          <!--<img src="@/assets/ZDimages/home/icon_sy_fjgk.png">-->
          <!--<p>分级管控</p>-->
          <!--</div>-->
          <!--</div>-->
          <div class="position-button" @click="goPage('null','安全档案')">
            <div>
              <img src="@/assets/ZDimages/home/9.png">
              <p>安全档案</p>
            </div>
          </div>
          <div class="position-button" @click="goPage('Comprehensive','综合管理')">
            <div>
              <img src="@/assets/ZDimages/home/10.png">
              <p>综合管理</p>
            </div>
          </div>
          <div class="null-button"></div>
        </div>
      </div>
      <img class="img-1" src="@/assets/ZDimages/home/img_sy_lf.png">
      <img class="img-2" src="@/assets/ZDimages/home/img_yh_db.png">
      <img class="img-3" src="@/assets/ZDimages/home/img_yh_zj.png">
      <img class="img-4" src="@/assets/ZDimages/home/img_yh_dd.png">
      <img class="img-5" src="@/assets/ZDimages/home/img_yh_zj.png">
      <img class="img-6" src="@/assets/ZDimages/home/img_yh_db.png">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'homeSubPageKYDXNH',
    data() {
      return {
        routeData:{},
        userType:localStorage.getItem('userType'),
        initPage:localStorage.getItem('initPage'),
      };
    },
    created(){

    },
    mounted(){
      let self =this
      this.routeData = JSON.parse(localStorage.getItem("routeData"))
      if(localStorage.getItem('initPage') == 'true'){
        console.log("true")
        if(localStorage.getItem('userType') == '22'){
          for(let i=0;i<self.routeData.length;i++){
            if(!self.routeData[i].hidden&&self.routeData[i].name != 'Https://www.sxitdlc.com'){
              if (self.routeData[i].children){
                for(let o=0;o<self.routeData[i].children.length;o++){
                  if(!self.routeData[i].children[o].alwaysShow&&!self.routeData[i].children[o].hidden){
                    let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path;
                    console.log("urlText",urlText)
                    this.$router.push({ path: urlText });
                    return
                  }else{
                    if(self.routeData[i].children[o].children){
                      for(let x=0;x<self.routeData[i].children[o].children.length;x++){
                        if(!self.routeData[i].children[o].children[x].alwaysShow&&!self.routeData[i].children[o].children[x].hidden){
                          let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path + '/' + self.routeData[i].children[o].children[x].path;
                          console.log("urlText",urlText)
                          this.$router.push({ path: urlText });
                          return
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }else{
        console.log("false")
        for(let i=0;i<self.routeData.length;i++){
          if(!self.routeData[i].hidden&&self.routeData[i].name != 'Https://www.sxitdlc.com'){
            if (self.routeData[i].children){
              for(let o=0;o<self.routeData[i].children.length;o++){
                if(!self.routeData[i].children[o].alwaysShow&&!self.routeData[i].children[o].hidden){
                  let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path;
                  console.log("urlText",urlText)
                  this.$router.push({ path: urlText });
                  return
                }else{
                  if(self.routeData[i].children[o].children){
                    for(let x=0;x<self.routeData[i].children[o].children.length;x++){
                      if(!self.routeData[i].children[o].children[x].alwaysShow&&!self.routeData[i].children[o].children[x].hidden){
                        let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path + '/' + self.routeData[i].children[o].children[x].path;
                        console.log("urlText",urlText)
                        this.$router.push({ path: urlText });
                        return
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
    methods: {
      //跳转按钮
      goPage(type,title){
        let self = this;
        if(type == 'null'){
          this.$alert(title+'暂未开放', {
            confirmButtonText: '确定',
            callback: action => {}
          });
          return
        }
        if(type == 'Https://www.sxitdlc.com'){
          for(let i=0;i<self.routeData.length;i++){
            if(type == self.routeData[i].name){
              console.log("self.routeData[i].name",self.routeData[i].name)
              window.open(localStorage.getItem('screenUrl') + '?identity=' + localStorage.getItem('identity'));
              return
            }
          }
          this.$alert('没有"'+title+'"系统权限，如有疑问，请联系管理员', {
            confirmButtonText: '确定',
            callback: action => {}
          });
        }
        //寻找跳转目标路由
        let num = 0;
        for(let i=0;i<self.routeData.length;i++){
          if(type == self.routeData[i].name){
            num++
            if(!self.routeData[i].alwaysShow&&!self.routeData[i].hidden){
              let urlText = self.routeData[i].path;
              this.$router.push({ path: urlText });
              console.log("urlText1",urlText)
              return
            }else if (self.routeData[i].children){
              for(let o=0;o<self.routeData[i].children.length;o++){
                if(!self.routeData[i].children[o].alwaysShow&&!self.routeData[i].children[o].hidden){
                  let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path;
                  this.$router.push({ path: urlText });
                  console.log("urlText2",urlText)
                  return
                }else{
                  if(self.routeData[i].children[o].children){
                    for(let x=0;x<self.routeData[i].children[o].children.length;x++){
                      if(!self.routeData[i].children[o].children[x].alwaysShow&&!self.routeData[i].children[o].children[x].hidden){
                        let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path + '/' + self.routeData[i].children[o].children[x].path;
                        this.$router.push({ path: urlText });
                        console.log("urlText3",urlText)
                        return
                      }
                    }
                  }
                }
              }
            }
          }
        }
        if(num == 0){
          this.$alert('没有"'+title+'"系统权限，如有疑问，请联系管理员', {
            confirmButtonText: '确定',
            callback: action => {}
          });
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  @-webkit-keyframes centerButtonMover  {
    0% {
      transform:scale(1);
    }
    30% {
      transform: rotate(0deg) scale(0.9);
    }
    40% {
      transform: rotate(-5deg) scale(1);
    }
    50% {
      transform: rotate(5deg) scale(1);
    }
    60% {
      transform: rotate(-5deg) scale(1.1);
    }
    70% {
      transform: rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(0deg) scale(1);
    }
  }
  @-webkit-keyframes centerMover {
    0% {
      -webkit-transform: translateY(0);
      /*transform:scale(0.5px;*/
    }
    50% {
      -webkit-transform: translateY(20px);
      /*transform:scale(0.5px;*/
    }
    100% {
      -webkit-transform: translateY(0);
      /*transform:scale(0.6px;/*/
    }
  }
  @-webkit-keyframes ringMove {
    0% {
      -webkit-transform: translateY(0px);
      /*transform:scale(0.5px;*/
      opacity:1;
    }
    50% {
      -webkit-transform: translateY(20px);
      /*transform:scale(0.5px;*/
      opacity:0;
    }
    100% {
      -webkit-transform: translateY(0);
      /*transform:scale(0.6px;/*/
      opacity:0;
    }
  }
  @-webkit-keyframes buttonMove{
    50%{
      -webkit-transform:scale(0.8);
      transform:scale(0.8);
      -webkit-filter:brightness(90%)
    }
    100%{
      -webkit-transform:scale(1);
      transform:scale(1);
      /*css3滤镜亮度百分比*/
      -webkit-filter:brightness(100%)
    }
  }
  *{
    margin:0;
  }
  .max-home-button-box{
    /*width:1462px;*/
    width:1300px;
    /*height:848px;*/
    height:760px;
    top:50%;
    left:50%;
    margin-top:-380px;
    margin-left:-650px;
    position: absolute;
    .max-home-box{
      /*background: #E65D6E;*/
      /*width:1462px;*/
      width:1300px;
      /*height:848px;*/
      height:760px;
      position: relative;
      display: flex;
      flex-direction: column;
      .img-1{
        position: absolute;
        /*width:863px;*/
        width:690px;
        /*height:504px;*/
        height:403px;
        top:191px;
        left:50%;
        margin-left:- 345px;
        -webkit-animation-name: centerMover;
        -webkit-animation-duration: 4s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-delay: 0s;
      }
      .img-2{
        position: absolute;
        /*width:463px;*/
        width:370px;
        /*height:106px;*/
        height:84px;
        top:391px;
        left:50%;
        margin-left:- 185px;
        -webkit-animation-name: ringMove;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-delay: 0s;
      }
      .img-3{
        position: absolute;
        /*width:493px;*/
        width:394px;
        /*height:107px;*/
        height:85px;
        top:319px;
        left:50%;
        margin-left:- 197px;
        -webkit-animation-name: ringMove;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-delay: 0.2s;
      }
      .img-4{
        position: absolute;
        /*width:554px;*/
        width:443px;
        /*height:118px;*/
        height:94px;
        top:231px;
        left:50%;
        margin-left:- 221px;
        -webkit-animation-name: ringMove;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-delay: 0.4s;
      }
      .img-5{
        position: absolute;
        width:394px;
        /*width:493px;*/
        /*height:107px;*/
        height:85px;
        /*width:644px;*/
        /*height:118px;*/
        top:141px;
        left:50%;
        //margin-left:-322px;
        margin-left:- 197px;
        -webkit-animation-name: ringMove;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-delay: 0.6s;
      }
      .img-6{
        position: absolute;
        width:354px;
        /*width:443px;*/
        /*height:106px;*/
        height:84px;
        /*width:734px;*/
        /*height:118px;*/
        top:051px;
        left:50%;
        //margin-left:-367px;
        margin-left:- 177px;
        -webkit-animation-name: ringMove;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-delay: 0.8s;
      }
      .max-bottom-box{
        width:1300px;
        margin:0 auto;
        flex:1;
        display: flex;
        flex-direction: column;
        .top-button-box{
          display: flex;
          .left-box{
            .position-button{
              width:297px;
              height:136px;
              cursor: pointer;
              position: relative;
              z-index:5;
              img{
                width:297px;
                height:136px;
              }
              p{
                position: absolute;
                top:43px;
                left:142px;
                text-align: center;
                font-size:18px;
                line-height:18px;
                background: linear-gradient(to top, #06F6F7 , #FFFFFF );
                -webkit-background-clip: text;
                color: transparent;
              }
            }
            .position-button:nth-child(1){
              margin-top:0;
            }
            .position-button:nth-child(2){
              margin:55px 0 0 40px;
            }
            .position-button:nth-child(3){
              margin:55px 0 0 80px;
            }
          }
          .center-box{
            flex:1;
            .position-button{
              width:147px;
              height:105px;
              cursor: pointer;
              position: relative;
              z-index:5;
              margin:0 auto 0;
              -webkit-animation-name: centerButtonMover;
              -webkit-animation-duration: 3s;
              -webkit-animation-iteration-count: infinite;
              -webkit-animation-delay: 0s;
              img{
                width:147px;
                height:105px;
              }
              p{
                position: absolute;
                top:66px;
                left:30px;
                text-align: center;
                font-size:18px;
                line-height:18px;
                background: linear-gradient(to top, #06F6F7 , #FFFFFF );
                -webkit-background-clip: text;
                color: transparent;
              }
            }
          }
          .right-box{
            .position-button{
              width:297px;
              height:136px;
              cursor: pointer;
              z-index:5;
              position: relative;
              img{
                width:297px;
                height:136px;
              }
              p{
                position: absolute;
                top:43px;
                left:56px;
                text-align: center;
                font-size:18px;
                line-height:18px;
                background: linear-gradient(to top, #06F6F7 , #FFFFFF );
                -webkit-background-clip: text;
                color: transparent;
              }
            }
            .position-button:nth-child(1){
              margin:0 0 0 80px;
            }
            .position-button:nth-child(2){
              margin:55px 0 0 40px;
            }
            .position-button:nth-child(3){
              margin-top:55px;
            }
          }
        }
        .center-button-box{
          flex:1;
        }
        .bottom-button-box{
          display: flex;
          .null-button{
            flex:1;
          }
          .position-button{
            width:140px;
            height:200px;
            cursor: pointer;
            z-index:5;
            position: relative;
            img{
              width:140px;
              height:230px;
            }
            p{
              position: absolute;
              top:154px;
              /*left:34px;*/
              width:140px;
              text-align: center;
              font-size:18px;
              line-height:18px;
              background: linear-gradient(to top, #06F6F7 , #FFFFFF );
              -webkit-background-clip: text;
              color: transparent;
            }
          }
          .position-button:nth-child(1),
          .position-button:nth-child(2),
          .position-button:nth-child(3),
          .position-button:nth-child(4){
            margin-right:95px;
          }
        }
        .position-button:hover{
          -webkit-animation-name: buttonMove;
          -webkit-animation-duration: 1.5s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-delay: 0s;
        }
      }
    }
  }
  .bottom-null-box{
    height:60px;
  }
</style>