|
|
|
@ -38,12 +38,14 @@ const selectType = computed(() => { |
|
|
|
} |
|
|
|
}) |
|
|
|
function timestampToTargetFormat(timestamp: string) { |
|
|
|
|
|
|
|
// 将输入转换为数字类型的时间戳(毫秒) |
|
|
|
const ms = Number(timestamp); |
|
|
|
// 创建Date对象 |
|
|
|
const date = new Date(ms); |
|
|
|
// Date对象的toString()方法恰好返回目标格式 |
|
|
|
return date.toString(); |
|
|
|
|
|
|
|
return date; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -397,7 +399,7 @@ const confirm = () => { |
|
|
|
} |
|
|
|
|
|
|
|
const cancel = () => { |
|
|
|
value1.value = "" |
|
|
|
value1.value = timestampToTargetFormat(value.value) |
|
|
|
show.value = false |
|
|
|
} |
|
|
|
|
|
|
|
@ -418,7 +420,7 @@ const confirmStart = () => { |
|
|
|
} |
|
|
|
|
|
|
|
const cancelStart = () => { |
|
|
|
startValue1.value = "" |
|
|
|
startValue1.value = timestampToTargetFormat(value.value[0]) |
|
|
|
showStart.value = false |
|
|
|
} |
|
|
|
|
|
|
|
@ -430,7 +432,7 @@ const confirmEnd = () => { |
|
|
|
} |
|
|
|
|
|
|
|
const cancelEnd = () => { |
|
|
|
endValue1.value = "" |
|
|
|
endValue1.value = timestampToTargetFormat(value.value[1]) |
|
|
|
showEnd.value = false |
|
|
|
} |
|
|
|
|
|
|
|
@ -525,12 +527,62 @@ function calculateTimeDiff(startTimestamp: string, endTimestamp: string) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function singleShow(){ |
|
|
|
//console.log(value.value) |
|
|
|
if(value1.value==""){ |
|
|
|
value1.value = getTimestamp() |
|
|
|
} |
|
|
|
show.value = true |
|
|
|
} |
|
|
|
function rangeShowStart(){ |
|
|
|
|
|
|
|
if(startValue1.value==""){ |
|
|
|
startValue1.value = getTimestamp() |
|
|
|
} |
|
|
|
showStart.value = true |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function rangeShowEnd(){ |
|
|
|
if(endValue1.value==""){ |
|
|
|
endValue1.value = getTimestamp() |
|
|
|
} |
|
|
|
showEnd.value = true |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function getTimestamp() { |
|
|
|
|
|
|
|
const now = new Date(); |
|
|
|
let timestamp; |
|
|
|
|
|
|
|
switch(type.value) { |
|
|
|
case 'year-month': |
|
|
|
// 设置为当前年当前月1日0时0分1秒 |
|
|
|
const yearMonthDate = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 1); |
|
|
|
timestamp = yearMonthDate |
|
|
|
break; |
|
|
|
case 'date': |
|
|
|
// 设置为当前年当前月当前日0时0分1秒 |
|
|
|
const dateDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 1); |
|
|
|
timestamp = dateDate |
|
|
|
break; |
|
|
|
case 'datetime': |
|
|
|
// 返回当前时刻的时间戳 |
|
|
|
timestamp = now |
|
|
|
break; |
|
|
|
default: |
|
|
|
throw new Error('参数必须是"year-month"、"date"或"datetime"之一'); |
|
|
|
} |
|
|
|
|
|
|
|
return timestamp; |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
<template> |
|
|
|
|
|
|
|
|
|
|
|
<el-drawer v-model="show" :with-header="false" direction="btt" :append-to-body="true"> |
|
|
|
<el-drawer v-model="show" :with-header="false" direction="btt" :append-to-body="true" size="37%"> |
|
|
|
<nut-date-picker v-if="selectType == 'single'" v-model="value1" :three-dimensional="false" @confirm="confirm" |
|
|
|
:min-date="min" @cancel="cancel" :type="type" :max-date="max" :formatter="formatter"></nut-date-picker> |
|
|
|
|
|
|
|
@ -540,13 +592,13 @@ function calculateTimeDiff(startTimestamp: string, endTimestamp: string) { |
|
|
|
|
|
|
|
</el-drawer> |
|
|
|
|
|
|
|
<el-drawer v-model="showStart" :with-header="false" direction="btt"> |
|
|
|
<el-drawer v-model="showStart" :with-header="false" direction="btt" size="37%"> |
|
|
|
|
|
|
|
<nut-date-picker v-if="selectType == 'range'" v-model="startValue1" :three-dimensional="false" |
|
|
|
@confirm="confirmStart" :min-date="min" @cancel="cancelStart" :type="type" :max-date="max" |
|
|
|
:formatter="formatter"></nut-date-picker> |
|
|
|
</el-drawer> |
|
|
|
<el-drawer v-model="showEnd" :with-header="false" direction="btt"> |
|
|
|
<el-drawer v-model="showEnd" :with-header="false" direction="btt" size="37%"> |
|
|
|
|
|
|
|
<nut-date-picker v-if="selectType == 'range'" v-model="endValue1" :three-dimensional="false" |
|
|
|
@confirm="confirmEnd" :min-date="min" @cancel="cancelEnd" :type="type" :max-date="max" |
|
|
|
@ -560,7 +612,7 @@ function calculateTimeDiff(startTimestamp: string, endTimestamp: string) { |
|
|
|
|
|
|
|
<div v-if="selectType == 'single'" |
|
|
|
style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 100%;height: 97%;border-radius: 5px;" |
|
|
|
@click="show = true"> |
|
|
|
@click="singleShow"> |
|
|
|
<el-text v-if="hasValue" class="wordColor">{{ valPrint(value, props.data.control.type, |
|
|
|
props.data.control.valueFormat) |
|
|
|
}}</el-text> |
|
|
|
@ -573,7 +625,7 @@ function calculateTimeDiff(startTimestamp: string, endTimestamp: string) { |
|
|
|
<!-- 区间 --> |
|
|
|
<div v-if="selectType == 'range'" |
|
|
|
style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;" |
|
|
|
@click="showStart = true"> |
|
|
|
@click="rangeShowStart"> |
|
|
|
<el-text v-if="hasValue1" class="wordColor">{{ formatStart |
|
|
|
}}</el-text> |
|
|
|
<el-text v-if="!hasValue1" class="wordColor1">{{ formatStart |
|
|
|
@ -587,7 +639,7 @@ function calculateTimeDiff(startTimestamp: string, endTimestamp: string) { |
|
|
|
|
|
|
|
<div v-if="selectType == 'range'" |
|
|
|
style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;" |
|
|
|
@click="showEnd = true"> |
|
|
|
@click="rangeShowEnd"> |
|
|
|
<el-text v-if="hasValue2" class="wordColor">{{ formatEnd |
|
|
|
}}</el-text> |
|
|
|
<el-text v-if="!hasValue2" class="wordColor1">{{formatEnd |
|
|
|
|