hemall.terabimsoft.com.cn/plugins/shop-statistics/views/backend/goods.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')}}">

<style>
    .member-rank-row {
        margin: 20px 0 15px;
        padding-bottom:19px;
        border-bottom: 1px solid #e6e9f0;
    }

    /* .member-rank-row .el-col:nth-child(2),
    .member-rank-row .el-col:nth-child(3) {
        padding-bottom: 7px;
        border-bottom: 1px solid #eee;
    } */
</style>

<div class="all">
    <div id="app">
        <panel>
            <statistics-card-title>数据情况</statistics-card-title>
            <ul class="statistics-overall">
                <li>
                    <statistics-card colorful :border="false" title="在架商品数" tip="当前时间在架商品的数量" :count="overall.goods_count" count-color="#fba04b" background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_7.png') !!}">
                    </statistics-card>
                </li>
                <li>
                    <statistics-card colorful :border="false" title="累计商品成交件数" tip="累计支付成功的商品件数总和" :count="overall.pay_goods_count" count-color="#43bae0" background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_8.png') !!}">
                    </statistics-card>
                </li>
                <li>
                    <statistics-card colorful :border="false" title="累计商品下单件数" tip="累计下单的商品件数的总和" :count="overall.order_goods_count" count-color="#28b183" background="{!! resource_get('plugins/shop-statistics/assets/images/statistics_card_4.png') !!}">
                    </statistics-card>
                </li>
            </ul>
        </panel>
        <panel>
            <el-row :gutter="20">
                <el-col :span="4">
                    <statistics-card :title="statisticsItem.title" :tip="statisticsItem.tip" :count="statisticsItem.count" v-for="(statisticsItem,itemIndex) in goodsStatistics" :key="itemIndex" style="margin-bottom:15px;">
                    </statistics-card>
                </el-col>
                <el-col :span="20">
                    <panel-form inline style="text-align: right;">
                        <statistics-time-range @changed="goodsTimeRangeChanged"></statistics-time-range>
                    </panel-form>
                    <div ref="goodsChart" style="margin-top:20px;width:100%;height:500px;"></div>
                </el-col>
            </el-row>
        </panel>
        <el-row id="goodsRankList" type="flex" style="flex-wrap:wrap;row-gap:20px;margin-top:20px;font-size:16px;">
            <el-col :span="8">
                <panel>
                    <statistics-card-title>
                        商品销售金额排名
                        <el-tooltip class="item" effect="dark" content="商品支付金额排名，不剔除退款金额" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </statistics-card-title>
                    <el-row class="member-rank-row" type="flex" align="middle" :gutter="10" v-for="(dataItem,itemIndex) in goodsSaleAmountRank" :key="dataItem.goods_id">
                        <el-col :span="3">
                            <div class="member-rank" round mini :data-rank="itemIndex+1">[[ itemIndex+1 ]]</div>
                        </el-col>
                        <el-col :span="16">
                            <div class="ellipsis1">[[ dataItem.title ]]</div>
                        </el-col>
                        <el-col :span="5" style="text-align: center;color:#f56b05;font-size:16px;">[[ dataItem.goods_price_total ]]</el-col>
                    </el-row>
                    <el-row>
                        <el-col align="center">
                            <a href="{!! yzWebFullUrl('plugin.shop-statistics.backend.goods.goods-sales-amount-show') !!}">
                                <el-button v-show="goodsSaleAmountRank.length>0" round type="primary">
                                    查看更多
                                </el-button>
                            </a>
                        </el-col>
                    </el-row>
                </panel>
            </el-col>
            <el-col :span="8">
                <panel>
                    <statistics-card-title>
                        商品销售排名
                        <el-tooltip class="item" effect="dark" content="商品销售排名" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </statistics-card-title>
                    <el-row class="member-rank-row" type="flex" align="middle" :gutter="10" v-for="(dataItem,itemIndex) in goodsSaleRank" :key="dataItem.goods_id">
                        <el-col :span="3">
                            <div class="member-rank" round mini :data-rank="itemIndex+1">[[ itemIndex+1 ]]</div>
                        </el-col>
                        <el-col :span="16">
                            <div class="ellipsis1">[[ dataItem.title ]]</div>
                        </el-col>
                        <el-col :span="5" style="text-align: center;color:#e42a18;font-size:16px;">[[ dataItem.real_sales ]]</el-col>
                    </el-row>
                    <el-row>
                        <el-col align="center">
                            <a href="{!! yzWebFullUrl('plugin.shop-statistics.backend.goods.goods-sales-show') !!}">
                                <el-button v-show="goodsSaleRank.length>0" round type="primary">
                                    查看更多
                                </el-button>
                            </a>
                        </el-col>
                    </el-row>
                </panel>
            </el-col>
            <el-col :span="8">
                <panel>
                    <statistics-card-title>
                        分类销售排名
                        <el-tooltip class="item" effect="dark" content="分类销量排名" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </statistics-card-title>
                    <el-row class="member-rank-row" type="flex" align="middle" :gutter="10" v-for="(dataItem,itemIndex) in categorySaleRank" :key="dataItem.id">
                        <el-col :span="3">
                            <div class="member-rank" round mini :data-rank="itemIndex+1">[[ itemIndex+1 ]]</div>
                        </el-col>
                        <el-col :span="16">
                            <div class="ellipsis1">[[ dataItem.name ]]</div>
                        </el-col>
                        <el-col :span="5" style="text-align: center;color:#f59c00;font-size:16px;">[[ dataItem.sales ]]</el-col>
                    </el-row>
                    <el-row>
                        <el-col align="center">
                            <a href="{!! yzWebFullUrl('plugin.shop-statistics.backend.goods.category-sales-show') !!}">
                                <el-button v-show="categorySaleRank.length>0" round type="primary">
                                    查看更多
                                </el-button>
                            </a>
                        </el-col>
                    </el-row>
                </panel>
            </el-col>
        </el-row>
    </div>
</div>

<script>
    const GetGoodsOverallData = "{!! yzWebFullUrl('plugin.shop-statistics.backend.goods.get-goods-statistic') !!}"; //* 获取商品整体统计数据
    const GetGoodsStatisticsDataUrl = "{!! yzWebFullUrl('plugin.shop-statistics.backend.goods.search-goods-statistic') !!}"; //* 获取商品统计图数据
</script>
<script src="{{resource_get('plugins/shop-statistics/assets/js/components.js')}}"></script>
<script src="{{resource_get('plugins/shop-statistics/assets/js/goods.js')}}?t={{ time() }}"></script>
<script src="{{resource_get('plugins/shop-statistics/assets/js/common.js')}}"></script>
@endsection