From 8f275ed939ec6a30d9359ff3ceee52f3e7aa5b80 Mon Sep 17 00:00:00 2001
From: tk <szdot@live.com>
Date: Wed, 24 Jul 2024 19:50:25 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afactor=20=E4=BF=A1=E6=81=AF=E6=8A=BD=E5=B1=89=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=8A=E5=9C=86=E8=A7=92=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0?=
 =?UTF-8?q?=E3=80=91=EF=BC=9A=20=E3=80=90=E8=BF=87=20=20=E7=A8=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E8=87=AA=E9=80=82=E5=BA=94=20=E5=AE=BD=E5=B1=8F=20?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E5=88=92=E5=87=BA=20=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E5=8A=A0=E5=9C=86=E8=A7=92=20=20=E4=B8=8B=E4=BE=A7=E5=88=92?=
 =?UTF-8?q?=E5=87=BA=20=E4=B8=8A=E5=86=8C=E5=8A=A0=E5=9C=86=E8=A7=92=20?=
 =?UTF-8?q?=E3=80=90=E5=BD=B1=20=20=E5=93=8D=E3=80=91=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BatteryStatus.vue        |   2 +-
 src/components/MapBox.vue               |  22 -----
 src/components/PlaneStatus copy.vue     | 103 ++++++++++++++++++++++++
 src/components/PlaneStatus.vue          |  71 +---------------
 src/styles/index.scss                   |  20 +++++
 src/views/layout/components/headbar.vue |  17 ++--
 6 files changed, 133 insertions(+), 102 deletions(-)
 create mode 100644 src/components/PlaneStatus copy.vue

diff --git a/src/components/BatteryStatus.vue b/src/components/BatteryStatus.vue
index 3a33557..c66cfdc 100644
--- a/src/components/BatteryStatus.vue
+++ b/src/components/BatteryStatus.vue
@@ -3,7 +3,7 @@
     <el-progress class="z90" :percentage="batteryRemaining" :show-text="false" :stroke-width="3"
       :color="statusColor"></el-progress>
     <tooltip v-if="batteryRemainingPower" class="z90" :horizontalPosition="`${batteryRemaining}%`"
-      backgroundColor="#5cbb7a">
+      :backgroundColor="statusColor">
       {{ batteryRemainingPower }} 毫安
     </tooltip>
     <tooltip v-if="rtlRemaining > 5" class="z90" :horizontalPosition="`${rtlRemaining}%`" backgroundColor="#ff3333">
diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue
index 5cc5755..24e9650 100644
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@@ -517,28 +517,6 @@ export default {
   }
 }
 
