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

<?php
// 数据概况
?>
<div id="app">
    <el-card v-loading="loading" shadow="never" style="border:0;min-width: 800px;" body-style="padding: 10px 0 0;">
        <div class="flex   text-sm justify-between align-center" slot="header">
            <div>
                <span class="text-bold">画册数据明细</span>
                <span>时间筛选</span>
                <el-date-picker @change="dateChanged" value-format="yyyy-MM-dd" v-model="dateline" size="small" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div>
                <el-date-picker size="small" :disabled="true" :value="Date.now()" type="date" placeholder="选择日期">
                </el-date-picker>
                <el-button size="small" @click="navBack()">返回</el-button>
            </div>
        </div>
        <div class="flex justify-between">

            <div ref="visit_chart" class="flex-sub padding-top-xs  visit_chart margin-right radius  ">

            </div>
            <div ref="pay_chart" class="flex-sub pay_chart padding-top-xs  radius  ">

            </div>



        </div>
        <div class="flex">
            <div ref="album_chart" class="album_chart padding-top-xs flex-sub radius margin-top"></div>
        </div>
        <div class="data-tab">
            <h3>画册分析</h3>
            <el-table  header-row-class-name="header-cell" :data="album_stat.list">
                <el-table-column align="center" prop="id" label="画册ID"></el-table-column>
                <el-table-column align="center" prop="title" width="100" label="画册名称"></el-table-column>
                <el-table-column align="center" prop="goods_count" width="100" label="商品数"></el-table-column>
                <el-table-column align="center" prop="statistics.stop_time" label="停留时长"></el-table-column>
                <el-table-column align="center" prop="statistics.shares_count" label="分享次数"></el-table-column>
                <el-table-column align="center" prop="statistics.pay_count" label="支付人数"></el-table-column>
                <el-table-column align="center" prop="statistics.order_count" label="支付单数"></el-table-column>
                <el-table-column align="center" prop="statistics.goods_amount" label="支付金额"></el-table-column>

            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination v-if="album_stat.pagination" :page-size="album_stat.page_size"
                               style="display: inline-block;float: right;" background @current-change="pageAlbumChange"
                               layout="prev, pager, next" :total="album_stat.count" :current-page.sync="album_page">
                </el-pagination>
            </div>
        </div>
        <div  class="data-tab" style="padding-bottom:100px;">
            <h3>
                会员浏览记录
            </h3>
            <el-table align="center" header-align="center" header-row-class-name="header-cell" :data="user_list">
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column label="会员" width="180" >
                    <template slot-scope="scope">
                        <div class="user_img" v-if="scope.row.user_id>0">
                            <el-image class="default-avatar" :src="scope.row.user.avatar_url">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                        </div>
                        <div class="user_img" v-else>
                            <el-image class="default-avatar" :src="scope.row.user_avatar_url">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                        </div>
                        <div>
                            <div style="color:#000;" v-if="scope.row.user_id>0">{{scope.row.user.nickname}}</div>
                            <div style="color:#000;" v-else>{{scope.row.user_name}}</div>
                            <div style="font-size: 13px;" v-if="scope.row.user_id>0">{{scope.row.user.mobile}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="album.id" align="center" label="画册ID"></el-table-column>
                <el-table-column prop="album.title" align="center" label="画册名称"></el-table-column>
                <el-table-column prop="stay_time" align="center" label="停留时长"></el-table-column>
                <el-table-column prop="amount" align="center" label="支付金额"></el-table-column>
                <el-table-column prop="share_time" align="center" label="分享次数"></el-table-column>
                <el-table-column prop="page_num" align="center" label="翻看页数"></el-table-column>
            </el-table>

            <div style="text-align: right;margin: 20px 0;">
                <el-pagination v-if="pagination" :page-size="pagination.pageSize"
                               style="display: inline-block;float: right;" background @current-change="pageChange"
                               layout="prev, pager, next" :total="pagination.total_count">
                </el-pagination>
            </div>
        </div>
    </el-card>



</div>


</div>
<style>
    /*头像样式 start*/
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .user_img{
        float: left;
        margin-right: 8px;
        height: 50px;
        width: 50px;
    }
    .el-table_1_column_2 .cell { /*-2 表示在第二行*/
        display: flex;
    }
    /*头像样式 end*/
    .header-cell>th {
        border: 0;
        text-align: center;
        background-color: #fff;
        color: #fff;
        font-weight: bold;
    }

    .album_chart {
        height: 340px;
        width: 1230px;
    }


    .visit_chart,
    .pay_chart {
        height: 320px;
        width: 550px;

    }
</style>
<script>
    new Vue({
        el: '#app',
        methods: {
            navBack() {
                window.history.back()
            },
            renderViews() {
                const {
                    date_list
                } = this;
                Object.assign(this, {
                    visit_chart: echarts.init(this.$refs.visit_chart),
                    pay_chart: echarts.init(this.$refs.pay_chart),
                    album_chart: echarts.init(this.$refs.album_chart)
                })
                this.visit_chart.setOption({
                    color: ['#6395f9', '#59daab', '#657798'],
                    title: {
                        padding: [15, 0, 0, 15],
                        text: '访问概况'
                    },

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                show: true
                            }
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },

                        }
                    },
                    calculable: true,
                    // 过滤
                    legend: {
                        data: ['访问数', '浏览量'],
                        itemGap: 5
                    },
                    // 布局
                    grid: {
                        top: '16%',
                        left: '5%',
                        right: '8%',
                        containLabel: true
                    },
                    // x 轴数据
                    xAxis: [{
                        min: 0,
                        max: date_list.length - 1,
                        type: 'category',
                        data: date_list.map(e => e.date)
                    }],
                    // Y 轴数据
                    yAxis: [{
                        step: 10,
                        type: 'value',
                        name: '',
                        axisLabel: {
                            formatter: function(a) {
                                a = +a;
                                return isFinite(a) ?
                                    echarts.format.addCommas(+a) :
                                    '';
                            }
                        }
                    }],

                    series: [{

                        name: '访问数',
                        type: 'bar',
                        data: date_list.map(e => e.visit_count)
                    },
                        {

                            name: '浏览量',
                            type: 'bar',
                            data: date_list.map(e => e.views_count)
                        }
                    ]
                });

                this.pay_chart.setOption({
                    color: ['#6395f9', '#59daab', '#657798'],
                    title: {
                        padding: [15, 0, 0, 15],
                        text: '支付概况'
                    },

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                show: true
                            }
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },

                        }
                    },
                    calculable: true,
                    // 过滤
                    legend: {
                        data: ['支付人数', '支付单数', '支付金额'],
                        itemGap: 5
                    },
                    // 布局
                    grid: {
                        top: '16%',
                        left: '5%',
                        right: '8%',
                        containLabel: true
                    },
                    // x 轴数据
                    xAxis: [{
                        min: 0,
                        max: date_list.length - 1,
                        type: 'category',
                        data: date_list.map(e => e.date)
                    }],
                    // Y 轴数据
                    yAxis: [{
                        step: 5,
                        type: 'value',
                        name: '',
                        axisLabel: {
                            formatter: function(a) {
                                a = +a;
                                return isFinite(a) ?
                                    echarts.format.addCommas(+a) :
                                    '';
                            }
                        }
                    }],
                    series: [{

                        name: '支付人数',
                        type: 'bar',
                        data: date_list.map(e => e.pay_count)
                    },
                        {

                            name: '支付单数',
                            type: 'bar',
                            data: date_list.map(e => e.order_count)
                        }, {

                            name: '支付金额',
                            type: 'bar',
                            data: date_list.map(e => e.goods_amount)
                        }
                    ]
                });
                console.log(date_list.map(e => e.date))
                this.album_chart.setOption({
                    color: ['#6395f9', '#59daab', '#657798'],
                    title: {
                        padding: [15, 0, 0, 15],
                        text: '画册概况'
                    },

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                show: true
                            }
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },

                        }
                    },
                    calculable: true,
                    // 过滤
                    legend: {
                        data: ['停留时间', '分享次数'],
                        itemGap: 5
                    },
                    // 布局
                    grid: {
                        top: '16%',
                        left: '5%',
                        right: '8%',
                        containLabel: true
                    },
                    // x 轴数据
                    xAxis: [{
                        min: 0,
                        max: date_list.length - 1,
                        type: 'category',
                        data: date_list.map(e => e.date)
                    }],
                    // Y 轴数据
                    yAxis: [{
                        step: 5,
                        type: 'value',
                        name: '',
                        axisLabel: {
                            formatter: function(a) {
                                a = +a;
                                return isFinite(a) ?
                                    echarts.format.addCommas(+a) :
                                    '';
                            }
                        }
                    }],
                    series: [{
                        name: '停留时间',
                        type: 'bar',
                        data: date_list.map(e => e.stop_time)
                    },
                        {
                            name: '分享次数',
                            type: 'bar',
                            data: date_list.map(e => e.shares_count)
                        }
                    ]
                });

            },
            getStatData() {
                if (this.loading) {
                    return;
                }
                this.loading = true;
                request({
                    params: {
                        r: 'album/statistics/index',
                        begin_date: this.dateline ? this.dateline[0] : '',
                        end_date: this.dateline ? this.dateline[1] : '',
                        id: getQuery('id') ? getQuery('id') : 0
                    }
                }).then(e => {
                    this.loading = false;
                    this.date_list = e.data.data.stat;
                    this.album_stat = e.data.data.album;
                    this.user_list = e.data.data.user.list;
                    this.pagination = e.data.data.user.pagination;
                    this.pagination.pageSize = e.data.data.user.page_size;
                    this.pagination.total_count = e.data.data.user.count;
                    this.renderViews();
                }).catch(e => {
                    console.log(e);
                });
            },
            pageChange(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getMemberData();
            },
            pageAlbumChange(){
                request({
                    params: {
                        r: 'album/statistics/album',
                        page: this.album_page
                    }
                }).then(e => {
                    this.album_stat = e.data.data.album;
                }).catch(e => {
                    console.log(e);
                });
            },
            getMemberData() {
                request({
                    params: {
                        r: 'album/statistics/index',
                        page: this.page
                    }
                }).then(e => {
                    this.user_list = e.data.data.user.list;
                    this.pagination = e.data.data.user.pagination;
                    this.pagination.pageSize = e.data.data.user.page_size;
                    this.pagination.total_count = e.data.data.user.count;
                }).catch(e => {
                    console.log(e);
                });
            },
            dateChanged(val) {
                this.getStatData()
            }
        },
        data() {
            return {
                page: 1,
                pageSize: 10,
                album_page:1,
                total: 0,
                album_stat:[],
                pagination:[],
                user_list:[],
                loading: false,
                album_id: '',
                dateline: '',
                date_list: {},
                album_pages_stat: [],
                album_stat: [],
                user: []
            }
        },
        created() {
            this.getStatData();
        },

    })
