From 80ee1c05ff661fde17a5507c082176ed7b6c08f9 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Tue, 12 Nov 2024 19:01:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=85=B3=E9=94=AE=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E6=A6=82=E8=A7=88=E7=95=8C=E9=9D=A2=E9=87=8D=E6=9E=84=EF=BC=88?=
 =?UTF-8?q?grafana=E6=A0=87=E5=87=86=EF=BC=89?=
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/kpiOverView/index.vue | 621 ++++++++-------------
 3 files changed, 230 insertions(+), 397 deletions(-)

diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 5efa3e7f..3bca6233 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -1096,6 +1096,9 @@ export default {
         "layout3": "Layout 3"
       },
       kpiOverView:{
+        "kpiName":"NE Metrics Name",
+        "maxValue":"Max Value",
+        "minValue":"Min Value",
         "kpiChartTitle":"Overview of NE metrics",
         "changeLine":"Change to Line Charts",
         "changeBar":"Change to Bar Charts",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 18cb6da9..5d1ba365 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1096,6 +1096,9 @@ export default {
         "layout3": "布局3"
       },
       kpiOverView:{
+        "kpiName":"指标名",
+        "maxValue":"最大值",
+        "minValue":"最小值",
         "kpiChartTitle":"网元指标概览",
         "changeLine":"切换为折线图",
         "changeBar":"切换为柱状图",
diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue
index 332be093..171727f7 100644
--- a/src/views/perfManage/kpiOverView/index.vue
+++ b/src/views/perfManage/kpiOverView/index.vue
@@ -1,53 +1,20 @@
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick, computed, h } from 'vue';
 import * as echarts from 'echarts/core';
 import { GridComponent, TooltipComponent, TitleComponent,LegendComponent } from 'echarts/components';
-import { LineChart, BarChart } from 'echarts/charts';
+import { LineChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget';
 import useI18n from '@/hooks/useI18n';
-import { message, TourProps } from 'ant-design-vue';
+import { message,} from 'ant-design-vue';
 import { RESULT_CODE_ERROR, RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { generateColorRGBA } from '@/utils/generate-utils';
-import { BarChartOutlined, LineChartOutlined, UnorderedListOutlined, MoreOutlined } from '@ant-design/icons-vue';
-//配置漫游引导变量
-const open = ref<boolean>(false);
-
-const handleOpen = (val: boolean): void => {
-  open.value = val;
-};
-
-const ref1=ref<any>(null);
-const ref2=ref<any>(null);
-const ref3=ref<any>(null);
-const ref4=ref<any>(null);
-
-const steps: TourProps['steps']=[
-  {
-    title:'日期范围选择器',
-    description: '选择要查看数据的时间范围建议范围一个小时',
-    target: () => ref1.value && ref1.value.$el,
-  },
-  {
-    title:'选择指标按钮',
-    description: '在这里勾选想要查看的指标',
-    target: () => ref2.value && ref2.value.$el,
-  },
-  {
-    title:'切换图表类型',
-    description: '点击切换另一种图表查看数据概览',
-    target: () => ref3.value && ref3.value.$el,
-  },
-  {
-    title:'实时数据开关',
-    description: '打开开关观看实时数据',
-    target: () => ref4.value && ref4.value.$el,
-  },
-]
+import { LineOutlined } from '@ant-design/icons-vue';
 
+const { t, currentLocale } = useI18n();
 //定义KPI接口
 interface KPIBase{
   kpiId: string;
@@ -61,7 +28,7 @@ interface KPIColumn extends KPIBase{
 }
 // 在这里定义 ChartDataItem 接口
 interface ChartDataItem {
-  date: string; // 将存储完整的时间字符串，包含时分秒
+  date: string; // 将存储完整的时间字符串包含时分秒
   [kpiId: string]: string | number; // 动态指标
 }
 
@@ -71,7 +38,6 @@ type NeType= typeof ALL_NE_TYPES[number];
 
 echarts.use([
   LineChart,
-  BarChart,
   GridComponent,
   TooltipComponent,
   TitleComponent,
@@ -169,7 +135,7 @@ const handleWebSocketMessage = (kpiEvent:any)=>{
     date: kpiEvent.timeGroup?.toString() || Date.now().toString(),
   };
 
-  // 只添加已选中的指标的数据
+  // 添加已选中的指标的数据
   selectedKPIs.value.forEach(kpiId => {
     newData[kpiId] = Number(kpiEvent[kpiId])||0;
   });
@@ -261,31 +227,17 @@ const fetchChartData = async () => {
 // 存储每个指标的临时固定颜色
 const kpiColors = new Map<string, string>();
 
-// 定义图表类型的响应式变量
-const chartType = ref<'line' | 'bar'>('line');
-
-// 切换图表类型的方法
-const toggleChartType = () => {
-  chartType.value = chartType.value === 'line' ? 'bar' : 'line';
-  updateChart();
-};
-
 // 更新图表类型
-const getCommonSeriesConfig=(isLine:boolean)=>({
-  symbol: isLine ? 'circle' : undefined,
-  symbolSize: isLine ? 6 : undefined,
-  showSymbol: isLine,
-  barWidth: !isLine ? 20 : undefined,
-  barGap: !isLine ? '30%' : undefined,
-  animation: !isLine,
-  animationDuration: 300,
-  animationEasing: 'cubicOut',
+const getSeriesConfig = () => ({
+  symbol: 'circle',
+  symbolSize: 6,
+  showSymbol: true,
 });
-const updateChart = () => {
-  if (!chart || !kpiColumns.value.length) return; //首先检查图表实例和指标是否存在
 
-  const isLine = chartType.value==='line';
-  const commonConfig = getCommonSeriesConfig(isLine);
+const updateChart = () => {
+  if (!chart || !kpiColumns.value.length) return;
+
+  const commonConfig = getSeriesConfig();
 
   const series = selectedKPIs.value.map(kpiId => {
     const kpi = kpiColumns.value.find(col=>col.kpiId ===kpiId);
@@ -295,13 +247,13 @@ const updateChart = () => {
 
     return {
       name: kpi.title,
-      type: chartType.value, // 使用当前选择的图表类型
-      data:chartData.value.map(item=>item[kpiId]||0),
+      type: 'line',
+      data: chartData.value.map(item=>item[kpiId]||0),
       itemStyle: { color },
       ...commonConfig,
     };
   }).filter(Boolean);
-  //图表配置对象
+
   const option = {
     title: {
       text: t('views.perfManage.kpiOverView.kpiChartTitle'),
@@ -320,16 +272,22 @@ const updateChart = () => {
       }
     },
     legend: {
-      //图例配置
-      data: selectedKPIs.value.map(kpiId=>kpiColumns.value.find(col=>col.kpiId===kpiId)?.title),
+      data: selectedKPIs.value.map(kpiId =>
+        kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId
+      ),
       type: 'scroll',
       orient: 'horizontal',
       top: 25,
       textStyle: {
         fontSize: 12,
       },
-      selected:Object.fromEntries(selectedKPIs.value.map(kpiId=>[kpiId,true])),
-      show: true,
+      selected: Object.fromEntries(
+        selectedKPIs.value.map(kpiId => [
+          kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId,
+          selectedRow.value ? kpiId === selectedRow.value : true
+        ])
+      ),
+      show: false,
       left: 'center',
       width: '80%',
       height: 50,
@@ -349,11 +307,11 @@ const updateChart = () => {
       //控制坐标轴两边留白
       // 当为折线图时(isLine为true)时不留白，柱状图时留白
       // 这样可以让折线图从原点开始，柱状图有合适的间距
-      boundaryGap: isLine,
+      boundaryGap: false,
       // 设置x轴的数据
       // 将时间戳转换为格式化的时间字符串
       data:chartData.value.map(item=>
-      dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
+        dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
       ),
       //设置坐标轴刻度标签的样式
     },
@@ -363,7 +321,7 @@ const updateChart = () => {
       axisLabel: {
         formatter: '{value}',
       },
-      // 添加自动计算的分割段数
+      // 添加自���计算的分割段数
       splitNumber: 5,
       // 添加自动计算的最小/最大值范围
       scale: true,
@@ -373,7 +331,7 @@ const updateChart = () => {
   if(chart) {
     requestAnimationFrame(() => {
       chart!.setOption(option, true); //使用新的配置更新图表
-      chart!.resize(); //调整图表大小以适应容器
+      chart!.resize(); //调整图表大小适应容器
     });
   }
   // 如果已经有 observer，先断开连接
@@ -399,7 +357,6 @@ const updateChart = () => {
 
 //钩子函数
 onMounted(async () => {
-  open.value=true;
   try {
     // 获取所有网元的指标
     await fetchSpecificKPI();
@@ -429,121 +386,37 @@ onMounted(async () => {
 // 存储指标列信
 const kpiColumns = ref<KPIColumn[]>([]);
 // 添加选中指标的的状态
-const selectedKPIs = ref<string[]>([]);
-// 添加对话框可见性状态
-const isModalVisible = ref(false);
-// 添加临时存储下拉框选择的数组
-const tempSelectedKPIs = ref<string[]>([]);
-
-// 添加一个变量保存打开对话框时的选择状态
-const originalSelectedKPIs = ref<string[]>([]);
-
-// 打开对话框的方法
-const showKPISelector = () => {
-
-  // 保存当前的选择状态
-  originalSelectedKPIs.value = [...selectedKPIs.value];
-
-  // 初始化临时选择为当前已选择的其他指标
-  const primaryKPIs = Object.values(TARGET_KPI_IDS).flat();
-  tempSelectedKPIs.value = selectedKPIs.value.filter(
-    kpiId => !primaryKPIs.includes(kpiId)
-  );
-  isModalVisible.value = true;
-};
-
-// 保存选中指标到 localStorage 的方法
-const saveSelectedKPIs = () => {
-  localStorage.setItem('selectedKPIs', JSON.stringify(selectedKPIs.value));
-};
-
-// 取消按钮的处理方法
-const handleModalCancel = () => {
-  // 恢复到打开对话框时的选择状态
-  selectedKPIs.value = [...originalSelectedKPIs.value];
-  // 清空临时选择
-  tempSelectedKPIs.value = [];
-  isModalVisible.value = false;
-};
-
-// 确认按钮的处理方法
-const handleModalOk = () => {
-
-  // 获取主要指标列表
-  const primaryKPIs = Object.values(TARGET_KPI_IDS).flat();
-
-  // 获取当前在主界面选中的主要指标
-  const selectedPrimaryKPIs = selectedKPIs.value.filter(kpiId =>
-    primaryKPIs.includes(kpiId)
-  );
-
-  // 合并选中的主要指标和临时选中的其他指标
-  selectedKPIs.value = Array.from(
-    new Set([
-      ...selectedPrimaryKPIs, // 只包含已选中的主要指标
-      ...tempSelectedKPIs.value, // 临时选中的其他指标
-    ])
-  );
-
-  // 清空临时选择和原始选择
-  tempSelectedKPIs.value = [];
-  originalSelectedKPIs.value = [];
-
-  // 保存选择并更新图表
-  saveSelectedKPIs();
-  updateChart();
-  isModalVisible.value = false;
-};
+const selectedKPIs = ref<string[]>(Object.values(TARGET_KPI_IDS).flat());
 
 // 获取网元指标
 const fetchSpecificKPI = async () => {
-  const language =
-    currentLocale.value.split('_')[0] === 'zh'
-      ? 'cn'
-      : currentLocale.value.split('_')[0];
+  const language = currentLocale.value.split('_')[0] === 'zh'
+    ? 'cn'
+    : currentLocale.value.split('_')[0];
 
   try {
     let allKPIs: KPIColumn[] = [];
 
-    // 1. 获取所有网元的全部指标
+    // 获取所有网元的指标
     for (const neType of ALL_NE_TYPES) {
       const res = await getKPITitle(neType.toUpperCase());
 
       if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        // 转换指标格式
         const formattedKPIs = res.data.map(item => ({
           title: item[`${language}Title`],
           dataIndex: item.kpiId,
           key: item.kpiId,
           kpiId: item.kpiId,
-          neType: neType, // 添加网元类型信息
+          neType: neType,
         }));
 
-        // 添加到所有指标数组
         allKPIs = [...allKPIs, ...formattedKPIs];
       }
     }
 
-    // 2. 更新所有指标到 kpiColumns
     kpiColumns.value = allKPIs;
-
-    // 3. 尝试加载保存的选择
-    const savedKPIs = localStorage.getItem('selectedKPIs');
-    if (savedKPIs) {
-      // 确保保存的选择仍然存在于当前指标中
-      const validSavedKPIs = JSON.parse(savedKPIs).filter((kpiId: string) =>
-        kpiColumns.value.some(col => col.kpiId === kpiId)
-      );
-      if (validSavedKPIs.length > 0) {
-        selectedKPIs.value = validSavedKPIs;
-      } else {
-        // 如果没有有效的保存选择，则默认选择其他指标
-        selectedKPIs.value = Object.values(TARGET_KPI_IDS).flat();
-      }
-    } else {
-      // 如果没有保存的选择，则默认选择重要指标
-      selectedKPIs.value = Object.values(TARGET_KPI_IDS).flat();
-    }
+    // 直接使用重要指标
+    selectedKPIs.value = Object.values(TARGET_KPI_IDS).flat();
 
     if (kpiColumns.value.length === 0) {
       console.warn('No KPIs found');
@@ -572,12 +445,8 @@ onUnmounted(() => {
     chart.dispose();
     chart = null;
   }
-  // 可选:在组件卸载时保存选择
-  saveSelectedKPIs();
 });
 
-const { t, currentLocale } = useI18n();
-
 // 更新图表数据方法
 const updateChartData = (newData: ChartDataItem) => {
   if(!chart){
@@ -600,7 +469,7 @@ const updateChartData = (newData: ChartDataItem) => {
         series: selectedKPIs.value.map(kpiId => {
           const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
           return {
-            type: chartType.value,
+            type: 'line',
             data: chartData.value.map(item => item[kpiId] || 0),
             name: kpi?.title || kpiId,
           };
@@ -614,66 +483,111 @@ const updateChartData = (newData: ChartDataItem) => {
 };
 
 
-// groupedKPIs 计算属性，使用 TARGET_KPI_IDS 来分组过滤
-const groupedKPIs = computed(() => {
-  const groups: Record<string, KPIColumn[]> = {};
+// 添加一个接口定义指标统计数据的类型
+interface KPIStats {
+  kpiId: string;
+  title: string;
+  max: number;
+  min: number;
+}
 
-  ALL_NE_TYPES.forEach(neType => {
-    // 使用 TARGET_KPI_IDS 中定义的指标 ID 来过滤
-    const targetIds = TARGET_KPI_IDS[neType];
-    groups[neType] = kpiColumns.value.filter(kpi =>
-      targetIds.includes(kpi.kpiId)
-    );
-  });
-  return groups;
+// 添加计算属性，用于计算每个指标的最大值和最小值
+const kpiStats = computed((): KPIStats[] => {
+  if (!chartData.value.length || !kpiColumns.value.length) return [];
+
+  return selectedKPIs.value.map(kpiId => {
+    // 找到对应的KPI标题
+    const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
+    if (!kpi) return null;
+
+    // 获取该指标的所有数值
+    const values = chartData.value.map(item => Number(item[kpiId]) || 0);
+
+    return {
+      kpiId: kpiId,
+      title: kpi.title,
+      max: Math.max(...values),
+      min: Math.min(...values)
+    };
+  }).filter((item): item is KPIStats => item !== null);
 });
 
-// 计算其他指标
-const secondaryKPIs = computed(() => {
-  const groups: Record<string, KPIColumn[]> = {};
-
-  if (kpiColumns.value.length === 0) {
-    console.warn('No KPI columns available');
-    return groups;
-  }
-
-  ALL_NE_TYPES.forEach(neType => {
-    // 获取当前网元类型的主要指标 ID
-    const primaryIds = TARGET_KPI_IDS[neType];
-    // 从所有指标中筛选出当前网元其他指标
-    groups[neType] = kpiColumns.value.filter(kpi => {
-      return kpi.neType === neType && !primaryIds.includes(kpi.kpiId);
-      // 检查是否不在主要指标列表中
-      // const isNotPrimary = !primaryIds.includes(kpi.kpiId);
-      //
-      // // 检查是否属于当前网元类型
-      // // 使用 getKPITitle API 返回的原始数据中的网元类型信息
-      // const isCurrentNeType = kpi.neType === neType;
-      //
-      // return isCurrentNeType && isNotPrimary;
-    });
-  });
-  return groups;
-});
-
-// 添加处理其他指标选择变化的方法
-const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
-  if (checked) {
-    // 如果选中，将指标 ID 添加到临时列表
-    if (!tempSelectedKPIs.value.includes(kpiId)) {
-      tempSelectedKPIs.value = [...tempSelectedKPIs.value, kpiId];
+// 添加表格列定义
+const statsColumns = [
+  {
+    title: '',
+    key: 'icon',
+    width: 50,
+    customRender: ({ record }: { record: KPIStats }) => {
+      return h(LineOutlined, {
+        style: {
+          color: kpiColors.get(record.kpiId) || '#000', // 使用与折线图相同的颜色
+          fontSize: '30px', // 增大图标尺寸到30px
+          fontWeight: 'bold', // 加粗
+        }
+      });
     }
-  } else {
-    // 如果取消选中，从临时列表中移除指标 ID
-    tempSelectedKPIs.value = tempSelectedKPIs.value.filter(id => id !== kpiId);
+  },
+  {
+    title: t('views.perfManage.kpiOverView.kpiName'),
+    dataIndex: 'title',
+    key: 'title',
+    width: '65%',
+  },
+  {
+    title: t('views.perfManage.kpiOverView.maxValue'),
+    dataIndex: 'max',
+    key: 'max',
+    width: '17%',
+  },
+  {
+    title: t('views.perfManage.kpiOverView.minValue'),
+    dataIndex: 'min',
+    key: 'min',
+    width: '17%',
   }
+];
+
+// 添加一个变量来跟踪当前选中的行
+const selectedRow = ref<string | null>(null);
+
+// 添加处理行点击的方法
+const handleRowClick = (record: KPIStats) => {
+  if (selectedRow.value === record.kpiId) {
+    // 如果点击的是当前选中的行，则取消选中
+    selectedRow.value = null;
+    // 更新图表，显示所有指标
+    updateChartLegendSelect();
+  } else {
+    // 选中新行
+    selectedRow.value = record.kpiId;
+    // 更新图表，只显示选中的指标
+    updateChartLegendSelect(record.kpiId);
+  }
+};
+
+// 添加更新表图例选中态的方法
+const updateChartLegendSelect = (selectedKpiId?: string) => {
+  if (!chart) return;
+
+  const legendSelected = Object.fromEntries(
+    selectedKPIs.value.map(kpiId => [
+      kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId,
+      selectedKpiId ? kpiId === selectedKpiId : true
+    ])
+  );
+
+  chart.setOption({
+    legend: {
+      selected: legendSelected
+    }
+  });
 };
 </script>
 <template>
   <div class="kpi-overview">
     <div class="controls">
       <a-range-picker
-        ref="ref1"
         v-model:value="dateRange"
         :show-time="{ format: 'HH:mm:ss' }"
         format="YYYY-MM-DD HH:mm:ss"
@@ -681,23 +595,6 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
         :disabled="isRealtime"
         @change="handleDateChange"
       />
-      <a-button ref="ref2" @click="showKPISelector">
-        <template #icon>
-          <unordered-list-outlined />
-        </template>
-        {{ t('views.perfManage.kpiOverView.chooseMetrics') }}
-      </a-button>
-      <a-button ref="ref3" @click="toggleChartType">
-        <template #icon>
-          <bar-chart-outlined v-if="chartType === 'line'" />
-          <line-chart-outlined v-else />
-        </template>
-        {{
-          chartType === 'line'
-            ? t('views.perfManage.kpiOverView.changeBar')
-            : t('views.perfManage.kpiOverView.changeLine')
-        }}
-      </a-button>
       <a-form-item
         :label="
           isRealtime
@@ -705,79 +602,25 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
             : t('views.dashboard.cdr.realTimeDataStart')
         "
       >
-        <a-switch ref="ref4" v-model:checked="isRealtime" @change="toggleRealtime" />
+        <a-switch v-model:checked="isRealtime" @change="toggleRealtime" />
       </a-form-item>
-      <a-tour :open="open" :steps="steps" @close="handleOpen(false)">
-        <template #indicatorsRender="{ current, total }">
-          <span>{{ current + 1 }} / {{ total }}</span>
-        </template>
-      </a-tour>
     </div>
-    <div id="chartContainer" class="chart-container"></div>
-    <a-modal
-      v-model:visible="isModalVisible"
-      :title="t('views.perfManage.kpiOverView.chooseShowMetrics')"
-      @ok="handleModalOk"
-      @cancel="handleModalCancel"
-      width="800px"
-      :bodyStyle="{ maxHeight: '600px', overflow: 'auto' }"
-    >
-      <a-checkbox-group v-model:value="selectedKPIs" >
-        <div class="kpi-checkbox-list">
-          <a-card
-            v-for="neType in ALL_NE_TYPES"
-            :key="neType"
-            class="ne-type-card"
-            :bordered="false"
-          >
-            {{neType.toUpperCase()}}
-            <template #title>
-              <span class="card-title">{{ neType.toUpperCase() }}</span>
-            </template>
-            <template #extra>
-              <a-dropdown v-if="secondaryKPIs[neType]?.length" :trigger="['click']">
-                <template #overlay>
-                  <div class="secondary-kpi-menu" @click.stop>
-                    <div class="secondary-kpi-list">
-                      <div
-                        v-for="kpi in secondaryKPIs[neType]"
-                        :key="kpi.kpiId"
-                        class="secondary-kpi-item"
-                        @click.stop
-                      >
-                        <a-checkbox
-                          :value="kpi.kpiId"
-                          :checked="tempSelectedKPIs.includes(kpi.kpiId)"
-                          @change="(e:any) => handleSecondaryKPIChange(kpi.kpiId, e.target.checked)"
-                          @click.stop
-                        >
-                          {{ kpi.title }}
-                        </a-checkbox>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-                <a-button type="link" size="small" class="more-metrics-btn" ref="ref6">
-                  <more-outlined />
-                  <span class="secondary-count">({{ secondaryKPIs[neType].length }})</span>
-                </a-button>
-              </a-dropdown>
-            </template>
-            <div class="ne-type-items">
-              <div
-                v-for="kpi in groupedKPIs[neType]"
-                :key="kpi.kpiId"
-                class="kpi-checkbox-item"
-              >
-                <a-checkbox :value="kpi.kpiId">
-                  {{ kpi.title }}
-                </a-checkbox>
-              </div>
-            </div>
-          </a-card>
-        </div>
-      </a-checkbox-group>
-    </a-modal>
+    <div class="chart-wrapper">
+      <div id="chartContainer" class="chart-container"></div>
+      <div class="table-container">
+        <a-table
+          :columns="statsColumns"
+          :data-source="kpiStats"
+          :pagination="false"
+          :scroll="{ y: 250 }"
+          size="small"
+          :custom-row="(record) => ({
+            onClick: () => handleRowClick(record),
+            class: record.kpiId === selectedRow ? 'selected-row' : ''
+          })"
+        />
+      </div>
+    </div>
   </div>
 </template>
 <style scoped>
@@ -792,102 +635,55 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
   align-items: center;
 }
 
-.chart-container {
-  height: calc(100vh - 210px);/*调整图表大小*/
-  width: 100%;
-}
-/* 网元指标列表样式 */
-.ne-type-items {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
+.chart-wrapper {
+  border-radius: 4px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
-.kpi-checkbox-item {
-  padding: 8px 12px;
-  border-radius: 4px;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* 其他指标下拉菜单样式 */
-.secondary-kpi-menu {
-  border-radius: 4px;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-  0 6px 16px 0 rgba(0, 0, 0, 0.08),
-  0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  min-width: 240px;
-  max-width: 320px;
-}
-[data-theme='light'] .secondary-kpi-menu {
+[data-theme='light'] .chart-wrapper {
   background: #fff;
 }
-[data-theme='dark'] .secondary-kpi-menu {
+
+[data-theme='dark'] .chart-wrapper {
   background: #1f1f1f;
 }
 
-.secondary-kpi-list {
-  max-height: 300px;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-
-.secondary-kpi-list::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.secondary-kpi-list::-webkit-scrollbar-thumb {
-  background: #fff;
-  border-radius: 3px;
-}
-
-.secondary-kpi-list::-webkit-scrollbar-track {
-  border-radius: 3px;
-}
-
-.secondary-kpi-item {
-  padding: 8px 12px;
-  transition: background-color 0.3s;
-  cursor: pointer;
-}
-
-.more-metrics-btn {
-  display: inline-flex;
-  align-items: center;
-  color: #1890ff;
-  transition: all 0.3s;
-}
-
-.more-metrics-btn:hover {
-  color: #40a9ff;
-  background: rgba(24, 144, 255, 0.1);
-}
-
-.secondary-count {
-  margin-left: 4px;
-  font-size: 12px;
-  padding: 2px 6px;
-  border-radius: 10px;
-}
-
-/* 优化复选框样式 */
-:deep(.ant-checkbox-wrapper) {
+.chart-container {
+  height: calc(100vh - 550px);
   width: 100%;
+}
+
+.table-container {
+  height: 282px;
+  width: 100%;
+  margin-top: 20px;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 4px 0;
+  display: flex;
+  flex-direction: column;
 }
 
-:deep(.ant-checkbox-wrapper:hover) {
-  color: #1890ff;
+/* 表格布局相关样式 */
+:deep(.ant-table-wrapper),
+:deep(.ant-table),
+:deep(.ant-table-container),
+:deep(.ant-table-content) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-:deep(.ant-checkbox-checked .ant-checkbox-inner) {
-  background-color: #1890ff;
-  border-color: #1890ff;
+:deep(.ant-table-body) {
+  flex: 1;
+  overflow-y: auto !important;
+  min-height: 0;
+}
+
+/* 表格行和表头样式 */
+:deep(.ant-table-thead  tr  th),
+:deep(.ant-table-tbody  tr  td) {
+  padding: 8px;
+  height: 40px;
 }
 
 /* 组件统一样式 */
@@ -903,10 +699,41 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
   align-items: center;
 }
 
-:deep(.ant-checkbox-wrapper) {
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* 美化滚动条样式 */
+:deep(.ant-table-body::-webkit-scrollbar) {
+  width: 6px;
+  height: 6px;
+}
+
+:deep(.ant-table-body::-webkit-scrollbar-thumb) {
+  background: #ccc;
+  border-radius: 3px;
+}
+
+:deep(.ant-table-body::-webkit-scrollbar-track) {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+[data-theme='dark'] :deep(.ant-table-body::-webkit-scrollbar-thumb) {
+  background: #4c4c4c;
+}
+
+[data-theme='dark'] :deep(.ant-table-body::-webkit-scrollbar-track) {
+  background: #2a2a2a;
+}
+
+/* 选中行样式 */
+:deep(.selected-row) {
+  background-color: rgba(24, 144, 255, 0.1);
+}
+
+[data-theme='dark'] :deep(.selected-row) {
+  background-color: rgba(24, 144, 255, 0.2);
+}
+
+/* 鼠标悬停样式 */
+:deep(.ant-table-tbody tr:hover) {
+  cursor: pointer;
 }
 </style>