Skip to content

任超 / js.CadastralSystem

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

户合并流程完善

1 parent 28393428
Inline Side-by-side
Showing 2 changed files with 489 additions and 2 deletions
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
184 </div> 184 </div>
185 </el-tab-pane> 185 </el-tab-pane>
186 <el-tab-pane label="户合并" name="h"> 186 <el-tab-pane label="户合并" name="h">
187 <div class="hb-tabs"> 187 <div class="hb-tabs psn">
188 <hfghb></hfghb> 188 <hfghb></hfghb>
189 <div class="header-button" :style="{width:fgBoxWidth+'px'}"> 189 <div class="header-button" :style="{width:fgBoxWidth+'px'}">
190 <el-button type="primary" class="saveBtn">保存</el-button> 190 <el-button type="primary" class="saveBtn">保存</el-button>
...@@ -510,7 +510,9 @@ ...@@ -510,7 +510,9 @@
510 } 510 }
511 } 511 }
512 } 512 }
513 513 .psn{
514 position: unset!important;
515 }
514 .hb-tabs { 516 .hb-tabs {
515 height: auto; 517 height: auto;
516 width: 100%; 518 width: 100%;
......
1 <template>
2 <div class="main">
3 <el-row v-show="isSearch">
4 <el-col :span="24">
5 <el-form :inline="true" class="demo-form-inline">
6 <el-form-item label="宗地编码">
7 <el-input
8 v-model="queryData.zddm"
9 placeholder="输入宗地编码"
10 ></el-input>
11 </el-form-item>
12 <el-form-item label="不动产权证号">
13 <el-input
14 v-model="queryData.bdcqzh"
15 placeholder="输入不动产权证号"
16 ></el-input>
17 </el-form-item>
18 <el-form-item label="不动产单元号">
19 <el-input
20 maxlength="28"
21 v-model="queryData.bdcdyh"
22 placeholder="输入不动产单元号"
23 ></el-input>
24 </el-form-item>
25 <el-button type="primary" style="margin-left:30px" @click="search">查询</el-button>
26 <el-button type="warning" @click="reset">重置</el-button>
27 </el-form>
28 </el-col>
29 </el-row>
30 <div class="dataGrid" v-show="isSearch" ref="dataGrid">
31 <el-table
32 :data="tableData"
33 :height="tableHeight"
34 :row-class-name="tableRowClassName"
35 >
36 <el-table-column type="index" width="80" align="center" label="序号">
37 </el-table-column>
38 <el-table-column prop="bdcdyh" align="left" label="不动产单元号">
39 </el-table-column>
40 <el-table-column prop="xmmc" align="left" label="项目名称">
41 </el-table-column>
42 <el-table-column prop="bdcqzh" align="left" label="不动产权证号">
43 </el-table-column>
44 <el-table-column prop="dylx" align="left" label="类型">
45 <template slot-scope="scope">
46 {{scope.row.dylx | bdcLxFilter}}
47 </template>
48 </el-table-column>
49 <el-table-column label="操作" align="center" width="100">
50 <template slot-scope="scope">
51 <el-tooltip class="item" effect="light" content="办理" placement="top">
52 <i class="iconfont iconbanli iconfontEdit" @click="handleClick(scope.row)" style="padding:0 10px"></i>
53 </el-tooltip>
54 </template>
55 </el-table-column>
56 </el-table>
57 <div class="pagination">
58 <el-pagination background layout="prev, pager, next,total" :total="total"
59 :current-page="queryData.pageNo" :page-size="queryData.pageSize" @current-change="handleCurrentChange">
60 </el-pagination>
61 </div>
62 </div>
63 <div class="lpb" v-if="!isSearch">
64 <div class="lpb-header">
65 <el-radio-group v-model="scyclx" @change="scyclxChange">
66 <el-radio-button label="0">预测</el-radio-button>
67 <el-radio-button label="1">实测</el-radio-button>
68 </el-radio-group>
69 <el-input
70 maxlength="28"
71 v-model="bdcdyh"
72 :style="{ width: inputWidth + 'px' }"
73 @change="inputChange"
74 class="searchInput"
75 placeholder="输入不动产单元号或室号"
76 ><i
77 slot="suffix"
78 class="el-input__icon el-icon-search"
79 @click="inputChange"
80 ></i
81 ></el-input>
82 <el-link type="primary" style="margin-left:20px" @click="isSearch=true">重新选择自然幢</el-link>
83 </div>
84 <div class="lpb-content" ref="lpbContentWrap" :style="{ height: lpbContentHeight + 'px' }">
85 <!-- 楼盘表主体 -->
86 <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
87 <lpbContent ref="lpbContent"></lpbContent>
88 </div>
89 <!-- 右侧图例 -->
90 <div class="lp-legend">
91 <div class="handleCol">
92 <div class="btn" @click="legendToggle">
93 <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
94 <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
95 </div>
96 <div
97 :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'"
98 @click="selectedZt = 'dyzt'"
99 >
100 <span>单元状态</span>
101 </div>
102 <div
103 :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'"
104 @click="selectedZt = 'fwxz'"
105 >
106 <span>房屋性质</span>
107 </div>
108 <div
109 :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'"
110 @click="selectedZt = 'fwyt'"
111 >
112 <span>房屋用途</span>
113 </div>
114 </div>
115 <div
116 class="legendTable-wrap"
117 :style="{ width: legendToggleFlag ? '204px' : '0' }"
118 >
119 <table
120 class="legendTable"
121 v-show="selectedZt == 'dyzt'"
122 cellspacing="1"
123 cellpadding="1"
124 border="1"
125 >
126 <tr>
127 <th>状态</th>
128 <th>套数</th>
129 <th>面积</th>
130 </tr>
131 <tr
132 v-for="(item, index) in dyztList"
133 :key="index"
134 class="cp"
135 @click="handleChoosedH(item.bsms,item.color)"
136 >
137 <td>
138 <i class="fa fa-circle" :style="{ color: item.color }"></i
139 >{{ item.name }}
140 </td>
141 <td>{{ item.ts }}</td>
142 <td>{{ item.mj }}</td>
143 </tr>
144 </table>
145
146 <table
147 class="legendTable"
148 v-show="selectedZt == 'fwxz'"
149 cellspacing="1"
150 cellpadding="1"
151 border="1"
152 >
153 <tr>
154 <th>性质</th>
155 <th>套数</th>
156 <th>面积</th>
157 </tr>
158 <tr
159 v-for="(item, index) in fwxzList"
160 :key="index"
161 class="cp"
162 @click="handleChoosedH(item.bsms,item.color)"
163 >
164 <td>
165 <i class="fa fa-circle" :style="{ color: item.color }"></i
166 >{{ item.name }}
167 </td>
168 <td>{{ item.ts }}</td>
169 <td>{{ item.mj }}</td>
170 </tr>
171 <tr v-show="fwxzList.length < 1">
172 <td colspan="3" class="tac">暂无数据</td>
173 </tr>
174 </table>
175
176 <table
177 class="legendTable"
178 v-show="selectedZt == 'fwyt'"
179 cellspacing="1"
180 cellpadding="1"
181 border="1"
182 >
183 <tr>
184 <th>用途</th>
185 <th>套数</th>
186 <th>面积</th>
187 </tr>
188 <tr
189 v-for="(item, index) in fwytList"
190 :key="index"
191 class="cp"
192 @click="handleChoosedH(item.bsms,item.color)"
193 >
194 <td>
195 <i class="fa fa-circle" :style="{ color: item.color }"></i
196 >{{ item.name }}
197 </td>
198 <td>{{ item.ts }}</td>
199 <td>{{ item.mj }}</td>
200 </tr>
201 <tr v-show="fwytList.length < 1">
202 <td colspan="3" class="tac">暂无数据</td>
203 </tr>
204 </table>
205 </div>
206 </div>
207 </div>
208 </div>
209 </div>
210 </template>
211
212 <script>
213 import lpbContent from "../../../zrz/lpb/bjlp/lpbContent/index";
214 export default {
215 name:"",
216 components:{lpbContent},
217 props:{},
218 data(){
219 return {
220 queryData:{
221 zddm:'',
222 bdcdyh:'',
223 bdcqzh:'',
224 pageNo:1,
225 pageSize:10
226 },
227 tableData:[],
228 total:0,
229 tableHeight:0,
230 isSearch:true,//办理前/后
231 scyclx:'0', //实预测类型
232 bdcdyh:'',//室号搜索
233 inputWidth: 220,//搜索框宽度
234 legendToggleFlag: false,
235 selectedZt:'dyzt',
236 dyztList: [
237 {
238 name: "未确权",
239 color: "#83AAFE",
240 ts: "12",
241 mj: "1633",
242 },
243 {
244 name: "已确权",
245 color: "#6EDEE1",
246 ts: "22",
247 mj: "3109",
248 },
249 {
250 name: "已备案",
251 color: "#8ADC88",
252 ts: "3",
253 mj: "409",
254 },
255 {
256 name: "预抵押",
257 color: "#F2AD67",
258 ts: "11",
259 mj: "1466",
260 },
261 {
262 name: "在建抵押",
263 color: "#F191C8",
264 ts: "13",
265 mj: "1792",
266 },
267 {
268 name: "抵押",
269 color: "#FF8282",
270 ts: "14",
271 mj: "13",
272 },
273 {
274 name: "查封",
275 color: "#D7CECF",
276 ts: "9",
277 mj: "1436",
278 },
279 {
280 name: "异议",
281 color: "#D4A3EB",
282 ts: "34",
283 mj: "4342",
284 },
285 {
286 name: "限制",
287 color: "#A5A3FB",
288 ts: "2",
289 mj: "285",
290 },
291 ],
292 fwxzList: [],
293 fwytList: [],
294 lpbContentHeight: 0,
295 lpbContentwidth: 0,
296 }
297 },
298 created(){},
299 mounted(){
300 this.$nextTick(()=>{
301 this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 360;
302 this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 320;
303 this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6;
304 })
305 },
306 methods:{
307 //查询
308 search(){
309 this.tableData = [
310 {
311 bdcdyh:'00111111111111111',
312 xmmc:'测试自然幢',
313 bdcqzh:'A12111111111111111',
314 dylx:'zrz',
315 }
316 ]
317 },
318 //重置
319 reset(){
320 this.queryData = {
321 zddm:'',
322 bdcdyh:'',
323 bdcqzh:'',
324 pageNo:1,
325 pageSize:10
326 };
327 this.search()
328 },
329 //办理
330 handleClick(row){
331 this.isSearch = false;
332 },
333 //分页
334 handleCurrentChange(val) {
335 this.pageNo = val;
336 this.queryData.pageNo = val;
337 this.search();
338 },
339 //表格行背景色
340 tableRowClassName({row, rowIndex}) {
341 if (rowIndex % 2 !== 0) {
342 return "even-row";
343 } else {
344 return "";
345 }
346 },
347 //实预测转换
348 scyclxChange(){
349
350 },
351 inputChange() {
352 if (this.bdcdyh != "") {
353 // 根据不动产单元号或者室号搜索
354 // this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
355 } else {
356 this.$message({
357 message: "请输入内容后查询",
358 type: "warning",
359 });
360 }
361 },
362 //图例的展开收起
363 legendToggle() {
364 this.legendToggleFlag = !this.legendToggleFlag;
365 },
366 },
367 computed: {},
368 watch: {
369 //树结构和图例伸缩时修改楼盘表主要内容区宽度
370 legendToggleFlag(n) {
371 if (n) {
372 this.lpbContentwidth -= 204;
373 } else {
374 this.lpbContentwidth += 204;
375 }
376 },
377 },
378 }
379 </script>
380 <style scoped lang="less">
381 .main{
382 margin-bottom: 14px;
383 .el-row{
384 box-sizing: border-box;
385 padding-left: 2px;
386 margin-bottom: 6px;
387 }
388 .lpb{
389 box-sizing: border-box;
390 padding-left: 2px;
391 .searchInput {
392 transition: 0.5s;
393 margin-left: 20px;
394 display: inline-block;
395 }
396 .lpb-content{
397 margin-top: 20px;
398 background-color: #ffffff;
399 display: flex;
400 overflow-y: scroll;
401 .lp-overview {
402 transition: 0.5s;
403 flex: 1;
404 padding-right: 20px;
405 box-sizing: border-box;
406 }
407 .lp-legend {
408 transition: 0.5s;
409 height: 100%;
410 font-size: 14px;
411 .handleCol {
412 width: 34px;
413 float: right;
414 height: 100%;
415 .btn {
416 cursor: pointer;
417 height: 40px;
418 line-height: 40px;
419 text-align: center;
420 background-color: #0091ff;
421 color: #fff;
422 border-bottom: 1px solid #e6e6e6;
423 }
424 .dyzt {
425 height: 81px;
426 line-height: 81px;
427 }
428 .fwxz,
429 .fwyt {
430 height: 122px;
431 }
432 .dyzt,
433 .fwxz,
434 .fwyt {
435 cursor: pointer;
436 border-bottom: 1px solid #e6e6e6;
437 span {
438 text-align: center;
439 height: 100%;
440 -webkit-writing-mode: vertical-rl;
441 writing-mode: vertical-rl;
442 line-height: 34px;
443 letter-spacing: 2px;
444 }
445 }
446 .selectedZt {
447 background-color: #0091ff;
448 color: #fff;
449 }
450 }
451 .legendTable-wrap {
452 transition: 0.5s;
453 float: right;
454 overflow: hidden;
455 .legendTable {
456 margin-top: -1px;
457 tr {
458 height: 40px;
459 line-height: 40px;
460 th:first-child {
461 width: 80px;
462 }
463 th {
464 width: 60px;
465 height: 40px;
466 white-space: nowrap;
467 }
468 td {
469 height: 40px;
470 text-align: center;
471 white-space: nowrap;
472 }
473 td:first-child {
474 text-align: left;
475 text-indent: 2px;
476 }
477 }
478 }
479 }
480 }
481 }
482
483 }
484 }
485 </style>
...\ No newline at end of file ...\ No newline at end of file