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.

346 lines
14 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<extend name="Public/base"/>
<block name="body">
<link rel="stylesheet" href="__CSS__/select2.min.css" type="text/css" />
<script type="text/javascript" src="__JS__/bootstrap.min.js"></script>
<script type="text/javascript" src="__JS__/select2.min.js"></script>
<style>
.select2-container--default .select2-selection--single {
color: #000;
resize: none;
border-width: 1px;
border-style: solid;
border-color: #a7b5bc #ced9df #ced9df #a7b5bc;
box-shadow: 0px 3px 3px #F7F8F9 inset;height:35px;
height:28px;border-radius:3px;font-size:12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height:35px;
line-height:28px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height:26px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
height:26px;line-height:26px;font-size:12px;
}
.select2-results__option[aria-selected] {font-size:12px;}
</style>
<div class="cf main-place top_nav_list navtab_list">
<h3 class="page_title">留存率分析</h3>
<p class="description_text">说明:根据日期,游戏,推广员分析用户留存率信息</p>
</div>
<div class="cf top_nav_list">
<!-- 高级搜索 -->
<div class="jssearch fl cf search_list">
<div class="input-list search-title-box">
<label>搜索:</label>
</div>
<div class="input-list">
<input type="text" id="time-start" name="start" class="" value="{:I('start',date('Y-m-d',strtotime('-7 day')))}" placeholder="选择开始时间" />
&nbsp;-&nbsp;
<input type="text" id="time-end" name="end" class="" value="{:I('end',date('Y-m-d',time()))}" placeholder="选择结束时间" />
</div>
<div class="input-list search_label_rehab">
<select id="game_id" name="game_id" class="select_gallery">
<option value="">请选择游戏</option>
<?php foreach($baseGames as $baseGame):?>
<option game-id="<?= $baseGame['id'] ?>" value="<?= $baseGame['id'] ?>"><?= $baseGame['name'] ?></option>
<?php endforeach;?>
</select>
</div>
<div class="input-list search_label_rehab">
<select id="device_type" name="device_type" class="select_gallery">
<option value="">请选择设备类型</option>
<option value="android" <?php if(I('device_type', '') == 'android'):?>selected<?php endif;?>>安卓</option>
<option value="ios" <?php if(I('device_type', '') == 'ios'):?>selected<?php endif;?>>IOS</option>
</select>
</div>
<div class="input-list input-list-promote search_label_rehab">
<select id="promote_id" name="promote_id" class="select_gallery" >
<option value="">推广员账号</option>
<volist name=":get_promote_list()" id="vo">
<option promote-id="{$vo.id}" value="{$vo.id}">{$vo.account}</option>
</volist>
</select>
</div>
<input type="hidden" name="" value="" class="sortBy">
<div class="input-list">
<a class="sch-btn" href="javascript:;" id="search" url="{:U('stat/userretention','model='.$model['name'].'&row='.I('row'),false)}">搜索</a>
</div>
</div>
</div>
<!-- 数据列表 -->
<div class="data_list">
<div class="">
<?php $noOrder = '<img src="__IMG__/up-down.png" width="13px">';?>
<table>
<!-- 表头 -->
<thead>
<tr>
<th ><a class="paixu" data-order='date'>日期 <?=$order_column=='date'?($order_type=='desc'?'▼':'▲'):$noOrder?></a></th>
<th>游戏名称</th>
<th>渠道名称</th>
<th ><a class="paixu" data-order='register_count'>新增玩家 <?=$order_column=='register_count'?($order_type=='desc'?'▼':'▲'):$noOrder?></a></th>
<th ><a class="paixu" data-order='retention_day1'>1日留存 <?=$order_column=='retention_day1'?($order_type=='desc'?'▼':'▲'):$noOrder?></a></th>
<th ><a class="paixu" data-order='retention_day2'>2日留存 <?=$order_column=='retention_day2'?($order_type=='desc'?'▼':'▲'):$noOrder?></a></th>
<th ><a class="paixu" data-order='retention_day3'>3日留存 <?=$order_column=='retention_day3'?($order_type=='desc'?'▼':'▲'):$noOrder?></a></th>
<th ><a class="paixu" data-order='retention_day4'>4日留存 <?=$order_column=='retention_day4'?($order_type=='desc'?'▼':'▲'):$noOrder?></a></th>
<th ><a class="paixu" data-order='retention_day5'>5日留存 <?=$order_column=='retention_day5'?($order_type=='desc'?'▼':'▲'):$noOrder?></a></th>
<th ><a class="paixu" data-order='retention_day6'>6日留存 <?=$order_column=='retention_day6'?($order_type=='desc'?'▼':'▲'):$noOrder?></a></th>
<th ><a class="paixu" data-order='retention_day7'>7日留存 <?=$order_column=='retention_day7'?($order_type=='desc'?'▼':'▲'):$noOrder?></a></th>
<th ><a class="paixu" data-order='retention_day15'>15日留存 <?=$order_column=='retention_day15'?($order_type=='desc'?'▼':'▲'):$noOrder?></a></th>
<th ><a class="paixu" data-order='retention_day30'>30日留存 <?=$order_column=='retention_day30'?($order_type=='desc'?'▼':'▲'):$noOrder?></a></th>
</tr>
</thead>
<!-- 列表 -->
<tbody>
<empty name="data" >
<tr>
<td colspan="13" class="text-center"><?= $error ? '<span style="color: #ff0000;">' . $error . '</span>': 'aOh! 暂时还没有内容!' ?></td>
</tr>
<else />
<volist name="data" id="vo">
<tr>
<td>{$vo.date}</td>
<td>{$vo.game_name}</td>
<td>{$vo.promote_name}</td>
<td>{$vo.register_count}</td>
<?php if ($vo['register_count']>0):?>
<td>{$vo['retention_day1']}%</td>
<td>{$vo['retention_day2']}%</td>
<td>{$vo['retention_day3']}%</td>
<td>{$vo['retention_day4']}%</td>
<td>{$vo['retention_day5']}%</td>
<td>{$vo['retention_day6']}%</td>
<td>{$vo['retention_day7']}%</td>
<td>{$vo['retention_day15']}%</td>
<td>{$vo['retention_day30']}%</td>
<?php else:?>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<?php endif;?>
</tr>
</volist>
</empty>
</tbody>
</table>
</div>
</div>
<div class="page">
<if condition="$role_export_check eq true ">
<a class="sch-btn" href="{:U('Export/userretention_export',
array(
'start' =>I('start',date('Y-m-d',strtotime('-7 day'))),
'end' =>I('end',date('Y-m-d',time())),
'game_id'=>I('game_id'),
'promote_id'=>I('promote_id'),
'device_type'=>I('device_type'),
'xlsname'=>'数据分析_留存率分析',)
,false)}">导出</a>
</if>
</div>
</block>
<block name="script">
<script src="__STATIC__/layer/layer.js"></script>
<script>
<volist name=":I('get.')" id="vo">
Think.setValue('{$key}',"{$vo}");
</volist>
$(".select_gallery").select2();
</script>
<link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
<php>if(C('COLOR_STYLE')=='blue_color') echo '<link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">';</php>
<link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script src="__STATIC__/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript">
//导航高亮
highlight_subnav("{:U('stat/userretention')}");
$(function(){
//搜索功能
$("#search").click(function(){
//计算天数差的函数,通用
function GetDateDiff(startDate,endDate)
{
var startTime = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
var endTime = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
var dates = Math.abs((startTime - endTime))/(1000*60*60*24);
return dates;
}
var start = $("#time-start").val();
start = start.substring(0,19);
var end = ($("#time-end").val() == "") ? "{:date('Y-m-d')}" : $("#time-end").val();
end = end.substring(0,19);
var interval = GetDateDiff(end,start);
if(interval < 0 || start == ''){
layer.msg('请选择搜索时间');
return false;
}else if(interval>90){
layer.msg('请选择90日内的时间段');
return false;
}
var url = $(this).attr('url');
var query = $('.jssearch').find('input').serialize();
query += "&"+$('.jssearch').find('select').serialize();
query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g,'');
query = query.replace(/^&/g,'');
if( url.indexOf('?')>0 ){
url += '&' + query;
}else{
url += '?' + query;
}
if (start !='' && end != ''){
if (Date.parse(start) > Date.parse(end)){
layer.msg('开始时间必须小于等于结束时间');
return false;
}
}
window.location.href = url;
});
$(".paixu").click(function(){
var that=$(this);
$data_order=that.attr('data-order');
$order_type='{$order_type}';
if ($order_type == '' || $order_type == 'asc') {
$(".sortBy").attr('name', 'data_order');
$(".sortBy").attr('value', $data_order + ',desc');
$("#search").click();
} else if ($order_type=='desc') {
$(".sortBy").attr('name', 'data_order');
$(".sortBy").attr('value', $data_order + ',asc');
$("#search").click();
}
});
//回车自动提交
$('.jssearch').find('input').keyup(function(event){
if(event.keyCode===13){
$("#search").click();
}
});
$('#time-start').datetimepicker({
format: 'yyyy-mm-dd',
language:"zh-CN",
minView:2,
autoclose:true
});
$('#time-end').datetimepicker({
format: 'yyyy-mm-dd',
language:"zh-CN",
minView:2,
autoclose:true,
pickerPosition:'bottom-left'
})
$(".chakan").click(function() {
that = $(this);
url = that.attr('href-url');
timetitle=that.attr('timetitle');
ptitle=' '+that.attr('ptitle')+' ';
layer.open({
type: 2,
title: false,
closeBtn: 0, //不显示关闭按钮
shade: [0],
area: ['1px', '1px'],
offset: 'rb', //右下角弹出
time: 1, // 秒后自动关闭 这里设置成1ms 不显示过度页面
anim: 2,
content: ['', 'no'], //iframe的urlno代表不显示滚动条
end: function(){ //
layer.open({
type: 2,
title: timetitle+ptitle+'游戏数据',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['50%', '45%'],
content: url//iframe的url
});
}
});
});
$("#game").on('click',function(event) {
var navlist = $(this).find('.i_list_li');
if (navlist.hasClass('hidden')) {
navlist.removeClass('hidden');
$(this).find('#i_list_id').focus().val('');
} else {
navlist.addClass('hidden');
}
$(document).one("click", function(){
navlist.addClass('hidden');
});
event.stopPropagation();
});
$('#game #i_list_id').on('keyup',function(event) {
var val = $.trim($(this).val()).toLowerCase();
$(this).closest('.drop-down').find('#i_list_idh').val(val);
});
$("#game #i_list_li").find("a").each(function(){
$(this).click(function(){
var text = $.trim($(this).text()).toLowerCase();
var val = $.trim($(this).attr('value'));
$(this).closest('.drop-down').find("#i_list_id").val(text);
$(this).closest('.drop-down').find('#i_list_idh').val(val);
})
});
$("#promote").on('click',function(event) {
var navlist = $(this).find('.i_list_li');
if (navlist.hasClass('hidden')) {
navlist.removeClass('hidden');
$(this).find('#i_list_id').focus().val('');
} else {
navlist.addClass('hidden');
}
$(document).one("click", function(){
navlist.addClass('hidden');
});
event.stopPropagation();
});
$('#promote #i_list_id').on('keyup',function(event) {
$(this).closest('.drop-down').find('#i_list_idh').val(-1);
});
$("#promote #i_list_li").find("a").each(function(){
$(this).click(function(){
var text = $.trim($(this).text()).toLowerCase();
$(this).closest('.drop-down').find("#i_list_id").val(text);
$(this).closest('.drop-down').find('#i_list_idh').val($(this).attr('value'));
})
});
})
</script>
</block>