动态页面画线

js:

    //1、浏览器版本号函数：
    var br = navigator.userAgent.toLowerCase();
    var browserVer = (br.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0, '0'])[1];
    //var brower = userBrowser();//得到浏览器名称
    //alert("版本号:"+browserVer);
    //alert("浏览器:"+brower );
    //2、js浏览器判断函数
    /*function userBrowser() {
        var browserName = navigator.userAgent.toLowerCase();
        if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
            return "IE"; 
        } else if (/firefox/i.test(browserName)) {
            return "Firefox";
        } else if (/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)) {
            return "Chrome";
        } else if (/opera/i.test(browserName)) {
            return "Opera";
        } else if (/webkit/i.test(browserName) && !(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))) {
            return "Safari";
        } else {
            return "unKnow";
        }
    }*/




/*
 * 页面初始化
 */
$(document).ready(
function() {
init();
// 刷新界面
// setInterval("refreshJubu()", 300000); // 300.000-->300秒-->5分钟
setInterval("refresh()", 5400000); // 5400.000-->5400秒-->90分钟

$("#maskLayer").bgiframe();
$("#detailFWSB").bgiframe();

// “添加“按钮事件
$("#addBtn").click(function(){
showDiv();
});

//隐藏div
$("#closeFWSB").click(function(){
hideAddDiv();
});
//隐藏div
$("#btn_cancelFWSB").click(function(){
hideAddDiv();
});

//新增 保存数据
$("#btn_saveFWSB").click(function(){
var obj=checkData(arr);
if(obj.flag==true){
hideAddDiv();
$.ajax({
  type : "POST",
  url : "/vts/doInsertFWZT.do",
  async: false ,//嵌套时最好加上这个，不然容易出问题
  data : "ip="+obj.ip+"&port="+obj.port+"&lx="+obj.lx+"&fwq="+obj.fwq+"&connIP="+obj.connIp+"&direct="+obj.direct,
  success : function(data) {
  if (data.success == false) {
alert(data.msg);
} else {
//   $.ajax({
// type : "POST",
// url : "/vts/doFWZTByIp.do",
// async: false ,//嵌套时最好加上这个，不然容易出问题
// data:"ip="+data.results[0].ip+"&port="+data.results[0].port+"&lx="+data.results[0].lx+"&fwqmc="+data.results[0].fwqmc
//   +"&connDirect="+data.results[0].direct+"&connIP="+data.results[0].connIP+"&positionX="
//   +data.results[0].positionX+"&positionY="+data.results[0].positionY,
// success : function(msg) {
//  if (msg.success == false) {
//  alert(msg.msg);
//  } else {
var otherObj=new dragBox();
   otherObj.setProperty(data.results[0].imgUrl,data.results[0].imgWidth,data.results[0].imgHeight);
   otherObj.ip=data.results[0].ip;
   otherObj.port=data.results[0].port;
   otherObj.lx=data.results[0].lx;
   otherObj.fwqmc=data.results[0].fwqmc;
   otherObj.positionX=data.results[0].positionX;
   otherObj.positionY=data.results[0].positionY;
   otherObj.status=data.results[0].status;
   otherObj.cpuInfo=data.results[0].cpuInfo;
   otherObj.heapInfo=data.results[0].heapInfo;
   otherObj.sessionCount=data.results[0].sessionCount;
   otherObj.dbTotalStorage=data.results[0].dbTotalStorage;
   otherObj.connIP=data.results[0].connIP;
   otherObj.direct=data.results[0].direct;
   otherObj.imgUrl=data.results[0].imgUrl;
   otherObj.imgWidth=data.results[0].imgWidth;
   otherObj.imgHeight=data.results[0].imgHeight;
list.push(otherObj);  // 添加
arr.push(otherObj);
// }
 
  // 数据更新到界面
bulidJsp(list);
// }
// });
}
  }
}); 
}else{
alert(obj.msg);
obj.msg="";
}
});

//更新数据
$("#btn_updateFWSB").click(function(){
var obj=checkUpdateData(list);
if(obj.flag==true){
hideAddDiv();
$.ajax({
  type : "POST",
  url : "/vts/doUpdateFwsb.do",
  async: false ,//嵌套时最好加上这个，不然容易出问题
  data : "ip="+obj.ip+"&port="+obj.port+"&lx="+obj.lx+"&fwq="+obj.fwq+"&connIP="+obj.connIp
  +"&direct="+obj.direct+"&positionX="+obj.positionX+"&positionY="+obj.positionY,
  success : function(data) {
  if (data.success == false) {
alert(data.msg);
} else {
//   $.ajax({
// type : "POST",
// async: false ,//嵌套时最好加上这个，不然容易出问题
// url : "/vts/doFWZTByIp.do",
// data:"ip="+data.results[0].ip+"&port="+data.results[0].port+"&lx="+data.results[0].lx+"&fwqmc="+data.results[0].fwqmc
//   +"&connDirect="+data.results[0].direct+"&connIP="+data.results[0].connIP+"&positionX="
//   +data.results[0].positionX+"&positionY="+data.results[0].positionY,
// success : function(msg) {
//  if (msg.success == false) {
//  alert(msg.msg);
//  } else {
 for ( var i = 0; i < list.length; i++) {
 if(list[i].ip==data.results[0].ip){
  var otherObj=new dragBox();
  otherObj.setProperty(data.results[0].imgUrl,data.results[0].imgWidth,data.results[0].imgHeight);
  otherObj.ip=data.results[0].ip;
  otherObj.port=data.results[0].port;
  otherObj.lx=data.results[0].lx;
  otherObj.fwqmc=data.results[0].fwqmc;
  otherObj.positionX=data.results[0].positionX;
  otherObj.positionY=data.results[0].positionY;
  otherObj.status=data.results[0].status;
  otherObj.cpuInfo=data.results[0].cpuInfo;
  otherObj.heapInfo=data.results[0].heapInfo;
  otherObj.sessionCount=data.results[0].sessionCount;
  otherObj.dbTotalStorage=data.results[0].dbTotalStorage;
  otherObj.connIP=data.results[0].connIP;
  otherObj.direct=data.results[0].direct;
  otherObj.imgUrl=data.results[0].imgUrl;
  otherObj.imgWidth=data.results[0].imgWidth;
  otherObj.imgHeight=data.results[0].imgHeight;
  list[i]=otherObj; // 替换
 }
 }
//  }
 // 数据更新到界面
 bulidJsp(list);
// }
// }); 
}
  }
}); 
}else{
alert(obj.msg);
obj.msg="";
}
});

//保存页面信息  
$("#btn_save").click(function(){
var param = getParam(list);
$.ajax({
 type : "POST",
 url : "/vts/doSaveAllFwsb.do",
 data : {keys:param},
 dataType:"text",
 success : function(data) {
  if (data.success == false) {
alert("保存失败!");
} else {
alert("保存成功!");
}
 }
});
});

// ”删除“按钮事件
$("#delBtn").click(function(){
if(ipName==""){
alert("请选择要删除的服务器！");
}else{
var isTrue = confirm("您确定要删除"+ipName+"服务器吗？");
if(isTrue==true){
deletePcInfo(ipName);
ipName="";
}
}
});

}
);


