From edd386509403d7c17909d3273275217f2d538253 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Fri, 4 Jul 2025 15:14:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E9=80=89=E6=8B=A9=E5=8A=9F=E8=83=BD=E5=B9=B6?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=A4=9A=E4=B8=AA=E7=BB=84=E4=BB=B6=E4=BB=A5?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=96=B0=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useRangePicker.ts                | 47 ++++++++++++++++++++++
 src/views/dashboard/imsCDR/index.vue       | 18 +--------
 src/views/dashboard/sgwcCDR/index.vue      | 18 +--------
 src/views/dashboard/smfCDR/index.vue       | 34 +++++++---------
 src/views/dashboard/smfCDRByIMSI/index.vue | 18 +--------
 src/views/dashboard/smscCDR/index.vue      | 18 +--------
 6 files changed, 69 insertions(+), 84 deletions(-)
 create mode 100644 src/hooks/useRangePicker.ts

diff --git a/src/hooks/useRangePicker.ts b/src/hooks/useRangePicker.ts
new file mode 100644
index 00000000..61190722
--- /dev/null
+++ b/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'),
+      ],
+    },
+  ];
+}
diff --git a/src/views/dashboard/imsCDR/index.vue b/src/views/dashboard/imsCDR/index.vue
index 12230357..6b7b9a0c 100644
--- a/src/views/dashboard/imsCDR/index.vue
+++ b/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%"
diff --git a/src/views/dashboard/sgwcCDR/index.vue b/src/views/dashboard/sgwcCDR/index.vue
index 212810d3..a7a9787d 100644
--- a/src/views/dashboard/sgwcCDR/index.vue
+++ b/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%"
diff --git a/src/views/dashboard/smfCDR/index.vue b/src/views/dashboard/smfCDR/index.vue
index 0f41f2ab..193c68f7 100644
--- a/src/views/dashboard/smfCDR/index.vue
+++ b/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>
diff --git a/src/views/dashboard/smfCDRByIMSI/index.vue b/src/views/dashboard/smfCDRByIMSI/index.vue
index 3d4b027d..4b2e3b5b 100644
--- a/src/views/dashboard/smfCDRByIMSI/index.vue
+++ b/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%"
diff --git a/src/views/dashboard/smscCDR/index.vue b/src/views/dashboard/smscCDR/index.vue
index fc8219a2..7ef3bffb 100644
--- a/src/views/dashboard/smscCDR/index.vue
+++ b/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%"