feat:全选显示

张含笑

2025-10-29 42b15fc6d2468ebbc392bc2eacc1505dbc259594

feat:全选显示

 src/api/layer/index.js

@@ -6,4 +6,30 @@
        params,
        
    })
  };
  };
//   电子围栏
//   编辑
export const deitFenceApi = data => {
    return request({
      url:  `/drone-device-core/layer/api/v1/data`,
      method: 'put',
      data: data,
    });
  };

// 删除
export const deleteFenceApi = (id) => {
    return request({
      url: `/drone-device-core/layer/api/v1/data?id=${id}`,
      method: 'delete',
    });
  };

// 新增
export const attachDownload = (data) => {
    return request({
        url: `/drone-device-core/layer/api/v1/data`,
        method: 'post',
        data
    })
}

 src/views/layerManagement/components/leftList.vue

@@ -43,7 +43,7 @@
                type="text"
                @click="handleLocation(node)"
              ></el-button>
              <el-button icon="el-icon-edit" type="text" @click="handleEdit(node)"></el-button>
              <el-button icon="el-icon-edit" type="text" @click.stop="handleEdit(node)"></el-button>
              <el-button icon="el-icon-delete" type="text" @click="handleDelete(node)"></el-button>
            </div>
          </div>
@@ -56,7 +56,7 @@
<script setup>
import { treeDataApi } from '@/api/layer/index';
import { inject, onMounted } from 'vue';
const emit = defineEmits(['update:coverData']);
const emit = defineEmits(['update:coverData', 'update:deitData']);
const coverData = ref();
const layerParams = inject('layerParams');
const checkedKeys = ref([]); // 存储勾选的节点key
@@ -80,40 +80,45 @@
  try {
    const res = await treeDataApi();
    treeAllData.value = res.data.data;
    console.log('接口获取数据', treeAllData.value);

    setupWatch();
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

const setupWatch = () => {
  watch(
    () => props.activeName,
    newVal => {
      const matchedCategory = treeAllData.value.find(item => item.name === newVal);
      treeData.value = matchedCategory.children;

      if (treeData.value && treeData.value.length > 0) {
        const folderNode = treeData.value[0];
        // 赋值给 layerParams
        layerParams.value.total_count = folderNode.total_count ?folderNode.total_count :0;
        layerParams.value.total_area = folderNode.total_area ? folderNode.total_area :0;     
      } 
    },
    { immediate: true }
  );
};

const handleCheck = (checkedNodesData, checkedKeysData) => {
const filteredNodes = checkedKeysData.checkedNodes.filter(node => node.level === 3);
  const filteredNodes = checkedKeysData.checkedNodes.filter(node => node.level === 3);
  checkedNodes.value = checkedNodesData.checkedNodes;
 checkedKeys.value = filteredNodes.map(node => node.id);
  checkedKeys.value = filteredNodes.map(node => node.id);
  coverData.value = filteredNodes;
  emit('update:coverData', coverData.value);
};
// 全选方法
const selectAll = () => {
  if (treeRef.value) {
  
    const allFenceKeys = treeData.value.flatMap(folder => 
      folder.children.map(fence => fence.id) // folder 是 level 2，children 是 level 3
    const allFenceKeys = treeData.value.flatMap(
      folder => folder.children.map(fence => fence.id) // folder 是 level 2，children 是 level 3
    );
    
    const allFenceNodes = treeData.value.flatMap(folder => folder.children);

    const allFenceNodes = treeData.value.flatMap(folder => folder.children);
    if (checkedKeys.value.length === allFenceKeys.length) {
      // 取消全选：清空 keys 和数据
      treeRef.value.setCheckedKeys([]);
@@ -127,7 +132,6 @@
      checkedNodes.value = allFenceNodes; // 存储 level 3 数据
      coverData.value = allFenceNodes; // 同步 coverData
    }

    emit('update:coverData', coverData.value);
  }
};
@@ -138,8 +142,11 @@

// 编辑按钮事件
const handleEdit = node => {
  console.log('编辑操作，节点：', node.data);
  emit('update:coverData', [node.data]);
  checkedKeys.value = [];
  checkedNodes.value = [];
  coverData.value = [];
    layerParams.value.editNest = true;
  emit('update:deitData', node.data);
};

// 删除按钮事件
@@ -149,7 +156,6 @@
// 新增围栏
const addFence = () => {
  layerParams.value.addNest = true;
 
};
// 新增文件夹
const addFolder = () => {};

 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="formData.name" placeholder="围栏名称" />
          <el-input class="ztzf-input inputName" v-model="detailData.name" placeholder="围栏名称" />
        </div>
      </div>
      <div class="itemRow">
        <div class="label">围栏备注</div>
        <div>
          <el-input v-model="formData.description" :rows="5" type="textarea" placeholder="请输入" />
          <el-input v-model="detailData.description" :rows="5" type="textarea" placeholder="请输入" />
        </div>
      </div>
    </div>
@@ -32,21 +32,21 @@
      <div class="infpItem">
        <div class="itemData">
          <div class="title">围栏总数量</div>
          <div class="num"><span>26</span>个</div>
          <div class="num"><span>{{totalCount}}</span>个</div>
        </div>
        <div class="itemData">
          <div class="title">围栏总面积</div>
          <div class="num"><span>1651561.4</span>m²</div>
          <div class="num"><span>{{totalArea}}</span>m²</div>
        </div>
      </div>
      <div class="infpItem">
        <div class="itemData">
          <div class="title">创建时间</div>
          <div class="num"><span>2025年10月22日</span></div>
          <div class="num"><span>{{detailData.create_time}}</span></div>
        </div>
        <div class="itemData">
          <div class="title">创建人</div>
          <div class="num"><span>张三</span></div>
          <div class="num"><span>{{detailData.create_name}}</span></div>
        </div>
      </div>
    </div>
@@ -70,11 +70,20 @@
  control_end_time: '',
  geo_data: '{"type":"LineString","coordinates":[[113.30,23.15],[113.31,23.16],[113.32,23.15]]}',
});
const detailData = ref(null)
detailData.value = layerParams.value.editDetailData
const totalArea = layerParams.value.total_area
const totalCount = layerParams.value.total_count
console.log('layerParams',layerParams
);

