睿控（Ricon）组态

📖 项目简介

Ricon组态系统是一个功能强大的Web端可视化组态编辑和监控平台，支持：

🎨 可视化编辑 - 拖拽式组态画面编辑
📊 数据监控 - 实时数据展示和监控
🔧 组件配置 - 丰富的组件库和配置选项
📱 响应式设计 - 支持多种屏幕尺寸
🌐 实时通信 - WebSocket实时数据推送

✨ 主要特性

编辑器功能

✅ 拖拽式组件编辑
✅ 丰富的组件库（基础组件、图元图库、画面装饰等）
✅ 图层管理和对齐工具
✅ 撤销/恢复功能（基于ArrayStack实现）
✅ 导入/导出功能
✅ 快捷键支持
✅ 画布缩放、平移
✅ 组件属性面板配置
✅ 场景模板保存和加载

监控功能

✅ 实时数据监控
✅ 图表可视化（ECharts集成）
✅ 动画效果（旋转、流动、闪烁等）
✅ 状态指示（颜色变化、图片切换）
✅ WebSocket实时通信
✅ 历史数据查询和展示
✅ 视频监控集成
✅ 天气信息展示

组件支持

基础组件

📊 图表组件 - ECharts图表（柱状图、折线图、饼图等）
📝 文本组件 - 支持字体、颜色、大小等配置
🔘 按钮组件 - 支持点击事件、写值、画面跳转、脉冲信号
🖼️ 图片组件 - 支持静态图片、图片切换、状态图片
📅 日期组件 - 当前日期显示
🌤️ 天气组件 - 天气信息展示
📺 视频组件 - 视频播放、监控画面
🔄 动画组件 - 旋转、流动条、闪烁等

图元组件

⚡ 电气图元 - 丰富的工业电气图元库
🔌 开关组件 - 开关图标、开关状态
💡 指示灯 - 状态指示灯
🔧 工业设备 - 各类工业设备图元

高级组件

📊 表格组件 - 数据表格展示
🌐 iframe组件 - 嵌入网页、ECharts、表格
📡 数据绑定 - 硬件设备数据点绑定
🎯 条件配置 - 数据条件判断和状态变化
⚙️ 事件行为 - 组件交互事件配置

🚀 快速开始

环境要求

现代浏览器（Chrome、Edge、Firefox等，推荐Chrome）
Web服务器（Nginx、Apache等）
Node.js（可选，用于开发）

安装部署

获取项目

1.# 将项目文件放置到Web服务器目录

2# 例如：/var/www/html/ricon 或 D:/nginx/html/ricon

配置Web服务器
使用Nginx配置示例：

