重做了客户金币明细的导出excel

gold-system/package-lock.json

@@ -4093,9 +4093,8 @@
     },
     "node_modules/moment": {
       "version": "2.30.1",
-      "resolved": "https://mirrors.huaweicloud.com/repository/npm/moment/-/moment-2.30.1.tgz",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
       "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
-      "license": "MIT",
       "engines": {
         "node": "*"
       }
@@ -4987,9 +4986,8 @@
     },
     "node_modules/xlsx": {
       "version": "0.18.5",
-      "resolved": "https://mirrors.huaweicloud.com/repository/npm/xlsx/-/xlsx-0.18.5.tgz",
+      "resolved": "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz",
       "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
-      "license": "Apache-2.0",
       "dependencies": {
         "adler-32": "~1.3.0",
         "cfb": "~1.2.1",

gold-system/src/views/usergold/index.vue

@@ -1,15 +1,14 @@
+
 <script setup>
-// 这是客户金币明细页面
-import { ref, onMounted, reactive, computed } from 'vue'
-import ElementPlus from 'element-plus'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref, onMounted, computed ,nextTick} from 'vue'
+
+import { ElMessage } from 'element-plus'
 import axios from 'axios'
 import moment from 'moment'
-import { ta } from 'element-plus/es/locales.mjs'
 import API from '@/util/http'
 import { writeFile, utils } from 'xlsx'
+
 // 变量
-//这是获取用户信息的接口
 const adminData = ref({})
 const getAdminData = async function () {
   try {
@@ -25,12 +24,10 @@ const getAdminData = async function () {
     console.log('请求失败', error)
   }
 }
-//获取地区接口
 
 // 定义加载状态
 const isLoadingArea = ref(false);
-
-// 获取地区数据的函数
+const area = ref([])
 const getArea = async () => {
   isLoadingArea.value = true;
   try {
@@ -55,8 +52,6 @@ const getArea = async () => {
 
 // 充值明细表格
 const tableData = ref([])
-// 计算用户各金币总数的不分页对象
-// const tableAllData = ref([]);
 // 各金币总数
 const rechargeCoin = ref(0)
 const freeCoin = ref(0)
@@ -68,17 +63,13 @@ const total = ref(100)
 const getTime = ref([])
 // 搜索detailY
 const detailY = ref({})
-// 不分页的搜索对象
-const getAllObj = ref({})
 // 搜索对象
 const getObj = ref({
   pageNum: 1,
   pageSize: 50
 })
-//开启条件筛选导出excel
+// 开启条件筛选导出excel
 const getPutEX = ref(false)
-// 地区
-const area = ref([])
 
 // 支付方式选项
 const num = [
@@ -92,10 +83,6 @@ const num = [
   }
 ]
 
-// //表格高度
-// const tableHeight = computed(function () {
-//   return (getObj.value.pageSize + 2) * 38 + "px";
-// });
 
 // 方法
 // 搜索===========================================================================
@@ -112,12 +99,9 @@ const get = async function (val) {
     if (typeof val === 'number') {
       getObj.value.pageNum = val
     }
-    // 搜索参数时间赋值
-    if (getTime.value != null) {
-      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
-        detailY.value.startDate = getTime.value[0]
-        detailY.value.endDate = getTime.value[1]
-      }
+    if (getTime.value.length === 2) {
+      detailY.value.startDate = getTime.value[0]
+      detailY.value.endDate = getTime.value[1]
     } else {
       detailY.value.startDate = ''
       detailY.value.endDate = ''
@@ -132,154 +116,38 @@ const get = async function (val) {
       method: 'post',
       data: { ...getObj.value, detailY: { ...detailY.value } }
     })
-    // const result2 = await API.post("http://54.251.137.151:10702/detailY", {
-    //   ...getAllObj.value,
-    //   detailY: { ...detailY.value },
-    // });
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // console.log("请求成功2", result2);
-    // 存储表格数据
     tableData.value = result.data.list
-    console.log('tableData', tableData.value)
-    // tableAllData.value = result2.data;
-    // console.log("tableAllData", tableAllData.value);
-    // 存储分页总数
     total.value = result.data.total
-    console.log('total', total.value)
-    // 计算各金币总数并除以100
-    // 下列各数除以100，并最多显示两位小数
-    // rechargeCoin.value = parseFloat((tableAllData.value.sumR / 100).toFixed(2));
-    // freeCoin.value = parseFloat((tableAllData.value.sumF / 100).toFixed(2));
-    // taskCoin.value = parseFloat((tableAllData.value.sumT / 100).toFixed(2));
-    // for (let i = 0; i < tableAllData.value.length; i++) {
-    //   rechargeCoin.value += tableAllData.value[i].rechargeCoin;
-    //   freeCoin.value += tableAllData.value[i].freeCoin;
-    //   taskCoin.value += tableAllData.value[i].taskCoin;
-    // }
-    // console.log(
-    //   "各金币总数",
-    //   rechargeCoin.value,
-    //   freeCoin.value,
-    //   taskCoin.value
-    // );
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
-// 精网号去空格，同时处理 detailY 和 putExcel 中的 jwcode
+// 精网号去空格，处理 detailY 中的 jwcode
 const trimJwCode = () => {
   if (detailY.value.jwcode) {
     detailY.value.jwcode = detailY.value.jwcode.replace(/\s/g, ''); 
   }
-  if (putExcel.value.jwcode) {
-    putExcel.value.jwcode = putExcel.value.jwcode.replace(/\s/g, ''); 
-  }
 }
+
 // 搜索
 const search = function () {
   trimJwCode();
   getObj.value.pageNum = 1
   get()
 }
+
 // 重置
 const reset = function () {
-  // 删除精网号字段
   delete detailY.value.jwcode
-  // 删除更新类型字段
   delete detailY.value.num
-  // 删除开始时间字段
   delete detailY.value.startDate
-  // 删除结束时间字段
   delete detailY.value.endDate
-  // 删除所属地区字段
   delete detailY.value.area
   delete sortField.value
   delete sortOrder.value
-  getTime.value = {}
-  // 删除平台信息字段
+  getTime.value = []
   delete detailY.value.consumePlatform
 }
-// 今天
-const getToday = function () {
-  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)
-  get()
-}
-// 昨天
-const getYesterday = function () {
-  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)
-  get()
-}
-// 近7天
-const get7Days = function () {
-  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)
-  get()
-}
-
-// 验证跳转输入框的数字是否合法
-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: '请检查输入内容'
-      })
-    }
-  } else {
-    //提示
-    ElMessage({
-      type: 'error',
-      message: '请检查输入内容'
-    })
-  }
-}
 
 // 挂载
 onMounted(async function () {
@@ -288,76 +156,192 @@ onMounted(async function () {
   await get()
 })
 
-// 这是导出excel表格的方法
 // 导出Excel的方法
-// 定义字段映射
-const json_fields = (row) => {
-  return [
-    row.jwcode, // 姓名
-    row.area, // 精网号
-    row.platform, // 所属地区
-    row.consumePlatform, // 平台信息
-    row.gold, // 更新数量
-    row.rechargeCoin, // 免费金币
-    row.freeCoin, // 永久金币
-    row.taskCoin, // 任务金币
-    row.createAdmin, // 提交人
-    row.createTime,
-    row.name,
-    row.id
-  ]
-}
-
-// 定义元数据
-const json_meta = [
-  [
-    {
-      key: 'charset',
-      value: 'utf-8'
-    }
-  ]
-]
 const headers = [
+  '序号',
+  '姓名',
   '精网号',
-  '地区',
+  '所属地区',
   '平台信息',
-  '数量',
-  '数量更新类型',
+  '更新数量',
+  '更新类型',
   '永久金币',
   '免费金币',
   '任务金币',
   '提交人',
-  '更新时间',
-  '用户名',
-  'id'
+  '更新时间'
 ]
-const exportExcel = () => {
-  // 先将 json_fields 应用到数据上
-  const data = excelInfo.value.map(json_fields)
-  const ws = utils.aoa_to_sheet(data)
-  // 添加表头到工作表
-  utils.sheet_add_aoa(ws, [headers], { origin: 'A1' })
-  const wb = utils.book_new()
-  utils.book_append_sheet(wb, ws, 'Sheet1')
-  writeFile(wb, '客户金币明细.xlsx')
+
+const showExportInfoPanel = ref(false)
+
+// 点击导出按钮直接显示信息面板
+const exportExcel = async () => {
+  try {
+    console.log('点击导出按钮，尝试显示信息面板');
+    showExportInfoPanel.value = true;
+    await nextTick();//组件更新显示信息面板
+  } catch (error) {
+    console.error('显示信息面板失败:', error);
+    ElMessage.error('显示信息面板失败，请稍后重试');
+  }
+};
+
+// 新增导出状态相关变量
+const exportProgress = ref(0)
+const isExporting = ref(false)
+const exportCancelToken = ref(null)
+
+// 优化后的导出方法
+const doExportExcel = async () => {
+  try {
+    isExporting.value = true
+    exportProgress.value = 0
+    showExportInfoPanel.value = false
+
+    // 初始化Excel
+    const wb = utils.book_new()
+    const ws = utils.aoa_to_sheet([headers])
+    utils.book_append_sheet(wb, ws, 'Sheet1')
+
+    // 流式写入配置
+    const writer = {
+      write: (d, o) => {
+        if (!d) return
+        utils.sheet_add_aoa(ws, d, { origin: -1 })
+      }
+    }
+
+    let page = 1
+    let totalExported = 0
+    const pageSize = 5000 // 每次请求5000条
+    let totalRecords = 0
+
+    // 首次请求获取总记录数
+    const firstResult = await API({
+      url: '/detailY',
+      method: 'post',
+      data: { 
+        pageNum: 1,
+        pageSize,
+        detailY: { ...detailY.value }
+      }
+    })
+    totalRecords = firstResult.data.total
+
+    // 创建取消令牌
+    const CancelToken = axios.CancelToken
+    exportCancelToken.value = CancelToken.source()
+
+    // 平台信息映射
+    const platformMap = {
+      0: '初始化金币',
+      1: 'ERP系统',
+      2: 'Homily Chart',
+      3: 'Homily Link',
+      4: '金币系统'
+    };
+    // 更新类型映射
+    const updateTypeMap = {
+      0: '充值',
+      1: '消费',
+      2: '退款',
+      3: '其他'
+    };
+
+    // 处理首次请求的数据
+    const firstData = firstResult.data.list
+    if (firstData.length) {
+      const rows = firstData.map((row, index) => [
+        totalExported + index + 1,
+        row.username || '',
+        row.jwcode || '',
+        row.area || '',
+        platformMap[row.consumePlatform] || '',
+        (row.gold).toFixed(2) || '0.00',
+        updateTypeMap[row.updateType] || '',
+        (row.rechargeCoin / 100).toFixed(2) || '0.00',
+        (row.freeCoin / 100).toFixed(2) || '0.00',
+        (row.taskCoin / 100).toFixed(2) || '0.00',
+        row.name || '',
+        moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') || ''
+      ])
+      writer.write(rows)
+      totalExported += firstData.length
+      exportProgress.value = Math.round((totalExported / totalRecords) * 100)
+      page++
+    }
+
+    while (totalExported < totalRecords) {
+      const result = await API({
+        url: '/detailY',
+        method: 'post',
+        data: { 
+          pageNum: page,
+          pageSize,
+          detailY: { ...detailY.value }
+        },
+        cancelToken: exportCancelToken.value.token
+      })
+
+      const data = result.data.list
+      if (!data.length) break
+
+      // 转换数据
+      const rows = data.map((row, index) => [
+        totalExported + index + 1,
+        row.username || '',
+        row.jwcode || '',
+        row.area || '',
+        platformMap[row.consumePlatform] || '',
+        (row.gold / 100).toFixed(2) || '0.00',
+        updateTypeMap[row.updateType] || '',
+        (row.rechargeCoin / 100).toFixed(2) || '0.00',
+        (row.freeCoin / 100).toFixed(2) || '0.00',
+        (row.taskCoin / 100).toFixed(2) || '0.00',
+        row.name || '',
+        moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') || ''
+      ])
+
+      // 流式写入
+      writer.write(rows)
+      totalExported += data.length
+      exportProgress.value = Math.round((totalExported / totalRecords) * 100)
+
+      // 内存控制：每500页释放内存
+      if (page % 500 === 0) {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      }
+
+      page++
+    }
+
+    // 生成最终文件
+    writeFile(wb, '客户金币明细.xlsx')
+    ElMessage.success(`导出成功，共${totalExported}条数据`)
+  } catch (error) {
+    if (!axios.isCancel(error)) {
+      ElMessage.error(`导出失败: ${error.message}`)
+    }
+  } finally {
+    isExporting.value = false
+    exportCancelToken.value = null
+  }
 }
-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
-)
+
+// 新增取消导出方法
+const cancelExport = () => {
+  if (exportCancelToken.value) {
+    exportCancelToken.value.cancel('用户取消导出')
+    ElMessage.warning('导出已取消')
+    isExporting.value = false
+  }
+}
+
 const putExcel = ref({
-  startDate: startDate,
-  endDate: endDate
+  startDate: new Date(),
+  endDate: new Date(new Date().setDate(new Date().getDate() + 1))
 })
-const excelInfo = ref({})
-const loading = ref(false)
+
 // 新增校验精网号的方法
 const checkJwCode = async (jwcode) => {
   try {
@@ -377,89 +361,12 @@ const checkJwCode = async (jwcode) => {
   }
 }
 
-
-const areyour = async function () {
-  trimJwCode();
-  // 检查精网号是否存在
-  if (putExcel.value.jwcode) {
-    const isJwCodeValid = await checkJwCode(putExcel.value.jwcode)
-    if (!isJwCodeValid) {
-      ElMessage.error('该精网号不存在/无记录')
-      return
-    }
-  }
-  try {
-    loading.value = true
-    const result = await API({
-      url: '/detailY/searchAll',
-      method: 'post',
-      data: { ...putExcel.value }
-    })
-    excelInfo.value = result.data
-
-    // 处理 excelInfo 中的数据
-    if (Array.isArray(excelInfo.value)) {
-      excelInfo.value.forEach((item) => {
-        if (item.rechargeCoin) {
-          item.rechargeCoin = item.rechargeCoin / 100
-        }
-        if (item.freeCoin) {
-          item.freeCoin = item.freeCoin / 100
-        }
-        if (item.taskCoin) {
-          item.taskCoin = item.taskCoin / 100
-        }
-      })
-    }
-
-    areyouright.value = true
-    ElMessage({
-      type: 'success',
-      message: '查询成功'
-    })
-    loading.value = false
-  } catch (error) {
-    console.log('请求失败', error)
-    loading.value = false
-  }
-}
-
-const areyouright = ref(false)
-
-// //选地区
-// const area = [
-//   {
-//     value: '马来西亚',
-//     label: '马来西亚'
-//   },
-//   {
-//     value: '新加坡',
-//     label: '新加坡'
-//   },
-//   {
-//     value: '香港',
-//     label: '香港'
-//   },
-//   {
-//     value: '泰国',
-//     label: '泰国'
-//   },
-//   {
-//     value: '加拿大',
-//     label: '加拿大'
-//   },
-//   {
-//     value: '越南HCM',
-//     label: '越南HCM'
-//   }
-// ]
-//选消费平台
+// 选消费平台
 const platform = [
   {
     value: '4',
     label: '金币系统'
   },
-
   {
     value: '1',
     label: 'ERP系统'
@@ -477,84 +384,12 @@ const platform = [
     label: '初始化金币'
   }
 ]
-const TimeGet = ref('1')
-
-// 今天
-const getT = function () {
-  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
-  )
-  putExcel.value.startDate = startDate
-  putExcel.value.endDate = endDate
-  console.log('putExcel', putExcel.value)
-}
-//3天
-const get3 = function () {
-  const today = new Date()
-  const startDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() - 2
-  )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
-  )
-  putExcel.value.startDate = startDate
-  putExcel.value.endDate = endDate
-  console.log('putExcel', putExcel.value)
-}
-// 7天
-const get7 = function () {
-  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
-  )
-  putExcel.value.startDate = startDate
-  putExcel.value.endDate = endDate
-  console.log('putExcel', putExcel.value)
-}
-// 30天
-const get30 = function () {
-  const today = new Date()
-  const startDate = new Date(
-    today.getFullYear(),
-    today.getMonth() - 1,
-    today.getDate()
-  )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
-  )
-  putExcel.value.startDate = startDate
-  putExcel.value.endDate = endDate
-  console.log('putExcel', putExcel.value)
-}
 
 // 新增排序字段和排序方式
 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') {
