|
@ -1,7 +1,15 @@ |
|
|
<template> |
|
|
<template> |
|
|
<el-col :span="4"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-row> |
|
|
|
|
|
<!-- 数据总览卡片 --> |
|
|
|
|
|
<el-col :span="4" style="padding-right: 10px;"> <!-- 适当留白避免拥挤 --> |
|
|
<el-card class="center-card margin-bottom">数据总览</el-card> |
|
|
<el-card class="center-card margin-bottom">数据总览</el-card> |
|
|
</el-col> |
|
|
</el-col> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 剩余栅格空间(可选,用于占满一行) --> |
|
|
|
|
|
<el-col :span="18"></el-col> |
|
|
|
|
|
</el-row> |
|
|
<el-row :gutter="10"> |
|
|
<el-row :gutter="10"> |
|
|
<!-- 第一个卡片 --> |
|
|
<!-- 第一个卡片 --> |
|
|
<el-col :span="6"> |
|
|
<el-col :span="6"> |
|
@ -9,8 +17,10 @@ |
|
|
<template #header> |
|
|
<template #header> |
|
|
<div class="card-header"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title">当前金币余量</div> |
|
|
<div class="card-title">当前金币余量</div> |
|
|
<div>{{ currentGold / 100 }} 较前一日 {{ |
|
|
|
|
|
dailyChange / 100 }} |
|
|
|
|
|
|
|
|
<div>{{ currentGold / 100 }} 较前一日 |
|
|
|
|
|
{{ |
|
|
|
|
|
dailyChange / 100 |
|
|
|
|
|
}} |
|
|
<template v-if="dailyChange > 0"> |
|
|
<template v-if="dailyChange > 0"> |
|
|
<el-icon style="color:red"> |
|
|
<el-icon style="color:red"> |
|
|
<ArrowUpBold/> |
|
|
<ArrowUpBold/> |
|
@ -34,7 +44,9 @@ |
|
|
<div class="margin-bottom">免费金币:{{ currentFree / 100 }}</div> |
|
|
<div class="margin-bottom">免费金币:{{ currentFree / 100 }}</div> |
|
|
<div class="margin-bottom">[六月到期|{{ currentFreeJune / 100 }}] [12月到期|{{ |
|
|
<div class="margin-bottom">[六月到期|{{ currentFreeJune / 100 }}] [12月到期|{{ |
|
|
currentFreeDecember / |
|
|
currentFreeDecember / |
|
|
100 }}]</div> |
|
|
|
|
|
|
|
|
100 |
|
|
|
|
|
}}] |
|
|
|
|
|
</div> |
|
|
<div>任务金币:{{ currentTask / 100 }}</div> |
|
|
<div>任务金币:{{ currentTask / 100 }}</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-card> |
|
|
</el-card> |
|
@ -57,14 +69,14 @@ |
|
|
<!-- 第三个卡片 --> |
|
|
<!-- 第三个卡片 --> |
|
|
<el-col :span="6"> |
|
|
<el-col :span="6"> |
|
|
<el-card class="card-item"> |
|
|
<el-card class="card-item"> |
|
|
<div class="card-title">全年累计消耗金币数</div> |
|
|
|
|
|
|
|
|
<div class="card-title">全年累计消费金币数</div> |
|
|
<div class="card-title">{{ yearlyReduce / 100 }}</div> |
|
|
<div class="card-title">{{ yearlyReduce / 100 }}</div> |
|
|
<div class="center-card">消费:{{ yearlyConsume / 100 }}</div> |
|
|
<div class="center-card">消费:{{ yearlyConsume / 100 }}</div> |
|
|
<div class="center-card">退款:{{ yearlyRefund / 100 }}</div> |
|
|
<div class="center-card">退款:{{ yearlyRefund / 100 }}</div> |
|
|
<template #footer> |
|
|
<template #footer> |
|
|
<div></div> |
|
|
<div></div> |
|
|
<div class="margin-bottom center-card">昨日新增消耗:{{ dailyReduce / 100 }}</div> |
|
|
|
|
|
<div class="margin-bottom center-card">昨日新增消费:{{ dailyConsume / 100 }}</div> |
|
|
<div class="margin-bottom center-card">昨日新增消费:{{ dailyConsume / 100 }}</div> |
|
|
|
|
|
<div class="margin-bottom center-card">昨日新增消耗:{{ dailyReduce / 100 }}</div> |
|
|
<div class="margin-bottom center-card">昨日新增退款:{{ dailyRefund / 100 }}</div> |
|
|
<div class="margin-bottom center-card">昨日新增退款:{{ dailyRefund / 100 }}</div> |
|
|
</template> |
|
|
</template> |
|
|
</el-card> |
|
|
</el-card> |
|
@ -130,11 +142,14 @@ |
|
|
<el-col :span="24"> |
|
|
<el-col :span="24"> |
|
|
<el-row> |
|
|
<el-row> |
|
|
<div style="margin-top:5px">合计 |
|
|
<div style="margin-top:5px">合计 |
|
|
永久金币 {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 |
|
|
|
|
|
|
|
|
永久金币 {{ |
|
|
|
|
|
activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 |
|
|
}} |
|
|
}} |
|
|
免费金币 {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 |
|
|
|
|
|
|
|
|
免费金币 {{ |
|
|
|
|
|
activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 |
|
|
}} |
|
|
}} |
|
|
任务金币 {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 |
|
|
|
|
|
|
|
|
任务金币 {{ |
|
|
|
|
|
activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 |
|
|
}} |
|
|
}} |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div> |
|
@ -198,8 +213,9 @@ import API from '@/util/http' |
|
|
import {ElMessage} from 'element-plus' |
|
|
import {ElMessage} from 'element-plus' |
|
|
import dayjs from 'dayjs'; |
|
|
import dayjs from 'dayjs'; |
|
|
import utc from 'dayjs-plugin-utc' |
|
|
import utc from 'dayjs-plugin-utc' |
|
|
|
|
|
|
|
|
dayjs.extend(utc) |
|
|
dayjs.extend(utc) |
|
|
import { ArrowUpBold, ArrowDownBold, SemiSelect } from '@element-plus/icons-vue' |
|
|
|
|
|
|
|
|
import {ArrowUpBold, ArrowDownBold, SemiSelect, Refresh} from '@element-plus/icons-vue' |
|
|
// 地区数据 |
|
|
// 地区数据 |
|
|
const markets = ref([]) |
|
|
const markets = ref([]) |
|
|
// 图表相关 |
|
|
// 图表相关 |
|
@ -242,6 +258,7 @@ const sumDaily = ref(0) |
|
|
const rechargeNum = ref(0) |
|
|
const rechargeNum = ref(0) |
|
|
const firstRecharge = ref(0) |
|
|
const firstRecharge = ref(0) |
|
|
const length = ref(0) |
|
|
const length = ref(0) |
|
|
|
|
|
const isLoading = ref(false) |
|
|
const formatDate = function (date) { |
|
|
const formatDate = function (date) { |
|
|
const year = date.getFullYear(); |
|
|
const year = date.getFullYear(); |
|
|
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|
|
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|
@ -671,6 +688,21 @@ const getCardData = async () => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const refreshWorkspace = async () => { |
|
|
|
|
|
isLoading.value = true |
|
|
|
|
|
try { |
|
|
|
|
|
const result = await API({url: '/workbench/updateCard', data: {}}) |
|
|
|
|
|
if (result.code === 200) { |
|
|
|
|
|
ElMessage.success('数据更新成功') |
|
|
|
|
|
} else { |
|
|
|
|
|
ElMessage.error('数据更新失败') |
|
|
|
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.error('刷新工作台失败:', error) |
|
|
|
|
|
} finally { |
|
|
|
|
|
isLoading.value = false |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
onMounted(async () => { |
|
|
onMounted(async () => { |
|
|
|
|
|
|
|
|