機(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è)的樹(shù),，中間部分的列表以及右邊的拓?fù)鋱D整體構(gòu)成,，為了讓整個(gè)布局干凈一點(diǎn)，這里結(jié)合 splitView 和 borderPane 兩種布局方式來(lái)進(jìn)行,。首先將場(chǎng)景分為左右兩個(gè)部分,，左邊為樹(shù)，右邊是列表和拓?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 組件無(wú)法獲知需要更新,，因此最外層的 HT 組件一般需要監(jiān)聽(tīng) window 的窗口大小變化事件,，調(diào)用最外層組件 invalidate 函數(shù)進(jìn)行更新。為了最外層組件加載填充滿窗口的方便性,，HT 的所有組件都有 addToDOM 函數(shù),，其實(shí)現(xiàn)邏輯如下，其中 iv 是 invalidate 的簡(jiǎn)寫(xiě)：

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

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

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