<template>
|
<div class="footer">
|
<img
|
v-for="item in list"
|
:class="item.className"
|
:src="item.active ? item.activeImg : item.img"
|
alt=""
|
@click="imgClick(item)"
|
/>
|
</div>
|
<div class="intelligent-introduction-flying">
|
<img class="orthophoto" src="@/assets/images/intelligent-introduction-flying.png" alt="" />
|
</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 '@/views/Home/useMapAggregation/useMapAggregation'
|
import { useStore } from 'vuex'
|
|
// 机巢聚合
|
const { init, removeAll } = useMapAggregation('device')
|
// 事件聚合
|
const { init: eventInit, removeAll: eventRemove } = useMapAggregation('event')
|
|
const list = ref([
|
{
|
name: 'event1',
|
img: img1,
|
activeImg: activeImg1,
|
active: true,
|
className: 'machine-nest',
|
init: init,
|
removeAll: removeAll,
|
},
|
{
|
name: 'event2',
|
img: img2,
|
activeImg: activeImg2,
|
active: false,
|
className: 'event',
|
init: eventInit,
|
removeAll: eventRemove,
|
},
|
{ name: 'event3', img: img3, activeImg: activeImg3, active: false, className: 'panorama' },
|
{ name: 'event4', img: img4, activeImg: activeImg4, active: false, className: 'threeD' },
|
{ name: 'event5', img: img5, activeImg: activeImg5, active: false, className: 'orthophoto' },
|
])
|
const store = useStore()
|
const imgClick = (toItem,index) => {
|
index !== undefined && store.commit('setFootActiveIndex',index)
|
const fromItem = list.value.find(item => item.active)
|
if (fromItem.name === toItem.name) return
|
fromItem?.removeAll?.()
|
nextTick(() => {
|
toItem?.init?.()
|
})
|
list.value = list.value.map(item => ({ ...item, active: item.name === toItem.name }))
|
}
|
|
const footActiveIndex = computed(() => store.state.home.footActiveIndex)
|
watch(footActiveIndex, val => {
|
console.log(6666666)
|
imgClick(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 {
|
width: 146px;
|
height: 54px;
|
}
|
}
|
</style>
|
