fix: nvr页面切出报错修复&回放下载按钮首次点击失效修复

src/views/datamanager/playback/Playback.vue

@@ -21,7 +21,7 @@
 <script setup lang="ts">
   import NvrCameraView from './components/NvrCameraView.vue';
   import CameraTreeCom from '@/views/cameras/preview/components/CameraTree/CameraTree.vue';
-  import { onUnmounted, ref, watch } from 'vue';
+  import { onUnmounted, onBeforeUnmount, ref, watch } from 'vue';
   import useCameraDetail from '@/views/cameras/preview/store/useCameraDetailStore';
   import usePresetListStore from '@/views/cameras/preview/store/usePresetListStore';
   import useFenceStore from '@/views/cameras/preview/store/useFenceStore';
@@ -131,6 +131,12 @@
     });
   });
 
+  onBeforeUnmount(() => {
+    if (nvrCameraViewRef.value) {
+      nvrCameraViewRef.value.clearNvrUrl();
+    }
+  });
+
   onUnmounted(() => {
     /** 离开页面要清理掉所有的store */
     cameraDetailStore.clear();
@@ -138,7 +144,6 @@
     fenceStore.clear();
     presetListStore.clear();
     closeInterval();
-    nvrCameraViewRef.value.clearNvrUrl();
   });
 
   function getCameraDetail(tree: CameraTree[], cameraId: number): CameraTree | null {

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

@@ -42,7 +42,7 @@
         @download-nvr="handleDownloadNvr"
       />
     </div>
-    <a ref="downloadRef" style="display: none" :href="downloadUrl" download />
+    <a ref="downloadRef" style="display: none" href="" download />
   </div>
 </template>
 
@@ -85,7 +85,6 @@
   const nvrTimeSelectRef = ref();
   // 下载
   const downloadRef = ref();
-  const downloadUrl = ref();
 
   const judgeDate = (date: Date[]) => {
     confirmDate.value = false;
@@ -95,9 +94,9 @@
     if (date && date.length === 2) {
       const startTime = new Date(date[0]);
       const endTime = new Date(date[1]);
-      if ((endTime.getTime() - startTime.getTime()) / (1000 * 60) < 1) {
+      if ((endTime.getTime() - startTime.getTime()) / 1000 < 1) {
         ElMessage({
-          message: `选择回放时间范围需大于1分钟`,
+          message: `选择回放时间范围需大于1秒`,
           type: 'error',
         });
         dateRange.value = undefined;
@@ -222,14 +221,16 @@
     ) {
       return;
     }
+    nvrTimeSelectRef.value.isCallingDownload = true;
     const nvrParams: GetReplayNvrBody = {
       cameraId: cameraDetailStore.cameraId,
       startTime: dayjs(nvrTimeSelectRef.value.startTime).format('YYYY-MM-DD HH:mm:ss'),
       endTime: dayjs(nvrTimeSelectRef.value.endTime).format('YYYY-MM-DD HH:mm:ss'),
     };
     getNvrDownloadUrl(nvrParams).then((res) => {
-      downloadUrl.value = res;
+      downloadRef.value.href = res;
       downloadRef.value.click();
+      nvrTimeSelectRef.value.isCallingDownload = false;
     });
   };
 

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

@@ -60,6 +60,7 @@
 
       <el-button
         type="primary"
+        :loading="isCallingDownload"
         :disabled="!startTime.length || !endTime.length"
         @click="nvrDownload"
         >下 载</el-button
@@ -74,6 +75,7 @@
   import { Refresh } from '@element-plus/icons-vue';
   import { ElIcon, ElTooltip } from 'element-plus';
 
+  const isCallingDownload = ref(false);
   const startTime = ref('');
   const endTime = ref('');
 
@@ -91,7 +93,7 @@
     endTime.value = '';
   };
 
-  defineExpose({ startTime, endTime, clearTime });
+  defineExpose({ isCallingDownload, startTime, endTime, clearTime });
 </script>
 
 <style scoped lang="scss">