zc

src/api/index.js

@@ -1,5 +1,26 @@
 import request from '@/utils/request'
 
+/*                分类获取公共配置
+* category        1.系统参数 2.公共配置
+* configType      1.基础配置 2.管控一体机 3.化学品终端 4.小程序配置 5.开发配置 6.首页配置
+*/
+export function getConfigByType(data) {
+  return request({
+    url: '/system/config/info/getConfigByType',
+    method: 'post',
+    data: data
+  })
+}
+
+//获取摄像头流地址
+export function iotCameraFindByCondition(data) {
+  return request({
+    url: '/iot/camera/findByCondition',
+    method: 'post',
+    data: data
+  })
+}
+
 //根据设备ID获取摄像头流地址
 export function iotCameraGetPreviewURLs(query) {
   return request({
@@ -17,3 +38,30 @@ export function laboratoryBigViewSelectTriggerInfo(query) {
     params: query
   })
 }
+
+//获取实验室传感器
+export function iotSensorFindBySubId(query) {
+  return request({
+    url: '/iot/sensor/findBySubId',
+    method: 'get',
+    params: query
+  })
+}
+
+//获取时间
+export function laboratoryWsBigViewGetTimeData(query) {
+  return request({
+    url: '/laboratory/wsBigView/getTimeData?type=1',
+    method: 'get',
+    params: query
+  })
+}
+
+//实验室今日人次
+export function laboratoryWsBigViewGetUsePerson(query) {
+  return request({
+    url: '/laboratory/wsBigView/getUsePerson',
+    method: 'get',
+    params: query
+  })
+}

src/components/H5PlayerVideo/H5PlayerVideo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="H5PlayerVideo">
     <div :id="videoData.id" :ref="videoData.id"></div>
-    <p class="full-screen-button" @click="fullScreen"></p>
+    <p class="full-screen-button" v-if="!videoProps.fullShow" @click="fullScreen"></p>
     <!--<p class="full-failed-button" v-if="fullScreenType" @click="outFullScreen"></p>-->
   </div>
 </template>

src/main.js

@@ -10,6 +10,7 @@ import App from './App'
 import store from './store'
 import router from './router'
 import { parseTime,judgmentNetworkReturnAddress,accAdd,accSub,accDiv,accMul } from "@/utils/index";
+import cal from '@/utils/calculation';
 //全屏组件
 import dataV from '@jiaminghi/data-view'
 import './assets/icons'
@@ -20,6 +21,7 @@ import "echarts-gl";
 Vue.prototype.$echarts = echarts
 
 
+Vue.prototype.cal = cal
 Vue.prototype.parseTime = parseTime
 Vue.prototype.judgmentNetworkReturnAddress = judgmentNetworkReturnAddress
 Vue.prototype.accAdd = accAdd

src/utils/calculation.js

@@ -0,0 +1,115 @@
+var countDecimals = function(num) {
+  var len = 0;
+  try {
+    num = Number(num);
+    var str = num.toString().toUpperCase();
+    if (str.split('E').length === 2) {
+      var isDecimal = false;
+      if (str.split('.').length === 2) {
+        str = str.split('.')[1];
+        if (parseInt(str.split('E')[0]) !== 0) {
+          isDecimal = true;
+        }
+      }
+      let x = str.split('E');
+      if (isDecimal) {
+        len = x[0].length;
+      }
+      len -= parseInt(x[1]);
+    } else if (str.split('.').length === 2) {
+      if (parseInt(str.split('.')[1]) !== 0) {
+        len = str.split('.')[1].length;
+      }
+    }
+  } catch (e) {
+    throw e;
+  } finally {
+    if (isNaN(len) || len < 0) {
+      len = 0;
+    }
+    return len;
+  }
+};
+var convertToInt = function(num) {
+  num = Number(num);
+  var newNum = num;
+  var times = countDecimals(num);
+  var temp_num = num.toString().toUpperCase();
+  if (temp_num.split('E').length === 2) {
+    newNum = Math.round(num * Math.pow(10, times));
+  } else {
+    newNum = Number(temp_num.replace(".", ""));
+  }
+  return newNum;
+};
+var getCorrectResult = function(type, num1, num2, result) {
+  var temp_result = 0;
+  switch (type) {
+    case "add":
+      temp_result = num1 + num2;
+      break;
+    case "sub":
+      temp_result = num1 - num2;
+      break;
+    case "div":
+      temp_result = num1 / num2;
+      break;
+    case "mul":
+      temp_result = num1 * num2;
+      break;
+  }
+  if (Math.abs(result - temp_result) > 1) {
+    return temp_result;
+  }
+  return result;
+};
+export default {
+  //加法
+  accAdd(num1, num2) {
+    num1 = Number(num1);
+    num2 = Number(num2);
+    var dec1, dec2, times;
+    try { dec1 = countDecimals(num1) + 1; } catch (e) { dec1 = 0; }
+    try { dec2 = countDecimals(num2) + 1; } catch (e) { dec2 = 0; }
+    times = Math.pow(10, Math.max(dec1, dec2));
+    var result = (this.accMul(num1, times) + this.accMul(num2, times)) / times;
+    return getCorrectResult("add", num1, num2, result);
+  },
+  //减法
+  accSub(num1, num2) {
+    num1 = Number(num1);
+    num2 = Number(num2);
+    var dec1, dec2, times;
+    try { dec1 = countDecimals(num1) + 1; } catch (e) { dec1 = 0; }
+    try { dec2 = countDecimals(num2) + 1; } catch (e) { dec2 = 0; }
+    times = Math.pow(10, Math.max(dec1, dec2));
+    var result = Number((this.accMul(num1, times) - this.accMul(num2, times)) / times);
+    return getCorrectResult("sub", num1, num2, result);
+  },
+  //除法
+  accDiv(num1, num2) {
+    num1 = Number(num1);
+    num2 = Number(num2);
+    var t1 = 0,
+      t2 = 0,
+      dec1, dec2;
+    try { t1 = countDecimals(num1); } catch (e) {}
+    try { t2 = countDecimals(num2); } catch (e) {}
+    dec1 = convertToInt(num1);
+    dec2 = convertToInt(num2);
+    var result = this.accMul((dec1 / dec2), Math.pow(10, t2 - t1));
+    return getCorrectResult("div", num1, num2, result);
+  },
+  //乘法
+  accMul(num1, num2) {
+    num1 = Number(num1);
+    num2 = Number(num2);
+    var times = 0,
+      s1 = num1.toString(),
+      s2 = num2.toString();
+    try { times += countDecimals(s1); } catch (e) {}
+    try { times += countDecimals(s2); } catch (e) {}
+    var result = convertToInt(s1) * convertToInt(s2) / Math.pow(10, times);
+    return getCorrectResult("mul", num1, num2, result);
+  }
+}

src/views/components/alarmComponent.vue

@@ -1,30 +0,0 @@
-<!--报警信息-->
-<template>
-  <div class="alarmComponent">
-
-  </div>
-</template>
-<script>
-  export default {
-    name: 'alarmComponent',
-    data () {
-      return {
-
-      }
-    },
-    created(){
-
-    },
-    mounted(){
-
-    },
-    methods:{
-
-    },
-  }
-</script>
-<style scoped lang="scss">
-  .alarmComponent{
-
-  }
-</style>

src/views/components/headComponent.vue

@@ -3,10 +3,13 @@
   <div class="headComponent">
     <img class="logo-img" src="@/assets/ZDimages/logo.png">
     <p class="title-p">西北农林科技大学科研温室{{title}}</p>
-    <p class="time-p">{{dateData}} {{weekData}} {{timeData}}</p>
+    <p class="time-p">{{timeData}}</p>
   </div>
 </template>
 <script>
+  import {
+    laboratoryWsBigViewGetTimeData
+  } from "@/api/index";
   export default {
     name: 'headComponent',
     data () {
@@ -22,37 +25,20 @@
 
     },
     mounted(){
-      this.getCurrentDate();
-      this.getCurrentDay();
-      this.getCurrentTime();
       this.timeFunction();
     },
     methods:{
-      // 获取当天年月日（格式：2025年8月8日）
-      getCurrentDate() {
-        const now = new Date();
-        const year = now.getFullYear();
-        const month = now.getMonth() + 1; // 月份从0开始需+1
-        const day = now.getDate();
-        this.$set(this,'dateData',`${year}年${month}月${day}日`);
-      },
-      // 获取当天星期几（格式：星期五）
-      getCurrentDay() {
-        const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
-        this.$set(this,'weekData',days[new Date().getDay()]);
-      },
-      // 获取当前时分（格式：13:33）
-      getCurrentTime() {
-        const now = new Date();
-        // 补零函数
-        const padZero = num => num.toString().padStart(2, '0');
-        this.$set(this,'timeData',`${padZero(now.getHours())}:${padZero(now.getMinutes())}`);
-      },
       //时间定时器
       timeFunction(){
         let self = this;
-        this.timer = window.setInterval(self.getCurrentTime, 20000);
+        this.laboratoryWsBigViewGetTimeData();
+        this.timer = window.setInterval(self.laboratoryWsBigViewGetTimeData, 30000);
       },
+      laboratoryWsBigViewGetTimeData(){
+        laboratoryWsBigViewGetTimeData().then(res => {
+          this.$set(this,'timeData',res.data)
+        })
+      }
     },
     beforeDestroy() {
       //清除定时器

src/views/components/mediaAnnouncementComponent.vue

@@ -1,30 +1,347 @@
 <!--通知公告-->
 <template>
   <div class="mediaAnnouncementComponent">
-
+    <div class="content-box" id="scrollTextBox" v-if="pageType == 0" v-html="content"></div>
+    <vue-office-pdf
+      id="scrollPdfBox"
+      :options="{width:1190}"
+      v-if="pageType == 1"
+      :src="lookUrl"
+      @rendered="renderedHandler"
+      @error="errorHandler"
+    />
+    <vue-office-docx
+      id="scrollDocxBox"
+      style="width:1190px;margin:0 auto;"
+      v-if="pageType == 2"
+      :src="lookUrl"
+      @rendered="renderedHandler"
+      @error="errorHandler"
+    />
+    <div class="img-max-big-box" ref="viewBox" v-if="pageType == 3">
+      <img :src="lookImg" ref="viewImg"
+           v-if="imgShowType"
+           :style="'top:'+top+'px;left:'+left+'px;height:'+(height+(heightRatio*ratio))+'px;width:'+(width+(widthRatio*ratio))+'px;'">
+    </div>
+    <div class="mp4-max-big-box" ref="mp4Box" v-if="pageType == 4">
+      <video class="video-player vjs-custom-skin"
+             ref="videoBox"
+             style="display:block;width:1300px;height:731px;margin:140px auto;"
+             autoplay="autoplay"
+             v-if="mp4Url">
+        <source :src="mp4Url" type="video/mp4">
+      </video>
+    </div>
   </div>
 </template>
 <script>
+  //引入VueOfficeDocx组件
+  import VueOfficeDocx from '@vue-office/docx'
+  import '@vue-office/docx/lib/index.css'
+  //引入VueOfficePdf组件
+  import VueOfficePdf from '@vue-office/pdf'
   export default {
     name: 'mediaAnnouncementComponent',
+    props: {
+      mediaAnnouncementComponentData: {}
+    },
+    components: {
+      VueOfficeDocx,
+      VueOfficePdf
+    },
     data () {
       return {
-
+        pageType:null,
+        //文本/文件地址
+        content:null,
+        //img地址
+        lookUrl:null,
+        //MP4地址
+        mp4Url:null,
+        //定时器
+        scrollInterval:null,
+        scrollIntervalTime:16,
+        //图片数据
+        //定位
+        top: 0,
+        left: 0,
+        //尺寸
+        width: 0,
+        height: 0,
+        //最大画布尺寸
+        maxWidth: 0,
+        maxHeight: 0,
+        lookImg: '',
+        imgShowType: false,
+        imgNullType: false,
+        ratio: 1,
+        widthRatio: null,
+        heightRatio: null,
       }
     },
     created(){
 
     },
     mounted(){
-
+      this.initialize();
     },
     methods:{
-
+      initialize(){
+        let self = this;
+        if(this.mediaAnnouncementComponentData.type == 0){
+          this.$set(this,'pageType',0);
+          this.$set(this,'content',this.mediaAnnouncementComponentData.content);
+          setTimeout(function() {
+            self.startScrolling()
+          },500)
+        }else{
+          if(this.mediaAnnouncementComponentData.content.indexOf('.pdf') != -1){
+            this.$set(this,'pageType',1);
+            this.$set(this,'lookUrl',this.mediaAnnouncementComponentData.content);
+          }else if(this.mediaAnnouncementComponentData.content.indexOf('.docx') != -1){
+            this.$set(this,'pageType',2);
+            this.$set(this,'lookUrl',this.mediaAnnouncementComponentData.content);
+          }else if(this.mediaAnnouncementComponentData.content.indexOf('.png') != -1){
+            this.$set(this,'pageType',3);
+            this.getImgData(this.mediaAnnouncementComponentData.content);
+          }else if(this.mediaAnnouncementComponentData.content.indexOf('.jpg') != -1){
+            this.$set(this,'pageType',3);
+            this.getImgData(this.mediaAnnouncementComponentData.content);
+          }else if(this.mediaAnnouncementComponentData.content.indexOf('.mp4') != -1){
+            this.$set(this,'mp4Url',this.mediaAnnouncementComponentData.content);
+            this.$set(this,'pageType',4);
+            this.playVideo();
+          }
+        }
+      },
+      //文件滚动
+      startScrolling() {
+        let scrollBox = null;
+        if(this.pageType == 0){
+          scrollBox = document.getElementById('scrollTextBox');
+        }else if(this.pageType == 1){
+          scrollBox = document.getElementById('scrollPdfBox');
+        }else if(this.pageType == 2){
+          scrollBox = document.getElementById('scrollDocxBox');
+        }
+        const maxScroll = scrollBox.scrollHeight - scrollBox.clientHeight;
+        let currentPos = scrollBox.scrollTop;
+        const speed = 1;
+        this.scrollInterval = setInterval(() => {
+          currentPos += speed;
+          scrollBox.scrollTop = currentPos;
+          // 到达底部时重置到顶部
+          if (currentPos >= maxScroll) {
+            currentPos = 0;
+            scrollBox.scrollTop = 0;
+            // 可选：这里可以重新获取maxScroll，防止内容动态变化
+            // maxScroll = scrollBox.scrollHeight - scrollBox.clientHeight;
+          }
+        }, this.scrollIntervalTime);
+      },
+      //图片数据
+      getImgData(newImg){
+        let self = this;
+        this.$set(this, 'maxWidth', this.$refs['viewBox'].offsetWidth)
+        this.$set(this, 'maxHeight', this.$refs['viewBox'].offsetHeight)
+        // 图片地址
+        let img = new Image()
+        let res = {}
+        img.src = newImg
+        img.onload = function() {
+          res = {
+            width: img.width,
+            height: img.height
+          }
+          if (self.maxWidth >= res.width && self.maxHeight >= res.height) {
+            let w = self.cal.accSub(self.maxWidth, res.width)
+            let h = self.cal.accSub(self.maxHeight, res.height)
+            self.$set(self, 'width', res.width)
+            self.$set(self, 'height', res.height)
+            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
+            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
+            self.$set(self, 'lookImg', newImg)
+            self.$set(self, 'imgShowType', true)
+            self.initializeRation(res.width, res.height)
+          } else if (self.maxWidth >= res.width && self.maxHeight < res.height) {
+            let a = self.cal.accDiv(res.width, res.height)
+            let b = self.cal.accSub(res.height, (self.maxHeight - 100))
+            let c = self.cal.accMul(a, b)
+            let width = self.cal.accSub(res.width, c)
+            let height = self.cal.accSub(res.height, b)
+            let w = self.cal.accSub(self.maxWidth, width)
+            let h = self.cal.accSub(self.maxHeight, height)
+            self.$set(self, 'width', width)
+            self.$set(self, 'height', height)
+            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
+            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
+            self.$set(self, 'lookImg', newImg)
+            self.$set(self, 'imgShowType', true)
+            self.initializeRation(width, height)
+          } else if (self.maxWidth < res.width && self.maxHeight >= res.height) {
+            let a = self.cal.accDiv(res.height, res.width)
+            let b = self.cal.accSub(res.width, (self.maxWidth - 100))
+            let c = self.cal.accMul(a, b)
+            let width = self.cal.accSub(res.width, b)
+            let height = self.cal.accSub(res.height, c)
+            let w = self.cal.accSub(self.maxWidth, width)
+            let h = self.cal.accSub(self.maxHeight, height)
+            self.$set(self, 'width', width)
+            self.$set(self, 'height', height)
+            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
+            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
+            self.$set(self, 'lookImg', newImg)
+            self.$set(self, 'imgShowType', true)
+            self.initializeRation(width, height)
+          } else {
+            let x = self.cal.accSub(res.width, self.maxWidth)
+            let y = self.cal.accSub(res.height, self.maxHeight)
+            if (x >= y) {
+              let a = self.cal.accDiv(res.height, res.width)
+              let b = self.cal.accSub(res.width, (self.maxWidth - 100))
+              let c = self.cal.accMul(a, b)
+              let width = self.cal.accSub(res.width, b)
+              let height = self.cal.accSub(res.height, c)
+              let w = self.cal.accSub(self.maxWidth, width)
+              let h = self.cal.accSub(self.maxHeight, height)
+              self.$set(self, 'width', width)
+              self.$set(self, 'height', height)
+              self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
+              self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
+              self.$set(self, 'lookImg', newImg)
+              self.$set(self, 'imgShowType', true)
+              self.initializeRation(width, height)
+            } else {
+              let a = self.cal.accDiv(res.width, res.height)
+              let b = self.cal.accSub(res.height, (self.maxHeight - 100))
+              let c = self.cal.accMul(a, b)
+              let width = self.cal.accSub(res.width, c)
+              let height = self.cal.accSub(res.height, b)
+              let w = self.cal.accSub(self.maxWidth, width)
+              let h = self.cal.accSub(self.maxHeight, height)
+              self.$set(self, 'width', width)
+              self.$set(self, 'height', height)
+              self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
+              self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
+              self.$set(self, 'lookImg', newImg)
+              self.$set(self, 'imgShowType', true)
+              self.initializeRation(width, height)
+            }
+          }
+        }
+        img.onerror = function() {
+          self.$set(self, 'imgNullType', true)
+        }
+      },
+      //播放视频
+      playVideo(){
+        var video = this.$refs.videoBox;
+        video.autoplay = true;
+        video.play()
+      },
+      //初始化缩放倍率
+      initializeRation(w, h) {
+        this.$set(this, 'ratio', 0)
+        this.$set(this, 'widthRatio', this.cal.accDiv(w, 10))
+        this.$set(this, 'heightRatio', this.cal.accDiv(h, 10))
+      },
+      //文件加载成功
+      renderedHandler() {
+        console.log("渲染完成")
+        this.startScrolling()
+      },
+      //文件加载失败
+      errorHandler() {
+        console.log("渲染失败")
+      },
+    },
+    beforeDestroy() {
+      clearInterval(this.scrollInterval);
     },
+    destroyed() {
+      clearInterval(this.scrollInterval);
+    }
   }
 </script>
 <style scoped lang="scss">
   .mediaAnnouncementComponent{
-
+    height:1020px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    //富文本
+    .content-box{
+      flex:1;
+      width:1300px;
+      margin:20px auto;
+      overflow-y: scroll;
+    }
+    .content-box::-webkit-scrollbar{
+      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+      height: 6px;
+    }
+    .content-box::-webkit-scrollbar-thumb{
+      border-radius: 5px;
+      background: #003988;
+    }
+    .content-box::-webkit-scrollbar-track{
+      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
+      border-radius: 0;
+      background: #FFFFFF;
+      display: none;
+    }
+    //PDF
+    ::v-deep .vue-office-pdf{
+      margin:20px auto!important;
+      width:1190px!important;
+    }
+    ::v-deep .vue-office-pdf-wrapper{
+      background-color: rgba(0,0,0,0)!important;
+    }
+    ::v-deep .vue-office-pdf::-webkit-scrollbar{
+      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+      height: 6px;
+    }
+    ::v-deep .vue-office-pdf::-webkit-scrollbar-thumb{
+      border-radius: 5px;
+      background: #003988;
+    }
+    ::v-deep .vue-office-pdf::-webkit-scrollbar-track{
+      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
+      border-radius: 0;
+      background: #FFFFFF;
+      display: none;
+    }
+    //docx
+    ::v-deep .vue-office-docx{
+      margin:20px auto!important;
+      width:1190px!important;
+    }
+    ::v-deep .docx-wrapper{
+      background-color: rgba(0,0,0,0)!important;
+    }
+    ::v-deep .vue-office-docx::-webkit-scrollbar{
+      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+      height: 6px;
+    }
+    ::v-deep .vue-office-docx::-webkit-scrollbar-thumb{
+      border-radius: 5px;
+      background: #003988;
+    }
+    ::v-deep .vue-office-docx::-webkit-scrollbar-track{
+      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
+      border-radius: 0;
+      background: #FFFFFF;
+      display: none;
+    }
+    .img-max-big-box{
+      flex: 1;
+      overflow: hidden;
+      position: relative;
+      img {
+        position: absolute;
+        -webkit-user-drag: none;
+      }
+    }
   }
 </style>

src/views/components/videoComponent.vue

@@ -2,6 +2,7 @@
 <template>
   <div class="videoComponent">
     <p class="title-p">视频监控</p>
+    <img v-if="!videoType" class="video-max-big-box" src="@/assets/ZDimages/video_img.png">
     <H5PlayerVideo class="video-max-big-box" :videoProps="videoData" v-if="videoType"></H5PlayerVideo>
     <img class="position-left-bottom" src="@/assets/ZDimages/img_min_icon.png">
     <img class="position-right-bottom" src="@/assets/ZDimages/img_min_icon.png">
@@ -30,17 +31,33 @@
 
     },
     mounted(){
-      this.initialize();
+
     },
     methods:{
-      initialize(){
-        this.$set(this,'videoData',{
-          width: 737, //(宽度:非必传-默认600)
-          height: 417, //(高度:非必传-默认338)
-          url: '',
-          cameraIndexCode: '',
-        });
-        this.$set(this,'videoType',true);
+      initialize(obj){
+        // console.log('videoObj',obj);
+        let self = this;
+        this.$set(this,'videoType',false);
+        setTimeout(function() {
+          if(obj.monitorVisable){
+            if(obj.videoList[0]){
+              //开启
+              self.$set(self,'videoData',{
+                width: 737, //(宽度:非必传-默认600)
+                height: 417, //(高度:非必传-默认338)
+                url: obj.videoList[0].url,
+                cameraIndexCode: obj.videoList[0].cameraIndexCode,
+              });
+              self.$set(self,'videoType',true);
+            }else{
+              //关闭
+              self.$set(self,'videoType',false);
+            }
+          }else{
+            //关闭
+            self.$set(self,'videoType',false);
+          }
+        }, 200)
       },
       //全屏开启-关闭轮播
       stopTime(cameraIndexCode){

src/views/home.vue

@@ -1,25 +1,29 @@
 <template>
   <div class="home">
+    <headComponent></headComponent>
     <div class="home-page" v-if="showPage" v-show="pageType == 1">
-      <headComponent></headComponent>
       <div class="top-max-big-box">
         <videoComponent ref="videoComponent"></videoComponent>
         <overviewComponent></overviewComponent>
         <usageRateComponent></usageRateComponent>
       </div>
       <div class="bottom-max-big-box">
-        <mapComponent></mapComponent>
+        <mapComponent ref="mapComponent"></mapComponent>
         <subComponent ref="subComponent"></subComponent>
       </div>
     </div>
-    <mediaAnnouncementComponent v-if="pageType == 2"></mediaAnnouncementComponent>
-    <alarmComponent v-if="alarmType"></alarmComponent>
+    <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'
@@ -29,8 +33,6 @@
   import subComponent from './components/subComponent.vue'
   //通知公告
   import mediaAnnouncementComponent from './components/mediaAnnouncementComponent.vue'
-  //报警信息
-  import alarmComponent from './components/alarmComponent.vue'
   export default {
     name: 'home',
     components: {
@@ -41,7 +43,6 @@
       mapComponent,
       subComponent,
       mediaAnnouncementComponent,
-      alarmComponent,
     },
     data () {
       return {
@@ -49,8 +50,7 @@
         showPage:false,
         //展示状态
         pageType:1,
-        //报警开关
-        alarmType:false,
+        mediaAnnouncementComponentData:null,
       }
     },
     created(){
@@ -64,6 +64,7 @@
       getToken(){
         login().then(res1 => {
           setToken(res1.data.token)
+          this.getExploitConfig();
           this.getTokenYiLi();
         });
       },
@@ -88,6 +89,8 @@
             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))
@@ -95,16 +98,44 @@
             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.subComponent.getSubData(item);
+        this.$refs.videoComponent.initialize(item);
+      },
+      //实验室详情开启
+      setSubInfoType(){
+        this.$refs.mapComponent.subInfoTypeFunction();
+      },
+      // 关闭map组件报警
+      setOffAlarm(){
+        this.$refs.mapComponent.offAlarm();
+      },
+      setOffSubAlarm(){
+        this.$refs.subComponent.setOffAlarm();
       },
     },
     beforeDestroy() {