feat:围栏/禁飞区数据

张含笑

2025-10-30 fd3d2b1b892539c96238387d560ca7fe04cb7e63

 src/views/layerManagement/components/rightEdit.vue

@@ -1,11 +1,17 @@
<template>
  <div class="rightContainer">
    <div class="contenttitle">围栏信息</div>
    <div class="contenttitle">{{ layerParams.fenceType === 1 ? '围栏' : '禁飞区' }}信息</div>
    <div class="centerBox">
      <div class="itemRow">
        <div class="label">文件夹名称</div>
        <div>
          <el-select class="ztzf-layer-search" popper-class="ztzf-select-popper" clearable v-model="formData.area" placeholder="请选择">
          <el-select
            class="ztzf-layer-search"
            popper-class="ztzf-select-popper"
            clearable
            v-model="formData.folder_id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
@@ -16,37 +22,82 @@
        </div>
      </div>
      <div class="itemRow">
        <div class="label">围栏名称</div>
        <div class="label">{{ layerParams.fenceType === 1 ? '围栏' : '禁飞区' }}名称</div>
        <div>
          <el-input class="ztzf-input inputName" v-model="formData.name" placeholder="请输入" />
        </div>
      </div>
      <div class="itemRow" v-if="layerParams.fenceType === 2">
        <div class="label">禁飞区管控时间</div>
        <div>
          <el-date-picker
            popper-class="ztzf-layer-date-picker-popper"
            class="ztzf-layer-date-picker layertimer"
            v-model="timeValue"
             type="datetimerange"
              format="YYYY-MM-DD HH:mm"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
           
          />
        </div>
      </div>
      <div class="itemRow">
        <div class="label">围栏备注</div>
        <div class="label">{{ layerParams.fenceType === 1 ? '围栏' : '禁飞区' }}备注</div>
        <div>
          <el-input v-model="formData.description" :rows="5" type="textarea" placeholder="请输入" />
        </div>
      </div>
    </div>
    <div class="detailInfo">
      <div class="infpItem">
      <div class="infpItem" v-if="layerParams.fenceType === 1">
        <div class="itemData">
          <div class="title">围栏总数量</div>
          <div class="num"><span>{{totalCount}}</span>个</div>
          <div class="num">
            <span>{{ totalCount }}</span
            >个
          </div>
        </div>
        <div class="itemData">
          <div class="title">围栏总面积</div>
          <div class="num"><span>{{totalArea}}</span>m²</div>
          <div class="num">
            <span>{{ totalArea }}</span
            >m²
          </div>
        </div>
      </div>
      <div class="infpItem" v-if="layerParams.fenceType === 2">
        <div class="itemData">
          <div class="title">禁飞区面积</div>
          <div class="num">
            <span>1111</span>
          </div>
        </div>
        <div class="itemData">
          <div class="title">禁飞区高度</div>
          <div class="num noFly">
            <span
              ><el-input
                class="ztzf-input inputName"
                v-model="formData.altitude"
                placeholder="请输入" /></span
            >米
          </div>
        </div>
      </div>
      <div class="infpItem">
        <div class="itemData">
          <div class="title">创建时间</div>
          <div class="num"><span>{{formData?.create_time}}</span></div>
          <div class="num">
            <span>{{ formData?.create_time }}</span>
          </div>
        </div>
        <div class="itemData">
          <div class="title">创建人</div>
          <div class="num"><span>{{formData?.create_name}}</span></div>
          <div class="num">
            <span>{{ formData?.create_name }}</span>
          </div>
        </div>
      </div>
    </div>
@@ -58,31 +109,15 @@
</template>

