qimall/backend/modules/admin/views/mall/wraparound.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-system');
?>
<div id="app" v-cloak>
    <com-system></com-system>
    <el-card class="generalization">
        <!-- 第二行：数据统计 -->
        <el-row :gutter="20" class="generalization_two">
            <el-col class="generalization_two_item" v-for="(item,index) in generalizationTwoList">
                <el-card>
                    <div style="margin-bottom: 10px; display: flex;align-items: center">
                        <el-image style="width: 30px; height: 30px"
                                :src="item.icon"
                                ></el-image>
                        <span style="margin-left: 10px"> {{ item.value }} </span>
                    </div>
                    <div>{{ item.label }}</div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 第三行：图表 -->
        <el-row :gutter="20" class="generalization_three">
            <el-col :span="8" class="generalization_three_item" style="position: relative">
                <div class="generalization_three_item_button" style="position: absolute; right: 10px; top: 10px; z-index: 9999">
                    <el-radio-group v-model="sales_volume_type" @input="getChangeSalesVolume">
                        <el-radio-button label="week">周</el-radio-button>
                        <el-radio-button label="month">月</el-radio-button>
                    </el-radio-group>
                </div>
                <div ref="echartsContainer" style="width: 100%; height:400px;"></div>
            </el-col>
            <el-col :span="8" class="generalization_three_item">
                <div ref="echartsAddPay" style="width: 100%; height:400px;"></div>
            </el-col>
            <el-col :span="8" class="generalization_three_item">
                <div ref="echartsUserActiveTrends" style="width: 100%; height:400px;"></div>
            </el-col>
            <!-- 其他图表（新客户支付趋势、客户留存趋势等）类似 -->
        </el-row>
        <!-- 第四行：排行榜 -->
        <el-row :gutter="20" class="generalization_four">
            <el-col :span="8">
                <el-card class="generalization_four_item">
                    <div class="header">总业绩排行榜</div>
                    <el-table :data="getTotalAchievementRanking" height="400"
                              :header-cell-style="{'text-align':'center'}"
                              :cell-style="{'text-align':'center'}">
                        <el-table-column prop="rank" type="index" label="排序" width="80">
                            <template slot-scope="scope">
                               <div v-if="getIsInArray(scope.$index + 1,getRankingValueList )" style="display: flex; align-items: center;justify-content: center">
                                   <el-image style="width: 32px; height: 32px" :src="getRankingIconList[scope.$index].icon" :fit="fit"></el-image>
                               </div>
                                <span v-else> {{ scope.$index + 1 }} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="站点名称">
                            <template slot-scope="scope">
                                <div class="mall-logo">
                                    <el-avatar :size="40" :src="scope.row.logo"></el-avatar>
                                    <span style="margin-left: 10px">{{scope.row.mall_name}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="amount" label="总业绩">
                            <template slot-scope="scope">
                                <span>{{ scope.row.total_money }}</span>
                                <div><span>昨天全天: {{scope.row.yesterdayMoney}}</span></div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="generalization_four_item">
                    <div class="header">销售额排行榜</div>
                    <el-table :data="getSalesVolumeRanking" height="400"
                              :header-cell-style="{'text-align':'center'}"
                              :cell-style="{'text-align':'center'}">
                        <el-table-column prop="rank" type="index" label="排序" width="80">
                            <template slot-scope="scope">
                                <div v-if="getIsInArray(scope.$index + 1,getRankingValueList )" style="display: flex; align-items: center;justify-content: center">
                                    <el-image style="width: 32px; height: 32px" :src="getRankingIconList[scope.$index].icon" :fit="fit"></el-image>
                                </div>
                                <span v-else> {{ scope.$index + 1 }} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="商品名称">
                            <template slot-scope="scope">
                                <div class="mall-logo">
                                    <div style="width: 40px;height: 40px">
                                        <el-avatar :src="scope.row.goods.cover_pic" shape="square"></el-avatar>
                                    </div>
                                    <span style="margin-left: 10px">{{scope.row.goods.goods_name}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="amount" label="站点名称" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span>{{ scope.row.mall.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="amount" label="销售额">
                            <template slot-scope="scope">
                                <span>{{ scope.row.total_pay_money }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="generalization_four_item">
                    <div class="header">热销商品榜</div>
                    <el-table :data="getHotSalesGoodsRanking" height="400"
                              :header-cell-style="{'text-align':'center'}"
                              :cell-style="{'text-align':'center'}">
                        <el-table-column prop="rank" label="排序" type="index" width="80">
                            <template slot-scope="scope">
                                <div v-if="getIsInArray(scope.$index + 1,getRankingValueList )" style="display: flex; align-items: center;justify-content: center">
                                    <el-image style="width: 32px; height: 32px" :src="getRankingIconList[scope.$index].icon" :fit="fit"></el-image>
                                </div>
                                <span v-else> {{ scope.$index + 1 }} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="商品名称" width="120" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div class="mall-logo">
                                    <div style="width: 40px;height: 40px">
                                        <el-avatar :src="scope.row.goods.cover_pic" shape="square"></el-avatar>
                                    </div>
                                    <span style="margin-left: 10px">{{scope.row.goods.goods_name}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="amount" label="站点名称" >
                            <template slot-scope="scope">
                                <span>{{ scope.row.mall.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="amount" label="销售量">
                            <template slot-scope="scope">
                                <span>{{ scope.row.total_sales_volume }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <!-- 其他排行榜（销售额排行榜、热销商品榜等）类似 -->
        </el-row>
    </el-card>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                generalizationHeaderLists: [],
                getTotalAchievementRanking: [],
                getSalesVolumeRanking: [],
                getHotSalesGoodsRanking: [],
                sales_volume_type: 'month',
                generalizationTwoList: [
                    {
                        key: 'total_money',
                        value: 0,
                        label: '总业绩',
                        icon: _diy_img_prefix + '/static/system-icon/summarize/ranking.png',
                    },
                    {
                        key: 'total_users',
                        value: 0,
                        label: '会员总数',
                        icon: _diy_img_prefix + '/static/system-icon/summarize/user.png',
                    },
                    {
                        key: 'total_orders',
                        value: 0,
                        label: '订单总数',
                        icon: _diy_img_prefix + '/static/system-icon/summarize/order.png',
                    },
                    {
                        key: 'total_sales',
                        value: 0,
                        label: '总销量',
                        icon: _diy_img_prefix + '/static/system-icon/summarize/sales.png',
                    },
                    {
                        key: 'total_profit',
                        value: 0,
                        label: '总利润',
                        icon: _diy_img_prefix + '/static/system-icon/summarize/profit.png',
                    }
                ],
                getThreeDate: [],
                getThreeActivesList: [],// 活跃数
                getThreeAddUserList: [],// 新增用户数
                getThreeAddPayUserList: [],// 新增用户数
                getRankingIconList: [
                    {
                        icon: _diy_img_prefix + '/static/system-icon/summarize/one.png',
                    },
                    {
                        icon: _diy_img_prefix + '/static/system-icon/summarize/two.png',
                    },
                    {
                        icon: _diy_img_prefix + '/static/system-icon/summarize/three.png',
                    }
                ],
                getRankingValueList: [1, 2 , 3],
                getSaleTrendHorizontal: [], // 销量趋势图横轴数据
                getSaleTrendPrice: [], // 销量趋势图营销额
                getSaleTrendProfitPrice: [], // 销量趋势图利润
            }
        },
        mounted() {
           /* this.loadList();
            this.initCharts()*/
            this.loadList();
            this.initSaleTrendStatus();
            this.initSaleTrendByMonth();
        },
        methods: {
            loadList() { // 初始数据
                this.$request({
                    params: {
                        r: 'admin/system/get-wraparound',
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.generalizationTwoList.forEach((item, index) => {
                            item.value = e.data.data.oneStatus[item.key]
                        });
                        this.getTotalAchievementRanking = e.data.data.threeStatus.total_achievement_ranking;
                        this.getSalesVolumeRanking = e.data.data.threeStatus.sales_volume_ranking;
                        this.getHotSalesGoodsRanking = e.data.data.threeStatus.hot_sales_goods_ranking;
                    }
                }).catch(e => {
                    console.log(e, "失败了？")
                });
            },
            initSaleTrendStatus() { // 柱状图
                this.$request({
                    params: {
                        r: 'admin/system/get-sale-trend',
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        let data = e.data.data;
                        data.saleTrendList.forEach((item, index) => {
                            this.getThreeDate.push(item.date);
                            this.getThreeActivesList.push(item.total_actives);
                            this.getThreeAddUserList.push(item.add_users);
                            this.getThreeAddPayUserList.push(item.add_pay_users);
                        })
                        this.initUserActiveTrends();
                        this.initAddPay();
                    }
                }).catch(e => {
                    console.log(e, "失败了？")
                });
            },
            getChangeSalesVolume() {
                this.initSaleTrendByMonth();
            },
            initSaleTrendByMonth() {
                const SALES_VOLUME_TYPE_MONTH = 'month';
                this.$request({
                    params: {
                        r: 'admin/system/get-sale-trend-month',
                        type: this.sales_volume_type,
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        let data = e.data.data;
                        let getSaleTrendHorizontal = [];
                        let getSaleTrendPrice = [];
                        let getSaleTrendProfitPrice = [];

                        const formatDate = (item, index) => {
                            if (this.sales_volume_type === SALES_VOLUME_TYPE_MONTH) {
                                return `${item.year}年${item.month}月`;
                            } else {
                                return `第${index + 1}周`;
                            }
                        };

                        data.orderDetailModel.forEach((item, index) => {
                            getSaleTrendHorizontal.push(formatDate(item, index));
                            getSaleTrendPrice.push(item.goods_price);
                            getSaleTrendProfitPrice.push(item.profit_price);
                        });

                        this.getSaleTrendHorizontal = getSaleTrendHorizontal;
                        this.getSaleTrendPrice = getSaleTrendPrice;
                        this.getSaleTrendProfitPrice = getSaleTrendProfitPrice;
                        this.initSaleTrend();
                    }
                }).catch(e => {
                    console.log(e, "失败了？")
                });
            },
            initUserActiveTrends() {
                const echartsUserActiveTrends = echarts.init(this.$refs.echartsUserActiveTrends);
                // 指定图表的配置项和数据
                const optionUserActiveTrends = {
                    title: {
                        text: '用户活跃趋势'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['日活跃用户'],
                        orient: 'horizontal',
                        top: 'bottom',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.getThreeDate
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '日活跃用户',
                        type: 'line',
                        data: this.getThreeActivesList,
                        itemStyle : { normal: {label : {show: true}}},
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                echartsUserActiveTrends.setOption(optionUserActiveTrends);
                window.addEventListener("resize", function() {
                    echartsUserActiveTrends.resize();
                });
            },
            initAddPay() {
                const echartsAddPay = echarts.init(this.$refs.echartsAddPay);
                // 指定图表的配置项和数据
                const optionAddPay = {
                    title: {
                        text: '新增&付费趋势'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['新增用户', '新增付费用户'],
                        orient: 'horizontal',
                        top: 'bottom',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.getThreeDate
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '新增用户',
                        type: 'line',
                        data: this.getThreeAddUserList,
                    }, {
                        name: '新增付费用户',
                        type: 'line',
                        data: this.getThreeAddPayUserList,
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                echartsAddPay.setOption(optionAddPay);
                window.addEventListener("resize", function() {
                    echartsAddPay.resize();
                });
            },
            initSaleTrend() {
                const myChart = echarts.init(this.$refs.echartsContainer);
                // 指定图表的配置项和数据
                const option = {
                    title: {
                        text: '销售趋势'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['销售额', '利润'],
                        orient: 'horizontal',
                        top: 'bottom',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.getSaleTrendHorizontal
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '销售额',
                            type: 'line',
                            stack: 'Total',
                            data: this.getSaleTrendPrice
                        },
                        {
                            name: '利润',
                            type: 'line',
                            stack: 'Total',
                            data: this.getSaleTrendProfitPrice
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            initCharts() {
                // 初始化销售趋势图表
                let salesTrendChart = echarts.init(document.getElementById('salesTrendChart'))
                let salesTrendOption = {
                    // ECharts配置项
                    xAxis: {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [200, 400, 600, 800],
                            type: 'line'
                        }
                    ]
                }
                salesTrendChart.setOption(salesTrendOption)
                window.addEventListener("resize", function() {
                    salesTrendChart.resize();
                });
                // 初始化其他图表类似
            },
            getIsInArray(value, array) {
                return array.includes(value);
            }
        },
    });
</script>

<style >
    .generalization {
        min-width: 1200px;
    }
    .generalization_two{
        display: flex;
        justify-content: space-between;
    }
    .generalization_two_item{
        width: 20%;
        margin-bottom: 15px;
    }
    .generalization_two_item .el-card {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 120px;
        text-align: center;
        font-size: 18px;
    }
    .mall-logo {
        display: flex;
        align-items: center;
    }
    .generalization_three {
        margin-top: 15px;
    }
    .generalization_three_item {
        height: 400px;
    }
    .generalization_four {
        margin-top: 40px;
    }
    .generalization_four_item {
        text-align: center;
        font-size: 18px;
    }
    .generalization_four_item .header{
        font-size: 22px;
        margin-bottom: 15px;
    }

</style>