feat: 巡检任务概况，事件概况，事件类型完成率接口对接

罗广辉

2025-03-31 4f40148798c944eaddceb3539cfe0ecc1dab5266

 src/components/CommonDateTime.vue

@@ -1,33 +1,61 @@
<template>
  <div class="common-date-time">
    <el-date-picker
      v-model="newTime"
      v-model="model"
      type="daterange"
      value-format="YYYY-MM-DD"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
      @change="change"
    />
    <div class="time-card">
      <div
        class="card-item"
        :class="item == checked ? 'active' : ''"
        v-for="item in timeList"
        :class="item === checked ? 'active' : ''"
        v-for="(item, index) in timeList"
        @click="timeClick(item)"
      >
        {{ item }}
        {{ timeListStr[index] }}
      </div>
    </div>
  </div>
</template>

<script setup>
const newTime = ref([]);
let timeList = ['今日', '本周', '本月', '本年'];
import dayjs from 'dayjs';
import { ref, defineEmits } from 'vue';

let checked = ref('今日');
const emit = defineEmits(['change']);

const model = defineModel();

let timeList = ['today', 'week', 'month', 'year'];
let timeListStr = ['今日', '本周', '本月', '本年'];
let checked = ref('today');

const getDateRange = unit => {
  if (unit === 'today') {
    return [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
  }
  return [dayjs().startOf(unit).format('YYYY-MM-DD'), dayjs().endOf(unit).format('YYYY-MM-DD')];
};

const dateRanges = {
  today: getDateRange('today'),
  week: getDateRange('week'),
  month: getDateRange('month'),
  year: getDateRange('year'),
};

const change = value => {
  emit('change', value);
};

let timeClick = item => {
  checked.value = item;
  model.value = dateRanges[item];
  emit('change', model.value);
};
</script>