vue就是边做这个项目边学的 代码可能有点乱 还望各位大神勿喷

如果代码对您有帮助 麻烦辛苦帮我点个star

预览地址

https://svg.yaolunmao.top

如何使用

# 克隆项目

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

# 进入项目目录

cd vue-webtopo-svgeditor

# 安装依赖

yarn install

# 启动服务

yarn serve

操作

点击载入模板 进入预览页点击模拟硬件 等待两秒钟即可看到动态效果

  • 鼠标左键选中组件 按住可拖动至画布
  • 鼠标双击画布取消选中组件
  • 右侧工具栏调整选中组件样式
  • 键盘↑↓←→可移动选中组件
  • ctrl+c复制当前选中组件
  • deleted删除当前选中组件
  • 鼠标滚轮放大缩小选中组件

Todo

  • 鼠标框选批量选中
  • 画布绑定mqtt平台
  • 组件旋转
  • 画布缩放
  • 编辑器撤销、重做

截图

画图页：

预览页：

License

MIT

纯vue3实现的svg可视化web组态编辑器。主要用于物联网mqtt实时系统图的更多相关文章

  1. iNeuOS工业互联平台，WEB组态（iNeuView）集成实时预警和报警柱状图

    目       录 1.      概述... 2 2.      平台演示... 2 3.      应用过程... 2 4.      实时数据展示效果... 3  1.      概述 对于我们 ...

  2. 基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用

    得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应! 如 ...

  3. WEB组态可视化软件(B/S)

    WEB组态可视化软件 目录 WEB组态可视化软件 1 B/S组态软件 2 组态概念 3 组态产品呈现 4 功能特点 5 组态软件应用场景 6 经典的案例 6.1 某通信基站的组态可视化 7 具体实现 ...

  4. 基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用

    基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用 前言 在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接 ...

  5. iNeuOS工业互联平台，WEB组态（iNeuView）集成图报组件，满足实时数据图形化展示的需求

    目       录 1.      概述... 1 2.      平台演示... 2 3.      应用过程... 3 4.      实时数据展示效果... 5 1.   概述 市场和开源社区有 ...

  6. Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库

    SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看.与分辨率无关的矢量图形.而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操 ...

  7. svg可视化制作工具

    svg可视化制作工具直接ai里面用钢笔路径画好 然后右键建立复合路径 最后存储为svg即可 这样生成的svg就带path标签了

  8. 爬取疫情数据，以django+pyecharts实现数据可视化web网页

    在家呆着也是呆着,不如做点什么消磨时间呗~ 试试用django+pyecharts实现疫情数据可视化web页面 这里要爬疫情数据 来自丁香园.搜狗及百度的疫情实时动态展示页 先看看劳动成果: 导航栏: ...

  9. iNeuOS工业互联平台，WEB组态（iNeuView）集成rtmp和websocket视频元件，支持海康、大华等摄像头实时显示视频

    目       录 1.      概述... 1 2.      平台演示... 2 3.      硬件摄像头... 2 4.      视频流协议转换管理... 2 5.      组态视频元件 ...

随机推荐

  1. 练习1—参数传递、递归调用（Java）

    1.方法参数的值传递机制 1.说明 方法:必须由其所在类或对象调用才有意义.若方法含有参数: 形参:方法声明时的参数: 实参:方法调用时实际传给形参的参数值 Java的实参值如何传入方法:Java里方 ...

  2. 如何动态生成EasyUI的表头

    需求 前几天遇到了这样一个需求,在页面上展示一组数据,但是表头不固定,需要动态加载出来.比如这次查询表头有[姓名][年龄],可能下次查询表头就变成了[姓名][年龄][性别]. 思路简介 我刚刚接手这个 ...

  3. io流（对象流总结）

    对象流 对象流就是对引用数据类型进行操作 序列化:将对象的状态信息转换为可以存储或传输的形式的过程,因此类需要序列化后才可以存储到文件中 对象输出流: 很简单,就三句话,将把一个对象导入指定文件中,要 ...

  4. Mysql之锁机制

    全局锁 全局锁就是对整个数据库实例加锁.MySQL 提供了一个加全局读锁的方法FTWRL Flush tables with read lock 全局锁的典型使用场景是,做全库逻辑备份,也就是把整库每 ...

  5. java例题_24 逆向输入数字

    1 /*24 [程序 24 根据输入求输出] 2 题目:给一个不多于 5 位的正整数,要求:一.求它是几位数,二.逆序打印出各位数字. 3 */ 4 5 /*分析 6 * 首先从键盘得到一个正整数,不 ...

  6. PAT (Advanced Level) Practice 1005 Spell It Right (20 分) 凌宸1642

    PAT (Advanced Level) Practice 1005 Spell It Right (20 分) 凌宸1642 题目描述: Given a non-negative integer N ...

  7. Linux 软链接link/ln -s

    在Linux中,链接分为软的和硬的,至于两者之间有什么差别,大家可以参考下https://www.ibm.com/developerworks/cn/linux/l-cn-hardandsymb-li ...

  8. Python面向对象练习题

    1.模拟栈操作原理 先进后出 ​1.初始化(创建一个存储数据的列表) 2.进栈使用列表保存数据 ​ 3.出栈 使用列表删除数据 ​ 4.查看栈顶元素 切片获取列表最后一位数据 ​5.判断是否为空栈 6 ...

  9. 1-Hyperledger Fabric概念详解

    目录 一.Hyperledger Fabric概述 二.基本术语 1.共享账本ledger 2.通道Channel 3.组织Org 4.智能合约Chaincode 5.背书Endorse 6.各种节点 ...

  10. 北航OO第二单元作业总结（2.1~2.3）

    在经过第一单元初步认识面向对象编程思想后,本蒟蒻开始了第二单元--多线程部分的学习.本单元的作业是构造符合条件的"目的选层电梯"模型,自行设计调度算法,进行合理调度,完成所有乘客的 ...