添加户的单击事件,获取选中的户bsm
Showing
2 changed files
with
35 additions
and
7 deletions
| ... | @@ -290,6 +290,11 @@ export default { | ... | @@ -290,6 +290,11 @@ export default { |
| 290 | legendToggle() { | 290 | legendToggle() { |
| 291 | this.legendToggleFlag = !this.legendToggleFlag; | 291 | this.legendToggleFlag = !this.legendToggleFlag; |
| 292 | }, | 292 | }, |
| 293 | //获取选中户bsm | ||
| 294 | getHbsm(data){ | ||
| 295 | this.bsms = data; | ||
| 296 | // console.log(this.bsms); | ||
| 297 | } | ||
| 293 | }, | 298 | }, |
| 294 | computed: { | 299 | computed: { |
| 295 | }, | 300 | }, | ... | ... |
| ... | @@ -13,7 +13,7 @@ | ... | @@ -13,7 +13,7 @@ |
| 13 | <!-- 显示层数 --> | 13 | <!-- 显示层数 --> |
| 14 | <td class="floor">{{cs.sjc}}层</td> | 14 | <td class="floor">{{cs.sjc}}层</td> |
| 15 | <!-- 显示户 --> | 15 | <!-- 显示户 --> |
| 16 | <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex">{{hs.hh}}</td> | 16 | <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex" @click="handleTdClick($event,hs.bsm)">{{hs.hh}}</td> |
| 17 | </tr> | 17 | </tr> |
| 18 | </table> | 18 | </table> |
| 19 | <!-- 幢单元名称 --> | 19 | <!-- 幢单元名称 --> |
| ... | @@ -37,7 +37,7 @@ | ... | @@ -37,7 +37,7 @@ |
| 37 | <!-- 显示层数 --> | 37 | <!-- 显示层数 --> |
| 38 | <td class="floor">{{cs.sjc}}层</td> | 38 | <td class="floor">{{cs.sjc}}层</td> |
| 39 | <!-- 显示户 --> | 39 | <!-- 显示户 --> |
| 40 | <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex">{{hs.hh}}</td> | 40 | <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex" @click="handleTdClick($event,hs.bsm)">{{hs.hh}}</td> |
| 41 | </tr> | 41 | </tr> |
| 42 | </table> | 42 | </table> |
| 43 | <!-- 幢单元名称 --> | 43 | <!-- 幢单元名称 --> |
| ... | @@ -53,7 +53,7 @@ | ... | @@ -53,7 +53,7 @@ |
| 53 | <!-- 显示层数 --> | 53 | <!-- 显示层数 --> |
| 54 | <td class="floor">{{cs.sjc}}层</td> | 54 | <td class="floor">{{cs.sjc}}层</td> |
| 55 | <!-- 显示户 --> | 55 | <!-- 显示户 --> |
| 56 | <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex">{{hs.hh}}</td> | 56 | <td v-for="(hs,hsIndex) in cs.hs" :key="hsIndex" @click="handleTdClick($event,hs.bsm)">{{hs.hh}}</td> |
| 57 | </tr> | 57 | </tr> |
| 58 | </table> | 58 | </table> |
| 59 | </div> | 59 | </div> |
| ... | @@ -376,7 +376,8 @@ export default { | ... | @@ -376,7 +376,8 @@ export default { |
| 376 | ljzWidth:10000, | 376 | ljzWidth:10000, |
| 377 | zdyWidth:2000, | 377 | zdyWidth:2000, |
| 378 | cHeight:0, | 378 | cHeight:0, |
| 379 | loading:true | 379 | loading:true, |
| 380 | hbsmList:[] | ||
| 380 | }; | 381 | }; |
| 381 | }, | 382 | }, |
| 382 | created() { | 383 | created() { |
| ... | @@ -396,10 +397,7 @@ export default { | ... | @@ -396,10 +397,7 @@ export default { |
| 396 | getLpb(zrzbsm) | 397 | getLpb(zrzbsm) |
| 397 | .then((res => { | 398 | .then((res => { |
| 398 | if (res.code == 200) { | 399 | if (res.code == 200) { |
| 399 | // console.log(this.lpbData,'前'); | ||
| 400 | this.lpbData = res.result; | 400 | this.lpbData = res.result; |
| 401 | // this.lpbData.zdys.push(this.lpbData.zdys) | ||
| 402 | // console.log(this.lpbData,'后'); | ||
| 403 | setTimeout(() => { | 401 | setTimeout(() => { |
| 404 | //计算逻辑幢宽度 20为marginRight值 | 402 | //计算逻辑幢宽度 20为marginRight值 |
| 405 | this.ljzWidth -= 9980; | 403 | this.ljzWidth -= 9980; |
| ... | @@ -422,7 +420,29 @@ export default { | ... | @@ -422,7 +420,29 @@ export default { |
| 422 | }); | 420 | }); |
| 423 | } | 421 | } |
| 424 | })) | 422 | })) |
| 423 | }, | ||
| 424 | //td点击事件 | ||
| 425 | handleTdClick(e,bsm){ | ||
| 426 | //判断点击的户是否选中 | ||
| 427 | if(e.target.className.indexOf('tdSelect') == -1){ | ||
| 428 | //未选中 | ||
| 429 | e.target.className = 'tdSelect'; //加边框 | ||
| 430 | this.hbsmList.push(bsm) // 将户bsm放进hbsmList | ||
| 431 | }else{ | ||
| 432 | //选中 | ||
| 433 | e.target.className = ''; | ||
| 434 | this.deleteArrOption(this.hbsmList,bsm); | ||
| 435 | } | ||
| 436 | this.$parent.getHbsm(this.hbsmList); | ||
| 437 | }, | ||
| 438 | //删除多重数组中的某一项 | ||
| 439 | deleteArrOption(arr, item) { | ||
| 440 | for (var i = arr.length; i > 0; i--) { | ||
| 441 | if (arr[i - 1] == item) { | ||
| 442 | arr.splice(i - 1, 1); | ||
| 425 | } | 443 | } |
| 444 | } | ||
| 445 | }, | ||
| 426 | }, | 446 | }, |
| 427 | computed: { | 447 | computed: { |
| 428 | createFlagChange() { | 448 | createFlagChange() { |
| ... | @@ -536,6 +556,9 @@ export default { | ... | @@ -536,6 +556,9 @@ export default { |
| 536 | line-height: 64px; | 556 | line-height: 64px; |
| 537 | text-align: center; | 557 | text-align: center; |
| 538 | } | 558 | } |
| 559 | .tdSelect{ | ||
| 560 | border: 1px solid #0091FF!important; | ||
| 561 | } | ||
| 539 | } | 562 | } |
| 540 | } | 563 | } |
| 541 | .name{ | 564 | .name{ | ... | ... |
-
Please register or sign in to post a comment