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
<template>
<div class="lpbContent-wrap" ref="lpbContentWrap">
<div
:class="lpbData.ljzs.length == 0 ? ' lpbContent' : 'lpbContent'"
class="lpbContent"
ref="lpbContent"
v-loading="loading"
>
......@@ -23,78 +23,79 @@
:style="{'marginTop':'30px'}"
>
<!-- :style="{'marginTop':ljzs.zdys.length>0?'0':'30px'}" -->
<!-- <div class="ljz-zdy-wrap" :style="{'min-height':ljzzdyHeight+40+'px'}"> -->
<!-- 循环逻辑幢下的幢单元 -->
<div
class="ljz-zdy"
:style="{ 'min-height': ljzzdyHeight + 'px','marginRight':zdyIndex<(ljzs.zdys.length-1)?'20px':'0'}"
ref="ljzzdy"
v-show="ljzs.zdys.length > 0"
v-for="(zdys, zdyIndex) in ljzs.zdys"
:key="zdyIndex"
>
<!-- 循环幢单元下的层户 -->
<!-- <div class="chTable-wrap"> -->
<table
class="chTable psr"
:style="{ top: (ljzzdyHeight - zdys.cs.length * 65) - 80 + 'px' }"
border="1"
cellspacing="0"
cellpadding="0"
v-show="zdys.cs.length > 0"
<div class="ljz-zdy-wrap">
<div
class="ljz-zdy column-reverse"
:style="{ 'min-height': ljzzdyHeight + 40 + 'px','marginRight':zdyIndex<(ljzs.zdys.length-1) || ljzs.cs.length > 1?'20px':'0'}"
ref="ljzzdy"
v-show="ljzs.zdys.length > 0"
v-for="(zdys, zdyIndex) in ljzs.zdys"
:key="zdyIndex"
>
<tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex">
<!-- 显示层数 -->
<td
class="floor"
ref="cBsm"
@contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)"
>
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td
v-for="(hs, hsIndex) in cs.hs"
:rowspan="hs.sjcs"
:colspan="hs.sjhs"
:data-bsm="hs.bsm"
ref="hBsm"
:key="hsIndex"
:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
@click="handleTdClick($event.target, hs.bsm,hs)"
@dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')"
>
{{ hs.shbw }}
<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'" >现</span>
<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm,hs)">
<li style="background-color:#6EDEE1" v-show="hs.qqzt=='1'" @click.stop="dyztIconClick">确</li>
<li style="background-color:#8ADC88" v-show="hs.bazt=='1'" @click.stop="dyztIconClick">备</li>
<li style="background-color:#FF8282" v-show="hs.dyzt=='1'" @click.stop="dyztIconClick">抵</li>
<li style="background-color:#D7CECF" v-show="hs.cfzt=='1'" @click.stop="dyztIconClick">查</li>
<li style="background-color:#D4A3EB" v-show="hs.yyzt=='1'" @click.stop="dyztIconClick">异</li>
<li style="background-color:#A5A3FB" v-show="hs.xzzt=='1'" @click.stop="dyztIconClick">限</li>
</ul>
</td>
</tr>
</table>
<!-- 幢单元名称 -->
<div class="zdy-name name">
<p>
{{ zdys.zdymc }}
</p>
</div>
<!-- </div> -->
<!-- 幢单元名称 -->
<div class="zdy-name name">
<p>
{{ zdys.zdymc }}
</p>
<!-- 循环幢单元下的层户 -->
<!-- <div class="chTable-wrap"> -->
<table
class="chTable psr"
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"
ref="cBsm"
@contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)"
>
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td
v-for="(hs, hsIndex) in cs.hs"
:rowspan="hs.sjcs"
:colspan="hs.sjhs"
:data-bsm="hs.bsm"
ref="hBsm"
:key="hsIndex"
:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
@click="handleTdClick($event.target, hs.bsm,hs)"
@dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')"
>
{{ hs.shbw }}
<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'" >现</span>
<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm,hs)">
<li style="background-color:#6EDEE1" v-show="hs.qqzt=='1'" @click.stop="dyztIconClick">确</li>
<li style="background-color:#8ADC88" v-show="hs.bazt=='1'" @click.stop="dyztIconClick">备</li>
<li style="background-color:#FF8282" v-show="hs.dyzt=='1'" @click.stop="dyztIconClick">抵</li>
<li style="background-color:#D7CECF" v-show="hs.cfzt=='1'" @click.stop="dyztIconClick">查</li>
<li style="background-color:#D4A3EB" v-show="hs.yyzt=='1'" @click.stop="dyztIconClick">异</li>
<li style="background-color:#A5A3FB" v-show="hs.xzzt=='1'" @click.stop="dyztIconClick">限</li>
</ul>
</td>
</tr>
</table>
<!-- </div> -->
</div>
</div>
<!-- 循环逻辑幢下的层户 -->
<div
class="ljz-ch"
ref="ljzDlch"
:style="{ height: 'auto' }"
:style="{ height: 'auto',marginTop:(ljzs.zdys.length>0 ? '39' : 0) + 'px'}"
v-if="ljzs.cs.length > 0"
>
<table
......@@ -158,7 +159,7 @@
</div>
</div>
</div>
<div class="zdy-wrap" :style="{ width: zdyWidth + 'px' }">
<div class="zdy-wrap" :style="{ width: zdyWidth + 'px',marginTop: (lpbData.zdys.length > 0 || lpbData.cs.length > 0) ? '30px' : '0'}">
<!-- 循环自然幢下的幢单元 -->
<div
class="zdy column-reverse"
......@@ -413,7 +414,7 @@ export default {
},
hbjVisible:false,
hcxlzVisible:false,
lpbContentWidth: "",
lpbContentWidth: 0,
ljzWidth: 10000,
zdyWidth: 1000,
cHeight: 0, //独立层户的div高度
......@@ -462,8 +463,6 @@ export default {
this.getLpb(this.zrzbsm, "0");
this.getLpb(this.zrzbsm, "1");
setTimeout(() => {
//tab-content宽度 - 右侧图例宽度 - lp-overview滚动条宽度 - lpbContent的pandingRight
this.lpbContentWidth = this.$store.state.contentWidth - 39 - 20;
//让滚动条滚动至最下面 -6是横向滚动条的高度
this.$refs.lpbContent.scrollTop =
this.$refs.lpbContent.scrollHeight -
......@@ -523,11 +522,16 @@ export default {
//自然幢下元素高度宽度计算
dataChange() {
//计算逻辑幢宽度 20为marginRight值
this.ljzWidth = 20;
this.ljzWidth = 0;
if (this.$refs.ljzzdy != undefined) {
this.$refs.ljzzdy.forEach((item) => {
this.ljzWidth += item.offsetWidth + 20;
});
if (this.$refs.ljzDlch != undefined) {
this.$refs.ljzDlch.forEach((item) => {
this.ljzWidth += item.offsetWidth;
});
}
} else {
if (this.$refs.ljzDlch != undefined) {
this.$refs.ljzDlch.forEach((item) => {
......@@ -571,32 +575,39 @@ export default {
if (this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0) {
//判断自然幢下有没有比层户高的幢单元
let higher = true;
let zrzhighest = 0;
//记录最高的幢单元高度 默认为第一个幢单元高度
let highest = this.$refs.ljzzdy[0].offsetHeight;
zrzhighest = this.$refs.ljzzdy[0].offsetHeight;
this.$refs.ljzzdy.forEach((item) => {
this.ljzcHeight =
item.offsetHeight > this.ljzcHeight
? item.offsetHeight
: this.ljzcHeight;
highest = highest > item.offsetHeight ? highest : item.offsetHeight;
zrzhighest = zrzhighest > item.offsetHeight ? zrzhighest : item.offsetHeight;
});
//判断有无独立层户
if (this.$refs.ljzch != undefined) {
//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
higher = highest > this.$refs.ljzch.offsetHeight ? true : false;
higher = zrzhighest > this.$refs.ljzch.offsetHeight ? true : false;
this.$nextTick(() => {
this.ljzzdyHeight = higher? highest : this.$refs.ljzch.offsetHeight;
highest = 0;
this.ljzzdyHeight = higher? zrzhighest : this.$refs.ljzch.offsetHeight;
zrzhighest = 0;
});
} else {
this.$nextTick(() => {
this.ljzzdyHeight = highest;
highest = 0;
this.ljzzdyHeight = zrzhighest;
zrzhighest = 0;
});
}
} else {
}
this.$nextTick(()=>{
this.lpbContentWidth = this.zdyWidth > this.ljzWidth ?this.zdyWidth - 20 : this.ljzWidth-20;
if (this.lpbContentWidth == 0) {
this.lpbContentWidth = this.$refs.lpbContent.offsetWidth
}
})
},
//户单击事件
handleTdClick(e, bsm,hs) {
......@@ -965,16 +976,6 @@ export default {
this.lpbData = this.sclpbData;
}
},
createFlagChange: function(val) {
setTimeout(() => {
this.lpbContentWidth = this.$refs.lpbContent.offsetWidth - 6;
}, 501);
},
legendToggleFlagChange: function(val) {
setTimeout(() => {
this.lpbContentWidth = this.$refs.lpbContent.offsetWidth - 6;
}, 501);
},
//监听有无通过输入框查询选择到的户,如果有，将其bsm放入hbsmList
searchNum(n) {
// 渲染查询到的户
......@@ -1039,25 +1040,30 @@ export default {
// margin-bottom: 20px;
display: table;
// position: relative;
// .ljz-zdy-wrap {
// width: auto;
// display: table;
.ljz-zdy {
height: auto;
.ljz-zdy-wrap {
width: auto;
display: table;
float: left;
position: relative;
.zdy-name {
width: 100%;
bottom: 0;
position: absolute;
height: 40px;
// background-color: rosybrown;
// border:1px solid #E6E6E6
.ljz-zdy {
height: auto;
float: left;
position: relative;
table{
bottom: 40px;
}
.zdy-name {
width: 100%;
bottom: 0;
position: absolute;
height: 40px;
// background-color: rosybrown;
// border:1px solid #E6E6E6
}
// .chTable-wrap{
// position: absolute;
// bottom: 40px;
// }
}
// .chTable-wrap{
// position: absolute;
// bottom: 40px;
// }
}
div:last-child {
margin-right: 0;
......@@ -1085,12 +1091,12 @@ export default {
}
}
.bottom40 {
margin-bottom: -30px;
// margin-bottom: -30px;
}
.zdy-wrap {
height: auto;
overflow: hidden;
margin-top: 30px;
// margin-top: 30px;
.zdy {
float: left;
margin-right: 20px;
......@@ -1203,7 +1209,6 @@ export default {
width: calc(100% - 2px);
height: 100%;
border:1px solid #E6E6E6;
border-top:0;
}
}
// end
......