DiKongGanZhiPingTai/src/views/demo/workmanagement/flightoperation/src/LoadControl.vue

<template>
  <div class="remote-debugging" v-if="airportVal" v-drag>
    <div class="title">
      <span> 负载控制 </span>
      <div @click="emits('changeLoadControl')">
        <CloseOutlined />
      </div>
    </div>
    <div class="content">
      <div class="content-item">
        <span>负载控制</span>
        <a-button>抢夺负载控制</a-button>
      </div>
      <div class="content-item">
        <span>切换相机模式</span>
        <a-button>抢夺负载控制</a-button>
      </div>
      <div class="content-item">
        <span>拍照</span>
        <a-button>单拍</a-button>
      </div>
      <div class="direction-controller">
        <img src="@/assets/images/flightoperation/direction_controller.png" alt="" />
        <div class="direction-controller-top"></div>
        <div class="direction-controller-right"></div>
        <div class="direction-controller-bottom"></div>
        <div class="direction-controller-left"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue';
  import { getClient, createConnection } from '@/utils/mqtt';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { vDrag } from '@/utils/drag';

  const emits = defineEmits(['changeLoadControl']);
  const props = defineProps({
    airportAllVal: Object,
  });
  console.log(props);
  const checked = ref(false);
  const airportVal: any = ref({
    mode_code: 0,
    wind_speed: 0,
    environment_temperature: 0,
    temperature: 0,
    rainfall: 0,
    network_state: {
      rate: 0,
    },
    drone_in_dock: 0,
    drone_charge_state: {
      capacity_percent: 0,
    },
  });
  watch(
    () => props.airportAllVal,
    (val) => {
      console.log(val);
      airportVal.value = val.data;
    },
  );

  onMounted(() => {});
</script>
<style lang="less" scoped>
  .remote-debugging {
    position: absolute;
    bottom: 100px;
    left: 300px;
    width: 360px;
    height: 420px;
    padding: 10px 20px;
    margin: 10px 0 0 10px;
    background: #0d0e15;
    box-shadow:
      0px 10px 30px 0px rgba(0, 0, 6, 0.15),
      inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
    border-radius: 6px;
    backdrop-filter: blur(3px);
    color: #fff;
    .title {
      width: 100%;
      padding: 10px 0;
      box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
      border-bottom: 1px solid #4e5778;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        cursor: pointer;
      }
    }
    .content-title {
      font-size: 14px;
      padding: 10px 0;
      span {
        font-size: 12px;
      }
    }
    .content-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      span {
        display: block;
        width: 50%;
        text-align: right;
      }
      button {
        text-align: center;
        background: none;
        font-size: 12px;
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
        border-radius: 2px;
        border: 1px solid #3b4154;
        color: #fff;
      }
    }
    .content-button {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .direction-controller {
      position: relative;
      img {
        margin-left: 60px;
        width: 200px;
      }
      .direction-controller-top {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 20px;
        left: 130px;
        cursor: pointer;
      }
      .direction-controller-right {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 70px;
        right: 80px;
        cursor: pointer;
      }
      .direction-controller-bottom {
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 20px;
        right: 130px;
        cursor: pointer;
      }
      .direction-controller-left {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 80px;
        left: 80px;
        cursor: pointer;
      }
    }
  }
</style>