From 8990fa8dee750d7aaba09a144b75104a7cc5f0eb Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Thu, 3 Jul 2025 19:26:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:kpi=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/overview/index.vue | 1159 +++++++++++++++++++++++
 1 file changed, 1159 insertions(+)
 create mode 100644 src/views/perfManage/overview/index.vue

diff --git a/src/views/perfManage/overview/index.vue b/src/views/perfManage/overview/index.vue
new file mode 100644
index 00000000..9f821086
--- /dev/null
+++ b/src/views/perfManage/overview/index.vue
@@ -0,0 +1,1159 @@
+<template>
+  <div class="dashboard-cards">
+    <div style="font-size:32px; font-weight: bold;  margin-bottom: 20px;    text-align: center;">
+      Dashboard
+    </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' }"
+        :bordered="true"
+        class="ims-select"
+        :allow-clear="false"
+      />
+    </div>
+    <div class="row-title">Calls</div>
+    <a-row :gutter="[48, 48]">
+      <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-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">
+                {{ calculateActiveCallsValue() }}
+                <span class="main-arrow" :class="calculateActiveCallsArrowDirection()">{{ calculateActiveCallsArrow() }}</span>
+              </div>
+              <div class="metric-change">{{ calculateActiveCallsChange() }}</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+<!--      <a-col :xs="24" :sm="24" :lg="6">-->
+<!--        <a-card bordered class="metric-card">-->
+<!--          <div class="card-title">MOS <span class="main-icon phone">📞</span></div>-->
+<!--          <div class="card-content">-->
+<!--            <div class="trend-chart">-->
+<!--              <div class="mini-chart" ref="mosChartRef"></div>-->
+<!--              <div class="card-subtext">60m <span class="card-sub-sep">now</span></div>-->
+<!--            </div>-->
+<!--            <div class="metric-info">-->
+<!--              <div class="metric-value">-->
+<!--                4.30-->
+<!--                <span class="main-arrow up">↗</span>-->
+<!--              </div>-->
+<!--              <div class="metric-change">+0.08 last 5m</div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </a-card>-->
+<!--      </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-content full-width">
+            <div class="metric-info" style="width:100%;text-align:center;">
+              <div class="metric-value" style="font-size:38px;justify-content:center;">
+                {{ calculateMOValue() }}% / {{ calculateMTValue() }}%
+              </div>
+              <div class="metric-change">{{ calculateMOChange() }} / {{ calculateMTChange() }}</div>
+            </div>
+          </div>
+        </a-card>
+      </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-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">
+                {{ calculateFailedCallsValue() }}
+                <span class="main-arrow" :class="calculateFailedCallsArrowDirection()">{{ calculateFailedCallsArrow() }}</span>
+              </div>
+              <div class="metric-change">{{ calculateFailedCallsChange() }}</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <div class="row-title" style="margin-top: 48px;">Registrations</div>
+    <a-row :gutter="[48, 48]">
+      <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-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">
+                {{ calculateActiveRegistrationsValue() }}
+                <span class="main-arrow" :class="calculateActiveRegistrationsArrowDirection()">{{ calculateActiveRegistrationsArrow() }}</span>
+              </div>
+              <div class="metric-change">{{ calculateActiveRegistrationsChange() }}</div>
+            </div>
+          </div>
+        </a-card>
+      </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-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>
+              <div class="metric-change">{{ calculateRegSuccessChange() }}</div>
+            </div>
+          </div>
+        </a-card>
+      </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-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">
+                {{ calculateFailedRegistrationsValue() }}
+                <span class="main-arrow" :class="calculateFailedRegistrationsArrowDirection()">{{ calculateFailedRegistrationsArrow() }}</span>
+              </div>
+              <div class="metric-change">{{ calculateFailedRegistrationsChange() }}</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import * as echarts from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import useNeInfoStore from '@/store/modules/neinfo'
+import { WS } from '@/plugins/ws-websocket'
+
+echarts.use([LineChart, GridComponent, CanvasRenderer])
+
+const callsChartRef = ref<HTMLDivElement | null>(null)
+const mosChartRef = ref<HTMLDivElement | null>(null)
+const failedCallsChartRef = ref<HTMLDivElement | null>(null)
+const regChartRef = ref<HTMLDivElement | null>(null)
+const failedRegChartRef = ref<HTMLDivElement | null>(null)
+
+// IMS网元列表
+const imsNeList = ref<{ neId: string, neName: string }[]>([])
+// 当前选中的IMS网元ID
+const selectedImsNeId = ref('')
+// WebSocket实例
+const imsWs = ref<any>(null)
+// IMS实时原始数据（只存储当前选中网元）
+const imsRealtimeRawData = ref<any[]>([])
+
+// 获取IMS网元列表
+onMounted(async () => {
+  const neInfoStore = useNeInfoStore()
+  const res = await neInfoStore.fnNelist()
+  if (res && Array.isArray(res.data)) {
+    imsNeList.value = res.data.filter((ne: any) => ne.neType === 'IMS')
+    if (imsNeList.value.length > 0) {
+      selectedImsNeId.value = imsNeList.value[0].neId
+      subscribeImsRealtime(selectedImsNeId.value)
+    }
+  }
+})
+
+// 切换IMS网元时，重新订阅
+function onImsNeChange() {
+  subscribeImsRealtime(selectedImsNeId.value)
+}
+
+// 订阅指定IMS网元实时数据
+function subscribeImsRealtime(neId: string) {
+  // 关闭旧WebSocket
+  if (imsWs.value) {
+    imsWs.value.close()
+    imsWs.value = null
+  }
+  imsRealtimeRawData.value = []
+  if (!neId) return
+  imsWs.value = new WS()
+  imsWs.value.connect({
+    url: '/ws',
+    params: {
+      subGroupID: `10_IMS_${neId}`,
+    },
+    onmessage: handleIMSRealtimeData,
+    onerror: () => {},
+  })
+}
+
+// 组件卸载时关闭WebSocket
+onBeforeUnmount(() => {
+  if (imsWs.value) {
+    imsWs.value.close()
+    imsWs.value = null
+  }
+})
+
+// 更新active calls图表
+function updateActiveCallsChart() {
+  if (!callsChartRef.value) return
+
+  // 获取图表实例
+  let chart = echarts.getInstanceByDom(callsChartRef.value)
+  if (!chart) {
+    chart = echarts.init(callsChartRef.value)
+  }
+
+  // 准备图表数据
+  const chartData = imsRealtimeRawData.value.map((item, index) => {
+    const kpiEvent = item.data
+    const scscf07 = Number(kpiEvent['SCSCF.07']) || 0
+    return scscf07
+  })
+
+  // 如果没有数据，显示默认的平直线
+  if (chartData.length === 0) {
+    const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
+    const xAxisData = [1, 2, 3, 4, 5]
+
+    chart.setOption({
+      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      xAxis: { type: 'category', show: false, data: xAxisData },
+      yAxis: { type: 'value', show: false },
+      series: [{
+        data: defaultData,
+        type: 'line', smooth: true, symbol: 'none',
+        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
+        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
+      }]
+    })
+    return
+  }
+
+  // 如果数据不足，补充默认数据
+  while (chartData.length < 5) {
+    chartData.unshift(0) // 在开头补充默认值0
+  }
+
+  // 限制数据点数量
+  if (chartData.length > 10) {
+    chartData.splice(0, chartData.length - 10)
+  }
+
+  // 生成时间轴数据
+  const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)
+
+  chart.setOption({
+    grid: { left: 0, right: 0, top: 10, bottom: 10 },
+    xAxis: { type: 'category', show: false, data: xAxisData },
+    yAxis: { type: 'value', show: false },
+    series: [{
+      data: chartData,
+      type: 'line', smooth: true, symbol: 'none',
+      lineStyle: { width: 2, color: '#1890ff' }, // 蓝色线条表示有数据
+      areaStyle: { color: 'rgba(24,144,255,0.1)' } // 淡蓝色填充
+    }]
+  })
+}
+
+// 更新failed calls图表
+function updateFailedCallsChart() {
+  if (!failedCallsChartRef.value) return
+
+  // 获取图表实例
+  let chart = echarts.getInstanceByDom(failedCallsChartRef.value)
+  if (!chart) {
+    chart = echarts.init(failedCallsChartRef.value)
+  }
+
+  // 准备图表数据
+  const chartData = imsRealtimeRawData.value.map((item, index) => {
+    const kpiEvent = item.data
+    const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
+    const scscf07 = Number(kpiEvent['SCSCF.07']) || 0
+    const failedCalls = scscf06 - scscf07
+    return failedCalls
+  })
+
+  // 如果没有数据，显示默认的平直线
+  if (chartData.length === 0) {
+    const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
+    const xAxisData = [1, 2, 3, 4, 5]
+
+    chart.setOption({
+      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      xAxis: { type: 'category', show: false, data: xAxisData },
+      yAxis: { type: 'value', show: false },
+      series: [{
+        data: defaultData,
+        type: 'line', smooth: true, symbol: 'none',
+        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
+        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
+      }]
+    })
+    return
+  }
+
+  // 如果数据不足，补充默认数据
+  while (chartData.length < 5) {
+    chartData.unshift(0) // 在开头补充默认值0
+  }
+
+  // 限制数据点数量
+  if (chartData.length > 10) {
+    chartData.splice(0, chartData.length - 10)
+  }
+
+  // 生成时间轴数据
+  const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)
+
+  chart.setOption({
+    grid: { left: 0, right: 0, top: 10, bottom: 10 },
+    xAxis: { type: 'category', show: false, data: xAxisData },
+    yAxis: { type: 'value', show: false },
+    series: [{
+      data: chartData,
+      type: 'line', smooth: true, symbol: 'none',
+      lineStyle: { width: 2, color: '#faad14' }, // 橙色线条表示failed calls
+      areaStyle: { color: 'rgba(250,173,20,0.1)' } // 淡橙色填充
+    }]
+  })
+}
+
+// 更新active registrations图表
+function updateActiveRegistrationsChart() {
+  if (!regChartRef.value) return
+
+  // 获取图表实例
+  let chart = echarts.getInstanceByDom(regChartRef.value)
+  if (!chart) {
+    chart = echarts.init(regChartRef.value)
+  }
+
+  // 准备图表数据
+  const chartData = imsRealtimeRawData.value.map((item, index) => {
+    const kpiEvent = item.data
+    const scscf03 = Number(kpiEvent['SCSCF.03']) || 0
+    return scscf03
+  })
+
+  // 如果没有数据，显示默认的平直线
+  if (chartData.length === 0) {
+    const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
+    const xAxisData = [1, 2, 3, 4, 5]
+
+    chart.setOption({
+      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      xAxis: { type: 'category', show: false, data: xAxisData },
+      yAxis: { type: 'value', show: false },
+      series: [{
+        data: defaultData,
+        type: 'line', smooth: true, symbol: 'none',
+        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
+        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
+      }]
+    })
+    return
+  }
+
+  // 如果数据不足，补充默认数据
+  while (chartData.length < 5) {
+    chartData.unshift(0) // 在开头补充默认值0
+  }
+
+  // 限制数据点数量
+  if (chartData.length > 10) {
+    chartData.splice(0, chartData.length - 10)
+  }
+
+  // 生成时间轴数据
+  const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)
+
+  chart.setOption({
+    grid: { left: 0, right: 0, top: 10, bottom: 10 },
+    xAxis: { type: 'category', show: false, data: xAxisData },
+    yAxis: { type: 'value', show: false },
+    series: [{
+      data: chartData,
+      type: 'line', smooth: true, symbol: 'none',
+      lineStyle: { width: 2, color: '#1890ff' }, // 蓝色线条表示active registrations
+      areaStyle: { color: 'rgba(24,144,255,0.1)' } // 淡蓝色填充
+    }]
+  })
+}
+
+// 更新failed registrations图表
+function updateFailedRegistrationsChart() {
+  if (!failedRegChartRef.value) return
+
+  // 获取图表实例
+  let chart = echarts.getInstanceByDom(failedRegChartRef.value)
+  if (!chart) {
+    chart = echarts.init(failedRegChartRef.value)
+  }
+
+  // 准备图表数据
+  const chartData = imsRealtimeRawData.value.map((item, index) => {
+    const kpiEvent = item.data
+    const scscf04 = Number(kpiEvent['SCSCF.04']) || 0
+    const scscf03 = Number(kpiEvent['SCSCF.03']) || 0
+    const failedRegistrations = scscf04 - scscf03
+    return failedRegistrations
+  })
+
+  // 如果没有数据，显示默认的平直线
+  if (chartData.length === 0) {
+    const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
+    const xAxisData = [1, 2, 3, 4, 5]
+
+    chart.setOption({
+      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      xAxis: { type: 'category', show: false, data: xAxisData },
+      yAxis: { type: 'value', show: false },
+      series: [{
+        data: defaultData,
+        type: 'line', smooth: true, symbol: 'none',
+        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
+        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
+      }]
+    })
+    return
+  }
+
+  // 如果数据不足，补充默认数据
+  while (chartData.length < 5) {
+    chartData.unshift(0) // 在开头补充默认值0
+  }
+
+  // 限制数据点数量
+  if (chartData.length > 10) {
+    chartData.splice(0, chartData.length - 10)
+  }
+
+  // 生成时间轴数据
+  const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)
+
+  chart.setOption({
+    grid: { left: 0, right: 0, top: 10, bottom: 10 },
+    xAxis: { type: 'category', show: false, data: xAxisData },
+    yAxis: { type: 'value', show: false },
+    series: [{
+      data: chartData,
+      type: 'line', smooth: true, symbol: 'none',
+      lineStyle: { width: 2, color: '#f5222d' }, // 红色线条表示failed registrations
+      areaStyle: { color: 'rgba(245,34,45,0.1)' } // 淡红色填充
+    }]
+  })
+}
+
+// 处理IMS实时数据（只存储当前选中网元）
+function handleIMSRealtimeData(res: any) {
+  if (res && res.data) {
+    imsRealtimeRawData.value.push(res)
+    if (imsRealtimeRawData.value.length > 200) imsRealtimeRawData.value.shift()
+
+    // 更新active calls图表
+    updateActiveCallsChart()
+    // 更新failed calls图表
+    updateFailedCallsChart()
+    // 更新active registrations图表
+    updateActiveRegistrationsChart()
+    // 更新failed registrations图表
+    updateFailedRegistrationsChart()
+  }
+}
+
+onMounted(() => {
+  // active calls
+  if (callsChartRef.value) {
+    const chart = echarts.init(callsChartRef.value)
+    chart.setOption({
+      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      xAxis: { type: 'category', show: false, data: [1,2,3,4,5] },
+      yAxis: { type: 'value', show: false },
+      series: [{
+        data: [12701, 12000, 11000, 10700, 10274],
+        type: 'line', smooth: true, symbol: 'none',
+        lineStyle: { width: 2, color: '#1890ff' },
+        areaStyle: { color: 'rgba(24,144,255,0.1)' }
+      }]
+    })
+  }
+  // MOS
+  if (mosChartRef.value) {
+    const chart = echarts.init(mosChartRef.value)
+    chart.setOption({
+      grid: { left: 0, right: 0, 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],
+        type: 'line', smooth: true, symbol: 'none',
+        lineStyle: { width: 2, color: '#52c41a' },
+        areaStyle: { color: 'rgba(82,196,26,0.1)' }
+      }]
+    })
+  }
+  // failed calls
+  if (failedCallsChartRef.value) {
+    const chart = echarts.init(failedCallsChartRef.value)
+    chart.setOption({
+      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      xAxis: { type: 'category', show: false, data: [1,2,3,4,5] },
+      yAxis: { type: 'value', show: false },
+      series: [{
+        data: [6, 5, 4, 3, 3],
+        type: 'line', smooth: true, symbol: 'none',
+        lineStyle: { width: 2, color: '#faad14' },
+        areaStyle: { color: 'rgba(250,173,20,0.1)' }
+      }]
+    })
+  }
+  // active registrations
+  if (regChartRef.value) {
+    const chart = echarts.init(regChartRef.value)
+    chart.setOption({
+      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      xAxis: { type: 'category', show: false, data: [1,2,3,4,5] },
+      yAxis: { type: 'value', show: false },
+      series: [{
+        data: [272124, 260000, 255000, 250000, 248968],
+        type: 'line', smooth: true, symbol: 'none',
+        lineStyle: { width: 2, color: '#1890ff' },
+        areaStyle: { color: 'rgba(24,144,255,0.1)' }
+      }]
+    })
+  }
+  // failed registrations
+  if (failedRegChartRef.value) {
+    const chart = echarts.init(failedRegChartRef.value)
+    chart.setOption({
+      grid: { left: 0, right: 0, top: 10, bottom: 10 },
+      xAxis: { type: 'category', show: false, data: [1,2,3,4,5] },
+      yAxis: { type: 'value', show: false },
+      series: [{
+        data: [10, 9, 8, 8, 8],
+        type: 'line', smooth: true, symbol: 'none',
+        lineStyle: { width: 2, color: '#f5222d' },
+        areaStyle: { color: 'rgba(245,34,45,0.1)' }
+      }]
+    })
+  }
+})
+
+// 计算MO值 (SCSCF.05/SCSCF.06)*100
+function calculateMOValue() {
+  if (imsRealtimeRawData.value.length === 0) return '-'
+
+  // 获取最新的数据
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  if (!latestData || !latestData.data) return '-'
+
+  const kpiEvent = latestData.data
+  const scscf05 = Number(kpiEvent['SCSCF.05']) || 0
+  const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
+
+  if (scscf06 === 0) return '-'
+
+  const moValue = (scscf05 / scscf06) * 100
+  return moValue.toFixed(1)
+}
+
+// 计算MT值 (SCSCF.06/SCSCF.07)*100
+function calculateMTValue() {
+  if (imsRealtimeRawData.value.length === 0) return '-'
+
+  // 获取最新的数据
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  if (!latestData || !latestData.data) return '-'
+
+  const kpiEvent = latestData.data
+  const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
+  const scscf07 = Number(kpiEvent['SCSCF.07']) || 0
+
+  if (scscf07 === 0) return '-'
+
+  const mtValue = (scscf06 / scscf07) * 100
+  return mtValue.toFixed(1)
+}
+
+// 计算MO变化值（完善版本）
+function calculateMOChange() {
+  if (imsRealtimeRawData.value.length < 2) return '±0.00% last 5s'
+
+  // 获取最新和上一个数据点
+  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'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  const latestMO = calculateMOValueFromData(latestKpi)
+  const previousMO = calculateMOValueFromData(previousKpi)
+
+  // 检查MO是否有有效值
+  if (latestMO === '-' || previousMO === '-') return '±0.00% last 5s'
+
+  // 计算变化幅度
+  const change = latestMO - previousMO
+
+  // 检查是否有变化
+  if (change === 0) return '±0.00% last 5s'
+
+  const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
+
+  // 计算时间差
+  const timeDiff = calculateTimeDifference(latestData, previousData)
+
+  return `${changeText} last ${timeDiff}`
+}
+
+// 计算MT变化值（完善版本）
+function calculateMTChange() {
+  if (imsRealtimeRawData.value.length < 2) return '±0.00% last 5s'
+
+  // 获取最新和上一个数据点
+  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'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  const latestMT = calculateMTValueFromData(latestKpi)
+  const previousMT = calculateMTValueFromData(previousKpi)
+
+  // 检查MT是否有有效值
+  if (latestMT === '-' || previousMT === '-') return '±0.00% last 5s'
+
+  // 计算变化幅度
+  const change = latestMT - previousMT
+
+  // 检查是否有变化
+  if (change === 0) return '±0.00% last 5s'
+
+  const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
+
+  // 计算时间差
+  const timeDiff = calculateTimeDifference(latestData, previousData)
+
+  return `${changeText} last ${timeDiff}`
+}
+
+// 计算时间差函数
+function calculateTimeDifference(latestData: any, previousData: any) {
+  // 获取时间戳
+  const latestTime = latestData.timestamp || latestData.time || Date.now()
+  const previousTime = previousData.timestamp || previousData.time || Date.now()
+
+  // 计算时间差（毫秒）
+  const diffMs = Math.abs(latestTime - previousTime)
+
+  // 转换为秒
+  const diffSeconds = Math.floor(diffMs / 1000)
+
+  // 转换为分钟
+  const diffMinutes = Math.floor(diffSeconds / 60)
+
+  // 根据时间差返回合适的格式
+  if (diffMinutes > 0) {
+    return `${diffMinutes}m`
+  } else {
+    return `${diffSeconds}s`
+  }
+}
+
+// 辅助函数：从数据中计算MO值
+function calculateMOValueFromData(kpiEvent: any) {
+  const scscf05 = Number(kpiEvent['SCSCF.05']) || 0
+  const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
+  return scscf06 === 0 ? '-' : (scscf05 / scscf06) * 100
+}
+
+// 辅助函数：从数据中计算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
+}
+
+// 计算registration success值
+function calculateRegSuccessValue() {
+  if (imsRealtimeRawData.value.length === 0) return '-'
+
+  // 获取最新的数据
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  if (!latestData || !latestData.data) return '-'
+
+  const kpiEvent = latestData.data
+  const scscf03 = Number(kpiEvent['SCSCF.03']) || 0
+  const scscf04 = Number(kpiEvent['SCSCF.04']) || 0
+
+  if (scscf04 === 0) return '-'
+
+  const regSuccessValue = (scscf03 / scscf04) * 100
+  return regSuccessValue.toFixed(1)
+}
+
+// 计算registration success变化值
+function calculateRegSuccessChange() {
+  if (imsRealtimeRawData.value.length < 2) return '±0.00% last 5s'
+
+  // 获取最新和上一个数据点
+  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'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  const latestRegSuccess = calculateRegSuccessValueFromData(latestKpi)
+  const previousRegSuccess = calculateRegSuccessValueFromData(previousKpi)
+
+  // 检查registration success是否有有效值
+  if (latestRegSuccess === '-' || previousRegSuccess === '-') return '±0.00% last 5s'
+
+  // 计算变化幅度
+  const change = latestRegSuccess - previousRegSuccess
+
+  // 检查是否有变化
+  if (change === 0) return '±0.00% last 5s'
+
+  const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
+
+  // 计算时间差
+  const timeDiff = calculateTimeDifference(latestData, previousData)
+
+  return `${changeText} last ${timeDiff}`
+}
+
+// 辅助函数：从数据中计算registration success值
+function calculateRegSuccessValueFromData(kpiEvent: any) {
+  const scscf03 = Number(kpiEvent['SCSCF.03']) || 0
+  const scscf04 = Number(kpiEvent['SCSCF.04']) || 0
+  return scscf04 === 0 ? '-' : (scscf03 / scscf04) * 100
+}
+
+// 计算active calls值
+function calculateActiveCallsValue() {
+  if (imsRealtimeRawData.value.length === 0) return '-'
+
+  // 获取最新的数据
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  if (!latestData || !latestData.data) return '-'
+
+  const kpiEvent = latestData.data
+  const scscf07 = Number(kpiEvent['SCSCF.07']) || 0
+
+  if (scscf07 === 0) return '-'
+
+  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'
+
+  // 获取最新和上一个数据点
+  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'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  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 '±0 last 5s'
+
+  const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
+
+  // 计算时间差
+  const timeDiff = calculateTimeDifference(latestData, previousData)
+
+  return `${changeText} last ${timeDiff}`
+}
+
+// 计算failed calls值
+function calculateFailedCallsValue() {
+  if (imsRealtimeRawData.value.length === 0) return '-'
+
+  // 获取最新的数据
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  if (!latestData || !latestData.data) return '-'
+
+  const kpiEvent = latestData.data
+  const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
+  const scscf07 = Number(kpiEvent['SCSCF.07']) || 0
+
+  const failedCallsValue = scscf06 - scscf07
+  return failedCallsValue.toFixed(0)
+}
+
+// 计算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'
+
+  // 获取最新和上一个数据点
+  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'
+
+  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 '±0 last 5s'
+
+  const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
+
+  // 计算时间差
+  const timeDiff = calculateTimeDifference(latestData, previousData)
+
+  return `${changeText} last ${timeDiff}`
+}
+
+// 计算active registrations值
+function calculateActiveRegistrationsValue() {
+  if (imsRealtimeRawData.value.length === 0) return '-'
+
+  // 获取最新的数据
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  if (!latestData || !latestData.data) return '-'
+
+  const kpiEvent = latestData.data
+  const scscf03 = Number(kpiEvent['SCSCF.03']) || 0
+
+  if (scscf03 === 0) return '-'
+
+  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'
+
+  // 获取最新和上一个数据点
+  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'
+
+  const latestKpi = latestData.data
+  const previousKpi = previousData.data
+
+  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 '±0 last 5s'
+
+  const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
+
+  // 计算时间差
+  const timeDiff = calculateTimeDifference(latestData, previousData)
+
+  return `${changeText} last ${timeDiff}`
+}
+
+// 计算failed registrations值
+function calculateFailedRegistrationsValue() {
+  if (imsRealtimeRawData.value.length === 0) return '-'
+
+  // 获取最新的数据
+  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
+  if (!latestData || !latestData.data) return '-'
+
+  const kpiEvent = latestData.data
+  const scscf04 = Number(kpiEvent['SCSCF.04']) || 0
+  const scscf03 = Number(kpiEvent['SCSCF.03']) || 0
+
+  const failedRegistrationsValue = scscf04 - scscf03
+  return failedRegistrationsValue.toFixed(0)
+}
+
+// 计算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'
+
+  // 获取最新和上一个数据点
+  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'
+
+  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 '±0 last 5s'
+
+  const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
+
+  // 计算时间差
+  const timeDiff = calculateTimeDifference(latestData, previousData)
+
+  return `${changeText} last ${timeDiff}`
+}
+</script>
+
+<style scoped>
+.row-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  padding-left: 8px;
+  border-left: 3px solid #1890ff;
+}
+.dashboard-cards {
+  padding: 16px;
+}
+.metric-card {
+  border-radius: 16px;
+  height: 100%;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09);
+  min-height: 180px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.card-content {
+  display: flex;
+  align-items: center;
+}
+.trend-chart {
+  flex: 2;
+  height: 60px;
+  min-width: 140px;
+  max-width: 220px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.mini-chart {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 0;
+  display: block;
+}
+.card-subtext {
+  font-size: 12px;
+  color: #b0b0b0;
+  margin-top: 2px;
+  letter-spacing: 0.1em;
+}
+.card-sub-sep {
+  margin-left: 18px;
+}
+.metric-info {
+  flex: 1;
+  margin-left: 16px;
+  text-align: right;
+  min-width: 90px;
+}
+.metric-value {
+  font-size: 24px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.metric-change {
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+}
+.main-arrow.up { color: #4CAF50; margin-left: 8px; }
+.main-arrow.down { color: #F44336; margin-left: 8px; }
+.main-icon.phone { color: #1890ff; font-size: 22px; margin-left: 8px; }
+.main-icon.calendar { color: #52c41a; font-size: 22px; margin-left: 8px; }
+.full-width {
+  width: 100%;
+  text-align: center;
+}
+
+/* IMS网元选择框样式 */
+.ims-select :deep(.ant-select-selector) {
+  border-radius: 8px !important;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.08);
+  min-height: 36px;
+  font-size: 15px;
+  border: 1px solid #d9d9d9;
+  transition: all 0.3s;
+}
+
+.ims-select :deep(.ant-select-selector:hover) {
+  border-color: #1890ff;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+}
+
+.ims-select :deep(.ant-select-focused .ant-select-selector) {
+  border-color: #1890ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+.ims-select :deep(.ant-select-selection-item) {
+  font-weight: 600;
+  color: #333;
+}
+
+.ims-select :deep(.ant-select-arrow) {
+  color: #666;
+}
+
+/* 暗色主题适配 */
+[data-theme='dark'] .ims-select :deep(.ant-select-selector) {
+  background-color: #1f1f1f;
+  border-color: #434343;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme='dark'] .ims-select :deep(.ant-select-selection-item) {
+  color: #cacada;
+}
+
+[data-theme='dark'] .ims-select :deep(.ant-select-arrow) {
+  color: #cacada;
+}
+</style>