<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>首页</title>
		<%@ include file="../../common/meta.jsp"%>
		<link rel="stylesheet" type="text/css" href="${ctx}/styles/main.css" />
		<script type="text/javascript" src="${ctx}/plugins/jquery/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="${ctx}/plugins/fusionchart/scripts/FusionCharts.js"></script>
		<script type="text/javascript">
		/**
		 * 可以使用url传参的方式定义需要查询的时间 
		 */
			var REQUEST_TIME = 60000;
			$(document).ready(function(){
				$("body").show();
				query();
				var param = '${param}';
				param = param.replace('=',':');
			});
			function query(){
				$.ajax({
					type: "POST",
					url: "${ctx}/portal/widget!ajaxWidget.action",
					data: {id:'${param.id}'},
					cache: false,
					dataType: "json",
					timeout: REQUEST_TIME,
					error: function (XMLHttpRequest, textStatus, errorThrown) {
						var tip = '网络连接失败...';
						if ('timeout' == textStatus) tip = '系统忙、请稍候再试...';
						$('#top').data('day',{success: false,desc: tip,error: textStatus});
					},
					success: function(msg){
						if( msg.success ){
							if(msg.id == 5){
								$('.fl','#dayChart').show();
								renderLineChart({chartId: 'reLogonUserRatio', width:'400',height:'210',xml: msg.xml});
								
							}else{
								$('.fl','#dayChart').show();
								renderAngularGaugeChart({chartId: 'reLogonUserRatio', width:'200',height:'110',xml: msg.xml});
								
								$('.word',$('#reLogonUserRatio').parent()).html('留存率：'+msg.desc+'%');
							}
							
						} else {
							$('.fl','#dayChart').hide();
							$('#dayChart').append('<h4 class="warn">'+opt.desc+'</h4>');
						}
					}
			  	});
			};
			function renderLineChart(opt){
				opt.swf = '/bi/plugins/fusionchart/MSCombiDY2D.swf';
				renderChart(opt);
			};
			function renderAngularGaugeChart(opt){
				opt.swf = '/bi/plugins/fusionchart/AngularGauge.swf';
				renderChart(opt);
			};
			function renderChart(opt){
				var myChart = new FusionCharts(opt.swf, opt.chartId+"_Id", opt.width, opt.height, "0", "0");
				myChart.setDataXML(opt.xml);
				myChart.render(opt.chartId);
				//	缓存数据
				if( parseInt(opt.width) > 300 ){
					$('#'+opt.chartId).data('swf',opt.swf)
						.data('xml',opt.xml);
				}
			};
				
		</script>
	</head>
	<body>
		<div id="dayChart" class="fr">
			<div class="fl" ">
				<div class="chartWrap">
					<div class="chartContent"><div id="reLogonUserRatio"></div><div class="word"></div></div>
				</div>
			</div>
		</div>
	</body>
</html>