OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

feat:调整顺序

Browse Source
This commit is contained in:
zhongzm
2025-08-07 19:15:40 +08:00
parent bffd3fe791
commit 1359aa8994
1 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/perfManage/overview/index.vue
View File

@@ -2,7 +2,6 @@
<div class="dashboard-cards">
<div style="font-size:32px; font-weight: bold; margin-bottom: 20px; text-align: center; position: relative;">
{{ t('views.perfManage.voiceOverView.voiceTitle') }}
<!-- <span class="control-tower-badge">IMS Control Tower</span>-->
</div>
<div style="margin-bottom: 24px; display: flex; align-items: center; justify-content: flex-end;">
<span style="font-size: 12px; color: #999; font-style: italic;">*{{ t('views.perfManage.voiceOverView.tips') }}</span>
@@ -29,7 +28,6 @@
<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">
@@ -78,7 +76,6 @@
<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">
@@ -99,7 +96,6 @@
<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">
@@ -128,7 +124,6 @@
<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">
@@ -218,15 +213,15 @@ async function fetchHistoryData(neId: string) {
beginTime: beginTime.toString(),
endTime: endTime.toString(),
sortField: 'timeGroup',
sortOrder: 'desc',
sortOrder: 'asc',
pageSize: 30, // 最多获取30条数据
pageNum: 1
}
console.log('获取历史数据参数:', params)
// console.log('获取历史数据参数:', params)
const res = await listKPIData(params)
console.log('历史数据响应:', res)
//console.log('历史数据响应:', res)
if (res.code === 200001 && Array.isArray(res.data)) {
// 将历史数据转换为与实时数据相同的格式
@@ -235,14 +230,14 @@ async function fetchHistoryData(neId: string) {
data: item
}))
console.log('转换后的历史数据:', historyData)
//console.log('转换后的历史数据:', historyData)
// 将历史数据添加到实时数据数组中（追加而不是覆盖）
// 注意：这里直接赋值，因为这是初始加载历史数据
imsRealtimeRawData.value = historyData
console.log('历史数据加载完成，数据点数量:', imsRealtimeRawData.value.length)
console.log('最新历史数据时间戳:', historyData.length > 0 ? historyData[historyData.length - 1].timestamp : '无数据')
//console.log('历史数据加载完成，数据点数量:', imsRealtimeRawData.value.length)
//console.log('最新历史数据时间戳:', historyData.length > 0 ? historyData[historyData.length - 1].timestamp : '无数据')
// 更新所有图表
updateActiveCallsChart()
@@ -250,10 +245,10 @@ async function fetchHistoryData(neId: string) {
updateActiveRegistrationsChart()
updateFailedRegistrationsChart()
} else {
console.warn('获取历史数据失败或数据为空')
//console.warn('获取历史数据失败或数据为空')
}
} catch (error) {
console.error('获取历史数据出错:', error)
//console.error('获取历史数据出错:', error)
}
}
@@ -281,8 +276,6 @@ function subscribeImsRealtime(neId: string) {
imsWs.value = null
}
// 注意：不要清空历史数据，让历史数据保留
// imsRealtimeRawData.value = [] // 移除这行，避免清空历史数据
if (!neId) return
@@ -970,37 +963,37 @@ function updateFailedRegistrationsChart() {
// 处理IMS实时数据（只存储当前选中网元）
function handleIMSRealtimeData(res: any) {
console.log('收到实时数据:', res) // 调试信息
//console.log('收到实时数据:', res) // 调试信息
// 检查数据结构：后端实际格式是 {code: 200001, data: {...}, msg: 'success'}
const { code, data, msg } = res
// 检查是否是错误响应 - 修改为适配实际的code值
if (code !== 200001 || !data) {
console.warn('收到错误响应或数据格式不正确:', res) // 调试信息
// console.warn('收到错误响应或数据格式不正确:', res) // 调试信息
return
}
// 检查是否是连接确认消息（只包含clientId）
if (data.clientId) {
console.log('收到WebSocket连接确认消息:', data.clientId) // 调试信息
//console.log('收到WebSocket连接确认消息:', data.clientId) // 调试信息
return
}
// 检查是否是KPI数据消息（包含data和groupId）
if (data.data && data.groupId) {
console.log('收到KPI数据消息，groupId:', data.groupId) // 调试信息
//console.log('收到KPI数据消息，groupId:', data.groupId) // 调试信息
// 解析订阅组ID，确认是我们订阅的IMS网元
const [_, neType, neId] = data.groupId.split('_')
if (neType !== 'IMS' || neId !== selectedImsNeId.value) {
console.log('收到其他网元数据，忽略:', data.groupId) // 调试信息
//console.log('收到其他网元数据，忽略:', data.groupId) // 调试信息
return
}
const kpiEvent = data.data
if (!kpiEvent) {
console.warn('KPI事件数据为空') // 调试信息
//console.warn('KPI事件数据为空') // 调试信息
return
}
@@ -1020,9 +1013,9 @@ function handleIMSRealtimeData(res: any) {
imsRealtimeRawData.value.shift() // 移除最早的数据点
}
console.log('实时数据已添加，当前数据点数量:', imsRealtimeRawData.value.length)
console.log('最新数据:', dataToStore)
console.log('最新数据时间戳:', dataToStore.timestamp)
//console.log('实时数据已添加，当前数据点数量:', imsRealtimeRawData.value.length)
//console.log('最新数据:', dataToStore)
//console.log('最新数据时间戳:', dataToStore.timestamp)
// 强制触发Vue响应式更新
imsRealtimeRawData.value = [...imsRealtimeRawData.value]
@@ -1036,7 +1029,7 @@ function handleIMSRealtimeData(res: any) {
// 更新failed registrations图表
updateFailedRegistrationsChart()
} else {
console.log('收到未知格式的数据:', data) // 调试信息
//console.log('收到未知格式的数据:', data) // 调试信息
}
}
@@ -1762,10 +1755,9 @@ function calculateFailedRegistrationsChange() {
return `${changeText} ${+t('views.perfManage.voiceOverView.last')} ${timeDiff}`
}
// 测试数据更新
// function testDataUpdate() {
// // console.log('测试数据更新')
// console.log('测试数据更新')
//
// // 创建模拟的后端KPI数据消息格式
// const mockWebSocketMessage = {