基于VUE的WEB组态-支持拖动

最新推荐文章于 2025-06-16 16:01:37 发布
最新推荐文章于 2025-06-16 16:01:37 发布
阅读量9.9k 收藏 22
点赞数 3
CC 4.0 BY-SA版权
分类专栏： javascript 网页前端 文章标签： web组态 开源WEB组态 WEB可视化 VUE组态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lpch1987/article/details/96288974
WebTopo是一款基于Web的可视化编辑工具，提供丰富的功能包括拖拽添加组件、位置调整、多选操作等。支持多种组件类型如DOM组件、canvas组件及echarts组件，并具备数据同步与异步加载能力。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

源码：github地址(https://github.com/phynos/WebTopo)

 

功能列表

面板标尺

拖曳添加组件

位置拖动

拖动位置磁性吸附

控制大小（8个控制锚点）

选中效果

层叠控制

面板比例缩放

CTRL+C/V复制黏贴

CTRL+A多选

鼠标方框多选

DELETE删除（支持删除多个）

样式配置（文字、大小、位置、边框、颜色、旋转）

组件继承体系

DOM组件（文字、图片）

canvas组件（圆形、三角形、矩形、线条、箭头线条）

echarts组件

组件同步/异步数据加载

主界面预览
标题

 

通过WebTopo在ARMxy边缘计算网关上实现系统集成
BLiiot的博客
09-24 783
BL340系列是基于全志科技T507-H处理器设计的高性能工业级ARM控制器，采用四核ARM Cortex-A53架构，最高主频可达1.4GHz，配备8/16GB eMMC存储及1/2GB DDR4内存。该系列控制器不仅具备强大的数据处理能力，还支持多种通信接口（如RS-232/485, CAN, Ethernet, Wi-Fi, 4G/5G等），能够灵活适应各种工业环境，广泛应用于工业边缘计算、智能物联网关、充电桩管理等多个领域。
web组态--物联网画面设计利器--by组态插件
2406_86034094的博客
07-02 860
web组态，顾名思义，是基于web技术的组态系统。它采用B/S架构，用户通过浏览器即可实现对设备的远程监控和管理。web组态技术将传统的组态软件与现代web技术相结合，使得用户可以在任何时间、任何地点，只要有网络，就能对工业设备进行监控和管理。
WebTopo:基于VUE的web组态（组态，拓扑图，拓扑编辑器）
05-10
WEB组态 基于vue+quasar的web组态，核心代码基于vue，quasar仅仅是为了方便构建 预览地址： github预览地址： 更新日志 后续重点TODO 完善撤销和恢复 折线箭头（思路：增加控制锚点作为转折点） 属性元数据设计和属性编辑UI生成（思路：仿造winform的属性面板） 功能清单 功能 状态 面板标尺 完成 拖曳添加组件 完成 位置移动-鼠标 完成 位置移动-方向键 完成 位置移动-批量 完成 拖动位置磁性吸附 未完成 尺寸锚点（8个） 完成 旋转锚点 未完成 选中效果 完成 层叠控制 完成 面板比例缩放 完成 CTRL+C/V复制黏贴 完成 CTRL+A多选 完成 鼠标框选 完成 DELETE删除（支持删除多个） 完成 样式配置（文字、大小、位置、边框、颜色、旋转） 完成 组件继承体系 完成 DOM组件（文字、图片） 完成 canvas组件（圆形、三角形、矩形、线
组态软件深度解析：工业智能化的“操作系统”
06-16 264
组态软件（SCADA）被誉为工业控制系统的“神经中枢”，它通过图形化界面将复杂的设备逻辑转化为直观的可视化操作，实现数据采集、过程监控和自动化控制。
Vue3+TypeScript+AntVX6实现Web组态（从技术层面与实现层面进行分析）内含实际案例教学
刘一帆的博客
10-14 2565
以下为官方提供的节点形状：以下为图片形状的设计代码：首先设置shape为image，让节点为图片状，而后在markup上注册image区域（因为有后续自定义需要所以定义了markup，不定义也可以，但是需删除markup字段）。而后设置图片的路径，并且定义自定义标签，此处在外部定义label，会导致而后所有在markup上注册的text都为相同的标签，但是可以在attrs自定义标签，并用selector选择器进行选择即可解决。
高级前端必会之基于Vue的web组态软件
MMKJSH的博客
09-16 1945
高级前端必会之基于Vue的web组态软件
几种常用组态软件的
09-12
组态王专题之：几种常用组态软件的对比组态王专题之：几种常用组态软件的对比
Vue中组态实现方案-BaseMap的使用
BADAO_LIUMANG_QIZHI的博客
03-30 1815
场景 Vue中实现组态绘制的效果 可以方便的实现自由绘制底图与展示效果。 github地址： https://github.com/bojue/BaseMap gitee地址： https://gitee.com/JiaBin520/BaseMap 注： 博客：https://blog.youkuaiyun.com/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 将代码克隆到本地 git clone https://gi.
基于vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加svg组件.zip
04-03
在本项目中，我们探讨的是一个基于Vue3框架构建的SVG可视化Web组态编辑器。这个编辑器的独特之处在于它允许用户动态添加SVG组件，而无需直接修改源代码，极大地提高了开发效率和用户体验。 首先，Vue3是Vue.js的...
WebTopo：基于Vue的Web组态拓扑图与拓扑编辑器
最新发布
07-08
核心框架：基于Vue.js构建，Vue作为核心开发框架，负责实现主要功能逻辑。 辅助工具：使用Quasar框架，主要用于便捷地构建和生成预览地址，提升开发效率。 预览地址：项目已部署在GitHub，可通过GitHub提供的预览...
组态软件之万维组态介绍（web组态、html组态、vue2/vue3组态、组态软件、组态编辑器）
songjun973208的博客
03-28 1583
组态软件之万维组态、web组态、html组态、vue2/vue3组态，组态在工业自动化领域越来越重要，但由于市面上组态软件费用昂贵、集成复杂，使用技术门槛高，万维组态就应运而生；万维组态是一款功能强大的基于Web的可视化组态编辑器，采用标准HTML5技术，使用Vue2和Vue3语言，基于B/S架构进行开发，支持WEB端显示；支持快速集成，集成简单方便；支持在浏览器端完成便捷的人机交互，简单的拖拽即可完成可视化页面的设计;可快速构建和部署可扩展的SCADA、HMI、仪表板或LoT系统；
Vue中组态实现方案-BaseMap.rar
03-30
Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar
基于vue3实现的svg可视化web组态编辑器，可无需修改代码动态添加svg组件，主要用于物联网mqtt实时系统图
05-23
基于vue3实现的svg可视化web组态编辑器，可无需修改代码动态添加svg组件，可直接把 svg 文件和 vue 组件作为编辑器图形库使用，赋予其缩放和旋转等功能，并支持自定义拓展参数，实时控制组件状态等,主要用于物联网mqtt实时系统图
vue pixi 组态图
weixin_44995829的博客
10-13 442
https://zhuanlan.zhihu.com/p/601858700
低代码、配置式web组态软件
web_scada的博客
04-16 1156
我们的集成例子是将编辑器和实时画面集成在vue项目框架内部的，这样必须将编辑器和实时画面做成独立的组件，然后通过调用路由来完成，中间涉及到路由传值。这样稍显麻烦。如果直接用open()调用地址，就可以不用做组件，不用做路由，这样就方便很多，这样的话是在浏览器顶端新开一个标签。调用如下：点击【新增】成功后点击【编辑画面】或【实时监控】时。
Vue中Web组态实现方案-WebTopo的使用
BADAO_LIUMANG_QIZHI的博客
03-30 3169
场景 Web组态实现效果 WebTopo的github地址 https://github.com/phynos/WebTopo 注： 博客：https://blog.youkuaiyun.com/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先你的电脑需要安装node，可以使用npm进行安装依赖 进入根目录执行 npm install 建议使用 cnpm install 如果安装依赖有问题，两种方式切换着用或者多.
vue组态实现矩形在画布内移动和缩放
77今天也学习了的博客
11-12 1450
<!-- vue组态实现矩形在画布内移动： --> <template> <div id="test" @mousemove="get" :style="{'left':fastartLeft+'px','top':fastartTop+'px'}"> <h1>测试vue组态--实现移动和拖拽</h1> <p>鼠标坐标：</p> <p&gt
vue配合gojs实现工业组态绘制
qq_37656005的博客
12-03 4650
vue配合gojs实现工业组态绘制 通过从左侧拖拽区拖拽图片到中间画布区，之后可对此图标进行大小尺寸调整，旋转，删除，绑定等操作进行合理布局 拖拽、复制、粘贴、选择、鼠标右键事件、剪切、文本编辑、删除、撤销、查看信息、模板、数据源绑定、事件处理程序、调色板、自动布局、添加画布或者节点的监听事件
开源、易扩展、方便集成的Web绘图工具（流程图、架构图、组态、SCADA、大屏）
Alsmile的专栏
06-03 4806
Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。帮助物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等场景快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动算法、跨平台等特点，最大程度减少研发和运维的成本，并致力于普通业务人员 0 代码开发实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。
Vue实现Web组态方案：WebTopo使用教程
从给定的文件信息中，我们可以提取出涉及的关键知识点是关于Vue框架中的Web组态实现方案以及WebTopo的具体使用方法。以下将围绕这两个方面展开详细介绍。 ### Vue框架 Vue.js是一个流行的前端JavaScript框架，用于...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值