|
|
@ -1,43 +1,40 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div> |
|
|
|
|
|
金币管理 <span class="text"> |
|
|
|
|
|
最后更新时间：{{ |
|
|
|
|
|
workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据' |
|
|
|
|
|
}} |
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
|
<div class="gold-management"> |
|
|
|
|
|
<div class="gold-title"> |
|
|
|
|
|
<div class="text1"> |
|
|
|
|
|
金币管理 |
|
|
|
|
|
<span class="text1-update-time">最后更新时间：{{ |
|
|
|
|
|
workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据' |
|
|
|
|
|
}} </span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
<!-- 第一行：包含两个横向格子 --> |
|
|
<!-- 第一行：包含两个横向格子 --> |
|
|
<el-row> |
|
|
<el-row> |
|
|
<el-col :span="12"> |
|
|
<el-col :span="12"> |
|
|
<!-- 第一个卡片 --> |
|
|
<!-- 第一个卡片 --> |
|
|
<el-card class="card-item"> |
|
|
|
|
|
<template #header> |
|
|
|
|
|
<div class="card-title">当前金币余量 |
|
|
|
|
|
<span style="font-weight: bold">{{ |
|
|
|
|
|
currentGold / 100 |
|
|
|
|
|
}}</span> 较前一日 |
|
|
|
|
|
{{ dailyChange / 100 }} |
|
|
|
|
|
<template v-if="dailyChange > 0"> |
|
|
|
|
|
<el-icon style="color:red"> |
|
|
|
|
|
<ArrowUpBold/> |
|
|
|
|
|
</el-icon> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else-if="dailyChange < 0"> |
|
|
|
|
|
<el-icon style="color:forestgreen"> |
|
|
|
|
|
<ArrowDownBold/> |
|
|
|
|
|
</el-icon> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<el-icon style="color:grey"> |
|
|
|
|
|
<SemiSelect/> |
|
|
|
|
|
</el-icon> |
|
|
|
|
|
</template> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
<div class="card-item-row1"> |
|
|
|
|
|
<div class="card-title">当前金币余量 |
|
|
|
|
|
<span style="font-weight: bold">{{ |
|
|
|
|
|
currentGold / 100 |
|
|
|
|
|
}}</span> 较前一日 |
|
|
|
|
|
{{ dailyChange / 100 }} |
|
|
|
|
|
<template v-if="dailyChange > 0"> |
|
|
|
|
|
<el-image :src="upArrow" style="width: 14px;"/> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else-if="dailyChange < 0"> |
|
|
|
|
|
<el-image :src="downArrow" style="width: 14px;"/> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<el-image :src="pingArrow" style="width: 14px; padding-top: 12px"/> |
|
|
|
|
|
</template> |
|
|
|
|
|
</div> |
|
|
<div> |
|
|
<div> |
|
|
<el-row> |
|
|
<el-row> |
|
|
<!-- 左边文本信息 --> |
|
|
<!-- 左边文本信息 --> |
|
|
<el-col :span="12"> |
|
|
<el-col :span="12"> |
|
|
<div class="margin-bottom">永久金币：<b>{{ currentPermanent / 100 }}</b></div> |
|
|
|
|
|
|
|
|
<div class="margin-bottom" style="white-space: nowrap;"> |
|
|
|
|
|
永久金币：<b>{{ currentPermanent / 100 }}</b> |
|
|
|
|
|
</div> |
|
|
<div class="margin-bottom"> </div> |
|
|
<div class="margin-bottom"> </div> |
|
|
|
|
|
|
|
|
<div class="margin-bottom">免费金币：{{ currentFree / 100 }}</div> |
|
|
<div class="margin-bottom">免费金币：{{ currentFree / 100 }}</div> |
|
|
@ -48,7 +45,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div class="margin-bottom"> </div> |
|
|
<div class="margin-bottom"> </div> |
|
|
|
|
|
|
|
|
<div>任务金币：{{ currentTask / 100 }}</div> |
|
|
|
|
|
|
|
|
<div class="margin-bottom">任务金币：{{ currentTask / 100 }}</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
<!-- 右边图表 --> |
|
|
<!-- 右边图表 --> |
|
|
<el-col :span="12"> |
|
|
<el-col :span="12"> |
|
|
@ -61,88 +58,76 @@ |
|
|
</el-row> |
|
|
</el-row> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
<el-col :span="12"> |
|
|
<el-col :span="12"> |
|
|
<!-- 第二个卡片 --> |
|
|
<!-- 第二个卡片 --> |
|
|
<el-card class="card-item"> |
|
|
|
|
|
|
|
|
<div class="card-item-row1"> |
|
|
<div class="card-title">全年累计充值金币数{{ yearlyRecharge / 100 }}</div> |
|
|
<div class="card-title">全年累计充值金币数{{ yearlyRecharge / 100 }}</div> |
|
|
<el-row> |
|
|
<el-row> |
|
|
<el-col :span="12"> |
|
|
<el-col :span="12"> |
|
|
<div class="center-card">折合新币累计金额:{{ yearlyMoney / 100 }}</div> |
|
|
|
|
|
<div class="center-card">昨日新增金币：{{ recharge / 100 }}</div> |
|
|
|
|
|
|
|
|
<div class="center-card">折合新币累计金额</div> |
|
|
|
|
|
<el-image :src="svg1" style="width: 68px; display: block;margin: 0 auto;"/> |
|
|
|
|
|
<div class="center-card">{{ yearlyMoney / 100 }}新币</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
<el-col :span="12"> |
|
|
|
|
|
<div class="center-card">其中永久金币：{{ money / 100 }}</div> |
|
|
|
|
|
<!-- 新增的环形图容器 --> |
|
|
|
|
|
<div ref="rechargeGoldChart" style="width: 100%; height: 150px; margin-top: 10px;"></div> |
|
|
|
|
|
|
|
|
<el-col :span="12" style="border-left: 2px solid #CFE6FE; height: 120px"> |
|
|
|
|
|
<div class="center-card" style="white-space: nowrap;">昨日新增金币：{{ recharge / 100 }}</div> |
|
|
|
|
|
<div ref="rechargeGoldChart" style="width: 68px; height: 68px; display: block;margin: 0 auto;"></div> |
|
|
|
|
|
<div class="center-card" style="white-space: nowrap;">其中永久金币：{{ money / 100 }}</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
</el-row> |
|
|
</el-row> |
|
|
</el-card> |
|
|
|
|
|
|
|
|
</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
</el-row> |
|
|
</el-row> |
|
|
|
|
|
|
|
|
<!-- 第二行：包含两个横向格子 --> |
|
|
<!-- 第二行：包含两个横向格子 --> |
|
|
<el-row> |
|
|
<el-row> |
|
|
<el-col :span="12"> |
|
|
<el-col :span="12"> |
|
|
<!-- 第三个卡片 --> |
|
|
<!-- 第三个卡片 --> |
|
|
<el-card class="card-item"> |
|
|
|
|
|
|
|
|
<div class="card-item"> |
|
|
<div class="card-title">全年累计消费金币数{{ yearlyReduce / 100 }}</div> |
|
|
<div class="card-title">全年累计消费金币数{{ yearlyReduce / 100 }}</div> |
|
|
<div style="padding-left: 30%;">消耗：{{ yearlyConsume / 100 }}</div> |
|
|
|
|
|
<div style="padding-left: 30%;">退款：{{ yearlyRefund / 100 }}</div> |
|
|
|
|
|
<!-- 新增的两个环形图容器 --> |
|
|
|
|
|
<div ref="consumeChart" style="width: 100%; height: 150px; margin-top: 10px;"></div> |
|
|
|
|
|
<template #footer> |
|
|
|
|
|
<div style="margin-bottom:0.5%;padding-left: 30%;">昨日新增消费：{{ dailyConsume / 100 }}</div> |
|
|
|
|
|
<div style="margin-bottom:0.5%;padding-left: 30%;">昨日新增消耗：{{ dailyReduce / 100 }}</div> |
|
|
|
|
|
<div style="margin-bottom:0.5%;padding-left: 30%;">昨日新增退款：{{ dailyRefund / 100 }}</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
<el-row style="height: 200px;"> |
|
|
|
|
|
<el-col :span="12"> |
|
|
|
|
|
<div ref="consumeChart" style="width:100%; height: 68%;"></div> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
<el-col :span="12"> |
|
|
|
|
|
<div ref="consumeDetailChart" style="width: 100%; height: 88%;"></div> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
<el-col :span="12"> |
|
|
<el-col :span="12"> |
|
|
<!-- 第四个卡片 --> |
|
|
<!-- 第四个卡片 --> |
|
|
<el-card class="card-item"> |
|
|
|
|
|
<el-col class="card-title">全年累计充值人头数{{ yearlyRechargeNum }}</el-col> |
|
|
|
|
|
<el-col style="padding-left: 35%;">周同比:{{ sumWow }}% |
|
|
|
|
|
<template v-if="sumWow > 0"> |
|
|
|
|
|
<el-icon style="color:red"> |
|
|
|
|
|
<ArrowUpBold/> |
|
|
|
|
|
</el-icon> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else-if="sumWow < 0"> |
|
|
|
|
|
<el-icon style="color:forestgreen"> |
|
|
|
|
|
<ArrowDownBold/> |
|
|
|
|
|
</el-icon> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<el-icon style="color:grey"> |
|
|
|
|
|
<SemiSelect/> |
|
|
|
|
|
</el-icon> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
<el-col style="padding-left: 35%;">日环比:{{ sumDaily }}% |
|
|
|
|
|
<template v-if="sumDaily > 0"> |
|
|
|
|
|
<el-icon style="color:red"> |
|
|
|
|
|
<ArrowUpBold/> |
|
|
|
|
|
</el-icon> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else-if="sumDaily < 0"> |
|
|
|
|
|
<el-icon style="color:forestgreen"> |
|
|
|
|
|
<ArrowDownBold/> |
|
|
|
|
|
</el-icon> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<el-icon style="color:grey"> |
|
|
|
|
|
<SemiSelect/> |
|
|
|
|
|
</el-icon> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
<!-- 新增的环形图容器 --> |
|
|
|
|
|
<div ref="rechargePeopleChart" style="width: 100%; height: 150px; margin-top: 10px;"></div> |
|
|
|
|
|
<template #footer> |
|
|
|
|
|
<el-col style="padding-left: 35%;margin-bottom:0.5%">昨日充值人数：{{ ydayRechargeNum }}</el-col> |
|
|
|
|
|
<el-col style="padding-left: 35%;">其中首充：{{ firstRecharge }}</el-col> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
<div class="card-item"> |
|
|
|
|
|
<div class="card-title">全年累计充值人头数{{ yearlyRechargeNum }}</div> |
|
|
|
|
|
<el-row style="height: 200px;"> |
|
|
|
|
|
<el-col :span="12" style="border-right: 2px solid #CFE6FE; height: 150px"> |
|
|
|
|
|
<div class="chart5"> |
|
|
|
|
|
<el-image :src="svg2" style="width: 68px; display: block;margin: 0 auto;"/> |
|
|
|
|
|
<div class="margin-bottom"> |
|
|
|
|
|
<div style="display: flex; gap: 10px; font-size: 14px;">周同比：{{ sumWow }}% |
|
|
|
|
|
<el-image v-if="sumWow > 0" :src="upArrow" style="width: 10px;"/> |
|
|
|
|
|
<el-image v-else-if="sumWow < 0" :src="downArrow" style="width: 10px;"/> |
|
|
|
|
|
<el-image v-else :src="pingArrow" style="width: 10px;"/> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div style="display: flex; gap: 10px; font-size: 14px;"> |
|
|
|
|
|
日环比：{{ sumDaily }}% |
|
|
|
|
|
<el-image v-if="sumDaily > 0" :src="upArrow" style="width: 10px;"/> |
|
|
|
|
|
<el-image v-else-if="sumDaily < 0" :src="downArrow" style="width: 10px;"/> |
|
|
|
|
|
<el-image v-else :src="pingArrow" style="width: 10px; "/> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</el-col> |
|
|
|
|
|
<!-- 新增的环形图容器 --> |
|
|
|
|
|
<el-col :span="12"> |
|
|
|
|
|
<div ref="rechargePeopleChart" style="width:100%; height: 68%;"></div> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
</el-row> |
|
|
</el-row> |
|
|
</div> |
|
|
</div> |
|
|
@ -155,6 +140,11 @@ import API from '@/util/http' |
|
|
import dayjs from 'dayjs'; |
|
|
import dayjs from 'dayjs'; |
|
|
import utc from 'dayjs-plugin-utc' |
|
|
import utc from 'dayjs-plugin-utc' |
|
|
import {ArrowDownBold, ArrowUpBold, SemiSelect} from '@element-plus/icons-vue' |
|
|
import {ArrowDownBold, ArrowUpBold, SemiSelect} from '@element-plus/icons-vue' |
|
|
|
|
|
import svg1 from '@/assets/SvgIcons/折合新币累计金额.svg' |
|
|
|
|
|
import svg2 from '@/assets/SvgIcons/周同比.svg' |
|
|
|
|
|
import upArrow from '@/assets/SvgIcons/上升箭头.svg' |
|
|
|
|
|
import downArrow from '@/assets/SvgIcons/下降箭头.svg' |
|
|
|
|
|
import pingArrow from '@/assets/SvgIcons/持平.svg' |
|
|
|
|
|
|
|
|
dayjs.extend(utc) |
|
|
dayjs.extend(utc) |
|
|
|
|
|
|
|
|
@ -190,6 +180,7 @@ const length = ref(0) |
|
|
const goldTypeChart = ref(null) |
|
|
const goldTypeChart = ref(null) |
|
|
const rechargeGoldChart = ref(null) |
|
|
const rechargeGoldChart = ref(null) |
|
|
const consumeChart = ref(null) |
|
|
const consumeChart = ref(null) |
|
|
|
|
|
const consumeDetailChart = ref(null) |
|
|
const rechargePeopleChart = ref(null) |
|
|
const rechargePeopleChart = ref(null) |
|
|
|
|
|
|
|
|
// 要加上所有市场的，还有额外计算的(总数 = 永久 + 6月 + 12月 + 免费 + 任务) |
|
|
// 要加上所有市场的，还有额外计算的(总数 = 永久 + 6月 + 12月 + 免费 + 任务) |
|
|
@ -271,9 +262,10 @@ const processData = (data) => { |
|
|
|
|
|
|
|
|
// 初始化图表 |
|
|
// 初始化图表 |
|
|
nextTick(() => { |
|
|
nextTick(() => { |
|
|
initGoldTypeChart(); |
|
|
|
|
|
|
|
|
// initGoldTypeChart(); |
|
|
initRechargeGoldChart(); |
|
|
initRechargeGoldChart(); |
|
|
initConsumeChart(); |
|
|
initConsumeChart(); |
|
|
|
|
|
initConsumeDetailChart(); |
|
|
initRechargePeopleChart(); |
|
|
initRechargePeopleChart(); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
@ -326,18 +318,40 @@ const initRechargeGoldChart = () => { |
|
|
series: [ |
|
|
series: [ |
|
|
{ |
|
|
{ |
|
|
type: 'pie', |
|
|
type: 'pie', |
|
|
radius: ['50%', '70%'], |
|
|
|
|
|
|
|
|
radius: ['60%', '85%'], |
|
|
|
|
|
silent: true, |
|
|
|
|
|
clockwise: true, |
|
|
|
|
|
label: {show: false}, |
|
|
data: [ |
|
|
data: [ |
|
|
{value: money.value / 100, name: '永久金币'}, |
|
|
|
|
|
{value: (recharge.value - money.value) / 100, name: '其他金币'} |
|
|
|
|
|
], |
|
|
|
|
|
label: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
formatter: '{b}: {c}' |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
{ |
|
|
|
|
|
value: recharge.value / 100, |
|
|
|
|
|
itemStyle: {color: '#80aaff'} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'pie', |
|
|
|
|
|
radius: ['60%', '75%'], |
|
|
|
|
|
startAngle: 180, |
|
|
|
|
|
silent: true, |
|
|
|
|
|
clockwise: true, |
|
|
|
|
|
label: {show: false}, |
|
|
|
|
|
data: [ |
|
|
|
|
|
{ |
|
|
|
|
|
value: money.value / 100, |
|
|
|
|
|
itemStyle: {color: '#f2c97d'} |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: (recharge.value / 100 - money.value / 100), |
|
|
|
|
|
itemStyle: {color: 'transparent'} |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
} |
|
|
} |
|
|
] |
|
|
] |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
myChart.setOption(option); |
|
|
myChart.setOption(option); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -345,46 +359,157 @@ const initRechargeGoldChart = () => { |
|
|
const initConsumeChart = () => { |
|
|
const initConsumeChart = () => { |
|
|
const myChart = echarts.init(consumeChart.value); |
|
|
const myChart = echarts.init(consumeChart.value); |
|
|
const option = { |
|
|
const option = { |
|
|
|
|
|
legend: { |
|
|
|
|
|
orient: 'vertical', |
|
|
|
|
|
left: '10%', |
|
|
|
|
|
top: '85', |
|
|
|
|
|
icon: 'circle', |
|
|
|
|
|
iconSize: 5, |
|
|
|
|
|
textSize: 12, |
|
|
|
|
|
itemWidth: 7, |
|
|
|
|
|
itemHeight: 7, |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
series: [ |
|
|
series: [ |
|
|
{ |
|
|
{ |
|
|
type: 'pie', |
|
|
type: 'pie', |
|
|
radius: ['40%', '70%'], |
|
|
|
|
|
|
|
|
radius: ['30%', '45%'], |
|
|
|
|
|
center: ['50%', '35%'], |
|
|
|
|
|
silent: true, |
|
|
|
|
|
clockwise: true, |
|
|
|
|
|
label: {show: false}, |
|
|
data: [ |
|
|
data: [ |
|
|
{value: yearlyConsume.value / 100, name: '消耗'}, |
|
|
|
|
|
{value: yearlyRefund.value / 100, name: '退款'} |
|
|
|
|
|
|
|
|
{ |
|
|
|
|
|
value: yearlyConsume.value / 100, |
|
|
|
|
|
name: '消耗：' + yearlyConsume.value / 100, |
|
|
|
|
|
// name: '消耗：' + 1234567890, |
|
|
|
|
|
itemStyle: {color: '#7DB7FA'} |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: yearlyRefund.value / 100, |
|
|
|
|
|
name: '退款：' + yearlyRefund.value / 100, |
|
|
|
|
|
itemStyle: {color: '#F7D47C'} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
], |
|
|
], |
|
|
label: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
formatter: '{b}: {c}' |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
] |
|
|
] |
|
|
}; |
|
|
}; |
|
|
myChart.setOption(option); |
|
|
myChart.setOption(option); |
|
|
} |
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
// 初始化消费明细环形图 |
|
|
|
|
|
const initConsumeDetailChart = () => { |
|
|
|
|
|
const myChart = echarts.init(consumeDetailChart.value); |
|
|
|
|
|
const option = { |
|
|
|
|
|
// 增加图表内边距，避免内容溢出 |
|
|
|
|
|
legend: { |
|
|
|
|
|
orient: 'vertical', |
|
|
|
|
|
left: 'left', |
|
|
|
|
|
top: '85', |
|
|
|
|
|
icon: 'circle', |
|
|
|
|
|
iconSize: 5, |
|
|
|
|
|
itemWidth: 7, |
|
|
|
|
|
itemHeight: 7, |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'pie', |
|
|
|
|
|
radius: ['25%', '40%'], |
|
|
|
|
|
center: ['50%', '25%'], |
|
|
|
|
|
silent: true, |
|
|
|
|
|
clockwise: true, |
|
|
|
|
|
label: {show: false}, |
|
|
|
|
|
data: [ |
|
|
|
|
|
{ |
|
|
|
|
|
value: dailyConsume.value / 100, |
|
|
|
|
|
name: '昨日新增消费：' + dailyConsume.value / 100, |
|
|
|
|
|
itemStyle: {color: '#65C9C9'} |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'pie', |
|
|
|
|
|
radius: ['25%', '35%'], |
|
|
|
|
|
center: ['50%', '25%'], |
|
|
|
|
|
|
|
|
|
|
|
startAngle: 180, |
|
|
|
|
|
silent: true, |
|
|
|
|
|
clockwise: true, |
|
|
|
|
|
label: {show: false}, |
|
|
|
|
|
data: [ |
|
|
|
|
|
{ |
|
|
|
|
|
value: dailyReduce.value / 100, |
|
|
|
|
|
name: '昨日新增消耗：' + dailyReduce.value / 100, |
|
|
|
|
|
// name: '昨日新增消耗：' + 1234567890, |
|
|
|
|
|
itemStyle: {color: '#9469D1'} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: dailyRefund.value / 100, |
|
|
|
|
|
name: '昨日新增退款：' + dailyRefund.value / 100, |
|
|
|
|
|
itemStyle: {color: '#B8DB6E'} |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
myChart.setOption(option); |
|
|
|
|
|
}; |
|
|
// 初始化充值人头环形图 |
|
|
// 初始化充值人头环形图 |
|
|
const initRechargePeopleChart = () => { |
|
|
const initRechargePeopleChart = () => { |
|
|
const myChart = echarts.init(rechargePeopleChart.value); |
|
|
const myChart = echarts.init(rechargePeopleChart.value); |
|
|
const option = { |
|
|
const option = { |
|
|
|
|
|
legend: { |
|
|
|
|
|
orient: 'vertical', |
|
|
|
|
|
left: 'left', |
|
|
|
|
|
top: '85', |
|
|
|
|
|
icon: 'circle', |
|
|
|
|
|
iconSize: 5, |
|
|
|
|
|
textSize: 18, |
|
|
|
|
|
itemWidth: 7, |
|
|
|
|
|
itemHeight: 7, |
|
|
|
|
|
}, |
|
|
series: [ |
|
|
series: [ |
|
|
{ |
|
|
{ |
|
|
type: 'pie', |
|
|
type: 'pie', |
|
|
radius: ['40%', '70%'], |
|
|
|
|
|
|
|
|
radius: ['30%', '50%'], |
|
|
|
|
|
center: ['50%', '35%'], |
|
|
|
|
|
silent: true, |
|
|
|
|
|
clockwise: true, |
|
|
|
|
|
label: {show: false}, |
|
|
|
|
|
data: [ |
|
|
|
|
|
{ |
|
|
|
|
|
value: ydayRechargeNum.value, |
|
|
|
|
|
name: '昨日充值人数：' + ydayRechargeNum.value, |
|
|
|
|
|
itemStyle: {color: '#65C9C9'} |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'pie', |
|
|
|
|
|
radius: ['30%', '45%'], |
|
|
|
|
|
center: ['50%', '35%'], |
|
|
|
|
|
silent: true, |
|
|
|
|
|
clockwise: true, |
|
|
|
|
|
label: {show: false}, |
|
|
data: [ |
|
|
data: [ |
|
|
{value: firstRecharge.value, name: '首充'}, |
|
|
|
|
|
{value: (ydayRechargeNum.value - firstRecharge.value), name: '非首充'} |
|
|
|
|
|
|
|
|
{ |
|
|
|
|
|
value: firstRecharge.value, |
|
|
|
|
|
name: '其中首充：' + firstRecharge.value, |
|
|
|
|
|
itemStyle: {color: '#9469D1'} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: ydayRechargeNum.value - firstRecharge.value, |
|
|
|
|
|
itemStyle: {color: 'transparent'} |
|
|
|
|
|
} |
|
|
], |
|
|
], |
|
|
label: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
formatter: '{b}: {c}' |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
] |
|
|
] |
|
|
}; |
|
|
}; |
|
|
myChart.setOption(option); |
|
|
myChart.setOption(option); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 获取卡片数据 |
|
|
// 获取卡片数据 |
|
|
const getCardData = async () => { |
|
|
const getCardData = async () => { |
|
|
try { |
|
|
try { |
|
|
@ -406,6 +531,7 @@ const getCardData = async () => { |
|
|
console.error('获取卡片数据失败:', error) |
|
|
console.error('获取卡片数据失败:', error) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const workDataUpdateTime = ref(null) |
|
|
const workDataUpdateTime = ref(null) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -415,12 +541,7 @@ onMounted(async () => { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style scoped> |
|
|
<style scoped> |
|
|
.card { |
|
|
|
|
|
height: 28vh; |
|
|
|
|
|
margin-bottom: 0.5vh; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.center-card { |
|
|
.center-card { |
|
|
display: flex; |
|
|
display: flex; |
|
|
@ -428,18 +549,50 @@ onMounted(async () => { |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.card-item-row1 { |
|
|
|
|
|
height: 160px; |
|
|
|
|
|
width: auto; |
|
|
|
|
|
background: #E4F0FC; |
|
|
|
|
|
box-shadow: 0 0 4px 0 #00000040; |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
margin-left: 5px; |
|
|
|
|
|
margin-right: 5px; |
|
|
|
|
|
margin-bottom: -5px; |
|
|
|
|
|
padding-bottom: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.card-item { |
|
|
.card-item { |
|
|
height: 28vh; |
|
|
|
|
|
|
|
|
height: 200px; |
|
|
|
|
|
width: auto; |
|
|
|
|
|
background: #E4F0FC; |
|
|
|
|
|
box-shadow: 0 0 4px 0 #00000040; |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
margin-left: 5px; |
|
|
|
|
|
margin-right: 5px; |
|
|
|
|
|
margin-bottom: -5px; |
|
|
|
|
|
padding-bottom: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.card-title { |
|
|
.card-title { |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
margin-bottom: 1vh; |
|
|
|
|
|
|
|
|
height: 36px; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
background: linear-gradient(90deg, #E4F0FC 0%, #C1DCF8 50%, #E4F0FC 100%); |
|
|
|
|
|
box-shadow: 0 0 2px 0 #00152940; |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
margin-top: -5px; |
|
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.card-item .el-col { |
|
|
|
|
|
overflow: visible; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes spin { |
|
|
@keyframes spin { |
|
|
@ -451,4 +604,64 @@ onMounted(async () => { |
|
|
transform: rotate(360deg); |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.gold-title { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 5vh; |
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
background: linear-gradient(90deg, #E4F0FC 0%, #FFF178 50%, #E4F0FC 100%); |
|
|
|
|
|
box-shadow: 0 2px 2px 0 #00152940; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text1 { |
|
|
|
|
|
color: #040a2d; |
|
|
|
|
|
font-family: " PingFang SC "; |
|
|
|
|
|
font-size: 28px; |
|
|
|
|
|
font-style: normal; |
|
|
|
|
|
font-weight: 900; |
|
|
|
|
|
line-height: 31.79px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text1-update-time { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 26px; |
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
color: #040a2d; |
|
|
|
|
|
font-family: "PingFang SC"; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
font-style: normal; |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
line-height: 31.79px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 背景卡片大小 */ |
|
|
|
|
|
.gold-management { |
|
|
|
|
|
margin: 10px 5px; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 50vh; |
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
background: #E7F4FD; |
|
|
|
|
|
box-shadow: 0 2px 2px 0 #00000040; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.margin-bottom { |
|
|
|
|
|
padding-left: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.chart5 { |
|
|
|
|
|
margin-top: 15px; |
|
|
|
|
|
|
|
|
|
|
|
.margin-bottom { |
|
|
|
|
|
margin-top: 10px; |
|
|
|
|
|
padding-left: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
lihui
2 weeks ago
