????????由于時間原因，沒辦法對每個小的功能點進行比較細致的總結(jié)，這里統(tǒng)一去記錄一下最近的實現(xiàn)了的功能，算是存檔備份，為今后開發(fā)帶來便利和參考。

一、ACEeditor

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

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

業(yè)務(wù)：主要是實現(xiàn)不同語言的編輯功能。我們業(yè)務(wù)和阿里云中的物聯(lián)網(wǎng)平臺相近，因此參考他們，使用了相同的ACEeditor。由于我們是使用vue3開發(fā)的前端代碼，我參考使用了vue3-ace-editor，個人感覺就是在ACEeditor基礎(chǔ)上又封裝了一層，在項目中使用的是vue3-ace-editor，但是'ace-builds'還是必須要引入的。如果再來一次，我想我應(yīng)該會直接使用ACEeditor，不引入vue3-ace-editor會更好一些吧。

這里在當(dāng)時寫代碼的時候還是碰見不少問題的，Python校驗的問題，編輯器實例上的方法，捕獲錯誤等等。

之后項目中有需要代碼編輯的地方，還是優(yōu)先使用ACEeditor。

這里分享一些鏈接作為參考：

使用 Vue3-Ace-Editor 在 Vue3 項目中集成代碼編輯器-CSDN博客

Ace editor中文文檔 - 余以為 - 博客園

二、Emmet語法總結(jié)

? ? ? ? 這個還是挺有意思的，前端的html和css是有簡寫方式的，我在vscode中實際測試了一下，如果熟練了之后確實很方便，還挺酷的。以前也這么寫過，但是沒有意識去特意留意這一塊。理解之后，在之后的開發(fā)中可以留意著去按這種方式去寫一下標(biāo)簽和樣式。

Emmet語法總結(jié)-CSDN博客

Emmet 總結(jié)(這真是一個省事的好工具)_emmet工具-CSDN博客

前端開發(fā)必備！Emmet使用手冊 - 前端開發(fā)者學(xué)堂 (fedev.cn) - 前端開發(fā)社區(qū)

Cheat Sheet

三、Modbus RTU報文解析

? ? ? ? 這個是比較接近業(yè)務(wù)層面的東西。最近實現(xiàn)了IoT平臺的一個新的模塊的功能-數(shù)據(jù)解析。簡單講是兩個函數(shù)之間的轉(zhuǎn)換，protocolToRawData和rawDataToProtocol，分別表示設(shè)備接收和設(shè)備上報兩種情況。前者是將對象轉(zhuǎn)為報文格式數(shù)據(jù)下發(fā)給設(shè)備，后者是設(shè)備上報需要將報文轉(zhuǎn)換為對象格式。雙方定好Modbus 協(xié)議，我們需要做的就是按照協(xié)議去下發(fā)和上報數(shù)據(jù)，按照協(xié)議去解析即可。

這里還涉及到一些別的東西：

Uint8Array、十進制與16進制轉(zhuǎn)換、遍歷對象、CRC-16 (Modbus)校驗

四、find

.vue文件中，tsx寫法

const detail = row.detail || {}這一步很關(guān)鍵，因為如果是直接在render中的<el-tooltip>標(biāo)簽中的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: '業(yè)務(wù)類型',prop: 'businessType',
}, {label: '操作',prop: 'operation',
}, {label: '內(nèi)容',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'>發(fā)生時間：</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: '狀態(tài)',prop: 'statusCode',aliyunLink: 'https://jybfgs.oss-cn-hangzhou.aliyuncs.com/resource/iot/Error_Code.pdf', // 跳轉(zhuǎn)阿里云規(guī)則鏈接// formatter: (row: any) => {//   return RUNTIME.find(item => item.value === row.runtimeEnv)?.label// },
}]</script>