zc

src/api/index.js

@@ -119,6 +119,14 @@ export function iotCameraFindByCondition(data) {
     data: data
   })
 }
+//根据设备ID获取摄像头流地址
+export function iotCameraGetPreviewURLs(query) {
+  return request({
+    url: '/iot/camera/getPreviewURLs',
+    method: 'get',
+    params: query
+  })
+}
 /******************************** 安全总览 ********************************/
 //实验室状态统计
 export function reportReportBigDataLabStateStatistics(query) {

src/components/H5PlayerVideo/H5PlayerVideo.vue

@@ -2,7 +2,6 @@
   <div class="H5PlayerVideo">
     <div :id="videoData.id" :ref="videoData.id"></div>
     <p class="full-screen-button" @click="fullScreen"></p>
-    <!--<p class="full-failed-button" v-if="fullScreenType" @click="outFullScreen"></p>-->
   </div>
 </template>
 
@@ -14,7 +13,6 @@
     },
     data() {
       return {
-        fullScreenType:false,
         videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
         videoData: {},
       }
@@ -24,7 +22,7 @@
         id: 'video_' + this.generateRandomString(),
         width: this.videoProps.width ? this.videoProps.width : 600,
         height: this.videoProps.height ? this.videoProps.height : 338,
-        url: this.videoProps.url
+        url: this.videoProps.url,
       })
     },
     mounted() {
@@ -33,39 +31,12 @@
         let type = this.videoData.url.indexOf('wss') !== -1?1:0;
         this.initPlayer(this.videoData.url, 0,type)
       })
