简柏林 / thingskit-front · Commits

Commit d2d55b6135ab2d9ee9df439eae63948814d2e064

Authored by fengtao
1 parent 7a84572e

feat：设备配置新增snmp 待解决TODO 1 2问题

Inline Side-by-side
Showing 5 changed files with 108 additions and 117 deletions
@@ -214,6 +214,7 @@ @@ -214,6 +214,7 @@
214 if (isUpdate.value == 1) { 214 if (isUpdate.value == 1) {
215 delete postDeviceConfogData.id; 215 delete postDeviceConfogData.id;
216 } 216 }
  217 + //1 TODO 待解决OID对象唯一标识不能重复问题验证
217 let isMappings = false; 218 let isMappings = false;
218 // let isQuerying = false; 219 // let isQuerying = false;
219 postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach( 220 postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
@@ -24,7 +24,7 @@ @@ -24,7 +24,7 @@
24 <div style="margin-top: 1vh" v-else-if="isMqttType == 'LWM2M'"> 24 <div style="margin-top: 1vh" v-else-if="isMqttType == 'LWM2M'">
25 <Lwm2mCpns ref="lwm2mRef" /> 25 <Lwm2mCpns ref="lwm2mRef" />
26 </div> 26 </div>
27 - <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP1'"> 27 + <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP'">
28 <SnmpCpns ref="snmpRef" /> 28 <SnmpCpns ref="snmpRef" />
29 </div> 29 </div>
30 <div 30 <div
@@ -124,7 +124,7 @@ @@ -124,7 +124,7 @@
124 { label: 'MQTT', value: 'MQTT' }, 124 { label: 'MQTT', value: 'MQTT' },
125 { label: 'CoAP', value: 'COAP' }, 125 { label: 'CoAP', value: 'COAP' },
126 { label: 'LWM2M', value: 'LWM2M' }, 126 { label: 'LWM2M', value: 'LWM2M' },
127 - // { label: 'SNMP', value: 'SNMP' }, 127 + { label: 'SNMP', value: 'SNMP' },
128 ], 128 ],
129 onChange(e) { 129 onChange(e) {
130 isMqttType.value = e; 130 isMqttType.value = e;
@@ -8,8 +8,7 @@ @@ -8,8 +8,7 @@
8 v-model:value="param.dataType" 8 v-model:value="param.dataType"
9 style="width: 140px" 9 style="width: 140px"
10 :options="selectOptions" 10 :options="selectOptions"
11 - @focus="focus"  
12 - @change="handleChange" 11 + @change="emitChange"
13 /> 12 />
14 <a-input 13 <a-input
15 placeholder="请输入Data key" 14 placeholder="请输入Data key"
@@ -88,13 +87,6 @@ @@ -88,13 +87,6 @@
88 value: 'JSON', 87 value: 'JSON',
89 }, 88 },
90 ]); 89 ]);
91 - const focus = () => {  
92 - console.log('focus');  
93 - };  
94 -  
95 - const handleChange = (value: string) => {  
96 - console.log(`selected ${value}`);  
97 - };  
98 90
99 //input动态数据 91 //input动态数据
100 const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] }); 92 const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
@@ -105,7 +97,7 @@ @@ -105,7 +97,7 @@
105 dynamicInput.params.splice(index, 1); 97 dynamicInput.params.splice(index, 1);
106 } 98 }
107 emitChange(); 99 emitChange();
108 - emit('dynamicReduceHeight', false); 100 + emit('dynamicReduceHeight');
109 }; 101 };
110 102
111 //新增Input 103 //新增Input
@@ -116,7 +108,7 @@ @@ -116,7 +108,7 @@
116 oid: '', 108 oid: '',
117 }); 109 });
118 emitChange(); 110 emitChange();
119 - emit('dynamicAddHeight', true); 111 + emit('dynamicAddHeight');
120 }; 112 };
121 113
122 //监听传入数据value 114 //监听传入数据value
@@ -164,8 +156,6 @@ @@ -164,8 +156,6 @@
164 remove, 156 remove,
165 add, 157 add,
166 selectOptions, 158 selectOptions,
167 - focus,  
168 - handleChange,  
169 }; 159 };
170 }, 160 },
171 }); 161 });
  1 +<!-- eslint-disable vue/no-mutating-props -->
