<template>
|
<div class="fault-diagnosis-container">
|
<el-row :gutter="20">
|
<!-- 左侧：故障预警列表 -->
|
<el-col :span="12">
|
<el-card shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span>故障预警列表</span>
|
</div>
|
</template>
|
<el-table :data="warningList" stripe style="width: 100%" @row-click="handleWarningClick">
|
<el-table-column prop="deviceName" label="设备名称" width="180"></el-table-column>
|
<el-table-column prop="warningType" label="预警类型" width="120"></el-table-column>
|
<el-table-column prop="riskLevel" label="风险等级" width="100">
|
<template #default="scope">
|
<el-tag :type="scope.row.riskLevel === 'high' ? 'danger' : scope.row.riskLevel === 'medium' ? 'warning' : 'info'">
|
{{ scope.row.riskLevel === 'high' ? '高' : scope.row.riskLevel === 'medium' ? '中' : '低' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="occurTime" label="发生时间" width="180"></el-table-column>
|
<el-table-column prop="status" label="处理状态" width="100">
|
<template #default="scope">
|
<el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">
|
{{ scope.row.status === 'pending' ? '待处理' : '已处理' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
<!-- 故障历史记录查询 -->
|
<el-card shadow="hover" style="margin-top: 20px;">
|
<template #header>
|
<div class="card-header">
|
<span>故障历史记录</span>
|
</div>
|
</template>
|
<el-form :inline="true" :model="historyFilterForm" class="history-filter-form">
|
<el-form-item label="设备">
|
<el-select v-model="historyFilterForm.deviceId" placeholder="请选择设备" clearable>
|
<el-option
|
v-for="device in devices"
|
:key="device.id"
|
:label="device.name"
|
:value="device.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间范围">
|
<el-date-picker
|
v-model="historyTimeRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleHistorySearch">查询</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table :data="historyList" stripe style="width: 100%" size="small">
|
<el-table-column prop="deviceName" label="设备名称" width="150"></el-table-column>
|
<el-table-column prop="faultType" label="故障类型" width="120"></el-table-column>
|
<el-table-column prop="occurTime" label="发生时间" width="150"></el-table-column>
|
<el-table-column prop="dealTime" label="处理时间" width="150"></el-table-column>
|
<el-table-column prop="status" label="状态" width="100">
|
<template #default="scope">
|
<el-tag type="success">{{ scope.row.status }}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pagination-container">
|
<el-pagination
|
background
|
layout="total, prev, pager, next"
|
:total="historyList.length"
|
:page-size="5"
|
size="small"
|
></el-pagination>
|
</div>
|
</el-card>
|
</el-col>
|
|
<!-- 右侧：故障诊断结果 -->
|
<el-col :span="12">
|
<!-- 故障诊断结果 -->
|
<el-card shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span>故障诊断结果</span>
|
<el-button type="primary" size="small" @click="handleDiagnosis">重新诊断</el-button>
|
</div>
|
</template>
|
<div v-if="currentWarning" class="diagnosis-result">
|
<h3>{{ currentWarning.deviceName }} - {{ currentWarning.warningType }}</h3>
|
<el-descriptions :column="1" border>
|
<el-descriptions-item label="风险等级">
|
<el-tag :type="currentWarning.riskLevel === 'high' ? 'danger' : currentWarning.riskLevel === 'medium' ? 'warning' : 'info'">
|
{{ currentWarning.riskLevel === 'high' ? '高' : currentWarning.riskLevel === 'medium' ? '中' : '低' }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="发生时间">{{ currentWarning.occurTime }}</el-descriptions-item>
|
<el-descriptions-item label="原因推测">{{ diagnosisResult.reason }}</el-descriptions-item>
|
<el-descriptions-item label="影响范围">{{ diagnosisResult.impact }}</el-descriptions-item>
|
<el-descriptions-item label="处理建议">{{ diagnosisResult.suggestion }}</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<div v-else class="no-selection">
|
<el-empty description="请选择一个预警项查看诊断结果"></el-empty>
|
</div>
|
</el-card>
|
|
<!-- 预测性诊断结果 -->
|
<el-card shadow="hover" style="margin-top: 20px;">
|
<template #header>
|
<div class="card-header">
|
<span>预测性诊断结果（未来7日故障风险）</span>
|
</div>
|
</template>
|
<div class="prediction-result">
|
<el-timeline>
|
<el-timeline-item
|
v-for="item in predictionList"
|
:key="item.date"
|
:timestamp="item.date"
|
:type="item.riskLevel === 'high' ? 'danger' : item.riskLevel === 'medium' ? 'warning' : 'success'"
|
>
|
<div class="timeline-content">
|
<h4>{{ item.deviceName }}</h4>
|
<p class="risk-level">
|
风险等级：
|
<el-tag :type="item.riskLevel === 'high' ? 'danger' : item.riskLevel === 'medium' ? 'warning' : 'success'">
|
{{ item.riskLevel === 'high' ? '高' : item.riskLevel === 'medium' ? '中' : '低' }}
|
</el-tag>
|
</p>
|
<p class="fault-type">可能故障类型：{{ item.possibleFault }}</p>
|
<p class="probability">发生概率：{{ item.probability }}%</p>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from 'vue'
|
|
// 设备列表
|
const devices = ref([
|
{ id: 'D001', name: '空压机A-001' },
|
{ id: 'D002', name: '冷却塔B-002' },
|
{ id: 'D003', name: '水泵C-003' },
|
{ id: 'D004', name: '发电机D-004' },
|
{ id: 'D005', name: '变压器E-005' }
|
])
|
|
// 故障预警列表
|
const warningList = ref([
|
{
|
id: 1,
|
deviceName: '空压机A-001',
|
warningType: '压力异常',
|
riskLevel: 'high',
|
occurTime: '2024-12-16 14:32:15',
|
status: 'pending'
|
},
|
{
|
id: 2,
|
deviceName: '冷却塔B-002',
|
warningType: '温度过高',
|
riskLevel: 'medium',
|
occurTime: '2024-12-16 14:30:45',
|
status: 'pending'
|
},
|
{
|
id: 3,
|
deviceName: '水泵C-003',
|
warningType: '振动过大',
|
riskLevel: 'medium',
|
occurTime: '2024-12-16 14:28:30',
|
status: 'pending'
|
},
|
{
|
id: 4,
|
deviceName: '发电机D-004',
|
warningType: '电流异常',
|
riskLevel: 'high',
|
occurTime: '2024-12-16 14:25:10',
|
status: 'pending'
|
},
|
{
|
id: 5,
|
deviceName: '变压器E-005',
|
warningType: '电压波动',
|
riskLevel: 'low',
|
occurTime: '2024-12-16 14:20:05',
|
status: 'pending'
|
}
|
])
|
|
// 当前选中的预警项
|
const currentWarning = ref(warningList.value[0])
|
|
// 故障诊断结果
|
const diagnosisResult = reactive({
|
reason: '根据设备运行数据推测，故障原因可能是设备内部部件磨损导致的压力异常，需要进一步检查设备的活塞环和气缸套。',
|
impact: '如果不及时处理，可能导致设备停机，影响生产线的正常运行，预计停机时间为4-6小时。',
|
suggestion: '1. 立即安排维修人员进行设备检查；2. 检查设备的活塞环和气缸套；3. 更换磨损严重的部件；4. 检查设备的润滑系统，确保润滑正常。'
|
})
|
|
// 预测性诊断结果
|
const predictionList = ref([
|
{
|
date: '2024-12-17',
|
deviceName: '空压机A-001',
|
riskLevel: 'medium',
|
possibleFault: '压力异常',
|
probability: 65
|
},
|
{
|
date: '2024-12-18',
|
deviceName: '冷却塔B-002',
|
riskLevel: 'high',
|
possibleFault: '温度过高',
|
probability: 85
|
},
|
{
|
date: '2024-12-19',
|
deviceName: '水泵C-003',
|
riskLevel: 'medium',
|
possibleFault: '振动过大',
|
probability: 70
|
},
|
{
|
date: '2024-12-20',
|
deviceName: '发电机D-004',
|
riskLevel: 'high',
|
possibleFault: '电流异常',
|
probability: 90
|
},
|
{
|
date: '2024-12-21',
|
deviceName: '变压器E-005',
|
riskLevel: 'low',
|
possibleFault: '电压波动',
|
probability: 45
|
},
|
{
|
date: '2024-12-22',
|
deviceName: '空压机A-001',
|
riskLevel: 'high',
|
possibleFault: '压力异常',
|
probability: 80
|
},
|
{
|
date: '2024-12-23',
|
deviceName: '冷却塔B-002',
|
riskLevel: 'medium',
|
possibleFault: '温度过高',
|
probability: 60
|
}
|
])
|
|
// 故障历史记录查询表单
|
const historyFilterForm = ref({
|
deviceId: ''
|
})
|
|
// 历史记录时间范围
|
const historyTimeRange = ref([])
|
|
// 故障历史记录
|
const historyList = ref([
|
{
|
id: 1,
|
deviceName: '空压机A-001',
|
faultType: '压力异常',
|
occurTime: '2024-12-15 08:30:00',
|
dealTime: '2024-12-15 10:45:00',
|
status: '已处理'
|
},
|
{
|
id: 2,
|
deviceName: '冷却塔B-002',
|
faultType: '温度过高',
|
occurTime: '2024-12-14 14:20:00',
|
dealTime: '2024-12-14 16:15:00',
|
status: '已处理'
|
},
|
{
|
id: 3,
|
deviceName: '水泵C-003',
|
faultType: '振动过大',
|
occurTime: '2024-12-13 09:15:00',
|
dealTime: '2024-12-13 11:30:00',
|
status: '已处理'
|
},
|
{
|
id: 4,
|
deviceName: '发电机D-004',
|
faultType: '电流异常',
|
occurTime: '2024-12-12 16:45:00',
|
dealTime: '2024-12-12 18:30:00',
|
status: '已处理'
|
},
|
{
|
id: 5,
|
deviceName: '变压器E-005',
|
faultType: '电压波动',
|
occurTime: '2024-12-11 11:20:00',
|
dealTime: '2024-12-11 13:15:00',
|
status: '已处理'
|
}
|
])
|
|
// 处理预警项点击
|
const handleWarningClick = (row) => {
|
currentWarning.value = row
|
}
|
|
// 重新诊断
|
const handleDiagnosis = () => {
|
// 模拟重新诊断
|
ElMessage.success('重新诊断完成')
|
}
|
|
// 处理历史记录查询
|
const handleHistorySearch = () => {
|
// 模拟查询历史记录
|
ElMessage.success('历史记录查询成功')
|
}
|
</script>
|
|
<style scoped>
|
.fault-diagnosis-container {
|
padding: 20px;
|
background-color: #f5f7fa;
|
min-height: 100vh;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.diagnosis-result h3 {
|
margin-bottom: 20px;
|
color: #303133;
|
}
|
|
.no-selection {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 200px;
|
}
|
|
.prediction-result {
|
padding: 10px 0;
|
}
|
|
.timeline-content {
|
padding: 10px;
|
background-color: #fafafa;
|
border-radius: 4px;
|
}
|
|
.timeline-content h4 {
|
margin-bottom: 10px;
|
color: #303133;
|
}
|
|
.timeline-content p {
|
margin: 5px 0;
|
font-size: 14px;
|
color: #606266;
|
}
|
|
.risk-level {
|
display: flex;
|
align-items: center;
|
gap: 5px;
|
}
|
|
.fault-type {
|
color: #606266;
|
}
|
|
.probability {
|
color: #606266;
|
}
|
|
.history-filter-form {
|
margin-bottom: 20px;
|
padding: 10px 0;
|
border-bottom: 1px solid #ebeef5;
|
}
|
|
.pagination-container {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 20px;
|
}
|
</style>
|
