<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"> ©2013-2017 徐州梦创信息科技有限公司版权所有</div>'); $('.sidebar').remove(); }) </script> </block>