qimall/addons/Happiness/client/views/index/index.php

<?php
use common\helpers\ComponentHelper;
$urlManager = Yii::$app->urlManager;
//ComponentHelper::loadComponentView('com-search', __DIR__);
?>
<style>
    .el-tabs__nav-wrap::after {
        height: 1px;
    }

    .table-body {
        background-color: #fff;
        position: relative;
        padding-bottom: 50px;
        margin-bottom: 10px;
        border: 1px solid #EBEEF5;
    }

    .table-body .el-tabs {
        margin-left: 10px;
    }

    .table-body .el-tabs__nav-scroll {
        width: 120px;
        margin-left: 30px;
    }

    .table-body .el-tabs__item {
        height: 32px;
        line-height: 32px;
    }

    .table-body .clean {
        color: #92959B;
        margin-left: 20px;
        cursor: pointer;
        font-size: 15px;
    }

    .num-info {
        display: flex;
        width: 100%;
        height: 60px;
        font-size: 28px;
        color: #303133;
    }

    .num-info .num-info-item {
        text-align: center;
        width: 25%;
        border-left: 1px dashed #EFF1F7;
    }

    .num-info .num-info-item:first-of-type {
        border-left: 0;
    }

    .info-item-name {
        font-size: 16px;
        color: #92959B;
    }

    .tab-pay {
        position: absolute;
        bottom: 0;
        right: 50px;
    }

    .tab-pay .el-tabs__item {
        height: 56px;
        line-height: 56px;
    }

    .pay-info {
        padding: 40px 0;
        display: flex;
        justify-content: space-between;
    }

    .pay-info .pay-info-item {
        padding-top: 45px;
        width: 22%;
        margin: 0 1.5%;
        text-align: center;
        font-size: 26px;
        /*border: 1px solid #EBEEF5;*/
        border-radius: 10px;
        height: 150px;
        position: relative;
        cursor: pointer;
    }

    .pay-info .pay-info-item.active {
        border: 1px solid #3399FF;
    }

    .pay-info .pay-info-item img {
        display: none;
    }

    .pay-info .pay-info-item.active img {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
    }

    .echarts-title {
        color: #92959B;
        display: flex;
        font-size: 16px;
        margin-left: 45px;
    }

    .echarts-title-item {
        margin-right: 45px;
        display: flex;
        align-items: center;
    }

    .echarts-title-item .echarts-title-icon {
        height: 16px;
        width: 16px;
        margin-right: 10px;
        background-color: #3399ff;
    }

    .table-area {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }

    .table-area .el-card {
        width: 49.5%;
        color: #303133;
    }

    .el-tabs__header {
        margin-bottom: 0 !important;
    }

    .el-card__header {
        position: relative;
    }

    .sort-active {
        color: #3399ff;
    }

    .select-item {
        border: 1px solid #3399ff;
        margin-top: -1px !important;
    }

    .el-popper .popper__arrow, .el-popper .popper__arrow::after {
        display: none;
    }

    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
        background-color: #3399ff;
        color: #fff;
    }

    .table-area .el-card__header {
        padding: 14px 20px;
    }

    .text-omit {
        width: 380px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<div id="app" v-cloak>
    <el-card v-loading="loading" shadow="never" style="border:0;min-width: 1200px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>数据概况</span>
        </div>
        <div class="table-body">
            <!-- 数据总览 -->
            <div class="num-info">
                <div class="num-info-item">
                    <div class="info-item-name">
                        <span>待自提订单（笔）</span>
                    </div>
                    <div>{{store.no_take_counts}}</div>
                </div>
                <div class="num-info-item">
                    <div class="info-item-name">
                        <span>待配送订单（笔）</span>
                    </div>
                    <div>{{store.no_delivery_counts}}</div>
                </div>
                <div class="num-info-item">
                    <div class="info-item-name">待售后订单（笔）</div>
                    <div>{{store.after_sale_counts}}</div>
                </div>
                <div class="num-info-item">
                    <div class="info-item-name">待付款订单（笔）</div>
                    <div>{{store.no_pay_counts}}</div>

                </div>
                <div class="num-info-item">
                    <div class="info-item-name">已售罄商品（个）</div>
                    <div>{{store.sell_out_counts}}</div>

                </div>
            </div>
        </div>
        <!-- 销售情况 -->
        <el-card shadow="never">
            <div slot="header">
                <span>经营概况</span>
                <div class="tab-pay">
                    <el-tabs v-model="activeDay" @tab-click="tab_pay">
                        <el-tab-pane label="昨日" name="one"></el-tab-pane>
                        <el-tab-pane label="近7天" name="seven"></el-tab-pane>
                        <el-tab-pane label="近30天" name="thirty"></el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 选择框 -->
            <div class="pay-info">
                <div class="pay-info-item" >
                    <img src="statics/img/mall/statistic/active.png" alt="">
                    <div >成交额</div>
                    <div class="info-item-name">￥:{{today_data.sales_money}}</div>
                    <div class="info-item-name">昨日：{{yesterday_data.sales_money}}</div>

                </div>
                <div class="pay-info-item"  >
                    <img src="statics/img/mall/statistic/active.png" alt="">
                    <div >新增会员</div>
                    <div class="info-item-name">{{today_data.add_user_nums}}</div>
                    <div class="info-item-name">昨日：{{yesterday_data.add_user_nums}}</div>
                </div>
                <div class="pay-info-item" >
                    <img src="statics/img/mall/statistic/active.png" alt="">
                    <div >订单数</div>
                    <div class="info-item-name">{{today_data.order_nums}}</div>
                    <div class="info-item-name">昨日：{{yesterday_data.order_nums}}</div>

                </div>
            </div>
        </el-card>
        <br/>
        <el-card shadow="never">
            <div slot="header">
                <span>图表</span>
                <div class="tab-pay">
                </div>
            </div>
            <div class="echarts-title">
                <div class="echarts-title-item" v-if="order">
                    <div class="echarts-title-icon"></div>
                    <div>门店销售额</div>
                </div>
                

            </div>
            <div id="echarts" style="height:18rem;"></div>
        </el-card>


        <div class="table-area">
            <el-card shadow="never">
                <div slot="header">
                    <span style="float: left;height: 32px;line-height: 32px">商品销量排行（TOP5）</span>
                    <div flex="dir:right" style="">
                    </div>
                </div>
                <el-table v-loading="goods_loading" :row-style="{height:'63px'}"
                          :header-cell-style="{background:'#F3F5F6','color':'#303133'}" :data="goods_top_list">
                    <el-table-column align="center" label="排名">
                        <template slot-scope="scope">
                            <img style="margin-top: 3px" v-if="scope.$index == 0"
                                 src="resources/img/mall/statistic/first.png" alt="">
                            <img style="margin-top: 3px" v-else-if="scope.$index == 1"
                                 src="resources/img/mall/statistic/sec.png" alt="">
                            <img style="margin-top: 3px" v-else-if="scope.$index == 2"
                                 src="resources/img/mall/statistic/third.png" alt="">
                            <span v-else-if="scope.$index < 9">0{{scope.$index+1}}</span>
                            <span v-else>{{scope.$index+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" width="400" label="商品">
                        <template slot-scope="scope">
                            <div class="text-omit">{{scope.row.goods_name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="pay_money" label="销售额" width="150"
                                     :label-class-name="goodsProp == 'pay_money' ? 'sort-active': ''">
                        <template slot-scope="scope">
                            {{scope.row.sales_money ? scope.row.sales_money.toFixed(2) : 0}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="never">
                <div slot="header">
                    <span style="float: left;height: 32px;line-height: 32px">会员消费排行（TOP5）</span>
                    <div flex="dir:right" style="">
                    </div>
                </div>
                <el-table v-loading="user_loading" :row-style="{height:'63px'}"
                          :header-cell-style="{background:'#F3F5F6','color':'#303133'}" :data="user_top_list">
                    <el-table-column align="center" label="排名">
                        <template slot-scope="scope">
                            <img style="margin-top: 3px" v-if="scope.$index == 0"
                                 src="resources/img/mall/statistic/first.png" alt="">
                            <img style="margin-top: 3px" v-else-if="scope.$index == 1"
                                 src="resources/img/mall/statistic/sec.png" alt="">
                            <img style="margin-top: 3px" v-else-if="scope.$index == 2"
                                 src="resources/img/mall/statistic/third.png" alt="">
                            <span v-else-if="scope.$index < 9">0{{scope.$index+1}}</span>
                            <span v-else>{{scope.$index+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="用户" width="400">
                        <template slot-scope="scope">
                            <com-image style="margin-right: 10px;float: left;" :src="scope.row.avatar_url" :default_src = "'/resources/img/common/default-avatar.png'" width="32px"
                                       height="32px">
                            </com-image>
                            <span class="text-omit"
                                  style="height: 32px;line-height: 32px;display: inline-block;width: 280px">{{scope.row.nickname}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="pay_money" label="消费总金额" width="150"
                                     :label-class-name="userProp == 'pay_money.toFixed(2)' ? 'sort-active': ''"
                                    >
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                // 今天
                today: '',
                // 七天前
                weekDay: '',
                // 30天前
                monthDay: '',
                // 加载动画
                loading: false,
                goods_loading: false,
                user_loading: false,
                // 销售情况选中情况
                order: true,
                price: true,
                people: true,
                num: true,
                // 日期选中状态
                activeName: '',
                day:1,
                // 搜索内容
                search: {
                    mch: null,
                    time: null,
                    date_start: null,
                    date_end: null,
                    platform: '',
                    pay_type: '',
                },
                // 总体数据
                all_data: {
                    goods_num: "0",
                    order_num: "0",
                    pro_order: "0",
                    user_count: "0",
                    wait_send_num: "0"
                },
                // 店铺列表
                mch_list: [],
                // 销售总计
                table_data: {
                    order_num: 0,
                    total_pay_price: 0,
                    user_count: 0,
                    goods_num: 0,
                },
                // 销售情况
                table_list: {
                    order_num: '0',
                    total_pay_price: '0',
                    user_num: '0',
                    goods_num: '0',
                },
                // 商品排行
                goods_top_list: [],
                // 用户排行
                user_top_list: [],
                // 时段
                pay_day: [],
                // 图表X轴
                echarts_item: ['门店销售额', '收银台销售额'],
                // 图表参数
                series: [
                    {
                        name: '门店销售额',
                        type: 'line',
                        data: []
                    },
                    {
                        name: '收银台销售额',
                        type: 'line',
                        data: []
                    },

                ],
                activeDay: 'one',
                sort_order: null,
                userProp: '',
                goodsProp: '',
                user_url: '<?= $urlManager->createUrl('mall/data-statistics/users_top')?>',
                goods_url: '<?= $urlManager->createUrl('mall/data-statistics/goods_top')?>',
                is_mch_role: true,
                store:{},
                today_data:{},
                yesterday_data:{},



            };
        },
        methods: {
            // 获取数据
            getList() {
                this.loading = true;
                this.series[0].data = [];
                this.series[1].data = [];
                this.order_num = 0;
                this.total_pay_price = 0;
                this.user_num = 0;
                this.goods_num = 0;
                this.pay_day = [];
                const _csrf = '<?=Yii::$app->request->csrfToken?>';
                request({
                    params: {
                        r: 'happiness/client/index/index',
                    },
                    data: {
                        _csrf,
                        date_start: this.search.date_start,
                        date_end: this.search.date_end,
                        mch_id: this.search.mch,
                        platform: this.search.platform,
                        pay_type: this.search.pay_type,
                    },
                    method: 'post',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        // this.all_data = e.data.data;
                        //this.mch_list = e.data.data.mch_list;
                        this.goods_top_list = e.data.data.goods_ranking_list;
                        this.user_top_list = e.data.data.user_ranking_list;
                        this.today_data = e.data.data.today_data;
                        this.yesterday_data = e.data.data.yesterday_data;
                        this.store = e.data.data.store;

                        this.tab_pays(e.data.data.table_list,[]);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            //排行榜数据
            // 生成图表
            form() {
                let that = this;
                var myChart = echarts.init(document.getElementById('echarts'));
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: '#fff',
                        textStyle: {color: '#303133'},
                        padding: 20,
                        extraCssText: 'box-shadow: 0 0 4px rgba(0, 0, 0.1);'
                    },
                    legend: {
                        show: false,
                        data: that.echarts_item
                    },
                    color: ['#3399FF', '#FFA360', '#4BC282', '#FF8585'],
                    grid: {
                        left: '0',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: that.pay_day
                    },
                    yAxis: {
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        type: 'value'
                    },
                    series: that.series
                });
                myChart.showLoading({text: '正在加载数据'});
            },
            // 切换图表区间
            tab_pays(table_list,table_data) {
                this.order = true;
                this.price = true;
                this.people = true;
                this.num = true;
                this.series[0].data = [];
                this.series[1].data = [];
                this.sales_money = 0;
                this.cashier_sales_money = 0;
                this.user_num = 0;
                this.goods_num = 0;
                this.pay_day = [];
                this.form();
                let date_start;
                let date_end;
                if (this.activeDay == 'seven') {
                    this.day = 7;
                } else {
                    this.day = 1;
                }

                this.table_list = table_list;
                this.table_data = table_data;
                for (let i = 0; i < this.table_list.length; i++) {
                    this.pay_day.push(this.table_list[i].created_at)
                    this.series[0].data.push(this.table_list[i].sales_money);
                    this.series[1].data.push(this.table_list[i].cashier_sales_money);
                    //支付订单数 支付金额 支付人数 支付件数
                }
                this.form();
                var myChart = echarts.init(document.getElementById('echarts'));
                myChart.hideLoading();
            },
            tab_pay() {
                request({
                    params: {
                        r: 'happiness/client/index/to-pay',
                    },
                    data: {
                        activeDay: this.activeDay,
                    },
                    method: 'post',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.today_data = e.data.data.today_data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
        },
        created() {
            this.getList();
            this.tab_pay();
        },
    })
</script>