From 575582ca9ad52635548fb026c9bfc0de7938d25e Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 29 Oct 2025 10:15:51 +0800
Subject: [PATCH] feat:全选显示
---
src/views/layerManagement/components/leftList.vue | 202 +++++--------------------------------------------
1 files changed, 23 insertions(+), 179 deletions(-)
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index cff1910..0c36462 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/src/views/layerManagement/components/leftList.vue
@@ -78,172 +78,8 @@
// 获取数据
const gettreeDataApi = async () => {
try {
- // const res = await treeDataApi();
- // treeAllData.value = res.data.data;
- treeAllData.value = [
- {
- id: 1,
- name: '电子围栏',
- description: '用于监控特定区域的进入和离开事件',
- area_code: '360103000000',
- create_user: '1831880712850235393',
- create_name: '黄秋雨',
- create_dept: '1916401339951845377',
- create_time: '2025-10-24 11:15:37',
- update_user: '1831880712850235393',
- update_dept: '1916401339951845377',
- update_time: '2025-10-28 11:15:44',
- level: 1,
- children: [
- {
- id: 1,
- category_id: 1,
- name: '厂区周界',
- description: '注意区域',
- event_type: '进入',
- algorithm_name: '高精度围栏算法V2',
- area_code: '360103000000',
- create_user: '1831880712850235393',
- create_name: '黄秋雨',
- create_dept: '1916401339951845377',
- create_time: '2025-10-27 11:14:01',
- update_user: '1831880712850235393',
- update_dept: '1916401339951845377',
- update_time: '2025-10-28 11:13:54',
- level: 2,
- children: [
- {
- id: 1,
- folder_id: 1,
- name: '一号门围栏',
- description: '覆盖工厂一号门入口区域',
- is_enabled: true,
- area: 1250.5,
- geo_data:
- '{"type":"Polygon","coordinates":[[[114.05,22.54],[114.06,22.54],[114.06,22.55],[114.05,22.55],[114.05,22.54]]]}',
- control_start_time: '2025-10-24 11:14:31',
- control_end_time: '2025-10-28 11:14:41',
- altitude: 120,
- area_code: '360103000000',
- create_user: '1831880712850235393',
- create_name: '黄秋雨',
- create_dept: '1916401339951845377',
- create_time: '2025-10-21 11:14:11',
- update_user: '1831880712850235393',
- update_dept: '1916401339951845377',
- update_time: '2025-10-28 11:14:23',
- level: 3,
- },
- {
- id: 2,
- folder_id: 2,
- name: '二号门围栏',
- description: '覆盖工厂一号门入口区域',
- is_enabled: true,
- area: 1250.5,
- geo_data:
- '{"type":"Polygon","coordinates":[[[114.05,22.54],[114.06,22.54],[114.06,22.55],[114.05,22.55],[114.05,22.54]]]}',
- control_start_time: '2025-10-24 11:14:31',
- control_end_time: '2025-10-28 11:14:41',
- altitude: 120,
- area_code: '360103000000',
- create_user: '1831880712850235393',
- create_name: '黄秋雨',
- create_dept: '1916401339951845377',
- create_time: '2025-10-21 11:14:11',
- update_user: '1831880712850235393',
- update_dept: '1916401339951845377',
- update_time: '2025-10-28 11:14:23',
- level: 3,
- },
- ],
- total_count: 1,
- total_area: 1250.5,
- },
- ],
- },
- {
- id: 2,
- name: '自定义禁飞区',
- description: '用于设置临时或永久的无人机禁飞区域',
- area_code: '360103000000',
- create_user: '1831880712850235393',
- create_name: '黄秋雨',
- create_dept: '1916401339951845377',
- create_time: '2025-10-19 11:15:40',
- update_user: '1831880712850235393',
- update_dept: '1916401339951845377',
- update_time: '2025-10-28 11:15:47',
- level: 1,
- children: [
- {
- id: 2,
- category_id: 2,
- name: '临时活动区',
- description: '注意区域',
- event_type: '注意',
- algorithm_name: '注意活动',
- area_code: '360103000000',
- create_user: '1831880712850235393',
- create_name: '黄秋雨',
- create_dept: '1916401339951845377',
- create_time: '2025-10-27 11:14:05',
- update_user: '1831880712850235393',
- update_dept: '1916401339951845377',
- update_time: '2025-10-28 11:13:57',
- level: 2,
- children: [
- {
- id: 2,
- folder_id: 2,
- name: '演唱会禁飞区',
- description: '2023年大型演唱会临时禁飞',
- is_enabled: true,
- area: 8800,
- geo_data:
- '{"type":"Polygon","coordinates":[[[113.27,23.13],[113.28,23.13],[113.28,23.14],[113.27,23.14],[113.27,23.13]]]}',
- control_start_time: '2025-10-16 11:14:37',
- control_end_time: '2025-10-28 11:14:45',
- altitude: 120,
- area_code: '360103000000',
- create_user: '1831880712850235393',
- create_name: '黄秋雨',
- create_dept: '1916401339951845377',
- create_time: '2025-10-22 11:14:19',
- update_user: '1831880712850235393',
- update_dept: '1916401339951845377',
- update_time: '2025-10-28 11:24:47',
- level: 3,
- },
- {
- id: 5,
- folder_id: 2,
- name: '马拉松赛道禁飞',
- description: '城市马拉松赛道沿线禁飞',
- is_enabled: false,
- area: 25000,
- geo_data:
- '{"type":"LineString","coordinates":[[113.30,23.15],[113.31,23.16],[113.32,23.15]]}',
- control_start_time: '2025-10-28 11:26:43',
- control_end_time: '2025-10-28 11:26:43',
- altitude: 100,
- area_code: '360000000000',
- create_user: '1831880712850235393',
- create_name: '黄秋雨',
- create_dept: '1916401339951845377',
- create_time: '2025-10-28 11:28:38',
- update_user: '1831880712850235393',
- update_dept: '1916401339951845377',
- update_time: '2025-10-28 11:28:38',
- level: 3,
- },
- ],
- total_count: 2,
- total_area: 33800,
- },
- ],
- },
- ];
+ const res = await treeDataApi();
+ treeAllData.value = res.data.data;
console.log('接口获取数据', treeAllData.value);
setupWatch();
} catch (error) {
@@ -262,29 +98,37 @@
};
const handleCheck = (checkedNodesData, checkedKeysData) => {
+const filteredNodes = checkedKeysData.checkedNodes.filter(node => node.level === 3);
checkedNodes.value = checkedNodesData.checkedNodes;
- coverData.value = checkedKeysData.checkedNodes.filter(node => node.level === 3);
+ checkedKeys.value = filteredNodes.map(node => node.id);
+ coverData.value = filteredNodes;
emit('update:coverData', coverData.value);
};
// 全选方法
const selectAll = () => {
if (treeRef.value) {
- // 获取所有节点的key
- const allKeys = treeData.value.flatMap(item => [
- item.id,
- ...item.children.map(child => child.id),
- ]);
- if (checkedKeys.value.length === allKeys.length) {
- // 如果已经全选，则取消全选
+
+ 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);
+
+ if (checkedKeys.value.length === allFenceKeys.length) {
+ // 取消全选：清空 keys 和数据
treeRef.value.setCheckedKeys([]);
+ checkedKeys.value = [];
checkedNodes.value = [];
+ coverData.value = [];
} else {
- // 否则全选
- treeRef.value.setCheckedKeys(allKeys);
- // 获取所有节点数据
- checkedNodes.value = treeData.value.flatMap(item => [...item.children]);
- console.log('所有数据', checkedNodes.value);
+ // 全选：仅设置 level 3 节点的 id
+ treeRef.value.setCheckedKeys(allFenceKeys);
+ checkedKeys.value = allFenceKeys; // 同步更新 checkedKeys
+ checkedNodes.value = allFenceNodes; // 存储 level 3 数据
+ coverData.value = allFenceNodes; // 同步 coverData
}
+
+ emit('update:coverData', coverData.value);
}
};
// 定位按钮事件
--
Gitblit v1.9.3