纯vue3实现的svg可视化web组态编辑器。主要用于物联网mqtt实时系统图
vue就是边做这个项目边学的 代码可能有点乱 还望各位大神勿喷
如果代码对您有帮助 麻烦辛苦帮我点个star
预览地址
如何使用
# 克隆项目
git clone https://github.com/yaolunmao/vue-webtopo-svgeditor.git
# 进入项目目录
cd vue-webtopo-svgeditor
# 安装依赖
yarn install
# 启动服务
yarn serve
操作
点击载入模板 进入预览页点击模拟硬件 等待两秒钟即可看到动态效果
- 鼠标左键选中组件 按住可拖动至画布
- 鼠标双击画布取消选中组件
- 右侧工具栏调整选中组件样式
- 键盘↑↓←→可移动选中组件
- ctrl+c复制当前选中组件
- deleted删除当前选中组件
- 鼠标滚轮放大缩小选中组件
Todo
- 鼠标框选批量选中
- 画布绑定mqtt平台
- 组件旋转
- 画布缩放
- 编辑器撤销、重做
截图
画图页:
预览页:
License
纯vue3实现的svg可视化web组态编辑器。主要用于物联网mqtt实时系统图的更多相关文章
- iNeuOS工业互联平台,WEB组态(iNeuView)集成实时预警和报警柱状图
目 录 1. 概述... 2 2. 平台演示... 2 3. 应用过程... 2 4. 实时数据展示效果... 3 1. 概述 对于我们 ...
- 基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用
得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应! 如 ...
- WEB组态可视化软件(B/S)
WEB组态可视化软件 目录 WEB组态可视化软件 1 B/S组态软件 2 组态概念 3 组态产品呈现 4 功能特点 5 组态软件应用场景 6 经典的案例 6.1 某通信基站的组态可视化 7 具体实现 ...
- 基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用
基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用 前言 在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接 ...
- iNeuOS工业互联平台,WEB组态(iNeuView)集成图报组件,满足实时数据图形化展示的需求
目 录 1. 概述... 1 2. 平台演示... 2 3. 应用过程... 3 4. 实时数据展示效果... 5 1. 概述 市场和开源社区有 ...
- Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库
SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看.与分辨率无关的矢量图形.而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操 ...
- svg可视化制作工具
svg可视化制作工具直接ai里面用钢笔路径画好 然后右键建立复合路径 最后存储为svg即可 这样生成的svg就带path标签了
- 爬取疫情数据,以django+pyecharts实现数据可视化web网页
在家呆着也是呆着,不如做点什么消磨时间呗~ 试试用django+pyecharts实现疫情数据可视化web页面 这里要爬疫情数据 来自丁香园.搜狗及百度的疫情实时动态展示页 先看看劳动成果: 导航栏: ...
- iNeuOS工业互联平台,WEB组态(iNeuView)集成rtmp和websocket视频元件,支持海康、大华等摄像头实时显示视频
目 录 1. 概述... 1 2. 平台演示... 2 3. 硬件摄像头... 2 4. 视频流协议转换管理... 2 5. 组态视频元件 ...
随机推荐
- 后台开发-核心技术与应用实践--TCP协议
网络模型 为使不同计算机厂家的计算机能够互相通信,国际标准化组织 ISO 1981 年正式推荐了一个网络系统结构一一七层参考模型,也叫作开放系统互连模型. ISO 七层网络模型及其功能展示: 这个七层 ...
- postman接口自动化测试之添加Tests检查点
一.概念 Postman的Tests本质上是JavaScript代码,通过我们编写测试代码,每一个Tests返回True,或是False,以判断接口返回的正确性. 其实,每一个Tests实际上就是一个 ...
- 【wp】2021MAR-DASCTF_逆向
昨天打完的MAR DASCTF,来复个盘~ 不过就re做了3/4然后有事提前开溜了hhh,拿了drinkSomeTea和replace的三血心满意足(蜜汁三血执念. 感觉这回的出题人好喜欢TEA啊(正 ...
- 导出目录的JS代码,与目录的三级标题测试
二级标题 三级标题 三级标题 三级标题 三级标题 三级标题 二级标题 三级标题 三级标题 三级标题 三级标题 三级标题 这里是现在页尾目录功能的代码源码: <!-- 目录索引列表生成 --> ...
- python基础(二):数据类型
数据类型 学习Python时,一定要注意Python中数据类型和数据结构的学习,这对于你是否能够学好Python其中很重要的作用. 什么是数据类型? 人类有思想,很容易区分汉字和数字的区别,例如,你知 ...
- 2021年HW0day-奇安信 网康下一代防火墙 RCE漏洞细节
漏洞信息: 漏洞名称:奇安信 网康下一代防火墙 RCE漏洞. 漏洞性质:远程命令执行 漏洞利用特点:命令执行之后没有回显 利用方式:防火墙使用linux进行开发的,可以使用echo xxx >1 ...
- Spring Boot demo系列(四):Spring Web+Validation
2021.2.24 更新 1 概述 本文主要讲述了如何使用Hibernate Validator以及@Valid/@Validate注解. 2 校验 对于一个普通的Spring Boot应用,经常可以 ...
- Searching the Web UVA - 1597
The word "search engine" may not be strange to you. Generally speaking, a search engine ...
- 数据结构之Queue | 让我们一块来学习数据结构
前面的两篇文章分别介绍了List和Stack,下面让我们一起来学习Queue 数据结构之List | 让我们一块来学习数据结构 数据结构之Stack | 让我们一块来学习数据结构 队列的概况 队列是一 ...
- AI数学基础之:P、NP、NPC问题
目录 简介 P问题 NP问题 NP问题的例子 有些NP问题很难解决 NPC问题 NP-hard P和NP问题 简介 我们在做组合优化的时候需要去解决各种问题,根据问题的复杂度不同可以分为P.NP.NP ...