<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="${ctx}/styles/jquery-ui.css" />
	<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 1px;
}
</style>
</head>
<body>
	<div class="header-title table">
		<div class="cell reCell">
			<h1>报表展示</h1>
		</div>
		<ul>
			<li>
				<button type="button" id="export" name="export" title="导出"></button>
			</li>
		</ul>
	</div>
	<div class="table-forms-container reports clearfix">
		<div class="reports-cell">
			<div class="dashbrd-widget2">
				<div class="body">
					<ul class="dashbrd-ul">
						<li><a href="${ctx}/report/abnormalAlarm.php"><span
								class="iconfont icon-gaojingxinxi"></span><label>异常告警报表</label></a></li>
						<li><a href="${ctx}/report/responseTime.php"><span
								class="iconfont icon-iconxiangying"></span><label>响应时间报表</label></a></li>
						<li><a href="${ctx}/report/icmppingLoss.php"><span
								class="iconfont icon-youjianbaoguo"></span><label>丢包率报表</label></a></li>
						<li><a href="${ctx}/report/cpuUsageRate.php"><span
								class="iconfont icon-cpu"></span><label>CPU使用率报表</label></a></li>
						<li><a href="${ctx}/report/memoryUsageRate.php"><span
								class="iconfont icon-neicun"></span><label>内存使用率报表</label></a></li>
						<li><a href="${ctx}/report/diskUsageRate.php"><span
								class="iconfont icon-xunicipanxuanzhong"></span><label>磁盘利用率报表</label></a></li>
						<li><a href="${ctx}/report/interfaceIncoming.php"><span
								class="iconfont icon-xitongjiekou"></span><label>接口的流入流量报表</label></a></li>
						<li class="current"><a
							href="${ctx}/report/interfaceOutgoing.php"><span
								class="iconfont icon-kaifangjiekou"></span><label>接口的流出流量报表</label></a></li>
					</ul>
				</div>
			</div>
		</div>

		<div class="reports-cell">
			<div class="dashbrd-widget3 margin-w cell-has-line">
				<!-- <div class="dashbrd-widget-head dashbrd-widget-head-hasbtn dashbrd-widget-head-nobg">
							<h4>接口的流出流量报表</h4>
							<ul>
								<li><button type="button" id="export" name="export" value="导出">导出</button></li>
							</ul>
						</div> -->
				<div class="body">
					<div class="body-count">
						<div class="countTime">
							<select autocomplete="off" id="selectHostGroup"
								onchange="getconfirm()">
							</select> <select autocomplete="off" id="selectTopNum"
								onchange="getconfirm()">
								<option value="0" selected="selected">Top 5</option>
								<option value="1">Top 10</option>
								<option value="2">Top 15</option>
							</select>
							<ul class="radio-segmented">
								<li class="lightenblue-bg"><input type="radio"
									id="severity_min_0" name="severity_min" value="0"
									checked="checked" onchange="getconfirm()"> <label
									for="severity_min_0">最近24小时</label></li>
								<li class="lightenblue-bg">
								<li class="lightenblue-bg"><input type="radio"
									id="severity_min_1" name="severity_min" value="1"
									onchange="getconfirm()"> <label for="severity_min_1">最近7天</label>
								</li>
								<li class="lightenblue-bg"><input type="radio"
									id="severity_min_2" name="severity_min" value="2"
									onchange="getconfirm()"> <label for="severity_min_2">最近30天</label>
								</li>
								<li class="lightenblue-bg"><input type="radio"
									id="severity_min_3" name="severity_min" value="3"
									onchange="getconfirm()"> <label for="severity_min_3">最近3个月</label>
								</li>
								<li class="lightenblue-bg"><input type="radio"
									id="severity_min_4" name="severity_min" value="3"
									onclick="customTime()"> <label for="severity_min_4">自定义</label>
								</li>
								<li class="lightenblue-bg datepicker"><input
									id="datepicker_from" name="minDate" class="custom-date"
									disabled="disabled"></li>
								<span class="font">到</span>
								<li class="lightenblue-bg datepicker"><input
									id="datepicker_to" name="maxDate" class="custom-date"
									disabled="disabled"></li>
							</ul>
							<!-- <button type="button" id="confirm" name="confirm" value="确定">确定</button> -->
						</div>
						<!-- <div class="body-div">
								<ul class="radio-segmented">
								    <li class="lightenblue-bg">
										<input type="radio" id="severity_min_0" name="severity_min" value="0" checked="checked">
										<label for="severity_min_0">最近24小时</label>
									</li><li class="lightenblue-bg">
									<li class="lightenblue-bg">
										<input type="radio" id="severity_min_1" name="severity_min" value="1">
										<label for="severity_min_1">最近7天</label>
									</li><li class="lightenblue-bg">
										<input type="radio" id="severity_min_2" name="severity_min" value="2">
										<label for="severity_min_2">最近30天</label>
									</li><li class="lightenblue-bg">
										<input type="radio" id="severity_min_3" name="severity_min" value="3">
										<label for="severity_min_3">最近3个月</label>
									</li>
								</ul>
								<select autocomplete="off" id="selectHostGroup">
								</select>
								<select autocomplete="off" id="selectTopNum">
									<option value="0" selected="selected">Top 5</option>
									<option value="1">Top 10</option>
									<option value="2">Top 15</option>
								</select>
								<button type="button" id="confirm" name="confirm" value="确定">确定</button> -->
					</div>
					<div class="clearfix">
						<div id="container"
							style="float: left; height: 400px; width: 50%;"></div>
						<div id="lowContainer"
							style="float: left; height: 400px; width: 50%;"></div>
					</div>
					<div class="dashbrd-widget-head dashbrd-widget-head-nobg">

						<c:set var="accuracy"
							value="${highInterfaceIncomingReport[status.index+1].accuracy}" />
						<%-- <c:out value="${multicycleHighInterfaceIncomingReports[status.index+1].accuracy}" escapeXml="false"></c:out><br/> --%>
						<c:if test="${Mbps == accuracy}">
							<h4 id="highTopNum">最高流出流量Top${topNum}数据汇总(Mbps)</h4>
							<script type="text/javascript"> var topOutgoing = "Mbps" </script>
						</c:if>
						<c:if test="${Kbps != accuracy}">
							<h4 id="highTopNum">最高流入流量Top${topNum}数据汇总(Kbps)</h4>
						</c:if>
						<c:if test="${Kbps != accuracy}">
							<h4 id="highTopNum">最高流入流量Top${topNum}数据汇总(bps)</h4>
						</c:if>
					</div>
					<div class="body">
						<div>
							<table class="list-table">
								<thead>
									<tr>
										<th rowspan="2" style="padding:3px 5px;">主机名:接口</th>
										<th rowspan="2" style="padding:3px 5px">主机组</th>
										<th colspan="3" style="padding:3px 5px;text-align:center">本周期</th>
										<th colspan="3" style="padding:3px 5px;text-align:center">上周期</th>
									</tr>
									<tr>
										<th>平均值</th>
										<th>峰值</th>
										<th>谷值</th>
										<th>平均值</th>
										<th>峰值</th>
										<th>谷值</th>
									</tr>
								</thead>
								<tbody id="highInterfaceOutgoing">
									<c:forEach items="${multicycleHighInterfaceOutgoingReports}"
										begin="0" step="2" varStatus="status">
										<tr>
											<td>${multicycleHighInterfaceOutgoingReports[status.index].hname}
												:
												${multicycleHighInterfaceOutgoingReports[status.index].itemName}</td>
											<td>${multicycleHighInterfaceOutgoingReports[status.index].name}</td>
											<td><fmt:formatNumber
													value="${multicycleHighInterfaceOutgoingReports[status.index].valueAvg}"
													pattern="#.00" type="number" /></td>
											<td><fmt:formatNumber
													value="${multicycleHighInterfaceOutgoingReports[status.index].valueMax}"
													pattern="#.00" type="number" /></td>													
											<td><fmt:formatNumber
													value="${multicycleHighInterfaceOutgoingReports[status.index].valueMin}"
													pattern="#.00" type="number" /></td>													
											<c:if
												test="${empty multicycleHighInterfaceOutgoingReports[status.index+1]}">
												<td>/</td>
											</c:if>
											<c:if
												test="${!empty multicycleHighInterfaceOutgoingReports[status.index+1]}">
												<td><fmt:formatNumber
														value="${multicycleHighInterfaceOutgoingReports[status.index+1].valueAvg}"
														pattern="#.00" type="number" /></td>
											</c:if>

											<c:if
												test="${empty multicycleHighInterfaceOutgoingReports[status.index+1]}">
												<td>/</td>
											</c:if>
											<c:if
												test="${!empty multicycleHighInterfaceOutgoingReports[status.index+1]}">
												<td><fmt:formatNumber
														value="${multicycleHighInterfaceOutgoingReports[status.index+1].valueMax}"
														pattern="#.00" type="number" /></td>
											</c:if>

											<c:if
												test="${empty multicycleHighInterfaceOutgoingReports[status.index+1]}">
												<td>/</td>
											</c:if>
											<c:if
												test="${!empty multicycleHighInterfaceOutgoingReports[status.index+1]}">
												<td><fmt:formatNumber
														value="${multicycleHighInterfaceOutgoingReports[status.index+1].valueMin}"
														pattern="#.00" type="number" /></td>
											</c:if>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>

					<div class="dashbrd-widget-head dashbrd-widget-head-nobg">

						<c:set var="accuracy3"
							value="${lowInterfaceIncomingReports[status.index+1].accuracy}" />
						<c:if test="${'Kbps' == accuracy3}">
							<h4 id="lowTopNum">最低流出流量Top${topNum}数据汇总(Kbps)</h4>
						</c:if>

						<c:if test="${accuracy3 != 'Kbps'}">
							<script type="text/javascript"> var lowOutgoing = "bps" </script>
							<h4 id="lowTopNum">最低流入流量Top${topNum}数据汇总(bps)</h4>
						</c:if>


					</div>
					<div class="body">
						<div>
							<table class="list-table">
								<thead>
									<tr>
										<th rowspan="2" style="padding:3px 5px;">主机名:接口</th>
										<th rowspan="2" style="padding:3px 5px">主机组</th>
										<th colspan="3" style="padding:3px 5px;text-align:center">本周期</th>
										<th colspan="3" style="padding:3px 5px;text-align:center">上周期</th>
									</tr>
									<tr>
										<th>平均值</th>
										<th>峰值</th>
										<th>谷值</th>
										<th>平均值</th>
										<th>峰值</th>
										<th>谷值</th>
									</tr>
								</thead>
								<tbody id="lowInterfaceOutgoing">
									<c:forEach items="${multicycleLowInterfaceOutgoingReports}"
										begin="0" step="2" varStatus="status">
										<tr>
											<td>${multicycleLowInterfaceOutgoingReports[status.index].hname}
												:
												${multicycleLowInterfaceOutgoingReports[status.index].itemName}</td>
											<td>${multicycleLowInterfaceOutgoingReports[status.index].name}</td>
											<td>${multicycleLowInterfaceOutgoingReports[status.index].valueAvg}</td>
											<td>${multicycleLowInterfaceOutgoingReports[status.index].valueMax}</td>
											<td>${multicycleLowInterfaceOutgoingReports[status.index].valueMin}</td>
											
											
											<c:if
												test="${empty multicycleLowInterfaceOutgoingReports[status.index+1]}">
												<td>/</td>
											</c:if>
											<c:if
												test="${!empty multicycleLowInterfaceOutgoingReports[status.index+1]}">
												<td>${multicycleLowInterfaceOutgoingReports[status.index+1].valueAvg}</td>
											</c:if>
											<c:if
												test="${empty multicycleLowInterfaceOutgoingReports[status.index+1]}">
												<td>/</td>
											</c:if>
											<c:if
												test="${!empty multicycleLowInterfaceOutgoingReports[status.index+1]}">
												<td>${multicycleLowInterfaceOutgoingReports[status.index+1].valueMax}</td>
											</c:if>
											<c:if
												test="${empty multicycleLowInterfaceOutgoingReports[status.index+1]}">
												<td>/</td>
											</c:if>
											<c:if
												test="${!empty multicycleLowInterfaceOutgoingReports[status.index+1]}">
												<td>${multicycleLowInterfaceOutgoingReports[status.index+1].valueMin}</td>
											</c:if>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="${ctx}/js/vendors/jquery-ui.js"></script>
	<script src="${ctx}/js/vendors/jquery-datepicker-zh.js"></script>
	<script type="text/javascript">
