Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
6f1307a3 by yangwei
Options

楼盘表代码优化，功能完善

1 parent 929f6d7c
Inline Side-by-side
Showing 7 changed files with 757 additions and 1143 deletions
1 import request from '@/utils/request' 1 import request from '@/utils/request'
2 import SERVER from './config' 2 import SERVER from './config'
3 3 const url = SERVER.LPBSERVERAPI + '/rest/zhcx/lpcx/'
4 /* 4 /*
5 楼盘查询 5 楼盘查询
6 */ 6 */
...@@ -17,7 +17,23 @@ export function getLpZrz (data) { ...@@ -17,7 +17,23 @@ export function getLpZrz (data) {
17 // 获取楼盘表 17 // 获取楼盘表
18 export function getLpb (zrzbsm) { 18 export function getLpb (zrzbsm) {
19 return request({ 19 return request({
20 url: 'service-lpb/rest/zhcx/lpcx/getLpb?zrzbsm=' + zrzbsm, 20 url: url + 'getLpb?scyclx=1&zrzbsm=' + zrzbsm,
21 // url: 'service-lpb/rest/zhcx/lpcx/getLpb?zrzbsm=' + zrzbsm ,
22 method: 'get'
23 })
24 }
25 // 获取楼盘表房屋用途,房屋性质右侧房屋用途统计数据
26 export function getLpbFwytAndQlxz (zrzbsm) {
27 return request({
28 url: url + 'getLpbFwytAndQlxz?scyclx=1&zrzbsm=' + zrzbsm,
21 method: 'get' 29 method: 'get'
22 }) 30 })
23 } 31 }
32 // 获取楼盘表缺失项统计
33 export function getLpbQsxtj (zrzbsm) {
34 return request({
35 url: url + 'getLpbQsxtj?scyclx=1&zrzbsm=' + zrzbsm,
36 method: 'get'
37 })
38 }
39
......
...@@ -369,4 +369,19 @@ aside { ...@@ -369,4 +369,19 @@ aside {
369 369
370 .item-cwnr img { 370 .item-cwnr img {
371 height: 30px; 371 height: 30px;
372 }
...\ No newline at end of file ...\ No newline at end of file
372 }
373
374 //楼盘表的幢/幢单元名称
375 .lpb-xmmc {
376 height: 60px;
377 line-height: 60px;
378 background-color: #ffffff;
379 border: 1px solid #e6e6e6;
380 text-align: center;
381 transition: 0.5s;
382 margin-left: -1px;
383 border-top: 0;
384 .el-checkbox__label {
385 font-size: 16px;
386 }
387 }
......
1 <template> 1 <template>
2 <div class="edit"> 2 <div class="edit">
3 <el-tabs type="card" v-model="activeName" v-if="!isJump"> 3 <el-tabs type="card" v-model="activeName" >
4 <el-tab-pane label="楼盘页面" name="first"></el-tab-pane> 4 <el-tab-pane label="楼盘页面" name="first"></el-tab-pane>
5 <el-tab-pane label="单元列表页面" name="second"></el-tab-pane> 5 <el-tab-pane label="单元列表页面" name="second"></el-tab-pane>
6 </el-tabs> 6 </el-tabs>
7 <!-- <div class="tab-header">
8 <el-row class="searchContent">
9 <el-col :span="24" style="margin:0 0 10px 18px;">
10 <el-radio-group v-model="scyclx" @change="scyclxChange">
11 <el-radio-button label="0">预测</el-radio-button>
12 <el-radio-button label="1">实测</el-radio-button>
13 </el-radio-group>
14 <el-input maxlength="28" v-model="" :style="{ width: inputWidth + 'px' }" class="searchInput"
15 placeholder="输入不动产单元号或室号"><i slot="suffix" class="el-input__icon el-icon-search" @click="inputChange"></i>
16 </el-input>
17 </el-col>
18 </el-row>
19 </div> -->
20 <div class="tab-content" v-if="activeName=='first'" ref="tabContent" :style="{ height: lpbContentHight + 'px' }" v-show="bjztFlag"> 7 <div class="tab-content" v-if="activeName=='first'" ref="tabContent" :style="{ height: lpbContentHight + 'px' }" v-show="bjztFlag">
21 <!-- 楼盘表主体 --> 8 <!-- 楼盘表主体 -->
22 <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }"> 9 <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
...@@ -53,7 +40,7 @@ ...@@ -53,7 +40,7 @@
53 <tr v-for="(item, index) in dyztList" :key="index" class="cp" 40 <tr v-for="(item, index) in dyztList" :key="index" class="cp"
54 @click="handleChoosedH(item.bsms, item.color)"> 41 @click="handleChoosedH(item.bsms, item.color)">
55 <td> 42 <td>
56 <i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }} 43 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
57 </td> 44 </td>
58 <td>{{ item.ts }}</td> 45 <td>{{ item.ts }}</td>
59 <td>{{ item.mj }}</td> 46 <td>{{ item.mj }}</td>
...@@ -68,7 +55,7 @@ ...@@ -68,7 +55,7 @@
68 <tr v-for="(item, index) in fwxzList" :key="index" class="cp" 55 <tr v-for="(item, index) in fwxzList" :key="index" class="cp"
69 @click="handleChoosedH(item.bsms, item.color)"> 56 @click="handleChoosedH(item.bsms, item.color)">
70 <td> 57 <td>
71 <i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }} 58 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
72 </td> 59 </td>
73 <td>{{ item.ts }}</td> 60 <td>{{ item.ts }}</td>
74 <td>{{ item.mj }}</td> 61 <td>{{ item.mj }}</td>
...@@ -87,7 +74,7 @@ ...@@ -87,7 +74,7 @@
87 <tr v-for="(item, index) in fwytList" :key="index" class="cp" 74 <tr v-for="(item, index) in fwytList" :key="index" class="cp"
88 @click="handleChoosedH(item.bsms, item.color)"> 75 @click="handleChoosedH(item.bsms, item.color)">
89 <td> 76 <td>
90 <i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }} 77 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
91 </td> 78 </td>
92 <td>{{ item.ts }}</td> 79 <td>{{ item.ts }}</td>
93 <td>{{ item.mj }}</td> 80 <td>{{ item.mj }}</td>
...@@ -105,7 +92,7 @@ ...@@ -105,7 +92,7 @@
105 </tr> 92 </tr>
106 <tr v-for="(item, index) in qsxList" :key="index" class="cp" @click="handleChoosedH(item.bsms, item.color)"> 93 <tr v-for="(item, index) in qsxList" :key="index" class="cp" @click="handleChoosedH(item.bsms, item.color)">
107 <td> 94 <td>
108 <i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }} 95 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
109 </td> 96 </td>
110 <td>{{ item.ts }}</td> 97 <td>{{ item.ts }}</td>
111 <td>0</td> 98 <td>0</td>
...@@ -125,6 +112,7 @@ ...@@ -125,6 +112,7 @@
125 <script> 112 <script>
126 import lpbContent from "./lpbContent/index"; 113 import lpbContent from "./lpbContent/index";
127 import selectAllHInfo from "../ywbl/ywsq/components/selectAllHInfo" 114 import selectAllHInfo from "../ywbl/ywsq/components/selectAllHInfo"
115 import { getLpbFwytAndQlxz,getLpbQsxtj } from '@/api/lpb'
128 export default { 116 export default {
129 name: "lpb", 117 name: "lpb",
130 props: { 118 props: {
...@@ -222,58 +210,32 @@ export default { ...@@ -222,58 +210,32 @@ export default {
222 //获取各项单元状态的户bsm 210 //获取各项单元状态的户bsm
223 // this.getDyztBsmList(); 211 // this.getDyztBsmList();
224 //获取房屋用途统计数据 212 //获取房屋用途统计数据
225 // this.getLpbFwytAndQlxz(); 213 this.getLpbFwytAndQlxz();
226 // 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6 214 // 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
227 setTimeout(() => { 215 setTimeout(() => {
228 this.lpbContentwidth = ((document.documentElement.clientWidth || document.body.clientWidth) - 340) - 34 - 6; 216 this.lpbContentwidth = ((document.documentElement.clientWidth || document.body.clientWidth) - 340) - 34 - 6;
229 }, 100); 217 }, 100);
230 }, 218 },
231 methods: { 219 methods: {
232 /* handleTabClick(event){ 220 /* handleTabClick(event){
233 if(event.name=="first"){ 221 if(event.name=="first"){
234 this.$router.push({ 222 this.$router.push({
235 path:"/lpb/index", 223 path:"/lpb/index",
236 }) 224 })
237 }else if(event.name=="second"){ 225 }else if(event.name=="second"){
238 this.$router.push({ 226 this.$router.push({
239 path:"/ywbl/ywsq/components/selectAllHInfo", 227 path:"/ywbl/ywsq/components/selectAllHInfo",
240 }) 228 })
241 } 229 }
242 },*/ 230 },*/
243 loading () {
244 this.getLpbMenuTree(this.$store.state.zrzbsm);
245 },
246 lodding () {
247 this.getlpbData();
248 },
249
250 //获取高度计算lpb内容区高度 231 //获取高度计算lpb内容区高度
251 getHeight () { 232 getHeight () {
252 this.lpbContentHight = window.innerHeight - 190; 233 this.lpbContentHight = window.innerHeight - 190;
253 }, 234 },
254
255 //图例的展开收起 235 //图例的展开收起
256 legendToggle () { 236 legendToggle () {
257 this.legendToggleFlag = !this.legendToggleFlag; 237 this.legendToggleFlag = !this.legendToggleFlag;
258 }, 238 },
259 //获取选中户bsm
260 getHbsm (data, type) {
261 if (type) {
262 // 双击
263
264 } else {
265 //单击 TO DO
266 this.bsms = data;
267 }
268 },
269 //调用楼盘表信息查询和图例统计接口
270 getlpbData () {
271 this.$refs.lpbContent.loadingData(this.$store.state.zrzbsm, this.scyclx);
272 this.getDyztBsmList();
273 this.getLpbFwytAndQlxz();
274 //改变楼盘表子组件的key值，重新渲染
275 // this.time = new Date().getTime();
276 },
277 //切换房屋状态 239 //切换房屋状态
278 handleChoosedH (bsms, color) { 240 handleChoosedH (bsms, color) {
279 //每次切换房屋状态，将之前高亮的户边框颜色重置为默认 241 //每次切换房屋状态，将之前高亮的户边框颜色重置为默认
...@@ -291,13 +253,11 @@ export default { ...@@ -291,13 +253,11 @@ export default {
291 this.$refs.lpbContent.borderColor = color; 253 this.$refs.lpbContent.borderColor = color;
292 }) 254 })
293 }, 255 },
294
295
296 //获取各项单元状态统计数据 256 //获取各项单元状态统计数据
297 getDyztBsmList () { 257 getDyztBsmList () {
298 let data = { 258 let data = {
299 zrzbsm: this.$store.state.zrzbsm, 259 zrzbsm: 'ca71bcc498794a1e0ec3ac93869719f6',
300 scyclx: this.scyclx, 260 scyclx: 1,
301 }; 261 };
302 getLpbTj(data).then((res) => { 262 getLpbTj(data).then((res) => {
303 if (res.code === 200) { 263 if (res.code === 200) {
...@@ -352,11 +312,7 @@ export default { ...@@ -352,11 +312,7 @@ export default {
352 }, 312 },
353 // 获取房屋用途和房屋性质及缺失项统计数据 313 // 获取房屋用途和房屋性质及缺失项统计数据
354 getLpbFwytAndQlxz () { 314 getLpbFwytAndQlxz () {
355 let data = { 315 getLpbFwytAndQlxz('ca71bcc498794a1e0ec3ac93869719f6').then((res) => {
356 zrzbsm: this.$store.state.zrzbsm,
357 scyclx: this.scyclx,
358 };
359 getLpbFwytAndQlxz(data).then((res) => {
360 if (res.code === 200) { 316 if (res.code === 200) {
361 // this.fwytList = res.result 317 // this.fwytList = res.result
362 this.fwytList = res.result.fwyt; 318 this.fwytList = res.result.fwyt;
...@@ -375,32 +331,31 @@ export default { ...@@ -375,32 +331,31 @@ export default {
375 } 331 }
376 } 332 }
377 }); 333 });
378 getLpbQsxtj(data).then((res) => { 334 // getLpbQsxtj('ca71bcc498794a1e0ec3ac93869719f6').then((res) => {
379 if (res.code === 200) { 335 // if (res.code === 200) {
380 this.qsxList = [ 336 // this.qsxList = [
381 { 337 // {
382 name: '坐落', 338 // name: '坐落',
383 bsms: res.result.zl.bsms, 339 // bsms: res.result.zl.bsms,
384 color: '#2591FD', 340 // color: '#2591FD',
385 ts: res.result.zl.bsms.length 341 // ts: res.result.zl.bsms.length
386 }, 342 // },
387 { 343 // {
388 name: '分层分户图', 344 // name: '分层分户图',
389 bsms: res.result.fcfht.bsms, 345 // bsms: res.result.fcfht.bsms,
390 color: '#2591FD', 346 // color: '#2591FD',
391 ts: res.result.fcfht.bsms.length 347 // ts: res.result.fcfht.bsms.length
392 }, 348 // },
393 { 349 // {
394 name: '室号', 350 // name: '室号',
395 bsms: res.result.shbw.bsms, 351 // bsms: res.result.shbw.bsms,
396 color: '#2591FD', 352 // color: '#2591FD',
397 ts: res.result.shbw.bsms.length 353 // ts: res.result.shbw.bsms.length
398 } 354 // }
399 ] 355 // ]
400 } 356 // }
401 }); 357 // });
402 } 358 }
403
404 }, 359 },
405 computed: {}, 360 computed: {},
406 destroyed () { 361 destroyed () {
...@@ -425,60 +380,13 @@ export default { ...@@ -425,60 +380,13 @@ export default {
425 .edit { 380 .edit {
426 height: 100%; 381 height: 100%;
427 background-color: #F4F9FF; 382 background-color: #F4F9FF;
428 .tab-header {
429 border: 1px solid #dedede;
430 box-sizing: border-box;
431 padding: 20px 0;
432 background-color: #ffffff;
433 margin-bottom: 10px;
434 position: relative;
435 .searchContent {
436 margin-left: 62px;
437 box-sizing: border-box;
438 padding: 0 20px;
439 .searchInput {
440 transition: 0.5s;
441 margin-left: 20px;
442 display: inline-block;
443 }
444 }
445 .change {
446 position: absolute;
447 left: 0;
448 top: 0;
449 height: 100%;
450 width: 80px;
451 border-right: 1px solid #dedede;
452 i {
453 cursor: pointer;
454 color: #0090FF;
455 font-size: 36px;
456 display: inherit;
457 text-align: center;
458 line-height: 128px;
459 }
460 }
461
462 .radioBtn {
463 margin-left: 10px;
464 padding: 12px 10px;
465 border: 0;
466 i {
467 font-size: 13px;
468 padding-right: 4px;
469 }
470 /deep/.el-radio-button__inner {
471 border: 1px solid #dcdfe6;
472 border-radius: 4px;
473 box-shadow: 0 0 0 0 #409eff !important;
474 }
475 }
476 }
477
478 .tab-content { 383 .tab-content {
479 border: 1px solid #dedede; 384 border: 1px solid #dedede;
480 background-color: #ffffff; 385 background-color: #ffffff;
481 display: flex; 386 display: flex;
387 &::-webkit-scrollbar {
388 width: 1px;
389 }
482 .lp-tree { 390 .lp-tree {
483 height: 100%; 391 height: 100%;
484 overflow: hidden; 392 overflow: hidden;
...@@ -489,15 +397,12 @@ export default { ...@@ -489,15 +397,12 @@ export default {
489 float: left; 397 float: left;
490 } 398 }
491 } 399 }
492
493 .w0 { 400 .w0 {
494 width: 0; 401 width: 0;
495 } 402 }
496
497 .w260 { 403 .w260 {
498 width: 260px; 404 width: 260px;
499 } 405 }
500
501 .lp-overview { 406 .lp-overview {
502 transition: 0.5s; 407 transition: 0.5s;
503 flex: 1; 408 flex: 1;
...@@ -507,17 +412,14 @@ export default { ...@@ -507,17 +412,14 @@ export default {
507 margin-right: 10px; 412 margin-right: 10px;
508 box-sizing: border-box; 413 box-sizing: border-box;
509 } 414 }
510
511 .lp-legend { 415 .lp-legend {
512 transition: 0.5s; 416 transition: 0.5s;
513 height: 100%; 417 height: 100%;
514 font-size: 14px; 418 font-size: 14px;
515
516 .handleCol { 419 .handleCol {
517 width: 34px; 420 width: 34px;
518 float: right; 421 float: right;
519 height: 100%; 422 height: 100%;
520
521 .btn { 423 .btn {
522 cursor: pointer; 424 cursor: pointer;
523 height: 40px; 425 height: 40px;
...@@ -527,14 +429,12 @@ export default { ...@@ -527,14 +429,12 @@ export default {
527 color: #fff; 429 color: #fff;
528 border-bottom: 1px solid #e6e6e6; 430 border-bottom: 1px solid #e6e6e6;
529 } 431 }
530
531 .dyzt, 432 .dyzt,
532 .fwxz, 433 .fwxz,
533 .fwyt, 434 .fwyt,
534 .qsx { 435 .qsx {
535 height: 122px; 436 height: 122px;
536 } 437 }
537
538 .dyzt, 438 .dyzt,
539 .fwxz, 439 .fwxz,
540 .fwyt, 440 .fwyt,
...@@ -566,7 +466,9 @@ export default { ...@@ -566,7 +466,9 @@ export default {
566 466
567 .legendTable { 467 .legendTable {
568 margin-top: -1px; 468 margin-top: -1px;
569 469 border-color: #e4ebf4 !important;
470 border-collapse: collapse;
471 border-spacing: 0;
570 tr { 472 tr {
571 height: 40px; 473 height: 40px;
572 line-height: 40px; 474 line-height: 40px;
...@@ -585,6 +487,15 @@ export default { ...@@ -585,6 +487,15 @@ export default {
585 height: 40px; 487 height: 40px;
586 text-align: center; 488 text-align: center;
587 white-space: nowrap; 489 white-space: nowrap;
490 .circle{
491 display: inline-block;
492 width: 12px;
493 height: 12px;
494 border-radius: 6px;
495 margin-right: 2px;
496 position: relative;
497 top: 1px;
498 }
588 } 499 }
589 500
590 td:first-child { 501 td:first-child {
...@@ -596,46 +507,5 @@ export default { ...@@ -596,46 +507,5 @@ export default {
596 } 507 }
597 } 508 }
598 } 509 }
599
600 .tab-content::-webkit-scrollbar {
601 width: 1px;
602 }
603
604 .btnGroup {
605 margin: 20px auto 0;
606 width: 260px;
607 }
608
609 .hbjDialog {
610 /deep/ .el-dialog {
611 margin-top: 10vh !important;
612 }
613 }
614
615 .fa {
616 padding-right: 4px;
617 }
618
619 .wrap {
620 width: 100%;
621 height: 30px;
622 position: relative;
623
624 .main-button {
625 display: -webkit-flex;
626 display: flex;
627 flex-direction: column-reverse;
628 flex-wrap: nowrap;
629 position: absolute;
630 left: 165px;
631 top: 18px;
632 }
633
634 .download {
635 position: absolute;
636 left: 312px;
637 top: 19px;
638 }
639 }
640 } 510 }
641 </style> 511 </style>
......
1 <!--
2 * @Author: yangwei
3 * @Date: 2023-02-28 15:47:12
4 * @LastEditors: yangwei
5 * @LastEditTime: 2023-03-02 16:35:36
6 * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ch.vue
7 * @Description:
8 *
9 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
10 -->
11 <template>
12 <div class="ch-wrap">
13 <table
14 class="chTable"
15 ref="ch"
16 border="1"
17 cellspacing="0"
18 cellpadding="0"
19 v-show="ch.length"
20 >
21 <tr v-for="(cs, csIndex) in ch" :key="csIndex">
22 <!-- 显示层数 -->
23 <td
24 class="floor"
25 ref="cBsm"
26 @contextmenu.prevent="openMenu($event, cs, 'c')"
27 @click="handleClickC($event, cs)"
28 >
29 {{ cs.sjc }}层
30 </td>
31 <!-- 显示户 -->
32 <td
33 v-for="(hs, hsIndex) in cs.hs"
34 :rowspan="hs.sjcs"
35 :colspan="hs.sjhs"
36 :data-bsm="hs.bsm"
37 :data-qszt="hs.qszt"
38 ref="hBsm"
39 :key="hsIndex"
40 style="border-color: rgb(230, 230, 230)"
41 :class="hs.select ? 'tdSelect' : ''"
42 @click="handleClickH($event.target, hs.bsm, hs)"
43 @dblclick="dbclick(hs.bsm)"
44 @contextmenu.prevent="openMenu($event, hs, 'h')"
45 >
46 {{ hs.shbw }}
47 <span @click.stop="" class="hqszt lin" v-show="hs.qszt == '0'"
48 >临</span
49 >
50 <span @click.stop="" class="hqszt zheng" v-show="hs.qszt == '1'"
51 >正</span
52 >
53 <span @click.stop="" class="hqszt xian" v-show="hs.qszt == '2'"
54 >现</span
55 >
56 <ul @click.stop="hDyztClick($event, hs.bsm, hs)" class="dyzt">
57 <li style="background-color: #6edee1" v-show="hs.qqzt == '1'">
58 确
59 </li>
60 <li style="background-color: #8adc88" v-show="hs.bazt == '1'">
61 备
62 </li>
63 <li style="background-color: #ff8282" v-show="hs.dyzt == '1'">
64 抵
65 </li>
66 <li style="background-color: #d7cecf" v-show="hs.cfzt == '1'">
67 查
68 </li>
69 <li style="background-color: #d4a3eb" v-show="hs.yyzt == '1'">
70 异
71 </li>
72 <li style="background-color: #a5a3fb" v-show="hs.xzzt == '1'">
73 限
74 </li>
75 </ul>
76 </td>
77 </tr>
78 </table>
79 </div>
80 </template>
81
82 <script>
83 export default {
84 name: "BdcdjWebCh",
85 inject: ["openMenu", "selectAll"],
86 props: {
87 ch: {
88 type: Array,
89 default: function () {
90 return [];
91 },
92 },
93 },
94 data() {
95 return {
96 //选中户bsm合集
97 hbsmList: [],
98 //选中层bsm合集
99 cbsmList: [],
100 //选中户qszt集合
101 hqsztList: [],
102 //区分单双击事件的定时器
103 time: null,
104 };
105 },
106 mounted() {},
107 methods: {
108 // 层选中事件
109 handleClickC(e, item) {
110 //判断点击的层是否选中
111 if (e.target.className.indexOf("tdSelect") == -1) {
112 //未选中→选中
113 e.target.className += " tdSelect"; //加边框
114 this.cbsmList.push(item.bsm);
115 } else {
116 //选中→未选中
117 e.target.className = "floor";
118 this.cbsmList = this.cbsmList.filter((i) => i != item.bsm);
119 }
120 // this.$parent.getCbsm(this.cbsmList);
121 },
122 //户单击事件
123 handleClickH(e, bsm, hs) {
124 let self = this;
125 // 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
126 clearTimeout(self.time);
127 self.time = setTimeout(() => {
128 // this.closeMenu();
129 //判断点击的户是否选中
130 if (!hs.select) {
131 //未选中→选中
132 hs.select = true; //加边框
133 this.hbsmList.push(bsm); // 将户bsm放进hbsmList
134 this.hqsztList.push(hs.qszt); // 将户qszt放进hqsztList
135 } else {
136 //选中→未选中
137 hs.select = false;
138 this.hbsmList = this.hbsmList.filter((i) => i != bsm);
139 this.hqsztList = this.hqsztList.filter((i) => i != hs.qszt);
140 }
141 }, 200);
142 },
143 // 户单元状态点击事件
144 hDyztClick(e, bsm, hs) {
145 this.handleClickH(e.target.parentNode, bsm, hs);
146 },
147 //户双击事件
148 dbclick(bsm) {
149 clearTimeout(this.time);
150 },
151 //幢单元全选/反选
152 zdySelectAll(val) {
153 this.ch.forEach((c) => {
154 c.hs.forEach((h) => {
155 if (val) {
156 h.select = true;
157 // 使用hbsmList时，需要去重
158 this.hbsmList.push(h.bsm)
159 } else {
160 h.select = false;
161 this.hbsmList = []
162 }
163 });
164 });
165 },
166 },
167 watch: {
168 selectAll: {
169 handler(val) {
170 this.zdySelectAll(val.selectAll);
171 },
172 immediate: true,
173 deep: true,
174 },
175 },
176 };
177 </script>
178
179 <style lang="scss" scoped>
180 .ch-wrap {
181 display: flex;
182 flex-direction: column-reverse;
183 .chTable {
184 margin-left: -1px;
185 border-color: #e4ebf4 !important;
186 border-collapse: collapse;
187 border-spacing: 0;
188 // position: relative;
189 tr {
190 td {
191 min-width: 138px;
192 height: 72px;
193 line-height: 72px;
194 text-align: center;
195 cursor: pointer;
196 position: relative;
197 .hqszt {
198 display: inline-block;
199 width: 16px;
200 height: 16px;
201 font-size: 12px;
202 line-height: 16px;
203 position: absolute;
204 left: 6px;
205 top: 6px;
206 border: 1px solid;
207 border-radius: 8px;
208 }
209 .lin {
210 color: #f7b500;
211 border-color: #f7b500;
212 }
213 .zheng {
214 color: #1ad6e1;
215 border-color: #1ad6e1;
216 }
217 .xian {
218 color: #45aefd;
219 border-color: #45aefd;
220 }
221 .dyzt {
222 user-select: none;
223 width: 138px;
224 height: 18px;
225 position: absolute;
226 bottom: 32px;
227 box-sizing: border-box;
228 padding: 0 6px;
229 li {
230 display: inline-block;
231 width: 18px;
232 height: 18px;
233 font-size: 12px;
234 line-height: 18px;
235 color: #ffffff;
236 border: 1px solid;
237 border-radius: 9px;
238 }
239 }
240 }
241 .tdSelect {
242 border: 1px solid #006cff !important;
243 background-image: url("./images/tdSelect.png");
244 background-repeat: no-repeat;
245 background-position: right top;
246 background-size: 30px;
247 }
248 .hasBorder {
249 border-width: 1px;
250 border-style: solid;
251 }
252 }
253 }
254 }
255 </style>
1 <template> 1 <template>
2 <div class="lpbContent-wrap" ref="lpbContentWrap"> 2 <div class="lpbContent-wrap" ref="lpbContentWrap">
3 <div class="lpbContent" ref="lpbContent"> 3 <div class="lpbContent">
4 <div :class=" 4 <!-- 纵向倒序排列 逻辑幢位于独立幢单元和独立层户的上方 -->
5 lpbData.cs.length == 0 && lpbData.zdys.length == 0 5 <div class="ch-zdy-wrap">
6 ? 'bottom40 ljz-wrap' 6 <!-- 幢单元 -->
7 : 'ljz-wrap' 7 <zdy-cpn v-if="lpbData.zdys.length" :zdys="lpbData.zdys" />
8 " :style="{ 'width': ljzWidth + 'px' }" v-show="lpbData.ljzs.length > 0"> 8 <!-- 独立层户 -->
9 <!-- 循环逻辑幢数据 --> 9 <ch-cpn v-if="lpbData.cs.length" :ch="lpbData.cs" />
10 <div class="ljz" ref="ljz" v-for="(ljzs, ljzIndex) in lpbData.ljzs" :key="ljzIndex"> 10 </div>
11 <!-- :class="[{ 'mt30': ljzIndex == 0 }, { 'mt60': ljzIndex == 1 || lpbData.ljzs.length == 1 }]" --> 11 <!-- 逻辑幢 -->
12 12 <ljzs-cpn v-if="lpbData.ljzs.length" :ljzs="lpbData.ljzs" />
13 <!-- :style="{'marginTop':ljzs.zdys.length>0?'0':'30px'}" --> 13 </div>
14 <!-- 循环逻辑幢下的幢单元 --> 14 <!-- 自然幢名称 -->
15 <div class="ljz-zdy-wrap" :style="{ 'marginTop': ljzs.zdys.length > 0 ? '0' : '30px' }"> 15 <p class="lpb-xmmc">
16 <div class="ljz-zdy column-reverse" 16 <el-checkbox @change="zdySelectAll($event)">{{
17 :style="{ 'min-height': ljzzdyHeight + 'px', 'marginRight': zdyIndex < (ljzs.zdys.length - 1) || ljzs.cs.length > 1 ? '20px' : '0' }" 17 lpbData.xmmc
18 ref="ljzzdy" v-show="ljzs.zdys.length > 0" v-for="(zdys, zdyIndex) in ljzs.zdys" :key="zdyIndex"> 18 }}</el-checkbox>
19 <!-- 幢单元名称 --> 19 </p>
20 <div class="zdy-name name"> 20 <!-- 右键菜单 -->
21 <p class="cp" @dblclick="openZxx(zdys.bsm, 'zdy')"> 21 <ul
22 <el-checkbox @change='zdySelectAll($event, zdys.cs)'>{{ zdys.zdymc }}</el-checkbox> 22 v-show="lpbChVisible"
23 </p> 23 :style="{ left: lpbChLeft + 'px', top: lpbChTop + 'px' }"
24 </div> 24 class="contextmenu"
25 25 >
26 <!-- 循环幢单元下的层户 --> 26 <li @click="menuClick">菜单一</li>
27 <!-- <div class="chTable-wrap"> --> 27 <li @click="menuClick">菜单二</li>
28 <table class="chTable psr" border="0" cellspacing="0" cellpadding="0" v-show="zdys.cs.length > 0"> 28 </ul>
29 <tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex"> 29 </div>
30 <!-- 显示层数 -->
31 <td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
32 @click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
33 {{ cs.sjc }}层
34 </td>
35 <!-- 显示户 -->
36 <td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
37 :data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
38 :class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
39 @click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
40 @contextmenu.prevent="openMenu($event, hs, 'h')">
41 {{ hs.shbw }}
42 <span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
43 <span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
44 <span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
45 <ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
46 <li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
47 <li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
48 <li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
49 <li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
50 <li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
51 <li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
52 </ul>
53 </td>
54 </tr>
55 </table>
56
57 <!-- </div> -->
58 </div>
59 </div>
60 <!-- 循环逻辑幢下的层户 -->
61 <div class="ljz-ch" ref="ljzDlch"
62 :style="{ height: 'auto', marginTop: (ljzs.zdys.length > 0 ? '39' : 0) + 'px' }" v-if="ljzs.cs.length > 0">
63 <table class="chTable prs" :style="{
64 top:
65 ljzzdyHeight + 40 - ljzs.cs.length * 65 < 0
66 ? 0
67 : ljzzdyHeight + 40 - ljzs.cs.length * 65 + 'px',
68 }" border="1" cellspacing="0" cellpadding="0">
69 <tr v-for="cs in ljzs.cs" :key="cs.bsm">
70 <!-- 显示层数 -->
71 <td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
72 @click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
73 {{ cs.sjc }}层
74 </td>
75 <!-- 显示户 -->
76 <td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
77 :data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
78 :class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
79 @click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
80 @contextmenu.prevent="openMenu($event, hs, 'h')">
81 {{ hs.shbw }}
82 <span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
83 <span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
84 <span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
85 <ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
86 <li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
87 <li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
88 <li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
89 <li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
90 <li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
91 <li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
92 </ul>
93 </td>
94 </tr>
95 </table>
96 </div>
97 <!-- 逻辑幢名称 -->
98 <div class="ljz-name name">
99 <p class="cp" @dblclick="openZxx(ljzs.bsm, 'ljz')">
100 {{ ljzs.ljzmc }}
101 </p>
102 </div>
103 </div>
104 </div>
105 <div class="zdy-wrap"
106 :style="{ width: zdyWidth + 'px', marginTop: (lpbData.zdys.length > 0 || lpbData.cs.length > 0) ? '30px' : '0' }">
107 <!-- 循环自然幢下的幢单元 -->
108 <div class="zdy column-reverse" ref="zdy" v-for="(zdys, zdyIndex) in lpbData.zdys" :key="zdyIndex"
109 :style="{ 'min-height': zdyHeight + 'px' }">
110 <!-- 幢单元名称 -->
111 <div class="zdy-name name">
112 <p class="cp" @dblclick="openZxx(zdys.bsm, 'zdy')">
113 <el-checkbox @change='zdySelectAll($event, zdys.cs)'>{{ zdys.zdymc }}</el-checkbox>
114 </p>
115 </div>
116 <!-- 循环幢单元下的层户 -->
117 <table class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length > 0">
118 <tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex">
119 <!-- 显示层数 -->
120 <td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
121 @click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
122 {{ cs.sjc }}层
123 </td>
124 <!-- 显示户 -->
125 <td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
126 :data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
127 :class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
128 @click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
129 @contextmenu.prevent="openMenu($event, hs, 'h')">
130 {{ hs.shbw }}
131 <span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
132 <span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
133 <span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
134 <ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
135 <li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
136 <li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
137 <li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
138 <li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
139 <li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
140 <li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
141 </ul>
142 </td>
143 </tr>
144 </table>
145 </div>
146 <!-- 循环自然幢下的独立层户 -->
147 <!-- <template > -->
148 <div class="zdy column-reverse" ref="zrzDlch" :style="{ 'min-height': cHeight + 'px' }">
149 <table class="chTable" ref="ch" border="1" cellspacing="0" cellpadding="0"
150 v-show="lpbData.cs != null && lpbData.cs.length > 0">
151 <tr v-for="(cs, csIndex) in lpbData.cs" :key="csIndex">
152 <!-- 显示层数 -->
153 <td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
154 @click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
155 {{ cs.sjc }}层
156 </td>
157 <!-- 显示户 -->
158 <td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
159 :data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
160 :class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
161 @click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
162 @contextmenu.prevent="openMenu($event, hs, 'h')">
163 {{ hs.shbw }}
164 <span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
165 <span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
166 <span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
167 <ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
168 <li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
169 <li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
170 <li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
171 <li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
172 <li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
173 <li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
174 </ul>
175 </td>
176 </tr>
177 </table>
178 </div>
179 </div>
180 <!-- 层户 -->
181 <div class="zrz" :style="{ width: lpbContentWidth + 'px' }">
182 <el-checkbox v-model="zrzChecked" @change='lpbSelectAll'>{{ lpbData.xmmc }}</el-checkbox>
183 </div>
184 </div>
185 <!-- 双击户的弹出框 -->
186 <el-dialog :close-on-click-modal="false" title="户编辑" class="hbjDialog" :visible.sync="hbjVisible" width="80%">
187 <hbj ref="hbj" :bsm="hbsm" :scyclx="scyclx" :lpbParent="lpbParent"></hbj>
188 </el-dialog>
189 </div>
190 </template> 30 </template>
191 <script> 31 <script>
192 import { getLpb } from '@/api/lpb' 32 import { getLpb } from "@/api/lpb";
33 import chCpn from "./ch.vue";
34 import zdyCpn from "./zdys.vue";
35 import ljzsCpn from "./ljzs.vue";
193 export default { 36 export default {
194 name: "", 37 provide() {
195 components: { }, 38 return {
196 props: { 39 openMenu: this.openMenu,
197 zrzbsm: { 40 selectAll: this.selectAllObj,
198 type: String, 41 };
199 default: '' 42 },
200 }, 43 name: "",
201 lpbParent: { 44 components: { chCpn, zdyCpn, ljzsCpn },
202 type: String, 45 props: {
203 default: 'isLpb' 46 zrzbsm: {
204 }, 47 type: String,
205 isHb: { 48 default: "",
206 type: Boolean, 49 },
207 default: true 50 lpbParent: {
208 }, 51 type: String,
209 }, 52 default: "isLpb",
210 data () { 53 },
211 return { 54 isHb: {
212 lpbData: { 55 type: Boolean,
213 ljzs: [], 56 default: true,
214 cs: [], 57 },
215 zdys: [], 58 },
216 }, 59 data() {
217 hbjVisible: false, 60 return {
218 lpbContentWidth: 0, 61 lpbData: {
219 ljzWidth: 10000, 62 ljzs: [],
220 zdyWidth: 1000, 63 cs: [],
221 cHeight: 0, //独立层户的div高度 64 zdys: [],
222 zdyHeight: 0, //独立幢单元的div高度 65 },
223 ljzcHeight: 0, //逻辑幢下层户的div高度 66 //户全选标识 由于依赖注入的绑定并不是可响应的,所以传入可监听的对象以获取其属性的响应
224 ljzzdyHeight: 0, //逻辑幢下幢单元的div高度 67 selectAllObj: {
225 loading: true, 68 selectAll: false,
226 hbsm: '', 69 },
227 hbsmList: [], 70 //层户右键菜单显隐
228 hqsztList: [], 71 lpbChVisible: false,
229 cbsmList: [], 72 //右键菜单定位位置
230 time: null, //区分单双击事件的定时器 73 lpbChLeft: 100,
231 searchNum: Math.random(), 74 lpbChTop: 100,
232 //接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList 75 };
233 choosedList: [], 76 },
234 borderColor: "#E6E6E6", 77 mounted() {
235 lpbChVisible: false, //层户右键菜单显隐 78 this.getLpb("dfc08a0cc6a25188990ea53d1d2c500e");
236 lpbChLeft: 100, 79 // setTimeout(() => {
237 lpbChTop: 100, 80 // //让滚动条滚动至最下面 -6是横向滚动条的高度
238 //右键层户数据 81 // this.$refs.lpbContent.scrollTop =
239 chData: "", 82 // this.$refs.lpbContent.scrollHeight -
240 rightClickFlag: "", 83 // this.$refs.lpbContent.clientHeight -
241 84 // 6;
242 formLabelWidth: "120px", 85 // }, 200);
243 yclpbData: {}, 86 // window.lpbContent = this;
244 sclpbData: {}, 87 },
245 88 methods: {
246 89 //全选户
247 zrzChecked: false, //自然幢全选 90 zdySelectAll(val) {
248 }; 91 this.selectAllObj.selectAll = val;
249 }, 92 },
250 mounted () { 93 //获取楼盘表数据
251 this.getLpb(this.zrzbsm ? this.zrzbsm : '9434bdb243ba342cc6c043065fc9e480'); 94 getLpb(zrzbsm, scyclx, actual) {
252 setTimeout(() => { 95 getLpb(zrzbsm, scyclx).then((res) => {
253 //让滚动条滚动至最下面 -6是横向滚动条的高度 96 if (res.code == 200) {
254 this.$refs.lpbContent.scrollTop = 97 res.result.ljzs = res.result.ljzs.sort(this.compare("place"));
255 this.$refs.lpbContent.scrollHeight - 98 this.lpbData = res.result == null ? this.lpbData : res.result;
256 this.$refs.lpbContent.clientHeight - 99 // this.$nextTick(() => {
257 6; 100 // //渲染楼盘表
258 }, 200); 101 // this.dataChange();
259 window.lpbContent = this; 102 // });
260 }, 103 console.log(this.lpbData, "this.lpbData");
261 methods: { 104 } else {
262 loadingData (zrzbsm, scyclx) { 105 this.$message({
263 this.getLpb(zrzbsm, scyclx, true); 106 message: res.message,
264 }, 107 type: "warning",
265 //获取楼盘表数据 108 });
266 getLpb (zrzbsm, scyclx, actual) { 109 }
267 getLpb(zrzbsm, scyclx).then((res) => { 110 });
268 if (res.code == 200) { 111 },
269 res.result.ljzs = res.result.ljzs 112 //户右键点击事件
270 .sort(this.compare("place")) 113 openMenu(e, item, type) {
271 .reverse(); 114 this.lpbChLeft = e.pageX - 96;
272 this.lpbData = res.result == null ? this.lpbData : res.result; 115 this.lpbChTop = e.pageY - 23;
273 this.$nextTick(() => { 116 this.lpbChVisible = true;
274 //渲染楼盘表 117 },
275 this.dataChange(); 118 //关闭户右键菜单
276 }); 119 closeMenu() {
277 } else { 120 this.lpbChVisible = false;
278 this.$message({ 121 },
279 message: res.message, 122 //右键菜单点击
280 type: "warning", 123 menuClick() {
281 }); 124 this.closeMenu();
282 } 125 },
283 }); 126 compare(property) {
284 }, 127 return function (a, b) {
285 compare (property) { 128 var value1 = a[property];
286 return function (a, b) { 129 var value2 = b[property];
287 var value1 = a[property]; 130 return value1 - value2;
288 var value2 = b[property]; 131 };
289 return value1 - value2; 132 },
290 }; 133 },
291 }, 134 watch: {
292 //按照bdcdyh或shbw筛选户 135 //户右键菜单显示时，监听到鼠标点击时关闭户右键菜单
293 lpbDataMap (sh) { 136 lpbChVisible(value) {
294 this.searchNum = sh; 137 if (value) {
295 if (this.hbsmList.length > 0) { 138 document.body.addEventListener("click", this.closeMenu);
296 //清除之前选中户 139 } else {
297 this.clearChoosedH(); 140 document.body.removeEventListener("click", this.closeMenu);
298 } 141 }
299 // console.log("查询searchNum" + searchNum); 142 },
300 }, 143 },
301 //自然幢下元素高度宽度计算
302 dataChange () {
303 //计算逻辑幢宽度 20为marginRight值
304 this.ljzWidth = 0;
305 if (this.$refs.ljzzdy != undefined) {
306 this.$refs.ljzzdy.forEach((item) => {
307 this.ljzWidth += item.offsetWidth + 20;
308 });
309 if (this.$refs.ljzDlch != undefined) {
310 this.$refs.ljzDlch.forEach((item) => {
311 this.ljzWidth += item.offsetWidth;
312 });
313 }
314 } else {
315 if (this.$refs.ljzDlch != undefined) {
316 this.$refs.ljzDlch.forEach((item) => {
317 this.ljzWidth += item.offsetWidth + 20;
318 });
319 }
320 }
321 //计算独立幢单元和独立层户宽度
322 //考虑this.$refs.zdy的length为0的情况，即自然幢下没有独立幢单元
323 if (this.$refs.zdy != undefined && this.$refs.zdy.length > 0) {
324 //判断自然幢下有没有比层户高的幢单元
325 let higher = true;
326 //记录最高的幢单元高度 默认为第一个幢单元高度
327 let highest = this.$refs.zdy[0].offsetHeight;
328 this.zdyWidth = 20;
329 this.$refs.zdy.forEach((item) => {
330 this.zdyWidth += item.offsetWidth + 21;
331 this.cHeight =
332 item.offsetHeight > this.cHeight ? item.offsetHeight : this.cHeight;
333 highest = highest > item.offsetHeight ? highest : item.offsetHeight;
334 });
335 //判断有无独立层户
336 if (this.$refs.ch != undefined) {
337 //计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
338 higher = highest > this.$refs.ch.offsetHeight ? true : false;
339 this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight;
340 highest = 0;
341 this.zdyWidth += this.$refs.ch.offsetWidth;
342 } else {
343 this.zdyHeight = highest;
344 highest = 0;
345 }
346 } else {
347 //有且仅有独立层户
348 if (this.$refs.zrzDlch != undefined) {
349 this.zdyWidth = this.$refs.zrzDlch.offsetWidth + 20;
350 }
351 }
352 //计算逻辑幢下的幢单元和层户的高度
353 this.ljzzdyHeight = 0;
354 if (this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0) {
355 //判断自然幢下有没有比层户高的幢单元
356 let higher = true;
357 let zrzhighest = 0;
358 //记录最高的幢单元高度 默认为第一个幢单元高度
359 zrzhighest = this.$refs.ljzzdy[0].offsetHeight;
360 this.$refs.ljzzdy.forEach((item) => {
361 this.ljzcHeight = item.offsetHeight > this.ljzcHeight ? item.offsetHeight : this.ljzcHeight;
362 zrzhighest = zrzhighest > item.offsetHeight ? zrzhighest : item.offsetHeight;
363 });
364 //判断有无独立层户
365 if (this.$refs.ljzch != undefined) {
366 //计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
367 higher = zrzhighest > this.$refs.ljzch.offsetHeight ? true : false;
368 this.$nextTick(() => {
369 this.ljzzdyHeight = higher ? zrzhighest : this.$refs.ljzch.offsetHeight;
370 zrzhighest = 0;
371 });
372 } else {
373 this.$nextTick(() => {
374 this.ljzzdyHeight = zrzhighest;
375 zrzhighest = 0;
376 });
377 }
378 } else {
379
380 }
381 this.$nextTick(() => {
382 this.lpbContentWidth = this.zdyWidth > this.ljzWidth ? this.zdyWidth - 20 : this.ljzWidth - 20;
383 if (this.lpbContentWidth == 0) {
384 //his.lpbContentWidth = this.$refs.lpbContent.offsetWidth
385 }
386 })
387 },
388 //户单击事件
389 handleTdClick (e, bsm, hs) {
390 let self = this;
391 // 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
392 clearTimeout(self.time);
393 self.time = setTimeout(() => {
394 this.closeMenu()
395 //判断点击的户是否选中
396 if (e.className.indexOf("tdSelect") == -1) {
397 //未选中→选中
398 e.className = "tdSelect"; //加边框
399 this.hbsmList.push(bsm); // 将户bsm放进hbsmList
400 this.hqsztList.push(hs.qszt); // 将户qszt放进hqsztList
401 switch (this.lpbParent) {
402 case 'isHbfg':
403 self.fghbChoosedList.push(hs);
404 break;
405 case 'isFwsxbg':
406
407 break;
408 case 'isCxlz':
409
410 break;
411 case 'isLpb':
412 break;
413 default:
414 break;
415 }
416 } else {
417 //选中→未选中
418 e.className = "";
419 this.hbsmList = this.hbsmList.filter(i => i != bsm);
420 this.hqsztList = this.hqsztList.filter(i => i != hs.qszt);
421 switch (this.lpbParent) {
422 case 'isHbfg':
423 self.fghbChoosedList = self.fghbChoosedList.filter(i => i != hs)
424 break;
425 case 'isFwsxbg':
426
427 break;
428 case 'isCxlz':
429
430 break;
431 case 'isLpb':
432 this.hbsmList = this.hbsmList.filter(i => i != bsm);
433 this.hqsztList = this.hqsztList.filter(i => i != hs.qszt);
434 this.$parent.getHbsm(this.hbsmList, false);
435 this.$parent.getQsztList(this.hqsztList, false);
436 break;
437
438 default:
439 break;
440 }
441 }
442 }, 200);
443 },
444 //户双击事件
445 dbclick (bsm) {
446 clearTimeout(this.time);
447 this.hbsm = bsm;
448 this.$store.state.hbsm = bsm;
449 this.hbjVisible = true;
450 this.$nextTick(function () {
451 this.$refs.hbj.$refs.hbj.getHInfo(this.hbsm);
452 });
453 },
454 //删除多重数组中的某一项
455 deleteArrOption (arr, item) {
456 for (var i = arr.length; i > 0; i--) {
457 if (arr[i - 1] == item) {
458 arr.splice(i - 1, 1);
459 }
460 }
461 },
462 //清除选中户
463 clearChoosedH () {
464 // this.$nextTick(() => {
465 //将每个选中的户的选中状态清除
466 this.$refs.hBsm.forEach((item) => {
467 if (item.className == "tdSelect") {
468 item.className = "";
469 }
470 });
471 // 清空hbsmList
472 this.hbsmList = [];
473 this.hqsztList = [];
474 // });
475 },
476 //户右键点击事件
477 openMenu (e, item, type) {
478 this.lpbChLeft = e.pageX;
479 this.lpbChTop = e.pageY;
480 this.chData = item;
481 switch (this.lpbParent) {
482 case 'isHbfg':
483 break;
484 case 'isFwsxbg':
485 break;
486 case 'isCxlz':
487 break;
488 case 'isLpb':
489 this.rightClickFlag = type;
490 this.lpbChVisible = true;
491 break;
492
493 default:
494 break;
495 }
496 },
497 // 户单元状态点击事件
498 hDyztClick (e, bsm, hs) {
499 this.handleTdClick(e.target.parentNode, bsm, hs);
500 },
501 // 层选中事件
502 handleClickC (e, item) {
503 if (this.lpbParent == 'isLpb') {
504 //判断点击的层是否选中
505 if (e.target.className.indexOf("tdSelect") == -1) {
506 //未选中→选中
507 e.target.className += " tdSelect"; //加边框
508 this.cbsmList.push(item.bsm);
509 } else {
510 //选中→未选中
511 e.target.className = "floor";
512 this.deleteArrOption(this.cbsmList, item.bsm);
513 }
514 this.$parent.getCbsm(this.cbsmList);
515 } else {
516
517 }
518 },
519 //关闭右键菜单
520 closeMenu () {
521 this.lpbChVisible = false;
522 },
523 //end
524 //楼盘表户全选
525 lpbSelectAll (val) {
526 if (val) {
527 this.$refs.hBsm.forEach((item) => {
528 item.className = "tdSelect";
529 this.hbsmList.push(item.dataset.bsm); // 将户bsm放进hbsmList
530 this.hqsztList.push(item.dataset.qszt)
531 });
532 } else {
533 this.$refs.hBsm.forEach((item) => {
534 item.className = "";
535 this.hbsmList = [];
536 this.hqsztList = [];
537 });
538 }
539 this.$nextTick(() => {
540 this.$parent.getHbsm(this.hbsmList, false);
541 this.$parent.getQsztList(this.hqsztList, false);
542 })
543 },
544 //幢单元全选
545 zdySelectAll (val, cs) {
546 let zdyHbsmList = [];
547 let zdyHqsztList = [];
548 cs.forEach(i => {
549 i.hs.forEach(j => {
550 zdyHbsmList.push(j.bsm)
551 zdyHqsztList.push(j.qszt)
552 })
553 });
554 if (val) {
555 this.$nextTick(() => {
556 this.$refs.hBsm.forEach((item) => {
557 if (zdyHbsmList.indexOf(item.dataset.bsm) > -1) {
558 item.className = "tdSelect";
559 }
560 });
561 this.hbsmList = this.hbsmList.concat(zdyHbsmList);
562 this.hqsztList = this.hqsztList.concat(zdyHqsztList);
563 })
564 } else {
565 this.$refs.hBsm.forEach((item) => {
566 console.log(item.dataset.bsm);
567 if (zdyHbsmList.indexOf(item.dataset.bsm) > -1) {
568 item.className = "";
569 }
570 zdyHbsmList.forEach(j => {
571 if (item.dataset.bsm == j) {
572 this.hbsmList = this.hbsmList.filter(i => i != j)
573 }
574 })
575 zdyHqsztList.forEach(j => {
576 if (item.dataset.qszt == j) {
577 this.hqsztList = this.hqsztList.filter(i => i != j)
578 }
579 })
580 });
581 }
582 this.$nextTick(() => {
583 this.$parent.getHbsm(this.hbsmList, false);
584 this.$parent.getQsztList(this.hqsztList, false);
585 })
586 },
587 //逻辑幢、幢单元、层双击
588 openZxx (bsm, type) {
589 if (this.lpbParent == 'isLpb') {
590 this.$parent.taskTitle = '编辑';
591 this.$parent.dialogVisible = true;
592 this.$parent.curBsm = bsm;
593 this.$parent.menuType = type;
594 }
595 }
596 },
597 computed: {
598 createFlagChange () {
599 return this.$parent.createFlag;
600 },
601 legendToggleFlagChange () {
602 return this.$parent.legendToggleFlag;
603 },
604 scyclx () {
605 return this.$parent.scyclx;
606 },
607 },
608 watch: {
609 scyclx (n) {
610 this.hqsztList = [];
611 // this.getLpb(this.$store.state.zrzbsm, n);
612 if (n == '0') {
613 this.lpbData = this.yclpbData;
614 } else {
615 this.lpbData = this.sclpbData;
616 }
617 },
618 //监听有无通过输入框查询选择到的户,如果有，将其bsm放入hbsmList
619 searchNum (n) {
620 // 渲染查询到的户
621 this.$nextTick(() => {
622 this.$refs.hBsm.forEach((item) => {
623 if (item.className == "tdSelect") {
624 // console.log(item.offsetLeft,'offsetLeft');
625 // console.log(item.offsetTop,'offsetHeight');
626 //定位到最后一个户所在位置
627 this.$refs.lpbContent.scrollTop = item.offsetTop;
628 this.$refs.lpbContent.scrollLeft = item.offsetLeft;
629 console.log(item.dataset.bsm, "item.dataset.bsm");
630 // 判断hbsmList中是否已经存在
631 if (this.hbsmList.indexOf(item.dataset.bsm) == -1) {
632 this.hbsmList.push(item.dataset.bsm);
633 this.hqsztList.push(item.dataset.qszt);
634 }
635 }
636 });
637 });
638 },
639 //父组件中选择单元状态改变选中户的边框颜色
640 choosedList (n) {
641 if (n.length > 0) {
642 this.$refs.hBsm.forEach((item) => {
643 this.choosedList.forEach((i, ind) => {
644 if (item.dataset.bsm == i) {
645 if (ind == 0) {
646 //定位到第一个户所在位置
647 this.$refs.lpbContent.scrollTop = item.offsetTop;
648 this.$refs.lpbContent.scrollLeft = item.offsetLeft;
649 }
650 item.style.border = '1px solid ' + this.borderColor;
651 item.className = "tdSelect"
652 }
653 });
654 });
655 }
656 },
657 lpbChVisible (value) {
658 if (value) {
659 document.body.addEventListener("click", this.closeMenu);
660 } else {
661 document.body.removeEventListener("click", this.closeMenu);
662 }
663 },
664 },
665 }; 144 };
666 </script> 145 </script>
667 <style scoped lang="scss"> 146 <style scoped lang="scss">
668 .lpbContent-wrap { 147 .lpbContent-wrap {
669 width: 100%; 148 width: 100%;
670 height: 100%; 149 height: 100%;
671 overflow: hidden; 150 overflow: hidden;
672 151 .lpbContent {
673 .lpbContent { 152 width: 100%;
674 width: 100%; 153 height: calc(100% - 62px);
675 height: 100%; 154 position: relative;
676 position: relative; 155 overflow: scroll;
677 overflow: scroll; 156 -webkit-user-select: none;
678 -webkit-user-select: none; 157 -moz-user-select: none;
679 -moz-user-select: none; 158 -ms-user-select: none;
680 -ms-user-select: none; 159 user-select: none;
681 user-select: none; 160 display: flex;
682 161 flex-direction: column-reverse;
683 .ljz-wrap { 162 box-sizing: border-box;
684 height: auto; 163 padding-top: 20px;
685 overflow: hidden; 164 .ch-zdy-wrap {
686 165 display: flex;
687 .ljz { 166 flex-direction: row;
688 display: table; 167 }
689 168 }
690 // margin-top: 30px; 169 .lpb-xmmc {
691 .ljz-zdy-wrap { 170 border: 0;
692 width: auto; 171 border-top: 1px solid #e6e6e6;
693 display: table; 172 }
694 float: left; 173 // 自定义右键菜单样式
695 174 .contextmenu {
696 .ljz-zdy { 175 margin: 0;
697 height: auto; 176 background: #fff;
698 float: left; 177 width: 92px;
699 position: relative; 178 z-index: 3000;
700 179 position: fixed;
701 table { 180 list-style-type: none;
702 bottom: 40px; 181 padding: 5px 0;
703 } 182 border-radius: 4px;
704 183 font-size: 12px;
705 .zdy-name { 184 font-weight: 400;
706 width: 100%; 185 color: #333;
707 // bottom: 0; 186 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
708 // position: absolute; 187 li {
709 height: 40px; 188 margin: 0;
710 // background-color: rosybrown; 189 padding: 7px 16px;
711 // border:1px solid #E6E6E6 190 cursor: pointer;
712 } 191 position: relative;
713 192 .childUl {
714 // .chTable-wrap{ 193 display: none;
715 // position: absolute; 194 position: absolute;
716 // bottom: 40px; 195 left: 92px !important;
717 // } 196 top: 0 !important;
718 } 197 li {
719 } 198 width: 76px;
720 199 }
721 div:last-child { 200 }
722 margin-right: 0; 201 }
723 } 202 li:hover {
724 203 background: #eee;
725 .ljz-ch { 204 > .childUl {
726 float: left; 205 display: block;
727 } 206 }
728 207 }
729 .ljz-zdy:last-child { 208 .noEdit {
730 margin-right: 0; 209 color: #e6e6e6;
731 } 210 cursor: not-allowed;
732 211 }
733 .column-reverse { 212 .noEdit:hover {
734 display: flex; 213 background: #ffffff;
735 flex-direction: column-reverse; 214 }
736 } 215 }
737
738 // }
739 .ljz-name {
740 width: calc(100% - 32px);
741 height: 40px;
742 // background-color: darkorange;
743
744 }
745 }
746
747 .mt30 {
748 margin-top: 30px;
749 }
750
751 .mt60 {
752 margin-top: 60px;
753 }
754
755 div:last-child {
756 margin-right: 0;
757 }
758 }
759
760 .zdy-wrap {
761 height: auto;
762 overflow: hidden;
763
764 // margin-top: 30px;
765 .zdy {
766 float: left;
767 margin-right: 20px;
768
769 .zdy-zdy-wrap {
770 .zdy-zdy {
771 height: auto;
772 margin-right: 20px;
773 display: inline-table;
774
775 .zdy-name {
776 bottom: 0;
777 // background-color: blanchedalmond;
778 // border:1px solid #E6E6E6
779 }
780 }
781
782 .zdy-zdy:last-child {
783 margin-right: 0;
784 }
785 }
786
787 .zdy-name {
788 width: calc;
789 height: 40px;
790 // background-color: rosybrown;
791 border: 1px solid #E6E6E6
792 }
793 }
794
795 .column-reverse {
796 display: flex;
797 flex-direction: column-reverse;
798 }
799 }
800
801 // 公共部分样式 start
802 .chTable {
803 margin-left: -1px;
804
805 // position: relative;
806 tr {
807 .floor {
808 background-color: #fff;
809 }
810
811 td {
812 min-width: 138px;
813 height: 72px;
814 line-height: 72px;
815 text-align: center;
816 cursor: pointer;
817 position: relative;
818 border: 1px solid #d5d6da;
819
820 .hqszt {
821 display: inline-block;
822 width: 16px;
823 height: 16px;
824 font-size: 12px;
825 line-height: 16px;
826 position: absolute;
827 left: 6px;
828 top: 6px;
829 border: 1px solid;
830 border-radius: 8px;
831 }
832
833 .lin {
834 color: #F7B500;
835 border-color: #F7B500;
836 }
837
838 .zheng {
839 color: #1AD6E1;
840 border-color: #1AD6E1;
841 }
842
843 .xian {
844 color: #45AEFD;
845 border-color: #45AEFD;
846 }
847
848 .dyzt {
849 user-select: none;
850 width: 138px;
851 height: 18px;
852 position: absolute;
853 // background: orange;
854 bottom: 32px;
855 box-sizing: border-box;
856 padding: 0 6px;
857
858 li {
859 display: inline-block;
860 width: 18px;
861 height: 18px;
862 font-size: 12px;
863 line-height: 18px;
864 color: #ffffff;
865 border: 1px solid;
866 border-radius: 9px;
867 }
868 }
869 }
870
871 .tdSelect {
872 border: 1px solid #006cff !important;
873 background-image: url("./images/tdSelect.png");
874 background-repeat: no-repeat;
875 background-position: right top;
876 background-size: 30px;
877 }
878
879 .hasBorder {
880 border-width: 1px;
881 border-style: solid;
882 }
883 }
884 }
885
886 .name {
887 line-height: 40px;
888 text-align: center;
889 display: table-footer-group;
890
891 p {
892 width: calc(100% - 2px);
893 height: 100%;
894 // border: 1px solid #E6E6E6;
895 }
896 }
897
898 // end
899 }
900
901 .column-reverse {
902 display: flex;
903 flex-direction: column-reverse;
904 }
905
906 .zrz {
907 height: 60px;
908 line-height: 60px;
909 background-color: #ffffff;
910 border: 1px solid #E6E6E6;
911 // position: relative;
912 // bottom: 66px;
913 text-align: center;
914 transition: 0.5s;
915 }
916
917 .cantHb {
918 opacity: .5;
919 cursor: not-allowed;
920 }
921
922 .btnGroup {
923 margin: 20px auto 0;
924 width: 150px;
925 }
926
927 .el-checkbox {
928 font-size: 16px;
929
930 /deep/.el-checkbox__label {
931 font-size: 16px;
932 }
933
934 /deep/ .el-checkbox__inner {
935 width: 16px;
936 height: 16px;
937 }
938
939 /deep/ .el-checkbox__inner::after {
940 height: 9px;
941 left: 4px;
942 top: 0px;
943 width: 5px;
944 }
945
946 /deep/ .el-checkbox__input {
947 top: 1px;
948 }
949 }
950
951 .hbjDialog {
952 /deep/.el-dialog {
953 margin-top: 10vh !important;
954 }
955 }
956 } 216 }
957 </style> 217 </style>
......
1 <!--
2 * @Author: yangwei
3 * @Date: 2023-02-28 17:25:45
4 * @LastEditors: yangwei
5 * @LastEditTime: 2023-03-02 17:34:24
6 * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ljzs.vue
7 * @Description:
8 *
9 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
10 -->
11 <template>
12 <div class="ljzs-wrap">
13 <div v-for="ljzarr in ljzsCptd" :key="ljzarr[0].bsm">
14 <!-- 多个同起始层逻辑幢 横向排列 -->
15 <div class="ch-zdy-wrap" v-if="ljzarr.length > 1">
16 <div v-for="ljz in ljzarr" :key="ljz.ljzmc" class="same-floor-ljz">
17 <div
18 :class="
19 ljz.cs.length ? 'cs-visible ch-zdy-wrap' : 'cs-none ch-zdy-wrap'
20 "
21 >
22 <!-- 逻辑幢名称 -->
23 <p class="lpb-xmmc ljz-xmmc">{{ ljz.ljzmc }}</p>
24 <!-- 独立层户 -->
25 <ch-cpn v-if="ljz.cs.length" :ch="ljz.cs" />
26 <!-- 幢单元 -->
27 <zdy-cpn v-if="ljz.zdys.length" :zdys="ljz.zdys" />
28 </div>
29 </div>
30 </div>
31 <!-- 不同起始层的逻辑幢纵向排列 -->
32 <div
33 :class="
34 ljzarr[0].cs.length ? 'cs-visible ch-zdy-wrap' : 'cs-none ch-zdy-wrap'
35 "
36 v-else
37 >
38 <!-- 逻辑幢名称 -->
39 <p class="lpb-xmmc ljz-xmmc">{{ ljzarr[0].ljzmc }}</p>
40 <!-- 独立层户 -->
41 <ch-cpn v-if="ljzarr[0].cs.length" :ch="ljzarr[0].cs" />
42 <!-- 幢单元 -->
43 <zdy-cpn v-if="ljzarr[0].zdys.length" :zdys="ljzarr[0].zdys" />
44 </div>
45 </div>
46 </div>
47 </template>
48
49 <script>
50 import chCpn from "./ch.vue";
51 import zdyCpn from "./zdys.vue";
52 export default {
53 name: "BdcdjWebLjzs",
54 components: { chCpn, zdyCpn },
55 props: {
56 ljzs: {
57 type: Array,
58 default: function () {
59 return [];
60 },
61 },
62 },
63 data() {
64 return {
65 };
66 },
67
68 mounted() {
69 console.log(this.ljzsCptd);
70 },
71 computed: {
72 ljzsCptd() {
73 let tempArr = [];
74 //逻辑幢数据已经按照place从小到大排序
75 this.ljzs.forEach((item, index) => {
76 //判断当前逻辑幢是否与上一个逻辑幢的起始层数相同，将起始层数相同的逻辑幢放在同一排
77 if (index && item.place == this.ljzs[index - 1].place) {
78 tempArr[index - 1].push(item);
79 } else {
80 tempArr[index] = [];
81 tempArr[index].push(item);
82 }
83 });
84 //过滤假值
85 return tempArr.filter(Boolean)
86 },
87 },
88 methods: {},
89 };
90 </script>
91
92 <style lang="scss">
93 .ljzs-wrap {
94 display: flex;
95 flex-direction: column-reverse;
96 > div {
97 margin-bottom: 80px;
98 margin-right: 20px;
99 display: flex;
100 flex-direction: column;
101 .ch-zdy-wrap {
102 display: flex;
103 flex-direction: row-reverse;
104 width: fit-content;
105 position: relative;
106 .same-floor-ljz{
107 display: flex;
108 flex-direction: row;
109 margin-right: 20px;
110 }
111 .ljz-xmmc {
112 position: absolute;
113 width: calc(100% + 1px);
114 bottom: -60px;
115 }
116 }
117 .cs-none {
118 .zdys-wrap > div:last-child {
119 margin-right: 0;
120 }
121 }
122 }
123 }
124 </style>
1 <!--
2 * @Author: yangwei
3 * @Date: 2023-02-28 16:29:04
4 * @LastEditors: yangwei
5 * @LastEditTime: 2023-03-02 14:45:19
6 * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\zdys.vue
7 * @Description:
8 *
9 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
10 -->
11 <template>
12 <div class="zdys-wrap">
13 <div v-for="zdy in realZdys" :key="zdy.bsm">
14 <!-- 幢单元名称 -->
15 <p class="lpb-xmmc">
16 <el-checkbox @change="zdySelectAll($event,zdy.bsm)">{{
17 zdy.zdymc
18 }}</el-checkbox>
19 </p>
20 <!-- 每个幢单元下的层户 -->
21 <ch-cpn :ref="zdy.bsm" :ch="zdy.cs" />
22 </div>
23 </div>
24 </template>
25
26 <script>
27 import chCpn from "./ch.vue";
28 export default {
29 name: "BdcdjWebZdys",
30 components: { chCpn },
31 props: {
32 zdys: {
33 type: Array,
34 default: function () {
35 return [];
36 },
37 },
38 },
39 data() {
40 return {};
41 },
42
43 mounted() {},
44
45 methods: {
46 //幢单元全选
47 zdySelectAll(val,r) {
48 this.$refs[r][0].zdySelectAll(val)
49 },
50 },
51 computed: {
52 realZdys() {
53 return this.zdys.sort((a, b) => {
54 return a.zdysxh > b.zdysxh ? 1 : -1;
55 });
56 },
57 },
58 };
59 </script>
60
61 <style lang="scss" scoped>
62 .zdys-wrap {
63 display: flex;
64 flex-direction: row;
65 > div {
66 margin-right: 20px;
67 display: flex;
68 flex-direction: column-reverse;
69 .lpb-xmmc {
70 border-top: 0;
71 }
72 }
73 }
74 </style>