feat:kpi图表隐藏按钮添加

src/views/perfManage/kpiOverView/index.vue

@@ -22,7 +22,7 @@ import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { generateColorRGBA } from '@/utils/generate-utils';
-import { LineOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
+import { LineOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
 import { TableColumnType } from 'ant-design-vue';
 import useNeInfoStore from '@/store/modules/neinfo';
 const { t, currentLocale } = useI18n();
@@ -109,6 +109,8 @@ const dateRange = ref<[string, string]>([
 ]);
 //实时数据状态
 const isRealtime = ref(false);
+//图表显示状态
+const isChartVisible = ref(true);
 //图表数据响应式数组
 const chartData = ref<ChartDataItem[]>([]);
 
@@ -140,6 +142,17 @@ const toggleRealtime = () => {
   fnRealTimeSwitch(isRealtime.value);
 };
 
+//切换图表显示状态
+const toggleChartVisibility = () => {
+  isChartVisible.value = !isChartVisible.value;
+  // 当图表重新显示时，需要重新调整大小
+  if (isChartVisible.value && chart) {
+    nextTick(() => {
+      chart?.resize();
+    });
+  }
+};
+
 // 定义要筛选的指标 ID，按网元类型组织
 const TARGET_KPI_IDS: Record<NeType, string[]> = {
   AMF: ['AMF.02', 'AMF.03'],
@@ -1168,9 +1181,23 @@ const tableRowConfig = computed(() => {
       >
         <a-switch v-model:checked="isRealtime" @change="toggleRealtime" />
       </a-form-item>
+      <a-button
+        type="link"
+        ghost
+        @click="toggleChartVisibility"
+        class="chart-toggle-btn"
+        :title="isChartVisible ? 'hide' : 'show'"
+      >
+        <EyeOutlined v-if="isChartVisible"  />
+        <EyeInvisibleOutlined v-else />
+      </a-button>
     </div>
     <div class="chart-wrapper">
-      <div id="chartContainer" class="chart-container"></div>
+      <div
+        id="chartContainer"
+        class="chart-container"
+        :style="{ display: isChartVisible ? 'block' : 'none' }"
+      ></div>
       <div class="table-container">
         <a-table
           :columns="statsColumns"
@@ -1229,6 +1256,12 @@ const tableRowConfig = computed(() => {
   flex-direction: column;
 }
 
+/* 图表隐藏时，表格容器的高度调整 */
+.chart-wrapper:has(.chart-container[style*="display: none"]) .table-container {
+  height: 500px;
+  margin-top: 0;
+}
+
 /* 表格布局相关样式 */
 :deep(.ant-table-wrapper),
 :deep(.ant-table),
@@ -1309,4 +1342,9 @@ const tableRowConfig = computed(() => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* 图表切换按钮样式 */
+.chart-toggle-btn {
+  margin-left: 8px;
+}
 </style>