zc

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

@@ -1,32 +1,27 @@
 <!--视频模块-->
 <template>
   <div class="indexRightPage-videoPage scrollbar-box">
-    <img class="null-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!videoList[0]">
-    <div class="video-max-big-box scrollbar-box">
-      <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+    <div class="video-max-big-box scrollbar-box" v-if="videoType">
+      <img class="null-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!videoList[0]">
+      <H5PlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
     </div>
   </div>
 </template>
 
 <script>
-  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
-  //import { getInfo } from "@/api/integratedManagement/index";
+  import { iotCameraFindByCondition } from "@/api/basicsModules/index";
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
   export default {
     name: 'videoPage',
     components: {
-      mpegtsVideo,
+      H5PlayerVideo
     },
     data(){
       return{
-        videoList:[
-          // {
-          //   id:1,        //(ID:非必传-默认随机生成)
-          //   width:378,    //(宽度:非必传-默认600)
-          //   height:213,   //(高度:非必传-默认338)
-          //   type:'flv',
-          //   url:"ws://192.168.1.43:8230/rtp/440102004920000000010064_34020000001320000064.flv"        //(视频地址:必传)
-          // },
-        ],
+        width: 318,
+        height: 213,
+        videoType:false,
+        videoList:[],
       }
     },
     created(){
@@ -36,8 +31,35 @@
 
     },
     methods:{
-      initialize(){
-        console.log(this.$parent.infoId)
+      initialize() {
+        let self = this;
+        // type 1.楼栋 2.楼层 3.楼道 4.实验室
+        let obj = {
+          page:'1',
+          pageSize:'10',
+          buildId:'',
+          floorId:'',
+          passageway:'',
+          subIds:[this.$parent.subId],
+        };
+        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.$nextTick(()=>{
+            setTimeout(function(){
+              self.$set(self, 'videoType', true);
+            },1000);
+          })
+        });
       },
     },
   }

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

@@ -144,7 +144,7 @@
         </div>
         <div v-if="videoType">
           <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!videoList[0]">
-          <mpegts-video style="display: inline-block;margin-bottom:10px;" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+          <H5PlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
         </div>
         <!--广播-->
         <div class="all-title-box" style="height:40px;margin-top:10px;">
@@ -273,7 +273,6 @@
   import mqtt from 'mqtt'
   import { controlsRestrictVerify } from '@/utils/index'
   import qrCodeDialog from "@/components/qrCodeDialog/index.vue"
-  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
   import {laboratorySubRelInfoGetSubRelByCheckHazard} from '@/api/integratedManagement/index'
   import {
     iotSensorFindBySubId,
@@ -282,12 +281,14 @@
     iotDeviceFindByType,
     iotSpeakerPlayText
   } from '@/api/commonality/permission'
+  import { iotCameraFindByCondition } from "@/api/basicsModules/index";
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
   export default {
       name: "infoPage",
       components: {
         vueQr,
         qrCodeDialog,
-        mpegtsVideo,
+        H5PlayerVideo
       },
       props:{
         subjectData:{},
@@ -319,25 +320,12 @@
           sensorList:[],
           //硬件数据
           hardwareList:[],
+          width: 490,
+          height: 280,
           //视频权限
           videoType:false,
           //视频数据
-          videoList:[
-            // {
-            //   id:1,        //(ID:非必传-默认随机生成)
-            //   width:490,    //(宽度:非必传-默认600)
-            //   height:280,   //(高度:非必传-默认338)
-            //   type:'flv',
-            //   url:"ws://192.168.1.43:8230/rtp/440102004920000000010064_34020000001320000064.flv"        //(视频地址:必传)
-            // },
-            // {
-            //   id:2,        //(ID:非必传-默认随机生成)
-            //   width:490,    //(宽度:非必传-默认600)
-            //   height:280,   //(高度:非必传-默认338)
-            //   type:'flv',
-            //   url:"ws://192.168.1.43:8230/rtp/440102004920000000010064_34020000001320000064.flv"        //(视频地址:必传)
-            // },
-          ],
+          videoList:[],
           //危险源-关联配置数据
           checkInData:{},
           //喇叭数据
@@ -469,13 +457,43 @@
           if(!controlsRestrictVerify('subVideo')){
             this.$set(this,'videoType',false);
           }else{
-            this.$set(this,'videoType',true);
+            this.videoInitialize();
           }
           //mqtt订阅
           this.sensorOffMQTT('on');
           this.hardwareOffMQTT('on');
 
         },
+        videoInitialize() {
+          let self = this;
+          // type 1.楼栋 2.楼层 3.楼道 4.实验室
+          let obj = {
+            page:'1',
+            pageSize:'10',
+            buildId:'',
+            floorId:'',
+            passageway:'',
+            subIds:[this.subjectData.subId],
+          };
+          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.$nextTick(()=>{
+              setTimeout(function(){
+                self.$set(self, 'videoType', true);
+              },1000);
+            })
+          });
+        },
         //播放文字
         handleAdd(deviceNo) {
           if(!controlsRestrictVerify('subHardwareControl')){