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

✨ feat: 完善多语言支持，优化工作台组件文本

milestone-20251209-多语言二期^2
zhangrenyuan 1 month ago
parent
666f205f16
commit
ecd77996d5
6 changed files with 210 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 82
      src/components/locales/lang/zh-CN.js
  2. 46
      src/components/workspace/CashManagement.vue
  3. 73
      src/components/workspace/GoldGraph.vue
  4. 57
      src/components/workspace/GoldGraphMarkets.vue
  5. 56
      src/components/workspace/GoldManagement.vue
  6. 7
      src/views/workspace/index.vue

82
src/components/locales/lang/zh-CN.js
View File

@ -150,6 +150,10 @@ export default {
executed: '执行完成', executed: '执行完成',
errorExecution: '执行出错', errorExecution: '执行出错',
unknownStatus: '未知状态', unknownStatus: '未知状态',
// 获取
getMarketListFailed: '获取市场列表失败，请稍后重试',
getChartDataFailed: '获取图表数据失败，请稍后重试',
renderChartFailed: '图表渲染失败，请稍后重试',
}, },
// 通用列表字段组 // 通用列表字段组
@ -425,4 +429,82 @@ export default {
refund: '退款', refund: '退款',
} }
}, },
// 工作台组
workbench: {
// 头部
dataOverview: '数据总览',
loading: '加载中...',
// 现金管理
cashManagement: '现金管理',
dataExplanationTitle: '数据说明',
dataExplanationContent: '此数据实时计算，存在误差，请勿作为最终数据使用。',
totalRevenue: '总营收',
SGD: '新币',
collect: '代收',
Singapore: '新加坡',
Malaysia: '马来西亚',
HongKong: '香港',
Thailand: '泰国',
VietnamHCM: '越南HCM',
Canada: '加拿大',
MYR: '马币',
HKD: '港币',
CAD: '加币',
THB: '泰铢',
VND: '越南盾',
// 金币管理
goldManagement: '金币管理',
lastUpdateTime: '最后更新时间：',
noData: '该地区暂无数据',
// card1
currentGoldBalance: '当前金币余量',
compareToPreviousDay: '较前一日',
permanentGold: '永久金币',
freeGold: '免费金币',
taskGold: '任务金币',
goldExpireIn6Months: '6月到期：',
goldExpireIn12Months: '12月到期：',
// card2
annualCumulativeRecharge: '全年累计充值金币数：',
convertedSGDCumulativeAmount: '折合新币累计金额：',
yesterdayNew: '昨日新增金币：',
wherePermanentGold: '其中永久金币：',
// card3
annualCumulativeConsume: '全年累计消费金币数：',
consume: '消耗：',
refund: '退款：',
yesterdayNewAll: '昨日新增消费：',
yesterdayNewConsume: '昨日新增消耗：',
yesterdayNewRefund: '昨日新增退款：',
// card4
annualCumulativeRechargePeople: '全年累计充值人头数：',
weekYearOnYear: '周同比：',
dayYearOnYear: '日同比：',
yesterdayRechargePeople: '昨日充值人数：',
whereFirstRecharge: '其中首充：',
// 总部/研发部，地区表
coinRecharge: '金币充值',
coinConsume: '金币消费',
total: '合计：',
yesterday: '昨天',
today: '今天',
thisWeek: '本周',
thisMonth: '本月',
thisYear: '本年',
startTime: '开始时间',
endTime: '结束时间',
query: '查询',
// 筛选统计表
gold: '金币',
recharge: '充值',
consume: '消费',
rank: '排名',
allTypes: '全部类型',
region: '地区',
goldCount: '金币数量',
all: '总',
marketTitle: '数据说明',
marketContent: '若统计周期跨越 40 天以上，将展示月份维度的数据。',
}
} }

46
src/components/workspace/CashManagement.vue
View File

