From 1c1a82e955b21000d2e849e4a2963926973b3c8e Mon Sep 17 00:00:00 2001
From: lihuilin <analsak@163.com>
Date: Tue, 15 Jul 2025 11:25:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A7=92=E8=89=B2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                     |   3 +-
 .env.production                      |   4 +-
 .env.test                            |   3 +-
 src/views/home.vue                   |   2 +-
 src/views/permissions/permission.vue | 367 +++++++++++++++++++++++------------
 src/views/workspace/index.vue        | 131 ++++++++-----
 6 files changed, 336 insertions(+), 174 deletions(-)

diff --git a/.env.development b/.env.development
index 3b5ebee..1888bc9 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,4 @@
-VITE_API_BASE='https://hwjb.homilychart.com/dev/admin'
+# VITE_API_BASE='https://hwjb.homilychart.com/dev/admin'
 VITE_UPLOAD_URL=http://39.101.133.168:8828/hljw/api/aws/upload
+VITE_API_BASE='http://192.168.8.246:8081/'
 
diff --git a/.env.production b/.env.production
index eff9201..332ab80 100644
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,3 @@
-VITE_API_BASE='https://hwjb.homilychart.com/prod'
-# VITE_API_BASE='http://192.168.8.232:8080/'
+# VITE_API_BASE='https://hwjb.homilychart.com/prod'
+VITE_API_BASE='http://192.168.8.246:8081/'
 VITE_UPLOAD_URL=https://api.homilychart.com/hljw/api/aws/upload
diff --git a/.env.test b/.env.test
index 995e851..3ecc103 100644
--- a/.env.test
+++ b/.env.test
@@ -1,4 +1,5 @@
 # VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_prod'
-VITE_API_BASE='https://hwjb.homilychart.com/dev/admin/'
+# VITE_API_BASE='https://hwjb.homilychart.com/dev/admin/'
 # VITE_API_BASE='http://18.143.76.3:10704/'
+VITE_API_BASE='http://192.168.8.246:8081/'
 VITE_UPLOAD_URL=https://api.homilychart.com/hljw/api/aws/upload
\ No newline at end of file
diff --git a/src/views/home.vue b/src/views/home.vue
index c543fbf..ee8be53 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -132,7 +132,7 @@ function logout() {
 // 挂载
 onMounted(async function () {
   // 获取用户信息
-  getAdminData()
+  //getAdminData()
   // 初始化获取导出列表
   await getExportList()
 })
diff --git a/src/views/permissions/permission.vue b/src/views/permissions/permission.vue
index d84b4d1..7434ffb 100644
--- a/src/views/permissions/permission.vue
+++ b/src/views/permissions/permission.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, reactive, computed } from 'vue'
+import { ref, onMounted, reactive, computed, watch } from 'vue'
 import ElementPlus from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import axios from 'axios'
@@ -10,8 +10,6 @@ import request from '@/util/http'
 
 // 客户明细表格   什么表格？？？？？？？
 const tableData = ref([])
