zc

src/api/yiLi.js

@@ -44,3 +44,12 @@ export function dashboardsMediaAnnouncements(query) {
     params: query
   })
 }
+
+// 监控轮播配置
+export function dashboardsMonitorConfig(query) {
+  return request({
+    url: "/dashboards/monitor-config",
+    method: 'get',
+    params: query
+  })
+}

src/utils/mapList.js

@@ -0,0 +1,645 @@
+let mapList = [
+  //1-3区mapComponent-map-1-3
+  //1区
+  {
+    floorId:process.env.VUE_APP_FLOOR_ID_1,
+    floorName:'1区',
+    list:[
+      {
+        roomNumName:'A01',
+      },
+      {
+        roomNumName:'A02',
+      },
+      {
+        roomNumName:'A03',
+      },
+      {
+        roomNumName:'A04',
+      },
+      {
+        roomNumName:'A05',
+      },
+      {
+        roomNumName:'A06',
+      },
+      {
+        roomNumName:'A07',
+      },
+      {
+        roomNumName:'A08',
+      },
+      {
+        roomNumName:'A09',
+      },
+      {
+        roomNumName:'A10',
+      },
+      {
+        roomNumName:'A11',
+      },
+      {
+        roomNumName:'B01',
+      },
+      {
+        roomNumName:'B02',
+      },
+      {
+        roomNumName:'B03',
+      },
+      {
+        roomNumName:'B04',
+      },
+      {
+        roomNumName:'B05',
+      },
+      {
+        roomNumName:'B06',
+      },
+      {
+        roomNumName:'B07',
+      },
+      {
+        roomNumName:'B08',
+      },
+    ],
+  },
+  //2区
+  {
+    floorId:process.env.VUE_APP_FLOOR_ID_2,
+    floorName:'2区',
+    list:[
+      {
+        roomNumName:'C01',
+      },
+      {
+        roomNumName:'C02',
+      },
+      {
+        roomNumName:'C03',
+      },
+      {
+        roomNumName:'C04',
+      },
+      {
+        roomNumName:'C05',
+      },
+      {
+        roomNumName:'C06',
+      },
+      {
+        roomNumName:'C07',
+      },
+      {
+        roomNumName:'C08',
+      },
+      {
+        roomNumName:'C09',
+      },
+      {
+        roomNumName:'C10',
+      },
+      {
+        roomNumName:'C11',
+      },
+      {
+        roomNumName:'D01',
+      },
+      {
+        roomNumName:'D02',
+      },
+      {
+        roomNumName:'D03',
+      },
+      {
+        roomNumName:'D04',
+      },
+      {
+        roomNumName:'D05',
+      },
+      {
+        roomNumName:'D06',
+      },
+      {
+        roomNumName:'D07',
+      },
+      {
+        roomNumName:'D08',
+      },
+    ],
+  },
+  //3区
+  {
+    floorId:process.env.VUE_APP_FLOOR_ID_3,
+    floorName:'3区',
+    list:[
+      {
+        roomNumName:'E01',
+      },
+      {
+        roomNumName:'E02',
+      },
+      {
+        roomNumName:'E03',
+      },
+      {
+        roomNumName:'E04',
+      },
+      {
+        roomNumName:'E05',
+      },
+      {
+        roomNumName:'E06',
+      },
+      {
+        roomNumName:'E07',
+      },
+      {
+        roomNumName:'E08',
+      },
+      {
+        roomNumName:'E09',
+      },
+      {
+        roomNumName:'E10',
+      },
+      {
+        roomNumName:'E11',
+      },
+      {
+        roomNumName:'F01',
+      },
+      {
+        roomNumName:'F02',
+      },
+      {
+        roomNumName:'F03',
+      },
+      {
+        roomNumName:'F04',
+      },
+      {
+        roomNumName:'F05',
+      },
+      {
+        roomNumName:'F06',
+      },
+      {
+        roomNumName:'F07',
+      },
+      {
+        roomNumName:'F08',
+      },
+    ],
+  },
+  //4-5区mapComponent-map-4-5
+  //4区
+  {
+    floorId:process.env.VUE_APP_FLOOR_ID_4,
+    floorName:'4区',
+    list:[
+      {
+        roomNumName:'G01',
+      },
+      {
+        roomNumName:'G02',
+      },
+      {
+        roomNumName:'G03',
+      },
+      {
+        roomNumName:'G04',
+      },
+      {
+        roomNumName:'G05',
+      },
+      {
+        roomNumName:'G06',
+      },
+      {
+        roomNumName:'G07',
+      },
+      {
+        roomNumName:'G08',
+      },
+      {
+        roomNumName:'G09',
+      },
+      {
+        roomNumName:'H01',
+      },
+      {
+        roomNumName:'H02',
+      },
+      {
+        roomNumName:'H03',
+      },
+      {
+        roomNumName:'H04',
+      },
+      {
+        roomNumName:'H05',
+      },
+      {
+        roomNumName:'H06',
+      },
+      {
+        roomNumName:'H07',
+      },
+      {
+        roomNumName:'H08',
+      },
+      {
+        roomNumName:'H09',
+      },
+    ],
+  },
+  //5区
+  {
+    floorId:process.env.VUE_APP_FLOOR_ID_5,
+    floorName:'5区',
+    list:[
+      {
+        roomNumName:'I01',
+      },
+      {
+        roomNumName:'I02',
+      },
+      {
+        roomNumName:'I03',
+      },
+      {
+        roomNumName:'I04',
+      },
+      {
+        roomNumName:'I05',
+      },
+      {
+        roomNumName:'I06',
+      },
+      {
+        roomNumName:'I07',
+      },
+      {
+        roomNumName:'I08',
+      },
+      {
+        roomNumName:'I09',
+      },
+      {
+        roomNumName:'J01',
+      },
+      {
+        roomNumName:'J02',
+      },
+      {
+        roomNumName:'J03',
+      },
+      {
+        roomNumName:'J04',
+      },
+      {
+        roomNumName:'J05',
+      },
+      {
+        roomNumName:'J06',
+      },
+      {
+        roomNumName:'J07',
+      },
+      {
+        roomNumName:'J08',
+      },
+      {
+        roomNumName:'J09',
+      },
+    ],
+  },
+  //6-7区mapComponent-map-6-7
+  //6区
+  {
+    floorId:process.env.VUE_APP_FLOOR_ID_6,
+    floorName:'6区',
+    list:[
+      {
+        roomNumName:'K01',
+      },
+      {
+        roomNumName:'K02',
+      },
+      {
+        roomNumName:'K03',
+      },
+      {
+        roomNumName:'K04',
+      },
+      {
+        roomNumName:'K05',
+      },
+      {
+        roomNumName:'K06',
+      },
+      {
+        roomNumName:'K07',
+      },
+      {
+        roomNumName:'K08',
+      },
+      {
+        roomNumName:'K09',
+      },
+      {
+        roomNumName:'L01',
+      },
+      {
+        roomNumName:'L02',
+      },
+      {
+        roomNumName:'L03',
+      },
+      {
+        roomNumName:'L04',
+      },
+      {
+        roomNumName:'L05',
+      },
+      {
+        roomNumName:'L06',
+      },
+      {
+        roomNumName:'L07',
+      },
+    ],
+  },
+  //7区
+  {
+    floorId:process.env.VUE_APP_FLOOR_ID_7,
+    floorName:'7区',
+    list:[
+      {
+        roomNumName:'M01',
+      },
+      {
+        roomNumName:'M02',
+      },
+      {
+        roomNumName:'M03',
+      },
+      {
+        roomNumName:'M04',
+      },
+      {
+        roomNumName:'M05',
+      },
+      {
+        roomNumName:'M06',
+      },
+      {
+        roomNumName:'M07',
+      },
+      {
+        roomNumName:'M08',
+      },
+      {
+        roomNumName:'M09',
+      },
+      {
+        roomNumName:'N01',
+      },
+      {
+        roomNumName:'N02',
+      },
+      {
+        roomNumName:'N03',
+      },
+      {
+        roomNumName:'N04',
+      },
+      {
+        roomNumName:'N05',
+      },
+      {
+        roomNumName:'N06',
+      },
+      {
+        roomNumName:'N07',
+      },
+    ],
+  },
+  //8-10区mapComponent-map-8-10
+  //8区
+  {
+    floorId:process.env.VUE_APP_FLOOR_ID_8,
+    floorName:'8区',
+    list:[
+      {
+        roomNumName:'O01',
+      },
+      {
+        roomNumName:'O02',
+      },
+      {
+        roomNumName:'O03',
+      },
+      {
+        roomNumName:'O04',
+      },
+      {
+        roomNumName:'O05',
+      },
+      {
+        roomNumName:'O06',
+      },
+      {
+        roomNumName:'O07',
+      },
+      {
+        roomNumName:'O08',
+      },
+      {
+        roomNumName:'O09',
+      },
+      {
+        roomNumName:'O10',
+      },
+      {
+        roomNumName:'P01',
+      },
+      {
+        roomNumName:'P02',
+      },
+      {
+        roomNumName:'P03',
+      },
+      {
+        roomNumName:'P04',
+      },
+      {
+        roomNumName:'P05',
+      },
+      {
+        roomNumName:'P06',
+      },
+      {
+        roomNumName:'P07',
+      },
+      {
+        roomNumName:'P08',
+      },
+    ],
+  },
+  //9区
+  {
+    floorId:process.env.VUE_APP_FLOOR_ID_9,
+    floorName:'9区',
+    list:[
+      {
+        roomNumName:'Q01',
+      },
+      {
+        roomNumName:'Q02',
+      },
+      {
+        roomNumName:'Q03',
+      },
+      {
+        roomNumName:'Q04',
+      },
+      {
+        roomNumName:'Q05',
+      },
+      {
+        roomNumName:'Q06',
+      },
+      {
+        roomNumName:'Q07',
+      },
+      {
+        roomNumName:'Q08',
+      },
+      {
+        roomNumName:'Q09',
+      },
+      {
+        roomNumName:'Q10',
+      },
+      {
+        roomNumName:'R01',
+      },
+      {
+        roomNumName:'R02',
+      },
+      {
+        roomNumName:'R03',
+      },
+      {
+        roomNumName:'R04',
+      },
+      {
+        roomNumName:'R05',
+      },
+      {
+        roomNumName:'R06',
+      },
+      {
+        roomNumName:'R07',
+      },
+      {
+        roomNumName:'R08',
+      },
+    ],
+  },
+  //10区
+  {
+    floorId:process.env.VUE_APP_FLOOR_ID_10,
+    floorName:'10区',
+    list:[
+      {
+        roomNumName:'S01',
+      },
+      {
+        roomNumName:'S02',
+      },
+      {
+        roomNumName:'S03',
+      },
+      {
+        roomNumName:'S04',
+      },
+      {
+        roomNumName:'S05',
+      },
+      {
+        roomNumName:'S06',
+      },
+      {
+        roomNumName:'S07',
+      },
+      {
+        roomNumName:'S08',
+      },
+      {
+        roomNumName:'S09',
+      },
+      {
+        roomNumName:'S10',
+      },
+      {
+        roomNumName:'T01',
+      },
+      {
+        roomNumName:'T02',
+      },
+      {
+        roomNumName:'T03',
+      },
+      {
+        roomNumName:'T04',
+      },
+      {
+        roomNumName:'T05',
+      },
+      {
+        roomNumName:'T06',
+      },
+      {
+        roomNumName:'T07',
+      },
+      {
+        roomNumName:'T08',
+      },
+    ],
+  },
+]
+
+export function getFloorMap(floorId) {
+  let mapData = {};
+  mapList.forEach((item)=>{
+    if(item.floorId == floorId){
+      mapData = JSON.parse(JSON.stringify(item))
+    }
+  })
+  return mapData
+}
+export function getFloorMaps(alarmList) {
+  let alarmRooms = [];
+  if(alarmList[0]){
+    alarmList.forEach((bigItem)=>{
+      mapList.forEach((item)=>{
+        if(bigItem.floorId == item.floorId){
+          item.list.forEach((minItem)=>{
+            if(minItem.roomNumName == bigItem.roomNum){
+              let obj = JSON.parse(JSON.stringify(minItem))
+              obj.alarmType = true;
+              obj.alarmData = bigItem;
+              alarmRooms.push(obj)
+            }
+          })
+        }
+      })
+    })
+    return JSON.parse(JSON.stringify(alarmRooms))
+  }else{
+    return JSON.parse(JSON.stringify(alarmRooms))
+  }
+}

