fix(统计指标): 修复数据未加载时显示异常问题

修改统计指标组件和父组件的数据处理逻辑，确保在数据未加载或返回null时显示默认值0。同时将props类型从Number改为Object，并添加默认空对象防止访问属性错误。

my-vue-app/src/views/senorManger/components/StatisticalIndicators.vue

@@ -5,35 +5,35 @@
         <div class="stat-icon customer-rate">
           <i class="el-icon-chat-dot-round"></i>
         </div>
-        <div class="kpi-value">{{ customerCommunicationRate.active_customer_communication_rate||0 }}</div>
+        <div class="kpi-value">{{ (customerCommunicationRate && customerCommunicationRate.active_customer_communication_rate) || 0 }}</div>
         <p>活跃客户沟通率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'customerCommunicationRate')" @mouseleave="hideTooltip">ⓘ</i></p>
       </div>
       <div class="kpi-item stat-item">
         <div class="stat-icon response-time">
           <i class="el-icon-timer"></i>
         </div>
-        <div class="kpi-value">{{ averageResponseTime.average_answer_time||0 }}<span class="kpi-unit">分钟</span></div>
+        <div class="kpi-value">{{ (averageResponseTime && averageResponseTime.average_answer_time)||0 }}<span class="kpi-unit">分钟</span></div>
         <p>平均应答时间 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'averageResponseTime')" @mouseleave="hideTooltip">ⓘ</i></p>
       </div>
       <div class="kpi-item stat-item">
         <div class="stat-icon timeout-rate">
           <i class="el-icon-warning"></i>
         </div>
-        <div class="kpi-value">{{ timeoutResponseRate.timeout_rate||0 }}</div>
+        <div class="kpi-value">{{ (timeoutResponseRate && timeoutResponseRate.timeout_rate)||0 }}</div>
         <p>超时应答率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'timeoutResponseRate')" @mouseleave="hideTooltip">ⓘ</i></p>
       </div>
       <div class="kpi-item stat-item">
         <div class="stat-icon severe-timeout-rate">
           <i class="el-icon-warning-outline"></i>
         </div>
-        <div class="kpi-value">{{ timeoutResponseRate.serious_timeout_rate||0 }}</div>
+        <div class="kpi-value">{{ (timeoutResponseRate && timeoutResponseRate.serious_timeout_rate)||0 }}</div>
         <p>严重超时应答率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'severeTimeoutRate')" @mouseleave="hideTooltip">ⓘ</i></p>
       </div>
       <div class="kpi-item stat-item">
         <div class="stat-icon form-rate">
           <i class="el-icon-document"></i>
         </div>
-        <div class="kpi-value">{{ formCompletionRate.table_filling_rate||0 }}</div>
+        <div class="kpi-value">{{ (formCompletionRate && formCompletionRate.table_filling_rate)||0 }}</div>
         <p>表格填写率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'formCompletionRate')" @mouseleave="hideTooltip">ⓘ</i></p>
       </div>
     </div>
@@ -53,24 +53,24 @@ import Tooltip from '@/components/Tooltip.vue';
 
 defineProps({
   customerCommunicationRate: {
-    type: Number,
+    type: Object,
-    default: 0
+    default: () => ({})
   },
   averageResponseTime: {
-    type: Number,
+    type: Object,
-    default: 0
+    default: () => ({})
   },
   timeoutResponseRate: {
-    type: Number,
+    type: Object,
-    default: 0
+    default: () => ({})
   },
   severeTimeoutRate: {
-    type: Number,
+    type: Object,
-    default: 0
+    default: () => ({})
   },
   formCompletionRate: {
-    type: Number,
+    type: Object,
-    default: 0
+    default: () => ({})
   }
 });
 

my-vue-app/src/views/senorManger/seniorManager.vue

