<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="sitemesh"
	uri="http://www.opensymphony.com/sitemesh/decorator"%>
<%@ 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();
}
%>
<script>var myUserId = "<%= myUserId %>"</script>
<div class="header-title-nobg table com-head">
	<div class="" style="position: relative;">
		<h1>流量趋势</h1>
		<div id="maskingLayer"
			style="width: 100%; height: 60px; background: #fff; position: absolute; left: 0; top: 39px; z-index: 2"></div>
		<ul>
			<li><span>快速访问组</span> <select autocomplete="off"
				id="selectGroup">
			</select> <span>图形</span> <select autocomplete="off" id="selectPic"
				style="width: 200px;">
			</select></li>
		</ul>
	</div>
	<div class="borderClass"></div>
</div>
<div class="body" id="cpuList">
	<div class="iframeContent"></div>
</div>
<script>
MMenu.def_label = 'network';
var selectGroup=jQuery('#selectGroup');
var selectPic=jQuery('#selectPic');
var id=0;
var thisUserId = myUserId;
jQuery.ajax({
	  method: "get",
	  url: "${ctx}/quickaccessgraph/findFastGroupByUser.json",
	  data : {
			userId : thisUserId,

		  },
		  
	  success:function(data) {
		   var a = "1";
		   var html=''; 
		   html+='<option data-value="'+ a +'" selected="selected"> 所有 </option>'
		   html+='<option data-value="'+data[0].id+'">'+data[0].name+'</option>'
		   for(var i=1;i<data.length;i++){
			  
			  html += '<option data-value="'+data[i].id+'">'+data[i].name+'</option>';
		   }
		  jQuery('#selectGroup').html(html);
		  var number=selectGroup.find("option:first-child").attr('data-value');
		  id=number;
	  }
  });
setTimeout(function(){
	var firstId=selectGroup.find("option:selected").attr('data-value');
	 jQuery.ajax({
		 method: "get",
		  url: "${ctx}/quickaccessgraph/findFastGroupGraphByFastGroupId.json",
		  data : {
			  fastGroupId :firstId,

			  },
		  success:function(data) {
			   var html='';  
			   html+= '<option data-id="'+data[0].graphId+'"  data-value="'+data[0].groupId+'" selected="selected">'+data[0].name+'</option>';
			   for(var i=1;i<data.length;i++){
				 
				  html += '<option data-id="'+data[i].graphId+'"  data-value="'+data[i].groupId+'">'+data[i].name+'</option>';
			   }
			   selectPic.html(html);
			var firstGroupId=selectPic.find("option:selected").attr('data-value');
			var firstGraphId=selectPic.find("option:selected").attr('data-id');
			 loadUsedRateInfo(firstGroupId,firstGraphId);
		  },
		  error:function(err){
			  alert(err);
		  }
	});
},200)

    
selectGroup.change(function(){
	var changeId=selectGroup.find("option:selected").attr('data-value');
	jQuery.ajax({
		 method: "get",
		  url: "${ctx}/quickaccessgraph/findFastGroupGraphByFastGroupId.json",
		  data : {
			  fastGroupId : changeId,

			  },
		  success:function(data) {
			   var html='<option data-id="-1"  data-value="-1" selected="selected">请选择图形</option>';   
			   for(var i=0;i<data.length;i++){
				 
				  html += '<option data-id="'+data[i].graphId+'"  data-value="'+data[i].groupId+'">'+data[i].name+'</option>';
			   }
			   selectPic.html(html);
		  },
		  error:function(err){
			  alert(err);
		  }
	})
})
selectPic.change(function(){
	var groupId=selectPic.find("option:selected").attr('data-value');
	var graphId=selectPic.find("option:selected").attr('data-id');
	if(groupId =="-1"){
		return;
	}
	loadUsedRateInfo(groupId,graphId);
})
 function loadUsedRateInfo(groupId,graphId){
	
	 jQuery('.iframeContent').html('<iframe id="graphid" class="memRate" width="100%" height="600" src="../php/charts.php?groupid='+groupId+'&graphid='+graphId+'&fullscreen=1" onload="loadIframe()" class="iframe"></iframe>');
	 
	}
function loadIframe(){
	var memRate=jQuery('.memRate').contents();
	memRate.find('body').css("background-color", "#fff");
	memRate.find('body').css("margin-bottom", 0);
	/* memRate.find('body .header-title').remove(); */
	/* jQuery('#maskingLayer').css("display","none"); */
	/* jQuery('.memRate').css("margin-top","47px") */
	
}
</script>