From d159d36c04624d23c1048b184dbdac5432e4318b Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Tue, 6 Feb 2024 11:21:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JiHeExpressway/components/Video/Video.vue      |  6 +++++-
 .../JiHeExpressway/components/Video/index.vue      |  7 ++++++-
 .../JiHeExpressway/components/Video/videoStream.js |  4 ++--
 .../components/Dialogs/TrafficIncidents/index.vue  | 14 +++++++++++++-
 .../Home/components/RoadAndEvents/utils/map.js     |  8 +++++---
 5 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Video/Video.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Video/Video.vue
index 801faa20..e496002a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Video/Video.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Video/Video.vue
@@ -19,11 +19,15 @@ export default {
     url: {
       type: String,
       default: null
+    },
+    rangeIndex: {
+      type: Number,
+      default: 0
     }
   },
   async mounted() {
     // const player = await openLiveVideo(this.$refs.videoContainerRef, { camId: this.camId, url: this.url, pileNum: this.pileNum })
-    const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url, pileNum: this.pileNum });
+    const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url, pileNum: this.pileNum, rangeIndex: this.rangeIndex });
 
     this.$once("hook:beforeDestroy", () => player?.destroy());
   }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue
index 03409082..a47c01f4 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue
@@ -13,7 +13,8 @@
       </div>
     </div>
     <Transition name="fade" mode="out-in">
-      <Video v-if="active === 'video'" class="video-stream" :pileNum="pileNum" :camId="camId" :url="url" />
+      <Video :rangeIndex="rangeIndex" v-if="active === 'video'" class="video-stream" :pileNum="pileNum" :camId="camId"
+        :url="url" />
       <img v-else src="./view.png" />
     </Transition>
   </div>
@@ -41,6 +42,10 @@ export default {
     url: {
       type: String,
       default: null
+    },
+    rangeIndex: {
+      type: Number,
+      default: 0
     }
   },
   data() {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js b/ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js
index d9d5f2cb..f97c7f7b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js
@@ -58,7 +58,7 @@ export async function openVideoStream(container, { camId, url } = {}) {
   return player;
 }
 
-async function getUrl({ camId, url, pileNum } = {}) {
+async function getUrl({ camId, url, pileNum, rangeIndex } = {}) {
   // return testFlvUrl;
   if (url) return url;
 
@@ -69,7 +69,7 @@ async function getUrl({ camId, url, pileNum } = {}) {
       return;
     }
 
-    camId = data[0].camId;
+    camId = data[rangeIndex || 0]?.camId;
   }
 
   if (camId) {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue
index d28cd585..2adbf40e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue
@@ -1,7 +1,10 @@
 <template>
   <Dialog v-model="obverseVisible" :title="dialogData._itemData && dialogData._itemData.title">
     <div class="TrafficIncidents">
-      <Video class="video-stream" :pileNum="dialogData.stakeMark" />
+      <div class="header">
+        <Video class="video-stream" :pileNum="dialogData.stakeMark" />
+        <Video class="video-stream" :pileNum="dialogData.stakeMark" :rangeIndex="1" />
+      </div>
 
       <Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" column="7" />
     </div>
@@ -139,6 +142,15 @@ export default {
     flex: 1.5;
   }
 
+  .header {
+    display: flex;
+    gap: 9px;
+
+    >div.video-stream {
+      height: 210px;
+    }
+  }
+
   .tabs {
     flex: 1;
     display: flex;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
index bbfe02d6..733756f5 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
@@ -39,8 +39,6 @@ export class MarkerCluster {
   constructor() {}
 
   getMap() {
-    if (this.map) return this.map;
-
     return (this.map = Vue.prototype.mapIns);
   }
 
@@ -52,7 +50,11 @@ export class MarkerCluster {
 
     this.data.push(...data);
 
-    if (!this.markerCluster) await this.setMarkerCluster();
+    if (
+      !this.markerCluster ||
+      this.markerCluster.getMap() !== Vue.prototype.mapIns
+    )
+      await this.setMarkerCluster();
 
     const map = this.getMap();