Merge remote-tracking branch 'origin/master'
Showing
2 changed files
with
55 additions
and
7 deletions
... | @@ -56,13 +56,13 @@ | ... | @@ -56,13 +56,13 @@ |
56 | <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i> | 56 | <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i> |
57 | <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i> | 57 | <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i> |
58 | </div> | 58 | </div> |
59 | <div class="dyzt"> | 59 | <div :class="selectedZt == 'dyzt'? 'dyzt selectedZt':'dyzt'" @click="selectedZt='dyzt'"> |
60 | <span>单元状态</span> | 60 | <span>单元状态</span> |
61 | </div> | 61 | </div> |
62 | <div class="fwxz"> | 62 | <div :class="selectedZt == 'fwxz'? 'fwxz selectedZt':'fwxz'" @click="selectedZt='fwxz'"> |
63 | <span>房屋性质</span> | 63 | <span>房屋性质</span> |
64 | </div> | 64 | </div> |
65 | <div class="fwyt"> | 65 | <div :class="selectedZt == 'fwyt'? 'fwyt selectedZt':'fwyt'" @click="selectedZt='fwyt'"> |
66 | <span>房屋用途</span> | 66 | <span>房屋用途</span> |
67 | </div> | 67 | </div> |
68 | </div> | 68 | </div> |
... | @@ -70,7 +70,7 @@ | ... | @@ -70,7 +70,7 @@ |
70 | class="legendTable-wrap" | 70 | class="legendTable-wrap" |
71 | :style="{ width: legendToggleFlag ? '204px' : '0' }" | 71 | :style="{ width: legendToggleFlag ? '204px' : '0' }" |
72 | > | 72 | > |
73 | <table class="legendTable" cellspacing="1" cellpadding="1" border="1"> | 73 | <table class="legendTable" v-show="selectedZt == 'dyzt'" cellspacing="1" cellpadding="1" border="1"> |
74 | <tr> | 74 | <tr> |
75 | <th>状态</th> | 75 | <th>状态</th> |
76 | <th>套数</th> | 76 | <th>套数</th> |
... | @@ -85,6 +85,36 @@ | ... | @@ -85,6 +85,36 @@ |
85 | <td>{{ item.mj }}</td> | 85 | <td>{{ item.mj }}</td> |
86 | </tr> | 86 | </tr> |
87 | </table> | 87 | </table> |
88 | <table class="legendTable" v-show="selectedZt == 'fwxz'" cellspacing="1" cellpadding="1" border="1"> | ||
89 | <tr> | ||
90 | <th>性质</th> | ||
91 | <th>套数</th> | ||
92 | <th>面积</th> | ||
93 | </tr> | ||
94 | <tr v-for="(item, index) in legendList" :key="index" class="cp" @click="handleChoosedH"> | ||
95 | <td> | ||
96 | <i class="el-icon-star-on" :style="{ color: item.color }"></i | ||
97 | >{{ item.name }} | ||
98 | </td> | ||
99 | <td>{{ item.ts }}</td> | ||
100 | <td>{{ item.mj }}</td> | ||
101 | </tr> | ||
102 | </table> | ||
103 | <table class="legendTable" v-show="selectedZt == 'fwyt'" cellspacing="1" cellpadding="1" border="1"> | ||
104 | <tr> | ||
105 | <th>用途</th> | ||
106 | <th>套数</th> | ||
107 | <th>面积</th> | ||
108 | </tr> | ||
109 | <tr v-for="(item, index) in legendList" :key="index" class="cp" @click="handleChoosedH"> | ||
110 | <td> | ||
111 | <i class="el-icon-star-on" :style="{ color: item.color }"></i | ||
112 | >{{ item.name }} | ||
113 | </td> | ||
114 | <td>{{ item.ts }}</td> | ||
115 | <td>{{ item.mj }}</td> | ||
116 | </tr> | ||
117 | </table> | ||
88 | </div> | 118 | </div> |
89 | </div> | 119 | </div> |
90 | </div> | 120 | </div> |
... | @@ -164,6 +194,7 @@ export default { | ... | @@ -164,6 +194,7 @@ export default { |
164 | menuType: "", | 194 | menuType: "", |
165 | treeData: {}, | 195 | treeData: {}, |
166 | inputWidth:74, | 196 | inputWidth:74, |
197 | selectedZt:'dyzt', //图例选中项,默认选中单元状态 | ||
167 | legendList: [ | 198 | legendList: [ |
168 | { | 199 | { |
169 | name: "未确权", | 200 | name: "未确权", |
... | @@ -384,6 +415,8 @@ export default { | ... | @@ -384,6 +415,8 @@ export default { |
384 | handleChoosedH(){ | 415 | handleChoosedH(){ |
385 | //清除选中户 | 416 | //清除选中户 |
386 | this.$refs.lpbContent.clearChoosedH() | 417 | this.$refs.lpbContent.clearChoosedH() |
418 | //给hBsmList传值 | ||
419 | // this.$refs.lpbContent.choosedList=["0a66bc775dcec26385f9124cc0fd8656", "58cafdbee129bb412527f674ef9267ae", "4bbca678fa56d5ab97b8a62c7cb54898", "ecfd72e9a31a03ba0ab4e46faba2b51b", "049033ea9d244b4b5ea75521b6862239", "013352d8a001a1d5f790296b6843627b", "ed8e3f0e2b2682cf76b4d58b9a74e49c", "37cc53acaf2c3bb92be4b9adf06d94c9", "f5a5e14ce08c26056aca5861f56e5cf6", "11eeaaa5c9f5f1231c69d3b958d05568", "421978023a36d4920dbb86300cc52dc9", "e97f2af2588cc0e41ffb6b203df617c9", "7210987d94350472dca10d4ad71fffc5", "6eb1b50edce538a4c63574e9e28fedce", "43c5fecd7623ceabc37844e8a4722603", "c361ccfcd3da9f7288110c6fa202cb96", "2321512f6f8d0ec9f570c6eec9a892fe", "ea08fb234cd908c89a0d21c085dadb2f", "be71f7f0ec926e1850d3baec8817cdbd", "6f695d6b7ecb97f7ff17f22dbe86b93c", "4ee1604b2629e6797d3096c20229223b"] | ||
387 | } | 420 | } |
388 | }, | 421 | }, |
389 | computed: { | 422 | computed: { |
... | @@ -507,8 +540,7 @@ export default { | ... | @@ -507,8 +540,7 @@ export default { |
507 | .dyzt, | 540 | .dyzt, |
508 | .fwxz, | 541 | .fwxz, |
509 | .fwyt { | 542 | .fwyt { |
510 | background-color: #0091FF; | 543 | cursor: pointer; |
511 | color: #fff; | ||
512 | border-bottom: 1px solid #e6e6e6; | 544 | border-bottom: 1px solid #e6e6e6; |
513 | span { | 545 | span { |
514 | text-align: center; | 546 | text-align: center; |
... | @@ -519,6 +551,10 @@ export default { | ... | @@ -519,6 +551,10 @@ export default { |
519 | letter-spacing: 2px; | 551 | letter-spacing: 2px; |
520 | } | 552 | } |
521 | } | 553 | } |
554 | .selectedZt{ | ||
555 | background-color: #0091FF; | ||
556 | color: #fff; | ||
557 | } | ||
522 | } | 558 | } |
523 | .legendTable-wrap { | 559 | .legendTable-wrap { |
524 | transition: 0.5s; | 560 | transition: 0.5s; | ... | ... |
... | @@ -107,7 +107,9 @@ export default { | ... | @@ -107,7 +107,9 @@ export default { |
107 | loading:true, | 107 | loading:true, |
108 | hbsmList:[], | 108 | hbsmList:[], |
109 | time:null, //区分单双击事件的定时器 | 109 | time:null, //区分单双击事件的定时器 |
110 | searchNum:Math.random() | 110 | searchNum:Math.random(), |
111 | //接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList | ||
112 | choosedList:[] | ||
111 | }; | 113 | }; |
112 | }, | 114 | }, |
113 | created() { | 115 | created() { |
... | @@ -287,6 +289,16 @@ export default { | ... | @@ -287,6 +289,16 @@ export default { |
287 | } | 289 | } |
288 | }) | 290 | }) |
289 | }) | 291 | }) |
292 | }, | ||
293 | //父组件中选择单元状态改变choosedList | ||
294 | choosedList(n){ | ||
295 | this.$refs.hBsm.forEach(item=>{ | ||
296 | this.choosedList.forEach(i=>{ | ||
297 | if(item.dataset.bsm == i){ | ||
298 | item.className = 'tdSelect' | ||
299 | } | ||
300 | }) | ||
301 | }) | ||
290 | } | 302 | } |
291 | }, | 303 | }, |
292 | }; | 304 | }; | ... | ... |
-
Please register or sign in to post a comment