style: 时间范围预设可选值

src/views/monitor/monitor/index.vue

@@ -12,10 +12,12 @@ import {
   parseStrToDate,
 } from '@/utils/date-utils';
 import { parseSizeFromKBs } from '@/utils/parse-utils';
+import dayjs, { Dayjs } from 'dayjs';
 const { t } = useI18n();
 
 /**开始结束时间类型 */
 type RangePickerType = {
+  ranges: Record<string, [Dayjs, Dayjs]>;
   /**全局时间 */
   all: [string, string];
   /**平均负载 */
@@ -32,6 +34,15 @@ type RangePickerType = {
 
 /**开始结束时间 */
 let rangePicker = reactive<RangePickerType>({
+  ranges: {
+    昨天: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+    今天: [dayjs().startOf('day'), dayjs()],
+    本周: [dayjs().startOf('week'), dayjs().endOf('week')],
+    本月: [dayjs().startOf('month'), dayjs().endOf('month')],
+  },
   all: ['', ''],
   load: ['', ''],
   cpu: ['', ''],
@@ -425,6 +436,7 @@ onMounted(() => {
                 format="YYYY-MM-DD HH:mm:ss"
                 show-time
                 :placeholder="['开始时间', '结束时间']"
+                :ranges="rangePicker.ranges"
                 style="width: 100%"
               ></a-range-picker>
             </a-form-item>