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

108
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,10 +386,31 @@ 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),
data: res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data) ? res.data : []
})).catch(error => {
console.error(`获取网元${neId}统计数据失败:`, error);
return {
neId,
success: false,
data: []
};
})
);
}
// 并发执行所有请求
const results = await Promise.all(requests);
// 处理所有结果
results.forEach(result => {
const { neId, success, data } = result;
if (success && data.length > 0) {
// 计算时间边界 // 计算时间边界
const now_ms = now.getTime(); const now_ms = now.getTime();
const day1_start = now_ms - (1 * 24 * 60 * 60 * 1000); // 1天前 const day1_start = now_ms - (1 * 24 * 60 * 60 * 1000); // 1天前
@@ -401,19 +428,19 @@ async function fnGetGoldStatsData() {
} }
// 根据时间范围筛选非零数据 // 根据时间范围筛选非零数据
const data1Day = res.data.filter((item: any) => { const data1Day = data.filter((item: any) => {
const itemTime = new Date(item.timeGroup).getTime(); const itemTime = new Date(item.timeGroup).getTime();
const value = item[columns.key] ? Number(item[columns.key]) : 0; const value = item[columns.key] ? Number(item[columns.key]) : 0;
return itemTime >= day1_start && value !== 0; return itemTime >= day1_start && value !== 0;
}); });
const data7Days = res.data.filter((item: any) => { const data7Days = data.filter((item: any) => {
const itemTime = new Date(item.timeGroup).getTime(); const itemTime = new Date(item.timeGroup).getTime();
const value = item[columns.key] ? Number(item[columns.key]) : 0; const value = item[columns.key] ? Number(item[columns.key]) : 0;
return itemTime >= day7_start && value !== 0; return itemTime >= day7_start && value !== 0;
}); });
const data30Days = res.data.filter((item: any) => { const data30Days = data.filter((item: any) => {
const itemTime = new Date(item.timeGroup).getTime(); const itemTime = new Date(item.timeGroup).getTime();
const value = item[columns.key] ? Number(item[columns.key]) : 0; const value = item[columns.key] ? Number(item[columns.key]) : 0;
return itemTime >= day30_start && value !== 0; return itemTime >= day30_start && value !== 0;
@@ -436,10 +463,8 @@ async function fnGetGoldStatsData() {
kpiStats.value[statsIndex].last30Days = calculateValue(data30Days); kpiStats.value[statsIndex].last30Days = calculateValue(data30Days);
} }
} }
} } else {
} catch (error) { // 如果获取失败，保持空白显示
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') }}