@ -2,16 +2,16 @@
<div class="cash-management"> <div class="cash-management">
<div class="cash-title"> <div class="cash-title">
<div class="text1"> <div class="text1">
现金管理
{{ t('workbench.cashManagement') }}
<!-- <span class="text1-update-time">--> <!-- <span class="text1-update-time">-->
<!-- 最后更新时间：{{ workDataUpdateTime || '该地区暂无数据' }}--> <!-- 最后更新时间：{{ workDataUpdateTime || '该地区暂无数据' }}-->
<!-- </span>--> <!-- </span>-->
<el-popover <el-popover
placement="top-start" placement="top-start"
title="数据说明"
:title="t('workbench.dataExplanationTitle')"
:width="240" :width="240"
trigger="hover" trigger="hover"
content="此数据实时计算，存在误差，请勿作为最终数据使用。"
:content="t('workbench.dataExplanationContent')"
> >
<template #reference> <template #reference>
<el-icon <el-icon
@ -31,7 +31,7 @@
<div class=" text2 <div class=" text2
"> ">
<span class="text2-income">总营收：{{ totalIncome.toFixed(2) }} 新币</span>
<span class="text2-income">{{ t('workbench.totalRevenue') }}：{{ totalIncome.toFixed(2) }} {{ t('workbench.SGD') }}</span>
</div> </div>
<div class="chart-container"> <div class="chart-container">
@ -39,11 +39,11 @@
<div class="market-data"> <div class="market-data">
<div v-if="marksFlag" v-for="market in cashData.markets" :key="market.name" class="market-item"> <div v-if="marksFlag" v-for="market in cashData.markets" :key="market.name" class="market-item">
<span class="market-name">{{ market.name }}：</span> <span class="market-name">{{ market.name }}：</span>
<span class="market-value">{{ market.value.toLocaleString() }} 新币</span>
<span class="market-value">{{ market.value.toLocaleString() }} {{ t('workbench.SGD') }}</span>
</div> </div>
<div v-else v-for="item in cashData.markets" :key="item.name" class="market-item"> <div v-else v-for="item in cashData.markets" :key="item.name" class="market-item">
<span class="market-name">代收{{ item.name }}：</span>
<span class="market-value">{{ item.value.toLocaleString() }} </span>
<span class="market-name">{{ t('workbench.collect')}}{{ item.name }}：</span>
<span class="market-value">{{ item.value.toLocaleString() }}</span>
</div> </div>
@ -61,6 +61,9 @@ import {onMounted, ref} from 'vue'
import request from "@/util/http.js"; import request from "@/util/http.js";
import API from "@/util/http.js"; import API from "@/util/http.js";
import {Warning, Service} from "@element-plus/icons-vue"; import {Warning, Service} from "@element-plus/icons-vue";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const chartRef = ref(null) const chartRef = ref(null)
@ -75,12 +78,12 @@ const markets = ref()
// 定义默认市场 // 定义默认市场
const defaultMarkets = [ const defaultMarkets = [
{name: '新加坡', value: 0},
{name: '马来西亚', value: 0},
{name: '香港', value: 0},
{name: '泰国', value: 0},
{name: '越南HCM', value: 0},
{name: '加拿大', value: 0},
{name: t('workbench.Singapore'), value: 0},
{name: t('workbench.Malaysia'), value: 0},
{name: t('workbench.HongKong'), value: 0},
{name: t('workbench.Thailand'), value: 0},
{name: t('workbench.VietnamHCM'), value: 0},
{name: t('workbench.Canada'), value: 0},
// {name: '未知', value: 0}, // {name: '未知', value: 0},
// { name: '其他', value: 0 }, // { name: '其他', value: 0 },
// {name: '市场部', value: 0}, // {name: '市场部', value: 0},
@ -132,14 +135,14 @@ const fetchCashData = async () => {
value: resMap.get(m.name) ?? 0 value: resMap.get(m.name) ?? 0
})) }))
} else if (marksFlag.value=== false) { } else if (marksFlag.value=== false) {
// 1. 定义币种中英文对照表
// 1. 定义币种中英文对照表 代收地区的币种
const currencyMap = { const currencyMap = {
sgd: '新币',
myr: '马币',
hkd: '港币',
cad: '加币',
thb: '泰铢',
vdn: '越南盾',
sgd: t('workbench.SGD'),
myr: t('workbench.MYR'),
hkd: t('workbench.HKD'),
cad: t('workbench.CAD'),
thb: t('workbench.THB'),
vdn: t('workbench.VND'),
}; };
// 2. 取出所有币种字段（排除 market 与 totalSGD），只保留 currencyMap 中定义的币种 // 2. 取出所有币种字段（排除 market 与 totalSGD），只保留 currencyMap 中定义的币种
@ -191,7 +194,8 @@ const getAdminData = async function () {
try { try {
loading.value = true; // 开始加载 loading.value = true; // 开始加载
const result = await API({url: '/admin/userinfo', data: {}}); const result = await API({url: '/admin/userinfo', data: {}});
marksFlag.value = result.markets === '总部' || result.markets === '研发部';
marksFlag.value = result.markets === '总部' || result.markets === '研发部'
|| result.markets === 'headquarters' || result.markets === 'R&D Department';
console.log("marksFlag", marksFlag.value); console.log("marksFlag", marksFlag.value);
// alert(marksFlag.value) // alert(marksFlag.value)
} catch (error) { } catch (error) {

73
src/components/workspace/GoldGraph.vue
View File

@ -3,46 +3,46 @@
<el-card style="width:100%;" class="graph-card"> <el-card style="width:100%;" class="graph-card">
<div> <div>
<el-tabs v-model="activeTab" @tab-change="handleTabChange"> <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> </el-tabs>
</div> </div>
<div class="condition"> <div class="condition">
<div class="stats"> <div class="stats">
<div v-if="activeTab === 'consume'">合计：{{ sumConsume / 100 }}</div>&nbsp;&nbsp;
永久金币: {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }}&nbsp;&nbsp;
免费金币: {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}&nbsp;&nbsp;
任务金币: {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}&nbsp;&nbsp;
<div v-if="activeTab === 'consume'">{{ t('workbench.total') }} {{ sumConsume / 100 }}</div>&nbsp;&nbsp;
{{ t('workbench.permanentGold') }}：{{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }}&nbsp;&nbsp;
{{ t('workbench.freeGold') }}：{{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}&nbsp;&nbsp;
{{ t('workbench.taskGold') }}：{{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}&nbsp;&nbsp;
</div> </div>
<div style="display: flex"> <div style="display: flex">
<el-button <el-button
:style="{ backgroundColor: activeTimeRange === 'yes' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'yes' ? 'white' : '#666' }" :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>
<el-button <el-button
:style="{ backgroundColor: activeTimeRange === 'today' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'today' ? 'white' : '#666' }" :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>
<el-button <el-button
:style="{ backgroundColor: activeTimeRange === 'week' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'week' ? 'white' : '#666' }" :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>
<el-button <el-button
:style="{ backgroundColor: activeTimeRange === 'month' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'month' ? 'white' : '#666' }" :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>
<el-button <el-button
:style="{ backgroundColor: activeTimeRange === 'year' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'year' ? 'white' : '#666' }" :style="{ backgroundColor: activeTimeRange === 'year' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'year' ? 'white' : '#666' }"
@click="getYear()" size="default">本年
@click="getYear()" size="default">{{ t('workbench.thisYear') }}
</el-button> </el-button>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="→" <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" style="width:20vw;margin-left:0.5vw;" value-format="YYYY-MM-DD HH:mm:ss"
:default-time="defaultTime" :default-time="defaultTime"
:disabled-date="disabledDate" @change="handleDatePickerChange"/> :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>
</div> </div>
@ -54,22 +54,22 @@
</div> </div>
<div class="right"> <div class="right">
<el-card class="graph-card-list"> <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" <el-select popper-class="mySelectStyle" class="card-select" v-model="selectedType"
style="width: 100%; margin-bottom: 15px"> 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-select>
<el-table class="card-table" :data="tableData" height="320px"> <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"> <template #default="scope">
<span>{{ marketMapping[scope.row.market] || scope.row.market }}</span> <span>{{ marketMapping[scope.row.market] || scope.row.market }}</span>
</template> </template>
</el-table-column> </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 }"> <template #default="{ row }">
{{ row.coinAmount.toLocaleString() }} {{ row.coinAmount.toLocaleString() }}
</template> </template>
@ -90,6 +90,9 @@ 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'
import {marketMapping} from "@/utils/marketMap.js"; import {marketMapping} from "@/utils/marketMap.js";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
dayjs.extend(utc) dayjs.extend(utc)
@ -359,11 +362,11 @@ const getMarkets = async () => {
console.log('市场列表获取成功:', markets.value) console.log('市场列表获取成功:', markets.value)
} else { } else {
console.error('获取市场列表失败', response) console.error('获取市场列表失败', response)
ElMessage.error('获取市场列表失败')
ElMessage.error(t('elmessage.getMarketListFailed'))
} }
} catch (error) { } catch (error) {
console.error('获取市场列表失败:', error) console.error('获取市场列表失败:', error)
ElMessage.error('获取市场列表失败')
ElMessage.error(t('elmessage.getMarketListFailed'))
} }
} }
@ -398,11 +401,11 @@ const getChartData = async () => {
processRankingData(response.marketGraphs) processRankingData(response.marketGraphs)
} else { } else {
console.error('获取图表数据失败:', response) console.error('获取图表数据失败:', response)
ElMessage.error('获取图表数据失败')
ElMessage.error(t('elmessage.getChartDataFailed'))
} }
} catch (error) { } catch (error) {
console.error('获取图表数据失败:', error) console.error('获取图表数据失败:', error)
ElMessage.error('获取图表数据失败')
ElMessage.error(t('elmessage.getChartDataFailed'))
} }
} }
// 处理图表数据 // 处理图表数据
@ -524,7 +527,7 @@ const updateChart = (chartData) => {
if (activeTab.value === 'recharge') { if (activeTab.value === 'recharge') {
series = [ series = [
{ {
name: '永久金币',
name: t('workbench.permanentGold'),
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargePermanent, data: chartData.rechargePermanent,
@ -532,7 +535,7 @@ const updateChart = (chartData) => {
barWidth: 30 barWidth: 30
}, },
{ {
name: '免费金币',
name: t('workbench.freeGold'),
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeFree, data: chartData.rechargeFree,
@ -540,7 +543,7 @@ const updateChart = (chartData) => {
barWidth: 30 barWidth: 30
}, },
{ {
name: '任务金币',
name: t('workbench.taskGold'),
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeTask, data: chartData.rechargeTask,
@ -548,11 +551,11 @@ const updateChart = (chartData) => {
barWidth: 30 barWidth: 30
} }
] ]
legend = ['永久金币', '免费金币', '任务金币']
legend = [t('workbench.permanentGold'), t('workbench.freeGold'), t('workbench.taskGold')]
} else { } else {
series = [ series = [
{ {
name: '永久金币',
name: t('workbench.permanentGold'),
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumePermanent, data: chartData.consumePermanent,
@ -560,7 +563,7 @@ const updateChart = (chartData) => {
barWidth: 30 barWidth: 30
}, },
{ {
name: '免费金币',
name: t('workbench.freeGold'),
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumeFree, data: chartData.consumeFree,
@ -568,7 +571,7 @@ const updateChart = (chartData) => {
barWidth: 30 barWidth: 30
}, },
{ {
name: '任务金币',
name: t('workbench.taskGold'),
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumeTask, data: chartData.consumeTask,
@ -576,7 +579,7 @@ const updateChart = (chartData) => {
barWidth: 30 barWidth: 30
} }
] ]
legend = ['永久金币', '免费金币', '任务金币']
legend = [t('workbench.permanentGold'), t('workbench.freeGold'), t('workbench.taskGold')]
} }
const option = { const option = {
@ -592,7 +595,7 @@ const updateChart = (chartData) => {
result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`; result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`;
total += param.value; 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 return result
} }
}, },
@ -648,7 +651,7 @@ const updateChart = (chartData) => {
chartInstance.setOption(option) chartInstance.setOption(option)
} catch (error) { } catch (error) {
console.error('图表更新失败:', error) console.error('图表更新失败:', error)
ElMessage.error('图表渲染失败')
ElMessage.error(t('elmessage.renderChartFailed'))
} finally { } finally {
setTimeout(() => { setTimeout(() => {
chartLoading.value = false chartLoading.value = false

57
src/components/workspace/GoldGraphMarkets.vue
View File

@ -5,55 +5,55 @@
<el-card style="width:100%;" class="graph-card"> <el-card style="width:100%;" class="graph-card">
<div> <div>
<el-tabs v-model="activeTab" @tab-change="handleTabChange"> <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> </el-tabs>
</div> </div>
<div class="condition"> <div class="condition">
<div class="stats"> <div class="stats">
<div v-if="activeTab === 'consume'">合计：{{ sumConsume }}</div>&nbsp;&nbsp;
永久金币: {{ activeTab === 'recharge' ? sumRechargePermanent : sumConsumePermanent }}&nbsp;&nbsp;
免费金币: {{ activeTab === 'recharge' ? sumRechargeFree : sumConsumeFree }}&nbsp;&nbsp;
任务金币: {{ activeTab === 'recharge' ? sumRechargeTask : sumConsumeTask }}&nbsp;&nbsp;
<div v-if="activeTab === 'consume'">{{ t('workbench.total') }} {{ sumConsume }}</div>&nbsp;&nbsp;
{{ t('workbench.permanentGold') }}: {{ activeTab === 'recharge' ? sumRechargePermanent : sumConsumePermanent }}&nbsp;&nbsp;
{{ t('workbench.freeGold') }}: {{ activeTab === 'recharge' ? sumRechargeFree : sumConsumeFree }}&nbsp;&nbsp;
{{ t('workbench.taskGold') }}: {{ activeTab === 'recharge' ? sumRechargeTask : sumConsumeTask }}&nbsp;&nbsp;
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<el-button <el-button
:style="{ backgroundColor: activeTimeRange === 'yes' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'yes' ? 'white' : '#666' }" :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>
<el-button <el-button
:style="{ backgroundColor: activeTimeRange === 'today' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'today' ? 'white' : '#666' }" :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>
<el-button <el-button
:style="{ backgroundColor: activeTimeRange === 'week' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'week' ? 'white' : '#666' }" :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>
<el-button <el-button
:style="{ backgroundColor: activeTimeRange === 'month' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'month' ? 'white' : '#666' }" :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>
<el-button <el-button
:style="{ backgroundColor: activeTimeRange === 'year' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'year' ? 'white' : '#666' }" :style="{ backgroundColor: activeTimeRange === 'year' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'year' ? 'white' : '#666' }"
@click="getYear()" size="default">本年
@click="getYear()" size="default">{{ t('workbench.thisYear') }}
</el-button> </el-button>
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="→" <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" style="width:20vw;margin-left:0.5vw;" value-format="YYYY-MM-DD HH:mm:ss"
:default-time="defaultTime" :default-time="defaultTime"
:disabled-date="disabledDate" @change="handleDatePickerChange"/> :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>
<el-popover <el-popover
placement="top-start" placement="top-start"
title="数据说明"
:title="t('workbench.marketTitle')"
:width="240" :width="240"
trigger="hover" trigger="hover"
content="若统计周期跨越 40 天以上，将展示月份维度的数据。"
:content="t('workbench.marketContent')"
> >
<template #reference> <template #reference>
<el-icon <el-icon
@ -88,6 +88,9 @@ import dayjs from 'dayjs';
import utc from 'dayjs-plugin-utc' import utc from 'dayjs-plugin-utc'
import {marketMapping} from "@/utils/marketMap.js"; import {marketMapping} from "@/utils/marketMap.js";
import {Service,Warning} from "@element-plus/icons-vue"; import {Service,Warning} from "@element-plus/icons-vue";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
dayjs.extend(utc) dayjs.extend(utc)
@ -360,7 +363,7 @@ const getChartData = async () => {
}) })
if (!response.marketGraphs || !Array.isArray(response.marketGraphs)) { if (!response.marketGraphs || !Array.isArray(response.marketGraphs)) {
ElMessage.error('获取图表数据失败')
ElMessage.error(t('elmessage.getChartDataFailed'))
return return
} }
@ -415,7 +418,7 @@ const getChartData = async () => {
}) })
} catch (error) { } catch (error) {
console.error('获取图表数据失败:', error) console.error('获取图表数据失败:', error)
ElMessage.error('获取图表数据失败')
ElMessage.error(t('elmessage.getChartDataFailed'))
} }
} }
@ -436,47 +439,47 @@ const updateChart = (chartData) => {
if (activeTab.value === 'recharge') { if (activeTab.value === 'recharge') {
series = [ series = [
{ {
name: '永久金币',
name: t('workbench.permanentGold'),
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargePermanent, data: chartData.rechargePermanent,
}, },
{ {
name: '免费金币',
name: t('workbench.freeGold'),
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeFree, data: chartData.rechargeFree,
}, },
{ {
name: '任务金币',
name: t('workbench.taskGold'),
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeTask, data: chartData.rechargeTask,
} }
] ]
legend = ['永久金币', '免费金币', '任务金币']
legend = [t('workbench.permanentGold'), t('workbench.freeGold'), t('workbench.taskGold')]
} else { } else {
series = [ series = [
{ {
name: '永久金币',
name: t('workbench.permanentGold'),
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumePermanent, data: chartData.consumePermanent,
}, },
{ {
name: '免费金币',
name: t('workbench.freeGold'),
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumeFree, data: chartData.consumeFree,
}, },
{ {
name: '任务金币',
name: t('workbench.taskGold'),
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumeTask, data: chartData.consumeTask,
} }
] ]
legend = ['永久金币', '免费金币', '任务金币']
legend = [t('workbench.permanentGold'), t('workbench.freeGold'), t('workbench.taskGold')]
} }
const option = { const option = {
@ -490,7 +493,7 @@ const updateChart = (chartData) => {
result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>` result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`
total += param.value 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 return result
} }
}, },
@ -545,7 +548,7 @@ const updateChart = (chartData) => {
chartInstance.setOption(option) chartInstance.setOption(option)
} catch (error) { } catch (error) {
console.error('图表更新失败:', error) console.error('图表更新失败:', error)
ElMessage.error('图表渲染失败')
ElMessage.error(t('elmessage.renderChartFailed'))
} finally { } finally {
setTimeout(() => (chartLoading.value = false), 300) setTimeout(() => (chartLoading.value = false), 300)
} }

