From 89c2a617376ac66f71e40c97cd4653d3c04b66de Mon Sep 17 00:00:00 2001 From: zhongzm Date: Mon, 8 Sep 2025 17:04:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:kpi=E5=9B=BE=E8=A1=A8=E9=9A=90=E8=97=8F?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=B7=BB=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/perfManage/goldTarget/index.vue | 39 +++++++++++++++++++- src/views/perfManage/kpiCReport/index.vue | 39 +++++++++++++++++++- src/views/perfManage/kpiOverView/index.vue | 42 ++++++++++++++++++++-- 3 files changed, 116 insertions(+), 4 deletions(-) diff --git a/src/views/perfManage/goldTarget/index.vue b/src/views/perfManage/goldTarget/index.vue index c2af2037..1c842ae8 100644 --- 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" /> + + + + @@ -1780,6 +1805,7 @@ onBeforeUnmount(() => { ref="kpiChartDom" class="chart-container" style="height: 450px; width: 100%" + :style="{ display: isChartVisible ? 'block' : 'none' }" >
@@ -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; +} diff --git a/src/views/perfManage/kpiCReport/index.vue b/src/views/perfManage/kpiCReport/index.vue index a245df33..0ace87d1 100644 --- 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" /> + + + + @@ -1304,6 +1329,7 @@ onBeforeUnmount(() => { ref="kpiChartDom" class="chart-container" style="height: 450px; width: 100%" + :style="{ display: isChartVisible ? 'block' : 'none' }" >
@@ -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; +} diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue index 7e189e56..ba746e8a 100644 --- 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([]); @@ -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 = { AMF: ['AMF.02', 'AMF.03'], @@ -1168,9 +1181,23 @@ 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; +}