<extend name="Public/base"/>

<block name="sidebar"></block>

<block name="style">
    <style>
        body{padding: 0}
    </style>
</block>
<block name="body">
<link rel="stylesheet" href="__CSS__/kendo.dataviz.min.css" />
<link rel="stylesheet" href="__CSS__/kendo.default.min.css" />
<link rel="stylesheet" href="__CSS__/kendo.rtl.min.css" />
<script src="__JS__/kendo.dataviz.min.js"></script>
<script src="__JS__/kendo.timezones.min.js"></script>
<script src="__STATIC__/layer/layer.js" type="text/javascript"></script>
    <!-- 主体 -->
    <div id="indexMain" class="index-main">
       <!-- 插件块 -->
       <div class="container-span aiwrap">
			 
			 <div class="xg_patone">
	<div class="xg_hello">
		<span class="xg_spanmar"><span class="col_333">您好,</span><span class="xg_colb"><notempty name="data.nickname">{$data.nickname}<else />{$data.username}</notempty></span>({$data.group})</span>
		<span>上次登录时间:</span><span class="xg_spanmar">{$data.last_login_time|date='Y-m-d H:i:s',###}</span>
		<span>上次登录IP:</span><span class="xg_spanmar">{:long2ip($data['last_login_ip'])}</span>
		<span>累计登录次数:</span><span>{$data.login}</span>
	</div>
	
	<div class="xg_zhchart">
		<div class="timeandtab">
			<div class="time_fl jsctitle">
				<div class="pt-datepicker__date js-pt-calendar">
					<i class="icon_date"></i>
					<time class="pt-datepicker__date-from pt-fl js-pt-calendar-from jsctitle1">{:str_replace('-','/',substr(I('start',date('Y/m/d',strtotime('-1 day'))),5))}</time>
					<time class="pt-datepicker__date-to js-pt-calendar-to jsctitle2">{:str_replace('-','/',substr(I('end',date('Y/m/d',strtotime('-1 day'))),5))}</time>
					<i class="xg_dropi js-pt-datepicker__date-i"></i>
				</div>
				<div class="xg_daterangepicker js-show-calendar">
					<div class="ranges">
						<ul>
							<li class="<eq name='num' value='1'>datapick_active</eq>"><a href="{:U('index',array('start'=>date('Y-m-d'),'end'=>date('Y-m-d'),'num'=>1))}">今天</a></li>
							<li class="<eq name='num' value='2'>datapick_active</eq>"><a href="{:U('index',array('start'=>date('Y-m-d',strtotime('-1 day')),'end'=>date('Y-m-d',strtotime('-1 day')),'num'=>2))}">昨天</a></li>
							<li class="<eq name='num' value='3'>datapick_active</eq>"><a href="{:U('index',array('start'=>date('Y-m-d',mktime(0,0,0,date('m'),date('d')-6-date('w'),date('Y'))),'end'=>date('Y-m-d',mktime(0,0,0,date('m'),date('d')-date('w'),date('Y'))),'num'=>3))}">过去整周</a></li>
							<li class="<eq name='num' value='4'>datapick_active</eq>"><a href="{:U('index',array('start'=>date('Y-m-d',mktime(0,0,0,date('m')-1,1,date('Y'))),'end'=>date('Y-m-d',mktime(0,0,0,date('m'),1,date('Y'))-1),'num'=>4))}">过去整月</a></li>
							<li class="<eq name='num' value='5'>datapick_active</eq>"><a href="{:U('index',array('start'=>date('Y-m-d',strtotime('-7 day')),'end'=>date('Y-m-d',strtotime('-1 day')),'num'=>5))}">过去7天</a></li>
							<li class="<eq name='num' value='6'>datapick_active</eq>"><a href="{:U('index',array('start'=>date('Y-m-d',strtotime('-30 day')),'end'=>date('Y-m-d',strtotime('-1 day')),'num'=>6))}">过去30天</a></li>
							<!-- <li class="<eq name='num' value='7'>datapick_active</eq>"><a href="{:U('index',array('start'=>date('Y-m-d',strtotime('-365 day')),'end'=>date('Y-m-d',strtotime('-1 day')),'num'=>7))}">过去一年</a></li> -->
						</ul>
						<div class="range_inputs">
							<button class="applyBtn pt-btn btn-success js_determine" type="button">确定</button>
						</div>
					</div>
					<div class="xg_zcalendar xg_left">
						<div class="calendar-table">
						<table class="table-condensed jscalendar1">
							<thead>
								<tr>
									<th class="prev available jspn" data-range-key="{$calendar.prev}"><i class=" page-Previous "></i></th>
									<th colspan="5" class="month">{$calendar.ftitle}</th>
									<th></th>
								</tr>
								<tr>
									<th>一</th>
									<th>二</th>
									<th>三</th>
									<th>四</th>
									<th>五</th>
									<th>六</th>
									<th>日</th>
								</tr>
							</thead>
							<tbody class="jscalendarcontent">
								<volist name="calendar[first]" id="vo">
								<tr>
									<volist name="vo" id="v" key="j">
									<td class="<eq name='v.full' value='$calendar.today'>today</eq> <eq name='j' value='6'>weekend<else /><eq name='j' value='7'>weekend</eq></eq> available <notempty name='v.value'>jsselect</notempty>" data-key="{$v.full}"><span>{$v.value|default=' '}</span></td>
									</volist>
								</tr>
								</volist>
							</tbody>
						</table>
					</div>
				</div>
				<div class="xg_zcalendar xg_right">
					<div class="calendar-table">
						<table class="table-condensed jscalendar2">
							<thead>
								<tr>
									<th></th>
									<th colspan="5" class="month">{$calendar.ltitle}</th>
									<th class="next <eq name='calendar.iscurrent' value='1'>available jspn</eq>" data-range-key="{$calendar.next}"><i class="page-next"></i></th>
								</tr>
								<tr>
									<th>一</th>
									<th>二</th>
									<th>三</th>
									<th>四</th>
									<th>五</th>
									<th>六</th>
									<th>日</th>
								</tr>
							</thead>
							<tbody class="jscalendarcontent">
								<volist name="calendar[last]" id="vo">
								<tr>
									<volist name="vo" id="v" key="j">
									<td class="<eq name='v.full' value='$calendar.today'>today</eq> <notempty name='v.value'><eq name='v.no' value='1'>noselect<else />jsselect</eq></notempty> <eq name='j' value='6'>weekend<else /><eq name='j' value='7'>weekend</eq></eq> available" data-key="{$v.full}" ><span>{$v.value|default=' '}</span></td>
									</volist>
								</tr>
								</volist>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 图表数据图切换按钮 begin-->
		<div class="tab_fr tab_head">	
			<a href="#0" data-key="news" class="<empty name='Think.get.tb'>current<else /><eq name='Think.get.tb' value='0'>current</eq></empty>">新增用户</a>
			<a href="#1" data-key="active" class="<eq name='Think.get.tb' value='1'>current</eq>">活跃用户</a>				
			<a href="#2" data-key="player" class="<eq name='Think.get.tb' value='2'>current</eq>">付费用户</a>				
			<a href="#3" data-key="news" class="<eq name='Think.get.tb' value='3'>current</eq>">充值金额</a>			
		</div>
	<!--end 图表数据图切换按钮-->
	<!-- heightChart! begin -->
		<div class="htchart_area tab_content">
			<div class="htchart_area_tab <empty name='Think.get.tb'>show<else /><eq name='Think.get.tb' value='0'>show</eq></empty>" id="container1" style="width:100%;height:220px;"></div>
			<div class="htchart_area_tab <eq name='Think.get.tb' value='1'>show</eq>" id="container2" style="width:100%;height:220px;"></div>
			<div class="htchart_area_tab <eq name='Think.get.tb' value='2'>show</eq>" id="container3" style="width:100%;height:220px;"></div>
			<div class="htchart_area_tab <eq name='Think.get.tb' value='3'>show</eq>" id="container4" style="width:100%;height:220px;"></div>
		</div>
	<!--end heightChart!-->
		<div class="xg_analybox clearfix">
			<div class="analy_div">
				<div class="analy_divcontent">
					<h3 class="col_o">{:set_number_short($foldline['compare']['news']['count'])}</h3>
					<div>
						<span class="analy_spantit">新增用户</span>
						<notempty name="foldline.compare.news">
							<gt name="foldline.compare.news.rate" value="0">
							<span class="analy_plus">+{$foldline.compare.news.rate}%<i class="xg_plusTriangle"></i></span>
							<else />
							<lt name="foldline.compare.news.rate" value="0">
							<span class="analy_decline">{$foldline.compare.news.rate}%<i class="xg_declineTriangle"></i></span>
							<else />
							<span class="">--</span>
							</lt>
							</gt>
							<else /><span class="">--</span>
						</notempty>
					</div>
					<div>
						<span class="analy_spantit">平台累计用户</span>
						<span class="col_b">{:set_number_short($user_count)}</span>
					</div>
				</div>	
			</div>
			<div class="analy_div">
				<div class="analy_divcontent">
					<h3 class="col_o">{:set_number_short($foldline['compare']['active']['count'])}</h3>
					<div>
						<span class="analy_spantit">活跃用户</span>
						<notempty name="foldline.compare.active">
							<gt name="foldline.compare.active.rate" value="0">
							<span class="analy_plus">+{$foldline.compare.active.rate}%<i class="xg_plusTriangle"></i></span>
							<else />
							<lt name="foldline.compare.active.rate" value="0">
							<span class="analy_decline">{$foldline.compare.active.rate}%<i class="xg_declineTriangle"></i></span>
							<else />
							<span class="">--</span>
							</lt>
							</gt>
							<else /><span class="">--</span>
						</notempty>
					</div>
					<div>
						<span class="analy_spantit">七日活跃用户</span>
						<span class="col_b">{:set_number_short($active_count)}</span>
					</div>
				</div>	
			</div>
			<div class="analy_div">
				<div class="analy_divcontent">
					<h3 class="col_o">{:set_number_short($foldline['compare']['player']['count'])}</h3>
					<div>
						<span class="analy_spantit">付费用户</span>
						<notempty name="foldline.compare.player">
							<gt name="foldline.compare.player.rate" value="0">
							<span class="analy_plus">+{$foldline.compare.player.rate}%<i class="xg_plusTriangle"></i></span>
							<else />
							<lt name="foldline.compare.player.rate" value="0">
							<span class="analy_decline">{$foldline.compare.player.rate}%<i class="xg_declineTriangle"></i></span>
							<else />
							<span class="">--</span>
							</lt>
							</gt>
							<else /><span class="">--</span>
						</notempty>
					</div>
					<div>
						<span class="analy_spantit">累计付费用户</span>
						<span class="col_b">{:set_number_short($player_count)}</span>
					</div>
				</div>	
			</div>
			<div class="analy_div">
				<div class="analy_divcontent">
					<h3 class="col_o">{:set_number_short($foldline['compare']['money']['count'])}</h3>
					<div>
						<span class="analy_spantit">充值金额</span>
						<notempty name="foldline.compare.money">
							<gt name="foldline.compare.money.rate" value="0">
							<span class="analy_plus">+{$foldline.compare.money.rate}%<i class="xg_plusTriangle"></i></span>
							<else />
							<lt name="foldline.compare.money.rate" value="0">
							<span class="analy_decline">{$foldline.compare.money.rate}%<i class="xg_declineTriangle"></i></span>
							<else />
							<span class="">--</span>
							</lt>
							</gt>
							<else /><span class="">--</span>
						</notempty>
					</div>
					<div>
						<span class="analy_spantit">累计充值金额</span>
						<span class="col_b">{:set_number_short($money_sum)}</span>
					</div>
				</div>	
			</div>
			<div class="analy_div">
				<div class="analy_divcontent">
					<h3 class="col_o">{:set_number_short($foldline['compare']['promote']['count'])}</h3>
					<div>
						<span class="analy_spantit">合作渠道</span>
						<notempty name="foldline.compare.promote">
							<gt name="foldline.compare.promote.rate" value="0">
							<span class="analy_plus">+{$foldline.compare.promote.rate}%<i class="xg_plusTriangle"></i></span>
							<else />
							<lt name="foldline.compare.promote.rate" value="0">
							<span class="analy_decline">{$foldline.compare.promote.rate}%<i class="xg_declineTriangle"></i></span>
							<else />
							<span class="">--</span>
							</lt>
							</gt>
							<else /><span class="">--</span>
						</notempty>
					</div>
					<div>
						<span class="analy_spantit">累计合作渠道</span>
						<span class="col_b">{:set_number_short($promote_sum)}</span>
					</div>
				</div>	
			</div>
		</div>
	</div>
</div>
	<!--第一部分结束-->		 
			 {:hook('AdminIndex')}
			 
			 </div>
       
    </div>
</block>

<block name="script">
<script>
	var datelist;
	$(function() {
	
		//点击时间显示日历 begin
		$(".js-pt-calendar").click(function(){
			$(".js-show-calendar").toggle();
		})
		//end 点击时间显示日历
		
		//点击确定关闭日历 begin
		$(".js_determine").click(function(){
			$(".js-show-calendar").hide();
		});
		//end 点击确定关闭日历
		
		if({$foldline.hours|default=1}==1) {
			Highcharts.setOptions({
				chart:{type:'areaspline',spacingLeft:0,},
				title:{text: null},legend:{enabled:false},yAxis:{title:{text:null}},
				tooltip:{backgroundColor: '#fff',borderColor:'white',borderRadius:10,borderWidth:1,shadow:true,animation:true,style:{color: "#999",fontSize: "12px",fontWeight: "blod",fontFamily: "Microsoft Yahei"},shared: true,useHTML: true,valueDecimals:2,
				headerFormat: '<table>',pointFormat:'',footerFormat:'</table>',pointFormatter:function(){var s = '<table style="text-align:center;"><small style="color:#1bb2eb;text-align:center;display:block;margin:0;padding:0;">'+this.y+'</small><small>';s += $('.jsctitle1').text()+'/';s += this.category+'~'+(this.index+1)+':00';s += '</small></table>';return s;}
				},
				credits:{enabled: false},
				plotOptions:{areaspline:{fillOpacity:0.5}},
				xAxis:{tickInterval:2,categories:['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],tickmarkPlacement:'on'},
			});
			datelist = [{$foldline.date}];
		} else {
			Highcharts.setOptions({
				chart:{type:'areaspline',spacingLeft:0,},
				title:{text: null},legend:{enabled:false},yAxis:{title:{text:null}},
				tooltip:{backgroundColor: '#fff',borderColor:'white',borderRadius:10,borderWidth:1,shadow:true,animation:true,style:{color: "#999",fontSize: "12px",fontWeight: "blod",fontFamily: "Microsoft Yahei"},shared: true,useHTML: true,valueDecimals:2,headerFormat:'<small style="color:#1bb2eb;text-align:center;display:block;margin:0;padding:0;">{point.y}</small><small>{point.key}</small><table>',pointFormat:'',footerFormat:'</table>',},
				credits:{enabled: false},
				plotOptions:{areaspline:{fillOpacity:0.5}},
				xAxis:{categories:[{$foldline.date}],tickmarkPlacement:'on'},
			});
			datelist = [{$foldline.date}];
		}
		
		selectrange(datelist);

		$('#container1').highcharts({
      series:[{data:[{$foldline.news}]}]
    });
		
		$('#container2').highcharts({
			series:[{data:[{$foldline.active}]}]
    });
		
		$('#container3').highcharts({
			series:[{data:[{$foldline.player}]}]
    });
		
		$('#container4').highcharts({
			series:[{data:[{$foldline.money}]}]
    });
		
		//新增用户和付费用户数据图表切换
		$('.tab_head a').click(function() {
			var that=$(this),sib = that.closest('.tab_head').siblings('.tab_content');
			that.siblings().removeClass('current');
			var index= that.addClass('current').index();
			sib.find('.htchart_area_tab').removeClass('show').eq(index).addClass('show');
			
			$('.ranges li a').each(function() {
				var url = $.trim($(this).attr('href')).replace(/((\.htm(l?))?)$/g,'').replace(/\/tb\/[012]/g,'');
				
				$(this).attr('href',url+'/tb/'+index+'.html');
			});
			
		});
		
		
		$('.jsranges li').on('click',function() {
			var that = $(this),range = $.trim(that.attr('data-range-key')).split(',');
			if (that.hasClass('datapick_active')) {return false;}
			that.addClass('datapick_active').siblings('li').removeClass('datapick_active');
			parent = that.closest('.jsctitle');

			chartdata(range[0],range[1],parent);
			
			$(".js-show-calendar").toggle();
			
			return false;
		});
		
		$('.jspn').on('click',function() {
			
			jspn($(this));
			
			return false;
		});
		
		$('.js_determine').on('click',function() {
			var that = $(this),parent = that.closest('.jsctitle');
			if (parent.find('.in-range').length>0) {
				var first = parent.find('.jscalendarcontent .in-range.first').attr('data-key');
				var last = parent.find('.jscalendarcontent .in-range.last').attr('data-key');				

				chartdata(first,last,parent);
				
			} else {
				layer.msg('请选择时间范围');
			}
			return false;
		});
		
		jsselect();
			
	});
	
	function selectrange(range) {
		if (range) {
			$.each(range,function(i,n) {
				if (i == 0) {$('.available[data-key="'+n+'"]').addClass('in-range first');}
				else if (i == range.length-1) {$('.available[data-key="'+n+'"]').addClass('in-range last');}
				else {$('.available[data-key="'+n+'"]').addClass('in-range');}
			});
		}
	}
	//执行日期的选择
	function chartdata(start,end,parent) {
		var starttime = new Date(start).getTime();
		if(end){
			var endtime = new Date(end).getTime();
		}else{
			var endtime = new Date(start).getTime();
		}
		if(starttime > endtime){
			var temp = start;
			start = end;
			end = temp;
		}

		if(end && (start != end)){
			var endtime =  (new Date(end).getTime()) + 86399000;
			var now = new Date().getTime();
			if(endtime > now){
				layer.msg('历史时间选择不能包含今日');
				return false;
			}
		};
		
		var index = layer.load(1, {
			shade: [0.3,'#000'] //0.1透明度的白色背景
		});

		var href = '{:U("index")}';
		end = end?end:start;
		var tb = $.trim($('.tab_head a.current').attr('href')).replace('#','');
		window.location.href = href.replace('.html','')+'/start/'+start+'/end/'+end+'/tb/'+tb+'.html';
		
	}
	
	function getdatelist(start,end) {
		var i = start,j=0;
		var range=[];
		while(i<=end) {
			var date = new Date(i);
			range[j++] = date.getFullYear()+'-'+supplement_zero(date.getMonth()+1)+'-'+supplement_zero(date.getDate());
			i+=86400000;
		}
		return range;
	}
	
	function supplement_zero(num) {
		return num.toString().length==1?'0'+num:num;
	} 
	
	function jsselect() {
		$('.jsselect').on('click',function(){
			var that = $(this),sib = $('.jsselect.active');
			if (sib.length<1) {
				$('.jsselect').removeClass('in-range first last');
				that.addClass('active first in-range');
			} else if (sib.length==1) {
				that.addClass('active last');
				var val = (new Date($.trim(that.attr('data-key')).replace(/-/g,'/'))).getTime();
				var sibval = (new Date($.trim(sib.attr('data-key')).replace(/-/g,'/'))).getTime();
				
				if (val<sibval) {
					that.removeClass('last').addClass('first');
					sib.removeClass('first').addClass('last');
					var temp = val;val = sibval;sibval=temp;
				}
				var dl = getdatelist(sibval,val);
				
				$.each(dl,function(i,n) {
					$('.jsselect[data-key="'+n+'"]').addClass('in-range');
				});
				
			} else {
				$('.jsselect').removeClass('in-range active first last');
				that.addClass('active first');
			}
			
			return false;
		});	
	}
	
	
	function jspn(that) {
		
		var range = $.trim(that.attr('data-range-key')).split(',');
			if (that.hasClass('disabled')) {return false;}
			that.addClass('disabled');
			$.ajax({
				type:'post',
				dataType:'json',
				url:'{:U("calendar")}',
				data:{start:range[0],end:range[1],flag:true},
				success:function(data) {
					var first = $('.jscalendar1');
					var last = $('.jscalendar2');
					
					var dfirst = data.first;
					var dlast = data.last;
					
					first.find('.month').text(data.ftitle).siblings('.prev').attr('data-range-key',data.prev);
					var next = last.find('.month').text(data.ltitle).siblings('.next').attr('data-range-key',data.next);
					if (parseInt(data.iscurrent)==1){next.addClass('available jspn');} else {next.removeClass('available jspn');}
					var ftemp = '';var ltemp = '';
					$.each(dfirst,function(i,n) {
						ftemp += '<tr>';
							$.each(n,function(j,m) {
								var classname = '';
								if (m.full == data.today) {classname += ' today ';}
								if (m.no == 1) {classname += ' noselect ';}
								if (j == 6 || j == 7) {classname += ' weekend ';}
								ftemp += '<td class="available jsselect '+classname+' " data-key="'+m.full+'" ><span>';
								if (m.value) {ftemp += m.value;}
								else {ftemp += ' ';}
								ftemp += '</span></td> ';
							});
						ftemp += '</tr>';
						
					});
					
					first.find('.jscalendarcontent').html('').html(ftemp);
					
					$.each(dlast,function(i,n) {
						ltemp += '<tr>';
							$.each(n,function(j,m) {
								var classname = '';
								if (m.full == data.today) {classname += ' today ';}
								if (m.no == 1) {classname += ' noselect ';} else {classname += ' jsselect ';}
								if (j == 6 || j == 7) {classname += ' weekend ';}
								ltemp += '<td class="available '+classname+' " data-key="'+m.full+'" ><span>';
								if (m.value) {ltemp += m.value;}
								else {ltemp += ' ';}
								ltemp += '</span></td> ';
							});
						ltemp += '</tr>';
						
					});
					
					last.find('.jscalendarcontent').html('').html(ltemp);
					
					that.removeClass('disabled');
					
					$('.jspn').on('click',function() {jspn($(this)); return false;});
					selectrange(datelist);
					jsselect();
				},error:function() {
					layer.msg('服务器错误,请稍候再试');that.removeClass('disabled');
				}
			});
		
	}
	
	
</script>			 
<script type="text/javascript">
    /* 插件块关闭操作 */
    $(".title-opt .wm-slide").each(function(){
        $(this).click(function(){
            $(this).closest(".columns-mod").find(".bd").toggle();
            $(this).find("i").toggleClass("mod-up");
        });
    })
    $(function(){
        $('.copyright').html('<div class="copyright"> &copy;2013-2017 徐州梦创信息科技有限公司版权所有</div>');
        $('.sidebar').remove();
    })
</script>
</block>