您的位置:首页 > Web前端 > JavaScript

使用webgl(three.js)创建自动化抽象化3D机房,3D机房模块详细介绍(抽象版一)

2021-06-18 17:57 471 查看

目前市面上有两种机房 一种是普通机房 一种是由微模块组成的机房,本文主要介绍普通机房的抽象化体现模式。

抽象机房模式机房展示过程中,我们需要对机房进行建模,当遇到大量机房需要建模时,这无疑是巨大工作量的,不仅仅拖了交期,还会让研发人员做了大量重复的工作。

  为满足大量机房三维效果,这种抽象化机房展示形式尤为突出。既满足了机房可视化直观效果,又能快速响应不同机房的要求。

 

 

技术交流邮箱:1203193731@qq.com

 

交流微信:

 

    

 

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

 

 

一、整体视角,根据配置数据,自动生成行列机柜。

 

创建自动化前,首先要封装自动化代码,然后通过数据驱动生成模型

我们以该文章机房为例 代码实现如下:

function getITCRoomData() {
//获取列表
var racks = getWebApiInstance().getRacksByRoomId();

var models = [ ];

//统计总的行列
var maxRow = 0;//行
var maxCol = 0;//列
$.each(racks.Members, function (_index, _obj) {
var row = parseInt(_obj.Location.split("-")[0]);
var col = parseInt(_obj.Location.split("-")[1]);
if (row >= maxRow) {
maxRow = row;
}
if(col>maxCol){
maxCol = col;
}
});

$.each(racks.Members, function (_index, _obj) {
var row = parseInt(_obj.Location.split("-")[0]);
var col = parseInt(_obj.Location.split("-")[1]);
var _cab = getCabinetModel(_obj.Id,"ITC_cab_A_" + (_index+1),
{ x: 1, y: 1, z: 1 },
{ "x": (row - 1) * 500, "y": 210, "z": (col-1) * 182 }, [{ "direction": "y", "degree": 0 }]);
models.push(_cab);
});
models.push({
"show": true, "uuid": "", "name": "ITC_floor", "objType": "cube2", "length": maxRow * 500 + 500, "width": maxCol * 182 + 500, "height": 50,
"x": ((maxRow-1) * 500)/2,
"y": -25,
"z": ((maxCol - 1) * 182) / 2, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 0x8caeed, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/wall/top4.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 10 }, "skin_down": { "skinColor": 12447743, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/wall/floor5.jpg", "repeatx": true, "width": 20, "repeaty": true, "height": 30 }, "skin_fore": { "skinColor": 11060451, "side": 1, "opacity": 1 }, "skin_behind": { "skinColor": 11060451, "side": 1, "opacity": 1 }, "skin_left": { "skinColor": 11060451, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 11060451, "side": 1, "opacity": 1 } } }, "showSortNub": 1, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
});
return models;

var alarmmarks = [];
//添加机柜
for (var i = 1; i <=18; i++){
var _cab = getCabinetModel("ITC_cab_A_" + i,
{ x: 1, y: 1, z: 1 },
{ "x": 1000, "y": 210, "z": -1000 + (i - 1) * 182 }, [{ "direction": "y", "degree": 0}]);
models.push(_cab);
if (Math.random() > 0.8) {
var alarmLeavel=Math.floor(Math.random() * 4) + "0";
var marks = modelBussiness.addMark("ITC_cab_A_" + i + "Mark", { "x": 1000, "y": 450, "z": -1000 + (i - 1) * 182 }, alarmLeavel);
alarmmarks.push({ row: 0, col: i, alarmLevel: alarmLeavel });
models = models.concat(marks);
}
}
for (var i = 1; i <= 18; i++) {
var _cab = getCabinetModel("ITC_cab_A_" +( i+18),
{ x: 1, y: 1, z: 1 },
{ "x": 500, "y": 210, "z": -1000 + (i - 1) * 182 }, [{ "direction": "y", "degree": 0 }]);
models.push(_cab);

if (Math.random() > 0.8) {
var alarmLeavel = Math.floor(Math.random() * 4) + "0";
alarmmarks.push({ row: 1, col: i, alarmLevel: alarmLeavel });
var marks = modelBussiness.addMark("ITC_cab_A_" + (i + 18) + "Mark", { "x": 500, "y": 450, "z": -1000 + (i - 1) * 182 }, alarmLeavel);
models = models.concat(marks);
}
}
for (var i = 1; i <= 18; i++) {
var _cab = getCabinetModel("ITC_cab_A_" + (i + 36),
{ x: 1, y: 1, z: 1 },
{ "x": 0, "y": 210, "z": -1000 + (i - 1) * 182 }, [{ "direction": "y", "degree": 0 }]);
models.push(_cab);
if (Math.random() > 0.8) {
var alarmLeavel = Math.floor(Math.random() * 4) + "0";
alarmmarks.push({ row: 2, col: i, alarmLevel: alarmLeavel });
var marks = modelBussiness.addMark("ITC_cab_A_" + (i + 36) + "Mark", { "x": 0, "y": 450, "z": -1000 + (i - 1) * 182 }, alarmLeavel);
models = models.concat(marks);
}
}
for (var i = 1; i <= 18; i++) {
var _cab = getCabinetModel("ITC_cab_A_" + (i +54),
{ x: 1, y: 1, z: 1 },
{ "x": -500, "y": 210, "z": -1000 + (i - 1) * 182 }, [{ "direction": "y", "degree": 0 }]);
models.push(_cab);
if (Math.random() > 0.8) {
var alarmLeavel = Math.floor(Math.random() * 4) + "0";
alarmmarks.push({ row: 3, col: i, alarmLevel: alarmLeavel });
var marks = modelBussiness.addMark("ITC_cab_A_" + (i + 54) + "Mark", { "x": -500, "y": 450, "z": -1000 + (i - 1) * 182 }, alarmLeavel);
models = models.concat(marks);
}

}
for (var i = 1; i <= 18; i++) {
var _cab = getCabinetModel("ITC_cab_A_" + (i + 72),
{ x: 1, y: 1, z: 1 },
{ "x": -1000, "y": 210, "z": -1000 + (i - 1) * 182 }, [{ "direction": "y", "degree": 0 }]);
models.push(_cab);
if (Math.random() > 0.8) {
var alarmLeavel = Math.floor(Math.random() * 4) + "0";
alarmmarks.push({ row: 4, col: i, alarmLevel: alarmLeavel });
var marks = modelBussiness.addMark("ITC_cab_A_" + (i + 72) + "Mark", { "x": -1000, "y": 450, "z": -1000 + (i - 1) * 182 }, alarmLeavel);
models = models.concat(marks);
}
//var serversGroup = getServerModel3("ITC_cab_A_" + (i + 72) + "_sGroup", Math.floor(Math.random() * 7), { "x": -1000, "y": 210, "z": -1000 + (i - 1) * 182 }, { x: 1, y: 1, z: 1 },0);
//models.push(serversGroup);
}
page.alarmmarks = alarmmarks;
return models;
}

 

 

