From 2864fde2d2caab0e1336ad16f2f511ce20c9b686 Mon Sep 17 00:00:00 2001 From: lihui Date: Tue, 14 Oct 2025 11:18:49 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=8C=89=E9=92=AE?= =?UTF-8?q?=20add:=E5=AF=B9=E6=8E=A5=E5=BA=95=E9=83=A8=E6=9F=B1=E7=8A=B6?= =?UTF-8?q?=E5=9B=BE=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/btn.css | 4 +- src/components/workspace/GoldGraphMarkets.vue | 325 +++++++++----------------- src/views/workspace/index.vue | 30 ++- 3 files changed, 131 insertions(+), 228 deletions(-) diff --git a/src/assets/css/btn.css b/src/assets/css/btn.css index ee9dfc7..7de8265 100644 --- a/src/assets/css/btn.css +++ b/src/assets/css/btn.css @@ -20,8 +20,8 @@ v-if="hasRecharge" color: #666; /* 未激活文字色 */ /* 确保激活状态下 hover 也不变化 */ &:hover { - background-color: #E5EBFE !important; /* 保持默认背景色 */ - color: #666 !important; /* 保持默认文字色 */ + background-color: #668BFF !important; /* 保持默认背景色 */ + color: #fff !important; /* 保持默认文字色 */ border-color: transparent; /* 若有边框，保持默认 */ } } diff --git a/src/components/workspace/GoldGraphMarkets.vue b/src/components/workspace/GoldGraphMarkets.vue index 3de971f..d7ba7c3 100644 --- a/src/components/workspace/GoldGraphMarkets.vue +++ b/src/components/workspace/GoldGraphMarkets.vue @@ -16,7 +16,7 @@ 免费金币: {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}   任务金币: {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}   -
+
昨天 今天 @@ -28,42 +28,42 @@ 本年
-
+
+ 查询 +
+ + + +
-
-
- -
金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名
- - - - - - - - - - - - - - - - -
+
@@ -77,6 +77,7 @@ import {ElMessage} from 'element-plus' import dayjs from 'dayjs'; import utc from 'dayjs-plugin-utc' import {marketMapping} from "@/utils/marketMap.js"; +import {Service} from "@element-plus/icons-vue"; dayjs.extend(utc) @@ -329,180 +330,95 @@ const disabledDate = (time) => { return time.getTime() < limitDate.getTime(); } +// x 轴数据 +const dates = ref() + + // 获取市场列表 -const getMarkets = async () => { - console.log("adminData", adminData.value.account) - try { - const response = await API({ - url: '/general/adminMarkets', - data: { - account: adminData.value.account - } - }) - if (Array.isArray(response.data)) { - // markets.value = response.data.filter(data => data !== "1") - markets.value = response.data - console.log('市场列表获取成功:', markets.value) - } else { - console.error('获取市场列表失败', response) - ElMessage.error('获取市场列表失败') - } - } catch (error) { - console.error('获取市场列表失败:', error) - ElMessage.error('获取市场列表失败') - } -} // 获取图表数据 const getChartData = async () => { - try { - // 校验市场数据到底有没有 - if (!markets.value || markets.value.length === 0) { - await getMarkets() - } - // 本年 - if (!dateRange.value || dateRange.value.length === 0) { - getYear() - } - const params = { - markets: markets.value, - startDate: dateRange.value[0], - endDate: dateRange.value[1] - }; - + const params = { + startDate: dateRange.value[0], + endDate: dateRange.value[1], + } + try { const response = await API({ - url: '/workbench/getGraph', + url: '/workbench/getSingleGraph', data: params }) - console.log('看看params', params) - if (Array.isArray(response.marketGraphs)) { - // const filteredGraphs = response.marketGraphs.filter(data => data.market !== "1"); - // 处理图表数据 - processChartData(response.marketGraphs) - // 处理排名数据 - processRankingData(response.marketGraphs) - } else { - console.error('获取图表数据失败:', response) + + if (!response.marketGraphs || !Array.isArray(response.marketGraphs)) { ElMessage.error('获取图表数据失败') + return + } + + + // 取出数据 + const marketGraphs = response.marketGraphs + console.log('图表数据:', marketGraphs) + +// 先排序 + marketGraphs.sort((a, b) => new Date(a.currentDate) - new Date(b.currentDate)); + +// 再生成 X 轴数据（基于排序后的数组） + const validDates = marketGraphs.map(item => item.currentDate).filter(date => date != null); + if (validDates.length === 0) { + console.log('没有日数据,使用月数据'); + dates.value = marketGraphs.map(item => item.currentMonth); + } else { + dates.value = validDates; } + + + // 充值数据 + const rechargePermanent = marketGraphs.map(item => item.sumRechargePermanent || 0).map(item => item / 100); + const rechargeFree = marketGraphs.map(item => item.sumRechargeFree || 0).map(item => item / 100); + const rechargeTask = marketGraphs.map(item => item.sumRechargeTask || 0).map(item => item / 100); + + // 消费数据 + const consumePermanent = marketGraphs.map(item => item.sumConsumePermanent || 0).map(item => item / 100); + const consumeFree = marketGraphs.map(item => item.sumConsumeFree || 0).map(item => item / 100); + const consumeTask = marketGraphs.map(item => item.sumConsumeTask || 0).map(item => item / 100); + + // 计算合计（注意 /100） + sumRechargePermanent.value = rechargePermanent.reduce((a, b) => a + b, 0) + sumRechargeFree.value = rechargeFree.reduce((a, b) => a + b, 0) + sumRechargeTask.value = rechargeTask.reduce((a, b) => a + b, 0) + + sumConsumePermanent.value = consumePermanent.reduce((a, b) => a + b, 0) + sumConsumeFree.value = consumeFree.reduce((a, b) => a + b, 0) + sumConsumeTask.value = consumeTask.reduce((a, b) => a + b, 0) + sumConsume.value = + sumConsumePermanent.value + sumConsumeFree.value + sumConsumeTask.value + + // 更新图表 + updateChart({ + dates, + rechargePermanent, + rechargeFree, + rechargeTask, + consumePermanent, + consumeFree, + consumeTask + }) } catch (error) { console.error('获取图表数据失败:', error) ElMessage.error('获取图表数据失败') } } -// 处理图表数据 -const processChartData = (marketCards) => { - const chartData = { - rechargePermanent: [], - rechargeFree: [], - rechargeTask: [], - consumePermanent: [], - consumeFree: [], - consumeTask: [], - sumConsume: [] - } - // 这是图表的合计数，怎样遍历？？？？？ - const sumRechargePermanent1 = ref(0) - const sumRechargeFree1 = ref(0) - const sumRechargeTask1 = ref(0) - const sumConsumePermanent1 = ref(0) - const sumConsumeFree1 = ref(0) - const sumConsumeTask1 = ref(0) - const sumConsume1 = ref(0) - - - marketCards.forEach(market => { - chartData.rechargePermanent.push(market.sumRechargePermanent / 100 || 0) - chartData.rechargeFree.push(market.sumRechargeFree / 100 || 0) - chartData.rechargeTask.push(market.sumRechargeTask / 100 || 0) - chartData.consumePermanent.push(market.sumConsumePermanent / 100 || 0) - chartData.consumeFree.push(market.sumConsumeFree / 100 || 0) - chartData.consumeTask.push(market.sumConsumeTask / 100 || 0) - chartData.sumConsume.push(market.sumConsume / 100 || 0) - - // 合计数合计数合计数咋算 - sumRechargePermanent1.value += (market.sumRechargePermanent || 0) - sumRechargeFree1.value += (market.sumRechargeFree || 0) - //sumRechargeTask1.value += (market.sumRechargeTask || 0) - sumConsumePermanent1.value += (market.sumConsumePermanent || 0) - sumConsumeFree1.value += (market.sumConsumeFree || 0) - sumConsumeTask1.value += (market.sumConsumeTask || 0) - sumConsume1.value += (market.sumConsume || 0) - }) - sumRechargePermanent.value = sumRechargePermanent1.value - sumRechargeFree.value = sumRechargeFree1.value - sumRechargeTask.value = 0 - sumConsumePermanent.value = sumConsumePermanent1.value - sumConsumeFree.value = sumConsumeFree1.value - sumConsumeTask.value = sumConsumeTask1.value - sumConsume.value = sumConsume1.value - - updateChart(chartData) -} -const processRankingData = (marketCards) => { - // 每个市场的总金币数 - const rankingData = marketCards.map(market => { - let coinAmount = 0; - if (activeTab.value === 'recharge') { - // 充值排名 - switch (selectedType.value) { - case 'all': - coinAmount = (market.sumRechargePermanent / 100 || 0) + (market.sumRechargeFree / 100 || 0) + (market.sumRechargeTask / 100 || 0); - break; - case 'permanent': - coinAmount = market.sumRechargePermanent / 100 || 0; - break; - case 'free': - coinAmount = market.sumRechargeFree / 100 || 0; - break; - case 'task': - coinAmount = market.sumRechargeTask / 100 || 0; - break; - } - } else { - // 消费排名 - switch (selectedType.value) { - case 'all': - coinAmount = (market.sumConsumePermanent / 100 || 0) + (market.sumConsumeFree / 100 || 0) + (market.sumConsumeTask / 100 || 0); - break; - case 'permanent': - coinAmount = market.sumConsumePermanent / 100 || 0; - break; - case 'free': - coinAmount = market.sumConsumeFree / 100 || 0; - break; - case 'task': - coinAmount = market.sumConsumeTask / 100 || 0; - break; - } - } - return { - market: market.market, - coinAmount: coinAmount - }; - }); - - // 按金币数量排序 - rankingData.sort((a, b) => b.coinAmount - a.coinAmount); - - // 排名序号 - tableData.value = rankingData.map((item, index) => ({ - rank: index + 1, - ...item - })); -} watch(selectedType, () => { getChartData(); }); // 更新图表 const updateChart = (chartData) => { - if (!chartInstance) { - initChart() - } + if (!chartInstance) initChart() + chartLoading.value = true + try { let series = [] let legend = [] @@ -514,24 +430,18 @@ const updateChart = (chartData) => { type: 'bar', stack: 'recharge', data: chartData.rechargePermanent, - itemStyle: {color: '#5470c6'}, - barWidth: 30 }, { name: '免费金币', type: 'bar', stack: 'recharge', data: chartData.rechargeFree, - itemStyle: {color: '#91cc75'}, - barWidth: 30 }, { name: '任务金币', type: 'bar', stack: 'recharge', data: chartData.rechargeTask, - itemStyle: {color: '#fac858'}, - barWidth: 30 } ] legend = ['永久金币', '免费金币', '任务金币'] @@ -542,24 +452,18 @@ const updateChart = (chartData) => { type: 'bar', stack: 'consume', data: chartData.consumePermanent, - itemStyle: {color: '#5470c6'}, - barWidth: 30 }, { name: '免费金币', type: 'bar', stack: 'consume', data: chartData.consumeFree, - itemStyle: {color: '#91cc75'}, - barWidth: 30 }, { name: '任务金币', type: 'bar', stack: 'consume', data: chartData.consumeTask, - itemStyle: {color: '#fac858'}, - barWidth: 30 } ] legend = ['永久金币', '免费金币', '任务金币'] @@ -568,19 +472,7 @@ const updateChart = (chartData) => { const option = { tooltip: { trigger: 'axis', - axisPointer: { - type: 'shadow' - }, - formatter: function (params) { - let result = params[0].name + '
' - let total = 0; - params.forEach(param => { - result += `${param.seriesName}: ${param.value.toLocaleString()}
`; - total += param.value; - }) - result += `总${activeTab.value === 'recharge' ? '充值' : '消费'}: ${total.toLocaleString()}`; - return result - } + axisPointer: {type: 'shadow'}, }, legend: { data: legend, @@ -594,30 +486,24 @@ const updateChart = (chartData) => { }, xAxis: { type: 'category', - // 横坐标数据 之后要改成一个时间的 - data: markets.value, + data: chartData.dates.value, axisLabel: { - interval: 0, - rotate: 0 + rotate: 45 } }, yAxis: { type: 'value', + axisLabel: { + formatter: (v) => v.toLocaleString() + }, splitLine: { lineStyle: { type: 'dashed', - width: 1, - color: '#000000' + width: 1 } - }, - axisLabel: { - formatter: function (value) { - return value.toLocaleString() - } - }, - + } }, - series: series, + series, // dataZoom: [ // { // type: 'slider', @@ -637,9 +523,7 @@ const updateChart = (chartData) => { console.error('图表更新失败:', error) ElMessage.error('图表渲染失败') } finally { - setTimeout(() => { - chartLoading.value = false - }, 300) + setTimeout(() => (chartLoading.value = false), 300) } } @@ -668,7 +552,6 @@ const handleDatePickerChange = () => { onMounted(async () => { await getAdminData() - await getMarkets() getYear() window.addEventListener('resize', () => { chartInstance.resize() diff --git a/src/views/workspace/index.vue b/src/views/workspace/index.vue index 485bcb1..e04502f 100644 --- a/src/views/workspace/index.vue +++ b/src/views/workspace/index.vue @@ -15,21 +15,41 @@ - +
加载中...
+ +