Food/food
3
0
Fork 0
Code Issues 60 Pull Requests Actions Packages Projects Releases Wiki Activity

【类 型】：feat 设置飞机状态组件 ui

Browse Source 
【原  因】：
【过  程】：
【影  响】：
This commit is contained in:
szdot 2024-07-25 00:32:23 +08:00
parent 60473bb245
commit 2c7bae44a0
2 changed files with 63 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/PlaneStatus.vue
View File

@ -1,14 +1,53 @@
<template>
<div class="mainBox flex column ofh">
<div class="mainBox flex ofh column no-select">
<!-- 心跳 -->
<div class="tag flex mac mc">
<div :class="online ? heartAnimation ? 'icon-heart online' : 'icon-heart1 online' : 'icon-xinsui offline'"
class="iconfont f-s-24"></div>
<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 class="tag flex mac mc iconfont icon-moshixuanze">
</div>
</div>
<!-- 卫星 -->
<div class="tag flex mac">
<div class="iconfont icon-weixing f-s-24"></div>
<div>{{ satCount }}颗</div>
<div class="flex">
<div class="tag flex mac mc iconfont icon-weixing">
</div>
<!-- <div class=" tag flex mac mc f-s-16">
{{ satCount }}颗
</div> -->
</div>
<!-- 电池电压 -->
<div class="flex">
<div class="tag flex mac mc iconfont icon-dianya1">
</div>
</div>
<!-- 电池电流 -->
<div class="flex">
<div class="tag flex mac mc iconfont icon-dianliu">
</div>
</div>
<!-- 飞机高度 -->
<div class="flex">
<div class="tag flex mac mc iconfont icon-gaodu">
</div>
</div>
<!-- 飞机对地速度 -->
<div class="flex">
<div class="tag flex mac mc iconfont icon-sudu">
</div>
</div>
<!-- 钩子状态 1px solid #ddd-->
<div class="flex">
<div class="tag flex mac mc iconfont icon-mianxingdiaogou">
</div>
</div>
</div>
@ -40,7 +79,16 @@ export default {
if (this.plane && this.plane.planeState) {
return this.plane.planeState.heartRandom
}
return 0
return null
},
// 锁定状态
isLockState () {
if (this.plane && this.plane.planeState) {
if (Number(this.plane.planeState.heartBeat) & 128) {
return false
}
}
return true
},
// 卫星数
satCount () {
@ -84,18 +132,21 @@ export default {
top: 12px;
left: 12px;
z-index: 90;
background-color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
border-radius: 4px;
}
.mainBox .flex:not(:first-child) {
border-top: 1px solid #ddd;
}
.tag {
height: 29px;
min-width: 29px;
background-color: white;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
border: 0;
overflow: hidden;
font-size: 22px;
}
</style>

2
src/styles/myIcon.scss
View File

@ -1 +1 @@
@import 'https://at.alicdn.com/t/c/font_3703467_om4sfs0bw5s.css'; //iconfont阿里巴巴
@import 'https://at.alicdn.com/t/c/font_3703467_msxbfmdznja.css'; //iconfont阿里巴巴