简柏林 / thingskit-front · Commits

Commit c28bafa3d5cbe8bf7a9b82301e37542d3a3fe2aa

Authored by ww
1 parent 6369ad05

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

Inline Side-by-side
Showing 5 changed files with 78 additions and 23 deletions
@@ -2,9 +2,10 @@ @@ -2,9 +2,10 @@
2 <div ref="chartRef" :style="{ height, width }"></div> 2 <div ref="chartRef" :style="{ height, width }"></div>
3 </template> 3 </template>
4 <script lang="ts" setup> 4 <script lang="ts" setup>
5 - import { ref, Ref, withDefaults, onMounted, watch } from 'vue'; 5 + import { ref, Ref, onMounted, watch } from 'vue';
6 import { useECharts } from '/@/hooks/web/useECharts'; 6 import { useECharts } from '/@/hooks/web/useECharts';
7 import { getTrendData } from '/@/api/dashboard'; 7 import { getTrendData } from '/@/api/dashboard';
  8 + import { getDateByShortcutQueryKey, ShortcutQueryKeyEnum } from '../hooks/useDate';
8 9
9 interface Props { 10 interface Props {
10 width?: string; 11 width?: string;
@@ -77,11 +78,8 @@ @@ -77,11 +78,8 @@
77 const chartRef = ref<HTMLDivElement | null>(null); 78 const chartRef = ref<HTMLDivElement | null>(null);
78 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); 79 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
79 onMounted(async () => { 80 onMounted(async () => {
80 - const endTs = Date.now();  
81 const res = await getTrendData({ 81 const res = await getTrendData({
82 - startTs: endTs - 2592000000,  
83 - endTs,  
84 - interval: 86400000, 82 + ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_30_DAY),
85 trend: 'CUSTOMER_TREND', 83 trend: 'CUSTOMER_TREND',
86 }); 84 });
87 85
@@ -95,6 +95,20 @@ @@ -95,6 +95,20 @@
95 > 95 >
96 <template #extra> 96 <template #extra>
97 <div class="extra-date"> 97 <div class="extra-date">
  98 + <Tooltip :overlayStyle="{ maxWidth: '340px' }">
  99 + <template #title>
  100 + <section>
  101 + <div>30天: 查询最近30天的数据,间隔时间为1天.</div>
  102 + <div>最近三个月: 查询最近三个月的数据,间隔时间为1天.</div>
  103 + <div>最近一年: 查询最近一年的数据,间隔时间为30天.</div>
  104 + <div>
  105 + 间隔时间:
  106 + 以当前时间作为结束时间,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
  107 + </div>
  108 + </section>
  109 + </template>
  110 + <QuestionCircleOutlined class="!mr-2 cursor-pointer" />
  111 + </Tooltip>
98 <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value"> 112 <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value">
99 <span 113 <span
100 @click="quickQueryTenantOrCustomerTime(index, item.value)" 114 @click="quickQueryTenantOrCustomerTime(index, item.value)"
@@ -80,6 +80,20 @@ @@ -80,6 +80,20 @@
80 > 80 >
81 <template #extra> 81 <template #extra>
82 <div class="extra-date"> 82 <div class="extra-date">
  83 + <Tooltip :overlayStyle="{ maxWidth: '340px' }">
  84 + <template #title>
  85 + <section>
  86 + <div>30天: 查询最近30天的数据,间隔时间为1天.</div>
  87 + <div>最近三个月: 查询最近三个月的数据,间隔时间为1天.</div>
  88 + <div>最近一年: 查询最近一年的数据,间隔时间为30天.</div>
  89 + <div>
  90 + 间隔时间:
  91 + 以当前时间作为结束时间,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
  92 + </div>
  93 + </section>
  94 + </template>
  95 + <QuestionCircleOutlined class="!mr-2 cursor-pointer" />
  96 + </Tooltip>
83 <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value"> 97 <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value">
84 <span 98 <span
85 @click="quickQueryTenantOrCustomerTime(index, item.value, 'tenant')" 99 @click="quickQueryTenantOrCustomerTime(index, item.value, 'tenant')"
@@ -445,7 +459,7 @@ @@ -445,7 +459,7 @@
445 if (activeIndex.value === index) return; 459 if (activeIndex.value === index) return;
446 activeIndex.value = index; 460 activeIndex.value = index;
447 dateValue.value = ''; 461 dateValue.value = '';
448 - console.log(interval); 462 +
449 if (isCustomer) { 463 if (isCustomer) {
450 if (activeKey.value === '1') { 464 if (activeKey.value === '1') {
451 const data = await getTrendData({ 465 const data = await getTrendData({
@@ -2,9 +2,10 @@ @@ -2,9 +2,10 @@
2 <div ref="chartRef" :style="{ height, width }"></div> 2 <div ref="chartRef" :style="{ height, width }"></div>
3 </template> 3 </template>
4 <script lang="ts" setup> 4 <script lang="ts" setup>
5 - import { ref, Ref, withDefaults, onMounted, watch } from 'vue'; 5 + import { ref, Ref, onMounted, watch } from 'vue';
6 import { useECharts } from '/@/hooks/web/useECharts'; 6 import { useECharts } from '/@/hooks/web/useECharts';
7 import { getTrendData } from '/@/api/dashboard/index'; 7 import { getTrendData } from '/@/api/dashboard/index';
  8 + import { getDateByShortcutQueryKey, ShortcutQueryKeyEnum } from '../hooks/useDate';
8 interface Props { 9 interface Props {
9 width?: string; 10 width?: string;
10 height?: string; 11 height?: string;
@@ -77,11 +78,8 @@ @@ -77,11 +78,8 @@
77 const chartRef = ref<HTMLDivElement | null>(null); 78 const chartRef = ref<HTMLDivElement | null>(null);
78 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); 79 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
79 onMounted(async () => { 80 onMounted(async () => {
80 - const endTs = Date.now();  
81 const res = await getTrendData({ 81 const res = await getTrendData({
82 - startTs: endTs - 2592000000,  
83 - endTs,  
84 - interval: 86400000, 82 + ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_30_DAY),
85 trend: 'TENANT_TREND', 83 trend: 'TENANT_TREND',
86 }); 84 });
87 const transferResult = res.map((item) => [item.ts, item.value]); 85 const transferResult = res.map((item) => [item.ts, item.value]);
1 -import { formatToDateTime } from '/@/utils/dateUtil'; 1 +import { dateUtil, formatToDateTime } from '/@/utils/dateUtil';
2 import { ref } from 'vue'; 2 import { ref } from 'vue';
3 import { getTrendData } from '/@/api/dashboard'; 3 import { getTrendData } from '/@/api/dashboard';
4 4
  5 +export enum ShortcutQueryKeyEnum {
  6 + LATEST_30_DAY = 'LATEST_30_DAY',
  7 + LATEST_3_MONTH = 'LATEST_3_MONTH',
  8 + LATEST_1_YEAR = 'LATEST_1_YEAR',
  9 +}
  10 +
  11 +export function getDateByShortcutQueryKey(value: ShortcutQueryKeyEnum) {
  12 + const mapping = {
  13 + [ShortcutQueryKeyEnum.LATEST_30_DAY]: () => {
  14 + return {
  15 + startTs: dateUtil().subtract(30, 'day').startOf('day').valueOf(),
  16 + interval: 24 * 60 * 60 * 1000,
  17 + };
  18 + },
  19 + [ShortcutQueryKeyEnum.LATEST_3_MONTH]: () => {
  20 + return {
  21 + startTs: dateUtil().subtract(3, 'month').startOf('day').valueOf(),
  22 + interval: 24 * 60 * 60 * 1000,
  23 + };
  24 + },
  25 + [ShortcutQueryKeyEnum.LATEST_1_YEAR]: () => {
  26 + return {
  27 + startTs: dateUtil().subtract(1, 'year').startOf('day').valueOf(),
  28 + interval: 30 * 24 * 60 * 60 * 1000,
  29 + };
  30 + },
  31 + };
  32 +
  33 + const result = mapping?.[value]?.();
  34 +
  35 + return {
  36 + ...result,
  37 + endTs: dateUtil().add(1, 'day').startOf('day').valueOf(),
  38 + };
  39 +}
  40 +
5 export function useDate() { 41 export function useDate() {
6 const tenantDateValue = ref([]); 42 const tenantDateValue = ref([]);
7 const customerDateValue = ref([]); 43 const customerDateValue = ref([]);
@@ -10,26 +46,23 @@ export function useDate() { @@ -10,26 +46,23 @@ export function useDate() {
10 const activeTenantIndex = ref(0); 46 const activeTenantIndex = ref(0);
11 const activeCustomerIndex = ref(0); 47 const activeCustomerIndex = ref(0);
12 const TenantOrCustomerDateList = ref([ 48 const TenantOrCustomerDateList = ref([
13 - { label: '30天', value: 2592000000 },  
14 - { label: '最近三个月', value: 7776000000 },  
15 - { label: '最近一年', value: 31536000000 }, 49 + { label: '30天', value: ShortcutQueryKeyEnum.LATEST_30_DAY },
  50 + { label: '最近三个月', value: ShortcutQueryKeyEnum.LATEST_3_MONTH },
  51 + { label: '最近一年', value: ShortcutQueryKeyEnum.LATEST_1_YEAR },
16 ]); 52 ]);
17 53
18 // 租户趋势和客户趋势快速选择时间 54 // 租户趋势和客户趋势快速选择时间
19 async function quickQueryTenantOrCustomerTime( 55 async function quickQueryTenantOrCustomerTime(
20 index: number, 56 index: number,
21 - value: number, 57 + value: ShortcutQueryKeyEnum,
22 flag: 'tenant' | 'customer' 58 flag: 'tenant' | 'customer'
23 ) { 59 ) {
24 - const endTs = Date.now();  
25 if (flag === 'tenant') { 60 if (flag === 'tenant') {
26 if (activeTenantIndex.value === index) return; 61 if (activeTenantIndex.value === index) return;
27 activeTenantIndex.value = index; 62 activeTenantIndex.value = index;
28 tenantDateValue.value = []; 63 tenantDateValue.value = [];
29 const res = await getTrendData({ 64 const res = await getTrendData({
30 - startTs: endTs - value,  
31 - endTs,  
32 - interval: value === 2592000000 ? 86400000 : value === 7776000000 ? 172800000 : 2592000000, 65 + ...getDateByShortcutQueryKey(value),
33 trend: 'TENANT_TREND', 66 trend: 'TENANT_TREND',
34 }); 67 });
35 tenantTrendList.value = res.map((item) => [item.ts, item.value]); 68 tenantTrendList.value = res.map((item) => [item.ts, item.value]);
@@ -38,9 +71,7 @@ export function useDate() { @@ -38,9 +71,7 @@ export function useDate() {
38 activeCustomerIndex.value = index; 71 activeCustomerIndex.value = index;
39 customerDateValue.value = []; 72 customerDateValue.value = [];
40 const res = await getTrendData({ 73 const res = await getTrendData({
41 - startTs: endTs - value,  
42 - endTs,  
43 - interval: value === 2592000000 ? 86400000 : value === 7776000000 ? 172800000 : 2592000000, 74 + ...getDateByShortcutQueryKey(value),
44 trend: 'CUSTOMER_TREND', 75 trend: 'CUSTOMER_TREND',
45 }); 76 });
46 customerTrendList.value = res.map((item) => [item.ts, item.value]); 77 customerTrendList.value = res.map((item) => [item.ts, item.value]);