From 397592b0c58df9bc5ff6b92177c9f4f07924bbb9 Mon Sep 17 00:00:00 2001
From: lihuilin <analsak@163.com>
Date: Wed, 2 Jul 2025 21:18:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=AE=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development              |   4 +-
 src/views/workspace/index.vue | 335 +++++++++++++++++++++++++++++++++++++++---
 2 files changed, 320 insertions(+), 19 deletions(-)

diff --git a/.env.development b/.env.development
index ed224d3..a632e2c 100644
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,6 @@
-VITE_API_BASE='http://192.168.8.94:8081/'
+VITE_API_BASE='http://192.168.8.220:8081/'
 # VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_dev'
 # VITE_API_BASE='http://54.251.137.151:10704/'
 # VITE_API_BASE='http://192.168.9.28:8081/'
-# VITE_API_BASE='18.143.76.3:10703/'
+# VITE_API_BASE='http://18.143.76.3:10704/'
 
diff --git a/src/views/workspace/index.vue b/src/views/workspace/index.vue
index 6c554d8..7e158eb 100644
--- a/src/views/workspace/index.vue
+++ b/src/views/workspace/index.vue
@@ -91,6 +91,7 @@
               end-placeholder="结束时间"
               style="width: 200px"
               @change="handleDateRangeChange"
+              value-format="YYYY-MM-DD HH:mm:ss"
             />
             <el-button type="primary" style="margin-left: 5px" @click="loadChart">查询</el-button>
           </el-col>
@@ -99,8 +100,7 @@
         <el-row :gutter="20" style="margin-top: 20px">
           <el-col :span="18">
             <div class="bar">
-              <div v-show="activeTab === 'recharge'" id="rechargeChartRef" style="width: 100%; height: 400px"></div>
-              <div v-show="activeTab === 'consume'" id="consumeChartRef" style="width: 100%; height: 400px"></div>
+              <div ref="chartRef" style="width: 100%; height: 400px"></div>
             </div>
           </el-col>
           <el-col :span="6">
@@ -114,7 +114,7 @@
               </el-select>
               <el-table :data="tableData" height="320px">
                 <el-table-column prop="rank" label="排名" width="60" align="center"></el-table-column>
-                <el-table-column prop="region" label="地区" align="center"></el-table-column>
+                <el-table-column prop="market" label="地区" align="center"></el-table-column>
                 <el-table-column prop="coinAmount" label="金币数量" align="center">
                   <template #default="{ row }">
                     {{ row.coinAmount.toLocaleString() }}
@@ -131,20 +131,22 @@
 
 <script setup>
 import * as echarts from 'echarts'
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, nextTick, watch } from 'vue'
 import API from '@/util/http'
+import { ElMessage } from 'element-plus'
 
+// 地区数据
+const markets = ref([])
 // 图表相关
 const activeTab = ref('recharge')
 const timeRange = ref('day')
 const dateRange = ref([])
 const selectedType = ref('all')
 const tableData = ref([])
+const chartRef = ref(null)
+let chartInstance = null
 
-const rechargeChartRef = ref(null)
-const consumeChartRef = ref(null)
-
-// 卡片数据
+// 卡片数据相关
 const currentGold = ref(0)
 const dailyChange = ref(0)
 const currentPermanent = ref(0)
@@ -152,19 +154,16 @@ const currentFree = ref(0)
 const currentFreeJune = ref(0)
 const currentFreeDecember = ref(0)
 const currentTask = ref(0)
-
 const yearlyRecharge = ref(0)
 const yearlyMoney = ref(0)
 const recharge = ref(0)
 const money = ref(0)
-
 const yearlyReduce = ref(0)
 const yearlyConsume = ref(0)
 const yearlyRefund = ref(0)
 const dailyReduce = ref(0)
 const dailyConsume = ref(0)
 const dailyRefund = ref(0)
-
 const yearlyRechargeNum = ref(0)
 const wow = ref(0)
 const daily = ref(0)
@@ -245,16 +244,282 @@ const processData = (data) => {
   firstRecharge.value = summary.firstRecharge
 }
 
