Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
052a74a2 by 吴蕾
Options

登记簿信息接口调试,样式修改

1 parent 6fd96f6b
Expand all
Inline Side-by-side
Showing 11 changed files with 403 additions and 2063 deletions
1 <template>
2 <div class="cfdj">
3 <div class="tableBox">
4 <div class="title">
5 查封登记信息
6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList">
8 <el-checkbox label="临时"></el-checkbox>
9 <el-checkbox label="现势"></el-checkbox>
10 <el-checkbox label="历史"></el-checkbox>
11 </el-checkbox-group>
12 </div>
13 </div>
14 <table class="xxTable">
15 <tr>
16 <th rowspan="3" width="140">业务类型</th>
17 </tr>
18 <tr class="one">
19 <th class="linshiIcon">
20 <div class="icon">临时</div>
21 临时
22 </th>
23 <th>现势</th>
24 <th>历史</th>
25 </tr>
26 <tr class="two">
27 <th>查封登记</th>
28 <th>查封登记</th>
29 <th>查封登记</th>
30 </tr>
31
32 <tr v-for="(item, index) in columns" :key="index">
33 <td>
34 {{ item.label }}
35 </td>
36 <td>{{ tableData.linshi[item.prop] }}</td>
37 <td>{{ tableData.xianshi[item.prop] }}</td>
38 <td>{{ tableData.lishi[item.prop] }}</td>
39 </tr>
40 </table>
41 </div>
42 </div>
43 </template>
44
45 <script>
46 export default {
47 name: "cfdj",
48 data() {
49 return {
50 checkList: ["临时", "现势", "历史"],
51 columns: [
52 {
53 prop: "ssywh",
54 label: "上手业务号",
55 },
56 {
57 prop: "dah",
58 label: "档案号",
59 },
60 {
61 prop: "ywh",
62 label: "业务号",
63 },
64 {
65 prop: "bdcdyh",
66 label: "不动产单元号",
67 },
68 {
69 prop: "zl",
70 label: "坐落",
71 },
72 {
73 prop: "bdcqlr",
74 label: "不动产权利人",
75 },
76 {
77 prop: "zjzl",
78 label: "证件种类",
79 },
80 {
81 prop: "zjh",
82 label: "证件号",
83 },
84 {
85 prop: "cflx",
86 label: "查封类型",
87 },
88 {
89 prop: "cfjg",
90 label: "查封机关",
91 },
92 {
93 prop: "cfwh",
94 label: "查封文号",
95 },
96 {
97 prop: "cfwj",
98 label: "查封文件",
99 },
100 {
101 prop: "cfqssj",
102 label: "查封起始时间",
103 },
104 {
105 prop: "cfjssj",
106 label: "查封结束时间",
107 },
108 {
109 prop: "cfqx",
110 label: "查封期限",
111 },
112 {
113 prop: "cffw",
114 label: "查封范围",
115 },
116 {
117 prop: "djjg",
118 label: "登记机构",
119 },
120 {
121 prop: "dbr",
122 label: "登簿人",
123 },
124 {
125 prop: "djsj",
126 label: "登记时间",
127 },
128 {
129 prop: "jfywh",
130 label: "解封业务号",
131 },
132 {
133 prop: "jfjg",
134 label: "解封机关",
135 },
136 {
137 prop: "jfwh",
138 label: "解封文号",
139 },
140 {
141 prop: "jfwj",
142 label: "解封文件",
143 },
144 {
145 prop: "jfdjsj",
146 label: "解封登记时间",
147 },
148 {
149 prop: "jfdbr",
150 label: "解封登簿人",
151 },
152 ],
153 tableData: {
154 linshi: {
155 ssywh: "",
156 dah: "",
157 ywh: "200825012285",
158 bdcdyh: "370205004005GB10030 F00160111",
159 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
160 bdcqlr: "李四",
161 zjzj: "身份证号",
162 zjh: "*******",
163 cflx: "查封",
164 cfjg: "西安法院",
165 cfwh: "200825012286",
166 cfwj: "",
167 cfqssj: "2008年3月11日",
168 cfjssj: "2012年3月11日",
169 cfqx: "4年",
170 cffw: "",
171 djjg: "",
172 dbr: "",
173 djsj: "",
174 jfywh: "",
175 jfjg: "",
176 jfwh: "",
177 jfwj: "",
178 jfdjsj: "",
179 jfdbr: "",
180 },
181 xianshi: {
182 ssywh: "",
183 dah: "",
184 ywh: "200825012285",
185 bdcdyh: "370205004005GB10030 F00160111",
186 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
187 bdcqlr: "李四",
188 zjzj: "身份证号",
189 zjh: "*******",
190 cflx: "查封",
191 cfjg: "西安法院",
192 cfwh: "200825012286",
193 cfwj: "",
194 cfqssj: "2008年3月11日",
195 cfjssj: "2012年3月11日",
196 cfqx: "4年",
197 cffw: "",
198 djjg: "",
199 dbr: "",
200 djsj: "",
201 jfywh: "200825012285",
202 jfjg: "西安法院",
203 jfwh: "123",
204 jfwj: "",
205 jfdjsj: "2012年3月11日",
206 jfdbr: "",
207 },
208 lishi: {
209 ssywh: "",
210 dah: "",
211 ywh: "200825012285",
212 bdcdyh: "370205004005GB10030 F00160111",
213 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
214 bdcqlr: "李四",
215 zjzj: "身份证号",
216 zjh: "*******",
217 cflx: "查封",
218 cfjg: "西安法院",
219 cfwh: "200825012286",
220 cfwj: "",
221 cfqssj: "2008年3月11日",
222 cfjssj: "2012年3月11日",
223 cfqx: "4年",
224 cffw: "",
225 djjg: "",
226 dbr: "",
227 djsj: "",
228 jfywh: "",
229 jfjg: "",
230 jfwh: "",
231 jfwj: "",
232 jfdjsj: "",
233 jfdbr: "",
234 },
235 },
236 };
237 },
238 };
239 </script>
240
241 <style lang="scss" scoped>
242 .cfdj {
243 width: 100%;
244 height: 100%;
245 background: #fff;
246 overflow-y: scroll;
247 color: #333;
248
249 .tableBox {
250 width: 810px;
251 margin: 0 auto;
252
253 .title {
254 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
255 font-weight: 700;
256 font-size: 16px;
257 text-align: center;
258 background: #e9e9e9;
259 height: 62px;
260 line-height: 62px;
261 position: relative;
262 margin: 1px 0;
263 .checkbox {
264 position: absolute;
265 right: 20px;
266 bottom: -16px;
267 height: 62px;
268 }
269 }
270
271 .xxTable {
272 width: 810px;
273 border-spacing: 1px;
274 tr > th {
275 background: #464c5b;
276 color: #fff;
277 font-size: 16px;
278 }
279 tr > th:nth-child(1),
280 tr > th:nth-child(2) {
281 background: #464c5b;
282 }
283 tr > th:nth-child(3) {
284 background: rgba(70, 76, 91, 0.8);
285 }
286 .one th {
287 height: 25px;
288 font-size: 14px;
289 }
290 .one > th:nth-child(1) {
291 color: #fe9400;
292 }
293 .two th {
294 height: 45px;
295
296 p:nth-child(2) {
297 font-size: 14px;
298 }
299 }
300 .two > th:nth-child(1) {
301 color: #fe9400;
302 }
303 .linshiIcon {
304 position: relative;
305 }
306 .linshiIcon::after {
307 content: "";
308 display: block;
309 width: 0;
310 height: 0;
311 border-width: 0px 0px 45px 45px;
312 border-style: none solid solid;
313 border-color: transparent transparent #fe9400;
314 position: absolute;
315 top: 0px;
316 right: 3px;
317 transform: rotate(-90deg);
318 }
319 .icon {
320 position: absolute;
321 top: 8px;
322 right: 6px;
323 transform: rotate(45deg);
324 color: #fff;
325 font-size: 12px;
326 z-index: 10;
327 }
328
329 tr td {
330 text-align: center;
331 height: 40px;
332 padding: 4px;
333 font-size: 13px;
334 }
335 > tr:nth-child(odd) td {
336 background: #f2f2f2;
337 }
338 > tr:nth-child(even) td {
339 background: #f9f9f9;
340 }
341 tr > td:nth-child(2) {
342 color: #fe9400;
343 }
344 tr > td:nth-child(4) {
345 color: #7f7f7f;
346 }
347 }
348 }
349 }
350 </style>
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
10 <div class="content"> 10 <div class="content">
11 <div class="left"> 11 <div class="left">
12 <el-tree 12 <el-tree
13 ref="tree"
13 :data="treedata" 14 :data="treedata"
14 :props="defaultProps" 15 :props="defaultProps"
15 @node-click="handleNodeClick" 16 @node-click="handleNodeClick"
...@@ -20,22 +21,18 @@ ...@@ -20,22 +21,18 @@
20 ></el-tree> 21 ></el-tree>
21 </div> 22 </div>
22 <div class="right"> 23 <div class="right">
23 <components :is="showTab"></components> 24 <components :is="showTab" :showType="showType"></components>
24 </div> 25 </div>
25 </div> 26 </div>
26 </dialogBox> 27 </dialogBox>
27 </template> 28 </template>
28 <script> 29 <script>
30 import { mapGetters } from "vuex";
29 import djbfm from "./djbfm.vue"; 31 import djbfm from "./djbfm.vue";
30 import zdxx from "./zdxx.vue"; 32 import zdxx from "./zdxx.vue";
31 import bdcqldjml from "./bdcqldjml.vue"; 33 import bdcqldjml from "./bdcqldjml.vue";
32 import bdcqljqtsx from "./bdcqljqtsx.vue"; 34 import bdcqljqtsx from "./bdcqljqtsx.vue";
33 import gyjsydsyq from "./gyjsydsyq.vue"; 35 import djxxTable from "./djxxTable.vue";
34 import dyaq from "./dyaq.vue";
35 import dyiq from "./dyiq.vue";
36 import ygdj from "./ygdj.vue";
37 import yydj from "./yydj.vue";
38 import cfdj from "./cfdj.vue";
39 36
40 export default { 37 export default {
41 name: "djbxxDialog", 38 name: "djbxxDialog",
...@@ -44,12 +41,7 @@ export default { ...@@ -44,12 +41,7 @@ export default {
44 zdxx, 41 zdxx,
45 bdcqldjml, 42 bdcqldjml,
46 bdcqljqtsx, 43 bdcqljqtsx,
47 gyjsydsyq, 44 djxxTable,
48 dyaq,
49 dyiq,
50 ygdj,
51 yydj,
52 cfdj,
53 }, 45 },
54 props: { 46 props: {
55 value: { type: Boolean, default: false }, 47 value: { type: Boolean, default: false },
...@@ -59,43 +51,59 @@ export default { ...@@ -59,43 +51,59 @@ export default {
59 treedata: [ 51 treedata: [
60 { 52 {
61 id: "djbfm", 53 id: "djbfm",
54 tabs: "djbfm",
62 label: "登记簿封面", 55 label: "登记簿封面",
63 children: [ 56 children: [
64 { 57 {
65 id: "zdxx", 58 id: "zdxx",
59 tabs: "zdxx",
66 label: "宗地信息", 60 label: "宗地信息",
67 }, 61 },
68 { 62 {
69 id: "bdcqldjml", 63 id: "bdcqldjml",
64 tabs: "bdcqldjml",
70 label: "不动产权利登记目录", 65 label: "不动产权利登记目录",
71 children: [ 66 children: [
72 { 67 {
73 id: "bdcqljqtsx", 68 id: "bdcqljqtsx",
69 tabs: "bdcqljqtsx",
74 label: "不动产权利及其他事项", 70 label: "不动产权利及其他事项",
75 children: [ 71 children: [
76 { 72 {
77 id: "gyjsydsyq", 73 id: "gyjsydsyq",
74 tabs: "djxxTable",
78 label: "国有建设用地使用权(临:0，现:0，历:0)", 75 label: "国有建设用地使用权(临:0，现:0，历:0)",
76 type: "JSYDSYQ",
79 }, 77 },
80 { 78 {
81 id: "dyaq", 79 id: "dyaq",
80 tabs: "djxxTable",
82 label: "抵押权(临:0，现:0，历:0)", 81 label: "抵押权(临:0，现:0，历:0)",
82 type: "DYAQ",
83 }, 83 },
84 { 84 {
85 id: "dyiq", 85 id: "dyiq",
86 tabs: "djxxTable",
86 label: "地役权(临:0，现:0，历:0)", 87 label: "地役权(临:0，现:0，历:0)",
88 type: "DYIQ",
87 }, 89 },
88 { 90 {
89 id: "ygdj", 91 id: "ygdj",
92 tabs: "djxxTable",
90 label: "预告登记(临:0，现:0，历:0)", 93 label: "预告登记(临:0，现:0，历:0)",
94 type: "YGDJ",
91 }, 95 },
92 { 96 {
93 id: "yydj", 97 id: "yydj",
98 tabs: "djxxTable",
94 label: "异议登记(临:0，现:0，历:0)", 99 label: "异议登记(临:0，现:0，历:0)",
100 type: "YYDJ",
95 }, 101 },
96 { 102 {
97 id: "cfdj", 103 id: "cfdj",
104 tabs: "djxxTable",
98 label: "查封登记(临:0，现:0，历:0)", 105 label: "查封登记(临:0，现:0，历:0)",
106 type: "CFDJ",
99 }, 107 },
100 ], 108 ],
101 }, 109 },
...@@ -108,17 +116,60 @@ export default { ...@@ -108,17 +116,60 @@ export default {
108 children: "children", 116 children: "children",
109 label: "label", 117 label: "label",
110 }, 118 },
111 showTab: "gyjsydsyq", // 选中状态,根据表格中权利类型判断 119 showTab: "djxxTable", // 选中状态,根据表格中权利类型判断
120 showType: "JSYDSYQ",
112 }; 121 };
113 }, 122 },
123 computed: {
124 ...mapGetters(["djbxx"]),
125 },
126 watch: {
127 djbxx: {
128 handler(newVlue) {
129 if (newVlue) {
130 var qszts = newVlue.detail.qszts;
131 let isZd = newVlue.djbfm.zd;
132 let arr = [
133 "QSZT_JSYDSYQ",
134 "QSZT_DYAQ",
135 "QSZT_DYIQ",
136 "QSZT_YGDJ",
137 "QSZT_YYDJ",
138 "QSZT_CFDJ",
139 ];
140 if (!isZd) {
141 // 判断是否是宗地
142 arr[0] = "QSZT_FDCQ2";
143 this.treedata[0].children[1].children[0].children[0].type = FDCQ2;
144 }
145 arr.forEach((item, index) => {
146 let label =
147 this.treedata[0].children[1].children[0].children[
148 index
149 ].label.split(":")[0];
150 this.treedata[0].children[1].children[0].children[index].label =
151 label +
152 (qszts[item][0] || 0) +
153 "，现:" +
154 (qszts[item][1] || 0) +
155 "，历:" +
156 (qszts[item][2] || 0) +
157 ")";
158 });
159 }
160 },
161 immediate: true,
162 },
163 },
114 methods: { 164 methods: {
115 closeDialog() { 165 closeDialog() {
116 this.$emit("input", false); 166 this.$emit("input", false);
117 // 关闭时清空值 167 // 关闭时清空值
118 this.$store.dispatch("djbxx/setDjbxx", null); 168 this.$store.dispatch("djbxx/setDjbxx", null);
119 }, 169 },
120 handleNodeClick(data) { 170 handleNodeClick(data, node, elem) {
121 this.showTab = data.id; 171 this.showTab = data.tabs;
172 this.showType = data.type ? data.type : "";
122 }, 173 },
123 }, 174 },
124 }; 175 };
...@@ -160,4 +211,9 @@ export default { ...@@ -160,4 +211,9 @@ export default {
160 /deep/.el-tree-node { 211 /deep/.el-tree-node {
161 white-space: pre-wrap; 212 white-space: pre-wrap;
162 } 213 }
214 /deep/ .is-current > .el-tree-node__content {
215 background-color: #f5f5f5;
216 color: #0079fe;
217 border-right: 4px solid #0079fe;
218 }
163 </style> 219 </style>
......
1 <template>
2 <div class="djxxTable">
3 <div class="tableBox">
4 <div class="title">
5 {{ title }}
6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList" @change="checkChange">
8 <el-checkbox label="临时"></el-checkbox>
9 <el-checkbox label="现势"></el-checkbox>
10 <el-checkbox label="历史"></el-checkbox>
11 </el-checkbox-group>
12 </div>
13 </div>
14 <div class="xxTableBox" v-if="showTableData.length">
15 <table class="xxTable" :width="tableWidth">
16 <tr>
17 <th rowspan="3">业务类型</th>
18 </tr>
19 <!-- 第一行表头 -->
20 <tr class="one">
21 <th
22 v-for="(item, index) in ths"
23 :key="index"
24 :class="[item.class, item.type == '临时' ? 'linshiIcon' : '']"
25 >
26 <div class="icon" v-if="item.type == '临时'">{{ item.type }}</div>
27 {{ item.type }}
28 </th>
29 </tr>
30 <!-- 第二行表头 -->
31 <tr class="two">
32 <th v-for="(item, index) in ths" :key="index" :class="item.class">
33 <p>{{ item.qllxmc }}</p>
34 <p>{{ item.djlxmc }}</p>
35 </th>
36 </tr>
37 <!-- 数据 -->
38 <tr v-for="(item, index) in columns" :key="index">
39 <td>
40 {{ item.label }}
41 </td>
42 <td
43 v-for="(item1, index1) in showTableData"
44 :key="index1"
45 :class="[
46 item1.qszt == '2' ? 'lishi' : '',
47 item1.qszt == '0' ? 'linshi' : '',
48 ]"
49 >
50 {{ item1[item.prop] }}
51 </td>
52 </tr>
53 </table>
54 </div>
55 </div>
56 </div>
57 </template>
58
59 <script>
60 import { mapGetters } from "vuex";
61 import { datas } from "./djxxColumns";
62
63 export default {
64 name: "djxxTable",
65 props: {
66 showType: "",
67 },
68 data() {
69 return {
70 checkList: ["临时", "现势", "历史"],
71 tableWidth: 810,
72 type: datas.columns(),
73 tableData: [],
74 showTableData: [],
75 ths: [],
76 showThs: [],
77 columns: [],
78 title: "",
79 };
80 },
81 computed: {
82 ...mapGetters(["djbxx"]),
83 },
84 watch: {
85 showType: {
86 handler(newVlue) {
87 // 清空值
88 this.tableData = [];
89 this.ths = [];
90 this.columns = this.type[newVlue].columns;
91 this.title = this.type[newVlue].title;
92 this.checkList = ["临时", "现势", "历史"];
93 this.tableWidth = 810
94
95 let detail = this.djbxx.detail.qlxxs[newVlue];
96 detail.forEach((item) => {
97 this.tableData.push(item);
98 if (item.qszt == "0") {
99 this.ths.push({
100 type: "临时",
101 qllxmc: item.qllxmc,
102 djlxmc: item.djlxmc,
103 prop: "linshi",
104 class: "linshi",
105 });
106 } else if (item.qszt == "1") {
107 this.ths.push({
108 type: "现势",
109 qllxmc: item.qllxmc,
110 djlxmc: item.djlxmc,
111 prop: "xianshi",
112 class: "xianshi",
113 });
114 } else if (item.qszt == "2") {
115 this.ths.push({
116 type: "历史",
117 qllxmc: item.qllxmc,
118 djlxmc: item.djlxmc,
119 prop: "lishi",
120 class: "lishi",
121 });
122 }
123 });
124 this.showTableData = this.tableData;
125 this.showThs = this.ths;
126 let width = (this.tableData.length - 3) * 223 + this.tableWidth;
127 this.tableWidth = this.tableData.length > 3 ? width : 810;
128 },
129 immediate: true,
130 },
131 },
132 methods: {
133 checkChange() {
134 var checkKey = [];
135 this.ths = [];
136 this.tableWidth = 810;
137 this.checkList.forEach((item) => {
138 if (item == "临时") {
139 checkKey.push("0");
140 }
141 if (item == "现势") {
142 checkKey.push("1");
143 }
144 if (item == "历史") {
145 checkKey.push("2");
146 }
147 });
148 this.showTableData = this.tableData.filter((item) =>
149 checkKey.includes(item.qszt)
150 );
151 this.showTableData.forEach((item) => {
152 if (item.qszt == "0") {
153 this.ths.push({
154 type: "临时",
155 qllxmc: item.qllxmc,
156 djlxmc: item.djlxmc,
157 prop: "linshi",
158 class: "linshi",
159 });
160 } else if (item.qszt == "1") {
161 this.ths.push({
162 type: "现势",
163 qllxmc: item.qllxmc,
164 djlxmc: item.djlxmc,
165 prop: "xianshi",
166 class: "xianshi",
167 });
168 } else if (item.qszt == "2") {
169 this.ths.push({
170 type: "历史",
171 qllxmc: item.qllxmc,
172 djlxmc: item.djlxmc,
173 prop: "lishi",
174 class: "lishi",
175 });
176 }
177 });
178 let width = (this.showTableData.length - 3) * 223 + this.tableWidth;
179 this.tableWidth = this.showTableData.length > 3 ? width : 810;
180 },
181 },
182 };
183 </script>
184
185 <style lang="scss" scoped>
186 .djxxTable {
187 width: 100%;
188 height: 100%;
189 background: #fff;
190 overflow-y: scroll;
191 color: #333;
192
193 .tableBox {
194 width: 810px;
195 margin: 0 auto;
196 display: flex;
197 flex-wrap: wrap;
198
199 .title {
200 width: 100%;
201 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
202 font-weight: 700;
203 font-size: 16px;
204 text-align: center;
205 background: #e9e9e9;
206 height: 62px;
207 line-height: 62px;
208 position: relative;
209 margin: 1px 0;
210 .checkbox {
211 position: absolute;
212 right: 20px;
213 bottom: -16px;
214 height: 62px;
215 }
216 }
217
218 .xxTableBox {
219 width: 810px;
220 overflow-x: scroll;
221 }
222
223 .xxTable > tr th:not(:first-child) {
224 width: 223px;
225 }
226 .xxTable > tr:first-child th {
227 width: 140px;
228 }
229 .xxTable {
230 border-spacing: 1px;
231 tr > th {
232 background: #464c5b;
233 color: #fff;
234 font-size: 16px;
235 }
236 th.linshi,
237 th.xianshi {
238 background: #464c5b;
239 }
240 th.lishi {
241 background: rgba(70, 76, 91, 0.8);
242 }
243 .one th {
244 height: 25px;
245 font-size: 14px;
246 }
247
248 th.linshi {
249 color: #fe9400;
250 }
251 .two th {
252 height: 45px;
253
254 p:nth-child(2) {
255 font-size: 14px;
256 }
257 }
258 .linshiIcon {
259 position: relative;
260 }
261 .linshiIcon::after {
262 content: "";
263 display: block;
264 width: 0;
265 height: 0;
266 border-width: 0px 0px 45px 45px;
267 border-style: none solid solid;
268 border-color: transparent transparent #fe9400;
269 position: absolute;
270 top: 0px;
271 right: 3px;
272 transform: rotate(-90deg);
273 }
274 .icon {
275 position: absolute;
276 top: 8px;
277 right: 6px;
278 transform: rotate(45deg);
279 color: #fff;
280 font-size: 12px;
281 z-index: 10;
282 }
283
284 tr td {
285 text-align: center;
286 height: 40px;
287 padding: 4px;
288 font-size: 13px;
289 }
290 > tr:nth-child(odd) td {
291 background: #f2f2f2;
292 }
293 > tr:nth-child(even) td {
294 background: #f9f9f9;
295 }
296 td.linshi {
297 color: #fe9400;
298 }
299 tr > td.lishi {
300 color: #7f7f7f;
301 }
302 }
303 }
304 }
305 </style>
1 <template>
2 <div class="dyaq">
3 <div class="tableBox">
4 <div class="title">
5 抵押权登记信息
6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList">
8 <el-checkbox label="临时"></el-checkbox>
9 <el-checkbox label="现势"></el-checkbox>
10 <el-checkbox label="历史"></el-checkbox>
11 </el-checkbox-group>
12 </div>
13 </div>
14 <table class="xxTable">
15 <tr>
16 <th rowspan="3" width="140">业务类型</th>
17 </tr>
18 <tr class="one">
19 <th class="linshiIcon">
20 <div class="icon">临时</div>
21 临时
22 </th>
23 <th>现势</th>
24 <th>历史</th>
25 </tr>
26 <tr class="two">
27 <th>
28 <p>抵押权</p>
29 <p>首次登记</p>
30 </th>
31 <th>
32 <p>抵押权</p>
33 <p>转移登记</p>
34 </th>
35 <th>
36 <p>抵押权</p>
37 <p>转移登记</p>
38 </th>
39 </tr>
40
41 <tr v-for="(item, index) in columns" :key="index">
42 <td>
43 {{ item.label }}
44 </td>
45 <td>{{ tableData.linshi[item.prop] }}</td>
46 <td>{{ tableData.xianshi[item.prop] }}</td>
47 <td>{{ tableData.lishi[item.prop] }}</td>
48 </tr>
49 </table>
50 </div>
51 </div>
52 </template>
53
54 <script>
55 export default {
56 name: "dyaq",
57 data() {
58 return {
59 checkList: ["临时", "现势", "历史"],
60 columns: [
61 {
62 prop: "ssywh",
63 label: "上手业务号",
64 },
65 {
66 prop: "dah",
67 label: "档案号",
68 },
69 {
70 prop: "ywh",
71 label: "业务号",
72 },
73 {
74 prop: "bdcdyh",
75 label: "不动产单元号",
76 },
77 {
78 prop: "zjjzwzl",
79 label: "在建建筑物坐落",
80 },
81 {
82 prop: "dybdclx",
83 label: "抵押不动产类型",
84 },
85 {
86 prop: "dyqr",
87 label: "抵押权人",
88 },
89 {
90 prop: "zjzl",
91 label: "证件种类",
92 },
93 {
94 prop: "zjh",
95 label: "证件号",
96 },
97 {
98 prop: "dyr",
99 label: "抵押人",
100 },
101 {
102 prop: "dyfs",
103 label: "抵押方式",
104 },
105 {
106 prop: "sfygdj",
107 label: "是否预告登记",
108 },
109 {
110 prop: "zjjzwdyfw",
111 label: "在建建筑物抵押范围",
112 },
113 {
114 prop: "dymj",
115 label: "抵押面积",
116 },
117 {
118 prop: "bdbzzqse",
119 label: "被担保主债权数额(万元)",
120 },
121 {
122 prop: "dbfw",
123 label: "担保范围",
124 },
125 {
126 prop: "zwlxqssj",
127 label: "债务履行起始时间",
128 },
129 {
130 prop: "zwlxjssj",
131 label: "债务履行结束时间",
132 },
133 {
134 prop: "zwlxqx",
135 label: "债务履行期限(债务确定期间)",
136 },
137 {
138 prop: "zgzqqdsshse",
139 label: "最高债权确定事实和数额",
140 },
141 {
142 prop: "sfczyd",
143 label: "是否存在禁止或限制转让抵押不动产的约定",
144 },
145 {
146 prop: "djyy",
147 label: "登记原因",
148 },
149 {
150 prop: "bdcdjzmh",
151 label: "不动产登记证明号",
152 },
153 {
154 prop: "djsj",
155 label: "登记时间",
156 },
157 {
158 prop: "dbr",
159 label: "登簿人",
160 },
161 {
162 prop: "djjg",
163 label: "登记机构",
164 },
165 {
166 prop: "fj",
167 label: "附记",
168 },
169 {
170 prop: "qlqtzk",
171 label: "权利其他状况",
172 },
173 {
174 prop: "zxdyywh",
175 label: "注销抵押业务号",
176 },
177 {
178 prop: "zxdyyy",
179 label: "注销抵押原因",
180 },
181 ],
182 tableData: {
183 linshi: {
184 ssywh: "",
185 dah: "",
186 ywh: "200825012285",
187 bdcdyh: "370205004005GB10030 W00000000",
188 zjjzwzl:
189 "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
190 dybdclx: "土地",
191 dyqr: "中国银行股份有限公司C区支行",
192 zjzj: "营业执照",
193 zjh: "*******",
194 dyr: "联城有限公司",
195 dyfs: "一般抵押",
196 sfygdj: "否",
197 zjjzwdyfw: "",
198 dymj: "22384.1700",
199 bdbzzqse: "22000",
200 dbfw: "城镇住宅用地",
201 zwlxqssj: "2007年12月25日",
202 zwlxjssj: "2077年12月24日",
203 zwlxqx: "1年",
204 zgzqqdsshse: "11223",
205 sfczyd: "否",
206 djyy: "合同设立",
207 bdcdjzmh: "A（2011）B市不动产证明第0000060号",
208 djsj: "2009年04月21日",
209 dbr: "路**",
210 djjg: "",
211 fj: "",
212 qlqtzk: "",
213 zxdyywh: "201025126854",
214 zxdyyy: "贷款还清",
215 },
216 xianshi: {
217 ssywh: "",
218 dah: "",
219 ywh: "200825012285",
220 bdcdyh: "370205004005GB10030 W00000000",
221 zjjzwzl:
222 "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
223 dybdclx: "土地",
224 dyqr: "中国银行股份有限公司C区支行",
225 zjzj: "营业执照",
226 zjh: "*******",
227 dyr: "联城有限公司",
228 dyfs: "一般抵押",
229 sfygdj: "否",
230 zjjzwdyfw: "",
231 dymj: "22384.1700",
232 bdbzzqse: "22000",
233 dbfw: "城镇住宅用地",
234 zwlxqssj: "2007年12月25日",
235 zwlxjssj: "2077年12月24日",
236 zwlxqx: "1年",
237 zgzqqdsshse: "11223",
238 sfczyd: "否",
239 djyy: "合同设立",
240 bdcdjzmh: "A（2011）B市不动产证明第0000060号",
241 djsj: "2009年04月21日",
242 dbr: "路**",
243 djjg: "",
244 fj: "",
245 qlqtzk: "",
246 zxdyywh: "201025126854",
247 zxdyyy: "贷款还清",
248 },
249 lishi: {
250 ssywh: "",
251 dah: "",
252 ywh: "200825012285",
253 bdcdyh: "370205004005GB10030 W00000000",
254 zjjzwzl:
255 "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
256 dybdclx: "土地",
257 dyqr: "中国银行股份有限公司C区支行",
258 zjzj: "营业执照",
259 zjh: "*******",
260 dyr: "联城有限公司",
261 dyfs: "一般抵押",
262 sfygdj: "否",
263 zjjzwdyfw: "",
264 dymj: "22384.1700",
265 bdbzzqse: "22000",
266 dbfw: "城镇住宅用地",
267 zwlxqssj: "2007年12月25日",
268 zwlxjssj: "2077年12月24日",
269 zwlxqx: "1年",
270 zgzqqdsshse: "11223",
271 sfczyd: "否",
272 djyy: "合同设立",
273 bdcdjzmh: "A（2011）B市不动产证明第0000060号",
274 djsj: "2009年04月21日",
275 dbr: "路**",
276 djjg: "",
277 fj: "",
278 qlqtzk: "",
279 zxdyywh: "201025126854",
280 zxdyyy: "贷款还清",
281 },
282 },
283 };
284 },
285 };
286 </script>
287
288 <style lang="scss" scoped>
289 .dyaq {
290 width: 100%;
291 height: 100%;
292 background: #fff;
293 overflow-y: scroll;
294 color: #333;
295
296 .tableBox {
297 width: 810px;
298 margin: 0 auto;
299
300 .title {
301 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
302 font-weight: 700;
303 font-size: 16px;
304 text-align: center;
305 background: #e9e9e9;
306 height: 62px;
307 line-height: 62px;
308 position: relative;
309 margin: 1px 0;
310 .checkbox {
311 position: absolute;
312 right: 20px;
313 bottom: -16px;
314 height: 62px;
315 }
316 }
317
318 .xxTable {
319 width: 810px;
320 border-spacing: 1px;
321 tr > th {
322 background: #464c5b;
323 color: #fff;
324 font-size: 16px;
325 }
326 tr > th:nth-child(1),
327 tr > th:nth-child(2) {
328 background: #464c5b;
329 }
330 tr > th:nth-child(3) {
331 background: rgba(70, 76, 91, 0.8);
332 }
333 .one th {
334 height: 25px;
335 font-size: 14px;
336 }
337 .one > th:nth-child(1) {
338 color: #fe9400;
339 }
340 .two th {
341 height: 45px;
342
343 p:nth-child(2) {
344 font-size: 14px;
345 }
346 }
347 .two > th:nth-child(1) {
348 color: #fe9400;
349 }
350 .linshiIcon {
351 position: relative;
352 }
353 .linshiIcon::after {
354 content: "";
355 display: block;
356 width: 0;
357 height: 0;
358 border-width: 0px 0px 45px 45px;
359 border-style: none solid solid;
360 border-color: transparent transparent #fe9400;
361 position: absolute;
362 top: 0px;
363 right: 3px;
364 transform: rotate(-90deg);
365 }
366 .icon {
367 position: absolute;
368 top: 8px;
369 right: 6px;
370 transform: rotate(45deg);
371 color: #fff;
372 font-size: 12px;
373 z-index: 10;
374 }
375
376 tr td {
377 text-align: center;
378 height: 40px;
379 padding: 4px;
380 font-size: 13px;
381 }
382 > tr:nth-child(odd) td {
383 background: #f2f2f2;
384 }
385 > tr:nth-child(even) td {
386 background: #f9f9f9;
387 }
388 tr > td:nth-child(2) {
389 color: #fe9400;
390 }
391 tr > td:nth-child(4) {
392 color: #7f7f7f;
393 }
394 }
395 }
396 }
397 </style>
1 <template>
2 <div class="dyiq">
3 <div class="tableBox">
4 <div class="title">
5 地役权登记信息
6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList">
8 <el-checkbox label="临时"></el-checkbox>
9 <el-checkbox label="现势"></el-checkbox>
10 <el-checkbox label="历史"></el-checkbox>
11 </el-checkbox-group>
12 </div>
13 </div>
14 <table class="xxTable">
15 <tr>
16 <th rowspan="3" width="140">业务类型</th>
17 </tr>
18 <tr class="one">
19 <th class="linshiIcon">
20 <div class="icon">临时</div>
21 临时
22 </th>
23 <th>现势</th>
24 <th>历史</th>
25 </tr>
26 <tr class="two">
27 <th>
28 <p>地役权</p>
29 <p>首次登记</p>
30 </th>
31 <th>
32 <p>地役权</p>
33 <p>转移登记</p>
34 </th>
35 <th>
36 <p>地役权</p>
37 <p>转移登记</p>
38 </th>
39 </tr>
40
41 <tr v-for="(item, index) in columns" :key="index">
42 <td>
43 {{ item.label }}
44 </td>
45 <td>{{ tableData.linshi[item.prop] }}</td>
46 <td>{{ tableData.xianshi[item.prop] }}</td>
47 <td>{{ tableData.lishi[item.prop] }}</td>
48 </tr>
49 </table>
50 </div>
51 </div>
52 </template>
53
54 <script>
55 export default {
56 name: "dyiq",
57 data() {
58 return {
59 checkList: ["临时", "现势", "历史"],
60 columns: [
61 {
62 prop: "ssywh",
63 label: "上手业务号",
64 },
65 {
66 prop: "dah",
67 label: "档案号",
68 },
69 {
70 prop: "ywh",
71 label: "业务号",
72 },
73 {
74 prop: "gydbdcdyh",
75 label: "供役地不动产单元号",
76 },
77 {
78 prop: "gydqlr",
79 label: "供役地权利人",
80 },
81 {
82 prop: "gydqlrzjzl",
83 label: "供役地权利人证件种类",
84 },
85 {
86 prop: "xydbdcdyh",
87 label: "需役地不动产单元号",
88 },
89 {
90 prop: "xydzl",
91 label: "需役地坐落",
92 },
93 {
94 prop: "xydqlr",
95 label: "需役地权利人",
96 },
97 {
98 prop: "xydqlrzjzl",
99 label: "需役地权利人证件种类",
100 },
101 {
102 prop: "xydzjh",
103 label: "需役地证件号",
104 },
105 {
106 prop: "djyy",
107 label: "登记原因",
108 },
109 {
110 prop: "dyqnr",
111 label: "地役权内容",
112 },
113 {
114 prop: "qlqssj",
115 label: "权利起始时间",
116 },
117 {
118 prop: "qljssj",
119 label: "权利结束时间",
120 },
121 {
122 prop: "bdcdjzmh",
123 label: "不动产登记证明号",
124 },
125 {
126 prop: "qxdm",
127 label: "区县代码",
128 },
129 {
130 prop: "djjg",
131 label: "登记机构",
132 },
133 {
134 prop: "dbr",
135 label: "登簿人",
136 },
137 {
138 prop: "djsj",
139 label: "登记时间",
140 },
141 ],
142 tableData: {
143 linshi: {},
144 xianshi: {},
145 lishi: {},
146 },
147 };
148 },
149 };
150 </script>
151
152 <style lang="scss" scoped>
153 .dyiq {
154 width: 100%;
155 height: 100%;
156 background: #fff;
157 overflow-y: scroll;
158 color: #333;
159
160 .tableBox {
161 width: 810px;
162 margin: 0 auto;
163
164 .title {
165 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
166 font-weight: 700;
167 font-size: 16px;
168 text-align: center;
169 background: #e9e9e9;
170 height: 62px;
171 line-height: 62px;
172 position: relative;
173 margin: 1px 0;
174 .checkbox {
175 position: absolute;
176 right: 20px;
177 bottom: -16px;
178 height: 62px;
179 }
180 }
181
182 .xxTable {
183 width: 810px;
184 border-spacing: 1px;
185 tr > th {
186 background: #464c5b;
187 color: #fff;
188 font-size: 16px;
189 }
190 tr > th:nth-child(1),
191 tr > th:nth-child(2) {
192 background: #464c5b;
193 }
194 tr > th:nth-child(3) {
195 background: rgba(70, 76, 91, 0.8);
196 }
197 .one th {
198 height: 25px;
199 font-size: 14px;
200 }
201 .one > th:nth-child(1) {
202 color: #fe9400;
203 }
204 .two th {
205 height: 45px;
206
207 p:nth-child(2) {
208 font-size: 14px;
209 }
210 }
211 .two > th:nth-child(1) {
212 color: #fe9400;
213 }
214 .linshiIcon {
215 position: relative;
216 }
217 .linshiIcon::after {
218 content: "";
219 display: block;
220 width: 0;
221 height: 0;
222 border-width: 0px 0px 45px 45px;
223 border-style: none solid solid;
224 border-color: transparent transparent #fe9400;
225 position: absolute;
226 top: 0px;
227 right: 3px;
228 transform: rotate(-90deg);
229 }
230 .icon {
231 position: absolute;
232 top: 8px;
233 right: 6px;
234 transform: rotate(45deg);
235 color: #fff;
236 font-size: 12px;
237 z-index: 10;
238 }
239
240 tr td {
241 text-align: center;
242 height: 40px;
243 padding: 4px;
244 font-size: 13px;
245 }
246 > tr:nth-child(odd) td {
247 background: #f2f2f2;
248 }
249 > tr:nth-child(even) td {
250 background: #f9f9f9;
251 }
252 tr > td:nth-child(2) {
253 color: #fe9400;
254 }
255 tr > td:nth-child(4) {
256 color: #7f7f7f;
257 }
258 }
259 }
260 }
261 </style>
1 <template>
2 <div class="gyjsydsyq">
3 <div class="tableBox">
4 <div class="title">
5 建设用地使用权、宅基地使用权登记信息
6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList">
8 <el-checkbox label="临时"></el-checkbox>
9 <el-checkbox label="现势"></el-checkbox>
10 <el-checkbox label="历史"></el-checkbox>
11 </el-checkbox-group>
12 </div>
13 </div>
14 <table class="xxTable">
15 <tr>
16 <th rowspan="3" width="140">业务类型</th>
17 </tr>
18 <tr class="one">
19 <th class="linshiIcon">
20 <div class="icon">临时</div>
21 临时
22 </th>
23 <th>现势</th>
24 <th>历史</th>
25 </tr>
26 <tr class="two">
27 <th>
28 <p>建设用地使用权</p>
29 <p>首次登记</p>
30 </th>
31 <th>
32 <p>建设用地使用权</p>
33 <p>转移登记</p>
34 </th>
35 <th>
36 <p>建设用地使用权</p>
37 <p>转移登记</p>
38 </th>
39 </tr>
40
41 <tr v-for="(item, index) in columns" :key="index">
42 <td>
43 {{ item.label }}
44 </td>
45 <td>{{ tableData.linshi[item.prop] }}</td>
46 <td>{{ tableData.xianshi[item.prop] }}</td>
47 <td>{{ tableData.lishi[item.prop] }}</td>
48 </tr>
49 </table>
50 </div>
51 </div>
52 </template>
53
54 <script>
55 export default {
56 name: "gyjsydsyq",
57 data() {
58 return {
59 checkList: ["临时", "现势", "历史"],
60 columns: [
61 {
62 prop: "ssywh",
63 label: "上手业务号",
64 },
65 {
66 prop: "dah",
67 label: "档案号",
68 },
69 {
70 prop: "ywh",
71 label: "业务号",
72 },
73 {
74 prop: "bdcdyh",
75 label: "不动产单元号",
76 },
77 {
78 prop: "zl",
79 label: "坐落",
80 },
81 {
82 prop: "qlrlx",
83 label: "权利人类型",
84 },
85 {
86 prop: "qlr",
87 label: "权利人",
88 },
89 {
90 prop: "zjzl",
91 label: "证件种类",
92 },
93 {
94 prop: "zjh",
95 label: "证件号",
96 },
97 {
98 prop: "gyqk",
99 label: "共有情况",
100 },
101 {
102 prop: "syqmj",
103 label: "使用权面积(m²)",
104 },
105 {
106 prop: "qlxz",
107 label: "权利性质",
108 },
109 {
110 prop: "tdyt",
111 label: "土地用途",
112 },
113 {
114 prop: "syqqssj",
115 label: "使用权起始时间",
116 },
117 {
118 prop: "syqjssj",
119 label: "使用权结束时间",
120 },
121 {
122 prop: "tdsyqx",
123 label: "土地使用期限",
124 },
125 {
126 prop: "qdjg",
127 label: "取得价格(万元)",
128 },
129 {
130 prop: "djyy",
131 label: "登记原因",
132 },
133 {
134 prop: "bdcqzh",
135 label: "不动产权证号",
136 },
137 {
138 prop: "djsj",
139 label: "登记时间",
140 },
141 {
142 prop: "dbr",
143 label: "登簿人",
144 },
145 {
146 prop: "fj",
147 label: "附记",
148 },
149 ],
150 tableData: {
151 linshi: {
152 ssywh: "",
153 dah: "",
154 ywh: "200825012285",
155 bdcdyh: "370205004005GB10030 W00000000",
156 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
157 qlrlx: "企业",
158 qlr: "联城有限公司",
159 zjzj: "组织机构代码证",
160 zjh: "*******",
161 gyqk: "单独所有",
162 syqmj: "22384.1700",
163 qlxz: "出让",
164 tdyt: "城镇住宅用地",
165 syqqssj: "2007年12月25日",
166 syqjssj: "2077年12月24日",
167 tdsyqx: "70年",
168 qdjg: "75793.75",
169 djyy: "出让取得",
170 bdcqzh: "陕2018汉台区不动产权第0003782号",
171 djsj: "2008年3月11日",
172 dbr: "路**",
173 fj: "2014年10月21日办理房屋首次登记",
174 },
175 xianshi: {
176 ssywh: "",
177 dah: "",
178 ywh: "200825012285",
179 bdcdyh: "370205004005GB10030 W00000000",
180 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
181 qlrlx: "企业",
182 qlr: "联城有限公司",
183 zjzj: "组织机构代码证",
184 zjh: "*******",
185 gyqk: "单独所有",
186 syqmj: "22384.1700",
187 qlxz: "出让",
188 tdyt: "城镇住宅用地",
189 syqqssj: "2007年12月25日",
190 syqjssj: "2077年12月24日",
191 tdsyqx: "70年",
192 qdjg: "75793.75",
193 djyy: "出让取得",
194 bdcqzh: "陕2018汉台区不动产权第0003782号",
195 djsj: "2008年3月11日",
196 dbr: "路**",
197 fj: "2014年10月21日办理房屋首次登记",
198 },
199 lishi: {
200 ssywh: "",
201 dah: "",
202 ywh: "200825012285",
203 bdcdyh: "370205004005GB10030 W00000000",
204 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
205 qlrlx: "企业",
206 qlr: "联城有限公司",
207 zjzj: "组织机构代码证",
208 zjh: "*******",
209 gyqk: "单独所有",
210 syqmj: "22384.1700",
211 qlxz: "出让",
212 tdyt: "城镇住宅用地",
213 syqqssj: "2007年12月25日",
214 syqjssj: "2077年12月24日",
215 tdsyqx: "70年",
216 qdjg: "75793.75",
217 djyy: "出让取得",
218 bdcqzh: "陕2018汉台区不动产权第0003782号",
219 djsj: "2008年3月11日",
220 dbr: "路**",
221 fj: "2014年10月21日办理房屋首次登记",
222 },
223 },
224 };
225 },
226 };
227 </script>
228
229 <style lang="scss" scoped>
230 .gyjsydsyq {
231 width: 100%;
232 height: 100%;
233 background: #fff;
234 overflow-y: scroll;
235 color: #333;
236
237 .tableBox {
238 width: 810px;
239 margin: 0 auto;
240
241 .title {
242 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
243 font-weight: 700;
244 font-size: 16px;
245 text-align: center;
246 background: #e9e9e9;
247 height: 62px;
248 line-height: 62px;
249 position: relative;
250 margin: 1px 0;
251 .checkbox {
252 position: absolute;
253 right: 20px;
254 bottom: -16px;
255 height: 62px;
256 }
257 }
258
259 .xxTable {
260 width: 810px;
261 border-spacing: 1px;
262 tr > th {
263 background: #464c5b;
264 color: #fff;
265 font-size: 16px;
266 }
267 tr > th:nth-child(1),
268 tr > th:nth-child(2) {
269 background: #464c5b;
270 }
271 tr > th:nth-child(3) {
272 background: rgba(70, 76, 91, 0.8);
273 }
274 .one th {
275 height: 25px;
276 font-size: 14px;
277 }
278 .one > th:nth-child(1) {
279 color: #fe9400;
280 }
281 .two th {
282 height: 45px;
283
284 p:nth-child(2) {
285 font-size: 14px;
286 }
287 }
288 .two > th:nth-child(1) {
289 color: #fe9400;
290 }
291 .linshiIcon {
292 position: relative;
293 }
294 .linshiIcon::after {
295 content: "";
296 display: block;
297 width: 0;
298 height: 0;
299 border-width: 0px 0px 45px 45px;
300 border-style: none solid solid;
301 border-color: transparent transparent #fe9400;
302 position: absolute;
303 top: 0px;
304 right: 3px;
305 transform: rotate(-90deg);
306 }
307 .icon {
308 position: absolute;
309 top: 8px;
310 right: 6px;
311 transform: rotate(45deg);
312 color: #fff;
313 font-size: 12px;
314 z-index: 10;
315 }
316
317 tr td {
318 text-align: center;
319 height: 40px;
320 padding: 4px;
321 font-size: 13px;
322 }
323 > tr:nth-child(odd) td {
324 background: #f2f2f2;
325 }
326 > tr:nth-child(even) td {
327 background: #f9f9f9;
328 }
329 tr > td:nth-child(2) {
330 color: #fe9400;
331 }
332 tr > td:nth-child(4) {
333 color: #7f7f7f;
334 }
335 }
336 }
337 }
338 </style>
1 <template>
2 <div class="ygdj">
3 <div class="tableBox">
4 <div class="title">
5 预告登记信息
6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList">
8 <el-checkbox label="临时"></el-checkbox>
9 <el-checkbox label="现势"></el-checkbox>
10 <el-checkbox label="历史"></el-checkbox>
11 </el-checkbox-group>
12 </div>
13 </div>
14 <table class="xxTable">
15 <tr>
16 <th rowspan="3" width="140">业务类型</th>
17 </tr>
18 <tr class="one">
19 <th class="linshiIcon">
20 <div class="icon">临时</div>
21 临时
22 </th>
23 <th>现势</th>
24 <th>历史</th>
25 </tr>
26 <tr class="two">
27 <th>
28 <p>预售商品房买卖预告登记</p>
29 <p>首次登记</p>
30 </th>
31 <th>
32 <p>预售商品房抵押权预告登记</p>
33 <p>转移登记</p>
34 </th>
35 <th>
36 <p>预售商品房买卖预告登记</p>
37 <p>变更登记</p>
38 </th>
39 </tr>
40
41 <tr v-for="(item, index) in columns" :key="index">
42 <td>
43 {{ item.label }}
44 </td>
45 <td>{{ tableData.linshi[item.prop] }}</td>
46 <td>{{ tableData.xianshi[item.prop] }}</td>
47 <td>{{ tableData.lishi[item.prop] }}</td>
48 </tr>
49 </table>
50 </div>
51 </div>
52 </template>
53
54 <script>
55 export default {
56 name: "ygdj",
57 data() {
58 return {
59 checkList: ["临时", "现势", "历史"],
60 columns: [
61 {
62 prop: "ssywh",
63 label: "上手业务号",
64 },
65 {
66 prop: "dah",
67 label: "档案号",
68 },
69 {
70 prop: "ywh",
71 label: "业务号",
72 },
73 {
74 prop: "bdcdyh",
75 label: "不动产单元号",
76 },
77 {
78 prop: "zl",
79 label: "坐落",
80 },
81 {
82 prop: "qlr",
83 label: "权利人",
84 },
85 {
86 prop: "qlrzjzl",
87 label: "证件种类",
88 },
89 {
90 prop: "qlrzjh",
91 label: "证件号",
92 },
93 {
94 prop: "ywr",
95 label: "义务人",
96 },
97 {
98 prop: "ywrzjzl",
99 label: "证件种类",
100 },
101 {
102 prop: "ywrzjh",
103 label: "证件号",
104 },
105 {
106 prop: "fwxz",
107 label: "房屋性质",
108 },
109 {
110 prop: "ghyt",
111 label: "规划用途",
112 },
113 {
114 prop: "fwzcs",
115 label: "房屋总层数",
116 },
117 {
118 prop: "fwszc",
119 label: "房屋所在层",
120 },
121 {
122 prop: "jzmj",
123 label: "建筑面积",
124 },
125 {
126 prop: "djyy",
127 label: "登记原因",
128 },
129 {
130 prop: "bdbzzqse",
131 label: "取得价格/被担保主债权数额",
132 },
133 {
134 prop: "jedw",
135 label: "金额单位",
136 },
137 {
138 prop: "dbfw",
139 label: "担保范围",
140 },
141 {
142 prop: "sfczyd",
143 label: "是否存在禁止或限制转让抵押不动产的约定",
144 },
145 {
146 prop: "djsj",
147 label: "登记时间",
148 },
149 {
150 prop: "bdcdjzmh",
151 label: "不动产登记证明号",
152 },
153 {
154 prop: "dbr",
155 label: "登簿人",
156 },
157 {
158 prop: "zxygywh",
159 label: "注销预告业务号",
160 },
161 {
162 prop: "zxygyy",
163 label: "注销预告原因",
164 },
165 {
166 prop: "zxsj",
167 label: "注销时间",
168 },
169 {
170 prop: "qszt",
171 label: "权属状态",
172 },
173 ],
174 tableData: {
175 linshi: {
176 ssywh: "",
177 dah: "",
178 ywh: "200825012285",
179 bdcdyh: "370205004005GB10030 F00160111",
180 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
181 qlr: "企业",
182 qlrzjzj: "组织机构代码证",
183 qlrzjh: "*******",
184 ywr: "企业",
185 ywrzjzl: "组织机构代码证",
186 ywrzjh: "*******",
187 tdsyqr: "绿地开发有限公司",
188 fwxz: "商品房",
189 ghyt: "住宅",
190 fwzcs: "10",
191 fwszc: "6",
192 jzmj: "111.5",
193 djyy: "",
194 bdbzzqse: "80.000",
195 jedw: "万元",
196 dbfw: "****",
197 sfczyd: "",
198 djsj: "2008年3月11日",
199 bdcdjzmh: "A（2011）B市不动产证明第0000060号",
200 dbr: "路**",
201 zxygywh: "",
202 zxygyy: "",
203 zxsj: "",
204 qszt: "",
205 },
206 xianshi: {
207 ssywh: "",
208 dah: "",
209 ywh: "200825012285",
210 bdcdyh: "370205004005GB10030 F00160111",
211 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
212 qlr: "企业",
213 qlrzjzj: "组织机构代码证",
214 qlrzjh: "*******",
215 ywr: "企业",
216 ywrzjzl: "组织机构代码证",
217 ywrzjh: "*******",
218 tdsyqr: "绿地开发有限公司",
219 fwxz: "商品房",
220 ghyt: "住宅",
221 fwzcs: "10",
222 fwszc: "6",
223 jzmj: "111.5",
224 djyy: "",
225 bdbzzqse: "60.000",
226 jedw: "",
227 dbfw: "",
228 sfczyd: "是",
229 djsj: "2008年3月11日",
230 bdcdjzmh: "A（2011）B市不动产证明第0000060号",
231 dbr: "路**",
232 zxygywh: "",
233 zxygyy: "",
234 zxsj: "",
235 qszt: "",
236 },
237 lishi: {
238 ssywh: "",
239 dah: "",
240 ywh: "200825012285",
241 bdcdyh: "370205004005GB10030 F00160111",
242 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
243 qlr: "企业",
244 qlrzjzj: "组织机构代码证",
245 qlrzjh: "*******",
246 ywr: "企业",
247 ywrzjzl: "组织机构代码证",
248 ywrzjh: "*******",
249 tdsyqr: "绿地开发有限公司",
250 fwxz: "商品房",
251 ghyt: "住宅",
252 fwzcs: "10",
253 fwszc: "6",
254 jzmj: "111.5",
255 djyy: "",
256 bdbzzqse: "",
257 jedw: "",
258 dbfw: "",
259 sfczyd: "",
260 djsj: "2008年3月11日",
261 bdcdjzmh: "A（2011）B市不动产证明第0000060号",
262 dbr: "路**",
263 zxygywh: "200825012286",
264 zxygyy: "个人原因",
265 zxsj: "2008年3月11日",
266 qszt: "",
267 },
268 },
269 };
270 },
271 };
272 </script>
273
274 <style lang="scss" scoped>
275 .ygdj {
276 width: 100%;
277 height: 100%;
278 background: #fff;
279 overflow-y: scroll;
280 color: #333;
281
282 .tableBox {
283 width: 810px;
284 margin: 0 auto;
285
286 .title {
287 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
288 font-weight: 700;
289 font-size: 16px;
290 text-align: center;
291 background: #e9e9e9;
292 height: 62px;
293 line-height: 62px;
294 position: relative;
295 margin: 1px 0;
296 .checkbox {
297 position: absolute;
298 right: 20px;
299 bottom: -16px;
300 height: 62px;
301 }
302 }
303
304 .xxTable {
305 width: 810px;
306 border-spacing: 1px;
307 tr > th {
308 background: #464c5b;
309 color: #fff;
310 font-size: 16px;
311 }
312 tr > th:nth-child(1),
313 tr > th:nth-child(2) {
314 background: #464c5b;
315 }
316 tr > th:nth-child(3) {
317 background: rgba(70, 76, 91, 0.8);
318 }
319 .one th {
320 height: 25px;
321 font-size: 14px;
322 }
323 .one > th:nth-child(1) {
324 color: #fe9400;
325 }
326 .two th {
327 height: 45px;
328
329 p:nth-child(2) {
330 font-size: 14px;
331 }
332 }
333 .two > th:nth-child(1) {
334 color: #fe9400;
335 }
336 .linshiIcon {
337 position: relative;
338 }
339 .linshiIcon::after {
340 content: "";
341 display: block;
342 width: 0;
343 height: 0;
344 border-width: 0px 0px 45px 45px;
345 border-style: none solid solid;
346 border-color: transparent transparent #fe9400;
347 position: absolute;
348 top: 0px;
349 right: 3px;
350 transform: rotate(-90deg);
351 }
352 .icon {
353 position: absolute;
354 top: 8px;
355 right: 6px;
356 transform: rotate(45deg);
357 color: #fff;
358 font-size: 12px;
359 z-index: 10;
360 }
361
362 tr td {
363 text-align: center;
364 height: 40px;
365 padding: 4px;
366 font-size: 13px;
367 }
368 > tr:nth-child(odd) td {
369 background: #f2f2f2;
370 }
371 > tr:nth-child(even) td {
372 background: #f9f9f9;
373 }
374 tr > td:nth-child(2) {
375 color: #fe9400;
376 }
377 tr > td:nth-child(4) {
378 color: #7f7f7f;
379 }
380 }
381 }
382 }
383 </style>
1 <template>
2 <div class="yydj">
3 <div class="tableBox">
4 <div class="title">
5 异议登记信息
6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList">
8 <el-checkbox label="临时"></el-checkbox>
9 <el-checkbox label="现势"></el-checkbox>
10 <el-checkbox label="历史"></el-checkbox>
11 </el-checkbox-group>
12 </div>
13 </div>
14 <table class="xxTable">
15 <tr>
16 <th rowspan="3" width="140">业务类型</th>
17 </tr>
18 <tr class="one">
19 <th class="linshiIcon">
20 <div class="icon">临时</div>
21 临时
22 </th>
23 <th>现势</th>
24 <th>历史</th>
25 </tr>
26 <tr class="two">
27 <th>异议登记</th>
28 <th>异议登记</th>
29 <th>异议登记</th>
30 </tr>
31
32 <tr v-for="(item, index) in columns" :key="index">
33 <td>
34 {{ item.label }}
35 </td>
36 <td>{{ tableData.linshi[item.prop] }}</td>
37 <td>{{ tableData.xianshi[item.prop] }}</td>
38 <td>{{ tableData.lishi[item.prop] }}</td>
39 </tr>
40 </table>
41 </div>
42 </div>
43 </template>
44
45 <script>
46 export default {
47 name: "yydj",
48 data() {
49 return {
50 checkList: ["临时", "现势", "历史"],
51 columns: [
52 {
53 prop: "ssywh",
54 label: "上手业务号",
55 },
56 {
57 prop: "dah",
58 label: "档案号",
59 },
60 {
61 prop: "ywh",
62 label: "业务号",
63 },
64 {
65 prop: "bdcdyh",
66 label: "不动产单元号",
67 },
68 {
69 prop: "zl",
70 label: "坐落",
71 },
72 {
73 prop: "yyr",
74 label: "异议人",
75 },
76 {
77 prop: "zjzl",
78 label: "证件种类",
79 },
80 {
81 prop: "zjh",
82 label: "证件号",
83 },
84 {
85 prop: "yysx",
86 label: "异议事项",
87 },
88 {
89 prop: "bdcdjzmh",
90 label: "不动产登记证明号",
91 },
92 {
93 prop: "djjg",
94 label: "登记机构",
95 },
96 {
97 prop: "dbr",
98 label: "登簿人",
99 },
100 {
101 prop: "djsj",
102 label: "登记时间",
103 },
104 {
105 prop: "zxyyywh",
106 label: "注销异议业务号",
107 },
108 {
109 prop: "zxyyyy",
110 label: "注销异议原因",
111 },
112 {
113 prop: "zxyydbr",
114 label: "注销异议登簿人",
115 },
116 {
117 prop: "zxyydjsj",
118 label: "注销异议登记时间",
119 },
120 ],
121 tableData: {
122 linshi: {
123 ssywh: "",
124 dah: "",
125 ywh: "200825012285",
126 bdcdyh: "370205004005GB10030 F00160111",
127 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
128 yyr: "李四",
129 zjzj: "身份证号",
130 zjh: "*******",
131 yysx: "",
132 djjg: "",
133 bdcdjzmh: "200825012286",
134 dbr: "",
135 djsj: "2008年3月11日",
136 zxyyywh: "",
137 zxyyyy: "",
138 zxyydbr: "",
139 zxyydjsj: "",
140 },
141 xianshi: {
142 ssywh: "",
143 dah: "",
144 ywh: "200825012285",
145 bdcdyh: "370205004005GB10030 F00160111",
146 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
147 yyr: "李四",
148 zjzj: "身份证号",
149 zjh: "*******",
150 yysx: "",
151 djjg: "",
152 bdcdjzmh: "200825012286",
153 dbr: "",
154 djsj: "2008年3月11日",
155 zxyyywh: "200825012286",
156 zxyyyy: "时间到期",
157 zxyydbr: "李四",
158 zxyydjsj: "2008年3月11日",
159 },
160 lishi: {
161 ssywh: "",
162 dah: "",
163 ywh: "200825012285",
164 bdcdyh: "370205004005GB10030 F00160111",
165 zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
166 yyr: "李四",
167 zjzj: "身份证号",
168 zjh: "*******",
169 yysx: "",
170 djjg: "",
171 bdcdjzmh: "200825012286",
172 dbr: "",
173 djsj: "2008年3月11日",
174 zxyyywh: "200825012286",
175 zxyyyy: "时间到期",
176 zxyydbr: "李四",
177 zxyydjsj: "2008年3月11日",
178 },
179 },
180 };
181 },
182 };
183 </script>
184
185 <style lang="scss" scoped>
186 .yydj {
187 width: 100%;
188 height: 100%;
189 background: #fff;
190 overflow-y: scroll;
191 color: #333;
192
193 .tableBox {
194 width: 810px;
195 margin: 0 auto;
196
197 .title {
198 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
199 font-weight: 700;
200 font-size: 16px;
201 text-align: center;
202 background: #e9e9e9;
203 height: 62px;
204 line-height: 62px;
205 position: relative;
206 margin: 1px 0;
207 .checkbox {
208 position: absolute;
209 right: 20px;
210 bottom: -16px;
211 height: 62px;
212 }
213 }
214
215 .xxTable {
216 width: 810px;
217 border-spacing: 1px;
218 tr > th {
219 background: #464c5b;
220 color: #fff;
221 font-size: 16px;
222 }
223 tr > th:nth-child(1),
224 tr > th:nth-child(2) {
225 background: #464c5b;
226 }
227 tr > th:nth-child(3) {
228 background: rgba(70, 76, 91, 0.8);
229 }
230 .one th {
231 height: 25px;
232 font-size: 14px;
233 }
234 .one > th:nth-child(1) {
235 color: #fe9400;
236 }
237 .two th {
238 height: 45px;
239
240 p:nth-child(2) {
241 font-size: 14px;
242 }
243 }
244 .two > th:nth-child(1) {
245 color: #fe9400;
246 }
247 .linshiIcon {
248 position: relative;
249 }
250 .linshiIcon::after {
251 content: "";
252 display: block;
253 width: 0;
254 height: 0;
255 border-width: 0px 0px 45px 45px;
256 border-style: none solid solid;
257 border-color: transparent transparent #fe9400;
258 position: absolute;
259 top: 0px;
260 right: 3px;
261 transform: rotate(-90deg);
262 }
263 .icon {
264 position: absolute;
265 top: 8px;
266 right: 6px;
267 transform: rotate(45deg);
268 color: #fff;
269 font-size: 12px;
270 z-index: 10;
271 }
272
273 tr td {
274 text-align: center;
275 height: 40px;
276 padding: 4px;
277 font-size: 13px;
278 }
279 > tr:nth-child(odd) td {
280 background: #f2f2f2;
281 }
282 > tr:nth-child(even) td {
283 background: #f9f9f9;
284 }
285 tr > td:nth-child(2) {
286 color: #fe9400;
287 }
288 tr > td:nth-child(4) {
289 color: #7f7f7f;
290 }
291 }
292 }
293 }
294 </style>
...@@ -92,7 +92,7 @@ import { ...@@ -92,7 +92,7 @@ import {
92 getDjml, 92 getDjml,
93 getZdjbxx, 93 getZdjbxx,
94 getQlname, 94 getQlname,
95 getDetail 95 getDetail,
96 } from "@/api/zhcx.js"; 96 } from "@/api/zhcx.js";
97 import { mapGetters } from "vuex"; 97 import { mapGetters } from "vuex";
98 import axios from "axios"; 98 import axios from "axios";
...@@ -157,22 +157,27 @@ export default { ...@@ -157,22 +157,27 @@ export default {
157 openDialog(scope) { 157 openDialog(scope) {
158 let _this = this; 158 let _this = this;
159 let bsm = scope.row.bsmQlxx; 159 let bsm = scope.row.bsmQlxx;
160 bsm="b1394eedd8387347684d358da80da62c"
161 this.bsm = bsm;
162 axios 160 axios
163 // .all([getDjbfm(bsm), getDjml(bsm), getZdjbxx(bsm), getQlname(bsm), getDetail(bsm)]) 161 .all([
162 getDjbfm(bsm),
163 getDjml(bsm),
164 getZdjbxx(bsm),
165 getQlname(bsm),
166 getDetail(bsm),
167 ])
164 .all([getDjbfm(bsm), getDjml(bsm), getZdjbxx(bsm), getQlname(bsm)]) 168 .all([getDjbfm(bsm), getDjml(bsm), getZdjbxx(bsm), getQlname(bsm)])
165 .then(([djbfm, djml, zdjbxx, qlname]) => { 169 .then(([djbfm, djml, zdjbxx, qlname]) => {
166 let obj = { 170 let obj = {
167 djbfm:djbfm.result,// 171 djbfm: djbfm.result,
168 djml:djml.result,// 172 djml: djml.result,
169 zdjbxx:zdjbxx.result, 173 zdjbxx: zdjbxx.result,
170 qlname:qlname.result// 174 qlname: qlname.result,
171 } 175 detail: detail.result,
172 this.$store.dispatch('djbxx/setDjbxx', obj) 176 };
177 this.$store.dispatch("djbxx/setDjbxx", obj);
173 _this.isDialog = true; 178 _this.isDialog = true;
174 179
175 // if (scope.row.qllx == "预告买卖登记") { 180 // if (scope.row.qllxmc == "预告买卖登记") {
176 // this.$refs.djbxxDialog.showTab = "ygdj"; 181 // this.$refs.djbxxDialog.showTab = "ygdj";
177 // } else if (scope.row.qllx == "查封登记") { 182 // } else if (scope.row.qllx == "查封登记") {
178 // this.$refs.djbxxDialog.showTab = "cfdj"; 183 // this.$refs.djbxxDialog.showTab = "cfdj";
......
...@@ -8,7 +8,7 @@ class data extends filter { ...@@ -8,7 +8,7 @@ class data extends filter {
8 constructor() { 8 constructor() {
9 super() 9 super()
10 } 10 }
11 columns () { 11 columns() {
12 return [ 12 return [
13 { 13 {
14 label: '序号', 14 label: '序号',
...@@ -26,15 +26,15 @@ class data extends filter { ...@@ -26,15 +26,15 @@ class data extends filter {
26 label: "权属状态", 26 label: "权属状态",
27 render: (h, scope) => { 27 render: (h, scope) => {
28 let text = ''; 28 let text = '';
29 let color="" 29 let color = ""
30 let obj = { 30 let obj = {
31 "1": { 31 "1": {
32 text:'现势', 32 text: '现势',
33 color:'#4BD863' 33 color: '#4BD863'
34 }, 34 },
35 "2": { 35 "2": {
36 text:'历史', 36 text: '历史',
37 color:'#AAAAAA' 37 color: '#AAAAAA'
38 }, 38 },
39 "3": { 39 "3": {
40 text: '临时', 40 text: '临时',
...@@ -45,18 +45,15 @@ class data extends filter { ...@@ -45,18 +45,15 @@ class data extends filter {
45 color = obj[scope.row.qszt].color 45 color = obj[scope.row.qszt].color
46 return ( 46 return (
47 <div> 47 <div>
48 <span style={`color:${color}`}>●</span> 48 <span style={`color:${color}`}>●</span>
49 <span >{ text }</span> 49 <span >{text}</span>
50 </div> 50 </div>
51 ) 51 )
52 } 52 }
53 }, 53 },
54 { 54 {
55 prop: "qllxmc",
55 label: "权利类型", 56 label: "权利类型",
56 // this.rentType
57 render: (h, scope) => {
58 return <div>{scope.row.qllx}</div>;
59 }
60 }, 57 },
61 { 58 {
62 prop: "ywh", 59 prop: "ywh",
...@@ -103,7 +100,7 @@ class data extends filter { ...@@ -103,7 +100,7 @@ class data extends filter {
103 ] 100 ]
104 } 101 }
105 102
106 ywlys () { 103 ywlys() {
107 return [ 104 return [
108 { value: 1, label: "办事大厅" }, 105 { value: 1, label: "办事大厅" },
109 { value: 2, label: "微信小程序" }, 106 { value: 2, label: "微信小程序" },
......