From 558be246d4a1f5a8cfc4c2e300af865a9829dcba Mon Sep 17 00:00:00 2001
From: lihui <lihui030304@163.com>
Date: Tue, 30 Sep 2025 10:06:49 +0800
Subject: [PATCH] =?UTF-8?q?perf:=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=20?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E9=A2=84=E7=95=99=E5=87=BA=E5=9C=B0=E5=8C=BA=E8=B4=9F?=
 =?UTF-8?q?=E8=B4=A3=E4=BA=BA=E7=9A=84=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=90=8E?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B9=E6=8D=AE=E6=8E=A5=E5=8F=A3=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/workspace/CashManagement.vue        |   5 +-
 src/components/workspace/CashManagementMarkets.vue | 210 +++++++++++++++++++++
 src/components/workspace/GoldGraph.vue             |  47 ++---
 src/components/workspace/GoldGraphMarkets.vue      |   7 +-
 src/components/workspace/GoldManagement.vue        |   4 +-
 5 files changed, 246 insertions(+), 27 deletions(-)
 create mode 100644 src/components/workspace/CashManagementMarkets.vue

diff --git a/src/components/workspace/CashManagement.vue b/src/components/workspace/CashManagement.vue
index eb377da..e2a3c96 100644
--- a/src/components/workspace/CashManagement.vue
+++ b/src/components/workspace/CashManagement.vue
@@ -17,7 +17,7 @@
       <div class="market-data">
         <div v-for="market in cashData.markets" :key="market.name" class="market-item">
           <span class="market-name">{{ market.name }}:</span>
-          <span class="market-value">{{ market.value.toLocaleString() }}</span>
+          <span class="market-value">{{ market.value.toLocaleString() }}新币</span>
         </div>
       </div>
 
@@ -58,8 +58,11 @@ const renderChart = () => {
       bottom: 5, // 增加底部距离的
       left: 'center'
     },
