Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
61d046de by weimo934
Options

Merge remote-tracking branch 'origin/master'

2 parents 05c554ad f4606fd8
Inline Side-by-side
Showing 3 changed files with 204 additions and 20 deletions
...@@ -41,3 +41,15 @@ export function insertChInfo (data) { ...@@ -41,3 +41,15 @@ export function insertChInfo (data) {
41 data:data 41 data:data
42 }) 42 })
43 } 43 }
44 /**
45 * 查询楼盘表数据
46 */
47 export function getLpb (data) {
48 return request({
49 url: 'fw/lpb/getLpb',
50 method: 'get',
51 params: {
52 zrzbsm:data
53 },
54 })
55 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane> 4 <el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane>
5 <el-tab-pane label="业主共有" name="yzgy"><yzgy></yzgy></el-tab-pane> 5 <el-tab-pane label="业主共有" name="yzgy"><yzgy></yzgy></el-tab-pane>
6 <el-tab-pane label="登记簿" name="djb"><djb></djb></el-tab-pane> 6 <el-tab-pane label="登记簿" name="djb"><djb></djb></el-tab-pane>
7 <el-tab-pane label="楼盘表" name="lpb"><lpb></lpb></el-tab-pane> 7 <el-tab-pane label="楼盘表" name="lpb"><lpb v-if="lpbLoad"></lpb></el-tab-pane>
8 <el-tab-pane label="历史回溯" name="lshs"><lshs></lshs></el-tab-pane> 8 <el-tab-pane label="历史回溯" name="lshs"><lshs></lshs></el-tab-pane>
9 </el-tabs> 9 </el-tabs>
10 </div> 10 </div>
...@@ -25,11 +25,14 @@ export default { ...@@ -25,11 +25,14 @@ export default {
25 data() { 25 data() {
26 return { 26 return {
27 activeName: "zrzxx", 27 activeName: "zrzxx",
28 lpbLoad:false, //默认不加载楼盘表组件
28 }; 29 };
29 }, 30 },
30 methods: { 31 methods: {
31 handleClick(tab, event) { 32 handleClick(tab, event) {
32 console.log(tab, event); 33 if(!this.lpbLoad){
34 this.lpbLoad = tab.name == 'lpb' ? true : false
35 }
33 }, 36 },
34 }, 37 },
35 created() {}, 38 created() {},
......
1 <template> 1 <template>
2 <div class="lpbContent-wrap" ref="lpbContent"> 2 <div class="lpbContent-wrap" ref="lpbContentWrap">
3 <div class="lpbContent"> 3 <div class="lpbContent" ref="lpbContent" v-loading='loading'>
4 <div class="ljz">逻辑幢</div> 4 <div class="ljz-wrap" :style="{'width':ljzWidth+'px'}" v-show="lpbData.ljzs.length>0">
5 <div class="zdy">幢单元</div> 5 <!-- 循环逻辑幢数据 -->
6 <div class="ch">层户</div> 6 <div class="ljz" ref="ljz" v-for="(ljzs,ljzIndex) in lpbData.ljzs" :key="ljzIndex">
7 <div class="ljz-zdy-wrap">
8 <!-- 循环逻辑幢下的幢单元 -->
9 <div class="ljz-zdy" v-show="ljzs.zdys.length>0" v-for="(zdys,zdyIndex) in ljzs.zdys" :key="zdyIndex">
10 <!-- 循环幢单元下的层户 -->
11 <table class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
12 <tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
13 <!-- 显示层数 -->
14 <td class="floor">{{cs.sjc}}层</td>
15 <!-- 显示户 -->
16 <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex">{{hs.hh}}</td>
17 </tr>
18 </table>
19 <!-- 幢单元名称 -->
20 <div class="zdy-name name">
21 {{zdys.zdymc}}
22 </div>
23 </div>
24 </div>
25 <!-- 逻辑幢名称 -->
26 <div class="ljz-name name">
27 {{ljzs.ljzmc}}
28 </div>
29 </div>
30 </div>
31 <div class="zdy-wrap" :style="{'width':zdyWidth+'px'}">
32 <!-- 循环自然幢下的幢单元 -->
33 <div class="zdy" ref="zdy" v-for="(zdys,zdyIndex) in lpbData.zdys" :key="zdyIndex">
34 <!-- 循环幢单元下的层户 -->
35 <table class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
36 <tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
37 <!-- 显示层数 -->
38 <td class="floor">{{cs.sjc}}层</td>
39 <!-- 显示户 -->
40 <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex">{{hs.hh}}</td>
41 </tr>
42 </table>
43 <!-- 幢单元名称 -->
44 <div class="zdy-name name">
45 {{zdys.zdymc}}
46 </div>
47 </div>
48 <!-- 循环自然幢下的独立层户 -->
49 <!-- <template > -->
50 <div class="zdy chTabel-wrap" :style="{'min-height':cHeight+'px'}">
51 <table class="chTable" ref="ch" border="1" cellspacing="0" cellpadding="0" v-show="lpbData.cs.length>0" >
52 <tr v-for="(cs,csIndex) in lpbData.cs" :key="csIndex">
53 <!-- 显示层数 -->
54 <td class="floor">{{cs.sjc}}层</td>
55 <!-- 显示户 -->
56 <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex">{{hs.hh}}</td>
57 </tr>
58 </table>
59 </div>
60 <!-- </template> -->
61 </div>
62 <!-- <div class="ch-wrap">层户</div> -->
7 </div> 63 </div>
8 <div 64 <div
9 class="zrz" 65 class="zrz"
...@@ -15,6 +71,7 @@ ...@@ -15,6 +71,7 @@
15 </template> 71 </template>
16 72
17 <script> 73 <script>
74 import {getLpb} from "../../../../../api/lpb"
18 export default { 75 export default {
19 name: "", 76 name: "",
20 components: {}, 77 components: {},
...@@ -316,15 +373,56 @@ export default { ...@@ -316,15 +373,56 @@ export default {
316 ], 373 ],
317 }, 374 },
318 lpbContentWidth: "", 375 lpbContentWidth: "",
376 ljzWidth:10000,
377 zdyWidth:2000,
378 cHeight:0,
379 loading:true
319 }; 380 };
320 }, 381 },
321 created() {}, 382 created() {
383 },
322 mounted() { 384 mounted() {
323 setTimeout(() => { 385 setTimeout(() => {
324 this.lpbContentWidth = this.$store.state.contentWidth - 34 - 6; 386 this.lpbContentWidth = this.$store.state.contentWidth - 34 - 6;
387 //让滚动条滚动至最下面 -6是横向滚动条的高度
388 this.$refs.lpbContent.scrollTop = this.$refs.lpbContent.scrollHeight - this.$refs.lpbContent.clientHeight -6;
325 }, 100); 389 }, 100);
390 this.getLpb('1e0c83dfe2e73284f834a80a0947f0c9');
391 },
392 methods: {
393 //获取楼盘表数据
394 getLpb(zrzbsm){
395 getLpb(zrzbsm)
396 .then((res => {
397 if (res.code == 200) {
398 // console.log(this.lpbData,'前');
399 this.lpbData = res.result;
400 // this.lpbData.zdys.push(this.lpbData.zdys)
401 // console.log(this.lpbData,'后');
402 setTimeout(() => {
403 //计算逻辑幢宽度 20为marginRight值
404 this.ljzWidth -= 9980;
405 this.$refs.ljz.forEach(item=>{
406 this.ljzWidth += item.offsetWidth + 20
407 })
408 //计算独立幢单元和独立层户宽度
409 this.zdyWidth -= 1980;
410 this.$refs.zdy.forEach(item=>{
411 this.zdyWidth += item.offsetWidth + 20;
412 this.cHeight = item.offsetHeight > this.cHeight ? item.offsetHeight : this.cHeight;
413 })
414 this.zdyWidth += this.$refs.ch.offsetWidth;
415 this.loading = false
416 }, 200);
417 } else {
418 this.$message({
419 message: res.message,
420 type: "warning",
421 });
422 }
423 }))
424 }
326 }, 425 },
327 methods: {},
328 computed: { 426 computed: {
329 createFlagChange() { 427 createFlagChange() {
330 return this.$parent.createFlag; 428 return this.$parent.createFlag;
...@@ -358,28 +456,99 @@ export default { ...@@ -358,28 +456,99 @@ export default {
358 height: 100%; 456 height: 100%;
359 position: relative; 457 position: relative;
360 overflow: scroll; 458 overflow: scroll;
361 .ljz { 459 .ljz-wrap {
362 width: 500px; 460 height: auto;
363 height: 400px; 461 overflow: hidden;
462 .ljz{
463 float: left;
464 margin-right: 20px;
465 // position: relative;
466 .ljz-zdy-wrap{
467 .ljz-zdy{
468 height: auto;
469 margin-right: 20px;
470 display: inline-table;
471 .zdy-name{
472 height: 40px;
473 background-color: rosybrown;
474 }
475 }
476 .ljz-zdy:last-child{
477 margin-right: 0;
478 }
479 }
480 .ljz-name{
481 width: 100%;
482 height: 40px;
364 background-color: darkorange; 483 background-color: darkorange;
365 } 484 }
366 .zdy { 485 }
367 width: 1580px; 486 }
368 height: 200px; 487 .zdy-wrap {
488 height: auto;
489 overflow: hidden;
490 margin-bottom: 60px;
491 .zdy{
492 float: left;
493 margin-right: 20px;
494 .zdy-zdy-wrap{
495 .zdy-zdy{
496 height: auto;
497 margin-right: 20px;
498 display: inline-table;
499 .zdy-name{
500 height: 40px;
501 background-color: blanchedalmond;
502 }
503 }
504 .zdy-zdy:last-child{
505 margin-right: 0;
506 }
507 }
508 .zdy-name{
509 width: 100%;
510 height: 40px;
369 background-color: rosybrown; 511 background-color: rosybrown;
370 } 512 }
371 .ch {
372 width: 800px;
373 height: 200px;
374 background-color: rgb(165, 136, 62);
375 } 513 }
514 .chTabel-wrap{
515 display:flex;
516 flex-direction: column-reverse;
517 }
518 }
519 // .ch-wrap {
520 // width: 800px;
521 // height: 200px;
522 // margin-bottom: 60px;
523 // background-color: rgb(165, 136, 62);
524 // }
525
526 // 公共部分样式 start
527 .chTable{
528 tr{
529 .floor{
530 background-color: blanchedalmond;
531 }
532 td{
533 width: 124px;
534 height: 64px;
535 line-height: 64px;
536 text-align: center;
537 }
538 }
539 }
540 .name{
541 line-height: 40px;
542 text-align: center;
543 }
544 // end
376 } 545 }
377 .zrz { 546 .zrz {
378 height: 60px; 547 height: 60px;
379 line-height: 60px; 548 line-height: 60px;
380 background-color: darkgoldenrod; 549 background-color: darkgoldenrod;
381 position: absolute; 550 position: absolute;
382 bottom: 0; 551 bottom: 6px;
383 text-align: center; 552 text-align: center;
384 transition: 0.5s; 553 transition: 0.5s;
385 } 554 }
......