|
@@ -3,7 +3,6 @@
|
|
|
<div class="head">
|
|
<div class="head">
|
|
|
<div class="line"></div>
|
|
<div class="line"></div>
|
|
|
<div class="title">视频下载</div>
|
|
<div class="title">视频下载</div>
|
|
|
- <span class="tips">(请先拖动进度条,再点击选取时间按钮)</span>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="timeselect">
|
|
<div class="timeselect">
|
|
@@ -16,13 +15,14 @@
|
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
:clearable="true"
|
|
:clearable="true"
|
|
|
- placeholder="拖动进度条选择时间"
|
|
|
|
|
|
|
+ placeholder="点击选择时间"
|
|
|
|
|
+ @change="changeStart"
|
|
|
/>
|
|
/>
|
|
|
<!-- <el-input
|
|
<!-- <el-input
|
|
|
v-model="startTime"
|
|
v-model="startTime"
|
|
|
style="width: 160px; margin: 0 8px"
|
|
style="width: 160px; margin: 0 8px"
|
|
|
disabled
|
|
disabled
|
|
|
- placeholder="拖动进度条选择时间"
|
|
|
|
|
|
|
+ placeholder="点击选择时间"
|
|
|
/> -->
|
|
/> -->
|
|
|
<el-tooltip
|
|
<el-tooltip
|
|
|
class="picker-tooltip"
|
|
class="picker-tooltip"
|
|
@@ -49,14 +49,16 @@
|
|
|
type="datetime"
|
|
type="datetime"
|
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
|
|
+ :disabled="!startTime || !startTime.length"
|
|
|
:clearable="true"
|
|
:clearable="true"
|
|
|
- placeholder="拖动进度条选择时间"
|
|
|
|
|
|
|
+ placeholder="点击选择时间"
|
|
|
|
|
+ @change="judgeDate"
|
|
|
/>
|
|
/>
|
|
|
<!-- <el-input
|
|
<!-- <el-input
|
|
|
v-model="endTime"
|
|
v-model="endTime"
|
|
|
style="width: 160px; margin: 0 8px"
|
|
style="width: 160px; margin: 0 8px"
|
|
|
disabled
|
|
disabled
|
|
|
- placeholder="拖动进度条选择时间"
|
|
|
|
|
|
|
+ placeholder="点击选择时间"
|
|
|
/> -->
|
|
/> -->
|
|
|
<el-tooltip
|
|
<el-tooltip
|
|
|
class="picker-tooltip"
|
|
class="picker-tooltip"
|
|
@@ -79,7 +81,7 @@
|
|
|
<el-button
|
|
<el-button
|
|
|
type="primary"
|
|
type="primary"
|
|
|
:loading="isCallingDownload"
|
|
:loading="isCallingDownload"
|
|
|
- :disabled="!startTime.length || !endTime.length"
|
|
|
|
|
|
|
+ :disabled="!startTime || !endTime || !startTime.length || !endTime.length"
|
|
|
@click="nvrDownload"
|
|
@click="nvrDownload"
|
|
|
>下 载</el-button
|
|
>下 载</el-button
|
|
|
>
|
|
>
|
|
@@ -89,9 +91,10 @@
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { ref } from 'vue';
|
|
import { ref } from 'vue';
|
|
|
- import { ElInput } from 'element-plus';
|
|
|
|
|
|
|
+ // import { ElInput } from 'element-plus';
|
|
|
import { Refresh } from '@element-plus/icons-vue';
|
|
import { Refresh } from '@element-plus/icons-vue';
|
|
|
import { ElIcon, ElTooltip } from 'element-plus';
|
|
import { ElIcon, ElTooltip } from 'element-plus';
|
|
|
|
|
+ import { ElMessage } from 'element-plus';
|
|
|
|
|
|
|
|
const isCallingDownload = ref(false);
|
|
const isCallingDownload = ref(false);
|
|
|
const startTime = ref('');
|
|
const startTime = ref('');
|
|
@@ -106,11 +109,33 @@
|
|
|
const nvrDownload = () => {
|
|
const nvrDownload = () => {
|
|
|
emit('downloadNvr');
|
|
emit('downloadNvr');
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
|
|
+ const changeStart = (val) => {
|
|
|
|
|
+ if (!val) {
|
|
|
|
|
+ endTime.value = '';
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
const clearTime = () => {
|
|
const clearTime = () => {
|
|
|
startTime.value = '';
|
|
startTime.value = '';
|
|
|
endTime.value = '';
|
|
endTime.value = '';
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+ const judgeDate = (value) => {
|
|
|
|
|
+ if (!endTime.value) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ const startTimeStamp = new Date(startTime.value).getTime();
|
|
|
|
|
+ const endTimeStamp = new Date(value).getTime();
|
|
|
|
|
+ if (endTimeStamp <= startTimeStamp) {
|
|
|
|
|
+ ElMessage.warning('结束时间不能小于开始时间');
|
|
|
|
|
+ endTime.value = '';
|
|
|
|
|
+ }
|
|
|
|
|
+ if (endTimeStamp - startTimeStamp > 10 * 60 * 1000) {
|
|
|
|
|
+ ElMessage.warning('视频下载时间不能超过10分钟');
|
|
|
|
|
+ endTime.value = '';
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
defineExpose({ isCallingDownload, startTime, endTime, clearTime });
|
|
defineExpose({ isCallingDownload, startTime, endTime, clearTime });
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|