接着上一篇文章，《如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题（机房升级版）-第九课（一）》 继续讲解关于三维数据中心管线可视化的解决方案。

上一篇我们主要讲解了园区的方案，这一片主要讲解楼层内的以及机房内的可视化管线方案。

因为是继着上一篇文章，这里就不做概念性讲解了。

闲话少叙，我们继着上一篇直接上干货。

1、首先，我们双击某移动楼，进入楼层内部，看一下楼层结构，效果如下：

进入楼层后，线展开显示楼层以及主要管线全貌，然后再合并楼层，隐藏管线。

实现代码如下：

//双击选中机柜
ModelBussiness.prototype.dbClickSelect = function (_obj, _face, formRoute,searchParam) {

var \_this = this;  
if (modelBussiness.currentState > 20 && modelBussiness.currentState <30) {  
    return;  
}  
if (\_obj.name.indexOf("build") >= 0 ) {  
    modelBussiness.commonFunc.ZoomINShow(\_obj, \_face, formRoute);  
    setTimeout(function () {  
        var floorurl = "floor.html?build=" + \_obj.name;  
        if (searchParam) {  
            floorurl = "dataCenter.html?build=" + \_obj.name;  
            floorurl+= "&searchParam=" + searchParam;  
        }  
    }, 2000);  
    selectBuild(\_obj);//加载显示楼层

}  

}

2、显示楼层间管线，并且显示管线信息

实现代码如下：

// 点击显示光缆
function showDianLuData(id, cirName, customerName, aUserPort, aOppositePort, zOppositePort, zUserPort, aLight,isSearch) {
$('#seachBase').show()
$('#guangLan').hide()
$("#"+id).siblings().find('.searchRowText').removeClass('active')
$("#" + id).find('.searchRowText').addClass('active');
if (isSearch) {
var devs = getDLGLDevsConfig();
var modelids = null;
var model4ids = null;
$.each(devs, function (_index, _obj) {
if (_obj.dataid == id) {
modelids = _obj.modelname2;
model4ids = _obj.modelname4;
}
});
if (modelids) {
modelBussiness.showAllFloorLinesModel(function () {
modelBussiness.vistureAllFloorLinesModel(function () {
if (modelids.length > 0) {
$.each(modelids, function (_index, _obj) {
modelBussiness.entityFloorLinesModelByName(_obj, model4ids);
})
}
});
});
}
}
var html=template('temp_dianLu',{cirName:cirName,customerName:customerName,aUserPort:aUserPort,aOppositePort:aOppositePort,zOppositePort:zOppositePort,zUserPort:zUserPort,aLight:aLight})
$("#seachBase").html(html)
}

鼠标划入，显示光缆弹窗信息

//鼠标滑入回调
ModelBussiness.prototype.mouseOverInCallBack = function (_obj, face,_objs) {
// console.log(44,_obj, face,_objs)
console.log(_obj.name)
if (modelBussiness.currentState >= 26) {
return;
}
layer.closeAll();
var _this = this;
var color = 0xbfffea;
if (_obj.name.indexOf("_OBJCREN_") >= 0) {
_obj = _obj.parent;
}
if (_obj.name.indexOf("_OBJCREN_") >= 0) {
_obj = _obj.parent;
}
modelBussiness.lastMouseInCurrentObj = _obj;
modelBussiness.mouseInCurrentObj = _obj;

if (\_obj.name.indexOf("yqgx\_") >= 0) {  
    var \_sobj = \_obj;  
    if (\_obj.visible) {  
    modelBussiness.mouseInCurrentObj = \_sobj;  
    showLightLineData(\_obj.name);  
    }  
  //  WT3DObj.commonFunc.setSkinColorByObj(\_sobj, 0xffff00)  
} else if (\_obj.name.indexOf("zb\_f") >= 0 || \_obj.name.indexOf("jing\_line\_") >= 0) {  
    var \_sobj = \_obj;  
    modelBussiness.mouseInCurrentObj = \_sobj;

    //WT3DObj.commonFunc.setSkinColorByObj(\_sobj, 0xffff00)  
    showLightLineData(\_obj.name);  
} else if (\_obj.name.indexOf("build\_") >= 0) {  
    var \_sobj = \_obj;  
    if(!$(".searchBtn:visible").length) return;  
    WT3DObj.commonFunc.changeObjsOpacity(\[\_sobj\], 0, 1, 10, function () {});  
    // 显示楼信息  
    $("#"+\_obj.name).fadeIn()  
    modelBussiness.changeMsgDivPosition()  
} else if (\_obj.name.indexOf("dev\_jg\_") >= 0) {  
    var \_sobj = \_obj;  
    modelBussiness.mouseInCurrentObj = \_sobj;  
    modelBussiness.commonFunc.showJGMsg(\_obj, { x: \_obj.position.x, y: \_obj.position.y , z: \_obj.position.z  });  
}

// console.log(\_obj.name);  

}

3、楼层内搜索光缆走向，并显示主要接入设备的信息。

实现代码如下：

$('.searchBtnSou').click(function () {
//光缆--接口数据展示
var keyWord=$("#searchIpt").val()
var emptyStr="查无结果！";
var html='';
var dataNew=[];
if ($('.searchSelect').text() == '光缆') {
webapi.getSearchLineParkData(keyWord, function (data) {
dataNew=searchFilter(data,'lineName',keyWord)
html=template('temp_list_guangLan',{data:dataNew})
if (!dataNew.length) {
html=emptyStr;
}
$(".searchList").html(html);
})
}
})

4、搜索楼层间电路信息

实现代码如下：

if ($('.searchSelect').text() == '电路') {
webapi.getSearchCircuit(keyWord, function (data) {
var dataNew = [];
data.forEach(function(item){
if(item.cirName.indexOf(keyWord)>-1){
dataNew.push(item)
}
})
// dataNew=searchFilter(data,'cirName',keyWord)
html=template('temp_list_dianLu',{data:dataNew});
if (!dataNew.length) {
html=emptyStr;
}
$(".searchList").html(html);
})
}

5、展现客户设备概览，对于大型IDC机房，会涉及到很多用户租用机柜的情况，这时候就需要能够清晰的看到各个客户租用的机柜概况，

这里我们双击进入到楼层内部，右下角会展现出当前楼层所有租赁的客户名称，点击任何一个客户名称，高亮显示该客户对应的机柜，其它无关机柜虚化。

实现代码如下：

