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;

src/components/VideoDialog/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="dialog">
+    <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
+      <video class="video" ref="videoRef" muted autoplay controls style="object-fit: cover">
+        <source src="" type="application/x-mpegURL" />
+      </video>
+      <img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import Hls from 'hls.js'
+
+  const props = defineProps({
+    src: {
+      type: String,
+      default: ''
+    }
+  })
+
+  let modelValue = defineModel()
+  let videoRef = ref()
+
+  watch(
+    () => modelValue.value,
+    (val) => {
+      if (val) {
+        nextTick(() => {
+          init()
+        })
+      }
+    },
+    {
+      immediate: true
+    }
+  )
+
+  const init = () => {
+    const hls = new Hls()
+    hls.loadSource(props.src)
+    hls.attachMedia(videoRef.value)
+    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      videoRef.value.play()
+    })
+  }
+</script>
+
+<style scoped lang="scss">
+  .dialog {
+    z-index: 9999;
+    :deep(.el-dialog) {
+      width: vw(2540);
+      height: vh(900);
+      padding: 0;
+    }
+    :deep(.el-dialog__header) {
+      padding-bottom: 0 !important;
+    }
+    .video {
+      width: vw(2540);
+      height: vh(900);
+    }
+    .close {
+      cursor: pointer;
+      position: absolute;
+      right: vw(20);
+      top: vw(20);
+      width: vw(60);
+      z-index: 9999;
+    }
+  }
+</style>