feat:kpi图表隐藏按钮添加

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, InfoCircleOutlined } from '@ant-design/icons-vue';
+import { LineOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
 import { useRoute } from 'vue-router';
 import dayjs, { Dayjs } from 'dayjs';
 import useLayoutStore from '@/store/modules/layout';
@@ -243,6 +243,9 @@ const kpiStats: any = ref([]);
 // 统计表格loading状态
 const statsTableLoading = ref(false);
 
+/**图表显示状态 */
+const isChartVisible = ref(true);
+
 // 添加一个函数来获取当前主题下的网格线颜色
 function getSplitLineColor() {
   return document.documentElement.getAttribute('data-theme') === 'dark'
@@ -653,6 +656,17 @@ function fnChangShowType() {
   tableState.showTable = !tableState.showTable;
 }
 
+/**切换图表显示状态 */
+function toggleChartVisibility() {
+  isChartVisible.value = !isChartVisible.value;
+  // 当图表重新显示时，需要重新调整大小
+  if (isChartVisible.value && kpiChart.value) {
+    nextTick(() => {
+      kpiChart.value?.resize();
+    });
+  }
+}
+
 /**绘制图表 */
 function fnRanderChart() {
   const container: HTMLElement | undefined = kpiChartDom.value;
@@ -1278,6 +1292,17 @@ onBeforeUnmount(() => {
               size="small"
             />
           </a-form-item>
+          <a-button
+            v-show="!tableState.showTable"
+            type="link"
+            ghost
+            @click="toggleChartVisibility"
+            class="chart-toggle-btn"
+            :title="isChartVisible ? 'hide' : 'show'"
+          >
+            <EyeOutlined v-if="isChartVisible" />
+            <EyeInvisibleOutlined v-else />
+          </a-button>
         </a-form>
       </template>
 
@@ -1304,6 +1329,7 @@ onBeforeUnmount(() => {
           ref="kpiChartDom"
           class="chart-container"
           style="height: 450px; width: 100%"
+          :style="{ display: isChartVisible ? 'block' : 'none' }"
         ></div>
 
         <div class="table-container">
@@ -1343,6 +1369,12 @@ onBeforeUnmount(() => {
   flex-direction: column;
 }
 
+/* 图表隐藏时，表格容器的高度调整 */
+.chart-container[style*="display: none"] + .table-container {
+  height: 500px;
+  margin-top: 0;
+}
+
 /* 表格布局相关样式 */
 :deep(.ant-table-wrapper),
 :deep(.ant-table),
@@ -1403,4 +1435,9 @@ onBeforeUnmount(() => {
 :deep(.ant-table-tbody tr:hover) {
   cursor: pointer;
 }
+
+/* 图表切换按钮样式 */
+.chart-toggle-btn {
+  margin-left: 8px;
+}
 </style>