二、异常设备视角,查看异常机柜,其它机柜隐藏虚化。

 实现虚化比较简单:

直接获取非异常设备的名称列表,然后修改他们的透明度



//异常设备
ModelBussiness.prototype.abnormalDevInfo = function () {
if (modelBussiness.showState != 0) {
return;
}
this.showState = -1;
//清除高亮边框
if (modelBussiness.lightBorderModel) {
modelBussiness.commonFunc.removeLightBorder(modelBussiness.lightBorderModel);
}
this.showAlarmLogo();
this.showMessageWindow("异常设备",
function (layerindex) {
setTimeout(function () {
var showHtml = "";
$.each(page.alarmmarks, function (_index, _obj) {
var markStr = "";
var markColor = "";
switch (_obj.alarmLevel) {
case "00":
markStr = "";
markColor = "cornflowerblue";
break;
case "10":
markStr = "2";
markColor = "yellow";
break;
case "20":
markStr = "3";
markColor = "orange";
break;
case "30":
markStr = "4";
markColor = "red";
break;
}
showHtml += "<tr><td class='tdTitile'>0000" + ((_obj.row) * 18 + _obj.col) + "</td><td class='tdTitile'>HX0C0" + (_obj.row + 1) + "-" + (_obj.col + 1) + "</td><td class='tdTitile' style='color:" + markColor+";'>" + markStr + "</td></tr>";
});
}, 500);
$("#iframe_infoContent")[0].contentWindow.$("#unNormalDevs").show();
}, function () {
//modelBussiness.backBtn();
});
console.log(page.alarmmarks);
var nohideNames = ["ITC_floor"];
var nohideNamesStr = "ITC_floor";
var showHtml = "";
$.each(page.alarmmarks, function (_index, _obj) {
nohideNames.push("ITC_cab_A_" + (_obj.col + _obj.row * 18));
nohideNames.push("ITC_cab_A_" + (_obj.col + _obj.row * 18) +"Mark");
nohideNames.push("ITC_cab_A_" + (_obj.col + _obj.row * 18) + "Mark_nub");
for (var j = 1; j < 6; j++) {
nohideNames.push("ITC_cab_A_" + (_obj.col + _obj.row * 18) +"_s_"+j);
}
nohideNames.push("ITC_cab_A_" + (_obj.col + _obj.row * 18) +"_sGroup");
nohideNamesStr += "|ITC_cab_A_" + (_obj.col + _obj.row * 18);
showHtml += "<tr><td class='tdTitile'>001</td><td class='tdTitile'>001</td><td class='tdTitile'>严重告警</td></tr>";
});
//WT3DObj.commonFunc.changeCameraPosition(
// { x: 2165.374975454839, y: 2885.848294015838, z: 382.00211926637746 },
// { x: -237.4468172211899, y: -184.37302270726133, z: 421.1463728664973 }, 1000, function () {
// });
modelBussiness.VAllExceptNames(nohideNames,0.1, function () {
modelBussiness.showState = 1;
});

}
ModelBussiness.prototype.marksObjs = [];
ModelBussiness.prototype.markNames = [];
ModelBussiness.prototype.hideAlarmLogo = function () {
var _this = this;
if (_this.marksObjs.length <= 0) {
if (this.markNames && this.markNames.length > 0) {
var markObjs = WT3DObj.commonFunc.findObjectsByNames(this.markNames);
_this.marksObjs = markObjs;
$.each(_this.marksObjs, function (_index, _obj) {
_obj.visible = false;
});
}
} else {
$.each(_this.marksObjs, function (_index, _obj) {
_obj.visible = false;
});
}
}
ModelBussiness.prototype.showAlarmLogo = function () {
var _this = this;
if (_this.marksObjs.length <= 0) {
if (this.markNames && this.markNames.length > 0) {
var markObjs = WT3DObj.commonFunc.findObjectsByNames(this.markNames);
_this.marksObjs = markObjs;
$.each(_this.marksObjs, function (_index, _obj) {
_obj.visible = true;
});
}
} else {
$.each(_this.marksObjs, function (_index, _obj) {
_obj.visible = true;
});
}
}


