feat:黄金指标loading和title优化

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<any>[] = [
     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,10 +386,31 @@ 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)) {
+    // 添加到并发请求数组
+    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: []
+        };
+      })
+    );
+  }
+
+  // 并发执行所有请求
+  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 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 value = item[columns.key] ? Number(item[columns.key]) : 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 value = item[columns.key] ? Number(item[columns.key]) : 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 value = item[columns.key] ? Number(item[columns.key]) : 0;
           return itemTime >= day30_start && value !== 0;
@@ -436,10 +463,8 @@ async function fnGetGoldStatsData() {
           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(() => {
             "
           >
             <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'">
                 <span>
                   {{ t('views.perfManage.kpiOverView.totalValue') }}