Skip to content

任超 / js.CadastralSystem

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

楼盘表模块布局

1 parent 9e5fb92e
Inline Side-by-side
Showing 4 changed files with 615 additions and 159 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%;
......
......@@ -3,13 +3,23 @@
<div class="tab-header">
<div class="searchContent">
<el-radio-group v-model="radio1">
<el-radio-button class="radioBtn" label="1" border>实测</el-radio-button>
<el-radio-button class="radioBtn" label="2" border>预测</el-radio-button>
<el-radio-button class="radioBtn" label="1" border
>实测</el-radio-button
>
<el-radio-button class="radioBtn" label="2" border
>预测</el-radio-button
>
</el-radio-group>
<el-input v-model="bdcdyh" class="searchInput" placeholder="输入不动产单元号"></el-input>
<el-input
v-model="bdcdyh"
class="searchInput"
placeholder="输入不动产单元号"
></el-input>
</div>
<div>
<el-button class="radioBtn" label="1" @click="create" border>创建楼盘</el-button>
<el-button class="radioBtn" label="1" @click="create" border
>创建楼盘</el-button
>
<el-button class="radioBtn" label="2" border>实预测转换</el-button>
<el-button class="radioBtn" label="3" border>批量户</el-button>
<el-button class="radioBtn" label="4" border>批量层</el-button>
......@@ -18,14 +28,26 @@
<el-button class="radioBtn" label="7" border>批量单元号</el-button>
</div>
</div>
<div class="tab-content" :style="{'height':lpbContentHight+'px'}">
<div class="lp-tree" :class="createFlag ? 'w260':'w0'">
<LineTree :pd="pd" class="treeData" :islpb = "islpb" ></LineTree>
<p @click="createFlag = false" style="width:20px;float:left;cursor:pointer;">X</p>
<div
class="tab-content"
ref="tabContent"
:style="{ height: lpbContentHight + 'px' }"
>
<!-- 左侧树结构 -->
<div class="lp-tree" :class="createFlag ? 'w260' : 'w0'">
<LineTree :pd="pd" class="treeData" :islpb="islpb"></LineTree>
<p
@click="createFlag = false"
style="width:20px;float:left;cursor:pointer;"
>
X
</p>
</div>
<div class="lp-overview">
楼盘单元格
<!-- 楼盘表主体 -->
<div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
<lpbContent></lpbContent>
</div>
<!-- 右侧图例 -->
<div class="lp-legend">
<div class="handleCol">
<div class="btn" @click="legendToggle">
......@@ -42,29 +64,30 @@
<span>房屋用途</span>
</div>
</div>
<div class="legendTable-wrap" :style="{'width':legendToggleFlag ? '204px' : '0'}">
<div
class="legendTable-wrap"
:style="{ width: legendToggleFlag ? '204px' : '0' }"
>
<table class="legendTable" cellspacing="1" cellpadding="1" border="1">
<tr>
<th>状态</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr v-for="(item,index) in legendList" :key="index">
<td><i class="el-icon-star-on" :style="{'color':item.color}"></i>{{item.name}}</td>
<td>{{item.ts}}</td>
<td>{{item.mj}}</td>
<tr v-for="(item, index) in legendList" :key="index">
<td>
<i class="el-icon-star-on" :style="{ color: item.color }"></i
>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
</table>
</div>
</div>
</div>
<el-dialog
title="添加"
:visible.sync="dialogVisible"
width="50%"
center
>
<el-dialog title="添加" :visible.sync="dialogVisible" width="50%" center>
<!-- 根据菜单类型（menuType）和右键点击的楼盘类型（treeData.type）来区分弹框内容 -->
<div class="addCh" v-show="menuType == 'ljz'">
<addLjz ref="ljz"></addLjz>
......@@ -78,7 +101,9 @@
<div class="btnGroup">
<el-button type="primary" @click="saveInfo">保存</el-button>
<el-button type="primary" @click="resetInfo">重置</el-button>
<el-button type="primary" @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>取消</el-button
>
</div>
</el-dialog>
</div>
......@@ -86,109 +111,115 @@
<script>
import LineTree from "../../../../components/lineTree/lineTree";
import addLjz from "./ljz/index"
import addZdy from "./zdy/index"
import addCh from "./ch/index"
import {getLpbMenuTree} from "../../../../api/lpb"
import addLjz from "./ljz/index";
import addZdy from "./zdy/index";
import addCh from "./ch/index";
import lpbContent from "./lpbContent/index";
import { getLpbMenuTree } from "../../../../api/lpb";
export default {
name:"",
components:{LineTree,addLjz,addZdy,addCh},
props:{},
data(){
name: "",
components: { LineTree, addLjz, addZdy, addCh, lpbContent },
props: {},
data() {
return {
radio1:'',
radio2:'',
createFlag:false,
bdcdyh:'',
islpb:true,
pd:[], //创建楼盘的树结构数据
dialogVisible:false,
menuType:'',
treeData:{},
legendList:[
radio1: "",
radio2: "",
createFlag: false,
bdcdyh: "",
islpb: true,
pd: [], //创建楼盘的树结构数据
dialogVisible: false,
menuType: "",
treeData: {},
legendList: [
{
name:'未确权',
color:'#2591FD',
ts:'12',
mj:'1633'
name: "未确权",
color: "#2591FD",
ts: "12",
mj: "1633",
},
{
name:'已确权',
color:'#2591FD',
ts:'22',
mj:'3109'
name: "已确权",
color: "#2591FD",
ts: "22",
mj: "3109",
},
{
name:'已注销',
color:'#2591FD',
ts:'13',
mj:'1457'
name: "已注销",
color: "#2591FD",
ts: "13",
mj: "1457",
},
{
name:'已备案',
color:'#2591FD',
ts:'3',
mj:'409'
name: "已备案",
color: "#2591FD",
ts: "3",
mj: "409",
},
{
name:'预抵押',
color:'#2591FD',
ts:'11',
mj:'1466'
name: "预抵押",
color: "#2591FD",
ts: "11",
mj: "1466",
},
{
name:'在建抵押',
color:'#2591FD',
ts:'13',
mj:'1792'
name: "在建抵押",
color: "#2591FD",
ts: "13",
mj: "1792",
},
{
name:'抵押',
color:'#2591FD',
ts:'14',
mj:'13'
name: "抵押",
color: "#2591FD",
ts: "14",
mj: "13",
},
{
name:'查封',
color:'#2591FD',
ts:'9',
mj:'1436'
name: "查封",
color: "#2591FD",
ts: "9",
mj: "1436",
},
{
name:'异议',
color:'#2591FD',
ts:'34',
mj:'4342'
name: "异议",
color: "#2591FD",
ts: "34",
mj: "4342",
},
{
name:'限制',
color:'#2591FD',
ts:'2',
mj:'285'
name: "限制",
color: "#2591FD",
ts: "2",
mj: "285",
},
],
legendToggleFlag:false,
lpbContentHight:''
}
legendToggleFlag: false,
lpbContentHight: "",
lpbContentwidth: "",
};
},
created(){
window.addEventListener('resize', this.getHeight);
this.getHeight()
created() {
window.addEventListener("resize", this.getHeight);
this.getHeight();
},
mounted(){
this.getLpbMenuTree('d1b82b27f2a6ab7bf3f0e7708c96e46f')
mounted() {
this.getLpbMenuTree("d1b82b27f2a6ab7bf3f0e7708c96e46f");
// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
setTimeout(() => {
this.lpbContentwidth = this.$store.state.contentWidth - 34 - 6;
}, 100);
},
methods:{
methods: {
//获取高度计算lpb内容区高度
getHeight(){
this.lpbContentHight = window.innerHeight - 340
getHeight() {
this.lpbContentHight = window.innerHeight - 340;
},
//创建楼盘
create(){
this.createFlag = true
create() {
this.createFlag = true;
},
//获取自然幢树结构数据
getLpbMenuTree(zrzbsm){
getLpbMenuTree(zrzbsm) {
getLpbMenuTree(zrzbsm)
.then((res) => {
this.pd = res.result;
......@@ -196,24 +227,22 @@ export default {
.catch((error) => {});
},
//打开新建楼盘树结构右键菜单唤起的弹框
openLpbDialog(data,type){
console.log(data,'data');
openLpbDialog(data, type) {
console.log(data, "data");
this.treeData = data;
this.menuType = type;
this.dialogVisible = true
this.dialogVisible = true;
},
//弹框中的保存按钮
saveInfo(){
debugger
saveInfo() {
switch (this.menuType) {
case 'ljz':
this.$refs.ljz.onSave(this.$refs.ljz.form,this.treeData.bsm)
case "ljz":
this.$refs.ljz.onSave(this.$refs.ljz.form, this.treeData.bsm);
break;
case 'zdy':
this.$refs.zdy.submitForm('form',this.pd[0].bsm,this.treeData.bsm)
case "zdy":
this.$refs.zdy.submitForm("form", this.pd[0].bsm, this.treeData.bsm);
break;
case 'ch':
case "ch":
break;
default:
......@@ -221,16 +250,16 @@ export default {
}
},
//弹框中的重置按钮
resetInfo(){
resetInfo() {
switch (this.menuType) {
case 'ljz':
this.$refs.ljz.reset()
case "ljz":
this.$refs.ljz.reset();
break;
case 'zdy':
this.$refs.zdy.reset()
case "zdy":
this.$refs.zdy.reset();
break;
case 'ch':
this.$refs.ch.reset()
case "ch":
this.$refs.ch.reset();
break;
default:
......@@ -238,98 +267,133 @@ export default {
}
},
//关闭弹框
closeDaialog(){
this.dialogVisible = false
closeDaialog() {
this.dialogVisible = false;
},
//图例的展开收起
legendToggle(){
legendToggle() {
this.legendToggleFlag = !this.legendToggleFlag;
}
},
computed: {},
destroyed(){
window.removeEventListener('resize', this.getHeight)
},
computed: {
// tabContentWidth(){
// let w = this.$refs.tabContent != undefined ? this.$refs.tabContent.offsetWidth : 0
// return w;
// // if(this.$refs.tabContent != undefined){
// // return this.$refs.tabContent.offsetWidth
// // }else{
// // return
// // }
// }
},
destroyed() {
window.removeEventListener("resize", this.getHeight);
},
watch: {
legendToggleFlag(n) {
if (n) {
this.lpbContentwidth -= 204;
} else {
this.lpbContentwidth += 204;
}
},
}
createFlag(n) {
if (n) {
this.lpbContentwidth -= 260;
} else {
this.lpbContentwidth += 260;
}
},
// tabContentWidth(n){
// debugger
// if(n != 0){
// // 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
// this.lpbContentwidth = this.$refs.tabContent.offsetWidth - 34 - 6;
// }
// }
},
};
</script>
<style scoped lang="less">
.edit{
.edit {
height: 100%;
background-color: #EAEDF5;
.tab-header{
border: 1px solid #DEDEDE;
background-color: #eaedf5;
.tab-header {
border: 1px solid #dedede;
border-top: 0;
box-sizing: border-box;
padding: 20px 0;
background-color: #ffffff;
margin-bottom: 20px;
.searchContent{
.searchContent {
margin-bottom: 20px;
.searchInput{
.searchInput {
width: 300px;
margin-left: 20px;
display: inline-block;
}
}
.radioBtn{
.radioBtn {
margin-left: 20px;
/deep/.el-radio-button__inner{
border: 1px solid #DCDFE6;
border-radius:4px;
box-shadow: 0 0 0 0 #409EFF!important;
/deep/.el-radio-button__inner {
border: 1px solid #dcdfe6;
border-radius: 4px;
box-shadow: 0 0 0 0 #409eff !important;
}
}
}
.tab-content{
.tab-content {
background-color: #ffffff;
display: flex;
overflow-y: scroll;
.lp-tree{
.lp-tree {
height: 100%;
overflow: hidden;
transition: .5s;
.treeData{
transition: 0.5s;
.treeData {
margin-top: 20px;
margin-left: 20px;
float: left;
}
}
.w0{
.w0 {
width: 0;
}
.w260{
.w260 {
width: 260px;
}
.lp-overview{
.lp-overview {
transition: 0.5s;
flex: 1;
}
.lp-legend{
transition: .5s;
.lp-legend {
transition: 0.5s;
height: 100%;
font-size: 14px;
.handleCol{
.handleCol {
width: 34px;
float: right;
height: 100%;
.btn{
.btn {
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 1px solid #E6E6E6 ;
border-bottom: 1px solid #e6e6e6;
}
.dyzt{
.dyzt {
height: 81px;
line-height: 81px;
}
.fwxz,.fwyt{
.fwxz,
.fwyt {
height: 122px;
}
.dyzt,.fwxz,.fwyt{
border-bottom: 1px solid #E6E6E6 ;
span{
.dyzt,
.fwxz,
.fwyt {
border-bottom: 1px solid #e6e6e6;
span {
text-align: center;
height: 100%;
-webkit-writing-mode: vertical-rl;
......@@ -339,19 +403,19 @@ export default {
}
}
}
.legendTable-wrap{
transition: .5s;
.legendTable-wrap {
transition: 0.5s;
float: right;
overflow: hidden;
.legendTable{
.legendTable {
margin-top: -1px;
tr{
tr {
height: 40px;
line-height: 40px;
th:first-child{
th:first-child {
width: 80px;
}
th{
th {
width: 60px;
height: 40px;
white-space: nowrap;
......@@ -361,7 +425,7 @@ export default {
text-align: center;
white-space: nowrap;
}
td:first-child{
td:first-child {
text-align: left;
text-indent: 2px;
}
......@@ -370,7 +434,7 @@ export default {
}
}
}
.btnGroup{
.btnGroup {
margin: 20px auto 0;
width: 230px;
}
......
<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>