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

Merge branch 'master' of http://39.101.133.168:8807/donghaolin/gold-system

Hongxilin
donghaolin 5 months ago
parent
9013f7db8e 968054eda1
commit
7ecb3edff5
3 changed files with 376 additions and 374 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. 97
      vue/gold-system/src/views/usergold/index.vue
  3. 651
      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"

97
vue/gold-system/src/views/usergold/index.vue
View File

@ -175,6 +175,35 @@ const get7Days = function () {
get();
};
// 验证跳转输入框的数字是否合法
const checkNumber = function () {
if (typeof parseInt(getObj.value.pageNum) === "number") {
console.log(
"总共有多少页" + Math.ceil(total.value / getObj.value.pageSize)
);
if (
getObj.value.pageNum > 0 &&
getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
) {
console.log("输入的数字合法");
get();
} else {
//提示
ElMessage({
type: "error",
message: "请检查输入内容",
});
}
} else {
//提示
ElMessage({
type: "error",
message: "请检查输入内容",
});
}
};
// 挂载
onMounted(async function () {
await get();
@ -188,38 +217,18 @@ onMounted(async function () {
<div class="head-card">
<div class="head-card-element">
<el-text class="mx-1" size="large">精网号：</el-text>
<el-input
v-model="detail.jwcode"
style="width: 240px"
placeholder="请输入精网号"
clearable
/>
<el-input v-model="detail.jwcode" style="width: 240px" placeholder="请输入精网号" clearable />
</div>
<div class="head-card-element">
<el-text class="mx-1" size="large">更新类型：</el-text>
<el-select
v-model="detail.updateType"
placeholder="请选择更新类型"
size="large"
style="width: 240px"
>
<el-option
v-for="item in updateType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="detail.updateType" placeholder="请选择更新类型" size="large" style="width: 240px">
<el-option v-for="item in updateType" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="head-card-element">
<el-text class="mx-1" size="large">更新时间：</el-text>
<el-date-picker
v-model="getTime"
type="daterange"
range-separator="至"
start-placeholder="起始时间"
end-placeholder="结束时间"
/>
<el-date-picker v-model="getTime" type="daterange" range-separator="至" start-placeholder="起始时间"
end-placeholder="结束时间" />
</div>
<div class="head-card-btn">
<el-button @click="reset()">重置</el-button>
@ -263,42 +272,17 @@ onMounted(async function () {
<!-- 分页 -->
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
:page-size="getObj.pageSize"
layout="slot"
:total="total"
>
<el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total">
<div>共{{ total }}条,每页</div>
<el-select
v-model="getObj.pageSize"
class="page-size"
@change="get()"
style="width: 80px"
>
<el-option
v-for="item in [5, 6, 7, 8, 9, 10]"
:key="item"
:label="item"
:value="item"
></el-option>
<el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px">
<el-option v-for="item in [5, 6, 7, 8, 9, 10]" :key="item" :label="item" :value="item"></el-option>
</el-select>
<div>条</div>
</el-pagination>
<el-pagination
background
layout="prev, pager, next,slot"
:page-size="getObj.pageSize"
:total="total"
:current-page="getObj.pageNum"
@current-change="get"
>
<el-pagination background layout="prev, pager, next,slot" :page-size="getObj.pageSize" :total="total"
:current-page="getObj.pageNum" @current-change="get">
<div>跳至</div>
<el-input
v-model="getObj.pageNum"
style="width: 40px"
@change="checkNumber"
/>
<el-input v-model="getObj.pageNum" style="width: 40px" @change="checkNumber" />
<div>页</div>
</el-pagination>
</div>
@ -311,6 +295,7 @@ onMounted(async function () {
.pagination {
display: flex;
}
.status {
display: flex;
}

651
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);
@ -608,7 +613,7 @@ onMounted(async function () {
{
name: '全年累计金币数(个)\n' + statistics.value.totalSumCoin,
type: 'pie',
radius: ['80%', '60%'],
radius: ['60%', '80%'],
avoidLabelOverlap: false,
label: {
show: true,
@ -646,7 +651,7 @@ onMounted(async function () {
{
name: '全年累计消耗金币数(个)\n' + getYearConsumeCoin.value.yearsumCoin,
type: 'pie',
radius: ['80%', '60%'],
radius: ['60%', '80%'],
avoidLabelOverlap: false,
label: {
show: true,
@ -684,7 +689,7 @@ onMounted(async function () {
{
name: '当前金币余量(个)\n' + getSumCoin.value.todayTotalCoin,
type: 'pie',
radius: ['80%', '60%'],
radius: ['60%', '80%'],
avoidLabelOverlap: false,
label: {
show: true,
@ -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