Vue + Element 實現下拉選擇統計時間資料欄並展示

阿新 • • 發佈：2020-08-05

效果如下

程式碼如下

<!-- 頭部下拉選擇統計時間資料欄 -->
  <!-- 選擇項：2: 近七天 3:近30天 5:自定義 -->

<template>
  <div class="mod-home">
    <div class="time">
      <!-- 欄目標題行 -->
      <div class="title-line">
        <div class="title-right">
          <span>統計時間：</ 
span>
          <el-select
            v-model="dateValue"
            @change="setDateRange(dateValue)"
            style="width:100px;height: 15px;"
            size="mini"
          >
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label 
="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span
            class="title-time"
            v-if="dateValue === 2 || dateValue === 3"
          >{{dateRange[0]}}至{{dateRange[1]}}</span>
          <span class="title-time" 
 v-if="dateValue === 5">{{dateOptions[2].label}}</span>
          <div class="title-picker"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      dateValue: 2,
      dateOptions: [
        {
          label: '近 7 天',
          value: 2
        },
        {
          label: '近 30 天',
          value: 3
        },
        {
          label: '自定義',
          value: 5
        }
      ],
      dateRange: [], // 展示的時間引數
    }
  },
  mounted () {
    this.setDateRange(2)
  },
  updated () {
  },
  components: {

  },
  watch: {

  },
  methods: {
    /**
     * 2: 近七天 3:近30天 5:自定義(前一個月如當前月為7月，自然月為6月)
     */
    setDateRange (val) {
      var startDay = null
      var endDay = null
      if (val === 2) {
        startDay = -6
        endDay = 0
      } else if (val === 3) {
        startDay = -29
        endDay = 0
      } else {
        return
      }
      // 開始時間
      // var startTime = this.getTimeByDayNum(startDay) + '00:00:00'
      var startTime = this.getTimeByDayNum(startDay)
      // 結束時間
      // var endTime = this.getTimeByDayNum(endDay) + '23:59:59'
      var endTime = this.getTimeByDayNum(endDay)
      this.dateRange = [startTime, endTime]
      // this.dateRange3Param = [startTime + '00:00:00', endTime + '23:59:59']
      // console.log(this.dateRange3)
    },
    /**
     * 通過天數獲取對應天數前的時間, 負數：多少天前, 正數：多少天后
     */
    getTimeByDayNum (dayNum) {
      var d = new Date()
      // d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * dayNum)
      d.setDate(d.getDate() - 1 + dayNum)
      let mouth = d.getMonth() + 1 >= 10 ? d.getMonth() : '0' + (d.getMonth() + 1)
      // let day = d.getDate() >= 10 ? d.getDate() - 1 : '0' + (d.getDate() - 1)
      let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
      var time = d.getFullYear() + '-' + mouth + '-' + day + ' '
      return time
    },
  }
}
</script>

<style lang="scss">
.mod-home {
  .title-line {
    width: 100%;
    background: #f8f8f8;
    padding: 20px 14px;
    line-height: 26px;
  }
  .title-time {
    padding-left: 8px;
  }
}
</style>