web-map/docs/批量编辑功能使用说明.md

3.6 KiB
Raw Blame History

批量编辑功能使用说明

🎯 功能概述

批量编辑功能允许用户在场景编辑器中同时选中多个点位和路线,并批量修改它们的属性,大大提升了编辑效率。

主要功能

1. 批量选中

  • 鼠标拖动选中:在编辑模式下,可以通过鼠标拖动框选多个点位和路线
  • 实时计数:工具栏会显示当前选中的元素数量
  • 清除选择:一键清除所有选中状态

2. 批量编辑点位

  • 点位类型:支持修改点位类型
    • 普通点
    • 等待点
    • 避让点
    • 临时避让点
    • 库区点
    • 电梯点
    • 自动门点
    • 充电点
    • 停靠点
    • 动作点
    • 禁行点

3. 批量编辑路线

  • 通行类型
    • 无限制
    • 仅空载可通行
    • 仅载货可通行
    • 禁行

🚀 使用方法

步骤 1启用编辑器

  1. 打开场景编辑器页面
  2. 点击右上角的"启用编辑器"按钮
  3. 编辑器工具栏和批量编辑工具栏将出现在页面上

步骤 2批量选中元素

  1. 在画布上按住鼠标左键
  2. 拖动鼠标框选需要编辑的点位和路线
  3. 选中的元素会高亮显示
  4. 批量编辑工具栏会显示选中元素的数量

步骤 3批量编辑

  1. 点击"批量编辑"按钮打开编辑面板
  2. 根据需要选择要修改的属性:
    • 如果选中了点位,可以修改点位类型
    • 如果选中了路线,可以修改路线类型、通行类型和方向
  3. 在预览区域查看即将应用的更改
  4. 点击"确定"应用更改,或点击"取消"放弃更改

步骤 4清除选择

  • 点击"清除选择"按钮可以取消所有选中状态
  • 或者直接点击画布空白区域也可以清除选择

🎨 界面说明

批量编辑工具栏

  • 位置:页面顶部中央(仅在选中元素时显示)
  • 功能:显示选中数量、打开批量编辑面板、清除选择

批量编辑面板

  • 选中统计:显示选中的点位和路线数量
  • 点位编辑区:当选中点位时显示,用于修改点位类型
  • 路线编辑区:当选中路线时显示,用于修改路线通行类型
  • 预览区域:显示即将应用的更改,方便确认

💡 使用技巧

  1. 混合选择:可以同时选中点位和路线进行批量编辑
  2. 部分更新:只修改需要更改的属性,其他属性保持不变
  3. 预览确认:在应用更改前,预览区域会显示所有即将修改的内容
  4. 撤销支持所有批量编辑操作都支持撤销Ctrl+Z

🔧 技术实现

  • 响应式设计:基于 Vue 3 Composition API
  • 类型安全:完整的 TypeScript 类型定义
  • 性能优化:批量更新减少渲染次数,自动触发画布重绘
  • 用户体验:实时预览和撤销支持,紧凑的弹框设计

📝 注意事项

  1. 批量编辑功能仅在编辑模式下可用
  2. 选中的元素必须是点位point或路线line类型
  3. 区域area和机器人robot元素不支持批量编辑
  4. 所有更改都会记录在编辑历史中,支持撤销操作

🐛 故障排除

问题:批量编辑按钮不可用

  • 原因:没有选中任何元素
  • 解决:先通过鼠标拖动选中需要编辑的点位或路线

问题:编辑面板中没有显示选项

  • 原因:选中的元素类型不支持该编辑选项
  • 解决:确保选中的是点位或路线类型的元素

问题:更改没有生效

  • 原因:可能没有点击"确定"按钮
  • 解决:在编辑面板中点击"确定"按钮应用更改