|
|
@@ -2,7 +2,7 @@
|
|
|
<div class="nvr-camera-view">
|
|
|
<div class="nvr-tips">
|
|
|
<el-icon size="18" color="#409eff" style="margin: 11px 8px 11px 16px"><InfoFilled /></el-icon>
|
|
|
- 可以回看和下载三个月内的视频回放数据；默认显示直播画面</div
|
|
|
+ 默认播放当前实时视频画面，可选择具体日期和时间进行回看，最长支持90天内视频内容回看</div
|
|
|
>
|
|
|
<div class="nvr-date-picker">
|
|
|
<el-date-picker
|
|
|
@@ -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"
|
|
|
@@ -87,29 +86,27 @@
|
|
|
const downloadUrl = ref();
|
|
|
|
|
|
const judgeDate = (date: Date[]) => {
|
|
|
- // 判断日期范围大于半小时小于三个月
|
|
|
+ confirmDate.value = false;
|
|
|
+ nvrUrl.value = undefined;
|
|
|
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) {
|
|
|
ElMessage({
|
|
|
- message: `选择回放时间范围不小于1分钟`,
|
|
|
+ message: `选择回放时间范围需大于1分钟`,
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ dateRange.value = undefined;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (endTime > new Date()) {
|
|
|
+ ElMessage({
|
|
|
+ message: `结束时间不能在当前时间之后`,
|
|
|
type: 'error',
|
|
|
});
|
|
|
dateRange.value = undefined;
|
|
|
return;
|
|
|
}
|
|
|
- // if (startTime.diff(endTime, 'month') > 3) {
|
|
|
- // ElMessage({
|
|
|
- // message: `选择回放时间范围不大于三个月`,
|
|
|
- // type: 'error',
|
|
|
- // });
|
|
|
- // dateRange.value = undefined;
|
|
|
- // return;
|
|
|
- // }
|
|
|
-
|
|
|
- confirmDate.value = false;
|
|
|
- nvrUrl.value = undefined;
|
|
|
}
|
|
|
};
|
|
|
const handleNvrUrl = (nowTime?: Date | null) => {
|
|
|
@@ -126,13 +123,25 @@
|
|
|
};
|
|
|
confirmDate.value = true;
|
|
|
if (nowTime) {
|
|
|
- nvrParams.startTime = dayjs(nowTime).format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ const nowTimeMin = new Date(nowTime.setSeconds(0));
|
|
|
+ if (nowTimeMin < dateRange.value[0]) {
|
|
|
+ nvrParams.startTime = dayjs(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ } else {
|
|
|
+ nvrParams.startTime = dayjs(nowTimeMin).format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ }
|
|
|
}
|
|
|
getReplayNvr(nvrParams).then((res) => {
|
|
|
nvrUrl.value = res.data;
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+ const clearNvrUrl = () => {
|
|
|
+ nvrUrl.value = undefined;
|
|
|
+ confirmDate.value = false;
|
|
|
+ dateRange.value = undefined;
|
|
|
+ nvrTimeSelectRef.value.clearTime();
|
|
|
+ };
|
|
|
+
|
|
|
const handleVioTags = (tags: string[]) => {
|
|
|
if (tags.length === 0) {
|
|
|
violationsList.value = [];
|
|
|
@@ -153,30 +162,33 @@
|
|
|
if (!confirmDate.value) {
|
|
|
return;
|
|
|
}
|
|
|
+ const nowTimeMin = new Date(nvrSliderRef.value.onTime.setSeconds(0));
|
|
|
if (isStart) {
|
|
|
const end = nvrTimeSelectRef.value.endTime;
|
|
|
- if (end.length > 0 && new Date(end) <= new Date(nvrSliderRef.value.onTime)) {
|
|
|
+ if (end.length > 0 && new Date(end) <= nowTimeMin) {
|
|
|
ElMessage({
|
|
|
message: `结束时间不早于开始时间`,
|
|
|
type: 'error',
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
- nvrTimeSelectRef.value.startTime = dayjs(nvrSliderRef.value.onTime).format(
|
|
|
- 'YYYY-MM-DD HH:mm:ss',
|
|
|
- );
|
|
|
+ nvrTimeSelectRef.value.startTime = dayjs(
|
|
|
+ nowTimeMin < dateRange.value[0] ? dateRange.value[0] : nowTimeMin,
|
|
|
+ ).format('YYYY-MM-DD HH:mm:ss');
|
|
|
} else {
|
|
|
const start = nvrTimeSelectRef.value.startTime;
|
|
|
- if (start.length > 0 && new Date(start) >= new Date(nvrSliderRef.value.onTime)) {
|
|
|
+ if (start.length > 0 && new Date(start) >= nowTimeMin) {
|
|
|
ElMessage({
|
|
|
message: `开始时间不晚于结束时间`,
|
|
|
type: 'error',
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
- nvrTimeSelectRef.value.endTime = dayjs(nvrSliderRef.value.onTime).format(
|
|
|
- 'YYYY-MM-DD HH:mm:ss',
|
|
|
- );
|
|
|
+ nvrTimeSelectRef.value.endTime = dayjs(
|
|
|
+ new Date(nowTimeMin.setMinutes(nowTimeMin.getMinutes() + 1)) > dateRange.value[1]
|
|
|
+ ? dateRange.value[1]
|
|
|
+ : nowTimeMin,
|
|
|
+ ).format('YYYY-MM-DD HH:mm:ss');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
@@ -200,14 +212,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);
|
|
|
});
|
|
|
};
|
|
|
|
|
|
@@ -223,6 +227,10 @@
|
|
|
? cameraDetailStore.detail?.pushstreamIp
|
|
|
: '';
|
|
|
});
|
|
|
+
|
|
|
+ defineExpose({
|
|
|
+ clearNvrUrl,
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
航飞 楼
