zc

src/api/index.js

@@ -468,3 +468,11 @@ export function iotCameraLargeFindByCondition(data) {
         data: data
     })
 }
+//获取实验室列表及传感器数据
+export function laboratorySubRelInfoSelectInfoAndSensor(data) {
+  return request({
+    url: '/laboratory/subRelInfo/selectInfoAndSensor',
+    method: 'post',
+    data: data
+  })
+}

src/components/header.vue

@@ -1,134 +1,140 @@
 <template>
-    <div class="header">
-        <img class="header_l" :src="rectangleLogo"/>
-        <div class="header_c">实验室安全智慧化管控系统</div>
-        <img class="header_r" src="@/assets/image/index_icon16.png" @click="back"/>
-        <!--<div class="position-img-button-left-box" @click="topButtonGoPage('video')">-->
-            <!--<img src="@/assets/image/icon_yjgl_spjk.png">-->
-            <!--<p>视频监控</p>-->
-        <!--</div>-->
-        <!--<div class="position-img-button-right-box" @click="topButtonGoPage('alarm')">-->
-            <!--<img src="@/assets/image/icon_yjgl_yjpt.png">-->
-            <!--<p>应急指挥平台</p>-->
-        <!--</div>-->
+  <div class="header">
+    <div class="header_l"></div>
+    <div class="header_c">
+      <img class="header_l-position" :src="circularLogo"/>
+      <p class="header_c-p">山西农业大学实验室安全管理系统</p>
     </div>
+    <img class="header_r" src="@/assets/image/index_icon16.png" @click="back"/>
+  </div>
 </template>
 
 <script>
