Ricon组态系统完整技术文档Ricon组态系统是一个基于Web技术的可视化组态编辑和实时监控平台，支持在浏览器中直接进

1. 系统概述

1.1 产品简介

Ricon组态系统是一个基于Web技术的可视化组态编辑和实时监控平台。系统采用纯前端架构，无需安装客户端，支持在浏览器中直接进行组态画面编辑、实时数据监控和场景管理。

1.2 核心优势

零部署成本 - 纯Web架构，浏览器直接访问
实时数据监控 - 支持WebSocket、MQTT、HTTP多种通信方式
丰富的组件库 - 内置200+工业组件和图元
高性能渲染 - 基于Konva.js的Canvas 2D渲染引擎
易于集成 - 标准的RESTful API和WebSocket协议
响应式设计 - 支持PC、平板、移动端多种设备
模块化架构 - 核心功能拆分为独立模块，便于维护和扩展
安全可靠 - 内置XSS和CSRF防护机制

1.3 适用场景

🏭 工业监控 - 生产线监控、设备状态展示
🏢 楼宇自控 - 智能楼宇、能耗监控
🌊 水务管理 - 污水处理、供水监控
⚡ 电力系统 - 电力监控、配电管理
🚦 交通管控 - 智慧交通、信号控制
🌐 物联网应用 - IoT设备监控、数据可视化
📊 数据中心 - 服务器状态监控、网络设备管理
🏥 医疗设备 - 医疗设备监控、患者生命体征监测

1.4 技术栈

前端框架与库

技术	版本	用途	特点
Konva.js	5.x	2D画布渲染引擎	高性能图形绘制，支持复杂交互
Layui	2.8	UI组件框架	企业级UI，丰富的组件库
jQuery	3.x	DOM操作	简化DOM操作和事件处理
ECharts	5.3.2	数据可视化	专业的图表库，支持实时数据
MQTT.js	4.x	MQTT客户端	轻量级消息协议，适合IoT设备

通信协议

协议	通信模式	适用场景	性能特点
WebSocket	实时双向	高频数据更新	低延迟、高实时性
MQTT	发布/订阅	IoT设备监控	轻量级、适合大量设备
HTTP/HTTPS	请求/响应	低频数据更新	兼容性好、实现简单

核心技术特性

Canvas 2D渲染 - 基于Konva.js的高性能图形渲染引擎
JSON配置驱动 - 场景和组件采用JSON格式存储，便于序列化和传输
SafeJSON解析 - 内置 window.SafeJSON 提供安全的JSON解析：
- parse() - 标准JSON解析
- parseStrict() - 严格模式解析
- parseFlexible() - 兼容历史非严格JSON格式
统一配置中心 - 集中管理所有配置项，支持动态加载和热更新
初始化管理器 - 智能管理模块依赖关系，优化初始化顺序
动态模块加载 - 按需加载模块，减少初始加载时间
异步资源加载 - 优化资源加载顺序，提高首屏加载速度
内存泄漏防护 - 自动跟踪和清理资源，提高系统稳定性
安全增强 - 内置XSS和CSRF防护机制
模块化架构 - 核心功能拆分为14个独立模块，采用协调器模式管理
代码质量保障 - 严格模式、规范命名、统一代码风格、完整注释

2. 技术架构

2.1 系统架构图

