From fa006f030ced342a15abf590e26d10aacbfcfa32 Mon Sep 17 00:00:00 2001
From: hongxilin <17663930442@163.com>
Date: Sat, 14 Dec 2024 15:37:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8F=B0=E5=9C=B0=E5=8C=BA?=
 =?UTF-8?q?=E6=8E=92=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/gold-system/src/views/audit/rechargeAudit.vue | 223 ++------
 vue/gold-system/src/views/audit/refundAudit.vue   | 205 ++------
 vue/gold-system/src/views/workspace/index.vue     | 604 +++++++---------------
 3 files changed, 273 insertions(+), 759 deletions(-)

diff --git a/vue/gold-system/src/views/audit/rechargeAudit.vue b/vue/gold-system/src/views/audit/rechargeAudit.vue
index a1e5bd1..42a0ced 100644
--- a/vue/gold-system/src/views/audit/rechargeAudit.vue
+++ b/vue/gold-system/src/views/audit/rechargeAudit.vue
@@ -200,6 +200,13 @@ const adminPass = function () {
   get();
   console.log("adminPass");
 };
+//已驳回充值明细
+const adminReject = function () {
+  rechargeVo.value.status = 2;
+  getObj.value.pageNum = 1;
+  get();
+  console.log('adminReject');
+}
 //点击标签页
 const handleClick = function (tab, event) {
   if (tab.props.name === "all") {
@@ -208,6 +215,8 @@ const handleClick = function (tab, event) {
     adminWait();
   } else if (tab.props.name === "pass") {
     adminPass();
+  } else if (tab.props.name === 'reject') {
+    adminReject();
   }
 };
 // 获取活动名称
@@ -390,57 +399,26 @@ onMounted(async function () {
           <el-col :span="8">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">活动名称：</el-text>
-              <el-select
-                v-model="rechargeVo.activityId"
-                placeholder="请选择活动名称"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in activity"
-                  :key="item.activityId"
-                  :label="item.activityName"
-                  :value="item.activityId"
-                />
+              <el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称" size="large" style="width: 240px"
+                clearable>
+                <el-option v-for="item in activity" :key="item.activityId" :label="item.activityName"
+                  :value="item.activityId" />
               </el-select>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">充值方式：</el-text>
-              <el-select
-                v-model="rechargeVo.payWay"
-                placeholder="请选择充值方式"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in payWay"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
+              <el-select v-model="rechargeVo.payWay" placeholder="请选择充值方式" size="large" style="width: 240px" clearable>
+                <el-option v-for="item in payWay" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">所属地区：</el-text>
-              <el-select
-                v-model="rechargeVo.area"
-                placeholder="请选择所属地区"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in area"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
+              <el-select v-model="rechargeVo.area" placeholder="请选择所属地区" size="large" style="width: 240px" clearable>
+                <el-option v-for="item in area" :key="item" :label="item" :value="item" />
               </el-select>
             </div>
           </el-col>
@@ -449,16 +427,9 @@ onMounted(async function () {
           <el-col :span="21">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">充值时间：</el-text>
-              <el-date-picker
-                v-model="getTime"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="起始时间"
-                end-placeholder="结束时间"
-              />
-              <el-button style="margin-left: 10px" @click="getToday()"
-                >今</el-button
-              >
+              <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
+                end-placeholder="结束时间" />
+              <el-button style="margin-left: 10px" @click="getToday()">今</el-button>
               <el-button @click="getYesterday()">昨</el-button>
               <el-button @click="get7Days()">近7天</el-button>
             </div>
@@ -476,56 +447,27 @@ onMounted(async function () {
   <el-row>
     <el-col>
       <el-card>
-        <el-tabs
-          v-model="activeName"
-          type="card"
-          class="demo-tabs"
-          @tab-click="handleClick"
-        >
+        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
           <el-tab-pane label="全部" name="all"></el-tab-pane>
           <el-tab-pane label="待审核" name="wait"></el-tab-pane>
           <el-tab-pane label="已通过" name="pass"></el-tab-pane>
+          <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
         </el-tabs>
         <div>
           <el-table :data="tableData" :height="tableHeight" style="width: 100%">
             <el-table-column prop="username" label="姓名" width="100px" />
             <el-table-column prop="jwcode" label="精网号" width="150px" />
             <el-table-column prop="area" label="所属地区" width="100px" />
-            <el-table-column
-              prop="activityName"
-              label="活动名称"
-              width="150px"
-            />
-            <el-table-column
-              prop="rechargeGold"
-              label="充值金额"
-              width="100px"
-            />
-            <el-table-column
-              prop="rechargeWay"
-              label="充值方式"
-              width="100px"
-            />
+            <el-table-column prop="activityName" label="活动名称" width="150px" />
+            <el-table-column prop="rechargeGold" label="充值金额" width="100px" />
+            <el-table-column prop="rechargeWay" label="充值方式" width="100px" />
             <el-table-column prop="paidGold" label="充值金币" width="100px" />
             <el-table-column prop="freeGold" label="免费金币" width="100px" />
-            <el-table-column
-              prop="remark"
-              label="备注"
-              width="200px"
-              show-overflow-tooltip
-            />
+            <el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip />
             <el-table-column prop="payWay" label="支付方式" width="100px" />
-            <el-table-column
-              prop="rechargeVoucher"
-              label="支付凭证"
-              width="150px"
-            >
+            <el-table-column prop="rechargeVoucher" label="支付凭证" width="150px">
               <template #default="scope">
-                <el-image
-                  :src="scope.row.rechargeVoucher"
-                  alt="凭证"
-                  style="width: 50px; height: 50px"
-                />
+                <el-image :src="scope.row.rechargeVoucher" alt="凭证" style="width: 50px; height: 50px" />
               </template>
             </el-table-column>
             <el-table-column prop="name" label="提交人" width="100px" />
@@ -551,12 +493,7 @@ onMounted(async function () {
                 </span>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="reson"
-              label="驳回理由"
-              width="200px"
-              show-overflow-tooltip
-            />
+            <el-table-column prop="reson" label="驳回理由" width="200px" show-overflow-tooltip />
             <el-table-column prop="rechargeTime" label="交款时间" width="200px">
               <template #default="scope">
                 {{
@@ -565,29 +502,15 @@ onMounted(async function () {
               </template>
             </el-table-column>
             <el-table-column prop="createTime" label="提交时间" width="200px" />
-            <el-table-column
-              fixed="right"
-              prop="operation"
-              label="操作"
-              width="150px"
-            >
+            <el-table-column fixed="right" prop="operation" label="操作" width="150px">
               <template #default="scope">
                 <div class="operation">
-                  <el-popconfirm
-                    title="确定要通过此条记录吗？"
-                    @confirm="passConfirm"
-                  >
+                  <el-popconfirm title="确定要通过此条记录吗？" @confirm="passConfirm">
                     <template #reference>
-                      <el-button
-                        :disabled="
-                          scope.row.status === 1 || scope.row.status === 2
-                            ? true
-                            : false
-                        "
-                        type="primary"
-                        text
-                        @click="pass(scope.row)"
-                      >
+                      <el-button :disabled="scope.row.status === 1 || scope.row.status === 2
+                        ? true
+                        : false
+                        " type="primary" text @click="pass(scope.row)">
                         通过
                       </el-button>
                     </template>
@@ -598,16 +521,10 @@ onMounted(async function () {
                       </el-button>
                     </template>
                   </el-popconfirm>
-                  <el-button
-                    :disabled="
-                      scope.row.status === 1 || scope.row.status === 2
-                        ? true
-                        : false
-                    "
-                    type="primary"
-                    text
-                    @click="reject(scope.row)"
-                  >
+                  <el-button :disabled="scope.row.status === 1 || scope.row.status === 2
+                    ? true
+                    : false
+                    " type="primary" text @click="reject(scope.row)">
                     驳回
                   </el-button>
                 </div>
@@ -618,42 +535,17 @@ onMounted(async function () {
 
         <!-- 分页 -->
         <div class="pagination">
-          <el-pagination
-            background
-            :page-size="getObj.pageSize"
-            layout="slot"
-            :total="total"
-          >
+          <el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total">
             <div>共{{ total }}条,每页</div>
-            <el-select
-              v-model="getObj.pageSize"
-              class="page-size"
-              @change="get()"
-              style="width: 80px"
-            >
-              <el-option
-                v-for="item in [5, 6, 7, 8, 9, 10]"
-                :key="item"
-                :label="item"
-                :value="item"
-              ></el-option>
+            <el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px">
+              <el-option v-for="item in [5, 6, 7, 8, 9, 10]" :key="item" :label="item" :value="item"></el-option>
             </el-select>
             <div>条</div>
           </el-pagination>
-          <el-pagination
-            background
-            layout="prev, pager, next,slot"
-            :page-size="getObj.pageSize"
-            :total="total"
-            :current-page="getObj.pageNum"
-            @current-change="get"
-          >
+          <el-pagination background layout="prev, pager, next,slot" :page-size="getObj.pageSize" :total="total"
+            :current-page="getObj.pageNum" @current-change="get">
             <div>跳至</div>
-            <el-input
-              v-model="getObj.pageNum"
-              style="width: 40px"
-              @change="checkNumber"
-            />
+            <el-input v-model="getObj.pageNum" style="width: 40px" @change="checkNumber" />
             <div>页</div>
           </el-pagination>
         </div>
@@ -662,29 +554,12 @@ onMounted(async function () {
   </el-row>
 
   <!-- 驳回弹出框 -->
-  <el-dialog
-    v-model="rejectVisible"
-    title="驳回理由"
-    width="500"
-    :before-close="closeRejectVisible"
-  >
+  <el-dialog v-model="rejectVisible" title="驳回理由" width="500" :before-close="closeRejectVisible">
     <template #footer>
-      <el-form
-        :model="rejectObj"
-        ref="Ref"
-        :rules="rules"
-        label-width="auto"
-        style="max-width: 600px"
-      >
+      <el-form :model="rejectObj" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px">
         <el-form-item prop="reson" label="驳回理由:">
-          <el-input
-            v-model="rejectObj.reson"
-            maxlength="150"
-            show-word-limit
-            style="width: 350px"
-            type="textarea"
-            placeholder="请输入内容"
-          />
+          <el-input v-model="rejectObj.reson" maxlength="150" show-word-limit style="width: 350px" type="textarea"
+            placeholder="请输入内容" />
         </el-form-item>
       </el-form>
 
diff --git a/vue/gold-system/src/views/audit/refundAudit.vue b/vue/gold-system/src/views/audit/refundAudit.vue
index bf93975..c678d58 100644
--- a/vue/gold-system/src/views/audit/refundAudit.vue
+++ b/vue/gold-system/src/views/audit/refundAudit.vue
@@ -187,6 +187,13 @@ const adminPass = function () {
   get();
   console.log("adminPass");
 };
+//已驳回充值明细
+const adminReject = function () {
+  consumeDetail.value.status = 2;
+  getObj.value.pageNum = 1;
+  get();
+  console.log('adminReject');
+}
 //点击标签页
 const handleClick = function (tab, event) {
   if (tab.props.name === "all") {
@@ -195,6 +202,8 @@ const handleClick = function (tab, event) {
     adminWait();
   } else if (tab.props.name === "pass") {
     adminPass();
+  } else if (tab.props.name === 'reject') {
+    adminReject();
   }
 };
 // 获取活动名称
@@ -374,57 +383,26 @@ onMounted(async function () {
           <el-col :span="8">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">退款类型：</el-text>
-              <el-select
-                v-model="consumeDetail.refundType"
-                placeholder="请选择退款类型"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in refundType"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
+              <el-select v-model="consumeDetail.refundType" placeholder="请选择退款类型" size="large" style="width: 240px"
+                clearable>
+                <el-option v-for="item in refundType" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">退款商品：</el-text>
-              <el-select
-                v-model="consumeDetail.refundGoods"
-                placeholder="请选择退款商品"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in product"
-                  :key="item.name"
-                  :label="item.name"
-                  :value="item.name"
-                />
+              <el-select v-model="consumeDetail.refundGoods" placeholder="请选择退款商品" size="large" style="width: 240px"
+                clearable>
+                <el-option v-for="item in product" :key="item.name" :label="item.name" :value="item.name" />
               </el-select>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">所属地区：</el-text>
-              <el-select
-                v-model="consumeDetail.area"
-                placeholder="请选择所属地区"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in area"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
+              <el-select v-model="consumeDetail.area" placeholder="请选择所属地区" size="large" style="width: 240px" clearable>
+                <el-option v-for="item in area" :key="item" :label="item" :value="item" />
               </el-select>
             </div>
           </el-col>
@@ -433,16 +411,9 @@ onMounted(async function () {
           <el-col :span="21">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">充值时间：</el-text>
-              <el-date-picker
-                v-model="getTime"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="起始时间"
-                end-placeholder="结束时间"
-              />
-              <el-button style="margin-left: 10px" @click="getToday()"
-                >今</el-button
-              >
+              <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
+                end-placeholder="结束时间" />
+              <el-button style="margin-left: 10px" @click="getToday()">今</el-button>
               <el-button @click="getYesterday()">昨</el-button>
               <el-button @click="get7Days()">近7天</el-button>
             </div>
@@ -460,15 +431,11 @@ onMounted(async function () {
   <el-row>
     <el-col>
       <el-card>
-        <el-tabs
-          v-model="activeName"
-          type="card"
-          class="demo-tabs"
-          @tab-click="handleClick"
-        >
+        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
           <el-tab-pane label="全部" name="all"></el-tab-pane>
           <el-tab-pane label="待审核" name="wait"></el-tab-pane>
           <el-tab-pane label="已通过" name="pass"></el-tab-pane>
+          <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
         </el-tabs>
         <div>
           <el-table :data="tableData" :height="tableHeight" style="width: 100%">
@@ -476,11 +443,7 @@ onMounted(async function () {
             <el-table-column prop="jwcode" label="精网号" width="150px" />
             <el-table-column prop="area" label="所属地区" width="100px" />
             <el-table-column prop="refundType" label="退款类型" width="100px" />
-            <el-table-column
-              prop="refundGoods"
-              label="退款商品"
-              width="200px"
-            />
+            <el-table-column prop="refundGoods" label="退款商品" width="200px" />
             <el-table-column prop="refundCoin" label="退款金币数" width="100px">
               <template #default="scope">
                 <span>{{
@@ -490,19 +453,10 @@ onMounted(async function () {
                 }}</span>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="rechargeCoin"
-              label="充值金币"
-              width="100px"
-            />
+            <el-table-column prop="rechargeCoin" label="充值金币" width="100px" />
             <el-table-column prop="freeCoin" label="免费金币" width="100px" />
             <el-table-column prop="taskCoin" label="任务金币" width="100px" />
-            <el-table-column
-              prop="remark"
-              label="备注"
-              width="200px"
-              show-overflow-tooltip
-            />
+            <el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip />
             <el-table-column prop="name" label="提交人" width="100px" />
             <el-table-column prop="status" label="审核状态" width="100px">
               <template #default="scope">
@@ -526,40 +480,21 @@ onMounted(async function () {
                 </span>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="reson"
-              label="驳回理由"
-              width="200px"
-              show-overflow-tooltip
-            />
+            <el-table-column prop="reson" label="驳回理由" width="200px" show-overflow-tooltip />
             <el-table-column prop="createTime" label="提交时间" width="200px">
               <template #default="scope">
                 {{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
               </template>
             </el-table-column>
-            <el-table-column
-              fixed="right"
-              prop="operation"
-              label="操作"
-              width="150px"
-            >
+            <el-table-column fixed="right" prop="operation" label="操作" width="150px">
               <template #default="scope">
                 <div class="operation">
-                  <el-popconfirm
-                    title="确定要通过此条记录吗？"
-                    @confirm="passConfirm"
-                  >
+                  <el-popconfirm title="确定要通过此条记录吗？" @confirm="passConfirm">
                     <template #reference>
-                      <el-button
-                        :disabled="
-                          scope.row.status === 1 || scope.row.status === 2
-                            ? true
-                            : false
-                        "
-                        type="primary"
-                        text
-                        @click="pass(scope.row)"
-                      >
+                      <el-button :disabled="scope.row.status === 1 || scope.row.status === 2
+                        ? true
+                        : false
+                        " type="primary" text @click="pass(scope.row)">
                         通过
                       </el-button>
                     </template>
@@ -570,16 +505,10 @@ onMounted(async function () {
                       </el-button>
                     </template>
                   </el-popconfirm>
-                  <el-button
-                    :disabled="
-                      scope.row.status === 1 || scope.row.status === 2
-                        ? true
-                        : false
-                    "
-                    type="primary"
-                    text
-                    @click="reject(scope.row)"
-                  >
+                  <el-button :disabled="scope.row.status === 1 || scope.row.status === 2
+                    ? true
+                    : false
+                    " type="primary" text @click="reject(scope.row)">
                     驳回
                   </el-button>
                 </div>
@@ -590,42 +519,17 @@ onMounted(async function () {
 
         <!-- 分页 -->
         <div class="pagination">
-          <el-pagination
-            background
-            :page-size="getObj.pageSize"
-            layout="slot"
-            :total="total"
-          >
+          <el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total">
             <div>共{{ total }}条,每页</div>
-            <el-select
-              v-model="getObj.pageSize"
-              class="page-size"
-              @change="get()"
-              style="width: 80px"
-            >
-              <el-option
-                v-for="item in [5, 6, 7, 8, 9, 10]"
-                :key="item"
-                :label="item"
-                :value="item"
-              ></el-option>
+            <el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px">
+              <el-option v-for="item in [5, 6, 7, 8, 9, 10]" :key="item" :label="item" :value="item"></el-option>
             </el-select>
             <div>条</div>
           </el-pagination>
-          <el-pagination
-            background
-            layout="prev, pager, next,slot"
-            :page-size="getObj.pageSize"
-            :total="total"
-            :current-page="getObj.pageNum"
-            @current-change="get"
-          >
+          <el-pagination background layout="prev, pager, next,slot" :page-size="getObj.pageSize" :total="total"
+            :current-page="getObj.pageNum" @current-change="get">
             <div>跳至</div>
-            <el-input
-              v-model="getObj.pageNum"
-              style="width: 40px"
-              @change="checkNumber"
-            />
+            <el-input v-model="getObj.pageNum" style="width: 40px" @change="checkNumber" />
             <div>页</div>
           </el-pagination>
         </div>
@@ -634,29 +538,12 @@ onMounted(async function () {
   </el-row>
 
   <!-- 驳回弹出框 -->
-  <el-dialog
-    v-model="rejectVisible"
-    title="驳回理由"
-    width="500"
-    :before-close="closeRejectVisible"
-  >
+  <el-dialog v-model="rejectVisible" title="驳回理由" width="500" :before-close="closeRejectVisible">
     <template #footer>
-      <el-form
-        :model="rejectObj"
-        ref="Ref"
-        :rules="rules"
-        label-width="auto"
-        style="max-width: 600px"
-      >
+      <el-form :model="rejectObj" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px">
         <el-form-item prop="reson" label="驳回理由:">
-          <el-input
-            v-model="rejectObj.reson"
-            maxlength="150"
-            show-word-limit
-            style="width: 350px"
-            type="textarea"
-            placeholder="请输入内容"
-          />
+          <el-input v-model="rejectObj.reson" maxlength="150" show-word-limit style="width: 350px" type="textarea"
+            placeholder="请输入内容" />
         </el-form-item>
       </el-form>
 
diff --git a/vue/gold-system/src/views/workspace/index.vue b/vue/gold-system/src/views/workspace/index.vue
index edebc8e..744d851 100644
--- a/vue/gold-system/src/views/workspace/index.vue
+++ b/vue/gold-system/src/views/workspace/index.vue
@@ -2,16 +2,7 @@
 import * as echarts from "echarts";
 import { ref, onMounted, reactive, computed } from "vue";
 import { VscInfo } from "vue-icons-plus/vsc";
-import {
-  Bs1CircleFill,
-  Bs2CircleFill,
-  Bs3CircleFill,
-  Bs4Circle,
-  Bs5Circle,
-  Bs6Circle,
-  Bs7Circle,
-  Bs8Circle,
-} from "vue-icons-plus/bs";
+import * as bs from "vue-icons-plus/bs";
 import axios, { all } from "axios";
 import API from "../../api/index";
 
@@ -45,22 +36,12 @@ const consumeMonthFree = ref([]);
 const consumeMonthTask = ref([]);
 
 // 地区排名
-const areaSizePay = ref(0);
-const areaSizeConsume = ref(0);
-// 充值
-const getMediumAreaPay = ref({});
-const areaTotalPay = ref([]);
-const areaRechargePay = ref([]);
-const areaFreePay = ref([]);
-const areaTaskPay = ref([]);
-const payRank = ref([]);
-// 消费
-const getMediumAreaConsume = ref({});
-const areaTotalConsume = ref([]);
-const areaRechargeConsume = ref([]);
-const areaFreeConsume = ref([]);
-const areaTaskConsume = ref([]);
-const ConsumeRank = ref([]);
+const getAreaRankObj = ref({
+  updateType: "充值"
+});
+const getMediumArea = ref([]);
+const areaRank = ref([]);
+
 // 金币概览
 const option3Data = ref([]);
 const option4Data = ref([]);
@@ -74,8 +55,7 @@ const LinkData = ref([]);
 const goldData = ref([]);
 
 // 搜索对象
-const goldTypePay = ref("全部类型");
-const goldTypeConsume = ref("全部类型");
+const goldType = ref("全部类型");
 const platform = ref("全部平台");
 //默认高亮标签页
 const activeName = ref("recharge");
@@ -105,6 +85,8 @@ const list = ref([]);
 // 搜索方法
 const get = async function () {
   try {
+
+    getAreaRank();
     // 发送POST请求
     const result1 = await API.post(
       "http://192.168.8.93:10010/statistics/getSumCoin",
@@ -122,14 +104,15 @@ const get = async function () {
       "http://192.168.8.93:10010/statistics/getDayConsumeCoin",
       {}
     );
-    const result5 = await API.post(
-      "http://192.168.8.147:10010/statistics/getMediumAreaPay",
-      {}
-    );
-    const result6 = await API.post(
-      "http://192.168.8.147:10010/statistics/getMediumAreaConsume",
-      {}
-    );
+    // const result5 = await API.post(
+    //   "http://192.168.8.147:10010/statistics/getMediumAreaPay",
+    //   {}
+    // );
+    // const result6 = await API.post(
+    //   "http://192.168.8.147:10010/statistics/getMediumAreaConsume",
+    //   {}
+    // );
+
     const result7 = await API.post(
       "http://192.168.8.93:10010/statistics/getMediuPayCoin",
       {}
@@ -148,10 +131,7 @@ const get = async function () {
     statistics.value = result2.data;
     getYearConsumeCoin.value = result3.data;
     getDayConsumeCoin.value = result4.data;
-    getMediumAreaPay.value = result5.data;
-    areaSizePay.value = getMediumAreaPay.value.length;
-    getMediumAreaConsume.value = result6.data;
-    areaSizeConsume.value = getMediumAreaConsume.value.length;
+
     getMediuPayCoin.value = result7.data;
     getMediuConsumeCoin.value = result8.data;
     platformData.value = result9.data;
@@ -160,10 +140,7 @@ const get = async function () {
     console.log("statistics", statistics.value);
     console.log("getYearConsumeCoin", getYearConsumeCoin.value);
     console.log("getDayConsumeCoin", getDayConsumeCoin.value);
-    console.log("getMediumAreaPay", getMediumAreaPay.value);
-    console.log("areaSizePay", areaSizePay.value);
-    console.log("getMediumAreaConsume", getMediumAreaConsume.value);
-    console.log("areaSizeConsume", areaSizeConsume.value);
+
     console.log("getMediuPayCoin", getMediuPayCoin.value);
     console.log("getMediuConsumeCoin", getMediuConsumeCoin.value);
     console.log("platformData", platformData.value);
@@ -227,67 +204,7 @@ const get = async function () {
     console.log("consumeTotalRecharge", consumeTotalRecharge.value);
     console.log("consumeTotalFree", consumeTotalFree.value);
     console.log("consumeTotalTask", consumeTotalTask.value);
-    // 总
-    areaTotalPay.value = getMediumAreaPay.value.map((item) => ({
-      value: Math.abs(item.todayTotalCoin),
-      name: item.area,
-    }));
-    areaTotalPay.value.sort((a, b) => b.value - a.value);
-    console.log("areaTotalPay", areaTotalPay.value);
-    // 充值
-    areaRechargePay.value = getMediumAreaPay.value.map((item) => ({
-      value: Math.abs(item.totalRecharge),
-      name: item.area,
-    }));
-    areaRechargePay.value.sort((a, b) => b.value - a.value);
-    console.log("areaRechargePay", areaRechargePay.value);
-    // 免费
-    areaFreePay.value = getMediumAreaPay.value.map((item) => ({
-      value: Math.abs(item.totalFree),
-      name: item.area,
-    }));
-    areaFreePay.value.sort((a, b) => b.value - a.value);
-    console.log("areaFreePay", areaFreePay.value);
-    // 任务
-    areaTaskPay.value = getMediumAreaPay.value.map((item) => ({
-      value: Math.abs(item.totalTask),
-      name: item.area,
-    }));
-    areaTaskPay.value.sort((a, b) => b.value - a.value);
-    console.log("areaTaskPay", areaTaskPay.value);
-    // 充值排名初始化
-    payRank.value = areaTotalPay.value;
-    // 消费
-    // 总
-    areaTotalConsume.value = getMediumAreaConsume.value.map((item) => ({
-      value: Math.abs(item.todayTotalCoin),
-      name: item.area,
-    }));
-    areaTotalConsume.value.sort((a, b) => b.value - a.value);
-    console.log("areaTotalConsume", areaTotalConsume.value);
-    // 充值
-    areaRechargeConsume.value = getMediumAreaConsume.value.map((item) => ({
-      value: Math.abs(item.totalRecharge),
-      name: item.area,
-    }));
-    areaRechargeConsume.value.sort((a, b) => b.value - a.value);
-    console.log("areaRechargeConsume", areaRechargeConsume.value);
-    // 免费
-    areaFreeConsume.value = getMediumAreaConsume.value.map((item) => ({
-      value: Math.abs(item.totalFree),
-      name: item.area,
-    }));
-    areaFreeConsume.value.sort((a, b) => b.value - a.value);
-    console.log("areaFreeConsume", areaFreeConsume.value);
-    // 任务
-    areaTaskConsume.value = getMediumAreaConsume.value.map((item) => ({
-      value: Math.abs(item.totalTask),
-      name: item.area,
-    }));
-    areaTaskConsume.value.sort((a, b) => b.value - a.value);
-    console.log("areaTaskConsume", areaTaskConsume.value);
-    // 消费排名初始化
-    ConsumeRank.value = areaTotalConsume.value;
+
 
     option3Data.value = [
       {
@@ -362,13 +279,13 @@ const get = async function () {
     ERPData.value.forEach((item, index) =>
       item == ""
         ? (ERPData.value[index] = {
-            value: 0,
-            name: "第" + (index + 1) + "学科",
-          })
+          value: 0,
+          name: "第" + (index + 1) + "学科",
+        })
         : (ERPData.value[index] = {
-            value: item[0],
-            name: "第" + (index + 1) + "学科",
-          })
+          value: item[0],
+          name: "第" + (index + 1) + "学科",
+        })
     );
     console.log("ERPData", ERPData.value);
     HCData.value = [
@@ -388,13 +305,13 @@ const get = async function () {
     HCData.value.forEach((item, index) =>
       item == ""
         ? (HCData.value[index] = {
-            value: 0,
-            name: "第" + (index + 1) + "学科",
-          })
+          value: 0,
+          name: "第" + (index + 1) + "学科",
+        })
         : (HCData.value[index] = {
-            value: item[0],
-            name: "第" + (index + 1) + "学科",
-          })
+          value: item[0],
+          name: "第" + (index + 1) + "学科",
+        })
     );
     console.log("HCData", HCData.value);
     LinkData.value = [
@@ -414,13 +331,13 @@ const get = async function () {
     LinkData.value.forEach((item, index) =>
       item == ""
         ? (LinkData.value[index] = {
-            value: 0,
-            name: "第" + (index + 1) + "学科",
-          })
+          value: 0,
+          name: "第" + (index + 1) + "学科",
+        })
         : (LinkData.value[index] = {
-            value: item[0],
-            name: "第" + (index + 1) + "学科",
-          })
+          value: item[0],
+          name: "第" + (index + 1) + "学科",
+        })
     );
     console.log("LinkData", LinkData.value);
     goldData.value = [
@@ -440,13 +357,13 @@ const get = async function () {
     goldData.value.forEach((item, index) =>
       item == ""
         ? (goldData.value[index] = {
-            value: 0,
-            name: "第" + (index + 1) + "学科",
-          })
+          value: 0,
+          name: "第" + (index + 1) + "学科",
+        })
         : (goldData.value[index] = {
-            value: item[0],
-            name: "第" + (index + 1) + "学科",
-          })
+          value: item[0],
+          name: "第" + (index + 1) + "学科",
+        })
     );
     console.log("goldData", goldData.value);
     allData.value = [
@@ -513,44 +430,79 @@ const get = async function () {
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 };
+// 获取门店排名
+const getAreaRank = async function () {
+  const result = await API.post(
+    "http://192.168.8.93:10010/statistics/getMee",
+    getAreaRankObj.value
+  );
+
+  getMediumArea.value = result.data;
+
+  console.log("getMediumArea", getMediumArea.value);
+
+  if (getAreaRankObj.value.type == '充值金币') {
+    areaRank.value = getMediumArea.value.map((item) => ({
+      value: Math.abs(item.rechargeSumCoin),
+      name: item.area + '-' + item.store,
+    }));
+  } else if (getAreaRankObj.value.type == '免费金币') {
+    areaRank.value = getMediumArea.value.map((item) => ({
+      value: Math.abs(item.freeSumCoin),
+      name: item.area + '-' + item.store,
+    }));
+  } else if (getAreaRankObj.value.type == '任务金币') {
+    areaRank.value = getMediumArea.value.map((item) => ({
+      value: Math.abs(item.taskSumCoin),
+      name: item.area + '-' + item.store,
+    }));
+  } else {
+    areaRank.value = getMediumArea.value.map((item) => ({
+      value: Math.abs(item.totalRechargeSum),
+      name: item.area + '-' + item.store,
+    }));
+  }
+
+  console.log("areaRank", areaRank.value);
+}
+
 // 金币类型
-// 充值
-const changeGoldTypePay = function () {
-  console.log("changeGoldTypePay", goldTypePay.value);
-  payRank.value = {};
-  if (goldTypePay.value == "全部类型") {
-    payRank.value = areaTotalPay.value;
-    console.log("这是中国过过过过", payRank.value);
-  } else if (goldTypePay.value == "充值金币") {
-    payRank.value = areaRechargePay.value;
-  } else if (goldTypePay.value == "免费金币") {
-    payRank.value = areaFreePay.value;
-  } else if (goldTypePay.value == "任务金币") {
-    payRank.value = areaTaskPay.value;
+
+const findBsComponent = function (index) {
+  let iconName;
+  if (index < 3) {
+    iconName = `bs.Bs${index + 1}CircleFill`; // 根据index拼接图标名称
+  } else {
+    iconName = `bs.Bs${index + 1}Circle`; // 根据index拼接图标名称
   }
-  console.log("payRank", payRank.value);
-};
-// 消费
-const changeGoldTypeConsume = function () {
-  console.log("changeGoldTypeConsume", goldTypeConsume.value);
-  ConsumeRank.value = {};
-  if (goldTypeConsume.value == "全部类型") {
-    ConsumeRank.value = areaTotalConsume.value;
-  } else if (goldTypeConsume.value == "充值金币") {
-    ConsumeRank.value = areaRechargeConsume.value;
-  } else if (goldTypeConsume.value == "免费金币") {
-    ConsumeRank.value = areaFreeConsume.value;
-  } else if (goldTypeConsume.value == "任务金币") {
-    ConsumeRank.value = areaTaskConsume.value;
+  return eval(iconName); // 动态执行图标名称，返回图标组件
+}
+// 门店排名下拉框
+const changeGoldType = function () {
+  console.log("changeGoldType", goldType.value);
+  if (goldType.value == "全部类型") {
+    getAreaRankObj.value.type = "";
+  } else if (goldType.value == "充值金币") {
+    getAreaRankObj.value.type = "充值金币";
+  } else if (goldType.value == "免费金币") {
+    getAreaRankObj.value.type = "免费金币";
+  } else if (goldType.value == "任务金币") {
+    getAreaRankObj.value.type = "任务金币";
   }
-  console.log("ConsumeRank", ConsumeRank.value);
+  getAreaRank();
 };
 // 点击标签页初始化
-const handleClick = function () {
-  goldTypePay.value = "全部类型";
-  goldTypeConsume.value = "全部类型";
-};
+const handleChange = function () {
+  if (activeName.value == 'recharge') {
+    getAreaRankObj.value.updateType = '充值';
 
+  } else {
+    getAreaRankObj.value.updateType = '消费';
+  }
+  getAreaRankObj.value.type = "";
+  goldType.value = "全部类型";
+  getAreaRank();
+}
 // 切换平台
 const changePlatform = function () {
   console.log("changePlatform", platform.value);
@@ -812,6 +764,7 @@ onMounted(async function () {
   const option3 = {
     tooltip: {
       trigger: "item",
+      position: ['15%', '-3%']
     },
     legend: {
       bottom: "-2%",
@@ -847,6 +800,7 @@ onMounted(async function () {
   const option4 = {
     tooltip: {
       trigger: "item",
+      position: ['15%', '-3%']
     },
     legend: {
       bottom: "-2%",
@@ -887,6 +841,7 @@ onMounted(async function () {
   const option5 = {
     tooltip: {
       trigger: "item",
+      position: ['15%', '-3%']
     },
     legend: {
       bottom: "-2%",
@@ -954,37 +909,26 @@ onMounted(async function () {
             <span v-if="getSumCoin.coinDifference > 0">
               <div class="comparedWithYesterday">
                 <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
-                <span
-                  class="red-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
+                <span class="red-triangle" style="margin: 6px 0px 0px 7px"></span>
               </div>
             </span>
             <span v-if="getSumCoin.coinDifference < 0">
               <div class="comparedWithYesterday">
                 <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
-                <span
-                  class="green-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
+                <span class="green-triangle" style="margin: 6px 0px 0px 7px"></span>
               </div>
             </span>
             <span v-if="getSumCoin.coinDifference == 0">
               <div class="comparedWithYesterday">
                 <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
-                <span
-                  class="grey-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
+                <span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span>
               </div>
             </span>
           </p>
-          <template #footer
-            >充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{
-              formatNum(getSumCoin.todayFree)
-            }}
-            任务{{ formatNum(getSumCoin.todayTask) }}</template
-          >
+          <template #footer>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{
+            formatNum(getSumCoin.todayFree)
+          }}
+            任务{{ formatNum(getSumCoin.todayTask) }}</template>
         </el-card>
       </el-col>
       <el-col :span="6">
@@ -996,8 +940,7 @@ onMounted(async function () {
           <p>
             折合新币累计金额 {{ formatNum(Math.abs(statistics.totalSumCoin)) }}
           </p>
-          <template #footer
-            >昨日新增
+          <template #footer>昨日新增
             {{ formatNum(Math.abs(statistics.totalYesterdaySumCoin)) }}
             ，其中充值
             {{ formatNum(Math.abs(statistics.rechargeYesterdaySumCoin)) }}
@@ -1014,12 +957,10 @@ onMounted(async function () {
             消费 {{ formatNum(Math.abs(getYearConsumeCoin.yearConsumeCoin)) }};
             退款 {{ formatNum(Math.abs(getYearConsumeCoin.yearRefundCoin)) }}
           </p>
-          <template #footer
-            >昨日新增消耗
+          <template #footer>昨日新增消耗
             {{ formatNum(Math.abs(getDayConsumeCoin.daysumCoin)) }} ; 消费
             {{ formatNum(Math.abs(getDayConsumeCoin.dayConsumeCoin)) }} ; 退款
-            {{ formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin)) }}</template
-          >
+            {{ formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin)) }}</template>
         </el-card>
       </el-col>
       <el-col :span="6">
@@ -1032,78 +973,53 @@ onMounted(async function () {
             <span v-if="statistics.weekOverWeekRate > 0">
               <div class="comparedWithYesterday">
                 <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                <span
-                  class="red-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
+                <span class="red-triangle" style="margin: 6px 0px 0px 7px"></span>
               </div>
             </span>
             <span v-if="statistics.weekOverWeekRate < 0">
               <div class="comparedWithYesterday">
                 <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                <span
-                  class="green-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
+                <span class="green-triangle" style="margin: 6px 0px 0px 7px"></span>
               </div>
             </span>
             <span v-if="statistics.weekOverWeekRate == 0">
               <div class="comparedWithYesterday">
                 <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                <span
-                  class="grey-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
+                <span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span>
               </div>
             </span>
             <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
             <span v-if="statistics.dayOverDayRate > 0">
               <div class="comparedWithYesterday">
                 <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                <span
-                  class="red-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
+                <span class="red-triangle" style="margin: 6px 0px 0px 7px"></span>
               </div>
             </span>
             <span v-if="statistics.dayOverDayRate < 0">
               <div class="comparedWithYesterday">
                 <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                <span
-                  class="green-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
+                <span class="green-triangle" style="margin: 6px 0px 0px 7px"></span>
               </div>
             </span>
             <span v-if="statistics.dayOverDayRate == 0">
               <div class="comparedWithYesterday">
                 <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                <span
-                  class="grey-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
+                <span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span>
               </div>
             </span>
           </p>
-          <template #footer
-            >昨日充值人数
+          <template #footer>昨日充值人数
             {{ formatNum(Math.abs(statistics.rechargeCountYesterday)) }}
             ，其中首充
             {{ formatNum(Math.abs(statistics.firstRechargeCountYesterday)) }}
-            人</template
-          >
+            人</template>
         </el-card>
       </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col>
         <el-card>
-          <el-tabs
-            v-model="activeName"
-            class="demo-tabs"
-            @tab-click="handleClick"
-            @tab-change="handleChange"
-          >
+          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" @tab-change="handleChange">
             <el-tab-pane label="金币充值" name="recharge">
               <div>
                 合计：充值金币：
@@ -1116,8 +1032,8 @@ onMounted(async function () {
                 <span class="mid-head-font">{{ formatNum(payTotalTask) }}</span>
               </div>
               <div class="bar">
-                <div id="recharge" style="width: 1200px; height: 400px"></div>
-                <div>
+                <div id="recharge" style="width: 1150px; height: 400px"></div>
+                <div style="width: 100px;">
                   <div class="goldCategory">
                     <span class="light-green-dot"></span>
                     <span>充值金币</span>
@@ -1131,106 +1047,27 @@ onMounted(async function () {
                     <span>任务金币</span>
                   </div>
                 </div>
-                <div>
+                <div style="width: 310px;">
                   <div class="ranking-header">
-                    <span style="margin-right: 40px">门店金币充值排名</span>
-                    <el-select
-                      v-model="goldTypePay"
-                      placeholder="请选择金币类型"
-                      size="small"
-                      style="width: 90px"
-                      @change="changeGoldTypePay"
-                    >
-                      <el-option
-                        v-for="item in gold"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
+                    <span style="margin-right: 90px; width: 150px;">门店金币充值排名</span>
+                    <el-select v-model="goldType" placeholder="请选择金币类型" size="small" style="width: 90px"
+                      @change="changeGoldType">
+                      <el-option v-for="item in gold" :key="item.value" :label="item.label" :value="item.value" />
                     </el-select>
                   </div>
                   <div>
-                    <div class="ranking-item" v-if="areaSizePay >= 1">
-                      <Bs1CircleFill />
-                      <span style="margin-left: 10px">{{
-                        payRank[0].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(payRank[0].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizePay >= 2">
-                      <Bs2CircleFill />
-                      <span style="margin-left: 10px">{{
-                        payRank[1].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(payRank[1].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizePay >= 3">
-                      <Bs3CircleFill />
-                      <span style="margin-left: 10px">{{
-                        payRank[2].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(payRank[2].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizePay >= 4">
-                      <Bs4Circle />
-                      <span style="margin-left: 10px">{{
-                        payRank[3].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(payRank[3].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizePay >= 5">
-                      <Bs5Circle />
-                      <span style="margin-left: 10px">{{
-                        payRank[4].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(payRank[4].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizePay >= 6">
-                      <Bs6Circle />
-                      <span style="margin-left: 10px">{{
-                        payRank[5].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(payRank[5].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizePay >= 7">
-                      <Bs7Circle />
-                      <span style="margin-left: 10px">{{
-                        payRank[6].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(payRank[6].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizePay >= 8">
-                      <Bs8Circle />
-                      <span style="margin-left: 10px">{{
-                        payRank[7].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(payRank[7].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizePay >= 9">
-                      <Bs9Circle />
-                      <span style="margin-left: 10px">{{
-                        payRank[8].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(payRank[8].value)
-                      }}</span>
-                    </div>
+                    <el-scrollbar height="360px">
+                      <div v-for="(item, index) in areaRank" :key="item" class="ranking-item">
+                        <!-- <component :is="findBsComponent(index)" /> -->
+                        <span style="width: 15px; text-align: center;">{{ index + 1 }}</span>
+                        <span style="margin-left: 10px">{{
+                          item.name
+                        }}</span>
+                        <span style="margin-left: auto">{{
+                          formatNum(item.value)
+                        }}</span>
+                      </div>
+                    </el-scrollbar>
                   </div>
                 </div>
               </div>
@@ -1251,8 +1088,8 @@ onMounted(async function () {
                 }}</span>
               </div>
               <div class="bar">
-                <div id="consume" style="width: 1200px; height: 400px"></div>
-                <div>
+                <div id="consume" style="width: 1150px; height: 400px"></div>
+                <div style="width: 100px;">
                   <div class="goldCategory">
                     <span class="light-green-dot"></span>
                     <span>充值金币</span>
@@ -1266,106 +1103,27 @@ onMounted(async function () {
                     <span>任务金币</span>
                   </div>
                 </div>
-                <div>
+                <div style="width: 310px;">
                   <div class="ranking-header">
-                    <span style="margin-right: 40px">门店金币消费排名</span>
-                    <el-select
-                      v-model="goldTypeConsume"
-                      placeholder="请选择金币类型"
-                      size="small"
-                      style="width: 90px"
-                      @change="changeGoldTypeConsume"
-                    >
-                      <el-option
-                        v-for="item in gold"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
+                    <span style="margin-right: 90px; width: 150px;">门店金币消费排名</span>
+                    <el-select v-model="goldType" placeholder="请选择金币类型" size="small" style="width: 90px"
+                      @change="changeGoldType">
+                      <el-option v-for="item in gold" :key="item.value" :label="item.label" :value="item.value" />
                     </el-select>
                   </div>
                   <div>
-                    <div class="ranking-item" v-if="areaSizeConsume >= 1">
-                      <Bs1CircleFill />
-                      <span style="margin-left: 10px">{{
-                        ConsumeRank[0].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(ConsumeRank[0].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizeConsume >= 2">
-                      <Bs2CircleFill />
-                      <span style="margin-left: 10px">{{
-                        ConsumeRank[1].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(ConsumeRank[1].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizeConsume >= 3">
-                      <Bs3CircleFill />
-                      <span style="margin-left: 10px">{{
-                        ConsumeRank[2].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(ConsumeRank[2].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizeConsume >= 4">
-                      <Bs4Circle />
-                      <span style="margin-left: 10px">{{
-                        ConsumeRank[3].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(ConsumeRank[3].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizeConsume >= 5">
-                      <Bs5Circle />
-                      <span style="margin-left: 10px">{{
-                        ConsumeRank[4].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(ConsumeRank[4].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizeConsume >= 6">
-                      <Bs6Circle />
-                      <span style="margin-left: 10px">{{
-                        ConsumeRank[5].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(ConsumeRank[5].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizeConsume >= 7">
-                      <Bs7Circle />
-                      <span style="margin-left: 10px">{{
-                        ConsumeRank[6].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(ConsumeRank[6].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizeConsume >= 8">
-                      <Bs8Circle />
-                      <span style="margin-left: 10px">{{
-                        ConsumeRank[7].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(ConsumeRank[7].value)
-                      }}</span>
-                    </div>
-                    <div class="ranking-item" v-if="areaSizeConsume >= 9">
-                      <Bs9Circle />
-                      <span style="margin-left: 10px">{{
-                        ConsumeRank[8].name
-                      }}</span>
-                      <span style="margin-left: auto">{{
-                        formatNum(ConsumeRank[8].value)
-                      }}</span>
-                    </div>
+                    <el-scrollbar height="360px">
+                      <div v-for="(item, index) in areaRank" :key="item" class="ranking-item">
+                        <!-- <component :is="findBsComponent(index)" /> -->
+                         <span style="width: 15px; text-align: center;">{{ index + 1 }}</span>
+                        <span style="margin-left: 10px">{{
+                          item.name
+                        }}</span>
+                        <span style="margin-left: auto">{{
+                          formatNum(item.value)
+                        }}</span>
+                      </div>
+                    </el-scrollbar>
                   </div>
                 </div>
               </div>
@@ -1383,9 +1141,9 @@ onMounted(async function () {
             </div>
           </template>
           <div class="pie">
-            <div id="yearRecharge" style="width: 600px; height: 400px"></div>
-            <div id="yearConsume" style="width: 600px; height: 400px"></div>
-            <div id="nowGold" style="width: 600px; height: 400px"></div>
+            <div id="yearRecharge" style="width: 400px; height: 400px"></div>
+            <div id="yearConsume" style="width: 400px; height: 400px"></div>
+            <div id="nowGold" style="width: 400px; height: 400px"></div>
           </div>
         </el-card>
       </el-col>
@@ -1394,14 +1152,8 @@ onMounted(async function () {
           <template #header>
             <div class="card-header" style="display: flex">
               <span class="tail-head">四大学科类别占比</span>
-              <el-radio-group
-                v-model="platform"
-                fill="#ffffff"
-                text-color="#409eff"
-                size="small"
-                @change="changePlatform"
-                style="margin-left: auto"
-              >
+              <el-radio-group v-model="platform" fill="#ffffff" text-color="#409eff" size="small"
+                @change="changePlatform" style="margin-left: auto">
                 <el-radio-button label="全部平台" value="全部平台" />
                 <el-radio-button label="ERP" value="ERP" />
                 <el-radio-button label="HC" value="HC" />