460 lines
18 KiB
Plaintext
460 lines
18 KiB
Plaintext
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
||
<%@ taglib prefix="c" uri="/jstl/c"%>
|
||
<%@ taglib prefix="fn" uri="/jstl/fn"%>
|
||
<%@ taglib prefix="fmt" uri="/jstl/fmt"%>
|
||
<%
|
||
String path = request.getContextPath();
|
||
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
|
||
%>
|
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||
<html>
|
||
<head>
|
||
<base href="<%=basePath%>">
|
||
<title>i18n_sts.message.title_n81i</title>
|
||
<script type="text/javascript" src="<%=path%>/js/jquery-1.4.2.min.js"></script>
|
||
<script type="text/javascript" src="<%=path%>/js/ui/jquery-ui.min.js"></script>
|
||
<script src="<%=path %>/js/jquery.topology-2.0.js"></script>
|
||
<script src="<%=path %>/js/jquery.contextmenu.r2.js"></script>
|
||
<link href="<%=path%>/css/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
|
||
<link href="<%=path%>/css/show/topology.css" rel="stylesheet" type="text/css"/>
|
||
<style type="text/css">
|
||
#demo-ul * { padding:0; margin:0; list-style:none; font-size: 12px;}
|
||
</style>
|
||
<script type="text/javascript">
|
||
function qry(para1)
|
||
{
|
||
$('.td').find("span").remove();
|
||
$("#iconBox").hide();
|
||
|
||
jQuery.post("<%=path %>/nodePosition/nodePosition.do?action=getWarNodeFromBox&boxId="+para1+"&ngId="+$('#gid').val(),
|
||
{},function(data)
|
||
{
|
||
if(data.nodeInBoxList.length>0){
|
||
$("#iconBox").show(function(){
|
||
$("#iconBox").css('top','0px');
|
||
});
|
||
var nodes = data.nodeInBoxList;
|
||
$.each(nodes, function(i, node) {
|
||
var node_Id = node.tableName+'_'+node.nodeType+'_'+node.nodeId;
|
||
var $icon = $("<span divType='node' class='icon-span'></span>");
|
||
$icon.attr('id',node_Id).attr('title',node.nodeIp+"_"+node.nodeName+"_"+node.nodeUType+"U");
|
||
if(node.seqId){
|
||
$icon.attr('class','icon-span-red');
|
||
}else{
|
||
$icon.attr('class','icon-span');
|
||
}
|
||
$icon.bind({
|
||
'mouseenter' : function() {//单引
|
||
//$icon.addClass("hover");
|
||
$("#spanIp2").text(node.nodeIp);
|
||
$("#spanName2").text(node.nodeName);
|
||
$("#spanUType2").text(node.nodeUType+"U");
|
||
var iconBoxPosition = {
|
||
top: $("#iconBox").css('top').replace("px","")*1,
|
||
left: $("#iconBox").css('left').replace("px","")*1,
|
||
width: $("#iconBox").css('width').replace("px","")*1,
|
||
height: $("#iconBox").css('height').replace("px","")*1
|
||
}
|
||
|
||
var cPointY=0;
|
||
var cPointX=0;
|
||
|
||
var sumWidth = $("#board").css('width').replace("px","")*1;
|
||
var sumheight = $("#board").css('height').replace("px","")*1;
|
||
|
||
var iconBoxLeft = parseInt(iconBoxPosition.left);
|
||
if(sumWidth-iconBoxLeft < parseInt(iconBoxPosition.width+200)){
|
||
cPointY = parseInt(iconBoxPosition.left - iconBoxPosition.width);
|
||
}else{
|
||
cPointY = parseInt(iconBoxPosition.left + iconBoxPosition.width+10);
|
||
}
|
||
cPointX = parseInt(iconBoxPosition.top + parseInt(node.latticePosition)*11+30);
|
||
if(cPointX+100>sumheight){
|
||
cPointX = sumheight-110;
|
||
}
|
||
|
||
$("#span_info2")
|
||
.css('top',cPointX+'px')
|
||
.css('left',cPointY+'px')
|
||
.show();
|
||
},
|
||
'mouseleave' : function() {
|
||
$("#span_info2").hide();
|
||
$("#spanIp2").empty();
|
||
$("#spanName2").empty();
|
||
$("#spanUType2").empty();
|
||
}
|
||
});
|
||
//添加到机柜显示
|
||
$("#spanTable").find('#'+node.latticePosition).append($icon);
|
||
//删除占位置的格子
|
||
if(node.nodeUType>1){
|
||
var u = node.nodeUType; //U位
|
||
var position = node.latticePosition; //位置
|
||
var j;
|
||
for(j=1;j<u;j++){
|
||
var thisTd = parseInt(position) + j;
|
||
$("#spanTable").find('#'+thisTd).parent().hide();//删除占位置的tr
|
||
}
|
||
}
|
||
});
|
||
}else{
|
||
alert("i18n_sts.message.spanTable_n81i");
|
||
}
|
||
|
||
});
|
||
|
||
}
|
||
</script>
|
||
</head>
|
||
|
||
<body oncontextmenu="event.returnValue=false">
|
||
<div id="border_Div">
|
||
<input id="from" type="hidden" value="${from}"/>
|
||
<div id="board" class="board" >
|
||
<!-- 图片修改窗口 -->
|
||
<div id="imageBox" class="imageBox">
|
||
<div id="imgList">
|
||
|
||
</div>
|
||
<span style="vertical-align:bottom;float: right;"><input type='button' value='i18n_sts.button.ok_n81i' id="apply" /><input type='button' value='i18n_sts.button.cancle_n81i' id="cancel" /></span>
|
||
</div>
|
||
<!--打开后node列表-->
|
||
<div id="iconBox" class="iconBoxBgc">
|
||
<div id="iconBoxHeader" class="window-header">
|
||
<table border="0" width="100%" align="center">
|
||
<tr>
|
||
<td align="left" width="90%">
|
||
<span id="boxTitle" style="cursor: hand;font-size:10px;color:#000000;"></span>
|
||
</td>
|
||
<td align="right" width="10%">
|
||
<img src="<c:url value='/images/logo_2.png'/>" onclick="$('#iconBox').hide();$('.td').find('span').remove();" style="cursor: hand; background-color:#FFFFFF;">
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<!-- <span type='close' class='ui-icon ui-icon-close' style="cursor: hand;background-color:#FFFFFF;" onclick="$('#iconBox').hide();$('.td').find('span').remove();"></span>-->
|
||
</div>
|
||
<div id="iconNodeContent" class="iconBoxContent">
|
||
<table id="spanTable1" class = "tableBox1" border="0" cellpadding="0" cellspacing="0" height="500">
|
||
<tr height="8">
|
||
<td
|
||
style="height: 8px; background-image:url(<%=path%>/images/show/top_1.jpg)">
|
||
</td>
|
||
<td
|
||
style="height: 8px; background-image:url(<%=path%>/images/show/top_2.jpg)">
|
||
</td>
|
||
<td
|
||
style="height: 8px; background-image:url(<%=path%>/images/show/top_3.jpg)">
|
||
</td>
|
||
</tr>
|
||
<tr class="tr">
|
||
<td style=" background-image:url(<%=path%>/images/show/left.jpg)">
|
||
|
||
</td>
|
||
<td id="1" width="200">
|
||
<table id="spanTable" class="tableBox">
|
||
<tr><td id="1" class="td">1</td></tr>
|
||
<tr><td id="2" class="td">2</td></tr>
|
||
<tr><td id="3" class="td">3</td></tr>
|
||
<tr><td id="4" class="td">4</td></tr>
|
||
<tr><td id="5" class="td">5</td></tr>
|
||
<tr><td id="6" class="td">6</td></tr>
|
||
<tr><td id="7" class="td">7</td></tr>
|
||
<tr><td id="8" class="td">8</td></tr>
|
||
<tr><td id="9" class="td">9</td></tr>
|
||
<tr><td id="10" class="td">10</td></tr>
|
||
<tr><td id="11" class="td">11</td></tr>
|
||
<tr><td id="12" class="td">12</td></tr>
|
||
<tr><td id="13" class="td">13</td></tr>
|
||
<tr><td id="14" class="td">14</td></tr>
|
||
<tr><td id="15" class="td">15</td></tr>
|
||
<tr><td id="16" class="td">16</td></tr>
|
||
<tr><td id="17" class="td">17</td></tr>
|
||
<tr><td id="18" class="td">18</td></tr>
|
||
<tr><td id="19" class="td">19</td></tr>
|
||
<tr><td id="20" class="td">20</td></tr>
|
||
<tr><td id="21" class="td">21</td></tr>
|
||
<tr><td id="22" class="td">22</td></tr>
|
||
<tr><td id="23" class="td">23</td></tr>
|
||
<tr><td id="24" class="td">24</td></tr>
|
||
<tr><td id="25" class="td">25</td></tr>
|
||
<tr><td id="26" class="td">26</td></tr>
|
||
<tr><td id="27" class="td">27</td></tr>
|
||
<tr><td id="28" class="td">28</td></tr>
|
||
<tr><td id="29" class="td">29</td></tr>
|
||
<tr><td id="30" class="td">30</td></tr>
|
||
<tr><td id="31" class="td">31</td></tr>
|
||
<tr><td id="32" class="td">32</td></tr>
|
||
<tr><td id="33" class="td">33</td></tr>
|
||
<tr><td id="34" class="td">34</td></tr>
|
||
<tr><td id="35" class="td">35</td></tr>
|
||
<tr><td id="36" class="td">36</td></tr>
|
||
<tr><td id="37" class="td">37</td></tr>
|
||
<tr><td id="38" class="td">38</td></tr>
|
||
<tr><td id="39" class="td">39</td></tr>
|
||
<tr><td id="40" class="td">40</td></tr>
|
||
<tr><td id="41" class="td">41</td></tr>
|
||
<tr><td id="42" class="td">42</td></tr>
|
||
</table>
|
||
</td>
|
||
<td style=" background-image:url(<%=path%>/images/show/right.jpg)">
|
||
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style=" background-image:url(<%=path%>/images/show/foot_1.jpg)">
|
||
|
||
</td>
|
||
<td style=" background-image:url(<%=path%>/images/show/foot_2.jpg)">
|
||
|
||
</td>
|
||
<td style=" background-image:url(<%=path%>/images/show/foot_3.jpg)">
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<c:if test="${from=='show'}"><!--如果从拓扑展示过来 则显示下面内容 -->
|
||
<!--告警view-->
|
||
<div id="warningInfo" class="warningBgc">
|
||
<div id="iconBoxHeader" class="window-headerForShow">
|
||
<table border="0" width="100%" align="center">
|
||
<tr>
|
||
<td align="left" width="100%">
|
||
<span id="Title" style="cursor: hand;font-size:10px;color:#FFFFFF;"></span>
|
||
</td>
|
||
<!--
|
||
<td align="right" width="10%">
|
||
<img src="<c:url value='/images/logo_2.png'/>" onclick="clo();" style="cursor: hand; background-color:#FFFFFF;">
|
||
</td>
|
||
-->
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div id="warningContent" class="iconBoxContent" style="width: 200px;height: 80px">
|
||
<ul id="demo-ul">
|
||
<li id="nodeSumNum"></li>
|
||
<li id="trueNum"></li>
|
||
<li id="falseNum" style="color:#FF0000"></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!--右侧机柜列表
|
||
<div style="position: absolute; height: 100%; right: 0;">
|
||
<div id="rightMenuFlag"
|
||
style="float: left;width: 20px;text-align: center;">
|
||
<img src="<%=path%>/images/show/anniu_3.png" border="0" />
|
||
</div>
|
||
<ul id="rightBoxContent"
|
||
style="width: 150px; height: 50%;list-style-type: none;margin:0px;display: none;"
|
||
class="menucenter">
|
||
</ul>
|
||
</div>
|
||
-->
|
||
</c:if>
|
||
<div id="span_info2" class="spanInfo">
|
||
<table id="span_info" >
|
||
<tr><td>IP：</td><td id="spanIp2"></td></tr>
|
||
<tr><td>i18n_sts.text.spanName2_n81i：</td><td id="spanName2"></td></tr>
|
||
<tr><td>i18n_sts.text.spanUType2_n81i：</td><td id="spanUType2"></td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<input id= "gid" type="hidden" value="${groupId }"/>
|
||
<input id= "groupNpId" type="hidden" value="${groupNpId }"/>
|
||
<input id= "groudid" type="hidden" value="${groupId }"/>
|
||
</div>
|
||
<script >
|
||
jQuery(function(){
|
||
$("#warningInfo").hide();
|
||
|
||
$("#iconBox").hide();
|
||
$("#span_info2").hide();
|
||
|
||
//加载"修改图片" 用图片url
|
||
jQuery.post("<%=path %>/nodePosition/nodePosition.do?action=loadImg",
|
||
{},function(data){
|
||
if(data.length>0){
|
||
$.each(data, function(i, imgUrl) {
|
||
var thisSrc = "<%=path%>"+imgUrl;
|
||
var $icon = $("<img border='0' width = '24' height = '24' onclick='javaScript:mouseclickF()' checkVal='0' onmouseout='javaScript:mouseoutF(this)' onmouseover='javaScript:mouseoverF(this)'/>");
|
||
$icon.attr('src',thisSrc).attr('style','margin: 1px');
|
||
$("#imgList").append($icon);
|
||
});
|
||
}
|
||
});
|
||
|
||
//节点UI的拖动
|
||
$("#warningInfo").draggable( {
|
||
cursorAt : {cursor :"move"},
|
||
revert:false,
|
||
handle:'#iconBoxHeader',
|
||
containment:$("#board")
|
||
});
|
||
|
||
$("#iconBox").draggable( {
|
||
cursorAt : {cursor :"move"},
|
||
revert:false,
|
||
handle:'#iconBoxHeader',
|
||
containment:$("#board")
|
||
});
|
||
|
||
//发送请求，载入节点及关联关系
|
||
$('#board').showTopology("<%=path %>/nodePosition/nodePosition.do?action=getNodeModules&gid="+$('#gid').val()+"&npGroupId="+$('#groupNpId').val(),1);
|
||
|
||
//绑定右键菜单，将点击右键时的event srcElement事件放入data缓存
|
||
$('#board').bind('contextmenu', function(e) {
|
||
var $a_obj = $(event.srcElement);
|
||
if($a_obj[0].tagName != 'A'){
|
||
$a_obj = $a_obj.parent();
|
||
}
|
||
$('#board').data('active_obj',$a_obj);
|
||
});
|
||
|
||
//右边菜单 UL
|
||
var $content=$("#rightBoxContent");
|
||
var initWidth=$content.width();
|
||
//菜单触发事件（隐藏、显示右边菜单）
|
||
$("#rightMenuFlag").click(function(){
|
||
$content.stop(true,true);
|
||
if(!$content.is(":hidden")){
|
||
$content.children().hide();
|
||
$content.animate({width:0},function(){$(this).hide()});
|
||
}else{
|
||
$content.show().animate({width:initWidth},function(){
|
||
$(this).children().fadeIn(300);
|
||
})
|
||
}
|
||
});
|
||
|
||
|
||
//新右键菜单
|
||
$(document.body).contextMenu('menu1',{
|
||
onShowMenu: function(e,menu){
|
||
|
||
//获取触发点的图标对象
|
||
var $a_obj = $(e.srcElement).closest('A');
|
||
if($a_obj.size()>0){ //存在保存
|
||
$('#board').data('active_obj',$a_obj);
|
||
}
|
||
|
||
//事件对象判断
|
||
var $Obj = $(e.srcElement);
|
||
if($a_obj.size()>0 ){//当前对象是图标
|
||
var data = $a_obj.data('data');
|
||
$("li[id='getBox'][ltype='node']",menu).hide();
|
||
$("li[id='getChildNg'][ltype='nodeGroup']",menu).hide();
|
||
$("li[id='openTopology'][ltype='node']",menu).hide();
|
||
$("li[id='changeImg'][ltype='node']",menu).hide();
|
||
$("li[ltype='normal']",menu).hide();
|
||
if(data.viewType == '1'){//节点组
|
||
if(data.childNum >0 && data.nodeId!=$("#groudid").val()){
|
||
$("li[id='getChildNg'][ltype='nodeGroup']",menu).show();
|
||
if($("#from").val()=='edit'){//从展示图编辑过来，so存在修改图片
|
||
$("li[id='changeImg'][ltype='node']",menu).show();
|
||
}
|
||
}else{//叶子节点组
|
||
if($("#from").val()=='edit'){//从展示图编辑过来，so存在打开页面
|
||
if(data.nodeId!=$("#groudid").val()){
|
||
$("li[id='openTopology'][ltype='node']",menu).show();
|
||
}
|
||
|
||
$("li[id='changeImg'][ltype='node']",menu).show();
|
||
}else{
|
||
if(data.id !=$("#groupNpId").val()){
|
||
$("li[id='getBox'][ltype='node']",menu).show();
|
||
}else{
|
||
$("ul[id='list1']",menu).hide();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}else if($Obj[0].tagName == 'DIV' && $Obj.attr('divType') == 'line'){//线
|
||
//不作任何操作$("ul li[ltype!='line']",menu).hide();
|
||
$("ul[id='list1']",menu).hide();
|
||
}else{//桌面
|
||
if($("#from").val()=='edit'){
|
||
$("ul li[ltype!='normal']",menu).hide();
|
||
}else{
|
||
$("ul[id='list1']",menu).hide();
|
||
}
|
||
}
|
||
|
||
return menu;
|
||
},
|
||
bindings : {
|
||
save : function(){//保存操作
|
||
saveNode("<%=path %>/nodePosition/nodePosition.do?action=updateNodes",0);
|
||
},
|
||
reset : function(){//页面重置
|
||
document.location.reload();
|
||
},
|
||
getBox : function(){ //查看机柜
|
||
$("#rightBoxContent").empty();
|
||
var icon = $('#board').data('active_obj');
|
||
var data=icon.data("data");
|
||
$("#gid").val(data.nodeId);
|
||
//var url = "<%=path %>/nodePosition/nodePosition.do?action=getBoxByGroup&npGId="+data.id+"&groupId="+data.nodeId;
|
||
//getBoxByGroup(data,url);
|
||
//$("#rightMenuFlag").trigger('click');
|
||
var url = "<%=path %>/nodePosition/nodePosition.do?action=editMap&from=show&gid="+data.nodeId+"&npGroupId="+data.id;
|
||
url = encodeURI(url);
|
||
window.location.href=url;
|
||
},
|
||
getChildNg : function(){
|
||
var icon = $('#board').data('active_obj');
|
||
var data=icon.data("data");
|
||
//alert(data.nodeId);
|
||
//$("#gid").value=data.nodeId;
|
||
var url = "<%=path %>/nodePosition/nodePosition.do?action=getChildNg&gid="+data.nodeId+"&npGroupId="+data.id+"&from="+$('#from').val();
|
||
url = encodeURI(url);
|
||
url = encodeURI(url);
|
||
window.location.href=url;
|
||
},
|
||
changeImg : function(){//修改图标、图片
|
||
$("#imageBox").show(function(){
|
||
var $icon = $('#board').data('active_obj');
|
||
var nl = $icon.data('data');
|
||
var nodePosition ={top: nl.positionY+70,left: nl.positionX+70};
|
||
$(this).css('top',nodePosition.top+'px').css('left',nodePosition.left+'px');
|
||
}).find("#apply").click(function(){
|
||
var $icon = $('#board').data('active_obj');
|
||
var nsrc = $("#imageBox img[checkVal='1']").attr('src');
|
||
$icon.find('img').attr("src",nsrc);
|
||
var nl = $icon.data('data');
|
||
nl.imageUrl = nsrc;
|
||
$icon.data('data',nl);
|
||
$("#imageBox").hide();
|
||
});
|
||
$("#imageBox #cancel").click(function(){
|
||
$("#imageBox").hide();
|
||
});
|
||
},
|
||
openTopology : function(){ //查看告警数据
|
||
var icon = $('#board').data('active_obj');
|
||
var data=icon.data("data");
|
||
//alert(data.nodeId);
|
||
//$("#gid").value=data.nodeId;
|
||
var url= "<%=path %>/nodePosition/nodePosition.do?action=editMap&gid="+data.nodeId+"&npGroupId="+data.id;
|
||
url = encodeURI(url);
|
||
url = encodeURI(url);
|
||
window.location.href=url;
|
||
}
|
||
}
|
||
});
|
||
})
|
||
</script>
|
||
<div id='menu1'style="display: none;">
|
||
<ul id="list1">
|
||
<li id='save' ltype='normal'>i18n_sts.menu.save_n81i</li>
|
||
<li id='reset' ltype='normal'>i18n_sts.menu.reset_n81i</li>
|
||
<li id='changeImg' ltype='node'>i18n_sts.menu.changeImg_n81i</li>
|
||
<li id='getBox' ltype='node' lvalue='1'>i18n_sts.menu.getBox_n81i</li>
|
||
<li id='getChildNg' ltype='nodeGroup'>i18n_sts.menu.getChildNg_n81i</li>
|
||
<li id='openTopology' ltype='node' lvalue='1'>i18n_sts.menu.openTopology_n81i</li>
|
||
<!-- <li id='openTopology' ltype='node' lvalue='1'>查看告警数据</li> -->
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html> |