feat: 事件概况详情分页列表点击图片定位功能

罗广辉

2025-04-08 48253aaa87bf914241185f62df0f9418d248a9c8

 src/views/Home/Footer.vue

@@ -26,11 +26,12 @@
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, removeAll } = useMapAggregation('device')
// 事件聚合
const { init: eventInit, removeAll: eventRemove } = useMapAggregation('event');
const { init: eventInit, removeAll: eventRemove } = useMapAggregation('event')

const list = ref([
   {
@@ -55,22 +56,29 @@
   { 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 imgClick = toItem => {
  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()
});
   removeAll()
   eventRemove()
})
onMounted(() => {
   nextTick(() => {
      init()