feat:增加数据点，增加初始显示

src/views/perfManage/overview/index.vue

@@ -16,16 +16,16 @@
         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>-->
+      <!--      <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]">
@@ -35,7 +35,7 @@
           <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 class="card-subtext">60m <span class="card-sub-sep">now</span></div>-->
             </div>
             <div class="metric-info">
               <div class="metric-value">
@@ -47,24 +47,24 @@
           </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="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>
@@ -84,7 +84,7 @@
           <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 class="card-subtext">60m <span class="card-sub-sep">now</span></div>-->
             </div>
             <div class="metric-info">
               <div class="metric-value">
@@ -105,7 +105,7 @@
           <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 class="card-subtext">24h <span class="card-sub-sep">now</span></div>-->
             </div>
             <div class="metric-info">
               <div class="metric-value">
@@ -134,7 +134,7 @@
           <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 class="card-subtext">24h <span class="card-sub-sep">now</span></div>-->
             </div>
             <div class="metric-info">
               <div class="metric-value">
@@ -158,6 +158,8 @@ 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])
 
@@ -193,6 +195,9 @@ onMounted(async () => {
     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类型的网元') // 调试信息
@@ -202,9 +207,68 @@ onMounted(async () => {
   }
 })
 
+// 获取历史数据
+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网元时，重新订阅
-function onImsNeChange() {
+async function onImsNeChange() {
   // console.log('切换IMS网元，新的网元ID:', selectedImsNeId.value) // 调试信息
+
+  // 切换网元时，先清空旧数据
+  imsRealtimeRawData.value = []
+
+  // 先获取历史数据，再订阅实时数据
+  await fetchHistoryData(selectedImsNeId.value)
   subscribeImsRealtime(selectedImsNeId.value)
 }
 
@@ -219,7 +283,10 @@ function subscribeImsRealtime(neId: string) {
     imsWs.value.close()
     imsWs.value = null
   }
-  imsRealtimeRawData.value = []
+
+  // 注意：不要清空历史数据，让历史数据保留
+  // imsRealtimeRawData.value = [] // 移除这行，避免清空历史数据
+
   if (!neId) return
 
   imsWs.value = new WS()
@@ -272,6 +339,9 @@ function updateActiveCallsChart() {
     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
@@ -296,11 +366,13 @@ function updateActiveCallsChart() {
     chartData.unshift(0) // 在开头补充默认值0
   }
 
-  // 限制数据点数量
-  if (chartData.length > 50) {
-    chartData.splice(0, chartData.length - 50)
+  // 限制数据点数量为最近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)
 
@@ -360,9 +432,9 @@ function updateFailedCallsChart() {
     chartData.unshift(0) // 在开头补充默认值0
   }
 
-  // 限制数据点数量
-  if (chartData.length > 50) {
-    chartData.splice(0, chartData.length - 50)
+  // 限制数据点数量为最近30个
+  if (chartData.length > 30) {
+    chartData.splice(0, chartData.length - 30)
   }
 
   // 生成时间轴数据
@@ -422,9 +494,9 @@ function updateActiveRegistrationsChart() {
     chartData.unshift(0) // 在开头补充默认值0
   }
 
-  // 限制数据点数量
-  if (chartData.length > 50) {
-    chartData.splice(0, chartData.length - 50)
+  // 限制数据点数量为最近30个
+  if (chartData.length > 30) {
+    chartData.splice(0, chartData.length - 30)
   }
 
   // 生成时间轴数据
@@ -486,9 +558,9 @@ function updateFailedRegistrationsChart() {
     chartData.unshift(0) // 在开头补充默认值0
   }
 
-  // 限制数据点数量
-  if (chartData.length > 50) {
-    chartData.splice(0, chartData.length - 50)
+  // 限制数据点数量为最近30个
+  if (chartData.length > 30) {
+    chartData.splice(0, chartData.length - 30)
   }
 
   // 生成时间轴数据
@@ -551,10 +623,16 @@ function handleIMSRealtimeData(res: any) {
       data: kpiEvent
     }
 
+    // 将新数据添加到数组末尾（最新的数据在最后）
     imsRealtimeRawData.value.push(dataToStore)
-    if (imsRealtimeRawData.value.length > 200) imsRealtimeRawData.value.shift()
 
-    // console.log('数据已存储，当前数组长度:', imsRealtimeRawData.value.length) // 调试信息
+    // 保持数据点数量在合理范围内（最多200个点）
+    if (imsRealtimeRawData.value.length > 200) {
+      imsRealtimeRawData.value.shift() // 移除最早的数据点
+    }
+
+    console.log('实时数据已添加，当前数据点数量:', imsRealtimeRawData.value.length)
+    console.log('最新数据:', dataToStore)
 
     // 更新active calls图表
     updateActiveCallsChart()
@@ -677,13 +755,13 @@ function calculateMOChange() {
   const previousMO = calculateMOValueFromData(previousKpi)
 
   // 检查MO是否有有效值
-  if (latestMO === '-' || previousMO === '-') return '±0.00% last 1m'
+  if (latestMO === '-' || previousMO === '-') return '±0.00% last 5s'
 
   // 计算变化幅度
   const change = latestMO - previousMO
 
   // 检查是否有变化
-  if (change === 0) return '±0.00% last 1m'
+  if (change === 0) return '±0.00% last 5s'
 
   const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
 
@@ -695,13 +773,13 @@ function calculateMOChange() {
 
 // 计算MT变化值（完善版本）
 function calculateMTChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0.00% last 1m'
+  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 1m'
+  if (!latestData?.data || !previousData?.data) return '±0.00% last 5s'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -710,13 +788,13 @@ function calculateMTChange() {
   const previousMT = calculateMTValueFromData(previousKpi)
 
   // 检查MT是否有有效值
-  if (latestMT === '-' || previousMT === '-') return '±0.00% last 1m'
+  if (latestMT === '-' || previousMT === '-') return '±0.00% last 5s'
 
   // 计算变化幅度
   const change = latestMT - previousMT
 
   // 检查是否有变化
-  if (change === 0) return '±0.00% last 1m'
+  if (change === 0) return '±0.00% last 5s'
 
   const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
 
@@ -783,13 +861,13 @@ function calculateRegSuccessValue() {
 
 // 计算registration success变化值
 function calculateRegSuccessChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0.00% last 1m'
+  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 1m'
+  if (!latestData?.data || !previousData?.data) return '±0.00% last 5s'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -798,13 +876,13 @@ function calculateRegSuccessChange() {
   const previousRegSuccess = calculateRegSuccessValueFromData(previousKpi)
 
   // 检查registration success是否有有效值
-  if (latestRegSuccess === '-' || previousRegSuccess === '-') return '±0.00% last 1m'
+  if (latestRegSuccess === '-' || previousRegSuccess === '-') return '±0.00% last 5s'
 
   // 计算变化幅度
   const change = latestRegSuccess - previousRegSuccess
 
   // 检查是否有变化
-  if (change === 0) return '±0.00% last 1m'
+  if (change === 0) return '±0.00% last 5s'
 
   const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
 
@@ -858,13 +936,13 @@ function calculateActiveCallsArrow() {
 
 // 计算active calls变化值
 function calculateActiveCallsChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0 last 1m'
+  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 1m'
+  if (!latestData?.data || !previousData?.data) return '±0 last 5s'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -873,13 +951,13 @@ function calculateActiveCallsChange() {
   const previousActiveCalls = Number(previousKpi['SCSCF.07']) || 0
 
   // 检查active calls是否有有效值
-  if (latestActiveCalls === 0 || previousActiveCalls === 0) return '±0 last 1m'
+  if (latestActiveCalls === 0 || previousActiveCalls === 0) return '±0 last 5s'
 
   // 计算变化幅度
   const change = latestActiveCalls - previousActiveCalls
 
   // 检查是否有变化
-  if (change === 0) return '±0 last 1m'
+  if (change === 0) return '±0 last 5s'
 
   const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
 
@@ -925,13 +1003,13 @@ function calculateFailedCallsArrow() {
 
 // 计算failed calls变化值
 function calculateFailedCallsChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0 last 1m'
+  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 1m'
+  if (!latestData?.data || !previousData?.data) return '±0 last 5s'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -948,7 +1026,7 @@ function calculateFailedCallsChange() {
   const change = latestFailedCalls - previousFailedCalls
 
   // 检查是否有变化
-  if (change === 0) return '±0 last 1m'
+  if (change === 0) return '±0 last 5s'
 
   const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
 
@@ -995,13 +1073,13 @@ function calculateActiveRegistrationsArrow() {
 
 // 计算active registrations变化值
 function calculateActiveRegistrationsChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0 last 1m'
+  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 1m'
+  if (!latestData?.data || !previousData?.data) return '±0 last 5s'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -1010,13 +1088,13 @@ function calculateActiveRegistrationsChange() {
   const previousActiveRegistrations = Number(previousKpi['SCSCF.03']) || 0
 
   // 检查active registrations是否有有效值
-  if (latestActiveRegistrations === 0 || previousActiveRegistrations === 0) return '±0 last 1m'
+  if (latestActiveRegistrations === 0 || previousActiveRegistrations === 0) return '±0 last 5s'
 
   // 计算变化幅度
   const change = latestActiveRegistrations - previousActiveRegistrations
 
   // 检查是否有变化
-  if (change === 0) return '±0 last 1m'
+  if (change === 0) return '±0 last 5s'
 
   const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
 
@@ -1062,13 +1140,13 @@ function calculateFailedRegistrationsArrow() {
 
 // 计算failed registrations变化值
 function calculateFailedRegistrationsChange() {
-  if (imsRealtimeRawData.value.length < 2) return '±0 last 1m'
+  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 1m'
+  if (!latestData?.data || !previousData?.data) return '±0 last 5s'
 
   const latestKpi = latestData.data
   const previousKpi = previousData.data
@@ -1085,7 +1163,7 @@ function calculateFailedRegistrationsChange() {
   const change = latestFailedRegistrations - previousFailedRegistrations
 
   // 检查是否有变化
-  if (change === 0) return '±0 last 1m'
+  if (change === 0) return '±0 last 5s'
 
   const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`