<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="cui" tagdir="/WEB-INF/tags"%>
<%@ page import="java.lang.Integer"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%
 com.cesgroup.cesmonitor.service.LoginUser user=com.cesgroup.cesmonitor.common.Util.getLoginUser();
 Integer myUserId = null;
if(null!=user){
	myUserId = user.getUserid();
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大屏展示1</title>
<!-- <META HTTP-EQUIV="Refresh" content="300"> -->
<link href="screenStyles/screen.css" rel="stylesheet">
</head>
<body>
	<div class="monitor-screen-box">
		<div class="monitor-screen-bg">
			<img src="screen/screen_bg.jpg" width="100%" height="100%">
		</div>
		<div class="monitor-screen-article clearfix">

			<div class="monitor-screen-cell" id="index-cell-1">

				<div class="clearfix" id="index-cell-mess-1">
					<div
						class="monitor-screen-cell-box monitor-message-cell lake-box monitorNodeNum">
						<span class="iconfont icon-zongxianjiedian"></span>
						<c:choose>
							<c:when test="${!empty MonitorNodeNum}">
								<h2>${MonitorNodeNum}</h2>
							</c:when>
							<c:otherwise>
								<h2>无数据</h2>
							</c:otherwise>
						</c:choose>
						<p>监控的主机数量</p>
					</div>

					<div
						class="monitor-screen-cell-box monitor-message-cell lake-box normalMonitorNodeNum">
						<span class="iconfont icon-zhengchang"></span>
						<c:choose>
							<c:when test="${!empty NormalMonitorNodeNum }">
								<h2>${NormalMonitorNodeNum }</h2>
							</c:when>
							<c:otherwise>
								<h2>无数据</h2>
							</c:otherwise>
						</c:choose>
						<p>正常状态主机数量</p>
					</div>

					<div
						class="monitor-screen-cell-box monitor-message-cell warning-box nonitorAlarmNum">
						<span class="iconfont icon-gaojingxinxi"></span>
						<c:choose>
							<c:when test="${!empty MonitorAlarmNum }">
								<h2>${MonitorAlarmNum }</h2>
							</c:when>
							<c:otherwise>
								<h2>无数据</h2>
							</c:otherwise>
						</c:choose>
						<p>监控告警数量</p>
					</div>

					<div
						class="monitor-screen-cell-box monitor-message-cell lake-box roomTemperature ">
						<span class="iconfont icon-wendu"></span>
						<h2>34℃</h2>
						<p>机房温度</p>
					</div>
				</div>

				<!-- 网络拓扑图 div  -->
				<div class="monitor-screen-cell-box" id="index-cell-box-1">
					<div class="monitor-screen-cell-head" id="index-cell-head-1">
						<h4>监控视图总览</h4>
						<span class="monitor-head-btns"> <span class="moreswith"
							id="selectRate" title="选择频率" onClick="selectRate(this,event);"><span
								id="rate" data-type='0'>30秒</span><label
								class="iconfont icon-arrow-down"></label></span>
						</span>
					</div>
					<!-- 拓扑图显示div -->
					<div class="monitor-screen-cell-body" id="index-cell-body-1">
						<div class="picScroll-left">
							<div class="hd">
								<ul></ul>
							</div>
							<a class="next iconfont icon-youyi"></a> <a
								class="prev iconfont icon-shangyi"></a>
								<!-- bd中拼接html,显示拓扑图  -->
							<div class="bd">
								<ul class="picList" id="picList"></ul>
							</div>
						</div>
					</div>
				</div>

			</div>

			<div class="monitor-screen-cell" id="index-cell-2">
				<div id="index-cell-box-2">
					<div class="monitor-screen-cell-box">
						<div class="monitor-screen-cell-head">
							<h4>网络流量分时动态</h4>
							<span class="monitor-head-btns"> <span class="moreswith"
								id="selectNetwork" title="交换机"
								onClick="selectNetwork(this,event);"><span id="hexinPc">${host}</span><label
									class="iconfont icon-arrow-down"></label></span> <span
								class="moreswith" id="selectLiuliang" title="流量"
								onClick="selectLiuliang(this,event);"><span id="liuLiang">${interfaceName}</span><label
									class="iconfont icon-arrow-down"></label></span> <span
								class="moreswith" id="selectTime" title="选择时间"
								onClick="selectTime(this,event);"><span id="time">1分</span>
									<label class="iconfont icon-arrow-down"></label></span>
							</span>
						</div>
						<div class="monitor-screen-cell-body">
							<div id="container-networkTraffic" style="height: 250px"></div>
						</div>
					</div>
				</div>

				<div class="monitor-screen-row clearfix" id="index-row-1">
					<div class="monitor-screen-cell width50" id="indx-row-cell-1">
						<div class="monitor-screen-cell-box">
							<div class="monitor-screen-cell-head" id="indx-row-cell-head-1">
								<h4>业务可用性</h4>
								<span class="monitor-head-btns"> <span class="moreswith"
									id="selectDays" title="选择时间" onClick="selectDays(this,event);"><span
										id="days" data-type='0'>今天</span><label
										class="iconfont icon-arrow-down"></label></span>
								</span>
							</div>
							<div class="monitor-screen-cell-body" id="indx-row-cell-body-1">
								<div id="container-business"></div>
							</div>
						</div>
					</div>

					<div class="monitor-screen-cell width50" id="indx-row-cell-2">
						<div class="monitor-screen-cell-box">
							<div class="monitor-screen-cell-head" id="indx-row-cell-head-2">
								<h4>监控告警列表</h4>
							</div>
							<div class="monitor-screen-cell-body" id="indx-row-cell-body-2">
								<div class="monitor-region txtScroll-top">
									<div class="hd">
										<ul></ul>
										<span class="pageState"></span>
									</div>
									<a class="next iconfont icon-arrow-down"></a> <a
										class="prev iconfont icon-arrow"></a>
									<div class="bd">
										<ul class="monitor-list-ul" id="monitorList">
											<c:choose>
												<c:when test="${!empty MonitorAlarmList }">
													<c:forEach items="${MonitorAlarmList}" var="alarmList">
														<li>
															<table>
																<tr>
																	<td width="10px"><span class="lake-color">${alarmList.number }</span></td>
																	<td>
																		<h1 class="lake-color">${alarmList.host}</h1>
																		<p class="white-color">${alarmList.description}</p>
																	</td>
																	<td width="40px" align="right"><c:if
																			test="${alarmList.priority==4 }">
																			<span class="orange-color">严重</span>
																		</c:if> <c:if test="${alarmList.priority==5 }">
																			<span class="orange-color">灾难</span>
																		</c:if></td>
																</tr>
															</table>
														</li>
													</c:forEach>
												</c:when>
												<c:otherwise>
													<li><font color="white" class="white"
														style="margin-left: -63px">未发生告警</font></li>
												</c:otherwise>
											</c:choose>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>
	</div>
	<script src="js/jquery.1.10.1.min.js"></script>
	<script src="js/highcharts.js"></script>
	<script src="js/jquery.SuperSlide.2.1.2.js"></script>
	<script>
var monitorListWidth,monitorListRegion;
var visnumber;
var userId = "<%= myUserId %>"
var refreshTime = getUserRefresh();
jQuery(document).ready(function() {
	initHeight();
	loadNetWorkTraffic2();
	refreshLoadUseAbilty();
	//loadUseAbilty();
	refreshLoadSlide();
	visnumber = parseInt(jQuery('.txtScroll-top').height() / jQuery('#monitorList li').outerHeight()) + 1;
	jQuery(".txtScroll-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:visnumber,interTime:50,trigger:"click"});
});



var time = setInterval(function(){
	/* rerfreshPage(); */
	loadNetWorkTraffic2();
	refreshLoadUseAbilty();
//	loadUseAbilty();
	refreshLoadSlide();
	refreshMonitorList();
	/* jQuery(".txtScroll-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:visnumber,interTime:50,trigger:"click"}); */
},refreshTime);




//高度自适应
//不包含margin
function initHeight(){
	var indexcellboxoneheight = $('#index-cell-1').height() - $('#index-cell-mess-1').outerHeight();
	var indexcellbodyoneheight = indexcellboxoneheight - $('#index-cell-head-1').outerHeight();
	var indexrowoneheight = $('#index-cell-2').height() - $('#index-cell-box-2').outerHeight();
	var indexrowcellbodyoneheight = indexrowoneheight - $('#indx-row-cell-head-1').outerHeight();
	var indexrowcellbodytwoheight = indexrowoneheight - $('#indx-row-cell-head-2').outerHeight();
		monitorListWidth = $('#monitorList').height();
		monitorListRegion = indexrowcellbodytwoheight;
	$('#index-cell-box-1').height(indexcellboxoneheight);
	$('#index-cell-body-1,.picScroll-left img,.picScroll-left iframe').height(indexcellbodyoneheight);
	$('#index-row-1').height(indexrowoneheight);
	$('#indx-row-cell-body-1').height(indexrowcellbodyoneheight);
	$('#indx-row-cell-body-2').height(indexrowcellbodytwoheight);
}

$(window).resize(function(){
	initHeight();
});
//selectRate
function selectRate(obj,event){
	event.stopPropagation();
 	var id = jQuery(obj).attr('id');
 	var data = [{
 		'key':0,
 		'name':'30秒'
 	},{
 		'key':1,
 		'name':'1分钟'
 	},
 	{
 		'key':2,
 		'name':'2分钟'
 	},
 	{
 		'key':3,
 		'name':'10分钟'
 	},{
 		'key':4,
 		'name':'15分钟'
 	}];
 	var popObj = jQuery('#' + id + '_popup');
 	jQuery('.action-menu').hide();
 	if(popObj.length >= 1){
 		popObj.show();
 	}else{
 		popup(obj,data);
 	}
};
//selectNetwork
function selectNetwork(obj,event){
	event.stopPropagation();
 	var id = jQuery(obj).attr('id');
 	var data = [];
 	jQuery.ajax({
		method:"POST",
		url:"${ctx}/screen/selectChangeHost.json",
		data:null,
		success:function(msg){
			for(var i=0;i<msg.length;i++){
				p=new Object();
				p.key = msg[i].host;
				p.name = msg[i].host;
				data.push(p);
			}
			
			//test code
			/* p = new Object();
			p.key = '192.168.20.110';
			p.name = '192.168.20.110';
			data.push(p); */
			
			var popObj = jQuery('#' + id + '_popup');
		 	jQuery('.action-menu').hide();
		 	if(popObj.length >= 1){
		 		popObj.show();
		 	}else{
		 		popup(obj,data);
		 	}
		},
		error:function(err){
			alert(err);
		}
	});
 
};
//selectLiuliang
function selectLiuliang(obj,event){
	event.stopPropagation();
 	var id = jQuery(obj).attr('id');
 	var name = jQuery('#selectNetwork_popup li .selected').attr('value');
 	if(typeof(name) === "undefined") {
 		name = jQuery("#hexinPc").html();
 	}
	jQuery.ajax({
		method:"POST",
		url:"${ctx}/screen/selectInterfaceByHost.json",
		data:{
			name:name
		},
		success:function(msg){
			var data = [];
			for(var i=0;i<msg.length;i++){
				p=new Object();
				p.key = msg[i].itemName;
				p.name = msg[i].itemName;
				data.push(p);
			}
			jQuery('.action-menu').hide();
			var popObj = jQuery('#' + id + '_popup');
			if(popObj.length){
				jQuery('#' + id + '_popup').remove();
			}
		 	if(data.length > 0) {
		 		popup(obj,data,"liuliang");
		 		popObj.show();
		 	} else {
		 		jQuery("#liuLiang").html('无相关接口');
		 	}
		},
		error:function(err){
			alert(err);
		}
	});
}

//selectTime
function selectTime(obj,event){
	event.stopPropagation();
 	var id = jQuery(obj).attr('id');
 	var data = [{
 		'key':1,
 		'name':'1分'
 	},{
 		'key':2,
 		'name':'2分'
 	},
 	{
 		'key':5,
 		'name':'5分',
 		'selected':true
 	},
 	{
 		'key':10,
 		'name':'10分'
 	},{
 		'key':15,
 		'name':'15分'
 	}];
 	var popObj = jQuery('#' + id + '_popup');
 	jQuery('.action-menu').hide();
 	if(popObj.length >= 1){
 		popObj.show();
 	}else{
 		popup(obj,data,"time");
 	}
}
//selectDays
function selectDays(obj,event){
 	event.stopPropagation();
 	var id = jQuery(obj).attr('id');
 	var data = [{
 		'key':0,
 		'name':'今天'
 	},{
 		'key':1,
 		'name':'本周'
 	},
 	{
 		'key':2,
 		'name':'本月'
 	},
 	{
 		'key':3,
 		'name':'本年'
 	},{
 		'key':4,
 		'name':'最近24小时'
 	},
 	{
 		'key':5,
 		'name':'最近7天'
 	},{
 		'key':6,
 		'name':'最近30天'
 	},
 	{
 		'key':7,
 		'name':'最近365天'
 	}];
 	var popObj = jQuery('#' + id + '_popup');
 	jQuery('.action-menu').hide();
 	if(popObj.length >= 1){
 		popObj.show();
 	}else{
 		popup(obj,data);
 	}
}
function popup(obj,data,type){
	var id = jQuery(obj).attr('id');
	var htmlLi= '';
	var left = jQuery(obj).offset().left;
	var top = jQuery(obj).offset().top + 35;
	if(type == "time"){
		var html = '<ul class="action-menu action-menu-top" style="right:10px;top:'+top+'px;" id="'+id+'_popup">'
		+ '</ul>';
	}else if(type == "liuliang"){
		var html = '<div class="liuliang" style="left:'+(left-30)+'px;top:'+top+'px;"><ul class="action-menu action-menu-top action-liuliang" id="'+id+'_popup">'
		+ '</ul></div>';
	}else{
		var html = '<ul class="action-menu action-menu-top" style="left:'+left+'px;top:'+top+'px;" id="'+id+'_popup">'
			+ '</ul>';
	}
	jQuery('body').append(html);
	if(type == "liuliang"){
		var val = jQuery("#liuLiang").html();
		for (var k=0;k<data.length;k++){
			if(data[k].key==val){
				htmlLi += '<li><a class="action-menu-item selected" value="'+data[k].key+'">'+data[k].name+'</a></li>';
			}else{
				htmlLi += '<li><a class="action-menu-item" value="'+data[k].key+'">'+data[k].name+'</a></li>';
			}
		}
	}else{
		for (var k=0;k<data.length;k++){
			if(k == 0){
				htmlLi += '<li><a class="action-menu-item selected" title="'+data[k].key+'" value="'+data[k].key+'">'+data[k].name+'</a></li>';
			}else{
				htmlLi += '<li><a class="action-menu-item" title="'+data[k].key+'" value="'+data[k].key+'">'+data[k].name+'</a></li>';
			}
		}
	}
	jQuery('#' + id + '_popup').html(htmlLi);
}
jQuery('body').on('click', '#selectDays_popup li',function(event){
	var target = event.target;
	num=jQuery(target).attr('value');
	popupli(target,event);
});
jQuery('body').on('click', '#selectNetwork_popup li',function(event){
	var target = event.target;
	num=jQuery(target).attr('value');
	popupli(target,event);
});
jQuery('body').on('click', '#selectLiuliang_popup li',function(event){
	var target = event.target;
	num=jQuery(target).attr('value');
	popupli(target,event);
});
jQuery('body').on('click', '#selectTime_popup li',function(event){
	var target = event.target;
	num=jQuery(target).attr('value');
	popupli(target,event);
});
jQuery('body').on('click', '#selectRate_popup li',function(event){
	var target = event.target;
	num=jQuery(target).attr('value');
	popupli(target,event);
});
jQuery('body').click(function(event){
	event.stopPropagation();
	jQuery('.action-menu').hide();
});
//popup切换事件
function popupli(obj,event){
	event.stopPropagation();
	jQuery(obj).addClass('selected');
	jQuery(obj).parent().siblings().children('a').removeClass('selected');
	var id = jQuery(obj).parents('ul').attr('id');
	var newId = id.split("_");
	var parentId = newId[0];
	jQuery("#" + parentId + ' span').html(jQuery(obj).html());
	jQuery("#" + parentId + ' span').data("type",jQuery(obj).attr("value"));
	jQuery('.action-menu').hide();
	if(parentId == "selectDays"){
		if(jQuery('#selectDays_popup').length > 0){
			priority = jQuery('#selectDays_popup .selected').attr('value');
		}else {
			priority = 0;
		}
		loadUseAbilty(priority);
	}else if(parentId == "selectTime" ||parentId == "selectLiuliang" || parentId == "selectNetwork" ){
		if(parentId == "selectNetwork") {
			var name = jQuery('#selectNetwork_popup li .selected').attr('value');
		 	if(typeof(name) === "undefined") {
		 		name = jQuery("#hexinPc").html();
		 	}
		 	jQuery('#selectLiuliang_popup li .selected').removeClass('selected');
		 	jQuery('#selectLiuliang_popup').children("li:first-child").children("a").addClass('selected');
			jQuery.ajax({
				method:"POST",
				url:"${ctx}/screen/selectInterfaceByHost.json",
				data:{
					name:name
				},
				success:function(msg){
					if(msg.length == 0) {
						jQuery("#liuLiang").html('无相关接口');
					} else {
						jQuery("#liuLiang").html(msg[0].itemName);
					}
					loadNetWorkTraffic2();
				},
				error:function(err){
					alert(err);
				}
			});
		}else{
			loadNetWorkTraffic2();
		}
	}else if(parentId == "selectRate"){
		if(jQuery('#selectRate_popup').length > 0){
			priority = jQuery('#selectRate_popup .selected').attr('value');
		}else {
			priority = 0;
		}
		loadSlide(priority);
	}
	
}

//页面刷新
function refreshMonitorList(){
	//jQuery("#monitorList").html("");
	//jQuery(".monitorNodeNum").html("");
	//jQuery(".normalMonitorNodeNum").html("");
	//jQuery(".nonitorAlarmNum").html("");
	//jQuery(".roomTemperature").html("");
	jQuery.ajax({
		method:"POST",
		url:"${ctx}/screen/index1.json",
		success:function(data){
			var monitorNodeNum = data.MonitorNodeNum;
			var pcNumber = "<span class='iconfont icon-zongxianjiedian'></span>";
			if(monitorNodeNum){
				pcNumber +="<h2>"+monitorNodeNum+"</h2>";
			}else{
				pcNumber +="<h2>无数据</h2>";
			}
			pcNumber += "<p>监控的主机数量</p>";
			jQuery(".monitorNodeNum").html(pcNumber);
			
			var normalMonitorNodeNum = data.NormalMonitorNodeNum;
			var nMonitorNodeNum = "<span class='iconfont icon-zhengchang'></span>";
			if(normalMonitorNodeNum){
				nMonitorNodeNum +="<h2>"+normalMonitorNodeNum+"</h2>";
			}else{
				nMonitorNodeNum +="<h2>无数据</h2>";
			}
			nMonitorNodeNum += "<p>正常状态主机数量</p>";
			jQuery(".normalMonitorNodeNum").html(nMonitorNodeNum);
			
			var monitorAlarmNum = data.MonitorAlarmNum;
			var mAlarmNum = "<span class='iconfont icon-gaojingxinxi'></span>";
			if(monitorAlarmNum){
				mAlarmNum +="<h2>"+monitorAlarmNum+"</h2>";
			}else{
				mAlarmNum +="<h2>无数据</h2>";
			}
			mAlarmNum += "<p>监控告警数量</p>";
			jQuery(".nonitorAlarmNum").html(mAlarmNum);
			
			var roomTemp = "";
			roomTemp +="<span class='iconfont icon-wendu'></span><h2>34℃</h2>";
			roomTemp += "<p>机房温度</p>"; 
			jQuery(".roomTemperature").html(roomTemp);
			
			var html = "";
			var monitorAlarmList = data.MonitorAlarmList;
			if(monitorAlarmList){
				for(var i = 0;i<monitorAlarmList.length;i++){
					html += "<li><table><tr><td width='10px'><span class='lake-color'>"+monitorAlarmList[i].number+"<span></td>";
					html += "<td><h1 class='lake-color'>"+monitorAlarmList[i].host+"</h1><p class='white-color'>"+monitorAlarmList[i].description+"</p></td>";
					html += "<td width='40px' align='right'>";
					if(monitorAlarmList[i].priority == 4){
						html +="<span class='orange-color'>严重</span>";
					}else if(monitorAlarmList[i].priority == 5){
						html +="<span class='orange-color'>灾难</span>"
					}
					html +="</td></tr></table></li>"
				}
			}else{
				html +="<li><font color='white' class='white' style='margin-left:-63px'>未发生告警</font></li>"
			}
			jQuery("#monitorList").html(html);
		},
		error:function(err){
			alert(err);
		}
	})
}

//加载拓扑图
//
function loadSlide(priority){
 	if(jQuery(".picScroll-left").length){
		jQuery(".picScroll-left #picList").remove();
		jQuery(".picScroll-left .tempWrap").remove();
		jQuery(".picScroll-left .bd").html("");
	} 
	jQuery.ajax({
		  method: "POST",
		  url: "${ctx}/screen/topologicalScreen.json",
		  success:function(data) {
			 //jQuery('.loadingindex').hide();
			 var temp = [];
			 var tempId;
			  for(var i=0;i<data.length;i++){
				 if(data[i]!=null && data[i]!= ""){
					 var sysmapId=data[i].sysmapId;
					 temp.push('<li><div class="pic"><iframe src="${ctx}/php/zabbix.php?action=map.view2&sysmapid='+sysmapId+'&fullscreen=1" class="iframe" name="iframe" id="myIframe_'+i+'" onload=\'loadIframe("'+i+'");\'></iframe></div></li>');
				 }
			  }
		 	jQuery(".bd").append('<ul class="picList" id="picList"></ul>')
			 jQuery('#picList').append(temp.join(''));
			 if(priority == "0"){
				 priority = 30000;
			 }else if(priority == "1"){
				 priority = 60000;
			 }else if(priority == "2"){
				 priority = 120000;
			 }else if(priority == "3"){
				 priority = 600000;
			 }else if(priority == "4"){
				 priority = 900000;
			 }else{
				 priority = 3000;
			 }
			 if (data.length <2) {
				 jQuery(".iconfont", "#index-cell-body-1").hide();
			 } else {
				 //滑动
			 	jQuery(".iconfont", "#index-cell-body-1").show();
			 	jQuery(".picScroll-left").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"leftLoop", vis:"auto", scroll:1, interTime:priority,autoPlay:false, autoPage:true, trigger:"click" });
			 }
		  },
		  error:function(err){
				alert(err);
			}
	  });
}
function loadIframe(index){
	//debugger;
	if (window.ActiveXObject || "ActiveXObject" in window){
		var doc=document.getElementById("myIframe_"+index+"").contentDocument;
		doc.getElementsByTagName("html")[0].className="mapHtml";
	
		}else{
			$('.iframe').contents().find('html').addClass('mapHtml');
		}
}

