From 7bf8bad9e4a2df2fdda611e0c7416016fce7061c Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Fri, 22 Aug 2025 16:11:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=85=B3=E9=94=AE=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0MME=E7=BD=91=E5=85=83=E6=8C=87=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/overview/index.vue | 1089 ++++++++++++++++++-----
 1 file changed, 868 insertions(+), 221 deletions(-)

diff --git a/src/views/perfManage/overview/index.vue b/src/views/perfManage/overview/index.vue
index a368a0fa..295c7890 100644
--- a/src/views/perfManage/overview/index.vue
+++ b/src/views/perfManage/overview/index.vue
@@ -1,41 +1,33 @@
 <template>
   <div class="dashboard-cards">
-    <div style="font-size:32px; font-weight: bold;  margin-bottom: 20px;    text-align: center;">
-      Dashboard
+    <div style="font-size:32px; font-weight: bold;  margin-bottom: 20px; text-align: center; position: relative;">
+      {{ t('views.perfManage.voiceOverView.voiceTitle') }}
     </div>
-    <div style="margin-bottom: 24px; text-align: right;">
-      <label style="margin-right: 8px; font-weight: 600;">NE：</label>
-      <a-select
-        v-model:value="selectedImsNeId"
-        :options="imsNeList.map(ne => ({ label: ne.neName || ne.neId, value: ne.neId }))"
-        @change="onImsNeChange"
-        style="width: 100px; font-size: 15px;"
-        :dropdown-style="{ borderRadius: '8px' }"
-        placeholder='No NE'
-        :bordered="true"
-        class="ims-select"
-        :allow-clear="false"
-      />
-      <!--      <a-button-->
-      <!--        type="primary"-->
-      <!--        style="margin-left: 16px;"-->
-      <!--        @click="testDataUpdate"-->
-      <!--      >-->
-      <!--        测试数据更新-->
-      <!--      </a-button>-->
-      <!--      <div style="margin-top: 8px; font-size: 12px; color: #666;">-->
-      <!--        WebSocket状态: {{ wsStatus }} | 数据点数量: {{ imsRealtimeRawData.length }}-->
-      <!--      </div>-->
+    <div style="margin-bottom: 24px; display: flex; align-items: center; justify-content: flex-end;">
+      <span style="font-size: 12px; color: #999; font-style: italic;">*{{ t('views.perfManage.voiceOverView.tips') }}</span>
+      <div style="display: flex; align-items: center; margin-left: 32px;">
+        <label style="margin-right: 8px; font-weight: 600;">{{ t('views.perfManage.voiceOverView.ne') }}：</label>
+        <a-select
+          v-model:value="selectedImsNeId"
+          :options="imsNeList.map(ne => ({ label: ne.neName || ne.neId, value: ne.neId }))"
+          @change="onImsNeChange"
+          style="width: 100px; font-size: 15px;"
+          :dropdown-style="{ borderRadius: '8px' }"
+          placeholder='No NE'
+          :bordered="true"
+          class="ims-select"
+          :allow-clear="false"
+        />
+      </div>
     </div>
-    <div class="row-title">Calls</div>
-    <a-row :gutter="[48, 48]">
+    <div class="row-title">{{ t('views.perfManage.voiceOverView.calls') }}</div>
+    <a-row :gutter="[16, 16]">
       <a-col :xs="24" :sm="24" :lg="8">
         <a-card bordered class="metric-card">
-          <div class="card-title">active calls <span class="main-icon phone">📞</span></div>
+          <div class="card-title">{{ t('views.perfManage.voiceOverView.activeCall') }} <span class="main-icon phone">📞</span></div>
           <div class="card-content">
             <div class="trend-chart">
               <div class="mini-chart" ref="callsChartRef"></div>
-              <!--              <div class="card-subtext">60m <span class="card-sub-sep">now</span></div>-->
             </div>
             <div class="metric-info">
               <div class="metric-value">
@@ -67,7 +59,7 @@
       <!--      </a-col>-->
       <a-col :xs="24" :sm="24" :lg="8">
         <a-card bordered class="metric-card">
-          <div class="card-title">calls MO / MT</div>
+          <div class="card-title">{{ t('views.perfManage.voiceOverView.callMOMT') }}</div>
           <div class="card-content full-width">
             <div class="metric-info" style="width:100%;text-align:center;">
               <div class="metric-value" style="font-size:38px;justify-content:center;">
@@ -80,11 +72,10 @@
       </a-col>
       <a-col :xs="24" :sm="24" :lg="8">
         <a-card bordered class="metric-card">
-          <div class="card-title">failed calls <span class="main-icon phone">📞</span></div>
+          <div class="card-title">{{ t('views.perfManage.voiceOverView.failedcall') }} <span class="main-icon phone">📞</span></div>
           <div class="card-content">
             <div class="trend-chart">
               <div class="mini-chart" ref="failedCallsChartRef"></div>
-              <!--              <div class="card-subtext">60m <span class="card-sub-sep">now</span></div>-->
             </div>
             <div class="metric-info">
               <div class="metric-value">
@@ -97,15 +88,14 @@
         </a-card>
       </a-col>
     </a-row>
-    <div class="row-title" style="margin-top: 48px;">Registrations</div>
-    <a-row :gutter="[48, 48]">
+    <div class="row-title" style="margin-top: 48px;">{{ t('views.perfManage.voiceOverView.registration') }}</div>
+    <a-row :gutter="[16, 16]">
       <a-col :xs="24" :sm="24" :lg="8">
         <a-card bordered class="metric-card">
-          <div class="card-title">active registrations <span class="main-icon calendar">📅</span></div>
+          <div class="card-title">{{ t('views.perfManage.voiceOverView.activeregistration') }} <span class="main-icon calendar">📅</span></div>
           <div class="card-content">
             <div class="trend-chart">
               <div class="mini-chart" ref="regChartRef"></div>
-              <!--              <div class="card-subtext">24h <span class="card-sub-sep">now</span></div>-->
             </div>
             <div class="metric-info">
               <div class="metric-value">
@@ -119,7 +109,7 @@
       </a-col>
       <a-col :xs="24" :sm="24" :lg="8">
         <a-card bordered class="metric-card">
-          <div class="card-title">registration success</div>
+          <div class="card-title">{{ t('views.perfManage.voiceOverView.registrationsuccess') }}</div>
           <div class="card-content full-width">
             <div class="metric-info" style="width:100%;text-align:center;">
               <div class="metric-value" style="font-size:38px;justify-content:center;">{{ calculateRegSuccessValue() }}%</div>
@@ -130,11 +120,10 @@
       </a-col>
       <a-col :xs="24" :sm="24" :lg="8">
         <a-card bordered class="metric-card">
-          <div class="card-title">failed registrations total <span class="main-icon calendar">📅</span></div>
+          <div class="card-title">{{ t('views.perfManage.voiceOverView.failedregistration') }} <span class="main-icon calendar">📅</span></div>
           <div class="card-content">
             <div class="trend-chart">
               <div class="mini-chart" ref="failedRegChartRef"></div>
-              <!--              <div class="card-subtext">24h <span class="card-sub-sep">now</span></div>-->
             </div>
             <div class="metric-info">
               <div class="metric-value">
@@ -151,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'
@@ -160,7 +149,8 @@ import useNeInfoStore from '@/store/modules/neinfo'
 import { WS } from '@/plugins/ws-websocket'
 import { listKPIData } from '@/api/perfManage/goldTarget'
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'
-
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
 echarts.use([LineChart, GridComponent, CanvasRenderer])
 
 const callsChartRef = ref<HTMLDivElement | null>(null)
@@ -184,8 +174,7 @@ const wsStatus = ref('未连接')
 onMounted(async () => {
   // console.log('组件挂载，开始获取IMS网元列表') // 调试信息
 
-  const neInfoStore = useNeInfoStore()
-  const res = await neInfoStore.fnNelist()
+  const res = await useNeInfoStore().fnNelist()
   // console.log('获取到的网元列表响应:', res) // 调试信息
 
   if (res && Array.isArray(res.data)) {
@@ -214,49 +203,52 @@ async function fetchHistoryData(neId: string) {
   try {
     // 计算30分钟前的时间
     const endTime = Date.now()
-    const startTime = endTime - (30 * 60 * 1000) // 30分钟前
+    const beginTime = endTime - (30 * 60 * 1000) // 30分钟前
 
     // 构建查询参数，与黄金指标界面保持一致
     const params = {
       neType: 'IMS',
       neId: neId,
       interval: 60, // 1分钟颗粒度
-      startTime: startTime.toString(),
+      beginTime: beginTime.toString(),
       endTime: endTime.toString(),
       sortField: 'timeGroup',
-      sortOrder: 'desc',
+      sortOrder: 'asc',
       pageSize: 30, // 最多获取30条数据
       pageNum: 1
     }
 
-    console.log('获取历史数据参数:', params)
+    // console.log('获取历史数据参数:', params)
 
     const res = await listKPIData(params)
-    console.log('历史数据响应:', res)
+    //console.log('历史数据响应:', res)
 
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+    if (res.code === 200001 && Array.isArray(res.data)) {
       // 将历史数据转换为与实时数据相同的格式
       const historyData = res.data.map((item: any) => ({
         timestamp: item.timeGroup || Date.now(),
         data: item
       }))
 
-      console.log('转换后的历史数据:', historyData)
+      //console.log('转换后的历史数据:', historyData)
 
       // 将历史数据添加到实时数据数组中（追加而不是覆盖）
       // 注意：这里直接赋值，因为这是初始加载历史数据
       imsRealtimeRawData.value = historyData
 
+      //console.log('历史数据加载完成，数据点数量:', imsRealtimeRawData.value.length)
+      //console.log('最新历史数据时间戳:', historyData.length > 0 ? historyData[historyData.length - 1].timestamp : '无数据')
+
       // 更新所有图表
       updateActiveCallsChart()
       updateFailedCallsChart()
       updateActiveRegistrationsChart()
       updateFailedRegistrationsChart()
     } else {
-      console.warn('获取历史数据失败或数据为空')
+      //console.warn('获取历史数据失败或数据为空')
     }
   } catch (error) {
-    console.error('获取历史数据出错:', error)
+    //console.error('获取历史数据出错:', error)
   }
 }
 
@@ -267,6 +259,15 @@ async function onImsNeChange() {
   // 切换网元时，先清空旧数据
   imsRealtimeRawData.value = []
 
+  // 强制触发Vue响应式更新，确保所有计算值立即更新为默认状态
+  await nextTick()
+
+  // 立即更新所有图表为空状态，清除上一个网元的数据显示
+  updateActiveCallsChart()
+  updateFailedCallsChart()
+  updateActiveRegistrationsChart()
+  updateFailedRegistrationsChart()
+
   // 先获取历史数据，再订阅实时数据
   await fetchHistoryData(selectedImsNeId.value)
   subscribeImsRealtime(selectedImsNeId.value)
@@ -284,8 +285,6 @@ function subscribeImsRealtime(neId: string) {
     imsWs.value = null
   }
 
-  // 注意：不要清空历史数据，让历史数据保留
-  // imsRealtimeRawData.value = [] // 移除这行，避免清空历史数据
 
   if (!neId) return
 
@@ -348,7 +347,7 @@ function updateActiveCallsChart() {
     const xAxisData = [1, 2, 3, 4, 5]
 
     chart.setOption({
-      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      grid: { left: 0, right: 30, top: 10, bottom: 10 }, // 增加右侧边距
       xAxis: { type: 'category', show: false, data: xAxisData },
       yAxis: { type: 'value', show: false },
       series: [{
@@ -358,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
   }
 
@@ -376,8 +382,13 @@ function updateActiveCallsChart() {
   // 生成时间轴数据
   const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)
 
+  // 计算最大值、最小值、最新值
+  const maxValue = Math.max(...chartData)
+  const minValue = Math.min(...chartData)
+  const latestValue = chartData[chartData.length - 1]
+
   chart.setOption({
-    grid: { left: 0, right: 0, top: 10, bottom: 10 },
+    grid: { left: 0, right: 30, top: 10, bottom: 10 }, // 增加右侧边距
     xAxis: { type: 'category', show: false, data: xAxisData },
     yAxis: { type: 'value', show: false },
     series: [{
@@ -387,6 +398,99 @@ function updateActiveCallsChart() {
       areaStyle: { color: 'rgba(24,144,255,0.1)' } // 淡蓝色填充
     }]
   })
+
+  // 在图表容器中添加数值标注
+  const chartContainer = callsChartRef.value
+  if (chartContainer) {
+    // 清除之前的标注
+    const existingLabels = chartContainer.querySelectorAll('.chart-label')
+    existingLabels.forEach(label => label.remove())
+
+    // 添加右侧数值标注
+    const maxLabel = document.createElement('div')
+    maxLabel.className = 'chart-label'
+    maxLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      font-size: 12px;
+      font-weight: bold;
+      color: #666;
+      pointer-events: none;
+      z-index: 10;
+    `
+    maxLabel.textContent = maxValue.toString()
+
+    const latestLabel = document.createElement('div')
+    latestLabel.className = 'chart-label'
+    latestLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 12px;
+      font-weight: bold;
+      color: #1890ff;
+      pointer-events: none;
+      z-index: 10;
+    `
+    latestLabel.textContent = latestValue.toString()
+
+    const minLabel = document.createElement('div')
+    minLabel.className = 'chart-label'
+    minLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      bottom: 8px;
+      font-size: 12px;
+      font-weight: bold;
+      color: #666;
+      pointer-events: none;
+      z-index: 10;
+    `
+    minLabel.textContent = minValue.toString()
+
+    // 添加底部时间标注
+    const oldestTimeLabel = document.createElement('div')
+    oldestTimeLabel.className = 'chart-label'
+    oldestTimeLabel.style.cssText = `
+      position: absolute;
+      left: 8px;
+      bottom: -20px;
+      font-size: 11px;
+      color: #999;
+      pointer-events: none;
+      z-index: 10;
+    `
+    // 计算图表实际显示的最旧数据时间（基于图表数据点数量）
+    const displayDataLength = Math.min(imsRealtimeRawData.value.length, 30)
+    const oldestDisplayIndex = Math.max(0, imsRealtimeRawData.value.length - displayDataLength)
+    const oldestDisplayData = imsRealtimeRawData.value[oldestDisplayIndex]
+    if (oldestDisplayData && oldestDisplayData.timestamp) {
+      oldestTimeLabel.textContent = calculateRelativeTime(oldestDisplayData.timestamp)
+    } else {
+      oldestTimeLabel.textContent = '--'
+    }
+
+    const nowTimeLabel = document.createElement('div')
+    nowTimeLabel.className = 'chart-label'
+    nowTimeLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      bottom: -20px;
+      font-size: 11px;
+      color: #999;
+      pointer-events: none;
+      z-index: 10;
+    `
+    nowTimeLabel.textContent = t('views.perfManage.voiceOverView.now')
+
+    chartContainer.appendChild(maxLabel)
+    chartContainer.appendChild(latestLabel)
+    chartContainer.appendChild(minLabel)
+    chartContainer.appendChild(oldestTimeLabel)
+    chartContainer.appendChild(nowTimeLabel)
+  }
 }
 
 // 更新failed calls图表
@@ -414,7 +518,7 @@ function updateFailedCallsChart() {
     const xAxisData = [1, 2, 3, 4, 5]
 
     chart.setOption({
-      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      grid: { left: 0, right: 30, top: 10, bottom: 10 }, // 增加右侧边距
       xAxis: { type: 'category', show: false, data: xAxisData },
       yAxis: { type: 'value', show: false },
       series: [{
@@ -424,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
   }
 
@@ -440,8 +551,13 @@ function updateFailedCallsChart() {
   // 生成时间轴数据
   const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)
 
+  // 计算最大值、最小值、最新值
+  const maxValue = Math.max(...chartData)
+  const minValue = Math.min(...chartData)
+  const latestValue = chartData[chartData.length - 1]
+
   chart.setOption({
-    grid: { left: 0, right: 0, top: 10, bottom: 10 },
+    grid: { left: 0, right: 30, top: 10, bottom: 10 }, // 增加右侧边距
     xAxis: { type: 'category', show: false, data: xAxisData },
     yAxis: { type: 'value', show: false },
     series: [{
@@ -451,6 +567,99 @@ function updateFailedCallsChart() {
       areaStyle: { color: 'rgba(250,173,20,0.1)' } // 淡橙色填充
     }]
   })
+
+  // 在图表容器中添加数值标注
+  const chartContainer = failedCallsChartRef.value
+  if (chartContainer) {
+    // 清除之前的标注
+    const existingLabels = chartContainer.querySelectorAll('.chart-label')
+    existingLabels.forEach(label => label.remove())
+
+    // 添加右侧数值标注
+    const maxLabel = document.createElement('div')
+    maxLabel.className = 'chart-label'
+    maxLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      font-size: 12px;
+      font-weight: bold;
+      color: #666;
+      pointer-events: none;
+      z-index: 10;
+    `
+    maxLabel.textContent = maxValue.toString()
+
+    const latestLabel = document.createElement('div')
+    latestLabel.className = 'chart-label'
+    latestLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 12px;
+      font-weight: bold;
+      color: #faad14;
+      pointer-events: none;
+      z-index: 10;
+    `
+    latestLabel.textContent = latestValue.toString()
+
+    const minLabel = document.createElement('div')
+    minLabel.className = 'chart-label'
+    minLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      bottom: 8px;
+      font-size: 12px;
+      font-weight: bold;
+      color: #666;
+      pointer-events: none;
+      z-index: 10;
+    `
+    minLabel.textContent = minValue.toString()
+
+    // 添加底部时间标注
+    const oldestTimeLabel = document.createElement('div')
+    oldestTimeLabel.className = 'chart-label'
+    oldestTimeLabel.style.cssText = `
+      position: absolute;
+      left: 8px;
+      bottom: -20px;
+      font-size: 11px;
+      color: #999;
+      pointer-events: none;
+      z-index: 10;
+    `
+    // 计算图表实际显示的最旧数据时间（基于图表数据点数量）
+    const displayDataLength = Math.min(imsRealtimeRawData.value.length, 30)
+    const oldestDisplayIndex = Math.max(0, imsRealtimeRawData.value.length - displayDataLength)
+    const oldestDisplayData = imsRealtimeRawData.value[oldestDisplayIndex]
+    if (oldestDisplayData && oldestDisplayData.timestamp) {
+      oldestTimeLabel.textContent = calculateRelativeTime(oldestDisplayData.timestamp)
+    } else {
+      oldestTimeLabel.textContent = '--'
+    }
+
+    const nowTimeLabel = document.createElement('div')
+    nowTimeLabel.className = 'chart-label'
+    nowTimeLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      bottom: -20px;
+      font-size: 11px;
+      color: #999;
+      pointer-events: none;
+      z-index: 10;
+    `
+    nowTimeLabel.textContent = t('views.perfManage.voiceOverView.now')
+
+    chartContainer.appendChild(maxLabel)
+    chartContainer.appendChild(latestLabel)
+    chartContainer.appendChild(minLabel)
+    chartContainer.appendChild(oldestTimeLabel)
+    chartContainer.appendChild(nowTimeLabel)
+  }
 }
 
 // 更新active registrations图表
@@ -476,7 +685,7 @@ function updateActiveRegistrationsChart() {
     const xAxisData = [1, 2, 3, 4, 5]
 
     chart.setOption({
-      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      grid: { left: 0, right: 30, top: 10, bottom: 10 }, // 增加右侧边距
       xAxis: { type: 'category', show: false, data: xAxisData },
       yAxis: { type: 'value', show: false },
       series: [{
@@ -486,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
   }
 
@@ -502,8 +718,13 @@ function updateActiveRegistrationsChart() {
   // 生成时间轴数据
   const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)
 
+  // 计算最大值、最小值、最新值
+  const maxValue = Math.max(...chartData)
+  const minValue = Math.min(...chartData)
+  const latestValue = chartData[chartData.length - 1]
+
   chart.setOption({
-    grid: { left: 0, right: 0, top: 10, bottom: 10 },
+    grid: { left: 0, right: 30, top: 10, bottom: 10 }, // 增加右侧边距
     xAxis: { type: 'category', show: false, data: xAxisData },
     yAxis: { type: 'value', show: false },
     series: [{
@@ -513,6 +734,99 @@ function updateActiveRegistrationsChart() {
       areaStyle: { color: 'rgba(24,144,255,0.1)' } // 淡蓝色填充
     }]
   })
+
+  // 在图表容器中添加数值标注
+  const chartContainer = regChartRef.value
+  if (chartContainer) {
+    // 清除之前的标注
+    const existingLabels = chartContainer.querySelectorAll('.chart-label')
+    existingLabels.forEach(label => label.remove())
+
+    // 添加右侧数值标注
+    const maxLabel = document.createElement('div')
+    maxLabel.className = 'chart-label'
+    maxLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      font-size: 12px;
+      font-weight: bold;
+      color: #666;
+      pointer-events: none;
+      z-index: 10;
+    `
+    maxLabel.textContent = maxValue.toString()
+
+    const latestLabel = document.createElement('div')
+    latestLabel.className = 'chart-label'
+    latestLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 12px;
+      font-weight: bold;
+      color: #1890ff;
+      pointer-events: none;
+      z-index: 10;
+    `
+    latestLabel.textContent = latestValue.toString()
+
+    const minLabel = document.createElement('div')
+    minLabel.className = 'chart-label'
+    minLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      bottom: 8px;
+      font-size: 12px;
+      font-weight: bold;
+      color: #666;
+      pointer-events: none;
+      z-index: 10;
+    `
+    minLabel.textContent = minValue.toString()
+
+    // 添加底部时间标注
+    const oldestTimeLabel = document.createElement('div')
+    oldestTimeLabel.className = 'chart-label'
+    oldestTimeLabel.style.cssText = `
+      position: absolute;
+      left: 8px;
+      bottom: -20px;
+      font-size: 11px;
+      color: #999;
+      pointer-events: none;
+      z-index: 10;
+    `
+    // 计算图表实际显示的最旧数据时间（基于图表数据点数量）
+    const displayDataLength = Math.min(imsRealtimeRawData.value.length, 30)
+    const oldestDisplayIndex = Math.max(0, imsRealtimeRawData.value.length - displayDataLength)
+    const oldestDisplayData = imsRealtimeRawData.value[oldestDisplayIndex]
+    if (oldestDisplayData && oldestDisplayData.timestamp) {
+      oldestTimeLabel.textContent = calculateRelativeTime(oldestDisplayData.timestamp)
+    } else {
+      oldestTimeLabel.textContent = '--'
+    }
+
+    const nowTimeLabel = document.createElement('div')
+    nowTimeLabel.className = 'chart-label'
+    nowTimeLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      bottom: -20px;
+      font-size: 11px;
+      color: #999;
+      pointer-events: none;
+      z-index: 10;
+    `
+    nowTimeLabel.textContent = t('views.perfManage.voiceOverView.now')
+
+    chartContainer.appendChild(maxLabel)
+    chartContainer.appendChild(latestLabel)
+    chartContainer.appendChild(minLabel)
+    chartContainer.appendChild(oldestTimeLabel)
+    chartContainer.appendChild(nowTimeLabel)
+  }
 }
 
 // 更新failed registrations图表
@@ -540,7 +854,7 @@ function updateFailedRegistrationsChart() {
     const xAxisData = [1, 2, 3, 4, 5]
 
     chart.setOption({
-      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      grid: { left: 0, right: 30, top: 10, bottom: 10 }, // 增加右侧边距
       xAxis: { type: 'category', show: false, data: xAxisData },
       yAxis: { type: 'value', show: false },
       series: [{
@@ -550,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
   }
 
@@ -566,8 +887,13 @@ function updateFailedRegistrationsChart() {
   // 生成时间轴数据
   const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)
 
+  // 计算最大值、最小值、最新值
+  const maxValue = Math.max(...chartData)
+  const minValue = Math.min(...chartData)
+  const latestValue = chartData[chartData.length - 1]
+
   chart.setOption({
-    grid: { left: 0, right: 0, top: 10, bottom: 10 },
+    grid: { left: 0, right: 30, top: 10, bottom: 10 }, // 增加右侧边距
     xAxis: { type: 'category', show: false, data: xAxisData },
     yAxis: { type: 'value', show: false },
     series: [{
@@ -577,49 +903,142 @@ function updateFailedRegistrationsChart() {
       areaStyle: { color: 'rgba(245,34,45,0.1)' } // 淡红色填充
     }]
   })
+
+  // 在图表容器中添加数值标注
+  const chartContainer = failedRegChartRef.value
+  if (chartContainer) {
+    // 清除之前的标注
+    const existingLabels = chartContainer.querySelectorAll('.chart-label')
+    existingLabels.forEach(label => label.remove())
+
+    // 添加右侧数值标注
+    const maxLabel = document.createElement('div')
+    maxLabel.className = 'chart-label'
+    maxLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      font-size: 12px;
+      font-weight: bold;
+      color: #666;
+      pointer-events: none;
+      z-index: 10;
+    `
+    maxLabel.textContent = maxValue.toString()
+
+    const latestLabel = document.createElement('div')
+    latestLabel.className = 'chart-label'
+    latestLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 12px;
+      font-weight: bold;
+      color: #f5222d;
+      pointer-events: none;
+      z-index: 10;
+    `
+    latestLabel.textContent = latestValue.toString()
+
+    const minLabel = document.createElement('div')
+    minLabel.className = 'chart-label'
+    minLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      bottom: 8px;
+      font-size: 12px;
+      font-weight: bold;
+      color: #666;
+      pointer-events: none;
+      z-index: 10;
+    `
+    minLabel.textContent = minValue.toString()
+
+    // 添加底部时间标注
+    const oldestTimeLabel = document.createElement('div')
+    oldestTimeLabel.className = 'chart-label'
+    oldestTimeLabel.style.cssText = `
+      position: absolute;
+      left: 8px;
+      bottom: -20px;
+      font-size: 11px;
+      color: #999;
+      pointer-events: none;
+      z-index: 10;
+    `
+    // 计算图表实际显示的最旧数据时间（基于图表数据点数量）
+    const displayDataLength = Math.min(imsRealtimeRawData.value.length, 30)
+    const oldestDisplayIndex = Math.max(0, imsRealtimeRawData.value.length - displayDataLength)
+    const oldestDisplayData = imsRealtimeRawData.value[oldestDisplayIndex]
+    if (oldestDisplayData && oldestDisplayData.timestamp) {
+      oldestTimeLabel.textContent = calculateRelativeTime(oldestDisplayData.timestamp)
+    } else {
+      oldestTimeLabel.textContent = '--'
+    }
+
+    const nowTimeLabel = document.createElement('div')
+    nowTimeLabel.className = 'chart-label'
+    nowTimeLabel.style.cssText = `
+      position: absolute;
+      right: 8px;
+      bottom: -20px;
+      font-size: 11px;
+      color: #999;
+      pointer-events: none;
+      z-index: 10;
+    `
+    nowTimeLabel.textContent = t('views.perfManage.voiceOverView.now')
+
+    chartContainer.appendChild(maxLabel)
+    chartContainer.appendChild(latestLabel)
+    chartContainer.appendChild(minLabel)
+    chartContainer.appendChild(oldestTimeLabel)
+    chartContainer.appendChild(nowTimeLabel)
+  }
 }
 
 // 处理IMS实时数据（只存储当前选中网元）
 function handleIMSRealtimeData(res: any) {
-  // console.log('收到实时数据:', res) // 调试信息
+  //console.log('收到实时数据:', res) // 调试信息
 
-  // 检查数据结构：后端实际格式是 {code: 1, data: {...}, msg: 'success'}
+  // 检查数据结构：后端实际格式是 {code: 200001, data: {...}, msg: 'success'}
   const { code, data, msg } = res
 
-  // 检查是否是错误响应
-  if (code !== 1 || !data) {
+  // 检查是否是错误响应 - 修改为适配实际的code值
+  if (code !== 200001 || !data) {
     // console.warn('收到错误响应或数据格式不正确:', res) // 调试信息
     return
   }
 
   // 检查是否是连接确认消息（只包含clientId）
   if (data.clientId) {
-    // console.log('收到WebSocket连接确认消息:', data.clientId) // 调试信息
+    //console.log('收到WebSocket连接确认消息:', data.clientId) // 调试信息
     return
   }
 
   // 检查是否是KPI数据消息（包含data和groupId）
   if (data.data && data.groupId) {
-    // console.log('收到KPI数据消息，groupId:', data.groupId) // 调试信息
+    //console.log('收到KPI数据消息，groupId:', data.groupId) // 调试信息
 
     // 解析订阅组ID，确认是我们订阅的IMS网元
     const [_, neType, neId] = data.groupId.split('_')
     if (neType !== 'IMS' || neId !== selectedImsNeId.value) {
-      // console.log('收到其他网元数据，忽略:', data.groupId) // 调试信息
+      //console.log('收到其他网元数据，忽略:', data.groupId) // 调试信息
       return
     }
 
     const kpiEvent = data.data
     if (!kpiEvent) {
-      // console.warn('KPI事件数据为空') // 调试信息
+      //console.warn('KPI事件数据为空') // 调试信息
       return
     }
 
-    // console.log('处理IMS网元KPI数据:', kpiEvent) // 调试信息
+    console.log('处理IMS网元KPI数据:', kpiEvent) // 调试信息
 
     // 确保数据结构正确
     const dataToStore = {
-      timestamp: Date.now(),
+      timestamp: kpiEvent.timeGroup || Date.now(),
       data: kpiEvent
     }
 
@@ -631,8 +1050,12 @@ function handleIMSRealtimeData(res: any) {
       imsRealtimeRawData.value.shift() // 移除最早的数据点
     }
 
-    console.log('实时数据已添加，当前数据点数量:', imsRealtimeRawData.value.length)
-    console.log('最新数据:', dataToStore)
+    //console.log('实时数据已添加，当前数据点数量:', imsRealtimeRawData.value.length)
+    //console.log('最新数据:', dataToStore)
+    //console.log('最新数据时间戳:', dataToStore.timestamp)
+
+    // 强制触发Vue响应式更新
+    imsRealtimeRawData.value = [...imsRealtimeRawData.value]
 
     // 更新active calls图表
     updateActiveCallsChart()
@@ -643,14 +1066,14 @@ function handleIMSRealtimeData(res: any) {
     // 更新failed registrations图表
     updateFailedRegistrationsChart()
   } else {
-    // console.log('收到未知格式的数据:', data) // 调试信息
+    //console.log('收到未知格式的数据:', data) // 调试信息
   }
 }
 
 onMounted(() => {
   // 初始化所有图表为0值线
   const defaultChartOption = {
-    grid: { left: 0, right: 0, top: 10, bottom: 10 },
+    grid: { left: 0, right: 30, top: 10, bottom: 10 }, // 增加右侧边距
     xAxis: { type: 'category', show: false, data: [1, 2, 3, 4, 5] },
     yAxis: { type: 'value', show: false },
     series: [{
@@ -670,16 +1093,56 @@ onMounted(() => {
   // MOS - 保持原有的模拟数据
   if (mosChartRef.value) {
     const chart = echarts.init(mosChartRef.value)
+    const mosData = [4.62, 4.50, 4.40, 4.35, 4.30]
+    const maxValue = Math.max(...mosData)
+    const minValue = Math.min(...mosData)
+    const latestValue = mosData[mosData.length - 1]
+
     chart.setOption({
-      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      grid: { left: 0, right: 30, top: 10, bottom: 10 }, // 增加右侧边距
       xAxis: { type: 'category', show: false, data: [1,2,3,4,5] },
       yAxis: { type: 'value', show: false },
       series: [{
-        data: [4.62, 4.50, 4.40, 4.35, 4.30],
+        data: mosData,
         type: 'line',  symbol: 'none',
         lineStyle: { width: 2, color: '#52c41a' },
         areaStyle: { color: 'rgba(82,196,26,0.1)' }
-      }]
+      }],
+      graphic: [
+        {
+          type: 'text',
+          right: 8,
+          top: 8,
+          style: {
+            text: maxValue.toFixed(2),
+            fontSize: 12,
+            fill: '#666',
+            fontWeight: 'bold'
+          }
+        },
+        {
+          type: 'text',
+          right: 8,
+          top: '50%',
+          style: {
+            text: latestValue.toFixed(2),
+            fontSize: 12,
+            fill: '#52c41a',
+            fontWeight: 'bold'
+          }
+        },
+        {
+          type: 'text',
+          right: 8,
+          bottom: 8,
+          style: {
+            text: minValue.toFixed(2),
+            fontSize: 12,
+            fill: '#666',
+            fontWeight: 'bold'
+          }
+        }
+      ]
     })
   }
 
@@ -720,7 +1183,7 @@ function calculateMOValue() {
   return moValue.toFixed(1)
 }
 
-// 计算MT值 (SCSCF.06/SCSCF.07)*100
+// 计算MT值 (SCSCF.07/SCSCF.08)*100
 function calculateMTValue() {
   if (imsRealtimeRawData.value.length === 0) return '-'
 
@@ -729,24 +1192,24 @@ function calculateMTValue() {
   if (!latestData || !latestData.data) return '-'
 
   const kpiEvent = latestData.data
-  const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
   const scscf07 = Number(kpiEvent['SCSCF.07']) || 0
+  const scscf08 = Number(kpiEvent['SCSCF.08']) || 0
 
-  if (scscf07 === 0) return '-'
+  if (scscf08 === 0) return '-'
 
-  const mtValue = (scscf06 / scscf07) * 100
+  const mtValue = (scscf07 / scscf08) * 100
   return mtValue.toFixed(1)
 }
 
 // 计算MO变化值（完善版本）
 function calculateMOChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0.00% last 1m'
+  if (imsRealtimeRawData.value.length < 2) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   // 获取最新和上一个数据点
   const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
   const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
 
-  if (!latestData?.data || !previousData?.data) return '±0.00% last 1m'
+  if (!latestData?.data || !previousData?.data) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -755,31 +1218,31 @@ function calculateMOChange() {
   const previousMO = calculateMOValueFromData(previousKpi)
 
   // 检查MO是否有有效值
-  if (latestMO === '-' || previousMO === '-') return '±0.00% last 5s'
+  if (latestMO === '-' || previousMO === '-') return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   // 计算变化幅度
   const change = latestMO - previousMO
 
   // 检查是否有变化
-  if (change === 0) return '±0.00% last 5s'
+  if (change === 0) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
 
   // 计算时间差
   const timeDiff = calculateTimeDifference(latestData, previousData)
 
-  return `${changeText} last ${timeDiff}`
+  return `${changeText} ${t('views.perfManage.voiceOverView.last')} ${timeDiff}`
 }
 
 // 计算MT变化值（完善版本）
 function calculateMTChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0.00% last 5s'
+  if (imsRealtimeRawData.value.length < 2) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   // 获取最新和上一个数据点
   const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
   const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
 
-  if (!latestData?.data || !previousData?.data) return '±0.00% last 5s'
+  if (!latestData?.data || !previousData?.data) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -788,20 +1251,20 @@ function calculateMTChange() {
   const previousMT = calculateMTValueFromData(previousKpi)
 
   // 检查MT是否有有效值
-  if (latestMT === '-' || previousMT === '-') return '±0.00% last 5s'
+  if (latestMT === '-' || previousMT === '-') return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   // 计算变化幅度
   const change = latestMT - previousMT
 
   // 检查是否有变化
-  if (change === 0) return '±0.00% last 5s'
+  if (change === 0) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
 
   // 计算时间差
   const timeDiff = calculateTimeDifference(latestData, previousData)
 
-  return `${changeText} last ${timeDiff}`
+  return `${changeText} ${t('views.perfManage.voiceOverView.last')} ${timeDiff}`
 }
 
 // 计算时间差函数
@@ -810,6 +1273,9 @@ function calculateTimeDifference(latestData: any, previousData: any) {
   const latestTime = latestData.timestamp || latestData.time || Date.now()
   const previousTime = previousData.timestamp || previousData.time || Date.now()
 
+  console.log('计算时间差 - 最新数据时间戳:', latestTime)
+  console.log('计算时间差 - 上一个数据时间戳:', previousTime)
+
   // 计算时间差（毫秒）
   const diffMs = Math.abs(latestTime - previousTime)
 
@@ -819,6 +1285,10 @@ function calculateTimeDifference(latestData: any, previousData: any) {
   // 转换为分钟
   const diffMinutes = Math.floor(diffSeconds / 60)
 
+  console.log('计算时间差 - 时间差（毫秒）:', diffMs)
+  console.log('计算时间差 - 时间差（秒）:', diffSeconds)
+  console.log('计算时间差 - 时间差（分钟）:', diffMinutes)
+
   // 根据时间差返回合适的格式
   if (diffMinutes > 0) {
     return `${diffMinutes}m`
@@ -827,6 +1297,22 @@ function calculateTimeDifference(latestData: any, previousData: any) {
   }
 }
 
+// 计算相对时间（距离现在多久）
+function calculateRelativeTime(timestamp: number) {
+  const now = Date.now()
+  const diffMs = now - timestamp
+  const diffMinutes = Math.floor(diffMs / (1000 * 60))
+  const diffHours = Math.floor(diffMinutes / 60)
+
+  if (diffHours >= 1) {
+    return `${diffHours}h`
+  } else if (diffMinutes >= 1) {
+    return `${diffMinutes}m`
+  } else {
+    return '1m'
+  }
+}
+
 // 辅助函数：从数据中计算MO值
 function calculateMOValueFromData(kpiEvent: any) {
   const scscf05 = Number(kpiEvent['SCSCF.05']) || 0
@@ -836,9 +1322,9 @@ function calculateMOValueFromData(kpiEvent: any) {
 
 // 辅助函数：从数据中计算MT值
 function calculateMTValueFromData(kpiEvent: any) {
-  const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
   const scscf07 = Number(kpiEvent['SCSCF.07']) || 0
-  return scscf07 === 0 ? '-' : (scscf06 / scscf07) * 100
+  const scscf08 = Number(kpiEvent['SCSCF.08']) || 0
+  return scscf08 === 0 ? '-' : (scscf07 / scscf08) * 100
 }
 
 // 计算registration success值
@@ -861,13 +1347,13 @@ function calculateRegSuccessValue() {
 
 // 计算registration success变化值
 function calculateRegSuccessChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0.00% last 5s'
+  if (imsRealtimeRawData.value.length < 2) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   // 获取最新和上一个数据点
   const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
   const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
 
-  if (!latestData?.data || !previousData?.data) return '±0.00% last 5s'
+  if (!latestData?.data || !previousData?.data) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -876,20 +1362,20 @@ function calculateRegSuccessChange() {
   const previousRegSuccess = calculateRegSuccessValueFromData(previousKpi)
 
   // 检查registration success是否有有效值
-  if (latestRegSuccess === '-' || previousRegSuccess === '-') return '±0.00% last 5s'
+  if (latestRegSuccess === '-' || previousRegSuccess === '-') return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   // 计算变化幅度
   const change = latestRegSuccess - previousRegSuccess
 
   // 检查是否有变化
-  if (change === 0) return '±0.00% last 5s'
+  if (change === 0) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
 
   // 计算时间差
   const timeDiff = calculateTimeDifference(latestData, previousData)
 
-  return `${changeText} last ${timeDiff}`
+  return `${changeText} ${t('views.perfManage.voiceOverView.last')} ${timeDiff}`
 }
 
 // 辅助函数：从数据中计算registration success值
@@ -910,39 +1396,20 @@ function calculateActiveCallsValue() {
   const kpiEvent = latestData.data
   const scscf07 = Number(kpiEvent['SCSCF.07']) || 0
 
-  if (scscf07 === 0) return '-'
-
+  // 修改：即使值为0也显示"0"，因为这是有效的后端数据
   const activeCallsValue = scscf07
   return activeCallsValue.toFixed(0)
 }
 
 // 计算active calls箭头方向
 function calculateActiveCallsArrowDirection() {
-  const changeText = calculateActiveCallsChange()
-
-  if (changeText.startsWith('+')) return 'up'
-  if (changeText.startsWith('-')) return 'down'
-  return 'up' // ±0 或无变化时默认向上
-}
-
-// 计算active calls箭头
-function calculateActiveCallsArrow() {
-  const changeText = calculateActiveCallsChange()
-
-  if (changeText.startsWith('+')) return '↗'
-  if (changeText.startsWith('-')) return '↘'
-  return '→' // ±0 或无变化时显示水平箭头
-}
-
-// 计算active calls变化值
-function calculateActiveCallsChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'
+  if (imsRealtimeRawData.value.length < 2) return 'up'
 
   // 获取最新和上一个数据点
   const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
   const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
 
-  if (!latestData?.data || !previousData?.data) return '±0 last 5s'
+  if (!latestData?.data || !previousData?.data) return 'up'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -950,21 +1417,67 @@ function calculateActiveCallsChange() {
   const latestActiveCalls = Number(latestKpi['SCSCF.07']) || 0
   const previousActiveCalls = Number(previousKpi['SCSCF.07']) || 0
 
-  // 检查active calls是否有有效值
-  if (latestActiveCalls === 0 || previousActiveCalls === 0) return '±0 last 5s'
+  // 计算变化幅度
+  const change = latestActiveCalls - previousActiveCalls
+
+  if (change > 0) return 'up'
+  if (change < 0) return 'down'
+  return 'up' // 无变化时默认向上
+}
+
+// 计算active calls箭头
+function calculateActiveCallsArrow() {
+  if (imsRealtimeRawData.value.length < 2) return '→'
+
+  // 获取最新和上一个数据点
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
+
+  if (!latestData?.data || !previousData?.data) return '→'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  const latestActiveCalls = Number(latestKpi['SCSCF.07']) || 0
+  const previousActiveCalls = Number(previousKpi['SCSCF.07']) || 0
 
   // 计算变化幅度
   const change = latestActiveCalls - previousActiveCalls
 
+  if (change > 0) return '↗'
+  if (change < 0) return '↘'
+  return '→' // 无变化时显示水平箭头
+}
+
+// 计算active calls变化值
+function calculateActiveCallsChange() {
+  if (imsRealtimeRawData.value.length < 2) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
+
+  // 获取最新和上一个数据点
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
+
+  if (!latestData?.data || !previousData?.data) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  const latestActiveCalls = Number(latestKpi['SCSCF.07']) || 0
+  const previousActiveCalls = Number(previousKpi['SCSCF.07']) || 0
+
+  // 修改：即使值为0也参与计算，因为这是有效的后端数据
+  // 计算变化幅度
+  const change = latestActiveCalls - previousActiveCalls
+
   // 检查是否有变化
-  if (change === 0) return '±0 last 5s'
+  if (change === 0) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
 
   // 计算时间差
   const timeDiff = calculateTimeDifference(latestData, previousData)
 
-  return `${changeText} last ${timeDiff}`
+  return `${changeText} ${t('views.perfManage.voiceOverView.last')} ${timeDiff}`
 }
 
 // 计算failed calls值
@@ -985,31 +1498,71 @@ function calculateFailedCallsValue() {
 
 // 计算failed calls箭头方向
 function calculateFailedCallsArrowDirection() {
-  const changeText = calculateFailedCallsChange()
-
-  if (changeText.startsWith('+')) return 'up'
-  if (changeText.startsWith('-')) return 'down'
-  return 'up' // ±0 或无变化时默认向上
-}
-
-// 计算failed calls箭头
-function calculateFailedCallsArrow() {
-  const changeText = calculateFailedCallsChange()
-
-  if (changeText.startsWith('+')) return '↗'
-  if (changeText.startsWith('-')) return '↘'
-  return '→' // ±0 或无变化时显示水平箭头
-}
-
-// 计算failed calls变化值
-function calculateFailedCallsChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'
+  if (imsRealtimeRawData.value.length < 2) return 'up'
 
   // 获取最新和上一个数据点
   const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
   const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
 
-  if (!latestData?.data || !previousData?.data) return '±0 last 5s'
+  if (!latestData?.data || !previousData?.data) return 'up'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  const latestScscf06 = Number(latestKpi['SCSCF.06']) || 0
+  const latestScscf07 = Number(latestKpi['SCSCF.07']) || 0
+  const previousScscf06 = Number(previousKpi['SCSCF.06']) || 0
+  const previousScscf07 = Number(previousKpi['SCSCF.07']) || 0
+
+  const latestFailedCalls = latestScscf06 - latestScscf07
+  const previousFailedCalls = previousScscf06 - previousScscf07
+
+  // 计算变化幅度
+  const change = latestFailedCalls - previousFailedCalls
+
+  if (change > 0) return 'up'
+  if (change < 0) return 'down'
+  return 'up' // 无变化时默认向上
+}
+
+// 计算failed calls箭头
+function calculateFailedCallsArrow() {
+  if (imsRealtimeRawData.value.length < 2) return '→'
+
+  // 获取最新和上一个数据点
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
+
+  if (!latestData?.data || !previousData?.data) return '→'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  const latestScscf06 = Number(latestKpi['SCSCF.06']) || 0
+  const latestScscf07 = Number(latestKpi['SCSCF.07']) || 0
+  const previousScscf06 = Number(previousKpi['SCSCF.06']) || 0
+  const previousScscf07 = Number(previousKpi['SCSCF.07']) || 0
+
+  const latestFailedCalls = latestScscf06 - latestScscf07
+  const previousFailedCalls = previousScscf06 - previousScscf07
+
+  // 计算变化幅度
+  const change = latestFailedCalls - previousFailedCalls
+
+  if (change > 0) return '↗'
+  if (change < 0) return '↘'
+  return '→' // 无变化时显示水平箭头
+}
+
+// 计算failed calls变化值
+function calculateFailedCallsChange() {
+  if (imsRealtimeRawData.value.length < 2) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
+
+  // 获取最新和上一个数据点
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
+
+  if (!latestData?.data || !previousData?.data) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -1026,14 +1579,14 @@ function calculateFailedCallsChange() {
   const change = latestFailedCalls - previousFailedCalls
 
   // 检查是否有变化
-  if (change === 0) return '±0 last 5s'
+  if (change === 0) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
 
   // 计算时间差
   const timeDiff = calculateTimeDifference(latestData, previousData)
 
-  return `${changeText} last ${timeDiff}`
+  return `${changeText} ${t('views.perfManage.voiceOverView.last')} ${timeDiff}`
 }
 
 // 计算active registrations值
@@ -1047,39 +1600,20 @@ function calculateActiveRegistrationsValue() {
   const kpiEvent = latestData.data
   const scscf03 = Number(kpiEvent['SCSCF.03']) || 0
 
-  if (scscf03 === 0) return '-'
-
+  // 修改：即使值为0也显示"0"，因为这是有效的后端数据
   const activeRegistrationsValue = scscf03
   return activeRegistrationsValue.toFixed(0)
 }
 
 // 计算active registrations箭头方向
 function calculateActiveRegistrationsArrowDirection() {
-  const changeText = calculateActiveRegistrationsChange()
-
-  if (changeText.startsWith('+')) return 'up'
-  if (changeText.startsWith('-')) return 'down'
-  return 'up' // ±0 或无变化时默认向上
-}
-
-// 计算active registrations箭头
-function calculateActiveRegistrationsArrow() {
-  const changeText = calculateActiveRegistrationsChange()
-
-  if (changeText.startsWith('+')) return '↗'
-  if (changeText.startsWith('-')) return '↘'
-  return '→' // ±0 或无变化时显示水平箭头
-}
-
-// 计算active registrations变化值
-function calculateActiveRegistrationsChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'
+  if (imsRealtimeRawData.value.length < 2) return 'up'
 
   // 获取最新和上一个数据点
   const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
   const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
 
-  if (!latestData?.data || !previousData?.data) return '±0 last 5s'
+  if (!latestData?.data || !previousData?.data) return 'up'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -1087,21 +1621,67 @@ function calculateActiveRegistrationsChange() {
   const latestActiveRegistrations = Number(latestKpi['SCSCF.03']) || 0
   const previousActiveRegistrations = Number(previousKpi['SCSCF.03']) || 0
 
-  // 检查active registrations是否有有效值
-  if (latestActiveRegistrations === 0 || previousActiveRegistrations === 0) return '±0 last 5s'
+  // 计算变化幅度
+  const change = latestActiveRegistrations - previousActiveRegistrations
+
+  if (change > 0) return 'up'
+  if (change < 0) return 'down'
+  return 'up' // 无变化时默认向上
+}
+
+// 计算active registrations箭头
+function calculateActiveRegistrationsArrow() {
+  if (imsRealtimeRawData.value.length < 2) return '→'
+
+  // 获取最新和上一个数据点
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
+
+  if (!latestData?.data || !previousData?.data) return '→'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  const latestActiveRegistrations = Number(latestKpi['SCSCF.03']) || 0
+  const previousActiveRegistrations = Number(previousKpi['SCSCF.03']) || 0
 
   // 计算变化幅度
   const change = latestActiveRegistrations - previousActiveRegistrations
 
+  if (change > 0) return '↗'
+  if (change < 0) return '↘'
+  return '→' // 无变化时显示水平箭头
+}
+
+// 计算active registrations变化值
+function calculateActiveRegistrationsChange() {
+  if (imsRealtimeRawData.value.length < 2) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
+
+  // 获取最新和上一个数据点
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
+
+  if (!latestData?.data || !previousData?.data) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  const latestActiveRegistrations = Number(latestKpi['SCSCF.03']) || 0
+  const previousActiveRegistrations = Number(previousKpi['SCSCF.03']) || 0
+
+  // 修改：即使值为0也参与计算，因为这是有效的后端数据
+  // 计算变化幅度
+  const change = latestActiveRegistrations - previousActiveRegistrations
+
   // 检查是否有变化
-  if (change === 0) return '±0 last 5s'
+  if (change === 0) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
 
   // 计算时间差
   const timeDiff = calculateTimeDifference(latestData, previousData)
 
-  return `${changeText} last ${timeDiff}`
+  return `${changeText} ${t('views.perfManage.voiceOverView.last')} ${timeDiff}`
 }
 
 // 计算failed registrations值
@@ -1122,31 +1702,71 @@ function calculateFailedRegistrationsValue() {
 
 // 计算failed registrations箭头方向
 function calculateFailedRegistrationsArrowDirection() {
-  const changeText = calculateFailedRegistrationsChange()
-
-  if (changeText.startsWith('+')) return 'up'
-  if (changeText.startsWith('-')) return 'down'
-  return 'up' // ±0 或无变化时默认向上
-}
-
-// 计算failed registrations箭头
-function calculateFailedRegistrationsArrow() {
-  const changeText = calculateFailedRegistrationsChange()
-
-  if (changeText.startsWith('+')) return '↗'
-  if (changeText.startsWith('-')) return '↘'
-  return '→' // ±0 或无变化时显示水平箭头
-}
-
-// 计算failed registrations变化值
-function calculateFailedRegistrationsChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'
+  if (imsRealtimeRawData.value.length < 2) return 'up'
 
   // 获取最新和上一个数据点
   const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
   const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
 
-  if (!latestData?.data || !previousData?.data) return '±0 last 5s'
+  if (!latestData?.data || !previousData?.data) return 'up'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  const latestScscf04 = Number(latestKpi['SCSCF.04']) || 0
+  const latestScscf03 = Number(latestKpi['SCSCF.03']) || 0
+  const previousScscf04 = Number(previousKpi['SCSCF.04']) || 0
+  const previousScscf03 = Number(previousKpi['SCSCF.03']) || 0
+
+  const latestFailedRegistrations = latestScscf04 - latestScscf03
+  const previousFailedRegistrations = previousScscf04 - previousScscf03
+
+  // 计算变化幅度
+  const change = latestFailedRegistrations - previousFailedRegistrations
+
+  if (change > 0) return 'up'
+  if (change < 0) return 'down'
+  return 'up' // 无变化时默认向上
+}
+
+// 计算failed registrations箭头
+function calculateFailedRegistrationsArrow() {
+  if (imsRealtimeRawData.value.length < 2) return '→'
+
+  // 获取最新和上一个数据点
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
+
+  if (!latestData?.data || !previousData?.data) return '→'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  const latestScscf04 = Number(latestKpi['SCSCF.04']) || 0
+  const latestScscf03 = Number(latestKpi['SCSCF.03']) || 0
+  const previousScscf04 = Number(previousKpi['SCSCF.04']) || 0
+  const previousScscf03 = Number(previousKpi['SCSCF.03']) || 0
+
+  const latestFailedRegistrations = latestScscf04 - latestScscf03
+  const previousFailedRegistrations = previousScscf04 - previousScscf03
+
+  // 计算变化幅度
+  const change = latestFailedRegistrations - previousFailedRegistrations
+
+  if (change > 0) return '↗'
+  if (change < 0) return '↘'
+  return '→' // 无变化时显示水平箭头
+}
+
+// 计算failed registrations变化值
+function calculateFailedRegistrationsChange() {
+  if (imsRealtimeRawData.value.length < 2) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
+
+  // 获取最新和上一个数据点
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
+
+  if (!latestData?.data || !previousData?.data) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -1163,41 +1783,40 @@ function calculateFailedRegistrationsChange() {
   const change = latestFailedRegistrations - previousFailedRegistrations
 
   // 检查是否有变化
-  if (change === 0) return '±0 last 5s'
+  if (change === 0) return '±0.00%' +t('views.perfManage.voiceOverView.last') +'1m'
 
   const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
 
   // 计算时间差
   const timeDiff = calculateTimeDifference(latestData, previousData)
 
-  return `${changeText} last ${timeDiff}`
+  return `${changeText} ${+t('views.perfManage.voiceOverView.last')} ${timeDiff}`
 }
-
 // 测试数据更新
-function testDataUpdate() {
-  // console.log('测试数据更新')
-
-  // 创建模拟的后端KPI数据消息格式
-  const mockWebSocketMessage = {
-    code: 1,
-    data: {
-      data: {
-        'SCSCF.03': Math.floor(Math.random() * 300000) + 200000, // active registrations
-        'SCSCF.04': Math.floor(Math.random() * 310000) + 200000, // total registrations
-        'SCSCF.05': Math.floor(Math.random() * 15000) + 10000,   // MO calls
-        'SCSCF.06': Math.floor(Math.random() * 16000) + 10000,   // total calls
-        'SCSCF.07': Math.floor(Math.random() * 15000) + 10000,   // successful calls
-      },
-      groupId: `10_IMS_${selectedImsNeId.value}`
-    },
-    msg: 'success'
-  }
-
-  // console.log('模拟WebSocket消息:', mockWebSocketMessage)
-
-  // 直接调用handleIMSRealtimeData函数
-  handleIMSRealtimeData(mockWebSocketMessage)
-}
+// function testDataUpdate() {
+//   console.log('测试数据更新')
+//
+//   // 创建模拟的后端KPI数据消息格式
+//   const mockWebSocketMessage = {
+//     code: 1,
+//     data: {
+//       data: {
+//         'SCSCF.03': Math.floor(Math.random() * 300000) + 200000, // active registrations
+//         'SCSCF.04': Math.floor(Math.random() * 310000) + 200000, // total registrations
+//         'SCSCF.05': Math.floor(Math.random() * 15000) + 10000,   // MO calls
+//         'SCSCF.06': Math.floor(Math.random() * 16000) + 10000,   // total calls
+//         'SCSCF.07': Math.floor(Math.random() * 15000) + 10000,   // successful calls
+//       },
+//       groupId: `10_IMS_${selectedImsNeId.value}`
+//     },
+//     msg: 'success'
+//   }
+//
+//   // console.log('模拟WebSocket消息:', mockWebSocketMessage)
+//
+//   // 直接调用handleIMSRealtimeData函数
+//   handleIMSRealtimeData(mockWebSocketMessage)
+// }
 </script>
 
 <style scoped>
@@ -1240,12 +1859,14 @@ function testDataUpdate() {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  margin-bottom: 25px; /* 为底部时间标注留出空间 */
 }
 .mini-chart {
   width: 100%;
   height: 100%;
   margin-bottom: 0;
   display: block;
+  position: relative;
 }
 .card-subtext {
   font-size: 12px;
@@ -1326,4 +1947,30 @@ function testDataUpdate() {
 [data-theme='dark'] .ims-select :deep(.ant-select-arrow) {
   color: #cacada;
 }
+
+/* IMS Control Tower 角标样式 */
+.control-tower-badge {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  margin-left: 100px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #1890ff;
+  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+  padding: 4px 12px;
+  border-radius: 12px;
+  border: 1px solid #91d5ff;
+  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.1);
+  letter-spacing: 0.5px;
+  transform: translateY(4px);
+}
+
+/* 暗色主题适配 */
+[data-theme='dark'] .control-tower-badge {
+  color: #69c0ff;
+  background: linear-gradient(135deg, #001529 0%, #002766 100%);
+  border-color: #1890ff;
+  box-shadow: 0 2px 4px rgba(105, 192, 255, 0.1);
+}
 </style>