feat：新增视频操作

src/components/CoreVideo/index.vue

@@ -27,7 +27,7 @@
       </li>
     </ul>
   </div>
-  <video-dialog v-model="videoShow" :src="src" />
+  <video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
 </template>
 
 <script setup>
@@ -38,10 +38,12 @@
 
   let list = ref([])
   let src = ref('')
+  let cameraIndexCode = ref('')
   let videoShow = ref(false)
 
   const handleItem = (item) => {
     src.value = item.hlsUrl
+    cameraIndexCode.value = item.cameraIndexCode
     videoShow.value = true
   }
 

src/components/Header/index.vue

@@ -175,7 +175,6 @@
         isSkip.value = false
         isBack.value = true
         let res = await getSpotListApi()
-        console.log(res, '============')
         navLeft.value = res.data
         current.value = 0
         title.value = navLeft.value[current.value].name
@@ -196,6 +195,8 @@
       case '/monitor':
         title.value = '监控大屏'
         isSkip.value = false
+        current.vlaue = ''
+        isBack.value = true
         let res1 = await getSpotListApi()
         navLeft.value = [
           {
@@ -204,8 +205,6 @@
           },
           ...res1.data
         ]
-        current.vlaue = ''
-        isBack.value = true
         break
       case '/sceneTesting':
         title.value = '三峡之巅-安全检测'

src/components/VideoDialog/index.vue

@@ -1,30 +1,65 @@
 <template>
   <div class="dialog">
-    <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
-      <video
-        v-if="src"
-        class="video"
-        ref="videoRef"
-        muted
-        autoplay
-        controls
-        style="object-fit: cover"
-      >
-        <source src="" type="application/x-mpegURL" />
-      </video>
+    <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false" z-index="9999">
+      <div v-if="src">
+        <video class="video" ref="videoRef" muted autoplay controls style="object-fit: cover">
+          <source src="" type="application/x-mpegURL" />
+        </video>
+        <div class="action-box">
+          <!-- <div class="action-item">
+            <img src="@/assets/images/plus.png" alt="" />
+            <span>变倍</span>
+            <img src="@/assets/images/minus.png" alt="" />
+          </div> -->
+          <div class="action-item">
+            <img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
+            <span>聚焦</span>
+            <img src="@/assets/images/minus.png" title="焦距变小" @click="handleAction(Z00M_OUT)" />
+          </div>
+          <div class="action-item">
+            <img src="@/assets/images/up.png" title="上转" @click="handleAction(UP)" />
+            <img src="@/assets/images/down.png" title="下转" @click="handleAction(DOWN)" />
+            <img
+              class="pause"
+              src="@/assets/images/pause.png"
+              title="停止操作"
+              @click="handleAction(STOP)"
+            />
+            <img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
+            <img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
+          </div>
+        </div>
+      </div>
       <p v-else class="none">暂无信号</p>
-      <img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
+      <img class="close" src="@/assets/images/close.png" @click="handleClose" />
+      <div></div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
   import Hls from 'hls.js'
+  import { ElMessage } from 'element-plus'
+
+  import { postVideoControlApi } from '@/api/monitor'
+
+  const Z00M_IN = 'ZOOM_IN' // 焦距变大
+  const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+  const ACTION = '0'
+  const UP = 'UP' // 上转
+  const DOWN = 'DOWN' // 下转
+  const LEFT = 'LEFT' // 左转
+  const RIGHT = 'RIGHT' // 右转
+  const STOP = 'STOP' // 停止操作
 
   const props = defineProps({
     src: {
       type: String,
       default: ''
+    },
+    cameraIndexCode: {
+      type: String,
+      default: ''
     }
   })
 
@@ -45,6 +80,25 @@
     }
   )
 
+  const handleAction = async (e) => {
+    if (e == STOP) {
+      ACTION = '1'
+    } else {
+      ACTION = '0'
+    }
+    await postVideoControlApi({
+      command: e,
+      action: ACTION,
+      cameraIndexCode: props.cameraIndexCode
+    })
+    ElMessage({
+      message: '操作成功',
+      type: 'success'
+    })
+  }
+  const handleClose = () => {
+    modelValue.value = false
+  }
   const init = () => {
     const hls = new Hls({
       maxBufferLength: 10, // 最大缓冲长度（秒）
@@ -62,6 +116,36 @@
 <style scoped lang="scss">
   .dialog {
     z-index: 9999;
+    .action {
+      &-box {
+        margin-top: vh(16);
+        gap: vw(20);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      &-item {
+        padding: vw(16);
+        display: flex;
+        align-items: center;
+        background: #0a4190;
+        border-radius: vw(8);
+        > img {
+          cursor: pointer;
+          width: vw(34);
+          height: auto;
+        }
+        > span {
+          margin: 0 vw(16);
+          font-weight: 400;
+          font-size: vw(16);
+          color: #ffffff;
+        }
+        .pause {
+          margin: 0 vw(10);
+        }
+      }
+    }
     .none {
       position: absolute;
       left: 50%;
@@ -75,7 +159,6 @@
     :deep(.el-dialog) {
       position: relative;
       width: vw(1660);
-      height: vw(980);
       padding: vw(40) vw(30) vw(30) vw(30);
       background-image: url('@/assets/images/one-video-bg.png');
       background-size: 100% 100%;