refactor(CustomTable相关组件、StatisticText组件): 更新表格组件数据获取逻辑;更新StatisticText组件数据加载效果逻辑;修复CustomDialog、CustomForm组件emits事件错误

StatisticText组件:新增加载效果，更改dataState初始状态为true

KeepView组件:简化getTableData函数

PlayerManageView:引入HeaderCard组件，将分平台查询功能转到HeaderCard组件上，不再使用表格查询

CustomTable组件：
    -移动部分函数至useTable.ts文件
    -loadTableData、getData函数拆分为getData、setData、updateTableData函数，区分函数功能，明确流程
     原getData均更改为使用updateTableData
    -更新所有需要使用throttleResetQuery函数的watch函数
     均加入判断是否开启了分页表单查询，没有开启则只会重新请求数据

取消CustomForm的subForm事件，转为直接返回formData

CustomDialog现在不再接受CustomForm的subForm事件，而是直接在submitGameChange函数中抛出formSubmit事件及相关数据

src/components/common/CustomDialog.vue

@@ -1,16 +1,8 @@
 <!--
  * @Author: fxs bjnsfxs@163.com
- * @Date: 2024-09-18
- * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-12-03
- * @Description: 
- * 
--->
-<!--
- * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-09-04 11:21:05
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-10-14 16:57:09
+ * @LastEditTime: 2024-12-07
  * @FilePath: \Game-Backstage-Management-System\src\components\common\CustomDialog.vue
  * @Description: 
  * 
