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

feat:语音仪表盘增加指标

Browse Source
This commit is contained in:
zhongzm
2025-09-19 09:14:52 +08:00
parent f8376c803f
commit 2828deaece
2 changed files with 541 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/perfManage/goldTarget.ts
View File

@@ -142,3 +142,20 @@ export async function getbusyhour(query: Record<string, any>) {
params: query,
});
}
//MOS指标
export async function getMosHour(query: Record<string, any>) {
return request({
url: '/neData/ims/cdr/mos-hour',
method: 'get',
params: query,
});
}
//CCT指标
export async function getCctHour(query: Record<string, any>) {
return request({
url: '/neData/ims/cdr/cct-hour',
method: 'get',
params: query,
});
}

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

@@ -124,6 +124,42 @@
</a-card>
</a-col>
</a-row>
<a-row :gutter="[16, 16]" style="margin-top: 16px;">
<a-col :xs="24" :sm="24" :lg="12">
<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>
</div>
<div class="metric-info">
<div class="metric-value">
{{ calculateMosValue() }}
<span class="main-arrow" :class="calculateMosArrowDirection()">{{ calculateMosArrow() }}</span>
</div>
<div class="metric-change">{{ calculateMosChange() }}</div>
</div>
</div>
</a-card>
</a-col>
<a-col :xs="24" :sm="24" :lg="12">
<a-card bordered class="metric-card">
<div class="card-title">CCT<span class="main-icon phone">📞</span></div>
<div class="card-content">
<div class="trend-chart">
<div class="mini-chart" ref="cctChartRef"></div>
</div>
<div class="metric-info">
<div class="metric-value">
{{ calculateCctValue() }}
<span class="main-arrow" :class="calculateCctArrowDirection()">{{ calculateCctArrow() }}</span>
</div>
<div class="metric-change">{{ calculateCctChange() }}</div>
</div>
</div>
</a-card>
</a-col>
</a-row>
<div class="row-title" style="margin-top: 48px;">{{ t('views.perfManage.voiceOverView.registration') }}</div>
<a-row :gutter="[16, 16]">
<a-col :xs="24" :sm="24" :lg="8">
@@ -183,7 +219,7 @@ import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import useNeInfoStore from '@/store/modules/neinfo'
import { WS } from '@/plugins/ws-websocket'
import { listKPIData ,getbusyhour} from '@/api/perfManage/goldTarget'
import { listKPIData ,getbusyhour, getMosHour, getCctHour} from '@/api/perfManage/goldTarget'
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
@@ -194,6 +230,7 @@ const mosChartRef = ref<HTMLDivElement | null>(null)
const failedCallsChartRef = ref<HTMLDivElement | null>(null)
const callAttemptsChartRef = ref<HTMLDivElement | null>(null)
const callCompletionsChartRef = ref<HTMLDivElement | null>(null)
const cctChartRef = ref<HTMLDivElement | null>(null)
const regChartRef = ref<HTMLDivElement | null>(null)
const failedRegChartRef = ref<HTMLDivElement | null>(null)
@@ -207,6 +244,10 @@ const imsWs = ref<any>(null)
const imsRealtimeRawData = ref<any[]>([])
// Busy Hour数据（用于Call Attempts和Call Completions）
const busyHourData = ref<any>(null)
// MOS数据
const mosData = ref<any>(null)
// CCT数据
const cctData = ref<any>(null)
// WebSocket连接状态
const wsStatus = ref('no connection')
@@ -228,6 +269,8 @@ onMounted(async () => {
// 先获取历史数据和Busy Hour数据，再订阅实时数据
await fetchHistoryData(selectedImsNeId.value)
await fetchBusyHourData(selectedImsNeId.value)
await fetchMosData(selectedImsNeId.value)
await fetchCctData(selectedImsNeId.value)
subscribeImsRealtime(selectedImsNeId.value)
} else {
// console.warn('没有找到IMS类型的网元') // 调试信息
@@ -331,6 +374,80 @@ async function fetchBusyHourData(neId: string) {
}
}
// 获取MOS数据
async function fetchMosData(neId: string) {
if (!neId) return
try {
// 获取当天日期的时间戳
const today = new Date()
today.setHours(0, 0, 0, 0) // 设置为当天00:00:00
const timestamp = today.getTime()
// 构建请求参数
const params = {
neId: neId,
timestamp: timestamp
}
console.log('获取MOS数据参数:', params)
const res = await getMosHour(params)
console.log('MOS数据响应:', res)
if (res.code === 1 && Array.isArray(res.data)) {
mosData.value = res.data
console.log('MOS数据加载完成:', mosData.value)
// 更新MOS图表
updateMosChart()
} else {
console.warn('获取MOS数据失败或数据为空')
mosData.value = null
}
} catch (error) {
console.error('获取MOS数据出错:', error)
mosData.value = null
}
}
// 获取CCT数据
async function fetchCctData(neId: string) {
if (!neId) return
try {
// 获取当天日期的时间戳
const today = new Date()
today.setHours(0, 0, 0, 0) // 设置为当天00:00:00
const timestamp = today.getTime()
// 构建请求参数
const params = {
neId: neId,
timestamp: timestamp
}
console.log('获取CCT数据参数:', params)
const res = await getCctHour(params)
console.log('CCT数据响应:', res)
if (res.code === 1 && Array.isArray(res.data)) {
cctData.value = res.data
console.log('CCT数据加载完成:', cctData.value)
// 更新CCT图表
updateCctChart()
} else {
console.warn('获取CCT数据失败或数据为空')
cctData.value = null
}
} catch (error) {
console.error('获取CCT数据出错:', error)
cctData.value = null
}
}
// 切换IMS网元时，重新订阅
async function onImsNeChange() {
// console.log('切换IMS网元，新的网元ID:', selectedImsNeId.value) // 调试信息
@@ -350,6 +467,8 @@ async function onImsNeChange() {
// 先获取历史数据和Busy Hour数据，再订阅实时数据
await fetchHistoryData(selectedImsNeId.value)
await fetchBusyHourData(selectedImsNeId.value)
await fetchMosData(selectedImsNeId.value)
await fetchCctData(selectedImsNeId.value)
subscribeImsRealtime(selectedImsNeId.value)
}
@@ -1088,8 +1207,8 @@ function updateCallAttemptsChart() {
chart = echarts.init(callAttemptsChartRef.value)
}
// 如果没有Busy Hour数据，显示默认的平直线
if (!busyHourData.value) {
// 如果没有Busy Hour数据或数据为空数组，显示默认的平直线
if (!busyHourData.value || busyHourData.value.length === 0) {
const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
const xAxisData = [1, 2, 3, 4, 5]
@@ -1235,8 +1354,8 @@ function updateCallCompletionsChart() {
chart = echarts.init(callCompletionsChartRef.value)
}
// 如果没有Busy Hour数据，显示默认的平直线
if (!busyHourData.value) {
// 如果没有Busy Hour数据或数据为空数组，显示默认的平直线
if (!busyHourData.value || busyHourData.value.length === 0) {
const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
const xAxisData = [1, 2, 3, 4, 5]
@@ -1372,6 +1491,300 @@ function updateCallCompletionsChart() {
}
}
// 更新MOS图表
function updateMosChart() {
if (!mosChartRef.value) return
// 获取图表实例
let chart = echarts.getInstanceByDom(mosChartRef.value)
if (!chart) {
chart = echarts.init(mosChartRef.value)
}
// 如果没有MOS数据或数据为空数组，显示默认的平直线
if (!mosData.value || mosData.value.length === 0) {
const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
const xAxisData = [1, 2, 3, 4, 5]
chart.setOption({
grid: { left: 0, right: 30, 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)' }
}]
})
// 清除所有旧标注
const chartContainer = mosChartRef.value
if (chartContainer) {
const existingLabels = chartContainer.querySelectorAll('.chart-label')
existingLabels.forEach(label => label.remove())
}
return
}
// 从MOS数据中提取MOS值
const chartData = mosData.value.map((item: any) => Number(item.mosAverage) || 0)
// 生成时间轴数据
const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)
// 计算最大值、最小值、最新值
const maxValue = Math.max(...chartData)
const minValue = Math.min(...chartData)
const latestValue = chartData[chartData.length - 1]
chart.setOption({
grid: { left: 0, right: 30, 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: '#52c41a' }, // 绿色线条
areaStyle: { color: 'rgba(82,196,26,0.1)' } // 淡绿色填充
}]
})
// 在图表容器中添加数值标注
const chartContainer = mosChartRef.value
if (chartContainer) {
// 清除之前的标注
const existingLabels = chartContainer.querySelectorAll('.chart-label')
existingLabels.forEach(label => label.remove())
// 添加右侧数值标注
const maxLabel = document.createElement('div')
maxLabel.className = 'chart-label'
maxLabel.style.cssText = `
position: absolute;
right: 8px;
top: 8px;
font-size: 12px;
font-weight: bold;
color: #666;
pointer-events: none;
z-index: 10;
`
maxLabel.textContent = maxValue.toFixed(2)
const latestLabel = document.createElement('div')
latestLabel.className = 'chart-label'
latestLabel.style.cssText = `
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
font-weight: bold;
color: #52c41a;
pointer-events: none;
z-index: 10;
`
latestLabel.textContent = latestValue.toFixed(2)
const minLabel = document.createElement('div')
minLabel.className = 'chart-label'
minLabel.style.cssText = `
position: absolute;
right: 8px;
bottom: 8px;
font-size: 12px;
font-weight: bold;
color: #666;
pointer-events: none;
z-index: 10;
`
minLabel.textContent = minValue.toFixed(2)
// 添加底部时间标注
const oldestTimeLabel = document.createElement('div')
oldestTimeLabel.className = 'chart-label'
oldestTimeLabel.style.cssText = `
position: absolute;
left: 8px;
bottom: -20px;
font-size: 11px;
color: #999;
pointer-events: none;
z-index: 10;
`
// 使用第一个数据点的时间戳计算相对时间
const oldestTime = Number(mosData.value[0]?.timeGroup) || Date.now()
oldestTimeLabel.textContent = calculateRelativeTime(oldestTime)
const nowTimeLabel = document.createElement('div')
nowTimeLabel.className = 'chart-label'
nowTimeLabel.style.cssText = `
position: absolute;
right: 8px;
bottom: -20px;
font-size: 11px;
color: #999;
pointer-events: none;
z-index: 10;
`
nowTimeLabel.textContent = t('views.perfManage.voiceOverView.now')
chartContainer.appendChild(maxLabel)
chartContainer.appendChild(latestLabel)
chartContainer.appendChild(minLabel)
chartContainer.appendChild(oldestTimeLabel)
chartContainer.appendChild(nowTimeLabel)
}
}
// 更新CCT图表
function updateCctChart() {
if (!cctChartRef.value) return
// 获取图表实例
let chart = echarts.getInstanceByDom(cctChartRef.value)
if (!chart) {
chart = echarts.init(cctChartRef.value)
}
// 如果没有CCT数据或数据为空数组，显示默认的平直线
if (!cctData.value || cctData.value.length === 0) {
const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
const xAxisData = [1, 2, 3, 4, 5]
chart.setOption({
grid: { left: 0, right: 30, 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)' }
}]
})
// 清除所有旧标注
const chartContainer = cctChartRef.value
if (chartContainer) {
const existingLabels = chartContainer.querySelectorAll('.chart-label')
existingLabels.forEach(label => label.remove())
}
return
}
// 从CCT数据中提取CCT值
const chartData = cctData.value.map((item: any) => Number(item.callConnectionTime) || 0)
// 生成时间轴数据
const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)
// 计算最大值、最小值、最新值
const maxValue = Math.max(...chartData)
const minValue = Math.min(...chartData)
const latestValue = chartData[chartData.length - 1]
chart.setOption({
grid: { left: 0, right: 30, 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: '#fa8c16' }, // 橙色线条
areaStyle: { color: 'rgba(250,140,22,0.1)' } // 淡橙色填充
}]
})
// 在图表容器中添加数值标注
const chartContainer = cctChartRef.value
if (chartContainer) {
// 清除之前的标注
const existingLabels = chartContainer.querySelectorAll('.chart-label')
existingLabels.forEach(label => label.remove())
// 添加右侧数值标注
const maxLabel = document.createElement('div')
maxLabel.className = 'chart-label'
maxLabel.style.cssText = `
position: absolute;
right: 8px;
top: 8px;
font-size: 12px;
font-weight: bold;
color: #666;
pointer-events: none;
z-index: 10;
`
maxLabel.textContent = maxValue.toFixed(2)
const latestLabel = document.createElement('div')
latestLabel.className = 'chart-label'
latestLabel.style.cssText = `
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
font-weight: bold;
color: #fa8c16;
pointer-events: none;
z-index: 10;
`
latestLabel.textContent = latestValue.toFixed(2)
const minLabel = document.createElement('div')
minLabel.className = 'chart-label'
minLabel.style.cssText = `
position: absolute;
right: 8px;
bottom: 8px;
font-size: 12px;
font-weight: bold;
color: #666;
pointer-events: none;
z-index: 10;
`
minLabel.textContent = minValue.toFixed(2)
// 添加底部时间标注
const oldestTimeLabel = document.createElement('div')
oldestTimeLabel.className = 'chart-label'
oldestTimeLabel.style.cssText = `
position: absolute;
left: 8px;
bottom: -20px;
font-size: 11px;
color: #999;
pointer-events: none;
z-index: 10;
`
// 使用第一个数据点的时间戳计算相对时间
const oldestTime = Number(cctData.value[0]?.timeGroup) || Date.now()
oldestTimeLabel.textContent = calculateRelativeTime(oldestTime)
const nowTimeLabel = document.createElement('div')
nowTimeLabel.className = 'chart-label'
nowTimeLabel.style.cssText = `
position: absolute;
right: 8px;
bottom: -20px;
font-size: 11px;
color: #999;
pointer-events: none;
z-index: 10;
`
nowTimeLabel.textContent = t('views.perfManage.voiceOverView.now')
chartContainer.appendChild(maxLabel)
chartContainer.appendChild(latestLabel)
chartContainer.appendChild(minLabel)
chartContainer.appendChild(oldestTimeLabel)
chartContainer.appendChild(nowTimeLabel)
}
}
// 处理IMS实时数据（只存储当前选中网元）
function handleIMSRealtimeData(res: any) {
//console.log('收到实时数据:', res) // 调试信息
@@ -1549,6 +1962,18 @@ onMounted(() => {
const chart = echarts.init(failedRegChartRef.value)
chart.setOption(defaultChartOption)
}
// MOS
if (mosChartRef.value) {
const chart = echarts.init(mosChartRef.value)
chart.setOption(defaultChartOption)
}
// CCT
if (cctChartRef.value) {
const chart = echarts.init(cctChartRef.value)
chart.setOption(defaultChartOption)
}
})
// 计算MO值 (SCSCF.05/SCSCF.06)*100
@@ -2273,6 +2698,100 @@ function calculateCallCompletionsChange() {
return `${changeText} ` + t('views.perfManage.voiceOverView.last') + ' 1h'
}
// MOS相关计算函数
function calculateMosValue() {
if (!mosData.value || mosData.value.length === 0) return '-'
// 获取最新的MOS值（数组最后一个元素）
const latestData = mosData.value[mosData.value.length - 1]
const mosValue = Number(latestData.mosAverage) || 0
return mosValue.toFixed(2)
}
function calculateMosArrowDirection() {
if (!mosData.value || mosData.value.length < 2) return 'up'
const latestValue = Number(mosData.value[mosData.value.length - 1].mosAverage) || 0
const previousValue = Number(mosData.value[mosData.value.length - 2].mosAverage) || 0
const change = latestValue - previousValue
if (change > 0) return 'up'
if (change < 0) return 'down'
return 'up'
}
function calculateMosArrow() {
if (!mosData.value || mosData.value.length < 2) return '→'
const latestValue = Number(mosData.value[mosData.value.length - 1].mosAverage) || 0
const previousValue = Number(mosData.value[mosData.value.length - 2].mosAverage) || 0
const change = latestValue - previousValue
if (change > 0) return '↗'
if (change < 0) return '↘'
return '→'
}
function calculateMosChange() {
if (!mosData.value || mosData.value.length < 2) return '±0.00 ' + t('views.perfManage.voiceOverView.last') + ' 1h'
const latestValue = Number(mosData.value[mosData.value.length - 1].mosAverage) || 0
const previousValue = Number(mosData.value[mosData.value.length - 2].mosAverage) || 0
const change = latestValue - previousValue
if (change === 0) return '±0.00 ' + t('views.perfManage.voiceOverView.last') + ' 1h'
const changeText = change > 0 ? `+${change.toFixed(2)}` : `${change.toFixed(2)}`
return `${changeText} ` + t('views.perfManage.voiceOverView.last') + ' 1h'
}
// CCT相关计算函数
function calculateCctValue() {
if (!cctData.value || cctData.value.length === 0) return '-'
// 获取最新的CCT值（数组最后一个元素）
const latestData = cctData.value[cctData.value.length - 1]
const cctValue = Number(latestData.callConnectionTime) || 0
return cctValue.toFixed(2)
}
function calculateCctArrowDirection() {
if (!cctData.value || cctData.value.length < 2) return 'up'
const latestValue = Number(cctData.value[cctData.value.length - 1].callConnectionTime) || 0
const previousValue = Number(cctData.value[cctData.value.length - 2].callConnectionTime) || 0
const change = latestValue - previousValue
if (change > 0) return 'up'
if (change < 0) return 'down'
return 'up'
}
function calculateCctArrow() {
if (!cctData.value || cctData.value.length < 2) return '→'
const latestValue = Number(cctData.value[cctData.value.length - 1].callConnectionTime) || 0
const previousValue = Number(cctData.value[cctData.value.length - 2].callConnectionTime) || 0
const change = latestValue - previousValue
if (change > 0) return '↗'
if (change < 0) return '↘'
return '→'
}
function calculateCctChange() {
if (!cctData.value || cctData.value.length < 2) return '±0.00 ' + t('views.perfManage.voiceOverView.last') + ' 1h'
const latestValue = Number(cctData.value[cctData.value.length - 1].callConnectionTime) || 0
const previousValue = Number(cctData.value[cctData.value.length - 2].callConnectionTime) || 0
const change = latestValue - previousValue
if (change === 0) return '±0.00 ' + t('views.perfManage.voiceOverView.last') + ' 1h'
const changeText = change > 0 ? `+${change.toFixed(2)}` : `${change.toFixed(2)}`
return `${changeText} ` + t('views.perfManage.voiceOverView.last') + ' 1h'
}
// 测试数据更新
// function testDataUpdate() {
// console.log('测试数据更新')