DiKongGanZhiPingTai/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue

<template>
  <div class="areaInfo">
    <a-row>
      <a-col :span="24">
        <div class="annotationTitle"> 自定义飞行区 </div>
      </a-col>
      <a-col :span="24">
        <div class="annotationTitle">
          <!-- 自定义禁降区 -->
          <div
            v-if="props.nowShowAreaData.type == 'noland'"
            :style="{
              width: '15px',
              height: '15px',
              outline: `2px solid #FF9900`,
              'margin-left': '2px',
              'margin-right': '12px',
            }"
          />
          <!-- 自定义作业区 -->
          <div
            v-if="props.nowShowAreaData.type == 'dfence'"
            :style="{
              width: '13px',
              height: '13px',
              outline: `2px solid #00FF00`,
              'margin-left': '2px',
              'margin-right': '12px',
              'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
            }"
          />
          <!-- 自定义限飞区 -->
          <div
            v-if="props.nowShowAreaData.type == 'nfz'"
            :style="{
              width: '13px',
              height: '13px',
              outline: `2px solid #FF0000`,
              background: `#FF000055`,
              'margin-left': '2px',
              'margin-right': '12px',
              'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
            }"
          />
          <a-input v-model:value="nowAreaData.name" style="width: 65%" size="small"></a-input>
          <div class="annotationTitleButton" @click="handlerLocation">
            <AimOutlined />
          </div>
          <div class="annotationTitleButton" @click="deleteArea">
            <DeleteOutlined />
          </div>
        </div>
      </a-col>
      <a-col :span="24">
        <div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'noland'">
          自定义作业区绘制后，飞行器只能在该区域内飞行
        </div>
        <div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'dfence'">
          自定义禁降区绘制后，飞行器不能在绘制区域内自动降落
        </div>
        <div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'nfz'">
          自定义作业区绘制后，飞行器只能在该区域内飞行
        </div>
      </a-col>
      <a-col :span="24">
        <div class="annotationTitle"> 更多信息 </div>
      </a-col>
      <!-- 启用状态 -->
      <a-col :span="6">
        <div class="annotationTitle">启用状态</div>
      </a-col>
      <a-col :span="18">
        <div class="annotationContent">
          {{ props.nowShowAreaData.state == 0 ? '已启用' : '已禁用' }}
        </div>
      </a-col>
      <!-- 水平周长 -->
      <a-col :span="6">
        <div class="annotationTitle">水平周长</div>
      </a-col>
      <a-col :span="18">
        <div class="annotationContent"> {{ length.toFixed(2) }}m</div>
      </a-col>
      <!-- 水平面积 -->
      <a-col :span="6">
        <div class="annotationTitle">水平面积</div>
      </a-col>
      <a-col :span="18">
        <div class="annotationContent"> {{ area.toFixed(2) }}㎡</div>
      </a-col>
      <!-- 半径 -->
      <a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Circle'">
        <div class="annotationTitle">半径</div>
      </a-col>
      <a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Circle'">
        <div class="annotationContent">
          <a-input v-model:value="nowAreaData.properties.radius" style="width: 100%" size="small">
            <template #addonAfter> <span style="color: white">m</span> </template>
          </a-input>
        </div>
      </a-col>
      <!-- 绘制者 -->
      <a-col :span="6">
        <div class="annotationTitle">绘制者</div>
      </a-col>
      <a-col :span="18">
        <div class="annotationContent"> {{ props.nowShowAreaData.createdUser }}</div>
      </a-col>
      <a-col :span="24">
        <div class="area_buttons">
          <div class="cancelDiv" @click="closePathAreaInfo">取消</div>
          <div class="startDiv" :class="{ disabled: props.nowShowAreaData }">确认</div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, nextTick } from 'vue';
  import * as mars3d from 'mars3d';
  import * as Cesium from 'mars3d-cesium';
  import {
    CloseOutlined,
    DeleteOutlined,
    CheckOutlined,
    AimOutlined,
    AlignLeftOutlined,
    InfoCircleOutlined,
    AntDesignOutlined,
    ExpandAltOutlined,
    BorderOutlined,
    LogoutOutlined,
    MinusOutlined,
    PlusOutlined,
  } from '@ant-design/icons-vue';
  import {
    GetWorkAreaList,
    AddWorkArea,
    UpdateWorkArea,
    DeleteWorkArea,
  } from '@/api/demo/mediaLibrary';
  import { cloneDeep } from 'lodash-es';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage, createConfirm } = useMessage();

  const props = defineProps(['allAreaDataList', 'nowShowAreaData']);
  const emits = defineEmits([
    'setNowShowAreaData',
    'closePathAreaInfo',
    'handlerLocation',
    'deleteArea',
  ]);
  const nowAreaData: any = ref(props.nowShowAreaData);

  // 关闭
  function closePathAreaInfo() {
    emits('closePathAreaInfo');
  }
  // 移动到中心位置
  function handlerLocation() {
    emits('handlerLocation', {
      lng: props.nowShowAreaData.properties.centerPoint[0],
      lat: props.nowShowAreaData.properties.centerPoint[1],
    });
  }
  // 删除此区域
  function deleteArea() {
    createConfirm({
      iconType: 'info',
      title: '提示',
      content: '将会影响到项目内设备的作业范围，是否删除该区域？',
      onOk: async () => {
        emits('deleteArea', props.nowShowAreaData);
      },
    });
  }

  // 水平周长和水平面积
  const length: any = ref();
  const area: any = ref();

  watch(
    () => nowAreaData.value,
    () => {
      emits('setNowShowAreaData', nowAreaData.value, false);
    },
    {
      deep: true,
    },
  );
  watch(
    () => props.nowShowAreaData,
    () => {
      nowAreaData.value = props.nowShowAreaData;
      if (props.nowShowAreaData.geomtype == 'Polygon') {
        // 水平距离
        length.value = mars3d.MeasureUtil.getDistance(nowAreaData.value.coordinates[0]);
        // 水平面积
        area.value = mars3d.MeasureUtil.getArea(nowAreaData.value.coordinates[0]);
      }
      if (props.nowShowAreaData.geomtype == 'Circle') {
        // 水平距离
        length.value = 2 * Math.PI * parseFloat(nowAreaData.value.properties.radius);
        // 水平面积
        area.value =
          Math.PI *
          parseFloat(nowAreaData.value.properties.radius) *
          parseFloat(nowAreaData.value.properties.radius);
      }
    },
    {
      deep: true,
      immediate: true,
    },
  );
