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

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

------------------------------------------------下面進(jìn)入正題-----------------------------------------------------------

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

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

依然是純矢量、可交互、有動(dòng)態(tài)效果、無(wú)失真縮放的拓?fù)鋱D：

可視化效果具體就不展開(kāi)了，拿到過(guò)拖拖樂(lè)的兄弟們都了解。下面主要還是說(shuō)說(shuō)這次新增的功能點(diǎn)，怎么形容呢？殺很大噢~

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

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

實(shí)現(xiàn)代碼其實(shí)很簡(jiǎ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 );
        });
    }

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

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

說(shuō)到告警，才進(jìn)入了這次的重點(diǎn)。

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

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

因?yàn)槲覀児臼亲銎髽I(yè)應(yīng)用的嘛，這個(gè)功能是很容易放上去的，代碼也不復(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);
}                             

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

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

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

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

    var alarmSeverity = {
        Critical: "嚴(yán)重",
        Major:"主要",
        WARNING:"警告",
    } 
    table.onCellRendered = function (params) {
        if (params.column.getName() === "告警級(jí)別") {
            params.div.style.backgroundColor = params.data.getAlarmSeverity().color;
        }
    };
    var column = createColumn(table, "站臺(tái)", "platform", "client", "string",100,40);
    column.setHorizontalAlign("center");
    var column = createColumn(table, "告警級(jí)別", "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, "告警問(wèn)題", "alarmque", "client");
    column.setHorizontalAlign("center");
    var timeColumn = createColumn(table, "告警發(fā)生時(shí)間", "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);
    }
}

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

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

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

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

點(diǎn)擊“圖紙”按鈕，彈出站點(diǎn)內(nèi)部設(shè)備的拓?fù)鋱D。所有的圖元都可以拖拽、縮放，告警、分組這些該有的功能都有，如果拓?fù)鋱D有多個(gè)層級(jí)，不停往下加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(){
        });
    }

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

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

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

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

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

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

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

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

最后祝大家：

 
 
 
 
 
Happy New Year!
 
 
 

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