基於HTML5 的網際網路+地鐵行業

圖撲軟體發表於2018-07-31

前言

近幾年,網際網路與交通運輸的融合,改變了交易模式,影響著運輸組織和經營方式,改變了運輸主體的市場結構、模糊了運營與非營運的界限,也更好的實現了交通資源的集約共享,同時使得更多依靠外力和企業推動交通訊息化成為可能。網際網路交通具有巨大的潛力、發展迅速、生態浩大,需要政府順勢而為,緊跟發展態勢,加強引導、轉變職能、創新政府管理與市場監管的模式。而城市軌道交通的投資體量巨大,一條線路動輒上百億元,如何保證投資效益、提升投資管理工作的精確性和可控性是當務之急。應引入“網際網路+”思維,研發基於“網際網路+”的城市軌道交通系統。在分析現有投資管理存在問題基礎上,這裡對該系統的應用特點及主要功能進行了深入闡述,旨在完善提高系統的功能分佈和使用者體驗。

http://www.hightopo.com/demo/metro/demo2.html

程式碼實現

場景搭建

我們先來搭建基礎場景,因為這個場景是在 2D 的基礎上實現的,因此我們需要用拓撲元件 ht.graph.GraphView 來搭建基礎場景:

 

dataModel = new ht.DataModel();// 資料容器,用來儲存資料節點
graphView = new ht.graph.GraphView(dataModel);// 拓撲元件
graphView.addToDOM();// 將拓撲元件新增到 body 體

 

上面程式碼中出現的 addToDOM 方法將組建新增到 DOM 的 body 中,HT(https://hightopo.com)的元件一般都會嵌入 BorderPane、SplitView 和 TabView 等(均為 HT 的元件)容器中使用,而最外層的 HT 元件則需要使用者手工將 getView() 返回的底層 div 元素新增到頁面的 DOM 元素中,這裡需要注意的是,當父容器大小變化時,如果父容器是 BorderPane 和 SplitView 等這些 HT 預定義的容器元件,則 HT 的容器會自動遞迴呼叫孩子元件 invalidate 函式通知更新。但如果父容器是原生的 html 元素, 則 HT 元件無法獲知需要更新,因此最外層的 HT 元件一般需要監聽 window 的視窗大小變化事件,呼叫最外層元件 invalidate 函式進行更新。

為了最外層元件載入填充滿視窗的方便性,HT 的所有元件都有 addToDOM 函式,其實現邏輯如下,其中 iv 是 invalidate 的簡寫:

 

addToDOM = function(){
    var self = this,
        view = self.getView(),// 獲取元件的底層 div
        style = view.style;
    document.body.appendChild(view);// 將元件底層div新增進body中
    style.left = '0';// ht 預設將所有的元件的position都設定為absolute絕對定位
    style.right = '0';
    style.top = '0';
    style.bottom = '0';
    window.addEventListener('resize', function () { self.iv(); }, false);// 視窗大小改變事件,呼叫重新整理函式
}

 

 

場景匯入

在 HT 中,常用的一種方法將場景匯入到內部就是靠解析 JSON 檔案,用 JSON 檔案來搭建場景的好處之一就是可以迴圈利用,我們今天的場景就是利用 JSON 畫出來的。接下來 HT 將利用  ht.Default.xhrLoad 函式載入 JSON 場景,並用 HT 封裝的 DataModel.deserialize(json) 來反序列化(http://hightopo.com/guide/guide/core/serialization/ht-serialization-guide.html#ref_serialization),並將反序列化的物件加入 DataModel:

 

ht.Default.xhrLoad('demo2.json', function(text) {
    var json = 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 物件:

{
    "c": "ht.Block",
    "i": 3849,
    "p": {
        "displayName": "通風1",
        "tag": "fan1",
        "position": {
            "x": 491.24174,
            "y": 320.88985
        },
        "width": 62,
        "height": 62
    }
}

 

var fan1 = dataModel.getDataByTag('fan1');
var fan2 = dataModel.getDataByTag('fan2');
var camera1 = dataModel.getDataByTag('camera1');
var camera2 = dataModel.getDataByTag('camera2');
var camera3 = dataModel.getDataByTag('camera3');
var redAlarm = dataModel.getDataByTag('redAlarm');
var yellowAlarm = dataModel.getDataByTag('yellowAlarm');

 

我在下圖中做了各標籤對應的元素:



 ​

動畫

接著我們對需要旋轉、閃爍的物件進行設定,HT 中對“旋轉”封裝了 setRotation(rotation) 函式,通過獲得物件當前的旋轉角度,在這個角度的基礎上再增加某個弧度,通過 setInterval 定時呼叫,這樣就能在一定的時間間隔內旋轉相同的弧度:

setInterval(function(){
    var time = new Date().getTime();
    var deltaTime = time - lastTime;
    var deltaRotation = 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 (var i = 0; i < 8; i++) {// 因為有一些相似的元素我們設定的 tag 名類似,只是在後面換成了1、2、3,所以我們通過 for 迴圈來獲取
        var color = 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 (new Date().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 封裝的動畫進行操作,不過這裡不一次性投食太多,有興趣的可以看看我釋出的 https://www.cnblogs.com/xhload3d/p/9222549.html 等其它文章。

HT 還封裝了 setStyle 函式用來設定樣式,可簡寫為 s,具體樣式請參考 HT for Web 樣式手冊(http://hightopo.com/guide/guide/core/theme/ht-theme-guide.html):

for (var i = 0; i < 8; i++) {// 因為有一些相似的元素我們設定的 tag 名類似,只是在後面換成了1、2、3,所以我們通過 for 迴圈來獲取
    var color = 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 (new Date().getSeconds() % 2 === 1) {
    yellowAlarm.s('shape.background', null);
    redAlarm.s('shape.background', null);
}
else {
    yellowAlarm.s('shape.background', 'yellow');
    redAlarm.s('shape.background', 'red');
}

 

總結

2015 年 3 月,李克強總理在政府工作報告中首次提出“網際網路+”行動計劃。之後,國務院印發《關於積極推進“網際網路+”行動的指導意見》,推動網際網路由消費領域向生產領域擴充,從而進一步提升產業發展水平,增強行業創新能力。在此“網際網路+”的背景之下,城市軌道交通行業應當緊跟時代潮流,將“網際網路+”思維引入工程投資管理之中,研發一種基於“網際網路+”的城市軌道交通工程投資管理系統,從而提升造價管理系統的功能分佈和使用者體驗。“網際網路+”通過行業跨界,尋找網際網路與城市軌道交通工程的相關性,將傳統行業的資料進行資訊化處理,將原本有限的資料進行提升、分析和流轉,利於“網際網路+”的乘數效應,顯著提升工程投資管理中資料的實時動態和完整精確。

 

https://hightopo.com/demo/metro/demo1.html



 

https://hightopo.com/demo/large-screen/index.html

 

相關文章