</script>




<style>
    /* 下部分可抽离 */


    .solid-bottom {
        border-bottom: 1px solid #000;
    }

    .round {
        border-radius: 5000px;
    }

    .radius {
        border-radius: 6px;
    }

    .flex {
        display: flex;
    }

    .basis-xs {
        flex-basis: 20%;
    }

    .basis-sm {
        flex-basis: 40%;
    }

    .basis-df {
        flex-basis: 50%;
    }

    .basis-lg {
        flex-basis: 60%;
    }

    .basis-xl {
        flex-basis: 80%;
    }

    .flex-sub {
        flex: 1;
    }

    .flex-twice {
        flex: 2;
    }

    .flex-treble {
        flex: 3;
    }

    .flex-direction {
        flex-direction: column;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .align-start {
        align-items: flex-start;
    }

    .align-end {
        align-items: flex-end;
    }

    .align-center {
        align-items: center;
    }

    .align-stretch {
        align-items: stretch;
    }

    .self-start {
        align-self: flex-start;
    }

    .self-center {
        align-self: flex-center;
    }

    .self-end {
        align-self: flex-end;
    }

    .self-stretch {
        align-self: stretch;
    }

    .align-stretch {
        align-items: stretch;
    }

    .justify-start {
        justify-content: flex-start;
    }

    .justify-end {
        justify-content: flex-end;
    }

    .justify-center {
        justify-content: center;
    }

    .justify-between {
        justify-content: space-between;
    }

    .justify-around {
        justify-content: space-around;
    }

    .data-tab{
        padding: 0 20px;
    }

</style>