简柏林 / thingskit-front · Commits

Commit f69b0e80d6e8b82501e977c7da78e521f36635cb

Authored by fengtao
1 parent 14468e22

pref:优化Mqtt和Coap获取表单数据

Inline Side-by-side
Showing 5 changed files with 90 additions and 114 deletions
@@ -40,7 +40,7 @@ export const CoapSchemas: FormSchema[] = [ @@ -40,7 +40,7 @@ export const CoapSchemas: FormSchema[] = [
40 { label: 'Efento NB-IoT', value: 'EFENTO' }, 40 { label: 'Efento NB-IoT', value: 'EFENTO' },
41 ], 41 ],
42 }, 42 },
43 - colProps: { span: 22}, 43 + colProps: { span: 22 },
44 }, 44 },
45 { 45 {
46 field: 'transportPayloadType', 46 field: 'transportPayloadType',
@@ -163,9 +163,7 @@ export const CoapSchemas: FormSchema[] = [ @@ -163,9 +163,7 @@ export const CoapSchemas: FormSchema[] = [
163 colProps: { span: 22 }, 163 colProps: { span: 22 },
164 component: 'InputTextArea', 164 component: 'InputTextArea',
165 componentProps: { 165 componentProps: {
166 - autoSize: {  
167 - maxRows: 10,  
168 - }, 166 + rows: 17,
169 }, 167 },
170 defaultValue: ` 168 defaultValue: `
171 syntax ="proto3"; 169 syntax ="proto3";
@@ -193,9 +191,7 @@ export const CoapSchemas: FormSchema[] = [ @@ -193,9 +191,7 @@ export const CoapSchemas: FormSchema[] = [
193 colProps: { span: 22 }, 191 colProps: { span: 22 },
194 component: 'InputTextArea', 192 component: 'InputTextArea',
195 componentProps: { 193 componentProps: {
196 - autoSize: {  
197 - maxRows: 10,  
198 - }, 194 + rows: 9,
199 }, 195 },
200 defaultValue: ` 196 defaultValue: `
201 syntax ="proto3"; 197 syntax ="proto3";
@@ -215,9 +211,7 @@ export const CoapSchemas: FormSchema[] = [ @@ -215,9 +211,7 @@ export const CoapSchemas: FormSchema[] = [
215 colProps: { span: 22 }, 211 colProps: { span: 22 },
216 component: 'InputTextArea', 212 component: 'InputTextArea',
217 componentProps: { 213 componentProps: {
218 - autoSize: {  
219 - maxRows: 10,  
220 - }, 214 + rows: 11,
221 }, 215 },
222 defaultValue: ` 216 defaultValue: `
223 syntax ="proto3"; 217 syntax ="proto3";
@@ -238,9 +232,7 @@ export const CoapSchemas: FormSchema[] = [ @@ -238,9 +232,7 @@ export const CoapSchemas: FormSchema[] = [
238 colProps: { span: 22 }, 232 colProps: { span: 22 },
239 component: 'InputTextArea', 233 component: 'InputTextArea',
240 componentProps: { 234 componentProps: {
241 - autoSize: {  
242 - maxRows: 10,  
243 - }, 235 + rows: 9,
244 }, 236 },
245 defaultValue: ` 237 defaultValue: `
246 syntax ="proto3"; 238 syntax ="proto3";
@@ -8,16 +8,12 @@ @@ -8,16 +8,12 @@
8 <script lang="ts" setup> 8 <script lang="ts" setup>
9 import { reactive } from 'vue'; 9 import { reactive } from 'vue';
10 import { BasicForm, useForm } from '/@/components/Form'; 10 import { BasicForm, useForm } from '/@/components/Form';
11 - import {  
12 - CoapSchemas,  
13 - // deviceTelemetryProtoSchemaData,  
14 - // deviceAttributesProtoSchemaData,  
15 - // deviceRpcRequestProtoSchemaData,  
16 - // deviceRpcResponseProtoSchemaData,  
17 - } from './Coap'; 11 + import { CoapSchemas } from './Coap';
18 12
19 const emits = defineEmits(['prev']); 13 const emits = defineEmits(['prev']);
20 - let coapAllData = reactive({}); 14 + const coapAllData = reactive({
  15 + coapData: {},
  16 + });
21 const transportCoapData: any = reactive({ 17 const transportCoapData: any = reactive({
22 coapDeviceTypeConfiguration: { 18 coapDeviceTypeConfiguration: {
23 coapDeviceType: null, 19 coapDeviceType: null,
@@ -61,25 +57,43 @@ @@ -61,25 +57,43 @@
61 const getFormData = async () => { 57 const getFormData = async () => {
62 const val = await validate(); 58 const val = await validate();
63 if (!val) return; 59 if (!val) return;
64 - transportCoapData.coapDeviceTypeConfiguration.coapDeviceType = val.coapDeviceType;  
65 - transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.transportPayloadType =  
66 - val.transportPayloadType;  
67 - transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema =  
68 - val.deviceTelemetryProtoSchema;  
69 - transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceAttributesProtoSchema =  
70 - val.deviceAttributesProtoSchema;  
71 - transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema =  
72 - val.deviceRpcRequestProtoSchema;  
73 - transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema =  
74 - val.deviceRpcResponseProtoSchema;  
75 - transportCoapData.clientSettings.powerMode = val.powerMode;  
76 - transportCoapData.clientSettings.edrxCycle = val.edrxCycle;  
77 - transportCoapData.clientSettings.pagingTransmissionWindow = val.pagingTransmissionWindow;  
78 - transportCoapData.clientSettings.psmActivityTimer = val.psmActivityTimer;  
79 - coapAllData = { 60 + for (let o in val) {
  61 + for (let u in transportCoapData) {
  62 + switch (u) {
  63 + case 'coapDeviceTypeConfiguration':
  64 + for (let t in transportCoapData.coapDeviceTypeConfiguration) {
  65 + if (t === 'coapDeviceType') {
  66 + Reflect.set(transportCoapData.coapDeviceTypeConfiguration, t, val[t]);
  67 + }
  68 + if (t === 'transportPayloadTypeConfiguration') {
  69 + for (let t in transportCoapData.coapDeviceTypeConfiguration
  70 + .transportPayloadTypeConfiguration) {
  71 + if (t === o) {
  72 + Reflect.set(
  73 + transportCoapData.coapDeviceTypeConfiguration
  74 + .transportPayloadTypeConfiguration,
  75 + t,
  76 + val[t]
  77 + );
  78 + }
  79 + }
  80 + }
  81 + }
  82 + break;
  83 + case 'clientSettings':
  84 + for (let t in transportCoapData.clientSettings) {
  85 + if (t === o) {
  86 + Reflect.set(transportCoapData.clientSettings, t, val[t]);
  87 + }
  88 + }
  89 + break;
  90 + }
  91 + }
  92 + }
  93 + coapAllData.coapData = {
80 ...transportCoapData, 94 ...transportCoapData,
81 }; 95 };
82 - return coapAllData; 96 + return coapAllData.coapData;
83 }; 97 };
84 defineExpose({ 98 defineExpose({
85 getFormData, 99 getFormData,
@@ -100,9 +100,7 @@ export const MqttSchemas: FormSchema[] = [ @@ -100,9 +100,7 @@ export const MqttSchemas: FormSchema[] = [
100 colProps: { span: 23 }, 100 colProps: { span: 23 },
101 component: 'InputTextArea', 101 component: 'InputTextArea',
102 componentProps: { 102 componentProps: {
103 - autoSize: {  
104 - maxRows: 10,  
105 - }, 103 + rows: 17,
106 }, 104 },
107 defaultValue: ` 105 defaultValue: `
108 syntax ="proto3"; 106 syntax ="proto3";
@@ -129,9 +127,7 @@ export const MqttSchemas: FormSchema[] = [ @@ -129,9 +127,7 @@ export const MqttSchemas: FormSchema[] = [
129 colProps: { span: 23 }, 127 colProps: { span: 23 },
130 component: 'InputTextArea', 128 component: 'InputTextArea',
131 componentProps: { 129 componentProps: {
132 - autoSize: {  
133 - maxRows: 10,  
134 - }, 130 + rows: 11,
135 }, 131 },
136 defaultValue: ` 132 defaultValue: `
137 syntax ="proto3"; 133 syntax ="proto3";
@@ -150,9 +146,7 @@ export const MqttSchemas: FormSchema[] = [ @@ -150,9 +146,7 @@ export const MqttSchemas: FormSchema[] = [
150 colProps: { span: 23 }, 146 colProps: { span: 23 },
151 component: 'InputTextArea', 147 component: 'InputTextArea',
152 componentProps: { 148 componentProps: {
153 - autoSize: {  
154 - maxRows: 10,  
155 - }, 149 + rows: 11,
156 }, 150 },
157 defaultValue: ` 151 defaultValue: `
158 syntax ="proto3"; 152 syntax ="proto3";
@@ -172,9 +166,7 @@ export const MqttSchemas: FormSchema[] = [ @@ -172,9 +166,7 @@ export const MqttSchemas: FormSchema[] = [
172 colProps: { span: 23 }, 166 colProps: { span: 23 },
173 component: 'InputTextArea', 167 component: 'InputTextArea',
174 componentProps: { 168 componentProps: {
175 - autoSize: {  
176 - maxRows: 10,  
177 - }, 169 + rows: 11,
178 }, 170 },
179 defaultValue: ` 171 defaultValue: `
180 syntax ="proto3"; 172 syntax ="proto3";
@@ -235,3 +227,19 @@ message RpcResponseMsg { @@ -235,3 +227,19 @@ message RpcResponseMsg {
235 optional string payload = 1; 227 optional string payload = 1;
236 } 228 }
237 `; 229 `;
  230 +
  231 +export const fixedTextA = `支持单[+]和多级[#]通配符。 [+] is suitable for any topic filter
  232 +level。例如：v1/devices/+/telemetry or +/devices/+/attributes。 [#]可以替换 topic
  233 +filter 本身，并且必须是 topic 的最后一个符号。例如：# or v1/devices/me/#。`;
  234 +
  235 +export const fixedTextB = `启用时，默认情况下，平台将使用Protobuf有效载荷格式。如果解析失败，平台将尝试使用JSON负载格式。
  236 +有助于固件更新期间的向后兼容性。例如，固件的初始版本使用Json，而新版本使用Protobuf。
  237 +在设备组的固件更新过程中，需要同时支持Protobuf和JSON。兼容性模式会导致性能略有下降，
  238 +因此建议在更新所有设备后禁用此模式。`;
  239 +
  240 +export const fixedTextC = `启用后，平台将使用Json负载格式通过以下主题推送属性
  241 +和RPC:v1/devices/me/attributes/response/$request id、v1/devices/me/attributes、
  242 +v1/devices/me/RPC/request/$request id、v1/devices/me/RPC/response/$request id。
  243 +此设置不会影响使用新（v2）主题发送的属性和rpc订阅： v2/a/res/$request
  244 +id、v2/a、v2/r/req/$request id、v2/r/res/$request id。 其中，$request
  245 +id是整数请求标识符。`;
@@ -13,31 +13,21 @@ @@ -13,31 +13,21 @@
13 <template #descSlot> 13 <template #descSlot>
14 <div style="width: 47rem; margin-left: 2rem"> 14 <div style="width: 47rem; margin-left: 2rem">
15 <p> 15 <p>
16 - 支持单[+]和多级[#]通配符。 [+] is suitable for any topic filter  
17 - level。例如：v1/devices/+/telemetry or +/devices/+/attributes。 [#]可以替换 topic  
18 - filter 本身，并且必须是 topic 的最后一个符号。例如：# or v1/devices/me/#。 16 + {{ fixedTextA }}
19 </p> 17 </p>
20 </div> 18 </div>
21 </template> 19 </template>
22 <template #desc1> 20 <template #desc1>
23 <div style="width: 47rem; margin-left: 2rem"> 21 <div style="width: 47rem; margin-left: 2rem">
24 <p> 22 <p>
25 - 启用时，默认情况下，平台将使用Protobuf有效载荷格式。如果解析失败，平台将尝试使用JSON负载格式。  
26 - 有助于固件更新期间的向后兼容性。例如，固件的初始版本使用Json，而新版本使用Protobuf。  
27 - 在设备组的固件更新过程中，需要同时支持Protobuf和JSON。兼容性模式会导致性能略有下降，  
28 - 因此建议在更新所有设备后禁用此模式。 23 + {{ fixedTextB }}
29 </p> 24 </p>
30 </div> 25 </div>
31 </template> 26 </template>
32 <template #desc2> 27 <template #desc2>
33 <div style="width: 47rem; margin-left: 2rem"> 28 <div style="width: 47rem; margin-left: 2rem">
34 <p> 29 <p>
35 - 启用后，平台将使用Json负载格式通过以下主题推送属性  
36 - 和RPC:v1/devices/me/attributes/response/$request\u id、v1/devices/me/attributes、  
37 - v1/devices/me/RPC/request/$request\u id、v1/devices/me/RPC/response/$request\u id。  
38 - 此设置不会影响使用新（v2）主题发送的属性和rpc订阅： v2/a/res/$request\u  
39 - id、v2/a、v2/r/req/$request\u id、v2/r/res/$request\u id。 其中，$request\u  
40 - id是整数请求标识符。 30 + {{ fixedTextC }}
41 </p> 31 </p>
42 </div> 32 </div>
43 </template> 33 </template>
@@ -48,17 +38,13 @@ @@ -48,17 +38,13 @@
48 <script lang="ts" setup> 38 <script lang="ts" setup>
49 import { reactive } from 'vue'; 39 import { reactive } from 'vue';
50 import { BasicForm, useForm } from '/@/components/Form'; 40 import { BasicForm, useForm } from '/@/components/Form';
51 - import {  
52 - MqttSchemas,  
53 - // deviceTelemetryProtoSchemaData,  
54 - // deviceAttributesProtoSchemaData,  
55 - // deviceRpcRequestProtoSchemaData,  
56 - // deviceRpcResponseProtoSchemaData,  
57 - } from './Mqtt'; 41 + import { MqttSchemas, fixedTextA, fixedTextB, fixedTextC } from './Mqtt';
58 42
59 const emits = defineEmits(['prev']); 43 const emits = defineEmits(['prev']);
60 44
61 - let allMqttData: any = reactive({}); 45 + const allMqttData: any = reactive({
  46 + mqttData: {},
  47 + });
62 const transportMqttData: any = reactive({ 48 const transportMqttData: any = reactive({
63 transportPayloadTypeConfiguration: { 49 transportPayloadTypeConfiguration: {
64 transportPayloadType: null, 50 transportPayloadType: null,
@@ -94,33 +80,27 @@ @@ -94,33 +80,27 @@
94 const getFormData = async () => { 80 const getFormData = async () => {
95 let val = await validate(); 81 let val = await validate();
96 if (!val) return; 82 if (!val) return;
97 - delete val.desc;  
98 - transportMqttData.transportPayloadTypeConfiguration.transportPayloadType =  
99 - val.transportPayloadType;  
100 - transportMqttData.transportPayloadTypeConfiguration.enableCompatibilityWithJsonPayloadFormat =  
101 - val.enableCompatibilityWithJsonPayloadFormat;  
102 - transportMqttData.transportPayloadTypeConfiguration.useJsonPayloadFormatForDefaultDownlinkTopics =  
103 - val.useJsonPayloadFormatForDefaultDownlinkTopics;  
104 - transportMqttData.transportPayloadTypeConfiguration.deviceAttributesProtoSchema =  
105 - val.deviceAttributesProtoSchema;  
106 - transportMqttData.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema =  
107 - val.deviceRpcRequestProtoSchema;  
108 - transportMqttData.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema =  
109 - val.deviceRpcResponseProtoSchema;  
110 - transportMqttData.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema =  
111 - val.deviceTelemetryProtoSchema;  
112 - allMqttData = { 83 + for (let o in val) {
  84 + for (let u in transportMqttData) {
  85 + if (u === 'transportPayloadTypeConfiguration') {
  86 + for (let t in transportMqttData.transportPayloadTypeConfiguration) {
  87 + if (t === o) {
  88 + Reflect.set(transportMqttData.transportPayloadTypeConfiguration, t, val[t]);
  89 + }
  90 + }
  91 + }
  92 + }
  93 + }
  94 + for (let i in val) {
  95 + if (i !== 'deviceAttributesTopic' && i !== 'deviceTelemetryTopic') {
  96 + Reflect.deleteProperty(val, i);
  97 + }
  98 + }
  99 + allMqttData.mqttData = {
113 ...val, 100 ...val,
114 ...transportMqttData, 101 ...transportMqttData,
115 }; 102 };
116 - delete allMqttData.deviceTelemetryProtoSchema;  
117 - delete allMqttData.deviceAttributesProtoSchema;  
118 - delete allMqttData.deviceRpcRequestProtoSchema;  
119 - delete allMqttData.deviceRpcResponseProtoSchema;  
120 - delete allMqttData.useJsonPayloadFormatForDefaultDownlinkTopics;  
121 - delete allMqttData.enableCompatibilityWithJsonPayloadFormat;  
122 - delete allMqttData.transportPayloadType;  
123 - return allMqttData; 103 + return allMqttData.mqttData;
124 }; 104 };
125 defineExpose({ 105 defineExpose({
126 getFormData, 106 getFormData,
@@ -60,7 +60,7 @@ @@ -60,7 +60,7 @@
60 import { exportPage, deleteExportManage } from '/@/api/export/exportManager'; 60 import { exportPage, deleteExportManage } from '/@/api/export/exportManager';
61 61
62 const searchInfo = reactive<Recordable>({}); 62 const searchInfo = reactive<Recordable>({});
63 - const [registerTable, { reload, setProps, setTableData }] = useTable({ 63 + const [registerTable, { reload, setProps }] = useTable({
64 title: '转换脚本列表', 64 title: '转换脚本列表',
65 api: exportPage, 65 api: exportPage,
66 columns, 66 columns,
@@ -102,24 +102,6 @@ @@ -102,24 +102,6 @@
102 102
103 // 新增或编辑 103 // 新增或编辑
104 const handleCreateOrEdit = (record: Recordable | null) => { 104 const handleCreateOrEdit = (record: Recordable | null) => {
105 - setTableData([  
106 - {  
107 - id: 1,  
108 - reportConfigName: '11',  
109 - organizationName: 0,  
110 - dataType: '11',  
111 - executeWay: '11',  
112 - executeTime: '2022-05-21',  
113 - },  
114 - {  
115 - id: 2,  
116 - reportConfigName: '11',  
117 - organizationName: 0,  
118 - dataType: '11',  
119 - executeWay: '11',  
120 - executeTime: '2022-05-21',  
121 - },  
122 - ]);  
123 if (record) { 105 if (record) {
124 openModal(true, { 106 openModal(true, {
125 isUpdate: false, 107 isUpdate: false,