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

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>