简柏林 / thingskit-front · Commits

Commit 84b86771fad1577e825779f0ba6f2542ddc2ce9e

Authored by xp.Huang
2 parents f33a4513 ac6ccef6

Merge branch 'f-dev' into 'main' 

fix：修改地理位置弹窗 修改数据流转属性验证

See merge request huang/yun-teng-iot-front!258
Inline Side-by-side
Showing 8 changed files with 110 additions and 58 deletions
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div class="wrapper"> 2 <div class="wrapper">
3 <div ref="wrapRef" :style="{ height, width }"> </div> 3 <div ref="wrapRef" :style="{ height, width }"> </div>
4 <div class="right-wrap"> 4 <div class="right-wrap">
5 - <BasicTable @register="registerTable" @rowClick="deviceRowClick"> 5 + <BasicTable style="cursor: pointer" @register="registerTable" @rowClick="deviceRowClick">
6 <template #deviceState="{ record }"> 6 <template #deviceState="{ record }">
7 <Tag 7 <Tag
8 :color=" 8 :color="
@@ -230,24 +230,28 @@ @@ -230,24 +230,28 @@
230 const BMap = (window as any).BMap; 230 const BMap = (window as any).BMap;
231 const wrapEl = unref(wrapRef); 231 const wrapEl = unref(wrapRef);
232 const map = new BMap.Map(wrapEl); 232 const map = new BMap.Map(wrapEl);
233 - if (record.deviceInfo.address) {  
234 - keys = await getDeviceDataKeys(entityId);  
235 - const { name, organizationDTO, deviceState, deviceProfile } = record;  
236 - const { longitude, latitude, address } = record.deviceInfo;  
237 - const point = new BMap.Point(longitude, latitude);  
238 - let options = {  
239 - width: 330, // 信息窗口宽度  
240 - height: 0, // 信息窗口高度  
241 - };  
242 - map.centerAndZoom(point, 15);  
243 - map.enableScrollWheelZoom(true);  
244 - // 创建信息窗口对象  
245 - const res = await getDeviceActiveTime(entityId); 233 + // if (record.deviceInfo.address) {
  234 + keys = await getDeviceDataKeys(entityId);
  235 + const { name, organizationDTO, deviceState, deviceProfile } = record;
  236 + const { longitude, latitude, address } = record.deviceInfo;
  237 + //这里如果没有地理位置 最好设置一个默认位置 不然地图会全蓝
  238 + const point = new BMap.Point(
  239 + longitude == '' ? 104.04666605565338 : longitude,
  240 + latitude == '' ? 30.543516387560476 : latitude
  241 + );
  242 + let options = {
  243 + width: 330, // 信息窗口宽度
  244 + height: 0, // 信息窗口高度
  245 + };
  246 + map.centerAndZoom(point, 15);
  247 + map.enableScrollWheelZoom(true);
  248 + // 创建信息窗口对象
  249 + const res = await getDeviceActiveTime(entityId);
246 250
247 - let { value: activeStatus, lastUpdateTs } = res[0];  
248 - lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss');  
249 - let infoWindow = new BMap.InfoWindow(  
250 - ` 251 + let { value: activeStatus, lastUpdateTs } = res[0];
  252 + lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss');
  253 + let infoWindow = new BMap.InfoWindow(
  254 + `
251 <div style="display:flex;justify-content:space-between; margin:20px 0px;"> 255 <div style="display:flex;justify-content:space-between; margin:20px 0px;">
252 <div style="font-size:16px;font-weight:bold">${name}</div> 256 <div style="font-size:16px;font-weight:bold">${name}</div>
253 ${ 257 ${
@@ -261,43 +265,45 @@ @@ -261,43 +265,45 @@
261 </div> 265 </div>
262 <div>所属组织：${organizationDTO.name}</div> 266 <div>所属组织：${organizationDTO.name}</div>
263 <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div> 267 <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
264 - <div style="margin-top:6px;">设备位置：${address}</div> 268 + <div style="margin-top:6px;">设备位置：${
  269 + address == '' ? '该设备暂无地理位置' : address
  270 + }</div>
265 <div style="margin-top:6px;">${activeStatus ? '在' : '离'}线时间：${lastUpdateTs}</div> 271 <div style="margin-top:6px;">${activeStatus ? '在' : '离'}线时间：${lastUpdateTs}</div>
266 <div style="display:flex;justify-content:end; margin-top:10px"> 272 <div style="display:flex;justify-content:end; margin-top:10px">
267 <button onclick="openDeviceInfoDrawer()" style="margin-right:10px;color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button> 273 <button onclick="openDeviceInfoDrawer()" style="margin-right:10px;color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
268 <button onclick="openHistoryModal()" style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button> 274 <button onclick="openHistoryModal()" style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button>
269 </div> 275 </div>
270 `, 276 `,
271 - options  
272 - ); 277 + options
  278 + );
273 279
274 - map.openInfoWindow(infoWindow, map.getCenter());  
275 - let preMarker = null; 280 + map.openInfoWindow(infoWindow, map.getCenter());
  281 + let preMarker = null;
276 282
277 - const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;  
278 - let myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));  
279 - let marker = new BMap.Marker(point, { icon: myIcon });  
280 - if (marker) {  
281 - map.removeOverlay(preMarker);  
282 - }  
283 - map.addOverlay(marker);  
284 - //标注监听事件  
285 - marker.addEventListener('click', function () {  
286 - map.openInfoWindow(infoWindow, map.getCenter());  
287 - });  
288 - //标注监听事件  
289 - } else {  
290 - const point = new BMap.Point(106.63028229687498, 36.06735821600903);  
291 - let options = {  
292 - width: 100, // 信息窗口宽度  
293 - height: 100, // 信息窗口高度  
294 - title: '提示', // 信息窗口标题  
295 - };  
296 - map.centerAndZoom(point, 5);  
297 - map.enableScrollWheelZoom(true);  
298 - let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象  
299 - map.openInfoWindow(infoWindow, map.getCenter()); 283 + const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;
  284 + let myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));
  285 + let marker = new BMap.Marker(point, { icon: myIcon });
  286 + if (marker) {
  287 + map.removeOverlay(preMarker);
300 } 288 }
  289 + map.addOverlay(marker);
  290 + //标注监听事件
  291 + marker.addEventListener('click', function () {
  292 + map.openInfoWindow(infoWindow, map.getCenter());
  293 + });
  294 + //标注监听事件
  295 + // } else {
  296 + // const point = new BMap.Point(106.63028229687498, 36.06735821600903);
  297 + // let options = {
  298 + // width: 100, // 信息窗口宽度
  299 + // height: 100, // 信息窗口高度
  300 + // title: '提示', // 信息窗口标题
  301 + // };
  302 + // map.centerAndZoom(point, 5);
  303 + // map.enableScrollWheelZoom(true);
  304 + // let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象
  305 + // map.openInfoWindow(infoWindow, map.getCenter());
  306 + // }
