<template>
|
<div class="divtool">
|
<div class="item1">
|
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
</div>
|
<div class="item3">
|
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
<el-checkbox class="checkitem" v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import utils from "../../unit/map";
|
export default {
|
name: "seltool",
|
data(){
|
return {
|
checkAll: false,
|
checkedCities: ['停车站', '修车站', '充电站', '车辆保养站'],
|
cities: ['停车站', '修车站', '充电站', '车辆保养站'],
|
isIndeterminate: true
|
}
|
},
|
methods: {
|
handleCheckAllChange(val) {
|
this.checkedCities = val ? this.cities : [];
|
this.isIndeterminate = false;
|
utils.queryChangZhanAttrByType(this.checkedCities.toString())
|
},
|
handleCheckedCitiesChange(value) {
|
let checkedCount = value.length;
|
this.checkAll = checkedCount === this.cities.length;
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
utils.queryChangZhanAttrByType(value.toString())
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.divtool{
|
display: flex;
|
position: absolute;
|
width: 156px;
|
height: 180px;
|
top: 200px;
|
left: 300px;
|
color: #f3f3f3;
|
opacity: 0.8;
|
background: linear-gradient(180deg,#06203f, #08141c);
|
border: 2px solid #2a488a;
|
flex-direction: column;
|
justify-content: center;
|
label {
|
padding-left: 20px;
|
height: 30px;
|
opacity: 1;
|
text-align: center;
|
color: #ffffff;
|
}
|
.el-checkbox__label {
|
opacity: 0.8;
|
font-size: 12px;
|
text-align: center;
|
color: #ffffff;
|
}
|
.el-checkbox__input .is-checked {
|
opacity: 0.8;
|
font-size: 12px;
|
text-align: center;
|
color: #ffffff;
|
}
|
}
|
</style>
|
