From ff7bb72431caa16af43a07a636402b95b96f7019 Mon Sep 17 00:00:00 2001
From: hongxilin <17663930442@163.com>
Date: Wed, 4 Dec 2024 20:20:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/gold-system/src/assets/css/common.css     |    6 +
 vue/gold-system/src/router/index.js           |    1 +
 vue/gold-system/src/views/workspace/index.vue | 1247 +++++++++++++++++--------
 vue/gold-system/src/views/z.vue               |  104 +++
 4 files changed, 945 insertions(+), 413 deletions(-)
 create mode 100644 vue/gold-system/src/views/z.vue

diff --git a/vue/gold-system/src/assets/css/common.css b/vue/gold-system/src/assets/css/common.css
index 338f371..2b43cb7 100644
--- a/vue/gold-system/src/assets/css/common.css
+++ b/vue/gold-system/src/assets/css/common.css
@@ -63,4 +63,10 @@
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
     border-top: 10px solid green;
+}
+
+.grey-triangle {
+    width: 10px;
+    height: 5px;
+    background-color: grey;
 }
\ No newline at end of file
diff --git a/vue/gold-system/src/router/index.js b/vue/gold-system/src/router/index.js
index 89ce114..a4fcf30 100644
--- a/vue/gold-system/src/router/index.js
+++ b/vue/gold-system/src/router/index.js
@@ -4,6 +4,7 @@ const router=createRouter({
     history:createWebHashHistory(),
     routes:[
         {path:'/',redirect:"/workspace"},
+        {path:'/test',component:()=>import("../views/z.vue")},
         {
             path:'/index',component:()=>import("../views/index.vue"),
             children:[
diff --git a/vue/gold-system/src/views/workspace/index.vue b/vue/gold-system/src/views/workspace/index.vue
index b88e3d4..be6a906 100644
--- a/vue/gold-system/src/views/workspace/index.vue
+++ b/vue/gold-system/src/views/workspace/index.vue
@@ -1,396 +1,441 @@
 <script setup>
-import { all } from 'axios';
 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 from 'axios';
+import axios, { all } from 'axios';
 
 // 变量
 // 总览对象
-const totalData = ref({});
+const getSumCoin = ref({});
+const statistics = ref({});
+const getYearConsumeCoin = ref({});
+const getDayConsumeCoin = ref({});
+
+// 月份柱状图
+// 充值
+const payTotalRecharge = ref(0);
+const payTotalFree = ref(0);
+const payTotalTask = ref(0);
+const getMediuPayCoin = ref({});
+const payMonthCategory = ref([]);
+const payMonthRecharge = ref([]);
+const payMonthFree = ref([]);
+const payMonthTask = ref([]);
+// 消费
+const consumeTotalRecharge = ref(0);
+const consumeTotalFree = ref(0);
+const consumeTotalTask = ref(0);
+const getMediuConsumeCoin = ref({});
+const consumeMonthCategory = ref([]);
+const consumeMonthRecharge = ref([]);
+const consumeMonthFree = ref([]);
+const consumeMonthTask = ref([]);
+
+// 地区排名
+const areaSizePay = ref(0);
+const areaSizeConsume = ref(0);
+// 充值
+const getMediumAreaPay = ref({});
+const areaTotalPay = ref([]);
+const areaRechargePay = ref([]);
+const areaFreePay = ref([]);
+const areaTaskPay = ref([]);
+const payRank = ref([]);
+// 消费
+const getMediumAreaConsume = ref({});
+const areaTotalConsume = ref([]);
+const areaRechargeConsume = ref([]);
+const areaFreeConsume = ref([]);
+const areaTaskConsume = ref([]);
+const ConsumeRank = ref([]);
+// 金币概览
+const option3Data = ref([]);
+const option4Data = ref([]);
+const option5Data = ref([]);
+// 四大学科类别占比
+const platformData = ref([]);
+const allData = ref([]);
+const ERPData = ref([]);
+const HCData = ref([]);
+const LinkData = ref([]);
+const goldData = ref([]);
+
 // 搜索对象
-const getObj = ref({
-    goldType: '',
-    platform: 'all',
-});
+const goldTypePay = ref('全部类型');
+const goldTypeConsume = ref('全部类型');
+const platform = ref('全部平台');
 //默认高亮标签页
 const activeName = ref('recharge')
 // 金币分类选项
 const gold = [
     {
-        value: '',
+        value: '全部类型',
         label: '全部类型',
     },
     {
-        value: 'rechargeGole',
+        value: '充值金币',
         label: '充值金币',
     },
     {
-        value: 'freeGold',
+        value: '免费金币',
         label: '免费金币',
     },
     {
-        value: 'taskGold',
-        label: '付费金币',
+        value: '任务金币',
+        label: '任务金币',
     },
 ]
-// 图表
-// 指定图表的配置项和数据
-const option1 = {
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            // Use axis to trigger tooltip
-            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
-        }
-    },
-    legend: {},
-    grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-    },
-    xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    },
-    yAxis: {
-        type: 'value'
-
-    },
-    series: [
-        {
-            name: '充值金币',
-            color: '#35e383',
-            type: 'bar',
-            stack: 'total',
-            label: {
-                show: true
-            },
-            emphasis: {
-                focus: 'series'
-            },
-            data: [320, 302, 301, 334, 390, 330, 320]
-        },
-        {
-            name: '免费金币',
-            color: '#5f8ff5',
-            type: 'bar',
-            stack: 'total',
-            label: {
-                show: true
-            },
-            emphasis: {
-                focus: 'series'
-            },
-            data: [120, 132, 101, 134, 90, 230, 210]
-        },
-        {
-            name: '任务金币',
-            color: '#ffe733',
-            type: 'bar',
-            stack: 'total',
-            label: {
-                show: true
-            },
-            emphasis: {
-                focus: 'series'
-            },
-            data: [220, 182, 191, 234, 290, 330, 310]
-        }
-    ]
-};
-
-const option2 = {
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            // Use axis to trigger tooltip
-            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
-        }
-    },
-    legend: {},
-    grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-    },
-    xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    },
-    yAxis: {
-        type: 'value'
-
-    },
-    series: [
-        {
-            name: '充值金币',
-            color: '#35e383',
-            type: 'bar',
-            stack: 'total',
-            label: {
-                show: true
-            },
-            emphasis: {
-                focus: 'series'
-            },
-            data: [320, 302, 301, 334, 390, 330, 320]
-        },
-        {
-            name: '免费金币',
-            color: '#5f8ff5',
-            type: 'bar',
-            stack: 'total',
-            label: {
-                show: true
-            },
-            emphasis: {
-                focus: 'series'
-            },
-            data: [120, 132, 101, 134, 90, 230, 210]
-        },
-        {
-            name: '任务金币',
-            color: '#ffe733',
-            type: 'bar',
-            stack: 'total',
-            label: {
-                show: true
-            },
-            emphasis: {
-                focus: 'series'
-            },
-            data: [220, 182, 191, 234, 290, 330, 310]
-        }
-    ]
-};
-const option3 = {
-    tooltip: {
-        trigger: 'item'
-    },
-    legend: {
-        bottom: '1%',
-        left: 'center',
-        orient: 'vertical'
-    },
-    series: [
-        {
-            name: '全年累计金币数',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            avoidLabelOverlap: false,
-            label: {
-                show: false,
-                position: 'center'
-            },
-            emphasis: {
-                label: {
-                    show: true,
-                    fontSize: 40,
-                    fontWeight: 'bold'
-                }
-            },
-            labelLine: {
-                show: false
-            },
-            data: [
-                { value: 1048, name: '充值金币' },
-                { value: 735, name: '免费金币' },
-                { value: 580, name: '任务金币' },
-            ],
-            color: ['#57a5ff', '#7f29ff', '#f2d113']
-        }
-    ]
-};
-const option4 = {
-    tooltip: {
-        trigger: 'item'
-    },
-    legend: {
-        bottom: '1%',
-        left: 'center',
-        orient: 'vertical'
-    },
-    series: [
-        {
-            name: '全年累计消耗金币数',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            avoidLabelOverlap: false,
-            label: {
-                show: false,
-                position: 'center'
-            },
-            emphasis: {
-                label: {
-                    show: true,
-                    fontSize: 40,
-                    fontWeight: 'bold'
-                }
-            },
-            labelLine: {
-                show: false
-            },
-            data: [
-                { value: 1048, name: '充值金币' },
-                { value: 735, name: '免费金币' },
-                { value: 580, name: '任务金币' },
-            ],
-            color: ['#57a5ff', '#7f29ff', '#f2d113']
-        }
-    ]
-};
-const option5 = {
-    tooltip: {
-        trigger: 'item'
-    },
-    legend: {
-        bottom: '1%',
-        left: 'center',
-        orient: 'vertical'
-    },
-    grid: {
-        top: '10%', // 设置图表距离容器顶部的距离为10%，使饼图上移
-        bottom: '20%', // 因为图例在底部占了10%，这里适当调整底部距离
-        left: '10%',
-        right: '10%'
-    },
-    series: [
-        {
-            name: '当前金币余量',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            avoidLabelOverlap: false,
-            label: {
-                show: false,
-                position: 'center'
-            },
-            emphasis: {
-                label: {
-                    show: true,
-                    fontSize: 40,
-                    fontWeight: 'bold'
-                }
-            },
-            labelLine: {
-                show: false
-            },
-            data: [
-                { value: 1048, name: '充值金币' },
-                { value: 735, name: '免费金币' },
-                { value: 580, name: '任务金币' },
-            ],
-            color: ['#57a5ff', '#7f29ff', '#f2d113']
-        }
-    ]
-};
-const option6 = {
-    tooltip: {
-        trigger: 'item'
-    },
-    legend: {
-        top: '5%',
-        left: 'center'
-    },
-    series: [
-        {
-            name: '当前金币余量',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            avoidLabelOverlap: false,
-            label: {
-                show: false,
-                position: 'center'
-            },
-            emphasis: {
-                label: {
-                    show: true,
-                    fontSize: 40,
-                    fontWeight: 'bold'
-                }
-            },
-            labelLine: {
-                show: false
-            },
-            data: [
-                { value: 1048, name: 'Search Engine' },
-                { value: 735, name: 'Direct' },
-                { value: 580, name: 'Email' },
-                { value: 484, name: 'Union Ads' },
-                { value: 300, name: 'Video Ads' }
-            ]
-        }
-    ]
-};
 
 const list = ref([]);
 
 // 方法
 // 搜索方法
