<template>
|
<div class="alarm-handle-knowledge">
|
<el-card shadow="never" class="search-card">
|
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
|
<el-form-item label="知识库标题">
|
<el-input v-model="searchForm.title" placeholder="请输入知识库标题" />
|
</el-form-item>
|
<el-form-item label="报警类型">
|
<el-select v-model="searchForm.alarmType" placeholder="请选择报警类型" clearable>
|
<el-option label="温度报警" value="温度报警" />
|
<el-option label="压力报警" value="压力报警" />
|
<el-option label="振动报警" value="振动报警" />
|
<el-option label="液位报警" value="液位报警" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
<el-button icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<el-card shadow="never" class="table-card" >
|
<el-table :data="knowledgeList" style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
|
<el-table-column type="index" label="序号" width="80" />
|
<el-table-column prop="title" label="知识库标题" min-width="200" />
|
<el-table-column prop="alarmType" label="报警类型" width="120" />
|
<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="createTime" label="创建时间" width="180" />
|
<el-table-column prop="creator" label="创建人" width="100" />
|
<el-table-column prop="status" label="状态" width="100">
|
<template #default="scope">
|
<el-tag :type="scope.row.status === '启用' ? 'success' : 'info'">
|
{{ scope.row.status }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="250" 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-edit" @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pagination">
|
<el-pagination
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="knowledgeList.length"
|
:page-size="10"
|
:page-sizes="[10, 20, 30, 50]"
|
/>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'AlarmHandleKnowledge',
|
data() {
|
return {
|
searchForm: {
|
title: '',
|
alarmType: ''
|
},
|
knowledgeList: [
|
{
|
id: 1,
|
title: '反应釜温度过高报警处理流程',
|
alarmType: '温度报警',
|
alarmLevel: '严重',
|
createTime: '2025-12-01 14:30:00',
|
creator: '管理员',
|
status: '启用'
|
},
|
{
|
id: 2,
|
title: '离心泵振动异常报警处理指南',
|
alarmType: '振动报警',
|
alarmLevel: '中等',
|
createTime: '2025-12-02 09:15:00',
|
creator: '设备工程师',
|
status: '启用'
|
},
|
{
|
id: 3,
|
title: '储罐液位过低报警处理方法',
|
alarmType: '液位报警',
|
alarmLevel: '轻微',
|
createTime: '2025-12-03 16:45:00',
|
creator: '工艺工程师',
|
status: '启用'
|
},
|
{
|
id: 4,
|
title: '压缩机压力过高报警应急预案',
|
alarmType: '压力报警',
|
alarmLevel: '严重',
|
createTime: '2025-12-04 11:20:00',
|
creator: '安全主管',
|
status: '启用'
|
},
|
{
|
id: 5,
|
title: '干燥机湿度异常报警处理流程',
|
alarmType: '湿度报警',
|
alarmLevel: '中等',
|
createTime: '2025-12-05 15:10:00',
|
creator: '工艺工程师',
|
status: '禁用'
|
}
|
]
|
}
|
},
|
methods: {
|
getAlarmLevelType(level) {
|
switch (level) {
|
case '严重':
|
return 'danger'
|
case '中等':
|
return 'warning'
|
case '轻微':
|
return 'info'
|
default:
|
return 'info'
|
}
|
},
|
handleSearch() {
|
console.log('搜索知识库', this.searchForm)
|
},
|
handleAdd() {
|
console.log('新增知识库')
|
},
|
handleView(row) {
|
console.log('查看知识库详情', row)
|
},
|
handleEdit(row) {
|
console.log('编辑知识库', row)
|
},
|
handleDelete(row) {
|
console.log('删除知识库', row)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.alarm-handle-knowledge {
|
padding: 16px;
|
background-color: #f0f2f5;
|
min-height: 100vh;
|
}
|
|
.search-card {
|
margin-bottom: 16px;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
|
.table-card {
|
margin-top: 16px;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
|
.pagination {
|
margin-top: 16px;
|
display: flex;
|
justify-content: flex-end;
|
padding-right: 20px;
|
}
|
|
</style>
|
