From b4fc9cc11229924fd7520f21bf1f2592aa450c8a Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 28 Oct 2025 15:16:13 +0800
Subject: [PATCH] feat:接口获取数据
---
src/api/layer/index.js | 9 +
src/views/layerManagement/components/leftList.vue | 244 ++++++----------------------------------
src/views/layerManagement/index.vue | 87 +++++++-------
3 files changed, 92 insertions(+), 248 deletions(-)
diff --git a/src/api/layer/index.js b/src/api/layer/index.js
new file mode 100644
index 0000000..eedead6
--- /dev/null
+++ b/src/api/layer/index.js
@@ -0,0 +1,9 @@
+import request from '@/axios';
+export const treeDataApi = (params) => {
+ return request({
+ url: `/drone-device-core/layer/api/v1/tree`,
+ method: 'get',
+ params,
+
+ })
+ };
\ No newline at end of file
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index 8941928..f55a09a 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/src/views/layerManagement/components/leftList.vue
@@ -27,7 +27,7 @@
default-expand-all
@check="handleCheck"
:props="{
- label: 'dkbh',
+ label: 'name',
children: 'children',
}"
/>
@@ -36,10 +36,11 @@
</template>
<script setup>
-import { ref } from 'vue';
+import { treeDataApi } from '@/api/layer/index';
+import { onMounted } from 'vue';
const emit = defineEmits(['update:coverData']);
const coverData = ref();
-const layerData = inject('layerData');
+const props = defineProps(['activeName']);
const formData = {
isPush: undefined,
page: 1,
@@ -50,202 +51,42 @@
};
const reset = () => {};
const search = () => {};
-const treeData = ref([
- {
- id: 'group1',
- dkbh: '道路裂缝识别',
- children: [
- {
- id: 519239,
- workspace_id: '6566662f-17c5-44f1-89d2-f09b37b81794',
- dock_sn: '7CTDM7100BN4J5',
- bsm: '77de338bc7c348ff96d37e336def1a0b',
- dklx: 'QT',
- dkbh: '相对地形高度测试航线',
- dkfw: 'POLYGON((114.824346 25.992131, 114.825211 25.991885, 114.824945 25.990836, 114.823565 25.99111, 114.824346 25.992131, 114.824346 25.992131))',
- create_time: 1759126987041,
- update_time: 1759126987041,
- is_plan: 0,
- investigate: 1,
- is_push: 0,
- user_name: '张红娟',
- type: 0,
- special_type: 0,
- patches_info_id: 65,
- create_user: '1899711781376974849',
- create_dept: '1916401339951845377',
- area_code: '360704000000',
- update_user: '1899711781376974849',
- is_deleted: 0,
- is_generated: 1,
- collection_time: '2025-09-29 14:41:03',
- patches_name: '自定义图斑',
- patches_type: '综合类',
- },
- {
- id: 517566,
- workspace_id: '6566662f-17c5-44f1-89d2-f09b37b81794',
- dock_sn: '7CTDM7100BN4J5',
- bsm: 'baad483e5ba54dcb9c1bb311082fa9e5',
- dklx: 'QT',
- dkbh: '65面状航线测试01-夏潭',
- dkfw: 'POLYGON((114.82207 25.992745, 114.822648 25.992635, 114.822551 25.992142, 114.821895 25.992132, 114.82207 25.992745, 114.82207 25.992745))',
- create_time: 1758158120486,
- update_time: 1758158120486,
- is_plan: 0,
- investigate: 0,
- is_push: 0,
- user_name: '张红娟',
- type: 0,
- special_type: 0,
- patches_info_id: 65,
- create_user: '1899711781376974849',
- create_dept: '1916401339951845377',
- area_code: '360704000000',
- update_user: '1899711781376974849',
- is_deleted: 0,
- is_generated: 0,
- patches_name: '自定义图斑',
- patches_type: '综合类',
- },
- {
- id: 517567,
- workspace_id: '6566662f-17c5-44f1-89d2-f09b37b81794',
- dock_sn: '7CTDM7100BN4J5',
- bsm: '4bbaac90ddb04fe1ab7ad5adbb5dece7',
- dklx: 'QT',
- dkbh: '65新建航线20250918094540',
- dkfw: 'POLYGON((114.821512 25.992198, 114.823099 25.991259, 114.822046 25.990192, 114.820519 25.99109, 114.821512 25.992198, 114.821512 25.992198))',
- create_time: 1758159958425,
- update_time: 1758159958425,
- is_plan: 0,
- investigate: 0,
- is_push: 0,
- user_name: '张红娟',
- type: 0,
- special_type: 0,
- patches_info_id: 65,
- create_user: '1899711781376974849',
- create_dept: '1916401339951845377',
- area_code: '360704000000',
- update_user: '1899711781376974849',
- is_deleted: 0,
- is_generated: 0,
- patches_name: '自定义图斑',
- patches_type: '综合类',
- },
- {
- id: 518228,
- workspace_id: '6566662f-17c5-44f1-89d2-f09b37b81794',
- dock_sn: '7CTDM7100BN4J5',
- bsm: '4a7824e676404cd8a2efb11ff8ae681e',
- dklx: 'QT',
- dkbh: '新建航线20250922145458',
- dkfw: 'POLYGON((114.821696 25.993983, 114.819532 25.992569, 114.819172 25.994371, 114.820561 25.995004, 114.822089 25.994711, 114.821696 25.993983, 114.821696 25.993983))',
- create_time: 1758524113039,
- update_time: 1758524113039,
- is_plan: 0,
- investigate: 0,
- is_push: 0,
- user_name: '张含笑',
- type: 0,
- special_type: 0,
- patches_info_id: 65,
- create_user: '1909067460995813377',
- create_dept: '1916401339951845377',
- area_code: '360704000000',
- update_user: '1909067460995813377',
- is_deleted: 0,
- is_generated: 0,
- patches_name: '自定义图斑',
- patches_type: '综合类',
- },
- {
- id: 518229,
- workspace_id: '5d188623-c141-4a89-bb1a-9a191d7fb73c',
- dock_sn: '8UUXN5M00A08ZD',
- bsm: 'fdd2bedf59fd4835bdc97a2bc86c3d60',
- dklx: 'QT',
- dkbh: '新建航线20250922152253',
- dkfw: 'POLYGON((115.894265 28.706264, 115.886028 28.683945, 115.874846 28.684871, 115.867501 28.697979, 115.874331 28.708741, 115.894265 28.706264, 115.894265 28.706264))',
- create_time: 1758525803996,
- update_time: 1758525803996,
- is_plan: 0,
- investigate: 0,
- is_push: 0,
- user_name: '张含笑',
- type: 0,
- special_type: 0,
- patches_info_id: 65,
- create_user: '1909067460995813377',
- create_dept: '1916401339951845377',
- area_code: '360113000000',
- update_user: '1909067460995813377',
- is_deleted: 0,
- is_generated: 0,
- patches_name: '自定义图斑',
- patches_type: '综合类',
- },
- {
- id: 519199,
- workspace_id: '6566662f-17c5-44f1-89d2-f09b37b81794',
- dock_sn: '7CTDM7100BN4J5',
- bsm: 'a30c349611d546f8b1daa6a5e4c8e2a8',
- dklx: 'QT',
- dkbh: '新建航线20250922162339',
- dkfw: 'POLYGON((114.823711 25.993143, 114.823074 25.990854, 114.826097 25.990424, 114.826746 25.992621, 114.823711 25.993143, 114.823711 25.993143))',
- create_time: 1758529455155,
- update_time: 1758529455156,
- is_plan: 0,
- investigate: 0,
- is_push: 0,
- user_name: '黄秋雨',
- type: 0,
- special_type: 0,
- patches_info_id: 65,
- create_user: '1831880712850235393',
- create_dept: '1916401339951845377',
- area_code: '360704000000',
- update_user: '1831880712850235393',
- is_deleted: 0,
- is_generated: 0,
- patches_name: '自定义图斑',
- patches_type: '综合类',
- },
- {
- id: 519200,
- workspace_id: '6566662f-17c5-44f1-89d2-f09b37b81794',
- dock_sn: '7CTDM7100BN4J5',
- bsm: 'd782d9cba4da403f80c4bbd93e2c765e',
- dklx: 'QT',
- dkbh: '新建航线20250924092549',
- dkfw: 'POLYGON((114.836948 25.983711, 114.841575 25.971469, 114.829782 25.972419, 114.822853 25.978449, 114.826958 25.983154, 114.836948 25.983711, 114.836948 25.983711))',
- create_time: 1758677163541,
- update_time: 1758677163541,
- is_plan: 0,
- investigate: 0,
- is_push: 0,
- user_name: '张含笑',
- type: 0,
- special_type: 0,
- patches_info_id: 65,
- create_user: '1909067460995813377',
- create_dept: '1916401339951845377',
- area_code: '360704000000',
- update_user: '1909067460995813377',
- is_deleted: 0,
- is_generated: 0,
- patches_name: '自定义图斑',
- patches_type: '综合类',
- },
- ],
- },
-]);
-
+const treeData = ref([]);
+const treeAllData = ref([]);
+// 获取数据
+const gettreeDataApi = async () => {
+ 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;
+ },
+ { immediate: true }
+ );
+};
const checkedKeys = ref([]); // 存储勾选的节点key
const treeRef = ref(null); // 获取tree实例
const checkedNodes = ref([]); // 存储勾选的节点数据
+
+const handleCheck = (checkedNodesData, checkedKeysData) => {
+ checkedNodes.value = checkedNodesData.checkedNodes;
+
+ coverData.value = checkedKeysData.checkedNodes;
+
+ emit('update:coverData', coverData.value);
+ // console.log('选中的节点数据:', checkedKeysData);
+};
// 全选方法
const selectAll = () => {
if (treeRef.value) {
@@ -263,20 +104,15 @@
// 否则全选
treeRef.value.setCheckedKeys(allKeys);
// 获取所有节点数据
- checkedNodes.value = treeData.value.flatMap(item => [item, ...item.children]);
+ checkedNodes.value = treeData.value.flatMap(item => [ ...item.children]);
console.log('所有数据', checkedNodes.value);
}
}
};
-const handleCheck = (checkedNodesData, checkedKeysData) => {
- checkedNodes.value = checkedNodesData.checkedNodes;
-
- coverData.value = checkedKeysData.checkedNodes;
- // layerData.value.selectData = checkedKeysData.checkedNodes;
- emit('update:coverData', coverData.value);
- // console.log('选中的节点数据:', coverData.value);
-};
+onMounted(() => {
+ gettreeDataApi();
+});
const changeClick = val => {};
</script>
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index c70ace5..01dd32c 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -2,7 +2,7 @@
<basic-container>
<div class="layerContainer">
<div>
- <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tabs v-model="activeType" @tab-click="handleClick">
<el-tab-pane v-for="tab in tabData" :key="tab.type" :label="tab.name" :name="tab.type">
</el-tab-pane>
</el-tabs>
@@ -10,7 +10,7 @@
<!-- 地图 -->
<div class="mapContainer">
<div id="layMap" class="ztzf-cesium"></div>
- <leftList @update:coverData="handleCoverDataUpdate"></leftList>
+ <leftList @update:coverData="handleCoverDataUpdate" :activeName="activeName"></leftList>
</div>
</div>
</basic-container>
@@ -24,7 +24,8 @@
import { PublicCesium } from '@/utils/cesium/publicCesium';
import _, { cloneDeep, throttle } from 'lodash';
import { ElButton } from 'element-plus';
-const activeName = ref('0');
+const activeName = ref('电子围栏');
+const activeType = ref('0');
const tabData = ref([
{
name: '电子围栏',
@@ -42,14 +43,31 @@
const handleClick = tab => {
const clickedTab = tabData.value.find(item => item.type === tab.paneName);
- activeName.value = clickedTab.type;
-
+ activeType.value = clickedTab.type;
+ activeName.value = clickedTab.name;
};
-const layerData = ref({
- selectData:[],//选中的数据
-})
-provide('layerData', layerData)
-const selectDataList = ref([])
+// 解析 geo_data 并转换为 DrawPolygon 所需的坐标格式
+const parseGeoDataToPositions = (geoDataStr, altitude) => {
+ try {
+ // 解析 JSON 字符串为 GeoJSON 对象
+ const geoData = JSON.parse(geoDataStr);
+ // 仅处理 Polygon 类型的地理数据
+ if (geoData.type !== 'Polygon') return [];
+
+ // 提取 coordinates（取第一个面，忽略孔洞），并补充高度
+ const coordinates = geoData.coordinates[0];
+ return coordinates.map(([lng, lat]) => ({
+ lng: Number(lng),
+ lat: Number(lat),
+ height: Number(altitude) || 0, // 高度默认取数据中的 altitude，无则为 0
+ }));
+ } catch (error) {
+ console.error('解析 geo_data 失败：', error);
+ return [];
+ }
+};
+
+const selectDataList = ref([]);
// 提取图斑坐标
function polygonWktToTargetArray(wktPolygon, defaultHeight = 140.6) {
try {
@@ -98,42 +116,30 @@
return []; // 异常时返回空数组
}
}
-
-const handleCoverDataUpdate = (data) => {
+
+const handleCoverDataUpdate = data => {
selectDataList.value = data;
- console.log('从子组件接收到的数据:', selectDataList.value);
-
- // 数据更新后立即加载到地图
+// console.log('获取的',selectDataList.value);
+
if (selectDataList.value.length > 0) {
loadDataToMap(selectDataList.value);
+ } else {
+ drawPolygonExample.removeEntities();
}
};
-// 加载数据到地图
-const loadDataToMap = (dataList) => {
+const loadDataToMap = dataList => {
// 清空之前的绘制内容
drawPolygonExample.removeEntities();
-
- // 遍历数据列表（支持多条数据，此处取第一条示例）
- const targetData = dataList[0];
- if (!targetData || !targetData.dkfw) return; // 检查数据和WKT字段是否存在
+ dataList.forEach(item => {
+ // 转换坐标格式
+ const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
+ if (positions.length < 3) return; // 少于3个点无法构成多边形
- const wktPoints = polygonWktToTargetArray(targetData.dkfw);
- if (wktPoints.length < 3) {
- console.error("解析后的坐标点不足3个，无法形成多边形");
- return;
- }
- const positionsWithHeight = wktPoints.map(point => ({
- ...point,
- height: 140.6
- }));
-
-
- drawPolygonExample.initPolygon(
- viewer, // Cesium viewer 实例
- positionsWithHeight, // 带高程的经纬度坐标数组
- false // 是否纯预览模式（false 表示可编辑）
- );
+ // 调用 DrawPolygon 的 initPolygon 方法渲染多边形
+ drawPolygonExample.initPolygon(viewer, positions, true);
+ });
};
+
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
@@ -156,13 +162,6 @@
viewInstance.value = publicCesiumInstance;
drawPolygonExample.initHandler(viewer);
};
-
-// // 开启绘制模式（按钮点击触发）
-// const startDraw = () => {
-// // 清除之前的绘制内容，重新开启绘制
-// drawPolygonExample.removeEntities();
-// drawPolygonExample.startDrawing();
-// };
// 处理绘制完成后的多边形坐标（示例）
const loadPlanarRoute = async (positions = null, save = false) => {
--
Gitblit v1.9.3