zc

src/views/emergencyManagement/performEvacuation/performEvacuationData.vue

@@ -289,8 +289,9 @@
             <p>视频监控</p>
           </div>
           <div class="content-video-for-box" :class="!videoList[0]?'content-null-box':''">
-            <div class="video-for-box">
-              <mpegts-video style="display: inline-block;margin-bottom:20px;" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+            <div class="video-for-box" v-if="videoType">
+              <H5PlayerVideo style="margin:10px 0 0;"
+                v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
             </div>
             <div class="pagination-box">
               <p class="flex-null-p"></p>
@@ -300,7 +301,7 @@
                 layout="total, prev, pager, next"
                 :page.sync="videoQueryParams.page"
                 :limit.sync="videoQueryParams.pageSize"
-                @pagination="iotBigViewDeviceList"
+                @pagination="videoInitialize"
               />
               <p class="flex-null-p"></p>
             </div>
@@ -424,17 +425,18 @@
   import { laboratoryBigViewGetBuildByBigView, laboratoryBigViewGetFloorByBigView,
     laboratoryExitLineGetRedisEvacuation,laboratoryExitLineExecuteEvacuation,
     laboratoryExitLineEndEvacuation,laboratoryBigViewOnLineUserList,
-    iotBigViewHardwareFindByType,iotBigViewDeviceList,iotBigViewSpeakerPlayText,
+    iotBigViewHardwareFindByType,iotBigViewSpeakerPlayText,
     iotBigViewDeviceFindBySubId,iotBigViewDeviceFindByType,laboratoryBigViewHazardCensus,
     iotBigViewHardwareOperatingHardware,laboratoryExitRelayOpenLight,
     laboratoryExitRelayCloseLight,laboratoryPlanCloseRiskPlan } from "@/api/emergencyManagement/index";
   import { laboratoryBigViewSelectTriggerInfo } from "@/api/commonality/permission";
-  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
   import { iotHardwareOperatingHardware } from '@/api/commonality/permission'
+  import { iotCameraFindByCondition } from "@/api/basicsModules/index";
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
   export default {
     name: 'performEvacuationData',
     components: {
-      mpegtsVideo,
+      H5PlayerVideo,
     },
     props:{
       propsBigData:{},
@@ -480,6 +482,9 @@
         loudspeakerList:[],
         //实验室人员数据
         userList:[],
+        width:397,
+        height:223,
+        videoType:false,
         //视频数据
         videoQueryParams:{
           page:1,
@@ -628,7 +633,7 @@
           //查询实验室相关硬件
           this.iotBigViewHardwareFindByType();
           //查询实验室相关摄像头
-          this.iotBigViewDeviceList();
+          this.videoInitialize();
           //查询实验室相关传感器
           this.iotBigViewDeviceFindBySubId();
           //查询实验室相关喇叭
@@ -1038,26 +1043,37 @@
         })
       },
       //查询实验室摄像头
-      iotBigViewDeviceList(){
-        let obj = JSON.parse(JSON.stringify(this.videoQueryParams))
-        obj.subjectId = this.checkSubId;
-        obj.typeKey = 'camera'
-        iotBigViewDeviceList(obj).then(response => {
+      videoInitialize() {
+        let self = this;
+        self.$set(self, 'videoType', false);
+        // type 1.楼栋 2.楼层 3.楼道 4.实验室
+        let obj = {
+          page:this.videoQueryParams.page,
+          pageSize:this.videoQueryParams.pageSize,
+          buildId:'',
+          floorId:'',
+          passageway:this.floorId,
+          subIds:[this.checkSubId],
+        };
+        iotCameraFindByCondition(obj).then(response => {
           let list = [];
-          response.data.records.forEach((item)=>{
-            let obj = JSON.parse(item.reservedField)
-            if(obj.url){
-              item.width = 397;
-              item.height = 223;
-              item.type = 'flv';
-              item.isLive = true;
-              item.url = '';
-              list.push(item);
-            }
-          })
-          this.$set(this,'videoList',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,
+              }
+            )
+          }
+          this.$set(this,'videoList',list)
           this.$set(this,'videoTotal',response.data.total);
-        })
+          this.$nextTick(()=>{
+            setTimeout(function(){
+              self.$set(self, 'videoType', true);
+            },1000);
+          })
+        });
       },
       //查询实验室传感器
       iotBigViewDeviceFindBySubId(){

src/views/emergencyManagement/performEvacuation/performEvacuationHome.vue

@@ -180,8 +180,9 @@
           <p>视频监控</p>
         </div>
         <div class="content-video-for-box" :class="!videoList[0]?'content-video-null-box':''">
-          <div class="video-for-box">
-            <mpegts-video style="display: inline-block;margin-bottom:20px;" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+          <div class="video-for-box" v-if="videoType">
+            <H5PlayerVideo style="margin:10px 0 0;"
+              v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
           </div>
           <div class="pagination-box">
             <p class="flex-null-p"></p>
@@ -191,7 +192,7 @@
               layout="total, prev, pager, next"
               :page.sync="videoQueryParams.page"
               :limit.sync="videoQueryParams.pageSize"
-              @pagination="iotBigViewDeviceList"
+              @pagination="videoInitialize"
             />
             <p class="flex-null-p"></p>
           </div>
@@ -208,14 +209,14 @@
   import mqtt from 'mqtt'
   import { laboratoryBigViewGetBuildByBigView,laboratoryBigViewGetFloorByBigView,
     laboratoryBigViewHazardCensus, iotBigViewStatisticsHardwareDeviceType,
-    iotBigViewDeviceList,laboratoryBigViewOnLineUserList,
-    laboratoryExitLineGetRedisEvacuation } from "@/api/emergencyManagement/index";
+    laboratoryBigViewOnLineUserList, laboratoryExitLineGetRedisEvacuation } from "@/api/emergencyManagement/index";
   import { laboratoryBigViewSelectTriggerInfo } from "@/api/commonality/permission";
