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' ? '充值' : '消费' }}排名
-
-
-
-
-
-
-
-
-
-
- {{ marketMapping[scope.row.market] || scope.row.market }}
-
-
-
-
- {{ row.coinAmount.toLocaleString() }}
-
-
-
-
-
+
@@ -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 @@
-
+ 加载中...
+
+