qimall/addons/Pk/backend/views/default/index.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * 文件描述
 * Author: xuyaoxiang
 * Date: 2021/1/28
 * Time: 9:57
 */
?>
<style>
    .card{
        /* width: 800px; */
        margin-bottom: 20px;
        /* margin-right: 20px; */
        min-width: 400px;
    }
    .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: 15px;
        padding-left: 4%;
    }
    .cardHeadLeft{
        margin-bottom: 10px;
    }
    .el-date-editor .el-range-separator{/* 设置选择日期框的中间的 ‘至’ 的宽度 */
        width: 8%;
    }
    .myTable{
        min-height: 500px;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header" style="display: flex;align-items: center;">
            <!-- <div>PK概况</div> -->
            <div id="nowtime" style="font-weight: bold;"></div>
        </div>

        <el-row :gutter="20">
            <el-col>
                <el-card class="card box-card" v-loading="personalPkStatistics.loading">
                    <div class="cardHead">
                        <div class="cardHeadLeft" style="font-size: 17px;font-weight: bold;flex-shrink: 0;">个人PK概况</div>
                        <el-date-picker
                            size="small"
                            v-model="personalPkStatistics.timeRange"
                            @change="timeChange('personalPkStatistics')"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="timestamp"
                            align="center"><!-- yyyy-MM-dd HH:mm:ss -->
                        </el-date-picker>
                    </div>

                    <div class="cardContent" v-if="personalPkStatistics.list">
                        <div class="item" v-for="(item, index) in personalPkStatistics.list">
                            <img style="display: block;width: 60px;height: 60px;margin-right: 15px;" :src="item.icon" />
                            <div style="font-weight: bold;">
                                <div>{{ item.name }}</div>
                                <div style="font-size: 20px;">{{ item.number }}</div>
                            </div>
                        </div>

                    </div>

                </el-card>
            </el-col>


            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-card class="card box-card" v-loading="personalPkDayUserStatistics.loading">
                    <div class="cardHead">
                        <div class="cardHeadLeft" style="font-size: 17px;font-weight: bold;flex-shrink: 0;">拉新PK <span style="font-size: 16px;font-weight: normal;color: #999;">（单位：人）</span></div>
                        <el-date-picker
                                size="small"
                                v-model="personalPkDayUserStatistics.timeRange"
                                @change="timeChange('personalPkDayUserStatistics')"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="timestamp"
                                align="center">
                        </el-date-picker>
                    </div>

                    <div class="dataBox" id="echartsPersonalPkDayUser" style="width: 7.5rem;height: 4rem;margin-bottom: 20px;">

                    </div>
                </el-card>
            </el-col>

            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-card class="card box-card" v-loading="personalPkDayMoneyStatistics.loading">
                    <div class="cardHead">
                        <div class="cardHeadLeft" style="font-size: 17px;font-weight: bold;flex-shrink: 0;">业绩PK<span style="font-size: 16px;font-weight: normal;color: #999;">（单位：元）</span></div>
                        <el-date-picker
                                size="small"
                                v-model="personalPkDayMoneyStatistics.timeRange"
                                @change="timeChange('personalPkDayMoneyStatistics')"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="timestamp"
                                align="center">
                        </el-date-picker>
                    </div>
                    <div class="dataBox" id="echartsPersonalPkDayMoney" style="width: 7.5rem;height: 4rem;margin-bottom: 20px;margin-top: 0px;">

                    </div>
                </el-card>
            </el-col>

            <el-col >
                <el-card class="card box-card" v-if="rankData.list" v-loading="rankData.loading">
                    <div class="cardHead" style="padding-bottom: 10px;border-bottom: 1px solid #E8EAF5;">
                        <div style="font-size: 17px;font-weight: bold;flex-shrink: 0;">个人排行TOP10</div>
                        <div style="display: flex;align-items: center;">
                            <div>PK活动名称：</div>
                            <el-select v-model="rankData.id" size="small" placeholder="请选择"  @change="getAllRankingList">
                                <el-option
                                        v-for="item in activityList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>

                    <el-table
                            class="myTable"
                            stripe
                            size="small"
                            :data="rankData.list"
                            :show-header="false"
                            style="width: 100%;margin-top: 30px;">
                        <el-table-column
                                label="日期"
                                min-width="80"
                                align="center">
                            <template slot-scope="scope">
                                <img :src="diy_img_prefix + '/static/addons/Pk/fir.png'" alt="" v-if="scope.$index+1 === 1">
                                <img :src="diy_img_prefix + `/static/addons/Pk/sec.png`" alt="" v-else-if="scope.$index+1 === 2">
                                <img :src="diy_img_prefix + `/static/addons/Pk/thir.png`" alt=""  v-else-if="scope.$index+1 === 3">
                                <span v-else>{{scope.$index+1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                min-width="150"
                        >
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center;">
                                    <el-image fit="cover" :src="scope.row.user.avatar_url ? scope.row.user.avatar_url:'resources/img/common/default-avatar.png'" style="width: 50px;height:50px;border-radius: 50%;flex-shrink: 0;margin-right: 5px;"></el-image>
                                    <div v-if="scope.row.nickname">{{scope.row.user.nickname}}</div>
                                    <div v-else>{{scope.row.user.username}}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="num"
                                label="rankData.performance_type == 1 ? '拉新' : `业绩`"
                                min-width="100"
                                align="center"
                        >
                            <template slot-scope="scope">
                                <div v-if="rankData.performance_type == 1"><span style="font-size: 20px;font-weight: bold;color: #EA5353;">{{scope.row.new_user_num}}</span>人</div>
                                <div v-if="rankData.performance_type == 2"><span style="font-size: 20px;font-weight: bold;color: #EA5353;">{{scope.row.order_money_num}}</span>元</div>
                            </template>
                        </el-table-column>
                    </el-table>

                </el-card>
            </el-col>






        </el-row>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            diy_img_prefix: '<?= Yii::getAlias('@attachurl') ?>',
            // 个人PK概况
            personalPkStatistics: {
                loading: false,
                timeRange: [],
                list: [],
            },
            //个人拉新PK按天统计
            personalPkDayUserStatistics: {
                loading: false,
                timeRange: [],
                list: [],
                echarts: null,
            },
            //个人业绩PK按天统计
            personalPkDayMoneyStatistics: {
                loading: false,
                timeRange: [],
                list: [],
                echarts: null,
            },
            // 活动列表
            activityList: [],
            // 排行榜
            rankData: {
                loading: false,
                topn: 10,
                list: [],
                id: 0,
                performance_type: 0
            }

        },
        created() {
            var size = (window.innerWidth || document.documentElement.clientWidth) / 1920 * 100;
            document.documentElement.style.fontSize = size + "px";
            document.body.style.fontSize = "14px";
            setInterval(()=>{
                this.NowTime()
            },1000)
        },
        mounted() {
            // 初始化
            this.iniData();
            // 加载数据
            this.loadData();


        },
        watch:{
            'rankData.id': {
                handler(newId, oldId) {
                    let that = this;
                    that.activityList.map(function (item) {
                        if (item.id == newId) {
                            that.rankData.performance_type = item.performance_type;
                            return false;
                        }
                    });

                },

            }

        },
        methods: {

            formatTime(timeStamp) {
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
            },
            timeChange(tag){

                // 个人PK概况
                if (tag == 'personalPkStatistics') {
                    this.getPersonalPkStatistics();
                }
                //个人PK按天统计
                if (tag == 'personalPkDayUserStatistics') {
                    this.getPersonalPkDayStatistics(tag, 'new_user_num');
                }
                //个人业绩PK按天统计
                if (tag == 'personalPkDayMoneyStatistics') {
                    this.getPersonalPkDayStatistics(tag, 'order_money_num');
                }

            },

            loadData() {
                 // 个人PK概况
                 this.getPersonalPkStatistics();
                 //个人PK按天统计
                 this.getPersonalPkDayStatistics('personalPkDayUserStatistics', 'new_user_num');
                //个人业绩PK按天统计
                 this.getPersonalPkDayStatistics('personalPkDayMoneyStatistics', 'order_money_num');
                 // 获取活动列表
                 this.getActivityList();

            },
            // 初始化数据
            iniData() {
                // 个人PK概况 时间范围
                this.personalPkStatistics.timeRange = [
                    this.getTimestamps(30),
                    this.getTimestamps()
                ];
                // 个人PK按天统计 时间范围
                this.personalPkDayUserStatistics.timeRange = [
                    this.getTimestamps(30),
                    this.getTimestamps()
                ];
                // 个人业绩PK按天统计 时间范围
                this.personalPkDayMoneyStatistics.timeRange = [
                    this.getTimestamps(30),
                    this.getTimestamps()
                ];
                // 个人PK按天统计 echart 初始化
                this.personalPkDayUserStatistics.echarts = echarts.init(document.querySelector("#echartsPersonalPkDayUser"));
                //个人业绩PK按天统计 echart 初始化
                this.personalPkDayMoneyStatistics.echarts = echarts.init(document.querySelector("#echartsPersonalPkDayMoney"));



            },
            // 获取时间戳
            getTimestamps(deduct_days = 0) {
               return new Date(new Date(new Date().toLocaleDateString()).getTime() - deduct_days * 24 * 3600 * 1000).getTime();
            },
            // 个人PK概况
            getPersonalPkStatistics()
            {

                if (this.personalPkStatistics.loading) {
                    return false;
                }
                this.personalPkStatistics.loading = true;
                let params = {
                    r: 'pk/default/personal-pk-statistics',
                    start_time: this.personalPkStatistics.timeRange[0] / 1000,
                    end_time: this.personalPkStatistics.timeRange[1] / 1000,
                };
                let that = this;
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    that.personalPkStatistics.loading = false;
                    if (e.data.code == 0) {
                        that.personalPkStatistics.list = e.data.data.list;
                    } else {
                        that.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    that.personalPkStatistics.loading = false;
                });

            },
            // 按天统计数据
            // tag 数据标签
            // count_field 统计的字段
            getPersonalPkDayStatistics(tag, count_field)
            {
                let obj = this[tag];
                if (obj.loading) {
                    return false;
                }
                obj.loading = true;
                let params = {
                    r: 'pk/default/personal-pk-day-statistics',
                    start_time: obj.timeRange[0] / 1000,
                    end_time: obj.timeRange[1] / 1000,
                    count_field: count_field
                };
                let that = this;
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    obj.loading = false;
                    if (e.data.code == 0) {
                        obj.list = e.data.data;
                        // 个人拉新PK 按天统计
                        if (tag == 'personalPkDayUserStatistics') {
                            that.personalPkDayUserStatisticsRender();
                        }
                        if (tag == 'personalPkDayMoneyStatistics') {
                            that.personalPkDayMoneyStatisticsRender();
                        }
                    } else {
                        that.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    obj.loading = false;
                });

            },
            // top 10
            getAllRankingList(){
                let that = this;
                if (that.rankData.loading) {
                    return false;
                }
                let params = {
                    r: 'pk/default/personal-pk-ranking',
                    activity_id: that.rankData.id,//个人活动ID
                    topn: this.rankData.topn
                };

                that.rankData.loading = true;
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    that.rankData.loading = false;
                    if (e.data.code == 0) {
                        that.rankData.list = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    that.rankData.loading = false;
                });
            },
            // 获取活动列表
            getActivityList()
            {
                let params = {
                    r: 'pk/default/activity-list',
                };
                let that = this;
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        that.activityList = e.data.data.list;
                        this.getCurrentActivity();

                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });

            },
            // 获取当前活动
            getCurrentActivity()
            {
                let params = {
                    r: 'pk/default/current-pk-activity',
                };
                let that = this;
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        that.rankData.id = e.data.data.activity.id;
                        that.getAllRankingList();
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });

            },
            // 个人PK 按天统计 echart 显示
            personalPkDayUserStatisticsRender(){
                option = {
                    color: ["#5F93F9", "#58D3A2"],
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            lineStyle: {
                                color: "#dddc6b"
                            }
                        }
                    },
                    legend: {
                        bottom: "0%",
                        left:"4%",
                        itemGap : 60,
                        // data: ['个人PK', '战队PK']
                        data: ['拉新']
                    },
                    grid: {
                        left: '2%',
                        right: '4%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                            data: this.personalPkDayUserStatistics.list.keys
                        },
                        /* {
                          axisPointer: { show: false },
                          axisLine: { show: false },
                          position: "bottom",
                          offset: 20
                        } */
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisTick: { show: false },
                        }
                    ],
                    series: [
                        {
                            name: '拉新',
                            type: 'line',
                            smooth: true,
                            symbolSize: 10,
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: "#5F93F9"
                                            },
                                            {
                                                offset: 1,
                                                color: "#ffffff"
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: "rgba(0, 0, 0, 0.1)"
                                }
                            },
                            //data: [120, 800, 101, 134, 90, 230, 510]
                            data: this.personalPkDayUserStatistics.list.values
                        },

                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                let myChart = this.personalPkDayUserStatistics.echarts;
                myChart.clear();
                myChart.setOption(option);
                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();
                });

            },
            personalPkDayMoneyStatisticsRender(){
                option = {
                    color: ["#5F93F9", "#58D3A2"],
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            lineStyle: {
                                color: "#dddc6b"
                            }
                        }
                    },
                    legend: {
                        bottom: "0%",
                        left:"4%",
                        itemGap : 60,
                        // data: ['个人PK', '战队PK']
                        data: ['业绩']
                    },
                    grid: {
                        left: '2%',
                        right: '4%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                            data: this.personalPkDayMoneyStatistics.list.keys
                        },
                        /* {
                          axisPointer: { show: false },
                          axisLine: { show: false },
                          position: "bottom",
                          offset: 20
                        } */
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisTick: { show: false },
                        }
                    ],
                    series: [
                        {
                            name: '业绩',
                            type: 'line',
                            smooth: true,
                            symbolSize: 10,
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: "#5F93F9"
                                            },
                                            {
                                                offset: 1,
                                                color: "#ffffff"
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: "rgba(0, 0, 0, 0.1)"
                                }
                            },
                            //data: [120, 800, 101, 134, 90, 230, 510]
                            data: this.personalPkDayMoneyStatistics.list.values
                        },

                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                let myChart = this.personalPkDayMoneyStatistics.echarts;
                myChart.clear();
                myChart.setOption(option);
                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();

                });

            },
            NowTime(){
                //获取年月日
                var time=new Date();
                var year=time.getFullYear();
                var month=time.getMonth()+1;
                var day=time.getDate();

                //获取时分秒
                var h=time.getHours();
                var m=time.getMinutes();
                var s=time.getSeconds();

                //检查是否小于10
                h=this.check(h);
                m=this.check(m);
                s=this.check(s);
                document.getElementById("nowtime").innerHTML="当前时间："+year+"年"+month+"月"+day+"日  "+h+":"+m+":"+s;

            },
            //时间数字小于10，则在之前加个“0”补位。
            check(i){
                //方法一，用三元运算符
                var num;
                i<10?num="0"+i:num=i;
                return num;

            },
        }
    });
</script>