diff --git a/package-lock.json b/package-lock.json
index d478e08..07c78d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "eslint-plugin-promise": "^4.2.1",
         "eslint-plugin-standard": "^4.0.0",
         "eslint-plugin-vue": "^6.2.2",
+        "geodist": "^0.2.1",
         "lodash": "^4.17.21",
         "mapbox-gl": "^2.15.0",
         "mqtt": "^2.18.9",
@@ -8135,6 +8136,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geodist": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/geodist/-/geodist-0.2.1.tgz",
+      "integrity": "sha512-tZFJeHXyb203sDtn15gg2Smgfo9LZRjlbNn9F9HrJ3/W2+yqy7BzSyKuGzSxYFcofa2hsfrke5wgT/ws8jrjcw==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/geojson-vt": {
       "version": "3.2.1",
       "resolved": "https://registry.npmmirror.com/geojson-vt/-/geojson-vt-3.2.1.tgz",
@@ -23580,6 +23590,12 @@
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
       "dev": true
     },
+    "geodist": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/geodist/-/geodist-0.2.1.tgz",
+      "integrity": "sha512-tZFJeHXyb203sDtn15gg2Smgfo9LZRjlbNn9F9HrJ3/W2+yqy7BzSyKuGzSxYFcofa2hsfrke5wgT/ws8jrjcw==",
+      "dev": true
+    },
     "geojson-vt": {
       "version": "3.2.1",
       "resolved": "https://registry.npmmirror.com/geojson-vt/-/geojson-vt-3.2.1.tgz",
diff --git a/package.json b/package.json
index 7c90f1c..38c2757 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
+    "geodist": "^0.2.1",
     "lodash": "^4.17.21",
     "mapbox-gl": "^2.15.0",
     "mqtt": "^2.18.9",
diff --git a/src/components/PlaneStatus.vue b/src/components/PlaneStatus.vue
index 3be393f..c8a761e 100644
--- a/src/components/PlaneStatus.vue
+++ b/src/components/PlaneStatus.vue
@@ -23,10 +23,10 @@
       <PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
     </el-col>
     <el-col :span="2">
-      <PublicTag icon="icon-gaodu" :val="plane.planeState.fixType" unit="" state="danger" />
+      <PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
     </el-col>
     <el-col :span="2">
-      <PublicTag icon="icon-gaodu" :val="plane.planeState.batteryRemaining" unit="米" state="danger" />
+      <PublicTag icon="icon-gaodu" :val="plane.planeState.batteryRemaining" unit="%" state="danger" />
     </el-col>
   </el-row>
 </template>
@@ -34,11 +34,13 @@
 <script>
 import HeartTag from '@/components/Tag/HeartTag'
 import PublicTag from '@/components/Tag/PublicTag'
+import geodist from 'geodist'
 
 export default {
   name: 'PlaneStatus',
   data () {
     return {
+      distance: 0
     }
   },
   props: {
@@ -54,9 +56,19 @@ export default {
   computed: {
   },
   watch: {
+    distance (val) {
+      console.log(val + '米')
+    }
   },
   methods: {},
   created () {
+    try {
+      const point1 = { lat: 52.518611, lon: 13.408056 }
+      const point2 = { lat: 51.507222, lon: -0.1275 }
+      this.distance = geodist(point1, point2, { unit: 'meters' })
+    } catch (error) {
+      console.error('Error calculating distance:', error)
+    }
   }
 }
 </script>