航线点位事件编辑完善

GuLiMmo

2023-12-05 c7c9de0214cb1e6ad3d29c8a3a0c7a8ea31fbaaa

航线点位事件编辑完善

 src/components/waylinetool/index.vue

@@ -82,6 +82,7 @@
  key: string,
  icon: string,
  title: string,
  distinguish?: string,
  param: popoverParamType[],
  event: Function,
  selected?: boolean
@@ -266,6 +267,7 @@
  // 云台偏航角
  {
    key: 'gimbalRotate',
    distinguish: 'yaw',
    icon: getResource('waylinetool/holderyaw.png'),
    title: '云台偏航角',
    param: [
@@ -332,6 +334,7 @@
  // 云台俯仰角
  {
    key: 'gimbalRotate',
    distinguish: 'pitch',
    icon: getResource('waylinetool/holdertilt.png'),
    title: '云台俯仰角',
    param: [
@@ -548,14 +551,20 @@
    const funcRegx = /<wpml:actionActuatorFunc>([\s\S]*?)<\/wpml:actionActuatorFunc>/g
    const funcs = (points[currentPosition.value] || '').match(funcRegx)
    const funcNameRegx = /<wpml:actionActuatorFunc>(.*?)<\/wpml:actionActuatorFunc>/

    const shootTypeRegx = /<wpml:shootType>([\s\S]*?)<\/wpml:shootType>/g
    const shootType = (points[currentPosition.value] || '').match(shootTypeRegx)
    const shootTypeValueRegx = /<wpml:shootType>(.*?)<\/wpml:shootType>/

    // 云台正则
    const actionRegx = /<wpml:action>([\s\S]*?)<\/wpml:action>/g
    const actions = (points[currentPosition.value] || '').match(actionRegx)
    const gimbalPitchRotateAngleRegx = /<wpml:gimbalPitchRotateAngle>(.*?)<\/wpml:gimbalPitchRotateAngle>/
    const gimbalYawRotateAngleRegx = /<wpml:gimbalYawRotateAngle>(.*?)<\/wpml:gimbalYawRotateAngle>/

    btnList.value.forEach(sBtn => {
      funcs?.forEach((func: string) => {
        const funcName = func.match(funcNameRegx) || []
        if (funcName[1] === sBtn.key) {
        if (funcName[1] === sBtn.key && !sBtn.distinguish) {
          sBtn.selected = true
        }
      })
@@ -565,6 +574,17 @@
          sBtn.selected = true
        }
      })
      if (sBtn.distinguish) {
        const action = actions?.find((action: string) => action.includes('<wpml:actionActuatorFunc>gimbalRotate</wpml:actionActuatorFunc>'))
        const pitchAngle = action?.match(gimbalPitchRotateAngleRegx) || []
        const yawAngle = action?.match(gimbalYawRotateAngleRegx) || []
        if (!!Number(pitchAngle[1]) && sBtn.distinguish === 'pitch') {
          sBtn.selected = true
        }
        if (!!Number(yawAngle[1]) && sBtn.distinguish === 'yaw') {
          sBtn.selected = true
        }
      }
    })
    settingDefaultValue(content)
  })

 src/pages/page-web/projects/wayline.vue

@@ -99,13 +99,10 @@
          <ArrowLeftOutlined />
          <span>返回上一页</span>
        </div>
        <li
          v-for="(item, index) in tragetPointArr"
          :key="index"
          :class="{ selectedColor : index === selectedPoint }"
        <li v-for="(item, index) in tragetPointArr" :key="index" :class="{ selectedColor: index === selectedPoint }"
          @click="tragetPointClick(item.position, index)">
          <div class="graph">
            <div class="left" :style="{borderTopColor: index === selectedPoint ? '#FF9900' : '#2D8CF0'}"></div>
            <div class="left" :style="{ borderTopColor: index === selectedPoint ? '#FF9900' : '#2D8CF0' }"></div>
            <div class="right">{{ index + 1 }}</div>
          </div>
          <div class="graph-right">
@@ -190,6 +187,7 @@
const eventList = reactive<{
  key: string,
  name: string,
  distinguish?: string,
  icon?: string
}[]>([
  {
@@ -229,8 +227,15 @@
  },
  {
    key: 'gimbalRotate',
    name: '旋转云台',
    distinguish: 'Yaw',
    name: '云台俯仰角',
    icon: getResource('waylinetool/holderyaw.png'),
  },
  {
    key: 'gimbalYawRotate',
    name: '云台偏航角',
    distinguish: 'pitch',
    icon: getResource('waylinetool/holdertilt.png'),
  },
  {
    key: 'rotateYaw',
@@ -564,6 +569,9 @@
      const actionRegx = /<wpml:action>([\s\S]*?)<\/wpml:action>/g
      // 获取shootType
      const shootTypeRegx = /<wpml:shootType>([\s\S]*?)<\/wpml:shootType>/g
      // 云台角度
      const gimbalPitchRotateAngleRegx = /<wpml:gimbalPitchRotateAngle>(.*?)<\/wpml:gimbalPitchRotateAngle>/
      const gimbalYawRotateAngleRegx = /<wpml:gimbalYawRotateAngle>(.*?)<\/wpml:gimbalYawRotateAngle>/
      // 当前kmz文件航点
      const kmlPoints = kml.match(regx)
      kmlPoints?.forEach((point: string, index: number) => {
@@ -575,7 +583,18 @@
          const actions = ponitAction[0].match(actionRegx)
          actions?.forEach(action => {
            eventList.forEach((item: any) => {
              action.includes(item.key) && eventArr.push(item)
              if (!item.distinguish) {
                action.includes(item.key) && eventArr.push(item)
              } else {
                const pitchAngle = action?.match(gimbalPitchRotateAngleRegx) || []
                const yawAngle = action?.match(gimbalYawRotateAngleRegx) || []
                if (!!Number(pitchAngle[1]) && item.distinguish === 'pitch') {
                  eventArr.push(item)
                }
                if (!!Number(yawAngle[1]) && item.distinguish === 'yaw') {
                  eventArr.push(item)
                }
              }
            })
          })
          tragetPointArr.value[index].eventList = eventArr
@@ -637,26 +656,32 @@
    padding: 0;
    margin: 0;
    list-style-type: none;

    .back-btn {
      cursor: pointer;
      padding: 10px;
      border-bottom: 1px solid #4f4f4f;

      span {
        margin-left: 10px;
      }

      &:hover {
        color: #2d8cf0;
      }
    }

    li {
      cursor: pointer;
      padding: 10px 0;
      margin: 0 7px;
      display: flex;

      .graph {
        width: 40px;
        display: flex;
        align-items: center;

        .left {
          width: 0;
          height: 0;
@@ -664,27 +689,32 @@
          border-right: 10px solid transparent;
          border-left: 10px solid transparent;
        }

        .right {
          margin-left: 3px;
        }
      }

      .graph-right {
        width: calc(100% - 40px);
        height: 30px;
        border-bottom: 1px solid #4f4f4f;
        display: flex;
        align-items: center;

        .s-event-icon {
          width: 25px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 70%;
          }
        }
      }

      &:hover {
        background-color: #3C3C3C;
      }
@@ -736,5 +766,4 @@

.selectedColor {
  background-color: #3C3C3C;
}
</style>
}</style>