<%@ 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"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ 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>大屏展示3</title>
<link href="screenStyles/screen.css" rel="stylesheet">
</head>
<body onload="FlowConverIn(${firstInterfaceIncoming.value}),FlowConverOut(${firstInterfaceOutgoing.value})">
	<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-3">
				<div class="monitor-screen-row" id="index-cell-row-3">
					<div class="monitor-screen-cell-box">
						<div class="monitor-screen-cell-head" id="index-cell-head-3">
							<h4>关注主机</h4>
							<span class="monitor-head-btns"> <span
								class="setting iconfont icon-shezhi1" id="focusHost"
								onclick="focusHost(this)" title="设置"></span> <span
								class="refresh2 iconfont icon-shuaxin" id="firstHostRefresh"
								title="刷新"></span>
							</span>
						</div>
						<div class="monitor-screen-cell-body" id="index-cell-body-3">

							<!--滚动内容start-->
							<div class="scrollbar1">
								<!-- <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div> -->
								<div class="viewport">
									<div class="">
										<div class="m-title">
											<c:if test="${attentionedHost.status == 1}">
												<span>当前状态:</span>
												<span id="firstHostStatus" class="value">不可用</span>
											</c:if>
											<c:if test="${attentionedHost.status == 0}">
												<span>当前状态:</span>
												<span id="firstHostStatus" class="value">可用</span>
											</c:if>
											<span>IP地址:</span><span id="firstHostIP" class="value">${attentionedHost.ip}</span>
											<span>操作系统:</span><span id="firstHostOS" class="value">${attentionedHost.os}</span>
											<span>主机名称:</span><span id="firstHostHost" class="value">${attentionedHost.host}</span>
										</div>
										<div class="t-box clearfix gzZj">
											<div class="t-left-1">
												<div class="clearfix">
													<div style="width: 50%; float: left;">
														<div id="container-speed-cpu"></div>
													</div>
													<div style="width: 50%; float: left;">
														<div id="container-speed-memory"></div>
													</div>
												</div>
											</div>
											<div class="icon_jdt">
												<div class="iconfont icon-shangyi iconarrowprev "
													id="arrowPrev1" onclick="arrowPrev1();"></div>
												<div class="iconList" id="iconList1">
													<div class="interface-box clearfix" id="firstHostInterface">
														<c:forEach var="interfaceStatusItem"
															items="${interfaceStatusItems}">
															<c:if test="${interfaceStatusItem.status == 1}">
																<div class="interface-list color-serious">
																	<span class="iconfont icon-jiekoukaifa"></span>
																	<h1>接口异常</h1>
																	<p>本地连接</p>
																	<p>${interfaceStatusItem.itemName}</p>
																</div>
															</c:if>
															<c:if test="${interfaceStatusItem.status == 0}">
																<div class="interface-list color-main">
																	<span class="iconfont icon-jiekoukaifa"></span>
																	<h1>接口正常</h1>
																	<p>本地连接</p>
																	<p>${interfaceStatusItem.itemName}</p>
																</div>
															</c:if>
															<c:if test="${interfaceStatusItem.status == -1}">
																<div class="interface-list color-serious">
																	<span class="iconfont icon-jiekoukaifa"></span>
																	<h1>接口异常</h1>
																	<p>无</p>
																	<p>${interfaceStatusItem.itemName}</p>
																</div>
															</c:if>
														</c:forEach>
													</div>
												</div>
												<div class="iconfont icon-youyi iconarrownext"
													id="arrowNext1" onclick="arrowNext1();"></div>
											</div>

										</div>
										<div class="t-right-1" id="firstHostDisk">
											<c:forEach var="diskUsageRate" items="${diskUsageRates}">
												<div class="slide-state">
													<p>分区${diskUsageRate.itemName}利用率</p>
													<c:choose>
														<c:when test="${diskUsageRate.value >= 90}">
															<!-- 致命 -->
															<span class="slide-box color-dead">
														</c:when>
														<c:when test="${diskUsageRate.value >= 80}">
															<!-- 严重 -->
															<span class="slide-box color-serious">
														</c:when>
														<c:when test="${diskUsageRate.value >= 60}">
															<!-- 警告 -->
															<span class="slide-box color-warning">
														</c:when>
														<c:otherwise>
															<!-- 主要 -->
															<span class="slide-box color-main">
														</c:otherwise>
													</c:choose>
													<span class="slide-bg"> <span class="slide-width"
														style="width:${diskUsageRate.value}%;"></span>
													</span> <span class="slide-value">${diskUsageRate.value}%</span> </span>
												</div>
											</c:forEach>
										</div>


									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="monitor-screen-cell-box" id="index-cell-5">
					<div class="monitor-screen-cell-head" id="index-cell-head-5">
						<h4>关注网络设备</h4>
						<span class="monitor-head-btns"> <span
							class="setting iconfont icon-shezhi1" id="focusEquipment"
							onclick="focusEquipment(this)" title="设置"></span> <span
							class="refresh2 iconfont icon-shuaxin" id="secondHostRefresh"
							title="刷新"></span>
						</span>
					</div>
					<div class="monitor-screen-cell-body" id="index-cell-body-5">

						<!--滚动内容start-->
						<div class="scrollbar1">
							<!-- 	<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div> -->
							<div class="viewport">
								<div class="">
									<div class="m-title">
										<c:if test="${secondAttentionedHost.status == 1}">
											<span>当前状态:</span>
											<span id="secondHostStatus" class="value">不可用</span>
										</c:if>
										<c:if test="${secondAttentionedHost.status == 0}">
											<span>当前状态:</span>
											<span id="secondHostStatus" class="value">可用</span>
										</c:if>
										<span>IP地址:</span><span id="secondHostIP" class="value">${secondAttentionedHost.ip}</span>
										<span>监控类型:</span><span id="secondHostGroup" class="value">交换机</span>
										<span>设备名称:</span><span id="secondHostHost" class="value">${secondAttentionedHost.host}</span>
									</div>
									<div class="t-box clearfix gzNetwork">
										<div class="t-left">
											<div id="container-speed-cpu-2"></div>
											<div id="container-speed-memory-2"></div>
										</div>
										<div class="t-right" id="secondHostInterface">
											<div class="t-icon-box">
												<span class="iconfont icon-shangyi iconarrowprev"
													id="arrowPrev" onclick="arrowPrev();"></span>
												<div class="iconList" id="iconList">
													<div class="iconwidth" id="iconWidth">
														<c:forEach var="interfaceIncoming"
															items="${interfaceIncomings}">
															<span class="jiekou"> <c:if
																	test="${interfaceIncoming.status == null}">
																	<span class='iconfont icon-jiekoukaifa color-normal'
																		title=""></span>
																</c:if> <c:if test="${interfaceIncoming.status == -1}">
																	<span class='iconfont icon-jiekoukaifa color-normal'
																		title="${interfaceIncoming.itemName}"
																		onclick="interfaceMessChange(this,event);"></span>
																</c:if> <c:if test="${interfaceIncoming.status == 0}">
																	<span class='iconfont icon-jiekoukaifa color-category'
																		title="${interfaceIncoming.itemName}"
																		onclick="interfaceMessChange(this,event);"></span>
																</c:if> <c:if test="${interfaceIncoming.status == 1}">
																	<span class='iconfont icon-jiekoukaifa color-info'
																		title="${interfaceIncoming.itemName}"
																		onclick="interfaceMessChange(this,event);"></span>
																</c:if> <c:if test="${interfaceIncoming.status == 2}">
																	<span class='iconfont icon-jiekoukaifa color-warning'
																		title="${interfaceIncoming.itemName}"
																		onclick="interfaceMessChange(this,event);"></span>
																</c:if> <c:if test="${interfaceIncoming.status == 3}">
																	<span
																		class='iconfont icon-jiekoukaifa color-genSerious'
																		title="${interfaceIncoming.itemName}"
																		onclick="interfaceMessChange(this,event);"></span>
																</c:if> <c:if test="${interfaceIncoming.status == 4}">
																	<span class='iconfont icon-jiekoukaifa color-serious'
																		title="${interfaceIncoming.itemName}"
																		onclick="interfaceMessChange(this,event);"></span>
																</c:if> <c:if test="${interfaceIncoming.status == 5}">
																	<span class='iconfont icon-jiekoukaifa color-dead'
																		title="${interfaceIncoming.itemName}"
																		onclick="interfaceMessChange(this,event);"></span>
																</c:if>
															</span>
														</c:forEach>
													</div>
												</div>
												<span class="iconfont icon-youyi iconarrownext"
													id="arrowNext" onclick="arrowNext();"></span>
											</div>
											<!-- 第一次显示,直接取值转换 -->
											<div class="t-content" id="tContent">
												<p class="t-name">接口名称:${firstInterfaceIncoming.itemName}</p>
												<div class="t-descript clearfix">
													<div class="t-des-div">
														<p>
															<label>带宽利用率</label><span><fmt:formatNumber
																	type="number"
																	value="${(firstInterfaceIncoming.value+firstInterfaceOutgoing.value)*100/100000000}"
																	pattern="0.00%" maxFractionDigits="2" /></span>
														</p>
														<p>
															<label>发送速率</label><span id="outSpeed"></span>
														</p>
														<p>
															<label>发送利用率</label><span><fmt:formatNumber
																	type="number"
																	value="${firstInterfaceOutgoing.value*100/100000000}"
																	pattern="0.00%" maxFractionDigits="2" /></span>
														</p>
													</div>
													<div class="t-des-div">
														<p>
															<label>接收速率</label><span id="inSpeed"></span>
														</p>
														<p>
															<label>接收利用率</label><span><fmt:formatNumber
																	type="number"
																	value="${firstInterfaceIncoming.value*100/100000000}"
																	pattern="0.00%" maxFractionDigits="2" /></span>
														</p>
														<p>
															<label>丢包率</label><span>${icmppingLossItem.value}%</span>
														</p>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="monitor-screen-cell" id="index-cell-4">
				<div class="monitor-screen-row" id="index-cell-row-4">
					<div class="monitor-screen-cell-box">
						<div class="monitor-screen-cell-head" id="index-cell-row-head-4">
							<h4>告警预览</h4>
							<span class="monitor-head-btns"> <span
								class="refresh2 iconfont icon-shuaxin" onclick="refreshAlarm();"
								title="刷新"></span>
							</span>
						</div>
						<div class="monitor-screen-cell-body" id="index-cell-row-body-4">
							<div class="monitor-tabs">
								<ul class="monitor-tabs-ul clearfix" id="tabs">
									<li class="active"><a href="#alldevice">全部</a></li>
									<li><a href="#host">PC机</a></li>
									<li><a href="#networkdevice">交换机</a></li>
									<li><a href="#application">服务器</a></li>
								</ul>
								<div class="monitor-tabs-box">
									<div id="container-alldevice"></div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="monitor-screen-cell-box" id="index-cell-6">
					<div class="monitor-screen-cell-head" id="index-cell-head-6">
						<h4 id="cpuname">TOPN-CPU利用率</h4>
						<span class="monitor-head-btns"> <span
							class="setting iconfont icon-shezhi1" id="topSetting"
							onClick="topSetting(this);" title="设置"></span> <span
							class="refresh2 iconfont icon-shuaxin" onclick="resfreshCpu()"
							title="刷新"></span>
						</span>
					</div>
					<div class="monitor-screen-cell-body" id="index-cell-body-6">
						<div id="container-cpu"></div>
					</div>
				</div>
			</div>

		</div>
	</div>

	<!-- 关注主机设置 -->
	<div class="action-menu action-menu-top" id="focusHost_popup">
		<div class="modal-header">
			<button type="button" class="close" onclick="popupClose(this);">
				<span aria-hidden="true">&times;</span>
			</button>
			<h4 class="modal-title">设置</h4>
		</div>
		<div class="modal-body">
			<table class="list-table">
				<thead>
					<tr>
						<th></th>
						<th>主机名称</th>
						<th>IP地址</th>
					</tr>
				</thead>
				<tbody id="hosts">
					<tr>
						<td><input type="radio" name="hr"></td>
						<td>主机1</td>
						<td>192.168.10.20</td>
					</tr>
					<tr>
						<td><input type="radio" name="hr"></td>
						<td>主机1</td>
						<td>192.168.10.20</td>
					</tr>
					<tr>
						<td><input type="radio" name="hr"></td>
						<td>主机1</td>
						<td>192.168.10.20</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-success" data-dismiss="modal"
				onclick="focusHostSave(this);">保存</button>
		</div>
	</div>

	<!-- 关注网络设备设置 -->
	<div class="action-menu action-menu-top" id="focusEquipment_popup">
		<div class="modal-header">
			<button type="button" class="close" onclick="popupClose(this);">
				<span aria-hidden="true">&times;</span>
			</button>
			<h4 class="modal-title">设置</h4>
		</div>
		<div class="modal-body">
			<table class="list-table">
				<thead>
					<tr>
						<th></th>
						<th>主机名称</th>
						<th>IP地址</th>
					</tr>
				</thead>
				<tbody id="devices">
					<tr>
						<td><input type="radio" name="hr"></td>
						<td>主机1</td>
						<td>192.168.10.20</td>
					</tr>
					<tr>
						<td><input type="radio" name="hr"></td>
						<td>主机1</td>
						<td>192.168.10.20</td>
					</tr>
					<tr>
						<td><input type="radio" name="hr"></td>
						<td>主机1</td>
						<td>192.168.10.20</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-success" data-dismiss="modal"
				onclick="focusEquipmentSave(this);">保存</button>
		</div>
	</div>

	<!-- topN设置 -->
	<div class="action-menu action-menu-top" id="topSetting_popup">
		<div class="modal-header">
			<button type="button" class="close" onclick="popupClose(this);">
				<span aria-hidden="true">&times;</span>
			</button>
			<h4 class="modal-title">设置</h4>
		</div>
		<div class="modal-body">
			<ul class="table-forms">
				<li>
					<div class="table-forms-td-left">
						<label for="label_type">显示:</label>
					</div>
					<div class="table-forms-td-right">
						<select id="cpulimit" name="cpulimit" autocomplete="off">
							<option value="5" selected="selected">5</option>
							<option value="10">10</option>
						</select>
					</div>
				</li>
				<li>
					<div class="table-forms-td-left">
						<label for="label_type">阈值:</label>
					</div>
					<div class="table-forms-td-right">
						<select id="cpulimit2" name="cpulimit2" autocomplete="off">
							<option value="20" selected="selected">20%</option>
							<option value="50">50%</option>
							<option value="80">80%</option>
						</select>
					</div>
				</li>
			</ul>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-success" data-dismiss="modal"
				onclick="topSettingSave(this);">保存</button>
		</div>
	</div>

	<script src="js/jquery.1.10.1.min.js"></script>
	<script src="js/highcharts.js"></script>
	<script src="js/highcharts-more.js"></script>
	<script src="js/solid-gauge.js"></script>
	<script src="js/jquery.tinyscrollbar.min.js"></script>
	<script>
