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

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

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

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

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

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

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

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

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

2.1 展示模塊

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

圖1：平臺(tái)整體框架圖

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

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

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

2.2 接口模塊

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

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

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

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

2.4 存儲(chǔ)模塊

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

2.5 通信模塊

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

3 客戶端設(shè)計(jì)

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

用戶在客戶端界面從右往左滑動(dòng)可切換到下一個(gè)頁(yè)面，從左往右滑可切換到上一個(gè)界面。通過(guò)在客戶端后臺(tái)維護(hù)一個(gè)計(jì)數(shù)器count，對(duì)該計(jì)數(shù)器進(jìn)行加減及奇偶判斷，完成頁(yè)面的切換。

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

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

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

4 頁(yè)面展示

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

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

5 結(jié)束語(yǔ)

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