Commit c6b08f780f64f59cb0da377101140e3ea405d4dc
1 parent
bb5da908
fix: data dashboard history trend form impact
Showing
4 changed files
with
160 additions
and
163 deletions
... | ... | @@ -15,7 +15,7 @@ |
15 | 15 | const emit = defineEmits(['register', 'ok']); |
16 | 16 | |
17 | 17 | const [registerForm, { updateSchema, setFieldsValue, validate, getFieldsValue }] = useForm({ |
18 | - schemas: formSchema, | |
18 | + schemas: formSchema(), | |
19 | 19 | showActionButtonGroup: false, |
20 | 20 | fieldMapToTime: [ |
21 | 21 | [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:ss'], | ... | ... |
... | ... | @@ -267,12 +267,7 @@ |
267 | 267 | <h3 class="w-24 flex-shrink-0 text-right pr-2 my-4">选择数据源</h3> |
268 | 268 | <section ref="formListEl"> |
269 | 269 | <div v-for="item in dataSource" :data-id="item.id" :key="item.id" class="flex bg-light-50"> |
270 | - <div | |
271 | - class="w-24 text-right leading-30px pr-8px flex right" | |
272 | - style="flex: 0 0 96px; justify-content: right" | |
273 | - > | |
274 | - 选择设备 | |
275 | - </div> | |
270 | + <div class="w-24 text-right flex right justify-end"> 选择设备 </div> | |
276 | 271 | <div class="pl-2 flex-auto"> |
277 | 272 | <component |
278 | 273 | :frontId="$props.frontId" | ... | ... |
... | ... | @@ -35,171 +35,173 @@ export enum AggregateDataEnum { |
35 | 35 | COUNT = 'COUNT', |
36 | 36 | NONE = 'NONE', |
37 | 37 | } |
38 | -export const formSchema: FormSchema[] = [ | |
39 | - { | |
40 | - field: SchemaFiled.DEVICE_ID, | |
41 | - label: '设备名称', | |
42 | - component: 'Select', | |
43 | - rules: [{ required: true, message: '设备名称为必选项', type: 'string' }], | |
44 | - componentProps({ formActionType }) { | |
45 | - const { setFieldsValue } = formActionType; | |
46 | - return { | |
47 | - placeholder: '请选择设备', | |
48 | - onChange() { | |
49 | - setFieldsValue({ [SchemaFiled.KEYS]: null }); | |
50 | - }, | |
51 | - }; | |
38 | +export const formSchema = (): FormSchema[] => { | |
39 | + return [ | |
40 | + { | |
41 | + field: SchemaFiled.DEVICE_ID, | |
42 | + label: '设备名称', | |
43 | + component: 'Select', | |
44 | + rules: [{ required: true, message: '设备名称为必选项', type: 'string' }], | |
45 | + componentProps({ formActionType }) { | |
46 | + const { setFieldsValue } = formActionType; | |
47 | + return { | |
48 | + placeholder: '请选择设备', | |
49 | + onChange() { | |
50 | + setFieldsValue({ [SchemaFiled.KEYS]: null }); | |
51 | + }, | |
52 | + }; | |
53 | + }, | |
52 | 54 | }, |
53 | - }, | |
54 | - { | |
55 | - field: SchemaFiled.WAY, | |
56 | - label: '查询方式', | |
57 | - component: 'RadioGroup', | |
58 | - defaultValue: QueryWay.LATEST, | |
59 | - componentProps({ formActionType }) { | |
60 | - const { setFieldsValue } = formActionType; | |
61 | - return { | |
62 | - options: [ | |
63 | - { label: '最后', value: QueryWay.LATEST }, | |
64 | - { label: '时间段', value: QueryWay.TIME_PERIOD }, | |
65 | - ], | |
66 | - onChange(event: ChangeEvent) { | |
67 | - (event.target as HTMLInputElement).value === QueryWay.LATEST | |
68 | - ? setFieldsValue({ | |
69 | - [SchemaFiled.DATE_RANGE]: [], | |
70 | - [SchemaFiled.START_TS]: null, | |
71 | - [SchemaFiled.END_TS]: null, | |
72 | - }) | |
73 | - : setFieldsValue({ [SchemaFiled.START_TS]: null }); | |
74 | - }, | |
75 | - getPopupContainer: () => document.body, | |
76 | - }; | |
55 | + { | |
56 | + field: SchemaFiled.WAY, | |
57 | + label: '查询方式', | |
58 | + component: 'RadioGroup', | |
59 | + defaultValue: QueryWay.LATEST, | |
60 | + componentProps({ formActionType }) { | |
61 | + const { setFieldsValue } = formActionType; | |
62 | + return { | |
63 | + options: [ | |
64 | + { label: '最后', value: QueryWay.LATEST }, | |
65 | + { label: '时间段', value: QueryWay.TIME_PERIOD }, | |
66 | + ], | |
67 | + onChange(event: ChangeEvent) { | |
68 | + (event.target as HTMLInputElement).value === QueryWay.LATEST | |
69 | + ? setFieldsValue({ | |
70 | + [SchemaFiled.DATE_RANGE]: [], | |
71 | + [SchemaFiled.START_TS]: null, | |
72 | + [SchemaFiled.END_TS]: null, | |
73 | + }) | |
74 | + : setFieldsValue({ [SchemaFiled.START_TS]: null }); | |
75 | + }, | |
76 | + getPopupContainer: () => document.body, | |
77 | + }; | |
78 | + }, | |
77 | 79 | }, |
78 | - }, | |
79 | - { | |
80 | - field: SchemaFiled.START_TS, | |
81 | - label: '最后数据', | |
82 | - component: 'Select', | |
83 | - ifShow({ values }) { | |
84 | - return values[SchemaFiled.WAY] === QueryWay.LATEST; | |
80 | + { | |
81 | + field: SchemaFiled.START_TS, | |
82 | + label: '最后数据', | |
83 | + component: 'Select', | |
84 | + ifShow({ values }) { | |
85 | + return values[SchemaFiled.WAY] === QueryWay.LATEST; | |
86 | + }, | |
87 | + componentProps({ formActionType }) { | |
88 | + const { setFieldsValue } = formActionType; | |
89 | + return { | |
90 | + options: intervalOption, | |
91 | + onChange() { | |
92 | + setFieldsValue({ [SchemaFiled.INTERVAL]: null }); | |
93 | + }, | |
94 | + getPopupContainer: () => document.body, | |
95 | + }; | |
96 | + }, | |
97 | + rules: [{ required: true, message: '最后数据为必选项', type: 'number' }], | |
85 | 98 | }, |
86 | - componentProps({ formActionType }) { | |
87 | - const { setFieldsValue } = formActionType; | |
88 | - return { | |
89 | - options: intervalOption, | |
90 | - onChange() { | |
91 | - setFieldsValue({ [SchemaFiled.INTERVAL]: null }); | |
92 | - }, | |
93 | - getPopupContainer: () => document.body, | |
94 | - }; | |
95 | - }, | |
96 | - rules: [{ required: true, message: '最后数据为必选项', type: 'number' }], | |
97 | - }, | |
98 | - { | |
99 | - field: SchemaFiled.DATE_RANGE, | |
100 | - label: '时间段', | |
101 | - component: 'RangePicker', | |
102 | - ifShow({ values }) { | |
103 | - return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD; | |
99 | + { | |
100 | + field: SchemaFiled.DATE_RANGE, | |
101 | + label: '时间段', | |
102 | + component: 'RangePicker', | |
103 | + ifShow({ values }) { | |
104 | + return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD; | |
105 | + }, | |
106 | + rules: [{ required: true, message: '时间段为必选项' }], | |
107 | + componentProps({ formActionType }) { | |
108 | + const { setFieldsValue } = formActionType; | |
109 | + let dates: Moment[] = []; | |
110 | + return { | |
111 | + showTime: { | |
112 | + defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')], | |
113 | + }, | |
114 | + onCalendarChange(value: Moment[]) { | |
115 | + dates = value; | |
116 | + }, | |
117 | + disabledDate(current: Moment) { | |
118 | + if (!dates || dates.length === 0 || !current) { | |
119 | + return false; | |
120 | + } | |
121 | + const diffDate = current.diff(dates[0], 'years', true); | |
122 | + return Math.abs(diffDate) > 1; | |
123 | + }, | |
124 | + onChange() { | |
125 | + dates = []; | |
126 | + setFieldsValue({ [SchemaFiled.INTERVAL]: null }); | |
127 | + }, | |
128 | + getPopupContainer: () => document.body, | |
129 | + }; | |
130 | + }, | |
131 | + colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx, | |
104 | 132 | }, |
105 | - rules: [{ required: true, message: '时间段为必选项' }], | |
106 | - componentProps({ formActionType }) { | |
107 | - const { setFieldsValue } = formActionType; | |
108 | - let dates: Moment[] = []; | |
109 | - return { | |
110 | - showTime: { | |
111 | - defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')], | |
112 | - }, | |
113 | - onCalendarChange(value: Moment[]) { | |
114 | - dates = value; | |
115 | - }, | |
116 | - disabledDate(current: Moment) { | |
117 | - if (!dates || dates.length === 0 || !current) { | |
118 | - return false; | |
119 | - } | |
120 | - const diffDate = current.diff(dates[0], 'years', true); | |
121 | - return Math.abs(diffDate) > 1; | |
122 | - }, | |
123 | - onChange() { | |
124 | - dates = []; | |
125 | - setFieldsValue({ [SchemaFiled.INTERVAL]: null }); | |
126 | - }, | |
133 | + { | |
134 | + field: SchemaFiled.AGG, | |
135 | + label: '数据聚合功能', | |
136 | + component: 'Select', | |
137 | + componentProps: { | |
127 | 138 | getPopupContainer: () => document.body, |
128 | - }; | |
129 | - }, | |
130 | - colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx, | |
131 | - }, | |
132 | - { | |
133 | - field: SchemaFiled.AGG, | |
134 | - label: '数据聚合功能', | |
135 | - component: 'Select', | |
136 | - componentProps: { | |
137 | - getPopupContainer: () => document.body, | |
138 | - options: [ | |
139 | - { label: '最小值', value: AggregateDataEnum.MIN }, | |
140 | - { label: '最大值', value: AggregateDataEnum.MAX }, | |
141 | - { label: '平均值', value: AggregateDataEnum.AVG }, | |
142 | - { label: '求和', value: AggregateDataEnum.SUM }, | |
143 | - { label: '计数', value: AggregateDataEnum.COUNT }, | |
144 | - { label: '空', value: AggregateDataEnum.NONE }, | |
145 | - ], | |
146 | - }, | |
147 | - }, | |
148 | - { | |
149 | - field: SchemaFiled.INTERVAL, | |
150 | - label: '分组间隔', | |
151 | - component: 'Select', | |
152 | - dynamicRules: ({ model }) => { | |
153 | - return [ | |
154 | - { | |
155 | - required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE, | |
156 | - message: '分组间隔为必填项', | |
157 | - type: 'number', | |
158 | - }, | |
159 | - ]; | |
160 | - }, | |
161 | - ifShow({ values }) { | |
162 | - return values[SchemaFiled.AGG] !== AggregateDataEnum.NONE; | |
139 | + options: [ | |
140 | + { label: '最小值', value: AggregateDataEnum.MIN }, | |
141 | + { label: '最大值', value: AggregateDataEnum.MAX }, | |
142 | + { label: '平均值', value: AggregateDataEnum.AVG }, | |
143 | + { label: '求和', value: AggregateDataEnum.SUM }, | |
144 | + { label: '计数', value: AggregateDataEnum.COUNT }, | |
145 | + { label: '空', value: AggregateDataEnum.NONE }, | |
146 | + ], | |
147 | + }, | |
163 | 148 | }, |
164 | - componentProps({ formModel, formActionType }) { | |
165 | - const options = | |
166 | - formModel[SchemaFiled.WAY] === QueryWay.LATEST | |
167 | - ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS]) | |
168 | - : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]); | |
169 | - if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) { | |
170 | - formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null }); | |
171 | - } | |
172 | - return { | |
173 | - options, | |
174 | - getPopupContainer: () => document.body, | |
175 | - }; | |
149 | + { | |
150 | + field: SchemaFiled.INTERVAL, | |
151 | + label: '分组间隔', | |
152 | + component: 'Select', | |
153 | + dynamicRules: ({ model }) => { | |
154 | + return [ | |
155 | + { | |
156 | + required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE, | |
157 | + message: '分组间隔为必填项', | |
158 | + type: 'number', | |
159 | + }, | |
160 | + ]; | |
161 | + }, | |
162 | + ifShow({ values }) { | |
163 | + return values[SchemaFiled.AGG] !== AggregateDataEnum.NONE; | |
164 | + }, | |
165 | + componentProps({ formModel, formActionType }) { | |
166 | + const options = | |
167 | + formModel[SchemaFiled.WAY] === QueryWay.LATEST | |
168 | + ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS]) | |
169 | + : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]); | |
170 | + if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) { | |
171 | + formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null }); | |
172 | + } | |
173 | + return { | |
174 | + options, | |
175 | + getPopupContainer: () => document.body, | |
176 | + }; | |
177 | + }, | |
176 | 178 | }, |
177 | - }, | |
178 | - { | |
179 | - field: SchemaFiled.LIMIT, | |
180 | - label: '最大条数', | |
181 | - component: 'InputNumber', | |
182 | - ifShow({ values }) { | |
183 | - return values[SchemaFiled.AGG] === AggregateDataEnum.NONE; | |
179 | + { | |
180 | + field: SchemaFiled.LIMIT, | |
181 | + label: '最大条数', | |
182 | + component: 'InputNumber', | |
183 | + ifShow({ values }) { | |
184 | + return values[SchemaFiled.AGG] === AggregateDataEnum.NONE; | |
185 | + }, | |
186 | + helpMessage: ['根据查询条件,查出的数据条数不超过这个值'], | |
187 | + componentProps() { | |
188 | + return { | |
189 | + max: 50000, | |
190 | + min: 7, | |
191 | + getPopupContainer: () => document.body, | |
192 | + }; | |
193 | + }, | |
184 | 194 | }, |
185 | - helpMessage: ['根据查询条件,查出的数据条数不超过这个值'], | |
186 | - componentProps() { | |
187 | - return { | |
188 | - max: 50000, | |
189 | - min: 7, | |
195 | + { | |
196 | + field: SchemaFiled.KEYS, | |
197 | + label: '设备属性', | |
198 | + component: 'Select', | |
199 | + componentProps: { | |
190 | 200 | getPopupContainer: () => document.body, |
191 | - }; | |
192 | - }, | |
193 | - }, | |
194 | - { | |
195 | - field: SchemaFiled.KEYS, | |
196 | - label: '设备属性', | |
197 | - component: 'Select', | |
198 | - componentProps: { | |
199 | - getPopupContainer: () => document.body, | |
201 | + }, | |
200 | 202 | }, |
201 | - }, | |
202 | -]; | |
203 | + ]; | |
204 | +}; | |
203 | 205 | |
204 | 206 | export function getHistorySearchParams(value: Recordable) { |
205 | 207 | const { startTs, endTs, interval, agg, limit, way, keys, deviceId } = value; | ... | ... |