<template>
|
<div class="fun-button-container">
|
<template v-for="(item, index) in tooltipList" :key="index">
|
<el-popover
|
effect="dark"
|
placement="right"
|
:trigger="item.isClick ? 'click' : 'hover'"
|
popper-class="function-popover"
|
v-if="item.show"
|
>
|
<div>
|
<div>{{ item.label[Number(item.isSelected)] }}</div>
|
</div>
|
<template #reference v-if="item.show">
|
<div
|
:class="['currency-box', { 'actived-blue': item.isSelected && item.isSelectColor && item.showActive }]"
|
@click="item.event(item, index)"
|
>
|
<img :src="item.icon[Number(item.isSelected)]" alt="_icon" />
|
</div>
|
</template>
|
</el-popover>
|
</template>
|
</div>
|
|
<BoxSelect v-if="isShowBoxSelect" @upDateBoxSelect="upDateBoxSelect" />
|
<DrawPolygon v-if="isShowDrawPolygon" @upDateDrawState="upDateDrawState" />
|
</template>
|
|
<script setup>
|
import { useStore } from 'vuex'
|
import drawPng from '@/assets/images/home/territory/draw.png'
|
import noDrawPng from '@/assets/images/home/territory/no-draw.png'
|
import boxSelectPng from '@/assets/images/home/territory/box-select.png'
|
|
import BoxSelect from './BoxSelect.vue'
|
import DrawPolygon from './DrawPolygon.vue'
|
|
const isBoxSelect = defineModel('isBoxSelect')
|
const isDrawPolygon = defineModel('isDrawPolygon')
|
const isShowBoxSelect = ref(false)
|
const isShowDrawPolygon = ref(false)
|
|
const isDrawPolygonSelect = ref(false)
|
|
watch(isBoxSelect, newVal => {
|
if (newVal === false) {
|
isShowBoxSelect.value = newVal
|
|
setBoxSelect(null, 1, newVal)
|
}
|
})
|
|
watch(isDrawPolygon, newVal => {
|
if (newVal === false) {
|
isShowDrawPolygon.value = newVal
|
|
setDrawState(null, 0, newVal)
|
}
|
})
|
|
const tooltipList = ref([
|
{
|
showActive: true,
|
label: ['重新绘制', '取消绘制'],
|
isSelectColor: true,
|
isSelected: false,
|
icon: [drawPng, noDrawPng],
|
event: setDrawState,
|
show: isDrawPolygon,
|
},
|
|
{
|
showActive: true,
|
label: ['框选', '取消框选'],
|
isSelectColor: true,
|
isSelected: false,
|
icon: [boxSelectPng, boxSelectPng],
|
event: setBoxSelect,
|
show: isBoxSelect,
|
},
|
])
|
|
function setDrawState(value, index, show = null) {
|
if (show != null) {
|
tooltipList.value[index].isSelected = show
|
} else {
|
tooltipList.value[index].isSelected = !tooltipList.value[index].isSelected
|
}
|
|
isShowDrawPolygon.value = tooltipList.value[index].isSelected
|
isDrawPolygonSelect.value = tooltipList.value[index].isSelected
|
}
|
|
function upDateDrawState(show = false) {
|
setDrawState(null, 0, show)
|
}
|
|
function setBoxSelect(value, index, show = null) {
|
if (show != null) {
|
tooltipList.value[index].isSelected = show
|
} else {
|
tooltipList.value[index].isSelected = !tooltipList.value[index].isSelected
|
}
|
|
isShowBoxSelect.value = tooltipList.value[index].isSelected
|
}
|
|
function upDateBoxSelect(show = false) {
|
setBoxSelect(null, 1, show)
|
}
|
|
defineExpose({
|
upDateDrawState,
|
isDrawPolygonSelect,
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.fun-button-container {
|
position: absolute;
|
top: 50px;
|
left: 23%;
|
transform: translate(100%, 0);
|
}
|
|
.currency-box {
|
width: 45px;
|
height: 45px;
|
border-radius: 3px;
|
background: url('@/assets/images/home/territory/newcon_box.png');
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
cursor: pointer;
|
margin-bottom: 8px;
|
pointer-events: all;
|
|
img {
|
width: 31px;
|
// height: 31px;
|
}
|
}
|
|
.actived-blue {
|
background-image: none;
|
// background-color: #409eff;
|
background-color: rgba(23, 124, 198, 0.7);
|
}
|
</style>
|
