首页大屏处理异步加载不生效问题

yudao-ui/yudao-ui-admin-vue3/src/views/Home/Index.vue

@@ -77,7 +77,7 @@
             :data="homeInfoKhxzdjzbqk"
             :total="200"
             tooltipTip="客户性质等级占比情况"
-            
+
           />
         </div>
         <div>
@@ -95,7 +95,7 @@
             :data="homeInfoKhbffszbqk"
             :total="200"
             tooltipTip="客户拜访方式占比情况"
-           
+
           />
         </div>
         <div>
@@ -103,7 +103,7 @@
             :data="homeInfoKhbmzbqk"
             :total="200"
             tooltipTip="客户部门占比情况"
-           
+
           />
         </div>
         <div>
@@ -211,127 +211,77 @@ const homeInfoBfrtjVal = ref('拜访日统计')
 // 获取图表数据
 const getEcharts = async () => {
   error.value = ''
-  let params: any = {
+  loading.value = true
+
+  const params: any = {
     companyName: searchKey.value,
     searchTimeString: timeRange.value
   }
+
   try {
-    // 卡片数据
-    homesApi
-      .getHomeInfoFirst(params)
-      .then((res: any) => {
+    const allTasks = [
+      homesApi.getHomeInfoFirst(params).then((res) => {
         homeInfoFirst.value = res
         console.log('卡片数据:', res)
-      })
-      .catch((err) => {
-        console.error('卡片数据获取失败:', err)
-        error.value = '卡片数据获取失败'
-      })
+      }),
 
-    // 竖柱状图数据
-    homesApi
-      .getHomeInfoBfztj(params)
-      .then((res: any) => {
-        console.log('竖柱状图数据:', res)
+      homesApi.getHomeInfoBfztj(params).then((res) => {
         homeInfoBfztj.value = res
-      })
-      .catch((err) => {
-        console.error('竖柱状图数据获取失败:', err)
-        error.value = '竖柱状图数据获取失败'
-      })
+        console.log('竖柱状图数据:', res)
+      }),
 
-    // 折线图数据
-    homesApi
-      .getHomeInfoBfrtj(params)
-      .then((res: any) => {
-        console.log('折线图数据:', res)
+      homesApi.getHomeInfoBfrtj(params).then((res) => {
         homeInfoBfrtj.value = res
-      })
-      .catch((err) => {
-        console.error('折线图数据获取失败:', err)
-        error.value = '折线图数据获取失败'
-      })
+        console.log('折线图数据:', res)
+      }),
 
-    // 客户性质等级占比情况
-    homesApi
-      .getHomeInfoKhxzdjzbqk(params)
-      .then((res: any) => {
+      homesApi.getHomeInfoKhxzdjzbqk(params).then((res) => {
         homeInfoKhxzdjzbqk.value = res.list
-        console.log('客户性质等级占比:', res.list, homeInfoKhxzdjzbqk)
-      })
-      .catch((err) => {
-        console.error('客户性质等级占比获取失败:', err)
-        error.value = '客户性质等级占比获取失败'
-      })
+        console.log('客户性质等级占比:', res.list)
+      }),
 
-    // 拜访人均分布情况
-    homesApi
-      .getHomeInfoBfrjfbqk(params)
-      .then((res: any) => {
-        console.log('拜访人均分布:', res)
+      homesApi.getHomeInfoBfrjfbqk(params).then((res) => {
         homeInfoBfrjfbqk.value = res.list
-      })
-      .catch((err) => {
-        console.error('拜访人均分布获取失败:', err)
-        error.value = '拜访人均分布获取失败'
-      })
+        console.log('拜访人均分布:', res)
+      }),
 
-    // 客户拜访方式占比情况
-    homesApi
-      .getHomeInfoKhbffszbqk(params)
-      .then((res: any) => {
-        console.log('客户拜访方式占比:', res)
+      homesApi.getHomeInfoKhbffszbqk(params).then((res) => {
         homeInfoKhbffszbqk.value = res.list
-      })
-      .catch((err) => {
-        console.error('客户拜访方式占比获取失败:', err)
-        error.value = '客户拜访方式占比获取失败'
-      })
+        console.log('客户拜访方式占比:', res)
+      }),
 
-    // 客户部门占比情况
-    homesApi
-      .getHomeInfoKhbmzbqk(params)
-      .then((res: any) => {
-        console.log('客户部门占比:', res)
+      homesApi.getHomeInfoKhbmzbqk(params).then((res) => {
         homeInfoKhbmzbqk.value = res.list
-      })
-      .catch((err) => {
-        console.error('客户部门占比获取失败:', err)
-        error.value = '客户部门占比获取失败'
-      })
+        console.log('客户部门占比:', res)
+      }),
 
-    // 客户拜访类型占比情况
-    homesApi
-      .getHomeInfoKhbflxzbqk(params)
-      .then((res: any) => {
-        console.log('客户拜访类型占比:', res)
+      homesApi.getHomeInfoKhbflxzbqk(params).then((res) => {
         homeInfoKhbflxzbqk.value = res.list
-      })
-      .catch((err) => {
-        console.error('客户拜访类型占比获取失败:', err)
-        error.value = '客户拜访类型占比获取失败'
-      })
+        console.log('客户拜访类型占比:', res)
+      }),
 
-    // 拜访产品类型占比情况
-    homesApi
-      .getHomeInfoBfcplxzbqk(params)
-      .then((res: any) => {
-        console.log('拜访产品类型占比:', res)
+      homesApi.getHomeInfoBfcplxzbqk(params).then((res) => {
         homeInfoBfcplxzbqk.value = res.list
+        console.log('拜访产品类型占比:', res)
       })
-      .catch((err) => {
-        console.error('拜访产品类型占比获取失败:', err)
-        error.value = '拜访产品类型占比获取失败'
-      })
+    ]
 
-    loading.value = true
+    const results = await Promise.allSettled(allTasks)
+
+    results.forEach((result, index) => {
+      if (result.status === 'rejected') {
+        console.error(`第 ${index + 1} 个接口调用失败：`, result.reason)
+        error.value = '部分数据获取失败'
+      }
+    })
   } catch (err) {
-    console.error('数据获取出错:', err)
+    console.error('请求异常:', err)
     error.value = '数据获取出错，请重试'
   } finally {
     loading.value = false
   }
 }
+
 onMounted(() => {
   getEcharts()
 })