Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
85537b8f by 杨威
Options

独立幢单元和独立层户同时存在时，幢单元和层户的排列

1 parent f8ac8b4c
Inline Side-by-side
Showing 1 changed file with 49 additions and 26 deletions
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
4 <div class="ljz-wrap" :style="{'width':ljzWidth+'px'}" v-show="lpbData.ljzs.length>0"> 4 <div class="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
8 <div class="ljz-zdy-wrap" > 7 <div class="ljz-zdy-wrap" >
9 <!-- 循环逻辑幢下的幢单元 --> 8 <!-- 循环逻辑幢下的幢单元 -->
10 <div class="ljz-zdy" v-show="ljzs.zdys.length>0" v-for="(zdys,zdyIndex) in ljzs.zdys" :key="zdyIndex"> 9 <div class="ljz-zdy" v-show="ljzs.zdys.length>0" v-for="(zdys,zdyIndex) in ljzs.zdys" :key="zdyIndex">
...@@ -43,7 +42,11 @@ ...@@ -43,7 +42,11 @@
43 </div> 42 </div>
44 <div class="zdy-wrap" :style="{'width':zdyWidth+'px'}"> 43 <div class="zdy-wrap" :style="{'width':zdyWidth+'px'}">
45 <!-- 循环自然幢下的幢单元 --> 44 <!-- 循环自然幢下的幢单元 -->
46 <div class="zdy" ref="zdy" v-for="(zdys,zdyIndex) in lpbData.zdys" :key="zdyIndex"> 45 <div class="zdy column-reverse" ref="zdy" v-for="(zdys,zdyIndex) in lpbData.zdys" :key="zdyIndex" :style="{'min-height':zdyHeight+'px'}">
46 <!-- 幢单元名称 -->
47 <div class="zdy-name name">
48 {{zdys.zdymc}}
49 </div>
47 <!-- 循环幢单元下的层户 --> 50 <!-- 循环幢单元下的层户 -->
48 <table class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0"> 51 <table class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
49 <tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex"> 52 <tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
...@@ -53,14 +56,10 @@ ...@@ -53,14 +56,10 @@
53 <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)">{{hs.hh}}</td> 56 <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)">{{hs.hh}}</td>
54 </tr> 57 </tr>
55 </table> 58 </table>
56 <!-- 幢单元名称 -->
57 <div class="zdy-name name">
58 {{zdys.zdymc}}
59 </div>
60 </div> 59 </div>
61 <!-- 循环自然幢下的独立层户 --> 60 <!-- 循环自然幢下的独立层户 -->
62 <!-- <template > --> 61 <!-- <template > -->
63 <div class="zdy chTabel-wrap" :style="{'min-height':cHeight+'px'}"> 62 <div class="zdy column-reverse" :style="{'min-height':cHeight+'px'}">
64 <table class="chTable" ref="ch" border="1" cellspacing="0" cellpadding="0" v-show="lpbData.cs != null && lpbData.cs.length>0" > 63 <table class="chTable" ref="ch" border="1" cellspacing="0" cellpadding="0" v-show="lpbData.cs != null && lpbData.cs.length>0" >
65 <tr v-for="(cs,csIndex) in lpbData.cs" :key="csIndex"> 64 <tr v-for="(cs,csIndex) in lpbData.cs" :key="csIndex">
66 <!-- 显示层数 --> 65 <!-- 显示层数 -->
...@@ -100,6 +99,7 @@ export default { ...@@ -100,6 +99,7 @@ export default {
100 ljzWidth:10000, 99 ljzWidth:10000,
101 zdyWidth:1000, 100 zdyWidth:1000,
102 cHeight:0, 101 cHeight:0,
102 zdyHeight:0,
103 loading:true, 103 loading:true,
104 hbsmList:[], 104 hbsmList:[],
105 time:null, //区分单双击事件的定时器 105 time:null, //区分单双击事件的定时器
...@@ -125,24 +125,8 @@ export default { ...@@ -125,24 +125,8 @@ export default {
125 this.loading = false; 125 this.loading = false;
126 this.lpbData = res.result == null ? this.lpbData:res.result; 126 this.lpbData = res.result == null ? this.lpbData:res.result;
127 setTimeout(() => { 127 setTimeout(() => {
128 //计算逻辑幢宽度 20为marginRight值 128 //渲染楼盘表
129 this.ljzWidth -= 9980; 129 this.dataChange()
130 this.$refs.ljz.forEach(item=>{
131 this.ljzWidth += item.offsetWidth + 20
132 })
133 //计算独立幢单元和独立层户宽度
134 //考虑this.$refs.zdy的length为0的情况 TO DO
135 console.log(this.$refs.zdy,'this.$refs.zdy');
136 if(this.$refs.zdy.length > 0){
137 this.zdyWidth -= 980;
138 this.$refs.zdy.forEach(item=>{
139 this.zdyWidth += item.offsetWidth + 20;
140 this.cHeight = item.offsetHeight > this.cHeight ? item.offsetHeight : this.cHeight;
141 })
142 this.zdyWidth += this.$refs.ch.offsetWidth;
143 }else{
144 // this.zdyWidth = 124;
145 }
146 }, 200); 130 }, 200);
147 } else { 131 } else {
148 this.$message({ 132 this.$message({
...@@ -152,6 +136,44 @@ export default { ...@@ -152,6 +136,44 @@ export default {
152 } 136 }
153 })) 137 }))
154 }, 138 },
139 //自然幢下元素高度宽度计算
140 dataChange(){
141 //计算逻辑幢宽度 20为marginRight值
142 this.ljzWidth -= 9980;
143 if(this.$refs.ljz!=undefined){
144 this.$refs.ljz.forEach(item=>{
145 this.ljzWidth += item.offsetWidth + 20
146 })
147 }else{
148
149 }
150 //计算独立幢单元和独立层户宽度
151 //考虑this.$refs.zdy的length为0的情况，即自然幢下没有独立幢单元
152 if(this.$refs.zdy != undefined && this.$refs.zdy.length > 0){
153 //判断自然幢下有没有比层户高的幢单元
154 let higher = true;
155 //记录最高的幢单元高度 默认为第一个幢单元高度
156 let highest = this.$refs.zdy[0].offsetHeight;
157 this.zdyWidth -= 980;
158 this.$refs.zdy.forEach(item=>{
159 this.zdyWidth += item.offsetWidth + 20;
160 this.cHeight = item.offsetHeight > this.cHeight ? item.offsetHeight : this.cHeight;
161 highest = highest > item.offsetHeight ? highest:item.offsetHeight;
162 })
163 //判断有无独立层户
164 if(this.$refs.ch != undefined){
165 //计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
166 higher = highest > this.$refs.ch.offsetHeight ? true:false;
167 this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight
168 this.zdyWidth += this.$refs.ch.offsetWidth;
169 }else{
170 higher = highest;
171 this.zdyHeight = highest;
172 }
173 }else{
174 // this.zdyWidth = 124;
175 }
176 },
155 //户单击事件 177 //户单击事件
156 handleTdClick(e,bsm){ 178 handleTdClick(e,bsm){
157 let self = this; 179 let self = this;
...@@ -263,6 +285,7 @@ export default { ...@@ -263,6 +285,7 @@ export default {
263 .zdy{ 285 .zdy{
264 float: left; 286 float: left;
265 margin-right: 20px; 287 margin-right: 20px;
288
266 .zdy-zdy-wrap{ 289 .zdy-zdy-wrap{
267 .zdy-zdy{ 290 .zdy-zdy{
268 height: auto; 291 height: auto;
...@@ -283,7 +306,7 @@ export default { ...@@ -283,7 +306,7 @@ export default {
283 background-color: rosybrown; 306 background-color: rosybrown;
284 } 307 }
285 } 308 }
286 .chTabel-wrap{ 309 .column-reverse{
287 display:flex; 310 display:flex;
288 flex-direction: column-reverse; 311 flex-direction: column-reverse;
289 } 312 }
......