update: kmz修改保持方式修改

GuLiMmo

2024-03-14 46442b030db95ae97b754711c6dc786376c3a6e1

 src/pages/page-web/projects/components/route-edit/components/setting.vue

@@ -5,19 +5,20 @@
        <div class="setting-content">
          <div class="start-point common">
            <div class="title">起飞点</div>
            <div class="value">{{ missionConfigSetting.takeOffRefPoint ? '已设置' : '未设置' }}</div>
            <div class="value">
              {{ xmlTemplate.missionConfig?.takeOffRefPoint['#text'] !== '' ? '已设置' : '未设置' }}
            </div>
          </div>
          <div class="photo-setting common">
            <div class="title">拍照设置</div>
            <ul class="select-box">
              <li
                class="select-item"
                :style="{
                  '--settingColor': folderSetting.payloadParam.imageFormat.includes(item.value) ? '#409eff' : '#3c3c3c',
                }"
                v-for="item in photoSetting"
                :key="item.value"
                @click="selectPhotoSetting(item.value)">
              <li class="select-item" v-for="item in photoSetting" :key="item.value" :style="{
      '--settingColor': xmlTemplate.Folder.payloadParam?.imageFormat['#text']
        .split(',')
        .includes(item.value)
        ? '#409eff'
        : '#3c3c3c',
    }" @click="selectPhotoSetting(item.value)">
                {{ item.title }}照片
              </li>
            </ul>
@@ -37,7 +38,7 @@
          <div class="climb-mode common">
            <a-tooltip placement="right" :title="tipDescriptionEnums.climbModeTip">
              <div class="mode-box">
                <a-radio-group v-model:value="missionConfigSetting.flyToWaylineMode" button-style="solid">
                <a-radio-group v-model:value="xmlTemplate.missionConfig.flyToWaylineMode['#text']" button-style="solid">
                  <a-radio-button value="safely">垂直爬升</a-radio-button>
                  <a-radio-button value="pointToPoint">倾斜爬升</a-radio-button>
                </a-radio-group>
@@ -49,9 +50,9 @@
                <ul class="parameter-btn">
                  <li @click="numberControls(true, 100, 'takeOffSecurityHeight')">+100</li>
                  <li @click="numberControls(true, 10, 'takeOffSecurityHeight')">+10</li>
                  <li>
                    <span>{{ missionConfigSetting.takeOffSecurityHeight }}</span
                    >m
                  <li class="parameter-input">
                    <a-input-number :min="2" :max="1500"
                      v-model:value="xmlTemplate.missionConfig.takeOffSecurityHeight['#text']"></a-input-number>m
                  </li>
                  <li @click="numberControls(false, 100, 'takeOffSecurityHeight')">-100</li>
                  <li @click="numberControls(false, 10, 'takeOffSecurityHeight')">-10</li>
@@ -61,32 +62,27 @@
          </div>
          <!-- 高度模式 -->
          <div class="height-mode common">
            <a-tooltip
              placement="right"
              :title="tipDescriptionEnums[folderSetting.waylineCoordinateSysParam.heightMode]">
            <a-tooltip placement="right"
              :title="tipDescriptionEnums[xmlTemplate.Folder.waylineCoordinateSysParam.heightMode['#text']]">
              <div class="title">航线高度模式</div>
              <div class="mode-box">
                <a-radio-group v-model:value="folderSetting.waylineCoordinateSysParam.heightMode" button-style="solid">
                <a-radio-group v-model:value="xmlTemplate.Folder.waylineCoordinateSysParam.heightMode['#text']"
                  button-style="solid">
                  <a-radio-button v-for="item in heightModeSetting" :key="item.value" :value="item.value">{{
                    item.title
                  }}</a-radio-button>
      item.title
    }}</a-radio-button>
                </a-radio-group>
              </div>
              <div class="parameter-tool">
                <div class="example-img">
                  <img
                    :src="
                      folderSetting.waylineCoordinateSysParam.heightMode === heightModeSetting[0].value
                        ? heightModeSetting[0].img
                        : heightModeSetting[1].img
                    "
                    alt="height-img" />
                  <img :src="true ? heightModeSetting[0].img : heightModeSetting[1].img" alt="height-img" />
                </div>
                <div class="parameter-btn">
                  <li @click="numberControls(true, 100, 'globalHeight')">+100</li>
                  <li @click="numberControls(true, 10, 'globalHeight')">+10</li>
                  <li>
                    <span>{{ Math.round(folderSetting.globalHeight) }}</span> m
                  <li class="parameter-input">
                    <a-input-number :min="0" :max="10000"
                      v-model:value="xmlTemplate.Folder.globalHeight['#text']"></a-input-number>m
                  </li>
                  <li @click="numberControls(false, 100, 'globalHeight')">-100</li>
                  <li @click="numberControls(false, 10, 'globalHeight')">-10</li>