@@ -63,10 +55,12 @@ const dialogConfig = reactive({
 const submitGameChange = () => {
   dialogFormRef.value
     ?.submitFormData()
-    .then(() => {
+    .then((formData) => {
+      emits('formSubmit', formData, dialogConfig.type)
+    })
+    .finally(() => {
       dialogConfig.dialogVisible = false
     })
-    .catch(() => {})
 }
 
 // 表单关闭
@@ -95,11 +89,6 @@ const editForm = (row: any, updateURL?: string) => {
   })
 }
 
-onMounted(() => {
-  dialogConfig.title = dialogConfigInfo.title
-  addUrl.value = props.config.reqConfig.url // 保存一下新增的URL
-})
-
 /**
  * @description: 对字段进行加密
  * @param {*} fields  字段名
@@ -112,9 +101,10 @@ const encrypt = (fields: string, useFormField: boolean, encryptMsg: Array<string
   })
 }
 
-const subForm = (FormData: any) => {
-  emits('formSubmit', FormData, dialogConfig.type)
-}
+onMounted(() => {
+  dialogConfig.title = dialogConfigInfo.title
+  addUrl.value = props.config.reqConfig.url // 保存一下新增的URL
+})
 
 defineExpose({
   addForm,
@@ -135,7 +125,6 @@ defineExpose({
     >
       <Form
         :disabled="true"
-        @sub-form="subForm"
         ref="dialogFormRef"
         :config="{
           fieldsInfo: dialogConfigInfo.fieldsInfo,

src/components/dataAnalysis/StatisticText.vue

@@ -11,7 +11,8 @@ const { updateReqConfig } = useAnalysis()
 
 const props = defineProps<StaticDataInfo>()
 let dataList = reactive<Array<StaticField>>([])
-const dataState = ref(false) // 数据是否加载成功
+const dataState = ref(true) // 数据是否加载成功,开始的时候需要显示为true，否则会导致加载效果不生效
+const loading = ref(false) // 是否正在加载中
 
 /**
  * @description: 创建dataList数组
@@ -31,6 +32,7 @@ const createDataList = (fieldsInfo: Array<StaticField>, getValue: (item: StaticF
  */
 const getData = async () => {
   try {
+    loading.value = true
     let newDataList = []
     if (props.requestConfig) {
       let info = await axiosInstance.post(props.requestConfig.url, props.requestConfig.otherOptions)
@@ -55,6 +57,8 @@ const getData = async () => {
     dataState.value = false
     console.error(err)
     // throw new Error('数据获取失败')
+  } finally {
+    loading.value = false
   }
 }
 
@@ -87,7 +91,7 @@ onMounted(() => {
 
 <template>
   <div class="dataBox">
-    <div class="dataBody" v-if="dataState">
+    <div class="dataBody" v-if="dataState" v-loading="loading">
       <div class="dataItem" v-for="item in dataList" :key="item.name">
         <div class="header">
           <span :class="titleClass ? titleClass : 'dataTitle'">{{ item.cnName }}</span>

src/components/dataAnalysis/TemporalTrend.vue

@@ -106,7 +106,7 @@ const changeSelectShape = (type: number) => {
   selectShape.value = type
   if (type === 2) {
     nextTick(() => {
-      chartTable.value?.getData()
+      chartTable.value?.updateTableData()
     })
   }
 }

src/components/form/CustomForm.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: fxs bjnsfxs@163.com
+ * @Date: 2024-09-18
+ * @LastEditors: fxs bjnsfxs@163.com
+ * @LastEditTime: 2024-12-07
+ * @Description: 
+ * 
+-->
 <script setup lang="ts">
 import type { FormInstance } from 'element-plus'
 import type { FormConfig } from '@/types/form'
@@ -46,8 +54,7 @@ const submitFormData = (otherOption?: any) => {
       if (valid) {
         submitForm(formRef.value, props.config.reqConfig.url, { ...formData, ...otherOption })
           .then(() => {
-            emits('subForm', JSON.parse(JSON.stringify(formData)))
-            resolve(true)
+            resolve(formData)
           })
           .catch((err) => {
             reject(err)
@@ -129,8 +136,6 @@ const getFormData = () => {
   return JSON.parse(JSON.stringify(formData))
 }
 
-const emits = defineEmits(['subForm'])
-
 defineExpose({
   submitFormData,
   resetForm,

src/components/form/FileUpload.vue

@@ -1,5 +1,13 @@
+<!--
+ * @Author: fxs bjnsfxs@163.com
+ * @Date: 2024-09-18
+ * @LastEditors: fxs bjnsfxs@163.com
+ * @LastEditTime: 2024-12-07
+ * @Description: 
+ * 
+-->
 <script setup lang="ts">
-import type { UploadInstance, UploadRawFile } from 'element-plus'
+import type { UploadInstance, UploadRawFile, UploadUserFile } from 'element-plus'
 
 import { reactive, ref } from 'vue'
 import { ElMessage, genFileId } from 'element-plus'
@@ -77,7 +85,7 @@ const confirmUpload = () => {
  * @description:处理超出文件数量限制后的方法，这里是直接覆盖掉
  * @param {*} files 上传的文件
  */
-const handleExceed = (files: UploadRawFile[]) => {
+const handleExceed = (files: File[], _uploadFiles: UploadUserFile[]) => {
   uploadRef.value!.clearFiles()
   const file = files[0] as UploadRawFile
   file.uid = genFileId()

src/components/table/CustomTable.vue

@@ -2,21 +2,20 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 18:16:18
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-12-04
+ * @LastEditTime: 2024-12-07
  * @Description: 
  * 
 -->
 <script setup lang="ts">
-import type { PropsParams, TableFieldInfo, TablePaginationSetting } from '@/types/table.ts'
+import type { PropsParams, TablePaginationSetting } from '@/types/table.ts'
 import type { ReqConfig } from '@/types/dataAnalysis.ts'
 import { FieldSpecialEffectType } from '@/types/tableText.ts'
 
-import { fuzzySearch, generateRandomFileName, throttleFunc } from '@/utils/common'
+import { fuzzySearch, throttleFunc } from '@/utils/common'
 
 import { useTable } from '@/hooks/useTable.ts'
 import { useRequest } from '@/hooks/useRequest.ts'
 import { computed, type ComputedRef, onMounted, reactive, ref, toRaw, watch } from 'vue'
-import { downLoadData } from '@/utils/table/table'
 
 import TableFilterForm from '@/components/table/TableFilterForm/TableFilterForm.vue'
 import axiosInstance from '@/utils/axios/axiosInstance.ts'
@@ -51,9 +50,6 @@ const loading = ref(false)
 // 表格数据
 const tableData: Array<any> = reactive([])
 
-// 备份表格数据，用于在不分页查询的时候，恢复数据
-const backupTableData: Array<any> = []
-
 // 查询表单的数据
 const queryFormData = reactive<{ [key: string]: any }>({})
 
@@ -72,219 +68,141 @@ const reqConfig = reactive<ReqConfig>({
 })
 
 // 一些公用方法
-const { getTableData, setTableData } = useTable(tableData, paginationConfig)
+const {
+  getTableData,
+  setTableData,
+  computedRowIndex,
+  handleCurrentChange,
+  handleSizeChange,
+  insertAverageRow,
+  getDecimalFromRange,
+  resetTableData,
+  initPageConfig,
+  initReqConfig,
+  createRowKey,
+  downLoadTable
+} = useTable(tableData, paginationConfig, props.tableFieldsInfo)
 
 /**
  * 本地使用的数据，只有在使用外部数据的情况下使用
  */
 let localTableData: ComputedRef | [] = []
 if (!props.openRemoteReqData && props.dataList) {
-  localTableData = computed<Array<any>>(() => {
-    let curPage = paginationConfig.currentPage
-    let limit = paginationConfig.limit
-    let begin = curPage * limit - limit
-    let end = curPage * limit
-    console.log(tableData)
-    return tableData.slice(begin, end)
-  })
-}
-
-/**
- * 开启行号功能后，计算行号
- * @param index 当前行索引
- */
-const computedRowIndex = (index: number) => {
-  return (paginationConfig.currentPage - 1) * paginationConfig.limit + index + 1
-}
-
-/**
- * @description: 改变页码
- * @param val
- */
-const handleCurrentChange = (val: number) => {
-  paginationConfig.currentPage = val
-}
-
-/**
- * @description 改变每页大小
- * @param val
- */
-const handleSizeChange = (val: number) => {
-  paginationConfig.limit = val
+  if (Array.isArray(props.dataList)) {
+    localTableData = computed<Array<any>>(() => {
+      let curPage = paginationConfig.currentPage
+      let limit = paginationConfig.limit
+      let begin = curPage * limit - limit
+      let end = curPage * limit
+
+      return tableData.slice(begin, end)
+    })
+  }
 }
 
 /**
- * @description 加载表格数据
+ * 获取表格数据
+ * @returns [表格数据,数据总数]
  */
-// const loadTableData = async (): Promise<boolean> => {
-//   try {
-//     // if (!props.openRemoteReqData) {
-//     //   if (props.dataList) {
-//     //     tableData.splice(0, tableData.length, ...props.dataList)
-//     //     if (props.paginationConfig) {
-//     //       paginationConfig.total = props.paginationConfig.total
-//     //     }
-//     //     return true
-//     //   } else {
-//     //     console.error('请传入dataList，没有数据源！')
-//     //     return false
-//     //   }
-//     // }
-//
-//     // 如果是直接传入的数据
-//     if (props.dataList) {
-//       tableData.splice(0, tableData.length, ...props.dataList)
-//       if (props.paginationConfig) {
-//         paginationConfig.total = props.paginationConfig.total
-//       }
-//       return true
-//     }
-//
-//     // 如果需要表格自己请求数据的
-//     if (props.requestConfig) {
-//       if (props.openRemoteQuery) {
-//         reqConfig.otherOptions.offset = (paginationConfig.currentPage - 1) * paginationConfig.limit
-//         reqConfig.otherOptions.limit = paginationConfig.limit
-//       }
-//
-//       await getTableData(reqConfig.url, reqConfig.otherOptions, props.openRemoteQuery)
-//       backupTableData.splice(0, backupTableData.length, ...tableData)
-//       return true
-//     }
-//
-//     // 如果 dataList 和 requestConfig 都没有传入，返回 false
-//     console.warn('Both dataList and requestConfig are undefined. Returning early.')
-//     return false
-//   } catch (err) {
-//     console.error('Error while loading table data:', err)
-//     return false // 确保返回 false 表示失败
-//   }
-// }
-
-const loadTableData = async (): Promise<boolean> => {
+const getData = async (): Promise<[Array<any>, number]> => {
   try {
     // 使用传入数据源
     // 如果使用前端查询，则需要传入dataList作为数据源
     if (!props.openRemoteReqData) {
       if (props.dataList) {
-        const backList = JSON.parse(JSON.stringify(props.dataList))
-        tableData.splice(0, tableData.length, ...backList)
-        backupTableData.splice(0, tableData.length, ...backList)
-        console.log('执行1')
-        if (props.paginationConfig) {
-          paginationConfig.total = backList.length
-        }
-        return true
+        return [JSON.parse(JSON.stringify(props.dataList)), 0]
       } else {
         console.error('请传入dataList，没有数据源！')
-        return false
+        return [[], 0]
       }
-    }
-
-    // 如果需要表格自己请求数据的
-    // 必须要传入requestConfig
-    if (props.requestConfig) {
-      // 当使用远程请求数据源的时候，默认使用远程查询
-      reqConfig.otherOptions.offset = (paginationConfig.currentPage - 1) * paginationConfig.limit
-      reqConfig.otherOptions.limit = paginationConfig.limit
-      const [tableData, total] = await getTableData(reqConfig.url, reqConfig.otherOptions)
-      setTableData(tableData, total, props.openPageQuery)
-      backupTableData.splice(0, backupTableData.length, ...tableData)
-      return true
     } else {
-      console.error('缺少请求配置')
-      return false
+      // 如果需要表格自己请求数据的
+      // 必须要传入requestConfig
+      if (props.requestConfig) {
+        // 当使用远程请求数据源的时候，默认使用远程查询
+        reqConfig.otherOptions.offset = (paginationConfig.currentPage - 1) * paginationConfig.limit
+        reqConfig.otherOptions.limit = paginationConfig.limit
+        return await getTableData(reqConfig.url, reqConfig.otherOptions)
+      } else {
+        console.error('缺少请求配置')
+        return [[], 0]
+      }
     }
   } catch (err) {
-    console.error('Error while loading table data:', err)
-    return false // 确保返回 false 表示失败
+    console.error('请求错误:', err)
+    return [[], 0] // 确保返回 false 表示失败
+  }
+}
+
+/**
+ * 将获取的数据赋值给tableData，同时设置分页数据的总数
+ * @param tableList 表格数据
+ * @param total 数据总数
+ * @returns 设置是否成功
+ */
+const setData = (tableList: Array<any>, total: number): boolean => {
+  try {
+    setTableData(tableList, total, props.openPageQuery, props.openRemoteReqData)
+    insertAverageRow(props.needAverage, props.openRemoteReqData)
+    return true
+  } catch (err) {
+    console.error(err)
+    return false
   }
 }
 
 /**
- * @description: 获取数据，如果没有直接传入数据，则去请求数据，有则直接用
+ * 更新表格数据
+ * @returns 设置是否成功
  */
-const getData = async () => {
+const updateTableData = async (): Promise<boolean> => {
   try {
     loading.value = true
-    // 等待数据加载完成
-    const loadResult = await loadTableData()
-    if (!loadResult) {
-      ElMessage.error('获取表格数据失败')
-      return false
-    }
-    // 如果需要平均值字段，则需要在表格头部插入一行计算平均值
-    if (props.needAverage) {
-      let rowData: any = {}
-      let oldList: Array<any> = JSON.parse(JSON.stringify(tableData))
-      Object.values(props.tableFieldsInfo).map((item: TableFieldInfo, index: number) => {
-        let sum = oldList
-          .map((item) => item.count)
-          .reduce((accumulator, currentValue) => accumulator + currentValue, 0)
-        let averageList = oldList.map((val) => val[item.name]).filter((item) => item !== undefined)
-        if (index === 0) rowData[item.name] = '均值'
-        else if (item.name === 'count') rowData[item.name] = sum
-        else {
-          let num =
-            averageList.reduce((accumulator, currentValue) => accumulator + currentValue, 0) /
-            averageList.length
-
-          rowData[item.name] = isNaN(num) ? 0 : num.toFixed(2)
-        }
-      })
-      insertRow(0, rowData)
-    }
+    let [tableList, total] = await getData()
+    setData(tableList, total)
     return true
   } catch (err) {
     console.log(err)
     return false
   } finally {
-    loading.value = false // 确保 loading 状态被正确重置
+    loading.value = false
   }
 }
 
 // 包装一下获取数据
-const throttleGetData = throttleFunc(getData, 1000)
-
-/**
- * 清空表格数据
- */
-const resetTableData = () => {
-  tableData.splice(0, tableData.length)
-}
+const throttleGetData = throttleFunc(updateTableData, 1000)
 
 /**
  * @description 按条件查询，如果开启了分页查询，那么会直接重新查询数据，否则，会根据现有数据进行查询
  */
 const queryTableData = () => {
   if (props.openRemoteQuery && props.openRemoteReqData && props.requestConfig) {
-    reqConfig.otherOptions = { ...props.requestConfig.otherOptions, ...queryFormData }
+    reqConfig.otherOptions = { ...reqConfig.otherOptions, ...queryFormData }
     // 需要在查询前清除掉目前的数据，不然会导致之前缓存的数据混入
     //  比如第一页已经缓存了，在第二页重新查询，在切回第一页，还是显示查询前的数据，因为缓存没被清除
     tableData.splice(0, tableData.length)
-    getData()
+    updateTableData()
   } else {
     let filteredTable: any[]
     // 过滤出来所有符合formData数据的条件
-    filteredTable = backupTableData.filter((item) => {
-      let state = true
-      console.log('aa')
-      console.log(queryFormData)
-      console.log('bb')
-      for (let [k, v] of Object.entries(queryFormData)) {
-        // 模糊查询，看值是否跟表格中的数据匹配
-        if (!fuzzySearch(v, item[k])) {
-          state = false
-          break
+    if (props.dataList) {
+      filteredTable = props.dataList.filter((item) => {
+        let state = true
+        for (let [k, v] of Object.entries(queryFormData)) {
+          // 模糊查询，看值是否跟表格中的数据匹配
+          if (!fuzzySearch(v, item[k])) {
+            state = false
+            break
+          }
         }
-      }
-      return state
-    })
-
-    paginationConfig.total = filteredTable.length
-
-    tableData.splice(0, tableData.length, ...filteredTable)
-    // console.log(JSON.parse(JSON.stringify(tableData)))
+        return state
+      })
+      console.log(filteredTable.length)
+      paginationConfig.total = filteredTable.length
+      tableData.splice(0, tableData.length, ...filteredTable)
+    } else {
+      console.error('没有数据源')
+    }
   }
 }
 
@@ -292,30 +210,6 @@ const queryTableData = () => {
 const throttleQueryTableData = throttleFunc(queryTableData, throttleTime)
 
 /**
- * @description: 在获取完数据后，插入均值行
- * @param  start 插入的位置
- * @param  rowData 插入的数据
- */
-const insertRow = (start: number, rowData: any) => {
-  if (props.openRemoteReqData) {
-    tableData[start].splice(0, 0, rowData)
-  } else {
-    tableData.splice(start, 0, rowData)
-  }
-}
-
-/**
- * @description: 根据计算出来的值去返回对应的颜色深度
- */
-const getDecimalFromRange = (number: number) => {
-  if (!number) return 0
-  if (number < 25) return 0.25
-  else if (number < 50) return 0.5
-  else if (number < 75) return 0.75
-  else return 1.0 // 如果number >= 75，则直接返回1.00
-}
-
-/**
  * @description: 单独处理拥有均值行的表格每个单元格的样式,均值字段均加粗，其他需要比较的字段根据自身百分比显示颜色
  *              其中使用row-style无效，scope会导致无法覆盖样式
  *               同时由于自定义了表格内容，哪里的样式会覆盖row的样式，所以只能单独对单元格设置
@@ -334,17 +228,18 @@ const tableCellStyle = (info: any) => {
 }
 
 /**
-
- * @description: 监听limit,currentPage的变化，改变后去重新请求数据
- * 如果是limit的变化，则需要把当前页置为1
-
+ * 监听limit的变化，改变后将页码置为1，同时去重新请求数据
  */
 const watchLimit = watch(
   () => paginationConfig.limit,
   (newLimit, oldLimit) => {
     if (newLimit !== oldLimit) {
       paginationConfig.currentPage = 1
-      filterFormRef.value?.throttleResetQuery()
+      if (props.openFilterQuery) {
+        filterFormRef.value?.throttleResetQuery()
+      } else {
+        throttleQueryTableData()
+      }
     }
   },
   { deep: true }
@@ -357,7 +252,7 @@ const watchCurPage = watch(
   () => paginationConfig.currentPage,
   (newPage, oldPage) => {
     if (newPage !== oldPage && !tableData[newPage]) {
-      getData()
+      updateTableData()
     }
   },
   {
@@ -371,71 +266,77 @@ if (!props.openPageQuery) {
   watchCurPage()
 }
 
-/**
- * @description: 监听gid的变化，重新请求数据
- * @return {*}
- */
-watch(
-  () => props.requestConfig?.otherOptions.gid,
-  (newGid, oldGid) => {
-    if (newGid != oldGid) {
-      filterFormRef.value?.resetFormData()
-      reqConfig.otherOptions.gid = newGid
-
-      getData()
-    }
-  },
-  { deep: true }
-)
-
-// 监听pf
-const watchPf = watch(
-  () => props.requestConfig?.otherOptions.pf,
-  (newPf, oldPf) => {
-    if (newPf != oldPf) {
-      filterFormRef.value?.resetFormData()
-      reqConfig.otherOptions.pf = newPf
-      getData()
-    }
-  },
-  { deep: true }
-)
-
 // 监听传入的datalist的变化，然后去更新数据
 const changeDataList = watch(
   () => [props.dataList],
   () => {
-    // console.log('执行')
-    getData()
-    // filterFormRef.value?.throttleResetQuery()
+    updateTableData()
   },
   {
     deep: true
   }
 )
 
-// 监听日期的变化，
-const watchDateChange = watch(
-  () => [props.requestConfig?.otherOptions.startTime, props.requestConfig?.otherOptions.endTime],
+/**
+ * 对传入的props进行检查，对错误配置进行提示
+ */
+const checkPropsConfig = () => {
+  const {
+    openFilterQuery,
+    queryInfo,
+    openPageQuery,
+    paginationConfig,
+    openRemoteReqData,
+    requestConfig,
+    openRemoteQuery,
+    dataList
+  } = props
+  if (openFilterQuery && !queryInfo) {
+    console.error('请输入查询的配置信息')
+  }
+  if (openPageQuery && !paginationConfig) {
+    console.error('请输入分页配置信息')
+  }
+  if (openRemoteReqData || openRemoteQuery) {
+    if (!requestConfig) {
+      console.error('请输入请求配置信息')
+    }
+  }
+
+  if (!openRemoteReqData) {
+    if (!dataList) {
+      console.error('请至少确保一个数据源')
+    }
+    if (openRemoteQuery) {
+      console.error('远程查询无效，请开启数据远程请求')
+    }
+  }
+}
+
+/**
+ * 监听请求配置的变化，如果开启了查询功能，则需要重置表单后查询
+ * 否则直接请求数据
+ */
+const watchReqConfig = watch(
+  () => props.requestConfig,
   () => {
-    filterFormRef.value?.throttleResetQuery()
+    Object.assign(reqConfig, props.requestConfig)
+    if (props.openFilterQuery) {
+      filterFormRef.value?.throttleResetQuery()
+    } else {
+      throttleQueryTableData()
+    }
   },
-  { deep: true }
+  {
+    deep: true
+  }
 )
 
 /**
- * @description: 创建row-key优化表格性能
+ * 不使用远程数据，则不用监听请求数据的变化
  */
-const createRowKey = () => {
-  return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
-}
-
-// 没有pf取消掉
-if (!props.requestConfig?.otherOptions.pf) watchPf()
-
-// 如果没有日期就取消掉
-if (!props.requestConfig?.otherOptions.startTime && !props.requestConfig?.otherOptions.endTime) {
-  watchDateChange()
+if (!props.openRemoteReqData) {
+  watchReqConfig()
 }
 
 // 如果是使用远程数据源，则取消监听
@@ -444,20 +345,6 @@ if (props.openRemoteReqData) {
 }
 
 /**
- * @description: 拷贝一份配置文件
- */
-const initPageConfig = () => {
-  Object.assign(paginationConfig, props.paginationConfig)
-}
-
-/**
- * @description: 初始化请求配置，用于把拷贝一份新的数据
- */
-const initReqConfig = () => {
-  Object.assign(reqConfig, props.requestConfig)
-}
-
-/**
  * @description: 表格排序
  * @param {*} data 获取到的数据
  */
@@ -481,7 +368,11 @@ const deleteRow = (url: string, fieldsInfo: any) => {
     .post(url, { ...fieldsInfo })
     .then((data) => {
       analysisResCode(data).then(() => {
-        filterFormRef.value?.throttleResetQuery()
+        if (props.openFilterQuery) {
+          filterFormRef.value?.throttleResetQuery()
+        } else {
+          throttleQueryTableData()
+        }
       })
     })
     .catch((err) => {
@@ -490,58 +381,15 @@ const deleteRow = (url: string, fieldsInfo: any) => {
 }
 
 /**
- * @description: 下载表格数据
- */
-const downLoadTable = () => {
-  downLoadData(generateRandomFileName(), JSON.parse(JSON.stringify(tableData)))
-}
-
-/**
  * @description: 外部获取数据
  */
 const outGetTableData = () => {
   return toRaw(tableData).flat()
 }
 
-/**
- * 对传入的props进行检查，对错误配置进行提示
- */
-const checkPropsConfig = () => {
-  const {
-    openFilterQuery,
-    queryInfo,
-    openPageQuery,
-    paginationConfig,
-    openRemoteReqData,
-    requestConfig,
-    openRemoteQuery,
-    dataList
-  } = props
-  if (openFilterQuery && !queryInfo) {
-    console.error('请输入查询的配置信息')
-  }
-  if (openPageQuery && !paginationConfig) {
-    console.error('请输入分页配置信息')
-  }
-  if (openRemoteReqData || openRemoteQuery) {
-    if (!requestConfig) {
-      console.error('请输入请求配置信息')
-    }
-  }
-
-  if (!openRemoteReqData) {
-    if (!dataList) {
-      console.error('请至少确保一个数据源')
-    }
-    if (openRemoteQuery) {
-      console.error('远程查询无效，请开启数据远程请求')
-    }
-  }
-}
-
 // 定义暴露出去的方法
 defineExpose({
-  getData,
+  updateTableData,
   resetTableData,
   deleteRow,
   downLoadTable,
@@ -549,8 +397,10 @@ defineExpose({
 })
 
 onMounted(() => {
-  initPageConfig()
-  initReqConfig()
+  initPageConfig(props.paginationConfig)
+
+  initReqConfig(reqConfig, props.requestConfig)
+
   checkPropsConfig()
 })
 </script>

src/components/table/TableColumn/TableColumn.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-12-03
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-12-03
+ * @LastEditTime: 2024-12-07
  * @Description: 
  * 
 -->

src/hooks/useTable.ts

@@ -2,17 +2,20 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 17:15:49
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-11-29
+ * @LastEditTime: 2024-12-07
  * @Description:
  *
  */
 import type { ResponseInfo } from '@/types/res'
-import type { TablePaginationSetting } from '@/types/table'
+import type { TableFieldInfo, TablePaginationSetting } from '@/types/table'
 
 import { initLoadResource } from '@/utils/resource'
 import { reactive } from 'vue'
+import { downLoadData } from '@/utils/table/table'
+import { generateRandomFileName } from '@/utils/common'
 
 import axiosInstance from '../utils/axios/axiosInstance'
+import type { ReqConfig } from '@/types/dataAnalysis'
 
 // 资源的加载路径
 const resourceInfo: Record<string, string> = {
@@ -27,11 +30,15 @@ initLoadResource(resourceInfo).then((data) => {
   Object.assign(blobUrlInfo, data)
 })
 
-export function useTable(tableData: Array<any>, paginationSetting: TablePaginationSetting) {
+export function useTable(
+  tableData: Array<any>,
+  paginationSetting: TablePaginationSetting,
+  tableFieldsInfo: TableFieldInfo[]
+) {
   /**
    * @description: 设置默认头像
-   * @param {Array} data 请求回来的数据表格
-   * @return {Array<any>} 返回处理后的数据
+   * @param  data 请求回来的数据表格
+   * @return  返回处理后的数据
    */
   const setDefaultHead = (data: Array<any>): Array<any> => {
     if (data) {
@@ -50,20 +57,33 @@ export function useTable(tableData: Array<any>, paginationSetting: TablePaginati
    * @param dataList 数据列表
    * @param total 数据总量
    * @param openPagination 是否开启了分页查询
+   * @param openRemoteReq 是否是远程请求
    * @return 成功返回true，反之false
    */
-  const setTableData = (dataList: Array<any>, total: number, openPagination: boolean): boolean => {
+  const setTableData = (
+    dataList: Array<any>,
+    total: number,
+    openPagination: boolean,
+    openRemoteReq: boolean
+  ): boolean => {
     try {
       if (!dataList || dataList.length === 0) {
         tableData.length = 0
         paginationSetting.total = 0
       } else {
-        paginationSetting.total = total
+        // 确保返回的数据中有total才赋值，否则直接使用长度
+        if (total) {
+          paginationSetting.total = total
+        } else {
+          paginationSetting.total = dataList.length
+        }
+
+        // 处理有头像的字段
         dataList = setDefaultHead(dataList)
 
         // 如果开启了分页，设置 tableData 为二维数组，否则为一维数组
         const pageIndex = paginationSetting.currentPage ?? 0
-        if (openPagination) {
+        if (openPagination && openRemoteReq) {
           tableData[pageIndex] = dataList
         } else {
           tableData.splice(0, tableData.length, ...dataList)
@@ -88,7 +108,7 @@ export function useTable(tableData: Array<any>, paginationSetting: TablePaginati
   ): Promise<[Array<any>, number]> => {
     try {
       const result = await axiosInstance.post<any, ResponseInfo>(url, option)
-      console.log(result)
+
       return [result.data ?? [], result.count ?? 0]
     } catch (err) {
       console.error('请求数据错误:', err)
@@ -96,41 +116,128 @@ export function useTable(tableData: Array<any>, paginationSetting: TablePaginati
     }
   }
 
-  // const getTableData = async (
-  //   url: string,
-  //   option: Record<string, any>,
-  //   isPagination: boolean = false
-  // ): Promise<boolean> => {
-  //   try {
-  //     const result = await axiosInstance.post<any, ResponseInfo>(url, option)
-  //     let data = result.data
-  //
-  //     // 没有数据则直接置为空
-  //     if (!data) {
-  //       tableData.length = 0
-  //       paginationSetting.total = 0
-  //     } else {
-  //       paginationSetting.total = result.count ?? data.length
-  //       data = setDefaultHead(data)
-  //
-  //       // 如果开启了分页，设置 tableData 为二维数组，否则为一维数组
-  //       const pageIndex = paginationSetting.currentPage ?? 0
-  //       if (isPagination) {
-  //         tableData[pageIndex] = data
-  //       } else {
-  //         tableData.splice(0, tableData.length, ...data)
-  //       }
-  //     }
-  //
-  //     return true // 返回操作成功
-  //   } catch (err) {
-  //     console.error('网络请求错误:', err)
-  //     throw err // 抛出错误让调用者处理
-  //   }
-  // }
+  /**
+   * 开启行号功能后，计算行号
+   * @param index 当前行索引
+   */
+  const computedRowIndex = (index: number) => {
+    return (paginationSetting.currentPage - 1) * paginationSetting.limit + index + 1
+  }
+
+  /**
+   * @description: 改变页码
+   * @param val
+   */
+  const handleCurrentChange = (val: number) => {
+    paginationSetting.currentPage = val
+  }
+
+  /**
+   * @description 改变每页大小
+   * @param val
+   */
+  const handleSizeChange = (val: number) => {
+    paginationSetting.limit = val
+  }
+
+  /**
+   * 插入均值行
+   *
+   * @param needAverage 是否需要计算平均值
+   * @param openRemoteReqData 是否是远程请求
+   */
+  const insertAverageRow = (needAverage: boolean, openRemoteReqData: boolean) => {
+    if (needAverage) {
+      const rowData: any = {}
+      const oldList: Array<any> = JSON.parse(JSON.stringify(tableData))
+      Object.values(tableFieldsInfo).map((item: TableFieldInfo, index: number) => {
+        const sum = oldList
+          .map((item) => item.count)
+          .reduce((accumulator, currentValue) => accumulator + currentValue, 0)
+        const averageList = oldList
+          .map((val) => val[item.name])
+          .filter((item) => item !== undefined)
+        if (index === 0) rowData[item.name] = '均值'
+        else if (item.name === 'count') rowData[item.name] = sum
+        else {
+          const num =
+            averageList.reduce((accumulator, currentValue) => accumulator + currentValue, 0) /
+            averageList.length
+
+          rowData[item.name] = isNaN(num) ? 0 : num.toFixed(2)
+        }
+      })
+      if (openRemoteReqData) {
+        tableData[0].splice(0, 0, rowData)
+      } else {
+        tableData.splice(0, 0, rowData)
+      }
+    }
+  }
+
+  /**
+   * 清空表格数据
+   */
+  const resetTableData = () => {
+    tableData.splice(0, tableData.length)
+  }
+
+  /**
+   * @description: 根据计算出来的值去返回对应的颜色深度
+   * @param number 输入值
+   */
+  const getDecimalFromRange = (number: number) => {
+    if (!number) return 0
+    if (number < 25) return 0.25
+    else if (number < 50) return 0.5
+    else if (number < 75) return 0.75
+    else return 1.0 // 如果number >= 75，则直接返回1.00
+  }
+
+  /**
+   * @description: 初始化分页配置，把传入的配置拷贝一份
+   */
+  const initPageConfig = (propPageConfig?: TablePaginationSetting) => {
+    if (propPageConfig) {
+      Object.assign(paginationSetting, JSON.parse(JSON.stringify(propPageConfig)))
+    }
+  }
+
+  /**
+   * @description: 初始化请求配置，用于把拷贝一份新的数据
+   */
+  const initReqConfig = (reqConfig: ReqConfig, propReqConfig?: ReqConfig) => {
+    if (propReqConfig) {
+      Object.assign(reqConfig, propReqConfig)
+    }
+  }
+
+  /**
+   * @description: 创建row-key优化表格性能
+   */
+  const createRowKey = () => {
+    return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
+  }
+
+  /**
+   * @description: 下载表格数据
+   */
+  const downLoadTable = () => {
+    downLoadData(generateRandomFileName(), JSON.parse(JSON.stringify(tableData)))
+  }
 
   return {
     getTableData,
-    setTableData
+    setTableData,
+    resetTableData,
+    initPageConfig,
+    initReqConfig,
+    getDecimalFromRange,
+    computedRowIndex,
+    handleCurrentChange,
+    handleSizeChange,
+    insertAverageRow,
+    createRowKey,
+    downLoadTable
   }
 }

src/views/AppManage/EventDetailsView.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-09-18
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-12-03
+ * @LastEditTime: 2024-12-07
  * @Description: 
  * 
 -->
@@ -430,6 +430,7 @@ const delOption = (row: any) => {
 const initParams = () => {
   const routes = useRoute()
   let query_actionId = routes.query.id as string
+  console.log(query_actionId)
   if (query_actionId) {
     isAdd.value = false
     actionId.value = parseInt(query_actionId)
@@ -487,6 +488,7 @@ onUnmounted(() => {
       <Table
         :tools="tableToolsConfig"
         :open-page-query="true"
+        :open-filter-query="false"
         :pagination-config="pageConfig"
         :table-fields-info="tableFieldConfig"
         :request-config="tableReqConfig"

src/views/AppManage/EventMangeTable.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-09-18
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-12-03
+ * @LastEditTime: 2024-12-07
  * @Description: 
  * 
 -->
@@ -280,8 +280,9 @@ const addNewEvent = () => {
  * 表单提交
  */
 const subForm = () => {
+  console.log('体')
   if (eventTable.value) {
-    eventTable.value.getData()
+    eventTable.value.updateTableData()
   }
 }
 
@@ -289,7 +290,7 @@ const subForm = () => {
  *  更新表格数据
  */
 const updateData = () => {
-  eventTable.value?.getData()
+  eventTable.value?.updateTableData()
 }
 
 watch(

src/views/Home/AdvertisingData/AdvertisingOverview.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: fxs bjnsfxs@163.com
+ * @Date: 2024-11-29
+ * @LastEditors: fxs bjnsfxs@163.com
+ * @LastEditTime: 2024-12-07
+ * @Description: 
+ * 
+-->
 <script setup lang="ts">
 import type { ReqConfig, StaticField, TemporalTrendInfo } from '@/types/dataAnalysis'
 import { useCommonStore } from '@/stores/useCommon'
@@ -88,6 +96,7 @@ const changeDate = (date: Array<Date>) => {
 
 const updateSelect = (pf: string, gid: string) => {
   updateReqConfig(dailyInfo.dataReqConfig, { pf, gid })
+  updateReqConfig(adOverviewReqConfig, { pf, gid })
 }
 
 const backupSelect = reactive([]) // 保存选择数据
@@ -125,7 +134,7 @@ watchPageChange(() => [selectInfo.pf, selectInfo.gid], backupSelect, updateSelec
           :need-change-express="false"
           :type="1"
           :request-config="dailyInfo.dataReqConfig"
-          :title="'广告数据(正式服数据)'"
+          :title="'广告数据'"
         ></TemporalTrend>
         <!--        :title="'广告数据(正式服数据)'"-->
       </div>

src/views/Home/Analysis/EventAnalysisTable.vue

@@ -160,7 +160,7 @@ const updateDate = (startTime: string, endTime: string) => {
  * @param gid 游戏ID
  * @param pf 平台
  */
-const updateGid = (gid: string, pf: any) => {
+const updateSelect = (gid: string, pf: any) => {
   pf = isSinglePf ? pf[0] : pf
   updateReqConfig(requestConfig, { pf, gid })
 }
@@ -169,7 +169,7 @@ const backupDate = reactive([])
 const backupSelect = reactive([])
 
 // 这里特殊一点，监听pf的时候去监听临时的pf，但是gid还是和其他一样
-watchPageChange(() => [selectInfo.gid, tempMultipleChoice.pf], backupSelect, updateGid)
+watchPageChange(() => [selectInfo.gid, tempMultipleChoice.pf], backupSelect, updateSelect)
 
 watchPageChange(() => [props.startTime, props.endTime], backupDate, updateDate)
 </script>

src/views/Home/Analysis/KeepView.vue

@@ -152,16 +152,14 @@ const getTableData = () => {
     .post(keepDataTableInfo.requestConfig.url, {
       ...keepDataTableInfo.requestConfig.otherOptions
     })
-    .then((info) => {
-      analysisResCode(info)
-        .then(() => {
-          let data = info.data
+    .then((res) => {
+      analysisResCode(res)
+        .then((info) => {
+          let data = info.data as Array<any>
           let newList: Array<any> = []
+          console.log(data)
           for (const [_key, val] of Object.entries(data)) {
-            let nVal = val as Object
-            newList.push({
-              ...nVal
-            })
+            newList.push(val)
           }
           keepTableData.splice(0, keepTableData.length, ...newList)
           keepDataTableInfo.paginationConfig.total = newList.length
@@ -209,6 +207,7 @@ watchPageChange(() => [keepDataTableInfo.requestConfig], backupReq, getTableData
         :pagination-config="keepDataTableInfo.paginationConfig"
         :table-fields-info="keepDataTableInfo.tableFieldsInfo"
         :open-remote-req-data="false"
+        :open-filter-query="false"
         :data-list="keepTableData"
         :open-remote-query="false"
       ></Table>

src/views/Home/Analysis/UserTrendView.vue

@@ -59,6 +59,7 @@ const userTrendStaticFieldInfo: Array<StaticField> = [
 // 总览请求参数的配置
 const userTrendDataReqConfig = reactive<ReqConfig>({
   url: AllApi.userTrendsOverview,
+  // url: `http://localhost:8003/mock/home/chart`,
   otherOptions: {
     pf: selectInfo.pf[0],
     gid: selectInfo.gid,
@@ -374,6 +375,7 @@ watchPageChange(() => [detailDataTableInfo.requestConfig], backupReq, getDetailD
           :pagination-config="detailDataTableInfo.paginationConfig"
           :table-fields-info="detailDataTableInfo.tableFieldsInfo"
           :data-list="detailDataTableData"
+          :open-filter-query="false"
           :open-remote-query="false"
           :open-remote-req-data="false"
         ></Table>

src/views/Home/InfoManage/GameManageView.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-12-03
+ * @LastEditTime: 2024-12-07
  * @Description: 
  * 
 -->
@@ -12,7 +12,9 @@ import type { FormRules } from 'element-plus'
 import type { DialogConfig } from '@/types/dialog'
 import type { FormField } from '@/types/form'
 import type { TableToolsConfig } from '@/types/table'
+import type { ResponseInfo } from '@/types/res.ts'
 
+import { FieldSpecialEffectType } from '@/types/tableText.ts'
 import { FormFieldType } from '@/types/form'
 import { FilterType } from '@/types/table'
 import { onMounted, reactive, ref } from 'vue'
@@ -21,9 +23,7 @@ import { useCommonStore } from '@/stores/useCommon'
 
 import Dialog from '@/components/common/CustomDialog.vue'
 import Table from '@/components/table/CustomTable.vue'
-import { FieldSpecialEffectType } from '@/types/tableText.ts'
 import axiosInstance from '@/utils/axios/axiosInstance.ts'
-import type { ResponseInfo } from '@/types/res.ts'
 
 const { allGameInfo } = useCommonStore()
 const { AllApi } = useRequest()
@@ -303,6 +303,7 @@ const handleEdit = (row: any) => {
 }
 
 const formSub = (formData: any, type: number) => {
+  console.log(formData, type)
   if (type === 0) {
     allGameInfo.push({
       gid: formData.gid,
@@ -315,7 +316,7 @@ const formSub = (formData: any, type: number) => {
     }
   }
 
-  gameTableRef.value?.getData()
+  gameTableRef.value?.updateTableData()
 }
 
 const getTableData = async () => {
@@ -328,42 +329,43 @@ const getTableData = async () => {
 }
 
 onMounted(() => {
-  // gameTableRef.value?.getData()
   getTableData()
 })
 </script>
 <template>
   <div class="gameMangeBox">
-    <Table
-      ref="gameTableRef"
-      :tools="tableToolsConfig"
-      :open-filter-query="true"
-      :open-page-query="true"
-      :open-remote-req-data="false"
-      :open-remote-query="false"
-      :query-info="queryInfo"
-      :data-list="tableData"
-      :table-fields-info="fieldsInfo"
-      :pagination-config="paginationConfig"
-      @addNewItem="addNewItem"
-    >
-      <template #tableOperation>
-        <el-table-column label="操作" align="center">
-          <template #default="scope">
-            <el-button
-              size="small"
-              type="primary"
-              @click="handleEdit(scope.row)"
-              class="operationBtn"
-            >
-              修改
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </Table>
-    <div class="optionDialog">
-      <Dialog @form-submit="formSub" ref="gameDialogRef" :config="gameDialogConfig"></Dialog>
+    <div class="gameTableContainer">
+      <Table
+        ref="gameTableRef"
+        :tools="tableToolsConfig"
+        :open-filter-query="true"
+        :open-page-query="true"
+        :open-remote-req-data="false"
+        :open-remote-query="false"
+        :query-info="queryInfo"
+        :data-list="tableData"
+        :table-fields-info="fieldsInfo"
+        :pagination-config="paginationConfig"
+        @addNewItem="addNewItem"
+      >
+        <template #tableOperation>
+          <el-table-column label="操作" align="center">
+            <template #default="scope">
+              <el-button
+                size="small"
+                type="primary"
+                @click="handleEdit(scope.row)"
+                class="operationBtn"
+              >
+                修改
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </Table>
+      <div class="optionDialog">
+        <Dialog @form-submit="formSub" ref="gameDialogRef" :config="gameDialogConfig"></Dialog>
+      </div>
     </div>
   </div>
 </template>
@@ -379,4 +381,11 @@ onMounted(() => {
 .operationBtn {
   margin-right: 5%;
 }
+
+.gameTableContainer {
+  box-sizing: border-box;
+  background-color: white;
+  width: 100%;
+  padding: 0 24px;
+}
 </style>

src/views/Home/InfoManage/PlayerManageView.vue

@@ -2,23 +2,16 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-12-03
+ * @LastEditTime: 2024-12-07
  * @Description: 
  * 
 -->
 <script setup lang="ts">
-import type {
-  TablePaginationSetting,
-  QueryInfo,
-  SelectInfo,
-  TableFieldInfo,
-  TableToolsConfig
-} from '@/types/table'
+import type { TablePaginationSetting, TableFieldInfo, TableToolsConfig } from '@/types/table'
 import type { FormRules } from 'element-plus'
 import type { FormField } from '@/types/form'
 import type { DialogConfig } from '@/types/dialog'
 
-import { FilterType } from '@/types/table'
 import { FieldSpecialEffectType, TagType, TextType } from '@/types/tableText'
 import { reactive, ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
@@ -40,7 +33,7 @@ const { AllApi, analysisResCode } = useRequest()
 const { selectInfo } = useCommonStore()
 
 // 是否是单选pf
-// const isSinglePf = true
+const isSinglePf = true
 
 // 表格对象
 const playerTableRef = ref()
@@ -67,25 +60,6 @@ const requestConfig = reactive({
   }
 })
 
-// 所有平台
-const allPf: Array<SelectInfo> = [
-  {
-    name: 'wx',
-    cnName: '微信',
-    value: 'wx'
-  },
-  {
-    name: 'tt',
-    cnName: '抖音',
-    value: 'tt'
-  },
-  {
-    name: 'web',
-    cnName: 'Web',
-    value: 'web'
-  }
-]
-
 // 工具栏配置
 const tableToolsConfig: TableToolsConfig = {
   add: false,
@@ -94,18 +68,6 @@ const tableToolsConfig: TableToolsConfig = {
   download: false
 }
 
-// 查询字段设置
-const queryInfo = reactive<Array<QueryInfo>>([
-  {
-    name: 'pf',
-    label: '平台',
-    type: FilterType.SELECT,
-    placeholder: '请选择平台',
-    otherOption: allPf,
-    default: selectInfo.pf[0]
-  }
-])
-
 // 字段信息
 const fieldsInfo = reactive<Array<TableFieldInfo>>([
   {
@@ -265,58 +227,66 @@ const encrypt = () => {
 }
 
 // 表格的查询应该和全局的平台选择独立开来
-const updateSelect = (gid: any) => {
-  updateReqConfig(requestConfig, { gid })
+const updateSelect = (gid: string, pf: string[]) => {
+  const newPf = isSinglePf ? pf[0] : pf
+  console.log('切换')
+  updateReqConfig(requestConfig, { gid, pf: newPf })
+  console.log(requestConfig)
 }
 
 const backupSelect = reactive([])
 
-watchPageChange(() => [selectInfo.gid], backupSelect, updateSelect)
+watchPageChange(() => [selectInfo.gid, selectInfo.pf], backupSelect, updateSelect)
 </script>
 <template>
   <div class="gameMangeBox">
-    <Table
-      ref="playerTableRef"
-      :tools="tableToolsConfig"
-      :table-fields-info="fieldsInfo"
-      :query-info="queryInfo"
-      :request-config="requestConfig"
-      :pagination-config="paginationConfig"
-    >
-      <template #tableOperation>
-        <el-table-column label="操作" align="center">
-          <template #default="scope">
-            <el-button
-              size="small"
-              type="warning"
-              @click="handleEdit(scope.row)"
-              class="operationBtn"
-            >
-              修改权限
-            </el-button>
-            <el-button
-              class="operationBtn"
-              size="small"
-              @click="blockedPlayer(scope.row)"
-              :type="scope.row.inBlack ? 'success' : 'danger'"
-            >
-              {{ scope.row.inBlack ? '解封' : '封禁' }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </Table>
-    <div class="optionDialog">
-      <Dialog
-        :config-btn-text="'普通上传'"
-        @form-submit="formSub"
-        ref="playerDialogFormRef"
-        :config="optionDialogConfig"
+    <div class="header">
+      <HeaderCard :open-date-select="false" :title="'数据总览'"></HeaderCard>
+    </div>
+    <div class="playerTableContainer">
+      <Table
+        ref="playerTableRef"
+        :tools="tableToolsConfig"
+        :table-fields-info="fieldsInfo"
+        :open-filter-query="false"
+        :request-config="requestConfig"
+        :pagination-config="paginationConfig"
       >
-        <template #otherBtn>
-          <el-button class="operationBtn" type="warning" @click="encrypt"> 加密上传</el-button>
+        <template #tableOperation>
+          <el-table-column label="操作" align="center">
+            <template #default="scope">
+              <el-button
+                size="small"
+                type="warning"
+                @click="handleEdit(scope.row)"
+                class="operationBtn"
+              >
+                修改权限
+              </el-button>
+              <el-button
+                class="operationBtn"
+                size="small"
+                @click="blockedPlayer(scope.row)"
+                :type="scope.row.inBlack ? 'success' : 'danger'"
+              >
+                {{ scope.row.inBlack ? '解封' : '封禁' }}
+              </el-button>
+            </template>
+          </el-table-column>
         </template>
-      </Dialog>
+      </Table>
+      <div class="optionDialog">
+        <Dialog
+          :config-btn-text="'普通上传'"
+          @form-submit="formSub"
+          ref="playerDialogFormRef"
+          :config="optionDialogConfig"
+        >
+          <template #otherBtn>
+            <el-button class="operationBtn" type="warning" @click="encrypt"> 加密上传</el-button>
+          </template>
+        </Dialog>
+      </div>
     </div>
   </div>
 </template>
@@ -332,4 +302,11 @@ watchPageChange(() => [selectInfo.gid], backupSelect, updateSelect)
 .operationBtn {
   margin-right: 10px;
 }
+
+.playerTableContainer {
+  box-sizing: border-box;
+  background-color: white;
+  width: 100%;
+  padding: 0 24px;
+}
 </style>

src/views/IndexView.vue

@@ -1,24 +1,8 @@
 <!--
  * @Author: fxs bjnsfxs@163.com
- * @Date: 2024-09-18
- * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-12-05
- * @Description: 
- * 
--->
-<!--
- * @Author: fxs bjnsfxs@163.com
- * @Date: 2024-09-18
- * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-12-04
- * @Description: 
- * 
--->
-<!--
- * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 14:06:49
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-11-29
+ * @LastEditTime: 2024-12-07
  * @Description: 
  * 
 -->
@@ -45,8 +29,6 @@ const { selectInfo, allGameInfo, saveSelectInfo } = useCommonStore()
 
 const isCollapse = ref(false)
 const navBarSelect = ref<string>('Home')
-// const sideBarOpened = ref<Array<string>>(['数据总览'])
-// const sideBar = ref()
 const loadingState = ref(false) // 用来标记必要信息的加载状态
 
 // 路由信息，同时也是侧边栏生成的依据信息
@@ -118,11 +100,6 @@ const changeNavBar = (val: string) => {
 
   router.push(`/${val}`)
   createdMenuList()
-  // 如果存在这个顶级导航栏
-  // let title = navBarMenuList.find((item) => item.name === val)?.title
-  // if (title) {
-  //   sideBarOpened.value.splice(0, 1, title)
-  // }
 }
 
 // 资源的加载路径