//根据客户id显示
ModelBussiness.prototype.showCabinetByCustomId = function (id, sucFunc) {
var _this = this;
var racks = getRacksConfig();
var names = [];
$.each(racks, function (_index, _obj) {
if (_obj.customerCompId == id) {
names.push(_obj.name);
}
});
if (_this.needHideCabinets.length <= 0) { $.each(WT3DObj.objects, function (_index, _obj) { if (_obj.name.indexOf("dev_") >= 0 || _obj.name.indexOf("rack_") >= 0) {
_this.needHideCabinets.push(_obj);
}
});
}
var showCabs = [];
if (id == "all") {

    showCabs = \_this.needHideCabinets;  
} else {  
    $.each(\_this.needHideCabinets, function (\_index, \_obj) {  
        if (names.indexOf(\_obj.name) >= 0) {

            showCabs.push(\_obj);  
        }  
    })  
}  
WT3DObj.commonFunc.changeObjsOpacity(showCabs, 0.2, 1, 500, function () {  
    if (sucFunc) {  
        sucFunc();  
    }  
});  

}

6、楼层内统一包括常规的机柜管理数据，机柜信息展示等

划入机柜，光缆等代码如下：

//鼠标滑入回调
ModelBussiness.prototype.mouseOverInCallBack = function (_obj, face) {
if (modelBussiness.currentState >= 29) {
return;
}
var _this = this;
var color = 0xbfffea;
console.log(_obj.name);
if (modelBussiness.lastMouseInCurrentObj) {
if ((modelBussiness.lastMouseInCurrentObj.name.indexOf("sq_qiang_") >= 0
|| modelBussiness.lastMouseInCurrentObj.name.indexOf("sq_chuang_") >= 0) && modelBussiness.hasShowfloors)
{
var currentFloor=modelBussiness.lastMouseInCurrentObj.name.replace("sq_qiang_","").replace("sq_chuang_","")
if (currentFloor != "3" && currentFloor != "1" && currentFloor != "4" && currentFloor != "6") {
WT3DObj.commonFunc.changeObjsOpacity([modelBussiness.lastMouseInCurrentObj], 1, 0.2, 10, function () {
});
}
}
WT3DObj.commonFunc.setSkinColorByObj(modelBussiness.lastMouseInCurrentObj, 0x000000);
}
if (_obj.name.indexOf("_OBJCREN_") >= 0) {
_obj = _obj.parent;
}
if (_obj.name.indexOf("_OBJCREN_") >= 0) {
_obj = _obj.parent;
}
modelBussiness.lastMouseInCurrentObj = _obj;
modelBussiness.mouseInCurrentObj = _obj;
if (_obj.name.indexOf("LightCubeBorder") > 0) {
return;
} else if (_obj.name.indexOf("_rate_outCube") >= 0) {
var oldobj = _obj;
WT3DObj.commonFunc.setSkinColorByObj(oldobj, 0x00ffff);
var _obj = WT3DObj.commonFunc.findObject(_obj.name.split("_rate_")[0]);

    modelBussiness.commonFunc.showRate(\_obj, { x: \_obj.position.x, y: \_obj.position.y + 500, z: \_obj.position.z }, function () {  
        //modelBussiness.commonFunc.removeLightBorder(modelBussiness.mouseInCurrentObj.name)  
    });  
} else if (\_obj.name.indexOf("\_bearing\_innerCube") >= 0) {  
    var oldobj = \_obj;  
    WT3DObj.commonFunc.setSkinColorByObj(oldobj, 0x00ffff);  
    var \_obj = WT3DObj.commonFunc.findObject(\_obj.name.split("\_bearing\_innerCube")\[0\]);

    modelBussiness.commonFunc.showBearingRate(\_obj, { x: \_obj.position.x, y: \_obj.position.y + 300, z: \_obj.position.z }, function () {  
        //modelBussiness.commonFunc.removeLightBorder(modelBussiness.mouseInCurrentObj.name)  
    });  
} else if (\_obj.name.indexOf("\_energyRate\_") >= 0) {  
    var oldobj = \_obj;  
    WT3DObj.commonFunc.setSkinColorByObj(oldobj, 0x00ffff);  
    var \_obj = WT3DObj.commonFunc.findObject(\_obj.name.split("\_energyRate\_")\[0\]);

    modelBussiness.commonFunc.showEnergyRate(\_obj, { x: \_obj.position.x, y: \_obj.position.y + 300, z: \_obj.position.z }, function () {  
        //modelBussiness.commonFunc.removeLightBorder(modelBussiness.mouseInCurrentObj.name)  
    });  
}  else if (\_obj.name.indexOf("rack\_") >= 0  
    && \_obj.name.indexOf("\_Server\_") < 0  
    && \_obj.name.indexOf("\_currentCabnet") < 0) {  
    modelBussiness.mouseInCurrentObj = \_obj;  
    modelBussiness.commonFunc.addLightBoder(\_obj, 0x00ffff, 1, null, {  
        x: \_obj.geometry.parameters.width + 4,  
        y: \_obj.geometry.parameters.height + 4,  
        z: \_obj.geometry.parameters.depth + 4,  
    });  
    modelBussiness.commonFunc.showMsg(\_obj, { x: \_obj.position.x, y: \_obj.position.y + 500, z: \_obj.position.z }, function () {  
        modelBussiness.commonFunc.removeLightBorder(modelBussiness.mouseInCurrentObj.name)  
    });  
} else if (\_obj.name.indexOf("\_Server\_") >= 0) {  
    var \_sobj = \_obj;  
    modelBussiness.commonFunc.removeLightBorder(modelBussiness.lastMouseInCurrentObj.name);  
    modelBussiness.mouseInCurrentObj = \_sobj;  
    modelBussiness.commonFunc.showServerMsg(\_obj, { x: \_obj.position.x, y: \_obj.position.y + 1.5, z: \_obj.position.z - 13 });  
    if (modelBussiness.currentState == 10) {  
        if (modelBussiness.currentShowServer.name == \_sobj.name) {  
            return;  
        }  
    }  
    modelBussiness.commonFunc.addLightBoder(\_sobj, 0x00ffff, 0.6, null, {  
        x: \_sobj.geometry.parameters.width + 4,  
        y: \_sobj.geometry.parameters.height + 4,  
        z: \_sobj.geometry.parameters.depth + 4,  
    });  
} else if (\_obj.name.indexOf("dev\_T\_") >= 0) {  
    if (\_obj.name.indexOf("\_OBJCREN\_") >= 0) {  
        \_obj = WT3DObj.commonFunc.findObject(\_obj.name.split("\_OBJCREN\_")\[0\]);  
    }  
    modelBussiness.mouseInCurrentObj = \_obj;  
    WT3DObj.commonFunc.setSkinColorByObj(\_obj, 0x00ffff);  
    modelBussiness.commonFunc.showDevMsg(\_obj, { x: \_obj.position.x, y: \_obj.position.y + 500, z: \_obj.position.z },  
        function () {  
            WT3DObj.commonFunc.setSkinColorByObj(\_obj, 0x000000);  
        });  
} else if ((\_obj.name.indexOf("sq\_qiang\_") >= 0 || \_obj.name.indexOf("sq\_chuang\_") >= 0) && modelBussiness.hasShowfloors) {  
    var currentFloor=\_obj.name.replace("sq\_qiang\_","").replace("sq\_chuang\_","");  
    if (currentFloor != "3" && currentFloor != "1" && currentFloor != "4" && currentFloor != "6") {  
        modelBussiness.mouseInCurrentObj = \_obj;  
       // WT3DObj.commonFunc.setSkinColorByObj(\_obj, 0x0d8df5);  
        WT3DObj.commonFunc.changeObjsOpacity(\[\_obj\], 0.2, 1, 10, function () {  
        });  
    }  
    modelBussiness.commonFunc.showFloorMsg(\_obj, { x: \_obj.position.x, y: \_obj.position.y+ 5, z: \_obj.position.z + 50 });  
}  

}

