摘要：兩個月前是的，兩個月過去了，歲月如梭，哥幫小弟做的魔都地鐵拖拖樂打了下廣告，沒想到一炮而紅，好評如潮。下面進入正題一些基本功能這里不再贅述，大家可以查看上一篇有關(guān)魔都地鐵圖的文章。一旦地鐵發(fā)生故障，會導(dǎo)致大量乘客滯留。

兩個月前（是的，兩個月過去了，歲月如梭），哥幫小弟做的“HTML5魔都地鐵拖拖樂”打了下廣告，沒想到一炮而紅，好評如潮?，F(xiàn)在的年輕人，還是很上進的，一被表揚，動力無窮。年底雖然忙得眼底發(fā)黑，小弟硬是忙里偷閑又做了一個帝都的版本。
這個版本，不光是換成了帝都的地鐵圖，還增加了很多聽起來就很能“變現(xiàn)”的功能：線路規(guī)劃、站點告警展示、站點內(nèi)部電路圖、站點三維呈現(xiàn)……在這個信息過剩的年代，多數(shù)人都是涉獵很廣卻學(xué)而不精，小弟這種對問題進行深度挖掘的精神，哥真的很佩服。

------------------------------------------------下面進入正題-----------------------------------------------------------

一些基本功能這里不再贅述，大家可以查看上一篇有關(guān)魔都地鐵圖的文章。哥今天主要給大家介紹新增功能。

我們先來看一下小弟做的帝都地鐵圖的效果，基本上是參照baidu的地鐵圖來復(fù)現(xiàn)的：

依然是純矢量、可交互、有動態(tài)效果、無失真縮放的拓撲圖：

可視化效果具體就不展開了，拿到過拖拖樂的兄弟們都了解。下面主要還是說說這次新增的功能點，怎么形容呢？殺很大噢~

鼠標(biāo)點擊某條地鐵線路，選中的線路會以發(fā)光的形式突出顯示出來。

小弟說之所以要增加這個功能，是因為現(xiàn)在的地鐵線路太多了，想查看單條線路的時候經(jīng)常會看串……也是，雖然交通部門在設(shè)計地鐵線路圖的時候已經(jīng)盡量用不同的顏色去標(biāo)注每條線路，但是擋不住地鐵十幾二十條地往上加，要想查看單條線路還真是費勁。有了這個功能，頓時清爽了很多有木有？ 哥必須為這個功能點個贊……

實現(xiàn)代碼其實很簡單：

function changeAlpha(lineNumber,alpha){
        alpha = alpha || 1;
        var list = lines[lineNumber];
        list.forEach(function(li){
            li.setStyle("whole.alpha",alpha);
            li.s("outer.style", alpha < 1 ? "none":"glow");
            li.s("label.shadowable", alpha >= 1 );
        });
        list = stations[lineNumber];
        list.forEach(function(li){
            li.setStyle("whole.alpha",alpha);
            li.s("outer.style", alpha < 1 ? "none":"glow");
            li.s("label.shadowable", alpha >= 1 );
        });
    }

為啥這么好的想法，地圖廠商都不提供呢？如果你對仍然體會不是很深刻的話，看看下面這張圖，相信你會覺得這個功能是多么賞心悅目……

用鼠標(biāo)右鍵點擊同一條線路上的兩個站點，這兩個站點之間的路線會高亮顯示。小弟說，從用戶角度來說，這個功能可以用來進行路線的規(guī)劃。不過一般我們不會在前端做路線規(guī)劃，只需要把計算好的路線結(jié)果顯示出來就可以了。小弟做這個功能的另一個目的是為了方便運維人員查看某一段線路上的告警站點。

說到告警，才進入了這次的重點。

地鐵因運量大、速度快、無堵車等優(yōu)點，已經(jīng)成為眾多上班族的首選出行方式。一旦地鐵發(fā)生故障，會導(dǎo)致大量乘客滯留。因此，對于地鐵運維人員來說，能夠快速發(fā)現(xiàn)故障站點并及時排除故障就顯得尤為重要。

