zangch
/
JDAirPort.Ems.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(首页和/layout/components/Navbar): 建立 WebSocket 连接并处理实时数据。更新系统名称

Browse Source 
- 新增 WebSocket 连接逻辑，实现与服务器的实时通信
- 添加设备数据和告警信息的实时处理功能
- 优化用户界面，展示实时更新的数据
- 调整环境变量和登录界面文本
- 移除不必要的统计刷新操作
boardTest
zch 4 weeks ago
parent 7d1a334b02
commit d070e2c417
13 changed files with 874 additions and 87 deletions
Show Stats Download Patch File Download Diff File

4
.env.development
Unescape Escape View File

@ -1,10 +1,10 @@
# 页面标题
VUE_APP_TITLE = 机场行李系统设备健康监测系统
VUE_APP_TITLE = 行李健康监测系统
# 开发环境配置
ENV = 'development'
# 机场行李系统设备健康监测系统/开发环境
# 行李健康监测系统/开发环境
VUE_APP_BASE_API = '/dev-api'
# 路由懒加载

4
.env.production
Unescape Escape View File

@ -1,8 +1,8 @@
# 页面标题
VUE_APP_TITLE = 机场行李系统设备健康监测系统
VUE_APP_TITLE = 行李健康监测系统
# 生产环境配置
ENV = 'production'
# 机场行李系统设备健康监测系统/生产环境
# 行李健康监测系统/生产环境
VUE_APP_BASE_API = '/prod-api'

4
.env.staging
Unescape Escape View File

@ -1,10 +1,10 @@
# 页面标题
VUE_APP_TITLE = 机场行李系统设备健康监测系统
VUE_APP_TITLE = 行李健康监测系统
NODE_ENV = production
# 测试环境配置
ENV = 'staging'
# 机场行李系统设备健康监测系统/测试环境
# 行李健康监测系统/测试环境
VUE_APP_BASE_API = '/stage-api'

2
package.json
Unescape Escape View File

@ -1,7 +1,7 @@
{
"name": "ruoyi",
"version": "3.8.7",
"description": "机场行李系统设备健康监测系统",
"description": "行李健康监测系统",
"author": "机场行李",
"license": "MIT",
"scripts": {

11
src/api/ems/record/recordAlarmData.js
Unescape Escape View File

@ -58,3 +58,14 @@ export function getAlarmDataTotalCount() {
method: 'get',
})
}
// 保存WebSocket告警数据（批量保存）
// 参数alarmDataList应为EmsRecordAlarmData实体数组
// 每个告警规则对应一条EmsRecordAlarmData记录
export function saveWebSocketAlarmData(alarmDataList) {
return request({
url: '/ems/record/recordAlarmData/saveWebSocketAlarmData',
method: 'post',
data: alarmDataList // 传递EmsRecordAlarmData实体数组
})
}

501
src/layout/components/Navbar.vue
Unescape Escape View File

