136 lines
4.7 KiB
Vue
136 lines
4.7 KiB
Vue
<template>
|
|
<div class="time-range">
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
:type="type"
|
|
range-separator="至"
|
|
start-placeholder="开始时间"
|
|
:format="valueFormat"
|
|
:value-format="valueFormat"
|
|
:clearable="false"
|
|
:picker-options="pickerOptions"
|
|
end-placeholder="结束时间">
|
|
</el-date-picker>
|
|
<el-button 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 {
|
|
props:{
|
|
dataUnit:{
|
|
type:Number,
|
|
default:1
|
|
}
|
|
},
|
|
computed:{
|
|
type(){
|
|
return this.dataUnit === 3 ? 'daterange' : 'datetimerange'
|
|
},
|
|
valueFormat(){
|
|
return this.dataUnit === 3 ? 'yyyy-MM-dd' :this.dataUnit === 2 ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd HH:mm:ss'
|
|
},
|
|
disabledNextBtn(){
|
|
if(this.dateRange && this.dateRange.length ===2){
|
|
return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
|
|
}else{
|
|
return true
|
|
}
|
|
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading:false,
|
|
dateRange:[],
|
|
defaultDateRange:[],
|
|
pickerOptions:{
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
init(){
|
|
const {dataUnit} = this
|
|
const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
|
|
const now = new Date(),formatNow = formatDate(now.getTime(),dataUnit !== 3 );
|
|
const timeAgo = formatDate(new Date(now.getTime() - timeDis),dataUnit !== 3)
|
|
this.dateRange = [timeAgo, formatNow];
|
|
this.defaultDateRange=[timeAgo, formatNow];
|
|
console.log('init',timeAgo,formatNow)
|
|
this.$emit('initDate',this.dateRange || [])
|
|
},
|
|
showBtnLoading(status){
|
|
this.loading = status
|
|
},
|
|
// 切换分、时、天 重置时间可选范围
|
|
resetDate(){
|
|
this.dateRange = this.defaultDateRange
|
|
},
|
|
//重置 设置时间范围为初始化时间段
|
|
reset(){
|
|
this.resetDate()
|
|
this.$emit('updateDate',this.dateRange || [])
|
|
},
|
|
// 搜索
|
|
search(){
|
|
if(this.dateRange && this.dateRange.length>0){
|
|
const {dataUnit} = this
|
|
const [start,end] = this.dateRange
|
|
const startTime = new Date(start),endTime=new Date(end)
|
|
const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
|
|
if(endTime - startTime > timeDis){
|
|
this.$message.error(`时间范围不能超过${dataUnit === 3 ? '30天' : dataUnit === 2 ? '24小时' : '1小时'}`)
|
|
}else{
|
|
this.$emit('updateDate',this.dateRange || [])
|
|
}
|
|
}else{
|
|
this.$emit('updateDate',this.dateRange || [])
|
|
}
|
|
},
|
|
timeLine(type){
|
|
if(!this.dateRange) return
|
|
//baseTime,maxTime 毫秒数
|
|
const baseTimes= this.dataUnit === 3 ? 24 * 60 * 60 * 1000 :this.dataUnit === 2 ? 60 * 60 * 1000 : 60 * 1000
|
|
const baseDis = this.dataUnit === 3 ? 30 :this.dataUnit === 2 ? 24 : 60
|
|
let baseTime = type === 'before' ? new Date(this.dateRange[0]).getTime() - baseTimes :new Date(this.dateRange[1]).getTime() + baseTimes ,
|
|
maxTime = new Date(this.defaultDateRange[1]).getTime()
|
|
//updateTime 毫秒数
|
|
let updateTime = type === 'before' ? baseTime - baseDis * baseTimes : baseTime + baseDis * baseTimes
|
|
if(type === 'next' && updateTime >= maxTime) updateTime = maxTime
|
|
const start = formatDate(type === 'before' ? updateTime : baseTime,this.dataUnit !== 3)
|
|
const end = formatDate(type === 'before' ? baseTime : updateTime,this.dataUnit !== 3)
|
|
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-range__icon, .el-range-editor--medium .el-range__close-icon{
|
|
line-height: 22px;
|
|
}
|
|
.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>
|