-    import {} from "../api/http"
-
-    export default {
-        name: 'heaDer',
-        setup() {
-            return {
-                rectangleLogo: localStorage.getItem('rectangleLogo'),
-            }
-        },
-        methods: {
-            //跳转视频/应急页面
-            topButtonGoPage(type) {
-                if(type == 'video'){
-                    this.$router.push('/videoSurveillance')
-                }else if(type == 'alarm'){
-                    this.$router.push('/emergencyManagement')
-                }
-            },
-            back() {
-                this.$router.push('/home')
-                // this.$router.go(-1)
-            },
-        },
-        mounted() {
+  import {} from '../api/http'
 
+  export default {
+    name: 'heaDer',
+    setup() {
+      return {
+        circularLogo: localStorage.getItem('circularLogo')
+      }
+    },
+    methods: {
+      //跳转视频/应急页面
+      topButtonGoPage(type) {
+        if (type == 'video') {
+          this.$router.push('/videoSurveillance')
+        } else if (type == 'alarm') {
+          this.$router.push('/emergencyManagement')
         }
+      },
+      back() {
+        this.$router.push('/home')
+        // this.$router.go(-1)
+      }
+    },
+    mounted() {
+
     }
+  }
 </script>
 
 <style lang="scss" scoped>
-    * {
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    }
+  * {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
 
-    .header {
-        width: 100%;
+  .header {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    justify-content: flex-start;
+    .position-img-button-left-box {
+      cursor: pointer;
+      position: absolute;
+      top: 4px;
+      left: 410px;
+      display: flex;
+      width: 190px;
+      height: 24px;
+      img {
+        width: 24px;
+        height: 18px;
+        display: inline-block;
+        margin: 4px 0;
+      }
+      p {
+        color: #24D1F9;
+        font-size: 16px;
+        line-height: 24px;
+        margin-left: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+      }
+    }
+    .position-img-button-right-box {
+      cursor: pointer;
+      position: absolute;
+      top: 4px;
+      right: 385px;
+      display: flex;
+      width: 190px;
+      height: 24px;
+      img {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+      }
+      p {
+        color: #24D1F9;
+        font-size: 16px;
+        line-height: 24px;
+        margin-left: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+      }
+    }
+    .header_l {
+      width: 250px;
+      height: 55px;
+    }
+    .header_c {
+      width: 1180px;
+      height: 152px;
+      margin-left: 136px;
+      background: url("~@/assets/image/index_icon2.png") no-repeat;
+      background-size: 100% 100%;
+      padding-top: 26px;
+      position: relative;
+      .header_c-p {
+        font-size: 30px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 30px;
+        text-align: center;
+        padding-left: 70px;
+      }
+      .header_l-position {
+        z-index: 10;
         position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 100;
-        display: flex;
-        justify-content: flex-start;
-        .position-img-button-left-box {
-            cursor: pointer;
-            position: absolute;
-            top: 4px;
-            left: 410px;
-            display: flex;
-            width: 190px;
-            height: 24px;
-            img {
-                width: 24px;
-                height: 18px;
-                display: inline-block;
-                margin: 4px 0;
-            }
-            p {
-                color: #24D1F9;
-                font-size: 16px;
-                line-height: 24px;
-                margin-left: 14px;
-                font-family: Source Han Sans CN;
-                font-weight: 400;
-            }
-        }
-        .position-img-button-right-box {
-            cursor: pointer;
-            position: absolute;
-            top: 4px;
-            right: 385px;
-            display: flex;
-            width: 190px;
-            height: 24px;
-            img {
-                width: 24px;
-                height: 24px;
-                display: inline-block;
-            }
-            p {
-                color: #24D1F9;
-                font-size: 16px;
-                line-height: 24px;
-                margin-left: 14px;
-                font-family: Source Han Sans CN;
-                font-weight: 400;
-            }
-        }
-        .header_l {
-            width: 250px;
-            height: 55px;
-            margin: 0 0 0 30px;
-        }
-        .header_c {
-            width: 1180px;
-            height: 152px;
-            margin-left: 78px;
-            background: url("~@/assets/image/index_icon2.png") no-repeat;
-            background-size: 100% 100%;
-            font-size: 30px;
-            font-family: Microsoft YaHei;
-            font-weight: bold;
-            color: #FFFFFF;
-            line-height: 30px;
-            text-align: center;
-            padding-top: 26px;
-        }
-        .header_r {
-            cursor: pointer;
-            margin-left: 264px;
-            width: 82px;
-            height: 32px;
-            margin-top: 18px;
-        }
+        top: 17px;
+        left: 330px;
+        width: 50px;
+        height: 50px;
+      }
+    }
+    .header_r {
+      cursor: pointer;
+      margin-left: 264px;
+      width: 82px;
+      height: 32px;
+      margin-top: 18px;
     }
+  }
 </style>

src/components/newSubVideoComponent.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="newSubVideoComponent">
+    <p class="null-data-list-p" v-if="!dataList[0]">暂无数据</p>
+    <div class="sub-video-max-big-box" v-if="dataList[0]">
+      <div class="sub-video-big-box" v-for="(item,index) in dataList" :key="index">
+        <div class="sub-video-box">
+          <p class="sub-name-p">{{item.roomNum?item.subName+'('+item.roomNum+')':item.subName}}</p>
+          <H5PlayerVideo class="sub-video-box" :videoProps="item.videoData"></H5PlayerVideo>
+        </div>
+        <div class="sensor-max-box">
+          <div class="sensor-box" v-for="(minItem,minIndex) in item.sensorList" :key="minIndex">
+            <div class="img-box">
+              <svg-icon v-if="minItem.icon" class="svg-img" :icon-class="minItem.icon"/>
+            </div>
+            <div class="text-box">
+              <p>{{minItem.deviceName}}</p>
+              <p>{{minItem.deviceValue?minItem.deviceValue:'-'}}{{minItem.unit}}</p>
+            </div>
+          </div>
+          <p class="null-sensor-p" v-if="!item.sensorList">该实验室未配置传感器</p>
+        </div>
+      </div>
+    </div>
+    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
+  </div>
+</template>
+<script>
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
+  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
+  import {
+    laboratorySubRelInfoSelectInfoAndSensor,
+    iotCameraFindByCondition
+  } from '@/api/index'
+
+  export default {
+    name: 'newSubVideoComponent',
+    components: {
+      H5PlayerVideo,
+      fullH5PlayerVideo
+    },
+    data() {
+      return {
+        timer: null,//定时器
+        dataList: [],
+        //请求参数
+        queryParams: {
+          page: 1,
+          pageSize: 2,
+          deptId: localStorage.getItem('deptId')
+        },
+        total: 0,//总数
+        videoList: [],
+        //全屏视频参数
+        fullVideoProps:{},
+        fullVideoType:false,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initialize()
+      this.timerPlay()
+    },
+    methods: {
+      //初始化
+      initialize() {
+        laboratorySubRelInfoSelectInfoAndSensor(this.queryParams).then((res) => {
+          if (res.data.records[0]) {
+            res.data.records.forEach((bigItem)=>{
+              if(bigItem.sensorList){
+                bigItem.sensorList.forEach((item)=>{
+                  item.icon = item.icon?localStorage.getItem('fileBrowseEnvironment')+item.icon:null;
+                })
+              }
+            })
+            this.$set(this, 'total', res.data.total)
+            this.getSubVideo(res.data.records)
+          } else {
+            this.$set(this, 'dataList', [])
+          }
+        })
+      },
+      // 定时器
+      timerPlay() {
+        let self = this
+        clearInterval(this.timer)
+        this.timer = setInterval(function() {
+          let num = self.accMul(self.queryParams.page,self.queryParams.pageSize);
+          if(num<self.total){
+            self.$set(self.queryParams,'page',self.queryParams.page+1);
+          }else{
+            self.$set(self.queryParams,'page',1);
+          }
+          self.laboratorySubRelInfoSelectInfoAndSensor();
+        }, 1000 * 20)
+      },
+      laboratorySubRelInfoSelectInfoAndSensor() {
+        laboratorySubRelInfoSelectInfoAndSensor(this.queryParams).then((res) => {
+          if (res.data.records[0]) {
+            this.getSubVideo(res.data.records)
+          } else {
+            this.$set(this, 'dataList', [])
+          }
+        })
+      },
+      getSubVideo(list) {
+        this.$set(this,'videoList',[]);
+        let sub1 = {}
+        let sub2 = {}
+        if (list[0]) {
+          sub1 = {
+            subId: list[0].subId,
+            subName: list[0].subName,
+            roomNum: list[0].roomNum,
+            sensorList: list[0].sensorList,
+            videoData:{
+              width: 355, //(宽度:非必传-默认600)
+              height: 200 //(高度:非必传-默认338)
+            }
+          }
+        }
+        if (list[1]) {
+          sub2 = {
+            subId: list[1].subId,
+            subName: list[1].subName,
+            roomNum: list[1].roomNum,
+            sensorList: list[1].sensorList,
+            videoData:{
+              width: 355, //(宽度:非必传-默认600)
+              height: 200 //(高度:非必传-默认338)
+            }
+          }
+        }
+        if (list[1]) {
+          Promise.all([
+            this.videoInitialize(sub1),
+            this.videoInitialize(sub2)
+          ]).then((result) => {
+            this.$set(this, 'dataList', this.videoList)
+            console.log('dataList2',this.dataList)
+          }).catch((error) => {
+          })
+        } else {
+          Promise.all([
+            this.videoInitialize(sub1)
+          ]).then((result) => {
+            this.$set(this, 'dataList', this.videoList)
+            console.log('dataList1',this.dataList)
+          }).catch((error) => {
+          })
+        }
+
+      },
+      videoInitialize(data) {
+        let obj = {
+          page: '1',
+          pageSize: '10',
+          buildId: '',
+          floorId: '',
+          passageway: '',
+          subIds: [data.subId],
+          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
+          streamType: 1,
+          source: 1
+        }
+        iotCameraFindByCondition(obj).then(response => {
+          if(response.data.records[0]){
+            let newData = JSON.parse(JSON.stringify(data));
+            newData.videoData.url = response.data.records[0].streamUrl;
+            newData.videoData.cameraIndexCode = response.data.records[0].deviceNo;
+            this.videoList.push(newData);
+          }else{
+            let newData = JSON.parse(JSON.stringify(data));
+            newData.videoData.url = null;
+            newData.videoData.cameraIndexCode = null;
+            this.videoList.push(newData);
+          }
+        })
+      },
+      accMul(arg1, arg2) {
+        var m = 0, s1 = arg1.toString(), s2 = arg2.toString()
+        try {
+          m += s1.split('.')[1].length
+        } catch (e) {
+        }
+        try {
+          m += s2.split('.')[1].length
+        } catch (e) {
+        }
+        return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
+      },
+      //全屏开启-关闭轮播
+      stopTime(cameraIndexCode){
+        this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
+        this.$set(this,'fullVideoType',true);
+      },
+      //全屏关闭-开启轮播
+      outFullScreen(){
+        let self = this;
+        this.$set(this,'fullVideoType',false);
+        this.$set(this,'fullVideoProps',{});
+      },
+    },
+    beforeDestroy() {
+      clearInterval(this.timer)
+    }
+  }
+</script>
+<style scoped lang="scss">
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  .newSubVideoComponent {
+    width: 680px;
+    height: 500px;
+    .sub-video-max-big-box {
+      width: 680px;
+      height: 500px;
+      .sub-video-big-box:nth-child(2){
+        margin-top:20px;
+      }
+      .sub-video-big-box {
+        width: 680px;
+        height: 230px;
+        display: flex;
+        .sub-video-box {
+          width: 355px;
+          height: 230px;
+          .sub-name-p {
+            height: 30px;
+            line-height: 30px;
+            font-size: 12px;
+            color: #FFFFFF;
+            padding-left: 10px;
+            background-color: rgba(0, 0, 0, 0.6);
+            margin-right: 1px;
+          }
+          .sub-video-box {
+            width: 355px;
+            height: 200px;
+          }
+        }
+        .sensor-max-box {
+          overflow: hidden;
+          margin-left: 20px;
+          .sensor-box {
+            background-color: #073F55;
+            height: 105px;
+            width: 300px;
+            margin-bottom: 20px;
+            border-radius: 10px;
+            display: flex;
+            .img-box {
+              width: 99px;
+              height: 85px;
+              margin: 10px 40px 0 19px;
+              background: url("../assets/ZDimages/emergencyManagement/icon_yjsj_zc.png") no-repeat;
+              background-size: 100%;
+              .svg-img {
+                display: block;
+                width: 24px;
+                height: 24px;
+                margin: 37px 0 0 37px;
+                color: #24D1F9;
+              }
+            }
+            .text-box {
+              p {
+                color: #fff;
+                font-size: 14px;
+                line-height: 24px;
+                height: 24px;
+                overflow: hidden;
+              }
+              p:nth-child(1) {
+                margin-top: 28px;
+              }
+              p:nth-child(2) {
+
+              }
+            }
+          }
+          .null-sensor-p{
+            width:300px;
+            text-align: center;
+            color:#dedede;
+            font-size:14px;
+            line-height:230px;
+          }
+        }
+      }
+    }
+    .null-data-list-p {
+      line-height: 500px;
+      text-align: center;
+      width: 100%;
+      color: #dedede;
+    }
+  }
+</style>

src/components/personnelAdmittanceECharts/personnelAdmittanceECharts.vue

@@ -3,8 +3,8 @@
     <div class="left_b_t_l">
       <!--公共小标题-->
       <div class="small_title">
-        <div class="small_title_l">实验室分类分级统计</div>
-        <div class="small_title_r">
+        <div class="small_title_l" style="padding-left:20px!important;">实验室分类分级统计</div>
+        <div class="small_title_r" style="margin-right:20px;margin-top:-18px;">
           <img class="left_b_t_l_btn" src="@/assets/image/index_icon8.png"
                @click="left_b_t_l_btn"/>
         </div>
@@ -18,7 +18,7 @@
     <div class="left_b_t_r">
       <!--公共小标题-->
       <div class="small_title">
-        <div class="small_title_l">安全准入办理统计</div>
+        <div class="small_title_l" style="padding-left:40px!important;">安全准入办理统计</div>
         <!--<div class="small_title_r" @click="left_b_t_r_btn">-->
         <!--<i>准入办理总人数：{{listcount}}</i>-->
         <!--<img class="left_b_t_r_btn" src="@/assets/image/index_icon8.png"/>-->
@@ -137,7 +137,7 @@
         this.chartReload1 = setInterval(function() {
           right_b_r_b_b.clear()
           right_b_r_b_b.setOption(classifyOption)
-        }, 1000 * 6)
+        }, 1000 * 20)
       },
       //安全准入办理统计
       laboratoryBigViewListCollegeApplyColumn() {
@@ -299,7 +299,7 @@
         this.chartReload2 = setInterval(function() {
           left_b_b.clear()
           left_b_b.setOption(admittanceOption)
-        }, 1000 * 6)
+        }, 1000 * 20)
       },
       //安全准入办理统计
       left_b_t_r_btn() {
@@ -328,6 +328,7 @@
         font-weight: bold;
         color: #1ED0F8;
         line-height: 18px;
+        margin-bottom: 20px;
       }
       .small_title_r {
         width: 280px;
@@ -383,7 +384,7 @@
       margin-left: 14px;
       .left_b_t_l_b {
         width: 482px;
-        height: 195px;
+        height: 295px;
       }
       .right_b_r_b_t {
         display: flex;
@@ -420,12 +421,11 @@
       }
     }
     .left_b_t_r {
-      width: 468px;
+      width: 500px;
       padding-top: 28px;
-      margin-left: 34px;
       .left_b_t_r_b {
-        width: 468px;
-        height: 268px;
+        width: 500px;
+        height: 348px;
       }
     }
   }