//轮播图
//jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:3,trigger:"click"});

Highcharts.getOptions().plotOptions.column.colors = (function () {
    var colors = ['#0dcfd6','#1b7ec1','#1b7ec1','#1b7ec1','#1b7ec1','#1b7ec1'];
    return colors;
}());

//设置默认显示主机 host 10.250.200.254
function loadNetWorkTraffic() {
	sData = [];
	jQuery.ajax({
		method:"POST",
		data:{
			host:'10.250.200.254'
		},
		url:"${ctx}/screen/sumNetWorkTraffic.json",
		async:false,		
		success:function(data){
			for(var i=0;i<data.length;i++){
				p=new Object();
				p.name=i+1;
				p.y=data[i].value / 1000000;
				sData.push(p);
			}
		},
		error:function(err){
			alert(err);
		}
	});
	
	//网络分时流量动态
	// Create the chart
	$('#container-networkTraffic').highcharts({
	    chart: {
	        type: 'areaspline'
	    },
	    title: {
	        text: ''
	    },
	    legend: {
	        layout: 'vertical',
	        align: 'left',
	        verticalAlign: 'top',
	        x: 150,
	        y: 100,
	        floating: true,
	        borderWidth: 1,
	        enabled:false,
	        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#fff'
	    },
	    xAxis: {
	        type: 'category'
	    },
	    yAxis: {
	        title: {
	            text: '单位(Mbps)'
	        }
	    },
	    tooltip: {
	        headerFormat: '',
	        pointFormat: '<span>{point.name}</span>: <b>{point.y:.2f}</b><br/>'
	    },
	    credits: {
	        enabled: false
	    },
	    plotOptions: {
	        areaspline: {
	            fillOpacity: 0.5
	        }
	    },
	    series: [{
	        name: '',
	        data: sData,
	        color:'#2df1d0'
	    }]
	});
}

