一種高效靈活可配置的物聯(lián)網(wǎng)平臺設計概述

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

引言

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

1 靈活可配置的數(shù)據(jù)展示

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

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

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

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

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

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

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

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

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

2 高效的元素渲染

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

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

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

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

3 結(jié)束語

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