ljzs.vue
3.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!--
* @Author: yangwei
* @Date: 2023-02-28 17:25:45
* @LastEditors: yangwei
* @LastEditTime: 2023-03-02 17:34:24
* @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ljzs.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
<div class="ljzs-wrap">
<div v-for="ljzarr in ljzsCptd" :key="ljzarr[0].bsm">
<!-- 多个同起始层逻辑幢 横向排列 -->
<div class="ch-zdy-wrap" v-if="ljzarr.length > 1">
<div v-for="ljz in ljzarr" :key="ljz.ljzmc" class="same-floor-ljz">
<div
:class="
ljz.cs.length ? 'cs-visible ch-zdy-wrap' : 'cs-none ch-zdy-wrap'
"
>
<!-- 逻辑幢名称 -->
<p class="lpb-xmmc ljz-xmmc">{{ ljz.ljzmc }}</p>
<!-- 独立层户 -->
<ch-cpn v-if="ljz.cs.length" :ch="ljz.cs" />
<!-- 幢单元 -->
<zdy-cpn v-if="ljz.zdys.length" :zdys="ljz.zdys" />
</div>
</div>
</div>
<!-- 不同起始层的逻辑幢纵向排列 -->
<div
:class="
ljzarr[0].cs.length ? 'cs-visible ch-zdy-wrap' : 'cs-none ch-zdy-wrap'
"
v-else
>
<!-- 逻辑幢名称 -->
<p class="lpb-xmmc ljz-xmmc">{{ ljzarr[0].ljzmc }}</p>
<!-- 独立层户 -->
<ch-cpn v-if="ljzarr[0].cs.length" :ch="ljzarr[0].cs" />
<!-- 幢单元 -->
<zdy-cpn v-if="ljzarr[0].zdys.length" :zdys="ljzarr[0].zdys" />
</div>
</div>
</div>
</template>
<script>
import chCpn from "./ch.vue";
import zdyCpn from "./zdys.vue";
export default {
name: "BdcdjWebLjzs",
components: { chCpn, zdyCpn },
props: {
ljzs: {
type: Array,
default: function () {
return [];
},
},
},
data() {
return {
};
},
mounted() {
console.log(this.ljzsCptd);
},
computed: {
ljzsCptd() {
let tempArr = [];
//逻辑幢数据已经按照place从小到大排序
this.ljzs.forEach((item, index) => {
//判断当前逻辑幢是否与上一个逻辑幢的起始层数相同，将起始层数相同的逻辑幢放在同一排
if (index && item.place == this.ljzs[index - 1].place) {
tempArr[index - 1].push(item);
} else {
tempArr[index] = [];
tempArr[index].push(item);
}
});
//过滤假值
return tempArr.filter(Boolean)
},
},
methods: {},
};
</script>
<style lang="scss">
.ljzs-wrap {
display: flex;
flex-direction: column-reverse;
> div {
margin-bottom: 80px;
margin-right: 20px;
display: flex;
flex-direction: column;
.ch-zdy-wrap {
display: flex;
flex-direction: row-reverse;
width: fit-content;
position: relative;
.same-floor-ljz{
display: flex;
flex-direction: row;
margin-right: 20px;
}
.ljz-xmmc {
position: absolute;
width: calc(100% + 1px);
bottom: -60px;
}
}
.cs-none {
.zdys-wrap > div:last-child {
margin-right: 0;
}
}
}
}
</style>