事件分析页面增加刷新按钮;刷新按钮现在不会将筛选条件清空，而是直接根据现有的筛选条件进行查询;事件分析页面与详情页添加平台选择按钮;页面刷新保存平台选择;当页面只支持单选平台的时候，可以直接点击平台进行切换。当需要多选平台的时候，只有点击确定按钮，才能更换平台;新增游戏后，导航栏可以获取最新的游戏列表;游戏管理页和游戏选择下拉框加搜索功能;导航栏选择游戏后会保存在本地，刷新页面不会丢失;修复了事件分析页面加载两次的BUG;

src/components/Table.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 18:16:18
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-18 15:27:08
+ * @LastEditTime: 2024-09-28 17:18:02
  * @FilePath: \Game-Backstage-Management-System\src\components\Table.vue
  * @Description: 
  * 
@@ -361,6 +361,18 @@ watch(
       reqconfig.otherOptions.gid = newGid
       getData()
     }
+  },
+  { deep: true }
+)
+
+// 监听pf
+const watchPf = watch(
+  () => props.requestConfig?.otherOptions.pf,
+  (newPf, oldPf) => {
+    if (newPf != oldPf) {
+      reqconfig.otherOptions.pf = newPf
+      getData()
+    }
   }
 )
 
@@ -392,6 +404,9 @@ const createRowKey = () => {
   return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
 }
 
