qimall/addons/LuckyGroup/backend/views/statistics/index.php

<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 style="font-size: 18px; font-weight: 600;">参团数据统计</span>
            <!-- <span style="float:right;margin-bootom:10px;">当前时间：<?php echo date('Y-m-d H:i:s') ?></span> -->
        </div>

        <!-- 销售情况 -->
        <el-card shadow="never">
            <div slot="header">
                <div class="label-title">默认汇总</div>
            </div>
            <div class="pay-info">
                <div class="pay-info-item bg-orange">
                    <div class="info-item-name-line">
                        <div class="info-item-name">
                            <span>本月发放参团奖金</span>
                            <span class="money">￥{{formatNumber(statistic.attend_commission ? statistic.attend_commission : '0.00')}}</span>
                        </div>
                    </div>
                    <div class="info-item-name">总发放参团奖金</div>
                    <div class="all_money">￥{{formatNumber(statistic.total_attend_commission ? statistic.total_attend_commission : '0.00')}}</div>
                </div>
                <div class="pay-info-item bg-red">
                    <div class="info-item-name-line">
                        <div class="info-item-name">
                            <span>本月收到参团金额</span>
                            <span class="money">￥{{formatNumber(statistic.attend_money? statistic.attend_money : '0.00')}}</span>
                        </div>
                    </div>
                    <div class="info-item-name">总收到参团金额</div>
                    <div class="all_money">￥{{statistic.total_attend_money ? statistic.total_attend_money : '0.00'}}</div>
                </div>
                <div class="pay-info-item bg-purple">
                    <div class="info-item-name-line">
                        <div class="info-item-name">
                            <span>本月拼中金额</span>
                            <span class="money">￥{{formatNumber(statistic.win_money ? statistic.win_money : '0.00')}}</span>
                        </div>
                    </div>
                    <div class="info-item-name">总拼中金额</div>
                    <div class="all_money">￥{{formatNumber(statistic.total_win_money ? statistic.total_win_money : '0.00')}}</div>
                </div>
                <div class="pay-info-item bg-green">
                    <div class="info-item-name-line">
                        <div class="info-item-name">
                            <span>本月参团次数</span>
                            <span class="money">{{statistic.attend_peoples ? statistic.attend_peoples :'0'}} 次</span>
                        </div>
                    </div>
                    <div class="info-item-name">总参团次数</div>
                    <div class="all_money">{{statistic.total_attend_peoples ? statistic.total_attend_peoples : '0'}} 次</div>
                </div>
                <div class="pay-info-item bg-blue">
                    <div class="info-item-name-line">
                        <div class="info-item-name-line">
                            <span>本月拼中次数</span>
                            <span class="money">{{statistic.win_peoples ? statistic.win_peoples : '0'}} 次</span>
                        </div>
                    </div>
                    <div class="info-item-name">总拼中次数</div>
                    <div class="all_money">{{statistic.total_win_peoples ? statistic.total_win_peoples : '0'}} 次</div>
                </div>
            </div>

            <div class="" style="border: 0 solid;">
                <!-- 时间选择框 -->
                <template>
                    <div style="margin-bottom: 15px;">时间筛选</div>
                    <div>
                        <el-select style="width: 150px;" size="small" v-model="search.type" @change='tabTotal'>
                            <el-option key="1" label="日" value="day"></el-option>
                            <el-option key="2" label="周" value="week"></el-option>
                            <el-option key="3" label="月" value="month"></el-option>
                        </el-select>

                        <el-date-picker size="small" @change="changeTime" style="width: 350px" v-model="search.time" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </template>
            </div>
            <div class="table-area">
                <!-- 访问概况 -->

                <el-card shadow="never">
                    <div slot="header">
                        <span>访问概况</span>
                        <span style="float:right;color:#C41D1D">浏览量：{{echarts_visit.sum_view_num}} 访客数：{{echarts_visit.sum_visit_num}}</span>
                    </div>
                    <div id="echarts-visit" style="height:18rem;"></div>
                </el-card>
                <!-- 金额概况 -->
                <el-card shadow="never">
                    <div slot="header">
                        <span>金额概况</span>
                    </div>
                    <div id="echarts-money" style="height:18rem;"></div>
                </el-card>



            </div>
            <!-- 会员概况 -->
            <el-card shadow="never" style="margin-bottom: 20px;">
                <div slot="header">
                    <span>会员概况</span>
                </div>
                <div id="echarts-user" style="height:18rem;"></div>
            </el-card>

            <div style="color: #303133">
                <el-card shadow="never">
                    <div slot="header">
                        拼中排行榜(TOP10)
                    </div>
                    <el-table v-loading="goods_loading" :row-style="{height:'63px'}" :header-cell-style="{background:'#F3F5F6','color':'#303133'}" :data="user_ranking_list">
                        <el-table-column align="center" label="排名" width="80">
                            <template slot-scope="scope">
                                <img style="margin-top: 3px" v-if="scope.$index == 0" src="/resources/img/mall/first.png" alt="">
                                <img style="margin-top: 3px" v-else-if="scope.$index == 1" src="/resources/img/mall/sec.png" alt="">
                                <img style="margin-top: 3px" v-else-if="scope.$index == 2" src="/resources/img/mall/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="user_id" width="150" align="center" label="会员ID"></el-table-column>
                        <el-table-column prop="name" width="180" label="头像" align="center">
                            <template slot-scope="scope">
                                <div class="block">
                                    <el-avatar :size="50" :src="scope.row.avatar_url"></el-avatar>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="nickname" width="180" label="会员昵称" align="center">
                        </el-table-column>
                        <el-table-column prop="mobile" width="180" label="手机" align="center">

                        </el-table-column>
                        <el-table-column prop="has_attend_times" width="180" label="参团次数" align="center">

                        </el-table-column>
                        <el-table-column prop="win_num" width="200" label="拼中订单数" align="center">
                        </el-table-column>
                        <el-table-column prop="max_order_money" width="200" label="单笔订单最大金额" align="center">
                            <template slot-scope="scope">
                                <div>{{scope.row.max_order_money?scope.row.max_order_money:0}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="attend_money" width="200" label="消费总金额" align="center">
                            <template slot-scope="scope">
                                <div>{{scope.row.attend_money?scope.row.attend_money:0}}</div>
                            </template>
                        </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: '',
                // 搜索内容
                search: {
                    time: null,
                    start_date: null,
                    end_date: null,
                    type: '',
                },
                //统计数据
                statistic: {
                    attend_commission: 0,
                    total_attend_commission: 0,
                    attend_money: 0,
                    total_attend_money: 0,
                    win_money: 0,
                    total_win_money: 0,
                    attend_peoples: 0,
                    total_attend_peoples: 0,
                    win_peoples: 0,
                    total_win_peoples: 0,
                },
                echarts_user: {}, //会员概况
                echarts_money: {}, //金额概况
                user_ranking_list: [], // 拼团订单
                echarts_visit: [], // 访问概况

                // 时段
                pay_day: [],
                money_pay_day: [],
                // 图表X轴
                echarts_item: ['参团次数', '拼中次数', '拼不中次数'],
                echarts_item_money: ['拼中金额', '拼不中金额'],
                echarts_item_visit: ['浏览量', '访客数'],
                // 图表参数
                series: [{
                        name: '参团次数',
                        type: 'line',
                        data: []
                    },
                    {
                        name: '拼中次数',
                        type: 'line',
                        data: []
                    },
                    {
                        name: '拼不中次数',
                        type: 'line',
                        data: []
                    },
                    {
                        name: '支付件数',
                        type: 'line',
                        data: []
                    },
                ],
                activeDay: 'one',
                sort_order: null,
                userProp: '',
                goodsProp: '',
            };
        },
        mounted() {
            this.getList();
        },
        methods: {
            formatNumber(money) {
                money = parseFloat(money);
                return money.toFixed(2);
            },
            // 获取数据
            getList() {
                this.loading = true;
                request({
                    params: {
                        r: 'lucky-group/default/index',
                        start_date: this.search.start_date,
                        end_date: this.search.end_date,
                        type: this.search.type,
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    console.log(e, '数据')
                    // debugger
                    if (e.data.code == 0) {
                        if (e.data.data.statistic) {
                            this.statistic = e.data.data.statistic; //统计数据
                        }
                        this.user_ranking_list = e.data.data.user_ranking_list; //拼中排行榜
                        this.echarts_user = e.data.data.echarts_user_data; //会员概况
                        this.echarts_money_data = e.data.data.echarts_money_data; //金额概况
                        this.echarts_visit = e.data.data.echarts_visit_data; //访问概况

                        // this.echarts_item_money = e.data.data.echarts_money_data.names;
                        this.visit_tab_pay();
                        this.money_tab_pay();
                        this.user_tab_pay();
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },

            // 生成会员概况图表
            user_form() {
                let that = this;
                console.log(that, 'echarts_item1');
                var myChart = echarts.init(document.getElementById('echarts-user'));
                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: true,
                        data: that.echarts_item,
                        bottom: 0,
                    },
                    color: ['#6093f8', '#657798', '#62daab'],
                    grid: {
                        left: '0',
                        right: '4%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: that.pay_day
                    },
                    yAxis: {
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        type: 'value'
                    },
                    series: that.series
                });
                myChart.showLoading({
                    text: '正在加载数据'
                });
            },
            // 切换图表区间
            user_tab_pay() {

                this.series[0].data = [];
                this.series[1].data = [];
                this.series[2].data = [];
                this.pay_day = [];

                let start_date;
                let end_date;
                if (this.activeDay == 'seven') {
                    start_date = this.weekDay;
                    end_date = this.today;
                }
                this.pay_day = this.echarts_user.win_peoples.keys;
                console.log(this.pay_day, 'x')
                this.series[0].data = this.echarts_user.attend_peoples.values;
                this.series[1].data = this.echarts_user.win_peoples.values;
                this.series[2].data = this.echarts_user.loss_peoples.values;
                console.log(this.series, 'y')
                this.user_form();
                var myChart = echarts.init(document.getElementById('echarts-user'));
                myChart.hideLoading();

            },

            //生成金额概况  
            money_form() {
                let that = this;
                var myChart = echarts.init(document.getElementById('echarts-money'));
                myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        show: true,
                        data: that.echarts_item_money
                    },
                    color: ['#62daab', '#6395f9'],
                    title: {
                        text: '总金额 \n\n ￥' + that.echarts_money_data.attend_amounts + '元',
                        left: 'center',
                        top: 'center',
                        // textAlign: 'center',
                        color: '#000',
                        fontSize: 20,
                        fontWeight: '400',
                    },
                    series: [{
                        name: '总金额',
                        type: 'pie',
                        radius: ['55%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                // formatter: '{d}',
                                formatter: '{b}:{d}%',
                                position: 'outside'
                            }
                        },
                        // emphasis: {
                        //     label: {
                        //         show: true,
                        //         fontSize: '40',
                        //         fontWeight: 'bold'
                        //     }
                        // },
                        // labelLine: {
                        //     show: true
                        // },
                        data: that.echarts_money_data.echarts_money
                    }]
                });
                myChart.showLoading({
                    text: '正在加载数据'
                });
            },
            // 切换图表区间
            money_tab_pay() {
                this.money_form();
                var myChart = echarts.init(document.getElementById('echarts-money'));
                myChart.hideLoading();
            },

            //生成访问概况  
            visit_form() {
                let that = this;
                var myChart = echarts.init(document.getElementById('echarts-visit'));
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: '#fff',
                        textStyle: {
                            color: '#303133'
                        },
                        padding: 20,
                        extraCssText: 'box-shadow: 0 0 4px rgba(0, 0, 0.1);'
                    },
                    grid: {
                        // top: '10%',
                        left: '2%',
                        right: '2%',
                        // bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: that.echarts_visit.view_num.keys
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        nameLocation: 'end',
                        /* name: '访问概况',
                        nameTextStyle: {
                            color: "rgba(0, 0, 0, 1)",
                            fontWeight: "bold",
                            fontSize: 16,
                            align: "right"
                        } */
                    },
                    color: ['#62daab', '#6395f9'],
                    series: [
                        {
                            name: '浏览量',
                            data: that.echarts_visit.view_num.values,
                            type: 'bar',
                            barGap: '1%',
                        },
                        {
                            name: '访客数',
                            data: that.echarts_visit.visit_num.values,
                            type: 'bar',
                        }
                    ],
                    legend: {
                        data: that.echarts_item_visit,
                        bottom: 0,
                    },
                })
                myChart.showLoading({
                    text: '正在加载数据'
                });
            },
            // 切换图表区间
            visit_tab_pay() {
                this.visit_form();
                var myChart = echarts.init(document.getElementById('echarts-visit'));
                myChart.hideLoading();
            },
            // 选择时间区间
            tabTotal() {

                if (this.search.type == 'day') {
                    this.search.time = [this.today, this.today];
                }
                if (this.search.type == 'week') {
                    this.search.time = [this.weekDay, this.today];
                }
                if (this.search.type == 'month') {
                    this.search.time = [this.monthDay, this.today];
                }

                this.search.start_date = this.search.time[0];
                this.search.end_date = this.search.time[1];
                console.log(this.search.start_date, this.search.end_date);
                this.getList()
            },
            // 自定义时间
            changeTime() {
                this.activeName = null;
                if (this.search.time) {
                    this.search.start_date = this.search.time[0];
                    this.search.end_date = this.search.time[1];
                } else {
                    this.search.start_date = null;
                    this.search.end_date = null;
                }
                this.getList();
            },

            searchList(searchData) {
                this.search = searchData;
                this.page = 1;
                this.getList();
            },
            toSearch(searchData) {
                this.search = searchData;
                this.getList();
                this.user_tab_pay();
                this.money_tab_pay();
                this.changeUser();
            },
            tabMch() {
                this.getList();
            },
        },

        created() {
            // this.getList();
            let date = new Date();
            let timestamp = date.getTime();
            let seperator1 = "-";
            let year = date.getFullYear();
            let nowMonth = date.getMonth() + 1;
            let strDate = date.getDate();
            if (nowMonth >= 1 && nowMonth <= 9) {
                nowMonth = "0" + nowMonth;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            this.today = year + seperator1 + nowMonth + seperator1 + strDate;
            let week = new Date(timestamp - 7 * 24 * 3600 * 1000)
            let weekYear = week.getFullYear();
            let weekMonth = week.getMonth() + 1;
            let weekStrDate = week.getDate();
            if (weekMonth >= 1 && weekMonth <= 9) {
                weekMonth = "0" + weekMonth;
            }
            if (weekStrDate >= 0 && weekStrDate <= 9) {
                weekStrDate = "0" + weekStrDate;
            }
            this.weekDay = weekYear + seperator1 + weekMonth + seperator1 + weekStrDate;
            let month = new Date(timestamp - 30 * 24 * 3600 * 1000);
            let monthYear = month.getFullYear();
            let monthMonth = month.getMonth() + 1;
            let monthStrDate = month.getDate();
            if (monthMonth >= 1 && monthMonth <= 9) {
                monthMonth = "0" + monthMonth;
            }
            if (monthStrDate >= 0 && monthStrDate <= 9) {
                monthStrDate = "0" + monthStrDate;
            }
            this.monthDay = monthYear + seperator1 + monthMonth + seperator1 + monthStrDate;
        },
    })