//
虚化设备 ModelBussiness.prototype.needVobjs = []; ModelBussiness.prototype.VAllExceptNames = function (exceptNames,value, sucFunc) { var _this = this; _this.needVobjs = []; $.each(WT3DObj.objects, function (_index, _obj) { if (exceptNames.indexOf(_obj.name) < 0) { if (_obj.name != (exceptNames) && _obj.name.indexOf("OBJCREN") < 0 && _obj.name.indexOf(exceptNames + "_") < 0) { _this.needVobjs.push(_obj); } } }); WT3DObj.commonFunc.changeObjsOpacity(_this.needVobjs, 1, value, 1000, function () { if (sucFunc) { sucFunc(); } }); } ModelBussiness.prototype.EAllExceptNames = function (exceptNames, sucFunc) { var _this = this; WT3DObj.commonFunc.changeObjsOpacity(_this.needVobjs, 0.05,1 ,1000, function () { _this.needVobjs = []; if (sucFunc) { sucFunc(); } }); }

 

三、机柜空间利用率展示。

 利用率展示,通过不同颜色 不同高度展示不同机柜的利用率情况

代码实现如下“”:

 

//容量管理
ModelBussiness.prototype.rateSpaceState = 0;
ModelBussiness.prototype.rateSpaceCubes = [];
ModelBussiness.prototype.rateSpaceCubeNames = [];
ModelBussiness.prototype.showSpaceRateHtml ="";
ModelBussiness.prototype.showSpaceRate = function () {
var _this = this;
if (modelBussiness.showState < 0) {
return;
}
_this.showState = 2;
//清除高亮边框
if (modelBussiness.lightBorderModel) {
modelBussiness.commonFunc.removeLightBorder(modelBussiness.lightBorderModel);
}

//WT3DObj.commonFunc.changeCameraPosition(
//    { x: 1977.2470605104493, y: 2105.8385914626856, z: 3021.913409329815 },
//    { x: -14.639192973854877, y: -334.87231771902077, z: 391.5306197025099 }, 1000, function () {
//    });

this.showMessageWindow("空间",
function () {
$("#iframe_infoContent")[0].contentWindow.$("#spaceDiv").show();
}, function () {
//modelBussiness.backBtn();
});
if (_this.rateSpaceState == 0)
{
_this.rateSpaceState = 1;
//隐藏所有
_this.hideAll("aaaa", function () {

var racks = getWebApiInstance().RacksCache;
if (_this.rateSpaceCubeNames.length <= 0) {
var showHtml = "";
for (var i = 1; i <= racks.length ; i++) {
var rateValue = racks[i - 1].Unit.UnitUsed / racks[i - 1].Unit.UnitTotal;

var style = {
borderColor: 0x6495ed,
innerColor: 0x6495ed,
innerOprity: 0.7,
outColor: 0x204383,
outOprity: 0.2
};
//if (temptureValue[i].value > 90) {
//    tempColor = 0xff6f6f;
//} else if (temptureValue[i].value > 70) {
//    tempColor = 0xff9e5c;
//} else if (temptureValue[i].value > 40) {
//    tempColor = 0x00dda1;
//} else {
//    tempColor = 0x00ccff;
//}
if (rateValue > 0.90) {
style = {
borderColor: 0xffffff,
innerColor: 0xff6f6f,
innerOprity: 0.9,
outColor: 0x152c48,
outOprity: 0
};
} else if (rateValue > 0.70) {
style = {
borderColor: 0xffffff,
innerColor: 0xff9e5c,
innerOprity: 0.9,
outColor: 0x152c48,
outOprity: 0
};
} else if (rateValue > 0.40) {
style = {
borderColor: 0xffffff,
innerColor: 0x00dda1,
innerOprity: 0.9,
outColor: 0x152c48,
outOprity: 0
};
} else {
style = {
borderColor: 0xffffff,
innerColor: 0x00ccff,
innerOprity: 0.9,
outColor: 0x152c48,
outOprity: 0
};
}

var itcobj = WT3DObj.commonFunc.findObject("ITC_cab_A_" + i);
if (itcobj) {
_this.commonFunc.createRateCube("ITC_cab_A_" + i,
{ x: 160, y: 380, z: 140 },
{ x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
{ x: 0, y: 0, z: 0 },
rateValue,
style, { timelong: 1000 });
var markColor = "#204383";
if (rateValue > 0.90) {
markColor = " #ff0000";
} else if (rateValue > 0.70) {
markColor = " #ffa533";
} else if (rateValue > 0.50) {
markColor = " #204383";
}
showHtml += "<tr><td class='tdTitile'>0000" + (i) + "</td><td class='tdTitile'>HX0C0" + parseInt(i / 18) + "-" + parseInt((i % 18)) + "</td><td class='tdTitile' style='color:" + markColor + ";'>" + (rateValue * 100).toFixed(2) + "%</td></tr>";
}
}
modelBussiness.showSpaceRateHtml = showHtml;
setTimeout(function () {
$('#infoContent').html(modelBussiness.showSpaceRateHtml);
}, 1000);
} else {
var showHtml = "";
for (var i = 1; i <= racks.length ; i++) {
var rateValue = racks[i - 1].Unit.UnitUsed / racks[i - 1].Unit.UnitTotal;
var itcobj = WT3DObj.commonFunc.findObject("ITC_cab_A_" + i);
if (itcobj) {
_this.commonFunc.createRateCube("ITC_cab_A_" + i,
{ x: 160, y: 378, z: 140 },
{ x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
{ x: 0, y: 0, z: 0 },
rateValue,
style, { timelong: 1000 });
var markColor = "#204383";
if (rateValue > 0.90) {
markColor = " #ff0000";
} else if (rateValue > 0.70) {
markColor = " #ffa533";
} else if (rateValue > 0.50) {
markColor = " #ffff00";
}
showHtml += "<tr><td class='tdTitile'>0000" + (i) + "</td><td class='tdTitile'>HX0C0" + parseInt(i / 18) + "-" + parseInt((i % 18)) + "</td><td class='tdTitile' style='color:" + markColor + ";'>" + (rateValue * 100).toFixed(2) + "%</td></tr>";
}
}
modelBussiness.showSpaceRateHtml = showHtml;
setTimeout(function () {
$('#infoContent').html(modelBussiness.showSpaceRateHtml);
}, 1000);
}

});
}
else
{
_this.rateSpaceState = 0;
_this.hideAll("aaaa", function () {
if (_this.needHideobjs.length > 0) {
$.each(_this.needHideobjs, function (_index, _obj) {
if (_obj.name.indexOf("_rate_") < 0) {
_obj.visible = true;
}
});
//WT3DObj.commonFunc.changeCameraPosition( { x: 2531, y: 3967, z: -1150 }, { x: -615, y: 0, z: -35 }, 1000, function () {
//    $.each(_this.needHideobjs, function (_index, _obj) {
//        if (_obj.name.indexOf("_rate_") < 0) {
//        _obj.visible = true;
//        }
//    });
//});
}
});
}

}
ModelBussiness.prototype.hideSpaceRate = function () {
modelBussiness.rateSpaceState = 0;
if (modelBussiness.rateSpaceCubes && modelBussiness.rateSpaceCubes.length > 0){
$.each(modelBussiness.rateSpaceCubes, function (_index, _obj) {
_obj.visible = false;
});
}
}

 

四、温度云图展示

 温度云图代码如下:

//温度
ModelBussiness.prototype.temptureSpaceCubes = [];
ModelBussiness.prototype.temptureSpaceCubeNames = [];
//温度显示
ModelBussiness.prototype.showTemptureMap = function () {
var _this = this;
if (modelBussiness.showState < 0) {
return;
}
_this.hideAlarmLogo();
_this.showState = 3;
//清除高亮边框
if (modelBussiness.lightBorderModel) {
modelBussiness.commonFunc.removeLightBorder(modelBussiness.lightBorderModel);
}
this.showMessageWindow("温度",
function () {
$("#iframe_infoContent")[0].contentWindow.$("#temptureDiv").show();
}, function () {
// modelBussiness.backBtn();
});
_this.createHeatMapModels("temptureObj", { x: 0, y: 10, z: 1500 }, { x: 9, y: 11, z: 11 });

}
ModelBussiness.prototype.hideAllTemptureMapObjs = function () {
var _this = this;
_this.showState = 0;
if (_this.temptureSpaceCubes.length <= 0) {
_this.temptureSpaceCubes = WT3DObj.commonFunc.findObjectsByNames(_this.temptureSpaceCubeNames);
}
$.each(_this.temptureSpaceCubes, function (_index, _obj) {
_obj.visible = false;
});
}

 

五、机柜功耗情况展示

 这里的功耗情况跟利用率代码技术比较类似,不做累述。

六、u位情况展示

 这里的u位情况。可以通过这种效果,来查看机柜内u位使用情况。空闲u位情况,还可以查看服务器的使用年限。

//年限分布
ModelBussiness.prototype.agesSpaceState = 0;
ModelBussiness.prototype.agesSpaceCubes = [];
ModelBussiness.prototype.agesSpaceCubeNames = [];
//年限显示
ModelBussiness.prototype.showAgesMap = function () {
var _this = this;
_this.showState = 5;
_this.hideAlarmLogo();
if (modelBussiness.showState < 0) {
return;
}
//清除高亮边框
if (modelBussiness.lightBorderModel) {
modelBussiness.commonFunc.removeLightBorder(modelBussiness.lightBorderModel);
}
this.showMessageWindow("年限",
function () {
$("#iframe_infoContent")[0].contentWindow.$("#yearDiv").show();
}, function () {
//modelBussiness.backBtn();

});
//WT3DObj.commonFunc.changeCameraPosition({ x: 3626.8806598704978, y: 2503.5840662851847, z: 1333.887505251365 }, { x: 115.96408129332937, y: 178.8991280155388, z: 368.1924201030766 },1000, function () { });
if (_this.agesSpaceState == 0) {
_this.agesSpaceState = 1;
//隐藏所有
_this.hideAll("aaaa", function () {

if (_this.agesSpaceCubeNames.length <= 0) {
for (var i = 1; i <= 90; i++) {
var rateValue = Math.random();
var ageValue = [{
value: Math.random() * 62,
max: 25,
min: 23
}];
if (Math.random() > 0.5)
ageValue.push({
value: 62,
max: 3,
min: 1
});
if (Math.random() > 0.5)
ageValue.push({
value: 62,
max: 6,
min: 4
});
if (Math.random() > 0.5)
ageValue.push({
value: 62,
max: 10,
min: 8
});
if (Math.random() > 0.5)
ageValue.push({
value: 40,
max: 16,
min: 12
});

if (Math.random() > 0.5)
ageValue.push({
value: 40,
max: 20,
min: 17
});

if (Math.random() > 0.5)
ageValue.push({
value: 40,
max: 30,
min: 26
});
if (Math.random() > 0.5)
ageValue.push({
value: 40,
max: 33,
min: 31
});
if (Math.random() > 0.5)
ageValue.push({
value:32,
max: 35,
min: 34
});
if (Math.random() > 0.5)
ageValue.push({
value: 32,
max: 37,
min: 36
});
if (Math.random() > 0.5)
ageValue.push({
value: 32,
max: 39,
min: 37
});
if (Math.random() > 0.5)
ageValue.push({
value: 32,
max: 41,
min: 40
});
var style = {
borderColor: 0x444444,
outColor: 0x0a3d5f,
outOprity:1
};
var itcobj = WT3DObj.commonFunc.findObject("ITC_cab_A_" + i);
_this.commonFunc.createYearCube("ITC_cab_A_" + i,
{ x: 160, y: 380, z: 140 },
{ x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
{ x: 0, y: 0, z: 0 },
ageValue,
style, { timelong: 1000 },i);

}
}
else {
for (var i = 1; i <= 90; i++) {
var itcobj = WT3DObj.commonFunc.findObject("ITC_cab_A_" + i);
var ageValue = [{
value: Math.random() * 80,
max: 3,
min: 1
}, {
value: Math.random() * 80,
max: 6,
min: 4
}, {
value: Math.random() * 80,
max: 8,
min: 7
}, {
value: Math.random() * 80,
max: 10,
min: 8
}];

var style = {
borderColor: 0xffffff,
outColor: 0xffffff,
outOprity: 0.1
};
_this.commonFunc.createYearCube("ITC_cab_A_" + i,
{ x: 160, y: 378, z: 140 },
{ x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
{ x: 0, y: 0, z: 0 },
ageValue,
style, { timelong: 1000 },i);
}
}

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

 

七、配电情况展示

 

//配电组
ModelBussiness.prototype.distributionUnitState = 0;
ModelBussiness.prototype.distributionUnitCubes = [];
ModelBussiness.prototype.distributionUnitCubeNames = [];
ModelBussiness.prototype.distriShowIndex = 0;
ModelBussiness.prototype.distributionUnitMap = function () {
var _this = this;
if (modelBussiness.showState < 0) {
return;
}
_this.hideAlarmLogo();
_this.showState = 6;
//清除高亮边框
if (modelBussiness.lightBorderModel) {
modelBussiness.commonFunc.removeLightBorder(modelBussiness.lightBorderModel);
}
_this.showMessageWindow("配电组",
function (layerindex) {
$("#iframe_infoContent")[0].contentWindow.$("#electricDiv").show();
}, function () {
modelBussiness.backBtn();
WT3DObj.destoryObj("mbss_PDG_" + _this.showDistributionUnitIndex);
$.each(_this.showDistributionUnitNames, function (_index, _obj) {
_this.commonFunc.removeLightBorder(_obj);
var _c_obj = WT3DObj.commonFunc.findObject(_obj);
_this.BackPosition(_c_obj, 100, function () {
});
});
_this.commonFunc.removeEnergyLightBorder("mbss_PDG_" + _this.showDistributionUnitIndex + "");
});

//WT3DObj.commonFunc.changeCameraPosition( { x: 3147.173148817664, y: 4210.16301452083, z: -186.67730752542613 }, { x: -312.79784793637253, y: -169.8337304058292, z: -63.04648622801567 }, 1000, function () {
//});
modelBussiness.VAllExceptNames(["ITC_floor"], 0.2, function () {
_this.showDistributionUnit(1,20);
});
}
ModelBussiness.prototype.showDistributionUnitNames = [];
ModelBussiness.prototype.showDistributionUnitIndex = 0;
ModelBussiness.prototype.showDistributionUnit = function (unit,value) {
var _this = this;
value = value / 80.0;
if (modelBussiness.showState < 0) {
return;
}
if (_this.showDistributionUnitNames.length>0) {
WT3DObj.destoryObj("mbss_PDG_" + _this.showDistributionUnitIndex);
$.each(_this.showDistributionUnitNames, function (_index, _obj) {
_this.commonFunc.removeLightBorder(_obj);
var _c_obj = WT3DObj.commonFunc.findObject(_obj);
_this.BackPosition(_c_obj,  100, function () {
});
});
_this.commonFunc.removeEnergyLightBorder("mbss_PDG_" + _this.showDistributionUnitIndex + "");
WT3DObj.commonFunc.changeObjsOpacityByName(_this.showDistributionUnitNames, 1, 0.2, 500, function () {
$.each(_this.showDistributionUnitNames, function (_index, _obj) {
_this.commonFunc.removeLightBorder(_obj);
});
});
}
var showNames = [];
var sideCabName = "";
var add = 1;
if (unit % 2 == 1) {
add = -1;
sideCabName = "ITC_cab_A_" + (1 + (unit - 1) * 9);
} else {
sideCabName = "ITC_cab_A_" + (unit * 9);
}
for (var i = 1 + (unit - 1) * 9; i <= unit * 9; i++){
showNames.push("ITC_cab_A_" + i);
}
var cab = WT3DObj.commonFunc.findObject(sideCabName);
var showPosition = { x: cab.position.x, y: cab.position.y, z: cab.position.z };
showPosition.z += add * 200;
_this.showDistributionUnitNames = showNames;
_this.showDistributionUnitIndex = unit;
_this.addPDG("mbss_PDG_" + _this.showDistributionUnitIndex,showPosition);
WT3DObj.commonFunc.changeObjsOpacityByName(showNames, 0.2, 1, 500, function () {
$.each(showNames, function (_index,_obj) {
var obj = WT3DObj.commonFunc.findObject(_obj);
_this.commonFunc.addLightBoder(obj, 0x00ffff, 0.6, true);
});
var mn_obj = WT3DObj.commonFunc.findObject("mbss_PDG_" + _this.showDistributionUnitIndex);

var color = 0xff9900;
if(value>0.7){
color = 0xff4c4c;
}else if(value>0.4){
color = 0xffa666;

}else{
color = 0x3dcca6;

}
_this.commonFunc.addEnergyLightBoder(mn_obj, color, 0.3, value, { innerColor: color, innerOprity: 0.6 });

});
}

 

八、单机柜信息展示

 

 

 

 

 

 

 

九、资产搜索展示

 

 

 

//搜索功能
ModelBussiness.prototype.searchCubes = [];
ModelBussiness.prototype.SearchAnimation = function (nub) {
var _this = this;
_this.hideAlarmLogo();
if (_this.showState != 0) {
//恢复到默认
_this.closeSearchAnimation();
}
_this.showState = 8;
_this.commonFunc.addBoderForAllCabs();
_this.hideAll("aaaa", function () {
for (var i = 0; i < nub; i++) {
var name = "searchCube" + i;
_this.commonFunc.createSearchCube(name);
}
});
//_this.VAllExceptNames(["ITC_floor"], 0.04,function () {
//    for (var i = 0; i < nub; i++){
//        var name = "searchCube" + i;
//        _this.commonFunc.createSearchCube(name);
//    }
//});

}
ModelBussiness.prototype.closeSearchAnimation = function () {
var _this = this;
_this.showState = 0;
if (_this.searchCubes && _this.searchCubes.length > 0) {
$.each(_this.searchCubes, function (_index, _cubeName) {
WT3DObj.destoryObj(_cubeName);
});
}
_this.commonFunc.removeBoderForAllCabs();
modelBussiness.backBtn();
}
ModelBussiness.prototype.noSelectDev = function (_nub) {
WT3DObj.commonFunc.setSkinColorByname("searchCube"+_nub, 0x000000);
}
ModelBussiness.prototype.selectDev = function (_nub) {
WT3DObj.commonFunc.setSkinColorByname("searchCube"+_nub, 0x00ffff);
}

 

技术交流 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管理系统——第四课(炫酷版一)

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: