<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
<link href="images/reset.css?v={yun:}$config.cachecode{/yun}" rel="stylesheet" type="text/css" />
|
|
<link href="./images/system.css?v={yun:}$config.cachecode{/yun}" rel="stylesheet" type="text/css" />
|
|
<link href="{yun:}$config.sy_weburl{/yun}/js/layui/css/layui.css?v={yun:}$config.cachecode{/yun}" rel="stylesheet" type="text/css" />
|
<link href="images/statis.css?v={yun:}$config.cachecode{/yun}" rel="stylesheet" type="text/css" />
|
<title>后台管理-图表分析</title>
|
<style>
|
.admin_new_search_time{
|
width: 120px !important;
|
}
|
</style>
|
</head>
|
<body class="body_ifm">
|
|
<div class="infoboxp">
|
<div class="tabs_info">
|
<ul>
|
|
<li class="curr"><a href="index.php?m=statis" >收支总计</a></li>
|
<li><a href="index.php?m=statis_income">收益渠道</a></li>
|
<li><a href="index.php?m=statis_user">消费群体</a></li>
|
|
</ul>
|
</div>
|
<div class="admin_new_tip">
|
<a href="javascript:;" class="admin_new_tip_close"></a>
|
<a href="javascript:;" class="admin_new_tip_open" style="display:none;"></a>
|
<div class="admin_new_tit"><i class="admin_new_tit_icon"></i>操作提示</div>
|
<div class="admin_new_tip_list_cont">
|
<div class="admin_new_tip_list">该页面展示了收支总计统计。</div>
|
</div>
|
</div>
|
<div class="clear"></div>
|
|
<div class="admin_new_search_box">
|
|
<form class="layui-form">
|
<input type="hidden" name="pytoken" id="pytoken" value="{yun:}$pytoken{/yun}">
|
|
<!--选择时间范围-->
|
<div class=" " id="time_range">
|
<div class="admin_new_search_name"><label>查询范围：</label></div>
|
|
<input type="text" class="admin_new_search_time" id="time_begin">
|
<input type="text" class="admin_new_search_time" id="time_end">
|
|
<button class="admin_new_search_timebth" lay-filter="query" onclick="return query();">点击查询</button>
|
<button class="admin_new_search_timebth" onclick="return showDetail(this);">查看详情</button>
|
|
|
<div class="layui-input-inline">
|
<input name="radio_time" value="0" title="今天" type="radio" lay-filter="radio_time"
|
{yun:}if $radio_time == '0'{/yun}
|
checked
|
{yun:}/if{/yun}
|
/>
|
<input name="radio_time" value="1" title="昨天" type="radio" lay-filter="radio_time"
|
{yun:}if $radio_time == '1'{/yun}
|
checked
|
{yun:}/if{/yun}
|
/>
|
<input name="radio_time" value="7" title="7天内" type="radio" lay-filter="radio_time"
|
{yun:}if $radio_time == '7'{/yun}
|
checked
|
{yun:}/if{/yun}
|
/>
|
<input name="radio_time" value="30" title="30天内" type="radio" lay-filter="radio_time"
|
{yun:}if $radio_time=="" || $radio_time == '30' {/yun}
|
checked
|
{yun:}/if{/yun}
|
/>
|
<input name="radio_time" value="90" title="90天内" type="radio" lay-filter="radio_time"
|
{yun:}if $radio_time == '90'{/yun}
|
checked
|
{yun:}/if{/yun}
|
/>
|
<input name="radio_time" value="-1" title="全部" type="radio" lay-filter="radio_time"
|
{yun:}if $radio_time == '-1'{/yun}
|
checked
|
{yun:}/if{/yun}
|
/>
|
<input type="hidden" name="isAllTime" id="isAllTime" value="0"/>
|
</div>
|
</div>
|
</form>
|
</div>
|
|
<div class="clear"></div>
|
|
<div class="clear"></div>
|
<div class="adminstatis_box">
|
|
<div class="com_pay_balance">
|
<div class="com_pay_balance_data_q">
|
<i class="com_pay_balance_data_q_icon"></i>
|
<div class="com_pay_balance_data_n"><strong>{yun:}$data[0]['in']{/yun}</strong></div>
|
<div class="com_pay_balance_data_name">收益</div>
|
</div>
|
</div>
|
<div class="com_pay_balance">
|
<div class="com_pay_balance_data_q border_blue">
|
<i class="com_pay_balance_data_q_icon"></i>
|
<div class="com_pay_balance_data_n color_blue"><strong>{yun:}$data[0]['out']{/yun}</strong></div>
|
<div class="com_pay_balance_data_name">支出/提现</div>
|
</div>
|
</div>
|
<div class="com_pay_balance">
|
<div class="com_pay_balance_data_q border_orange">
|
<i class="com_pay_balance_data_q_icon"></i>
|
<div class="com_pay_balance_data_n color_orange"><strong>{yun:}$data[0]['net_income']{/yun}</strong></div>
|
<div class="com_pay_balance_data_name">净收入</div>
|
</div>
|
</div>
|
|
</div>
|
|
|
|
<div class="clear"></div>
|
|
<div class="payments_com_pay_cont">
|
<div class="admin_atatic_chart bg_gray" id="chart" style="height:350px;">
|
</div>
|
<div class="statis_list" style="padding-top:0px;">
|
<table class="" lay-skin="nob" style="display: none;" id="detail" width="100%">
|
<thead>
|
<tr id="detail_thead" class="admin_table_top" style="text-align:left">
|
<th>日期</th>
|
<th>毛收入</th>
|
<th>支出/提现</th>
|
<th>净收入</th>
|
</tr>
|
</thead>
|
<tbody id="detail_tbody">
|
{yun:}foreach from=$names item=date key=k{/yun}
|
<tr>
|
<td>{yun:}$date{/yun}</td>
|
<td>{yun:}$values[0]['data'][$k]{/yun}</td>
|
<td>{yun:}$values[1]['data'][$k]{/yun}</td>
|
<td>{yun:}$values[2]['data'][$k]{/yun}</td>
|
</tr>
|
{yun:}/foreach{/yun}
|
|
<tr>
|
<td>总计</td>
|
<td>{yun:}$totalIn{/yun}</td>
|
<td>{yun:}$totalOut{/yun}</td>
|
<td>{yun:}$totalNetIncome{/yun}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div> </div> </div>
|
<script src="{yun:}$config.sy_weburl{/yun}/js/layui/layui.js?v={yun:}$config.cachecode{/yun}"></script>
|
<script src="{yun:}$config.sy_weburl{/yun}/js/layui/phpyun_layer.js?v={yun:}$config.cachecode{/yun}"></script>
|
<script src="{yun:}$config.sy_weburl{/yun}/js/echarts_plain.js?v={yun:}$config.cachecode{/yun}"></script>
|
<script src="{yun:}$config.sy_weburl{/yun}/js/jquery-1.8.0.min.js?v={yun:}$config.cachecode{/yun}"></script>
|
<script>
|
function getDateTimeStr(timestamp)
|
{
|
var d = new Date(timestamp); //根据时间戳生成的时间对象
|
var h = d.getHours(),
|
m = d.getMinutes(),
|
s = d.getSeconds(),
|
month = d.getMonth() + 1,
|
day = d.getDate();
|
|
h = h < 10 ? '0' + h : h;
|
m = m < 10 ? '0' + m : m;
|
s = s < 10 ? '0' + s : s;
|
|
month = month < 10 ? '0' + month : month;
|
day = day < 10 ? '0' + day : day;
|
|
return (d.getFullYear()) + "-" + month + "-" + day + " " +
|
h + ":" + m + ":" + s;
|
}
|
function getToday(){
|
var today = new Date();
|
today.setHours(0);
|
today.setMinutes(0);
|
today.setSeconds(0);
|
today.setMilliseconds(0);
|
return today;
|
}
|
|
layui.use(['form', 'laydate'], function(){
|
var laydate = layui.laydate
|
,form = layui.form
|
,$ = layui.$;
|
|
laydate.render({
|
elem : '#time_begin' //指定元素
|
,type : 'datetime'
|
,value : '{yun:}$defaultTimeBegin{/yun}'
|
});
|
|
laydate.render({
|
elem : '#time_end' //指定元素
|
,type : 'datetime'
|
,value : '{yun:}$defaultTimeEnd{/yun}'
|
});
|
|
form.on('radio(radio_time)', function(data){
|
if(data.value == -1){
|
window.location = 'index.php?m=statis&isAllTime=1' + '&radio_time=' + data.value;
|
}
|
else{
|
var today = getToday();
|
var diff = 1000 * 60 * 60 * 24 * data.value;
|
var day = new Date(today - diff);
|
window.location = 'index.php?m=statis&time_begin=' + getDateTimeStr(Date.parse(day)) + '&time_end=' + getDateTimeStr(Date.parse(new Date())) + '&radio_time=' + data.value;
|
}
|
});
|
|
var title = '{yun:}$title{/yun}';
|
var names = [
|
{yun:}foreach from=$names item=v key=kkk{/yun}
|
{yun:}if $kkk>0{/yun}
|
,
|
{yun:}/if{/yun}
|
'{yun:}$v{/yun}'
|
{yun:}/foreach{/yun}
|
];
|
|
var dataGroupNames = [
|
'毛收入',
|
'支出/提现',
|
'净收入'
|
];
|
|
var values = [
|
{yun:}foreach from=$values item=v key=k{/yun}
|
{yun:}if $k > 0{/yun}
|
,
|
{yun:}/if{/yun}
|
{
|
name : '{yun:}$v["name"]{/yun}',
|
type : '{yun:}$v["type"]{/yun}',
|
label: {
|
normal: {
|
show:true,
|
position: 'top',
|
textStyle: {
|
color: '#27727B'
|
}
|
}
|
},
|
data : [
|
{yun:}foreach from=$v["data"] item=r key=kk{/yun}
|
{yun:}if $kk > 0{/yun}
|
,
|
{yun:}/if{/yun}
|
parseFloat('{yun:}$r{/yun}')
|
{yun:}/foreach{/yun}
|
]
|
}
|
//ie9 不兼容最后一个属性多出的逗号
|
{yun:}/foreach{/yun}
|
];
|
|
refreshBarChart(title, names, values, dataGroupNames);
|
});//end layui.use()
|
|
function query()
|
{
|
window.location = 'index.php?m=statis&time_begin=' + $("#time_begin").val() + '&time_end=' + $('#time_end').val();
|
return false;
|
}
|
|
function refreshBarChart(title, names, values, dataGroupNames)
|
{
|
var option = {
|
tooltip : {
|
trigger: 'axis',
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
|
title: {
|
text: title,
|
subtext: '{yun:}$config.sy_webname{/yun}'
|
},
|
legend: {
|
data: dataGroupNames
|
},
|
xAxis : [
|
{
|
type : 'category',
|
data : names
|
}
|
],
|
yAxis : [
|
{
|
type : 'value'
|
}
|
],
|
series : values
|
};
|
|
// 基于准备好的dom，初始化echarts实例
|
var myChart = echarts.init(document.getElementById('chart'));
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
}
|
|
//查看详情
|
var flag = true;
|
function showDetail(o)
|
{
|
if(flag){
|
$("#chart").hide();
|
$("#detail").show();
|
flag = false;
|
|
$(o).html('查看图表');
|
}
|
else{
|
$("#detail").hide();
|
$("#chart").show();
|
flag = true;
|
|
$(o).html('查看详情');
|
}
|
return false;
|
}
|
</script>
|
</body>
|
</html>
|
