【类 型】：feat
【原 因】：添加 概况数据统计组件 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
air
parent
e8a1f385e9
commit
8598cb98dc
1
.gitignore
vendored
1
.gitignore
vendored
@ -2,3 +2,4 @@
|
||||
/node_modules
|
||||
/dist
|
||||
/package-lock.json
|
||||
/src/components/statistics.vue
|
||||
|
||||
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>
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div class="h-100">
|
||||
<map-box ref="mapbox"/>
|
||||
<map-box ref="mapbox">
|
||||
<template #content>
|
||||
<PlaneStatus :plane="plane" />
|
||||
</template>
|
||||
</map-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user