feat：完善首页功能

src/components/CoreVideo/index.vue

@@ -8,6 +8,7 @@
         :style="{ backgroundImage: `url(${index == 0 ? primary : error})` }"
         v-for="(item, index) in list"
         :key="index"
+        @click.shop="handleItem(item)"
       >
         <div>
           <p :class="[index % 2 === 0 ? 'item-title--primary' : 'item-title--error']">
@@ -15,11 +16,11 @@
           </p>
           <video
             class="item-img"
-            :ref="(el) => getRefs(el, item, index)"
+            :id="'video' + index"
             muted
             autoplay
-            controls
-            style="object-fit: fill"
+            :controls="false"
+            style="object-fit: cover"
           >
             <source src="" type="application/x-mpegURL" />
           </video>
@@ -27,6 +28,7 @@
       </li>
     </ul>
   </div>
+  <VideoDialog v-model="videoShow" :src="src" />
 </template>
 
 <script setup>
@@ -36,27 +38,39 @@
   import Hls from 'hls.js'
 
   let list = ref([])
+  let src = ref('')
+  let videoShow = ref(false)
 
-  const getRefs = async (el, item) => {
-    if (el) {
-      let res = await postRefreshApi({
-        businessVideoDisplayPosition: item.businessVideoDisplayPosition,
-        cameraIndexCode: item.cameraIndexCode
-      })
-      let hlsUrl = res.data.hlsUrl.replace('http://172.22.15.170:8050', 'http://36.138.38.16:6150')
-      const hls = new Hls()
-      hls.loadSource(hlsUrl)
-      hls.attachMedia(el)
-      hls.on(Hls.Events.MANIFEST_PARSED, () => {
-        el.play()
-      })
-    }
+  const handleItem = (item) => {
+    src.value = item.hlsUrl
+    videoShow.value = true
   }
+
   const getVideoList = async () => {
     let res = await getVideoListApi({
       businessVideoDisplayPosition: ''
     })
     list.value = res.data
+    nextTick(() => {
+      list.value.forEach(async (item, index) => {
+        var video = document.getElementById(`video${index}`)
+        let res1 = await postRefreshApi({
+          businessVideoDisplayPosition: item.businessVideoDisplayPosition,
+          cameraIndexCode: item.cameraIndexCode
+        })
+        let hlsUrl = res1.data.hlsUrl.replace(
+          'http://172.22.15.170:8050',
+          'http://36.138.38.16:6150'
+        )
+        item.hlsUrl = hlsUrl
+        const hls = new Hls()
+        hls.loadSource(hlsUrl)
+        hls.attachMedia(video)
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          video.play()
+        })
+      })
+    })
   }
   onMounted(() => {
     getVideoList()
@@ -128,6 +142,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        z-index: 999;
       }
       &-title--error {
         @extend .item-title;