jQuery('#reports').addClass('selected');
jQuery('#sub_reports').show().find('li:first-child a').addClass('selected');
var TopOutgoingAccuracy = topOutgoing;
var LowOutgoingAccuracy = lowOutgoing;
var highXtext = [];
var lowXtext = [];
var highData = [];
var lowData = [];
var topNum;
var highaccuracy;
var date = new Date(),timeValue=[],maxTime=[];
timeValue.push(date.getFullYear()-1);
timeValue.push(date.getMonth()+1);
timeValue.push(date.getDate());
var minDate = timeValue.join("-");
maxTime.push(date.getFullYear());
maxTime.push(date.getMonth()+1);
maxTime.push(date.getDate());
var maxDate = maxTime.join("-");
jQuery("#datepicker_from").datepicker({
	 defaultDate: new Date() ,
     changeMonth: true,
     numberOfMonths:1,
     changeMonth: true,
     changeYear: true,
     dateFormat:"yy-mm-dd"
}).on( "change", function() {
	jQuery("#datepicker_to").datepicker( "option", "minDate", this.value );
	getconfirm();
});
jQuery("#datepicker_from").datepicker( "option", "minDate", minDate );
jQuery("#datepicker_from").datepicker( "option", "maxDate", maxDate );
jQuery("#datepicker_to").datepicker({
	 defaultDate: new Date() ,
     changeMonth: true,
     numberOfMonths: 1,
     changeMonth: true,
     changeYear: true,
     dateFormat:"yy-mm-dd"
}).on( "change", function() {
	jQuery("#datepicker_from").datepicker( "option", "maxDate", this.value );
	getconfirm();
});
jQuery("#datepicker_to").datepicker( "option", "maxDate", maxDate );
jQuery("#datepicker_to").datepicker( "option", "minDate", minDate );
//处理主机组下拉框信息
function dealGroupInfo() {
	var group = jQuery("#selectHostGroup").val();
	if(group == '所有主机组') {
		group = "1 = 1";
	} else {
		group = "g.name = '" + group + "'";
	}
	return group;
}
function customTime(){
  	/* if(jQuery(".radio-segmented li.datepicker").hasClass("isShow")){
  		jQuery(".radio-segmented li.datepicker").removeClass("isShow");
  		jQuery(".radio-segmented span.font").removeClass("isShow");
  	}else{
  		jQuery(".radio-segmented li.datepicker").addClass("isShow");
  		jQuery(".radio-segmented span.font").addClass("isShow");
  	} */
	var inputTime=jQuery(".radio-segmented li.datepicker").find('input');
	inputTime.removeAttr("disabled");
}
//处理时间间隔下拉框信息
function dealIntervalInfo() {
	var interval = jQuery("input[name = 'severity_min']:checked ~ label").text();
	if(interval == '最近24小时') {
    	interval = 24;
    } else if(interval == '最近7天') {
    	interval = 7;
    } else if(interval == '最近30天') {
    	interval = 30;
    } else if(interval == '最近3个月'){
	    interval = 3;
    } else {
    	interval = 12;
    }
    return interval;
}