301 }; 307 };
302 308
303 // 设备信息 309 // 设备信息
@@ -86,6 +86,7 @@ @@ -86,6 +86,7 @@
86 type: '', 86 type: '',
87 configuration: {}, 87 configuration: {},
88 name: '', 88 name: '',
  89 + additionalInfo: {},
89 }); 90 });
90 const editNextType = reactive({ 91 const editNextType = reactive({
91 type: '', 92 type: '',
@@ -97,6 +98,7 @@ @@ -97,6 +98,7 @@
97 editType.type = d.type; 98 editType.type = d.type;
98 editType.configuration = d.configuration; 99 editType.configuration = d.configuration;
99 editType.name = d.name; 100 editType.name = d.name;
  101 + editType.additionalInfo = d.additionalInfo;
100 }; 102 };
101 103
102 const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => { 104 const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
@@ -247,7 +249,6 @@ @@ -247,7 +249,6 @@
247 id, 249 id,
248 additionalInfoV 250 additionalInfoV
249 ); 251 );
250 -  
251 if (!unref(isUpdate)) { 252 if (!unref(isUpdate)) {
252 delete allPostForm.id; 253 delete allPostForm.id;
253 } 254 }
@@ -260,6 +261,17 @@ @@ -260,6 +261,17 @@
260 if (allPostForm.name == undefined) { 261 if (allPostForm.name == undefined) {
261 return createMessage.error('请填写名称'); 262 return createMessage.error('请填写名称');
262 } 263 }
  264 + //验证属性新增了必填
  265 + const isApiHeaders =
  266 + allPostForm?.configuration?.headers ||
  267 + allPostForm?.configuration?.otherProperties ||
  268 + allPostForm?.configuration?.clientProperties;
  269 + if (isApiHeaders && Object.keys(isApiHeaders).includes('')) {
  270 + return createMessage.error('请填写属性');
  271 + }
  272 + if (isApiHeaders && Object.values(isApiHeaders).includes('')) {
  273 + return createMessage.error('请填写属性');
  274 + }
263 await postAddConvertApi(allPostForm); 275 await postAddConvertApi(allPostForm);
264 createMessage.success('数据流转新增成功'); 276 createMessage.success('数据流转新增成功');
265 emit('success'); 277 emit('success');
@@ -267,6 +279,19 @@ @@ -267,6 +279,19 @@
267 closeModal(); 279 closeModal();
268 } else { 280 } else {
269 await addOrEditFunc(); 281 await addOrEditFunc();
  282 + if (!isEdit.value) {
  283 + //验证属性新增了必填
  284 + const isApiHeaders =
  285 + allPostForm?.configuration?.headers ||
  286 + allPostForm?.configuration?.otherProperties ||
  287 + allPostForm?.configuration?.clientProperties;
  288 + if (isApiHeaders && Object.keys(isApiHeaders).includes('')) {
  289 + return createMessage.error('请填写属性');
  290 + }
  291 + if (isApiHeaders && Object.values(isApiHeaders).includes('')) {
  292 + return createMessage.error('请填写属性');
  293 + }
  294 + }
270 await postAddConvertApi(isEdit.value ? noEditObj : allPostForm); 295 await postAddConvertApi(isEdit.value ? noEditObj : allPostForm);
271 createMessage.success('数据流转编辑成功'); 296 createMessage.success('数据流转编辑成功');
272 emit('success'); 297 emit('success');
@@ -269,7 +269,6 @@ export const modeMqttForm: FormSchema[] = [ @@ -269,7 +269,6 @@ export const modeMqttForm: FormSchema[] = [
269 field: 'name', 269 field: 'name',
270 label: '名称', 270 label: '名称',
271 colProps: { span: 12 }, 271 colProps: { span: 12 },
272 - required: true,  
273 component: 'Input', 272 component: 'Input',
274 componentProps: { 273 componentProps: {
275 maxLength: 255, 274 maxLength: 255,
@@ -293,7 +292,6 @@ export const modeMqttForm: FormSchema[] = [ @@ -293,7 +292,6 @@ export const modeMqttForm: FormSchema[] = [
293 label: 'Host', 292 label: 'Host',
294 colProps: { span: 12 }, 293 colProps: { span: 12 },
295 component: 'Input', 294 component: 'Input',
296 - required: true,  
297 componentProps: { 295 componentProps: {
298 maxLength: 255, 296 maxLength: 255,
299 placeholder: '请输入Host', 297 placeholder: '请输入Host',
@@ -644,7 +642,7 @@ export const modeRabbitMqForm: FormSchema[] = [ @@ -644,7 +642,7 @@ export const modeRabbitMqForm: FormSchema[] = [
644 field: 'description', 642 field: 'description',
645 label: '说明', 643 label: '说明',
646 colProps: { span: 12 }, 644 colProps: { span: 12 },
647 - component: 'Input', 645 + component: 'InputTextArea',
648 componentProps: { 646 componentProps: {
649 maxLength: 255, 647 maxLength: 255,
650 placeholder: '请输入说明', 648 placeholder: '请输入说明',
@@ -142,10 +142,11 @@ @@ -142,10 +142,11 @@
142 submitFunc: customSubmitFunc, 142 submitFunc: customSubmitFunc,
143 }); 143 });
144 144
145 - const setStepTwoFieldsValueFunc = (v, v1) => { 145 + const setStepTwoFieldsValueFunc = (v, v1, v2) => {
146 setFieldsValue(v); 146 setFieldsValue(v);
147 setFieldsValue({ 147 setFieldsValue({
148 name: v1, 148 name: v1,
  149 + description: v2,
149 }); 150 });
150 setFieldsValue({ 151 setFieldsValue({
151 password: v.credentials?.password, 152 password: v.credentials?.password,
@@ -232,14 +233,17 @@ @@ -232,14 +233,17 @@
232 fileList1.value = []; 233 fileList1.value = [];
233 showImg1.value = false; 234 showImg1.value = false;
234 showImg1Pic.value = ''; 235 showImg1Pic.value = '';
  236 + caCertFileName.value = '';
235 } else if (e == 'F') { 237 } else if (e == 'F') {
236 fileList2.value = []; 238 fileList2.value = [];
237 showImg2.value = false; 239 showImg2.value = false;
238 showImg2Pic.value = ''; 240 showImg2Pic.value = '';
  241 + certFileName.value = '';
239 } else { 242 } else {
240 fileList3.value = []; 243 fileList3.value = [];
241 showImg3.value = false; 244 showImg3.value = false;
242 showImg3Pic.value = ''; 245 showImg3Pic.value = '';
  246 + privateKeyFileName.value = '';
243 } 247 }
244 } else { 248 } else {
245 const isLt5M = file.size / 1024 / 1024 < 5; 249 const isLt5M = file.size / 1024 / 1024 < 5;
@@ -42,12 +42,13 @@ @@ -42,12 +42,13 @@
42 await clearValidate(['name']); 42 await clearValidate(['name']);
43 }; 43 };
44 44
45 - const setStepTwoFieldsValueFunc = async (v, v1) => { 45 + const setStepTwoFieldsValueFunc = async (v, v1, v2) => {
46 clearName.value = v1; 46 clearName.value = v1;
47 setFieldsValue(v); 47 setFieldsValue(v);
48 vType.value = v1; 48 vType.value = v1;
49 setFieldsValue({ 49 setFieldsValue({
50 name: v1, 50 name: v1,
  51 + description: v2,
51 }); 52 });
52 }; 53 };
53 54
@@ -160,14 +160,17 @@ @@ -160,14 +160,17 @@
160 fileList1.value = []; 160 fileList1.value = [];
161 showImg1.value = false; 161 showImg1.value = false;
162 showImg1Pic.value = ''; 162 showImg1Pic.value = '';
  163 + caCertFileName.value = '';
163 } else if (e == 'F') { 164 } else if (e == 'F') {
164 fileList2.value = []; 165 fileList2.value = [];
165 showImg2.value = false; 166 showImg2.value = false;
166 showImg2Pic.value = ''; 167 showImg2Pic.value = '';
  168 + certFileName.value = '';
167 } else { 169 } else {
168 fileList3.value = []; 170 fileList3.value = [];
169 showImg3.value = false; 171 showImg3.value = false;
170 showImg3Pic.value = ''; 172 showImg3Pic.value = '';
  173 + privateKeyFileName.value = '';
171 } 174 }
172 } else { 175 } else {
173 const isLt5M = file.size / 1024 / 1024 < 5; 176 const isLt5M = file.size / 1024 / 1024 < 5;
@@ -230,10 +233,11 @@ @@ -230,10 +233,11 @@
230 } 233 }
231 } 234 }
232 }; 235 };
233 - const setStepTwoFieldsValueFunc = (v, v1) => { 236 + const setStepTwoFieldsValueFunc = (v, v1, v2) => {
234 setFieldsValue(v); 237 setFieldsValue(v);
235 setFieldsValue({ 238 setFieldsValue({
236 name: v1, 239 name: v1,
  240 + description: v2,
237 }); 241 });
238 setFieldsValue({ 242 setFieldsValue({
239 password: v.credentials?.password, 243 password: v.credentials?.password,
@@ -32,10 +32,11 @@ @@ -32,10 +32,11 @@
32 submitFunc: customSubmitFunc, 32 submitFunc: customSubmitFunc,
33 }); 33 });
34 34
35 - const setStepTwoFieldsValueFunc = (v, v1) => { 35 + const setStepTwoFieldsValueFunc = (v, v1, v2) => {
36 setFieldsValue(v); 36 setFieldsValue(v);
37 setFieldsValue({ 37 setFieldsValue({
38 name: v1, 38 name: v1,
  39 + description: v2,
39 }); 40 });
40 }; 41 };
41 const customClearStepTwoValueFunc = async () => { 42 const customClearStepTwoValueFunc = async () => {
@@ -95,19 +95,32 @@ @@ -95,19 +95,32 @@
95 try { 95 try {
96 if (v.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') { 96 if (v.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
97 isWhereComp.value = v.type; 97 isWhereComp.value = v.type;
98 - proxy.$refs.refTransferConfigKafka.setStepTwoFieldsValueFunc(v.configuration, v.name); 98 + proxy.$refs.refTransferConfigKafka.setStepTwoFieldsValueFunc(
  99 + v.configuration,
  100 + v.name,
  101 + v?.additionalInfo?.description
  102 + );
99 } else if (v.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode') { 103 } else if (v.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode') {
100 isWhereComp.value = v.type; 104 isWhereComp.value = v.type;
101 - proxy.$refs.refTransferConfigMqtt.setStepTwoFieldsValueFunc(v.configuration, v.name); 105 + proxy.$refs.refTransferConfigMqtt.setStepTwoFieldsValueFunc(
  106 + v.configuration,
  107 + v.name,
  108 + v?.additionalInfo?.description
  109 + );
102 } else if (v.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') { 110 } else if (v.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') {
103 isWhereComp.value = v.type; 111 isWhereComp.value = v.type;
104 proxy.$refs.refTransferConfigRabbitMq.setStepTwoFieldsValueFunc( 112 proxy.$refs.refTransferConfigRabbitMq.setStepTwoFieldsValueFunc(
105 v.configuration, 113 v.configuration,
106 - v.name 114 + v.name,
  115 + v?.additionalInfo?.description
107 ); 116 );
108 } else if (v.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode') { 117 } else if (v.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode') {
109 isWhereComp.value = v.type; 118 isWhereComp.value = v.type;
110 - proxy.$refs.refTransferConfigApi.setStepTwoFieldsValueFunc(v.configuration, v.name); 119 + proxy.$refs.refTransferConfigApi.setStepTwoFieldsValueFunc(
  120 + v.configuration,
  121 + v.name,
  122 + v?.additionalInfo?.description
  123 + );
111 } 124 }
112 } catch (e) { 125 } catch (e) {
113 return e; 126 return e;