简柏林 / thingskit-front · Commits

Commit c6b08f780f64f59cb0da377101140e3ea405d4dc

Authored by ww
1 parent bb5da908

fix: data dashboard history trend form impact

Inline Side-by-side
Showing 4 changed files with 160 additions and 163 deletions
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 const emit = defineEmits(['register', 'ok']); 15 const emit = defineEmits(['register', 'ok']);
16 16
17 const [registerForm, { updateSchema, setFieldsValue, validate, getFieldsValue }] = useForm({ 17 const [registerForm, { updateSchema, setFieldsValue, validate, getFieldsValue }] = useForm({
18 - schemas: formSchema, 18 + schemas: formSchema(),
19 showActionButtonGroup: false, 19 showActionButtonGroup: false,
20 fieldMapToTime: [ 20 fieldMapToTime: [
21 [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:ss'], 21 [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:ss'],
@@ -267,12 +267,7 @@ @@ -267,12 +267,7 @@
267 <h3 class="w-24 flex-shrink-0 text-right pr-2 my-4">选择数据源</h3> 267 <h3 class="w-24 flex-shrink-0 text-right pr-2 my-4">选择数据源</h3>
268 <section ref="formListEl"> 268 <section ref="formListEl">
269 <div v-for="item in dataSource" :data-id="item.id" :key="item.id" class="flex bg-light-50"> 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 <div class="pl-2 flex-auto"> 271 <div class="pl-2 flex-auto">
277 <component 272 <component
278 :frontId="$props.frontId" 273 :frontId="$props.frontId"
@@ -90,7 +90,7 @@ @@ -90,7 +90,7 @@
90 } 90 }
91 91
92 const [register, method] = useForm({ 92 const [register, method] = useForm({
93 - schemas: formSchema, 93 + schemas: formSchema(),
94 baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx, 94 baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
95 rowProps: { 95 rowProps: {
96 gutter: 10, 96 gutter: 10,
@@ -35,171 +35,173 @@ export enum AggregateDataEnum { @@ -35,171 +35,173 @@ export enum AggregateDataEnum {
35 COUNT = 'COUNT', 35 COUNT = 'COUNT',
36 NONE = 'NONE', 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 getPopupContainer: () => document.body, 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 getPopupContainer: () => document.body, 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 export function getHistorySearchParams(value: Recordable) { 206 export function getHistorySearchParams(value: Recordable) {
205 const { startTs, endTs, interval, agg, limit, way, keys, deviceId } = value; 207 const { startTs, endTs, interval, agg, limit, way, keys, deviceId } = value;