From f6c3d730af912fe77cc12df4f25c5ddf25fa9105 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Fri, 10 Oct 2025 19:08:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=85=B3=E9=94=AE=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/kpiOverView/index.vue | 61 +++++++++++++++++-----
 1 file changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue
index a809f8fa..a7821c6e 100644
--- a/src/views/perfManage/kpiOverView/index.vue
+++ b/src/views/perfManage/kpiOverView/index.vue
@@ -1394,6 +1394,16 @@ const tableRowConfig = computed(() => {
     class: selectedRows.value.includes(record.kpiId) ? 'selected-row' : '',
   });
 });
+
+// 动态计算表格滚动配置
+const tableScrollConfig = computed(() => {
+  // 当图表折叠时，不设置固定高度，让表格完整显示
+  if (!isChartVisible.value) {
+    return undefined;
+  }
+  // 当图表展开时，设置固定高度并启用滚动
+  return { y: 250 };
+});
 </script>
 <template>
   <div class="kpi-overview">
@@ -1417,16 +1427,16 @@ const tableRowConfig = computed(() => {
       >
         <a-switch v-model:checked="isRealtime" @change="toggleRealtime" />
       </a-form-item>
-<!--      <a-button-->
-<!--        type="primary"-->
-<!--        @click="toggleChartVisibility"-->
-<!--        class="chart-toggle-btn"-->
-<!--        :title="isChartVisible ? 'hide' : 'show'"-->
-<!--      >-->
-<!--        <DownOutlined v-if="isChartVisible"  />-->
-<!--        <UpOutlined v-else />-->
-<!--        <span style="margin-left: 4px;">{{ isChartVisible ? 'Foldable the chart' : 'Expand the chart' }}</span>-->
-<!--      </a-button>-->
+      <!--      <a-button-->
+      <!--        type="primary"-->
+      <!--        @click="toggleChartVisibility"-->
+      <!--        class="chart-toggle-btn"-->
+      <!--        :title="isChartVisible ? 'hide' : 'show'"-->
+      <!--      >-->
+      <!--        <DownOutlined v-if="isChartVisible"  />-->
+      <!--        <UpOutlined v-else />-->
+      <!--        <span style="margin-left: 4px;">{{ isChartVisible ? 'Foldable the chart' : 'Expand the chart' }}</span>-->
+      <!--      </a-button>-->
     </div>
     <div class="chart-wrapper">
       <a-button
@@ -1449,7 +1459,7 @@ const tableRowConfig = computed(() => {
           :columns="statsColumns"
           :data-source="kpiStats"
           :pagination="false"
-          :scroll="{ y: 250 }"
+          :scroll="tableScrollConfig"
           size="small"
           :loading="tableLoading"
           :custom-row="tableRowConfig"
@@ -1502,10 +1512,35 @@ const tableRowConfig = computed(() => {
   flex-direction: column;
 }
 
-/* 图表隐藏时，表格容器的高度调整 */
+/* 图表隐藏时，表格容器的高度调整为自动，完整显示所有内容 */
 .chart-wrapper:has(.chart-container[style*="display: none"]) .table-container {
-  height: 500px;
+  height: auto;
   margin-top: 0;
+  overflow: visible;
+  min-height: auto;
+  max-height: none;
+}
+
+/* 图表隐藏时，禁用所有表格层级的滚动，完整显示内容 */
+.chart-wrapper:has(.chart-container[style*="display: none"]) :deep(.ant-table-wrapper),
+.chart-wrapper:has(.chart-container[style*="display: none"]) :deep(.ant-table),
+.chart-wrapper:has(.chart-container[style*="display: none"]) :deep(.ant-table-container),
+.chart-wrapper:has(.chart-container[style*="display: none"]) :deep(.ant-table-content) {
+  overflow: visible !important;
+  flex: none;
+  display: block;
+  height: auto !important;
+  min-height: auto !important;
+  max-height: none !important;
+}
+
+.chart-wrapper:has(.chart-container[style*="display: none"]) :deep(.ant-table-body) {
+  overflow-y: visible !important;
+  overflow-x: visible !important;
+  max-height: none !important;
+  min-height: auto !important;
+  height: auto !important;
+  flex: none;
 }
 
 /* 表格布局相关样式 */