From 1619f59e2c6ded93d841cfa05198b17938310921 Mon Sep 17 00:00:00 2001
From: lihui <lihui030304@163.com>
Date: Sat, 19 Jul 2025 11:29:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=85=B3=E9=97=ADhome=E6=8C=82=E8=BD=BD?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=20=20=E5=A4=8D=E5=88=B6=E6=85=A7=E7=90=B3?=
 =?UTF-8?q?=E5=A7=90=E7=9A=84=20=E5=B7=A5=E4=BD=9C=E5=8F=B0=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=EF=BC=88=E4=B8=BA=E4=BA=86=E6=89=93=E5=8C=85=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home.vue            |   7 +-
 src/views/workspace/index.vue | 337 ++++++++++++++++++++++--------------------
 2 files changed, 184 insertions(+), 160 deletions(-)

diff --git a/src/views/home.vue b/src/views/home.vue
index 03870b9..f206982 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -130,9 +130,10 @@ function logout() {
 // 挂载
 onMounted(async function () {
   // 获取用户信息
-  //getAdminData()
-  // 初始化获取导出列表
-  await getExportList()
+
+  await getAdminData()
+  // // 初始化获取导出列表
+  // await getExportList()
 })
 // 处理地区点击事件，直接在组件内更新当前地区，包老师改的，直接传参
 const changeDataByArea = (item) => {
diff --git a/src/views/workspace/index.vue b/src/views/workspace/index.vue
index 1240ea7..ff245f5 100644
--- a/src/views/workspace/index.vue
+++ b/src/views/workspace/index.vue
@@ -1,5 +1,4 @@
 <template>
-
   <el-row>
     <!-- 数据总览卡片 -->
     <el-col :span="4" style="padding-right: 10px;"> <!-- 适当留白避免拥挤 -->
@@ -14,6 +13,7 @@
     <!-- 剩余栅格空间（可选，用于占满一行） -->
     <el-col :span="18"></el-col>
   </el-row>
+
   <el-row :gutter="10">
     <!-- 第一个卡片 -->
     <el-col :span="6">
@@ -21,23 +21,21 @@
         <template #header>
           <div class="card-header">
             <div class="card-title">当前金币余量</div>
-            <div>{{ currentGold / 100 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日
-              {{
-                dailyChange / 100
-              }}
+            <div>{{ currentGold / 100 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日 {{
+                dailyChange / 100 }}
               <template v-if="dailyChange > 0">
                 <el-icon style="color:red">
-                  <ArrowUpBold/>
+                  <ArrowUpBold />
                 </el-icon>
               </template>
               <template v-else-if="dailyChange < 0">
                 <el-icon style="color:forestgreen">
-                  <ArrowDownBold/>
+                  <ArrowDownBold />
                 </el-icon>
               </template>
               <template v-else>
                 <el-icon style="color:grey">
-                  <SemiSelect/>
+                  <SemiSelect />
                 </el-icon>
               </template>
             </div>
@@ -48,9 +46,7 @@
           <div class="margin-bottom">免费金币：{{ currentFree / 100 }}</div>
           <div class="margin-bottom">[六月到期|{{ currentFreeJune / 100 }}]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|{{
               currentFreeDecember /
-              100
-            }}]
-          </div>
+              100 }}]</div>
           <div>任务金币：{{ currentTask / 100 }}</div>
         </div>
       </el-card>
@@ -73,14 +69,14 @@
     <!-- 第三个卡片 -->
     <el-col :span="6">
       <el-card class="card-item">
-        <div class="card-title">全年累计消费金币数</div>
+        <div class="card-title">全年累计消耗金币数</div>
         <div class="card-title">{{ yearlyReduce / 100 }}</div>
         <div class="center-card">消费：{{ yearlyConsume / 100 }}</div>
         <div class="center-card">退款：{{ yearlyRefund / 100 }}</div>
         <template #footer>
           <div></div>
-          <div class="margin-bottom center-card">昨日新增消费：{{ dailyConsume / 100 }}</div>
           <div class="margin-bottom center-card">昨日新增消耗：{{ dailyReduce / 100 }}</div>
+          <div class="margin-bottom center-card">昨日新增消费：{{ dailyConsume / 100 }}</div>
           <div class="margin-bottom center-card">昨日新增退款：{{ dailyRefund / 100 }}</div>
         </template>
       </el-card>
@@ -94,34 +90,34 @@
         <el-col class="center-card">周同比:{{ sumWow }}%&nbsp;&nbsp;&nbsp;&nbsp;
           <template v-if="sumWow > 0">
             <el-icon style="color:red">
-              <ArrowUpBold/>
+              <ArrowUpBold />
             </el-icon>
           </template>
           <template v-else-if="sumWow < 0">
             <el-icon style="color:forestgreen">
-              <ArrowDownBold/>
+              <ArrowDownBold />
             </el-icon>
           </template>
           <template v-else>
             <el-icon style="color:grey">
-              <SemiSelect/>
+              <SemiSelect />
             </el-icon>
           </template>
         </el-col>
-        <el-col class="center-card">日环比:{{ sumDaily.toFixed(2) }}%&nbsp;&nbsp;&nbsp;&nbsp;
+        <el-col class="center-card">日环比:{{ sumDaily }}%&nbsp;&nbsp;&nbsp;&nbsp;
           <template v-if="sumDaily > 0">
             <el-icon style="color:red">
-              <ArrowUpBold/>
+              <ArrowUpBold />
             </el-icon>
           </template>
           <template v-else-if="sumDaily < 0">
             <el-icon style="color:forestgreen">
-              <ArrowDownBold/>
+              <ArrowDownBold />
             </el-icon>
           </template>
           <template v-else>
             <el-icon style="color:grey">
-              <SemiSelect/>
+              <SemiSelect />
             </el-icon>
           </template>
         </el-col>
@@ -146,14 +142,11 @@
           <el-col :span="24">
             <el-row>
               <div style="margin-top:5px">合计&nbsp;&nbsp;&nbsp;&nbsp;
-                永久金币 {{
-                  activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100
+                永久金币 {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100
                 }}&nbsp;&nbsp;&nbsp;&nbsp;
-                免费金币 {{
-                  activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100
+                免费金币 {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100
                 }}&nbsp;&nbsp;&nbsp;&nbsp;
-                任务金币 {{
-                  activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100
+                任务金币 {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100
                 }}&nbsp;&nbsp;&nbsp;&nbsp;
               </div>
               <div @change="handleDatePickerChange">
@@ -163,7 +156,7 @@
                 <el-button @click="getYear()" label="year" :type="activeTimeRange === 'year' ? 'primary' : ''">本年</el-button>
               </div>
               <el-date-picker v-model="dateRange" type="datetimerange" range-separator="→" start-placeholder="开始时间"
-                end-placeholder="结束时间" style="margin-left:10px" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
+                              end-placeholder="结束时间" style="margin-left:10px" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
               <el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button>
             </el-row>
           </el-col>
@@ -208,21 +201,13 @@
 
 <script setup>
 import * as echarts from 'echarts'
-import {onMounted, ref, watch} from 'vue'
+import { ref, onMounted, nextTick, watch, onUnmounted } from 'vue'
 import API from '@/util/http'
-import {ElMessage} from 'element-plus'
+import { ElMessage } from 'element-plus'
 import dayjs from 'dayjs';
 import utc from 'dayjs-plugin-utc'
-import {ArrowDownBold, ArrowUpBold, SemiSelect} from '@element-plus/icons-vue'
-
 dayjs.extend(utc)
-
-// 标记当前激活的时间范围按钮
-const activeTimeRange = ref('')
-// 日期选择器变化时清除按钮激活状态
-const handleDatePickerChange = () => {
-  activeTimeRange.value = ''
-}
+import { ArrowUpBold, ArrowDownBold, SemiSelect } from '@element-plus/icons-vue'
 // 地区数据
 const markets = ref([])
 // 图表相关
@@ -265,8 +250,39 @@ const sumDaily = ref(0)
 const rechargeNum = ref(0)
 const firstRecharge = ref(0)
 const length = ref(0)
-const isLoading = ref(false)
-const formatDate = function (date) {
+//  加载状态
+const chartLoading = ref(true)
+
+const handleResize = () => {
+  if (chartInstance.value) {
+    try {
+      chartInstance.value.resize()
+      console.log('resize一下')
+    } catch (error) {
+      console.error('图表resize失败:', error)
+    }
+  }
+}
+// 初始化图表
+const initChart = () => {
+  if (!chartInstance && chartRef.value) {
+    chartInstance = echarts.init(chartRef.value)
+    window.addEventListener('resize', handleResize)
+  }
+}
+// 销毁图表
+const destroyChart = () => {
+  if (chartInstance.value) {
+    try {
+      chartInstance.value.dispose()
+    } catch (error) {
+      console.error('图表销毁失败:', error)
+    }
+    chartInstance.value = null
+  }
+  window.removeEventListener('resize', handleResize)
+}
+const formatDate = function(date) {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
   const day = String(date.getDate()).padStart(2, '0');
@@ -279,7 +295,7 @@ const formatDate = function (date) {
 const getToday = function () {
   const today = dayjs()
   const startTime = today.startOf('day').format('YYYY-MM-DD HH:mm:ss')
-  const endTime = today.add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
+  const endTime = today.add(1,'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
   dateRange.value = [startTime, endTime]
   console.log('看看dateRange', dateRange.value)
   activeTimeRange.value = 'today' // 标记当前激活状态
@@ -289,8 +305,8 @@ const getToday = function () {
 // 本周
 const getWeek = function () {
   const today = dayjs()
-  const startTime = (today.startOf('week').add(1, 'day')).format('YYYY-MM-DD HH:mm:ss')
-  const endTime = today.add(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+  const startTime = (today.startOf('week').add(1,'day')).format('YYYY-MM-DD HH:mm:ss')
+  const endTime = today.add(1,'week').startOf('week').add(1,'day').format('YYYY-MM-DD HH:mm:ss')
   dateRange.value = [startTime, endTime]
   console.log('看看dateRange', dateRange.value)
   activeTimeRange.value = 'week' // 标记当前激活状态
@@ -301,7 +317,7 @@ const getWeek = function () {
 const getMonth = function () {
   const today = dayjs()
   const startTime = today.startOf('month').format('YYYY-MM-DD HH:mm:ss')
-  const endTime = today.add(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+  const endTime = today.add(1,'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
   dateRange.value = [startTime, endTime]
   console.log('看看dateRange', dateRange.value)
   activeTimeRange.value = 'month' // 标记当前激活状态
@@ -312,10 +328,11 @@ const getMonth = function () {
 const getYear = function () {
   const today = dayjs()
   const startTime = today.startOf('year').format('YYYY-MM-DD HH:mm:ss')
-  const endTime = today.add(1, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss')
+  const endTime = today.add(1,'year').startOf('year').format('YYYY-MM-DD HH:mm:ss')
   dateRange.value = [startTime, endTime]
   console.log('看看dateRange', dateRange.value)
   activeTimeRange.value = 'year' // 标记当前激活状态
+
   getChartData()
 }
 
@@ -400,7 +417,7 @@ const processData = (data) => {
 // 获取市场列表
 const getMarkets = async () => {
   try {
-    const response = await API({url: '/general/market', data: {}})
+    const response = await API({ url: '/general/market', data: {} })
     if (Array.isArray(response.data)) {
       markets.value = response.data
       console.log('市场列表获取成功:', markets.value)
@@ -423,7 +440,7 @@ const getChartData = async () => {
     }
 
     // 本年
-    if (!dateRange.value || dateRange.value.length === 0) {
+    if(!dateRange.value || dateRange.value.length === 0){
       getYear()
     }
 
@@ -559,113 +576,113 @@ const updateChart = (chartData) => {
     initChart()
   }
   chartLoading.value = true
-try{
-  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'},
-        barWidth: 30
+  try{
+    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' },
+          barWidth: 30
+        },
+        {
+          name: '任务金币',
+          type: 'bar',
+          stack: 'recharge',
+          data: chartData.rechargeTask,
+          itemStyle: { color: '#fac858' },
+          barWidth: 30
+        }
+      ]
+      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' },
+          barWidth: 30
+        },
+        {
+          name: '任务金币',
+          type: 'bar',
+          stack: 'consume',
+          data: chartData.consumeTask,
+          itemStyle: { color: '#fac858' },
+          barWidth: 30
+        }
+      ]
+      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
+        }
       },
-      {
-        name: '任务金币',
-        type: 'bar',
-        stack: 'recharge',
-        data: chartData.rechargeTask,
-        itemStyle: {color: '#fac858'},
-        barWidth: 30
-      }
-    ]
-    legend = ['永久金币', '免费金币', '任务金币']
-  } else {
-    series = [
-      {
-        name: '永久金币',
-        type: 'bar',
-        stack: 'consume',
-        data: chartData.consumePermanent,
-        itemStyle: {color: '#5470c6'},
-        barWidth: 30
+      legend: {
+        data: legend,
+        bottom: 10
       },
-      {
-        name: '免费金币',
-        type: 'bar',
-        stack: 'consume',
-        data: chartData.consumeFree,
-        itemStyle: {color: '#91cc75'},
-        barWidth: 30
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '15%',
+        containLabel: true
       },
-      {
-        name: '任务金币',
-        type: 'bar',
-        stack: 'consume',
-        data: chartData.consumeTask,
-        itemStyle: {color: '#fac858'},
-        barWidth: 30
-      }
-    ]
-    legend = ['永久金币', '免费金币', '任务金币']
-  }
-
-  const option = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
+      xAxis: {
+        type: 'category',
+        data: markets.value,
+        axisLabel: {
+          interval: 0,
+          rotate: 30
+        }
       },
-      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()
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          formatter: function (value) {
+            return value.toLocaleString()
+          }
         }
-      }
-    },
-    series: series
-  }
+      },
+      series: series
+    }
 
-  chartInstance.setOption(option)
-} catch (error) {
+    chartInstance.setOption(option)
+  } catch (error) {
     console.error('图表更新失败:', error)
     ElMessage.error('图表渲染失败')
   } finally {
@@ -683,25 +700,20 @@ const handleTabChange = () => {
 
 const getAdminData = async function () {
   try {
-    const result = await API({url: '/admin/userinfo', data: {}})
+    const result = await API({ url: '/admin/userinfo', data: {} })
     adminData.value = result
     console.log('用户信息', adminData.value)
   } catch (error) {
     console.log('请求失败', error)
   }
 }
-
-const workDataUpdateTime = ref(null)
 // 获取卡片数据
 const getCardData = async () => {
   try {
-    const response = await API({url: '/workbench/getCard', data: {}})
-    console.log('卡片数据', response.startDate)
+    const response = await API({ url: '/workbench/getCard', data: {} })
     workDataUpdateTime.value = response.updateTime
-
     if (response && response.data) {
       processData(response.data)
-
     } else if (Array.isArray(response?.marketCards)) {
       processData(response)
     } else {
@@ -711,15 +723,26 @@ const getCardData = async () => {
     console.error('获取卡片数据失败:', error)
   }
 }
+const workDataUpdateTime = ref(null)
 
+// 标记当前激活的时间范围按钮
+const activeTimeRange = ref('')
+// 日期选择器变化时清除按钮激活状态
+const handleDatePickerChange = () => {
+  activeTimeRange.value = ''
+}
 
 onMounted(async () => {
   await getAdminData()
   await getCardData()
   await getMarkets()
   getYear()
-  await getChartData()
-  console.log('挂载后调用')
+  window.addEventListener('resize', () => {
+    chartInstance.resize()
+  })
+})
+onUnmounted(() => {
+  destroyChart()
 })
 </script>