Vue-WebTopo-SVGEditor 简介

Vue-WebTopo-SVGEditor 是一款基于 Vue3 实现的 SVG 可视化 Web 布局编辑器。它专为物联网 MQTT 实时系统图设计，通过直观的图形界面，使得布局设计变得更加便捷和高效。

功能特性

• 纯Vue3驱动：利用 Vue3 的响应式特性，提供流畅的编辑体验。
• SVG可视化：基于 SVG 技术实现图形绘制，支持自定义组件和图标。
• MQTT实时系统图：与 MQTT 协议紧密结合，适用于物联网领域的实时数据处理。
• 交互式操作：提供丰富的交互操作，如组件缩放、拖拽、批量选择等。

使用说明

1. 克隆项目

   git clone https://github.com/yaolunmao/vue-webtopo-svgeditor.git
   

2. 进入项目目录

   cd vue-webtopo-svgeditor
   

3. 安装依赖

   yarn install
   

4. 启动服务

   yarn serve
   

启动后，您可以通过浏览器访问本地服务，并根据以下操作指南开始使用编辑器：

• 操作点击加载模板：进入预览页。
• 模拟硬件：等待两秒钟，即可看到动态效果。
• 缩放组件：使用鼠标左键缩小组件，可扩展至画布。
• 取消替代组件：鼠标双击画布。
• 调整预设组件样式：通过右侧工具栏进行。
• 移动引入组件：使用键盘↑↓←→键。
• 复制/删除组件：使用快捷键 ctrl + c 复制，删除操作已删除。
• 批量选择组件：使用鼠标滚轮放大缩小，框选组件进行批量操作。
• 绑定 MQTT 平台组件：实现实时数据的交互。
• 旋转画布：调整画布比例。
• 编辑器功能：支持撤销、重做、截图等操作。

注意事项

• 确保在支持 Vue3 的环境下使用本编辑器。
• 使用前请确保已正确安装和配置相关依赖。
• 遵循操作指南，以确保获得最佳使用体验。

Vue-WebTopo-SVGEditor 旨在为您提供高效、便捷的物联网 MQTT 实时系统图编辑解决方案。