+// 获取市场列表
+const getMarkets = async () => {
+  try {
+    const response = await API({ url: '/general/market', data: {} })
+    if (Array.isArray(response.data)) {
+      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()
+    }
+    
+    // 构建请求参数
+    const params = {
+      markets: markets.value,
+      startDate: dateRange.value[0] || '2025-01-01 00:00:00',
+      endDate: dateRange.value[1] || '2025-12-31 23:59:59'
+    }
+    
+    const response = await API({ 
+      url: '/workbench/getGraph', 
+      data: params 
+    })
+    
+    if (Array.isArray(response.marketCards)) {
+      // 处理图表数据
+      processChartData(response.marketCards)
+      // 处理排名数据
+      processRankingData(response.marketCards)
+    } else {
+      console.error('获取图表数据失败:', response)
+      ElMessage.error('获取图表数据失败')
+    }
+  } catch (error) {
+    console.error('获取图表数据失败:', error)
+    ElMessage.error('获取图表数据失败')
+  }
+}
+
+// 处理图表数据
+const processChartData = (marketCards) => {
+  // 准备图表数据
+  const chartData = {
+    rechargePermanent: [],
+    rechargeFree: [],
+    consumePermanent: [],
+    consumeFree: [],
+    consumeTask: []
+  }
+  
+  // 按市场组织数据
+  marketCards.forEach(market => {
+    chartData.rechargePermanent.push(market.sumRechargePermanent || 0)
+    chartData.rechargeFree.push(market.sumRechargeFree || 0)
+    chartData.consumePermanent.push(market.sumConsumePermanent || 0)
+    chartData.consumeFree.push(market.sumConsumeFree || 0)
+    chartData.consumeTask.push(market.sumConsumeTask || 0)
+  })
+  
+  // 根据当前选中的标签更新图表
+  updateChart(chartData)
+}
+
+// 处理排名数据 - 修改点：根据接口字段计算金币数量
+const processRankingData = (marketCards) => {
+  // 根据当前选中的标签计算每个市场的总金币数量
+  const rankingData = marketCards.map(market => {
+    let coinAmount = 0;
+    if (activeTab.value === 'recharge') {
+      // 充值排名：永久金币 + 免费金币
+      coinAmount = (market.sumRechargePermanent || 0) + (market.sumRechargeFree || 0);
+    } else {
+      // 消费排名：永久金币 + 免费金币 + 任务金币
+      coinAmount = (market.sumConsumePermanent || 0) + (market.sumConsumeFree || 0) + (market.sumConsumeTask || 0);
+    }
+    return {
+      market: market.market, // 使用 market 字段作为地区名称
+      coinAmount: coinAmount
+    };
+  });
+
+  // 按金币数量排序
+  rankingData.sort((a, b) => b.coinAmount - a.coinAmount);
+
+  // 添加排名序号
+  tableData.value = rankingData.map((item, index) => ({
+    rank: index + 1,
+    ...item
+  }));
+}
+
+// 更新图表
+const updateChart = (chartData) => {
+  if (!chartInstance) {
+    chartInstance = echarts.init(chartRef.value)
+  }
+  
+  let series = []
+  let legend = []
+  
+  if (activeTab.value === 'recharge') {
+    series = [
+      {
+        name: '永久金币',
+        type: 'bar',
+        stack: 'recharge',
+        data: chartData.rechargePermanent,
+        itemStyle: { color: '#5470c6' },
+        barWidth:30
+      },
+      {
+        name: '免费金币',
+        type: 'bar',
+        stack: 'recharge',
+        data: chartData.rechargeFree,
+        itemStyle: { color: '#91cc75' }
+      }
+    ]
+    legend = ['永久金币', '免费金币']
+  } else {
+    series = [
+      {
+        name: '永久金币',
+        type: 'bar',
+        stack: 'consume',
+        data: chartData.consumePermanent,
+        itemStyle: { color: '#5470c6' },
+        barWidth:30
+      },
+      {
+        name: '免费金币',
+        type: 'bar',
+        stack: 'consume',
+        data: chartData.consumeFree,
+        itemStyle: { color: '#91cc75' }
+      },
+      {
+        name: '任务金币',
+        type: 'bar',
+        stack: 'consume',
+        data: chartData.consumeTask,
+        itemStyle: { color: '#fac858' }
+      }
+    ]
+    legend = ['永久金币', '免费金币', '任务金币']
+  }
+  
+  // 设置图表选项
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function(params) {
+        let result = params[0].name + '<br/>'
+        params.forEach(param => {
+          result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`
+        })
+        return result
+      }
+    },
+    legend: {
+      data: legend,
+      bottom: 10
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '15%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: markets.value,
+      axisLabel: {
+        interval: 0,
+        rotate: 30
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        formatter: function(value) {
+          return value.toLocaleString()
+        }
+      }
+    },
+    series: series
+  }
+  
+  chartInstance.setOption(option)
+}
+
+// 处理标签切换
+const handleTabChange = () => {
+  loadChart()
+}
+
+// 处理时间范围变化
+const handleTimeRangeChange = () => {
+  // 根据时间范围设置日期范围
+  const now = new Date()
+  let startDate, endDate
+  
+  if (timeRange.value === 'day') {
+    startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)
+  } else if (timeRange.value === 'week') {
+    const day = now.getDay()
+    const diff = now.getDate() - day + (day === 0 ? -6 : 1) // 调整到本周一
+    startDate = new Date(now.setDate(diff))
+    startDate.setHours(0, 0, 0, 0)
+    endDate = new Date(now)
+    endDate.setDate(now.getDate() + 6)
+    endDate.setHours(23, 59, 59, 0)
+  } else if (timeRange.value === 'month') {
+    startDate = new Date(now.getFullYear(), now.getMonth(), 1)
+    endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0)
+    endDate.setHours(23, 59, 59, 0)
+  } else { // year
+    startDate = '2025-01-01 00:00:00'
+    endDate = '2025-12-31 23:59:59'
+  }
+  
+  dateRange.value = [
+    formatDate(startDate),
+    formatDate(endDate)
+  ]
+  
+  loadChart()
+}
+
+// 格式化日期为字符串
+const formatDate = (date) => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+  
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
+// 处理日期范围变化
+const handleDateRangeChange = () => {
+  timeRange.value = 'custom'
+  loadChart()
+}
+
+// 加载图表数据
+const loadChart = () => {
+  getChartData()
+}
+
+// 获取卡片数据
 const getCardData = async () => {
   try {
     const response = await API({ url: '/workbench/getCard', data: {} })
-    // 感谢D老师的检查结构
-    // 检查 API 响应结构
     if (response && response.data) {
-      // 如果 API 返回 { data: { ... } } 结构
       processData(response.data)
     } else if (Array.isArray(response?.marketCards)) {
-      // 实际走的是这里
       processData(response)
     } else {
       console.error('无效的API响应结构:', response)
@@ -264,8 +529,10 @@ const getCardData = async () => {
   }
 }
 
-onMounted(async function () {
-  getCardData()
+onMounted(async () => {
+  await getCardData()
+  await getMarkets()
+  handleTimeRangeChange() // 初始化时间范围
 })
 </script>
 
@@ -306,4 +573,38 @@ onMounted(async function () {
   margin-bottom: 15px;
 }
 
+.bar {
+  background: white;
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 添加加载动画 */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
 </style>
\ No newline at end of file