feat:黄金指标折叠优化

This commit is contained in:
zhongzm
2025-10-10 19:08:14 +08:00
parent c85b588719
commit 22cab89749

View File

@@ -24,6 +24,7 @@ import {
onBeforeUnmount,
h,
watch,
computed
} from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, TableColumnType } from 'ant-design-vue/es';
@@ -1073,6 +1074,16 @@ function toggleChartVisibility() {
}
}
// 动态计算表格滚动配置
const tableScrollConfig = computed(() => {
// 当图表折叠时,不设置固定高度,让表格完整显示
if (!isChartVisible.value) {
return undefined;
}
// 当图表展开时,设置固定高度并启用滚动
return { y: 250 };
});
/**绘制图表 */
function fnRanderChart() {
const container: HTMLElement | undefined = kpiChartDom.value; //获取图表容器DOM元素
@@ -1918,7 +1929,7 @@ onBeforeUnmount(() => {
:columns="statsColumns"
:data-source="kpiStats"
:pagination="false"
:scroll="{ y: 250 }"
:scroll="tableScrollConfig"
size="small"
:loading="statsTableLoading"
:custom-row="
@@ -2013,10 +2024,35 @@ onBeforeUnmount(() => {
flex-direction: column;
}
/* 图表隐藏时,表格容器的高度调整 */
/* 图表隐藏时,表格容器的高度调整为自动,完整显示所有内容 */
.chart-container[style*="display: none"] + .table-container {
height: 500px;
height: auto;
margin-top: 0;
overflow: visible;
min-height: auto;
max-height: none;
}
/* 图表隐藏时,禁用所有表格层级的滚动,完整显示内容 */
.chart-container[style*="display: none"] + .table-container :deep(.ant-table-wrapper),
.chart-container[style*="display: none"] + .table-container :deep(.ant-table),
.chart-container[style*="display: none"] + .table-container :deep(.ant-table-container),
.chart-container[style*="display: none"] + .table-container :deep(.ant-table-content) {
overflow: visible !important;
flex: none;
display: block;
height: auto !important;
min-height: auto !important;
max-height: none !important;
}
.chart-container[style*="display: none"] + .table-container :deep(.ant-table-body) {
overflow-y: visible !important;
overflow-x: visible !important;
max-height: none !important;
min-height: auto !important;
height: auto !important;
flex: none;
}
/* 表格布局相关样式 */