fix: KPI总览无数据时展示title

This commit is contained in:
TsMask
2025-03-25 15:56:05 +08:00
parent 6590a0c811
commit b10aed3d14
2 changed files with 72 additions and 33 deletions

View File

@@ -240,34 +240,33 @@ const statsColumns: TableColumnType<any>[] = [
title: t('views.perfManage.kpiOverView.kpiName'), title: t('views.perfManage.kpiOverView.kpiName'),
dataIndex: 'title', dataIndex: 'title',
key: 'title', key: 'title',
width: '65%',
},
{
title: t('views.perfManage.kpiOverView.totalValue'),
dataIndex: 'total',
key: 'total',
width: '12%',
sortDirections: ['ascend', 'descend'],
},
{
title: t('views.perfManage.kpiOverView.avgValue'),
dataIndex: 'avg',
key: 'avg',
width: '24%',
sortDirections: ['ascend', 'descend'],
}, },
// {
// title: t('views.perfManage.kpiOverView.totalValue'),
// dataIndex: 'total',
// key: 'total',
// width: '12%',
// sortDirections: ['ascend', 'descend'],
// },
// {
// title: t('views.perfManage.kpiOverView.avgValue'),
// dataIndex: 'avg',
// key: 'avg',
// width: '24%',
// sortDirections: ['ascend', 'descend'],
// },
{ {
title: t('views.perfManage.kpiOverView.maxValue'), title: t('views.perfManage.kpiOverView.maxValue'),
dataIndex: 'max', dataIndex: 'max',
key: 'max', key: 'max',
width: '17%', width: '200px',
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
}, },
{ {
title: t('views.perfManage.kpiOverView.minValue'), title: t('views.perfManage.kpiOverView.minValue'),
dataIndex: 'min', dataIndex: 'min',
key: 'min', key: 'min',
width: '17%', width: '200px',
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
}, },
]; ];
@@ -424,8 +423,8 @@ function fnGetList() {
duration: 2, duration: 2,
}); });
tableState.data = []; tableState.data = [];
tableColumns.value = []; // tableColumns.value = [];
tableColumnsDnd.value = []; // tableColumnsDnd.value = [];
kpiStats.value = []; //清空数据 kpiStats.value = []; //清空数据
fnRanderChartData(); fnRanderChartData();
return false; return false;
@@ -469,6 +468,26 @@ function fnGetList() {
total: total, total: total,
}); });
} }
} else {
kpiStats.value = [];
for (const columns of tableColumns.value) {
if (
columns.key === 'neName' ||
columns.key === 'startIndex' ||
columns.key === 'timeGroup'
) {
continue;
}
kpiStats.value.push({
kpiId: columns.key,
title: columns.title,
unit: columns.unit,
max: 0,
min: 0,
avg: 0,
total: 0,
});
}
} }
}); });
} }
@@ -757,7 +776,6 @@ const selectedUnit = ref<string | null>(null);
// 添加处理行点击的方法 // 添加处理行点击的方法
function handleRowClick(record: any) { function handleRowClick(record: any) {
const index = selectedRow.value.indexOf(record.kpiId); const index = selectedRow.value.indexOf(record.kpiId);
console.log(record);
// 如果已经选中,取消选中 // 如果已经选中,取消选中
if (index > -1) { if (index > -1) {
selectedRow.value.splice(index, 1); selectedRow.value.splice(index, 1);
@@ -891,7 +909,7 @@ onMounted(() => {
return; return;
} }
// 无查询参数neType时 默认选择UPF // 无查询参数neType时 默认选择UPF
const queryNeType = (route.query.neType as string) || 'UPF'; const queryNeType = (route.query.neType as string) || 'IMS';
const item = neCascaderOptions.value.find( const item = neCascaderOptions.value.find(
s => s.value === queryNeType s => s.value === queryNeType
); );
@@ -954,6 +972,7 @@ onBeforeUnmount(() => {
v-model:value="state.neType" v-model:value="state.neType"
:options="neCascaderOptions" :options="neCascaderOptions"
:allow-clear="false" :allow-clear="false"
@change="fnGetListTitle()"
:placeholder="t('common.selectPlease')" :placeholder="t('common.selectPlease')"
/> />
</a-form-item> </a-form-item>
@@ -1041,7 +1060,6 @@ onBeforeUnmount(() => {
</a-tooltip> </a-tooltip>
<TableColumnsDnd <TableColumnsDnd
v-if="tableColumns.length > 0" v-if="tableColumns.length > 0"
:cache-id="`kpiTarget_${state.neType[0]}`"
:columns="tableColumns" :columns="tableColumns"
v-model:columns-dnd="tableColumnsDnd" v-model:columns-dnd="tableColumnsDnd"
></TableColumnsDnd> ></TableColumnsDnd>
@@ -1129,7 +1147,7 @@ onBeforeUnmount(() => {
<div class="table-container"> <div class="table-container">
<a-table <a-table
:columns="state.neType[0] !== 'UPF' ? statsColumns.filter(c => c.key !== 'total') : statsColumns" :columns="statsColumns"
:data-source="kpiStats" :data-source="kpiStats"
:pagination="false" :pagination="false"
:scroll="{ y: 250 }" :scroll="{ y: 250 }"

View File

@@ -42,7 +42,7 @@ interface ChartDataItem {
const tableLoading = ref(false); const tableLoading = ref(false);
const rangeLoading = ref(false); const rangeLoading = ref(false);
//网元类型定义 //网元类型定义
const ALL_NE_TYPES = ['AMF', 'SMF', 'UPF', 'MME', 'IMS', 'SMSC'] as const; const ALL_NE_TYPES = ['AMF', 'UPF', 'IMS'] as const;
type NeType = (typeof ALL_NE_TYPES)[number]; type NeType = (typeof ALL_NE_TYPES)[number];
echarts.use([ echarts.use([
@@ -122,12 +122,16 @@ const toggleRealtime = () => {
// 定义要筛选的指标 ID按网元类型组织 // 定义要筛选的指标 ID按网元类型组织
const TARGET_KPI_IDS: Record<NeType, string[]> = { const TARGET_KPI_IDS: Record<NeType, string[]> = {
AMF: ['AMF.02', 'AMF.03', 'AMF.A.07', 'AMF.A.08'], AMF: ['AMF.02', 'AMF.03'],
SMF: ['SMF.02', 'SMF.03', 'SMF.04', 'SMF.05'], UPF: ['UPF.04', 'UPF.05'],
UPF: ['UPF.03', 'UPF.04', 'UPF.05', 'UPF.06'], IMS: ['SCSCF.03', 'SCSCF.04', 'SCSCF.06', 'SCSCF.08'],
MME: ['MME.A.01', 'MME.A.02', 'MME.A.03'],
IMS: ['SCSCF.01', 'SCSCF.02', 'SCSCF.05', 'SCSCF.06'], // AMF: ['AMF.02', 'AMF.03', 'AMF.A.07', 'AMF.A.08'],
SMSC: ['SMSC.A.01', 'SMSC.A.02', 'SMSC.A.03'], // SMF: ['SMF.02', 'SMF.03', 'SMF.04', 'SMF.05'],
// UPF: ['UPF.03', 'UPF.04', 'UPF.05', 'UPF.06'],
// MME: ['MME.A.01', 'MME.A.02', 'MME.A.03'],
// IMS: ['SCSCF.01', 'SCSCF.02', 'SCSCF.05', 'SCSCF.06'],
// SMSC: ['SMSC.A.01', 'SMSC.A.02', 'SMSC.A.03'],
}; };
// 实时数据开关函数 // 实时数据开关函数
@@ -189,13 +193,15 @@ const wsMessage = (res: Record<string, any>) => {
return; return;
} }
const { code, data } = res; const { code, data } = res;
if (code === RESULT_CODE_ERROR || !data?.groupId) return; if (code === RESULT_CODE_ERROR || !data?.groupId) {
tableLoading.value = false;
return;
}
handleWebSocketMessage(data.data); handleWebSocketMessage(data.data);
}; };
// 添加数据处理函数 // 添加数据处理函数
const processChartData = (rawData: any[]) => { const processChartData = (rawData: any[]) => {
const groupedData = new Map<string, any>(); //数据按时间分组 const groupedData = new Map<string, any>(); //数据按时间分组
rawData.forEach(item => { rawData.forEach(item => {
//合并相同时间点的数据 //合并相同时间点的数据
const timeKey = item.timeGroup; const timeKey = item.timeGroup;
@@ -752,7 +758,22 @@ const kpiStats = ref<KPIStats[]>([]);
// 添加一个计算函数来更新统计数据 // 添加一个计算函数来更新统计数据
const updateKpiStats = () => { const updateKpiStats = () => {
if (!chartData.value.length || !kpiColumns.value.length) { if (!chartData.value.length || !kpiColumns.value.length) {
kpiStats.value = []; kpiStats.value = selectedKPIs.value.map(kpiId => {
// 找到对应的KPI标题
let title = kpiId;
const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
if (kpi) {
title = kpi.title;
}
return {
kpiId: kpiId,
title: title,
max: 0,
min: 0,
avg: 0,
total: 0,
};
});
return; return;
} }
kpiStats.value = selectedKPIs.value kpiStats.value = selectedKPIs.value