56
src/components/workspace/GoldManagement.vue
View File

@ -2,9 +2,9 @@
<div class="gold-management"> <div class="gold-management">
<div class="gold-title"> <div class="gold-title">
<div class="text1"> <div class="text1">
金币管理
<span class="text1-update-time">最后更新时间：{{
workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
{{ t('workbench.goldManagement') }}
<span class="text1-update-time">{{ t('workbench.lastUpdateTime') }}{{
workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : t('workbench.noData')
}} </span> }} </span>
</div> </div>
</div> </div>
@ -13,10 +13,11 @@
<el-col :span="12"> <el-col :span="12">
<!-- 第一个卡片 --> <!-- 第一个卡片 -->
<div class="card-item-row1"> <div class="card-item-row1">
<div class="card-title">当前金币余量
<div class="card-title">
{{ t('workbench.currentGoldBalance') }}
<span style="font-weight: bold">{{ <span style="font-weight: bold">{{
currentGold / 100 currentGold / 100
}}</span>&nbsp;&nbsp;&nbsp;&nbsp;较前一日
}}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{ t('workbench.compareToPreviousDay') }}
{{ dailyChange / 100 }}&nbsp; {{ dailyChange / 100 }}&nbsp;
<template v-if="dailyChange > 0"> <template v-if="dailyChange > 0">
<el-image :src="upArrow" style="width: 14px;"/> <el-image :src="upArrow" style="width: 14px;"/>
@ -33,26 +34,26 @@
<!-- 左边文本信息 --> <!-- 左边文本信息 -->
<el-col :span="12"> <el-col :span="12">
<div class="margin-bottom" style="white-space: nowrap;"> <div class="margin-bottom" style="white-space: nowrap;">
永久金币：<b>{{ currentPermanent / 100 }}</b>
{{ t('workbench.permanentGold') }}：<b>{{ currentPermanent / 100 }}</b>
</div> </div>
<div class="margin-bottom">&nbsp;</div> <div class="margin-bottom">&nbsp;</div>
<div class="margin-bottom">免费金币：{{ currentFree / 100 }}</div>
<div class="margin-bottom">{{ t('workbench.freeGold') }}：<b>{{ currentFree / 100 }}</b></div>
<!-- <div class="margin-bottom">&nbsp</div>--> <!-- <div class="margin-bottom">&nbsp</div>-->
<!-- <div class="margin-bottom">&nbsp</div>--> <!-- <div class="margin-bottom">&nbsp</div>-->
<div class="margin-bottom"> <div class="margin-bottom">
[6月到期：{{ currentFreeJune / 100 }}]
[{{ t('workbench.goldExpireIn6Months')}}{{ currentFreeJune / 100 }}]
</div> </div>
<div class="margin-bottom">&nbsp;</div> <div class="margin-bottom">&nbsp;</div>
<div class="margin-bottom">任务金币：{{ currentTask / 100 }}</div>
<div class="margin-bottom">{{ t('workbench.taskGold') }}：<b>{{ currentTask / 100 }}</b></div>
</el-col> </el-col>
<!-- 右边图表 --> <!-- 右边图表 -->
<el-col :span="12"> <el-col :span="12">
<!-- <div ref="goldTypeChart" style="width: 100%; height: 100px;"></div>--> <!-- <div ref="goldTypeChart" style="width: 100%; height: 100px;"></div>-->
<div style="width: 100%; height: 60px;">&nbsp;</div> <div style="width: 100%; height: 60px;">&nbsp;</div>
<div class="margin-bottom"> <div class="margin-bottom">
[12月到期：{{ currentFreeDecember / 100 }}]
[{{ t('workbench.goldExpireIn12Months')}}{{ currentFreeDecember / 100 }}]
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -63,17 +64,17 @@
<el-col :span="12"> <el-col :span="12">
<!-- 第二个卡片 --> <!-- 第二个卡片 -->
<div class="card-item-row1"> <div class="card-item-row1">
<div class="card-title">全年累计充值金币数：{{ yearlyRecharge / 100 }}</div>
<div class="card-title">{{ t('workbench.annualCumulativeRecharge')}}{{ yearlyRecharge / 100 }}</div>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<div class="center-card">折合新币累计金额</div>
<div class="center-card">{{ t('workbench.convertedSGDCumulativeAmount') }}</div>
<el-image :src="svg1" style="width: 88px; display: block;margin: 0 auto;"/> <el-image :src="svg1" style="width: 88px; display: block;margin: 0 auto;"/>
<div class="center-card">{{ yearlyMoney / 100 }}新币</div>
<div class="center-card">{{ yearlyMoney / 100 }}{{ t('workbench.SGD') }}</div>
</el-col> </el-col>
<el-col :span="12" style="border-left: 2px solid #CFE6FE; height: 160px"> <el-col :span="12" style="border-left: 2px solid #CFE6FE; height: 160px">
<div class="center-card" style="white-space: nowrap;">昨日新增金币：{{ recharge / 100 }}</div>
<div class="center-card" style="white-space: nowrap;">{{ t('workbench.yesterdayNew')}}{{ recharge / 100 }}</div>
<div ref="rechargeGoldChart" style="width: 88px; height: 88px; display: block;margin: 0 auto;"></div> <div ref="rechargeGoldChart" style="width: 88px; height: 88px; display: block;margin: 0 auto;"></div>
<div class="center-card" style="white-space: nowrap;">其中永久金币：{{ money / 100 }}</div>
<div class="center-card" style="white-space: nowrap;">{{ t('workbench.wherePermanentGold')}}{{ money / 100 }}</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -85,7 +86,7 @@
<el-col :span="12"> <el-col :span="12">
<!-- 第三个卡片 --> <!-- 第三个卡片 -->
<div class="card-item"> <div class="card-item">
<div class="card-title">全年累计消费金币数：{{ yearlyReduce / 100 }}</div>
<div class="card-title">{{ t('workbench.annualCumulativeConsume')}}{{ yearlyReduce / 100 }}</div>
<el-row style="height: 200px;"> <el-row style="height: 200px;">
<el-col :span="12"> <el-col :span="12">
<div ref="consumeChart" style="width:100%; height: 88%;"></div> <div ref="consumeChart" style="width:100%; height: 88%;"></div>
@ -99,19 +100,19 @@
<el-col :span="12"> <el-col :span="12">
<!-- 第四个卡片 --> <!-- 第四个卡片 -->
<div class="card-item" > <div class="card-item" >
<div class="card-title">全年累计充值人头数：{{ yearlyRechargeNum }}</div>
<div class="card-title">{{ t('workbench.annualCumulativeRechargePeople')}}{{ yearlyRechargeNum }}</div>
<el-row style="height: 200px;"> <el-row style="height: 200px;">
<el-col :span="12" style="border-right: 2px solid #CFE6FE; height: 200px"> <el-col :span="12" style="border-right: 2px solid #CFE6FE; height: 200px">
<div class="chart5"> <div class="chart5">
<el-image :src="svg2" style="width: 88px; display: block;margin: 0 auto;"/> <el-image :src="svg2" style="width: 88px; display: block;margin: 0 auto;"/>
<div class="margin-bottom"> <div class="margin-bottom">
<div style="display: flex; gap: 10px; font-size: 16px;">周同比：{{ sumWow }}%
<div style="display: flex; gap: 10px; font-size: 16px;">{{ t('workbench.weekYearOnYear')}}{{ sumWow }}%
<el-image v-if="sumWow > 0" :src="upArrow" style="width: 10px;"/> <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-if="sumWow < 0" :src="downArrow" style="width: 10px;"/>
<el-image v-else :src="pingArrow" style="width: 10px;"/> <el-image v-else :src="pingArrow" style="width: 10px;"/>
</div> </div>
<div style="display: flex; gap: 10px; font-size: 16px;"> <div style="display: flex; gap: 10px; font-size: 16px;">
日环比：{{ sumDaily }}%
{{ t('workbench.dayYearOnYear')}}{{ sumDaily }}%
<el-image v-if="sumDaily > 0" :src="upArrow" style="width: 10px;"/> <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-if="sumDaily < 0" :src="downArrow" style="width: 10px;"/>
<el-image v-else :src="pingArrow" style="width: 10px; "/> <el-image v-else :src="pingArrow" style="width: 10px; "/>
@ -145,6 +146,9 @@ import svg2 from '@/assets/SvgIcons/wow.svg'
import upArrow from '@/assets/SvgIcons/up-arrow.svg' import upArrow from '@/assets/SvgIcons/up-arrow.svg'
import downArrow from '@/assets/SvgIcons/down-arrow.svg' import downArrow from '@/assets/SvgIcons/down-arrow.svg'
import pingArrow from '@/assets/SvgIcons/unchanged.svg' import pingArrow from '@/assets/SvgIcons/unchanged.svg'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
dayjs.extend(utc) dayjs.extend(utc)
@ -388,14 +392,14 @@ const initConsumeChart = () => {
data: [ data: [
{ {
value: yearlyConsume.value / 100, value: yearlyConsume.value / 100,
name: '消耗：' + yearlyConsume.value / 100,
name: t('workbench.consume') + yearlyConsume.value / 100,
// name: '消耗：' + 1234567890, // name: '消耗：' + 1234567890,
itemStyle: {color: '#7DB7FA'} itemStyle: {color: '#7DB7FA'}
}, },
{ {
value: yearlyRefund.value / 100, value: yearlyRefund.value / 100,
name: '退款：' + yearlyRefund.value / 100,
name: t('workbench.refund') + yearlyRefund.value / 100,
itemStyle: {color: '#F7D47C'} itemStyle: {color: '#F7D47C'}
} }
@ -436,7 +440,7 @@ const initConsumeDetailChart = () => {
data: [ data: [
{ {
value: dailyConsume.value / 100, value: dailyConsume.value / 100,
name: '昨日新增消费：' + dailyConsume.value / 100,
name: t('workbench.yesterdayNewAll') + dailyConsume.value / 100,
itemStyle: {color: '#65C9C9'} itemStyle: {color: '#65C9C9'}
} }
] ]
@ -453,13 +457,13 @@ const initConsumeDetailChart = () => {
data: [ data: [
{ {
value: dailyReduce.value / 100, value: dailyReduce.value / 100,
name: '昨日新增消耗：' + dailyReduce.value / 100,
name: t('workbench.yesterdayNewConsume') + dailyReduce.value / 100,
// name: '昨日新增消耗：' + 1234567890, // name: '昨日新增消耗：' + 1234567890,
itemStyle: {color: '#9469D1'} itemStyle: {color: '#9469D1'}
}, },
{ {
value: dailyRefund.value / 100, value: dailyRefund.value / 100,
name: '昨日新增退款：' + dailyRefund.value / 100,
name: t('workbench.yesterdayNewRefund') + dailyRefund.value / 100,
itemStyle: {color: '#B8DB6E'} itemStyle: {color: '#B8DB6E'}
} }
] ]
@ -498,7 +502,7 @@ const initRechargePeopleChart = () => {
data: [ data: [
{ {
value: ydayRechargeNum.value, value: ydayRechargeNum.value,
name: '昨日充值人数：' + ydayRechargeNum.value,
name: t('workbench.yesterdayRechargePeople') + ydayRechargeNum.value,
itemStyle: {color: '#65C9C9'} itemStyle: {color: '#65C9C9'}
}, },
], ],
@ -513,7 +517,7 @@ const initRechargePeopleChart = () => {
data: [ data: [
{ {
value: firstRecharge.value, value: firstRecharge.value,
name: '其中首充：' + firstRecharge.value,
name: t('workbench.whereFirstRecharge') + firstRecharge.value,
itemStyle: {color: '#9469D1'} itemStyle: {color: '#9469D1'}
}, },
{ {

7
src/views/workspace/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<!-- 头部 --> <!-- 头部 -->
<el-header class="header"> <el-header class="header">
<div class="title">数据总览</div>
<div class="title">{{ t('workbench.dataOverview') }}</div>
</el-header> </el-header>
<div style="height: 100vh;"> <div style="height: 100vh;">
<el-row class="cards"> <el-row class="cards">
@ -15,7 +15,7 @@
</el-row> </el-row>
<el-row class="graphs"> <el-row class="graphs">
<el-col :span="24"> <el-col :span="24">
<div v-if="loading">加载中...</div>
<div v-if="loading">{{ t('workbench.loading') }}</div>
<GoldGraphMarkets v-else-if="GraphFlag" /> <GoldGraphMarkets v-else-if="GraphFlag" />
<GoldGraph v-else /> <GoldGraph v-else />
</el-col> </el-col>
@ -30,6 +30,9 @@ import GoldGraphMarkets from "@/components/workspace/GoldGraphMarkets.vue";
import API from "@/util/http.js"; import API from "@/util/http.js";
import {onMounted, ref} from "vue"; import {onMounted, ref} from "vue";
import GoldGraph from "@/components/workspace/GoldGraph.vue"; import GoldGraph from "@/components/workspace/GoldGraph.vue";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const GraphFlag = ref(); const GraphFlag = ref();
const loading = ref(true); // 新增加载状态 const loading = ref(true); // 新增加载状态

Write Preview
Loading…
Cancel
Save