代码结构调整
This commit is contained in:
parent
7e33d014d4
commit
1de8300df3
|
@ -1,18 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<a-modal
|
<a-modal title="Add Rule" :width="845" v-model="visible" @cancel="onCancel">
|
||||||
title='Add Rule'
|
<a-form-model ref="al_ruleForm" :model="form" :rules="rules" layout="vertical">
|
||||||
:width="845"
|
<a-row :gutter="[15, 0]">
|
||||||
v-model="visible"
|
|
||||||
@cancel="onCancel"
|
|
||||||
>
|
|
||||||
<a-form-model
|
|
||||||
ref="al_ruleForm"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
layout="vertical"
|
|
||||||
>
|
|
||||||
<a-row :gutter="[15,0]">
|
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-model-item ref="sourceType" label="Source Type" prop="sourceType">
|
<a-form-model-item ref="sourceType" label="Source Type" prop="sourceType">
|
||||||
<a-select
|
<a-select
|
||||||
|
@ -22,7 +12,7 @@
|
||||||
allowClear
|
allowClear
|
||||||
disabled
|
disabled
|
||||||
placeholder="select..."
|
placeholder="select..."
|
||||||
>
|
>
|
||||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
|
@ -36,13 +26,13 @@
|
||||||
allowClear
|
allowClear
|
||||||
disabled
|
disabled
|
||||||
placeholder="select..."
|
placeholder="select..."
|
||||||
>
|
>
|
||||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-row :gutter="[15,0]">
|
<a-row :gutter="[15, 0]">
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-model-item ref="alarmRule" label="Alarm Rule" prop="name">
|
<a-form-model-item ref="alarmRule" label="Alarm Rule" prop="name">
|
||||||
<a-input v-model="form.name" placeholder="Pleace enter the alarm rule name" />
|
<a-input v-model="form.name" placeholder="Pleace enter the alarm rule name" />
|
||||||
|
@ -58,13 +48,13 @@
|
||||||
labelInValue
|
labelInValue
|
||||||
placeholder="select..."
|
placeholder="select..."
|
||||||
@change="onItemChange"
|
@change="onItemChange"
|
||||||
>
|
>
|
||||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-row :gutter="[15,0]">
|
<a-row :gutter="[15, 0]">
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-model-item ref="monitorItem" label="Logic Symbol" prop="operator">
|
<a-form-model-item ref="monitorItem" label="Logic Symbol" prop="operator">
|
||||||
<a-select
|
<a-select
|
||||||
|
@ -73,7 +63,7 @@
|
||||||
show-arrow
|
show-arrow
|
||||||
allowClear
|
allowClear
|
||||||
placeholder="select..."
|
placeholder="select..."
|
||||||
>
|
>
|
||||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
|
@ -84,7 +74,7 @@
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-row :gutter="[15,0]">
|
<a-row :gutter="[15, 0]">
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-model-item ref="silenceCycle" label="Silence Cycle" prop="silenceCycle">
|
<a-form-model-item ref="silenceCycle" label="Silence Cycle" prop="silenceCycle">
|
||||||
<a-select
|
<a-select
|
||||||
|
@ -93,7 +83,7 @@
|
||||||
show-arrow
|
show-arrow
|
||||||
allowClear
|
allowClear
|
||||||
placeholder="select..."
|
placeholder="select..."
|
||||||
>
|
>
|
||||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
|
@ -106,7 +96,7 @@
|
||||||
show-arrow
|
show-arrow
|
||||||
allowClear
|
allowClear
|
||||||
placeholder="select..."
|
placeholder="select..."
|
||||||
>
|
>
|
||||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
|
@ -116,7 +106,7 @@
|
||||||
<template slot="footer">
|
<template slot="footer">
|
||||||
<a-space class="operators" :size="20">
|
<a-space class="operators" :size="20">
|
||||||
<a-button type="success" @click="onSave">Save</a-button>
|
<a-button type="success" @click="onSave">Save</a-button>
|
||||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
@ -124,125 +114,109 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
import { getAction } from '@/api/manage'
|
||||||
export default {
|
export default {
|
||||||
props: ["visible","serverList","currServer","serverLabel"],
|
props: ['visible', 'serverList', 'currServer', 'serverLabel'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
form: {
|
form: {
|
||||||
sourceType: "Server",
|
sourceType: 'Server',
|
||||||
sourceId: undefined,
|
sourceId: undefined,
|
||||||
name: "",
|
name: '',
|
||||||
itemId: undefined,
|
itemId: undefined,
|
||||||
operator: undefined,
|
operator: undefined,
|
||||||
threshold: "",
|
threshold: '',
|
||||||
silenceCycle: undefined,
|
silenceCycle: undefined,
|
||||||
contactId: undefined,
|
contactId: undefined,
|
||||||
},
|
},
|
||||||
units: "",
|
units: '',
|
||||||
itemOptions: [],
|
itemOptions: [],
|
||||||
typeOptions: [
|
typeOptions: [
|
||||||
{
|
{
|
||||||
label: "Server",
|
label: 'Server',
|
||||||
value: "Server"
|
value: 'Server',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Database",
|
label: 'Database',
|
||||||
value: "Database"
|
value: 'Database',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "E-MAIL",
|
label: 'E-MAIL',
|
||||||
value: "Email"
|
value: 'Email',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
sourceOptions: [],
|
sourceOptions: [],
|
||||||
operatorOptions: [
|
operatorOptions: [
|
||||||
{
|
{
|
||||||
label: ">",
|
label: '>',
|
||||||
value: ">"
|
value: '>',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "<",
|
label: '<',
|
||||||
value: "<"
|
value: '<',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: ">=",
|
label: '>=',
|
||||||
value: ">="
|
value: '>=',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "<=",
|
label: '<=',
|
||||||
value: "<="
|
value: '<=',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "==",
|
label: '==',
|
||||||
value: "=="
|
value: '==',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
silenceCyclerOptions: [
|
silenceCyclerOptions: [
|
||||||
{
|
{
|
||||||
label: "5 minutes",
|
label: '5 minutes',
|
||||||
value: 300
|
value: 300,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "15 minutes",
|
label: '15 minutes',
|
||||||
value: 900
|
value: 900,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "30 minutes",
|
label: '30 minutes',
|
||||||
value: 1800
|
value: 1800,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "60 minutes",
|
label: '60 minutes',
|
||||||
value: 3600
|
value: 3600,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "3 hours",
|
label: '3 hours',
|
||||||
value: 10800
|
value: 10800,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "6 hours",
|
label: '6 hours',
|
||||||
value: 21600
|
value: 21600,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "12 hours",
|
label: '12 hours',
|
||||||
value: 43200
|
value: 43200,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "24 hours",
|
label: '24 hours',
|
||||||
value: 86400
|
value: 86400,
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
contactGroupOptions: [],
|
contactGroupOptions: [],
|
||||||
rules: {
|
rules: {
|
||||||
sourceType: [
|
sourceType: [{ required: true, message: 'Please select a sourceType', trigger: 'change' }],
|
||||||
{ required: true, message: 'Please select a sourceType', trigger: 'change'},
|
sourceId: [{ required: true, message: 'Please select a source', trigger: 'change' }],
|
||||||
],
|
name: [{ required: true, message: 'Please input alarmRule name' }],
|
||||||
sourceId: [
|
itemId: [{ required: true, message: 'Please select a monitorItem', trigger: 'change' }],
|
||||||
{ required: true, message: 'Please select a source', trigger: 'change'},
|
operator: [{ required: true, message: 'Please select a logicSymbol', trigger: 'change' }],
|
||||||
],
|
threshold: [{ required: true, message: 'Please input threshold' }],
|
||||||
name: [
|
silenceCycle: [{ required: true, message: 'Please select a silenceCycle', trigger: 'change' }],
|
||||||
{ required: true, message: 'Please input alarmRule name'},
|
contactId: [{ required: true, message: 'Please select a contactGroup', trigger: 'change' }],
|
||||||
],
|
},
|
||||||
itemId: [
|
|
||||||
{ required: true, message: 'Please select a monitorItem', trigger: 'change'},
|
|
||||||
],
|
|
||||||
operator: [
|
|
||||||
{ required: true, message: 'Please select a logicSymbol', trigger: 'change'},
|
|
||||||
],
|
|
||||||
threshold: [
|
|
||||||
{ required: true, message: 'Please input threshold'},
|
|
||||||
],
|
|
||||||
silenceCycle: [
|
|
||||||
{ required: true, message: 'Please select a silenceCycle', trigger: 'change'},
|
|
||||||
],
|
|
||||||
contactId: [
|
|
||||||
{ required: true, message: 'Please select a contactGroup', trigger: 'change'},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log(this.currServer);
|
console.log(this.currServer)
|
||||||
this.sourceOptions = this.serverList
|
this.sourceOptions = this.serverList
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -255,7 +229,7 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onCancel() {
|
onCancel() {
|
||||||
this.$emit("onCancel")
|
this.$emit('onCancel')
|
||||||
this.resetForm()
|
this.resetForm()
|
||||||
},
|
},
|
||||||
onItemChange(val, option) {
|
onItemChange(val, option) {
|
||||||
|
@ -266,20 +240,20 @@ export default {
|
||||||
this.$refs.al_ruleForm.validate((valid) => {
|
this.$refs.al_ruleForm.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
let params = {
|
let params = {
|
||||||
silenceCycle:this.form.silenceCycle,
|
silenceCycle: this.form.silenceCycle,
|
||||||
contactId:this.form.contactId,
|
contactId: this.form.contactId,
|
||||||
sourceId:this.form.sourceId,
|
sourceId: this.form.sourceId,
|
||||||
sourceType:this.form.sourceType,
|
sourceType: this.form.sourceType,
|
||||||
itemId:this.form.itemId.key,
|
itemId: this.form.itemId.key,
|
||||||
rule: {
|
rule: {
|
||||||
name: this.form.itemId.label,
|
name: this.form.itemId.label,
|
||||||
operator: this.form.operator,
|
operator: this.form.operator,
|
||||||
threshold: this.form.threshold,
|
threshold: this.form.threshold,
|
||||||
units: this.units,
|
units: this.units,
|
||||||
},
|
},
|
||||||
name: this.form.name
|
name: this.form.name,
|
||||||
}
|
}
|
||||||
this.$emit("onCanonSavecel", params)
|
this.$emit('onCanonSavecel', params)
|
||||||
this.resetForm()
|
this.resetForm()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -289,42 +263,42 @@ export default {
|
||||||
this.units = option.data.props.units
|
this.units = option.data.props.units
|
||||||
},
|
},
|
||||||
getItems(val) {
|
getItems(val) {
|
||||||
getAction("/alarmRule/getItems", {sourceName:val}).then(res => {
|
getAction('/alarmRule/getItems', { sourceName: val }).then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.itemOptions = res.result.map(item => {
|
this.itemOptions = res.result.map((item) => {
|
||||||
return {
|
return {
|
||||||
label: item.name,
|
label: item.name,
|
||||||
value: item.itemId,
|
value: item.itemId,
|
||||||
units:item.units
|
units: item.units,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.$message.warning("This operation fails. Contact your system administrator")
|
this.$message.warning('This operation fails. Contact your system administrator')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
resetForm() {
|
resetForm() {
|
||||||
this.$refs.al_ruleForm.resetFields();
|
this.$refs.al_ruleForm.resetFields()
|
||||||
this.form= {
|
this.form = {
|
||||||
sourceType: undefined,
|
sourceType: undefined,
|
||||||
sourceId: undefined,
|
sourceId: undefined,
|
||||||
name: "",
|
name: '',
|
||||||
itemId: undefined,
|
itemId: undefined,
|
||||||
operator: undefined,
|
operator: undefined,
|
||||||
threshold: "",
|
threshold: '',
|
||||||
silenceCycle: undefined,
|
silenceCycle: undefined,
|
||||||
contactId: undefined,
|
contactId: undefined,
|
||||||
}
|
}
|
||||||
this.sourceOptions =[]
|
this.sourceOptions = []
|
||||||
this.itemOptions = []
|
this.itemOptions = []
|
||||||
this.units = ""
|
this.units = ''
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
/deep/.ant-modal-title{
|
/deep/.ant-modal-title {
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
.operators {
|
.operators {
|
||||||
|
@ -344,7 +318,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ant-select-dropdown-content{
|
.ant-select-dropdown-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #03353f;
|
background: #03353f;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user