src/views/courtyardManage/courtyardHome.vue

@@ -3,8 +3,10 @@
     <img class="bg_img" src="@/assets/image/bg.png"/>
     <div class="header">
       <p class="header_l"></p>
-      <img class="header_l-position" :src="rectangleLogo"/>
-      <div class="header_c">实验室安全智慧化管控系统</div>
+      <div class="header_c">
+        <img class="header_l-position" :src="circularLogo"/>
+        <p class="header_c-p">山西农业大学实验室安全管理系统</p>
+      </div>
       <div class="header_r1">
         <img class="header_r1_l" src="@/assets/image/index_icon3.png"/>
         <i class="schoolName">{{deptName?deptName:'****'}}</i>
@@ -99,22 +101,7 @@
         </div>
       </div>
       <div class="left_b">
-        <personnelAdmittanceECharts v-if="!warningList[1]"></personnelAdmittanceECharts>
-        <img class="left_b_t1" v-if="!warningList[1]" src="@/assets/image/index_icon12.png"/>
-        <!--实验室信息-->
-        <subSensorComponent v-if="!warningList[0]"></subSensorComponent>
-        <!--报警预案-->
-        <div class="warning-max-big-box" :class="warningList[1]?'warning-max-big-box-all':''"
-             v-if="warningList[0]">
-          <div class="warning-for-box" v-for='(item,index8) in warningList' :key="index8">
-            <img src="@/assets/image/index_icon14.png">
-            <p class="warning-name">{{item.eventName}}</p>
-            <div>
-              <span v-for="(minItem,index9) in item.triggerUploadData" :key="index9">{{minItem.deviceName}}：{{minItem.deviceValue}}{{minItem.unit}}</span>
-            </div>
-            <p class="warning-button" @click="openRiskPlanUrl(item)">查看详情 >></p>
-          </div>
-        </div>
+        <personnelAdmittanceECharts></personnelAdmittanceECharts>
       </div>
     </div>
     <div class="right">
