Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
69c583cc by yangwei
Options

楼盘表

1 parent b4865ddb
Inline Side-by-side
Showing 6 changed files with 694 additions and 564 deletions
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-06-08 13:43:33 4 * @LastEditTime: 2023-06-16 16:06:39
5 */ 5 */
6 import request from '@/utils/request' 6 import request from "@/utils/request";
7 let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl')) 7 let SERVER = window.config
8 const url = SERVER.SERVERAPI + '/rest/zhcx/lpcx/' 8 ? window.config
9 // 9 : JSON.parse(localStorage.getItem("ApiUrl"));
10 const url = SERVER.SERVERAPI + "/rest/zhcx/lpcx/";
11 //
10 /** 12 /**
11 * @description:楼盘查询- 根据条件进行列表查询 13 * @description:楼盘查询- 根据条件进行列表查询
12 * @param {*} data 14 * @param {*} data
13 * @author: renchao 15 * @author: renchao
14 */ 16 */
15 export function getLpZrz (data) { 17 export function getLpZrz(data) {
16 return request({ 18 return request({
17 url: 'service-lpb-zq/rest/zhcx/lpcx/getLpZrz', 19 url: "service-lpb-zq/rest/zhcx/lpcx/getLpZrz",
18 method: 'post', 20 method: "post",
19 data: data 21 data: data,
20 }) 22 });
21 } 23 }
22 24
23 /** 25 /**
...@@ -25,32 +27,47 @@ export function getLpZrz (data) { ...@@ -25,32 +27,47 @@ export function getLpZrz (data) {
25 * @param {*} zrzbsm 27 * @param {*} zrzbsm
26 * @author: renchao 28 * @author: renchao
27 */ 29 */
28 export function getLpb (zrzbsm) { 30 export function getLpb(zrzbsm) {
29 return request({ 31 return request({
30 url: 'service-lpb-zq/rest/zhcx/lpcx/getLpb?scyclx=1&zrzbsm=' + zrzbsm, 32 url: "service-lpb-zq/rest/zhcx/lpcx/getLpb?scyclx=0&zrzbsm=" + zrzbsm,
31 method: 'get' 33 method: "get",
32 }) 34 });
33 } 35 }
34 /** 36 /**
35 * @description: 获取楼盘表房屋用途,房屋性质右侧房屋用途统计数据 37 * @description: 获取楼盘表房屋用途,房屋性质右侧房屋用途统计数据
36 * @param {*} zrzbsm 38 * @param {*} zrzbsm
37 * @author: renchao 39 * @author: renchao
38 */ 40 */
39 export function getLpbFwytAndQlxz (zrzbsm) { 41 export function getLpbFwytAndQlxz(zrzbsm) {
40 return request({ 42 return request({
41 url: 'service-lpb-zq/rest/zhcx/lpcx/getLpbFwytAndQlxz?scyclx=1&zrzbsm=' + zrzbsm, 43 url:
42 method: 'get' 44 "service-lpb-zq/rest/zhcx/lpcx/getLpbFwytAndQlxz?scyclx=0&zrzbsm=" +
43 }) 45 zrzbsm,
46 method: "get",
47 });
44 } 48 }
45 /** 49 /**
46 * @description: 获取楼盘表缺失项统计 50 * @description: 获取楼盘表缺失项统计
47 * @param {*} zrzbsm 51 * @param {*} zrzbsm
48 * @author: renchao 52 * @author: renchao
49 */ 53 */
50 export function getLpbQsxtj (zrzbsm) { 54 export function getLpbQsxtj(zrzbsm) {
51 return request({ 55 return request({
52 url: url + 'getLpbQsxtj?scyclx=1&zrzbsm=' + zrzbsm, 56 url: "service-lpb-zq/rest/zhcx/lpcx/getLpbQsxtj?scyclx=0&zrzbsm=" + zrzbsm,
53 method: 'get' 57 method: "get",
54 }) 58 });
55 } 59 }
56 60
61 /**
62 * @description: 楼盘表 获取单元状态统计数据
63 * @param {*} data
64 * zrzbsm 自然幢标识码
65 * scyclx 实测预测类型 0预测，1实测
66 * @return {*}
67 */
68 export function getLpbTj(zrzbsm) {
69 return request({
70 url: "service-lpb-zq/rest/zhcx/lpcx/getLpbTj?scyclx=0&zrzbsm=" + zrzbsm,
71 method: "get",
72 });
73 }
......
1 <template> 1 <template>
2 <div class="edit"> 2 <div class="edit">
3 <el-tabs type="card" v-model="activeName" > 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-content" v-if="activeName=='first'" ref="tabContent" :style="{ height: lpbContentHight + 'px' }" v-show="bjztFlag"> 7 <div
8 <!-- 楼盘表主体 --> 8 class="tab-content"
9 <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }"> 9 v-if="activeName == 'first'"
10 <lpbContent ref="lpbContent" :zrzbsm="formData.bsm" :key="time"></lpbContent> 10 ref="tabContent"
11 </div> 11 :style="{ height: lpbContentHight + 'px' }"
12 <!-- 右侧图例 --> 12 v-show="bjztFlag"
13 <div class="lp-legend"> 13 >
14 <div class="handleCol"> 14 <!-- 楼盘表主体 -->
15 <div class="btn" @click="legendToggle"> 15 <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
16 <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i> 16 <lpbContent
17 <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i> 17 ref="lpbContent"
18 </div> 18 :zrzbsm="formData.bsm"
19 <div :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'" @click="selectedZt = 'dyzt'"> 19 :key="time"
20 <span>单元状态</span> 20 ></lpbContent>
21 </div> 21 </div>
22 <div :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'" @click="selectedZt = 'fwxz'"> 22 <!-- 右侧图例 -->
23 <span>房屋性质</span> 23 <div class="lp-legend">
24 </div> 24 <div class="handleCol">
25 <div :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'" @click="selectedZt = 'fwyt'"> 25 <div class="btn" @click="legendToggle">
26 <span>房屋用途</span> 26 <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
27 </div> 27 <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
28 <div :class="selectedZt == 'qsx' ? 'qsx selectedZt' : 'qsx'" @click="selectedZt = 'qsx'"> 28 </div>
29 <span>缺失项</span> 29 <div
30 </div> 30 :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'"
31 @click="selectedZt = 'dyzt'"
32 >
33 <span>单元状态</span>
34 </div>
35 <div
36 :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'"
37 @click="selectedZt = 'fwxz'"
38 >
39 <span>房屋性质</span>
40 </div>
41 <div
42 :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'"
43 @click="selectedZt = 'fwyt'"
44 >
45 <span>房屋用途</span>
46 </div>
47 <div
48 :class="selectedZt == 'qsx' ? 'qsx selectedZt' : 'qsx'"
49 @click="selectedZt = 'qsx'"
50 >
51 <span>缺失项</span>
52 </div>
53 </div>
54 <div
55 class="legendTable-wrap"
56 :style="{ width: legendToggleFlag ? '200px' : '0' }"
57 >
58 <table
59 class="legendTable"
60 v-show="selectedZt == 'dyzt'"
61 cellspacing="1"
62 cellpadding="1"
63 border="1"
64 >
65 <tr>
66 <th>状态</th>
67 <th>套数</th>
68 <th>面积</th>
69 </tr>
70 <tr
71 v-for="(item, index) in dyztList"
72 :key="index"
73 class="cp"
74 @click="handleChoosedH(item.bsms, item.color)"
75 >
76 <td>
77 <i
78 class="fa fa-circle"
79 :style="{ backgroundColor: item.color }"
80 ></i
81 >{{ item.name }}
82 </td>
83 <td>{{ item.ts }}</td>
84 <td>{{ item.mj }}</td>
85 </tr>
86 </table>
31 87
32 </div> 88 <table
33 <div class="legendTable-wrap" :style="{ width: legendToggleFlag ? '204px' : '0' }"> 89 class="legendTable"
34 <table class="legendTable" v-show="selectedZt == 'dyzt'" cellspacing="1" cellpadding="1" border="1"> 90 v-show="selectedZt == 'fwxz'"
35 <tr> 91 cellspacing="1"
36 <th>状态</th> 92 cellpadding="1"
37 <th>套数</th> 93 border="1"
38 <th>面积</th> 94 >
39 </tr> 95 <tr>
40 <tr v-for="(item, index) in dyztList" :key="index" class="cp" 96 <th>性质</th>
41 @click="handleChoosedH(item.bsms, item.color)"> 97 <th>套数</th>
42 <td> 98 <th>面积</th>
43 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }} 99 </tr>
44 </td> 100 <tr
45 <td>{{ item.ts }}</td> 101 v-for="(item, index) in fwxzList"
46 <td>{{ item.mj }}</td> 102 :key="index"
47 </tr> 103 class="cp"
48 </table> 104 @click="handleChoosedH(item.bsms, item.color)"
49 <table class="legendTable" v-show="selectedZt == 'fwxz'" cellspacing="1" cellpadding="1" border="1"> 105 >
50 <tr> 106 <td>
51 <th>性质</th> 107 <i
52 <th>套数</th> 108 class="fa fa-circle"
53 <th>面积</th> 109 :style="{ backgroundColor: item.color }"
54 </tr> 110 ></i
55 <tr v-for="(item, index) in fwxzList" :key="index" class="cp" 111 >{{ item.name }}
56 @click="handleChoosedH(item.bsms, item.color)"> 112 </td>
57 <td> 113 <td>{{ item.ts }}</td>
58 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }} 114 <td>{{ item.mj }}</td>
59 </td> 115 </tr>
60 <td>{{ item.ts }}</td> 116 <tr v-show="fwxzList.length < 1">
61 <td>{{ item.mj }}</td> 117 <td colspan="3" class="tac">暂无数据</td>
62 </tr> 118 </tr>
63 <tr v-show="fwxzList.length < 1"> 119 </table>
64 <td colspan="3" class="tac">暂无数据</td>
65 </tr>
66 </table>
67 120
68 <table class="legendTable" v-show="selectedZt == 'fwyt'" cellspacing="1" cellpadding="1" border="1"> 121 <table
69 <tr> 122 class="legendTable"
70 <th>用途</th> 123 v-show="selectedZt == 'fwyt'"
71 <th>套数</th> 124 cellspacing="1"
72 <th>面积</th> 125 cellpadding="1"
73 </tr> 126 border="1"
74 <tr v-for="(item, index) in fwytList" :key="index" class="cp" 127 >
75 @click="handleChoosedH(item.bsms, item.color)"> 128 <tr>
76 <td> 129 <th>用途</th>
77 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }} 130 <th>套数</th>
78 </td> 131 <th>面积</th>
79 <td>{{ item.ts }}</td> 132 </tr>
80 <td>{{ item.mj }}</td> 133 <tr
81 </tr> 134 v-for="(item, index) in fwytList"
82 <tr v-show="fwytList.length < 1"> 135 :key="index"
83 <td colspan="3" class="tac">暂无数据</td> 136 class="cp"
84 </tr> 137 @click="handleChoosedH(item.bsms, item.color)"
85 </table> 138 >
139 <td>
140 <i
141 class="fa fa-circle"
142 :style="{ backgroundColor: item.color }"
143 ></i
144 >{{ item.name }}
145 </td>
146 <td>{{ item.ts }}</td>
147 <td>{{ item.mj }}</td>
148 </tr>
149 <tr v-show="fwytList.length < 1">
150 <td colspan="3" class="tac">暂无数据</td>
151 </tr>
152 </table>
86 153
87 <table class="legendTable" v-show="selectedZt == 'qsx'" cellspacing="1" cellpadding="1" border="1"> 154 <table
88 <tr> 155 class="legendTable"
89 <th>数据缺失项</th> 156 v-show="selectedZt == 'qsx'"
90 <th>套数</th> 157 cellspacing="1"
91 <th>面积</th> 158 cellpadding="1"
92 </tr> 159 border="1"
93 <tr v-for="(item, index) in qsxList" :key="index" class="cp" @click="handleChoosedH(item.bsms, item.color)"> 160 >
94 <td> 161 <tr>
95 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }} 162 <th>数据缺失项</th>
96 </td> 163 <th>套数</th>
97 <td>{{ item.ts }}</td> 164 <th>面积</th>
98 <td>0</td> 165 </tr>
99 </tr> 166 <tr
100 <tr v-show="qsxList.length < 1"> 167 v-for="(item, index) in qsxList"
101 <td colspan="3" class="tac">暂无数据</td> 168 :key="index"
102 </tr> 169 class="cp"
103 </table> 170 @click="handleChoosedH(item.bsms, item.color)"
104 </div> 171 >
105 </div> 172 <td>
106 </div> 173 <i
174 class="fa fa-circle"
175 :style="{ backgroundColor: item.color }"
176 ></i
177 >{{ item.name }}
178 </td>
179 <td>{{ item.ts }}</td>
180 <td>0</td>
181 </tr>
182 <tr v-show="qsxList.length < 1">
183 <td colspan="3" class="tac">暂无数据</td>
184 </tr>
185 </table>
186 </div>
187 </div>
188 </div>
107 <!-- 单元列表页面--> 189 <!-- 单元列表页面-->
108 <selectZrzH v-else :sqywInfo="formData" /> 190 <selectZrzH v-else :sqywInfo="formData" />
109 </div> 191 </div>
110 </template> 192 </template>
111 193
112 <script> 194 <script>
113 import lpbContent from "./lpbContent/index"; 195 import lpbContent from "./lpbContent/index";
114 import selectZrzH from "../ywbl/ywsq/components/selectZrzH" 196 import selectZrzH from "../ywbl/ywsq/components/selectZrzH";
115 import { getLpbFwytAndQlxz,getLpbQsxtj } from '@/api/lpb' 197 import { getLpbFwytAndQlxz, getLpbQsxtj, getLpbTj } from "@/api/lpb";
116 export default { 198 export default {
117 name: "lpb", 199 name: "lpb",
118 props: { 200 props: {
119 formData: { 201 formData: {
120 type: Object, 202 type: Object,
121 default: {} 203 default: {},
122 } 204 },
123 }, 205 },
124 components: { 206 components: {
125 lpbContent, 207 lpbContent,
126 selectZrzH 208 selectZrzH,
127 }, 209 },
128 data () { 210 data() {
129 return { 211 return {
130 activeName:"first", 212 activeName: "first",
131 bsms: [], 213 bsms: [],
132 dialogVisible: false, 214 dialogVisible: false,
133 scyclx: "0", //1是实测 0是预测 215 scyclx: "0", //1是实测 0是预测
134 menuType: "", 216 menuType: "",
135 selectedZt: "dyzt", //图例选中项，默认选中单元状态 217 selectedZt: "dyzt", //图例选中项，默认选中单元状态
136 dyztList: [ 218 dyztList: [
137 { 219 {
138 name: "未确权", 220 name: "未确权",
139 color: "#83AAFE", 221 color: "#83AAFE",
140 ts: "12", 222 ts: "12",
141 mj: "1633", 223 mj: "1633",
142 }, 224 },
143 { 225 {
144 name: "已确权", 226 name: "已确权",
145 color: "#6EDEE1", 227 color: "#6EDEE1",
146 ts: "22", 228 ts: "22",
147 mj: "3109", 229 mj: "3109",
148 }, 230 },
149 { 231 {
150 name: "已备案", 232 name: "已备案",
151 color: "#8ADC88", 233 color: "#8ADC88",
152 ts: "3", 234 ts: "3",
153 mj: "409", 235 mj: "409",
154 }, 236 },
155 { 237 {
156 name: "预抵押", 238 name: "预抵押",
157 color: "#F2AD67", 239 color: "#F2AD67",
158 ts: "11", 240 ts: "11",
159 mj: "1466", 241 mj: "1466",
160 }, 242 },
161 { 243 {
162 name: "在建抵押", 244 name: "在建抵押",
163 color: "#F191C8", 245 color: "#F191C8",
164 ts: "13", 246 ts: "13",
165 mj: "1792", 247 mj: "1792",
166 }, 248 },
167 { 249 {
168 name: "抵押", 250 name: "抵押",
169 color: "#FF8282", 251 color: "#FF8282",
170 ts: "14", 252 ts: "14",
171 mj: "13", 253 mj: "13",
172 }, 254 },
173 { 255 {
174 name: "查封", 256 name: "查封",
175 color: "#D7CECF", 257 color: "#D7CECF",
176 ts: "9", 258 ts: "9",
177 mj: "1436", 259 mj: "1436",
178 }, 260 },
179 { 261 {
180 name: "异议", 262 name: "异议",
181 color: "#D4A3EB", 263 color: "#D4A3EB",
182 ts: "34", 264 ts: "34",
183 mj: "4342", 265 mj: "4342",
184 }, 266 },
185 { 267 {
186 name: "限制", 268 name: "限制",
187 color: "#A5A3FB", 269 color: "#A5A3FB",
188 ts: "2", 270 ts: "2",
189 mj: "285", 271 mj: "285",
190 }, 272 },
191 ], 273 ],
192 fwxzList: [], 274 fwxzList: [],
193 fwytList: [], 275 fwytList: [],
194 qsxList: [], 276 qsxList: [],
195 legendToggleFlag: false, 277 legendToggleFlag: false,
196 lpbContentHight: "", 278 lpbContentHight: "",
197 lpbContentwidth: "", 279 lpbContentwidth: "",
198 time: "", 280 time: "",
199 dyztBsmList: {}, //单元状态bsmList 281 dyztBsmList: {}, //单元状态bsmList
200 bjztFlag: true, 282 bjztFlag: true,
201 qsztList: [], 283 qsztList: [],
202 }; 284 };
203 }, 285 },
204 created () { 286 created() {
205 window.addEventListener("resize", this.getHeight); 287 window.addEventListener("resize", this.getHeight);
206 console.log(this.formData); 288 console.log(this.formData);
207 this.getHeight(); 289 this.getHeight();
208 }, 290 },
209 mounted () { 291 mounted() {
210 //获取各项单元状态的户bsm 292 //获取各项单元状态的户bsm
211 // this.getDyztBsmList(); 293 this.getDyztBsmList();
212 //获取房屋用途统计数据 294 //获取房屋用途统计数据
213 this.getLpbFwytAndQlxz(); 295 this.getLpbFwytAndQlxz();
214 // 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6 296 // 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
215 setTimeout(() => { 297 setTimeout(() => {
216 this.lpbContentwidth = ((document.documentElement.clientWidth || document.body.clientWidth) - 340) - 34 - 6; 298 this.lpbContentwidth =
217 }, 100); 299 (document.documentElement.clientWidth || document.body.clientWidth) -
218 }, 300 340 -
219 methods: { 301 34 -
220 /* handleTabClick(event){ 302 6;
303 }, 100);
304 },
305 methods: {
306 /* handleTabClick(event){
221 if(event.name=="first"){ 307 if(event.name=="first"){
222 this.$router.push({ 308 this.$router.push({
223 path:"/lpb/index", 309 path:"/lpb/index",
...@@ -228,284 +314,264 @@ export default { ...@@ -228,284 +314,264 @@ export default {
228 }) 314 })
229 } 315 }
230 },*/ 316 },*/
231 //获取高度计算lpb内容区高度 317 //获取高度计算lpb内容区高度
232 getHeight () { 318 getHeight() {
233 this.lpbContentHight = window.innerHeight - 190; 319 this.lpbContentHight = window.innerHeight - 190;
234 }, 320 },
235 //图例的展开收起 321 //图例的展开收起
236 legendToggle () { 322 legendToggle() {
237 this.legendToggleFlag = !this.legendToggleFlag; 323 this.legendToggleFlag = !this.legendToggleFlag;
238 }, 324 },
239 //切换房屋状态 325 //切换房屋状态
240 handleChoosedH (bsms, color) { 326 handleChoosedH(bsms, color) {
241 //每次切换房屋状态，将之前高亮的户边框颜色重置为默认 327 debugger
242 this.$refs.lpbContent.choosedList = []; 328 this.$refs.lpbContent.changeChoosed(bsms, color);
243 this.$refs.lpbContent.$refs.hBsm.forEach((item) => { 329 },
244 item.style.border = ''; 330 //获取各项单元状态统计数据
245 item.className = ''; 331 getDyztBsmList() {
246 }); 332 getLpbTj(this.formData.bsm).then((res) => {
247 this.bsms = bsms; 333 if (res.code === 200) {
248 //清除选中户 334 this.dyztList = res.result;
249 this.$nextTick(() => { 335 this.dyztList.splice(1, 0, this.dyztList[8]);
250 //给hBsmList传值 336 this.dyztList.pop();
251 // console.log(bsms,'bsms'); 337 this.dyztList.forEach((item) => {
252 this.$refs.lpbContent.choosedList = bsms; 338 item.ts = item.bsms.length;
253 this.$refs.lpbContent.borderColor = color; 339 switch (item.name) {
254 }) 340 case "Qqzt":
255 }, 341 item.color = "#6EDEE1";
256 //获取各项单元状态统计数据 342 item.name = "已确权";
257 getDyztBsmList () { 343 break;
258 let data = { 344 case "Wqqzt":
259 zrzbsm: 'ca71bcc498794a1e0ec3ac93869719f6', 345 item.color = "#83AAFE";
260 scyclx: 1, 346 item.name = "未确权";
261 }; 347 break;
262 getLpbTj(data).then((res) => { 348 case "Bazt":
263 if (res.code === 200) { 349 item.color = "#8ADC88";
264 this.dyztList = res.result; 350 item.name = "已备案";
265 this.dyztList.splice(1, 0, this.dyztList[8]); 351 break;
266 this.dyztList.pop(); 352 case "Ydyzt":
267 this.dyztList.forEach(item => { 353 item.color = "#F2AD67";
268 item.ts = item.bsms.length; 354 item.name = "预抵押";
269 switch (item.name) { 355 break;
270 case 'Qqzt': 356 case "Zjgcdyzt":
271 item.color = "#6EDEE1"; 357 item.color = "#F191C8";
272 item.name = "已确权" 358 item.name = "在建抵押";
273 break; 359 break;
274 case 'Wqqzt': 360 case "Dyzt":
275 item.color = "#83AAFE"; 361 item.color = "#FF8282";
276 item.name = "未确权" 362 item.name = "抵押";
277 break; 363 break;
278 case 'Bazt': 364 case "Cfzt":
279 item.color = "#8ADC88"; 365 item.color = "#D7CECF";
280 item.name = "已备案" 366 item.name = "查封";
281 break; 367 break;
282 case 'Ydyzt': 368 case "Yyzt":
283 item.color = "#F2AD67"; 369 item.color = "#D4A3EB";
284 item.name = "预抵押" 370 item.name = "异议";
285 break; 371 break;
286 case 'Zjgcdyzt': 372 case "Xzzt":
287 item.color = "#F191C8"; 373 item.color = "#A5A3FB";
288 item.name = "在建抵押" 374 item.name = "限制";
289 break; 375 break;
290 case 'Dyzt': 376 default:
291 item.color = "#FF8282"; 377 break;
292 item.name = "抵押" 378 }
293 break; 379 });
294 case 'Cfzt': 380 }
295 item.color = "#D7CECF"; 381 });
296 item.name = "查封" 382 },
297 break; 383 // 获取房屋用途和房屋性质及缺失项统计数据
298 case 'Yyzt': 384 getLpbFwytAndQlxz() {
299 item.color = "#D4A3EB"; 385 getLpbFwytAndQlxz(this.formData.bsm).then((res) => {
300 item.name = "异议" 386 if (res.code === 200) {
301 break; 387 // this.fwytList = res.result
302 case 'Xzzt': 388 this.fwytList = res.result.fwyt;
303 item.color = "#A5A3FB"; 389 this.fwxzList = res.result.qlxz;
304 item.name = "限制" 390 if (this.fwytList.length > 0) {
305 break; 391 this.fwytList.forEach((item) => {
306 default: 392 item.color = "#2591FD";
307 break; 393 item.ts = item.bsms.length;
308 } 394 });
309 }) 395 }
310 } 396 if (this.fwxzList.length > 0) {
311 }); 397 this.fwxzList.forEach((item) => {
312 }, 398 item.color = "#2591FD";
313 // 获取房屋用途和房屋性质及缺失项统计数据 399 item.ts = item.bsms.length;
314 getLpbFwytAndQlxz () { 400 });
315 getLpbFwytAndQlxz('ca71bcc498794a1e0ec3ac93869719f6').then((res) => { 401 }
316 if (res.code === 200) { 402 }
317 // this.fwytList = res.result 403 });
318 this.fwytList = res.result.fwyt; 404 getLpbQsxtj(this.formData.bsm).then((res) => {
319 this.fwxzList = res.result.qlxz; 405 if (res.code === 200) {
320 if (this.fwytList.length > 0) { 406 this.qsxList = [
321 this.fwytList.forEach(item => { 407 {
322 item.color = "#2591FD"; 408 name: "坐落",
323 item.ts = item.bsms.length 409 bsms: res.result.zl.bsms,
324 }) 410 color: "#2591FD",
325 } 411 ts: res.result.zl.bsms.length,
326 if (this.fwxzList.length > 0) { 412 },
327 this.fwxzList.forEach(item => { 413 {
328 item.color = "#2591FD"; 414 name: "分层分户图",
329 item.ts = item.bsms.length 415 bsms: res.result.fcfht.bsms,
330 }) 416 color: "#2591FD",
331 } 417 ts: res.result.fcfht.bsms.length,
332 } 418 },
333 }); 419 {
334 // getLpbQsxtj('ca71bcc498794a1e0ec3ac93869719f6').then((res) => { 420 name: "室号",
335 // if (res.code === 200) { 421 bsms: res.result.shbw.bsms,
336 // this.qsxList = [ 422 color: "#2591FD",
337 // { 423 ts: res.result.shbw.bsms.length,
338 // name: '坐落', 424 },
339 // bsms: res.result.zl.bsms, 425 ];
340 // color: '#2591FD', 426 }
341 // ts: res.result.zl.bsms.length 427 });
342 // }, 428 },
343 // { 429 },
344 // name: '分层分户图', 430 computed: {},
345 // bsms: res.result.fcfht.bsms, 431 destroyed() {
346 // color: '#2591FD', 432 window.removeEventListener("resize", this.getHeight);
347 // ts: res.result.fcfht.bsms.length 433 },
348 // }, 434 watch: {
349 // { 435 //树结构和图例伸缩时修改楼盘表主要内容区宽度
350 // name: '室号', 436 legendToggleFlag(n) {
351 // bsms: res.result.shbw.bsms, 437 if (n) {
352 // color: '#2591FD', 438 this.lpbContentwidth -= 204;
353 // ts: res.result.shbw.bsms.length 439 } else {
354 // } 440 this.lpbContentwidth += 204;
355 // ] 441 }
356 // } 442 },
357 // }); 443 selectedZt(n) {
358 } 444 this.legendToggleFlag = true;
359 }, 445 },
360 computed: {}, 446 },
361 destroyed () {
362 window.removeEventListener("resize", this.getHeight);
363 },
364 watch: {
365 //树结构和图例伸缩时修改楼盘表主要内容区宽度
366 legendToggleFlag (n) {
367 if (n) {
368 this.lpbContentwidth -= 204;
369 } else {
370 this.lpbContentwidth += 204;
371 }
372 },
373 selectedZt (n) {
374 this.legendToggleFlag = true;
375 },
376 },
377 }; 447 };
378 </script> 448 </script>
379 <style scoped lang="scss"> 449 <style scoped lang="scss">
450 table {
451 border-width: 0;
452 border-collapse: collapse;
453 border-spacing: 0;
454 }
380 .edit { 455 .edit {
381 height: 100%; 456 height: 100%;
382 background-color: #F4F9FF; 457 background-color: #f4f9ff;
383 .tab-content { 458 .tab-content {
384 border: 1px solid #dedede; 459 border: 1px solid #dedede;
385 background-color: #ffffff; 460 background-color: #ffffff;
386 display: flex; 461 display: flex;
387 &::-webkit-scrollbar { 462 &::-webkit-scrollbar {
388 width: 1px; 463 width: 1px;
389 } 464 }
390 .lp-tree { 465 .lp-tree {
391 height: 100%; 466 height: 100%;
392 overflow: hidden; 467 overflow: hidden;
393 transition: 0.5s; 468 transition: 0.5s;
394 .treeData { 469 .treeData {
395 margin-top: 20px; 470 margin-top: 20px;
396 margin-left: 26px; 471 margin-left: 26px;
397 float: left; 472 float: left;
398 } 473 }
399 } 474 }
400 .w0 { 475 .w0 {
401 width: 0; 476 width: 0;
402 } 477 }
403 .w260 { 478 .w260 {
404 width: 260px; 479 width: 260px;
405 } 480 }
406 .lp-overview { 481 .lp-overview {
407 transition: 0.5s; 482 transition: 0.5s;
408 flex: 1; 483 flex: 1;
409 border: 1px solid rgb(236, 236, 236); 484 border: 1px solid rgb(236, 236, 236);
410 border-top: 0; 485 border-top: 0;
411 border-bottom: 0; 486 border-bottom: 0;
412 margin-right: 10px; 487 margin-right: 10px;
413 box-sizing: border-box; 488 box-sizing: border-box;
414 } 489 }
415 .lp-legend {
416 transition: 0.5s;
417 height: 100%;
418 font-size: 14px;
419 .handleCol {
420 width: 34px;
421 float: right;
422 height: 100%;
423 .btn {
424 cursor: pointer;
425 height: 40px;
426 line-height: 40px;
427 text-align: center;
428 background-color: #0091ff;
429 color: #fff;
430 border-bottom: 1px solid #e6e6e6;
431 }
432 .dyzt,
433 .fwxz,
434 .fwyt,
435 .qsx {
436 height: 122px;
437 }
438 .dyzt,
439 .fwxz,
440 .fwyt,
441 .qsx {
442 cursor: pointer;
443 border-bottom: 1px solid #e6e6e6;
444 border-left: 1px solid #e6e6e6;
445
446 span {
447 text-align: center;
448 height: 100%;
449 -webkit-writing-mode: vertical-rl;
450 writing-mode: vertical-rl;
451 line-height: 34px;
452 letter-spacing: 2px;
453 }
454 }
455
456 .selectedZt {
457 background-color: #0091ff;
458 color: #fff;
459 }
460 }
461 490
462 .legendTable-wrap { 491 .lp-legend {
463 transition: 0.5s; 492 transition: 0.5s;
464 float: right; 493 height: 100%;
465 overflow: hidden; 494 font-size: 14px;
466 495 .handleCol {
467 .legendTable { 496 width: 34px;
468 margin-top: -1px; 497 float: right;
469 border-color: #e4ebf4 !important; 498 height: 100%;
470 border-collapse: collapse; 499 .btn {
471 border-spacing: 0; 500 cursor: pointer;
472 tr { 501 height: 40px;
473 height: 40px; 502 line-height: 40px;
474 line-height: 40px; 503 text-align: center;
475 504 background-color: #5a78de;
476 th:first-child { 505 color: #fff;
477 width: 80px; 506 border-bottom: 1px solid #e6e6e6;
478 } 507 }
479 508 .dyzt,
480 th { 509 .fwxz,
481 width: 60px; 510 .fwyt,
482 height: 40px; 511 .qsx {
483 white-space: nowrap; 512 height: 122px;
484 } 513 }
485 514 .dyzt,
486 td { 515 .fwxz,
487 height: 40px; 516 .fwyt,
488 text-align: center; 517 .qsx {
489 white-space: nowrap; 518 cursor: pointer;
490 .circle{ 519 border-bottom: 1px solid #e6e6e6;
491 display: inline-block; 520 border-left: 1px solid #e6e6e6;
492 width: 12px; 521 span {
493 height: 12px; 522 text-align: center;
494 border-radius: 6px; 523 height: 100%;
495 margin-right: 2px; 524 -webkit-writing-mode: vertical-rl;
496 position: relative; 525 writing-mode: vertical-rl;
497 top: 1px; 526 line-height: 34px;
498 } 527 letter-spacing: 2px;
499 } 528 }
500 529 }
501 td:first-child { 530 .selectedZt {
502 text-align: left; 531 // background-color: #5A78DE;
503 text-indent: 2px; 532 color: #3d59c4;
504 } 533 }
505 } 534 }
506 } 535 .legendTable-wrap {
507 } 536 transition: 0.5s;
508 } 537 float: right;
509 } 538 overflow: hidden;
539 .legendTable {
540 margin-top: -1px;
541 .fa-circle {
542 display: inline-block;
543 width: 12px;
544 height: 12px;
545 border-radius: 50%;
546 vertical-align: middle;
547 margin-right: 4px;
548 }
549 tr {
550 height: 40px;
551 line-height: 40px;
552 border-color: #d8e0ea !important;
553 th:first-child {
554 width: 80px;
555 }
556 th {
557 width: 60px;
558 height: 40px;
559 white-space: nowrap;
560 background-color: #eceef2;
561 }
562 td {
563 height: 40px;
564 text-align: center;
565 white-space: nowrap;
566 }
567 td:first-child {
568 text-align: left;
569 text-indent: 2px;
570 }
571 }
572 }
573 }
574 }
575 }
510 } 576 }
511 </style> 577 </style>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: yangwei 2 * @Author: yangwei
3 * @Date: 2023-02-28 15:47:12 3 * @Date: 2023-02-28 15:47:12
4 * @LastEditors: yangwei 4 * @LastEditors: yangwei
5 * @LastEditTime: 2023-03-02 16:35:36 5 * @LastEditTime: 2023-06-16 16:14:51
6 * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ch.vue 6 * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ch.vue
7 * @Description: 7 * @Description:
8 * 8 *
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
37 :data-qszt="hs.qszt" 37 :data-qszt="hs.qszt"
38 ref="hBsm" 38 ref="hBsm"
39 :key="hsIndex" 39 :key="hsIndex"
40 style="border-color: rgb(230, 230, 230)" 40 :style="{'border-color': borderColor}"
41 :class="hs.select ? 'tdSelect' : ''" 41 :class="hs.select ? 'tdSelect' : ''"
42 @click="handleClickH($event.target, hs.bsm, hs)" 42 @click="handleClickH($event.target, hs.bsm, hs)"
43 @dblclick="dbclick(hs.bsm)" 43 @dblclick="dbclick(hs.bsm)"
...@@ -82,7 +82,12 @@ ...@@ -82,7 +82,12 @@
82 <script> 82 <script>
83 export default { 83 export default {
84 name: "BdcdjWebCh", 84 name: "BdcdjWebCh",
85 inject: ["openMenu", "selectAll"], 85 inject: {
86 openMenu:{value:'openMenu',default:null},
87 selectAll:{value:'selectAll',default:null},
88 changeChoosedObj:{value:'changeChoosedObj',default:null},
89 clearChangeChoosedObj:{value:'clearChangeChoosedObj',default:null}
90 },
86 props: { 91 props: {
87 ch: { 92 ch: {
88 type: Array, 93 type: Array,
...@@ -101,6 +106,8 @@ export default { ...@@ -101,6 +106,8 @@ export default {
101 hqsztList: [], 106 hqsztList: [],
102 //区分单双击事件的定时器 107 //区分单双击事件的定时器
103 time: null, 108 time: null,
109 // 边框颜色
110 borderColor:'rgb(230, 230, 230)'
104 }; 111 };
105 }, 112 },
106 mounted() {}, 113 mounted() {},
...@@ -108,48 +115,32 @@ export default { ...@@ -108,48 +115,32 @@ export default {
108 // 层选中事件 115 // 层选中事件
109 handleClickC(e, item) { 116 handleClickC(e, item) {
110 //判断点击的层是否选中 117 //判断点击的层是否选中
111 if (e.target.className.indexOf("tdSelect") == -1) { 118 // if (e.target.className.indexOf("tdSelect") == -1) {
112 //未选中→选中 119 // //未选中→选中
113 e.target.className += " tdSelect"; //加边框 120 // e.target.className += " tdSelect"; //加边框
114 this.cbsmList.push(item.bsm); 121 // this.cbsmList.push(item.bsm);
115 } else { 122 // } else {
116 //选中→未选中 123 // //选中→未选中
117 e.target.className = "floor"; 124 // e.target.className = "floor";
118 this.cbsmList = this.cbsmList.filter((i) => i != item.bsm); 125 // this.cbsmList = this.cbsmList.filter((i) => i != item.bsm);
119 } 126 // }
120 // this.$parent.getCbsm(this.cbsmList); 127 // this.$parent.getCbsm(this.cbsmList);
121 }, 128 },
122 //户单击事件 129 //户单击事件
123 handleClickH(e, bsm, hs) { 130 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 }, 131 },
143 // 户单元状态点击事件 132 // 户单元状态点击事件
144 hDyztClick(e, bsm, hs) { 133 hDyztClick(e, bsm, hs) {
145 this.handleClickH(e.target.parentNode, bsm, hs); 134 // this.handleClickH(e.target.parentNode, bsm, hs);
146 }, 135 },
147 //户双击事件 136 //户双击事件
148 dbclick(bsm) { 137 dbclick(bsm) {
149 clearTimeout(this.time); 138 // clearTimeout(this.time);
150 }, 139 },
151 //幢单元全选/反选 140 //幢单元全选/反选
152 zdySelectAll(val) { 141 zdySelectAll(val,flag) {
142 // 手动点击全部取消选中
143 !flag && this.clearChangeChoosedObj()
153 this.ch.forEach((c) => { 144 this.ch.forEach((c) => {
154 c.hs.forEach((h) => { 145 c.hs.forEach((h) => {
155 if (val) { 146 if (val) {
...@@ -158,10 +149,16 @@ export default { ...@@ -158,10 +149,16 @@ export default {
158 this.hbsmList.push(h.bsm) 149 this.hbsmList.push(h.bsm)
159 } else { 150 } else {
160 h.select = false; 151 h.select = false;
152 this.borderColor = 'rgb(230, 230, 230)'
161 this.hbsmList = [] 153 this.hbsmList = []
162 } 154 }
163 }); 155 });
164 }); 156 });
157 this.$refs.hBsm && this.$refs.hBsm.forEach((item) => {
158 // item.style.borderColor = this.borderColor
159 item.style.backgroundColor = '#fff';
160 // item.style.border = `1px solid ${this.borderColor}`
161 });
165 }, 162 },
166 }, 163 },
167 watch: { 164 watch: {
...@@ -172,6 +169,34 @@ export default { ...@@ -172,6 +169,34 @@ export default {
172 immediate: true, 169 immediate: true,
173 deep: true, 170 deep: true,
174 }, 171 },
172 changeChoosedObj: {
173 handler(val) {
174 debugger
175 //清除选中户
176 this.borderColor = 'rgb(230, 230, 230)';
177 this.zdySelectAll(false,true)
178 if (val.bsms.length) {
179 this.$refs.hBsm.forEach((item) => {
180 val.bsms.forEach((i,ind) => {
181 if (item.dataset.bsm == i) {
182 if (ind == 0) {
183 //定位到第一个户所在位置
184 window.lpbContent.$refs.lpbContent.scrollTop = item.offsetTop;
185 window.lpbContent.$refs.lpbContent.scrollLeft = item.offsetLeft;
186 }
187 item.style.border = '1px solid '+ val.color;
188 // item.style.backgroundColor = val.color;
189 }
190 });
191 });
192 }else{
193 this.borderColor = 'rgb(230, 230, 230)'
194 }
195
196 },
197 immediate: true,
198 deep: true,
199 },
175 }, 200 },
176 }; 201 };
177 </script> 202 </script>
...@@ -181,16 +206,26 @@ export default { ...@@ -181,16 +206,26 @@ export default {
181 display: flex; 206 display: flex;
182 flex-direction: column-reverse; 207 flex-direction: column-reverse;
183 .chTable { 208 .chTable {
184 margin-left: -1px; 209 // margin-left: -1px;
185 border-color: #e4ebf4 !important; 210 border-color: #e4ebf4 !important;
186 border-collapse: collapse; 211 border-collapse: collapse;
187 border-spacing: 0; 212 border-spacing: 0;
188 // position: relative; 213 // position: relative;
189 tr { 214 tr {
215 .floor {
216 min-width: 56px;
217 background: #e8f2ff;
218 border: 1px solid #acbae8;
219 }
220 &:first-child {
221 .floor {
222 border-radius: 4px 0px 0px 1px;
223 }
224 }
190 td { 225 td {
191 min-width: 138px; 226 min-width: 138px;
192 height: 72px; 227 height: 64px;
193 line-height: 72px; 228 line-height: 64px;
194 text-align: center; 229 text-align: center;
195 cursor: pointer; 230 cursor: pointer;
196 position: relative; 231 position: relative;
...@@ -204,7 +239,7 @@ export default { ...@@ -204,7 +239,7 @@ export default {
204 left: 6px; 239 left: 6px;
205 top: 6px; 240 top: 6px;
206 border: 1px solid; 241 border: 1px solid;
207 border-radius: 8px; 242 border-radius: 3px 0px 3px 0px;
208 } 243 }
209 .lin { 244 .lin {
210 color: #f7b500; 245 color: #f7b500;
...@@ -223,7 +258,7 @@ export default { ...@@ -223,7 +258,7 @@ export default {
223 width: 138px; 258 width: 138px;
224 height: 18px; 259 height: 18px;
225 position: absolute; 260 position: absolute;
226 bottom: 32px; 261 bottom: 28px;
227 box-sizing: border-box; 262 box-sizing: border-box;
228 padding: 0 6px; 263 padding: 0 6px;
229 li { 264 li {
...@@ -239,7 +274,8 @@ export default { ...@@ -239,7 +274,8 @@ export default {
239 } 274 }
240 } 275 }
241 .tdSelect { 276 .tdSelect {
242 border: 1px solid #006cff !important; 277 border: 1px solid ;
278 border-color: #5A78DE !important;
243 background-image: url("./images/tdSelect.png"); 279 background-image: url("./images/tdSelect.png");
244 background-repeat: no-repeat; 280 background-repeat: no-repeat;
245 background-position: right top; 281 background-position: right top;
......
1 <template> 1 <template>
2 <div class="lpbContent-wrap" ref="lpbContentWrap"> 2 <div class="lpbContent-wrap" ref="lpbContentWrap">
3 <div class="lpbContent"> 3 <div class="lpbContent" ref="lpbContent">
4 <!-- 纵向倒序排列 逻辑幢位于独立幢单元和独立层户的上方 --> 4 <!-- 纵向倒序排列 逻辑幢位于独立幢单元和独立层户的上方 -->
5 <div class="ch-zdy-wrap"> 5 <div class="ch-zdy-wrap">
6 <!-- 幢单元 --> 6 <!-- 幢单元 -->
...@@ -13,9 +13,10 @@ ...@@ -13,9 +13,10 @@
13 </div> 13 </div>
14 <!-- 自然幢名称 --> 14 <!-- 自然幢名称 -->
15 <p class="lpb-xmmc"> 15 <p class="lpb-xmmc">
16 <el-checkbox @change="zdySelectAll($event)">{{ 16 <!-- <el-checkbox @change="zdySelectAll($event)">{{
17 lpbData.xmmc 17 lpbData.xmmc
18 }}</el-checkbox> 18 }}</el-checkbox> -->
19 {{lpbData.xmmc}}
19 </p> 20 </p>
20 <!-- 右键菜单 --> 21 <!-- 右键菜单 -->
21 <ul 22 <ul
...@@ -38,6 +39,8 @@ export default { ...@@ -38,6 +39,8 @@ export default {
38 return { 39 return {
39 openMenu: this.openMenu, 40 openMenu: this.openMenu,
40 selectAll: this.selectAllObj, 41 selectAll: this.selectAllObj,
42 changeChoosedObj:this.changeChoosedObj,
43 clearChangeChoosedObj:this.clearChangeChoosedObj
41 }; 44 };
42 }, 45 },
43 name: "", 46 name: "",
...@@ -72,20 +75,27 @@ export default { ...@@ -72,20 +75,27 @@ export default {
72 //右键菜单定位位置 75 //右键菜单定位位置
73 lpbChLeft: 100, 76 lpbChLeft: 100,
74 lpbChTop: 100, 77 lpbChTop: 100,
78 // 改变户选中状态
79 changeChoosedObj:{
80 bsms:[],
81 color:''
82 }
75 }; 83 };
76 }, 84 },
77 mounted() { 85 mounted() {
78 this.getLpb("dfc08a0cc6a25188990ea53d1d2c500e"); 86 this.getLpb(this.zrzbsm);
79 // setTimeout(() => { 87 window.lpbContent = this;
80 // //让滚动条滚动至最下面 -6是横向滚动条的高度
81 // this.$refs.lpbContent.scrollTop =
82 // this.$refs.lpbContent.scrollHeight -
83 // this.$refs.lpbContent.clientHeight -
84 // 6;
85 // }, 200);
86 // window.lpbContent = this;
87 }, 88 },
88 methods: { 89 methods: {
90 // 改变户选中状态
91 changeChoosed(bsms, color){
92 debugger
93 this.changeChoosedObj.bsms = bsms;
94 this.changeChoosedObj.color = color;
95 },
96 clearChangeChoosedObj(){
97 this.changeChoosedObj.bsms = [];
98 },
89 //全选户 99 //全选户
90 zdySelectAll(val) { 100 zdySelectAll(val) {
91 this.selectAllObj.selectAll = val; 101 this.selectAllObj.selectAll = val;
...@@ -113,7 +123,7 @@ export default { ...@@ -113,7 +123,7 @@ export default {
113 openMenu(e, item, type) { 123 openMenu(e, item, type) {
114 this.lpbChLeft = e.pageX - 96; 124 this.lpbChLeft = e.pageX - 96;
115 this.lpbChTop = e.pageY - 23; 125 this.lpbChTop = e.pageY - 23;
116 this.lpbChVisible = true; 126 // this.lpbChVisible = true;
117 }, 127 },
118 //关闭户右键菜单 128 //关闭户右键菜单
119 closeMenu() { 129 closeMenu() {
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
10 --> 10 -->
11 <template> 11 <template>
12 <div class="ljzs-wrap"> 12 <div class="ljzs-wrap">
13 <div v-for="ljzarr in ljzsCptd" :key="ljzarr[0].bsm"> 13 <div v-for="ljzarr in ljzsCptd" :style="{'margin-bottom': ljzarr.length == 1 ? '34px':'80px'}" :key="ljzarr[0].bsm">
14 <!-- 多个同起始层逻辑幢 横向排列 --> 14 <!-- 多个同起始层逻辑幢 横向排列 -->
15 <div class="ch-zdy-wrap" v-if="ljzarr.length > 1"> 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"> 16 <div v-for="ljz in ljzarr" :key="ljz.ljzmc" class="same-floor-ljz">
...@@ -94,7 +94,7 @@ export default { ...@@ -94,7 +94,7 @@ export default {
94 display: flex; 94 display: flex;
95 flex-direction: column-reverse; 95 flex-direction: column-reverse;
96 > div { 96 > div {
97 margin-bottom: 80px; 97 // margin-bottom: 80px;
98 margin-right: 20px; 98 margin-right: 20px;
99 display: flex; 99 display: flex;
100 flex-direction: column; 100 flex-direction: column;
...@@ -110,8 +110,8 @@ export default { ...@@ -110,8 +110,8 @@ export default {
110 } 110 }
111 .ljz-xmmc { 111 .ljz-xmmc {
112 position: absolute; 112 position: absolute;
113 width: calc(100% + 1px); 113 width: calc(100% - 4px);
114 bottom: -60px; 114 bottom: -34px;
115 } 115 }
116 } 116 }
117 .cs-none { 117 .cs-none {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: yangwei 2 * @Author: yangwei
3 * @Date: 2023-02-28 16:29:04 3 * @Date: 2023-02-28 16:29:04
4 * @LastEditors: yangwei 4 * @LastEditors: yangwei
5 * @LastEditTime: 2023-03-02 14:45:19 5 * @LastEditTime: 2023-06-08 13:58:58
6 * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\zdys.vue 6 * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\zdys.vue
7 * @Description: 7 * @Description:
8 * 8 *
...@@ -13,9 +13,10 @@ ...@@ -13,9 +13,10 @@
13 <div v-for="zdy in realZdys" :key="zdy.bsm"> 13 <div v-for="zdy in realZdys" :key="zdy.bsm">
14 <!-- 幢单元名称 --> 14 <!-- 幢单元名称 -->
15 <p class="lpb-xmmc"> 15 <p class="lpb-xmmc">
16 <el-checkbox @change="zdySelectAll($event,zdy.bsm)">{{ 16 <!-- <el-checkbox @change="zdySelectAll($event,zdy.bsm)">{{
17 zdy.zdymc 17 zdy.zdymc
18 }}</el-checkbox> 18 }}</el-checkbox> -->
19 {{zdy.zdymc}}
19 </p> 20 </p>
20 <!-- 每个幢单元下的层户 --> 21 <!-- 每个幢单元下的层户 -->
21 <ch-cpn :ref="zdy.bsm" :ch="zdy.cs" /> 22 <ch-cpn :ref="zdy.bsm" :ch="zdy.cs" />
......