1.server {

2.listen 80;

3.server_name localhost;

4.root /path/to/ricon;

5.index editor.html;

6.location / {

7.try_files $uri $uri/ /editor.html; }

8.# 支持跨域（如需要） add_header Access-Control-Allow-Origin *; }

配置系统参数
编辑 config/apiClient.js 文件，配置后端服务地址：

代码块

1.var SystemConfig = {

2.serviceIpPort: "http://your-api-server:8080", //

3.后端HTTP服务地址 apiPrefix: "", //

4.接口统一前缀（可选） timeout: 30000 // 请求超时时间 };

注意： WebSocket/MQTT/HTTP 通信地址在编辑器中通过画布属性的"通信配置"面板配置，不在此处设置。
访问系统
1. 编辑器：http://localhost/ricon/editor.html?userId=xxx&token=xxx&stageId=xxx
2. 预览：http://localhost/ricon/preview.html
3. 监控：http://localhost/ricon/view.html?userId=xxx&token=xxx&stageId=xxx
URL参数说明：
1. userId - 用户ID（必填）
2. token - 认证Token（必填）
3. stageId - 场景ID（编辑/查看时必填，新建时可不传）

📁 项目结构

代码块

ricon/

├── editor.html # 编辑器入口页面
├── preview.html # 预览页面
├── view.html # 监控页面
│ ├── assets/ # 静态资源目录
│ ├── css/ # 样式文件
│ │ ├── common/ # 通用样式
│ │ │ └── darktooltip.css │ │ ├── font/ # 字体文件
│ │ ├── localFont.css │ │ │ └── *.ttf # 自定义字体
│ │ ├── libs/ # 第三方库样式 │ │ │ └── video-js/ │ │ ├── plugIn/ # 插件样式
│ │ │ └── font-awesome-4.7.0/ │ │ ├── editor.css # 编辑器样式
│ │ ├── view.css # 监控页面样式
│ │ └── reset.css # 样式重置
│ │ │ ├── js/ # JavaScript文件
│ │ ├── core/ # 核心功能模块
│ │ │ ├── ArrayStack.js # 撤销/恢复栈
│ │ │ ├── stageOperation.js # 场景操作核心
│ │ │ ├── stageView.js # 场景视图渲染
│ │ │ ├── moduleAnimation.js # 模块动画处理
│ │ │ ├── webSocketClient.js # WebSocket客户端
│ │ │ ├── mqttClient.js # MQTT客户端
│ │ │ └── httpClient.js # HTTP客户端
│ │ │ │ │ ├── modules/ # 业务模块
│ │ │ ├── editor.js # 编辑器业务逻辑
│ │ │ ├── preview.js # 预览页面逻辑
│ │ │ ├── view.js # 监控页面逻辑
│ │ │ ├── client.js # 客户端逻辑
│ │ │ └── echartOption.js # ECharts图表配置选项
│ │ │ │ │ ├── libs/ # 第三方库
│ │ │ ├── jquery/ # jQuery库
│ │ │ ├── layui-master/ # Layui UI框架
│ │ │ ├── konva-master/ # Konva 2D画布引擎
│ │ │ ├── echart5.3.2/ # ECharts图表库
│ │ │ ├── zTree_v3/ # zTree树形控件
│ │ │ ├── art-template/ # 模板引擎
│ │ │ ├── codemirror-5/ # 代码编辑器
│ │ │ └── ... # 其他第三方库
│ │ │ │ │ ├── common/ # 通用工具
│ │ │ ├── tool.js # 工具函数
│ │ │ ├── translate.js # 翻译函数
│ │ │ └── ... # 其他工具
│ │ │ │ │ └── index.js # 入口文件
│ │ │ ├── images/ # 图片资源
│ │ ├── icons/ # 图标库
│ │ │ ├── assets/ # SVG图标
│ │ │ └── config/ # 配置图标
│ │ ├── gyyj/ # 工业图元库
│ │ │ ├── 01-18/ # 各类工业图元分类
│ │ │ ├── dl/ # 电力图元
│ │ │ └── wscl/ # 污水处理图元
│ │ ├── status/ # 状态图片
│ │ ├── buttons/ # 按钮图片
│ │ ├── switches/ # 开关图片
│ │ ├── decoration/ # 装饰图片
│ │ ├── electric/ # 电气图片
│ │ ├── weather/ # 天气图片
│ │ ├── Windmills/ # 风车图片
│ │ └── ... # 其他图片资源
│ │ ├── json/ # JSON配置文件
│ │ ├── basic.json # 基础组件配置
│ │ ├── graphic.json # 图元组件配置
│ │ ├── decoration.json # 装饰组件配置
│ │ └── screen.json # 画面配置
│ │ │ └── template/ # 模板文件
│ ├── collaTemplate.html │ └── screenTemplate.html
│ ├── modules/ # 功能模块
│ └── edit/ # 编辑模块
│ ├── edit-button.html/js # 按钮编辑
│ ├── edit-text.html/js # 文本编辑
│ ├── edit-echart.html/js # 图表编辑
│ ├── edit-svg.html/js # SVG编辑
│ ├── edit-switch-gear.html/js # 开关编辑
│ ├── edit-table.html/js # 表格编辑
│ ├── edit-iframe.html/js # iframe编辑
│ ├── edit-iframe-echart.html/js # iframe图表编辑
│ ├── edit-iframe-table.html/js # iframe表格编辑
│ ├── edit-weather.html/js # 天气编辑
│ ├── edit-live.html/js # 视频编辑
│ ├── edit-pool.html/js # 水池编辑
│ ├── edit-rotating.html/js # 旋转编辑
│ ├── edit-line.html/js # 线段编辑
│ ├── edit-shape.html/js # 形状编辑
│ ├── edit-current-date.html/js # 日期编辑
│ ├── decorative.html/js # 装饰编辑
│ ├── image-status.html/js # 状态图片编辑
│ ├── status-light.html/js # 指示灯编辑
│ ├── switch-svg.html/js # SVG开关编辑
│ ├── sprinkling.html/js # 喷淋编辑
│ ├── electric/ # 电气组件编辑
│ └── electricNew/ # 新版电气组件编辑
│ ├── pages/ # 页面组件
│ ├── config/ # 配置页面
│ │ ├── basic-state-config.html # 基础状态配置
│ │ ├── condition-config.html # 条件配置
│ │ ├── dummy-variable-config.html # 虚拟变量配置
│ │ └── event-behavior-config.html # 事件行为配置 │ │ │ ├── edit/ # 编辑页面
│ │ ├── group-name.html # 分组名称
│ │ ├── stage-module-name.html # 场景模块名称
│ │ └── write-value.html # 写值配置
│ │ │ ├── select/ # 选择页面
│ │ ├── hardware-select-tree.html # 硬件选择
│ │ ├── image-rotate-list.html # 旋转图片列表
│ │ ├── image-status-list.html # 状态图片列表
│ │ ├── switch-icon-list.html # 开关图标列表
│ │ └── target-stage.html # 目标场景选择
│ │ │ ├── upload/ # 上传页面
│ │ ├── stage-background-image.html # 场景背景图上传
│ │ └── upload-image.html # 图片上传
│ │ │ ├── view/ # 视图页面
│ │ ├── alert-message.html # 告警消息
│ │ ├── camera-run.html # 摄像头运行
│ │ ├── history-echart-bar.html # 历史柱状图
│ │ ├── history-echart-line.html # 历史折线图
│ │ ├── history-table.html # 历史表格
│ │ ├── local-theme.html # 本地主题
│ │ ├── ricon-live.html # Ricon直播
│ │ ├── video-play.html # 视频播放
│ │ └── weather.html # 天气信息
│ │ │ └── rotate.html # 旋转页面
│ └── config/ # 配置文件
├── echart/ # ECharts配置
│ └── icon/ # 图表图标
├── examples/ # 示例文件
│ ├── 1680-1080.json
│ ├── 1770-900.json
│ ├── BY0001.json
│ ├── BY0002.json
│ ├── dlxt2.json
│ ├── sjsp.json
│ ├── tpqhcs.json
│ ├── windowBlcz.json
│ ├── windowBlcz2.json
│ ├── windowsOrPhone.json
│ ├── wsclxt.json
│ ├── wsclxt2.json
│ ├── xlbl.json
│ ├── zsycs.json
│ └── zsycs1920_1080.json
├── init.json # 初始化JSON配置（字体、分辨率等）
├── apiClient.js # API客户端JS文件（后端接口调用和系统配置）
└── examples/ # 示例场景JSON文件

🛠️ 技术栈

核心框架

Konva.js (5.x) - 2D画布渲染引擎，用于组件绘制和交互
Layui - 前端UI框架，提供弹窗、表单、表格等组件
jQuery - JavaScript库，DOM操作和事件处理
ECharts (5.3.2) - 数据可视化图表库

主要库

zTree - 树形控件，用于组件库和硬件设备树展示
art-template - 模板引擎，用于HTML模板渲染
CodeMirror - 代码编辑器，用于JSON配置编辑
Font Awesome (4.7.0) - 图标库
Video.js - 视频播放器

通信协议

WebSocket - 实时双向通信，支持心跳和自动重连
MQTT - 轻量级消息传输协议，适合IoT场景（需引入MQTT.js库）
HTTP/HTTPS - RESTful API，支持轮询数据获取

核心技术

Canvas 2D - 通过Konva实现高性能画布渲染
JSON配置 - 场景和组件配置采用JSON格式
模块化架构 - 清晰的代码组织结构

📖 使用指南

编辑器使用

打开编辑器
1. 访问 editor.html
2. 系统会自动加载组件库和画布
创建组态画面
1. 从左侧组件库选择组件
2. 拖拽组件到画布中央
3. 在右侧属性面板配置组件属性
4. 设置数据绑定（硬件设备数据点）
编辑组件
1. 点击画布上的组件进行选中
2. 使用属性面板修改组件属性
3. 支持拖拽调整位置和大小
4. 右键菜单提供更多操作选项
保存画面
1. 点击工具栏"保存"按钮
2. 或使用快捷键 Ctrl+S
3. 画面数据会保存到服务器
预览画面
1. 点击工具栏"预览"按钮
2. 或使用快捷键 Ctrl+P
3. 在新窗口预览画面效果
导入/导出
1. 支持导入JSON格式的场景文件
2. 支持导出当前场景为JSON文件
3. 支持保存为场景模板

监控页面使用

打开监控页面
1. 访问 view.html?stageId=xxx
2. 通过URL参数指定要加载的场景ID
实时监控
1. 系统根据场景配置的通信方式自动连接（WebSocket/MQTT/HTTP）
2. 接收实时数据并更新画面
3. 显示连接状态指示器
4. 支持多种通信方式同时使用
全屏显示
1. 点击工具栏全屏按钮
2. 或按F11进入全屏模式
刷新画面
1. 点击工具栏刷新按钮
2. 从服务器重新加载场景数据

快捷键

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

🔧 配置说明

系统基础配置

编辑 config/apiClient.js 文件进行系统配置：

复制代码

代码块

1.var SystemConfig = {

2.// HTTP服务根地址（请改成你自己的后端地址）

3.serviceIpPort: "http://localhost:80/dev-api",

4.// 接口统一前缀（可选） apiPrefix: "",

5.// Ajax请求超时时间（毫秒） timeout: 30000 };

说明：

serviceIpPort 是后端 HTTP 服务的基础地址，所有 API 接口都会基于此地址拼接
apiPrefix 为可选配置，如果后端所有接口都有统一前缀（如 /api），可在此设置
实际接口地址 = serviceIpPort + apiPrefix + 接口路径

通信配置

重要： WebSocket/MQTT/HTTP 通信地址不再通过 SystemConfig 配置，而是在编辑器中通过画布属性的"通信配置"面板进行配置。

通信配置保存在场景 JSON 的 stage.attrs.communicationConfig 中，支持：

WebSocket - 实时双向通信，支持心跳和自动重连
MQTT - 基于发布/订阅的消息传输协议，适合IoT场景
HTTP - 基于请求/响应的轮询通信，支持多条配置

详细配置说明请参考：Ricon组态通信配置使用说明.md

组件配置

组件配置文件位于 assets/json/ 目录：

basic.json - 基础组件配置（按钮、文本、图表等）
graphic.json - 图元组件配置（工业图元库）
decoration.json - 装饰组件配置（装饰元素）
screen.json - 画面模板配置

初始化配置

config/init.json 包含系统初始化配置：

fontText - 可用字体列表
fontSize - 字号列表
stageResolution - 场景分辨率选项
dateFormat - 日期时间格式模板
fontStyle - 字体样式选项

数据点绑定

组件支持绑定硬件设备数据点：

在组件属性面板选择"数据点"
从硬件设备树中选择设备
配置数据缩放和条件判断
设置状态颜色映射

🎨 组件开发

添加新组件

创建编辑模块
1. 在 modules/edit/ 目录创建 edit-xxx.html 和 editXxx.js
2. 实现组件的属性编辑界面和逻辑
3. 参考现有组件（如 edit-button.html/js）的实现方式
注册组件
1. 在 assets/json/basic.json 或相应配置文件中添加组件定义
2. 配置组件图标、默认属性、属性面板配置等
实现渲染逻辑
1. 在 assets/js/core/stageOperation.js 中添加组件创建逻辑
2. 在 assets/js/core/stageView.js 中添加组件渲染逻辑
3. 在 assets/js/core/moduleAnimation.js 中添加动画处理（如需要）
实现数据更新
1. 在 assets/js/core/stageView.js 中实现数据更新方法
2. 支持WebSocket数据推送更新

组件属性配置

组件属性采用JSON配置，支持以下属性类型：

input - 文本输入框
color - 颜色选择器
selectAdvanced - 下拉选择框
slider - 滑块
hardwareInputNew - 硬件设备选择
whereStatusColorTable - 状态颜色配置表
fontNew - 字体配置
BORDER - 边框配置
RotatImage - 旋转图片选择
valueZoomTableNew - 数据缩放配置表

📡 API接口

场景管理接口

保存场景

接口地址： POST /api/saveStage

请求参数：

代码块

1.{ stageDatajson: string,

2. // 场景JSON数据（字符串格式）

3. dataKeyArray: string, // 绑定的数据点数组（逗号分隔）

4. stageBase64: string, // 场景缩略图（Base64）

5.stageId: string // 场景ID（修改时必传，新建时不传） }

请求头：

代码块

1.Authorization: Bearer {token}

2.Content-Type: application/x-www-form-urlencoded

响应格式：

代码块

1.{ code: 200,

2.data: { stageId: "123" // 新建后返回ID，修改时返回原ID },

3.msg: "success" }

加载场景

接口地址： GET /api/selectStageById

请求参数：

代码块

1.stageId: string // 场景ID

返回数据：

代码块

1.{ code: 200,

2.data: { stageDatajson: string, // 场景JSON数据（字符串格式）

3.stageId: "123", stageName: "场景名称" },

4.msg: "success" }

通信数据格式

WebSocket数据格式

连接地址： 在场景的通信配置中设置（画布属性 → 通信配置）

服务器发送格式：

1.{ "MESSAGETYPE": "01", // 01-业务数据, 02-提醒数据, 03-网络诊断, 04-命令响应, 05-心跳

2."MESSAGECONTENT":

3.{ "devicecode1": "value1",

4."devicecode2": "value2" } }

MQTT数据格式

连接地址： 在场景的通信配置中设置（需使用WebSocket协议，如 ws://localhost:9001）

消息格式：

1.{ "devicecode1": "value1",

2. "devicecode2": "value2" }

HTTP数据格式

接口地址： 在场景的通信配置中设置

响应格式（标准）：

1.{ "code": 200, "data":

2.{ "devicecode1": "value1", "devicecode2": "value2" } }

或直接数据格式：

1.{ "devicecode1": "value1",

2."devicecode2": "value2" }

🐛 问题排查

常见问题

图片加载失败
1. 检查图片路径是否正确（相对路径或绝对路径）
2. 确认图片文件是否存在
3. 检查浏览器控制台的网络请求
通信连接失败
1. WebSocket连接失败：
  - 检查WebSocket服务器是否运行
  - 确认场景通信配置中的WebSocket地址是否正确（画布属性 → 通信配置）
  - 检查防火墙和网络设置
  - 查看浏览器控制台的WebSocket错误信息
2. MQTT连接失败：
  - 确认MQTT.js库已正确引入（在 view.html 中引入）
  - 检查MQTT服务器地址（需使用WebSocket协议，如 ws://localhost:9001）
  - 验证用户名密码是否正确（如需要认证）
  - 检查订阅主题是否正确
3. HTTP请求失败：
  - 检查HTTP地址是否正确
  - 确认请求头和参数格式为有效的JSON
  - 检查服务器是否支持跨域请求（CORS）
组件不显示
1. 检查浏览器控制台是否有JavaScript错误
2. 确认相关库文件是否加载成功
3. 检查组件JSON配置是否正确
4. 验证Konva画布是否正常初始化
数据不更新
1. 检查WebSocket连接状态
2. 确认数据点绑定是否正确
3. 查看数据更新方法是否被正确调用
4. 检查数据格式是否符合预期
保存失败
1. 检查API接口地址配置
2. 确认用户token是否有效
3. 查看网络请求的响应信息
4. 检查场景JSON数据格式是否正确
预览页面空白
1. 确认从编辑器正确传递了场景数据
2. 检查预览页面的JavaScript控制台错误
3. 验证场景数据格式是否完整

调试技巧

开启浏览器开发者工具
1. 按 F12 打开开发者工具
2. 查看Console标签页的错误信息
3. 查看Network标签页的网络请求
4. 使用Sources标签页设置断点调试
查看场景数据
1. 在编辑器中使用"导出"功能查看场景JSON
2. 使用浏览器控制台查看 stageOper 对象
3. 检查组件属性是否正确设置
通信调试
1. WebSocket调试：
  - 在浏览器控制台查看WebSocket消息
  - 使用 webSocketClient 对象检查连接状态
  - 监听WebSocket事件（open、message、error、close）
2. MQTT调试：
  - 使用 mqttClient 对象检查连接状态
  - 查看浏览器控制台的MQTT消息日志
3. HTTP调试：
  - 在浏览器Network面板查看HTTP请求详情
  - 检查请求URL、请求头、请求参数和响应数据

📝 开发规范

代码规范

使用统一的代码风格（遵循现有代码风格）
添加必要的注释（文件头注释、函数注释）
遵循模块化开发原则
使用有意义的变量和函数命名

文件命名规范

HTML文件 ：使用连字符命名（kebab-case），如 edit-button.html
JavaScript文件 ：使用驼峰命名（camelCase），如 editButton.js
CSS文件 ：使用连字符命名（kebab-case），如 edit-button.css
目录：使用小写字母和连字符，如 edit-modules/
变量名：使用驼峰命名（camelCase）
常量：使用大写字母和下划线，如 MAX_SIZE

目录结构规范

核心文件 ：assets/js/core/ - 核心功能模块
业务模块 ：assets/js/modules/ - 业务逻辑模块
第三方库 ：assets/js/libs/ - 第三方库文件
图片资源 ：assets/images/ - 按类型分类存放
配置文件 ：config/ - 系统配置文件
编辑模块 ：modules/edit/ - 组件编辑模块
页面组件 ：pages/ - 功能页面组件

技术文档

演示地址：http://1.15.10.177/

睿控（Ricon）组态

📖 项目简介

✨ 主要特性

编辑器功能

监控功能

组件支持

基础组件

图元组件

高级组件

🚀 快速开始

环境要求

安装部署

📁 项目结构

🛠️ 技术栈

核心框架

主要库

通信协议

核心技术

📖 使用指南

编辑器使用

监控页面使用

快捷键

🔧 配置说明

系统基础配置

通信配置

组件配置

初始化配置

数据点绑定

🎨 组件开发

添加新组件

组件属性配置

📡 API接口

场景管理接口

保存场景

加载场景

通信数据格式

WebSocket数据格式

MQTT数据格式

HTTP数据格式

更多接口

🐛 问题排查

常见问题

调试技巧

📝 开发规范

代码规范

文件命名规范

目录结构规范