var iconWidthRegion,iconWidths;
var chartTotal = 0;
var userId = "<%= myUserId %>"
var refreshTime = getUserRefresh();
$(function(){
	init();
	loadCpuRate();
	addActiveClass();
	initChartPie();
	$('#tabs li').first().click();
	
	//设置默认的主机
	var firstHost = getHost('6');//设备类型：PC机 
	var secondHost = getHost('1');//设备类型：交换机 
	
	//两个关注的主机
	dealFirstHostInfo(firstHost);
	dealSecondHostInfo(secondHost);
	
	//第一个主机刷新按钮
	jQuery("#firstHostRefresh").click(function(e) {
		//debugger;
		var host = jQuery("#firstHostHost").text();
		dealFirstHostInfo(host);
	});
	//网络设备刷新按钮
	jQuery("#secondHostRefresh").click(function(e) {
		var host = jQuery("#secondHostHost").text();
		dealSecondHostInfo(host);
	});
	
	//定时刷新
/* 	setInterval(function() {
		var host = jQuery("#firstHostHost").text();
		dealFirstHostInfo(host);
		var secondHost = jQuery("#secondHostHost").text();
		dealSecondHostInfo(secondHost);
	},5000); */
});

function init(){
	checkToolRange();
	checkNetRange();
}