┌─────────────────────────────────────────────────┐
│            Web浏览器（客户端）                    │
├─────────────────────────────────────────────────┤
│  ┌──────────┐  ┌──────────┐  ┌──────────┐     │
│  │ 编辑器   │  │ 预览页面 │  │ 监控页面 │     │
│  │editor.html│ │preview.html││view.html │     │
│  └──────────┘  └──────────┘  └──────────┘     │
│         │             │             │          │
│  ┌─────────────────────────────────────┐      │
│  │     核心引擎层（Konva + 业务逻辑）   │      │
│  │  - stageOperation.js                │      │
│  │  - stageView.js                     │      │
│  │  - moduleAnimation.js               │      │
│  └─────────────────────────────────────┘      │
│         │             │             │          │
│  ┌─────────────────────────────────────┐      │
│  │     系统优化层                         │      │
│  │  - ConfigCenter.js (配置中心)        │      │
│  │  - InitManager.js (初始化管理)       │      │
│  │  - ModuleManager.js (模块管理)       │      │
│  │  - ResourceLoader.js (资源加载)      │      │
│  │  - MemoryLeakProtector.js (内存防护) │      │
│  │  - SecurityManager.js (安全管理)     │      │
│  └─────────────────────────────────────┘      │
│         │             │             │          │
│  ┌─────────────────────────────────────┐      │
│  │     通信层                           │      │
│  │  - webSocketClient.js               │      │
│  │  - mqttClient.js                    │      │
│  │  - httpClient.js                    │      │
│  └─────────────────────────────────────┘      │
└─────────────────┬──────────────────────────────┘
                  │
        ┌─────────┴─────────┐
        │                   │
┌───────▼──────┐   ┌───────▼──────┐
│  后端API服务  │   │  WebSocket   │
│ (RESTful)    │   │   MQTT服务器  │
└──────────────┘   └──────────────┘

2.2 模块化架构设计

核心模块划分

stageOperation.js 已重构为模块化架构，包含 14个独立功能模块：

模块分类	模块文件	功能说明	主要方法
核心功能	`stageInit.js`	场景初始化	`initStage`, `initResolution`
	`stageProperties.js`	场景属性配置	`initStageProperties`, `setStageSize`
	`stageConfig.js`	场景配置管理	`setStageCache`, `getStageJson`
通信数据	`stageCommunication.js`	通信配置管理	`initCommunicationConfig`
	`stageUtils.js`	工具函数	`getStageAllDataKey`, `getStageBase64`
用户交互	`stageViewControl.js`	视图控制	`stageMaxMin`, `addMouseListens`
	`stageKeyboard.js`	键盘事件	`setStageKeyboardEvent`
	`stageGuides.js`	辅助线	`getAnchorArray`, `drawGuides`
组件操作	`stageModule.js`	组件管理	`addModuleToStage`, `deleteModule`
	`stageAlign.js`	组件对齐	`alignModule`
	`moduleAttributes.js`	组件属性	`showModuleAttr`, `setModuleAttr`
系统功能	`stageUndoRedo.js`	撤销恢复	`ctrlZ`, `ctrlY`
	`stageImportExport.js`	导入导出	`import`, `export`
	`stagePanels.js`	组件库面板	`setBasicPanel`, `setGraphicPanel`

架构优势

代码组织结构优化
- 单一职责原则 - 每个模块只负责一个特定功能领域
- 高内聚低耦合 - 模块内部功能紧密相关，模块间依赖最小化
- 清晰的依赖关系 - 明确定义的模块加载顺序和依赖关系
可维护性提升
- 易于定位问题 - 功能模块化，bug定位更快速准确
- 独立升级维护 - 单个模块的更新不会影响其他功能
- 代码复用性强 - 通用模块可在其他项目中直接使用
可扩展性增强
- 插件化架构 - 新功能可以通过独立模块形式添加
- 配置驱动 - 通过配置文件即可启用/禁用特定功能
- 接口标准化 - 统一的模块接口规范，便于团队协作

2.3 核心模块说明

2.3.1 编辑器模块 (`editor.html`)

功能职责：

组态画面编辑和设计
组件库管理和组件选择
属性配置和场景管理
导入导出和模板管理

关键文件：

assets/js/modules/editor.js - 编辑器业务逻辑
assets/js/core/stageOperation.js - 场景操作核心

2.3.2 监控模块 (`view.html`)

功能职责：

场景渲染和数据展示
实时数据接收和更新
动画效果处理
用户交互响应

关键文件：