-class CustomControl {
-  constructor({ label, onClick }) {
-    this._label = label
-    this._onClick = onClick
-  }
-
-  onAdd (map) {
-    this._map = map
-    this._container = document.createElement('div')
-    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
-    this._button = document.createElement('button')
-    this._button.textContent = this._label
-    this._button.onclick = this._onClick
-    this._container.appendChild(this._button)
-    return this._container
-  }
-
-  onRemove () {
-    this._container.parentNode.removeChild(this._container)
-    this._map = undefined
-  }
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/PlaneStatus copy.vue b/src/components/PlaneStatus copy.vue
new file mode 100644
index 0000000..ac8f511
--- /dev/null
+++ b/src/components/PlaneStatus copy.vue	
@@ -0,0 +1,103 @@
+<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" />
+      </el-col>
+      <el-col :span="2">
+        <PublicTag icon="icon-weixing" :val="plane.planeState.voltagBattery" unit="V" state="normal" />
+      </el-col>
+      <el-col :span="2">
+        <PublicTag icon="icon-weixing" :val="plane.planeState.loadweight" unit="克" state="normal" />
+      </el-col>
+      <el-col :span="2">
+        <PublicTag icon="icon-gaodu" :val="plane.planeState.state" unit="状" state="normal" />
+      </el-col>
+      <el-col :span="3">
+        <HeartTag :heartBeat="plane.planeState.heartBeat" :heartRandom="plane.planeState.heartRandom"
+          :getPlaneMode="plane.planeState.getPlaneMode" />
+      </el-col>
+      <el-col :span="2">
+        <PublicTag icon="icon-mianxingdiaogou" :val="plane.planeState.hookstatus" unit="" state="normal" />
+      </el-col>
+      <el-col :span="2">
+        <PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
+      </el-col>
+      <el-col :span="2">
+        <PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
+      </el-col>
+      <el-col :span="2">
+        <PublicTag icon="icon-gaodu" :val="plane.planeState.battCapacity" 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 {
+  name: 'PlaneStatus',
+  data () {
+    return {
+      distance: 0
+    }
+  },
+  props: {
+    plane: {
+      typeof: 'Object',
+      deep: true
+    }
+  },
+  components: {
+    HeartTag,
+    PublicTag
+    // Tooltip
+  },
+  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>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+
+.el-row {
+  z-index: 90;
+}
+
+.batteryBox {}
+
+.batteryBox .el-progress {
+  z-index: 90;
+}
+
+.batteryBox .el-tooltip {
+  z-index: 90;
+}
+</style>
diff --git a/src/components/PlaneStatus.vue b/src/components/PlaneStatus.vue
index ac8f511..ed09c49 100644
--- a/src/components/PlaneStatus.vue
+++ b/src/components/PlaneStatus.vue
@@ -1,56 +1,16 @@
 <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" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-weixing" :val="plane.planeState.voltagBattery" unit="V" state="normal" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-weixing" :val="plane.planeState.loadweight" unit="克" state="normal" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-gaodu" :val="plane.planeState.state" unit="状" state="normal" />
-      </el-col>
-      <el-col :span="3">
-        <HeartTag :heartBeat="plane.planeState.heartBeat" :heartRandom="plane.planeState.heartRandom"
-          :getPlaneMode="plane.planeState.getPlaneMode" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-mianxingdiaogou" :val="plane.planeState.hookstatus" unit="" state="normal" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-gaodu" :val="plane.planeState.battCapacity" 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 {
   name: 'PlaneStatus',
   data () {
     return {
-      distance: 0
     }
   },
   props: {
@@ -60,44 +20,19 @@ export default {
     }
   },
   components: {
-    HeartTag,
-    PublicTag
-    // Tooltip
+
   },
   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>
 
 <style lang="scss" scoped>
 @import "@/styles/theme.scss";
-
-.el-row {
-  z-index: 90;
-}
-
-.batteryBox {}
-
-.batteryBox .el-progress {
-  z-index: 90;
-}
-
-.batteryBox .el-tooltip {
-  z-index: 90;
-}
 </style>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9ccbb21..4cae3e3 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -88,6 +88,26 @@ label {
   font-size: 16px !important;
 }
 
+.el-drawer {
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+/* 大于480px时的圆角样式 */
+.el-drawer-large {
+  border-top-left-radius: 10px !important;
+  border-bottom-left-radius: 10px !important;
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+
+/* 小于480px时的圆角样式 */
+.el-drawer-small {
+  border-top-left-radius: 10px !important;
+  border-top-right-radius: 10px !important;
+  border-bottom-left-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+
 //mapboxgl
 .mapboxgl-ctrl-bottom-left a {
   display: none !important;
diff --git a/src/views/layout/components/headbar.vue b/src/views/layout/components/headbar.vue
index d50aaf7..0b722e3 100644
--- a/src/views/layout/components/headbar.vue
+++ b/src/views/layout/components/headbar.vue
@@ -32,8 +32,9 @@
       <el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0 ? 'primary' : ''"
         @click="drawer = true" size="small" :icon="orderIcon" circle></el-button>
     </el-badge>
-    <el-drawer :visible.sync="drawer" :size="drawerSize" :append-to-body="true" :modal-append-to-body="false"
-      :direction="drawerDirection">
+    <el-drawer :custom-class="drawerAuto ? 'el-drawer-small' : 'el-drawer-large'" :visible.sync="drawer"
+      :size="drawerAuto ? '90%' : '60%'" :append-to-body="true" :modal-append-to-body="false"
+      :direction="drawerAuto ? 'btt' : 'rtl'">
       <template slot="title">
         <div>
           <i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i>
@@ -112,16 +113,10 @@ export default {
   },
   computed: {
     /**
-     * @description: 任务抽屉根据分辨率自适应
+     * @description: 屏幕宽度是否小于480
      */
-    drawerDirection () {
-      return window.innerWidth < 480 ? 'btt' : 'rtl'
-    },
-    /**
-     * @description: 任务抽屉根据分辨率自适应
-     */
-    drawerSize () {
-      return window.innerWidth < 480 ? '90%' : '60%' // 根据需要设置不同的宽度
+    drawerAuto () {
+      return window.innerWidth < 480
     },
     /**
      * @description: 侧边栏显隐