From 6644ef2608aafc3bd975c86b2049efed313d0fdc Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Fri, 8 Aug 2025 11:35:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=BD=91=E5=85=83=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E6=B8=85=E9=99=A4=E7=BC=93=E5=AD=98=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/overview/index.vue | 43 +++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/views/perfManage/overview/index.vue b/src/views/perfManage/overview/index.vue
index 439f6fe8..babc2a35 100644
--- a/src/views/perfManage/overview/index.vue
+++ b/src/views/perfManage/overview/index.vue
@@ -140,7 +140,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
 import * as echarts from 'echarts/core'
 import { LineChart } from 'echarts/charts'
 import { GridComponent } from 'echarts/components'
@@ -218,7 +218,7 @@ async function fetchHistoryData(neId: string) {
       pageNum: 1
     }
 
-   // console.log('获取历史数据参数:', params)
+    // console.log('获取历史数据参数:', params)
 
     const res = await listKPIData(params)
     //console.log('历史数据响应:', res)
@@ -259,6 +259,15 @@ async function onImsNeChange() {
   // 切换网元时，先清空旧数据
   imsRealtimeRawData.value = []
 
+  // 强制触发Vue响应式更新，确保所有计算值立即更新为默认状态
+  await nextTick()
+
+  // 立即更新所有图表为空状态，清除上一个网元的数据显示
+  updateActiveCallsChart()
+  updateFailedCallsChart()
+  updateActiveRegistrationsChart()
+  updateFailedRegistrationsChart()
+
   // 先获取历史数据，再订阅实时数据
   await fetchHistoryData(selectedImsNeId.value)
   subscribeImsRealtime(selectedImsNeId.value)
@@ -348,6 +357,13 @@ function updateActiveCallsChart() {
         areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
       }]
     })
+
+    // 清除所有旧标注，即使在无数据时也要清理
+    const chartContainer = callsChartRef.value
+    if (chartContainer) {
+      const existingLabels = chartContainer.querySelectorAll('.chart-label')
+      existingLabels.forEach(label => label.remove())
+    }
     return
   }
 
@@ -512,6 +528,13 @@ function updateFailedCallsChart() {
         areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
       }]
     })
+
+    // 清除所有旧标注，即使在无数据时也要清理
+    const chartContainer = failedCallsChartRef.value
+    if (chartContainer) {
+      const existingLabels = chartContainer.querySelectorAll('.chart-label')
+      existingLabels.forEach(label => label.remove())
+    }
     return
   }
 
@@ -672,6 +695,13 @@ function updateActiveRegistrationsChart() {
         areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
       }]
     })
+
+    // 清除所有旧标注，即使在无数据时也要清理
+    const chartContainer = regChartRef.value
+    if (chartContainer) {
+      const existingLabels = chartContainer.querySelectorAll('.chart-label')
+      existingLabels.forEach(label => label.remove())
+    }
     return
   }
 
@@ -834,6 +864,13 @@ function updateFailedRegistrationsChart() {
         areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
       }]
     })
+
+    // 清除所有旧标注，即使在无数据时也要清理
+    const chartContainer = failedRegChartRef.value
+    if (chartContainer) {
+      const existingLabels = chartContainer.querySelectorAll('.chart-label')
+      existingLabels.forEach(label => label.remove())
+    }
     return
   }
 
@@ -970,7 +1007,7 @@ function handleIMSRealtimeData(res: any) {
 
   // 检查是否是错误响应 - 修改为适配实际的code值
   if (code !== 200001 || !data) {
-   // console.warn('收到错误响应或数据格式不正确:', res) // 调试信息
+    // console.warn('收到错误响应或数据格式不正确:', res) // 调试信息
     return
   }