From ae1dad1fc36cc21a979fc0c598577c6a57d4f198 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Wed, 16 Jul 2025 11:09:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=AF=AD=E9=9F=B3=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/overview/index.vue | 1329 +++++++++++++++++++++++
 1 file changed, 1329 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..a368a0fa
--- /dev/null
+++ b/src/views/perfManage/overview/index.vue
@@ -0,0 +1,1329 @@
+<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' }"
+        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>
+    <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>-->
+      <!--&lt;!&ndash;              <div class="card-subtext">60m <span class="card-sub-sep">now</span></div>&ndash;&gt;-->
+      <!--            </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'
+import { listKPIData } from '@/api/perfManage/goldTarget'
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'
+
+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[]>([])
+// WebSocket连接状态
+const wsStatus = ref('未连接')
+
+// 获取IMS网元列表
+onMounted(async () => {
+  // console.log('组件挂载，开始获取IMS网元列表') // 调试信息
+
+  const neInfoStore = useNeInfoStore()
+  const res = await neInfoStore.fnNelist()
+  // console.log('获取到的网元列表响应:', res) // 调试信息
+
+  if (res && Array.isArray(res.data)) {
+    imsNeList.value = res.data.filter((ne: any) => ne.neType === 'IMS')
+    // console.log('过滤后的IMS网元列表:', imsNeList.value) // 调试信息
+
+    if (imsNeList.value.length > 0) {
+      selectedImsNeId.value = imsNeList.value[0].neId
+      // console.log('默认选中第一个IMS网元:', selectedImsNeId.value) // 调试信息
+
+      // 先获取历史数据，再订阅实时数据
+      await fetchHistoryData(selectedImsNeId.value)
+      subscribeImsRealtime(selectedImsNeId.value)
+    } else {
+      // console.warn('没有找到IMS类型的网元') // 调试信息
+    }
+  } else {
+    // console.error('获取网元列表失败或数据格式不正确') // 调试信息
+  }
+})
+
+// 获取历史数据
+async function fetchHistoryData(neId: string) {
+  if (!neId) return
+
+  try {
+    // 计算30分钟前的时间
+    const endTime = Date.now()
+    const startTime = endTime - (30 * 60 * 1000) // 30分钟前
+
+    // 构建查询参数，与黄金指标界面保持一致
+    const params = {
+      neType: 'IMS',
+      neId: neId,
+      interval: 60, // 1分钟颗粒度
+      startTime: startTime.toString(),
+      endTime: endTime.toString(),
+      sortField: 'timeGroup',
+      sortOrder: 'desc',
+      pageSize: 30, // 最多获取30条数据
+      pageNum: 1
+    }
+
+    console.log('获取历史数据参数:', params)
+
+    const res = await listKPIData(params)
+    console.log('历史数据响应:', res)
+
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      // 将历史数据转换为与实时数据相同的格式
+      const historyData = res.data.map((item: any) => ({
+        timestamp: item.timeGroup || Date.now(),
+        data: item
+      }))
+
+      console.log('转换后的历史数据:', historyData)
+
+      // 将历史数据添加到实时数据数组中（追加而不是覆盖）
+      // 注意：这里直接赋值，因为这是初始加载历史数据
+      imsRealtimeRawData.value = historyData
+
+      // 更新所有图表
+      updateActiveCallsChart()
+      updateFailedCallsChart()
+      updateActiveRegistrationsChart()
+      updateFailedRegistrationsChart()
+    } else {
+      console.warn('获取历史数据失败或数据为空')
+    }
+  } catch (error) {
+    console.error('获取历史数据出错:', error)
+  }
+}
+
+// 切换IMS网元时，重新订阅
+async function onImsNeChange() {
+  // console.log('切换IMS网元，新的网元ID:', selectedImsNeId.value) // 调试信息
+
+  // 切换网元时，先清空旧数据
+  imsRealtimeRawData.value = []
+
+  // 先获取历史数据，再订阅实时数据
+  await fetchHistoryData(selectedImsNeId.value)
+  subscribeImsRealtime(selectedImsNeId.value)
+}
+
+// 订阅指定IMS网元实时数据
+function subscribeImsRealtime(neId: string) {
+  // console.log('开始订阅IMS网元数据，网元ID:', neId) // 调试信息
+  wsStatus.value = '连接中...' // 更新状态
+
+  // 关闭旧WebSocket
+  if (imsWs.value) {
+    // console.log('关闭旧WebSocket连接') // 调试信息
+    imsWs.value.close()
+    imsWs.value = null
+  }
+
+  // 注意：不要清空历史数据，让历史数据保留
+  // imsRealtimeRawData.value = [] // 移除这行，避免清空历史数据
+
+  if (!neId) return
+
+  imsWs.value = new WS()
+  // console.log('创建新的WebSocket连接') // 调试信息
+
+  imsWs.value.connect({
+    url: '/ws',
+    params: {
+      subGroupID: `10_IMS_${neId}`,
+    },
+    onmessage: handleIMSRealtimeData,
+    onerror: (error: any) => {
+      // console.error('WebSocket连接错误:', error) // 调试信息
+      wsStatus.value = '连接错误' // 更新状态
+    },
+    onopen: () => {
+      // console.log('WebSocket连接已建立') // 调试信息
+      wsStatus.value = '已连接' // 更新状态
+    },
+    onclose: () => {
+      // console.log('WebSocket连接已关闭') // 调试信息
+      wsStatus.value = '已断开' // 更新状态
+    }
+  })
+}
+
+// 组件卸载时关闭WebSocket
+onBeforeUnmount(() => {
+  if (imsWs.value) {
+    imsWs.value.close()
+    imsWs.value = null
+  }
+  wsStatus.value = '已断开' // 更新状态
+})
+
+// 更新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
+  })
+
+  console.log('updateActiveCallsChart - 原始数据点数量:', imsRealtimeRawData.value.length)
+  console.log('updateActiveCallsChart - 图表数据:', chartData)
+
+  // 如果没有数据，显示默认的平直线
+  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',  symbol: 'none',
+        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
+        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
+      }]
+    })
+    return
+  }
+
+  // 如果数据不足，补充默认数据
+  while (chartData.length < 5) {
+    chartData.unshift(0) // 在开头补充默认值0
+  }
+
+  // 限制数据点数量为最近30个
+  if (chartData.length > 30) {
+    chartData.splice(0, chartData.length - 30)
+  }
+
+  console.log('updateActiveCallsChart - 最终图表数据点数量:', chartData.length)
+
+  // 生成时间轴数据
+  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',  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',  symbol: 'none',
+        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
+        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
+      }]
+    })
+    return
+  }
+
+  // 如果数据不足，补充默认数据
+  while (chartData.length < 5) {
+    chartData.unshift(0) // 在开头补充默认值0
+  }
+
+  // 限制数据点数量为最近30个
+  if (chartData.length > 30) {
+    chartData.splice(0, chartData.length - 30)
+  }
+
+  // 生成时间轴数据
+  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',  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',  symbol: 'none',
+        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
+        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
+      }]
+    })
+    return
+  }
+
+  // 如果数据不足，补充默认数据
+  while (chartData.length < 5) {
+    chartData.unshift(0) // 在开头补充默认值0
+  }
+
+  // 限制数据点数量为最近30个
+  if (chartData.length > 30) {
+    chartData.splice(0, chartData.length - 30)
+  }
+
+  // 生成时间轴数据
+  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',  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',  symbol: 'none',
+        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
+        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
+      }]
+    })
+    return
+  }
+
+  // 如果数据不足，补充默认数据
+  while (chartData.length < 5) {
+    chartData.unshift(0) // 在开头补充默认值0
+  }
+
+  // 限制数据点数量为最近30个
+  if (chartData.length > 30) {
+    chartData.splice(0, chartData.length - 30)
+  }
+
+  // 生成时间轴数据
+  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',  symbol: 'none',
+      lineStyle: { width: 2, color: '#f5222d' }, // 红色线条表示failed registrations
+      areaStyle: { color: 'rgba(245,34,45,0.1)' } // 淡红色填充
+    }]
+  })
+}
+
+// 处理IMS实时数据（只存储当前选中网元）
+function handleIMSRealtimeData(res: any) {
+  // console.log('收到实时数据:', res) // 调试信息
+
+  // 检查数据结构：后端实际格式是 {code: 1, data: {...}, msg: 'success'}
+  const { code, data, msg } = res
+
+  // 检查是否是错误响应
+  if (code !== 1 || !data) {
+    // console.warn('收到错误响应或数据格式不正确:', res) // 调试信息
+    return
+  }
+
+  // 检查是否是连接确认消息（只包含clientId）
+  if (data.clientId) {
+    // console.log('收到WebSocket连接确认消息:', data.clientId) // 调试信息
+    return
+  }
+
+  // 检查是否是KPI数据消息（包含data和groupId）
+  if (data.data && 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) // 调试信息
+      return
+    }
+
+    const kpiEvent = data.data
+    if (!kpiEvent) {
+      // console.warn('KPI事件数据为空') // 调试信息
+      return
+    }
+
+    // console.log('处理IMS网元KPI数据:', kpiEvent) // 调试信息
+
+    // 确保数据结构正确
+    const dataToStore = {
+      timestamp: Date.now(),
+      data: kpiEvent
+    }
+
+    // 将新数据添加到数组末尾（最新的数据在最后）
+    imsRealtimeRawData.value.push(dataToStore)
+
+    // 保持数据点数量在合理范围内（最多200个点）
+    if (imsRealtimeRawData.value.length > 200) {
+      imsRealtimeRawData.value.shift() // 移除最早的数据点
+    }
+
+    console.log('实时数据已添加，当前数据点数量:', imsRealtimeRawData.value.length)
+    console.log('最新数据:', dataToStore)
+
+    // 更新active calls图表
+    updateActiveCallsChart()
+    // 更新failed calls图表
+    updateFailedCallsChart()
+    // 更新active registrations图表
+    updateActiveRegistrationsChart()
+    // 更新failed registrations图表
+    updateFailedRegistrationsChart()
+  } else {
+    // console.log('收到未知格式的数据:', data) // 调试信息
+  }
+}
+
+onMounted(() => {
+  // 初始化所有图表为0值线
+  const defaultChartOption = {
+    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: [0, 0, 0, 0, 0], // 默认显示0值
+      type: 'line',  symbol: 'none',
+      lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
+      areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
+    }]
+  }
+
+  // active calls
+  if (callsChartRef.value) {
+    const chart = echarts.init(callsChartRef.value)
+    chart.setOption(defaultChartOption)
+  }
+
+  // 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',  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(defaultChartOption)
+  }
+
+  // active registrations
+  if (regChartRef.value) {
+    const chart = echarts.init(regChartRef.value)
+    chart.setOption(defaultChartOption)
+  }
+
+  // failed registrations
+  if (failedRegChartRef.value) {
+    const chart = echarts.init(failedRegChartRef.value)
+    chart.setOption(defaultChartOption)
+  }
+})
+
+// 计算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 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'
+
+  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}`
+}
+
+// 测试数据更新
+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>
+.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>