-const get = function () {
-    console.log(getObj.value);
-}
-// 搜索方法1（当前金币余量）
-const get1 = async function () {
+const get = async function () {
     try {
         // 发送POST请求
-        const result = await axios.post('http://192.168.8.147:10070/statistics/getSumCoin');
+        const result1 = await axios.post('http://192.168.8.147:10070/statistics/getSumCoin');
+        const result2 = await axios.post('http://192.168.8.174:10070/statistics/a');
+        const result3 = await axios.post('http://192.168.8.147:10070/statistics/getYearConsumeCoin');
+        const result4 = await axios.post('http://192.168.8.147:10070/statistics/getDayConsumeCoin');
+        const result5 = await axios.post('http://192.168.8.147:10070/statistics/getMediumAreaPay');
+        const result6 = await axios.post('http://192.168.8.147:10070/statistics/getMediumAreaConsume');
+        const result7 = await axios.post('http://192.168.8.147:10070/statistics/getMediuPayCoin');
+        const result8 = await axios.post('http://192.168.8.147:10070/statistics/getMediuConsumeCoin');
+        const result9 = await axios.post('http://192.168.8.174:10070/statistics/b');
 
         // 将响应结果存储到响应式数据中
-        console.log('请求成功', result);
-        // 存储总览数据
-        totalData.value = result.data.data;
-        console.log('totalData', totalData.value);
+        getSumCoin.value = result1.data.data;
+        statistics.value = result2.data.data;
+        getYearConsumeCoin.value = result3.data.data;
+        getDayConsumeCoin.value = result4.data.data;
+        getMediumAreaPay.value = result5.data.data;
+        areaSizePay.value = getMediumAreaPay.value.length;
+        getMediumAreaConsume.value = result6.data.data;
+        areaSizeConsume.value = getMediumAreaConsume.value.length;
+        getMediuPayCoin.value = result7.data.data;
+        getMediuConsumeCoin.value = result8.data.data;
+        platformData.value = result9.data.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);
+
+        // 月份
+        // 充值
+        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: '任务金币' },
+        ]
+
+        option4Data.value = [
+            { value: Math.abs(getYearConsumeCoin.value.todayRecharge), name: '充值金币' },
+            { value: Math.abs(getYearConsumeCoin.value.todayFree), name: '免费金币' },
+            { value: Math.abs(getYearConsumeCoin.value.todayTask), 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学科' },
+        ]
+        console.log('allData', allData.value);
     } catch (error) {
         console.log('请求失败', error);
         // 在这里可以处理错误逻辑，比如显示错误提示等
     }
 }
