guoyao-jiankang/application/admin/view/statistics/wx_order_view.html

{extend name="common/common2" /}
{block name="main"}
<div class="ibox-content">
<div class="ibox">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">月</span>
                    <h5>收入</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$data.orderAmount}</h1>
                    <small>本月订单支付金额</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">全年</span>
                    <h5>订单</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$data.orderCount}</h1>
                    <small>全年已支付订单</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">今天</span>
                    <h5>下单人数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$data.orderUser}</h1>
                    <small>今日下单人数</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">月</span>
                    <h5>退款金额</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$data.refundCount}</h1>
                    <small>本月退款金额</small>

                </div>
            </div>
        </div>
    </div>
    <div id="app">
        <div class="row" >
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <button type="button"  @click="setType(0)" :class="'btn btn-xs btn-white'+ (type==0?'active':'')">天</button>
                                <button type="button"   @click="setType(1)" :class="'btn btn-xs btn-white'+ (type==1?'active':'')">月</button>
                                <button type="button"   @click="setType(2)" :class="'btn btn-xs btn-white'+ (type==2?'active':'')">年</button>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-9">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" id="tj"></div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <ul class="stat-list">
                                    <li>
                                        <h2 class="no-margins">{{ddzs}}</h2>
                                        <small>订单总数</small>
                                        <div class="stat-percent">{{ddbl}}%
                                            <i v-if="ddzt===0" class="fa fa-bolt text-navy"></i>
                                            <i v-if="ddzt===1" class="fa fa-level-up text-navy"></i>
                                            <i v-if="ddzt===2" class="fa fa-level-down text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div :style="'width:'+ddbl+'%;'" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">{{yzfdd}}</h2>
                                        <small>已支付订单</small>
                                        <div class="stat-percent">{{yzfbl}}%
                                            <i v-if="yzfzt===0" class="fa fa-bolt text-navy"></i>
                                            <i v-if="yzfzt===1" class="fa fa-level-up text-navy"></i>
                                            <i v-if="yzfzt===2" class="fa fa-level-down text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div :style="'width:'+yzfbl+'%;'" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">{{ddze}}</h2>
                                        <small>订单总额</small>
                                        <div class="stat-percent">{{ddzebl}}%
                                            <i v-if="ddzezt===0" class="fa fa-bolt text-navy"></i>
                                            <i v-if="ddzezt===1" class="fa fa-level-up text-navy"></i>
                                            <i v-if="ddzezt===2" class="fa fa-level-down text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div :style="'width:'+ddzebl+'%;'" class="progress-bar"></div>
                                        </div>
                                    </li>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>交易分类</h5>
                    </div>
                    <div class="ibox-content">

                        <div class="row">
                            <div class="col-sm-12">
                                <table class="table table-hover margin bottom">
                                    <thead>
                                    <tr>
                                        <th  class="text-center">序号</th>
                                        <th>分类名称</th>
                                        <th class="text-center">销售额</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                        <tr v-for="(item,key) in cateList">
                                        <td class="text-center">{{key+1}}</td>
                                        <td><small>{{item.title}}
                                        </small>
                                        </td>
                                        <td class="text-center"><span class="label label-primary">&yen;{{item.total}}</span>
                                        </td>
                                    </tr>

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{/block}
{block name="script"}
<script src="/static/layDate-v5.0.9/laydate.js"></script>
<script src="/static/browser.js"></script>
<script src="/static/jquery.jqprint-0.3.js"></script>
<script src="/static/echarts/dist/echarts.js"></script>

<script>

    new Vue({
        el: '#app',
        components:{

        },
        data(){
            return {
                ddzs:0,
                ddbl:0,
                ddzt:0,//0持平1上升2下降
                yzfdd:0,
                yzfbl:0,
                yzfzt:0,//0持平1上升2下降
                ddze:0,
                ddzebl:0,
                ddzezt:0,//0持平1上升2下降
                loading:false,
                date:'',
                type:0,
                cateList:[],
                rules: {
                }
            }
        },
        mounted(){
            this.getList();
        },
        methods: {

            setType(type){
                this.type = type;
                this.getList();
            },
            getList(){
                var that = this;
                $.post('{:url("wxOrderView")}?type='+this.type,{},function (res) {
                   if(res.code==1){
                       that.dd(res.data)
                       that.ddzs=res.data.ddzs;
                       that.ddbl=res.data.ddbl;
                       that.ddzt=res.data.ddzt;
                       that.yzfdd=res.data.yzfdd;
                       that.yzfbl=res.data.yzfbl;
                       that.yzfzt=res.data.yzfzt;
                       that.ddze=res.data.ddze;
                       that.ddzebl=res.data.ddzebl;
                       that.ddzezt=res.data.ddzezt;
                       that.cateList=res.data.cateList;
                   }else {
                       alert('获取数据失败');
                       return false;
                   }
                })
            },

            dd(data){
                let myChart = echarts.init(document.getElementById('tj'), null, {renderer: 'svg'});
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },

                    legend: {
                        data: ['订单数量', '订单金额']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: data.title,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '订单数量',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        },
                        {
                            type: 'value',
                            name: '订单金额',
                            axisLabel: {
                                formatter: '{value} 元'
                            }
                        }
                    ],
                    series: [

                        {
                            name: '订单数量',
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value;
                                }
                            },
                            data: data.value,
                        },
                        {
                            name: '订单金额',
                            type: 'line',
                            yAxisIndex: 1,
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' 元';
                                }
                            },
                            data: data.value1,
                        }
                    ]
                })


            },
        }
    })
</script>
{/block}