1 <template> 2 <template>
2 <div class="snmp-form" :style="{ height: dynamicHeight + 'vh' }"> 3 <div class="snmp-form" :style="{ height: dynamicHeight + 'vh' }">
3 <div class="form-item1" :style="{ height: dynamicHeight + 'vh' }"> 4 <div class="form-item1" :style="{ height: dynamicHeight + 'vh' }">
4 <div style="margin-left: 1vw"> 5 <div style="margin-left: 1vw">
5 <h3 style="color: gray">范围*</h3> 6 <h3 style="color: gray">范围*</h3>
6 - <Select  
7 - v-model:value="selectValue"  
8 - style="width: 140px"  
9 - :options="selectOptions"  
10 - @change="handleChange"  
11 - allowClear  
12 - /> 7 + <slot></slot>
13 </div> 8 </div>
14 </div> 9 </div>
15 <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }"> 10 <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }">
16 <div style="margin-left: 1vw"> 11 <div style="margin-left: 1vw">
17 - <h3 style="color: gray">查询频率（毫秒*）</h3> 12 + <h3
  13 + v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
  14 + style="color: gray"
  15 + >查询频率（毫秒*）</h3
  16 + >
18 <InputNumber 17 <InputNumber
19 - v-if="selectValue == 'TELEMETRY_QUERYING' || selectValue == 'CLIENT_ATTRIBUTES_QUERYING'"  
20 - v-model:value="inputNmberValue"  
21 - :min="1"  
22 - :max="50000" 18 + v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
  19 + v-model:value="item.queryingFrequencyMs"
  20 + :min="5000"
  21 + :max="1000000000"
23 /> 22 />
24 <MappingsForm 23 <MappingsForm
25 - :value="mappings" 24 + :value="item.mappings"
26 @change="handleMappingsChange" 25 @change="handleMappingsChange"
27 - @dynamicAddHeight="handleDynamicAddHeight"  
28 - @dynamicReduceHeight="handleDynamicReduceHeight" 26 + @dynamicAddHeight="dynamicHeight += 4"
  27 + @dynamicReduceHeight="dynamicHeight -= 4"
