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. Linux Python2 升级到 Python3

    国内企业服务器用 CentOS 系统的比较多,CentOS8 系统已经将系统默认 Python 版本调整为了 Python3,但是 CentOS7 的存量还是很大,毕竟对企业生产服务来说稳定大于一切, ...

  2. 关于生产环境改用G1垃圾收集器的思考

    背景 由于我们的业务量非常大,响应延迟要求高.目前沿用的老的ParNew+CMS已经不能支撑业务的需求.平均一台机器在1个月内有1次秒级别的stop the world.对系统来说是个巨大的隐患.所以 ...

  3. 案例分析作业——VS和VS Code

    项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 案例分析作业 我在这个课程的目标是 认真完成课程要求并提高相应能力 这个作业在哪个具体方面帮助我实现目标 学 ...

  4. OO第三单元作业——魔教规格

    OO第三单元作业--魔教规格 JML的理论基础和相关工具   JML(Java Modeling Language,Java建模语言),在Java代码种增加了一些符号,这些符号用来标志一个方法是干什么 ...

  5. JVM--Java核心面试知识整理（一）

    JVM 基本概念 JVM 是可运行 Java 代码的假想计算机 ,包括一套字节码指令集.一组寄存器.一个栈. 一个垃圾回收,堆和 一个存储方法域.JVM 是运行在操作系统之上的,它与硬件没有直接的交互 ...

  6. Warm_up(HCTF_2018)

    Warm up 考察知识点: 文件包含漏洞 代码审计 解题步骤 首先我们进来看到了一个滑稽的表情,没啥别的东西,先看看源码 源码中发现有注释 source.php 我们访问source.php,得到代 ...

  7. 【随笔】C++类静态成员变量初始化引发的惨痛教训

    事情是这样的,我在某个类中声明了一个静态的map成员, 文件名暂且称之为 xxx.h 然后在 xxx.cc 中全局定义了这个东西,静态成员在类里面只是声明,需要在外边被定义才有内存 然后又在main. ...

  8. Spring Boot demo系列（二）：简单三层架构Web应用

    2021.2.24 更新 1 概述 这是Spring Boot的第二个Demo,一个只有三层架构的极简Web应用,持久层使用的是MyBatis. 2 架构 一个最简单的Spring Boot Web应 ...

  9. 19. slot插槽传递模板

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制.但 ...

  10. JAVAEE_Servlet_17_关于乱码问题

    关于乱码问题 * 数据传递过程中的乱码 解释:数据传递过程中的乱码是指: 将数据从浏览器发送给服务器的时候,服务器接收到的数据是乱码的. - ISO-8859-1 是国际标准码,不支持中文编码,它兼容 ...