<script setup>
import { deitFenceApi,addFenceApi } from '@/api/layer/index';
const emit = defineEmits([ 'callParentMethod']);
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs'
import { deitFenceApi, addFenceApi } from '@/api/layer/index';
import EventBus from '@/utils/eventBus';
const emit = defineEmits(['callParentMethod']);
const layerParams = inject('layerParams');
const options = [
  {
    value: 'Option1',
    label: '111',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const options = ref([]);
const timeValue = ref('')
options.value = layerParams.value.folderOption;
const formData = ref({
  folder_id: '',
  name: '',
@@ -93,17 +128,41 @@
  control_start_time: '',
  control_end_time: '',
  geo_data: '',
  noFlyZoneArea: '',

  altitude:''
});
const detailData = ref(null)
const totalArea = ref(null)
const totalCount = ref(null)
detailData.value = layerParams.value.editDetailData
 totalArea.value = layerParams.value.total_area
 totalCount.value = layerParams.value.total_count

const detailData = ref(null);
const totalArea = ref(null);
const totalCount = ref(null);
detailData.value = layerParams.value.editDetailData;
totalArea.value = layerParams.value.total_area;
totalCount.value = layerParams.value.total_count;
watch(
  () => timeValue.value,
  (newTimeArr) => {
    // timeValue 是数组：[开始时间, 结束时间]（未选择时为 '' 或空数组）
    if (Array.isArray(newTimeArr) && newTimeArr.length === 2) {
      const startTime = newTimeArr[0]; // 开始时间（Date 对象或时间字符串）
      const endTime = newTimeArr[1];   // 结束时间（Date 对象或时间字符串）

      // 用 dayjs 格式化为 "YYYY-MM-DD HH:mm:ss" 格式
      formData.value.control_start_time = dayjs(startTime).format('YYYY-MM-DD HH:mm:ss');
      formData.value.control_end_time = dayjs(endTime).format('YYYY-MM-DD HH:mm:ss');

      console.log('格式化后开始时间：', formData.value.control_start_time);
      console.log('格式化后结束时间：', formData.value.control_end_time);
    } else {
      // 未选择时间时，清空两个字段
      formData.value.control_start_time = '';
      formData.value.control_end_time = '';
    }
  },
  { immediate: true } // 初始化时执行一次，处理默认值
);
const clearAllData = () => {
  detailData.value = {}
  detailData.value = {};
  // 清空回显相关数据
  detailData.value = {};
  totalArea.value = null;
@@ -117,63 +176,86 @@
  layerParams.value.polygonPosition = null;
};
const cancelHandel = () => {
   clearAllData()
   emit('callParentMethod');
  clearAllData();
  emit('callParentMethod');
  EventBus.emit('gettreeDataApi');
};
const submitHandle = () => {
    const params={
    folder_id:1,  
    name:'测试',
    description:'333366663',
  const params = {
    folder_id: layerParams.value.fenceType === 1 ? 1 : 2,
    name: formData.value.name,
    description: formData.value.description,
    is_enabled: true,
    area:1200,
    altitude:120,
    area: formData.value.area,
    altitude: formData.value.altitude,
    geo_data: layerParams.value.polygonPosition,
    }
addFenceApi(params).then(res=>{
  console.log('保存',res);
  
})
  clearAllData()
   emit('callParentMethod');
     control_start_time:formData.value.control_start_time,
  control_end_time:formData.value.control_end_time,
  };
  // 如果是编辑模式，才添加 id
  if (layerParams.value.decideWhetherToAddOrEdit === 2) {
    params.id = detailData.value.id;
  }
  console.log('formData', params);

  if (layerParams.value.decideWhetherToAddOrEdit === 1) {
    //围栏新增
    addFenceApi(params).then(res => {
      if (res.status === 200) {
        ElMessage({
          message: '新增成功',
          type: 'success',
        });
      }

    });
  } else if (layerParams.value.decideWhetherToAddOrEdit === 2) {
    //围栏编辑
    deitFenceApi(params).then(res => {

      if (res.status === 200) {
        ElMessage({
          message: '编辑成功',
          type: 'success',
        });
      }
    });
  }

  clearAllData();
  emit('callParentMethod');
  EventBus.emit('gettreeDataApi')
};
onMounted(() => {
  // 先清空表单，避免残留旧数据
  formData.value = {
    folder_id: '',
    name: '',
    description: '',
    is_enabled: false,
    area: '',
    altitude: '',
    control_start_time: '',
    control_end_time: '',
    geo_data: '',
  };

  // 获取判断状态（默认设为 1，防止未定义时报错）
  // 获取判断状态（默认设为 1）
  const addOrEditStatus = layerParams.value.decideWhetherToAddOrEdit || 1;

  if (addOrEditStatus === 2) {
    // 编辑状态：回显数据（从 layerParams.editDetailData 读取）
    const editData = layerParams.value.editDetailData || {};
    // 表单数据回显（将编辑数据赋值给 formData，与表单字段一一对应）

    formData.value = {
      folder_id: editData.folder_id || '', // 文件夹ID（需与下拉框 options 的 value 匹配）
      name: editData.name || '', // 围栏名称
      description: editData.description || '', // 围栏备注
      is_enabled: editData.is_enabled || false, // 是否启用
      area: editData.area || '', // 面积
      altitude: editData.altitude || '', // 高度
      control_start_time: editData.control_start_time || '', // 控制开始时间
      control_end_time: editData.control_end_time || '', // 控制结束时间
      geo_data: editData.geo_data || '', // 地理数据（编辑时回显原始坐标）
      folder_id: editData.folder_id || '',
      name: editData.name || '',
      description: editData.description || '',
      is_enabled: editData.is_enabled || false,
      area: editData.area || '',
      altitude: editData.altitude || '',
      control_start_time: editData.control_start_time || '',
      control_end_time: editData.control_end_time || '',
      geo_data: editData.geo_data || '',
    };
    // 下拉框回显（若 editData 中有文件夹名称，需匹配 options 的 value）
    // 假设 editData.folder_name 是文件夹名称，需找到对应的 value 赋值给 formData.area
    const matchedFolder = options.find(item => item.label === (editData.folder_name || ''));
    if (matchedFolder) {
      formData.value.area = matchedFolder.value;

   
     if (editData.folder_id && options.value.length > 0) {
      
      const matchedFolder = options.value.find(
        item => item.value === String(editData.folder_id)
      );
     
      if (matchedFolder) {
        formData.value.folder_id = matchedFolder.value;
      }
    }

    // 回显总数和总面积（编辑时可能需要展示）
@@ -223,6 +305,10 @@
    .label {
      margin-bottom: 5px;
    }
   :deep(.el-date-editor.el-input__wrapper) {
  width: auto !important; 
 
}
  }
  .detailInfo {
    .infpItem {
@@ -242,6 +328,10 @@
          color: #ffffff;
        }
      }
      .noFly {
        display: flex;
        align-items: center;
      }
      .itemData {
        width: 50%;
      }