feat:自定义指标loading和title优化

src/views/perfManage/kpiCReport/index.vue

@@ -43,7 +43,7 @@ import { writeSheet } from '@/utils/execl-utils';
 import saveAs from 'file-saver';
 import { generateColorRGBA } from '@/utils/generate-utils';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
-import { LineOutlined } from '@ant-design/icons-vue';
+import { LineOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
 import { useRoute } from 'vue-router';
 import dayjs, { Dayjs } from 'dayjs';
 import useLayoutStore from '@/store/modules/layout';
@@ -200,7 +200,7 @@ let queryParams: any = reactive({
   /**排序字段 */
   sortField: 'created_at',
   /**排序方式 */
-  sortOrder: 'desc',
+  sortOrder: 'asc',
 });
 
 /**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
@@ -240,6 +240,8 @@ let state: StateType = reactive({
 const kpiColors = new Map<string, string>();
 //legend表格数据
 const kpiStats: any = ref([]);
+// 统计表格loading状态
+const statsTableLoading = ref(false);
 
 // 添加一个函数来获取当前主题下的网格线颜色
 function getSplitLineColor() {
@@ -270,22 +272,28 @@ const statsColumns: TableColumnType<any>[] = [
     key: 'title',
   },
   {
-    title: t('views.perfManage.customTarget.ago1'),
+    title: () => h('div', { style: { display: 'flex', alignItems: 'center', gap: '4px' } }, [
+      h('span', t('views.perfManage.customTarget.ago1')),
+      h(InfoCircleOutlined, {
+        style: {  cursor: 'pointer' },
+        title: t('views.perfManage.kpiOverView.tips'),
+      }),
+    ]),
     dataIndex: 'last1Day',
     key: 'last1Day',
-    width: '150px',
+    width: '210px',
     sortDirections: ['ascend', 'descend'],
     customRender: ({ record }: { record: any }) => {
       const unit = record.unit || '';
       const value = record.last1Day;
-      // 如果是默认值，直接显示
-      if (value === '-') {
-        return value;
+      // 如果是空值，直接显示空白
+      if (value === '' || value === null || value === undefined) {
+        return '';
       }
       if (unit.includes('%') || unit === 'Mbps') {
-        return `${value} ${t('views.perfManage.customTarget.avg')}`;
+        return `${value} `;
       } else {
-        return `${value} ${t('views.perfManage.customTarget.total')}`;
+        return `${value} `;
       }
     },
   },
@@ -293,19 +301,19 @@ const statsColumns: TableColumnType<any>[] = [
     title: t('views.perfManage.customTarget.ago7'),
     dataIndex: 'last7Days',
     key: 'last7Days',
-    width: '150px',
+    width: '200px',
     sortDirections: ['ascend', 'descend'],
     customRender: ({ record }: { record: any }) => {
       const unit = record.unit || '';
       const value = record.last7Days;
-      // 如果是默认值，直接显示
-      if (value === '-') {
-        return value;
+      // 如果是空值，直接显示空白
+      if (value === '' || value === null || value === undefined) {
+        return '';
       }
       if (unit.includes('%') || unit === 'Mbps') {
-        return `${value} ${t('views.perfManage.customTarget.avg')}`;
+        return `${value} `;
       } else {
-        return `${value} ${t('views.perfManage.customTarget.total')}`;
+        return `${value} `;
       }
     },
   },
@@ -313,19 +321,19 @@ const statsColumns: TableColumnType<any>[] = [
     title: t('views.perfManage.customTarget.ago30'),
     dataIndex: 'last30Days',
     key: 'last30Days',
-    width: '150px',
+    width: '200px',
     sortDirections: ['ascend', 'descend'],
     customRender: ({ record }: { record: any }) => {
       const unit = record.unit || '';
       const value = record.last30Days;
-      // 如果是默认值，直接显示
-      if (value === '-') {
-        return value;
+      // 如果是空值，直接显示空白
+      if (value === '' || value === null || value === undefined) {
+        return '';
       }
       if (unit.includes('%') || unit === 'Mbps') {
-        return `${value} ${t('views.perfManage.customTarget.avg')}`;
+        return `${value} `;
       } else {
-        return `${value} ${t('views.perfManage.customTarget.total')}`;
+        return `${value} `;
       }
     },
   },
@@ -407,9 +415,9 @@ function fnInitStatsData() {
       kpiId: columns.key,
       title: columns.title,
       unit: columns.unit,
-      last1Day: '-', // 默认值，显示加载中状态
-      last7Days: '-',
-      last30Days: '-',
+      last1Day: '', // 空白显示，loading状态表示正在获取数据
+      last7Days: '',
+      last30Days: '',
     });
   }
 }
@@ -418,9 +426,10 @@ function fnInitStatsData() {
 async function fnGetStatsData() {
   if (!state.neType[0]) return;
 
+  statsTableLoading.value = true;
   const now = new Date();
 
-  // 只请求一次近30天的数据
+  // 创建并发请求（虽然这里只有一个网元，但保持与其他界面的一致性）
   const startTime = new Date(now);
   startTime.setDate(now.getDate() - 30);
   startTime.setHours(0, 0, 0, 0);
@@ -504,12 +513,14 @@ async function fnGetStatsData() {
     }
   } catch (error) {
     console.error('获取统计数据失败:', error);
-    // 如果获取失败，保持默认值
+    // 如果获取失败，保持空白显示
     for (const statsItem of kpiStats.value) {
-      statsItem.last1Day = '-';
-      statsItem.last7Days = '-';
-      statsItem.last30Days = '-';
+      statsItem.last1Day = '';
+      statsItem.last7Days = '';
+      statsItem.last30Days = '';
     }
+  } finally {
+    statsTableLoading.value = false;
   }
 }
 
@@ -1302,6 +1313,7 @@ onBeforeUnmount(() => {
             :pagination="false"
             :scroll="{ y: 250 }"
             size="small"
+            :loading="statsTableLoading"
             :custom-row="(record:any) => ({
               onClick: () => handleRowClick(record),
               class: selectedRow.includes(record.kpiId) ? 'selected-row' : '',