+// 没有pf取消掉
+if (!props.requestConfig?.otherOptions.pf) watchPf()
+
 //如果没有日期就取消掉
 if (!props.requestConfig?.otherOptions.startTime && !props.requestConfig?.otherOptions.endTime) {
   watchDateChange()
@@ -527,7 +542,12 @@ onMounted(() => {
           :label-position="'left'"
         >
           <!-- 所有的input查询框 -->
-          <el-form-item :label="item.label" v-for="item in inputFieldsList" class="filterItem">
+          <el-form-item
+            @keyup.enter.native="queryTableData"
+            :label="item.label"
+            v-for="item in inputFieldsList"
+            class="filterItem"
+          >
             <el-input
               v-model="queryFormData[item.name]"
               :placeholder="item.placeholder"
@@ -603,7 +623,7 @@ onMounted(() => {
           <el-icon><Download /></el-icon>下载
         </el-button>
 
-        <RegreshBtn @refresh-table="getData" :icon-size="toolsIconSize"></RegreshBtn>
+        <RegreshBtn @refresh-table="queryTableData" :icon-size="toolsIconSize"></RegreshBtn>
 
         <FilterPopover
           :table-fields-info="tableFieldsInfo"
@@ -816,6 +836,8 @@ onMounted(() => {
 .filterHeader,
 .filterBody {
   width: 98%;
+  box-sizing: border-box;
+
   margin: 0 auto;
 }
 
@@ -831,6 +853,7 @@ onMounted(() => {
 
 .filterBody {
   display: flex;
+  padding: 0 24px;
 }
 
 .queryBox {

src/components/common/Dialog.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-09-04 11:21:05
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-18 12:38:09
+ * @LastEditTime: 2024-09-25 17:56:27
  * @FilePath: \Game-Backstage-Management-System\src\components\common\Dialog.vue
  * @Description: 
  * 
@@ -96,8 +96,8 @@ const encrypt = (fields: string, useFormField: boolean, encryptMsg: Array<string
   })
 }
 
-const subForm = () => {
-  emits('formSubmit')
+const subForm = (FormData: any) => {
+  emits('formSubmit', FormData)
 }
 
 defineExpose({

src/components/common/WithIconSelect.vue

@@ -1,25 +1,36 @@
 <script setup lang="ts">
-import { onMounted, ref, reactive, computed } from 'vue'
-import { initLoadResouce } from '@/utils/resource'
 import type { DropdownInstance } from 'element-plus'
 import type { IconDropdownItem } from '@/types/dataAnalysis'
 
+import { onMounted, ref, reactive, watch } from 'vue'
+import { initLoadResouce } from '@/utils/resource'
+import { useCommonStore } from '@/stores/useCommon'
+
+const { selectInfo, tempMultipleChioce, saveSelectInfo, saveTempMultipleChioce } = useCommonStore()
+
 interface DropdownInfo {
-  isRadio?: boolean
+  isRadio?: boolean // 是否是单选
   slectInfo: Array<IconDropdownItem>
 }
 
-/**
- * @description: 最大选择数
- * @return {*}
- */
-const maxSelect = 1
-
 // props
 const props = withDefaults(defineProps<DropdownInfo>(), {
   isRadio: true
 })
 
+/**
+ * @description:  初始化选择信息
+ * @return {*}
+ */
+const selectBaseInfo = reactive<Array<IconDropdownItem>>(
+  JSON.parse(JSON.stringify(props.slectInfo))
+)
+
+// 判断是不是通过确认框关闭的。主要服务于多选的情况
+// 原理是因为点击确认关闭的话，确认事件会先触发，然后再触发关闭事件
+// 由此来去判断是否需要把多选框的信息恢复
+const isConfimClose = ref<Boolean>(false)
+
 // emits
 const emits = defineEmits(['changePf'])
 
@@ -27,7 +38,7 @@ const emits = defineEmits(['changePf'])
 const dropDownRef = ref<DropdownInstance>()
 
 // 资源的加载路径
-const resourceInfo: Record<string, string> = props.slectInfo.reduce(
+const resourceInfo: Record<string, string> = selectBaseInfo.reduce(
   (acc, item) => {
     acc[item.value] = item.icon
     return acc
@@ -43,15 +54,20 @@ const backupInfo = reactive<Array<IconDropdownItem>>([])
 
 /**
  * @description: 确认选择
+ * 这里主要用于多选的情况使用，对于单选，即使点击确认按钮也不会有二次请求，因为seleinfo没有改变
  * @return {*}
  */
 const confirmSelect = () => {
-  Object.assign(backupInfo, JSON.parse(JSON.stringify(props.slectInfo)))
+  isConfimClose.value = true // 通过确认事件关闭
+  Object.assign(backupInfo, JSON.parse(JSON.stringify(selectBaseInfo)))
   dropDownRef.value?.handleClose()
-  emits(
-    'changePf',
-    props.slectInfo.filter((item) => item.isSelected).map((item) => item.value)
-  )
+
+  if (props.isRadio) return
+
+  // 去把state的数据更新一下
+  tempMultipleChioce.pf = selectBaseInfo.filter((item) => item.isSelected).map((item) => item.value)
+
+  saveTempMultipleChioce() // 保存到本地
 }
 
 /**
@@ -60,7 +76,7 @@ const confirmSelect = () => {
  */
 const cancleSelect = () => {
   dropDownRef.value?.handleClose()
-  Object.assign(props.slectInfo, backupInfo)
+  Object.assign(selectBaseInfo, backupInfo)
 }
 
 /**
@@ -70,31 +86,98 @@ const cancleSelect = () => {
  */
 const dropdownVis = (state: boolean) => {
   if (state) {
-    Object.assign(backupInfo, JSON.parse(JSON.stringify(props.slectInfo)))
+    // 打开的时候，需要备份一下当前选择
+    Object.assign(backupInfo, JSON.parse(JSON.stringify(selectBaseInfo)))
   } else {
-    Object.assign(props.slectInfo, backupInfo)
+    // 关闭的时候，如果一个都没有选中，那么就需要把备份的信息恢复回去
+    // 这里只针对于多选情况，因为单选的逻辑中不存在一个都没有选中的情况，因为无法取消已经选中
+    // 而多选的情况下，因为即使可以取消，也不会立即改变selectInfo中的信息，只有点击了确认按钮才会改变，所以这里只需要恢复props的selectinfo就行了
+
+    // 不是点击确认按钮关闭的多选框，且是多选按钮，也需要恢复
+    if (!selectBaseInfo.find((item) => item.isSelected) || (!isConfimClose.value && !props.isRadio))
+      Object.assign(selectBaseInfo, backupInfo)
+    if (isConfimClose.value) isConfimClose.value = false // 把状态重置
   }
 }
 
 /**
- * @description: 用于限制最多的选择个数
- * @return {*}
- */
-const canSelect = computed(() => {
-  return props.slectInfo.filter((item) => item.isSelected).length < maxSelect
-})
-
-/**
  * @description: 选择事件，当目前可以选择或者是这个选项已经被选中的时候，就允许改变他的状态
  * @param {*} item  当前的选项信息
  * @return {*}
  */
 const selectPf = (item: any) => {
-  if (canSelect.value || item.isSelected) {
+  if (props.isRadio) {
+    selectInfo.pf = []
+    selectInfo.pf.push(item.value)
+
+    saveSelectInfo() // 选择之后保存到本地一次
+  } else {
+    // 多选就取反就行
     item.isSelected = !item.isSelected
   }
 }
 
+/**
+ * @description: 同步selectinfo的信息到页面上
+ * @return {*}
+ */
+const syncSelectInfo = () => {
+  selectBaseInfo.forEach((item) => {
+    item.isSelected = selectInfo.pf.includes(item.value)
+  })
+}
+
+/**
+ * @description: 同步tempMultipleChioce的信息到页面上
+ * @return {*}
+ */
+const syncTempMultipleChioce = () => {
+  selectBaseInfo.forEach((item) => {
+    item.isSelected = tempMultipleChioce.pf.includes(item.value)
+  })
+}
+
+/**
+ * @description: 监听selectinfo的变化，然后同步到页面上
+ * @return {*}
+ */
+const watchSelectPf = watch(
+  () => selectInfo.pf,
+  () => {
+    syncSelectInfo()
+  },
+  { deep: true }
+)
+
+/**
+ * @description:  监听tempMultipleChioce的变化，然后同步到页面上
+ * @return {*}
+ */
+const watchTempMultipleChioce = watch(
+  () => tempMultipleChioce.pf,
+  () => {
+    syncTempMultipleChioce()
+  },
+  { deep: true }
+)
+
+/**
+ * @description: 根据本地保存的方案信息，去初始化selectinfo的信息
+ * @return {*}
+ */
+const initSelectInfo = () => {
+  if (props.isRadio) {
+    watchTempMultipleChioce() // 如果是单选进来的，在这儿把多选的事件取消掉
+    syncSelectInfo() // 同步一下数据
+  } else {
+    watchSelectPf() // 与上面同理
+    syncTempMultipleChioce() // 同理
+  }
+}
+
+// 去加载一下本地的信息
+initSelectInfo()
+
 onMounted(() => {
   // 去加载所有需要的资源
 
@@ -109,12 +192,12 @@ onMounted(() => {
     <el-dropdown
       trigger="click"
       @visible-change="dropdownVis"
-      :hide-on-click="false"
+      :hide-on-click="props.isRadio"
       ref="dropDownRef"
     >
       <span class="displayBox">
         <div class="displayIcon">
-          <span class="iconItem" v-for="item in props.slectInfo">
+          <span class="iconItem" v-for="item in selectBaseInfo">
             <el-image
               v-if="item.isSelected"
               style="width: 20px; height: 20px; margin-right: 5px"
@@ -131,11 +214,10 @@ onMounted(() => {
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item
-            v-for="item in props.slectInfo"
+            v-for="item in selectBaseInfo"
             :key="item.value"
             :value="item.value"
             @click="selectPf(item)"
-            :disabled="!canSelect && !item.isSelected"
           >
             <el-image
               style="width: 20px; height: 20px; margin-right: 5px"
@@ -143,12 +225,7 @@ onMounted(() => {
               :fit="'cover'"
             />
             <!-- 禁用掉原生的点击事件，自己实现点击 -->
-            <el-checkbox
-              :disabled="!canSelect && !item.isSelected"
-              v-model="item.isSelected"
-              size="small"
-              @click.native.prevent="return"
-            />
+            <el-checkbox v-model="item.isSelected" size="small" @click.native.prevent="return" />
           </el-dropdown-item>
         </el-dropdown-menu>
         <span class="btnGroup">

src/components/dataAnalysis/DropDownSelection.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-23 14:42:47
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-09 09:58:18
+ * @LastEditTime: 2024-09-28 16:53:47
  * @FilePath: \Game-Backstage-Management-System\src\components\dataAnalysis\DropDownSelection.vue
  * @Description: 下拉选择框，可用于分类字段或者切换平台等
  * 
@@ -32,6 +32,7 @@ const changeSelect = (val: any) => {
       @change="changeSelect"
       v-model="selectVal"
       :placeholder="title"
+      filterable
       :size="props.size ? props.size : 'small'"
     >
       <el-option

src/components/dataAnalysis/HeaderCard.vue

@@ -11,14 +11,12 @@ import router from '@/router'
 import type { HeaderCardProps, IconDropdownItem } from '@/types/dataAnalysis'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import WithIconSelect from '@/components/common/WithIconSelect.vue'
-import { useCommonStore } from '@/stores/useCommon'
-
-const { selectInfo } = useCommonStore()
 
 const props = withDefaults(defineProps<HeaderCardProps>(), {
   openDateSelect: false,
   needPfSelect: true,
-  needBreadcrumb: false
+  needBreadcrumb: false,
+  isRadio: true
 })
 
 const emits = defineEmits(['changePf', 'changeDate'])
@@ -72,6 +70,7 @@ const disableDate = (time: Date) => {
   return time.getTime() > Date.now()
 }
 
+// 面包屑列表
 const breadcrumbList = reactive<
   Array<{
     title: string
@@ -139,10 +138,6 @@ const pfSelectInfo = reactive<Array<IconDropdownItem>>([
   }
 ])
 
-const changePlatForm = (val: Array<any>) => {
-  selectInfo.pf = [val[0]]
-}
-
 /**
  * @description: 监控当前路由，每次路由改变都要去执行clearBreadcrumb，来判断是否需要清除当前面包屑
  * @param {*} watch
@@ -156,41 +151,18 @@ const watchRoute = watch(
   { deep: true }
 )
 
-/**
- * @description: 这里是为了去监控store中的pf，pf变化的时候，emits最新的pf
- *   整体的流程是：当下拉框改变，他会emtis一个事件出来，这个时候，headercard组件接收新的值,去改变store中的pf
- *   headercard组件中还有一个watch，用来监听store中的pf，一旦改变那么就去重新给下拉选择框赋值，并且etmiss一次
- *   这个watch会在开始的时候执行一次，用来在页面加载的时候，给下拉框赋值，并且请求
- * @return {*}
- */
-watch(
-  () => selectInfo.pf,
-  (newPf) => {
-    emits('changePf', [newPf[0]])
-    pfSelectInfo.forEach((item) => {
-      if (item.value === newPf[0]) {
-        item.isSelected = true
-      } else {
-        item.isSelected = false
-      }
-    })
-  },
-  { immediate: true, deep: true }
-)
-
 if (!props.needBreadcrumb) watchRoute()
 
 defineExpose({
   addPath,
   clearBreadcrumb
 })
-
+dateChange(selectDate.value)
 onMounted(() => {
   breadcrumbList.push({
     title: props.title,
     pathName: router.currentRoute.value.name as string
   })
-  dateChange(selectDate.value)
 })
 </script>
 
@@ -218,7 +190,7 @@ onMounted(() => {
     <div class="selectBox" v-if="props.needPfSelect">
       <el-divider direction="vertical" />
       <div class="selectItem">
-        <WithIconSelect @change-pf="changePlatForm" :slect-info="pfSelectInfo"></WithIconSelect>
+        <WithIconSelect :is-radio="props.isRadio" :slect-info="pfSelectInfo"></WithIconSelect>
       </div>
     </div>
     <div v-if="props.openDateSelect" class="datePicker">

src/components/dataAnalysis/TemporalTrend.vue

@@ -330,7 +330,8 @@ watch(
     getData(1)
   },
   {
-    deep: true
+    deep: true,
+    immediate: true
   }
 )
 

src/components/form/Form.vue

@@ -40,7 +40,7 @@ const submitFormData = (otherOption?: any) => {
       if (vaild) {
         submitForm(formRef.value, props.config.reqConfig.url, { ...formData, ...otherOption })
           .then(() => {
-            emits('subForm')
+            emits('subForm', JSON.parse(JSON.stringify(formData)))
             reslove(true)
           })
           .catch((err) => {

src/components/form/MyInput.vue

@@ -1,3 +1,12 @@
+<!--
+ * @Author: fxs bjnsfxs@163.com
+ * @Date: 2024-08-22 17:31:50
+ * @LastEditors: fxs bjnsfxs@163.com
+ * @LastEditTime: 2024-09-25 09:03:33
+ * @FilePath: \Game-Backstage-Management-System\src\components\form\MyInput.vue
+ * @Description: 
+ * 
+-->
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import type { RuleInfo } from '@/types/input'

src/hooks/useTable.ts

@@ -64,32 +64,6 @@ export function useTable(tableData: Array<any>, paginationSetting: TablePaginati
             paginationSetting.total = 0
           }
           reslove(true)
-          // analysisResCode(data)
-          //   .then((info) => {
-          //     let data = info.data
-
-          //     // 如果开启了分页，那么默认这个tabledata是一个二维数组，每个位置对应当页的一个数据数组
-          //     // 没开启则是一个一维数组，直接赋值
-          //     if (isPagination) {
-          //       tableData[paginationSetting.currentPage] = data
-          //     } else {
-          //       tableData.splice(0, tableData.length, ...data)
-          //     }
-
-          //     // 如果有的接口没有返回count属性，就需要自己写
-          //     // 这个length，如果数组长为0，则需要自己赋值，不然会报错
-          //     if (info.count) paginationSetting.total = info.count
-          //     else if (info.data) {
-          //       paginationSetting.total = info.data.length
-          //     } else {
-          //       paginationSetting.total = 0
-          //     }
-          //     reslove(true)
-          //   })
-          //   .catch((err) => {
-          //     console.log(err)
-          //     throw new Error('请求失败')
-          //   })
         })
       } catch (err) {
         console.log(err)

src/stores/useCommon.ts

@@ -2,23 +2,66 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-28 11:46:10
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-13 15:45:29
+ * @LastEditTime: 2024-09-28 17:10:24
  * @FilePath: \Game-Backstage-Management-System\src\stores\useCommon.ts
  * @Description:通用的store，在多个页面均会使用
  *
  */
 import { reactive } from 'vue'
 import { defineStore } from 'pinia'
+import { getLocalInfo, saveLocalInfo } from '@/utils/localStorage/localStorage'
 
 interface SelectInfo {
   gid: string
   pf: Array<string>
 }
 
+interface GameInfo {
+  gid: string
+  gameName: string
+}
+
 export const useCommonStore = defineStore('commonStore', () => {
+  // 这里是是为了去初始化selectInfo，当用户第一次进入网站的时候，是没有selectInfo的，所以需要初始化
+  let gid = getLocalInfo('selectInfo', 'gid')
+  gid = gid ? gid : '1001'
+  let pf = getLocalInfo('selectInfo', 'pf')
+  pf = pf ? pf : ['wx']
   const selectInfo = reactive<SelectInfo>({
-    gid: '1001',
-    pf: ['wx']
+    gid: gid as string,
+    pf: pf as string[]
+  })
+
+  saveLocalInfo('selectInfo', selectInfo)
+
+  // 同上
+  let tempPf = getLocalInfo('tempMultipleChioce', 'pf')
+  tempPf = tempPf ? tempPf : [selectInfo.pf[0]]
+
+  // 临时使用的多选pf，为了不与selectInfo冲突
+  // pf初始化的时候更seleinfo的一致，但是后续的修改不会影响selectInfo
+  const tempMultipleChioce = reactive<SelectInfo>({
+    gid: gid as string,
+    pf: tempPf as string[]
   })
-  return { selectInfo }
+  saveLocalInfo('tempMultipleChioce', tempMultipleChioce)
+
+  /**
+   * @description: 保存现有的selectInfo
+   * @return {*}
+   */
+  const saveSelectInfo = () => {
+    localStorage.setItem('selectInfo', JSON.stringify(selectInfo))
+  }
+
+  /**
+   * @description: 保存现有的tempMultipleChioce
+   * @return {*}
+   */
+  const saveTempMultipleChioce = () => {
+    localStorage.setItem('tempMultipleChioce', JSON.stringify(tempMultipleChioce))
+  }
+
+  const allGameInfo = reactive<Array<GameInfo>>([])
+  return { selectInfo, allGameInfo, tempMultipleChioce, saveSelectInfo, saveTempMultipleChioce }
 })

src/types/dataAnalysis.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-23 14:58:29
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-13 16:29:32
+ * @LastEditTime: 2024-09-28 11:28:23
  * @FilePath: \Game-Backstage-Management-System\src\types\dataAnalysis.ts
  * @Description:用于dataAnalysis相关组件的type
  *
@@ -111,6 +111,7 @@ export interface HeaderCardProps {
   openDateSelect?: boolean // 是否开启时间选择
   needPfSelect?: boolean // 是否需要平台选择
   needBreadcrumb?: boolean // 是否需要面包屑导航
+  isRadio?: boolean // 是否为单选
 }
 
 // 趋势图组件需要的信息

src/utils/localStorage/localStorage.ts

@@ -0,0 +1,36 @@
+/**
+ * @description: 从本地拿数据
+ * @param {string} name locastorage的key
+ * @param {string} prop 属性名，不传就返回整个对象
+ * @return {*}
+ */
+const getLocalInfo = (name: string, prop?: string): string | string[] => {
+  let selectInfo = localStorage.getItem(name)
+  if (selectInfo) {
+    let jsonSelectInfo = JSON.parse(selectInfo)
+
+    if (prop) return jsonSelectInfo[prop]
+    else return jsonSelectInfo
+  }
+  return ''
+}
+
+/**
+ * @description: 保存到本地
+ * @param {string} name locastorage的key
+ * @param {any} value 值
+ * @param {string} prop 属性名
+ * @return {*}
+ */
+const saveLocalInfo = (name: string, value: any, prop?: string) => {
+  let selectInfo = localStorage.getItem(name)
+  if (selectInfo) {
+    let jsonSelectInfo = JSON.parse(selectInfo)
+    if (prop) jsonSelectInfo[prop] = value
+    localStorage.setItem('selectInfo', JSON.stringify(jsonSelectInfo))
+  } else {
+    localStorage.setItem('selectInfo', JSON.stringify(value))
+  }
+}
+
+export { getLocalInfo, saveLocalInfo }

src/views/AppManage/EventMangeTable.vue

@@ -124,7 +124,7 @@ const eventStatus: Array<SelectInfo> = [
 const queryInfo: Array<QueryInfo> = [
   {
     name: 'search',
-    label: '',
+    label: '事件名',
     type: FilterType.INPUT,
     placeholder: '请输入事件名搜索',
     default: ''

src/views/Home/Analysis/EventAnalysisDetail.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-27 17:11:23
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-13 14:41:37
+ * @LastEditTime: 2024-09-28 16:21:52
  * @FilePath: \Game-Backstage-Management-System\src\views\Home\Analysis\EventAnalysisDetail.vue
  * @Description: 
  * 
@@ -12,11 +12,13 @@ import Table from '@/components/Table.vue'
 import TemporalTrend from '@/components/dataAnalysis/TemporalTrend.vue'
 import { resetTimeToMidnight } from '@/utils/common'
 
-import { onMounted, reactive, ref, watch } from 'vue'
+import { computed, reactive, watch } from 'vue'
 import { useRequest } from '@/hooks/useRequest'
 import { useRoute } from 'vue-router'
 import { useAnalysis } from '@/hooks/useAnalysis'
 
+import { useCommonStore } from '@/stores/useCommon'
+
 import type {
   ReqConfig,
   ResDataFieldInfo,
@@ -25,7 +27,9 @@ import type {
   TrendTableField
 } from '@/types/dataAnalysis'
 import { type TablePaginationSetting, type TableFieldInfo } from '@/types/table'
+import router from '@/router'
 
+const { selectInfo, tempMultipleChioce } = useCommonStore()
 const { updateReqConfig } = useAnalysis()
 
 interface eventDetailProps {
@@ -40,7 +44,26 @@ const props = withDefaults(defineProps<eventDetailProps>(), {
 
 const { AllApi } = useRequest()
 
-const eventId = ref(-1)
+/**
+ * @description: 通过计算属性来得到当前的eventID
+ * @return {*}
+ */
+const eventId = computed(() => {
+  const routes = useRoute()
+
+  let query_actionId = routes.query.id as string
+
+  if (query_actionId) {
+    return parseInt(query_actionId)
+  } else {
+    ElMessage.error({
+      message: '参数错误，请返回事件分析页',
+      duration: 1000
+    })
+    router.push('/home/dataAnalysis/eventAnalysisView/eventAnalysisTable')
+    return -1
+  }
+})
 
 // 表格分页设置
 const pagingConfig = reactive<TablePaginationSetting>({
@@ -137,6 +160,7 @@ const tabInfo: Array<TabInfo> = [
   }
 ]
 
+// chart所需要的props
 const chartProps = reactive<TemporalTrendProps>({
   title: '事件趋势',
   type: 2,
@@ -146,40 +170,33 @@ const chartProps = reactive<TemporalTrendProps>({
   tabInfo
 })
 
-const initParams = () => {
-  const routes = useRoute()
-  let query_actionId = routes.query.id as string
-
-  if (query_actionId) {
-    eventId.value = parseInt(query_actionId)
-  }
+/**
+ * @description: 更新请求参数
+ * @param {*} gid gid
+ * @param {*} pf 平台
+ * @param {*} startTime 开始时间
+ * @param {*} endTime 结束时间
+ * @return {*}
+ */
+const updateSelectInfo = (gid: string, pf: Array<string>, startTime: string, endTime: string) => {
+  updateReqConfig(chartReqConfig, { pf, gid, startTime, endTime })
+  updateReqConfig(tableRequestConfig, { pf, gid, startTime, endTime })
 }
 
 /**
- * @description: 监听时间变化，去重新请求数据
+ * @description: 监听选择属性的变化
  * @return {*}
  */
 watch(
-  () => [props.startTime, props.endTime, eventId],
-  ([newStart, newEnd, newId]) => {
-    updateReqConfig(chartReqConfig, {
-      id: newId,
-      startTime: newStart,
-      endTime: newEnd
-    })
-    updateReqConfig(tableRequestConfig, {
-      id: newId,
-      startTime: newStart,
-      endTime: newEnd
-    })
-    // eventTable.value.getData()
+  () => [selectInfo.gid, tempMultipleChioce.pf, props.startTime, props.endTime],
+  ([gid, pf, startTime, endTime]) => {
+    updateSelectInfo(gid as string, pf as Array<string>, startTime as string, endTime as string)
   },
   {
-    deep: true
+    deep: true,
+    immediate: true
   }
 )
-initParams()
-onMounted(() => {})
 </script>
 <template>
   <div class="eventDetail">

src/views/Home/Analysis/EventAnalysisTable.vue

@@ -1,11 +1,4 @@
 <script setup lang="ts">
-import Table from '@/components/Table.vue'
-
-import { reactive, ref } from 'vue'
-import { useRequest } from '@/hooks/useRequest'
-import { useCommonStore } from '@/stores/useCommon'
-import { resetTimeToMidnight } from '@/utils/common'
-
 import type { ReqConfig } from '@/types/dataAnalysis'
 import {
   type TablePaginationSetting,
@@ -13,16 +6,30 @@ import {
   type QueryInfo,
   FilterType
 } from '@/types/table'
-import router from '@/router'
 
+import Table from '@/components/Table.vue'
+
+import { onActivated, reactive, ref } from 'vue'
+import { useRequest } from '@/hooks/useRequest'
+import { useCommonStore } from '@/stores/useCommon'
+import { resetTimeToMidnight } from '@/utils/common'
+
+import { useAnalysis } from '@/hooks/useAnalysis'
 import { usePage } from '@/hooks/usePage'
+
+import router from '@/router'
+
+const { updateReqConfig } = useAnalysis()
 const { watchPageChange } = usePage()
 
 const { AllApi } = useRequest()
-const { selectInfo } = useCommonStore()
+const { selectInfo, tempMultipleChioce } = useCommonStore()
 
 const eventTable = ref<InstanceType<typeof Table>>()
 
+// 是否是单选的pf
+const isSinglePf = false
+
 // 主要为了给面包屑导航提供信息
 const emits = defineEmits(['enterDetail'])
 
@@ -88,6 +95,7 @@ const tableFieldsInfo = reactive<Array<TableFieldInfo>>([
 const requestConfig = reactive<ReqConfig>({
   url: AllApi.userActionList,
   otherOptions: {
+    pf: selectInfo.pf,
     gid: selectInfo.gid,
     startTime: props.startTime,
     endTime: props.endTime
@@ -128,8 +136,7 @@ const viewDetails = (row: any) => {
  * @return {*}
  */
 const updateDate = (startTime: string, endTime: string) => {
-  requestConfig.otherOptions.startTime = startTime
-  requestConfig.otherOptions.endTime = endTime
+  updateReqConfig(requestConfig, { startTime, endTime })
 }
 
 /**
@@ -137,14 +144,16 @@ const updateDate = (startTime: string, endTime: string) => {
  * @param {*} newGid 新的gid
  * @return {*}
  */
-const updateGid = (newGid: string) => {
-  requestConfig.otherOptions.gid = newGid
+const updateGid = (gid: string, pf: any) => {
+  pf = isSinglePf ? pf[0] : pf
+  updateReqConfig(requestConfig, { pf, gid })
 }
 
 const backupDate = reactive([])
 const backupSelect = reactive([])
 
-watchPageChange(() => [selectInfo.gid], backupSelect, updateGid)
+// 这里特殊一点，监听pf的时候去监听临时的pf，但是gid还是和其他一样
+watchPageChange(() => [selectInfo.gid, tempMultipleChioce.pf], backupSelect, updateGid)
 
 watchPageChange(() => [props.startTime, props.endTime], backupDate, updateDate)
 </script>
@@ -161,6 +170,7 @@ watchPageChange(() => [props.startTime, props.endTime], backupDate, updateDate)
         :pagination-config="pagingConfig"
         :table-fields-info="tableFieldsInfo"
         :need-left-tools="false"
+        :need-right-tools="true"
       >
         <template #tableOperation>
           <el-table-column label="操作" align="center">

src/views/Home/Analysis/EventAnalysisView.vue

@@ -2,19 +2,19 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-27 17:11:23
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-13 16:05:45
+ * @LastEditTime: 2024-09-28 17:40:37
  * @FilePath: \Game-Backstage-Management-System\src\views\Home\Analysis\EventAnalysisView.vue
  * @Description: 
  * 
 -->
 <script setup lang="ts">
+import type { HeaderCardProps } from '@/types/dataAnalysis'
+
 import HeaderCard from '@/components/dataAnalysis/HeaderCard.vue'
 import { resetTimeToMidnight } from '@/utils/common'
 import { shouldListenToEvent } from '@/utils/table/table'
 import { reactive, ref } from 'vue'
 
-import type { HeaderCardProps } from '@/types/dataAnalysis'
-
 // 顶部ref
 const headerCard = ref()
 
@@ -46,6 +46,7 @@ const headerAddPath = (info: any) => {
  * @return {*}
  */
 const dateChange = (newDate: Array<Date>) => {
+  console.log(newDate)
   startTime.value = resetTimeToMidnight(newDate[0])
   endTime.value = resetTimeToMidnight(newDate[1])
 }
@@ -58,12 +59,14 @@ const dateChange = (newDate: Array<Date>) => {
         :title="headerProps.title"
         :open-date-select="headerProps.openDateSelect"
         :need-breadcrumb="true"
-        :need-pf-select="false"
+        :need-pf-select="true"
+        :is-radio="false"
         @change-date="dateChange"
       ></HeaderCard>
     </div>
 
-    <div class="content">
+    <!-- 等时间改变后再去请求，不然会请求两次 -->
+    <div class="content" v-if="startTime && endTime">
       <!-- 监听表格的跳转事件 -->
       <router-view v-slot="{ Component, route }" :startTime="startTime" :endTime="endTime">
         <!-- 是eventtable组件就去监听enterdetail事件 -->

src/views/Home/Analysis/KeepView.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-27 17:11:23
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-13 16:08:50
+ * @LastEditTime: 2024-09-28 12:02:07
  * @FilePath: \Game-Backstage-Management-System\src\views\Home\Analysis\KeepView.vue
  * @Description: 
  * 
@@ -28,10 +28,8 @@ const { selectInfo } = useCommonStore()
 
 const { AllApi, analysisResCode } = useRequest()
 
-// 选择的信息
-const keepViewSelect = reactive({
-  pf: selectInfo.pf[0]
-})
+// 是否是单选的pf
+const isSinglePf = true
 
 const loading = ref(true) // 加载状态
 
@@ -51,7 +49,7 @@ const keepDataTableInfo = reactive<{
   requestConfig: {
     url: AllApi.userRemainDataBydDay,
     otherOptions: {
-      pf: keepViewSelect.pf,
+      pf: selectInfo.pf,
       gid: selectInfo.gid,
       startTime: resetTimeToMidnight(new Date()),
       endTime: resetTimeToMidnight(new Date()),
@@ -131,15 +129,6 @@ const keepDataTableInfo = reactive<{
 const keepTableData = reactive<Array<any>>([])
 
 /**
- * @description: 选择的平台改变
- * @param {*} pf  选择的平台数组，暂时只用第一个
- * @return {*}
- */
-const changePf = (pf: Array<string>) => {
-  keepViewSelect.pf = pf[0]
-}
-
-/**
  * @description: 当日期改变，需要去更新三个组件的请求参数
  * @param {*} date
  * @return {*}
@@ -199,50 +188,15 @@ const getTableData = () => {
  * @return {*}
  */
 const updateAllReq = (pf: string, gid: string) => {
+  pf = isSinglePf ? pf[0] : pf
   updateReqConfig(keepDataTableInfo.requestConfig, { pf, gid })
 }
 
 const backupReq = reactive([])
 const backupSelect = reactive([])
 
-watchPageChange(() => [keepViewSelect.pf, selectInfo.gid], backupSelect, updateAllReq)
+watchPageChange(() => [selectInfo.pf, selectInfo.gid], backupSelect, updateAllReq)
 watchPageChange(() => [keepDataTableInfo.requestConfig], backupReq, getTableData)
-
-// onActivated(() => {
-//   /**
-//    * @description: 单独监听一下他的变化，去手动更新数据
-//    * @return {*}
-//    */
-//   watchReq = watch(
-//     () => keepDataTableInfo.requestConfig,
-//     () => {
-//       getTableData()
-//     },
-//     { deep: true, immediate: true }
-//   )
-
-//   /**
-//    * @description: 监听pf和gid的变化，数据变化后立即重新请求所有相关数据
-//    * @tip watch监听reactive的数据时，必须以getter形式，不然会警告
-//    * @return {*}
-//    */
-
-//   watchSelectInfo = watch(
-//     () => [keepViewSelect.pf, selectInfo.gid],
-//     ([newPf, newGid]) => {
-//       updateReqConfig(keepDataTableInfo.requestConfig, { pf: newPf, gid: newGid })
-//     },
-//     {
-//       deep: true,
-//       immediate: true
-//     }
-//   )
-// })
-
-// onDeactivated(() => {
-//   watchReq()
-//   watchSelectInfo()
-// })
 </script>
 <template>
   <div class="KeepViewBox">
@@ -250,7 +204,6 @@ watchPageChange(() => [keepDataTableInfo.requestConfig], backupReq, getTableData
       <HeaderCard
         :title="headerCardInfo.title"
         :open-date-select="headerCardInfo.openDateSelect"
-        @change-pf="changePf"
         @change-date="changeDate"
       ></HeaderCard>
     </div>

src/views/Home/Analysis/UserTrendView.vue

@@ -22,11 +22,8 @@ const { selectInfo } = useCommonStore()
 // 总览数据的ref
 const userTrendStaticRef = ref()
 
-// 目前选择的信息
-// 这里不太合理，应该根据返回的数据中的pf和game赋值，因为这个可能会变
-const userTrendSelectInfo = reactive({
-  pf: 'wx'
-})
+// 是否是单选的pf
+const isSinglePf = true
 
 // 总览数据的字段对应的信息
 const userTrendStaticFieldInfo: Array<StaticField> = [
@@ -61,7 +58,7 @@ const userTrendStaticFieldInfo: Array<StaticField> = [
 const userTrendDataReqConfig = reactive<ReqConfig>({
   url: AllApi.userTrendsOverview,
   otherOptions: {
-    pf: userTrendSelectInfo.pf,
+    pf: selectInfo.pf[0],
     gid: selectInfo.gid,
     startTime: resetTimeToMidnight(new Date()),
     endTime: resetTimeToMidnight(new Date())
@@ -73,7 +70,7 @@ const dataTrendInfo = reactive<TemporalTrendInfo>({
   dataReqConfig: {
     url: AllApi.userDataTrades,
     otherOptions: {
-      pf: userTrendSelectInfo.pf,
+      pf: selectInfo.pf[0],
       gid: selectInfo.gid,
       startTime: resetTimeToMidnight(new Date()),
       endTime: resetTimeToMidnight(new Date())
@@ -213,7 +210,7 @@ const detailDataTableInfo = reactive<{
   requestConfig: {
     url: AllApi.userDataTradesDetail,
     otherOptions: {
-      pf: userTrendSelectInfo.pf,
+      pf: selectInfo.pf[0],
       gid: selectInfo.gid,
       startTime: resetTimeToMidnight(new Date()),
       endTime: resetTimeToMidnight(new Date())
@@ -269,15 +266,6 @@ const detailDataTableInfo = reactive<{
 const detailDataTableData = reactive<Array<any>>([])
 
 /**
- * @description: 选择的平台改变
- * @param {*} pf  选择的平台数组，暂时只用第一个
- * @return {*}
- */
-const changePf = (pf: Array<string>) => {
-  userTrendSelectInfo.pf = pf[0]
-}
-
-/**
  * @description: 当日期改变，需要去更新三个组件的请求参数
  * @param {*} date
  * @return {*}
@@ -332,6 +320,7 @@ const getDetailData = () => {
  * @return {*}
  */
 const updateAllReq = (pf: string, gid: string) => {
+  pf = isSinglePf ? pf[0] : pf
   updateReqConfig(userTrendDataReqConfig, { pf, gid })
   updateReqConfig(dataTrendInfo.dataReqConfig, { pf, gid })
   updateReqConfig(detailDataTableInfo.requestConfig, { pf, gid })
@@ -346,91 +335,14 @@ const backupReq = reactive([]) // 保存请求参数
 
 const backupSelect = reactive([]) // 保存选择数据
 
-watchPageChange(() => [userTrendSelectInfo.pf, selectInfo.gid], backupSelect, updateAllReq)
+watchPageChange(() => [selectInfo.pf, selectInfo.gid], backupSelect, updateAllReq)
 watchPageChange(() => [detailDataTableInfo.requestConfig], backupReq, getDetailData)
-
-// onActivated(() => {
-//   /**
-//    * @description: 监听pf和gid的变化，数据变化后立即重新请求所有相关数据
-//    * @tip watch监听reactive的数据时，必须以getter形式，不然会警告
-//    * @return {*}
-//    */
-
-//   console.log('执行')
-//   if (!compareWatchData(backupSelect, { pf: userTrendSelectInfo.pf, gid: selectInfo.gid })) {
-//     console.log('compare')
-
-//     updateAllReq(userTrendSelectInfo.pf, selectInfo.gid)
-//   }
-
-//   if (!watchSelect) {
-//     watchSelect = watch(
-//       () => [userTrendSelectInfo.pf, selectInfo.gid],
-//       ([newPf, newGid]) => {
-//         console.log('change')
-//         updateAllReq(newPf, newGid)
-//       },
-//       { deep: true }
-//     )
-//   }
-
-//   if (!compareWatchData(backupReq, detailDataTableInfo.requestConfig)) {
-//     console.log('compare1')
-//     getDetailData()
-//   }
-
-//   if (!watchReq) {
-//     watchReq = watch(
-//       () => detailDataTableInfo.requestConfig,
-//       () => {
-//         if (compareWatchData(backupReq, detailDataTableInfo.requestConfig)) {
-//           console.log('change1')
-//           getDetailData()
-//         }
-//       },
-//       { deep: true }
-//     )
-//   }
-// })
-
-// onDeactivated(() => {
-//   if (watchReq) {
-//     saveWatchData(detailDataTableInfo.requestConfig, backupReq)
-//     watchReq()
-//     watchReq = null
-//   }
-
-//   if (watchSelect) {
-//     saveWatchData(
-//       {
-//         pf: userTrendSelectInfo.pf,
-//         gid: selectInfo.gid
-//       },
-//       backupSelect
-//     )
-//     watchSelect()
-//     watchSelect = null
-//   }
-// })
-
-// watch(
-//   () => test.name,
-//   (newdata) => {
-//     console.log('本地')
-//     console.log(newdata)
-//   },
-//   {
-//     deep: true
-//   }
-// )
 </script>
 <template>
   <div class="userTrendBox">
     <div class="header">
       <HeaderCard
         :open-date-select="true"
-        :default-pf="userTrendSelectInfo.pf"
-        @change-pf="changePf"
         @change-date="changeDate"
         :title="'数据总览'"
       ></HeaderCard>

src/views/Home/InfoManage/GameManageView.vue

@@ -2,7 +2,8 @@
 import Dialog from '@/components/common/Dialog.vue'
 import Table from '@/components/Table.vue'
 
-import { type TablePaginationSetting, type TableFieldInfo } from '@/types/table'
+import type { TablePaginationSetting, TableFieldInfo, QueryInfo } from '@/types/table'
+import { FilterType } from '@/types/table'
 import type { FormRules } from 'element-plus'
 import type { DialogConfig } from '@/types/dialog'
 import type { FormField } from '@/types/form'
@@ -10,7 +11,9 @@ import { FormFieldType } from '@/types/form'
 
 import { onMounted, reactive, ref } from 'vue'
 import { useRequest } from '@/hooks/useRequest'
+import { useCommonStore } from '@/stores/useCommon'
 
+const { allGameInfo } = useCommonStore()
 const { AllApi } = useRequest()
 
 const gameTableRef = ref<InstanceType<typeof Table>>()
@@ -72,6 +75,16 @@ const filedsInfo = reactive<Array<TableFieldInfo>>([
   }
 ])
 
+// 查询字段设置
+const queryInfo: Array<QueryInfo> = [
+  {
+    name: 'gameName',
+    label: '游戏名',
+    type: FilterType.INPUT,
+    placeholder: '请输入游戏名进行搜索'
+  }
+]
+
 // 表单校验规则
 const gameFormRule = reactive({
   gameName: '',
@@ -224,15 +237,17 @@ const handleEdit = (row: any) => {
   gameDialogRef.value.editForm(row)
 }
 
-const formSub = () => {
+const formSub = (formData: any) => {
+  allGameInfo.push({
+    gid: formData.gid,
+    gameName: formData.gameName
+  })
   gameTableRef.value?.getData()
 }
 
 onMounted(() => {
   gameTableRef.value?.getData()
 })
-
-// gameTableRef.value?.getData()
 </script>
 <template>
   <div class="gameMangeBox">
@@ -242,8 +257,9 @@ onMounted(() => {
       :need-average="false"
       :need-right-tools="true"
       :need-left-tools="true"
-      :open-filter-query="false"
+      :open-filter-query="true"
       :open-page-query="false"
+      :query-info="queryInfo"
       :table-fields-info="filedsInfo"
       :request-config="requestConfig"
       :pagination-config="paginationConfig"

src/views/Home/InfoManage/PlayerManageView.vue

@@ -25,11 +25,16 @@ import { FormFieldType } from '@/types/form'
 import { useTableStore } from '@/stores/useTable'
 import { useRequest } from '@/hooks/useRequest'
 import { useCommonStore } from '@/stores/useCommon'
+import { useAnalysis } from '@/hooks/useAnalysis'
+const { updateReqConfig } = useAnalysis()
 
 const { AllApi, analysisResCode } = useRequest()
 
 const tableStore = useTableStore()
-const commonStore = useCommonStore()
+const { selectInfo } = useCommonStore()
+
+// 是否是单选pf
+const isSinglePf = true
 
 // 表格对象
 const playerTableRef = ref()
@@ -51,8 +56,8 @@ const requestConfig = reactive({
   otherOptions: {
     offset: 0,
     limit: paginationConfig.limit,
-    gid: commonStore.selectInfo.gid,
-    pf: tableStore.playerQueryInfo.pf
+    gid: selectInfo.gid,
+    pf: selectInfo.pf[0]
   }
 })
 
@@ -299,30 +304,10 @@ const encrypt = () => {
   playerDialogFormRef.value.encrypt('option', true, ['gid', 'userId', 'pf'])
 }
 
-// let watchGid: any = null
-
-// onActivated(() => {
-//   /**
-//    * @description: 监听gid的变化
-//    * @return {*}
-//    */
-//   watchGid = watch(
-//     () => commonStore.selectInfo.gid,
-//     (val) => {
-//       requestConfig.otherOptions.gid = val
-//     },
-//     {
-//       immediate: true
-//     }
-//   )
-// })
-
-// onDeactivated(() => {
-//   watchGid()
-// })
-
-const updateGid = (gid: any) => {
-  requestConfig.otherOptions.gid = gid
+const updateSelect = (gid: any, pf: any) => {
+  pf = isSinglePf ? pf[0] : pf
+  updateReqConfig(requestConfig, { pf, gid })
+  // requestConfig.otherOptions.gid = gid
 }
 
 const backupSelect = reactive([])
@@ -330,7 +315,7 @@ const backupSelect = reactive([])
 import { usePage } from '@/hooks/usePage'
 const { watchPageChange } = usePage()
 
-watchPageChange(() => [commonStore.selectInfo.gid], backupSelect, updateGid)
+watchPageChange(() => [selectInfo.gid, selectInfo.pf], backupSelect, updateSelect)
 
 onMounted(() => {
   tableStore.allGameInfo.map((item) => {

src/views/Home/Overview/OverView.vue

@@ -19,11 +19,8 @@ const { selectInfo } = useCommonStore()
 // 总览数据的ref
 const overviewStaticRef = ref()
 
-// 目前选择的信息
-// 这里不太合理，应该根据返回的数据中的pf和game赋值，因为这个可能会变
-const overViewSelectInfo = reactive({
-  pf: selectInfo.pf[0]
-})
+// 是否是单个pf选择
+const isSinglePf = true
 
 // 总览数据的字段对应的信息
 const overViewStaticFieldInfo: Array<StaticField> = [
@@ -53,7 +50,7 @@ const overViewStaticFieldInfo: Array<StaticField> = [
 const overViewDataReqConfig = reactive<ReqConfig>({
   url: AllApi.userSummary,
   otherOptions: {
-    pf: overViewSelectInfo.pf,
+    pf: selectInfo.pf[0],
     gid: selectInfo.gid
   }
 })
@@ -64,8 +61,8 @@ const periodInfo = reactive<TemporalTrendInfo>({
   dataReqConfig: {
     url: AllApi.timeDistributionData,
     otherOptions: {
-      pf: '',
-      gid: ''
+      pf: selectInfo.pf[0],
+      gid: selectInfo.gid
     }
   },
   tabList: toRaw([
@@ -166,8 +163,8 @@ const monthInfo = reactive<TemporalTrendInfo>({
   dataReqConfig: {
     url: AllApi.userMouthDistributionData,
     otherOptions: {
-      pf: '',
-      gid: ''
+      pf: selectInfo.pf[0],
+      gid: selectInfo.gid
     }
   },
   tabList: toRaw([
@@ -267,21 +264,13 @@ const monthInfo = reactive<TemporalTrendInfo>({
 })
 
 /**
- * @description: 选择的平台改变
- * @param {*} pf  选择的平台数组，暂时只用第一个
- * @return {*}
- */
-const changePf = (pf: Array<string>) => {
-  overViewSelectInfo.pf = pf[0]
-}
-
-/**
  * @description: 更新所有的请求接口
  * @param {*} pf 平台
  * @param {*} gid 游戏id
  * @return {*}
  */
 const updateAllReq = (pf: string, gid: string) => {
+  pf = isSinglePf ? pf[0] : pf
   updateReqConfig(overViewDataReqConfig, { pf, gid })
   updateReqConfig(periodInfo.dataReqConfig, { pf, gid })
   updateReqConfig(monthInfo.dataReqConfig, { pf, gid })
@@ -293,14 +282,13 @@ const updateAllReq = (pf: string, gid: string) => {
  * @tip watch监听reactive的数据时，必须以getter形式，不然会警告
  * @return {*}
  */
-
 const backupSelect = reactive([])
-watchPageChange(() => [overViewSelectInfo.pf, selectInfo.gid], backupSelect, updateAllReq)
+watchPageChange(() => [selectInfo.pf, selectInfo.gid], backupSelect, updateAllReq)
 </script>
 <template>
   <div class="overViewBox">
     <div class="header">
-      <HeaderCard :open-date-select="false" @change-pf="changePf" :title="'数据总览'"></HeaderCard>
+      <HeaderCard :open-date-select="false" :title="'数据总览'"></HeaderCard>
     </div>
     <div class="staticBox">
       <StatisticText

src/views/Index.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 14:06:49
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-18 11:56:31
+ * @LastEditTime: 2024-09-28 16:48:09
  * @FilePath: \Game-Backstage-Management-System\src\views\Index.vue
  * @Description: 
  * 
@@ -21,7 +21,7 @@ import { useCommonStore } from '@/stores/useCommon'
 import { initLoadResouce } from '@/utils/resource'
 
 const route = useRoute()
-const { selectInfo } = useCommonStore()
+const { selectInfo, allGameInfo, saveSelectInfo } = useCommonStore()
 const isCollapse = ref(false)
 const navBarSelect = ref<string>('Home')
 const siderBarOpened = ref<Array<string>>(['数据总览'])
@@ -83,6 +83,7 @@ const gameSelectInfo = reactive<DropDownInfo>({
  */
 const changeGame = (gid: any) => {
   selectInfo.gid = gid
+  saveSelectInfo()
 }
 
 /**
@@ -152,22 +153,67 @@ watch(
  * @description: 获取所有游戏列表
  * @return {*}
  */
-getAllGameInfo().then((data) => {
-  if (data) {
-    data.map((item) => {
-      gameSelectInfo.optionsList.push({
-        value: item.gid,
-        label: item.gameName
+const getGameInfo = () => {
+  getAllGameInfo().then((data) => {
+    if (data) {
+      data.map((item) => {
+        allGameInfo.push({
+          gid: item.gid,
+          gameName: item.gameName
+        })
+        gameSelectInfo.optionsList.push({
+          value: item.gid,
+          label: item.gameName
+        })
       })
-    })
-    gameSelectInfo.defaultSelect = data[0].gid
-    changeGame(data[0].gid)
-    loadingState.value = true
-  } else {
-    throw new Error('游戏信息获取失败')
+      gameSelectInfo.defaultSelect = data[0].gid
+      // 去找本地的gid，如果有，就赋值，否则用请求回来的第一个gid
+
+      changeGame(selectInfo.gid)
+      gameSelectInfo.defaultSelect = selectInfo.gid
+
+      loadingState.value = true
+    } else {
+      throw new Error('游戏信息获取失败')
+    }
+  })
+}
+
+/**
+ * @description: 监听游戏列表的变化
+ * @return {*}
+ */
+let watchGameListChange: () => void = () => {}
+
+/**
+ * @description: 监听加载状态的变化，加载完成的时候，给游戏列表的监听器赋值,然后把自己这个监听器摧毁
+ * @return {*}
+ */
+const watchLoadingState = watch(
+  () => loadingState,
+  (newval) => {
+    if (newval) {
+      watchGameListChange = watch(
+        () => allGameInfo,
+        (newVal) => {
+          gameSelectInfo.optionsList.push({
+            value: newVal[newVal.length - 1].gid,
+            label: newVal[newVal.length - 1].gameName
+          })
+        },
+        { deep: true }
+      )
+      watchLoadingState()
+    } else {
+      watchGameListChange()
+    }
+  },
+  {
+    deep: true
   }
-})
+)
 
+getGameInfo()
 onMounted(() => {
   // 去加载所有需要的资源
   initLoadResouce(resourceInfo).then((data) => {