function loadNetWorkTraffic2() {
	var name = jQuery('#selectNetwork_popup li .selected').attr('value');
 	if(typeof(name) === "undefined") {
 		name = jQuery("#hexinPc").html();
 	}
 	var interfaceName = jQuery('#selectLiuliang_popup li .selected').attr('value');
 	if(typeof(interfaceName) === "undefined") {
 		interfaceName = jQuery("#liuLiang").html();
 	}
 	var interval = jQuery('#selectTime_popup li .selected').attr('value');
 	if(typeof(interval) === "undefined") {
 		interval = 1;
 	}
 	//alert(name+ ","+interfaceName+"," + interval);
	var tickInterval;
	sData = [];
	jQuery.ajax({
		method:"POST",
		data:{
			name:name,
			interfaceName:interfaceName,
			interval:interval
		},
		url:"${ctx}/screen/sumChangeNetWorkTraffic.json",
		async:false,		
		success:function(data){
			for(var i=0;i<data.length;i++){
				p=new Object();
				p.name=data[i].time;
				p.y=data[i].value / 1000000;
				sData.push(p);
			}
		},
		error:function(err){
			alert(err);
		}
	});
	tickInterval = 30 / interval;
	// Create the chart
	var chart = $('#container-networkTraffic').highcharts({
		chart: {
			type: 'areaspline',
	        animation: Highcharts.svg, // don't animate in old IE
	        events: {                                                           
                load: function() {  
                    // set up the updating of the chart each second             
                    var series = this.series[0];
                    setInterval(function(){
	                    var x = '';
                        var y;   
                        //var da = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
                        jQuery.ajax({
                    		method:"POST",
                    		data:{
                    			name:name,
                    			interfaceName:interfaceName,
                    			interval:interval
                    		},
                    		url:"${ctx}/screen/sumSingleChangeNetWorkTraffic.json",
                    		async:false,		
                    		success:function(data){
                    			x = data.time;
                    			y = data.value / 1000000;
                    		},
                    		error:function(err){
                    			alert(err);
                    		}
                    	});
                        var op=series.options;
                        if(op!=null && op!=undefined){
                        	series.addPoint([x,y],true, true, true);
                        }
                    }, interval * 60000);   
                    //}, interval * 10000);
                }                                                               
            }       
	    },
	    title: {
	        text: ''
	    },
	    legend: {
	        layout: 'vertical',
	        align: 'left',
	        verticalAlign: 'top',
	        x: 150,
	        y: 100,
	        floating: true,
	        borderWidth: 1,
	        enabled:false,
	        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#fff'
	    },
	    xAxis: {
	    	tickInterval: tickInterval,
	        type: 'category'
	    },
	    yAxis: {
	        title: {
	            text: '单位(Mbps)'
	        }
	    },
	    tooltip: {
	        headerFormat: '',
	        pointFormat: '<span>{point.name}</span>: <b>{point.y:.2f}</b><br/>'
	    },
	    credits: {
	        enabled: false
	    },
	    exporting: false,
	    plotOptions: {
	        areaspline: {
	            fillOpacity: 0.5
	        }
	    },
	    series: [{
            name: '',
            data:sData,
            color:'#2df1d0'
        }]
	});
}


