@@ -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)}`