$(window).resize(function(){
	init();
	resizeChart();
});
function addActiveClass(){
	if($(".iconwidth").find(".jiekou").length > 0){
		$(".jiekou").eq(0).addClass("active")
	}
}
//滚动条初始
/* conScroll();
function conScroll(){
	//初始滚动条
	var $conScroll = $(".scrollbar1");
	for(var i=0;i<$conScroll.length;i++){
		$conScroll.tinyscrollbar();
		var conScroll = $conScroll.data("plugin_tinyscrollbar");
		//数据块更新 update(num); num/relative两个参数
		conScroll.update("relative");
	}
	
} */

//处理接口有关问题
//第一次接口有关信息
function FlowConverIn(doubleNum){
	//定义计数器
	var i = 0;
	//doubleNum = doubleNum/(1000);
	//循环除以1024，直到比1024小
	while(doubleNum > (1 << 10)){
		doubleNum = doubleNum /(1 << 10);
		i ++;
	}
	//保留两位小数 
	doubleNum = doubleNum.toFixed(2);
	//alert("进速率"+i);
	if(i==0){
		jQuery("#inSpeed").html(doubleNum + "Kbps");
		}
	if(i==1){
		jQuery("#inSpeed").html( doubleNum + " Mbps");
		}
	if(i==2){
		jQuery("#inSpeed").html( doubleNum + " Gbps");
		}
	if(i==3){
		jQuery("#inSpeed").html( doubleNum + " Tbps");
		}
	if(i==4){
		jQuery("#inSpeed").html( doubleNum + " Pbps");
		}
	if(i==5){
		jQuery("#inSpeed").html( doubleNum + " Ebps");
		}
	}
//处理接口有关问题
 function FlowConverOut(doubleNum){
	//定义计数器
	var i = 0;
	//doubleNum = doubleNum/(1000);
	//循环除以1024，直到比1024小
	while(doubleNum > (1 << 10)){
		doubleNum = doubleNum /(1 << 10);
		i ++;
	}
	//保留两位小数 
	doubleNum = doubleNum.toFixed(2);
	//alert("进速率"+i);
	if(i==0){
		jQuery("#outSpeed").text(doubleNum + "Kbps");
		}
	if(i==1){
		jQuery("#outSpeed").text( doubleNum + " Mbps");
		}
	if(i==2){
		jQuery("#outSpeed").text( doubleNum + " Gbps");
		}
	if(i==3){
		jQuery("#outSpeed").text( doubleNum + " Tbps");
		}
	if(i==4){
		jQuery("#outSpeed").text( doubleNum + " Pbps");
		}
	if(i==5){
		jQuery("#outSpeed").text( doubleNum + " Ebps");
		}
	}
//新增的计算发送/接收速率
function FlowConver(doubleNum){
	//定义计数器
	var i = 0;
	doubleNum = doubleNum/(1000);
	//循环除以1024，直到比1024小
	while(doubleNum > (1 << 10)){
		doubleNum = doubleNum /(1 << 10);
		i ++;
	}
	//保留两位小数 
	doubleNum = doubleNum.toFixed(2);
	//switch判断数据的单位是什么，PS:多个数据判断的时候switch的速度要快于if
	switch(i){
		case 0:
			return doubleNum + " Kbps";
		case 1:
			return doubleNum + " Mbps";
		case 2:
			return doubleNum + " Gbps";
		case 3:
			return doubleNum + " Tbps";
		case 4:
			return doubleNum + " Pbps";
		case 5:
			return doubleNum + " Ebps";
		default:
			return doubleNum + " Kbps";
		}
	}


//新增计算带宽利用率,针对同一个端口,进/出的带宽一致

function Bandwidth(InValue,OutValue,Speed){
	var BWUtilization = 0;
	var i = 0;
	var j =0;
	i = (InValue + OutValue)* 100
	j = Speed
	BWUtilization = (i/j).toFixed(2);
	return BWUtilization;
}

//新增计算发送利用率,针对同一个端口,进/出的带宽一致

function OutUtilization(OutValue,Speed){
	var BWUtilization = 0;
	var i = 0;
	var j =0;
	i = OutValue*100
	j = Speed
	BWUtilization = (i/j).toFixed(2);
	return BWUtilization;
}
//新增计算接收利用率,针对同一个端口,进/出的带宽一致

function InUtilization(InValue,Speed){
	var BWUtilization = 0;
	var i = 0;
	var j =0;
	i = InValue*100
	j = Speed
	BWUtilization = (i/j).toFixed(2);
	return BWUtilization;
}

