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. java例题_44 一个偶数总能表示为两个素数之和

    1 /*44 [程序 44 偶数的素数和] 2 题目:一个偶数总能表示为两个素数之和. 3 */ 4 5 /*分析 6 * 1.从键盘得到一个偶数(大于2的偶数,因为1不是素数) 7 * 2.用for ...

  2. Starting Tomcat v9.0 Server at localhost' has encountered a problem

    •问题描述 在通过 Eclipse 打开 Tomcat 时报错: •解决方案 找到 Tomcat 的安装位置,打开 tomcat\bin 目录,找到 shutdown.bat,手动关闭 tomcat: ...

  3. [图论]牛的旅行 Cow Tours :Floyed-Warshall

    牛的旅行 Cow Tours 目录 牛的旅行 Cow Tours 题目描述 输入格式 输出格式 输入输出样例 输入 #1 输出 #1 解析 代码 题目描述 农民 John的农场里有很多牧区.有的路径连 ...

  4. 【笔记】《Redis设计与实现》chapter18 发布与订阅

    chapter18 发布与订阅 客户端订阅频道. 客户端向频道发送消息, 消息被传递至各个订阅者. 匹配模式 客户端订阅模式. 客户端向频道发送消息, 消息被传递给正在订阅匹配模式的订阅者. 另一个模 ...

  5. linux安装cmake

    1 概述 linux下安装cmake,目前最新的版本为3.17.0-rc2,安装的方式一共有三种:通过软件包仓库安装,通过编译好的版本进行安装,从源码手动编译安装. 2 仓库安装 笔者的是deepin ...

  6. Go-08-函数与指针

    Go语言的函数本身可以作为值进行传递,既支持匿名函数和闭包,又能满足接口. 函数声明 func 函数名 (参数列表)(返回参数列表){ // 函数体 } func funcName(parameter ...

  7. 我与Git的那些破事（上）--代码管理

    1. Git是什么? 作为一名程序猿,我相信大家都或多或少接触过git--分布式版本控制软件. 有人说,它是目前世界上最先进的分布式版本控制系统,我想说,是否最先进不知道,但确实好用,实用. 作为一款 ...

  8. Manachar's Algorithm

    1.模板 1 #include<bits/stdc++.h> 2 using namespace std; 3 const int MAX=21000020; 4 char s[MAX], ...

  9. 分布式锁的实现之 redis 篇

    为什么需要分布式锁 引入经典的秒杀情景,100件商品供客户抢.如果是单机版的话,我们使用synchronized 或者 lock 都可以实现线程安全.但是如果多个服务器的话,synchronized ...

  10. 展开说说，Spring Bean IOC、AOP 循环依赖

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 延迟满足能给你带来什么? 大学有四年时间,但几乎所有人都是临近毕业才发现找一份好工作 ...