调整污染值分页控件

src/views/pqs/harmonicMonitoring/detailed/pollutionReport/index.vue

@@ -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,7 +94,8 @@
             <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
                     :current-page="tableStore.table.params.pageNum"
@@ -108,7 +108,6 @@
                     @current-change="handleCurrentChange"
                 ></el-pagination>
             </div>
-        </div>
     </div>
 </template>
 
@@ -165,13 +164,13 @@ const localFilters = reactive({
 })
 
 
-// 计算表格高度
 const calculateTableHeight = () => {
     const windowHeight = window.innerHeight
     const headerHeight = 120
-    const paginationHeight = 50
+    const paginationHeight = 80  // 增加分页控件高度预留
-    const padding = 20
+    const padding = 30          // 增加padding避免被遮挡
-    tableHeight.value = windowHeight - headerHeight - paginationHeight - 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 {
+.default-main {
-    /* 使用视口高度确保占满整个屏幕 */
+    height: calc(100vh - 20px); /* 减去一些边距避免被任务栏遮挡 */
-    height: 91vh;
     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; /* 使用最小高度而不是固定高度 */
+    min-height: 60px;
-    padding: 10px 20px; /* 增加左右内边距 */
+    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>