src/views/components/components/alarmComponent.vue

@@ -0,0 +1,270 @@
+<!--报警弹窗-->
+<template>
+  <div class="alarmComponent">
+    <div class="alarm-max-big-box">
+      <div class="title-top-box blink">
+        <img src="@/assets/ZDimages/alarm-title.png">
+      </div>
+      <div class="alarm-big-box">
+        <div class="alarm-left-box">
+          <div class="alarm-text-box">
+            <div class="text-box">
+              <div class="colorType" :class="newData.status==1?'idle-color':(newData.status==2?'use-color':(newData.status==3?'maintenance-color':''))">
+                <p>{{newData.status==1?'空闲':(newData.status==2?'使用':(newData.status==3?'维修':''))}}</p>
+              </div>
+              <p class="roomName">{{newData.roomNumName}}</p>
+            </div>
+            <div class="img-box">
+              <img src="@/assets/ZDimages/icon_bjsj_tk@1x.png">
+              <p class="right-text">报警时间：{{parseTime(newData.alarmData.eventStartTime,"{y}-{m}-{d} {h}:{i}")}}</p>
+            </div>
+            <div class="img-box">
+              <img src="@/assets/ZDimages/icon_sslx_tk@1x.png">
+              <p class="right-text">设施类型：{{newData.equTypeValue}}</p>
+            </div>
+            <div class="img-box">
+              <img src="@/assets/ZDimages/icon_lxr_tk@1x.png">
+              <p class="right-text" v-if="newData.status==2">使用人：{{newData.userName}}</p>
+              <p class="right-text" v-if="newData.status!=2">负责人：{{newData.headName}}</p>
+            </div>
+            <div class="img-box">
+              <img src="@/assets/ZDimages/icon_bjnr_tk@1x.png">
+              <p class="right-text">报警内容：</p>
+            </div>
+          </div>
+          <div class="alarm-sensor-box">
+            <div class="for-sensor-box" v-for="(item,index) in newData.sensor" :key="index">
+              <div class="sensor-img-box">
+                <svg-icon v-if="item.icon" class="svg-img" :icon-class="item.icon"/>
+              </div>
+              <p class="sensor-text-p">
+                <span class="span-1" v-if="item.code != 'yg'">{{item.deviceValue}}</span>
+                <span class="span-2" v-if="item.code != 'yg'">{{item.unit}}</span>
+                <span class="span-3" v-if="item.code == 'yg'">{{item.sensorAlarm?'异常':'正常'}}</span>
+              </p>
+              <p class="sensor-name-p">{{item.deviceName}}</p>
+
+            </div>
+          </div>
+        </div>
+        <div class="alarm-right-box">
+
+        </div>
+      </div>
+      <audio class="waring_mp3" ref="audioPlayer" playsinline loop muted autoplay>
+        <source src="@/assets/video/waringVoice1.mp3" type="audio/mpeg">
+      </audio>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'alarmComponent',
+    props: {
+      alarmData: {}
+    },
+    data () {
+      return {
+
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.openAlarm();
+    },
+    methods:{
+      openAlarm(){
+        let self = this;
+        this.$set(this,'newData',this.alarmData);
+        setTimeout(() => {
+          /* 报警音频播放 */
+          var audio = self.$refs.audioPlayer;
+          // 尝试静音自动播放
+          audio.play().catch(() => {
+            // 如果失败，延迟 2 秒再次尝试（趁浏览器未完全冻结）
+            setTimeout(() => audio.play(), 1000);
+          });
+          // 延迟 3 秒后尝试取消静音（需浏览器允许）
+          setTimeout(() => {
+            audio.muted = false;
+          }, 1500);
+        }, 500);
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .alarmComponent{
+    z-index:10000000;
+    position: absolute;
+    width:100%;
+    height:100%;
+    background-color: rgba(0, 0, 0, 0.9);
+    box-shadow: inset 0 6px 32px 0 #BD0000;
+    .alarm-max-big-box{
+      position: absolute;
+      display: block;
+      width:1371px;
+      height:753px;
+      margin:454px 0 0 850px;
+      background-image: url("../../../assets/ZDimages/img_bj_bg@1x.png");
+      background-size: 100% 100%;
+      .title-top-box{
+        width:770px;
+        height:80px;
+        margin:65px 300px 0;
+        background-color:rgba(232,1,1,0.4);
+        overflow: hidden;
+        img{
+          margin:-33px 90px 0;
+          width:588px;
+          height:146px;
+        }
+      }
+      .blink {
+        animation: blink 0.8s ease-in-out infinite;
+      }
+      @keyframes blink {
+        0%, 100% { opacity: 0; } /* 最低可见度 */
+        50% { opacity: 1; }        /* 最高可见度 */
+      }
+      .alarm-big-box{
+        display: flex;
+        width:1182px;
+        height:450px;
+        margin:38px 0 0 94px;
+        .alarm-left-box{
+          background-color: #000000;
+          width:455px;
+          height:450px;
+          margin-right:20px;
+          .alarm-text-box{
+            overflow: hidden;
+            .text-box{
+              margin:5px 0 11px 0;
+              height:32px;
+              display: flex;
+              .colorType{
+                width:65px;
+                height:32px;
+                border-radius:50px;
+                margin-right:10px;
+                p{
+                  margin:3px;
+                  width:59px;
+                  height:26px;
+                  text-align: center;
+                  line-height: 26px;
+                  color: #fff;
+                  border-radius: 50px;
+                  border: 1px solid #fff;
+                  font-size: 16px;
+                }
+              }
+              .idle-color {
+                background-color: #00AC45;
+              }
+              .use-color {
+                background-color: #00FFF6;
+              }
+              .maintenance-color {
+                background-color: #FFA148;
+              }
+              .roomName{
+                height:32px;
+                line-height: 32px;
+                font-family: Source Han Sans CN;
+                font-weight: 700;
+                font-size: 24px;
+                color: #FFFFFF;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+              }
+            }
+            .img-box{
+              height:46px;
+              display: flex;
+              img{
+                display: block;
+                width:22px;
+                height:22px;
+                margin:12px 10px 0 0;
+              }
+              p{
+                height:46px;
+                line-height:46px;
+                color:#fff;
+                width: 252px;
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                font-size: 18px;
+              }
+            }
+          }
+          .alarm-sensor-box{
+            .for-sensor-box:nth-child(2){
+              margin:0 11px;
+            }
+            .for-sensor-box{
+              width:140px;
+              height:172px;
+              border-radius: 10px 10px 10px 10px;
+              border: 2px solid #FF0000;
+              .sensor-img-box{
+                width:118px;
+                height:105px;
+                margin:0 11px;
+                .svg-img{
+                  width:32px;
+                  height:32px;
+                  margin:36px 0 0 44px;
+                  color: #FF2105;
+                }
+              }
+              .sensor-text-p {
+                height: 22px;
+                line-height: 22px;
+                text-align: center;
+                .span-1 {
+                  font-size: 24px;
+                  color: #00AC45;
+                }
+                .span-2 {
+                  font-size: 24px;
+                  color: #fff;
+                }
+                .span-3 {
+                  font-size: 20px;
+                  color: #00AC45;
+                }
+              }
+              .sensor-name-p {
+                height: 46px;
+                line-height: 46px;
+                text-align: center;
+                color: #fff;
+                font-size: 16px;
+              }
+            }
+          }
+        }
+        .alarm-right-box{
+          background-color: #000000;
+          width:708px;
+          height:450px;
+          overflow: hidden;
+          border-radius:4px;
+        }
+      }
+      .waring_mp3{
+        z-index: -1000;
+        width:1px;
+        height:1px;
+        overflow: hidden;
+      }
+    }
+  }
+</style>

src/views/components/personnelEntryRecord.vue

@@ -13,6 +13,7 @@
       </div>
     </div>
     <div class="bottom-list-max-big-box">
+      <p class="null-p" v-if="!config.data[0]">暂无数据</p>
       <dv-scroll-board :config="config" style="width:740px;height:418px;margin:15px 0 0 43px;" v-if="config.data[0]"/>
     </div>
   </div>
@@ -150,6 +151,12 @@
     .bottom-list-max-big-box{
       height:470px;
       width:826px;
+      .null-p{
+        text-align: center;
+        color:#dedede;
+        line-height:400px;
+        font-size:16px;
+      }
       ::v-deep .dv-scroll-board {
         .row-item {
           .ceil:nth-child(1) {

src/views/components/videoSurveillance.vue

@@ -2,9 +2,22 @@
 <template>
   <div class="videoSurveillance">
     <titleComponent :titleData="titleData"></titleComponent>
+    <div class="video-max-big-box" v-if="videoType">
+      <H5PlayerVideo class="for-video-box"
+                     v-for="(item,index) in videoUrlList" :key="index"
+                     :videoProps="item"></H5PlayerVideo>
+    </div>
+    <div class="video-max-big-box" v-if="videoNullType">
+      <img class="for-video-box" src="@/assets/ZDimages/video_img.png">
+      <img class="for-video-box" src="@/assets/ZDimages/video_img.png">
+    </div>
   </div>
 </template>
 <script>
+  import {
+    iotCameraFindByCondition
+  } from "@/api/index";
+  import { dashboardsMonitorConfig } from "@/api/yiLi";
   import titleComponent from './components/titleComponent.vue'
   export default {
     name: 'videoSurveillance',
@@ -17,17 +30,106 @@
           name:'实时视频监控',
           text:'Real-time video surveillance',
         },
+        videoTimer:null,
+        videoSwitchTime:30000,
+        videoRooms:[],
+        videoCheckIndex:0,
+        videoUrlList:[],
+        videoType:false,
+        videoNullType:false,
       }
     },
     created(){
 
     },
     mounted(){
-
+      this.dashboardsMonitorConfig();
     },
     methods:{
-
+      dashboardsMonitorConfig(){
+        dashboardsMonitorConfig().then(res => {
+          // this.$set(this,'videoRooms',res.data.rooms);
+          this.$set(this,'videoRooms',[]);
+          this.checkSubUpdates();
+          this.videoTimerFunction();
+        })
+      },
+      videoTimerFunction(){
+        this.videoTimer = window.setInterval(this.checkSubUpdates, this.videoSwitchTime);
+      },
+      checkSubUpdates() {
+        const self = this;
+        self.$set(self,'videoType',false);
+        let subIdList = [];
+        let videoList = [];
+        if(self.videoRooms[self.videoCheckIndex]){
+          subIdList.push(self.videoRooms[self.videoCheckIndex].subId)
+          if(self.videoRooms[self.videoCheckIndex+1]){
+            subIdList.push(self.videoRooms[self.videoCheckIndex+1].subId)
+          }else{
+            subIdList.push(self.videoRooms[self.videoCheckIndex].subId)
+          }
+        }else{
+          self.$set(self,'videoCheckIndex',0);
+          if(self.videoRooms[self.videoCheckIndex]){
+            subIdList.push(self.videoRooms[self.videoCheckIndex].subId)
+            if(self.videoRooms[self.videoCheckIndex+1]){
+              subIdList.push(self.videoRooms[self.videoCheckIndex+1].subId)
+            }else{
+              subIdList.push(self.videoRooms[self.videoCheckIndex].subId)
+            }
+          }else{
+            self.$set(self,'videoNullType',true);
+            return
+          }
+        }
+        let videoObj = {
+          page:'1',
+          pageSize:'10',
+          buildId:'',
+          floorId:'',
+          passageway:'',
+          subIds:subIdList,
+          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
+          streamType:1,
+          source:1,
+        };
+        iotCameraFindByCondition(videoObj).then(response => {
+          videoList.push(
+            {
+              fullShow:true,
+              width: 599, //(宽度:非必传-默认600)
+              height: 367, //(高度:非必传-默认338)
+              url: response.data.records[0].streamUrl,
+              cameraIndexCode: response.data.records[0].deviceNo,
+            }
+          )
+          videoList.push(
+            {
+              fullShow:true,
+              width: 599, //(宽度:非必传-默认600)
+              height: 367, //(高度:非必传-默认338)
+              url: response.data.records[response.data.records.length-1].streamUrl,
+              cameraIndexCode: response.data.records[response.data.records.length-1].deviceNo,
+            }
+          )
+          self.$set(self,'videoCheckIndex',self.videoCheckIndex+2);
+          self.$set(self,'videoUrlList',videoList);
+          setTimeout(function(){
+            self.$set(self,'videoType',true);
+            self.$set(self,'videoNullType',false);
+          },1000);
+        });
+      }
     },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.videoTimer);
+    },
+    destroyed() {
+      //清除定时器
+      clearInterval(this.videoTimer);
+    }
   }
 </script>
 <style scoped lang="scss">
@@ -37,6 +139,19 @@
     margin-top:31px;
     background-image: url("../../assets/ZDimages/img_ssspjk_bg@1x.png");
     background-size: 100% 100%;
+    .video-max-big-box{
+      width:1263px;
+      height:367px;
+      margin:75px 26px 0;
+      display: flex;
+      .for-video-box{
+        width:599px;
+        height:367px;
+      }
+      .for-video-box:nth-child(1){
+        margin-right:65px;
+      }
 
+    }
   }
 </style>

src/views/home.vue

@@ -16,14 +16,21 @@
       </div>
     </div>
     <div class="button-img-box"></div>
+    <alarmComponent v-if="alarmType" :alarmData="alarmData"></alarmComponent>
   </div>
 </template>
 <script>
   import { login } from "@/api/login";
-  import { loginYiLi } from "@/api/yiLi";
-  import { getConfigByType  } from "@/api/index";
+  import { loginYiLi,dashboardsResearchUsage } from "@/api/yiLi";
+  import {
+    getConfigByType,
+    laboratoryBigViewSelectTriggerInfo,
+    iotSensorFindBySubId,
+    iotCameraFindByCondition
+  } from "@/api/index";
   import { setToken,setTokenYiLi } from '@/utils/auth'
   import { Encrypt,Decrypt} from '@/utils/secret'
+  import { getFloorMaps } from '@/utils/mapList'
   //head组件
   import headComponent from './components/headComponent.vue'
   //设施数据概览
@@ -38,6 +45,8 @@
   import scientificResearchProject from './components/scientificResearchProject.vue'
   //人员进入记录
   import personnelEntryRecord from './components/personnelEntryRecord.vue'
+  //报警弹窗
+  import alarmComponent from './components/components/alarmComponent.vue'
 
   export default {
     name: 'home',
@@ -49,10 +58,14 @@
       videoSurveillance,
       scientificResearchProject,
       personnelEntryRecord,
+      alarmComponent,
     },
     data () {
       return {
         showPage:false,
+        roomList:[],
+        alarmType:false,
+        alarmData:null,
       }
     },
     created(){
@@ -113,8 +126,82 @@
             localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironment))
           }
           this.$set(this, 'showPage', true)