//处理topN下拉框信息
function dealTopNum() {
	topNum = jQuery("#selectTopNum :selected").val();
	if(topNum == 0) {
		topNum = 5;
	} else if(topNum == 1) {
		topNum = 10;
	} else {
  		topNum = 15;
	}
	return topNum;
}

function drawHighPicture() {
	topNum = dealTopNum();
	//alert(highaccuracy);
	var chart = new Highcharts.Chart({
		chart:{
			renderTo:'container',
			type:'bar' //显示类型 条形
		},
		credits:{
			enabled:false //去除版权信息
		},
		title:{
			text:'最高Top' + topNum + '流出流量' //图表的标题
		},
		exporting:{
			filename:'最高Top' + topNum + '流出流量'
		},
		xAxis: {
            type: 'category'
        },
		yAxis:{
			title:{
				text:'流出流量('+ highaccuracy +')'//Y轴的名称
			}
		},
		tooltip: {                              
        	headerFormat: '<div style="text-align: center">接口:{point.key}</div><br/>',
        },
		plotOptions: {
    		bar: {
               	dataLabels:{
                       enabled:true, 
                       stacking: 'column',
                       maxPointWidth: 100,
                       style : {
                           'fontSize' : '10.5px'
                       }
                   }
               },
            series: {
            	events: {
                	legendItemClick: function() {
                        return false;
                	}
            	}
        	}
        },
        legend:{
        	enabled:false
        },
		series:[{
			name: '接口的流出流量',
			color: '#f16d00',
   			data: highData
		}],
		navigation: {
            buttonOptions: {
                enabled: false
            }
        }
	});
}