@@ -131,7 +118,19 @@
         <img class="left_b_t1" src="@/assets/image/index_icon12.png"/>
       </div>
       <div class="right_b">
-
+        <p class="title-component-p">实验室安全监测</p>
+        <newSubVideoComponent v-if="!warningList[0]"></newSubVideoComponent>
+        <!--报警预案-->
+        <div class="warning-max-big-box" v-if="warningList[0]">
+          <div class="warning-for-box" v-for='(item,index8) in warningList' :key="index8">
+            <img src="@/assets/image/index_icon14.png">
+            <p class="warning-name">{{item.eventName}}</p>
+            <div>
+              <span v-for="(minItem,index9) in item.triggerUploadData" :key="index9">{{minItem.deviceName}}：{{minItem.deviceValue}}{{minItem.unit}}</span>
+            </div>
+            <p class="warning-button" @click="openRiskPlanUrl(item)">查看详情</p>
+          </div>
+        </div>
       </div>
     </div>
     <planAlarm ref="planAlarm"></planAlarm>
@@ -163,19 +162,19 @@
   import mqtt from 'mqtt/dist/mqtt'
   import { getToken, removeToken } from '@/utils/auth'
   import { Encrypt, Decrypt } from '@/utils/secret'
-  import subSensorComponent from '@/components/subSensorComponent.vue'
   import planAlarm from '@/components/planAlarm/planAlarm.vue'
