hemall.terabimsoft.com.cn/plugins/shop-statistics/views/backend/order.blade.php

<script src="{{static_url('js/echarts.js')}}" type="text/javascript"></script>
@extends('layouts.base')
@section('title', '订单数据统计')
<script src="{{resource_get('plugins/shop-statistics/assets/js/echarts.min.js')}}"></script>
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<link rel="stylesheet" href="{{resource_get('plugins/shop-statistics/assets/css/common.css')}}">
<link rel="stylesheet" href="{{resource_get('plugins/shop-statistics/assets/css/statistics.css')}}">

<div class="all">
    <div id="app">
        <panel>
            <statistics-card-title>
                数据情况
            </statistics-card-title>
            <ul class="statistics-overall">
                <li>
                    <statistics-card :border="false" title="累计营业额" tip="累计商城支付订单金额，不剔除退款金额" :count="overall.cumulative_turnover" colorful background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_7.png') !!}" count-color="#fba04b">
                    </statistics-card>
                </li>
                <li>
                    <statistics-card :border="false" title="累计已支付单数" tip="累计商城已支付单数，不剔除退款订单" :count="overall.pay_order_count" colorful background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_8.png') !!}" count-color="#43bae0">
                    </statistics-card>
                </li>
                <li>
                    <statistics-card :border="false" title="累计下单人数" tip="累计商城下单人数" :count="overall.member_count" colorful background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_4.png') !!}" count-color="#28b183">
                    </statistics-card>
                </li>
                <li>
                    <statistics-card :border="false" title="累计支付人数" tip="累计商城已支付人数，一人多次支付只记录一次，不剔除退款订单" :count="overall.pay_member_count" colorful background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_6.png') !!}" count-color="#da9a01">
                    </statistics-card>
                </li>
                <li>
                    <statistics-card :border="false" title="累计待支付订单数" tip="累计商城待支付订单数" :count="overall.wait_pay" colorful background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_2.png') !!}" count-color="#4652a9">
                    </statistics-card>
                </li>
                <li>
                    <statistics-card :border="false" title="累计待支付金额" tip="累计商城待支付订单金额" :count="overall.wait_pay_price" colorful background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_3.png') !!}" count-color="#43bae0">
                    </statistics-card>
                </li>
                <li>
                    <statistics-card :border="false" title="累计待发货订单数" tip="累计商城待发货订单数，不剔除退款订单" :count="overall.wait_send" colorful background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_5.png') !!}" count-color="#36c3a7">
                    </statistics-card>
                </li>
                <li>
                    <statistics-card :border="false" title="累计已退款订单金额" tip="累计商城已退款订单金额" :count="overall.refund_success_price" colorful background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_1.png') !!}" count-color="#f26163">
                    </statistics-card>
                </li>
                <li>
                    <statistics-card :border="false" title="累计订单现价" tip="累计商城支付订单现价金额,不剔除退款订单" :count="overall.pay_order_price" colorful background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_1.png') !!}" count-color="#f26163">
                    </statistics-card>
                </li>
            </ul>
        </panel>
        <panel>
            <el-row type="flex" style="row-gap:20px;flex-wrap:wrap;" :gutter="20">
                <el-col :span="4">
                    <statistics-card :title="item.name" :tip="item.tip" :count="item.count" v-for="item in order.statistics" :key="item.name" style="margin-bottom:15px;" :decimals="item.decimals">
                    </statistics-card>
                </el-col>
                <el-col :span="20">
                    <panel-form inline style="text-align: right;">
                        <statistics-time-range @changed="orderSearchTimeRange"></statistics-time-range>
                    </panel-form>
                    <div ref="ordersChart" style="margin-top:20px;width:100%;height:570px;"></div>
                </el-col>
            </el-row>

        </panel>
        <panel>
            <statistics-card-title>
                订单分布区域
                <panel-form inline slot="right">
                    <statistics-time-range @changed="orderDistributedSearchTimeRange"></statistics-time-range>
                </panel-form>
            </statistics-card-title>
            <el-row :gutter="10">
                <el-col :span="14">
                    <div ref="orderDistributedChart" style="width:100%;height:800px"></div>
                </el-col>
                <el-col :span="10">
                    <el-table :data="orderDistributed.data" stripe>
                        <el-table-column label="排名">
                            <template slot-scope="scope">
                                <div class="member-rank" mini plain :data-rank="scope.$index+1">[[ scope.$index+1 ]]</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="地区" prop="areaname"></el-table-column>
                        <el-table-column label="支付金额" prop="order_price"></el-table-column>
                        <el-table-column label="支付笔数" prop="order_count"></el-table-column>
                    </el-table>
                    <div style="margin-top:10px;text-align:center;color:#AEAEB2;">- 只显示前15名 -</div>
                </el-col>
            </el-row>
        </panel>
        <panel v-if="footPrintPluginTurnedon">
            <statistics-card-title>
                交易状况
                <panel-form inline slot="right">
                    <statistics-time-range @changed="transcationSearchTimeRange"></statistics-time-range>
                </panel-form>
            </statistics-card-title>
            <el-row :gutter="20">
                <el-col :span="4">
                    <statistics-card title="访客数" :count="transcation.visitors" tip="统计筛选时间内，页面被访问的人数，多次访问只记录一次">
                    </statistics-card>
                    <statistics-card title="下单人数" :count="transcation.orders" style="margin-top:15px;" tip="统计筛选时间内的下单人数，一人多次下单只记录一人">
                    </statistics-card>
                    <statistics-card title="支付人数" :count="transcation.pays" style="margin-top:15px;" tip="统计筛选时间内的支付人数，一人多次支付只记录一人(不剔除退款订单)">
                    </statistics-card>
                </el-col>
                <el-col :span="20">
                    <div ref="transcationChart" style="margin-top:20px;width:100%;height:600px;"></div>
                </el-col>
            </el-row>
        </panel>
    </div>
</div>

<script>
    const chinaJsonUrl = "{{ resource_get('plugins/shop-statistics/assets/js/maps/china.json') }}";
    const GetOrderDataUrl = "{!! yzWebFullUrl('plugin.shop-statistics.backend.order.get-order-statistic') !!}"; //* 获取订单统计 基本数据
    const GetOrderChartDataUrl = "{!! yzWebFullUrl('plugin.shop-statistics.backend.order.search-order-statistic') !!}"; //* 获取统计图数据
    const GetTranscationDataUrl = "{!! yzWebFullUrl('plugin.shop-statistics.backend.order.search-transaction-overview') !!}"; //* 获取交易数据统计图
    const GetOrderDistributionUrl = "{!! yzWebFullUrl('plugin.shop-statistics.backend.order.search-distribution-area') !!}"; //* 获取订单分布数据
</script>
<script src="{{resource_get('plugins/shop-statistics/assets/js/components.js')}}"></script>
<script src="{{resource_get('plugins/shop-statistics/assets/js/order.js')}}?t={{ time() }}"></script>
<script src="{{resource_get('plugins/shop-statistics/assets/js/common.js')}}"></script>
@endsection