food/src/views/layout/components/main/planes/index.vue

<template>
  <div class="h-100">
    <!-- 地图组件 -->
    <map-box ref="mapbox" :enableShowNofly="true" :enableGuided="true" :enableFollow="true" :enblueScale="!$store.state.app.isWideScreen"
      @longPress="handleLongPress">
      <template #content>
        <BatteryStatus :plane="plane" />
        <PlaneStatus :plane="plane" />
        <ControllerTabs :plane="plane" @mapXOffset="mapXOffset" @makeRoute="makeRoute" @clearRoute="clearRoute" />
      </template>
    </map-box>
    <!-- 弹出框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="320px" top="30vh" @close="closeCallback"
      @open="openCallback">
      <!-- 点飞设置弹出框 -->
      <template v-if="dialogItem == 'guidedBox'">
        <el-form label-position="left">
          <el-form-item label="高度设置" label-width="80px">
            <el-input-number v-model="guidedAlt" label="高度设置"></el-input-number>
            <font class="m-l-5">米</font>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
          <el-button size="medium" type="primary"
            @click="publishFun(`{guidedMode:{lon:${guidedLonLat.lon},lat:${guidedLonLat.lat},alt:${guidedAlt}}`); isReserveGuidedMaker = true; dialogVisible = false">飞至</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import MapBox from '@/components/MapBox'
import ControllerTabs from '@/components/ControllerTabs'
import BatteryStatus from '@/components/BatteryStatus'
import PlaneStatus from '@/components/PlaneStatus'
import mqtt from '@/utils/mqtt'

export default {
  name: 'Planes',
  data () {
    return {
      dialogTitle: '', // 弹出框 标题
      dialogItem: '', // 弹出框 项目类型判断
      dialogVisible: false, // 弹出框 显隐
      guidedLonLat: {}, // 点飞 的经纬度
      guidedAlt: '', // 点飞的高度
      isReserveGuidedMaker: false, // 关闭指点飞行操作窗口时 标记是否删除图标
      showMapbox: true, // 数据更新的时候 用于刷新地图组件
      mapboxKey: 0, // 初始化一个变量用于控制map-box组件的重新渲染
      planesId: this.$route.params.id,
      localCount: 0 // 本地存储计数器
    }
  },
  components: {
    MapBox,
    ControllerTabs,
    BatteryStatus,
    PlaneStatus
  },
  computed: {
    plane () {
      if (this.$store.state.airList.length > 0) {
        return this.$store.state.airList.find(plane => plane.id === this.planesId)
      }
      return null
    },
    position () {
      if (this.plane) {
        if (this.plane.planeState.position.length > 0) {
          return this.plane.planeState.position
        } else {
          return []
        }
      } else {
        return []
      }
    },
    noflyData () {
      return this.$store.state.noflyData
    },
    /**
     * @description: 侧边栏显隐
     */
    isCollapse () {
      return this.$store.state.app.isCollapse
    }
  },
  methods: {
    /** 弹出框 关闭事件回调 */
    closeCallback () {
      if (this.dialogItem === 'guidedBox' && this.isReserveGuidedMaker === false) { // 关闭点飞窗口时
        this.$refs.mapbox.delGuidedMarker()// 删除所有点飞的地图标记
      }
      this.dialogVisible = false
      this.dialogItem = ''
    },
    /** 弹出框 打开事件回调 */
    openCallback () {
    },
    // 地图长按事件 记录地图经纬度
    handleLongPress (lonLat) {
      this.isReserveGuidedMaker = false
      this.dialogTitle = '指点飞行'
      this.dialogVisible = true
      this.dialogItem = 'guidedBox'
      this.guidedLonLat = lonLat // 设置点击的经纬度
      const posLen = this.plane.planeState.position.length
      this.guidedAlt = this.plane.planeState.position[posLen - 1][2]// 取出 点击时飞机的高度
    },
    /**
     * @description: 创建飞机图标
     */
    makePlane (plane) {
      let planeDefaultLonLat
      if (localStorage.getItem(plane.name)) { // 从本地缓存 拿飞机得初始位置
        planeDefaultLonLat = JSON.parse(localStorage.getItem(plane.name))
        plane.lon = planeDefaultLonLat.lon
        plane.lat = planeDefaultLonLat.lat
      } else {
        plane.lon = 100
        plane.lat = 40
      }
      this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机
      this.$refs.mapbox.makePlane(plane)// 创建飞机
      this.$refs.mapbox.goto({ lon: plane.lon, lat: plane.lat })// 跳转到飞机位置
    },
    /**
     * @description: 创建航线
     */
    makeRoute (routeData) {
      this.$refs.mapbox.makeRoute(routeData)
    },
    /**
     * @description: 清楚航线
     */
    clearRoute () {
      this.$refs.mapbox.clearRoute()
    },
    /**
     * @description: 屏幕横移
     * @param {*} val 正数向左移动 负数向右移动
     * @param {*} y 正数向上移动 负数向下移动
     */
    mapXOffset (x, y) {
      this.$refs.mapbox.mapXOffset(x, y)
    },
    /**
     * @description: 发布 mqtt 信息
     * @param {*} jsonData {'item':val} // item: questAss飞行航点任务 setQuestState 设置飞机状态  resetQuestState设置飞机初始状态 chan1油门通道1 chan2油门通道2  chan3油门通道3  chan4油门通道4 hookConteroller钩子控制 cameraController云台相机控制
     */
    publishFun (jsonData) {
      if (this.plane) {
        mqtt.publishFun(`cmd/${this.plane.macadd}`, jsonData)
      } else {
        this.$message.warning('与飞机通信未接通,请稍后')
      }
    }
  },
  mounted () {
    if (this.plane) {
      this.makePlane(this.plane) // 创建飞机图标
    }
  },
  watch: {
    plane (val) {
      if (val) this.makePlane(val)// 有飞机数据之后 在地图上创建飞机
    },
    /**
     * @description: 更新飞机位置 并画出轨迹 跟随飞机
     */
    position: {
      handler (val) {
        const len = val.length
        if (len > 2) {
          const lon = val[len - 1][0]
          const lat = val[len - 1][1]
          this.localCount++// 计数器 叠加
          if (this.localCount % 100 === 1) {
            localStorage.setItem(this.plane.name, `{ "lon": ${lon}, "lat": ${lat} }`)
          }
          this.$refs.mapbox.setPlaneLonLat({ lon: lon, lat: lat }, 0, val)// 更新飞机位置 并画出轨迹 跟随飞机
        }
      },
      deep: true
    },
    /**
     * @description: 侧边栏缩进有变化时 地图重新自适应
     */
    isCollapse: {
      handler (val) {
        if (val) {
          this.$nextTick(() => {
            this.$refs.mapbox.handleResize()
          })
        }
      }
    }
  }
}

</script>

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