【类 型】：
【原 因】： 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
air
parent
c39aebdbfd
commit
e8a1f385e9
@ -1,254 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="mainBox flex column no-select">
|
|
||||||
<!-- 心跳 -->
|
|
||||||
<div class="flex">
|
|
||||||
<div class="tag flex mac mc iconfont"
|
|
||||||
:class="online ? heartAnimation ? 'icon-heart online' : 'icon-heart1 online' : 'icon-xinsui offline'">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 锁定状态 -->
|
|
||||||
<div class="flex">
|
|
||||||
<div class="tag flex mac mc iconfont" :class="isLockState ? 'icon-suoding' : 'icon-jiesuo'">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 飞机模式 -->
|
|
||||||
<div class="flex">
|
|
||||||
<div v-if="getPlaneMode" class="plane-mode p-l-5 p-r-5 mc mac">
|
|
||||||
<font class="plane-mode-text">{{ getPlaneMode }}</font>
|
|
||||||
</div>
|
|
||||||
<div class="tag flex mac mc iconfont icon-moshixuanze">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 卫星 -->
|
|
||||||
<div class="flex">
|
|
||||||
<div v-if="satCount" class="plane-mode p-l-5 p-r-5 mc mac">
|
|
||||||
<font class="plane-mode-text">{{ fixType }} {{ satCount }}颗</font>
|
|
||||||
</div>
|
|
||||||
<div class="tag flex mac mc iconfont icon-weixing">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 电池电压 -->
|
|
||||||
<div class="flex">
|
|
||||||
<div v-if="voltagBattery" class="plane-mode p-l-5 p-r-5 mc mac">
|
|
||||||
<font class="plane-mode-text">{{ voltagBattery }}V</font>
|
|
||||||
</div>
|
|
||||||
<div class="tag flex mac mc iconfont icon-dianya1">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 电池电流 -->
|
|
||||||
<div class="flex">
|
|
||||||
<div v-if="currentBattery" class="plane-mode p-l-5 p-r-5 mc mac">
|
|
||||||
<font class="plane-mode-text">{{ currentBattery }}A</font>
|
|
||||||
</div>
|
|
||||||
<div class="tag flex mac mc iconfont icon-dianliu">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 飞机高度 -->
|
|
||||||
<div class="flex">
|
|
||||||
<div v-if="positionAlt" class="plane-mode p-l-5 p-r-5 mc mac">
|
|
||||||
<font class="plane-mode-text">{{ positionAlt }}米</font>
|
|
||||||
</div>
|
|
||||||
<div class="tag flex mac mc iconfont icon-gaodu">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 飞机对地速度 -->
|
|
||||||
<div class="flex">
|
|
||||||
<div v-if="groundSpeed" class="plane-mode p-l-5 p-r-5 mc mac">
|
|
||||||
<font class="plane-mode-text">{{ groundSpeed }}米/秒</font>
|
|
||||||
</div>
|
|
||||||
<div class="tag flex mac mc iconfont icon-sudu">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 飞机载重 钩子状态 -->
|
|
||||||
<div class="flex">
|
|
||||||
<div v-if="loadweight" class="plane-mode p-l-5 p-r-5 mc mac">
|
|
||||||
<font class="plane-mode-text">{{hookstatus}} {{ loadweight }}克</font>
|
|
||||||
</div>
|
|
||||||
<div class="tag flex mac mc iconfont icon-mianxingdiaogou">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'PlaneStatus',
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
/* 心跳 */
|
|
||||||
heartAnimation: false, // 控制心跳动画图标
|
|
||||||
online: false,
|
|
||||||
isOnlineSetTimeout: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
plane: {
|
|
||||||
type: Object,
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// 心跳随机数
|
|
||||||
heartRandom () {
|
|
||||||
if (this.plane && this.plane.planeState) {
|
|
||||||
return this.plane.planeState.heartRandom
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
// 锁定状态
|
|
||||||
isLockState () {
|
|
||||||
if (this.plane && this.plane.planeState) {
|
|
||||||
if (Number(this.plane.planeState.heartBeat) & 128) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
// 飞机模式
|
|
||||||
getPlaneMode () {
|
|
||||||
if (this.plane && this.plane.planeState) {
|
|
||||||
return this.plane.planeState.getPlaneMode
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
// 卫星数
|
|
||||||
satCount () {
|
|
||||||
if (this.plane && this.plane.planeState) {
|
|
||||||
return this.plane.planeState.satCount
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
// 定位状态
|
|
||||||
fixType () {
|
|
||||||
if (this.plane && this.plane.planeState) {
|
|
||||||
return this.plane.planeState.fixType
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
// 电池电压
|
|
||||||
voltagBattery () {
|
|
||||||
if (this.plane && this.plane.planeState) {
|
|
||||||
return this.plane.planeState.voltagBattery
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
// 电池电流
|
|
||||||
currentBattery () {
|
|
||||||
if (this.plane && this.plane.planeState) {
|
|
||||||
if (Number(this.plane.planeState.currentBattery) > 0) {
|
|
||||||
return this.plane.planeState.currentBattery
|
|
||||||
} else {
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
// 飞机高度
|
|
||||||
positionAlt () {
|
|
||||||
if (this.plane && this.plane.planeState && this.plane.planeState.position.length > 0) {
|
|
||||||
const posLen = this.plane.planeState.position.length
|
|
||||||
return this.plane.planeState.position[posLen - 1][2]
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
// 飞机对地速度
|
|
||||||
groundSpeed () {
|
|
||||||
if (this.plane && this.plane.planeState) {
|
|
||||||
return this.plane.planeState.groundSpeed
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
// 钩子状态
|
|
||||||
hookstatus () {
|
|
||||||
if (this.plane && this.plane.planeState) {
|
|
||||||
return this.plane.planeState.hookstatus
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
// 飞机载重
|
|
||||||
loadweight () {
|
|
||||||
if (this.plane && this.plane.planeState) {
|
|
||||||
return this.plane.planeState.loadweight
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
heartRandom: {
|
|
||||||
handler () {
|
|
||||||
console.log('心跳：', this.plane.heartBeat)
|
|
||||||
// 心跳动画
|
|
||||||
this.heartAnimation = true
|
|
||||||
setTimeout(() => {
|
|
||||||
this.heartAnimation = false
|
|
||||||
}, 500)
|
|
||||||
// 在线状态
|
|
||||||
if (this.isOnlineSetTimeout) { // 进入本次心跳 删除掉线计时 既以下会重新计时
|
|
||||||
clearInterval(this.isOnlineSetTimeout)
|
|
||||||
}
|
|
||||||
this.online = true
|
|
||||||
this.isOnlineSetTimeout = setTimeout(() => { // 计时10秒后 掉线
|
|
||||||
this.online = false
|
|
||||||
}, 10000)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
},
|
|
||||||
destroyed () {
|
|
||||||
if (this.isOnlineSetTimeout) {
|
|
||||||
clearInterval(this.isOnlineSetTimeout)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "@/styles/theme.scss";
|
|
||||||
|
|
||||||
.mainBox {
|
|
||||||
position: absolute;
|
|
||||||
width: 29px;
|
|
||||||
top: 40px;
|
|
||||||
left: 10px;
|
|
||||||
z-index: 90;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mainBox .flex:not(:first-child) {
|
|
||||||
border-top: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
height: 29px;
|
|
||||||
min-width: 29px;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 0;
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plane-mode {
|
|
||||||
position: absolute;
|
|
||||||
left: 29px;
|
|
||||||
height: 29px;
|
|
||||||
display: flex;
|
|
||||||
border-top-right-radius: 4px;
|
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.plane-mode-text {
|
|
||||||
display: inline-block;
|
|
||||||
white-space: nowrap; /* 防止内容换行 */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user