donghaolin
/
gold-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加了工作台的加载动画

Hongxilin
hongxilin 5 months ago
parent
f9a34b23de
commit
8eaf01fe7f
2 changed files with 332 additions and 315 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      vue/gold-system/package.json
  2. 645
      vue/gold-system/src/views/workspace/index.vue

2
vue/gold-system/package.json
View File

@ -4,7 +4,7 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host 0.0.0.0",
"build": "vue-tsc -b && vite build",
"preview": "vite preview",
"serve": "vite - service serve --host 0.0.0.0 --port 8080"

645
vue/gold-system/src/views/workspace/index.vue
View File

@ -6,6 +6,8 @@ import { Bs1CircleFill, Bs2CircleFill, Bs3CircleFill, Bs4Circle, Bs5Circle, Bs6C
import axios, { all } from 'axios';
// 变量
// 加载对象
const loading = ref(true)
// 总览对象
const getSumCoin = ref({});
const statistics = ref({});
@ -136,13 +138,13 @@ const get = async function () {
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)=>{
payMonthRecharge.value.forEach((number) => {
payTotalRecharge.value += number
})
payMonthFree.value.forEach((number)=>{
payMonthFree.value.forEach((number) => {
payTotalFree.value += number
})
payMonthTask.value.forEach((number)=>{
payMonthTask.value.forEach((number) => {
payTotalTask.value += number
})
console.log('payMonthCategory', payMonthCategory.value);
@ -157,13 +159,13 @@ const get = async function () {
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)=>{
consumeMonthRecharge.value.forEach((number) => {
consumeTotalRecharge.value += number
})
consumeMonthFree.value.forEach((number)=>{
consumeMonthFree.value.forEach((number) => {
consumeTotalFree.value += number
})
consumeMonthTask.value.forEach((number)=>{
consumeMonthTask.value.forEach((number) => {
consumeTotalTask.value += number
})
console.log('consumeMonthCategory', consumeMonthCategory.value);
@ -293,6 +295,9 @@ const get = async function () {
{ 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;
console.log('allData', allData.value);
} catch (error) {
console.log('请求失败', error);
@ -728,337 +733,349 @@ onMounted(async function () {
</script>
<template>
<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">
<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 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">
<el-tab-pane label="金币充值" name="recharge">
<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>
合计：充值金币：
<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="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 class="goldCategory">
<span class="light-green-dot"></span>
<span>充值金币</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 class="goldCategory">
<span class="blue-dot"></span>
<span>免费金币</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 class="goldCategory">
<span class="yellow-dot"></span>
<span>任务金币</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>
<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 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 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>
</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>
</el-tab-pane>
<el-tab-pane label="金币消费" name="consume">
<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>
合计：充值金币：
<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>
<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 class="bar">
<div id="consume" style="width: 1200px;height:400px;"></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 class="goldCategory">
<span class="light-green-dot"></span>
<span>充值金币</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 class="goldCategory">
<span class="blue-dot"></span>
<span>免费金币</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 class="goldCategory">
<span class="yellow-dot"></span>
<span>任务金币</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>
<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 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 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>
</div>
</div>
</el-tab-pane>
</el-tabs>
</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>
</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>
</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-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>
</el-card>
</el-col>
</el-row>
</div>
</template>
<style scoped>
@ -1067,7 +1084,7 @@ onMounted(async function () {
font-weight: bold;
}
.mid-head-font{
.mid-head-font {
font-weight: bold;
color: #5eb7ff;
}

Write Preview
Loading…
Cancel
Save