@@ -100,11 +96,9 @@
            <div class="speed-box">
              <div class="subtract" @click="numberControls(false, 1, 'autoFlightSpeed')">-</div>
              <div class="text">
                <a-input-number
                  :min="1"
                  :max="15"
                  class="value"
                  v-model:value="folderSetting.autoFlightSpeed"></a-input-number>
                <a-input-number v-model:value="xmlTemplate.Folder.autoFlightSpeed['#text']" :min="1" :max="15"
                  class="value">
                </a-input-number>
                m / s
              </div>
              <div class="add" @click="numberControls(true, 1, 'autoFlightSpeed')">+</div>
@@ -120,7 +114,7 @@
<script setup lang="ts">
import { reactive, defineProps } from 'vue'
import { tipDescriptionEnums } from './enums'
import useKmzTsa, { kmlStr } from '/@/utils/cesium/use-kmz-tsa'
import useKmzTsa, { kmlStr, template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
import useMapDraw from '/@/utils/cesium/use-map-draw'
import { getKmlParams } from '/@/utils/cesium/kmz'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
@@ -132,15 +126,14 @@
const mapDraw = useMapDraw('', '', '', global)
const { removeAllDataSource, removeAllPoint } = cesiumOperation()

const kmzUtils = useKmzTsa()
interface setting {
  imageFormat: string[]
}

const props = defineProps({
  loadCompleted: Boolean,
})

const getResource = (name: string) => {
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}
const getSvgResource = (name: string) => {
  return new URL(`/src/assets/svg/${name}`, import.meta.url).href
}
@@ -148,37 +141,12 @@
const climbImage = getSvgResource('climb.svg')
const imgs = []

const missionConfigSetting = reactive<missionConfig | any>({
  flyToWaylineMode: 'safely',
  // 航线结束动作
  finishAction: 'goHome',
  // 失控是否继续执行航线
  exitOnRCLost: 'goContinue',
  // 失控动作
  executeRCLostAction: 'goBack',
  // 安全起飞高度
  takeOffSecurityHeight: 20,
  // 全局航线速度
  globalTransitionalSpeed: 10,
  // 参考起飞点
  takeOffRefPoint: '',
  // 参考起飞点海拔高度
  takeOffRefPointAGLHeight: 0,
  // 全局返航高度
  globalRTHHeight: 100,
  droneInfo: {
    droneEnumValue: 67,
    droneSubEnumValue: 0,
  },
  payloadInfo: {
    payloadEnumValue: 52,
    payloadSubEnumValue: 1,
    payloadPositionIndex: 0,
  },
})

// 拍照设置
const photoSetting = reactive([
interface photoSetting {
  title: string
  value: string
}
const photoSetting = reactive<photoSetting[]>([
  { title: '广角', value: 'wide' },
  { title: '变焦', value: 'zoom' },
  { title: '红外', value: 'ir' },
@@ -198,128 +166,38 @@
  },
])

// folder设置
const folderSetting = reactive<Folder | any>({
  templateType: 'waypoint',
  templateId: 0,
  waylineCoordinateSysParam: {
    coordinateMode: 'WGS84',
    heightMode: 'EGM96',
  },
  autoFlightSpeed: 10,
  globalHeight: 100,
  payloadParam: {
    payloadPositionIndex: 0,
    imageFormat: '',
  },
  caliFlightEnable: 0,
  gimbalPitchMode: 'manual',
})

// 计算
const numberControls = (isAdd: boolean, computeVal: number, key: string) => {
  if (isAdd) {
    if (missionConfigSetting[key]) {
      missionConfigSetting[key] += computeVal
    } else {
      folderSetting[key] += computeVal
    }
  } else {
    if (missionConfigSetting[key]) {
      missionConfigSetting[key] -= computeVal
    } else {
      if (folderSetting[key] - computeVal <= 0) {
        return message.warn('飞行高度较低！！！！')
      }
      folderSetting[key] -= computeVal
    }
  let obj = { '#text': 0 }
  if (key === 'takeOffSecurityHeight') {
    obj = xmlTemplate.value.missionConfig.takeOffSecurityHeight
  }

  if (key === 'globalHeight') {
    const entities = mapDraw.kmlEntities.value
    removeAllDataSource()
    removeAllPoint()
    mapDraw.drawWayline(entities, kmlStr.value)
    obj = xmlTemplate.value.Folder.globalHeight
  }
}

// 获取机场默认值
watch(
  () => props.loadCompleted,
  (val) => {
    if (val) {
      getDefaultValue(missionConfigSetting)
      getDefaultValue(folderSetting)
    }
  },
)
const getDefaultValue = (setting: any) => {
  Object.keys(setting).forEach((key: string) => {
    const param: RegExpMatchArray | any = getKmlParams(kmlStr.value, true, {
      name: key,
      findRegx: '([\\s\\S]*?)',
    })
    if (Object.prototype.toString.call(setting[key]) === '[object Object]') {
      const value: RegExpMatchArray | any = getKmlParams(param[0], true, {
        name: key,
        findRegx: '([\\s\\S]*?)',
      })
      Object.keys(setting[key]).forEach((v) => {
        const keyValue: RegExpMatchArray | any = getKmlParams(value[1], true, {
          name: v,
          findRegx: '([\\s\\S]*?)',
        })
        if (!Number(keyValue[1])) {
          setting[key][v] = keyValue[1]
        } else {
          setting[key][v] = Number(keyValue[1])
        }
      })
    } else {
      if (!Number(param[1])) {
        setting[key] = param[1]
      } else {
        setting[key] = Number(param[1])
      }
    }
  })
  return setting
}

// 全局设置写入kmz文件
watch(
  () => missionConfigSetting,
  (settingVal) => {
    if (!props.loadCompleted) return
    kmzUtils.edit(settingVal, 'missionConfig', true)
  },
  {
    deep: true,
  },
)

// folder设置写入kmz文件
watch(
  () => folderSetting,
  (newVal) => {
    if (!props.loadCompleted) return
    kmzUtils.edit(newVal, 'Folder', true)
  },
  {
    deep: true,
  },
)

// 拍照设置
const selectPhotoSetting = (value: string) => {
  const arr: string[] = folderSetting.payloadParam.imageFormat.split(',')
  const index: number = arr.findIndex((item) => item === value)
  if (index !== -1) {
    arr.splice(index, 1)
  if (key === 'autoFlightSpeed') {
    obj = xmlTemplate.value.Folder.autoFlightSpeed
  }
  let value = Number(obj['#text'])
  if (isAdd) {
    value += computeVal
  } else {
    arr.push(value)
    value -= computeVal
  }
  folderSetting.payloadParam.imageFormat = arr.join(',')
  obj['#text'] = value
}

// 拍照选择
const selectPhotoSetting = (value: string) => {
  const imageFormat = xmlTemplate.value.Folder.payloadParam.imageFormat
  const imageFormatArr = imageFormat['#text'].split(',')
  if (imageFormatArr.includes(value)) {
    const index = imageFormatArr.findIndex((item: string) => item === value)
    imageFormatArr.splice(index, 1)
  } else {
    imageFormatArr.push(value)
  }
  xmlTemplate.value.Folder.payloadParam.imageFormat['#text'] = imageFormatArr.join(',')
}
</script>

@@ -349,6 +227,7 @@
    .start-point {
      display: flex;
      justify-content: flex-start;

      .value {
        margin-left: auto;
        color: #409eff;
@@ -472,6 +351,31 @@
              }
            }
          }

          .parameter-input {
            display: flex;
            align-items: center;

            :deep() {
              .ant-input-number {
                background-color: transparent;
                color: #409eff;
                font-size: 23px;
                border: 0;

                .ant-input-number-handler-wrap {
                  display: none;
                }

                .ant-input-number-input-wrap {
                  input {
                    font-weight: bold;
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }
    }
@@ -526,8 +430,10 @@
      }
    }
  }

  :deep() {
    .ant-popover-content {

      .ant-popover-arrow,
      .ant-popover-inner {
        background-color: #101010;