Commit c6b08f780f64f59cb0da377101140e3ea405d4dc

Authored by ww
1 parent bb5da908

fix: data dashboard history trend form impact

... ... @@ -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"
... ...
... ... @@ -90,7 +90,7 @@
90 90 }
91 91
92 92 const [register, method] = useForm({
93   - schemas: formSchema,
  93 + schemas: formSchema(),
94 94 baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
95 95 rowProps: {
96 96 gutter: 10,
... ...
... ... @@ -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;
... ...