Forráskód Böngészése

机房表格适配调整

zhulizhen1111 4 éve
szülő
commit
23ffe01747

+ 62 - 39
src/views/room/index.vue

@@ -75,6 +75,7 @@
                             ></el-input>
                         </div>
                         <room-table2
+                            ref='roomTable2'
                             v-if='table2.length>=0'
                             :table2='table2'
                             :loading='loading1'
@@ -128,6 +129,7 @@
                             ></el-input>
                         </div>
                         <room-table3
+                            ref='roomTable3'
                             v-if='table3.length>=0'
                             :table3='table3'
                             :systemName='systemName'
@@ -252,6 +254,7 @@
                             </div>
                         </div>
                         <room-table4
+                            ref='roomTable4'
                             v-if='table4.length>=0'
                             :table4='table4'
                             :loading='loading3'
@@ -407,6 +410,7 @@
                             </div>
                         </div>
                         <room-table5
+                            ref='roomTable5'
                             v-if='table5.length>=0'
                             :table5='table5'
                             :loading='loading4'
@@ -532,13 +536,17 @@ export default {
                 this.Index(this.smsxtArr.smsxt)
             } else if (tab.label == '配电室低压柜及出线明细表') {
                 this.Index1()
+                this.$refs.roomTable2.computedHeight()
             } else if (tab.label == '机房内核心设备') {
                 this.Index2()
+                this.$refs.roomTable3.computedHeight()
             } else if (tab.label == '维修记录') {
                 this.Index3()
+                this.$refs.roomTable4.computedHeight()
             } else if (tab.label == '维保记录') {
                 this.Index4()
                 this.changeSelect()
+                this.$refs.roomTable5.computedHeight()
             }
         },
         // 右上角的筛选点击按钮
@@ -990,8 +998,8 @@ export default {
         }
     }
     .compute-tab {
-        margin-top: 16px;
-        padding: 0 24px;
+        padding-top: 16px;
+        height: 100%;
     }
 }
 </style>
@@ -1004,6 +1012,13 @@ export default {
     .el-dialog__headerbtn .el-dialog__close {
         color: #fff;
     }
+    /deep/ .el-dialog__body {
+        padding: 0 24px;
+        height: calc(100% - 57px);
+        .is-active {
+            background: rgba(2, 91, 170, 0.15);
+        }
+    }
     .compute-tab {
         /deep/ .el-dialog {
             // padding: 16px 20px 20px;
@@ -1023,12 +1038,6 @@ export default {
             .el-dialog__headerbtn {
                 top: 0;
             }
-            .el-dialog__body {
-                padding: 0 24px;
-                .is-active {
-                    background: rgba(2, 91, 170, 0.15);
-                }
-            }
         }
 
         .el-dialog__title {
@@ -1072,9 +1081,20 @@ export default {
         /deep/ .el-tabs__item:nth-child(2) {
             border-radius: 4px 0px 0px 4px;
         }
-        .el-tabs,
+        .el-tabs {
+            height: 100%;
+        }
         .el-tabs__content {
-            height: 800px;
+            height: calc(100% - 45px);
+            /deep/ .el-tab-pane {
+                height: 100% !important;
+                .compute-item {
+                    height: calc(100% - 44px);
+                    .compute-table {
+                        height: calc(100% - 71px);
+                    }
+                }
+            }
         }
         .el-tabs__active-bar {
             background-color: transparent !important;
@@ -1162,37 +1182,40 @@ export default {
     }
 }
 // compute-tab 1366px适配
-@media screen and (max-width: 1366px) {
-    // 表格高度设置
-    .compute-tab {
-        .el-tabs,
-        .el-tabs__content {
-            height: 470px !important;
-        }
-        // 机房内核心设备 padding设置
-        #pane-3 {
-            .compute-table .el-table td,
-            .compute-box .compute-table .el-table th {
-                padding: 3px 0 !important;
-            }
-        }
-        // 维修记录,维保记录 padding设置
-        #pane-4,
-        #pane-5 {
-            .compute-table .el-table td,
-            .compute-box .compute-table .el-table th {
-                padding: 0 !important;
-            }
-        }
-    }
-}
+// @media screen and (max-width: 1366px) {
+//     // 表格高度设置
+//     .compute-tab {
+//         .el-tabs,
+//         .el-tabs__content {
+//             height: 470px !important;
+//         }
+//         // 机房内核心设备 padding设置
+//         #pane-3 {
+//             .compute-table .el-table td,
+//             .compute-box .compute-table .el-table th {
+//                 padding: 3px 0 !important;
+//             }
+//         }
+//         // 维修记录,维保记录 padding设置
+//         #pane-4,
+//         #pane-5 {
+//             .compute-table .el-table td,
+//             .compute-box .compute-table .el-table th {
+//                 padding: 0 !important;
+//             }
+//         }
+//     }
+// }
 @media screen and (max-width: 1600px) {
     // 表格高度设置
-    .compute-tab {
-        .el-tabs,
-        .el-tabs__content {
-            height: 600px !important;
-        }
+    // .compute-tab {
+    //     .el-tabs,
+    //     .el-tabs__content {
+    //         height: 600px !important;
+    //     }
+    // }
+    .compute-box .compute-tab .compute-table .el-table td {
+        padding: 4px 0;
     }
 }
 </style>

+ 16 - 3
src/views/room/room2.vue

@@ -1,10 +1,11 @@
 <template>
     <div class='compute-item'>
-        <div class='compute-table'>
+        <div ref='tableBox2' class='compute-table'>
             <el-table
                 :border='true'
                 v-if='table2.length>=0'
                 v-loading='loading'
+                :max-height='tableMaxHeight'
                 :data='table2'
                 style='width: 100%'
                 :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
@@ -60,7 +61,8 @@ export default {
                 { id: 'test3', name: '下级分项' },
                 { id: 'test4', name: '滑动平均滑动平均' }
             ],
-            searVal: ''
+            searVal: '',
+            tableMaxHeight: 0
         }
     },
     computed: {
@@ -73,9 +75,20 @@ export default {
         },
         pageChanged(page) {
             this.$emit('Index1Emit', page)
+        },
+        computedHeight() {
+            this.$nextTick(() => {
+                // 页面渲染完成后的回调
+                this.tableMaxHeight = this.$refs.tableBox2.offsetHeight
+            })
         }
     },
-    mounted() {}
+    updated() {
+        this.$nextTick(() => {
+            // 页面渲染完成后的回调
+            this.tableMaxHeight = this.$refs.tableBox2.offsetHeight
+        })
+    }
 }
 </script>
 <style lang="less" scoped>

+ 16 - 3
src/views/room/room3.vue

@@ -1,10 +1,11 @@
 <template>
     <div class='compute-item'>
-        <div class='compute-table'>
+        <div ref='tableBox3' class='compute-table'>
             <el-table
                 :border='true'
                 @row-click='innerTable'
                 v-loading='loading'
+                :max-height='tableMaxHeight'
                 :data='table3'
                 style='width: 100%'
                 :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
@@ -57,7 +58,8 @@ export default {
     data() {
         return {
             innerVisible: false,
-            row: {}
+            row: {},
+            tableMaxHeight: 0
         }
     },
 
@@ -76,9 +78,20 @@ export default {
             console.log(row)
             this.row = row
             this.innerVisible = true
+        },
+        computedHeight() {
+            this.$nextTick(() => {
+                // 页面渲染完成后的回调
+                this.tableMaxHeight = this.$refs.tableBox3.offsetHeight
+            })
         }
     },
-    mounted() {}
+    updated() {
+        this.$nextTick(() => {
+            // 页面渲染完成后的回调
+            this.tableMaxHeight = this.$refs.tableBox3.offsetHeight
+        })
+    }
 }
 </script>
 <style lang="less" scoped>

