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;
+}