Commit 1a890c96459b2e2846f09a407d807e53785e6494

Authored by ww
1 parent 2bc4c607

perf: 优化时期选择起始时间范围

... ... @@ -74,9 +74,10 @@ export const useChartDataFetch = (
74 74 const {requestParams} = toRaw(targetComponent.request)
75 75 const {Params} = requestParams
76 76 const {entityType, startTs, endTs} = Params
77   - const days = Math.ceil(((endTs as unknown as number) - (startTs as unknown as number)) / (1 * 60 * 60 * 24 * 1000))
  77 + let days = Math.ceil(((endTs as unknown as number) - (startTs as unknown as number)) / (1 * 60 * 60 * 24 * 1000))
78 78 if (entityType === 'DEVICE') {
79   - startTsValue = Date.now() - (days <= 32 ? 2592000000 : days <= 8 ? 604800000 : days <= 2 ? 86400000 : startTs as unknown as number)
  79 + days = days <= 2 ? 1 : days<= 8 ? 7 : 30
  80 + startTsValue = dayjs().subtract(days - 1, 'day').startOf('day').valueOf()
80 81 startTsValue = dayjs(startTsValue).startOf('day').valueOf()
81 82 endTsValue = dayjs().endOf('day').valueOf()
82 83 ;(toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTsValue as number
... ...
1 1 <script lang="ts" setup>
2   -import { NFormItem, NGi, NGrid, NSelect, NDatePicker, NInputNumber } from 'naive-ui';
3   -import { defaultIntervalOptions, aggergationOptions } from '../DynamicForm/timeInterval'
4   -import { unref, computed, ref, watch } from 'vue';
5   -import { isObject } from '@/utils/external/is';
  2 +import {NFormItem, NGi, NGrid, NSelect, NDatePicker, NInputNumber} from 'naive-ui';
  3 +import {defaultIntervalOptions, aggergationOptions} from '../DynamicForm/timeInterval'
  4 +import {unref, computed, ref, watch} from 'vue';
  5 +import {isObject} from '@/utils/external/is';
  6 +import dayjs from "dayjs";
6 7
7 8 interface Value {
8 9 agg?: Nullable<string>
... ... @@ -13,12 +14,12 @@ interface Value {
13 14 }
14 15
15 16 const props = withDefaults(
16   - defineProps<{
17   - value?: Value
18   - }>(),
19   - {
20   - value: () => ({})
21   - }
  17 + defineProps<{
  18 + value?: Value
  19 + }>(),
  20 + {
  21 + value: () => ({})
  22 + }
22 23 )
23 24
24 25 const emit = defineEmits<{
... ... @@ -33,16 +34,22 @@ const interval = ref()
33 34 const limit = ref(7)
34 35 const rangeShortcuts = {
35 36 昨天: () => {
36   - const cur = new Date().getTime()
37   - return [cur - 86400000, cur] as const
  37 + return [
  38 + dayjs().startOf('day').valueOf(),
  39 + dayjs().endOf('day').valueOf()
  40 + ] as const
38 41 },
39 42 最近7天: () => {
40   - const cur = new Date().getTime()
41   - return [cur - 604800000, cur] as const
  43 + return [
  44 + dayjs().subtract(6, 'day').startOf('day').valueOf(),
  45 + dayjs().endOf('day').valueOf()
  46 + ] as const
42 47 },
43 48 最近30天: () => {
44   - const cur = new Date().getTime()
45   - return [cur - 2592000000, cur] as const
  49 + return [
  50 + dayjs().subtract(29, 'day').startOf('day').valueOf(),
  51 + dayjs().endOf('day').valueOf()
  52 + ] as const
46 53 }
47 54 }
48 55
... ... @@ -69,32 +76,32 @@ const getIntervalTimeOptions = computed(() => {
69 76
70 77 const handleTimePerionChange = (value: number[]) => {
71 78 const [startTs, endTs] = value || []
72   - emit('update:value', { ...props.value, startTs, endTs, interval: null })
73   - emit('change', { ...props.value || {}, startTs, endTs, interval: null })
  79 + emit('update:value', {...props.value, startTs, endTs, interval: null})
  80 + emit('change', {...props.value || {}, startTs, endTs, interval: null})
74 81 }
75 82
76 83 const handleAggChange = (value: string) => {
77   - const _value = { ...props.value, agg: value, ...(value === 'NONE' ? { limit: 7 } : {}) }
  84 + const _value = {...props.value, agg: value, ...(value === 'NONE' ? {limit: 7} : {})}
78 85 Reflect.deleteProperty(_value, value === 'NONE' ? 'interval' : 'limit')
79 86 emit('update:value', _value)
80 87 emit('change', _value)
81 88 }
82 89
83 90 const handleIntervalChange = (value: number) => {
84   - const _value = { ...props.value, interval: value }
  91 + const _value = {...props.value, interval: value}
85 92 emit('update:value', _value)
86 93 emit('change', _value)
87 94 }
88 95
89 96 const handleLimitChange = (value: Nullable<number>) => {
90   - const _value = { ...props.value, limit: value }
  97 + const _value = {...props.value, limit: value}
91 98 emit('update:value', _value)
92 99 emit('change', _value)
93 100 }
94 101
95 102 watch(() => props.value, (target) => {
96 103 if (target && isObject(target)) {
97   - const { agg: _agg, interval: _interval, startTs, endTs, limit: _limit } = target || {}
  104 + const {agg: _agg, interval: _interval, startTs, endTs, limit: _limit} = target || {}
98 105 if (startTs && endTs) {
99 106 timePeriod.value = [startTs!, endTs!]
100 107 } else {
... ... @@ -111,26 +118,29 @@ watch(() => props.value, (target) => {
111 118 <NGrid :cols="24">
112 119 <NGi :span="16">
113 120 <NFormItem :show-label="false">
114   - <NDatePicker :shortcuts="rangeShortcuts" v-model:value="timePeriod" type="datetimerange" placeholder="请选择时间范围"
115   - @update-value="handleTimePerionChange" clearable :default-time="['00:00:00', '23:59:59']"></NDatePicker>
  121 + <NDatePicker :shortcuts="rangeShortcuts" v-model:value="timePeriod" type="datetimerange"
  122 + placeholder="请选择时间范围"
  123 + @update-value="handleTimePerionChange" clearable
  124 + :default-time="['00:00:00', '23:59:59']"></NDatePicker>
116 125 </NFormItem>
117 126 </NGi>
118 127 <NGi :span="4">
119 128 <NFormItem :show-label="false">
120 129 <NSelect v-model:value="agg" @update:value="handleAggChange" :options="aggergationOptions" label-field="name"
121   - value-field="id" placeholder="聚合方式" clearable></NSelect>
  130 + value-field="id" placeholder="聚合方式" clearable></NSelect>
122 131 </NFormItem>
123 132 </NGi>
124 133 <NGi v-if="!getShowLimit" :span="4">
125 134 <NFormItem :show-label="false">
126 135 <NSelect v-model:value="interval" @update:value="handleIntervalChange" :options="getIntervalTimeOptions"
127   - label-field="name" value-field="id" placeholder="间隔时间" clearable></NSelect>
  136 + label-field="name" value-field="id" placeholder="间隔时间" clearable></NSelect>
128 137 </NFormItem>
129 138 </NGi>
130 139 <NGi v-if="getShowLimit" :span="4">
131 140 <NFormItem :show-label="false">
132 141 <NInputNumber v-model:value="limit" :default-value="7" @update:value="handleLimitChange"
133   - :parse="(input: string) => parseInt(input)" :min="7" :max="50000" :step="1" placeholder="请输入最大条数" />
  142 + :parse="(input: string) => parseInt(input)" :min="7" :max="50000" :step="1"
  143 + placeholder="请输入最大条数"/>
134 144 </NFormItem>
135 145 </NGi>
136 146 </NGrid>
... ...