Skip to content

bdc / bdcdj-web

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

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

1 parent 929f6d7c
Expand all
Inline Side-by-side
Showing 7 changed files with 550 additions and 196 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 <!--
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>