From d4d5d48934c3c9647ae73eb2e61cd6bd5a8bba69 Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Fri, 22 Mar 2024 08:46:13 +0800
Subject: [PATCH] update
---
src/pages/page-web/projects/components/route-edit/index.vue | 91 +++++++++++++++++++++++++++++++++------------
1 files changed, 67 insertions(+), 24 deletions(-)
diff --git a/src/pages/page-web/projects/components/route-edit/index.vue b/src/pages/page-web/projects/components/route-edit/index.vue
index 8bd0d1f..184ffc3 100644
--- a/src/pages/page-web/projects/components/route-edit/index.vue
+++ b/src/pages/page-web/projects/components/route-edit/index.vue
@@ -59,7 +59,16 @@
</a-tooltip>
<contextMenu :menu="[{ title: '删除航点', value: { index, item } }]">
<div class="graph-right">
- <div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
+ <div
+ v-for="(event, eIndex) in item.eventList"
+ :key="eIndex"
+ :class="[
+ 's-event-icon',
+ selectedPointAndAction.selectedPoint === index &&
+ selectedPointAndAction.selectedAction === event?.key &&
+ 'active-event',
+ ]"
+ @click="selectionEvent(event, index)">
<a-tooltip placement="top">
<template #title>
{{ event?.name }}
@@ -177,7 +186,9 @@
deep: true,
},
)
-
+ store.commit('SET_WAYLINE_INFO', {
+ isShow: true,
+ })
kmlEntities.value = entities.value
if (!mouseRightClickEvent) {
// 添加右键事件
@@ -188,13 +199,7 @@
// 新建航线初始化
const initCreateRoute = () => {
mapDraw = useMapDraw('', [], '', global)
- const {
- drawWayline,
- waylineDetails: details,
- waylinePointsEvent,
- kmlEntities: entities,
- clearWaylineData
- } = mapDraw
+ const { drawWayline, waylineDetails: details, waylinePointsEvent, kmlEntities: entities, clearWaylineData } = mapDraw
clearWaylineData()
drawWayline()
waylineDetails.value = details
@@ -244,17 +249,18 @@
const selectPointIndex = ref<string | number | any>(null)
const pointSelect = (value: tragetPoint, index: number) => {
removeCesiumChildDom(popupDom)
- if (selectPointIndex.value === index) {
- global.$viewer.entities.remove(prevPointEntity)
- global.$viewer.entities.remove(nextPointEntity)
- kmlEntities.value.forEach((entity: Cesium.Entity | any, i: number) => {
- entity.billboard.image = createBillboard(i + 1, '#61d396')
- entity.label.show = false
- })
- selectPointIndex.value = null
- pointIdx.value = null
- return
- }
+ // if (selectPointIndex.value === index) {
+ // global.$viewer.entities.remove(prevPointEntity)
+ // global.$viewer.entities.remove(nextPointEntity)
+ // kmlEntities.value.forEach((entity: Cesium.Entity | any, i: number) => {
+ // entity.billboard.image = createBillboard(i + 1, '#61d396')
+ // entity.label.show = false
+ // })
+ // selectPointIndex.value = null
+ // pointIdx.value = null
+ // store.commit('SET_WAYLINE_INFO', {})
+ // return
+ // }
if (prevPointEntity) {
global.$viewer.entities.remove(prevPointEntity)
}
@@ -300,6 +306,15 @@
entity.label.show = false
}
})
+ // 默认选中第一个事件
+ // if (selectPointIndex.value !== index) {
+ // store.commit('SET_WAYLINE_INFO', {
+ // selectedPoint: index,
+ // // 默认选中第一个
+ // selectedAction: value.eventList[0],
+ // })
+ // selectionEvent(value.eventList[0], index)
+ // }
selectPointIndex.value = index
pointIdx.value = index
}
@@ -536,6 +551,25 @@
},
)
+// 选中事件
+const selectedPointAndAction = reactive<{
+ selectedPoint: number | null
+ selectedAction: any | null
+}>({
+ selectedPoint: null,
+ selectedAction: null,
+})
+const selectionEvent = (action: any, index: number) => {
+ const params = {
+ selectedPoint: index,
+ selectedAction: action,
+ }
+ selectedPointAndAction.selectedPoint = index
+ selectedPointAndAction.selectedAction = action.key
+ console.log(params)
+ store.commit('SET_WAYLINE_INFO', params)
+}
+
onMounted(() => {
// 清空画布
clearCesiumMap()
@@ -553,8 +587,6 @@
clearCesiumMap()
store.commit('SET_WAYLINE_INFO', {
isShow: false,
- wayline: {},
- position: null,
})
})
</script>
@@ -695,16 +727,27 @@
align-items: center;
.s-event-icon {
- width: 25px;
- height: 25px;
+ width: 20px;
+ height: 20px;
display: flex;
justify-content: center;
align-items: center;
+ border-radius: 2px;
+ margin-right: 3px;
+ overflow: hidden;
+
+ &:hover {
+ background-color: #409eff;
+ }
img {
width: 70%;
}
}
+
+ .active-event {
+ background-color: #409eff;
+ }
}
&:hover {
--
Gitblit v1.9.3