1.修改了统计异常类型聚集度的具体异常个数的逻辑

zmc

2023-11-24 e7ce285475a1355eeaeaba1855e3cd615eafa13b

 src/sfc/TimeSelectWithShortCuts.vue

@@ -13,68 +13,94 @@
  ***
-->
<script>
import dayjs from 'dayjs'
  export default {
    emits: ['submitTime'],
    data() {
      return{
        //保存开始和结束时间
      // 随便设置初始值 ，mounted时再设正确的，目的是改变时间了触发change
        time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00'],
        shortcuts:[],
      }
    },
    mounted() {
        this.initShortCuts()
        this.initOneWeekAgoTime()
        this.$emit('submitTime', this.time);
    },
    methods: {
        initShortCuts(){
            this.shortcuts = [
            {
    text: '前一日',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24)
      return [start, end]
    },
  },
                
  {
    text: '前7天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '前一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  
]
        },
        initOneWeekAgoTime(){
      // 给时间选择器设置默认时间为一周前
    this.time[0] = dayjs().subtract(6, 'week').format('YYYY-MM-DD HH:mm:ss');
    this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
import dayjs from 'dayjs';
export default {
  props: {
    timeType: {
      type: String,
      default: 'month'
    }
     }
}
  },
  emits: ['submitTime'],
  data() {
    return {
      //保存开始和结束时间
      // 随便设置初始值 ，mounted时再设正确的，目的是改变时间了触发change
      time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00'],
      shortcuts: []
    };
  },
  mounted() {
    this.initShortCuts();
    this.initOneWeekAgoTime();
    this.$emit('submitTime', this.time);
  },
  methods: {
    initShortCuts() {
      this.shortcuts = [
        {
          text: '前一日',
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            return [start, end];
          }
        },

        {
          text: '前7天',
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
          }
        },
        {
          text: '前一月',
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
          }
        }
      ];
    },
    initOneWeekAgoTime() {
      switch (this.timeType) {
        case 'day':
          this.time[0] = dayjs()
            .subtract(1, 'day')
            .format('YYYY-MM-DD HH:mm:ss');
          this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
          break;
        case 'week':
          this.time[0] = dayjs()
            .subtract(1, 'week')
            .format('YYYY-MM-DD HH:mm:ss');
          this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
          break;
        case 'month':
          this.time[0] = dayjs()
            .subtract(1, 'month')
            .format('YYYY-MM-DD HH:mm:ss');
          this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
          break;
        default:
          this.time[0] = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss');
          this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
      }
    }
  }
};
</script>

<template>
    <div class="block">
    <div class="demonstration">起止时间：</div>
  <div class="block">
    <span class="demonstration">起止时间：</span>
    <div class="pick-date">
    <el-date-picker
      v-model="time"
      type="datetimerange"
@@ -84,23 +110,24 @@
      end-placeholder="结束时间"
      value-format="YYYY-MM-DD HH:mm:ss"
      @change="$emit('submitTime', time)"
      class="pick-date"
      
    />
  </div>
  </div>
</template>

<style  scoped>
<style scoped>
.block {
  display: flex;
  width: 570px;
  width: 500px;
}
.demonstration {
  margin-left: 15px;
  margin-top: 5px;
  color: #333333;
  font-weight: bold;
  font-size: 14px;
}

.pick-date {
  margin-top: 5px;
} 
</style>
/* .pick-date {
  width: 200px;
} */
</style>