目录
1. 接口基础
1.1 基础URL配置
javascript
// config/apiClient.js
var SystemConfig = {
// HTTP服务地址
serviceIpPort: window.UnifiedConfig ? window.UnifiedConfig.get('httpClient.serviceIpPort') : "http://localhost:80/dev-api",
// 接口路径前缀
apiPrefix: window.UnifiedConfig ? window.UnifiedConfig.get('httpClient.apiPrefix') : "/api",
// 接口超时时间(毫秒)
timeout: window.UnifiedConfig ? window.UnifiedConfig.get('httpClient.defaultTimeout') : 30000
};
1.2 认证方式
Bearer Token认证:
http
Authorization: Bearer {token}
Content-Type: application/json
URL参数传递:
ini
?stageId=场景ID&userId=用户ID&token=认证令牌
1.3 响应格式
成功响应:
javascript
{
"code": 200, // 状态码
"msg": "操作成功", // 提示信息
"data": {} // 返回数据
}
错误响应:
javascript
{
"code": 401, // 错误码
"msg": "认证失败", // 错误信息
"data": null // 无数据
}
1.4 请求方法
| 方法 | 描述 | 示例 |
|---|---|---|
| GET | 获取资源 | /api/stageList |
| POST | 创建资源 | /api/saveStage |
| PUT | 更新资源 | /api/updateStage |
| DELETE | 删除资源 | /api/deleteStage |
2. 场景管理API
2.1 保存场景
接口地址: POST /api/saveStage
功能: 保存或更新场景数据
请求参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| stageId | string | 否 | 场景ID(修改时必传) |
| stageName | string | 是 | 场景名称 |
| stageDatajson | string | 是 | 场景JSON数据 |
| dataKeyArray | string | 是 | 绑定的数据点数组 |
| stageBase64 | string | 是 | 场景缩略图(Base64) |
| remarks | string | 否 | 备注信息 |
请求示例:
javascript
// JavaScript示例
async function saveStage(stageData, stageId) {
const response = await fetch('/api/saveStage', {
method: 'POST',
headers: {
'Authorization': `Bearer ${getAuthToken()}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
stageId: stageId,
stageName: stageData.name,
stageDatajson: JSON.stringify(stageData),
dataKeyArray: getDataKeyArray(stageData),
stageBase64: await generateStageThumbnail(),
remarks: "场景描述信息"
})
});
return await response.json();
}
// cURL示例
curl -X POST "http://your-server/api/saveStage" \
-H "Authorization: Bearer your-token" \
-H "Content-Type: application/json" \
-d '{
"stageId": "stage_001",
"stageName": "智慧园区监控",
"stageDatajson": "{...}",
"dataKeyArray": "d1a001,d2a001,d3a001",
"stageBase64": "data:image/png;base64,...",
"remarks": "园区主入口监控界面"
}'
响应示例:
javascript
{
"code": 200,
"msg": "操作成功",
"data": {
"stageId": "stage_001",
"updateTime": "2026-04-15 10:00:00"
}
}
2.2 加载场景数据
接口地址: GET /api/selectStageById
功能: 根据场景ID加载场景数据
请求参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| stageId | string | 是 | 场景ID |
请求示例:
javascript
// JavaScript示例
async function loadStage(stageId) {
const response = await fetch(`/api/selectStageById?stageId=${stageId}`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${getAuthToken()}`
}
});
return await response.json();
}
// cURL示例
curl -X GET "http://your-server/api/selectStageById?stageId=stage_001" \
-H "Authorization: Bearer your-token"
响应示例:
javascript
{
"code": 200,
"msg": "操作成功",
"data": {
"stageId": "stage_001",
"stageName": "智慧园区监控",
"stageDatajson": "{...}",
"dataKeyArray": "d1a001,d2a001,d3a001",
"createTime": "2026-04-15 09:00:00",
"updateTime": "2026-04-15 10:00:00"
}
}
2.3 场景列表查询
接口地址: GET /api/stageList
功能: 获取场景列表
请求参数: 无
请求示例:
javascript
// JavaScript示例
async function getStageList() {
const response = await fetch('/api/stageList', {
method: 'GET',
headers: {
'Authorization': `Bearer ${getAuthToken()}`
}
});
return await response.json();
}
// cURL示例
curl -X GET "http://your-server/api/stageList" \
-H "Authorization: Bearer your-token"
响应示例:
javascript
{
"code": 0,
"msg": "查询成功",
"rows": [
{
"stageId": "stage_001",
"stageName": "智慧园区监控",
"createTime": "2026-04-15 09:00:00"
},
{
"stageId": "stage_002",
"stageName": "工厂生产线监控",
"createTime": "2026-04-14 14:00:00"
}
],
"total": 10
}
2.4 删除场景
接口地址: POST /api/deleteStage
功能: 删除场景
请求参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| stageId | string | 是 | 场景ID |
请求示例:
javascript
// JavaScript示例
async function deleteStage(stageId) {
const response = await fetch('/api/deleteStage', {
method: 'POST',
headers: {
'Authorization': `Bearer ${getAuthToken()}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ stageId: stageId })
});
return await response.json();
}
// cURL示例
curl -X POST "http://your-server/api/deleteStage" \
-H "Authorization: Bearer your-token" \
-H "Content-Type: application/json" \
-d '{"stageId": "stage_001"}'
响应示例:
javascript
{
"code": 200,
"msg": "删除成功",
"data": 1
}
3. 实时数据接口
3.1 WebSocket实时数据
连接地址: ws://host:port/ws
数据格式:
javascript
{
"MESSAGETYPE": "01", // 消息类型:01=数据更新
"MESSAGECONTENT": { // 数据内容
"d1a001": 25.5, // 数据点键值对
"d2a001": 100,
"d3a001": "运行"
},
"STAGEID": "场景ID", // 关联的场景ID
"TS": 1699123456789 // 时间戳
}
连接配置:
javascript
// WebSocket连接示例
function connectWebSocket() {
const ws = new WebSocket('ws://localhost:8080/ws');
ws.onopen = function(event) {
console.log('WebSocket连接已建立');
// 发送认证信息
ws.send(JSON.stringify({
type: 'auth',
token: getAuthToken()
}));
};
ws.onmessage = function(event) {
try {
const data = JSON.parse(event.data);
if (data.MESSAGETYPE === '01') {
// 更新场景数据
updateStageData(data.MESSAGECONTENT);
} else if (data.MESSAGETYPE === '04') {
// 命令响应
handleCommandResponse(data);
}
} catch (error) {
console.error('WebSocket消息解析失败:', error);
}
};
ws.onerror = function(error) {
console.error('WebSocket错误:', error);
};
ws.onclose = function(event) {
console.log('WebSocket连接已关闭,尝试重连...');
// 重连机制
setTimeout(connectWebSocket, 3000);
};
return ws;
}
3.2 HTTP轮询接口
接口地址: GET /api/stageData
功能: 通过HTTP获取场景实时数据
请求参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| stageId | string | 是 | 场景ID |
| userId | string | 否 | 用户ID |
请求示例:
javascript
// JavaScript示例
async function getStageData(stageId) {
const response = await fetch(`/api/stageData?stageId=${stageId}`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${getAuthToken()}`
}
});
return await response.json();
}
// 轮询示例
function startPolling(stageId, interval = 5000) {
setInterval(async () => {
try {
const data = await getStageData(stageId);
if (data.MESSAGETYPE === '01') {
updateStageData(data.MESSAGECONTENT);
}
} catch (error) {
console.error('轮询失败:', error);
}
}, interval);
}
// cURL示例
curl -X GET "http://your-server/api/stageData?stageId=stage_001" \
-H "Authorization: Bearer your-token"
响应格式:
javascript
{
"MESSAGETYPE": "01",
"MESSAGECONTENT": {
"d1a001": 25.5,
"d2a001": 100
},
"STAGEID": "场景ID",
"TS": 1699123456789
}
4. 命令控制接口
4.1 发送控制命令
接口地址: POST /api/stageCommand
功能: 向设备发送控制命令
请求参数:
javascript
{
"stageId": "场景ID",
"cmd": "OPEN", // 命令类型
"key": "d1a001", // 控制的数据点
"value": 1 // 控制值
}
支持的命令类型:
OPEN- 打开CLOSE- 关闭START- 启动STOP- 停止RESET- 重置WRITE- 写入值
请求示例:
javascript
// JavaScript示例
async function sendCommand(stageId, key, value, cmd = 'WRITE') {
const response = await fetch('/api/stageCommand', {
method: 'POST',
headers: {
'Authorization': `Bearer ${getAuthToken()}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
stageId: stageId,
cmd: cmd,
key: key,
value: value
})
});
return await response.json();
}
// cURL示例
curl -X POST "http://your-server/api/stageCommand" \
-H "Authorization: Bearer your-token" \
-H "Content-Type: application/json" \
-d '{
"stageId": "stage_001",
"cmd": "OPEN",
"key": "d1a001",
"value": 1
}'
响应示例:
javascript
{
"MESSAGETYPE": "04", // 消息类型:04=命令响应
"MESSAGECONTENT": "命令已接收", // 响应内容
"STAGEID": "场景ID",
"TS": 1699123456789
}
5. 模板管理API
5.1 保存场景模板
接口地址: POST /api/saveStageModule
功能: 将场景保存为模板
请求参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| stageDatajson | string | 是 | 场景JSON数据 |
| stageModule_id | string | 否 | 模板ID(修改时必传) |
| stageBase64 | string | 是 | 场景缩略图(Base64) |
| stageModuleName | string | 是 | 模板名称 |
请求示例:
javascript
// JavaScript示例
async function saveTemplate(stageData, templateId, templateName) {
const response = await fetch('/api/saveStageModule', {
method: 'POST',
headers: {
'Authorization': `Bearer ${getAuthToken()}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
stageModule_id: templateId,
stageModuleName: templateName,
stageDatajson: JSON.stringify(stageData),
stageBase64: await generateStageThumbnail()
})
});
return await response.json();
}
// cURL示例
curl -X POST "http://your-server/api/saveStageModule" \
-H "Authorization: Bearer your-token" \
-H "Content-Type: application/json" \
-d '{
"stageModule_id": "template_001",
"stageModuleName": "工业监控模板",
"stageDatajson": "{...}",
"stageBase64": "data:image/png;base64,..."
}'
响应示例:
javascript
{
"code": 200,
"msg": "模板保存成功",
"data": {
"templateId": "template_001",
"templateName": "工业监控模板"
}
}
5.2 获取模板列表
接口地址: GET /api/getMyStageModuleList
功能: 获取当前用户的场景模板列表
请求参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| userId | string | 是 | 用户ID |
请求示例:
javascript
// JavaScript示例
async function getTemplateList(userId) {
const response = await fetch(`/api/getMyStageModuleList?userId=${userId}`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${getAuthToken()}`
}
});
return await response.json();
}
// cURL示例
curl -X GET "http://your-server/api/getMyStageModuleList?userId=user001" \
-H "Authorization: Bearer your-token"
响应示例:
javascript
{
"code": 200,
"msg": "查询成功",
"data": [
{
"stageModule_id": "template_001",
"stageModuleName": "工业监控模板",
"stageBase64": "data:image/png;base64,...",
"createTime": "2026-04-15 10:00:00"
},
{
"stageModule_id": "template_002",
"stageModuleName": "楼宇监控模板",
"stageBase64": "data:image/png;base64,...",
"createTime": "2026-04-14 14:00:00"
}
]
}
5.3 删除模板
接口地址: POST /api/deleteStageModule
请求参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| moduleStageId | string | 是 | 模板ID |
请求示例:
javascript
// JavaScript示例
async function deleteTemplate(templateId) {
const response = await fetch('/api/deleteStageModule', {
method: 'POST',
headers: {
'Authorization': `Bearer ${getAuthToken()}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ moduleStageId: templateId })
});
return await response.json();
}
// cURL示例
curl -X POST "http://your-server/api/deleteStageModule" \
-H "Authorization: Bearer your-token" \
-H "Content-Type: application/json" \
-d '{"moduleStageId": "template_001"}'
响应示例:
javascript
{
"code": 200,
"msg": "删除成功",
"data": 1
}
6. 硬件数据接口
6.1 获取硬件数据树
接口地址: GET /api/device/hardware-data
功能: 获取硬件设备的树形结构数据
请求参数: 无
请求示例:
javascript
// JavaScript示例
async function getHardwareData() {
const response = await fetch('/api/device/hardware-data', {
method: 'GET',
headers: {
'Authorization': `Bearer ${getAuthToken()}`
}
});
return await response.json();
}
// cURL示例
curl -X GET "http://your-server/api/device/hardware-data" \
-H "Authorization: Bearer your-token"
响应示例:
javascript
{
"code": 200,
"msg": "查询成功",
"data": [
{
"id": "device001",
"name": "新智慧园区",
"children": [
{
"id": "device001a",
"name": "园区大门",
"children": [
{
"id": "d1a001",
"name": "车辆计数器",
"type": "counter"
},
{
"id": "d1a002",
"name": "温度传感器",
"type": "sensor"
}
]
}
]
},
{
"id": "device002",
"name": "智能家居",
"children": [
{
"id": "device002a",
"name": "客厅",
"children": [
{
"id": "d2a001",
"name": "温度",
"type": "sensor"
},
{
"id": "d2a002",
"name": "湿度",
"type": "sensor"
}
]
}
]
}
]
}
6.2 获取设备数据点
接口地址: GET /api/device/points
功能: 获取设备的数据点列表
请求参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| deviceId | string | 是 | 设备ID |
请求示例:
javascript
// JavaScript示例
async function getDevicePoints(deviceId) {
const response = await fetch(`/api/device/points?deviceId=${deviceId}`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${getAuthToken()}`
}
});
return await response.json();
}
// cURL示例
curl -X GET "http://your-server/api/device/points?deviceId=device001a" \
-H "Authorization: Bearer your-token"
响应示例:
javascript
{
"code": 200,
"msg": "查询成功",
"data": [
{
"id": "d1a001",
"name": "车辆计数器",
"type": "counter",
"unit": "辆",
"min": 0,
"max": 9999
},
{
"id": "d1a002",
"name": "温度传感器",
"type": "sensor",
"unit": "℃",
"min": -40,
"max": 100
}
]
}
7. 认证接口
7.1 认证方式
Bearer Token认证:
- 请求头方式:
Authorization: Bearer {token} - URL参数方式:
?token=your_token&userId=user001
Token格式:
- JWT格式令牌
- 建议HTTPS传输确保安全性
- Token有效期通常为24小时
7.2 登录接口
接口地址: POST /api/login
功能: 用户登录获取Token
请求参数:
javascript
{
"username": "admin",
"password": "123456"
}
请求示例:
javascript
// JavaScript示例
async function login(username, password) {
const response = await fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, password })
});
return await response.json();
}
// cURL示例
curl -X POST "http://your-server/api/login" \
-H "Content-Type: application/json" \
-d '{
"username": "admin",
"password": "123456"
}'
响应示例:
javascript
{
"code": 200,
"msg": "登录成功",
"data": {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"userId": "user001",
"username": "admin",
"expires": 86400
}
}
7.3 登出接口
接口地址: POST /api/logout
功能: 用户登出
请求参数: 无
请求示例:
javascript
// JavaScript示例
async function logout() {
const response = await fetch('/api/logout', {
method: 'POST',
headers: {
'Authorization': `Bearer ${getAuthToken()}`
}
});
return await response.json();
}
// cURL示例
curl -X POST "http://your-server/api/logout" \
-H "Authorization: Bearer your-token"
响应示例:
javascript
{
"code": 200,
"msg": "登出成功",
"data": null
}
8. 错误码说明
| 错误码 | 说明 | 处理方式 |
|---|---|---|
| 200 | 操作成功 | 正常处理返回数据 |
| 0 | 查询成功 | 正常处理返回数据 |
| 400 | 请求参数错误 | 检查请求参数格式和必填项 |
| 401 | 认证失败 | 检查Token有效性和用户权限 |
| 403 | 权限不足 | 确认用户角色和操作权限 |
| 404 | 资源不存在 | 检查资源ID是否正确 |
| 500 | 服务器内部错误 | 联系系统管理员 |
| 502 | 网关错误 | 检查后端服务状态 |
| 503 | 服务不可用 | 稍后重试或联系管理员 |
错误响应示例:
javascript
{
"code": 401,
"msg": "认证失败,请重新登录",
"data": null
}
8.1 错误处理最佳实践
javascript
// 统一错误处理函数
async function handleApiRequest(url, options = {}) {
try {
// 添加认证头
const headers = {
'Content-Type': 'application/json',
...options.headers
};
if (getAuthToken()) {
headers['Authorization'] = `Bearer ${getAuthToken()}`;
}
const response = await fetch(url, {
...options,
headers
});
const data = await response.json();
if (data.code === 200 || data.code === 0) {
return data;
} else if (data.code === 401) {
// 认证失败,跳转到登录页
handleAuthError();
throw new Error('认证失败');
} else {
// 其他错误
throw new Error(data.msg || '请求失败');
}
} catch (error) {
console.error('API请求失败:', error);
// 显示错误提示
showError(error.message);
throw error;
}
}
// 使用示例
async function saveStageExample(stageData) {
try {
const result = await handleApiRequest('/api/saveStage', {
method: 'POST',
body: JSON.stringify(stageData)
});
console.log('保存成功:', result);
return result;
} catch (error) {
console.error('保存失败:', error);
// 处理错误
}
}
9. API测试工具
9.1 Postman测试
步骤:
- 打开Postman
- 创建新的请求
- 设置请求方法和URL
- 添加认证头:
Authorization: Bearer your-token - 设置请求体(POST请求)
- 发送请求并查看响应
Postman集合导入: 可以导入以下Postman集合文件进行测试:
json
{
"info": {
"name": "Ricon组态系统API",
"description": "Ricon组态系统API测试集合",
"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
},
"item": [
{
"name": "场景管理",
"item": [
{
"name": "保存场景",
"request": {
"method": "POST",
"header": [
{ "key": "Authorization", "value": "Bearer {{token}}" },
{ "key": "Content-Type", "value": "application/json" }
],
"body": {
"mode": "raw",
"raw": "{\n \"stageName\": \"测试场景\",\n \"stageDatajson\": \"{...}\",\n \"dataKeyArray\": \"d1a001,d2a001\",\n \"stageBase64\": \"data:image/png;base64,...\"\n}"
},
"url": "{{baseUrl}}/api/saveStage"
}
},
{
"name": "获取场景列表",
"request": {
"method": "GET",
"header": [
{ "key": "Authorization", "value": "Bearer {{token}}" }
],
"url": "{{baseUrl}}/api/stageList"
}
}
]
}
],
"variable": [
{ "key": "baseUrl", "value": "http://localhost:8080" },
{ "key": "token", "value": "your-token-here" }
]
}
9.2 命令行测试
使用cURL测试:
bash
# 登录获取Token
curl -X POST "http://your-server/api/login" \
-H "Content-Type: application/json" \
-d '{"username": "admin", "password": "123456"}'
# 测试场景列表接口
curl -X GET "http://your-server/api/stageList" \
-H "Authorization: Bearer your-token"
使用HTTPie测试:
bash
# 安装HTTPie
pip install httpie
# 登录获取Token
http POST http://your-server/api/login username=admin password=123456
# 测试场景列表接口
http GET http://your-server/api/stageList Authorization:"Bearer your-token"
10. 性能优化
10.1 API性能优化
- 批量操作: 对于大量数据的操作,建议使用批量接口
- 缓存策略: 合理使用浏览器缓存减少重复请求
- 连接复用: WebSocket连接建立后保持长连接
- 数据压缩: 大场景数据建议启用Gzip压缩
- 错误重试: 实现指数退避算法进行错误重试
- 请求合并: 将多个小请求合并为一个大请求
- 分页查询: 对于大量数据的查询,使用分页机制
- 缓存控制: 合理设置HTTP缓存头
10.2 客户端优化
- 数据缓存: 客户端缓存常用数据,减少API调用
- 防抖节流: 对频繁的API调用进行防抖或节流处理
- 预加载: 预加载即将使用的数据
- 延迟加载: 延迟加载非关键数据
- 错误处理: 实现完善的错误处理和重试机制
- 批量更新: 批量处理数据更新,减少DOM操作
10.3 服务端优化
- 数据库优化: 合理设计数据库索引,优化查询语句
- 缓存机制: 服务端缓存热点数据
- 负载均衡: 多服务器负载均衡
- 异步处理: 异步处理耗时操作
- 连接池: 使用数据库连接池
- 请求队列: 合理处理并发请求
附录
接口调用示例
JavaScript调用示例:
javascript
// 保存场景
async function saveStage(stageData, stageId) {
const response = await fetch('/api/saveStage', {
method: 'POST',
headers: {
'Authorization': `Bearer ${getAuthToken()}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
stageId: stageId,
stageName: stageData.name,
stageDatajson: JSON.stringify(stageData),
dataKeyArray: getDataKeyArray(stageData),
stageBase64: await generateStageThumbnail(),
remarks: "场景描述信息"
})
});
return await response.json();
}
// 加载场景
async function loadStage(stageId) {
const response = await fetch(`/api/selectStageById?stageId=${stageId}`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${getAuthToken()}`
}
});
return await response.json();
}
// WebSocket连接
function connectWebSocket() {
const ws = new WebSocket('ws://localhost:8080/ws');
ws.onopen = function(event) {
console.log('WebSocket连接已建立');
};
ws.onmessage = function(event) {
const data = JSON.parse(event.data);
if (data.MESSAGETYPE === '01') {
updateStageData(data.MESSAGECONTENT);
}
};
ws.onclose = function(event) {
console.log('WebSocket连接已关闭,尝试重连...');
setTimeout(connectWebSocket, 3000);
};
return ws;
}
Python调用示例:
python
import requests
import json
# 登录获取Token
def login(username, password):
url = 'http://your-server/api/login'
data = {'username': username, 'password': password}
response = requests.post(url, json=data)
return response.json()
# 保存场景
def save_stage(token, stage_data, stage_id=None):
url = 'http://your-server/api/saveStage'
headers = {
'Authorization': f'Bearer {token}',
'Content-Type': 'application/json'
}
data = {
'stageId': stage_id,
'stageName': stage_data['name'],
'stageDatajson': json.dumps(stage_data),
'dataKeyArray': ','.join(stage_data['dataKeys']),
'stageBase64': stage_data['thumbnail'],
'remarks': stage_data.get('remarks', '')
}
response = requests.post(url, headers=headers, json=data)
return response.json()
# 获取场景列表
def get_stage_list(token):
url = 'http://your-server/api/stageList'
headers = {
'Authorization': f'Bearer {token}'
}
response = requests.get(url, headers=headers)
return response.json()
``
## 技术文档
👉 演示地址:[http://www.ricon.cloud:81](http://www.ricon.cloud:81)
👉 官网地址:[http://www.ricon.cloud](http://www.ricon.cloud)
**Ricon组态系统API参考手册 - 让API集成更简单!** 🚀