7、显示机柜利用率概览

//=======================================================利用率=======================================================
ModelBussiness.prototype.rateSpaceState = 0;
ModelBussiness.prototype.rateSpaceCubes = [];
ModelBussiness.prototype.rateSpaceCubeNames = [];
ModelBussiness.prototype.showSpaceRate = function () {
var _this = this;
if (_this.rateSpaceState == 0) {
_this.rateSpaceState = 1;
$("#backBtn").fadeIn();

    layer.closeAll();  
    layer.msg(' <img src="../img/loading.gif" style="width:100px;height:100px" />', {  
        skin: 'loadingLayer',  
        shade: 0.2, time: 0, area: \["200px", "200px"\]  
    });  
    //layer.load();  
    $("#toolbar").toggleClass('active')  
    //隐藏所有机柜  
    \_this.hideAllCabinet("", function () {  
        layer.msg(' <img src="../img/loading.gif" style="width:100px;height:100px" />', {  
            skin: 'loadingLayer',  
            shade: 0.2, time: 0, area: \["200px", "200px"\]  
        });  
        //layer.load();  
        webapi.getRacksUsedRateValue(function (result) {  
            var rackRate = {};  
            $.each(result, function (\_reindex, \_reobj) {  
                rackRate\["d\_" + \_reobj.id\] = \_reobj;  
            });  
            var racks = getRacksConfig();  
            if (\_this.rateSpaceCubeNames.length <= 0) {  
                $.each(racks, function (\_rindex, \_robj) {  
                    var \_name = \_robj.name;  
                    var rateValue = 0;  
                    if (rackRate\["d\_" + \_robj.dataId\]) {  
                        rateValue = rackRate\["d\_" + \_robj.dataId\].useRate;  
                    }  
                    var itcobj = WT3DObj.commonFunc.findObject(\_name);  
                    if (itcobj) {  
                        \_this.commonFunc.createRateCube(\_name,  
                            { x: 300, y: 900, z: 220 },  
                            { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },  
                            { x: 0, y: itcobj.rotation.y + Math.PI/2, z: 0 },  
                            rateValue,{ timelong: 1000 });  
                    }  
                });  
                setTimeout(function () {  
                    layer.closeAll();  
                },3000);  
            }  
            else {  
                $.each(racks, function (\_rindex, \_robj) {  
                    var \_name = \_robj.name;  
                    var rateValue = 0;  
                    if (rackRate\["d\_" + \_robj.dataId\]) {  
                        rateValue = rackRate\["d\_" + \_robj.dataId\].useRate;  
                    }  
                    var itcobj = WT3DObj.commonFunc.findObject(\_name);  
                    if (itcobj) {  
                        \_this.commonFunc.createRateCube(\_name,  
                            { x: 300, y: 900, z: 220 },  
                            { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },  
                            { x: 0, y: itcobj.rotation.y + Math.PI/2, z: 0 },  
                            rateValue, { timelong: 1000 });  
                    }

                });

                setTimeout(function () {  
                    layer.closeAll();  
                }, 1000);  
            }  
        });  
    });  
}  
else {  
    \_this.hideSpaceRate();  
    if (\_this.needHideCabinets.length > 0) {  
        WT3DObj.commonFunc.changeCameraPosition(roomConfig.cameraPostion, roomConfig.cameraTarget, 1000, function () {  
            $.each(\_this.needHideCabinets, function (\_index, \_obj) {  
                if (\_obj.name.indexOf("\_rate\_") < 0 && \_obj.name.indexOf("\_yearCube\_") < 0) {  
                    \_obj.visible = true;  
                }  
            });  
        });  
    }  
}  

}
ModelBussiness.prototype.hideSpaceRate = function () {
modelBussiness.rateSpaceState = 0;
modelBussiness.currentState = 0;
if (modelBussiness.rateSpaceCubes && modelBussiness.rateSpaceCubes.length > 0) {
$.each(modelBussiness.rateSpaceCubes, function (_index, _obj) {
_obj.visible = false;
if (!_obj.oldPositionY ){
_obj.oldPositionY = _obj.position.y;
}
_obj.position.y += 1000000;
});
}
}

8、显示u位使用情况概览，了解每个机柜的服务器状态，通过不通颜色区分服务器的当前状态，以及机柜内的空闲情况