// 获取页面服务器的坐标
function getParam(datas){
var text="";  // 格式："aa:11&bb:22&qq:12,cc:33&dd:44&tt:13,ee:55&ww:66&pp:14";
for(var i=0; i<datas.length; i++){
if(i == datas.length-1){
text += "ip:"+datas[i].ip+"&positionX:"+datas[i].positionX+"&positionY:"+datas[i].positionY;
}else{
text += "ip:"+datas[i].ip+"&positionX:"+datas[i].positionX+"&positionY:"+datas[i].positionY+",";
}
}
return text;
}


// 显示点击”添加“按钮后的弹框
function showDiv(){
showAddDiv("#maskLayer","#detailFWSB","#titleFWSB");
//下拉框数据加载
bindSelect("conn_ip");
}


//系统字典下拉框绑定
function bindSelect(id) {
var qid = "#" + id;
$(qid).empty();
var select = document.getElementById(id);
if(arr.length == 0){
var option = document.createElement("option");
option.appendChild(document.createTextNode("127.0.0.1"));
option.value = "127.0.0.1";
select.appendChild(option);
}else{
for ( var i = 0; i < arr.length; i++) {
var option = document.createElement("option");
option.appendChild(document.createTextNode(arr[i].ip));
option.value = arr[i].ip;
select.appendChild(option);
}
}
};


function refresh(){
$.ajax({
     type : "POST",
     url : "/vts/doFWZT.do",
     data : null,
     success : function(datas) {
     list.length = 0;
     buildHtml(datas);
     }
    });
}


// 初始化查询
function init(){
   $.ajax({
     type : "POST",
     url : "/vts/doFWZT.do",
     data : null,
     beforeSend : function() {
     //显示遮罩层提示信息
     forbiddenPage();
     },
     success : function(datas) {
     //隐藏遮罩层提示信息
     releasePage();
     buildHtml(datas);
     }
    });
}
      
//刷新某个服务器的信息
//function refreshJubu(){
// $.ajax({
//   type : "POST",
//   url : "/vts/doFWZTByIp.do",
//   data : "ip="+popData.ip+"&port="+popData.port+"&lx="+popData.lx+"&fwqmc="+popData.fwqmc
//   +"&connIP="+popData.connIP+"&connDirect="+popData.direct+"&positionX="
//   +popData.positionX+"&positionY="+popData.positionY,
//   success : function(data) {
//   $.each(
//   data.results,
//   function(iRow, item) {
//   popInfoBuild(item);
//   }
//   );
//   }
// });
//}
  
// 删除服务器
function deletePcInfo(ipName){
$.ajax({
  type : "POST",
  url : "/vts/doDeleteFWZT.do",
  data : "ip="+ipName,
  success : function(msg) {
  if(msg.success == false) {
alert(msg.msg);
} else {
arr.length=0;
var j=0;
var ip = msg.msg;
for ( var i=0; i < list.length; i++) {
if(list[i].ip != ip){
arr[j]=list[i];
j++;
}
}
list.length=0;
for ( var k = 0; k < arr.length; k++) {
list[k]=arr[k];
}
}
  // 数据更新到界面
  bulidJsp(list);
  }
}); 
}
  
