fix: nvr回放页面样式

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

@@ -21,13 +21,12 @@
         >查看回放</el-button
       >
     </div>
-    <div>
+    <div style="width: 960px; height: 540px">
       <LiveVideo v-if="videoUrl" :url="videoUrl" @time-update="handleTimeUpdate" />
     </div>
-    <div class="nvr-slider">
+    <div class="nvr-slider" v-if="confirmDate">
       <NvrSlider
         ref="nvrSliderRef"
-        v-if="confirmDate"
         :start-time="dateRange[0]"
         :end-time="dateRange[1]"
         :start-position="100"
@@ -99,15 +98,6 @@
         dateRange.value = undefined;
         return;
       }
-      // if (startTime.diff(endTime, 'month') > 3) {
-      //   ElMessage({
-      //     message: `选择回放时间范围不大于三个月`,
-      //     type: 'error',
-      //   });
-      //   dateRange.value = undefined;
-      //   return;
-      // }
-
       confirmDate.value = false;
       nvrUrl.value = undefined;
     }
@@ -200,14 +190,6 @@
     getNvrDownloadUrl(nvrParams).then((res) => {
       downloadUrl.value = res;
       downloadRef.value.click();
-
-      // const link = document.createElement('a');
-      // link.href = res;
-      // link.setAttribute('download', 'nvr.mp4');
-      // link.style.display = 'none';
-      // document.body.appendChild(link);
-      // link.click();
-      // document.body.removeChild(link);
     });
   };
 

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

@@ -58,7 +58,7 @@
 
   onMounted(() => {
     createTimeline(props.startTime, durationMins.value);
-
+    createViolationsLine([], props.startTime, props.endTime);
     sliderPosition.value = props.startPosition;
 
     watch([() => props.startTime, () => props.endTime], () => {

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

@@ -3,6 +3,7 @@
     <div class="head">
       <div class="line"></div>
       <div class="title">视频下载</div>
+      <span class="tips">（请先拖动进度条，再点击选取时间按钮）</span>
     </div>
 
     <div class="timeselect">
@@ -17,9 +18,12 @@
         <img
           @click="callSetTime(true)"
           style="cursor: pointer"
-          src="@\assets\icons\edit.png"
+          src="@\assets\icons\icon-picker.png"
           alt=""
         />
+        <el-icon class="icon-refresh" :size="18">
+          <Refresh />
+        </el-icon>
       </div>
       <div class="time-picker">
         结束时间：
@@ -32,12 +36,20 @@
         <img
           @click="callSetTime(false)"
           style="cursor: pointer"
-          src="@\assets\icons\edit.png"
+          src="@\assets\icons\icon-picker.png"
           alt=""
         />
+        <el-icon class="icon-refresh" :size="18">
+          <Refresh />
+        </el-icon>
       </div>
 
-      <el-button type="primary" @click="nvrDownload">下 载</el-button>
+      <el-button
+        type="primary"
+        :disabled="!startTime.length || !endTime.length"
+        @click="nvrDownload"
+        >下 载</el-button
+      >
     </div>
   </div>
 </template>
@@ -45,6 +57,8 @@
 <script setup lang="ts">
   import { ref } from 'vue';
   import { ElInput } from 'element-plus';
+  import { Refresh } from '@element-plus/icons-vue';
+  import { ElIcon } from 'element-plus';
 
   const startTime = ref('');
   const endTime = ref('');
@@ -90,15 +104,24 @@
         line-height: 20px;
         margin-left: 8px;
       }
+      .tips {
+        font-weight: 400;
+        font-size: 10px;
+        color: #909399;
+        line-height: 14px;
+      }
     }
     .timeselect {
       padding: 12px 22px 0 22px;
       .time-picker {
         margin-bottom: 12px;
-      }
-      img {
-        display: inline;
-        margin-left: 20px;
+        img {
+          display: inline;
+          margin-left: 20px;
+        }
+        .icon-refresh {
+          color: #1677ff;
+        }
       }
     }
   }