gfwleak/nms-nmsweb
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
chenjinsong
2018-09-27 16:21:05 +08:00
commit dc91c4c987
2011 changed files with 408920 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

799
WebRoot/page/show/editMap.jsp Normal file
View File

@@ -0,0 +1,799 @@
<%@ 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_em.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>
<link href="<%=path%>/css/themes/base/jquery.ui.css" rel="stylesheet" type="text/css"></link>
<link href="<%=path%>/css/show/topology.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
function clo(){
var spanSize=$("div[id='iconBoxContent']").find("span").size();
if(spanSize!=0){//机柜中有节点
if(confirm("i18n_em.message.saveSets_n81i")){
//先保存机柜内容再隐藏
var icon = $('#board').data('active_obj');
var boxData=icon.data("data");
var ndId= $("#gid").val();
saveBoxLine(ndId,boxData,"<%=path %>/nodePosition/nodePosition.do?action=saveBoxLine");
$("#iconBox").hide();
$('.td').find("span").remove();
}else{
window.location.reload();
}
}else{//没有节点直接关闭
$("#iconBox").hide();
$('.td').find("span").remove();
}
}
//拓扑图展示用
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");
$("#spanIp").text(node.nodeIp);
$("#spanName").text(node.nodeName);
$("#spanUType").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_info1")
.css('top',cPointX+'px')
.css('left',cPointY+'px')
.show();
},
'mouseleave' : function() {
$("#span_info1").hide();
$("#spanIp").empty();
$("#spanName").empty();
$("#spanUType").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_em.message.spanTable_n81i");
}
});
}
</script>
</head>
<body oncontextmenu="event.returnValue=false">
<div id="border_Div">
<div id="board" class="board">
<input id="from" type="hidden" value="${from}"/>
<c:if test="${from!='show'}"><!--如果从拓扑展示过来 则不显示下面内容 -->
<!-- 图片修改窗口 -->
<div id="imageBox" class="imageBox">
<div id="imgList">
</div>
<span style="vertical-align:bottom;float: right;"><input type='button' value='i18n_em.button.ok_n81i' id="apply" /><input type='button' value='i18n_em.button.cancle_n81i' id="cancel" /></span>
</div>
<div class="findDiv" >
i18n_em.text.find_n81i：
<input type="text" id="ispn" name="descinfo" title="i18n_em.message.find_n81i" size="20" />
<img id="getBoxBtn" src="<c:url value='/images/show/sosuo.png'/>" align="middle" border="0" />
</div>
<div id='suggest1' class="boxIconMenu">
<ul id="boxList"
style="width: 150px; height: 50%; list-style-type: none; margin: 0px;"
class="menucenter">
</ul>
</div>
<!-- 右侧菜单列表 -->
<div class="liList" id="rightNodeList">
<div id="rightMenuFlag"
style="float: left;width: 20px;text-align: center;">
<img src="<%=path%>/images/show/anniu_2.png" border="0" />
</div>
<ul id="rightMenuContent"
style="width: 150px; height: 50%;list-style-type: none;margin:0px;display: none;"
class="menucenter">
</ul>
</div>
<!-- 操作信息窗口 -->
<div id="action_info" class="actionInfo">
</div>
</c:if>
<!-- 悬浮窗口 -->
<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="font-size:10px;color:#000000;"></span></td>
<td align="right" width="10%">
<c:if test="${from=='show'}"><!--如果从拓扑展示过来 则不显示下面内容 -->
<img src="<c:url value='/images/logo_2.png'/>" onclick="$('#iconBox').hide();$('.td').find('span').remove();" style="cursor: hand; background-color:#FFFFFF;">
</c:if>
<c:if test="${from!='show'}"><!--如果从拓扑展示过来 则不显示下面内容 -->
<img src="<c:url value='/images/logo_2.png'/>" onclick="$('#iconBox').hide();" style="cursor: hand; background-color:#FFFFFF;">
</c:if>
</td>
</tr>
</table>
<!-- <span type='close' class='ui-icon ui-icon-close' style="cursor: hand; background-color:#FFFFFF;" onclick="clo();"></span> -->
</div>
<div id="iconBoxContent" 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)">
&nbsp;
</td>
<td 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)">
&nbsp;
</td>
</tr>
<tr>
<td style=" background-image:url(<%=path%>/images/show/foot_1.jpg)">
&nbsp;
</td>
<td style=" background-image:url(<%=path%>/images/show/foot_2.jpg)">
&nbsp;
</td>
<td style=" background-image:url(<%=path%>/images/show/foot_3.jpg)">
&nbsp;
</td>
</tr>
</table>
</div>
</div>
<!-- 节点详细信息 -->
<div id="span_info1" class="spanInfo">
<table id="span_info">
<tr><td>IP：</td><td id="spanIp"></td></tr>
<tr><td>i18n_em.text.spanName_n81i：</td><td id="spanName"></td></tr>
<tr><td>i18n_em.text.spanUType_n81i：</td><td id="spanUType"></td></tr>
</table>
</div>
<input id= "gid" type="hidden" value="${groupId }"/>
<input id= "groupNpId" type="hidden" value="${groupNpId }"/>
<input id= "boxNodeId" type="hidden" value=""/>
</div>
</div>
<script >
jQuery(function(){
$('#iconBox').hide();
$("#suggest1").hide();
$("#span_info1").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的拖动
$("#iconBox").draggable( {
cursorAt : {cursor :"move"},
revert:false,
handle:'#iconBoxHeader',
containment:$("#board")
});
$('#getBoxBtn').bind('click',function(){
$("#boxList").empty();
var url = "<%=path %>/nodePosition/nodePosition.do?action=getBox&boxIspn="+$('#ispn').val()+"&gid="+$('#groupNpId').val();
url = encodeURI(url)
getbox(url);
});
//发送请求，载入节点及关联关系
$('#board').editTopology("<%=path %>/nodePosition/nodePosition.do?action=getNodeModules&gid="+$('#gid').val()+"&npGroupId="+$('#groupNpId').val(),1);
//新右键菜单
$('#board').contextMenu('menu1',{
onShowMenu: function(e,menu){
var f = $("#from").val();
//获取触发点的图标对象
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 ){//当前对象是图标
$("li[ltype!='node']",menu).hide();
$("li[id='openTopology']",menu).hide();
var data = $a_obj.data('data');
var node_id = $a_obj.data('node_id');
if(data.viewType == '1'){//节点组
if(f=="show"){
$("ul[id='menuList']",menu).hide();
}else{
$("li[lvalue]",menu).hide();
$("li[id='unLink']",menu).hide();
if(data.childNum >0){
$("li[id='openTopology'][lvalue='1']",menu).show();
}
}
}else if(data.viewType == '2'){//机柜
if(f=="show"){
$("ul li[id!='openBox']",menu).hide();
}else{
$("li[id='unLink']",menu).hide();
$("li[ltype='node'][lvalue='3']",menu).show();
}
}
}else if($Obj[0].tagName == 'DIV' && $Obj.attr('divType') == 'line'){//线
//$("ul li[ltype!='line']",menu).hide();
$("ul[id='menuList']",menu).hide();
}else{//桌面
if(f=="show"){
$("ul[id='menuList']",menu).hide();
}else{
$("ul li[ltype!='normal']",menu).hide();
}
}
return menu;
},
bindings : {
save : function(){//保存操作
if($("#iconBox").is(":visible")==true){
var ndId= $("#gid").val();
var boxNodeId= $("#boxNodeId").val();
var resu = saveBoxLine(ndId,boxNodeId,"<%=path %>/nodePosition/nodePosition.do?action=saveBoxLine");
//$("#iconBox").hide();
//$('.td').find("span").remove();
if(resu==true){
saveNode("<%=path %>/nodePosition/nodePosition.do?action=updateNodes",1);
}
}else{
saveNode("<%=path %>/nodePosition/nodePosition.do?action=updateNodes",1);
}
},
reset : function(){//页面重置
document.location.reload();
},
link : function(){//开始创建关联关系
$('#board').data('action_flag',true);//事件标志对象——开始
var $fromNode = $('#board').data('active_obj');
var nl1 = $fromNode.data('data');
if(!nl1){alert("i18n_em.message.board_n81i");return;}
if(nl1.nodeType=="nodeBox"){
$("#action_info").html("<input type='button' value='i18n_em.button.cancle_n81i' id='exitLink'><br/>i18n_em.message.nodeBox_n81i：<br/>"+ nl1.ispn).show();
}else{
$("#action_info").html("<input type='button' value='i18n_em.button.cancle_n81i' id='exitLink'><br/>i18n_em.message.nodeBox_n81i：<br/>"+ nl1.nodeName).show();
}
$("#board A[divType='node']").bind('click',function(){
if($('#board').data('action_flag')){
addLinkInPage();
}else{
return;
}
});
$("#exitLink").live('click',function(){
$('#board').data('action_flag',false);//事件标志对象——结束
$("#action_info").hide();
});
},
//cancel : function(){//取消关联
// $('#board').data('action_flag',false);//事件标志对象——结束
// $("#action_info").hide();
//},
unLink : function(){//删除关联关系或节点
//var nodesSize = $("a[divType='node'][active='1']").size();
//var lineSize = $("div[divType='line'][active='1'][id*='_x_']").size();
deleteNodesInPage(0);
//deleteLinesInPage(0);
},
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();
});
},
openBox : function(){ //打开机柜
var ff = $("#from").val();
if(ff=="show"){
var $icon = $('#board').data('active_obj');
var nl = $icon.data('data');
$("#iconBox").find('#boxTitle').text("i18n_em.text.ispn_n81i："+nl.ispn);
qry(nl.nodeId);
}else{
if($("#iconBox").is(":visible")==true){//机柜打开着，先保存
alert("i18n_em.message.iconBox_n81i");
return;
}else{
//先清空
$('.td').find("span").remove();
$("#boxNodeId").empty();//清空保存box nodeId 的隐藏域
var icon = $('#board').data('active_obj');
var data=icon.data("data");
$("#boxNodeId").val(data.nodeId);//保存box nodeId
openBoxqRequest(data,"<%=path %>/nodePosition/nodePosition.do?action=initnodeBox&gId="+$('#gid').val()+"&boxId="+data.nodeId+"&pageName="+data.nodeName);
$("#boxTitle").text("i18n_em.text.ispn_n81i："+data.ispn+" 42U");
$("#iconBox").show(function(){
$("#iconBox").css('top','0px');
});
}
}
},
//打开子节点组
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;
}
}
});
//右边菜单 UL
var $content=$("#rightMenuContent");
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);
})
}
});
//从菜单拖到桌面事件(只能是机柜才可以) ul
$content.droppable({
greedy : true,
drop:function(event,ui){
//alert("UI拖拽");
var icon=ui.draggable;
//alert(icon[0].tagName);
if(icon[0].tagName=='A' || icon[0].tagName=='SPAN'){
icon.fadeOut(300,function(){
//创建列表节点并保存信息
var data=icon.data("data");
var node_id=icon.data("node_id");
if(data.tableName=='node_table'){
$content.createLiNode(node_id,data);
//删除格子
delLattNode(data,"<%=path %>/nodePosition/nodePosition.do?action=deleteLatt");
icon.hide(500,function(){
icon.remove();
});
//隐藏节点信息div
if(!$("#span_info1").is(":hidden")){
$("#span_info1").hide();
$("#spanIp").empty();
$("#spanName").empty();
$("#spanUType").empty();
}
}else{
alert("i18n_em.message.dragDisable_n81i");
window.localtion.reload();
}
});
}
}
});
//右边菜单 UL
var $boxList=$("#boxList");
//从菜单拖到桌面事件(只能是机柜才可以) ul
$boxList.droppable({
greedy : true,
drop:function(event,ui){
//alert("boxUL拖拽");
var icon=ui.draggable;
//alert(icon[0].tagName);
if(icon[0].tagName=='A' || icon[0].tagName=='SPAN' ||icon[0].tagName=='LI'){
icon.fadeOut(300,function(){
//创建列表节点并保存信息
var data=icon.data("data");
var node_id=icon.data("node_id");
if(data.tableName=='node_box_table'){
$boxList.createLiNodeBox(node_id,data);
//删除桌面展示关系线
//$('#board').find("div[divType='line'][id*='"+node_id+"']").attr('action','delete').hide();
icon.hide(500,function(){
icon.remove();
});
}else if(data.tableName=='node_table'){
icon.fadeOut(function() {
$content.createLiNode(node_id,data);
});
}else{
$('#board').createIconNode(node_id,data,0);
icon.hide(500,function(){
icon.remove();
});
}
});
}
}
});
//桌面拖拽事件
$('#board').droppable({
greedy : true,
drop:function(event,ui){
//alert("桌面拖拽");
//添加桌面展示图标
var icon=ui.draggable;
if(icon[0].tagName=='LI' || icon[0].tagName=='SPAN'){
var node = icon.data("data");
var node_id = icon.data("node_id");
if(node.tableName=='node_box_table'){
var max=$("a[divType='node'][action='update'][flagType='box']").size();
var i;
var checkFlag = true;
for(i=0;i<max;i++){
var $node = $("a[divType='node'][action='update'][flagType='box']:eq("+i+")");
var nl0 = $node.data('data');
if(nl0.nodeId==node.nodeId){
checkFlag = false;
break;
}
}
if(checkFlag == true){// 如果桌面上没有此机柜 则创建
$('#board').createIconNode(node_id,node,0);
$("a[divType='node'][id='"+node_id+"']")
.attr('action','update')
.css('top',(event.clientY>10 ? (event.clientY-10) : 1)+'px')
.css('left',(event.clientX>10 ? (event.clientX-10) : 1)+'px');
$("a[divType='node'][id='"+node_id+"']").bind('move',function(){
$(this).attr('action','update').resetLine();
});
window.setTimeout(function(){$("a[divType='node'][id='"+node_id+"']").trigger('move')},100);
//删除列表节点并保存信息
icon.hide(500,function(){
icon.remove();
});
}else{
alert("i18n_em.message.boxExists_n81i");
}
$("#suggest1").hide(800);
}else if(node.tableName=='node_table'){
icon.fadeOut(function() {
$content.createLiNode(node_id,node);
});
}else{
alert("i18n_em.message.nodeTable_n81i");
}
}
}
})
$(".td").droppable({
hoverClass :'tdBackColor',
greedy : true,
drop:function(event,ui){
//alert("机柜拖拽");
//添加桌面展示图标
var $aa = $(this);
//alert($aa[0].outerHTML);
var icon=ui.draggable;
var node = icon.data("data");
var node_id = icon.data("node_id");
//alert(node.nodeType);
var uType = node.nodeUType;// u位
var dId = parseInt($aa.attr("id"));//拖放的td 的 id
if(node.nodeType=="nodeBox" && icon[0].tagName=='LI'){
alert("i18n_em.message.dragBoxDisable_n81i");
window.location.reload();
}
if($aa.context.innerHTML.indexOf("<SPAN")>0){
var draTdId = icon.parent().attr("id");
var droTdId = $aa.attr("id");
if(draTdId==droTdId){//判断是否为拖拽和拖放为同一个格子内的节点
icon.fadeOut(function() {
$aa.createSpanNode(node_id,node);
});
}else{
alert("i18n_em.message.dragNodeDisable_n81i");
icon.fadeOut(function() {
$content.createLiNode(node_id,node);
});
}
return;
}else{
if(icon[0].tagName=='LI'){
//var uType = node.nodeUType;// u位
//var dId = parseInt(aa.attr("id"));//拖放的td 的 id
if(uType+dId-1>42){
alert("i18n_em.message.tooBigToBox_n81i");
icon.fadeOut(function() {
$content.createLiNode(node_id,node);
});
}else{
var j;
var delTd = new Array();
var isdro = true;
for(j=1;j<uType;j++){
var thisTd = dId + j;
var sp = $("#"+thisTd);
if(sp[0].innerHTML.indexOf("<SPAN")>0){
isdro = false;
break;
}else{
delTd.push(thisTd);
continue;
}
}
if(isdro){
$aa.createSpanNode(node_id,node);
//删除站位置的行
$.each(delTd, function(k, da) {
//$("#"+da).parent().remove();
$("#"+da).parent().hide();
});
icon.hide(500,function(){
icon.remove();
});
//判断列表中节点的物理ID，如果和拖拽到机柜的节点物理ID相等，则将其从列表中干掉
$("#rightMenuContent > li").each(function(){
var no = $(this).data("data");
var no_id = $(this).data("node_id");
if(no.seqId==node.seqId){
$(this).hide(500,function(){
$(this).remove();
});
}
});
}else{
alert("i18n_em.message.tooBigToBox1_n81i");
icon.fadeOut(function() {
$content.createLiNode(node_id,node);
});
}
}
}else if(icon[0].tagName=='SPAN'){//从一个格子拖到另外的格子
var tId = parseInt(icon.parent().attr('id'));//开始拖拽时所在td 的 id
var $fromTd = $(icon.parent());//开始拖拽时所在td
if(uType+dId-1>42){
alert("节点厚度过大，机柜此U位无法放下此节点");
icon.fadeOut(function() {
$fromTd.createSpanNode(node_id,node);
});
}else{
var c;
var delTd = new Array();
var isdro = true;
for(c=1;c<uType;c++){
var thisTd = dId + c;
var sp = $("#"+thisTd);
if(sp[0].innerHTML.indexOf("<SPAN")>0){
isdro = false;
break;
}else{
delTd.push(thisTd);
continue;
}
}
if(isdro){
//alert("icon:"+icon[0].outerHTML);
$aa.createSpanNode(node_id,node);
icon.fadeOut(500,function(){
icon.remove();
});
//删除站位置的行
$.each(delTd, function(k, da) {
//$("#"+da).parent().remove();
$("#"+da).parent().hide();
});
//创建删掉的行
//var createTd = new Array();
var cc;
for(cc=1;cc<uType;cc++){
var cTd = tId + cc;
//createTd.push(cTd);
$("#"+cTd).parent().removeAttr("style");
}
//$.each(createTd, function(g, g) {
//var $tr = "<tr><td id='"+g+"' class='td ui-droppable'>"+g+"</td></tr>";
// $($("#"+tId).parent()).after($tr);
// tId++;
//});
//alert($("#spanTable")[0].outerHTML);
}else{
alert("i18n_em.message.tooBigToBox1_n81i");
icon.fadeOut(function() {
$fromTd.createSpanNode(node_id,node);
});
}
}
}
}
}
})
})
</script>
<div id='menu1'style="display: none;">
<ul id='menuList'>
<li id='save' ltype='normal'>i18n_em.menu.save_n81i</li>
<li id='reset' ltype='normal'>i18n_em.menu.reset_n81i</li>
<!-- <li id='unLink' ltype='line'>删除关联</li> -->
<li id='link' ltype='node'>i18n_em.menu.link_n81i</li>
<!-- <li id='cancel' ltype='node'>取消操作</li> -->
<li id='unLink' ltype='node'>i18n_em.menu.unLink_n81i</li>
<li id='changeImg' ltype='node'>i18n_em.menu.changeImg_n81i</li>
<li id='openBox' ltype='node' lvalue='3'>i18n_em.menu.openBox_n81i</li>
<li id='openTopology' ltype='node' lvalue='1'>i18n_em.menu.openTopology_n81i</li>
</ul>
</div>
</body>
</html>

89
WebRoot/page/show/flexTopo.jsp Normal file
View File

