【类 型】：feat
【原 因】：新建 概况统计组件 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
air
parent
f55ec12808
commit
c39aebdbfd
254
src/components/statistics.vue
Normal file
254
src/components/statistics.vue
Normal file
@ -0,0 +1,254 @@
|
|||||||
|
<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>
|
||||||
@ -25,7 +25,6 @@
|
|||||||
<el-input-number v-model="guidedAlt" label="高度设置"></el-input-number>
|
<el-input-number v-model="guidedAlt" label="高度设置"></el-input-number>
|
||||||
<font class="m-l-5">米</font>
|
<font class="m-l-5">米</font>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
</el-form>
|
</el-form>
|
||||||
<span slot="footer" class="dialog-footer">
|
<span slot="footer" class="dialog-footer">
|
||||||
<el-button size="medium" @click="dialogVisible = false">关闭</el-button>
|
<el-button size="medium" @click="dialogVisible = false">关闭</el-button>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user