From 89d22e55c77723fa8a89f4772fbb5452a22564b6 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Wed, 13 Nov 2024 16:56:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=85=B3=E9=94=AE=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=95=8C=E9=9D=A2=E9=87=8D=E6=9E=84(grafana?=
 =?UTF-8?q?=E6=A0=87=E5=87=86)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/locales/en-US.ts                   |   3 +
 src/i18n/locales/zh-CN.ts                   |   3 +
 src/views/perfManage/kpiKeyTarget/index.vue | 838 +++++++++++---------
 3 files changed, 473 insertions(+), 371 deletions(-)

diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 3bca6233..78bf00e7 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -1084,6 +1084,9 @@ export default {
         expressionNoIdTip:'Please check the expression, no valid indicator is found',
       },
       kpiKeyTarget:{
+        "time":"Time",
+        "rawData":"Table Data",
+        "statistics":"NE metrics",
         "fullWidthLayout":"Full Width",
         "twoColumnLayout":"Two Column",
         "saveLayout": "Save Layout",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 5d1ba365..36ab6a14 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1084,6 +1084,9 @@ export default {
         expressionNoIdTip:'请检查表达式,没有找到任何有效的指标',
       },
       kpiKeyTarget:{
+        "time":"时间",
+        "rawData":"表格数据",
+        "statistics":"指标",
         "fullWidthLayout":"全宽布局",
         "twoColumnLayout":"两列布局",
         "saveLayout": "保存布局",
diff --git a/src/views/perfManage/kpiKeyTarget/index.vue b/src/views/perfManage/kpiKeyTarget/index.vue
index 58e0a880..0b4def30 100644
--- a/src/views/perfManage/kpiKeyTarget/index.vue
+++ b/src/views/perfManage/kpiKeyTarget/index.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { GridLayout, GridItem } from 'grid-layout-plus'
 import * as echarts from 'echarts';
 import { PageContainer } from 'antdv-pro-layout';
-import { onMounted, reactive, ref, markRaw, nextTick, onUnmounted, watch } from 'vue';
+import { onMounted, reactive, ref, markRaw, nextTick, onUnmounted, watch, h } from 'vue';
 import { RESULT_CODE_ERROR, RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { SizeType } from 'ant-design-vue/es/config-provider';
 import { listKPIData, getKPITitle } from '@/api/perfManage/goldTarget';
@@ -16,8 +15,8 @@ import { LineSeriesOption } from 'echarts/charts';
 import { SeriesOption } from 'echarts';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { useDebounceFn } from '@vueuse/core';
-import { DownOutlined } from '@ant-design/icons-vue';
-import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { LineOutlined } from '@ant-design/icons-vue';
+import { TableColumnType } from 'ant-design-vue';
 const { t, currentLocale } = useI18n();
 
 const neInfoStore = useNeInfoStore();
@@ -33,8 +32,8 @@ const handleRealTimeSwitch = (checked: any) => {
 };
 
 // 定义所有网元类型
-const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'smf', 'pcf','upf','mme','mocngw','smsc','cbc','ausf'] as const;
-type AllChartType = typeof ALL_NE_TYPES[number];
+const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'smf', 'pcf', 'upf', 'mme', 'mocngw', 'smsc', 'cbc', 'ausf'] as const;
+type AllChartType = (typeof ALL_NE_TYPES)[number] & string;
 
 // 在 ALL_NE_TYPES 定义之后添加 小写转大写
 const neTypeOptions = ALL_NE_TYPES.map(type => ({
@@ -50,21 +49,36 @@ const selectedNeTypes = ref<AllChartType[]>([]);
 
 // 临时状态 存储最新的选择
 const latestSelectedTypes = ref<AllChartType[]>([]);
-//手动更新跟踪
-const isManuallyUpdating = ref(false);
 
 // watch 监控函数
-watch(selectedNeTypes, (newTypes) => {
-  //if (isManuallyUpdating.value) return;
-  networkElementTypes.value = newTypes;
-  latestSelectedTypes.value = newTypes;
-  debouncedUpdateCharts();
+watch(selectedNeTypes, async (newTypes) => {
+  networkElementTypes.value = [...newTypes]; // 使用展开运算符创建新数组
+  latestSelectedTypes.value = [...newTypes];
+
+  // 确保每个选中的类型都有对应的图表状态
+  newTypes.forEach(type => {
+    if (!chartStates[type]) {
+      chartStates[type] = createChartState();
+    }
+  });
+
+  // 初始化新选中的图表
+  for (const type of newTypes) {
+    try {
+      if (!chartStates[type].chart.value) {
+        await fetchKPITitle(type);
+        await nextTick();
+        await initChart(type);
+      }
+      await fetchData(type);
+    } catch (error) {
+      console.error(`Error initializing chart for ${type}:`, error);
+    }
+  }
 
   // 更新 WebSocket 订阅
   if (realTimeEnabled.value && ws.value) {
-    // 关闭现有连接
     ws.value.close();
-    // 创建新的连接和更新后的订
     const options: OptionsType = {
       url: '/ws',
       params: {
@@ -75,10 +89,13 @@ watch(selectedNeTypes, (newTypes) => {
     };
     ws.value.connect(options);
   }
+
+  // 保存选中的网元类型到本地存储
+  localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes));
 }, { deep: true });
 
 // 防抖函数
-const debouncedUpdateCharts = useDebounceFn(() => {
+useDebounceFn(() => {
   // 比较当前选择和最新选择
   if (JSON.stringify(latestSelectedTypes.value) !== JSON.stringify(selectedNeTypes.value)) {
     // 如果不一致，以最新选择为准
@@ -106,15 +123,14 @@ const debouncedUpdateCharts = useDebounceFn(() => {
     }
   });
 
-  // 保存选中的网元类型到本地存储
+  // 保存选中的网元型到本地存储
   localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes));
 
-  // 重新初始化图表
+  // 新初始图表
   nextTick(() => {
     initCharts();
   });
 }, 300);
-
 // 改变状态时重新初始化图表 数
 const initCharts = async () => {
   // 清除不再需要的图表
@@ -139,15 +155,22 @@ const initCharts = async () => {
     try {
       await fetchKPITitle(type);
       await nextTick();
-      initChart(type);
+      await initChart(type);
       await fetchData(type);
     } catch (error) {
       console.error(`Error initializing chart for ${type}:`, error);
     }
   }
 
-  // 不要在这里保存布局，因为这可能会覆盖我们刚刚设置的布局
-  // localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
+  // 添加延时检查
+  setTimeout(() => {
+    networkElementTypes.value.forEach(type => {
+      const state = chartStates[type];
+      if (state && !state.chart.value) {
+        initChart(type);
+      }
+    });
+  }, 200);
 };
 
 // 位置类型定义(记录布局）
@@ -161,7 +184,7 @@ interface LayoutItem {
 
 type Layout = LayoutItem[];
 
-//构建响应式数组储存图表类型数据
+//构建响应式数储存图表类型数据
 const chartOrder = ref<Layout>(
   JSON.parse(localStorage.getItem('chartOrder') || 'null') ||
   networkElementTypes.value.map((type, index) => ({//系统默认布局
@@ -174,14 +197,10 @@ const chartOrder = ref<Layout>(
 );
 
 // 监听带防抖
-const handleLayoutUpdated = useDebounceFn((newLayout: Layout) => {
-  if (isManuallyUpdating.value) {
-    return;
-  }
+useDebounceFn((newLayout: Layout) => {
   const filteredLayout = newLayout.filter(item => networkElementTypes.value.includes(item.i));
   if (JSON.stringify(filteredLayout) !== JSON.stringify(chartOrder.value)) {
     chartOrder.value = filteredLayout;
-    localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
     nextTick(() => {
       chartOrder.value.forEach((item) => {
         const state = chartStates[item.i];
@@ -194,9 +213,10 @@ const handleLayoutUpdated = useDebounceFn((newLayout: Layout) => {
   } else {
     console.log('No change in layout, skipping update');
   }
-}, 200);  // 200ms 的防抖时间
+}, 200);
+// 200ms 的防抖时间
 
-// 监听 chartOrder 的变化
+// 听 chartOrder 的变化
 watch(chartOrder, (newOrder, oldOrder) => {
   if (JSON.stringify(newOrder) !== JSON.stringify(oldOrder)) {
     nextTick(() => {
@@ -247,7 +267,7 @@ const chartStates: Record<AllChartType, ReturnType<typeof createChartState>> = O
   networkElementTypes.value.map(type => [type, createChartState()])
 ) as Record<AllChartType, ReturnType<typeof createChartState>>;
 
-//日期选择器
+//期择器
 interface RangePicker extends Record<AllChartType, [string, string]> {
   placeholder: [string, string];
 }
@@ -267,12 +287,16 @@ const rangePicker = reactive<RangePicker>({
 // 可复用的图表初始化函数
 const initChart = (type: AllChartType) => {
   const tryInit = (retries = 3) => {
-    nextTick(() => {
+    nextTick(async () => {
       const state = chartStates[type];
       if (!state) {
         console.warn(`Chart state for ${type} not found`);
         return;
       }
+
+      // 等待 DOM 更新
+      await nextTick();
+
       const container = state.chartDom.value;
       if (!container) {
         if (retries > 0) {
@@ -313,6 +337,7 @@ const initChart = (type: AllChartType) => {
           textStyle: {
             color: '#646A73',
           },
+          show:false,
           icon: 'circle',
           selected: state.chartLegendSelected,
         },
@@ -321,17 +346,6 @@ const initChart = (type: AllChartType) => {
           right: '10%',
           bottom: '15%',
         },
-        dataZoom: [
-          {
-            type: 'inside',
-            start: 0,
-            end: 100,
-          },
-          {
-            start: 0,
-            end: 100,
-          },
-        ],
         series: state.chartDataYSeriesData as SeriesOption[],
       };
       state.chart.value.setOption(option);
@@ -347,8 +361,11 @@ const initChart = (type: AllChartType) => {
         }
       });
 
-      // 观察图表容器
       state.observer.value.observe(container);
+
+      // 确保在图表初始化后更新统计信息
+      await nextTick();
+      await renderChart(type);
     });
   };
 
@@ -357,26 +374,25 @@ const initChart = (type: AllChartType) => {
 
 // 可复用的数据获取函数
 const fetchData = async (type: AllChartType) => {
-  const state = chartStates[type];  // 直使用 type
-  const neId = '001';
+  const state = chartStates[type];
   state.tableState.loading = true;
+
   try {
     const dateRange = rangePicker[type] as [string, string];
     const [startTime, endTime] = dateRange;
     const res = await listKPIData({
       neType: type.toUpperCase(),
-      neId,
+      neId: '001',
       startTime,
       endTime,
       sortField: 'timeGroup',
       sortOrder: 'desc',
       interval: 5,
     });
+
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
       state.tableState.data = res.data;
-      await nextTick(() => {
-        renderChart(type);
-      });
+      await renderChart(type);
     }
   } catch (error) {
     console.error(error);
@@ -390,12 +406,13 @@ const fetchData = async (type: AllChartType) => {
 function fnRealTimeSwitch(bool: boolean) {
   realTimeEnabled.value = bool;
   if (bool) {
-    if(!ws.value) {
+    if (!ws.value) {
       ws.value = new WS();
     }
     // 清空所有图表的现有数据
     Object.values(chartStates).forEach(state => {
       state.tableState.seached = false;
+      state.tableState.data = []; // 清空表格数据
       state.chartDataXAxisData = [];
       state.chartDataYSeriesData.forEach(series => {
         series.data = [];
@@ -407,6 +424,7 @@ function fnRealTimeSwitch(bool: boolean) {
         });
       }
     });
+
     const options: OptionsType = {
       url: '/ws',
       params: {
@@ -416,12 +434,19 @@ function fnRealTimeSwitch(bool: boolean) {
       onerror: wsError,
     };
     ws.value.connect(options);
-  } else if(ws.value) {
-    Object.values(chartStates).forEach(state => {
-      state.tableState.seached = true;
-    });
-    ws.value.close();
-    ws.value = null;
+  } else {
+    if (ws.value) {
+      Object.values(chartStates).forEach(state => {
+        state.tableState.seached = true;
+      });
+      ws.value.close();
+      ws.value = null;
+
+      // 重新获取历史数据
+      selectedNeTypes.value.forEach(type => {
+        fetchData(type);
+      });
+    }
   }
 }
 
@@ -434,17 +459,12 @@ function wsError() {
 // 接收数据回调
 function wsMessage(res: Record<string, any>) {
   const { code, data } = res;
-  if (code === RESULT_CODE_ERROR) {
+  if (code === RESULT_CODE_ERROR || !data?.groupId) {
     console.warn(res.msg);
     return;
   }
 
-  if (!data?.groupId) {
-    return;
-  }
-
   const neType = data.groupId.split('_')[1].toLowerCase() as AllChartType;
-
   const state = chartStates[neType];
   if (!state) {
     console.warn(`No chart state found for ${neType}`);
@@ -461,6 +481,12 @@ function wsMessage(res: Record<string, any>) {
 
   // 只有在实时数据模式下才更新图表
   if (realTimeEnabled.value) {
+    // 更新表格数据
+    state.tableState.data.unshift(kpiEvent);
+    if (state.tableState.data.length > 100) {
+      state.tableState.data.pop();
+    }
+
     // 更新X轴数据
     state.chartDataXAxisData.push(newTime);
     if (state.chartDataXAxisData.length > 100) {
@@ -486,6 +512,14 @@ function wsMessage(res: Record<string, any>) {
         series: state.chartDataYSeriesData as SeriesOption[]
       });
     }
+
+    // 更新统计信息
+    nextTick(() => {
+      const stats = getKpiStats(neType);
+      if (stats.length > 0) {
+        renderChart(neType);
+      }
+    });
   }
 }
 
@@ -494,12 +528,11 @@ interface CustomSeriesOption extends Omit<LineSeriesOption, 'data'> {
   data: Array<[string, number]>;
 }
 // 创建可复用的图表渲染函数
-const renderChart = (type: AllChartType) => {
+const renderChart = async (type: AllChartType) => {
   const state = chartStates[type];
-  if (state.chart.value == null) {
-    return;
-  }
-  // 置数据
+  if (!state?.chart.value) return;
+
+  // 重置数据
   state.chartLegendSelected = {};
   state.chartDataXAxisData = [];
   state.chartDataYSeriesData = [];
@@ -528,9 +561,10 @@ const renderChart = (type: AllChartType) => {
 
   const orgData = [...state.tableState.data].reverse();
   for (const item of orgData) {
-    state.chartDataXAxisData.push(parseDateToStr(+item.timeGroup));
+    const timeStr = parseDateToStr(+item.timeGroup);
+    state.chartDataXAxisData.push(timeStr);
     for (const series of state.chartDataYSeriesData) {
-      series.data.push([parseDateToStr(+item.timeGroup), +item[series.customKey as string]]);
+      series.data.push([timeStr, +item[series.customKey as string]]);
     }
   }
 
@@ -544,39 +578,42 @@ const renderChart = (type: AllChartType) => {
         boundaryGap: false,
       },
       series: state.chartDataYSeriesData as SeriesOption[],
-      dataZoom: [
-        {
-          type: 'inside',
-          start: 0,
-          end: 100,
-        },
-        {
-          start: 0,
-          end: 100,
-        },
-      ],
     },
     { replaceMerge: ['xAxis', 'series'] }
   );
 };
 
 
-// 获网元指标数据
+// 获网元指标据
 const fetchKPITitle = async (type: AllChartType) => {
   const language = currentLocale.value.split('_')[0] === 'zh' ? 'cn' : currentLocale.value.split('_')[0];
   try {
     const res = await getKPITitle(type.toUpperCase());
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      chartStates[type].tableColumns.value = res.data.map(item => ({
-        title: item[`${language}Title`],
-        dataIndex: item.kpiId,
-        align: 'left',
-        key: item.kpiId,
-        resizable: true,
-        width: 100,
-        minWidth: 150,
-        maxWidth: 300,
-      }));
+      // 添加时间列作为第一列
+      chartStates[type].tableColumns.value = [
+        {
+          title: t('views.perfManage.kpiKeyTarget.time'),
+          dataIndex: 'timeGroup',
+          key: 'timeGroup',
+          align: 'left',
+          width: 180,
+          fixed: 'left',
+          customRender: ({ text }: { text: string }) => {
+            return dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
+          }
+        },
+        ...res.data.map(item => ({
+          title: item[`${language}Title`],
+          dataIndex: item.kpiId,
+          align: 'left',
+          key: item.kpiId,
+          resizable: true,
+          width: 100,
+          minWidth: 150,
+          maxWidth: 300,
+        }))
+      ];
     }
   } catch (error) {
     console.error(error);
@@ -599,14 +636,14 @@ onMounted(async () => {
     selectedNeTypes.value = parsedSelectedNeTypes;
     networkElementTypes.value = parsedSelectedNeTypes;
   } else {
-    // 如果没有保存的选中网元类型，则用默认选择
+    // 如果没有保存的选中网元类型，用默认选择
     selectedNeTypes.value = [...DEFAULT_NE_TYPES];
     networkElementTypes.value = [...DEFAULT_NE_TYPES];
     // 保存这个默认选择到本地存储
     localStorage.setItem('selectedNeTypes', JSON.stringify(DEFAULT_NE_TYPES));
   }
 
-  // 初始化或更新 chartOrder
+  // 初化或更新 chartOrder
   const savedLayout = localStorage.getItem('chartOrder');
   if (savedLayout) {
     chartOrder.value = JSON.parse(savedLayout).filter((item: LayoutItem) =>
@@ -614,7 +651,7 @@ onMounted(async () => {
     );
   }
 
-  // 如果 chartOrder 为空或者不包含所有选中的网元，添加缺失的网元
+  // 如 chartOrder 为空或不包含所有选中的网元，添加缺失的网元
   const missingTypes = networkElementTypes.value.filter(type => !chartOrder.value.some(item => item.i === type));
   missingTypes.forEach((type) => {
     chartOrder.value.push({
@@ -644,145 +681,134 @@ onUnmounted(() => {
   });
 });
 
-const isSaving = ref(false);
-const isRestoring = ref(false);
-//保存布局按钮
-const handleSaveLayout = async (info: MenuInfo) => {
-  if (typeof info.key === 'string' && !isSaving.value) {
-    isSaving.value = true;
-    isRestoring.value = true;
-    try {
-      await saveCurrentLayout(info.key);
-    } finally {
-      setTimeout(()=>{
-        isSaving.value = false;
-        isRestoring.value = false;
-      },700)
-    }
-  } else {
-    console.error('Invalid layout key or operation in progress');
-  }
-};
-//恢复布局按钮
-const handleRestoreLayout = async (info: MenuInfo) => {
-  if (typeof info.key === 'string' && !isRestoring.value) {
-    isRestoring.value = true;
-    isSaving.value = true;
-    try {
-      await restoreSavedLayout(info.key);
-    } finally {
-      setTimeout(()=>{
-        isSaving.value = false;
-        isRestoring.value = false;
-      },700)
-    }
-  } else {
-    console.error('Invalid layout key or operation in progress');
-  }
+// 添加 KPIStats 接口定义
+interface KPIStats {
+  kpiId: string;
+  title: string;
+  max: number;
+  min: number;
+  neType: AllChartType;  // 添加网元类型字段
+}
+
+// 修改 getKpiStats 函数
+const getKpiStats = (type: AllChartType) => {
+  const state = chartStates[type];
+  if (!state?.chartDataYSeriesData) return [];
+
+  return state.chartDataYSeriesData.map(series => {
+    const kpiId = series.customKey as string;
+    const column = state.tableColumns.value.find(col => col.key === kpiId);
+    if (!column) return null;
+
+    // 直接从图表数据中获取值
+    const values = series.data.map(item => Number(item[1]));
+
+    return {
+      kpiId,
+      title: column.title as string,
+      max: values.length > 0 ? Math.max(...values) : 0,
+      min: values.length > 0 ? Math.min(...values) : 0,
+      neType: type
+    };
+  }).filter((item): item is KPIStats => item !== null);
 };
 
-// 保存当前布局
-const saveCurrentLayout = async (layoutName: string) => {
-  const savedLayouts = JSON.parse(localStorage.getItem('savedLayouts') || '{}');
-  savedLayouts[layoutName] = {
-    layout: chartOrder.value,
-    selectedTypes: selectedNeTypes.value
-  };
-  localStorage.setItem('savedLayouts', JSON.stringify(savedLayouts));
-  message.success(t('views.perfManage.kpiKeyTarget.saveSuccess', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
-};
-//恢复已保存的布局
-const restoreSavedLayout = async (layoutName: string) => {
-  const savedLayouts = JSON.parse(localStorage.getItem('savedLayouts') || '{}');
-  const savedLayout = savedLayouts[layoutName];
-  if (savedLayout && Array.isArray(savedLayout.selectedTypes) && Array.isArray(savedLayout.layout)) {
-    selectedNeTypes.value = savedLayout.selectedTypes;
-    networkElementTypes.value = savedLayout.selectedTypes;
-
-    // 更新布局
-    chartOrder.value = savedLayout.layout.filter((item: LayoutItem) =>
-      savedLayout.selectedTypes.includes(item.i)
-    );
-
-    // 如果有当前选中的网元类型不在保存的布局中，添加它们
-    const missingTypes = savedLayout.selectedTypes.filter((type: AllChartType) =>
-      !chartOrder.value.some(item => item.i === type)
-    );
-    missingTypes.forEach((type: AllChartType) => {
-      chartOrder.value.push({
-        x: (chartOrder.value.length % 2) * 6,
-        y: Math.floor(chartOrder.value.length / 2) * 4,
-        w: 6,
-        h: 4,
-        i: type,
+// 添加表格列配置
+const statsColumns: TableColumnType<KPIStats>[] = [
+  {
+    title: '',
+    key: 'icon',
+    width: 80,
+    customRender: ({ record }: { record: KPIStats }) => {
+      const state = chartStates[record.neType];
+      const series = state?.chartDataYSeriesData.find(s => s.customKey === record.kpiId);
+      return h(LineOutlined, {
+        style: {
+          color: series?.itemStyle?.color || '#000',
+          fontSize: '40px',
+          fontWeight: 'bold',
+        } as Record<string, string>
       });
-    });
+    }
+  },
+  {
+    title: t('views.perfManage.kpiOverView.kpiName'),
+    dataIndex: 'title',
+    key: 'title',
+    width: '40%',
+  },
+  {
+    title: t('views.perfManage.kpiOverView.maxValue'),
+    dataIndex: 'max',
+    key: 'max',
+    width: '30%',
+    sorter: (a: KPIStats, b: KPIStats) => a.max - b.max,
+    sortDirections: ['ascend', 'descend'] as ('ascend' | 'descend')[],
+  },
+  {
+    title: t('views.perfManage.kpiOverView.minValue'),
+    dataIndex: 'min',
+    key: 'min',
+    width: '30%',
+    sorter: (a: KPIStats, b: KPIStats) => a.min - b.min,
+    sortDirections: ['ascend', 'descend'] as ('ascend' | 'descend')[],
+  }
+];
 
-    localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
-    localStorage.setItem('selectedNeTypes', JSON.stringify(selectedNeTypes.value));
+// 添加选中行的状态
+const selectedRows = ref<Record<AllChartType, string | null>>({} as Record<AllChartType, string | null>);
 
-    await nextTick();
-    await initCharts();
+// 添加处理行点击的方法
+const handleRowClick = (record: KPIStats, type: AllChartType) => {
+  const state = chartStates[type];
+  if (!state?.chart.value) return;
 
-    message.success(t('views.perfManage.kpiKeyTarget.restoreSavedSuccess', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
+  if (selectedRows.value[type] === record.kpiId) {
+    // 如果点击的是当前中的行，则取消选中
+    selectedRows.value[type] = null;
+    // 更新图表，显示所有指标
+    updateChartLegendSelect(type);
   } else {
-    message.warning(t('views.perfManage.kpiKeyTarget.noSavedLayout', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
+    // 选中新行
+    selectedRows.value[type] = record.kpiId;
+    // 更新图表，只显示选中的指标
+    updateChartLegendSelect(type, record.kpiId);
   }
 };
 
-// 应用全宽布局
-const applyFullWidthLayout = () => {
-  isManuallyUpdating.value = true;
-  const newLayout = selectedNeTypes.value.map((type, index) => ({
-    x: 0,
-    y: index * 8,
-    w: 12,
-    h: 8,
-    i: type,
-  }));
+// 添加更新图表图例选中态的方法
+const updateChartLegendSelect = (type: AllChartType, selectedKpiId?: string) => {
+  const state = chartStates[type];
+  if (!state?.chart.value) return;
 
-  nextTick(() => {
-    Object.assign(chartOrder.value, newLayout)
-    // chartOrder.value = newLayout;
-    localStorage.setItem('chartOrder', JSON.stringify(newLayout));
-    initCharts();
-    // 直接更新图表，不调用 handleLayoutUpdated
-    chartOrder.value.forEach((item) => {
-      const state = chartStates[item.i];
-      if (state?.chart.value) {
-        state.chart.value.resize();
-        renderChart(item.i);
-      }
-    });
-    isManuallyUpdating.value = false;
+  const legendSelected = Object.fromEntries(
+    state.chartDataYSeriesData.map(series => [
+      state.tableColumns.value.find(col => col.key === series.customKey)?.title || series.customKey,
+      selectedKpiId ? series.customKey === selectedKpiId : true
+    ])
+  );
+
+  state.chart.value.setOption({
+    legend: {
+      selected: legendSelected
+    }
   });
 };
 
-// 应用两列布局
-const applyTwoColumnLayout = () => {
-  isManuallyUpdating.value = true;
-  const newLayout = selectedNeTypes.value.map((type, index) => ({
-    x: (index % 2) * 6,
-    y: Math.floor(index / 2) * 4,
-    w: 6,
-    h: 4,
-    i: type,
-  }));
-  nextTick(() => {
-    // chartOrder.value = newLayout;
-    Object.assign(chartOrder.value, newLayout)
-    localStorage.setItem('chartOrder', JSON.stringify(newLayout));
-    initCharts();
-    // 直接更新图表，不调用 handleLayoutUpdated
-    chartOrder.value.forEach((item) => {
-      const state = chartStates[item.i];
-      if (state?.chart.value) {
-        state.chart.value.resize();
-        renderChart(item.i);
-      }
-    });
-    isManuallyUpdating.value = false;
-  });
+// 1. 添加 tab 切换处理函数
+const handleTabChange = async (activeKey: string, type: AllChartType) => {
+  if (activeKey === 'stats') {
+    const state = chartStates[type];
+    if (!state?.chart.value) return;
+
+    // 制重新算统计信息
+    await nextTick();
+    const stats = getKpiStats(type);
+    if (stats.length === 0 && state.chartDataYSeriesData.length > 0) {
+      // 如果统计信息为空图表有数，重新渲染图表
+      await renderChart(type);
+    }
+  }
 };
 </script>
 <template>
@@ -798,109 +824,76 @@ const applyTwoColumnLayout = () => {
               />
             </a-form-item>
           </a-col>
-          <a-col :lg="12" :md="24" :xs="24">
+          <a-col :lg="20" :md="24" :xs="24">
             <a-form-item :label="t('views.ne.common.neType')" class="ne-type-select">
               <a-checkbox-group v-model:value="selectedNeTypes" :options="neTypeOptions" />
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="24" :xs="24">
-
-            <a-form-item>
-              <a-dropdown :disabled="isSaving">
-                <a-button :loading="isSaving">
-                  {{ t('views.perfManage.kpiKeyTarget.saveLayout') }}
-                  <DownOutlined />
-                </a-button>
-                <template #overlay>
-                  <a-menu @click="handleSaveLayout">
-                    <a-menu-item key="layout1">{{ t('views.perfManage.kpiKeyTarget.layout1') }}</a-menu-item>
-                    <a-menu-item key="layout2">{{ t('views.perfManage.kpiKeyTarget.layout2') }}</a-menu-item>
-                    <a-menu-item key="layout3">{{ t('views.perfManage.kpiKeyTarget.layout3') }}</a-menu-item>
-                  </a-menu>
-                </template>
-              </a-dropdown>
-              <a-dropdown :disabled="isRestoring">
-                <a-button :loading="isRestoring">
-                  {{ t('views.perfManage.kpiKeyTarget.restoreSaved') }}
-                  <DownOutlined />
-                </a-button>
-                <template #overlay>
-                  <a-menu @click="handleRestoreLayout">
-                    <a-menu-item key="layout1">{{ t('views.perfManage.kpiKeyTarget.layout1') }}</a-menu-item>
-                    <a-menu-item key="layout2">{{ t('views.perfManage.kpiKeyTarget.layout2') }}</a-menu-item>
-                    <a-menu-item key="layout3">{{ t('views.perfManage.kpiKeyTarget.layout3') }}</a-menu-item>
-                  </a-menu>
-                </template>
-              </a-dropdown>
-              <a-button @click="applyFullWidthLayout">
-                {{ t('views.perfManage.kpiKeyTarget.fullWidthLayout') }}
-              </a-button>
-              <a-button @click="applyTwoColumnLayout">
-                {{ t('views.perfManage.kpiKeyTarget.twoColumnLayout') }}
-              </a-button>
-            </a-form-item>
-          </a-col>
         </a-row>
       </a-form>
     </a-card>
 
-    <GridLayout
-      v-model:layout="chartOrder"
-      :col-num="12"
-      :row-height="100"
-      :margin="[10, 10]"
-      :is-draggable="true"
-      :is-resizable="true"
-      :vertical-compact="true"
-      :use-css-transforms="true"
-      :responsive="true"
-      :prevent-collision="false"
-      @layout-updated="handleLayoutUpdated"
-      class="charts-container"
-    >
-      <GridItem
-        v-for="item in chartOrder.filter(i => networkElementTypes.includes(i.i))"
-        :key="item.i"
-        :x="item.x"
-        :y="item.y"
-        :w="item.w"
-        :h="item.h"
-        :i="item.i"
-        :min-w="4"
-        :min-h="3"
-        :is-draggable="true"
-        :is-resizable="true"
-        :resizable-handles="['se']"
-        drag-allow-from=".ant-card-head"
-        drag-ignore-from=".no-drag"
-        class="grid-item"
+    <div class="charts-container">
+      <a-card
+        v-for="type in networkElementTypes"
+        :key="type"
+        :bordered="false"
+        class="chart-card"
       >
-        <a-card :bordered="false" class="card-container">
-          <template #title>
-            <div class="card-header">
-              <div class="card-title">
-                  <span>{{ (item.i as string).toUpperCase() }}</span>
-              </div>
-              <a-range-picker
-                v-model:value="rangePicker[item.i]"
-                :allow-clear="false"
-                bordered
-                :show-time="{ format: 'HH:mm:ss' }"
-                format="YYYY-MM-DD HH:mm:ss"
-                value-format="x"
-                :placeholder="rangePicker.placeholder"
-                style="width: 360px"
-                @change="() => fetchData(item.i)"
-                class="no-drag"
-              ></a-range-picker>
+        <template #title>
+          <div class="card-header">
+            <div class="card-title">
+              <span>{{ (type as string).toUpperCase() }}</span>
             </div>
-          </template>
-          <div class='chart'>
-            <div :ref="el => { if (el && chartStates[item.i]) chartStates[item.i].chartDom.value = el as HTMLElement }"></div>
+            <a-range-picker
+              v-model:value="rangePicker[type]"
+              :allow-clear="false"
+              bordered
+              :show-time="{ format: 'HH:mm:ss' }"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="x"
+              :placeholder="rangePicker.placeholder"
+              style="width: 360px"
+              @change="() => fetchData(type)"
+              class="no-drag"
+            ></a-range-picker>
           </div>
-        </a-card>
-      </GridItem>
-    </GridLayout>
+        </template>
+        <div class="card-content">
+          <div class="chart-container">
+            <div :ref="el => { if (el && chartStates[type]) chartStates[type].chartDom.value = el as HTMLElement }"></div>
+          </div>
+          <div class="table-container">
+            <a-tabs default-active-key="stats" @change="(key:any) => handleTabChange(key, type)">
+              <a-tab-pane key="stats" :tab="t('views.perfManage.kpiKeyTarget.statistics')">
+                <a-table
+                  :columns="statsColumns"
+                  :data-source="getKpiStats(type)"
+                  :pagination="false"
+                  size="small"
+                  :scroll="{ y: 'true' }"
+                  :loading="chartStates[type].tableState.loading"
+                  :custom-row="(record) => ({
+                    onClick: () => handleRowClick(record, type),
+                    class: record.kpiId === selectedRows[type] ? 'selected-row' : ''
+                  })"
+                />
+              </a-tab-pane>
+              <a-tab-pane key="raw" :tab="t('views.perfManage.kpiKeyTarget.rawData')">
+                <a-table
+                  :columns="chartStates[type].tableColumns.value"
+                  :data-source="chartStates[type].tableState.data"
+                  :loading="chartStates[type].tableState.loading"
+                  :pagination="false"
+                  size="small"
+                  :scroll="{ y: '100%' }"
+                />
+              </a-tab-pane>
+            </a-tabs>
+          </div>
+        </div>
+      </a-card>
+    </div>
   </PageContainer>
 </template>
 
@@ -910,27 +903,23 @@ const applyTwoColumnLayout = () => {
 }
 
 .charts-container {
-  width: 100%;
-  min-height: 600px;
-}
-
-.grid-item {
-  overflow: visible;
-  position: relative;
-}
-
-.date-picker-wrapper {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  right: 0;
-  z-index: 1;
-}
-
-.card-container {
-  height: 100%;
+  padding: 16px;
   display: flex;
   flex-direction: column;
+  gap: 16px;
+}
+
+.chart-card {
+  width: 100%;
+  height: 500px;
+
+  :deep(.ant-card-body) {
+    height: calc(100% - 57px); // 减去卡片头部高度
+    padding: 16px !important;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
 }
 
 .card-header {
@@ -938,9 +927,7 @@ const applyTwoColumnLayout = () => {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  cursor: move;
-  flex-wrap: wrap;  /* 添加这行，允许内容换行 */
-  gap: 8px;  /* 添加这行，为换行时的元素之间添加间隔 */
+  gap: 8px;
 }
 
 .card-title {
@@ -954,9 +941,16 @@ const applyTwoColumnLayout = () => {
   }
 }
 
-.chart {
-  flex: 1;
-  min-height: 0;
+.card-content {
+  height: 100%;
+  display: flex;
+  gap: 16px;
+}
+
+.chart-container {
+  flex: 3;
+  min-width: 0;
+  height: 100%;
 
   > div {
     width: 100%;
@@ -964,52 +958,154 @@ const applyTwoColumnLayout = () => {
   }
 }
 
-.switch-label {
-  margin-left: 8px;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.65);
-  white-space: nowrap;
-}
-
-
-
-:deep(.ant-card-body) {
-  flex: 1;
+.table-container {
+  flex: 2;
+  min-width: 500px;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 16px !important;
-  overflow: hidden;
+
+  :deep(.ant-tabs) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :deep(.ant-tabs-content-holder) {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  :deep(.ant-tabs-content) {
+    height: 100%;
+  }
+
+  :deep(.ant-tabs-tabpane) {
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :deep(.ant-table-wrapper) {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :deep(.ant-spin-nested-loading) {
+    height: 100%;
+  }
+
+  :deep(.ant-spin-container) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :deep(.ant-table) {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :deep(.ant-table-container) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :deep(.ant-table-header) {
+    flex-shrink: 0;
+  }
+
+  :deep(.ant-table-body) {
+    flex: 1;
+    overflow-y: auto !important;
+    min-height: 0;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    &::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 3px;
+    }
+  }
 }
 
-:deep(.ant-form-item) {
-  margin-bottom: 0;
+// 暗色主题下的滚动条样式
+[data-theme='dark'] {
+  :deep(.ant-table-body) {
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.2);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
+    }
+
+    &::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
 }
 
-:deep(.ant-form-item-label) {
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.85);
+// 表格交互样式
+:deep(.ant-table-tbody) {
+  tr {
+    cursor: pointer;
+
+    &:hover > td {
+      background-color: rgba(24, 144, 255, 0.1);
+    }
+
+    &.selected-row {
+      background-color: rgba(24, 144, 255, 0.1);
+    }
+  }
 }
 
-:deep(.anticon) {
-  font-size: 16px;
-  color: #1890ff;
+[data-theme='dark'] :deep(.selected-row) {
+  background-color: rgba(24, 144, 255, 0.2);
 }
 
-:deep(.ant-select) {
-  min-width: 200px;
-}
+// 基础组件样式覆盖
+:deep {
+  .ant-form-item {
+    margin-bottom: 0;
 
-:deep(.ant-card-head) {
-  padding: 8px 16px;  /* 减小上下内边距 */
-}
+    &-label {
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.85);
+    }
+  }
 
-:deep(.ant-card-head-title) {
-  padding: 8px 0;  /* 减小上下内边距 */
-  width: 100%; // 确保标题占据全宽
-}
+  .ant-card-head {
+    padding: 8px 16px;
 
-:deep(.ant-range-picker) {
-  flex-shrink: 0; // 防止日期选择被压缩
-  max-width: 100%; // 确保在小屏幕上不会溢出
+    &-title {
+      padding: 8px 0;
+      width: 100%;
+    }
+  }
+
+  .ant-range-picker {
+    flex-shrink: 0;
+    max-width: 100%;
+  }
 }
 </style>