|
|
|
@ -23,6 +23,64 @@ const value = computed({ |
|
|
|
emits('update:modelValue', newVal) |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const shichangShowFlag = computed(() => { |
|
|
|
if(props.data.control.type=="datetimerange"||props.data.control.type=="daterange"){//monthrange |
|
|
|
if(value.value){ |
|
|
|
return true |
|
|
|
}else{ |
|
|
|
return false |
|
|
|
} |
|
|
|
}else{ |
|
|
|
return false |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
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 valueFormat = "x" |
|
|
|
|
|
|
|
const shichang = computed(() => { |
|
|
|
console.log(value.value) |
|
|
|
let start = value.value[0] |
|
|
|
let end = value.value[1] |
|
|
|
console.log(start) |
|
|
|
console.log(end) |
|
|
|
let a = calculateTimeDiff(start,end) |
|
|
|
return a |
|
|
|
}) |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<el-date-picker |
|
|
|
@ -34,10 +92,29 @@ const value = computed({ |
|
|
|
end-placeholder="结束日期" |
|
|
|
:teleported="true" |
|
|
|
:placeholder="props.data.control.placeholder" |
|
|
|
:value-format="props.data.valueFormat" |
|
|
|
:value-format="valueFormat" |
|
|
|
:format="props.data.control.format" |
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 2 天 3 小时 --> |
|
|
|
<div v-if="shichangShowFlag" class="duration-text">时长 {{shichang}}</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
<style lang='scss' scoped> |
|
|
|
<style lang='scss' scoped> |
|
|
|
|
|
|
|
.duration-text { |
|
|
|
margin-left: 20px; |
|
|
|
margin-right: 60px; |
|
|
|
color: #A8ABB2; |
|
|
|
font-size: 13px; |
|
|
|
z-index: 10; |
|
|
|
pointer-events: none; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|