一種交互式工業(yè)互聯(lián)網(wǎng)設(shè)備可視化平臺設(shè)計

常興治 龍霄漢 高亮 劉威 王瑤

（常州信息職業(yè)技術(shù)學(xué)院軟件與大數(shù)據(jù)學(xué)院 江蘇省常州市 213164）

隨著中國制造2025 和工業(yè)4.0 的提出，我國工業(yè)生產(chǎn)正從傳統(tǒng)制造轉(zhuǎn)向工業(yè)互聯(lián)網(wǎng)時代，工業(yè)生產(chǎn)的各類數(shù)據(jù)從紙質(zhì)記錄到電子數(shù)據(jù)管理已成為必然[1]。這些工業(yè)數(shù)據(jù)具有種類多，數(shù)量龐大，實時更新以及增長快等特點[2]。如何管理好、利用好這些海量數(shù)據(jù)，是研究的難點和熱點問題。

目前，很多廠商都發(fā)開了一體化工業(yè)設(shè)備可視化平臺，用于管理、展示、分析海量的工業(yè)數(shù)據(jù)[3]。但是，這些可視化平臺大多只有靜態(tài)展示功能，或以循環(huán)播放的方式將數(shù)據(jù)投放到大屏上，用戶無法與平臺進行交互，無法對頁面進行操作，不能讓用戶全身心投入到數(shù)據(jù)中，去獲得更好的體驗。

為解決以上問題，本文設(shè)計了一種交互式工業(yè)互聯(lián)網(wǎng)設(shè)備可視化平臺。

1 系統(tǒng)架構(gòu)

如圖1 所示，交互式工業(yè)互聯(lián)網(wǎng)設(shè)備可視化平臺整體框架圖，分為服務(wù)端和客戶端。服務(wù)端自下而上分為通信模塊、存儲模塊、業(yè)務(wù)模塊、接口模塊、展示模塊。其中，通信模塊用于與客戶端進行通信；存儲模塊使用MySQL 存儲可視化平臺服務(wù)端數(shù)據(jù)，包括工業(yè)互聯(lián)網(wǎng)設(shè)備所采集的數(shù)據(jù)、設(shè)備日志數(shù)據(jù)等內(nèi)容。接口模塊使用Restful API 技術(shù)，將業(yè)務(wù)模塊所提供的功能封裝為Restful 接口。展示模塊通過HTML、JavaScript、SCC 展示服務(wù)端頁面內(nèi)容，實際的頁面解析由瀏覽器完成。

客戶端與服務(wù)端之間通過WebSocket 通信，客戶端自上而下分為通信模塊、業(yè)務(wù)模塊、展示模塊，其中通信模塊使用WebSocket協(xié)議，用于與服務(wù)端進行通信，業(yè)務(wù)模塊用于客戶端業(yè)務(wù)的處理，展示模塊用于繪制客戶端頁面、捕獲用戶行為。

2 服務(wù)端設(shè)計

2.1 展示模塊

對于服務(wù)端，用戶可通過瀏覽器查看服務(wù)端所提供的展示網(wǎng)頁，在平臺部署時，一般將服務(wù)端網(wǎng)頁通過大屏展示。如果在多個頁面中打開了網(wǎng)頁，每個網(wǎng)頁會生成自己的唯一的標識，服務(wù)端通過該標識生成二維碼，二維碼與瀏覽器頁面之間一一對應(yīng)，用戶掃描二維碼，即可通過客戶端操作對應(yīng)的瀏覽器頁面。服務(wù)端所要展示的頁面包括設(shè)備總覽頁面、設(shè)備工作詳情頁面、數(shù)據(jù)分析頁面。其中設(shè)備總覽頁面包括當前設(shè)備總臺數(shù)、當前工作設(shè)備數(shù)、當前報警設(shè)備數(shù)等信息，在設(shè)備總覽頁面，軟件繪制了廠房地圖并在地圖上按照設(shè)備的位置和狀態(tài)繪制了設(shè)備示意圖；設(shè)備工作詳情頁面展示了當日所有設(shè)備在每個時刻的運行狀態(tài)；數(shù)據(jù)分析頁面展示了設(shè)備開機率趨勢圖、設(shè)備狀態(tài)分布統(tǒng)計、設(shè)備工作時長穩(wěn)定性統(tǒng)計等內(nèi)容。每個界面中都會顯示和更新二維碼，用戶使用手機掃描該二維碼可進入客戶端界面，在客戶端對服務(wù)端頁面進行操作。

圖1：平臺整體框架圖

圖2：服務(wù)端展示模塊頁面信息

服務(wù)端展示模塊所繪制的頁面信息如圖2 所示。軟件頁面同時只展示一個頁面，用戶可通過客戶端切換所展示的頁面。

客戶端展示模塊用于展示客戶端界面，用戶使用手機掃描瀏覽器界面中服務(wù)端頁面所提供的二維碼可進入客戶端界面，客戶端同樣是一個網(wǎng)頁，該頁面同步展示了對應(yīng)的瀏覽器界面，用戶可通過該界面操作對應(yīng)的瀏覽器界面。

2.2 接口模塊

圖3：設(shè)備總覽界面

接口模塊使用Restful API 為前端提供了操作業(yè)務(wù)邏輯的接口，在Restful API 中，每一個URI 代表一種資源，客戶端和服務(wù)器之間，傳遞這種資源的某種表現(xiàn)層，客戶端通過四個HTTP 動詞（GET 用于獲取資源、POST 用于新建資源、PUT 用于更新資源、DELETE用于刪除資源），對服務(wù)器端資源進行操作，實現(xiàn)“表現(xiàn)層狀態(tài)轉(zhuǎn)化”。

