Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
5483a37f by 吴蕾
Options

style:登记簿信息样式编写

1 parent 1843d138
Inline Side-by-side
Showing 8 changed files with 1952 additions and 20 deletions
<template>
<div>查封登记</div>
<div class="cfdj">
<div class="tableBox">
<div class="title">
查封登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>查封登记</th>
<th>查封登记</th>
<th>查封登记</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "cfdj",
data() {
return {};
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "bdcqlr",
label: "不动产权利人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "cflx",
label: "查封类型",
},
{
prop: "cfjg",
label: "查封机关",
},
{
prop: "cfwh",
label: "查封文号",
},
{
prop: "cfwj",
label: "查封文件",
},
{
prop: "cfqssj",
label: "查封起始时间",
},
{
prop: "cfjssj",
label: "查封结束时间",
},
{
prop: "cfqx",
label: "查封期限",
},
{
prop: "cffw",
label: "查封范围",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "jfywh",
label: "解封业务号",
},
{
prop: "jfjg",
label: "解封机关",
},
{
prop: "jfwh",
label: "解封文号",
},
{
prop: "jfwj",
label: "解封文件",
},
{
prop: "jfdjsj",
label: "解封登记时间",
},
{
prop: "jfdbr",
label: "解封登簿人",
},
],
tableData: {
linshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
bdcqlr: "李四",
zjzj: "身份证号",
zjh: "*******",
cflx: "查封",
cfjg: "西安法院",
cfwh: "200825012286",
cfwj: "",
cfqssj: "2008年3月11日",
cfjssj: "2012年3月11日",
cfqx: "4年",
cffw: "",
djjg: "",
dbr: "",
djsj: "",
jfywh: "",
jfjg: "",
jfwh: "",
jfwj: "",
jfdjsj: "",
jfdbr: "",
},
xianshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
bdcqlr: "李四",
zjzj: "身份证号",
zjh: "*******",
cflx: "查封",
cfjg: "西安法院",
cfwh: "200825012286",
cfwj: "",
cfqssj: "2008年3月11日",
cfjssj: "2012年3月11日",
cfqx: "4年",
cffw: "",
djjg: "",
dbr: "",
djsj: "",
jfywh: "200825012285",
jfjg: "西安法院",
jfwh: "123",
jfwj: "",
jfdjsj: "2012年3月11日",
jfdbr: "",
},
lishi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
bdcqlr: "李四",
zjzj: "身份证号",
zjh: "*******",
cflx: "查封",
cfjg: "西安法院",
cfwh: "200825012286",
cfwj: "",
cfqssj: "2008年3月11日",
cfjssj: "2012年3月11日",
cfqx: "4年",
cffw: "",
djjg: "",
dbr: "",
djsj: "",
jfywh: "",
jfjg: "",
jfwh: "",
jfwj: "",
jfdjsj: "",
jfdbr: "",
},
},
};
},
};
</script>
<style lang="scss" scoped>
.cfdj {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-size: 16px;
text-align: center;
background: #e9e9e9;
height: 62px;
line-height: 62px;
position: relative;
margin: 1px 0;
.checkbox {
position: absolute;
right: 20px;
bottom: -16px;
height: 62px;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.linshiIcon {
position: relative;
}
.linshiIcon::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 0px 0px 45px 45px;
border-style: none solid solid;
border-color: transparent transparent #fe9400;
position: absolute;
top: 0px;
right: 3px;
transform: rotate(-90deg);
}
.icon {
position: absolute;
top: 8px;
right: 6px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
z-index: 10;
}
tr td {
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
}
> tr:nth-child(odd) td {
background: #f2f2f2;
}
> tr:nth-child(even) td {
background: #f9f9f9;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
......
......@@ -108,7 +108,7 @@ export default {
children: "children",
label: "label",
},
showTab: "bdcqljqtsx", // 选中状态,根据表格中权利类型判断
showTab: "djbfm", // 选中状态,根据表格中权利类型判断
};
},
......
<template>
<div>抵押权</div>
<div class="dyaq">
<div class="tableBox">
<div class="title">
抵押权登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>
<p>抵押权</p>
<p>首次登记</p>
</th>
<th>
<p>抵押权</p>
<p>转移登记</p>
</th>
<th>
<p>抵押权</p>
<p>转移登记</p>
</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "dyaq",
data() {
return {};
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zjjzwzl",
label: "在建建筑物坐落",
},
{
prop: "dybdclx",
label: "抵押不动产类型",
},
{
prop: "dyqr",
label: "抵押权人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "dyr",
label: "抵押人",
},
{
prop: "dyfs",
label: "抵押方式",
},
{
prop: "sfygdj",
label: "是否预告登记",
},
{
prop: "zjjzwdyfw",
label: "在建建筑物抵押范围",
},
{
prop: "dymj",
label: "抵押面积",
},
{
prop: "bdbzzqse",
label: "被担保主债权数额(万元)",
},
{
prop: "dbfw",
label: "担保范围",
},
{
prop: "zwlxqssj",
label: "债务履行起始时间",
},
{
prop: "zwlxjssj",
label: "债务履行结束时间",
},
{
prop: "zwlxqx",
label: "债务履行期限(债务确定期间)",
},
{
prop: "zgzqqdsshse",
label: "最高债权确定事实和数额",
},
{
prop: "sfczyd",
label: "是否存在禁止或限制转让抵押不动产的约定",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "fj",
label: "附记",
},
{
prop: "qlqtzk",
label: "权利其他状况",
},
{
prop: "zxdyywh",
label: "注销抵押业务号",
},
{
prop: "zxdyyy",
label: "注销抵押原因",
},
],
tableData: {
linshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zjjzwzl:
"汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
dybdclx: "土地",
dyqr: "中国银行股份有限公司C区支行",
zjzj: "营业执照",
zjh: "*******",
dyr: "联城有限公司",
dyfs: "一般抵押",
sfygdj: "否",
zjjzwdyfw: "",
dymj: "22384.1700",
bdbzzqse: "22000",
dbfw: "城镇住宅用地",
zwlxqssj: "2007年12月25日",
zwlxjssj: "2077年12月24日",
zwlxqx: "1年",
zgzqqdsshse: "11223",
sfczyd: "否",
djyy: "合同设立",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
djsj: "2009年04月21日",
dbr: "路**",
djjg: "",
fj: "",
qlqtzk: "",
zxdyywh: "201025126854",
zxdyyy: "贷款还清",
},
xianshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zjjzwzl:
"汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
dybdclx: "土地",
dyqr: "中国银行股份有限公司C区支行",
zjzj: "营业执照",
zjh: "*******",
dyr: "联城有限公司",
dyfs: "一般抵押",
sfygdj: "否",
zjjzwdyfw: "",
dymj: "22384.1700",
bdbzzqse: "22000",
dbfw: "城镇住宅用地",
zwlxqssj: "2007年12月25日",
zwlxjssj: "2077年12月24日",
zwlxqx: "1年",
zgzqqdsshse: "11223",
sfczyd: "否",
djyy: "合同设立",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
djsj: "2009年04月21日",
dbr: "路**",
djjg: "",
fj: "",
qlqtzk: "",
zxdyywh: "201025126854",
zxdyyy: "贷款还清",
},
lishi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zjjzwzl:
"汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
dybdclx: "土地",
dyqr: "中国银行股份有限公司C区支行",
zjzj: "营业执照",
zjh: "*******",
dyr: "联城有限公司",
dyfs: "一般抵押",
sfygdj: "否",
zjjzwdyfw: "",
dymj: "22384.1700",
bdbzzqse: "22000",
dbfw: "城镇住宅用地",
zwlxqssj: "2007年12月25日",
zwlxjssj: "2077年12月24日",
zwlxqx: "1年",
zgzqqdsshse: "11223",
sfczyd: "否",
djyy: "合同设立",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
djsj: "2009年04月21日",
dbr: "路**",
djjg: "",
fj: "",
qlqtzk: "",
zxdyywh: "201025126854",
zxdyyy: "贷款还清",
},
},
};
},
};
</script>
<style lang="scss" scoped>
.dyaq {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-size: 16px;
text-align: center;
background: #e9e9e9;
height: 62px;
line-height: 62px;
position: relative;
margin: 1px 0;
.checkbox {
position: absolute;
right: 20px;
bottom: -16px;
height: 62px;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.linshiIcon {
position: relative;
}
.linshiIcon::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 0px 0px 45px 45px;
border-style: none solid solid;
border-color: transparent transparent #fe9400;
position: absolute;
top: 0px;
right: 3px;
transform: rotate(-90deg);
}
.icon {
position: absolute;
top: 8px;
right: 6px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
z-index: 10;
}
tr td {
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
}
> tr:nth-child(odd) td {
background: #f2f2f2;
}
> tr:nth-child(even) td {
background: #f9f9f9;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
......
<template>
<div>地役权</div>
<div class="dyiq">
<div class="tableBox">
<div class="title">
地役权登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>
<p>地役权</p>
<p>首次登记</p>
</th>
<th>
<p>地役权</p>
<p>转移登记</p>
</th>
<th>
<p>地役权</p>
<p>转移登记</p>
</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "dyiq",
data() {
return {};
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "gydbdcdyh",
label: "供役地不动产单元号",
},
{
prop: "gydqlr",
label: "供役地权利人",
},
{
prop: "gydqlrzjzl",
label: "供役地权利人证件种类",
},
{
prop: "xydbdcdyh",
label: "需役地不动产单元号",
},
{
prop: "xydzl",
label: "需役地坐落",
},
{
prop: "xydqlr",
label: "需役地权利人",
},
{
prop: "xydqlrzjzl",
label: "需役地权利人证件种类",
},
{
prop: "xydzjh",
label: "需役地证件号",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "dyqnr",
label: "地役权内容",
},
{
prop: "qlqssj",
label: "权利起始时间",
},
{
prop: "qljssj",
label: "权利结束时间",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "qxdm",
label: "区县代码",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djsj",
label: "登记时间",
},
],
tableData: {
linshi: {},
xianshi: {},
lishi: {},
},
};
},
};
</script>
<style lang="scss" scoped>
.dyiq {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-size: 16px;
text-align: center;
background: #e9e9e9;
height: 62px;
line-height: 62px;
position: relative;
margin: 1px 0;
.checkbox {
position: absolute;
right: 20px;
bottom: -16px;
height: 62px;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.linshiIcon {
position: relative;
}
.linshiIcon::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 0px 0px 45px 45px;
border-style: none solid solid;
border-color: transparent transparent #fe9400;
position: absolute;
top: 0px;
right: 3px;
transform: rotate(-90deg);
}
.icon {
position: absolute;
top: 8px;
right: 6px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
z-index: 10;
}
tr td {
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
}
> tr:nth-child(odd) td {
background: #f2f2f2;
}
> tr:nth-child(even) td {
background: #f9f9f9;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
......
<template>
<div>国有建设用地使用权</div>
<div class="gyjsydsyq">
<div class="tableBox">
<div class="title">
建设用地使用权、宅基地使用权登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>
<p>建设用地使用权</p>
<p>首次登记</p>
</th>
<th>
<p>建设用地使用权</p>
<p>转移登记</p>
</th>
<th>
<p>建设用地使用权</p>
<p>转移登记</p>
</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "gyjsydsyq",
data() {
return {};
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "qlrlx",
label: "权利人类型",
},
{
prop: "qlr",
label: "权利人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "gyqk",
label: "共有情况",
},
{
prop: "syqmj",
label: "使用权面积(m²)",
},
{
prop: "qlxz",
label: "权利性质",
},
{
prop: "tdyt",
label: "土地用途",
},
{
prop: "syqqssj",
label: "使用权起始时间",
},
{
prop: "syqjssj",
label: "使用权结束时间",
},
{
prop: "tdsyqx",
label: "土地使用期限",
},
{
prop: "qdjg",
label: "取得价格(万元)",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdcqzh",
label: "不动产权证号",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "fj",
label: "附记",
},
],
tableData: {
linshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlrlx: "企业",
qlr: "联城有限公司",
zjzj: "组织机构代码证",
zjh: "*******",
gyqk: "单独所有",
syqmj: "22384.1700",
qlxz: "出让",
tdyt: "城镇住宅用地",
syqqssj: "2007年12月25日",
syqjssj: "2077年12月24日",
tdsyqx: "70年",
qdjg: "75793.75",
djyy: "出让取得",
bdcqzh: "陕2018汉台区不动产权第0003782号",
djsj: "2008年3月11日",
dbr: "路**",
fj: "2014年10月21日办理房屋首次登记",
},
xianshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlrlx: "企业",
qlr: "联城有限公司",
zjzj: "组织机构代码证",
zjh: "*******",
gyqk: "单独所有",
syqmj: "22384.1700",
qlxz: "出让",
tdyt: "城镇住宅用地",
syqqssj: "2007年12月25日",
syqjssj: "2077年12月24日",
tdsyqx: "70年",
qdjg: "75793.75",
djyy: "出让取得",
bdcqzh: "陕2018汉台区不动产权第0003782号",
djsj: "2008年3月11日",
dbr: "路**",
fj: "2014年10月21日办理房屋首次登记",
},
lishi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlrlx: "企业",
qlr: "联城有限公司",
zjzj: "组织机构代码证",
zjh: "*******",
gyqk: "单独所有",
syqmj: "22384.1700",
qlxz: "出让",
tdyt: "城镇住宅用地",
syqqssj: "2007年12月25日",
syqjssj: "2077年12月24日",
tdsyqx: "70年",
qdjg: "75793.75",
djyy: "出让取得",
bdcqzh: "陕2018汉台区不动产权第0003782号",
djsj: "2008年3月11日",
dbr: "路**",
fj: "2014年10月21日办理房屋首次登记",
},
},
};
},
};
</script>
<style lang="scss" scoped>
.gyjsydsyq {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-size: 16px;
text-align: center;
background: #e9e9e9;
height: 62px;
line-height: 62px;
position: relative;
margin: 1px 0;
.checkbox {
position: absolute;
right: 20px;
bottom: -16px;
height: 62px;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.linshiIcon {
position: relative;
}
.linshiIcon::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 0px 0px 45px 45px;
border-style: none solid solid;
border-color: transparent transparent #fe9400;
position: absolute;
top: 0px;
right: 3px;
transform: rotate(-90deg);
}
.icon {
position: absolute;
top: 8px;
right: 6px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
z-index: 10;
}
tr td {
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
}
> tr:nth-child(odd) td {
background: #f2f2f2;
}
> tr:nth-child(even) td {
background: #f9f9f9;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
......
<template>
<div>预告登记</div>
<div class="ygdj">
<div class="tableBox">
<div class="title">
预告登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>
<p>预售商品房买卖预告登记</p>
<p>首次登记</p>
</th>
<th>
<p>预售商品房抵押权预告登记</p>
<p>转移登记</p>
</th>
<th>
<p>预售商品房买卖预告登记</p>
<p>变更登记</p>
</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "ygdj",
data() {
return {};
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "qlr",
label: "权利人",
},
{
prop: "qlrzjzl",
label: "证件种类",
},
{
prop: "qlrzjh",
label: "证件号",
},
{
prop: "ywr",
label: "义务人",
},
{
prop: "ywrzjzl",
label: "证件种类",
},
{
prop: "ywrzjh",
label: "证件号",
},
{
prop: "fwxz",
label: "房屋性质",
},
{
prop: "ghyt",
label: "规划用途",
},
{
prop: "fwzcs",
label: "房屋总层数",
},
{
prop: "fwszc",
label: "房屋所在层",
},
{
prop: "jzmj",
label: "建筑面积",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdbzzqse",
label: "取得价格/被担保主债权数额",
},
{
prop: "jedw",
label: "金额单位",
},
{
prop: "dbfw",
label: "担保范围",
},
{
prop: "sfczyd",
label: "是否存在禁止或限制转让抵押不动产的约定",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "zxygywh",
label: "注销预告业务号",
},
{
prop: "zxygyy",
label: "注销预告原因",
},
{
prop: "zxsj",
label: "注销时间",
},
{
prop: "qszt",
label: "权属状态",
},
],
tableData: {
linshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlr: "企业",
qlrzjzj: "组织机构代码证",
qlrzjh: "*******",
ywr: "企业",
ywrzjzl: "组织机构代码证",
ywrzjh: "*******",
tdsyqr: "绿地开发有限公司",
fwxz: "商品房",
ghyt: "住宅",
fwzcs: "10",
fwszc: "6",
jzmj: "111.5",
djyy: "",
bdbzzqse: "80.000",
jedw: "万元",
dbfw: "****",
sfczyd: "",
djsj: "2008年3月11日",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
dbr: "路**",
zxygywh: "",
zxygyy: "",
zxsj: "",
qszt: "",
},
xianshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlr: "企业",
qlrzjzj: "组织机构代码证",
qlrzjh: "*******",
ywr: "企业",
ywrzjzl: "组织机构代码证",
ywrzjh: "*******",
tdsyqr: "绿地开发有限公司",
fwxz: "商品房",
ghyt: "住宅",
fwzcs: "10",
fwszc: "6",
jzmj: "111.5",
djyy: "",
bdbzzqse: "60.000",
jedw: "",
dbfw: "",
sfczyd: "是",
djsj: "2008年3月11日",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
dbr: "路**",
zxygywh: "",
zxygyy: "",
zxsj: "",
qszt: "",
},
lishi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlr: "企业",
qlrzjzj: "组织机构代码证",
qlrzjh: "*******",
ywr: "企业",
ywrzjzl: "组织机构代码证",
ywrzjh: "*******",
tdsyqr: "绿地开发有限公司",
fwxz: "商品房",
ghyt: "住宅",
fwzcs: "10",
fwszc: "6",
jzmj: "111.5",
djyy: "",
bdbzzqse: "",
jedw: "",
dbfw: "",
sfczyd: "",
djsj: "2008年3月11日",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
dbr: "路**",
zxygywh: "200825012286",
zxygyy: "个人原因",
zxsj: "2008年3月11日",
qszt: "",
},
},
};
},
};
</script>
<style lang="scss" scoped>
.ygdj {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-size: 16px;
text-align: center;
background: #e9e9e9;
height: 62px;
line-height: 62px;
position: relative;
margin: 1px 0;
.checkbox {
position: absolute;
right: 20px;
bottom: -16px;
height: 62px;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.linshiIcon {
position: relative;
}
.linshiIcon::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 0px 0px 45px 45px;
border-style: none solid solid;
border-color: transparent transparent #fe9400;
position: absolute;
top: 0px;
right: 3px;
transform: rotate(-90deg);
}
.icon {
position: absolute;
top: 8px;
right: 6px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
z-index: 10;
}
tr td {
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
}
> tr:nth-child(odd) td {
background: #f2f2f2;
}
> tr:nth-child(even) td {
background: #f9f9f9;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
......
<template>
<div>异议登记</div>
<div class="yydj">
<div class="tableBox">
<div class="title">
异议登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>异议登记</th>
<th>异议登记</th>
<th>异议登记</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "yydj",
data() {
return {};
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "yyr",
label: "异议人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "yysx",
label: "异议事项",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "zxyyywh",
label: "注销异议业务号",
},
{
prop: "zxyyyy",
label: "注销异议原因",
},
{
prop: "zxyydbr",
label: "注销异议登簿人",
},
{
prop: "zxyydjsj",
label: "注销异议登记时间",
},
],
tableData: {
linshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
yyr: "李四",
zjzj: "身份证号",
zjh: "*******",
yysx: "",
djjg: "",
bdcdjzmh: "200825012286",
dbr: "",
djsj: "2008年3月11日",
zxyyywh: "",
zxyyyy: "",
zxyydbr: "",
zxyydjsj: "",
},
xianshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
yyr: "李四",
zjzj: "身份证号",
zjh: "*******",
yysx: "",
djjg: "",
bdcdjzmh: "200825012286",
dbr: "",
djsj: "2008年3月11日",
zxyyywh: "200825012286",
zxyyyy: "时间到期",
zxyydbr: "李四",
zxyydjsj: "2008年3月11日",
},
lishi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
yyr: "李四",
zjzj: "身份证号",
zjh: "*******",
yysx: "",
djjg: "",
bdcdjzmh: "200825012286",
dbr: "",
djsj: "2008年3月11日",
zxyyywh: "200825012286",
zxyyyy: "时间到期",
zxyydbr: "李四",
zxyydjsj: "2008年3月11日",
},
},
};
},
};
</script>
<style lang="scss" scoped>
.yydj {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-size: 16px;
text-align: center;
background: #e9e9e9;
height: 62px;
line-height: 62px;
position: relative;
margin: 1px 0;
.checkbox {
position: absolute;
right: 20px;
bottom: -16px;
height: 62px;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.linshiIcon {
position: relative;
}
.linshiIcon::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 0px 0px 45px 45px;
border-style: none solid solid;
border-color: transparent transparent #fe9400;
position: absolute;
top: 0px;
right: 3px;
transform: rotate(-90deg);
}
.icon {
position: absolute;
top: 8px;
right: 6px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
z-index: 10;
}
tr td {
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
}
> tr:nth-child(odd) td {
background: #f2f2f2;
}
> tr:nth-child(even) td {
background: #f9f9f9;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
......
......@@ -107,7 +107,7 @@ export default {
pageData: {
current: 1,
size: 10,
total: 2,
total: 0,
},
ywlys: datas.ywlys(),
tableData: {
......@@ -146,12 +146,11 @@ export default {
moreQueryClick(){},
openDialog(scope) {
this.isDialog = true;
// if(scope.row.qllx == '预告买卖登记'){
// this.$refs.djbxxDialog.showTab = 'ygdj'
// }
// else if(scope.row.qllx == '查封登记'){
// this.$refs.djbxxDialog.showTab = 'cfdj'
// }
if (scope.row.qllx == "预告买卖登记") {
this.$refs.djbxxDialog.showTab = "ygdj";
} else if (scope.row.qllx == "查封登记") {
this.$refs.djbxxDialog.showTab = "cfdj";
}
},
},
};
......