emsfront/src/components/Ems/DateRangeSelect/index.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 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(today=false){
        const now = new Date(),formatNow = formatDate(now);
        const weekAgo = formatDate(today ? new Date(now.getTime()) : 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('reset')
        this.$emit('updateDate',this.dateRange)
    },
    // 搜索
    search(){
      this.$emit('updateDate',this.dateRange)
    },
    timeLine(type){
      if(!this.dateRange || !this.dateRange[0] || !this.dateRange[1]) return
      const nowStartTimes = new Date(this.dateRange[0]).getTime(),nowEndTimes = new Date(this.dateRange[1]).getTime(),maxTime = new Date(this.defaultDateRange[1]).getTime()
      const nowDis = nowEndTimes - nowStartTimes//用户当前选择时间差 可能=0
      //baseTime,maxTime 毫秒数
      const baseDis =  this.dataUnit === 3 ? 24 * 60 * 60 * 1000 :this.dataUnit === 2 ? 60 * 60 * 1000 : 60 * 1000
      const calcDis = nowDis === 0 ? baseDis : nowDis
      let start = type === 'before' ? nowStartTimes - calcDis : nowStartTimes + calcDis
      start = Math.min(start,maxTime)
      let end = type === 'before' ? nowEndTimes - calcDis : nowEndTimes + calcDis
      end = Math.min(end,maxTime)
      this.dateRange = [formatDate(start,this.dataUnit !== 3),formatDate(end,this.dataUnit !== 3)]
      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>