From 0af482b31e732b2638c91a7e739322b3b13bd250 Mon Sep 17 00:00:00 2001
From: donghaolin <17667510818@163.com>
Date: Tue, 10 Dec 2024 16:53:36 +0800
Subject: [PATCH] 11

---
 vue/gold-system/src/views/workspace/index.vue | 2256 ++++++++++++++-----------
 1 file changed, 1279 insertions(+), 977 deletions(-)

diff --git a/vue/gold-system/src/views/workspace/index.vue b/vue/gold-system/src/views/workspace/index.vue
index 445f2ec..ffc0c72 100644
--- a/vue/gold-system/src/views/workspace/index.vue
+++ b/vue/gold-system/src/views/workspace/index.vue
@@ -1,14 +1,23 @@
 <script setup>
-import * as echarts from 'echarts';
+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 axios, { all } from 'axios';
+import { VscInfo } from "vue-icons-plus/vsc";
+import {
+  Bs1CircleFill,
+  Bs2CircleFill,
+  Bs3CircleFill,
+  Bs4Circle,
+  Bs5Circle,
+  Bs6Circle,
+  Bs7Circle,
+  Bs8Circle,
+} from "vue-icons-plus/bs";
+import axios, { all } from "axios";
 import API from "../../api/index";
 
 // 变量
 // 加载对象
-const loading = ref(true)
+const loading = ref(true);
 // 总览对象
 const getSumCoin = ref({});
 const statistics = ref({});
@@ -65,1069 +74,1362 @@ const LinkData = ref([]);
 const goldData = ref([]);
 
 // 搜索对象
-const goldTypePay = ref('全部类型');
-const goldTypeConsume = ref('全部类型');
-const platform = ref('全部平台');
+const goldTypePay = ref("全部类型");
+const goldTypeConsume = ref("全部类型");
+const platform = ref("全部平台");
 //默认高亮标签页
