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

feat:折线效果以及图表数据点数修改

Browse Source
This commit is contained in:
zhongzm
2025-07-11 11:11:41 +08:00
parent f45ad79015
commit e37a7fb42b
1 changed files with 44 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -283,7 +283,7 @@ function updateActiveCallsChart() {
yAxis: { type: 'value', show: false },
series: [{
data: defaultData,
type: 'line', smooth: true, symbol: 'none',
type: 'line', symbol: 'none',
lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
}]
@@ -297,8 +297,8 @@ function updateActiveCallsChart() {
}
// 限制数据点数量
if (chartData.length > 10) {
chartData.splice(0, chartData.length - 10)
if (chartData.length > 50) {
chartData.splice(0, chartData.length - 50)
}
// 生成时间轴数据
@@ -310,7 +310,7 @@ function updateActiveCallsChart() {
yAxis: { type: 'value', show: false },
series: [{
data: chartData,
type: 'line', smooth: true, symbol: 'none',
type: 'line', symbol: 'none',
lineStyle: { width: 2, color: '#1890ff' }, // 蓝色线条表示有数据
areaStyle: { color: 'rgba(24,144,255,0.1)' } // 淡蓝色填充
}]
@@ -347,7 +347,7 @@ function updateFailedCallsChart() {
yAxis: { type: 'value', show: false },
series: [{
data: defaultData,
type: 'line', smooth: true, symbol: 'none',
type: 'line', symbol: 'none',
lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
}]
@@ -361,8 +361,8 @@ function updateFailedCallsChart() {
}
// 限制数据点数量
if (chartData.length > 10) {
chartData.splice(0, chartData.length - 10)
if (chartData.length > 50) {
chartData.splice(0, chartData.length - 50)
}
// 生成时间轴数据
@@ -374,7 +374,7 @@ function updateFailedCallsChart() {
yAxis: { type: 'value', show: false },
series: [{
data: chartData,
type: 'line', smooth: true, symbol: 'none',
type: 'line', symbol: 'none',
lineStyle: { width: 2, color: '#faad14' }, // 橙色线条表示failed calls
areaStyle: { color: 'rgba(250,173,20,0.1)' } // 淡橙色填充
}]
@@ -409,7 +409,7 @@ function updateActiveRegistrationsChart() {
yAxis: { type: 'value', show: false },
series: [{
data: defaultData,
type: 'line', smooth: true, symbol: 'none',
type: 'line', symbol: 'none',
lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
}]
@@ -423,8 +423,8 @@ function updateActiveRegistrationsChart() {
}
// 限制数据点数量
if (chartData.length > 10) {
chartData.splice(0, chartData.length - 10)
if (chartData.length > 50) {
chartData.splice(0, chartData.length - 50)
}
// 生成时间轴数据
@@ -436,7 +436,7 @@ function updateActiveRegistrationsChart() {
yAxis: { type: 'value', show: false },
series: [{
data: chartData,
type: 'line', smooth: true, symbol: 'none',
type: 'line', symbol: 'none',
lineStyle: { width: 2, color: '#1890ff' }, // 蓝色线条表示active registrations
areaStyle: { color: 'rgba(24,144,255,0.1)' } // 淡蓝色填充
}]
@@ -473,7 +473,7 @@ function updateFailedRegistrationsChart() {
yAxis: { type: 'value', show: false },
series: [{
data: defaultData,
type: 'line', smooth: true, symbol: 'none',
type: 'line', symbol: 'none',
lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
}]
@@ -487,8 +487,8 @@ function updateFailedRegistrationsChart() {
}
// 限制数据点数量
if (chartData.length > 10) {
chartData.splice(0, chartData.length - 10)
if (chartData.length > 50) {
chartData.splice(0, chartData.length - 50)
}
// 生成时间轴数据
@@ -500,7 +500,7 @@ function updateFailedRegistrationsChart() {
yAxis: { type: 'value', show: false },
series: [{
data: chartData,
type: 'line', smooth: true, symbol: 'none',
type: 'line', symbol: 'none',
lineStyle: { width: 2, color: '#f5222d' }, // 红色线条表示failed registrations
areaStyle: { color: 'rgba(245,34,45,0.1)' } // 淡红色填充
}]
@@ -577,7 +577,7 @@ onMounted(() => {
yAxis: { type: 'value', show: false },
series: [{
data: [0, 0, 0, 0, 0], // 默认显示0值
type: 'line', smooth: true, symbol: 'none',
type: 'line', symbol: 'none',
lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
}]
@@ -598,7 +598,7 @@ onMounted(() => {
yAxis: { type: 'value', show: false },
series: [{
data: [4.62, 4.50, 4.40, 4.35, 4.30],
type: 'line', smooth: true, symbol: 'none',
type: 'line', symbol: 'none',
lineStyle: { width: 2, color: '#52c41a' },
areaStyle: { color: 'rgba(82,196,26,0.1)' }
}]
@@ -662,13 +662,13 @@ function calculateMTValue() {
// 计算MO变化值（完善版本）
function calculateMOChange() {
if (imsRealtimeRawData.value.length < 2) return '±0.00% last 5s'
if (imsRealtimeRawData.value.length < 2) return '±0.00% last 1m'
// 获取最新和上一个数据点
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 5s'
if (!latestData?.data || !previousData?.data) return '±0.00% last 1m'
const latestKpi = latestData.data
const previousKpi = previousData.data
@@ -677,13 +677,13 @@ function calculateMOChange() {
const previousMO = calculateMOValueFromData(previousKpi)
// 检查MO是否有有效值
if (latestMO === '-' || previousMO === '-') return '±0.00% last 5s'
if (latestMO === '-' || previousMO === '-') return '±0.00% last 1m'
// 计算变化幅度
const change = latestMO - previousMO
// 检查是否有变化
if (change === 0) return '±0.00% last 5s'
if (change === 0) return '±0.00% last 1m'
const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
@@ -695,13 +695,13 @@ function calculateMOChange() {
// 计算MT变化值（完善版本）
function calculateMTChange() {
if (imsRealtimeRawData.value.length < 2) return '±0.00% last 5s'
if (imsRealtimeRawData.value.length < 2) return '±0.00% last 1m'
// 获取最新和上一个数据点
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 5s'
if (!latestData?.data || !previousData?.data) return '±0.00% last 1m'
const latestKpi = latestData.data
const previousKpi = previousData.data
@@ -710,13 +710,13 @@ function calculateMTChange() {
const previousMT = calculateMTValueFromData(previousKpi)
// 检查MT是否有有效值
if (latestMT === '-' || previousMT === '-') return '±0.00% last 5s'
if (latestMT === '-' || previousMT === '-') return '±0.00% last 1m'
// 计算变化幅度
const change = latestMT - previousMT
// 检查是否有变化
if (change === 0) return '±0.00% last 5s'
if (change === 0) return '±0.00% last 1m'
const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
@@ -783,13 +783,13 @@ function calculateRegSuccessValue() {
// 计算registration success变化值
function calculateRegSuccessChange() {
if (imsRealtimeRawData.value.length < 2) return '±0.00% last 5s'
if (imsRealtimeRawData.value.length < 2) return '±0.00% last 1m'
// 获取最新和上一个数据点
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 5s'
if (!latestData?.data || !previousData?.data) return '±0.00% last 1m'
const latestKpi = latestData.data
const previousKpi = previousData.data
@@ -798,13 +798,13 @@ function calculateRegSuccessChange() {
const previousRegSuccess = calculateRegSuccessValueFromData(previousKpi)
// 检查registration success是否有有效值
if (latestRegSuccess === '-' || previousRegSuccess === '-') return '±0.00% last 5s'
if (latestRegSuccess === '-' || previousRegSuccess === '-') return '±0.00% last 1m'
// 计算变化幅度
const change = latestRegSuccess - previousRegSuccess
// 检查是否有变化
if (change === 0) return '±0.00% last 5s'
if (change === 0) return '±0.00% last 1m'
const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`
@@ -858,13 +858,13 @@ function calculateActiveCallsArrow() {
// 计算active calls变化值
function calculateActiveCallsChange() {
if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'
if (imsRealtimeRawData.value.length < 2) return '±0 last 1m'
// 获取最新和上一个数据点
const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
if (!latestData?.data || !previousData?.data) return '±0 last 5s'
if (!latestData?.data || !previousData?.data) return '±0 last 1m'
const latestKpi = latestData.data
const previousKpi = previousData.data
@@ -873,13 +873,13 @@ function calculateActiveCallsChange() {
const previousActiveCalls = Number(previousKpi['SCSCF.07']) || 0
// 检查active calls是否有有效值
if (latestActiveCalls === 0 || previousActiveCalls === 0) return '±0 last 5s'
if (latestActiveCalls === 0 || previousActiveCalls === 0) return '±0 last 1m'
// 计算变化幅度
const change = latestActiveCalls - previousActiveCalls
// 检查是否有变化
if (change === 0) return '±0 last 5s'
if (change === 0) return '±0 last 1m'
const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
@@ -925,13 +925,13 @@ function calculateFailedCallsArrow() {
// 计算failed calls变化值
function calculateFailedCallsChange() {
if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'
if (imsRealtimeRawData.value.length < 2) return '±0 last 1m'
// 获取最新和上一个数据点
const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
if (!latestData?.data || !previousData?.data) return '±0 last 5s'
if (!latestData?.data || !previousData?.data) return '±0 last 1m'
const latestKpi = latestData.data
const previousKpi = previousData.data
@@ -948,7 +948,7 @@ function calculateFailedCallsChange() {
const change = latestFailedCalls - previousFailedCalls
// 检查是否有变化
if (change === 0) return '±0 last 5s'
if (change === 0) return '±0 last 1m'
const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
@@ -995,13 +995,13 @@ function calculateActiveRegistrationsArrow() {
// 计算active registrations变化值
function calculateActiveRegistrationsChange() {
if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'
if (imsRealtimeRawData.value.length < 2) return '±0 last 1m'
// 获取最新和上一个数据点
const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
if (!latestData?.data || !previousData?.data) return '±0 last 5s'
if (!latestData?.data || !previousData?.data) return '±0 last 1m'
const latestKpi = latestData.data
const previousKpi = previousData.data
@@ -1010,13 +1010,13 @@ function calculateActiveRegistrationsChange() {
const previousActiveRegistrations = Number(previousKpi['SCSCF.03']) || 0
// 检查active registrations是否有有效值
if (latestActiveRegistrations === 0 || previousActiveRegistrations === 0) return '±0 last 5s'
if (latestActiveRegistrations === 0 || previousActiveRegistrations === 0) return '±0 last 1m'
// 计算变化幅度
const change = latestActiveRegistrations - previousActiveRegistrations
// 检查是否有变化
if (change === 0) return '±0 last 5s'
if (change === 0) return '±0 last 1m'
const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`
@@ -1062,13 +1062,13 @@ function calculateFailedRegistrationsArrow() {
// 计算failed registrations变化值
function calculateFailedRegistrationsChange() {
if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'
if (imsRealtimeRawData.value.length < 2) return '±0 last 1m'
// 获取最新和上一个数据点
const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]
if (!latestData?.data || !previousData?.data) return '±0 last 5s'
if (!latestData?.data || !previousData?.data) return '±0 last 1m'
const latestKpi = latestData.data
const previousKpi = previousData.data
@@ -1085,7 +1085,7 @@ function calculateFailedRegistrationsChange() {
const change = latestFailedRegistrations - previousFailedRegistrations
// 检查是否有变化
if (change === 0) return '±0 last 5s'
if (change === 0) return '±0 last 1m'
const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`