简柏林 / thingskit-front · Commits

Commit c8d8d83e0ebdde55dc0adf92b94225cda1eb57ef

Authored by xp.Huang
2 parents 31f72d37 fb59b2a4

Merge branch 'ft' into 'main' 

feat：新增设备配置LWM2MX协议

See merge request huang/yun-teng-iot-front!178
Inline Side-by-side
Showing 10 changed files with 469 additions and 131 deletions
... ... @@ -41,7 +41,7 @@
41 41 alt="avatar"
42 42 />
43 43 <div v-else>
44   - <div style="margin-top: 5.2vh; margin-left: 3.35vw">
  44 + <div style="margin-top: 5.2vh; margin-left: 3.21vw">
45 45 <PlusOutlined style="font-size: 30px" />
46 46 </div>
47 47 </div>
... ...
... ... @@ -77,7 +77,7 @@
77 77 let transportTypeObj = reactive({
78 78 transportType: '',
79 79 });
80   - let profileDataObj = reactive({
  80 + let profileDataObj: any = reactive({
81 81 profileData: null,
82 82 });
83 83
... ... @@ -167,7 +167,6 @@
167 167 if (isUpdate.value == 1) {
168 168 delete postDeviceConfogData.id;
169 169 }
170   -
171 170 await deviceConfigAddOrEdit(postDeviceConfogData);
172 171 createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');
173 172 closeModal();
... ...
... ... @@ -8,7 +8,7 @@
8 8 <div v-else-if="isMqttType == 'COAP'">
9 9 <CoapCpns ref="coapRef" />
10 10 </div>
11   - <div v-else-if="isMqttType == 'LWM2M1'">
  11 + <div v-else-if="isMqttType == 'LWM2M'">
12 12 <Lwm2mCpns ref="lwm2mRef" />
13 13 </div>
14 14 <div
... ... @@ -78,12 +78,18 @@
78 78 setTimeout(() => {
79 79 proxy.$refs.mqttRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
80 80 proxy.$refs.coapRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
  81 + proxy.$refs.lwm2mRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
81 82 }, 100);
82 83 };
83 84
84 85 const customClearStepTwoValueFunc = () => {
85 86 isMqttType.value = '';
86 87 resetFields();
  88 + nextTick(() => {
  89 + proxy.$refs.mqttRef?.resetStepFieldsValueFunc();
  90 + proxy.$refs.coapRef?.resetStepFieldsValueFunc();
  91 + proxy.$refs.lwm2mRef?.resetStepFieldsValueFunc();
  92 + });
87 93 };
88 94 async function customResetFunc() {
89 95 emit('prev');
... ... @@ -97,7 +103,7 @@
97 103 { label: '默认', value: 'DEFAULT' },
98 104 { label: 'MQTT', value: 'MQTT' },
99 105 { label: 'CoAP', value: 'COAP' },
100   - // { label: 'LWM2M', value: 'LWM2M' },
  106 + { label: 'LWM2M', value: 'LWM2M' },
101 107 ],
102 108 onChange(e) {
103 109 isMqttType.value = e;
... ... @@ -114,9 +120,11 @@
114 120 if (!val) return;
115 121 const getMqttVal = await proxy.$refs.mqttRef?.getDataFunc();
116 122 const getCoapVal = await proxy.$refs.coapRef?.getDataFunc();
  123 + const getLwm2mVal = await proxy.$refs.lwm2mRef?.getDataFunc();
117 124 step2Data.transportConfiguration = {
118 125 ...getMqttVal,
119 126 ...getCoapVal,
  127 + ...getLwm2mVal,
120 128 ...val,
121 129 };
122 130 return step2Data;
... ...
... ... @@ -99,7 +99,7 @@
99 99 ?.deviceRpcResponseProtoSchema,
100 100 });
101 101 };
102   - const customClearStepTwoValueFunc = () => {
  102 + const resetStepFieldsValueFunc = () => {
103 103 resetFields();
104 104 };
105 105 async function customResetFunc() {
... ... @@ -131,7 +131,7 @@
131 131 return {
132 132 customResetFunc,
133 133 register,
134   - customClearStepTwoValueFunc,
  134 + resetStepFieldsValueFunc,
135 135 getDataFunc,
136 136 setStepFieldsValueFunc,
137 137 };
... ...
1 1 import { FormSchema } from '/@/components/Form';
2 2
  3 +enum securityEnum {
  4 + IS_X_CERTIFICATE = 'X509',
  5 + IS_PAW_PUBLIC_KEY = 'RPK',
  6 + IS_AUTO_GENERATE = 2,
  7 + IS_AUTO_GENERATE_UNIQUE = 2,
  8 + IS_DRX = 'PSM',
  9 + IS_EDRX = 'E_DRX',
  10 +}
  11 +
  12 +const isPawPublicKey = (type: string) => {
  13 + return type === securityEnum.IS_PAW_PUBLIC_KEY;
  14 +};
  15 +
  16 +const isCertificate = (type: string) => {
  17 + return type === securityEnum.IS_X_CERTIFICATE;
  18 +};
  19 +
  20 +const isAutoGenerate = (type: string) => {
  21 + return type === securityEnum.IS_AUTO_GENERATE;
  22 +};
  23 +
  24 +const isAutoGenerateUnique = (type: string) => {
  25 + return type === securityEnum.IS_AUTO_GENERATE_UNIQUE;
  26 +};
  27 +
  28 +const isDrx = (type: string) => {
  29 + return type === securityEnum.IS_DRX;
  30 +};
  31 +
  32 +const isEdrx = (type: string) => {
  33 + return type === securityEnum.IS_EDRX;
  34 +};
  35 +
3 36 export const modelSchemas: FormSchema[] = [
4 37 {
5 38 field: '0',
6 39 component: 'Input',
7   - label: 'Object list',
  40 + label: '对象列表',
8 41 componentProps: {
9 42 placeholder: '请输入Object list',
10 43 },
... ... @@ -13,8 +46,9 @@ export const modelSchemas: FormSchema[] = [
13 46 ];
14 47
15 48 export const serverSchemas: FormSchema[] = [
  49 + //servers
16 50 {
17   - field: '1',
  51 + field: 'shortId',
18 52 component: 'InputNumber',
19 53 label: 'Short ID',
20 54 required: true,
... ... @@ -22,128 +56,129 @@ export const serverSchemas: FormSchema[] = [
22 56 colProps: { span: 8 },
23 57 },
24 58 {
25   - field: '2',
  59 + field: 'lifetime',
26 60 component: 'InputNumber',
27   - label: 'Client registration lifetime',
  61 + label: '客户端注册生存期',
28 62 required: true,
29   - defaultValue: 123,
  63 + defaultValue: 300,
30 64 colProps: { span: 8 },
31 65 },
32 66 {
33   - field: '3',
  67 + field: 'defaultMinPeriod',
34 68 component: 'InputNumber',
35   - label: 'Minimum period between two',
  69 + label: '两次通知之间的最短期限',
36 70 required: true,
37   - defaultValue: 123,
  71 + defaultValue: 1,
38 72 colProps: { span: 8 },
39 73 },
40 74 {
41   - field: '4',
  75 + field: 'binding',
42 76 component: 'Select',
43 77 label: 'Binding',
44   - defaultValue: 'UQ: UDP connection in queue mode',
  78 + defaultValue: 'UQ',
45 79 componentProps: {
46 80 options: [
47 81 {
48 82 label: 'U: UDP connection in standard mode',
49   - value: 'U: UDP connection in standard mode',
  83 + value: 'U',
50 84 },
51 85 {
52 86 label: 'UQ: UDP connection in queue mode',
53   - value: 'UQ: UDP connection in queue mode',
  87 + value: 'UQ',
54 88 },
55 89 {
56 90 label: 'T: TCP connection in standard mode',
57   - value: 'T: TCP connection in standard mode',
  91 + value: 'T',
58 92 },
59 93 {
60 94 label: 'TQ: TCP connection in queue mode',
61   - value: 'TQ: TCP connection in queue mode',
  95 + value: 'TQ',
62 96 },
63 97 {
64 98 label: 'S: SMS connection in standard mode',
65   - value: 'S: SMS connection in standard mode',
  99 + value: 'S',
66 100 },
67 101 {
68 102 label: 'SQ: SMS connection in queue mode',
69   - value: 'SQ: SMS connection in queue mode',
  103 + value: 'SQ',
70 104 },
71 105 {
72 106 label: 'US: both UDP and SMS connections active, both in standard mode',
73   - value: 'US: both UDP and SMS connections active, both in standard mode',
  107 + value: 'US',
74 108 },
75 109 {
76 110 label: 'TS: both TCP and SMS connections active, both in standard mode',
77   - value: 'TS: both TCP and SMS connections active, both in standard mode',
  111 + value: 'TS',
78 112 },
79 113 {
80 114 label:
81 115 'UQS: both UDP and SMS connections active; UDP in queue mode, SMS in standard mode',
82   - value:
83   - 'UQS: both UDP and SMS connections active; UDP in queue mode, SMS in standard mode',
  116 + value: 'UQS',
84 117 },
85 118 {
86 119 label:
87 120 'TQS: both TCP and SMS connections active; TCP in queue mode, SMS in standard mode',
88   - value:
89   - 'TQS: both TCP and SMS connections active; TCP in queue mode, SMS in standard mode',
  121 + value: 'TQS',
90 122 },
91 123 ],
92 124 },
93   - colProps: { span: 8 },
  125 + colProps: { span: 11 },
94 126 },
95 127 {
96   - field: '5',
  128 + field: 'notifIfDisabled',
97 129 label: '启用',
98 130 colProps: { span: 22 },
99 131 component: 'Checkbox',
100   - renderComponentContent: 'Notification storing when disabled or offline',
  132 + defaultValue: true,
  133 + renderComponentContent: '禁用或脱机时的通知存储',
101 134 },
  135 + //servers
  136 + //Bootstrap Server
102 137 {
103   - field: '6',
  138 + field: 'securityMode',
104 139 component: 'Select',
105   - label: 'Security config mode',
106   - defaultValue: 'No Security',
  140 + label: '配置模式',
  141 + defaultValue: 'NO_SEC',
107 142 componentProps: {
108 143 options: [
109 144 {
110 145 label: 'No Security',
111   - value: 'No Security',
  146 + value: 'NO_SEC',
112 147 },
113 148 {
114 149 label: 'Pre-Shared Key',
115   - value: 'Pre-Shared Key',
  150 + value: 'PSK',
116 151 },
117 152 {
118 153 label: 'Raw Public Key',
119   - value: 'Raw Public Key',
  154 + value: 'RPK',
120 155 },
121 156 {
122 157 label: 'X.509 Certificate',
123   - value: 'X.509 Certificate',
  158 + value: 'X509',
124 159 },
125 160 ],
126 161 },
127 162 colProps: { span: 8 },
128 163 },
129 164 {
130   - field: '7',
  165 + field: 'host',
131 166 component: 'Input',
132 167 label: 'Host',
133 168 required: true,
134   - defaultValue: '0.0.0.0',
  169 + defaultValue: 'localhost',
135 170 colProps: { span: 8 },
136 171 },
137 172 {
138   - field: '8',
  173 + field: 'port',
139 174 component: 'InputNumber',
140 175 label: 'Port',
141 176 required: true,
142   - defaultValue: 5688,
  177 + defaultValue: 5687,
143 178 colProps: { span: 8 },
144 179 },
145 180 {
146   - field: '9',
  181 + field: 'serverId',
147 182 component: 'InputNumber',
148 183 label: 'Short ID',
149 184 required: true,
... ... @@ -151,206 +186,308 @@ export const serverSchemas: FormSchema[] = [
151 186 colProps: { span: 8 },
152 187 },
153 188 {
154   - field: '10',
  189 + field: 'clientHoldOffTime',
155 190 component: 'InputNumber',
156   - label: 'Hold Off Time',
  191 + label: '拖延时间',
157 192 required: true,
158 193 defaultValue: 1,
159 194 colProps: { span: 8 },
160 195 },
161 196 {
162   - field: '11',
  197 + field: 'bootstrapServerAccountTimeout2',
163 198 component: 'InputNumber',
164   - label: 'Account after the timeout',
  199 + label: '超时后的帐户',
165 200 required: true,
166 201 defaultValue: 0,
167 202 colProps: { span: 8 },
168 203 },
169 204 {
170   - field: '12',
  205 + field: 'serverPublicKey',
171 206 component: 'InputTextArea',
172   - label: 'Account after the timeout',
  207 + label: '服务器公钥',
173 208 required: true,
174   - defaultValue: `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0c39
175   - e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`,
  209 + defaultValue: `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0c
  210 + 39e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`,
176 211 colProps: { span: 22 },
177 212 componentProps: {
178 213 autoSize: {
179 214 maxRows: 10,
180 215 },
181 216 },
  217 + ifShow: ({ values }) =>
  218 + isCertificate(Reflect.get(values, 'securityMode')) ||
  219 + isPawPublicKey(Reflect.get(values, 'securityMode')),
182 220 },
183   -
  221 + //Bootstrap Server
  222 + //LwM2M Server
184 223 {
185   - field: '61',
  224 + field: 'securityMode1',
186 225 component: 'Select',
187   - label: 'Security config mode',
188   - defaultValue: 'No Security',
  226 + label: '配置模式',
  227 + defaultValue: 'NO_SEC',
189 228 componentProps: {
190 229 options: [
191 230 {
192 231 label: 'No Security',
193   - value: 'No Security',
  232 + value: 'NO_SEC',
194 233 },
195 234 {
196 235 label: 'Pre-Shared Key',
197   - value: 'Pre-Shared Key',
  236 + value: 'PSK',
198 237 },
199 238 {
200 239 label: 'Raw Public Key',
201   - value: 'Raw Public Key',
  240 + value: 'RPK',
202 241 },
203 242 {
204 243 label: 'X.509 Certificate',
205   - value: 'X.509 Certificate',
  244 + value: 'X509',
206 245 },
207 246 ],
208 247 },
209 248 colProps: { span: 8 },
210 249 },
211 250 {
212   - field: '71',
  251 + field: 'host1',
213 252 component: 'Input',
214 253 label: 'Host',
215 254 required: true,
216   - defaultValue: '0.0.0.0',
  255 + defaultValue: 'localhost',
217 256 colProps: { span: 8 },
218 257 },
219 258 {
220   - field: '81',
  259 + field: 'port1',
221 260 component: 'InputNumber',
222 261 label: 'Port',
223 262 required: true,
224   - defaultValue: 5688,
  263 + defaultValue: 5685,
225 264 colProps: { span: 8 },
226 265 },
227 266 {
228   - field: '91',
  267 + field: 'serverId1',
229 268 component: 'InputNumber',
230 269 label: 'Short ID',
231 270 required: true,
232   - defaultValue: 111,
  271 + defaultValue: 123,
233 272 colProps: { span: 8 },
234 273 },
235 274 {
236   - field: '101',
  275 + field: 'clientHoldOffTime1',
237 276 component: 'InputNumber',
238   - label: 'Hold Off Time',
  277 + label: '拖延时间',
239 278 required: true,
240 279 defaultValue: 1,
241 280 colProps: { span: 8 },
242 281 },
243 282 {
244   - field: '111',
  283 + field: 'bootstrapServerAccountTimeout1',
245 284 component: 'InputNumber',
246   - label: 'Account after the timeout',
  285 + label: '超时后的帐户',
247 286 required: true,
248 287 defaultValue: 0,
249 288 colProps: { span: 8 },
250 289 },
251 290 {
252   - field: '121',
  291 + field: 'serverPublicKey1',
253 292 component: 'InputTextArea',
254   - label: 'Account after the timeout',
  293 + label: '服务器公钥',
255 294 required: true,
256   - defaultValue: `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0c39
257   - e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`,
  295 + defaultValue: `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0
  296 + c39e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`,
258 297 colProps: { span: 22 },
259 298 componentProps: {
260 299 autoSize: {
261 300 maxRows: 10,
262 301 },
263 302 },
  303 + ifShow: ({ values }) =>
  304 + isCertificate(Reflect.get(values, 'securityMode1')) ||
  305 + isPawPublicKey(Reflect.get(values, 'securityMode1')),
264 306 },
  307 + //LwM2M Server
265 308 ];
266 309
267 310 export const settingsSchemas: FormSchema[] = [
268 311 {
269   - field: '1',
  312 + field: 'fwUpdateStrategy',
270 313 component: 'Select',
271   - label: 'Firmware update strategy',
272   - defaultValue: 'Push firmware update as binary file using Object 5 and Resource 0 (Package)',
  314 + label: '固件更新策略',
  315 + defaultValue: 1,
273 316 componentProps: {
274 317 options: [
275 318 {
276 319 label: 'Push firmware update as binary file using Object 5 and Resource 0 (Package)',
277   - value: 'Push firmware update as binary file using Object 5 and Resource 0 (Package)',
  320 + value: 1,
278 321 },
279 322 {
280 323 label:
281   - 'Auto-generate unique CoAP URL to download the package and push firmware update as Object 5 and ',
282   - value:
283   - 'Auto-generate unique CoAP URL to download the package and push firmware update as Object 5 and ',
  324 + 'Auto-generate unique CoAP URL to download the package and push firmware update as Object 5 and',
  325 + value: 2,
284 326 },
285 327 {
286 328 label: 'Push firmware update as binary file using Object 19 and Resource 0 (Data)',
287   - value: 'Push firmware update as binary file using Object 19 and Resource 0 (Data)',
  329 + value: 3,
288 330 },
289 331 ],
290 332 },
291   - colProps: { span: 22 },
  333 + colProps: { span: 18 },
  334 + },
  335 + {
  336 + field: 'fwUpdateResource',
  337 + component: 'Input',
  338 + label: '固件更新CoAP资源',
  339 + required: true,
  340 + defaultValue: 'coap://localhost:5685',
  341 + componentProps: {
  342 + placeholder: '请输入',
  343 + },
  344 + ifShow: ({ values }) => isAutoGenerate(Reflect.get(values, 'fwUpdateStrategy')),
  345 + colProps: { span: 11 },
292 346 },
293 347 {
294   - field: '2',
  348 + field: 'swUpdateStrategy',
295 349 component: 'Select',
296   - label: 'Firmware update strategy',
297   - defaultValue: 'Push firmware update as binary file using Object 5 and Resource 0 (Package)',
  350 + label: '软件更新策略',
  351 + defaultValue: 1,
298 352 componentProps: {
299 353 options: [
300 354 {
301 355 label: 'Push binary file using Object 9 and Resource 2 (Package)',
302   - value: 'Push binary file using Object 9 and Resource 2 (Package)',
  356 + value: 1,
303 357 },
304 358 {
305 359 label:
306   - 'Auto-generate unique CoAP URL to download the package and push software update using Object 9 and ',
307   - value:
308   - 'Auto-generate unique CoAP URL to download the package and push software update using Object 9 and ',
  360 + 'Auto-generate unique CoAP URL to download the package and push software update using Object 9 and',
  361 + value: 2,
309 362 },
310 363 ],
311 364 },
312   - colProps: { span: 22 },
  365 + colProps: { span: 18 },
313 366 },
314 367 {
315   - field: '3',
  368 + field: 'swUpdateResource',
316 369 component: 'Input',
317   - label: 'Software update CoAP resource',
  370 + label: '软件更新CoAP资源',
318 371 required: true,
319 372 defaultValue: 'coap://localhost:5685',
320 373 componentProps: {
321 374 placeholder: '请输入',
322 375 },
  376 + ifShow: ({ values }) => isAutoGenerateUnique(Reflect.get(values, 'swUpdateStrategy')),
323 377 colProps: { span: 11 },
324 378 },
325 379 {
326   - field: '4',
  380 + field: 'powerMode',
327 381 component: 'Select',
328   - label: 'Discontinuous Reception (DRX)',
329   - defaultValue: 'Push firmware update as binary file using Object 5 and Resource 0 (Package)',
  382 + label: '节能模式',
  383 + defaultValue: 'DRX',
330 384 componentProps: {
331 385 options: [
332 386 {
333 387 label: 'Discontinuous Reception (DRX)',
334   - value: 'Discontinuous Reception (DRX)',
  388 + value: 'DRX',
335 389 },
336 390 {
337   - label: 'Power Saving Mode (PSM) ',
338   - value: 'Power Saving Mode (PSM) ',
  391 + label: 'Power Saving Mode (PSM)',
  392 + value: 'PSM',
339 393 },
340 394 {
341   - label: 'Extended Discontinuous Reception (eDRX) ',
342   - value: 'Extended Discontinuous Reception (eDRX) ',
  395 + label: 'Extended Discontinuous Reception (eDRX)',
  396 + value: 'E_DRX',
343 397 },
344 398 ],
345 399 },
346   - colProps: { span: 22 },
  400 + colProps: { span: 18 },
  401 + },
  402 + {
  403 + field: 'edrxCycle',
  404 + component: 'InputNumber',
  405 + label: 'PSM活动计时器',
  406 + required: true,
  407 + defaultValue: 10,
  408 + colProps: { span: 11 },
  409 + ifShow: ({ values }) => isDrx(values.powerMode),
  410 + },
  411 + {
  412 + field: 'unit2',
  413 + component: 'Select',
  414 + label: '时间单位',
  415 + defaultValue: 'second',
  416 + componentProps: {
  417 + options: [
  418 + { label: 'Milliseconds', value: 'Milliseconds' },
  419 + { label: '秒', value: 'second' },
  420 + { label: '分钟', value: 'minute' },
  421 + { label: '小时', value: 'hour' },
  422 + ],
  423 + },
  424 + colProps: { span: 11 },
  425 + ifShow: ({ values }) => isDrx(values.powerMode),
  426 + },
  427 +
  428 + {
  429 + field: 'edrxCycle',
  430 + component: 'InputNumber',
  431 + label: 'eDRX循环',
  432 + required: true,
  433 + defaultValue: 81,
  434 + componentProps: {
  435 + placeholder: '请输入PSM Activity Timer',
  436 + },
  437 + colProps: { span: 11 },
  438 + ifShow: ({ values }) => isEdrx(values.powerMode),
  439 + },
  440 + {
  441 + field: 'unit2',
  442 + component: 'Select',
  443 + label: '时间单位',
  444 + defaultValue: 'second',
  445 + componentProps: {
  446 + options: [
  447 + { label: 'Milliseconds', value: 'Milliseconds' },
  448 + { label: '秒', value: 'second' },
  449 + { label: '分钟', value: 'minute' },
  450 + { label: '小时', value: 'hour' },
  451 + ],
  452 + },
  453 + colProps: { span: 11 },
  454 + ifShow: ({ values }) => isEdrx(values.powerMode),
  455 + },
  456 + {
  457 + field: 'pagingTransmissionWindow',
  458 + component: 'InputNumber',
  459 + label: '寻呼传输窗口',
  460 + required: true,
  461 + defaultValue: 10,
  462 + componentProps: {
  463 + placeholder: '请输入Paging Transmission Window',
  464 + },
  465 + colProps: { span: 11 },
  466 + ifShow: ({ values }) => isEdrx(values.powerMode),
  467 + },
  468 + {
  469 + field: 'unit',
  470 + component: 'Select',
  471 + label: '时间单位',
  472 + defaultValue: 'second',
  473 + componentProps: {
  474 + options: [
  475 + { label: 'Milliseconds', value: 'Milliseconds' },
  476 + { label: '秒', value: 'second' },
  477 + { label: '分钟', value: 'minute' },
  478 + { label: '小时', value: 'hour' },
  479 + ],
  480 + },
  481 + colProps: { span: 11 },
  482 + ifShow: ({ values }) => isEdrx(values.powerMode),
347 483 },
348 484 {
349   - field: '5',
  485 + field: 'compositeOperationsSupport',
350 486 label: '启用',
351 487 colProps: { span: 22 },
352 488 component: 'Checkbox',
353   - renderComponentContent: 'Supports composite Read/Write/Observe operations',
  489 + defaultValue: false,
  490 + renderComponentContent: '支持复合读/写/观察操作',
354 491 },
355 492 ];
356 493
... ... @@ -362,7 +499,7 @@ export const deviceSchemas: FormSchema[] = [
362 499 component: 'InputTextArea',
363 500 componentProps: {
364 501 autoSize: {
365   - maxRows: 30,
  502 + maxRows: 50,
366 503 },
367 504 },
368 505 defaultValue: `
... ...
1 1 <template>
2 2 <div style="">
3 3 <Tabs
4   - :defaultActiveKey="currentKey"
5 4 v-model:activeKey="currentKey"
6 5 :size="currentSize"
7 6 :animated="true"
  7 + @change="handleChange"
8 8 >
9 9 <TabPane key="1" tab="LWM2M Model">
10 10 <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerModel" />
11 11 </TabPane>
12 12 <TabPane key="2" tab="Servers">
13   - <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerServer" />
  13 + <div style="display: flex; width: 43vw; border: 1px solid gray; border-radius: 5px">
  14 + <div style="margin-left: -4.6vw; margin-top: 1.5vh">
  15 + <BasicForm
  16 + :showResetButton="false"
  17 + :showSubmitButton="false"
  18 + @register="registerServer"
  19 + />
  20 + </div>
  21 + </div>
14 22 </TabPane>
15 23 <TabPane key="3" tab="Other settings">
16   - <BasicForm
17   - :showResetButton="false"
18   - :showSubmitButton="false"
19   - @register="registerSettings"
20   - />
  24 + <div
  25 + style="
  26 + display: flex;
  27 + width: 43vw;
  28 + border: 1px solid gray;
  29 + border-radius: 5px;
  30 + overflow: hidden;
  31 + "
  32 + >
  33 + <div style="margin-left: -2vw; margin-top: 1.5vh">
  34 + <BasicForm
  35 + :showResetButton="false"
  36 + :showSubmitButton="false"
  37 + @register="registerSettings"
  38 + />
  39 + </div>
  40 + </div>
21 41 </TabPane>
22 42 <TabPane key="4" tab="Json Config Profile Device">
23 43 <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerDevice" />
... ... @@ -27,7 +47,7 @@
27 47 </template>
28 48
29 49 <script lang="ts">
30   - import { defineComponent, ref } from 'vue';
  50 + import { defineComponent, ref, reactive, nextTick } from 'vue';
31 51 import { Tabs } from 'ant-design-vue';
32 52 import { BasicForm, useForm } from '/@/components/Form';
33 53 import { modelSchemas, serverSchemas, settingsSchemas, deviceSchemas } from './index';
... ... @@ -40,37 +60,207 @@
40 60 BasicForm,
41 61 },
42 62 setup() {
43   - const currentKey = ref(1);
  63 + const currentKey = ref('1');
44 64 const currentSize = ref('large');
45   -
46   - const [registerModel] = useForm({
47   - labelWidth: 80,
  65 + let allObj: any = reactive({});
  66 + let allEchoObj: any = reactive({});
  67 + let allEchoStatus = ref(false);
  68 + let bootstrapObj = reactive({
  69 + servers: {},
  70 + bootstrapServer: {},
  71 + lwm2mServer: {},
  72 + });
  73 + let clientLwM2mSettingsObj = reactive({});
  74 + let observeAttrObj = reactive({
  75 + attribute: [],
  76 + attributeLwm2m: {},
  77 + keyName: {},
  78 + observe: [],
  79 + telemetry: [],
  80 + });
  81 + const [
  82 + registerModel,
  83 + { resetFields: resetObjectListValue, getFieldsValue: getObjectListValue },
  84 + ] = useForm({
  85 + labelWidth: 100,
48 86 schemas: modelSchemas,
49 87 actionColOptions: {
50 88 span: 14,
51 89 },
52 90 });
53   - const [registerServer] = useForm({
54   - labelWidth: 80,
  91 + const [
  92 + registerServer,
  93 + {
  94 + resetFields: resetServerValue,
  95 + validate: serverValidate,
  96 + setFieldsValue: serverSetFieldsValueFunc,
  97 + },
  98 + ] = useForm({
  99 + labelWidth: 180,
55 100 schemas: serverSchemas,
56 101 actionColOptions: {
57 102 span: 14,
58 103 },
59 104 });
60   - const [registerSettings] = useForm({
61   - labelWidth: 80,
62   - schemas: settingsSchemas,
63   - actionColOptions: {
64   - span: 14,
  105 + const [
  106 + registerSettings,
  107 + {
  108 + resetFields: resetSettingsValue,
  109 + validate: settingsValidate,
  110 + setFieldsValue: settingsSetFieldsValueFunc,
65 111 },
66   - });
67   - const [registerDevice] = useForm({
68   - labelWidth: 80,
69   - schemas: deviceSchemas,
  112 + ] = useForm({
  113 + labelWidth: 180,
  114 + schemas: settingsSchemas,
70 115 actionColOptions: {
71 116 span: 14,
72 117 },
73 118 });
  119 + const [registerDevice, { resetFields: resetDeviceValue, getFieldsValue: getDeviceValue }] =
  120 + useForm({
  121 + labelWidth: 100,
  122 + schemas: deviceSchemas,
  123 + actionColOptions: {
  124 + span: 14,
  125 + },
  126 + });
  127 +
  128 + const handleChange = (e) => {
  129 + if (allEchoStatus.value) {
  130 + switch (e) {
  131 + case '1':
  132 + break;
  133 + case '2':
  134 + nextTick(() => {
  135 + serverSetFieldsValueFunc({
  136 + //servers
  137 + binding: allEchoObj?.bootstrap?.servers?.binding,
  138 + shortId: allEchoObj?.bootstrap?.servers?.shortId,
  139 + lifetime: allEchoObj?.bootstrap?.servers?.lifetime,
  140 + notifIfDisabled: allEchoObj?.bootstrap?.servers?.notifIfDisabled,
  141 + defaultMinPeriod: allEchoObj?.bootstrap?.servers?.defaultMinPeriod,
  142 + bootstrapServerAccountTimeout:
  143 + allEchoObj?.bootstrap?.servers?.bootstrapServerAccountTimeout,
  144 + //servers
  145 + //lwm2mServer
  146 + host1: allEchoObj?.bootstrap?.lwm2mServer?.host,
  147 + port1: allEchoObj?.bootstrap?.lwm2mServer?.port,
  148 + serverId1: allEchoObj?.bootstrap?.lwm2mServer?.serverId,
  149 + securityMode1: allEchoObj?.bootstrap?.lwm2mServer?.securityMode,
  150 + serverPublicKey1: allEchoObj?.bootstrap?.lwm2mServer?.serverPublicKey,
  151 + clientHoldOffTime1: allEchoObj?.bootstrap?.lwm2mServer?.clientHoldOffTime,
  152 + bootstrapServerAccountTimeout1:
  153 + allEchoObj?.bootstrap?.lwm2mServer?.bootstrapServerAccountTimeout,
  154 + //lwm2mServer
  155 + //bootstrapServer
  156 + host: allEchoObj?.bootstrap?.bootstrapServer?.host,
  157 + port: allEchoObj?.bootstrap?.bootstrapServer?.port,
  158 + serverId: allEchoObj?.bootstrap?.bootstrapServer?.serverId,
  159 + securityMode: allEchoObj?.bootstrap?.bootstrapServer?.securityMode,
  160 + serverPublicKey: allEchoObj?.bootstrap?.bootstrapServer?.serverPublicKey,
  161 + clientHoldOffTime: allEchoObj?.bootstrap?.bootstrapServer?.clientHoldOffTime,
  162 + bootstrapServerAccountTimeout2:
  163 + allEchoObj?.bootstrap?.servers?.bootstrapServerAccountTimeout,
  164 + //bootstrapServer
  165 + });
  166 + });
  167 + break;
  168 + case '3':
  169 + nextTick(() => {
  170 + settingsSetFieldsValueFunc({
  171 + powerMode: allEchoObj?.clientLwM2mSettings?.powerMode,
  172 + psmActivityTimer: allEchoObj?.clientLwM2mSettings?.psmActivityTimer,
  173 + edrxCycle: allEchoObj?.clientLwM2mSettings?.edrxCycle,
  174 + pagingTransmissionWindow:
  175 + allEchoObj?.clientLwM2mSettings?.pagingTransmissionWindow,
  176 + fwUpdateStrategy: allEchoObj?.clientLwM2mSettings?.fwUpdateStrategy,
  177 + swUpdateStrategy: allEchoObj?.clientLwM2mSettings?.swUpdateStrategy,
  178 + clientOnlyObserveAfterConnect:
  179 + allEchoObj?.clientLwM2mSettings?.clientOnlyObserveAfterConnect,
  180 + fwUpdateResource: allEchoObj?.clientLwM2mSettings?.fwUpdateResource,
  181 + swUpdateResource: allEchoObj?.clientLwM2mSettings?.swUpdateResource,
  182 + compositeOperationsSupport:
  183 + allEchoObj?.clientLwM2mSettings?.compositeOperationsSupport,
  184 + });
  185 + });
  186 + break;
  187 + case '4':
  188 + break;
  189 + }
  190 + }
  191 + };
  192 + const setStepFieldsValueFunc = (v) => {
  193 + if (v) {
  194 + allEchoObj = v;
  195 + allEchoStatus.value = true;
  196 + }
  197 + };
  198 +
  199 + const getDataFunc = async () => {
  200 + const objectListVal = getObjectListValue();
  201 + const deviceVal = getDeviceValue();
  202 + console.log('第一个tab', objectListVal);
  203 + console.log('第四个tab', deviceVal);
  204 + const serverVal = await serverValidate();
  205 + const settingsVal = await settingsValidate();
  206 + if (!serverVal) return;
  207 + if (!settingsVal) return;
  208 + Reflect.set(bootstrapObj.servers, 'binding', serverVal.binding);
  209 + Reflect.set(bootstrapObj.servers, 'shortId', serverVal.shortId);
  210 + Reflect.set(bootstrapObj.servers, 'lifetime', serverVal.lifetime);
  211 + Reflect.set(bootstrapObj.servers, 'notifIfDisabled', serverVal.notifIfDisabled);
  212 + Reflect.set(bootstrapObj.servers, 'defaultMinPeriod', serverVal.defaultMinPeriod);
  213 + Reflect.set(bootstrapObj.bootstrapServer, 'serverId', serverVal.serverId);
  214 + Reflect.set(bootstrapObj.bootstrapServer, 'host', serverVal.host);
  215 + Reflect.set(bootstrapObj.bootstrapServer, 'port', serverVal.port);
  216 + Reflect.set(bootstrapObj.bootstrapServer, 'securityMode', serverVal.securityMode);
  217 + Reflect.set(bootstrapObj.bootstrapServer, 'serverPublicKey', serverVal.serverPublicKey);
  218 + Reflect.set(bootstrapObj.bootstrapServer, 'clientHoldOffTime', serverVal.clientHoldOffTime);
  219 + Reflect.set(
  220 + bootstrapObj.servers,
  221 + 'bootstrapServerAccountTimeout',
  222 + serverVal.bootstrapServerAccountTimeout2
  223 + );
  224 + Reflect.set(bootstrapObj.lwm2mServer, 'serverId', serverVal.serverId1);
  225 + Reflect.set(bootstrapObj.lwm2mServer, 'host', serverVal.host1);
  226 + Reflect.set(bootstrapObj.lwm2mServer, 'port', serverVal.port1);
  227 + Reflect.set(bootstrapObj.lwm2mServer, 'securityMode', serverVal.securityMode1);
  228 + Reflect.set(bootstrapObj.lwm2mServer, 'serverPublicKey', serverVal.serverPublicKey1);
  229 + Reflect.set(bootstrapObj.lwm2mServer, 'clientHoldOffTime', serverVal.clientHoldOffTime1);
  230 + Reflect.set(
  231 + bootstrapObj.lwm2mServer,
  232 + 'bootstrapServerAccountTimeout',
  233 + serverVal.bootstrapServerAccountTimeout1
  234 + );
  235 + delete settingsVal.unit;
  236 + delete settingsVal.unit2;
  237 + clientLwM2mSettingsObj = {
  238 + ...settingsVal,
  239 + };
  240 + allObj = {
  241 + ...{
  242 + clientLwM2mSettings: clientLwM2mSettingsObj,
  243 + },
  244 + ...{
  245 + bootstrap: bootstrapObj,
  246 + },
  247 + ...{
  248 + observeAttr: observeAttrObj,
  249 + },
  250 + type: 'LWM2M',
  251 + };
  252 + return allObj;
  253 + };
  254 +
  255 + const resetStepFieldsValueFunc = () => {
  256 + allEchoStatus.value = false;
  257 + nextTick(() => {
  258 + resetObjectListValue();
  259 + resetServerValue();
  260 + resetSettingsValue();
  261 + resetDeviceValue();
  262 + });
  263 + };
74 264
75 265 return {
76 266 currentKey,
... ... @@ -79,6 +269,10 @@
79 269 registerServer,
80 270 registerSettings,
81 271 registerDevice,
  272 + getDataFunc,
  273 + setStepFieldsValueFunc,
  274 + handleChange,
  275 + resetStepFieldsValueFunc,
82 276 };
83 277 },
84 278 });
... ...
... ... @@ -83,7 +83,7 @@
83 83 v?.transportPayloadTypeConfiguration?.useJsonPayloadFormatForDefaultDownlinkTopics,
84 84 });
85 85 };
86   - const customClearStepTwoValueFunc = () => {
  86 + const resetStepFieldsValueFunc = () => {
87 87 resetFields();
88 88 };
89 89 async function customResetFunc() {
... ... @@ -123,7 +123,7 @@
123 123 return {
124 124 customResetFunc,
125 125 register,
126   - customClearStepTwoValueFunc,
  126 + resetStepFieldsValueFunc,
127 127 getDataFunc,
128 128 setStepFieldsValueFunc,
129 129 };
... ...
... ... @@ -77,7 +77,7 @@ export const step2Schemas: FormSchema[] = [
77 77 { label: '默认', value: 'DEFAULT' },
78 78 { label: 'MQTT', value: 'MQTT' },
79 79 { label: 'CoAP', value: 'COAP' },
80   - // { label: 'LWM2M', value: 'LWM2M' },
  80 + { label: 'LWM2M', value: 'LWM2M' },
81 81 ],
82 82 onChange(e) {},
83 83 };
... ...