@@ -566,11 +566,11 @@ async function fetchDepositConversions() {
 }
 
 const statisticalIndicators = ref({
-  customerCommunicationRate: 0,
+  customerCommunicationRate: {},
-  averageResponseTime: 0,
+  averageResponseTime: {},
-  timeoutResponseRate: 0,
+  timeoutResponseRate: {},
-  severeTimeoutRate: 0,
+  severeTimeoutRate: {},
-  formCompletionRate: 0,
+  formCompletionRate: {},
 })
 
 // 销售漏斗
@@ -602,17 +602,18 @@ async function fetchAbnormalResponseRate() {
       () => getAbnormalResponseRate(hasParams ? params : undefined),
       requestParams
     )
-    const rawData = response.data
+    const rawData = response.data || {} // 添加默认值防止null访问
     
     const processedAlerts = []
     const teamData = new Map()
     
+    // 添加安全检查防止访问null属性
     if (rawData.team_serious_timeout_abnormal_counts_by_group) {
       Object.entries(rawData.team_serious_timeout_abnormal_counts_by_group).forEach(([teamName, data]) => {
         if (!teamData.has(teamName)) {
           teamData.set(teamName, { timeoutCount: 0, fillingCount: 0 })
         }
-        teamData.get(teamName).timeoutCount = data.count
+        teamData.get(teamName).timeoutCount = data.count || 0
       })
     }
     
@@ -621,7 +622,7 @@ async function fetchAbnormalResponseRate() {
         if (!teamData.has(teamName)) {
           teamData.set(teamName, { timeoutCount: 0, fillingCount: 0 })
         }
-        teamData.get(teamName).fillingCount = data.count
+        teamData.get(teamName).fillingCount = data.count || 0
       })
     }
     
@@ -663,9 +664,12 @@ async function fetchCustomerCommunicationRate() {
       () => getActiveCustomerCommunicationRate(hasParams ? params : undefined),
       requestParams
     )
-    statisticalIndicators.value.customerCommunicationRate = response.data
+    // 确保响应数据不为null
+    statisticalIndicators.value.customerCommunicationRate = response.data || {}
   } catch (error) {
     console.error('获取活跃客户沟通率失败:', error)
+    // 出错时设置为空对象
+    statisticalIndicators.value.customerCommunicationRate = {}
   }
 }
 // 统计指标--平均应答时间
@@ -680,9 +684,12 @@ async function fetchAverageResponseTime() {
       () => getAverageAnswerTime(hasParams ? params : undefined),
       requestParams
     )
-    statisticalIndicators.value.averageResponseTime = response.data
+    // 确保响应数据不为null
+    statisticalIndicators.value.averageResponseTime = response.data || {}
   } catch (error) {
     console.error('获取平均应答时间失败:', error)
+    // 出错时设置为空对象
+    statisticalIndicators.value.averageResponseTime = {}
   }
 }
 // 统计指标--超时应答率、严重超时应答率
@@ -697,9 +704,15 @@ async function fetchTimeoutRate() {
       () => getTimeoutRate(hasParams ? params : undefined),
       requestParams
     )
-    statisticalIndicators.value.timeoutResponseRate = response.data
+    // 确保响应数据不为null
+    statisticalIndicators.value.timeoutResponseRate = response.data || {}
+    // severeTimeoutRate使用相同的数据源
+    statisticalIndicators.value.severeTimeoutRate = response.data || {}
   } catch (error) {
     console.error('获取超时应答率失败:', error)
+    // 出错时设置为空对象
+    statisticalIndicators.value.timeoutResponseRate = {}
+    statisticalIndicators.value.severeTimeoutRate = {}
   }
 }
 // 统计指标--表格填写率
@@ -714,9 +727,12 @@ async function fetchTableFillingRate() {
       () => getTableFillingRate(hasParams ? params : undefined),
       requestParams
     )
-    statisticalIndicators.value.formCompletionRate = response.data
+    // 确保响应数据不为null
+    statisticalIndicators.value.formCompletionRate = response.data || {}
   } catch (error) {
     console.error('获取表格填写率失败:', error)
+    // 出错时设置为空对象
+    statisticalIndicators.value.formCompletionRate = {}
   }
 }
 const problemRanking = ref({})