视频切换的问题

src/utils/inject.js

@@ -78,7 +78,7 @@ Vue.prototype.$storeBoard = Vue.observable({
   search: {}
 })
 Vue.component("HlsPlayer", {
-  render: (h) => h('div', {style: {width: '100%', height: '100%'}, on: {dbclick: () => this.player.play()}}),
+  render: (h) => h('div', {style: {width: '100%', height: '100%'}}),
   props: {
     id: {default: ""},
     url: {default: "https://open.ys7.com/v3/openlive/155715496_1_1.m3u8?expire=1747359002&id=712960386311127040&t=c9c6ad362940b1fb4ea7a736cec78980aa9ad1d27d6e3eddf75788c0564e9d7b&ev=100"}
@@ -88,22 +88,29 @@ Vue.component("HlsPlayer", {
       player: null
     }
   },
-  mounted() {
-    const {EzuikitFlv} = window
-    if (EzuikitFlv && this.url) {
-      const {id} = this.$props
-      this.$el.id = id
-      this.player = new EzuikitFlv({
-        container: id,
-        url: this.url,
-        decoder: "/presource/datascreen/js/ezuikit-flv/decoder.js"
-      })
-      this.player.play()
-      this.$el.addEventListener('dblclick', () => {
-        this.player.fullScreen()
-      })
+  methods: {
+    play(url) {
+      const {EzuikitFlv} = window
+      if (EzuikitFlv && url && this.$el) {
+        const {id} = this.$props
+        this.$el.id = id
+        this.player = new EzuikitFlv({container: id, url, decoder: "/presource/datascreen/js/ezuikit-flv/decoder.js"})
+        this.player.play()
+        this.$el.onclick = () => this.player.fullScreen()
+      }
     }
   },
+  watch: {
+    url: {
+      handler(url, old) {
+        if (old) this.player?.destroy()
+        this.play(url)
+      }
+    }
+  },
+  mounted() {
+    this.play(this.url)
+  },
   beforeDestroy() {
     this.player?.destroy()
   }
@@ -162,7 +169,7 @@ Vue.component("scrollTable", {
     }
   },
   mounted() {
-     this.initScroll()
+    this.initScroll()
     // this.autoScroll()
   },
   beforeDestroy() {

src/views/AppStoresTable.vue

@@ -38,7 +38,7 @@ export default {
         ]
       },
       curI: 0,
-      curJ: 0
+      curJ: {},
     }
   },
   computed: {
@@ -47,6 +47,7 @@ export default {
       const list = []
       let group = []
       for (const e of v.stores) {
+        v.curJ[e.storeCode] = 0
         if (group.length < 4) {
           group.push(e)
         } else {
@@ -54,7 +55,9 @@ export default {
           group = [e]
         }
       }
-      if (group.length > 0) list.push(group.reverse())
+      if (group.length > 0) {
+        list.push(group.reverse())
+      }
       return list
     },
   },
@@ -157,14 +160,14 @@ export default {
 
 <template>
   <section class="AppStoresTable" @click="dialog=false">
-    <el-carousel indicator-position="outside" :height="height" :autoplay="search.changeWay==1" @change="v=>curI=(v||0)" :interval="60000">
+    <el-carousel indicator-position="outside" :height="height" :autoplay="search.changeWay==1" @change="v=>curI=(v||0)" :interval="60000" arrow="never">
       <el-carousel-item v-for="(group,i) in storeList" :key="i">
         <div class="layout">
           <div class="store" v-for="store in group" :key="store.storeCode">
             <div class="headerTitle" v-text="store.storeName" @click="gotoDetail(store)"/>
-            <el-carousel indicator-position="none" height="250px" @change="v=>curJ=(v||0)" :autoplay="false">
+            <el-carousel indicator-position="none" height="250px" @change="v=>curJ[store.storeCode]=(v||0)" :autoplay="false">
               <el-carousel-item v-for="(url,j) in store.camera" :key="[i,j].join('_')">
-                <hls-player v-if="`${i}_${j}`==`${curI}_${curJ}`" :id="`hls_player_${store.storeCode}_${i}_${j}`" :url="url"/>
+                <hls-player v-if="`${i}_${j}`==`${curI}_${curJ[store.storeCode]}`" :id="`hls_player_${store.storeCode}_${i}_${j}`" :url="url"/>
               </el-carousel-item>
             </el-carousel>
             <div class="subTitle" v-text="'品类销售情况'"/>