【类型】：factor 信息抽屉加上圆角

【原因】：【过程】：自适应宽屏右侧划出左侧加圆角下侧划出上册加圆角【影响】：
2024-07-24 19:50:25 +08:00 · 2024-07-24 19:50:25 +08:00 · 8f275ed939
commit 8f275ed939
parent 7490cff74d
6 changed files with 133 additions and 102 deletions
--- 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">
--- 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>
--- a/src/components/PlaneStatus
+++ b/src/components/PlaneStatus
@ -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>
--- 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>
--- 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;
--- 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: 侧边栏显隐