//=======================================================U位=======================================================
ModelBussiness.prototype.agesSpaceState = 0;
ModelBussiness.prototype.agesSpaceCubes = [];
ModelBussiness.prototype.agesSpaceCubeNames = [];
ModelBussiness.prototype.showUsageMap = function () {
var _this = this;
var cabs = getRacksConfig();

if (\_this.agesSpaceState == 0) {  
    \_this.agesSpaceState = 1;  
    $("#backBtn").fadeIn();  
    layer.closeAll();  
    layer.msg(' <img src="../img/loading.gif" style="width:100px;height:100px" />', {  
        skin: 'loadingLayer',  
        shade: 0.2, time: 0, area: \["200px", "200px"\]  
    });  
    //layer.load();  
    $("#toolbar").toggleClass('active')  
    //隐藏所有  
    \_this.hideAllCabinet("aaaa", function () {  
        layer.msg(' <img src="../img/loading.gif" style="width:100px;height:100px" />', {  
            skin: 'loadingLayer',  
            shade: 0.2, time: 0, area: \["200px", "200px"\]  
        });  
        //layer.load();  
        webapi.getUDetailInfos(null, function () {  
            if (\_this.agesSpaceCubeNames.length <= 0) {  
                for (var i = 0; i < cabs.length; i++) {  
                    var \_objModel = WT3DObj.commonFunc.findObject(cabs\[i\].name);  
                    if (\_objModel) {

                    var servers = webapi.CabInfosCache.Dataobjs\["d\_" + cabs\[i\].dataId\].children;  
                    var rateValue = Math.random();  
                    var ageValue = \[\];  
                    if (servers&&servers.length>0){  
                        $.each(servers, function (\_si,\_sobj) {  
                            ageValue.push({  
                                value:\_sobj.lastTemperature,  
                                max: \_sobj.uEnd,  
                                min:\_sobj.uStart  
                            });  
                        })  
                    }  
                    var style = {  
                        borderColor: 0x444444,  
                        outColor: 0xffffff,  
                        outOprity: 0.1  
                    };  
                    \_this.commonFunc.createUseageCube(cabs\[i\].name,  
                        { x: 300, y: 900, z: 220 },  
                        { x: \_objModel.position.x, y: \_objModel.position.y, z: \_objModel.position.z },  
                        { x: 0, y: \_objModel.rotation.y + Math.PI/2, z: 0 },  
                        ageValue,  
                        style, { timelong: 1000 }, i);  
                    }  
                }  
                setTimeout(function () {  
                    layer.msg(' <img src="../img/loading.gif" style="width:100px;height:100px" />', {  
                        skin: 'loadingLayer',  
                        shade: 0.2, time: 0, area: \["200px", "200px"\]  
                    });  
                    //layer.load();  
                        $.each(WT3DObj.scene.children, function (\_oindex, \_oobj) {  
                        if (\_oobj.name.indexOf("\_yearCube\_outCubeBorder") >= 0) {  
                            \_oobj.visible = true;  
                        }  
                        });  
                    setTimeout(function () {  
                        layer.msg(' <img src="../img/loading.gif" style="width:100px;height:100px" />', {  
                            skin: 'loadingLayer',  
                            shade: 0.2, time: 0, area: \["200px", "200px"\]  
                        });  
                        //layer.load();  
                    $.each(WT3DObj.scene.children, function (\_oindex, \_oobj) {  
                                if (\_oobj.name.indexOf("\_yearCube\_innerCube\_") >= 0) {  
                                    \_oobj.visible = true;  
                                }  
                            });  
                        layer.closeAll();  
                    },3000);  
                }, 8000);

            }  
            else {  
                for (var i = 0; i < cabs.length; i++) {  
                    var ageValue = \[\];  
                    var style = {  
                        borderColor: 0xffffff,  
                        outColor: 0xffffff,  
                        outOprity: 0.1  
                    };  
                    var \_objModel = WT3DObj.commonFunc.findObject(cabs\[i\].name);  
                    if (\_objModel) {

                    \_this.commonFunc.createUseageCube(cabs\[i\].name,  
                        { x: 300, y: 900, z: 220 },  
                        { x: \_objModel.position.x, y: \_objModel.position.y + Math.PI/2, z: \_objModel.position.z },  
                        { x: 0, y: \_objModel.rotation.y, z: 0 },  
                        ageValue,  
                        style, { timelong: 1000 }, i);  
                    }  
                }  
            }  
            setTimeout(function () {  
                layer.closeAll();

            },5000)  
        });

    });

} else {  
    this.hideUsageSpaceRate();  
    if (\_this.needHideCabinets.length > 0) {  
        WT3DObj.commonFunc.changeCameraPosition(roomConfig.cameraPostion, roomConfig.cameraTarget, 1000, function () {  
            $.each(\_this.needHideCabinets, function (\_index, \_obj) {  
                if (\_obj.name.indexOf("\_rate\_") < 0 && \_obj.name.indexOf("\_yearCube\_") < 0) {  
                    \_obj.visible = true;  
                }  
            });  
        });  
    }  
}  

}
ModelBussiness.prototype.hideUsageSpaceRate = function () {
modelBussiness.currentState = 0;
modelBussiness.agesSpaceState = 0;
if (modelBussiness.agesSpaceCubes && modelBussiness.agesSpaceCubes.length > 0) {
$.each(modelBussiness.agesSpaceCubes, function (_index, _obj) {
_obj.visible = false;
});
}
}

9、通过机柜柱状图形式，展现机柜的承重，配电情况。

代码如下：

