1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
| <template>
| <div class="alarm-rule-config">
| <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.ruleName" placeholder="请输入规则名称" />
| </el-form-item>
| <el-form-item label="设备类型">
| <el-select v-model="searchForm.equipmentType" placeholder="请选择设备类型">
| <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-refresh" @click="handleReset">重置</el-button>
| </el-form-item>
| </el-form>
| </el-card>
|
| <el-card shadow="never" class="table-card">
| <template #header>
| <div class="card-header">
| <span>报警规则配置</span>
| <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增规则</el-button>
| </div>
| </template>
| <el-table :data="ruleList" style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
| <el-table-column type="index" label="序号" width="80" />
| <el-table-column prop="ruleName" label="规则名称" />
| <el-table-column prop="equipmentType" label="设备类型" />
| <el-table-column prop="parameter" label="监控参数" />
| <el-table-column prop="alarmLevel" label="报警级别" />
| <el-table-column prop="createTime" label="创建时间" width="180" show-overflow-tooltip/>
| <el-table-column prop="status" label="状态" width="150">
| <template #default="scope">
| <el-switch v-model="scope.row.status" active-text="启用" inactive-text="禁用" />
| </template>
| </el-table-column>
| <el-table-column label="操作" width="150" fixed="right">
| <template #default="scope">
| <el-button size="small" type="text" @click="handleEdit(scope.row)">编辑</el-button>
| <el-button size="small" type="text" @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="ruleList.length"
| :page-size="10"
| :page-sizes="[10, 20, 30, 50]"
| />
| </div>
| </el-card>
| </div>
| </template>
|
| <script>
| export default {
| name: 'AlarmRule',
| data() {
| return {
| searchForm: {
| ruleName: '',
| equipmentType: ''
| },
| ruleList: [
| {
| id: 1,
| ruleName: '温度过高报警',
| equipmentType: '工艺设备',
| parameter: '温度',
| alarmLevel: '严重',
| createTime: '2025-12-01 10:30:00',
| status: true
| },
| {
| id: 2,
| ruleName: '压力异常报警',
| equipmentType: '工艺设备',
| parameter: '压力',
| alarmLevel: '中等',
| createTime: '2025-12-02 14:20:00',
| status: true
| },
| {
| id: 3,
| ruleName: '流量过低报警',
| equipmentType: '检测设备',
| parameter: '流量',
| alarmLevel: '轻微',
| createTime: '2025-12-03 09:15:00',
| status: false
| },
| {
| id: 4,
| ruleName: '电压不稳定报警',
| equipmentType: '其他设备',
| parameter: '电压',
| alarmLevel: '中等',
| createTime: '2025-12-04 16:45:00',
| status: true
| },
| {
| id: 5,
| ruleName: '液位异常报警',
| equipmentType: '工艺设备',
| parameter: '液位',
| alarmLevel: '严重',
| createTime: '2025-12-05 11:20:00',
| status: true
| }
| ]
| }
| },
| methods: {
| handleSearch() {
| console.log('搜索', this.searchForm)
| },
| handleReset() {
| this.searchForm = {
| ruleName: '',
| equipmentType: ''
| }
| },
| handleAdd() {
| console.log('新增规则')
| },
| handleEdit(row) {
| console.log('编辑规则', row)
| },
| handleDelete(row) {
| console.log('删除规则', row)
| }
| }
| }
| </script>
|
| <style scoped>
| .alarm-rule-config {
| 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 {
| border-radius: 8px;
| box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
| }
|
| .card-header {
| display: flex;
| justify-content: space-between;
| align-items: center;
| padding: 0 20px;
| }
|
| .pagination {
| margin-top: 16px;
| display: flex;
| justify-content: flex-end;
| padding-right: 20px;
| }
|
| </style>
|
|