+  import newSubVideoComponent from '@/components/newSubVideoComponent.vue'
   import personnelAdmittanceECharts from '@/components/personnelAdmittanceECharts/personnelAdmittanceECharts.vue'
 
   export default {
     components: {
-      subSensorComponent,
       planAlarm,
-      personnelAdmittanceECharts
+      personnelAdmittanceECharts,
+      newSubVideoComponent
     },
     data() {
       return {
-        rectangleLogo: localStorage.getItem('rectangleLogo'),
+        circularLogo: localStorage.getItem('circularLogo'),
         deptName: null,
         deptId: null,
         mtopicTwo: 'manage/work' + localStorage.getItem('userId'),
@@ -363,130 +362,6 @@
           }
         })
       },
-      getAjaxData: function() {
-        let self = this
-        //获取logo图片
-        getLogoInfo({}).then((res) => {
-          if (res.code == 200) {
-            $('.header_l').attr('src', requestUrl + res.data.rectangleLogo)
-            $('.schoolName').html(res.data.schoolName)
-
-            localStorage.setItem('logoImg', requestUrl + res.data.rectangleLogo)
-          }
-        })
-        getUrlConfig().then(response => {
-          console.log('开发配置', response.data)
-          //判定http或者https
-          let urlText = window.location.href.split('://')[0] + '://'
-          let outerNet = window.location.href.indexOf(response.data.ipIdentify) == -1//true外网 false 内网
-          if (outerNet) {//外网
-            //文件预览地址
-            localStorage.setItem('filePreviewUrl', urlText + response.data.fileExtranetUrl)
-            //摄像头代理访问地址
-            localStorage.setItem('cameraExtranetAgent', urlText + response.data.cameraExtranetAgent)
-            //摄像头地址ip段
-            localStorage.setItem('ipIdentify', response.data.ipIdentify)
-            //摄像头访问地址
-            localStorage.setItem('cameraUrl', urlText + response.data.cameraExtranetUrl)
-            //MQTT地址
-            localStorage.setItem('mqttUrl', 'wss://' + Decrypt(response.data.mqttExtranetUrl))
-            //MQTT账号
-            localStorage.setItem('mqttUser', Decrypt(response.data.mqttExtranetUser))
-            //MQTT密码
-            localStorage.setItem('mqttPassword', Decrypt(response.data.mqttExtranetPassword))
-            //可视化大屏访问地址
-            localStorage.setItem('screenUrl', urlText + response.data.screenExtranetUrl)
-            //后台访问地址
-            localStorage.setItem('pcVisitUrl', urlText + response.data.pcExtranetUrl)
-          } else {
-            //文件预览地址
-            localStorage.setItem('filePreviewUrl', urlText + response.data.fileIntranetUrl)
-            //摄像头代理访问地址
-            localStorage.setItem('cameraExtranetAgent', urlText + response.data.cameraIntranetAgent)
-            //摄像头地址ip段
-            localStorage.setItem('ipIdentify', response.data.ipIdentify)
-            //摄像头访问地址
-            localStorage.setItem('cameraUrl', urlText + response.data.cameraIntranetUrl)
-            //MQTT地址
-            localStorage.setItem('mqttUrl', 'ws://' + Decrypt(response.data.mqttIntranetUrl))
-            //MQTT账号
-            localStorage.setItem('mqttUser', Decrypt(response.data.mqttIntranetUser))
-            //MQTT密码
-            localStorage.setItem('mqttPassword', Decrypt(response.data.mqttIntranetPassword))
-            //可视化大屏访问地址
-            localStorage.setItem('screenUrl', urlText + response.data.screenIntranetUrl)
-            //后台访问地址
-            localStorage.setItem('pcVisitUrl', urlText + response.data.pcIntranetUrl)
-          }
-        })
-        //实验室人员
-        onlineSumByBigView({ pageNumStr: 1, pageSizeStr: 50 }).then((res) => {
-          if (res.code == 200) {
-            let data = res.data.list
-            self.labResultCount = res.data.resultCount
-            self.labList = data
-          }
-        })
-        //实验室分类
-        getTypeCount({}).then((res) => {
-          if (res.code == 200) {
-            let data = res.data
-            this.labTypeList = data
-          }
-        })
-        //实验室分级
-        getFiedCount({}).then((res) => {
-          if (res.code == 200) {
-            let self = this
-            let data = res.data
-            let dataX = []
-            data.forEach(function(item) {
-              dataX.push({ name: item.classifiedName, value: item.totalNum })
-            })
-            self.classifyFun(dataX)
-          }
-        })
-        //安全检查批次
-        indexListRelease({ pageNum: 1, pageSize: 10 }).then((res) => {
-          if (res.code == 200) {
-            let data = res.rows
-            let list = []
-            let num = 0
-            if (data.length < 10) {
-
-              for (var i = 0; i < 10; i++) {
-
-                if (num == data.length) {
-                  num = 0
-                }
-                list.push(data[num])
-                num++
-
-              }
-              self.inspectBatchList = list
-            } else {
-              self.inspectBatchList = data
-            }
-
-          }
-        })
-        //实验室信息
-        mySub({}).then((res) => {
-          if (res.code == 200) {
-            let data = res.data
-            self.labInfoList = []
-            data.forEach(function(item) {
-              if (item.sensorFunctionStatusList.length > 0) {
-                self.labInfoList.push(item)
-              }
-            })
-            /* self.controlList=data.list
-self.controlTitle=data.title*/
-
-          }
-        })
-      },
-
       //校院通知
       infoFun: function() {
         let self = this
@@ -835,15 +710,6 @@ self.controlTitle=data.title*/
         }
       }
       .header_l {
-        width: 182px;
-        height: 44px;
-        margin: 10px 0 0 40px;
-      }
-      .header_l-position {
-        z-index: 10;
-        position: absolute;
-        top: 0;
-        left: 30px;
         width: 250px;
         height: 55px;
       }
