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

<div id='app' v-cloak>
    <!-- 卡片1 -->
    <el-card shadow="never" style="border:0;min-width: 1200px;background: #f3f3f3;padding-bottom: 20px;" body-style="padding: 0 0;">

        <div class="header-item flex-row" :data="yesterday_state_list">
            <div class="items" >
                <div>{{yesterday_state_list.goods_amount || 0}}</div>
                <div>交易金额</div>
            </div>
            <div class="items" >
                <div>{{yesterday_state_list.order_count || 0}}</div>
                <div>订单量</div>
            </div>
            <div class="items" >
                <div>{{yesterday_state_list.goods_views_count || 0}}</div>
                <div>商品访问量</div>
            </div>
            <div class="items" >
                <div>{{yesterday_state_list.push_count || 0}}</div>
                <div>发布量</div>
            </div>
            <div class="items" >
                <div>{{yesterday_state_list.views_count || 0}}</div>
                <div>浏览量</div>
            </div>
            <div class="items" >
                <div>{{yesterday_state_list.stars_count || 0}}</div>
                <div>点赞量</div>
            </div>
            <div class="items" >
                <div>{{yesterday_state_list.shares_count || 0}}</div>
                <div>分享量</div>
            </div>
            <div class="items" >
                <div>{{yesterday_state_list.discuss_count || 0}}</div>
                <div>评论量</div>
            </div>
            <!-- <div style="display: none;">1</div> -->
        </div>

        <!-- 数据概况 -->
        <div class="profile">
            <div class="profile-header flex-x-between">
                <span class="titles">趋势分析</span>
                <div class="block">
                    <el-date-picker
                        v-model="time1"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        @change="pickerChange"
                        :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                </div>
            </div>
            <!-- echarts -->
            <div class="dataBox" id="echartsBox1" style="width: calc(100% - 250px);height: 500px;"></div>
        </div>

        <!-- 人气排行 -->
        <el-row :gutter="20" v-loading="loading">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-card class="card box-card" v-if="allData" v-loading="loading5">
                    <div class="cardHead" style="padding-bottom: 10px;">
                        <div style="font-size: 17px;font-weight: bold;flex-shrink: 0;">人气排行TOP5</div>
                    </div>

                    <el-table class="myTable" :data="content_top_list" style="width: 100%">
                        <el-table-column  prop="rangk" label="排名" width="100">
                            <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="title" label="标题" width="400" >
                            <template slot-scope="scope">
                                <div class="flex-row">
                                    <el-image fit="cover" v-if = "scope.row.type == 1"  :src="scope.row.source.source[0]" style="width: 90px;height:70px;border-radius: 5px;flex-shrink: 0;margin-right: 5px;"></el-image>
                                    <el-image fit="cover" v-else  :src="scope.row.source.cover" style="width: 90px;height:70px;border-radius: 5px;flex-shrink: 0;margin-right: 5px;"></el-image>
                                    <span style="margin-left: 10px">{{ scope.row.title }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="view_number" label="点赞量" align="center" >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.stars_count || 0 }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>

            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-card class="card box-card" v-if="allData" v-loading="loading5">
                    <div class="cardHead" style="padding-bottom: 10px;">
                        <div style="font-size: 17px;font-weight: bold;flex-shrink: 0;">带货排行TOP5</div>
                    </div>

                    <el-table class="myTable" :data="good_top_list" style="width: 100%">
                        <el-table-column  prop="rangk" label="排名" width="100">
                            <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="good_name" label="商品名称" width="290" >
                            <template slot-scope="scope">
                                <div class="flex-row">
                                    <el-image fit="cover" :src="scope.row.goods.cover_pic" style="width: 90px;height:70px;border-radius: 5px;flex-shrink: 0;margin-right: 5px;"></el-image>
                                    <span style="margin-left: 10px">{{ scope.row.goods.goods_name }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="view_number" label="商品访问人数" width="110">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.goods_views_count || 0 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="bought_number" label="成交人数" width="100">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bought_count || 0 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="amount" label="成交金额" width="100">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.total_amount || 0 }}</span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="address" label="人气" align="center" >
                           <template slot-scope="scope">
                               <span style="margin-left: 10px">{{ scope.row.view_number || 0 }}</span>
                           </template>
                        </el-table-column> -->
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

    </el-card>


</div>

