Merge branch 'fix/DEFECT-1539' into 'main_dev'

fix: 优化首页租户趋势和客户趋势查询周期

See merge request yunteng/thingskit-front!858

@@ -2,9 +2,10 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts" setup>
-  import { ref, Ref, withDefaults, onMounted, watch } from 'vue';
+  import { ref, Ref, onMounted, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { getTrendData } from '/@/api/dashboard';
+  import { getDateByShortcutQueryKey, ShortcutQueryKeyEnum } from '../hooks/useDate';
 
   interface Props {
     width?: string;
@@ -77,11 +78,8 @@
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
   onMounted(async () => {
-    const endTs = Date.now();
     const res = await getTrendData({
-      startTs: endTs - 2592000000,
-      endTs,
-      interval: 86400000,
+      ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_30_DAY),
       trend: 'CUSTOMER_TREND',
     });
 

@@ -95,6 +95,20 @@
     >
       <template #extra>
         <div class="extra-date">
+          <Tooltip :overlayStyle="{ maxWidth: '340px' }">
+            <template #title>
+              <section>
+                <div>30天: 查询最近30天的数据,间隔时间为1天.</div>
+                <div>最近三个月: 查询最近三个月的数据,间隔时间为1天.</div>
+                <div>最近一年: 查询最近一年的数据,间隔时间为30天.</div>
+                <div>
+                  间隔时间:
+                  以当前时间作为结束时间,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
+                </div>
+              </section>
+            </template>
+            <QuestionCircleOutlined class="!mr-2 cursor-pointer" />
+          </Tooltip>
           <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value">
             <span
               @click="quickQueryTenantOrCustomerTime(index, item.value)"

@@ -80,6 +80,20 @@
     >
       <template #extra>
         <div class="extra-date">
+          <Tooltip :overlayStyle="{ maxWidth: '340px' }">
+            <template #title>
+              <section>
+                <div>30天: 查询最近30天的数据,间隔时间为1天.</div>
+                <div>最近三个月: 查询最近三个月的数据,间隔时间为1天.</div>
+                <div>最近一年: 查询最近一年的数据,间隔时间为30天.</div>
+                <div>
+                  间隔时间:
+                  以当前时间作为结束时间,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
+                </div>
+              </section>
+            </template>
+            <QuestionCircleOutlined class="!mr-2 cursor-pointer" />
+          </Tooltip>
           <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value">
             <span
               @click="quickQueryTenantOrCustomerTime(index, item.value, 'tenant')"
@@ -445,7 +459,7 @@
     if (activeIndex.value === index) return;
     activeIndex.value = index;
     dateValue.value = '';
-    console.log(interval);
+
     if (isCustomer) {
       if (activeKey.value === '1') {
         const data = await getTrendData({

@@ -2,9 +2,10 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts" setup>
-  import { ref, Ref, withDefaults, onMounted, watch } from 'vue';
+  import { ref, Ref, onMounted, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { getTrendData } from '/@/api/dashboard/index';
+  import { getDateByShortcutQueryKey, ShortcutQueryKeyEnum } from '../hooks/useDate';
   interface Props {
     width?: string;
     height?: string;
@@ -77,11 +78,8 @@
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
   onMounted(async () => {
-    const endTs = Date.now();
     const res = await getTrendData({
-      startTs: endTs - 2592000000,
-      endTs,
-      interval: 86400000,
+      ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_30_DAY),
       trend: 'TENANT_TREND',
     });
     const transferResult = res.map((item) => [item.ts, item.value]);

-import { formatToDateTime } from '/@/utils/dateUtil';
+import { dateUtil, formatToDateTime } from '/@/utils/dateUtil';
 import { ref } from 'vue';
 import { getTrendData } from '/@/api/dashboard';
 
+export enum ShortcutQueryKeyEnum {
+  LATEST_30_DAY = 'LATEST_30_DAY',
+  LATEST_3_MONTH = 'LATEST_3_MONTH',
+  LATEST_1_YEAR = 'LATEST_1_YEAR',
+}
+
+export function getDateByShortcutQueryKey(value: ShortcutQueryKeyEnum) {
+  const mapping = {
+    [ShortcutQueryKeyEnum.LATEST_30_DAY]: () => {
+      return {
+        startTs: dateUtil().subtract(30, 'day').startOf('day').valueOf(),
+        interval: 24 * 60 * 60 * 1000,
+      };
+    },
+    [ShortcutQueryKeyEnum.LATEST_3_MONTH]: () => {
+      return {
+        startTs: dateUtil().subtract(3, 'month').startOf('day').valueOf(),
+        interval: 24 * 60 * 60 * 1000,
+      };
+    },
+    [ShortcutQueryKeyEnum.LATEST_1_YEAR]: () => {
+      return {
+        startTs: dateUtil().subtract(1, 'year').startOf('day').valueOf(),
+        interval: 30 * 24 * 60 * 60 * 1000,
+      };
+    },
+  };
+
+  const result = mapping?.[value]?.();
+
+  return {
+    ...result,
+    endTs: dateUtil().add(1, 'day').startOf('day').valueOf(),
+  };
+}
+
 export function useDate() {
   const tenantDateValue = ref([]);
   const customerDateValue = ref([]);
@@ -10,26 +46,23 @@ export function useDate() {
   const activeTenantIndex = ref(0);
   const activeCustomerIndex = ref(0);
   const TenantOrCustomerDateList = ref([
-    { label: '30天', value: 2592000000 },
-    { label: '最近三个月', value: 7776000000 },
-    { label: '最近一年', value: 31536000000 },
+    { label: '30天', value: ShortcutQueryKeyEnum.LATEST_30_DAY },
+    { label: '最近三个月', value: ShortcutQueryKeyEnum.LATEST_3_MONTH },
+    { label: '最近一年', value: ShortcutQueryKeyEnum.LATEST_1_YEAR },
   ]);
 
   // 租户趋势和客户趋势快速选择时间
   async function quickQueryTenantOrCustomerTime(
     index: number,
-    value: number,
+    value: ShortcutQueryKeyEnum,
     flag: 'tenant' | 'customer'
   ) {
-    const endTs = Date.now();
     if (flag === 'tenant') {
       if (activeTenantIndex.value === index) return;
       activeTenantIndex.value = index;
       tenantDateValue.value = [];
       const res = await getTrendData({
-        startTs: endTs - value,
-        endTs,
-        interval: value === 2592000000 ? 86400000 : value === 7776000000 ? 172800000 : 2592000000,
+        ...getDateByShortcutQueryKey(value),
         trend: 'TENANT_TREND',
       });
       tenantTrendList.value = res.map((item) => [item.ts, item.value]);
@@ -38,9 +71,7 @@ export function useDate() {
       activeCustomerIndex.value = index;
       customerDateValue.value = [];
       const res = await getTrendData({
-        startTs: endTs - value,
-        endTs,
-        interval: value === 2592000000 ? 86400000 : value === 7776000000 ? 172800000 : 2592000000,
+        ...getDateByShortcutQueryKey(value),
         trend: 'CUSTOMER_TREND',
       });
       customerTrendList.value = res.map((item) => [item.ts, item.value]);