var arr = new Array();
// 数据的构建
function buildHtml(data) {
// 初始化arr数组
   arr.length=0;
   var i=-1;
   $.each(
   data.results,
   function(iRow, item) {
   arr[++i] = item;
   }
   );
  
   // 数据更新到界面
   bulidJsp(arr);
};
  
/*
 * 创建页面，根据数据的更新和移动重新绘制页面
 */
var list=new Array();
function bulidJsp(arrs)
{
// 清屏——把gridData元素下的内容全部清除
var myNode = document.getElementById("gridData");
while(myNode.firstChild){
myNode.removeChild(myNode.firstChild);
}
// 第一次时初始化
if(list.length == 0){
//显示图片
for(var i=0; i<arrs.length; i++){
var otherObj=new dragBox();
   otherObj.setProperty(arrs[i].imgUrl,arrs[i].imgWidth,arrs[i].imgHeight);
   otherObj.setPosition(arrs[i].positionX, arrs[i].positionY);
   otherObj.appendToElement(document.getElementById("gridData"), arrs[i]);
   otherObj.ip=arrs[i].ip;
   otherObj.port=arrs[i].port;
   otherObj.lx=arrs[i].lx;
   otherObj.fwqmc=arrs[i].fwqmc;
   otherObj.positionX=arrs[i].positionX;
   otherObj.positionY=arrs[i].positionY;
   otherObj.status=arrs[i].status;
   otherObj.cpuInfo=arrs[i].cpuInfo;
   otherObj.heapInfo=arrs[i].heapInfo;
   otherObj.sessionCount=arrs[i].sessionCount;
   otherObj.dbTotalStorage=arrs[i].dbTotalStorage;
   otherObj.connIP=arrs[i].connIP;
   otherObj.direct=arrs[i].direct;
   otherObj.imgUrl=arrs[i].imgUrl;
   otherObj.imgWidth=arrs[i].imgWidth;
   otherObj.imgHeight=arrs[i].imgHeight;
   list[i]=otherObj;
   
   showInfoBuild(otherObj);
}
}else{
for(var i=0; i<list.length; i++){
list[i].setPosition(list[i].positionX, list[i].positionY);
list[i].appendToElement(document.getElementById("gridData"), list[i]);
showInfoBuild(list[i]);
}
}

// 显示连线
for(var j=0; j<list.length; j++){
for(var k=0; k<list.length; k++){
var x1=parseInt(list[j].positionX)+parseInt(list[j].imgWidth/2);
var y1=parseInt(list[j].positionY)+parseInt(list[j].imgHeight/2);
var x2=parseInt(list[k].positionX)+parseInt(list[k].imgWidth/2);
var y2=parseInt(list[k].positionY)+parseInt(list[k].imgHeight/2);
if("1"==list[j].direct){
if(list[j].connIP==list[k].ip){
// 双箭头线
if(browserVer <= 6.0){
showDoubleArrowLine(x1, list[j].positionY, x2, list[k].positionY);
}else{
drawDoubleArrowHeadLine(x1, y1, x2, y2);
}
}
}else if("2"==list[j].direct){
if(list[j].connIP==list[k].ip){
// 单箭头线
if(browserVer <= 6.0){
showArrowLine(x1, list[j].positionY, x2, list[k].positionY);
}else{
drawArrowHeadLine(x1, y1, x2, y2);
}
}
}else{
if(list[j].connIP==list[k].ip){
// 单箭头线
if(browserVer <= 6.0){
showArrowLine(x2, list[k].positionY, x1, list[j].positionY);
}else{
drawArrowHeadLine(x2, y2, x1, y1);
}
}
}
}
}

}


// 显示div
function showAddDiv(maskLayerPage, fwsbName, titleName)
{
$(maskLayerPage).show(500);
$(fwsbName).show(500);
var _move = false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(titleName).click(function(){}).mousedown(function(e){
        _move = true;
        _x = e.pageX-parseInt($(fwsbName).css("left"));
        _y = e.pageY-parseInt($(fwsbName).css("top"));
    });
$(document).mousemove(function(e){
        if(_move){
            var x = e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
            var y = e.pageY-_y;
            $(fwsbName).css({top:y,left:x});//控件新位置
        }
    }).mouseup(function(){
     _move = false;
    });
}


// 隐藏div，并初始化参数
function hideAddDiv()
{
$("#update").css("display", "none");
$("#sumbit").css("display", "block");
fwsbReset();
$("#maskLayer").hide();
$("#detailFWSB").hide();
}


// 插入数据的验证
function checkData(arrs){
var ipName = $.trim($("#ipName").val());
var portName = $.trim($("#portName").val());
var fwqName = $.trim($("#fwqName").val());
var lxName = $("#lxName");
var directList = $("#conn_direct");  
var connIpList = $("#conn_ip"); 

var obj = {flag:false,ip:"",port:"",lx:"",fwq:"",msg:"",direct:"",connIp:""};

if(ipName==""){
obj.msg="ip地址不能为空";
return obj;
}else{
for(var i=0; i<arrs.length; i++){
if(arrs[i].ip == ipName){
obj.msg="ip不能相同";
return obj;
}
}
obj.ip=ipName;
}

if(portName==""){
obj.msg="端口不能为空";
return obj;
}else{
obj.port=portName;
}

if(fwqName==""){
obj.msg="服务器名称不能为空";
return obj;
}else{
obj.fwq=fwqName;
}
obj.lx=lxName.val();

obj.direct=directList.val();
obj.connIp=connIpList.val();

obj.flag = true;
return obj;
}


