Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
5f2725f1 by 杨威
Options

楼盘表模块布局

1 parent 9e5fb92e
Expand all
Inline Side-by-side
Showing 4 changed files with 395 additions and 3 deletions
......@@ -39,7 +39,8 @@ const store = new Vuex.Store({
zrzbsm: '',
zjlxList: [],
gyfsList: [],
hbsm:''
hbsm:'',
contentWidth:'' //内容区域宽度
},
modules: {
user,
......
<template>
<div class="content_box">
<div ref="lpb" class="content_box">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane>
<el-tab-pane label="业主共有" name="yzgy"><yzgy></yzgy></el-tab-pane>
......@@ -33,13 +33,17 @@ export default {
},
},
created() {},
mounted() {},
mounted() {
this.$store.state.contentWidth = this.$refs.lpb.offsetWidth - 40;
},
computed: {},
watch: {},
};
</script>
<style scoped lang="less">
.content_box{
box-sizing: border-box;
padding: 0 20px;
.el-tabs{
width: 100%;
height: 100%;
......
<template>
<div class="lpbContent-wrap" ref="lpbContent">
<div class="lpbContent">
<div class="ljz">逻辑幢</div>
<div class="zdy">幢单元</div>
<div class="ch">层户</div>
</div>
<div
class="zrz"
:style="{ width: lpbContentWidth + 'px'}"
>
{{ lpbData.xmmc }}
</div>
</div>
</template>
<script>
export default {
name: "",
components: {},
props: {},
data() {
return {
lpbData: {
bsm: "e9d1d425c30dd51b72d6f9daacd65d51",
xmmc: "金星小区A幢",
type: "zrz",
max_singlefloorhouse: "10",
zrzh: "600000 000 000 GB 00000 F0001",
total_floors: "10",
min_floor: "-2",
max_floor: "8",
ljzs: [
{
bsm: "ljzljz0101010101",
ljzmc: "地下车库",
type: "ljz",
max_singlefloorhouse: "10",
total_hs: "2",
min_c: "1",
max_c: "2",
zdys: [
{
bsm: "zdybsm01",
zdymc: "一单元",
type: "zdy",
max_singlefloorhouse: "2",
total_floors: "2",
min_floor: "1",
max_floor: "2",
cs: [
{
bsm: "c_01",
type: "c",
sjc: "1",
ch: "1",
maxhs: "2",
hs: [
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-01(1)",
SJCS: "1",
SJHS: "1",
HH: "1",
BDCDYH: "F0001",
status: "10101011",
},
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-02(2)",
SJCS: "2",
SJHS: "1",
HH: "2",
BDCDYH: "F0002",
status: "10101011",
},
],
},
{
bsm: "c_02",
type: "c",
sjc: "2",
ch: "2",
maxhs: "2",
hs: [
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-01(1)",
SJCS: "1",
SJHS: "1",
HH: "1",
BDCDYH: "F0001",
status: "10101011",
},
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-02(2)",
SJCS: "2",
SJHS: "1",
HH: "2",
BDCDYH: "F0002",
status: "10101011",
},
],
},
],
},
],
},
{
bsm: "ljzljz0101010101",
ljzmc: "商业",
type: "ljz",
max_singlefloorhouse: "10",
total_hs: "2",
min_c: "1",
max_c: "2",
},
{
bsm: "ljzljz0101010101",
ljzmc: "住宅",
type: "ljz",
max_singlefloorhouse: "10",
total_hs: "2",
min_c: "1",
max_c: "2",
},
],
zdys: [
{
bsm: "zdybsm01",
zdymc: "一单元",
type: "zdy",
max_singlefloorhouse: "2",
total_floors: "2",
min_floor: "1",
max_floor: "2",
cs: [
{
bsm: "c_01",
type: "c",
sjc: "1",
ch: "1",
maxhs: "2",
hs: [
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-01(1)",
SJCS: "1",
SJHS: "1",
HH: "1",
BDCDYH: "F0001",
status: "10101011",
},
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-02(2)",
SJCS: "2",
SJHS: "1",
HH: "2",
BDCDYH: "F0002",
status: "10101011",
},
],
},
{
bsm: "c_02",
type: "c",
sjc: "2",
ch: "2",
maxhs: "2",
hs: [
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-01(1)",
SJCS: "1",
SJHS: "1",
HH: "1",
BDCDYH: "F0001",
status: "10101011",
},
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-02(2)",
SJCS: "2",
SJHS: "1",
HH: "2",
BDCDYH: "F0002",
status: "10101011",
},
],
},
],
},
{
bsm: "zdybsm02",
zdymc: "二单元",
type: "zdy",
max_singlefloorhouse: "2",
total_floors: "2",
min_floor: "1",
max_floor: "2",
cs: [
{
bsm: "c_01",
type: "c",
sjc: "1",
ch: "1",
maxhs: "2",
hs: [
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-01(1)",
SJCS: "1",
SJHS: "1",
HH: "1",
BDCDYH: "F0001",
status: "10101011",
},
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-02(2)",
SJCS: "2",
SJHS: "1",
HH: "2",
BDCDYH: "F0002",
status: "10101011",
},
],
},
{
bsm: "c_02",
type: "c",
sjc: "2",
ch: "2",
maxhs: "2",
hs: [
{
ID: "e9d1d425c30dd51b72d6f9daacd65d51",
RoomNo: "S01-01(2)",
SJCS: "2",
SJHS: "1",
SXH: "1",
REUN: "F0001",
status: "10101011",
},
{
ID: "e9d1d425c30dd51b72d6f9daacd65d51",
RoomNo: "S01-02",
SJCS: "1",
SJHS: "2",
SXH: "2",
REUN: "F0002",
status: "10101011",
},
],
},
],
},
],
cs: [
{
bsm: "c_01",
type: "c",
sjc: "1",
ch: "1",
maxhs: "2",
hs: [
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-01(1)",
SJCS: "1",
SJHS: "1",
HH: "1",
BDCDYH: "F0001",
status: "10101011",
},
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-02(2)",
SJCS: "2",
SJHS: "1",
HH: "2",
BDCDYH: "F0002",
status: "10101011",
},
],
},
{
bsm: "c_02",
type: "c",
sjc: "2",
ch: "2",
maxhs: "2",
hs: [
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-01(1)",
SJCS: "1",
SJHS: "1",
HH: "1",
BDCDYH: "F0001",
status: "10101011",
},
{
BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
SHBW: "S01-02(2)",
SJCS: "2",
SJHS: "1",
HH: "2",
BDCDYH: "F0002",
status: "10101011",
},
],
},
],
},
lpbContentWidth: "",
};
},
created() {},
mounted() {
setTimeout(() => {
this.lpbContentWidth = this.$store.state.contentWidth - 34 - 6;
}, 100);
},
methods: {},
computed: {
createFlagChange() {
return this.$parent.createFlag;
},
legendToggleFlagChange() {
return this.$parent.legendToggleFlag;
},
},
watch: {
createFlagChange: function(val) {
setTimeout(() => {
this.lpbContentWidth = this.$refs.lpbContent.offsetWidth -6;
}, 501);
},
legendToggleFlagChange: function(val) {
setTimeout(() => {
this.lpbContentWidth = this.$refs.lpbContent.offsetWidth -6;
}, 501);
},
},
};
</script>
<style scoped lang="less">
.lpbContent-wrap {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
.lpbContent {
width: 100%;
height: 100%;
position: relative;
overflow: scroll;
.ljz {
width: 500px;
height: 400px;
background-color: darkorange;
}
.zdy {
width: 1580px;
height: 200px;
background-color: rosybrown;
}
.ch {
width: 800px;
height: 200px;
background-color: rgb(165, 136, 62);
}
}
.zrz {
height: 60px;
line-height: 60px;
background-color: darkgoldenrod;
position: absolute;
bottom: 0;
text-align: center;
transition: 0.5s;
}
}
</style>