update

GuLiMmo

2024-03-27 91f425a9e4c11016dccd78186a4ab0dec3c49870

 src/components/waylinetool/event-edit.vue

@@ -12,34 +12,7 @@
        </div>
      </div>
      <div class="event-edit">
        <!-- 单拍 -->
        <template v-if="currentPointEvent.aciton.key === 'takePhoto'">
          <div class="take-photo">
            <div class="title">
              <span
                :style="{
                  color: isTakePhotoNameShow || takePhotoSetting.fileSuffix ? 'rgba(255,255,255,0.4)' : '#fff',
                }"
                >DJI_YYYYMMDDhhmm_XXX_</span
              >
              <span @click="isTakePhotoNameShow = !isTakePhotoNameShow"><EditOutlined /></span>
            </div>
            <div class="title-name-input" v-if="isTakePhotoNameShow">
              <div class="input"><a-input size="small" v-model:value="takePhotoSetting.fileSuffix"></a-input></div>
              <div class="btn">
                <span class="check"><CheckOutlined /></span>
                <span class="close"><CloseOutlined /></span>
              </div>
            </div>
            <div class="photo-format">
              <a-button type="primary" shape="round" size="small" @click="photoFormatClick('wide')">广角照片</a-button>
              <a-button type="primary" shape="round" size="small" @click="photoFormatClick('zoom')">变焦照片</a-button>
              <a-button type="primary" shape="round" size="small" @click="photoFormatClick('global')"
                >跟随全局</a-button
              >
            </div>
          </div>
        </template>
        <takePhoto v-model:serial="serial" v-if="currentPointEvent.aciton.key === 'takePhoto'" />
      </div>
    </div>
    <div class="map-box"></div>
@@ -48,10 +21,10 @@

<script lang="ts" setup>
import _ from 'lodash'
import { DeleteOutlined, EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'
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'
import takePhoto from './component/take-photo.vue'

const store = useMyStore()
// 事件编辑是否显示
@@ -87,51 +60,7 @@
  }
})

// 单拍
const isTakePhotoNameShow = ref<boolean>(false)
const takePhotoSetting = reactive({
  fileSuffix: '',
  payloadLensIndex: '',
  useGlobalPayloadLensIndex: 0,
})
const photoFormatClick = (value: string) => {
  if (value === 'global') {
    takePhotoSetting.useGlobalPayloadLensIndex = 1
  } else {
    let formats = takePhotoSetting.payloadLensIndex.split(',')
    const index = formats.findIndex((item: string) => item === value)
    if (index === -1) {
      if (takePhotoSetting.payloadLensIndex === '') {
        formats = [value]
      } else {
        formats.push(value)
      }
    } else {
      formats.splice(index, 1)
    }
    takePhotoSetting.payloadLensIndex = formats.join(',')
  }
  addActionParam(takePhotoSetting)
}

const handleDelAction = () => {}

// 加入事件参数
const addActionParam = <T extends { [key: string] : string }, >(params: T): void => {
  const obj = _.cloneDeep(params)
  const placemarks = xmlTemplate.value.Folder.Placemark
  let aciton = placemarks[serial.placemark].actionGroup?.action
  if (Array.isArray(aciton)) {
    aciton = aciton[serial.action]
  }
  console.log(aciton)
  const actionActuatorFuncParam = aciton.actionActuatorFuncParam
  // Object.keys(obj).forEach((key: string) => {
  //   if (!obj[key]) {
  //     delete obj[key]
  //   }
  // })
}
</script>

<style lang="scss" scoped>
@@ -184,7 +113,7 @@
      height: calc(100% - 50px);
      padding: 15px;
      overflow: auto;
      // 单排
      // 单拍
      .take-photo {
        .title {
          display: flex;
@@ -230,19 +159,24 @@
            }
          }
        }
        .photo-format {
          margin-top: 20px;
          display: flex;
          justify-content: flex-start;
          .ant-btn {
            margin-left: 10px;
            font-weight: bold;
            &:first-child {
              margin: 0;
            }
            &:nth-child(3) {
              margin-left: auto;
            }
      }

      .btn-group {
        margin-top: 20px;
        display: flex;
        justify-content: flex-start;
        button {
          margin-left: 10px;
          font-weight: bold;
          background-color: #409eff;
          border-radius: 999px;
          border: 0;
          padding: 0 10px 0 10px;
          &:first-child {
            margin: 0;
          }
          &:nth-child(3) {
            margin-left: auto;
          }
        }
      }