From 42b15fc6d2468ebbc392bc2eacc1505dbc259594 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 29 Oct 2025 13:45:10 +0800
Subject: [PATCH] feat:全选显示
---
src/api/layer/index.js | 28 +++++++++
src/views/layerManagement/components/rightEdit.vue | 21 +++++--
src/views/layerManagement/components/leftList.vue | 36 +++++++-----
src/views/layerManagement/index.vue | 60 +++++++++++++------
4 files changed, 103 insertions(+), 42 deletions(-)
diff --git a/src/api/layer/index.js b/src/api/layer/index.js
index eedead6..8b810cc 100644
--- a/src/api/layer/index.js
+++ b/src/api/layer/index.js
@@ -6,4 +6,30 @@
params,
})
- };
\ No newline at end of file
+ };
+// 电子围栏
+// 编辑
+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
+ })
+}
\ No newline at end of file
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index 0c36462..ba1a79e 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/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 = () => {};
diff --git a/src/views/layerManagement/components/rightEdit.vue b/src/views/layerManagement/components/rightEdit.vue
index 828a4e7..c89c623 100644
--- a/src/views/layerManagement/components/rightEdit.vue
+++ b/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>
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index ab59411..f1faebd 100644
--- a/src/views/layerManagement/index.vue
+++ b/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);
});
--
Gitblit v1.9.3