feat: 添加日期快捷选择功能并更新多个组件以使用新选择器

src/hooks/useRangePicker.ts

@@ -0,0 +1,47 @@
+import dayjs from 'dayjs';
+
+/**日期快捷选择 */
+export function dayjsRanges() {
+  return [
+    {
+      label: 'Today',
+      value: [dayjs().startOf('day'), dayjs()],
+    },
+    {
+      label: 'Last 1 hour',
+      value: [
+        dayjs().subtract(1, 'hour').startOf('hour'),
+        dayjs().subtract(1, 'hour').endOf('hour'),
+      ],
+    },
+    // {
+    //   label: 'Last 3 hour',
+    //   value: [dayjs().subtract(3, 'hours'), dayjs()],
+    // },
+    // {
+    //   label: 'Last 6 hour',
+    //   value: [dayjs().subtract(6, 'hours'), dayjs()],
+    // },
+    {
+      label: 'Last 1 day',
+      value: [
+        dayjs().subtract(1, 'day').startOf('day'),
+        dayjs().subtract(1, 'day').endOf('day'),
+      ],
+    },
+    {
+      label: 'Last 7 day',
+      value: [
+        dayjs().subtract(7, 'day').startOf('day'),
+        dayjs().subtract(1, 'day').endOf('day'),
+      ],
+    },
+    {
+      label: 'Last 15 day',
+      value: [
+        dayjs().subtract(15, 'day').startOf('day'),
+        dayjs().subtract(1, 'day').endOf('day'),
+      ],
+    },
+  ];
+}

src/views/dashboard/imsCDR/index.vue

@@ -24,6 +24,7 @@ import PQueue from 'p-queue';
 import { listTenant } from '@/api/system/tenant';
 import { useClipboard } from '@vueuse/core';
 import dayjs, { type Dayjs } from 'dayjs';
+import { dayjsRanges } from '@/hooks/useRangePicker';
 const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const { getDict } = useDictStore();
@@ -52,21 +53,6 @@ let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
   dayjs().startOf('hour'),
   dayjs().endOf('hour'),
 ]);
