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 111 additions and 106 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,78 +23,79 @@ ...@@ -23,78 +23,79 @@
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 <!-- 循环逻辑幢下的幢单元 -->
28 <div 27 <div class="ljz-zdy-wrap">
29 class="ljz-zdy" 28 <div
30 :style="{ 'min-height': ljzzdyHeight + 'px','marginRight':zdyIndex<(ljzs.zdys.length-1)?'20px':'0'}" 29 class="ljz-zdy column-reverse"
31 ref="ljzzdy" 30 :style="{ 'min-height': ljzzdyHeight + 40 + 'px','marginRight':zdyIndex<(ljzs.zdys.length-1) || ljzs.cs.length > 1?'20px':'0'}"
32 v-show="ljzs.zdys.length > 0" 31 ref="ljzzdy"
33 v-for="(zdys, zdyIndex) in ljzs.zdys" 32 v-show="ljzs.zdys.length > 0"
34 :key="zdyIndex" 33 v-for="(zdys, zdyIndex) in ljzs.zdys"
35 > 34 :key="zdyIndex"
36 <!-- 循环幢单元下的层户 -->
37 <!-- <div class="chTable-wrap"> -->
38 <table
39 class="chTable psr"
40 :style="{ top: (ljzzdyHeight - zdys.cs.length * 65) - 80 + 'px' }"
41 border="1"
42 cellspacing="0"
43 cellpadding="0"
44 v-show="zdys.cs.length > 0"
45 > 35 >
46 <tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex"> 36 <!-- 幢单元名称 -->
47 <!-- 显示层数 --> 37 <div class="zdy-name name">
48 <td 38 <p>
49 class="floor" 39 {{ zdys.zdymc }}
50 ref="cBsm" 40 </p>
51 @contextmenu.prevent="openMenu($event, cs, 'c')" 41 </div>
52 @click="handleClickC($event, cs)"
53 >
54 {{ cs.sjc }}层
55 </td>
56 <!-- 显示户 -->
57 <td
58 v-for="(hs, hsIndex) in cs.hs"
59 :rowspan="hs.sjcs"
60 :colspan="hs.sjhs"
61 :data-bsm="hs.bsm"
62 ref="hBsm"
63 :key="hsIndex"
64 :class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
65 @click="handleTdClick($event.target, hs.bsm,hs)"
66 @dblclick="dbclick(hs.bsm)"
67 @contextmenu.prevent="openMenu($event, hs, 'h')"
68 >
69 {{ hs.shbw }}
70 <span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
71 <span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
72 <span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'" >现</span>
73 <ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm,hs)">
74 <li style="background-color:#6EDEE1" v-show="hs.qqzt=='1'" @click.stop="dyztIconClick">确</li>
75 <li style="background-color:#8ADC88" v-show="hs.bazt=='1'" @click.stop="dyztIconClick">备</li>
76 <li style="background-color:#FF8282" v-show="hs.dyzt=='1'" @click.stop="dyztIconClick">抵</li>
77 <li style="background-color:#D7CECF" v-show="hs.cfzt=='1'" @click.stop="dyztIconClick">查</li>
78 <li style="background-color:#D4A3EB" v-show="hs.yyzt=='1'" @click.stop="dyztIconClick">异</li>
79 <li style="background-color:#A5A3FB" v-show="hs.xzzt=='1'" @click.stop="dyztIconClick">限</li>
80 </ul>
81 </td>
82 </tr>
83 </table>
84 42
85 <!-- </div> --> 43 <!-- 循环幢单元下的层户 -->
86 <!-- 幢单元名称 --> 44 <!-- <div class="chTable-wrap"> -->
87 <div class="zdy-name name"> 45 <table
88 <p> 46 class="chTable psr"
89 {{ zdys.zdymc }} 47 border="1"
90 </p> 48 cellspacing="0"
49 cellpadding="0"
50 v-show="zdys.cs.length > 0"
51 >
52 <tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex">
53 <!-- 显示层数 -->
54 <td
55 class="floor"
56 ref="cBsm"
57 @contextmenu.prevent="openMenu($event, cs, 'c')"
58 @click="handleClickC($event, cs)"
59 >
60 {{ cs.sjc }}层
61 </td>
62 <!-- 显示户 -->
63 <td
64 v-for="(hs, hsIndex) in cs.hs"
65 :rowspan="hs.sjcs"
66 :colspan="hs.sjhs"
67 :data-bsm="hs.bsm"
68 ref="hBsm"
69 :key="hsIndex"
70 :class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
71 @click="handleTdClick($event.target, hs.bsm,hs)"
72 @dblclick="dbclick(hs.bsm)"
73 @contextmenu.prevent="openMenu($event, hs, 'h')"
74 >
75 {{ hs.shbw }}
76 <span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
77 <span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
78 <span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'" >现</span>
79 <ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm,hs)">
80 <li style="background-color:#6EDEE1" v-show="hs.qqzt=='1'" @click.stop="dyztIconClick">确</li>
81 <li style="background-color:#8ADC88" v-show="hs.bazt=='1'" @click.stop="dyztIconClick">备</li>
82 <li style="background-color:#FF8282" v-show="hs.dyzt=='1'" @click.stop="dyztIconClick">抵</li>
83 <li style="background-color:#D7CECF" v-show="hs.cfzt=='1'" @click.stop="dyztIconClick">查</li>
84 <li style="background-color:#D4A3EB" v-show="hs.yyzt=='1'" @click.stop="dyztIconClick">异</li>
85 <li style="background-color:#A5A3FB" v-show="hs.xzzt=='1'" @click.stop="dyztIconClick">限</li>
86 </ul>
87 </td>
88 </tr>
89 </table>
90
91 <!-- </div> -->
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,25 +1040,30 @@ export default { ...@@ -1039,25 +1040,30 @@ 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;
1045 .ljz-zdy {
1046 height: auto;
1047 float: left; 1046 float: left;
1048 position: relative; 1047 .ljz-zdy {
1049 .zdy-name { 1048 height: auto;
1050 width: 100%; 1049 float: left;
1051 bottom: 0; 1050 position: relative;
1052 position: absolute; 1051 table{
1053 height: 40px; 1052 bottom: 40px;
1054 // background-color: rosybrown; 1053 }
1055 // border:1px solid #E6E6E6 1054 .zdy-name {
1055 width: 100%;
1056 bottom: 0;
1057 position: absolute;
1058 height: 40px;
1059 // background-color: rosybrown;
1060 // border:1px solid #E6E6E6
1061 }
1062 // .chTable-wrap{
1063 // position: absolute;
1064 // bottom: 40px;
1065 // }
1056 } 1066 }
1057 // .chTable-wrap{
1058 // position: absolute;
1059 // bottom: 40px;
1060 // }
1061 } 1067 }
1062 div:last-child { 1068 div:last-child {
1063 margin-right: 0; 1069 margin-right: 0;
...@@ -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
......