基于 HTML5 的工業(yè)互聯(lián)網(wǎng)云平臺(tái)監(jiān)控機(jī)房 U 位

機(jī)柜 U 位管理是一項(xiàng)突破性創(chuàng)新技術(shù)--繼承了 RFID 標(biāo)簽（電子標(biāo)簽）的優(yōu)點(diǎn)的同時(shí)，完全解決了 RFID 技術(shù)（非接觸式的自動(dòng)識(shí)別技術(shù)）在機(jī)房 U 位資產(chǎn)監(jiān)控場(chǎng)應(yīng)用景中的四大缺陷，采用工業(yè)互聯(lián)網(wǎng)云平臺(tái)監(jiān)控機(jī)房 U 位的方法，具有高可靠性、高準(zhǔn)確性、精準(zhǔn)定位、免維護(hù)的特點(diǎn)，滿足了 U 位級(jí)實(shí)時(shí)監(jiān)控、智能運(yùn)維閉環(huán)管理的需求。設(shè)備上架、下架與遷移，自動(dòng)變更和實(shí)時(shí)記錄，（用戶評(píng)價(jià)）：部署工業(yè)互聯(lián)網(wǎng)云平臺(tái)監(jiān)控機(jī)房 U 位后節(jié)省了 99% 的登記變更記錄的時(shí)間，而且實(shí)現(xiàn)了變更后數(shù)據(jù) 100% 的準(zhǔn)確，在這之前是難以想象的，真正實(shí)現(xiàn)運(yùn)維管理最后的工作。

整個(gè) Demo 由最左側(cè)的樹，中間部分的列表以及右邊的拓?fù)鋱D整體構(gòu)成，為了讓整個(gè)布局干凈一點(diǎn)，這里結(jié)合 splitView 和 borderPane 兩種布局方式來進(jìn)行。首先將場(chǎng)景分為左右兩個(gè)部分，左邊為樹，右邊是列表和拓?fù)鋱D的組合：

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

右邊的拓?fù)鋱D部分是在監(jiān)聽選中變化事件的時(shí)候更新的，當(dāng)然，初始化設(shè)置的選中樹上的第一個(gè)節(jié)點(diǎn)就觸發(fā)了選中變化事件：

上面代碼中 splitView.setRightView 函數(shù)意為設(shè)置右側(cè)組件，有了這個(gè)函數(shù)，我就可以動(dòng)態(tài)地改變 spliteView 組件中的右側(cè)組件了。

來源：機(jī)房監(jiān)控 http://www.dr4xxf.cn/   本文采集于網(wǎng)絡(luò)，如有問題有聯(lián)系刪除