罗广辉
2025-06-19 f27ca082eb0a839449dd50c49007b58e5ed6946f
src/pages/page-web/projects/components/route-edit/components/setting.vue
@@ -3,36 +3,34 @@
    <a-popover placement="bottom" trigger="click" :getPopupContainer="(triggerNode: any) => triggerNode.parentNode">
      <template #content>
        <div class="setting-content">
          <div class="start-point common">
          <div class="start-point common" v-if="xmlTemplate.missionConfig?.takeOffRefPoint['#text']">
            <div class="title">起飞点</div>
            <div class="value">
              {{ xmlTemplate.missionConfig?.takeOffRefPoint['#text'] !== '' ? '已设置' : '未设置' }}
            </div>
          </div>
          <div class="no-start-point" v-else>
            <img :src="getResource('waylinetool/无人机起降场.png')" alt="icon">
            <span>参考起飞点未设置</span>
          </div>
          <div class="photo-setting common">
            <div class="title">拍照设置</div>
            <ul class="select-box">
              <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)">
              <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>
            <!-- <div class="auto-low-light">
              <div class="title">自动低光</div>
              <a-tooltip
                placement="right"
                :title="tipDescriptionEnums.rowLightModeTip">
                <a-switch
                  v-model:checked="setting.orientedPhotoMode"
                  checkedValue="lowLightSmartShooting"
                  unCheckedValue="normalPhoto" />
              </a-tooltip>
            </div> -->
          </div>
          <!-- 爬升 -->
          <div class="climb-mode common">
@@ -51,8 +49,11 @@
                  <li @click="numberControls(true, 100, 'takeOffSecurityHeight')">+100</li>
                  <li @click="numberControls(true, 10, 'takeOffSecurityHeight')">+10</li>
                  <li class="parameter-input">
                    <a-input-number :min="2" :max="1500"
                      v-model:value="xmlTemplate.missionConfig.takeOffSecurityHeight['#text']"></a-input-number>m
                    <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>
@@ -62,15 +63,17 @@
          </div>
          <!-- 高度模式 -->
          <div class="height-mode common">
            <a-tooltip placement="right"
            <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="xmlTemplate.Folder.waylineCoordinateSysParam.heightMode['#text']"
                <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">
@@ -81,8 +84,11 @@
                  <li @click="numberControls(true, 100, 'globalHeight')">+100</li>
                  <li @click="numberControls(true, 10, 'globalHeight')">+10</li>
                  <li class="parameter-input">
                    <a-input-number :min="0" :max="10000"
                      v-model:value="xmlTemplate.Folder.globalHeight['#text']"></a-input-number>m
                    <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>
@@ -96,7 +102,10 @@
            <div class="speed-box">
              <div class="subtract" @click="numberControls(false, 1, 'autoFlightSpeed')">-</div>
              <div class="text">
                <a-input-number v-model:value="xmlTemplate.Folder.autoFlightSpeed['#text']" :min="1" :max="15"
                <a-input-number
                  v-model:value="xmlTemplate.Folder.autoFlightSpeed['#text']"
                  :min="1"
                  :max="15"
                  class="value">
                </a-input-number>
                m / s
@@ -115,7 +124,7 @@
import { reactive, defineProps } from 'vue'
import { tipDescriptionEnums } from './enums'
import useKmzTsa, { kmlStr, template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
import useMapDraw from '/@/utils/cesium/use-map-draw'
import useMapDraw, { kmlEntities as globalEntities } from '/@/utils/cesium/use-map-draw'
import { getKmlParams } from '/@/utils/cesium/kmz'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { message } from 'ant-design-vue'
@@ -125,6 +134,7 @@
const mapDraw = useMapDraw('', '', '', global)
const { removeAllDataSource, removeAllPoint } = cesiumOperation()
const kmzUtils = useKmzTsa()
interface setting {
  imageFormat: string[]
@@ -136,6 +146,10 @@
const getSvgResource = (name: string) => {
  return new URL(`/src/assets/svg/${name}`, import.meta.url).href
}
const getResource = (name: string) => {
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}
const climbImage = getSvgResource('climb.svg')
@@ -168,7 +182,7 @@
// 计算
const numberControls = (isAdd: boolean, computeVal: number, key: string) => {
  let obj = { '#text': 0 }
  let obj = { '#text': '0' }
  if (key === 'takeOffSecurityHeight') {
    obj = xmlTemplate.value.missionConfig.takeOffSecurityHeight
  }
@@ -184,11 +198,28 @@
  } else {
    value -= computeVal
  }
  obj['#text'] = value
  obj['#text'] = value.toString()
  if (key === 'globalHeight') {
    const placemarkArr = xmlTemplate.value.Folder.Placemark
    placemarkArr.forEach((placemark: { useGlobalHeight: { [x: string]: any }; height: { [x: string]: string } }) => {
      if (Reflect.has(placemark, 'useGlobalHeight')) {
        placemark.height['#text'] = value.toString()
      }
    })
    const xmlString = kmzUtils.generateXML(xmlTemplate.value)
    mapDraw.drawWayline(globalEntities.value, xmlString)
  }
}
// 拍照选择
const selectPhotoSetting = (value: string) => {
  if (!xmlTemplate.value.Folder.payloadParam) {
    xmlTemplate.value.Folder.payloadParam = {
      imageFormat: {
        '#text': '',
      },
    }
  }
  const imageFormat = xmlTemplate.value.Folder.payloadParam.imageFormat
  const imageFormatArr = imageFormat['#text'].split(',')
  if (imageFormatArr.includes(value)) {
@@ -231,6 +262,29 @@
      .value {
        margin-left: auto;
        color: #409eff;
      }
      .no-setting {
        &__value {
          width: 100%;
          text-align: center;
          font-weight: bold;
        }
      }
    }
    .no-start-point {
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 16px;
      background-color: #409eff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      img {
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }
    }
@@ -433,7 +487,6 @@
  :deep() {
    .ant-popover-content {
      .ant-popover-arrow,
      .ant-popover-inner {
        background-color: #101010;