2d327d90 by 杨威

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

1 parent 950a2ebc
......@@ -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">
<tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
<!-- 显示层数 -->
<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>
</table>
<!-- <div class="chTable-wrap"> -->
<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 v-for="(hs,hsIndex) in cs.hs" :key="hsIndex" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)">{{hs.hh}}</td>
</tr>
</table>
<!-- </div> -->
<!-- 幢单元名称 -->
<div class="zdy-name name">
{{zdys.zdymc}}
</div>
</div>
<!-- 循环逻辑幢下的层户 -->
<div class="ljz-ch" v-if="ljzs.cs.length>0">
<table class="chTable" border="1" cellspacing="0" cellpadding="0">
<div class="ljz-ch" :style="{'min-height':ljzzdyHeight+40+'px'}" v-if="ljzs.cs.length>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,
zdyHeight:0,
cHeight:0, //独立层户的div高度
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;
......