@@ -0,0 +1,89 @@
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/jstl/c" prefix="c"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>i18n_ft.message.title_n81i</title>
<link href="<c:url value='/css/styles.css'/>" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="<c:url value="/topo/swfobject.js"/>"></script>
<script type="text/javascript">
function inint()
{
if(document.getElementById("topo") != null)
{
document.getElementById("topo").focus();
}
}
</script>
<script language="javascript" type="text/javascript">
var contentpath = "<%=request.getContextPath()%>";
var swfVersionStr = "10.0.0";
var xiSwfUrlStr = contentpath+"/topo/playerProductInstall.swf";
var pathflash = contentpath+"/topo/topo.swf";
var flashvars = {"context":contentpath};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
params.wmode="transparent";
var attributes = {};
attributes.id = "topo";
attributes.name = "topo";
attributes.align = "middle";
swfobject.embedSWF(
pathflash, "flashContent",
"100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body onload="inint();" style="margin:0 0;padding:0 0" style="overflow: hidden;">
<!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough
JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
when JavaScript is disabled.
-->
<div id="flashContent" align="center" style="font-size:14px; visibility:hidden;margin: 100 200">
<p>
i18n_ft.message.flashContent_n81i
<script type="text/javascript">
var contentpathforimage = "<%=request.getContextPath()%>";
document.write("<a href='"+contentpathforimage+"/download/downLoadFile!download.do?file=flashplayer11_install.exe'>i18n_ft.message.flashUrl_n81i</a>" );
</script>
</p>
</div>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="topo">
<param name="movie" value="<%=request.getContextPath()%>/topo/topo.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="<%=request.getContextPath()%>/topo/topo.swf" width="100%" height="100%">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<div align="center" style="font-size:14px;margin: 100 200">
i18n_ft.message.noJsOrFlash_n81i
<a href='<%=request.getContextPath()%>/download/downLoadFile!download.do?file=flashplayer11_install.exe'>i18n_ft.message.flashUrl_n81i</a>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</body>
</html>

297
WebRoot/page/show/nodeBox/addBoxInfo.jsp Normal file
View File

@@ -0,0 +1,297 @@
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/jstl/c" prefix="c"%>
<%@ taglib uri="/jstl/fn" prefix="fn"%>
<%
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":"
+ request.getServerPort() + path + "/";
request.setAttribute("vEnter","\n");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>i18n_abi.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<link href="<c:url value='/css/suggest.css'/>" rel="stylesheet"
type="text/css" />
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery-1.4.2.min.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/onmouse.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/j.suggest.js'/>"></script>
</head>
<script language="javascript" type="text/javascript">
$(document).keydown(function (e) {//绑定键盘按下事件 防止退格键返回
var doPrevent;
// for IE && Firefox
var varkey = (e.keyCode) || (e.which) || (e.charCode);
if (varkey == 8) {
var d = e.srcElement || e.target;
if (d.tagName.toUpperCase() == 'INPUT' || d.tagName.toUpperCase() == 'TEXTAREA') {
doPrevent = d.readOnly || d.disabled;
if (d.type.toUpperCase() == 'SUBMIT'
|| d.type.toUpperCase() == 'RADIO'
|| d.type.toUpperCase() == 'CHECKBOX'
|| d.type.toUpperCase() == 'BUTTON') {
doPrevent = true;
}
}
else {
doPrevent = true;
}
}
else {
doPrevent = false;
}
if (doPrevent)
e.preventDefault();
});
$(function(){
$("#boxUType").change(function(){
if(!$id("boxUType","sz","i18n_abi.text.boxUType_n81i")){
$("#boxUType").val("");
}
})
})
function checkIspn(){
var type;
$.ajax({
url:"<%=path%>/nodePosition/boxSet.do?action=addCheck",
type : "POST",
async:false,
data:$('#Mkform').serialize(),
success : function(data) {
if(data == "exist"){
$("#ispn").next().html("i18n_abi.message.ispn_n81i");
type = false;
}else if(data == "exception"){
alert("i18n_abi.message.faild_n81i");
type = false;
}else if(data =="success"){
type = true;
}
}
});
return type;
}
function add(){
var roomIspn ;
if($id("ispn","","i18n_abi.text.roomIspn_n81i") && $id("boxUType","sz","i18n_abi.text.boxUType_n81i")){
if($("select[name=nodeBox.roomIspn]").val()==undefined){
roomIspn = $id("roomIspn","","i18n_abi.text.roomIspn_n81i") ;
}else{
roomIspn = $id("roomIspn","xz","i18n_abi.text.roomIspn_n81i") ;
}
if(roomIspn && $id("roomRowPosition","xz","i18n_abi.text.roomRowPosition_n81i")
&& $id("roomColPosition","xz","i18n_abi.text.roomColPosition_n81i") && $id("descinfo","","i18n_abi.text.descinfo_n81i")){
if(!containSpecial(lrtrim($("#ispn").val()))){
if(checkIspn($("#ispn").val())){
document.Mkform.action="<%=path%>/nodePosition/boxSet.do?action=doAdd";
document.Mkform.submit();
}
}else{
$("#ispn").next().html("i18n_abi.message.ispn1_n81i");
return;
}
}
}
}
//去除左右两端空格
function lrtrim(s){
s = s.replace(/(^\s*)|(\s*$)/g,"");
return s;
}
function goBack(){
document.Mkform.action="<%=path%>/nodePosition/boxSet.do?action=query";
document.Mkform.submit();
}
// -----机房及位置相关处理
$(function(){
//-- 机房 事件绑定 获取可选行号
roomIspnChange();
//-- i18n_abi.text.roomRowPosition_n81i 事件绑定 由行号决定可选列号
$("#roomRowPosition").blur(function(){
$("#roomColPosition").empty();
$("#roomColPosition").append("<option value=''>i18n_abi.message.selectDefault_n81i</option>");
var roomIspnVal = $("#roomIspn").val();
if(roomIspnVal==null||roomIspnVal==""||roomIspnVal==undefined){
roomIspnVal = $("select[name=nodeBox.roomIspn]").val()
}
var curVal = $(this).val();
if(curVal!=""){
$.post("<c:url value='/nodePosition/boxSet!getRoomFreeCols.do'/>",
{"roomIspn":roomIspnVal,"rowNum":curVal},
function(data){
// 追加option元素
if(data!=null && data!=""){
$.each(data, function(i,val){
$("#roomColPosition").append("<option value='"+val+"'>" + val + "</option>");
});
}
}, "json");
}
});
});
function roomIspnChange(){
var roomIspnVal;
roomIspnVal = $("#roomIspn").val();
if(roomIspnVal==null||roomIspnVal==""||roomIspnVal==undefined){
roomIspnVal = $("select[name=nodeBox.roomIspn]").val()
}
$("#roomRowPosition").empty();
$("#roomRowPosition").append("<option value=''>i18n_abi.message.selectDefault_n81i</option>");
$("#roomColPosition").empty();
$("#roomColPosition").append("<option value=''>i18n_abi.message.selectDefault_n81i</option>");
$.post("<c:url value='/nodePosition/boxSet!getRoomFreeRows.do'/>",
{"roomIspn":roomIspnVal},
function(data){
// 追加option元素
if(data!=null && data!=""){
$.each(data, function(i,val){
$("#roomRowPosition").append("<option value='"+val+"'>" + val + "</option>");
});
}
}, "json");
}
</script>
<body>
<div class="middle_list" >
<div class="box_2">
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="goBack()" value="i18n_abi.button.back_n81i"/>
</div>
<form action="" name="Mkform" id="Mkform" method="post">
<input type="hidden" name="ispnNum" value="${ispnNum }">
<input type="hidden" name="pageNo" value="${pageNo }" />
<input type="hidden" name="pageSize" value="${pageSize }" />
<input type="hidden" name="fromWhere" value="${fromWhere }"/>
<input type="hidden" name="roomid" value="${roomid }"/>
<input type="hidden" name="roomIspn" value="${roomIspn }" >
<div style="clear: both"></div>
<table border="0" cellpadding="0" cellspacing="0" class="table">
<tr>
<td colspan="2" class="color_8">
<strong>i18n_abi.text.title_n81i</strong>
</td>
</tr>
<tr>
<td class="color_1" width="30%" align="right">
i18n_abi.text.ispn_n81i：
</td>
<td class="color_3" align="left">
<input type="text" name="nodeBox.ispn" id="ispn" />
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" width="30%" align="right">
i18n_abi.text.U_n81i：
</td>
<td class="color_3" align="left">
<input type="text" name="nodeBox.boxUType" id="boxUType"
value="42" />
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_abi.text.roomIspn_n81i：
</td>
<td class="color_3" align="left">
<c:choose>
<c:when test="${roomIspn==null||roomIspn==''}">
<select name="nodeBox.roomIspn" onchange="roomIspnChange()" id="roomIspn">
<option value="">i18n_abi.message.selectDefault_n81i</option>
<c:forEach items="${nodeRoomList}" var="item">
<option value="${item.roomIspn}">${item.roomIspn}</option>
</c:forEach>
</select>
</c:when>
<c:otherwise>
<input disabled="disabled" value="${roomIspn }"/>
<input name="nodeBox.roomIspn" id="roomIspn" type="hidden" value="${roomIspn }"/>
</c:otherwise>
</c:choose>
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_abi.text.roomRowPosition_n81i：
</td>
<td class="color_3" align="left">
<select name="nodeBox.roomRowPosition" id="roomRowPosition"
style="width: 151px;">
<option value="">
i18n_abi.message.selectDefault_n81i
</option>
</select>
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_abi.text.roomColPosition_n81i：
</td>
<td class="color_3" align="left">
<select name="nodeBox.roomColPosition" id="roomColPosition"
style="width: 151px;">
<option value="">
i18n_abi.message.selectDefault_n81i
</option>
</select>
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" width="20%" align="right">
i18n_abi.text.des_n81i：
</td>
<td class="color_3" align="left">
<textarea rows="5" cols="60" id="descinfo"
name="nodeBox.descinfo" ></textarea>
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_7" colspan="2" align="right">
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'" onclick="add()" value="i18n_abi.text.submit_n81i"/>
&nbsp;
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:document.forms['Mkform'].reset()" value="i18n_abi.text.reset_n81i"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

456
WebRoot/page/show/nodeBox/boxInfoList.jsp Normal file
View File

@@ -0,0 +1,456 @@
<%@ 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>i18n_bil.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet" type="text/css" />
<link href="<c:url value='/js/jBox/Skins/Gray/jbox.css'/>" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery-1.4.2.min.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/onmouse.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery.suggest.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value="/js/jBox/jquery.jBox-2.3.min.js"/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value="/js/fileInput.js"/>"></script>
<style type="text/css">
.mydiv {
background-color:#fff;
border: 1px solid #000;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 220px;
height: 80px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
margin-top:0px;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
/*The END*/
</style>
</head>
<script language="javascript" type="text/javascript">
var msg = '${MSG}';
if(msg=='1'){
alert("i18n_bil.message.success_n81i");
}else if(msg=='2'){
alert("i18n_bil.message.faild_n81i");
}
//添加记录
function addNb(){
document.form3.action ="<%=path%>/nodePosition/boxSet!executeAction.do?action=openAdd&pageNo="+'${pageNo }'+"&pageSize="+'${pageSize }';
document.form3.submit();
}
//修改记录
function updNb(){
if(!isRigthCheck("ids", "edit")){
alert("i18n_bil.message.selectOne_n81i");
}else{
document.form3.action ="<%=path%>/nodePosition/boxSet!executeAction.do?action=openUpdate&pageNo="+'${pageNo }'+"&pageSize="+'${pageSize }';
document.form3.submit();
}
}
//删除记录
function delNb(){
if(!isRigthCheck("ids", "remove")){
alert("i18n_bil.message.selectOne_n81i");
}else if(confirm("i18n_bil.message.delete_n81i")){
document.form3.action ="<%=path%>/nodePosition/boxSet!executeAction.do?action=del&pageNo="+'${pageNo }'+"&pageSize="+'${pageSize }';
document.form3.submit();
}
}
//查询记录
function qry(){
document.form3.action = "<%=path%>/nodePosition/boxSet.do?action=query";
document.form3.submit();
}
//返回
function goBack(){
document.location.href = "<%=path%>/nodePosition/roomManage.do?action=query";
}
var set_Id;
var ajaxProperties = "";
var ajaxTableName = "";
var ajaxType = "";
var id = "";
var returnDiv = "";
var ajaxValue = "";
function lianxiangkeydown() {
clearTimeout(set_Id);
}
function lianxiangkeyup(ajaxProperties1,ajaxTableName1,ajaxType1,id1,returnDiv1,ajaxValue1) {
if(parent.document.getElementById("lianxiangStatus").value=="2")
{
if(jQuery.trim(ajaxValue1)=="") return false;
ajaxProperties = ajaxProperties1;
ajaxTableName = ajaxTableName1;
ajaxType = ajaxType1;
id = id1;
returnDiv = returnDiv1;
if(!containSpecial(ajaxValue1)){
ajaxValue = ajaxValue1;
}else{
alert('i18n_bil.message.inputInfo_n81i');
$("#"+id).val('');
return;
}
clearTimeout(set_Id);
set_Id = setTimeout(ajaxForLianxiang,500);
}
}
function ajaxForLianxiang()
{
jQuery.post("<%=path%>/sysManage/sysPopedomManage!queryInfoForAjax.do",
{"ajaxProperties":ajaxProperties,"ajaxTableName":ajaxTableName,"ajaxType":ajaxType,"ajaxValue":ajaxValue},function(data)
{
var lianxiangList = data.split(",");
jQuery("#"+id).suggest(lianxiangList,{hot_list:lianxiangList,attachObject:"#"+returnDiv});
});
}
function ieBrowser(){
if($.browser.msie){
if($.browser.version.split('.')[0]<=7){
return false;
}else{
return true;//ie8+
}
}
}
function goGuide(datas) {
if(datas!=null && datas!=""){
if(datas.resu=='over') {
window.location ="<%=path%>/sysManage/guideManage!execute.do?action=index";
}
}
}
// 程辉 2013-4-27 新增 模板下载
function downloadExample() {
document.form3.action = "<%=path%>/nodePosition/boxSet.do?action=downloadExample";
document.form3.submit();
document.form3.action = "<%=path%>/nodePosition/boxSet.do?action=query";
}
//程辉 2013-4-27 新增 导入节点
function importXls() {
var myfileVal = document.getElementById("myFile").value;
if(myfileVal=="") {
alert("i18n_bil.message.selectImportFile_n81i");
}else if((myfileVal.lastIndexOf(".xlsx")+5)!=myfileVal.length && (myfileVal.lastIndexOf(".xls")+4)!=myfileVal.length){
alert("i18n_bil.message.selectFileType_n81i");
}else if(confirm('i18n_bil.message.sureToImport_n81i')){
//window.location = "<%=path%>/nodePosition/boxSet.do?action=importXls";
document.form3.action = "<%=path%>/nodePosition/boxSet.do?action=importXls";
document.form3.submit();
document.form3.action = "<%=path%>/nodePosition/boxSet.do?action=query";
}
}
//程辉 2013-5-8 新增 导出当前页
function emportCurrentXls() {
document.form3.action = "<c:url value='/'/>//nodePosition/boxSet.do?action=emportCurrentXls&pageNo="+'${pageNo }'+"&pageSize="+'${pageSize }'+"&ispnNum="+$("#ispn").val();
document.form3.submit();
closeDiv();
document.form3.action = "<%=path%>/nodePosition/boxSet.do?action=query";
}
//程辉 2013-5-8 新增 导出全部
function emportAllXls() {
document.form3.action = "<c:url value='/'/>/nodePosition/boxSet.do?action=emportAllXls&ispnNum="+$("#ispn").val();
document.form3.submit();
closeDiv();
document.form3.action = "<%=path%>/nodePosition/boxSet.do?action=query";
}
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}
function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}
$(function(){
var dh = document.body.clientHeight;
var dhh = dh-60+"px;";
var tableHeight = $("#info").height();
if(tableHeight > dh-60){
$("#maindiv").attr("style","clear:both;margin-left:6px;overflow-y:auto;overflow-x:auto;width:99%;font-size:12px;height: "+dhh);
if(ieBrowser()){
$("#info").attr("style","width:100%;");
}else{
$("#info").attr("style","width:98.5%;");
}
}else{
$("#maindiv").attr("style","clear:both;margin-left:6px;overflow-y:auto;overflow-x:auto;width:98%;font-size:12px;height: "+dhh);
$("#info").attr("style","width:100%;");
}
$("#info").floatHeaderDiv();
// $("#maindiv").attr("style","clear:left");
if($("#isComplete").val()=='0'){
//var content = {
// content: '业务系统操作已完成，是否进行下一步操作?',
// buttons: { '下一步': 1, '返回'：0,'取消': -1 },
// buttonsFocus: 0,
// submit: function (v, h, f) {
// if(v == 1) {//执行下一步--用户组
// window.location ="<%=path%>/sysManage/userGroupPerssion.do?action=query";
// }
// if(v == 0){//返回到设置向导页
// window.location ="<%=path%>/sysManage/guideManage!execute.do?action=index";
// }
// if(v == -1){//返回到设置向导页
// return;
// }
// }
//};
//$.jBox(content);
var submit = function (v, h, f) {
if (v == 'yes') {
$("input[type=hidden][name=fromWhere]").val('formGuide');
return;
}
if (v == 'no') {
$.post("<c:url value='/sysManage/guideManage!setComplete.do'/>",
{
packNum:4,
packName:'jg'
},
function(datas){
goGuide(datas);
},"json");
}
};
$.jBox.warning("i18n_bil.message.warning_n81i", "i18n_bil.message.hint_n81i", submit,{icon: false});
}
});
</script>
<body>
<div class="middle_list" style="overflow: hidden;">
<form name=form3 id="frmArticleType"
action="<c:url value='/nodePosition/boxSet.do'/>" method="post" enctype="multipart/form-data">
<input type="hidden" name = "isComplete" id="isComplete" value="${isComplete}"/>
<input type="hidden" name="fromWhere" value="${fromWhere }"/>
<input type="hidden" name="roomid" value="${roomid }"/>
<input type="hidden" name="roomIspn" value="${roomIspn }"/>
<div id="divTop">
<div class="box_1">
<label class="divTopText"><font class="selectText">i18n_bil.text.nodeBoxTable_n81i</font>
<input type="text" id="ispn"
onkeyup="lianxiangkeyup('ispn','NodeBoxTable','String','ispn','suggest1',this.value);"
name="ispnNum" title="i18n_bil.message.nodeBoxTable_n81i" value="${ispnNum}" size="20" />
<div id='suggest1' class="ac_results"></div></label>
<img src="<c:url value='/images/button_chaxun.png'/>"
class="img_middle" onclick="javascript:qry();" />
</div>
<div class="box_2">
<!-- 程辉 2013-4-27 新增 begin-->
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:downloadExample();" value="i18n_bil.button.downloadExample_n81i"/>
&nbsp;
<input type="button" value="i18n_bil.text.importXls_n81i" title="i18n_bil.text.importXls_n81i" class="btn3_mouseout" onclick="javascript:uploadFile(this)"/>
<input type="file" name="myFile" id="myFile" value="" class="filebtn" onchange="javascript:setValue(this.value)"/>
&nbsp;
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:importXls();" value="i18n_bil.button.importXls_n81i"/>
&nbsp;
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:showDiv();" value="i18n_bil.button.showDiv_n81i"/>
&nbsp;
<!-- 程辉 2013-4-27 新增 end-->
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:addNb();" value="i18n_bil.button.add_n81i" />
&nbsp;
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:updNb();" value="i18n_bil.button.update_n81i" />
&nbsp;
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:delNb();" value="i18n_bil.button.delete_n81i" />
&nbsp;
<%--<jsp:include page="/include/include.jsp" />--%>
<c:if test="${roomid ne null && roomid ne ''}">
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:goBack();" value="i18n_bil.button.back_n81i" />
</c:if>
</div>
</div>
<div id="maindiv">
<table border="0" cellpadding="0" cellspacing="0" class="table" id="info">
<tr>
<td width="10%" class="color_top" nowrap>
<input type="checkbox"
name="checkbox62" value="checkbox" onClick="checkAll(this)" />i18n_bil.text.index_n81i
</td>
<td width="20%" class="color_top" nowrap>
i18n_bil.text.nodeBoxTable_n81i
</td>
<td width="30%" class="color_top" nowrap>
i18n_bil.text.descinfo_n81i
</td>
<td width="20%" class="color_top" nowrap>
i18n_bil.text.roomIspn_n81i
</td>
</tr>
<c:set var="index" value="${1}" />
<c:choose>
<c:when test="${fn:length(nodeBoxList) > 0}">
<c:forEach items="${nodeBoxList}" var="nodebox" varStatus="vs">
<c:set var="color" value="color_1"/>
<c:set var="color_end" value="color_7"/>
<c:if test="${vs.count%2!=0 }">
<c:set var="color" value="color_3"/>
<c:set var="color_end" value="color_6"/>
</c:if>
<tr>
<td class="${color }">
<input type="checkbox" name="ids" id="ids"
value="${nodebox.nodeBoxId}" />
${index+(pageNo-1)*pageSize}
</td>
<td class="${color }">
${nodebox.ispn}
</td>
<td class="${color }">
${nodebox.descinfo}
</td>
<td class="${color }">
${nodebox.roomIspn}
</td>
</tr>
<c:set var="index" value="${index + 1}" />
</c:forEach>
</c:when>
<c:otherwise>
<tr>
<td colspan="4" height="20" class="color_6" align="center">
i18n_bil.text.noRecord_n81i
</td>
</tr>
</c:otherwise>
</c:choose>
</table>
</div>
<c:if test="${!empty nodeBoxList}">
<div id="divBoot">
<jsp:include page="/common/page.jsp" />
</div>
</c:if>
</form>
</div>
<br />
<div id="popDiv" class="mydiv" style="display:none;">
<input type="hidden" />
<input type="button" class=btn3_mouseout style="width:100px;"
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:emportCurrentXls();" value="i18n_bil.button.exportCurrentPage_n81i"/>
&nbsp;
<input type="button" class=btn3_mouseout style="width:80px"
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:emportAllXls();" value="i18n_bil.button.exportAllData_n81i"/>
&nbsp;<br/>
<a href="javascript:closeDiv()">i18n_bil.text.closeWindow_n81i</a></div>
<div id="bg" class="bg" style="display:none;"></div>
</body>
</html>

93
WebRoot/page/show/nodeBox/showImportError.jsp Normal file
View File

@@ -0,0 +1,93 @@
<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/common/taglib.jsp"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>i18n_sie.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
function goBack(){
document.form1.action="<%=path%>/nodePosition/boxSet.do?action=query";
document.form1.submit();
}
</script>
</head>
<body>
<div class="middle_list">
<!--中间部分右边开始-->
<form action="" name="form1" id="form1" method="post">
<input type="hidden" name="isComplete" value="${isComplete }" />
<input type="hidden" name="ispnNum" value="${ispnNum }" />
<table align="center" border="0" cellpadding="0"
cellspacing="0" class="table1">
<tr>
<td height="30" class="color_7" colspan="6">
<strong>i18n_sie.text.title_n81i</strong>
</td>
</tr>
<tr>
<td class="color_1">
i18n_sie.text.index_n81i
</td>
<td class="color_1">
i18n_sie.text.U_n81i
</td>
<td class="color_1">
i18n_sie.text.roomIspn_n81i
</td>
<td class="color_1">
i18n_sie.text.roomRowPosition_n81i
</td>
<td class="color_1">
i18n_sie.text.roomColPosition_n81i
</td>
<td class="color_7">
i18n_sie.text.errorInfo_n81i
</td>
</tr>
<c:forEach items="${errorList}" var="info">
<tr>
<td class="color_3">
${info.ispn }
</td>
<td class="color_3">
${info.boxUType }
</td>
<td class="color_3">
${info.roomIspn }
</td>
<td class="color_3">
${info.roomRowPosition }
</td>
<td class="color_3">
${info.roomColPosition }
</td>
<td class="color_6">
${info.showError }
</td>
</tr>
</c:forEach>
<tr>
<td class="color_7" colspan="6">
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'" onclick="goBack()" value="i18n_sie.button.back_n81i"/>
&nbsp;
</td>
</tr>
</table>
</form>
<!--中间部分右边结束-->
</div>
</body>
</html>