const cancelHandel = () => {
  layerParams.value.addNest = false;
  layerParams.value.editNest = false;
};
const submitHandle = () => {
  layerParams.value.addNest = false;
  layerParams.value.editNest = false;
};
</script>


 src/views/layerManagement/index.vue

@@ -11,11 +11,12 @@
      <div class="mapContainer">
        <div id="layMap" class="ztzf-cesium"></div>
        <leftList
          v-if="!layerParams.addNest"
          v-if="!layerParams.addNest && !layerParams.editNest"
          @update:coverData="handleCoverDataUpdate"
          @update:deitData="handleEdit"
          :activeName="activeName"
        ></leftList>
        <rightEdit v-if="layerParams.addNest"></rightEdit>
        <rightEdit v-if="layerParams.addNest || layerParams.editNest"></rightEdit>
      </div>
    </div>
  </basic-container>
@@ -33,6 +34,8 @@
import { provide } from 'vue';
const activeName = ref('电子围栏');
const activeType = ref('0');
// 当前面位置信息
let curPolygonPosition = []
const tabData = ref([
  {
    name: '电子围栏',
@@ -49,6 +52,10 @@
]);
const layerParams = ref({
  addNest: false,
  editNest:false,
  editDetailData:null,
  total_count:0,
  total_area:0,
});
provide('layerParams', layerParams);
const handleClick = tab => {
@@ -62,7 +69,6 @@
  try {
    const geoData = JSON.parse(geoDataStr);
    let coordinates = [];


    if (geoData.type === 'Polygon') {
      // Polygon 坐标格式：[[[lng, lat], ...]] → 取第一个多边形的顶点
@@ -88,10 +94,19 @@
};
let tbJwdList = [];
const selectDataList = ref([]);

// 编辑区域
const handleEdit = val => {
  console.log('编辑数据', val);
  layerParams.value.editDetailData = val
  drawPolygonExample.editThePatch(true);
  const positions = parseGeoDataToPositions(val.geo_data, val.altitude);
  if (positions.length < 3) return; // 少于3个点无法构成多边形
  drawPolygonExample.initPolygon(viewer, positions, true);
};
// 点击显示区域
const handleCoverDataUpdate = data => {
  selectDataList.value = data;
  console.log('获取的', selectDataList.value);

  if (selectDataList.value.length > 0) {
    loadDataToMap(selectDataList.value);
  } else {
@@ -104,13 +119,12 @@
  // 存储所有有效坐标，用于后续定位
  tbJwdList = [];
  dataList.forEach(item => {
    
    const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
    if (positions.length < 3) {
      console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
      return;
    }
    console.log('positions', positions);

    tbJwdList.push(...positions);
    //  转换为 Cesium 所需的 [lng, lat, lng, lat, ...] 扁平数组格式
    let degreesArray = [];
@@ -215,23 +229,29 @@
  // drawPolygonExample.initHandler(viewer);
};

// 处理绘制完成后的多边形坐标（示例）
// 编辑/绘制
const loadPlanarRoute = async (positions = null, save = false) => {
  if (!positions || positions.length < 3) return;
  // console.log('绘制的多边形顶点坐标（Cartesian3）：', positions);
  //坐标转换
  const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions);
  const latLngPositions = cartographics.map(cartographic => ({
    lng: Cesium.Math.toDegrees(cartographic.longitude),
    lat: Cesium.Math.toDegrees(cartographic.latitude),
    height: cartographic.height || 0,
  }));
  // console.log('转换后的经纬度坐标：', latLngPositions);
  if (positions){
    curPolygonPosition = positions.map(item => {
            let cartographic = Cesium.Cartographic.fromCartesian(item)
            let lng = Cesium.Math.toDegrees(cartographic.longitude) // 经度
            let lat = Cesium.Math.toDegrees(cartographic.latitude) // 纬度
            let height = Cesium.Math.toDegrees(cartographic.height) //高度
            return {
                lng: _.round(lng, 6),
                lat: _.round(lat, 6),
                height: _.round(height, 6),
            }
        })
  }
  let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat])
    polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat])
  console.log('绘制的多边形顶点坐标（Cartesian3）：', polygon);
  
  console.log('转换后的经纬度坐标：', curPolygonPosition);
};

const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
drawPolygonExample.subscribe('getPolygonPositions', data => {
  console.log('绘制的数据', data);
  throttleLoadPlanarRoute(data);
});