<template>
|
<div class="zp-container">
|
<!-- <div class="left-img" :data-text="`${lbpObj.attitude_pitch}°`">
|
<div class="scaleImg">
|
<p class="scale" :style="{ top: 45 + ScaleTop + 'px' }"></p>
|
<img src="@/assets/images/rightmapidentification-1.png" />
|
</div>
|
</div> -->
|
<div class="left-img-new" :style="{'--before-content': `'${beforeLeftContent}°'`}">
|
<p class="scale" :style="{ top: 45 + ScaleTop + 'px' }"></p>
|
<img src="@/assets/images/rightmapidentification-1.png" />
|
</div>
|
<div class="instrument-center">
|
<div class="compass-box" :style="{'--center-content': `'${beforeCenterContent?.toFixed(2)}°'`}">
|
<div v-for="(item, index) in lbpObj.str" :key="index" class="scale"
|
:style="{ '--rotate': 30 * index - lbpObj.prevRotate + 'deg' }">
|
<span class="text">{{ item }}</span>
|
</div>
|
</div>
|
<div class="center-show">
|
<img src="@/assets/images/mapidentification.png" />
|
</div>
|
</div>
|
<div class="right-img-new" :style="{'--right-content': `'${beforeRightContent}m'`}">
|
<img src="@/assets/images/leftmapidentification-1.png" />
|
<div class="arrow-box" :style="{ bottom: realHeight }">
|
<div class="arrow"></div>
|
</div>
|
</div>
|
<!-- <div class="right-img" :data-text="`${lbpObj.height}m`">
|
<div class="ident-arrow">
|
<img src="@/assets/images/leftmapidentification-1.png" />
|
<div class="arrow-box" :style="{ bottom: realHeight }">
|
<div class="arrow"></div>
|
</div>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, onBeforeUnmount, nextTick, reactive, computed, watch } from 'vue';
|
import { getLnglatAltitude } from '@/utils/mapUtils'
|
import { useMyStore } from '@/store'
|
|
const store = useMyStore()
|
|
const props = defineProps({
|
cesiumViewe: {
|
type: Object,
|
required: true,
|
}
|
});
|
|
let beforeLeftContent = ref(0)
|
let beforeCenterContent = ref(0)
|
let beforeRightContent = ref<any>(0)
|
|
// 罗表盘
|
let lbpObj = reactive<any>({
|
str: ['W', 30, 33, 'N', 3, 6, 'E', 12, 15, 'S', 21, 24],
|
attitude_pitch: 0, // 俯仰角度数
|
height: 0, // 真空高度
|
prevRotate: 0,
|
dockHeight: 0,
|
})
|
|
// 监听
|
watch(() => store.state.wsMessage, (newValue, oldValue) => {
|
// 俯仰轴角度
|
lbpObj.attitude_pitch = newValue?.attitude_pitch.toFixed(2) || '--'
|
beforeLeftContent.value = newValue?.attitude_pitch.toFixed(2) || '--'
|
// 偏航轴角度
|
lbpObj.prevRotate = newValue?.attitude_head < 0 ? 180 + (180 + newValue?.attitude_head) : newValue?.attitude_head
|
beforeCenterContent.value = newValue?.attitude_head < 0 ? 180 + (180 + newValue?.attitude_head) : newValue?.attitude_head
|
// 真空高度
|
getLnglatAltitude(newValue?.longitude, newValue?.latitude, props.cesiumViewe).then(
|
(res) => {
|
const height = newValue?.height - res?.height;
|
lbpObj.height = height.toFixed(1) || '--'
|
beforeRightContent.value = height.toFixed(1) || '--'
|
},
|
)
|
},
|
{
|
deep: true,
|
})
|
|
const ScaleTop = computed(() => {
|
return (-lbpObj.attitude_pitch * 30) / 90
|
});
|
|
const realHeight = computed(() => {
|
// 无人机高度
|
const maxHeight = ref(240)
|
// 真空高度
|
const vacuumHeight = ref(120)
|
// 机场高度
|
const dockHeightConfig = reactive({
|
'e3dea0f5-37f2-4d79-ae58-490af3228069': 14.7,
|
'4a574db8-4ad3-48f7-9f16-3edbcd8056e1': 54,
|
// 'f47ac10b-58cc-4372-a567-0e02b2c3d479': 81,
|
})
|
const workspaceId = window.localStorage.getItem('bs_workspace_id')
|
const dockHeight = dockHeightConfig?.[workspaceId] || 1
|
let proportion = 0
|
// 处于真空高度和最大高度之间
|
if (lbpObj.height < maxHeight.value && lbpObj.height >= vacuumHeight.value) {
|
const height = lbpObj.height - vacuumHeight.value
|
const proport = height / maxHeight.value
|
proportion = Math.round(proport * 50 + 50)
|
}
|
// 小于等于真空高度计算
|
if (lbpObj.height < vacuumHeight.value && lbpObj.height >= dockHeight) {
|
const height = lbpObj.height - dockHeight
|
const copyVacuumHeight = vacuumHeight.value - dockHeight
|
const proport = height / copyVacuumHeight
|
proportion = Math.round(proport * 25 + 25)
|
}
|
// 小于机场高度计算
|
if (lbpObj.height < dockHeight && lbpObj.height >= 0) {
|
const proport = lbpObj.height / dockHeight
|
proportion = Math.round(proport * 25)
|
}
|
// 大于最大高度计算
|
if (lbpObj.height >= maxHeight.value) {
|
proportion = 95
|
}
|
return `${proportion}%`
|
});
|
</script>
|
|
<style lang="scss">
|
.zp-container {
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
position: relative;
|
color: #fff;
|
.left-img,
|
.right-img {
|
position: relative;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
width: 40px;
|
background-color: rgba(0, 0, 0, 0.5);
|
|
img {
|
height: 100px;
|
}
|
}
|
.left-img-new, .right-img-new {
|
position: relative;
|
color: #1fa3f6;
|
background-color: rgba(0, 0, 0, 0.5);
|
img {
|
height: 50px;
|
}
|
}
|
.left-img-new {
|
&::before {
|
content: var(--before-content);
|
position: absolute;
|
top: -1rem;
|
left: -0.5rem;
|
font-size: 10px;
|
font-family: none;
|
}
|
.scale {
|
position: absolute;
|
width: 0.3rem;
|
height: 0.3rem;
|
background-color: #1fa3f6;
|
left: -0.5rem;
|
|
&::before {
|
content: '';
|
position: absolute;
|
width: 0;
|
height: 0;
|
top: 0rem;
|
left: 0.3rem;
|
border-top: solid 0.18rem transparent;
|
border-left: solid 0.18rem #1fa3f6;
|
border-bottom: solid 0.18rem transparent;
|
}
|
}
|
}
|
.right-img-new {
|
&::before {
|
content: var(--right-content);
|
position: absolute;
|
top: -1rem;
|
left: -0.3rem;
|
font-size: 10px;
|
font-family: none;
|
}
|
.arrow-box {
|
position: absolute;
|
bottom: 0;
|
left: 0.6rem;
|
|
.arrow {
|
position: relative;
|
width: 0.3rem;
|
height: 0.3rem;
|
background-color: #1fa3f6;
|
|
&::before {
|
content: '';
|
position: absolute;
|
right: 0.3rem;
|
top: 0;
|
border: 0.18rem solid transparent {
|
right: solid 0.18rem #1fa3f6;
|
}
|
}
|
}
|
}
|
}
|
|
.left-img {
|
.text {
|
position: absolute;
|
left: 0px;
|
top: 50px;
|
width: 60px;
|
text-align: center;
|
}
|
|
.scaleImg {
|
position: relative;
|
width: 100%;
|
height: 100px;
|
|
img {
|
margin-left: 16px;
|
}
|
|
.scale {
|
width: 10px;
|
height: 10px;
|
background-color: #1fa3f6;
|
position: absolute;
|
// margin-left: 10px;
|
|
&::before {
|
content: '';
|
position: absolute;
|
width: 0;
|
height: 0;
|
top: 0px;
|
left: 10px;
|
border-top: solid 5px transparent;
|
border-left: solid 5px #1fa3f6;
|
border-bottom: solid 5px transparent;
|
}
|
}
|
}
|
|
&::before {
|
content: attr(data-text);
|
position: absolute;
|
right: 4px;
|
top: 20px;
|
font-size: 10px;
|
// font-weight: bolder;
|
font-family: none;
|
}
|
|
// &::after {
|
// content: '俯仰角度';
|
// position: absolute;
|
// // right: 6px;
|
// text-align: right;
|
// bottom: 10px;
|
// font-size: 10px;
|
// // font-weight: bolder;
|
// font-family: none;
|
// }
|
}
|
|
.right-img {
|
&::before {
|
content: attr(data-text);
|
position: absolute;
|
left: 4px;
|
top: 20px;
|
font-size: 10px;
|
// font-weight: bolder;
|
font-family: none;
|
}
|
|
&::after {
|
// content: '真空高度';
|
// position: absolute;
|
// // left: 0px;
|
// bottom: 4px;
|
// font-size: 10px;
|
// // font-weight: bolder;
|
// font-family: none;
|
}
|
|
.ident-arrow {
|
position: relative;
|
|
.arrow-box {
|
position: absolute;
|
bottom: 0;
|
left: 16px;
|
|
.arrow {
|
position: relative;
|
width: 10px;
|
height: 10px;
|
background-color: #1fa3f6;
|
|
&::before {
|
content: '';
|
position: absolute;
|
left: -9px;
|
top: 0;
|
|
border: 5px solid transparent {
|
right: solid 5px #1fa3f6;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.instrument-center {
|
position: relative;
|
.compass-box {
|
margin: 0 0.6rem;
|
width: 5rem;
|
height: 5rem;
|
border-radius: 50%;
|
position: relative;
|
border: 24px solid rgba($color: #323931, $alpha: 0.5);
|
box-shadow: 0 2px 12px 0 #158aff;
|
user-select: none;
|
// top: 15px;
|
|
.scale {
|
width: calc(100% + 68px);
|
position: absolute;
|
top: calc(50% - 10px);
|
left: -34px;
|
padding-left: 12px;
|
font-weight: bold;
|
color: #c1c3c4;
|
text-align: left;
|
transform: rotate(var(--rotate));
|
-ms-transform: rotate(var(--rotate));
|
-moz-transform: rotate(var(--rotate));
|
-webkit-transform: rotate(var(--rotate));
|
-o-transform: rotate(var(--rotate));
|
font-size: 12px;
|
&:nth-child(3n - 2) {
|
color: #fff;
|
// font-weight: bolder;
|
font-size: 14px;
|
}
|
|
// @for $i from 1 through 12 {
|
// &-#{$i} {
|
// rotate: (360deg / 12) * $i;
|
// }
|
|
// .text-#{$i} {
|
// display: inline-block;
|
// rotate: 360deg - (360deg / 12 * $i);
|
// }
|
// }
|
}
|
|
.scale {
|
.text {
|
display: inline-block;
|
// rotate: -90deg;
|
transform: rotate(-90deg);
|
-ms-transform: rotate(-90deg);
|
-moz-transform: rotate(-90deg);
|
-webkit-transform: rotate(-90deg);
|
-o-transform: rotate(-90deg);
|
}
|
}
|
|
&::before {
|
content: '';
|
position: absolute;
|
top: -45px;
|
left: 47%;
|
transform: translateX(-50%);
|
width: 7px;
|
height: 15px;
|
background: #00ee8b;
|
margin: 0 auto;
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.5),
|
1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5),
|
1px 1px 0 rgba(0, 0, 0, 0.5);
|
}
|
|
&::after {
|
// content: attr(data-text);
|
content: var(--center-content); /* 使用 CSS 变量 */
|
position: absolute;
|
top: -60px;
|
font-size: 16px;
|
line-height: 16px;
|
font-weight: 600;
|
font-style: italic;
|
color: #00ee8b;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
}
|
|
.number-box {
|
position: relative;
|
width: 100%;
|
bottom: 0;
|
font-size: 10px;
|
display: flex;
|
justify-content: space-between;
|
.txt-input {
|
color: #00ee8b;
|
font-weight: bold;
|
}
|
}
|
|
.rotat-btn {
|
width: 16px;
|
height: 16px;
|
background-color: rgba($color: #1fa3f6, $alpha: 1);
|
position: absolute;
|
top: 10px;
|
left: 48%;
|
transform: translateX(-50%);
|
|
&::before {
|
content: '';
|
display: block;
|
width: 0;
|
height: 0;
|
border-left: 8px solid transparent;
|
border-right: 8px solid transparent;
|
border-bottom: 8px solid #1fa3f6;
|
position: absolute;
|
bottom: 100%;
|
}
|
}
|
|
.center-show {
|
width: 1rem;
|
height: 1.4rem;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
|
img {
|
width: 100%;
|
height: 100%;
|
transform: rotate(var(--rotate));
|
transition: all 0.5s linear;
|
}
|
}
|
|
&::after {
|
content: '';
|
position: absolute;
|
width: 40px;
|
top: 50%;
|
left: 0;
|
z-index: 99;
|
}
|
|
&::before {
|
content: '';
|
position: absolute;
|
width: 40px;
|
top: 50%;
|
right: 0;
|
z-index: 99;
|
}
|
}
|
}
|
</style>
|
