feat:黄金指标统计信息改天数显示
This commit is contained in:
zhongzm
@@ -269,38 +269,197 @@ const statsColumns: TableColumnType<any>[] = [
|
||||
title: t('views.perfManage.kpiOverView.kpiName'),
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
width: '65%',
|
||||
},
|
||||
{
|
||||
title: t('views.perfManage.kpiOverView.totalValue'),
|
||||
dataIndex: 'total',
|
||||
key: 'total',
|
||||
width: '24%',
|
||||
title: t('views.perfManage.customTarget.ago1'),
|
||||
dataIndex: 'last1Day',
|
||||
key: 'last1Day',
|
||||
width: '150px',
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
customRender: ({ record }: { record: any }) => {
|
||||
const value = record.last1Day;
|
||||
// 如果是默认值，直接显示
|
||||
if (value === '-') {
|
||||
return value;
|
||||
}
|
||||
// 黄金指标多为次数类，使用累计值
|
||||
return `${value} ${t('views.perfManage.customTarget.total')}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('views.perfManage.kpiOverView.avgValue'),
|
||||
dataIndex: 'avg',
|
||||
key: 'avg',
|
||||
width: '24%',
|
||||
title: t('views.perfManage.customTarget.ago7'),
|
||||
dataIndex: 'last7Days',
|
||||
key: 'last7Days',
|
||||
width: '150px',
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
customRender: ({ record }: { record: any }) => {
|
||||
const value = record.last7Days;
|
||||
// 如果是默认值，直接显示
|
||||
if (value === '-') {
|
||||
return value;
|
||||
}
|
||||
// 黄金指标多为次数类，使用累计值
|
||||
return `${value} ${t('views.perfManage.customTarget.total')}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('views.perfManage.kpiOverView.maxValue'),
|
||||
dataIndex: 'max',
|
||||
key: 'max',
|
||||
width: '17%',
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
{
|
||||
title: t('views.perfManage.kpiOverView.minValue'),
|
||||
dataIndex: 'min',
|
||||
key: 'min',
|
||||
width: '17%',
|
||||
title: t('views.perfManage.customTarget.ago30'),
|
||||
dataIndex: 'last30Days',
|
||||
key: 'last30Days',
|
||||
width: '150px',
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
customRender: ({ record }: { record: any }) => {
|
||||
const value = record.last30Days;
|
||||
// 如果是默认值，直接显示
|
||||
if (value === '-') {
|
||||
return value;
|
||||
}
|
||||
// 黄金指标多为次数类，使用累计值
|
||||
return `${value} ${t('views.perfManage.customTarget.total')}`;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/**初始化黄金指标统计表格数据 */
|
||||
function fnInitGoldStatsData() {
|
||||
// 先初始化表格，显示指标×网元的列表和默认值
|
||||
kpiStats.value = [];
|
||||
|
||||
for (const columns of tableColumns.value) {
|
||||
if (
|
||||
columns.key === 'neName' ||
|
||||
columns.key === 'startIndex' ||
|
||||
columns.key === 'timeGroup'
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// 为每个选中的网元创建统计条目
|
||||
for (const neId of state.neIds) {
|
||||
kpiStats.value.push({
|
||||
kpiId: `${columns.key}_${neId}`,
|
||||
title: `${columns.title}(${neId})`,
|
||||
rawKpiId: columns.key,
|
||||
rawKpiTitle: columns.title,
|
||||
neId: neId,
|
||||
last1Day: '-', // 默认值，显示加载中状态
|
||||
last7Days: '-',
|
||||
last30Days: '-',
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**获取黄金指标近期统计数据 */
|
||||
async function fnGetGoldStatsData() {
|
||||
console.log('fnGetGoldStatsData 开始执行', { neType: state.neType, neIds: state.neIds });
|
||||
if (!state.neType || state.neIds.length === 0) {
|
||||
console.log('fnGetGoldStatsData 提前返回：条件不满足');
|
||||
return;
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
|
||||
// 为每个网元分别获取近30天的数据
|
||||
for (const neId of state.neIds) {
|
||||
// 只请求一次近30天的数据
|
||||
const startTime = new Date(now);
|
||||
startTime.setDate(now.getDate() - 30);
|
||||
startTime.setHours(0, 0, 0, 0);
|
||||
|
||||
const endTime = new Date(now);
|
||||
endTime.setHours(23, 59, 59, 999);
|
||||
|
||||
const params = {
|
||||
neType: state.neType,
|
||||
neId: neId,
|
||||
interval: queryParams.interval,
|
||||
startTime: startTime.getTime().toString(),
|
||||
endTime: endTime.getTime().toString(),
|
||||
sortField: queryParams.sortField,
|
||||
sortOrder: queryParams.sortOrder,
|
||||
};
|
||||
|
||||
try {
|
||||
console.log(`为网元${neId}获取近30天统计数据，请求参数:`, params);
|
||||
const res = await listKPIData(toRaw(params));
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
// 计算时间边界
|
||||
const now_ms = now.getTime();
|
||||
const day1_start = now_ms - (1 * 24 * 60 * 60 * 1000); // 1天前
|
||||
const day7_start = now_ms - (7 * 24 * 60 * 60 * 1000); // 7天前
|
||||
const day30_start = now_ms - (30 * 24 * 60 * 60 * 1000); // 30天前
|
||||
|
||||
// 为每个指标计算统计值
|
||||
for (const columns of tableColumns.value) {
|
||||
if (
|
||||
columns.key === 'neName' ||
|
||||
columns.key === 'startIndex' ||
|
||||
columns.key === 'timeGroup'
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// 根据时间范围筛选非零数据
|
||||
const data1Day = res.data.filter((item: any) => {
|
||||
const itemTime = new Date(item.timeGroup).getTime();
|
||||
const value = item[columns.key] ? Number(item[columns.key]) : 0;
|
||||
return itemTime >= day1_start && value !== 0;
|
||||
});
|
||||
|
||||
const data7Days = res.data.filter((item: any) => {
|
||||
const itemTime = new Date(item.timeGroup).getTime();
|
||||
const value = item[columns.key] ? Number(item[columns.key]) : 0;
|
||||
return itemTime >= day7_start && value !== 0;
|
||||
});
|
||||
|
||||
const data30Days = res.data.filter((item: any) => {
|
||||
const itemTime = new Date(item.timeGroup).getTime();
|
||||
const value = item[columns.key] ? Number(item[columns.key]) : 0;
|
||||
return itemTime >= day30_start && value !== 0;
|
||||
});
|
||||
|
||||
// 计算统计值（只对非零数据进行计算，黄金指标多为次数类使用累计值）
|
||||
const calculateValue = (dataArray: any[]) => {
|
||||
if (dataArray.length === 0) return 0;
|
||||
|
||||
const values = dataArray.map((item: any) => Number(item[columns.key]));
|
||||
// 黄金指标多为次数类，使用累计值
|
||||
return Number(values.reduce((sum, val) => sum + val, 0).toFixed(2));
|
||||
};
|
||||
|
||||
// 更新对应的统计数据
|
||||
const statsIndex = kpiStats.value.findIndex((item: any) => item.kpiId === `${columns.key}_${neId}`);
|
||||
if (statsIndex !== -1) {
|
||||
kpiStats.value[statsIndex].last1Day = calculateValue(data1Day);
|
||||
kpiStats.value[statsIndex].last7Days = calculateValue(data7Days);
|
||||
kpiStats.value[statsIndex].last30Days = calculateValue(data30Days);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`获取网元${neId}统计数据失败:`, error);
|
||||
// 如果获取失败，保持默认值
|
||||
for (const columns of tableColumns.value) {
|
||||
if (
|
||||
columns.key === 'neName' ||
|
||||
columns.key === 'startIndex' ||
|
||||
columns.key === 'timeGroup'
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const statsIndex = kpiStats.value.findIndex((item: any) => item.kpiId === `${columns.key}_${neId}`);
|
||||
if (statsIndex !== -1) {
|
||||
kpiStats.value[statsIndex].last1Day = '-';
|
||||
kpiStats.value[statsIndex].last7Days = '-';
|
||||
kpiStats.value[statsIndex].last30Days = '-';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据列表导出
|
||||
*/
|
||||
@@ -552,6 +711,10 @@ async function fnGetList() {
|
||||
// 第三步：用真实数据更新默认值
|
||||
fnUpdateDataWithRealValues(allNeData);
|
||||
|
||||
// 第四步：获取近期统计数据（确保在图表数据获取成功后执行）
|
||||
console.log('fnGetList 完成，准备获取统计数据');
|
||||
fnGetGoldStatsData();
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
@@ -621,18 +784,6 @@ function fnCreateDefaultDataStructure() {
|
||||
};
|
||||
chartDataYSeriesData.push(seriesData);
|
||||
chartLegendSelected[seriesName] = true;
|
||||
// 创建统计表格项，默认值为0
|
||||
kpiStats.value.push({
|
||||
kpiId: `${columns.key}_${neId}`,
|
||||
title: `${columns.title}(${neId})`,
|
||||
rawKpiId: columns.key,
|
||||
rawKpiTitle: columns.title,
|
||||
neId: neId,
|
||||
max: 0,
|
||||
min: 0,
|
||||
avg: 0,
|
||||
total: 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -694,6 +845,9 @@ function fnCreateDefaultDataStructure() {
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// 初始化统计表格，显示指标×网元列表和默认值
|
||||
fnInitGoldStatsData();
|
||||
}
|
||||
|
||||
/**用真实数据更新默认值 */
|
||||
@@ -1154,68 +1308,11 @@ function wsMessage(res: Record<string, any>) {
|
||||
);
|
||||
});
|
||||
|
||||
// 更新统计数据
|
||||
updateKpiStats();
|
||||
// 获取近期统计数据
|
||||
fnGetGoldStatsData();
|
||||
}
|
||||
|
||||
// 添加更新统计数据的函数
|
||||
function updateKpiStats() {
|
||||
// 清空现有统计数据
|
||||
kpiStats.value = [];
|
||||
|
||||
// 为每个指标和每个网元创建统计数据
|
||||
for (const columns of tableColumns.value) {
|
||||
if (
|
||||
columns.key === 'neName' ||
|
||||
columns.key === 'startIndex' ||
|
||||
columns.key === 'timeGroup'
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// 处理每个网元
|
||||
for (const neId of state.neIds) {
|
||||
// 过滤该网元的数据
|
||||
const neData = tableState.data.filter(item => item._neId === neId);
|
||||
|
||||
// 创建统计项（即使没有数据也创建）
|
||||
const statsItem = {
|
||||
kpiId: `${columns.key}_${neId}`,
|
||||
title: `${columns.title}(${neId})`,
|
||||
rawKpiId: columns.key,
|
||||
rawKpiTitle: columns.title,
|
||||
neId: neId,
|
||||
max: 0,
|
||||
min: 0,
|
||||
avg: 0,
|
||||
total: 0,
|
||||
};
|
||||
|
||||
if (neData.length > 0) {
|
||||
// 有数据时计算统计值
|
||||
const values = neData.map((item: any) => {
|
||||
return item[columns.key] ? Number(item[columns.key]) : 0;
|
||||
});
|
||||
|
||||
// 计算总值
|
||||
const total = Number(
|
||||
values.reduce((sum, val) => sum + val, 0).toFixed(2)
|
||||
);
|
||||
|
||||
// 计算平均值
|
||||
const avg =
|
||||
values.length > 0 ? Number((total / values.length).toFixed(2)) : 0;
|
||||
|
||||
statsItem.max = values.length > 0 ? Math.max(...values) : 0;
|
||||
statsItem.min = values.length > 0 ? Math.min(...values) : 0;
|
||||
statsItem.avg = avg;
|
||||
statsItem.total = total;
|
||||
}
|
||||
|
||||
kpiStats.value.push(statsItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加一个变量来跟踪当前选中的行
|
||||
const selectedRows = ref<string[]>([]);
|
||||
|
||||
Reference in New Issue
Block a user