# 物联云组态 **Repository Path**: magicxie/webTopo ## Basic Information - **Project Name**: 物联云组态 - **Description**: ​一拖一拽，自建大屏，专注于物联网开发，可以广泛应用于化工、石化、制药、冶金、建材、市政、环保、电力等几十个行业。 - **Primary Language**: Java - **License**: Not specified - **Default Branch**: master - **Homepage**: https://www.yuque.com/longlong-jtoqy/wzqn3q/webtopo - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 75 - **Created**: 2025-01-16 - **Last Updated**: 2026-08-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 物联云组态平台 ## 平台官网 [http://117.72.47.218:11081/](http://117.72.47.218:11081/) ## 3D可视化 体验地址：[http://124.223.209.120:8090/](http://124.223.209.120:8090/)，账号请自行注册，云端宽带有限，如需快速体验，请下载体验包。 体验包地址：https://pan.quark.cn/s/a612e251bc23?pwd=ca9M ## 平台简介 物联云组态是一款功能强大的组态平台，专为中小企业及工业物联网场景设计。平台支持通过拖拽可视化编辑器快速构建 2D/3D 监控大屏，并结合 MQTT 协议实现设备数据的毫秒级实时交互。 平台整合了丰富的工业组件库，支持完善的数据管理和视频监控集成，是构建智慧工厂、污水处理、能源管理等行业应用的理想选择。 --- ## 技术栈 | 分类 | 技术选型 | 说明 | | :--- | :--- | :--- | | **后台框架** | **RuoYi** | 基于 SpringBoot 的成熟权限管理系统，适合快速开发。 | | **移动端** | **uniapp** | 一套代码同时编译为微信小程序及 Android APP。 | | **2D 组态** | **Vue + ElementUI** | 前后端分离架构，界面美观，开发效率高。 | | **3D 组态** | **Three.js** | 支持三维模型的展示与交互，需开发人员具备 3D 经验。 | | **通信协议** | **MQTT** | 轻量级消息传输协议，实现设备与云端的即时通讯。 | --- ## 功能特点 ### 核心编辑功能 - **基础操作**：复制、粘贴、删除、置顶、置底、旋转、对齐、组合、锁定。 - **高级操作**：导入、导出、撤销、恢复。 - **交互体验**：一拖一拽构建大屏，预览保存，所见即所得。 ### 设备通信 - **即时通讯**：基于 MQTT 实现设备状态实时上报与控制指令下发。 - **协议支持**：内置自定义协议解析引擎，支持 JSON 格式数据解析。 ### 业务管理模块 - **设备中心**：设备地图、设备管理、变量模型管理。 - **告警管理**：自定义告警规则，支持短信、邮件通知。 - **工单管理**：流程化的工单处理系统。 - **视频集成**：支持萤石云、国标 GB28181 视频流接入。 ### 组件与图库 - **海量图库**：内置近 5000 个工业组态矢量图标。 - **统计图表**：集成 ECharts，支持折线图、柱状图、饼图、雷达图等动态图表。 - **3D 展示**：内置 3D 模拟器，支持加载三维模型（.obj, .gltf 等）。 --- ## 在线体验 - **体验网址**：[http://117.72.47.218:10071](http://117.72.47.218:10071) - **体验账号**：`ztyh` - **体验密码**：`123456` > **声明**：此为公网体验环境，数据可能会被重置，请勿放置重要生产数据。 --- ## 协议操作文档 平台通过 MQTT 与设备进行数据交互。以下为标准的通信协议约定： ### 1. MQTT 连接信息 - **服务器地址**：`117.72.47.218` - **端口**：`1883` - **用户名**：`emqx` - **密码**：`public` - **产品秘钥 (Product Key)**：`LXJZVK0MR6NKM8B` - **设备编号 (Device ID)**：`86868686868686` ### 2. 心跳数据上报 (Properties Report) 设备定时上报状态数据（该数据会存入数据库）。 - **Topic**: `/LXJZVK0MR6NKM8B/86868686868686/properties/report` - **数据格式**: ```json [ {"dataId": "Y2", "value": "98"}, {"dataId": "sd", "value": "41"}, {"dataId": "temp", "value": "18"} ] ``` ### 3. 实时数据预览 (Preview) 仅用于页面实时刷新数据，不存入数据库。 - **Topic**: `/86868686868686/properties/preview` - **数据格式**: 同心跳数据。 ### 4. 设备控制指令 (Set) 平台向设备下发控制指令。 - **下发 Topic**: `/LXJZVK0MR6NKM8B/86868686868686/properties/post` - **数据示例**: ```json {"dataId": "kg", "value": 1} ``` - **回复 Topic**: `/LXJZVK0MR6NKM8B/86868686868686/properties/post/reply` ### 5. 设备升级协议 (OTA) 1. **平台下发升级包**：`/{productId}/{deviceId}/upgrade/post` 2. **设备请求升级包**：`/{productId}/{deviceId}/upgrade/get` 3. **平台发送升级包**：`/{productId}/{deviceId}/upgrade/package/post` --- ## 组态操作指南 ### 步骤一：创建设备模型 1. 进入 **设备中心** -> **公共产品**。 2. 新增产品，并添加**产品模型**（定义数据变量，如温度、湿度）。 3. 进入 **设备中心** -> **设备管理**，新增设备，设备会自动继承产品中的模型变量。 ### 步骤二：配置组态页面 1. 在设备列表中找到目标设备，点击进入**设备详情**。 2. 切换到 **设备监控 (组态管理)** Tab 页。 3. 点击 **新增组态页面**，填写页面名称。 4. 点击新增页面后的 **编辑** 按钮，进入可视化编辑器。 ### 步骤三：绑定数据 1. 在编辑器右侧的**布局页面**中，选择组件并配置**通信**参数。 2. 将组件的变量标识（dataId）与设备模型中的变量对应。 3. 发布页面后，即可在监控大屏查看实时数据。 --- ## 项目结构 ``` webTopo/ ├── scada2d-deploy/ # 前端静态资源部署服务 (Spring Boot) │ ├── src/main/resources/static/ # 编译后的 Vue 前端代码及静态资源 │ └── pom.xml │ ├── scada2d-service/ # 后端服务主项目 │ ├── scada2d-admin/ # 核心业务模块 │ │ ├── src/main/java/com/scada2d/ │ │ │ ├── topo/ # 组态核心逻辑 (Controller, Service, Mapper) │ │ │ │ ├── controller/TopoConfigController.java # 组态配置接口 │ │ │ │ ├── domain/ # 实体类 (TopoConfig, TopoImage) │ │ │ │ └── service/ # 业务实现层 │ │ │ └── web/ # 系统管理模块 (基于若依框架) │ │ └── resources/ │ │ ├── application.yml │ │ └── mapper/ # MyBatis XML 映射文件 │ │ │ └── scada2d-common/ # 公共依赖模块 │ ├── core/ # 核心工具类、Redis、域对象 │ ├── annotation/ # 自定义注解 (如: @Excel, @DataScope) │ └── constant/ # 常量定义 (如: 状态码, 缓存Key) │ └── README.md # 项目说明文档 ``` --- ## 组件编辑器使用说明 平台提供了丰富的可视化组件，主要包括以下几类： 1. **基础元件**：文字、图片、矩形、圆形、线条、箭头。 2. **数据展示**：跑马灯、数显框、液位计、仪表盘、进度条、表格。 3. **媒体组件**：M3U8 直播流、MP4 视频、萤石云视频。 4. **地图组件**：高德地图、百度地图（用于设备位置分布展示）。 5. **高级组件**： - **Http 组件**：通过配置 HTTP 接口轮询获取数据。 - **数据引擎**：支持自定义 JavaScript 脚本解析复杂数据。 - **三维模型**：上传并展示 Three.js 模型，支持坐标旋转缩放。 - **VR 全景**：利用全景图实现 360 度场景漫游。 --- ## 关于作者 如有任何技术交流或商业合作需求，请通过以下方式联系： - **微信**：扫码添加 (见截图) ![输入图片说明](7011705b-f295-4722-bc51-43a9bcdab8ef.png) > 本项目已获得软件著作权登记证书。