You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
b0a8ab2980
|
4 years ago | |
|---|---|---|
| public | 4 years ago | |
| src | 4 years ago | |
| .gitignore | 5 years ago | |
| LICENSE | 5 years ago | |
| README.md | 4 years ago | |
| babel.config.js | 5 years ago | |
| package-lock.json | 4 years ago | |
| package.json | 5 years ago | |
README.md
vue-webtopo-svgeditor
纯vue3实现的svg可视化web组态编辑器。主要用于物联网mqtt实时系统图
这个分支为开发分支，之前的版本每个组件都要写一个vue文件，项目不仅乱还难以管理，今天增加了这个分支首先要改变组件模式，调整为动态组件，等这个完成之后继续完善之前的代码
预览地址
如何使用
# 克隆项目
git clone https://github.com/yaolunmao/vue-webtopo-svgeditor.git
# 进入项目目录
cd vue-webtopo-svgeditor
# 安装依赖
yarn install
# 启动服务
yarn serve
操作
点击载入模板 进入预览页点击模拟硬件 等待两秒钟即可看到动态效果
- 鼠标左键选中组件 按住可拖动至画布
- 鼠标双击画布取消选中组件
- 右侧工具栏调整选中组件样式
- 键盘↑↓←→可移动选中组件
- ctrl+c复制当前选中组件
- deleted删除当前选中组件
- 鼠标滚轮放大缩小选中组件
Todo
- 鼠标框选批量选中
- 画布绑定mqtt平台
- 组件旋转
- 画布缩放
- 编辑器撤销、重做
截图