-/**时间范围 */
-let rangePickerPresets = ref([
-  {
-    label: 'Now hour',
-    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
-  },
-  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
-  {
-    label: 'Yesterday',
-    value: [
-      dayjs().subtract(1, 'day').startOf('day'),
-      dayjs().subtract(1, 'day').endOf('day'),
-    ],
-  },
-]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -648,7 +634,7 @@ onBeforeUnmount(() => {
             >
               <a-range-picker
                 v-model:value="queryRangePicker"
-                :presets="rangePickerPresets"
+                :presets="dayjsRanges()"
                 :bordered="true"
                 :allow-clear="false"
                 style="width: 100%"

src/views/dashboard/sgwcCDR/index.vue

@@ -21,6 +21,7 @@ import PQueue from 'p-queue';
 import saveAs from 'file-saver';
 import { useClipboard } from '@vueuse/core';
 import dayjs, { type Dayjs } from 'dayjs';
+import { dayjsRanges } from '@/hooks/useRangePicker';
 const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const ws = new WS();
@@ -34,21 +35,6 @@ let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
   dayjs().startOf('hour'),
   dayjs().endOf('hour'),
 ]);
-/**时间范围 */
-let rangePickerPresets = ref([
-  {
-    label: 'Now hour',
-    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
-  },
-  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
-  {
-    label: 'Yesterday',
-    value: [
-      dayjs().subtract(1, 'day').startOf('day'),
-      dayjs().subtract(1, 'day').endOf('day'),
-    ],
-  },
-]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -579,7 +565,7 @@ onBeforeUnmount(() => {
             >
               <a-range-picker
                 v-model:value="queryRangePicker"
-                :presets="rangePickerPresets"
+                :presets="dayjsRanges()"
                 :bordered="true"
                 :allow-clear="false"
                 style="width: 100%"

src/views/dashboard/smfCDR/index.vue

@@ -24,6 +24,7 @@ import dayjs, { Dayjs } from 'dayjs';
 import { useClipboard } from '@vueuse/core';
 import { parseSizeFromByte } from '@/utils/parse-utils';
 import { parseDateToStr } from '@/utils/date-utils';
+import { dayjsRanges } from '@/hooks/useRangePicker';
 const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const ws = new WS();
@@ -37,21 +38,6 @@ let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
   dayjs().startOf('hour'),
   dayjs().endOf('hour'),
 ]);
-/**时间范围 */
-let rangePickerPresets = ref([
-  {
-    label: 'Now hour',
-    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
-  },
-  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
-  {
-    label: 'Yesterday',
-    value: [
-      dayjs().subtract(1, 'day').startOf('day'),
-      dayjs().subtract(1, 'day').endOf('day'),
-    ],
-  },
-]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -612,7 +598,7 @@ onBeforeUnmount(() => {
             >
               <a-range-picker
                 v-model:value="queryRangePicker"
-                :presets="rangePickerPresets"
+                :presets="dayjsRanges()"
                 :bordered="true"
                 :allow-clear="false"
                 style="width: 100%"
@@ -802,7 +788,9 @@ onBeforeUnmount(() => {
               </div>
               <div>
                 <span>{{ t('views.dashboard.cdr.time') }}: </span>
-                <span>{{ parseDateToStr(record.cdrJSON.invocationTimestamp) }}</span>
+                <span>{{
+                  parseDateToStr(record.cdrJSON.invocationTimestamp)
+                }}</span>
               </div>
               <a-divider orientation="left">
                 {{ t('views.dashboard.cdr.rowInfo') }}
@@ -858,15 +846,21 @@ onBeforeUnmount(() => {
                   <div>
                     <div>
                       <span>Data Volume Uplink: </span>
-                      <span>{{ parseSizeFromByte(udata.dataVolumeUplink, 'MB') }}</span>
+                      <span>{{
+                        parseSizeFromByte(udata.dataVolumeUplink, 'MB')
+                      }}</span>
                     </div>
                     <div>
                       <span>Data Volume Downlink: </span>
-                      <span>{{ parseSizeFromByte(udata.dataVolumeDownlink, 'MB') }}</span>
+                      <span>{{
+                        parseSizeFromByte(udata.dataVolumeDownlink, 'MB')
+                      }}</span>
                     </div>
                     <div>
                       <span>Data Total Volume: </span>
-                      <span>{{ parseSizeFromByte(udata.dataTotalVolume, 'MB') }}</span>
+                      <span>{{
+                        parseSizeFromByte(udata.dataTotalVolume, 'MB')
+                      }}</span>
                     </div>
                     <!-- <div>
                       <span>Time: </span>

src/views/dashboard/smfCDRByIMSI/index.vue

@@ -38,6 +38,7 @@ import { message } from 'ant-design-vue';
 import useNeInfoStore from '@/store/modules/neinfo';
 import dayjs, { Dayjs } from 'dayjs';
 import { parseDateToStr } from '@/utils/date-utils';
+import { dayjsRanges } from '@/hooks/useRangePicker';
 const { t, currentLocale } = useI18n();
 const ws = new WS();
 
@@ -246,21 +247,6 @@ let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
   dayjs().startOf('hour'),
   dayjs().endOf('hour'),
 ]);
-/**时间范围 */
-let rangePickerPresets = ref([
-  {
-    label: 'Now hour',
-    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
-  },
-  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
-  {
-    label: 'Yesterday',
-    value: [
-      dayjs().subtract(1, 'day').startOf('day'),
-      dayjs().subtract(1, 'day').endOf('day'),
-    ],
-  },
-]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -667,7 +653,7 @@ onBeforeUnmount(() => {
             >
               <a-range-picker
                 v-model:value="queryRangePicker"
-                :presets="rangePickerPresets"
+                :presets="dayjsRanges()"
                 :bordered="true"
                 :allow-clear="false"
                 style="width: 100%"

src/views/dashboard/smscCDR/index.vue

@@ -25,6 +25,7 @@ import { listTenant } from '@/api/system/tenant';
 import { useClipboard } from '@vueuse/core';
 import { hasPermissions } from '@/plugins/auth-user';
 import dayjs, { type Dayjs } from 'dayjs';
+import { dayjsRanges } from '@/hooks/useRangePicker';
 const { copy } = useClipboard({ legacy: true });
 const { getDict } = useDictStore();
 const { t } = useI18n();
@@ -47,21 +48,6 @@ let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
   dayjs().startOf('hour'),
   dayjs().endOf('hour'),
 ]);
-/**时间范围 */
-let rangePickerPresets = ref([
-  {
-    label: 'Now hour',
-    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
-  },
-  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
-  {
-    label: 'Yesterday',
-    value: [
-      dayjs().subtract(1, 'day').startOf('day'),
-      dayjs().subtract(1, 'day').endOf('day'),
-    ],
-  },
-]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -606,7 +592,7 @@ onBeforeUnmount(() => {
             >
               <a-range-picker
                 v-model:value="queryRangePicker"
-                :presets="rangePickerPresets"
+                :presets="dayjsRanges()"
                 :bordered="true"
                 :allow-clear="false"
                 style="width: 100%"