+
     series: [
       {
+        label: {show: false},
+
         type: 'pie',
         radius: ['40%', '70%'],
         data: cashData.value.markets,
diff --git a/src/components/workspace/CashManagementMarkets.vue b/src/components/workspace/CashManagementMarkets.vue
new file mode 100644
index 0000000..890fb4b
--- /dev/null
+++ b/src/components/workspace/CashManagementMarkets.vue
@@ -0,0 +1,210 @@
+<!--各地区的现金管理情况-->
+<template>
+
+  <div class="cash-management">
+    <div class="cash-title">
+      <div class="text1"> 现金管理
+        <span class="text1-update-time">最后更新时间：{{
+            workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
+          }}</span>
+      </div>
+    </div>
+
+    <div class="text2"><span class="text2-income">总营收：{{ cashData.totalIncome }}</span></div>
+
+
+    <div class="chart-container">
+      <!-- 左侧数据列表 -->
+      <div class="market-data">
+        <div v-for="market in cashData.markets" :key="market.name" class="market-item">
+          <span class="market-name">{{ market.name }}:</span>
+          <span class="market-value">{{ market.value.toLocaleString() }}</span>
+        </div>
+      </div>
+
+      <!-- 图表区域 -->
+      <div ref="chartRef" class="chart"></div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+import {ref, onMounted} from 'vue'
+
+// 模拟数据
+const cashData = ref({
+  updateTime: '2025-09-24 12:00:00',
+  totalIncome: 1200000,
+  markets: [
+    {name: '北京', value: 450000},
+    {name: '上海', value: 300000},
+    {name: '广州', value: 200000},
+    {name: '深圳', value: 150000},
+    {name: '其他', value: 100000}
+  ]
+})
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const renderChart = () => {
+  if (!chartInstance && chartRef.value) {
+    chartInstance = echarts.init(chartRef.value)
+  }
+  const option = {
+    tooltip: {trigger: 'item'},
+    legend: {
+      bottom: 5, // 增加底部距离的
+      left: 'center'
+    },
+    series: [
+      {
+        label: {show: false},
+
+        type: 'pie',
+        radius: ['40%', '70%'],
+        data: cashData.value.markets,
+        center: ['60%', '45%'] //图表靠右一点
+      }
+    ]
+  }
+  chartInstance.setOption(option)
+}
+
+onMounted(() => {
+  renderChart()
+})
+</script>
+
+<style scoped>
+/* 背景卡片大小 */
+.cash-management {
+  margin: 10px 5px;
+  width: 100%;
+  height: 50vh;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: #E7F4FD;
+  box-shadow: 0 2px 2px 0 #00000040;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/*
+.cash-card {
+  width: 100%;
+}
+
+.chart {
+  width: 100%;
+  height: 200px;
+} */
+
+
+.cash-title {
+  width: 100%;
+  height: 5vh;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: linear-gradient(90deg, #E4F0FC 0%, #C6ADFF 50%, #E4F0FC 100%);
+  box-shadow: 0 2px 2px 0 #00152940;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text1 {
+  color: #040a2d;
+  font-family: "PingFang SC";
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 31.79px;
+}
+
+.text1-update-time {
+  width: 100%;
+  height: 26px;
+  flex-shrink: 0;
+  color: #040a2d;
+  font-family: "PingFang SC";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 31.79px;
+}
+
+/* 总收入的渐变框 */
+.text2 {
+  margin: 13px;
+  width: 95%;
+  height: 48px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: linear-gradient(90deg, #E4F0FC 0%, #C1DCF8 50%, #E4F0FC 100%);
+  box-shadow: 0 2px 2px 0 #00152940;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 总收入字体 */
+.text2-income {
+  width: 215px;
+  height: 26px;
+  flex-shrink: 0;
+  color: #040a2d;
+  font-family: "PingFang SC";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 31.79px;
+}
+
+/* 图表容器 */
+.chart-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+}
+
+/* 左侧数据列表，使用您指定的样式 */
+.market-data {
+  display: flex;
+  width: 179px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 10px;
+  margin-left: 80px;
+}
+
+.market-item {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  color: #040a2d;
+}
+
+.market-name {
+  font-weight: 700;
+}
+
+.market-value {
+  font-weight: 500;
+}
+
+/* 图表样式 */
+.chart {
+  flex: 1;
+  height: 300px;
+  margin-top: 10px;
+}
+</style>
diff --git a/src/components/workspace/GoldGraph.vue b/src/components/workspace/GoldGraph.vue
index dabf113..76e1807 100644
--- a/src/components/workspace/GoldGraph.vue
+++ b/src/components/workspace/GoldGraph.vue
@@ -15,15 +15,25 @@
           任务金币: {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}&nbsp;&nbsp;
         </div>
         <div>
-          <el-button @click="getYes()" size="small" :type="activeTimeRange === 'yes' ? 'primary' : ''">昨天
+          <el-button
+              :style="{ backgroundColor: activeTimeRange === 'yes' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'yes' ? 'white' : '#666' }"
+              @click="getYes()" size="default">昨天
           </el-button>
-          <el-button @click="getToday()" size="small" :type="activeTimeRange === 'today' ? 'primary' : ''">今天
+          <el-button
+              :style="{ backgroundColor: activeTimeRange === 'today' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'today' ? 'white' : '#666' }"
+              @click="getToday()" size="default">今天
           </el-button>
-          <el-button @click="getWeek()" size="small" :type="activeTimeRange === 'week' ? 'primary' : ''">本周
+          <el-button
+              :style="{ backgroundColor: activeTimeRange === 'week' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'week' ? 'white' : '#666' }"
+              @click="getWeek()" size="default">本周
           </el-button>
-          <el-button @click="getMonth()" size="small" :type="activeTimeRange === 'month' ? 'primary' : ''">本月
+          <el-button
+              :style="{ backgroundColor: activeTimeRange === 'month' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'month' ? 'white' : '#666' }"
+              @click="getMonth()" size="default">本月
           </el-button>
-          <el-button @click="getYear()" size="small" :type="activeTimeRange === 'year' ? 'primary' : ''">本年
+          <el-button
+              :style="{ backgroundColor: activeTimeRange === 'year' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'year' ? 'white' : '#666' }"
+              @click="getYear()" size="default">本年
           </el-button>
         </div>
         <div>
@@ -656,7 +666,6 @@ const getAdminData = async function () {
   }
 }
 
-const workDataUpdateTime = ref(null)
 
 // 标记当前激活的时间范围按钮
 const activeTimeRange = ref('')
@@ -679,7 +688,7 @@ onUnmounted(() => {
 </script>
 <style scoped lang="scss">
 
-
+/* 整个柱状图的图表样式 */
 .graph {
   .condition {
     width: 100%;
@@ -712,15 +721,6 @@ onUnmounted(() => {
   }
 }
 
-.center-card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.margin-bottom {
-  margin-bottom: 0.5vh;
-}
 
 .card-item {
   width: 25%;
@@ -773,6 +773,7 @@ onUnmounted(() => {
       background: #E7F4FD;
       border: none !important;
     }
+
     :deep(.el-select__input-wrapper  ) {
       background: #F3FAFF;
       box-shadow: 0 0 8px 0 #00000040;
@@ -780,7 +781,6 @@ onUnmounted(() => {
     }
 
 
-
   }
 
   /* 表格整体背景：把表格容器设为卡片背景 */
@@ -792,12 +792,7 @@ onUnmounted(() => {
   /* 表头/表体 wrapper 与 table body 单元格 */
   :deep(.el-table__header-wrapper),
   :deep(.el-table__body-wrapper),
-  :deep(.el-table__body),
-  :deep(.el-table__header),
-  :deep(.el-table__body tbody),
   :deep(.el-table__body tr),
-  :deep(.el-table__row),
-  :deep(.el-table__cell),
   :deep(.el-table__body td) {
     background-color: transparent !important;
   }
@@ -812,4 +807,12 @@ onUnmounted(() => {
     border-bottom: 1px solid #BBC0C9 !important;
   }
 }
+
+/* tabs的样式 */
+/* 选中 tab 的文字颜色 */
+:deep(.el-tabs__item.is-active) {
+  color: #2741DE !important;
+  font-size:  18px;
+  font-weight: bold;
+}
 </style>
diff --git a/src/components/workspace/GoldGraphMarkets.vue b/src/components/workspace/GoldGraphMarkets.vue
index 9f0cf73..3de971f 100644
--- a/src/components/workspace/GoldGraphMarkets.vue
+++ b/src/components/workspace/GoldGraphMarkets.vue
@@ -1,3 +1,5 @@
+<!--各地区的金币充值和消费情况柱状图-->
+
 <template>
   <div class="graph">
     <el-card style="width:100%;" class="graph-card">
@@ -592,6 +594,7 @@ const updateChart = (chartData) => {
       },
       xAxis: {
         type: 'category',
+        // 横坐标数据 之后要改成一个时间的
         data: markets.value,
         axisLabel: {
           interval: 0,
@@ -656,8 +659,6 @@ const getAdminData = async function () {
   }
 }
 
-const workDataUpdateTime = ref(null)
-
 // 标记当前激活的时间范围按钮
 const activeTimeRange = ref('')
 // 日期选择器变化时清除按钮激活状态
@@ -809,7 +810,7 @@ onUnmounted(() => {
 
   /* 行之间的分隔线（更像卡片内表格） */
   :deep(.el-table .el-table__row):not(:last-child) {
-    border-bottom: 1px solid rgba(0,0,0,0.06);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   }
 
 }
diff --git a/src/components/workspace/GoldManagement.vue b/src/components/workspace/GoldManagement.vue
index eaa3706..a79ca5d 100644
--- a/src/components/workspace/GoldManagement.vue
+++ b/src/components/workspace/GoldManagement.vue
@@ -270,7 +270,8 @@ const processData = (data) => {
   });
 }
 
-// 初始化金币类型南丁格尔图
+// 初始化金币类型南丁格尔图（暂时不用了）
+/*
 const initGoldTypeChart = () => {
   const myChart = echarts.init(goldTypeChart.value);
   const option = {
@@ -310,6 +311,7 @@ const initGoldTypeChart = () => {
   };
   myChart.setOption(option);
 }
+*/
 
 // 初始化充值金币环形图
 const initRechargeGoldChart = () => {