重复点击以及样式优化

# Conflicts:
#	src/views/workspace/index.vue

src/views/audit/gold/rechargeAudit.vue

@@ -30,7 +30,7 @@
       <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
                       end-placeholder="结束时间" class="time-controls" style="margin-right:1vw;width:25vw"
                       @change="handleDatePickerChange"
-                      :default-time="defaultTime"/>
+                      :default-time="defaultTime" :disabled-date="disabledDate"/>
       <el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''">今</el-button>
       <el-button @click="getYesterday()" :type="activeTimeRange === 'yesterday' ? 'primary' : ''">昨</el-button>
       <el-button @click="get7Days()" :type="activeTimeRange === '7days' ? 'primary' : ''">近7天</el-button>
@@ -170,6 +170,11 @@ const defaultTime = [
   new Date(2000, 1, 1, 0, 0, 0),
   new Date(2000, 2, 1, 23, 59, 59),
 ]
+//无法选择的时间
+const disabledDate = (time) => {
+  const limitDate = new Date(2025, 0, 1);
+  return time.getTime() < limitDate.getTime();
+}
 const tableData = ref([])
 // 当前激活的时间按钮
 const activeTimeRange = ref('')

src/views/audit/gold/refundAudit.vue

@@ -28,7 +28,7 @@
       <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                       class="time-controls"
                       end-placeholder="结束时间" style="margin-right:1vw;width:25vw" @change="handleDatePickerChange"
-                      :default-time="defaultTime"/>
+                      :default-time="defaultTime" :disabled-date="disabledDate"/>
       <el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''">今</el-button>
       <el-button @click="getYesterday()" :type="activeTimeRange === 'yesterday' ? 'primary' : ''">昨</el-button>
       <el-button @click="get7Days()" :type="activeTimeRange === '7days' ? 'primary' : ''">近7天</el-button>
@@ -173,6 +173,11 @@ const STATUS = {
   APPROVED: 1, // 通过
   REJECTED: 2 // 驳回
 }