//第一个接口信息加载
//interfaceMessage("Fastoius_0293");
//关注主机2 接口信息切换
function interfaceMessChange(obj,event){
	$(obj).parent('.jiekou').addClass('active').siblings().removeClass('active');
	//获取接口名称
	var name = $(event.target).attr('title');
	interfaceMessage(name);
}
//调用接口信息
function interfaceMessage(name){
	var interfaceIncomingValue = 0;
	var interfaceOutgoingValue = 0;
	var icmppingValue = 0;
	var host = jQuery("#secondHostHost").text();
	var interfaceName = name;
	jQuery.ajax({
		method:"POST",
		data:{
			host:host,
			interfaceName:interfaceName
		},
		url:"${ctx}/screen/selectInterfaceIncomingByInterfaceName.json",    
		async:false,
		success:function(data){
			interfaceIncomingValue = data.value;    //取出接口流量信息
		},
		error:function(err){
			alert(err);
		}
	});
	
	jQuery.ajax({
		method:"POST",
		data:{
			host:host,
			interfaceName:interfaceName
		},
		url:"${ctx}/screen/selectInterfaceOutgoingByInterfaceName.json",
		async:false,
		success:function(data){
			interfaceOutgoingValue = data.value;   //取出接口流量信息
		},
		error:function(err){
			alert(err);
		}
	});
	
	jQuery.ajax({
		method:"POST",
		data:{
			host:host
		},
		url:"${ctx}/screen/selectIcmppingLoss.json",
		async:false,
		success:function(data){
			icmppingValue = data.value;    //取出接口丢包率
		},
		error:function(err){
			alert(err);
		}
	});
	
	//新增的速率信息
	jQuery.ajax({
		method:"POST",
		data:{
			host:host,
			interfaceName:interfaceName
		},
		url:"${ctx}/screen/selectInterfaceSpeedByInterfaceName.json",    
		async:false,
		success:function(data){
			interfaceSpeed = data.value;    //取出接口速率信息
		},
		error:function(err){
			alert(err);
		}
	});
	
	var html = '<p class="t-name">接口名称:'+name+'</p>'
			+ '<div class="t-descript clearfix"><div class="t-des-div">'	
			+ '<p><label>宽带利用率</label><span id="jiekouqiehuan1">' + Bandwidth(interfaceIncomingValue,interfaceOutgoingValue,interfaceSpeed) + '%</span></p>'
			+ '<p><label>发送速率</label><span>' + FlowConver(interfaceOutgoingValue) + '</span></p>'
			+ '<p><label>发送利用率</label><span>' + OutUtilization(interfaceOutgoingValue,interfaceSpeed)+ '%</span></p></div>'
			+ '<div class="t-des-div"><p><label>接收速率</label><span>' + FlowConver(interfaceIncomingValue) + '</span></p>'
			+ '<p><label>接收利用率</label><span>' + InUtilization(interfaceIncomingValue,interfaceSpeed)+ '%</span></p>'
			+ '<p><label>丢包率</label><span>' + icmppingValue+ '%</span></p></div></div>';
	$('#tContent').html(html);
}



var tempArray=[];
var totalValue = 0;
var request;
$('#tabs li').click(function(){
	tempArray = [];
	if(request){
		request.abort();
	}
	var $this = $(this);
	$this.addClass('active').siblings().removeClass('active');
	//$this.parents('.monitor-tabs').find('.monitor-tabs-box > div:eq('+$this.index()+')').show().siblings().hide();
	var name=$this.find('a').text();
	if(name=='全部'){
		name="";
	}
	request=$.ajax({
		method:"POST",
		url:"${ctx}/screen/countByName.json",
		//async:false,
		data:{
			name:name,
		},
		success:function(data){
			if(data != ''){
				for(var i=0;i<data.length;i++){
					p=new Object();
					var priority=data[i].priority;
					if(priority==0){
						p.name='未分类';
						p.y=data[i].countNum;
						p.color='#8acff8';
					}else if(priority==1){
						p.name='信息';
						p.y=data[i].countNum;
						p.color='#33d3a1';
					}else if(priority==2){
						p.name='警告';
						p.y=data[i].countNum;
						p.color='#e07808';
					}else if(priority==3){
						p.name='一般严重';
						p.y=data[i].countNum;
						p.color='#da9715';
					}else if(priority==4){
						p.name='严重';
						p.y=data[i].countNum;
						p.color='#E45959';
					}else{
						p.name='灾难';
						p.y=data[i].countNum;
						p.color='#cd4718';
					}
					tempArray.push(p);
					chart.series[0].setData(tempArray);  
				}
			}else{
				chart.series[0].setData(tempArray); 
			}
			totalValue = 0;
			for(var j = 0; j < tempArray.length; j++){
					totalValue += tempArray[j].y;
			}
			chartTotal = totalValue;
			console.log(totalValue)
			if(totalValue!=0){
			 	 chart.setTitle({
					text:totalValue + '个',
					x:53
				})  
			}else if(totalValue==0){
				chart.setTitle({
					text:'未发现任何数据',
					x:10
				}) 
			}
			
		},
		error:function(err){
			alert(err);
		}
	});	
});

var time =  setInterval(function(){
	$('#tabs .active').click();
	resfreshCpu();
	var host = jQuery("#firstHostHost").text();
	dealFirstHostInfo(host);
	var secondHost = jQuery("#secondHostHost").text();
	dealSecondHostInfo(secondHost);
},refreshTime);

//告警预览刷新
function refreshAlarm(){
	initChartPie();
	$('#tabs .active').click();
};
function initChartPie(){
	var charts =  new Highcharts.Chart({
		chart: {
	        plotBackgroundColor: null,
	        plotBorderWidth: null,
	        plotShadow: false,
	        renderTo:'container-alldevice',
	        spacing : [20, 0 , 20, 0]
	    },
	    title: {
	        floating:true,
	        text: ' '
	    },
	    tooltip: {
	      	 pointFormat: '',
	      	 headerFormat:'<span style="font-size: 10px">{point.key}</span><span>: {point.y}个</span>'
	    },
	    credits:{
	    	enabled:false
	    },
	    legend : {
	 	    layout: 'vertical',
	        backgroundColor: '#FFFFFF',
	        floating: false,
	        align: 'left',
	        verticalAlign: 'top',
	        x: 10,
	        y: 15,
	        labelFormatter: function () {
	            return this.name + ' <span style="color:#b6daff;">'+this.y+'个</span>';
	        }
	    },
	    subtitle: {    
	        text: ''
	    },
	    plotOptions: {
	        pie: {
	            allowPointSelect: true,
	            cursor: 'pointer',
	            showInLegend:true,
	            dataLabels: {
	                enabled: true,
	                distance: -30, 
	                format: '{point.percentage:.1f}%',
	                style: {
	                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
	                }
	            },
	            point: {
	                events: {}
	            },
	        }
	    },
	    series: [{
	    	type: 'pie',
	        innerSize: '50%',
	        name: '',
	        data: tempArray
	    }],
	    responsive: {
	        rules: [{
	            condition: {
	                maxWidth: 300
	            },
	            chartOptions: {
	           	  plotOptions: {
	         	        pie: {
	         	            dataLabels: {
	         	                enabled: true,
	         	                distance: 0, 
	         	               
	         	                format: '{point.percentage:.1f}%',
	         	                style: {
	         	                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
	         	                }
	         	            }
	         	        }
	         	    }
	            }
	        }]
	    }
	}, function(c) {
		console.log(c)
	    // 环形图圆心
	    var centerY = c.series[0].center[1],centerX = c.series[0].center[0],
	        titleHeight = parseInt(c.title.styles.fontSize);
		    c.setTitle({
		    	x: 53,
		        y:centerY-2 + titleHeight/2,
		        //text:chartTotal+ '个',
		        text:chartTotal==0?"未发现任何数据":chartTotal+ '个'
		    }); 
	    chart = c;
	});
	return charts;
}

