|
|
|
@ -5,6 +5,8 @@ |
|
|
|
--> |
|
|
|
<script lang='ts' setup> |
|
|
|
import dayJs from 'dayjs' |
|
|
|
import { ref, computed } from 'vue'; |
|
|
|
import { DatePicker } from '@nutui/nutui'; |
|
|
|
|
|
|
|
const props = withDefaults( |
|
|
|
defineProps<{ |
|
|
|
@ -38,13 +40,13 @@ const selectType = computed(() => { |
|
|
|
} |
|
|
|
}) |
|
|
|
function timestampToTargetFormat(timestamp: string) { |
|
|
|
|
|
|
|
|
|
|
|
// 将输入转换为数字类型的时间戳(毫秒) |
|
|
|
const ms = Number(timestamp); |
|
|
|
// 创建Date对象 |
|
|
|
const date = new Date(ms); |
|
|
|
// Date对象的toString()方法恰好返回目标格式 |
|
|
|
|
|
|
|
|
|
|
|
return date; |
|
|
|
} |
|
|
|
|
|
|
|
@ -195,14 +197,14 @@ const formatStart = computed(() => { |
|
|
|
//console.log(value.value[0]) |
|
|
|
let val = new Date(parseInt(value.value[0], 10)); |
|
|
|
let group = props.data.control.type |
|
|
|
let type= props.data.control.valueFormat |
|
|
|
let type = props.data.control.valueFormat |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* console.log(val) |
|
|
|
console.log(group) |
|
|
|
console.log(type) */ |
|
|
|
if (val&&value.value[0]&&value.value[0]!="") { |
|
|
|
if (val && value.value[0] && value.value[0] != "") { |
|
|
|
//console.log(111) |
|
|
|
hasValue1.value = true |
|
|
|
switch (group) { |
|
|
|
@ -277,14 +279,14 @@ const formatEnd = computed(() => { |
|
|
|
//console.log(value.value[1]) |
|
|
|
let val = new Date(parseInt(value.value[1], 10)); |
|
|
|
let group = props.data.control.type |
|
|
|
let type= props.data.control.valueFormat |
|
|
|
let type = props.data.control.valueFormat |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* console.log(val) |
|
|
|
console.log(group) |
|
|
|
console.log(type) */ |
|
|
|
if (val&&value.value[1]&&value.value[1]!="") { |
|
|
|
if (val && value.value[1] && value.value[1] != "") { |
|
|
|
//console.log(111) |
|
|
|
hasValue2.value = true |
|
|
|
switch (group) { |
|
|
|
@ -357,8 +359,7 @@ const formatEnd = computed(() => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { ref, computed } from 'vue'; |
|
|
|
import { DatePicker } from '@nutui/nutui'; |
|
|
|
|
|
|
|
|
|
|
|
const showPicker = ref(false); |
|
|
|
|
|
|
|
@ -492,90 +493,97 @@ const shichang = computed(() => { |
|
|
|
let end = value.value[1] |
|
|
|
console.log(start) |
|
|
|
console.log(end) |
|
|
|
let a = calculateTimeDiff(start,end) |
|
|
|
let a = calculateTimeDiff(start, end) |
|
|
|
return a |
|
|
|
}) |
|
|
|
function calculateTimeDiff(startTimestamp: string, endTimestamp: string) { |
|
|
|
// 解析时间戳为数字 |
|
|
|
const start = parseInt(startTimestamp, 10); |
|
|
|
const end = parseInt(endTimestamp, 10); |
|
|
|
|
|
|
|
// 计算时间差(毫秒)并取绝对值 |
|
|
|
const diffMs = Math.abs(end - start); |
|
|
|
|
|
|
|
// 计算总分钟数并四舍五入 |
|
|
|
const totalMinutes = Math.round(diffMs / 60000); |
|
|
|
|
|
|
|
// 计算总小时数(带小数) |
|
|
|
const totalHours = totalMinutes / 60; |
|
|
|
|
|
|
|
// 处理小时进位情况 |
|
|
|
if (totalHours < 24) { |
|
|
|
// 不足一天:四舍五入到小时 |
|
|
|
return `${Math.round(totalHours)} 小时`; |
|
|
|
} else { |
|
|
|
// 计算完整天数 |
|
|
|
const days = Math.floor(totalHours / 24); |
|
|
|
// 计算剩余小时数(四舍五入) |
|
|
|
const remainingHours = Math.round(totalHours % 24); |
|
|
|
|
|
|
|
// 处理小时进位(当剩余小时为24时) |
|
|
|
if (remainingHours === 24) { |
|
|
|
return `${days + 1} 天 0 小时`; |
|
|
|
} |
|
|
|
return `${days} 天 ${remainingHours} 小时`; |
|
|
|
} |
|
|
|
} |
|
|
|
// 解析时间戳为数字 |
|
|
|
const start = parseInt(startTimestamp, 10); |
|
|
|
const end = parseInt(endTimestamp, 10); |
|
|
|
|
|
|
|
// 计算时间差(毫秒)并取绝对值 |
|
|
|
const diffMs = Math.abs(end - start); |
|
|
|
|
|
|
|
function singleShow(){ |
|
|
|
//console.log(value.value) |
|
|
|
if(value1.value==""){ |
|
|
|
value1.value = getTimestamp() |
|
|
|
// 计算总分钟数并四舍五入 |
|
|
|
const totalMinutes = Math.round(diffMs / 60000); |
|
|
|
|
|
|
|
// 计算总小时数(带小数) |
|
|
|
const totalHours = totalMinutes / 60; |
|
|
|
|
|
|
|
// 处理小时进位情况 |
|
|
|
if (totalHours < 24) { |
|
|
|
// 不足一天:四舍五入到小时 |
|
|
|
return `${Math.round(totalHours)} 小时`; |
|
|
|
} else { |
|
|
|
// 计算完整天数 |
|
|
|
const days = Math.floor(totalHours / 24); |
|
|
|
// 计算剩余小时数(四舍五入) |
|
|
|
const remainingHours = Math.round(totalHours % 24); |
|
|
|
|
|
|
|
// 处理小时进位(当剩余小时为24时) |
|
|
|
if (remainingHours === 24) { |
|
|
|
return `${days + 1} 天 0 小时`; |
|
|
|
} |
|
|
|
return `${days} 天 ${remainingHours} 小时`; |
|
|
|
} |
|
|
|
show.value = true |
|
|
|
} |
|
|
|
function rangeShowStart(){ |
|
|
|
const types = props.types; |
|
|
|
function singleShow() { |
|
|
|
if (types == 1||types == 2) { |
|
|
|
if (value1.value == "") { |
|
|
|
value1.value = getTimestamp() |
|
|
|
} |
|
|
|
show.value = true |
|
|
|
} |
|
|
|
|
|
|
|
if(startValue1.value==""){ |
|
|
|
startValue1.value = getTimestamp() |
|
|
|
} |
|
|
|
function rangeShowStart() { |
|
|
|
if (types == 1||types == 2) { |
|
|
|
if (startValue1.value == "") { |
|
|
|
startValue1.value = getTimestamp() |
|
|
|
} |
|
|
|
showStart.value = true |
|
|
|
} |
|
|
|
showStart.value = true |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function rangeShowEnd(){ |
|
|
|
if(endValue1.value==""){ |
|
|
|
endValue1.value = getTimestamp() |
|
|
|
function rangeShowEnd() { |
|
|
|
if (types == 1||types == 2) { |
|
|
|
if (endValue1.value == "") { |
|
|
|
endValue1.value = getTimestamp() |
|
|
|
} |
|
|
|
showEnd.value = true |
|
|
|
} |
|
|
|
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; |
|
|
|
|
|
|
|
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> |
|
|
|
@ -626,9 +634,9 @@ function getTimestamp() { |
|
|
|
<div v-if="selectType == 'range'" |
|
|
|
style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;" |
|
|
|
@click="rangeShowStart"> |
|
|
|
<el-text v-if="hasValue1" class="wordColor">{{ formatStart |
|
|
|
<el-text v-if="hasValue1" class="wordColor">{{ formatStart |
|
|
|
}}</el-text> |
|
|
|
<el-text v-if="!hasValue1" class="wordColor1">{{ formatStart |
|
|
|
<el-text v-if="!hasValue1" class="wordColor1">{{ formatStart |
|
|
|
}}</el-text> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -640,16 +648,19 @@ function getTimestamp() { |
|
|
|
<div v-if="selectType == 'range'" |
|
|
|
style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;" |
|
|
|
@click="rangeShowEnd"> |
|
|
|
<el-text v-if="hasValue2" class="wordColor">{{ formatEnd |
|
|
|
<el-text v-if="hasValue2" class="wordColor">{{ formatEnd |
|
|
|
}}</el-text> |
|
|
|
<el-text v-if="!hasValue2" class="wordColor1">{{formatEnd |
|
|
|
<el-text v-if="!hasValue2" class="wordColor1">{{ formatEnd |
|
|
|
}}</el-text> |
|
|
|
</div> |
|
|
|
<!-- <div v-if="selectType == 'range'" |
|
|
|
style="border: 0px solid #DCDFE6; padding-left: 8px; width: 10%;height: 97%;border-radius: 5px;"> |
|
|
|
<el-text class="wordColor">时长:23天</el-text> |
|
|
|
</div> --> |
|
|
|
<div v-if="selectType=='range'&&value[0]&&value[1]" style="float:right;border: black 0px solid;position: absolute; pointer-events: none;bottom: -26px;color:#A8ABB2 ;width: 100%; font-size: smaller;"><div style="float:right">{{ shichang }}</div></div> |
|
|
|
<div v-if="selectType == 'range' && value[0] && value[1]" |
|
|
|
style="float:right;border: black 0px solid;position: absolute; pointer-events: none;bottom: -26px;color:#A8ABB2 ;width: 100%; font-size: smaller;"> |
|
|
|
<div style="float:right">{{ shichang }}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|