| | |
| | | </div> |
| | | <div class="btnGroups"> |
| | | <el-button v-if="activeName !== '国土空间规划'" class="ztzf-button" @click="addFence">{{ |
| | | props.activeName === '电子围栏' ? '新增围栏' : '新增禁飞区' |
| | | props.activeName === '自定义识别区' ? '新增识别区' : '新增禁飞区' |
| | | }}</el-button> |
| | | <el-button v-if="activeName !== '国土空间规划'" class="ztzf-button" @click="addFolder" |
| | | >新增文件夹</el-button |
| | |
| | | <el-button v-else class="ztzf-button" @click="synchronize"> 同步 </el-button> |
| | | </template> --> |
| | | |
| | | <el-button class="ztzf-button" @click="selectAll">全选</el-button> |
| | | <!-- <el-button class="ztzf-button" @click="selectAll">全选</el-button> --> |
| | | <el-button class="ztzf-button" @click="selectAll"> |
| | | {{ checkedKeys.length === getAllFenceKeys().length ? '取消全选' : '全选' }} |
| | | </el-button> |
| | | </div> |
| | | <div |
| | | class="tableListBox" |
| | |
| | | node-key="id" |
| | | default-expand-all |
| | | :expand-on-click-node="false" |
| | | :check-on-click-node="false" |
| | | :filter-node-method="filterNode" |
| | | @check="handleCheck" |
| | | :props="{ |
| | |
| | | ); |
| | | }; |
| | | const handleCheck = (checkedNodesData, checkedKeysData) => { |
| | | layerParams.value.isSingleLocating = false |
| | | const filteredNodes = checkedKeysData.checkedNodes.filter(node => node.level === 3); |
| | | checkedNodes.value = checkedNodesData.checkedNodes; |
| | | checkedNodes.value = filteredNodes |
| | | checkedKeys.value = filteredNodes.map(node => node.id); |
| | | coverData.value = filteredNodes; |
| | | emit('update:coverData', coverData.value); |
| | | }; |
| | | // 全选方法 |
| | | const getAllFenceKeys = () => { |
| | | return treeData.value.flatMap( |
| | | folder => folder.children.map(fence => fence.id) |
| | | ); |
| | | }; |
| | | const selectAll = () => { |
| | | layerParams.value.isSingleLocating = false |
| | | if (treeRef.value) { |
| | | const allFenceKeys = treeData.value.flatMap( |
| | | folder => folder.children.map(fence => fence.id) // folder 是 level 2,children 是 level 3 |
| | | ); |
| | | |
| | | const allFenceKeys = getAllFenceKeys(); |
| | | 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 { |
| | | // 全选:仅设置 level 3 节点的 id |
| | | // 全选 |
| | | treeRef.value.setCheckedKeys(allFenceKeys); |
| | | checkedKeys.value = allFenceKeys; |
| | | checkedNodes.value = allFenceNodes; |
| | |
| | | }; |
| | | // 定位按钮事件 |
| | | const handleLocation = node => { |
| | | checkedKeys.value = []; |
| | | checkedNodes.value = []; |
| | | coverData.value = []; |
| | | if (node.data.level === 2) { |
| | | layerParams.value.isSingleLocating = false; |
| | | } else if (node.data.level === 3) { |
| | | layerParams.value.isSingleLocating = true; |
| | | } |
| | | |
| | | const currentCheckedKeys = [...checkedKeys.value]; |
| | | const currentCheckedNodes = [...checkedNodes.value]; |
| | | EventBus.emit('focusOnNode', node.data); |
| | | if (node.data.level === 2) { |
| | | const folderChildren = node.data.children || []; |
| | | // const childrenIds = folderChildren.map(child => child.id); |
| | | // treeRef.value.setCheckedKeys(childrenIds); |
| | | // checkedKeys.value = childrenIds; |
| | | // checkedNodes.value = folderChildren; |
| | | coverData.value = folderChildren; |
| | | emit('update:coverData', coverData.value); |
| | | } else { |
| | | emit('update:coverData', [node.data]); |
| | | const childrenIds = folderChildren.map(child => child.id); |
| | | // 合并已选中的节点和当前文件夹的子节点 |
| | | const newCheckedKeys = [...new Set([...currentCheckedKeys, ...childrenIds])]; |
| | | const newCheckedNodes = [...currentCheckedNodes, ...folderChildren]; |
| | | treeRef.value.setCheckedKeys(newCheckedKeys); |
| | | checkedKeys.value = newCheckedKeys; |
| | | checkedNodes.value = newCheckedNodes; |
| | | coverData.value = newCheckedNodes; |
| | | } |
| | | // 如果是单个节点(level 3),仅添加到选中列表(如果未选中) |
| | | else if (!currentCheckedKeys.includes(node.data.id)) { |
| | | layerParams.value.isSingleLocating = true |
| | | currentCheckedKeys.push(node.data.id); |
| | | currentCheckedNodes.push(node.data); |
| | | treeRef.value.setCheckedKeys(currentCheckedKeys); |
| | | checkedKeys.value = currentCheckedKeys; |
| | | checkedNodes.value = currentCheckedNodes; |
| | | coverData.value = currentCheckedNodes; |
| | | } |
| | | emit('update:coverData', coverData.value); |
| | | }; |
| | | // 编辑按钮事件 |
| | | const handleEdit = node => { |
| | | if (node.data.level == 2) { |
| | | layerParams.value.editFolder = true; |
| | | layerParams.value.addAnEditingFolder = 2; |
| | | if (props.activeName === '电子围栏') { |
| | | if (props.activeName === '自定义识别区') { |
| | | layerParams.value.fileType = 1; |
| | | } else if (props.activeName === '自定义禁飞区') { |
| | | layerParams.value.fileType = 2; |
| | |
| | | coverData.value = []; |
| | | layerParams.value.editNest = true; |
| | | layerParams.value.decideWhetherToAddOrEdit = 2; |
| | | if (props.activeName === '电子围栏') { |
| | | if (props.activeName === '自定义识别区') { |
| | | layerParams.value.fenceType = 1; // 电子围栏类型标识 |
| | | } else if (props.activeName === '自定义禁飞区') { |
| | | layerParams.value.fenceType = 2; // 自定义禁飞区类型标识 |
| | | layerParams.value.fenceType = 2; // 自定义禁飞区类型标识 |
| | | } |
| | | emit('update:deitData', node.data); |
| | | } |
| | |
| | | deleteFolderApi(id).then(res => { |
| | | ElMessage.success('删除成功'); |
| | | gettreeDataApi(); |
| | | // 通知父组件删除该文件夹下所有围栏的地图实体 |
| | | EventBus.emit('deleteMapEntitiesByFolderId', id); |
| | | }); |
| | | } else if (node.data.level === 3) { |
| | |
| | | deleteFenceApi(id).then(res => { |
| | | ElMessage.success('删除成功'); |
| | | gettreeDataApi(); |
| | | // 通知父组件删除对应的地图实体 |
| | | EventBus.emit('deleteMapEntityById', id); |
| | | }); |
| | | } |
| | |
| | | const addFence = () => { |
| | | layerParams.value.addNest = true; |
| | | layerParams.value.decideWhetherToAddOrEdit = 1; |
| | | if (props.activeName === '电子围栏') { |
| | | if (props.activeName === '自定义识别区') { |
| | | layerParams.value.fenceType = 1; // 电子围栏类型标识 |
| | | } else if (props.activeName === '自定义禁飞区') { |
| | | layerParams.value.fenceType = 2; // 自定义禁飞区类型标识 |
| | |
| | | const addFolder = () => { |
| | | layerParams.value.addFolder = true; |
| | | layerParams.value.addAnEditingFolder = 1; |
| | | if (props.activeName === '电子围栏') { |
| | | if (props.activeName === '自定义识别区') { |
| | | layerParams.value.fileType = 1; |
| | | } else if (props.activeName === '自定义禁飞区') { |
| | | layerParams.value.fileType = 2; |
| | | } |
| | | }; |
| | | |
| | | function uploadFlightFile(file, t) { |
| | | const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1); |
| | | if (!['zip'].includes(fileSuffix)) { |
| | |
| | | z-index: 99; |
| | | width: 382px; |
| | | overflow: hidden; |
| | | background: rgba(0, 0, 0, 0.8); |
| | | background: rgba(0,0,0,0.51); |
| | | backdrop-filter: blur(4px); |
| | | border-radius: 8px 8px 8px 8px; |
| | | padding: 16px 0 16px 12px; |
| | | display: flex; |