<template>
|
<div class="real-time-alarm">
|
<el-card shadow="never" class="alarm-stats-card">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<div class="stat-item">
|
<div class="stat-number severe">12</div>
|
<div class="stat-label">严重报警</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="stat-item">
|
<div class="stat-number moderate">28</div>
|
<div class="stat-label">中等报警</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="stat-item">
|
<div class="stat-number minor">45</div>
|
<div class="stat-label">轻微报警</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="stat-item">
|
<div class="stat-number total">85</div>
|
<div class="stat-label">今日总报警</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-card>
|
|
<el-card shadow="never" class="table-card">
|
<template #header>
|
<div class="card-header">
|
<span>实时报警监控</span>
|
<el-button type="primary" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
|
</div>
|
</template>
|
<el-table :data="alarmList" style="width: 100%" height="500" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
|
<el-table-column type="index" label="序号" width="80" />
|
<el-table-column prop="alarmTime" label="报警时间" width="180" />
|
<el-table-column prop="equipmentName" label="设备名称" />
|
<el-table-column prop="parameter" label="报警参数" />
|
<el-table-column prop="alarmValue" label="报警值" />
|
<el-table-column prop="threshold" label="阈值" />
|
<el-table-column prop="alarmLevel" label="报警级别" width="100">
|
<template #default="scope">
|
<el-tag :type="getAlarmLevelType(scope.row.alarmLevel)">
|
{{ scope.row.alarmLevel }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="status" label="处理状态" width="120">
|
<template #default="scope">
|
<el-tag :type="scope.row.status === '已处理' ? 'success' : 'warning'">
|
{{ scope.row.status }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="200" fixed="right">
|
<template #default="scope">
|
<el-button size="small" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
|
<el-button size="small" type="text" icon="el-icon-check" @click="handleProcess(scope.row)">处理</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'RealTimeAlarm',
|
data() {
|
return {
|
alarmList: [
|
{
|
id: 1,
|
alarmTime: '2025-12-16 11:50:23',
|
equipmentName: '反应釜A',
|
parameter: '温度',
|
alarmValue: '185°C',
|
threshold: '≤180°C',
|
alarmLevel: '严重',
|
status: '未处理'
|
},
|
{
|
id: 2,
|
alarmTime: '2025-12-16 11:48:15',
|
equipmentName: '离心机B',
|
parameter: '振动',
|
alarmValue: '0.8mm/s',
|
threshold: '≤0.5mm/s',
|
alarmLevel: '中等',
|
status: '未处理'
|
},
|
{
|
id: 3,
|
alarmTime: '2025-12-16 11:45:30',
|
equipmentName: '输送泵C',
|
parameter: '压力',
|
alarmValue: '4.2MPa',
|
threshold: '≤4.0MPa',
|
alarmLevel: '轻微',
|
status: '已处理'
|
},
|
{
|
id: 4,
|
alarmTime: '2025-12-16 11:42:18',
|
equipmentName: '反应釜D',
|
parameter: 'pH值',
|
alarmValue: '4.2',
|
threshold: '5.0-7.0',
|
alarmLevel: '中等',
|
status: '未处理'
|
},
|
{
|
id: 5,
|
alarmTime: '2025-12-16 11:38:55',
|
equipmentName: '干燥机E',
|
parameter: '湿度',
|
alarmValue: '15%',
|
threshold: '≤10%',
|
alarmLevel: '轻微',
|
status: '已处理'
|
}
|
]
|
}
|
},
|
methods: {
|
getAlarmLevelType(level) {
|
switch (level) {
|
case '严重':
|
return 'danger'
|
case '中等':
|
return 'warning'
|
case '轻微':
|
return 'info'
|
default:
|
return 'info'
|
}
|
},
|
handleRefresh() {
|
console.log('刷新报警数据')
|
},
|
handleView(row) {
|
console.log('查看报警详情', row)
|
},
|
handleProcess(row) {
|
console.log('处理报警', row)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.real-time-alarm {
|
padding: 16px;
|
background-color: #f0f2f5;
|
min-height: 100vh;
|
}
|
|
.alarm-stats-card {
|
margin-bottom: 16px;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
|
.table-card {
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
|
.stat-item {
|
text-align: center;
|
padding: 24px 16px;
|
background-color: #ffffff;
|
border-radius: 12px;
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
transition: all 0.3s ease;
|
}
|
|
.stat-item:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
}
|
|
.stat-number {
|
font-size: 36px;
|
font-weight: bold;
|
margin-bottom: 12px;
|
letter-spacing: 1px;
|
}
|
|
.stat-number.severe {
|
color: #f56c6c;
|
text-shadow: 0 2px 4px rgba(245, 108, 108, 0.1);
|
}
|
|
.stat-number.moderate {
|
color: #e6a23c;
|
text-shadow: 0 2px 4px rgba(230, 162, 60, 0.1);
|
}
|
|
.stat-number.minor {
|
color: #67c23a;
|
text-shadow: 0 2px 4px rgba(103, 194, 58, 0.1);
|
}
|
|
.stat-number.total {
|
color: #409eff;
|
text-shadow: 0 2px 4px rgba(64, 158, 255, 0.1);
|
}
|
|
.stat-label {
|
font-size: 14px;
|
color: #606266;
|
font-weight: 500;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 20px;
|
}
|
|
/* 表格样式优化 */
|
:deep(.el-table) {
|
border-radius: 8px;
|
overflow: hidden;
|
}
|
|
:deep(.el-table__header-wrapper) {
|
background-color: #f5f7fa;
|
}
|
|
:deep(.el-table__header th) {
|
font-weight: 600;
|
background-color: #f5f7fa;
|
}
|
|
:deep(.el-table__body tr:hover) {
|
background-color: #f5f7fa;
|
}
|
|
/* 按钮样式优化 */
|
:deep(.el-button) {
|
border-radius: 6px;
|
padding: 8px 16px;
|
text-align: center;
|
white-space: nowrap;
|
}
|
|
/* 操作栏不换行 */
|
:deep(.el-table__column--fixed-right) {
|
white-space: nowrap;
|
}
|
|
:deep(.el-table__fixed-right) {
|
height: 100% !important;
|
}
|
|
/* 标签样式优化 */
|
:deep(.el-tag) {
|
border-radius: 12px;
|
padding: 4px 12px;
|
font-size: 12px;
|
font-weight: 500;
|
}
|
</style>
|
