Эх сурвалжийг харах

feat(游戏选择框;PieBorderRadius): 游戏选择框可通过项目名筛选搜索;修复游戏选择框不更新的BUG;修复网络慢的情况下,饼图无法更新数据的BUG;

fxs 3 сар өмнө
parent
commit
e4525d52c0

+ 27 - 5
src/components/echarts/PieBorderRadius.vue

@@ -52,14 +52,36 @@ defineExpose({
   stopLoading
 })
 
+// watch(
+//   () => props.options,
+//   () => {
+//     initOptions()
+//   },
+//   {
+//     deep: true
+//   }
+// )
+
 watch(
   () => props.options,
-  () => {
-    initOptions()
+  (newVal) => {
+    if (!pieChart.value) return
+    if (!newVal) {
+      pieChart.value.clear()
+      pieChart.value.setOption({
+        title: {
+          text: '暂无数据',
+          left: 'center',
+          top: 'center',
+          textStyle: { fontSize: 16, fontWeight: 'normal' }
+        }
+      })
+    } else {
+      pieChart.value.clear()
+      pieChart.value.setOption(newVal, true)
+    }
   },
-  {
-    deep: true
-  }
+  { deep: true, immediate: true }
 )
 
 onMounted(() => {

+ 2 - 0
src/views/AppManage/GameManageView.vue

@@ -419,6 +419,8 @@ const handleEdit = (row: any) => {
 }
 
 const formSub = (formData: any, type: number) => {
+  console.log(formData)
+  console.log('更新Game')
   if (type === 0) {
     allGameInfo.push({
       gid: formData.gid,

+ 35 - 28
src/views/IndexView.vue

@@ -104,6 +104,8 @@ const changeCollapse = () => {
   isCollapse.value = !isCollapse.value
 }
 
+const backupOptionsList: Array<PlatformInfo> = []
+
 // 游戏下拉选择框需要的数据
 const gameSelectInfo = reactive<DropDownGroupInfo>({
   defaultSelect: '1001',
@@ -253,6 +255,7 @@ const setNavbarGameSelect = (optionsList: Array<PlatformInfo>) => {
     return
   }
   gameSelectInfo.optionsList.splice(0, gameSelectInfo.optionsList.length, ...optionsList)
+  backupOptionsList.splice(0, backupOptionsList.length, ...optionsList)
   // optionsList.forEach((item) => {
   //   if (!gameSelectInfo.optionsList.has(item.gameName)) {
   //     gameSelectInfo.optionsList.set(item.gameName, [
@@ -319,45 +322,48 @@ const updateNavbarGameSelect = async (query: string, force = false) => {
   }
 }
 
+const filterSelect = (query: string) => {
+  console.log('执行')
+  gameSelectInfo.optionsList = backupOptionsList.filter((item) => {
+    return (
+      item.pidName.includes(query) || item.gidList.find((item) => item.gameName.includes(query))
+    )
+  })
+}
+
 /**
  * 监听游戏列表的变化
  *
  * 此处只是声明,在后续加载完成后,会被赋值唯一一个监听器
  *
  */
-// let watchGameListChange: () => void = () => {}
+let watchGameListChange: () => void = () => {}
 
 /**
  * @description: 监听加载状态的变化,加载完成的时候,给游戏列表的监听器赋值,然后把自己这个监听器摧毁
  * @return {*}
  */
-// const watchLoadingState = watch(
-//   () => loadingState,
-//   (newVal) => {
-//     if (newVal) {
-//       // 用来监听游戏列表的变化
-//       watchGameListChange = watch(
-//         () => allGameInfo,
-//         (newGameInfo: Array<any>) => {
-//           gameSelectInfo.optionsList.splice(0, gameSelectInfo.optionsList.length)
-//           newGameInfo.forEach((item) => {
-//             gameSelectInfo.optionsList.push({
-//               value: item.gid,
-//               label: item.gameName
-//             })
-//           })
-//         },
-//         { deep: true }
-//       )
-//       watchLoadingState()
-//     } else {
-//       watchGameListChange()
-//     }
-//   },
-//   {
-//     deep: true
-//   }
-// )
+const watchLoadingState = watch(
+  () => loadingState,
+  (newVal) => {
+    if (newVal) {
+      // 用来监听游戏列表的变化
+      watchGameListChange = watch(
+        () => allGameInfo,
+        () => {
+          updateNavbarGameSelect('', true)
+        },
+        { deep: true }
+      )
+      watchLoadingState()
+    } else {
+      watchGameListChange()
+    }
+  },
+  {
+    deep: true
+  }
+)
 
 updateGameInfo()
 updateNavbarGameSelect('', true)
@@ -398,6 +404,7 @@ onMounted(() => {
               v-model="selectedGame"
               :placeholder="gameSelectInfo.placeholder"
               filterable
+              :filter-method="filterSelect"
               :loading="gameSelectLoading"
               v-bind="$attrs"
             >