ibms/src/components/data_admin/selectTime.vue

<template>
  <div class="select_time">
    <span
      v-for="(item,index) in timeArr"
      @click="checkTime(item)"
      class="bar"
      :class="item == activeClass ? 'active' : ''"
    :key="index">{{item}}</span>
    <span @click="doCheck" :class="'自定义' == activeClass ? 'active' : ''">
      自定义
      <i v-show="valDate.length">{{valDate[0]}} ~ {{valDate[1]}}</i>
      <div v-show="isShow" class="picker_view">
        <i>扫楼时间111：</i>
        <el-date-picker
          v-model="value"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="getDate"
        ></el-date-picker>
      </div>
    </span>
    <div class="masked" v-if="isShow" @click="isShow = !isShow"></div>
  </div>
</template>

<script>
export default {
  props: ['timeArr'],
  data() {
    return {
      activeClass: '今天',
      value: '',
      isShow: false,
      valDate: []
    }
  },
  methods: {
    getNowFormatDate(str) {
      var date = new Date(str);
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let minutes = date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes()
      let hour = date.getHours() > 9 ? date.getHours() : "0" + date.getHours()
      let seconds = date.getSeconds() > 9 ? date.getSeconds() : "0" + date.getSeconds()
      var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
        + " " + hour + seperator2 + minutes
        + seperator2 + seconds;
      return currentdate;
    },
    checkTime(val) {
      // 控制active显示
      this.activeClass = val
      let nowdate = new Date().setHours(0, 0, 0, 0)
      let oldDate = ''
      let oneDay = new Date()
      this.valDate = []
      switch (val) {
        case '一个月内':
          oldDate = new Date(new Date().setMonth(new Date().getMonth() - 1)).setHours(0, 0, 0, 0)
          this.$emit('checkTime', [this.getNowFormatDate(oldDate), this.getNowFormatDate(new Date(oneDay))])
          break;
        case '一周内':
          oldDate = new Date(nowdate - 7 * 24 * 3600 * 1000)
          this.$emit('checkTime', [this.getNowFormatDate(oldDate), this.getNowFormatDate(new Date(oneDay))])
          break;
        case '近三天':
          oldDate = new Date(nowdate - 3 * 24 * 3600 * 1000)
          this.$emit('checkTime', [this.getNowFormatDate(oldDate), this.getNowFormatDate(new Date(oneDay))])
          break;
        case '昨天':
          oldDate = new Date(nowdate - 24 * 3600 * 1000)
          this.$emit('checkTime', [this.getNowFormatDate(oldDate), this.getNowFormatDate(new Date(nowdate))])
          break;
        case '今天':
          oldDate = new Date(nowdate);
          this.$emit('checkTime', [this.getNowFormatDate(oldDate), this.getNowFormatDate(new Date())])
          break;
        default:
      }
    },
    doCheck() {
      this.isShow = true
    },
    getDate() {
      if (this.value == '' || this.value) {
        this.$emit('checkTime', [this.getNowFormatDate(this.value[0]), this.getNowFormatDate(this.value[1])])
        this.valDate[0] = this.getNowFormatDate(this.value[0]).split(' ')[0]
        this.valDate[1] = this.getNowFormatDate(this.value[1]).split(' ')[0]
        this.isShow = false
        this.activeClass = '自定义'
      } else {
        this.isShow = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.select_time {
  font-size: 0.8rem;
  display: inline-block;
  margin-left: 2rem;
  span {
    cursor: pointer;
    position: relative;
    &.active {
      color: #409eff;
    }
    .picker_view {
      position: absolute;
      width: 33rem;
      bottom: -4rem;
      left: -16rem;
      height: 3rem;
      padding-top: -0.5rem;
      box-sizing: border-box;
      z-index: 999;
      background-color: rgba(255, 255, 255, 1);
      padding-left: 1rem;
      padding-right: 2rem;
      border: 0.01rem solid #eee;
      z-index: 2001;
      i {
        color: #000;
      }
    }
  }
  .bar::after {
    content: "|";
    margin-right: 0.2rem;
    margin-left: 0.2rem;
    color: #000;
  }
  .masked {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 2;
  }
}
</style>