<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: "seltoolcl",
|
data(){
|
return {
|
checkAll: false,
|
checkedCities: ['1分公司', '2分公司', '3分公司', '4分公司', '总公司', '新能源公司'],
|
cities: ['1分公司', '2分公司', '3分公司', '4分公司', '总公司', '新能源公司'],
|
isIndeterminate: true
|
}
|
},
|
created() {
|
this.getFenGongSiAll()
|
},
|
methods: {
|
getFenGongSiAll(){
|
this.$axios.get(this.$Interface.mapResource.getFenGongSiAll, {}).then((res) => {
|
// console.log("---------",res)
|
this.checkedCities = []
|
this.cities = []
|
res.data.map(item => {
|
this.checkedCities.push(item.companyName)
|
this.cities.push(item.companyName)
|
})
|
})
|
},
|
handleCheckAllChange(val) {
|
this.checkedCities = val ? this.cities : [];
|
this.isIndeterminate = false;
|
utils.queryCheLiangAttrByType(this.checkedCities.toString())
|
},
|
handleCheckedCitiesChange(value) {
|
let checkedCount = value.length;
|
this.checkAll = checkedCount === this.cities.length;
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
utils.queryCheLiangAttrByType(value.toString())
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.divtool{
|
display: flex;
|
position: absolute;
|
width: 156px;
|
top: 200px;
|
left: 300px;
|
color: #f3f3f3;
|
opacity: 0.8;
|
padding-top: 10px;
|
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>
|