//=======================================================承重=======================================================
ModelBussiness.prototype.BearingState = 0;
ModelBussiness.prototype.BearingCubes = [];
ModelBussiness.prototype.BearingCubeNames = [];
ModelBussiness.prototype.showBearing = function () {
var _this = this;
var cabs = getRacksConfig();
if (_this.BearingState == 0) {
_this.BearingState = 1;
$("#backBtn").fadeIn();
layer.closeAll();
layer.msg(' ', {
skin: 'loadingLayer',
shade: 0.2, time: 0, area: ["200px", "200px"]
});
//layer.load();
$("#toolbar").toggleClass('active')
//隐藏所有
_this.hideAllCabinet("aaaa", function () {
layer.msg(' ', {
skin: 'loadingLayer',
shade: 0.2, time: 0, area: ["200px", "200px"]
});
//layer.load();
webapi.getRacksBearingValue(function (result) {
var bearingRate = {};
$.each(result, function (_reindex, _reobj) {
bearingRate["d_" + _reobj.cabid] = _reobj;
});

        var style = {  
                borderColor: 0xffffff,  
                innerColor: 0x6495ed,  
                innerOprity: 1,  
                outColor: 0xffffff,  
                outOprity: 0.1  
            };  
        if (\_this.BearingCubeNames.length <= 0) {  
            for (var i = 0; i <cabs.length; i++) {  
                var bearingValue = 0;  
                    var \_objModel = WT3DObj.commonFunc.findObject(cabs\[i\].name);  
                    if (\_objModel) {  
                        if (bearingRate\["d\_" + cabs\[i\].dataId\]) {  
                            bearingValue = bearingRate\["d\_" + cabs\[i\].dataId\].bearingRate;  
                        }

                        if (bearingValue > 0.90) {  
                            style.innerColor = 0xff0000;  
                        } else if (bearingValue > 0.70) {  
                            style.innerColor = 0xffa500;  
                        } else if (bearingValue > 0.50) {  
                            style.innerColor = 0xffff00;  
                        } else {  
                            style.innerColor = 0x6495ed;

                        }  
                        if (cabs\[i\]) {  
                            \_this.commonFunc.createBearing(cabs\[i\].name,  
                                { x: 300, y: 900, z: 220 },  
                                { x: \_objModel.position.x, y: \_objModel.position.y, z: \_objModel.position.z },  
                                { x: 0, y: \_objModel.rotation.y + Math.PI/2, z: 0 },  
                                bearingValue,  
                                style, { timelong: 1000 });  
                        }  
                    }  
            }  
            setTimeout(function () {  
                layer.closeAll();  
            }, 3000);  
        }  
        else {  
            for (var i = 0; i <= cabs.length; i++) {  
                var bearingValue = 0;  
                var \_objModel = WT3DObj.commonFunc.findObject(cabs\[i\].name);  
                if (\_objModel) {  
                    if (bearingRate\["d\_" + cabs\[i\].dataId\]) {  
                        bearingValue = bearingRate\["d\_" + cabs\[i\].dataId\].bearingRate;  
                    }  
                    if (bearingValue > 0.90) {  
                        style.innerColor = 0xff0000;  
                    } else if (bearingValue > 0.70) {  
                        style.innerColor = 0xffa500;  
                    } else if (bearingValue > 0.50) {  
                        style.innerColor = 0xffff00;  
                    } else {  
                        style.innerColor = 0x6495ed;

                    }  
                    if (cabs\[i\]) {  
                        \_this.commonFunc.createBearing(cabs\[i\].name,  
                            { x: 300, y: 900, z: 220 },  
                            { x: \_objModel.position.x, y: \_objModel.position.y + Math.PI/2, z: \_objModel.position.z },  
                            { x: 0, y: \_objModel.rotation.y, z: 0 },  
                            bearingValue,  
                            style, { timelong: 1000 });  
                    }  
                }  
            }

            setTimeout(function () {  
                layer.closeAll();  
            }, 2000);  
        }

        });

    });  
}  
else {  
    \_this.hideBearing();  
    if (\_this.needHideCabinets.length > 0) {  
        WT3DObj.commonFunc.changeCameraPosition(roomConfig.cameraPostion, roomConfig.cameraTarget, 1000, function () {  
            $.each(\_this.needHideCabinets, function (\_index, \_obj) {  
                if (\_obj.name.indexOf("\_bearing\_") < 0 && \_obj.name.indexOf("\_yearCube\_") < 0) {  
                    \_obj.visible = true;  
                }  
            });  
        });  
    }  
}  

}
ModelBussiness.prototype.hideBearing = function () {
modelBussiness.currentState =0;
modelBussiness.BearingState = 0;
if (modelBussiness.BearingCubes && modelBussiness.BearingCubes.length > 0) {
$.each(modelBussiness.BearingCubes, function (_index, _obj) {
if (!_obj.oldPositionY) {
_obj.oldPositionY = _obj.position.y;
}
_obj.position.y = 100000;
_obj.visible = false;
});
}
}

10、楼层内服务器间的管线关联情况，我采用逻辑线路方案，通过逻辑展现的方式，展现两个服务器间的连线信息。

实现方式如下：

