lhq/FT517-WCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2D监控

Browse Source
This commit is contained in:
猫猫guowen
2025-09-30 15:33:28 +08:00
parent 6b40172345
commit 0f2721f479
20 changed files with 428 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ruoyi-ui/public/monitor/css/style.css
View File

@@ -12,9 +12,9 @@ body {
margin-top: 0;
margin-left: 0;
z-index: -99; /* 确保在最底层 */
height: 500px;
width: 500px;
transform: scale(0.9);
height: 870px;
width: 1700px;
transform: scale(1);
transform-origin: center center;
cursor: default;
}

4
ruoyi-ui/public/monitor/index.html
View File

@@ -12,7 +12,7 @@
<h1 id="pageTitle" style="position: absolute; left: 50%; transform: translateX(-50%); margin: 0; padding: 20px 0;">2D可视化监控系统</h1>
<!-- 报警信息容器 -->
<div id="alarm-container" style="position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); width: 600px; height: 40px; background: linear-gradient(135deg, #999999, #777777); border-radius: 8px; box-shadow: 0 4px 15px rgba(153, 153, 153, 0.3); display: block; z-index: 1000; color: white; font-family: 'Microsoft YaHei', sans-serif; overflow: hidden;margin-bottom: 150px;margin-left: -100px">
<div id="alarm-container" style="position: fixed; left: 50%; transform: translateX(-50%); width: 600px; height: 40px; background: linear-gradient(135deg, #999999, #777777); border-radius: 8px; box-shadow: 0 4px 15px rgba(153, 153, 153, 0.3); display: block; z-index: 1000; color: white; font-family: 'Microsoft YaHei', sans-serif; overflow: hidden;margin-bottom: 80px;margin-left: -60px">
<div style="display: flex; align-items: center; height: 100%; padding: 0 15px;">
<div style="font-size: 14px; font-weight: bold; margin-right: 10px; white-space: nowrap;">
🚨 <span id="alarm-count">0</span>条报警
@@ -35,7 +35,7 @@
<div onclick="closeBox()" style="cursor: pointer; position: absolute; right: 8px; top: 8px; font-size: 18px; color: white; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; background-color: rgba(255, 255, 255, 0.2); z-index: 1000;" onmouseover="this.style.backgroundColor='rgba(255, 255, 255, 0.3)'" onmouseout="this.style.backgroundColor='rgba(255, 255, 255, 0.2)'">×</div>
<div id="device-details" style="font-size: 13px; line-height: 1.5; margin-top: 40px;"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
<script src="/monitor/js/axios.min.js"></script>
<!-- 1. 先引入本地的 request.js（路径完全可控，不会错）-->
<script src="/monitor/js/request.js"></script>
<!-- 2. 再引入你的业务脚本 -->

2
ruoyi-ui/public/monitor/js/axios.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

237
ruoyi-ui/public/monitor/js/index.js
View File

