【类 型】：feat 设计电量 组件

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

src/components/PlaneStatus.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <el-row class="m-15" type="flex" justify="space-between">
       <el-col :span="2">
         <PublicTag icon="icon-weixing" :val="plane.planeState.satCount" unit="颗" state="normal" />
@@ -29,11 +30,20 @@
         <PublicTag icon="icon-gaodu" :val="plane.planeState.batteryRemaining" unit="%" state="danger" />
       </el-col>
     </el-row>
+    <div class="batteryBox">
+      <el-progress :percentage="plane.planeState.batteryRemaining" :show-text="false" stroke-width="2"></el-progress>
+      <tooltip :horizontalPosition="'80%'" backgroundColor="#ff3333">
+        H
+      </tooltip>
+    </div>
+  </div>
+
 </template>
 
 <script>
 import HeartTag from '@/components/Tag/HeartTag'
 import PublicTag from '@/components/Tag/PublicTag'
+import Tooltip from '@/components/Tag/Tooltip'
 import geodist from 'geodist'
 
 export default {
@@ -51,7 +61,8 @@ export default {
   },
   components: {
     HeartTag,
-    PublicTag
+    PublicTag,
+    Tooltip
   },
   computed: {
   },
@@ -79,4 +90,14 @@ export default {
 .el-row {
   z-index: 90;
 }
+
+.batteryBox {}
+
+.batteryBox .el-progress {
+  z-index: 90;
+}
+
+.batteryBox .el-tooltip {
+  z-index: 90;
+}
 </style>

src/components/Tag/Tooltip.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="tooltip-container no-select" :style="{ left: horizontalPosition }">
+    <div class="tooltip-content fb" :style="{ backgroundColor: backgroundColor }">
+      <div class="tooltip-arrow" :style="{ borderBottomColor: backgroundColor }"></div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Tooltip',
+  props: {
+    horizontalPosition: {
+      type: String,
+      default: '50%' // 百分比，默认为 50%
+    },
+    backgroundColor: {
+      type: String,
+      default: '#333' // 默认背景颜色
+    }
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.tooltip-container {
+  position: relative;
+  display: inline-block;
+  top: 20px;
+}
+
+.tooltip-content {
+  color: #fff;
+  padding: 5px 8px;
+  border-radius: 4px;
+  position: absolute;
+  white-space: nowrap;
+  transform: translate(-50%, -100%);
+  z-index: 1000;
+}
+
+.tooltip-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #333;
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+</style>

src/views/layout/components/main/site/index.vue

@@ -30,9 +30,11 @@
       </el-table-column>
       <el-table-column align="center" label="已绑航线" width="200">
         <template slot-scope="scope">
-          <el-tag class="iconfont" :class="scope.row.bind_route === null || scope.row.bind_route === '' ?'icon-ic_tingyong': 'icon-feihangluxian'"
-            :type="scope.row.bind_route === null || scope.row.bind_route === '' ?'danger': ''  ">
-            <font class="m-l-5">{{ scope.row.bind_route === null || scope.row.bind_route === ''?"未绑定": scope.row.bind_route}}</font>
+          <el-tag class="iconfont"
+            :class="scope.row.bind_route === null || scope.row.bind_route === '' ? 'icon-ic_tingyong' : 'icon-feihangluxian'"
+            :type="scope.row.bind_route === null || scope.row.bind_route === '' ? 'danger' : ''">
+            <font class="m-l-5">{{ scope.row.bind_route === null || scope.row.bind_route === '' ? "未绑定" :
+        scope.row.bind_route }}</font>
           </el-tag>
         </template>
       </el-table-column>