我們可以看到，小弟做的這張帝都地鐵圖，與普通地鐵圖最大的不同是上面增加了許多五顏六色的告警標(biāo)識，告警站點一目了然，上面還標(biāo)明了告警的數(shù)量以及告警級別。這樣，地鐵運維人員就可以快速掌握各地鐵站點的告警情況，合理安排故障排查的優(yōu)先級。

因為我們公司是做企業(yè)應(yīng)用的嘛，這個功能是很容易放上去的，代碼也不復(fù)雜。

Util.addAlarm("alarm" + p["-sid"], n, twaver.AlarmSeverity.severities.get(random), box.getAlarmBox(),random);
addAlarm: function (alarmID, staNode, alarmSeverity, alarmBox,random) {
  var alarm = new twaver.Alarm(alarmID, staNode.getId(), alarmSeverity);
  alarm.setClient("MAPPINGID",this.alarmCode[random]);
  alarm.setClient("raisedTime",new Date());
  alarm.setClient("platform",staNode.getName());
  alarm.setAcked(Math.random()* 10 > 5? true:false);
  alarmBox.add(alarm);
}                             

雙擊一條線路，會彈出該線路的所有告警數(shù)據(jù)，包括告警站臺、告警級別、告警發(fā)生時間等詳細信息。這里用的是現(xiàn)成的表格組件。

實現(xiàn)也很簡單，首先兩行代碼將表格和DataBox關(guān)聯(lián)：

var table = new twaver.controls.Table(box.getAlarmBox());
var tablePane = new twaver.controls.TablePane(table);

然后用以下代碼實現(xiàn)：

    var alarmSeverity = {
        Critical: "嚴重",
        Major:"主要",
        WARNING:"警告",
    } 
    table.onCellRendered = function (params) {
        if (params.column.getName() === "告警級別") {
            params.div.style.backgroundColor = params.data.getAlarmSeverity().color;
        }
    };
    var column = createColumn(table, "站臺", "platform", "client", "string",100,40);
    column.setHorizontalAlign("center");
    var column = createColumn(table, "告警級別", "alarmSeverity", "accessor", "string", true);
    column.setWidth(80);
    column.setHorizontalAlign("center");
    var setValue = column.setValue;
    column.setValue = function (data, value, view) {
        value = twaver.AlarmSeverity.getByName(value);
        setValue.call(column, data, value, view);
    };
    column.setEnumInfo(twaver.AlarmSeverity.severities.toArray());
    var column = createColumn(this.table, "告警碼", "MAPPINGID", "client","string",166);
    column.setHorizontalAlign("center");
    var column = createColumn(this.table, "告警問題", "alarmque", "client");
    column.setHorizontalAlign("center");
    var timeColumn = createColumn(table, "告警發(fā)生時間", "raisedTime", "client");
    timeColumn.setWidth(167);
    timeColumn.setHorizontalAlign("center");
    timeColumn.renderCell = function (params) {
        var span = document.createElement("span");
        span.innerHTML = formatDate(params.value, "yyyy-MM-dd hh:mm:ss");
        span.style.whiteSpace = "nowrap";
        params.div.appendChild(span);
    }
}

單擊站點，會彈出一個功能菜單，現(xiàn)在有展示、告警、電路等模塊。小弟說還可以根據(jù)需要，定制更多功能模塊，全方位展示站點信息。我們一一來看幾個菜單都展示了些啥。

點擊“告警”，彈出站點告警數(shù)據(jù)，還可以查看該站點的歷史告警數(shù)據(jù)。

小弟說，前幾天他去看了一個很高大上的軌道交通技術(shù)展會，了解到每個站點內(nèi)就有大量的設(shè)備，像電力設(shè)備、環(huán)控設(shè)備、屏蔽門設(shè)備、電梯設(shè)備、門禁設(shè)備、廣播和閉路電視設(shè)備、通訊設(shè)備等等。因此，每個站點也必須要有集中的告警展示。當(dāng)然，現(xiàn)在做的還比較簡單，如果有真實數(shù)據(jù)，就能做得更好看了，反正菜單定義都很方便。

