zc

src/components/planAlarm/planAlarm.vue

@@ -19,31 +19,34 @@
         </div>
         <div v-if="!lookImgType" class="planAlarm-big-box">
           <div class="planAlarm-left-box">
-            <div class="video-box">
-              <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+            <div class="video-box planAlarm-scrollbar">
+              <H5PlayerVideo style="margin:10px 0 0 18px;"
+                             v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
+              <!--<img v-if="!videoList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">-->
+              <!--<mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>-->
               <p class="null-video-p" v-if="!videoList[0]">实验室未配置摄像头</p>
             </div>
-            <div class="bugle-box">
-              <div class="bugle-for-button-box planAlarm-scrollbar">
-                <p class="for-button-box" @click="clickLoudspeaker(item)"
-                   :class="checkLoudspeaker == item.deviceNo?'for-button-box-check':''"
-                   v-for="(item,index) in loudspeakerList" :key="index">
-                  {{item.deviceName}}
-                </p>
-              </div>
-              <div class="bugle-for-text-box planAlarm-scrollbar">
-                <p class="null-p" v-if="!loudspeakerTextList[0]">历史发送记录</p>
-                <div class="for-text-box" v-for="(item,index) in loudspeakerTextList" :key="index">
-                  <p>{{item.time}}</p>
-                  <p>{{item.value}}</p>
-                </div>
-              </div>
-              <div class="bugle-for-input-box">
-                <el-input placeholder="请输入内容" v-model="loudspeakerInput" class="input-with-select">
-                  <p slot="append" style="cursor: pointer" @click="iotBigViewSpeakerPlayText">发送</p>
-                </el-input>
-              </div>
-            </div>
+            <!--<div class="bugle-box">-->
+              <!--<div class="bugle-for-button-box planAlarm-scrollbar">-->
+                <!--<p class="for-button-box" @click="clickLoudspeaker(item)"-->
+                   <!--:class="checkLoudspeaker == item.deviceNo?'for-button-box-check':''"-->
+                   <!--v-for="(item,index) in loudspeakerList" :key="index">-->
+                  <!--{{item.deviceName}}-->
+                <!--</p>-->
+              <!--</div>-->
+              <!--<div class="bugle-for-text-box planAlarm-scrollbar">-->
+                <!--<p class="null-p" v-if="!loudspeakerTextList[0]">历史发送记录</p>-->
+                <!--<div class="for-text-box" v-for="(item,index) in loudspeakerTextList" :key="index">-->
+                  <!--<p>{{item.time}}</p>-->
+                  <!--<p>{{item.value}}</p>-->
+                <!--</div>-->
+              <!--</div>-->
+              <!--<div class="bugle-for-input-box">-->
+                <!--<el-input placeholder="请输入内容" v-model="loudspeakerInput" class="input-with-select">-->
+                  <!--<p slot="append" style="cursor: pointer" @click="iotBigViewSpeakerPlayText">发送</p>-->
+                <!--</el-input>-->
+              <!--</div>-->
+            <!--</div>-->
           </div>
           <div class="planAlarm-right-box">
             <div class="planAlarm-text-box">
@@ -133,6 +136,7 @@
         </div>
       </div>
     </div>
+    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
   </div>
 </template>
 <script>
@@ -140,7 +144,7 @@
   import {
     laboratoryBigViewSelectTriggerInfo,
     iotBigViewDeviceFindByType,
-    iotBigViewDeviceList,
+    iotCameraFindByCondition,
     iotBigViewDeviceFindBySubId,
     laboratoryEventFindByEventId,
     laboratorySubRelInfoGetDetailInfo,
@@ -148,11 +152,15 @@
     laboratoryPlanCloseRiskPlan,
   } from "@/api/index";
   import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
+  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
 
   export default {
     name: 'planAlarm',
     components: {
       mpegtsVideo,
+      H5PlayerVideo,
+      fullH5PlayerVideo
     },
     data () {
       return {
@@ -168,8 +176,6 @@
         internalPerson:{},
         //实验室人数
         userList:[],
-        //摄像头
-        videoList:[],
         //持续时间
         seconds:null,
         //定时器
@@ -179,48 +185,7 @@
         lookImgUrl:'',
         photographList:[],
         //传感器
-        monitorList:[
-          {
-            name:'温度传感器',
-            value:'45℃',
-            type:1,
-          },
-          {
-            name:'湿度传感器',
-            value:'45%',
-            type:2,
-          },
-          {
-            name:'烟感传感器',
-            value:'12',
-            type:2,
-          },
-          {
-            name:'TVOC传感器',
-            value:'12ppm',
-            type:2,
-          },
-          {
-            name:'火焰传感器',
-            value:'无',
-            type:2,
-          },
-          {
-            name:'火焰传感器',
-            value:'无',
-            type:2,
-          },
-          {
-            name:'火焰传感器',
-            value:'无',
-            type:2,
-          },
-          {
-            name:'火焰传感器',
-            value:'无',
-            type:2,
-          },
-        ],
+        monitorList:[],
         planSensorList:[],
         //文字转语音
         loudspeakerInput:'',
@@ -231,6 +196,14 @@
         voiceType:false,
         //短信报警
         messageType:false,
+        //视频
+        width:920,
+        height:470,
+        videoType:false,
+        videoList:[],
+        //全屏视频参数
+        fullVideoProps:{},
+        fullVideoType:false,
       }
     },
     created(){
@@ -331,30 +304,6 @@
           })
         })
       },
