【类 型】：feat
【原 因】：增加摄像头 图像显示组件 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
air
parent
67ba91620b
commit
7e2842b6d7
258
src/components/VideoBox.vue
Normal file
258
src/components/VideoBox.vue
Normal file
@ -0,0 +1,258 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mainBox flex column no-select">
|
||||||
|
<!-- 心跳 ps:黑色只网络通 绿色飞控有效心跳-->
|
||||||
|
<div class="flex">
|
||||||
|
<div class="tag flex mac mc iconfont" :class="[heartIconClass, usefulHeartClass]"></div>
|
||||||
|
</div>
|
||||||
|
<!-- 解锁状态 -->
|
||||||
|
<div class="flex">
|
||||||
|
<div class="tag flex mac mc iconfont" :class="isUnlock ? 'icon-jiesuo' : 'icon-suoding'"></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" v-if="hookstatus || loadweight">
|
||||||
|
{{ hookstatus || '' }} {{ loadweight ? 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 // 控制心跳动画图标
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
plane: {
|
||||||
|
type: Object,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 飞机在线状态
|
||||||
|
online () {
|
||||||
|
if (this.plane && this.plane.planeState) {
|
||||||
|
return this.plane.planeState.online
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
// 心跳随机数
|
||||||
|
heartRandom () {
|
||||||
|
if (this.plane && this.plane.planeState) {
|
||||||
|
return this.plane.planeState.heartRandom
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
heartIconClass () {
|
||||||
|
if (!this.online) {
|
||||||
|
return 'icon-xinsui offline'
|
||||||
|
}
|
||||||
|
return this.heartAnimation ? 'icon-heart online' : 'icon-heart1 online'
|
||||||
|
},
|
||||||
|
usefulHeartClass () {
|
||||||
|
return this.online && this.plane.planeState.heartBeat ? 'useful-heart' : ''
|
||||||
|
},
|
||||||
|
// 解锁状态
|
||||||
|
isUnlock () {
|
||||||
|
if (this.plane && this.plane.planeState) {
|
||||||
|
return this.plane.planeState.isUnlock
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
// 飞机模式
|
||||||
|
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 () {
|
||||||
|
// 心跳动画
|
||||||
|
this.heartAnimation = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.heartAnimation = false
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
},
|
||||||
|
destroyed () {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
/* 防止内容换行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.useful-heart {
|
||||||
|
color: $success-color;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user