310
WebRoot/page/show/nodeBox/updateBoxInfo.jsp Normal file
View File

@@ -0,0 +1,310 @@
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/jstl/c" prefix="c"%>
<%@ taglib uri="/jstl/fn" prefix="fn"%>
<%@ taglib uri="/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>i18n_ubi.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<link href="<c:url value='/css/suggest.css'/>" rel="stylesheet"
type="text/css" />
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery-1.4.2.min.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/onmouse.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/j.suggest.js'/>"></script>
</head>
<script language="javascript" type="text/javascript">
$(document).keydown(function (e) {//绑定键盘按下事件 防止退格键返回
var doPrevent;
// for IE && Firefox
var varkey = (e.keyCode) || (e.which) || (e.charCode);
if (varkey == 8) {
var d = e.srcElement || e.target;
if (d.tagName.toUpperCase() == 'INPUT' || d.tagName.toUpperCase() == 'TEXTAREA') {
doPrevent = d.readOnly || d.disabled;
if (d.type.toUpperCase() == 'SUBMIT'
|| d.type.toUpperCase() == 'RADIO'
|| d.type.toUpperCase() == 'CHECKBOX'
|| d.type.toUpperCase() == 'BUTTON') {
doPrevent = true;
}
}
else {
doPrevent = true;
}
}
else {
doPrevent = false;
}
if (doPrevent)
e.preventDefault();
});
$(function(){
$("#boxUType").change(function(){
if(!$id("boxUType","sz","i18n_ubi.text.boxUType_n81i")){
$("#boxUType").val("");
}
})
})
function updateCheck(){
var type;
$.ajax({
url:"<%=path%>/nodePosition/boxSet.do?action=updateCheck",
type : "POST",
async:false,
data:$('#Mkform').serialize(),
success : function(data) {
if(data == "exception"){
type = false;
alert("i18n_ubi.message.faild_n81i");
}else if(data =="success"){
type = true;
}else{
type = false;
alert(data);
}
}
});
return type;
}
function add(){
if($id("ispn","","i18n_ubi.text.ispn_n81i") && $id("descinfo","","i18n_ubi.text.descinfo_n81i") && $id("boxUType","sz","i18n_ubi.text.boxUType_n81i")
&& $id("roomIspn","","i18n_ubi.text.roomIspn_n81i") && $id("roomRowPosition","xz","i18n_ubi.text.roomRowPosition_n81i")
&& $id("roomColPosition","xz","i18n_ubi.text.roomColPosition_n81i")){
if(!containSpecial(lrtrim($("#ispn").val()))){
document.Mkform.action="<%=path%>/nodePosition/boxSet.do?action=doUpdate";
document.Mkform.submit();
}else{
$("#ispn").next().html("i18n_ubi.message.inputInfo_n81i");
return;
}
}
}
//去除左右两端空格
function lrtrim(s){
s = s.replace(/(^\s*)|(\s*$)/g,"");
return s;
}
function goBack(){
document.Mkform.action="<%=path%>/nodePosition/boxSet.do?action=query";
document.Mkform.submit();
}
function resetInit(){
$("#roomIspn").val("${nodeBox.roomIspn }");
var roomIspn = "${nodeBox.roomIspn }";
if(roomIspn!=""){
$.post("<c:url value='/nodePosition/boxSet!getRoomFreeRows.do'/>",
{"roomIspn":roomIspn,"boxId":${nodeBox.nodeBoxId}},
function(data){
// 追加option元素
if(data!=null && data!=""){
$.each(data, function(i,val){
$("#roomRowPosition").append("<option value='"+val+"'>" + val + "</option>");
});
}
//选中行
$("#roomRowPosition option[value=${nodeBox.roomRowPosition}]").attr("selected","selected");
}, "json");
}
var roomRowPosition = "${nodeBox.roomRowPosition}";
if(roomRowPosition!=""){
$.post("<c:url value='/nodePosition/boxSet!getRoomFreeCols.do'/>",
{"roomIspn":roomIspn,"rowNum":roomRowPosition,"boxId":${nodeBox.nodeBoxId}},
function(data){
// 追加option元素
if(data!=null && data!=""){
$.each(data, function(i,val){
$("#roomColPosition").append("<option value='"+val+"'>" + val + "</option>");
});
}
//选中列
$("#roomColPosition option[value=${nodeBox.roomColPosition}]").attr("selected","selected");
}, "json");
}
}
// -----机房及位置相关处理
$(function(){
var first = 1;
var vstart;
//-- 机房 事件绑定 获取可选行号
$("#roomRowPosition").empty();
$("#roomRowPosition").append("<option value=''>i18n_ubi.message.selectDefault_n81i</option>");
$("#roomColPosition").empty();
$("#roomColPosition").append("<option value=''>i18n_ubi.message.selectDefault_n81i</option>");
var curVal = $("#roomIspn").val();
if(curVal!=""){
$.post("<c:url value='/nodePosition/boxSet!getRoomFreeRows.do'/>",
{"roomIspn":curVal,"boxId":${nodeBox.nodeBoxId}},
function(data){
// 追加option元素
if(data!=null && data!=""){
$.each(data, function(i,val){
$("#roomRowPosition").append("<option value='"+val+"'>" + val + "</option>");
});
}
if(first==1){//第一次加载,选中行
$("#roomRowPosition option[value=${nodeBox.roomRowPosition}]").attr("selected","selected");
$("#roomRowPosition").trigger("blur");//获取列
}
}, "json");
}
//-- 机房行号 事件绑定 由行号决定可选列号
$("#roomRowPosition").blur(function(){
$("#roomColPosition").empty();
$("#roomColPosition").append("<option value=''>i18n_ubi.message.selectDefault_n81i</option>");
var roomIspn = $("#roomIspn").val();
var curVal = $(this).val();
if(curVal!=""){
$.post("<c:url value='/nodePosition/boxSet!getRoomFreeCols.do'/>",
{"roomIspn":roomIspn,"rowNum":curVal,"boxId":${nodeBox.nodeBoxId}},
function(data){
// 追加option元素
if(data!=null && data!=""){
$.each(data, function(i,val){
$("#roomColPosition").append("<option value='"+val+"'>" + val + "</option>");
});
}
if(first==1){//第一次加载，选中列
$("#roomColPosition option[value=${nodeBox.roomColPosition}]").attr("selected","selected");
first = 0;
}
}, "json");
}
});
});
</script>
<body >
<div class="middle_list" >
<div class="box_2">
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="goBack()" value="i18n_ubi.button.back_n81i"/>
</div>
<form action="" name="Mkform" method="post" id="Mkform">
<input type="hidden" name="nodeBox.nodeBoxId" value="${nodeBox.nodeBoxId}" />
<input type="hidden" name="ispnNum" value="${ispnNum }">
<input type="hidden" name="pageNo" value="${pageNo }" />
<input type="hidden" name="pageSize" value="${pageSize }" />
<input type="hidden" name="roomid" value="${roomid }"/>
<input type="hidden" name="roomIspn" value="${roomIspn }"/>
<jsp:include page="/common/transferHiddenParameter.jsp" />
<div style="clear: both"></div>
<table border="0" cellpadding="0" cellspacing="0" class="table">
<tr>
<td colspan="2" class="color_8">
<strong>i18n_ubi.text.title_n81i</strong>
</td>
</tr>
<tr>
<td class="color_1" width="30%" align="right">
i18n_ubi.text.index_n81i：
</td>
<td class="color_3" align="left">
<input type="text" name="nodeBox.ispn" id="ispn" value="${nodeBox.ispn}"/>
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" width="30%" align="right">
i18n_ubi.text.U_n81i：
</td>
<td class="color_3" align="left">
<input type="text" name="nodeBox.boxUType" id="boxUType" value="${nodeBox.boxUType}"/>
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_ubi.text.roomIspn_n81i：
</td>
<td class="color_3" align="left">
<input value="${nodeBox.roomIspn }" disabled="disabled"/>
<input name="nodeBox.roomIspn" id="roomIspn" type="hidden" value="${nodeBox.roomIspn }" />
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_ubi.text.roomRowPosition_n81i：
</td>
<td class="color_3" align="left">
<select name="nodeBox.roomRowPosition" id="roomRowPosition"
style="width: 151px;">
<option value="">
i18n_ubi.message.selectDefault_n81i
</option>
</select>
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_ubi.text.roomColPosition_n81i：
</td>
<td class="color_3" align="left">
<select name="nodeBox.roomColPosition" id="roomColPosition"
style="width: 151px;">
<option value="">
i18n_ubi.message.selectDefault_n81i
</option>
</select>
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_ubi.text.desc_n81i：
</td>
<td class="color_3" align="left">
<textarea rows="5" cols="60" id="descinfo"
name="nodeBox.descinfo" >${nodeBox.descinfo}</textarea>
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_7" colspan="2" align="right">
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'" onclick="add()" value="i18n_ubi.button.submit_n81i"/>
&nbsp;
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:document.forms['Mkform'].reset();resetInit();" value="i18n_ubi.button.reset_n81i"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

602
WebRoot/page/show/nodeGroup/configTopo.jsp Normal file
View File