assets/js/modules/view.js - 监控页面逻辑
assets/js/core/stageView.js - 场景视图渲染
assets/js/core/moduleAnimation.js - 动画处理

2.3.3 通信模块

WebSocket客户端 (webSocketClient.js)

自动重连机制
心跳保活
连接状态管理
消息队列处理

MQTT客户端 (mqttClient.js)

WebSocket协议连接
主题订阅/取消订阅
QoS质量等级支持
认证和加密

HTTP客户端 (httpClient.js)

轮询请求支持
自定义请求头和参数
GET/POST/PUT/DELETE方法
错误重试机制

3. 核心功能

3.1 编辑器功能

3.1.1 画布操作

画布缩放

鼠标滚轮缩放（需按住Ctrl键）
工具栏缩放滑块（0-500%）
快捷键支持

画布平移

空格键+鼠标拖拽
画布边缘拖拽（当内容超出可视区域）

辅助功能

网格显示/隐藏
对齐辅助线
标尺显示（可选）

3.1.2 组件操作

基础操作

拖拽添加组件
点击选中组件
拖拽移动位置
拖拽调整大小
右键菜单操作

多选操作

Ctrl+点击 多选
Ctrl+A 全选
框选（鼠标拖拽选择区域）

对齐操作

左对齐、右对齐、居中对齐
上对齐、下对齐、垂直居中
水平分布、垂直分布

图层操作

上移一层、下移一层
置顶、置底
图层树管理

3.1.3 属性配置

通用属性

位置和大小（X、Y、Width、Height）
旋转角度
透明度
边框和填充
字体样式（字体、大小、颜色、粗细）

数据绑定

硬件设备数据点选择
数据缩放配置
条件判断配置
状态颜色映射

事件配置

点击事件（写值、跳转、脉冲）
悬停效果
自定义事件

3.1.4 撤销恢复

系统实现了基于栈的撤销/恢复机制：

// 使用ArrayStack实现
var stackZ = new ArrayStack();  // 撤销栈
var stackY = new ArrayStack();  // 恢复栈

// 支持的操作
- 组件添加/删除
- 属性修改
- 位置/大小调整
- 图层操作

快捷键：

Ctrl+Z - 撤销
Ctrl+Y - 恢复

3.2 监控功能

3.2.1 实时数据更新

更新机制：

基于WebSocket的实时推送
基于MQTT的发布订阅
基于HTTP的轮询请求
支持多种通信方式同时使用

更新流程：

数据接收 → 数据解析 → 场景数据更新 → 组件数据绑定 → 画面重绘

3.2.2 预览测试数据输入（preview.html）

预览页面支持在顶部输入框中手动输入测试数据并应用到场景。

推荐格式（标准 JSON）：{"a03":0,"a04":98,"d3a002":8}
兼容格式（历史写法）：{a03:0,a04:98,d3a002:8}（key 不加引号）

说明：兼容解析由 window.SafeJSON.parseFlexible() 支持，避免使用 eval。

3.2.3 动画效果

支持的动画类型：

旋转动画 - 风机、电机等旋转设备
流动动画 - 水流、电流等流动效果
闪烁动画 - 报警灯、指示灯闪烁
渐变动画 - 颜色渐变、透明度变化

动画配置：

动画速度控制
动画方向设置
动画循环模式
动画触发条件

3.2.4 状态指示

颜色状态

根据数据值显示不同颜色
支持多段颜色映射
支持渐变色

图片状态

根据数据值切换图片
支持多状态图片
支持状态图标

数值显示

实时数值显示
单位显示
数据格式化

3.3 场景管理

3.3.1 场景保存

保存内容：

场景JSON数据（所有组件和配置）
场景缩略图（Base64编码）
绑定数据点列表
场景元数据（名称、描述、分辨率等）

保存格式：

{
    "stageId": "stage_001",
    "stageName": "场景名称",
    "width": 1920,
    "height": 1080,
    "components": [...],
    "config": {...}
}

3.3.2 场景加载

加载方式：

