zhongshen_project/addon/wechat/shop/view/stat/stat.html

{extend name="app/shop/view/base.html" /}
{block name="resources"}
<link rel="stylesheet" href="WECHAT_CSS/wx_access_statistics.css">
<script src="WECHAT_JS/echarts.min.js"></script>
{/block}
{block name="main"}
<div class="layui-card card-common card-brief">
    <div class="layui-card-header">
        <span class="card-title">用户分析/昨日</span>
    </div>
    <div class="layui-card-body access-statistics">
        <ul class="access-api-list ">
            <li class="access-api-item">
                <div class="access-api-item-title">
                    <h3>新关注人数</h3>
                </div>
                <p class="access-api-itme-content">{if !empty($yesterday_user_data.new_user)}{$yesterday_user_data.new_user}{else/}0{/if}</p>
            </li>
            <li class="access-api-item">
                <div class="access-api-item-title">
                    <h3>取消关注人数</h3>
                </div>
                <p class="access-api-itme-content">{if !empty($yesterday_user_data.cancel_user)}{$yesterday_user_data.cancel_user}{else/}0{/if}</p>
            </li>
            <li class="access-api-item">
                <div class="access-api-item-title">
                    <h3>净增关注人数</h3>
                </div>
                <p class="access-api-itme-content">{if !empty($yesterday_user_data.net_growth_user)}{$yesterday_user_data.net_growth_user}{else/}0{/if}</p>
            </li>
            <li class="access-api-item">
                <div class="access-api-item-title">
                    <h3>累积关注人数</h3>
                </div>
                <p class="access-api-itme-content">{if !empty($yesterday_user_data.cumulate_user)}{$yesterday_user_data.cumulate_user}{else/}0{/if}</p>
            </li>
        </ul>
    </div>
</div>

<div class="layui-card card-common card-brief">
    <div class="layui-card-header">
        <span class="card-title">接口分析/昨日</span>
    </div>
    <div class="layui-card-body access-statistics">
        <ul class="access-api-list">
            <li class="access-api-item">
                <div class="access-api-item-title">
                    <h3>调用次数</h3>
                </div>
                <p class="access-api-itme-content">{if !empty($yesterday_interface_data.callback_count)}{$yesterday_interface_data.callback_count}{else/}--{/if}</p>
            </li>
            <li class="access-api-item">
                <div class="access-api-item-title">
                    <h3>失败率</h3>
                </div>
                <p class="access-api-itme-content">{if !empty($yesterday_interface_data.fail_count)}{$yesterday_interface_data.fail_count}{else/}--{/if}</p>
            </li>
            <li class="access-api-item">
                <div class="access-api-item-title">
                    <h3>平均耗时(毫秒)</h3>
                </div>
                <p class="access-api-itme-content">{if !empty($yesterday_interface_data.callback_count) && !empty($yesterday_interface_data.total_time_cost)}{php}echo round($yesterday_interface_data['total_time_cost']/$yesterday_interface_data['callback_count'],2);{/php}{else/}--{/if}</p>
            </li>
            <li class="access-api-item">
                <div class="access-api-item-title">
                    <h3>最大耗时(毫秒)</h3>
                </div>
                <p class="access-api-itme-content">{if !empty($yesterday_interface_data.max_time_cost)}{$yesterday_interface_data.max_time_cost}{else/}--{/if}</p>
            </li>
        </ul>
    </div>
</div>

