From fa97fb9665f293da53f85114f47a2ae80e752471 Mon Sep 17 00:00:00 2001
From: zry <18990852002@163.com>
Date: Mon, 23 Jun 2025 15:05:06 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=EF=BC=9F=EF=BC=9F=EF=BC=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/usergold/clientCountDetail.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/views/usergold/clientCountDetail.vue b/src/views/usergold/clientCountDetail.vue
index cf07e03..7256755 100644
--- a/src/views/usergold/clientCountDetail.vue
+++ b/src/views/usergold/clientCountDetail.vue
@@ -8,7 +8,7 @@ import moment from 'moment'
 import API from '@/util/http'
 import { writeFile, utils } from 'xlsx'
 
-// 变量
+// 变量aaaaaaaaaaaaaaaaaaaaa
 const adminData = ref({})
 const getAdminData = async function () {
   try {
@@ -479,13 +479,13 @@ const handleCurrentChange = function (val) {
 }
 
 
-// 用于控制显示内容的变量
-const activeTab = ref('detailY')
+// // 用于控制显示内容的变量
+// const activeTab = ref('detailY')
 
-// 切换标签页的方法
-const changeTab = (tabName) => {
-  activeTab.value = tabName
-}
+// // 切换标签页的方法
+// const changeTab = (tabName) => {
+//   activeTab.value = tabName
+// }
 
 // 挂载
 onMounted(async function () {

From cfd14799f605b5472eabb869d0887c0f98b63788 Mon Sep 17 00:00:00 2001
From: zry <18990852002@163.com>
Date: Mon, 23 Jun 2025 17:00:32 +0800
Subject: [PATCH 2/2] =?UTF-8?q?git=E5=89=8D=E7=AB=AF=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E8=9E=8D=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/audit/rechargeAudit.vue |  316 ++------
 src/views/audit/refundAudit.vue   | 1151 +++++++++-------------------
 src/views/managerecharge/rate.vue |  232 ++----
 src/views/workspace/index.vue     | 1482 ++++++++-----------------------------
 4 files changed, 791 insertions(+), 2390 deletions(-)

diff --git a/src/views/audit/rechargeAudit.vue b/src/views/audit/rechargeAudit.vue
index f8914cf..553cfb8 100644
--- a/src/views/audit/rechargeAudit.vue
+++ b/src/views/audit/rechargeAudit.vue
@@ -7,32 +7,6 @@ import axios from 'axios'
 import request from '@/util/http'
 import moment from 'moment'
 
-// 变量
-// 这是动态表头，
-const columnOptions = ref([
-  { prop: 'username', label: '姓名', width: 125 },
-  { prop: 'jwcode', label: '精网号', width: 125 },
-  { prop: 'area', label: '所属地区', width: 125 },
-  { prop: 'activityName', label: '活动名称', width: 150 },
-  { prop: 'rechargeGold', label: '充值金额', width: 125, sortable: true },
-  { prop: 'rechargeWay', label: '充值方式', width: 125 },
-  { prop: 'paidGold', label: '永久金币', width: 125, sortable: true },
-  { prop: 'freeGold', label: '免费金币', width: 125, sortable: true },
-  { prop: 'remark', label: '备注', width: 200, showOverflowTooltip: true },
-  { prop: 'payWay', label: '支付方式', width: 125 },
-  { prop: 'rechargeVoucher', label: '支付凭证', width: 125 },
-  { prop: 'name', label: '提交人', width: 125 },
-  { prop: 'status', label: '审核状态', width: 125 },
-  { prop: 'reson', label: '驳回理由', width: 200 },
-  { prop: 'rechargeTime', label: '交款时间', width: 200, sortable: true },
-  { prop: 'createTime', label: '提交时间', width: 200, sortable: true },
-  { prop: 'auditTime', label:'审核时间', width:200, sortable:true}
-])
-
-// 默认显示
-const defaultColumns = ['username', 'jwcode', 'area', 'activityName', 'rechargeGold', 'rechargeWay', 'paidGold', 'freeGold', 
-                       'remark', 'payWay', 'rechargeVoucher', 'name', 'status', 'reson', 'rechargeTime',  'createTime', 'auditTime']
-const selectedColumns = ref([...defaultColumns])
 //这是获取用户信息的接口
 const adminData = ref({})
 const getAdminData = async function () {
@@ -42,7 +16,6 @@ const getAdminData = async function () {
       data: {}
     })
     adminData.value = result
-    console.log('请求成功', result)
     console.log('用户信息', adminData.value)
   } catch (error) {
     console.log('请求失败', error)
@@ -52,7 +25,6 @@ const getAdminData = async function () {
 // 充值明细表格
 const tableData = ref([])
 // 搜索======================================
-// 搜索rechargeVo
 const rechargeVo = ref({
   rechargeWay: '客服充值'
 })
@@ -67,22 +39,16 @@ const total = ref(100)
 const getTime = ref([])
 // 搜索活动列表
 const activity = ref([])
-// 所有信息
-const allData = ref([])
 // 搜索地区列表
 const area = ref([])
-
-// 编辑======================================
 // 驳回弹出框
 const rejectVisible = ref(false)
 // 驳回对象
 const rejectObj = ref({})
 // 通过对象
 const passObj = ref({})
-
-//标签页默认高亮选项
-const activeName = ref('all')
-
+//标签页默认是待审批
+const activeName = ref('wait')
 // 支付方式选项
 const payWay = [
   {
@@ -106,23 +72,16 @@ const payWay = [
     label: '借记卡'
   }
 ]
-
-// //表格高度
-// const tableHeight = computed(function () {
-//   return (getObj.value.pageSize + 2) * 60 + "px";
-// });
-
 // 表单验证ref
 const Ref = ref(null)
 
 // 方法
-// 合计数存储
 // 统计合计数
 const trueGold = ref(0)
 const trueCount = ref(0)
 const trueRGold = ref(0)
 const trueFGold = ref(0)
-// 转化一下，保留两位小数，展示时填充转化后的变量名
+// 保留两位小数
 const formattedTrueGold = computed(() => trueGold.value.toFixed(2))
 const formattedTrueRGold = computed(() => trueRGold.value.toFixed(2))
 const formattedTrueFGold = computed(() => trueFGold.value.toFixed(2))
@@ -144,15 +103,12 @@ const rejectedCount = ref(0)
 const rejectedGold = ref(0)
 const rejectedRGold = ref(0)
 const rejectedFGold = ref(0)
-// 搜索==============================================================
 // 搜索方法
 const get = async function (val) {
   try {
     // 地区赋值
     if (adminData.value.area === '泰国') {
       rechargeVo.value.areas = ['泰国', '越南']
-    } else if (adminData.value.area !== '总部') {
-      rechargeVo.value.area = adminData.value.area
     }
     // 搜索参数页码赋值
     if (typeof val === 'number') {
@@ -171,7 +127,6 @@ const get = async function (val) {
     rechargeVo.value.sortField = sortField.value
     rechargeVo.value.sortOrder = sortOrder.value
     console.log('搜索参数', getObj.value)
-    // 发送POST请求
     const result = await request({
       url: '/recharge/recharge',
       data: {
@@ -181,16 +136,15 @@ const get = async function (val) {
       }
     })
     // 合计数的接口
-    // 复制一份 rechargeVo.value 并移除排序字段和排序方式
-    const detailWithoutSort = { ...rechargeVo.value }
-    delete detailWithoutSort.sortField
-    delete detailWithoutSort.sortOrder
-    delete detailWithoutSort.status
+    // 复制一份rechargeVo.value，去掉排序和状态
+    const rechargeVo1 = { ...rechargeVo.value }
+    delete rechargeVo1.sortField
+    delete rechargeVo1.sortOrder
+    delete rechargeVo1.status
     const result2 = await request({
       url: '/recharge/recharge/RechargeA',
-      data: detailWithoutSort
+      data: rechargeVo1
     })
-    // 做一个判断，如果result2.data[i].flag="待审核"，那么 totalData.value = result2.data[i]，否则就赋值为0
     // 统计合计数
     if (result2.data) {
       result2.data.forEach((item) => {
@@ -220,16 +174,11 @@ const get = async function (val) {
     }
 
     trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
-    trueCount.value =
-      pendingCount.value + approvedCount.value + rejectedCount.value
-    trueRGold.value =
-      pendingRGold.value + approvedRGold.value + rejectedRGold.value
-    trueFGold.value =
-      pendingFGold.value + approvedFGold.value + rejectedFGold.value
+    trueCount.value = pendingCount.value + approvedCount.value + rejectedCount.value
+    trueRGold.value = pendingRGold.value + approvedRGold.value + rejectedRGold.value
+    trueFGold.value = pendingFGold.value + approvedFGold.value + rejectedFGold.value
 
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    console.log('这是分页', getObj.value)
+    console.log('搜索对象', getObj.value)
     // 存储表格数据
     tableData.value = result.data.list
     console.log('tableData', tableData.value)
@@ -238,7 +187,6 @@ const get = async function (val) {
     console.log('total', total.value)
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 // 搜索
@@ -309,13 +257,6 @@ const get7Days = function () {
   console.log('getTime', getTime.value)
   get()
 }
-//全部充值明细
-const adminAll = function () {
-  console.log('adminAll')
-  rechargeVo.value.status = ''
-  getObj.value.pageNum = 1
-  get()
-}
 //待审核充值明细
 const adminWait = async function () {
   rechargeVo.value.status = 0
@@ -349,11 +290,9 @@ const adminReject = async function () {
   trueRGold.value = rejectedRGold.value
   trueFGold.value = rejectedFGold.value
 }
-//点击标签页
+
 const handleClick = function (tab, event) {
-  if (tab.props.name === 'all') {
-    adminAll()
-  } else if (tab.props.name === 'wait') {
+  if (tab.props.name === 'wait') {
     adminWait()
   } else if (tab.props.name === 'pass') {
     adminPass()
@@ -361,67 +300,30 @@ const handleClick = function (tab, event) {
     adminReject()
   }
 }
-// 获取活动名称
+
 const getActivity = async function () {
   try {
-    // 发送POST请求
     const result = await request({
       url: '/recharge/activity/select',
       data: {}
     })
-
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储表格数据
     activity.value = result.data
     console.log('activity', activity.value)
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
-// 获取地区
+// 地区下拉框
 const getArea = async function () {
   try {
-    // 发送POST请求
     const result = await request({
       url: '/recharge/user/search',
       data: {}
     })
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储地区信息
     area.value = result.data
     console.log('地区', area.value)
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-// 验证跳转输入框的数字是否合法
-const checkNumber = function () {
-  if (typeof parseInt(getObj.value.pageNum) === 'number') {
-    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
-    if (
-      getObj.value.pageNum > 0 &&
-      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
-    ) {
-      console.log('输入的数字合法')
-      getObj.value.pageNum = parseInt(getObj.value.pageNum)
-      get()
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
-    }
-  } else {
-    //提示
-    ElMessage({
-      type: 'error',
-      message: '请检查输入内容'
-    })
   }
 }
 const handlePageSizeChange = function (val) {
@@ -462,10 +364,7 @@ const passConfirm = async function () {
       url: '/audit/audit/goldedit',
       data: passObj.value
     })
-
-    // 将响应结果存储到响应式数据中
     console.log('请求成功', result)
-    // 刷新表格数据
     get()
     //提示
     ElMessage({
@@ -512,24 +411,17 @@ const rejectConfirm = async function () {
           url: '/audit/audit/goldedit',
           data: rejectObj.value
         })
-
-        // 将响应结果存储到响应式数据中
         console.log('请求成功', result)
-        // 刷新表格数据
         get()
-        // 关闭弹出框
-        closeRejectVisible()
-        //提示
+        closeRejectVisible()// 关闭弹出框
         ElMessage({
           type: 'success',
           message: '驳回成功！'
         })
       } catch (error) {
         console.log('请求失败', error)
-        // 在这里可以处理错误逻辑，比如显示错误提示等
       }
     } else {
-      //提示
       ElMessage({
         type: 'error',
         message: '请检查输入内容'
@@ -539,7 +431,6 @@ const rejectConfirm = async function () {
 }
 
 // 表单验证
-
 const rules = reactive({
   reson: [{ required: true, message: '请输入驳回理由', trigger: 'blur' }]
 })
@@ -568,7 +459,7 @@ const handleSortChange = (column) => {
     sortField.value = 'create_time'
   } else if (column.prop === 'paidGold') {
     sortField.value = 'paid_gold'
-  }else if (column.prop === 'auditTime') {
+  } else if (column.prop === 'auditTime') {
     sortField.value = 'audit_time'
   }
   sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
@@ -586,35 +477,27 @@ const trimJwCode = () => {
 <template>
   <el-row>
     <el-col>
-      <el-card style="margin-bottom: 20px">
-        <el-row style="margin-bottom: 10px">
+      <el-card style="margin-bottom: 5px">
+        <el-row style="margin-bottom: 5px">
           <el-col :span="6">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">精网号：</el-text>
+              <el-text   size="large">精网号：</el-text>
               <el-input v-model="rechargeVo.jwcode" placeholder="请输入精网号" style="width: 240px" clearable />
-            </div>
           </el-col>
           <el-col :span="6">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">活动名称：</el-text>
-              <el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称"  style="width: 240px" 
-                clearable>
-                <el-option v-for="item in activity" :key="item.activityId" :label="item.activityName"
-                  :value="item.activityId" />
+              <el-text   size="large">活动名称：</el-text>
+              <el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称" style="width: 240px" clearable>
+                <el-option v-for="item in activity" :key="item.activityId" :label="item.activityName" :value="item.activityId" />
               </el-select>
-            </div>
           </el-col>
           <el-col :span="6">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">支付方式：</el-text>
+              <el-text   size="large">支付方式：</el-text>
               <el-select v-model="rechargeVo.payWay" placeholder="请选择支付方式" style="width: 240px" clearable>
                 <el-option v-for="item in payWay" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
-            </div>
           </el-col>
           <el-col :span="6">
             <div class="head-card-element" v-if="adminData.area == '总部'">
-              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-text   size="large">所属地区：</el-text>
               <el-select v-model="rechargeVo.area" placeholder="请选择所属地区" style="width: 240px" clearable>
                 <el-option v-for="item in area" :key="item" :label="item" :value="item" />
               </el-select>
@@ -622,38 +505,22 @@ const trimJwCode = () => {
           </el-col>
         </el-row>
         <el-row>
-        <el-col :span="16">
-          <div class="time-controls">
-            <div class="time-group">
-              <el-text class="mx-1" size="large">充值时间：</el-text>
-              <el-date-picker
-                v-model="getTime"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="起始时间"
-                end-placeholder="结束时间"
-                style="width: 400px"
-              />
-                  <el-button @click="getToday()" style="margin-left: 10px"> 今 </el-button>
-                  <el-button @click="getYesterday()" style="margin-left: 10px"> 昨 </el-button>
-                  <el-button @click="get7Days()" style="margin-left: 10px"> 近7天 </el-button>
+          <el-col :span="12">
+            <div class="time-controls">
+              <div class="time-group">
+                <el-text   size="large">添加时间：</el-text>
+                <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
+                  end-placeholder="结束时间" style="width: 400px" />
+                <el-button @click="getToday()" style="margin-left: 10px"> 今 </el-button>
+                <el-button @click="getYesterday()" style="margin-left: 10px"> 昨 </el-button>
+                <el-button @click="get7Days()" style="margin-left: 10px"> 近7天 </el-button>
+              </div>
             </div>
-          </div>
-        </el-col>
+          </el-col>
 
-        <el-col :span="8">
-            <el-button @click="reset()" type="success" style="margin-right: 10px">重置</el-button>
+          <el-col :span="8">
+            <el-button @click="reset()" type="success">重置</el-button>
             <el-button type="primary" @click="search()">查询</el-button>
-        </el-col>
-      </el-row>
-        <el-row>
-          <el-col :span="21">
-            <div style="margin-top: 10px">
-              <el-text class="mx-1" size="large">请选择您想看到的数据：</el-text>
-              <el-select v-model="selectedColumns" multiple placeholder="请选择您想看到的数据" size="large" style="width: 800px">
-                <el-option v-for="item in columnOptions" :key="item.prop" :label="item.label" :value="item.prop" />
-              </el-select>
-            </div>
           </el-col>
         </el-row>
       </el-card>
@@ -662,71 +529,49 @@ const trimJwCode = () => {
   <el-row>
     <el-col>
       <el-card>
-        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
-          <el-tab-pane label="全部" name="all"></el-tab-pane>
+        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
           <el-tab-pane label="待审核" name="wait"></el-tab-pane>
           <el-tab-pane label="已通过" name="pass"></el-tab-pane>
           <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
 
           <div>
-            总条数：{{ trueCount }}条，总金币数：{{
-              formattedTrueGold
-            }}金币，永久金币：{{ formattedTrueRGold }}金币，免费金币：{{ formattedTrueFGold }}金币
+            总条数：{{ trueCount }}条&nbsp;&nbsp;&nbsp;&nbsp;
+            总金币数：{{ formattedTrueGold }}金币&nbsp;&nbsp;&nbsp;&nbsp;
+            永久金币：{{ formattedTrueRGold }}金币&nbsp;&nbsp;&nbsp;&nbsp;
+            免费金币：{{ formattedTrueFGold }}金币
           </div>
         </el-tabs>
         <div style="height: 540px; overflow-y: auto">
           <el-table :data="tableData" style="width: 100%" height="540px" @sort-change="handleSortChange" :row-style="{ height: '50px' }">
             <el-table-column type="index" label="序号" width="100px" fixed="left">
               <template #default="scope">
-                <span>{{
-                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
-                }}</span>
+                <span>{{ scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize }}</span>
               </template>
             </el-table-column>
-            <!-- 动态列 -->
-            <template v-for="col in columnOptions" :key="col.prop">
-              <el-table-column v-if="selectedColumns.includes(col.prop)" :prop="col.prop" :label="col.label"
-                :width="col.width" :sortable="col.sortable ? 'custom' : false"
-                :show-overflow-tooltip="true" >
-                <template #default="scope">
-                  <!-- 特殊列模板 -->
-                  <template v-if="col.prop === 'rechargeTime'">
-                    {{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }}
-                  </template>
-                  <template v-else-if="col.prop === 'createTime'">
-                    {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
-                  </template>
-                  <template v-else-if="col.prop === 'auditTime'">
-                    {{ scope.row.auditTime ? moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '----' }}
-                  </template>
-                  <template v-else-if="col.prop === 'remark'">
-                    <span>{{ scope.row[col.prop] }}</span>
-                  </template>
-                  <template v-else-if="col.prop === 'rechargeVoucher'">
-                    <el-image :src="scope.row.rechargeVoucher" style="width: 50px; height: 50px" />
-                  </template>
-                  <template v-else-if="col.prop === 'status'">
-                    <div class="status">
-                      <span :class="{
-                        'green-dot': scope.row.status === 1,
-                        'grey-dot': scope.row.status === 0,
-                        'red-dot': scope.row.status === 2
-                      }"></span>
-                      <span>{{
-                        scope.row.status === 1 ? '已通过' :
-                          scope.row.status === 0 ? '待审核' : '已驳回'
-                      }}</span>
-                    </div>
-                  </template>
-                  <template v-else-if="['paidGold', 'freeGold'].includes(col.prop)">
-                    {{ scope.row[col.prop] / 100 }}
-                  </template>
-                  <span v-else>
-                    {{ scope.row[col.prop] }}
-                  </span>
-                </template>
+            <el-table-column fixed="left" prop="username" label="姓名" width="150px" />
+            <el-table-column fixed="left" prop="jwcode" label="精网号" width="110px" />
+            <el-table-column prop="area" label="所属地区" width="100px" />
+            <el-table-column prop="refundType" label="活动名称" width="100px" />
+            <el-table-column prop="refundGoods" label="充值金额" width="100px" />
+            <el-table-column prop="rechargeCoin" label="永久金币" width="110px" sortable="custom">
+              <template #default="scope">{{ scope.row.rechargeCoin }}</template>
+            </el-table-column>
+            <el-table-column prop="freeCoin" label="免费金币" sortable="custom" width="110px">
+              <template #default="scope">{{ scope.row.freeCoin }}</template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip />
+            <el-table-column prop="freeCoin" label="支付凭证" width="110px" />
+            <el-table-column prop="adminName" label="提交人" width="100px" />
+            <el-table-column prop="status" label="付款时间" width="200px" >
+            <template #default="scope">
+                {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+              </template>
               </el-table-column>
-            </template>
+            <el-table-column prop="createTime" sortable="custom" label="提交时间" width="200px">
+              <template #default="scope">
+                {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+              </template>
+            </el-table-column>
             <el-table-column fixed="right" prop="operation" label="操作" width="150px">
               <template #default="scope">
                 <div class="operation">
@@ -741,9 +586,7 @@ const trimJwCode = () => {
                     </template>
                     <template #actions="{ confirm, cancel }">
                       <el-button size="small" @click="cancel">取消</el-button>
-                      <el-button type="primary" size="small" @click="confirm">
-                        确定
-                      </el-button>
+                      <el-button type="primary" size="small" @click="confirm">确定</el-button>
                     </template>
                   </el-popconfirm>
                   <el-button :disabled="scope.row.status === 1 || scope.row.status === 2
@@ -758,7 +601,6 @@ const trimJwCode = () => {
           </el-table>
         </div>
 
-        <!-- 分页 -->
         <div class="pagination">
           <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
             layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
@@ -768,7 +610,6 @@ const trimJwCode = () => {
     </el-col>
   </el-row>
 
-  <!-- 驳回弹出框 -->
   <el-dialog v-model="rejectVisible" title="驳回理由" width="500" :before-close="closeRejectVisible">
     <template #footer>
       <el-form :model="rejectObj" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px">
@@ -825,17 +666,23 @@ const trimJwCode = () => {
 
 .status {
   display: flex;
-  align-items: center; /* 确保子元素垂直居中对齐 */
-  gap: 6px; /* 设置圆点和文字之间的间距 */
+  align-items: center;
+  /* 确保子元素垂直居中对齐 */
+  gap: 6px;
+  /* 设置圆点和文字之间的间距 */
 }
 
-.green-dot, .grey-dot, .red-dot {
+.green-dot,
+.grey-dot,
+.red-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  flex-shrink: 0; /* 防止圆点在空间不足时缩小 */
-  margin: 0; /* 移除原有的 margin-right */
+  flex-shrink: 0;
+  /* 防止圆点在空间不足时缩小 */
+  margin: 0;
+  /* 移除原有的 margin-right */
 }
 
 /* 备注列样式 */
@@ -846,6 +693,7 @@ const trimJwCode = () => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 /* 设置单元格内容溢出隐藏 */
 .el-table .el-table__cell {
   overflow: hidden;
diff --git a/src/views/audit/refundAudit.vue b/src/views/audit/refundAudit.vue
index 74a5ad2..f4bd188 100644
--- a/src/views/audit/refundAudit.vue
+++ b/src/views/audit/refundAudit.vue
@@ -1,888 +1,409 @@
+<template>
+  <el-row>
+    <el-col>
+      <div>
+        <el-card style="margin-bottom: 5px">
+          <el-row style="margin-bottom: 5px">
+            <el-col :span="6">
+              <el-text size="large">精网号：</el-text>
+              <el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width: 240px" clearable />
+            </el-col>
+            <el-col :span="6">
+              <el-text size="large">退款类型：</el-text>
+              <el-select v-model="searchForm.refundType" placeholder="请选择" style="width: 240px" clearable>
+                <el-option label="商品退款" value="商品退款" />
+                <el-option label="退点啥？？" value="退点啥??" />
+              </el-select>
+            </el-col>
+            <el-col :span="6">
+              <el-text size="large">所属地区：</el-text>
+              <el-select v-model="searchForm.area" placeholder="请选择" style="width: 240px" clearable>
+                <el-option v-for="item in areaOptions" :key="item" :label="item" :value="item" />
+              </el-select>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-text size="large">退款时间：</el-text>
+                <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
+                  end-placeholder="结束日期"  style="width: 400px" />
+                  <el-button @click="getToday()" style="margin-left: 10px">今</el-button>
+                  <el-button @click="getYesterday()" style="margin-left: 10px">昨</el-button>
+                  <el-button @click="get7Days()" style="margin-left: 10px">近7天</el-button>
+            </el-col>
+            <el-col :span="6">
+              <el-button type="success" @click="resetSearch">重置</el-button>
+              <el-button type="primary" @click="handleSearch">查询</el-button>
+            </el-col>
+          </el-row>
+        </el-card>
+      </div>
+    </el-col>
+  </el-row>
+
+  <el-card>
+    <el-tabs v-model="checkTab" @tab-change="switchTab">
+      <el-tab-pane label="待审核" name="1" />
+      <el-tab-pane label="已通过" name="2" />
+      <el-tab-pane label="已驳回" name="3" />
+    </el-tabs>
+
+    <div class="stats-info">
+      退款记录条数: {{ stats.totalItems }}&nbsp;&nbsp;&nbsp;&nbsp;
+      退款金币总数: {{ stats.totalCoins }}&nbsp;&nbsp;&nbsp;&nbsp;
+      永久金币: {{ stats.permanentCoins }}&nbsp;&nbsp;&nbsp;&nbsp;
+      免费金币: {{ stats.freeCoins }}&nbsp;&nbsp;&nbsp;&nbsp;
+      任务金币: {{ stats.taskCoins }}
+    </div>
+
+    <el-table :data="tableData" height="540px" @sort-change="handleSortChange">
+      <el-table-column type="index" label="序号" width="60" />
+      <el-table-column prop="username" label="姓名" width="120" />
+      <el-table-column prop="jwcode" label="精网号" width="120" />
+      <el-table-column prop="area" label="所属地区" width="120" />
+      <el-table-column prop="refundType" label="退款类型" width="120" />
+      <el-table-column prop="refundMethod" label="退款方式" width="120" />
+      <el-table-column prop="refundGoods" label="退款商品" width="120" />
+      <el-table-column prop="refundAmount" label="退款金额" width="120" sortable="custom">
+        <template #default="{ row }">
+          {{ row.rechargeCoin + row.freeCoin + row.taskCoin }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="rechargeCoin" label="永久金币" width="120" sortable="custom" />
+      <el-table-column prop="freeCoin" label="免费金币" width="120" sortable="custom" />
+      <el-table-column prop="taskCoin" label="任务金币" width="120" sortable="custom" />
+      <el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip /><!-- 当内容过长被隐藏时显示 tooltip -->
+      <el-table-column prop="adminName" label="提交人" width="120" />
+      <el-table-column v-if="checkTab === 'rejected'" prop="reason" label="驳回理由" width="150" show-overflow-tooltip />
+      <el-table-column v-if="checkTab !== 'pending'" prop="auditName" label="审核人" width="120" />
+      <el-table-column prop="createTime" label="提交时间" width="180" sortable="custom">
+        <template #default="{ row }">
+          {{ moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+        </template>
+      </el-table-column>
+
+      <el-table-column v-if="checkTab !== 'pending'" prop="auditTime" label="审核时间" width="180" sortable="custom">
+        <template #default="{ row }">
+          {{ row.auditTime ? moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '--' }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" width="150" fixed="right" v-if="checkTab === 'pending'">
+        <template #default="{ row }">
+          <el-button type="success" size="small" @click="handleAction('approve', row)">通过</el-button>
+          <el-button type="danger" size="small" @click="handleAction('reject', row)">驳回</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
+      :total="pagination.total" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
+      @size-change="handlePagination('size', $event)" @current-change="handlePagination('page', $event)"
+      class="pagination" />
+  </el-card>
+
+  <!-- 驳回弹出框 -->
+  <el-dialog v-model="rejectDialog" title="驳回理由" width="500px">
+    <el-form :model="rejectForm">
+      <el-form-item label="驳回理由">
+        <el-input v-model="rejectForm.reason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200"
+          show-word-limit />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="rejectDialog=false">取消</el-button>
+      <el-button type="primary" @click="rejectRefund">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
 <script setup>
-import { ref, onMounted, reactive, computed } from 'vue'
-import ElementPlus from 'element-plus'
+import { ref, onMounted } from 'vue'
 import request from '@/util/http'
 import { ElMessage } from 'element-plus'
-import { AiFillRead } from 'vue-icons-plus/ai'
-import axios from 'axios'
 import moment from 'moment'
-// 变量
-// 用户对象假的
-const admin = ref({
-  adminId: 1,
-  name: '赵刚',
-  area: '中国'
+
+// 状态常量
+const STATUS = {
+  PENDING: 0,// 待审核
+  APPROVED: 1,// 通过
+  REJECTED: 2 // 驳回
+}
+
+// 搜索表单
+const searchForm = ref({
+  jwcode: '',
+  refundType: '',
+  refundGoods: '',
+  area: '',
+  startDate: '',
+  endDate: ''
 })
-//这是获取用户信息的接口
-const adminData = ref({})
-const getAdminData = async function () {
+
+const checkTab = ref(1) // 能否不用STATUS常量，1是待审批，2是已通过，3是驳回，参数status需要Integer
+const dateRange = ref([])
+
+const pagination = ref({
+  pageNum: 1,
+  pageSize: 50,
+  total: 0
+})
+
+const tableData = ref([])
+const productOptions = ref([])
+const areaOptions = ref([])
+const adminInfo = ref({})
+const stats = ref({
+  totalItems: 0,
+  totalCoins: 0,
+  permanentCoins: 0,
+  freeCoins: 0,
+  taskCoins: 0
+})
+// 驳回
+const rejectDialog = ref(false) // 驳回对话框
+const rejectForm = ref({ reason: '' })
+const currentRecord = ref(null)
+// 获取用户信息
+const fetchAdminInfo = async () => {
   try {
-    const result = await request({
-      url: '/admin/userinfo',
-      data: {}
-    })
-    adminData.value = result
-    console.log('请求成功', result)
-    console.log('用户信息', adminData.value)
+    const res = await request({ url: '/admin/userinfo' })
+    adminInfo.value = res
+    if (res.area !== '总部') {
+      searchForm.value.area = res.area
+    }
   } catch (error) {
-    console.log('请求失败', error)
+    console.error('获取用户信息失败', error)
   }
 }
-// 充值明细表格
-const tableData = ref([])
-// 搜索======================================
-// 搜索detail
-const detail = ref({})
-// 搜索对象
-const getObj = ref({
-  pageNum: 1,
-  pageSize: 50
-})
-//分页总条目
-const total = ref(100)
-// 搜索对象时间
-const getTime = ref([])
-// 搜索活动列表
-const product = ref([])
-// 所有信息
-const allData = ref([])
-// 搜索地区列表
-const area = ref([])
-
-// 编辑======================================
-// 驳回弹出框
-const rejectVisible = ref(false)
-// 驳回对象
-const rejectObj = ref({})
-// 通过对象
-const passObj = ref({})
-
-//标签页默认高亮选项
-const activeName = ref('all')
-
-// 退款类型选项
-const refundType = [
-  {
-    value: '退款商品',
-    label: '退款商品'
+
+// 查商品
+const fetchProducts = async () => {
+  try {
+    const res = await request({ url: '/product' })
+    productOptions.value = res.data || []
+  } catch (error) {
+    console.error('获取商品列表失败', error)
   }
-]
-
-// //表格高度
-// const tableHeight = computed(function () {
-//   return (getObj.value.pageSize + 1) * 50 + "px";
-// });
-
-// 表单验证ref
-const Ref = ref(null)
-
-// 方法
-// 统计合计数
-// 统计合计数
-const trueGold = ref(0)
-const trueCount = ref(0)
-// 待审核条数
-const pendingCount = ref(0)
-// 待审核金币数
-const pendingGold = ref(0)
-// 已通过条数
-const approvedCount = ref(0)
-// 已通过金币数
-const approvedGold = ref(0)
-// 已驳回条数
-const rejectedCount = ref(0)
-// 已驳回金币数
-const rejectedGold = ref(0)
-
-// 搜索==================================================================
-// 搜索方法
-const get = async function (val) {
+}
+
+// 查地区
+const fetchAreas = async () => {
   try {
-    // 地区赋值
-    if (adminData.value.area === '泰国') {
-      rechargeVo.value.areas = ['泰国', '越南']
-    } else if (adminData.value.area !== '总部') {
-      rechargeVo.value.area = adminData.value.area
-    }
-    // 搜索参数页码赋值
-    if (typeof val === 'number') {
-      getObj.value.pageNum = val
-    }
-    // 搜索参数时间赋值
-    if (getTime.value != null) {
-      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
-        detail.value.startDate = getTime.value[0]
-        detail.value.endDate = getTime.value[1]
+    const result = await request({ url: '/recharge/user/search' })
+    areaOptions.value = result.data || []
+  } catch (error) {
+    console.error('获取地区列表失败', error)
+  }
+}
+
+const get = async () => {
+  console.log('===========================================' + checkTab.value)
+  try {
+    const params = {
+      pageNum: pagination.value.pageNum,
+      pageSize: pagination.value.pageSize,
+      detail: {
+        ...searchForm.value,
+        status: getCurrentStatus()
       }
-    } else {
-      detail.value.startDate = ''
-      detail.value.endDate = ''
     }
-    detail.value.sortField = sortField.value
-    detail.value.sortOrder = sortOrder.value
-    console.log('搜索参数', getObj.value)
-    // 发送POST请求
-    const result = await request({
+    // 时间格式化
+    if (dateRange.value?.length === 2) {
+      params.detail.startDate = moment(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
+      params.detail.endDate = moment(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss')
+    }
+
+    const res = await request({
       url: '/audit/audit/refund',
-      data: {
-        pageNum: getObj.value.pageNum,
-        pageSize: getObj.value.pageSize,
-        detail: {
-          ...detail.value
-        }
-      }
+      data: params
     })
-    const detailWithoutSort = { ...detail.value }
-    delete detailWithoutSort.sortField
-    delete detailWithoutSort.sortOrder
-    const result2 = await request({
+
+    tableData.value = res.data?.list || []
+    pagination.value.total = res.data?.total || 0
+
+    fetchStats()
+  } catch (error) {
+    console.error('获取数据失败', error)
+  }
+}
+
+const fetchStats = async () => {
+  try {
+    const params = { ...searchForm.value, status: getCurrentStatus() }
+    const res = await request({
       url: '/refund/RefundA',
-      data: detailWithoutSort
+      data: params
     })
 
-    // 统计合计数
-    if (result2.data) {
-      result2.data.forEach((item) => {
-        switch (item.status) {
-          case '待审核':
-            // 若 item.raudit 为空则赋值为 0
-            pendingCount.value = item.raudit || 0
-            // 若 item.sumRaudit 为空则赋值为 0
-            pendingGold.value = item.sumRaudit || 0
-            break
-          case '已通过':
-            approvedCount.value = item.raudit || 0
-            approvedGold.value = item.sumRaudit || 0
-            break
-          case '已驳回':
-            rejectedCount.value = item.raudit || 0
-            rejectedGold.value = item.sumRaudit || 0
-            break
-        }
-      })
+    if (res.data) {
+      const data = res.data
+      stats.value = {
+        totalItems: data.raudit || 0,
+        totalCoins: data.sumRaudit || 0,
+        permanentCoins: data.permanentCoins || 0,
+        freeCoins: data.freeCoins || 0,
+        taskCoins: data.taskCoins || 0
+      }
     }
-
-    trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
-    trueCount.value =
-      pendingCount.value + approvedCount.value + rejectedCount.value
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储表格数据
-    tableData.value = result.data.list
-    console.log('tableData', tableData.value)
-    // 存储分页总数
-    total.value = result.data.total
-    console.log('total', total.value)
   } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
+    console.error('获取统计信息失败', error)
   }
 }
-// 搜索
-const search = function () {
-  trimJwCode();
-  getObj.value.pageNum = 1
+
+const handleSearch = () => {
+  pagination.value.pageNum = 1
   get()
 }
-// 重置
-const reset = function () {
-  detail.value.area = ''
-  detail.value.jwcode = ''
-  detail.value.refundType = ''
-  detail.value.refundGoods = ''
-  detail.value.startDate = ''
-  detail.value.endDate = ''
-  sortField.value = ''
-  sortOrder.value = ''
-  getTime.value = {}
+
+const resetSearch = () => {
+  searchForm.value = {
+    jwcode: '',
+    refundType: '',
+    refundGoods: '',
+    area: adminInfo.value.area === '总部' ? '' : adminInfo.value.area,
+    startDate: '',
+    endDate: ''
+  }
+  dateRange.value = []
+  handleSearch()
 }
+
+// 转换格式 moment(param).format('YYYY-MM-DD HH:mm:ss')
 // 今天
-const getToday = function () {
+const getToday = () => {
   const today = new Date()
-  const startDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate()
-  )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
+  const start = moment(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss')
+  const end = moment(new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss')
+  dateRange.value = [start, end]
   get()
 }
+
 // 昨天
-const getYesterday = function () {
+const getYesterday = () => {
   const yesterday = new Date()
   yesterday.setDate(yesterday.getDate() - 1)
-  const startDate = new Date(
-    yesterday.getFullYear(),
-    yesterday.getMonth(),
-    yesterday.getDate()
-  )
-  const endDate = new Date(
-    yesterday.getFullYear(),
-    yesterday.getMonth(),
-    yesterday.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
+  const start = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 0, 0, 0)
+  const end = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1, 0, 0, 0)
+  dateRange.value = [moment(start).format('YYYY-MM-DD HH:mm:ss'), moment(end).format('YYYY-MM-DD HH:mm:ss')]
   get()
 }
+
 // 近7天
-const get7Days = function () {
+const get7Days = () => {
   const today = new Date()
-  const startDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() - 6
-  )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
+  const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6, 0, 0, 0)
+  const end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)
+  dateRange.value = [start,end]// 好像不转换也可以？？？？？？
   get()
 }
-//全部充值明细
-const adminAll = function () {
-  console.log('adminAll')
-  detail.value.status = ''
-  getObj.value.pageNum = 1
+const switchTab = (tab) => {
+  checkTab.value = tab
+  pagination.value.pageNum = 1
   get()
 }
-//待审核充值明细
-const adminWait = async function () {
-  detail.value.status = 0
-  getObj.value.pageNum = 1
-  await get()
-  console.log('adminWait')
-  trueGold.value = pendingGold.value
-  trueCount.value = pendingCount.value
-}
-//已通过充值明细
-const adminPass = async function () {
-  detail.value.status = 1
-  getObj.value.pageNum = 1
-  await get()
-  console.log('adminPass')
-  trueGold.value = approvedGold.value
-  trueCount.value = approvedCount.value
-}
-//已驳回充值明细
-const adminReject = async function () {
-  detail.value.status = 2
-  getObj.value.pageNum = 1
-  await get()
-  console.log('adminReject')
-  trueGold.value = rejectedGold.value
-  trueCount.value = rejectedCount.value
-}
-//点击标签页
-const handleClick = function (tab, event) {
-  if (tab.props.name === 'all') {
-    adminAll()
-  } else if (tab.props.name === 'wait') {
-    adminWait()
-  } else if (tab.props.name === 'pass') {
-    adminPass()
-  } else if (tab.props.name === 'reject') {
-    adminReject()
-  }
-}
-// 获取活动名称
-const getProduct = async function () {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: '/product',
-      data: {}
-    })
 
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储表格数据
-    product.value = result.data
-    console.log('产品', product.value)
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
+// 当前状态
+const getCurrentStatus = () => {
+  switch (checkTab.value) {
+    case 'pending': return STATUS.PENDING
+    case 'approved': return STATUS.APPROVED
+    case 'rejected': return STATUS.REJECTED
+    default: return ''
   }
 }
 
-// 获取地区
-const getArea = async function () {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: '/recharge/user/search',
-      data: {}
-    })
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储地区信息
-    area.value = result.data
-    console.log('地区', area.value)
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-// 验证跳转输入框的数字是否合法
-const checkNumber = function () {
-  if (typeof parseInt(getObj.value.pageNum) === 'number') {
-    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
-    if (
-      getObj.value.pageNum > 0 &&
-      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
-    ) {
-      getObj.value.pageNum = parseInt(getObj.value.pageNum)
-      console.log('输入的数字合法')
-      get()
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
-    }
+const handlePagination = (type, val) => {
+  if (type === 'size') {
+    pagination.value.pageSize = val
   } else {
-    //提示
-    ElMessage({
-      type: 'error',
-      message: '请检查输入内容'
-    })
+    pagination.value.pageNum = val
   }
+  get()
 }
 
-// 编辑====================================
-// 通过按钮
-const pass = function (row) {
-  // 通过初始化
-  passObj.value.adminId = adminData.value.adminId
-  passObj.value.auditId = row.auditId
-  passObj.value.status = 1
-  passObj.value.refundId = row.refundId
-  passObj.value.adminName = row.adminName
-  passObj.value.username = row.username
-  passObj.value.area = row.area
-  console.log('通过对象', passObj.value)
+const handleAction = (type, row) => {
+  currentRecord.value = row
+  if (type === 'reject') {
+    rejectForm.value.reason = ''
+    rejectDialog.value = true
+  } else if (type === 'approve') {
+    approveRefund()
+  }
 }
 
-// 通过确认
-const passConfirm = async function () {
+const approveRefund = async () => {
   try {
-    console.log('通过对象', passObj.value)
-    // 发送POST请求
-    const result = await request({
+    const params = {
+      adminId: adminInfo.value.adminId,
+      auditId: currentRecord.value.auditId,
+      status: STATUS.APPROVED,
+      refundId: currentRecord.value.refundId
+    }
+
+    await request({
       url: '/audit/audit/edit',
-      data: passObj.value
+      data: params
     })
 
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 刷新表格数据
+    ElMessage.success('退款已批准')
     get()
-    //提示
-    ElMessage({
-      type: 'success',
-      message: '通过成功！'
-    })
   } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
+    console.error('批准失败', error)
+    ElMessage.error('操作失败')
   }
 }
 
-// 打开驳回弹出框
-const openRejectVisible = function () {
-  rejectVisible.value = true
-}
-// 关闭驳回弹出框
-const closeRejectVisible = function () {
-  rejectVisible.value = false
-}
-// 驳回按钮
-const reject = function (row) {
-  // 驳回初始化
-  rejectObj.value.adminId = adminData.value.adminId
-  rejectObj.value.auditId = row.auditId
-  rejectObj.value.status = 2
-  rejectObj.value.reson = ''
-  rejectObj.value.refundId = row.refundId
-  console.log('驳回对象', rejectObj.value)
-  openRejectVisible()
-}
-// 驳回确认
-const rejectConfirm = async function () {
-  Ref.value.validate(async (valid) => {
-    if (valid) {
-      try {
-        console.log('驳回对象', rejectObj.value)
-        // 发送POST请求
-        const result = await request({
-          url: '/audit/audit/edit',
-          data: rejectObj.value
-        })
-
-        // 将响应结果存储到响应式数据中
-        console.log('请求成功', result)
-        // 刷新表格数据
-        get()
-        // 关闭弹出框
-        closeRejectVisible()
-        //提示
-        ElMessage({
-          type: 'success',
-          message: '驳回成功！'
-        })
-      } catch (error) {
-        console.log('请求失败', error)
-        // 在这里可以处理错误逻辑，比如显示错误提示等
-      }
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
+const rejectRefund = async () => {
+  if (!rejectForm.value.reason) {
+    ElMessage.warning('请输入驳回理由')
+    return
+  }
+
+  try {
+    const params = {
+      adminId: adminInfo.value.adminId,
+      auditId: currentRecord.value.auditId,
+      status: STATUS.REJECTED,
+      refundId: currentRecord.value.refundId,
+      reason: rejectForm.value.reason
     }
-  })
-}
-const handlePageSizeChange = function (val) {
-  getObj.value.pageSize = val
-  get()
-}
-const handleCurrentChange = function (val) {
-  getObj.value.pageNum = val
-  get()
-}
-// 表单验证
 
-const rules = reactive({
-  reson: [{ required: true, message: '请输入驳回理由', trigger: 'blur' }]
-})
+    await request({
+      url: '/audit/audit/edit',
+      data: params
+    })
 
-// 挂载
-onMounted(async function () {
-  await getAdminData()
-  await get()
-  getProduct()
-  await getArea()
-  await getArea()
-})
-// 新增排序字段和排序方式
-const sortField = ref('')
-const sortOrder = ref('')
-// 处理排序事件
-const handleSortChange = (column) => {
-  console.log('排序字段：', column.prop)
-  console.log('排序方式：', column.order)
-  if (column.prop === 'rechargeCoin') {
-    sortField.value = 'recharge_coin'
-  } else if (column.prop === 'taskCoin') {
-    sortField.value = 'task_coin'
-  } else if (column.prop === 'freeCoin') {
-    sortField.value = 'free_coin'
-  } else if (column.prop === 'createTime') {
-    sortField.value = 'create_time'
-  }
-  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
-  get()
-}
-// 精网号去空格
-const trimJwCode = () => {
-  if (detail.value.jwcode) {
-    // 使用正则表达式替换所有空格为空
-    detail.value.jwcode = detail.value.jwcode.replace(/\s/g, ''); 
+    ElMessage.success('退款已驳回')
+    rejectDialog.value = false
+    get()
+  } catch (error) {
+    console.error('驳回失败', error)
+    ElMessage.error('操作失败')
   }
 }
-</script>
 
-<template>
-  <el-row>
-    <el-col>
-      <el-card style="margin-bottom: 20px">
-        <el-row style="margin-bottom: 10px">
-          <el-col :span="6">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">精网号：</el-text>
-              <el-input
-                v-model="detail.jwcode"
-                placeholder="请输入精网号"
-                size="large"
-                style="width: 240px"
-                clearable
-              />
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">退款类型：</el-text>
-              <el-select
-                v-model="detail.refundType"
-                placeholder="请选择退款类型"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in refundType"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">退款商品：</el-text>
-              <el-select
-                v-model="detail.refundGoods"
-                placeholder="请选择退款商品"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in product"
-                  :key="item.name"
-                  :label="item.name"
-                  :value="item.name"
-                />
-              </el-select>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="head-card-element" v-if="adminData.area == '总部'">
-              <el-text class="mx-1" size="large">所属地区：</el-text>
-              <el-select
-                v-model="detail.area"
-                placeholder="请选择所属地区"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in area"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
-              </el-select>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="21">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">退款时间：</el-text>
-              <el-date-picker
-                v-model="getTime"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="起始时间"
-                end-placeholder="结束时间"
-              />
-              <el-button style="margin-left: 10px" @click="getToday()"
-                >今</el-button
-              >
-              <el-button @click="getYesterday()">昨</el-button>
-              <el-button @click="get7Days()">近7天</el-button>
-            </div>
-          </el-col>
-          <el-col :span="3">
-            <div class="head-card-btn">
-              <el-button type="success" @click="reset()">重置</el-button>
-              <el-button type="primary" @click="search()">查询</el-button>
-            </div>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-col>
-  </el-row>
-  <el-row>
-    <el-col>
-      <el-card>
-        <el-tabs
-          v-model="activeName"
-          type="card"
-          class="demo-tabs"
-          @tab-click="handleClick"
-        >
-          <el-tab-pane label="全部" name="all"></el-tab-pane>
-          <el-tab-pane label="待审核" name="wait"></el-tab-pane>
-          <el-tab-pane label="已通过" name="pass"></el-tab-pane>
-          <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
-          <div>
-            退款记录条数：{{ Math.abs(trueCount) }},退款金币总数：{{
-              Math.abs(trueGold)
-            }}
-          </div>
-        </el-tabs>
-        <!-- 设置表格容器的高度和滚动样式 -->
-        <div style="height: 540px; overflow-y: auto">
-          <el-table
-            :data="tableData"
-            style="width: 100%"
-            height="540px"
-            @sort-change="handleSortChange"
-          >
-            <el-table-column
-              type="index"
-              label="序号"
-              width="100px"
-              fixed="left"
-            >
-              <template #default="scope">
-                <span>{{
-                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
-                }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              fixed="left"
-              prop="username"
-              label="姓名"
-              width="150px"
-            />
-            <el-table-column
-              fixed="left"
-              prop="jwcode"
-              label="精网号"
-              width="110px"
-            />
-            <el-table-column prop="area" label="所属地区" width="100px" />
-            <el-table-column prop="refundType" label="退款类型" width="100px" />
-            <el-table-column
-              prop="refundGoods"
-              label="退款商品"
-              width="200px"
-            />
-            <el-table-column prop="refundCoin" label="退款金币数" width="100px">
-              <template #default="scope">
-                <span>{{
-                  scope.row.rechargeCoin +
-                  scope.row.freeCoin +
-                  scope.row.taskCoin
-                }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="rechargeCoin"
-              label="永久金币"
-              width="110px"
-              sortable="“custom”"
-            >
-              <template #default="scope">
-                {{ scope.row.rechargeCoin }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="freeCoin"
-              label="免费金币"
-              sortable="“custom”"
-              width="110px"
-            >
-              <template #default="scope">
-                {{ scope.row.freeCoin }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="taskCoin"
-              label="任务金币"
-              sortable="“custom”"
-              width="110px"
-            >
-              <template #default="scope">
-                {{ scope.row.taskCoin }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="remark"
-              label="备注"
-              width="200px"
-              show-overflow-tooltip
-            />
-            <el-table-column prop="adminName" label="提交人" width="100px" />
-            <el-table-column prop="status" label="审核状态" width="100px">
-              <!-- 模板内容 -->
-              <template #default="scope">
-                <span v-if="scope.row.status == 1">
-                  <div class="status">
-                    <span class="green-dot"></span>
-                    <span>已通过</span>
-                  </div>
-                </span>
-                <span v-if="scope.row.status == 0">
-                  <div class="status">
-                    <span class="grey-dot"></span>
-                    <span>待审核</span>
-                  </div>
-                </span>
-                <span v-if="scope.row.status == 2">
-                  <div class="status">
-                    <span class="red-dot"></span>
-                    <span>已驳回</span>
-                  </div>
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="reson"
-              label="驳回理由"
-              width="200px"
-              show-overflow-tooltip
-            />
-            <el-table-column
-              prop="createTime"
-              sortable="“custom”"
-              label="提交时间"
-              width="200px"
-            >
-              <template #default="scope">
-                {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="auditTime"
-              sortable="custom"
-              label="审核时间"
-              width="200px"
-            >
-              <template #default="scope">
-                {{scope.row.auditTime ? moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '------'}}
-              </template>
-            </el-table-column>
-            <el-table-column
-              fixed="right"
-              prop="operation"
-              label="操作"
-              width="150px"
-            >
-              <template #default="scope">
-                <div class="operation">
-                  <el-popconfirm
-                    title="确定要通过此条记录吗？"
-                    @confirm="passConfirm"
-                  >
-                    <template #reference>
-                      <el-button
-                        :disabled="
-                          scope.row.status === 1 || scope.row.status === 2
-                            ? true
-                            : false
-                        "
-                        type="primary"
-                        text
-                        @click="pass(scope.row)"
-                      >
-                        通过
-                      </el-button>
-                    </template>
-                    <template #actions="{ confirm, cancel }">
-                      <el-button size="small" @click="cancel">取消</el-button>
-                      <el-button type="primary" size="small" @click="confirm">
-                        确定
-                      </el-button>
-                    </template>
-                  </el-popconfirm>
-                  <el-button
-                    :disabled="
-                      scope.row.status === 1 || scope.row.status === 2
-                        ? true
-                        : false
-                    "
-                    type="primary"
-                    text
-                    @click="reject(scope.row)"
-                  >
-                    驳回
-                  </el-button>
-                </div>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-
-        <!-- 分页 -->
-        <div class="pagination">
-          <el-pagination
-            background
-            :page-size="getObj.pageSize"
-            :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"
-          ></el-pagination>
-        </div>
-      </el-card>
-    </el-col>
-  </el-row>
+onMounted(async () => {
+  await fetchAdminInfo()// 用户信息要挂吗
 
-  <!-- 驳回弹出框 -->
-  <el-dialog
-    v-model="rejectVisible"
-    title="驳回理由"
-    width="500"
-    :before-close="closeRejectVisible"
-  >
-    <template #footer>
-      <el-form
-        :model="rejectObj"
-        ref="Ref"
-        :rules="rules"
-        label-width="auto"
-        style="max-width: 600px"
-      >
-        <el-form-item prop="reson" label="驳回理由:">
-          <el-input
-            v-model="rejectObj.reson"
-            maxlength="150"
-            show-word-limit
-            style="width: 350px"
-            type="textarea"
-            placeholder="请输入内容"
-          />
-        </el-form-item>
-      </el-form>
-
-      <div class="dialog-footer">
-        <el-button @click="closeRejectVisible()">取消</el-button>
-        <el-button type="primary" @click="rejectConfirm()"> 确定 </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
+  await fetchProducts()
+  await fetchAreas()
+  get()
+})
+</script>
 
 <style scoped>
-.pagination {
-  display: flex;
-}
-
-.status {
-  display: flex;
-}
-
-.operation {
-  display: flex;
-}
-
-.head-card {
-  display: flex;
+.quickly-buttons {
+  margin-left: 10px;
 }
 
-.head-card-element {
-  margin-right: 20px;
+.stats-info {
+  padding: 3px;
+  background-color: #f5f7fa;
 }
 
-.head-card-btn {
-  margin-left: auto;
+.pagination {
+  margin-top: 20px;
+  justify-content: flex-end;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/managerecharge/rate.vue b/src/views/managerecharge/rate.vue
index 503fd6e..ef4e6ac 100644
--- a/src/views/managerecharge/rate.vue
+++ b/src/views/managerecharge/rate.vue
@@ -70,7 +70,7 @@ const getYesterday = () => {
   search()
 }
 
-// 近 7 天
+// 近7天
 const get7Days = () => {
   const today = new Date()
   const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6, 0, 0, 0)
@@ -156,7 +156,7 @@ const addRate = async function () {
     })
     if (result.code == 0) {
       ElMessage.error(result.msg)
-    }else{
+    } else {
       ElMessage({
         type: 'success',
         message: '新增汇率成功'
@@ -407,7 +407,7 @@ const rules = reactive({
 
 // 重置的按钮
 const handledelete = function () {
-  timeRange.value={}
+  timeRange.value = {}
   getObj.value.pageNum = 1
 }
 // 验证跳转输入框的数字是否合法
@@ -479,26 +479,17 @@ function handleInput(value) {
 </script>
 
 <template>
-  <!-- 这是主页面 -->
   <el-row>
     <el-col>
       <el-card>
-        <!-- 这是时间 -->
         <div class="demo-range">
           <el-row>
             <el-col :span="9">
               <el-form-item>
                 <el-text class="mx-1" size="large">时间范围：</el-text>
-                <el-date-picker
-                  v-model="timeRange"
-                  type="datetimerange"
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  style="width: 300px"
-                  format="YYYY-MM-DD HH:mm:ss"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                />
+                <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
+                  end-placeholder="结束日期" style="width: 300px" format="YYYY-MM-DD HH:mm:ss"
+                  value-format="YYYY-MM-DD HH:mm:ss" />
               </el-form-item>
             </el-col>
             <el-col :span="4">
@@ -507,15 +498,8 @@ function handleInput(value) {
               <el-button @click="get7Days">近7天</el-button>
             </el-col>
             <el-col :span="4">
-              <el-button
-                class="button-item"
-                type="success"
-                @click="handledelete()"
-              >重置</el-button>
-              <el-button
-                type="primary"
-                @click="search"
-              >查询</el-button>
+              <el-button class="button-item" type="success" @click="handledelete()">重置</el-button>
+              <el-button type="primary" @click="search">查询</el-button>
             </el-col>
           </el-row>
         </div>
@@ -526,28 +510,13 @@ function handleInput(value) {
   <el-row>
     <el-col>
       <el-card class="box-card" style="max-width: 100%">
-        <!-- 添加 -->
         <div class="add-item">
-          <el-button
-            style="color: #048efb; border: 1px solid #048efb"
-            @click="regeAdd = true"
-            >新增汇率</el-button
-          >
+          <el-button style="color: #048efb; border: 1px solid #048efb" @click="regeAdd = true">新增汇率</el-button>
         </div>
         <!-- 表格 -->
         <div>
-          <el-table
-            :data="tableData"
-            v-if="(tableData.flag = 1)"
-            :height="tableHeight"
-            style="width: 100%"
-          >
-            <el-table-column
-              type="index"
-              label="序号"
-              width="100px"
-              fixed="left"
-            >
+          <el-table :data="tableData" v-if="(tableData.flag = 1)" :height="tableHeight" style="width: 100%">
+            <el-table-column type="index" label="序号" width="100px" fixed="left">
               <template #default="scope">
                 <span>{{
                   scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
@@ -568,62 +537,22 @@ function handleInput(value) {
                 <span>{{ formatDate(scope.row.createTime) }}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="adminName" label="提交人" :span="1" />
-            <el-table-column prop="status" label="状态">
-              <template #default="scope">
-                <span v-if="scope.row.status === 1">
-                  <div class="status">
-                    <span class="green-dot"></span>
-                    <span>使用中</span>
-                  </div>
-                </span>
-                <span v-if="scope.row.status === 0">
-                  <div class="status">
-                    <span class="red-dot"></span>
-                    <span>未开始</span>
-                  </div>
-                </span>
-                <span v-if="scope.row.status === 2">
-                  <div class="status">
-                    <span class="grey-dot"></span>
-                    <span>已过期</span>
-                  </div>
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="startTime" label="持续时间" :span="10">
-              <template #default="scope">
-                <span>{{ formatDateTwe(scope.row.startTime) }}</span>
-                <span>---</span>
-                <span>{{ formatDateTwe(scope.row.endTime) }}</span>
-              </template>
-            </el-table-column>
+
             <el-table-column label="操作" :span="3">
               <template #default="scope">
-                <el-button
-                  type="text"
-                  @click="
-                    () => {
-                      regeEdit = true
-                      getEditData(scope.row)
-                    }
-                  "
-                  >编辑</el-button
-                >
-                <el-popconfirm
-                  title="确定将此条活动删除吗？"
-                  @confirm="delConfirm"
-                >
+                <el-button type="text" @click="
+                  () => {
+                    regeEdit = true
+                    getEditData(scope.row)
+                  }
+                ">编辑</el-button>
+                <el-popconfirm title="确定将此条活动删除吗？" @confirm="delConfirm">
                   <template #reference>
                     <el-button type="primary" text> 删除 </el-button>
                   </template>
                   <template #actions="{ confirm, cancel }">
                     <el-button size="small" @click="cancel">取消</el-button>
-                    <el-button
-                      type="primary"
-                      size="small"
-                      @click="confirm(scope.row)"
-                    >
+                    <el-button type="primary" size="small" @click="confirm(scope.row)">
                       确定
                     </el-button>
                   </template>
@@ -634,58 +563,26 @@ function handleInput(value) {
         </div>
         <!-- 分页 -->
         <div class="pagination">
-          <el-pagination
-            background
-            :page-size="getObj.pageSize"
-            :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"
-          ></el-pagination>
+          <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"></el-pagination>
         </div>
       </el-card>
     </el-col>
   </el-row>
 
   <!-- 这是添加弹窗 -->
-  <el-dialog
-    v-model="regeAdd"
-    title="新增汇率"
-    width="500"
-    :close-on-click-modal="false"
-  >
+  <el-dialog v-model="regeAdd" title="新增汇率" width="500" :close-on-click-modal="false">
     <template #footer>
-      <el-form
-        ref="Ref"
-        style="max-width: 600px"
-        :model="rateAdd"
-        :rules="rules"
-        label-width="auto"
-        class="demo-ruleForm"
-        :size="formSize"
-        status-icon
-      >
+      <el-form ref="Ref" style="max-width: 600px" :model="rateAdd" :rules="rules" label-width="auto"
+        class="demo-ruleForm" :size="formSize" status-icon>
         <el-form-item prop="currency" label="货币名称:">
-          <el-select
-            v-model.number="rateAdd.currency"
-            placeholder="请选择"
-            style="width: 240px"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
+          <el-select v-model.number="rateAdd.currency" placeholder="请选择" style="width: 240px">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item prop="exchangeRate" label="汇率:">
-          <el-input
-            v-model="rateAdd.exchangeRate"
-            @update:modelValue="handleInput"
-            style="width: 120px"
-          />
+          <el-input v-model="rateAdd.exchangeRate" @update:modelValue="handleInput" style="width: 120px" />
           <p class="unit">:1</p>
           <p>
             (提示：当前规则每 {{ rateAdd.exchangeRate }}
@@ -696,23 +593,12 @@ function handleInput(value) {
           <el-input :value="adminData.name" disabled style="width: 240px" />
         </el-form-item>
         <el-form-item prop="startTime" label="开始时间:">
-          <el-date-picker
-            v-model="rateAdd.startTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            @change="handleStartTimeChange"
-            value-format="YYYY-MM-DD"
-          />
+          <el-date-picker v-model="rateAdd.startTime" type="date" placeholder="请选择时间" :default-value="new Date()"
+            @change="handleStartTimeChange" value-format="YYYY-MM-DD" />
         </el-form-item>
         <el-form-item prop="endTime" label="结束时间:">
-          <el-date-picker
-            v-model="rateAdd.endTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            value-format="YYYY-MM-DD"
-          />
+          <el-date-picker v-model="rateAdd.endTime" type="date" placeholder="请选择时间" :default-value="new Date()"
+            value-format="YYYY-MM-DD" />
         </el-form-item>
         <el-form-item>
           <div class="dialog-footer">
@@ -725,35 +611,13 @@ function handleInput(value) {
   </el-dialog>
 
   <!-- 这是编辑弹窗 -->
-  <el-dialog
-    v-model="regeEdit"
-    title="修改汇率"
-    width="500"
-    :close-on-click-modal="false"
-  >
+  <el-dialog v-model="regeEdit" title="修改汇率" width="500" :close-on-click-modal="false">
     <template #footer>
-      <el-form
-        ref="ruleFormRef"
-        style="max-width: 600px"
-        :model="rateEdit"
-        :rules="rules"
-        label-width="auto"
-        class="demo-ruleForm"
-        :size="formSize"
-        status-icon
-      >
+      <el-form ref="ruleFormRef" style="max-width: 600px" :model="rateEdit" :rules="rules" label-width="auto"
+        class="demo-ruleForm" :size="formSize" status-icon>
         <el-form-item label="货币名称:">
-          <el-select
-            v-model="rateEdit.currency"
-            placeholder="请选择"
-            style="width: 240px"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
+          <el-select v-model="rateEdit.currency" placeholder="请选择" style="width: 240px">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item label="汇率:">
@@ -768,22 +632,12 @@ function handleInput(value) {
           <el-input disabled :value="adminData.name" style="width: 240px" />
         </el-form-item>
         <el-form-item label="开始时间:">
-          <el-date-picker
-            v-model="rateEdit.startTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            value-format="YYYY-MM-DD"
-          />
+          <el-date-picker v-model="rateEdit.startTime" type="date" placeholder="请选择时间" :default-value="new Date()"
+            value-format="YYYY-MM-DD" />
         </el-form-item>
         <el-form-item label="结束时间:">
-          <el-date-picker
-            v-model="rateEdit.endTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            value-format="YYYY-MM-DD"
-          />
+          <el-date-picker v-model="rateEdit.endTime" type="date" placeholder="请选择时间" :default-value="new Date()"
+            value-format="YYYY-MM-DD" />
         </el-form-item>
         <el-form-item>
           <div class="dialog-footer">
@@ -840,9 +694,11 @@ p {
 .el-card {
   padding: 0px;
 }
+
 .pagination {
   display: flex;
 }
+
 .status {
   display: flex;
 }
diff --git a/src/views/workspace/index.vue b/src/views/workspace/index.vue
index 5d84f70..ec6f7fc 100644
--- a/src/views/workspace/index.vue
+++ b/src/views/workspace/index.vue
@@ -1,767 +1,318 @@
+<template>
+  <el-col :span="4">
+    <el-card class="center-card margin-bottom">数据总览</el-card>
+  </el-col>
+  <el-row :span="24">
+    <!-- 第一个卡片 -->
+    <el-card class="card-item">
+      <template #header>
+        <div class="card-header">
+          <div class="card-title">当前金币余量</div>
+          <div>100&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日 -100</div>
+        </div>
+      </template>
+      <div>
+        <div class="margin-bottom">永久金币：100</div>
+        <div class="margin-bottom">免费金币：100</div>
+        <div class="margin-bottom">[六月到期|100]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|100]</div>
+        <div>任务金币：100</div>
+      </div>
+    </el-card>
+    <!-- 第二个卡片 -->
+    <el-card class="card-item">
+      <div class="card-title">全年累计充值金币数</div>
+      <div class="card-title">100</div>
+      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
+      <div class="center-card">折合新币累计金额:100</div>
+      <template #footer >
+        <el-col class="margin-bottom center-card">昨日新增：100</el-col>
+        <el-col class="margin-bottom center-card">其中充值：100</el-col>
+      </template>
+    </el-card>
+    <!-- 第三个卡片 -->
+    <el-card class="card-item">
+      <div class="card-title">全年累计消耗金币数</div>
+      <div class="card-title">100</div>
+      <div class="center-card">消费：100</div>
+      <div class="center-card">退款：100</div>
+      <template #footer>
+        <div></div>
+        <div class="margin-bottom center-card">昨日新增消耗：100</div>
+        <div class="margin-bottom center-card">昨日新增消费：100</div>
+        <div class="margin-bottom center-card">昨日新增退款：100</div>
+      </template>
+    </el-card>
+    <!-- 第四个卡片 -->
+    <el-card class="card-item">
+      <el-col class="card-title">全年累计充值人头数</el-col>
+      <el-col class="card-title">100</el-col>
+      <el-col class="center-card">周同比:？？？</el-col>
+      <el-col class="center-card">日环比</el-col>
+      <template #footer>
+        <el-col class="margin-bottom center-card">昨日充值人数：100</el-col>
+        <el-col class="margin-bottom center-card">其中首充：100</el-col>
+      </template>
+    </el-card>
+  </el-row>
+
+
+  <el-row :gutter="10" style="margin-top: 20px">
+    <el-col :span="24">
+      <el-card style="width: 100%">
+        <el-row>
+          <el-col :span="15">
+            <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+              <el-tab-pane label="金币充值" name="recharge"></el-tab-pane>
+              <el-tab-pane label="金币消费" name="consume"></el-tab-pane>
+            </el-tabs>
+          </el-col>
+          <el-col :span="9" style="text-align: right">
+            <el-radio-group v-model="timeRange" @change="handleTimeRangeChange" style="margin-right: 5px; margin-top:5px">
+              <el-radio-button label="day" style="border-color: white">今日</el-radio-button>
+              <el-radio-button label="week" style="border-color: white">本周</el-radio-button>
+              <el-radio-button label="month" style="border-color: white">本月</el-radio-button>
+              <el-radio-button label="year" style="border-color: white">本年</el-radio-button>
+            </el-radio-group>
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="→"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              style="width: 200px"
+              @change="handleDateRangeChange"
+            />
+            <el-button style="margin-left: 5px" @click="loadChart">查询</el-button>
+          </el-col>
+        </el-row>
+        
+        <el-row :gutter="20" style="margin-top: 20px">
+          <el-col :span="18">
+            <div class="bar">
+              <div v-show="activeTab === 'recharge'" id="recharge" style="width: 100%; height: 400px"></div>
+              <div v-show="activeTab === 'consume'" id="consume" style="width: 100%; height: 400px"></div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <el-card class="rank-card" style="width: 100%; height: 100%">
+              <div class="card-large margin-bottom">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div>
+              <el-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 :data="tableData" height="320px">
+                <el-table-column prop="rank" label="排名" width="60" align="center"></el-table-column>
+                <el-table-column prop="region" label="地区" align="center"></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>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
 <script setup>
- import * as echarts from 'echarts'
-// 这是工作台
-import { ref, onMounted, reactive, computed } from 'vue'
-import { VscInfo } from 'vue-icons-plus/vsc'
-import * as bs from 'vue-icons-plus/bs'
-import axios, { all } from 'axios'
+import * as echarts from 'echarts'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import API from '@/util/http'
-import moment from 'moment'
-import * as math from 'mathjs'
-import { getTime } from 'element-plus/es/components/countdown/src/utils.mjs'
-// const echarts = await import('echarts')
-// 变量
-// 加载对象
-const loading = ref(true)
-const areaRankLoading = ref(true)
-// 总览对象
-const getSumCoin = ref({})
-const statistics = ref({})
-// const getYearConsumeCoin = ref({});
-// const getDayConsumeCoin = ref({});
-
-// 中间统计图搜索参数
-const changeTimeRatio = ref('allDays')
-const searchTime = ref([])
 
-// 月份柱状图
-const getMiddleBarObj = ref({
-  updateType: 0
-})
-const getMiddleBarData = ref({})
-const middleTotalRecharge = ref(0)
-const middleTotalFree = ref(0)
-const middleTotalTask = ref(0)
+const histogramData = ref([])
 const middleCategory = ref([])
 const middleRecharge = ref([])
 const middleFree = ref([])
 const middleTask = ref([])
+const tableData = ref([])
+const area = ref([])
 
-// 地区排名
-const getAreaRankObj = ref({
-  updateType: 0
-})
-const getMediumArea = ref([])
-const areaRank = ref([])
-
-// 金币概览
-const option3Data = ref([])
-const option4Data = ref([])
-const option5Data = ref([])
-// 四大学科类别占比
-const platformData = ref([])
-const allData = ref([])
-const ERPData = ref([])
-const HCData = ref([])
-const LinkData = ref([])
-const goldData = ref([])
-
-// 重构工作台，第一个方框类别
-const oneData = ref([])
-const twoData = ref([])
-const threeData = ref([])
-
-// 搜索对象
-const goldType = ref('全部类型')
-const platform = ref('全部平台')
-//默认高亮标签页
-const activeName = ref('recharge')
-// 金币分类选项
-const gold = [
-  {
-    value: '全部类型',
-    label: '全部类型'
-  },
-  {
-    value: '充值金币',
-    label: '永久金币'
-  },
-  {
-    value: '免费金币',
-    label: '免费金币'
-  },
-  {
-    value: '任务金币',
-    label: '任务金币'
-  }
-]
+// 变量
+const activeTab = ref('consume')
+const updateType = ref(1)
+const timeRange = ref('day')
+const dateRange = ref([])
+const selectedType = ref('all')
 
-const list = ref([])
-const token = localStorage.getItem('token')
+// ECharts实例
 let rechargeBar = null
-// 方法
-// 搜索方法
-const get = async function () {
-  try {
-    getAreaRank()
-    getMiddleBar()
-    const result2 = await API({ url: '/statistics/a', data: {} })
-    const result9 = await API({ url: '/statistics/b', data: {} })
-    // 重构的工作台
-    const result10 = await API({
-      url: '/One/getOne',
-      data: {
-        token: token
-      }
-    })
-    const result11 = await API({
-      url: '/One/getTwo',
-      data: {
-        token: token
-      }
-    })
-    const result12 = await API({
-      url: '/One/getThree',
-      data: { token: token }
-    })
-    oneData.value = result10
-    twoData.value = result11
-    threeData.value = result12
-    console.log('oneData', oneData.value)
-
-    statistics.value = result2.data
-    platformData.value = result9.data
-
-    console.log('statistics', statistics.value)
-    console.log('platformData', platformData.value)
+let consumeBar = null
 
-    option3Data.value = [
-      {
-        value: Math.abs(twoData.value.rechargegold),
-        name: '永久金币' + ' | ' + formatNum(twoData.value.rechargegold / 100)
-      },
-      {
-        value: Math.abs(twoData.value.freegold),
-        name: '免费金币' + ' | ' + formatNum(twoData.value.freegold / 100)
-      },
-      {
-        value: Math.abs(twoData.value.taskgold),
-        name: '任务金币' + ' | ' + formatNum(twoData.value.taskgold / 100)
-      }
-    ]
-
-    option4Data.value = [
-      {
-        value: Math.abs(threeData.value.rechargegold),
-        name:
-          '永久金币' +
-          ' | ' +
-          formatNum(Math.abs(threeData.value.rechargegold / 100))
-      },
-      {
-        value: Math.abs(threeData.value.freegold),
-        name:
-          '免费金币' +
-          ' | ' +
-          formatNum(Math.abs(threeData.value.freegold / 100))
-      },
-      {
-        value: Math.abs(threeData.value.taskgold),
-        name:
-          '任务金币' +
-          ' | ' +
-          formatNum(Math.abs(threeData.value.taskgold / 100))
-      }
-    ]
-    console.log('option4Data', option4Data.value)
-
-    option5Data.value = [
-      {
-        value: Math.abs(oneData.value.rechargegold),
-        name: '永久金币' + ' | ' + formatNum(oneData.value.rechargegold / 100)
-      },
-      {
-        value: Math.abs(oneData.value.freegold),
-        name: '免费金币' + ' | ' + formatNum(oneData.value.freegold / 100)
-      },
-      {
-        value: Math.abs(oneData.value.taskgold),
-        name: '任务金币' + ' | ' + formatNum(oneData.value.taskgold / 100)
-      }
-    ]
-    console.log('option5Data', option5Data.value)
-  } catch (error) {
-    console.log('请求失败', error)
-    loading.value = false
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
+const formatDate = (date) => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
 }
-// 获取中间柱状图数据
-const getMiddleBar = async function () {
-  const result = await API({
-    url: '/statistics/getCoinTime',
-    data: getMiddleBarObj.value
-  })
-
-  getMiddleBarData.value = result.data
-  console.log('getMiddleBarData', getMiddleBarData.value)
-
-  // 柱状图数据处理
-  middleCategory.value = getMiddleBarData.value.map((item) =>
-    item.day == null ? item.month : item.day.substring(5, 10)
-  )
-  middleRecharge.value = getMiddleBarData.value.map((item) =>
-    Math.abs(item.rechargeSumCoin)
-  )
-  middleFree.value = getMiddleBarData.value.map((item) =>
-    Math.abs(item.freeSumCoin)
-  )
-  middleTask.value = getMiddleBarData.value.map((item) =>
-    Math.abs(item.taskSumCoin)
-  )
-  middleTotalRecharge.value = 0
-  middleTotalFree.value = 0
-  middleTotalTask.value = 0
-  middleRecharge.value.forEach((number) => {
-    middleTotalRecharge.value = math.add(
-      math.bignumber(middleTotalRecharge.value),
-      math.bignumber(number)
-    )
-  })
-  middleFree.value.forEach((number) => {
-    middleTotalFree.value = math.add(
-      math.bignumber(middleTotalFree.value),
-      math.bignumber(number)
-    )
-  })
-  middleTask.value.forEach((number) => {
-    middleTotalTask.value = math.add(
-      math.bignumber(middleTotalTask.value),
-      math.bignumber(number)
-    )
-  })
 
-  console.log('middleCategory', middleCategory.value)
-  console.log('middleRecharge', middleRecharge.value)
-  console.log('middleFree', middleFree.value)
-  console.log('middleTask', middleTask.value)
-  console.log('middleTotalRecharge', middleTotalRecharge.value)
-  console.log('middleTotalFree', middleTotalFree.value)
-  console.log('middleTotalTask', middleTotalTask.value)
-
-  if (getMiddleBarObj.value.updateType == 0) {
-    // 基于准备好的dom，初始化echarts实例
-    updateChart()
-    // var recharge = echarts.init(document.getElementById('recharge'))
-    // const option = {
-    //   tooltip: {
-    //     trigger: 'axis',
-    //     axisPointer: {
-    //       type: 'shadow'
-    //     },
-    //     formatter: function (params) {
-    //       let total = 0
-    //       let content = `${params[0].name}<br/>`
-    //       params.forEach((param) => {
-    //         content += `${param.seriesName}: ${param.value}<br/>`
-    //         total += param.value
-    //       })
-    //       content += `总和: ${total}`
-    //       return content
-    //     }
-    //   },
-    //   legend: {
-    //     right: '-5%',
-    //     orient: 'vertical'
-    //   },
-    //   grid: {
-    //     left: '3%',
-    //     right: '4%',
-    //     bottom: '3%',
-    //     containLabel: true
-    //   },
-    //   xAxis: {
-    //     type: 'category',
-    //     data: middleCategory.value
-    //   },
-    //   yAxis: {
-    //     type: 'value'
-    //   },
-    //   series: [
-    //     {
-    //       name: '永久金币',
-    //       color: '#35e383',
-    //       type: 'bar',
-    //       stack: 'total',
-    //       label: {
-    //         show: false
-    //       },
-    //       emphasis: {
-    //         focus: 'series'
-    //       },
-    //       data: middleRecharge.value
-    //     },
-    //     {
-    //       name: '免费金币',
-    //       color: '#5f8ff5',
-    //       type: 'bar',
-    //       stack: 'total',
-    //       label: {
-    //         show: false
-    //       },
-    //       emphasis: {
-    //         focus: 'series'
-    //       },
-    //       data: middleFree.value
-    //     },
-    //     {
-    //       name: '任务金币',
-    //       color: '#ffe733',
-    //       type: 'bar',
-    //       stack: 'total',
-    //       label: {
-    //         show: false
-    //       },
-    //       emphasis: {
-    //         focus: 'series'
-    //       },
-    //       data: middleTask.value
-    //     }
-    //   ]
-    // }
-
-    // // 使用刚指定的配置项和数据显示图表。
-    // recharge.setOption(option)
-  } else {
-    // 基于准备好的dom，初始化echarts实例
-    var consume = echarts.init(document.getElementById('consume'))
-    const option = {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow'
-        },
-        formatter: function (params) {
-          let total = 0
-          let content = `${params[0].name}<br/>`
-          params.forEach((param) => {
-            content += `${param.seriesName}: ${param.value}<br/>`
-            total += param.value
-          })
-          content += `总和: ${total}`
-          return content
-        }
-      },
-      legend: {
-        right: '-5%',
-        orient: 'vertical'
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-      },
-      xAxis: {
-        type: 'category',
-        data: middleCategory.value
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [
-        {
-          name: '永久金币',
-          color: '#35e383',
-          type: 'bar',
-          stack: 'total',
-          label: {
-            show: false
-          },
-          emphasis: {
-            focus: 'series'
-          },
-          data: middleRecharge.value
-        },
-        {
-          name: '免费金币',
-          color: '#5f8ff5',
-          type: 'bar',
-          stack: 'total',
-          label: {
-            show: false
-          },
-          emphasis: {
-            focus: 'series'
-          },
-          data: middleFree.value
-        },
-        {
-          name: '任务金币',
-          color: '#ffe733',
-          type: 'bar',
-          stack: 'total',
-          label: {
-            show: false
-          },
-          emphasis: {
-            focus: 'series'
-          },
-          data: middleTask.value
-        }
-      ]
-    }
-    // 使用刚指定的配置项和数据显示图表。
-    consume.setOption(option)
-  }
+// 本周一
+const getWeekStart = (date) => {
+  const day = date.getDay()
+  const diff = date.getDate() - day + (day === 0 ? -6 : 1) // 如果周日，则返回上周一
+  return new Date(date.setDate(diff))
 }
 
-// 获取门店排名
-const getAreaRank = async function () {
-  const result = await API({
-    url: '/statistics/getMee',
-    data: getAreaRankObj.value
-  })
-
-  getMediumArea.value = result.data
-
-  console.log('getMediumArea', getMediumArea.value)
-
-  if (getAreaRankObj.value.type == '充值金币') {
-    areaRank.value = getMediumArea.value.map((item) => ({
-      value: Math.abs(item.rechargeSumCoin).toFixed(2),
-      name: item.area
-    }))
-  } else if (getAreaRankObj.value.type == '免费金币') {
-    areaRank.value = getMediumArea.value.map((item) => ({
-      value: Math.abs(item.freeSumCoin).toFixed(2),
-      name: item.area
-    }))
-  } else if (getAreaRankObj.value.type == '任务金币') {
-    areaRank.value = getMediumArea.value.map((item) => ({
-      value: Math.abs(item.taskSumCoin).toFixed(2),
-      name: item.area
-    }))
-  } else {
-    areaRank.value = getMediumArea.value.map((item) => ({
-      value: Math.abs(item.totalRechargeSum).toFixed(2),
-      name: item.area
-    }))
-  }
-  areaRank.value.sort((a, b) => b.value - a.value)
-  areaRankLoading.value = false
-  console.log('areaRank', areaRank.value)
+// 本周日
+const getWeekEnd = (date) => {
+  const start = getWeekStart(new Date(date))
+  const end = new Date(start)
+  end.setDate(start.getDate() + 6)
+  return end
 }
 
-// 金币类型
-
-// const findBsComponent = function (index) {
-//   let iconName
-//   if (index < 3) {
-//     iconName = `bs.Bs${index + 1}CircleFill` // 根据index拼接图标名称
-//   } else {
-//     iconName = `bs.Bs${index + 1}Circle` // 根据index拼接图标名称
-//   }
-//   return eval(iconName) // 动态执行图标名称，返回图标组件
-// }
-// 门店排名下拉框
-const changeGoldType = function () {
-  console.log('changeGoldType', goldType.value)
-  if (goldType.value == '全部类型') {
-    getAreaRankObj.value.type = ''
-  } else if (goldType.value == '充值金币') {
-    getAreaRankObj.value.type = '充值金币'
-  } else if (goldType.value == '免费金币') {
-    getAreaRankObj.value.type = '免费金币'
-  } else if (goldType.value == '任务金币') {
-    getAreaRankObj.value.type = '任务金币'
-  }
-  areaRankLoading.value = true
-  getAreaRank()
-}
-// 点击标签页初始化
-const handleChange = function () {
-  if (activeName.value == 'recharge') {
-    getMiddleBarObj.value.updateType = 0
-    getAreaRankObj.value.updateType = 0
-  } else {
-    getMiddleBarObj.value.updateType = 1
-    getAreaRankObj.value.updateType = 1
-  }
-  getAreaRankObj.value.type = ''
-  goldType.value = '全部类型'
-  getMiddleBar()
-  areaRankLoading.value = true
-  getAreaRank()
-}
-// 时间范围控制
-const disabledDate = function (date) {
-  const currentDate = new Date()
-  const startDate = new Date(
-    currentDate.getFullYear(),
-    currentDate.getMonth() - 1,
-    1
-  )
-  const endDate = new Date(
-    currentDate.getFullYear(),
-    currentDate.getMonth() + 1,
-    0
-  )
-  if (date >= startDate && date <= endDate) {
-    return false
-  }
-  return true
+// 月份第一天
+const getMonthStart = (date) => {
+  return new Date(date.getFullYear(), date.getMonth(), 1)
 }
-// 本日
-const today = function () {
-  const current = new Date()
-  const startDate = new Date(
-    current.getFullYear(),
-    current.getMonth(),
-    current.getDate()
-  )
-  const endDate = new Date(
-    current.getFullYear(),
-    current.getMonth(),
-    current.getDate()
-  )
-  searchTime.value = [startDate, endDate]
-  search()
-  // console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"))
-}
-// 本周
-const thisWeek = function () {
-  const current = new Date()
-  const dayOfWeek = current.getDay() // 获取今天是星期几（0 表示周日，1 表示周一，以此类推）
-  const diff = current.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) // 计算本周第一天的日期差值
-  const startDate = new Date(current.getFullYear(), current.getMonth(), diff)
-  const endDate = new Date()
-  searchTime.value = [startDate, endDate]
-  search()
-  // console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"))
-}
-// 本月
-const thisMonth = function () {
-  const current = new Date()
-  const startDate = new Date(current.getFullYear(), current.getMonth(), 1)
-  const endDate = new Date()
-  searchTime.value = [startDate, endDate]
-  search()
-  // console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"))
-}
-// 本年
-const thisYear = function () {
-  const current = new Date()
-  const startDate = new Date(current.getFullYear(), 0, 1)
-  const endDate = new Date(current.getFullYear(), current.getMonth() + 1, 0)
-  const year = 1
-  searchTime.value = [startDate, endDate, year]
-  search()
-  // console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"))
-}
-// 全部
-const allTime = function () {
-  searchTime.value = ['', '']
-  search()
+
+// 月份最后一天
+const getMonthEnd = (date) => {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0)
 }
-// 时间选择器
-const changeTime = function () {
-  console.log('changeTimeRatio', changeTimeRatio.value)
-  if (changeTimeRatio.value == 'allDays') {
-    allTime()
-  } else if (changeTimeRatio.value == 'week') {
-    thisWeek()
-  } else if (changeTimeRatio.value == 'month') {
-    thisMonth()
-  } else if (changeTimeRatio.value == 'year') {
-    thisYear()
-  } else if (changeTimeRatio.value == 'day') {
-    today()
-  }
+
+// 年份第一天
+const getYearStart = (date) => {
+  return new Date(date.getFullYear(), 0, 1)
 }
 
-// 根据时间搜索
-const search = function () {
-  console.log(
-    'searchTime',
-    moment(searchTime.value[0]).format('YYYY-MM-DD') +
-      '至' +
-      moment(searchTime.value[1]).format('YYYY-MM-DD')
-  )
+// 年份最后一天
+const getYearEnd = (date) => {
+  return new Date(date.getFullYear(), 11, 31)
+}
 
-  getMiddleBarObj.value.searchStartTime = moment(searchTime.value[0]).format(
-    'YYYY-MM-DD'
-  )
-  getMiddleBarObj.value.searchEndTime = moment(searchTime.value[1]).format(
-    'YYYY-MM-DD'
-  )
-  if (getMiddleBarObj.value.searchStartTime == 'Invalid date') {
-    delete getMiddleBarObj.value.searchStartTime
+const handleTimeRangeChange = (value) => {
+  const now = new Date()
+  let start, end
+  
+  switch (value) {
+    case 'day': // 今日
+      start = new Date(now)
+      end = new Date(now)
+      break
+    case 'week': // 本周
+      start = getWeekStart(new Date(now))
+      end = getWeekEnd(new Date(now))
+      break
+    case 'month': // 本月
+      start = getMonthStart(now)
+      end = getMonthEnd(now)
+      break
+    case 'year': // 本年
+      start = getYearStart(now)
+      end = getYearEnd(now)
+      break
+    default:
+      start = new Date()
+      end = new Date()
   }
-  if (getMiddleBarObj.value.searchEndTime == 'Invalid date') {
-    delete getMiddleBarObj.value.searchEndTime
-  }
-  console.log('getMiddleBarObj', getMiddleBarObj.value)
+  
+  dateRange.value = [start, end]
+  loadChart()
+}
 
-  getAreaRankObj.value.searchStartTime = moment(searchTime.value[0]).format(
-    'YYYY-MM-DD'
-  )
-  getAreaRankObj.value.searchEndTime = moment(searchTime.value[1]).format(
-    'YYYY-MM-DD'
-  )
-  if (getAreaRankObj.value.searchStartTime == 'Invalid date') {
-    delete getAreaRankObj.value.searchStartTime
-  }
-  if (getAreaRankObj.value.searchEndTime == 'Invalid date') {
-    delete getAreaRankObj.value.searchEndTime
-  }
-  console.log('getAreaRankObj', getAreaRankObj.value)
+const handleDateRangeChange = () => {
+  timeRange.value = ''
+}
 
-  if (searchTime.value[2] == 1) {
-    getMiddleBarObj.value.year = searchTime.value[2]
-  } else {
-    delete getMiddleBarObj.value.year
+// 获取地区数据
+const getAreas = async () => {
+  try {
+    const result = await API({
+      url: '/recharge/user/search',
+      data: {}
+    })
+    middleCategory.value = result.data.map(item => item.name)
+    
+    // 生成表格数据（模拟）
+    tableData.value = result.data.slice(0, 11).map((item, index) => ({
+      rank: index + 1,
+      region: item.name,
+      coinAmount: Math.floor(Math.random() * 1000000) + 500000
+    }))// D老师加的这一段（？？？？？？？？？？？？？？？？）
+  } catch (error) {
+    console.error('获取地区数据失败:', error)
   }
-  getMiddleBar()
-  areaRankLoading.value = true
-  getAreaRank()
 }
 
-// 切换平台
-// const changePlatform = function () {
-//   console.log('changePlatform', platform.value)
-//   if (platform.value == '全部平台') {
-//     // 基于准备好的dom，初始化echarts实例
-//     var all = echarts.init(document.getElementById('all'))
-//     const option6 = {
-//       tooltip: {
-//         trigger: 'item'
-//       },
-//       series: [
-//         {
-//           name: '四大学科类别占比',
-//           type: 'pie',
-//           radius: ['40%', '60%'],
-//           avoidLabelOverlap: false,
-//           data: allData.value
-//         }
-//       ]
-//     }
-//     // 使用刚指定的配置项和数据显示图表。
-//     all.setOption(option6)
-//   } else if (platform.value == 'ERP') {
-//     // 基于准备好的dom，初始化echarts实例
-//     var ERP = echarts.init(document.getElementById('ERP'))
-//     const option7 = {
-//       tooltip: {
-//         trigger: 'item'
-//       },
-//       series: [
-//         {
-//           name: '四大学科类别占比',
-//           type: 'pie',
-//           radius: ['40%', '60%'],
-//           avoidLabelOverlap: false,
-//           data: ERPData.value
-//         }
-//       ]
-//     }
-//     // 使用刚指定的配置项和数据显示图表。
-//     ERP.setOption(option7)
-//   } else if (platform.value == 'HC') {
-//     // 第4-3个饼状图 基于准备好的dom，初始化echarts实例
-//     var HC = echarts.init(document.getElementById('HC'))
-//     const option8 = {
-//       tooltip: {
-//         trigger: 'item'
-//       },
-//       series: [
-//         {
-//           name: '四大学科类别占比',
-//           type: 'pie',
-//           radius: ['40%', '60%'],
-//           avoidLabelOverlap: false,
-//           data: HCData.value
-//         }
-//       ]
-//     }
-//     // 使用刚指定的配置项和数据显示图表。
-//     HC.setOption(option8)
-//   } else if (platform.value == 'Link') {
-//     // 第4-4个饼状图 基于准备好的dom，初始化echarts实例
-//     var Link = echarts.init(document.getElementById('Link'))
-//     const option9 = {
-//       tooltip: {
-//         trigger: 'item'
-//       },
-//       series: [
-//         {
-//           name: '四大学科类别占比',
-//           type: 'pie',
-//           radius: ['40%', '60%'],
-//           avoidLabelOverlap: false,
-//           data: LinkData.value
-//         }
-//       ]
-//     }
-//     // 使用刚指定的配置项和数据显示图表。
-//     Link.setOption(option9)
-//   } else if (platform.value == '金币系统') {
-//     // 第4-5个饼状图 基于准备好的dom，初始化echarts实例
-//     var gold = echarts.init(document.getElementById('gold'))
-//     const option10 = {
-//       tooltip: {
-//         trigger: 'item'
-//       },
-//       series: [
-//         {
-//           name: '四大学科类别占比',
-//           type: 'pie',
-//           radius: ['40%', '60%'],
-//           avoidLabelOverlap: false,
-//           data: goldData.value
-//         }
-//       ]
-//     }
-//     // 使用刚指定的配置项和数据显示图表。
-//     gold.setOption(option10)
-//   }
-// }
-
-// 计算属性
-// 格式化数字   这是一个方法
-const formatNum = function (val) {
-  if (val === undefined) {
-    return ''
-  }
-  const num = parseFloat(val)
-  // 判断是否为整数
-  if (Number.isInteger(num)) {
-    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-  } else {
-    // 四舍五入保留两位小数
-    const roundedVal = num.toFixed(2)
-    return roundedVal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const getChartData = async () => {
+  try {
+    const params = {
+      updateType: updateType.value
+    }
+    
+    if (dateRange.value && dateRange.value.length === 2) {
+      params.searchStartTime = formatDate(dateRange.value[0])
+      params.searchEndTime = formatDate(dateRange.value[1])
+    }
+    
+    const result = await API({
+      url: '/statistics/getCoinTime',
+      data: params
+    })
+    
+    histogramData.value = result.data || []
+    
+    middleRecharge.value = histogramData.value.map(item => 
+      Math.abs(item.rechargeSumCoin || 0)
+    )
+    middleFree.value = histogramData.value.map(item => 
+      Math.abs(item.freeSumCoin || 0)
+    )
+    middleTask.value = histogramData.value.map(item => 
+      Math.abs(item.taskSumCoin || 0)
+    )
+    
+    updateChart()
+  } catch (error) {
+    console.error('请求图表数据失败:', error)
   }
 }
 
-function updateChart() {
-  // 第一个柱状图 基于准备好的dom，初始化echarts实例
-  rechargeBar = echarts.init(document.getElementById('recharge'))
-  const option1 = {
+const updateChart = () => {
+  const option = {
     tooltip: {
       trigger: 'axis',
-      axisPointer: {
-        // Use axis to trigger tooltip
-        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+      axisPointer: { type: 'shadow' },
+      formatter: function (params) {
+        let total = 0
+        let content = `${params[0].name}<br/>`
+        params.forEach((param) => {
+          content += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`
+          total += param.value
+        })
+        content += `总和: ${total.toLocaleString()}`
+        return content
       }
     },
     legend: {
-      right: 0,
-      orient: 'vertical'
+      right: '2%',
+      orient: 'vertical',
+      itemGap: 10
     },
     grid: {
       left: '3%',
-      right: '4%',
+      right: '10%',
       bottom: '3%',
       containLabel: true
     },
     xAxis: {
       type: 'category',
-      data: middleCategory.value
+      data: middleCategory.value,
+      axisLabel: {
+        interval: 0,
+        rotate: 30
+      }
     },
     yAxis: {
-      type: 'value'
+      type: 'value',
+      axisLabel: {
+        formatter: (value) => value.toLocaleString()
+      }
     },
     series: [
       {
@@ -769,12 +320,6 @@ function updateChart() {
         color: '#35e383',
         type: 'bar',
         stack: 'total',
-        label: {
-          show: false
-        },
-        emphasis: {
-          focus: 'series'
-        },
         data: middleRecharge.value
       },
       {
@@ -782,12 +327,6 @@ function updateChart() {
         color: '#5f8ff5',
         type: 'bar',
         stack: 'total',
-        label: {
-          show: false
-        },
-        emphasis: {
-          focus: 'series'
-        },
         data: middleFree.value
       },
       {
@@ -795,454 +334,91 @@ function updateChart() {
         color: '#ffe733',
         type: 'bar',
         stack: 'total',
-        label: {
-          show: false
-        },
-        emphasis: {
-          focus: 'series'
-        },
         data: middleTask.value
       }
     ]
   }
-  // 使用刚指定的配置项和数据显示图表。
-  rechargeBar.setOption(option1)
+  
+  if (activeTab.value === 'recharge' && rechargeBar) {
+    rechargeBar.setOption(option)
+    rechargeBar.resize()
+  } else if (consumeBar) {
+    consumeBar.setOption(option)
+    consumeBar.resize()
+  }
 }
-onMounted(async function () {
-  await get()
-  updateChart()
-})
-</script>
 
-<template>
-  <div v-loading="loading">
-    <el-row :gutter="20">
-      <el-col :span="6">
-        <el-card style="height: 260px">
-          <p>当前金币余量</p>
-          <p class="head-mid-font">
-            {{ formatNum(oneData.sumgold / 100) }}
-          </p>
-          <p>
-            <span v-if="oneData.differr > 0">
-              <div class="comparedWithYesterday">
-                <span>较前一天 {{ formatNum(oneData.differr / 100) }}</span>
-                <span
-                  class="red-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
-              </div>
-            </span>
-            <span v-if="oneData.differr < 0">
-              <div class="comparedWithYesterday">
-                <span>较前一天 {{ formatNum(oneData.differr / 100) }}</span>
-                <span
-                  class="green-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
-              </div>
-            </span>
-            <span v-if="oneData.differr == 0">
-              <div class="comparedWithYesterday">
-                <span>较前一天 {{ formatNum(oneData.differr / 100) }}</span>
-                <span
-                  class="grey-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
-              </div>
-            </span>
-          </p>
-          <template #footer>
-            <span style="font-size: 15px"
-              >永久{{ formatNum(oneData.rechargegold / 100) }} 免费{{
-                formatNum(oneData.freegold / 100)
-              }}
-              任务{{ formatNum(oneData.taskgold / 100) }}
-            </span>
-            <p style="font-size: 12px">
-              免费金币：6月到期 |
-              {{ formatNum(oneData.sfreegold / 100) }} ; 12月到期 |
-              {{ formatNum(oneData.dfreegold / 100) }}
-            </p>
-          </template>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card style="height: 260px">
-          <p>全年累计金币数</p>
-          <p class="head-mid-font">
-            {{ formatNum(Math.abs(twoData.totalgold / 100)) }}
-          </p>
-          <p>
-            折合新币累计金额
-            {{ formatNum(Math.abs(twoData.totalcoin / 100)) }}
-          </p>
-          <template #footer
-            >昨日新增
-            {{ formatNum(Math.abs(twoData.yesterdaytotal / 100)) }}
-            ，其中充值{{
-              formatNum(Math.abs(twoData.yesterdayrecharge / 100))
-            }}</template
-          >
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card style="height: 260px">
-          <p>全年累计消耗金币数</p>
-          <p class="head-mid-font">
-            {{
-              formatNum(
-                Math.abs((threeData.consumeGold + threeData.refundCoin) / 100)
-              )
-            }}
-          </p>
-          <p>
-            消费
-            {{ formatNum(Math.abs(threeData.consumeGold / 100)) }}; 退款
-            {{ formatNum(Math.abs(threeData.refundCoin / 100)) }}
-          </p>
-          <template #footer
-            >昨日新增消耗{{
-              formatNum(
-                Math.abs(
-                  threeData.yesterdayGold + threeData.yesterdayrefund !==
-                    undefined &&
-                    threeData.yesterdayGold + threeData.yesterdayrefund !== null
-                    ? (threeData.yesterdayGold + threeData.yesterdayrefund) /
-                        100
-                    : 0
-                )
-              )
-            }}
-            ; 消费{{
-              formatNum(
-                Math.abs(
-                  threeData.yesterdayGold !== undefined &&
-                    threeData.yesterdayGold !== null
-                    ? threeData.yesterdayGold / 100
-                    : 0
-                )
-              )
-            }}
-            ; 退款{{
-              formatNum(
-                Math.abs(
-                  threeData.yesterdayrefund !== undefined &&
-                    threeData.yesterdayrefund !== null
-                    ? threeData.yesterdayrefund / 100
-                    : 0
-                )
-              )
-            }}</template
-          >
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card style="height: 260px">
-          <p>全年累计充值人数</p>
-          <p class="head-mid-font">
-            {{ formatNum(Math.abs(statistics.rechargeCount)) }}
-          </p>
-          <p style="display: flex">
-            <span v-if="statistics.weekOverWeekRate > 0">
-              <div class="comparedWithYesterday">
-                <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                <span
-                  class="red-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
-              </div>
-            </span>
-            <span v-if="statistics.weekOverWeekRate < 0">
-              <div class="comparedWithYesterday">
-                <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                <span
-                  class="green-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
-              </div>
-            </span>
-            <span v-if="statistics.weekOverWeekRate == 0">
-              <div class="comparedWithYesterday">
-                <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                <span
-                  class="grey-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
-              </div>
-            </span>
-            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-            <span v-if="statistics.dayOverDayRate > 0">
-              <div class="comparedWithYesterday">
-                <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                <span
-                  class="red-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
-              </div>
-            </span>
-            <span v-if="statistics.dayOverDayRate < 0">
-              <div class="comparedWithYesterday">
-                <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                <span
-                  class="green-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
-              </div>
-            </span>
-            <span v-if="statistics.dayOverDayRate == 0">
-              <div class="comparedWithYesterday">
-                <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                <span
-                  class="grey-triangle"
-                  style="margin: 6px 0px 0px 7px"
-                ></span>
-              </div>
-            </span>
-          </p>
-          <template #footer
-            >昨日充值人数{{
-              formatNum(Math.abs(statistics.rechargeCountYesterday))
-            }}
-            ，其中首充{{
-              formatNum(Math.abs(statistics.firstRechargeCountYesterday))
-            }}人</template
-          >
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col>
-        <el-card>
-          <div style="margin-right: auto; text-align: right">
-            <el-radio-group
-              v-model="changeTimeRatio"
-              style="margin-right: 10px"
-              @change="changeTime()"
-            >
-              <el-radio-button
-                label="全部"
-                value="allDays"
-                style="border-color: white"
-              />
-              <el-radio-button
-                label="本日"
-                value="day"
-                style="border-color: white"
-              />
-              <el-radio-button
-                label="本周"
-                value="week"
-                style="border-color: white"
-              />
-              <el-radio-button
-                label="本月"
-                value="month"
-                style="border-color: white"
-              />
-              <el-radio-button
-                label="本年"
-                value="year"
-                style="border-color: white"
-              />
-            </el-radio-group>
-            <!-- <el-button text @click="allTime()" dark=true>全部</el-button>
-            <el-button text @click="today()">今日</el-button>
-            <el-button text @click="thisWeek()">本周</el-button>
-            <el-button text @click="thisMonth()">本月</el-button>
-            <el-button text @click="thisYear()">本年</el-button> -->
-            <el-date-picker
-              v-model="searchTime"
-              type="daterange"
-              range-separator="→"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              style="width: 200px"
-              :disabled-date="disabledDate"
-              @change="search"
-            />
-          </div>
-
-          <el-tabs
-            v-model="activeName"
-            class="demo-tabs"
-            @tab-change="handleChange"
-          >
-            <el-tab-pane label="金币充值" name="recharge">
-              <div>
-                合计：永久金币：
-                <span class="mid-head-font">{{
-                  formatNum(middleTotalRecharge)
-                }}</span>
-                ，免费金币：
-                <span class="mid-head-font">{{
-                  formatNum(middleTotalFree)
-                }}</span>
-                ，任务金币：
-                <span class="mid-head-font">{{
-                  formatNum(middleTotalTask)
-                }}</span>
-              </div>
-              <div class="bar">
-                <div id="recharge" style="width: 100%; height: 400px"></div>
-
-                <div style="width: 30%">
-                  <div class="ranking-header">
-                    <span style="width: 150px">地区金币充值排名</span>
-                    <el-select
-                      v-model="goldType"
-                      placeholder="请选择金币类型"
-                      size="small"
-                      style="margin-left: auto; width: 25%"
-                      @change="changeGoldType"
-                    >
-                      <el-option
-                        v-for="item in gold"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                  </div>
-                  <div v-loading="areaRankLoading">
-                    <el-scrollbar height="360px">
-                      <div
-                        v-for="(item, index) in areaRank"
-                        :key="item"
-                        class="ranking-item"
-                      >
-                        <!-- <component :is="findBsComponent(index)" /> -->
-                        <span style="width: 15px; text-align: center">{{
-                          index + 1
-                        }}</span>
-                        <span style="margin-left: 10px">{{ item.name }}</span>
-                        <span style="margin-left: auto; margin-right: 10px">{{
-                          formatNum(item.value)
-                        }}</span>
-                      </div>
-                    </el-scrollbar>
-                  </div>
-                </div>
-              </div>
-            </el-tab-pane>
-            <el-tab-pane label="金币消费" name="consume">
-              <div>
-                合计：永久金币：
-                <span class="mid-head-font">{{
-                  formatNum(middleTotalRecharge)
-                }}</span>
-                ，免费金币：
-                <span class="mid-head-font">{{
-                  formatNum(middleTotalFree)
-                }}</span>
-                ，任务金币：
-                <span class="mid-head-font">{{
-                  formatNum(middleTotalTask)
-                }}</span>
-              </div>
-              <div class="bar">
-                <div id="consume" style="width: 100%; height: 400px"></div>
-
-                <div style="width: 310px">
-                  <div class="ranking-header">
-                    <span style="margin-right: 90px; width: 150px"
-                      >地区金币消费排名</span
-                    >
-                    <el-select
-                      v-model="goldType"
-                      placeholder="请选择金币类型"
-                      size="small"
-                      style="width: 90px"
-                      @change="changeGoldType"
-                    >
-                      <el-option
-                        v-for="item in gold"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                  </div>
-                  <div v-loading="areaRankLoading">
-                    <el-scrollbar height="360px">
-                      <div
-                        v-for="(item, index) in areaRank"
-                        :key="item"
-                        class="ranking-item"
-                      >
-                        <!-- <component :is="findBsComponent(index)" /> -->
-                        <span style="width: 15px; text-align: center">{{
-                          index + 1
-                        }}</span>
-                        <span style="margin-left: 10px">{{ item.name }}</span>
-                        <span style="margin-left: auto; margin-right: 10px">{{
-                          formatNum(item.value)
-                        }}</span>
-                      </div>
-                    </el-scrollbar>
-                  </div>
-                </div>
-              </div>
-            </el-tab-pane>
-          </el-tabs>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<style scoped>
-.medium-button {
-  display: flex;
+const initCharts = () => {
+  const rechargeDom = document.getElementById('recharge')
+  const consumeDom = document.getElementById('consume')
+  
+  if (rechargeDom) {
+    rechargeBar = echarts.init(rechargeDom)
+  }
+  
+  if (consumeDom) {
+    consumeBar = echarts.init(consumeDom)
+  }
 }
 
-.head-mid-font {
-  font-size: 20px;
-  font-weight: bold;
+const loadChart = async () => {
+  await getAreas()
+  await getChartData()
 }
 
-.mid-head-font {
-  font-weight: bold;
-  color: #5eb7ff;
+// 页面切换
+const handleTabChange = (tab) => {
+  updateType.value = tab === 'recharge' ? 0 : 1
+  loadChart()
 }
 
-.tail-head {
-  font-weight: bold;
+const handleResize = () => {
+  if (rechargeBar) rechargeBar.resize()
+  if (consumeBar) consumeBar.resize()
 }
 
-.comparedWithYesterday {
-  display: flex;
-}
+onMounted(() => {
+  initCharts()
+  loadChart()
+  window.addEventListener('resize', handleResize)
+})
 
-.ranking-item {
-  margin-bottom: 10px;
-  display: flex;
-}
+onBeforeUnmount(() => {
+  if (rechargeBar) rechargeBar.dispose()
+  if (consumeBar) consumeBar.dispose()
+  window.removeEventListener('resize', handleResize)
+})
+</script>
 
-.ranking-header {
-  margin-bottom: 10px;
+<style scoped>
+.center-card {
   display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.goldCategory {
-  margin-bottom: 4px;
-  margin-right: 20px;
-  display: flex;
+.margin-bottom {
+  margin-bottom: 5px;
 }
 
-.bar {
+.card-item {
+  width: 24%;
+  height: 260px;
+  margin-right: 10px;
   display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.pie {
+.card-title {
+  font-weight: bold;
+  margin-bottom: 10px;
   display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.el-row {
-  margin-bottom: 20px;
-}
-
-.el-radio-button {
-  border: 1px solid grey;
+.margin-top{
+  margin-top: 5px;
 }
-</style>
+</style>
\ No newline at end of file