1.修复拓扑多出一个nodeList的问题

2.3d机房弹框更改
This commit is contained in:
chenjinsong
2018-10-08 17:40:14 +08:00
parent ef1eb126c8
commit 3d4bcf43f5
4 changed files with 168 additions and 35 deletions

View File

@@ -38,6 +38,8 @@
<script language="javascript" type="text/javascript" src="<c:url value="/scrollBar/scrollBar.js"/>"></script>
<script type="text/javascript"
src="<c:url value='/js/jquery-easyui-1.1.2/jquery.easyui.min.js' />"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/raphael.js'/>"></script>
<script type="text/javascript">
$(function(){
var lang=$("#languageChange").val();
@@ -627,21 +629,30 @@ html, body {
document.body.style.overflowX="hidden";
document.body.style.overflowY="hidden";
</script>
<!-- 业务逻辑拓扑弹框 -->
<div id="nodeList" style="display:none;height:100%" scrolling="no">
<!-- 1为禁止查询2为可以联想查询 此开关同main.jsp-->
<input type="hidden" id="lianxiangStatus" value="2" />
<!--<span id="title" class="color_3_tip"
style="width: 100%; display: none; text-align: center;"></span>-->
<iframe id="I4" name="I4" height="35%" width="100%" border="0"
style="background: #FFFFFF; display: none;" frameborder="0" src=""
scrolling="no">
i18n_st.message.frameInfo_n81i
</iframe>
<hr id="hr" />
<iframe id="I5" name="I5" height="64%" width="100%" border="0"
style="background: #FFFFFF;" frameborder="0" src="" scrolling="auto">
i18n_st.message.frameInfo_n81i
</iframe>
</div>
<!-- 1为禁止查询2为可以联想查询 此开关同main.jsp-->
<input type="hidden" id="lianxiangStatus" value="2" />
<!--<span id="title" class="color_3_tip"
style="width: 100%; display: none; text-align: center;"></span>-->
<iframe id="I4" name="I4" height="35%" width="100%" border="0"
style="background: #FFFFFF; display: none;" frameborder="0" src=""
scrolling="no">
i18n_st.message.frameInfo_n81i
</iframe>
<hr id="hr" />
<iframe id="I5" name="I5" height="64%" width="100%" border="0"
style="background: #FFFFFF;" frameborder="0" src="" scrolling="auto">
i18n_st.message.frameInfo_n81i
</iframe>
</div>
<!-- 3D机房弹框 -->
<div id="nodeBoxs" style="display:none;"></div>
<div id="alarmInfo" style="display:none;">
<iframe id="I6" name="I6" height="525px" width="100%" border="0"
style="background: #FFFFFF;" frameborder="0" src="" scrolling="auto">
i18n_snr.message.frame_n81i
</iframe>
</div>
</body>
</html>

View File

@@ -168,7 +168,6 @@
}
</style>
<script type="text/javascript">
parent.setDivTitle('${nodeGroupName}');
//页面5分钟刷新一次
var interval;
$(function(){

View File

@@ -46,23 +46,6 @@
<div>
<canvas id="canvas" style="background-color:#FAFAFA; border:1px solid #444;display:block"></canvas>
</div>
<div id="nodeList" closed="true">
<!-- 1为禁止查询2为可以联想查询 此开关同main.jsp-->
<input type="hidden" id="lianxiangStatus" value="2" />
<!--<span id="title" class="color_3_tip"
style="width: 100%; display: none; text-align: center;"></span>-->
<div id="title" class="color_3_tip" style="height: 20px;text-align: center;line-height: 20px">i18n_st.text.policy_n81i</div>
<iframe id="I4" name="I4" height="30%" width="100%" border="0"
style="background: #FFFFFF; display: none;" frameborder="0" src=""
scrolling="no">
i18n_st.message.frameInfo_n81i
</iframe>
<hr id="hr" />
<iframe id="I5" name="I5" height="100%" width="100%" border="0"
style="background: #FFFFFF;" frameborder="0" src="" scrolling="no">
i18n_st.message.frameInfo_n81i
</iframe>
</div>
<!-- <div id="nodeList" closed="true">
1为禁止查询2为可以联想查询 此开关同main.jsp

View File

@@ -214,7 +214,7 @@ body {
}
})
function getNodeBox(param){
/*function getNodeBox(param){
var params=param.split(",");
$.ajax({
type:"post",
@@ -336,10 +336,150 @@ body {
}
}
})
}*/
function getNodeBox(param){
var params=param.split(",");
$.ajax({
type:"post",
dataType:'json',
url:"<c:url value='/nodePosition/topoShow.do?action=getNodeBox'/>",
data:params[0],
async:true,
success:function (data,textStatus){
if(textStatus == "success" && (data!= null && data!= "" )){
window.top.$("#nodeBoxs").html("");
var length = $(data).length;
var raphaelBox = window.top.Raphael("nodeBoxs",boxWidth,boxHeight);
//raphaelBox.rect(0,0,boxWidth,boxHeight).attr({'stroke-width':1,stroke: "#FFFFFF", fill: "#FBFBEA"});
//边框设置
var subBoxStartX=20;
var subBoxStartY=10;
var footHeight = 30;
var subBoxGap = 3;
raphaelBox.image(boxTopImg,0,0,204,subBoxStartY);
raphaelBox.image(boxLeftImg,0,subBoxStartY,subBoxStartX,boxHeight);
raphaelBox.image(boxRightImg,boxWidth-20,subBoxStartY,subBoxStartX,boxHeight);
raphaelBox.image(boxFootImg,0,boxHeight-footHeight,204,footHeight);
//每个子U为的大小设置
var subHeight = (boxHeight-subBoxStartY-footHeight)/length-subBoxGap;
var subWidth = boxWidth - 2*subBoxStartX;
var index=-1;//控制占多个U位的处理
var nodeIndex=0;//在机柜展示中显示节点机所在的序号
$(data).each(function(i,item){
if(index >= i){
return true;
}
//item.nodeposition
var subBoxY = subBoxStartY+i*(subHeight+subBoxGap);
var newHeight = subHeight;
if(item.nodeSeqId != "0" && item.nodeTable != null){
var title="";//设置节点的提升信息
var param="";//设置单击事件的传参
if(item.nodeTable != null){
title = "i18n_snr.message.nodeTableTitle.nodeIp_n81i"+item.nodeTable.nodeIp+"\ni18n_snr.message.nodeTableTitle.nodeName_n81i"+item.nodeTable.nodeName
+"\ni18n_snr.message.nodeTableTitle.nodeU_n81i"+item.nodeTable.nodeUType+"\ni18n_snr.message.nodeTableTitle.startU_n81i"+item.nodeTable.nodeBeginUType;
param = "&seqList="+item.nodeTable.seqId;
//占多个U位的处理
var UNum = Number(item.nodeTable.nodeUType);
if( UNum>1){
newHeight = UNum*subHeight+(UNum-1)*subBoxGap;
index = i+UNum-1;
}
}
//alert(item.nodeTable.nodeName+"------"+item.groupNode+"---"+item.nodeTable.alarm);
var subColor="#80B167";//绿色
//是本节点组的显示红色or绿色 非本节点组显示灰色
if(item.groupNode){
if(item.nodeTable.alarm){//节点如果异常则显示红色
subColor="#FF0000";
}
}else{
subColor="#939393";//灰色
}
//只有告警节点才可以单击显示告警信息
if(item.groupNode &&item.nodeTable.alarm){
//节点如果异常则显示红色
var node = raphaelBox.rect(subBoxStartX,subBoxY,subWidth,newHeight).attr({stroke: "#CEDBEF",'stroke-width':0.1,title:title,text:param, fill: subColor});
node.id = "u"+i;
window.top.$("#nodeBoxs").append("<input type='hidden' id="+node.id+" value=''>");
$("input[id="+node.id+"]").val(param);
node.click(function(){
// var param = this.attr("text");
var selector= "#"+this.id;
var param = $(selector).val();
var nodeip = item.nodeTable.nodeIp;
var nodeType = item.nodeTable.nodeType;
getAlarmInfo(param,nodeip,nodeType);
}).mouseover(function(){
this.animate({"stroke-width":2},100);
}).mouseout(function(){
this.animate({"stroke-width":0.1},100);
});
}else{
raphaelBox.rect(subBoxStartX,subBoxY,subWidth,newHeight).attr({stroke: "#CEDBEF",'stroke-width':0.1,title:title,text:param, fill: subColor})
.mouseover(function(){
this.animate({"stroke-width":2},100);
}).mouseout(function(){
this.animate({"stroke-width":0.1},100);
});
}
//写节点机在机柜中的序号,放入数组中
if(item.groupNode){
nodeIndex++;
nodeIndexs[nodeIndex]={"x":subBoxStartX-5,"y":subBoxY+5};
}
}else{
var title="i18n_snr.message.UBit_n81i"+item.nodeposition;
raphaelBox.rect(subBoxStartX,subBoxY,subWidth,newHeight).attr({stroke: "#CEDBEF",'stroke-width':0.1,title:title, fill: "#ffffff"})
.mouseover(function(){
this.animate({"stroke-width":2},100);
}).mouseout(function(){
this.animate({"stroke-width":0.1},100);
});
}
});
//写节点机在机柜中的序号
var nodeShowInd = 0;
for(var i = 1;i<=nodeIndex;i++){
if(nodeIndexs[i] != null &&nodeIndexs[i] != ""){
nodeShowInd++;
raphaelBox.text(nodeIndexs[i].x,nodeIndexs[i].y,nodeShowInd).attr({'font-size':12,fill:"#000000"});
}
}
window.top.layer.open({
type: 1,
title: params[1],
area:['206px', 'auto'],
content: window.top.$("#nodeBoxs")
})
}
}
})
}
function getAlarmInfo(param,nodeip,nodeType){
if(nodeType== 0){
var url ="<c:url value='/detection/detectionWarning.do?action=query&ip="+nodeip+"&levelAlarm=1"+param+"+&type=3Droom'/>";
}else if(nodeType == 1){
var url ="<c:url value='/detection/detectionWarning.do?action=queryNE&ip="+nodeip+"&levelAlarm=1"+param+"+&type=3Droom'/>";
}
window.top.layer.open({
type: 1,
area:['900px', '600px'],
content: window.top.$("#alarmInfo")
})
window.top.$("#I6").html("");
window.top.$("#I6").attr("src",url);
}
/* function getAlarmInfo(param,nodeip,nodeType){
if(nodeType== 0){
var url ="<c:url value='/detection/detectionWarning.do?action=query&ip="+nodeip+"&levelAlarm=1"+param+"+&type=3Droom'/>";
}else if(nodeType == 1){
@@ -348,7 +488,7 @@ body {
$("#I3").html("");
$("#I3").attr("src",url);
$("#alarmInfo").dialog("open");
}
} */
</script>
</head>