@@ -0,0 +1,602 @@
<%@ 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>
<title>i18n_ct.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<link rel="stylesheet"
href="<c:url value='/js/jquery-easyui-1.1.2/themes/default/easyui.css'/>"
type="text/css"></link>
<script type="text/javascript" src="<%=path%>/js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/onmouse.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/raphael.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/js/jquery-easyui-1.1.2/jquery.easyui.min.js' />"></script>
<style>
body {
background-image: url("<%=path %>/images/show/bg.jpg");
background-repeat: no-repeat;
background-position: center;
}
</style>
<script type="text/javascript">
var raphael;
var raphaelNet;
var index=0;
var imgagePath="<%=path %>/images/toposvg/";
var server = "<%=path %>/images/toposvg/server.png";
var switchImg = "<%=path %>/images/toposvg/switch.png";
var coreswitch = "<%=path %>/images/toposvg/core_switch.png";
var device = "<%=path %>/images/toposvg/device.png";
var router = "<%=path %>/images/toposvg/router.png";
var images = new Array();
var lines = new Array();
var nodegroupArrowPositions = new Array();//连线位置信息
var nodegroupBgImgPositions = new Array();//背景图片位置信息
$(function(){
var height='${backgroudImg.figureHeight }';
var width=document.body.clientWidth; //'${backgroudImg.figureWidth }' ;
raphael = Raphael("mainDiv", width,height);
//画底图
raphael.rect('${backgroudImg.figureX}','${backgroudImg.figureY}','${backgroudImg.figureWidth}','${backgroudImg.figureHeight}').attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+imgagePath+'${backgroudImg.figureFill}'+")"});
//-----------------------修改功能 初始化显示所有之前的配置 begin--------------------
//画节点组背景图
<c:forEach items="${nodegroupBgimgPositionList}" var="position">
var img = raphael.rect('${position.figureX}','${position.figureY}','${position.figureWidth}','${position.figureHeight}').attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+imgagePath+'${position.figureFill}'+")"});
var imageName = '${position.figureFill}'.split(".")[0];
//默认id为数字类型，为Id赋值，如果已赋值则无需再赋值
if(!isNaN(Number(this.id))){
img.id=imageName+index;
index++;
}
images[img.id] = {"src":imageName,"x":img.attr("x"),"y":img.attr("y"),"width":img.attr("width"),"height":img.attr("height")};
nodegroupBgImgPositions['${position.groupId}'] = images[img.id];
</c:forEach>
//画灯泡
//t.id,t.group_id,t.figure_x,t.figure_y,t.figure_width,t.figure_height,t.figure_fill,t.show_status
//alert(${fn:length(nodeGroupPositionList)});
<c:forEach items="${nodeGroupPositionList}" var="position">
var bulbImg = raphael.rect('${position[2]}','${position[3]}','${position[4]}','${position[5]}').attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+imgagePath+'${position[6]}'+")"});
</c:forEach>
//画线
//t.id,t.src_group_id,t.desc_group_id,t.figure_x,t.figure_y,t.figure_width,t.figure_height,t.figure_fill
<c:forEach items="${nodegroupArrowPositionList}" var="position">
var arrowImg = raphael.rect('${position[3]}','${position[4]}','${position[5]}','${position[6]}').attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+imgagePath+'${position[7]}'+")"});
var lineItem = new Array();
if(nodegroupArrowPositions['${position[1]},${position[2]}'] == null){
lineItem.push(arrowImg);
nodegroupArrowPositions['${position[1]},${position[2]}'] = lineItem;
}else{
lineItem = nodegroupArrowPositions['${position[1]},${position[2]}'];
lineItem.push(arrowImg);
nodegroupArrowPositions['${position[1]},${position[2]}'] = lineItem;
}
</c:forEach>
//-----------------------修改功能 初始化显示所有之前的配置 end--------------------
raphael.image(server,width-100,10,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1}).mouseover(function(){
var cloneEle = raphael.image(this.attr("src"),this.attr("x"),this.attr("y"),this.attr("width"),this.attr("height")).attr({stroke: "#FFFFFF",'stroke-width':0.1})
cloneEle.drag(move,start,end);
cloneEle.dblclick(function(){
//双击删除
/*this.remove();
images[this.id] = null;*/
/*for(key in images){
alert("after:"+key+"--"+images[key]);
}*/
//双击连线
lines[this.id] = {"src":this.attr("src"),"x":this.attr("x"),"y":this.attr("y"),"width":this.attr("width"),"height":this.attr("height")};
var length=0;
for(key in lines){
if(key != null && (key.indexOf("server") !=-1 ||key.indexOf("switch") !=-1 ||key.indexOf("device") !=-1||key.indexOf("router") !=-1)){
length++;
}
}
//alert("dblclick:"+length);
if(length ==2){
configNodegroup();
//createLine();
}
})
});
raphael.image(coreswitch,width-100,82,70,68).attr({stroke: "#FFFFFF",'stroke-width':0.1}).mouseover(function(){
var cloneEle = raphael.image(this.attr("src"),this.attr("x"),this.attr("y"),this.attr("width"),this.attr("height")).attr({stroke: "#FFFFFF",'stroke-width':0.1})
cloneEle.drag(move,start,end);
});
raphael.image(switchImg,width-100,160,50,48).attr({stroke: "#FFFFFF",'stroke-width':0.1}).mouseover(function(){
var cloneEle = raphael.image(this.attr("src"),this.attr("x"),this.attr("y"),this.attr("width"),this.attr("height")).attr({stroke: "#FFFFFF",'stroke-width':0.1})
cloneEle.drag(move,start,end);
});
raphael.image(device,width-100,218,29,27).attr({stroke: "#FFFFFF",'stroke-width':0.1}).mouseover(function(){
var cloneEle = raphael.image(this.attr("src"),this.attr("x"),this.attr("y"),this.attr("width"),this.attr("height")).attr({stroke: "#FFFFFF",'stroke-width':0.1})
cloneEle.drag(move,start,end);
});
raphael.image(router,width-100,255,25,24).attr({stroke: "#FFFFFF",'stroke-width':0.1}).mouseover(function(){
var cloneEle = raphael.image(this.attr("src"),this.attr("x"),this.attr("y"),this.attr("width"),this.attr("height")).attr({stroke: "#FFFFFF",'stroke-width':0.1})
cloneEle.drag(move,start,end);
});
raphael.rect(width-100,300,48,20).attr({stroke: "#000000",'stroke-width':0.5,fill:"#990000"}).click(function(){
saveTopoConfig();
});
raphael.text(width-75,310,"i18n_ct.text.save_n81i").attr({'font-size':12,fill:"#ffffff"});
//节点组配置及线配置
$("#doConfig").dialog({
title:"i18n_ct.text.sets_n81i",
resizable:true,
width:380,
height:250
});
})
function start(){
this.xx = this.attr("x");
this.yy = this.attr("y");
this.animate({"opacity":.2},500);
}
function move(dx,dy){
this.attr({x:this.xx+dx,y:this.yy+dy});
}
function end(){
this.animate({"opacity":1},500);
var src = this.attr("src");
var imageName = src.split("/")[2].split(".")[0];
//默认id为数字类型，为Id赋值，如果已赋值则无需再赋值
if(!isNaN(Number(this.id))){
this.id=imageName+index;
index++;
}
images[this.id] = {"src":imageName,"x":this.attr("x"),"y":this.attr("y"),"width":this.attr("width"),"height":this.attr("height")};
//alert(this.id+"---"+images[this.id].src+"----"+images[this.id].x);
}
//配置2节点的节点组信息及，连线信息。
function configNodegroup(){
$("#doConfig").dialog("open");
}
$(function(){
$("#confirm").click(function(){
//srcNodeGroup descNodeGroup lineDirection lineNumber srcLinePostion descLinePostion
if($("#srcNodeGroup").val() ==""){
alert("i18n_ct.message.srcNodeGroup_n81i");
return;
}
if($("#descNodeGroup").val() ==""){
alert("i18n_ct.message.descNodeGroup_n81i");
return;
}
if($("#lineOffset").val()!=""){
if(!Number($("#lineOffset").val())){
alert("i18n_ct.message.lineOffset_n81i");
return;
}
}
if($("#lineDirection").val() ==""){
alert("i18n_ct.message.lineDirection_n81i");
return;
}
if($("#lineNumber").val() == 3){
if($("#srcLinePostion").val() ==""){
alert("i18n_ct.message.srcLinePostion_n81i");
return;
}
if($("#descLinePostion").val() ==""){
alert("i18n_ct.message.descLinePostion_n81i");
return;
}
}
createLine();
$("#doConfig").dialog("close");
//clearConfig();
})
})
function createLine(){
var len=0;
var fromId;
var toId;
for(key in lines){
if(key != null && (key.indexOf("server") !=-1 ||key.indexOf("switch") !=-1 ||key.indexOf("device") !=-1)){
if(len == 0){
fromId = key;
}
if(len == 1){
toId =key;
}
len++;
//alert(key+" createLine:"+len+" fromId:"+fromId+" toId:"+toId);
}
}
if(fromId !="" && toId!=""){
var fromX = lines[fromId].x;
var fromY = lines[fromId].y;
var fromWidth = lines[fromId].width;
var fromHeight = lines[fromId].height;
var toX = lines[toId].x;
var toY = lines[toId].y;
var toWidth = lines[toId].width;
var toHeight = lines[toId].height;
//alert(fromX+"--"+fromY+"--"+fromWidth+"--"+fromHeight+"-2222-"+toX+"--"+toY+"--"+toWidth+"--"+toHeight);
var lineDirection = $("#lineDirection").val();
var srcNodeGroupId = $("#srcNodeGroupId").val();
var descNodeGroupId = $("#descNodeGroupId").val();
var lineOffset = $("#lineOffset").val() == ""?0:Number($("#lineOffset").val());
var lineDirection = $("#lineDirection").val();
var lineNumber = $("#lineNumber").val();
var srcLinePostion = $("#srcLinePostion").val();
var descLinePostion = $("#descLinePostion").val();
//alert(lineDirection+"---"+(lineDirection==1?"":"_xh"));
var lineItem = new Array();
if(lineNumber == 3){//需要三条线的画线逻辑
}else{//自动算取线条
if(fromX > toX){
//alert((fromY - toY)+"---"+toHeight/2+"----"+(fromX - toX)+"---"+toWidth/2);
if((((fromY - toY)>0?(fromY - toY):-(fromY - toY)) >toHeight/2)){
if(((fromX - toX)>0?(fromX - toX):-(fromX - toX)) > toWidth/2){
if(fromY > toY){//第二象限
var arrowLine1 = raphael.rect((fromX+fromWidth/2)+lineOffset,(toY+toHeight/2),4,(fromY-toY-toHeight/2)).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v"+(lineDirection==1?"":"_xh")+"_f.gif)"});
var arrowLine2 = raphael.rect((toX+toWidth),(toY+toHeight/2),(fromX-toX-toWidth+fromWidth/2)+lineOffset,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h"+(lineDirection==1?"":"_xh")+"_f.gif)"});
lineItem.push(arrowLine1);
lineItem.push(arrowLine2);
}else if(fromY < toY){//第三象限
var arrowLine1 = raphael.rect(fromX+fromWidth/2+lineOffset,fromY+fromHeight,4,(toY-fromY-fromHeight+toHeight/2)).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v"+(lineDirection==1?"":"_xh")+".gif)"});
var arrowLine2 =raphael.rect(toX+toWidth,toY+toHeight/2,(fromX-toX-toWidth+fromWidth/2+4)+lineOffset,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h"+(lineDirection==1?"":"_xh")+"_f.gif)"});
lineItem.push(arrowLine1);
lineItem.push(arrowLine2);
}else{
var arrowLine = raphael.rect((toX+toWidth),(toY+toHeight/2),(fromX-toX-toWidth),4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h"+(lineDirection==1?"":"_xh")+"_f.gif)"});
lineItem.push(arrowLine);
}
}else{
var arrowLine = raphael.rect(fromY>toY?(toX+(toWidth-(fromX - toX))/2):(fromX+(fromWidth-(fromX - toX))/2),fromY>toY?toY+toHeight:fromY+fromHeight,4,(fromY>toY?fromY-toY-toHeight:toY-fromY-fromHeight)).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: fromY>toY?"url(images/toposvg/arrow-green_v"+(lineDirection==1?"":"_xh")+"_f.gif)":"url(images/toposvg/arrow-green_v"+(lineDirection==1?"":"_xh")+".gif)"});
lineItem.push(arrowLine);
}
}else{
var arrowLine = raphael.rect((toX+toWidth),(toY+(toHeight-(toY-fromY))/2),(fromX-toX-toWidth),4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h"+(lineDirection==1?"":"_xh")+"_f.gif)"});
lineItem.push(arrowLine);
}
}else{
//alert((fromY - toY)+"---"+toHeight/2+"----"+(fromX - toX)+"---"+toWidth/2);
if((((fromY - toY)>0?(fromY - toY):-(fromY - toY)) >toHeight/2)){
if(((fromX - toX)>0?(fromX - toX):-(fromX - toX)) > toWidth/2){
if(fromY > toY){//第一象限
var arrowLine1 = raphael.rect((fromX+fromWidth/2)+lineOffset,(toY+toHeight/2),4,(fromY-toY-toHeight/2)).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v"+(lineDirection==1?"":"_xh")+"_f.gif)"});
var arrowLine2 = raphael.rect((fromX+fromWidth/2)+lineOffset,(toY+toHeight/2),(toX-fromX-fromWidth/2)-lineOffset,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h"+(lineDirection==1?"":"_xh")+".gif)"});
lineItem.push(arrowLine1);
lineItem.push(arrowLine2);
}else if(fromY < toY){//第四象限
var arrowLine1 = raphael.rect((fromX+toWidth/2)+lineOffset,(fromY+fromHeight),4,(toY-fromY-fromHeight+toHeight/2)).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v"+(lineDirection==1?"":"_xh")+".gif)"});
var arrowLine2 = raphael.rect((fromX+toWidth/2)+lineOffset,(toY+toHeight/2),(toX-fromX-fromWidth/2)-lineOffset,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h"+(lineDirection==1?"":"_xh")+".gif)"});
lineItem.push(arrowLine1);
lineItem.push(arrowLine2);
}else{
var arrowLine = raphael.rect((fromX+fromWidth),(fromY+fromHeight/2),(toX-fromX-fromWidth),4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h"+(lineDirection==1?"":"_xh")+"_f.gif)"});
lineItem.push(arrowLine);
}
}else{
var arrowLine = raphael.rect(fromY>toY?(toX+(toWidth-(toX-fromX))/2):(fromX+(fromWidth-(toX - fromX ))/2),(fromY>toY?toY+toHeight:fromY+fromHeight),4,(fromY>toY?fromY-toY-toHeight:toY-fromY-fromHeight)).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: fromY>toY?"url(images/toposvg/arrow-green_v"+(lineDirection==1?"":"_xh")+"_f.gif)":"url(images/toposvg/arrow-green_v"+(lineDirection==1?"":"_xh")+".gif)"});
lineItem.push(arrowLine);
}
}else{
var arrowLine = raphael.rect((fromX+fromWidth),(fromY+(fromHeight-(fromY-toY))/2),(toX-fromX-fromWidth),4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h"+(lineDirection==1?"":"_xh")+".gif)"});
lineItem.push(arrowLine);
}
}
nodegroupArrowPositions[srcNodeGroupId+","+descNodeGroupId] = lineItem;
}
//设置背景图片位置信息，每次连线涉及到2个背景图片及源节点组与目的节点组
nodegroupBgImgPositions[srcNodeGroupId] = images[fromId];
nodegroupBgImgPositions[descNodeGroupId] = images[toId];
//设置灯泡位置信息，每个背景图片对应一个灯泡,后台自动算取位置信息
lines = new Array();
}
}
function saveTopoConfig(){
var bgImgInfos="";
for(key in nodegroupBgImgPositions){
if(typeof(nodegroupBgImgPositions[key]) == "object"){
//alert(key+"--"+nodegroupBgImgPositions[key].src+" "+nodegroupBgImgPositions[key].x+" "+nodegroupBgImgPositions[key].y+" "+nodegroupBgImgPositions[key].width+" "+nodegroupBgImgPositions[key].height);
bgImgInfos+=":"+key+","+nodegroupBgImgPositions[key].src+","+nodegroupBgImgPositions[key].x+","+nodegroupBgImgPositions[key].y+","+nodegroupBgImgPositions[key].width+","+nodegroupBgImgPositions[key].height;
}
}
if(bgImgInfos!=""){
bgImgInfos = bgImgInfos.substring(1);
}
//alert("--bgImgInfos--"+bgImgInfos);
var arrowInfos = "";
for(key in nodegroupArrowPositions){
if(typeof(nodegroupArrowPositions[key]) == "object"){
//alert(key+"--"+nodegroupBgImgPositions[key].src+" "+nodegroupBgImgPositions[key].x+" "+nodegroupBgImgPositions[key].y+" "+nodegroupBgImgPositions[key].width+" "+nodegroupBgImgPositions[key].height);
var lineInfos = "";
for(key1 in nodegroupArrowPositions[key]){
if(typeof(nodegroupArrowPositions[key][key1]) == "object"){
lineInfos+=";"+key+","+Math.floor(nodegroupArrowPositions[key][key1].attr("x"))+","+Math.floor(nodegroupArrowPositions[key][key1].attr("y"))+","+Math.floor(nodegroupArrowPositions[key][key1].attr("width"))+","+Math.floor(nodegroupArrowPositions[key][key1].attr("height"))+","+nodegroupArrowPositions[key][key1].attr("fill");
}
}
if(lineInfos !=""){
arrowInfos+=":"+lineInfos.substring(1);
}
}
}
if(arrowInfos!=""){
arrowInfos = arrowInfos.substring(1);
}
//alert("--arrowInfos--"+arrowInfos);
window.location="<c:url value='/nodePosition/nodeGroupPosition.do?action=saveConfigTopo&nodegroupBgImgPositions="+bgImgInfos+"&nodegroupArrowPositions="+arrowInfos+"'/>";
}
function clearConfig(){
$("#srcNodeGroup").val("");
$("#srcNodeGroupId").val("");
$("#descNodeGroup").val("");
$("#descNodeGroupId").val("");
$("#lineOffset").val("");
$("#lineDirection").val("");
$("#lineNumber").val("");
$("#srcLinePostion").val("");
$("#descLinePostion").val("");
$("#srcTR").hide();
$("#descTR").hide();
}
//选择源节点组
function selectNodeAndNodeGroup() {
var nodeLock = '${nodeLock eq null ? -1 : nodeLock }';
if(nodeLock == 1){
alert("i18n_ct.message.nodeLock_n81i");
return ;
}
//var groupId = $("#nodeGroupId").val();//选中节点组
//var nodeId = $("#nodeId").val();;//选中ip
var url = "<%=path%>/nodeGroupManage/nodeGroupManage!executeAction.do?action=toSelectNodeAndNodeGroup"; //转向网页的地址;
var name; //网页名称，可为空;
//改为window.open-20180831-chenjs---
parent.layer.open({
type: 2,
title: "i18n_tsnang.text.selectNodeGroup_n81i",
area:['850px', '610px'],
shade: 0.6,
closeBtn: 1,
maxmin:true,
content: url
});
top.$("#ly").css("display", "block");
top.$("#ly").width(parent.document.body.clientWidth);
top.$("#ly").height(parent.document.body.clientHeight);
}
function reciveNodeAndNodeGroup(nodeGroupIds,nodeGroupNames,nodeIds,nodeIps){
//alert(nodeGroupIds+" " +nodeGroupNames+" "+nodeIds+" "+nodeIps);
document.getElementById("srcNodeGroup").value = nodeGroupNames;//节点组名称
document.getElementById("srcNodeGroupId").value = nodeGroupIds;//节点组id
document.getElementById("nodeIpShow").value = nodeIps;//节点ip
document.getElementById("nodeIp").value = nodeIds;//节点ids:nodeIds为选中的节点的id（用逗号连接的）
}
//选择目标节点组
function selectNodeAndNodeGroup1() {
var nodeLock = '${nodeLock eq null ? -1 : nodeLock }';
if(nodeLock == 1){
alert("i18n_ct.message.nodeLock_n81i");
return ;
}
//var groupId = $("#nodeGroupId").val();//选中节点组
//var nodeId = $("#nodeId").val();;//选中ip
//var url = "<%=path%>/nodeGroupManage/nodeGroupManage!executeAction.do?action=toSelectNodeAndNodeGroup&groupId="+groupId+"&nodeId="+nodeId+"&type=descgroup"; //type=1代表查询目标节点组
var url = "<%=path%>/nodeGroupManage/nodeGroupManage!executeAction.do?action=toSelectNodeAndNodeGroup&type=descgroup";
var name; //网页名称，可为空;
//改为window.open-20180831-chenjs---
parent.layer.open({
type: 2,
title: "i18n_tsnang.text.selectNodeGroup_n81i",
area:['850px', '610px'],
shade: 0.6,
closeBtn: 1,
maxmin:true,
content: url
});
}
function reciveNodeAndNodeGroup1(nodeGroupIds,nodeGroupNames,nodeIds,nodeIps){
//alert(nodeGroupIds+" " +nodeGroupNames+" "+nodeIds+" "+nodeIps);
document.getElementById("descNodeGroup").value = nodeGroupNames;//节点组名称
document.getElementById("descNodeGroupId").value = nodeGroupIds;//节点组id
document.getElementById("nodeIpShow").value = nodeIps;//节点ip
document.getElementById("nodeIp").value = nodeIds;//节点ids:nodeIds为选中的节点的id（用逗号连接的）
}
function showLinePosition(){
var lineNum = $("#lineNumber").val();
if(lineNum == 3){
$("#srcTR").show();
$("#descTR").show();
}else{
$("#srcTR").hide();
$("#descTR").hide();
}
}
</script>
</head>
<body>
<div id="mainDiv"
style="width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; margin: 0px; padding: 0px;">
</div>
<input type="hidden" name="nodeIpShow" id="nodeIpShow" />
<input type="hidden" name="nodeIpsId" id="nodeIp" />
<input type="hidden" id="fw" value="addNewTask"/>
<div id="doConfig" closed="true">
<table border="0" cellpadding="0" cellspacing="0" class="table">
<tr>
<td class="color_1" align="right" width="30%">
i18n_ct.text.srcNodeGroup_n81i：
</td>
<td class="color_3" align="left" width="70%">
<input type="text" name="srcNodeGroup" id="srcNodeGroup"
readonly="readonly" value="" />
&nbsp;
<input type="hidden" name="srcNodeGroupId" id="srcNodeGroupId"
value="" />
&nbsp;
<input type="button" value="i18n_ct.button.select_n81i" onclick="selectNodeAndNodeGroup()"
class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'" />
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_ct.text.descNodeGroup_n81i：
</td>
<td class="color_3" align="left">
<input type="text" name="descNodeGroup" id="descNodeGroup"
readonly="readonly" value="" />
&nbsp;
<input type="hidden" name="descNodeGroupId" id="descNodeGroupId"
value="" />
&nbsp;
<input type="button" value="i18n_ct.button.select_n81i" onclick="selectNodeAndNodeGroup1()"
class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'" />
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_ct.text.lineOffset_n81i：
</td>
<td class="color_3" align="left">
<input type="text" name="lineOffset" id="lineOffset"/>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_ct.text.lineDirection_n81i：
</td>
<td class="color_3" align="left">
<select name="lineDirection" id="lineDirection"
style="width: 150px;">
<option value="">
i18n_ct.message.lineDirectionDefault_n81i
<option value="1">
i18n_ct.message.lineDirection1_n81i
<option value="2">
i18n_ct.message.lineDirection2_n81i
</select>
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_ct.text.lineNumber_n81i：
</td>
<td class="color_3" align="left">
<select name="lineNumber" id="lineNumber" style="width: 150px;" onchange="showLinePosition()">
<option value="">
i18n_ct.message.lineNumberDefault_n81i
<option value="3">
3
</select>
</td>
</tr>
<tr id="srcTR" style="display:none;">
<td class="color_1" align="right">
i18n_ct.text.srcLinePostion_n81i：
</td>
<td class="color_3" align="left">
<select name="srcLinePostion" id="srcLinePostion"
style="width: 150px;">
<option value="">
i18n_ct.message.srcLinePostionDefault_n81i
<option value="up">
i18n_ct.message.srcLinePostionUp_n81i
<option value="down">
i18n_ct.message.srcLinePostionDown_n81i
<option value="left">
i18n_ct.message.srcLinePostionLeft_n81i
<option value="right">
i18n_ct.message.srcLinePostionRight_n81i
</select>
<font color="red">*</font>
</td>
</tr>
<tr id="descTR" style="display:none;">
<td class="color_1" align="right">
i18n_ct.text.descLinePostion_n81i：
</td>
<td class="color_3" align="left">
<select name="descLinePostion" id="descLinePostion"
style="width: 150px;">
<option value="">
i18n_ct.message.descLinePostionDefault_n81i
<option value="up">
i18n_ct.message.descLinePostionUp_n81i
<option value="down">
i18n_ct.message.descLinePostionDown_n81i
<option value="left">
i18n_ct.message.descLinePostionLeft_n81i
<option value="right">
i18n_ct.message.descLinePostionRight_n81i
</select>
<font color="red">*</font>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" value="i18n_ct.button.ok_n81i" id="confirm" />
</td>
</tr>
</table>
</div>
</body>
</html>

371
WebRoot/page/show/nodeGroup/newShowTopo.jsp Normal file
View File

@@ -0,0 +1,371 @@
<%@ 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>
<title>i18n_st.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<link rel="stylesheet"
href="<c:url value='/js/jquery-easyui-1.1.2/themes/default/easyui.css'/>"
type="text/css"></link>
<script type="text/javascript" src="<%=path%>/js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/raphael.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/js/jquery-easyui-1.1.2/jquery.easyui.min.js' />"></script>
<script type="text/javascript"
src="<c:url value='/js/jtopo-0.4.8_01-min.js' />"></script>
<style>
body {
background-image: url("<%=path%>/images/show/bg.jpg");
background-repeat: no-repeat;
background-position: center;
scrollbar-face-color: #EEF0ED; //滚动条凸出部分的颜色
scrollbar-highlight-color: #E7E8EA; //滚动条空白部分的颜色
scrollbar-shadow-color: #EEF0ED; //立体滚动条阴影的颜色
scrollbar-3dlight-color: #EEF0ED; //滚动条亮边的颜色
scrollbar-arrow-color: #E1E3E0; //上下按钮上三角箭头的颜色
scrollbar-track-color: #EEF0ED; //滚动条的背景颜色
scrollbar-darkshadow-color: #CCCCCC; //滚动条强阴影的颜色
scrollbar-base-color: #EEF0ED //滚动条的基本颜色
}
</style>
</head>
<body>
<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
<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="I2" name="I2" 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="I3" name="I3" height="100%" width="100%" border="0"
style="background: #FFFFFF;" frameborder="0" src="" scrolling="no">
i18n_st.message.frameInfo_n81i
</iframe>
</div> -->
<span id='content' ></span>
</body>
<script>
var imgagePath="${pageContext.request.contextPath}/images/newtopo/";
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象
var nodeMap={};
//节点
function newNode(x, y, w, h, text,img){
var node = new JTopo.Node(text);
node.setImage(imgagePath+img,false);
node.setLocation(x, y);
node.setSize(w, h);
node.fillColor='255,128,0';
node.fontColor='0,0,0';
node.addEventListener("click",function(node){
console.log('x ----- '+node.target.x+' y ------ '+node.target.y+' ---- '+node.target.text);
})
scene.add(node);
return node;
}
// 简单连线
function newLink(nodeA, nodeZ, text, dashedPattern,arrowsRadius){
var link = new JTopo.Link(nodeA, nodeZ, text);
link.lineWidth = 2; // 线宽
link.dashedPattern = dashedPattern; // 虚线
link.bundleOffset = 60; // 折线拐角处的长度
link.bundleGap = 20; // 线条之间的间隔
link.textOffsetY = 3; // 文本偏移量（向下3个像素）
link.strokeColor = '0,0,0';
link.fontColor='0,0,0';
if(arrowsRadius){
link.arrowsRadius = 10;
}
scene.add(link);
return link;
}
// 折线
function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern){
var link = new JTopo.FoldLink(nodeA, nodeZ, text);
link.direction = direction || 'horizontal';
// link.arrowsRadius = 15; //箭头大小
link.lineWidth = 2; // 线宽
link.bundleOffset = 40; // 折线拐角处的长度
link.bundleGap = 20; // 线条之间的间隔
link.textOffsetY = 3; // 文本偏移量（向下3个像素）
link.dashedPattern = dashedPattern;
link.strokeColor = '0,0,0';
link.fontColor='0,0,0';
scene.add(link);
return link;
}
//二次折线
function newFlexionalLink(nodeA, nodeZ, text, dashedPattern,direction){
var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
// link.arrowsRadius = 10;
link.lineWidth = 2; // 线宽
link.bundleGap = 15; // 线条之间的间隔
link.textOffsetY = 10; // 文本偏移量（向下15个像素）
link.dashedPattern = dashedPattern;
link.direction=direction||'vertical';
link.strokeColor = '0,0,0';
link.fontColor='0,0,0';
scene.add(link);
return link;
}
$(function (){
$("#canvas").attr("width",$(window).get(0).innerWidth);
$("#canvas").attr("height",$(window).get(0).innerHeight);
scene.mousemove(function(event){
var node=event.target;
if(node&&node.elementType=='node'){
var width=20;
$('#content').html(node.text);
$('#content').css({
position:'absolute',
top:event.pageY,
left:event.pageX+20
}).show();
}else{
$('#content').hide();
}
});
//遍历创建节点对象
<c:forEach items="${requestScope.topoNodeInfos}" var="item">
/* var node${item.id} = newNode(${item.x},${item.y},${item.width},${item.height},'${item.text}${item.id}','${item.topoImg.name}'); */
var node${item.id} = newNode(${item.x},${item.y},${item.width},${item.height},'${item.text}','${item.topoImg.name}');
node${item.id}.status=${item.status};
node${item.id}.serializedProperties.push('status');
<c:if test="${item.status==1}">
node${item.id}.nodeInterval=setInterval(function(){
if(node${item.id}.alarm!=null&&node${item.id}.alarm!=''){
node${item.id}.alarm=null;
}else{
node${item.id}.alarm='${item.alarm}';
node${item.id}.alarmColor='171,30,50';
node${item.id}.alarmAlpha=0.8;
}
},600)
node${item.id}.serializedProperties.push('nodeInterval');
</c:if>
<c:choose>
<c:when test="${item.type==4}">
node${item.id}.addEventListener("click",function(){
window.location.href="${pageContext.request.contextPath}/nodePosition/newTopoShow.do?action=showTopo&topoInfoId="+${item.typeId};
});
</c:when>
<c:when test="${item.type==1||item.type==2}">
node${item.id}.addEventListener("click",function(node){
/* parent.getDetectInfo(${item.typeId},${item.type},${item.status}); */
getDetectInfo(${item.typeId},${item.type},${item.status});
});
</c:when>
</c:choose>
//设置自己特定的class样式
<c:if test="${not empty item.topoNodeInfoClass}">
var classJson=${item.topoNodeInfoClass};
for(var i=0;i<classJson.length;i++){
for(var key in classJson[i]){
if(key=='textPosition'){
node${item.id}.textPosition=classJson[i][key];
}
}
}
</c:if>
//将节点对象放入map中 key为node+id 值为节点对象
nodeMap['node${item.id}']=node${item.id};
</c:forEach>
//遍历创建连线 连接节点
<c:forEach items="${requestScope.topoLineInfos}" var="item">
<c:choose>
<c:when test="${not empty item.topoLineInfoClass}">
var link${item.id};
var classJson=${item.topoLineInfoClass};
for(var i=0;i<classJson.length;i++){
for(var key in classJson[i]){
if(key=='newLineMethod'){
if(classJson[i][key]=='FoldLink'){
link${item.id}=newFoldLink(node${item.topoNodeInfo1.id},node${item.topoNodeInfo2.id},'${item.text}');
}else if(classJson[i][key]=='FlexionalLink'){
link${item.id}=newFlexionalLink(node${item.topoNodeInfo1.id},node${item.topoNodeInfo2.id},'${item.text}');
}
}else if(key=='offsetGap'){
link${item.id}.offsetGap=classJson[i][key];
}else if(key=='direction'){
link${item.id}.direction=classJson[i][key];
}else if(key=='nodeIndex'){
link${item.id}.nodeIndex=classJson[i][key];
}
}
}
</c:when>
<c:otherwise>
var link${item.id} = newLink(node${item.topoNodeInfo1.id},node${item.topoNodeInfo2.id},'${item.text}');
</c:otherwise>
</c:choose>
</c:forEach>
//缩放并居中显示
stage.centerAndZoom();
//设置鼠标可以进行滚轮放大缩小
stage.wheelZoom=0.85;
})
$(function(){
//5分钟刷新一次
interview = setInterval('refresh()',5*60*10000);
var height = document.body.clientHeight;
var width = document.body.clientWidth;
})
function refresh(){
var varNames={};
$.ajax({
type:"post",
dataType:'json',
url:"<c:url value='/nodePosition/newTopoShow.do?action=showTopo'/>",
data:"&requestType=ajax",
async:true,
success:function (data,textStatus){
if(textStatus=='success'&&data!=''&&data!=null){
var topoNodeInfos;
var topoLineInfos;
$(data).each(function(i,item){
topoNodeInfos = item.topoNodeInfoList;
topoLineInfos = item.topoLineInfoList;
})
$(topoNodeInfos).each(function(i,item){
//修改节点的警告状态
if(nodeMap['node'+item.id].status==item.status){
return;
}else if(item.status==1){
console.log('进入重设alarm')
nodeMap['node'+item.id].nodeInterval=setInterval(function(){
if(nodeMap['node'+item.id].alarm!=null&&nodeMap['node'+item.id].alarm!=''){
nodeMap['node'+item.id].alarm=null;
}else{
nodeMap['node'+item.id].alarm=item.alarm;
nodeMap['node'+item.id].alarmColor='171,30,50';
nodeMap['node'+item.id].alarmAlpha=0.8;
}
},600);
nodeMap['node'+item.id].serializedProperties.push('nodeInterval');
nodeMap['node'+item.id].status=1;
}else{
console.log('删除alarm');
nodeMap['node'+item.id].alarm=null;
nodeMap['node'+item.id].status=0;
window.clearInterval(nodeMap['node'+item.id].nodeInterval);
}
})
}
}
})
}
//以下代码解决了easy-ui报错 can't read property msie of undefined
jQuery.browser={};(function(){jQuery.browser.msie=false; jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)./)){ jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;}})();
$(function(){
//告警节点列表初始化
$("#nodeList").dialog({
title:"i18n_st.nodeList.title_n81i",
resizable:true,
width:1024,
height:600
});
console.log("123213213213")
})
function getDetectInfo(id,type,showStatus){
//根据类型的不同 判断节点或节点组的查询条件
var url ="<c:url value='/detection/monitorData.do?action=query&nodeType=1&requestType=newTopo&nodeGroupId="+id+"'/>";
var url2="<c:url value='/detection/monitorData.do?action=queryEmergentDetail&nodeType=1&requestType=topo&nodeGroupId="+id+"'/>";
if(type==2){
url ="<c:url value='/detection/monitorData.do?action=query&nodeType=2&requestType=newTopo&nodeId="+id+"'/>";
url2="<c:url value='/detection/monitorData.do?action=queryEmergentDetail&nodeType=2&requestType=topo&nodeId="+id+"'/>";
}
//异常情况，显示紧急告警列表，否则不显示
if(showStatus == 1){
$("#title").show();
$("#I4").show();
$("#hr").show();
$("#I4").attr("src",url2);
}else{
$("#title").hide();
$("#I4").hide();
$("#hr").hide();
}
$("#I5").attr("src",url);//由于所有数据列表不会出现隐藏的情况，所以标题的确定就有I5来负责
}
function setDivTitle(groupName) {
if(groupName!='undefined' && groupName!=null && groupName!="") {
$("#nodeList").dialog({
title:groupName+" i18n_st.text.monitorData_n81i"
});
}else {
$("#nodeList").dialog({
title:"i18n_st.text.monitorData_n81i"
});
}
$("#nodeList").dialog("open");
}
</script>
</html>