//=======================================================管线管理=======================================================
ModelBussiness.prototype.ShowLineManage = function (linkData) {
console.log(linkData);
var _this = this;
var startCab = "";
var endCab = "";
var startU = 0;
var startUL =0;
var endu = 0;
var endUL = 0;
var startServerID = "";
var endServerID = "";
if (_this.showLineState==1) {
layer.msg("配线计算中，请稍后");
return;
}
_this.showLineState = 1;
if (linkData && linkData.path) {
startCab = "rack_" + linkData.path[0].cabid;
startU = linkData.path[0].uStart;
startUL = linkData.path[0].uEnd - linkData.path[0].uStart + 1;
startServerID = linkData.path[0].serverId;

    endCab = "rack\_" + linkData.path\[1\].cabid;  
    endu = linkData.path\[1\].uStart;  
    endUL = linkData.path\[1\].uEnd - linkData.path\[1\].uStart + 1;  
    endServerID = linkData.path\[1\].serverId;  
}

\_this.CloseLineManage(function ()  
{  
    \_this.showLineState = 1;  
    var startCabobj = WT3DObj.commonFunc.findObject(startCab);  
    var endCabobj = WT3DObj.commonFunc.findObject(endCab);  
    if (!startCabobj) {  
        return;  
    }  
    if (!endCabobj) {  
        return;  
    }  
    \_this.currentStartCabName = startCab;  
    \_this.currentEndCabName = endCab;  
    \_this.currentStartSeverId = startServerID;  
    \_this.currentEndSeverId = endServerID;  
    var hideobj = \[\];  
    if(\_this.ShowLineNeedHide.length <= 0) {  
        $.each(WT3DObj.objects, function (\_index, \_obj) {  
            if (\_obj.name.indexOf(modelBussiness.roomName + "\_cab\_") < 0 || \_obj.name.indexOf("\_sGroup") > 0) {  
                \_this.ShowLineNeedHide.push(\_obj);  
            }  
        });  
    }  
    var caby = startCabobj.geometry.parameters.height;  
    var cabx = startCabobj.geometry.parameters.width;  
    var cabz = startCabobj.geometry.parameters.depth;  
    modelBussiness.commonFunc.createTempServetrCube(startCabobj, { x: cabx, y: caby, z: cabz }, startCabobj.position, startCabobj.rotation, startU, startU + startUL - 1,startServerID,true);  
    modelBussiness.commonFunc.createTempServetrCube(endCabobj, { x: cabx, y: caby, z: cabz }, endCabobj.position, endCabobj.rotation, endu, endu + endUL - 1, endServerID, (startCabobj.name !== endCabobj.name));  
    WT3DObj.commonFunc.changeObjsOpacity(\_this.ShowLineNeedHide, 1, 0.2, 1000, function () {  
    //创建连线  
     var points = modelBussiness.commonFunc.createLine(startCabobj, startU, endCabobj, endu);  
     modelBussiness.commonFunc.createLightPoint(points);  
     var startPoint2 = points\[2\];  
     var endPoint2 = points\[points.length - 3\];  
     var cPosition = {  
         x: (startPoint2.x + endPoint2.x) / 2+100,  
         y: (startPoint2.y == endPoint2.y ? ((startPoint2.y + endPoint2.y) / 2 +500) : ((startPoint2.y + endPoint2.y) / 2 + 700)),  
         z: (endPoint2.z - 2000)  
     };  
     var tPosition = {  
         x: (startPoint2.x + endPoint2.x) / 2,  
         y: (startPoint2.y == endPoint2.y ? ((startPoint2.y + endPoint2.y) / 2 - 300) : ((startPoint2.y + endPoint2.y) / 2+200)),  
         z: (startPoint2.z + endPoint2.z) / 2  
     };

     WT3DObj.commonFunc.changeCameraPosition(cPosition, tPosition, 1000, function () {

         setTimeout(function () {  
             modelBussiness.showLineState = 0;  
             var screenPostion = WT3DObj.commonFunc.transToScreenCoord(startPoint2);  
             $(".linePont").remove();  
             $("body").append("<div id='startPointDiv' data-positionX='" + startPoint2.x + "' data-positionY='" + startPoint2.y + "' data-positionZ='" + startPoint2.z + "' data-positionleft='-45'  data-positiontop='-130' class='linePont' style='left:" + (screenPostion.x - 45) + "px;top:" + (screenPostion.y - 130) + "px;z-index:100000;'>机柜：<font>" + linkData.path\[0\].cabName + "</font></br>" +  
                 "服务器：<font>" + linkData.path\[0\].serverName + "</font></br>" +  
                 "端口：<font>" + linkData.path\[0\].portName + "</font></br>" +  
                 "上行：<font>256kb</font></br>" +  
                 "下行：<font>330kb</font></br>" +  
                "</div>");

             var screenPostion2 = WT3DObj.commonFunc.transToScreenCoord(endPoint2);  
             $("body").append("<div id='endPointDiv' data-positionX='" + endPoint2.x + "' data-positionY='" + endPoint2.y + "' data-positionZ='" + endPoint2.z + "' data-positionleft='-45'  data-positiontop='-130'  class='linePont lend' style='left:" + (screenPostion2.x - 45) + "px;top:" + (screenPostion2.y - 130) + "px;z-index:100000;'>机柜：<font>" + linkData.path\[1\].cabName + "</font></br>" +  
                 "服务器：<font>" + linkData.path\[1\].serverName + "</font></br>" +  
                 "端口：<font>" + linkData.path\[1\].portName + "</font></br>" +  
                 "上行：<font>256kb</font></br>" +  
                 "下行：<font>330kb</font></br>" +  
                "</div>");  
             if (modelBussiness.moveDivIds.indexOf("startPointDiv") < 0) {  
                 modelBussiness.moveDivIds.push("startPointDiv");  
             }  
             if (modelBussiness.moveDivIds.indexOf("endPointDiv") < 0) {  
                 modelBussiness.moveDivIds.push("endPointDiv");  
             }  
         }, 200);  
     });

});  
}  

);
}
ModelBussiness.prototype.CloseLineManage = function (callBack) {
var _this = this;
{

WT3DObj.destoryObj("flowtube\_current");  
WT3DObj.destoryObj(\_this.currentStartCabName + "\_" + \_this.currentStartSeverId + "\_TempCube\_outCube");  
WT3DObj.destoryObj(\_this.currentStartCabName + "\_" + \_this.currentStartSeverId + "\_TempCube\_innerCube\_0");  
WT3DObj.destoryObj(\_this.currentEndCabName + "\_" + \_this.currentEndSeverId + "\_TempCube\_outCube");  
WT3DObj.destoryObj(\_this.currentEndCabName + "\_" + \_this.currentEndSeverId + "\_TempCube\_innerCube\_0");  
$("#startPointDiv").remove();  
$("#endPointDiv").remove();  
if (\_this.ShowLineNeedHide.length > 0) {  
    WT3DObj.commonFunc.changeObjsOpacity(\_this.ShowLineNeedHide, 0.2, 1, 500, function () {  
        \_this.showLineState = 0;  
        if (callBack) {  
            callBack();  
        }  
    });  
} else {  
    \_this.showLineState = 0;  
    if (callBack) {  
        callBack();  
    }  
}  
}  

}

11、展现链接的详细端子信息。

