<template>
  <div>
    <MMCDataTransferPanel
      class="data-panel"
      :device="uav"
      :uav-data="uavRealTimeData"
    ></MMCDataTransferPanel>
    <!-- 一键任务 返航 安全降落 手动 -->
    <ControlBottom></ControlBottom>
    <!-- 健康管理-挂载-警灯-无人机  -->
    <ControlRight></ControlRight>
    <!-- 任务 智能识别 -->
    <ControlLeft></ControlLeft>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Moment from "moment";
import ControlBottom from './components/controlBottom';
import ControlRight from './components/controlRight';
import ControlLeft from './components/controlLeft';

export default {
  name: 'ControlPanel',
  components: {
    ControlBottom,
    ControlRight,
    ControlLeft
  },
  data() {
    return {
      device: {
        cateName: "px4",
      },
      throttleValue: 500,
      battery: {
        voltage: 0,
        id: "",
      },
      
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uav", ["uavRealTimeData", "uav"]),
  },
};
</script>

<style lang="scss" scoped>
.data-panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 100;
}
</style>