-// 全部平台
-const allPlatform = function () {
-    list.value = [
-        { value: 100, name: '项目1' },
-        { value: 100, name: '项目2' },
-        { value: 100, name: '项目3' },
-        { value: 100, name: '项目4' },
-        { value: 100, name: '项目5' }
-    ]
-    option6.series.data = list.value;
-    // 第4个饼状图 基于准备好的dom，初始化echarts实例
-    var pie = echarts.init(document.getElementById('goldCategory'));
-    // 使用刚指定的配置项和数据显示图表。
-    pie.setOption(option6);
-    getObj.value.platform = 'all';
-    get();
+// 金币类型
+// 充值
+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);
 }
-// HC
-const HomilyChart = function () {
-    list.value = [
-        { value: 100, name: '项目1' },
-        { value: 200, name: '项目2' },
-        { value: 300, name: '项目3' },
-        { value: 400, name: '项目4' },
-        { value: 500, name: '项目5' }
-    ]
-    getObj.value.platform = 'HomilyChart';
-    get();
+// 消费
+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);
 }
-// Link
-const HomilyLink = function () {
-    list.value = [
-        { value: 100, name: '项目1' },
-        { value: 200, name: '项目2' },
-        { value: 100, name: '项目3' },
-        { value: 200, name: '项目4' },
-        { value: 100, name: '项目5' }
-    ]
-    getObj.value.platform = 'HomilyLink';
-    get();
+// 点击标签页初始化
+const handleClick = function () {
+    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);
+    }
 }
