<template>
|
<div class="footer" v-show="isHideBottomIcon">
|
<img
|
v-for="(item,index) in list.filter(i => !i.show)"
|
:class="item.className"
|
:src="item.active ? item.activeImg : item.img"
|
alt=""
|
@click="footAction(item,index)"
|
/>
|
</div>
|
<div class="intelligent-introduction-flying">
|
<img
|
class="orthophoto"
|
src="@/assets/images/intelligent-introduction-flying.png"
|
alt=""
|
@click="footAction(list[5],5)"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import img1 from '@/assets/images/home/footer/machine-nest.png'
|
import activeImg1 from '@/assets/images/home/footer/machine-nest1.png'
|
import img2 from '@/assets/images/home/footer/event.png'
|
import activeImg2 from '@/assets/images/home/footer/event1.png'
|
import img3 from '@/assets/images/home/footer/panorama.png'
|
import activeImg3 from '@/assets/images/home/footer/panorama1.png'
|
import img4 from '@/assets/images/home/footer/3D.png'
|
import activeImg4 from '@/assets/images/home/footer/3D1.png'
|
import img5 from '@/assets/images/home/footer/orthophoto.png'
|
import activeImg5 from '@/assets/images/home/footer/orthophoto1.png'
|
|
import { useMapAggregation } from '@/hooks/useMapAggregation/useMapAggregation'
|
import { useStore } from 'vuex'
|
import func from '@/utils/func'
|
import { ElMessage } from 'element-plus'
|
|
const store = useStore()
|
const footActiveIndex = computed(() => store.state.home.footActiveIndex)
|
const isHideBottomIcon = computed(() => store.state.common.isHideBottomIcon)
|
|
// 机巢聚合
|
const { init, removeAll } = useMapAggregation('device')
|
// 事件聚合
|
const { init: eventInit, removeAll: eventRemove } = useMapAggregation('event')
|
|
const list = ref([
|
{
|
name: 'jc',
|
img: img1,
|
activeImg: activeImg1,
|
active: true,
|
className: 'machine-nest',
|
init: init,
|
removeAll: removeAll,
|
},
|
{
|
name: 'sj',
|
img: img2,
|
activeImg: activeImg2,
|
active: false,
|
className: 'event',
|
init: eventInit,
|
removeAll: eventRemove,
|
},
|
{ name: 'qj', img: img3, activeImg: activeImg3, active: false, className: 'panorama',undeveloped:true },
|
{ name: 'sw', img: img4, activeImg: activeImg4, active: false, className: 'threeD',undeveloped:true },
|
{ name: 'zs', img: img5, activeImg: activeImg5, active: false, className: 'orthophoto',undeveloped:true },
|
{ name: 'zyjf', active: false, show: true },
|
])
|
|
const footAction = (toItem, index) => {
|
if (toItem.undeveloped) return ElMessage.warning('正在加急开发中...')
|
const fromItem = list.value.find(item => item.active) //上一个激活item
|
if (fromItem.name === toItem?.name) return //是重复点击
|
index !== undefined && store.commit('setFootActiveIndex', index) //是按钮点击得动作
|
fromItem?.removeAll?.()
|
nextTick(() => toItem?.init?.())
|
list.value = list.value.map(item => ({ ...item, active: item.name === toItem?.name }))
|
if (index === 5) {
|
// 相关图标不显示
|
store.commit('setHideBottomIcon', false)
|
}
|
}
|
|
watch(
|
footActiveIndex,
|
val => {
|
footAction(list.value[val])
|
},
|
{ deep: true }
|
)
|
|
// 销毁前钩子
|
onBeforeUnmount(() => {
|
removeAll()
|
eventRemove()
|
})
|
onMounted(() => {
|
nextTick(() => {
|
init()
|
})
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.footer {
|
position: absolute;
|
bottom: 84px;
|
left: 624px;
|
|
img {
|
width: 103px;
|
height: 119px;
|
cursor: pointer;
|
}
|
|
.event {
|
position: relative;
|
left: 40px;
|
bottom: 15px;
|
}
|
|
.panorama {
|
position: relative;
|
left: 80px;
|
bottom: 34px;
|
}
|
|
.threeD {
|
position: relative;
|
left: 120px;
|
bottom: 15px;
|
}
|
|
.orthophoto {
|
position: relative;
|
left: 160px;
|
}
|
}
|
|
.intelligent-introduction-flying {
|
position: absolute;
|
left: 888px;
|
bottom: 23px;
|
|
img {
|
cursor: pointer;
|
width: 146px;
|
height: 54px;
|
}
|
}
|
</style>
|
