【类型】：style 格式变动

【原因】：【过程】：【影响】：
2024-07-25 05:13:30 +08:00 · 2024-07-25 05:13:30 +08:00 · b072965257
commit b072965257
parent 79c1dc2978
4 changed files with 315 additions and 151 deletions
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@ -17,8 +17,10 @@ export default {
      lngLats: [], // 航线 所有航点
      wayLngLats: [], // 航线 不包括起点航点
      takeoffLngLats: [], // 航线 第一个航点 起点 最后一个航点
+      isflow: false, // 飞机经纬度变化时是否跟随飞机
      // 地图样式
-      GoogleRasterStyle: { // mapbox官方样式 卫星地图
+      GoogleRasterStyle: {
+        // mapbox官方样式 卫星地图
        name: 'Mapbox Streets',
        sprite: this.$store.state.settings.host + '/Public/map/sprite',
        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
@ -34,7 +36,8 @@ export default {
      },
      MapBoxglRasterStyle: 'mapbox://styles/mapbox/outdoors-v12', // mapbox官方样式 矢量街道
      MapBoxglSatellite: 'mapbox://styles/mapbox/satellite-streets-v12', // mapbox官方样式 卫星街道
-      GaodeVectorStyle: { // 第三方 高德矢量
+      GaodeVectorStyle: {
+        // 第三方 高德矢量
        name: 'Gaode Vector',
        sprite: this.$store.state.settings.host + '/Public/map/sprite',
        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
@ -43,12 +46,15 @@ export default {
          gaode: {
            type: 'raster',
            tileSize: 256, // 瓦片大小 256 512像素
-            tiles: ['http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}']
+            tiles: [
+              'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
+            ]
          }
        },
        layers: [{ id: 'GaodeVectorLayer', type: 'raster', source: 'gaode' }]
      },
-      GaodeRasterStyle: { // 第三方 高德卫星
+      GaodeRasterStyle: {
+        // 第三方 高德卫星
        name: 'Gaode Raster',
        sprite: this.$store.state.settings.host + '/Public/map/sprite',
        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
@ -57,7 +63,9 @@ export default {
          gaode: {
            type: 'raster',
            tileSize: 256, // 瓦片大小 256 512像素
-            tiles: ['https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}']
+            tiles: [
+              'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
+            ]
          }
        },
        layers: [{ id: 'GaodeRasterLayer', type: 'raster', source: 'gaode' }]
@ -73,7 +81,8 @@ export default {
    }
  },
  mounted () {
-    this.init().then(() => { // 地图初始化之后
+    this.init().then(() => {
+      // 地图初始化之后
      this.map.on('load', () => {
        /* 更新样式，添加自定义 sprite */

@ -114,14 +123,16 @@ export default {

      // 长按事件 传longPress到组件外部调用
      let pressTimer
-      this.map.on('mousedown', (event) => { // pc端点击事件
+      this.map.on('mousedown', (event) => {
+        // pc端点击事件
        pressTimer = setTimeout(() => {
          const lngLat = this.map.unproject(event.point)
          // 将经纬度信息传递到组件外部
          this.$emit('longPress', lngLat)
        }, 1000) // 作为长按的时间阈值
      })
-      this.map.on('touchstart', (event) => { // 移动端点击事件
+      this.map.on('touchstart', (event) => {
+        // 移动端点击事件
        pressTimer = setTimeout(() => {
          const lngLat = this.map.unproject(event.point)
          // 将经纬度信息传递到组件外部
@ -138,11 +149,12 @@ export default {
  },
  methods: {
    /**
-       * @description: 地图初始化
-       */
+     * @description: 地图初始化
+     */
    async init () {
      // token
-      mapboxgl.accessToken = 'pk.eyJ1Ijoic3pkb3QiLCJhIjoiY2xhN2pkMWFoMHJ4eTN3cXp6bmlzaHZ0NCJ9.3hH-EAUr0wQCaLvIM2lBMQ'
+      mapboxgl.accessToken =
+        'pk.eyJ1Ijoic3pkb3QiLCJhIjoiY2xhN2pkMWFoMHJ4eTN3cXp6bmlzaHZ0NCJ9.3hH-EAUr0wQCaLvIM2lBMQ'
      // 实例化map
      this.map = new mapboxgl.Map({
        container: 'map',
@ -153,21 +165,31 @@ export default {
        bearing: 0,
        projection: 'globe'
      })
-      // 地图控件
-      this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')// 移动旋转指南针
-      // this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')// 地图比例
-      this.map.addControl(new mapboxgl.FullscreenControl(), 'top-right')// 全屏
-      this.map.addControl(
-        new mapboxgl.GeolocateControl({
-          positionOptions: {
-            enableHighAccuracy: true
-          },
-          // When active the map will receive updates to the device's location as it changes.
-          trackUserLocation: true,
-          // Draw an arrow next to the location dot to indicate which direction the device is heading.
-          showUserHeading: true
-        })
-      )// 跟随
+      /* 地图控件 */
+      // 移动旋转指南针
+      this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')
+      // 地图比例
+      // this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')
+      // 全屏
+      this.map.addControl(new mapboxgl.FullscreenControl(), 'top-right')
+      // 跟随飞机
+      // this.map.addControl(
+      //   new mapboxgl.GeolocateControl({
+      //     positionOptions: {
+      //       enableHighAccuracy: true
+      //     },
+      //     trackUserLocation: true,
+      //     showUserHeading: true
+      //   }), 'top-right'
+      // )
+      const customControl = new CustomControl({
+        label: '点',
+        onClick: () => {
+          this.isflow = !this.isflow
+          this.goto({ lng: 20, lat: 30 })// 跳转到飞机位置
+        }
+      })
+      this.map.addControl(customControl, 'top-right')
    },
    /**
     * @description: 清除地图上的航线
@ -194,9 +216,9 @@ export default {
      }
    },
    /**
-       * @description: 绘画航线
-       * @param {*} routeObj 航点文件对象
-       */
+     * @description: 绘画航线
+     * @param {*} routeObj 航点文件对象
+     */
    makeRoute (routeObj) {
      // 初始化清空航线
      this.clearRoute()
@ -215,7 +237,9 @@ export default {
        this.takeoffLngLats.push(this.lngLats[2])
        this.takeoffLngLats.push(this.lngLats[1])
        this.takeoffLngLats.push(this.lngLats[this.lngLats.length - 2])
-      } else if (routeObj.questAss.tasks[this.lngLats.length - 1].command === 21) {
+      } else if (
+        routeObj.questAss.tasks[this.lngLats.length - 1].command === 21
+      ) {
        this.takeoffLngLats.push(this.lngLats[2])
        this.takeoffLngLats.push(this.lngLats[1])
      }
@ -238,13 +262,13 @@ export default {
        source: 'takeoff_route',
        layout: {
          'line-join': 'round', // 线连接处的样式
-          'line-cap': 'round'// 线结束处的样式
+          'line-cap': 'round' // 线结束处的样式
        },
        paint: {
          'line-color': '#fff', // 线的颜色
          'line-width': 2, // 线的宽度
          'line-opacity': 1.0, // 线的透明度
-          'line-dasharray': [3, 2]// 虚线
+          'line-dasharray': [3, 2] // 虚线
        }
      })
      // 航线 叠加描边线
@ -265,12 +289,12 @@ export default {
        source: 'way_route',
        layout: {
          'line-join': 'round', // 线连接处的样式
-          'line-cap': 'round'// 线结束处的样式
+          'line-cap': 'round' // 线结束处的样式
        },
        paint: {
          'line-color': '#fff', // 线的颜色
          'line-width': 4, // 线的宽度
-          'line-opacity': 1.0// 线的透明度
+          'line-opacity': 1.0 // 线的透明度
        }
      })
      this.map.addLayer({
@ -279,32 +303,35 @@ export default {
        source: 'way_route',
        layout: {
          'line-join': 'round', // 线连接处的样式
-          'line-cap': 'round'// 线结束处的样式
+          'line-cap': 'round' // 线结束处的样式
        },
        paint: {
          'line-color': '#f00', // 线的颜色
          'line-width': 2, // 线的宽度
-          'line-opacity': 1.0// 线的透明度
+          'line-opacity': 1.0 // 线的透明度
        }
      })
      // 航点 图标 PS:home点 起飞点 航点 送餐点等
      this.lngLats.forEach((item, index) => {
        // home点
-        if (index === 0) { // 第一点home点
+        if (index === 0) {
+          // 第一点home点
          this.map.addSource('home_point', {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
-              features: [{
-                type: 'Feature',
-                geometry: {
-                  type: 'Point',
-                  coordinates: item
-                },
-                properties: {
-                  'marker-symbol': 'homePoint'// home点图标
+              features: [
+                {
+                  type: 'Feature',
+                  geometry: {
+                    type: 'Point',
+                    coordinates: item
+                  },
+                  properties: {
+                    'marker-symbol': 'homePoint' // home点图标
+                  }
                }
-              }]
+              ]
            }
          })
          this.map.addLayer({
@ -317,28 +344,33 @@ export default {
              'icon-allow-overlap': true
            }
          })
-        } else if (index === 1) { // 起飞点
+        } else if (index === 1) {
+          // 起飞点
          let takeoffPoint
          // 起点图标设定 根据最后一个航点为RETURN_TO_LAUNCH 20 返回起点降落 或者 最后一个航点为LAND 21 指定点降落
          if (routeObj.questAss.tasks[this.lngLats.length - 1].command === 20) {
            takeoffPoint = 'takeoffLandPoint'
-          } else if (routeObj.questAss.tasks[this.lngLats.length - 1].command === 21) {
+          } else if (
+            routeObj.questAss.tasks[this.lngLats.length - 1].command === 21
+          ) {
            takeoffPoint = 'takeoffPoint'
          }
          this.map.addSource('takeoff_point', {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
-              features: [{
-                type: 'Feature',
-                geometry: {
-                  type: 'Point',
-                  coordinates: item
-                },
-                properties: {
-                  'marker-symbol': takeoffPoint// 起飞点图标
+              features: [
+                {
+                  type: 'Feature',
+                  geometry: {
+                    type: 'Point',
+                    coordinates: item
+                  },
+                  properties: {
+                    'marker-symbol': takeoffPoint // 起飞点图标
+                  }
                }
-              }]
+              ]
            }
          })
          this.map.addLayer({
@ -351,31 +383,39 @@ export default {
              'icon-allow-overlap': true
            }
          })
-        } else { // waypoint点
-          if (index !== this.lngLats.length - 1) { // 最后一个点不显示 要不和最后一个点结合 要不和起点结合
+        } else {
+          // waypoint点
+          if (index !== this.lngLats.length - 1) {
+            // 最后一个点不显示 要不和最后一个点结合 要不和起点结合
            let wayPoint = 'wayPoint'
-            if (index === this.lngLats.length - 2) { // 降落点 如果是LAND 21 和最后一个waypoint点结合
-              if (routeObj.questAss.tasks[this.lngLats.length - 1].command === 21) {
+            if (index === this.lngLats.length - 2) {
+              // 降落点 如果是LAND 21 和最后一个waypoint点结合
+              if (
+                routeObj.questAss.tasks[this.lngLats.length - 1].command === 21
+              ) {
                wayPoint = 'wayLandPoint'
              }
            }
-            if (routeObj.questAss.tasks[index].command === 94) { // command字段为94既然 投放放勾航点 放勾图标
+            if (routeObj.questAss.tasks[index].command === 94) {
+              // command字段为94既然 投放放勾航点 放勾图标
              wayPoint = 'hookPoint'
            }
            this.map.addSource('way_point' + index, {
              type: 'geojson',
              data: {
                type: 'FeatureCollection',
-                features: [{
-                  type: 'Feature',
-                  geometry: {
-                    type: 'Point',
-                    coordinates: item
-                  },
-                  properties: {
-                    'marker-symbol': wayPoint
+                features: [
+                  {
+                    type: 'Feature',
+                    geometry: {
+                      type: 'Point',
+                      coordinates: item
+                    },
+                    properties: {
+                      'marker-symbol': wayPoint
+                    }
                  }
-                }]
+                ]
              }
            })
            this.map.addLayer({
@ -403,13 +443,18 @@ export default {
        properties: {},
        geometry: {
          type: 'LineString',
-          coordinates: coordinatesArray.map(coord => [coord[0], coord[1], coord[2]])
+          coordinates: coordinatesArray.map((coord) => [
+            coord[0],
+            coord[1],
+            coord[2]
+          ])
        }
      }
      // 不是第一次 则改变路径图层里面得数据
      if (this.map.getLayer('path')) {
        this.map.getSource('path').setData(geojson)
-      } else { // 第一次在地图里添加路径图层
+      } else {
+        // 第一次在地图里添加路径图层
        // 如果坐标数组不为空，创建新路径
        if (coordinatesArray.length > 0) {
          // 添加3D图层
@ -433,9 +478,9 @@ export default {
      }
    },
    /**
-   * @description: 创建一个飞机
-   * @param {*} plane 飞机对象
-   */
+     * @description: 创建一个飞机
+     * @param {*} plane 飞机对象
+     */
    makePlane (plane, index = 0) {
      const customIcon = document.createElement('div')
      customIcon.className = 'custom-marker' // 添加自定义样式类名
@ -445,14 +490,18 @@ export default {
      // 创建一个marker对象
      this.planes[index] = new mapboxgl.Marker(customIcon)
        .setLngLat([plane.lng, plane.lat])
-        .setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML('<h3>' + plane.name + '</h3><hr><p>macID:' + plane.macadd + '</p>')) // 添加弹出窗口
+        .setPopup(
+          new mapboxgl.Popup({ offset: 25 }).setHTML(
+            '<h3>' + plane.name + '</h3><hr><p>macID:' + plane.macadd + '</p>'
+          )
+        ) // 添加弹出窗口
        .addTo(this.map)
    },
    /**
-   * @description: 移除页面上的所有飞机
-   */
+     * @description: 移除页面上的所有飞机
+     */
    removePlanes () {
-      this.planes.forEach(plane => {
+      this.planes.forEach((plane) => {
        plane.remove()
      })
      this.planes = []
@ -461,19 +510,19 @@ export default {
     * @description: 实时更新经纬度
     * @param {obj} lnglat lng经度 lat纬度
     * @param {*} index 飞机序号
-     * @param {*} pathArr 是否创建轨迹
+     * @param {*} pathArr 飞机轨迹 痕迹坐标数组
     */
-    setPlaneLngLat (lnglat, index, pathArr, isflow) {
+    setPlaneLngLat (lnglat, index, pathArr) {
      // 设置新的经纬度
      const plane = this.planes[index]
      if (plane != null) {
        plane.setLngLat([lnglat.lng, lnglat.lat])
      }
      // 创建轨迹
-      this.createPathWithArray(pathArr)// 创建轨迹
+      this.createPathWithArray(pathArr) // 创建轨迹
      console.log(pathArr)
      // 镜头跟随飞机
-      if (isflow) {
+      if (this.isflow) {
        this.map.flyTo({
          center: lnglat,
          speed: 2,
@ -485,9 +534,9 @@ export default {
      }
    },
    /**
-   * @description: 镜头跳转
-   * @param {obj} lnglat {lng:lng,lat:lat} 经纬度
-   */
+     * @description: 镜头跳转
+     * @param {obj} lnglat {lng:lng,lat:lat} 经纬度
+     */
    goto (lnglat) {
      this.map.flyTo({
        center: lnglat,
@ -499,10 +548,10 @@ export default {
      })
    },
    /**
-   * @description: 屏幕横移 纵移
-   * @param {*} x 正数向左移动 负数向右移动
-   * @param {*} y 正数向上移动 负数向下移动
-   */
+     * @description: 屏幕横移 纵移
+     * @param {*} x 正数向左移动 负数向右移动
+     * @param {*} y 正数向上移动 负数向下移动
+     */
    mapXOffset (x, y) {
      this.map.panBy([x, y], {
        duration: 333 // 过渡持续时间，以毫秒为单位
@ -519,13 +568,39 @@ export default {
  },
  beforeDestroy () {
    if (this.map) {
-      this.$store.commit('app/setDefaultLngLat', this.map.getCenter())// 记录当前经纬度 缺省
-      this.$store.commit('app/setDefaultZoom', this.map.getZoom())// 记录当前经纬度 缺省
-      this.map.remove()// 清除地图资源
+      this.$store.commit('app/setDefaultLngLat', this.map.getCenter()) // 记录当前经纬度 缺省
+      this.$store.commit('app/setDefaultZoom', this.map.getZoom()) // 记录当前经纬度 缺省
+      this.map.remove() // 清除地图资源
+    }
+  },
+  watch: {
+    isflow (val) {
+      console.log(val)
    }
  }
 }
+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/styles/index.scss
+++ b/src/styles/index.scss
@ -62,10 +62,11 @@ label {
  font-weight: 700;
 }

-.disno{
+.disno {
  display: none;
 }
-.z90{
+
+.z90 {
  z-index: 90;
 }

@ -87,11 +88,13 @@ label {
 .el-button {
  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;
@ -247,15 +250,20 @@ label {
 /* 当屏幕宽度小于等于420px时 */
@media (max-width: 420px) {
  .el-dialog {
-    width: 90% !important; /* 根据需要调整宽度 */
-    max-width: 360px !important; /* 根据需要设置最大宽度 */
+    width: 90% !important;
+    /* 根据需要调整宽度 */
+    max-width: 360px !important;
+    /* 根据需要设置最大宽度 */
  }
-  
+
  .el-message-box {
-    width: 90% !important; /* 调整宽度以适应小屏幕 */
-    max-width: 360px !important; /* 根据需要设置最大宽度 */
+    width: 90% !important;
+    /* 调整宽度以适应小屏幕 */
+    max-width: 360px !important;
+    /* 根据需要设置最大宽度 */
  }
 }
+
 /*隐藏声音api 的弹出框*/
 .rvNotification {
  display: none;
--- a/src/views/layout/components/headbar.vue
+++ b/src/views/layout/components/headbar.vue
@ -2,7 +2,10 @@
  <div>
    <!-- menu缩进按钮 -->
    <div class="w-50px h-50px fc l" id="menuTabB" @click="handleCollapse">
-      <i class="iconfont f-s-26" :class="isCollapse ? 'icon-a-yousuojin3x' : 'icon-a-zuosuojin3x'"></i>
+      <i
+        class="iconfont f-s-26"
+        :class="isCollapse ? 'icon-a-yousuojin3x' : 'icon-a-zuosuojin3x'"
+      ></i>
    </div>
    <!-- 面包屑 -->
    <Breadcrumb class="l l-h-50 m-l-5" />
@ -10,37 +13,68 @@
    <div class="right-menu m-r-5">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
-          <img v-if="avatar.indexOf('.jpg') !== -1 || avatar.indexOf('.gif') !== -1 || avatar.indexOf('.png') !== -1"
-            :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img
+            v-if="
+              avatar.indexOf('.jpg') !== -1 ||
+              avatar.indexOf('.gif') !== -1 ||
+              avatar.indexOf('.png') !== -1
+            "
+            :src="avatar + '?imageView2/1/w/80/h/80'"
+            class="user-avatar"
+          />
          <el-avatar v-else size="medium" icon="el-icon-user-solid"></el-avatar>
          <i class="el-icon-caret-bottom"></i>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">退出登录</span>
+            <span style="display: block">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 页面刷新 -->
    <div class="l-h-50 p-r-15 r">
-      <el-button size="small" icon="iconfont icon-shuaxin" @click="refreshPage" circle></el-button>
+      <el-button
+        size="small"
+        icon="iconfont icon-shuaxin"
+        @click="refreshPage"
+        circle
+      ></el-button>
    </div>
    <!-- 订单信息按钮 -->
-    <el-badge :hidden="pendingCount + processingCount + shippedCount + requestedCount == 0 ? true : false"
-      :value="pendingCount + processingCount + shippedCount + requestedCount" class="navbarBadge l-h-50 p-r-15 r">
-      <el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0 ? 'primary' : ''"
-        @click="drawer = true" size="small" :icon="orderIcon" circle></el-button>
+    <el-badge
+      :hidden="
+        pendingCount + processingCount + shippedCount + requestedCount == 0
+          ? true
+          : false
+      "
+      :value="pendingCount + processingCount + shippedCount + requestedCount"
+      class="navbarBadge l-h-50 p-r-15 r"
+    >
+      <el-button
+        :type="
+          pendingCount + processingCount + shippedCount + requestedCount !== 0
+            ? 'primary'
+            : ''
+        "
+        @click="drawer = true"
+        size="small"
+        :icon="orderIcon"
+        circle
+      ></el-button>
    </el-badge>
-    <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'">
+    <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>
-          <h3>
-            待处理订单
-          </h3>
+          <h3>待处理订单</h3>
        </div>
      </template>
      <el-button-group class="m-l-20 m-b-15">
@ -50,7 +84,10 @@
        <el-tab-pane>
          <template slot="label">
            <span>未接单</span>
-            <el-badge :hidden="pendingCount == 0 ? true : false" :value="pendingCount">
+            <el-badge
+              :hidden="pendingCount == 0 ? true : false"
+              :value="pendingCount"
+            >
            </el-badge>
          </template>
          <QuestTabs :list="pendingList" />
@ -58,7 +95,10 @@
        <el-tab-pane>
          <template slot="label">
            <span>已接单</span>
-            <el-badge :hidden="processingCount == 0 ? true : false" :value="processingCount">
+            <el-badge
+              :hidden="processingCount == 0 ? true : false"
+              :value="processingCount"
+            >
            </el-badge>
          </template>
          <QuestTabs :list="processingList" />
@ -66,7 +106,10 @@
        <el-tab-pane>
          <template slot="label">
            <span>已发货</span>
-            <el-badge :hidden="shippedCount == 0 ? true : false" :value="shippedCount">
+            <el-badge
+              :hidden="shippedCount == 0 ? true : false"
+              :value="shippedCount"
+            >
            </el-badge>
          </template>
          <QuestTabs :list="shippedList" />
@ -74,7 +117,10 @@
        <el-tab-pane>
          <template slot="label">
            <span>退款申请中</span>
-            <el-badge :hidden="requestedCount == 0 ? true : false" :value="requestedCount">
+            <el-badge
+              :hidden="requestedCount == 0 ? true : false"
+              :value="requestedCount"
+            >
            </el-badge>
          </template>
          <QuestTabs :list="requestedList" />
@ -83,9 +129,21 @@
    </el-drawer>
    <!-- mqtt状态灯 -->
    <div class="l-h-50 p-r-15 r">
-      <el-button size="small" :type="mqttState === true ? 'success' : 'danger'"
-        :icon="mqttState === true ? 'iconfont icon-yaokong2' : 'iconfont icon-yaokong2-copy'" circle
-        @click="mqttState === true ? $message.success('指令服务器链接正常') : $message.error('未链接到指令服务器')"></el-button>
+      <el-button
+        size="small"
+        :type="mqttState === true ? 'success' : 'danger'"
+        :icon="
+          mqttState === true
+            ? 'iconfont icon-yaokong2'
+            : 'iconfont icon-yaokong2-copy'
+        "
+        circle
+        @click="
+          mqttState === true
+            ? $message.success('指令服务器链接正常')
+            : $message.error('未链接到指令服务器')
+        "
+      ></el-button>
    </div>
  </div>
 </template>
@ -140,13 +198,20 @@ export default {
     * @description: 获取 所有已付款订单列表
     */
    paidOrderList () {
-      return this.$store.state.paidOrderList.filter(item => item.shop_id === this.shop_id)
+      return this.$store.state.paidOrderList.filter(
+        (item) => item.shop_id === this.shop_id
+      )
    },
    /**
     * @description: 过滤 未接单 并且没有申请退款的 订单
     */
    pendingList () {
-      return this.paidOrderList.filter(item => item.main_status === '已付款' && item.shipment_status === '未接单' && item.refund_status !== '申请中')
+      return this.paidOrderList.filter(
+        (item) =>
+          item.main_status === '已付款' &&
+          item.shipment_status === '未接单' &&
+          item.refund_status !== '申请中'
+      )
    },
    /**
     * @description: 未接单 总数
@ -158,7 +223,12 @@ export default {
     * @description: 过滤 已接单 并且没有申请退款的 订单
     */
    processingList () {
-      return this.paidOrderList.filter(item => item.main_status === '已付款' && item.shipment_status === '已接单' && item.refund_status !== '申请中')
+      return this.paidOrderList.filter(
+        (item) =>
+          item.main_status === '已付款' &&
+          item.shipment_status === '已接单' &&
+          item.refund_status !== '申请中'
+      )
    },
    /**
     * @description: 已接单 总数
@ -170,7 +240,12 @@ export default {
     * @description: 过滤 已发货 并且没有申请退款的 订单
     */
    shippedList () {
-      return this.paidOrderList.filter(item => item.main_status === '已付款' && item.shipment_status === '已发货' && item.refund_status !== '申请中')
+      return this.paidOrderList.filter(
+        (item) =>
+          item.main_status === '已付款' &&
+          item.shipment_status === '已发货' &&
+          item.refund_status !== '申请中'
+      )
    },
    /**
     * @description: 已发货 总数
@ -182,7 +257,9 @@ export default {
     * @description: 过滤 退款申请中 订单
     */
    requestedList () {
-      return this.paidOrderList.filter(item => item.refund_status === '申请中')
+      return this.paidOrderList.filter(
+        (item) => item.refund_status === '申请中'
+      )
    },
    /**
     * @description: 退款申请中 总数
@ -195,7 +272,13 @@ export default {
     * @return {*} 图标样式
     */
    orderIcon () {
-      if (this.pendingCount + this.processingCount + this.shippedCount + this.requestedCount === 0) {
+      if (
+        this.pendingCount +
+          this.processingCount +
+          this.shippedCount +
+          this.requestedCount ===
+        0
+      ) {
        return 'iconfont icon-meiyoudingdan-01'
      } else {
        if (this.animationTrumpet) {
@ -217,30 +300,28 @@ export default {
    /**
     * @description: 计算订单数量 订单变化播放声音 显示在图标右上角小红圈内
     */
-    computeQuestList () {
-
-    },
+    computeQuestList () {},
    /**
     * @description: 刷新当前页面
     */
    refreshPage () {
      /* init */
-      this.$store.commit('app/setIsMobile')// 获取客户端平台类型
-      this.$store.dispatch('fetchAirList')// 获取飞机列表
-      this.$store.dispatch('fetchShopList')// 获取商铺列表
-      this.$store.dispatch('fetchAdminList')// 获取管理员列表
-      this.$store.dispatch('fetchSiteList')// 获取站点列表
-      this.$store.dispatch('fetchRouteList')// 获取航线列表
-      this.$store.dispatch('fetchCategoryList')// 获取分类列表（小程序）
-      this.$store.dispatch('fetchPaidOrderList')// 获取订单列表
+      this.$store.commit('app/setIsMobile') // 获取客户端平台类型
+      this.$store.dispatch('fetchAirList') // 获取飞机列表
+      this.$store.dispatch('fetchShopList') // 获取商铺列表
+      this.$store.dispatch('fetchAdminList') // 获取管理员列表
+      this.$store.dispatch('fetchSiteList') // 获取站点列表
+      this.$store.dispatch('fetchRouteList') // 获取航线列表
+      this.$store.dispatch('fetchCategoryList') // 获取分类列表（小程序）
+      this.$store.dispatch('fetchPaidOrderList') // 获取订单列表
    },
    /**
     * @description: 登出
     */
    logout () {
-      this.$store.dispatch('user/destroyUserAsync').then(
-        this.$router.push('/login')
-      )
+      this.$store
+        .dispatch('user/destroyUserAsync')
+        .then(this.$router.push('/login'))
    }
  },
  watch: {
@ -250,7 +331,8 @@ export default {
        if (this.getQuestInterval !== null) {
          clearInterval(this.getQuestInterval)
        }
-        if (newVal.length > 0) { // 订单更新时 订单数大于0 面包条订单图标跳动
+        if (newVal.length > 0) {
+          // 订单更新时 订单数大于0 面包条订单图标跳动
          this.getQuestInterval = setInterval(() => {
            this.animationTrumpet = !this.animationTrumpet // 面包条订单图标跳动
          }, 500)
@ -271,13 +353,12 @@ export default {
      }
    }
  },
-  created () {
-  }
+  created () {}
 }
 </script>

 <style lang="scss" scoped>
-@import "@/styles/theme.scss";
+@import '@/styles/theme.scss';

 #menuTabB:hover {
  background-color: $white-color;
@ -308,10 +389,10 @@ export default {

    &.hover-effect {
      cursor: pointer;
-      transition: background .3s;
+      transition: background 0.3s;

      &:hover {
-        background: rgba(0, 0, 0, .025)
+        background: rgba(0, 0, 0, 0.025);
      }
    }
  }
--- a/src/views/layout/components/main/planes/index.vue
+++ b/src/views/layout/components/main/planes/index.vue
@ -74,7 +74,6 @@ export default {
      this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机
      this.$refs.mapbox.makePlane(plane)// 创建飞机
      this.$refs.mapbox.goto({ lng: plane.lng, lat: plane.lat })// 跳转到飞机位置
-      console.log('hi')
    },
    /**
     * @description: 创建航线
@ -125,7 +124,7 @@ export default {
          if (this.localCount % 100 === 1) {
            localStorage.setItem(this.plane.name, `{ "lng": ${lng}, "lat": ${lat} }`)
          }
-          this.$refs.mapbox.setPlaneLngLat({ lng: lng, lat: lat }, 0, val, true)// 更新飞机位置 并画出轨迹 跟随飞机
+          this.$refs.mapbox.setPlaneLngLat({ lng: lng, lat: lat }, 0, val)// 更新飞机位置 并画出轨迹 跟随飞机
        }
      },
      deep: true
@ -144,6 +143,7 @@ export default {
    }
  }
 }
+
 </script>

 <style lang="scss" scoped></style>