{

    if (!(\_obj.name.indexOf("odf") >= 0)) {  
        $("#serverInfo\_1").show();  
        $("#serverInfo\_2").show();  
        $("#serverInfo\_3").show();  
        $("#serverInfo\_4").show();  
        $("#toolbar").hide()  
        $("#btn1").hide()  
        echartsBoxData();  
        echartsBoxTwoData();  
        echartsBoxThreeData();  
  //FunGetDateStr();  
   }

    new TWEEN.Tween(WT3DObj.controls.target).to({  
        x:\_obj.position.x,  
        y:\_obj.position.y,  
        z: \_obj.position.z  
    }, 500).onComplete(function () {  
        var fore = true;  
        var cpz = \_obj.position.z +300;  
        if (WT3DObj.camera.position.z < \_obj.position.z) {  
            cpz = \_obj.position.z-300;  
            fore = false;  
        }  
        new TWEEN.Tween(WT3DObj.camera.position).to({  
            x: \_obj.position.x,  
            y: \_obj.position.y,  
            z: cpz  
        }, 500).onComplete(function () {  
            setTimeout(function () {  
                var caby = \_obj.geometry.parameters.height;  
                var cabx = \_obj.geometry.parameters.width;  
                var cabz = \_obj.geometry.parameters.depth;

                if (\_obj.name.indexOf("\_LightCubeBorderLight") < 0) {  
                    caby += 4;  
                    cabx += 4;  
                    cabz += 4;  
                }  
                var screenPostion\_start = WT3DObj.commonFunc.transToScreenCoord({  
                    x: \_obj.position.x - cabz / 2,  
                    y: \_obj.position.y + caby/2,  
                    z: \_obj.position.z + (fore ? (cabx / 2) : (-cabx / 2)),  
                });  
                var screenPostion\_end = WT3DObj.commonFunc.transToScreenCoord({  
                    x: \_obj.position.x + cabz / 2,  
                    y: \_obj.position.y- caby / 2,  
                    z: \_obj.position.z + (fore ? (cabx / 2) : (-cabx / 2)),  
                });  
                var \_width = Math.abs(screenPostion\_end.x - screenPostion\_start.x)-20;  
                var \_height = Math.abs(screenPostion\_end.y - screenPostion\_start.y)-20;  
                layer.closeAll();  
                console.log(\_width);  
                console.log(\_height);  
                var stype = "";  
                var portSDInterval = null;  
                var tabshtml = "";  
                if (\_obj.name.indexOf("odf") >= 0) {  
                    stype = "odf";  
                    for (var i = 0; i < 6; i++) {  
                        var topValues = \[9, 25, 41, 57, 73, 88\]  
                        var chtml = ''  
                        for (var j = 1; j <= 13; j++) {  
                            chtml = chtml.replace('id="' + j + '"', ' id="server\_port\_' + (\_obj.name + '\_d\_' + i + '\_' + j) + '" ');  
                            // tabshtml += "<div class='dz\_info' id='server\_port\_" + (\_obj.name + "\_d\_" + i + "\_" + j) + "'></div>";  
                        }  
                        tabshtml += chtml;  
                    }  
                }

                else if (\_obj.name.indexOf("\_LJH") >= 0) {  
                    stype = "jhj";  
                    tabshtml = "";  
                    for (var i = 0; i < 4; i++) {  
                        var topValues = \[19, 33, 63, 81\]  
                        var chtml = ''

                            for (var j =1; j <= 24; j++) {  
                                chtml = chtml.replace('id="' + j + '"', ' id="server\_port\_' + (\_obj.name + '\_d\_' + i + '\_' + j) + '" ');  
                               // tabshtml += "<div class='dz\_info' id='server\_port\_" + (\_obj.name + "\_d\_" + i + "\_" + j) + "' style='position:absolute;border: 1px solid rgba(0,0,0,0);width:2%;height: 15%;left: 9%;top: 15%;'></div>";  
                            }  
                            tabshtml += chtml;  
                        }

                } else {  
                    stype = "fwq";  
                    //服务器  
                    tabshtml = '';  
                        for (var i = 1; i <= 13;i++){  
                            tabshtml = tabshtml.replace('id="' + i + '"', ' id="server\_port\_' + (\_obj.name + '\_d\_1\_' + i) + '" ');  
                        }  
                        //tabshtml = "<div style=' float:left;width:"+\_width+"px;height:"+(\_height-30)+"px'></div>";  
                        //for (var i = 0; i <1; i++) {  
                        //    for (var j = 0; j < 16; j++) {  
                        //        tabshtml += "<div class='dz\_info' id='server\_port\_" + (\_obj.name + "\_d\_" + i + "\_" + j) + "'></div>";  
                        //    }  
                        //}  
                 }  
                layer.open({  
                    title: false,  
                    shade: 0.01,  
                    area: \[(\_width) + 'px', (\_height) + 'px'\],  
                    offset: \[($(window).height() - \_height) / 2 + "px", ($(window).width() - \_width) / 2 + "px"\], //右下角弹出  
                    shadeClose: true, //开启遮罩关闭  
                    skin: 'severClassPanel',//自定义class名称  
                    btn: false, closeBtn: 0,  
                    content: "<div style='width:" + \_width + "px;height:" + \_height + "px;background-color:rgba(0,0,0,0);'>" + tabshtml + "</div>",  
                    end: function () {  
                        if (portSDInterval) {  
                            clearInterval(portSDInterval);  
                        }  
                        modelBussiness.currentState = 1;  
                        modelBussiness.backShowSingleServer();  
                        $("#serverInfo\_1").hide();  
                        $("#serverInfo\_2").hide();  
                        $("#serverInfo\_3").hide();  
                        $("#serverInfo\_4").hide();  
                        if (closeShowServerCallBack) {  
                            closeShowServerCallBack();  
                        }  
                    },  
                    cancel: function () {  
                        if (portSDInterval) {  
                            clearInterval(portSDInterval);  
                        }  
                        modelBussiness.currentState = 1;  
                        modelBussiness.backShowSingleServer();  
                        $("#serverInfo\_1").hide();  
                        $("#serverInfo\_2").hide();  
                        $("#serverInfo\_3").hide();  
                        $("#serverInfo\_4").hide();  
                        if (closeShowServerCallBack) {  
                            closeShowServerCallBack();  
                        }  
                    }  
                    ,  
                    success: function () {

                        $("div\[id^='server\_port\_'\]").mouseover(function () {  
                            $(".dz\_info").css("background", "rgba(20, 220, 212, 0)");  
                            $(this).css("background", "rgba(20, 220, 212, 0.57)");

                            var portid = $(this).attr("id");  
                            var name = '';  
                            var html = '';  
                            var height = '130px';  
                            if (portid && portid.indexOf('odf') > -1) {  
                                name = 'ODF'  
                                html = '端口: 1号楼3层西北IDC机房\_01\_0717\_ODF/A/7/001/' + portid.split("\_d\_0\_")\[1\] + "</br>";  
                                html += name + ':  1号楼3层西北IDC机房\_01\_07'  
                                + portid.split("\_d\_")\[0\].split("\_Server\_")\[0\].replace("ethserver\_port\_", "") + '</br>' + '/A/7/' + portid.split("\_d\_")\[0\].split("\_Server\_")\[1\].split("\_")\[0\] + "</br>";  
                                html += '机柜: ZY01FR01C01'  
                                    + portid.split("\_d\_")\[0\].split("\_Server\_")\[0\].replace("ethserver\_port\_", "");  
                            } else {  
                                height = '310px';  
                                name = '服务器'  
                                html = '<div class="serverMain">'  
                                + '<div class="serverMainTop">本端端口信息</div>'  
                                + '<div class="serverMainText"><span>端口名称：</span><span>419183543-eth' + portid.split("\_d\_1\_")\[1\] + '</span></div>'  
                                + '<div class="serverMainText"><span>设备名称：</span><span>数据接入服务器1</span></div>'  
                                + '<div class="serverMainText"><span>机柜名称：</span><span>ZY01FR01C01</span></div>'  
                                + '<div class="serverMainTop">对端端口信息</div>'  
                                + '<div class="serverMainText"><span>端口名称：</span><span>417458350-' + (14 + Number(portid.split("\_d\_1\_")\[1\])) + '口</span></div>'  
                                + '<div class="serverMainText"><span>设备名称：</span><span>业务交换机3</span></div>'  
                                + '<div class="serverMainText"><span>机柜名称：</span><span>ZY01FR02C01</span></div>'  
                                + '<div class="serverMainBtn" ><span onclick="pageindex.showLineByPort(\\'L\_91\\')">连接</span></div>'  
                                + '</div>'  
                                // '端口: 1号楼3层西北IDC机房\_01\_07'  + portid.split("\_d\_")\[0\].split("\_Server\_")\[0\].replace("ethserver\_port\_", "")  
                                //     + '/A/7/' + portid.split("\_d\_")\[0\].split("\_Server\_")\[1\].split("\_")\[0\] +'/' + portid.split("\_d\_")\[1\] + "</br>";  
                            }

                            // html += name+':  1号楼3层西北IDC机房\_01\_07'  
                            //     + portid.split("\_d\_")\[0\].split("\_Server\_")\[0\].replace("ethserver\_port\_", "") +'</br>'+ '/A/7/' + portid.split("\_d\_")\[0\].split("\_Server\_")\[1\].split("\_")\[0\] + "</br>";  
                            // html += '机柜: ZY01FR01C01'  
                            //     + portid.split("\_d\_")\[0\].split("\_Server\_")\[0\].replace("ethserver\_port\_", "");  
                            layer.tips(html, '#' + portid, {  
                                tips: \[1, '#3595CC'\],  
                                area:\['340px',height\],  
                                time: 0,  
                                skin: 'duanKouClass' ,//自定义class名称  
                                success: function (layero, index) {  
                                    var oldLeft = layero.css("left");  
                                    oldLeft = oldLeft.substring(0,oldLeft.indexOf('px'));  
                                    layero.css("left", (oldLeft-10)+'px');  
                                }  
                            });  
                        });  
                        if (dbClickSerVerCallBack) {  
                            dbClickSerVerCallBack(\_obj.name);  
                        }  
                        console.log(stype);  
                        if (stype == "odf") {  
                            portSDInterval = setInterval(function () {  
                                var MathCounts = \[parseInt(Math.random() \* 21) + 1, parseInt(Math.random() \* 21) + 1, parseInt(Math.random() \* 21) + 1, parseInt(Math.random() \* 21) + 1, parseInt(Math.random() \* 21) + 1, parseInt(Math.random() \* 21) + 1, parseInt(Math.random() \* 21) + 1, parseInt(Math.random() \* 21) + 1, parseInt(Math.random() \* 21) + 1, parseInt(Math.random() \* 21) + 1, parseInt(Math.random() \* 21) + 1, parseInt(Math.random() \* 21) + 1\]  
                                for (var i = 0; i < 6; i++) {  
                                    for (var j = 0; j < MathCounts.length; j++) {  
                                        $("#server\_port\_" + (\_obj.name + '\_d\_' + i + '\_' + MathCounts\[j\])).css("background", Math.random() > 0.5 ? "rgba(0,0,0,0)" : "rgba(31, 247, 7, 0.81)")  
                                    }  
                                }  
                                setTimeout(function () {  
                                    for (var i = 0; i < 6; i++) {  
                                        for (var j = 0; j < MathCounts.length; j++) {  
                                            $("#server\_port\_" + (\_obj.name + '\_d\_' + i + '\_' + MathCounts\[j\])).css("background", Math.random() > 0.5 ? "rgba(0,0,0,0)" : "rgba(31, 247, 7, 0.81)")  
                                        }  
                                    }  
                                }, 200);  
                            }, 400);

                        } else  
                            if (stype == "jhj") {  
                                portSDInterval = setInterval(function () {  
                                    var MathCounts = \[parseInt(Math.random() \* 21) + 3, parseInt(Math.random() \* 21) + 3, parseInt(Math.random() \* 21) + 3, parseInt(Math.random() \* 21) + 3, parseInt(Math.random() \* 21) + 3, parseInt(Math.random() \* 21) + 3, parseInt(Math.random() \* 21) + 3, parseInt(Math.random() \* 21) + 3, parseInt(Math.random() \* 21) + 3, parseInt(Math.random() \* 21) + 3, parseInt(Math.random() \* 21) + 3, parseInt(Math.random() \* 21) + 3\]  
                                    for (var i = 0; i < 4; i++) {  
                                        for (var j = 0; j < MathCounts.length; j++) {  
                                            $("#server\_port\_" + (\_obj.name + '\_d\_' + i + '\_' + MathCounts\[j\])).css("background", Math.random() > 0.5 ? "rgba(0,0,0,0)" : "rgba(31, 247, 7, 0.81)")  
                                        }  
                                    }  
                                    setTimeout(function () {  
                                        for (var i = 0; i < 4; i++) {  
                                            for (var j = 0; j < MathCounts.length; j++) {  
                                                $("#server\_port\_" + (\_obj.name + '\_d\_' + i + '\_' + MathCounts\[j\])).css("background", Math.random() > 0.5 ? "rgba(0,0,0,0)" : "rgba(31, 247, 7, 0.81)")  
                                            }  
                                        }  
                                    }, 200);  
                                }, 400);

                            } else {  
                                portSDInterval = setInterval(function () {  
                                    var MathCounts = \[parseInt(Math.random() \* 11) + 1, parseInt(Math.random() \* 11) + 1, parseInt(Math.random() \* 11) + 1, parseInt(Math.random() \* 11) + 1, parseInt(Math.random() \* 11) + 1, parseInt(Math.random() \* 11) + 1, parseInt(Math.random() \* 11) + 1\]  
                                    for (var i = 1; i < 2; i++) {  
                                        for (var j = 0; j < MathCounts.length; j++) {  
                                            $("#server\_port\_" + (\_obj.name + '\_d\_' + i + '\_' + MathCounts\[j\])).css("background", Math.random() > 0.5 ? "rgba(0,0,0,0)" : "rgba(31, 247, 7, 0.81)")  
                                        }  
                                    }  
                                    setTimeout(function () {  
                                        for (var i = 1; i < 2; i++) {  
                                            for (var j = 0; j < MathCounts.length; j++) {  
                                                $("#server\_port\_" + (\_obj.name + '\_d\_' + i + '\_' + MathCounts\[j\])).css("background", Math.random() > 0.5 ? "rgba(0,0,0,0)" : "rgba(31, 247, 7, 0.81)")  
                                            }  
                                        }  
                                    }, 200);  
                                }, 400);

                            }  
                    }  
                });  
             },800);  
           }).start();  
      }).start();  
}

技术交流 1203193731@qq.com

交流微信：

　　　　

如果你有什么要交流的心得 可邮件我

其它相关文章：

使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)

如何用webgl(three.js)搭建一个3D库房-第一课

如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课

使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课

如何用webgl(three.js)搭建不规则建筑模型，客流量热力图模拟

使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课（炫酷版一）

使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课