728 lines
37 KiB
Plaintext
728 lines
37 KiB
Plaintext
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
||
<%@ taglib prefix="c" uri="/jstl/c"%>
|
||
<%@ taglib prefix="fn" uri="/jstl/fn"%>
|
||
<%@ taglib prefix="fmt" uri="/jstl/fmt"%>
|
||
<%
|
||
String path = request.getContextPath();
|
||
String basePath = request.getScheme() + "://" + request.getServerName() + ":"
|
||
+ request.getServerPort() + path + "/";
|
||
%>
|
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||
<html>
|
||
<head>
|
||
<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> |