修改首页bug

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());
   }

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() {

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) {

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;

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();