728
WebRoot/page/show/nodeGroup/showTopo.jsp Normal file
View File

@@ -0,0 +1,728 @@
<%@ 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>
<title>i18n_st.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<link rel="stylesheet"
href="<c:url value='/js/jquery-easyui-1.1.2/themes/default/easyui.css'/>"
type="text/css"></link>
<script type="text/javascript" src="<%=path%>/js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/raphael.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/js/jquery-easyui-1.1.2/jquery.easyui.min.js' />"></script>
<style>
body {
background-image: url("<%=path%>/images/show/bg.jpg");
background-repeat: no-repeat;
background-position: center;
scrollbar-face-color: #EEF0ED; //滚动条凸出部分的颜色
scrollbar-highlight-color: #E7E8EA; //滚动条空白部分的颜色
scrollbar-shadow-color: #EEF0ED; //立体滚动条阴影的颜色
scrollbar-3dlight-color: #EEF0ED; //滚动条亮边的颜色
scrollbar-arrow-color: #E1E3E0; //上下按钮上三角箭头的颜色
scrollbar-track-color: #EEF0ED; //滚动条的背景颜色
scrollbar-darkshadow-color: #CCCCCC; //滚动条强阴影的颜色
scrollbar-base-color: #EEF0ED //滚动条的基本颜色
}
#hint {
border: 1px solid #000000;
background: #EEF0ED;
position: absolute;
z-index: 9;
padding: 6px;
line-height: 14px;
text-align: left;
top: 1520px;
font-size: 12px;
}
</style>
<script type="text/javascript">
var raphael;
var imgagePath="${pageContext.request.contextPath}/images/toposvg/";
var redbulbUrl="${pageContext.request.contextPath}/images/toposvg/alarm.gif";
var greenbulbUrl="${pageContext.request.contextPath}/images/toposvg/green_bulb.png";
var lineUrl = "${pageContext.request.contextPath}/images/toposvg/line1.gif";
var server = "${pageContext.request.contextPath}/images/toposvg/server.png";
var switchImg = "${pageContext.request.contextPath}/images/toposvg/switch.png";
var coreswitch = "${pageContext.request.contextPath}/images/toposvg/core_switch.png";
var device = "${pageContext.request.contextPath}/images/toposvg/device.png";
var router = "${pageContext.request.contextPath}/images/toposvg/router.png";
var lightInterview;
var positions = new Array();
var arrowPosition = new Array();
var interval;
var boxWidth=206;
var boxHeight=540;
var titleImg = "${pageContext.request.contextPath}/images/topo3d/grayline.jpg";
var boxTopImg = "${pageContext.request.contextPath}/images/topo3d/box_top.png";
var boxFootImg = "${pageContext.request.contextPath}/images/topo3d/box_foot.png";
var boxLeftImg = "${pageContext.request.contextPath}/images/topo3d/box_left.png";
var boxRightImg = "${pageContext.request.contextPath}/images/topo3d/box_right.png";
$(function(){
var height='${backgroudImg.figureHeight }';
var width='${backgroudImg.figureWidth }' ;
raphael = Raphael("mainDiv", width,height);
//-----------1.画底图
raphael.rect('${backgroudImg.figureX}','${backgroudImg.figureY}','${backgroudImg.figureWidth}','${backgroudImg.figureHeight}').attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+imgagePath+'${backgroudImg.figureFill}'+")"});
//-----------2.画节点组背景图
<c:forEach items="${nodegroupBgimgPositionList}" var="position">
var img = raphael.rect('${position.figureX}','${position.figureY}','${position.figureWidth}','${position.figureHeight}').attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+imgagePath+'${position.figureFill}'+")"});
img.click(function(){
//跳转到3d机房
var groupId = '${position.groupId}';
window.location.href="<c:url value='/nodePosition/topoShow.do?action=show3DRoom&firstGroupId="+groupId+"'/>";
}).mouseover(function(){
var nodeInfo = "${position.nodeInfo}";
var clientx = window.event.clientX;
var clienty = window.event.clientY;
//2秒后出发悬浮事件，2面前可以执行单击服务器跳转到3D机房页面
interval = setInterval(function(){
showNodeList(nodeInfo,clientx,clienty);
},2000);
}).mouseout(function(){
hideMsg();
});
</c:forEach>
//-----------3.画灯泡
//t.id,t.group_id,t.figure_x,t.figure_y,t.figure_width,t.figure_height,t.figure_fill,t.show_status
//alert(${fn:length(nodeGroupPositionList)});
<c:forEach items="${nodeGroupPositionList}" var="position">
positions['${position[1]}']={"groupId":'${position[1]}'};
var bulbImg = raphael.rect('${position[2]}','${position[3]}','${position[4]}','${position[5]}').attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+imgagePath+'${position[6]}'+")"});
bulbImg.click(function(){
//获取该节点组的检测信息
getDetectInfo('${position[1]}','${position[7]}');
})
bulbImg.id= "bulb"+'${position[1]}';
</c:forEach>
//-----------4.画线
//t.id,t.src_group_id,t.desc_group_id,t.figure_x,t.figure_y,t.figure_width,t.figure_height,t.figure_fill
<c:forEach items="${nodegroupArrowPositionList}" var="position">
arrowPosition['${position[0]}']={"id":'${position[0]}'};
var arrowImg = raphael.rect('${position[3]}','${position[4]}','${position[5]}','${position[6]}').attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+imgagePath+'${position[7]}'+")"});
arrowImg.id= "arrow"+'${position[0]}';
</c:forEach>
//画节点组 测试用
//drawNodeGroup();
//画灯 测试用
//drawBulb();
//画箭头 测试用
//drawArrow();
//-----------5.告警节点列表初始化
$("#nodeList").dialog({
title:"i18n_st.nodeList.title_n81i",
resizable:true,
width:1024,
height:600
});
//-----------6.机柜展示初始化
$("#nodeBox").dialog({
title:"i18n_st.nodeBox.title_n81i",
resizable:true,
width:220,
height:578
});
})
//调整到3D机房的机柜展示页面
/*function getNodeBox(groupId,nodeBoxId,nodeBoxIspn){
window.location.href="<c:url value='/nodePosition/topoShow.do?action=show3DRoom&firstGroupId="+groupId+"&nodeBoxId="+nodeBoxId+"&nodeBoxIspn="+nodeBoxIspn+"'/>";
}
*/
//悬浮显示机柜,该方法的调用入口在Action拼装nodeInfo中
function getNodeBox(groupId,nodeBoxId,nodeBoxIspn,nodeIp){
//alert(groupId+"--"+nodeBoxId+"--"+nodeBoxIspn+"--"+nodeIp);
$.ajax({
type:"post",
dataType:'json',
url:"<c:url value='/nodePosition/topoShow.do?action=getNodeBox'/>",
data: "&groupId="+groupId+"&nodeBoxId="+nodeBoxId,
async:true,
success:function (data,textStatus){
if(textStatus == "success" && (data!= null && data!= "" )){
$("#nodeBoxs").html("");
var t =$("#nodeBox").dialog("options").title;
$("#nodeBox").dialog("setTitle", nodeBoxIspn);
$("#nodeBox").dialog("open");
var length = $(data).length;
var raphaelBox = 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位的处理；
$(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_st.text.nodeIp_n81i："+item.nodeTable.nodeIp+"\ni18n_st.text.nodeName_n81i："+item.nodeTable.nodeName
+"\ni18n_st.text.nodeUType_n81i："+item.nodeTable.nodeUType+"\ni18n_st.text.nodeBeginUType_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;
}
}
var subColor="#80B167";//绿色
//是本节点组且为点击的IP的显示（红色or绿色） 非本节点组显示灰色
//alert(item.nodeTable.nodeIp +"---"+ nodeIp+"==="+(item.nodeTable.nodeIp == nodeIp));
if(item.groupNode && item.nodeTable.nodeIp == nodeIp){
if(item.nodeTable.alarm){//节点如果异常则显示红色
subColor="#FF0000";
}
}else{
subColor="#939393";//灰色
}
//只有告警节点才可以单击显示告警信息
if(item.groupNode &&item.nodeTable.alarm){//节点如果异常则显示红色
raphaelBox.rect(subBoxStartX,subBoxY,subWidth,newHeight).attr({stroke: "#CEDBEF",'stroke-width':0.1,title:title,text:param, fill: subColor})
.click(function(){
var param = this.attr("text");
getAlarmInfo(param);
}).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);
});
}
}else{
var title="i18n_st.text.U_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);
});
}
});
}
}
})
}
function getDetectInfo(nodeGroupId,showStatus){
var url ="<c:url value='/detection/monitorData.do?action=query&requestType=topo&nodeGroupId="+nodeGroupId+"'/>";
var url2="<c:url value='/detection/monitorData.do?action=queryEmergent&requestType=topo&nodeGroupId="+nodeGroupId+"'/>";
//异常情况，显示紧急告警列表，否则不显示
if(showStatus == 1){
$("#title").show();
$("#I2").show();
$("#hr").show();
$("#I2").attr("src",url2);
}else{
$("#title").hide();
$("#I2").hide();
$("#hr").hide();
}
$("#I3").attr("src",url);//由于所有数据列表不会出现隐藏的情况，所以标题的确定就有I3来负责
//$("#nodeList").dialog("open");//需要关闭，否则会先显示之前打开的节点组，再显示当前节点组
}
function setDivTitle(groupName) {
if(groupName!='undefined' && groupName!=null && groupName!="") {
$("#nodeList").dialog({
title:groupName+" i18n_st.text.monitorData_n81i"
});
}else {
$("#nodeList").dialog({
title:"i18n_st.text.monitorData_n81i"
});
}
$("#nodeList").dialog("open");
}
//画节点组 测试用
function drawNodeGroup(){
//服务器 1-8 ,opacity:0.1 server
raphael.rect(834,30,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(833,148,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(833,284,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(834,400,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(915,476,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(834,522,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(915,596,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(834,648,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
//节点 1.1-4
raphael.rect(578,24,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(580,152,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(580,283,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(580,404,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
//节点 2.1-6
raphael.rect(427,23,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(426,152,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(425,283,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(425,405,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(424,530,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
raphael.rect(425,637,45,62).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+server+")"});
//交换机 1.核心交换机
raphael.rect(696,282,70,68).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+coreswitch+")"});
//交换机 1.1-5
raphael.rect(502,34,50,48).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+switchImg+")"});
raphael.rect(507,161,50,48).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+switchImg+")"});
raphael.rect(507,293,50,48).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+switchImg+")"});
raphael.rect(509,415,50,48).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+switchImg+")"});
raphael.rect(512,643,50,48).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+switchImg+")"});
//交换机 2.1-3
raphael.rect(353,35,50,48).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+switchImg+")"});
raphael.rect(358,225,50,48).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+switchImg+")"});
raphael.rect(358,475,50,48).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+switchImg+")"});
//分流设备 1.1-4
raphael.rect(293,47,29,27).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+device+")"});
raphael.rect(299,237,29,27).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+device+")"});
raphael.rect(301,487,29,27).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+device+")"});
raphael.rect(296,655,29,27).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+device+")"});
//波分路由
raphael.rect(293,47,29,27).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+device+")"});
//波分路由节点组背景图
raphael.rect(163,85,25,24).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+router+")"});
raphael.rect(163,142,25,24).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+router+")"});
raphael.rect(163,336,25,24).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+router+")"});
raphael.rect(163,390,25,24).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+router+")"});
raphael.rect(163,582,25,24).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+router+")"});
}
//画箭头 测试用
function drawArrow(){
//-----------------------------服务器1.1-8------------------
//后端服务器-核心交换机
raphael.rect(734,58,105,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
raphael.rect(734,58,4,230).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh_f.gif)"});
//日志服务器-核心交换机
raphael.rect(744,178,95,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
raphael.rect(744,178,4,115).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh_f.gif)"});
//日志服务器-光纤交换机
raphael.rect(878,178,36,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//087交换机-核心交换机
raphael.rect(754,264,164,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
raphael.rect(754,264,4,34).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh_f.gif)"});
//邮件服务器-核心交换机
raphael.rect(758,312,80,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//087系统-核心交换机
raphael.rect(754,332,4,100).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh.gif)"});
raphael.rect(754,428,86,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//087系统-光纤交换机1-3
raphael.rect(877,428,40,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//界面服务器-核心交换机
raphael.rect(746,337,4,164).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh.gif)"});
raphael.rect(746,497,174,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//分中心-核心交换机
raphael.rect(738,341,4,215).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh.gif)"});
raphael.rect(738,552,102,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//省平台后端服务器-核心交换机
raphael.rect(728,344,4,280).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh.gif)"});
raphael.rect(730,620,194,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//黑盒服务器-核心交换机
raphael.rect(718,341,4,337).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh.gif)"});
raphael.rect(718,674,120,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//黑盒服务器-省平台用户接入交换机
raphael.rect(876,674,42,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//-----------------------------交换机1.1-5------------------
//电信汇接交换机-核心交换机
raphael.rect(720,95,4,195).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh_f.gif)"});
raphael.rect(536,95,188,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh_f.gif)"});
raphael.rect(536,75,4,24).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh_f.gif)"});
//电信汇接交换机-电信一级节点
raphael.rect(472,58,30,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//电信汇接交换机-电信二级节点
raphael.rect(550,58,30,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//电信汇接交换机-电信侧封堵路由
raphael.rect(516,75,4,24).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v.gif)"});
raphael.rect(186,95,330,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_f.gif)"});
//移动汇接交换机-核心交换机
raphael.rect(710,230,4,66).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh_f.gif)"});
raphael.rect(530,230,184,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh_f.gif)"});
raphael.rect(530,206,4,28).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh_f.gif)"});
//移动汇接交换机-移动一级节点
raphael.rect(470,178,40,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//移动汇接交换机-移动二级节点
raphael.rect(554,178,30,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//移动汇接交换机-移动侧封堵路由
raphael.rect(530,148,4,16).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_f.gif)"});
raphael.rect(234,148,300,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_f.gif)"});
//铁通汇接交换机-核心交换机
raphael.rect(702,264,4,36).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh_f.gif)"});
raphael.rect(530,264,4,30).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh.gif)"});
raphael.rect(530,264,176,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh_f.gif)"});
//铁通汇接交换机-铁通一级节点
raphael.rect(470,308,40,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//铁通汇接交换机-铁通二级节点
raphael.rect(554,308,30,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//铁通汇接交换机-电信侧封堵路由
raphael.rect(530,338,4,14).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v.gif)"});
raphael.rect(190,348,340,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_f.gif)"});
//联通教育汇接交换机-核心交换机
raphael.rect(702,334,4,70).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh.gif)"});
raphael.rect(544,400,4,22).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh.gif)"});
raphael.rect(544,400,162,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh_f.gif)"});
//联通教育汇接交换机-联通一级节点
raphael.rect(468,428,40,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//联通教育汇接交换机-联通教育二级节点
raphael.rect(556,428,30,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//联通教育汇接交换机-教育一级节点
raphael.rect(468,552,56,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh_f.gif)"});
raphael.rect(520,454,4,102).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh.gif)"});
//联通教育汇接交换机-联通侧封堵路由
raphael.rect(520,400,4,22).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_f.gif)"});
raphael.rect(248,400,276,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_f.gif)"});
//联通教育汇接交换机-教育侧封堵路由
raphael.rect(544,454,4,144).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v.gif)"});
raphael.rect(190,594,358,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_f.gif)"});
//科技汇接交换机-核心交换机
raphael.rect(710,338,4,330).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_xh.gif)"});
raphael.rect(560,668,154,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh_f.gif)"});
//科技汇接交换机-科技一级节点
raphael.rect(472,668,40,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_xh.gif)"});
//科技汇接交换机-科技侧封堵路由
raphael.rect(535,688,4,22).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v.gif)"});
raphael.rect(190,706,349,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_f.gif)"});
//-----------------------------交换机2.1-3------------------
//电信分流交换机-电信一级
raphael.rect(400,58,30,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
//电信分流交换机-电信分流D
raphael.rect(322,58,30,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
//移动铁通分流交换机-移动一级
raphael.rect(382,178,4,48).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_f.gif)"});
raphael.rect(382,178,48,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
//移动铁通分流交换机-铁通一级
raphael.rect(382,308,48,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
raphael.rect(382,270,4,42).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v.gif)"});
//移动铁通分流交换机-移动铁通分流D
raphael.rect(328,244,30,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
raphael.rect(328,250,30,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
//联通教育分流交换机-联通一级
raphael.rect(382,428,46,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
raphael.rect(382,428,4,48).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_f.gif)"});
//联通教育分流交换机-教育一级
raphael.rect(382,552,46,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
raphael.rect(382,519,4,38).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v.gif)"});
//联通教育分流交换机-联通教育分流D
raphael.rect(330,494,30,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
raphael.rect(330,500,30,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
//科技一级-科技分流D
raphael.rect(324,668,106,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
//---------------------------分流设备D 1.1-4
//波分设备（运营商侧）-电信分流D
raphael.rect(252,58,40,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
//波分设备（运营商侧）-移动铁通分流D
raphael.rect(242,204,4,40).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v.gif)"});
raphael.rect(242,244,58,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
raphael.rect(242,250,58,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
raphael.rect(242,250,4,44).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_f.gif)"});
//波分设备（运营商侧）-联通教育分流D
raphael.rect(246,494,56,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
raphael.rect(246,454,4,40).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v.gif)"});
raphael.rect(246,500,56,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
raphael.rect(246,500,4,40).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_v_f.gif)"});
//出口-科技分流D
raphael.rect(114,668,180,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h.gif)"});
//---------------------------波分路由箭头D 1.1-4
raphael.rect(138,95,25,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_f.gif)"});
raphael.rect(138,154,25,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_f.gif)"});
raphael.rect(138,346,25,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_f.gif)"});
raphael.rect(138,400,25,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_f.gif)"});
raphael.rect(138,592,25,4).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url(images/toposvg/arrow-green_h_f.gif)"});
}
//画灯 测试用
function drawBulb(){
//服务器 1-8
raphael.rect(856,56,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+redbulbUrl+")"});
raphael.rect(856,176,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+redbulbUrl+")"});
raphael.rect(856,310,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+redbulbUrl+")"});
raphael.rect(856,426,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+redbulbUrl+")"});
raphael.rect(940,502,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+redbulbUrl+")"});
raphael.rect(856,548,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+redbulbUrl+")"});
raphael.rect(940,620,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+redbulbUrl+")"});
raphael.rect(856,674,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+redbulbUrl+")"});
//节点 1.1-4
raphael.rect(602,52,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(604,179,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(604,310,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(604,432,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
//节点 2.1-6
raphael.rect(450,50,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(450,179,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(450,310,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(450,432,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(450,558,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(450,664,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
//交换机 1.核心交换机
raphael.rect(728,310,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+redbulbUrl+")"});
//交换机 1.1-5
raphael.rect(524,48,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(528,176,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(528,308,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(528,430,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(532,660,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
//交换机 2.1-3
raphael.rect(374,50,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(376,244,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(378,490,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
//分流设备 1.1-4
raphael.rect(300,45,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(307,235,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(309,485,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(304,653,25,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
//波分路由灯
raphael.rect(166,85,29,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(166,142,29,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(166,336,29,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(166,390,29,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
raphael.rect(166,582,29,25).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+greenbulbUrl+")"});
}
$(function(){
//5分钟刷洗一次
interview = setInterval('refresh()',5*60*1000);
var height = document.body.clientHeight;
var width = document.body.clientWidth;
//alert(height+" "+width);
})
function refresh(){
$.ajax({
type:"post",
dataType:'json',
url:"<c:url value='/nodePosition/nodeGroupPosition.do?action=showTopo'/>",
data:"&requestType=ajax",
async:true,
success:function (data,textStatus){
if(textStatus == "success" && (data!= null && data!= "" )){
var nodeGroupPositionList;
var nodegroupArrowPositionList;
$(data).each(function(i,item){
nodeGroupPositionList = item.nodeGroupPositionList;
nodegroupArrowPositionList = item.nodegroupArrowPositionList;
})
//更新灯泡
$(nodeGroupPositionList).each(function(i,item){
if(item != null || item != ""){
//如果存在，则替换图片 如果不存在则画图
var bulbId = "bulb"+item[1];
if(positions[item[1]] == null || positions[item[1]] == ""){
//alert("null--->"+i+" id:"+item[0]);
positions[item[1]]= item[1];
var bulbImg = raphael.rect(item[2],item[3],item[4],item[5]).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+imgagePath+item[6]+")"});
bulbImg.id= bulbId
}else{
//alert("exist--->"+i+" id:"+item[0]);
var bulbImg = raphael.getById(bulbId);
var fillUrl = imgagePath+item[6];
bulbImg.attr({fill:"url("+fillUrl+")"});
}
}
})
//更新箭头
$(nodegroupArrowPositionList).each(function(i,item){
if(item != null || item != ""){
//如果存在，则替换图片 如果不存在则画图
var arrowId = "arrow"+item[0];
if(arrowPosition[item[0]] == null || arrowPosition[item[0]] == ""){
//alert("null--->"+i+" id:"+item[0]);
positions[item[0]]= item[0];
var bulbImg = raphael.rect(item[3],item[4],item[5],item[6]).attr({stroke: "#FFFFFF",'stroke-width':0.1,fill: "url("+imgagePath+item[7]+")"});
bulbImg.id=arrowId ;
}else{
//alert("exist--->"+i+" id:"+item[0]);
var bulbImg = raphael.getById(arrowId);
var fillUrl = imgagePath+item[7];
bulbImg.attr({fill:"url("+fillUrl+")"});
}
}
})
}
}
})
}
//悬浮显示节点信息
function showNodeList(nodeInfo,clientx,clienty){
if(interval){
clearInterval(interval);
}
var oSon = document.getElementById("hint");
with (oSon){
innerHTML = nodeInfo;
style.display = "block";
style.pixelLeft = clientx-5 ;
style.pixelTop = clienty-5;
}
}
function showMsg(){
var oSon = document.getElementById("hint");
with (oSon){
style.display = "block";
}
}
function hideMsg(){
if(interval){
clearInterval(interval);
}
var oSon = document.getElementById("hint");
with (oSon){
style.display = "none";
}
}
</script>
</head>
<body>
<div id="mainDiv"
style="width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; margin: 0px; padding: 0px;">
</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="I2" name="I2" 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="I3" name="I3" height="100%" width="100%" border="0"
style="background: #FFFFFF;" frameborder="0" src="" scrolling="no">
i18n_st.message.frameInfo_n81i
</iframe>
</div>
<div id="hint" style="display: none;" onmouseout="hideMsg()"
onmouseover="showMsg()"></div>
<div id="nodeBox" closed="true">
<div id="nodeBoxs"></div>
</div>
</body>
</html>

174
WebRoot/page/show/nodeRoom/addRoomInfo.jsp Normal file
View File

@@ -0,0 +1,174 @@
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/jstl/c" prefix="c"%>
<%@ taglib uri="/jstl/fn" prefix="fn"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>i18n_ari.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery-1.4.2.min.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/onmouse.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery.tools.js'/>"></script>
</head>
<script language="javascript" type="text/javascript">
var maxRows ='${maxRoomRows}';
var maxCols = '${maxRoomCols}';
function add(){
if($id("roomIspn","","i18n_ari.text.roomIspn_n81i") && $id("roomRows","sz","i18n_ari.text.roomRows_n81i") && $id("roomCols","sz","i18n_ari.text.roomCols_n81i")){
if(!containSpecial($("#roomIspn").val())){
$("#roomIspn").next().html("*");
$("#roomRows").next().html("*");
$("#roomCols").next().html("*");
if(Number($("#roomRows").val())>Number(maxRows)){
$("#roomRows").next().html("i18n_ari.message.roomRows_n81i"+maxRows);
return;
}else if(Number($("#roomCols").val())>Number(maxCols)){
$("#roomCols").next().html("i18n_ari.message.roomRows_n81i"+maxCols);
return;
}else{
if(ajaxCheck()){
document.Mkform.action="<%=path%>/nodePosition/roomManage.do?action=doAdd";
document.Mkform.submit();
}
}
}else{
$("#roomIspn").next().html("i18n_ari.message.roomIspn_n81i");
return;
}
}
}
function ajaxCheck(){
var type;
$.ajax({
url:"<%=path%>/nodePosition/roomManage.do?action=AjaxCheck",
type : "POST",
async:false,
data:$('#Mkform').serialize(),
success : function(data) {
if(data == "error"){
alert("i18n_ari.message.MkformError_n81i");
type = false;
}else if(data == "exception"){
alert("i18n_ari.message.MkformException_n81i");
type = false;
}else if(data =="success"){
type = true;
}
}
});
return type;
}
function goBack(){
document.Mkform.action="<%=path%>/nodePosition/roomManage.do?action=query";
document.Mkform.submit();
}
$(function(){
$("#roomRows").change(function(){
if(!$id("roomRows","sz","i18n_ari.text.roomRows_n81i")){
$("#roomRows").val("");
}
})
$("#roomCols").change(function(){
if(!$id("roomCols","sz","i18n_ari.text.roomCols_n81i")){
$("#roomCols").val("");
}
})
})
</script>
<body>
<div class="middle_list" >
<div class="box_2">
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="goBack()" value="i18n_ari.button.back_n81i"/>
</div>
<form action="" name="Mkform" id="Mkform" method="post" id="Mkform">
<input type="hidden" name="pageNo" value="${pageNo }" />
<input type="hidden" name="pageSize" value="${pageSize }" />
<input type="hidden" name="fromWhere" value="${fromWhere }"/>
<div style="clear: both"></div>
<table border="0" cellpadding="0" cellspacing="0" class="table">
<tr>
<td colspan="2" class="color_8">
<strong>i18n_ari.text.title_n81i</strong>
</td>
</tr>
<tr>
<td class="color_1" width="30%" align="right">
i18n_ari.text.index_n81i
</td>
<td class="color_3" align="left">
<input type="text" name="nodeRoom.roomIspn" id="roomIspn" />
<span style="color: red" id="info">*</span>
</td>
</tr>
<tr>
<td class="color_1" width="30%" align="right">
i18n_ari.text.rows_n81i
</td>
<td class="color_3" align="left">
<input type="text" name="nodeRoom.roomRows" id="roomRows" value=""/>
<span style="color: red" id="row">*</span>
</td>
</tr>
<tr>
<td class="color_1" width="30%" align="right">
i18n_ari.text.cols_n81i
</td>
<td class="color_3" align="left">
<input type="text" name="nodeRoom.roomCols" id="roomCols" value=""/>
<span style="color: red" id="col">*</span>
</td>
</tr>
<tr>
<td class="color_1" width="20%" align="right">
i18n_ari.text.roomDesc_n81i
</td>
<td class="color_3" align="left">
<textarea rows="5" cols="60" id="roomDesc"
name="nodeRoom.roomDesc" ></textarea>
</td>
</tr>
<tr>
<td class="color_7" colspan="2" align="right">
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'" onclick="add()" value="i18n_ari.button.submit_n81i"/>
&nbsp;
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:document.forms['Mkform'].reset()" value="i18n_ari.button.reset_n81i"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

444
WebRoot/page/show/nodeRoom/roomInfoList.jsp Normal file
View File

@@ -0,0 +1,444 @@
<%@ 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>i18n_ril.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<link href="<c:url value='/js/jBox/Skins/Gray/jbox.css'/>"
rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery-1.4.2.min.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/onmouse.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery.suggest.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value="/js/jBox/jquery.jBox-2.3.min.js"/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value="/js/fileInput.js"/>"></script>
<style type="text/css">
.mydiv {
background-color: #fff;
border: 1px solid #000;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index: 99;
width: 220px;
height: 80px;
left: 50%; /*FF IE7*/
top: 50%; /*FF IE7*/
margin-left: -150px !important; /*FF IE7 该值为本身宽的一半 */
margin-top: -60px !important; /*FF IE7 该值为本身高的一半*/
margin-top: 0px;
position: fixed !important; /*FF IE7*/
position: absolute; /*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode == 'CSS1Compat') ?
documentElement.scrollTop + (
document.documentElement.clientHeight-this.offsetHeight )/ 2 :
/*IE6*/
document.body.scrollTop + (
document.body.clientHeight - this.clientHeight )/ 2 );
/*IE5 IE5.5*/
}
.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left: 0;
top: 0; /*FF IE7*/
filter: alpha(opacity = 50); /*IE*/
opacity: 0.5; /*FF*/
z-index: 1;
position: fixed !important; /*FF IE7*/
position: absolute; /*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode == 'CSS1Compat') ?
documentElement.scrollTop + (
document.documentElement.clientHeight-this.offsetHeight )/ 2 :
/*IE6*/
document.body.scrollTop + (
document.body.clientHeight - this.clientHeight )/ 2 );
/*IE5 IE5.5*/
}
/*The END*/
</style>
<script language="javascript" type="text/javascript">
var msg = '${MSG}';
if(msg=='1'){
alert("i18n_ril.message.success_n81i");
}else if(msg=='2'){
alert("i18n_ril.message.faild_n81i");
}
function boxmanager(){
if(!isRigthCheck("ids", "edit")){
alert("i18n_ril.message.selectOne_n81i");
}else{
var checks = document.getElementsByName("ids");
var roomid ="";
var roomIspn;
for(i = 0 ; i <= checks.length ; i++ ){
if(checks[i]){
if(checks[i].checked)
{
roomid=checks[i].value;
roomIspn=$.trim($(checks[i]).parent().next().html());
}
}
}
document.form3.action ="<%=path%>/nodePosition/boxSet.do?action=query&roomid="+roomid+"&roomIspn="+roomIspn;
document.form3.submit();
}
}
//添加记录
function addRecord(){
document.form3.action ="<%=path%>/nodePosition/roomManage!executeAction.do?action=openAdd&pageNo="+'${pageNo }'+"&pageSize="+'${pageSize }';
document.form3.submit();
}
//修改记录
function updRecord(){
if(!isRigthCheck("ids", "edit")){
alert("i18n_ril.message.selectOne_n81i");
}else{
document.form3.action ="<%=path%>/nodePosition/roomManage!executeAction.do?action=openUpdate&pageNo="+'${pageNo }'+"&pageSize="+'${pageSize }';
document.form3.submit();
}
}
//删除记录
function delRecord(){
if(!isRigthCheck("ids", "remove")){
alert("i18n_ril.message.selectOne_n81i");
}else if(confirm("i18n_ril.message.delete_n81i")){
document.form3.action ="<%=path%>/nodePosition/roomManage!executeAction.do?action=del&pageNo="+'${pageNo }'+"&pageSize="+'${pageSize }';
document.form3.submit();
}
}
//查询记录
function qry(){
document.form3.action = "<%=path%>/nodePosition/roomManage.do?action=query";
document.form3.submit();
}
var set_Id;
var ajaxProperties = "";
var ajaxTableName = "";
var ajaxType = "";
var id = "";
var returnDiv = "";
var ajaxValue = "";
function lianxiangkeydown() {
clearTimeout(set_Id);
}
function lianxiangkeyup(ajaxProperties1,ajaxTableName1,ajaxType1,id1,returnDiv1,ajaxValue1) {
if(parent.document.getElementById("lianxiangStatus").value=="2")
{
if(jQuery.trim(ajaxValue1)=="") return false;
ajaxProperties = ajaxProperties1;
ajaxTableName = ajaxTableName1;
ajaxType = ajaxType1;
id = id1;
returnDiv = returnDiv1;
if(!containSpecial(ajaxValue1)){
ajaxValue = ajaxValue1;
}else{
clearTimeout(set_Id);
alert('i18n_ril.message.inputInfo_n81i');
$("#"+id).val('');
return;
}
clearTimeout(set_Id);
set_Id = setTimeout(ajaxForLianxiang,500);
}
}
function ajaxForLianxiang()
{
jQuery.post("<%=path%>/sysManage/sysPopedomManage!queryInfoForAjax.do",
{"ajaxProperties":ajaxProperties,"ajaxTableName":ajaxTableName,"ajaxType":ajaxType,"ajaxValue":ajaxValue},function(data)
{
var lianxiangList = data.split(",");
jQuery("#"+id).suggest(lianxiangList,{hot_list:lianxiangList,attachObject:"#"+returnDiv});
});
}
function ieBrowser(){
if($.browser.msie){
if($.browser.version.split('.')[0]<=7){
return false;
}else{
return true;//ie8+
}
}
}
// 程辉 2013-5-8 新增 模板下载
function downloadExample() {
document.form3.action = "<c:url value='/'/>/nodePosition/roomManage.do?action=downloadExample";
document.form3.submit();
document.form3.action = "<%=path%>/nodePosition/roomManage.do?action=query";
}
//程辉 2013-5-8 新增 导入
function importXls() {
var myfileVal = document.getElementById("myFile").value;
if(myfileVal=="") {
alert("i18n_ril.message.selectImportFile_n81i");
}else if((myfileVal.lastIndexOf(".xlsx")+5)!=myfileVal.length && (myfileVal.lastIndexOf(".xls")+4)!=myfileVal.length){
alert("i18n_ril.message.selectCorrectFile_n81i");
}else if(confirm('i18n_ril.message.sureToImport_n81i')){
document.form3.action = "<c:url value='/'/>/nodePosition/roomManage.do?action=importXls";
document.form3.submit();
document.form3.action = "<%=path%>/nodePosition/roomManage.do?action=query";
}
}
//程辉 2013-5-8 新增 导出当前页
function emportCurrentXls() {
document.form3.action = "<c:url value='/'/>/nodePosition/roomManage.do?action=emportCurrentXls&pageNo="+'${pageNo }'+"&pageSize="+'${pageSize }'+"&rIspn="+$("#rIspn").val();
document.form3.submit();
closeDiv();
document.form3.action = "<%=path%>/nodePosition/roomManage.do?action=query";
}
//程辉 2013-5-8 新增 导出全部
function emportAllXls() {
document.form3.action = "<c:url value='/'/>/nodePosition/roomManage.do?action=emportAllXls&rIspn="+$("#rIspn").val();
document.form3.submit();
closeDiv();
document.form3.action = "<%=path%>/nodePosition/roomManage.do?action=query";
}
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}
function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}
function goGuide(datas) {
if(datas!=null && datas!=""){
if(datas.resu=='over') {
window.location ="<%=path%>/sysManage/guideManage!execute.do?action=index";
}
}
}
$(function(){
var dh = document.body.clientHeight;
var dhh = dh-60+"px;";
var tableHeight = $("#info").height();
if(tableHeight > dh-60){
$("#maindiv").attr("style","clear:both;margin-left:6px;overflow-y:auto;overflow-x:auto;width:99%;font-size:12px;height: "+dhh);
if(ieBrowser()){
$("#info").attr("style","width:100%;");
}else{
$("#info").attr("style","width:98.5%;");
}
}else{
$("#maindiv").attr("style","clear:both;margin-left:6px;overflow-y:auto;overflow-x:auto;width:98%;font-size:12px;height: "+dhh);
$("#info").attr("style","width:100%;");
}
$("#maindiv").attr("style","clear:left");
if($("#isComplete").val()=='0'){
var submit = function (v, h, f) {
if (v == 'yes') {
$("input[type=hidden][name=fromWhere]").val('formGuide');
return;
}
if (v == 'no') {
$.post("<c:url value='/sysManage/guideManage!setComplete.do'/>",
{
packNum:3,
packName:'jf'
},
function(datas){
goGuide(datas);
},"json");
}
};
$.jBox.warning("i18n_ril.message.warning_n81i", "i18n_ril.message.hint_n81i", submit,{icon: false});
}
});
</script>
</head>
<body>
<div class="middle_list" style="overflow: hidden;">
<form name=form3 id="frmArticleType"
action="<c:url value='/nodePosition/roomManage.do?action=query'/>" method="post"
enctype="multipart/form-data">
<input type="hidden" name="isComplete" id="isComplete"
value="${isComplete}" />
<input type="hidden" name="fromWhere" value="${fromWhere }" />
<div id="divTop">
<div class="box_1">
<label class="divTopText"><font class="selectText">i18n_ril.text.rIspn_n81i</font>
<input type="text" id="rIspn"
onkeyup="lianxiangkeyup('roomIspn','NodeRoomTable','String','rIspn','suggest1',this.value);"
name="rIspn" title="i18n_ril.message.rIspn_n81i" value="${rIspn}" size="20" />
<div id='suggest1' class="ac_results"></div></label>
<img src="<c:url value='/images/button_chaxun.png'/>"
class="img_middle2" onclick="javascript:qry();" />
</div>
<div class="box_2">
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:downloadExample();" value="i18n_ril.button.downloadExample_n81i" />
&nbsp;
<input type="button" value="i18n_ril.text.importXls_n81i" title="i18n_ril.text.importXls_n81i" class="btn3_mouseout" onclick="javascript:uploadFile(this)"/>
<input type="file" name="myFile" id="myFile" value="" onchange="javascript:setValue(this.value)"
class="filebtn" />
&nbsp;
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:importXls();" value="i18n_ril.button.import_n81i" />
&nbsp;
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:showDiv();" value="i18n_ril.button.export_n81i" />
&nbsp;
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:boxmanager();" value="i18n_ril.button.boxmanager_n81i" />
&nbsp;
<jsp:include page="/include/include.jsp" /></div>
</div>
<div id="maindiv">
<table border="0" cellpadding="0" cellspacing="0" class="table"
id="info">
<tr>
<td width="8%" class="color_top" nowrap>
<input type="checkbox" name="checkbox62" value="checkbox"
onClick="checkAll(this)" />
i18n_ril.text.index_n81i
</td>
<td width="20%" class="color_top" nowrap>
i18n_ril.text.rIspn_n81i
</td>
<td width="10%" class="color_top" nowrap>
i18n_ril.text.roomRows_n81i
</td>
<td width="10%" class="color_top" nowrap>
i18n_ril.text.roomCols_n81i
</td>
<td width="40%" class="color_top" nowrap>
i18n_ril.text.roomDesc_n81i
</td>
</tr>
<c:set var="index" value="${1}" />
<c:choose>
<c:when test="${fn:length(nodeRoomList) > 0}">
<c:forEach items="${nodeRoomList}" var="nodeRoom" varStatus="vs">
<c:set var="color" value="color_1" />
<c:set var="color_end" value="color_7" />
<c:if test="${vs.count%2!=0 }">
<c:set var="color" value="color_3" />
<c:set var="color_end" value="color_6" />
</c:if>
<tr>
<td class="${color }">
<input type="checkbox" name="ids" id="ids"
value="${nodeRoom.roomId}" />
${index+(pageNo-1)*pageSize}
</td>
<td class="${color }">
${nodeRoom.roomIspn}
</td>
<td class="${color }">
${nodeRoom.roomRows}
</td>
<td class="${color }">
${nodeRoom.roomCols}
</td>
<td class="${color }">
${nodeRoom.roomDesc}
</td>
</tr>
<c:set var="index" value="${index + 1}" />
</c:forEach>
</c:when>
<c:otherwise>
<tr>
<td colspan="5" height="20" class="color_6" align="center">
i18n_ril.text.noRecord_n81i
</td>
</tr>
</c:otherwise>
</c:choose>
</table>
</div>
<c:if test="${!empty nodeRoomList}">
<div id="divBoot">
<jsp:include page="/common/page.jsp" />
</div>
</c:if>
</form>
</div>
<br />
<div id="popDiv" class="mydiv" style="display: none;">
<input type="hidden" />
<input type="button" class=btn3_mouseout style="width: 100px;"
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:emportCurrentXls();" value="i18n_ril.button.exportCurrentXls_n81i" />
&nbsp;
<input type="button" class=btn3_mouseout style="width: 80px"
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:emportAllXls();" value="i18n_ril.button.exportAllXls_n81i" />
&nbsp;
<br />
<a href="javascript:closeDiv()">i18n_ril.text.closeWindow_n81i</a>
</div>
<div id="bg" class="bg" style="display: none;"></div>
</body>
</html>

177
WebRoot/page/show/nodeRoom/updateRoomInfo.jsp Normal file
View File

@@ -0,0 +1,177 @@
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/jstl/c" prefix="c"%>
<%@ taglib uri="/jstl/fn" prefix="fn"%>
<%@ taglib uri="/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>i18n_uri.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery-1.4.2.min.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/onmouse.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery.tools.js'/>"></script>
</head>
<script language="javascript" type="text/javascript">
function ajaxCheck(){
var type;
$.ajax({
url:"<%=path%>/nodePosition/roomManage.do?action=roomManagerCheck",
type : "POST",
async:false,
data:$('#Mkform').serialize(),
success : function(data) {
if(data == "error"){
alert("i18n_uri.message.mkFormError_n81i");
type = false;
}else if(data == "exception"){
alert("i18n_uri.message.mkFormException_n81i");
type = false;
}else if(data =="success"){
type = true;
}
}
});
return type;
}
var maxRows ='${maxRoomRows}';
var maxCols = '${maxRoomCols}';
function add(){
if($id("roomIspn","","i18n_uri.text.roomIspn_n81i") && $id("roomRows","sz","i18n_uri.text.roomRows_n81i") && $id("roomCols","sz","i18n_uri.text.roomCols_n81i")){
if(!containSpecial($("#roomIspn").val())){
$("#roomIspn").next().html("*");
$("#roomRows").next().html("*");
$("#roomCols").next().html("*");
if(Number($("#roomRows").val()) > Number(maxRows)){
$("#roomRows").next().html("i18n_uri.message.roomRows_n81i"+maxRows);
return;
}else if(Number($("#roomCols").val()) > Number(maxCols)){
$("#roomCols").next().html("i18n_uri.message.roomCols_n81i"+maxCols);
return;
}else{
if(ajaxCheck()){
document.Mkform.action="<%=path%>/nodePosition/roomManage.do?action=doUpdate";
document.Mkform.submit();
}
}
}else{
$("#roomIspn").next().html("i18n_uri.message.roomIspn_n81i");
return;
}
}
}
function goBack(){
document.Mkform.action="<%=path%>/nodePosition/roomManage.do?action=query";
document.Mkform.submit();
}
$(function(){
$("#roomRows").change(function(){
if(!$id("roomRows","sz","i18n_uri.text.roomRows_n81i")){
$("#roomRows").val("");
}
})
$("#roomCols").change(function(){
if(!$id("roomCols","sz","i18n_uri.text.roomCols_n81i")){
$("#roomCols").val("");
}
})
})
</script>
<body >
<div class="middle_list" >
<div class="box_2">
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="goBack()" value="i18n_uri.button.back_n81i"/>
</div>
<form action="" name="Mkform" method="post" id="Mkform">
<input type="hidden" name="nodeRoom.roomId" value="${nodeRoom.roomId}" />
<input type="hidden" name="rIspn" value="${rIspn }" id="rIspn">
<input type="hidden" name="pageNo" value="${pageNo }" />
<input type="hidden" name="pageSize" value="${pageSize }" />
<jsp:include page="/common/transferHiddenParameter.jsp" />
<div style="clear: both"></div>
<table border="0" cellpadding="0" cellspacing="0" class="table">
<tr>
<td colspan="2" class="color_8">
<strong>i18n_uri.text.title_n81i</strong>
</td>
</tr>
<tr>
<td class="color_1" width="30%" align="right">
i18n_uri.text.index_n81i
</td>
<td class="color_3" align="left">
<input type="text" name="nodeRoom.roomIspn" id="roomIspn" value="${nodeRoom.roomIspn}"/>
<span style="color: red" id="info">*</span>
</td>
</tr>
<tr>
<td class="color_1" width="30%" align="right">
i18n_uri.text.rows_n81i
</td>
<td class="color_3" align="left">
<input type="text" name="nodeRoom.roomRows" id="roomRows" value="${nodeRoom.roomRows}"/>
<span style="color: red" id="row">*</span>
</td>
</tr>
<tr>
<td class="color_1" width="30%" align="right">
i18n_uri.text.cols_n81i
</td>
<td class="color_3" align="left">
<input type="text" name="nodeRoom.roomCols" id="roomCols" value="${nodeRoom.roomCols}"/>
<span style="color: red" id="col">*</span>
</td>
</tr>
<tr>
<td class="color_1" align="right">
i18n_uri.text.rommDesc_n81i
</td>
<td class="color_3" align="left">
<textarea rows="5" cols="60" id="rommDesc"
name="nodeRoom.roomDesc" >${nodeRoom.roomDesc}</textarea>
</td>
</tr>
<tr>
<td class="color_7" colspan="2" align="right">
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'" onclick="add()" value="i18n_uri.button.submit_n81i"/>
&nbsp;
<input type="button" class=btn3_mouseout
onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
onclick="javascript:document.forms['Mkform'].reset()" value="i18n_uri.button.reset_n81i"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

290
WebRoot/page/show/show3DRoom.jsp Normal file
View File

@@ -0,0 +1,290 @@
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/common/taglib.jsp"%>
<%
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>
<title>i18n_sr.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery-1.4.2.min.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/onmouse.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/raphael.js'/>"></script>
<style>
body {
background-image: url("<%=path %>/images/show/bg.jpg");
background-repeat: no-repeat;
background-position: center;
scrollbar-face-color: #E6E7E9; //滚动条凸出部分的颜色
scrollbar-highlight-color: #E7E8EA; //滚动条空白部分的颜色
scrollbar-shadow-color: #E6E7E9; //立体滚动条阴影的颜色
scrollbar-3dlight-color: #E6E7E9; //滚动条亮边的颜色
scrollbar-arrow-color: #E1E3E0; //上下按钮上三角箭头的颜色
scrollbar-track-color: #E6E7E9; //滚动条的背景颜色
scrollbar-darkshadow-color: #CCCCCC; //滚动条强阴影的颜色
scrollbar-base-color: #E6E7E9// 滚动条的基本颜色
}
#hint {
border: 1px solid #000000;
background: #EEF0ED;
position: absolute;
z-index: 9;
padding: 6px;
line-height: 14px;
text-align: left;
top: 1520px;
font-size: 12px;
}
</style>
<script type="text/javascript">
var raphael;
var raphaelRoom;
var top1 = 20;
var left = 5;
var Xgap = 5;
var Ygap = 10;
var nodeWidth = 60;
var nodeHeight = 60;
var leafNodeHeight = 33;
var textOffset = 8;
var nodes = new Array();
var roomY = 30;
var roomGap = 5;
var roomWidth=100;
var roomHeight=100;
var minboxWidth=50;
var minboxHeight=100;
var boxWidth=250;
var boxHeight=500;
var nodegroupsHeight=0;
var nodeGroupUrl="${pageContext.request.contextPath}/images/topo3d/nodeGroup.png";
var nodeGroupErrorUrl="${pageContext.request.contextPath}/images/topo3d/nodeGroupError.png";
var leafNodeUrl="${pageContext.request.contextPath}/images/topo3d/leafNode.png";
var leafNodeErrorUrl="${pageContext.request.contextPath}/images/topo3d/leafNodeError.png";
var boxUrl="${pageContext.request.contextPath}/images/topo3d/box.png";
var boxErrorUrl="${pageContext.request.contextPath}/images/topo3d/boxError.png";
var lineUrl = "${pageContext.request.contextPath}/images/topo3d/cutLine.png";
$(function(){
var height = document.body.clientHeight;
var width = document.body.clientWidth;
$("#nodegroups").css("height",height-10);
var length = '${fn:length(nodegroupList) }';
nodegroupsHeight = top1+ length*(nodeHeight+Ygap)
raphael = Raphael("nodegroups",70,nodegroupsHeight);
var leafNums = 0;
var firstGroupId = '${firstGroupId}';
<c:forEach items="${nodegroupList}" var="nodeGroup" varStatus="index">
var ind = '${index.index}';
if(ind == 0 && (firstGroupId == ""||firstGroupId == null)){
firstGroupId = '${nodeGroup.groupId}';
}
var nodeX = left;
var nodeY = top1 +ind*(nodeHeight+Ygap)-(leafNums*(nodeWidth-leafNodeHeight));
var fillImg;
var fillImgHeight;
//是否为叶子节点组 leafGroup=0叶子节点组
if('${nodeGroup.leafGroup}' == 0){
//节点组状态 0正常 1异常
if('${nodeGroup.status}' == 0){
fillImg = leafNodeUrl;
}else{
fillImg = leafNodeErrorUrl;
}
fillImgHeight = leafNodeHeight;
leafNums++;
}else{
//节点组状态 0正常 1异常
if('${nodeGroup.status}' == 0){
fillImg = nodeGroupUrl;
}else{
fillImg = nodeGroupErrorUrl;
}
fillImgHeight = nodeHeight;
}
var node = raphael.rect(nodeX,nodeY,nodeWidth,fillImgHeight).attr({stroke: "#FFFFFF",'stroke-width':0.1,title:'${nodeGroup.groupName}',text:'${nodeGroup.alramInfo}', fill: "url("+fillImg+")"});
node.id = '${nodeGroup.groupId}';
nodes['${nodeGroup.groupId}']=node;
$("body").append("<input type='hidden' id='${nodeGroup.groupId}' value=''>");
$("input[id='${nodeGroup.groupId}']").val('${nodeGroup.alramInfo}');
//点击查看节点组下的机房
node.click(function(){
clearSelectImg();
var imgUrl = this.attr("fill");
imgUrl = imgUrl.replace(".png","_select.png");
this.attr({ fill: imgUrl});
getNodeRoom('${nodeGroup.groupId}');
}).mousemove(function(event){
this.animate({"fill-opacity":.8},800);
// var alramInfo = this.attr("text");
var nodeid = this.id;
var selector = "#"+nodeid;
var alramInfo = $(selector).val();
showMsg(alramInfo,event);
}).mouseout(function(){
this.animate({"fill-opacity":1},800);
hideMsg();
})
</c:forEach>
//初始化机房展示
$("#I2").attr("src","<c:url value='/nodePosition/topoShow.do?action=getNodeRoom&groupId="+firstGroupId+"&nodeBoxId=${nodeBoxId}&nodeBoxIspn=${nodeBoxIspn}'/>");
var imgUrl = nodes[firstGroupId].attr("fill");
imgUrl = imgUrl.replace(".png","_select.png");
nodes[firstGroupId].attr({ fill: imgUrl});
})
function getNodeRoom(groupId){
$("#I2").attr("src","<c:url value='/nodePosition/topoShow.do?action=getNodeRoom&groupId="+groupId+"'/>");
}
function clearSelectImg(){
for(key in nodes){
var node = raphael.getById(key);
var fillUrl = node.attr("fill");
if(fillUrl.indexOf("_select") >0){
fillUrl = fillUrl.replace("_select","");
node.attr({fill:fillUrl});
}
}
}
function showMsg(alramInfo,event){
var oSon = window.document.getElementById("hint");
var infos = alramInfo.split("|");
var info="";
for(key in infos){
if(key == 0){
var inf="";
var a = infos[key];
if(a.length>13){
for(var i = 0 ;i <a.length;i++){
if(i%13==0&&i!=0){
inf = inf + "<br/>";
}
inf = inf + a.charAt(i);
}
}else{
inf =infos[key];
}
info+="<span style='font-weight: bold;'>"+inf+"</span><br/><br/>";
}else{
info+=infos[key]+"<br/>";
}
}
with (oSon){
innerHTML = info;
style.display = "block";
if(navigator.userAgent.indexOf("MSIE")>0) {
style.pixelLeft = window.event.clientX + window.document.body.scrollLeft-200 ;
style.pixelTop = window.event.clientY + window.document.body.scrollTop-50;
}else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
var e = event ? event : window.event;
x = e.clientX;
y = e.clientY;
style.left = x + window.document.body.scrollLeft-200 ;
style.top = y + window.document.body.scrollTop-50;
}
}
}
function hideMsg(){
$("#hint").hide();
}
$(function(){
$("#prev").click(function(){
var ctopVal = Number($("#nodegroups").children().css("top").replace("px",""));
var pageHeight = Number($("#nodegroups").css("height").replace("px",""));
pageHeight = ctopVal>=0?pageHeight:0;
ctopVal = ctopVal>=0?ctopVal:-ctopVal;
//alert(ctopVal+"--"+pageHeight);
if(ctopVal<=pageHeight){
alert("i18n_sr.message.isFirst_n81i");
return;
}
var topVal = Number($("#nodegroups").children().css("top").replace("px",""))+(nodeHeight+Ygap);
$("#nodegroups").children().animate({top:topVal},{queue:false,duration:500});
})
$("#next").click(function(){
var ctopVal = Number($("#nodegroups").children().css("top").replace("px",""));
var pageHeight = Number($("#nodegroups").css("height").replace("px",""));
if((-ctopVal+pageHeight) >= nodegroupsHeight){
alert("i18n_sr.message.isLast_n81i");
return;
}
var topVal = Number($("#nodegroups").children().css("top").replace("px",""))-(nodeHeight+Ygap);
//alert(ctopVal+"--"+nodegroupsHeight+"--"+topVal+"--"+$("#nodegroups").css("height"));
$("#nodegroups").children().animate({top:topVal},{queue:false,duration:500});
})
/*if(navigator.userAgent.indexOf("MSIE")>0) {
$("#I2").css("height","100%");
}else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
$("#I2").css("height","870px");
}*/
resizeIframe('I2');
})
function resizeIframe(obj) {
var Iframe = document.getElementById(obj);
if (Iframe){
if (Iframe.contentDocument){//ff
Iframe.style.height = Iframe.contentDocument.body.scrollHeight +80+'px';
}
else if(Iframe.document && Iframe.document.body.scrollHeight){//ie
Iframe.style.height = iframe.document.body.scrollHeight + 40 + 'px';
}
}
}
</script>
</head>
<body style="overflow-y: hidden">
<div>
<iframe id="I2" name="I2" height="100%" width="100%" border="0"
frameborder="0" src="" scrolling="auto">
i18n_sr.message.frame_n81i
</iframe>
</div>
<!-- 节点组画布 -->
<div
style="position: absolute; top: 22px; right: 20px; z-index: 2; width: 70px; overflow: hidden; border-left: #cccccc 1px solid;"
id="nodegroups">
</div>
<div id="prev"
style="position: absolute; top: 2px; right: 2px; z-index: 2; width: 70px; height: 22px; background-repeat: no-repeat; background-image: url('../images/prev_v.png');">
</div>
<div id="next"
style="position: absolute; bottom: 2px; right: 2px; z-index: 2; width: 70px; height: 22px; background-repeat: no-repeat; background-image: url('../images/next_v.png');">
</div>
<div id="hint" style="display: none;" mousemove="showMsg()"
onmouseout="hideMsg()"></div>
</body>
</html>

270
WebRoot/page/show/showMap.jsp Normal file
View File

@@ -0,0 +1,270 @@
<%@ 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_sm.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/jquery.processing.plugin.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>
<link href="<%=path%>/css/show/topology.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
jQuery(function(){
$(document).progressDialog.showDialog("i18n_sm.message.loading_n81i...");
});
</script>
</head>
<body oncontextmenu="event.returnValue=false">
<div id="border_Div">
<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_sm.button.ok_n81i' id="apply" /><input type='button' value='i18n_sm.button.cancle_n81i' id="cancel" /></span>
</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_1.png" border="0" />
</div>
<ul id="rightMenuContent"
style="width: 150px; height: 50%;list-style-type: none;margin:0px;display: none;"
class="menucenter">
</ul>
</div>
<!-- 操作信息窗口 -->
<div id="action_info" class="actionInfo">
</div>
<input type="hidden" id="gid" value="${groupId }"/>
<input type="hidden" id="sysNpId" value="${sysPositionId }"/>
<input id= "del_Npids" type="hidden" value=""/>
<input id= "del_Nodeids" type="hidden" value=""/>
</div>
</div>
<script >
jQuery(function(){
//加载"修改图片" 用图片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);
});
}
});
//发送请求，载入节点及关联关系
$('#board').editTopology("<%=path %>/nodePosition/nodePosition.do?action=getIconModules");
//新右键菜单
$('#board').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 ){//当前对象是图标
$("li[ltype!='node']",menu).hide();
var data = $a_obj.data('data');
if(data.nodeType == 'system'){//要是系统先把删除干掉
$("li[ltype='node'][lvalue='del']",menu).hide();
$("li[ltype='node'][lvalue='1']",menu).hide();
}else{
if(data.id == '0'){//先保存再就行节点组机柜编辑
$("ul li[ltype!='normal'][lvalue='1']",menu).hide();
}else if(data.viewType == '1'){//节点组
//$("li[lvalue]",menu).hide();
$("li[ltype='node'][lvalue='1']",menu).show();
}
}
}else if($Obj[0].tagName == 'DIV' && $Obj.attr('divType') == 'line'){//线
//$("ul li[ltype!='line']",menu).hide();
$("ul[id='menuList']",menu).hide();
}else{//桌面
$("ul li[ltype!='normal']",menu).hide();
}
return menu;
},
bindings : {
save : function(){//保存操作
if($("#del_Npids").val()!=""){
var resu = deleteNode("<%=path %>/nodePosition/nodePosition.do?action=deleteNodes",$('#del_Npids').val(),$('#del_Nodeids').val());
if(resu==true){
saveNode("<%=path %>/nodePosition/nodePosition.do?action=updateNodes",0);
}
}else{
saveNode("<%=path %>/nodePosition/nodePosition.do?action=updateNodes",0);
}
},
reset : function(){//页面重置
document.location.reload();
},
link : function(){//开始创建关联关系
$('#board').data('action_flag',true);//事件标志对象——开始
var $fromNode = $('#board').data('active_obj');
var nl1 = $fromNode.data('data');
if(!nl1){alert("i18n_sm.message.data_n81i");return;}
var node_id1 = $fromNode.data('node_id');
$("#action_info").html("<input type='button' value='i18n_sm.button.cancle_n81i' id='exitLink'><br/>i18n_sm.message.actionInfo_n81i：<br/>"+ nl1.nodeName).show();
$("#board A[divType='node']").bind('click',function(){if($('#board').data('action_flag'))addLinkInPage(); else return; });
$("#exitLink").live('click',function(){
$('#board').data('action_flag',false);//事件标志对象——结束
$("#action_info").hide();
});
},
//cancel : function(){//取消关联
// $('#board').data('action_flag',false);//事件标志对象——结束
// $("#action_info").hide();
//},
unLink : function(){//删除关联关系或节点
//var nodesSize = $("a[divType='node'][active='1']").size();
//var lineSize = $("div[divType='line'][active='1'][id*='_x_']").size();
deleteNodesInPage(0);
//deleteLinesInPage(0);
},
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;
if(data.childNum >0){//有子节点组
url = "<%=path %>/nodePosition/nodePosition.do?action=getChildNg&gid="+data.nodeId+"&npGroupId="+data.id+"&from=edit";
}else{
url = "<%=path %>/nodePosition/nodePosition.do?action=editMap&gid="+data.nodeId+"&npGroupId="+data.id;
}
url = encodeURI(url);
url = encodeURI(url);
window.location.href=url;
}
}
});
//右边菜单
var $content=$("#rightMenuContent");
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);
})
}
});
//从桌面拖到菜单事件
$content.droppable({
greedy : true,
drop:function(event,ui){
var icon=ui.draggable;
if(icon[0].tagName=='A' || icon[0].tagName=='SPAN'){
icon.fadeOut(300,function(){
//创建列表节点并保存信息
var data=icon.data("data");
var node_id=icon.data("node_id");
$content.createLiNode(node_id,data);
//$("#"+node_id).draggable({
// cursorAt : {cursor :"move"},
// revert:false
//});
//删除桌面展示关系线
$('#board').find("div[divType='line'][id*='"+node_id+"']").attr('action','delete').hide();
icon.hide(500,function(){
icon.remove();
});
});
}else{
}
}
});
//从菜单拖到桌面事件
$('#board').droppable({
greedy : true,
drop:function(event,ui){
//添加桌面展示图标
var icon=ui.draggable;
//alert(icon[0].tagName);
if(icon[0].tagName=='LI' || icon[0].tagName=='SPAN'){
var node_id = icon.data("node_id");
$('#board').createIconNode(node_id,icon.data("data"));
$("a[divType='node'][id='"+node_id+"']")
.attr('action','update')
.css('top',(event.clientY>10 ? (event.clientY-10) : 1)+'px')
.css('left',(event.clientX>10 ? (event.clientX-10) : 1)+'px');
$("a[divType='node'][id='"+node_id+"']").bind('move',function(){
$(this).attr('action','update').resetLine();
});
window.setTimeout(function(){$("a[divType='node'][id='"+node_id+"']").trigger('move')},100);
//删除列表节点并保存信息
icon.hide(500,function(){
icon.remove();
});
}
}
})
})
</script>
<div id='menu1'style="display: none;">
<ul id='menuList'>
<li id='save' ltype='normal'>i18n_sm.menu.save_n81i</li>
<li id='reset' ltype='normal'>i18n_sm.menu.reset_n81i</li>
<li id='unLink' ltype='line'>i18n_sm.menu.unLink_n81i</li>
<li id='link' ltype='node'>i18n_sm.menu.link_n81i</li>
<!-- <li id='cancel' ltype='node'>取消操作</li> -->
<li id='unLink' ltype='node' lvalue='del'>i18n_sm.menu.unNode_n81i</li>
<li id='changeImg' ltype='node'>i18n_sm.menu.changeImg_n81i</li>
<li id='openTopology' ltype='node' lvalue='1'>i18n_sm.menu.openTopology_n81i</li>
</ul>
</div>
</body>
</html>