-// 搜索===========================================
-//分页总条目
 const total = ref(100)
 // 搜索admin
 const admin = ref({
@@ -25,15 +23,19 @@ const getObj = ref({
   pageSize: 10
 })
 // 新增用户权限弹窗
-const permissionAddVisible = ref(false)
+const userAddVisible = ref(false)
 // 编辑用户权限弹窗
-const permissionEditVisible = ref(false)
+const userEditVisible = ref(false)
 //选地区
 const market = ref([])
 // 选部门
 const postiton = ref([])
-// 新增用户权限对象
+// 新增用户对象
+const userAddObj = ref({})
+// 新增角色对象
 const permissionAddObj = ref({})
+// 新增角色弹窗
+const permissionAddVisible = ref(false)
 // 新增用户权限对象，机器码要实现存储多个，addMachineIdInput方法实现
 const addAdmin = ref({
   account: '',
@@ -45,8 +47,15 @@ const addAdmin = ref({
   machineIds: [], // 动态添加的机器码输入框
   remark: ''
 })
-const addMachineIdInput = function () {  //  为啥>=1？？？？？？？？？？？？？？
-  // 因为需求写的是最多两个机器码，这个点击了添加后，可以写或者不写，也就是0和1，所以>=1
+// 新增角色对象
+const addRole = ref({
+  roleName: '',
+  parentName: '',
+  permissionSelect: []
+})
+// 新增角色的权限列表
+const permissionSelect = ref()
+const addMachineIdInput = function () {
   if (addAdmin.value.machineIds.length >= 1) {
     ElMessage.warning('设备数量已达上限')
     return
@@ -58,16 +67,45 @@ const addMachineIdInput = function () {  //  为啥>=1？？？？？？？？
 const permissionEditObj = ref({})
 // 删除权限对象
 const delObj = ref({})
+// 各角色权限列表
+const lists = [
+  {name: '管理员', value: '1', permissions: ['2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']},
+  {name: '总部财务', value: '2', permissions: ['2','3','4','5','6','7','8','9']},
+  {name: '总部客服', value: '3', permissions: ['2','3','4','5','6','7','8']},
+  {name: '地区负责人', value: '4', permissions: ['2','3','4','5','6']},
+  {name: '地区财务', value: '5', permissions: ['2','3','4','5']},
+  {name: '客服专员', value: '6', permissions: ['2','3']}
+]
+const filteredData = ref([])
+
+watch(() => addRole.value.parentName, (newValue) => {
+  const selectedRole = lists.find(role => role.value === newValue)
+  if (selectedRole) {
+    const allowedPermissions = selectedRole.permissions
+    filteredData.value = filterPermissions(data, allowedPermissions)
+  } else {
+    filteredData.value = data
+  }
+})
+
+const filterPermissions = (permissions, allowedPermissions) => {
+  return permissions.filter(permission => {
+    if (allowedPermissions.includes(permission.value)) {
+      if (permission.children) {
+        permission.children = filterPermissions(permission.children, allowedPermissions)
+      }
+      return true
+    }
+    return false
+  })
+}
 
-// 搜索接口
 const get = async function (val) {
   try {
-    // 搜索参数页码赋值
     if (typeof val === 'number') {
       getObj.value.pageNum = val
     }
     console.log('搜索参数', getObj.value, admin.value)
-    // 发送POST请求
     const result = await request({
       url: '/permission/getPermission',
       data: {
@@ -84,13 +122,11 @@ const get = async function (val) {
     console.log('请求失败', error)
   }
 }
-// 精网号去空格
 const trimJwCode = () => {
   if (admin.value.account) {
     admin.value.account = admin.value.account.replace(/\s/g, '');
   }
 }
-// 搜索
 const search = function () {
   trimJwCode();
   getObj.value.pageNum = 1
@@ -99,10 +135,8 @@ const search = function () {
 // 重置
 const reset = function () {
   admin.value = {}
-  //   addAdmin.value = {}//用在新增表单的重置方法，但现在采用Ref.value.resetFields()方法，不需要reset
 }
 
-// 获取地区
 const getArea = async function () {
   try {
     const result = await request({
@@ -112,7 +146,6 @@ const getArea = async function () {
     market.value = result.data
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 // 获取部门
@@ -125,19 +158,19 @@ const getStore = async function () {
     postiton.value = result.data
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 
-
 // 打开新增用户权限弹窗
+const openUserAddVisible = function () {
+  userAddVisible.value = true
+}
+// 新增角色弹窗
 const openPermissionAddVisible = function () {
   permissionAddVisible.value = true
 }
 // 关闭新增用户权限弹窗，并刷新表单
-const closePermissionAddVisible = function () {
-  // reset() ，下面这个方法还可以重置表单验证（请输入...），reset只能重置输入，修改reset方法
-  // 重置表单数据，当我们在新增表单点击添加后会弹出一个文本框，再点击取消，弹出的文本框应该是不显示出来的
+const closeUserAddVisible = function () {
   addAdmin.value = {
     account: '',
     name: '',
@@ -148,12 +181,21 @@ const closePermissionAddVisible = function () {
     machineIds: [],
     remark: ''
   };
-  permissionAddVisible.value = false;
+  userAddVisible.value = false;
   // 清除表单验证状态
   Ref.value.resetFields();
-
+}
+const closePermissionAddVisible = function () {
+  permissionAddVisible.value = false
+  addRole.value = {}
+  Ref.value.resetFields();
 }
 // 新增用户权限初始化
+const userAddInit = function () {
+  userAddObj.value = {}
+  openUserAddVisible()
+}
+// 新增角色初始化
 const permissionAddInit = function () {
   permissionAddObj.value = {}
   openPermissionAddVisible()
@@ -193,16 +235,14 @@ const permissionAdd = async function () {
         addAdmin.value = {}
         get()
 
-        closePermissionAddVisible()
+        closeUserAddVisible()
       } catch (error) {
         console.log('新增用户权限失败', error)
-        // 在这里可以处理错误逻辑，比如显示错误提示等
 
         ElMessage.error('新增用户权限失败')
-        closePermissionAddVisible()
+        closeUserAddVisible()
       }
     } else {
-      //提示
       ElMessage({
         type: 'error',
         message: '请检查输入内容'
@@ -245,12 +285,12 @@ const permissionList = [
 ]
 
 // 打开编辑用户权限弹窗
-const openPermissionEditVisible = function () {
-  permissionEditVisible.value = true
+const openUserEditVisible = function () {
+  userEditVisible.value = true
 }
 // 关闭编辑用户权限弹窗
-const closePermissionEditVisible = function () {
-  permissionEditVisible.value = false
+const closeUserEditVisible = function () {
+  userEditVisible.value = false
 }
 // 编辑用户权限初始化
 const permissionEditInit = function (row) {
@@ -263,7 +303,7 @@ const permissionEditInit = function (row) {
   permissionEditObj.value.permission = row.permission
   permissionEditObj.value.roleId = row.roleId
   console.log('编辑用户权限', permissionEditObj.value)
-  openPermissionEditVisible()
+  openUserEditVisible()
 }
 // 编辑用户权限提交
 const permissionEdit = async function () {
@@ -272,16 +312,14 @@ const permissionEdit = async function () {
       url: '/permission/updateAdminRole',
       data: permissionEditObj.value
     })
-    // 将响应结果存储到响应式数据中
     console.log('请求成功3', result)
     ElMessage.success('编辑用户权限成功')
     get()
-    closePermissionEditVisible()
+    closeUserEditVisible()
   } catch (error) {
     console.log('编辑用户权限失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
     ElMessage.error('编辑用户权限失败')
-    closePermissionEditVisible()
+    closeUserEditVisible()
   }
 }
 const throttledPermissionEdit = _.throttle(permissionEdit, 5000, {
@@ -309,7 +347,6 @@ const delConfirm = async function () {
     get()
   } catch (error) {
     console.log('删除权限失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
     ElMessage.error('删除权限失败')
   }
 }
@@ -328,10 +365,7 @@ const editStatus = async function (row) {
       url: '/permission/upadatePermission',
       data: permissionEditObj.value
     })
-
-    // 将响应结果存储到响应式数据中
     console.log('请求成功2', result)
-
     ElMessage.success(
       permissionEditObj.value.adminStatus == 1 ? '启用成功' : '禁用成功'
     )
@@ -339,7 +373,6 @@ const editStatus = async function (row) {
     get()
   } catch (error) {
     console.log('修改用户权限失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 
@@ -357,9 +390,122 @@ const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
   get()
 }
+
+const data = [
+  {
+    value: '2',
+    label: '工作台'
+  },
+  {
+    value: '3',
+    label: '财务审核',
+    children:[
+      {
+        value:'11',
+        label:'充值审核'
+      },
+      {
+        value:'13',
+        label:'退款审核'
+      },{
+        value:'12',//14
+        label:'审核操作'
+      }
+    ]
+  },
+  {
+    value: '4',
+    label: '汇率管理'
+  },{
+    value: '5',
+    label: '充值管理',
+    children:[
+      {
+        value:'17',
+        label:'新增充值'
+      },
+      {
+        value:'18',
+        label:'金币充值明细'
+      }
+    ]
+  },{
+    value: '6',
+    label: '消耗管理',
+    children:[
+      {
+        value:'19',
+        label:'新增消耗'
+      },
+      {
+        value:'20',
+        label:'金币消耗明细'
+      }
+    ]
+  },{
+    value: '7',
+    label: '退款管理',
+    children:[
+      {
+        value:'21',
+        label:'新增退款'
+      },
+      {
+        value:'22',
+        label:'金币退款明细'
+      }
+    ]
+  },{
+    value: '8',
+    label: '客户账户明细',
+    children:[
+      {
+        value:'23',
+        label:'客户金币明细'
+      },
+      {
+        value:'24',
+        label:'客户金币余额'
+      }
+    ]
+  },{
+    value: '9',
+    label: '权限管理'
+  },{
+    value: '100',
+    label: '地区数据',
+    children:[
+    {
+        value:'101',
+        label:'总部'
+      },
+      {
+        value:'102',
+        label:'香港'
+      },
+      {
+        value:'103',
+        label:'新加坡'
+      },
+      {
+        value:'104',
+        label:'马来西亚'
+      },
+      {
+        value:'105',
+        label:'越南'
+      },
+      {
+        value:'106',
+        label:'韩国'
+      }
+    ]
+  }
+]
 </script>
 
 <template>
+  <!-- 搜索表单 -->
   <el-row>
     <el-col>
       <el-card style="margin-bottom: 20px">
@@ -395,11 +541,12 @@ const handleCurrentChange = function (val) {
       <el-card>
         <!-- 展示表单 -->
         <div class="add-item">
-          <el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()">新增用户</el-button>
+          <el-button style="color: #048efb; border: 1px solid #048efb" @click="userAddInit()">新增用户</el-button>
+          <el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()">新增角色</el-button>
         </div>
 
         <div>
-          <el-table :data="tableData" style="width: 100%">
+          <el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
             <el-table-column type="index" label="序号" width="100px" fixed="left">
               <template #default="scope">
                 <span>{{
@@ -458,7 +605,7 @@ const handleCurrentChange = function (val) {
     </el-col>
   </el-row>
   <!-- 新增用户权限 -->
-  <el-dialog v-model="permissionAddVisible" title="新增用户权限" width="800px" :close-on-click-modal="false">
+  <el-dialog v-model="userAddVisible" title="新增用户权限" width="800px" :close-on-click-modal="false">
     <template #footer>
       <!-- 居中显示 -->
 
@@ -472,20 +619,17 @@ const handleCurrentChange = function (val) {
         </el-form-item>
 
         <el-form-item prop="market" label="所属地区:" required>
-          <el-select v-model="addAdmin.market" placeholder="请选择所属地区" style="width: 220px"
-            @change="() => Ref.value.validateField('market')">
-            <el-option v-for="item in market" :key="item" :label="item" :value="item" />
+          <el-select multiple v-model="addAdmin.market" placeholder="请选择所属地区" style="width: 440px">
+            <el-option  v-for="item in market" :key="item" :label="item" :value="item" />
           </el-select>
         </el-form-item>
-        <el-form-item prop="permission" label="权限类别:" required>
-          <el-select v-model="addAdmin.permission" placeholder="请选择权限" style="width: 220px"
-            @change="() => Ref.value.validateField('permission')">
-            <el-option v-for="item in permissionList" :key="item.value" :label="item.label"
-              :value="item.value"></el-option>
+        <el-form-item prop="permission" label="角色名称:" required>
+          <el-select v-model="addAdmin.permission" placeholder="请选择角色名称" style="width: 220px">
+            <el-option v-for="item in permissionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item prop="postiton" label="职位:" required>
-          <el-input v-model="addAdmin.postiton" placeholder="请输入职称" style="width: 220px" />
+          <el-input v-model="addAdmin.postiton" placeholder="请输入职位" style="width: 220px" />
         </el-form-item>
         <el-form-item prop="machineId" label="机器码:" required>
           <div style="display: flex; align-items: center; flex-wrap: wrap;">
@@ -505,7 +649,7 @@ const handleCurrentChange = function (val) {
       </el-form>
 
       <div>
-        <el-button @click="closePermissionAddVisible()">取消</el-button>
+        <el-button @click="closeUserAddVisible()">取消</el-button>
         <el-button type="primary" @click="throttledPermissionAdd()">
           提交
         </el-button>
@@ -514,85 +658,66 @@ const handleCurrentChange = function (val) {
   </el-dialog>
 
   <!-- 这是编辑用户权限弹窗 -->
-  <el-dialog v-model="permissionEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false">
-    <el-descriptions class="margin-top" :column="2" border label-width="200px">
-      <el-descriptions-item>
-        <template #label>
-          <div class="permissionVisible">
-            <el-icon>
-              <UserFilled />
-            </el-icon>
-            员工精网号
-          </div>
-        </template>
-        {{ permissionEditObj.account }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template #label>
-          <div class="permissionVisible">
-            <el-icon>
-              <User />
-            </el-icon>
-            员工姓名
-          </div>
-        </template>
-        {{ permissionEditObj.name }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template #label>
-          <div class="permissionVisible">
-            <el-icon>
-              <location />
-            </el-icon>
-            所属地区
-          </div>
-        </template>
-        {{ permissionEditObj.market }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template #label>
-          <div class="permissionVisible">
-            <el-icon>
-              <OfficeBuilding />
-            </el-icon>
-            部门
-          </div>
-        </template>
-        {{ permissionEditObj.postiton }}
-      </el-descriptions-item>
-    </el-descriptions>
-
-    <el-divider>
-      <el-icon><star-filled /></el-icon>
-    </el-divider>
+  <el-dialog v-model="userEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false">
+    <el-form ref="Ref" :model="permissionEditObj" label-width="auto" style="max-width: 600px; align-items: center">
+      <el-form-item prop="userName" label="用户名称:" required>
+          <el-input v-model="permissionEditObj.userName" placeholder="请输入用户名" style="width: 220px" />
+        </el-form-item>
+        <el-form-item prop="roleName" label="角色名称:" required>
+          <el-input v-model="permissionEditObj.roleName" placeholder="请输入用户名" style="width: 220px" />
+        </el-form-item>
+        <el-form-item prop="parentName" label="上级角色:" required>
+          <el-select v-model="permissionEditObj.parentName" placeholder="请选择上级角色" style="width: 220px">
+            <el-option v-for="item in permissionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="permissionSelect" label="权限列表:"  required>
+        <el-tree multiple v-model="permissionEditObj.permissionSelect" :data="data" :render-after-expand="false" show-checkbox style="width: 700px" />
+      </el-form-item>
+      </el-form>
     <div>
-      <span class="permissionVisible" style="margin-right: 20px">权限设置:</span>
-      <el-radio-group v-model="permissionEditObj.roleId">
-        <el-radio value="1" border>管理员</el-radio>
-        <el-radio value="2" border>总部财务</el-radio>
-        <el-radio value="3" border>总部客服</el-radio>
-        <el-radio value="4" border>地区负责人</el-radio>
-        <el-radio value="5" border>地区财务</el-radio>
-        <el-radio value="6" border>客服专员</el-radio>
-      </el-radio-group>
     </div>
     <template #footer>
       <div>
-        <el-button @click="closePermissionEditVisible()">取消</el-button>
+        <el-button @click="closeUserEditVisible()">取消</el-button>
         <el-button type="primary" @click="throttledPermissionEdit">
           提交
         </el-button>
       </div>
     </template>
   </el-dialog>
+
+  <!-- 新增角色 -->
+  <el-dialog v-model="permissionAddVisible" title="新增角色" width="800px" :close-on-click-modal="false">
+    <template #footer>
+      <el-form ref="Ref" :model="addRole" label-width="auto" style="max-width: 600px; align-items: center">
+        <el-form-item prop="roleName" label="角色名称:" required>
+          <el-input v-model="addRole.roleName" placeholder="请输入用户名" style="width: 220px" />
+        </el-form-item>
+        <el-form-item prop="parentName" label="上级角色:">
+          <el-select v-model="addRole.parentName" placeholder="请选择上级角色" style="width: 220px" clearable>
+            <el-option v-for="item in permissionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="permissionSelect" label="权限列表:"  required>
+          <el-tree multiple v-model="addRole.permissionSelect" :data="filteredData" :render-after-expand="false" show-checkbox style="width: 700px" />
+        </el-form-item>
+        <el-form-item prop="grade" label="优先级:"  required>
+          <el-input v-model="addRole.grade" placeholder="数字1~999" style="width: 220px" />
+        </el-form-item>
+      </el-form>
+      
+      <div>
+        <el-button @click="closePermissionAddVisible()">取消</el-button>
+        <el-button type="primary" @click="throttledPermissionAdd()">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <style scoped>
-.permissionVisible {
-  font-size: 16px;
-  font-weight: bold;
-}
-
 .pagination {
   display: flex;
 }
@@ -625,4 +750,4 @@ const handleCurrentChange = function (val) {
   flex-direction: column;
   align-items: center;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/workspace/index.vue b/src/views/workspace/index.vue
index 4c9f1c6..bb6bd06 100644
--- a/src/views/workspace/index.vue
+++ b/src/views/workspace/index.vue
@@ -143,17 +143,8 @@
                 <el-button @click="getMonth()" label="month">本月</el-button>
                 <el-button @click="getYear()" label="year">本年</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"
-              />
+              <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" />
               <el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button>
             </el-row>
           </el-col>
@@ -162,6 +153,11 @@
         <el-row :gutter="20" style="margin-top: 20px">
           <el-col :span="18">
             <div class="bar">
+
+              <div v-if="chartLoading" class="loading-overlay">
+                <div class="loading-spinner"></div>
+              </div>
+
               <div ref="chartRef" style="width: 100%; height: 400px"></div>
             </div>
           </el-col>
@@ -193,7 +189,7 @@
 
 <script setup>
 import * as echarts from 'echarts'
-import { ref, onMounted, nextTick, watch } from 'vue'
+import { ref, onMounted, nextTick, watch, onUnmounted } from 'vue'
 import API from '@/util/http'
 import { ElMessage } from 'element-plus'
 import dayjs from 'dayjs';
@@ -242,6 +238,38 @@ const sumDaily = ref(0)
 const rechargeNum = ref(0)
 const firstRecharge = ref(0)
 const length = ref(0)
+//  加载状态
+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');
@@ -339,31 +367,31 @@ const processData = (data) => {
   const yesterdayRefund = summary.refundPermanent + summary.refundFreeJune + summary.refundFreeDecember + summary.refundTask
 
   // 更新卡片数据
-  currentGold.value = summary.currentGold
-  dailyChange.value = summary.dailyChange
-  currentPermanent.value = summary.currentPermanent
-  currentFree.value = summary.currentFree
-  currentFreeJune.value = summary.currentFreeJune
-  currentFreeDecember.value = summary.currentFreeDecember
-  currentTask.value = summary.currentTask
-
-  yearlyRecharge.value = summary.yearlyRecharge
-  yearlyMoney.value = summary.yearlyMoney
-  recharge.value = summary.recharge
-  money.value = summary.money
-
-  yearlyReduce.value = summary.yearlyReduce
-  yearlyConsume.value = summary.yearlyConsume
-  yearlyRefund.value = summary.yearlyRefund
-  dailyReduce.value = summary.dailyReduce
-  dailyConsume.value = yesterdayConsume
-  dailyRefund.value = yesterdayRefund
+  currentGold.value = summary.currentGold.toFixed(2)
+  dailyChange.value = summary.dailyChange.toFixed(2)
+  currentPermanent.value = summary.currentPermanent.toFixed(2)
+  currentFree.value = summary.currentFree.toFixed(2)
+  currentFreeJune.value = summary.currentFreeJune.toFixed(2)
+  currentFreeDecember.value = summary.currentFreeDecember.toFixed(2)
+  currentTask.value = summary.currentTask.toFixed(2)
+
+  yearlyRecharge.value = summary.yearlyRecharge.toFixed(2)
+  yearlyMoney.value = summary.yearlyMoney.toFixed(2)
+  recharge.value = summary.recharge.toFixed(2)
+  money.value = summary.money.toFixed(2)
+
+  yearlyReduce.value = summary.yearlyReduce.toFixed(2)
+  yearlyConsume.value = summary.yearlyConsume.toFixed(2)
+  yearlyRefund.value = summary.yearlyRefund.toFixed(2)
+  dailyReduce.value = summary.dailyReduce.toFixed(2)
+  dailyConsume.value = yesterdayConsume.toFixed(2)
+  dailyRefund.value = yesterdayRefund.toFixed(2)
 
   yearlyRechargeNum.value = summary.yearlyRechargeNum
-  sumWow.value = summary.sumWow / length.value
-  sumDaily.value = summary.sumDaily / length.value
-  rechargeNum.value = summary.rechargeNum
-  firstRecharge.value = summary.firstRecharge
+  sumWow.value = (summary.sumWow / length.value).toFixed(2)
+  sumDaily.value = (summary.sumDaily / length.value).toFixed(2)
+  rechargeNum.value = summary.rechargeNum.toFixed(2)
+  firstRecharge.value = summary.firstRecharge.toFixed(2)
 }
 
 // 获取市场列表
@@ -424,7 +452,6 @@ const getChartData = async () => {
 }
 // 处理图表数据
 const processChartData = (marketCards) => {
-  // 准备图表数据
   const chartData = {
     rechargePermanent: [],
     rechargeFree: [],
@@ -441,7 +468,6 @@ const processChartData = (marketCards) => {
   const sumConsumeFree1 = ref(0)
   const sumConsumeTask1 = ref(0)
 
-  // 按市场组织数据
   marketCards.forEach(market => {
     chartData.rechargePermanent.push(market.sumRechargePermanent / 100 || 0)
     chartData.rechargeFree.push(market.sumRechargeFree / 100 || 0)
@@ -465,12 +491,11 @@ const processChartData = (marketCards) => {
   sumConsumeFree.value = sumConsumeFree1.value
   sumConsumeTask.value = sumConsumeTask1.value
 
-  // 根据当前选中的标签更新图表
   updateChart(chartData)
 }
 
 const processRankingData = (marketCards) => {
-  // 根据当前选中的标签和类型计算每个市场的总金币数量
+  // 每个市场的总金币数
   const rankingData = marketCards.map(market => {
     let coinAmount = 0;
     if (activeTab.value === 'recharge') {
@@ -507,7 +532,7 @@ const processRankingData = (marketCards) => {
       }
     }
     return {
-      market: market.market, // 使用 market 字段作为地区名称
+      market: market.market,
       coinAmount: coinAmount
     };
   });
@@ -515,23 +540,23 @@ const processRankingData = (marketCards) => {
   // 按金币数量排序
   rankingData.sort((a, b) => b.coinAmount - a.coinAmount);
 
-  // 添加排名序号
+  // 排名序号
   tableData.value = rankingData.map((item, index) => ({
     rank: index + 1,
     ...item
   }));
 }
 
-// 监听 selectedType 的变化，重新处理排名数据
 watch(selectedType, () => {
   getChartData();
 });
 // 更新图表
 const updateChart = (chartData) => {
   if (!chartInstance) {
-    chartInstance = echarts.init(chartRef.value)
+    initChart()
   }
-
+  chartLoading.value = true
+try{
   let series = []
   let legend = []
 
@@ -593,7 +618,6 @@ const updateChart = (chartData) => {
     legend = ['永久金币', '免费金币', '任务金币']
   }
 
-  // 设置图表选项
   const option = {
     tooltip: {
       trigger: 'axis',
@@ -638,6 +662,14 @@ const updateChart = (chartData) => {
   }
 
   chartInstance.setOption(option)
+} catch (error) {
+    console.error('图表更新失败:', error)
+    ElMessage.error('图表渲染失败')
+  } finally {
+    setTimeout(() => {
+      chartLoading.value = false
+    }, 300)
+  }
 }
 
 // 处理标签切换
@@ -673,13 +705,16 @@ const getCardData = async () => {
 
 
 onMounted(async () => {
-
   await getAdminData()
   await getCardData()
   await getMarkets()
   getYear() 
-  await getChartData()
-  console.log('挂载后调用')
+  window.addEventListener('resize', () => {
+    chartInstance.resize()
+  })
+})
+onUnmounted(() => {
+  destroyChart()
 })
 </script>