feat: 指南针100%

罗广辉

2025-04-18 76a3843d1cd480a345675b56e8e45693b0bf81cb

 src/components/CurrentTaskDetails/ControlPanel/ControlComPass/ControlComPass.vue

@@ -1,20 +1,15 @@
<template>
   <div class="instrument-content">
      <div class="left-img">
         <div class="valueBox">{{props?.pitchAngle || 0}}°</div>
         <div class="valueBox">{{ props?.options?.pitchAngle || 0 }}°</div>
         <img src="@/assets/images/rightmapidentification.png" alt="" />
         <div class="triangle" :style="pitchAngleStyle"></div>
         <div class="nameBox" >俯仰角度</div>
         <div class="nameBox">俯仰角度</div>
      </div>

      <div class="instrument-center">
         <div class="compass-box" >
            <div
               v-for="(item, index) in str"
               :key="index"
               class="scale"
               :style="{ '--rotate': 30 * index - prevRotate + 'deg' }"
            >
         <div class="compass-box" :style="{ transform: `rotate(${props?.options?.yawAngle || 0}deg)` }">
            <div v-for="(item, index) in str" :key="index" class="scale" :style="{ '--rotate': 30 * index + 'deg' }">
               <span class="text">{{ item }}</span>
            </div>
         </div>
@@ -24,7 +19,7 @@
      </div>

      <div class="right-img">
         <div class="valueBox">{{props.trueAltitude}}m</div>
         <div class="valueBox">{{ props.options?.trueAltitude }}m</div>
         <img src="@/assets/images/leftmapidentification.png" alt="" />
         <div class="rightTriangle" :style="trueAltitudeStyle"></div>
         <div class="nameBox">真空高度</div>
@@ -34,31 +29,26 @@

<script setup>
const str = ['W', 30, 33, 'N', 3, 6, 'E', 12, 15, 'S', 21, 24]
const attitude_pitch = 0 // 俯仰角度数
const height = 0 // 真空高度
const prevRotate = 0
const dockHeight = 0

const props = defineProps(['pitchAngle','trueAltitude'])
const props = defineProps(['options'])

const pitchAngleStyle = computed(() => {
   const pitchAngle = props?.pitchAngle || 0;
   const pitchAngle = props?.options?.pitchAngle || 0
   // 将 [-90, 90] 映射到 [0%, 100%]
   const percentage = ((pitchAngle + 90) / 180 * 100).toFixed(2);
   const percentage = (((pitchAngle + 90) / 180) * 100).toFixed(2)
   return {
      bottom: `${percentage}%`
   };
      bottom: `${percentage}%`,
   }
})

const trueAltitudeStyle = computed(() => {
   const trueAltitude = props?.trueAltitude || 0;
   const trueAltitude = props?.options?.trueAltitude || 0
   // 将 [-240,240] 映射到 [0%, 100%]
   const percentage = ((trueAltitude + 240) / 480 * 100).toFixed(2);
   const percentage = (((trueAltitude + 240) / 480) * 100).toFixed(2)
   return {
      bottom: `${percentage}%`
   };
      bottom: `${percentage}%`,
   }
})


</script>

<style lang="scss" scoped>
@@ -137,7 +127,6 @@
         border: 30px solid rgba($color: #323931, $alpha: 0.5);
         box-shadow: 0 2px 12px 0 #158aff;
         user-select: none;
         transform: none !important;

         .scale {
            width: 135%;