feat:自定义指标折叠优化
This commit is contained in:
@@ -24,6 +24,7 @@ import {
|
|||||||
onBeforeUnmount,
|
onBeforeUnmount,
|
||||||
h,
|
h,
|
||||||
watch,
|
watch,
|
||||||
|
computed
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
import { PageContainer } from 'antdv-pro-layout';
|
import { PageContainer } from 'antdv-pro-layout';
|
||||||
import { message, Modal, TableColumnType } from 'ant-design-vue/es';
|
import { message, Modal, TableColumnType } from 'ant-design-vue/es';
|
||||||
@@ -667,6 +668,16 @@ function toggleChartVisibility() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 动态计算表格滚动配置
|
||||||
|
const tableScrollConfig = computed(() => {
|
||||||
|
// 当图表折叠时,不设置固定高度,让表格完整显示
|
||||||
|
if (!isChartVisible.value) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
// 当图表展开时,设置固定高度并启用滚动
|
||||||
|
return { y: 250 };
|
||||||
|
});
|
||||||
|
|
||||||
/**绘制图表 */
|
/**绘制图表 */
|
||||||
function fnRanderChart() {
|
function fnRanderChart() {
|
||||||
const container: HTMLElement | undefined = kpiChartDom.value;
|
const container: HTMLElement | undefined = kpiChartDom.value;
|
||||||
@@ -1337,7 +1348,7 @@ onBeforeUnmount(() => {
|
|||||||
:columns="statsColumns"
|
:columns="statsColumns"
|
||||||
:data-source="kpiStats"
|
:data-source="kpiStats"
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
:scroll="{ y: 250 }"
|
:scroll="tableScrollConfig"
|
||||||
size="small"
|
size="small"
|
||||||
:loading="statsTableLoading"
|
:loading="statsTableLoading"
|
||||||
:custom-row="(record:any) => ({
|
:custom-row="(record:any) => ({
|
||||||
@@ -1369,10 +1380,35 @@ onBeforeUnmount(() => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 图表隐藏时,表格容器的高度调整 */
|
/* 图表隐藏时,表格容器的高度调整为自动,完整显示所有内容 */
|
||||||
.chart-container[style*="display: none"] + .table-container {
|
.chart-container[style*="display: none"] + .table-container {
|
||||||
height: 500px;
|
height: auto;
|
||||||
margin-top: 0;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 表格布局相关样式 */
|
/* 表格布局相关样式 */
|
||||||
|
|||||||
Reference in New Issue
Block a user