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

feat:黄金指标loading和title优化

Browse Source
This commit is contained in:
zhongzm
2025-08-27 12:58:44 +08:00
parent e45c17c4c5
commit cfba4ecdb2
1 changed files with 113 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/views/perfManage/goldTarget/index.vue
View File

@@ -43,7 +43,7 @@ import saveAs from 'file-saver';
import { generateColorRGBA } from '@/utils/generate-utils'; import { generateColorRGBA } from '@/utils/generate-utils';
import { OptionsType, WS } from '@/plugins/ws-websocket'; import { OptionsType, WS } from '@/plugins/ws-websocket';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { LineOutlined } from '@ant-design/icons-vue'; import { LineOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
import useLayoutStore from '@/store/modules/layout'; import useLayoutStore from '@/store/modules/layout';
import { SelectValue } from 'ant-design-vue/es/select'; import { SelectValue } from 'ant-design-vue/es/select';
import type { DefaultOptionType } from 'ant-design-vue/es/select'; import type { DefaultOptionType } from 'ant-design-vue/es/select';
@@ -182,6 +182,9 @@ let tableState: TabeStateType = reactive({
showTable: false, showTable: false,
}); });
/**统计表格loading状态 */
const statsTableLoading = ref(false);
/**表格紧凑型变更操作 */ /**表格紧凑型变更操作 */
function fnTableSize({ key }: MenuInfo) { function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType; tableState.size = key as SizeType;
@@ -274,48 +277,48 @@ const statsColumns: TableColumnType<any>[] = [
title: t('views.perfManage.customTarget.ago1'), title: t('views.perfManage.customTarget.ago1'),
dataIndex: 'last1Day', dataIndex: 'last1Day',
key: 'last1Day', key: 'last1Day',
width: '150px', width: '210px',
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
customRender: ({ record }: { record: any }) => { customRender: ({ record }: { record: any }) => {
const value = record.last1Day; const value = record.last1Day;
// 如果是默认值，直接显示 // 如果是空值，直接显示空白
if (value === '-') { if (value === '' || value === null || value === undefined) {
return value; return '';
} }
// 黄金指标多为次数类，使用累计值 // 黄金指标多为次数类，使用累计值
return `${value} ${t('views.perfManage.customTarget.total')}`; return `${value} `;
}, },
}, },
{ {
title: t('views.perfManage.customTarget.ago7'), title: t('views.perfManage.customTarget.ago7'),
dataIndex: 'last7Days', dataIndex: 'last7Days',
key: 'last7Days', key: 'last7Days',
width: '150px', width: '200px',
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
customRender: ({ record }: { record: any }) => { customRender: ({ record }: { record: any }) => {
const value = record.last7Days; const value = record.last7Days;
// 如果是默认值，直接显示 // 如果是空值，直接显示空白
if (value === '-') { if (value === '' || value === null || value === undefined) {
return value; return '';
} }
// 黄金指标多为次数类，使用累计值 // 黄金指标多为次数类，使用累计值
return `${value} ${t('views.perfManage.customTarget.total')}`; return `${value} `;
}, },
}, },
{ {
title: t('views.perfManage.customTarget.ago30'), title: t('views.perfManage.customTarget.ago30'),
dataIndex: 'last30Days', dataIndex: 'last30Days',
key: 'last30Days', key: 'last30Days',
width: '150px', width: '200px',
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
customRender: ({ record }: { record: any }) => { customRender: ({ record }: { record: any }) => {
const value = record.last30Days; const value = record.last30Days;
// 如果是默认值，直接显示 // 如果是空值，直接显示空白
if (value === '-') { if (value === '' || value === null || value === undefined) {
return value; return '';
} }
// 黄金指标多为次数类，使用累计值 // 黄金指标多为次数类，使用累计值
return `${value} ${t('views.perfManage.customTarget.total')}`; return `${value} `;
}, },
}, },
]; ];
@@ -342,9 +345,9 @@ function fnInitGoldStatsData() {
rawKpiId: columns.key, rawKpiId: columns.key,
rawKpiTitle: columns.title, rawKpiTitle: columns.title,
neId: neId, neId: neId,
last1Day: '-', // 默认值，显示加载中状态 last1Day: '', // 空白显示，loading状态表示正在获取数据
last7Days: '-', last7Days: '',
last30Days: '-', last30Days: '',
}); });
} }
} }
@@ -358,9 +361,12 @@ async function fnGetGoldStatsData() {
return; return;
} }
statsTableLoading.value = true;
const now = new Date(); const now = new Date();
// 为每个网元分别获取近30天的数据 // 创建所有网元的并发请求
const requests = [];
for (const neId of state.neIds) { for (const neId of state.neIds) {
// 只请求一次近30天的数据 // 只请求一次近30天的数据
const startTime = new Date(now); const startTime = new Date(now);
@@ -380,66 +386,85 @@ async function fnGetGoldStatsData() {
sortOrder: 'asc', sortOrder: 'asc',
}; };
try { // 添加到并发请求数组
console.log(`为网元${neId}获取近30天统计数据，请求参数:`, params); requests.push(
const res = await listKPIData(toRaw(params)); listKPIData(toRaw(params)).then(res => ({
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) { neId,
// 计算时间边界 success: res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data),
const now_ms = now.getTime(); data: res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data) ? res.data : []
const day1_start = now_ms - (1 * 24 * 60 * 60 * 1000); // 1天前 })).catch(error => {
const day7_start = now_ms - (7 * 24 * 60 * 60 * 1000); // 7天前 console.error(`获取网元${neId}统计数据失败:`, error);
const day30_start = now_ms - (30 * 24 * 60 * 60 * 1000); // 30天前 return {
neId,
success: false,
data: []
};
})
);
}
// 为每个指标计算统计值 // 并发执行所有请求
for (const columns of tableColumns.value) { const results = await Promise.all(requests);
if (
columns.key === 'neName' ||
columns.key === 'startIndex' ||
columns.key === 'timeGroup'
) {
continue;
}
// 根据时间范围筛选非零数据 // 处理所有结果
const data1Day = res.data.filter((item: any) => { results.forEach(result => {
const itemTime = new Date(item.timeGroup).getTime(); const { neId, success, data } = result;
const value = item[columns.key] ? Number(item[columns.key]) : 0;
return itemTime >= day1_start && value !== 0;
});
const data7Days = res.data.filter((item: any) => { if (success && data.length > 0) {
const itemTime = new Date(item.timeGroup).getTime(); // 计算时间边界
const value = item[columns.key] ? Number(item[columns.key]) : 0; const now_ms = now.getTime();
return itemTime >= day7_start && value !== 0; 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天前
const data30Days = res.data.filter((item: any) => { // 为每个指标计算统计值
const itemTime = new Date(item.timeGroup).getTime(); for (const columns of tableColumns.value) {
const value = item[columns.key] ? Number(item[columns.key]) : 0; if (
return itemTime >= day30_start && value !== 0; columns.key === 'neName' ||
}); columns.key === 'startIndex' ||
columns.key === 'timeGroup'
) {
continue;
}
// 计算统计值（只对非零数据进行计算，黄金指标多为次数类使用累计值） // 根据时间范围筛选非零数据
const calculateValue = (dataArray: any[]) => { const data1Day = data.filter((item: any) => {
if (dataArray.length === 0) return 0; const itemTime = new Date(item.timeGroup).getTime();
const value = item[columns.key] ? Number(item[columns.key]) : 0;
return itemTime >= day1_start && value !== 0;
});
const values = dataArray.map((item: any) => Number(item[columns.key])); const data7Days = data.filter((item: any) => {
// 黄金指标多为次数类，使用累计值 const itemTime = new Date(item.timeGroup).getTime();
return Number(values.reduce((sum, val) => sum + val, 0).toFixed(2)); const value = item[columns.key] ? Number(item[columns.key]) : 0;
}; return itemTime >= day7_start && value !== 0;
});
// 更新对应的统计数据 const data30Days = data.filter((item: any) => {
const statsIndex = kpiStats.value.findIndex((item: any) => item.kpiId === `${columns.key}_${neId}`); const itemTime = new Date(item.timeGroup).getTime();
if (statsIndex !== -1) { const value = item[columns.key] ? Number(item[columns.key]) : 0;
kpiStats.value[statsIndex].last1Day = calculateValue(data1Day); return itemTime >= day30_start && value !== 0;
kpiStats.value[statsIndex].last7Days = calculateValue(data7Days); });
kpiStats.value[statsIndex].last30Days = calculateValue(data30Days);
} // 计算统计值（只对非零数据进行计算，黄金指标多为次数类使用累计值）
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) { } else {
console.error(`获取网元${neId}统计数据失败:`, error); // 如果获取失败，保持空白显示
// 如果获取失败，保持默认值
for (const columns of tableColumns.value) { for (const columns of tableColumns.value) {
if ( if (
columns.key === 'neName' || columns.key === 'neName' ||
@@ -451,13 +476,16 @@ async function fnGetGoldStatsData() {
const statsIndex = kpiStats.value.findIndex((item: any) => item.kpiId === `${columns.key}_${neId}`); const statsIndex = kpiStats.value.findIndex((item: any) => item.kpiId === `${columns.key}_${neId}`);
if (statsIndex !== -1) { if (statsIndex !== -1) {
kpiStats.value[statsIndex].last1Day = '-'; kpiStats.value[statsIndex].last1Day = '';
kpiStats.value[statsIndex].last7Days = '-'; kpiStats.value[statsIndex].last7Days = '';
kpiStats.value[statsIndex].last30Days = '-'; kpiStats.value[statsIndex].last30Days = '';
} }
} }
} }
} });
// 关闭loading状态
statsTableLoading.value = false;
} }
/** /**
@@ -1742,6 +1770,7 @@ onBeforeUnmount(() => {
:pagination="false" :pagination="false"
:scroll="{ y: 250 }" :scroll="{ y: 250 }"
size="small" size="small"
:loading="statsTableLoading"
:custom-row=" :custom-row="
(record:any) => ({ (record:any) => ({
onClick: () => handleRowClick(record), onClick: () => handleRowClick(record),
@@ -1750,6 +1779,15 @@ onBeforeUnmount(() => {
" "
> >
<template #headerCell="{ column }"> <template #headerCell="{ column }">
<template v-if="column.key === 'last1Day'">
<span style="display: flex; align-items: center; gap: 4px;">
{{ t('views.perfManage.customTarget.ago1') }}
<InfoCircleOutlined
style=" cursor: pointer;"
:title="t('views.perfManage.kpiOverView.tips')"
/>
</span>
</template>
<template v-if="column.key === 'total'"> <template v-if="column.key === 'total'">
<span> <span>
{{ t('views.perfManage.kpiOverView.totalValue') }} {{ t('views.perfManage.kpiOverView.totalValue') }}