FE-V2-PC/src/views/home.vue

<template>
  <div class="home" :class="userType != 22&&initPage == 'true' ? 'home-class' : ''" >
    <home-navbar />
    <div class="max-big-home-box" v-if="userType != 22&&initPage == 'true'">
      <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>
    </div>
    <backAnimation v-if="userType != '22'&&initPage == 'true'"></backAnimation>
  </div>
</template>

<script>
  import backAnimation from "@/components/backAnimation/backAnimation"
  import homeNavbar from './homeNavbar.vue'
  export default {
    name: "home",
    components: {
      homeNavbar,
      backAnimation
    },
    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">
  /*@media screen and (min-height:10px){*/
    /*.display-none-one{*/
      /*display: none;*/
    /*}*/
    /*.max-bottom-box{*/
      /*.top-button-box{*/
        /*.top-margin{*/
          /*margin-top:20px!important;*/
        /*}*/
      /*}*/
    /*}*/
  /*}*/
  /*@media screen and (min-height:850px){*/
    /*.max-bottom-box{*/
      /*.top-button-box{*/
        /*.top-margin{*/
          /*margin-top:50px!important;*/
        /*}*/
      /*}*/
    /*}*/
  /*}*/
  /*@media screen and (min-height:900px){*/
    /*.max-bottom-box{*/
      /*.top-button-box{*/
        /*.top-margin{*/
          /*margin-top:100px!important;*/
        /*}*/
      /*}*/
    /*}*/
  /*}*/
  /*@media screen and (min-height:1000px){*/
    /*.display-none-one{*/
      /*display: block!important;*/
    /*}*/
  /*}*/
  @-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%)
    }
  }
  .home-class{
    background-color: #004d8c;
    background-image:url("../assets/ZDimages/home/img_tydlpt_bg.png")!important;
    -webkit-background-size: 100%;
    background-size: 100%;

  }
  .home {
    height:100%;
    width:100%;
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    *{
      margin:0;
    }
    .max-big-home-box{
      position: relative;
      flex:1;
      overflow: hidden;
      .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>