emsfront/src/views/ems/search/DateTimeSelect.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>