function drawLowPicture() {
	topNum = dealTopNum();
	var chart = new Highcharts.Chart({
		chart:{
			renderTo:'lowContainer',
			type:'bar' //显示类型 条形
		},
		credits:{
			enabled:false //去除版权信息
		},
		title:{
			text:'最低Top' + topNum + '流出流量' //图表的标题  
		},
		exporting:{
    		filename:'最低Top' + topNum + '流出流量'
		},
		xAxis: {
            type: 'category'
        },
		yAxis:{
    		min: 0,
    		minRange: 0.0001,
			title:{
				text:'流出流量('+ LowOutgoingAccuracy +')'//Y轴的名称 
			}
		},
		tooltip: {                              
        	headerFormat: '<div style="text-align: center">接口:{point.key}</div><br/>',
        },
		plotOptions: {
    		bar: {
               	dataLabels:{
                       enabled:true, 
                       stacking: 'column',
                       maxPointWidth: 100,
                       style : {
                           'fontSize' : '10.5px'
                       }
                   }
               },
            series: {
            	events: {
                	legendItemClick: function() {
                        return false;
                	}
            	}
        	}
        },
        legend:{
        	enabled:false
        },
		series:[{
			name: '接口的流出流量',
    		color: '#026dc9',
			data: lowData
		}],
		navigation: {
            buttonOptions: {
                enabled: false
            }
        }
	});
}

//处理高磁盘使用率的数据
function dealHighData(group,interval,topNum,startDate,endDate) {
	if("" == startDate && "" == endDate || undefined == startDate && undefined == endDate|| 
			document.getElementById("severity_min_4").checked == false){
		jQuery.ajax({
			type:'post',
			url:"${ctx}/report/selectHighInterfaceOutgoingReport.json", //请求数据的地址
			async: false,
			data : {
				group : group,
				interval : interval,
				topNum : topNum
			},
			success:function(data){
				//typeof(data[0])!="undefined"
				//highaccuracy = data[0].accuracy;
				if(typeof(data[0])!="undefined"){
					highaccuracy = data[0].accuracy;
				}else{
					highaccuracy ="Kbps";
				}
				jQuery("#highTopNum").html("最高流出流量Top" + topNum + "数据汇总" + "("+ highaccuracy +")");
				for(var i=0;i<data.length;i++){
					p = new Object();   //考虑到横坐标会变化
					p.y = data[i].valueAvg;
	        		p.name = data[i].hname + ":" + data[i].itemName;
	        		highData.push(p);
				}
			},
			error:function(err){
				alert(err);
			}
		});
		return highData;
	}else{
		jQuery.ajax({
			type:'post',
			url:"${ctx}/report/selectHighInterfaceOutgoingReportByDate.json", //请求数据的地址
			async: false,
			data : {
				group : group,
				interval : interval,
				topNum : topNum,
				startDate: startDate,
		    	endDate: endDate
			},
			success:function(data){
				//highaccuracy = data[0].accuracy;
				if(typeof(data[0])!="undefined"){
					highaccuracy = data[0].accuracy;
				}else{
					highaccuracy ="Kbps";
				}
				jQuery("#highTopNum").html("最高流出流量Top" + topNum + "数据汇总" + "("+ highaccuracy +")");
				for(var i=0;i<data.length;i++){
					p = new Object();   //考虑到横坐标会变化
					p.y = data[i].valueAvg;
	        		p.name = data[i].hname + ":" + data[i].itemName;
	        		highData.push(p);
				}
			},
			error:function(err){
				alert(err);
			}
		});
		return highData;
	}

}

//处理低磁盘使用率的数据
function dealLowData(group,interval,topNum,startDate,endDate) {
	if("" == startDate && "" == endDate || undefined == startDate && undefined == endDate|| 
			document.getElementById("severity_min_4").checked == false){
		jQuery.ajax({
			type:'post',
			url:"${ctx}/report/selectLowInterfaceOutgoingReport.json", //请求数据的地址
			async: false,
			data : {
				group : group,
				interval : interval,
				topNum : topNum
			},
			success:function(data){
				for(var i=0;i<data.length;i++){
					p = new Object();   //考虑到横坐标会变化
					p.y = data[i].valueAvg;
	        		p.name = data[i].hname + ":" + data[i].itemName;
	        		lowData.push(p);
				}
			},
			error:function(err){
				alert(err);
			}
		});
		return lowData;
	}else{
		jQuery.ajax({
			type:'post',
			url:"${ctx}/report/selectLowInterfaceOutgoingReportByDate.json", //请求数据的地址
			async: false,
			data : {
				group : group,
				interval : interval,
				topNum : topNum,
				startDate: startDate,
		    	endDate: endDate
			},
			success:function(data){
				for(var i=0;i<data.length;i++){
					p = new Object();   //考虑到横坐标会变化
					p.y = data[i].valueAvg;
	        		p.name = data[i].hname + ":" + data[i].itemName;
	        		lowData.push(p);
				}
			},
			error:function(err){
				alert(err);
			}
		});
		return lowData;
	}

}

function del() {
	 var msg = "确认导出报表\n\n请确认！"; 
	 if (confirm(msg)==true){ 
	  return true; 
	 }else{ 
	  return false; 
	 }
}