29 /> 28 />
30 </div> 29 </div>
31 </div> 30 </div>
@@ -45,87 +44,45 @@ @@ -45,87 +44,45 @@
45 </template> 44 </template>
46 <script setup lang="ts"> 45 <script setup lang="ts">
47 import { ref } from 'vue'; 46 import { ref } from 'vue';
48 - import { Select, Button, InputNumber } from 'ant-design-vue'; 47 + import { Button, InputNumber } from 'ant-design-vue';
49 import { MinusCircleOutlined } from '@ant-design/icons-vue'; 48 import { MinusCircleOutlined } from '@ant-design/icons-vue';
50 import MappingsForm from './MappingsForm.vue'; 49 import MappingsForm from './MappingsForm.vue';
51 50
52 - defineProps({ 51 + const props = defineProps({
53 item: { 52 item: {
54 type: Object, 53 type: Object,
55 default: () => {}, 54 default: () => {},
56 }, 55 },
57 - mappings: {  
58 - type: Array,  
59 - default: () => [],  
60 - },  
61 index: { 56 index: {
62 type: Number, 57 type: Number,
63 }, 58 },
64 - spec: {  
65 - type: String,  
66 - default: '',  
67 - },  
68 }); 59 });
69 - const emit = defineEmits(['removeItem', 'selectItem']);  
70 - const selectValue = ref('CLIENT_ATTRIBUTES_QUERYING');  
71 - const inputNmberValue = ref(5000); 60 + const emit = defineEmits(['removeItem']);
72 const dynamicHeight = ref(25); 61 const dynamicHeight = ref(25);
73 - const selectOptions: any = ref([  
74 - {  
75 - label: 'Telemetry',  
76 - value: 'TELEMETRY_QUERYING',  
77 - disabled: false,  
78 - },  
79 - {  
80 - label: 'Client attributes',  
81 - value: 'CLIENT_ATTRIBUTES_QUERYING',  
82 - disabled: false,  
83 - },  
84 - {  
85 - label: 'Shared attributes',  
86 - value: 'SHARED_ATTRIBUTES_SETTING',  
87 - disabled: false,  
88 - },  
89 - {  
90 - label: 'RPC request',  
91 - value: 'TO_DEVICE_RPC_REQUEST',  
92 - disabled: false,  
93 - },  
94 - ]);  
95 - const handleChange = (value: string) => {  
96 - selectValue.value = value;  
97 - emit('selectItem', selectValue.value);  
98 - };  
99 - const mapping: any = ref([]); 62 +
100 const handleMappingsChange = (e) => { 63 const handleMappingsChange = (e) => {
101 - mapping.value = e;  
102 - };  
103 - const handleDynamicAddHeight = (e) => {  
104 - if (e) {  
105 - dynamicHeight.value += 4;  
106 - } 64 + // eslint-disable-next-line vue/no-mutating-props
  65 + props.item.mappings = e;
107 }; 66 };
108 - const handleDynamicReduceHeight = (e) => {  
109 - if (!e) {  
110 - dynamicHeight.value -= 4;  
111 - }  
112 - };  
113 -  
114 const handleRemove = (item, index) => { 67 const handleRemove = (item, index) => {
115 emit('removeItem', item, index); 68 emit('removeItem', item, index);
116 }; 69 };
117 - //设置回显表单值  
118 - const setFieldsValueFunc = (item, inputValue) => {  
119 - selectValue.value = item;  
120 - inputNmberValue.value = inputValue; 70 + //设置回显的高度
  71 + const setFieldsValueFunc = () => {
  72 + dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15;
121 }; 73 };
122 //获取表单的值 74 //获取表单的值
123 const getSnmpFormFunc = () => { 75 const getSnmpFormFunc = () => {
124 let obj: any = {}; 76 let obj: any = {};
125 obj = { 77 obj = {
126 - ...{ spec: selectValue.value },  
127 - ...{ mappings: mapping.value },  
128 - ...{ queryingFrequencyMs: inputNmberValue.value }, 78 + ...{ spec: props.item.spec },
  79 + ...{ mappings: props.item.mappings },
  80 + ...{
  81 + queryingFrequencyMs:
  82 + props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
  83 + ? props.item.queryingFrequencyMs
  84 + : null,
  85 + },
129 }; 86 };
130 return obj; 87 return obj;
131 }; 88 };
@@ -133,8 +90,6 @@ @@ -133,8 +90,6 @@
133 getSnmpFormFunc, 90 getSnmpFormFunc,
134 setFieldsValueFunc, 91 setFieldsValueFunc,
135 handleMappingsChange, 92 handleMappingsChange,
136 - selectValue,  
137 - handleChange,  
138 }); 93 });
139 </script> 94 </script>
140 <style lang="less" scoped> 95 <style lang="less" scoped>
@@ -145,6 +100,7 @@ @@ -145,6 +100,7 @@
145 -webkit-appearance: none; 100 -webkit-appearance: none;
146 background: transparent; 101 background: transparent;
147 } 102 }
  103 +