-      //查询实验室摄像头
-      iotBigViewDeviceList(){
-        let obj = {
-          page:1,
-          pageSize:1,
-          subjectId:this.planData.subId,
-          typeKey:'camera'
-        };
-        iotBigViewDeviceList(obj).then(response => {
-          let list = [];
-          response.data.records.forEach((item)=>{
-            let obj = JSON.parse(item.reservedField)
-            if(obj.url){
-              item.width = 917;
-              item.height = 532;
-              item.type = 'flv';
-              item.isLive = true;
-              item.url = '';
-              list.push(item);
-            }
-          })
-          this.$set(this,'videoList',list);
-        })
-      },
       //查询实验室传感器
       iotBigViewDeviceFindBySubId(){
         let self = this;
@@ -469,7 +418,7 @@
                 //查询实验室喇叭
                 this.iotBigViewDeviceFindByType(),
                 //查询实验室摄像头
-                this.iotBigViewDeviceList(),
+                this.videoInitialize(),
                 //查询实验室传感器
                 this.iotBigViewDeviceFindBySubId(),
                 //查询预案详情
@@ -510,6 +459,54 @@
         var remainingSeconds = seconds % 60;
         return hours + "小时 " + minutes + "分钟 " + remainingSeconds + "秒";
       },
+      //查询实验室摄像头
+      videoInitialize(){
+        let self = this;
+        self.$set(self, 'videoType', false);
+        self.$set(self, 'videoList', []);
+        // type 1.楼栋 2.楼层 3.楼道 4.实验室
+        let obj = {
+          page:1,
+          pageSize:10,
+          buildId:'',
+          floorId:'',
+          passageway:'',
+          subIds:[this.planData.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: this.width, //(宽度:非必传-默认600)
+                height: this.height, //(高度:非必传-默认338)
+                url: response.data.records[i].streamUrl,
+                cameraIndexCode: response.data.records[i].deviceNo,
+              }
+            )
+          }
+          this.$set(this,'videoList',list)
+          this.$set(this,'videoTotal',response.data.total);
+          this.$nextTick(()=>{
+            setTimeout(function(){
+              self.$set(self, 'videoType', true);
+            },1000);
+          })
+        });
+      },
+      //全屏开启-关闭轮播
+      stopTime(cameraIndexCode){
+        this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
+        this.$set(this,'fullVideoType',true);
+      },
+      //全屏关闭-开启轮播
+      outFullScreen(){
+        this.$set(this,'fullVideoType',false);
+        this.$set(this,'fullVideoProps',{});
+      },
     },
     beforeDestroy() {
       //清除MQTT
@@ -678,7 +675,8 @@
             border-radius:10px;
             .video-box{
               width: 917px;
-              height: 532px;
+              height: 808px;
+              overflow-y: scroll;
               .null-video-p{
                 line-height:532px;
                 text-align: center;

src/views/emergencyManagement/pageComponent/videoListComponent.vue

@@ -110,18 +110,12 @@
       stopTime(cameraIndexCode){
         this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
         this.$set(this,'fullVideoType',true);
-        window.clearInterval(this.eChartsTimer)
       },
       //全屏关闭-开启轮播
       outFullScreen(){
         let self = this;
         this.$set(this,'fullVideoType',false);
         this.$set(this,'fullVideoProps',{});
-        window.clearInterval(self.eChartsTimer)
-        this.eChartsTimer = setInterval(function() {
-          self.videoQueryParams.page++
-          self.videoInitialize('auto')
-        }, 1000 * 180)
       },
     },
   }

src/views/videoSurveillance/pageComponent/videoComponent.vue

@@ -146,18 +146,12 @@
       stopTime(cameraIndexCode){
         this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
         this.$set(this,'fullVideoType',true);
-        window.clearInterval(this.eChartsTimer)
       },
       //全屏关闭-开启轮播
       outFullScreen(){
         let self = this;
         this.$set(this,'fullVideoType',false);
         this.$set(this,'fullVideoProps',{});
-        window.clearInterval(self.eChartsTimer)
-        this.eChartsTimer = setInterval(function() {
-          self.videoQueryParams.page++
-          self.videoInitialize('auto')
-        }, 1000 * 180)
       },
     },
   }