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

【原  因】：
【过  程】：
【影  响】：

src/components/PlaneStatus.vue

@@ -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="flex">
-      <div :class="online ? heartAnimation ? 'icon-heart online' : 'icon-heart1 online' : 'icon-xinsui offline'"
+      <div class="tag flex mac mc iconfont"
-        class="iconfont f-s-24"></div>
+        :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="flex">
-      <div class="iconfont icon-weixing f-s-24"></div>
+      <div class="tag flex mac mc iconfont icon-weixing">
-      <div>{{ satCount }}颗</div>
+      </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>

src/styles/myIcon.scss

@@ -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阿里巴巴