右侧图例交互

@@ -56,13 +56,13 @@
 						<i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
 						<i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
 						<i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
 						<i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
 					</div>
 					</div>
-					<div class="dyzt">
+					<div :class="selectedZt == 'dyzt'? 'dyzt selectedZt':'dyzt'" @click="selectedZt='dyzt'">
 						<span>单元状态</span>
 						<span>单元状态</span>
 					</div>
 					</div>
-					<div class="fwxz">
+					<div :class="selectedZt == 'fwxz'? 'fwxz selectedZt':'fwxz'" @click="selectedZt='fwxz'">
 						<span>房屋性质</span>
 						<span>房屋性质</span>
 					</div>
 					</div>
-					<div class="fwyt">
+					<div :class="selectedZt == 'fwyt'? 'fwyt selectedZt':'fwyt'" @click="selectedZt='fwyt'">
 						<span>房屋用途</span>
 						<span>房屋用途</span>
 					</div>
 					</div>
 				</div>
 				</div>
@@ -70,7 +70,7 @@
 					class="legendTable-wrap"
 					class="legendTable-wrap"
 					:style="{ width: legendToggleFlag ? '204px' : '0' }"
 					:style="{ width: legendToggleFlag ? '204px' : '0' }"
 				>
 				>
-					<table class="legendTable" cellspacing="1" cellpadding="1" border="1">
+					<table class="legendTable" v-show="selectedZt == 'dyzt'" cellspacing="1" cellpadding="1" border="1">
 						<tr>
 						<tr>
 							<th>状态</th>
 							<th>状态</th>
 							<th>套数</th>
 							<th>套数</th>
@@ -85,6 +85,36 @@
 							<td>{{ item.mj }}</td>
 							<td>{{ item.mj }}</td>
 						</tr>
 						</tr>
 					</table>
 					</table>
+					<table class="legendTable" v-show="selectedZt == 'fwxz'" cellspacing="1" cellpadding="1" border="1">
+						<tr>
+							<th>性质</th>
+							<th>套数</th>
+							<th>面积</th>
+						</tr>
+						<tr v-for="(item, index) in legendList" :key="index" class="cp" @click="handleChoosedH">
+							<td>
+								<i class="el-icon-star-on" :style="{ color: item.color }"></i
+								>{{ item.name }}
+							</td>
+							<td>{{ item.ts }}</td>
+							<td>{{ item.mj }}</td>
+						</tr>
+					</table>
+					<table class="legendTable" v-show="selectedZt == 'fwyt'" cellspacing="1" cellpadding="1" border="1">
+						<tr>
+							<th>用途</th>
+							<th>套数</th>
+							<th>面积</th>
+						</tr>
+						<tr v-for="(item, index) in legendList" :key="index" class="cp" @click="handleChoosedH">
+							<td>
+								<i class="el-icon-star-on" :style="{ color: item.color }"></i
+								>{{ item.name }}
+							</td>
+							<td>{{ item.ts }}</td>
+							<td>{{ item.mj }}</td>
+						</tr>
+					</table>
 				</div>
 				</div>
 			</div>
 			</div>
 		</div>
 		</div>
@@ -164,6 +194,7 @@ export default {
 			menuType: "",
 			menuType: "",
 			treeData: {},
 			treeData: {},
 			inputWidth:74,
 			inputWidth:74,
+			selectedZt:'dyzt', //图例选中项，默认选中单元状态
 			legendList: [
 			legendList: [
 				{
 				{
 					name: "未确权",
 					name: "未确权",
@@ -383,7 +414,9 @@ export default {
 		//选中房屋状态
 		//选中房屋状态
 		handleChoosedH(){
 		handleChoosedH(){
 			//清除选中户
 			//清除选中户
-			this.$refs.lpbContent.clearChoosedH()
+			// this.$refs.lpbContent.clearChoosedH()
+			//给hBsmList传值
+			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"]
 		}
 		}
 	},
 	},
 	computed: {
 	computed: {
@@ -507,8 +540,7 @@ export default {
 				.dyzt,
 				.dyzt,
 				.fwxz,
 				.fwxz,
 				.fwyt {
 				.fwyt {
-					background-color: #0091FF;
-					color: #fff;
+					cursor: pointer;
 					border-bottom: 1px solid #e6e6e6;
 					border-bottom: 1px solid #e6e6e6;
 					span {
 					span {
 						text-align: center;
 						text-align: center;
@@ -519,6 +551,10 @@ export default {
 						letter-spacing: 2px;
 						letter-spacing: 2px;
 					}
 					}
 				}
 				}
+				.selectedZt{
+					background-color: #0091FF;
+					color: #fff;
+				}
 			}
 			}
 			.legendTable-wrap {
 			.legendTable-wrap {
 				transition: 0.5s;
 				transition: 0.5s;

@@ -107,7 +107,9 @@ export default {
 			loading:true,
 			loading:true,
 			hbsmList:[],
 			hbsmList:[],
 			time:null, //区分单双击事件的定时器
 			time:null, //区分单双击事件的定时器
-			searchNum:Math.random()
+			searchNum:Math.random(),
+			//接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList
+			choosedList:[]
 		};
 		};
 	},
 	},
 	created() {
 	created() {
@@ -287,6 +289,16 @@ export default {
 					}
 					}
 				})
 				})
 			})
 			})
+		},
+		//父组件中选择单元状态改变choosedList
+		choosedList(n){
+			this.$refs.hBsm.forEach(item=>{
+					this.choosedList.forEach(i=>{
+						if(item.dataset.bsm == i){
+							item.className = 'tdSelect'
+						}
+					})
+			})
 		}
 		}
 	},
 	},
 };
 };