feat:网元切换清除缓存数据

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
   }