feat:点击区域显示信息

张含笑

2025-10-31 783aea42531badecda5f5f0f0ddb7cf05c1ed1df

 src/views/layerManagement/components/rightEdit.vue

@@ -6,6 +6,7 @@
        <div class="label">文件夹名称</div>
        <div>
          <el-select
            :disabled="isDisabled"
            class="ztzf-layer-search"
            popper-class="ztzf-select-popper"
            clearable
@@ -24,13 +25,14 @@
      <div class="itemRow">
        <div class="label">{{ layerParams.fenceType === 1 ? '围栏' : '禁飞区' }}名称</div>
        <div>
          <el-input class="ztzf-input inputName" v-model="formData.name" placeholder="请输入" />
          <el-input   :disabled="isDisabled" 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
            :disabled="isDisabled"
            popper-class="ztzf-layer-date-picker-popper"
            class="ztzf-layer-date-picker layertimer"
            v-model="timeValue"
@@ -45,7 +47,7 @@
      <div class="itemRow">
        <div class="label">{{ layerParams.fenceType === 1 ? '围栏' : '禁飞区' }}备注</div>
        <div>
          <el-input v-model="formData.description" :rows="5" type="textarea" placeholder="请输入" />
          <el-input   :disabled="isDisabled" v-model="formData.description" :rows="5" type="textarea" placeholder="请输入" />
        </div>
      </div>
    </div>
@@ -76,6 +78,7 @@
          <div class="num noFly">
            <span
              ><el-input
              :disabled="isDisabled"
                class="ztzf-input inputName"
                v-model="formData.altitude"
                placeholder="请输入" /></span
@@ -140,6 +143,18 @@
const fenceArea = ref(0);
detailData.value = layerParams.value.editDetailData;
fenceArea.value = layerParams.value.fenceArea;
const isDisabled = computed(() => {
  return layerParams.value.editingIsProhibited;
});

watch(
  () => layerParams.value.editingIsProhibited,
  newVal => {
   console.log('newVal',newVal);
   
  },
  { immediate: true }
);
watch(
  () => layerParams.value.fenceArea,
  newArea => {
@@ -149,6 +164,61 @@
    }
  },
  { immediate: true }
);
// 监听editDetailData的变化
watch(
  () => layerParams.value.editDetailData,
  (newVal) => {
    if (newVal) {
      // 当editDetailData有值时，填充表单
      formData.value = {
        ...formData.value,
        folder_id: newVal.folder_id || '',
        name: newVal.name || '',
        description: newVal.description || '',
        is_enabled: newVal.is_enabled || false,
        area: newVal.area || '',
        altitude: newVal.altitude || '',
        control_start_time: newVal.control_start_time || '',
        control_end_time: newVal.control_end_time || '',
        geo_data: newVal.geo_data || '',
        create_name: newVal.create_name || '',
        create_time: newVal.create_time ? dayjs(newVal.create_time).format('YYYY年MM月DD日') : '',
      };
      
      // 处理文件夹选择
      if (newVal.folder_id && options.value.length > 0) {
        const matchedFolder = options.value.find(item => item.value === String(newVal.folder_id));
        if (matchedFolder) {
          formData.value.folder_id = matchedFolder.value;
        }
      }
      
      // 处理时间选择
      if (newVal.control_start_time && newVal.control_end_time) {
        timeValue.value = [
          dayjs(newVal.control_start_time).toDate(),
          dayjs(newVal.control_end_time).toDate(),
        ];
      }
    } else {
      // 当editDetailData为null时，重置表单
      formData.value = {
        folder_id: '',
        name: '',
        description: '',
        is_enabled: false,
        area: '',
        altitude: '',
        control_start_time: '',
        control_end_time: '',
        geo_data: '',
        altitude: '',
      };
      timeValue.value = '';
    }
  },
  { immediate: true, deep: true }
);
watch(
  () => timeValue.value,
@@ -173,6 +243,7 @@
  layerParams.value.editNest = false;
  layerParams.value.editDetailData = null;
  layerParams.value.polygonPosition = null;
  layerParams.value.editingIsProhibited = false;
};
const cancelHandel = () => {
  clearAllData();