feat:kpi图表隐藏按钮添加

2025-09-08 17:04:18 +08:00
parent 4403b06416
commit 89c2a61737
3 changed files with 116 additions and 4 deletions
--- a/src/views/perfManage/goldTarget/index.vue
+++ b/src/views/perfManage/goldTarget/index.vue
@@ -43,7 +43,7 @@ import saveAs from 'file-saver';
 import { generateColorRGBA } from '@/utils/generate-utils';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { useRoute } from 'vue-router';
-import { LineOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
+import { LineOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
 import useLayoutStore from '@/store/modules/layout';
 import { SelectValue } from 'ant-design-vue/es/select';
 import type { DefaultOptionType } from 'ant-design-vue/es/select';
@@ -185,6 +185,9 @@ let tableState: TabeStateType = reactive({
 /**统计表格loading状态 */
 const statsTableLoading = ref(false);

+/**图表显示状态 */
+const isChartVisible = ref(true);
+
 /**表格紧凑型变更操作 */
 function fnTableSize({ key }: MenuInfo) {
  tableState.size = key as SizeType;
@@ -1016,6 +1019,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; //获取图表容器DOM元素
@@ -1749,6 +1763,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>

@@ -1780,6 +1805,7 @@ onBeforeUnmount(() => {
          ref="kpiChartDom"
          class="chart-container"
          style="height: 450px; width: 100%"
+          :style="{ display: isChartVisible ? 'block' : 'none' }"
        ></div>

        <div class="table-container">
@@ -1882,6 +1908,12 @@ onBeforeUnmount(() => {
  flex-direction: column;
 }

+/* 图表隐藏时，表格容器的高度调整 */
+.chart-container[style*="display: none"] + .table-container {
+  height: 500px;
+  margin-top: 0;
+}
+
 /* 表格布局相关样式 */
 :deep(.ant-table-wrapper),
 :deep(.ant-table),
@@ -1942,4 +1974,9 @@ onBeforeUnmount(() => {
 :deep(.ant-table-tbody tr:hover) {
  cursor: pointer;
 }
+
+/* 图表切换按钮样式 */
+.chart-toggle-btn {
+  margin-left: 8px;
+}
 </style>
--- a/src/views/perfManage/kpiCReport/index.vue
+++ b/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>
--- a/src/views/perfManage/kpiOverView/index.vue
+++ b/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>