+
 // 计算属性
 // 格式化数字
 const formatNum = function (val) {
@@ -402,43 +447,284 @@ const formatNum = function (val) {
     }
 };
 
-onMounted(function () {
-    get();
-    get1();
+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'
+            }
+        },
+        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
+                },
+                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);
 
     //第二个柱状图 基于准备好的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
+                },
+                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 = {
+        title: {
+            text: '全年累计金币数(个)\n',
+            subtext: statistics.value.totalSumCoin
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            bottom: '-2%',
+            left: 'center',
+            orient: 'vertical'
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['80%', '60%'],
+                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);
 
     // 第二个饼状图 基于准备好的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' + getYearConsumeCoin.value.yearsumCoin,
+                type: 'pie',
+                radius: ['80%', '60%'],
+                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);
 
     // 第三个饼状图 基于准备好的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' + getSumCoin.value.todayTotalCoin,
+                type: 'pie',
+                radius: ['80%', '60%'],
+                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);
 
-    // 第4个饼状图 基于准备好的dom，初始化echarts实例
-    var goldCategoryPie = echarts.init(document.getElementById('goldCategory'));
-
+    // 第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
+            }
+        ]
+    };
     // 使用刚指定的配置项和数据显示图表。
-    goldCategoryPie.setOption(option6);
-
+    all.setOption(option6);
 })
 
 
@@ -450,48 +736,100 @@ onMounted(function () {
             <el-card>
                 <p>当前金币余量
                 </p>
-                <p>
-                    {{ formatNum(totalData.todayTotalCoin) }}
+                <p class="head-mid-font">
+                    {{ formatNum(getSumCoin.todayTotalCoin) }}
                 </p>
                 <p>
-                    <span v-if="totalData.coinDifference > 0">
+                    <span v-if="getSumCoin.coinDifference > 0">
                         <div class="comparedWithYesterday">
-                            <span>较前一天 {{ formatNum(totalData.coinDifference) }}</span>
+                            <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
                             <span class="red-triangle" style="margin: 6px 0px 0px 7px;"></span>
                         </div>
                     </span>
-                    <span v-if="totalData.coinDifference < 0">
+                    <span v-if="getSumCoin.coinDifference < 0">
                         <div class="comparedWithYesterday">
-                            <span>较前一天 {{ formatNum(totalData.coinDifference) }}</span>
+                            <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(totalData.todayRecharge)}} 免费{{formatNum(totalData.todayFree)}} 任务{{formatNum(totalData.todayTask)}}</template>
+                <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>数据待填充</p>
-                <p>折合新币累计金额（数据待填充）</p>
-                <template #footer>昨日新增（），其中充值（）</template>
+                <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>数据待填充</p>
-                <p>消费（）；退款（）</p>
-                <template #footer>昨日新增消耗（）；消费（）；退款（）</template>
+                <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>数据待填充</p>
-                <p>周同比 （）% 日环比（）%</p>
-                <template #footer>昨日充值人数（），其中首充（）人</template>
+                <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)) }}
+                    ，其中首充（）人</template>
             </el-card>
         </el-col>
     </el-row>
