安全管理视频处理

src/main.js

@@ -36,8 +36,9 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
-
+import Bus from '@/utils/eventBus'
 // 全局方法挂载
+
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
 Vue.prototype.parseTime = parseTime
@@ -65,6 +66,7 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 
+Vue.use(Bus);
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)

src/utils/eventBus.js

@@ -0,0 +1,18 @@
+// units/bus.js
+const install = Vue => {
+  const Bus = new Vue({
+    methods: {
+      on(event, ...args) {
+        this.$on(event, ...args);
+      },
+      emit(event, callback) {
+        this.$emit(event, callback);
+      },
+      off(event, callback) {
+        this.$off(event, callback);
+      }
+    }
+  });
+  Vue.prototype.$bus = Bus;
+};
+export default install;

src/views/bigScreen/securityManage/center.vue

@@ -9,21 +9,21 @@
             <img src="./img/left1/icon.png" alt="" />
             <span style="margin-left: 2px">一级：{{v.pointName}}</span>
           </div>
-          <div class="com_img"><img src="./img/left1/icon1.png" alt="" /></div>
+          <div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon1.png" alt="" /></div>
         </div>
         <div v-if="v.level == '二级'" class="con_right con_two" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
           <div class="con_title con_title_bg2">
             <img src="./img/left1/icon.png" alt="" />
             <span style="margin-left: 2px">二级：{{v.pointName}}</span>
           </div>
-          <div class="com_img"><img src="./img/left1/icon2.png" alt="" /></div>
+          <div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon2.png" alt="" /></div>
         </div>
         <div v-if="v.level == '三级'" class="con_right con_three" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
         <div class="con_title con_title_bg3">
           <img src="./img/left1/icon.png" alt="" />
           <span style="margin-left: 2px">三级：{{v.pointName}}</span>
         </div>
-        <div class="com_img"><img src="./img/left1/icon3.png" alt="" /></div>
+        <div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon3.png" alt="" /></div>
         </div>
       </section>
       <!-- <div class="con_right">
@@ -132,8 +132,10 @@ export default {
       // this.initChart3()
     })
   },
-  beforeDestroy () { },
   methods: {
+    handleItem(item) {
+      this.$bus.emit("getTarget", item);
+    },
     getItem (list, name) {
       for (let index = 0; index < list.length; index++) {
         const item = list[index];
@@ -164,6 +166,10 @@ export default {
       })
     }
   },
+  beforeDestroy() {
+    //销毁监听事件
+    this.$bus.off("getTarget");
+  }
 }
 </script>
 

src/views/bigScreen/securityManage/left1.vue

@@ -7,14 +7,14 @@
             <!-- <div id="left1" ref="left1" class="chart1"></div> -->
             <div style="height: 270px; margin: 14px 0 8px">
               <!-- <img style="width: 100%; height: 100%" src="./img/left1/1.jpg" alt="" /> -->
-              <video style="width: 100%; height: 100%" id="videoElement" muted controls autoplay>
+              <video style="width: 100%; height: 100%" :src="videoUrl" id="videoElement" muted controls autoplay>
                 Your browser is too old which doesn't support HTML5 video.
               </video>
             </div>
             <div style="text-align: right; margin-bottom: 14px; font-size: 14px">
-              <span style="opacity: 0.9">视频监控 / </span>
-              <span style="opacity: 0.7">奖惩播放 / </span>
-              <span style="opacity: 0.7">典型案例播放</span>
+              <span :style="{opacity:videoIndex==0? 0.9:0.7,cursor:'pointer'}" @click="handleVideoType(0)">视频监控 / </span>
+              <span :style="{opacity:videoIndex==1? 0.9:0.7,cursor:'pointer'}" @click="handleVideoType(1)">奖惩播放 / </span>
+              <span :style="{opacity:videoIndex==2? 0.9:0.7,cursor:'pointer'}" @click="handleVideoType(2)">典型案例播放</span>
             </div>
             <div style="display: flex; align-items: center; margin-bottom: 28px">
               <span>危险点视频覆盖率</span>
@@ -93,14 +93,12 @@ export default {
       listData: [1, 2, 3, 4,5,6,7,8],
       rate: 0,
       points: [],
+      videoIndex: 0,
       flvPlayer: null,
+      videoUrl: ''
     }
   },
   mounted () {
-    let videoElement = document.getElementById('videoElement')
-    this.flvPlayer.attachMediaElement(videoElement)
-    this.flvPlayer.load()
-    this.flvPlayer.play()
     this.$nextTick(() => {
       this.getData()
       // this.initChart()
@@ -115,6 +113,53 @@ export default {
     this.flvPlayer.player = null
   },
   methods: {
+    handleVideoType(val){
+      this.videoIndex = val
+      if(val==0){
+        this.videoUrl=''
+      }else if(val==1){
+        this.request({
+        url: '/hx/securityManagement/getVideoByType',
+        params:{
+          type:'1'
+        }     
+      }).then(res=>{
+        this.videoUrl = res.msg
+        })
+        }else{
+          this.request({
+          url: '/hx/securityManagement/getVideoByType',
+          params:{
+            type:'2'
+          }     
+        }).then(res=>{
+          this.videoUrl = res.msg
+        })
+      }
+    },
+    setVideoUrl(videoUrl){
+       if (flvjs.isSupported()) {
+            this.flvPlayer = flvjs.createPlayer(
+              {
+                type: 'flv', // 媒体类型 flv 或 mp4
+                isLive: true, // 是否为直播流
+                fluid: true,
+                // hasAudio: true, // 是否开启声音
+                stashInitialSize: 128, // 减少首桢显示等待时长
+                url: videoUrl,
+              },
+              {
+                enableStashBuffer: false,
+                fixAudioTimestampGap: false,
+                isLive: true,
+              }
+            )
+          }
+          let videoElement = document.getElementById('videoElement')
+          this.flvPlayer.attachMediaElement(videoElement)
+          this.flvPlayer.load()
+          this.flvPlayer.play()
+    },
     getData () {
       this.request({
         url: '/hx/securityManagement/dangerousMap',
@@ -125,6 +170,10 @@ export default {
           this.rate = res.data.rate;
           this.listData = Array(this.points.length*2).fill(0);
           this.$refs.seamlessScroll.reset();
+          if(this.points.length){
+          //  this.setVideoUrl(this.rate[0].rtmpAddress)
+           this.setVideoUrl('http://192.168.0.151:81/stream/live/classic_cases_video.flv')
+          }
         }
       })
     },
@@ -301,23 +350,12 @@ export default {
     },
   },
   created () {
-    if (flvjs.isSupported()) {
-      this.flvPlayer = flvjs.createPlayer(
-        {
-          type: 'flv', // 媒体类型 flv 或 mp4
-          isLive: true, // 是否为直播流
-          fluid: true,
-          // hasAudio: true, // 是否开启声音
-          stashInitialSize: 128, // 减少首桢显示等待时长
-          url: 'http://192.168.0.151:81/stream/live/livestream.flv',
-        },
-        {
-          enableStashBuffer: false,
-          fixAudioTimestampGap: false,
-          isLive: true,
-        }
-      )
-    }
+    this.$bus.on("getTarget", res => {
+       console.log(this.videoIndex);
+      this.videoIndex = 0
+      this.setVideoUrl(res.rtmpAddress)
+      console.log(this.videoIndex);
+    });
   },
 }
 </script>