var chart = null;
var gaugeOptions = {
    chart: {
        type: 'solidgauge'
    },
    title: null,
    credits:{
    	enabled:false
    },
    pane: {
        center: ['50%', '85%'],
        size: '120%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#1f67a5',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },
    tooltip: {
        enabled: false
    },
    // the value axis
    yAxis: {
        stops: [
            [0.1, '#0cbcd6'], // 主要
            [0.6, '#cd4718'], // 警告
            [0.8, '#e07808'], // 严重
            [0.9, '#da9715'] //致命
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickPixelInterval: 400,
        tickWidth: 0,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },
    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};
function resizeChart(){
	initChartPie();
};
function loadCpuRate(threshold,limit){
	threshold=threshold ||  20;
	limit=limit || 5;
	$("#cpuname").html('TOP'+limit+'-CPU利用率')
	temp=[];
	$.ajax({
		method:"POST",
		url:"${ctx}/screen/hostsCpu.json",
		async:false,
		data:{
			threshold:threshold,
				limit:limit,
		},
		success:function(data){
			for(var i=0;i<data.length;i++){
				p=new Object();
				p.name=data[i].hostName;
				p.y=data[i].cpuRate;
				temp.push(p);
			}
		},
		error:function(err){
			alert(err);
		}
	});
	//Cpu利用率
	
	Highcharts.chart('container-cpu', {
	    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:.2f}%</b><br/>'
	    },
	    series: [{
	        name: '',
	        colorByPoint: true,
	        data: temp
	    }]
	});
}
Highcharts.getOptions().plotOptions.column.colors = (function () {
    var colors = ['#0dcfd6','#0dcfd6','#0dcfd6','#0dcfd6','#0dcfd6','#0dcfd6','#0dcfd6','#0dcfd6','#0dcfd6','#0dcfd6'];
    return colors;
}());

//处理第一个被关注主机的信息
function dealFirstHostInfo(host) {
	jQuery.ajax({
		method:"POST",
		data:{
			host:host
		},
		url:"${ctx}/screen/selectAttentionedHostInfo.json",
		success:function(data){
			var status = data.status;
			if(status == 0) {
				status = '可用';
			} else {
				status = '不可用';
			}
			jQuery("#firstHostStatus").html(status);
			jQuery("#firstHostIP").html(data.ip);
			jQuery("#firstHostOS").html(data.os);
			jQuery("#firstHostHost").html(data.host);
			checkToolRange();
			//initChartPie();
		},
		error:function(err){
			alert(err);
		}
	});
	
	
	//处理CPU
	cpuUsageRate = [];
	jQuery.ajax({
		method:"POST",
		data:{
			host:host
		},
		url:"${ctx}/screen/selectCpuUsageRate.json",
		async:false,
		success:function(data){
			cpuUsageRate.push(data.value);
		},
		error:function(err){
			alert(err);
		}
	});
	
	$('#container-speed-cpu').highcharts(Highcharts.merge(gaugeOptions, {
	    yAxis: {
	        min: 0,
	        max: 100,
	        title: {
	            text: 'CPU利用率'
	        }
	    },
	    credits: {
	        enabled: false
	    },
	    series: [{
	        name: 'CPU利用率',
	        data: cpuUsageRate,
	        dataLabels: {
	            format: '<div style="text-align:center"><span style="font-size:20px;color:' +
	            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'white') + '">{y:.1f}</span><br/>' +
	            '<span style="font-size:12px;color:silver">%</span></div>'
	        },
	        tooltip: {
	            valueSuffix: '%'
	        }
	    }]
	}));
	
	//处理内存
	memoryUsageRate = [];
	jQuery.ajax({
		method:"POST",
		data:{
			host:host
		},
		url:"${ctx}/screen/selectMemoryUsageRate.json",
		async:false,
		success:function(data){
			memoryUsageRate.push(data.value);
		},
		error:function(err){
			alert(err);
		}
	});
	
	$('#container-speed-memory').highcharts(Highcharts.merge(gaugeOptions, {
	    yAxis: {
	        min: 0,
	        max: 100,
	        title: {
	            text: '内存利用率'
	        }
	    },
	    series: [{
	        name: '内存利用率',
	        data: memoryUsageRate,
	        dataLabels: {
	            format: '<div style="text-align:center"><span style="font-size:20px;color:' +
	            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'white') + '">{y:.1f}</span><br/>' +
	            '<span style="font-size:12px;color:silver">%</span></div>'
	        },
	        tooltip: {
	            valueSuffix: '%'
	        }
	    }]
	}));
}
//处理第一个主机的接口信息
function dealFirstHostInterface(host) {
	jQuery.ajax({
		method:"POST",
		data:{
			host:host
		},
		url:"${ctx}/screen/selectInterfaceStatus.json",
		async:false,
		success:function(data){
			jQuery("#firstHostInterface").children().remove();
			var div = "";
			var length = data.length;
			for (var i = 0; i < length; i++) {
				if(data[i].status == 0) {
					div += "<div class='interface-list color-main'>";
					div += "<span class='iconfont icon-jiekoukaifa'></span>";
					div += "<h1>接口正常</h1>";
				} else {
					div += "<div class='interface-list color-serious'>";
					div += "<span class='iconfont icon-jiekoukaifa'></span>";
					div += "<h1>接口异常</h1>";
				}
				if(data[i].itemName == null) {
					div += "<p>无</p>";					
				} else {
					div += "<p>" + data[i].itemName + "</p>";
				}
				div += "</div>";
			}
			jQuery("#firstHostInterface").append(div);
		},
		error:function(err){
			alert(err);
		}
	});
}

//处理第一台主机的磁盘信息
function dealFirstHostDisk(host) {
	jQuery.ajax({
		method:"POST",
		data:{
			host:host
		},
		url:"${ctx}/screen/selectDiskUsageRate.json",
		async:false,
		success:function(data){
			jQuery("#firstHostDisk").children().remove();
			var div = "";
			var length = data.length;
			for (var i = 0; i < length; i++) {
				div += "<div class='slide-state'>";
				if(data[i].itemName == null) {
					div += "<p>分区利用率</p>";
				} else {
					div += "<p>分区" + data[i].itemName + "利用率</p>";
				}
				if(data[i].value > 90) {
					div += "<span class='slide-box color-dead'>";
				} else if(data[i].value > 80) {
					div += "<span class='slide-box color-serious'>";
				} else if(data[i].value > 60) {
					div += "<span class='slide-box color-warning'>";
				} else {
					div += "<span class='slide-box color-main'>";
				}
				div += "<span class='slide-bg'>";
				if(data[i].value == null) {
					div += "<span class='slide-width' style='width:0%;'></span>";
					div += "</span>";
					div += "<span class='slide-value'>0%</span>";
				} else {
					div += "<span class='slide-width' style='width:" + data[i].value  + "%;'></span>";
					div += "</span>";
					div += "<span class='slide-value'>" + data[i].value + "%</span>";
				}
				div += "</div>";
			}
			jQuery("#firstHostDisk").append(div);
		},
		error:function(err){
			alert(err);
		}
	});
}