通过场景ID加载
从模板库加载
导入JSON文件

加载流程：

场景ID → API请求 → 获取场景数据 → 解析JSON → 渲染场景

3.3.3 场景模板

模板功能：

保存常用场景为模板
从模板快速创建场景
模板分类管理
模板分享

4. 组件系统

4.1 组件分类

4.1.1 基础组件

文本组件

静态文本显示
支持数据绑定显示
丰富的字体样式配置

按钮组件

点击事件配置
写值功能
画面跳转
脉冲信号发送

图片组件

静态图片
动态图片切换
状态图片映射

图表组件

ECharts图表集成
柱状图、折线图、饼图等
实时数据更新
丰富的图表配置

4.1.2 图元组件

电气图元

丰富的工业电气符号
支持自定义图元
状态颜色映射

开关组件

开关图标
开关状态控制
点击切换

指示灯组件

状态指示灯
多状态颜色
闪烁效果

4.1.3 高级组件

表格组件

数据表格展示
实时数据更新
排序和筛选

iframe组件

嵌入外部网页
嵌入ECharts图表
嵌入数据表格

动画组件

旋转动画
流动动画
闪烁动画

4.2 组件属性配置

4.2.1 通用属性

属性	类型	说明
x	Number	X坐标位置
y	Number	Y坐标位置
width	Number	宽度
height	Number	高度
rotation	Number	旋转角度（度）
opacity	Number	透明度（0-1）
visible	Boolean	是否可见

4.2.2 数据绑定属性

硬件数据点绑定

从硬件设备树选择变量
支持虚拟变量绑定
支持多数据点绑定

数据缩放配置

线性缩放
自定义映射规则
单位转换

条件判断配置

多条件判断
逻辑运算符（AND、OR）
条件组合

4.2.3 样式属性

字体样式

字体族
字体大小
字体颜色
字体粗细
字体样式（正常、斜体）

边框样式

边框宽度
边框颜色
边框样式（实线、虚线等）

填充样式

填充颜色
渐变填充
图片填充

4.3 组件开发

4.3.1 开发流程

创建编辑模块
- 在 modules/edit/ 目录创建HTML和JS文件
- 实现属性编辑界面
注册组件
- 在 assets/json/basic.json 添加组件定义
- 配置组件图标和属性
实现渲染逻辑
- 在 stageOperation.js 添加创建逻辑
- 在 stageView.js 添加渲染逻辑
实现数据更新
- 在 stageView.js 实现数据更新方法
- 处理WebSocket数据推送

4.3.2 组件模板

编辑模块模板：

// editMyComponent.js
function initMyComponentEditor(moduleObject) {
    // 初始化编辑器
    // 绑定事件
    // 加载默认值
}

function saveMyComponentConfig(moduleObject) {
    // 保存配置
    // 更新组件属性
}

组件注册模板：

{
    "type": "MyComponent",
    "name": "我的组件",
    "icon": "assets/images/icons/my-component.png",
    "attributes": {
        "width": 100,
        "height": 100,
        "color": "#333333"
    }
}

5. 开发指南

5.1 代码结构

5.1.1 核心文件说明

文件	说明	主要功能
`stageOperation.js`	场景操作核心	组件创建、属性配置、场景管理
`stageView.js`	场景视图渲染	场景渲染、数据更新、动画处理
`webSocketClient.js`	WebSocket客户端	连接管理、消息处理
`mqttClient.js`	MQTT客户端	连接管理、主题订阅
`httpClient.js`	HTTP客户端	请求管理、轮询处理
`moduleAnimation.js`	动画处理	旋转、流动、闪烁等动画

5.1.2 模块化设计

核心层（Core）

提供基础功能和API
不依赖业务逻辑
可复用的通用模块

业务层（Modules）

编辑器业务逻辑
监控页面逻辑
组件编辑逻辑

工具层（Common）

通用工具函数
数据格式化
工具类封装

5.2 开发规范

5.2.1 命名规范

文件命名：

