Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
71e68c06 by 杨威
Options

楼盘表调整

1 parent bf14603e
Inline Side-by-side
Showing 1 changed file with 44 additions and 39 deletions
1 <template> 1 <template>
2 <div class="lpbContent-wrap" ref="lpbContentWrap"> 2 <div class="lpbContent-wrap" ref="lpbContentWrap">
3 <div 3 <div
4 :class="lpbData.ljzs.length == 0 ? ' lpbContent' : 'lpbContent'" 4 class="lpbContent"
5 ref="lpbContent" 5 ref="lpbContent"
6 v-loading="loading" 6 v-loading="loading"
7 > 7 >
...@@ -23,21 +23,27 @@ ...@@ -23,21 +23,27 @@
23 :style="{'marginTop':'30px'}" 23 :style="{'marginTop':'30px'}"
24 > 24 >
25 <!-- :style="{'marginTop':ljzs.zdys.length>0?'0':'30px'}" --> 25 <!-- :style="{'marginTop':ljzs.zdys.length>0?'0':'30px'}" -->
26 <!-- <div class="ljz-zdy-wrap" :style="{'min-height':ljzzdyHeight+40+'px'}"> -->
27 <!-- 循环逻辑幢下的幢单元 --> 26 <!-- 循环逻辑幢下的幢单元 -->
27 <div class="ljz-zdy-wrap">
28 <div 28 <div
29 class="ljz-zdy" 29 class="ljz-zdy column-reverse"
30 :style="{ 'min-height': ljzzdyHeight + 'px','marginRight':zdyIndex<(ljzs.zdys.length-1)?'20px':'0'}" 30 :style="{ 'min-height': ljzzdyHeight + 40 + 'px','marginRight':zdyIndex<(ljzs.zdys.length-1) || ljzs.cs.length > 1?'20px':'0'}"
31 ref="ljzzdy" 31 ref="ljzzdy"
32 v-show="ljzs.zdys.length > 0" 32 v-show="ljzs.zdys.length > 0"
33 v-for="(zdys, zdyIndex) in ljzs.zdys" 33 v-for="(zdys, zdyIndex) in ljzs.zdys"
34 :key="zdyIndex" 34 :key="zdyIndex"
35 > 35 >
36 <!-- 幢单元名称 -->
37 <div class="zdy-name name">
38 <p>
39 {{ zdys.zdymc }}
40 </p>
41 </div>
42
36 <!-- 循环幢单元下的层户 --> 43 <!-- 循环幢单元下的层户 -->
37 <!-- <div class="chTable-wrap"> --> 44 <!-- <div class="chTable-wrap"> -->
38 <table 45 <table
39 class="chTable psr" 46 class="chTable psr"
40 :style="{ top: (ljzzdyHeight - zdys.cs.length * 65) - 80 + 'px' }"
41 border="1" 47 border="1"
42 cellspacing="0" 48 cellspacing="0"
43 cellpadding="0" 49 cellpadding="0"
...@@ -83,18 +89,13 @@ ...@@ -83,18 +89,13 @@
83 </table> 89 </table>
84 90
85 <!-- </div> --> 91 <!-- </div> -->
86 <!-- 幢单元名称 -->
87 <div class="zdy-name name">
88 <p>
89 {{ zdys.zdymc }}
90 </p>
91 </div> 92 </div>
92 </div> 93 </div>
93 <!-- 循环逻辑幢下的层户 --> 94 <!-- 循环逻辑幢下的层户 -->
94 <div 95 <div
95 class="ljz-ch" 96 class="ljz-ch"
96 ref="ljzDlch" 97 ref="ljzDlch"
97 :style="{ height: 'auto' }" 98 :style="{ height: 'auto',marginTop:(ljzs.zdys.length>0 ? '39' : 0) + 'px'}"
98 v-if="ljzs.cs.length > 0" 99 v-if="ljzs.cs.length > 0"
99 > 100 >
100 <table 101 <table
...@@ -158,7 +159,7 @@ ...@@ -158,7 +159,7 @@
158 </div> 159 </div>
159 </div> 160 </div>
160 </div> 161 </div>
161 <div class="zdy-wrap" :style="{ width: zdyWidth + 'px' }"> 162 <div class="zdy-wrap" :style="{ width: zdyWidth + 'px',marginTop: (lpbData.zdys.length > 0 || lpbData.cs.length > 0) ? '30px' : '0'}">
162 <!-- 循环自然幢下的幢单元 --> 163 <!-- 循环自然幢下的幢单元 -->
163 <div 164 <div
164 class="zdy column-reverse" 165 class="zdy column-reverse"
...@@ -413,7 +414,7 @@ export default { ...@@ -413,7 +414,7 @@ export default {
413 }, 414 },
414 hbjVisible:false, 415 hbjVisible:false,
415 hcxlzVisible:false, 416 hcxlzVisible:false,
416 lpbContentWidth: "", 417 lpbContentWidth: 0,
417 ljzWidth: 10000, 418 ljzWidth: 10000,
418 zdyWidth: 1000, 419 zdyWidth: 1000,
419 cHeight: 0, //独立层户的div高度 420 cHeight: 0, //独立层户的div高度
...@@ -462,8 +463,6 @@ export default { ...@@ -462,8 +463,6 @@ export default {
462 this.getLpb(this.zrzbsm, "0"); 463 this.getLpb(this.zrzbsm, "0");
463 this.getLpb(this.zrzbsm, "1"); 464 this.getLpb(this.zrzbsm, "1");
464 setTimeout(() => { 465 setTimeout(() => {
465 //tab-content宽度 - 右侧图例宽度 - lp-overview滚动条宽度 - lpbContent的pandingRight
466 this.lpbContentWidth = this.$store.state.contentWidth - 39 - 20;
467 //让滚动条滚动至最下面 -6是横向滚动条的高度 466 //让滚动条滚动至最下面 -6是横向滚动条的高度
468 this.$refs.lpbContent.scrollTop = 467 this.$refs.lpbContent.scrollTop =
469 this.$refs.lpbContent.scrollHeight - 468 this.$refs.lpbContent.scrollHeight -
...@@ -523,11 +522,16 @@ export default { ...@@ -523,11 +522,16 @@ export default {
523 //自然幢下元素高度宽度计算 522 //自然幢下元素高度宽度计算
524 dataChange() { 523 dataChange() {
525 //计算逻辑幢宽度 20为marginRight值 524 //计算逻辑幢宽度 20为marginRight值
526 this.ljzWidth = 20; 525 this.ljzWidth = 0;
527 if (this.$refs.ljzzdy != undefined) { 526 if (this.$refs.ljzzdy != undefined) {
528 this.$refs.ljzzdy.forEach((item) => { 527 this.$refs.ljzzdy.forEach((item) => {
529 this.ljzWidth += item.offsetWidth + 20; 528 this.ljzWidth += item.offsetWidth + 20;
530 }); 529 });
530 if (this.$refs.ljzDlch != undefined) {
531 this.$refs.ljzDlch.forEach((item) => {
532 this.ljzWidth += item.offsetWidth;
533 });
534 }
531 } else { 535 } else {
532 if (this.$refs.ljzDlch != undefined) { 536 if (this.$refs.ljzDlch != undefined) {
533 this.$refs.ljzDlch.forEach((item) => { 537 this.$refs.ljzDlch.forEach((item) => {
...@@ -571,32 +575,39 @@ export default { ...@@ -571,32 +575,39 @@ export default {
571 if (this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0) { 575 if (this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0) {
572 //判断自然幢下有没有比层户高的幢单元 576 //判断自然幢下有没有比层户高的幢单元
573 let higher = true; 577 let higher = true;
578 let zrzhighest = 0;
574 //记录最高的幢单元高度 默认为第一个幢单元高度 579 //记录最高的幢单元高度 默认为第一个幢单元高度
575 let highest = this.$refs.ljzzdy[0].offsetHeight; 580 zrzhighest = this.$refs.ljzzdy[0].offsetHeight;
576 this.$refs.ljzzdy.forEach((item) => { 581 this.$refs.ljzzdy.forEach((item) => {
577 this.ljzcHeight = 582 this.ljzcHeight =
578 item.offsetHeight > this.ljzcHeight 583 item.offsetHeight > this.ljzcHeight
579 ? item.offsetHeight 584 ? item.offsetHeight
580 : this.ljzcHeight; 585 : this.ljzcHeight;
581 highest = highest > item.offsetHeight ? highest : item.offsetHeight; 586 zrzhighest = zrzhighest > item.offsetHeight ? zrzhighest : item.offsetHeight;
582 }); 587 });
583 //判断有无独立层户 588 //判断有无独立层户
584 if (this.$refs.ljzch != undefined) { 589 if (this.$refs.ljzch != undefined) {
585 //计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度 590 //计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
586 higher = highest > this.$refs.ljzch.offsetHeight ? true : false; 591 higher = zrzhighest > this.$refs.ljzch.offsetHeight ? true : false;
587 this.$nextTick(() => { 592 this.$nextTick(() => {
588 this.ljzzdyHeight = higher? highest : this.$refs.ljzch.offsetHeight; 593 this.ljzzdyHeight = higher? zrzhighest : this.$refs.ljzch.offsetHeight;
589 highest = 0; 594 zrzhighest = 0;
590 }); 595 });
591 } else { 596 } else {
592 this.$nextTick(() => { 597 this.$nextTick(() => {
593 this.ljzzdyHeight = highest; 598 this.ljzzdyHeight = zrzhighest;
594 highest = 0; 599 zrzhighest = 0;
595 }); 600 });
596 } 601 }
597 } else { 602 } else {
598 603
599 } 604 }
605 this.$nextTick(()=>{
606 this.lpbContentWidth = this.zdyWidth > this.ljzWidth ?this.zdyWidth - 20 : this.ljzWidth-20;
607 if (this.lpbContentWidth == 0) {
608 this.lpbContentWidth = this.$refs.lpbContent.offsetWidth
609 }
610 })
600 }, 611 },
601 //户单击事件 612 //户单击事件
602 handleTdClick(e, bsm,hs) { 613 handleTdClick(e, bsm,hs) {
...@@ -965,16 +976,6 @@ export default { ...@@ -965,16 +976,6 @@ export default {
965 this.lpbData = this.sclpbData; 976 this.lpbData = this.sclpbData;
966 } 977 }
967 }, 978 },
968 createFlagChange: function(val) {
969 setTimeout(() => {
970 this.lpbContentWidth = this.$refs.lpbContent.offsetWidth - 6;
971 }, 501);
972 },
973 legendToggleFlagChange: function(val) {
974 setTimeout(() => {
975 this.lpbContentWidth = this.$refs.lpbContent.offsetWidth - 6;
976 }, 501);
977 },
978 //监听有无通过输入框查询选择到的户,如果有，将其bsm放入hbsmList 979 //监听有无通过输入框查询选择到的户,如果有，将其bsm放入hbsmList
979 searchNum(n) { 980 searchNum(n) {
980 // 渲染查询到的户 981 // 渲染查询到的户
...@@ -1039,13 +1040,17 @@ export default { ...@@ -1039,13 +1040,17 @@ export default {
1039 // margin-bottom: 20px; 1040 // margin-bottom: 20px;
1040 display: table; 1041 display: table;
1041 // position: relative; 1042 // position: relative;
1042 // .ljz-zdy-wrap { 1043 .ljz-zdy-wrap {
1043 // width: auto; 1044 width: auto;
1044 // display: table; 1045 display: table;
1046 float: left;
1045 .ljz-zdy { 1047 .ljz-zdy {
1046 height: auto; 1048 height: auto;
1047 float: left; 1049 float: left;
1048 position: relative; 1050 position: relative;
1051 table{
1052 bottom: 40px;
1053 }
1049 .zdy-name { 1054 .zdy-name {
1050 width: 100%; 1055 width: 100%;
1051 bottom: 0; 1056 bottom: 0;
...@@ -1059,6 +1064,7 @@ export default { ...@@ -1059,6 +1064,7 @@ export default {
1059 // bottom: 40px; 1064 // bottom: 40px;
1060 // } 1065 // }
1061 } 1066 }
1067 }
1062 div:last-child { 1068 div:last-child {
1063 margin-right: 0; 1069 margin-right: 0;
1064 } 1070 }
...@@ -1085,12 +1091,12 @@ export default { ...@@ -1085,12 +1091,12 @@ export default {
1085 } 1091 }
1086 } 1092 }
1087 .bottom40 { 1093 .bottom40 {
1088 margin-bottom: -30px; 1094 // margin-bottom: -30px;
1089 } 1095 }
1090 .zdy-wrap { 1096 .zdy-wrap {
1091 height: auto; 1097 height: auto;
1092 overflow: hidden; 1098 overflow: hidden;
1093 margin-top: 30px; 1099 // margin-top: 30px;
1094 .zdy { 1100 .zdy {
1095 float: left; 1101 float: left;
1096 margin-right: 20px; 1102 margin-right: 20px;
...@@ -1203,7 +1209,6 @@ export default { ...@@ -1203,7 +1209,6 @@ export default {
1203 width: calc(100% - 2px); 1209 width: calc(100% - 2px);
1204 height: 100%; 1210 height: 100%;
1205 border:1px solid #E6E6E6; 1211 border:1px solid #E6E6E6;
1206 border-top:0;
1207 } 1212 }
1208 } 1213 }
1209 // end 1214 // end
......