-      if(this.$parent.stopTime){
-        document.addEventListener('fullscreenchange', this.fullFunction);
-      }
-
     },
     methods: {
-      fullFunction(){
-        if (!document.fullscreenElement) {
-          // 执行退出全屏后的操作
-          if (this.fullScreenType){
-            this.$set(this,'fullScreenType',false);
-            if(this.$parent.outFullScreen){
-              this.$parent.outFullScreen();
-            }
-          }
-        }
-      },
       //全屏
       fullScreen() {
-        let self = this;
         if(this.$parent.stopTime){
-          this.$parent.stopTime();
-          this.myPlugin.JS_FullScreenDisplay(true).then(
-            (res) => {
-              // console.info('JS_FullScreenDisplay success');
-              // do you want...
-            },
-            (err) => {
-              // console.info('JS_FullScreenDisplay failed');
-              // do you want...
-            }
-          );
-          self.$set(self,'fullScreenType',true);
+          this.$parent.stopTime(this.videoProps.cameraIndexCode);
         }else{
           this.myPlugin.JS_FullScreenDisplay(true).then(
             (res) => {
@@ -77,24 +48,8 @@
               // do you want...
             }
           );
-          self.$set(self,'fullScreenType',true);
         }
       },
-      //退出全屏
-      outFullScreen() {
-        let self = this;
-        this.myPlugin.JS_FullScreenDisplay(false).then(
-          (res) => {
-            // console.info('JS_FullScreenDisplay success');
-            // do you want...
-          },
-          (err) => {
-            // console.info('JS_FullScreenDisplay failed');
-            // do you want...
-          }
-        );
-        self.$set(self,'fullScreenType',false);
-      },
       initH5Player(split) {
         this.myPlugin = new window.JSPlugin({
           szId: this.videoData.id, //需要英文字母开头，唯一性，必填
@@ -181,9 +136,6 @@
         return randomString
       },
       videoOff() {
-        if(this.$parent.stopTime){
-          document.addEventListener('fullscreenchange', this.fullFunction);
-        }
         this.myPlugin.JS_StopRealPlayAll().then(
           () => {
             // console.info('JS_StopRealPlayAll success')
@@ -227,19 +179,5 @@
       z-index: 1;
       cursor: pointer;
     }
-    .full-failed-button {
-      background: url("../../assets/ZDimages/icon_0.png");
-      background-size: 100%;
-      position: fixed;
-      font-size: 20px;
-      height: 30px;
-      width: 30px;
-      line-height: 30px;
-      text-align: center;
-      bottom: 0;
-      right: 0;
-      z-index: 11;
-      cursor: pointer;
-    }
   }
 </style>

src/components/fullH5PlayerVideo/fullH5PlayerVideo.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script>
+import { iotCameraGetPreviewURLs } from '@/api/index'
   export default {
     name: 'fullH5PlayerVideo',
     props: {
@@ -22,21 +23,29 @@
       }
     },
     created() {
-      this.$set(this, 'videoData', {
-        id: 'video_' + this.generateRandomString(),
-        width: this.fullVideoProps.width ? this.fullVideoProps.width : 600,
-        height: this.fullVideoProps.height ? this.fullVideoProps.height : 338,
-        url: this.fullVideoProps.url
-      })
     },
     mounted() {
-      this.$nextTick(() => {
-        this.initH5Player(1)
-        let type = this.videoData.url.indexOf('wss') !== -1?1:0;
-        this.initPlayer(this.videoData.url, 0,type)
-      })
+      this.iotCameraGetPreviewURLs();
     },
     methods: {
+      iotCameraGetPreviewURLs(){
+        let obj = {
+          streamType:0,
+          cameraIndexCode:this.fullVideoProps.cameraIndexCode,
+          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
+        }
+        iotCameraGetPreviewURLs(obj).then(response => {
+          this.$set(this, 'videoData', {
+            id: 'video_' + this.generateRandomString(),
+            url: response.data
+          })
+          this.$nextTick(() => {
+            this.initH5Player(1)
+            let type = response.data.indexOf('wss') !== -1?1:0;
+            this.initPlayer(this.videoData.url, 0,type)
+          })
+        })
+      },
       //全屏
       fullScreen() {
         let self = this;
@@ -173,11 +182,14 @@
     z-index:11;
     height: 100%;
     width:100%;
+    position: fixed;
+    top:0;
+    left:0;
     * {
       margin: 0;
       padding: 0;
     }
-    position: relative;
+    /*position: relative;*/
     .full-failed-button {
       background: url("../../assets/ZDimages/icon_1.png");
       background-size: 100%;

src/views/emergencyManagement/pageComponent/videoListComponent.vue

@@ -17,17 +17,21 @@
       />
       <p class="null-pagination-p"></p>
     </div>
+    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
   </div>
 </template>
 <script>
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
   import { iotCameraFindByCondition } from "@/api/index";
   import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
+  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
+
   export default {
     name: 'videoListComponent',
     components: {
       titlePageImgComponents,
-      H5PlayerVideo
+      H5PlayerVideo,
+      fullH5PlayerVideo
     },
     data () {
       return {
@@ -45,6 +49,9 @@
         videoTotal:0,
         videoList:[],
         floorId:null,
+        //全屏视频参数
+        fullVideoProps:{},
+        fullVideoType:false,
       }
     },
     created(){
@@ -75,6 +82,8 @@
           passageway:'',
           subIds:[],
           protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
+          streamType:1,
+          source:0,
         };
         iotCameraFindByCondition(obj).then(response => {
           let list = [];
@@ -96,6 +105,24 @@
           })
         });
       },
+      //全屏开启-关闭轮播
+      stopTime(cameraIndexCode){
+        // this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
+        this.$set(this,'fullVideoProps',{cameraIndexCode:'f0192a7ffd014509a8f2e8f3bc0936cf'});
+        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)
+      },
     },
   }
 </script>

src/views/resourceDevice/pageComponent/extendedServiceComponent.vue

@@ -98,7 +98,7 @@
           yAxis: [
             {
               type: 'category',
-              inverse: false,
+              inverse: true,
               data: category,
               axisLine: {
                 show: false,

src/views/safetyOverview/pageComponent/monitoringComponents.vue

@@ -13,16 +13,19 @@
       </div>
       <img class="right-button-img" @click="rightButton" src="@/assets/ZDimages/right_button.png">
     </div>
+    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
   </div>
 </template>
 <script>
   import { laboratorySubRelInfoKeySubList, iotCameraFindByCondition } from '@/api/index'
   import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
+  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
 
   export default {
     name: 'monitoringComponents',
     components: {
       H5PlayerVideo,
+      fullH5PlayerVideo
     },
     data() {
       return {
@@ -38,11 +41,13 @@
         //eCharts定时器
         eChartsTimer: null,
         subList: [],
+        //全屏视频参数
+        fullVideoProps:{},
+        fullVideoType:false,
       }
     },
     created() {
       this.timedRefresh();
-      // this.getData()
     },
     mounted() {
 
@@ -66,7 +71,7 @@
         self.eChartsTimer = setInterval(function() {
           self.videoQueryParams.page++
           self.videoInitialize('auto')
-        }, 1000 * 18)
+        }, 1000 * 180)
       },
       getData() {
         laboratorySubRelInfoKeySubList({
@@ -94,6 +99,8 @@
           passageway: '',
           subIds: this.subList,
           protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
+          streamType:1,
+          source:0,
         }
         iotCameraFindByCondition(obj).then(response => {
           if (response.data.records[0]) {
@@ -106,7 +113,8 @@
                   {
                     width: self.width, //(宽度:非必传-默认600)
                     height: self.height, //(高度:非必传-默认338)
-                    url: response.data.records[i].streamUrl
+                    url: response.data.records[i].streamUrl,
+                    cameraIndexCode: response.data.records[i].deviceNo,
                   }
                 )
               }
@@ -131,12 +139,17 @@
         })
       },
       //全屏开启-关闭轮播
-      stopTime(){
+      stopTime(cameraIndexCode){
+        // this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
+        this.$set(this,'fullVideoProps',{cameraIndexCode:'f0192a7ffd014509a8f2e8f3bc0936cf'});
+        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++

src/views/videoSurveillance/pageComponent/videoComponent.vue

@@ -24,15 +24,18 @@
                 :limit.sync="videoQueryParams.pageSize"
                 @pagination="videoInitialize"
     />
+    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
   </div>
 </template>
 <script>
   import { iotCameraFindByCondition } from "@/api/index";
   import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
+  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
   export default {
     name: 'videoComponent',
     components: {
-      H5PlayerVideo
+      H5PlayerVideo,
+      fullH5PlayerVideo
     },
     data () {
       return {
@@ -51,7 +54,12 @@
         videoQueryParams:{
           page:1,
           pageSize:4,
+          streamType:1,
+          source:0,
         },
+        //全屏视频参数
+        fullVideoProps:{},
+        fullVideoType:false,
       }
     },
     created(){
@@ -91,7 +99,9 @@
           page:1,
           pageSize:4,
           passageway:'',
-          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws'
+          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
+          streamType:1,
+          source:0,
         };
         if(data.level == 4){
           obj.buildId = data.treeId;
@@ -131,6 +141,24 @@
           })
         });
       },
+      //全屏开启-关闭轮播
+      stopTime(cameraIndexCode){
+        // this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
+        this.$set(this,'fullVideoProps',{cameraIndexCode:'f0192a7ffd014509a8f2e8f3bc0936cf'});
+        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)
+      },
     },
   }
 </script>