148 .snmp-form { 104 .snmp-form {
149 display: flex; 105 display: flex;
150 align-items: center; 106 align-items: center;
@@ -153,8 +109,6 @@ @@ -153,8 +109,6 @@
153 height: 20vh; 109 height: 20vh;
154 border: 0.1px solid #bfbfbf; 110 border: 0.1px solid #bfbfbf;
155 margin-top: 2vh; 111 margin-top: 2vh;
156 - overflow: hidden;  
157 - overflow-y: scroll;  
158 112
159 .form-item1 { 113 .form-item1 {
160 width: 9vw; 114 width: 9vw;
@@ -13,18 +13,30 @@ @@ -13,18 +13,30 @@
13 <template #add> 13 <template #add>
14 <div> 14 <div>
15 <template v-for="(item, index) in dynamicSNMP.communicationConfigs" :key="item"> 15 <template v-for="(item, index) in dynamicSNMP.communicationConfigs" :key="item">
16 - <span style="display: none">{{ item }}</span>  
17 - <span style="display: none">{{ index }}</span>  
18 <!-- snmp表单项 --> 16 <!-- snmp表单项 -->
19 <SnmpForm 17 <SnmpForm
20 - :spec="item.spec"  
21 :index="index" 18 :index="index"
22 :item="item" 19 :item="item"
23 :ref="dynamicBindRef.SnmpFormItemRef" 20 :ref="dynamicBindRef.SnmpFormItemRef"
24 :mappings="item.mappings" 21 :mappings="item.mappings"
25 @removeItem="handleRemoveItem" 22 @removeItem="handleRemoveItem"
26 - @selectItem="handleSelectItem"  
27 - /> 23 + >
  24 + <Select
  25 + v-model:value="item.spec"
  26 + style="width: 140px"
  27 + :options="selectOptions"
  28 + @change="handleChange(item.spec)"
  29 + allowClear
  30 + >
  31 + <SelectOption
  32 + v-for="it in selectOptions"
  33 + :value="it.value"
  34 + :key="it.value"
  35 + :label="it.label"
  36 + :disabled="it.disabled"
  37 + />
  38 + </Select>
  39 + </SnmpForm>
28 </template> 40 </template>
29 <div 41 <div
30 v-if="dynamicSNMP.communicationConfigs.length < 4" 42 v-if="dynamicSNMP.communicationConfigs.length < 4"
@@ -48,7 +60,7 @@ @@ -48,7 +60,7 @@
48 import { BasicForm, useForm } from '/@/components/Form'; 60 import { BasicForm, useForm } from '/@/components/Form';
49 import { snmpSchemas } from './config'; 61 import { snmpSchemas } from './config';
50 import { PlusCircleOutlined } from '@ant-design/icons-vue'; 62 import { PlusCircleOutlined } from '@ant-design/icons-vue';
51 - import { Button } from 'ant-design-vue'; 63 + import { Button, Select, SelectOption } from 'ant-design-vue';
52 import SnmpForm from './cpns/SnmpForm.vue'; 64 import SnmpForm from './cpns/SnmpForm.vue';
53 65
54 interface mappingsI { 66 interface mappingsI {
@@ -61,6 +73,48 @@ @@ -61,6 +73,48 @@
61 queryingFrequencyMs: number; 73 queryingFrequencyMs: number;
62 mappings: mappingsI[]; 74 mappings: mappingsI[];
63 } 75 }
  76 + const selectOptions: any = ref([
  77 + {
  78 + label: 'Telemetry',
  79 + value: 'TELEMETRY_QUERYING',
  80 + disabled: false,
  81 + },
  82 + {
  83 + label: 'Client attributes',
  84 + value: 'CLIENT_ATTRIBUTES_QUERYING',
  85 + disabled: false,
  86 + },
  87 + {
  88 + label: 'Shared attributes',
  89 + value: 'SHARED_ATTRIBUTES_SETTING',
  90 + disabled: false,
  91 + },
  92 + {
  93 + label: 'RPC request',
  94 + value: 'TO_DEVICE_RPC_REQUEST',
  95 + disabled: false,
  96 + },
  97 + ]);
  98 + const selectValue = ref('');
  99 + //解决新增选择框互斥问题和编辑回显互斥问题
  100 + const handleChange = (value: string) => {
  101 + selectValue.value = value;
  102 + selectOptions.value.forEach((ele: any) => {
  103 + ele.disabled = false;
  104 + dynamicSNMP.communicationConfigs.forEach((element: any) => {
  105 + if (element.spec === ele.value) {
  106 + ele.disabled = true;
  107 + selectOptions.value.forEach((it: any) => {
  108 + if ((ele.disabled = true)) {
  109 + if (ele.value == it.value) {
  110 + it.disabled = true;
  111 + }
  112 + }
  113 + });
  114 + }
  115 + });
  116 + });
  117 + };
64 const dynamicBindRef: any = { 118 const dynamicBindRef: any = {
65 SnmpFormItemRef: ref([]), 119 SnmpFormItemRef: ref([]),
66 }; 120 };
@@ -75,7 +129,7 @@ @@ -75,7 +129,7 @@
75 oid: '', 129 oid: '',
76 }, 130 },
77 ], 131 ],
78 - queryingFrequencyMs: 0, 132 + queryingFrequencyMs: 5000,
79 }, 133 },
80 ], 134 ],
81 }); 135 });
@@ -86,15 +140,6 @@ @@ -86,15 +140,6 @@
86 span: 14, 140 span: 14,
87 }, 141 },
88 }); 142 });
89 - // const selectArray = [  
90 - // 'TELEMETRY_QUERYING',  
91 - // 'CLIENT_ATTRIBUTES_QUERYING',  
92 - // 'SHARED_ATTRIBUTES_SETTING',  
93 - // 'TO_DEVICE_RPC_REQUEST',  
94 - // ];  
95 - const handleSelectItem = (e) => {  
96 - console.log('e', e);  
97 - };  
98 const handleAdd = () => { 143 const handleAdd = () => {
99 dynamicSNMP.communicationConfigs.push({ 144 dynamicSNMP.communicationConfigs.push({
100 spec: '', 145 spec: '',
@@ -105,26 +150,27 @@ @@ -105,26 +150,27 @@
105 oid: '', 150 oid: '',
106 }, 151 },
107 ], 152 ],
108 - queryingFrequencyMs: 0, 153 + queryingFrequencyMs: 5000,
109 }); 154 });
110 }; 155 };
111 - const handleRemoveItem = (_, index) => { 156 + const handleRemoveItem = (item, index) => {
  157 + console.log(item.spec);
  158 + //2 TODO待解决删除时清空互斥问题
112 dynamicSNMP.communicationConfigs.splice(index, 1); 159 dynamicSNMP.communicationConfigs.splice(index, 1);
113 }; 160 };
114 //回显表单值 161 //回显表单值
  162 + //TODO 采用这种方式动态绑定ref 都会造成回显数据顺序是随机的但不影响回显数据的正确性
