<!--主题菜单选项-->
|
<template>
|
<div class="menu-special">
|
<div style="color: white;z-index: 1000;display:inline-flex;">
|
<img class="menu-special-toggle" src="/assets/images/menu/earth.png"
|
style=""
|
@click="toggle()">
|
<div id="menu-special-context" class="menu-special-context">
|
<el-checkbox-button v-show="isShow" class="menu-special-item" v-model="specialAll.check" :checked="specialAll.checked" @change="checkedSpecialChangeAll(specialAll)">
|
<div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="specialAll.icon" ></div>
|
{{ specialAll.name }}</el-checkbox-button>
|
|
<el-checkbox-group :indeterminate="isIndeterminate" v-show="isShow" v-model="checkedList" size="medium" @change="checkedGroupSpecialChange">
|
<el-checkbox-button class="menu-special-item" v-for="item in specialList" :label="item.name" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
|
<div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="item.icon" ></div>
|
{{item.name}}</el-checkbox-button>
|
</el-checkbox-group>
|
<!-- <ul class="menu-special-item" v-for="item in SpecialList" :key="item.id">-->
|
<!-- <li style="display: inline-flex;vertical-align: middle">-->
|
<!-- <div style="height: 1rem;width: 1rem;"> <img :src="item.icon" ></div>-->
|
|
<!-- <a>{{ item.name }}</a>-->
|
<!-- </li>-->
|
<!-- </ul>-->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'MenuTopic',
|
data () {
|
return {
|
isShow: false,
|
isIndeterminate: true,
|
checkedList: [],
|
specialAll: {
|
name: '全选',
|
check: false,
|
icon: '/assets/images/menu/special.png'
|
},
|
specialList: [{
|
name: '污染源',
|
id: 1,
|
check: false,
|
icon: '/assets/images/menu/special.png'
|
}, {
|
name: '废水监测',
|
id: 2,
|
checked: false,
|
icon: '/assets/images/menu/special.png'
|
}, {
|
name: '废气监测',
|
id: 3,
|
checked: false,
|
icon: '/assets/images/menu/special.png'
|
}, {
|
name: '固废管理',
|
id: 4,
|
checked: false,
|
icon: '/assets/images/menu/special.png'
|
}, {
|
name: '环境风险',
|
id: 5,
|
checked: false,
|
icon: '/assets/images/menu/special.png'
|
}, {
|
name: '土壤及地下水',
|
id: 6,
|
checked: false,
|
icon: '/assets/images/menu/special.png'
|
}, {
|
name: '污雨水管网',
|
id: 7,
|
checked: false,
|
icon: '/assets/images/menu/special.png'
|
}, {
|
name: '预警报警',
|
id: 8,
|
checked: false,
|
icon: '/assets/images/menu/special.png'
|
}, {
|
name: '指标统计',
|
id: 9,
|
checked: false,
|
icon: '/assets/images/menu/special.png'
|
}, {
|
name: '应急地图',
|
id: 10,
|
checked: false,
|
icon: '/assets/images/menu/special.png'
|
}]
|
}
|
},
|
computed: {
|
},
|
methods: {
|
toggle () {
|
this.isShow = !this.isShow
|
// console.log('toggle')
|
// const el = document.getElementById('menu-special-context')
|
// console.log(el.clientWidth + ':' + el.offsetHeight)
|
// if (el.clientWidth > 0) {
|
// el.style.width = '0'
|
// } else {
|
// el.style.width = 'auto'
|
// }
|
},
|
checkedGroupSpecialChange (val) {
|
const len = val.length
|
this.specialAll.check = len === this.specialList.length
|
this.isIndeterminate = len > 0 && len < this.specialList.length
|
},
|
checkedSpecialChangeAll (val) {
|
// this.checkedCities = val ? this.cities.map(item => item.id) : []
|
// this.isIndeterminate = false
|
// let list = []
|
// if (val === true) {
|
// list = this.specialList.map(item => item.name)
|
// }
|
|
this.checkedList = val.check ? this.specialList.map(item => item.name) : []
|
this.isIndeterminate = false
|
},
|
checkedSpecialChange (item) {
|
console.log(item)
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="less" >
|
@import '@assets/css/map/_map-variable';
|
.menu-special {
|
position: absolute;
|
left: 1rem;
|
bottom: 1rem;
|
|
z-index: 1000;
|
font-family: 'Arial Normal', 'Arial';
|
font-weight: 400;
|
font-style: normal;
|
.menu-special-toggle{
|
width: 2rem;height: 2rem;background-size: 100% 100%;padding-right: 1rem;display: inline; transition: all .6s;
|
|
}
|
.menu-special-toggle:hover{
|
cursor: pointer;
|
transform: scale(1.2)
|
}
|
|
.menu-special-context {
|
|
display: inline-flex;
|
transition: all 1s;
|
|
li {
|
//display: inline-flex;
|
|
line-height: 2rem;
|
height: 2rem;
|
img {
|
font-size: 0;
|
height: 100%;
|
width: 100%;
|
}
|
}
|
.menu-special-item {
|
background: url('/assets/images/menu/menu-background.svg') no-repeat;
|
background-size: 100% 100%;
|
padding: 0 1rem 0 1rem;
|
line-height: 2rem;
|
height: 2rem;
|
transition: all .5s;
|
}
|
.menu-special-item :hover {
|
text-decoration: underline;
|
cursor: pointer;
|
|
}
|
.menu-special-item:active{
|
color: @color-highlight;
|
}
|
}
|
.el-checkbox-button__inner{
|
padding: 0;
|
background: transparent;
|
//border: 1px solid @color;
|
color: @color;
|
line-height: 1rem;
|
box-shadow: none;
|
border:none;
|
|
}
|
.menu-special-item:hover{
|
transform: scale(1.1)
|
}
|
.el-checkbox-button__inner:hover{
|
|
}
|
.el-checkbox-button.is-checked .el-checkbox-button__inner {
|
color: @color-highlight;
|
background-color: transparent;
|
//border-color: transparent;
|
box-shadow: none;
|
border:none;
|
}
|
.el-checkbox-button:first-child .el-checkbox-button__inner{
|
border-left: none;
|
}
|
.el-checkbox-button--medium .el-checkbox-button__inner{
|
padding:0;
|
}
|
.el-checkbox-button__inner:hover{
|
color: @color-highlight;
|
}
|
.menu-special .menu-special-context .menu-special-item:hover{
|
|
}
|
}
|
</style>
|
