当前位置：首页 > news >正文

Debug-031-近期功能实现小结

news 2025/7/8 0:20:41

由于时间原因，没办法对每个小的功能点进行比较细致的总结，这里统一去记录一下最近的实现了的功能，算是存档备份，为今后开发带来便利和参考。

一、ACEeditor

ACEeditor使用手册（一）_ace editor-CSDN博客

ACEeditor使用手册（二）_ace editor-CSDN博客

业务：主要是实现不同语言的编辑功能。我们业务和阿里云中的物联网平台相近，因此参考他们，使用了相同的ACEeditor。由于我们是使用vue3开发的前端代码，我参考使用了vue3-ace-editor，个人感觉就是在ACEeditor基础上又封装了一层，在项目中使用的是vue3-ace-editor，但是'ace-builds'还是必须要引入的。如果再来一次，我想我应该会直接使用ACEeditor，不引入vue3-ace-editor会更好一些吧。

这里在当时写代码的时候还是碰见不少问题的，Python校验的问题，编辑器实例上的方法，捕获错误等等。

之后项目中有需要代码编辑的地方，还是优先使用ACEeditor。

这里分享一些链接作为参考：

使用 Vue3-Ace-Editor 在 Vue3 项目中集成代码编辑器-CSDN博客

Ace editor中文文档 - 余以为 - 博客园

二、Emmet语法总结

这个还是挺有意思的，前端的html和css是有简写方式的，我在vscode中实际测试了一下，如果熟练了之后确实很方便，还挺酷的。以前也这么写过，但是没有意识去特意留意这一块。理解之后，在之后的开发中可以留意着去按这种方式去写一下标签和样式。

Emmet语法总结-CSDN博客

Emmet 总结(这真是一个省事的好工具)_emmet工具-CSDN博客

前端开发必备！Emmet使用手册 - 前端开发者学堂 (fedev.cn) - 前端开发社区

Cheat Sheet

三、Modbus RTU报文解析

这个是比较接近业务层面的东西。最近实现了IoT平台的一个新的模块的功能-数据解析。简单讲是两个函数之间的转换，protocolToRawData和rawDataToProtocol，分别表示设备接收和设备上报两种情况。前者是将对象转为报文格式数据下发给设备，后者是设备上报需要将报文转换为对象格式。双方定好Modbus 协议，我们需要做的就是按照协议去下发和上报数据，按照协议去解析即可。

这里还涉及到一些别的东西：

Uint8Array、十进制与16进制转换、遍历对象、CRC-16 (Modbus)校验

四、find

.vue文件中，tsx写法

const detail = row.detail || {}这一步很关键，因为如果是直接在render中的<el-tooltip>标签中的content里写成row.detail.topic是不生效的（是语法吗？我也不知道目前）

<script lang="tsx" setup>const TABLE_COLUMNS = [{label: '操作时间',prop: 'operateTime',
}, {label: 'Trace ID',prop: 'traceId',
}, {label: 'Message ID',prop: 'messageId',// formatter: (row: any) => {//   return DEVICE_TYPE.find(item => item.value === row.deviceType)?.label// },
}, {label: 'Device ID',prop: 'deviceName',
}, {label: '业务类型',prop: 'businessType',
}, {label: '操作',prop: 'operation',
}, {label: '内容',prop: 'detail',width: '300',render: (row: any) => {const detail = row.detail || {}return (<><div class="ipBrowser"><el-tooltipeffect="light"show-after={500}class="item"raw-contentcontent={`<form class='tooltip-content'><div><label for='q'>Topic：</label><span>${detail.topic}<span/></div><div><label for='w'>发生时间：</label><span>${detail.time}<span/></div><div><label for='e'>消息：</label><span>${detail.message}<span/></div></form>`}trigger="click"placement="left"><span class="ipButton" onClick={handleClickBrowser} >查看</span></el-tooltip></div></>)},
}, {label: '状态',prop: 'statusCode',aliyunLink: 'https://jybfgs.oss-cn-hangzhou.aliyuncs.com/resource/iot/Error_Code.pdf', // 跳转阿里云规则链接// formatter: (row: any) => {//   return RUNTIME.find(item => item.value === row.runtimeEnv)?.label// },
}]</script>