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 944 additions and 682 deletions
...@@ -58,3 +58,15 @@ export function queryStatus(bsm) { ...@@ -58,3 +58,15 @@ export function queryStatus(bsm) {
58 } 58 }
59 }) 59 })
60 } 60 }
61
62 /**
63 * 范围属性变更查询
64 * @param data
65 */
66 export function queryFwsxbg(data) {
67 return request({
68 url:"/system/basiccommon/query-fwsxbg",
69 method:"post",
70 data:data
71 })
72 }
......
1 <template>
2 <div class="main">
3 <template v-if="isFwsxbg">
4 <!-- <p class="tips">查询条件</p> -->
5 <el-row class="box">
6 <el-col :span="24">
7 <el-row>
8 <el-col :span="24">
9 <el-form :inline="true" class="demo-form-inline" label-width="106px">
10 <el-form-item label="宗地编码">
11 <el-input
12 v-model="queryData.zddm"
13 placeholder="输入宗地编码"
14 @change="query"
15 ></el-input>
16 </el-form-item>
17 <el-form-item label="项目名称">
18 <el-input
19 placeholder="输入项目名称"
20 v-model="queryData.xmmc"
21 @change="query"
22 ></el-input>
23 </el-form-item>
24 <el-form-item label="不动产单元号">
25 <el-input
26 maxlength="28"
27 v-model="queryData.bdcdyh"
28 placeholder="输入不动产单元号"
29 @change="query"
30 ></el-input>
31 </el-form-item>
32 <el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
33 <el-button type="warning" @click="reset" icon="el-icon-refresh">重置</el-button>
34 <el-button
35 type="primary"
36 @click="moreSearch"
37 >更多查询
38 </el-button>
39 <!-- @click="ismore = !ismore" -->
40 </el-form>
41 </el-col>
42 </el-row>
43 <el-row class="row3" v-if="ismore">
44 <el-col :span="22">
45 <el-form :inline="true" class="demo-form-inline" label-width="106px">
46 <el-form-item label="权利人名称">
47 <el-input
48 placeholder="输入权利人名称"
49 v-model="queryData.qlrmc"
50 @change="query"
51 ></el-input>
52 </el-form-item>
53 <el-form-item label="坐落">
54 <el-input
55 v-model="queryData.zl"
56 placeholder="输入坐落地址"
57 @change="query"
58 ></el-input>
59 </el-form-item>
60 <el-form-item label="不动产权证号">
61 <el-input
62 placeholder="输入不动产权证号"
63 v-model="queryData.bdcqzh"
64 @change="query"
65 ></el-input>
66 </el-form-item>
67 </el-form>
68 </el-col>
69 <el-col :span="2" :offset="offset">
70 </el-col>
71 </el-row>
72 </el-col>
73 </el-row>
74 <!-- <p class="tips">查询列表</p> -->
75 <div class="dataGrid" ref="dataGrid">
76 <el-table
77 :data="tableData"
78 :height="tableHeight"
79 :row-class-name="tableRowClassName"
80 >
81 <el-table-column type="index" width="80" align="center" label="序号">
82 </el-table-column>
83 <el-table-column prop="bdcdyh" align="left" label="不动产单元号">
84 </el-table-column>
85 <el-table-column prop="xmmc" align="left" width="150" label="项目名称">
86 </el-table-column>
87 <el-table-column prop="bdcqzh" align="left" label="不动产权证号">
88 </el-table-column>
89 <!--<el-table-column prop="dylx" align="left" width="120" label="类型">
90 <template slot-scope="scope">
91 {{ scope.row.dylx | bdcLxFilter }}
92 </template>
93 </el-table-column>-->
94 <el-table-column prop="qlrmc" align="left" width="120" label="权利人">
95 </el-table-column>
96 <el-table-column prop="zl" align="left" label="坐落"></el-table-column>
97 <el-table-column
98 prop="addtime"
99 align="left"
100 width="120"
101 label="转入时间"
102 >
103 <template slot-scope="scope">
104 {{ scope.row.addtime | timeFilter }}
105 </template>
106 </el-table-column>
107 <!-- <el-table-column prop="cjr" align="left" width="120" label="创建人">
108 </el-table-column> -->
109 <el-table-column label="操作" align="center" width="100">
110 <template slot-scope="scope">
111 <el-tooltip class="item" effect="light" content="办理" placement="top">
112 <i class="iconfont iconbanli iconfontEdit" @click="handleClick(scope.row)" style="padding:0 10px"></i>
113 </el-tooltip>
114 <el-tooltip class="item" effect="light" content="定位" placement="top">
115 <i class="iconfont icondingwei iconfontEdit"></i>
116 </el-tooltip>
117 <!-- <el-button @click="handleClick(scope.row)" type="text" size="small"
118 >办理
119 </el-button>
120 <el-button type="text" size="small">定位</el-button> -->
121 </template>
122 </el-table-column>
123 </el-table>
124 <div class="pagination">
125 <el-pagination
126 background
127 layout="prev, pager, next,total"
128 :total="total"
129 :current-page="pageNo"
130 @current-change="handleCurrentChange"
131 >
132 </el-pagination>
133 </div>
134 </div>
135 </template>
136 <div class="lpb" v-if="!isFwsxbg">
137 <div class="lpb-header">
138 <el-radio-group v-model="scyclx" @change="scyclxChange">
139 <el-radio-button label="0">预测</el-radio-button>
140 <el-radio-button label="1">实测</el-radio-button>
141 </el-radio-group>
142 <el-input
143 maxlength="28"
144 v-model="bdcdyh"
145 :style="{ width: inputWidth + 'px' }"
146 @change="inputChange"
147 class="searchInput"
148 placeholder="输入不动产单元号或室号"
149 ><i
150 slot="suffix"
151 class="el-input__icon el-icon-search"
152 @click="inputChange"
153 ></i
154 ></el-input>
155 <el-link type="primary" style="margin-left:20px" @click="isFwsxbg=true">重新选择户</el-link>
156 </div>
157 <div class="lpb-content" ref="lpbContentWrap" :style="{ height: lpbContentHeight + 'px' }" v-loading="lpbloading">
158 <!-- 楼盘表主体 -->
159 <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
160 <lpbContent ref="lpbContent" class="" :zrzbsm='zrzbsm' lpbParent = 'isFwsxbg'></lpbContent>
161 </div>
162 <!-- 右侧图例 -->
163 <div class="lp-legend">
164 <div class="handleCol">
165 <div class="btn" @click="legendToggle">
166 <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
167 <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
168 </div>
169 <div
170 :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'"
171 @click="selectedZt = 'dyzt'"
172 >
173 <span>单元状态</span>
174 </div>
175 <div
176 :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'"
177 @click="selectedZt = 'fwxz'"
178 >
179 <span>房屋性质</span>
180 </div>
181 <div
182 :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'"
183 @click="selectedZt = 'fwyt'"
184 >
185 <span>房屋用途</span>
186 </div>
187 </div>
188 <div
189 class="legendTable-wrap"
190 :style="{ width: legendToggleFlag ? '204px' : '0' }"
191 >
192 <table
193 class="legendTable"
194 v-show="selectedZt == 'dyzt'"
195 cellspacing="1"
196 cellpadding="1"
197 border="1"
198 >
199 <tr>
200 <th>状态</th>
201 <th>套数</th>
202 <th>面积</th>
203 </tr>
204 <tr
205 v-for="(item, index) in dyztList"
206 :key="index"
207 class="cp"
208 @click="handleChoosedH(item.bsms,item.color)"
209 >
210 <td>
211 <i class="fa fa-circle" :style="{ color: item.color }"></i
212 >{{ item.name }}
213 </td>
214 <td>{{ item.ts }}</td>
215 <td>{{ item.mj }}</td>
216 </tr>
217 </table>
218
219 <table
220 class="legendTable"
221 v-show="selectedZt == 'fwxz'"
222 cellspacing="1"
223 cellpadding="1"
224 border="1"
225 >
226 <tr>
227 <th>性质</th>
228 <th>套数</th>
229 <th>面积</th>
230 </tr>
231 <tr
232 v-for="(item, index) in fwxzList"
233 :key="index"
234 class="cp"
235 @click="handleChoosedH(item.bsms,item.color)"
236 >
237 <td>
238 <i class="fa fa-circle" :style="{ color: item.color }"></i
239 >{{ item.name }}
240 </td>
241 <td>{{ item.ts }}</td>
242 <td>{{ item.mj }}</td>
243 </tr>
244 <tr v-show="fwxzList.length < 1">
245 <td colspan="3" class="tac">暂无数据</td>
246 </tr>
247 </table>
248
249 <table
250 class="legendTable"
251 v-show="selectedZt == 'fwyt'"
252 cellspacing="1"
253 cellpadding="1"
254 border="1"
255 >
256 <tr>
257 <th>用途</th>
258 <th>套数</th>
259 <th>面积</th>
260 </tr>
261 <tr
262 v-for="(item, index) in fwytList"
263 :key="index"
264 class="cp"
265 @click="handleChoosedH(item.bsms,item.color)"
266 >
267 <td>
268 <i class="fa fa-circle" :style="{ color: item.color }"></i
269 >{{ item.name }}
270 </td>
271 <td>{{ item.ts }}</td>
272 <td>{{ item.mj }}</td>
273 </tr>
274 <tr v-show="fwytList.length < 1">
275 <td colspan="3" class="tac">暂无数据</td>
276 </tr>
277 </table>
278 </div>
279 </div>
280 </div>
281 </div>
282 </div>
283 </template>
284
285 <script>
286 import { getSearchList } from "@api/search";
287 import { fwsxbgbl } from "@api/common";
288 import {getQjHDetailByBsm} from "@api/h";
289 import {queryFwsxbg} from "@api/search"
290 import lpbContent from "./../../views/zrz/lpb/bjlp/lpbContent/index"
291 import { getLpbMenuTree, batchScYcChange, getLpbTj,batchGeneratorBdcdyh,getLpbFwytAndQlxz ,batchCommit} from "@api/lpb";
292 export default {
293 name: "fwsxbgTab",
294 components: { lpbContent },
295 inject:['getRightTree','getTreeByBsm'],
296 props: {
297 queryType:{
298 type:String,
299 default:'zd'
300 }
301 },
302 data() {
303 return {
304 offset: 22,
305 ismore: false,
306 queryData: {
307 bdcdyh: "",
308 bdcqzh: "",
309 qlrmc: "",
310 xmmc: "",
311 zddm: "",
312 zl: "",
313 pageNo:this.pageNo,
314 pageSize:this.pageSize,
315 type:this.queryType
316 },
317 type:'fwsxbg',
318 total: 0,
319 pageNo: 1,
320 pageSize: 15,
321 tableData: [],
322 tableHeight: "100",
323 //queryData: {},
324 isFwsxbg:true,
325 zrzbsm:'',
326 scyclx:'0', //实预测类型
327 bdcdyh:'',//室号搜索
328 inputWidth: 220,//搜索框宽度
329 legendToggleFlag: false,
330 selectedZt:'dyzt',
331 dyztList: [
332 {
333 name: "未确权",
334 color: "#83AAFE",
335 ts: "12",
336 mj: "1633",
337 },
338 {
339 name: "已确权",
340 color: "#6EDEE1",
341 ts: "22",
342 mj: "3109",
343 },
344 {
345 name: "已备案",
346 color: "#8ADC88",
347 ts: "3",
348 mj: "409",
349 },
350 {
351 name: "预抵押",
352 color: "#F2AD67",
353 ts: "11",
354 mj: "1466",
355 },
356 {
357 name: "在建抵押",
358 color: "#F191C8",
359 ts: "13",
360 mj: "1792",
361 },
362 {
363 name: "抵押",
364 color: "#FF8282",
365 ts: "14",
366 mj: "13",
367 },
368 {
369 name: "查封",
370 color: "#D7CECF",
371 ts: "9",
372 mj: "1436",
373 },
374 {
375 name: "异议",
376 color: "#D4A3EB",
377 ts: "34",
378 mj: "4342",
379 },
380 {
381 name: "限制",
382 color: "#A5A3FB",
383 ts: "2",
384 mj: "285",
385 },
386 ],
387 fwxzList: [],
388 fwytList: [],
389 lpbContentHeight: 0,
390 lpbContentwidth: 0,
391 lpbloading:true,
392 };
393 },
394 created() {},
395 mounted() {
396 this.getData(this.queryData);
397 // console.log(document.documentElement.clientHeight || document.body.clientHeight,'document.documentElement.clientHeight || document.body.clientHeight');
398 this.$nextTick(() => {
399 this.tableHeight =
400 (document.documentElement.clientHeight || document.body.clientHeight) -
401 352;
402 this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 222;
403 });
404 },
405 methods: {
406 // 重置
407 reset(){
408 this.queryData = {
409 bdcdyh: "",
410 bdcqzh: "",
411 qlrmc: "",
412 xmmc: "",
413 zddm: "",
414 zl: "",
415 type: this.queryType
416 }
417 },
418 // 查询
419 query(){
420 this.getData(this.queryData)
421 },
422 // 更多查询
423 moreSearch(){
424 if(this.ismore === true){
425 this.ismore = false;
426 this.$parent.tableHeight+=55;
427 }else {
428 this.ismore = true;
429 this.$parent.tableHeight-=55;
430 }
431 },
432 onSubmit() {},
433 tableRowClassName({ row, rowIndex }) {
434 if (rowIndex % 2 !== 0) {
435 return "even-row";
436 } else {
437 return "";
438 }
439 },
440 handleCurrentChange(val) {
441 console.log(`当前页: ${val}`);
442 this.pageNo = val;
443 this.queryData.pageNo = val;
444 this.getData(this.queryData);
445 },
446 getData(data) {
447 /*data['type'] = this.type
448 data["qszt"] = this.qszt;
449 getSearchList(data).then((res) => {
450 this.tableData = res.result.records;
451 this.total = res.result.total;
452 });*/
453 queryFwsxbg(data).then(res=>{
454 if (res.success) {
455 this.tableData = res.result.records;
456 this.total = res.result.total;
457 }
458 })
459 },
460 //获取子组件点击查询触发的事件
461 /* geQuerytData(obj) {
462 this.queryData = obj;
463 //将obj作为参数调用接口查询表格数据
464 this.queryData["pageSize"] = this.pageSize;
465 this.pageNo = 1;
466 this.queryData["pageNo"] = 1;
467 this.getData(this.queryData);
468 },*/
469 //点击办理
470 handleClick(row) {
471 let params = { bsm: row.bsm, type: this.queryType };
472 if(this.queryType == 'h'){
473 getQjHDetailByBsm(row.bsm).then((res)=>{
474 if(res.code===200){
475 this.zrzbsm = res.result.zrzbsm;
476 this.isFwsxbg = false;
477 }
478 })
479 }else{
480 this.$confirm('是否确定范围属性变更?', '提示', {
481 confirmButtonText: '确定',
482 cancelButtonText: '取消',
483 type: 'warning'
484 }).then(() => {
485 fwsxbgbl(params)
486 .then((res) => {
487 if (res.success) {
488 // this.$message({
489 // message: res.message,
490 // type: "变更成功",
491 // });
492 let path = "";
493 switch (this.queryType) {
494 case "zrz":
495 this.$store.state.zrzbsm = res.result;
496 this.getTreeByBsm(res.result,this.queryType,'2');
497 path = "/zrz";
498 break;
499 case "zd":
500 this.$store.state.zdbsm = res.result;
501 this.getRightTree(res.result,'2');
502 path = "/zd";
503 break;
504 case "dz":
505 this.$store.state.dzbsm = res.result;
506 this.getTreeByBsm(res.result,this.queryType,'2');
507 path = "/dz";
508 break;
509 default:
510 break;
511 }
512 this.$router.push({
513 path: path,
514 query: {
515 bsm: res.result,
516 source: 2,
517 auth:'2'
518 }
519 });
520 } else {
521 this.$message({
522 message: res.message,
523 type: "warning",
524 });
525 }
526 })
527 .catch((error) => {
528 this.$message({
529 message: res.message,
530 type: "error",
531 });
532 });
533 }).catch(() => {
534
535 });
536 }
537 },
538
539 //实预测转换
540 scyclxChange(){
541 //清空已选中层户
542 // this.bsms = [];
543 this.$refs.lpbContent.hbsmList = [];
544 this.$nextTick(()=>{
545 //户
546 this.$refs.lpbContent.$refs.hBsm.forEach(item=>{
547 item.style.borderColor = 'rgb(230, 230, 230)';
548 if (item.className == "tdSelect") {
549 item.className = "";
550 }
551 });
552 //层
553 this.$refs.lpbContent.$refs.cBsm.forEach(item=>{
554 console.log(item.className,'item.className');
555 item.className = "floor";
556 });
557 })
558 //获取图例数据
559 this.getDyztBsmList();
560 this.getLpbFwytAndQlxz();
561 },
562 inputChange() {
563 if (this.bdcdyh != "") {
564 // 根据不动产单元号或者室号搜索
565 // this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
566 } else {
567 this.$message({
568 message: "请输入内容后查询",
569 type: "warning",
570 });
571 }
572 },
573 //图例的展开收起
574 legendToggle() {
575 this.legendToggleFlag = !this.legendToggleFlag;
576 },
577 //获取各项单元状态统计数据
578 getDyztBsmList() {
579 let data = {
580 zrzbsm: this.$store.state.zrzbsm,
581 scyclx: this.scyclx,
582 };
583 getLpbTj(data).then((res) => {
584 if (res.code === 200) {
585 this.dyztList = res.result;
586 this.dyztList.splice(1,0,this.dyztList[8]);
587 this.dyztList.pop();
588 this.dyztList.forEach(item=>{
589 item.ts = item.bsms.length;
590 switch (item.name) {
591 case 'Qqzt':
592 item.color = "#6EDEE1";
593 item.name = "已确权"
594 break;
595 case 'Wqqzt':
596 item.color = "#83AAFE";
597 item.name = "未确权"
598 break;
599 case 'Bazt':
600 item.color = "#8ADC88";
601 item.name = "已备案"
602 break;
603 case 'Ydyzt':
604 item.color = "#F2AD67";
605 item.name = "预抵押"
606 break;
607 case 'Zjgcdyzt':
608 item.color = "#F191C8";
609 item.name = "在建抵押"
610 break;
611 case 'Dyzt':
612 item.color = "#FF8282";
613 item.name = "抵押"
614 break;
615 case 'Cfzt':
616 item.color = "#D7CECF";
617 item.name = "查封"
618 break;
619 case 'Yyzt':
620 item.color = "#D4A3EB";
621 item.name = "异议"
622 break;
623 case 'Xzzt':
624 item.color = "#A5A3FB";
625 item.name = "限制"
626 break;
627 default:
628 break;
629 }
630 })
631 }
632 });
633 },
634 // 获取房屋用途和房屋性质统计数据
635 getLpbFwytAndQlxz(){
636 let data = {
637 zrzbsm: this.$store.state.zrzbsm,
638 scyclx: this.scyclx,
639 };
640 getLpbFwytAndQlxz(data).then((res) => {
641 if (res.code === 200) {
642 // this.fwytList = res.result
643 this.fwytList = res.result.fwyt;
644 this.fwxzList = res.result.qlxz;
645 if(this.fwytList.length>0){
646 this.fwytList.forEach(item=>{
647 item.color = "#2591FD";
648 item.ts = item.bsms.length
649 })
650 }
651 if(this.fwxzList.length>0){
652 this.fwxzList.forEach(item=>{
653 item.color = "#2591FD";
654 item.ts = item.bsms.length
655 })
656 }
657 }
658 });
659 },
660 //切换房屋状态
661 handleChoosedH(bsms,color) {
662 //每次切换房屋状态，将之前高亮的户边框颜色重置为默认
663 this.$refs.lpbContent.choosedList = [];
664 this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
665 item.style.border = '';
666 });
667 // console.log(bsms,'bsms');
668 // console.log(color,'color');
669 // Dyzt:{list:[],mj:''}
670 //清除选中户
671 // this.$refs.lpbContent.clearChoosedH();
672 this.$nextTick(()=>{
673 //给hBsmList传值
674 // console.log(bsms,'bsms');
675 this.$refs.lpbContent.choosedList = bsms;
676 this.$refs.lpbContent.borderColor = color;
677 })
678 },
679 },
680 computed: {},
681 watch: {
682 ismore: function(val) {
683 if (val) {
684 this.offset = 0;
685 } else {
686 this.offset = 22;
687 this.queryData.qlrmc = "";
688 this.queryData.xmmc = "";
689 this.queryData.bdcqzh = "";
690 }
691 },
692 //树结构和图例伸缩时修改楼盘表主要内容区宽度
693 legendToggleFlag(n) {
694 if (n) {
695 this.lpbContentwidth -= 204;
696 } else {
697 this.lpbContentwidth += 204;
698 }
699 },
700 //选择自然幢展示楼盘表后，查询右侧图例数据
701 isFwsxbg(n){
702 if (!n) {
703 this.getDyztBsmList();
704 this.getLpbFwytAndQlxz();
705 this.$nextTick(()=>{
706 this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6;
707 })
708 }
709 },
710 //改变syclx，更新楼盘表数据
711 scyclx(n){
712 this.$refs.lpbContent.lpbData = n == 0 ? this.$refs.lpbContent.yclpbData : this.$refs.lpbContent.sclpbData
713 },
714 selectedZt(n){
715 this.legendToggleFlag = true;
716 },
717 queryType(val){
718 console.log(val,"范围属性变更,tab")
719 this.queryData.type=val;
720 }
721 },
722 };
723 </script>
724
725 <style scoped lang="less">
726 .main{
727 padding: 0;
728 .box{
729 background-color: white;
730 padding: 10px 0;
731 margin-bottom: 10px;
732 }
733 }
734 /*.main {
735 background-color: #eaedf5;
736 .tips{
737 color: #9B9B9B;
738 margin-left: 2px;
739 margin-bottom: 10px;
740 }
741 .demo-form-inline {
742 margin-top: 18px;
743 .moreSearchBtn {
744 background-color: #1ad6e1;
745 border-color: #1ad6e1;
746 }
747 .moreSearchBtn:focus,
748 .moreSearchBtn:hover {
749 background-color: rgba(28, 200, 229, 0.6);
750 }
751 }
752 .dataGrid {
753 flex: 1;
754 .pagination {
755 padding: 18px 0 0 0;
756 }
757 }
758
759 .lpb{
760 box-sizing: border-box;
761 padding-left: 2px;
762 .searchInput {
763 transition: 0.5s;
764 margin-left: 20px;
765 display: inline-block;
766 }
767 .lpb-content{
768 margin-top: 20px;
769 background-color: #ffffff;
770 display: flex;
771 overflow-y: scroll;
772 .lp-overview {
773 transition: 0.5s;
774 flex: 1;
775 margin-right: 20px;
776 box-sizing: border-box;
777 border: 1px solid rgb(236, 236, 236);
778 border-top: 0;
779 border-bottom: 0;
780 }
781 .lp-legend {
782 transition: 0.5s;
783 height: 100%;
784 font-size: 14px;
785 .handleCol {
786 width: 34px;
787 float: right;
788 height: 100%;
789 .btn {
790 cursor: pointer;
791 height: 40px;
792 line-height: 40px;
793 text-align: center;
794 background-color: #0091ff;
795 color: #fff;
796 border-bottom: 1px solid #e6e6e6;
797 }
798 .dyzt,
799 .fwxz,
800 .fwyt {
801 height: 122px;
802 }
803 .dyzt,
804 .fwxz,
805 .fwyt {
806 cursor: pointer;
807 border-bottom: 1px solid #e6e6e6;
808 span {
809 text-align: center;
810 height: 100%;
811 -webkit-writing-mode: vertical-rl;
812 writing-mode: vertical-rl;
813 line-height: 34px;
814 letter-spacing: 2px;
815 }
816 }
817 .selectedZt {
818 background-color: #0091ff;
819 color: #fff;
820 }
821 }
822 .legendTable-wrap {
823 transition: 0.5s;
824 float: right;
825 overflow: hidden;
826 .legendTable {
827 margin-top: -1px;
828 tr {
829 height: 40px;
830 line-height: 40px;
831 th:first-child {
832 width: 80px;
833 }
834 th {
835 width: 60px;
836 height: 40px;
837 white-space: nowrap;
838 }
839 td {
840 height: 40px;
841 text-align: center;
842 white-space: nowrap;
843 }
844 td:first-child {
845 text-align: left;
846 text-indent: 2px;
847 }
848 }
849 }
850 }
851 }
852 }
853
854 }
855 }*/
856 </style>
1 <template> 1 <template>
2 <div class="main"> 2 <div class="main">
3 <template v-if="isFwsxbg"> 3 <el-tabs v-model="tabName" @tab-click="handleClick" class="menu">
4 <!-- <p class="tips">查询条件</p> --> 4 <el-tab-pane label="宗地" name="zd">
5 <SearchHead @getSearchCondition="geQuerytData" :type="type"></SearchHead> 5 <fwsxbg-tab queryType="zd"></fwsxbg-tab>
6 <!-- <p class="tips">查询列表</p> --> 6 </el-tab-pane>
7 <div class="dataGrid" ref="dataGrid"> 7 <el-tab-pane label="多幢" name="dz">
8 <el-table 8 <fwsxbg-tab v-if="dzVisible" queryType="dz"></fwsxbg-tab>
9 :data="tableData" 9 </el-tab-pane>
10 :height="tableHeight" 10 <el-tab-pane label="自然幢" name="zrz">
11 :row-class-name="tableRowClassName" 11 <fwsxbg-tab v-if="zrzVisible" queryType="zrz"></fwsxbg-tab>
12 > 12 </el-tab-pane>
13 <el-table-column type="index" width="80" align="center" label="序号"> 13 <el-tab-pane label="构筑物" name="gzw">
14 </el-table-column> 14 <fwsxbg-tab v-if="gzwVisible" queryType="gzw"></fwsxbg-tab>
15 <el-table-column prop="bdcdyh" align="left" label="不动产单元号"> 15 </el-tab-pane>
16 </el-table-column> 16 <el-tab-pane label="户" name="h">
17 <el-table-column prop="xmmc" align="left" width="150" label="项目名称"> 17 <fwsxbg-tab v-if="hVisible" queryType="h"></fwsxbg-tab>
18 </el-table-column> 18 </el-tab-pane>
19 <el-table-column prop="bdcqzh" align="left" label="不动产权证号"> 19 </el-tabs>
20 </el-table-column>
21 <el-table-column prop="dylx" align="left" width="120" label="类型">
22 <template slot-scope="scope">
23 {{ scope.row.dylx | bdcLxFilter }}
24 </template>
25 </el-table-column>
26 <el-table-column prop="qlrmc" align="left" width="120" label="权利人">
27 </el-table-column>
28 <el-table-column prop="zl" align="left" label="坐落"></el-table-column>
29 <el-table-column
30 prop="addtime"
31 align="left"
32 width="120"
33 label="转入时间"
34 >
35 <template slot-scope="scope">
36 {{ scope.row.addtime | timeFilter }}
37 </template>
38 </el-table-column>
39 <!-- <el-table-column prop="cjr" align="left" width="120" label="创建人">
40 </el-table-column> -->
41 <el-table-column label="操作" align="center" width="100">
42 <template slot-scope="scope">
43 <el-tooltip class="item" effect="light" content="办理" placement="top">
44 <i class="iconfont iconbanli iconfontEdit" @click="handleClick(scope.row)" style="padding:0 10px"></i>
45 </el-tooltip>
46 <el-tooltip class="item" effect="light" content="定位" placement="top">
47 <i class="iconfont icondingwei iconfontEdit"></i>
48 </el-tooltip>
49 <!-- <el-button @click="handleClick(scope.row)" type="text" size="small"
50 >办理
51 </el-button>
52 <el-button type="text" size="small">定位</el-button> -->
53 </template>
54 </el-table-column>
55 </el-table>
56 <div class="pagination">
57 <el-pagination
58 background
59 layout="prev, pager, next,total"
60 :total="total"
61 :current-page="pageNo"
62 @current-change="handleCurrentChange"
63 >
64 </el-pagination>
65 </div>
66 </div>
67 </template>
68 <div class="lpb" v-if="!isFwsxbg">
69 <div class="lpb-header">
70 <el-radio-group v-model="scyclx" @change="scyclxChange">
71 <el-radio-button label="0">预测</el-radio-button>
72 <el-radio-button label="1">实测</el-radio-button>
73 </el-radio-group>
74 <el-input
75 maxlength="28"
76 v-model="bdcdyh"
77 :style="{ width: inputWidth + 'px' }"
78 @change="inputChange"
79 class="searchInput"
80 placeholder="输入不动产单元号或室号"
81 ><i
82 slot="suffix"
83 class="el-input__icon el-icon-search"
84 @click="inputChange"
85 ></i
86 ></el-input>
87 <el-link type="primary" style="margin-left:20px" @click="isFwsxbg=true">重新选择户</el-link>
88 </div>
89 <div class="lpb-content" ref="lpbContentWrap" :style="{ height: lpbContentHeight + 'px' }" v-loading="lpbloading">
90 <!-- 楼盘表主体 -->
91 <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
92 <lpbContent ref="lpbContent" class="" :zrzbsm='zrzbsm' lpbParent = 'isFwsxbg'></lpbContent>
93 </div>
94 <!-- 右侧图例 -->
95 <div class="lp-legend">
96 <div class="handleCol">
97 <div class="btn" @click="legendToggle">
98 <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
99 <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
100 </div>
101 <div
102 :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'"
103 @click="selectedZt = 'dyzt'"
104 >
105 <span>单元状态</span>
106 </div>
107 <div
108 :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'"
109 @click="selectedZt = 'fwxz'"
110 >
111 <span>房屋性质</span>
112 </div>
113 <div
114 :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'"
115 @click="selectedZt = 'fwyt'"
116 >
117 <span>房屋用途</span>
118 </div>
119 </div>
120 <div
121 class="legendTable-wrap"
122 :style="{ width: legendToggleFlag ? '204px' : '0' }"
123 >
124 <table
125 class="legendTable"
126 v-show="selectedZt == 'dyzt'"
127 cellspacing="1"
128 cellpadding="1"
129 border="1"
130 >
131 <tr>
132 <th>状态</th>
133 <th>套数</th>
134 <th>面积</th>
135 </tr>
136 <tr
137 v-for="(item, index) in dyztList"
138 :key="index"
139 class="cp"
140 @click="handleChoosedH(item.bsms,item.color)"
141 >
142 <td>
143 <i class="fa fa-circle" :style="{ color: item.color }"></i
144 >{{ item.name }}
145 </td>
146 <td>{{ item.ts }}</td>
147 <td>{{ item.mj }}</td>
148 </tr>
149 </table>
150
151 <table
152 class="legendTable"
153 v-show="selectedZt == 'fwxz'"
154 cellspacing="1"
155 cellpadding="1"
156 border="1"
157 >
158 <tr>
159 <th>性质</th>
160 <th>套数</th>
161 <th>面积</th>
162 </tr>
163 <tr
164 v-for="(item, index) in fwxzList"
165 :key="index"
166 class="cp"
167 @click="handleChoosedH(item.bsms,item.color)"
168 >
169 <td>
170 <i class="fa fa-circle" :style="{ color: item.color }"></i
171 >{{ item.name }}
172 </td>
173 <td>{{ item.ts }}</td>
174 <td>{{ item.mj }}</td>
175 </tr>
176 <tr v-show="fwxzList.length < 1">
177 <td colspan="3" class="tac">暂无数据</td>
178 </tr>
179 </table>
180
181 <table
182 class="legendTable"
183 v-show="selectedZt == 'fwyt'"
184 cellspacing="1"
185 cellpadding="1"
186 border="1"
187 >
188 <tr>
189 <th>用途</th>
190 <th>套数</th>
191 <th>面积</th>
192 </tr>
193 <tr
194 v-for="(item, index) in fwytList"
195 :key="index"
196 class="cp"
197 @click="handleChoosedH(item.bsms,item.color)"
198 >
199 <td>
200 <i class="fa fa-circle" :style="{ color: item.color }"></i
201 >{{ item.name }}
202 </td>
203 <td>{{ item.ts }}</td>
204 <td>{{ item.mj }}</td>
205 </tr>
206 <tr v-show="fwytList.length < 1">
207 <td colspan="3" class="tac">暂无数据</td>
208 </tr>
209 </table>
210 </div>
211 </div>
212 </div>
213 </div>
214 </div> 20 </div>
215 </template> 21 </template>
216 22
217 <script> 23 <script>
218 import SearchHead from "@components/searchHead/searchHead"; 24 import fwsxbgTab from '@components/fwsxbg/fwsxbgTab'
219 import { getSearchList } from "@api/search";
220 import { fwsxbgbl } from "@api/common";
221 import {getQjHDetailByBsm} from "@api/h";
222 import lpbContent from "../../../zrz/lpb/bjlp/lpbContent/index";
223 import { getLpbMenuTree, batchScYcChange, getLpbTj,batchGeneratorBdcdyh,getLpbFwytAndQlxz ,batchCommit} from "@api/lpb";
224 25
225 export default { 26 export default {
226 name: "", 27 name: "",
227 components: { SearchHead,lpbContent }, 28 components: { fwsxbgTab},
228 inject:['getRightTree','getTreeByBsm'], 29 inject:[],
229 props: {}, 30 props: {},
230 data() { 31 data(){
231 return { 32 return{
232 type:'fwsxbg', 33 tabName:'zd',
233 qszt: ['2'], 34 dzVisible:false,
234 total: 0, 35 zrzVisible:false,
235 pageNo: 1, 36 gzwVisible:false,
236 pageSize: 15, 37 hVisible:false,
237 tableData: [], 38 }
238 tableHeight: "100", 39 },
239 queryData: {}, 40 methods:{
240 isFwsxbg:true, 41 handleClick(tab,event){
241 zrzbsm:'', 42 console.log(tab,'范围属性变更tab');
242 scyclx:'0', //实预测类型 43 switch (tab.name) {
243 bdcdyh:'',//室号搜索
244 inputWidth: 220,//搜索框宽度
245 legendToggleFlag: false,
246 selectedZt:'dyzt',
247 dyztList: [
248 {
249 name: "未确权",
250 color: "#83AAFE",
251 ts: "12",
252 mj: "1633",
253 },
254 {
255 name: "已确权",
256 color: "#6EDEE1",
257 ts: "22",
258 mj: "3109",
259 },
260 {
261 name: "已备案",
262 color: "#8ADC88",
263 ts: "3",
264 mj: "409",
265 },
266 {
267 name: "预抵押",
268 color: "#F2AD67",
269 ts: "11",
270 mj: "1466",
271 },
272 {
273 name: "在建抵押",
274 color: "#F191C8",
275 ts: "13",
276 mj: "1792",
277 },
278 {
279 name: "抵押",
280 color: "#FF8282",
281 ts: "14",
282 mj: "13",
283 },
284 {
285 name: "查封",
286 color: "#D7CECF",
287 ts: "9",
288 mj: "1436",
289 },
290 {
291 name: "异议",
292 color: "#D4A3EB",
293 ts: "34",
294 mj: "4342",
295 },
296 {
297 name: "限制",
298 color: "#A5A3FB",
299 ts: "2",
300 mj: "285",
301 },
302 ],
303 fwxzList: [],
304 fwytList: [],
305 lpbContentHeight: 0,
306 lpbContentwidth: 0,
307 lpbloading:true,
308 };
309 },
310 created() {},
311 mounted() {
312 this.getData({pageSize:this.pageSize});
313 // console.log(document.documentElement.clientHeight || document.body.clientHeight,'document.documentElement.clientHeight || document.body.clientHeight');
314 this.$nextTick(() => {
315 this.tableHeight =
316 (document.documentElement.clientHeight || document.body.clientHeight) -
317 352;
318 this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 222;
319 });
320 },
321 methods: {
322 onSubmit() {},
323 tableRowClassName({ row, rowIndex }) {
324 if (rowIndex % 2 !== 0) {
325 return "even-row";
326 } else {
327 return "";
328 }
329 },
330 handleCurrentChange(val) {
331 console.log(`当前页: ${val}`);
332 this.pageNo = val;
333 this.queryData.pageNo = val;
334 this.getData(this.queryData);
335 },
336 getData(data) {
337 data['type'] = this.type
338 data["qszt"] = this.qszt;
339 getSearchList(data).then((res) => {
340 this.tableData = res.result.records;
341 this.total = res.result.total;
342 });
343 },
344 //获取子组件点击查询触发的事件
345 geQuerytData(obj) {
346 this.queryData = obj;
347 //将obj作为参数调用接口查询表格数据
348 this.queryData["pageSize"] = this.pageSize;
349 this.pageNo = 1;
350 this.queryData["pageNo"] = 1;
351 this.getData(this.queryData);
352 },
353 //点击办理
354 handleClick(row) {
355 let params = { bsm: row.glbsm, type: row.dylx };
356 if(row.dylx == 'h'){
357 getQjHDetailByBsm(row.glbsm).then((res)=>{
358 if(res.code===200){
359 this.zrzbsm = res.result.zrzbsm;
360 this.isFwsxbg = false;
361 }
362 })
363 }else{
364 this.$confirm('是否确定范围属性变更?', '提示', {
365 confirmButtonText: '确定',
366 cancelButtonText: '取消',
367 type: 'warning'
368 }).then(() => {
369 fwsxbgbl(params)
370 .then((res) => {
371 if (res.code == 200) {
372 // this.$message({
373 // message: res.message,
374 // type: "变更成功",
375 // });
376 let path = "";
377 switch (row.dylx) {
378 case "zrz":
379 this.$store.state.zrzbsm = res.result;
380 this.getTreeByBsm(res.result,row.dylx,'2');
381 path = "/zrz";
382 break;
383 case "zd":
384 this.$store.state.zdbsm = res.result;
385 this.getRightTree(res.result,'2');
386 path = "/zd";
387 break;
388 case "dz": 44 case "dz":
389 this.$store.state.dzbsm = res.result; 45 this.dzVisible=true;
390 this.getTreeByBsm(res.result,row.dylx,'2');
391 path = "/dz";
392 break;
393 default:
394 break;
395 }
396 this.$router.push({
397 path: path,
398 query: {
399 bsm: res.result,
400 source: 2,
401 auth:'2'
402 }
403 });
404 } else {
405 this.$message({
406 message: res.message,
407 type: "warning",
408 });
409 }
410 })
411 .catch((error) => {
412 this.$message({
413 message: res.message,
414 type: "error",
415 });
416 });
417 }).catch(() => {
418
419 });
420 }
421 },
422
423 //实预测转换
424 scyclxChange(){
425 //清空已选中层户
426 // this.bsms = [];
427 this.$refs.lpbContent.hbsmList = [];
428 this.$nextTick(()=>{
429 //户
430 this.$refs.lpbContent.$refs.hBsm.forEach(item=>{
431 item.style.borderColor = 'rgb(230, 230, 230)';
432 if (item.className == "tdSelect") {
433 item.className = "";
434 }
435 });
436 //层
437 this.$refs.lpbContent.$refs.cBsm.forEach(item=>{
438 console.log(item.className,'item.className');
439 item.className = "floor";
440 });
441 })
442 //获取图例数据
443 this.getDyztBsmList();
444 this.getLpbFwytAndQlxz();
445 },
446 inputChange() {
447 if (this.bdcdyh != "") {
448 // 根据不动产单元号或者室号搜索
449 // this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
450 } else {
451 this.$message({
452 message: "请输入内容后查询",
453 type: "warning",
454 });
455 }
456 },
457 //图例的展开收起
458 legendToggle() {
459 this.legendToggleFlag = !this.legendToggleFlag;
460 },
461 //获取各项单元状态统计数据
462 getDyztBsmList() {
463 let data = {
464 zrzbsm: this.$store.state.zrzbsm,
465 scyclx: this.scyclx,
466 };
467 getLpbTj(data).then((res) => {
468 if (res.code === 200) {
469 this.dyztList = res.result;
470 this.dyztList.splice(1,0,this.dyztList[8]);
471 this.dyztList.pop();
472 this.dyztList.forEach(item=>{
473 item.ts = item.bsms.length;
474 switch (item.name) {
475 case 'Qqzt':
476 item.color = "#6EDEE1";
477 item.name = "已确权"
478 break;
479 case 'Wqqzt':
480 item.color = "#83AAFE";
481 item.name = "未确权"
482 break;
483 case 'Bazt':
484 item.color = "#8ADC88";
485 item.name = "已备案"
486 break; 46 break;
487 case 'Ydyzt': 47 case "zrz":
488 item.color = "#F2AD67"; 48 this.zrzVisible=true;
489 item.name = "预抵押"
490 break;
491 case 'Zjgcdyzt':
492 item.color = "#F191C8";
493 item.name = "在建抵押"
494 break;
495 case 'Dyzt':
496 item.color = "#FF8282";
497 item.name = "抵押"
498 break;
499 case 'Cfzt':
500 item.color = "#D7CECF";
501 item.name = "查封"
502 break; 49 break;
503 case 'Yyzt': 50 case "gzw":
504 item.color = "#D4A3EB"; 51 this.gzwVisible=true;
505 item.name = "异议"
506 break; 52 break;
507 case 'Xzzt': 53 case "h":
508 item.color = "#A5A3FB"; 54 this.hVisible=true;
509 item.name = "限制"
510 break; 55 break;
511 default: 56 default:
512 break; 57 break;
513 } 58 }
514 })
515 }
516 });
517 },
518 // 获取房屋用途和房屋性质统计数据
519 getLpbFwytAndQlxz(){
520 let data = {
521 zrzbsm: this.$store.state.zrzbsm,
522 scyclx: this.scyclx,
523 };
524 getLpbFwytAndQlxz(data).then((res) => {
525 if (res.code === 200) {
526 // this.fwytList = res.result
527 this.fwytList = res.result.fwyt;
528 this.fwxzList = res.result.qlxz;
529 if(this.fwytList.length>0){
530 this.fwytList.forEach(item=>{
531 item.color = "#2591FD";
532 item.ts = item.bsms.length
533 })
534 } 59 }
535 if(this.fwxzList.length>0){
536 this.fwxzList.forEach(item=>{
537 item.color = "#2591FD";
538 item.ts = item.bsms.length
539 })
540 } 60 }
541 }
542 });
543 },
544 //切换房屋状态
545 handleChoosedH(bsms,color) {
546 //每次切换房屋状态，将之前高亮的户边框颜色重置为默认
547 this.$refs.lpbContent.choosedList = [];
548 this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
549 item.style.border = '';
550 });
551 // console.log(bsms,'bsms');
552 // console.log(color,'color');
553 // Dyzt:{list:[],mj:''}
554 //清除选中户
555 // this.$refs.lpbContent.clearChoosedH();
556 this.$nextTick(()=>{
557 //给hBsmList传值
558 // console.log(bsms,'bsms');
559 this.$refs.lpbContent.choosedList = bsms;
560 this.$refs.lpbContent.borderColor = color;
561 })
562 },
563 },
564 computed: {},
565 watch: {
566 //树结构和图例伸缩时修改楼盘表主要内容区宽度
567 legendToggleFlag(n) {
568 if (n) {
569 this.lpbContentwidth -= 204;
570 } else {
571 this.lpbContentwidth += 204;
572 }
573 },
574 //选择自然幢展示楼盘表后，查询右侧图例数据
575 isFwsxbg(n){
576 if (!n) {
577 this.getDyztBsmList();
578 this.getLpbFwytAndQlxz();
579 this.$nextTick(()=>{
580 this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6;
581 })
582 }
583 },
584 //改变syclx，更新楼盘表数据
585 scyclx(n){
586 this.$refs.lpbContent.lpbData = n == 0 ? this.$refs.lpbContent.yclpbData : this.$refs.lpbContent.sclpbData
587 },
588 selectedZt(n){
589 this.legendToggleFlag = true;
590 },
591 },
592 }; 61 };
593 </script> 62 </script>
594 <style scoped lang="less"> 63 <style scoped lang="less">
595 .main { 64 .main {
596 background-color: #eaedf5;
597 .tips{
598 color: #9B9B9B;
599 margin-left: 2px;
600 margin-bottom: 10px;
601 }
602 .demo-form-inline {
603 margin-top: 18px;
604 .moreSearchBtn {
605 background-color: #1ad6e1;
606 border-color: #1ad6e1;
607 }
608 .moreSearchBtn:focus,
609 .moreSearchBtn:hover {
610 background-color: rgba(28, 200, 229, 0.6);
611 }
612 }
613 .dataGrid {
614 flex: 1;
615 .pagination {
616 padding: 18px 0 0 0;
617 }
618 }
619
620 .lpb{
621 box-sizing: border-box;
622 padding-left: 2px;
623 .searchInput {
624 transition: 0.5s;
625 margin-left: 20px;
626 display: inline-block;
627 }
628 .lpb-content{
629 margin-top: 20px;
630 background-color: #ffffff;
631 display: flex;
632 overflow-y: scroll;
633 .lp-overview {
634 transition: 0.5s;
635 flex: 1;
636 margin-right: 20px;
637 box-sizing: border-box;
638 border: 1px solid rgb(236, 236, 236);
639 border-top: 0;
640 border-bottom: 0;
641 }
642 .lp-legend {
643 transition: 0.5s;
644 height: 100%; 65 height: 100%;
645 font-size: 14px; 66 .menu {
646 .handleCol {
647 width: 34px;
648 float: right;
649 height: 100%; 67 height: 100%;
650 .btn { 68 /deep/ .el-tabs__content {
651 cursor: pointer; 69 position: unset;
652 height: 40px; 70 margin-top: 40px;
653 line-height: 40px; 71 overflow: visible;
654 text-align: center; 72 }
655 background-color: #0091ff; 73 /deep/ .el-tabs__header {
656 color: #fff; 74 position: -webkit-fixed;
657 border-bottom: 1px solid #e6e6e6; 75 position: fixed;
658 } 76 top: 120px;
659 .dyzt, 77 z-index: 999;
660 .fwxz, 78 width: 100%;
661 .fwyt { 79 margin-bottom: 0;
662 height: 122px; 80 border: 0;
663 } 81 /deep/ .el-tabs__nav-scroll {
664 .dyzt, 82 height: 50px;
665 .fwxz, 83 box-sizing: border-box;
666 .fwyt { 84 padding-left: 20px;
667 cursor: pointer; 85 .el-tabs__active-bar {
668 border-bottom: 1px solid #e6e6e6; 86 display: none;
669 span { 87 }
670 text-align: center; 88 > .el-tabs__nav {
671 height: 100%; 89 border: 0;
672 -webkit-writing-mode: vertical-rl; 90 > .el-tabs__item {
673 writing-mode: vertical-rl; 91 border: 1px solid #DEDEDE;
674 line-height: 34px; 92 height: 36px;
675 letter-spacing: 2px; 93 line-height: 32px;
676 } 94 padding: 0 20px;
677 } 95 margin: 9px 10px 9px 0;
678 .selectedZt { 96 background-color: #ffffff;
679 background-color: #0091ff;
680 color: #fff;
681 }
682 }
683 .legendTable-wrap {
684 transition: 0.5s;
685 float: right;
686 overflow: hidden;
687 .legendTable {
688 margin-top: -1px;
689 tr {
690 height: 40px;
691 line-height: 40px;
692 th:first-child {
693 width: 80px;
694 }
695 th {
696 width: 60px;
697 height: 40px;
698 white-space: nowrap;
699 } 97 }
700 td { 98 .is-active {
701 height: 40px; 99 color: #006CFF;
702 text-align: center; 100 border: 1px solid #006CFF;
703 white-space: nowrap;
704 } 101 }
705 td:first-child {
706 text-align: left;
707 text-indent: 2px;
708 } 102 }
709 } 103 }
104 /deep/ .el-tabs__nav-wrap::after {
105 width: 0;
710 } 106 }
711 } 107 }
712 } 108 }
713 } 109 }
714 110
715 }
716 }
717 </style> 111 </style>
......