计算逻辑幢下的幢单元和层户高度，按顺序排放

杨威
Showing 1 changed file with 57 additions and 19 deletions
src/views/systemZRZ/lpb/bjlp/lpbContent/index.vue
--- a/src/views/systemZRZ/lpb/bjlp/lpbContent/index.vue
View file @2d327d9
+++ b/src/views/systemZRZ/lpb/bjlp/lpbContent/index.vue
View file @2d327d9
@@ -4,26 +4,28 @@
 			<div :class="(lpbData.cs.length == 0 && lpbData.zdys.length == 0) ? 'bottom40 ljz-wrap':'ljz-wrap'"  :style="{'width':ljzWidth+'px'}" v-show="lpbData.ljzs.length>0">
 				<!-- 循环逻辑幢数据 -->
 				<div class="ljz" ref="ljz" v-for="(ljzs,ljzIndex) in lpbData.ljzs" :key="ljzIndex">
-					<div  class="ljz-zdy-wrap" >
+					<div  class="ljz-zdy-wrap" :style="{'min-height':ljzzdyHeight+40+'px'}">
 						<!-- 循环逻辑幢下的幢单元 -->
-						<div class="ljz-zdy" v-show="ljzs.zdys.length>0" v-for="(zdys,zdyIndex) in ljzs.zdys" :key="zdyIndex">
+  						<div class="ljz-zdy"  :style="{'min-height':ljzzdyHeight+40+'px'}" ref="ljzzdy" v-show="ljzs.zdys.length>0" v-for="(zdys,zdyIndex) in ljzs.zdys" :key="zdyIndex" >
 							<!-- 循环幢单元下的层户 -->
-							<table  class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
+							<!-- <div class="chTable-wrap"> -->
-								<tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
+								<table  class="chTable" :style="{'top':(ljzzdyHeight-1-zdys.cs.length*65)+'px'}" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
-									<!-- 显示层数 -->
+									<tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
-									<td class="floor">{{cs.sjc}}层</td>
+										<!-- 显示层数 -->
-									<!-- 显示户 -->
+										<td class="floor">{{cs.sjc}}层</td>
-									<td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)">{{hs.hh}}</td>
+										<!-- 显示户 -->
-								</tr>
+										<td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)">{{hs.hh}}</td>
-							</table>
+									</tr>
+								</table>
+							<!-- </div> -->
 							<!-- 幢单元名称 -->
 							<div class="zdy-name name">
 								{{zdys.zdymc}}
 							</div>
 						</div>
 						<!-- 循环逻辑幢下的层户 -->
-						<div class="ljz-ch"   v-if="ljzs.cs.length>0">
+						<div class="ljz-ch" :style="{'min-height':ljzzdyHeight+40+'px'}"  v-if="ljzs.cs.length>0">
-							<table  class="chTable" border="1" cellspacing="0" cellpadding="0">
+							<table  class="chTable" :style="{'top':(ljzzdyHeight+40-1-ljzs.cs.length*65)+'px'}" border="1" cellspacing="0" cellpadding="0">
 								<tr v-for="(cs) in ljzs.cs" :key="cs.bsm">
 									<!-- 显示层数 -->
 									<td class="floor">{{cs.sjc}}层</td>
@@ -98,8 +100,10 @@ export default {
 			lpbContentWidth: "",
 			ljzWidth:10000,
 			zdyWidth:1000,
-			cHeight:0,
+			cHeight:0, //独立层户的div高度
-			zdyHeight:0,
+			zdyHeight:0, //独立幢单元的div高度
+			ljzcHeight:0, //逻辑幢下层户的div高度
+			ljzzdyHeight:0, //逻辑幢下幢单元的div高度
 			loading:true,
 			hbsmList:[],
 			time:null, //区分单双击事件的定时器
@@ -167,12 +171,34 @@ export default {
 					this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight
 					this.zdyWidth += this.$refs.ch.offsetWidth;
 				}else{
-					higher = highest;
 					this.zdyHeight = highest;
 				}
 			}else{
 				// this.zdyWidth = 124;
 			}
+			//计算逻辑幢下的幢单元和层户的高度
+			if(this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0){
+				//判断自然幢下有没有比层户高的幢单元
+				let higher = true;
+				//记录最高的幢单元高度 默认为第一个幢单元高度
+				let highest = this.$refs.ljzzdy[0].offsetHeight;
+				this.$refs.ljzzdy.forEach(item=>{
+					this.ljzcHeight = item.offsetHeight > this.ljzcHeight ? item.offsetHeight : this.ljzcHeight;
+					highest = highest > item.offsetHeight ? highest:item.offsetHeight;
+				})
+				//判断有无独立层户
+				if(this.$refs.ljzch != undefined){
+					//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
+					higher = highest > this.$refs.ljzch.offsetHeight ? true:false;
+					this.ljzzdyHeight  = higher ? highest : this.$refs.ljzch.offsetHeight
+				}else{
+					this.ljzzdyHeight = highest;
+				}
+				console.log(this.ljzzdyHeight,'this.ljzzdyHeight');
+			}else{
+				// this.zdyWidth = 124;
+			}
 		},
 		//户单击事件
 		handleTdClick(e,bsm){
@@ -258,18 +284,30 @@ export default {
 					.ljz-zdy{
 						height: auto;
 						margin-right: 20px;
-						display: inline-table;
+						float: left;
+						position: relative;
 						.zdy-name{
+    						width: 100%;
+							bottom: 0;
+							position: absolute;
 							height: 40px;
 							background-color: rosybrown;
 						}
+						// .chTable-wrap{
+						// 	position: absolute;
+						// 	bottom: 40px;
+						// }
 					}
 					.ljz-ch{
-						display: inline-table;
+						float: left;
 					}
 					.ljz-zdy:last-child{
 						margin-right: 0;
 					}
+					.column-reverse{
+						display:flex;
+						flex-direction: column-reverse;
+					}
 				}
 				.ljz-name{
 					width: 100%;
@@ -299,7 +337,7 @@ export default {
 						margin-right: 20px;
 						display: inline-table;
 						.zdy-name{
-							height: 40px;
+    						bottom: 0;
 							background-color: blanchedalmond;
 						}
 					}
@@ -327,6 +365,7 @@ export default {
 		// 公共部分样式 start
 		.chTable{
+			position: relative;
 			tr{
 				.floor{
 					background-color: blanchedalmond;
@@ -337,7 +376,6 @@ export default {
 					line-height: 64px;
 					text-align: center;
 					cursor: pointer;
 				}
 				.tdSelect{
 					border: 1px solid #0091FF!important;