feat:计算面积

张含笑

2025-10-30 6f3c7a7f01998a51cc70f7a6b5133a8253b51454

 src/views/layerManagement/components/rightEdit.vue

@@ -52,17 +52,11 @@
    </div>
    <div class="detailInfo">
      <div class="infpItem" v-if="layerParams.fenceType === 1">
       
        <div class="itemData">
          <div class="title">围栏总数量</div>
          <div class="title">围栏面积</div>
          <div class="num">
            <span>{{ totalCount }}</span
            >个
          </div>
        </div>
        <div class="itemData">
          <div class="title">围栏总面积</div>
          <div class="num">
            <span>{{ totalArea }}</span
            <span>{{ fenceArea }}</span
            >m²
          </div>
        </div>
@@ -136,30 +130,38 @@
const detailData = ref(null);
const totalArea = ref(null);
const totalCount = ref(null);
const fenceArea = ref(0)
detailData.value = layerParams.value.editDetailData;
totalArea.value = layerParams.value.total_area;
totalCount.value = layerParams.value.total_count;
fenceArea.value = layerParams.value.fenceArea

watch(
  () => layerParams.value.fenceArea,
  (newArea) => {
    if (newArea !== undefined && newArea !== null) {
      fenceArea.value = newArea;
      formData.value.area = newArea; 
    }
  },
  { immediate: true } 
);
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" 格式
    if (Array.isArray(newTimeArr) && newTimeArr.length === 2) {
      const startTime = newTimeArr[0]; 
      const endTime = newTimeArr[1];   
      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 } // 初始化时执行一次，处理默认值
  { immediate: true } 
);
const clearAllData = () => {
  detailData.value = {};
@@ -229,10 +231,10 @@
onMounted(() => {
  // 获取判断状态（默认设为 1）
  const addOrEditStatus = layerParams.value.decideWhetherToAddOrEdit || 1;

  if (addOrEditStatus === 2) {
    // 编辑状态：回显数据（从 layerParams.editDetailData 读取）
    const editData = layerParams.value.editDetailData || {};


    formData.value = {
      folder_id: editData.folder_id || '',
@@ -245,22 +247,24 @@
      control_end_time: editData.control_end_time || '',
      geo_data: editData.geo_data || '',
    };

   
     if (editData.folder_id && options.value.length > 0) {
      
     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;
      }
    }

 if (editData.control_start_time && editData.control_end_time) {
      timeValue.value = [
        dayjs(editData.control_start_time).toDate(),
        dayjs(editData.control_end_time).toDate()
      ];
    }
    // 回显总数和总面积（编辑时可能需要展示）
    totalArea.value = layerParams.value.total_area || 0;
    totalCount.value = layerParams.value.total_count || 0;
       fenceArea.value = editData.area|| 0;
  } else {
    // 新增状态：不回显数据，清空总数和总面积
    totalArea.value = null;