<div class="layui-card card-common card-brief">
    <div class="layui-card-header">
        <span class="card-title">趋势图</span>
    </div>
    <div class="layui-card-body access-statistics">
        <div class="layui-tab layui-tab-brief" lay-filter="chart_tab">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="user">用户分析</li>
                <li lay-id="interface">接口分析</li>
            </ul>
            <blockquote class="layui-elem-quote" style="margin-top:10px;" >
		        <span class="layui-breadcrumb" lay-separator="|" >
		            <a href="javascript:void(0)" class="layui-breadcrumb-item layui-breadcrumb-active" lay-util="week">最近7天</a>
		            <a href="javascript:void(0)" class="layui-breadcrumb-item"  lay-util="month">最近30天</a>
		        </span>
            </blockquote>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div id="user_chart" style="width: 100%;height:400px;"></div>
                </div>
                <div class="layui-tab-item" id="interface_main">
                    <div id="interface_chart" style="width: 100%;height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var is_render = true;
    var date_type = "week";
    layui.use(['element', 'util'], function(){
        var element = layui.element,
            util = layui.util;

        usersummarystatistics();
        //监听Tab切换，以改变地址hash值
        element.on('tab(chart_tab)', function(){
            if(this.getAttribute('lay-id') == "interface" && is_render){
                is_render = false;
                interfaceSummaryStatistics();
            }
        });

        //按钮事件
        util.event('lay-util', {
            week: function(othis){
                $(".layui-breadcrumb-item").removeClass("layui-breadcrumb-active");
                $(othis).addClass("layui-breadcrumb-active");
                date_type = "week";
                usersummarystatistics();
                if(is_render == false){
                    interfaceSummaryStatistics();
                }

            }
            ,month: function(othis){
                $(".layui-breadcrumb-item").removeClass("layui-breadcrumb-active");
                $(othis).addClass("layui-breadcrumb-active");
                date_type = "month";
                usersummarystatistics();
                if(is_render == false){
                    interfaceSummaryStatistics();
                }
            }
        });
        
    });

    //折线图
    var user_chart = echarts.init(document.getElementById('user_chart'));

    //获取微信公众号用户分析统计数据(按日)
    function usersummarystatistics(){
        user_chart.showLoading();//加载视图
        $.ajax({
            type: "post",
            url: "{:addon_url('wechat://shop/stat/usersummarystatistics')}",
            dataType: "JSON",
            data: {date_type : date_type},
            success: function (result) {
                var chart_data = result.data;
                var option = {
                    legend: {
                        data:['新关注人数','取消关注人数','净增关注人数','累积关注人数'],
                        x: 'right',
                        right: '20',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '20',
                        right: '20',
                        bottom: '20',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: chart_data.date
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: chart_data.data.new_user_data,
                            type: 'line',
                            smooth: true,
                            name: "新关注人数"
                        },
                        {
                            data: chart_data.data.cancel_user_data,
                            type: 'line',
                            smooth: true,
                            name: "取消关注人数"
                        },
                        {
                            data: chart_data.data.net_growth_user_data,
                            type: 'line',
                            smooth: true,
                            name: "净增关注人数"
                        },
                        {
                            data: chart_data.data.cumulate_user_data,
                            type: 'line',
                            smooth: true,
                            name: "累积关注人数"
                        }
                    ]
                };

                user_chart.setOption(option);
                user_chart.hideLoading();
            }
        });
    }

    //获取微信公众号接口调用统计数据(按日)
    function interfaceSummaryStatistics(){
        var interface_chart = echarts.init(document.getElementById('interface_chart'));
        interface_chart.showLoading();//加载视图
        $.ajax({
            type: "post",
            url: "{:addon_url('wechat://shop/stat/interfaceSummaryStatistics')}",
            dataType: "JSON",
            data: {date_type : date_type},
            success: function (result) {
                var chart_data = result.data;
                var option = {
                    legend: {
                        data:['调用次数','失败率','平均耗时','最大耗时'],
                        x: 'right',
                        right: '20',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '20',
                        right: '20',
                        bottom: '20',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: chart_data.date
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: chart_data.data.callback_count_data,
                            type: 'line',
                            smooth: true,
                            name: "调用次数"
                        },
                        {
                            data: chart_data.data.fail_count_data,
                            type: 'line',
                            smooth: true,
                            name: "失败率"
                        },
                        {
                            data: chart_data.data.average_time_cost_data,
                            type: 'line',
                            smooth: true,
                            name: "平均耗时"
                        },
                        {
                            data: chart_data.data.max_time_cost_data,
                            type: 'line',
                            smooth: true,
                            name: "最大耗时"
                        }
                    ]
                };

                interface_chart.setOption(option);
                interface_chart.hideLoading();
            }
        });
    }
</script>
{/block}