扬尘vue

zmc

2023-09-04 34257f504330191b1a698eb48b52217095db47fe

 src/sfc/TimeSelectWithShortCuts.vue

@@ -13,20 +13,26 @@
  ***
-->
<script>
import dayjs from 'dayjs'
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:[],
      }
      shortcuts: []
    };
    },
    mounted() {
        this.initShortCuts()
        this.initOneWeekAgoTime()
    this.initShortCuts();
    this.initOneWeekAgoTime();
        this.$emit('submitTime', this.time);
    },
    methods: {
@@ -35,46 +41,66 @@
            {
    text: '前一日',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24)
      return [start, end]
    },
            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]
    },
            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]
    },
  },
  
]
            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');
      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">
        <span class="demonstration">起止时间：</span>
    <div class="pick-date">
        <el-date-picker
          v-model="time"
          type="datetimerange"
@@ -84,8 +110,9 @@
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="$emit('submitTime', time)"
          class="pick-date"
      
        />
  </div>
  </div>
</template>

@@ -101,7 +128,7 @@
  font-size: 16px;
}

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