Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
6a6dfe1d by 杨威
Options

右侧图例交互

1 parent d572297f
Inline Side-by-side
Showing 2 changed files with 56 additions and 8 deletions
......@@ -56,13 +56,13 @@
<i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
<i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
</div>
<div class="dyzt">
<div :class="selectedZt == 'dyzt'? 'dyzt selectedZt':'dyzt'" @click="selectedZt='dyzt'">
<span>单元状态</span>
</div>
<div class="fwxz">
<div :class="selectedZt == 'fwxz'? 'fwxz selectedZt':'fwxz'" @click="selectedZt='fwxz'">
<span>房屋性质</span>
</div>
<div class="fwyt">
<div :class="selectedZt == 'fwyt'? 'fwyt selectedZt':'fwyt'" @click="selectedZt='fwyt'">
<span>房屋用途</span>
</div>
</div>
......@@ -70,7 +70,7 @@
class="legendTable-wrap"
: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>
<th>状态</th>
<th>套数</th>
......@@ -85,6 +85,36 @@
<td>{{ item.mj }}</td>
</tr>
</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>
......@@ -164,6 +194,7 @@ export default {
menuType: "",
treeData: {},
inputWidth:74,
selectedZt:'dyzt', //图例选中项，默认选中单元状态
legendList: [
{
name: "未确权",
......@@ -383,7 +414,9 @@ export default {
//选中房屋状态
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: {
......@@ -507,8 +540,7 @@ export default {
.dyzt,
.fwxz,
.fwyt {
background-color: #0091FF;
color: #fff;
cursor: pointer;
border-bottom: 1px solid #e6e6e6;
span {
text-align: center;
......@@ -519,6 +551,10 @@ export default {
letter-spacing: 2px;
}
}
.selectedZt{
background-color: #0091FF;
color: #fff;
}
}
.legendTable-wrap {
transition: 0.5s;
......
......@@ -107,7 +107,9 @@ export default {
loading:true,
hbsmList:[],
time:null, //区分单双击事件的定时器
searchNum:Math.random()
searchNum:Math.random(),
//接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList
choosedList:[]
};
},
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'
}
})
})
}
},
};
......