function refreshLoadUseAbilty(){
	var prop = parseInt($('#selectDays span').data("type"));
	loadUseAbilty(prop)
}
function refreshLoadSlide(){
	var prop = parseInt($('#selectRate span').data("type"));
	loadSlide(prop)
}
function loadUseAbilty(priority){
	tempArray=[];
	jQuery.ajax({
		method:"POST",
		url:"${ctx}/screen/useAbilty.json",
		data:{
			priority:priority
		},
		async:false,		
		success:function(data){
			for(var i=0;i<data.length;i++){
				p=new Object();
				p.name=data[i].name;
				p.y=data[i].showsla;
				tempArray.push(p);
			}
		},
		error:function(err){
			alert(err);
		}
		
	});
	// Create the chart
	Highcharts.chart('container-business', {
	    chart: {
	        type: 'column'
	    },
	    title: {
	        text: ''
	    },
	    credits:{
	    	enabled:false
	    },
	    subtitle: {
	        text: ''
	    },
	    xAxis: {
	        type: 'category'
	    },
	    yAxis: {
	        title: {
	            text: ''
	        }
	    },
	    legend: {
	        enabled: false
	    },
	    plotOptions: {
	        series: {
	            borderWidth: 0
	        }
	    },
	    tooltip: {
	        headerFormat: '',
	        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.4f}%</b><br/>'
	    },
	    series: [{
	        name: '',
	        colorByPoint: true,
	        data:tempArray
	    }]
	});
}
//用户刷新时间
function getUserRefresh(){
	  jQuery.ajax({
		  method: "POST",
		  url: "${ctx}/screen/getUserRefresh.json",
		  async:false,
		  data: {
			  userId:userId,
		  },
		  success:function(data) {
			  if(null != data && 0 != data){
				  refreshTime = data*1000;
			  }else{
				  refreshTime = 60000;
			  }

		  },
		  error:function(err){
				alert(err);
		}
	  });	  
	  return refreshTime;
}
</script>
</body>
</html>