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

罗广辉

2025-04-08 48253aaa87bf914241185f62df0f9418d248a9c8

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

 src/store/modules/home.js

@@ -5,7 +5,8 @@
  state: {
    machineNestDetail: false, // 机巢详情
    singleUavHome: {},
        isEventOverviewDetail: false,//是事件概述详细信息
        footActiveIndex: 0,
        isEventOverviewDetail: false,//是事件概述详情
    singleTotal: {}, // 统计单个机巢数据
    // 项目id
    selectedWorkSpaceId: window.localStorage.getItem('bs_workspace_id'),
@@ -37,6 +38,9 @@
  },
  actions: {},
  mutations: {
        setFootActiveIndex: (state, index) => {
            state.footActiveIndex = index;
        },
        setIsEventOverviewDetail: (state, data) => {
            state.isEventOverviewDetail = data;
        },

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -41,6 +41,7 @@
                <img class="eventListItemImg" :src="item.photo_url" alt="" />
                <div class="eventListItemText">
                    <div class="eventListItemName">{{ item.event_name }}</div>
                    <div @click="positioning(item)">定位</div>
                    <div class="eventListItemTime">{{ item.create_time }}</div>
                </div>
            </div>
@@ -61,6 +62,7 @@
import { selectDevicePage } from '@/api/home/machineNest'
import { getMultipleDictionary } from '@/api/system/dictbiz'
import { getEvenNum, getEventPage, getEventStatusNum, getEventTrend } from '@/api/home/event'
import cesiumOperation from '@/utils/cesium-tsa'

const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const today = dayjs().format(timeFormat)
@@ -101,6 +103,12 @@
        workOrderType.value = res.data.data?.['WORK_ORDER_TYPE'] || []
    })
}
const { flyTo } = cesiumOperation();
const positioning = (row) =>{
    const longitude = Number(row.longitude)
    const latitude = Number(row.latitude)
    flyTo({ longitude, latitude }, 1, 1000);
}

// 事件状态+数量
const statusList = ref([])

 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()

 src/views/Home/HomeRight/EventOverview.vue

@@ -179,6 +179,7 @@
const store = useStore()
const details = () =>{
   store.commit('setIsEventOverviewDetail',true)
     store.commit('setFootActiveIndex',1)
}

// 远程查询