fix: 关闭home挂载导出复制慧琳姐的工作台内容（为了打包）

2 weeks ago · 1619f59e2c
2 changed files with 184 additions and 160 deletions
--- 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) => {
--- 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>