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>
|
...
|
...
|
|