//处理第二个被关注主机的接口信息
//该步骤的接口速率 有问题
function dealSecondHostInterface(host) {
	var interfaceIncomingValue = 0,priority;
	var interfaceOutgoingValue = 0;
	var icmppingValue = 0;
	var interfaceName = [],interfacePriority = [];
	jQuery.ajax({
		method:"POST",
		data:{
			host:host
		},
		url:"${ctx}/screen/selectInterfaceIncoming.json",
		async:false,
		success:function(data){
			interfaceIncomingValue = data[0].value;
			length = data.length;
			for (var i = 0; i < length; i++) {
			    p = new Object();
			    priority = data[i].status;
				interfaceName.push(data[i].itemName);
				if(priority==-1){
					p.className="color-normal";
				}else if(priority==0){
					p.className="color-category";
					p.color='#8acff8';
				}else if(priority==1){
					p.className="color-info";
					p.color='#33d3a1';
				}else if(priority==2){
					p.className="color-warning";
					p.color='#e07808';
				}else if(priority==3){
					p.className="color-genSerious";
					p.color='#da9715';
				}else if(priority==4){
					p.className="color-serious";
					p.color='#cd4718';
				}else if(priority == 5){
					p.className="color-dead";
					p.color='#f7f7f7';
				}
				interfacePriority.push(p);
			}
		},
		error:function(err){
			alert(err);
		}
	});
	
	
	jQuery.ajax({
		method:"POST",
		data:{
			host:host,
			interfaceName:interfaceName[0]
		},
		url:"${ctx}/screen/selectInterfaceOutgoingByInterfaceName.json",
		async:false,
		success:function(data){
			interfaceOutgoingValue = data.value;
		},
		error:function(err){
			alert(err);
		}
	});
	
	jQuery.ajax({
		method:"POST",
		data:{
			host:host
		},
		url:"${ctx}/screen/selectIcmppingLoss.json",
		async:false,
		success:function(data){
			icmppingValue = data.value;
		},
		error:function(err){
			alert(err);
		}
	});
	//新增的速率信息
	jQuery.ajax({
		method:"POST",
		data:{
			
			host:host,
			interfaceName:interfaceName[0]
		},
		url:"${ctx}/screen/selectInterfaceSpeedByInterfaceName.json",    
		async:false,
		success:function(data){
			interfaceSpeed = data.value;    //取出接口速率信息
		},
		error:function(err){
			alert(err);
		}
	});
	var length = interfaceName.length;
	var icon = '<div class="iconwidth" id="iconWidth">';
	if(length == 1) {
		icon += "<span class='jiekou active'><span class='iconfont icon-jiekoukaifa color-main "+interfacePriority[0].className+"' title='" + interfaceName[0] + "' onclick='interfaceMessChange(this,event);'></span></span>";
	} else {
		for (var i = 0; i < length; i++) {
			if(i == 0){
				//icon += "<span class='jiekou active'><span class='iconfont icon-jiekoukaifa color-main "+interfacePriority[i].className+"' title='" + interfaceName[i] + "' onclick='interfaceMessChange(this,event);'></span></span>";
				icon += "<span class='jiekou active'><span class='iconfont icon-jiekoukaifa "+interfacePriority[i].className+"' title='" + interfaceName[i] + "' onclick='interfaceMessChange(this,event);'></span></span>";
		    } else {
		    	//icon += "<span class='jiekou'><span class='iconfont icon-jiekoukaifa color-main "+interfacePriority[i].className+"' title='" + interfaceName[i] + "' onclick='interfaceMessChange(this,event);'></span></span>";
		    	icon += "<span class='jiekou'><span class='iconfont icon-jiekoukaifa "+interfacePriority[i].className+"' title='" + interfaceName[i] + "' onclick='interfaceMessChange(this,event);'></span></span>";
		    }
	    }
	}
	icon += '</div>';
	var content = '';
	if(interfaceName[0] == null || interfaceName[0] == '') {
		content += "<p class='t-name'>接口名称:</p>";
	} else {
		content += "<p class='t-name'>接口名称:" + interfaceName[0] + "</p>";
	}
	content += "<div class='t-descript clearfix'><div class='t-des-div'>"
		+ "<p><label>带宽利用率</label><span>" + Bandwidth(interfaceIncomingValue,interfaceOutgoingValue,interfaceSpeed) +"%</span></p>"
		+ "<p><label>发送速率</label><span>" + FlowConver(interfaceOutgoingValue) + "</span></p>"
		+ "<p><label>发送利用率</label><span>" + OutUtilization(interfaceOutgoingValue,interfaceSpeed) + "%</span></p></div>"
		+ "<div class='t-des-div'><p><label>接收速率</label><span>" + FlowConver(interfaceIncomingValue) + "</span></p>"
		+ "<p><label>接收利用率</label><span>" + InUtilization(interfaceIncomingValue,interfaceSpeed) + "%</span></p>"
		+ "<p><label>丢包率</label><span>" + icmppingValue+ "%</span></p></div></div>";		
		jQuery("#secondHostInterface #iconList").html(icon);
		jQuery("#secondHostInterface #tContent").html(content);
		checkToolRange();
		checkNetRange();
}

//处理第二个被关注主机的信息
function dealSecondHostInfo(host) {
	jQuery.ajax({
		method:"POST",
		data:{
			host:host
		},
		url:"${ctx}/screen/selectAttentionedHostInfo.json",
		success:function(data){
			var status = data.status;
			if(status == 0) {
				status = '可用';
			} else {
				status = '不可用';
			}
			jQuery("#secondHostStatus").html(status);
			jQuery("#secondHostIP").html(data.ip);
			jQuery("#secondHostGroup").html("交换机");
			jQuery("#secondHostHost").html(data.host);
		},
		error:function(err){
			alert(err);
		}
	});
	
	
	//处理CPU
	cpuUsageRate = [];
	jQuery.ajax({
		method:"POST",
		data:{
			host:host
		},
		url:"${ctx}/screen/selectCpuUsageRate.json",
		async:false,
		success:function(data){
			cpuUsageRate.push(data.value);
		},
		error:function(err){
			alert(err);
		}
	});
	
	$('#container-speed-cpu-2').highcharts(Highcharts.merge(gaugeOptions, {
	    yAxis: {
	        min: 0,
	        max: 100,
	        title: {
	            text: 'CPU利用率',
	            y:-50
	        }
	    },
	  
	    credits: {
	        enabled: false
	    },
	    series: [{
	        name: 'CPU利用率',
	        data: cpuUsageRate,
	        dataLabels: {
	            format: '<div style="text-align:center"><span style="font-size:16px;color:' +
	            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'white') + '">{y:.1f}</span>' +
	            '<span style="font-size:12px;color:silver">%</span></div>'
	        },
	        tooltip: {
	            valueSuffix: '%'
	        }
	    }]
	}));
	
	//处理内存
	memoryUsageRate = [];
	jQuery.ajax({
		method:"POST",
		data:{
			host:host
		},
		url:"${ctx}/screen/selectMemoryUsageRate.json",
		async:false,
		success:function(data){
			memoryUsageRate.push(data.value);
		},
		error:function(err){
			alert(err);
		}
	});
	
	$('#container-speed-memory-2').highcharts(Highcharts.merge(gaugeOptions, {
	    yAxis: {
	        min: 0,
	        max: 100,
	        title: {
	            text: '内存利用率',
	            y:-50
	        }
	    },
	    pane: {
	    		/* size:"100%",
	    	 innerRadius: '80%',
             outerRadius: '100%', */
	    },
	    series: [{
	        name: '内存利用率',
	        data: memoryUsageRate,
	        dataLabels: {
	            format: '<div style="text-align:center"><span style="font-size:16px;color:' +
	            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'white') + '">{y:.1f}</span>' +
	            '<span style="font-size:12px;color:silver">%</span></div>'
	        },
	        tooltip: {
	            valueSuffix: '%'
	        }
	    }]
	}));
} 

