demo 2 chart 报表
function killerrors()
{ return true; }
window.onerror = killerrors; //检查浏览器类型
function checkBrowser()
{
function loginfo()
{
this.alert = function (string)
{
if (false)
{
alert(string);
}
}
}
var log = new loginfo();
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer")
{
var b_version = navigator.appVersion
var version = b_version.split(";");
var trim_Version = version[1].replace(/[ ]/g, ""); if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0")
{
log.alert("IE 6.0");
return "ie6";
}
else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0")
{
log.alert("IE 7.0");
return "ie7";
}
else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0")
{
log.alert("IE 8.0");
return "ie8";
}
else
{
log.alert("other IE");
return "ie0";
}
}
else
{
log.alert("other browser");
return "notIE";
}
} //给元素绑定一个 onclick 事件 跳转到指定的 URL ，
function bindGotoUrl(objcetId, Url, bindPrem, functionObj)
{
//允计在跳转前再做一些事 如果做完事后
if (0 != functionObj)
{
var intNum = functionObj(bindPrem);
if (0 != intNum)
{
return;
}
}
document.getElementById(objcetId).onclick = function ()
{
window.location.href = Url;
};
}
//创建元素
function CreateDocument(prent, ID, ElementType, title)
{
var createDomObj = document.createElement(ElementType);
if (0 != title)
{
createDomObj.title = title;
}
var prentOBJ = document.getElementById(prent);
prentOBJ.appendChild(createDomObj);
createDomObj.id = ID;
return ID + "";
} function addOption(ID, OptionKey, OptionValue)
{
var obj=document.getElementById(ID);
obj.options.add(new Option(OptionValue,OptionKey)); //这个兼容IE与firefox
}
function getSelectValue(ID)
{
var myselect=document.getElementById(ID); var index=myselect.selectedIndex; //序号，取当前选中选项的序号 var val = myselect.options[index].value; return val;
}
//创建表格
function createTable()
{
var div = document.getElementById("dd");
var table = document.createElement("table"); //创建table
var row = table.insertRow(); //创建一行
var cell = row.insertCell(); //创建一个单元
cell.width = "150"; //更改cell的各种属性
cell.style.backgroundColor = "#999999";
cell.innerHTML = "你好吗？";
cell = row.insertCell(); //创建一个单元
cell.width = "150"; //更改cell的各种属性
cell.style.backgroundColor = "#999999";
cell.innerHTML = "非常好！";
div.appendChild(table);
} //创建表格 里面放一个div
function createTable(prentID, tableID, inId)
{
var ta = document.createElement("table");
var tb = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
var div = document.createElement("div");
div.id = inId;
ta.id = tableID;
td.appendChild(div);
tr.appendChild(td);
td.id = tableID + "_td";
tb.appendChild(tr);
ta.appendChild(tb);
document.getElementById(prentID).appendChild(ta);
} function FormatValue(inPam)
{
var tmp;
inPam += "";
if (inPam.length > 4)
{
tmp = (Math.round(inPam / 1000) / 10) + "W";
if (inPam.length > 8)
{
tmp = (Math.round(inPam / 1000) / 100000) + "Y";
}
}
else
{
tmp = inPam * 1;
}
return tmp;
} function CheckedByName(flag, chkOptName, fun)
{
if (flag == true || flag == 1)
{
flag = true;
}
else
{
flag = false;
}
var r = document.getElementsByName(chkOptName);
for (var i = 0; i < r.length; i++)
{
r[i].checked = flag;
if (0 != fun)
{
fun(r[i]);
}
}
}
/*************************************************************
myJsonToString() 自定义json对象转 字符串方法
splitString 参数为字符串分隔符
取可为"\\\'"或 "\\\""
取单引时生成转义串
取双引时生成真正的字符串
转义例子： fun(String){ alert(String); }方法的调用有两种方式
1）转义调用 取 "\\\'" myJsonToString 生成转义成string前的类型 就像'sss'
var prm='sss';
str ='fun('+prm+')'; //最外面的''表示转义
eval("(" + str + ")");
2）直接调用 取 "\\\”" myJsonToString 生成string类型 就像"sss"
var prm="sss";
fun(prm);
**************************************************************/
function myJsonToString(o,splitString)
{
//var splitString="\\\'";
var toString= function(o,splitString)
{
return splitString+o+splitString;
}
var r = [];
if (typeof o == "string" || o == null)
{
if(typeof o == "string" )
{
return toString(o,splitString);
}
return o;
}
if (typeof o == "object")
{
if (!o.sort)
{
r[0] = "{"
for (var i in o)
{
r[r.length] =toString(i,splitString);
r[r.length] = ":";
r[r.length] = myJsonToString(o[i],splitString);
r[r.length] = ",";
}
r[r.length - 1] = "}"
}
else
{
r[0] = "["
for (var i = 0; i < o.length; i++)
{
r[r.length] = myJsonToString(o[i],splitString);
r[r.length] = ",";
}
r[r.length - 1] = "]"
}
return r.join("");
}
return o.toString();
} function getColor()
{
var Color="";
Color+=Math.floor(9*Math.random());
Color+=Math.floor(9*Math.random());
Color+=Math.floor(9*Math.random());
Color+=Math.floor(9*Math.random());
Color+=Math.floor(9*Math.random());
Color+=Math.floor(9*Math.random());
return Color;
}
String.prototype.rtrim=function(){
return this.replace(/(\s*$)/g,"");
} //---------------------------------------------------
// 日期格式化
// 格式 YYYY/yyyy/YY/yy 表示年份
// MM/M 月份
// W/w 星期
// dd/DD/d/D 日期
// hh/HH/h/H 时间
// mm/m 分钟
// ss/SS/s/S 秒
//function testDateFormat()
//{
// var datebean=new Date();
// alert(datebean.Format("yyyy-MM")+"@"+datebean.Format("yyyy-MM-dd")+"@"+datebean.Format("yyyy-MM-dd hh"));
//}
//---------------------------------------------------
Date.prototype.Format = function(formatStr)
{ var str = formatStr;
var Week = ['日','一','二','三','四','五','六'];
str=str.replace(/yyyy|YYYY/,this.getFullYear());
str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100)); str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():'0' + this.getMonth());
str=str.replace(/M/g,this.getMonth()); str=str.replace(/w|W/g,Week[this.getDay()]); str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());
str=str.replace(/d|D/g,this.getDate()); str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());
str=str.replace(/h|H/g,this.getHours());
str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());
str=str.replace(/m/g,this.getMinutes()); str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());
str=str.replace(/s|S/g,this.getSeconds()); return str;
} var hList = 0;
var ResultJson = 0;
var Chart_heard = 0;
var chartX = 1000, chartY = 300;
/****************************pageCommon_opt begin******************************************************************************************/
//重新调整布局div大小
function changeHeightPT(chart_X, chart_y, id,lineFlag)
{
//页面可视区域值
var c_x = document.body.clientWidth *1;
var c_y = document.body.clientHeight *1;
//页面布局div对象
var left = document.getElementById("leftdiv");
var rivht = document.getElementById("rightdiv");
//左边隐藏标志
var LeftHiddenFlag=document.getElementById("hiddenLeftFlag").value;
//左右高设为可见区域高
left.style.height=c_y-50;
rivht.style.height=c_y-50;
//根据标志判定是否隐藏左边并设置高度
if(1==LeftHiddenFlag||"1"==LeftHiddenFlag)
{
left.style.width=c_x*0.13;
rivht.style.width=(c_x-(c_x*0.13))-50;
}
else
{
left.style.width=1;
rivht.style.width=(c_x-1)-50;
}
var obj=document.getElementById("wrapper");
obj.style.marginTop=30;
if(lineFlag==1)
{
var line=document.getElementById("line");
line.style.height = chart_y;
line.style.width = chart_X;
var line_marginLeft=(rivht.offsetWidth*1-line.offsetWidth*1)/2;
var line_marginTop=(c_y-(document.getElementById("rightTop").clientHeight*1-50)/2)-chart_y;
line.style.marginLeft=line_marginLeft;
}
if ("notIE" == checkBrowser())
{
var obj=document.getElementById("container");
obj.style.height=500;
}
}
/****************************pageCommon_opt end******************************************************************************************/ /****************************ajax_opt begin******************************************************************************************/
//报表页面请求
function ajaxChart(options_getValue, options_getName,ChartID,flag)
{
$.ajax(
{
type : "POST",
url : "Chart.htm",
data : "method=getHeadElement&ChartID="+ChartID,
success : function (msgChart)
{
if ("" != msgChart)
{
if(flag==1)
{
hList = eval("(" + msgChart.split("@^$")[0] + ")");
Chart_heard = eval("(" + msgChart.split("@^$")[1] + ")");
initChartHead(hList, Chart_heard[0], options_getValue, options_getName);
}else if(flag==2)
{
hList = eval("(" + msgChart.split("@^$")[0] + ")");
Chart_heard = eval("(" + msgChart.split("@^$")[1] + ")");
initLeft();
initPostponeChartHead();
}
else if(flag==3)
{
hList = eval("(" + msgChart.split("@^$")[0] + ")");
Chart_heard = eval("(" + msgChart.split("@^$")[1] + ")");
initLeft();
initCpu();
}
}
}
}
);
} function initLeft()
{
/*******左边的菜单按钮 begin ******/
var prentId="dtreeDiv";
/* //报表类型查询类型
var name="ComponentId";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "myselect" + name, "select", 0);
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "myselect" + name).addClass("select");
$("#" + "div" + name).addClass("mydiv");
$("#" + "div" + name).addClass("myselect02");
$("#" + "img" + name).addClass("myimg");
$("#" + "mydiv" + name).addClass("lable01");
addOption("myselect" + name, 1, "JfreeChar");
addOption("myselect" + name, 2, "Fusion");
addOption("myselect" + name, 3, "OpenFalsh");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u22.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="展示组件:"; */ /*
var name="008";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "btntreeimg" + name, "img", 0);
CreateDocument("div" + name, "btntree" + name, "div", 0);
$("#" + "div" + name).addClass("mydiv03");
$("#" + "btntreeimg" + name).addClass("btntreeimg");
$("#" + "btntree" + name).addClass("btntree");
var img = document.getElementById("btntreeimg" + name);
img.src="mon/chart/images/u117.png";
img.onclick=function()
{
};
var obj = document.getElementById("btntree" + name);
obj.innerHTML="报表";
obj.onclick=function()
{
}; */ var name="009";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "btntreeimg" + name, "img", 0);
CreateDocument("div" + name, "btntree" + name, "div", 0);
$("#" + "div" + name).addClass("mydiv03");
$("#" + "btntreeimg" + name).addClass("btntreeimg2");
$("#" + "btntree" + name).addClass("btntree2");
var img = document.getElementById("btntreeimg" + name);
img.src="mon/chart/images/u117.png";
img.onclick=function()
{
initPostponeChartHead();
};
var obj = document.getElementById("btntree" + name);
obj.innerHTML="通道延时报表";
obj.onclick=function()
{
initPostponeChartHead();
}; var name="010";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "btntreeimg" + name, "img", 0);
CreateDocument("div" + name, "btntree" + name, "div", 0);
$("#" + "div" + name).addClass("mydiv03");
$("#" + "btntreeimg" + name).addClass("btntreeimg2");
$("#" + "btntree" + name).addClass("btntree2");
var img = document.getElementById("btntreeimg" + name);
img.src="mon/chart/images/u117.png";
img.onclick=function()
{
initCpu();
};
var obj = document.getElementById("btntree" + name);
obj.innerHTML="主机性能报表";
obj.onclick=function()
{
initCpu();
};
/*******左边的菜单按钮 end ******/
}
/****************************ajax_opt end******************************************************************************************/
function load()
{
var flag=1;
if(flag==1)
{
ajaxChart(null, null,1,2);
changeHeightPT(chartX, chartY, "line",0);
FusionCharts.printManager.enabled(true);
}
else if(flag==2)
{
ajaxChart(options_getValue, options_getName,1,1);
ajaxGetTreeNodes();//加载
changeHeightPT(chartX, chartY, "line1",1);
FusionCharts.printManager.enabled(true);
}
}
function p_JDialog()
{
JDialog.Close();
}
/**验证时间格式是否正确*/
function chackDataFM(dataString, flag, nullFlag)
{
if ( !nullFlag)
{
var str = "";
var ck= new CheckDataType(flag);
var flag=0;
var Moon = /^[0-9]{4}[-]{1}[0]{1}[1-9]{1}$|^[0-9]{4}[-]{1}[1]{1}[0-2]{1}$/; // 小时格式 "yyyy-MM-dd hh";
var Day=/(([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29)/;
var Hour=/^[0]{1}[1-9]{1}$|^[1-5]{1}[0-9]{1}$|^[6]{1}[0]{1}$/; if (ck.isMoon())
{
str = "yyyy-MM";
}
else if (ck.isDay())
{
str = "yyyy-MM-dd";
}
else if (ck.isHour())
{
str = "yyyy-MM-dd hh";
} if (ck.isMoon()&&Moon.test(dataString))
{
str = "yyyy-MM";
flag=1;
}
else if (ck.isDay()&&Day.test(dataString))
{
str = "yyyy-MM-dd";
flag=1;
}
else if (ck.isHour()&&Day.test(dataString.substring(0,10))&&Hour.test(dataString.substring(11,13)))
{
str = "yyyy-MM-dd hh";
flag=1;
}
if (1==flag)
{
return true;
}
else
{
alert("您输入的日期格式有误，正确的格式应为:" + str+",多个以,号隔开。");
return false;
}
}
return false;
} /**默认补全时间*/
function getDateDef(oldDate, flag, nullFlag)
{
var newFullDate="2013-08-01 01:01:01:001";
var newDate="2013-08-01";
if ( !nullFlag)
{
/***************第一步 检查补全之前的格式 并补全为 yyyy-MM-DD hh:mm:ss:000*****************/
var re = /^[0-9]{4}[-]{1}[0-9]{2}$/; // 月格式 "yyyy-MM";
if (re.test(oldDate))
{
newFullDate=oldDate+"-01 01:01:01:001";
}
re = /^[0-9]{4}[-]{1}[0-9]{2}[-]{1}[0-9]{2}$/; // 日期格式 "yyyy-MM-dd";
if (re.test(oldDate))
{
newFullDate=oldDate+" 01:01:01:001";
}
re = /^[0-9]{4}[-]{1}[0-9]{2}[-]{1}[0-9]{2}[ ]{1}[0-9]{2}$/; // 小时格式 "yyyy-MM-dd hh";
if (re.test(oldDate))
{
newFullDate=oldDate+":01:01:001";
}
/***************第二步 根据当前要取的格式标志 截取日期字符串*****************/
var ck= new CheckDataType(flag);
if (ck.isMoon())
{
newDate= newFullDate.substring(0,7);
}
else if (ck.isDay())
{
newDate= newFullDate.substring(0,10);
}
else if (ck.isHour())
{
newDate= newFullDate.substring(0,13);
}
return newDate;
}
} //根据chartID 检查对应的时间类型
function CheckDataType(chartID)
{
this.chartID=chartID;
this.isMoon= function ()
{
if(9 == this.chartID || 12 == this.chartID)
{
return true;
}
return false; }
this.isDay= function ()
{
if (10 == this.chartID || 13 == this.chartID)
{
return true;
}
return false;
}
this.isHour= function ()
{
if (11 == this.chartID || 14 == this.chartID)
{
return true;
}
return false;
}
}
function getComponentId()
{
return 1; //$("#"+"myselectComponentId").children('option:selected').val();
}
function getLabeForDate(flag, chartID)
{
var ck= new CheckDataType(flag);
//多条件标识模板
var label = "?";
if (ck.isMoon())
{
label = "?月份";
}
else if (ck.isDay())
{
label = "?日";
}
else if (ck.isHour())
{
label = "?时";
}
return label;
} //是否有重复值
function isReData(Array)
{
var tmp=-10000;
for(var j=0;j<Array.length;j++)
{
if(tmp==Array[j].rtrim())
{
return true;
}
tmp=Array[j].rtrim();
}
return false;
}
body{font-size:0px; }
#leftdiv { width:13%; float:left; border:0px solid #008888; overflow:auto; FONT-SIZE: 12px; }
#rightdiv { width:85%; float:right; border:0px solid #008888; overflow:auto; text-align:center; }
#rightTop {height:120px; width:100%; FONT-SIZE: 13px; border:1px solid #0099FF; }
#header2 { height:58px; float:left; width:100%; }
#header{float:right; width:100%; }
#header_btn{ width:1100px; height:70px }
#container { text-align:center; height:300px; width:100%; border:1px solid #0099ff; border-top:1px solid #0099ff;}
#line1 { margin-top:50px; }
.restore_P_chart_P {width:2px; height:180px; float:left; }
.restore_P_chart { width:100%; background:#000000;}
.restore_P_TOP_chart { float:left; width:100%; height:80%;background:#FFFFFF; }
.restore_P_BTN_chart{ float:left; width:2px; border-top-color:#FFFFFF; border-top:100px; height:20%; background:#000000; }
.restore_P_chart_P_left_txt{float:left; width:; height:100%; background:#000000; }
.restore_P_chart_P_btn_txt{ float:right; width:100%; border-top-color:#FFFFFF; border-top:100px; height:20px; background:#000000; }
.nntxt{float:left; background:#FFFFFF;font-size: 9px; }
.lefttxt {float:left; padding-top:1%; font-size: 9px; background:#FFFFFF; font-size: 9px; width:30px; margin-top:2px ;height:10px; }
.P_text_3 {height:6px; background:#FF3333; }
.chart_head_element{float:left; width:270px; height:25px; font-size: 9px; text-align:left; }
.chart_head_element_select{float:left; width:150px; height:20px; font-size: 9px;}
.chart_head_element_button{float:left; width:50px; height:20px; font-size: 9px;}
.chart_head_element_nulldiv{float:left; width:50px; height:20px; font-size: 9px;}
.chart_head_element_input{float:left; width:150px; height:20px; font-size: 9px;}
.chart_head_element_text2{float:left; width:100px; height:20px; font-size: 12px; text-align:right;}
.div_chk_00 {float:left; width:120px; height:9px; font-size: 12px; }
.div_chk_00_text{float:left; width:50px; height:9px; font-size: 12px; }
.checkStyle {float:left; width:17px; height:9px; font-size: 12px; }
.cursorE{
cursor:hand;
cursor:pointer
}
.select{ float:left;position:absolute; top:8px; left:80px; width:92px; height:20px; cursor:hand; }
.lable01 { position:absolute; top:8px;left:5px; float:left; width:80px; height:20px; }
.mydiv{ position:relative; float:left; width:180px; height:20px; }
.myimg { width:180px; height:35px; }
.mydiv03{ margin-top:15px; margin-left:10px; position:relative; float:left; width:150px; height:30px; left:0px; }
.mydiv03 :hover{ cursor: pointer;}
.mydiv04{ margin-top:15px; position:relative; float:left; width:150px; height:30px; left:100px; }
.btntreeimg { cursor:pointer; position:absolute; top:1px;left:1px; float:left; width:110px; height:30px; }
.btntree { cursor:pointer; font-weight:bold; text-align:center; color: white; position:absolute; top:8px;left:1px; float:left; width:110px; height:30px; color: white;}
.btntreeimg2 { cursor:pointer; position:absolute; top:1px;left:1px; float:left; width:140px; height:30px; }
.btntree2 { cursor:pointer; font-weight:bold; margin-left:13px; text-align:center; color: white; position:absolute; top:8px;left:1px; float:left; width:110px; height:30px; color: white;}
.myselect02 { margin-top:15px; margin-left:10px; }
.mybutton01 { float:left; margin-top:30px; margin-left:2px; width:52px; height:34px; background:url("./images/u117.png") no-repeat; }
.mybutton02 { float:right; margin-top:30px; margin-right:30px; width:112px; height:34px; }
.lable { float:left; width:30px; height:20px; margin-top:30px; margin-left:30px;}
.nulldiv {position:relative; float:left; width:190px; height:20px; }
.input02{ float:left;position:absolute; top:8px;left:190px; width:130px; height:20px; }
.lable02 { position:absolute; top:8px;left:5px; float:left; width:180px; height:20px; }
.mydiv02{ position:relative; float:left; width:355px; height:20px; }
.mybutton-02{ position:absolute; top:0px;left:355px; width:50px; height:35px; }
.mybutton-02:hover{opacity:0.5;background:url("./images/u57_1.png") no-repeat;cursor: pointer;}
.myimg02 { position:absolute; top:0px;left:0px; width:350px; height:35px; }
.mybtnimg02 { cursor:pointer; position:absolute; top:0px;left:355px; width:35px; height:30px; }
.lable2{ background:url("./images/u22.png") no-repeat; }
.myselect02111 { margin-top:15px; margin-left:10px; background-image: url("./images/u22.png"); background-position: 50% 50%; background-repeat:no-repeat;}
.mybutton01111 { float:left; margin-top:30px; margin-left:2px; width:52px; height:34px; background:url("./images/u117.png") no-repeat; }
.mybutton02111 { float:right; margin-top:30px; margin-right:30px; width:112px; height:34px; background-image: url('./images/u117.png'); }
.mydiv_title2_long{ position:relative; float:left; width:220px; height:20px; }
.myimg_title2_long { width:220px; margin:0px 0px 0px 0px; height:50px; }
.lable01_title2_long { width:220px; color: white; margin:10px 5px 5px 5px; font-weight:bold; text-align:center; FONT-SIZE: 15px; position:absolute; top:8px;left:0px; float:left; height:20px; }
.widthHundred { float:left; width:100%; }
<%@ page language="java" import="java.util.*,com.mengw.smonitor.pojo.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
HttpSession hs = request.getSession();
Operator op = (Operator) hs.getAttribute("loginUser");
pageContext.setAttribute("loginUser",op); String spowerPt = op.getLoginid() + "powerPt";
int powerPt = (Integer)hs.getAttribute(spowerPt);
pageContext.setAttribute("powerPt",powerPt); %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><base href="<%=basePath%>"></base>
<script type="text/javascript" src="js/dtree/dtree.js"></script>
<script type="text/javascript" src="mon/chart/ui.util.js"></script>
<script type="text/javascript" src="mon/chart/jquery-1.6.js"></script>
</head>
<body>
<script> var PtInfo=0;
var pageBean=0;
function RowInfo()
{
beginRow =1;
endRow =1;
}
function Page()
{
this.pageSize=5;
//总页数
this.count=function()
{
return Math.ceil(getPtInfol()/this.pageSize-1);
}
//当前页
this.per=1;
//分页合法检查
this.checkPer=function()
{
//小于一页算一页
if( 1>this.per)
{
this.per=1;
}//大于最大算最大
else if( this.per>this.count())
{
this.per= this.count();
}
}
this.first=function()
{
this.per=1;
this.reset();
}
this.previous=function()
{
this.per-=1;
this.checkPer();
this.reset();
}
this.next=function()
{
this.per+=1;
this.checkPer();
this.reset();
}
this.last=function()
{
this.per= this.count();
this.reset();
}
this.gotoPage=function()
{
this.per=document.getElementById("gotoPageInput").value*1;
this.checkPer();
this.reset();
}
this.CountRowInfo=function()
{
rowBean=new RowInfo()
rowBean.beginRow=(this.per-1)*this.pageSize+1;
rowBean.endRow=(this.per-1)*this.pageSize+1+this.pageSize;
return rowBean;
} this.reset=function()
{
document.getElementById("tablediv").innerHTML="";
createTable2("tablediv","sssss",PtInfo);
setPageCol(this);
}
}
pageBean=new Page();
//创建表格 里面放一个div
function createTable2(prentID, tableID,PtInfoList)
{ if(0!=PtInfoList){
//变量定义
var ta = document.createElement("table");
ta.id = tableID;
var tb = document.createElement("tbody");
var td = null;
var tr = null;
//表格头
tr = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = " <div style=\"width:100%;text-align:center;\"> 操作</div>";
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = "主机ID";
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = "主机代号";
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = "主机名称";
tr.appendChild(td);
tb.appendChild(tr); //表格内容
///for (var i = 0; i < PtInfoList.length; i++)
var Page=pageBean.CountRowInfo();
for (var i = Page.beginRow-1; i < Page.endRow-1&&i<PtInfoList.length; i++)
{
tr = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = " <div style=\"width:100%;text-align:center ;\" > <IMG style=\"width:35px; cursor: pointer; height:23px; \" src=\"mon/chart/images/u138.png\" id=\""+PtInfoList[i].hostCode.rtrim()+"|"+PtInfoList[i].hostName.rtrim()+"|"+PtInfoList[i].hostId.rtrim()+"\" onclick=\"addToLocalhost(this)\" > </div> ";
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = PtInfoList[i].hostId.rtrim();
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = PtInfoList[i].hostCode.rtrim();
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = PtInfoList[i].hostName.rtrim();
tr.appendChild(td);
tb.appendChild(tr); }
ta.appendChild(tb);
document.getElementById(prentID).appendChild(ta);
setPageCol(pageBean);
}
} //创建表格 里面放一个div
function cab()
{
// createTable2("tablediv","sssss");
ajaxFindPtInfo();
} //得到总记录数
function getPtInfol()
{
if(0!=PtInfo)
{
return PtInfo.length;
}
return 0;
} function setPageCol(bean)
{
var obj = document.getElementById("div_per");
obj.innerHTML = bean.per;
var obj = document.getElementById("div_count");
obj.innerHTML = bean.count() ;
} //显示JfreeChart单折线或双折线
function ajaxFindPtInfo()
{
var url = "method=findHostInfo";
$.ajax(
{
type : "POST",
url : "Chart.htm",
data : url,
async : false,
success : function (PtInfoMSG)
{
//取平台名
PtInfo = eval("(" + PtInfoMSG + ")");
createTable2("tablediv","sssss",PtInfo);
}
}
);
return false;
} function JDialog()
{
window.parent.p_JDialog();
}
function clean()
{
var obj = document.getElementById("ptcode");
obj.value="";
}
function add(val)
{
var obj = document.getElementById("ptcode");
window.parent.setChValue(obj.value);
JDialog();
}
String.prototype.rtrim=function(){
return this.replace(/(\s*$)/g,"");
}
function addToLocalhost(bean)
{
var obj = document.getElementById("ptcode");
if(obj.value+""!="")
{
obj.value=obj.value.rtrim()+","+bean.id.split("|")[2];
}
else
{
obj.value=obj.value.rtrim()+bean.id.split("|")[2];
}
//bean.disabled=true;
}
function search()
{
var hostId=document.getElementById("hostId").value;
var HostCode=document.getElementById("HostCode").value;
var HostName=document.getElementById("HostName").value;
var url = "method=searchHostInfo&hostId="+hostId+"&HostCode="+HostCode+"&HostName="+HostName;
/* if (!re.test(hostId))
{
var re = /^[0-9]{1,}$/;
alert("主机id格式输入有误，正确的格式应10位以内整数。");
return ;
}*/
$.ajax(
{
type : "POST",
url : "Chart.htm",
data : url,
async : false,
success : function (hostMsg2)
{
//取平台名
PtInfo = eval("(" + hostMsg2 + ")");
document.getElementById("tablediv").innerHTML="";
pageBean.per=1;
createTable2("tablediv","sssss",PtInfo);
pageBean.reset();
}
}
);
return false;
} function clean()
{
document.getElementById("hostId").value="";
document.getElementById("HostCode").value="";
document.getElementById("HostName").value="";
}
</script> <style>
#left {border:block;border:0px solid #008888;width:68%; height:300px;float:left; }
#center{border:block;border:0px solid #008888;width:3%; height:300px; float:left; text-align:center ; margin-left:2%;}
#right {border:block;border:0px solid #008888;width:23%; height:300px; float:right; text-align:center ; }
#sssss { border:2px solid #008888; width:100%; }
table{border:2px solid #008888; border-collapse:collapse; }
td{border:2px solid #008888; }
.pageDiv { cursor: pointer;width:42px ; height:20px; margin-left:8px; float:left; position:relative; }
.pageImg { cursor: pointer; width:42px; height:20px; position:absolute; left:1px; top:0px;}
.pageText {cursor: pointer;width:42px; height:20px; position:absolute; left:1px; top:5px; color: white; font-size: 9px;}
</style>
<div style=" text-align:center ; height:280px; width:100%;" >
<div id="right">
<textarea type="text" id="ptcode" value="" style="width:100%; height:320px;"></textarea>
</div>
<div id="left" >
<div style="height:70;width:100%;">
<div style="width:80%;float:left;">
<div style=" text-align:left ;">
主 机 ID :<input id="hostId" type="text" style="width:70px;"></input>
主机代号 :<input id="HostCode" type="text" style="width:70px"></input>
</div>
<div style=" text-align:left ;">
主机名称 :<input id="HostName" type="text" style="width:70px"></input>
</div>
</div>
<div style="width:20%;float:right;">
<div style="width:70px;height:35px; margin-left:8px; float:left; position:relative; clear:right;" >
<img style="cursor: pointer; width:70px; position:absolute; left:1px; top:1px;" onclick="clean()" src="mon/chart/images/u117.png">
<div style="cursor: pointer; width:70px; position:absolute; left:1px; color: white; margin-left:1px;margin-top:3px; " onclick="clean()" >清空</div>
</div>
<div style="width:70px;height:35px; margin-left:8px; float:left; position:relative; clear:left;" >
<img style="cursor: pointer; width:70px; position:absolute; left:1px; top:1px;" onclick="search()" src="mon/chart/images/u117.png">
<div style="cursor: pointer; width:70px; position:absolute; left:1px; color: white; margin-left:1px; margin-top:3px;" onclick="search()" >查询</div>
</div>
</div> </div>
<div id="tablediv" style="width:100%;clear:left;">
</div> <div id="tabledivPage" style="width:100%; margin-top:5px;">
<!-------当前页/总页数----->
<div style="float:left;width:70;">
<div style="width:10; float:left;">
<font style="width:10; float:left;" id="div_per"></font>
</div>
<div style="width:10; float:left;">
/
</div>
<div style="width:10; float:left;">
<font id="div_count" style="width:10; float:left;" id="div_per"></font>
</div>
</div>
<div style="float:right;">
<div class="pageDiv" >
<img class="pageImg" onclick="pageBean.first()" src="mon/chart/images/u474.png"/>
<div class="pageText" onclick="pageBean.first()" >第一页</div>
</div>
<div class="pageDiv" >
<img class="pageImg" onclick="pageBean.previous()"src="mon/chart/images/u474.png" />
<div class="pageText" onclick="pageBean.previous()">上一页</div>
</div>
<div class="pageDiv" >
<img class="pageImg" onclick="pageBean.next()" src="mon/chart/images/u474.png"/>
<div class="pageText" onclick="pageBean.next()" >下一页</div>
</div>
<div class="pageDiv" >
<img class="pageImg" onclick="pageBean.last()" src="mon/chart/images/u474.png"/>
<div class="pageText" onclick="pageBean.last()">最后一页</div>
</div>
<div class="pageDiv" >
<img class="pageImg" src="mon/chart/images/u474.png"/>
<input class="pageText" style=" top:0px; color: black;"type="text" id="gotoPageInput"name="gotoPageInput" size="3px" value="1" ></input>
</div>
<div class="pageDiv" >
<img class="pageImg" onclick="pageBean.gotoPage()" src="mon/chart/images/u474.png"/>
<div class="pageText" onclick="pageBean.gotoPage()" >跳转</div>
</div>
</div>
</div>
<script>cab(); </script>
</div>
<div id="center">
<!--- <BUTTON style="width:20px; height:50px; margin-top:120;">+</BUTTON> -->
</div>
</div> <div id="btn" style="text-align:left; width:100%;">
<div style=" margin-left:180px;">
<div style="width:150px; height:30px; folat:left; position:relative; " >
<img style="cursor: pointer; width:150px; height:30px; position:absolute; left:1px; top:1px;" onclick="add()" src="mon/chart/images/u78.png"/>
<div style="cursor: pointer; width:150px; height:30px; position:absolute; left:45px; top:8px; font-size: 15px; font-weight:bold; color: white; " onclick="add()" >确定添加</div>
</div>
</div>
</div>
</body>
</html>
<%@ page language="java" import="java.util.*,com.mengw.smonitor.pojo.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
HttpSession hs = request.getSession();
Operator op = (Operator) hs.getAttribute("loginUser");
pageContext.setAttribute("loginUser",op); String spowerPt = op.getLoginid() + "powerPt";
int powerPt = (Integer)hs.getAttribute(spowerPt);
pageContext.setAttribute("powerPt",powerPt); %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><base href="<%=basePath%>"></base>
<script type="text/javascript" src="js/dtree/dtree.js"></script>
<script type="text/javascript" src="mon/chart/ui.util.js"></script>
<script type="text/javascript" src="mon/chart/jquery-1.6.js"></script>
</head>
<body>
<script> var PtInfo=0;
var pageBean=0;
function RowInfo()
{
beginRow =1;
endRow =1;
} function Page()
{
this.pageSize=5;
//总页数
this.count=function()
{ return Math.ceil(getPtInfol()/this.pageSize-1);
}
//当前页
this.per=1;
//分页合法检查
this.checkPer=function()
{
//小于一页算一页
if( 1>this.per)
{
this.per=1;
}//大于最大算最大
else if( this.per>this.count())
{
this.per= this.count();
}
}
this.first=function()
{
this.per=1;
this.reset();
}
this.previous=function()
{
this.per-=1;
this.checkPer();
this.reset();
}
this.next=function()
{
this.per+=1;
this.checkPer();
this.reset();
}
this.last=function()
{
this.per= this.count();
this.reset();
}
this.gotoPage=function()
{
this.per=document.getElementById("gotoPageInput").value*1;
this.checkPer();
this.reset();
}
this.CountRowInfo=function()
{
rowBean=new RowInfo()
rowBean.beginRow=(this.per-1)*this.pageSize+1;
rowBean.endRow=(this.per-1)*this.pageSize+1+this.pageSize;
return rowBean;
} this.reset=function()
{
document.getElementById("tablediv").innerHTML="";
createTable2("tablediv","sssss",PtInfo);
setPageCol(this);
}
}
pageBean=new Page();
//创建表格 里面放一个div
function createTable2(prentID, tableID,PtInfoList)
{ if(0!=PtInfoList){
//变量定义
var ta = document.createElement("table");
ta.id = tableID;
var tb = document.createElement("tbody");
var td = null;
var tr = null;
//表格头
tr = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = " <div style=\"width:100%;text-align:center;\"> 操作 </div>"; tr.appendChild(td); td = document.createElement("td");
td.innerHTML = "平台号";
tr.appendChild(td);
tb.appendChild(tr); td = document.createElement("td");
td.innerHTML = "帐户号";
tr.appendChild(td); for (var i = pageBean.CountRowInfo().beginRow-1; (i < pageBean.CountRowInfo().endRow-1)&&i<PtInfoList.length; i++)
{
tr = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = " <div style=\"width:100%;text-align:center ;\" > <IMG style=\"width:35px; cursor: pointer; height:23px; \" src=\"mon/chart/images/u138.png\" id=\""+PtInfoList[i].ptCode.rtrim()+"|"+PtInfoList[i].userid.rtrim()+"\" onclick=\"addToLocalhost(this)\" > </div> ";
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = PtInfoList[i].ptCode;
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = PtInfoList[i].userid;
tr.appendChild(td);
tb.appendChild(tr);
}
ta.appendChild(tb);
document.getElementById(prentID).appendChild(ta);
setPageCol(pageBean);
}
} //创建表格 里面放一个div
function cab()
{
// createTable2("tablediv","sssss");
ajaxFindPtInfo();
} //得到总记录数
function getPtInfol()
{
if(0!=PtInfo)
{
return PtInfo.length;
}
return 0;
} function setPageCol(bean)
{
var obj = document.getElementById("div_per");
obj.innerHTML = bean.per;
var obj = document.getElementById("div_count");
obj.innerHTML = bean.count();
}
function cleanuAllInput()
{
document.getElementById("PtName").value="";
document.getElementById("UserId").value="";
document.getElementById("staffname").value="";
document.getElementById("ptcode2").value="";
document.getElementById("corpaccount").value="";
}
function ajaxSearchPtInfo()
{ var PtName=document.getElementById("PtName").value;
var UserId=document.getElementById("UserId").value;
var staffname=document.getElementById("staffname").value;
var ptcode=document.getElementById("ptcode2").value;
var corpaccount=document.getElementById("corpaccount").value;
var url = "method=searchPtInfo&PtName=" + PtName + "&UserId=" + UserId + "&staffname=" + staffname + "&ptcode=" + ptcode + "&corpaccount=" + corpaccount; $.ajax(
{
type : "POST",
url : "Chart.htm",
data : url,
async : false,
success : function (searchPtInfoMSG)
{
PtInfo = eval("(" + searchPtInfoMSG + ")");
document.getElementById("tablediv").innerHTML="";
pageBean.per=1;
createTable2("tablediv","sssss",PtInfo);
pageBean.reset();
}
}
);
return false;
} function ajaxFindPtInfo()
{
var url = "method=findPtInfo";
$.ajax(
{
type : "POST",
url : "Chart.htm",
data : url,
async : false,
success : function (PtInfoMSG)
{
//取平台名
PtInfo = eval("(" + PtInfoMSG + ")");
createTable2("tablediv","sssss",PtInfo);
}
}
);
return false;
} function JDialog()
{
window.parent.p_JDialog();
}
function clean()
{
var obj = document.getElementById("ptcode");
obj.value="";
}
function add(val)
{
var obj = document.getElementById("ptcode");
window.parent.setChValue(obj.value);
JDialog();
}
String.prototype.rtrim=function(){
return this.replace(/(\s*$)/g,"");
}
function addToLocalhost(bean)
{
var obj = document.getElementById("ptcode");
if(obj.value+""!="")
{
obj.value=obj.value.rtrim()+","+bean.id;
}
else
{
obj.value=obj.value.rtrim()+bean.id;
}
//bean.disabled=true;
}
</script> <style>
#left {border:block;border:0px solid #008888;width:68%; height:300px;float:left; }
#center{border:block;border:0px solid #008888;width:3%; height:300px; float:left; text-align:center ; margin-left:2%;}
#right {border:block;border:0px solid #008888;width:23%; height:300px; float:right; text-align:center ; }
#sssss { border:2px solid #008888; width:100%; }
table{border:2px solid #008888; border-collapse:collapse; }
td{border:2px solid #008888; }
.pageDiv { cursor: pointer; width:42px ; height:20px; margin-left:8px; float:left; position:relative; }
.pageImg { cursor: pointer; width:42px; height:20px; position:absolute; left:1px; top:0px;}
.pageText {cursor: pointer; width:42px; height:20px; position:absolute; left:1px; top:5px; color: white; font-size: 9px;}
</style>
<div style=" text-align:center ;height:280px; width:100%;" >
<div id="right">
<textarea type="text" id="ptcode" value="" style="width:100%; height:320px;"></textarea>
</div>
<div id="left">
<div> <div style="height:70;width:80%;float:left;">
<div style=" text-align:left ;">
平台名称 :<input id="PtName" type="text" style="width:70px;"></input>
帐户名称 :<input id="staffname"type="text" style="width:70px"></input>
</div>
<div style=" text-align:left ;">
平 台 号 :<input id="ptcode2" type="text" style="width:70px;"></input>
帐 户 号 :<input id="UserId"type="text" style="width:70px"></input>
</div>
<div style=" text-align:left ;">
公司帐号 :<input id="corpaccount" type="text" style="width:70px"></input>
</div>
</div>
<div style="width:20%;float:right;">
<div style="width:70px;height:35px; margin-left:8px; float:left; position:relative; clear:right;" >
<img style="width:70px; cursor: pointer; position:absolute; left:1px; top:1px;" onclick="cleanuAllInput()" src="mon/chart/images/u117.png">
<div style="width:70px; cursor: pointer; position:absolute; left:1px; color: white; margin-left:1px; margin-top:3px; " onclick="cleanuAllInput()" >清空</div>
</div>
<div style="width:70px;height:35px; margin-left:8px; float:left; position:relative; clear:left;" >
<img style="width:70px; cursor: pointer; position:absolute; left:1px; top:1px;" onclick="ajaxSearchPtInfo()" src="mon/chart/images/u117.png">
<div style="width:70px; cursor: pointer; position:absolute; left:1px; color: white; margin-left:1px; margin-top:3px;" onclick="ajaxSearchPtInfo()" >查询</div>
</div>
</div> <div style=" text-align:left ;">
<div id="treeDiv"></div>
</div>
<div id="tablediv" style="width:100%; margin-top:8px; clear:left;">
</div> <div id="tabledivPage" style="width:100%; margin-top:5px;">
<!-------当前页/总页数----->
<div style="float:left;width:70;">
<div style="width:10; float:left;">
<font style="width:10; float:left;" id="div_per"></font>
</div>
<div style="width:10; float:left;">
/
</div>
<div style="width:10; float:left;">
<font id="div_count" style="width:10; float:left;" id="div_per"></font>
</div>
</div>
<div style="float:right;">
<div class="pageDiv" >
<img class="pageImg" onclick="pageBean.first()" src="mon/chart/images/u474.png"/>
<div class="pageText" onclick="pageBean.first()" >第一页</div>
</div>
<div class="pageDiv" >
<img class="pageImg" onclick="pageBean.previous()"src="mon/chart/images/u474.png" />
<div class="pageText" onclick="pageBean.previous()">上一页</div>
</div>
<div class="pageDiv" >
<img class="pageImg" onclick="pageBean.next()" src="mon/chart/images/u474.png"/>
<div class="pageText" onclick="pageBean.next()" >下一页</div>
</div>
<div class="pageDiv" >
<img class="pageImg" onclick="pageBean.last()" src="mon/chart/images/u474.png"/>
<div class="pageText" onclick="pageBean.last()">最后一页</div>
</div>
<div class="pageDiv" >
<img class="pageImg" src="mon/chart/images/u474.png"/>
<input class="pageText" style=" top:0px; color: black;"type="text" id="gotoPageInput"name="gotoPageInput" size="3px" value="1" ></input>
</div>
<div class="pageDiv" >
<img class="pageImg" onclick="pageBean.gotoPage()" src="mon/chart/images/u474.png"/>
<div class="pageText" onclick="pageBean.gotoPage()" >跳转</div>
</div>
</div>
</div>
<script>cab();
</script>
</div> </div>
<div id="center">
<!--- <BUTTON style="width:20px; height:50px; margin-top:120;">+</BUTTON> -->
</div>
</div>
<div id="btn" style="text-align:left; width:100%;">
<div style=" margin-left:180px;">
<div style="width:150px; height:30px; folat:left; position:relative; " >
<img style="cursor: pointer; width:150px; height:30px; position:absolute; left:1px; top:1px;" onclick="add()" src="mon/chart/images/u78.png"/>
<div style="cursor: pointer; width:150px; height:30px; position:absolute; left:45px; top:8px; font-size: 15px; font-weight:bold; color: white; " onclick="add()" >确定添加</div>
</div>
</div>
</div>
</body>
</html>
<%@ page language="java" import="java.util.*,com.mengw.smonitor.pojo.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
HttpSession hs = request.getSession();
Operator op = (Operator) hs.getAttribute("loginUser");
pageContext.setAttribute("loginUser",op); String spowerPt = op.getLoginid() + "powerPt";
int powerPt = (Integer)hs.getAttribute(spowerPt);
pageContext.setAttribute("powerPt",powerPt); %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>M-BOSS平台监控系统</title>
<script type="text/javascript" src="mon/chart/jquery-1.6.js"></script>
<link href="mon/chart/UI.css" rel="stylesheet" media="screen" type="text/css" />
<script type="text/javascript" src="mon/chart/ui.util.js"></script>
<script type="text/javascript" src="mon/chart/UI.js"></script>
<script type="text/javascript" src="mon/chart/ComponentForGetChart.js"></script>
<script type="text/javascript" src="mon/chart/UI_AutoHead.js"></script>
<script type="text/javascript" src="mon/chart/PostponeChart.js"></script>
<script type="text/javascript" src="mon/chart/CpuChart.js"></script>
<script type="text/javascript" defer="defer" src="<%=request.getContextPath()%>/My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/tab.css" />
<script type="text/javascript" src="js/dtree/dtree.js"></script>
<link rel="stylesheet" type="text/css"href="chart/fusionCharts/prettify.css" style=""/>
<script type="text/javascript" src="chart/fusionCharts/FusionCharts.js"></script>
<!-- 弹层css与js -->
<link href="jdialog/css/jdialog.css" type="text/css" rel="Stylesheet" />
<script language="javascript" src="jdialog/jdialog.js" type="text/javascript"></script>
<script type="text/javascript" src="mon/chart/jfreeCharImpl/overlib.js"></script>
<style type="text/css">
</style> </head>
<!---body onresize="changeHeightPT(500, 300, 'line');" style="background: url(img/ui2/bg.png) repeat ;"---->
<body onresize="changeHeightPT(500, 300, 'line');" style="">
<div id="leftdiv">
<!---dtree现己搬到此处--->
<div id="dtreeDiv" style="font-size:15px;float:left;" >
</div>
<script>
</script>
</div> <div id="hiddenLeftDiv" style=" display:none;" style=" width:6px; font-size:9px;float:left;" >
<input type="hidden" id="hiddenLeftFlag" value="1" />
<input id="hiddenLeftBtn" type="button" value="<" onClick="hiddenLeft()"></input>
</div>
<div id="rightdiv" style=" overflow:visible; ">
<div style=" width:100%; float:left;" >
<div id="rightTop">
</div>
<div id="header2" style=" width:100%; float:left;" >
</div>
</div>
<div id="container" style=" overflow:visible; "> <div id="wrapper">
<!---fusionCharts---->
<div id="line"></div>
<div id="lineForOpenFlash"> </div>
<div id="lineForJfreeChar">
<div id="pngName"></div>
<input type="hidden" id="pathUrl" value="<%=basePath%>" />
<img id="charImg" src="" border="0" ismap="ismap" usemap="#chartMap" />
</div>
</div>
</div> </div>
</body>
<script type="text/javascript" >
load();
</script>
</html>
<%@ page language="java" import="java.util.*,com.mengw.smonitor.pojo.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
HttpSession hs = request.getSession();
Operator op = (Operator) hs.getAttribute("loginUser");
pageContext.setAttribute("loginUser",op); String spowerPt = op.getLoginid() + "powerPt";
int powerPt = (Integer)hs.getAttribute(spowerPt);
pageContext.setAttribute("powerPt",powerPt);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><base href="<%=basePath%>"></base>
<script type="text/javascript" src="js/dtree/dtree.js"></script>
<script type="text/javascript" src="mon/chart/ui.util.js"></script>
<script type="text/javascript" src="mon/chart/UI.js"></script>
<script type="text/javascript" defer="defer" src="<%=request.getContextPath()%>/My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/tab.css" /> <link href="mon/chart/UI.css" rel="stylesheet" media="screen" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/tab.css" />
<link rel="stylesheet" type="text/css"href="chart/fusionCharts/prettify.css" style=""/>
<!-- 弹层css与js -->
<link href="jdialog/css/jdialog.css" type="text/css" rel="Stylesheet" />
<style type="text/css">
#floor1 { width:100%; height:25px; float:left; border:0px solid #008888; font-size: 12px; text-align:left }
#floor3 { width:100%; height:120px; float:left; border:0px solid #008888; font-size: 12px; text-align:center }
#floor4 { width:100%; height:25px; float:left; border:0px solid #008888; font-size: 12px; text-align:center }
</style>
</head>
<body> <script> //重新调整布局div大小
function changeHeightPT()
{ } //创建时间控件
function createDataDiv(initFlag)
{
if (initFlag)
{
var flag = window.parent.getChartID();
var ck= new CheckDataType(flag);
var label = "月份";
var dataFM = "yyyy-MM";
if (ck.isMoon())
{
var label = "月份";
var dataFM = "yyyy-MM";
}
else if (ck.isDay())
{
var label = "日期";
var dataFM = "yyyy-MM-dd";
}
else if (ck.isHour())
{
var label = "小时";
var dataFM = "yyyy-MM-dd HH";
}
else
{
var dataFM = "yyyy-MM-dd HH:mm:ss";
}
var dataInputName="dataInputName";
var datadIVinnerHTML = "<div class=\"floor3_left_e\">" +
label + "<input name=\""+dataInputName+"\" type=\"text\" size=\"12\" onclick=\"WdatePicker({dateFmt:'" + dataFM + "'})\"></input>" +
" "+
label + "<input name=\""+dataInputName+"\" type=\"text\" size=\"12\" onclick=\"WdatePicker({dateFmt:'" + dataFM + "'})\"></input>" +
"</div>";
var prentId = "floor3_in";
var name;
var obj;
for (var i = 0; i < 5; i++)
{
//报表类型查询类型
name = "00" + i;
//时间控件
CreateDocument(prentId, "data" + name, "div", 0);
obj = document.getElementById("data" + name);
obj.innerHTML = datadIVinnerHTML;
}
}
else
{
name = "00" + DataDivCount;
CreateDocument(prentId, "data" + name, "div", 0);
obj = document.getElementById("data" + name);
obj.innerHTML = datadIVinnerHTML;
}
}
//创建表格 里面放一个div
function cab()
{
createDataDiv(true);
changeHeightPT();
}
function JDialog()
{
window.parent.p_JDialog();
} function reCreateDataDivElement()
{
document.getElementById("floor3_in").innerHTML="";
createDataDiv(true);
changeHeightPT();
} function add()
{
//得objs
var objs = document.getElementsByName("dataInputName");
var str = "";
var str2 = "";
var v = 0;
var isFist = true;
for (var i = 0; i < 10; i++)
{
v = objs[i].value;
if ("" != v + "")
{
if (!isFist)
{
str += "@^$";
str2 += ",";
}
else
{
isFist = false
}
str += v;
str2 += v;
}
}
window.parent.setDataValue(str2);
window.parent.dataInputValue = str2;
JDialog();
} </script> <div id="floor1">
<!-- <SELECT id=myselect002 class="chart_head_element_select myselect02"><OPTION selected value=1>多年报表比较</OPTION><OPTION value=2>多月报表比较</OPTION><OPTION value=3>多小时报表比较</OPTION></SELECT>-->
添加时间条件，以逗号隔开
</div>
<div id="floor3" >
<div id="floor3_in">
</div>
</div>
<div id="floor4" style=" text-align:left ;">
<div style=" text-align:left; width:220px; margin-left:88px; margin-top:28px;">
<div style="width:100px; height:20px; float:left; position:relative; " >
<img style="cursor: pointer;width:100px; height:20px; position:absolute; left:0px; top:0px;" onclick="reCreateDataDivElement()" src="mon/chart/images/u78.png"/>
<div style="cursor: pointer; width:100px; height:20px; position:absolute; left:15px; top:3px; font-size: 15px; font-weight:bold; color: white;" onclick="reCreateDataDivElement()" >清空所有</div>
</div>
<div style="width:100px; height:20px; float:right; position:relative; " >
<img style="cursor: pointer; width:100px; height:20px; position:absolute; left:0px; top:0px;" onclick="add()" src="mon/chart/images/u78.png"/>
<div style="cursor: pointer; width:100px; height:20px; position:absolute; left:15px;top:3px; font-size: 15px; font-weight:bold; color: white; " onclick="add()" >确认添加</div>
</div>
</div>
</div>
<script>
cab();
</script>
</body>
</html>
body{font-size:0px; }
#leftdiv { width:13%; float:left; border:0px solid #008888; overflow:auto; FONT-SIZE: 12px; }
#rightdiv { width:85%; float:right; border:0px solid #008888; overflow:auto; text-align:center; }
#rightTop {height:120px; width:100%; FONT-SIZE: 13px; border:1px solid #0099FF; }
#header2 { height:58px; float:left; width:100%; }
#header{float:right; width:100%; }
#header_btn{ width:1100px; height:70px }
#container { text-align:center; height:300px; width:100%; border:1px solid #0099ff; border-top:1px solid #0099ff;}
#line1 { margin-top:50px; }
.restore_P_chart_P {width:2px; height:180px; float:left; }
.restore_P_chart { width:100%; background:#000000;}
.restore_P_TOP_chart { float:left; width:100%; height:80%;background:#FFFFFF; }
.restore_P_BTN_chart{ float:left; width:2px; border-top-color:#FFFFFF; border-top:100px; height:20%; background:#000000; }
.restore_P_chart_P_left_txt{float:left; width:; height:100%; background:#000000; }
.restore_P_chart_P_btn_txt{ float:right; width:100%; border-top-color:#FFFFFF; border-top:100px; height:20px; background:#000000; }
.nntxt{float:left; background:#FFFFFF;font-size: 9px; }
.lefttxt {float:left; padding-top:1%; font-size: 9px; background:#FFFFFF; font-size: 9px; width:30px; margin-top:2px ;height:10px; }
.P_text_3 {height:6px; background:#FF3333; }
.chart_head_element{float:left; width:270px; height:25px; font-size: 9px; text-align:left; }
.chart_head_element_select{float:left; width:150px; height:20px; font-size: 9px;}
.chart_head_element_button{float:left; width:50px; height:20px; font-size: 9px;}
.chart_head_element_nulldiv{float:left; width:50px; height:20px; font-size: 9px;}
.chart_head_element_input{float:left; width:150px; height:20px; font-size: 9px;}
.chart_head_element_text2{float:left; width:100px; height:20px; font-size: 12px; text-align:right;}
.div_chk_00 {float:left; width:120px; height:9px; font-size: 12px; }
.div_chk_00_text{float:left; width:50px; height:9px; font-size: 12px; }
.checkStyle {float:left; width:17px; height:9px; font-size: 12px; }
.cursorE{
cursor:hand;
cursor:pointer
}
.select{ float:left;position:absolute; top:8px; left:80px; width:92px; height:20px; cursor:hand; }
.lable01 { position:absolute; top:8px;left:5px; float:left; width:80px; height:20px; }
.mydiv{ position:relative; float:left; width:180px; height:20px; }
.myimg { width:180px; height:35px; }
.mydiv03{ margin-top:15px; margin-left:10px; position:relative; float:left; width:150px; height:30px; left:0px; }
.mydiv03 :hover{ cursor: pointer;}
.mydiv04{ margin-top:15px; position:relative; float:left; width:150px; height:30px; left:100px; }
.btntreeimg { cursor:pointer; position:absolute; top:1px;left:1px; float:left; width:110px; height:30px; }
.btntree { cursor:pointer; font-weight:bold; text-align:center; color: white; position:absolute; top:8px;left:1px; float:left; width:110px; height:30px; color: white;}
.btntreeimg2 { cursor:pointer; position:absolute; top:1px;left:1px; float:left; width:140px; height:30px; }
.btntree2 { cursor:pointer; font-weight:bold; margin-left:13px; text-align:center; color: white; position:absolute; top:8px;left:1px; float:left; width:110px; height:30px; color: white;}
.myselect02 { margin-top:15px; margin-left:10px; }
.mybutton01 { float:left; margin-top:30px; margin-left:2px; width:52px; height:34px; background:url("./images/u117.png") no-repeat; }
.mybutton02 { float:right; margin-top:30px; margin-right:30px; width:112px; height:34px; }
.lable { float:left; width:30px; height:20px; margin-top:30px; margin-left:30px;}
.nulldiv {position:relative; float:left; width:190px; height:20px; }
.input02{ float:left;position:absolute; top:8px;left:190px; width:130px; height:20px; }
.lable02 { position:absolute; top:8px;left:5px; float:left; width:180px; height:20px; }
.mydiv02{ position:relative; float:left; width:355px; height:20px; }
.mybutton-02{ position:absolute; top:0px;left:355px; width:50px; height:35px; }
.mybutton-02:hover{opacity:0.5;background:url("./images/u57_1.png") no-repeat;cursor: pointer;}
.myimg02 { position:absolute; top:0px;left:0px; width:350px; height:35px; }
.mybtnimg02 { cursor:pointer; position:absolute; top:0px;left:355px; width:35px; height:30px; }
.lable2{ background:url("./images/u22.png") no-repeat; }
.myselect02111 { margin-top:15px; margin-left:10px; background-image: url("./images/u22.png"); background-position: 50% 50%; background-repeat:no-repeat;}
.mybutton01111 { float:left; margin-top:30px; margin-left:2px; width:52px; height:34px; background:url("./images/u117.png") no-repeat; }
.mybutton02111 { float:right; margin-top:30px; margin-right:30px; width:112px; height:34px; background-image: url('./images/u117.png'); }
.mydiv_title2_long{ position:relative; float:left; width:220px; height:20px; }
.myimg_title2_long { width:220px; margin:0px 0px 0px 0px; height:50px; }
.lable01_title2_long { width:220px; color: white; margin:10px 5px 5px 5px; font-weight:bold; text-align:center; FONT-SIZE: 15px; position:absolute; top:8px;left:0px; float:left; height:20px; }
.widthHundred { float:left; width:100%; }
/****************************ajax_opt begin******************************************************************************************/
//报表页面请求
//根据 组件标志 componentFlag 选择展示组件
function switchComponentForGetChart(componentFlag,isMs,ChartID,nullFlag,getSelectIndexValue,getChartHeadValue,heardBean)
{
if (1 == componentFlag)
{
$("#lineForJfreeChar").show();
$("#line").html("");
$("#lineForOpenFlash").html("");
ajaxGetResultForJfreeChart(isMs, ChartID, nullFlag, getSelectIndexValue, getChartHeadValue);
}
else if (2 == componentFlag)
{
$("#line").html("");
$("#lineForJfreeChar").hide();
$("#lineForOpenFlash").html("");
ajaxGetResultForFusionChart(isMs, nullFlag, true, ChartID, getSelectIndexValue, getChartHeadValue,heardBean);
}
else if (3 == componentFlag)
{
$("#line").html("");
$("#lineForJfreeChar").hide();
$("#lineForOpenFlash").html("");
ajaxGetResultForOpenFalsh(isMs, ChartID, nullFlag, getSelectIndexValue, getChartHeadValue); //还有细节没实现
}
} //显示OpenFalsh单折线
function ajaxGetResultForOpenFalsh(isMs,ChartID,nullFlag,getSelectIndexValue,getChartHeadValue)
{
var url="";
if("true"==nullFlag)
{ }
else if(isMs)
{
url = "method=gotoOpenFlash&ChartID="+ChartID+"&mm=getMsResultToOpenFlash&prmString=" + getSelectIndexValue() +"&nullFlag="+nullFlag+"&isMs="+isMs;
}else
{
url = "method=gotoOpenFlash&ChartID="+ChartID+"&mm=getMsResultToOpenFlash&prmString=" + getChartHeadValue() +"&nullFlag="+nullFlag+"&isMs="+isMs;
}
$.ajax(
{
type : "POST",
url : "Chart.htm",
data : url,
async : false,
success : function (msg2)
{
$("#lineForOpenFlash").html(msg2);
}
}
);
return false;
} //显示fusionChart折线 isMs多条件比较 isMSCol 多折线控件
function ajaxGetResultForFusionChart(isMs,nullFlag,isMSCol,ChartID,getSelectIndexValue,getChartHeadValue,heardBean)
{
var url;
if ("true" == nullFlag)
{
}
else if (isMs)
{
url = "method=getMsResultJson&ChartID="+ChartID+"&prmString=" + getSelectIndexValue() + "&nullFlag=" + nullFlag + "&isMs=" + isMs;
}
else
{
url = "method=getMsResultJson&ChartID="+ChartID+"&prmString=" + getChartHeadValue() + "&nullFlag=" + nullFlag + "&isMs=" + isMs;
}
$.ajax(
{
type : "POST",
url : "Chart.htm",
data : url,
success : function (msgResult)
{
if ("" != msgResult)
{
ResultJson = eval("(" + msgResult + ")");
var swfUrl,
chartID;
var x = "800";
var y = "200";
chartID = "ChartId";
if (isMs)
{
swfUrl = "chart/fusionCharts/swf/MSLine.swf";
getMSline(swfUrl, chartID, x, y, heardBean, ResultJson[0]);
}
else
{
swfUrl = "chart/fusionCharts/swf/Line.swf";
getline(swfUrl, 'flash-chart', x, y, heardBean, ResultJson[0]);
}
}
}
}
);
}
//显示JfreeChart单折线或双折线
function ajaxGetResultForJfreeChart(isMs,ChartID,nullFlag,getSelectIndexValue,getChartHeadValue)
{
var url="";
if("true"==nullFlag)
{
url = "method=getMsResultToJfreeChart&ChartID="+ChartID+"&prmString=0"+"&chartX="+chartX+"&chartY="+chartY+"&nullFlag="+nullFlag+"&isMs="+isMs;;
}
else if(isMs)
{
url = "method=getMsResultToJfreeChart&ChartID="+ChartID+"&prmString=" + getSelectIndexValue()+"&chartX="+chartX+"&chartY="+chartY+"&nullFlag="+nullFlag+"&isMs="+isMs;
}else
{
url = "method=getMsResultToJfreeChart&ChartID="+ChartID+"&prmString=" + getChartHeadValue()+"&chartX="+chartX+"&chartY="+chartY+"&nullFlag="+nullFlag+"&isMs="+isMs;
}
$.ajax(
{
type : "POST",
url : "Chart.htm",
data : url,
async : false,
success : function (msg3)
{
var fileName = msg3.split("$$$")[1];
$("#charImg").attr("src", fileName);
$("#pngName").html(msg3.split("$$$")[0]);
}
}
);
return false;
} /****************************ajax_opt end******************************************************************************************/ /****************************Fusion_opt begin******************************************************************************************/
function getMSline(swfUrl, chartID, x, y, heardBean, ResultJson)
{
var myChart = new FusionCharts(swfUrl, chartID, x, y);
var charts = ""
+ "{"
+ "\"chart\" :"
+ "{"
+ "\"caption\" : \"" + heardBean.chartTitle + "\","
+ "\"yaxisname\" : \"KB/S\","
+ "\"showvalues\" : \"0\","
+ "\"decimals\" : \"0\","
+ "\"canvasBgColor\" : \"8FDEE7\","
+ "\"formatnumberscale\" : \"0\","
+ "\"animation\" : \"0\","
+ "\"palette\" : \"4\""
+ "},"
+ "\"categories\" : ["
+ "{"
+ "\"category\" : [";
//x坐标lable
for (i = 0; i < ResultJson.labels.length; i++)
{
if (i > 0)
{
charts = charts + ",";
}
charts = charts + "{"
+ "\"label\" : \"" + ResultJson.labels[i] + "\""
+ "}";
}
charts = charts + "]"
+ "}"
+ "],"
+ "\"dataset\" :"
+ "[";
//线段
for (j = 0; j < ResultJson.lines.length; j++)
{
if (j > 0)
{
charts = charts + ",";
}
charts = charts + "{"
+ "\"seriesname\" : \""+ResultJson.lines[j].msTitle+"\","
+ "\"color\" : \""+getColor()+"\","
+ "\"showvalues\" : \"0\","
+ "\"data\" : [";
//线段的点
for (i = 0; i < ResultJson.lines[j].list.length; i++)
{
if (i > 0)
{
charts = charts + ",";
}
charts = charts + "{"
+ "\"value\" : " +ResultJson.lines[j].list[i] //Math.random() * 50 ResultJson.lines[j].list[i] Math.random() * 50
+ "}";
}
charts = charts + "]"
+ "}"; }
charts = charts + "]"
+ "}";
myChart.setJSONData(charts);
myChart.render('line');
}
function getline(swfUrl, chartID, x, y, heardBean, ResultJson)
{
var chartObj = new FusionCharts(swfUrl, chartID, x, y);
jsonstr = "{\"chart\":{ \"caption\":\"" + heardBean.chartTitle + "\" },\"data\":[";
var i = 0;
for (i = 0; i < ResultJson.labels.length; i++)
{
if (i > 0)
{
jsonstr = jsonstr + ",";
}
jsonstr = jsonstr + "{ \"label\":\"" + ResultJson.labels[i] + "\", \"value\":\"" + ResultJson.lines[0].list[i] + "\"}";
}
jsonstr = jsonstr + "]}";
chartObj.setJSONData(eval("(" + jsonstr + ")"));
chartObj.render('line');
}
/****************************Fusion_opt end******************************************************************************************/ /****************************jfc_opt begin******************************************************************************************/
//替换图片路径
function getPngName(content)
{
var reg = new RegExp(/<div id=\"pngName\">(.*?)<\/div>/ig);
if (reg.test(content))
{
return (RegExp.$1);
}
}
/****************************jfc_opt end******************************************************************************************/
/**验证主机id是否正确*/
function chackHostId(String,nullFlag)
{
if ( !nullFlag)
{
var re = /^[0-9]{1,10}$/;
if (re.test(String))
{
return true;
}
else
{
alert("主机id格式输入有误，正确的格式应10位以内整数,多个以,号隔开。");
return false;
}
}
return true;
}
function ajaxGetResultForCpuChart(nullFlag)
{
var dataInputValue=0;
var chInputValue=0;
var isMs;
var ChartID;
//得到报表id
var ChartID = $("#"+"myselect001").children('option:selected').val();
//得到查询方式
var SelectID = $("#"+"myselect002").children('option:selected').val()*1;
//平台号
var chArray=document.getElementById("myinput007").value.split(",");
//平台号
var ch=(document.getElementById("myinput007").value.rtrim().split(",")[0].rtrim());
//时间值
var DataValue=document.getElementById("myinput003").value.split(",");
//得到查询的指标 是cpu or 内存
var field_type = $("#"+"myselect005").children('option:selected').val().rtrim(); var SelectIndex = 0;
var ChartHeadValue = 0;
//比较字段在查询sql中的位置
var MsIndex=0;
//折线比较时折线的标识模板
var label=0;
var MsWhere=0;
var Where=0;
var data=0;
dataInputValue="";
if(!chackDataFM(DataValue[0].rtrim(), ChartID,nullFlag))
{
return ;
}
for(var i=0;i<DataValue.length;i++)
{
if(!chackDataFM(DataValue[i].rtrim(), ChartID,nullFlag))
{
return ;
}
if(i>0)
{
dataInputValue=dataInputValue+"@^$"; //分隔对象
}
dataInputValue=dataInputValue+DataValue[i].rtrim();
} if(isReData(DataValue))
{
alert("日期有重复的值，请重新选择日期。");
return ;
}
chInputValue="";
if(!chackHostId(chArray[0].rtrim(),nullFlag))
{
return ;
}
for(var j=0;j<chArray.length;j++)
{
if(!chackHostId(chArray[j].rtrim(),nullFlag))
{
return ;
}
if(j>0)
{
chInputValue=chInputValue+"@^$"; //分隔对象
}
chInputValue=chInputValue+(chArray[j].rtrim());
} if(isReData(chArray))
{
alert("主机有重复的值，请重新选择日期。");
return ;
}
//index=0 主机 index=1 时间 index=2 查询方式 index=3 查询字段 //单主机单时间段展示
if (1 != SelectID)
{
isMs = true;
//不同时间同主机
if (2 == SelectID)
{
if(DataValue.length<2)
{
alert("不同时间同主机对比，至少选择两个对比时间。");
cleanTime();
return;
}
if(!(chArray.length==1))
{
alert("不同时间同主机对比，必须且只能输入一个主机。");
cleanCh();
return;
}
MsIndex="1";
Where="0$^@"+ch+"@^$2$^@"+SelectID+"@^$3$^@"+field_type;
MsWhere=dataInputValue;
label=getLabel2(1,null,ChartID);
}
//不同时间不同主机的平均值
else if (3== SelectID)
{
if(DataValue.length<2)
{
alert("不同时间几个主机的平均值对比，至少选择两个对比时间。");
cleanTime();
return;
}
if(!(chArray.length<2))
{
alert("不同时间几个主机的平均值对比，至少选择两个求平均值的主机。");
cleanCh();
return;
}
MsIndex="1";
Where="0$^@"+chArray+"@^$2$^@"+SelectID+"@^$3$^@"+field_type;
MsWhere=dataInputValue;
label=getLabel2(1,null,ChartID);
}
//同时间不同主机
else if (4 == SelectID)
{
if(!(DataValue.length==1))
{
alert("同时间不同主机对比，必须且只能输入一个时间段。");
cleanTime();
return;
}
if(!(chArray.length<2))
{
alert("同时间不同主机对比，至少选择两个要比较的主机。");
cleanCh();
return;
}
MsIndex="0";
Where="1$^@"+DataValue[0].rtrim()+"@^$2$^@"+SelectID+"@^$3$^@"+field_type;
MsWhere=chInputValue;
label=getLabel2(2,null,ChartID);
}
SelectIndex = MsIndex+","+label+"@@@"+MsWhere+"@@@"+Where;
}//单线段
else
{
if(!(DataValue.length==1))
{
alert("单个时间单个主机展示，必须且只能输入一个时间段。");
cleanTime();
return;
}
if(!(chArray.length==1))
{
alert("单个时间单个主机展示，必须且只能输入一个主机。");
cleanCh();
return;
}
ChartHeadValue="0$^@"+ch+"@^$1$^@"+DataValue[0].rtrim()+"@^$2$^@"+SelectID+"@^$3$^@"+field_type;
isMs = false;
}
var getSelectIndexValue = function ()
{
return SelectIndex;
}
var getChartHeadValue = function ()
{
return ChartHeadValue;
}
//生成报表
switchComponentForGetChart(getComponentId(),isMs,ChartID,nullFlag,getSelectIndexValue,getChartHeadValue,Chart_heard[0]);
} function getLabel2(flag,bean,ChartID)
{
//当时间有多条件时
if(flag==1)
{
label=getLabeForDate(flag, ChartID);
}
else if(flag==2)
{
label = "平台?";
}
return label;
} function initCpu()
{
$("#header2").html("");
var prentId="header2"; /*** 表头起第一行****/
CreateDocument(prentId, "div1" , "div", 0);
var prentId="div1";
//报表类型
var name="101";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "div" + name).addClass("mydiv_title2_long");
$("#" + "img" + name).addClass("myimg_title2_long");
$("#" + "mydiv" + name).addClass("lable01_title2_long");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u474.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="主机性能报表"; //清空表头
$("#rightTop").html("");
CreateDocument("rightTop", "header", "div", 0);
var prentId="header"; /*** 表头起第二行****/
CreateDocument(prentId, "div11" , "div", 0);
var prentId="div11";
//报表类型
var name="001";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "myselect" + name, "select", 0);
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "myselect" + name).addClass("select");
$("#" + "div" + name).addClass("mydiv");
$("#" + "div" + name).addClass("myselect02");
$("#" + "img" + name).addClass("myimg");
$("#" + "mydiv" + name).addClass("lable01");
addOption("myselect" + name, "12", "月报表");
addOption("myselect" + name, "13", "日报表");
addOption("myselect" + name, "14", "小时报表");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u22.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="报表类型:";
obj = document.getElementById("myselect" + name);
obj.onchange=function()
{
reSetTime();
}
//比较方式
var name="002";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "myselect" + name, "select", 0);
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "myselect" + name).addClass("select");
$("#" + "div" + name).addClass("mydiv");
$("#" + "div" + name).addClass("myselect02");
$("#" + "img" + name).addClass("myimg");
$("#" + "mydiv" + name).addClass("lable01");
addOption("myselect" + name, 1, "单个时间单个主机展示，不对比");
addOption("myselect" + name, 2, "不同时间同主机对比");
addOption("myselect" + name, 3, "不同时间不同主机的平均值对比");
addOption("myselect" + name, 4, "同时间不同主机对比");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u22.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="比较的方式:";
//对比条件，时间
var name="003";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "btnimg" + name, "img", 0);
CreateDocument("div" + name, "myinput" + name, "input", 0);
CreateDocument("div" + name, "mybutton" + name, "div", 0);
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "myinput" + name).addClass("input02");
$("#" + "div" + name).addClass("mydiv02");
$("#" + "div" + name).addClass("myselect02");
$("#" + "img" + name).addClass("myimg02");
$("#" + "btnimg" + name).addClass("mybtnimg02");
$("#" + "mydiv" + name).addClass("lable02");
$("#" + "mybutton" + name).addClass("mybutton-02");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u42.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="请输入时间(以逗号分隔):";
obj = document.getElementById("mybutton" + name);
//obj.innerHTML="通道+";
obj.value="时间+";
obj.onclick=function()
{
JDialog.openI('时间选择','mon/chart/inputDate.jsp',400,300,null,false,false,true);
}; img = document.getElementById("btnimg" + name);
img.onclick=function()
{
JDialog.openI('时间选择','mon/chart/inputDate.jsp',400,300,null,false,false,true);
};
img.src="mon/chart/images/u57.png";
obj = document.getElementById("myinput" + name);
obj.value=new Date().Format("yyyy-MM");
// obj.disabled=true; /*** 表头起第二行****/
CreateDocument(prentId, "div2" , "div", 0);
var prentId="div2";
$("#" + "div2").addClass("widthHundred");
//报表类型选择框
var name="005";
//选择框
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "myselect" + name, "select", 0);
//时间控件
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "myselect" + name).addClass("select");
$("#" + "div" + name).addClass("mydiv");
$("#" + "div" + name).addClass("myselect02");
$("#" + "img" + name).addClass("myimg");
$("#" + "mydiv" + name).addClass("lable01");
addOption("myselect" + name, "cpuuages", "CPU 使用率");
addOption("myselect" + name, "memburthens", "内存 使用率");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u22.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="性能类型:"; //报表类型选择框
var name="006";
//选择框
CreateDocument(prentId, "nulldiv" + name, "div", 0);
$("#" + "nulldiv" + name).addClass("nulldiv"); //报表类型选择框
var name="007";
//选择框
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "btnimg" + name, "img", 0);
CreateDocument("div" + name, "myinput" + name, "input", 0);
CreateDocument("div" + name, "mybutton" + name, "div", 0);
//时间控件
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "myinput" + name).addClass("input02");
$("#" + "div" + name).addClass("mydiv02");
$("#" + "div" + name).addClass("myselect02");
$("#" + "img" + name).addClass("myimg02");
$("#" + "btnimg" + name).addClass("mybtnimg02");
$("#" + "mydiv" + name).addClass("lable02");
$("#" + "mybutton" + name).addClass("mybutton-02");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u42.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="请输入主机编号(以逗号分隔):";
obj = document.getElementById("mybutton" + name);
//obj.innerHTML="通道+";
obj.onclick=function()
{
JDialog.openI('主机选择','mon/chart/searchHost.jsp',600,400,null,false,false,true);
};
img = document.getElementById("btnimg" + name);
img.src="mon/chart/images/u57.png";
img.onclick=function()
{
JDialog.openI('主机选择','mon/chart/searchHost.jsp',600,400,null,false,false,true);
};
obj = document.getElementById("myinput" + name); var name="004";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "btntreeimg" + name, "img", 0);
CreateDocument("div" + name, "btntree" + name, "div", 0);
$("#" + "div" + name).addClass("mydiv04");
$("#" + "btntreeimg" + name).addClass("btntreeimg");
$("#" + "btntree" + name).addClass("btntree");
var img = document.getElementById("btntreeimg" + name);
img.src="mon/chart/images/u117.png";
img.onclick=function()
{
ajaxGetResultForCpuChart(false);
};
// img.style.display="none";
var obj = document.getElementById("btntree" + name);
obj.innerHTML="生成报表";
obj.onclick=function()
{
//生成报表
ajaxGetResultForCpuChart(false);
}; ajaxGetResultForCpuChart(true);
}
function setDateDef(id,str)
{
obj = document.getElementById(id);
obj.value=new Date().Format(str);
} function reSetTime()
{
var ChartID = getChartID();
var DataValue = getDataValue().split(",");
var str2 = "";
var v = 0;
var isFist = true; for (var i = 0; i < DataValue.length; i++)
{
v = getDateDef(DataValue[i].rtrim(), ChartID, false);
if ("" != v + "")
{
if (!isFist)
{
str2 += ",";
}
else
{
isFist = false
}
str2 += v;
}
}
obj = document.getElementById("myinput003");
obj.value = str2+"";
}
function cleanCh()
{
obj = document.getElementById("myinput007");
obj.value="";
}
function cleanTime()
{
}
/****************************head2_opt begin******************************************************************************************/
//延时报表头初始化
function initPostponeChartHead()
{ $("#header2").html("");
var prentId="header2";
$("#" + "header2" ).addClass("header2");
/*** 表头起第一行****/
CreateDocument(prentId, "div1" , "div", 0);
var prentId="div1";
//报表类型
var name="101";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "div" + name).addClass("mydiv_title2_long");
$("#" + "img" + name).addClass("myimg_title2_long");
$("#" + "mydiv" + name).addClass("lable01_title2_long");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u474.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="通道延时报表:"; /**var name="102";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "div" + name).addClass("mydiv_title2");
$("#" + "img" + name).addClass("myimg_title2");
$("#" + "mydiv" + name).addClass("lable01_title2");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u474.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="导出图片:";**/ //清空表头
$("#rightTop").html("");
CreateDocument("rightTop", "header", "div", 0);
var prentId="header";
//报表类型
var name="001";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "myselect" + name, "select", 0);
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "myselect" + name).addClass("select");
$("#" + "div" + name).addClass("mydiv");
$("#" + "div" + name).addClass("myselect02");
$("#" + "img" + name).addClass("myimg");
$("#" + "mydiv" + name).addClass("lable01");
addOption("myselect" + name, "9", "月报表");
addOption("myselect" + name, "10", "日报表");
addOption("myselect" + name, "11", "小时报表");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u22.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="报表类型:";
obj = document.getElementById("myselect" + name);
obj.onchange=function()
{
reSetTime();
}
//比较方式
var name="002";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "myselect" + name, "select", 0);
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "myselect" + name).addClass("select");
$("#" + "div" + name).addClass("mydiv");
$("#" + "div" + name).addClass("myselect02");
$("#" + "img" + name).addClass("myimg");
$("#" + "mydiv" + name).addClass("lable01");
addOption("myselect" + name, 1, "单个时间单个通道展示，不对比");
addOption("myselect" + name, 2, "不同时间同通道对比");
addOption("myselect" + name, 3, "不同时间不同通道的平均值对比");
addOption("myselect" + name, 4, "同时间不同通道对比");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u22.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="比较的方式:";
//对比条件，时间
var name="003";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "btnimg" + name, "img", 0);
CreateDocument("div" + name, "myinput" + name, "input", 0);
CreateDocument("div" + name, "mybutton" + name, "div", 0);
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "myinput" + name).addClass("input02");
$("#" + "div" + name).addClass("mydiv02");
$("#" + "div" + name).addClass("myselect02");
$("#" + "img" + name).addClass("myimg02");
$("#" + "btnimg" + name).addClass("mybtnimg02");
$("#" + "mydiv" + name).addClass("lable02");
$("#" + "mybutton" + name).addClass("mybutton-02");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u42.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="请输入时间(以逗号分隔):";
obj = document.getElementById("mybutton" + name);
//obj.innerHTML="通道+";
obj.value="时间+";
obj.onclick=function()
{
JDialog.openI('时间选择','mon/chart/inputDate.jsp',400,300,null,false,false,true);
};
img = document.getElementById("btnimg" + name);
img.onclick=function()
{
JDialog.openI('时间选择','mon/chart/inputDate.jsp',400,300,null,false,false,true);
};
img.src="mon/chart/images/u57.png";
obj = document.getElementById("myinput" + name);
obj.value=new Date().Format("yyyy-MM"); // obj.disabled=true; /*** 表头起第二行****/
CreateDocument(prentId, "div2" , "div", 0);
var prentId="div2";
$("#" + "div2").addClass("widthHundred");
//报表类型选择框
var name="005";
//选择框
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "myselect" + name, "select", 0);
//时间控件
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "myselect" + name).addClass("select");
$("#" + "div" + name).addClass("mydiv");
$("#" + "div" + name).addClass("myselect02");
$("#" + "img" + name).addClass("myimg");
$("#" + "mydiv" + name).addClass("lable01");
addOption("myselect" + name, "-1", "全部");
addOption("myselect" + name, "4200", "平台中转通道");
addOption("myselect" + name, "4300", "运营商发送通首");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u22.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="通道类型:"; //报表类型选择框
var name="006";
//选择框
CreateDocument(prentId, "nulldiv" + name, "div", 0);
$("#" + "nulldiv" + name).addClass("nulldiv"); //报表类型选择框
var name="007";
//选择框
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "img" + name, "img", 0);
CreateDocument("div" + name, "btnimg" + name, "img", 0);
CreateDocument("div" + name, "myinput" + name, "input", 0);
CreateDocument("div" + name, "mybutton" + name, "div", 0);
//时间控件
CreateDocument("div" + name, "mydiv" + name, "div", 0);
$("#" + "myinput" + name).addClass("input02");
$("#" + "div" + name).addClass("mydiv02");
$("#" + "div" + name).addClass("myselect02");
$("#" + "img" + name).addClass("myimg02");
$("#" + "btnimg" + name).addClass("mybtnimg02");
$("#" + "mydiv" + name).addClass("lable02");
$("#" + "mybutton" + name).addClass("mybutton-02");
var img = document.getElementById("img" + name);
img.src="mon/chart/images/u42.png";
var obj = document.getElementById("mydiv" + name);
obj.innerHTML="请输入通道(以逗号分隔):";
obj = document.getElementById("mybutton" + name);
//obj.innerHTML="通道+";
obj.onclick=function()
{
JDialog.openI('通道选择','mon/chart/searchChnnel.jsp',600,400,null,false,false,true);
};
img = document.getElementById("btnimg" + name);
img.src="mon/chart/images/u57.png";
img.onclick=function()
{
JDialog.openI('通道选择','mon/chart/searchChnnel.jsp',600,400,null,false,false,true);
};
obj = document.getElementById("myinput" + name); var name="004";
CreateDocument(prentId, "div" + name, "div", 0);
CreateDocument("div" + name, "btntreeimg" + name, "img", 0);
CreateDocument("div" + name, "btntree" + name, "div", 0);
$("#" + "div" + name).addClass("mydiv04");
$("#" + "btntreeimg" + name).addClass("btntreeimg");
$("#" + "btntree" + name).addClass("btntree");
var img = document.getElementById("btntreeimg" + name);
img.src="mon/chart/images/u117.png";
img.onclick=function()
{
ajaxGetResultForPostponeChart(false);
};
// img.style.display="none";
var obj = document.getElementById("btntree" + name);
obj.innerHTML="生成报表";
obj.onclick=function()
{
//生成报表
ajaxGetResultForPostponeChart(false);
};
// obj.disabled=true; ajaxGetResultForPostponeChart(true);
}
/****************************head2_opt end******************************************************************************************/ /****************************action2 begin******************************************************************************************/
function getChartID()
{
return $("#"+"myselect001").children('option:selected').val();
}
function getSelectID()
{
return $("#"+"myselect002").children('option:selected').val();
}
function getPtType()
{
return $("#"+"myselect005").children('option:selected').val();
}
function getDataValue( )
{
return document.getElementById("myinput003").value;
}
function getChValue( )
{
return document.getElementById("myinput007").value;
}
function setDataValue(str)
{
document.getElementById("myinput003").value=str;
}
function setChValue(str)
{
document.getElementById("myinput007").value=str;
}
/**验证通道格式是否正确*/
function chackch(String,nullFlag)
{
if ( !nullFlag)
{
var re = /^[^|]{1,}[|]{1}[^|]{1,}$/;
if (re.test(String))
{
return true;
}
else
{
alert("通道格式输入有误，正确的格式应为\"平台ID|帐号id\",多个以,号隔开。");
return false;
}
}
return true;
}
/*****
固定 charid 及sql 和参数位置 原设计 自动生成报表头 全部灵活配置
这里要求个性化联动 所以省掉 自动生成表头的部骤
sql 和 sql 参数还是配到表中
*****/
function ajaxGetResultForPostponeChart(nullFlag)
{
var dataInputValue=0;
var chInputValue=0;
var isMs,
ChartID;
//得到报表id
var ChartID = getChartID();
//得到查询方式
var SelectID = getSelectID()*1;
//得到查询类型
var ch_type = getPtType().rtrim();
//平台号
var chArray=getChValue().split(",");
//平台号
var ch=(getChValue().rtrim().split(",")[0].rtrim());
//时间值
var DataValue=getDataValue().split(",");
var SelectIndex = 0;
var ChartHeadValue = 0;
//比较字段在查询sql中的位置
var MsIndex=0;
//折线比较时折线的标识模板
var label=0;
var MsWhere=0;
var Where=0;
var data=0;
dataInputValue="";
if(!chackDataFM(DataValue[0].rtrim(), ChartID,nullFlag))
{
return ;
}
for(var i=0;i<DataValue.length;i++)
{
if(!chackDataFM(DataValue[i].rtrim(), ChartID,nullFlag))
{
return ;
}
if(i>0)
{
dataInputValue=dataInputValue+"@^$"; //分隔对象
}
dataInputValue=dataInputValue+DataValue[i].rtrim();
}
if(isReData(DataValue))
{
alert("日期有重复的值，请重新选择日期。");
return ;
}
chInputValue="";
if(!chackch(chArray[0].rtrim(),nullFlag))
{
return ;
}
for(var j=0;j<chArray.length;j++)
{
if(!chackch(chArray[j].rtrim(),nullFlag))
{
return ;
}
if(j>0)
{
chInputValue=chInputValue+"@^$"; //分隔对象
}
chInputValue=chInputValue+(chArray[j].rtrim());
}
if(isReData(chArray))
{
alert("通道有重复的值，请重新选择通道。");
return ;
}
//index=0 通道 index=1 时间 index=2 通道类型 index=3 查询方式
//单通道单时间段展示
if (1 != SelectID)
{
isMs = true;
//不同时间同通道
if (2 == SelectID)
{
if(DataValue.length<2)
{
alert("不同时间同通道对比，至少选择两个对比时间。");
cleanTime();
return;
}
if(!(chArray.length==1))
{
alert("不同时间同通道对比，必须且只能输入一个主机。");
cleanCh();
return;
}
MsIndex="1";
Where="0$^@"+ch+"@^$2$^@"+ch_type+"@^$3$^@"+SelectID;
MsWhere=dataInputValue;
label=getLabel(1,null,ChartID);
}
//不同时间不同通道的平均值
else if (3== SelectID)
{
if(DataValue.length<2)
{
alert("不同时间几个通道的平均值对比，至少选择两个对比时间。");
cleanTime();
return;
}
if(!(chArray.length<2))
{
alert("不同时间几个通道的平均值对比，至少选择两个求平均值的通道。");
cleanCh();
return;
}
MsIndex="1";
Where="0$^@"+chArray+"@^$2$^@"+ch_type+"@^$3$^@"+SelectID;
MsWhere=dataInputValue;
label=getLabel(1,null,ChartID);
}
//同时间不同通道
else if (4 == SelectID)
{
if(!(DataValue.length==1))
{
alert("同时间不同通道对比，必须且只能输入一个时间段。");
cleanTime();
return;
}
if(!(chArray.length<2))
{
alert("同时间不同通道对比，至少选择两个要比较的通道。");
cleanCh();
return;
}
MsIndex="0";
Where="1$^@"+DataValue[0]+"@^$2$^@"+ch_type+"@^$3$^@"+SelectID;
MsWhere=chInputValue;
label=getLabel(2,null,ChartID);
}
SelectIndex = MsIndex+","+label+"@@@"+MsWhere+"@@@"+Where;
} //单线段
else
{
if(!(DataValue.length==1))
{
alert("单个时间单个通道展示，必须且只能输入一个时间段。");
cleanTime();
return;
}
if(!(chArray.length==1))
{
alert("单个时间单个通道展示，必须且只能输入一个通道。");
cleanCh();
return;
}
ChartHeadValue="0$^@"+ch+"@^$1$^@"+DataValue[0]+"@^$2$^@"+ch_type+"@^$3$^@"+SelectID;
isMs = false;
}
var getSelectIndexValue = function ()
{
return SelectIndex;
}
var getChartHeadValue = function ()
{
return ChartHeadValue;
}
//生成报表
switchComponentForGetChart(getComponentId(),isMs,ChartID,nullFlag,getSelectIndexValue,getChartHeadValue,Chart_heard[0]);
}
/****************************action2 end******************************************************************************************/
function getLabel(flag,ChartID)
{
var label="?";
//当时间有多条件时
if(flag==1)
{
label=getLabeForDate(flag, ChartID);
}
//当通道为多条件时
else if(flag==2)
{
label = "通道?";
}
return label;
} function reSetTime()
{
var ChartID = getChartID();
var DataValue = getDataValue().split(",");
var str2 = "";
var v = 0;
var isFist = true; for (var i = 0; i < DataValue.length; i++)
{
v = getDateDef(DataValue[i].rtrim(), ChartID, false);
if ("" != v + "")
{
if (!isFist)
{
str2 += ",";
}
else
{
isFist = false
}
str2 += v;
}
}
obj = document.getElementById("myinput003");
obj.value = str2+"";
}
function cleanCh()
{
obj = document.getElementById("myinput007");
obj.value="";
}
function cleanTime()
{
}
var options_getValue = "funGetValue = function(bean){return bean.optionsValue}";
var options_getName = "funGetName =function(bean) {return bean.optionsName}";
//通过json形式创建树，此为报表树json
var treeJson=[];
//json对象 可以通过发起ajax请求来得到json数据
treeJson[0]={"nodeId":0,"nodeParentId":-1,"charID":1,"chartTitle":"报表类型"};
treeJson[1]={"nodeId":1,"nodeParentId":0,"charID":1,"chartTitle":"cpu占用率"};
treeJson[2]={"nodeId":2,"nodeParentId":1,"charID":1,"chartTitle":"cpu占用率 日报表"};
treeJson[3]={"nodeId":3,"nodeParentId":1,"charID":2,"chartTitle":"cpu占用率 月报表"};
treeJson[4]={"nodeId":4,"nodeParentId":1,"charID":3,"chartTitle":"cpu占用率 年报表"};
treeJson[5]={"nodeId":5,"nodeParentId":0,"charID":4,"chartTitle":"滞留趋势表"};
treeJson[6]={"nodeId":6,"nodeParentId":5,"charID":4,"chartTitle":"滞留日趋势表"};
treeJson[7]={"nodeId":7,"nodeParentId":5,"charID":5,"chartTitle":"滞留月趋势表"} ;
treeJson[8]={"nodeId":8,"nodeParentId":5,"charID":6,"chartTitle":"滞留年趋势表"};
treeJson[9]={"nodeId":9,"nodeParentId":0,"charID":7,"chartTitle":"平均延时情况表"};
treeJson[10]={"nodeId":10,"nodeParentId":9,"charID":7,"chartTitle":"延时日趋势表"};
treeJson[11]={"nodeId":11,"nodeParentId":9,"charID":8,"chartTitle":"延时月趋势表"};
treeJson[12]={"nodeId":12,"nodeParentId":9,"charID":9,"chartTitle":"延时年趋势表"} ;
function hiddenLeft()
{
var obj = document.getElementById("hiddenLeftFlag");
var dtreeDiv = document.getElementById("leftdiv");
var dtreebtn = document.getElementById("hiddenLeftBtn");
if (1 == obj.value || "1" == obj.value)
{
obj.value = 0;
dtreeDiv.style.display = "none";
dtreebtn.value = ">";
}
else
{
obj.value = 1;
dtreeDiv.style.display = "block";
dtreebtn.value = "<";
}
changeHeightPT(chartX, chartY, "line1", 1);
}
//重新调整布局div大小
function changeHeightPT2(chart_X, chart_y, id, line1Flag)
{
//页面可视区域值
var c_x = document.body.clientWidth * 1;
var c_y = document.body.clientHeight * 1;
//页面布局div对象
var left = document.getElementById("leftdiv");
var rivht = document.getElementById("rightdiv");
//左边隐藏标志
var LeftHiddenFlag = document.getElementById("hiddenLeftFlag").value;
//左右高设为可见区域高
left.style.height = c_y - 50;
rivht.style.height = c_y - 50;
//根据标志判定是否隐藏左边并设置高度
if (1 == LeftHiddenFlag || "1" == LeftHiddenFlag)
{
left.style.width = c_x * 0.13;
rivht.style.width = (c_x - (c_x * 0.13)) - 50;
}
else
{
left.style.width = 1;
rivht.style.width = (c_x - 1) - 50;
}
if (line1Flag == 1)
{
var line1 = document.getElementById("line1");
line1.style.height = chart_y;
line1.style.width = chart_X;
var line1_marginLeft = (rivht.offsetWidth * 1 - line1.offsetWidth * 1) / 2;
var line1_marginTop = (c_y - (document.getElementById("rightTop").clientHeight * 1 - 50) / 2) - chart_y;
line1.style.marginLeft = line1_marginLeft;
}
}
//通过ajax得到表头
function ajaxGetTreeNodes()
{
$.ajax(
{
type : "POST",
url : "Chart.htm",
data : "method=getDtreeJsonForMenu",
success : function (treeResult)
{
if ("" != treeResult)
{
alert(treeResult);
treeJson = eval("(" + treeResult + ")");
}
//创建树形菜单 现在暂时是静态的 在本页面头定义 ，并未从后台获取
createTree("dtreeDiv", treeJson);
}
}
);
}
//生成报表树
function createTree(dtreePID, treeJson)
{
//得到要放入的菜单
var treeDiv = document.getElementById(dtreePID);
//注册dtree在本页面的单击事件
dTree.prototype.execFunction = function (id, beanString)
{
var bean = eval("(" + beanString + ")");
if (bean.charID > 0)
{
//动态请求并加载报表
// ajaxChart(options_getValue, options_getName, bean.charID);
}
};
this.d = new dTree('d', '');
//复选框不需要
this.d.config.checkbox = false;
//这个因为dtree己重写，但有的代码没改完 url为空将不执行注册事件
var url = "url";
var bean =
{
"nodeId" : 0,
"nodeParentId" : -1,
"charID" : 0,
"chartTitle" : "报表类型"
};
//添加一个初始节点
this.d.add(bean.nodeId, bean.nodeParentId, myJsonToString(bean, "\\\'"), bean.chartTitle, false, url);
//遍历并创建树节点
for (i = 0; i < treeJson.length; i++)
{
var Bean = treeJson[i];
this.d.add(Bean.nodeId, Bean.nodeParentId, myJsonToString(Bean, "\\\'"), Bean.chartTitle, false, url);
}
treeDiv.innerHTML = this.d.toString();
}
//时间控件
function createInputDate(prentId, name, inDateFmt)
{
CreateDocument(prentId, "myinputdate" + name, "input", 0);
var obj = document.getElementById("myinputdate" + name);
$("#" + "myinputdate" + name).addClass("Wdate");
//post提交时根据名字得到值
obj.name = name;
obj.style.width = 150;
obj.onclick = function ()
{
WdatePicker(
{
dateFmt : inDateFmt
}
);
};
}
//input
function createInput(prentId, name)
{
//时间控件
CreateDocument(prentId, "myinput" + name, "input", 0);
var obj = document.getElementById("myinput" + name);
$("#" + "myinput" + name).addClass("chart_head_element_input");
//post提交时根据名字得到值
obj.name = name;
}
//select
function createSelect(prentId, name, OptionList, getType, getName)
{
var funGetValue = function (bean)
{
return ""
};
var funGetName = function (bean)
{
return ""
};
eval(getType);
eval(getName);
//选择框
CreateDocument(prentId, "myselect" + name, "select", 0);
$("#" + "myselect" + name).addClass("chart_head_element_select");
var i = 0;
for (i = 0; i < OptionList.length; i++)
{
addOption("myselect" + name, funGetValue(OptionList[i]), funGetName(OptionList[i]));
}
}
//button
function createButton(prentId, name)
{
var obj;
CreateDocument(prentId, "mybutton" + name, "button", 0);
//按钮
obj = document.getElementById("mybutton" + name);
obj.value = "创建";
obj.onclick = function ()
{
if (1 == getSelectValue('mySelect' + '3') * 1)
{
alert("hello");
}
};
$("#" + "mybutton").addClass("chart_head_element_button");
}
//button
function createDiv(prentId, name, fun, eName)
{
CreateDocument(prentId, "chart_head_element" + name, "div", 0);
$("#" + "chart_head_element" + name).addClass("chart_head_element");
CreateDocument("chart_head_element" + name, "chart_head_element_text" + name, "text", 0);
obj = document.getElementById("chart_head_element_text" + name);
obj.innerHTML = eName + ":";
$("#" + "chart_head_element_text" + name).addClass("chart_head_element_text2");
fun("chart_head_element" + name, name);
}
//全选或全部取消
function allChecked(flag)
{
var fun = 0;
if (flag)
{
fun = function (r)
{
r.disabled = false;
}
}
else
{
fun = function (r)
{
r.disabled = true;
}
}
CheckedByName(flag, "chkOpt", fun);
CheckedByName(flag, "chkOpt2", 0);
}
//得到选中的复选框
function getChecked()
{
var r = document.getElementsByName("chkOpt");
for (var i = 0; i < r.length; i++)
{
if (r[i].checked)
{
return r[i].value;
}
}
return "";
}
//设置选项卡的值 options_getValue, options_getName 全局变量
function setValue(OptionList)
{
var funGetValue = function (bean)
{
return ""
};
var funGetName = function (bean)
{
return ""
};
eval(options_getValue);
eval(options_getName);
var r = document.getElementsByName("chkOpt");
for (var i = 0; i < OptionList.length && i < r.length; i++)
{
r[i].value = funGetValue(OptionList[i]);
document.getElementById("div_chk_00" + (i + 1)).innerHTML = funGetName(OptionList[i]);
//设置名称 funGtName(OptionList[i]);
}
return true;
}
/****************************pageCommon_opt end******************************************************************************************/
/****************************index_opt begin******************************************************************************************/
//找到区分条件
function getIndexSelectJsonBean()
{
var options = "";
for (i = 0; i < hList.length; i++)
{
if ("IndexSelect" == hList[i].type)
{
options = hList[i];
}
}
return options;
}
//得到区分条件的eid
function getIndexSelectValue(bean)
{
//找到对应的选择框元素
var name = "myselect" + "IndexSelect" + getIndexSelectJsonBean().eid;
var value = $("#" + name).children('option:selected').val();
return value;
}
function getCheckedOpt(OptionList)
{
var prm = "";
//得到分线段的字段的值的集合
var r = document.getElementsByName("chkOpt");
//第一个则不在前面加分隔串
var isFlst = true;
for (var i = 0; i < r.length && i < OptionList.length; i++)
{
//得到显示不同线须的区分条件
if (r[i].checked)
{
if (!isFlst)
{
prm += "@^$"; //分隔对象
}
else
{
isFlst = false;
}
//得到不同线的差异参数值
prm += r[i].value;
}
}
return prm;
}
//得到多选参数的值
function getSelectIndexValue2()
{
var prm = "";
var bean = getIndexSelectJsonBean();
if ("" == bean)
{
alert("多值比较报表未配置比较条件。");
return;
}
var eid = getIndexSelectValue(bean);
if ("" != eid)
{
prm = prm + eid; //区分条件eid
}
else
{
alert("请选中要比较的条件。");
return;
}
prm = prm + "@@@";
var values = getCheckedOpt(getIndexSelectByEid(eid)); //区分条件 value（多个），根据不同条件值取得不同报表折线
if ("" != values)
{
prm = prm + values;
}
else
{
prm = prm + "0";
}
prm = prm + "@@@";
var otherWheres = getChartHeadValue(); //相同的字段的 eid 及 value
if ("" != otherWheres)
{
prm = prm + otherWheres;
}
else
{
prm = prm + "0";
}
//alert("getSelectIndexValue:"+prm);
return prm;
}
//根据eid 查找下拉框的值 hList 是全局变量
function getIndexSelectByEid(eid)
{
var options = null;
//遍历表元素
for (i = 0; i < hList.length; i++)
{
//找表eid相同元素
if (hList[i].eid == eid)
{
options = hList[i].options;
}
}
return options;
}
/****************************index_opt end******************************************************************************************/
/****************************head_opt begin******************************************************************************************/
//报表
function initChartHead(hList, Chart_heard, options_getValue, options_getName)
{
//清空表头
$("#header").html("");
$("#chk_000").html("");
//空档
CreateDocument("header", "top", "div", 0);
if (0 != hList && 0 != Chart_heard)
{
//遍历并创建报表头元素
for (i = 0; i < hList.length; i++)
{
//日期控件
if ("InputDate" == hList[i].type)
{
dfm = hList[i].options;
var cFun = function (prentId, name)
{
createInputDate(prentId, name, dfm);
}
createDiv("header", "" + hList[i].eid, cFun, hList[i].eName);
}
//下拉选择框
else if ("Select" == hList[i].type)
{
var list = hList[i].options;
var cFun = function (prentId, name)
{
createSelect(prentId, name, list, options_getValue, options_getName);
};
createDiv("header", "" + hList[i].eid, cFun, hList[i].eName);
}
//线段比较
else if ("IndexSelect" == hList[i].type)
{
var list = hList[i].options;
var cFun = function (prentId, name)
{
createSelect(prentId, name, list, options_getValue, options_getName);
};
createDiv("chk_000", "IndexSelect" + hList[i].eid, cFun, hList[i].eName);
//值改变事件
$('#myselectIndexSelect' + hList[i].eid).change(function ()
{
var eId = $(this).children('option:selected').val();
var options = getIndexSelectByEid(eId);
//重设复选框的值
setValue(options);
}
);
}
//文本输入框
else if ("Input" == hList[i].type)
{
var cFun = function (prentId, name)
{
createInput(prentId, name);
}
createDiv("header", "" + hList[i].eid, cFun, hList[i].eName);
obj = document.getElementById("myinput" + hList[i].eid);
value = obj.value + "";
obj.onclick = function ()
{}
}
//按钮
else if ("Button" == hList[i].type)
{
var cFun = function (prentId, name)
{
createButton(prentId, name);
}
createDiv("header", "" + hList[i].eid, cFun, hList[i].eName);
}
}
var obj;
CreateDocument("header", "mybutton", "button", 0);
//按钮
obj = document.getElementById("mybutton");
obj.value = "生成报表";
obj.onclick = function ()
{
var obj = document.getElementById("chk_00");
//比较开关
if (obj.checked)
{
switchComponentForGetChart(1, true, 1, "false", getSelectIndexValue2, getChartHeadValue2);
}
else
{
switchComponentForGetChart(1, false, 1, "false", getSelectIndexValue2, getChartHeadValue2);
}
};
$("#" + "mybutton").addClass("chart_head_element_button");
}
switchComponentForGetChart(1, true, 1, "true", getSelectIndexValue2, getChartHeadValue2);
}
//得到表头的值
function getChartHeadValue()
{
var i = 0;
var value = "";
var prm = "";
for (i = 0; i < hList.length; i++)
{
prm_e = "";
//日期控件
if ("InputDate" == hList[i].type)
{
obj = document.getElementById("myinputdate" + hList[i].eid);
value = obj.value + "";
}
//下拉选择框
else if ("Select" == hList[i].type)
{
obj = document.getElementById("myselect" + hList[i].eid);
value = obj.value + "";
}
//文本输入框
else if ("Input" == hList[i].type)
{
obj = document.getElementById("myinput" + hList[i].eid);
value = obj.value + "";
}
var verificationFunction;
//验证方法不为空
if ("0" != hList[i].verification)
{
//得到确认方法
eval(hList[i].verification)
//调用确认方法
verificationFunction(value);
}
if (i > 0)
{
prm += "@^$"; //参数分隔
}
prm += hList[i].prmIndex; //参数位置
prm += "$^@";
prm += value; //参数的值
}
//alert("prm"+prm);
return prm;
}
demo 2 chart 报表的更多相关文章
- jasperreport 通过javabean datasoource实现chart的报表
继上次report的demo后,还在继续做着report方面的research,今天主要是实现了通过javabean datasource填充chart图表,通过webservice下载pdf格式的报 ...
- ActiveReports 9实战教程（3）： 图文并茂的报表形式
基于上面2节内容,我们搭建了AR9的开发环境,配置好了数据源.在本节,我们以官方提供的3个中文图文并茂的报表来展示AR9的功能,并通过实战的方式一一分享. 以往做报表相关的工作时,最害怕的是报表的UI ...
- 将报表移动端集成到自有移动端app方法【IOS、Android】
应用场景 用户有自己的app,希望把报表的移动端[本文中以FineReport移动端为例]功能集成到他们的app里面去,而不需要安装两个app.Android端和IOS端的集成接口是不一样的,下面我们 ...
- Openerp 添加修改报表
Report Designer 模块在生成新报表的时候是有BUG的不建议直接使用,不过我们也可以通过该插件再写简单的代码来实现新添加报表,插件安装成功后我们可以按照下列方法来添加报表 OpenERP ...
- C# - SPC(Statistical Process Control)系统 - 6西格玛数据决策和Chart模块的开发与实现
Statistical Process Control 简介 统计过程控制(Statistical Process Control)是一种借助数理统计方法的过程控制工具.它对生产过程进行分析评价,根据 ...
- XCL-Chart柱形图的期望线/分界线
周日在柱形图上加了两个小功能,当中之中的一个是加上了期望线/分界线,功能非常小,但我个人非常喜欢这个功能(好像之前也没看到别的图表库原生支持这个. ) 主要是加上这些小小的横线后,能非常明显的区分出数 ...
- Statistics项目学习笔记
1. http://218.244.157.0:55443/index.html 初始访问时,弹出的窗口为index.html文件,文件有html命令组成.html展现的UI界面用的是WIN10-UI ...
- 进一步封装highchart，打造自己的图表插件：jHighChart.js
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表.支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合 ...
- Java开源BI系统介绍(转）
http://blog.csdn.net/boboo_2000_0/article/details/4810420 BI解决方案中的工具 一个完整的BI解决方案中有多种工具来完成BI系统中各个阶段的工 ...
随机推荐
- 实现Callable接口创建线程
创建执行线程有四种方式: 实现implements接口创建线程 继承Thread类创建线程 实现Callable接口,通过FutureTask包装器来创建线程 使用线程池创建线程 下面介绍通过实现Ca ...
- poj 1001 Exponentiation 第一题 高精度 乘方 难度:1(非java)
Exponentiation Time Limit: 500MS Memory Limit: 10000K Total Submissions: 138526 Accepted: 33859 ...
- c#中事务及回滚
程序一般在特殊数据的时候,会有数据上的同步,这个时候就用到了事物.闲话不多说,直接上代码. public void UpdateContactTableByDataSet(DataSet ds, st ...
- Week14《Java程序设计》第14次作业总结
Week14<Java程序设计>第14次作业总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何 ...
- make笔记
Makefile基本格式如下: target ... : prerequisites ... command ... ... 其中, target - 目标文件, 可以是 Object File, 也 ...
- (转)JAVA正则表达式语法大全
[正则表达式]文本框输入内容控制 整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$ 只能输入数字:"^[0-9]*$". 只能输入n位的数字:"^\d{n ...
- 《Drools7.0.0.Final规则引擎教程》第4章 4.3 日历
日历 日历可以单独应用于规则中,也可以和timer结合使用在规则中使用.通过属性calendars来定义日历.如果是多个日历,则不同日历之间用逗号进行分割. 在Drools中,日历的概念只是将日历属性 ...
- CUDA Samples: Julia
以下CUDA sample是分别用C++和CUDA实现的绘制Julia集曲线,并对其中使用到的CUDA函数进行了解说,code参考了<GPU高性能编程CUDA实战>一书的第四章,各个文件内 ...
- BASE理论
BASE是Basiclly Available(基本可用),Soft state(软状态),Eventually consistent(最终一致性)三个短语的缩写. BASE是对CAP中一致性和可用性 ...
- WIP - Study Perf (by quqi99)
版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 (http://blog.csdn.net/quqi99) Perf Flame Graph sudo perf ...