HTML文件：kebab-case（如：edit-button.html）
JavaScript文件：camelCase（如：editButton.js）
CSS文件：kebab-case（如：edit-button.css）

变量命名：

变量名：cameCase（如：stageOper）
常量：UPPER_SNAKE_CASE（如：MAX_SIZE）
类名：PascalCase（如：StageOperation）

5.2.2 代码风格

JavaScript风格：

// 使用严格模式
"use strict";

// 使用函数表达式而非函数声明（在某些模块中）
var myFunction = function() {
    // 代码
};

// 添加注释
/**
 * 函数说明
 * @param {type} param - 参数说明
 * @returns {type} 返回值说明
 */

注释规范：

文件头注释（说明文件用途）
函数注释（参数和返回值）
关键代码注释（复杂逻辑说明）

5.3 调试技巧

5.3.1 浏览器调试

开发者工具：

F12 打开开发者工具
Console查看日志和错误
Network查看网络请求
Sources设置断点调试

常用调试代码：

// 查看场景对象
console.log(stageOper.stage);

// 查看组件列表
console.log(stageOper.stage.find('Group'));

// 查看通信配置
console.log(stageOper.stage.attrs.communicationConfig);

// 查看WebSocket连接
console.log(webSocketClient);

5.3.2 日志记录

系统在关键位置添加了console.log，便于调试：

组件创建日志
数据更新日志
通信连接日志
错误日志

6. 最佳实践

6.1 场景设计

6.1.1 布局设计

分层设计 - 使用图层分组管理组件
响应式布局 - 考虑不同屏幕尺寸
视觉层次 - 重要信息突出显示
一致性 - 保持风格统一

6.1.2 组件使用

合理使用组件 - 根据功能选择合适的组件
组件数量控制 - 单个场景建议不超过500个组件
组件命名 - 为组件设置有意义的名称
组件复用 - 重复使用的元素创建模板

6.2 数据管理

6.2.1 数据点管理

数据点命名 - 使用有意义的数据点名称
数据点分组 - 按功能或设备分组管理
数据更新频率 - 根据实际需求设置合理的更新频率
数据缓存 - 合理使用缓存减少API调用

6.2.2 通信配置

选择合适的通信协议 - 根据数据更新频率选择
连接管理 - 合理管理WebSocket连接
错误处理 - 实现完善的错误处理机制
重试策略 - 实现指数退避重试策略

6.3 性能优化

6.3.1 渲染优化

减少重绘 - 合理使用图层分组
优化动画 - 避免复杂计算在动画循环中
图片优化 - 使用合适的图片格式和大小
资源加载 - 按需加载资源

6.3.2 代码优化

代码分割 - 按需加载代码
缓存策略 - 缓存常用数据
事件委托 - 使用事件委托减少事件监听器
DOM操作 - 减少DOM操作次数

6.4 用户体验

6.4.1 操作体验

操作反馈 - 提供及时的操作反馈
错误提示 - 友好的错误提示信息
加载状态 - 显示加载状态
操作确认 - 重要操作需要确认

6.4.2 界面设计

简洁明了 - 界面简洁，功能明确
易于使用 - 操作流程简单直观
响应迅速 - 系统响应速度快
视觉舒适 - 色彩搭配合理，视觉效果舒适

7. 故障排查

7.1 安装部署问题

Q: 页面空白，无法显示？ A:

检查Web服务器配置是否正确
查看浏览器控制台错误信息
确认所有资源文件路径正确
检查浏览器兼容性

Q: 图片无法加载？ A:

检查图片路径（相对路径或绝对路径）
确认图片文件是否存在
检查Web服务器静态资源配置
查看浏览器Network面板请求状态

7.2 功能使用问题

Q: 组件无法拖拽？ A:

确认Konva库是否正确加载
检查画布是否正常初始化
查看浏览器控制台是否有错误
尝试刷新页面

Q: 保存失败？ A:

检查API接口地址配置
确认用户token是否有效
查看网络请求响应信息
检查场景JSON数据格式

Q: 数据不更新？ A:

检查WebSocket/MQTT/HTTP连接状态
确认数据点绑定是否正确
查看数据更新方法是否被调用
检查数据格式是否符合预期

Q: 控制台报错 window.SafeJSON.parseFlexible is not a function？ A:

确认已加载 assets/js/common/tool.js（其中定义 window.SafeJSON）
版本升级后请清理缓存（Ctrl+F5），避免旧资源未更新

Q: 控制台报错 echarts is not defined（图表组件）？ A:

确认页面已引入 ECharts 脚本（echarts.min.js）
若页面使用 defer 延迟加载脚本，图表初始化可能早于脚本加载；请检查 Network 是否成功加载脚本

7.3 通信连接问题

Q: WebSocket连接失败？ A:

检查WebSocket服务器是否运行
确认URL配置是否正确（ws://或wss://）
检查防火墙和网络设置
查看浏览器控制台WebSocket错误

Q: MQTT连接失败？ A:

确认MQTT.js库是否正确加载
检查MQTT服务器地址（WebSocket协议）
验证用户名密码是否正确
检查客户端ID是否唯一

Q: HTTP请求失败？ A:

检查API地址是否正确
确认请求头和参数格式
查看CORS跨域配置
检查网络连接

7.4 性能问题

Q: 场景加载慢？ A:

优化场景组件数量
压缩图片资源
使用图片缓存
检查网络带宽

Q: 画面卡顿？ A:

减少动画数量
优化数据更新频率
使用图层分组
检查浏览器性能

8. 性能优化

8.1 前端性能优化

8.1.1 加载优化

资源压缩 - 压缩CSS、JavaScript和图片资源
资源合并 - 合并多个CSS和JavaScript文件
懒加载 - 实现图片和组件的懒加载
预加载 - 预加载即将使用的资源
CDN加速 - 使用CDN加速静态资源

8.1.2 运行时优化

DOM操作优化 - 减少DOM操作，使用虚拟DOM
事件委托 - 使用事件委托减少事件监听器
计算缓存 - 缓存计算结果，避免重复计算
Web Worker - 将复杂计算移至Web Worker
防抖节流 - 对频繁事件进行防抖或节流处理

8.1.3 渲染优化

图层管理 - 合理使用Konva.js的图层
减少重绘 - 批量更新DOM，减少重绘
动画优化 - 使用requestAnimationFrame
图片优化 - 使用适当的图片格式和大小
字体优化 - 合理使用字体，避免字体闪烁

8.2 后端性能优化

8.2.1 API优化

缓存策略 - 缓存API响应
批量操作 - 支持批量API操作
分页查询 - 实现分页查询
请求合并 - 合并多个小请求
响应压缩 - 启用Gzip压缩

8.2.2 数据库优化

索引优化 - 合理创建数据库索引
查询优化 - 优化SQL查询
连接池 - 使用数据库连接池
缓存 - 使用Redis等缓存

8.2.3 服务器优化

负载均衡 - 配置负载均衡
水平扩展 - 支持水平扩展
资源监控 - 监控服务器资源使用
性能分析 - 定期进行性能分析

8.3 网络优化

8.3.1 通信优化

协议选择 - 根据场景选择合适的通信协议
连接管理 - 合理管理WebSocket连接
数据压缩 - 压缩传输数据
数据格式 - 使用高效的数据格式
批量传输 - 批量传输数据

8.3.2 网络配置

CDN - 使用CDN加速
HTTP/2 - 启用HTTP/2
HTTPS - 使用HTTPS
DNS优化 - 优化DNS解析

9. 安全指南

9.1 前端安全

9.1.1 XSS防护

输入验证 - 对用户输入进行严格验证
输出编码 - 对输出进行HTML编码
CSP - 配置内容安全策略
DOM净化 - 净化DOM操作

9.1.2 CSRF防护