//弹出框弹出
function popOpen(id,left,top){
	$('.action-menu').hide();
	$('#'+id+'_popup').show().css({left:left+'px',top:top+'px',display:'block'});
}
//弹出框关闭
function popupClose(obj){	
	$(obj).parents('.action-menu').hide();
}

//关注主机
function focusHost(obj){
	var object = $(obj);
	var id = object.attr('id');
	var left = object.offset().left - 140;
	var top = object.offset().top + 35;
	popOpen(id,left,top);
	jQuery.ajax({
		method:"POST",
		data:{
			group:'6'    //设备类型：PC机
		},
		url:"${ctx}/screen/selectInfoByGroupName.json",
		success:function(data){
			jQuery("#hosts tr").remove();
			var tr = "";
			var length = data.length;
			var host = jQuery("#firstHostHost").text();
			for(var i = 0;i < length;i++) {			    		
	    		tr += "<tr>"
	    	    if(data[i].host == host) {
	    	    	tr += "<td><input type='radio' name='hr' checked = 'checked'></td>";
	    	    } else {
	    	    	tr += "<td><input type='radio' name='hr'></td>";
	    	    }
	    		tr += "<td id='host'>" + data[i].host + "</td>";
	    		tr += "<td>" + data[i].ip + "</td>";
	    		tr += "</tr>"
		    } 
	    	jQuery("#hosts").append(tr);
		},
		error:function(err){
			alert(err);
		}
	});
}

//关注主机保存
function focusHostSave(obj){
	//弹框关闭
	popupClose(obj);
	var host = jQuery(":radio[name='hr']:checked").parent().siblings("#host").text();
	if(host == null || host == "") {
		host = jQuery("#firstHostHost").text();
	}
	dealFirstHostInfo(host);
	dealFirstHostInterface(host);
	dealFirstHostDisk(host);
	setTimeout(function(){
		$('#tabs .active').click();
		initChartPie();
	},100)
	
}

//关注网络设备
function focusEquipment(obj){
	var object = $(obj);
	var id = object.attr('id');
	var left = object.offset().left - 140;
	var top = object.offset().top + 35;
	popOpen(id,left,top);
	
	jQuery.ajax({
		method:"POST",
		data:{
			group:'1'    //设备类型：交换机  
		},
		url:"${ctx}/screen/selectInfoByGroupName.json",
		success:function(data){
			jQuery("#devices tr").remove();
			var tr = "";
			var length = data.length;
			var host = jQuery("#secondHostHost").text();
			for(var i = 0;i < length;i++) {			    		
	    		tr += "<tr>"
	    		if(data[i].host == host) {
		    	    tr += "<td><input type='radio' name='dr' checked = 'checked'></td>";
		    	} else {
		    	    tr += "<td><input type='radio' name='dr'></td>";
		    	}
	    		tr += "<td id='device'>" + data[i].host + "</td>";
	    		tr += "<td>" + data[i].ip + "</td>";
	    		tr += "</tr>"
		    } 
	    	jQuery("#devices").append(tr);
		},
		error:function(err){
			alert(err);
		}
	});
}

//关注网络设备保存
function focusEquipmentSave(obj){
	//弹框关闭
	popupClose(obj);
	var host = jQuery(":radio[name='dr']:checked").parent().siblings("#device").text();
	if(host == null || host == "") {
		host = jQuery("#secondHostHost").text();
	}
	dealSecondHostInfo(host);
	dealSecondHostInterface(host);
}

//topN设置
function topSetting(obj){
	var object = $(obj);
	var id = object.attr('id');
	var left = object.offset().left - 140;
	var top = object.offset().top + 35;
	popOpen(id,left,top);
}

//topN设置保存
function topSettingSave(obj){
	//弹框关闭
	popupClose(obj);
	resfreshCpu();
}
function resfreshCpu(){
	limit=$("#cpulimit").val();
	threshold=$("#cpulimit2").val();
	loadCpuRate(threshold,limit);
}

//接口左移右移
var canMoveNext,canMovePrev,canMoveNext1, canMovePrev1,isMoving,speed,moveDis;
canMoveNext = false; // 是否可以向右移动
canMovePrev = false; // 是否可以向左移动
isMoving = false;
canMoveNext1 = false; // 是否可以向右移动
canMovePrev1 = false; // 是否可以向左移动
speed = 300; //移动速度

/**
 * 检查图片缩略图边界.
 */
/* var checkToolRange = function(){
	iconWidthRegion = $('#iconList').width();
	iconWidths = $('#iconWidth .jiekou').outerWidth() * $('#iconWidth .jiekou').length;
	var leftOffset = parseInt($('#iconWidth').css('margin-left')); // 偏移量
	//console.log(leftOffset);
	if (leftOffset + iconWidths <= iconWidthRegion) {
		// 右边界超出
		leftOffset = iconWidthRegion - iconWidths;
		canMoveNext = false;

		// 已经到底了，不能再在移动了
		$('#arrowNext').addClass('grey1');
	} else {
		canMoveNext = true;

		$('#arrowNext').removeClass('grey1');
	}

	if (leftOffset >= 0) {

		// 左边界超出
		leftOffset = 0;
		canMovePrev = false;

		// 已经到顶了，不能再在移动了
		$('#arrowPrev').addClass('grey1');
	} else {
		canMovePrev = true;

		$('#arrowPrev').removeClass('grey1');
	}

	$('#iconWidth').css('marginLeft',leftOffset+'px');

	isMoving = false;
};
 */

/**
 * 底部箭头点击事件处理函数
 */
function arrowNext(){

	if (!canMoveNext1 || isMoving) return;
	isMoving = true;
	var leftOffset = parseInt($('#iconWidth').css('margin-left')); // 偏移量
	var temp = leftOffset + iconWidths - iconWidthRegion;
	//实际能容纳的个数
	var interfaceListLength = parseInt($("#iconList").width()/($('#iconWidth .jiekou').outerWidth())); 
	var moveDis1 =  $('#iconWidth .jiekou').width() * interfaceListLength;
	$('#iconWidth').animate({marginLeft:'-=' + moveDis1 + 'px'},speed,function(){
		checkNetRange();
	});
	
};

/**
 * 左箭头点击事件处理函数
 */