@@ -500,6 +838,14 @@ onMounted(function () {
             <el-card>
                 <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                     <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>
@@ -519,39 +865,57 @@ onMounted(function () {
                             <div>
                                 <div class="ranking-header">
                                     <span style="margin-right: 40px;">门店金币充值排名</span>
-                                    <el-select v-model="getObj.goldType" placeholder="请选择金币类型" size="small"
-                                        style="width: 90px;">
+                                    <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">
+                                    <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">
+                                    <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">
+                                    <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">
+                                    <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">
+                                    <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">
-                                        <Bs1Circle />
-                                    </div>
-                                    <div class="ranking-item">
+                                    <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">
+                                    <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">
+                                    <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>
@@ -560,6 +924,14 @@ onMounted(function () {
                         </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>
@@ -579,41 +951,58 @@ onMounted(function () {
                             <div>
                                 <div class="ranking-header">
                                     <span style="margin-right: 40px;">门店金币消费排名</span>
-                                    <el-select v-model="getObj.goldType" placeholder="请选择金币类型" size="small"
-                                        style="width: 90px;">
+                                    <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">
+                                    <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">
+                                    <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">
+                                    <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">
+                                    <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">
+                                    <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">
-                                        <Bs1Circle />
-                                    </div>
-                                    <div class="ranking-item">
+                                    <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">
+                                    <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">
+                                    <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>
@@ -629,7 +1018,7 @@ onMounted(function () {
             <el-card>
                 <template #header>
                     <div class="card-header">
-                        <span>金币概览</span>
+                        <span class="tail-head">金币概览</span>
                     </div>
                 </template>
                 <div class="pie">
@@ -643,28 +1032,60 @@ onMounted(function () {
             <el-card>
                 <template #header>
                     <div class="card-header" style="display: flex;">
-                        <span>金币消耗类别占比</span>
-                        <el-radio-group v-model="getObj.platform" fill="#ffffff" text-color="#409eff" size="small"
-                            style="margin-left: auto;">
-                            <el-radio-button label="全部平台" value="all" @click="allPlatform()" />
-                            <el-radio-button label="HC" value="hc" @click="HomilyChart()" />
-                            <el-radio-button label="Link" value="link" @click="HomilyLink()" />
+                        <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>
-                <div id="goldCategory" style="width: 600px;height:400px;"></div>
+                <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>
 </template>
 
 <style scoped>
+.head-mid-font {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.mid-head-font{
+    font-weight: bold;
+    color: #5eb7ff;
+}
+
+.tail-head {
+    font-weight: bold;
+}
+
 .comparedWithYesterday {
     display: flex;
 }
 
 .ranking-item {
     margin-bottom: 10px;
+    display: flex;
 }
 
 .ranking-header {
diff --git a/vue/gold-system/src/views/z.vue b/vue/gold-system/src/views/z.vue
new file mode 100644
index 0000000..660bbdf
--- /dev/null
+++ b/vue/gold-system/src/views/z.vue
@@ -0,0 +1,104 @@
+<script setup>
+import { all } from 'axios';
+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 from 'axios';
+
+// 变量
+const option4Data = ref([]);
+const a1=ref(1000);
+const a2=ref(2000);
+const a3=ref(3000);
+const a4=ref(4000);
+onMounted(async function () {
+    option4Data.value = [
+        { value: a1.value, name: '1000金币' },
+        { value: a2.value, name: '2000金币' },
+        { value: a3.value, name: '3000金币' },
+        { value: a4.value, name: '4000金币' },
+    ];
+    // 第一个柱状图 基于准备好的dom，初始化echarts实例
+    var rechargeBar = echarts.init(document.getElementById('main'));
+
+    const option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            bottom: '-2%',
+            left: 'center',
+            orient: 'vertical'
+        },
+        grid: {
+            top: '0%', // 设置图表距离容器顶部的距离为10%，使饼图上移
+        },
+        series: [
+            {
+                name: '全年累计消耗金币数(个)\n10000',
+                type: 'pie',
+                radius: ['80%', '60%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: true,
+                    position: 'center',
+                    formatter: '{a}',
+                    fontSize: 15,
+                    fontWeight: 'bold'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: option4Data.value,
+                color: ['#57a5ff', '#7f29ff', '#f2d113']
+            }
+        ]
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    rechargeBar.setOption(option);
+})
+
+
+</script>
+
+<template>
+    <div>zzz</div>
+    <div id="main" style="width: 600px;height:400px;"></div>
+</template>
+
+<style scoped>
+.comparedWithYesterday {
+    display: flex;
+}
+
+.ranking-item {
+    margin-bottom: 10px;
+}
+
+.ranking-header {
+    margin-bottom: 10px;
+    display: flex;
+}
+
+.goldCategory {
+    margin-right: 20px;
+    display: flex;
+}
+
+.bar {
+    display: flex;
+}
+
+.pie {
+    display: flex;
+}
+
+.el-row {
+    margin-bottom: 20px;
+}
+
+.el-radio-button {
+    border: 1px solid grey;
+}
+</style>
\ No newline at end of file