Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
ed5aff1d by 杨威
Options

户合并流程完善

1 parent 28393428
Inline Side-by-side
Showing 2 changed files with 489 additions and 2 deletions
......@@ -184,7 +184,7 @@
</div>
</el-tab-pane>
<el-tab-pane label="户合并" name="h">
<div class="hb-tabs">
<div class="hb-tabs psn">
<hfghb></hfghb>
<div class="header-button" :style="{width:fgBoxWidth+'px'}">
<el-button type="primary" class="saveBtn">保存</el-button>
......@@ -510,7 +510,9 @@
}
}
}
.psn{
position: unset!important;
}
.hb-tabs {
height: auto;
width: 100%;
......
<template>
<div class="main">
<el-row v-show="isSearch">
<el-col :span="24">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="宗地编码">
<el-input
v-model="queryData.zddm"
placeholder="输入宗地编码"
></el-input>
</el-form-item>
<el-form-item label="不动产权证号">
<el-input
v-model="queryData.bdcqzh"
placeholder="输入不动产权证号"
></el-input>
</el-form-item>
<el-form-item label="不动产单元号">
<el-input
maxlength="28"
v-model="queryData.bdcdyh"
placeholder="输入不动产单元号"
></el-input>
</el-form-item>
<el-button type="primary" style="margin-left:30px" @click="search">查询</el-button>
<el-button type="warning" @click="reset">重置</el-button>
</el-form>
</el-col>
</el-row>
<div class="dataGrid" v-show="isSearch" ref="dataGrid">
<el-table
:data="tableData"
:height="tableHeight"
:row-class-name="tableRowClassName"
>
<el-table-column type="index" width="80" align="center" label="序号">
</el-table-column>
<el-table-column prop="bdcdyh" align="left" label="不动产单元号">
</el-table-column>
<el-table-column prop="xmmc" align="left" label="项目名称">
</el-table-column>
<el-table-column prop="bdcqzh" align="left" label="不动产权证号">
</el-table-column>
<el-table-column prop="dylx" align="left" label="类型">
<template slot-scope="scope">
{{scope.row.dylx | bdcLxFilter}}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-tooltip class="item" effect="light" content="办理" placement="top">
<i class="iconfont iconbanli iconfontEdit" @click="handleClick(scope.row)" style="padding:0 10px"></i>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background layout="prev, pager, next,total" :total="total"
:current-page="queryData.pageNo" :page-size="queryData.pageSize" @current-change="handleCurrentChange">
</el-pagination>
</div>
</div>
<div class="lpb" v-if="!isSearch">
<div class="lpb-header">
<el-radio-group v-model="scyclx" @change="scyclxChange">
<el-radio-button label="0">预测</el-radio-button>
<el-radio-button label="1">实测</el-radio-button>
</el-radio-group>
<el-input
maxlength="28"
v-model="bdcdyh"
:style="{ width: inputWidth + 'px' }"
@change="inputChange"
class="searchInput"
placeholder="输入不动产单元号或室号"
><i
slot="suffix"
class="el-input__icon el-icon-search"
@click="inputChange"
></i
></el-input>
<el-link type="primary" style="margin-left:20px" @click="isSearch=true">重新选择自然幢</el-link>
</div>
<div class="lpb-content" ref="lpbContentWrap" :style="{ height: lpbContentHeight + 'px' }">
<!-- 楼盘表主体 -->
<div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
<lpbContent ref="lpbContent"></lpbContent>
</div>
<!-- 右侧图例 -->
<div class="lp-legend">
<div class="handleCol">
<div class="btn" @click="legendToggle">
<i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
<i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
</div>
<div
:class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'"
@click="selectedZt = 'dyzt'"
>
<span>单元状态</span>
</div>
<div
:class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'"
@click="selectedZt = 'fwxz'"
>
<span>房屋性质</span>
</div>
<div
:class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'"
@click="selectedZt = 'fwyt'"
>
<span>房屋用途</span>
</div>
</div>
<div
class="legendTable-wrap"
:style="{ width: legendToggleFlag ? '204px' : '0' }"
>
<table
class="legendTable"
v-show="selectedZt == 'dyzt'"
cellspacing="1"
cellpadding="1"
border="1"
>
<tr>
<th>状态</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr
v-for="(item, index) in dyztList"
:key="index"
class="cp"
@click="handleChoosedH(item.bsms,item.color)"
>
<td>
<i class="fa fa-circle" :style="{ color: item.color }"></i
>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
</table>
<table
class="legendTable"
v-show="selectedZt == 'fwxz'"
cellspacing="1"
cellpadding="1"
border="1"
>
<tr>
<th>性质</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr
v-for="(item, index) in fwxzList"
:key="index"
class="cp"
@click="handleChoosedH(item.bsms,item.color)"
>
<td>
<i class="fa fa-circle" :style="{ color: item.color }"></i
>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
<tr v-show="fwxzList.length < 1">
<td colspan="3" class="tac">暂无数据</td>
</tr>
</table>
<table
class="legendTable"
v-show="selectedZt == 'fwyt'"
cellspacing="1"
cellpadding="1"
border="1"
>
<tr>
<th>用途</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr
v-for="(item, index) in fwytList"
:key="index"
class="cp"
@click="handleChoosedH(item.bsms,item.color)"
>
<td>
<i class="fa fa-circle" :style="{ color: item.color }"></i
>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
<tr v-show="fwytList.length < 1">
<td colspan="3" class="tac">暂无数据</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import lpbContent from "../../../zrz/lpb/bjlp/lpbContent/index";
export default {
name:"",
components:{lpbContent},
props:{},
data(){
return {
queryData:{
zddm:'',
bdcdyh:'',
bdcqzh:'',
pageNo:1,
pageSize:10
},
tableData:[],
total:0,
tableHeight:0,
isSearch:true,//办理前/后
scyclx:'0', //实预测类型
bdcdyh:'',//室号搜索
inputWidth: 220,//搜索框宽度
legendToggleFlag: false,
selectedZt:'dyzt',
dyztList: [
{
name: "未确权",
color: "#83AAFE",
ts: "12",
mj: "1633",
},
{
name: "已确权",
color: "#6EDEE1",
ts: "22",
mj: "3109",
},
{
name: "已备案",
color: "#8ADC88",
ts: "3",
mj: "409",
},
{
name: "预抵押",
color: "#F2AD67",
ts: "11",
mj: "1466",
},
{
name: "在建抵押",
color: "#F191C8",
ts: "13",
mj: "1792",
},
{
name: "抵押",
color: "#FF8282",
ts: "14",
mj: "13",
},
{
name: "查封",
color: "#D7CECF",
ts: "9",
mj: "1436",
},
{
name: "异议",
color: "#D4A3EB",
ts: "34",
mj: "4342",
},
{
name: "限制",
color: "#A5A3FB",
ts: "2",
mj: "285",
},
],
fwxzList: [],
fwytList: [],
lpbContentHeight: 0,
lpbContentwidth: 0,
}
},
created(){},
mounted(){
this.$nextTick(()=>{
this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 360;
this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 320;
this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6;
})
},
methods:{
//查询
search(){
this.tableData = [
{
bdcdyh:'00111111111111111',
xmmc:'测试自然幢',
bdcqzh:'A12111111111111111',
dylx:'zrz',
}
]
},
//重置
reset(){
this.queryData = {
zddm:'',
bdcdyh:'',
bdcqzh:'',
pageNo:1,
pageSize:10
};
this.search()
},
//办理
handleClick(row){
this.isSearch = false;
},
//分页
handleCurrentChange(val) {
this.pageNo = val;
this.queryData.pageNo = val;
this.search();
},
//表格行背景色
tableRowClassName({row, rowIndex}) {
if (rowIndex % 2 !== 0) {
return "even-row";
} else {
return "";
}
},
//实预测转换
scyclxChange(){
},
inputChange() {
if (this.bdcdyh != "") {
// 根据不动产单元号或者室号搜索
// this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
} else {
this.$message({
message: "请输入内容后查询",
type: "warning",
});
}
},
//图例的展开收起
legendToggle() {
this.legendToggleFlag = !this.legendToggleFlag;
},
},
computed: {},
watch: {
//树结构和图例伸缩时修改楼盘表主要内容区宽度
legendToggleFlag(n) {
if (n) {
this.lpbContentwidth -= 204;
} else {
this.lpbContentwidth += 204;
}
},
},
}
</script>
<style scoped lang="less">
.main{
margin-bottom: 14px;
.el-row{
box-sizing: border-box;
padding-left: 2px;
margin-bottom: 6px;
}
.lpb{
box-sizing: border-box;
padding-left: 2px;
.searchInput {
transition: 0.5s;
margin-left: 20px;
display: inline-block;
}
.lpb-content{
margin-top: 20px;
background-color: #ffffff;
display: flex;
overflow-y: scroll;
.lp-overview {
transition: 0.5s;
flex: 1;
padding-right: 20px;
box-sizing: border-box;
}
.lp-legend {
transition: 0.5s;
height: 100%;
font-size: 14px;
.handleCol {
width: 34px;
float: right;
height: 100%;
.btn {
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #0091ff;
color: #fff;
border-bottom: 1px solid #e6e6e6;
}
.dyzt {
height: 81px;
line-height: 81px;
}
.fwxz,
.fwyt {
height: 122px;
}
.dyzt,
.fwxz,
.fwyt {
cursor: pointer;
border-bottom: 1px solid #e6e6e6;
span {
text-align: center;
height: 100%;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
line-height: 34px;
letter-spacing: 2px;
}
}
.selectedZt {
background-color: #0091ff;
color: #fff;
}
}
.legendTable-wrap {
transition: 0.5s;
float: right;
overflow: hidden;
.legendTable {
margin-top: -1px;
tr {
height: 40px;
line-height: 40px;
th:first-child {
width: 80px;
}
th {
width: 60px;
height: 40px;
white-space: nowrap;
}
td {
height: 40px;
text-align: center;
white-space: nowrap;
}
td:first-child {
text-align: left;
text-indent: 2px;
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file