update

GuLiMmo

2024-03-22 d4d5d48934c3c9647ae73eb2e61cd6bd5a8bba69

 src/components/waylinetool/event-edit.vue

@@ -1,24 +1,114 @@
<template>
    <div class="event-container">
        <div class="edit-box"></div>
        <div class="map-box"></div>
  <div class="event-container" v-if="isActionEditShow">
    <div class="edit-box" v-if="currentPointEvent">
      <div class="header">
        <div class="action-name">
          <img :src="currentPointEvent.aciton.icon" alt="icon" />
          <span>{{ currentPointEvent.aciton.name }}</span>
        </div>
        <div class="action-index">{{ currentPointEvent.actionIndex }}</div>
        <div class="action-del">
          <span @click="handleDelAction"><DeleteOutlined /></span>
        </div>
      </div>
      <div class="event-edit">
        <template v-if="currentPointEvent.aciton.key === 'takePhoto'">
          1
        </template>
      </div>
    </div>
    <div class="map-box"></div>
  </div>
</template>

<script lang="ts" scoped>
<script lang="ts" setup>
import { DeleteOutlined } from '@ant-design/icons-vue'
import { useMyStore } from '/@/store'
import { actionList } from '/@/utils/cesium/use-map-draw'
import { template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'

const store = useMyStore()
// 事件编辑是否显示
const isActionEditShow = computed(() => store.state.waylineTool.isShow)
// 当前点事件
const selectedAction = computed(() => store.state.waylineTool.selectedAction)

const currentPointEvent = computed(() => {
  const placemarks = xmlTemplate.value.Folder.Placemark
  const pointIndex = store.state.waylineTool.selectedPoint
  if (pointIndex === undefined) return null
  const currentPoint = placemarks[pointIndex]
  const actions = currentPoint.actionGroup.action
  let actionIndex = 1
  if (Array.isArray(actions)) {
    actionIndex = actions.findIndex((item: { actionActuatorFunc: { '#text': string } }) => {
      return item.actionActuatorFunc['#text'] === selectedAction.value.key
    })
  }
  return {
    aciton: selectedAction.value,
    actionIndex: `${pointIndex + 1}-${actionIndex + 1}`,
  }
})

const handleDelAction = () => {}
</script>

<style lang="scss" scoped>
.event-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgb(35, 35, 35);
    .edit-box,
    .map-box {
  width: 400px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgb(35, 35, 35);
  color: #fff;
  .edit-box {
    width: 400px;
    height: calc(100% - 300px);
    .header {
      padding: 0 15px;
      height: 50px;
      border-bottom: 1px solid rgb(79, 79, 79);
      display: flex;
      align-items: center;
      div {
        flex: 1;
        border: 1px solid red;
        flex-shrink: 0;
      }
      .action-name {
        display: flex;
        align-items: center;
        img {
          width: 15px;
          height: 15px;
          margin-right: 3px;
        }
      }
      .action-index {
        text-align: center;
        font-weight: bold;
      }
      .action-del {
        display: flex;
        justify-content: flex-end;
        span {
          cursor: pointer;
          &:hover {
            color: #409eff;
          }
        }
      }
    }
    .event-edit {
      width: 100%;
      height: calc(100% - 50px);
      padding: 15px;
      overflow: auto;
    }
  }
  .map-box {
    width: 400px;
    height: 300px;
  }
}
</style>