FE-SchoolBigData/src/views/home.vue

<template>
  <div class="home">
    <div class="head-box">
      <!--<img class="logo-img" src="@/assets/ZDimages/logo@1x.png">-->
      <img class="logo-img" :src="rectangleLogo">
      <div class="title-box">
        <p class="title-p">实验室安全智慧化管控中心</p>
      </div>
      <div class="right-button-box">
        <p class="time-p">{{timeData?timeData:''}}</p>
        <div class="button-box">
          <img src="@/assets/ZDimages/icon_ay_tc@1x.png">
          <p @click="openBackManageUrl">退出</p>
        </div>
      </div>
    </div>
    <!--安全总览-->
    <newSafetyOverview ref="newSafetyOverview" v-if="pageType === 1"></newSafetyOverview>
    <!--设备资源-->
    <resourceDevice v-if="pageType === 2"></resourceDevice>
    <!--三维模型-->
    <dimensionalModel v-if="pageType === 3"></dimensionalModel>
    <!--视频资源-->
    <videoSurveillance v-if="pageType === 4"></videoSurveillance>
    <!--应急管控-->
    <emergencyManagement v-if="pageType === 5"></emergencyManagement>
    <planAlarm ref="planAlarm"></planAlarm>
  </div>
</template>
<script>
  import dimensionalModel from "./dimensionalModel/index.vue";
  import emergencyManagement from "./emergencyManagement/index.vue";
  import resourceDevice from "./resourceDevice/index.vue";
  import newSafetyOverview from "./newSafetyOverview/index.vue";
  import videoSurveillance from "./videoSurveillance/index.vue";
  import { getToken,removeToken } from '@/utils/auth'
  import planAlarm from "@/components/planAlarm/planAlarm.vue";
  export default {
    name: 'home',
    components: {
      dimensionalModel,
      emergencyManagement,
      resourceDevice,
      newSafetyOverview,
      videoSurveillance,
      planAlarm,
    },
    data () {
      return {
        rectangleLogo:localStorage.getItem('rectangleLogo'),
        // 时间
        timeData:null,
        // 定时器
        timer:null,
        pageType:1,
      }
    },
    created(){
      if(!getToken()){
        this.$router.push({path:'/'});
      }
    },
    mounted(){
      this.timeFunction();
    },
    methods:{
      openBackManageUrl(){
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeToken();
          if(localStorage.getItem('entranceJumpType') == 'SCHOOL'){
            window.location.href = process.env.VUE_APP_OUT_URL;
          }else if(localStorage.getItem('entranceJumpType') == 'PC'){
            window.location.href = process.env.VUE_APP_OUT_URL_PC;
          }
        }).catch(() => {});
      },
      //切换页面
      pageCheck(type){
        if(type == 3){
          window.open('https://zcsjpt-szls.nwafu.edu.cn/')
        }else{
          if(type !== this.pageType){
            this.$set(this,'pageType',type);
          }
        }
      },
      //时间定时器
      timeFunction(){
        let self = this;
        this.timer = window.setInterval(showTime, 1000);
        function showTime() {
          const date = new Date();
          const y = date.getFullYear().toString();
          const m = (date.getMonth() + 1).toString().padStart(2, '0');
          const d = date.getDate().toString().padStart(2, '0');
          const hours = date.getHours().toString().padStart(2, '0');
          const minutes = date.getMinutes().toString().padStart(2, '0');
          const seconds = date.getSeconds().toString().padStart(2, '0');
          self.$set(self,'timeData',y+'年'+m+'月'+d+'日 '+hours+':'+minutes+':'+seconds);
        }
      },
      goDataMap(obj){
        if(this.pageType == 1){
          this.$refs['newSafetyOverview'].laboratoryBigViewSelectTriggerInfoData(obj)
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.timer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.timer);
    }
  }
</script>
<style scoped lang="scss">
  .home{
    height:100%;
    background: no-repeat;
    background-color: #000F14;
    background-image: url("../assets/ZDimages/backImg.gif");
    background-size: 100% 1530px;
    position: relative;
    .head-box{
      height:121px;
      display: flex;
      .logo-img{
        width:350px;
        height:77px;
        margin:40px 0 0 60px;
      }
      .title-box{
        flex:1;
        .title-p{
          margin:18px auto 0;
          font-size:40px;
          line-height:40px;
          height:40px;
          font-weight:700;
          text-align: center;
          background: -webkit-linear-gradient(0deg, #34e4ff, #FFFFFF); /* Chrome, Safari */
          background: linear-gradient(0deg, #34e4ff, #FFFFFF); /* 标准语法 */
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent; /* 其他浏览器 */
        }
      }
      .right-button-box{
        width:351px;
        height:42px;
        margin:55px 63px 0 0;
        display: flex;
        .time-p{
          width:245px;
          height:42px;
          line-height:42px;
          font-size:20px;
          color:#00FFFF;
        }
        .button-box{
          cursor: pointer;
          width:106px;
          height:42px;
          display: flex;
          img{
            width:24px;
            height:24px;
            margin:9px 5px 9px 15px;
          }
          p{
            font-size:24px;
            color:#00FFFF;
            width:62px;
            height:42px;
            line-height:42px;
          }
        }
      }
    }
  }
</style>