@@ -853,13 +719,25 @@ self.controlTitle=data.title*/
         margin-left: 136px;
         background: url("~@/assets/image/index_icon2.png") no-repeat;
         background-size: 100% 100%;
-        font-size: 30px;
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: 30px;
-        text-align: center;
         padding-top: 26px;
+        position: relative;
+        .header_c-p{
+          font-size: 30px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #FFFFFF;
+          line-height: 30px;
+          text-align: center;
+          padding-left: 70px;
+        }
+        .header_l-position {
+          z-index: 10;
+          position: absolute;
+          top: 17px;
+          left: 330px;
+          width: 50px;
+          height: 50px;
+        }
       }
       .header_r1 {
         margin-left: 116px;
@@ -891,11 +769,11 @@ self.controlTitle=data.title*/
       .position-button-right-bottom-1{
         position:absolute;
         bottom:20px;
-        right:350px;
+        right:325px;
         color:#fff;
         background-color:#013147;
         border:2px solid #1d94b2;
-        border-radius:4px;
+        border-radius:10px;
         font-size:18px;
         height:50px;
         line-height:44px;
@@ -906,11 +784,11 @@ self.controlTitle=data.title*/
       .position-button-right-bottom-2{
         position:absolute;
         bottom:20px;
-        right:150px;
+        right:170px;
         color:#fff;
         background-color:#013147;
         border:2px solid #1d94b2;
-        border-radius:4px;
+        border-radius:10px;
         font-size:18px;
         height:50px;
         line-height:44px;
@@ -1582,13 +1460,59 @@ self.controlTitle=data.title*/
             margin-top: 276px;
           }
         }
-        .warning-max-big-box-all {
-          padding: 15px 20px 0 !important;
-          height: 439px !important;
+      }
+    }
+    .right {
+      width: 748px;
+      height: 880px;
+      position: absolute;
+      right: 62px;
+      top: 148px;
+      z-index: 50;
+      background: url("~@/assets/image/index_icon11.png") no-repeat;
+      background-size: 100% 100%;
+      padding: 34px 30px 0 34px;
+      box-sizing: border-box;
+      .right_t {
+        width: 684px;
+        .right_t_b {
+          width: 684px;
+          height: 226px;
+        }
+      }
+      .right_b {
+        margin-top: 18px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        .title-component-p{
+          font-size: 18px;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          color: #1ED0F8;
+          line-height: 18px;
+          height:18px;
+          margin-bottom:20px;
+        }
+        //滚动条
+        .warning-max-big-box::-webkit-scrollbar{
+          width: 0;     /*高宽分别对应横竖滚动条的尺寸*/
+          height: 0;
+        }
+        .warning-max-big-box::-webkit-scrollbar-thumb{
+          border-radius: 5px;
+          -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
+          background: rgba(255,255,255,0);
+        }
+        .warning-max-big-box::-webkit-scrollbar-track{
+          -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
+          border-radius: 0;
+          background: rgba(255,255,255,0);
         }
         .warning-max-big-box {
-          padding: 5px 20px 0;
-          height: 116px;
+          width:680px;
+          padding: 5px 0 0;
+          height: 500px;
           z-index: 200;
           justify-content: flex-start;
           flex-wrap: wrap;
@@ -1603,6 +1527,7 @@ self.controlTitle=data.title*/
             display: flex;
             justify-content: flex-start;
             align-items: center;
+            padding-right:10px;
             margin-bottom: 10px;
             img {
               width: 40px;
@@ -1643,201 +1568,6 @@ self.controlTitle=data.title*/
             }
           }
         }
-      }
-    }
-    .right {
-      width: 748px;
-      height: 880px;
-      position: absolute;
-      right: 62px;
-      top: 148px;
-      z-index: 50;
-      background: url("~@/assets/image/index_icon11.png") no-repeat;
-      background-size: 100% 100%;
-      padding: 34px 30px 0 34px;
-      box-sizing: border-box;
-      .right_t {
-        width: 684px;
-        .right_t_b {
-          width: 684px;
-          height: 226px;
-        }
-      }
-      .right_b {
-        margin-top: 18px;
-        display: flex;
-        justify-content: space-between;
-        .right_b_l {
-          width: 324px;
-          /*小标题*/
-          .small_title {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .small_title_l {
-              font-size: 18px;
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              color: #1ED0F8;
-              line-height: 18px;
-            }
-            .small_title_r {
-              flex: 1;
-              text-align: right;
-              > i {
-                //width: 100px;
-                display: inline-block;
-                font-size: 14px;
-                font-family: Source Han Sans CN;
-                font-weight: 400;
-                color: #FFFFFF;
-                line-height: 14px;
-                text-align: right;
-                margin-right: 12px;
-              }
-              > img {
-                width: 12px;
-                height: 12px;
-                cursor: pointer;
-                position: relative;
-                top: 0px;
-              }
-            }
-            .small_title_r2 {
-              flex: 1;
-              text-align: right;
-              > i {
-                //width: 100px;
-                display: inline-block;
-                font-size: 14px;
-                font-family: Source Han Sans CN;
-                font-weight: 400;
-                color: #FFFFFF;
-                line-height: 14px;
-                text-align: right;
-                margin-right: 12px;
-              }
-              > img {
-                width: 12px;
-                height: 12px;
-                cursor: pointer;
-                position: relative;
-                top: -2px;
-              }
-            }
-          }
-          .right_b_l_b {
-            position: relative;
-            .right_b_l_b_t {
-              height: 48px;
-              display: flex;
-              justify-content: flex-start;
-              border-bottom: 1px solid #00FAFF;
-              margin-top: 16px;
-              > i {
-                display: inline-block;
-                font-size: 16px;
-                font-family: Microsoft YaHei;
-                font-weight: 400;
-                color: #00FAFF;
-                line-height: 48px;
-                margin-left: 6px;
-              }
-              > i:nth-of-type(1) {
-                width: 223px;
-              }
-              > i:nth-of-type(2) {
-                width: 84px;
-              }
-            }
-            .right_b_l_b_b {
-              height: 190px;
-              overflow-y: auto;
-              background: 0;
-              > li {
-                height: 40px;
-                display: flex;
-                justify-content: flex-start;
-                border-bottom: 1px solid #00DFFF;
-                > a {
-                  width: 223px;
-                  display: inline-block;
-                  font-size: 14px;
-                  font-family: Microsoft YaHei;
-                  font-weight: 400;
-                  color: #fff;
-                  line-height: 40px;
-                  margin-left: 6px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap
-                }
-                > i {
-                  width: 84px;
-                  text-align: center;
-                  padding-right: 50px;
-                  display: inline-block;
-                  font-size: 14px;
-                  font-family: Microsoft YaHei;
-                  font-weight: 400;
-                  color: #fff;
-                  line-height: 40px;
-                  margin-left: 6px;
-                }
-              }
-
-            }
-          }
-        }
-        .right_b_r {
-          width: 334px;
-          /*小标题*/
-          .small_title {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            .small_title_l {
-              font-size: 18px;
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              color: #1ED0F8;
-              line-height: 18px;
-            }
-          }
-          .right_b_r_b_t {
-            display: flex;
-            justify-content: flex-start;
-            flex-wrap: wrap;
-            margin-top: 10px;
-            height: 60px;
-            > li {
-              display: flex;
-              justify-content: flex-start;
-              align-items: center;
-              margin-right: 30px;
-              > i:nth-of-type(1) {
-                width: 8px;
-                height: 8px;
-                background: #FFFFFF;
-                border-radius: 4px;
-                margin-right: 4px;
-              }
-              > i:nth-of-type(2) {
-                font-size: 12px;
-                font-family: Microsoft YaHei;
-                font-weight: 400;
-                color: #FFFFFF;
-                line-height: 32px;
-              }
-            }
-          }
-          .right_b_r_b_b {
-            width: 344px;
-            height: 166px;
-
-          }
-        }
 
       }
     }

