From 48253aaa87bf914241185f62df0f9418d248a9c8 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Tue, 08 Apr 2025 17:42:54 +0800
Subject: [PATCH] feat: 事件概况详情分页列表点击图片定位功能
---
src/views/Home/HomeRight/EventOverview.vue | 1 +
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue | 8 ++++++++
src/store/modules/home.js | 6 +++++-
src/views/Home/Footer.vue | 36 ++++++++++++++++++++++--------------
4 files changed, 36 insertions(+), 15 deletions(-)
diff --git a/src/store/modules/home.js b/src/store/modules/home.js
index 74a7360..16eea68 100644
--- a/src/store/modules/home.js
+++ b/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;
},
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
index 1706c28..72bdb59 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
+++ b/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([])
diff --git a/src/views/Home/Footer.vue b/src/views/Home/Footer.vue
index 5962dba..8c9d4d4 100644
--- a/src/views/Home/Footer.vue
+++ b/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()
diff --git a/src/views/Home/HomeRight/EventOverview.vue b/src/views/Home/HomeRight/EventOverview.vue
index d36ef27..7722635 100644
--- a/src/views/Home/HomeRight/EventOverview.vue
+++ b/src/views/Home/HomeRight/EventOverview.vue
@@ -179,6 +179,7 @@
const store = useStore()
const details = () =>{
store.commit('setIsEventOverviewDetail',true)
+ store.commit('setFootActiveIndex',1)
}
// 远程查询
--
Gitblit v1.9.3