Commit 31f6730849b732ac86326de1fa5c4f914f4fc20d
1 parent
a073b20f
feat(公共接口/动态表单): 时间区间选择器新增周期范围选择配置
Showing
8 changed files
with
497 additions
and
22 deletions
@@ -3,6 +3,7 @@ import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentI | @@ -3,6 +3,7 @@ import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentI | ||
3 | import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d" | 3 | import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d" |
4 | import { isShareMode } from "@/views/share/hook" | 4 | import { isShareMode } from "@/views/share/hook" |
5 | import { customHttp } from "./http" | 5 | import { customHttp } from "./http" |
6 | +import { SelectTimeAggregationFieldEnum } from "@/views/chart/ContentConfigurations/components/ChartData/external/components/SelectTImeAggregation" | ||
6 | 7 | ||
7 | export enum ParamsType { | 8 | export enum ParamsType { |
8 | REQUIRED, | 9 | REQUIRED, |
@@ -91,6 +92,21 @@ const extraValue = (object: Recordable) => { | @@ -91,6 +92,21 @@ const extraValue = (object: Recordable) => { | ||
91 | }, {}) | 92 | }, {}) |
92 | } | 93 | } |
93 | 94 | ||
95 | +const handleParams = (Params: Recordable) => { | ||
96 | + if (Params.keys && Params?.keys?.length) { | ||
97 | + Params.keys = (Params.keys || [] as any).join(',') | ||
98 | + } | ||
99 | + | ||
100 | + const timePeriod = Params[SelectTimeAggregationFieldEnum.TIME_PERIOD] | ||
101 | + if (timePeriod) { | ||
102 | + Params.startTs = Date.now() - timePeriod | ||
103 | + Params.endTs = Date.now() | ||
104 | + Reflect.deleteProperty(Params, SelectTimeAggregationFieldEnum.TIME_PERIOD) | ||
105 | + } | ||
106 | + | ||
107 | + return Object.keys(Params).filter(Boolean).reduce((prev, next) => ({ ...prev, [next]: Params[next] }), {}) | ||
108 | +} | ||
109 | + | ||
94 | export const customRequest = async (request: RequestConfigType) => { | 110 | export const customRequest = async (request: RequestConfigType) => { |
95 | const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType | 111 | const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType |
96 | let { requestUrl } = request as ExtraRequestConfigType | 112 | let { requestUrl } = request as ExtraRequestConfigType |
@@ -105,10 +121,7 @@ export const customRequest = async (request: RequestConfigType) => { | @@ -105,10 +121,7 @@ export const customRequest = async (request: RequestConfigType) => { | ||
105 | 121 | ||
106 | const body = transformBodyValue(Body, requestParamsBodyType) | 122 | const body = transformBodyValue(Body, requestParamsBodyType) |
107 | 123 | ||
108 | - if (Params.keys && Params?.keys?.length) { | ||
109 | - Params.keys = (Params.keys || [] as any).join(',') | ||
110 | - } | ||
111 | - | 124 | + Params = handleParams(Params) |
112 | return customHttp.request<any>({ | 125 | return customHttp.request<any>({ |
113 | url: requestUrl, | 126 | url: requestUrl, |
114 | baseURL: getOriginUrl(requestOriginUrl!), | 127 | baseURL: getOriginUrl(requestOriginUrl!), |
@@ -9,6 +9,7 @@ export interface ParamsItemType { | @@ -9,6 +9,7 @@ export interface ParamsItemType { | ||
9 | key: string | 9 | key: string |
10 | required: boolean | 10 | required: boolean |
11 | value: string | 11 | value: string |
12 | + mores: boolean | ||
12 | } | 13 | } |
13 | 14 | ||
14 | export interface PublicInterfaceRequestParams { | 15 | export interface PublicInterfaceRequestParams { |
@@ -95,7 +95,6 @@ watch( | @@ -95,7 +95,6 @@ watch( | ||
95 | () => props.chartConfig.option.dataset, | 95 | () => props.chartConfig.option.dataset, |
96 | newData => { | 96 | newData => { |
97 | option.dataset = newData | 97 | option.dataset = newData |
98 | - console.log(option.dataset) | ||
99 | }, | 98 | }, |
100 | { | 99 | { |
101 | immediate: true, | 100 | immediate: true, |
src/views/chart/ContentConfigurations/components/ChartData/external/components/DynamicForm/index.vue
@@ -4,6 +4,7 @@ import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSele | @@ -4,6 +4,7 @@ import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSele | ||
4 | import { computed, nextTick, ref, unref, watch } from 'vue'; | 4 | import { computed, nextTick, ref, unref, watch } from 'vue'; |
5 | import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; | 5 | import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; |
6 | import { Help } from '@vicons/ionicons5' | 6 | import { Help } from '@vicons/ionicons5' |
7 | +import { SelectTimeAggregation } from '../SelectTImeAggregation'; | ||
7 | 8 | ||
8 | const props = defineProps<{ | 9 | const props = defineProps<{ |
9 | paramsItemList: ParamsItemType[] | 10 | paramsItemList: ParamsItemType[] |
@@ -13,7 +14,8 @@ const componentMap: { [key in ComponentType]?: any } = { | @@ -13,7 +14,8 @@ const componentMap: { [key in ComponentType]?: any } = { | ||
13 | [ComponentType.SELECT_TREE]: NTreeSelect, | 14 | [ComponentType.SELECT_TREE]: NTreeSelect, |
14 | [ComponentType.SELECT]: NSelect, | 15 | [ComponentType.SELECT]: NSelect, |
15 | [ComponentType.INPUT]: NInput, | 16 | [ComponentType.INPUT]: NInput, |
16 | - [ComponentType.DATE_PICKER]: NDatePicker | 17 | + [ComponentType.DATE_PICKER]: NDatePicker, |
18 | + [ComponentType.SELECT_TIME_AGGREGATION]: SelectTimeAggregation | ||
17 | } | 19 | } |
18 | 20 | ||
19 | const getParamsItemList = computed(() => { | 21 | const getParamsItemList = computed(() => { |
1 | +enum TimeUnitEnum { | ||
2 | + SECOND = 'SECOND', | ||
3 | + MINUTE = 'MINUTE', | ||
4 | + HOUR = 'HOUR', | ||
5 | + DAY = 'DAY', | ||
6 | +} | ||
7 | + | ||
8 | +const unitMapping = { | ||
9 | + [TimeUnitEnum.SECOND]: '秒', | ||
10 | + [TimeUnitEnum.MINUTE]: '分', | ||
11 | + [TimeUnitEnum.HOUR]: '小时', | ||
12 | + [TimeUnitEnum.DAY]: '天', | ||
13 | +} | ||
14 | + | ||
15 | +const unitConversion = { | ||
16 | + [TimeUnitEnum.SECOND]: 1 * 1000, | ||
17 | + [TimeUnitEnum.MINUTE]: 1 * 60 * 1000, | ||
18 | + [TimeUnitEnum.HOUR]: 1 * 60 * 60 * 1000, | ||
19 | + [TimeUnitEnum.DAY]: 1 * 60 * 60 * 24 * 1000, | ||
20 | +} | ||
21 | + | ||
22 | +export const defaultIntervalOptions = [ | ||
23 | + { | ||
24 | + id: 1, | ||
25 | + unit: TimeUnitEnum.SECOND, | ||
26 | + linkage: [ | ||
27 | + { id: 1, unit: TimeUnitEnum.SECOND } | ||
28 | + ] | ||
29 | + }, | ||
30 | + { | ||
31 | + id: 5, | ||
32 | + unit: TimeUnitEnum.SECOND, | ||
33 | + linkage: [ | ||
34 | + { id: 1, unit: TimeUnitEnum.SECOND } | ||
35 | + ] | ||
36 | + }, | ||
37 | + { | ||
38 | + id: 10, | ||
39 | + unit: TimeUnitEnum.SECOND, | ||
40 | + linkage: [ | ||
41 | + { id: 1, unit: TimeUnitEnum.SECOND } | ||
42 | + ] | ||
43 | + }, | ||
44 | + { | ||
45 | + id: 15, | ||
46 | + unit: TimeUnitEnum.SECOND, | ||
47 | + linkage: [ | ||
48 | + { id: 1, unit: TimeUnitEnum.SECOND } | ||
49 | + ] | ||
50 | + }, | ||
51 | + { | ||
52 | + id: 30, | ||
53 | + unit: TimeUnitEnum.SECOND, | ||
54 | + linkage: [ | ||
55 | + { id: 1, unit: TimeUnitEnum.SECOND } | ||
56 | + ] | ||
57 | + }, | ||
58 | + { | ||
59 | + id: 1, | ||
60 | + unit: TimeUnitEnum.MINUTE, | ||
61 | + linkage: [ | ||
62 | + { id: 1, unit: TimeUnitEnum.SECOND }, | ||
63 | + { id: 5, unit: TimeUnitEnum.SECOND }, | ||
64 | + ] | ||
65 | + }, | ||
66 | + { | ||
67 | + id: 2, | ||
68 | + unit: TimeUnitEnum.MINUTE, | ||
69 | + linkage: [ | ||
70 | + { id: 1, unit: TimeUnitEnum.SECOND }, | ||
71 | + { id: 5, unit: TimeUnitEnum.SECOND }, | ||
72 | + { id: 10, unit: TimeUnitEnum.SECOND }, | ||
73 | + { id: 15, unit: TimeUnitEnum.SECOND }, | ||
74 | + ] | ||
75 | + }, | ||
76 | + { | ||
77 | + id: 5, | ||
78 | + unit: TimeUnitEnum.MINUTE, | ||
79 | + linkage: [ | ||
80 | + { id: 1, unit: TimeUnitEnum.SECOND }, | ||
81 | + { id: 5, unit: TimeUnitEnum.SECOND }, | ||
82 | + { id: 10, unit: TimeUnitEnum.SECOND }, | ||
83 | + { id: 15, unit: TimeUnitEnum.SECOND }, | ||
84 | + { id: 30, unit: TimeUnitEnum.SECOND }, | ||
85 | + ] | ||
86 | + }, | ||
87 | + { | ||
88 | + id: 10, | ||
89 | + unit: TimeUnitEnum.MINUTE, | ||
90 | + linkage: [ | ||
91 | + { id: 5, unit: TimeUnitEnum.SECOND }, | ||
92 | + { id: 10, unit: TimeUnitEnum.SECOND }, | ||
93 | + { id: 15, unit: TimeUnitEnum.SECOND }, | ||
94 | + { id: 30, unit: TimeUnitEnum.SECOND }, | ||
95 | + { id: 1, unit: TimeUnitEnum.MINUTE }, | ||
96 | + ] | ||
97 | + }, | ||
98 | + { | ||
99 | + id: 15, | ||
100 | + unit: TimeUnitEnum.MINUTE, | ||
101 | + linkage: [ | ||
102 | + { id: 5, unit: TimeUnitEnum.SECOND }, | ||
103 | + { id: 10, unit: TimeUnitEnum.SECOND }, | ||
104 | + { id: 15, unit: TimeUnitEnum.SECOND }, | ||
105 | + { id: 30, unit: TimeUnitEnum.SECOND }, | ||
106 | + { id: 1, unit: TimeUnitEnum.MINUTE }, | ||
107 | + { id: 2, unit: TimeUnitEnum.MINUTE }, | ||
108 | + ] | ||
109 | + }, | ||
110 | + { | ||
111 | + id: 30, | ||
112 | + unit: TimeUnitEnum.MINUTE, | ||
113 | + linkage: [ | ||
114 | + { id: 5, unit: TimeUnitEnum.SECOND }, | ||
115 | + { id: 10, unit: TimeUnitEnum.SECOND }, | ||
116 | + { id: 15, unit: TimeUnitEnum.SECOND }, | ||
117 | + { id: 30, unit: TimeUnitEnum.SECOND }, | ||
118 | + { id: 1, unit: TimeUnitEnum.MINUTE }, | ||
119 | + { id: 2, unit: TimeUnitEnum.MINUTE }, | ||
120 | + ] | ||
121 | + }, | ||
122 | + { | ||
123 | + id: 1, | ||
124 | + unit: TimeUnitEnum.HOUR, | ||
125 | + linkage: [ | ||
126 | + { id: 10, unit: TimeUnitEnum.SECOND }, | ||
127 | + { id: 15, unit: TimeUnitEnum.SECOND }, | ||
128 | + { id: 30, unit: TimeUnitEnum.SECOND }, | ||
129 | + { id: 1, unit: TimeUnitEnum.MINUTE }, | ||
130 | + { id: 2, unit: TimeUnitEnum.MINUTE }, | ||
131 | + { id: 5, unit: TimeUnitEnum.MINUTE }, | ||
132 | + ] | ||
133 | + }, | ||
134 | + { | ||
135 | + id: 2, | ||
136 | + unit: TimeUnitEnum.HOUR, | ||
137 | + linkage: [ | ||
138 | + { id: 15, unit: TimeUnitEnum.SECOND }, | ||
139 | + { id: 30, unit: TimeUnitEnum.SECOND }, | ||
140 | + { id: 1, unit: TimeUnitEnum.MINUTE }, | ||
141 | + { id: 2, unit: TimeUnitEnum.MINUTE }, | ||
142 | + { id: 5, unit: TimeUnitEnum.MINUTE }, | ||
143 | + { id: 10, unit: TimeUnitEnum.MINUTE }, | ||
144 | + { id: 15, unit: TimeUnitEnum.MINUTE }, | ||
145 | + ] | ||
146 | + }, | ||
147 | + { | ||
148 | + id: 5, | ||
149 | + unit: TimeUnitEnum.HOUR, | ||
150 | + linkage: [ | ||
151 | + { id: 1, unit: TimeUnitEnum.MINUTE }, | ||
152 | + { id: 2, unit: TimeUnitEnum.MINUTE }, | ||
153 | + { id: 5, unit: TimeUnitEnum.MINUTE }, | ||
154 | + { id: 10, unit: TimeUnitEnum.MINUTE }, | ||
155 | + { id: 15, unit: TimeUnitEnum.MINUTE }, | ||
156 | + { id: 30, unit: TimeUnitEnum.MINUTE }, | ||
157 | + ] | ||
158 | + }, | ||
159 | + { | ||
160 | + id: 10, | ||
161 | + unit: TimeUnitEnum.HOUR, | ||
162 | + linkage: [ | ||
163 | + { id: 2, unit: TimeUnitEnum.MINUTE }, | ||
164 | + { id: 5, unit: TimeUnitEnum.MINUTE }, | ||
165 | + { id: 10, unit: TimeUnitEnum.MINUTE }, | ||
166 | + { id: 15, unit: TimeUnitEnum.MINUTE }, | ||
167 | + { id: 30, unit: TimeUnitEnum.MINUTE }, | ||
168 | + { id: 1, unit: TimeUnitEnum.HOUR }, | ||
169 | + ] | ||
170 | + }, | ||
171 | + { | ||
172 | + id: 12, | ||
173 | + unit: TimeUnitEnum.HOUR, | ||
174 | + linkage: [ | ||
175 | + { id: 2, unit: TimeUnitEnum.MINUTE }, | ||
176 | + { id: 5, unit: TimeUnitEnum.MINUTE }, | ||
177 | + { id: 10, unit: TimeUnitEnum.MINUTE }, | ||
178 | + { id: 15, unit: TimeUnitEnum.MINUTE }, | ||
179 | + { id: 30, unit: TimeUnitEnum.MINUTE }, | ||
180 | + { id: 1, unit: TimeUnitEnum.HOUR }, | ||
181 | + ] | ||
182 | + }, | ||
183 | + { | ||
184 | + id: 1, | ||
185 | + unit: TimeUnitEnum.DAY, | ||
186 | + linkage: [ | ||
187 | + { id: 5, unit: TimeUnitEnum.MINUTE }, | ||
188 | + { id: 10, unit: TimeUnitEnum.MINUTE }, | ||
189 | + { id: 15, unit: TimeUnitEnum.MINUTE }, | ||
190 | + { id: 30, unit: TimeUnitEnum.MINUTE }, | ||
191 | + { id: 1, unit: TimeUnitEnum.HOUR }, | ||
192 | + { id: 2, unit: TimeUnitEnum.HOUR }, | ||
193 | + ] | ||
194 | + }, | ||
195 | + { | ||
196 | + id: 7, | ||
197 | + unit: TimeUnitEnum.DAY, | ||
198 | + linkage: [ | ||
199 | + { id: 30, unit: TimeUnitEnum.MINUTE }, | ||
200 | + { id: 1, unit: TimeUnitEnum.HOUR }, | ||
201 | + { id: 2, unit: TimeUnitEnum.HOUR }, | ||
202 | + { id: 5, unit: TimeUnitEnum.HOUR }, | ||
203 | + { id: 10, unit: TimeUnitEnum.HOUR }, | ||
204 | + { id: 12, unit: TimeUnitEnum.HOUR }, | ||
205 | + { id: 1, unit: TimeUnitEnum.DAY }, | ||
206 | + ] | ||
207 | + }, | ||
208 | + { | ||
209 | + id: 30, | ||
210 | + unit: TimeUnitEnum.DAY, | ||
211 | + linkage: [ | ||
212 | + { id: 2, unit: TimeUnitEnum.HOUR }, | ||
213 | + { id: 5, unit: TimeUnitEnum.HOUR }, | ||
214 | + { id: 10, unit: TimeUnitEnum.HOUR }, | ||
215 | + { id: 12, unit: TimeUnitEnum.HOUR }, | ||
216 | + { id: 1, unit: TimeUnitEnum.DAY }, | ||
217 | + ] | ||
218 | + }, | ||
219 | +].map(item => { | ||
220 | + return { | ||
221 | + id: item.id * unitConversion[item.unit], | ||
222 | + name: item.id + unitMapping[item.unit], | ||
223 | + linkage: item.linkage.map(item => { | ||
224 | + return { | ||
225 | + id: item.id * unitConversion[item.unit], | ||
226 | + name: item.id + unitMapping[item.unit], | ||
227 | + } | ||
228 | + }) | ||
229 | + } | ||
230 | +}) | ||
231 | + | ||
232 | +export const aggergationOptions = [ | ||
233 | + { id: 'AVG', name: '平均值' }, | ||
234 | + { id: 'MIN', name: '最小值' }, | ||
235 | + { id: 'MAX', name: '最大值' }, | ||
236 | + { id: 'SUM', name: '求和' }, | ||
237 | + { id: 'COUNT', name: '计数' }, | ||
238 | + { id: 'NONE', name: '空' }, | ||
239 | +] |
@@ -6,6 +6,8 @@ import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore | @@ -6,6 +6,8 @@ import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore | ||
6 | import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui" | 6 | import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui" |
7 | import { computed, onMounted, reactive, Ref, ref, unref } from "vue" | 7 | import { computed, onMounted, reactive, Ref, ref, unref } from "vue" |
8 | import { DictEnum } from '@/enums/external/dictEnum' | 8 | import { DictEnum } from '@/enums/external/dictEnum' |
9 | +import { SelectTimeAggregationFieldEnum, SelectTimeAggregationValueTypw } from "../SelectTImeAggregation" | ||
10 | +import { isArray } from "@/utils" | ||
9 | 11 | ||
10 | const GROUP_SEPARATOR = ',' | 12 | const GROUP_SEPARATOR = ',' |
11 | 13 | ||
@@ -15,7 +17,8 @@ export enum BuiltInVariable { | @@ -15,7 +17,8 @@ export enum BuiltInVariable { | ||
15 | ORGANIZATION_ID = 'organizationId', | 17 | ORGANIZATION_ID = 'organizationId', |
16 | DEVICE_PROFILE_ID = 'deviceProfileId', | 18 | DEVICE_PROFILE_ID = 'deviceProfileId', |
17 | DATE_FIXED = 'fixed_date', | 19 | DATE_FIXED = 'fixed_date', |
18 | - DATE_RANGE = 'date_range' | 20 | + DATE_RANGE = 'date_range', |
21 | + SELECT_TIME_AGGREGATION = 'selectTimeAggregation' | ||
19 | } | 22 | } |
20 | 23 | ||
21 | export enum ComponentType { | 24 | export enum ComponentType { |
@@ -23,6 +26,7 @@ export enum ComponentType { | @@ -23,6 +26,7 @@ export enum ComponentType { | ||
23 | SELECT_TREE = 'selectTree', | 26 | SELECT_TREE = 'selectTree', |
24 | DATE_PICKER = 'datePicker', | 27 | DATE_PICKER = 'datePicker', |
25 | INPUT = 'input', | 28 | INPUT = 'input', |
29 | + SELECT_TIME_AGGREGATION = 'selectTimeAggregation' | ||
26 | } | 30 | } |
27 | 31 | ||
28 | 32 | ||
@@ -57,7 +61,9 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -57,7 +61,9 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
57 | 61 | ||
58 | const builtInVariable = ref<BuiltInVariableRecord>() | 62 | const builtInVariable = ref<BuiltInVariableRecord>() |
59 | 63 | ||
60 | - const params = reactive<Recordable & { [key in BuiltInVariable]?: any }>({}) | 64 | + const params = reactive<Recordable & { [key in BuiltInVariable]?: any }>({ |
65 | + [BuiltInVariable.SELECT_TIME_AGGREGATION]: {} | ||
66 | + }) | ||
61 | 67 | ||
62 | const optionsSet = reactive<Recordable>({}) | 68 | const optionsSet = reactive<Recordable>({}) |
63 | 69 | ||
@@ -109,7 +115,6 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -109,7 +115,6 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
109 | if (!validIsExist(BuiltInVariable.DEVICE_PROFILE_ID) || !validIsExist(BuiltInVariable.ORGANIZATION_ID) || !params[BuiltInVariable.ORGANIZATION_ID]) return | 115 | if (!validIsExist(BuiltInVariable.DEVICE_PROFILE_ID) || !validIsExist(BuiltInVariable.ORGANIZATION_ID) || !params[BuiltInVariable.ORGANIZATION_ID]) return |
110 | const result: Recordable[] = await getDeviceList({ [BuiltInVariable.ORGANIZATION_ID]: params[BuiltInVariable.ORGANIZATION_ID], [BuiltInVariable.DEVICE_PROFILE_ID]: params[BuiltInVariable.DEVICE_PROFILE_ID] }) | 116 | const result: Recordable[] = await getDeviceList({ [BuiltInVariable.ORGANIZATION_ID]: params[BuiltInVariable.ORGANIZATION_ID], [BuiltInVariable.DEVICE_PROFILE_ID]: params[BuiltInVariable.DEVICE_PROFILE_ID] }) |
111 | optionsSet[BuiltInVariable.ENTITY_ID] = result.map(item => ({ ...item, alias: item.alias || item.name })) | 117 | optionsSet[BuiltInVariable.ENTITY_ID] = result.map(item => ({ ...item, alias: item.alias || item.name })) |
112 | - console.log(optionsSet[BuiltInVariable.ENTITY_ID]) | ||
113 | } | 118 | } |
114 | 119 | ||
115 | const getDeviceAttrOption = async () => { | 120 | const getDeviceAttrOption = async () => { |
@@ -121,6 +126,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -121,6 +126,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
121 | 126 | ||
122 | const getValue = computed(() => { | 127 | const getValue = computed(() => { |
123 | const value = { ...unref(params) } | 128 | const value = { ...unref(params) } |
129 | + | ||
124 | if (Reflect.has(value, BuiltInVariable.DATE_FIXED)) { | 130 | if (Reflect.has(value, BuiltInVariable.DATE_FIXED)) { |
125 | const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_FIXED) | 131 | const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_FIXED) |
126 | Reflect.set(value, fieldMapping?.value || '', value[BuiltInVariable.DATE_FIXED]) | 132 | Reflect.set(value, fieldMapping?.value || '', value[BuiltInVariable.DATE_FIXED]) |
@@ -130,13 +136,19 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -130,13 +136,19 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
130 | if (Reflect.has(value, BuiltInVariable.DATE_RANGE)) { | 136 | if (Reflect.has(value, BuiltInVariable.DATE_RANGE)) { |
131 | const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_RANGE) | 137 | const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_RANGE) |
132 | const [start, end] = ((fieldMapping || {}).value || '').split(GROUP_SEPARATOR) | 138 | const [start, end] = ((fieldMapping || {}).value || '').split(GROUP_SEPARATOR) |
133 | - const [startValue, endValue] = value[BuiltInVariable.DATE_RANGE] || [] | 139 | + const dateRangeValue = value[BuiltInVariable.DATE_RANGE] |
140 | + const [startValue, endValue] = isArray(dateRangeValue) ? dateRangeValue : [null, null] | ||
134 | value[start] = startValue | 141 | value[start] = startValue |
135 | value[end] = endValue | 142 | value[end] = endValue |
136 | - | ||
137 | Reflect.deleteProperty(value, BuiltInVariable.DATE_RANGE) | 143 | Reflect.deleteProperty(value, BuiltInVariable.DATE_RANGE) |
138 | } | 144 | } |
139 | 145 | ||
146 | + if (Reflect.has(value, BuiltInVariable.SELECT_TIME_AGGREGATION)) { | ||
147 | + const aggregation = Reflect.get(value, BuiltInVariable.SELECT_TIME_AGGREGATION) || {} | ||
148 | + Object.assign(value, { ...aggregation }) | ||
149 | + Reflect.deleteProperty(value, BuiltInVariable.SELECT_TIME_AGGREGATION) | ||
150 | + } | ||
151 | + | ||
140 | return value | 152 | return value |
141 | }) | 153 | }) |
142 | 154 | ||
@@ -240,6 +252,15 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -240,6 +252,15 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
240 | } as InputProps | 252 | } as InputProps |
241 | } | 253 | } |
242 | 254 | ||
255 | + const getSelectTimeAggregation = computed(() => { | ||
256 | + return { | ||
257 | + value: params[BuiltInVariable.SELECT_TIME_AGGREGATION], | ||
258 | + onChange(value: SelectTimeAggregationValueTypw) { | ||
259 | + params[BuiltInVariable.SELECT_TIME_AGGREGATION] = value | ||
260 | + } | ||
261 | + } | ||
262 | + }) | ||
263 | + | ||
243 | const builtInVariableConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = { | 264 | const builtInVariableConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = { |
244 | [BuiltInVariable.ORGANIZATION_ID]: { | 265 | [BuiltInVariable.ORGANIZATION_ID]: { |
245 | component: ComponentType.SELECT_TREE, | 266 | component: ComponentType.SELECT_TREE, |
@@ -270,9 +291,32 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -270,9 +291,32 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
270 | component: ComponentType.DATE_PICKER, | 291 | component: ComponentType.DATE_PICKER, |
271 | key: BuiltInVariable.DATE_FIXED, | 292 | key: BuiltInVariable.DATE_FIXED, |
272 | props: getSelectDate | 293 | props: getSelectDate |
294 | + }, | ||
295 | + } | ||
296 | + | ||
297 | + const moresComponentConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = { | ||
298 | + [BuiltInVariable.DATE_RANGE]: { | ||
299 | + component: ComponentType.SELECT_TIME_AGGREGATION, | ||
300 | + key: BuiltInVariable.SELECT_TIME_AGGREGATION, | ||
301 | + props: getSelectTimeAggregation | ||
273 | } | 302 | } |
274 | } | 303 | } |
275 | 304 | ||
305 | + const timePeriodRules = (required: boolean, key: string, message: string) => { | ||
306 | + return [{ | ||
307 | + trigger: ['blur', 'change'], | ||
308 | + validator() { | ||
309 | + const record = params[BuiltInVariable.SELECT_TIME_AGGREGATION] | ||
310 | + // const keys = [SelectTimeAggregationFieldEnum.AGG, SelectTimeAggregationFieldEnum.INTERVAL, SelectTimeAggregationFieldEnum.TIME_PERIOD] | ||
311 | + if (required && ![record[SelectTimeAggregationFieldEnum.AGG], record[SelectTimeAggregationFieldEnum.INTERVAL], record[SelectTimeAggregationFieldEnum.TIME_PERIOD]].every(Boolean)) { | ||
312 | + validFlag.value = false | ||
313 | + return new Error(`${message}需要填写完整`) | ||
314 | + } | ||
315 | + validFlag.value = true | ||
316 | + } | ||
317 | + }] as FormItemRule | ||
318 | + } | ||
319 | + | ||
276 | const validFlag = ref(true) | 320 | const validFlag = ref(true) |
277 | 321 | ||
278 | const createRules = (required: boolean, key: string, message: string) => { | 322 | const createRules = (required: boolean, key: string, message: string) => { |
@@ -288,20 +332,25 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -288,20 +332,25 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
288 | }] as FormItemRule | 332 | }] as FormItemRule |
289 | } | 333 | } |
290 | 334 | ||
291 | - const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any) => { | 335 | + const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any, mores: boolean) => { |
292 | const groupList = (builtInVariableKey || '').split(GROUP_SEPARATOR) | 336 | const groupList = (builtInVariableKey || '').split(GROUP_SEPARATOR) |
293 | return groupList.reduce((prev, next) => { | 337 | return groupList.reduce((prev, next) => { |
294 | - const result = builtInVariableConfiguration[next as BuiltInVariable] | ||
295 | - const props = unref(result?.props) | 338 | + let result = builtInVariableConfiguration[next as BuiltInVariable] |
339 | + let props = unref(result?.props) | ||
296 | const name = (unref(builtInVariable) || {})[next as BuiltInVariable]?.itemText | 340 | const name = (unref(builtInVariable) || {})[next as BuiltInVariable]?.itemText |
297 | let schema: DynamicFormSchema | 341 | let schema: DynamicFormSchema |
298 | - if (builtInVariableConfiguration[next as BuiltInVariable]) { | 342 | + if (result) { |
343 | + if (mores) { | ||
344 | + result = moresComponentConfiguration[next as BuiltInVariable] | ||
345 | + props = unref(result?.props) | ||
346 | + } | ||
347 | + | ||
299 | schema = { | 348 | schema = { |
300 | ...result, | 349 | ...result, |
301 | props, | 350 | props, |
302 | name, | 351 | name, |
303 | required, | 352 | required, |
304 | - rules: createRules(required, next, name || next) | 353 | + rules: mores ? timePeriodRules(required, next, name || next) : createRules(required, next, name || next) |
305 | } as DynamicFormSchema | 354 | } as DynamicFormSchema |
306 | } else { | 355 | } else { |
307 | schema = { | 356 | schema = { |
@@ -313,7 +362,6 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -313,7 +362,6 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
313 | rules: createRules(required, value, value) | 362 | rules: createRules(required, value, value) |
314 | } as DynamicFormSchema | 363 | } as DynamicFormSchema |
315 | } | 364 | } |
316 | - | ||
317 | return [...prev, schema] | 365 | return [...prev, schema] |
318 | 366 | ||
319 | }, [] as DynamicFormSchema[]) | 367 | }, [] as DynamicFormSchema[]) |
@@ -321,10 +369,11 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -321,10 +369,11 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
321 | } | 369 | } |
322 | 370 | ||
323 | const getDynamicFormSchemas = computed<DynamicFormSchema[]>(() => { | 371 | const getDynamicFormSchemas = computed<DynamicFormSchema[]>(() => { |
324 | - return unref(getParams).reduce((prev: DynamicFormSchema[], { key, value, required }) => { | ||
325 | - const schemas = toFormSchemas(key, required, value) | 372 | + const result = unref(getParams).reduce((prev: DynamicFormSchema[], { key, value, required, mores }) => { |
373 | + const schemas = toFormSchemas(key, required, value, mores) | ||
326 | return [...prev, ...schemas] | 374 | return [...prev, ...schemas] |
327 | }, [] as DynamicFormSchema[]) | 375 | }, [] as DynamicFormSchema[]) |
376 | + return result | ||
328 | }) | 377 | }) |
329 | 378 | ||
330 | const createForm = async () => { | 379 | const createForm = async () => { |
@@ -335,15 +384,20 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -335,15 +384,20 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
335 | } | 384 | } |
336 | 385 | ||
337 | const setParams = (Params: Recordable = {}) => { | 386 | const setParams = (Params: Recordable = {}) => { |
338 | - for (const { key, value } of unref(getParams)) { | 387 | + for (const { key, value, mores } of unref(getParams)) { |
339 | const splitKeys = value ? value.split(GROUP_SEPARATOR) : key.split(GROUP_SEPARATOR) | 388 | const splitKeys = value ? value.split(GROUP_SEPARATOR) : key.split(GROUP_SEPARATOR) |
340 | if (isDateComponent(key as BuiltInVariable)) { | 389 | if (isDateComponent(key as BuiltInVariable)) { |
341 | if (key as BuiltInVariable === BuiltInVariable.DATE_FIXED) { | 390 | if (key as BuiltInVariable === BuiltInVariable.DATE_FIXED) { |
342 | params[key] = Params[splitKeys[0]] || null | 391 | params[key] = Params[splitKeys[0]] || null |
343 | continue | 392 | continue |
344 | } | 393 | } |
345 | - const value = [Params[splitKeys[0]], Params[splitKeys[1]]] | ||
346 | - params[key] = value.every(Boolean) ? value : null | 394 | + if (mores) { |
395 | + const { agg, interval, timePeriod } = Params | ||
396 | + params[BuiltInVariable.SELECT_TIME_AGGREGATION] = { agg, interval, timePeriod } | ||
397 | + } else { | ||
398 | + const value = [Params[splitKeys[0]], Params[splitKeys[1]]] | ||
399 | + params[key] = value.every(Boolean) ? value : null | ||
400 | + } | ||
347 | continue | 401 | continue |
348 | } | 402 | } |
349 | for (const temp of splitKeys) { | 403 | for (const temp of splitKeys) { |
@@ -356,6 +410,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -356,6 +410,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
356 | Object.keys(params).forEach(key => { | 410 | Object.keys(params).forEach(key => { |
357 | Reflect.deleteProperty(params, key) | 411 | Reflect.deleteProperty(params, key) |
358 | }) | 412 | }) |
413 | + params[BuiltInVariable.SELECT_TIME_AGGREGATION] = {} | ||
359 | } | 414 | } |
360 | 415 | ||
361 | const setDynamicFormValue = (params: Recordable) => { | 416 | const setDynamicFormValue = (params: Recordable) => { |
1 | +export { default as SelectTimeAggregation } from './index.vue' | ||
2 | + | ||
3 | +export interface SelectTimeAggregationValueTypw { | ||
4 | + timePeriod?: Nullable<number> | ||
5 | + agg?: Nullable<string> | ||
6 | + interval?: Nullable<number> | ||
7 | +} | ||
8 | + | ||
9 | + | ||
10 | +export enum SelectTimeAggregationFieldEnum { | ||
11 | + TIME_PERIOD = 'timePeriod', | ||
12 | + AGG = 'agg', | ||
13 | + INTERVAL = 'interval' | ||
14 | +} | ||
15 | + |
1 | +<script lang="ts"> | ||
2 | +export default { | ||
3 | + inheritAttrs: true, | ||
4 | + components: { NFormItem } | ||
5 | +} | ||
6 | +</script> | ||
7 | +<script lang="ts" setup> | ||
8 | +import { FormItemRule, NFormItem, NGi, NGrid, NSelect } from 'naive-ui'; | ||
9 | +import { defaultIntervalOptions, aggergationOptions } from '../DynamicForm/timeInterval' | ||
10 | +import { unref, computed, ref, watch } from 'vue'; | ||
11 | +import { isObject } from '@/utils/external/is'; | ||
12 | + | ||
13 | +interface Value { | ||
14 | + timePeriod?: Nullable<number> | ||
15 | + agg?: Nullable<string> | ||
16 | + interval?: Nullable<number> | ||
17 | +} | ||
18 | + | ||
19 | +const props = withDefaults( | ||
20 | + defineProps<{ | ||
21 | + value?: Value | ||
22 | + }>(), | ||
23 | + { | ||
24 | + value: () => ({}) | ||
25 | + } | ||
26 | +) | ||
27 | + | ||
28 | +const emit = defineEmits<{ | ||
29 | + (e: 'update:value', value: Value): void | ||
30 | + (e: 'change', value: Value): void | ||
31 | +}>() | ||
32 | + | ||
33 | + | ||
34 | +const timePeriod = ref(props.value?.timePeriod) | ||
35 | +const agg = ref(props.value?.agg) | ||
36 | +const interval = ref(props.value?.interval) | ||
37 | + | ||
38 | +const getIntervalTimeOptions = computed(() => { | ||
39 | + return defaultIntervalOptions.find(item => item.id === unref(timePeriod))?.linkage || [] | ||
40 | +}) | ||
41 | + | ||
42 | +// const getTimePeriod = computed({ | ||
43 | +// get() { | ||
44 | +// return props.value?.timePeriod | ||
45 | +// }, | ||
46 | +// set(value) { | ||
47 | +// emit('update:value', { ...props.value || {}, timePeriod: value }) | ||
48 | +// emit('change', { ...props.value || {}, timePeriod: value }) | ||
49 | +// } | ||
50 | +// }) | ||
51 | + | ||
52 | +// const getAggereation = computed({ | ||
53 | +// get() { | ||
54 | +// return props.value?.agg | ||
55 | +// }, | ||
56 | +// set(value) { | ||
57 | +// emit('update:value', { ...props.value || {}, agg: value }) | ||
58 | +// emit('change', { ...props.value || {}, agg: value }) | ||
59 | + | ||
60 | +// } | ||
61 | +// }) | ||
62 | +// const getInterval = computed({ | ||
63 | +// get() { | ||
64 | +// return props.value?.interval | ||
65 | +// }, | ||
66 | +// set(value) { | ||
67 | +// emit('update:value', { ...props.value || {}, interval: value }) | ||
68 | +// emit('change', { ...props.value || {}, interval: value }) | ||
69 | + | ||
70 | +// } | ||
71 | +// }) | ||
72 | + | ||
73 | +// const getTimePeriod = computed(() => props.value.timePeriod) | ||
74 | +// const getAggereation = computed(() => props.value.agg) | ||
75 | +// const getInterval = computed(() => props.value.interval) | ||
76 | + | ||
77 | +const handleTimePerionChange = (value: number) => { | ||
78 | + emit('update:value', { ...props.value, timePeriod: value, interval: null }) | ||
79 | + emit('change', { ...props.value || {}, timePeriod: value, interval: null }) | ||
80 | +} | ||
81 | + | ||
82 | +const handleAggChange = (value: string) => { | ||
83 | + emit('update:value', { ...props.value, agg: value }) | ||
84 | + emit('change', { ...props.value, agg: value }) | ||
85 | +} | ||
86 | + | ||
87 | +const handleIntervalChange = (value: number) => { | ||
88 | + emit('update:value', { ...props.value, interval: value }) | ||
89 | + emit('change', { ...props.value, interval: value }) | ||
90 | +} | ||
91 | + | ||
92 | +watch(() => props.value, (target) => { | ||
93 | + if (target && isObject(target)) { | ||
94 | + const { agg: _agg, interval: _interval, timePeriod: _timePeriod } = target || {} | ||
95 | + timePeriod.value = _timePeriod | ||
96 | + agg.value = _agg | ||
97 | + interval.value = _interval | ||
98 | + } | ||
99 | +}) | ||
100 | + | ||
101 | +const timePeriodRule: FormItemRule = { | ||
102 | + trigger: ['blur'], | ||
103 | + validator() { | ||
104 | + if (!unref(timePeriod)) { | ||
105 | + return new Error('请选择时间周期') | ||
106 | + } | ||
107 | + } | ||
108 | +} | ||
109 | + | ||
110 | +const aggRule: FormItemRule = { | ||
111 | + trigger: ['blur'], | ||
112 | + validator() { | ||
113 | + if (!unref(agg)) { | ||
114 | + return new Error('请选择聚合方式') | ||
115 | + } | ||
116 | + } | ||
117 | +} | ||
118 | + | ||
119 | +const intervalRule: FormItemRule = { | ||
120 | + trigger: ['blur'], | ||
121 | + validator() { | ||
122 | + if (!unref(interval)) { | ||
123 | + return new Error('请选择间隔时间') | ||
124 | + } | ||
125 | + } | ||
126 | +} | ||
127 | + | ||
128 | +</script> | ||
129 | + | ||
130 | +<template> | ||
131 | + <NGrid :cols="3"> | ||
132 | + <NGi> | ||
133 | + <NFormItem :show-label="false" :rule="timePeriodRule"> | ||
134 | + <NSelect v-model:value="timePeriod" :options="defaultIntervalOptions" label-field="name" value-field="id" | ||
135 | + @update:value="handleTimePerionChange" placeholder="请选择时间周期"></NSelect> | ||
136 | + </NFormItem> | ||
137 | + </NGi> | ||
138 | + <NGi> | ||
139 | + <NFormItem :show-label="false" :rule="aggRule"> | ||
140 | + <NSelect v-model:value="agg" @update:value="handleAggChange" :options="aggergationOptions" label-field="name" | ||
141 | + value-field="id" placeholder="聚合方式"></NSelect> | ||
142 | + </NFormItem> | ||
143 | + </NGi> | ||
144 | + <NGi> | ||
145 | + <NFormItem :show-label="false" :rule="intervalRule"> | ||
146 | + <NSelect v-model:value="interval" @update:value="handleIntervalChange" :options="getIntervalTimeOptions" | ||
147 | + label-field="name" value-field="id" placeholder="间隔时间"></NSelect> | ||
148 | + </NFormItem> | ||
149 | + </NGi> | ||
150 | + </NGrid> | ||
151 | +</template> |