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

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width:1600px;" body-style="padding: 20px;">
        <div class="head flex">
            <div class="head-left">
                <!-- 实时概况 -->
                <div class="overview_box">
                    <div class="flex-x-between" style="margin-bottom:40px">
                        <div class="head-left-text">实时概况</div>
                        <div>当前时间：{{data.currTime}}</div>
                    </div>
                    <div class="flex overview_list">
                        <div class="flex-y-center overview_list_box">
                            <!-- <img class="overview_list_img" src="/resources/img/plugins/store/overview1.png" class="" alt=""> -->
                            <el-image class="overview_list_img" :src="icons.overview1"></el-image>
                            <div class="overview_item">
                                <div class="overview_item_title">实收金额（元）</div>
                                <div class="overview_item_price">{{data.statistics.real_pay_amounts}}</div>
                                <div class="overview_item_time">昨日：{{data.statistics.yesterday_real_pay_amounts}}</div>
                            </div>
                        </div>
                        <div class="flex-y-center overview_list_box">
                            <!-- <img class="overview_list_img" src="/resources/img/plugins/store/overview2.png" class="" alt=""> -->
                            <el-image class="overview_list_img" :src="icons.overview2"></el-image>
                            <div class="overview_item">
                                <div class="overview_item_title">待结算</div>
                                <div class="overview_item_price">{{data.statistics.not_settle_amounts}}</div>
                                <div class="overview_item_time">昨日：{{data.statistics.yesterday_not_settle_amounts}}</div>
                            </div>
                        </div>
                        <div class="flex-y-center overview_list_box">
                            <!-- <img class="overview_list_img" src="/resources/img/plugins/store/overview3.png" class="" alt=""> -->
                            <el-image class="overview_list_img" :src="icons.overview3"></el-image>
                            <div class="overview_item">
                                <div class="overview_item_title">待审核提现（元）</div>
                                <div class="overview_item_price">{{data.statistics.waiting_audit_withdraw_amounts}}</div>
                                <div class="overview_item_time">昨日：{{data.statistics.yesterday_waiting_audit_withdraw_amounts}}</div>
                            </div>
                        </div>
                        <div class="flex-y-center overview_list_box">
                            <!-- <img class="overview_list_img" src="/resources/img/plugins/store/overview4.png" class="" alt=""> -->
                            <el-image class="overview_list_img" :src="icons.overview4"></el-image>
                            <div class="overview_item">
                                <div class="overview_item_title">待打款提现（元）</div>
                                <div class="overview_item_price">{{data.statistics.waiting_pay_withdraw_amounts}}</div>
                                <div class="overview_item_time">昨日：{{data.statistics.yesterday_waiting_pay_withdraw_amounts}}</div>
                            </div>
                        </div>
                        <div class="flex-y-center overview_list_box">
                            <!-- <img class="overview_list_img" src="/resources/img/plugins/store/overview5.png" class="" alt=""> -->
                            <el-image class="overview_list_img" :src="icons.overview5"></el-image>
                            <div class="overview_item">
                                <div class="overview_item_title">待审核多商户数</div>
                                <div class="overview_item_price">{{data.statistics.waiting_audit_store_numbers}}</div>
                                <div class="overview_item_time">昨日：{{data.statistics.yesterday_waiting_audit_store_numbers}}</div>
                            </div>
                        </div>
                        <div class="flex-y-center overview_list_box">
                            <!-- <img class="overview_list_img" src="/resources/img/plugins/store/overview6.png" class="" alt=""> -->
                            <el-image class="overview_list_img" :src="icons.overview6"></el-image>
                            <div class="overview_item">
                                <div class="overview_item_title">
                                    <span>已结算佣金</span>
                                    <el-popover placement="top-start" width="250" trigger="hover" content="多商户订单结算给会员的佣金">
                                        <i slot="reference" class="el-icon-question grid-icon"></i>
                                    </el-popover>
                                </div>
                                <div class="overview_item_price">{{data.statistics.settle_amounts}}</div>
                                <div class="overview_item_time">昨日：{{data.statistics.yesterday_settle_amounts}}</div>
                            </div>
                        </div>
                        <div class="flex-y-center overview_list_box">
                            <!-- <img class="overview_list_img" src="/resources/img/plugins/store/overview7.png" class="" alt=""> -->
                            <el-image class="overview_list_img" :src="icons.overview7"></el-image>
                            <div class="overview_item">
                                <div class="overview_item_title">支付人数</div>
                                <div class="overview_item_price">{{data.statistics.pay_people_numbers}}</div>
                                <div class="overview_item_time">昨日：{{data.statistics.yesterday_pay_people_numbers}}</div>
                            </div>
                        </div>
                        <div class="flex-y-center overview_list_box">
                            <!-- <img class="overview_list_img" src="/resources/img/plugins/store/overview8.png" class="" alt=""> -->
                            <el-image class="overview_list_img" :src="icons.overview8"></el-image>
                            <div class="overview_item">
                                <div class="overview_item_title">支付订单</div>
                                <div class="overview_item_price">{{data.statistics.pay_order_numbers}}</div>
                                <div class="overview_item_time">昨日：{{data.statistics.yesterday_pay_order_numbers}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 地图 -->
            </div>
            <div class="head-right">
                <!-- 多商户销售排行榜 -->
                <div class="sale_rank">
                    <div class="sale_rank_title flex-y-center">
                        <div class="sale_rank_line"></div>
                        <div class="sale_rank_text">多商户销售排名TOP10</div>
                    </div>
                    <div class="sale_rank_list">
                        <div class="sale_rank_item flex-x-between" v-for="(item,index) in data.store_good_ranking_list" :key='index'>
                            <div class="sale_rank_item-left flex-y-center">
                                <div class="sale_rank_num">{{index+1}}</div>
                                <!-- <img class="sale_rank_img" src="/resources/img/plugins/store/overview1.png" alt=""> -->
                                <el-image class="sale_rank_img" :src="item.logo_img">
                                    <div slot="error" class="image-slot">
                                        <!-- <img class="sale_rank_img" src="/resources/img/plugins/store/overview1.png" /> -->
                                        <el-image class="sale_rank_img" :src="icons.overview1"></el-image>
                                    </div>
                                </el-image>
                                <div class="sale_rank_name over1">{{item.store_name}}</div>
                            </div>
                            <div class="flex-y-center">
                                <!-- <img src="/resources/img/plugins/store/sales-img.png" class="sale_img" alt=""> -->
                                <el-image :src="icons.sales_img"></el-image>
                                <div class="sale_num">{{item.sales_money}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="main_box flex-x-between">
            <div class="main_box_right">
                <div class="money_overview_text" style="margin-bottom: 40px;">常用功能</div>
                <div class="flex-y-center" style="flex-wrap:wrap">
                    <div class="flex-y-center features_list_box" style="flex-direction: column;" @click="to(1)">
                        <img class="features_list_img" src="/resources/img/plugins/store/features1.png" class="" alt="">
                        <div class="overview_item">
                            <div class="overview_item_title">多商户管理</div>
                        </div>
                    </div>
                    <div class="flex-y-center features_list_box" style="flex-direction: column;" @click="to(2)">
                        <img class="features_list_img" src="/resources/img/plugins/store/features2.png" class="" alt="">
                        <div class="overview_item">
                            <div class="overview_item_title">多商户申请</div>
                        </div>
                    </div>
                    <div class="flex-y-center features_list_box" style="flex-direction: column;" @click="to(3)">
                        <img class="features_list_img" src="/resources/img/plugins/store/features3.png" class="" alt="">
                        <div class="overview_item">
                            <div class="overview_item_title">多商户订单</div>
                        </div>
                    </div>
                    <div class="flex-y-center features_list_box" style="flex-direction: column;" @click="to(4)">
                        <img class="features_list_img" src="/resources/img/plugins/store/features4.png" class="" alt="">
                        <div class="overview_item">
                            <div class="overview_item_title">收银台订单</div>
                        </div>
                    </div>
                    <div class="flex-y-center features_list_box" style="flex-direction: column;" @click="to(5)">
                        <img class="features_list_img" src="/resources/img/plugins/store/features5.png" class="" alt="">
                        <div class="overview_item">
                            <div class="overview_item_title">推荐设置</div>
                        </div>
                    </div>
                    <div class="flex-y-center features_list_box" style="flex-direction: column;" @click="to(6)">
                        <img class="features_list_img" src="/resources/img/plugins/store/features6.png" class="" alt="">
                        <div class="overview_item">
                            <div class="overview_item_title">商品管理</div>
                        </div>
                    </div>
                    <div class="flex-y-center features_list_box" style="flex-direction: column;" @click="to(7)">
                        <img class="features_list_img" src="/resources/img/plugins/store/features7.png" class="" alt="">
                        <div class="overview_item">
                            <div class="overview_item_title">对账管理</div>
                        </div>
                    </div>
                    <div class="flex-y-center features_list_box" style="flex-direction: column;" @click="to(8)">
                        <img class="features_list_img" src="/resources/img/plugins/store/features8.png" class="" alt="">
                        <div class="overview_item">
                            <div class="overview_item_title">收银设置</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="goods_rank_box">
            <div class="goods_rank_title">商品销量排行（TOP5）</div>
            <div>
                <el-table :data="data.top_goods" border style="width: 100%" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                    <el-table-column label="排名" width="80">
                        <template slot-scope="scope">
                            {{scope.$index+1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="商品ID" width="100"></el-table-column>
                    <el-table-column label="商品图片" width='120'>
                        <template slot-scope="scope">
                            <div class="flex-x-center">
                                <img class="goods_img" :src="scope.row.cover_pic" alt="">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品名称" :show-overflow-tooltip='true' width='250'></el-table-column>
                    <el-table-column prop="address" label="所属多商户" width='250'>
                        <template slot-scope="scope">
                            <div class="flex-x-center flex-y-center">
                                <img class="goods_img" :src="scope.row.shop_url" alt="">
                                <div>{{scope.row.shop_name}}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="order_count" label="下单件数"></el-table-column>
                    <el-table-column prop="order_people_count" label="下单人数"></el-table-column>
                    <el-table-column prop="pay_count" label="支付件数"></el-table-column>
                    <el-table-column prop="pay_people_count" label="支付人数"></el-table-column>
                    <el-table-column label="销售总金额">
                        <template slot-scope="scope">
                            <div>{{scope.row.order_sum}}元</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div> -->
    </el-card>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d49fb742889b43ddf4271df776170f1d"></script>
<script>
    let map;
    const app = new Vue({
        el: '#app',
        data() {
            return {
                data: {
                    statistics: {},
                    store_good_ranking_list: [],
                    // top_goods: [],
                    region_ranking_list: [],
                    currTime: '2022-05-13 14:02:00',
                },
                value1: '',
                search_city: '',
                icons: {
                    overview1: _diy_img_prefix + '/static/addons/Store/overview1.png',
                    overview2: _diy_img_prefix + '/static/addons/Store/overview2.png',
                    overview3: _diy_img_prefix + '/static/addons/Store/overview3.png',
                    overview4: _diy_img_prefix + '/static/addons/Store/overview4.png',
                    overview5: _diy_img_prefix + '/static/addons/Store/overview5.png',
                    overview6: _diy_img_prefix + '/static/addons/Store/overview6.png',
                    overview7: _diy_img_prefix + '/static/addons/Store/overview7.png',
                    overview8: _diy_img_prefix + '/static/addons/Store/overview8.png',
                    sales_img: _diy_img_prefix + '/static/addons/Store/sales-img.png',
                },
            };
        },
        mounted() {
            let date = new Date();
            this.loadData();
        },
        methods: {
            loadMap(map_data) {
                // 初始化地图
                this.initMap();
                // 金额概况圆饼
                var total_text = '多商户实收金额'
                var total_num = map_data[0] || 0;
                var legend_data = ['多商户实收货款(元)', '平台佣金(元)'];
                var data = [{
                        value: map_data[1] || 0,
                        name: '多商户实收货款(元)'
                    },
                    {
                        value: map_data[2] || 0,
                        name: '平台佣金(元)'
                    },
                ];
                this.initChart(document.getElementById('money_chart'), total_num, total_text, legend_data, data);

                // 订单概况圆饼
                var total_text2 = '订单总数'
                var total_num2 = map_data[3] || 0;
                var legend_data2 = ['多商户订单', '收银台订单', '售后订单'];
                var data2 = [{
                        value: map_data[4] || 0,
                        name: '多商户订单'
                    },
                    {
                        value: map_data[6] || 0,
                        name: '收银台订单'
                    },
                    {
                        value: map_data[5] || 0,
                        name: '售后订单'
                    }
                ];
                this.initChart(document.getElementById('order_chart'), total_num2, total_text2, legend_data2, data2);
            },
            /* to(num) {
                switch (num) {
                    case 1:
                        navigateTo({
                            r: 'plugin/o2o_store/mall/store/index',
                        });
                        break;
                    case 2:
                        navigateTo({
                            r: 'plugin/o2o_store/mall/store/apply',
                        });
                        break;
                    case 3:
                        navigateTo({
                            r: 'plugin/o2o_store/mall/order/index',
                        });
                        break;
                    case 4:
                        navigateTo({
                            r: 'plugin/o2o_store/mall/order/cashier',
                        });
                        break;
                    case 5:
                        navigateTo({
                            r: 'plugin/o2o_store/mall/recommend/index',
                        });
                        break;
                    case 6:
                        navigateTo({
                            r: 'plugin/o2o_store/mall/goods/index',
                        });
                        break;
                    case 7:
                        navigateTo({
                            r: 'plugin/o2o_store/mall/finance/index',
                        });
                        break;
                    case 8:
                        navigateTo({
                            r: 'plugin/o2o_store/mall/cashier/index',
                        });
                        break;
                }
            }, */
            mapChange() {
                //地图的日期搜索
                console.log(this.value1, 'value1value1');
            },
            amountChange() {
                //金额的日期搜索
            },
            orderChange() {
                //订单的日期搜索
            },
            citySearch() {
                //多商户查询
                map.setCity(this.search_city);
            },
            initMap() {
                map = new AMap.Map('container', {
                    resizeEnable: true,
                });
            },
            goMap() {
                var val = '白云区';

            },
            initChart(el, num, text, legendData, data) {
                var myChart = echarts.init(el);
                myChart.setOption({
                    title: {
                        zlevel: 0,
                        text: [
                            '{name|' + text + '}',
                            '{value|' + num + '}',
                        ].join('\n'),
                        top: 'center',
                        right: 'center',
                        textStyle: {
                            rich: {
                                name: {
                                    color: '#545454',
                                    fontSize: 16,
                                    lineHeight: 40,
                                },
                                value: {
                                    color: '#545454',
                                    fontSize: 24,
                                    lineHeight: 20
                                },
                            },
                        },
                    },
                    legend: {
                        orient: 'horizontal',
                        left: 'center',
                        bottom: 10,
                        data: legendData
                    },
                    series: [{
                        type: 'pie',
                        radius: ['50%', '70%'],
                        label: {
                            normal: {
                                show: true,
                                position: 'outside',
                                formatter: '{c}'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true,
                                length: 0,
                                length2: 10
                            }
                        },
                        color: ['#6395F9', '#62DAAB', '#FF7575'],
                        data: data
                    }]
                });
            },

            loadData() {
                request({
                    params: {
                        r: 'store/default/index',
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.data = e.data.data
                        this.loadMap(e.data.data.map);
                    }
                }).catch(e => {
                    this.getGoods_loading = false;
                    console.log(e);
                });
            }
        }
    });
</script>

<style>
    .head-left {
        width: 1100px;
        margin-right: 30px;
    }

    /* 实时概况 */
    .overview_box {
        padding: 20px 20px 0 20px;
        background: #F7F7F7;
        box-shadow: 3px 3px 5px rgb(134 134 134 / 35%);
        border-radius: 5px;
        height: 328px;
        margin-bottom: 20px;
    }

    .head-left-text {
        font-size: 18px;
        color: #333333;
        font-weight: 600;
    }

    .overview_list {
        padding-left: 30px;
        flex-wrap: wrap;
    }

    .overview_list_box {
        margin-right: 100px;
        margin-bottom: 50px;
        width: 178px;
    }

    .overview_list_box:nth-of-type(4n) {
        margin-right: 0;
    }

    .overview_list_img {
        width: 50px;
        height: 50px;
        display: block;
        margin-right: 15px;
    }

    .overview_item_title {
        font-size: 14px;
        color: #333333;
        font-weight: 600;
    }

    .overview_item_price {
        font-size: 20px;
        color: #333333;
        font-weight: 600;
        margin: 6px 0;
    }

    .overview_item_time {
        color: #9f9f9f;
        font-size: 12px;
    }

    /* 地图 */
    .map_box {
        background: #F7F7F7;
        border: 1px solid rgba(208, 223, 253, 1);
        border-radius: 10px;
        width: 1560px;
        height: 514px;
        box-shadow: 3px 3px 5px rgb(155 155 155 / 35%);
        padding: 15px 20px 10px;
    }

    .head-right {
        width: 428px;
    }

    /* 销售排行榜 */
    .sale_rank {
        border: 1px solid rgba(208, 208, 208, 1);
        border-radius: 10px;
        width: 428px;
        height: 328px;
        box-shadow: 3px 3px 5px rgb(161 161 161 / 35%);
        padding: 20px 10px 0;
        margin-bottom: 20px;
    }

    .sale_rank_title {
        border-bottom: 1px solid #D0D0D0;
        padding: 0 10px 6px;
        margin-bottom: 15px;
    }

    .sale_rank_line {
        background: rgba(55, 113, 240, 1);
        width: 5px;
        height: 22px;
        margin-right: 10px;
    }

    .sale_rank_text {
        font-size: 14px;
        color: #333333;
        font-weight: 600;
    }

    .sale_rank_list {
        height: 250px;
        overflow: hidden;
        overflow-y: auto;
    }

    .sale_rank_item {
        padding: 0 10px 6px;
        border-bottom: 1px solid #D0D0D0;
        margin-bottom: 15px;
    }

    .sale_rank_num {
        font-size: 16px;
        font-weight: 600;
        margin-right: 10px;
    }

    .sale_rank_img {
        width: 22px;
        height: 22px;
        margin-right: 10px;
        display: block;
    }

    .sale_rank_name {
        width: 220px;
    }

    .sale_img {
        width: 24px;
        height: 24px;
        display: block;
        margin-right: 6px;
    }

    .sale_num {
        font-size: 16px;
        font-weight: 600;
        color: #DE031A;
    }


    .map {
        width: 1200px;
        height: 435px;
        background: #417FC8;
        position: relative;
    }

    .map_content {
        width: 100%;
        height: 100%;
    }

    .map_search_box {
        position: absolute;
        width: 328px;
        height: 42px;
        border-radius: 6px;
        top: 20px;
        left: 20px;
        box-sizing: border-box;
        /* box-shadow: 3px 3px 5px rgb(132 132 132 / 35%); */
    }

    .map_table {
        width: 300px;
        height: 435px;
        border-radius: 10px;
    }

    .map_table_title {
        background: #535353;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        height: 60px;
        border-radius: 10px 10px 0 0;
    }

    .map_table_content {
        border: 1px solid rgba(208, 223, 253, 1);
        height: 373px;
        overflow: hidden;
        overflow-y: auto;
    }

    .map_table_item {
        height: 43px;
        background: #fff;
        border-bottom: 1px solid rgba(208, 223, 253, 1);
    }

    .map_table_item:last-child {
        border-bottom: 0;
    }

    .map_table_title_item {
        width: 33%;
        text-align: center;
    }

    .map_table_content_item {
        width: 33%;
        text-align: center;
    }

    .detail_num {
        color: #417FC8;
        font-weight: 600;
    }

    /* 让日期选择器变小 */
    .date_box .el-date-editor--daterange.el-input__inner {
        width: 250px;
    }

    .date_box .el-date-editor .el-range-input {
        width: 35%;
    }

    .date_box .el-date-editor .el-range-separator {
        width: 10%;
    }

    .money_overview_chart {
        width: 100%;
        height: calc(100% - 32px);
        /* width: 606px;
        height: 500px; */
    }

    .main_box {
        width: 1560px;
        margin: 20px 0;
    }


    .main_box_right {
        width: 1560px;
        border: 1px solid rgba(212, 212, 212, 1);
        box-shadow: 3px 3px 5px rgb(155 155 155 / 35%);
        border-radius: 10px;
        padding: 15px 20px 0;
        height: 258px;
    }

    .features_list {
        padding: 20px 30px 0;
    }

    .features_list_img {
        width: 70px;
        height: 70px;
        display: block;
        margin-bottom: 15px;
        border-radius: 15px;
    }

    .features_list_box {
        margin-right: 5px;
        margin-bottom: 65px;
        width: 178px;
    }

    .features_list_box:nth-of-type(4n) {
        margin-right: 0;
    }

    .order_overview_chart {
        background: pink;
        height: calc(100% - 32px);
    }

    .goods_rank_box {
        border: 1px solid rgba(213, 213, 213, 1);
        box-shadow: 3px 3px 5px rgb(172 172 172 / 35%);
        width: 1560px;
        border-radius: 10px;
        padding: 20px;
    }

    .goods_rank_title {
        font-size: 18px;
        color: #333;
        font-weight: 600;
        margin-bottom: 30px;
    }

    .goods_img {
        width: 40px;
        height: 40px;
        display: block;
        margin-right: 10px;
    }

    body .el-table th.gutter {
        display: table-cell !important;
    }

    .search_inp {
        width: 174px;
        height: 100%;
    }

    .data_show {
        background: #fff;
        height: 40px;
        width: 250px;
        border: 1px solid #DCDFE6;
        font-size: 13px;
        margin-top: 5px;
        box-shadow: 3px 3px 5px rgb(132 132 132 / 35%);
        border-radius: 5px;
        padding-left: 10px;
    }

    .data_show_col {
        color: #417FC8;
    }

    @media (max-width: 1500px) {}

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

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    /* 溢出隐藏 */
    .over1 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .over2 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .grid-icon {
        color: #999;
        cursor: pointer;
        font-size: 18px;
    }
</style>