SCADA Engine:基于 Vue3 的开源工业级组态引擎
SCADA Engine 是一款基于 Vue3 和 AntV X6 的开源工业级组态引擎,支持可视化拖拽、实时数据绑定及 3D 仿真组件。该引擎采用现代化技术栈(Vue3、TypeScript、Pinia),提供丰富的工业设备组件库与流畅动画系统。适用于工业监控大屏、设备管理、能源管理及智能仓储等场景。项目完全开源免费,支持自定义扩展与版本管理,旨在降低工业可视化开发门槛。

SCADA Engine 是一款基于 Vue3 和 AntV X6 的开源工业级组态引擎,支持可视化拖拽、实时数据绑定及 3D 仿真组件。该引擎采用现代化技术栈(Vue3、TypeScript、Pinia),提供丰富的工业设备组件库与流畅动画系统。适用于工业监控大屏、设备管理、能源管理及智能仓储等场景。项目完全开源免费,支持自定义扩展与版本管理,旨在降低工业可视化开发门槛。

在工业互联网和智能制造的浪潮下,SCADA(监控与数据采集)系统成为了工业现场不可或缺的核心工具。然而,传统的组态软件往往存在以下痛点:
为了解决这些问题,开发了 SCADA Engine —— 一个基于 Vue3 和 AntV X6 的开源工业级组态引擎。
SCADA Engine 是一个现代化的工业组态编辑器,支持可视化拖拽、实时数据绑定、3D 仿真组件和工作流编排。它完全基于 Web 技术栈,可以快速构建工业监控大屏、设备管理界面等应用。
内置 14+ 工业级 3D 仿真组件,包括:
基础设备类
运输与传感器
管道流体系统
数据可视化



采用 Vue3 Composition API + AntV X6 Vue Shape 的组件化方案:
npm install @nywqs/scada-engine
<template>
<div>
<Header @save="handleSave" />
<div>
<ComponentLibrary />
<CanvasArea />
<PropertyPanel />
</div>
<Footer />
</div>
</template>
<script setup>
import { Header, ComponentLibrary, CanvasArea, PropertyPanel, Footer } from '@nywqs/scada-engine'
import '@nywqs/scada-engine/dist/scada-engine.css'
const handleSave = () => {
console.log('保存画布')
}
</script>
构建实时监控大屏,展示设备运行状态、生产数据、报警信息等。

可视化管理工厂设备,实时查看设备状态,远程控制设备启停。
监控水、电、气等能源消耗,优化能源使用效率。
可视化展示仓库布局,监控物流设备运行状态。
实时监测温度、湿度、压力等环境参数,及时发现异常。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online
将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online