+ 16 - 2
src/views/room/room4.vue

@@ -1,9 +1,10 @@
 <template>
     <div class='compute-item'>
-        <div class='compute-table'>
+        <div ref='tableBox4' class='compute-table'>
             <el-table
                 :border='true'
                 v-loading='loading'
+                :max-height='tableMaxHeight'
                 :data='table4'
                 style='width: 100%'
                 @row-click='innerTable'
@@ -90,7 +91,8 @@ export default {
             dateVal: '',
             value1: '',
             searVal: '',
-            number_format
+            number_format,
+            tableMaxHeight: 0
         }
     },
     components: { Select },
@@ -110,7 +112,19 @@ export default {
             if (row.workorderid) {
                 window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=JXWO&uniqueid=WB_GZGL&uniqueid=${row.wb_gzglid}`, true)
             }
+        },
+        computedHeight() {
+            this.$nextTick(() => {
+                // 页面渲染完成后的回调
+                this.tableMaxHeight = this.$refs.tableBox4.offsetHeight
+            })
         }
+    },
+    updated() {
+        this.$nextTick(() => {
+            // 页面渲染完成后的回调
+            this.tableMaxHeight = this.$refs.tableBox4.offsetHeight
+        })
     }
 }
 </script>

+ 16 - 3
src/views/room/room5.vue

@@ -1,9 +1,10 @@
 <template>
     <div class='compute-item'>
-        <div class='compute-table'>
+        <div ref='tableBox5' class='compute-table'>
             <el-table
                 :border='true'
                 v-loading='loading'
+                :max-height='tableMaxHeight'
                 :data='table5'
                 style='width: 100%'
                 @row-click='innerTable'
@@ -98,11 +99,17 @@ export default {
             value1: '',
             searVal: '',
             dateVal: '',
-            imgUrl: []
+            imgUrl: [],
+            tableMaxHeight: 0
         }
     },
     components: { Select },
-    mounted() {},
+    updated() {
+        this.$nextTick(() => {
+            // 页面渲染完成后的回调
+            this.tableMaxHeight = this.$refs.tableBox5.offsetHeight
+        })
+    },
     methods: {
         //工单详情
         innerTable(row) {
@@ -146,6 +153,12 @@ export default {
                 })
             }
             this.$refs.picLargeOpen.open(this.imgUrl)
+        },
+        computedHeight() {
+            this.$nextTick(() => {
+                // 页面渲染完成后的回调
+                this.tableMaxHeight = this.$refs.tableBox5.offsetHeight
+            })
         }
     }
 }