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 347 additions and 217 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 : JSON.parse(localStorage.getItem("ApiUrl"));
10 const url = SERVER.SERVERAPI + "/rest/zhcx/lpcx/";
9 // 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 class="tab-content"
9 v-if="activeName == 'first'"
10 ref="tabContent"
11 :style="{ height: lpbContentHight + 'px' }"
12 v-show="bjztFlag"
13 >
8 <!-- 楼盘表主体 --> 14 <!-- 楼盘表主体 -->
9 <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }"> 15 <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
10 <lpbContent ref="lpbContent" :zrzbsm="formData.bsm" :key="time"></lpbContent> 16 <lpbContent
17 ref="lpbContent"
18 :zrzbsm="formData.bsm"
19 :key="time"
20 ></lpbContent>
11 </div> 21 </div>
12 <!-- 右侧图例 --> 22 <!-- 右侧图例 -->
13 <div class="lp-legend"> 23 <div class="lp-legend">
...@@ -16,46 +26,89 @@ ...@@ -16,46 +26,89 @@
16 <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i> 26 <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
17 <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i> 27 <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
18 </div> 28 </div>
19 <div :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'" @click="selectedZt = 'dyzt'"> 29 <div
30 :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'"
31 @click="selectedZt = 'dyzt'"
32 >
20 <span>单元状态</span> 33 <span>单元状态</span>
21 </div> 34 </div>
22 <div :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'" @click="selectedZt = 'fwxz'"> 35 <div
36 :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'"
37 @click="selectedZt = 'fwxz'"
38 >
23 <span>房屋性质</span> 39 <span>房屋性质</span>
24 </div> 40 </div>
25 <div :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'" @click="selectedZt = 'fwyt'"> 41 <div
42 :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'"
43 @click="selectedZt = 'fwyt'"
44 >
26 <span>房屋用途</span> 45 <span>房屋用途</span>
27 </div> 46 </div>
28 <div :class="selectedZt == 'qsx' ? 'qsx selectedZt' : 'qsx'" @click="selectedZt = 'qsx'"> 47 <div
48 :class="selectedZt == 'qsx' ? 'qsx selectedZt' : 'qsx'"
49 @click="selectedZt = 'qsx'"
50 >
29 <span>缺失项</span> 51 <span>缺失项</span>
30 </div> 52 </div>
31
32 </div> 53 </div>
33 <div class="legendTable-wrap" :style="{ width: legendToggleFlag ? '204px' : '0' }"> 54 <div
34 <table class="legendTable" v-show="selectedZt == 'dyzt'" cellspacing="1" cellpadding="1" border="1"> 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 >
35 <tr> 65 <tr>
36 <th>状态</th> 66 <th>状态</th>
37 <th>套数</th> 67 <th>套数</th>
38 <th>面积</th> 68 <th>面积</th>
39 </tr> 69 </tr>
40 <tr v-for="(item, index) in dyztList" :key="index" class="cp" 70 <tr
41 @click="handleChoosedH(item.bsms, item.color)"> 71 v-for="(item, index) in dyztList"
72 :key="index"
73 class="cp"
74 @click="handleChoosedH(item.bsms, item.color)"
75 >
42 <td> 76 <td>
43 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }} 77 <i
78 class="fa fa-circle"
79 :style="{ backgroundColor: item.color }"
80 ></i
81 >{{ item.name }}
44 </td> 82 </td>
45 <td>{{ item.ts }}</td> 83 <td>{{ item.ts }}</td>
46 <td>{{ item.mj }}</td> 84 <td>{{ item.mj }}</td>
47 </tr> 85 </tr>
48 </table> 86 </table>
49 <table class="legendTable" v-show="selectedZt == 'fwxz'" cellspacing="1" cellpadding="1" border="1"> 87
88 <table
89 class="legendTable"
90 v-show="selectedZt == 'fwxz'"
91 cellspacing="1"
92 cellpadding="1"
93 border="1"
94 >
50 <tr> 95 <tr>
51 <th>性质</th> 96 <th>性质</th>
52 <th>套数</th> 97 <th>套数</th>
53 <th>面积</th> 98 <th>面积</th>
54 </tr> 99 </tr>
55 <tr v-for="(item, index) in fwxzList" :key="index" class="cp" 100 <tr
56 @click="handleChoosedH(item.bsms, item.color)"> 101 v-for="(item, index) in fwxzList"
102 :key="index"
103 class="cp"
104 @click="handleChoosedH(item.bsms, item.color)"
105 >
57 <td> 106 <td>
58 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }} 107 <i
108 class="fa fa-circle"
109 :style="{ backgroundColor: item.color }"
110 ></i
111 >{{ item.name }}
59 </td> 112 </td>
60 <td>{{ item.ts }}</td> 113 <td>{{ item.ts }}</td>
61 <td>{{ item.mj }}</td> 114 <td>{{ item.mj }}</td>
...@@ -65,16 +118,30 @@ ...@@ -65,16 +118,30 @@
65 </tr> 118 </tr>
66 </table> 119 </table>
67 120
68 <table class="legendTable" v-show="selectedZt == 'fwyt'" cellspacing="1" cellpadding="1" border="1"> 121 <table
122 class="legendTable"
123 v-show="selectedZt == 'fwyt'"
124 cellspacing="1"
125 cellpadding="1"
126 border="1"
127 >
69 <tr> 128 <tr>
70 <th>用途</th> 129 <th>用途</th>
71 <th>套数</th> 130 <th>套数</th>
72 <th>面积</th> 131 <th>面积</th>
73 </tr> 132 </tr>
74 <tr v-for="(item, index) in fwytList" :key="index" class="cp" 133 <tr
75 @click="handleChoosedH(item.bsms, item.color)"> 134 v-for="(item, index) in fwytList"
135 :key="index"
136 class="cp"
137 @click="handleChoosedH(item.bsms, item.color)"
138 >
76 <td> 139 <td>
77 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }} 140 <i
141 class="fa fa-circle"
142 :style="{ backgroundColor: item.color }"
143 ></i
144 >{{ item.name }}
78 </td> 145 </td>
79 <td>{{ item.ts }}</td> 146 <td>{{ item.ts }}</td>
80 <td>{{ item.mj }}</td> 147 <td>{{ item.mj }}</td>
...@@ -84,15 +151,30 @@ ...@@ -84,15 +151,30 @@
84 </tr> 151 </tr>
85 </table> 152 </table>
86 153
87 <table class="legendTable" v-show="selectedZt == 'qsx'" cellspacing="1" cellpadding="1" border="1"> 154 <table
155 class="legendTable"
156 v-show="selectedZt == 'qsx'"
157 cellspacing="1"
158 cellpadding="1"
159 border="1"
160 >
88 <tr> 161 <tr>
89 <th>数据缺失项</th> 162 <th>数据缺失项</th>
90 <th>套数</th> 163 <th>套数</th>
91 <th>面积</th> 164 <th>面积</th>
92 </tr> 165 </tr>
93 <tr v-for="(item, index) in qsxList" :key="index" class="cp" @click="handleChoosedH(item.bsms, item.color)"> 166 <tr
167 v-for="(item, index) in qsxList"
168 :key="index"
169 class="cp"
170 @click="handleChoosedH(item.bsms, item.color)"
171 >
94 <td> 172 <td>
95 <i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }} 173 <i
174 class="fa fa-circle"
175 :style="{ backgroundColor: item.color }"
176 ></i
177 >{{ item.name }}
96 </td> 178 </td>
97 <td>{{ item.ts }}</td> 179 <td>{{ item.ts }}</td>
98 <td>0</td> 180 <td>0</td>
...@@ -111,23 +193,23 @@ ...@@ -111,23 +193,23 @@
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是预测
...@@ -201,19 +283,23 @@ export default { ...@@ -201,19 +283,23 @@ export default {
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 =
299 (document.documentElement.clientWidth || document.body.clientWidth) -
300 340 -
301 34 -
302 6;
217 }, 100); 303 }, 100);
218 }, 304 },
219 methods: { 305 methods: {
...@@ -229,157 +315,146 @@ export default { ...@@ -229,157 +315,146 @@ export default {
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) => {
244 item.style.border = '';
245 item.className = '';
246 });
247 this.bsms = bsms;
248 //清除选中户
249 this.$nextTick(() => {
250 //给hBsmList传值
251 // console.log(bsms,'bsms');
252 this.$refs.lpbContent.choosedList = bsms;
253 this.$refs.lpbContent.borderColor = color;
254 })
255 }, 329 },
256 //获取各项单元状态统计数据 330 //获取各项单元状态统计数据
257 getDyztBsmList () { 331 getDyztBsmList() {
258 let data = { 332 getLpbTj(this.formData.bsm).then((res) => {
259 zrzbsm: 'ca71bcc498794a1e0ec3ac93869719f6',
260 scyclx: 1,
261 };
262 getLpbTj(data).then((res) => {
263 if (res.code === 200) { 333 if (res.code === 200) {
264 this.dyztList = res.result; 334 this.dyztList = res.result;
265 this.dyztList.splice(1, 0, this.dyztList[8]); 335 this.dyztList.splice(1, 0, this.dyztList[8]);
266 this.dyztList.pop(); 336 this.dyztList.pop();
267 this.dyztList.forEach(item => { 337 this.dyztList.forEach((item) => {
268 item.ts = item.bsms.length; 338 item.ts = item.bsms.length;
269 switch (item.name) { 339 switch (item.name) {
270 case 'Qqzt': 340 case "Qqzt":
271 item.color = "#6EDEE1"; 341 item.color = "#6EDEE1";
272 item.name = "已确权" 342 item.name = "已确权";
273 break; 343 break;
274 case 'Wqqzt': 344 case "Wqqzt":
275 item.color = "#83AAFE"; 345 item.color = "#83AAFE";
276 item.name = "未确权" 346 item.name = "未确权";
277 break; 347 break;
278 case 'Bazt': 348 case "Bazt":
279 item.color = "#8ADC88"; 349 item.color = "#8ADC88";
280 item.name = "已备案" 350 item.name = "已备案";
281 break; 351 break;
282 case 'Ydyzt': 352 case "Ydyzt":
283 item.color = "#F2AD67"; 353 item.color = "#F2AD67";
284 item.name = "预抵押" 354 item.name = "预抵押";
285 break; 355 break;
286 case 'Zjgcdyzt': 356 case "Zjgcdyzt":
287 item.color = "#F191C8"; 357 item.color = "#F191C8";
288 item.name = "在建抵押" 358 item.name = "在建抵押";
289 break; 359 break;
290 case 'Dyzt': 360 case "Dyzt":
291 item.color = "#FF8282"; 361 item.color = "#FF8282";
292 item.name = "抵押" 362 item.name = "抵押";
293 break; 363 break;
294 case 'Cfzt': 364 case "Cfzt":
295 item.color = "#D7CECF"; 365 item.color = "#D7CECF";
296 item.name = "查封" 366 item.name = "查封";
297 break; 367 break;
298 case 'Yyzt': 368 case "Yyzt":
299 item.color = "#D4A3EB"; 369 item.color = "#D4A3EB";
300 item.name = "异议" 370 item.name = "异议";
301 break; 371 break;
302 case 'Xzzt': 372 case "Xzzt":
303 item.color = "#A5A3FB"; 373 item.color = "#A5A3FB";
304 item.name = "限制" 374 item.name = "限制";
305 break; 375 break;
306 default: 376 default:
307 break; 377 break;
308 } 378 }
309 }) 379 });
310 } 380 }
311 }); 381 });
312 }, 382 },
313 // 获取房屋用途和房屋性质及缺失项统计数据 383 // 获取房屋用途和房屋性质及缺失项统计数据
314 getLpbFwytAndQlxz () { 384 getLpbFwytAndQlxz() {
315 getLpbFwytAndQlxz('ca71bcc498794a1e0ec3ac93869719f6').then((res) => { 385 getLpbFwytAndQlxz(this.formData.bsm).then((res) => {
316 if (res.code === 200) { 386 if (res.code === 200) {
317 // this.fwytList = res.result 387 // this.fwytList = res.result
318 this.fwytList = res.result.fwyt; 388 this.fwytList = res.result.fwyt;
319 this.fwxzList = res.result.qlxz; 389 this.fwxzList = res.result.qlxz;
320 if (this.fwytList.length > 0) { 390 if (this.fwytList.length > 0) {
321 this.fwytList.forEach(item => { 391 this.fwytList.forEach((item) => {
322 item.color = "#2591FD"; 392 item.color = "#2591FD";
323 item.ts = item.bsms.length 393 item.ts = item.bsms.length;
324 }) 394 });
325 } 395 }
326 if (this.fwxzList.length > 0) { 396 if (this.fwxzList.length > 0) {
327 this.fwxzList.forEach(item => { 397 this.fwxzList.forEach((item) => {
328 item.color = "#2591FD"; 398 item.color = "#2591FD";
329 item.ts = item.bsms.length 399 item.ts = item.bsms.length;
330 }) 400 });
331 } 401 }
332 } 402 }
333 }); 403 });
334 // getLpbQsxtj('ca71bcc498794a1e0ec3ac93869719f6').then((res) => { 404 getLpbQsxtj(this.formData.bsm).then((res) => {
335 // if (res.code === 200) { 405 if (res.code === 200) {
336 // this.qsxList = [ 406 this.qsxList = [
337 // { 407 {
338 // name: '坐落', 408 name: "坐落",
339 // bsms: res.result.zl.bsms, 409 bsms: res.result.zl.bsms,
340 // color: '#2591FD', 410 color: "#2591FD",
341 // ts: res.result.zl.bsms.length 411 ts: res.result.zl.bsms.length,
342 // }, 412 },
343 // { 413 {
344 // name: '分层分户图', 414 name: "分层分户图",
345 // bsms: res.result.fcfht.bsms, 415 bsms: res.result.fcfht.bsms,
346 // color: '#2591FD', 416 color: "#2591FD",
347 // ts: res.result.fcfht.bsms.length 417 ts: res.result.fcfht.bsms.length,
348 // }, 418 },
349 // { 419 {
350 // name: '室号', 420 name: "室号",
351 // bsms: res.result.shbw.bsms, 421 bsms: res.result.shbw.bsms,
352 // color: '#2591FD', 422 color: "#2591FD",
353 // ts: res.result.shbw.bsms.length 423 ts: res.result.shbw.bsms.length,
354 // } 424 },
355 // ] 425 ];
356 // }
357 // });
358 } 426 }
427 });
428 },
359 }, 429 },
360 computed: {}, 430 computed: {},
361 destroyed () { 431 destroyed() {
362 window.removeEventListener("resize", this.getHeight); 432 window.removeEventListener("resize", this.getHeight);
363 }, 433 },
364 watch: { 434 watch: {
365 //树结构和图例伸缩时修改楼盘表主要内容区宽度 435 //树结构和图例伸缩时修改楼盘表主要内容区宽度
366 legendToggleFlag (n) { 436 legendToggleFlag(n) {
367 if (n) { 437 if (n) {
368 this.lpbContentwidth -= 204; 438 this.lpbContentwidth -= 204;
369 } else { 439 } else {
370 this.lpbContentwidth += 204; 440 this.lpbContentwidth += 204;
371 } 441 }
372 }, 442 },
373 selectedZt (n) { 443 selectedZt(n) {
374 this.legendToggleFlag = true; 444 this.legendToggleFlag = true;
375 }, 445 },
376 }, 446 },
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;
...@@ -412,6 +487,7 @@ export default { ...@@ -412,6 +487,7 @@ export default {
412 margin-right: 10px; 487 margin-right: 10px;
413 box-sizing: border-box; 488 box-sizing: border-box;
414 } 489 }
490
415 .lp-legend { 491 .lp-legend {
416 transition: 0.5s; 492 transition: 0.5s;
417 height: 100%; 493 height: 100%;
...@@ -425,7 +501,7 @@ export default { ...@@ -425,7 +501,7 @@ export default {
425 height: 40px; 501 height: 40px;
426 line-height: 40px; 502 line-height: 40px;
427 text-align: center; 503 text-align: center;
428 background-color: #0091ff; 504 background-color: #5a78de;
429 color: #fff; 505 color: #fff;
430 border-bottom: 1px solid #e6e6e6; 506 border-bottom: 1px solid #e6e6e6;
431 } 507 }
...@@ -442,7 +518,6 @@ export default { ...@@ -442,7 +518,6 @@ export default {
442 cursor: pointer; 518 cursor: pointer;
443 border-bottom: 1px solid #e6e6e6; 519 border-bottom: 1px solid #e6e6e6;
444 border-left: 1px solid #e6e6e6; 520 border-left: 1px solid #e6e6e6;
445
446 span { 521 span {
447 text-align: center; 522 text-align: center;
448 height: 100%; 523 height: 100%;
...@@ -452,52 +527,43 @@ export default { ...@@ -452,52 +527,43 @@ export default {
452 letter-spacing: 2px; 527 letter-spacing: 2px;
453 } 528 }
454 } 529 }
455
456 .selectedZt { 530 .selectedZt {
457 background-color: #0091ff; 531 // background-color: #5A78DE;
458 color: #fff; 532 color: #3d59c4;
459 } 533 }
460 } 534 }
461
462 .legendTable-wrap { 535 .legendTable-wrap {
463 transition: 0.5s; 536 transition: 0.5s;
464 float: right; 537 float: right;
465 overflow: hidden; 538 overflow: hidden;
466
467 .legendTable { 539 .legendTable {
468 margin-top: -1px; 540 margin-top: -1px;
469 border-color: #e4ebf4 !important; 541 .fa-circle {
470 border-collapse: collapse; 542 display: inline-block;
471 border-spacing: 0; 543 width: 12px;
544 height: 12px;
545 border-radius: 50%;
546 vertical-align: middle;
547 margin-right: 4px;
548 }
472 tr { 549 tr {
473 height: 40px; 550 height: 40px;
474 line-height: 40px; 551 line-height: 40px;
475 552 border-color: #d8e0ea !important;
476 th:first-child { 553 th:first-child {
477 width: 80px; 554 width: 80px;
478 } 555 }
479
480 th { 556 th {
481 width: 60px; 557 width: 60px;
482 height: 40px; 558 height: 40px;
483 white-space: nowrap; 559 white-space: nowrap;
560 background-color: #eceef2;
484 } 561 }
485
486 td { 562 td {
487 height: 40px; 563 height: 40px;
488 text-align: center; 564 text-align: center;
489 white-space: nowrap; 565 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 } 566 }
499 }
500
501 td:first-child { 567 td:first-child {
502 text-align: left; 568 text-align: left;
503 text-indent: 2px; 569 text-indent: 2px;
......
...@@ -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" />
......