一種高效靈活可配置的物聯網平臺設計概述

中國煤炭地質總局航測遙感局 陜西 西安 710199

引言

在各個省份物聯網政策的不斷發布的背景下，北京、上海、廣東、浙江等省市也不斷制定物聯網相關的政策與規劃以促進地區物聯網的發展[1]。在物聯網行業的蓬勃使得多個行業與物聯網的關系更加的緊密。目前以華為、阿里為代表的互聯網企業都在積極加入物聯網市場，各大廠商的云平臺都提供了方便快捷的設備接入管理服務。

1 靈活可配置的數據展示

平臺將設備重新進行統一定義，將設備抽象為一種通用的設備類型描述，設備類型包含設備屬性、設備事件和設備指令。設備屬性定義了設備的功能特點，比如，檢測空氣質量的傳感器的設備屬性可以定義空氣的二氧化硫濃度、PM2.5指數等各種空氣污染指標；設備事件為設備發送的指令類型，如，設備定時發送的傳感器上報事件，定位終端定時上報的地理位置信息等；設備指令為平臺向設備發送指令，如，發送ping命令來判斷設備是否在線。

設備屬性可以制定屬性的數據類型，可通過下拉框的方式選擇字符串、整型、浮點型、日期型等類型。

在為平臺添加設備時會需要讓用戶填寫設備的名稱、標識符、描述、設備類型、元數據，設備類型就是用戶創建的抽象設備，元數據是設備的一些基礎信息，用戶可以任意填寫，如，設備的制造商、設備的報廢期限、設備的資產歸屬等。

當設備添加完成后，在設備管理界面能夠以數據表格的方式展示出當前用戶添加的設備，數據表格展示了設備的名稱、設備類型、設備狀態、創建時間。點擊數據表格的“設備名稱”時，頁面會路由到設備的詳情頁面，如下圖所示。

設備的詳情頁面分為上下兩部分，上部分采用可折疊面板組件展示設備的基本信息和元數據，展開其中一個面板時另一個面板會收起，提高了頁面空間利用率。下部分采用頁簽組件展示設備的運行狀態、數據管理和服務調用。

運行狀態為當前設備的設備類型配置的設備屬性，通過卡片的方式直觀展示了當前設備屬性的實時數據，在頁面通過輪詢后臺接口獲取設備屬性的最新數據并渲染。數據管理為設備發送的數據記錄，采用數據表格的方式展示，可以使用時間類型和發送時間的維度來查詢歷史數據。服務調用記錄了平臺主動向設備發送的指令記錄，通過數據表格的方式展示。

每當設備類型需要顯示的屬性發生了變化，所有設備類型相關的設備均會一同做出相應調整。

設備分組功能提供了多個管理設備的維度，將設備按照功能、生產廠商、資產歸屬等維度進行劃分，讓用戶可以方便快捷的從各個角度管理設備。設備分組可以創建子分組，即使設備分布在不同的分組中用戶依然能夠及時了解設備狀態。

平臺還為設備的數據展示提供了大屏數據展示功能，將設備位置分布、設備的在線比例、設備的指令信息吞吐量、設備分組等信息直接展示在頁面上，使系統管理員能直觀地了解到設備的位置分布和運行狀態。

2 高效的元素渲染

用我們傳統的開發模式，原生JS或jQuery操作DOM時，瀏覽器會從構建DOM樹開始從頭到尾執行一遍流程。在一次操作中，如果需要更新10個DOM節點，瀏覽器收到第一個DOM請求后并不知道還有9次更新操作，因此會馬上執行流程，最終執行10次。例如，第一次計算完，緊接著下一個DOM更新請求，這個節點的坐標值就變了，前一次計算為無用功。計算DOM節點坐標值等都是白白浪費的性能。即使計算機硬件一直在迭代更新，操作DOM的代價仍舊是昂貴的，頻繁操作還是會出現頁面卡頓，影響用戶體驗。

虛擬DOM就是為了解決瀏覽器性能問題而被設計出來的。如前文所述，若一次操作中有10次更新DOM的動作，虛擬DOM不會立即操作DOM，而是將這10次更新的diff內容保存到本地一個JS對象中，最終將這個JS對象一次性附加到DOM樹上，再進行后續操作，避免大量無謂的計算量。所以，用JS對象模擬DOM節點的好處是，頁面的更新可以先全部反映在JS對象(虛擬DOM)上，操作內存中的JS對象的速度顯然要更快，等更新完成后，再將最終的JS對象映射成真實的DOM，交由瀏覽器去繪制。

平臺采用前后端分離的開發方式，前端框架采用VUE[2]，VUE是一種數據驅動用于構建用戶界面的漸進式框架。有別于傳統操作頁面DOM的方式來渲染數據，由于將數據和視圖的雙向綁定只要數據發生了改變，頁面元素也就直接發生改變。

平臺采用基于es6的Promise的異步編程，所有接口都采用并行方式請求。在過去，很多使用jQuery的頁面在異步調用接口請求都是一個接口等另一個接口，一個接口在另一個接口的回調中出發這樣引起的“無限嵌套”情況。

3 結束語

本文提出了一種靈活可配置的高效物聯網平臺設計。詳細介紹了平臺的功能特點和界面的交互設計，介紹了平臺的技術特點，設計合理行之有效。