Skip to content

任超 / js.CadastralSystem

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

初步实现逻辑幢按照上下顺序排列

1 parent 39459d85
Inline Side-by-side
Showing 2 changed files with 27 additions and 15 deletions
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
15 @blur="inputBlur" 15 @blur="inputBlur"
16 @change="inputChange" 16 @change="inputChange"
17 class="searchInput" 17 class="searchInput"
18 placeholder="输入不动产单元号" 18 placeholder="输入不动产单元号或室号"
19 ><i 19 ><i
20 slot="suffix" 20 slot="suffix"
21 class="el-input__icon el-icon-search" 21 class="el-input__icon el-icon-search"
......
1 <template> 1 <template>
2 <div class="lpbContent-wrap" ref="lpbContentWrap"> 2 <div class="lpbContent-wrap" ref="lpbContentWrap">
3 <div :class="lpbData.ljzs.length == 0 ? 'column-reverse lpbContent':'lpbContent'" ref="lpbContent" v-loading='loading'> 3 <div :class="lpbData.ljzs.length == 0 ? 'column-reverse lpbContent':'lpbContent'" ref="lpbContent" v-loading='loading'>
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'" 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" :style="{'min-height':ljzzdyHeight+40+'px'}"> 7 <!-- <div class="ljz-zdy-wrap" :style="{'min-height':ljzzdyHeight+40+'px'}"> -->
8 <!-- 循环逻辑幢下的幢单元 --> 8 <!-- 循环逻辑幢下的幢单元 -->
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" > 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 <!-- <div class="chTable-wrap"> --> 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 <table class="chTable psr" :style="{'top':(ljzzdyHeight-1-zdys.cs.length*65)+'px'}" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
13 <tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex"> 13 <tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
14 <!-- 显示层数 --> 14 <!-- 显示层数 -->
15 <td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs,'c')" @click="handleClickC($event,cs)">{{cs.sjc}}层</td> 15 <td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs,'c')" @click="handleClickC($event,cs)">{{cs.sjc}}层</td>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 </div> 24 </div>
25 </div> 25 </div>
26 <!-- 循环逻辑幢下的层户 --> 26 <!-- 循环逻辑幢下的层户 -->
27 <div class="ljz-ch" :style="{'min-height':ljzzdyHeight+40+'px'}" v-if="ljzs.cs.length>0"> 27 <div class="ljz-ch" :style="{'height':'auto'}" v-if="ljzs.cs.length>0">
28 <table class="chTable" :style="{'top':(ljzzdyHeight+40-1-ljzs.cs.length*65)<0? 0:(ljzzdyHeight+40-1-ljzs.cs.length*65) +'px'}" border="1" cellspacing="0" cellpadding="0"> 28 <table class="chTable" :style="{'top':(ljzzdyHeight+40-1-ljzs.cs.length*65)<0? 0:(ljzzdyHeight+40-1-ljzs.cs.length*65) +'px'}" border="1" cellspacing="0" cellpadding="0">
29 <tr v-for="(cs) in ljzs.cs" :key="cs.bsm"> 29 <tr v-for="(cs) in ljzs.cs" :key="cs.bsm">
30 <!-- 显示层数 --> 30 <!-- 显示层数 -->
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
34 </tr> 34 </tr>
35 </table> 35 </table>
36 </div> 36 </div>
37 </div> 37 <!-- </div> -->
38 38
39 <!-- 逻辑幢名称 --> 39 <!-- 逻辑幢名称 -->
40 <div class="ljz-name name"> 40 <div class="ljz-name name">
...@@ -184,6 +184,7 @@ export default { ...@@ -184,6 +184,7 @@ export default {
184 getLpb(zrzbsm,scyclx).then((res) => { 184 getLpb(zrzbsm,scyclx).then((res) => {
185 if (res.code == 200) { 185 if (res.code == 200) {
186 this.loading = false; 186 this.loading = false;
187 res.result.ljzs = res.result.ljzs.sort(this.compare('place')).reverse();
187 this.lpbData = res.result == null ? this.lpbData : res.result; 188 this.lpbData = res.result == null ? this.lpbData : res.result;
188 this.$nextTick(()=>{ 189 this.$nextTick(()=>{
189 //渲染楼盘表 190 //渲染楼盘表
...@@ -197,6 +198,13 @@ export default { ...@@ -197,6 +198,13 @@ export default {
197 } 198 }
198 }); 199 });
199 }, 200 },
201 compare(property){
202 return function(a,b){
203 var value1 = a[property];
204 var value2 = b[property];
205 return value1 - value2;
206 }
207 },
200 //按照bdcdyh或shbw筛选户 208 //按照bdcdyh或shbw筛选户
201 lpbDataMap(sh) { 209 lpbDataMap(sh) {
202 //清除之前选中户 210 //清除之前选中户
...@@ -512,12 +520,13 @@ export default { ...@@ -512,12 +520,13 @@ export default {
512 .ljz-wrap { 520 .ljz-wrap {
513 height: auto; 521 height: auto;
514 overflow: hidden; 522 overflow: hidden;
515 margin-bottom: 20px;
516 .ljz { 523 .ljz {
517 float: left; 524 margin-bottom: 20px;
518 margin-right: 20px; 525 display: table;
519 // position: relative; 526 // position: relative;
520 .ljz-zdy-wrap { 527 // .ljz-zdy-wrap {
528 // width: auto;
529 // display: table;
521 .ljz-zdy { 530 .ljz-zdy {
522 height: auto; 531 height: auto;
523 margin-right: 20px; 532 margin-right: 20px;
...@@ -535,6 +544,9 @@ export default { ...@@ -535,6 +544,9 @@ export default {
535 // bottom: 40px; 544 // bottom: 40px;
536 // } 545 // }
537 } 546 }
547 div:last-child{
548 margin-right: 0;
549 }
538 .ljz-ch { 550 .ljz-ch {
539 float: left; 551 float: left;
540 } 552 }
...@@ -545,9 +557,9 @@ export default { ...@@ -545,9 +557,9 @@ export default {
545 display: flex; 557 display: flex;
546 flex-direction: column-reverse; 558 flex-direction: column-reverse;
547 } 559 }
548 } 560 // }
549 .ljz-name { 561 .ljz-name {
550 width: 100%; 562 width: calc(100% - 32px);
551 height: 40px; 563 height: 40px;
552 background-color: darkorange; 564 background-color: darkorange;
553 } 565 }
...@@ -583,7 +595,7 @@ export default { ...@@ -583,7 +595,7 @@ export default {
583 } 595 }
584 } 596 }
585 .zdy-name { 597 .zdy-name {
586 width: 100%; 598 width: calc;
587 height: 40px; 599 height: 40px;
588 background-color: rosybrown; 600 background-color: rosybrown;
589 } 601 }
...@@ -596,7 +608,7 @@ export default { ...@@ -596,7 +608,7 @@ export default {
596 608
597 // 公共部分样式 start 609 // 公共部分样式 start
598 .chTable { 610 .chTable {
599 position: relative; 611 // position: relative;
600 tr { 612 tr {
601 .floor { 613 .floor {
602 background-color: blanchedalmond; 614 background-color: blanchedalmond;
...@@ -620,7 +632,7 @@ export default { ...@@ -620,7 +632,7 @@ export default {
620 .name { 632 .name {
621 line-height: 40px; 633 line-height: 40px;
622 text-align: center; 634 text-align: center;
623 display: inline-block; 635 display: table-footer-group;
624 } 636 }
625 // end 637 // end
626 } 638 }
......