@ -192,6 +192,158 @@
</div>
</el-dialog>
<!-- 实时告警弹窗 -->
<el-dialog
title="⚠️ 实时告警通知"
:visible.sync="realtimeAlarmDialog"
width="800px"
append-to-body
:close-on-click-modal="false"
:close-on-press-escape="false"
class="realtime-alarm-dialog"
>
<div v-if="currentRealtimeAlarm" class="alarm-content">
<!-- 设备信息 -->
<div class="alarm-section">
<h3 class="section-title">📟 设备信息</h3>
<el-row :gutter="16">
<el-col :span="12">
<div class="info-item">
<span class="label">设备ID：</span>
<span class="value">{{ currentRealtimeAlarm.monitorId }}</span>
</div>
</el-col>
<el-col :span="12">
<div class="info-item">
<span class="label">告警时间：</span>
<span class="value">{{ formatAlarmTime(currentRealtimeAlarm.recordTime) }}</span>
</div>
</el-col>
</el-row>
</div>
<!-- 设备当前数据 -->
<div class="alarm-section" v-if="currentRealtimeAlarm.deviceParam">
<h3 class="section-title">📊 设备当前数据</h3>
<el-row :gutter="16">
<el-col :span="8" v-if="currentRealtimeAlarm.deviceParam.temperature !== null">
<div class="data-item">
<span class="data-label">温度：</span>
<span class="data-value">{{ currentRealtimeAlarm.deviceParam.temperature }}°C</span>
</div>
</el-col>
<el-col :span="8" v-if="currentRealtimeAlarm.deviceParam.humidity !== null">
<div class="data-item">
<span class="data-label">湿度：</span>
<span class="data-value">{{ currentRealtimeAlarm.deviceParam.humidity }}%</span>
</div>
</el-col>
<el-col :span="8" v-if="currentRealtimeAlarm.deviceParam.illuminance !== null">
<div class="data-item">
<span class="data-label">照度：</span>
<span class="data-value">{{ currentRealtimeAlarm.deviceParam.illuminance }}lx</span>
</div>
</el-col>
<el-col :span="8" v-if="currentRealtimeAlarm.deviceParam.noise !== null">
<div class="data-item">
<span class="data-label">噪声：</span>
<span class="data-value">{{ currentRealtimeAlarm.deviceParam.noise }}dB</span>
</div>
</el-col>
<el-col :span="8" v-if="currentRealtimeAlarm.deviceParam.concentration !== null">
<div class="data-item">
<span class="data-label">气体浓度：</span>
<span class="data-value">{{ currentRealtimeAlarm.deviceParam.concentration }}ppm</span>
</div>
</el-col>
<el-col :span="8" v-if="currentRealtimeAlarm.deviceParam.vibrationSpeed !== null">
<div class="data-item">
<span class="data-label">振动速度：</span>
<span class="data-value">{{ currentRealtimeAlarm.deviceParam.vibrationSpeed || currentRealtimeAlarm.deviceParam.VibrationSpeed }}mm/s</span>
</div>
</el-col>
<el-col :span="8" v-if="currentRealtimeAlarm.deviceParam.vibrationDisplacement !== null || currentRealtimeAlarm.deviceParam.VibrationDisplacement !== null">
<div class="data-item">
<span class="data-label">振动位移：</span>
<span class="data-value">{{ currentRealtimeAlarm.deviceParam.vibrationDisplacement || currentRealtimeAlarm.deviceParam.VibrationDisplacement }}um</span>
</div>
</el-col>
<el-col :span="8" v-if="currentRealtimeAlarm.deviceParam.vibrationAcceleration !== null || currentRealtimeAlarm.deviceParam.VibrationAcceleration !== null">
<div class="data-item">
<span class="data-label">振动加速度：</span>
<span class="data-value">{{ currentRealtimeAlarm.deviceParam.vibrationAcceleration || currentRealtimeAlarm.deviceParam.VibrationAcceleration }}g</span>
</div>
</el-col>
<el-col :span="8" v-if="currentRealtimeAlarm.deviceParam.vibrationTemp !== null || currentRealtimeAlarm.deviceParam.VibrationTemp !== null">
<div class="data-item">
<span class="data-label">振动温度：</span>
<span class="data-value">{{ currentRealtimeAlarm.deviceParam.vibrationTemp || currentRealtimeAlarm.deviceParam.VibrationTemp }}℃</span>
</div>
</el-col>
</el-row>
</div>
<!-- 触发的告警规则 -->
<div class="alarm-section" v-if="currentRealtimeAlarm.alarmRules && currentRealtimeAlarm.alarmRules.length > 0">
<h3 class="section-title">🚨 触发的告警规则</h3>
<div class="alarm-rules">
<div
v-for="(rule, index) in currentRealtimeAlarm.alarmRules"
:key="index"
class="rule-item"
>
<div class="rule-header">
<span class="rule-name">{{ rule.ruleName }}</span>
<el-tag :type="rule.triggerRule === 0 ? 'danger' : 'warning'" size="small">
{{ rule.triggerRule === 0 ? '大于阈值' : '小于阈值' }}
</el-tag>
</div>
<div class="rule-details">
<span class="detail-item">阈值：{{ rule.triggerValue }}</span>
<span class="detail-item">监测字段：{{ getFieldName(rule.monitorField) }}</span>
<span class="detail-item" v-if="rule.cause">备注：{{ rule.cause }}</span>
</div>
</div>
</div>
</div>
<!-- 告警内容详情 -->
<div class="alarm-section" v-if="currentRealtimeAlarm.alarmContents && currentRealtimeAlarm.alarmContents.length > 0">
<h3 class="section-title">📋 告警内容详情</h3>
<div class="alarm-contents">
<div
v-for="(content, index) in currentRealtimeAlarm.alarmContents"
:key="index"
class="content-item"
>
<el-alert
:title="content"
type="error"
:closable="false"
show-icon
/>
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button
@click="closeRealtimeAlarmDialog"
:loading="alarmProcessing"
>
稍后处理
</el-button>
<el-button
type="primary"
@click="processRealtimeAlarm"
:loading="alarmProcessing"
>
确认知晓
</el-button>
</div>
</el-dialog>
</div>
</template>
@ -208,6 +360,7 @@ import RuoYiDoc from '@/components/RuoYi/Doc'
import settings from '@/settings'
import { handleExceptions, listRecordAlarmData } from '@/api/ems/record/recordAlarmData'
import { getEmsAlarmActionStepsByRuleId, getEmsAlarmActionStepsByAlarmInfo } from '@/api/ems/base/emsAlarmActionStep'
import { saveWebSocketAlarmData } from '@/api/ems/record/recordAlarmData'
export default {
dicts: ['alarm_type', 'alarm_status'],
@ -239,16 +392,27 @@ export default {
actionStepsLoading: false,
activeTab: 'alarmList',
imagePreviewVisible: false,
previewImageUrl: ''
previewImageUrl: '',
// WebSocket告警相关
realtimeAlarmDialog: false,
currentRealtimeAlarm: null,
alarmProcessing: false
}
},
created() {
localStorage.setItem('this.alarmDataTotal', 0)
// 监听WebSocket告警事件
this.$bus.$on('websocket-alarm', this.handleRealtimeAlarm)
},
beforeDestroy() {
// 移除事件监听
this.$bus.$off('websocket-alarm', this.handleRealtimeAlarm)
},
mounted() {
// 定时获取提示路由信息
// 初始获取告警数据，后续完全依赖WebSocket推送
this.getAlarmData()
setInterval(() => this.getAlarmData(), 1000 * 60);
},
components: {
Breadcrumb,
@ -393,6 +557,215 @@ export default {
// 动态拼接当前环境的baseURL
const baseURL = process.env.VUE_APP_BASE_API || '';
return baseURL + relativePath;
},
// 处理WebSocket实时告警
handleRealtimeAlarm(alarmData) {
console.log('收到实时告警:', alarmData)
this.currentRealtimeAlarm = alarmData
this.realtimeAlarmDialog = true
// 同时播放提示音（可选）
this.playAlarmSound()
// 注意：这里不立即保存，等用户操作后再保存
// this.saveRealtimeAlarmData(alarmData)
},
// 播放告警提示音
playAlarmSound() {
try {
// 可以添加音频文件播放
// const audio = new Audio('/static/alarm.mp3')
// audio.play()
console.log('播放告警提示音')
} catch (error) {
console.error('播放提示音失败:', error)
}
},
// 保存WebSocket告警数据到数据库
async saveRealtimeAlarmData(alarmData, alarmStatus = 1) {
try {
// 构建符合EmsRecordAlarmData实体的数据列表
// 每个触发的告警规则对应一条EmsRecordAlarmData记录
const alarmDataList = []
if (!alarmData.alarmRules || alarmData.alarmRules.length === 0) {
console.warn('告警数据中没有告警规则')
return
}
// 获取当前时间并格式化为后端期望的格式
const getCurrentTimeForBackend = () => {
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
// 为每个触发的告警规则创建一条记录
for (const rule of alarmData.alarmRules) {
// 获取对应字段的实际数值
const actualValue = this.getActualValueFromDeviceParam(alarmData.deviceParam, rule.monitorField)
const alarmRecord = {
// 设备相关信息
monitorId: alarmData.monitorId,
collectTime: getCurrentTimeForBackend(), // 使用当前时间并格式化为后端期望格式
// 告警类型：根据规则的triggerRule设置（0=大于阈值，1=小于阈值）
alarmType: rule.triggerRule || 0,
// 告警状态：根据用户操作设置（0=已处理，1=未处理）
alarmStatus: alarmStatus,
// 告警数据：实际触发告警的数值
alarmData: actualValue ? String(actualValue) : '',
// 告警原因：使用字段名称
cause: this.getFieldName(rule.monitorField),
// 其他字段可以为空，后端会设置默认值
operationName: null,
operationTime: null,
notifyUser: null
}
alarmDataList.push(alarmRecord)
console.log('构建告警记录:', {
设备ID: alarmRecord.monitorId,
告警字段: alarmRecord.cause,
实际数值: alarmRecord.alarmData,
告警类型: alarmRecord.alarmType === 0 ? '大于阈值' : '小于阈值',
规则阈值: rule.triggerValue,
记录时间: alarmRecord.collectTime,
处理状态: alarmRecord.alarmStatus === 0 ? '已处理' : '未处理'
})
}
if (alarmDataList.length === 0) {
console.warn('没有有效的告警记录可保存')
return
}
// 发送到后端保存
const response = await saveWebSocketAlarmData(alarmDataList)
if (response.code === 200) {
console.log('告警数据保存成功:', response.msg)
// 刷新告警数据列表，获取最新数据
this.getAlarmDataList()
return true
} else {
console.error('告警数据保存失败:', response.msg)
this.$message.error('告警数据保存失败: ' + response.msg)
return false
}
} catch (error) {
console.error('保存告警数据异常:', error)
this.$message.error('保存告警数据异常')
return false
}
},
// 从设备参数中获取指定字段的实际数值
getActualValueFromDeviceParam(deviceParam, monitorField) {
if (!deviceParam || monitorField === null || monitorField === undefined) {
return null
}
switch (monitorField) {
case 0: // 温度
return deviceParam.temperature
case 1: // 湿度
return deviceParam.humidity
case 2: // 振动-速度(mm/s)
return deviceParam.vibrationSpeed || deviceParam.VibrationSpeed
case 3: // 振动-位移(um)
return deviceParam.vibrationDisplacement || deviceParam.VibrationDisplacement
case 4: // 振动-加速度(g)
return deviceParam.vibrationAcceleration || deviceParam.VibrationAcceleration
case 5: // 振动-温度(℃)
return deviceParam.vibrationTemp || deviceParam.VibrationTemp
case 6: // 照度
return deviceParam.illuminance
case 7: // 噪声
return deviceParam.noise
case 8: // 气体浓度
return deviceParam.concentration
default:
console.warn('未知的监测字段:', monitorField)
return null
}
},
// 稍后处理实时告警（保存为未处理状态）
async closeRealtimeAlarmDialog() {
if (this.currentRealtimeAlarm) {
this.alarmProcessing = true
try {
// 保存告警数据，状态为1（未处理）
const success = await this.saveRealtimeAlarmData(this.currentRealtimeAlarm, 1)
if (success) {
this.$message.info('告警已记录，状态为未处理')
}
} catch (error) {
console.error('保存告警数据失败:', error)
this.$message.error('保存告警数据失败')
} finally {
this.alarmProcessing = false
}
}
this.realtimeAlarmDialog = false
this.currentRealtimeAlarm = null
},
// 确认知晓实时告警（保存为已处理状态）
async processRealtimeAlarm() {
this.alarmProcessing = true
try {
// 保存告警数据，状态为0（已处理）
const success = await this.saveRealtimeAlarmData(this.currentRealtimeAlarm, 0)
if (success) {
this.$message.success('告警已确认知晓并标记为已处理')
}
// 关闭弹窗
this.realtimeAlarmDialog = false
this.currentRealtimeAlarm = null
} catch (error) {
console.error('处理告警失败:', error)
this.$message.error('处理告警失败')
} finally {
this.alarmProcessing = false
}
},
// 格式化告警时间
formatAlarmTime(time) {
if (!time) return '--'
try {
const date = new Date(time)
return date.toLocaleString('zh-CN')
} catch (error) {
return time
}
},
// 获取监测字段名称
getFieldName(fieldCode) {
const fieldMap = {
0: '温度',
1: '湿度',
2: '振动-速度(mm/s)',
3: '振动-位移(um)',
4: '振动-加速度(g)',
5: '振动-温度(℃)',
6: '照度',
7: '噪声',
8: '气体浓度'
}
return fieldMap[fieldCode] || '未知字段'
}
}
}
@ -582,4 +955,126 @@ export default {
text-align: center;
}
// 实时告警弹窗样式
.realtime-alarm-dialog {
.el-dialog__header {
background: linear-gradient(135deg, #ff4757, #ff6b7a);
color: white;
padding: 15px 20px;
.el-dialog__title {
color: white;
font-weight: bold;
font-size: 16px;
}
.el-dialog__close {
color: white;
&:hover {
color: #f1f1f1;
}
}
}
.alarm-content {
max-height: 60vh;
overflow-y: auto;
.alarm-section {
margin-bottom: 20px;
padding: 15px;
background: #f9f9f9;
border-radius: 8px;
border-left: 4px solid #ff4757;
.section-title {
margin: 0 0 15px 0;
font-size: 14px;
font-weight: bold;
color: #333;
}
.info-item, .data-item {
display: flex;
align-items: center;
margin-bottom: 8px;
.label, .data-label {
font-weight: 500;
color: #666;
min-width: 80px;
}
.value, .data-value {
color: #333;
font-weight: bold;
}
}
.alarm-rules {
.rule-item {
background: white;
border: 1px solid #e6e6e6;
border-radius: 6px;
padding: 12px;
margin-bottom: 10px;
.rule-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
.rule-name {
font-weight: bold;
color: #333;
flex: 1;
}
}
.rule-details {
display: flex;
flex-wrap: wrap;
gap: 15px;
.detail-item {
font-size: 13px;
color: #666;
&:before {
content: "• ";
color: #ff4757;
font-weight: bold;
}
}
}
}
}
.alarm-contents {
.content-item {
margin-bottom: 10px;
.el-alert {
.el-alert__title {
font-size: 13px;
line-height: 1.4;
}
}
}
}
}
}
.dialog-footer {
text-align: center;
padding: 20px 0 10px 0;
.el-button {
min-width: 100px;
}
}
}
</style>

