Commit 5004159d6303f6ecad6eae17bd16bce22acb3286
Committed by
xp.Huang
1 parent
386a679d
perf(src/views/share): 优化日期控件,添加快捷选项,动态更新时间
Showing
3 changed files
with
35 additions
and
6 deletions
@@ -9,6 +9,8 @@ import { useChartDataSocket } from './useChartDataSocket' | @@ -9,6 +9,8 @@ import { useChartDataSocket } from './useChartDataSocket' | ||
9 | import { customRequest } from '@/api/external/customRequest' | 9 | import { customRequest } from '@/api/external/customRequest' |
10 | import { useFilterFn } from './useFilterFn' | 10 | import { useFilterFn } from './useFilterFn' |
11 | import { RequestContentTypeEnum } from '@/enums/external/httpEnum' | 11 | import { RequestContentTypeEnum } from '@/enums/external/httpEnum' |
12 | +import dayjs from 'dayjs' | ||
13 | + | ||
12 | 14 | ||
13 | // 获取类型 | 15 | // 获取类型 |
14 | type ChartEditStoreType = typeof useChartEditStore | 16 | type ChartEditStoreType = typeof useChartEditStore |
@@ -67,6 +69,18 @@ export const useChartDataFetch = ( | @@ -67,6 +69,18 @@ export const useChartDataFetch = ( | ||
67 | clearInterval(fetchInterval) | 69 | clearInterval(fetchInterval) |
68 | 70 | ||
69 | const fetchFn = async () => { | 71 | const fetchFn = async () => { |
72 | + let startTsValue = null | ||
73 | + let endTsValue = null | ||
74 | + const { requestParams } = toRaw(targetComponent.request) | ||
75 | + const { Params } = requestParams | ||
76 | + const { entityType, startTs, endTs } = Params | ||
77 | + const days = Math.ceil((endTs - startTs) / (1 * 60 * 60 * 24 * 1000)) | ||
78 | + if (entityType === 'DEVICE') { | ||
79 | + startTsValue = Date.now() - days <= 32 ? 2592000000: days <= 8 ? 604800000 : startTs | ||
80 | + endTsValue = Date.now() | ||
81 | + toRaw(targetComponent.request).requestParams.Params.startTs = startTsValue | ||
82 | + toRaw(targetComponent.request).requestParams.Params.endTs = endTsValue | ||
83 | + } | ||
70 | const res = await customRequest(toRaw(targetComponent.request)) | 84 | const res = await customRequest(toRaw(targetComponent.request)) |
71 | if (res) { | 85 | if (res) { |
72 | try { | 86 | try { |
@@ -106,9 +120,9 @@ export const useChartDataFetch = ( | @@ -106,9 +120,9 @@ export const useChartDataFetch = ( | ||
106 | } catch (error) { | 120 | } catch (error) { |
107 | console.log(error) | 121 | console.log(error) |
108 | } | 122 | } |
109 | - } | 123 | + } |
110 | 124 | ||
111 | - if (isPreview()) { | 125 | + if (isPreview()) { |
112 | requestIntervalFn() | 126 | requestIntervalFn() |
113 | const chartEditStore = useChartEditStore() | 127 | const chartEditStore = useChartEditStore() |
114 | const { initial } = useChartDataSocket() | 128 | const { initial } = useChartDataSocket() |
@@ -116,9 +130,9 @@ export const useChartDataFetch = ( | @@ -116,9 +130,9 @@ export const useChartDataFetch = ( | ||
116 | * 支持分组也可以接受ws | 130 | * 支持分组也可以接受ws |
117 | * 如果是分组并且绑定了ws | 131 | * 如果是分组并且绑定了ws |
118 | */ | 132 | */ |
119 | - chartEditStore.getComponentList?.forEach((item:CreateComponentType | CreateComponentGroupType)=>{ | ||
120 | - if(item.isGroup){ | ||
121 | - if(item.request.requestUrl?.includes('ws')){ | 133 | + chartEditStore.getComponentList?.forEach((item: CreateComponentType | CreateComponentGroupType) => { |
134 | + if (item.isGroup) { | ||
135 | + if (item.request.requestUrl?.includes('ws')) { | ||
122 | initial(item, useChartEditStore, updateCallback) | 136 | initial(item, useChartEditStore, updateCallback) |
123 | } | 137 | } |
124 | } | 138 | } |
@@ -240,6 +240,7 @@ const defaultTypeUpdate = (v: string) => { | @@ -240,6 +240,7 @@ const defaultTypeUpdate = (v: string) => { | ||
240 | } | 240 | } |
241 | 241 | ||
242 | const shortCutSelect = (value: number) => { | 242 | const shortCutSelect = (value: number) => { |
243 | + console.log(value) | ||
243 | startTs.value = Date.now() - value | 244 | startTs.value = Date.now() - value |
244 | endTs.value = Date.now() | 245 | endTs.value = Date.now() |
245 | props.optionData.dataset = [startTs.value, endTs.value] as any | 246 | props.optionData.dataset = [startTs.value, endTs.value] as any |
@@ -31,6 +31,20 @@ const timePeriod = ref<Nullable<[number, number]>>(null) | @@ -31,6 +31,20 @@ const timePeriod = ref<Nullable<[number, number]>>(null) | ||
31 | const agg = ref() | 31 | const agg = ref() |
32 | const interval = ref() | 32 | const interval = ref() |
33 | const limit = ref(7) | 33 | const limit = ref(7) |
34 | +const rangeShortcuts = { | ||
35 | + 昨天: () => { | ||
36 | + const cur = new Date().getTime() | ||
37 | + return [cur - 86400000, cur] as const | ||
38 | + }, | ||
39 | + 最近7天: () => { | ||
40 | + const cur = new Date().getTime() | ||
41 | + return [cur - 604800000, cur] as const | ||
42 | + }, | ||
43 | + 最近30天: () => { | ||
44 | + const cur = new Date().getTime() | ||
45 | + return [cur - 2592000000, cur] as const | ||
46 | + } | ||
47 | +} | ||
34 | 48 | ||
35 | const getRangeOptions = (number: number) => { | 49 | const getRangeOptions = (number: number) => { |
36 | for (let i = 0; i < defaultIntervalOptions.length; i++) { | 50 | for (let i = 0; i < defaultIntervalOptions.length; i++) { |
@@ -97,7 +111,7 @@ watch(() => props.value, (target) => { | @@ -97,7 +111,7 @@ watch(() => props.value, (target) => { | ||
97 | <NGrid :cols="24"> | 111 | <NGrid :cols="24"> |
98 | <NGi :span="16"> | 112 | <NGi :span="16"> |
99 | <NFormItem :show-label="false"> | 113 | <NFormItem :show-label="false"> |
100 | - <NDatePicker v-model:value="timePeriod" type="datetimerange" placeholder="请选择时间范围" | 114 | + <NDatePicker :shortcuts="rangeShortcuts" v-model:value="timePeriod" type="datetimerange" placeholder="请选择时间范围" |
101 | @update-value="handleTimePerionChange" clearable :default-time="['00:00:00', '23:59:59']"></NDatePicker> | 115 | @update-value="handleTimePerionChange" clearable :default-time="['00:00:00', '23:59:59']"></NDatePicker> |
102 | </NFormItem> | 116 | </NFormItem> |
103 | </NGi> | 117 | </NGi> |