analysis monitor 模块的规则页面接口联调
This commit is contained in:
parent
1e25c77ca3
commit
1363296e95
|
|
@ -25,20 +25,12 @@
|
|||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col flex="310px">
|
||||
<a-col flex="336px">
|
||||
<span class="item-label">Data Sources</span>
|
||||
<a-select style="width:180px"
|
||||
<DicSelect
|
||||
v-model="queryParams.source"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="1"
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
:options="sourceOptions"
|
||||
@change="onSourceChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
dictCode="alarm_analyse_rule_source"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col flex="265px">
|
||||
<span class="item-label">Nuclide</span>
|
||||
|
|
@ -68,67 +60,69 @@
|
|||
<div class="rules-content">
|
||||
<a-spin :spinning="spinning">
|
||||
<div class="monitor-list">
|
||||
<div class="monitor-list-item">
|
||||
<div class="monitor-list-item" v-for="item in monitorList" :key="item.id">
|
||||
<div class="monitor-list-item-title">
|
||||
<div class="monitor-list-item-title-name">asdfsd</div>
|
||||
<div class="monitor-list-item-title-name">{{ item.name }}</div>
|
||||
<div class="monitor-list-item-title-server">
|
||||
<span style="color: #5b9cba;">Qualifier：</span>
|
||||
<span style="color: #ade6ee;">FULL</span>
|
||||
<span style="color: #ade6ee;">{{ item.spectralQualifier.join("/") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-list-item-content">
|
||||
<div class="monitor-list-item-content-info">
|
||||
<div>
|
||||
Source：
|
||||
<a-row>
|
||||
<a-col :span="5" class="monitor-list-item-content-info-key">Source：</a-col>
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
asdfasdfas
|
||||
{{ item.source.join("/") }}
|
||||
</template>
|
||||
<span>asdfasdfas</span>
|
||||
<a-col :span="17" class="monitor-list-item-content-info-val">
|
||||
{{ item.source.join("/") }}
|
||||
</a-col>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
Stations：
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="5" class="monitor-list-item-content-info-key">Stations：</a-col>
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
asdfasdfas
|
||||
{{ item.stations.join("/") }}
|
||||
</template>
|
||||
<span>asdfasdfas</span>
|
||||
<a-col :span="17" class="monitor-list-item-content-info-val">
|
||||
{{ item.stations.join("/") }}
|
||||
</a-col>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
Nuclides：
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="5" class="monitor-list-item-content-info-key">Nuclides：</a-col>
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
asdfasdfas
|
||||
{{ item.nuclides.join("/") }}
|
||||
</template>
|
||||
<span>asdfasdfas</span>
|
||||
<a-col :span="17" class="monitor-list-item-content-info-val">
|
||||
{{ item.nuclides.join("/") }}
|
||||
</a-col>
|
||||
</a-tooltip>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[1==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
|
||||
{{ 1==1?"Enable":"Disabled" }}
|
||||
</div>
|
||||
<!-- <div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
|
||||
<div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
|
||||
{{ item.enabled==1?"Enable":"Disabled" }}
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-list-item-footer">
|
||||
<div class="monitor-list-item-footer-group">
|
||||
<span style="color: #5b9cba;">Alarm Contact Group：</span>
|
||||
<span style="color: #ade6ee;">sadfasdfa</span>
|
||||
<span style="color: #ade6ee;">{{ item.groupName }}</span>
|
||||
</div>
|
||||
<div class="monitor-list-item-footer-actions">
|
||||
<span title="Edit" class="actions-edit" @click="editItem()"></span>
|
||||
<span title="Delete" class="actions-delete" @click="deleteItem()"></span>
|
||||
<span v-if="1==1" title="Enable" class="actions-enable" @click="changeItemStatus()">
|
||||
<span title="Edit" class="actions-edit" @click="editItem(item.id)"></span>
|
||||
<span title="Delete" class="actions-delete" @click="deleteItem(item.id)"></span>
|
||||
<span v-if="1==1" title="Enable" class="actions-enable" @click="changeItemStatus(item.id,item.enabled)">
|
||||
</span>
|
||||
<span v-if="1==0" title="Disabled" class="actions-disable" @click="changeItemStatus()">
|
||||
<span v-if="1==0" title="Disabled" class="actions-disable" @click="changeItemStatus(item.id,item.enabled)">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <j-multi-select-tag type="checkbox" dictCode="spectral_qualifier" /> -->
|
||||
</div>
|
||||
</a-spin>
|
||||
<a-pagination
|
||||
|
|
@ -147,7 +141,7 @@
|
|||
</div>
|
||||
<a-modal
|
||||
:title="isAdd ? 'Add Rule' : 'Edit Rule'"
|
||||
:width="845"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
|
|
@ -168,8 +162,8 @@
|
|||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="Analyse Source">
|
||||
<j-multi-select-tag
|
||||
<a-form-item label="Source">
|
||||
<dic-select
|
||||
type="checkbox"
|
||||
dictCode="alarm_analyse_rule_source"
|
||||
v-decorator="[
|
||||
|
|
@ -183,6 +177,7 @@
|
|||
</a-form-item>
|
||||
<a-form-item label="Station">
|
||||
<a-select
|
||||
class="form-select"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:filter-option="filterOption"
|
||||
|
|
@ -201,6 +196,7 @@
|
|||
</a-form-item>
|
||||
<a-form-item label="Nuclide">
|
||||
<a-select
|
||||
class="form-select"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="5"
|
||||
|
|
@ -218,8 +214,8 @@
|
|||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Spectral Qualifier">
|
||||
<j-multi-select-tag
|
||||
<a-form-item label="Qualifier">
|
||||
<dic-select
|
||||
type="checkbox"
|
||||
dictCode="spectral_qualifier"
|
||||
v-decorator="[
|
||||
|
|
@ -232,7 +228,10 @@
|
|||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Condition">
|
||||
<a-checkbox-group
|
||||
<dic-select
|
||||
type="checkbox"
|
||||
layout="vertical"
|
||||
dictCode="alarm_analyse_rule_condition"
|
||||
v-decorator="[
|
||||
'condition',
|
||||
{
|
||||
|
|
@ -241,10 +240,25 @@
|
|||
}
|
||||
]"
|
||||
>
|
||||
<a-row v-for="(item, key) in dictOptions" :key="key" >
|
||||
<a-checkbox :value="item.value">{{ item.text || item.label }}</a-checkbox>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</dic-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Contact Group">
|
||||
<a-select
|
||||
class="form-select"
|
||||
:options="contactGroupOptions"
|
||||
show-arrow
|
||||
allowClear
|
||||
placeholder="select..."
|
||||
v-decorator="[
|
||||
'contactGroup',
|
||||
{
|
||||
rules: [{ required: true }],
|
||||
initialVale: this.formVal.contactGroup
|
||||
}
|
||||
]"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Remark">
|
||||
<a-input
|
||||
|
|
@ -271,7 +285,11 @@
|
|||
<script>
|
||||
import { ajaxGetDictItems } from '@/api/api'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
import DicSelect from '../../components/dicSelect.vue';
|
||||
export default {
|
||||
components: {
|
||||
DicSelect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isAdd: true,
|
||||
|
|
@ -280,7 +298,7 @@ export default {
|
|||
queryParams: {
|
||||
station: undefined,
|
||||
source: undefined,
|
||||
buclide: undefined
|
||||
nuclide: undefined
|
||||
},
|
||||
sourceOptions: [
|
||||
{
|
||||
|
|
@ -307,9 +325,9 @@ export default {
|
|||
total: 0
|
||||
},
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
wrapperCol: { span: 18 },
|
||||
form: this.$form.createForm(this),
|
||||
dictOptions: [],
|
||||
contactGroupOptions: [],
|
||||
formVal: {
|
||||
name: "",
|
||||
source: [],
|
||||
|
|
@ -317,13 +335,17 @@ export default {
|
|||
nuclide: [],
|
||||
qualifier: [],
|
||||
condition: [],
|
||||
contactGroup: undefined,
|
||||
desc: ""
|
||||
}
|
||||
},
|
||||
monitorList: [],
|
||||
currId:"",
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getCondition();
|
||||
this.getStationList();
|
||||
this.getAlarmGroup();
|
||||
this.getAlarmRulesPage()
|
||||
},
|
||||
methods: {
|
||||
getStationList() {
|
||||
|
|
@ -354,44 +376,125 @@ export default {
|
|||
);
|
||||
},
|
||||
onStationChange(val) {
|
||||
console.log(val);
|
||||
this.queryParams.station = val
|
||||
},
|
||||
onSourceChange(val) {
|
||||
console.log(val);
|
||||
this.queryParams.source = val
|
||||
},
|
||||
onNuclideChange(val) {
|
||||
console.log(val);
|
||||
this.queryParams.nuclide = val
|
||||
},
|
||||
getAlarmRulesPage() {
|
||||
this.spinning = true
|
||||
let params = {
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
// stations: this.queryParams.station,
|
||||
// source: this.queryParams.source,
|
||||
source: [1,2],
|
||||
stations: [101,102],
|
||||
}
|
||||
getAction("/alarmAnalysisRule/findPage", params).then(res => {
|
||||
this.spinning = false
|
||||
if (res.success) {
|
||||
this.monitorList = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
// this.getAlarmRulesPage()
|
||||
this.getAlarmRulesPage()
|
||||
},
|
||||
editItem(id) {
|
||||
this.currId = id
|
||||
},
|
||||
deleteItem(id) {
|
||||
let _this = this
|
||||
this.$confirm({
|
||||
title: 'Are you sure to delete this item?',
|
||||
onOk() {
|
||||
deleteAction("/alarmAnalysisRule/delete", {id:id}).then(res => {
|
||||
if (res.success) {
|
||||
_this.$message.success("success")
|
||||
_this.getAlarmRulesPage()
|
||||
} else {
|
||||
_this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
},
|
||||
editItem(id) { },
|
||||
deleteItem(id) { },
|
||||
changeItemStatus(id, isEnabled) { },
|
||||
handlePageChange(page, pageSize) {
|
||||
this.ipagination.current = page
|
||||
this.ipagination.pageSize = pageSize
|
||||
// this.getAlarmRulesPage()
|
||||
this.getAlarmRulesPage()
|
||||
},
|
||||
handleSizeChange(current, size) {
|
||||
this.ipagination.current = current
|
||||
this.ipagination.pageSize = size
|
||||
// this.getAlarmRulesPage()
|
||||
this.getAlarmRulesPage()
|
||||
},
|
||||
getCondition() {
|
||||
//根据字典Code, 初始化字典数组
|
||||
ajaxGetDictItems("alarm_analyse_rule_condition", null).then((res) => {
|
||||
getAlarmGroup() {
|
||||
let params = {
|
||||
pageNo: 1,
|
||||
pageSize: 9999
|
||||
}
|
||||
getAction("/alarmContactGroup/findPage", params).then(res => {
|
||||
if (res.success) {
|
||||
this.dictOptions = res.result;
|
||||
this.contactGroupOptions = res.result.records.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onSave() {
|
||||
this.form.validateFields((err, values) => {
|
||||
console.log('Received values of form: ', values);
|
||||
if (!err) {
|
||||
this.visible = false
|
||||
// if (!err) {
|
||||
let params = {
|
||||
conditions:values.condition,
|
||||
name:values.name,
|
||||
remark:values.remark,
|
||||
stations:values.station.join(","),
|
||||
source: values.source,
|
||||
enabled: 1,
|
||||
// nuclides:values.nuclide.join(","),
|
||||
nuclides:"A406,Bu12",
|
||||
contactGroup:values.contactGroup,
|
||||
spectralQualifier: values.qualifier,
|
||||
}
|
||||
if (this.isAdd) {
|
||||
postAction("/alarmAnalysisRule/add", params).then(res => {
|
||||
if (res.success) {
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.getAlarmRulesPage()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
} else {
|
||||
httpAction("/alarmAnalysisRule/edit", {...params,id: this.currId}, "put").then(res => {
|
||||
if (res.success) {
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.getAlarmRulesPage()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
}
|
||||
// }
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
|
|
@ -406,6 +509,12 @@ export default {
|
|||
.ant-row-flex{
|
||||
flex-flow: nowrap;
|
||||
}
|
||||
.ant-select{
|
||||
width: 206px;
|
||||
}
|
||||
.form-select{
|
||||
width: 100%;
|
||||
}
|
||||
.operators {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
|
@ -508,9 +617,17 @@ export default {
|
|||
font-family: ArialMT;
|
||||
font-size: 16px;
|
||||
color: #ade6ee;
|
||||
// span{
|
||||
// display: block;
|
||||
// }
|
||||
&-key{
|
||||
// display: inline-block;
|
||||
// width: 120px;
|
||||
// vertical-align: middle;
|
||||
}
|
||||
&-val{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
&-btn{
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
141
src/views/abnormalAlarm/components/dicSelect.vue
Normal file
141
src/views/abnormalAlarm/components/dicSelect.vue
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<a-checkbox-group v-if="tagType=='checkbox'" @change="onChange" :value="arrayValue" :disabled="disabled">
|
||||
<template v-if="layout=='vertical'">
|
||||
<a-row v-for="(item, key) in dictOptions" :key="key" >
|
||||
<a-checkbox :value="item.value">{{ item.text || item.label }}</a-checkbox>
|
||||
</a-row>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text || item.label }}</a-checkbox>
|
||||
</template>
|
||||
</a-checkbox-group>
|
||||
|
||||
<a-select
|
||||
v-else-if="tagType=='select'"
|
||||
:value="arrayValue"
|
||||
@change="onChange"
|
||||
:disabled="disabled"
|
||||
mode="multiple"
|
||||
:maxTagCount="1"
|
||||
:placeholder="placeholder"
|
||||
:getPopupContainer="getParentContainer"
|
||||
optionFilterProp="children"
|
||||
:filterOption="filterOption"
|
||||
allowClear>
|
||||
<a-select-option
|
||||
v-for="(item,index) in dictOptions"
|
||||
:key="index"
|
||||
:value="item.value">
|
||||
<span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
|
||||
{{ item.text || item.label }}
|
||||
</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
|
||||
export default {
|
||||
name: 'JMultiSelectTag',
|
||||
props: {
|
||||
layout: String,
|
||||
dictCode: String,
|
||||
placeholder: String,
|
||||
disabled: Boolean,
|
||||
value: String,
|
||||
type: String,
|
||||
options:Array,
|
||||
spliter:{
|
||||
type: String,
|
||||
required: false,
|
||||
default: ','
|
||||
},
|
||||
popContainer:{
|
||||
type:String,
|
||||
default:'',
|
||||
required:false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dictOptions: [],
|
||||
tagType:"",
|
||||
arrayValue:!this.value?[]:this.value.split(this.spliter)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(!this.type || this.type==="list_multi"){
|
||||
this.tagType = "select"
|
||||
}else{
|
||||
this.tagType = this.type
|
||||
}
|
||||
//获取字典数据
|
||||
//this.initDictData();
|
||||
},
|
||||
watch:{
|
||||
options: function(val){
|
||||
this.setCurrentDictOptions(val);
|
||||
},
|
||||
dictCode:{
|
||||
immediate:true,
|
||||
handler() {
|
||||
this.initDictData()
|
||||
},
|
||||
},
|
||||
value (val) {
|
||||
if(!val){
|
||||
this.arrayValue = []
|
||||
}else{
|
||||
this.arrayValue = this.value.split(this.spliter)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initDictData() {
|
||||
if(this.options && this.options.length>0){
|
||||
this.dictOptions = [...this.options]
|
||||
}else{
|
||||
//优先从缓存中读取字典配置
|
||||
let cacheOption = getDictItemsFromCache(this.dictCode)
|
||||
if(cacheOption && cacheOption.length>0){
|
||||
this.dictOptions = cacheOption
|
||||
return
|
||||
}
|
||||
//根据字典Code, 初始化字典数组
|
||||
ajaxGetDictItems(this.dictCode, null).then((res) => {
|
||||
if (res.success) {
|
||||
this.dictOptions = res.result;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
onChange (selectedValue) {
|
||||
this.$emit('change', selectedValue.join(this.spliter));
|
||||
},
|
||||
setCurrentDictOptions(dictOptions){
|
||||
this.dictOptions = dictOptions
|
||||
},
|
||||
getCurrentDictOptions(){
|
||||
return this.dictOptions
|
||||
},
|
||||
getParentContainer(node){
|
||||
if(!this.popContainer){
|
||||
return node.parentNode
|
||||
}else{
|
||||
return document.querySelector(this.popContainer)
|
||||
}
|
||||
},
|
||||
// update--begin--autor:lvdandan-----date:20201120------for：LOWCOD-1086 下拉多选框,搜索时只字典code进行搜索不能通过字典text搜索
|
||||
filterOption(input, option) {
|
||||
return option.componentOptions.children[0].children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
// update--end--autor:lvdandan-----date:20201120------for：LOWCOD-1086 下拉多选框,搜索时只字典code进行搜索不能通过字典text搜索
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user