function arrowPrev(){
	if (!canMovePrev1 || isMoving) return;
	isMoving = true;
	var leftOffset = parseInt($('#iconWidth').css('margin-left')); // 偏移量
	var temp = Math.abs(leftOffset);
	var offsetNumber = temp/($('#iconWidth .jiekou').width()),
		moveDis2;
	//实际能容纳的个数
	var interfaceListLength = parseInt($("#iconList").width()/($('#iconWidth .jiekou').outerWidth()));
	if (offsetNumber < interfaceListLength) {
		moveDis2 =  $('#iconWidth .jiekou').outerWidth() * offsetNumber;
	} else {
		moveDis2 =  $('#iconWidth .jiekou').outerWidth() * interfaceListLength;
	}

	$('#iconWidth').animate({marginLeft:'+=' + moveDis2 + 'px'},speed,function(){checkNetRange();});
};



var checkToolRange = function(){
	$("#iconList1").css("width", "100%");
	iconWidthRegion = $('#iconList1').width();
	iconWidths = $('#firstHostInterface .interface-list').outerWidth() * $('#firstHostInterface .interface-list').length;
	var iconListLength = parseInt($("#iconList1").width()/($('#firstHostInterface .interface-list').outerWidth()));
	if (! (iconListLength >= $('#firstHostInterface .interface-list').length)) {
		$("#iconList1").css("width", iconListLength * $('#firstHostInterface .interface-list').outerWidth());
	} else {
		$('#firstHostInterface').css('marginLeft',0);
	}
	$('#firstHostInterface').css("width",iconWidths);
	var leftOffset = parseInt($('#firstHostInterface').css('margin-left')); // 偏移量
	if (leftOffset + iconWidths <= iconWidthRegion) {
		// 右边界超出
		leftOffset = iconWidthRegion - iconWidths;
		canMoveNext = false;
		// 已经到底了，不能再在移动了
		$('#arrowNext1').addClass('grey');
	} else {
		canMoveNext = true;

		$('#arrowNext1').removeClass('grey');
		$("#arrowNext1").css("left", (iconListLength * $('#firstHostInterface .interface-list').outerWidth()+17)+'px');
	}

	if (leftOffset >= 0) {
		// 左边界超出
		leftOffset = 0;
		canMovePrev = false;

		// 已经到顶了，不能再在移动了
		$('#arrowPrev1').addClass('grey');
	} else {
		canMovePrev = true;

		$('#arrowPrev1').removeClass('grey');
	}
	isMoving = false;
	//处理告警预览下的表格父元素高度
	var monitorHeight = $(".monitor-screen-cell-box", "#index-cell-row-3").outerHeight(),
		monitorRightHeight = $("#index-cell-row-head-4").outerHeight() + $("#tabs").outerHeight();
	$(".monitor-tabs-box", "#index-cell-row-body-4").css("height",(monitorHeight - monitorRightHeight)+"px");
	//计算下方两个div的高度
	var leftCellHeight = $("#index-cell-3").outerHeight(),
		monitorHeight = $("#index-cell-row-3").outerHeight(),
		leftHeight = leftCellHeight-monitorHeight;
	if (leftHeight > 300) {
		$("#index-cell-5").css("height", leftHeight);
		$("#index-cell-6").css("height", leftHeight);
	} else {
		$("#index-cell-5").css("height", 300);
		$("#index-cell-6").css("height", 300);
	}
 	var netMonotorHeight = $("#index-cell-5").height(),
		CPUHeadheight = $("#index-cell-head-6").outerHeight();
	$("#index-cell-body-6").css("height", (netMonotorHeight - CPUHeadheight)+"px");
	var netHeadHeight = $("#index-cell-head-5").outerHeight(),
		titleHeight = $(".m-title", "#index-cell-5").outerHeight(),
		contentHeight = leftHeight-netHeadHeight-titleHeight-15;
	//debugger
	//$("#container-speed-cpu-2").css("height", contentHeight/2);
	//$("#container-speed-memory-2").css("height", contentHeight/2);
};

var checkNetRange = function() {
	//处理关注网络设备的左右箭头
	$("#iconList").css("width", "70%");
	var interfaceWidthRegion = $('#iconList').width(),  
		interfaceWidths = $('#iconWidth .jiekou').outerWidth() * $('#iconWidth .jiekou').length;
	//console.log(interfaceWidthRegion)
	$("#iconWidth").css("width", interfaceWidths);
	//实际能容纳的个数
	var interfaceListLength = parseInt($("#iconList").width()/($('#iconWidth .jiekou').outerWidth())); 
	if (! (interfaceListLength >= $('#iconWidth .jiekou').length)) {
		var interfaceListLe = interfaceListLength >1?interfaceListLength -1:interfaceListLength;
		$("#iconList").css("width", interfaceListLe* ($('#iconWidth .jiekou').outerWidth()));
	} else {
		$('#iconWidth').css('marginLeft',0);
	}
	//$('#secondHostInterface').css("width",interfaceWidths);
	var leftOffset = parseInt($('#iconWidth').css('margin-left')); // 偏移量
	if (leftOffset + interfaceWidths <= interfaceWidthRegion) {
		// 右边界超出
		leftOffset = interfaceWidthRegion - interfaceWidths;
		canMoveNext1 = false;
		// 已经到底了，不能再在移动了
		$('#arrowNext').addClass('grey');
	} else {
		canMoveNext1 = true;
		$('#arrowNext').removeClass('grey');
	}

	if (leftOffset >= 0) {
		// 左边界超出
		leftOffset = 0;
		canMovePrev1 = false;
		// 已经到顶了，不能再在移动了
		$('#arrowPrev').addClass('grey');
	} else {
		canMovePrev1 = true;
		$('#arrowPrev').removeClass('grey');
	}
	isMoving = false;
}
/**
 * 底部箭头点击事件处理函数
 */
function arrowNext1(){
	//debugger
	if (!canMoveNext || isMoving) return;
	isMoving = true;
	var leftOffset = parseInt($('#firstHostInterface').css('margin-left')); // 偏移量

	var temp = leftOffset + iconWidths - iconWidthRegion;
	if( temp < 150){
		moveDis =  temp;
	}else{
		moveDis =150;
	}
	moveDis = 150;
	$('#firstHostInterface').animate({marginLeft:'-=' + moveDis + 'px'},speed,function(){
		checkToolRange();
	});
	
};

/**
 * 左箭头点击事件处理函数
 */
function arrowPrev1(){
	if (!canMovePrev || isMoving) return;
	isMoving = true;
	var leftOffset = parseInt($('#firstHostInterface').css('margin-left')); // 偏移量
	var temp = Math.abs(leftOffset);
	if( temp <150){
		moveDis =  temp;
	}else{
		moveDis =150;
	}

	$('#firstHostInterface').animate({marginLeft:'+=' + moveDis + 'px'},speed,function(){checkToolRange();});
};

/**
 * 获取主机组单个主机
 */
function getHost(group) {
	var host = '';
	jQuery.ajax({
		method:"POST",
		data:{
			group:group
		},
		url:"${ctx}/screen/selectSingleHostByHostGroupName.json",
		async:false,
		success:function(data){
			host =  data.host;
		},
		error:function(err){
			alert(err);
		}
	});
	return host;
}

//用户刷新时间
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>