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. HTML标签解读

    因为最近在学习爬虫,那么在爬取网页内容时,就要求我们能够简单的看懂这个网页的基本结构,才能更好的去爬取我们所需要的内容. 这篇随笔也只是简单的说明了一些标签的含义. 标签关系 包含关系 eg:< ...

  2. IPFS挖矿靠谱吗？

    IPFS是一个旨在创建持久且分布式存储和共享文件的网络传输协议,前景广阔且实用意义大,为区块链行业提供了一种新的可能.而IPFS挖矿挖出的FIL,则是在IPFS技术的基础上,对维护IPFS网络的用户的 ...

  3. 仿String()构造器函数 【总结】

    需求 实现以下方法: 控制台结果: 需求分析: 首先确定new调用的this和什么对象绑定,如果跟默认返回的对象绑定肯定做不到 [ ] 这样的访问,所以要在构造器内部返回一个包装过的数组 1.leng ...

  4. 清明节特辑 |记忆存储、声音还原、性格模仿……AI可以让人类永生吗？

    摘要:如果能用AI "复活"逝去的亲人 你愿意吗? 清明节,很少有人会去特地想这样一个问题:我们为什么要给过世的人修墓,然后每年固定的时间去扫墓?当农耕文化的色彩褪去,清明节的祭祀 ...

  5. Kafka又出问题了！

    写在前面 估计运维年前没有祭拜服务器,Nginx的问题修复了,Kafka又不行了.今天,本来想再睡会,结果,电话又响了.还是运营,"喂,冰河,到公司了吗?赶紧看看服务器吧,又出问题了&quo ...

  6. Elasticsearch中最重要的文档CRUD要牢记

    Elasticsearch文档CRUD要牢记 转载参考:https://juejin.im/post/5ddbf298e51d4523053c42e7 在Elasticsearch中,文档(docum ...

  7. Windows10家庭版安装docker

    在公司,一直使用mac系统,在mac上安装使用docker还是比较方便的,可本人心血来朝,家里是win10 home版,就想在windows上刷一刷. 好了,废话不多说,直接上干货. 为了不误导广大爱 ...

  8. springboot基础项目搭建（十五篇）

    springboot系列一.springboot产生背景及介绍 springboot系列二.springboot项目搭建 springboot系列三.springboot 单元测试.配置访问路径.多个 ...

  9. HTML5是什么

    HTML5是目前超文本标记语言 (Hyper Text Markup Language)最新修订版.HTML可以理解为一门程序语言,HTML5字面的意思,这门程序语言的第五次修订,也是HTML的第五个 ...

  10. 关于 下载 nfs-utils时的 gssproxy conflicts with selinux-policy-3.13.1-102.el7.noarch 错误

    使用 yum install nfs-utils -y 时 出现如下错误: 错误:gssproxy conflicts with selinux-policy-3.13.1-102.el7.noarc ...