update

GuLiMmo

2024-03-22 d4d5d48934c3c9647ae73eb2e61cd6bd5a8bba69

 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 {