|
|
|
@ -3,46 +3,46 @@ |
|
|
|
<el-card style="width:100%;" class="graph-card"> |
|
|
|
<div> |
|
|
|
<el-tabs v-model="activeTab" @tab-change="handleTabChange"> |
|
|
|
<el-tab-pane label="金币充值" name="recharge"></el-tab-pane> |
|
|
|
<el-tab-pane label="金币消费" name="consume"></el-tab-pane> |
|
|
|
<el-tab-pane :label="t('workbench.coinRecharge')" name="recharge"></el-tab-pane> |
|
|
|
<el-tab-pane :label="t('workbench.coinConsume')" name="consume"></el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</div> |
|
|
|
<div class="condition"> |
|
|
|
<div class="stats"> |
|
|
|
<div v-if="activeTab === 'consume'">合计：{{ sumConsume / 100 }}</div> |
|
|
|
永久金币: {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }} |
|
|
|
免费金币: {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }} |
|
|
|
任务金币: {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }} |
|
|
|
<div v-if="activeTab === 'consume'">{{ t('workbench.total') }} {{ sumConsume / 100 }}</div> |
|
|
|
{{ t('workbench.permanentGold') }}：{{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }} |
|
|
|
{{ t('workbench.freeGold') }}：{{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }} |
|
|
|
{{ t('workbench.taskGold') }}：{{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }} |
|
|
|
</div> |
|
|
|
<div style="display: flex"> |
|
|
|
<el-button |
|
|
|
:style="{ backgroundColor: activeTimeRange === 'yes' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'yes' ? 'white' : '#666' }" |
|
|
|
@click="getYes()" size="default">昨天 |
|
|
|
@click="getYes()" size="default">{{ t('workbench.yesterday') }} |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
:style="{ backgroundColor: activeTimeRange === 'today' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'today' ? 'white' : '#666' }" |
|
|
|
@click="getToday()" size="default">今天 |
|
|
|
@click="getToday()" size="default">{{ t('workbench.today') }} |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
:style="{ backgroundColor: activeTimeRange === 'week' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'week' ? 'white' : '#666' }" |
|
|
|
@click="getWeek()" size="default">本周 |
|
|
|
@click="getWeek()" size="default">{{ t('workbench.thisWeek') }} |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
:style="{ backgroundColor: activeTimeRange === 'month' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'month' ? 'white' : '#666' }" |
|
|
|
@click="getMonth()" size="default">本月 |
|
|
|
@click="getMonth()" size="default">{{ t('workbench.thisMonth') }} |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
:style="{ backgroundColor: activeTimeRange === 'year' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'year' ? 'white' : '#666' }" |
|
|
|
@click="getYear()" size="default">本年 |
|
|
|
@click="getYear()" size="default">{{ t('workbench.thisYear') }} |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<div style="display: flex"> |
|
|
|
<el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="→" |
|
|
|
start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" |
|
|
|
:start-placeholder="t('workbench.startTime')" :end-placeholder="t('workbench.endTime')" format="YYYY-MM-DD HH:mm:ss" |
|
|
|
style="width:20vw;margin-left:0.5vw;" value-format="YYYY-MM-DD HH:mm:ss" |
|
|
|
:default-time="defaultTime" |
|
|
|
:disabled-date="disabledDate" @change="handleDatePickerChange"/> |
|
|
|
<el-button type="primary" size="small" style="margin-left: 0.5vw" @click="getChartData">查询</el-button> |
|
|
|
<el-button type="primary" size="small" style="margin-left: 0.5vw" @click="getChartData">{{ t('workbench.query') }}</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -54,22 +54,22 @@ |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<el-card class="graph-card-list"> |
|
|
|
<div class="card-large">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div> |
|
|
|
<div class="card-large">{{ t('workbench.gold') }}{{ activeTab === 'recharge' ? t('workbench.recharge') : t('workbench.consume') }}{{ t('workbench.rank') }}</div> |
|
|
|
<el-select popper-class="mySelectStyle" class="card-select" v-model="selectedType" |
|
|
|
style="width: 100%; margin-bottom: 15px"> |
|
|
|
<el-option label="全部类型" value="all"></el-option> |
|
|
|
<el-option label="永久金币" value="permanent"></el-option> |
|
|
|
<el-option label="免费金币" value="free"></el-option> |
|
|
|
<el-option label="任务金币" value="task"></el-option> |
|
|
|
<el-option :label="t('workbench.allTypes')" value="all"></el-option> |
|
|
|
<el-option :label="t('workbench.permanentGold')" value="permanent"></el-option> |
|
|
|
<el-option :label="t('workbench.freeGold')" value="free"></el-option> |
|
|
|
<el-option :label="t('workbench.taskGold')" value="task"></el-option> |
|
|
|
</el-select> |
|
|
|
<el-table class="card-table" :data="tableData" height="320px"> |
|
|
|
<el-table-column prop="rank" label="排名" width="60" align="center"></el-table-column> |
|
|
|
<el-table-column prop="market" label="地区" align="center"> |
|
|
|
<el-table-column prop="rank" :label="t('workbench.rank')" width="60" align="center"></el-table-column> |
|
|
|
<el-table-column prop="market" :label="t('workbench.region')" align="center"> |
|
|
|
<template #default="scope"> |
|
|
|
<span>{{ marketMapping[scope.row.market] || scope.row.market }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="coinAmount" label="金币数量" align="center"> |
|
|
|
<el-table-column prop="coinAmount" :label="t('workbench.goldCount')" align="center"> |
|
|
|
<template #default="{ row }"> |
|
|
|
{{ row.coinAmount.toLocaleString() }} |
|
|
|
</template> |
|
|
|
@ -90,6 +90,9 @@ import {ElMessage} from 'element-plus' |
|
|
|
import dayjs from 'dayjs'; |
|
|
|
import utc from 'dayjs-plugin-utc' |
|
|
|
import {marketMapping} from "@/utils/marketMap.js"; |
|
|
|
import { useI18n } from 'vue-i18n' |
|
|
|
|
|
|
|
const { t } = useI18n() |
|
|
|
|
|
|
|
dayjs.extend(utc) |
|
|
|
|
|
|
|
@ -359,11 +362,11 @@ const getMarkets = async () => { |
|
|
|
console.log('市场列表获取成功:', markets.value) |
|
|
|
} else { |
|
|
|
console.error('获取市场列表失败', response) |
|
|
|
ElMessage.error('获取市场列表失败') |
|
|
|
ElMessage.error(t('elmessage.getMarketListFailed')) |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('获取市场列表失败:', error) |
|
|
|
ElMessage.error('获取市场列表失败') |
|
|
|
ElMessage.error(t('elmessage.getMarketListFailed')) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -398,11 +401,11 @@ const getChartData = async () => { |
|
|
|
processRankingData(response.marketGraphs) |
|
|
|
} else { |
|
|
|
console.error('获取图表数据失败:', response) |
|
|
|
ElMessage.error('获取图表数据失败') |
|
|
|
ElMessage.error(t('elmessage.getChartDataFailed')) |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('获取图表数据失败:', error) |
|
|
|
ElMessage.error('获取图表数据失败') |
|
|
|
ElMessage.error(t('elmessage.getChartDataFailed')) |
|
|
|
} |
|
|
|
} |
|
|
|
// 处理图表数据 |
|
|
|
@ -524,7 +527,7 @@ const updateChart = (chartData) => { |
|
|
|
if (activeTab.value === 'recharge') { |
|
|
|
series = [ |
|
|
|
{ |
|
|
|
name: '永久金币', |
|
|
|
name: t('workbench.permanentGold'), |
|
|
|
type: 'bar', |
|
|
|
stack: 'recharge', |
|
|
|
data: chartData.rechargePermanent, |
|
|
|
@ -532,7 +535,7 @@ const updateChart = (chartData) => { |
|
|
|
barWidth: 30 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '免费金币', |
|
|
|
name: t('workbench.freeGold'), |
|
|
|
type: 'bar', |
|
|
|
stack: 'recharge', |
|
|
|
data: chartData.rechargeFree, |
|
|
|
@ -540,7 +543,7 @@ const updateChart = (chartData) => { |
|
|
|
barWidth: 30 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '任务金币', |
|
|
|
name: t('workbench.taskGold'), |
|
|
|
type: 'bar', |
|
|
|
stack: 'recharge', |
|
|
|
data: chartData.rechargeTask, |
|
|
|
@ -548,11 +551,11 @@ const updateChart = (chartData) => { |
|
|
|
barWidth: 30 |
|
|
|
} |
|
|
|
] |
|
|
|
legend = ['永久金币', '免费金币', '任务金币'] |
|
|
|
legend = [t('workbench.permanentGold'), t('workbench.freeGold'), t('workbench.taskGold')] |
|
|
|
} else { |
|
|
|
series = [ |
|
|
|
{ |
|
|
|
name: '永久金币', |
|
|
|
name: t('workbench.permanentGold'), |
|
|
|
type: 'bar', |
|
|
|
stack: 'consume', |
|
|
|
data: chartData.consumePermanent, |
|
|
|
@ -560,7 +563,7 @@ const updateChart = (chartData) => { |
|
|
|
barWidth: 30 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '免费金币', |
|
|
|
name: t('workbench.freeGold'), |
|
|
|
type: 'bar', |
|
|
|
stack: 'consume', |
|
|
|
data: chartData.consumeFree, |
|
|
|
@ -568,7 +571,7 @@ const updateChart = (chartData) => { |
|
|
|
barWidth: 30 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '任务金币', |
|
|
|
name: t('workbench.taskGold'), |
|
|
|
type: 'bar', |
|
|
|
stack: 'consume', |
|
|
|
data: chartData.consumeTask, |
|
|
|
@ -576,7 +579,7 @@ const updateChart = (chartData) => { |
|
|
|
barWidth: 30 |
|
|
|
} |
|
|
|
] |
|
|
|
legend = ['永久金币', '免费金币', '任务金币'] |
|
|
|
legend = [t('workbench.permanentGold'), t('workbench.freeGold'), t('workbench.taskGold')] |
|
|
|
} |
|
|
|
|
|
|
|
const option = { |
|
|
|
@ -592,7 +595,7 @@ const updateChart = (chartData) => { |
|
|
|
result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`; |
|
|
|
total += param.value; |
|
|
|
}) |
|
|
|
result += `总${activeTab.value === 'recharge' ? '充值' : '消费'}: ${total.toLocaleString()}`; |
|
|
|
result += `${t('workbench.all')}${activeTab.value === 'recharge' ? t('workbench.recharge') : t('workbench.consume')}: ${total.toLocaleString()}`; |
|
|
|
return result |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -648,7 +651,7 @@ const updateChart = (chartData) => { |
|
|
|
chartInstance.setOption(option) |
|
|
|
} catch (error) { |
|
|
|
console.error('图表更新失败:', error) |
|
|
|
ElMessage.error('图表渲染失败') |
|
|
|
ElMessage.error(t('elmessage.renderChartFailed')) |
|
|
|
} finally { |
|
|
|
setTimeout(() => { |
|
|
|
chartLoading.value = false |
|
|
|
|
zhangrenyuan
1 month ago