diff --git a/src/views/perfManage/overview/index.vue b/src/views/perfManage/overview/index.vue
index 9f821086..9499477f 100644
--- a/src/views/perfManage/overview/index.vue
+++ b/src/views/perfManage/overview/index.vue
@@ -11,10 +11,21 @@
@change="onImsNeChange"
style="width: 100px; font-size: 15px;"
:dropdown-style="{ borderRadius: '8px' }"
+ placeholder='No NE'
:bordered="true"
class="ims-select"
:allow-clear="false"
/>
+
+
+
+
+
+
+
+
+
+
Calls
@@ -42,7 +53,7 @@
-
+
@@ -164,42 +175,74 @@ const selectedImsNeId = ref('')
const imsWs = ref(null)
// IMS实时原始数据（只存储当前选中网元）
const imsRealtimeRawData = ref([])
+// 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) // 调试信息
subscribeImsRealtime(selectedImsNeId.value)
+ } else {
+ // console.warn('没有找到IMS类型的网元') // 调试信息
}
+ } else {
+ // console.error('获取网元列表失败或数据格式不正确') // 调试信息
}
})
// 切换IMS网元时，重新订阅
function onImsNeChange() {
+ // console.log('切换IMS网元，新的网元ID:', 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: () => {},
+ onerror: (error: any) => {
+ // console.error('WebSocket连接错误:', error) // 调试信息
+ wsStatus.value = '连接错误' // 更新状态
+ },
+ onopen: () => {
+ // console.log('WebSocket连接已建立') // 调试信息
+ wsStatus.value = '已连接' // 更新状态
+ },
+ onclose: () => {
+ // console.log('WebSocket连接已关闭') // 调试信息
+ wsStatus.value = '已断开' // 更新状态
+ }
})
}
@@ -209,6 +252,7 @@ onBeforeUnmount(() => {
imsWs.value.close()
imsWs.value = null
}
+ wsStatus.value = '已断开' // 更新状态
})
// 更新active calls图表
@@ -465,10 +509,53 @@ function updateFailedRegistrationsChart() {
// 处理IMS实时数据（只存储当前选中网元）
function handleIMSRealtimeData(res: any) {
- if (res && res.data) {
- imsRealtimeRawData.value.push(res)
+ // 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)
if (imsRealtimeRawData.value.length > 200) imsRealtimeRawData.value.shift()
+ // console.log('数据已存储，当前数组长度:', imsRealtimeRawData.value.length) // 调试信息
+
// 更新active calls图表
updateActiveCallsChart()
// 更新failed calls图表
@@ -477,26 +564,32 @@ function handleIMSRealtimeData(res: any) {
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', smooth: true, 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({
- 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)' }
- }]
- })
+ chart.setOption(defaultChartOption)
}
- // MOS
+
+ // MOS - 保持原有的模拟数据
if (mosChartRef.value) {
const chart = echarts.init(mosChartRef.value)
chart.setOption({
@@ -511,50 +604,23 @@ onMounted(() => {
}]
})
}
+
// 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)' }
- }]
- })
+ chart.setOption(defaultChartOption)
}
+
// 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)' }
- }]
- })
+ chart.setOption(defaultChartOption)
}
+
// 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)' }
- }]
- })
+ chart.setOption(defaultChartOption)
}
})
@@ -1028,6 +1094,32 @@ function calculateFailedRegistrationsChange() {
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)
+}