//导出pdf
function exportPdf() {
	var filename = "接口的流出流量报表.pdf";
	var chart_line = jQuery("#container").highcharts();  
    var chart_pie = jQuery("#lowContainer").highcharts();  
    var svg_line = chart_line.getSVG();  
    var svg_pie = chart_pie.getSVG();  
    var svg = svg_line+"_,_"+svg_pie;  
    //$("#svg").val(svg);  
        var startDate = jQuery("input[name='minDate']").val();
	var endDate = jQuery("input[name='maxDate']").val();
	
	
    var a = del();
    if(a){
    jQuery.ajax({
		type:'post',
	    url:"${ctx}/report/interfaceOutgoingExport", //请求数据的地址
	    data : {
			svg : svg,   	
	    	group : dealGroupInfo(),
	    	interval : dealIntervalInfo(),
	    	topNum : dealTopNum(),
	    	filename : filename,
	    	startDate: startDate,
	    	endDate: endDate
	    },
	    success:function(data){
	    	window.location.href = "${ctx}/report/download?filename=" + filename;
        },
        error:function(err){
    		alert(err);
    	}
	});  
    }else{
    	return;
    }
}	

function getconfirm(){
	

	var hostGroup = '<option selected="selected">所有主机组</option>';
/* 	jQuery.ajax({
		type:'post',
		url:"${ctx}/report/selectAllHostGroups.json", //请求数据的地址
		data : null,
		success:function(data){
			for(var i=0;i<data.length;i++){
				hostGroup += '<option>' + data[i].name + '</option>';
			}
			jQuery("#selectHostGroup").html(hostGroup);
		}
	}); */

	//初始化相关数据
	var group = "1 = 1";
	var interval = 24;
	var topNum = 5;
	highData = dealHighData(group,interval,topNum);
	drawHighPicture();

	lowData = dealLowData(group,interval,topNum);
	drawLowPicture();


	jQuery(".dashbrd-ul>li").click(function(e) {
		var href = jQuery(e.target).children("a").attr("href") || jQuery(e.target).parent("a").attr("href");;
		if(href){
			window.location.href = href;
		}
    })
    var startInput=jQuery("input[name='minDate']");
		var endInput=jQuery("input[name='maxDate']");
		group = dealGroupInfo();
		interval = dealIntervalInfo();
		topNum = dealTopNum();
		
		//jQuery("#highTopNum").html("最高流出流量Top" + topNum + "数据汇总");
		//jQuery("#lowTopNum").html("最低流出流量Top" + topNum + "数据汇总");
/* 		var startDate = jQuery("input[name='minDate']").val();
		var endDate = jQuery("input[name='maxDate']").val(); */
		
		highData = [];  //清除数据
		var startDate = startInput.val();
		var endDate = endInput.val();
		var firstLine=startDate.substring(4,5);
		var secondLine=endDate.substring(4,5);
		var flug=startInput.attr('disabled');
		if(flug!='disabled'){
			if(firstLine!='-'&&secondLine!=='-'){
    			startInput.val(" ");
        		endInput.val(" ");
    			alert('请输入正确格式日期');
    			return;
    		}
		}
		highData = dealHighData(group,interval,topNum,startDate,endDate);
		drawHighPicture();

		lowData = [];  //清除之前存在的数据
		lowData = dealLowData(group,interval,topNum,startDate,endDate);
		drawLowPicture();



		if("" == startDate && "" == endDate || undefined == startDate && undefined == endDate|| 
				document.getElementById("severity_min_4").checked == false){
			jQuery.ajax({
				type:'post',
				url:"${ctx}/report/selectMulticycleHighInterfaceOutgoingReport.json", //请求数据的地址
				data : {
					group : dealGroupInfo(),
	    			interval : dealIntervalInfo(),
					topNum : dealTopNum()
				},
				success:function(data){
			
						//var accuracy = data[0].accuracy;
					if(typeof(data[0])!="undefined"){
						var accuracy = data[0].accuracy;
					}else{
						var accuracy ="Kbps";
					}
					//alert(accuracy);
					jQuery("#highTopNum").html("最高流出流量Top" + topNum + "数据汇总" + "("+ accuracy +")");
					var length = data.length;
					jQuery("#highInterfaceOutgoing tr").remove();
					var tr = "";
					for(var i = 0;i < length;i=i+2) {			    		
			    		tr += "<tr>"
		    			tr += "<td>" + data[i].hname + ":" +  data[i].itemName + "</td>";
		    			tr += "<td>" + data[i].name + "</td>";
		    			tr += "<td>" + data[i].valueAvg + "</td>";
		    			tr += "<td>" + data[i].valueMax + "</td>";
		    			tr += "<td>" + data[i].valueMin + "</td>";

		    			
		    			if(data[i+1] == null) {			    			
		    				tr += "<td>/ </td>";
		    			} else {
		    				tr += "<td>" + data[i+1].valueAvg + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
			    			tr += "<td>/</td>";
		    			} else {
			    			tr += "<td>" + data[i+1].valueMax + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
		    		    	tr += "<td>/</td>";
				    	} else {
					    	tr += "<td>" + data[i+1].valueMin + "</td>";
		    			}
		    			tr += "</tr>"
					} 
					jQuery("#highInterfaceOutgoing").append(tr);
				},
				error:function(err){
					alert(err);
				}
			});
		}else{
			jQuery.ajax({
				type:'post',
				url:"${ctx}/report/selectMulticycleHighInterfaceOutgoingReportByDate.json", //请求数据的地址
				data : {
					group : dealGroupInfo(),
	    			interval : dealIntervalInfo(),
					topNum : dealTopNum(),
					startDate: startDate,
			    	endDate: endDate
				},
				success:function(data){
					if(typeof(data[0])!="undefined"){
						var accuracy = data[0].accuracy;
					}else{
						var accuracy ="Kbps";
					}
					//alert(accuracy);
					jQuery("#highTopNum").html("最高流出流量Top" + topNum + "数据汇总" + "("+ accuracy +")");
					var length = data.length;
					jQuery("#highInterfaceOutgoing tr").remove();
					var tr = "";
					for(var i = 0;i < length;i=i+2) {			    		
			    		tr += "<tr>"
		    			tr += "<td>" + data[i].hname + ":" +  data[i].itemName + "</td>";
		    			tr += "<td>" + data[i].name + "</td>";
		    			tr += "<td>" + data[i].valueAvg + "</td>";
		    			tr += "<td>" + data[i].valueMax + "</td>";
		    			tr += "<td>" + data[i].valueMin + "</td>";

		    			
		    			if(data[i+1] == null) {			    			
		    				tr += "<td>/ </td>";
		    			} else {
		    				tr += "<td>" + data[i+1].valueAvg + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
			    			tr += "<td>/</td>";
		    			} else {
			    			tr += "<td>" + data[i+1].valueMax + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
		    		    	tr += "<td>/</td>";
				    	} else {
					    	tr += "<td>" + data[i+1].valueMin + "</td>";
		    			}
		    			tr += "</tr>"
					} 
					jQuery("#highInterfaceOutgoing").append(tr);
				},
				error:function(err){
					alert(err);
				}
			});
		}

		
		if("" == startDate && "" == endDate || undefined == startDate && undefined == endDate|| 
				document.getElementById("severity_min_4").checked == false){
			jQuery.ajax({
				type:'post',
				url:"${ctx}/report/selectMulticycleLowInterfaceOutgoingReport.json", //请求数据的地址
				data : {
					group : dealGroupInfo(),
	    			interval : dealIntervalInfo(),
					topNum : dealTopNum()
				},
				success:function(data){
					//var accuracy = data[0].accuracy;
					if(typeof(data[0])!="undefined"){
						var accuracy = data[0].accuracy;
					}else{
						var accuracy = "bps";
					}
					//alert(accuracy);
					jQuery("#lowTopNum").html("最低流出流量Top" + topNum + "数据汇总" + "("+ accuracy +")");
					var length = data.length;
					jQuery("#lowInterfaceOutgoing tr").remove();
					var tr = "";
					for(var i = 0;i < length;i=i+2) {			    		
			    		tr += "<tr>"
		    			tr += "<td>" + data[i].hname + ":" +  data[i].itemName + "</td>";
		    			tr += "<td>" + data[i].name + "</td>";
		    			tr += "<td>" + data[i].valueAvg + "</td>";
		    			tr += "<td>" + data[i].valueMax + "</td>";
		    			tr += "<td>" + data[i].valueMin + "</td>";

		    			
		    			if(data[i+1] == null) {			    			
		    				tr += "<td>/</td>";
		    			} else {
		    				tr += "<td>" + data[i+1].valueAvg + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
			    			tr += "<td>/</td>";
		    			} else {
			    			tr += "<td>" + data[i+1].valueMax + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
		    		    	tr += "<td>/</td>";
				    	} else {
					    	tr += "<td>" + data[i+1].valueMin + "</td>";
		    			}
		    			tr += "</tr>"
					} 
					jQuery("#lowInterfaceOutgoing").append(tr);
				},
				error:function(err){
					alert(err);
				}
			});
		}else{
			jQuery.ajax({
				type:'post',
				url:"${ctx}/report/selectMulticycleLowInterfaceOutgoingReportByDate.json", //请求数据的地址
				data : {
					group : dealGroupInfo(),
	    			interval : dealIntervalInfo(),
					topNum : dealTopNum(),
	    			startDate: startDate,
			    	endDate: endDate
				},
				success:function(data){
					//var accuracy = data[0].accuracy;
					if(typeof(data[0])!="undefined"){
						var accuracy = data[0].accuracy;
					}else{
						var accuracy ="bps";
					}
					//alert(accuracy);
					jQuery("#lowTopNum").html("最低流入流量Top" + topNum + "数据汇总" + "("+ accuracy +")");
					var length = data.length;
					jQuery("#lowInterfaceOutgoing tr").remove();
					var tr = "";
					for(var i = 0;i < length;i=i+2) {			    		
			    		tr += "<tr>"
		    			tr += "<td>" + data[i].hname + ":" +  data[i].itemName + "</td>";
		    			tr += "<td>" + data[i].name + "</td>";
		    			tr += "<td>" + data[i].valueAvg + "</td>";
		    			tr += "<td>" + data[i].valueMax + "</td>";
		    			tr += "<td>" + data[i].valueMin + "</td>";

		    			
		    			if(data[i+1] == null) {			    			
		    				tr += "<td>/</td>";
		    			} else {
		    				tr += "<td>" + data[i+1].valueAvg + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
			    			tr += "<td>/</td>";
		    			} else {
			    			tr += "<td>" + data[i+1].valueMax + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
		    		    	tr += "<td>/</td>";
				    	} else {
					    	tr += "<td>" + data[i+1].valueMin + "</td>";
		    			}
		    			tr += "</tr>"
					} 
					jQuery("#lowInterfaceOutgoing").append(tr);
				},
				error:function(err){
					alert(err);
				}
			});
		}
			
	jQuery('.lightenblue-bg').on('click','input',function(event){
		var lable=event.target;
		var lableObj=jQuery(lable).next().html();
		if(lableObj=='最近24小时'||lableObj=='最近7天'||lableObj=='最近30天'||lableObj=='最近3个月'){
			var inputTime=jQuery(".radio-segmented li.datepicker").find('input');
	    	inputTime.attr("disabled","disabled");
	    	startInput.val(" ");
    		endInput.val(" ");
		}
	});
	if(document.getElementById("severity_min_4").checked == false){
 	jQuery.ajax({
		type:'post',
		    url:"${ctx}/report/gettimeslot.json", 
		   data : {
			  interval : interval
			    },
		    success:function(data){

		    	var datafrom = data.stringList[0];
		    	var datato = data.stringList[1];
		    	jQuery("#datepicker_from").removeAttr("disabled").val(datafrom);
		 		jQuery("#datepicker_to").removeAttr("disabled").val(datato);
		 		jQuery("#datepicker_from").attr("disabled",true);
		 		jQuery("#datepicker_to").attr("disabled",true);
		    },
		    error:function(err){
				alert(err);
			}
		   
	       
	   }); 
	}
	
	
}

