Merge branch 'dev' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web into dev
Showing
1 changed file
with
157 additions
and
143 deletions
1 | <!-- | 1 | <!-- |
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: vers |
5 | * @LastEditTime: 2023-09-20 17:14:39 | 5 | * @LastEditTime: 2024-02-05 16:06:30 |
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 | * |
... | @@ -16,14 +16,16 @@ | ... | @@ -16,14 +16,16 @@ |
16 | border="1" | 16 | border="1" |
17 | cellspacing="0" | 17 | cellspacing="0" |
18 | cellpadding="0" | 18 | cellpadding="0" |
19 | v-show="ch.length"> | 19 | v-show="ch.length" |
20 | > | ||
20 | <tr v-for="(cs, csIndex) in ch" :key="csIndex"> | 21 | <tr v-for="(cs, csIndex) in ch" :key="csIndex"> |
21 | <!-- 显示层数 --> | 22 | <!-- 显示层数 --> |
22 | <td | 23 | <td |
23 | class="floor" | 24 | class="floor" |
24 | ref="cBsm" | 25 | ref="cBsm" |
25 | @contextmenu.prevent="openMenu($event, cs, 'c')" | 26 | @contextmenu.prevent="openMenu($event, cs, 'c')" |
26 | @click="handleClickC($event, cs)"> | 27 | @click="handleClickC($event, cs)" |
28 | > | ||
27 | {{ cs.sjc }}层 | 29 | {{ cs.sjc }}层 |
28 | </td> | 30 | </td> |
29 | <!-- 显示户 --> | 31 | <!-- 显示户 --> |
... | @@ -35,15 +37,22 @@ | ... | @@ -35,15 +37,22 @@ |
35 | :data-qszt="hs.qszt" | 37 | :data-qszt="hs.qszt" |
36 | ref="hBsm" | 38 | ref="hBsm" |
37 | :key="hsIndex" | 39 | :key="hsIndex" |
38 | :style="{'border-color': borderColor}" | 40 | :style="{ 'border-color': borderColor }" |
39 | :class="hs.select ? 'tdSelect' : ''" | 41 | :class="hs.select ? 'tdSelect' : ''" |
40 | @click="handleClickH($event.target, hs.bsm, hs)" | 42 | @click="handleClickH($event.target, hs.bsm, hs)" |
41 | @dblclick="dbclick(hs.bsm)" | 43 | @dblclick="dbclick(hs.bsm)" |
42 | @contextmenu.prevent="openMenu($event, hs, 'h')"> | 44 | @contextmenu.prevent="openMenu($event, hs, 'h')" |
45 | > | ||
43 | {{ hs.shbw }} | 46 | {{ hs.shbw }} |
44 | <span @click.stop="" class="hqszt lin" v-show="hs.qszt == '0'">临</span> | 47 | <span @click.stop="" class="hqszt lin" v-show="hs.qszt == '0'" |
45 | <span @click.stop="" class="hqszt zheng" v-show="hs.qszt == '1'">正</span> | 48 | >临</span |
46 | <span @click.stop="" class="hqszt xian" v-show="hs.qszt == '2'">现</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 | > | ||
47 | <ul @click.stop="hDyztClick($event, hs.bsm, hs)" class="dyzt"> | 56 | <ul @click.stop="hDyztClick($event, hs.bsm, hs)" class="dyzt"> |
48 | <li style="background-color: #6edee1" v-show="hs.qqzt == '1'"> | 57 | <li style="background-color: #6edee1" v-show="hs.qqzt == '1'"> |
49 | 确 | 58 | 确 |
... | @@ -71,14 +80,16 @@ | ... | @@ -71,14 +80,16 @@ |
71 | </template> | 80 | </template> |
72 | 81 | ||
73 | <script> | 82 | <script> |
83 | import { set } from "nprogress"; | ||
84 | |||
74 | export default { | 85 | export default { |
75 | name: "BdcdjWebCh", | 86 | name: "BdcdjWebCh", |
76 | inject: { | 87 | inject: { |
77 | openMenu:{value:'openMenu',default:null}, | 88 | openMenu: { value: "openMenu", default: null }, |
78 | selectAll:{value:'selectAll',default:null}, | 89 | selectAll: { value: "selectAll", default: null }, |
79 | changeChoosedObj:{value:'changeChoosedObj',default:null}, | 90 | changeChoosedObj: { value: "changeChoosedObj", default: null }, |
80 | clearChangeChoosedObj:{value:'clearChangeChoosedObj',default:null}, | 91 | clearChangeChoosedObj: { value: "clearChangeChoosedObj", default: null }, |
81 | getBsmList:{value:'getBsmList',default:null} | 92 | getBsmList: { value: "getBsmList", default: null }, |
82 | }, | 93 | }, |
83 | props: { | 94 | props: { |
84 | ch: { | 95 | ch: { |
... | @@ -87,10 +98,10 @@ export default { | ... | @@ -87,10 +98,10 @@ export default { |
87 | return []; | 98 | return []; |
88 | }, | 99 | }, |
89 | }, | 100 | }, |
90 | onlyShow:{ | 101 | onlyShow: { |
91 | type: Boolean, | 102 | type: Boolean, |
92 | default: true, | 103 | default: true, |
93 | } | 104 | }, |
94 | }, | 105 | }, |
95 | data() { | 106 | data() { |
96 | return { | 107 | return { |
... | @@ -101,26 +112,27 @@ export default { | ... | @@ -101,26 +112,27 @@ export default { |
101 | //区分单双击事件的定时器 | 112 | //区分单双击事件的定时器 |
102 | time: null, | 113 | time: null, |
103 | // 边框颜色 | 114 | // 边框颜色 |
104 | borderColor:'rgb(230, 230, 230)', | 115 | borderColor: "rgb(230, 230, 230)", |
105 | // 申请单元列表数据 | 116 | // 申请单元列表数据 |
106 | unitIdList:[], | 117 | unitIdList: [], |
107 | // 组件标识 | 118 | // 组件标识 |
108 | compFlag:Math.random() | 119 | compFlag: Math.random(), |
109 | }; | 120 | }; |
110 | }, | 121 | }, |
111 | mounted() { | 122 | mounted() { |
112 | // 根据申请单元列表数据处理选中户 | 123 | // 根据申请单元列表数据处理选中户 |
113 | console.log("window.unitData",window.unitData); | 124 | console.log("window.unitData", window.unitData); |
114 | if(window.unitData && window.unitData.length){ | 125 | if (window.unitData && window.unitData.length) { |
115 | window.unitData.forEach(e => { | 126 | window.unitData.forEach((e) => { |
116 | this.unitIdList.push(e.bdcdyid) | 127 | this.unitIdList.push(e.bdcdyid); |
117 | }) | 128 | }); |
129 | console.log(this.unitIdList, "this.unitIdList"); | ||
118 | this.ch.forEach((c) => { | 130 | this.ch.forEach((c) => { |
119 | c.hs.forEach((h) => { | 131 | c.hs.forEach((h) => { |
120 | if (h.dyhbsm.indexOf(this.unitIdList) > -1) { | 132 | if (this.unitIdList.indexOf(h.dyhbsm) > -1) { |
121 | h.select = true; | 133 | h.select = true; |
122 | // 使用hbsmList时,需要去重 | 134 | // 使用hbsmList时,需要去重 |
123 | this.hbsmList.push(h.bsm) | 135 | this.hbsmList.push(h.bsm); |
124 | } | 136 | } |
125 | }); | 137 | }); |
126 | }); | 138 | }); |
... | @@ -144,7 +156,7 @@ export default { | ... | @@ -144,7 +156,7 @@ export default { |
144 | e.target.className += " tdSelect"; | 156 | e.target.className += " tdSelect"; |
145 | h.select = true; | 157 | h.select = true; |
146 | // 使用hbsmList时,需要去重 | 158 | // 使用hbsmList时,需要去重 |
147 | this.hbsmList.push(h.bsm) | 159 | this.hbsmList.push(h.bsm); |
148 | }); | 160 | }); |
149 | } else { | 161 | } else { |
150 | //选中→未选中 | 162 | //选中→未选中 |
... | @@ -217,88 +229,90 @@ export default { | ... | @@ -217,88 +229,90 @@ export default { |
217 | * @param {*} flag | 229 | * @param {*} flag |
218 | * @author: renchao | 230 | * @author: renchao |
219 | */ | 231 | */ |
220 | zdySelectAll(val,flag) { | 232 | zdySelectAll(val, flag) { |
221 | // 手动点击全部取消选中 | 233 | // 手动点击全部取消选中 |
222 | !flag && this.clearChangeChoosedObj() | 234 | !flag && this.clearChangeChoosedObj(); |
223 | this.ch.forEach((c) => { | 235 | this.ch.forEach((c) => { |
224 | c.hs.forEach((h) => { | 236 | c.hs.forEach((h) => { |
225 | if (val) { | 237 | if (val) { |
226 | h.select = true; | 238 | h.select = true; |
227 | // 使用hbsmList时,需要去重 | 239 | // 使用hbsmList时,需要去重 |
228 | this.hbsmList.push(h.bsm) | 240 | this.hbsmList.push(h.bsm); |
229 | } else { | 241 | } else { |
230 | h.select = false; | 242 | h.select = false; |
231 | this.borderColor = 'rgb(230, 230, 230)' | 243 | this.borderColor = "rgb(230, 230, 230)"; |
232 | this.hbsmList = [] | 244 | this.hbsmList = []; |
233 | } | 245 | } |
234 | }); | 246 | }); |
235 | }); | 247 | }); |
236 | this.$refs.hBsm && this.$refs.hBsm.forEach((item) => { | 248 | this.$refs.hBsm && |
237 | // item.style.borderColor = this.borderColor | 249 | this.$refs.hBsm.forEach((item) => { |
238 | item.style.backgroundColor = '#fff'; | 250 | // item.style.borderColor = this.borderColor |
239 | // item.style.border = `1px solid ${this.borderColor}` | 251 | item.style.backgroundColor = "#fff"; |
240 | }); | 252 | // item.style.border = `1px solid ${this.borderColor}` |
253 | }); | ||
241 | }, | 254 | }, |
242 | //清除选中 | 255 | //清除选中 |
243 | clearChoosed(){ | 256 | clearChoosed() { |
244 | //清除选中户 | 257 | //清除选中户 |
245 | this.zdySelectAll(false) | 258 | this.zdySelectAll(false); |
246 | //清除选中层 | 259 | //清除选中层 |
247 | this.cbsmList = []; | 260 | this.cbsmList = []; |
248 | this.$refs.cBsm && this.$refs.cBsm.forEach((item)=>{ | 261 | this.$refs.cBsm && |
249 | item.className = 'floor' | 262 | this.$refs.cBsm.forEach((item) => { |
250 | }) | 263 | item.className = "floor"; |
264 | }); | ||
251 | }, | 265 | }, |
252 | }, | 266 | }, |
253 | watch: { | 267 | watch: { |
254 | selectAll: { | 268 | selectAll: { |
255 | handler(val) { | 269 | handler(val) { |
256 | this.zdySelectAll(val.selectAll); | 270 | this.zdySelectAll(val.selectAll); |
257 | val.cancelChoosed && this.clearChoosed() | 271 | val.cancelChoosed && this.clearChoosed(); |
258 | }, | 272 | }, |
259 | immediate: true, | 273 | immediate: true, |
260 | deep: true, | 274 | deep: true, |
261 | }, | 275 | }, |
262 | hbsmList(val){ | 276 | hbsmList(val) { |
263 | let list = [] | 277 | let list = []; |
264 | val.length && val.forEach((i)=>{ | 278 | val.length && |
265 | this.ch.forEach((c) => { | 279 | val.forEach((i) => { |
266 | c.hs.forEach((h) => { | 280 | this.ch.forEach((c) => { |
267 | if (i == h.bsm) { | 281 | c.hs.forEach((h) => { |
268 | list.push( | 282 | if (i == h.bsm) { |
269 | { | 283 | list.push({ |
270 | bdcdyh:h.bdcdyh, | 284 | bdcdyh: h.bdcdyh, |
271 | bsm:h.bsm, | 285 | bsm: h.bsm, |
272 | dyhbsm:h.dyhbsm, | 286 | dyhbsm: h.dyhbsm, |
273 | bdcdyid:h.dyhbsm, | 287 | bdcdyid: h.dyhbsm, |
274 | zl: h.zl, | 288 | zl: h.zl, |
275 | bdcdylx:'7', | 289 | bdcdylx: "7", |
276 | flag:this.compFlag | 290 | flag: this.compFlag, |
277 | } | 291 | }); |
278 | ) | 292 | } |
279 | } | 293 | }); |
280 | }); | 294 | }); |
281 | }); | 295 | }); |
282 | }) | 296 | this.getBsmList(list, this.compFlag); |
283 | this.getBsmList(list,this.compFlag) | ||
284 | }, | 297 | }, |
285 | changeChoosedObj: { | 298 | changeChoosedObj: { |
286 | handler(val) { | 299 | handler(val) { |
287 | this.borderColor = 'rgb(230, 230, 230)'; | 300 | this.borderColor = "rgb(230, 230, 230)"; |
288 | if (val.bsms.length) { | 301 | if (val.bsms.length) { |
289 | //清除选中户 | 302 | //清除选中户 |
290 | this.zdySelectAll(false,true) | 303 | this.zdySelectAll(false, true); |
291 | this.$refs.hBsm.forEach((item) => { | 304 | this.$refs.hBsm.forEach((item) => { |
292 | val.bsms.forEach((i,ind) => { | 305 | val.bsms.forEach((i, ind) => { |
293 | if (item.dataset.bsm == i) { | 306 | if (item.dataset.bsm == i) { |
294 | if (ind == 0) { | 307 | if (ind == 0) { |
295 | //定位到第一个户所在位置 | 308 | //定位到第一个户所在位置 |
296 | window.lpbContent.$refs.lpbContent.scrollTop = item.offsetTop; | 309 | window.lpbContent.$refs.lpbContent.scrollTop = item.offsetTop; |
297 | window.lpbContent.$refs.lpbContent.scrollLeft = item.offsetLeft; | 310 | window.lpbContent.$refs.lpbContent.scrollLeft = |
311 | item.offsetLeft; | ||
298 | } | 312 | } |
299 | // item.style.border = '1px solid '+ val.color; | 313 | // item.style.border = '1px solid '+ val.color; |
300 | // 背景色高亮 | 314 | // 背景色高亮 |
301 | item.style.backgroundColor = val.color; | 315 | item.style.backgroundColor = val.color; |
302 | } | 316 | } |
303 | }); | 317 | }); |
304 | }); | 318 | }); |
... | @@ -306,95 +320,95 @@ export default { | ... | @@ -306,95 +320,95 @@ export default { |
306 | }, | 320 | }, |
307 | immediate: true, | 321 | immediate: true, |
308 | deep: true, | 322 | deep: true, |
309 | } | 323 | }, |
310 | }, | 324 | }, |
311 | }; | 325 | }; |
312 | </script> | 326 | </script> |
313 | <style lang="scss" scoped> | 327 | <style lang="scss" scoped> |
314 | .ch-wrap { | 328 | .ch-wrap { |
315 | display: flex; | 329 | display: flex; |
316 | flex-direction: column-reverse; | 330 | flex-direction: column-reverse; |
317 | .chTable { | 331 | .chTable { |
318 | // margin-left: -1px; | 332 | // margin-left: -1px; |
319 | border-color: #e4ebf4 !important; | 333 | border-color: #e4ebf4 !important; |
320 | border-collapse: collapse; | 334 | border-collapse: collapse; |
321 | border-spacing: 0; | 335 | border-spacing: 0; |
322 | // position: relative; | 336 | // position: relative; |
323 | tr { | 337 | tr { |
338 | .floor { | ||
339 | min-width: 56px; | ||
340 | background: #e8f2ff; | ||
341 | border: 1px solid #acbae8; | ||
342 | } | ||
343 | &:first-child { | ||
324 | .floor { | 344 | .floor { |
325 | min-width: 56px; | 345 | border-radius: 4px 0px 0px 1px; |
326 | background: #e8f2ff; | ||
327 | border: 1px solid #acbae8; | ||
328 | } | 346 | } |
329 | &:first-child { | 347 | } |
330 | .floor { | 348 | td { |
331 | border-radius: 4px 0px 0px 1px; | 349 | min-width: 138px; |
332 | } | 350 | height: 64px; |
351 | line-height: 64px; | ||
352 | text-align: center; | ||
353 | cursor: pointer; | ||
354 | position: relative; | ||
355 | .hqszt { | ||
356 | display: inline-block; | ||
357 | width: 16px; | ||
358 | height: 16px; | ||
359 | font-size: 12px; | ||
360 | line-height: 16px; | ||
361 | position: absolute; | ||
362 | left: 6px; | ||
363 | top: 6px; | ||
364 | border: 1px solid; | ||
365 | border-radius: 3px 0px 3px 0px; | ||
366 | } | ||
367 | .lin { | ||
368 | color: #f7b500; | ||
369 | border-color: #f7b500; | ||
370 | } | ||
371 | .zheng { | ||
372 | color: #1ad6e1; | ||
373 | border-color: #1ad6e1; | ||
374 | } | ||
375 | .xian { | ||
376 | color: #45aefd; | ||
377 | border-color: #45aefd; | ||
333 | } | 378 | } |
334 | td { | 379 | .dyzt { |
335 | min-width: 138px; | 380 | user-select: none; |
336 | height: 64px; | 381 | width: 138px; |
337 | line-height: 64px; | 382 | height: 18px; |
338 | text-align: center; | 383 | position: absolute; |
339 | cursor: pointer; | 384 | bottom: 28px; |
340 | position: relative; | 385 | box-sizing: border-box; |
341 | .hqszt { | 386 | padding: 0 6px; |
387 | li { | ||
342 | display: inline-block; | 388 | display: inline-block; |
343 | width: 16px; | 389 | width: 18px; |
344 | height: 16px; | 390 | height: 18px; |
345 | font-size: 12px; | 391 | font-size: 12px; |
346 | line-height: 16px; | 392 | line-height: 18px; |
347 | position: absolute; | 393 | color: #ffffff; |
348 | left: 6px; | ||
349 | top: 6px; | ||
350 | border: 1px solid; | 394 | border: 1px solid; |
351 | border-radius: 3px 0px 3px 0px; | 395 | border-radius: 9px; |
352 | } | ||
353 | .lin { | ||
354 | color: #f7b500; | ||
355 | border-color: #f7b500; | ||
356 | } | ||
357 | .zheng { | ||
358 | color: #1ad6e1; | ||
359 | border-color: #1ad6e1; | ||
360 | } | ||
361 | .xian { | ||
362 | color: #45aefd; | ||
363 | border-color: #45aefd; | ||
364 | } | 396 | } |
365 | .dyzt { | ||
366 | user-select: none; | ||
367 | width: 138px; | ||
368 | height: 18px; | ||
369 | position: absolute; | ||
370 | bottom: 28px; | ||
371 | box-sizing: border-box; | ||
372 | padding: 0 6px; | ||
373 | li { | ||
374 | display: inline-block; | ||
375 | width: 18px; | ||
376 | height: 18px; | ||
377 | font-size: 12px; | ||
378 | line-height: 18px; | ||
379 | color: #ffffff; | ||
380 | border: 1px solid; | ||
381 | border-radius: 9px; | ||
382 | } | ||
383 | } | ||
384 | } | ||
385 | .tdSelect { | ||
386 | border: 1px solid; | ||
387 | border-color: #5a78de !important; | ||
388 | background-image: url("./images/tdSelect.png"); | ||
389 | background-repeat: no-repeat; | ||
390 | background-position: right top; | ||
391 | background-size: 30px; | ||
392 | } | ||
393 | .hasBorder { | ||
394 | border-width: 1px; | ||
395 | border-style: solid; | ||
396 | } | 397 | } |
397 | } | 398 | } |
399 | .tdSelect { | ||
400 | border: 1px solid; | ||
401 | border-color: #5a78de !important; | ||
402 | background-image: url("./images/tdSelect.png"); | ||
403 | background-repeat: no-repeat; | ||
404 | background-position: right top; | ||
405 | background-size: 30px; | ||
406 | } | ||
407 | .hasBorder { | ||
408 | border-width: 1px; | ||
409 | border-style: solid; | ||
410 | } | ||
398 | } | 411 | } |
399 | } | 412 | } |
413 | } | ||
400 | </style> | 414 | </style> | ... | ... |
-
Please register or sign in to post a comment