与 DeepSeek 共创页面：时间范围控制功能的合作与实现

<template>
  <div class="dataPanel-energyManagement-title-right">
    <!-- 时间选择器 -->
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="-"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :size="size"
    />
    <!-- 时间范围按钮 -->
    <div
      class="picker-but"
      :class="{ active: selectedTimeRange === 'day' }"
      @click="selectTimeRange('day')"
    >
      日
    </div>
    <div
      class="picker-but"
      :class="{ active: selectedTimeRange === 'month' }"
      @click="selectTimeRange('month')"
    >
      月
    </div>
    <div
      class="picker-but"
      :class="{ active: selectedTimeRange === 'year' }"
      @click="selectTimeRange('year')"
    >
      年
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: [], // 绑定日期范围
      selectedTimeRange: 'day', // 当前选择的时间范围
      size: 'default', // 组件大小
    };
  },
  methods: {
    // 根据选择的时间范围设置日期
    selectTimeRange(range) {
      this.selectedTimeRange = range;
      const now = new Date();

      switch (range) {
        case 'day': // 选择“日”
          this.value1 = [new Date(now), new Date(now)];
          break;
        case 'month': // 选择“月”
          const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
          const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
          this.value1 = [startOfMonth, endOfMonth];
          break;
        case 'year': // 选择“年”
          const startOfYear = new Date(now.getFullYear(), 0, 1);
          const endOfYear = new Date(now.getFullYear(), 11, 31);
          this.value1 = [startOfYear, endOfYear];
          break;
        default:
          this.value1 = [];
      }
    },
  },
  mounted() {
    // 默认选择“日”范围
    this.selectTimeRange('day');
  },
};
</script>

<style scoped>
.dataPanel-energyManagement-title-right {
  display: flex;
  align-items: center;
}

.picker-but {
  margin-left: 10px;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #000;
  text-align: center;
  line-height: 32px;
}

.picker-but:hover {
  background-color: #ecf5ff;
}

.picker-but.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}
</style>