今日我們給大家介紹一下怎麼建立一個監控體系的前端部分。
如果你們想要了解或者想要深入學習可以進我的群裡進行交流學習,群号：659479860 。歡迎我們進去交流學習，我們一同學習一同行進，我覺得程式員不應該中止腳步，而是一向在學習的道路上一向行進。
本例的動态效果如下：
我們先來建立根底場景，在 HT 中，非常常用的一種方法來将外部場景導入到内部就是靠解析 JSON 檔案，用 JSON 檔案來建立場景的好處之一就是能夠循環使用，我們今日的場景就是使用 JSON 畫出來的。接下來 HT 将使用 ht.Default.xhrLoad 函數載入 JSON 場景，并用 HT 封裝的 DataModel.deserialize(json) 來反序列化，并将反序列化的目标加入 DataModel：
ht.Default.xhrLoad(‘demo2.json’,function(text){
varjson = ht.Default.parse(text);
if(json.title)document.title = json.title;//将 JSON 檔案中的 titile 賦給全局變量 titile
dataModel.deserialize(json);//反序列化
graphView.fitContent(true);//縮放平移拓撲以展示所有圖元，即讓所有的元素都顯示出來
});
在 HT 中，Data 類型目标構造時内部會主動被賦予一個 id 特點，可經過 data.getId() 和 data.setId(id) 擷取和設定，Data 目标添加到 DataModel 之後不答應修正 id 值，可經過 dataModel.getDataById(id) 快速查找 Data 目标。一般主張 id 特點由 HT 主動配置設定，使用者業務含義的僅有标示可存在 tag 特點上，經過 Data#setTag(tag) 函數答應任意動态改變 tag 值，經過DataModel#getDataByTag(tag) 可查找到對應的 Data 目标，并支援經過 DataModel#removeDataByTag(tag) 删除 Data 目标。我們這邊經過在 JSON 中設定 Data 目标的 tag 特點，在代碼中經過 dataModel.getDataByTag(tag) 函數來擷取該 Data 目标：
varfan1 = dataModel.getDataByTag(‘fan1’);
varfan2 = dataModel.getDataByTag(‘fan2’);
varcamera1 = dataModel.getDataByTag(‘camera1’);
varcamera2 = dataModel.getDataByTag(‘camera2’);
varcamera3 = dataModel.getDataByTag(‘camera3’);
varredAlarm = dataModel.getDataByTag(‘redAlarm’);
varyellowAlarm = dataModel.getDataByTag(‘yellowAlarm’);
我在下圖中做了各标簽對應的元素：
接着我們對需求旋轉、閃耀的目标進行設定，HT 中對“旋轉”封裝了 setRotation(rotation) 函數，經過獲得目标目前的旋轉視點，在這個視點的根底上再添加某個弧度，經過 setInterval 守時調用，這樣就能在一定的時刻距離内旋轉相同的弧度：
setInterval(function(){
vartime = newDate().getTime();
vardeltaTime = time – lastTime;
vardeltaRotation = deltaTime * Math.PI / 180 * 0.1;
lastTime = time;
fan1.setRotation(fan1.getRotation() + deltaRotation*3);
fan2.setRotation(fan2.getRotation() + deltaRotation*3);
camera1.setRotation(camera1.getRotation() + deltaRotation/3);
camera2.setRotation(camera2.getRotation() + deltaRotation/3);
camera3.setRotation(camera3.getRotation() + deltaRotation/3);
if(time – stairTime > 500){
stairIndex–;
if(stairIndex < 0){
stairIndex = 8;
}
stairTime = time;
}
for(vari = 0;i < 8;i++){//由于有一些類似的元素我們設定的 tag 名類似，僅僅在後面換成了1、2、3，是以我們經過 for 循環來擷取
varcolor = stairIndex === i?’#F6A623′ : ‘#CFCFCF’;
dataModel.getDataByTag(‘stair_1_’ + i).s(‘shape.border.color’,color);
dataModel.getDataByTag(‘stair_2_’ + i).s(‘shape.border.color’,color);
}
if(newDate().getSeconds() % 2 === 1){
yellowAlarm.s(‘shape.background’,null);
redAlarm.s(‘shape.background’,null);
}
else{
yellowAlarm.s(‘shape.background’,’yellow’);
redAlarm.s(‘shape.background’,’red’);
}
},5);
HT 還封裝了 setStyle 函數用來設定款式，可簡寫為 s，詳細款式請參考 HT for Web 款式手冊：
for(vari = 0;i < 8;i++){//由于有一些類似的元素我們設定的 tag 名類似，僅僅在後面換成了1、2、3，是以我們經過 for 循環來擷取
varcolor = stairIndex === i?’#F6A623′ : ‘#CFCFCF’;
dataModel.getDataByTag(‘stair_1_’ + i).s(‘shape.border.color’,color);
dataModel.getDataByTag(‘stair_2_’ + i).s(‘shape.border.color’,color);
}
我們還對“正告燈”的閃耀進行了守時操控，如果是偶數秒的時分，就将燈的布景顔色設定為“無色”，否則，如果是 yellowAlarm 則設定為“黃色”，如果是 redAlarm 則設定為“紅色”：
if(newDate().getSeconds() % 2 === 1){
yellowAlarm.s(‘shape.background’,null);
redAlarm.s(‘shape.background’,null);
}
else{
yellowAlarm.s(‘shape.background’,’yellow’);
redAlarm.s(‘shape.background’,’red’);
}
整個例子就這麼輕松地處理了，幾乎太輕松了。。。
有興趣繼續了解的小夥伴能夠進入 HT for Web 官網檢查各個手冊進行學習。更多程式設計方面的分享請關注微信公衆号：程式員大牛！html監控頁面完成,Web前端開發，利用HTML5 Canvas實作監控系統頁面展示