独立幢单元和独立层户同时存在时，幢单元和层户的排列

@@ -4,7 +4,6 @@
 			<div class="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" v-show="ljzs.zdys.length>0" v-for="(zdys,zdyIndex) in ljzs.zdys" :key="zdyIndex">
@@ -43,7 +42,11 @@
 			</div>
 			<div class="zdy-wrap" :style="{'width':zdyWidth+'px'}">
 				<!-- 循环自然幢下的幢单元 -->
-				<div class="zdy" ref="zdy" v-for="(zdys,zdyIndex) in lpbData.zdys" :key="zdyIndex">
+				<div class="zdy column-reverse" ref="zdy" v-for="(zdys,zdyIndex) in lpbData.zdys" :key="zdyIndex" :style="{'min-height':zdyHeight+'px'}">
+					<!-- 幢单元名称 -->
+					<div class="zdy-name name">
+						{{zdys.zdymc}}
+					</div>
 					<!-- 循环幢单元下的层户 -->
 					<table  class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
 						<tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
@@ -53,14 +56,10 @@
 							<td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex" @click="handleTdClick($event,hs.bsm)"  @dblclick="dbclick(hs.bsm)">{{hs.hh}}</td>
 						</tr>
 					</table>
-					<!-- 幢单元名称 -->
-					<div class="zdy-name name">
-						{{zdys.zdymc}}
-					</div>
 				</div>
 				<!-- 循环自然幢下的独立层户 -->
 				<!-- <template > -->
-				<div class="zdy chTabel-wrap" :style="{'min-height':cHeight+'px'}">
+				<div class="zdy column-reverse" :style="{'min-height':cHeight+'px'}">
 					<table  class="chTable" ref="ch" border="1"  cellspacing="0" cellpadding="0" v-show="lpbData.cs != null && lpbData.cs.length>0" >
 						<tr v-for="(cs,csIndex) in lpbData.cs" :key="csIndex">
 							<!-- 显示层数 -->
@@ -100,6 +99,7 @@ export default {
 			ljzWidth:10000,
 			zdyWidth:1000,
 			cHeight:0,
+			zdyHeight:0,
 			loading:true,
 			hbsmList:[],
 			time:null, //区分单双击事件的定时器
@@ -125,32 +125,54 @@ export default {
 					this.loading = false;
 					this.lpbData = res.result == null ? this.lpbData:res.result;
 					setTimeout(() => {
+						//渲染楼盘表
+						this.dataChange()
+					}, 200);
+				} else {
+					this.$message({
+						message: res.message,
+						type: "warning",
+					});
+				}
+			}))
+		},
+		//自然幢下元素高度宽度计算
+		dataChange(){
 			//计算逻辑幢宽度  20为marginRight值
 			this.ljzWidth -= 9980;
+			if(this.$refs.ljz!=undefined){
 				this.$refs.ljz.forEach(item=>{
 					this.ljzWidth += item.offsetWidth + 20
 				})
+			}else{
+
+			}
 			//计算独立幢单元和独立层户宽度
-						//考虑this.$refs.zdy的length为0的情况  TO DO
-						console.log(this.$refs.zdy,'this.$refs.zdy');
-						if(this.$refs.zdy.length > 0){
+			//考虑this.$refs.zdy的length为0的情况，即自然幢下没有独立幢单元
+			if(this.$refs.zdy != undefined && this.$refs.zdy.length > 0){
+				//判断自然幢下有没有比层户高的幢单元
+				let higher = true;
+				//记录最高的幢单元高度 默认为第一个幢单元高度
+				let highest = this.$refs.zdy[0].offsetHeight;
 				this.zdyWidth -= 980;
 				this.$refs.zdy.forEach(item=>{
 					this.zdyWidth += item.offsetWidth + 20; 
 					this.cHeight = item.offsetHeight > this.cHeight ? item.offsetHeight : this.cHeight;
+					highest = highest > item.offsetHeight ? highest:item.offsetHeight;
 				})
+				//判断有无独立层户
+				if(this.$refs.ch != undefined){
+					//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
+					higher = highest > this.$refs.ch.offsetHeight ? true:false;
+					this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight
 					this.zdyWidth += this.$refs.ch.offsetWidth;
 				}else{
-							// this.zdyWidth = 124;
+					higher = highest;
+					this.zdyHeight = highest;
 				}
-					}, 200);
-				} else {
-					this.$message({
-						message: res.message,
-						type: "warning",
-					});
+			}else{
+				// this.zdyWidth = 124;
 			}
-			}))
 		},
 		//户单击事件
 		handleTdClick(e,bsm){
@@ -263,6 +285,7 @@ export default {
 			.zdy{
 				float: left;
 				margin-right: 20px;
+				
 				.zdy-zdy-wrap{
 					.zdy-zdy{
 						height: auto;
@@ -283,7 +306,7 @@ export default {
 					background-color: rosybrown;
 				}
 			}
-			.chTabel-wrap{
+			.column-reverse{
 				display:flex;
 				flex-direction: column-reverse;
 			}