</script>


<style>
    .el-tabs__nav-wrap::after {
        height: 1px;
    }

    .table-body {
        background-color: #fff;
        position: relative;
        padding-bottom: 10px;
        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: 20%;
        border-left: 1px dashed #EFF1F7;
    }

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

    .info-item-name-line div {
        border-bottom: 2px solid rgb(235, 238, 245);
        height: 40px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .info-item-name {
        line-height: 40px;
        font-size: 16px;
        color: #fff;
        text-align: left;
    }

    .money {
        font-size: 16px;
        font-weight: bold;
    }

    .all_money {
        font-size: 30px;
        text-align: left;
        margin-bottom: 20px;
    }

    .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 {
        width: 22%;
        margin: 0 0.5%;
        text-align: center;
        font-size: 26px;
        border: 1px solid #EBEEF5;
        border-radius: 10px;
        position: relative;
        cursor: pointer;
        color: #fff;
        font-size: 14px;
        padding: 0 14px;
    }

    .pay-info .pay-info-item::after {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background-image: url('/resources/img/plugins/gold_shop.png');
        content: '';
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        z-index: 0;
        opacity: 0.5;
        background-size: 100%;
        transform: rotate(-45deg);
    }

    .bg-orange {
        background: linear-gradient(-55.2871552272817deg, rgba(251, 147, 67, 1) 2%, rgba(252, 114, 83, 1) 58%);
    }

    .bg-red {
        background: linear-gradient(-55.2871552272817deg, rgba(249, 78, 78, 1) 2%, rgba(217, 43, 43, 1) 58%);
    }

    .bg-purple {
        background: linear-gradient(-55.2871552272817deg, rgba(202, 67, 251, 1) 2%, rgba(137, 21, 178, 1) 58%);
    }

    .bg-green {
        background: linear-gradient(-55.2871552272817deg, rgba(57, 202, 121, 1) 2%, rgba(8, 181, 88, 1) 58%);
    }

    .bg-blue {
        background: linear-gradient(-55.2871552272817deg, rgba(84, 163, 206, 1) 2%, rgba(24, 134, 196, 1) 58%);
    }

    .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: 20px 0;
        display: flex;
        justify-content: space-between;
    }

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

    .card-item {
        background-color: #f7f7f7;
        box-shadow: 3px 3px 5px rgb(155 155 155 / 35%);
    }

    .card-item .el-card__header {
        font-size: 20px;
        font-weight: bold;
    }

    .card-item .el-card__header .sub-title {
        float: right;
        color: #C41D1D;
        font-size: 14px;
        font-weight: normal;
    }


    .mg-top {
        margin-top: 20px;
    }

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

    .el-card__header {
        position: relative;
        font-weight: 600;
        font-size: 15px;
    }

    .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>