From cfba4ecdb2ae152e885a3ab5ae962888989572c4 Mon Sep 17 00:00:00 2001 From: zhongzm Date: Wed, 27 Aug 2025 12:58:44 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E9=BB=84=E9=87=91=E6=8C=87=E6=A0=87loadin?= =?UTF-8?q?g=E5=92=8Ctitle=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/perfManage/goldTarget/index.vue | 188 +++++++++++++--------- 1 file changed, 113 insertions(+), 75 deletions(-) diff --git a/src/views/perfManage/goldTarget/index.vue b/src/views/perfManage/goldTarget/index.vue index 0b8e0468..79d5d140 100644 --- a/src/views/perfManage/goldTarget/index.vue +++ b/src/views/perfManage/goldTarget/index.vue @@ -43,7 +43,7 @@ import saveAs from 'file-saver'; import { generateColorRGBA } from '@/utils/generate-utils'; import { OptionsType, WS } from '@/plugins/ws-websocket'; 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 { SelectValue } 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, }); +/**统计表格loading状态 */ +const statsTableLoading = ref(false); + /**表格紧凑型变更操作 */ function fnTableSize({ key }: MenuInfo) { tableState.size = key as SizeType; @@ -274,48 +277,48 @@ const statsColumns: TableColumnType[] = [ title: t('views.perfManage.customTarget.ago1'), dataIndex: 'last1Day', key: 'last1Day', - width: '150px', + width: '210px', sortDirections: ['ascend', 'descend'], customRender: ({ record }: { record: any }) => { const value = record.last1Day; - // 如果是默认值，直接显示 - if (value === '-') { - return value; + // 如果是空值，直接显示空白 + if (value === '' || value === null || value === undefined) { + return ''; } // 黄金指标多为次数类，使用累计值 - return `${value} ${t('views.perfManage.customTarget.total')}`; + return `${value} `; }, }, { title: t('views.perfManage.customTarget.ago7'), dataIndex: 'last7Days', key: 'last7Days', - width: '150px', + width: '200px', sortDirections: ['ascend', 'descend'], customRender: ({ record }: { record: any }) => { const value = record.last7Days; - // 如果是默认值，直接显示 - if (value === '-') { - return value; + // 如果是空值，直接显示空白 + if (value === '' || value === null || value === undefined) { + return ''; } // 黄金指标多为次数类，使用累计值 - return `${value} ${t('views.perfManage.customTarget.total')}`; + return `${value} `; }, }, { title: t('views.perfManage.customTarget.ago30'), dataIndex: 'last30Days', key: 'last30Days', - width: '150px', + width: '200px', sortDirections: ['ascend', 'descend'], customRender: ({ record }: { record: any }) => { const value = record.last30Days; - // 如果是默认值，直接显示 - if (value === '-') { - return value; + // 如果是空值，直接显示空白 + if (value === '' || value === null || value === undefined) { + return ''; } // 黄金指标多为次数类，使用累计值 - return `${value} ${t('views.perfManage.customTarget.total')}`; + return `${value} `; }, }, ]; @@ -342,9 +345,9 @@ function fnInitGoldStatsData() { rawKpiId: columns.key, rawKpiTitle: columns.title, neId: neId, - last1Day: '-', // 默认值，显示加载中状态 - last7Days: '-', - last30Days: '-', + last1Day: '', // 空白显示，loading状态表示正在获取数据 + last7Days: '', + last30Days: '', }); } } @@ -358,9 +361,12 @@ async function fnGetGoldStatsData() { return; } + statsTableLoading.value = true; const now = new Date(); - // 为每个网元分别获取近30天的数据 + // 创建所有网元的并发请求 + const requests = []; + for (const neId of state.neIds) { // 只请求一次近30天的数据 const startTime = new Date(now); @@ -380,66 +386,85 @@ async function fnGetGoldStatsData() { sortOrder: 'asc', }; - 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天前 + // 添加到并发请求数组 + requests.push( + listKPIData(toRaw(params)).then(res => ({ + 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: [] + }; + }) + ); + } - // 为每个指标计算统计值 - for (const columns of tableColumns.value) { - if ( - columns.key === 'neName' || - columns.key === 'startIndex' || - columns.key === 'timeGroup' - ) { - continue; - } + // 并发执行所有请求 + const results = await Promise.all(requests); - // 根据时间范围筛选非零数据 - 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; - }); + // 处理所有结果 + results.forEach(result => { + const { neId, success, data } = result; - 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; - }); + if (success && data.length > 0) { + // 计算时间边界 + 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天前 - 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; - }); + // 为每个指标计算统计值 + for (const columns of tableColumns.value) { + if ( + columns.key === 'neName' || + columns.key === 'startIndex' || + columns.key === 'timeGroup' + ) { + continue; + } - // 计算统计值（只对非零数据进行计算，黄金指标多为次数类使用累计值） - const calculateValue = (dataArray: any[]) => { - if (dataArray.length === 0) return 0; + // 根据时间范围筛选非零数据 + const data1Day = 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 values = dataArray.map((item: any) => Number(item[columns.key])); - // 黄金指标多为次数类，使用累计值 - return Number(values.reduce((sum, val) => sum + val, 0).toFixed(2)); - }; + const data7Days = 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 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); - } + const data30Days = 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); - // 如果获取失败，保持默认值 + } else { + // 如果获取失败，保持空白显示 for (const columns of tableColumns.value) { if ( columns.key === 'neName' || @@ -451,13 +476,16 @@ async function fnGetGoldStatsData() { 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 = '-'; + kpiStats.value[statsIndex].last1Day = ''; + kpiStats.value[statsIndex].last7Days = ''; + kpiStats.value[statsIndex].last30Days = ''; } } } - } + }); + + // 关闭loading状态 + statsTableLoading.value = false; } /** @@ -1742,6 +1770,7 @@ onBeforeUnmount(() => { :pagination="false" :scroll="{ y: 250 }" size="small" + :loading="statsTableLoading" :custom-row=" (record:any) => ({ onClick: () => handleRowClick(record), @@ -1750,6 +1779,15 @@ onBeforeUnmount(() => { " >