+          this.laboratoryBigViewSelectTriggerInfo();
         })
       },
+      /*************** 获取报警相关 ***************/
+      laboratoryBigViewSelectTriggerInfo(){
+        laboratoryBigViewSelectTriggerInfo().then(res => {
+          let alarmRoom = getFloorMaps(res.data);
+          if(alarmRoom[0]){
+            this.dashboardsResearchUsage(alarmRoom);
+          }else{
+            this.$set(this,'alarmType',false);
+            this.$set(this,'alarmData',null);
+          }
+        })
+      },
+      //获取房间数据
+      dashboardsResearchUsage(list){
+        dashboardsResearchUsage('roomNames='+list[0].roomNumName).then(res => {
+          let obj = list[0];
+          if(res.data[0]){
+            obj = {...obj,...res.data[0]};
+            this.iotSensorFindBySubId(obj);
+          }
+        });
+      },
+      //查询传感器
+      iotSensorFindBySubId(obj){
+        let self = this;
+        //假数据
+        obj.monitorVisable = true;
+        obj.subId = '1955554621449019392';
+        iotSensorFindBySubId({subId:obj.subId}).then(response => {
+          obj.sensor = [];
+          for(let i=0;i<obj.alarmData.triggerUploadData.length;i++){
+            for(let o=0;o<response.data.length;o++){
+              if(obj.alarmData.triggerUploadData[i].deviceNo == response.data[o].deviceNo){
+                response.data[i].icon = response.data[i].icon?localStorage.getItem('fileBrowseEnvironment')+response.data[i].icon:null;
+                obj.sensor.push(response.data[i])
+              }
+            }
+          }
+          //查询实验室监控
+          if(obj.monitorVisable){
+            obj.videoList = [];
+            let videoObj = {
+              page:'1',
+              pageSize:'10',
+              buildId:'',
+              floorId:'',
+              passageway:'',
+              subIds:[obj.subId],
+              protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
+              streamType:1,
+              source:1,
+            };
+            iotCameraFindByCondition(videoObj).then(response => {
+              for(let i=0;i<response.data.records.length;i++){
+                obj.videoList.push(
+                  {
+                    fullShow:true,
+                    width: 708, //(宽度:非必传-默认600)
+                    height: 450, //(高度:非必传-默认338)
+                    url: response.data.records[i].streamUrl,
+                    cameraIndexCode: response.data.records[i].deviceNo,
+                  }
+                )
+              }
+              self.$set(self,'alarmType',true);
+              self.$set(self,'alarmData',obj);
+            });
+          }else{
+            self.$set(self,'alarmType',true);
+            self.$set(self,'alarmData',obj);
+          }
+        });
+      },
     },
     beforeDestroy() {