欢迎光临
我的个人博客网站

如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

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

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

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

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

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

如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

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

实现代码如下:

//双击选中机柜 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、显示楼层间管线,并且显示管线信息

 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

 实现代码如下:

// 点击显示光缆 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、楼层内搜索光缆走向,并显示主要接入设备的信息。

 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

 实现代码如下:

 $('.searchBtnSou').click(function () {     //光缆--接口数据展示     var keyWord=$("#searchIpt").val()     var emptyStr="<span style=' font-size: 16px;color: #ffbe00;margin-top:50px;'>查无结果!</span>";     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、搜索楼层间电路信息

 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

 实现代码如下:

 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机房,会涉及到很多用户租用机柜的情况,这时候就需要能够清晰的看到各个客户租用的机柜概况,

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

 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

实现代码如下:

//根据客户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、楼层内统一包括常规的机柜管理数据,机柜信息展示等

 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

划入机柜,光缆等代码如下:

//鼠标滑入回调 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、显示机柜利用率概览

 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

//=======================================================利用率======================================================= 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位使用情况概览,了解每个机柜的服务器状态,通过不通颜色区分服务器的当前状态,以及机柜内的空闲情况

 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

//=======================================================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、通过机柜柱状图形式,展现机柜的承重,配电情况。

 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

代码如下:

//=======================================================承重======================================================= 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(' <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.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、楼层内服务器间的管线关联情况,我采用逻辑线路方案,通过逻辑展现的方式,展现两个服务器间的连线信息。

 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

实现方式如下:

//=======================================================管线管理======================================================= 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、展现链接的详细端子信息。

 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

 {          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

交流微信:

    如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

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

 

其它相关文章:

使用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管理系统——第六课

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