-const activeName = ref('recharge')
+const activeName = ref("recharge");
 // 金币分类选项
 const gold = [
-    {
-        value: '全部类型',
-        label: '全部类型',
-    },
-    {
-        value: '充值金币',
-        label: '充值金币',
-    },
-    {
-        value: '免费金币',
-        label: '免费金币',
-    },
-    {
-        value: '任务金币',
-        label: '任务金币',
-    },
-]
+  {
+    value: "全部类型",
+    label: "全部类型",
+  },
+  {
+    value: "充值金币",
+    label: "充值金币",
+  },
+  {
+    value: "免费金币",
+    label: "免费金币",
+  },
+  {
+    value: "任务金币",
+    label: "任务金币",
+  },
+];
 
 const list = ref([]);
 
 // 方法
 // 搜索方法
 const get = async function () {
-    try {
-        // 发送POST请求
-        const result1 = await API.post('http://192.168.8.93:10010/statistics/getSumCoin');
-        const result2 = await API.post('http://192.168.8.93:10010/statistics/a');
-        const result3 = await API.post('http://192.168.8.93:10010/statistics/getYearConsumeCoin');
-        const result4 = await API.post('http://192.168.8.93:10010/statistics/getDayConsumeCoin');
-        const result5 = await API.post('http://192.168.8.93:10010/statistics/getMediumAreaPay');
-        const result6 = await API.post('http://192.168.8.93:10010/statistics/getMediumAreaConsume');
-        const result7 = await API.post('http://192.168.8.93:10010/statistics/getMediuPayCoin');
-        const result8 = await API.post('http://192.168.8.93:10010/statistics/getMediuConsumeCoin');
-        const result9 = await API.post('http://192.168.8.93:10010/statistics/b');
+  try {
+    // 发送POST请求
+    const result1 = await API.post(
+      "http://192.168.8.93:10010/statistics/getSumCoin",
+      {}
+    );
+    const result2 = await API.post(
+      "http://192.168.8.93:10010/statistics/a",
+      {}
+    );
+    const result3 = await API.post(
+      "http://192.168.8.93:10010/statistics/getYearConsumeCoin",
+      {}
+    );
+    const result4 = await API.post(
+      "http://192.168.8.93:10010/statistics/getDayConsumeCoin",
+      {}
+    );
+    const result5 = await API.post(
+      "http://192.168.8.93:10010/statistics/getMediumAreaPay",
+      {}
+    );
+    const result6 = await API.post(
+      "http://192.168.8.93:10010/statistics/getMediumAreaConsume",
+      {}
+    );
+    const result7 = await API.post(
+      "http://192.168.8.93:10010/statistics/getMediuPayCoin",
+      {}
+    );
+    const result8 = await API.post(
+      "http://192.168.8.93:10010/statistics/getMediuConsumeCoin",
+      {}
+    );
+    const result9 = await API.post(
+      "http://192.168.8.93:10010/statistics/b",
+      {}
+    );
 
-        // 将响应结果存储到响应式数据中
-        getSumCoin.value = result1.data;
-        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;
+    // 将响应结果存储到响应式数据中
+    getSumCoin.value = result1.data;
+    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;
 
+    console.log("getSumCoin", getSumCoin.value);
+    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);
 
-        console.log('getSumCoin', getSumCoin.value);
-        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);
+    // 月份
+    // 充值
+    payMonthCategory.value = getMediuPayCoin.value
+      .map((item) => item.month)
+      .reverse();
+    payMonthRecharge.value = getMediuPayCoin.value
+      .map((item) => Math.abs(item.rechargeSumCoin))
+      .reverse();
+    payMonthFree.value = getMediuPayCoin.value
+      .map((item) => Math.abs(item.freeSumCoin))
+      .reverse();
+    payMonthTask.value = getMediuPayCoin.value
+      .map((item) => Math.abs(item.taskSumCoin))
+      .reverse();
+    payMonthRecharge.value.forEach((number) => {
+      payTotalRecharge.value += number;
+    });
+    payMonthFree.value.forEach((number) => {
+      payTotalFree.value += number;
+    });
+    payMonthTask.value.forEach((number) => {
+      payTotalTask.value += number;
+    });
+    console.log("payMonthCategory", payMonthCategory.value);
+    console.log("payMonthRecharge", payMonthRecharge.value);
+    console.log("payMonthFree", payMonthFree.value);
+    console.log("payMonthTask", payMonthTask.value);
+    console.log("payTotalRecharge", payTotalRecharge.value);
+    console.log("payTotalFree", payTotalFree.value);
+    console.log("payTotalTask", payTotalTask.value);
+    // 消费
+    consumeMonthCategory.value = getMediuConsumeCoin.value
+      .map((item) => item.month)
+      .reverse();
+    consumeMonthRecharge.value = getMediuConsumeCoin.value
+      .map((item) => Math.abs(item.rechargeSumCoin))
+      .reverse();
+    consumeMonthFree.value = getMediuConsumeCoin.value
+      .map((item) => Math.abs(item.freeSumCoin))
+      .reverse();
+    consumeMonthTask.value = getMediuConsumeCoin.value
+      .map((item) => Math.abs(item.taskSumCoin))
+      .reverse();
+    consumeMonthRecharge.value.forEach((number) => {
+      consumeTotalRecharge.value += number;
+    });
+    consumeMonthFree.value.forEach((number) => {
+      consumeTotalFree.value += number;
+    });
+    consumeMonthTask.value.forEach((number) => {
+      consumeTotalTask.value += number;
+    });
+    console.log("consumeMonthCategory", consumeMonthCategory.value);
+    console.log("consumeMonthRecharge", consumeMonthRecharge.value);
+    console.log("consumeMonthFree", consumeMonthFree.value);
+    console.log("consumeMonthTask", consumeMonthTask.value);
+    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;
 
-        // 月份
-        // 充值
-        payMonthCategory.value = getMediuPayCoin.value.map(item => item.month).reverse();
-        payMonthRecharge.value = getMediuPayCoin.value.map(item => Math.abs(item.rechargeSumCoin)).reverse();
-        payMonthFree.value = getMediuPayCoin.value.map(item => Math.abs(item.freeSumCoin)).reverse();
-        payMonthTask.value = getMediuPayCoin.value.map(item => Math.abs(item.taskSumCoin)).reverse();
-        payMonthRecharge.value.forEach((number) => {
-            payTotalRecharge.value += number
-        })
-        payMonthFree.value.forEach((number) => {
-            payTotalFree.value += number
-        })
-        payMonthTask.value.forEach((number) => {
-            payTotalTask.value += number
-        })
-        console.log('payMonthCategory', payMonthCategory.value);
-        console.log('payMonthRecharge', payMonthRecharge.value);
-        console.log('payMonthFree', payMonthFree.value);
-        console.log('payMonthTask', payMonthTask.value);
-        console.log('payTotalRecharge', payTotalRecharge.value);
-        console.log('payTotalFree', payTotalFree.value);
-        console.log('payTotalTask', payTotalTask.value);
-        // 消费
-        consumeMonthCategory.value = getMediuConsumeCoin.value.map(item => item.month).reverse();
-        consumeMonthRecharge.value = getMediuConsumeCoin.value.map(item => Math.abs(item.rechargeSumCoin)).reverse();
-        consumeMonthFree.value = getMediuConsumeCoin.value.map(item => Math.abs(item.freeSumCoin)).reverse();
-        consumeMonthTask.value = getMediuConsumeCoin.value.map(item => Math.abs(item.taskSumCoin)).reverse();
-        consumeMonthRecharge.value.forEach((number) => {
-            consumeTotalRecharge.value += number
-        })
-        consumeMonthFree.value.forEach((number) => {
-            consumeTotalFree.value += number
-        })
-        consumeMonthTask.value.forEach((number) => {
-            consumeTotalTask.value += number
-        })
-        console.log('consumeMonthCategory', consumeMonthCategory.value);
-        console.log('consumeMonthRecharge', consumeMonthRecharge.value);
-        console.log('consumeMonthFree', consumeMonthFree.value);
-        console.log('consumeMonthTask', consumeMonthTask.value);
-        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 = [
+      { value: Math.abs(statistics.value.rechargeSumCoin), name: "充值金币" },
+      { value: Math.abs(statistics.value.freeSumCoin), name: "免费金币" },
+      { value: Math.abs(statistics.value.taskSumCoin), name: "任务金币" },
+    ];
 
-        option3Data.value = [
-            { value: Math.abs(statistics.value.rechargeSumCoin), name: '充值金币' },
-            { value: Math.abs(statistics.value.freeSumCoin), name: '免费金币' },
-            { value: Math.abs(statistics.value.taskSumCoin), name: '任务金币' },
-        ]
+    option4Data.value = [
+      {
+        value: Math.abs(getYearConsumeCoin.value.yearSumRechargeCoin),
+        name: "充值金币",
+      },
+      {
+        value: Math.abs(getYearConsumeCoin.value.yearSumFreeCoin),
+        name: "免费金币",
+      },
+      {
+        value: Math.abs(getYearConsumeCoin.value.yearSumTaskCoin),
+        name: "任务金币",
+      },
+    ];
+    console.log("option4Data", option4Data.value);
 
-        option4Data.value = [
-            { value: Math.abs(getYearConsumeCoin.value.yearSumRechargeCoin), name: '充值金币' },
-            { value: Math.abs(getYearConsumeCoin.value.yearSumFreeCoin), name: '免费金币' },
-            { value: Math.abs(getYearConsumeCoin.value.yearSumTaskCoin), name: '任务金币' },
-        ];
-        console.log('option4Data', option4Data.value);
+    option5Data.value = [
+      { value: Math.abs(getSumCoin.value.todayRecharge), name: "充值金币" },
+      { value: Math.abs(getSumCoin.value.todayFree), name: "免费金币" },
+      { value: Math.abs(getSumCoin.value.todayTask), name: "任务金币" },
+    ];
+    console.log("option5Data", option5Data.value);
+    // 平台数据处理
+    ERPData.value = [
+      platformData.value.erpsum
+        .filter((item) => item.subject == "第一学科")
+        .map((item) => Math.abs(item.totalERPSum)),
+      platformData.value.erpsum
+        .filter((item) => item.subject == "第二学科")
+        .map((item) => Math.abs(item.totalERPSum)),
+      platformData.value.erpsum
+        .filter((item) => item.subject == "第三学科")
+        .map((item) => Math.abs(item.totalERPSum)),
+      platformData.value.erpsum
+        .filter((item) => item.subject == "第四学科")
+        .map((item) => Math.abs(item.totalERPSum)),
+    ];
+    ERPData.value.forEach((item, index) =>
+      item == ""
+        ? (ERPData.value[index] = {
+            value: 0,
+            name: "第" + (index + 1) + "学科",
+          })
+        : (ERPData.value[index] = {
+            value: item[0],
+            name: "第" + (index + 1) + "学科",
+          })
+    );
+    console.log("ERPData", ERPData.value);
+    HCData.value = [
+      platformData.value.homilyChartSum
+        .filter((item) => item.subject == "第一学科")
+        .map((item) => Math.abs(item.totalHomilyChartSum)),
+      platformData.value.homilyChartSum
+        .filter((item) => item.subject == "第二学科")
+        .map((item) => Math.abs(item.totalHomilyChartSum)),
+      platformData.value.homilyChartSum
+        .filter((item) => item.subject == "第三学科")
+        .map((item) => Math.abs(item.totalHomilyChartSum)),
+      platformData.value.homilyChartSum
+        .filter((item) => item.subject == "第四学科")
+        .map((item) => Math.abs(item.totalHomilyChartSum)),
+    ];
+    HCData.value.forEach((item, index) =>
+      item == ""
+        ? (HCData.value[index] = {
+            value: 0,
+            name: "第" + (index + 1) + "学科",
+          })
+        : (HCData.value[index] = {
+            value: item[0],
+            name: "第" + (index + 1) + "学科",
+          })
+    );
+    console.log("HCData", HCData.value);
+    LinkData.value = [
+      platformData.value.homilyLinkSum
+        .filter((item) => item.subject == "第一学科")
+        .map((item) => Math.abs(item.totalHomilyLinkSum)),
+      platformData.value.homilyLinkSum
+        .filter((item) => item.subject == "第二学科")
+        .map((item) => Math.abs(item.totalHomilyLinkSum)),
+      platformData.value.homilyLinkSum
+        .filter((item) => item.subject == "第三学科")
+        .map((item) => Math.abs(item.totalHomilyLinkSum)),
+      platformData.value.homilyLinkSum
+        .filter((item) => item.subject == "第四学科")
+        .map((item) => Math.abs(item.totalHomilyLinkSum)),
+    ];
+    LinkData.value.forEach((item, index) =>
+      item == ""
+        ? (LinkData.value[index] = {
+            value: 0,
+            name: "第" + (index + 1) + "学科",
+          })
+        : (LinkData.value[index] = {
+            value: item[0],
+            name: "第" + (index + 1) + "学科",
+          })
+    );
+    console.log("LinkData", LinkData.value);
+    goldData.value = [
+      platformData.value.coinSystemSum
+        .filter((item) => item.subject == "第一学科")
+        .map((item) => Math.abs(item.totalCoinSystemSum)),
+      platformData.value.coinSystemSum
+        .filter((item) => item.subject == "第二学科")
+        .map((item) => Math.abs(item.totalCoinSystemSum)),
+      platformData.value.coinSystemSum
+        .filter((item) => item.subject == "第三学科")
+        .map((item) => Math.abs(item.totalCoinSystemSum)),
+      platformData.value.coinSystemSum
+        .filter((item) => item.subject == "第四学科")
+        .map((item) => Math.abs(item.totalCoinSystemSum)),
+    ];
+    goldData.value.forEach((item, index) =>
+      item == ""
+        ? (goldData.value[index] = {
+            value: 0,
+            name: "第" + (index + 1) + "学科",
+          })
+        : (goldData.value[index] = {
+            value: item[0],
+            name: "第" + (index + 1) + "学科",
+          })
+    );
+    console.log("goldData", goldData.value);
+    allData.value = [
+      {
+        value:
+          Number(ERPData.value[0].value) +
+          Number(HCData.value[0].value) +
+          Number(LinkData.value[0].value) +
+          Number(goldData.value[0].value),
+        name: "第1学科",
+      },
+      {
+        value:
+          Number(ERPData.value[1].value) +
+          Number(HCData.value[1].value) +
+          Number(LinkData.value[1].value) +
+          Number(goldData.value[1].value),
+        name: "第2学科",
+      },
+      {
+        value:
+          Number(ERPData.value[2].value) +
+          Number(HCData.value[2].value) +
+          Number(LinkData.value[2].value) +
+          Number(goldData.value[2].value),
+        name: "第3学科",
+      },
+      {
+        value:
+          Number(ERPData.value[3].value) +
+          Number(HCData.value[3].value) +
+          Number(LinkData.value[3].value) +
+          Number(goldData.value[3].value),
+        name: "第4学科",
+      },
+    ];
 
-        option5Data.value = [
-            { value: Math.abs(getSumCoin.value.todayRecharge), name: '充值金币' },
-            { value: Math.abs(getSumCoin.value.todayFree), name: '免费金币' },
-            { value: Math.abs(getSumCoin.value.todayTask), name: '任务金币' },
-        ];
-        console.log('option5Data', option5Data.value);
-        // 平台数据处理
-        ERPData.value = [
-            platformData.value.erpsum.filter(item => item.subject == '第一学科').map(item => Math.abs(item.totalERPSum)),
-            platformData.value.erpsum.filter(item => item.subject == '第二学科').map(item => Math.abs(item.totalERPSum)),
-            platformData.value.erpsum.filter(item => item.subject == '第三学科').map(item => Math.abs(item.totalERPSum)),
-            platformData.value.erpsum.filter(item => item.subject == '第四学科').map(item => Math.abs(item.totalERPSum)),
-        ]
-        ERPData.value.forEach((item, index) => item == '' ? ERPData.value[index] = { value: 0, name: '第' + (index + 1) + '学科' } : ERPData.value[index] = { value: item[0], name: '第' + (index + 1) + '学科' });
-        console.log('ERPData', ERPData.value);
-        HCData.value = [
-            platformData.value.homilyChartSum.filter(item => item.subject == '第一学科').map(item => Math.abs(item.totalHomilyChartSum)),
-            platformData.value.homilyChartSum.filter(item => item.subject == '第二学科').map(item => Math.abs(item.totalHomilyChartSum)),
-            platformData.value.homilyChartSum.filter(item => item.subject == '第三学科').map(item => Math.abs(item.totalHomilyChartSum)),
-            platformData.value.homilyChartSum.filter(item => item.subject == '第四学科').map(item => Math.abs(item.totalHomilyChartSum)),
-        ]
-        HCData.value.forEach((item, index) => item == '' ? HCData.value[index] = { value: 0, name: '第' + (index + 1) + '学科' } : HCData.value[index] = { value: item[0], name: '第' + (index + 1) + '学科' });
-        console.log('HCData', HCData.value);
-        LinkData.value = [
-            platformData.value.homilyLinkSum.filter(item => item.subject == '第一学科').map(item => Math.abs(item.totalHomilyLinkSum)),
-            platformData.value.homilyLinkSum.filter(item => item.subject == '第二学科').map(item => Math.abs(item.totalHomilyLinkSum)),
-            platformData.value.homilyLinkSum.filter(item => item.subject == '第三学科').map(item => Math.abs(item.totalHomilyLinkSum)),
-            platformData.value.homilyLinkSum.filter(item => item.subject == '第四学科').map(item => Math.abs(item.totalHomilyLinkSum)),
-        ]
-        LinkData.value.forEach((item, index) => item == '' ? LinkData.value[index] = { value: 0, name: '第' + (index + 1) + '学科' } : LinkData.value[index] = { value: item[0], name: '第' + (index + 1) + '学科' });
-        console.log('LinkData', LinkData.value);
-        goldData.value = [
-            platformData.value.coinSystemSum.filter(item => item.subject == '第一学科').map(item => Math.abs(item.totalCoinSystemSum)),
-            platformData.value.coinSystemSum.filter(item => item.subject == '第二学科').map(item => Math.abs(item.totalCoinSystemSum)),
-            platformData.value.coinSystemSum.filter(item => item.subject == '第三学科').map(item => Math.abs(item.totalCoinSystemSum)),
-            platformData.value.coinSystemSum.filter(item => item.subject == '第四学科').map(item => Math.abs(item.totalCoinSystemSum)),
-        ]
-        goldData.value.forEach((item, index) => item == '' ? goldData.value[index] = { value: 0, name: '第' + (index + 1) + '学科' } : goldData.value[index] = { value: item[0], name: '第' + (index + 1) + '学科' });
-        console.log('goldData', goldData.value);
-        allData.value = [
-            { value: (Number(ERPData.value[0].value) + Number(HCData.value[0].value) + Number(LinkData.value[0].value) + Number(goldData.value[0].value)), name: '第1学科' },
-            { value: (Number(ERPData.value[1].value) + Number(HCData.value[1].value) + Number(LinkData.value[1].value) + Number(goldData.value[1].value)), name: '第2学科' },
-            { value: (Number(ERPData.value[2].value) + Number(HCData.value[2].value) + Number(LinkData.value[2].value) + Number(goldData.value[2].value)), name: '第3学科' },
-            { value: (Number(ERPData.value[3].value) + Number(HCData.value[3].value) + Number(LinkData.value[3].value) + Number(goldData.value[3].value)), name: '第4学科' },
-        ]
+    loading.value = false;
 
-        loading.value = false;
-
-        console.log('allData', allData.value);
-    } catch (error) {
-        console.log('请求失败', error);
-        // 在这里可以处理错误逻辑，比如显示错误提示等
-    }
-}
+    console.log("allData", allData.value);
+  } catch (error) {
+    console.log("请求失败", error);
+    loading.value = false;
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
 // 金币类型
 // 充值
 const changeGoldTypePay = function () {
-    console.log('changeGoldTypePay', goldTypePay.value);
-    payRank.value = {};
-    if (goldTypePay.value == '全部类型') {
-        payRank.value = areaTotalPay.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;
-    }
-    console.log('payRank', payRank.value);
-}
+  console.log("changeGoldTypePay", goldTypePay.value);
+  payRank.value = {};
+  if (goldTypePay.value == "全部类型") {
+    payRank.value = areaTotalPay.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;
+  }
+  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;
-    }
-    console.log('ConsumeRank', ConsumeRank.value);
-}
+  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;
+  }
+  console.log("ConsumeRank", ConsumeRank.value);
+};
 // 点击标签页初始化
 const handleClick = function () {
-    goldTypePay.value = '全部类型';
-    goldTypeConsume.value = '全部类型';
-}
+  goldTypePay.value = "全部类型";
+  goldTypeConsume.value = "全部类型";
+};
 
 // 切换平台
 const changePlatform = function () {
-    console.log('changePlatform', platform.value);
-    if (platform.value == '全部平台') {
-        // 基于准备好的dom，初始化echarts实例
-        var all = echarts.init(document.getElementById('all'));
-        const option6 = {
-            tooltip: {
-                trigger: 'item'
-            },
-            series: [
-                {
-                    name: '四大学科类别占比',
-                    type: 'pie',
-                    radius: ['40%', '60%'],
-                    avoidLabelOverlap: false,
-                    data: allData.value
-                }
-            ]
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        all.setOption(option6);
-    } else if (platform.value == 'ERP') {
-        // 基于准备好的dom，初始化echarts实例
-        var ERP = echarts.init(document.getElementById('ERP'));
-        const option7 = {
-            tooltip: {
-                trigger: 'item'
-            },
-            series: [
-                {
-                    name: '四大学科类别占比',
-                    type: 'pie',
-                    radius: ['40%', '60%'],
-                    avoidLabelOverlap: false,
-                    data: ERPData.value
-                }
-            ]
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        ERP.setOption(option7);
-    } else if (platform.value == 'HC') {
-        // 第4-3个饼状图 基于准备好的dom，初始化echarts实例
-        var HC = echarts.init(document.getElementById('HC'));
-        const option8 = {
-            tooltip: {
-                trigger: 'item'
-            },
-            series: [
-                {
-                    name: '四大学科类别占比',
-                    type: 'pie',
-                    radius: ['40%', '60%'],
-                    avoidLabelOverlap: false,
-                    data: HCData.value
-                }
-            ]
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        HC.setOption(option8);
-    } else if (platform.value == 'Link') {
-        // 第4-4个饼状图 基于准备好的dom，初始化echarts实例
-        var Link = echarts.init(document.getElementById('Link'));
-        const option9 = {
-            tooltip: {
-                trigger: 'item'
-            },
-            series: [
-                {
-                    name: '四大学科类别占比',
-                    type: 'pie',
-                    radius: ['40%', '60%'],
-                    avoidLabelOverlap: false,
-                    data: LinkData.value
-                }
-            ]
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        Link.setOption(option9);
-    } else if (platform.value == '金币系统') {
-        // 第4-5个饼状图 基于准备好的dom，初始化echarts实例
-        var gold = echarts.init(document.getElementById('gold'));
-        const option10 = {
-            tooltip: {
-                trigger: 'item'
-            },
-            series: [
-                {
-                    name: '四大学科类别占比',
-                    type: 'pie',
-                    radius: ['40%', '60%'],
-                    avoidLabelOverlap: false,
-                    data: goldData.value
-                }
-            ]
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        gold.setOption(option10);
-    }
-}
+  console.log("changePlatform", platform.value);
+  if (platform.value == "全部平台") {
+    // 基于准备好的dom，初始化echarts实例
+    var all = echarts.init(document.getElementById("all"));
+    const option6 = {
+      tooltip: {
+        trigger: "item",
+      },
+      series: [
+        {
+          name: "四大学科类别占比",
+          type: "pie",
+          radius: ["40%", "60%"],
+          avoidLabelOverlap: false,
+          data: allData.value,
+        },
+      ],
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    all.setOption(option6);
+  } else if (platform.value == "ERP") {
+    // 基于准备好的dom，初始化echarts实例
+    var ERP = echarts.init(document.getElementById("ERP"));
+    const option7 = {
+      tooltip: {
+        trigger: "item",
+      },
+      series: [
+        {
+          name: "四大学科类别占比",
+          type: "pie",
+          radius: ["40%", "60%"],
+          avoidLabelOverlap: false,
+          data: ERPData.value,
+        },
+      ],
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    ERP.setOption(option7);
+  } else if (platform.value == "HC") {
+    // 第4-3个饼状图 基于准备好的dom，初始化echarts实例
+    var HC = echarts.init(document.getElementById("HC"));
+    const option8 = {
+      tooltip: {
+        trigger: "item",
+      },
+      series: [
+        {
+          name: "四大学科类别占比",
+          type: "pie",
+          radius: ["40%", "60%"],
+          avoidLabelOverlap: false,
+          data: HCData.value,
+        },
+      ],
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    HC.setOption(option8);
+  } else if (platform.value == "Link") {
+    // 第4-4个饼状图 基于准备好的dom，初始化echarts实例
+    var Link = echarts.init(document.getElementById("Link"));
+    const option9 = {
+      tooltip: {
+        trigger: "item",
+      },
+      series: [
+        {
+          name: "四大学科类别占比",
+          type: "pie",
+          radius: ["40%", "60%"],
+          avoidLabelOverlap: false,
+          data: LinkData.value,
+        },
+      ],
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    Link.setOption(option9);
+  } else if (platform.value == "金币系统") {
+    // 第4-5个饼状图 基于准备好的dom，初始化echarts实例
+    var gold = echarts.init(document.getElementById("gold"));
+    const option10 = {
+      tooltip: {
+        trigger: "item",
+      },
+      series: [
+        {
+          name: "四大学科类别占比",
+          type: "pie",
+          radius: ["40%", "60%"],
+          avoidLabelOverlap: false,
+          data: goldData.value,
+        },
+      ],
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    gold.setOption(option10);
+  }
+};
 
 // 计算属性
 // 格式化数字
 const formatNum = function (val) {
-    // console.log(val);
-    if (val === undefined) {
-        return ''; // 或者返回其他合适的默认值，避免调用toString报错
-    } else {
-        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    }
+  // console.log(val);
+  if (val === undefined) {
+    return ""; // 或者返回其他合适的默认值，避免调用toString报错
+  } else {
+    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }
 };
 
 onMounted(async function () {
-    await get();
-    // 第一个柱状图 基于准备好的dom，初始化echarts实例
-    var rechargeBar = echarts.init(document.getElementById('recharge'));
-    const option1 = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                // Use axis to trigger tooltip
-                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
-            }
+  await get();
+  // 第一个柱状图 基于准备好的dom，初始化echarts实例
+  var rechargeBar = echarts.init(document.getElementById("recharge"));
+  const option1 = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        // Use axis to trigger tooltip
+        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
+      },
+    },
+    legend: {
+      show: false,
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      data: payMonthCategory.value,
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        name: "充值金币",
+        color: "#35e383",
+        type: "bar",
+        stack: "total",
+        label: {
+          show: true,
         },
-        legend: {
-            show: false
+        emphasis: {
+          focus: "series",
         },
-        grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
+        data: payMonthRecharge.value,
+      },
+      {
+        name: "免费金币",
+        color: "#5f8ff5",
+        type: "bar",
+        stack: "total",
+        label: {
+          show: true,
         },
-        xAxis: {
-            type: 'category',
-            data: payMonthCategory.value
+        emphasis: {
+          focus: "series",
         },
-        yAxis: {
-            type: 'value'
-
+        data: payMonthFree.value,
+      },
+      {
+        name: "任务金币",
+        color: "#ffe733",
+        type: "bar",
+        stack: "total",
+        label: {
+          show: true,
         },
-        series: [
-            {
-                name: '充值金币',
-                color: '#35e383',
-                type: 'bar',
-                stack: 'total',
-                label: {
-                    show: true
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: payMonthRecharge.value
-            },
-            {
-                name: '免费金币',
-                color: '#5f8ff5',
-                type: 'bar',
-                stack: 'total',
-                label: {
-                    show: true
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: payMonthFree.value
-            },
-            {
-                name: '任务金币',
-                color: '#ffe733',
-                type: 'bar',
-                stack: 'total',
-                label: {
-                    show: true
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: payMonthTask.value
-            }
-        ]
-    };
-    // 使用刚指定的配置项和数据显示图表。
-    rechargeBar.setOption(option1);
+        emphasis: {
+          focus: "series",
+        },
+        data: payMonthTask.value,
+      },
+    ],
+  };
+  // 使用刚指定的配置项和数据显示图表。
+  rechargeBar.setOption(option1);
 
-    //第二个柱状图 基于准备好的dom，初始化echarts实例
-    var consumeBar = echarts.init(document.getElementById('consume'));
-    const option2 = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                // Use axis to trigger tooltip
-                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
-            }
+  //第二个柱状图 基于准备好的dom，初始化echarts实例
+  var consumeBar = echarts.init(document.getElementById("consume"));
+  const option2 = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        // Use axis to trigger tooltip
+        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
+      },
+    },
+    legend: {
+      show: false,
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      data: consumeMonthCategory.value,
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        name: "充值金币",
+        color: "#35e383",
+        type: "bar",
+        stack: "total",
+        label: {
+          show: true,
         },
-        legend: {
-            show: false
+        emphasis: {
+          focus: "series",
         },
-        grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
+        data: consumeMonthRecharge.value,
+      },
+      {
+        name: "免费金币",
+        color: "#5f8ff5",
+        type: "bar",
+        stack: "total",
+        label: {
+          show: true,
         },
-        xAxis: {
-            type: 'category',
-            data: consumeMonthCategory.value
+        emphasis: {
+          focus: "series",
         },
-        yAxis: {
-            type: 'value'
-
+        data: consumeMonthFree.value,
+      },
+      {
+        name: "任务金币",
+        color: "#ffe733",
+        type: "bar",
+        stack: "total",
+        label: {
+          show: true,
         },
-        series: [
-            {
-                name: '充值金币',
-                color: '#35e383',
-                type: 'bar',
-                stack: 'total',
-                label: {
-                    show: true
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: consumeMonthRecharge.value
-            },
-            {
-                name: '免费金币',
-                color: '#5f8ff5',
-                type: 'bar',
-                stack: 'total',
-                label: {
-                    show: true
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: consumeMonthFree.value
-            },
-            {
-                name: '任务金币',
-                color: '#ffe733',
-                type: 'bar',
-                stack: 'total',
-                label: {
-                    show: true
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: consumeMonthTask.value
-            }
-        ]
-    };
-    // 使用刚指定的配置项和数据显示图表。
-    consumeBar.setOption(option2);
-
-
-    // 第一个饼状图 基于准备好的dom，初始化echarts实例
-    var yearRechargePie = echarts.init(document.getElementById('yearRecharge'));
-    const option3 = {
-        tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            bottom: '-2%',
-            left: 'center',
-            orient: 'vertical'
+        emphasis: {
+          focus: "series",
         },
-        series: [
-            {
-                name: '全年累计金币数(个)\n' + Math.abs(statistics.value.totalSumCoin),
-                type: 'pie',
-                radius: ['60%', '80%'],
-                avoidLabelOverlap: false,
-                label: {
-                    show: true,
-                    position: 'center',
-                    formatter: '{a}',
-                    fontSize: 15,
-                    fontWeight: 'bold'
-                },
-                labelLine: {
-                    show: false
-                },
-                data: option3Data.value,
-                color: ['#57a5ff', '#7f29ff', '#f2d113']
-            }
-        ]
-    };
-    // 使用刚指定的配置项和数据显示图表。
-    yearRechargePie.setOption(option3);
+        data: consumeMonthTask.value,
+      },
+    ],
+  };
+  // 使用刚指定的配置项和数据显示图表。
+  consumeBar.setOption(option2);
 
-    // 第二个饼状图 基于准备好的dom，初始化echarts实例
-    var yearConsumePie = echarts.init(document.getElementById('yearConsume'));
-    const option4 = {
-        tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            bottom: '-2%',
-            left: 'center',
-            orient: 'vertical'
+  // 第一个饼状图 基于准备好的dom，初始化echarts实例
+  var yearRechargePie = echarts.init(document.getElementById("yearRecharge"));
+  const option3 = {
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      bottom: "-2%",
+      left: "center",
+      orient: "vertical",
+    },
+    series: [
+      {
+        name: "全年累计金币数(个)\n" + Math.abs(statistics.value.totalSumCoin),
+        type: "pie",
+        radius: ["60%", "80%"],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: "center",
+          formatter: "{a}",
+          fontSize: 15,
+          fontWeight: "bold",
         },
-        grid: {
-            top: '0%', // 设置图表距离容器顶部的距离为10%，使饼图上移
+        labelLine: {
+          show: false,
         },
-        series: [
-            {
-                name: '全年累计消耗金币数(个)\n' + Math.abs(getYearConsumeCoin.value.yearsumCoin),
-                type: 'pie',
-                radius: ['60%', '80%'],
-                avoidLabelOverlap: false,
-                label: {
-                    show: true,
-                    position: 'center',
-                    formatter: '{a}',
-                    fontSize: 15,
-                    fontWeight: 'bold'
-                },
-                labelLine: {
-                    show: false
-                },
-                data: option4Data.value,
-                color: ['#57a5ff', '#7f29ff', '#f2d113']
-            }
-        ]
-    };
-    // 使用刚指定的配置项和数据显示图表。
-    yearConsumePie.setOption(option4);
+        data: option3Data.value,
+        color: ["#57a5ff", "#7f29ff", "#f2d113"],
+      },
+    ],
+  };
+  // 使用刚指定的配置项和数据显示图表。
+  yearRechargePie.setOption(option3);
 
-    // 第三个饼状图 基于准备好的dom，初始化echarts实例
-    var nowGoldPie = echarts.init(document.getElementById('nowGold'));
-    const option5 = {
-        tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            bottom: '-2%',
-            left: 'center',
-            orient: 'vertical'
+  // 第二个饼状图 基于准备好的dom，初始化echarts实例
+  var yearConsumePie = echarts.init(document.getElementById("yearConsume"));
+  const option4 = {
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      bottom: "-2%",
+      left: "center",
+      orient: "vertical",
+    },
+    grid: {
+      top: "0%", // 设置图表距离容器顶部的距离为10%，使饼图上移
+    },
+    series: [
+      {
+        name:
+          "全年累计消耗金币数(个)\n" +
+          Math.abs(getYearConsumeCoin.value.yearsumCoin),
+        type: "pie",
+        radius: ["60%", "80%"],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: "center",
+          formatter: "{a}",
+          fontSize: 15,
+          fontWeight: "bold",
         },
-        grid: {
-            top: '10%', // 设置图表距离容器顶部的距离为10%，使饼图上移
+        labelLine: {
+          show: false,
         },
-        series: [
-            {
-                name: '当前金币余量(个)\n' + Math.abs(getSumCoin.value.todayTotalCoin),
-                type: 'pie',
-                radius: ['60%', '80%'],
-                avoidLabelOverlap: false,
-                label: {
-                    show: true,
-                    position: 'center',
-                    formatter: '{a}',
-                    fontSize: 15,
-                    fontWeight: 'bold'
-                },
-                labelLine: {
-                    show: false
-                },
-                data: option5Data.value,
-                color: ['#57a5ff', '#7f29ff', '#f2d113']
-            }
-        ]
-    };
-    // 使用刚指定的配置项和数据显示图表。
-    nowGoldPie.setOption(option5);
+        data: option4Data.value,
+        color: ["#57a5ff", "#7f29ff", "#f2d113"],
+      },
+    ],
+  };
+  // 使用刚指定的配置项和数据显示图表。
+  yearConsumePie.setOption(option4);
 
-    // 第4-1个饼状图 基于准备好的dom，初始化echarts实例
-    var all = echarts.init(document.getElementById('all'));
-    const option6 = {
-        tooltip: {
-            trigger: 'item'
+  // 第三个饼状图 基于准备好的dom，初始化echarts实例
+  var nowGoldPie = echarts.init(document.getElementById("nowGold"));
+  const option5 = {
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      bottom: "-2%",
+      left: "center",
+      orient: "vertical",
+    },
+    grid: {
+      top: "10%", // 设置图表距离容器顶部的距离为10%，使饼图上移
+    },
+    series: [
+      {
+        name: "当前金币余量(个)\n" + Math.abs(getSumCoin.value.todayTotalCoin),
+        type: "pie",
+        radius: ["60%", "80%"],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: "center",
+          formatter: "{a}",
+          fontSize: 15,
+          fontWeight: "bold",
         },
-        series: [
-            {
-                name: '四大学科类别占比',
-                type: 'pie',
-                radius: ['40%', '60%'],
-                avoidLabelOverlap: false,
-                data: allData.value
-            }
-        ]
-    };
-    // 使用刚指定的配置项和数据显示图表。
-    all.setOption(option6);
-})
-
+        labelLine: {
+          show: false,
+        },
+        data: option5Data.value,
+        color: ["#57a5ff", "#7f29ff", "#f2d113"],
+      },
+    ],
+  };
+  // 使用刚指定的配置项和数据显示图表。
+  nowGoldPie.setOption(option5);
 
+  // 第4-1个饼状图 基于准备好的dom，初始化echarts实例
+  var all = echarts.init(document.getElementById("all"));
+  const option6 = {
+    tooltip: {
+      trigger: "item",
+    },
+    series: [
+      {
+        name: "四大学科类别占比",
+        type: "pie",
+        radius: ["40%", "60%"],
+        avoidLabelOverlap: false,
+        data: allData.value,
+      },
+    ],
+  };
+  // 使用刚指定的配置项和数据显示图表。
+  all.setOption(option6);
+});
 </script>
 
 <template>
-    <div v-loading="loading">
-        <el-row :gutter="20">
-            <el-col :span="6">
-                <el-card>
-                    <p>当前金币余量
-                    </p>
-                    <p class="head-mid-font">
-                        {{ formatNum(getSumCoin.todayTotalCoin) }}
-                    </p>
-                    <p>
-                        <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>
-                            </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>
-                            </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>
-                            </div>
-                        </span>
-                    </p>
-                    <template #footer>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{ formatNum(getSumCoin.todayFree)
-                        }}
-                        任务{{ formatNum(getSumCoin.todayTask) }}</template>
-                </el-card>
-            </el-col>
-            <el-col :span="6">
-                <el-card>
-                    <p>全年累计金币数</p>
-                    <p class="head-mid-font">{{ formatNum(Math.abs(statistics.totalSumCoin)) }}</p>
-                    <p>折合新币累计金额 {{ formatNum(Math.abs(statistics.totalSumCoin)) }}</p>
-                    <template #footer>昨日新增 {{ formatNum(Math.abs(statistics.totalYesterdaySumCoin)) }} ，其中充值 {{
-                        formatNum(Math.abs(statistics.rechargeYesterdaySumCoin)) }} </template>
-                </el-card>
-            </el-col>
-            <el-col :span="6">
-                <el-card>
-                    <p>全年累计消费金币数</p>
-                    <p class="head-mid-font">{{ formatNum(Math.abs(getYearConsumeCoin.yearsumCoin)) }}</p>
-                    <p>消费 {{ formatNum(Math.abs(getYearConsumeCoin.yearConsumeCoin)) }}; 退款 {{
-                        formatNum(Math.abs(getYearConsumeCoin.yearRefundCoin))
-                        }}</p>
-                    <template #footer>昨日新增消耗 {{ formatNum(Math.abs(getDayConsumeCoin.daysumCoin)) }} ; 消费 {{
-                        formatNum(Math.abs(getDayConsumeCoin.dayConsumeCoin)) }} ; 退款 {{
-                            formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin))
-                        }}</template>
-                </el-card>
-            </el-col>
-            <el-col :span="6">
-                <el-card>
-                    <p>全年累计充值人数</p>
-                    <p class="head-mid-font">{{ formatNum(Math.abs(statistics.rechargeCount)) }}</p>
-                    <p style="display: flex;">
-                        <span v-if="statistics.weekOverWeekRate > 0">
-                            <div class="comparedWithYesterday">
-                                <span>周同比 {{ statistics.weekOverWeekRate }}%</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>
-                            </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>
-                            </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>
-                            </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>
-                            </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>
-                            </div>
-                        </span>
-                    </p>
-                    <template #footer>昨日充值人数 {{ formatNum(Math.abs(statistics.rechargeCountYesterday)) }}
-                        ，其中首充 {{ formatNum(Math.abs(statistics.firstRechargeCountYesterday)) }} 人</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-tab-pane label="金币充值" name="recharge">
-                            <div>
-                                合计：充值金币：
-                                <span class="mid-head-font">{{ formatNum(payTotalRecharge) }}</span>
-                                ，免费金币：
-                                <span class="mid-head-font">{{ formatNum(payTotalFree) }}</span>
-                                ，任务金币：
-                                <span class="mid-head-font">{{ formatNum(payTotalTask) }}</span>
-                            </div>
-                            <div class="bar">
-                                <div id="recharge" style="width: 1200px;height:400px;"></div>
-                                <div>
-                                    <div class="goldCategory">
-                                        <span class="light-green-dot"></span>
-                                        <span>充值金币</span>
-                                    </div>
-                                    <div class="goldCategory">
-                                        <span class="blue-dot"></span>
-                                        <span>免费金币</span>
-                                    </div>
-                                    <div class="goldCategory">
-                                        <span class="yellow-dot"></span>
-                                        <span>任务金币</span>
-                                    </div>
-                                </div>
-                                <div>
-                                    <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" />
-                                        </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>
-
-                                    </div>
-
-                                </div>
-                            </div>
-                        </el-tab-pane>
-                        <el-tab-pane label="金币消费" name="consume">
-                            <div>
-                                合计：充值金币：
-                                <span class="mid-head-font">{{ formatNum(consumeTotalRecharge) }}</span>
-                                ，免费金币：
-                                <span class="mid-head-font">{{ formatNum(consumeTotalFree) }}</span>
-                                ，任务金币：
-                                <span class="mid-head-font">{{ formatNum(consumeTotalTask) }}</span>
-                            </div>
-                            <div class="bar">
-                                <div id="consume" style="width: 1200px;height:400px;"></div>
-                                <div>
-                                    <div class="goldCategory">
-                                        <span class="light-green-dot"></span>
-                                        <span>充值金币</span>
-                                    </div>
-                                    <div class="goldCategory">
-                                        <span class="blue-dot"></span>
-                                        <span>免费金币</span>
-                                    </div>
-                                    <div class="goldCategory">
-                                        <span class="yellow-dot"></span>
-                                        <span>任务金币</span>
-                                    </div>
-                                </div>
-                                <div>
-                                    <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" />
-                                        </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>
-                                    </div>
-
-                                </div>
-                            </div>
-                        </el-tab-pane>
-                    </el-tabs>
-
-                </el-card>
-            </el-col>
-        </el-row>
-        <el-row :gutter="20">
-            <el-col :span="16">
-                <el-card>
-                    <template #header>
-                        <div class="card-header">
-                            <span class="tail-head">金币概览</span>
-                        </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 v-loading="loading">
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <el-card>
+          <p>当前金币余量</p>
+          <p class="head-mid-font">
+            {{ formatNum(getSumCoin.todayTotalCoin) }}
+          </p>
+          <p>
+            <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>
+              </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>
+              </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>
+              </div>
+            </span>
+          </p>
+          <template #footer
+            >充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{
+              formatNum(getSumCoin.todayFree)
+            }}
+            任务{{ formatNum(getSumCoin.todayTask) }}</template
+          >
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p>全年累计金币数</p>
+          <p class="head-mid-font">
+            {{ formatNum(Math.abs(statistics.totalSumCoin)) }}
+          </p>
+          <p>
+            折合新币累计金额 {{ formatNum(Math.abs(statistics.totalSumCoin)) }}
+          </p>
+          <template #footer
+            >昨日新增
+            {{ formatNum(Math.abs(statistics.totalYesterdaySumCoin)) }}
+            ，其中充值
+            {{ formatNum(Math.abs(statistics.rechargeYesterdaySumCoin)) }}
+          </template>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p>全年累计消费金币数</p>
+          <p class="head-mid-font">
+            {{ formatNum(Math.abs(getYearConsumeCoin.yearsumCoin)) }}
+          </p>
+          <p>
+            消费 {{ formatNum(Math.abs(getYearConsumeCoin.yearConsumeCoin)) }};
+            退款 {{ formatNum(Math.abs(getYearConsumeCoin.yearRefundCoin)) }}
+          </p>
+          <template #footer
+            >昨日新增消耗
+            {{ formatNum(Math.abs(getDayConsumeCoin.daysumCoin)) }} ; 消费
+            {{ formatNum(Math.abs(getDayConsumeCoin.dayConsumeCoin)) }} ; 退款
+            {{ formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin)) }}</template
+          >
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p>全年累计充值人数</p>
+          <p class="head-mid-font">
+            {{ formatNum(Math.abs(statistics.rechargeCount)) }}
+          </p>
+          <p style="display: flex">
+            <span v-if="statistics.weekOverWeekRate > 0">
+              <div class="comparedWithYesterday">
+                <span>周同比 {{ statistics.weekOverWeekRate }}%</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>
+              </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>
+              </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>
+              </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>
+              </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>
+              </div>
+            </span>
+          </p>
+          <template #footer
+            >昨日充值人数
+            {{ formatNum(Math.abs(statistics.rechargeCountYesterday)) }}
+            ，其中首充
+            {{ formatNum(Math.abs(statistics.firstRechargeCountYesterday)) }}
+            人</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-tab-pane label="金币充值" name="recharge">
+              <div>
+                合计：充值金币：
+                <span class="mid-head-font">{{
+                  formatNum(payTotalRecharge)
+                }}</span>
+                ，免费金币：
+                <span class="mid-head-font">{{ formatNum(payTotalFree) }}</span>
+                ，任务金币：
+                <span class="mid-head-font">{{ formatNum(payTotalTask) }}</span>
+              </div>
+              <div class="bar">
+                <div id="recharge" style="width: 1200px; height: 400px"></div>
+                <div>
+                  <div class="goldCategory">
+                    <span class="light-green-dot"></span>
+                    <span>充值金币</span>
+                  </div>
+                  <div class="goldCategory">
+                    <span class="blue-dot"></span>
+                    <span>免费金币</span>
+                  </div>
+                  <div class="goldCategory">
+                    <span class="yellow-dot"></span>
+                    <span>任务金币</span>
+                  </div>
+                </div>
+                <div>
+                  <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"
+                      />
+                    </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>
-                </el-card>
-            </el-col>
-            <el-col :span="8">
-                <el-card>
-                    <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-button label="全部平台" value="全部平台" />
-                                <el-radio-button label="ERP" value="ERP" />
-                                <el-radio-button label="HC" value="HC" />
-                                <el-radio-button label="Link" value="Link" />
-                                <el-radio-button label="金币系统" value="金币系统" />
-                            </el-radio-group>
-                        </div>
-                    </template>
-                    <span v-if="platform == '全部平台'">
-                        <div id="all" style="width: 500px;height:400px;"></div>
-                    </span>
-                    <span v-if="platform == 'ERP'">
-                        <div id="ERP" style="width: 500px;height:400px;"></div>
-                    </span>
-                    <span v-if="platform == 'HC'">
-                        <div id="HC" style="width: 500px;height:400px;"></div>
-                    </span>
-                    <span v-if="platform == 'Link'">
-                        <div id="Link" style="width: 500px;height:400px;"></div>
-                    </span>
-                    <span v-if="platform == '金币系统'">
-                        <div id="gold" style="width: 500px;height:400px;"></div>
-                    </span>
-
-                </el-card>
-            </el-col>
-        </el-row>
-    </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>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="金币消费" name="consume">
+              <div>
+                合计：充值金币：
+                <span class="mid-head-font">{{
+                  formatNum(consumeTotalRecharge)
+                }}</span>
+                ，免费金币：
+                <span class="mid-head-font">{{
+                  formatNum(consumeTotalFree)
+                }}</span>
+                ，任务金币：
+                <span class="mid-head-font">{{
+                  formatNum(consumeTotalTask)
+                }}</span>
+              </div>
+              <div class="bar">
+                <div id="consume" style="width: 1200px; height: 400px"></div>
+                <div>
+                  <div class="goldCategory">
+                    <span class="light-green-dot"></span>
+                    <span>充值金币</span>
+                  </div>
+                  <div class="goldCategory">
+                    <span class="blue-dot"></span>
+                    <span>免费金币</span>
+                  </div>
+                  <div class="goldCategory">
+                    <span class="yellow-dot"></span>
+                    <span>任务金币</span>
+                  </div>
+                </div>
+                <div>
+                  <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"
+                      />
+                    </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>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="16">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span class="tail-head">金币概览</span>
+            </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>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card>
+          <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-button label="全部平台" value="全部平台" />
+                <el-radio-button label="ERP" value="ERP" />
+                <el-radio-button label="HC" value="HC" />
+                <el-radio-button label="Link" value="Link" />
+                <el-radio-button label="金币系统" value="金币系统" />
+              </el-radio-group>
+            </div>
+          </template>
+          <span v-if="platform == '全部平台'">
+            <div id="all" style="width: 500px; height: 400px"></div>
+          </span>
+          <span v-if="platform == 'ERP'">
+            <div id="ERP" style="width: 500px; height: 400px"></div>
+          </span>
+          <span v-if="platform == 'HC'">
+            <div id="HC" style="width: 500px; height: 400px"></div>
+          </span>
+          <span v-if="platform == 'Link'">
+            <div id="Link" style="width: 500px; height: 400px"></div>
+          </span>
+          <span v-if="platform == '金币系统'">
+            <div id="gold" style="width: 500px; height: 400px"></div>
+          </span>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <style scoped>
 .head-mid-font {
-    font-size: 20px;
-    font-weight: bold;
+  font-size: 20px;
+  font-weight: bold;
 }
 
 .mid-head-font {
-    font-weight: bold;
-    color: #5eb7ff;
+  font-weight: bold;
+  color: #5eb7ff;
 }
 
 .tail-head {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .comparedWithYesterday {
-    display: flex;
+  display: flex;
 }
 
 .ranking-item {
-    margin-bottom: 10px;
-    display: flex;
+  margin-bottom: 10px;
+  display: flex;
 }
 
 .ranking-header {
-    margin-bottom: 10px;
-    display: flex;
+  margin-bottom: 10px;
+  display: flex;
 }
 
 .goldCategory {
-    margin-right: 20px;
-    display: flex;
+  margin-right: 20px;
+  display: flex;
 }
 
 .bar {
-    display: flex;
+  display: flex;
 }
 
 .pie {
-    display: flex;
+  display: flex;
 }
 
 .el-row {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .el-radio-button {
-    border: 1px solid grey;
+  border: 1px solid grey;
 }
-</style>
\ No newline at end of file
+</style>