Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
35f7856f by weimo934
Options

style(fwsxbg):范围属性调整

1 parent a60277d2
Inline Side-by-side
Showing 3 changed files with 959 additions and 697 deletions
......@@ -58,3 +58,15 @@ export function queryStatus(bsm) {
}
})
}
/**
* 范围属性变更查询
* @param data
*/
export function queryFwsxbg(data) {
return request({
url:"/system/basiccommon/query-fwsxbg",
method:"post",
data:data
})
}
......
<template>
<div class="main">
<template v-if="isFwsxbg">
<!-- <p class="tips">查询条件</p> -->
<el-row class="box">
<el-col :span="24">
<el-row>
<el-col :span="24">
<el-form :inline="true" class="demo-form-inline" label-width="106px">
<el-form-item label="宗地编码">
<el-input
v-model="queryData.zddm"
placeholder="输入宗地编码"
@change="query"
></el-input>
</el-form-item>
<el-form-item label="项目名称">
<el-input
placeholder="输入项目名称"
v-model="queryData.xmmc"
@change="query"
></el-input>
</el-form-item>
<el-form-item label="不动产单元号">
<el-input
maxlength="28"
v-model="queryData.bdcdyh"
placeholder="输入不动产单元号"
@change="query"
></el-input>
</el-form-item>
<el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
<el-button type="warning" @click="reset" icon="el-icon-refresh">重置</el-button>
<el-button
type="primary"
@click="moreSearch"
>更多查询
</el-button>
<!-- @click="ismore = !ismore" -->
</el-form>
</el-col>
</el-row>
<el-row class="row3" v-if="ismore">
<el-col :span="22">
<el-form :inline="true" class="demo-form-inline" label-width="106px">
<el-form-item label="权利人名称">
<el-input
placeholder="输入权利人名称"
v-model="queryData.qlrmc"
@change="query"
></el-input>
</el-form-item>
<el-form-item label="坐落">
<el-input
v-model="queryData.zl"
placeholder="输入坐落地址"
@change="query"
></el-input>
</el-form-item>
<el-form-item label="不动产权证号">
<el-input
placeholder="输入不动产权证号"
v-model="queryData.bdcqzh"
@change="query"
></el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="2" :offset="offset">
</el-col>
</el-row>
</el-col>
</el-row>
<!-- <p class="tips">查询列表</p> -->
<div class="dataGrid" 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" width="150" label="项目名称">
</el-table-column>
<el-table-column prop="bdcqzh" align="left" label="不动产权证号">
</el-table-column>
<!--<el-table-column prop="dylx" align="left" width="120" label="类型">
<template slot-scope="scope">
{{ scope.row.dylx | bdcLxFilter }}
</template>
</el-table-column>-->
<el-table-column prop="qlrmc" align="left" width="120" label="权利人">
</el-table-column>
<el-table-column prop="zl" align="left" label="坐落"></el-table-column>
<el-table-column
prop="addtime"
align="left"
width="120"
label="转入时间"
>
<template slot-scope="scope">
{{ scope.row.addtime | timeFilter }}
</template>
</el-table-column>
<!-- <el-table-column prop="cjr" align="left" width="120" label="创建人">
</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>
<el-tooltip class="item" effect="light" content="定位" placement="top">
<i class="iconfont icondingwei iconfontEdit"></i>
</el-tooltip>
<!-- <el-button @click="handleClick(scope.row)" type="text" size="small"
>办理
</el-button>
<el-button type="text" size="small">定位</el-button> -->
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="prev, pager, next,total"
:total="total"
:current-page="pageNo"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</div>
</template>
<div class="lpb" v-if="!isFwsxbg">
<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="isFwsxbg=true">重新选择户</el-link>
</div>
<div class="lpb-content" ref="lpbContentWrap" :style="{ height: lpbContentHeight + 'px' }" v-loading="lpbloading">
<!-- 楼盘表主体 -->
<div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
<lpbContent ref="lpbContent" class="" :zrzbsm='zrzbsm' lpbParent = 'isFwsxbg'></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 { getSearchList } from "@api/search";
import { fwsxbgbl } from "@api/common";
import {getQjHDetailByBsm} from "@api/h";
import {queryFwsxbg} from "@api/search"
import lpbContent from "./../../views/zrz/lpb/bjlp/lpbContent/index"
import { getLpbMenuTree, batchScYcChange, getLpbTj,batchGeneratorBdcdyh,getLpbFwytAndQlxz ,batchCommit} from "@api/lpb";
export default {
name: "fwsxbgTab",
components: { lpbContent },
inject:['getRightTree','getTreeByBsm'],
props: {
queryType:{
type:String,
default:'zd'
}
},
data() {
return {
offset: 22,
ismore: false,
queryData: {
bdcdyh: "",
bdcqzh: "",
qlrmc: "",
xmmc: "",
zddm: "",
zl: "",
pageNo:this.pageNo,
pageSize:this.pageSize,
type:this.queryType
},
type:'fwsxbg',
total: 0,
pageNo: 1,
pageSize: 15,
tableData: [],
tableHeight: "100",
//queryData: {},
isFwsxbg:true,
zrzbsm:'',
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,
lpbloading:true,
};
},
created() {},
mounted() {
this.getData(this.queryData);
// console.log(document.documentElement.clientHeight || document.body.clientHeight,'document.documentElement.clientHeight || document.body.clientHeight');
this.$nextTick(() => {
this.tableHeight =
(document.documentElement.clientHeight || document.body.clientHeight) -
352;
this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 222;
});
},
methods: {
// 重置
reset(){
this.queryData = {
bdcdyh: "",
bdcqzh: "",
qlrmc: "",
xmmc: "",
zddm: "",
zl: "",
type: this.queryType
}
},
// 查询
query(){
this.getData(this.queryData)
},
// 更多查询
moreSearch(){
if(this.ismore === true){
this.ismore = false;
this.$parent.tableHeight+=55;
}else {
this.ismore = true;
this.$parent.tableHeight-=55;
}
},
onSubmit() {},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "even-row";
} else {
return "";
}
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNo = val;
this.queryData.pageNo = val;
this.getData(this.queryData);
},
getData(data) {
/*data['type'] = this.type
data["qszt"] = this.qszt;
getSearchList(data).then((res) => {
this.tableData = res.result.records;
this.total = res.result.total;
});*/
queryFwsxbg(data).then(res=>{
if (res.success) {
this.tableData = res.result.records;
this.total = res.result.total;
}
})
},
//获取子组件点击查询触发的事件
/* geQuerytData(obj) {
this.queryData = obj;
//将obj作为参数调用接口查询表格数据
this.queryData["pageSize"] = this.pageSize;
this.pageNo = 1;
this.queryData["pageNo"] = 1;
this.getData(this.queryData);
},*/
//点击办理
handleClick(row) {
let params = { bsm: row.bsm, type: this.queryType };
if(this.queryType == 'h'){
getQjHDetailByBsm(row.bsm).then((res)=>{
if(res.code===200){
this.zrzbsm = res.result.zrzbsm;
this.isFwsxbg = false;
}
})
}else{
this.$confirm('是否确定范围属性变更?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
fwsxbgbl(params)
.then((res) => {
if (res.success) {
// this.$message({
// message: res.message,
// type: "变更成功",
// });
let path = "";
switch (this.queryType) {
case "zrz":
this.$store.state.zrzbsm = res.result;
this.getTreeByBsm(res.result,this.queryType,'2');
path = "/zrz";
break;
case "zd":
this.$store.state.zdbsm = res.result;
this.getRightTree(res.result,'2');
path = "/zd";
break;
case "dz":
this.$store.state.dzbsm = res.result;
this.getTreeByBsm(res.result,this.queryType,'2');
path = "/dz";
break;
default:
break;
}
this.$router.push({
path: path,
query: {
bsm: res.result,
source: 2,
auth:'2'
}
});
} else {
this.$message({
message: res.message,
type: "warning",
});
}
})
.catch((error) => {
this.$message({
message: res.message,
type: "error",
});
});
}).catch(() => {
});
}
},
//实预测转换
scyclxChange(){
//清空已选中层户
// this.bsms = [];
this.$refs.lpbContent.hbsmList = [];
this.$nextTick(()=>{
//户
this.$refs.lpbContent.$refs.hBsm.forEach(item=>{
item.style.borderColor = 'rgb(230, 230, 230)';
if (item.className == "tdSelect") {
item.className = "";
}
});
//层
this.$refs.lpbContent.$refs.cBsm.forEach(item=>{
console.log(item.className,'item.className');
item.className = "floor";
});
})
//获取图例数据
this.getDyztBsmList();
this.getLpbFwytAndQlxz();
},
inputChange() {
if (this.bdcdyh != "") {
// 根据不动产单元号或者室号搜索
// this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
} else {
this.$message({
message: "请输入内容后查询",
type: "warning",
});
}
},
//图例的展开收起
legendToggle() {
this.legendToggleFlag = !this.legendToggleFlag;
},
//获取各项单元状态统计数据
getDyztBsmList() {
let data = {
zrzbsm: this.$store.state.zrzbsm,
scyclx: this.scyclx,
};
getLpbTj(data).then((res) => {
if (res.code === 200) {
this.dyztList = res.result;
this.dyztList.splice(1,0,this.dyztList[8]);
this.dyztList.pop();
this.dyztList.forEach(item=>{
item.ts = item.bsms.length;
switch (item.name) {
case 'Qqzt':
item.color = "#6EDEE1";
item.name = "已确权"
break;
case 'Wqqzt':
item.color = "#83AAFE";
item.name = "未确权"
break;
case 'Bazt':
item.color = "#8ADC88";
item.name = "已备案"
break;
case 'Ydyzt':
item.color = "#F2AD67";
item.name = "预抵押"
break;
case 'Zjgcdyzt':
item.color = "#F191C8";
item.name = "在建抵押"
break;
case 'Dyzt':
item.color = "#FF8282";
item.name = "抵押"
break;
case 'Cfzt':
item.color = "#D7CECF";
item.name = "查封"
break;
case 'Yyzt':
item.color = "#D4A3EB";
item.name = "异议"
break;
case 'Xzzt':
item.color = "#A5A3FB";
item.name = "限制"
break;
default:
break;
}
})
}
});
},
// 获取房屋用途和房屋性质统计数据
getLpbFwytAndQlxz(){
let data = {
zrzbsm: this.$store.state.zrzbsm,
scyclx: this.scyclx,
};
getLpbFwytAndQlxz(data).then((res) => {
if (res.code === 200) {
// this.fwytList = res.result
this.fwytList = res.result.fwyt;
this.fwxzList = res.result.qlxz;
if(this.fwytList.length>0){
this.fwytList.forEach(item=>{
item.color = "#2591FD";
item.ts = item.bsms.length
})
}
if(this.fwxzList.length>0){
this.fwxzList.forEach(item=>{
item.color = "#2591FD";
item.ts = item.bsms.length
})
}
}
});
},
//切换房屋状态
handleChoosedH(bsms,color) {
//每次切换房屋状态，将之前高亮的户边框颜色重置为默认
this.$refs.lpbContent.choosedList = [];
this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
item.style.border = '';
});
// console.log(bsms,'bsms');
// console.log(color,'color');
// Dyzt:{list:[],mj:''}
//清除选中户
// this.$refs.lpbContent.clearChoosedH();
this.$nextTick(()=>{
//给hBsmList传值
// console.log(bsms,'bsms');
this.$refs.lpbContent.choosedList = bsms;
this.$refs.lpbContent.borderColor = color;
})
},
},
computed: {},
watch: {
ismore: function(val) {
if (val) {
this.offset = 0;
} else {
this.offset = 22;
this.queryData.qlrmc = "";
this.queryData.xmmc = "";
this.queryData.bdcqzh = "";
}
},
//树结构和图例伸缩时修改楼盘表主要内容区宽度
legendToggleFlag(n) {
if (n) {
this.lpbContentwidth -= 204;
} else {
this.lpbContentwidth += 204;
}
},
//选择自然幢展示楼盘表后，查询右侧图例数据
isFwsxbg(n){
if (!n) {
this.getDyztBsmList();
this.getLpbFwytAndQlxz();
this.$nextTick(()=>{
this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6;
})
}
},
//改变syclx，更新楼盘表数据
scyclx(n){
this.$refs.lpbContent.lpbData = n == 0 ? this.$refs.lpbContent.yclpbData : this.$refs.lpbContent.sclpbData
},
selectedZt(n){
this.legendToggleFlag = true;
},
queryType(val){
console.log(val,"范围属性变更,tab")
this.queryData.type=val;
}
},
};
</script>
<style scoped lang="less">
.main{
padding: 0;
.box{
background-color: white;
padding: 10px 0;
margin-bottom: 10px;
}
}
/*.main {
background-color: #eaedf5;
.tips{
color: #9B9B9B;
margin-left: 2px;
margin-bottom: 10px;
}
.demo-form-inline {
margin-top: 18px;
.moreSearchBtn {
background-color: #1ad6e1;
border-color: #1ad6e1;
}
.moreSearchBtn:focus,
.moreSearchBtn:hover {
background-color: rgba(28, 200, 229, 0.6);
}
}
.dataGrid {
flex: 1;
.pagination {
padding: 18px 0 0 0;
}
}
.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;
margin-right: 20px;
box-sizing: border-box;
border: 1px solid rgb(236, 236, 236);
border-top: 0;
border-bottom: 0;
}
.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,
.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>
<template>
<div class="main">
<template v-if="isFwsxbg">
<!-- <p class="tips">查询条件</p> -->
<SearchHead @getSearchCondition="geQuerytData" :type="type"></SearchHead>
<!-- <p class="tips">查询列表</p> -->
<div class="dataGrid" 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" width="150" label="项目名称">
</el-table-column>
<el-table-column prop="bdcqzh" align="left" label="不动产权证号">
</el-table-column>
<el-table-column prop="dylx" align="left" width="120" label="类型">
<template slot-scope="scope">
{{ scope.row.dylx | bdcLxFilter }}
</template>
</el-table-column>
<el-table-column prop="qlrmc" align="left" width="120" label="权利人">
</el-table-column>
<el-table-column prop="zl" align="left" label="坐落"></el-table-column>
<el-table-column
prop="addtime"
align="left"
width="120"
label="转入时间"
>
<template slot-scope="scope">
{{ scope.row.addtime | timeFilter }}
</template>
</el-table-column>
<!-- <el-table-column prop="cjr" align="left" width="120" label="创建人">
</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>
<el-tooltip class="item" effect="light" content="定位" placement="top">
<i class="iconfont icondingwei iconfontEdit"></i>
</el-tooltip>
<!-- <el-button @click="handleClick(scope.row)" type="text" size="small"
>办理
</el-button>
<el-button type="text" size="small">定位</el-button> -->
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="prev, pager, next,total"
:total="total"
:current-page="pageNo"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</div>
</template>
<div class="lpb" v-if="!isFwsxbg">
<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="isFwsxbg=true">重新选择户</el-link>
</div>
<div class="lpb-content" ref="lpbContentWrap" :style="{ height: lpbContentHeight + 'px' }" v-loading="lpbloading">
<!-- 楼盘表主体 -->
<div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
<lpbContent ref="lpbContent" class="" :zrzbsm='zrzbsm' lpbParent = 'isFwsxbg'></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>
<el-tabs v-model="tabName" @tab-click="handleClick" class="menu">
<el-tab-pane label="宗地" name="zd">
<fwsxbg-tab queryType="zd"></fwsxbg-tab>
</el-tab-pane>
<el-tab-pane label="多幢" name="dz">
<fwsxbg-tab v-if="dzVisible" queryType="dz"></fwsxbg-tab>
</el-tab-pane>
<el-tab-pane label="自然幢" name="zrz">
<fwsxbg-tab v-if="zrzVisible" queryType="zrz"></fwsxbg-tab>
</el-tab-pane>
<el-tab-pane label="构筑物" name="gzw">
<fwsxbg-tab v-if="gzwVisible" queryType="gzw"></fwsxbg-tab>
</el-tab-pane>
<el-tab-pane label="户" name="h">
<fwsxbg-tab v-if="hVisible" queryType="h"></fwsxbg-tab>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import SearchHead from "@components/searchHead/searchHead";
import { getSearchList } from "@api/search";
import { fwsxbgbl } from "@api/common";
import {getQjHDetailByBsm} from "@api/h";
import lpbContent from "../../../zrz/lpb/bjlp/lpbContent/index";
import { getLpbMenuTree, batchScYcChange, getLpbTj,batchGeneratorBdcdyh,getLpbFwytAndQlxz ,batchCommit} from "@api/lpb";
import fwsxbgTab from '@components/fwsxbg/fwsxbgTab'
export default {
name: "",
components: { SearchHead,lpbContent },
inject:['getRightTree','getTreeByBsm'],
components: { fwsxbgTab},
inject:[],
props: {},
data() {
return {
type:'fwsxbg',
qszt: ['2'],
total: 0,
pageNo: 1,
pageSize: 15,
tableData: [],
tableHeight: "100",
queryData: {},
isFwsxbg:true,
zrzbsm:'',
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,
lpbloading:true,
};
data(){
return{
tabName:'zd',
dzVisible:false,
zrzVisible:false,
gzwVisible:false,
hVisible:false,
}
},
created() {},
mounted() {
this.getData({pageSize:this.pageSize});
// console.log(document.documentElement.clientHeight || document.body.clientHeight,'document.documentElement.clientHeight || document.body.clientHeight');
this.$nextTick(() => {
this.tableHeight =
(document.documentElement.clientHeight || document.body.clientHeight) -
352;
this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 222;
});
},
methods: {
onSubmit() {},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "even-row";
} else {
return "";
methods:{
handleClick(tab,event){
console.log(tab,'范围属性变更tab');
switch (tab.name) {
case "dz":
this.dzVisible=true;
break;
case "zrz":
this.zrzVisible=true;
break;
case "gzw":
this.gzwVisible=true;
break;
case "h":
this.hVisible=true;
break;
default:
break;
}
}
}
};
</script>
<style scoped lang="less">
.main {
height: 100%;
.menu {
height: 100%;
/deep/ .el-tabs__content {
position: unset;
margin-top: 40px;
overflow: visible;
}
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNo = val;
this.queryData.pageNo = val;
this.getData(this.queryData);
},
getData(data) {
data['type'] = this.type
data["qszt"] = this.qszt;
getSearchList(data).then((res) => {
this.tableData = res.result.records;
this.total = res.result.total;
});
},
//获取子组件点击查询触发的事件
geQuerytData(obj) {
this.queryData = obj;
//将obj作为参数调用接口查询表格数据
this.queryData["pageSize"] = this.pageSize;
this.pageNo = 1;
this.queryData["pageNo"] = 1;
this.getData(this.queryData);
},
//点击办理
handleClick(row) {
let params = { bsm: row.glbsm, type: row.dylx };
if(row.dylx == 'h'){
getQjHDetailByBsm(row.glbsm).then((res)=>{
if(res.code===200){
this.zrzbsm = res.result.zrzbsm;
this.isFwsxbg = false;
/deep/ .el-tabs__header {
position: -webkit-fixed;
position: fixed;
top: 120px;
z-index: 999;
width: 100%;
margin-bottom: 0;
border: 0;
/deep/ .el-tabs__nav-scroll {
height: 50px;
box-sizing: border-box;
padding-left: 20px;
.el-tabs__active-bar {
display: none;
}
})
}else{
this.$confirm('是否确定范围属性变更?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
fwsxbgbl(params)
.then((res) => {
if (res.code == 200) {
// this.$message({
// message: res.message,
// type: "变更成功",
// });
let path = "";
switch (row.dylx) {
case "zrz":
this.$store.state.zrzbsm = res.result;
this.getTreeByBsm(res.result,row.dylx,'2');
path = "/zrz";
break;
case "zd":
this.$store.state.zdbsm = res.result;
this.getRightTree(res.result,'2');
path = "/zd";
break;
case "dz":
this.$store.state.dzbsm = res.result;
this.getTreeByBsm(res.result,row.dylx,'2');
path = "/dz";
break;
default:
break;
}
this.$router.push({
path: path,
query: {
bsm: res.result,
source: 2,
auth:'2'
}
});
} else {
this.$message({
message: res.message,
type: "warning",
});
}
})
.catch((error) => {
this.$message({
message: res.message,
type: "error",
});
});
}).catch(() => {
});
}
},
//实预测转换
scyclxChange(){
//清空已选中层户
// this.bsms = [];
this.$refs.lpbContent.hbsmList = [];
this.$nextTick(()=>{
//户
this.$refs.lpbContent.$refs.hBsm.forEach(item=>{
item.style.borderColor = 'rgb(230, 230, 230)';
if (item.className == "tdSelect") {
item.className = "";
> .el-tabs__nav {
border: 0;
> .el-tabs__item {
border: 1px solid #DEDEDE;
height: 36px;
line-height: 32px;
padding: 0 20px;
margin: 9px 10px 9px 0;
background-color: #ffffff;
}
.is-active {
color: #006CFF;
border: 1px solid #006CFF;
}
});
//层
this.$refs.lpbContent.$refs.cBsm.forEach(item=>{
console.log(item.className,'item.className');
item.className = "floor";
});
})
//获取图例数据
this.getDyztBsmList();
this.getLpbFwytAndQlxz();
},
inputChange() {
if (this.bdcdyh != "") {
// 根据不动产单元号或者室号搜索
// this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
} else {
this.$message({
message: "请输入内容后查询",
type: "warning",
});
}
},
//图例的展开收起
legendToggle() {
this.legendToggleFlag = !this.legendToggleFlag;
},
//获取各项单元状态统计数据
getDyztBsmList() {
let data = {
zrzbsm: this.$store.state.zrzbsm,
scyclx: this.scyclx,
};
getLpbTj(data).then((res) => {
if (res.code === 200) {
this.dyztList = res.result;
this.dyztList.splice(1,0,this.dyztList[8]);
this.dyztList.pop();
this.dyztList.forEach(item=>{
item.ts = item.bsms.length;
switch (item.name) {
case 'Qqzt':
item.color = "#6EDEE1";
item.name = "已确权"
break;
case 'Wqqzt':
item.color = "#83AAFE";
item.name = "未确权"
break;
case 'Bazt':
item.color = "#8ADC88";
item.name = "已备案"
break;
case 'Ydyzt':
item.color = "#F2AD67";
item.name = "预抵押"
break;
case 'Zjgcdyzt':
item.color = "#F191C8";
item.name = "在建抵押"
break;
case 'Dyzt':
item.color = "#FF8282";
item.name = "抵押"
break;
case 'Cfzt':
item.color = "#D7CECF";
item.name = "查封"
break;
case 'Yyzt':
item.color = "#D4A3EB";
item.name = "异议"
break;
case 'Xzzt':
item.color = "#A5A3FB";
item.name = "限制"
break;
default:
break;
}
})
}
});
},
// 获取房屋用途和房屋性质统计数据
getLpbFwytAndQlxz(){
let data = {
zrzbsm: this.$store.state.zrzbsm,
scyclx: this.scyclx,
};
getLpbFwytAndQlxz(data).then((res) => {
if (res.code === 200) {
// this.fwytList = res.result
this.fwytList = res.result.fwyt;
this.fwxzList = res.result.qlxz;
if(this.fwytList.length>0){
this.fwytList.forEach(item=>{
item.color = "#2591FD";
item.ts = item.bsms.length
})
}
if(this.fwxzList.length>0){
this.fwxzList.forEach(item=>{
item.color = "#2591FD";
item.ts = item.bsms.length
})
}
}
});
},
//切换房屋状态
handleChoosedH(bsms,color) {
//每次切换房屋状态，将之前高亮的户边框颜色重置为默认
this.$refs.lpbContent.choosedList = [];
this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
item.style.border = '';
});
// console.log(bsms,'bsms');
// console.log(color,'color');
// Dyzt:{list:[],mj:''}
//清除选中户
// this.$refs.lpbContent.clearChoosedH();
this.$nextTick(()=>{
//给hBsmList传值
// console.log(bsms,'bsms');
this.$refs.lpbContent.choosedList = bsms;
this.$refs.lpbContent.borderColor = color;
})
},
},
computed: {},
watch: {
//树结构和图例伸缩时修改楼盘表主要内容区宽度
legendToggleFlag(n) {
if (n) {
this.lpbContentwidth -= 204;
} else {
this.lpbContentwidth += 204;
}
},
//选择自然幢展示楼盘表后，查询右侧图例数据
isFwsxbg(n){
if (!n) {
this.getDyztBsmList();
this.getLpbFwytAndQlxz();
this.$nextTick(()=>{
this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6;
})
/deep/ .el-tabs__nav-wrap::after {
width: 0;
}
}
},
//改变syclx，更新楼盘表数据
scyclx(n){
this.$refs.lpbContent.lpbData = n == 0 ? this.$refs.lpbContent.yclpbData : this.$refs.lpbContent.sclpbData
},
selectedZt(n){
this.legendToggleFlag = true;
},
},
};
</script>
<style scoped lang="less">
.main {
background-color: #eaedf5;
.tips{
color: #9B9B9B;
margin-left: 2px;
margin-bottom: 10px;
}
.demo-form-inline {
margin-top: 18px;
.moreSearchBtn {
background-color: #1ad6e1;
border-color: #1ad6e1;
}
.moreSearchBtn:focus,
.moreSearchBtn:hover {
background-color: rgba(28, 200, 229, 0.6);
}
}
.dataGrid {
flex: 1;
.pagination {
padding: 18px 0 0 0;
}
}
.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;
margin-right: 20px;
box-sizing: border-box;
border: 1px solid rgb(236, 236, 236);
border-top: 0;
border-bottom: 0;
}
.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,
.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>
......