pqs-9100_client/frontend/src/components/TimeControl/index.vue

<template>
  <div class='time-control'>
    <el-select
      class='select'
      v-model='timeUnit'
      placeholder='选择时间单位'
      @change='handleChange'
    >
      <!--采用 v-for 去动态渲染-->
      <el-option label='按日' value='日'></el-option>
      <el-option label='按周' value='周'></el-option>
      <el-option label='按月' value='月'></el-option>
      <el-option label='按季度' value='季度'></el-option>
      <el-option label='按年' value='年'></el-option>
      <el-option label='自定义' value='自定义'></el-option>

    </el-select>

    <!-- 禁用时间选择器 -->
    <div class='date-display'>
      <el-date-picker
        class='date-picker'
        v-model='startDate'
        type='date'
        placeholder='起始时间'
        :readonly="timeUnit != '自定义'"
      ></el-date-picker>
      <el-text>~</el-text>
      <el-date-picker
        class='date-picker'
        v-model='endDate'
        type='date'
        placeholder='结束时间'
        :readonly="timeUnit !== '自定义'"
      ></el-date-picker>
    </div>
    <div class='date-display' v-if="timeUnit !== '自定义'">
      <el-button
        style='width: 10px;'
        class='triangle-button'
        type='primary'
        @click='prevPeriod'
      >
        <div class='left_triangle'></div>
      </el-button>
      <el-button class='triangle-button' type='primary' @click='goToCurrent'>
        本{{ timeUnit }}
      </el-button>
      <el-button
        style='width: 10px;'
        class='triangle-button'
        type='primary'
        @click='nextPeriod'
        :disabled='isNextDisabled'
      >
        <div class='right_triangle'></div>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeUnit: '周', // 默认选择按周
      startDate: null, // 起始日期
      endDate: null, // 结束日期
      isNextDisabled: false, // 控制下一周期按钮的禁用状态
      today: new Date(), // 当前日期
    }
  },
  created() {
    // 组件创建时更新日期范围
    this.updateDateRange()
  },
  methods: {
    handleChange(value) {
      // 根据选择的时间单位处理日期变化
      if (value !== '自定义') {
        this.updateDateRange()
      } else {
        // 自定义选项逻辑
        this.startDate = new Date()
        this.endDate = new Date()
      }
      this.updateNextButtonStatus()
    },
    updateDateRange() {
      const today = this.today
      // 根据选择的时间单位计算起始和结束日期
      if (this.timeUnit === '日') {
        this.startDate = today
        this.endDate = today
      } else if (this.timeUnit === '周') {
        this.startDate = this.getStartOfWeek(today)
        this.endDate = this.getEndOfWeek(today)
      } else if (this.timeUnit === '月') {
        this.startDate = new Date(today.getFullYear(), today.getMonth(), 1)
        this.endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0)
      } else if (this.timeUnit === '季度') {
        const quarter = Math.floor(today.getMonth() / 3)
        this.startDate = new Date(today.getFullYear(), quarter * 3, 1)
        this.endDate = new Date(today.getFullYear(), quarter * 3 + 3, 0)
      } else if (this.timeUnit === '年') {
        this.startDate = new Date(today.getFullYear(), 0, 1)
        this.endDate = new Date(today.getFullYear(), 11, 31)
      }
      this.updateNextButtonStatus()
    },
    getStartOfWeek(date) {
      const startOfWeek = new Date(date)
      const day = startOfWeek.getDay()
      const diff = day === 0 ? -6 : 1 - day // 星期天的情况
      startOfWeek.setDate(startOfWeek.getDate() + diff)
      return startOfWeek
    },
    getEndOfWeek(date) {
      const endOfWeek = new Date(date)
      const day = endOfWeek.getDay()
      const diff = day === 0 ? 0 : 7 - day // 星期天的情况
      endOfWeek.setDate(endOfWeek.getDate() + diff)
      return endOfWeek
    },
    prevPeriod() {
      const prevStartDate = new Date(this.startDate)
      const prevEndDate = new Date(this.endDate)

      if (this.timeUnit === '日') {
        prevStartDate.setDate(prevStartDate.getDate() - 1)
        prevEndDate.setDate(prevEndDate.getDate() - 1)
      } else if (this.timeUnit === '周') {
        prevStartDate.setDate(prevStartDate.getDate() - 7)
        prevEndDate.setDate(prevEndDate.getDate() - 7)
      } else if (this.timeUnit === '月') {
        prevStartDate.setMonth(prevStartDate.getMonth() - 1)
        prevEndDate.setMonth(prevEndDate.getMonth() - 1)
      } else if (this.timeUnit === '季度') {
        prevStartDate.setMonth(prevStartDate.getMonth() - 3)
        prevEndDate.setMonth(prevEndDate.getMonth() - 3)
      } else if (this.timeUnit === '年') {
        prevStartDate.setFullYear(prevStartDate.getFullYear() - 1)
        prevEndDate.setFullYear(prevEndDate.getFullYear() - 1)
      }

      this.startDate = prevStartDate
      this.endDate = prevEndDate
      this.updateNextButtonStatus()
    },
    goToCurrent() {
      if (this.timeUnit !== '自定义') {
        this.updateDateRange() // 更新为当前选择时间单位的时间范围
      }
    },
    nextPeriod() {
      const nextStartDate = new Date(this.startDate)
      const nextEndDate = new Date(this.endDate)

      if (this.timeUnit === '日') {
        nextStartDate.setDate(nextStartDate.getDate() + 1)
        nextEndDate.setDate(nextEndDate.getDate() + 1)
      } else if (this.timeUnit === '周') {
        nextStartDate.setDate(nextStartDate.getDate() + 7)
        nextEndDate.setDate(nextEndDate.getDate() + 7)
      } else if (this.timeUnit === '月') {
        nextStartDate.setMonth(nextStartDate.getMonth() + 1)
        nextEndDate.setMonth(nextEndDate.getMonth() + 1)
      } else if (this.timeUnit === '季度') {
        nextStartDate.setMonth(nextStartDate.getMonth() + 3)
        nextEndDate.setMonth(nextStartDate.getMonth() + 3)
      } else if (this.timeUnit === '年') {
        nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
        nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
      }

      this.startDate = nextStartDate
      this.endDate = nextEndDate
      this.updateNextButtonStatus()
    },
    updateNextButtonStatus() {
      // 更新下一个按钮的禁用状态
      const maxDate = new Date() // 假设最新日期为今天
      this.isNextDisabled = this.endDate > maxDate
    },
  },
}

// defineProps('include','exclude','default')
</script>

<style scoped lang='scss'>
@import "./index.scss";
</style>