2.3 業(yè)務(wù)模塊

業(yè)務(wù)模塊負責(zé)處理與業(yè)務(wù)相關(guān)的內(nèi)容，其中包含了本軟件的業(yè)務(wù)相關(guān)的算法和數(shù)據(jù)結(jié)構(gòu)。業(yè)務(wù)模塊接收來自接口模塊的請求，根據(jù)請求執(zhí)行對應(yīng)業(yè)務(wù)邏輯，并讀寫數(shù)據(jù)庫，處理完成后將處理結(jié)果返回到接口模塊，再由接口模塊返回到展示模塊。

2.4 存儲模塊

存儲層用于持久化保存本軟件的數(shù)據(jù)，使用MySQL、Redis、OSS 進行數(shù)據(jù)的持久化保存。為提高數(shù)據(jù)存儲的性能和高可用性，降低數(shù)據(jù)存儲的成本，使用公有云廠商提供的MySQL 服務(wù)、Redis服務(wù)、OSS 服務(wù)。MySQL 中保存一般業(yè)務(wù)數(shù)據(jù)，如設(shè)備數(shù)據(jù)等內(nèi)容；Redis 中存儲緩存數(shù)據(jù)，如臨時數(shù)據(jù)、熱數(shù)據(jù)、計算結(jié)果等；OSS中存儲了軟件的資源信息，如圖片等內(nèi)容。

2.5 通信模塊

服務(wù)端和客戶端中都有通信模塊，通信模塊的功能是進行通信，客戶端基于WebSocket 協(xié)議與服務(wù)端進行通信。服務(wù)端也可以通過通信模塊與瀏覽器所打開的服務(wù)端頁面進行通信。

3 客戶端設(shè)計

服務(wù)端主要有三個頁面，設(shè)備總覽頁面、設(shè)備工作詳情頁面、數(shù)據(jù)分析頁面。用戶在客戶端界面的操作包括頁面切換、外擴縮放、設(shè)備查看等。

用戶在客戶端界面從右往左滑動可切換到下一個頁面，從左往右滑可切換到上一個界面。通過在客戶端后臺維護一個計數(shù)器count，對該計數(shù)器進行加減及奇偶判斷，完成頁面的切換。

為判斷用戶滑動方向是從左往右還是從右往左，需要對手指觸摸屏幕的位置信息進行計算。當用戶進行單指操作的時候，會觸發(fā)函數(shù)touchstart，而當用戶單指滑動后離開屏幕，會觸發(fā)函數(shù)touchend，在這兩個函數(shù)中，通過touch= event.originalEvent.changedTouches[0]可獲得第一個手指的觸摸信息（在單指觸摸中，即手指信息）并保存在touch 變量中，通過touch.pageX 和touch.pageY 即可獲得觸摸位置的坐標信息（對于touchstart 函數(shù)，是用戶按下手指時的坐標，對于touchend 函數(shù)，是用戶手指離開屏幕時的坐標）。如此，可獲取單指滑動的起始點坐標（假設(shè)為(x1,y1)）和結(jié)束點坐標（假設(shè)為(x1,y1)），則當前方向direction 的值的計算式為：

如果結(jié)束點橫坐標值大于起始點橫坐標值，表示從左往右滑動，如果結(jié)束點橫坐標值小于起始點橫坐標值，表示從右往左滑動。另外，限定用戶只能水平滑動，如果起始點和結(jié)束點的縱坐標值相差過多（大于ythreshold，ythreshold是一個閾值，測試階段，取50），則不認為用戶是左右滑動。

類似的，當用戶進行多指操作，當用戶雙指觸摸屏幕，會觸發(fā)函數(shù)touchstart，當用戶雙指滑動后離開屏幕，觸發(fā)函數(shù)touchend。在這兩個函數(shù)中，可分別根據(jù)手指的觸摸信息獲取兩指位置信息，進而計算出兩指間的距離。如果起始狀態(tài)兩個手指之間的距離小于結(jié)束狀態(tài)兩個手指間的距離，則軟件認為用戶動作為內(nèi)縮，反之則為外擴。

4 頁面展示

為保護企業(yè)生產(chǎn)數(shù)據(jù)，服務(wù)端部署于工廠內(nèi)部私有云上，展示頁面訪問在局域網(wǎng)中進行?？蛻舳藘H需用戶通過手機掃描展示平臺上的二維碼即可實時訪問。后臺會根據(jù)用戶在手機屏幕上的操作，完成頁面的切換、外擴、內(nèi)縮等等。

如圖3 所示，設(shè)備總覽界面，展示了設(shè)備總臺數(shù)信息、當前處于工作、待機、停機、離線、報警的設(shè)備的數(shù)量信息。通過點擊各個設(shè)備，可查看各個設(shè)備的具體狀態(tài)信息。

5 結(jié)束語

本文設(shè)計的交互式互聯(lián)網(wǎng)設(shè)備可視化平臺，通過客戶端使得用戶僅需一臺手機即可隨心所欲地訪問自己感興趣的頁面。相比于傳統(tǒng)靜態(tài)的、用戶不可控的展示頁面，該交互式互聯(lián)網(wǎng)設(shè)備可視化平臺能跟隨用戶思路，并為其提供相應(yīng)數(shù)據(jù)。通過對服務(wù)端頁面的更改，為各個頁面添加唯一二維碼，并對客戶端操作進行設(shè)計，實現(xiàn)了交互式的平臺。最后，經(jīng)過部署測試，該平臺能夠為客戶提供可交互的設(shè)備可視化平臺，對未來數(shù)據(jù)展示方式的改革具有一定參考價值。