//更新数据的验证
function checkUpdateData(data){
var ipName = $.trim($("#ipName").val());
var portName = $.trim($("#portName").val());
var fwqName = $.trim($("#fwqName").val());
var lxName = $("#lxName");
var directList = $("#conn_direct");  
var connIpList = $("#conn_ip"); 

var obj = {flag:false,ip:"",port:"",lx:"",fwq:"",msg:"",direct:"",connIp:"",positionX:"",positionY:""};

for(var i=0; i<data.length; i++){
if(data[i].ip == ipName){
obj.positionX=data[i].positionX;
obj.positionY=data[i].positionY;
}
}

obj.ip=ipName;

if(portName==""){
obj.msg="端口不能为空";
return obj;
}else{
obj.port=portName;
}

if(fwqName==""){
obj.msg="服务器名称不能为空";
return obj;
}else{
obj.fwq=fwqName;
}
obj.lx=lxName.val();

obj.direct=directList.val();
obj.connIp=connIpList.val();

obj.flag = true;
return obj;
}


//重置
function fwsbReset(){
document.getElementById("ipName").value = "";
document.getElementById("portName").value = "";
document.getElementById("fwqName").value = "";

document.getElementById("ipName").disabled=false;
document.getElementById("lxName").selectedIndex=0;
document.getElementById("lxName").disabled=false;
document.getElementById("conn_direct").selectedIndex=0;
document.getElementById("conn_ip").selectedIndex=0;
};


// 重置
function updateAddDiv(data, id){
for(var i=0; i<data.length; i++){
if(data[i].ip==id){
document.getElementById("ipName").value = data[i].ip;
document.getElementById("ipName").disabled=true;
document.getElementById("portName").value =data[i].port;
document.getElementById("fwqName").value = data[i].fwqmc;
document.getElementById("lxName").value=data[i].lx;
document.getElementById("lxName").disabled=true;
document.getElementById("conn_direct").value=data[i].direct;
document.getElementById("conn_ip").value=data[i].connIP;
}
}
}


/*
 * 下面是画线的方法
 */
var thickness=2;//线条粗度2px
// 画点
function drowPoint(x,y,w,h){//画点，x坐标，y坐标，w宽度，h高度
   this.line=document.createElement("div");
   this.line.style.width=w+"px";
   this.line.style.height=h+"px";
   this.line.style.backgroundColor="red"; // #c0c6c9
   this.line.style.position="absolute";
   this.line.style.left=x+"px";
   this.line.style.top=y+"px"; 
   document.getElementById("gridData").appendChild(this.line);
}
   
// 计算线上的点——画线其实就是一个个的点的连接
function drawLine(x1,y1,x2,y2){//画线，起点(x1,y1)到终点(x2,y2)
   if(x1==x2){//竖线
   if(y2>=y1){
   drowPoint(x1,y1,thickness,y2-y1);
   }else{
   drowPoint(x2,y2,thickness,y1-y2);
   }
   }else if(y1==y2){//横线
   if(x2>=x1){
   drowPoint(x1,y1,x2-x1,thickness);
   }else{
   drowPoint(x2,y2,x1-x2,thickness);
   }
   }else{//斜线
   if(x1>x2){ //两个点坐标换过来，保证x1<x2
   var _x1=x2;
       var _y1=y2;
       x2=x1;
       y2=y1;
       x1=_x1;
       y1=_y1;
   }
   var dx=x2-x1;
   var dy=Math.abs(y2-y1);
   var flag=y2>y1?1:-1;
   var rate=dy/dx;
   var tx=x1;
  
   var ty=y1;
   var th=flag*rate;
   while(dx>0){
   dx--;
   drowPoint(tx,ty,thickness,thickness);
   tx++;
   ty+=th;
   }
   }
}
 
//带单箭头的线
function drawArrowHeadLine(x1,y1,x2,y2){//画带终点箭头线，起点(x1,y1)终点(x2,y2)
drawLine(x1,y1,x2,y2);
var x=x2-x1;
var angel=Math.atan((y1-y2)/(x));//角度
if(x<0){
angel=Math.atan((y1-y2)/(x))+Math.PI;//角度
}

var x3=x2-6/Math.sin(Math.PI/3)*Math.sin(Math.PI/3-angel);
var y3=y2+6/Math.sin(Math.PI/3)*Math.sin(Math.PI/6+angel);
drawLine(x3,y3,x2,y2);
var x4=x2-6/Math.cos(Math.PI/6)*Math.cos(angel-Math.PI/6);
var y4=y2+6/Math.cos(Math.PI/6)*Math.sin(angel-Math.PI/6);
drawLine(x4,y4,x2,y2);
}


