Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
2d327d90 by 杨威
Options

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

1 parent 950a2ebc
Inline Side-by-side
Showing 1 changed file with 50 additions and 12 deletions
...@@ -4,11 +4,12 @@ ...@@ -4,11 +4,12 @@
4 <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"> 4 <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">
5 <!-- 循环逻辑幢数据 --> 5 <!-- 循环逻辑幢数据 -->
6 <div class="ljz" ref="ljz" v-for="(ljzs,ljzIndex) in lpbData.ljzs" :key="ljzIndex"> 6 <div class="ljz" ref="ljz" v-for="(ljzs,ljzIndex) in lpbData.ljzs" :key="ljzIndex">
7 <div class="ljz-zdy-wrap" > 7 <div class="ljz-zdy-wrap" :style="{'min-height':ljzzdyHeight+40+'px'}">
8 <!-- 循环逻辑幢下的幢单元 --> 8 <!-- 循环逻辑幢下的幢单元 -->
9 <div class="ljz-zdy" v-show="ljzs.zdys.length>0" v-for="(zdys,zdyIndex) in ljzs.zdys" :key="zdyIndex"> 9 <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" >
10 <!-- 循环幢单元下的层户 --> 10 <!-- 循环幢单元下的层户 -->
11 <table class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0"> 11 <!-- <div class="chTable-wrap"> -->
12 <table class="chTable" :style="{'top':(ljzzdyHeight-1-zdys.cs.length*65)+'px'}" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
12 <tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex"> 13 <tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
13 <!-- 显示层数 --> 14 <!-- 显示层数 -->
14 <td class="floor">{{cs.sjc}}层</td> 15 <td class="floor">{{cs.sjc}}层</td>
...@@ -16,14 +17,15 @@ ...@@ -16,14 +17,15 @@
16 <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)">{{hs.hh}}</td> 17 <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)">{{hs.hh}}</td>
17 </tr> 18 </tr>
18 </table> 19 </table>
20 <!-- </div> -->
19 <!-- 幢单元名称 --> 21 <!-- 幢单元名称 -->
20 <div class="zdy-name name"> 22 <div class="zdy-name name">
21 {{zdys.zdymc}} 23 {{zdys.zdymc}}
22 </div> 24 </div>
23 </div> 25 </div>
24 <!-- 循环逻辑幢下的层户 --> 26 <!-- 循环逻辑幢下的层户 -->
25 <div class="ljz-ch" v-if="ljzs.cs.length>0"> 27 <div class="ljz-ch" :style="{'min-height':ljzzdyHeight+40+'px'}" v-if="ljzs.cs.length>0">
26 <table class="chTable" border="1" cellspacing="0" cellpadding="0"> 28 <table class="chTable" :style="{'top':(ljzzdyHeight+40-1-ljzs.cs.length*65)+'px'}" border="1" cellspacing="0" cellpadding="0">
27 <tr v-for="(cs) in ljzs.cs" :key="cs.bsm"> 29 <tr v-for="(cs) in ljzs.cs" :key="cs.bsm">
28 <!-- 显示层数 --> 30 <!-- 显示层数 -->
29 <td class="floor">{{cs.sjc}}层</td> 31 <td class="floor">{{cs.sjc}}层</td>
...@@ -98,8 +100,10 @@ export default { ...@@ -98,8 +100,10 @@ export default {
98 lpbContentWidth: "", 100 lpbContentWidth: "",
99 ljzWidth:10000, 101 ljzWidth:10000,
100 zdyWidth:1000, 102 zdyWidth:1000,
101 cHeight:0, 103 cHeight:0, //独立层户的div高度
102 zdyHeight:0, 104 zdyHeight:0, //独立幢单元的div高度
105 ljzcHeight:0, //逻辑幢下层户的div高度
106 ljzzdyHeight:0, //逻辑幢下幢单元的div高度
103 loading:true, 107 loading:true,
104 hbsmList:[], 108 hbsmList:[],
105 time:null, //区分单双击事件的定时器 109 time:null, //区分单双击事件的定时器
...@@ -167,12 +171,34 @@ export default { ...@@ -167,12 +171,34 @@ export default {
167 this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight 171 this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight
168 this.zdyWidth += this.$refs.ch.offsetWidth; 172 this.zdyWidth += this.$refs.ch.offsetWidth;
169 }else{ 173 }else{
170 higher = highest;
171 this.zdyHeight = highest; 174 this.zdyHeight = highest;
172 } 175 }
173 }else{ 176 }else{
174 // this.zdyWidth = 124; 177 // this.zdyWidth = 124;
175 } 178 }
179
180 //计算逻辑幢下的幢单元和层户的高度
181 if(this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0){
182 //判断自然幢下有没有比层户高的幢单元
183 let higher = true;
184 //记录最高的幢单元高度 默认为第一个幢单元高度
185 let highest = this.$refs.ljzzdy[0].offsetHeight;
186 this.$refs.ljzzdy.forEach(item=>{
187 this.ljzcHeight = item.offsetHeight > this.ljzcHeight ? item.offsetHeight : this.ljzcHeight;
188 highest = highest > item.offsetHeight ? highest:item.offsetHeight;
189 })
190 //判断有无独立层户
191 if(this.$refs.ljzch != undefined){
192 //计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
193 higher = highest > this.$refs.ljzch.offsetHeight ? true:false;
194 this.ljzzdyHeight = higher ? highest : this.$refs.ljzch.offsetHeight
195 }else{
196 this.ljzzdyHeight = highest;
197 }
198 console.log(this.ljzzdyHeight,'this.ljzzdyHeight');
199 }else{
200 // this.zdyWidth = 124;
201 }
176 }, 202 },
177 //户单击事件 203 //户单击事件
178 handleTdClick(e,bsm){ 204 handleTdClick(e,bsm){
...@@ -258,18 +284,30 @@ export default { ...@@ -258,18 +284,30 @@ export default {
258 .ljz-zdy{ 284 .ljz-zdy{
259 height: auto; 285 height: auto;
260 margin-right: 20px; 286 margin-right: 20px;
261 display: inline-table; 287 float: left;
288 position: relative;
262 .zdy-name{ 289 .zdy-name{
290 width: 100%;
291 bottom: 0;
292 position: absolute;
263 height: 40px; 293 height: 40px;
264 background-color: rosybrown; 294 background-color: rosybrown;
265 } 295 }
296 // .chTable-wrap{
297 // position: absolute;
298 // bottom: 40px;
299 // }
266 } 300 }
267 .ljz-ch{ 301 .ljz-ch{
268 display: inline-table; 302 float: left;
269 } 303 }
270 .ljz-zdy:last-child{ 304 .ljz-zdy:last-child{
271 margin-right: 0; 305 margin-right: 0;
272 } 306 }
307 .column-reverse{
308 display:flex;
309 flex-direction: column-reverse;
310 }
273 } 311 }
274 .ljz-name{ 312 .ljz-name{
275 width: 100%; 313 width: 100%;
...@@ -299,7 +337,7 @@ export default { ...@@ -299,7 +337,7 @@ export default {
299 margin-right: 20px; 337 margin-right: 20px;
300 display: inline-table; 338 display: inline-table;
301 .zdy-name{ 339 .zdy-name{
302 height: 40px; 340 bottom: 0;
303 background-color: blanchedalmond; 341 background-color: blanchedalmond;
304 } 342 }
305 } 343 }
...@@ -327,6 +365,7 @@ export default { ...@@ -327,6 +365,7 @@ export default {
327 365
328 // 公共部分样式 start 366 // 公共部分样式 start
329 .chTable{ 367 .chTable{
368 position: relative;
330 tr{ 369 tr{
331 .floor{ 370 .floor{
332 background-color: blanchedalmond; 371 background-color: blanchedalmond;
...@@ -337,7 +376,6 @@ export default { ...@@ -337,7 +376,6 @@ export default {
337 line-height: 64px; 376 line-height: 64px;
338 text-align: center; 377 text-align: center;
339 cursor: pointer; 378 cursor: pointer;
340
341 } 379 }
342 .tdSelect{ 380 .tdSelect{
343 border: 1px solid #0091FF!important; 381 border: 1px solid #0091FF!important;
......