Token验证 - 使用CSRF Token
SameSite Cookie - 设置SameSite Cookie
Referer检查 - 检查Referer头
Origin检查 - 检查Origin头

9.1.3 其他安全措施

密码安全 - 安全存储密码
敏感数据 - 加密存储敏感数据
HTTPS - 使用HTTPS
权限控制 - 实现前端权限控制

9.2 后端安全

9.2.1 API安全

认证授权 - 实现完整的认证授权
API限速 - 限制API请求频率
参数验证 - 验证API参数
错误处理 - 安全的错误处理

9.2.2 服务器安全

防火墙 - 配置防火墙
更新补丁 - 及时更新系统补丁
访问控制 - 限制服务器访问
日志审计 - 记录安全日志

9.3 部署安全

9.3.1 环境安全

最小权限 - 使用最小权限原则
隔离环境 - 隔离部署环境
备份恢复 - 定期备份数据
监控告警 - 监控安全事件

9.3.2 配置安全

敏感信息 - 安全存储配置信息
环境变量 - 使用环境变量管理配置
配置加密 - 加密敏感配置

附录

A. 快捷键列表

功能	快捷键
保存	`Ctrl + S`
预览	`Ctrl + P`
撤销	`Ctrl + Z`
恢复	`Ctrl + Y`
复制	`Ctrl + C`
粘贴	`Ctrl + V`
删除	`Delete`
全选	`Ctrl + A`
放大	`Ctrl + 滚轮上`
缩小	`Ctrl + 滚轮下`
全屏	`F11`

B. 组件属性类型

类型	说明	示例
input	文本输入框	文本、数字输入
color	颜色选择器	颜色选择
select	下拉选择框	选项选择
slider	滑块	数值范围选择
hardwareInputNew	硬件设备选择	数据点绑定
whereStatusColorTable	状态颜色表	条件颜色配置
valueZoomTableNew	数据缩放表	数据缩放配置

C. 数据格式参考

场景JSON结构：

{
    "attrs": {
        "width": 1920,
        "height": 1080,
        "backgroundColor": "#ffffff",
        "communicationConfig": {
            "websocket": {
                "enabled": true,
                "url": "ws://localhost:8080/ws",
                "heartbeat": 10,
                "reconnect": "1"
            }
        },
        "dataKeyArray": {
            "a03": "",
            "a04": "",
            "d3a002": ""
        }
    },
    "children": [
        {
            "attrs": {
                "id": "component_001",
                "moduleType": "Text",
                "x": 100,
                "y": 100,
                "width": 200,
                "height": 50
            }
        }
    ]
}

dataKeyArray 说明：

位置：stage.attrs.dataKeyArray
类型：Object（key 为数据点编号/devicecode，value 为当前值；初始化为 ""）
用途：预览/监控页用于构建 messageContentTemp 并进行数据合并更新

D. 参考资料

E. 版本历史

v1.0.2 (2026)

文档全面优化和更新
新增性能优化章节
新增安全指南章节
扩展适用场景
增强技术栈说明
完善故障排查指南

v1.0.1 (2024)

系统优化和架构升级
实现统一配置中心，集中管理所有配置
实现初始化管理器，优化模块依赖管理
实现动态模块加载，减少初始加载时间
实现异步资源加载，提高首屏加载速度
实现内存泄漏防护，提高系统稳定性
实现安全管理器，增强XSS和CSRF防护
优化配置管理，支持动态加载和热更新
优化错误处理，提供更友好的用户反馈
增强代码文档，提高可维护性

v1.0.0 (2024)

初始版本发布
支持可视化组态编辑
支持实时数据监控
支持WebSocket、MQTT、HTTP通信
支持丰富的组件库

文档维护： 本文档会持续更新，请关注项目更新日志。 👉 演示地址：www.ricon.cloud:81 👉 官网地址：www.ricon.cloud

Ricon组态系统 - 让可视化组态更简单！ 🚀

Ricon组态系统完整技术文档

目录