//带双箭头的线
function drawDoubleArrowHeadLine(x1,y1,x2,y2){//画带终点箭头线，起点(x1,y1)终点(x2,y2)
drawLine(x1,y1,x2,y2);
var x=x2-x1;
var angel=Math.atan((y1-y2)/(x));//角度
var angel2=Math.atan((y1-y2)/x)+Math.PI;//角度
if(x<0){
angel=Math.atan((y1-y2)/(x))+Math.PI;//角度
angel2=Math.atan((y1-y2)/x);//角度
}
//角度固定
var x3=x2-6/Math.sin(Math.PI/3)*Math.sin(Math.PI/3-angel);
var y3=y2+6/Math.sin(Math.PI/3)*Math.sin(Math.PI/6+angel);
drawLine(x3,y3,x2,y2);
var x4=x2-6/Math.cos(Math.PI/6)*Math.cos(angel-Math.PI/6);
var y4=y2+6/Math.cos(Math.PI/6)*Math.sin(angel-Math.PI/6);
drawLine(x4,y4,x2,y2);

var x5=x1-8/Math.sin(Math.PI/3)*Math.sin(Math.PI/3-angel2);
var y5=y1+8/Math.sin(Math.PI/3)*Math.sin(Math.PI/6+angel2);
drawLine(x5,y5,x1,y1);
var x6=x1-8/Math.cos(Math.PI/6)*Math.cos(angel2-Math.PI/6);
var y6=y1+8/Math.cos(Math.PI/6)*Math.sin(angel2-Math.PI/6);
drawLine(x6,y6,x1,y1);
}




/*
 * 下面是画图及显示文字
 */
// 初始化图片
var uiBox=function()
{
     this.width=0; // 图片的宽
     this.height=0; // 图片的高
     this.backGround=""; // 图片路径
     this.setProperty=function(bgPic,width,height)
     {
       this.backGround=bgPic;
       this.width=width;
       this.height=height;
      };
};


// 创建图片信息的函数
var ipName="";
var popData="";
var initCount=0;
var dragBox=function()
{
     this.Super=uiBox;
     this.Super();
     this.element=document.createElement("div");
     this.isDrag=false;
     this.startX=0;
     this.startY=0;
     this.positionX=0;
     this.positionY=0;
     this.setPosition=function(left,top)
     {
       this.positionX=left;
       this.positionY=top;
     };
      
     var host="";
     var stat="";
     var data="";
     var imgList=new Object();
     this.appendToElement=function(parentObj, objData)
     {
       host=objData.ip;
       stat=objData.status;
       data=objData;
       imgList[0]=this.backGround[0];
          imgList[1]=this.backGround[1];
          
       this.element.style.width=this.width+"px";
       this.element.style.height=this.height+"px";
       this.element.style.backgroundRepeat="no-repeat";
       this.element.style.position="absolute";
       this.element.style.left=this.positionX+"px";
       this.element.style.top=this.positionY+"px";
       this.element.style.backgroundImage="url("+this.backGround[0]+")";
      
       if("1"==objData.status || (initCount==2 && ipName==objData.ip)){
       this.element.style.backgroundImage="url("+this.backGround[1]+")";
       }
       parentObj.appendChild(this.element);
     };
      
       // 按下效果
      this.element.οnmοusedοwn=function()
      {
       ipName=host;
       this.isDrag=true;
       this.startX=event.x;
       this.startY=event.y;
       this.style.backgroundImage="url("+imgList[1]+")";
       this.positionX=parseInt(this.style.left);
       this.positionY=parseInt(this.style.top);
      };
      
       // 松开的效果
      this.element.οnmοuseup=function()
      {
       initCount=0;
       this.isDrag=false;
       this.style.backgroundImage="url("+imgList[0]+")";
       this.positionX=parseInt(this.style.left);
       this.positionY=parseInt(this.style.top);
       if("1"==stat){
       this.style.backgroundImage="url("+imgList[1]+")";
       }
      };
      
      // 双击事件
      this.element.οndblclick=function(){
      $("#update").css("display", "block");
      $("#sumbit").css("display", "none");
      showDiv();
      updateAddDiv(list, host);
      };
      
      // 鼠标移上事件
      this.element.οnmοuseοver=function()
      {
      popInfoBuild(data);
      popData=data;
      };
      
      // 鼠标移开事件
      this.element.οnmοuseοut=function()
      {
      popInfoBuild("");
      };
      
      var tmpBodyAction=document.body.onmousemove;
      document.body.οnmοusemοve=attacheMouseMoveFunction(tmpBodyAction,this);
      var tmpBodyAction=document.body.onmouseup;
      document.body.οnmοuseup=attacheMouseUpFunction(tmpBodyAction,this);


};


// 移动效果
function attacheMouseMoveFunction(oFunction,obj)
{
     return function()
     {
       try
       {
       oFunction();
       }catch(e){
      
       }


       if (obj.element.isDrag==true)
       {
       initCount=2;
       var dx=true;
       var dy=true;
       if (obj.element.positionX+event.x-obj.element.startX<0){
       obj.element.isDrag = false;
       dx=false;
       }
       if (obj.element.positionY+event.y-obj.element.startY<30){
       obj.element.isDrag = false;
       dy=false;
       }
       if (dx)
       {
       obj.element.style.left=(obj.element.positionX+event.x-obj.element.startX)+"px";
       obj.positionX=obj.element.positionX+event.x-obj.element.startX;
       }
       if (dy)
       {
       obj.element.style.top=(obj.element.positionY+event.y-obj.element.startY)+"px";
       obj.positionY=obj.element.positionY+event.y-obj.element.startY;
       }
      
       bulidJsp(list);
       }
      };
}