166
WebRoot/page/show/showNode.jsp Normal file
View File

@@ -0,0 +1,166 @@
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/common/taglib.jsp"%>
<%
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_sn.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery-1.4.2.min.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/onmouse.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/raphael.js'/>"></script>
<script type="text/javascript">
var raphael;
var top = 100;
var left = 200;
var Xgap = 200;
var Ygap = 80;
var nodeWidth = 120;
var nodeHeight = 80;
var textOffset = 8;
var nodes = new Array();
$(function(){
var height = document.body.clientHeight;
var width = document.body.clientWidth-5;
//alert(height+" "+width);
raphael = Raphael(0,0, width,height);
//raphael.rect(0,0,width,height).attr({'stroke-width':1,stroke: "#FFFFFF", fill: "#FBFBEA"});
//画节点图间的关系
draw();
//节点间关系
drawLine();
})
//var serverImg = raphael.rect(serverImgX,y,serverImgWidth,serverImgHeight).attr({stroke: "#FFFFFF", fill: "url("+serverImgUrl+")"});
function draw(){
for(var i = 0;i < 9; i++){
var nodeX = left + i%3*(nodeWidth+Xgap);
var nodeY = top + parseInt(i/3)*(nodeHeight+Ygap);
var node = raphael.rect(nodeX,nodeY,nodeWidth,nodeHeight).attr({stroke: "#FFFFFF", fill: "#990000"});
node.id = "node"+i;
nodes[i] = node;
}
}
function drawLine(){
for(key in nodes){
if(key%3 == 1){
var previousNode = nodes[key-1];
var previousNodeAttr = raphael.getById("node"+(key-1)).attr();
var preNodeX = previousNodeAttr["x"]+previousNodeAttr["width"];
var preNodeY = previousNodeAttr["y"]+previousNodeAttr["height"]/2 ;
//var preNodeY1 = previousNodeAttr["y"]+previousNodeAttr["height"]*2/3 ;
var currentNode = nodes[key];
var currentNodeAttr = raphael.getById("node"+key).attr();
var curNodeX = currentNodeAttr["x"];
var curNodeY = currentNodeAttr["y"]+currentNodeAttr["height"]/2;
//var curNodeY1 = currentNodeAttr["y"]+currentNodeAttr["height"]*2/3;
//画带箭头的线
var arrorPath = getArr(preNodeX, preNodeY,curNodeX,curNodeY,8);
//var arrorPath1 = getArr(curNodeX,curNodeY1,preNodeX, preNodeY1,8);
raphael.path(arrorPath).attr({'stroke-width':1,stroke: "#000000"});
//raphael.path(arrorPath1).attr({'stroke-width':1,stroke: "#FF0000"});
//写内容
var rot = Raphael.angle(curNodeX, curNodeY,preNodeX,preNodeY);
var contentX = preNodeX+(curNodeX-preNodeX)/2+(((curNodeX-preNodeX)>0) && ((curNodeY-preNodeY)<0)?-textOffset:textOffset);
var contentY = preNodeY+(curNodeY-preNodeY)/2-textOffset;
raphael.text(contentX,contentY,"i18n_sn.message.content_n81i"+key).attr({'stroke-width':0.1,stroke: "#333333", fill: "#333333",transform:"r"+rot});
}else if(key%3 == 2){
var previousNode = nodes[key-1];
var previousNodeAttr = raphael.getById("node"+(key-1)).attr();
var preNodeX = previousNodeAttr["x"]+previousNodeAttr["width"];
var preNodeY = previousNodeAttr["y"]+previousNodeAttr["height"]/3 ;
var preNodeY1 = previousNodeAttr["y"]+previousNodeAttr["height"]*2/3 ;
var currentNode = nodes[key];
var currentNodeAttr = raphael.getById("node"+key).attr();
var curNodeX = currentNodeAttr["x"];
var curNodeY = currentNodeAttr["y"]+currentNodeAttr["height"]/3;
var curNodeY1 = currentNodeAttr["y"]+currentNodeAttr["height"]*2/3;
//画带箭头的线
var arrorPath = getArr(preNodeX, preNodeY,curNodeX,curNodeY,8);
var arrorPath1 = getArr(curNodeX,curNodeY1,preNodeX, preNodeY1,8);
raphael.path(arrorPath).attr({'stroke-width':1.3,stroke: "#000000"});
raphael.path(arrorPath1).attr({'stroke-width':1.5,stroke: "#000000"});
//写内容
var rot = Raphael.angle(curNodeX, curNodeY,preNodeX,preNodeY);
var contentX = preNodeX+(curNodeX-preNodeX)/2+(((curNodeX-preNodeX)>0) && ((curNodeY-preNodeY)<0)?-textOffset:textOffset);
var contentY = preNodeY+(curNodeY-preNodeY)/2-textOffset;
raphael.text(contentX,contentY,"i18n_sn.message.content_n81i"+key+"1").attr({'stroke-width':0.1,stroke: "#333333", fill: "#333333",transform:"r"+rot});
var contentX1 = preNodeX+(curNodeX-preNodeX)/2+(((curNodeX-preNodeX)>0) && ((curNodeY1-preNodeY1)<0)?-textOffset:textOffset);
var contentY1 = preNodeY1+(curNodeY1-preNodeY1)/2-textOffset;
raphael.text(contentX1,contentY1,"i18n_sn.message.content_n81i"+key+"2").attr({'stroke-width':0.1,stroke: "#333333", fill: "#333333",transform:"r"+rot});
}else if(key == 3){
var currentNode = nodes[key];
var currentNodeAttr = raphael.getById("node"+key).attr();
var curNodeX = currentNodeAttr["x"]+previousNodeAttr["width"];
var curNodeY = currentNodeAttr["y"]+currentNodeAttr["height"]/2;
var nextNodeX = curNodeX+Xgap;
var nextNodeY = currentNodeAttr["y"] - Ygap - nodeHeight/3;
var nextNodeY1 = currentNodeAttr["y"] + currentNodeAttr["height"] + Ygap + nodeHeight/3;
var arrorPath = getArr(curNodeX, curNodeY,nextNodeX,nextNodeY,8);
var arrorPath1 = getArr(curNodeX,curNodeY,nextNodeX, nextNodeY1,8);
raphael.path(arrorPath).attr({'stroke-width':1.2,stroke: "#000000"});
raphael.path(arrorPath1).attr({'stroke-width':1.2,stroke: "#000000"});
var rot = Raphael.angle(nextNodeX,nextNodeY,curNodeX, curNodeY);
var contentX = curNodeX+(nextNodeX-curNodeX)/2+(((nextNodeX-curNodeX)>0) && ((nextNodeY-curNodeY)<0)?-textOffset:textOffset);
var contentY = curNodeY+(nextNodeY-curNodeY)/2-textOffset;
raphael.text(contentX,contentY,"i18n_sn.message.content_n81i"+key+"1").attr({'stroke-width':0.1,stroke: "#333333", fill: "#333333",transform:"r"+rot});
var rot1 = Raphael.angle(nextNodeX,nextNodeY1,curNodeX, curNodeY);
var contentX1 = curNodeX+(nextNodeX-curNodeX)/2+(((nextNodeX-curNodeX)>0) && ((nextNodeY1-curNodeY)<0)?-textOffset:textOffset);
var contentY1 = curNodeY+(nextNodeY1-curNodeY)/2-textOffset;
raphael.text(contentX1,contentY1,"i18n_sn.message.content_n81i"+key+"1").attr({'stroke-width':0.1,stroke: "#333333", fill: "#333333",transform:"r"+rot1});
}
}
}
//画带箭头的线
//var arrorPath = getArr(resPos.x, resPos.y,desPos.x,desPos.y,imgStep);
//raphael.path(arrorPath).attr({'stroke-width':1,stroke: "#FF0000"});
//获取组成箭头的三条线段的路径
function getArr(x1, y1, x2, y2, size) {
var angle = Raphael.angle(x1, y1, x2, y2);//得到两点之间的角度
var a45 = Raphael.rad(angle - 45);//角度转换成弧度
var a45m = Raphael.rad(angle + 45);
var x2a = x2 + Math.cos(a45) * size;
var y2a = y2 + Math.sin(a45) * size;
var x2b = x2 + Math.cos(a45m) * size;
var y2b = y2 + Math.sin(a45m) * size;
var result = ["M", x1, y1, "L", x2, y2, "L", x2a, y2a, "M", x2, y2, "L", x2b, y2b,"Z"];
return result;
}
</script>
</head>
<body>
</body>
</html>

