|
|
|
@ -2,16 +2,7 @@ |
|
|
|
import * as echarts from "echarts"; |
|
|
|
import { ref, onMounted, reactive, computed } from "vue"; |
|
|
|
import { VscInfo } from "vue-icons-plus/vsc"; |
|
|
|
import { |
|
|
|
Bs1CircleFill, |
|
|
|
Bs2CircleFill, |
|
|
|
Bs3CircleFill, |
|
|
|
Bs4Circle, |
|
|
|
Bs5Circle, |
|
|
|
Bs6Circle, |
|
|
|
Bs7Circle, |
|
|
|
Bs8Circle, |
|
|
|
} from "vue-icons-plus/bs"; |
|
|
|
import * as bs from "vue-icons-plus/bs"; |
|
|
|
import axios, { all } from "axios"; |
|
|
|
import API from "../../api/index"; |
|
|
|
|
|
|
|
@ -45,22 +36,12 @@ const consumeMonthFree = ref([]); |
|
|
|
const consumeMonthTask = ref([]); |
|
|
|
|
|
|
|
// 地区排名 |
|
|
|
const areaSizePay = ref(0); |
|
|
|
const areaSizeConsume = ref(0); |
|
|
|
// 充值 |
|
|
|
const getMediumAreaPay = ref({}); |
|
|
|
const areaTotalPay = ref([]); |
|
|
|
const areaRechargePay = ref([]); |
|
|
|
const areaFreePay = ref([]); |
|
|
|
const areaTaskPay = ref([]); |
|
|
|
const payRank = ref([]); |
|
|
|
// 消费 |
|
|
|
const getMediumAreaConsume = ref({}); |
|
|
|
const areaTotalConsume = ref([]); |
|
|
|
const areaRechargeConsume = ref([]); |
|
|
|
const areaFreeConsume = ref([]); |
|
|
|
const areaTaskConsume = ref([]); |
|
|
|
const ConsumeRank = ref([]); |
|
|
|
const getAreaRankObj = ref({ |
|
|
|
updateType: "充值" |
|
|
|
}); |
|
|
|
const getMediumArea = ref([]); |
|
|
|
const areaRank = ref([]); |
|
|
|
|
|
|
|
// 金币概览 |
|
|
|
const option3Data = ref([]); |
|
|
|
const option4Data = ref([]); |
|
|
|
@ -74,8 +55,7 @@ const LinkData = ref([]); |
|
|
|
const goldData = ref([]); |
|
|
|
|
|
|
|
// 搜索对象 |
|
|
|
const goldTypePay = ref("全部类型"); |
|
|
|
const goldTypeConsume = ref("全部类型"); |
|
|
|
const goldType = ref("全部类型"); |
|
|
|
const platform = ref("全部平台"); |
|
|
|
//默认高亮标签页 |
|
|
|
const activeName = ref("recharge"); |
|
|
|
@ -105,6 +85,8 @@ const list = ref([]); |
|
|
|
// 搜索方法 |
|
|
|
const get = async function () { |
|
|
|
try { |
|
|
|
|
|
|
|
getAreaRank(); |
|
|
|
// 发送POST请求 |
|
|
|
const result1 = await API.post( |
|
|
|
"http://192.168.8.93:10010/statistics/getSumCoin", |
|
|
|
@ -122,14 +104,15 @@ const get = async function () { |
|
|
|
"http://192.168.8.93:10010/statistics/getDayConsumeCoin", |
|
|
|
{} |
|
|
|
); |
|
|
|
const result5 = await API.post( |
|
|
|
"http://192.168.8.147:10010/statistics/getMediumAreaPay", |
|
|
|
{} |
|
|
|
); |
|
|
|
const result6 = await API.post( |
|
|
|
"http://192.168.8.147:10010/statistics/getMediumAreaConsume", |
|
|
|
{} |
|
|
|
); |
|
|
|
// const result5 = await API.post( |
|
|
|
// "http://192.168.8.147:10010/statistics/getMediumAreaPay", |
|
|
|
// {} |
|
|
|
// ); |
|
|
|
// const result6 = await API.post( |
|
|
|
// "http://192.168.8.147:10010/statistics/getMediumAreaConsume", |
|
|
|
// {} |
|
|
|
// ); |
|
|
|
|
|
|
|
const result7 = await API.post( |
|
|
|
"http://192.168.8.93:10010/statistics/getMediuPayCoin", |
|
|
|
{} |
|
|
|
@ -148,10 +131,7 @@ const get = async function () { |
|
|
|
statistics.value = result2.data; |
|
|
|
getYearConsumeCoin.value = result3.data; |
|
|
|
getDayConsumeCoin.value = result4.data; |
|
|
|
getMediumAreaPay.value = result5.data; |
|
|
|
areaSizePay.value = getMediumAreaPay.value.length; |
|
|
|
getMediumAreaConsume.value = result6.data; |
|
|
|
areaSizeConsume.value = getMediumAreaConsume.value.length; |
|
|
|
|
|
|
|
getMediuPayCoin.value = result7.data; |
|
|
|
getMediuConsumeCoin.value = result8.data; |
|
|
|
platformData.value = result9.data; |
|
|
|
@ -160,10 +140,7 @@ const get = async function () { |
|
|
|
console.log("statistics", statistics.value); |
|
|
|
console.log("getYearConsumeCoin", getYearConsumeCoin.value); |
|
|
|
console.log("getDayConsumeCoin", getDayConsumeCoin.value); |
|
|
|
console.log("getMediumAreaPay", getMediumAreaPay.value); |
|
|
|
console.log("areaSizePay", areaSizePay.value); |
|
|
|
console.log("getMediumAreaConsume", getMediumAreaConsume.value); |
|
|
|
console.log("areaSizeConsume", areaSizeConsume.value); |
|
|
|
|
|
|
|
console.log("getMediuPayCoin", getMediuPayCoin.value); |
|
|
|
console.log("getMediuConsumeCoin", getMediuConsumeCoin.value); |
|
|
|
console.log("platformData", platformData.value); |
|
|
|
@ -227,67 +204,7 @@ const get = async function () { |
|
|
|
console.log("consumeTotalRecharge", consumeTotalRecharge.value); |
|
|
|
console.log("consumeTotalFree", consumeTotalFree.value); |
|
|
|
console.log("consumeTotalTask", consumeTotalTask.value); |
|
|
|
// 总 |
|
|
|
areaTotalPay.value = getMediumAreaPay.value.map((item) => ({ |
|
|
|
value: Math.abs(item.todayTotalCoin), |
|
|
|
name: item.area, |
|
|
|
})); |
|
|
|
areaTotalPay.value.sort((a, b) => b.value - a.value); |
|
|
|
console.log("areaTotalPay", areaTotalPay.value); |
|
|
|
// 充值 |
|
|
|
areaRechargePay.value = getMediumAreaPay.value.map((item) => ({ |
|
|
|
value: Math.abs(item.totalRecharge), |
|
|
|
name: item.area, |
|
|
|
})); |
|
|
|
areaRechargePay.value.sort((a, b) => b.value - a.value); |
|
|
|
console.log("areaRechargePay", areaRechargePay.value); |
|
|
|
// 免费 |
|
|
|
areaFreePay.value = getMediumAreaPay.value.map((item) => ({ |
|
|
|
value: Math.abs(item.totalFree), |
|
|
|
name: item.area, |
|
|
|
})); |
|
|
|
areaFreePay.value.sort((a, b) => b.value - a.value); |
|
|
|
console.log("areaFreePay", areaFreePay.value); |
|
|
|
// 任务 |
|
|
|
areaTaskPay.value = getMediumAreaPay.value.map((item) => ({ |
|
|
|
value: Math.abs(item.totalTask), |
|
|
|
name: item.area, |
|
|
|
})); |
|
|
|
areaTaskPay.value.sort((a, b) => b.value - a.value); |
|
|
|
console.log("areaTaskPay", areaTaskPay.value); |
|
|
|
// 充值排名初始化 |
|
|
|
payRank.value = areaTotalPay.value; |
|
|
|
// 消费 |
|
|
|
// 总 |
|
|
|
areaTotalConsume.value = getMediumAreaConsume.value.map((item) => ({ |
|
|
|
value: Math.abs(item.todayTotalCoin), |
|
|
|
name: item.area, |
|
|
|
})); |
|
|
|
areaTotalConsume.value.sort((a, b) => b.value - a.value); |
|
|
|
console.log("areaTotalConsume", areaTotalConsume.value); |
|
|
|
// 充值 |
|
|
|
areaRechargeConsume.value = getMediumAreaConsume.value.map((item) => ({ |
|
|
|
value: Math.abs(item.totalRecharge), |
|
|
|
name: item.area, |
|
|
|
})); |
|
|
|
areaRechargeConsume.value.sort((a, b) => b.value - a.value); |
|
|
|
console.log("areaRechargeConsume", areaRechargeConsume.value); |
|
|
|
// 免费 |
|
|
|
areaFreeConsume.value = getMediumAreaConsume.value.map((item) => ({ |
|
|
|
value: Math.abs(item.totalFree), |
|
|
|
name: item.area, |
|
|
|
})); |
|
|
|
areaFreeConsume.value.sort((a, b) => b.value - a.value); |
|
|
|
console.log("areaFreeConsume", areaFreeConsume.value); |
|
|
|
// 任务 |
|
|
|
areaTaskConsume.value = getMediumAreaConsume.value.map((item) => ({ |
|
|
|
value: Math.abs(item.totalTask), |
|
|
|
name: item.area, |
|
|
|
})); |
|
|
|
areaTaskConsume.value.sort((a, b) => b.value - a.value); |
|
|
|
console.log("areaTaskConsume", areaTaskConsume.value); |
|
|
|
// 消费排名初始化 |
|
|
|
ConsumeRank.value = areaTotalConsume.value; |
|
|
|
|
|
|
|
|
|
|
|
option3Data.value = [ |
|
|
|
{ |
|
|
|
@ -513,44 +430,79 @@ const get = async function () { |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
}; |
|
|
|
// 获取门店排名 |
|
|
|
const getAreaRank = async function () { |
|
|
|
const result = await API.post( |
|
|
|
"http://192.168.8.93:10010/statistics/getMee", |
|
|
|
getAreaRankObj.value |
|
|
|
); |
|
|
|
|
|
|
|
getMediumArea.value = result.data; |
|
|
|
|
|
|
|
console.log("getMediumArea", getMediumArea.value); |
|
|
|
|
|
|
|
if (getAreaRankObj.value.type == '充值金币') { |
|
|
|
areaRank.value = getMediumArea.value.map((item) => ({ |
|
|
|
value: Math.abs(item.rechargeSumCoin), |
|
|
|
name: item.area + '-' + item.store, |
|
|
|
})); |
|
|
|
} else if (getAreaRankObj.value.type == '免费金币') { |
|
|
|
areaRank.value = getMediumArea.value.map((item) => ({ |
|
|
|
value: Math.abs(item.freeSumCoin), |
|
|
|
name: item.area + '-' + item.store, |
|
|
|
})); |
|
|
|
} else if (getAreaRankObj.value.type == '任务金币') { |
|
|
|
areaRank.value = getMediumArea.value.map((item) => ({ |
|
|
|
value: Math.abs(item.taskSumCoin), |
|
|
|
name: item.area + '-' + item.store, |
|
|
|
})); |
|
|
|
} else { |
|
|
|
areaRank.value = getMediumArea.value.map((item) => ({ |
|
|
|
value: Math.abs(item.totalRechargeSum), |
|
|
|
name: item.area + '-' + item.store, |
|
|
|
})); |
|
|
|
} |
|
|
|
|
|
|
|
console.log("areaRank", areaRank.value); |
|
|
|
} |
|
|
|
|
|
|
|
// 金币类型 |
|
|
|
// 充值 |
|
|
|
const changeGoldTypePay = function () { |
|
|
|
console.log("changeGoldTypePay", goldTypePay.value); |
|
|
|
payRank.value = {}; |
|
|
|
if (goldTypePay.value == "全部类型") { |
|
|
|
payRank.value = areaTotalPay.value; |
|
|
|
console.log("这是中国过过过过", payRank.value); |
|
|
|
} else if (goldTypePay.value == "充值金币") { |
|
|
|
payRank.value = areaRechargePay.value; |
|
|
|
} else if (goldTypePay.value == "免费金币") { |
|
|
|
payRank.value = areaFreePay.value; |
|
|
|
} else if (goldTypePay.value == "任务金币") { |
|
|
|
payRank.value = areaTaskPay.value; |
|
|
|
|
|
|
|
const findBsComponent = function (index) { |
|
|
|
let iconName; |
|
|
|
if (index < 3) { |
|
|
|
iconName = `bs.Bs${index + 1}CircleFill`; // 根据index拼接图标名称 |
|
|
|
} else { |
|
|
|
iconName = `bs.Bs${index + 1}Circle`; // 根据index拼接图标名称 |
|
|
|
} |
|
|
|
console.log("payRank", payRank.value); |
|
|
|
}; |
|
|
|
// 消费 |
|
|
|
const changeGoldTypeConsume = function () { |
|
|
|
console.log("changeGoldTypeConsume", goldTypeConsume.value); |
|
|
|
ConsumeRank.value = {}; |
|
|
|
if (goldTypeConsume.value == "全部类型") { |
|
|
|
ConsumeRank.value = areaTotalConsume.value; |
|
|
|
} else if (goldTypeConsume.value == "充值金币") { |
|
|
|
ConsumeRank.value = areaRechargeConsume.value; |
|
|
|
} else if (goldTypeConsume.value == "免费金币") { |
|
|
|
ConsumeRank.value = areaFreeConsume.value; |
|
|
|
} else if (goldTypeConsume.value == "任务金币") { |
|
|
|
ConsumeRank.value = areaTaskConsume.value; |
|
|
|
return eval(iconName); // 动态执行图标名称，返回图标组件 |
|
|
|
} |
|
|
|
console.log("ConsumeRank", ConsumeRank.value); |
|
|
|
// 门店排名下拉框 |
|
|
|
const changeGoldType = function () { |
|
|
|
console.log("changeGoldType", goldType.value); |
|
|
|
if (goldType.value == "全部类型") { |
|
|
|
getAreaRankObj.value.type = ""; |
|
|
|
} else if (goldType.value == "充值金币") { |
|
|
|
getAreaRankObj.value.type = "充值金币"; |
|
|
|
} else if (goldType.value == "免费金币") { |
|
|
|
getAreaRankObj.value.type = "免费金币"; |
|
|
|
} else if (goldType.value == "任务金币") { |
|
|
|
getAreaRankObj.value.type = "任务金币"; |
|
|
|
} |
|
|
|
getAreaRank(); |
|
|
|
}; |
|
|
|
// 点击标签页初始化 |
|
|
|
const handleClick = function () { |
|
|
|
goldTypePay.value = "全部类型"; |
|
|
|
goldTypeConsume.value = "全部类型"; |
|
|
|
}; |
|
|
|
const handleChange = function () { |
|
|
|
if (activeName.value == 'recharge') { |
|
|
|
getAreaRankObj.value.updateType = '充值'; |
|
|
|
|
|
|
|
} else { |
|
|
|
getAreaRankObj.value.updateType = '消费'; |
|
|
|
} |
|
|
|
getAreaRankObj.value.type = ""; |
|
|
|
goldType.value = "全部类型"; |
|
|
|
getAreaRank(); |
|
|
|
} |
|
|
|
// 切换平台 |
|
|
|
const changePlatform = function () { |
|
|
|
console.log("changePlatform", platform.value); |
|
|
|
@ -812,6 +764,7 @@ onMounted(async function () { |
|
|
|
const option3 = { |
|
|
|
tooltip: { |
|
|
|
trigger: "item", |
|
|
|
position: ['15%', '-3%'] |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
bottom: "-2%", |
|
|
|
@ -847,6 +800,7 @@ onMounted(async function () { |
|
|
|
const option4 = { |
|
|
|
tooltip: { |
|
|
|
trigger: "item", |
|
|
|
position: ['15%', '-3%'] |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
bottom: "-2%", |
|
|
|
@ -887,6 +841,7 @@ onMounted(async function () { |
|
|
|
const option5 = { |
|
|
|
tooltip: { |
|
|
|
trigger: "item", |
|
|
|
position: ['15%', '-3%'] |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
bottom: "-2%", |
|
|
|
@ -954,37 +909,26 @@ onMounted(async function () { |
|
|
|
<span v-if="getSumCoin.coinDifference > 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span> |
|
|
|
<span |
|
|
|
class="red-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
<span class="red-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="getSumCoin.coinDifference < 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span> |
|
|
|
<span |
|
|
|
class="green-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
<span class="green-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="getSumCoin.coinDifference == 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span> |
|
|
|
<span |
|
|
|
class="grey-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
<span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
<template #footer |
|
|
|
>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{ |
|
|
|
<template #footer>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{ |
|
|
|
formatNum(getSumCoin.todayFree) |
|
|
|
}} |
|
|
|
任务{{ formatNum(getSumCoin.todayTask) }}</template |
|
|
|
> |
|
|
|
任务{{ formatNum(getSumCoin.todayTask) }}</template> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
@ -996,8 +940,7 @@ onMounted(async function () { |
|
|
|
<p> |
|
|
|
折合新币累计金额 {{ formatNum(Math.abs(statistics.totalSumCoin)) }} |
|
|
|
</p> |
|
|
|
<template #footer |
|
|
|
>昨日新增 |
|
|
|
<template #footer>昨日新增 |
|
|
|
{{ formatNum(Math.abs(statistics.totalYesterdaySumCoin)) }} |
|
|
|
，其中充值 |
|
|
|
{{ formatNum(Math.abs(statistics.rechargeYesterdaySumCoin)) }} |
|
|
|
@ -1014,12 +957,10 @@ onMounted(async function () { |
|
|
|
消费 {{ formatNum(Math.abs(getYearConsumeCoin.yearConsumeCoin)) }}; |
|
|
|
退款 {{ formatNum(Math.abs(getYearConsumeCoin.yearRefundCoin)) }} |
|
|
|
</p> |
|
|
|
<template #footer |
|
|
|
>昨日新增消耗 |
|
|
|
<template #footer>昨日新增消耗 |
|
|
|
{{ formatNum(Math.abs(getDayConsumeCoin.daysumCoin)) }} ; 消费 |
|
|
|
{{ formatNum(Math.abs(getDayConsumeCoin.dayConsumeCoin)) }} ; 退款 |
|
|
|
{{ formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin)) }}</template |
|
|
|
> |
|
|
|
{{ formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin)) }}</template> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
@ -1032,78 +973,53 @@ onMounted(async function () { |
|
|
|
<span v-if="statistics.weekOverWeekRate > 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>周同比 {{ statistics.weekOverWeekRate }}%</span> |
|
|
|
<span |
|
|
|
class="red-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
<span class="red-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="statistics.weekOverWeekRate < 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>周同比 {{ statistics.weekOverWeekRate }}%</span> |
|
|
|
<span |
|
|
|
class="green-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
<span class="green-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="statistics.weekOverWeekRate == 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>周同比 {{ statistics.weekOverWeekRate }}%</span> |
|
|
|
<span |
|
|
|
class="grey-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
<span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span> </span> |
|
|
|
<span v-if="statistics.dayOverDayRate > 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span> 日环比{{ statistics.dayOverDayRate }}%</span> |
|
|
|
<span |
|
|
|
class="red-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
<span class="red-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="statistics.dayOverDayRate < 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span> 日环比{{ statistics.dayOverDayRate }}%</span> |
|
|
|
<span |
|
|
|
class="green-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
<span class="green-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="statistics.dayOverDayRate == 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span> 日环比{{ statistics.dayOverDayRate }}%</span> |
|
|
|
<span |
|
|
|
class="grey-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
<span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
<template #footer |
|
|
|
>昨日充值人数 |
|
|
|
<template #footer>昨日充值人数 |
|
|
|
{{ formatNum(Math.abs(statistics.rechargeCountYesterday)) }} |
|
|
|
，其中首充 |
|
|
|
{{ formatNum(Math.abs(statistics.firstRechargeCountYesterday)) }} |
|
|
|
人</template |
|
|
|
> |
|
|
|
人</template> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col> |
|
|
|
<el-card> |
|
|
|
<el-tabs |
|
|
|
v-model="activeName" |
|
|
|
class="demo-tabs" |
|
|
|
@tab-click="handleClick" |
|
|
|
@tab-change="handleChange" |
|
|
|
> |
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" @tab-change="handleChange"> |
|
|
|
<el-tab-pane label="金币充值" name="recharge"> |
|
|
|
<div> |
|
|
|
合计：充值金币： |
|
|
|
@ -1116,8 +1032,8 @@ onMounted(async function () { |
|
|
|
<span class="mid-head-font">{{ formatNum(payTotalTask) }}</span> |
|
|
|
</div> |
|
|
|
<div class="bar"> |
|
|
|
<div id="recharge" style="width: 1200px; height: 400px"></div> |
|
|
|
<div> |
|
|
|
<div id="recharge" style="width: 1150px; height: 400px"></div> |
|
|
|
<div style="width: 100px;"> |
|
|
|
<div class="goldCategory"> |
|
|
|
<span class="light-green-dot"></span> |
|
|
|
<span>充值金币</span> |
|
|
|
@ -1131,106 +1047,27 @@ onMounted(async function () { |
|
|
|
<span>任务金币</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div style="width: 310px;"> |
|
|
|
<div class="ranking-header"> |
|
|
|
<span style="margin-right: 40px">门店金币充值排名</span> |
|
|
|
<el-select |
|
|
|
v-model="goldTypePay" |
|
|
|
placeholder="请选择金币类型" |
|
|
|
size="small" |
|
|
|
style="width: 90px" |
|
|
|
@change="changeGoldTypePay" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in gold" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
<span style="margin-right: 90px; width: 150px;">门店金币充值排名</span> |
|
|
|
<el-select v-model="goldType" placeholder="请选择金币类型" size="small" style="width: 90px" |
|
|
|
@change="changeGoldType"> |
|
|
|
<el-option v-for="item in gold" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="ranking-item" v-if="areaSizePay >= 1"> |
|
|
|
<Bs1CircleFill /> |
|
|
|
<el-scrollbar height="360px"> |
|
|
|
<div v-for="(item, index) in areaRank" :key="item" class="ranking-item"> |
|
|
|
<!-- <component :is="findBsComponent(index)" /> --> |
|
|
|
<span style="width: 15px; text-align: center;">{{ index + 1 }}</span> |
|
|
|
<span style="margin-left: 10px">{{ |
|
|
|
payRank[0].name |
|
|
|
item.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) |
|
|
|
formatNum(item.value) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
</el-scrollbar> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -1251,8 +1088,8 @@ onMounted(async function () { |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="bar"> |
|
|
|
<div id="consume" style="width: 1200px; height: 400px"></div> |
|
|
|
<div> |
|
|
|
<div id="consume" style="width: 1150px; height: 400px"></div> |
|
|
|
<div style="width: 100px;"> |
|
|
|
<div class="goldCategory"> |
|
|
|
<span class="light-green-dot"></span> |
|
|
|
<span>充值金币</span> |
|
|
|
@ -1266,106 +1103,27 @@ onMounted(async function () { |
|
|
|
<span>任务金币</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div style="width: 310px;"> |
|
|
|
<div class="ranking-header"> |
|
|
|
<span style="margin-right: 40px">门店金币消费排名</span> |
|
|
|
<el-select |
|
|
|
v-model="goldTypeConsume" |
|
|
|
placeholder="请选择金币类型" |
|
|
|
size="small" |
|
|
|
style="width: 90px" |
|
|
|
@change="changeGoldTypeConsume" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in gold" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
<span style="margin-right: 90px; width: 150px;">门店金币消费排名</span> |
|
|
|
<el-select v-model="goldType" placeholder="请选择金币类型" size="small" style="width: 90px" |
|
|
|
@change="changeGoldType"> |
|
|
|
<el-option v-for="item in gold" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="ranking-item" v-if="areaSizeConsume >= 1"> |
|
|
|
<Bs1CircleFill /> |
|
|
|
<span style="margin-left: 10px">{{ |
|
|
|
ConsumeRank[0].name |
|
|
|
}}</span> |
|
|
|
<span style="margin-left: auto">{{ |
|
|
|
formatNum(ConsumeRank[0].value) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="ranking-item" v-if="areaSizeConsume >= 2"> |
|
|
|
<Bs2CircleFill /> |
|
|
|
<span style="margin-left: 10px">{{ |
|
|
|
ConsumeRank[1].name |
|
|
|
}}</span> |
|
|
|
<span style="margin-left: auto">{{ |
|
|
|
formatNum(ConsumeRank[1].value) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="ranking-item" v-if="areaSizeConsume >= 3"> |
|
|
|
<Bs3CircleFill /> |
|
|
|
<span style="margin-left: 10px">{{ |
|
|
|
ConsumeRank[2].name |
|
|
|
}}</span> |
|
|
|
<span style="margin-left: auto">{{ |
|
|
|
formatNum(ConsumeRank[2].value) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="ranking-item" v-if="areaSizeConsume >= 4"> |
|
|
|
<Bs4Circle /> |
|
|
|
<span style="margin-left: 10px">{{ |
|
|
|
ConsumeRank[3].name |
|
|
|
}}</span> |
|
|
|
<span style="margin-left: auto">{{ |
|
|
|
formatNum(ConsumeRank[3].value) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="ranking-item" v-if="areaSizeConsume >= 5"> |
|
|
|
<Bs5Circle /> |
|
|
|
<span style="margin-left: 10px">{{ |
|
|
|
ConsumeRank[4].name |
|
|
|
}}</span> |
|
|
|
<span style="margin-left: auto">{{ |
|
|
|
formatNum(ConsumeRank[4].value) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="ranking-item" v-if="areaSizeConsume >= 6"> |
|
|
|
<Bs6Circle /> |
|
|
|
<span style="margin-left: 10px">{{ |
|
|
|
ConsumeRank[5].name |
|
|
|
}}</span> |
|
|
|
<span style="margin-left: auto">{{ |
|
|
|
formatNum(ConsumeRank[5].value) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="ranking-item" v-if="areaSizeConsume >= 7"> |
|
|
|
<Bs7Circle /> |
|
|
|
<span style="margin-left: 10px">{{ |
|
|
|
ConsumeRank[6].name |
|
|
|
}}</span> |
|
|
|
<span style="margin-left: auto">{{ |
|
|
|
formatNum(ConsumeRank[6].value) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="ranking-item" v-if="areaSizeConsume >= 8"> |
|
|
|
<Bs8Circle /> |
|
|
|
<span style="margin-left: 10px">{{ |
|
|
|
ConsumeRank[7].name |
|
|
|
}}</span> |
|
|
|
<span style="margin-left: auto">{{ |
|
|
|
formatNum(ConsumeRank[7].value) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="ranking-item" v-if="areaSizeConsume >= 9"> |
|
|
|
<Bs9Circle /> |
|
|
|
<el-scrollbar height="360px"> |
|
|
|
<div v-for="(item, index) in areaRank" :key="item" class="ranking-item"> |
|
|
|
<!-- <component :is="findBsComponent(index)" /> --> |
|
|
|
<span style="width: 15px; text-align: center;">{{ index + 1 }}</span> |
|
|
|
<span style="margin-left: 10px">{{ |
|
|
|
ConsumeRank[8].name |
|
|
|
item.name |
|
|
|
}}</span> |
|
|
|
<span style="margin-left: auto">{{ |
|
|
|
formatNum(ConsumeRank[8].value) |
|
|
|
formatNum(item.value) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
</el-scrollbar> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -1383,9 +1141,9 @@ onMounted(async function () { |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<div class="pie"> |
|
|
|
<div id="yearRecharge" style="width: 600px; height: 400px"></div> |
|
|
|
<div id="yearConsume" style="width: 600px; height: 400px"></div> |
|
|
|
<div id="nowGold" style="width: 600px; height: 400px"></div> |
|
|
|
<div id="yearRecharge" style="width: 400px; height: 400px"></div> |
|
|
|
<div id="yearConsume" style="width: 400px; height: 400px"></div> |
|
|
|
<div id="nowGold" style="width: 400px; height: 400px"></div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
@ -1394,14 +1152,8 @@ onMounted(async function () { |
|
|
|
<template #header> |
|
|
|
<div class="card-header" style="display: flex"> |
|
|
|
<span class="tail-head">四大学科类别占比</span> |
|
|
|
<el-radio-group |
|
|
|
v-model="platform" |
|
|
|
fill="#ffffff" |
|
|
|
text-color="#409eff" |
|
|
|
size="small" |
|
|
|
@change="changePlatform" |
|
|
|
style="margin-left: auto" |
|
|
|
> |
|
|
|
<el-radio-group v-model="platform" fill="#ffffff" text-color="#409eff" size="small" |
|
|
|
@change="changePlatform" style="margin-left: auto"> |
|
|
|
<el-radio-button label="全部平台" value="全部平台" /> |
|
|
|
<el-radio-button label="ERP" value="ERP" /> |
|
|
|
<el-radio-button label="HC" value="HC" /> |
|
|
|
|
hongxilin
5 months ago