function attacheMouseUpFunction(oFunction,obj)
{
       return function()
       {
       try
       {
       oFunction();
       }catch(e){
      
       }
       initCount=0;
       obj.element.isDrag=false;
       };
}


// 显示服务器的信息（服务器名，ip）
var showInfoBuild = function(data){
this.div0=document.createElement("div");
this.div0.style.left=parseInt(data.positionX)-20+"px";
this.div0.style.top=parseInt(data.positionY)-45+"px";
this.div0.style.position="absolute";

// 图片的左半圆角
this.div1=document.createElement("div");
this.div1.style.position="absolute";
this.div1.style.left="0px";
this.div1.style.top="0px";
this.div1.style.width="5px";
this.div1.style.height="5px";
this.div1.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div1.style.backgroundPosition="0px 0px";

this.div0.appendChild(this.div1);
// 图片上面的中间边框
this.div2=document.createElement("div");
this.div2.style.position="absolute";
this.div2.style.left="5px";
this.div2.style.top="0px";
this.div2.style.height="5px";
this.div2.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div2.style.backgroundPosition="-5px 0px";
this.div2.style.width="120px";

this.div0.appendChild(this.div2);
//图片的右半圆角
this.div3=document.createElement("div");
this.div3.style.position="absolute";
this.div3.style.top="0px";
this.div3.style.width="5px";
this.div3.style.height="5px";
this.div3.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div3.style.backgroundPosition="-605px 0px";
this.div3.style.left="125px";

this.div0.appendChild(this.div3);
// 左边边框
this.div4=document.createElement("div");
this.div4.style.position="absolute";
this.div4.style.left="0px";
this.div4.style.top="5px";
this.div4.style.width="5px";
this.div4.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div4.style.backgroundPosition="0px -5px";
this.div4.style.height="32px";
// 中间部分
this.div5=document.createElement("div");
this.div5.style.position="absolute";
this.div5.style.left="5px";
this.div5.style.top="5px";
this.div5.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div5.style.backgroundPosition="-5px -5px";
this.div5.style.width="120px";
this.div5.style.height="32px";
// 右边边框
this.div6=document.createElement("div");
this.div6.style.position="absolute";
this.div6.style.top="5px";
this.div6.style.width="5px";
this.div6.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div6.style.backgroundPosition="-605px -5px";
this.div6.style.left="125px";
this.div6.style.height="32px";
// 左下角半圆
this.div7=document.createElement("div");
this.div7.style.position="absolute";
this.div7.style.left="0px";
this.div7.style.width="5px";
this.div7.style.height="5px";
this.div7.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div7.style.backgroundPosition="0px -635px";
this.div7.style.top="37px";
// 下面中间边框
this.div8=document.createElement("div");
this.div8.style.position="absolute";
this.div8.style.left="5px";
this.div8.style.width="120px";
this.div8.style.height="5px";
this.div8.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div8.style.backgroundPosition="-300px -635px";
this.div8.style.top="37px";
// 右下角半圆
this.div9=document.createElement("div");
this.div9.style.position="absolute";
this.div9.style.width="5px";
this.div9.style.height="5px";
this.div9.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div9.style.backgroundPosition="-605px -635px";
this.div9.style.left="125px";
this.div9.style.top="37px";

this.div0.appendChild(this.div4);
this.div0.appendChild(this.div5);
this.div0.appendChild(this.div6);
this.div0.appendChild(this.div7);
this.div0.appendChild(this.div8);
this.div0.appendChild(this.div9);

// 为了显示table
this.div11=document.createElement("div");
this.div11.style.top="5px";
this.div11.style.left="5px";
this.div11.style.overflow="hidden";
this.div11.style.position="relative";

this.tbody=document.createElement("table");
this.tbody.width="120px";
this.tbody.border="0";
this.tbody.cellspacing="2";
this.tbody.cellpadding="0";
this.tbody.style.margin="0px";

this.table = document.createElement("TBODY");

this.tr1=document.createElement("tr");
this.td1_1=document.createElement("td");
this.td1_1.width="50px";
this.td1_1.height="10px";
this.td1_1.style.background="#dfe9f9";
this.td1_1.style.textAlign="right";
this.td1_1.style.fontSize="9px";
this.td1_1.style.color="#00558a";
this.td1_1.style.height="13px";
this.td1_1.style.fontFamily="'微软雅黑,宋体'";
this.td1_1.innerText="服务器名:";
this.td1_2=document.createElement("td");
this.td1_2.width="70px";
this.td1_2.style.background="#f1f5fb";
this.td1_2.style.fontSize="9px";
this.td1_2.style.color="#00558a";
this.td1_2.style.height="13px";
this.td1_2.style.fontFamily="'微软雅黑,宋体'";
this.td1_2.innerText=data.fwqmc;

this.tr1.appendChild(this.td1_1);
this.tr1.appendChild(this.td1_2);
this.table.appendChild(this.tr1);

this.tr2=document.createElement("tr");
this.td2_1=document.createElement("td");
this.td2_1.style.background="#dfe9f9";
this.td2_1.style.textAlign="right";
this.td2_1.style.fontSize="8px";
this.td2_1.style.color="#00558a";
this.td2_1.style.height="13px";
this.td2_1.style.fontFamily="'微软雅黑,宋体'";
this.td2_1.innerText="IP:";
this.td2_2=document.createElement("td");
this.td2_2.style.background="#f1f5fb";
this.td2_2.style.fontSize="8px";
this.td2_2.style.color="#00558a";
this.td2_2.style.height="13px";
this.td2_2.style.fontFamily="'微软雅黑,宋体'";
this.td2_2.innerText=data.ip;

this.tr2.appendChild(this.td2_1);
this.tr2.appendChild(this.td2_2);
this.table.appendChild(this.tr2);

this.tbody.appendChild(this.table);
this.div11.appendChild(this.tbody);
this.div0.appendChild(this.div11);

document.getElementById("gridData").appendChild(this.div0);
};




