From 76a3843d1cd480a345675b56e8e45693b0bf81cb Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 18 Apr 2025 20:47:48 +0800
Subject: [PATCH] feat: 指南针100%
---
src/components/CurrentTaskDetails/ControlPanel/ControlComPass/ControlComPass.vue | 41 +++++++++++++++--------------------------
1 files changed, 15 insertions(+), 26 deletions(-)
diff --git a/src/components/CurrentTaskDetails/ControlPanel/ControlComPass/ControlComPass.vue b/src/components/CurrentTaskDetails/ControlPanel/ControlComPass/ControlComPass.vue
index 60530dc..5371249 100644
--- a/src/components/CurrentTaskDetails/ControlPanel/ControlComPass/ControlComPass.vue
+++ b/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%;
--
Gitblit v1.9.3