Commit 09c1aa049332da29ee335e030d6ff6f1947ec7d9
1 parent
ccd59f74
perf(src/packages/components): 优化日期控件,区分是否是从快捷选项里选择的
Showing
2 changed files
with
22 additions
and
9 deletions
... | ... | @@ -73,10 +73,11 @@ export const useChartDataFetch = ( |
73 | 73 | let endTsValue = null |
74 | 74 | const {requestParams} = toRaw(targetComponent.request) |
75 | 75 | const {Params} = requestParams |
76 | - const {entityType, startTs, endTs} = Params | |
76 | + const {startTs, endTs, shortcutsSelect} = Params | |
77 | 77 | let days = Math.ceil(((endTs as unknown as number) - (startTs as unknown as number)) / (1 * 60 * 60 * 24 * 1000)) |
78 | 78 | const ShortcutsDays = [1, 7, 30] |
79 | - if (entityType === 'DEVICE') { | |
79 | + // shortcutsSelect为真 | |
80 | + if (shortcutsSelect) { | |
80 | 81 | //等于这三个,说明是从快捷选项里面选的 |
81 | 82 | if(ShortcutsDays.includes(days)) { |
82 | 83 | days = days <= 2 ? 1 : days<= 8 ? 7 : 30 |
... | ... | @@ -85,12 +86,12 @@ export const useChartDataFetch = ( |
85 | 86 | endTsValue = dayjs().endOf('day').valueOf() |
86 | 87 | ;(toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTsValue as number |
87 | 88 | ;(toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTsValue |
88 | - } else { | |
89 | - //否则,选择的是什么日期区间就是什么 | |
90 | - (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number | |
91 | - (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number | |
92 | 89 | } |
93 | - } | |
90 | + } else { | |
91 | + //否则,选择的是什么日期区间就是什么 | |
92 | + (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number | |
93 | + (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number | |
94 | + } | |
94 | 95 | const res = await customRequest(toRaw(targetComponent.request)) |
95 | 96 | if (res) { |
96 | 97 | try { | ... | ... |
... | ... | @@ -11,6 +11,7 @@ interface Value { |
11 | 11 | startTs?: Nullable<number> |
12 | 12 | endTs?: Nullable<number> |
13 | 13 | limit?: Nullable<number> |
14 | + shortcutsSelect?: Nullable<boolean> | |
14 | 15 | } |
15 | 16 | |
16 | 17 | const props = withDefaults( |
... | ... | @@ -32,20 +33,25 @@ const timePeriod = ref<Nullable<[number, number]>>(null) |
32 | 33 | const agg = ref() |
33 | 34 | const interval = ref() |
34 | 35 | const limit = ref(7) |
36 | +//区分是否是从快捷选项里选择的 | |
37 | +const shortcutsSelect = ref(false) | |
35 | 38 | const rangeShortcuts = { |
36 | 39 | 昨天: () => { |
40 | + shortcutsSelect.value = true | |
37 | 41 | return [ |
38 | 42 | dayjs().startOf('day').valueOf(), |
39 | 43 | dayjs().endOf('day').valueOf() |
40 | 44 | ] as const |
41 | 45 | }, |
42 | 46 | 最近7天: () => { |
47 | + shortcutsSelect.value = true | |
43 | 48 | return [ |
44 | 49 | dayjs().subtract(6, 'day').startOf('day').valueOf(), |
45 | 50 | dayjs().endOf('day').valueOf() |
46 | 51 | ] as const |
47 | 52 | }, |
48 | 53 | 最近30天: () => { |
54 | + shortcutsSelect.value = true | |
49 | 55 | return [ |
50 | 56 | dayjs().subtract(29, 'day').startOf('day').valueOf(), |
51 | 57 | dayjs().endOf('day').valueOf() |
... | ... | @@ -74,10 +80,15 @@ const getIntervalTimeOptions = computed(() => { |
74 | 80 | return getRangeOptions(diff) |
75 | 81 | }) |
76 | 82 | |
83 | +const handleTimeRangeBlur = () => { | |
84 | + //从面板里面选择 | |
85 | + shortcutsSelect.value = false | |
86 | +} | |
87 | + | |
77 | 88 | const handleTimePerionChange = (value: number[]) => { |
78 | 89 | const [startTs, endTs] = value || [] |
79 | - emit('update:value', {...props.value, startTs, endTs, interval: null}) | |
80 | - emit('change', {...props.value || {}, startTs, endTs, interval: null}) | |
90 | + emit('update:value', {...props.value, startTs, endTs, interval: null, shortcutsSelect: shortcutsSelect.value}) | |
91 | + emit('change', {...props.value || {}, startTs, endTs, interval: null, shortcutsSelect: shortcutsSelect.value}) | |
81 | 92 | } |
82 | 93 | |
83 | 94 | const handleAggChange = (value: string) => { |
... | ... | @@ -120,6 +131,7 @@ watch(() => props.value, (target) => { |
120 | 131 | <NFormItem :show-label="false"> |
121 | 132 | <NDatePicker :shortcuts="rangeShortcuts" v-model:value="timePeriod" type="datetimerange" |
122 | 133 | placeholder="请选择时间范围" |
134 | + @blur="handleTimeRangeBlur" | |
123 | 135 | @update-value="handleTimePerionChange" clearable |
124 | 136 | :default-time="['00:00:00', '23:59:59']"></NDatePicker> |
125 | 137 | </NFormItem> | ... | ... |