style: 优化按钮

add:对接底部柱状图完成

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; /* 若有边框，保持默认 */
     }
 }

src/components/workspace/GoldGraphMarkets.vue

@@ -16,7 +16,7 @@
           免费金币: {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}  
           任务金币: {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}  
         </div>
-        <div>
+        <div style="display: flex;">
           <el-button @click="getYes()" size="small" :type="activeTimeRange === 'yes' ? 'primary' : ''">昨天
           </el-button>
           <el-button @click="getToday()" size="small" :type="activeTimeRange === 'today' ? 'primary' : ''">今天
@@ -28,42 +28,42 @@
           <el-button @click="getYear()" size="small" :type="activeTimeRange === 'year' ? 'primary' : ''">本年
           </el-button>
         </div>
-        <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"
                           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>
+
         </div>
+        <el-popover
+            placement="top-start"
+            title="数据说明"
+            :width="240"
+            trigger="hover"
+            content="若统计周期跨越 40 天以上，将展示月份维度的数据。"
+        >
+          <template #reference>
+            <el-icon
+                class="service-icon"
+                style="
+          margin-left: 5px;
+          cursor: pointer;
+          font-size: 22px;
+          transition: all 0.3s ease;
+        "
+            >
+              <Service />
+            </el-icon>
+          </template>
+        </el-popover>
+
       </div>
 
       <div class="graph-content">
-        <div ref="chartRef" class="left"></div>
-        <div class="right">
-          <el-card class="graph-card-list">
-            <div class="card-large">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div>
-            <el-select 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-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">
-                <template #default="scope">
-                  <span>{{ marketMapping[scope.row.market] || scope.row.market }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="coinAmount" label="金币数量" align="center">
-                <template #default="{ row }">
-                  {{ row.coinAmount.toLocaleString() }}
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-card>
-        </div>
+        <div ref="chartRef" style="width:100%;height:500px;"></div>
       </div>
     </el-card>
   </div>
@@ -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 + '<br/>'
-          let total = 0;
-          params.forEach(param => {
-            result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`;
-            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()

src/views/workspace/index.vue

@@ -15,21 +15,41 @@
     </el-row>
     <el-row class="graphs">
       <el-col :span="24">
-        <GoldGraph/>
+        <div v-if="loading">加载中...</div>
+        <GoldGraphMarkets v-else-if="GraphFlag" />
+        <GoldGraph v-else />
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup>
-import {ref, onMounted} from 'vue'
-import API from '@/util/http'
-
 import GoldManagement from "@/components/workspace/GoldManagement.vue"
 import CashManagement from "@/components/workspace/CashManagement.vue"
-import GoldGraph from "@/components/workspace/GoldGraph.vue"
+import GoldGraphMarkets from "@/components/workspace/GoldGraphMarkets.vue";
+import API from "@/util/http.js";
+import {onMounted, ref} from "vue";
+import GoldGraph from "@/components/workspace/GoldGraph.vue";
+
+const GraphFlag = ref();
+const loading = ref(true); // 新增加载状态
 
+const getAdminData = async function () {
+  try {
+    loading.value = true; // 开始加载
+    const result = await API({url: '/admin/userinfo', data: {}});
+    GraphFlag.value = result.markets !== '总部' && result.markets !== '研发部';
+    console.log("GraphFlag",GraphFlag.value);
+  } catch (error) {
+    console.log('请求失败', error);
+  } finally {
+    loading.value = false; // 无论成功失败都结束加载
+  }
+};
 
+onMounted(async () => {
+  await getAdminData()
+})
 </script>
 
 <style scoped>