+//无法选择的时间
+const disabledDate = (time) => {
+  const limitDate = new Date(2025, 0, 1);
+  return time.getTime() < limitDate.getTime();
+}
 // 搜索表单数据
 const searchForm = ref({
   jwcode: '',

src/views/consume/bean/addBeanConsume.vue

@@ -44,6 +44,10 @@ const getUser = async function (jwcode) {
     ElMessage.error("精网号错误");
   }
 }
+
+//提交禁止重复点击
+const addDisabled = ref(false)
+
 const consumeForm = ref({
   jwcode: '',
   permanentBean: '',
@@ -178,6 +182,7 @@ const handleConsumeForm = async () => {
         lockScroll: false,
       }
     )
+    addDisabled.value = true
     const result = await request({
       url: '/beanConsume/reduce',
       data: {
@@ -188,6 +193,7 @@ const handleConsumeForm = async () => {
         adminName: adminData.value.adminName
       }
     })
+    addDisabled.value = false
     if (result.code == 200) {
       ElMessage.success('新增成功')
       consumeForm.value = {
@@ -230,7 +236,7 @@ const throttledHandleConsumeFormt = _.throttle(handleConsumeForm, 5000, {
         <el-input style="width: 300px" :value="adminData.adminName" disabled placeholder="提交人姓名" />
       </el-form-item> -->
       <el-button @click="deleteConsumeForm" style="margin-left: 280px" type="success">重置</el-button>
-      <el-button type="primary" @click="handleConsumeForm"> 提交 </el-button>
+      <el-button type="primary" :disabled="addDisabled" @click="handleConsumeForm"> 提交 </el-button>
     </el-form>
 
     <!-- 客户信息栏 -->

src/views/consume/gold/addCoinConsume.vue

@@ -18,7 +18,8 @@ const trimJwCode = () => {
     }
   }
 }
-
+//提交禁止重复点击
+const addDisabled = ref(false)
 /*
 ====================数据=================================
 */
@@ -238,6 +239,7 @@ const add = async function () {
 
     console.log("addConsume.value", addConsume.value)
     // 发送POST请求
+    addDisabled.value = true
     const result = await request({
       // url: "/consume/add",
       url: "/consume/add",
@@ -253,7 +255,7 @@ const add = async function () {
         remark: addConsume.value.remark
       }
     });
-
+    addDisabled.value = false
     console.log("add请求", result);
     // 处理响应
     handleResponse(result);
@@ -464,60 +466,45 @@ onMounted(async function () {
 
 <template>
   <div>
-    <el-form :model="addConsume" ref="Ref" :rules="rules" style="max-width: 750px;">
-      <div style="width:25vw">
-      <el-form-item prop="jwcode" label="精网号" style="margin-top: 50px">
-        <el-input v-model="addConsume.jwcode" style="width: 10vw;margin-left:45px" />
+    <el-form :model="addConsume" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px;" label-position="right" class="add-form">
+      <el-form-item prop="jwcode" label="精网号" >
+        <el-input v-model="addConsume.jwcode" style="width: 200px" />
         <el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 10px">查询
         </el-button>
       </el-form-item>
-    </div>
-      <div  style="width:25vw">
-        <el-form-item prop="goodsName" label="商品名称" style="flex: 1; margin-right: 0px">
-          <el-select v-model="addConsume.goodsName" placeholder="请选择商品"  style="width: 10vw;margin-left:30px">
+        <el-form-item prop="goodsName" label="商品名称">
+          <el-select v-model="addConsume.goodsName" placeholder="请选择商品"  style="width: 200px">
             <el-option v-for="item in goods" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
-      </div>
-      <div  style="width:25vw"> 
         <el-form-item prop="sumGold" label="消耗金币总数">
-          <el-input v-model="addConsume.sumGold" style="width: 10vw;margin-left:2px" @input="validateInput()"
+          <el-input v-model="addConsume.sumGold" style="width: 100px" @input="validateInput()"
             @change="calculateCoins(addConsume.sumGold)" />
         </el-form-item>
-      </div>
 
       <!-- 三类金币自动计算（禁用状态，不可编辑） -->
-      <div style="width:25vw">
         <el-form-item prop="permanentGold" label="永久金币">
-          <el-input v-model="addConsume.permanentGold" disabled  style="width: 10vw;margin-left:40px">
+          <el-input v-model="addConsume.permanentGold" disabled  style="width: 100px">
             <template #default="scope">{{ scope.row.permanentGold }}</template>
           </el-input>
           <p style="margin-right: 0px">&nbsp;&nbsp;个</p>
         </el-form-item>
-      </div>
-      <div style="width:25vw">
         <el-form-item prop="freeCoin" label="免费金币">
-          <el-input disabled v-model="addConsume.freeGold" style="width: 10vw;margin-left:40px" />
+          <el-input disabled v-model="addConsume.freeGold" style="width: 100px" />
           <p style="margin-right: 0px">&nbsp;&nbsp;个</p>
         </el-form-item>
-      </div>
-      <div style="width:25vw">
         <el-form-item prop="taskGold" label="任务金币">
-          <el-input disabled v-model="addConsume.taskGold" style="width: 10vw;margin-left:40px" />
+          <el-input disabled v-model="addConsume.taskGold" style="width: 100px" />
           <p style="margin-right: 20px">&nbsp;&nbsp;个</p>
         </el-form-item>
-      </div>
-      <div style="width:25vw">
         <el-form-item prop="remark" label="备注">
-          <el-input v-model="addConsume.remark" style="width: 13.5vw;margin-left:70px" :rows="4" maxlength="100" show-word-limit
+          <el-input v-model="addConsume.remark" style="width: 300px" :rows="4" maxlength="100" show-word-limit
             type="textarea" />
         </el-form-item>
-      </div>
       <el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">重置</el-button>
-      <el-button type="primary" @click="addBefore" style="margin-top:10px"> 提交</el-button>
+      <el-button type="primary" :disabled="addDisabled" @click="addBefore" style="margin-top:10px"> 提交</el-button>
     </el-form>
 
-
     <!-- 客户信息栏 -->
     <el-card v-if="user.jwcode" style="width: 800px; float: right" class="customer-info">
       <el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
@@ -618,7 +605,11 @@ onMounted(async function () {
 p {
   margin: 0px;
 }
-
+.add-form {
+  margin-top: 50px;
+  max-width: 50%;
+  float: left;
+}
 .el-form-item {
   margin-left: 50px;
 }
@@ -629,6 +620,9 @@ p {
   height: 50px;
   display: block;
 }
+.customer-info {
+  max-width: 60%;
+}
 </style>
 
 <style>

src/views/consume/gold/coinConsumeDetail.vue

@@ -22,6 +22,11 @@ const format3 = (num) => {
     parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     return parts.join('.');
 }
+//无法选择的时间
+const disabledDate = (time) => {
+  const limitDate = new Date(2025, 0, 1);
+  return time.getTime() < limitDate.getTime();
+}
 // 时间格式化
 const formatTime = (val) => val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : ''
 const defaultTime = [
@@ -605,7 +610,7 @@ const getMarket = async function () {
               <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" @change="handleDatePickerChange"
-                              :default-time="defaultTime"/>
+                              :default-time="defaultTime" :disabled-date="disabledDate"/>
               <el-button @click="getToday()" style="margin-left: 10px"
                          :type="activeTimeRange === 'today' ? 'primary' : ''"> 今
               </el-button>

src/views/recharge/addBeanRecharge.vue

@@ -43,6 +43,9 @@ const getUser = async function (jwcode) {
     ElMessage.error("精网号错误");
   }
 }
+//提交禁止重复点击
+const addDisabled = ref(false)
+
 const addForm = ref({
   jwcode: '',
   permanentBean: '',
@@ -164,6 +167,7 @@ const handleAddForm = async () => {
         lockScroll: false,
       }
     )
+    addDisabled.value = true
     const result = await request({
       url: '/beanRecharge/add',
       data: {
@@ -174,6 +178,7 @@ const handleAddForm = async () => {
         adminName: adminData.value.adminName
       }
     })
+    addDisabled.value = false
     if (result.code == 200) {
       ElMessage.success('新增成功')
       addForm.value = {
@@ -191,9 +196,6 @@ const handleAddForm = async () => {
     ElMessage.error(error.message || '操作取消');
   }
 }
-const throttledHandleAddFormt = _.throttle(handleAddForm, 5000, {
-  trailing: false
-})
 </script>
 <template>
   <div>
@@ -216,7 +218,7 @@ const throttledHandleAddFormt = _.throttle(handleAddForm, 5000, {
         <el-input style="width: 300px" :value="adminData.adminName" disabled placeholder="提交人姓名" />
       </el-form-item> -->
       <el-button @click="deleteAddForm" style="margin-left: 280px" type="success">重置</el-button>
-      <el-button type="primary" @click="throttledHandleAddFormt"> 提交 </el-button>
+      <el-button type="primary" :disabled="addDisabled" @click="handleAddForm"> 提交 </el-button>
     </el-form>
 
     <!-- 客户信息栏 -->

src/views/recharge/gold/addCoinRecharge.vue

@@ -56,7 +56,8 @@ const getAdminData = async function () {
     console.log('请求失败', error)
   }
 }
-
+//提交禁止重复点击
+const addDisabled = ref(false)
 // 这是添加充值信息的表单
 const recharge = ref({
   jwcode: '', // jwcode 字段
@@ -102,6 +103,7 @@ const add = async function () {
       url: '/recharge/add',
       data: formattedRecharge
     })
+    addDisabled.value = false
     if (result.code === 0) {
       ElMessage.error(result.msg)
       return
@@ -111,17 +113,7 @@ const add = async function () {
     // 显示成功消息
     ElMessage.success('添加成功')
     // 重置表单
-    recharge.value = {}
-    recharge.value.adminId = adminData.value.id
-    recharge.value.market = adminData.value.market
-    recharge.value.voucher = ''
-    recharge.value.rechargeWay = '客服充值'
-    recharge.value.freeGold = ''
-    recharge.value.money = null
-    recharge.value.permanentGold = ''
-    recharge.value.rateId = null
-    imageUrl.value = ''
-    recharge.value.rateName = null
+    deleteRecharge()
     user.value = {}
   } catch (error) {
     console.log('请求失败', error)
@@ -168,6 +160,7 @@ const addBefore = () => {
       }
       ElMessageBox.confirm('确认充值？')
         .then(() => {
+          addDisabled.value = true
           add()
           console.log('充值成功')
         })
@@ -556,7 +549,7 @@ onMounted(() => {
 <template>
   <div>
 
-    <el-form :model="recharge" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px" class="add-form">
+    <el-form :model="recharge" ref="Ref" :rules="rules" label-width="auto" label-position="right" style="max-width: 600px" class="add-form">
       <el-form-item prop="jwcode" label="精网号">
         <el-input v-model="recharge.jwcode" style="width: 220px" />
         <el-button type="primary" @click="getUser(recharge.jwcode)" style="margin-left: 20px">查询</el-button>
@@ -643,12 +636,12 @@ onMounted(() => {
         </p>
       </el-form-item>
       <el-form-item prop="remark" label="备注">
-        <el-input v-model="recharge.remark" style="width: 300px" :rows="2" maxlength="100" show-word-limit
+        <el-input v-model="recharge.remark" style="width: 300px" :rows="4" maxlength="100" show-word-limit
           type="textarea" />
       </el-form-item>
 
       <el-button @click="deleteRecharge" style="margin-left: 280px" type="success">重置</el-button>
-      <el-button type="primary" @click="addBefore"> 提交 </el-button>
+      <el-button type="primary" :disabled="addDisabled" @click="addBefore"> 提交 </el-button>
     </el-form>
 
     <!-- 客户信息栏 -->
@@ -760,9 +753,6 @@ p {
   height: 50px;
   display: block;
 }
-</style>
-
-<style>
 .error-message {
   color: red;
   font-size: 8px;
@@ -803,3 +793,4 @@ p {
   max-width: 60%;
 }
 </style>
+

src/views/recharge/gold/coinRechargeDetail.vue

@@ -166,7 +166,11 @@ const freeGold = ref(0)
 const permanentGolds = ref(0)
 const freeGolds = ref(0)
 
-
+//无法选择的时间
+const disabledDate = (time) => {
+  const limitDate = new Date(2025, 0, 1);
+  return time.getTime() < limitDate.getTime();
+}
 // 支付方式选项
 const payModel = [
   {
@@ -628,7 +632,7 @@ const getTagText = (state) => {
               <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" @change="handleDatePickerChange"
-                :default-time="defaultTime" />
+                :default-time="defaultTime" :disabled-date="disabledDate"/>
               <el-button @click="getToday()" style="margin-left: 10px"
                 :type="activeTimeRange === 'today' ? 'primary' : ''"> 今
               </el-button>

src/views/refund/gold/addCoinRefund.vue

@@ -440,7 +440,7 @@ onMounted(async function () {
 <template>
   <div>
 
-    <el-form :model="addRefund" ref="Ref" :rules="rules" label-width="auto" style="max-width: 750px" class="form-style">
+    <el-form :model="addRefund" ref="Ref" :rules="rules" label-width="auto" label-position="right" style="max-width: 750px" class="form-style">
       <el-form-item prop="jwcode" label="精网号">
         <el-input v-model="addRefund.jwcode" style="width: 220px" @change="getGoods(addRefund.jwcode)" />
         <el-button type="primary" @click="getUser(addRefund.jwcode)" style="margin-left: 20px">查询

src/views/refund/gold/coinRefundDetail.vue

@@ -12,6 +12,11 @@ const defaultTime = [
   new Date(2000, 1, 1, 0, 0, 0),
   new Date(2000, 2, 1, 23, 59, 59),
 ]
+//无法选择的时间
+const disabledDate = (time) => {
+  const limitDate = new Date(2025, 0, 1);
+  return time.getTime() < limitDate.getTime();
+}
 const format3 = (num) => {
   // 每三位添加逗号
   return num.toLocaleString('en-US')
@@ -544,7 +549,7 @@ const getMarket = async function () {
               <el-text class="mx-1">退款时间：</el-text>
               <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
                 end-placeholder="结束时间" style="width: 400px" @change="handleDatePickerChange"
-                :default-time="defaultTime" />
+                :default-time="defaultTime" :disabled-date="disabledDate"/>
               <el-button @click="getToday()" style="margin-left: 10px"
                 :type="activeTimeRange === 'today' ? 'primary' : ''"> 今
               </el-button>

src/views/workspace/index.vue

@@ -23,17 +23,17 @@
               {{ dailyChange / 100 }}
               <template v-if="dailyChange > 0">
                 <el-icon style="color:red">
-                  <ArrowUpBold />
+                  <ArrowUpBold/>
                 </el-icon>
               </template>
               <template v-else-if="dailyChange < 0">
                 <el-icon style="color:forestgreen">
-                  <ArrowDownBold />
+                  <ArrowDownBold/>
                 </el-icon>
               </template>
               <template v-else>
                 <el-icon style="color:grey">
-                  <SemiSelect />
+                  <SemiSelect/>
                 </el-icon>
               </template>
             </div>
@@ -89,34 +89,34 @@
         <el-col class="center-card">周同比:{{ sumWow }}%&nbsp;&nbsp;&nbsp;&nbsp;
           <template v-if="sumWow > 0">
             <el-icon style="color:red">
-              <ArrowUpBold />
+              <ArrowUpBold/>
             </el-icon>
           </template>
           <template v-else-if="sumWow < 0">
             <el-icon style="color:forestgreen">
-              <ArrowDownBold />
+              <ArrowDownBold/>
             </el-icon>
           </template>
           <template v-else>
             <el-icon style="color:grey">
-              <SemiSelect />
+              <SemiSelect/>
             </el-icon>
           </template>
         </el-col>
         <el-col class="center-card">日环比:{{ sumDaily }}%&nbsp;&nbsp;&nbsp;&nbsp;
           <template v-if="sumDaily > 0">
             <el-icon style="color:red">
-              <ArrowUpBold />
+              <ArrowUpBold/>
             </el-icon>
           </template>
           <template v-else-if="sumDaily < 0">
             <el-icon style="color:forestgreen">
-              <ArrowDownBold />
+              <ArrowDownBold/>
             </el-icon>
           </template>
           <template v-else>
             <el-icon style="color:grey">
-              <SemiSelect />
+              <SemiSelect/>
             </el-icon>
           </template>
         </el-col>
@@ -129,85 +129,91 @@
   </el-row>
 
   <el-row style="margin-top: 20px">
-      <el-card>
-        <el-row>
-          <el-col>
-            <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>
-          <div style="margin-top:5px;width:40vw">合计&nbsp;
-            永久金币 {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }}&nbsp;&nbsp;
-            免费金币 {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}&nbsp;&nbsp;
-            任务金币 {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}
-          </div>
-          <div @change="handleDatePickerChange" style="width:15vw">
-            <el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''">今日
-            </el-button>
-            <el-button @click="getWeek()" :type="activeTimeRange === 'week' ? 'primary' : ''">本周
-            </el-button>
-            <el-button @click="getMonth()" :type="activeTimeRange === 'month' ? 'primary' : ''">本月
-            </el-button>
-            <el-button @click="getYear()" :type="activeTimeRange === 'year' ? 'primary' : ''">本年
-            </el-button>
-          </div>
-          <div style="width:25vw">
-            <el-date-picker v-model="dateRange" type="datetimerange" range-separator="→" start-placeholder="开始时间"
-              end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" style="width:20vw"
-              value-format="YYYY-MM-DD HH:mm:ss" />
-            <el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button>
-          </div>
-        </el-row>
+    <el-card>
+      <el-row>
+        <el-col>
+          <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>
+        <div style="margin-top:5px;width:40vw">合计&nbsp;
+          永久金币 {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }}&nbsp;&nbsp;
+          免费金币 {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}&nbsp;&nbsp;
+          任务金币 {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}
+        </div>
+        <div @change="handleDatePickerChange" style="width:15vw">
+          <el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''">今日
+          </el-button>
+          <el-button @click="getWeek()" :type="activeTimeRange === 'week' ? 'primary' : ''">本周
+          </el-button>
+          <el-button @click="getMonth()" :type="activeTimeRange === 'month' ? 'primary' : ''">本月
+          </el-button>
+          <el-button @click="getYear()" :type="activeTimeRange === 'year' ? 'primary' : ''">本年
+          </el-button>
+        </div>
+        <div style="width:25vw">
+          <el-date-picker v-model="dateRange" type="datetimerange" range-separator="→" start-placeholder="开始时间"
+                          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" style="width:20vw"
+                          value-format="YYYY-MM-DD HH:mm:ss"
+                          :default-time="defaultTime"
+          />
+          <el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button>
+        </div>
+      </el-row>
 
 
-        <el-row :gutter="20" style="margin-top: 20px">
-          <el-col :span="18">
-            <div class="bar">
-              <div ref="chartRef" 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="market" label="地区" align="center">
-                  <template #default="scope">
-                    <span>{{ marketMapping[scope.row.market] || scope.row.market }}</span>
-                  </template>
-                </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-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="18">
+          <div class="bar">
+            <div ref="chartRef" 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="market" label="地区" align="center">
+                <template #default="scope">
+                  <span>{{ marketMapping[scope.row.market] || scope.row.market }}</span>
+                </template>
+              </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-row>
 </template>
 
 <script setup>
 import * as echarts from 'echarts'
-import { ref, onMounted, nextTick, watch, onUnmounted } from 'vue'
+import {ref, onMounted, nextTick, watch, onUnmounted} from 'vue'
 import API from '@/util/http'
-import { ElMessage } from 'element-plus'
+import {ElMessage} from 'element-plus'
 import dayjs from 'dayjs';
 import utc from 'dayjs-plugin-utc'
 
 dayjs.extend(utc)
-import { ArrowUpBold, ArrowDownBold, SemiSelect } from '@element-plus/icons-vue'
-import { marketMapping } from "@/utils/marketMap.js";
+import {ArrowUpBold, ArrowDownBold, SemiSelect} from '@element-plus/icons-vue'
+import {marketMapping} from "@/utils/marketMap.js";
 
+const defaultTime = [
+  new Date(2000, 1, 1, 0, 0, 0),
+  new Date(2000, 2, 1, 23, 59, 59),
+]
 
 // 地区数据
 const markets = ref([])
@@ -308,7 +314,7 @@ const getToday = function () {
 // 本周
 const getWeek = function () {
   const today = dayjs()
-  const startTime = (today.startOf('week').add(1, 'day')).format('YYYY-MM-DD HH:mm:ss')
+  const startTime = (today.startOf('week').format('YYYY-MM-DD HH:mm:ss'))
   const endTime = today.endOf('week').format('YYYY-MM-DD HH:mm:ss')
   // const endTime = today.add(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
   dateRange.value = [startTime, endTime]
@@ -605,7 +611,7 @@ const updateChart = (chartData) => {
           type: 'bar',
           stack: 'recharge',
           data: chartData.rechargePermanent,
-          itemStyle: { color: '#5470c6' },
+          itemStyle: {color: '#5470c6'},
           barWidth: 30
         },
         {
@@ -613,7 +619,7 @@ const updateChart = (chartData) => {
           type: 'bar',
           stack: 'recharge',
           data: chartData.rechargeFree,
-          itemStyle: { color: '#91cc75' },
+          itemStyle: {color: '#91cc75'},
           barWidth: 30
         },
         {
@@ -621,7 +627,7 @@ const updateChart = (chartData) => {
           type: 'bar',
           stack: 'recharge',
           data: chartData.rechargeTask,
-          itemStyle: { color: '#fac858' },
+          itemStyle: {color: '#fac858'},
           barWidth: 30
         }
       ]
@@ -633,7 +639,7 @@ const updateChart = (chartData) => {
           type: 'bar',
           stack: 'consume',
           data: chartData.consumePermanent,
-          itemStyle: { color: '#5470c6' },
+          itemStyle: {color: '#5470c6'},
           barWidth: 30
         },
         {
@@ -641,7 +647,7 @@ const updateChart = (chartData) => {
           type: 'bar',
           stack: 'consume',
           data: chartData.consumeFree,
-          itemStyle: { color: '#91cc75' },
+          itemStyle: {color: '#91cc75'},
           barWidth: 30
         },
         {
@@ -649,7 +655,7 @@ const updateChart = (chartData) => {
           type: 'bar',
           stack: 'consume',
           data: chartData.consumeTask,
-          itemStyle: { color: '#fac858' },
+          itemStyle: {color: '#fac858'},
           barWidth: 30
         }
       ]
@@ -730,7 +736,7 @@ const handleTabChange = () => {
 
 const getAdminData = async function () {
   try {
-    const result = await API({ url: '/admin/userinfo', data: {} })
+    const result = await API({url: '/admin/userinfo', data: {}})
     adminData.value = result
     console.log('用户信息', adminData.value)
   } catch (error) {
@@ -740,7 +746,7 @@ const getAdminData = async function () {
 // 获取卡片数据
 const getCardData = async () => {
   try {
-    const response = await API({ url: '/workbench/getCard', data: {} })
+    const response = await API({url: '/workbench/getCard', data: {}})
     workDataUpdateTime.value = response.updateTime
     // 周同比
     sumWow.value = response.sumWow.toFixed(2)