@@ -2,22 +2,39 @@
// 查询堆垛机数据列表
function listDdj() {
request({
url: '/largeScreen/ddj/list',
url: '/dev-api/dynamicMonitoring/list/ddjList',
method: 'get'
}).then(response => {
console.log('接口返回数据：', response);
handleStackerDataSuccess(response)
}).catch(error => {
console.error('堆垛机数据获取失败：', error);
});
}
// $.ajax({
// url: API_URLS.stacker,
// type: 'GET',
// dataType: 'json',
// success: handleStackerDataSuccess,
// error: (xhr, status, error) => console.error('堆垛机数据获取失败:', error)
// });
// 查询输送机数据列表
function listSsj() {
request({
url: '/dev-api/dynamicMonitoring/list/ssjList',
method: 'get'
}).then(response => {
handleConveyorDataSuccess(response)
}).catch(error => {
console.error('输送机数据获取失败:', error)
});
}
// 查询报警信息数据列表
function listAlarm() {
request({
url: '/dev-api/dynamicMonitoring/list/alarmList',
method: 'get'
}).then(response => {
console.log("报警信息：",response)
handleAlarmDataSuccess(response)
}).catch(error => {
handleAlarmDataError(response)
});
}
/**
* 2D可视化监控系统 - 数据同步和状态管理
* 负责配置同步、设备状态更新、实时数据获取等功能
@@ -218,7 +235,7 @@ function startTimers() {
setInterval(updateRgvStatus, 5000);
// 配置同步定时器
setInterval(getConfig, 1000);
// setInterval(getConfig, 1000);
// 启动智能报警更新定时器
startSmartAlarmTimer();
@@ -262,13 +279,7 @@ function updateConveyorStatus() {
return;
}
$.ajax({
url: API_URLS.conveyor,
type: 'GET',
dataType: 'json',
success: handleConveyorDataSuccess,
error: (xhr, status, error) => console.error('输送机数据获取失败:', error)
});
listSsj()
}
/**
@@ -276,7 +287,7 @@ function updateConveyorStatus() {
* @param {Object} response 服务器响应数据
*/
function handleConveyorDataSuccess(response) {
if (!isValidResponse(response) || configEditMode !== 2) {
if (configEditMode !== 2) {
return;
}
@@ -298,14 +309,16 @@ function handleConveyorDataSuccess(response) {
* @param {Object} data 设备数据
*/
function updateConveyorDisplay(conveyor, data) {
// 更新中心方块显示状态
const centerBlock = conveyor.querySelector('.conveyor-center, .roller-conveyor-center');
if (centerBlock) {
centerBlock.style.display = data.dw === '1' ? 'block' : 'none';
}
// 更新设备状态指示（故障闪烁）
const hasError = parseInt(data.sbzt) > 100;
const hasError = parseInt(data.sbzt) > 3;
conveyor.classList.toggle('breathing-border', hasError);
}
@@ -349,9 +362,9 @@ function updateConveyorDisplay(conveyor, data) {
* @param {Object} response 服务器响应数据
*/
function handleStackerDataSuccess(response) {
if (!isValidResponse(response) || configEditMode !== 2) {
console.log(11111,response)
return;
if (response.data.length==0 || configEditMode != 2) {
return;
}
const stackers = document.querySelectorAll('.stacker');
@@ -712,41 +725,35 @@ function getDeviceRealTimeData(deviceType, deviceId) {
if (deviceType === 'stacker') {
// 获取堆垛机实时数据 - 使用配置的URL
$.ajax({
url: API_URLS.stacker,
type: 'GET',
dataType: 'json',
success: function(response) {
if (response && response.data) {
const deviceData = response.data.find(item => item.id === deviceId);
resolve(deviceData || null);
} else {
resolve(null);
}
},
error: function(xhr, status, error) {
console.error('获取堆垛机数据失败:', error);
reject('获取堆垛机数据失败');
}
});
request({
url: '/dev-api/dynamicMonitoring/list/ddjList',
method: 'get'
}).then(response => {
if (response && response.data) {
const deviceData = response.data.find(item => item.id === deviceId);
resolve(deviceData || null);
} else {
resolve(null);
}
}).catch(error => {
console.error('获取堆垛机数据失败:', error);
reject('获取堆垛机数据失败');
});
} else if (deviceType === 'conveyor' || deviceType === 'rollerConveyor') {
// 获取输送机实时数据 - 使用配置的URL
$.ajax({
url: API_URLS.conveyor,
type: 'GET',
dataType: 'json',
success: function(response) {
if (response && response.data) {
const deviceData = response.data.find(item => item.id === deviceId);
resolve(deviceData || null);
} else {
resolve(null);
}
},
error: function(xhr, status, error) {
console.error('获取输送机数据失败:', error);
reject('获取输送机数据失败');
}
request({
url: '/dev-api/dynamicMonitoring/list/ssjList',
method: 'get'
}).then(response => {
if (response && response.data) {
const deviceData = response.data.find(item => item.id === deviceId);
resolve(deviceData || null);
} else {
resolve(null);
}
}).catch(error => {
console.error('获取输送机数据失败:', error);
reject('获取输送机数据失败');
});
} else if (deviceType === 'rgv') {
// 获取RGV实时数据 - 使用配置的URL
@@ -774,6 +781,108 @@ function getDeviceRealTimeData(deviceType, deviceId) {
});
}
function ssjSbzt(a){
if (a==0){
return"未知"
}else if(a==1){
return "手动"
}else if(a==2){
return "自动"
}else if (a==3){
return "运行"
}else if (a==4){
return "输送超时"
}else if(a==5){
return "断路器跳闸"
}else if (a==6){
return "变频器报警"
}else if (a==7){
return "开关任务异常"
}else if (a==8){
return "急停"
}else if (a==9){
return "超界"
}else if(a==10){
return "外型异常"
}else if(a==11){
return "称重异常"
}else if(a==12){
return "扫码异常"
}else {
return a;
}
}
function ddjSbzt(a){
if (a<1000){
return "正常"
}else if(a==1031){
return "急停按下"
}else if (a==1032){
return "货叉不在中位"
}else if (a==1033){
return "运行变频器报警"
}else if (a==1034){
return "升降变频器报警"
}else if (a==1035){
return "货叉变频器报警"
}else if (a==1037){
return "运行限位故障"
}else if(a==1038){
return "升降限位故障"
}else if (a==1039){
return "运行不能纠偏"
}else if (a==1040){
return "升降不能纠偏"
}else if (a==1041){
return "水平测距出错"
}else if (a==1042){
return "垂直BPS出错"
}else if (a==1043){
return "超速保护"
}else if (a==1044){
return "前边超宽"
}else if (a==1045){
return "后边超宽"
}else if (a==1046){
return "左边歪斜"
}else if (a==1047){
return "右边歪斜"
}else if (a==1048){
return "超高1"
}else if (a==1049){
return "超高2"
}else if (a==1050){
return "放货完毕货叉有货"
}else if (a==1051){
return "取货时货叉有货"
}else if (a==1052){
return "放货目标有货"
}else if (a==1053){
return "取货完毕无货"
}else if (a==1054){
return "放货时货叉无货"
}else if (a==1055){
return "货叉动作超时"
}else if (a==1056){
return "货叉不能纠偏"
}else if (a==1057){
return "微升降超时"
}else if (a==1058){
return "松绳过载"
}else if (a==1059){
return "设定超限"
}else if (a==1062){
return "入库输送机任务号不符"
}else if (a==1063){
return "安全门打开"
}else if (a==1064){
return "与安全门通讯中断"
}else {
return a
}
}
/**
* 构建设备信息HTML
* @param {string} deviceType 设备类型
@@ -859,7 +968,7 @@ function buildDeviceInfoHTML(deviceType, deviceId, deviceConfig, realTimeData) {
// 堆垛机字段：基于ddj.json
const statusValue = parseInt(realTimeData.sbzt);
const statusColor = statusValue > 1000 ? '#ff4444' : '#00aa00';
const statusText = statusValue > 1000 ? '报警' : '正常';
const statusText = ddjSbzt(statusValue);
const statusBgColor = statusValue > 1000 ? 'rgba(255,68,68,0.1)' : 'rgba(0,170,0,0.1)';
// 执行阶段文字描述
@@ -933,9 +1042,9 @@ function buildDeviceInfoHTML(deviceType, deviceId, deviceConfig, realTimeData) {
} else if (deviceType === 'conveyor' || deviceType === 'rollerConveyor') {
// 输送机字段：基于Lssj.json
const statusValue = parseInt(realTimeData.sbzt);
const statusColor = statusValue > 100 ? '#ff4444' : '#00aa00';
const statusText = statusValue > 100 ? '故障' : '正常';
const statusBgColor = statusValue > 100 ? 'rgba(255,68,68,0.1)' : 'rgba(0,170,0,0.1)';
const statusColor = statusValue > 3 ? '#ff4444' : '#00aa00';
const statusText = ssjSbzt(statusValue)
const statusBgColor = statusValue > 3 ? 'rgba(255,68,68,0.1)' : 'rgba(0,170,0,0.1)';
const hasCargoText = realTimeData.dw === '1' ? '有货物' : '无货物';
const kxText = realTimeData.kx === '1' ? '空闲' : '不空闲';
const cargoColor = realTimeData.dw === '1' ? '#FF9800' : '#9E9E9E';
@@ -1336,13 +1445,7 @@ function updateAlarmStatus() {
return;
}
$.ajax({
url: API_URLS.alarm,
type: 'GET',
dataType: 'json',
success: handleAlarmDataSuccess,
error: handleAlarmDataError
});
listAlarm()
}
/**
@@ -1574,7 +1677,7 @@ function applyContainerStyle(container, style) {
function buildAlarmText(alarms) {
const alarmTexts = alarms.map(alarm => {
const errorCode = alarm.code || alarm.type || '未知';
return `【${alarm.id}${alarm.name}】错误代码: ${errorCode}，报警信息：${alarm.content}`;
return `【${alarm.id}${alarm.name}】错误代码: ${errorCode}，报警信息：${ddjSbzt(errorCode)}`;
});
return alarmTexts.join(ALARM_CONFIG.TEXT.SEPARATOR);
}

52
ruoyi-ui/public/monitor/js/main.js
View File

@@ -1308,30 +1308,30 @@ $(document).ready(function () {
// **********************定期检查配置文件更新**********************
setInterval(function () {
$.ajax({
url: 'json/config.json',
type: 'GET',
dataType: 'json',
cache: false, // 禁用缓存，确保每次都获取最新的配置
success: function (data) {
// 如果配置有变化，更新显示（不论editMode状态）
if (JSON.stringify(data) !== JSON.stringify(config)) {
config = data;
// 确保deviceDraggable默认为false
if (typeof config.deviceDraggable === 'undefined') {
config.deviceDraggable = false;
}
// 更新全局config引用
window.config = config;
createBoxes();
// 更新设备拖动状态
updateDevicesDraggableState();
}
},
error: function (xhr, status, error) {
console.error('检查配置更新失败:', error);
}
});
}, 1000); // 每秒检查一次
// setInterval(function () {
// $.ajax({
// url: 'json/config.json',
// type: 'GET',
// dataType: 'json',
// cache: false, // 禁用缓存，确保每次都获取最新的配置
// success: function (data) {
// // 如果配置有变化，更新显示（不论editMode状态）
// if (JSON.stringify(data) !== JSON.stringify(config)) {
// config = data;
// // 确保deviceDraggable默认为false
// if (typeof config.deviceDraggable === 'undefined') {
// config.deviceDraggable = false;
// }
// // 更新全局config引用
// window.config = config;
// createBoxes();
// // 更新设备拖动状态
// updateDevicesDraggableState();
// }
// },
// error: function (xhr, status, error) {
// console.error('检查配置更新失败:', error);
// }
// });
// }, 1000); // 每秒检查一次
});

2
ruoyi-ui/public/monitor/js/request.js
View File

@@ -4,7 +4,7 @@ const axios = window.axios;
// 2. 基础配置（无 export 语句）
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
const service = axios.create({
baseURL: '/', // 匹配若依代理，无需改
baseURL: '', // 不使用baseURL前缀，直接使用完整路径
timeout: 10000
});

4
ruoyi-ui/public/monitor/json/config.json
View File

@@ -264,7 +264,7 @@
"labels": [
{
"id": "bq",
"content": "一 层",
"content": "二 层",
"fontSize": 24,
"fontColor": "#000000",
"bgColor": "#ffffff",
@@ -274,7 +274,7 @@
},
{
"id": "bq2",
"content": "二 层",
"content": "一 层",
"fontSize": 24,
"fontColor": "#000000",
"bgColor": "#ffffff",