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

引言

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

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

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

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

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

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

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

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

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

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

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

2 高效的元素渲染

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

虛擬DOM就是為了解決瀏覽器性能問題而被設(shè)計出來的。如前文所述，若一次操作中有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ū)動用于構(gòu)建用戶界面的漸進式框架。有別于傳統(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)平臺設(shè)計。詳細介紹了平臺的功能特點和界面的交互設(shè)計，介紹了平臺的技術(shù)特點，設(shè)計合理行之有效。