jQuery(function() {
	var hostGroup = '<option selected="selected">所有主机组</option>';
	jQuery.ajax({
		type:'post',
		url:"${ctx}/report/selectAllHostGroups.json", //请求数据的地址
		data : null,
		success:function(data){
			for(var i=0;i<data.length;i++){
				hostGroup += '<option>' + data[i].name + '</option>';
			}
			jQuery("#selectHostGroup").html(hostGroup);
		},
		error:function(err){
			alert(err);
		}
	});

	//初始化相关数据
	var group = "1 = 1";
	var interval = 24;
	var topNum = 5;
	highData = dealHighData(group,interval,topNum);
	drawHighPicture();

	lowData = dealLowData(group,interval,topNum);
	drawLowPicture();

	jQuery("#export").click(function(e) {
		exportPdf();
	});
	jQuery(".dashbrd-ul>li").click(function(e) {
		var href = jQuery(e.target).children("a").attr("href") || jQuery(e.target).parent("a").attr("href");;
		if(href){
			window.location.href = href;
		}
    })
    var startInput=jQuery("input[name='minDate']");
		var endInput=jQuery("input[name='maxDate']");
	jQuery("#confirm").click(function(e) {
		group = dealGroupInfo();
		interval = dealIntervalInfo();
		topNum = dealTopNum();
		
		//jQuery("#highTopNum").html("最高流出流量Top" + topNum + "数据汇总");
		//jQuery("#lowTopNum").html("最低流出流量Top" + topNum + "数据汇总");
/* 		var startDate = jQuery("input[name='minDate']").val();
		var endDate = jQuery("input[name='maxDate']").val(); */
		
		highData = [];  //清除数据
		var startDate = startInput.val();
		var endDate = endInput.val();
		var firstLine=startDate.substring(4,5);
		var secondLine=endDate.substring(4,5);
		var flug=startInput.attr('disabled');
		if(flug!='disabled'){
			if(firstLine!='-'&&secondLine!=='-'){
    			startInput.val(" ");
        		endInput.val(" ");
    			alert('请输入正确格式日期');
    			return;
    		}
		}
		highData = dealHighData(group,interval,topNum,startDate,endDate);
		drawHighPicture();

		lowData = [];  //清除之前存在的数据
		lowData = dealLowData(group,interval,topNum,startDate,endDate);
		drawLowPicture();



		if("" == startDate && "" == endDate || undefined == startDate && undefined == endDate|| 
				document.getElementById("severity_min_4").checked == false){
			jQuery.ajax({
				type:'post',
				url:"${ctx}/report/selectMulticycleHighInterfaceOutgoingReport.json", //请求数据的地址
				data : {
					group : dealGroupInfo(),
	    			interval : dealIntervalInfo(),
					topNum : dealTopNum()
				},
				success:function(data){
					//var accuracy = data[0].accuracy;
					if(typeof(data[0])){
						var accuracy = data[0].accuracy;
					}else{
						var accuracy = "Kbps";
					}
					//alert(accuracy);
					jQuery("#highTopNum").html("最高流出流量Top" + topNum + "数据汇总" + "("+ accuracy +")");
					var length = data.length;
					jQuery("#highInterfaceOutgoing tr").remove();
					var tr = "";
					for(var i = 0;i < length;i=i+2) {			    		
			    		tr += "<tr>"
		    			tr += "<td>" + data[i].hname + ":" +  data[i].itemName + "</td>";
		    			tr += "<td>" + data[i].name + "</td>";
		    			tr += "<td>" + data[i].valueAvg + "</td>";
		    			tr += "<td>" + data[i].valueMax + "</td>";
		    			tr += "<td>" + data[i].valueMin + "</td>";

		    			if(data[i+1] == null) {			    			
		    				tr += "<td>/ </td>";
		    			} else {
		    				tr += "<td>" + data[i+1].valueAvg + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
			    			tr += "<td>/</td>";
		    			} else {
			    			tr += "<td>" + data[i+1].valueMax + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
		    		    	tr += "<td>/</td>";
				    	} else {
					    	tr += "<td>" + data[i+1].valueMin + "</td>";
		    			}
		    			tr += "</tr>"
					} 
					jQuery("#highInterfaceOutgoing").append(tr);
				},
				error:function(err){
					alert(err);
				}
			});
		}else{
			jQuery.ajax({
				type:'post',
				url:"${ctx}/report/selectMulticycleHighInterfaceOutgoingReportByDate.json", //请求数据的地址
				data : {
					group : dealGroupInfo(),
	    			interval : dealIntervalInfo(),
					topNum : dealTopNum(),
					startDate: startDate,
			    	endDate: endDate
				},
				success:function(data){
					//var accuracy = data[0].accuracy;
					if(typeof(data[0])!="undefined"){
						var accuracy = data[0].accuracy; 
					}else{
						var accuracy = "Kbps";
					}
					//alert(accuracy);
					jQuery("#highTopNum").html("最高流出流量Top" + topNum + "数据汇总" + "("+ accuracy +")");
					var length = data.length;
					jQuery("#highInterfaceOutgoing tr").remove();
					var tr = "";
					for(var i = 0;i < length;i=i+2) {			    		
			    		tr += "<tr>"
		    			tr += "<td>" + data[i].hname + ":" +  data[i].itemName + "</td>";
		    			tr += "<td>" + data[i].name + "</td>";
		    			tr += "<td>" + data[i].valueAvg + "</td>";
		    			tr += "<td>" + data[i].valueMax + "</td>";
		    			tr += "<td>" + data[i].valueMin + "</td>";

		    			if(data[i+1] == null) {			    			
		    				tr += "<td>/ </td>";
		    			} else {
		    				tr += "<td>" + data[i+1].valueAvg + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
			    			tr += "<td>/</td>";
		    			} else {
			    			tr += "<td>" + data[i+1].valueMax + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
		    		    	tr += "<td>/</td>";
				    	} else {
					    	tr += "<td>" + data[i+1].valueMin + "</td>";
		    			}
		    			tr += "</tr>"
					} 
					jQuery("#highInterfaceOutgoing").append(tr);
				},
				error:function(err){
					alert(err);
				}
			});
		}

		
		if("" == startDate && "" == endDate || undefined == startDate && undefined == endDate|| 
				document.getElementById("severity_min_4").checked == false){
			jQuery.ajax({
				type:'post',
				url:"${ctx}/report/selectMulticycleLowInterfaceOutgoingReport.json", //请求数据的地址
				data : {
					group : dealGroupInfo(),
	    			interval : dealIntervalInfo(),
					topNum : dealTopNum()
				},
				success:function(data){
					//var accuracy = data[0].accuracy;
					if(typeof(data[0])!="undefined"){
						var accuracy = data[0].accuracy;
					}else{
						var accuracy = "bps";
					}
					//alert(accuracy);
					jQuery("#lowTopNum").html("最低流出流量Top" + topNum + "数据汇总" + "("+ accuracy +")");
					var length = data.length;
					jQuery("#lowInterfaceOutgoing tr").remove();
					var tr = "";
					for(var i = 0;i < length;i=i+2) {			    		
			    		tr += "<tr>"
		    			tr += "<td>" + data[i].hname + ":" +  data[i].itemName + "</td>";
		    			tr += "<td>" + data[i].name + "</td>";
		    			tr += "<td>" + data[i].valueAvg + "</td>";
		    			tr += "<td>" + data[i].valueMax + "</td>";
		    			tr += "<td>" + data[i].valueMin + "</td>";

		    			
		    			if(data[i+1] == null) {			    			
		    				tr += "<td>/</td>";
		    			} else {
		    				tr += "<td>" + data[i+1].valueAvg + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
			    			tr += "<td>/</td>";
		    			} else {
			    			tr += "<td>" + data[i+1].valueMax + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
		    		    	tr += "<td>/</td>";
				    	} else {
					    	tr += "<td>" + data[i+1].valueMin + "</td>";
		    			}
		    			tr += "</tr>"
					} 
					jQuery("#lowInterfaceOutgoing").append(tr);
				},
				error:function(err){
					alert(err);
				}
			});
		}else{
			jQuery.ajax({
				type:'post',
				url:"${ctx}/report/selectMulticycleLowInterfaceOutgoingReportByDate.json", //请求数据的地址
				data : {
					group : dealGroupInfo(),
	    			interval : dealIntervalInfo(),
					topNum : dealTopNum(),
	    			startDate: startDate,
			    	endDate: endDate
				},
				success:function(data){
					//var accuracy = data[0].accuracy;
					//alert(accuracy);
					if(typeof(data[0])!="undefined"){
						var accuracy = data[0];
					}else{
						var accuracy = "bps";
					}
					jQuery("#lowTopNum").html("最低流入流量Top" + topNum + "数据汇总" + "("+ accuracy +")");
					var length = data.length;
					jQuery("#lowInterfaceOutgoing tr").remove();
					var tr = "";
					for(var i = 0;i < length;i=i+2) {			    		
			    		tr += "<tr>"
		    			tr += "<td>" + data[i].hname + ":" +  data[i].itemName + "</td>";
		    			tr += "<td>" + data[i].name + "</td>";
		    			tr += "<td>" + data[i].valueAvg + "</td>";
		    			tr += "<td>" + data[i].valueMax + "</td>";
		    			tr += "<td>" + data[i].valueMin + "</td>";

		    			
		    			if(data[i+1] == null) {			    			
		    				tr += "<td>/</td>";
		    			} else {
		    				tr += "<td>" + data[i+1].valueAvg + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
			    			tr += "<td>/</td>";
		    			} else {
			    			tr += "<td>" + data[i+1].valueMax + "</td>";
		    			}
		    			if(data[i+1] == null) {			    			
		    		    	tr += "<td>/</td>";
				    	} else {
					    	tr += "<td>" + data[i+1].valueMin + "</td>";
		    			}
		    			tr += "</tr>"
					} 
					jQuery("#lowInterfaceOutgoing").append(tr);
				},
				error:function(err){
					alert(err);
				}
			});
		}
			

	});
	jQuery('.lightenblue-bg').on('click','input',function(event){
		var lable=event.target;
		var lableObj=jQuery(lable).next().html();
		if(lableObj=='最近24小时'||lableObj=='最近7天'||lableObj=='最近30天'||lableObj=='最近3个月'){
			var inputTime=jQuery(".radio-segmented li.datepicker").find('input');
	    	inputTime.attr("disabled","disabled");
	    	startInput.val(" ");
    		endInput.val(" ");
		}
	});
	
	jQuery.ajax({
		type:'post',
		    url:"${ctx}/report/gettimeslot.json", //请求数据的地址
		   data : {
			  interval : 24
			    },
		    success:function(data){

		    	var datafrom = data.stringList[0];
		    	var datato = data.stringList[1];
		    	jQuery("#datepicker_from").removeAttr("disabled").val(datafrom);
		 		jQuery("#datepicker_to").removeAttr("disabled").val(datato);
		 		jQuery("#datepicker_from").attr("disabled",true);
		 		jQuery("#datepicker_to").attr("disabled",true);
		    },
		    error:function(err){
				alert(err);
			}
		   
	       
	   });
});
</script>
</body>
</html>