@@ -568,11 +403,14 @@ const handleSortChange = (column) => {
   }
   sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
 }
+
 get()
+
 const handlePageSizeChange = function (val) {
   getObj.value.pageSize = val
   get()
 }
+
 const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
   get()
@@ -580,73 +418,59 @@ const handleCurrentChange = function (val) {
 </script>
 
 <template>
+  <!-- 导出excel提前展示的信息面板 -->
   <el-dialog
-    v-model="areyouright"
-    title=""
-    width="500"
+    v-model="showExportInfoPanel"
+    title="导出信息确认"
+    width="400px"
     :close-on-click-modal="false"
   >
-    <el-button type="success" @click="exportExcel()">导出</el-button>
+    <div class="info-panel-header">导出信息</div>
+    <div>你正在导出以下数据</div>
+    <!-- 直接使用 detailY 显示信息，添加可选链操作符 -->
+    <!-- detailY是一个ref，所以在模板中应该直接使用detailY.consumePlatform，
+     而不是detailY.value.consumePlatform。
+     因为在模板中，ref变量会自动解包，不需要.value。
+     例如，在代码中，用户可能错误地在模板中使用了detailY.value，但实际上应该直接使用detailY。 -->
+    <div v-if="detailY.jwcode">精网号：{{ detailY.jwcode || '' }}</div>
+    <div v-if="detailY.consumePlatform">平台信息：{{ detailY.consumePlatform ? (platform.find(item => item.value === detailY.consumePlatform)?.label) : '' }}</div>
+    <div v-if="detailY.num">数量更新类型：{{ detailY.num ? (num.find(item => item.value === detailY.num)?.label || '') : '' }}</div>
+    <div v-if="detailY.area">所属地区：{{ detailY.area || '' }}</div>
+    <div v-if="Array.isArray(getTime) && getTime.length >= 2">
+      <span>更新时间：</span>
+      <!-- 直接使用 getTime 而非 getTime.value -->
+      <span v-if="Array.isArray(getTime) && getTime.length >= 2">
+        {{ moment(getTime[0]).format('YYYY-MM-DD') }} 至 {{ moment(getTime[1]).format('YYYY-MM-DD') }}
+      </span>
+      <span v-else></span>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="showExportInfoPanel = false">取消</el-button>
+        <el-button type="primary" @click="doExportExcel">导出</el-button>
+      </span>
+    </template>
   </el-dialog>
 
-  <!-- 这是导出excel的弹窗 -->
+  <!-- 导出进度弹窗 -->
   <el-dialog
-    v-model="getPutEX"
-    title="请选择导出条件"
-    width="500"
+    v-model="isExporting"
+    title="正在导出"
+    width="400px"
     :close-on-click-modal="false"
+    :show-close="false"
   >
+    <el-progress 
+      :percentage="exportProgress" 
+      :stroke-width="15"
+      striped
+      animated
+    />
+    <div class="export-status">
+      已导出 {{ Math.round((exportProgress / 100) * total) }} 条 / 共 {{ total }} 条
+    </div>
     <template #footer>
-      <el-form
-        v-loading="loading"
-        ref="ruleFormRef"
-        style="max-width: 600px"
-        :model="putExcel"
-        :rules="rules"
-        label-width="auto"
-        class="demo-ruleForm"
-        :size="formSize"
-        status-icon
-      >
-        <el-form-item prop="activityName" label="精网号:">
-          <el-input
-            v-model="putExcel.jwcode"
-            placeholder="请输入精网号"
-            style="width: 220px"
-          />
-        </el-form-item>
-        <el-form-item label="所属地区："
-          ><el-select
-            v-model="putExcel.area"
-            placeholder="请选择所属地区"
-            style="width: 240px"
-            clearable
-          >
-            <el-option
-              v-for="item in area"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="更新时间：">
-          <el-radio-group v-model="TimeGet">
-            <el-radio value="1" @click="getT()">今天</el-radio>
-            <el-radio value="3" @click="get3()">近三天</el-radio>
-            <el-radio value="7" @click="get7()">近一周</el-radio>
-            <el-radio value="30" @click="get30()">近一个月</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-button
-          type="primary"
-          size="small"
-          style="margin-left: 10px"
-          @click="areyour()"
-          >确定</el-button
-        >
-      </el-form>
+      <el-button type="danger" @click="cancelExport">取消导出</el-button>
     </template>
   </el-dialog>
 
@@ -717,7 +541,6 @@ const handleCurrentChange = function (val) {
                   :label="item.label || item"
                   :value="item.value || item"
                 />
-                
               </el-select>
             </div>
           </el-col>
@@ -733,9 +556,7 @@ const handleCurrentChange = function (val) {
             end-placeholder="结束时间"
             style="margin-right: 700px"
           />
-          <el-button type="success" @click="getPutEX = true"
-            >导出Excel表格</el-button
-          >
+          <el-button type="success" @click="exportExcel">导出Excel表格</el-button>
           <el-button type="success" @click="reset()">重置</el-button>
           <el-button type="primary" @click="search()">查询</el-button>
         </div>
@@ -745,12 +566,6 @@ const handleCurrentChange = function (val) {
   <el-row>
     <el-col>
       <el-card>
-        <!-- <div>
-          现有金币：永久金币：{{ Math.abs(rechargeCoin) }}，免费金币：{{
-            Math.abs(freeCoin)
-          }}，任务金币：{{ Math.abs(taskCoin) }}
-        </div> -->
-        <!-- 设置表格容器的高度和滚动样式 -->
         <div style="height: 584px; overflow-y: auto">
           <el-table
             :data="tableData"
@@ -801,7 +616,7 @@ const handleCurrentChange = function (val) {
               prop="gold"
               label="更新数量"
               width="120"
-              sortable="“custom”"
+              sortable="custom"
             >
               <template #default="scope">
                 <span>{{ scope.row.gold / 100 }}</span>
@@ -810,23 +625,15 @@ const handleCurrentChange = function (val) {
             <el-table-column prop="updateType" label="更新类型" width="110">
               <!-- 模板内容 -->
               <template #default="scope">
-                <span v-if="scope.row.updateType == 1">
-                  <span>消费</span>
-                </span>
-                <span v-if="scope.row.updateType == 0">
-                  <span>充值</span>
-                </span>
-                <span v-if="scope.row.updateType == 2">
-                  <span>退款</span>
-                </span>
-                <span v-if="scope.row.updateType == 3">
-                  <span>其他</span>
-                </span>
+                <span v-if="scope.row.updateType == 1">消费</span>
+                <span v-if="scope.row.updateType == 0">充值</span>
+                <span v-if="scope.row.updateType == 2">退款</span>
+                <span v-if="scope.row.updateType == 3">其他</span>
               </template>
             </el-table-column>
             <el-table-column
               prop="rechargeCoin"
-              sortable="“custom”"
+              sortable="custom"
               label="永久金币"
               width="110"
             >
@@ -836,7 +643,7 @@ const handleCurrentChange = function (val) {
             </el-table-column>
             <el-table-column
               prop="freeCoin"
-              sortable="“custom”"
+              sortable="custom"
               label="免费金币"
               width="110"
             >
@@ -844,10 +651,9 @@ const handleCurrentChange = function (val) {
                 <span>{{ scope.row.freeCoin / 100 }}</span>
               </template>
             </el-table-column>
-
             <el-table-column
               prop="taskCoin"
-              sortable="“custom”"
+              sortable="custom"
               label="任务金币"
               width="110"
             >
@@ -858,7 +664,7 @@ const handleCurrentChange = function (val) {
             <el-table-column prop="name" label="提交人" width="110" />
             <el-table-column
               prop="createTime"
-              sortable="“custom”"
+              sortable="custom"
               label="更新时间"
               width="210"
               show-overflow-tooltip
@@ -873,7 +679,6 @@ const handleCurrentChange = function (val) {
         </div>
 
         <!-- 分页 -->
-        <!-- 分页 -->
         <div class="pagination" style="margin-top: 20px">
           <el-pagination
             background
@@ -903,11 +708,24 @@ const handleCurrentChange = function (val) {
   display: flex;
 }
 
-/* .head-card-element {
-  margin-right: 20px;
-} */
+.info-panel-header {
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.export-status {
+  margin-top: 15px;
+  text-align: center;
+  color: #666;
+}
+
+.el-progress-bar__inner {
+  transition: width 0.5s ease;
+}
 
-/* .head-card-btn {
-  margin-left: auto;
-} */
 </style>