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系统中各个阶段的工 ...
随机推荐
- int argc,char *argv[]
main()函数是操作系统调用的,argc表示传入参数的个数,argv[]表示传入的参数. argv[0]表示exe文件所在的路径,所以argc默认为1. main函数的参数是可以通过dos窗口传入, ...
- 解决方案:System.InvalidOperationException: 此实现不是 Windows 平台 FIPS 验证的加密算法的一部分。
System.InvalidOperationException: This implementation is not part of the Windows Platform FIPS valid ...
- APUE学习笔记——4.2结构体 struct stat 及其相关函数介绍
以下不少内容来自man手册 结构体struct stat 结构体struct stat用于保存文件相关的所有信息. struct stat的基本成员如下所示 struc ...
- CMD命令提示符下选中文字即可以复制和SecureCRT一样
用过 SecureCRT 的都会觉得复制粘贴很方便.只要选中相应文字,会自动复制.然后点鼠标右键就可以粘贴,非常方便. 但是在windows系统下的CMD里面,每次都要点鼠标右键→标记,再选中相应文字 ...
- 编写configure.ac
configure.ac由一些宏组成(如果已经有源代码,你可以运行autoscan来产生一个configure.scan文件,在此基础修改成configure.ac将更加方便) 最基本的组成可以是下面 ...
- H265 Profile & Level & Tier 介绍
H265/HEVC Profile Level Tier 档次.水平.等级 为了提供不同应用之间的兼容互通,HEVC/H265 定义了不同的编码 Profile 档次.Level 水平.Tier 等级 ...
- spinlock变量没有初始化
http://blog.csdn.net/longwang155069/article/details/52224284
- Device-Dependent Bitmaps (DDB) 设备相关位图
设备相关的位图(DDB)使用单一结构BITMAP结构描述.该结构的成员指定矩形区域的宽度和高度,以像素为单位;将条目从设备调色板映射到像素的数组的宽度;以及器件的颜色格式,在每个像素的颜色平面和位数方 ...
- iOS NSString相关问题
1.NSString对象的创建 // 1.创建不可变字符串 NSString *str1 = @"create string"; #pragma mark 对象方法创建字符串 // ...
- 使用LinkedBlockingQueue来实现生产者消费者的例子
工作中,经常有将文件中的数据导入数据库的表中,或者将数据库表中的记录保存到文件中.为了提高程序的处理速度,可以设置读线程和写线程,这些线程通过消息队列进行数据交互.本例就是使用了LinkedBlock ...