基于 HTML5 的工業互聯網云平臺監控機房 U 位

機柜 U 位管理是一項突破性創新技術--繼承了 RFID 標簽（電子標簽）的優點的同時，完全解決了 RFID 技術（非接觸式的自動識別技術）在機房 U 位資產監控場應用景中的四大缺陷，采用工業互聯網云平臺監控機房 U 位的方法，具有高可靠性、高準確性、精準定位、免維護的特點，滿足了 U 位級實時監控、智能運維閉環管理的需求。設備上架、下架與遷移，自動變更和實時記錄，（用戶評價）：部署工業互聯網云平臺監控機房 U 位后節省了 99% 的登記變更記錄的時間，而且實現了變更后數據 100% 的準確，在這之前是難以想象的，真正實現運維管理最后的工作。

整個 Demo 由最左側的樹，中間部分的列表以及右邊的拓撲圖整體構成，為了讓整個布局干凈一點，這里結合 splitView 和 borderPane 兩種布局方式來進行。首先將場景分為左右兩個部分，左邊為樹，右邊是列表和拓撲圖的組合：

布局結束記得將最外層組件的最底層 div 添加到 body 中，HT 的組件一般都會嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外層的HT組件則需要用戶手工將 getView() 返回的底層 div 元素添加到頁面的 DOM 元素中，這里需要注意的是，當父容器大小變化時，如果父容器是 BorderPane 和 SplitView 等這些HT預定義的容器組件，則HT的容器會自動遞歸調用孩子組件 invalidate 函數通知更新。但如果父容器是原生的 html 元素， 則 HT 組件無法獲知需要更新，因此最外層的 HT 組件一般需要監聽 window 的窗口大小變化事件，調用最外層組件 invalidate 函數進行更新。為了最外層組件加載填充滿窗口的方便性，HT 的所有組件都有 addToDOM 函數，其實現邏輯如下，其中 iv 是 invalidate 的簡寫：

右邊的拓撲圖部分是在監聽選中變化事件的時候更新的，當然，初始化設置的選中樹上的第一個節點就觸發了選中變化事件：

上面代碼中 splitView.setRightView 函數意為設置右側組件，有了這個函數，我就可以動態地改變 spliteView 組件中的右側組件了。

來源：機房監控 http://m.scdprobes.com/   本文采集于網絡，如有問題有聯系刪除