地鐵里的通信系統(tǒng)還是比較復(fù)雜的，據(jù)我了解，除了有專用的通信系統(tǒng)外，還要提供民用的通信系統(tǒng)，以及專用的電源管理、廣播、視頻監(jiān)控等等子系統(tǒng)。這就必須要咱們擅長的拓撲圖上場了。

點擊“圖紙”按鈕，彈出站點內(nèi)部設(shè)備的拓撲圖。所有的圖元都可以拖拽、縮放，告警、分組這些該有的功能都有，如果拓撲圖有多個層級，不停往下加layer就好了。

代碼稍復(fù)雜：

button.onclick = function (e) {
    var dialog = document.getElementById(id);
    dialog && document.body.removeChild(dialog);
    var box2 = new twaver.ElementBox();
    var network2 = new twaver.vector.Network(box2);
    var view = network2.getView();
    var autoLayouter = new twaver.layout.AutoLayouter(box2);
        // network2.setZoomManager(new twaver.vector.MixedZoomManager(network2,false));
        var items = Util.topo_data;
        var i,item;
        for(i = 0;i < items.length; i++){
            item = items[i];
            Util.createElement(box2, item);
        }
        var self = this;
        var hGap=80;
        autoLayouter.getDimension=function (node) {
            if (node instanceof twaver.Group && node.getChildrenSize() > 0) {
                var rect = null;
                for (var i = 0, n = node.getChildrenSize(); i < n; i++) {
                    var child = node.getChildAt(i);
                    if (child instanceof twaver.Node) {
                        if (rect) {
                            rect = _twaver.math.unionRect(rect, child.getRect());
                        } else {
                            rect = child.getRect();
                        }
                    }
                }
                if (rect) {
                    return { width: rect.width+hGap, height: rect.height };
                } else {
                    return null;
                }
            } else {
                return { width: node.getWidth()+hGap, height: node.getHeight() };
            }
        },
        autoLayouter.doLayout("hierarchic", function(){
            network2.zoomOverview();
        });
        var left = e.clientX, top = e.clientY;
        var width = 760, height = 360;
        Util.showTopo("dialog_topo",element,network2,width+"px",height+"px","260px","0px","圖紙");
        Util.changeState();
        $("#dialog_topo").animate({
            top:"100px",
        },"normal","swing",function(){
        });
    }

這個功能可謂是很趕時髦的，點擊“展示”模塊，跳出當(dāng)前站點的三維展示圖，重點標(biāo)識了幾個出口的位置。

小弟說現(xiàn)在地鐵站的出口示意圖一般都是平面圖，或者是假3D圖，身邊有些妹子經(jīng)常表示看不太懂，尤其在一些比較復(fù)雜的換乘站點，所以整了個3D示意圖，還可以任意角度旋轉(zhuǎn)、縮放什么的。整個過程我的注意力就被“妹子”吸引了，不得不說為了妹子，小弟的這個地鐵站可是像模像樣的。

模型內(nèi)部也可以進入，用來展示一些消防用具的位置。不過這地鐵內(nèi)部，我越看越覺得像某部喪尸片呢……

最后，點擊“電路”模塊，彈出站點內(nèi)部電路圖。如果對接上地鐵的供配電系統(tǒng)，那還是這個展示平臺上相當(dāng)不錯的一個亮點。

功能介紹到這里就基本結(jié)束了。

總結(jié)一下，上次小弟主要是在可視化方面下了功夫，而這次是從乘客、監(jiān)控和運維的角度去設(shè)計的功能。盡管很多功能只是點到為止，但真要在實際項目中用起來，相信又是一個亮點工程了。

看到今天sfgg有2016總結(jié)活動呢，那哥也來總結(jié)一把。

還得先說2015年，哥初來sfgg，斗膽發(fā)了幾篇文章，認識了不少朋友，也給了不少建議。2016年，項目進展順利，很多精力都投入在非技術(shù)領(lǐng)域，自然文章也寫的不勤快了。除了一篇3D機房的文章，后來就開始沾我小弟的光了。不過這也沒啥，江山代有小弟出，團隊就怕缺牛人。從技術(shù)走向管理的路，大多也是如此吧。

最后祝大家：

 
 
 
 
 
Happy New Year!
 
 
 

索取代碼照舊：tw-service@servasoft.com