门口门禁-地图-摄像头点位播放功能

src/views/map/dialog/mkGateMachine.vue

@@ -73,7 +73,7 @@
         <td width="80px">{{ item.CAR_IN - item.CAR_OUT}}</td>
       </tr>
     </table>
-    <table class="table-ui">
+    <table class="table-ui" v-if= "type != 'CAMERA'">
     <tr v-if="carRecordAllList != null && carRecordAllList.length > 0">
         <td colspan="6">
           <table class="table-ui">
@@ -126,7 +126,7 @@
       </tr>
     </table>
     <div class="video">
-      <video-play v-if="type === 'CAMERA' && info.GATEVIDEO_ID" :id="info.GATEVIDEO_ID" :type="type" :gangkou="gangkou"/>
+      <video-play-gate v-if="type === 'CAMERA' && GATE_VIDEO_ID" :id="GATE_VIDEO_ID" :type="type" :gangkou="gangkou"/>
     </div>
   </div>
 </template>
@@ -135,8 +135,9 @@
 import { requestFN } from '@/utils/request'
 import moment from 'moment'
 import videoPlay from './video_play.vue'
+import videoPlayGate from './video_play_gate.vue'
 export default {
-  components: { videoPlay },
+  components: { videoPlay, videoPlayGate },
   props: {
     id: {
       type: String,
@@ -221,6 +222,11 @@ export default {
             }
           }
         }
+        if (this.type == 'CAMERA') {
+          Object.assign(this.info, data.pd.info)
+          this.info.CODE = data.pd.video.EXTERNALINDEXCODE
+          this.info.VIDEONAME = data.pd.video.NAME
+        }
 
         this.$forceUpdate()
       }).catch((e) => {

src/views/map/dialog/video_play_gate.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div id="aLiVideoPlayer" class="prism-player"/>
+  </div>
+</template>
+
+<script>
+import { requestFN } from '@/utils/request'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    type: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    gangkou: {
+      type: String,
+      default: ''
+    },
+    requestUrl: {
+      type: String,
+      default: '/mkmjGateVideo/goAllVideo'
+    }
+  },
+  data() {
+    return {
+      hls: false,
+      player: null,
+      url: ''
+    }
+  },
+  beforeDestroy() {
+    this.player && this.player.dispose()
+  },
+  created() {
+    this.showVideo()
+  },
+  methods: {
+    showVideo() {
+      requestFN(
+        this.requestUrl,
+        {
+          GATE_VIDEO_ID: this.id
+        }
+      ).then((data) => {
+        // for (let i = 0; i < data.videoList.length; i++) {
+        // if (data.videoList[0].HLSVIDEOURL) {
+        //   this.url = data.videoList[0].GBSVIDEOURL
+        //   this.hls = true
+        // } else {
+        this.hls = false
+        this.$nextTick(() => {
+          // eslint-disable-next-line no-undef
+          this.player = new Aliplayer({
+            'id': 'aLiVideoPlayer',
+            'source': data.video.HLSVIDEOURL.data.url,
+            'width': '100%',
+            'height': '500px',
+            'autoplay': true,
+            'isLive': true,
+            'rePlay': false,
+            'playsinline': true,
+            'preload': true,
+            'controlBarVisibility': 'hover',
+            'useH5Prism': true
+          }, function(player) {
+            console.log('The player is created')
+          })
+        })
+        // }
+        // }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/map/index.vue

@@ -2132,7 +2132,7 @@ export default {
               point.position.y = +varList[i].LATITUDE
               point.dialog_width = dialog_width
               point.MAP_POINT_NAME = varList[i].MAP_POINT_NAME
-              point.GATE_VIDEO_ID = varList[i].VIDEO_RESOURCE_ID
+              point.GATE_VIDEO_ID = varList[i].GATE_VIDEO_ID
               // 曹妃甸使用
               point.gangkou = this.gangkouActive
               // 闸机名称