現如今，工業互聯網和5G齊頭并進的時代，可視化系統的搭建可以承載更多數據的監管，設施的完善就會伴隨著設施的監管和維護，監控平臺就能實現更多的事情。對于地，在當今大數據、移動互聯網、物聯網、云計算的高速發展背景下。從宏觀的角度來看，物流作為最低層的基礎設施，既連接生產與消費，又是城市支柱產業與優勢產業的保障。

一座城市的物流倉配模式會直接影響城市的交通負荷狀況，因此，智慧物流日益成為智慧城市建設的得力抓手和有力支撐。而在可視化系統的實現下，智慧倉儲的管理實現將更加地便利，介于 2D 組態和 3D 組態上，Hightopo（以下簡稱 HT ）的HT for Web產品上的有著豐富的組態化可供選擇，本文將介紹如何運用 HT 豐富的 2D組態搭建出一個 HT倉儲轉運監控平臺的解決方案。

HT 倉儲轉運監控平臺上的實現效果，是通過在兩層倉儲場景中可以通過緩動的動畫效果來進行切換，可以達到對于多個倉儲場景起到監控的范圍效果；而在每個倉儲轉運中心里面，對于貨架和攝像頭進行了數據采集，可以通過可視化系統快速獲取設備的運行狀態、貨架的數據變更以及監控視頻的實時反饋，達到全方位掌控倉儲轉運中心的活動狀態，起到監管和維護多維度統一的倉儲轉運監控平臺。

一、樓層的切換

實現樓層切換的動畫，主要是借助 HT 的動畫函數 ht.Default.startAnim()，通過 Time-Based 的動畫方式來控制動畫的進行，只需要指定 duration 的動畫周期毫秒數，HT 將在指定的時間內完成動畫，主要通過在動畫執行函數 action 里控制所要實現的動畫對象里動畫數據的變動，例如案例中，是通過將兩層倉儲放在同一張圖紙里面形成一個塊 block，實現切換動畫的時候將整個 block 進行對應的平移就能達到切換的效果。

單純的平移動畫，顯得會有點生硬突兀，但是 HT 的動畫函數中，easing 參數則是用于讓用戶自定義函數，通過數學公式控制動畫，如勻速變化、先慢后快等效果。而本案例中采用緩動的動畫效果是 easeInOutElastic，一種彈性的緩進緩出的動畫函數效果，可以使得樓層切換的動畫更加地生動。

二、隨機事件的數據處理

貨架和攝像頭的狀態監控，也是對系統維護所必備的一個重要條件。監控平臺的意義不僅是對于數據上采集的捕獲反饋，設備狀態的維護同樣是具有極為重要的意義，現場的人員可以根據監控平臺的反饋，快速地鎖定出問題的設備進行查驗，確保設備之間掛鉤的數據能及時處理反饋給平臺，這是一個良性的循環結構，有著相當可觀的實現價值。

對于卸貨車的出現，我們采用隨機數的方式來顯示和隱藏，而對于卸貨運輸的管道流動的運行，則是采用節點屬性監聽的方式，判斷卸貨車是否存在而執行流動的效果。

而倉儲轉運監控系統中的物流水滴傳輸效果，是運用了 HT 的流動插件 ht-flow 來實現的，流動線插件可以在 ht.Shape 和 ht.Edge 上增加流動效果，支持內部元素或用戶自定義的流動元素沿著路徑步進，而且沒有引入新的類，只是在 ht.Shape、ht.Edge 和 ht.graph.GraphView 上擴展了一些方法或樣式，因此非常易于使用，有興趣的話可以通過 HT 的官網了解更多的使用方法。

對于物流水滴傳輸效果的出現并執行，是通過監聽車輛節點的顯示屬性 2d.visible，并且通過車輛屬性節點顯示隱藏的改變，來判斷對應的物流水滴做出是否執行流動的指令，這也是 HT 中常用的監聽器之一，增加模型中 Data 數據屬性變化事件監聽器 addDataPropertyChangeListener(func, scope)，可用簡寫 md(func, scope)。主要是用來監聽節點 Data 中某個屬性 property 對應的新值 newValue 和舊值 oldValue 的數值改變。有了顯示屬性數值上的變化監聽，物流水滴自然而然地也明白什么時候應該流動起來了。

三、攝像頭監控以及貨箱數據

數據可視化的優勢體現，就是通過借助圖形或者模型來承載數據的變動，起到數據可視化監管的作用，所以說系統中的數據對于整個實現上來說，意義是重大的。在倉儲轉運監控平臺中，可以通過數據采集器來捕獲到每個倉儲貨架上的信息，通過對接數據接口的形式，返回給界面進行展示監管；視頻監控也可以通過常用的流媒體格式或者視頻流資源傳輸到界面中進行播放。不難看出一個數據可視化監控平臺的實現，我們可以將一些枯燥的數據串聯到一個構思可觀的界面上，來進行數據的監控和維護，往往會比傳統的數據報表來得清晰生動，這也是工業互聯網近年來興起的新風潮。

最后，在彈出的面板實現上，我們進行了數據接口對接的形式，來實現數據上的顯示：

1、數據上的接口對接實現：

對于數據接口的獲取，可以運用一些主流的方法：

ajax：使用 JavaScript 向服務器提出請求并處理響應而不阻塞用戶核心對象 XMLHttpRequest；

axios：基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中；

WebSocket：HTML5 提供的一種在單個 TCP 連接上進行全雙工通訊的協議；

2、監控視頻上的對接實現：

對于實景的實現上，我們可以通過對接實時的視頻數據流，現在主要常用的流媒體傳輸協議有：RTMP、RTSP、HLS 和 HTTP-FLV。

RTMP (Real Time Messaging Protocol)：實時消息傳輸協議，RTMP 協議中，視頻必須是 H264 編碼，音頻必須是 AAC 或 MP3 編碼，且多以 flv 格式封包。因為 RTMP 協議傳輸的基本是 FLV 格式的流文件，必須使用 flash 播放器才能播放。

RTSP (Real-Time Stream Protocol)：RTSP 實時效果非常好，適合視頻聊天、視頻監控等方向。

HLS(Http Live Streaming)：由 Apple 公司定義的基于 HTTP 的流媒體實時傳輸協議。傳輸內容包括兩部分：1.M3U8 描述文件，2.TS 媒體文件。TS 媒體文件中的視頻必須是H264編碼，音頻必須是 AAC 或 MP3 編碼。數據通過 HTTP 協議傳輸。目前 video.js 庫支持該格式文件的播放。

HTTP-FLV：本協議就是 http+flv，將音視頻數據封裝成FLV格式，然后通過http協議傳輸到客戶端，這個協議大大方便了瀏覽器客戶端播放直播視頻流.目前 flv.js 庫支持該格式的文件播放。

物流行業作為新零售或無界零售發展的重要組成部分，從傳統的貨品流動發展到如今的智能體系化運營，智慧物流儼然已成為各個企業的必爭之地。數據顯示，智慧物流企業的融資事件在不斷增長，2010-2018年融資事件總計403起，據已公開的具體融資計算，總額高達711.6億元，按照均值計算，每起融資規模均以億元為單位，融資金額達1.7億元。可見智慧物流成為了資本追捧的行業，智慧物流已成為物流行業的下一個風口。

fqj