</script>
<style lang="less" scoped>
  .areaInfo {
    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;

    position: relative;
    width: 100%;
    height: 100%;
    background: #232323;
    padding: 15px;
  }

  .annotationTitle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #ffffff;
    font-size: 14px;
    min-height: 45px;
    height: auto;
    width: 100%;
    flex-wrap: wrap;

    .annotationTitleButton_right {
      height: 20px;
      width: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      font-size: 18px;
    }
    .annotationTitleButton {
      height: 20px;
      width: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 12px;
      font-size: 18px;
    }
  }

  .annotationContent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 45px;
    height: auto;
    width: 100%;
    flex-wrap: wrap;
    color: #ffffff;
  }

  .annotationButton {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 45px;
    height: auto;
    width: 100%;
    flex-wrap: wrap;
  }

  .annotationPrompt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 45px;
    height: auto;
    width: 100%;
    flex-wrap: wrap;
    color: #ffffff55;
  }

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: #3c3c3c;
    border-radius: 2px;

    &:hover {
      background: #5d5f61;
    }
  }

  .button.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: #ccc;
  }

  .numDiv {
    width: calc(80% - 70px);
    display: flex;
    align-items: center;
    justify-content: center;

    .numSpan {
      color: #2d8cf0;
      font-size: 26px;
      font-weight: bold;

      &:hover {
        text-decoration: underline;
        text-decoration-color: #2d8cf0;
      }
    }
  }

  // 取消和开始检测按钮
  .area_buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #ffffff55;
    width: 100%;
    height: 68px;
    gap: 20px;

    .cancelDiv {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #3c3c3c;
      color: #ffffff;
      width: 40%;
      height: 32px;
      border-radius: 5px;

      &:hover {
        background: #5d5f61;
      }
    }

    .startDiv {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0960bd;
      color: #ffffff;
      width: 40%;
      height: 32px;
      border-radius: 5px;

      &:hover {
        background: #2a7dc9;
      }
    }
  }
</style>