cf-platform/Application/Home/View/default/Query/arpu.html

<extend name="Public/promote_base"/>
<block name="css">
<link href="__CSS__/20180207/data.css" rel="stylesheet">
<link href="__CSS__/20180207/finance.css" rel="stylesheet">
<style type="text/css">
 .keywords_information {margin-left:15px;cursor:pointer;}
.keywords_information .keywords_mark {height:35px;line-height:35px;color:#4A90F0;}
.keywords_information .keywords_mark span{border-bottom:1px solid transparent;}
.keywords_information .keywords_mark:hover span {border-bottom-color:#4A90F0;}
.keywords_information .keywords_content {transition:opacity 1.2s,visibility 1.5s;}
.keywords_information .keywords_content:before {margin-left:41px;}
.keywords_information .keywords_content .keywords_close {position:absolute;right:0;top:0;width:25px;height:40px;line-height:35px;color:#515974;}
.keywords_information .keywords_list span:first-child {width:160px;}
.keywords_information .keywords_list span:last-child {width:228px;}
.keywords_information {position:relative;display:inline-block;}
.keywords_information .keywords_mark {display:block;font-size:12px;font-style:normal;font-weight:normal; }
.keywords_information .keywords_content.active {visibility:visible;opacity:1;transition:visibility 1.5s,opacity 1s;}
.keywords_information .keywords_content {visibility:hidden;opacity:0;
    position:absolute;width:435px;z-index:10;background:#fff;border-radius:5px;
    border: 1px solid #E7ECEF;
    box-shadow: 1px 1px 15px rgba(0,0,0,.1);
    top:10px;left:72px;
}

.keywords_information .keywords_title {
    height:40px;line-height:40px;background-color:#FAFAFA;
    border-top-left-radius:5px;border-top-right-radius:5px;color:#515974;
    padding-left:10px;font-size:12px;
}
.keywords_information .keywords_list {overflow:hidden;clear:both;padding:5px;margin:0 8px;font-size:10px;border-bottom:1px solid #EBEEF5;}
.keywords_information .keywords_list:last-child {border-bottom:none;}
.keywords_information .keywords_list span {display:inline-block;display: block;font-weight: normal;color: #515974;
    float: left;
    line-height: 30px;
    width: 420px;}
    .keywords_information .keywords_list span:last-child{color: #a5a6bb;}
.keywords_information .keywords_list span:first-child {width:160px;margin-right:20px;}
.chakan{
      font-size: 14px;
      font-weight: normal;
      color: #26C7DB;
      cursor: pointer;
      display: inline-block;
      text-align: center;
  }
.chakan:hover{color: #2bd8ed;}
.trunk-list{position: relative;min-height: 66vh;}

.form-group {
  float: left;
  margin-bottom: 10px;
}
.form-group label {
  line-height: 34px;
  height: 34px;
}
.form-group .txt {
  width: 180px;
    height: 34px;
}
</style>
</block>

<block name="body">
    <div class="page-search normal_list query-recharge-search">
      <div class="trunk-title">
      	<div class="location">
		<div class="location-container">当前位置：<span>数据管理></span><span>ARPU统计</span></div>
		</div>
      	<img src="__IMG__/20180207/icon_normal_ARPU.png">
      	<span class="title_main">ARPU统计</span>
      	<span class="details">根据日期，游戏，推广员分析ARPU等相关数据信息（排除绑币）</span>
      	<div class="keywords_information" style="clear: both;">
        <i class="keywords_mark"><span>关键词说明</span></i>
        <ul class="keywords_content">
            <li class="keywords_title">关键词说明<a href="javascript:;" class="keywords_close"><img src="__IMG__/20180207/btn_normal_close.png"/></a></li>
            <li class="keywords_list">
                <span class="">活跃用户</span>
                <span class="">当天登录的用户总数</span>
            </li>
            <li class="keywords_list">
                <span class="">付费用户</span>
                <span class="">当天付费的用户数量</span>
            </li>
            <li class="keywords_list">
                <span class="">新增付费用户</span>
                <span class="">当天付费用户中第一次付费的用户数</span>
            </li>
            <li class="keywords_list">
                <span class="">新增付费额</span>
                <span class="">第一次付费的玩家当天充值总额</span>
            </li>
            <li class="keywords_list">
                <span class="">付费率</span>
                <span class="">付费用户/活跃用户</span>
            </li>
            <li class="keywords_list">
                <span class="">ARPU(每用户平均付费)</span>
                <span class="">当日总充值/活跃用户数</span>
            </li>
            <li class="keywords_list">
                <span class="">ARPPU(付费用户的平均付费)</span>
                <span class="">当日总充值/付费用户数</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="trunk-content article">
          <div class="trunk-search clearfix">
            <form action="{:U('Query/arpu',array('row'=>I('get.row')))}" method="post" enctype="multipart/form-data">
              <div class="form-group normal_space">
                <select id="game-select" name="game_id" class="reselect select_gallery" style="width: 220px;" >
                  <option value="0">请选择游戏</option>
                  <volist name="games" id="game">
                  <option value="{$game.game_id}" <if condition="I('game_id') eq $game['game_id']">selected</if>>{$game.game_name}</option>
                  </volist>
                </select>
              </div>
              <div class="form-group normal_space">
                <select id="server-select" name="server_id" class="reselect select_gallery" style="width: 220px;" data-server="{:I('server_id', 0)}">
                  <option value="0">请选择区服</option>
                </select>
              </div>
              <include file="Public/promote_select" />
              <div class="form-group normal_space">
                <label>起止时间：</label>
                <input type="text" class="txt range-date" name="time" placeholder="起止时间" value="{:I('time')}" >
              </div>
              <div class="form-group">
                <input type="submit" class="submit normal_space" value="查询">
              </div>
            </form>
          </div>
      </div>
    <div class="page-list query-recharge-list">

      <div class="trunk-content article">
          <div class="trunk-list">
            <table class="table normal_table" id="datacontent">
            <table class="table normal_table" id="datatable" style="<notempty name='list_data'>display:none;</notempty>"><thead>
                <tr class="odd">
                  <th>日期</th>
                  <if condition="I('game_id', 0) gt 0">
                    <th>游戏名称</th>
                  <else/>
                  <th>付费游戏数</th>
                  </if>
                  <if condition="I('promote_id', 0) gt 0 or I('sub_promote_id', 0) gt 0">
                    <th>所属渠道</th>
                  </if>
                  <th>活跃用户</th>
                  <th>新增用户</th>
                  <th>付费用户</th>
                  <th>新增付费用户</th>
                  <th>付费总额</th>
                  <th>付费率</th>
                  <th>新增付费额</th>
                  <th>累计付费用户</th>
                  <!-- <th>1日留存</th> -->
                  <th>ARPU</th>
                  <th>ARPPU</th>
                  <if condition="I('game_id', 0) eq 0">
                  <th>详情</th>
                  </if>
                </tr></thead><tbody>
                <?php
                  $colspan = 12;
                  if (I('promote_id', 0) > 0 || I('sub_promote_id', 0) > 0) {
                    $colspan += 1;
                  }
                ?>
                <empty name="records">
                <tr><td colspan="{$colspan}" style="text-align: center;height: 45vh;"><img src="__IMG__/20180207/icon_wushujv2.png"/><p style="line-height: 40px;color: #A5A5A5;">暂无数据</p></td></tr>
                <else />
                <volist name="records" id="vo" mod="2">
                <tr name="rows" class="<eq name='mod' value='1'>odd</eq>">
                  <td>{$vo.day}</td>
                  <if condition='empty(I("game_id")) != true'>
                    <th>{$searchGameName}</th>
                  <else/>
                    <td>{$vo.payGameCount}</th>
                  </if>
                  <if condition="I('promote_id', 0) gt 0 or I('sub_promote_id', 0) gt 0">
                    <th>{$searchPromote.account}</th>
                  </if>
                  <td>{$vo.loginCount}</td>
                  <td>{$vo.registerCount}</td>
                  <td>{$vo.payUserCount}</td>
                  <td>{$vo.newPayUserCount}</td>
                  <td>{$vo.payAmount}</td>
                  <td>{$vo.payRate}</td>
                  <td>{$vo.newPayAmount}</td>
                  <td>{$vo.historyPayCount}</td>
                  <!-- <td>{$vo.ratentionOneDay}</td> -->
                  <td>{$vo.arpu}</td>
                  <td>{$vo.arppu}</td>
                    <if condition='empty(I("game_id")) == true'>
                  <td>
                      <a onclick="chakan('{$vo.day}')" style="cursor: pointer" class="chakan">查看</a>
                  </td>
                    </if>
                </tr>
                </volist>
                </empty></tbody>
            </table>
            </table>
          </div>
      </div>
    </div>
    </div>
</block>
<block name="script">
<link rel="stylesheet" href="__STATIC__/flatpickr/flatpickr.min.css">
<script src="__STATIC__/flatpickr/flatpickr.min.js"></script>
<script src="__STATIC__/flatpickr/l10n/zh.js"></script>
<script type="text/javascript" src="__JS__/20170831/select2.min.js"></script>
<script type="text/javascript" src="__JS__/20170831/pagination.js"></script>
<script type="text/javascript" src="__JS__/20170831/string.js"></script>
<script type="text/javascript" src="__JS__/20170831/tabpage.js"></script>
<script type="text/javascript" src="__JS__/common.js"></script>
<eq name='timeout' value='1'>
<script>
  layer.msg('时间间隔不能超过30天');
</script>
</eq>
<script>
$('.select_gallery').select2()
var defaultDate = $('.range-date').val()
  defaultDate = defaultDate == '' ? [] : defaultDate.split(' 至 ')
$('.range-date').flatpickr({
  mode: 'range',
  locale: 'zh',
  dateFormat: "Y-m-d",
  defaultDate: defaultDate,
})
var gameId = $('#game-select').val();
  var defaultServerId = $('#server-select').attr('data-server');
  getGameServers(gameId, defaultServerId)
  $('#game-select').on({
    change: function name() {
      gameId = $('#game-select').val()
      getGameServers(gameId, 0)
    }
  })
  function getGameServers(gameId, defaultServerId) {
    $.ajax({
      url: "{:U('Query/getGameServers')}",
      dataType: 'json',
      data: {game_id: gameId},
      success: function(response) {
        var options = '<option value="0">请选择区服</option>'
        for (var i in response.data.servers) {
          var server = response.data.servers[i]
          var selected = ''
          if (defaultServerId > 0 && server.id==defaultServerId) {
            selected = 'selected'
          }
          options += '<option value="' + server.id + '"' + selected + '>' + server.server_name + '</option>'
        }
        $('#server-select').html(options)
        $("#server-select").val(defaultServerId).trigger("change")
      }
    })
  }

  var promoteUrl = "{:U('Query/getSubPromotes')}"
  initPromoteSelect(promoteUrl)

		layer.config({
			  extend: 'skin/myskin/style.css', //同样需要加载新皮肤
			});
    function chakan(key) {
        var bangbi = $('#bangbi').val();
        var promote_id = $('#promote_arpu').val();
        url = "/index.php?s=/Home/Query/gameArpu/time/"+key+"/bangbi/"+bangbi+"/promote_id/"+promote_id;
        timetitle = key;
        console.log(url);
        layer.open({
            type: 2,
            title: false,
            closeBtn: 0, //不显示关闭按钮
            shade: [0],
            area: ['1px', '1px'],
            offset: 'rb', //右下角弹出
            time: 1, // 秒后自动关闭   这里设置成1ms 不显示过度页面
            anim: 2,
            content: ['', 'no'], //iframe的url，no代表不显示滚动条
            end: function () { //
                layer.open({
                    type: 2,
                    title: timetitle + '游戏数据',
                    skin: 'myskin', //只对该层采用myskin皮肤
                    shadeClose: true,
                    shade: [0.3,'#273142'],
                    scrollbar :false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['70%', '50%'],
                    content: url//iframe的url
                });
            }
        });
    }

</script>

</block>