-  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
+  import { iotCameraFindByCondition } from "@/api/basicsModules/index";
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
   export default {
     name: 'performEvacuationHome',
     components: {
-      mpegtsVideo,
+      H5PlayerVideo,
     },
     props:{
       propsBigData:{},
@@ -243,6 +244,9 @@
           numList: [],
           maxNumList: [],
         },
+        width:397,
+        height:223,
+        videoType:false,
         //视频数据
         videoQueryParams:{
           page:1,
@@ -300,14 +304,14 @@
           page:1,
           pageSize:3,
         });
+        //获取楼层-摄像头列表;
+        this.videoInitialize();
         //获取楼层布局数据
         this.laboratoryBigViewGetFloorByBigView();
         //获取楼层-总人数;
         this.laboratoryBigViewOnLineUserList();
         //获取楼层-智能物联设备列表;
         this.iotBigViewStatisticsHardwareDeviceType();
-        //获取楼层-摄像头列表;
-        this.iotBigViewDeviceList();
         //获取楼层-危险源统计;
         this.laboratoryBigViewHazardCensus();
         this.offLightMQTT('on')
@@ -320,6 +324,38 @@
           this.offPlanMQTT('on');
         }
       },
+      videoInitialize() {
+        let self = this;
+        self.$set(self, 'videoType', false);
+        // type 1.楼栋 2.楼层 3.楼道 4.实验室
+        let obj = {
+          page:this.videoQueryParams.page,
+          pageSize:this.videoQueryParams.pageSize,
+          buildId:'',
+          floorId:this.floorId,
+          passageway:'',
+          subIds:[],
+        };
+        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,
+              }
+            )
+          }
+          this.$set(this,'videoList',list)
+          this.$set(this,'videoTotal',response.data.total);
+          this.$nextTick(()=>{
+            setTimeout(function(){
+              self.$set(self, 'videoType', true);
+            },1000);
+          })
+        });
+      },
       //切换楼层
       clickFloor(item,index){
         this.$set(this,'checkFloor',index);
@@ -613,28 +649,6 @@
           this.$set(this,'monitorNum',response.data.total);
         })
       },
-      //获取楼层-摄像头列表
-      iotBigViewDeviceList(){
-        let obj = JSON.parse(JSON.stringify(this.videoQueryParams))
-        obj.floorId = this.floorId;
-        obj.typeKey = 'camera'
-        iotBigViewDeviceList(obj).then(response => {
-          let list = [];
-          response.data.records.forEach((item)=>{
-            let obj = JSON.parse(item.reservedField)
-            if(obj.url){
-              item.width = 397;
-              item.height = 223;
-              item.type = 'flv';
-              item.isLive = true;
-              item.url = '';
-              list.push(item);
-            }
-          })
-          this.$set(this,'videoList',list);
-          this.$set(this,'videoTotal',response.data.total);
-        })
-      },
       //查询实验室危险源
       laboratoryBigViewHazardCensus(){
         laboratoryBigViewHazardCensus({floorId:this.floorId}).then(response => {

src/views/integratedManagement/laboratoryManagement/subject/indexRightPage/videoPage.vue

@@ -33,6 +33,7 @@
     methods:{
       initialize() {
         let self = this;
+        self.$set(self, 'videoType', false);
         // type 1.楼栋 2.楼层 3.楼道 4.实验室
         let obj = {
           page:'1',

src/views/integratedManagement/laboratoryManagement/subject/infoPage.vue

@@ -466,6 +466,7 @@
         },
         videoInitialize() {
           let self = this;
+          self.$set(self, 'videoType', false);
           // type 1.楼栋 2.楼层 3.楼道 4.实验室
           let obj = {
             page:'1',