//弹框服务器信息（cpu，内存，session/db）
var popInfoBuild = function(data){
if(""==data){
// 清屏——把childData元素下的内容全部清除
var myNode = document.getElementById("childData");
while(myNode.firstChild){
myNode.removeChild(myNode.firstChild);
}
}else{

// 正常状态才弹框
if("0"==data.status){
this.div0=document.createElement("div");
this.div0.style.left=parseInt(data.positionX)+50+"px";
this.div0.style.top=parseInt(data.positionY)-10+"px";
this.div0.style.position="absolute";

// 图片的左半圆角
this.div1=document.createElement("div");
this.div1.style.position="absolute";
this.div1.style.left="0px";
this.div1.style.top="0px";
this.div1.style.width="10px";
this.div1.style.height="10px";
this.div1.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div1.style.backgroundPosition="0px 0px";

this.div0.appendChild(this.div1);
// 图片上面的中心部分
this.div2=document.createElement("div");
this.div2.style.position="absolute";
this.div2.style.left="10px";
this.div2.style.top="0px";
this.div2.style.height="10px";
this.div2.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div2.style.backgroundPosition="-10px 0px";
this.div2.style.width="200px";

this.div0.appendChild(this.div2);
//图片的右半圆角
this.div3=document.createElement("div");
this.div3.style.position="absolute";
this.div3.style.top="0px";
this.div3.style.width="10px";
this.div3.style.height="10px";
this.div3.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div3.style.backgroundPosition="-600px 0px";
this.div3.style.left="210px";

this.div0.appendChild(this.div3);

this.div4=document.createElement("div");
this.div4.style.position="absolute";
this.div4.style.left="0px";
this.div4.style.top="10px";
this.div4.style.width="10px";
this.div4.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div4.style.backgroundPosition="0px -10px";
this.div4.style.height="60px";

this.div5=document.createElement("div");
this.div5.style.position="absolute";
this.div5.style.left="10px";
this.div5.style.top="10px";
this.div5.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div5.style.backgroundPosition="-10px -10px";
this.div5.style.width="200px";
this.div5.style.height="60px";

this.div6=document.createElement("div");
this.div6.style.position="absolute";
this.div6.style.top="10px";
this.div6.style.width="10px";
this.div6.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div6.style.backgroundPosition="-600px -10px";
this.div6.style.left="210px";
this.div6.style.height="60px";

this.div7=document.createElement("div");
this.div7.style.position="absolute";
this.div7.style.left="0px";
this.div7.style.width="10px";
this.div7.style.height="10px";
this.div7.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div7.style.backgroundPosition="0px -630px";
this.div7.style.top="70px";

this.div8=document.createElement("div");
this.div8.style.position="absolute";
this.div8.style.left="10px";
this.div8.style.width="200px";
this.div8.style.height="10px";
this.div8.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div8.style.backgroundPosition="-300px -630px";
this.div8.style.top="70px";

this.div9=document.createElement("div");
this.div9.style.position="absolute";
this.div9.style.width="10px";
this.div9.style.height="10px";
this.div9.style.backgroundImage="url('resources/themes/default/images/vts/infowindow.gif')";
this.div9.style.backgroundPosition="-600px -630px";
this.div9.style.left="210px";
this.div9.style.top="70px";

this.div11=document.createElement("div");
this.div11.style.top="11px";
this.div11.style.left="10px";
this.div11.style.overflow="hidden";
this.div11.style.position="absolute";

this.tbody=document.createElement("table");
this.tbody.width="200px";
this.tbody.border="0";
this.tbody.cellspacing="2";
this.tbody.cellpadding="0";
this.tbody.style.margin="0px";

this.table = document.createElement("TBODY");

// 下面是根据故障和正常来调整图片的大小
if("1"==data.lx){
this.div4.style.height="90px";
this.div5.style.height="90px";
this.div6.style.height="90px";
this.div7.style.top="100px";
this.div8.style.top="100px";
this.div9.style.top="100px";

this.tr4=document.createElement("tr");
this.td4_1=document.createElement("td");
this.td4_1.width="80px";
this.td4_1.height="20px";
this.td4_1.style.background="#dfe9f9";
this.td4_1.style.textAlign="right";
this.td4_1.style.fontSize="10px";
this.td4_1.style.color="#00558a";
this.td4_1.style.height="26px";
this.td4_1.style.fontFamily="'微软雅黑,宋体'";
this.td4_1.innerText="Session数:";
this.td4_2=document.createElement("td");
this.td4_2.width="120px";
this.td4_2.style.background="#f1f5fb";
this.td4_2.style.fontSize="10px";
this.td4_2.style.color="#00558a";
this.td4_2.style.height="26px";
this.td4_2.style.fontFamily="'微软雅黑,宋体'";
this.td4_2.innerText=data.sessionCount;

this.tr4.appendChild(this.td4_1);
this.tr4.appendChild(this.td4_2);
this.table.appendChild(this.tr4);
}else if("2"==data.lx){
this.div4.style.height="90px";
this.div5.style.height="90px";
this.div6.style.height="90px";
this.div7.style.top="100px";
this.div8.style.top="100px";
this.div9.style.top="100px";

this.tr4=document.createElement("tr");
this.td4_1=document.createElement("td");
this.td4_1.width="80px";
this.td4_1.height="20px";
this.td4_1.style.background="#dfe9f9";
this.td4_1.style.textAlign="right";
this.td4_1.style.fontSize="10px";
this.td4_1.style.color="#00558a";
this.td4_1.style.height="26px";
this.td4_1.style.fontFamily="'微软雅黑,宋体'";
this.td4_1.innerText="剩余空间(M):";
this.td4_2=document.createElement("td");
this.td4_2.width="120px";
this.td4_2.style.background="#f1f5fb";
this.td4_2.style.fontSize="10px";
this.td4_2.style.color="#00558a";
this.td4_2.style.height="26px";
this.td4_2.style.fontFamily="'微软雅黑,宋体'";
this.td4_2.innerText=data.dbTotalStorage;

this.tr4.appendChild(this.td4_1);
this.tr4.appendChild(this.td4_2);
this.table.appendChild(this.tr4);
}

this.tr5=document.createElement("tr");
this.td5_1=document.createElement("td");
this.td5_1.style.background="#dfe9f9";
this.td5_1.style.textAlign="right";
this.td5_1.style.fontSize="10px";
this.td5_1.style.color="#00558a";
this.td5_1.style.height="26px";
this.td5_1.style.fontFamily="'微软雅黑,宋体'";
this.td5_1.innerText="Cpu使用(%):";
this.td5_2=document.createElement("td");
this.td5_2.style.background="#f1f5fb";
this.td5_2.style.fontSize="10px";
this.td5_2.style.color="#00558a";
this.td5_2.style.height="26px";
this.td5_2.style.fontFamily="'微软雅黑,宋体'";
this.td5_2.innerText=data.cpuInfo;

this.tr5.appendChild(this.td5_1);
this.tr5.appendChild(this.td5_2);
this.table.appendChild(this.tr5);

this.tr6=document.createElement("tr");
this.td6_1=document.createElement("td");
this.td6_1.style.background="#dfe9f9";
this.td6_1.style.textAlign="right";
this.td6_1.style.fontSize="10px";
this.td6_1.style.color="#00558a";
this.td6_1.style.height="26px";
this.td6_1.style.fontFamily="'微软雅黑,宋体'";
this.td6_1.innerText="内存使用(%):";
this.td6_2=document.createElement("td");
this.td6_2.style.background="#f1f5fb";
this.td6_2.style.fontSize="10px";
this.td6_2.style.color="#00558a";
this.td6_2.style.height="26px";
this.td6_2.style.fontFamily="'微软雅黑,宋体'";
this.td6_2.innerText=data.heapInfo;

this.tr6.appendChild(this.td6_1);
this.tr6.appendChild(this.td6_2);
this.table.appendChild(this.tr6);


this.div0.appendChild(this.div4);
this.div0.appendChild(this.div5);
this.div0.appendChild(this.div6);
this.div0.appendChild(this.div7);
this.div0.appendChild(this.div8);
this.div0.appendChild(this.div9);

this.tbody.appendChild(this.table);
this.div11.appendChild(this.tbody);
this.div0.appendChild(this.div11);

document.getElementById("childData").appendChild(this.div0);
}
}
};






//双箭头线
function showDoubleArrowLine(x1,y1,x2,y2){
this.v=document.createElement("v:line");
this.t=document.createElement("v:Stroke");
this.v.to=x2+","+y2;
this.v.from=x1+","+y1;
this.v.strokecolor="red";
this.v.strokeweight="2px";
this.t.EndArrow="Classic";
this.t.StartArrow="Classic";
this.v.appendChild(this.t);
document.getElementById("gridData").appendChild(this.v);
}


// 单箭头线
function showArrowLine(x1,y1,x2,y2){
var v=document.createElement("v:line");
var t=document.createElement("v:Stroke");
v.from=x1+","+y1;
v.to=x2+","+y2;
v.strokecolor="red";
v.strokeweight="2px";
t.EndArrow="Classic";
v.appendChild(t);
document.getElementById("gridData").appendChild(v);
}
      

jsp: