前言

樓宇自控是指樓宇中電力設備，如電梯、水泵、風機、空調等，其主要作業性質是強電驅動，通常這些設備是開放性的作業狀態，也就是說沒有形成一個倍訓回路，只要接通電源，設備就在作業，至于作業狀態、行程、能耗等，無法在線及時得到資料，更談不上合理使用和節約能源，現在樓宇自控是將上述的電器設備進行在線監控，通過設定相應的傳感器、行程開關、光電控制等，對設備的作業狀態進行檢測，并通過線路回傳控制機房的中心電腦，由電腦得出分析結果，再回傳到設備終端進行調解，

(具體效果請參考鏈接：http://www.hightopo.com/demo/building-automation-system/)

代碼實作

首先第一步我們還是要對整個界面做一下基礎的設定：

gv.getSelectWidth = () => { return 0 } // 隱藏選中邊框gv.setMovableFunc(() => { return false }) // 禁止圖元移動gv.handleScroll = () => {} // 禁止滑鼠縮放gv.handlePinch = () => {} // 禁止 touch 下雙指縮放gv.setPannable(false) // 禁止平移gv.setRectSelectable(false) // 禁止框選gv.setScrollBarVisible(false) // 隱藏滾動條window.document.oncontextmenu = () => { return false } // 全域設定右鍵選單禁用

接下來就開始對面板進行封裝，實作每塊中包含的影片效果，這些動效制作起來既簡單又能展現出整個系統的運動感，其實作的方式相仿，我就用一段例子來演示：

function chillerPanelAnim() {　　let num = []　　let n = []　　for (let i = 0; i < 10; i++) {　　　　if (i < 8) {　　　　　　num.push(Math.random() * 2)　　　　}　　　　else if (i === 8) {　　　　　　n.push(Math.random() * 40 + 60)　　　　}　　　　else {　　　　　　n.push(Math.random() * 31)　　　　}　　}　　let oldNumValue1 = chillerPanel.a('l1.l.clipPercentage')　　let oldNumValue2 = chillerPanel.a('l2.l.clipPercentage')　　let oldNumValue3 = chillerPanel.a('l3.l.clipPercentage')　　ht.Default.startAnim({　　　　duration: 2000,　　　　easing: (t) => { return t },　　　　action: (v, t) => {　　　　　　chillerPanel.a('l1.l.clipPercentage', oldNumValue1 + (num[0] - oldNumValue1) * v)　　　　　　chillerPanel.a('l2.l.clipPercentage', oldNumValue2 + (num[1] - oldNumValue2) * v)　　　　　　chillerPanel.a('l3.l.clipPercentage', oldNumValue3 + (num[2] - oldNumValue3) * v)　　　　},　　　　finishFunc: () => {　　　　　　setTimeout(() => {　　　　　　　　chillerPanelAnim()　　　　　　}, 2000)　　　　}　　})}

關于影片的方法大家可以理解為將某些屬性由起始值逐漸變到目標值的程序，HT 提供了 ht.Default.startAnim，它支持 Frame-Based 和 Time-Based 兩種方式的影片，我使用 Time-Based 方式，優點在于只需要指定 duration 的影片周期的毫秒數即可，HT 將在指定的時間周期內完成影片，也就是說幀數或 action 函式被呼叫次數取決于系統環境，一般來說系統配置更好的機器，更高效的瀏覽器則呼叫幀數越多，影片程序更平滑，避免了由于 js 語言無法精確控制 interval 時間間隔，可能會出現影片周期差異較大的問題，這其中還有個 easing 屬性可以通過數學公式計算來配置影片的 緩動效果，感興趣的朋友可以打開來自己試著玩一玩，

2.5D 設備的管道部分，我用調度的方式給大家介紹一下：

// 流動影片let flowTask = {
　　interval: 10,    action: (data) => {        if (data.getDisplayName() === 'flow1') {            data.s('shape.dash.offset', data.s('shape.dash.offset') + 1)        }        if (data.getDisplayName() === 'flow2') {            data.s('shape.dash.offset', data.s('shape.dash.offset') - 1)        }        if (data.getDisplayName() === 'flow3') {            data.s('shape.dash.offset', data.s('shape.dash.offset') + 5)        }    }}

這也是一種實作動效的方式，它主要用于在指定的時間間隔進行函式回呼處理，常用于實作圖形的流動和閃爍等影片效果，流程是先通過 DataModel 添加調度任務，DataModel 會在調度任務指定的時間間隔到達時，遍歷所有圖元回呼調度任務的 action 函式，可在該函式中傳入的 Data 圖元做相應的屬性修改以達到影片效果，更多引數和設定可以參考 調度手冊，

我們還要注意最好給需要互動的圖元的滑鼠移入移出事件分別設定 view.setCursor('pointer') 和 view.setCursor('default') 來增強互動體驗感，同時，制作 2.5D 的圖元其實需要花費超出正常 2D 圖元數倍的作業量，除了要按照真實角度的透視圖去建模外，還需要把每個部分單獨制作，這就出現了有可能卡頓的問題，我們做的時候要注意用快取規則來優化性能，盡可能的把每個細節做好，cacheRule 就相當于都用同一個 image，默認規則時：圖示名 + 寬 + 高 + 縮放，如果規則判定一致，就會用同一張貼圖，如果有其他的需要影響，就多回傳一些資訊，例如 data.a( 'color' )，這樣會額外判定他們這個屬性也是否一致，只有都一致的才會用同一張快取，不一致的話嘗試新建快取貼圖，比較適合靜態的，

總結

在二十一世紀的今天，隨著計算機技術和資訊技術突飛猛進的發展，對大樓內的各種設備的狀態監視和測量不再是隨線式，而是采用掃描測量，智能建筑 (Intelligent Buildings) 是建筑技術與互聯網技術相結合的產物，是資訊社會與經濟國際化的需要，今天我們打造的樓宇自動化控制系統 (BAS) 就屬于這其中的一類，還有通信自動化系統 (CAS) 和辦公自動化系統 (OAS) 等組成，如今已經廣泛應用于各個領域，極大的提高了管理效率和能源的有效利用率以及設備監測等智能化為一體的作業系統，還有更多高大上的智能作業系統在等待著我們推動社會資訊化的進步！

HT for Web ：(http://www.hightopo.com/demos/cn-index.html)

標籤：HTML5

上一篇：關于H5的一些相關基礎知識

下一篇：在內網中 vue專案添加ECharts圖表插件