<!--
|
* @Date: 2024-05-02 16:31:11
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-05-03 00:39:17
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/base/Time.vue
|
-->
|
<template>
|
<div>
|
<el-select v-model="startDay" placeholder="" size="" style="width: 80px" @change="change">
|
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
<el-time-picker style="width: 80px" :clearable="false" v-model="start" value-format="HH:mm" format="HH:mm"
|
placeholder="" @change="change" />
|
<span style="padding: 0 10px">-</span>
|
<el-select v-model="endDay" placeholder="" size="" style="width: 80px" @change="change">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
<el-time-picker style="width: 80px" :clearable="false" v-model="end" value-format="HH:mm" format="HH:mm"
|
placeholder="" @change="change" />
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
|
export default {
|
props: {
|
modelValue: { type: Array, default: [0, 0] },
|
},
|
watch: {
|
value(val) {
|
this.$emit('update:modelValue', val)
|
let base = moment(moment().format('YYYY-MM-DD') + ' 00:00')
|
let base1 = moment(moment().format('YYYY-MM-DD') + ' 00:00')
|
let startTime = base.add(val[0], 'm').format('HH:mm')
|
let endTime = base1.add(val[1], 'm').format('HH:mm')
|
this.start = startTime
|
this.end = endTime
|
this.startDay = this.getDes(val[0])
|
this.endDay = this.getDes(val[1])
|
},
|
},
|
data() {
|
return {
|
value: [],
|
options1: [
|
{
|
label: '上日',
|
value: 0
|
},
|
{
|
label: '当日',
|
value: 1
|
},
|
{
|
label: '次日',
|
value: 2
|
}
|
],
|
options: [
|
{
|
label: '上日',
|
value: 0
|
},
|
{
|
label: '当日',
|
value: 1
|
},
|
{
|
label: '次日',
|
value: 2
|
}
|
],
|
startDay: 1,
|
endDay: 1,
|
start: '00:00',
|
end: '00:00'
|
}
|
},
|
created() {
|
if (!this.modelValue || this?.modelValue.length === 0) {
|
this.value = [0, 1440]
|
this.startDay = 1
|
this.endDay = 2
|
this.start = '00:00'
|
this.end = '00:00'
|
} else {
|
this.value = this.modelValue
|
}
|
},
|
methods: {
|
getDes(num) {
|
if (num < 0) {
|
return 0
|
} else if (num >= 0 && num < 1440) {
|
return 1
|
} else {
|
return 2
|
}
|
},
|
change() {
|
let arr = []
|
let base = moment(moment().format('YYYY-MM-DD') + ' 00:00')
|
let startTime = moment(`${moment().format('YYYY-MM-DD')} ${this.start}`)
|
let endTime = moment(`${moment().format('YYYY-MM-DD')} ${this.end}`)
|
if (this.startDay === 0) {
|
startTime.subtract(1, 'd')
|
} else if (this.startDay === 2) {
|
startTime.add(1, 'd')
|
}
|
let arrItem0 = startTime.diff(base) / 60000
|
if (this.endDay === 0) {
|
endTime.subtract(1, 'd')
|
} else if (this.endDay === 2) {
|
endTime.add(1, 'd')
|
}
|
let arrItem1 = endTime.diff(base) / 60000
|
if (arrItem1 <= arrItem0) {
|
return this.$message.warning('开始时间大于结束时间，请重新输入');
|
}
|
// this.endDay = this.getDes(arrItem0)
|
arr.push(arrItem0, arrItem1)
|
this.value = arr
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