3
src/main.js
Unescape Escape View File

@ -52,6 +52,9 @@ Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
// 创建事件总线
Vue.prototype.$bus = new Vue()
// 全局组件挂载
Vue.component('DictTag', DictTag)
Vue.component('Pagination', Pagination)

13
src/views/ems/base/baseMonitorInfoIOTDevice/index.vue
Unescape Escape View File

@ -259,7 +259,7 @@
:label="parseInt(dict.value)">{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="监测字段" prop="monitorField" v-if="showMonitorFieldInForm">
<el-form-item label="监测字段" prop="monitorField" >
<el-select v-model="thresholdForm.monitorField" placeholder="请选择监测字段">
<el-option v-for="dict in dict.type.monitor_field" :key="dict.value"
:label="dict.label" :value="dict.value" />
@ -408,16 +408,7 @@ export default {
},
};
},
computed: {
// 是否显示监测字段列（仅温湿度设备和振动设备显示）
showMonitorField() {
return this.currentDevice.monitorType === 6 || this.currentDevice.monitorType === 10;
},
// 表单中是否显示监测字段
showMonitorFieldInForm() {
return this.currentDevice.monitorType === 6 || this.currentDevice.monitorType === 10;
}
},
created() {
getBaseEnergyTypeList({}).then(response => {
this.energyTypeList = response.data

18
src/views/ems/record/recordAlarmRule/index.vue
Unescape Escape View File

@ -100,7 +100,11 @@
<dict-tag :options="dict.type.trigger_rule" :value="scope.row.triggerRule"/>
</template>
</el-table-column>
<el-table-column label="触发阈值次数" align="center" prop="triggerNumber" v-if="columns[7].visible"/>
<el-table-column label="监测字段" align="center" prop="monitorField" v-if="columns[7].visible">
<template slot-scope="scope">
<dict-tag :options="dict.type.monitor_field" :value="scope.row.monitorField"/>
</template>
</el-table-column>
<el-table-column label="时间范围(分)" align="center" prop="timeRange" v-if="columns[8].visible"/>
<el-table-column label="触发阈值量" align="center" prop="triggerValue" v-if="columns[9].visible"/>
<el-table-column label="通知用户" align="center" prop="notifyUser" v-if="columns[10].visible"/>
@ -181,7 +185,7 @@
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="监测字段" prop="monitorField" v-if="selectedMonitorType === 6 || selectedMonitorType === 10">
<el-form-item label="监测字段" prop="monitorField" >
<el-select v-model="form.monitorField" placeholder="请选择监测字段">
<el-option v-for="dict in dict.type.monitor_field" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
@ -415,15 +419,15 @@ export default {
{ key: 4, label: `记录时间`, visible: false },
{ key: 5, label: `能源类型`, visible: false },
{ key: 6, label: `触发规则`, visible: true },
{ key: 7, label: `触发阈值次数`, visible: false },
{ key: 7, label: `监测字段`, visible: true },
{ key: 8, label: `时间范围(分)`, visible: false },
{ key: 9, label: `触发阈值量`, visible: true },
{ key: 10, label: `通知用户`, visible: false },
{ key: 11, label: `备注`, visible: true },
{ key: 12, label: `创建人`, visible: false },
{ key: 13, label: `创建时间`, visible: true },
{ key: 14, label: `更新人`, visible: false },
{ key: 15, label: `更新时间`, visible: false }
// { key: 12, label: `创建人`, visible: false },
// { key: 13, label: `创建时间`, visible: true },
// { key: 14, label: `更新人`, visible: false },
// { key: 15, label: `更新时间`, visible: false }
],
actionStepsTitle: '',
actionStepsOpen: false,

309
src/views/index.vue
Unescape Escape View File

@ -190,7 +190,7 @@
<script>
import { getLatestRecords, getLatestRecordsByParentId } from '@/api/ems/record/recordIotenvInstant'
import {getAlarmDataTotalCount} from "@/api/ems/record/recordAlarmData";
import {getAlarmDataTotalCount, saveWebSocketAlarmData} from "@/api/ems/record/recordAlarmData";
import {getEmsRecordAlarmRuleTotalCount} from "@/api/ems/record/recordAlarmRule";
import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo';
@ -200,7 +200,15 @@ export default {
return {
loading: false,
deviceList: [],
refreshTimer: null,
// refreshTimer: null, // 已删除：不再使用定时刷新
// WebSocket相关
websocket: null,
websocketUrl: 'ws://119.45.202.115:7181/ws',
isWebSocketConnected: false,
reconnectTimer: null,
reconnectAttempts: 0,
maxReconnectAttempts: 5,
alarmRuleTotalCount: 0,
alarmDataTotalCount: 0,
totalDeviceCount: 0, // 设备总数
@ -229,21 +237,163 @@ export default {
},
mounted() {
this.loadDeviceTree()
this.loadStatistics() // 加载统计数据
// 设置自动刷新，每1分钟刷新一次（只有在选择了节点时才刷新设备数据）
this.refreshTimer = setInterval(() => {
if (this.selectedNodeId !== null) {
this.loadDeviceDataByNode(this.selectedNodeId)
}
this.loadStatistics()
}, 60000)
this.loadStatistics() // 初始加载统计数据
this.initWebSocket() // 初始化WebSocket连接
},
beforeDestroy() {
if (this.refreshTimer) {
clearInterval(this.refreshTimer)
// 清理WebSocket相关定时器
if (this.reconnectTimer) {
clearInterval(this.reconnectTimer)
}
// 关闭WebSocket连接
this.closeWebSocket()
},
methods: {
// 初始化WebSocket连接
initWebSocket() {
console.log('正在建立WebSocket连接...')
try {
this.websocket = new WebSocket(this.websocketUrl)
this.websocket.onopen = this.onWebSocketOpen
this.websocket.onmessage = this.onWebSocketMessage
this.websocket.onclose = this.onWebSocketClose
this.websocket.onerror = this.onWebSocketError
} catch (error) {
console.error('WebSocket连接失败:', error)
this.handleReconnect()
}
},
// WebSocket连接成功
onWebSocketOpen(event) {
console.log('WebSocket连接已建立')
this.isWebSocketConnected = true
this.reconnectAttempts = 0
// 清除重连定时器
if (this.reconnectTimer) {
clearInterval(this.reconnectTimer)
this.reconnectTimer = null
}
this.$message.success('实时数据连接已建立')
},
// WebSocket接收消息
onWebSocketMessage(event) {
try {
const data = JSON.parse(event.data)
console.log('收到WebSocket数据:', data)
if (data.deviceParam) {
// 处理实时传感器数据
this.handleDeviceData(data)
}
if (data.isFlag === 1 && data.alarmRules && data.alarmContents) {
// 处理告警信息 - 通过事件总线通知Navbar组件
this.$bus.$emit('websocket-alarm', data)
// 实时更新告警数据统计 - 根据告警规则数量增加统计
this.alarmDataTotalCount += data.alarmRules.length
console.log('实时更新告警统计，新增告警数量:', data.alarmRules.length, '当前总数:', this.alarmDataTotalCount)
}
} catch (error) {
console.error('解析WebSocket数据失败:', error)
}
},
// WebSocket连接关闭
onWebSocketClose(event) {
console.log('WebSocket连接已关闭', event)
this.isWebSocketConnected = false
if (event.code !== 1000) { // 非正常关闭
this.$message.warning('实时数据连接已断开，正在尝试重连...')
this.handleReconnect()
}
},
// WebSocket连接错误
onWebSocketError(event) {
console.error('WebSocket连接错误:', event)
this.isWebSocketConnected = false
this.handleReconnect()
},
// 处理重连
handleReconnect() {
if (this.reconnectAttempts >= this.maxReconnectAttempts) {
console.log('达到最大重连次数，停止重连')
this.$message.error('实时数据连接失败，请刷新页面重试')
return
}
this.reconnectAttempts++
console.log(`第${this.reconnectAttempts}次重连尝试...`)
this.reconnectTimer = setTimeout(() => {
this.initWebSocket()
}, 3000 * this.reconnectAttempts) // 递增延迟重连
},
// 关闭WebSocket连接
closeWebSocket() {
if (this.websocket) {
this.websocket.close(1000, '页面关闭')
this.websocket = null
}
this.isWebSocketConnected = false
},
// 处理实时设备数据
handleDeviceData(data) {
const deviceParam = data.deviceParam
if (!deviceParam || !deviceParam.monitorId) {
return
}
// 如果当前选中了节点，只更新该节点下的设备数据
if (this.selectedNodeId !== null) {
this.updateDeviceDataInList(deviceParam)
} else {
// 如果没有选中节点，可以选择是否更新全局设备列表
console.log('收到设备数据但未选中节点:', deviceParam.monitorId)
}
},
// 更新设备列表中的数据
updateDeviceDataInList(deviceParam) {
const index = this.deviceList.findIndex(device => device.monitorId === deviceParam.monitorId)
if (index !== -1) {
// 更新现有设备数据
const updatedDevice = {
...this.deviceList[index],
temperature: deviceParam.temperature,
humidity: deviceParam.humidity,
illuminance: deviceParam.illuminance,
noise: deviceParam.noise,
concentration: deviceParam.concentration,
vibrationSpeed: deviceParam.vibrationSpeed || deviceParam.VibrationSpeed,
vibrationDisplacement: deviceParam.vibrationDisplacement || deviceParam.VibrationDisplacement,
vibrationAcceleration: deviceParam.vibrationAcceleration || deviceParam.VibrationAcceleration,
vibrationTemp: deviceParam.vibrationTemp || deviceParam.VibrationTemp,
collectTime: deviceParam.collectTime,
recodeTime: deviceParam.recordTime
}
// 使用Vue.set确保响应式更新
this.$set(this.deviceList, index, updatedDevice)
console.log('更新设备数据:', deviceParam.monitorId)
} else {
console.log('设备不在当前节点列表中:', deviceParam.monitorId)
}
},
async loadStatistics() {
try {
this.alarmDataTotalCount = await getAlarmDataTotalCount();
@ -298,7 +448,8 @@ export default {
if (this.selectedNodeId !== null) {
this.loadDeviceDataByNode(this.selectedNodeId)
}
this.loadStatistics()
// 删除统计数据的手动刷新，统计数据现在通过WebSocket实时更新
// this.loadStatistics()
},
// 加载设备树
@ -396,6 +547,138 @@ export default {
}
},
// 保存WebSocket告警数据到数据库
async saveRealtimeAlarmData(alarmData) {
try {
// 构建符合EmsRecordAlarmData实体的数据列表
// 每个触发的告警规则对应一条EmsRecordAlarmData记录
const alarmDataList = []
if (!alarmData.alarmRules || alarmData.alarmRules.length === 0) {
console.warn('告警数据中没有告警规则')
return
}
// 获取当前时间并格式化为后端期望的格式
const getCurrentTimeForBackend = () => {
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
// 为每个触发的告警规则创建一条记录
for (const rule of alarmData.alarmRules) {
// 获取对应字段的实际数值
const actualValue = this.getActualValueFromDeviceParam(alarmData.deviceParam, rule.monitorField)
const alarmRecord = {
// 设备相关信息
monitorId: alarmData.monitorId,
collectTime: getCurrentTimeForBackend(), // 使用当前时间并格式化为后端期望格式
// 告警类型：根据规则的triggerRule设置（0=大于阈值，1=小于阈值）
alarmType: rule.triggerRule || 0,
// 告警状态：1=未处理
alarmStatus: 1,
// 告警数据：实际触发告警的数值
alarmData: actualValue ? String(actualValue) : '',
// 告警原因：使用字段名称
cause: this.getFieldName(rule.monitorField),
// 其他字段可以为空，后端会设置默认值
operationName: null,
operationTime: null,
notifyUser: null
}
alarmDataList.push(alarmRecord)
console.log('构建告警记录:', {
设备ID: alarmRecord.monitorId,
告警字段: alarmRecord.cause,
实际数值: alarmRecord.alarmData,
告警类型: alarmRecord.alarmType === 0 ? '大于阈值' : '小于阈值',
规则阈值: rule.triggerValue,
记录时间: alarmRecord.collectTime
})
}
if (alarmDataList.length === 0) {
console.warn('没有有效的告警记录可保存')
return
}
// 发送到后端保存
const response = await saveWebSocketAlarmData(alarmDataList)
if (response.code === 200) {
console.log('告警数据保存成功:', response.msg)
// 告警数据保存成功，新的告警记录会通过WebSocket实时推送，无需手动刷新
// this.getAlarmDataList()
} else {
console.error('告警数据保存失败:', response.msg)
this.$message.error('告警数据保存失败: ' + response.msg)
}
} catch (error) {
console.error('保存告警数据异常:', error)
this.$message.error('保存告警数据异常')
}
},
// 从设备参数中获取指定字段的实际数值
getActualValueFromDeviceParam(deviceParam, monitorField) {
if (!deviceParam || monitorField === null || monitorField === undefined) {
return null
}
switch (monitorField) {
case 0: // 温度
return deviceParam.temperature
case 1: // 湿度
return deviceParam.humidity
case 2: // 振动-速度(mm/s)
return deviceParam.vibrationSpeed || deviceParam.VibrationSpeed
case 3: // 振动-位移(um)
return deviceParam.vibrationDisplacement || deviceParam.VibrationDisplacement
case 4: // 振动-加速度(g)
return deviceParam.vibrationAcceleration || deviceParam.VibrationAcceleration
case 5: // 振动-温度(℃)
return deviceParam.vibrationTemp || deviceParam.VibrationTemp
case 6: // 照度
return deviceParam.illuminance
case 7: // 噪声
return deviceParam.noise
case 8: // 气体浓度
return deviceParam.concentration
default:
console.warn('未知的监测字段:', monitorField)
return null
}
},
// 获取监测字段名称
getFieldName(fieldCode) {
const fieldMap = {
0: '温度',
1: '湿度',
2: '振动-速度(mm/s)',
3: '振动-位移(um)',
4: '振动-加速度(g)',
5: '振动-温度(℃)',
6: '照度',
7: '噪声',
8: '气体浓度'
}
return fieldMap[fieldCode] || '未知字段'
}
}
}
</script>

2
src/views/login.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">机场行李系统设备健康监测系统</h3>
<h3 class="title">行李健康监测系统</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"

2
src/views/register.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="register">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
<h3 class="title">机场行李系统设备健康监测系统</h3>
<h3 class="title">行李健康监测系统</h3>
<el-form-item prop="username">
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />

2
vue.config.js
Unescape Escape View File

@ -7,7 +7,7 @@ function resolve(dir) {
const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || '机场行李系统设备健康监测系统' // 网页标题
const name = process.env.VUE_APP_TITLE || '行李健康监测系统' // 网页标题
const port = process.env.port || process.env.npm_config_port || 8200 // 端口

Write Preview
Loading…
Cancel
Save