Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整污染值分页控件

Browse Source
This commit is contained in:
sjl
2025-09-11 14:32:50 +08:00
parent c520761c0e
commit 47adb54dee
1 changed files with 79 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/views/pqs/harmonicMonitoring/detailed/pollutionReport/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="default-main full-height">
<div class="default-main">
<TableHeader datePicker ref="TableHeaderRef">
<template #select>
@@ -64,8 +64,7 @@
</template>
</TableHeader>
<div v-loading="tableStore.table.loading" class="table-container">
<div v-loading="tableStore.table.loading" class="main-container">
<vxe-table
class="full-height-table"
ref="positioningtableRef"
@@ -78,15 +77,15 @@
>
<vxe-column title="序号" width="80" type="seq" align="center"></vxe-column>
<vxe-column field="gdName" title="供电公司" align="center" min-width="120"></vxe-column>
<vxe-column field="subStationName" :show-overflow="true" title="变电站" align="center" min-width="150" width="230"></vxe-column>
<vxe-column field="subStationName" :show-overflow="true" title="变电站" align="center" min-width="150" ></vxe-column>
<vxe-column field="devName" title="终端名称" align="center" min-width="120"></vxe-column>
<vxe-column field="devType" title="终端型号" align="center" min-width="150" width="200"></vxe-column>
<vxe-column field="devType" title="终端型号" align="center" min-width="150" ></vxe-column>
<vxe-column field="loginTime" title="投运时间" align="center" min-width="120"></vxe-column>
<vxe-column field="lineName" title="监测点名称" align="center" min-width="150"></vxe-column>
<vxe-column field="powerFlag" title="监测位置" align="center" min-width="100"></vxe-column>
<vxe-column field="lineVoltage" title="监测点电压等级" align="center" min-width="120"></vxe-column>
<vxe-column field="loadType" title="干扰源类型" align="center" min-width="120"></vxe-column>
<vxe-column field="objName" title="监测对象名称" align="center" min-width="150" width="200"></vxe-column>
<vxe-column field="objName" title="监测对象名称" align="center" min-width="150"></vxe-column>
<vxe-column field="onlineRate" title="在线率" align="center" min-width="100"></vxe-column>
<vxe-column field="integrity" title="完整率" align="center" min-width="100"></vxe-column>
<vxe-column field="harmonicValue" :title="harmonicValueTitle" align="center" min-width="120"></vxe-column>
@@ -95,6 +94,7 @@
<vxe-column field="breakCounts" title="短时中断(次)" align="center" min-width="100"></vxe-column>
<vxe-column field="monitorId" title="一类监测点" align="center" min-width="120" :formatter="formatMonitorId"></vxe-column>
</vxe-table>
</div>
<!-- 修改分页控件 -->
<div class="pagination-container">
<el-pagination
@@ -109,7 +109,6 @@
></el-pagination>
</div>
</div>
</div>
</template>
<script setup lang="ts">
@@ -165,13 +164,13 @@ const localFilters = reactive({
})
// 计算表格高度
const calculateTableHeight = () => {
const windowHeight = window.innerHeight
const headerHeight = 120
const paginationHeight = 50
const padding = 20
tableHeight.value = windowHeight - headerHeight - paginationHeight - padding
const paginationHeight = 80 // 增加分页控件高度预留
const padding = 30 // 增加padding避免被遮挡
const calculatedHeight = windowHeight - headerHeight - paginationHeight - padding
tableHeight.value = Math.max(calculatedHeight, 300)
}
// 防抖处理窗口大小变化
@@ -384,9 +383,8 @@ onBeforeUnmount(() => {
</script>
<style scoped lang="scss">
.full-height {
/* 使用视口高度确保占满整个屏幕 */
height: 91vh;
.default-main {
height: calc(100vh - 20px); /* 减去一些边距避免被任务栏遮挡 */
display: flex;
flex-direction: column;
}
@@ -395,48 +393,55 @@ onBeforeUnmount(() => {
flex: 1;
display: flex;
flex-direction: column;
/* 关键：隐藏容器的滚动条 */
overflow: hidden;
position: relative;
}
.full-height-table {
flex: 1;
/* 关键：只允许表格内容滚动 */
overflow: hidden;
}
:deep .vxe-table {
/* 确保表格组件本身可以滚动 */
height: 100% !important;
overflow: hidden !important;
}
:deep .vxe-table--body-wrapper {
/* 关键：确保表格主体可以滚动 */
overflow: auto !important;
}
.pagination-container {
flex: 0 0 auto; /* 不伸缩，保持固定高度 */
display: flex;
justify-content: space-between; /* 左右分布 */
justify-content: center; /* 居中对齐 */
align-items: center;
min-height: 60px; /* 使用最小高度而不是固定高度 */
padding: 10px 20px; /* 增加左右内边距 */
min-height: 60px;
padding: 10px 20px;
background-color: #fff;
border-top: 1px solid #ebeef5;
z-index: 100; /* 提高层级确保可见 */
position: relative; /* 确保定位上下文 */
width: 100%;
margin-bottom: 20px;
}
:deep .el-pagination {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: 100%; /* 占满容器宽度 */
width: 100%;
.el-pagination__sizes {
.el-select {
min-width: 128px;
min-width: 100px;
margin-right: 10px;
}
}
.el-pagination__total {
margin-right: 10px;
margin-right: auto; /* 关键：将总共条数推到左侧 */
white-space: nowrap;
}
/* 将除了 sizes 和 total 之外的所有元素都推到最右边 */
@@ -447,7 +452,6 @@ onBeforeUnmount(() => {
margin-left: auto;
}
/* 确保这些元素之间有适当的间距 */
.btn-prev {
margin-right: 5px;
}
@@ -459,5 +463,54 @@ onBeforeUnmount(() => {
.el-pagination__jump {
margin-left: 10px;
}
.el-pagination__editor {
width: 50px;
margin: 0 5px;
}
}
/* 响应式处理 */
@media screen and (max-width: 768px) {
.pagination-container {
padding: 8px 10px;
min-height: 50px;
}
:deep .el-pagination {
.el-pagination__sizes {
.el-select {
min-width: 80px;
}
}
.el-pagination__total {
font-size: 12px;
}
.el-pagination__jump {
font-size: 12px;
}
}
}
@media screen and (max-width: 480px) {
:deep .el-pagination {
.el-pagination__sizes {
display: none;
}
.el-pagination__total {
display: none;
}
.btn-pager {
display: none;
}
.el-pagination__jump {
display: none;
}
}
}
</style>