364
WebRoot/page/show/showNodeRoom.jsp Normal file
View File

@@ -0,0 +1,364 @@
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/common/taglib.jsp"%>
<%
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>
<title>i18n_snr.message.title_n81i</title>
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet"
type="text/css" />
<script language="javascript" type="text/javascript"
src="<c:url value='/js/jquery-1.4.2.min.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/onmouse.js'/>"></script>
<script language="javascript" type="text/javascript"
src="<c:url value='/js/raphael.js'/>"></script>
<link rel="stylesheet"
href="<c:url value='/js/jquery-easyui-1.1.2/themes/default/easyui.css'/>"
type="text/css"></link>
<script type="text/javascript"
src="<c:url value='/js/jquery-easyui-1.1.2/jquery.easyui.min.js' />"></script>
<style>
body {
background-image: url("${pageContext.request.contextPath}/images/show/bg.jpg");
background-repeat: no-repeat;
background-position: center;
scrollbar-face-color: #EEF0ED; //滚动条凸出部分的颜色
scrollbar-highlight-color: #E7E8EA; //滚动条空白部分的颜色
scrollbar-shadow-color: #EEF0ED; //立体滚动条阴影的颜色
scrollbar-3dlight-color: #EEF0ED; //滚动条亮边的颜色
scrollbar-arrow-color: #E1E3E0; //上下按钮上三角箭头的颜色
scrollbar-track-color: #EEF0ED; //滚动条的背景颜色
scrollbar-darkshadow-color: #CCCCCC; //滚动条强阴影的颜色
scrollbar-base-color: #EEF0ED //滚动条的基本颜色
}
</style>
<script type="text/javascript">
var raphael;
var nodes = new Array();
var roomStartX =100;
var roomStartY = 30;
var roomTitleHeight = 30;
var roomTitleGap = 15;
var allY = 0;
var gap = 10;//同一机房的X,Y间距
var roomGap = 50;//机房Y轴的间距
var roomWidth=100;
var roomHeight=200;
var minboxLeft = 50;
var minboxWidth=140;
var minboxHeight=200;
var boxWidth=206;
var boxHeight=540;
var titleImg = "${pageContext.request.contextPath}/images/topo3d/grayline.jpg";
var boxTopImg = "${pageContext.request.contextPath}/images/topo3d/box_top.png";
var boxFootImg = "${pageContext.request.contextPath}/images/topo3d/box_foot.png";
var boxLeftImg = "${pageContext.request.contextPath}/images/topo3d/box_left.png";
var boxRightImg = "${pageContext.request.contextPath}/images/topo3d/box_right.png";
var boxImg="${pageContext.request.contextPath}/images/topo3d/box.png";
var boxErrorImg="${pageContext.request.contextPath}/images/topo3d/boxError.png";
var rapheals = new Array();
var raphealsInd = 0;
var nodeIndexs = new Array();
var idnum =1;
$(function(){
var height = document.body.clientHeight;
var width = document.body.clientWidth-100;
//计算画布高度
var raphaelHeight = roomGap;
var raphaelWidth = roomGap;
var maxRoomClos = 0;
<c:forEach items="${nodeRoomList}" var="nodeRoom" varStatus="index">
var ind = ${index.index};
var roomRows = ${nodeRoom.roomRows};
var roomBJHeight = (ind+1)*roomTitleHeight+roomTitleGap*2+roomRows*roomHeight+(roomRows-1)*gap;
raphaelHeight+=roomBJHeight+roomGap;
var roomCols = ${nodeRoom.roomCols};
maxRoomClos = maxRoomClos >=roomCols?maxRoomClos:roomCols;
</c:forEach>
raphaelWidth= 2*roomStartX+maxRoomClos*(roomWidth+gap);
if(height > raphaelHeight){
raphaelHeight=height;
}
if(width > raphaelWidth){
raphaelWidth=width;
}
raphael = Raphael("canvas",raphaelWidth,raphaelHeight);
//raphael.rect(0,0,width-100,height).attr({'stroke-width':1,stroke: "#FFFFFF", fill: "#FBFBEA"});
//机柜展示
$("#nodeBox").dialog({
title:"i18n_snr.text.nodeBox_n81i",
resizable:true,
width:220,
height:578
});
//告警信息列表
$("#alarmInfo").dialog({
title:"i18n_snr.text.alarmInfo_n81i",
resizable:true,
width:width-120,
height:height-20
});
$("#alarmInfo").dialog({
onClose:function(){
$("#I3").html("");
$("#I3").removeAttr("src");
}
});
<c:forEach items="${nodeRoomList}" var="nodeRoom" varStatus="index">
var ind = ${index.index};
//画机房
var roomRows = ${nodeRoom.roomRows};
var roomCols = ${nodeRoom.roomCols};
//var roomStartX = (width-(roomRows*roomWidth))/2;
//画整个机房的背景
var roomBJWidth = roomCols*roomWidth+(roomCols-1)*gap+2*roomTitleGap;
var roomBJHeight = roomTitleHeight+roomTitleGap*2+roomRows*roomHeight+(roomRows-1)*gap;
var roomBJY = allY + roomGap;
allY += roomBJHeight + roomGap;
raphael.rect(roomStartX-roomTitleGap,roomBJY,roomBJWidth,roomBJHeight).attr({stroke: "#000000",'stroke-width':1,title:'${nodeGroup.groupName}', fill: "#FFFFFF"});
//画title图片
var titleTtext = "i18n_snr.text.titleTtext.nodeGroup_n81i：${nodegroupTable.groupName} i18n_snr.text.titleTtext.roomId_n81i：${nodeRoom.roomIspn}"
raphael.rect(roomStartX-roomTitleGap,roomBJY,roomBJWidth,roomTitleHeight).attr({stroke: "#CBD1D9",'stroke-width':1,title:titleTtext, fill: "url("+titleImg+")"});
<c:choose>
<c:when test="${session.i18n_lang == 'ru_RU'}">
raphael.text(roomStartX+220,roomBJY+roomTitleGap,titleTtext).attr({'font-size':12,fill:"#000000"});
</c:when>
<c:when test="${session.i18n_lang == 'zh_CN'}">
raphael.text(roomStartX+120,roomBJY+roomTitleGap,titleTtext).attr({'font-size':12,fill:"#000000"});
</c:when>
<c:when test="${session.i18n_lang == 'en_US'}">
raphael.text(roomStartX+150,roomBJY+roomTitleGap,titleTtext).attr({'font-size':12,fill:"#000000"});
</c:when>
</c:choose>
//raphael.text(roomStartX+120,roomBJY+roomTitleGap,titleTtext).attr({'font-size':12,fill:"#000000"});
//该机房的所有机柜信息
var nodeBoxs=$.parseJSON('${nodeRoom.nodeBoxInfo}');
for(var row = 1;row <=roomRows; row++){
for(var col = 1;col <=roomCols; col++){
//机房的位置上是否存在机柜
var position = row+""+col;
var roomColor = "#CCCCCC";
var boxBgImg = boxImg;//机柜背景图片
var boxTitle = "i18n_snr.message.boxTitle1 _n81i";
if(nodeBoxs[position]!=undefined){
roomColor = "#A3C09F";//机柜正常常绿色
if(nodeBoxs[position].alarm){
roomColor = "#E64F42";//机柜异常红色
boxBgImg = boxErrorImg;//机柜背景图片异常
}
if(nodeBoxs[position].hasNode){
roomColor = "#5589D7";//机柜有该节点组下节点
boxTitle = "i18n_snr.message.boxTitle2_n81i";
if(nodeBoxs[position].alarm){
boxTitle = "i18n_snr.message.boxTitle3_n81i";
}
}
}
var title=row+"i18n_snr.message.title.row_n81i"+col+"i18n_snr.message.title.column_n81i";
var roomX = roomStartX+(col-1)*(roomWidth+gap);
//画图的Y开始点+每个机房的TitleY+每行的高
var roomY = roomBJY+(roomTitleHeight+roomTitleGap)+(row-1)*(roomHeight+gap);
raphael.rect(roomX,roomY,roomWidth,roomHeight).attr({stroke: "#000000",'stroke-width':1,title:title, fill: roomColor});
if(nodeBoxs[position]!=undefined){
//raphael.text(roomX+40,roomY+40,nodeBoxs[position].descinfo).attr({'font-size':12,fill:"#000000"});
var param = "&groupId="+'${nodegroupTable.groupId}'+"&nodeBoxId="+nodeBoxs[position].nodeBoxId+",i18n_snr.message.room_n81i:"+'${nodeRoom.roomIspn}'+" "+title+" i18n_snr.text.nodeBox_n81i:"+nodeBoxs[position].ispn;
var node = raphael.image(boxBgImg,roomX-20,roomY,minboxWidth,minboxHeight).attr({title:boxTitle,text:param});
node.id = idnum;
$("body").append("<input type='hidden' id="+idnum+" value=''>");
$("input[id="+idnum+"]").val(param);
idnum++;
node.click(function(){
// var param = this.attr("text");
var nodeid = this.id;
var selector = "#"+nodeid;
var param = $(selector).val();
getNodeBox(param);
});
}
//设置行列信息
raphael.text(roomX+50,roomY+50,title).attr({'font-size':12,fill:"#000000"});
}
}
</c:forEach>
if('${groupId}' != "" &&'${nodeBoxId}'!= "" &&'${nodeBoxIspn}' != ""){
var param = "&groupId="+'${groupId}'+"&nodeBoxId="+'${nodeBoxId}'+","+'${nodeBoxIspn}';
getNodeBox(param);
}
})
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!= "" )){
$("#nodeBoxs").html("");
var t =$("#nodeBox").dialog("options").title;
$("#nodeBox").dialog("setTitle", params[1]);
$("#nodeBox").dialog("open");
var length = $(data).length;
var raphaelBox = 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;
$("#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"});
}
}
}
}
})
}
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'/>";
}
$("#I3").html("");
$("#I3").attr("src",url);
$("#alarmInfo").dialog("open");
}
</script>
</head>
<body>
<div
style="width: 100%; height: 100%; overflow-x: auto; overflow-y: auto;"
id="canvas"></div>
<div id="nodeBox" closed="true">
<div id="nodeBoxs"></div>
</div>
<div id="alarmInfo" closed="true">
<iframe id="I3" name="I3" height="100%" width="100%" border="0"
style="background: #FFFFFF;" frameborder="0" src="" scrolling="auto">
i18n_snr.message.frame_n81i
</iframe>
</div>
</body>
</html>