src/views/emergencyManagement/index.vue

@@ -63,6 +63,7 @@
         console.log('选中实验室',item)
         this.$refs['newRadioComponent'].initialize(item);
         this.$refs['newSensorComponent'].initialize(item);
+        this.$refs['newVideoComponent'].initialize(item);
       },
       //树状组件-位置
       setAddress(list){

src/views/emergencyManagement/newPageComponent/newMapComponent.vue

@@ -984,7 +984,7 @@
         this.lightClient.on("message", (topic, message) => {
           if (message){
             let data = JSON.parse(message)
-            console.log('data',data);
+            console.log('疏散灯',data);
             for(let i=0;i<self.mapList.length;i++){
               if(self.mapList[i].type == 2){
                 for(let o=0;o<self.mapList[i].lightList.length;o++){

src/views/emergencyManagement/newPageComponent/newVideoComponent.vue

@@ -1,15 +1,40 @@
 <!--监控模块-->
 <template>
   <div class="newVideoComponent">
-
+    <div class="button-box">
+      <p class="left-button-p el-icon-arrow-left" v-if="dataList[2]" @click="leftButton()"></p>
+    </div>
+    <div class="video-max-big-box">
+      <H5PlayerVideo class="sub-video-box" :videoProps="item.videoData"
+       v-for="(item,index) in videoList" :key="index"></H5PlayerVideo>
+      <p class="null-text-p">该实验室未配置监控设备</p>
+    </div>
+    <div class="button-box">
+      <p class="right-button-p el-icon-arrow-right" v-if="dataList[2]" @click="rightButton()"></p>
+    </div>
+    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
   </div>
 </template>
 <script>
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
+  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
+  import {
+    iotCameraFindByCondition
+  } from '@/api/index'
   export default {
     name: 'newVideoComponent',
+    components: {
+      H5PlayerVideo,
+      fullH5PlayerVideo
+    },
     data () {
       return {
-
+        videoList:[],
+        //全屏视频参数
+        fullVideoProps:{},
+        fullVideoType:false,
+        showIndex:0,
+        dataList:[],
       }
     },
     created(){
@@ -19,9 +44,79 @@
 
     },
     methods:{
-      //初始化
+      //初始化 查询实验室摄像头
       initialize(data){
-
+        let self = this;
+        // type 1.楼栋 2.楼层 3.楼道 4.实验室
+        let obj = {
+          page:1,
+          pageSize:10,
+          passageway:'',
+          subIds:[data.subId],
+          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
+          streamType:1,
+          source:0,
+        };
+        iotCameraFindByCondition(obj).then(response => {
+          let list = [];
+          for(let i=0;i<response.data.records.length;i++){
+            list.push(
+              {
+                width: 300, //(宽度:非必传-默认600)
+                height: 200, //(高度:非必传-默认338)
+                url: response.data.records[i].streamUrl,
+                cameraIndexCode: response.data.records[i].deviceNo,
+              }
+            )
+          }
+          this.$set(this,'dataList',list)
+          let videoList = []
+          if(list[0]){
+            videoList.push(list[0])
+          }
+          if(list[1]){
+            videoList.push(list[1])
+          }
+          this.$set(this, 'videoList', videoList);
+        });
+      },
+      leftButton(){
+        if(this.showIndex>1){
+          let videoList = [];
+          if(this.dataList[this.showIndex-2]){
+            videoList.push(this.dataList[this.showIndex-2])
+          }
+          if(this.dataList[this.showIndex-1]){
+            videoList.push(this.dataList[this.showIndex-1])
+          }
+          if(videoList[0]){
+            this.$set(this,'showIndex',this.showIndex-2);
+            this.$set(this,'videoList',videoList);
+          }
+        }
+      },
+      rightButton(){
+        let videoList = [];
+        if(this.dataList[this.showIndex+2]){
+          videoList.push(this.dataList[this.showIndex+2])
+        }
+        if(this.dataList[this.showIndex+3]){
+          videoList.push(this.dataList[this.showIndex+3])
+        }
+        if(videoList[0]){
+          this.$set(this,'showIndex',this.showIndex+2);
+          this.$set(this,'videoList',videoList);
+        }
+      },
+      //全屏开启-关闭轮播
+      stopTime(cameraIndexCode){
+        this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
+        this.$set(this,'fullVideoType',true);
+      },
+      //全屏关闭-开启轮播
+      outFullScreen(){
+        this.$set(this,'fullVideoType',false);
+        this.$set(this,'fullVideoProps',{});
       },
     },
   }
@@ -31,5 +126,52 @@
     width:800px;
     height:290px;
     background-color: #052F48;
+    display: flex;
+    .video-max-big-box{
+      flex:1;
+      padding-left:12px;
+      padding-top:45px;
+      .sub-video-box:nth-child(1){
+        margin-right:20px;
+      }
+      .sub-video-box{
+        display: inline-block;
+        width:300px;
+        height:200px;
+        background-color: red;
+      }
+      .null-text-p{
+        text-align: center;
+        color: #dedede;
+        font-size: 14px;
+        line-height: 200px;
+      }
+    }
+    .button-box{
+      width:78px;
+      overflow: hidden;
+      .left-button-p{
+        cursor: pointer;
+        color:#24D1F9;
+        border-radius:50%;
+        border:1px solid #24D1F9;
+        text-align: center;
+        width:30px;
+        height:30px;
+        line-height:30px;
+        margin:126px 20px 0 30px;
+      }
+      .right-button-p{
+        cursor: pointer;
+        color:#24D1F9;
+        border-radius:50%;
+        border:1px solid #24D1F9;
+        text-align: center;
+        width:30px;
+        height:30px;
+        line-height:30px;
+        margin:126px 30px 0 20px;
+      }
+    }
   }
 </style>