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
<template>
<div>
<el-form class="search-form" :model="form" ref="form" label-width="80px" :inline="true" size="mini">
<el-form-item label="基站名称" >
<el-select v-model="form.siteId" placeholder="请选择基站名称" clearable >
<el-option v-for="item in siteList"
:key="item.id"
:label="item.siteName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="告警对象">
<el-input v-model="form.alarmTargetName" clearable placeholder="请输入网元设备"></el-input>
</el-form-item>
<el-form-item label="告警级别">
<el-select v-model="form.alarmLevelName" placeholder="请选择告警级别" clearable >
<el-option v-for="(val,key) in alarmLeval"
:key="key"
:label="val"
:value="val">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="success" @click="toSearch">查询</el-button>
<el-button type="primary" @click="reset">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { commonQuery } from '../../api'
import { alarmLeval } from '@/const'
export default {
name: 'search',
data() {
return {
siteList: [],
alarmObj: [],
form: formInit(),
alarmLeval
}
},
mounted() {
this.getInit()
},
methods: {
toSearch() {
this.$emit('search', this.form)
},
reset() {
this.form = formInit()
this.$emit('search')
},
getInit() {
commonQuery().then(res => {
this.siteList = res.siteList || []
this.alarmObj = res.alarmObjectList || []
})
}
}
}
function formInit() {
return {
siteId: null,
alarmTargetName: '',
alarmLevelName: null,
}
}
</script>
<style scoped lang="scss">
.w200 {
width: 200px;
}
.search-form {
padding: 10px;
background-color: #EAF1FE;
margin-bottom: 20px;
border-radius: 8px;
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
margin-bottom: 0;
}
}
</style>