384
WebRoot/page/show/showTopology.jsp Normal file
View File

@@ -0,0 +1,384 @@
<%@ 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_st.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/jquery.processing.plugin.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">
$("#iconBox").hide();
jQuery(function(){
$(document).progressDialog.showDialog("i18n_st.message.loading_n81i");
});
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_st.message.spanTable_n81i");
}
});
}
</script>
</head>
<body oncontextmenu="event.returnValue=false">
<div id="border_Div">
<div id="board" class="board" >
<!--告警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" align="left">
<ul id="demo-ul">
<li id="nodeSumNum"></li>
<li id="trueNum"></li>
<li id="falseNum" style="color:#FF0000"></li>
</ul>
<!--
<span id="nodeSumNum"></span>
<span id="trueNum"></span>
<span id="falseNum" style="color:#FF0000"></span>
-->
</div>
</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)">
&nbsp;
</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)">
&nbsp;
</td>
</tr>
<tr>
<td style=" background-image:url(<%=path%>/images/show/foot_1.jpg)">
&nbsp;
</td>
<td style=" background-image:url(<%=path%>/images/show/foot_2.jpg)">
&nbsp;
</td>
<td style=" background-image:url(<%=path%>/images/show/foot_3.jpg)">
&nbsp;
</td>
</tr>
</table>
</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>
-->
<div id="span_info2" class="spanInfo">
<table id="span_info" >
<tr><td>IP：</td><td id="spanIp2"></td></tr>
<tr><td>i18n_st.text.spanName2_n81i：</td><td id="spanName2"></td></tr>
<tr><td>i18n_st.text.spanUType2_n81i：</td><td id="spanUType2"></td></tr>
</table>
</div>
</div>
<input type="hidden" id="gid" value=""/>
</div>
<script >
jQuery(function(){
$("#warningInfo").hide();
$("#iconBox").hide();
$("#span_info2").hide();
//节点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=getIconModules");
//绑定右键菜单，将点击右键时的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[ltype='node'][lvalue='1']",menu).hide();
$("li[id='getChildNg'][ltype='nodeGroup']",menu).hide();
if(data.viewType == '1'){//节点组
if(data.childNum >0){
$("li[id='getChildNg'][ltype='nodeGroup']",menu).show();
}else{
$("li[ltype='node'][lvalue='1']",menu).show();
}
}else{
$("ul[id=list1]",menu).hide();
}
}else if($Obj[0].tagName == 'DIV' && $Obj.attr('divType') == 'line'){//线
$("ul[id=list1]",menu).hide();
}else{//桌面
$("ul[id=list1]",menu).hide();
}
return menu;
},
bindings : {
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=show";
url = encodeURI(url);
window.location.href=url;
}
}
});
})
</script>
<div id='menu1'style="display: none;">
<ul id="list1">
<!--<li id='save' ltype='normal'>保存</li>-->
<!--<li id='reset' ltype='normal'>重置</li>-->
<li id='getBox' ltype='node' lvalue='1'>i18n_st.text.getBox_n81i</li>
<li id='getChildNg' ltype='nodeGroup'>i18n_st.text.getChildNg_n81i</li>
<!-- <li id='openTopology' ltype='node' lvalue='1'>查看告警数据</li> -->
</ul>
</div>
</body>
</html>

460
WebRoot/page/show/showTopologySub.jsp Normal file
View File

@@ -0,0 +1,460 @@
<%@ 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)">
&nbsp;
</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)">
&nbsp;
</td>
</tr>
<tr>
<td style=" background-image:url(<%=path%>/images/show/foot_1.jpg)">
&nbsp;
</td>
<td style=" background-image:url(<%=path%>/images/show/foot_2.jpg)">
&nbsp;
</td>
<td style=" background-image:url(<%=path%>/images/show/foot_3.jpg)">
&nbsp;
</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>