<script>
    let myChart;
    new Vue({
        el: '#app',
        data() {
            return {
                yesterday_state_list: {
                    push_count:0,
                    views_count:0,
                    star_count:0,
                    share_count:0,
                    discuss_count:0,
                },
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '7天',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '30天',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                },
                time1: '',
                currentTimestamp1: '', // 当前时间
                beforeTimestamp1: '', // 之前时间（这里是7天前）
                allData: [],
                loading: false,
                loading5:false,
                personAndTeamList:{},
                content_top_list: [],
                good_top_list:[],
            }
        },
        created() {

        },
        mounted() {
            myChart = echarts.init(document.querySelector("#echartsBox1"));
            let currentTimestamp = new Date().getTime();
            this.currentTimestamp1 = currentTimestamp;
            this.beforeTimestamp1 = new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000 /// 1000
            this.time1 = [this.beforeTimestamp1,this.currentTimestamp1]

            this.getStateList();
        },
        methods: {
            // 获取昨日统计数据
            getStateList(startTime = null, endTime = null) {
                let self = this;
                self.listLoading = true;
                request({
                    params: {
                        r: 'xhs/statistics/index',
                    },
                    data:{start_time: startTime, end_time: endTime},
                    method: 'post',
                }).then(e => {
                    // console.log(e);
                    self.listLoading = false;
                    if (e.data.code === 0) {
                        this.content_top_list = e.data.data.start_list;
                        this.good_top_list = e.data.data.goods_list;
                        if(e.data.data.yesterday_data) this.yesterday_state_list = e.data.data.yesterday_data;
                        if(e.data.data.statistical_list.dates) this.chartFun(e.data.data.statistical_list);  
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            pickerChange(e) {
                let startTime = e[0].getTime()
                let endTime = e[1].getTime()
                this.time1 = [startTime, endTime]
                this.getStateList(parseInt(startTime / 1000), parseInt(endTime / 1000));
            },
            chartFun(obj){
                // console.log(obj);
                option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        bottom: "0%",
                        left:"4%",
                        itemGap : 60,
                        // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                        data: obj.items
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        //设置x轴线的属性
                        axisLine:{
                            lineStyle:{
                                color:'#BFBFBF',
                                width:1,//这里是为了突出显示加上的
                            }
                        },
                        data: obj.dates
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: { // 设置y轴网格的属性
                            show: true,
                            interval: 3,
                            lineStyle: {
                                color: '#F3F3F3'
                            }
                        },
                        axisLine:{ // 去掉y轴
                            show:false
                        },
                        axisTick:{ // 去掉刻度线
                            show:false
                        },
                    },
                    series: obj.series
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option)
                setTimeout(function (){
                    window.onresize = function () {
                        myChart.resize();
                    }
                },200)
                // window.addEventListener("resize", function() {
                // var size = (window.innerWidth || document.documentElement.clientWidth) / 1920 * 100;
                // 	document.documentElement.style.fontSize = size + "px";
                // 	document.body.style.fontSize = "14px";
                // 	myChart.resize();
                // });

            },
        }
    })
</script>

<style>
    /* 卡片1 */
    .el-card__header{
        background: #fff;
        border-bottom: 0;
    }

    .titles {
        font-size: 17px;
        font-weight: 700;
    }
    /*  */
    .header-item {
        background-color: #fff;
        margin-top: 10px;
        padding: 30px 0;
        border-radius: 5px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    .items {
        width: 25%;
    }
    .items>div {
        text-align: center;
    }
    .items>div:nth-child(1) {
        font-size: 28px;
        font-weight: 700;
        padding-bottom: 8px;
        font-family: '宋体';
    }
    .items>div:nth-child(2) {
        font-size: 12px;
    }
    /* 数据概况 */
    .el-date-editor .el-range-separator {
        width: 6%;
    }
    .profile {
        background: #fff;
        margin: 10px 0;
        border-radius: 5px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    .profile-header {
        align-items: center;
        padding: 20px;
    }

    .cardHead{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .cardContent{
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
    }
    .cardContent .item{
        display: flex;
        align-items: center;
        margin: 30px;
    }
    .cardHeadLeft{
        margin-bottom: 10px;
    }
    .myTable {
        min-height: 500px;
    }


    /* 公共样式 */
    .flex-row {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        flex-direction: row;
    }

    .flex-col {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .flex-grow-0 {
        min-width: 0;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }
    .flex-grow-1 {
        min-width: 0;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
        flex-shrink: 1;
    }
    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-x-bottom {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    .flex-y-bottom {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        -ms-grid-row-align: flex-end;
        align-items: flex-end;
    }

    .flex-1 {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        flex: 1;
    }
</style>