feat:新增/编辑

张含笑

2025-10-29 e17c0a2eceac008182504bdd40143658ab494c0b

feat:新增/编辑

 src/views/layerManagement/components/leftList.vue

@@ -56,7 +56,7 @@
<script setup>
import { treeDataApi } from '@/api/layer/index';
import { inject, onMounted } from 'vue';
const emit = defineEmits(['update:coverData', 'update:deitData']);
const emit = defineEmits(['update:coverData', 'update:deitData','newFencesMethods']);
const coverData = ref();
const layerParams = inject('layerParams');
const checkedKeys = ref([]); // 存储勾选的节点key
@@ -146,6 +146,7 @@
  checkedNodes.value = [];
  coverData.value = [];
    layerParams.value.editNest = true;
    layerParams.value.decideWhetherToAddOrEdit = 2
  emit('update:deitData', node.data);
};

@@ -156,6 +157,9 @@
// 新增围栏
const addFence = () => {
  layerParams.value.addNest = true;
   layerParams.value.decideWhetherToAddOrEdit = 1
   emit('newFencesMethods');

  console.log('layerParams.value',layerParams.value);
  
};

 src/views/layerManagement/components/rightEdit.vue

@@ -18,13 +18,13 @@
      <div class="itemRow">
        <div class="label">围栏名称</div>
        <div>
          <el-input class="ztzf-input inputName" v-model="detailData.name" placeholder="围栏名称" />
          <el-input class="ztzf-input inputName" v-model="formData.name" placeholder="围栏名称" />
        </div>
      </div>
      <div class="itemRow">
        <div class="label">围栏备注</div>
        <div>
          <el-input v-model="detailData.description" :rows="5" type="textarea" placeholder="请输入" />
          <el-input v-model="formData.description" :rows="5" type="textarea" placeholder="请输入" />
        </div>
      </div>
    </div>
@@ -42,11 +42,11 @@
      <div class="infpItem">
        <div class="itemData">
          <div class="title">创建时间</div>
          <div class="num"><span>{{detailData.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>{{detailData.create_name}}</span></div>
          <div class="num"><span>{{formData?.create_name}}</span></div>
        </div>
      </div>
    </div>
@@ -61,6 +61,28 @@
import { deitFenceApi } from '@/api/layer/index';
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 formData = ref({
  folder_id: '',
  name: '',
@@ -73,15 +95,29 @@
  geo_data: '',
});
const detailData = ref(null)
const totalArea = ref(null)
const totalCount = ref(null)
detailData.value = layerParams.value.editDetailData
const totalArea = layerParams.value.total_area
const totalCount = layerParams.value.total_count
console.log('layerParams',detailData.value
);
 totalArea.value = layerParams.value.total_area
 totalCount.value = layerParams.value.total_count
console.log('2222222',layerParams.value.decideWhetherToAddOrEdit);

const cancelHandel = () => {
const clearAllData = () => {
  detailData.value = {}
  // 清空回显相关数据
  detailData.value = {};
  totalArea.value = null;
  totalCount.value = null;
  // 重置判断状态（可选，根据业务需求是否需要）
  layerParams.value.decideWhetherToAddOrEdit = 1;
  // 重置面板状态和缓存数据
  layerParams.value.addNest = false;
  layerParams.value.editNest = false;
  layerParams.value.editDetailData = null;
  layerParams.value.polygonPosition = null;
};
const cancelHandel = () => {
   clearAllData()
   emit('callParentMethod');
};
const submitHandle = () => {
@@ -99,10 +135,57 @@
  console.log('保存',res);
  
})
  layerParams.value.addNest = false;
  layerParams.value.editNest = false;
  clearAllData()
   emit('callParentMethod');
};
onMounted(() => {
  // 先清空表单，避免残留旧数据
  formData.value = {
    folder_id: '',
    name: '',
    description: '',
    is_enabled: false,
    area: '',
    altitude: '',
    control_start_time: '',
    control_end_time: '',
    geo_data: '',
  };

  // 获取判断状态（默认设为 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 || '', // 地理数据（编辑时回显原始坐标）
    };
    // 下拉框回显（若 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;
    }

    // 回显总数和总面积（编辑时可能需要展示）
    totalArea.value = layerParams.value.total_area || 0;
    totalCount.value = layerParams.value.total_count || 0;
  } else {
    // 新增状态：不回显数据，清空总数和总面积
    totalArea.value = null;
    totalCount.value = null;
  }
});
</script>

<style scoped lang="scss">

 src/views/layerManagement/components/utils.js

@@ -116,6 +116,8 @@
            console.log('当前不允许绘制，whetherToDraw 为 false');
            return;
          }
		 
		  
        this.drawingMode = true
        this.curPolygon = new Cesium.PolygonHierarchy()

@@ -334,12 +336,15 @@
        // 如果不是绘制模式
        if (!this.drawingMode) {
            if (!isPolygon) {
				
				
                this.editingMode = false
                this.editPolygonPointDataSource.entities.show = false
                return
            }

            if (isPolygon) {
			
                this.editingMode = true
                this.editPolygonPointDataSource.entities.show = true
            }

 src/views/layerManagement/index.vue

@@ -15,6 +15,7 @@
          @update:coverData="handleCoverDataUpdate"
          @update:deitData="handleEdit"
          :activeName="activeName"
          @newFencesMethods="newFencesMethods"
        ></leftList>
        <rightEdit
          v-if="layerParams.addNest || layerParams.editNest && activeType !== '2'"
@@ -63,6 +64,7 @@
  total_count: 0,
  total_area: 0,
  polygonPosition:null,
  decideWhetherToAddOrEdit:null,//新增or编辑围栏
});
provide('layerParams', layerParams);
const handleClick = tab => {
@@ -76,6 +78,7 @@
const selectDataList = ref([]);
// 编辑围栏区域
const handleEdit = val => {
viewer.entities.removeAll();
  layerParams.value.editDetailData = val;
  drawPolygonExample.editThePatch(true);
  const positions = parseGeoDataToPositions(val.geo_data, val.altitude);
@@ -84,6 +87,13 @@
  drawPolygonExample.initPolygon(viewer, positions, true);
 
};
// 新增开启绘制
const newFencesMethods =()=>{
viewer.entities.removeAll();
drawPolygonExample.initHandler(viewer);
   drawPolygonExample.drawTheArea(true)
   drawPolygonExample.startDrawing();
}
// 清除地图数据
const parentMethod = () => {
drawPolygonExample.delPolygon()
@@ -212,7 +222,7 @@

  viewer = publicCesiumInstance.getViewer();
  viewInstance.value = publicCesiumInstance;
  // drawPolygonExample.initHandler(viewer);
  
};

// 编辑/绘制