94 lines
3.0 KiB
Vue
94 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="time-range">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="dateRange"
|
||
|
|
type="daterange"
|
||
|
|
range-separator="至"
|
||
|
|
start-placeholder="开始时间"
|
||
|
|
value-format="yyyy-MM-dd"
|
||
|
|
:clearable="false"
|
||
|
|
:picker-options="pickerOptions"
|
||
|
|
end-placeholder="结束时间">
|
||
|
|
</el-date-picker>
|
||
|
|
<el-button type="default" size="mini" style="margin-left: 10px;" :loading="loading" @click="reset">重置</el-button>
|
||
|
|
<el-button type="primary" size="mini" :loading="loading" @click="search">搜索</el-button>
|
||
|
|
<el-button type="primary" size="mini" :loading="loading" @click="timeLine('before')">上一时段</el-button>
|
||
|
|
<el-button type="primary" size="mini" :loading="loading" @click="timeLine('next')" :disabled="disabledNextBtn">下一时段</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {formatDate} from '@/filters/ems'
|
||
|
|
export default {
|
||
|
|
computed:{
|
||
|
|
disabledNextBtn(){
|
||
|
|
return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loading:false,
|
||
|
|
dateRange:[],
|
||
|
|
defaultDateRange:[],
|
||
|
|
pickerOptions:{
|
||
|
|
disabledDate(time) {
|
||
|
|
return time.getTime() > Date.now();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init(){
|
||
|
|
const now = new Date(),formatNow = formatDate(now);
|
||
|
|
const weekAgo = formatDate(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000))
|
||
|
|
this.dateRange = [weekAgo, formatNow];
|
||
|
|
this.defaultDateRange=[weekAgo, formatNow];
|
||
|
|
this.$emit('updateDate',this.dateRange)
|
||
|
|
},
|
||
|
|
showBtnLoading(status){
|
||
|
|
this.loading = status
|
||
|
|
},
|
||
|
|
resetDate(){
|
||
|
|
this.dateRange = this.defaultDateRange
|
||
|
|
},
|
||
|
|
//重置 设置时间范围为初始化时间段
|
||
|
|
reset(){
|
||
|
|
this.resetDate()
|
||
|
|
this.$emit('updateDate',this.dateRange)
|
||
|
|
},
|
||
|
|
// 搜索
|
||
|
|
search(){
|
||
|
|
this.$emit('updateDate',this.dateRange)
|
||
|
|
},
|
||
|
|
timeLine(type){
|
||
|
|
//baseTime,maxTime 毫秒数
|
||
|
|
let baseTime = new Date(this.dateRange[type === 'before' ? 0 : 1]).getTime(),maxTime = new Date(this.defaultDateRange[1]).getTime()
|
||
|
|
//updateTime 毫秒数
|
||
|
|
let updateTime = type === 'before' ? baseTime - 7 * 24 * 60 * 60 * 1000 : baseTime + 7 * 24 * 60 * 60 * 1000
|
||
|
|
if(type === 'next' && updateTime >= maxTime) updateTime = maxTime
|
||
|
|
const start = formatDate(type === 'before' ? updateTime : baseTime)
|
||
|
|
const end = formatDate(type === 'before' ? baseTime : updateTime)
|
||
|
|
this.dateRange = [start,end]
|
||
|
|
this.$emit('updateDate',this.dateRange)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.time-range{
|
||
|
|
display: flex;
|
||
|
|
::v-deep {
|
||
|
|
.el-range-editor--medium.el-input__inner{
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
.el-range-editor--medium .el-range-separator{
|
||
|
|
line-height: 24px;
|
||
|
|
}
|
||
|
|
.el-button--mini{
|
||
|
|
padding:3px 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|