Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
7e276c85 by 杨威
Options

楼盘表绘制，接口联调

1 parent 0a22a70f
Inline Side-by-side
Showing 2 changed files with 202 additions and 21 deletions
......@@ -40,4 +40,16 @@ export function insertChInfo (data) {
method: 'post',
data:data
})
}
/**
* 查询楼盘表数据
*/
export function getLpb (data) {
return request({
url: 'fw/lpb/getLpb',
method: 'get',
params: {
zrzbsm:data
},
})
}
\ No newline at end of file
......
<template>
<div class="lpbContent-wrap" ref="lpbContent">
<div class="lpbContent">
<div class="ljz">逻辑幢</div>
<div class="zdy">幢单元</div>
<div class="ch">层户</div>
<div class="lpbContent-wrap" ref="lpbContentWrap">
<div class="lpbContent" ref="lpbContent" v-loading='loading'>
<div class="ljz-wrap" :style="{'width':ljzWidth+'px'}" v-show="lpbData.ljzs.length>0">
<!-- 循环逻辑幢数据 -->
<div class="ljz" ref="ljz" v-for="(ljzs,ljzIndex) in lpbData.ljzs" :key="ljzIndex">
<div class="ljz-zdy-wrap">
<!-- 循环逻辑幢下的幢单元 -->
<div class="ljz-zdy" v-show="ljzs.zdys.length>0" v-for="(zdys,zdyIndex) in ljzs.zdys" :key="zdyIndex">
<!-- 循环幢单元下的层户 -->
<table class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
<tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
<!-- 显示层数 -->
<td class="floor">{{cs.sjc}}层</td>
<!-- 显示户 -->
<td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex">{{hs.hh}}</td>
</tr>
</table>
<!-- 幢单元名称 -->
<div class="zdy-name name">
{{zdys.zdymc}}
</div>
</div>
</div>
<!-- 逻辑幢名称 -->
<div class="ljz-name name">
{{ljzs.ljzmc}}
</div>
</div>
</div>
<div class="zdy-wrap" :style="{'width':zdyWidth+'px'}">
<!-- 循环自然幢下的幢单元 -->
<div class="zdy" ref="zdy" v-for="(zdys,zdyIndex) in lpbData.zdys" :key="zdyIndex">
<!-- 循环幢单元下的层户 -->
<table class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
<tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
<!-- 显示层数 -->
<td class="floor">{{cs.sjc}}层</td>
<!-- 显示户 -->
<td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex">{{hs.hh}}</td>
</tr>
</table>
<!-- 幢单元名称 -->
<div class="zdy-name name">
{{zdys.zdymc}}
</div>
</div>
<!-- 循环自然幢下的独立层户 -->
<!-- <template > -->
<div class="zdy chTabel-wrap" :style="{'min-height':cHeight+'px'}">
<table class="chTable" ref="ch" border="1" cellspacing="0" cellpadding="0" v-show="lpbData.cs.length>0" >
<tr v-for="(cs,csIndex) in lpbData.cs" :key="csIndex">
<!-- 显示层数 -->
<td class="floor">{{cs.sjc}}层</td>
<!-- 显示户 -->
<td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex">{{hs.hh}}</td>
</tr>
</table>
</div>
<!-- </template> -->
</div>
<!-- <div class="ch-wrap">层户</div> -->
</div>
<div
class="zrz"
......@@ -15,6 +71,7 @@
</template>
<script>
import {getLpb} from "../../../../../api/lpb"
export default {
name: "",
components: {},
......@@ -316,15 +373,56 @@ export default {
],
},
lpbContentWidth: "",
ljzWidth:10000,
zdyWidth:2000,
cHeight:0,
loading:true
};
},
created() {},
created() {
},
mounted() {
setTimeout(() => {
this.lpbContentWidth = this.$store.state.contentWidth - 34 - 6;
this.lpbContentWidth = this.$store.state.contentWidth - 34 - 6;
//让滚动条滚动至最下面 -6是横向滚动条的高度
this.$refs.lpbContent.scrollTop = this.$refs.lpbContent.scrollHeight - this.$refs.lpbContent.clientHeight -6;
}, 100);
this.getLpb('1e0c83dfe2e73284f834a80a0947f0c9');
},
methods: {
//获取楼盘表数据
getLpb(zrzbsm){
getLpb(zrzbsm)
.then((res => {
if (res.code == 200) {
// console.log(this.lpbData,'前');
this.lpbData = res.result;
// this.lpbData.zdys.push(this.lpbData.zdys)
// console.log(this.lpbData,'后');
setTimeout(() => {
//计算逻辑幢宽度 20为marginRight值
this.ljzWidth -= 9980;
this.$refs.ljz.forEach(item=>{
this.ljzWidth += item.offsetWidth + 20
})
//计算独立幢单元和独立层户宽度
this.zdyWidth -= 1980;
this.$refs.zdy.forEach(item=>{
this.zdyWidth += item.offsetWidth + 20;
this.cHeight = item.offsetHeight > this.cHeight ? item.offsetHeight : this.cHeight;
})
this.zdyWidth += this.$refs.ch.offsetWidth;
this.loading = false
}, 200);
} else {
this.$message({
message: res.message,
type: "warning",
});
}
}))
}
},
methods: {},
computed: {
createFlagChange() {
return this.$parent.createFlag;
......@@ -358,28 +456,99 @@ export default {
height: 100%;
position: relative;
overflow: scroll;
.ljz {
width: 500px;
height: 400px;
background-color: darkorange;
.ljz-wrap {
height: auto;
overflow: hidden;
.ljz{
float: left;
margin-right: 20px;
// position: relative;
.ljz-zdy-wrap{
.ljz-zdy{
height: auto;
margin-right: 20px;
display: inline-table;
.zdy-name{
height: 40px;
background-color: rosybrown;
}
}
.ljz-zdy:last-child{
margin-right: 0;
}
}
.ljz-name{
width: 100%;
height: 40px;
background-color: darkorange;
}
}
}
.zdy {
width: 1580px;
height: 200px;
background-color: rosybrown;
.zdy-wrap {
height: auto;
overflow: hidden;
margin-bottom: 60px;
.zdy{
float: left;
margin-right: 20px;
.zdy-zdy-wrap{
.zdy-zdy{
height: auto;
margin-right: 20px;
display: inline-table;
.zdy-name{
height: 40px;
background-color: blanchedalmond;
}
}
.zdy-zdy:last-child{
margin-right: 0;
}
}
.zdy-name{
width: 100%;
height: 40px;
background-color: rosybrown;
}
}
.chTabel-wrap{
display:flex;
flex-direction: column-reverse;
}
}
// .ch-wrap {
// width: 800px;
// height: 200px;
// margin-bottom: 60px;
// background-color: rgb(165, 136, 62);
// }
// 公共部分样式 start
.chTable{
tr{
.floor{
background-color: blanchedalmond;
}
td{
width: 124px;
height: 64px;
line-height: 64px;
text-align: center;
}
}
}
.ch {
width: 800px;
height: 200px;
background-color: rgb(165, 136, 62);
.name{
line-height: 40px;
text-align: center;
}
// end
}
.zrz {
height: 60px;
line-height: 60px;
background-color: darkgoldenrod;
position: absolute;
bottom: 0;
bottom: 6px;
text-align: center;
transition: 0.5s;
}
......