fix: 相机回放添加全屏按钮

src/views/datamanager/playback/components/NvrCameraView.vue

@@ -17,11 +17,12 @@
         :clearable="false"
         @change="judgeDate"
       />
-      <el-button style="margin-left: 10px" type="primary" @click="handleNvrUrl(null)"
-        >查看回放</el-button
-      >
+      <el-button style="margin-left: 10px" type="primary" @click="handleNvrUrl(null)">查看回放</el-button>
+      <el-icon class="el-input__icon fullscreen-icon" :size="20" @click="enterFullscreen">
+        <FullscreenOutlined style="position: absolute; right: 0" />
+      </el-icon>
     </div>
-    <div style="width: 960px; height: 540px">
+    <div id="nvr-video" style="width: 960px; height: 540px">
       <LiveVideo v-if="videoUrl" :url="videoUrl" @time-update="handleTimeUpdate" />
     </div>
     <div class="nvr-slider" v-if="confirmDate">
@@ -36,11 +37,7 @@
     </div>
     <div class="nvr-setting-bar">
       <NvrVioCheckbox :available="confirmDate" :camera-id="cameraId" @check-tags="handleVioTags" />
-      <NvrTimeSelect
-        ref="nvrTimeSelectRef"
-        @set-Time="handleSetTime"
-        @download-nvr="handleDownloadNvr"
-      />
+      <NvrTimeSelect ref="nvrTimeSelectRef" @set-Time="handleSetTime" @download-nvr="handleDownloadNvr" />
     </div>
     <a ref="downloadRef" style="display: none" href="" download />
   </div>
@@ -57,6 +54,7 @@
   import { dayjs, ElMessage } from 'element-plus';
   import { computed } from 'vue';
   import { InfoFilled, Calendar } from '@element-plus/icons-vue';
+  import { FullscreenOutlined } from '@vicons/antd';
   import {
     getReplayNvr,
     GetReplayNvrBody,
@@ -66,11 +64,15 @@
     getNvrDownloadUrl,
   } from '@/api/datamanagement/playback';
   import useCameraAlgoStore from '@/views/cameras/preview/store/useCameraAlgoStore';
+  import { useFullscreen } from 'vue-hooks-plus';
 
   const cameraAlgoStore = useCameraAlgoStore();
   defineProps<{ cameraId: number }>();
   const cameraDetailStore = useCameraDetailStore();
 
+  // 全屏参数和方法获取
+  const [, { enterFullscreen }] = useFullscreen(() => document.getElementById('nvr-video'));
+
   // 日期范围
   const dateRange = ref();
   // 确认查看回放
@@ -213,9 +215,7 @@
   const handleTimeUpdate = (playSeconds: number) => {
     if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
       //计算时刻帧进给的间隔
-      const minuteLen = Math.ceil(
-        (dateRange.value[1].valueOf() - dateRange.value[0].valueOf()) / (1000 * 60),
-      );
+      const minuteLen = Math.ceil((dateRange.value[1].valueOf() - dateRange.value[0].valueOf()) / (1000 * 60));
       const durMinute = minuteLen > 10 ? 60 : 6;
       //时刻帧递进
       if (secondMargin.value !== undefined) {
@@ -287,6 +287,7 @@
   }
 
   .nvr-date-picker {
+    position: relative;
     margin: 10px 0 10px 20px;
   }
 
@@ -299,4 +300,11 @@
     display: flex;
     justify-content: center;
   }
+
+  .fullscreen-icon {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 </style>