You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

530 lines
20 KiB
HTML

5 years ago
<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 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>