|
|
|
@ -2,11 +2,11 @@ |
|
|
|
<ns-drawer |
|
|
|
v-model:visible="visible" |
|
|
|
width="520" |
|
|
|
:title="infoObject?.id ? '编辑' : '新增'" |
|
|
|
:title="infoObject?.id ? '编辑告警规则' : '新增告警规则'" |
|
|
|
:ok="btnClick" |
|
|
|
:cancel="handleClose" |
|
|
|
placement="right"> |
|
|
|
<div style="padding: 18px"> |
|
|
|
<div style="padding: 18px; width: 100%; overflow: hidden"> |
|
|
|
<a-form ref="formRef" :model="infoObject" :rules="rules"> |
|
|
|
<a-form-item ref="name" label="站点" name="name"> |
|
|
|
<a-tree-select |
|
|
|
@ -72,12 +72,6 @@ |
|
|
|
:filter-option="filterOption" |
|
|
|
@change="handleQzChange" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="规则类型" name="resource"> |
|
|
|
<a-radio-group v-model:value="infoObject.resource"> |
|
|
|
<a-radio value="1">且(and)</a-radio> |
|
|
|
<a-radio value="2">或(or)</a-radio> |
|
|
|
</a-radio-group> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="异常描述" name="desc"> |
|
|
|
<a-textarea |
|
|
|
v-model:value="infoObject.desc" |
|
|
|
@ -86,17 +80,44 @@ |
|
|
|
show-count |
|
|
|
:maxlength="30" /> |
|
|
|
</a-form-item> |
|
|
|
<template v-for="index in infoObject.alarmList?.length" :key="index"> |
|
|
|
<a-form-item :label="`逻辑${index}`" name="alarm"> |
|
|
|
<a-input style="width: 60px" v-model:value="infoObject.alarmList[index - 1].alarm" /> |
|
|
|
<a-form-item label="规则类型" name="resource"> |
|
|
|
<a-radio-group v-model:value="infoObject.resource"> |
|
|
|
<a-radio value="1">且 (and) </a-radio> |
|
|
|
<a-radio value="2">或 (or) </a-radio> |
|
|
|
</a-radio-group> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item :label="`数值${index}`" name="number"> |
|
|
|
<template v-for="index in infoObject.alarmList?.length" :key="index"> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
margin-left: 42px; |
|
|
|
padding: 12px; |
|
|
|
border-color: #ff4d4f !important; |
|
|
|
"> |
|
|
|
<span style="line-height: 32px">{{ `逻辑${index}:` }}</span> |
|
|
|
<a-select |
|
|
|
v-model:value="infoObject.alarmList[index - 1].alarm" |
|
|
|
style="width: 70px; margin-left: 12px" |
|
|
|
:options="ljOptions" |
|
|
|
@change="handleQzChange" /> |
|
|
|
<span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span> |
|
|
|
<a-input |
|
|
|
style="width: 60px" |
|
|
|
style="width: 65px; margin-left: 6px" |
|
|
|
type="number" |
|
|
|
v-model:value="infoObject.alarmList[index - 1].number" /> |
|
|
|
</a-form-item> |
|
|
|
<div |
|
|
|
style="width: 70px; align-items: center; cursor: pointer" |
|
|
|
@click="deleteAlarmList(index - 1)"> |
|
|
|
<img |
|
|
|
style="width: 14px; margin: 0 12px" |
|
|
|
src="https://files.axshare.com/gsc/4T0UQR/5a/e6/81/5ae6813d499c422383c7a15dd956523f/images/设备规则/u72.svg?pageId=cbce6e61-bc6a-4283-802d-993fce6151c0" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<div style="width: 100%; margin-top: 12px; display: flex; justify-content: flex-end"> |
|
|
|
<a-button type="primary" @click="addAlarmList"> 新增</a-button> |
|
|
|
</div> |
|
|
|
</a-form> |
|
|
|
</div> |
|
|
|
</ns-drawer> |
|
|
|
@ -120,6 +141,8 @@ |
|
|
|
delivery: null, |
|
|
|
alarmList: [{ alarm: null, number: null }], |
|
|
|
}); |
|
|
|
//删除的逻辑列表 |
|
|
|
const delAlarmList = ref([]); |
|
|
|
const formRef = ref(); |
|
|
|
//站点数 |
|
|
|
const zdTreeData = ref<TreeSelectProps['treeData']>([ |
|
|
|
@ -193,6 +216,14 @@ |
|
|
|
{ value: '实时值', label: '实时值', code: '1' }, |
|
|
|
{ value: '平均值', label: '平均值', code: '2' }, |
|
|
|
]); |
|
|
|
//逻辑 |
|
|
|
const ljOptions = ref<SelectProps['options']>([ |
|
|
|
{ value: '1', label: '≥' }, |
|
|
|
{ value: '2', label: '>' }, |
|
|
|
{ value: '3', label: '≤' }, |
|
|
|
{ value: '4', label: '<' }, |
|
|
|
{ value: '5', label: '=' }, |
|
|
|
]); |
|
|
|
//设备点位方法 |
|
|
|
const filterOption = (input: string, option: any) => { |
|
|
|
console.log('搜索', option.value); |
|
|
|
@ -264,6 +295,7 @@ |
|
|
|
//数据是否验证通过 |
|
|
|
formRef.value.validate().then(() => { |
|
|
|
console.log('values', infoObject, toRaw(infoObject)); |
|
|
|
delAlarmList.value = []; |
|
|
|
}); |
|
|
|
//调用接口 |
|
|
|
// http |
|
|
|
@ -293,8 +325,24 @@ |
|
|
|
alarmList: [{ alarm: null, number: null }], |
|
|
|
}; |
|
|
|
visible.value = false; |
|
|
|
delAlarmList.value = []; |
|
|
|
NsMessage.success('操作成功'); |
|
|
|
}; |
|
|
|
// 新增逻辑列表 |
|
|
|
const addAlarmList = () => { |
|
|
|
if (infoObject.value.alarmList) { |
|
|
|
infoObject.value.alarmList.push({ alarm: null, number: null }); |
|
|
|
} else { |
|
|
|
infoObject.value.alarmList = [{ alarm: null, number: null }]; |
|
|
|
} |
|
|
|
}; |
|
|
|
// 删除 逻辑列表、 |
|
|
|
const deleteAlarmList = (index: number) => { |
|
|
|
if (infoObject.value.alarmList[index]?.id) { |
|
|
|
delAlarmList.value.push(infoObject.value.alarmList[index]); |
|
|
|
} |
|
|
|
infoObject.value.alarmList.splice(index, 1); |
|
|
|
}; |
|
|
|
defineExpose({ |
|
|
|
toggle, |
|
|
|
handleClose, |
|
|
|
@ -334,6 +382,6 @@ |
|
|
|
/deep/ .ant-form-item-label { |
|
|
|
z-index: 20; |
|
|
|
text-align: right; |
|
|
|
width: 20%; |
|
|
|
width: 23%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhaohy
5 months ago