FE-daPengDaPing-55/src/views/home.vue

<template>
  <div class="home" v-if="showPage">
    <headComponent></headComponent>
    <div class="home-page" v-show="pageType == 1">
      <div class="top-max-big-box">
        <videoComponent ref="videoComponent"></videoComponent>
        <overviewComponent></overviewComponent>
        <usageRateComponent></usageRateComponent>
      </div>
      <div class="bottom-max-big-box">
        <mapComponent ref="mapComponent"></mapComponent>
        <subComponent ref="subComponent"></subComponent>
      </div>
    </div>
    <mediaAnnouncementComponent v-if="pageType == 2"
      :mediaAnnouncementComponentData="mediaAnnouncementComponentData"
      ref="mediaAnnouncementComponent">
    </mediaAnnouncementComponent>
  </div>
</template>
<script>
  import { login } from "@/api/login";
  import { loginYiLi } from "@/api/yiLi";
  import { getConfigByType  } from "@/api/index";
  import { setToken,setTokenYiLi } from '@/utils/auth'
  import { Encrypt,Decrypt} from '@/utils/secret'
  //首页组件
  import headComponent from './components/headComponent.vue'
  import videoComponent from './components/videoComponent.vue'
  import overviewComponent from './components/overviewComponent.vue'
  import usageRateComponent from './components/usageRateComponent.vue'
  import mapComponent from './components/mapComponent.vue'
  import subComponent from './components/subComponent.vue'
  //通知公告
  import mediaAnnouncementComponent from './components/mediaAnnouncementComponent.vue'
  export default {
    name: 'home',
    components: {
      headComponent,
      videoComponent,
      overviewComponent,
      usageRateComponent,
      mapComponent,
      subComponent,
      mediaAnnouncementComponent,
    },
    data () {
      return {
        //页面开关
        showPage:false,
        //展示状态
        pageType:1,
        mediaAnnouncementComponentData:null,
      }
    },
    created(){

    },
    mounted(){
      this.login();
      this.getToken();
    },
    methods:{
      login(){
        Promise.all([
          this.getToken(),
          this.getTokenYiLi(),
          this.getExploitConfig()
        ]).then((result)=>{
          this.$set(this,'showPage',true);
        }).catch((error) => {})
      },
      //获取token
      getToken(){
        login().then(res1 => {
          setToken(res1.data.token)
        });
      },
      //获取YiLi-token
      getTokenYiLi(){
        loginYiLi().then(res2 => {
          setTokenYiLi(res2.access_token);
        });
      },
      //获取开发配置
      getExploitConfig(){
        getConfigByType({ category: 2, configType: 5 }).then(response => {
          let obj = JSON.parse(response.data.configValue)
          //判定http或者https
          let urlText = window.location.href.split('://')[0]+'://';
          let outerNet = window.location.href.indexOf(obj.ipIdentify) == -1//true外网 false 内网
          if(outerNet){//外网
            //MQTT地址
            localStorage.setItem('mqttUrl','wss://'+Decrypt(obj.mqttExtranetUrl))
            //MQTT账号
            localStorage.setItem('mqttUser',Decrypt(obj.mqttExtranetUser))
            //MQTT密码
            localStorage.setItem('mqttPassword',Decrypt(obj.mqttExtranetPassword))
            //文件浏览环境
            localStorage.setItem('fileBrowseEnvironment',window.location.href.split('://')[0]+'://'+Decrypt(obj.fileBrowseEnvironmentExtranet))
          }else{
            //MQTT地址
            localStorage.setItem('mqttUrl','ws://'+Decrypt(obj.mqttIntranetUrl))
            //MQTT账号
            localStorage.setItem('mqttUser',Decrypt(obj.mqttIntranetUser))
            //MQTT密码
            localStorage.setItem('mqttPassword',Decrypt(obj.mqttIntranetPassword))
            //文件浏览环境
            localStorage.setItem('fileBrowseEnvironment',window.location.href.split('://')[0]+'://'+Decrypt(obj.fileBrowseEnvironment))
          }
        });
      },
      //通知组件数据给予
      setNoticeData(item,type){
        let self = this;
        if(type == 1){
          this.$set(this,'pageType',1);
        }if(type == 2){
          this.$set(this,'mediaAnnouncementComponentData',item);
          setTimeout(function() {
            //获取报警信息
            self.$set(self,'pageType',2);
          },500)
        }if(type == 3){
          this.$set(this,'pageType',2);
        }
      },
      //房间组件数据给予
      setRoomData(item){
        this.$refs.subComponent.getSubData(item);
      },
      //视频组件数据给予
      setVideoData(item){
        this.$refs.videoComponent.initialize(item);
      },
      //实验室详情开启
      setSubInfoType(){
        this.$refs.mapComponent.subInfoTypeFunction();
      },
      // 关闭map组件报警
      setOffAlarm(){
        this.$refs.mapComponent.offAlarm();
      },
      setOffSubAlarm(){
        this.$refs.subComponent.setOffAlarm();
      },
    },
    beforeDestroy() {

    },
    destroyed() {

    }
  }
</script>
<style scoped lang="scss">
  .home{
    height:100%;
    background: no-repeat;
    background-color: #002055;
    .home-page{
      height:100%;
      .top-max-big-box{
        height:543px;
        display: flex;
      }
      .bottom-max-big-box{
        height:467px;
        display: flex;
      }
    }
  }
</style>