From 95d447013e5d715aefe1e3cda5051f0450090b66 Mon Sep 17 00:00:00 2001
From: water_xu <x17149@gmail.com>
Date: Wed, 19 Jun 2024 09:36:41 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=A8=E5=8F=A3=E9=97=A8=E7=A6=81-=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE-=E6=91=84=E5=83=8F=E5=A4=B4=E7=82=B9=E4=BD=8D?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/map/dialog/mkGateMachine.vue   | 12 +++-
 src/views/map/dialog/video_play_gate.vue | 88 ++++++++++++++++++++++++
 src/views/map/index.vue                  |  2 +-
 3 files changed, 98 insertions(+), 4 deletions(-)
 create mode 100644 src/views/map/dialog/video_play_gate.vue

diff --git a/src/views/map/dialog/mkGateMachine.vue b/src/views/map/dialog/mkGateMachine.vue
index 8e8e1e7..f8f04ae 100644
--- a/src/views/map/dialog/mkGateMachine.vue
+++ b/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) => {
diff --git a/src/views/map/dialog/video_play_gate.vue b/src/views/map/dialog/video_play_gate.vue
new file mode 100644
index 0000000..8a2efd1
--- /dev/null
+++ b/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>
diff --git a/src/views/map/index.vue b/src/views/map/index.vue
index 97e887d..8edbe73 100644
--- a/src/views/map/index.vue
+++ b/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
               // 闸机名称