115 const setStepFieldsValueFunc = (v) => { 163 const setStepFieldsValueFunc = (v) => {
116 setFieldsValue({ 164 setFieldsValue({
117 timeoutMs: v.timeoutMs, 165 timeoutMs: v.timeoutMs,
118 retries: v.retries, 166 retries: v.retries,
119 }); 167 });
120 dynamicSNMP.communicationConfigs = v.communicationConfigs; 168 dynamicSNMP.communicationConfigs = v.communicationConfigs;
121 - dynamicSNMP.communicationConfigs.forEach((snmp: any, index: number) => { 169 + dynamicSNMP.communicationConfigs.forEach((snmp, index: number) => {
122 nextTick(() => { 170 nextTick(() => {
123 - unref(dynamicBindRef.SnmpFormItemRef)[index]?.setFieldsValueFunc(  
124 - snmp?.spec,  
125 - snmp?.queryingFrequencyMs  
126 - );  
127 - unref(dynamicBindRef.SnmpFormItemRef)[index]?.handleMappingsChange(snmp?.mappings); 171 + //编辑回显互斥赋值
  172 + handleChange(snmp.spec);
  173 + unref(dynamicBindRef.SnmpFormItemRef)[index]?.setFieldsValueFunc();
128 }); 174 });
129 }); 175 });
130 }; 176 };