add:配置设备告警对接接口 对接告警配置 里面的数据来源 设备节点
This commit is contained in:
zhaohy
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<ns-drawer
|
||||
v-model:visible="visible"
|
||||
width="520"
|
||||
:title="' '"
|
||||
:ok="btnClick"
|
||||
:cancel="handleClose"
|
||||
placement="right"
|
||||
:footer-style="{ textAlign: 'right' }"
|
||||
@close="handleClose">
|
||||
<div style="padding: 18px; width: 100%; overflow: hidden">
|
||||
<a-form ref="formRef" :model="infoObject" :rules="rules">
|
||||
<a-form-item ref="notification" label="通知方式" name="notification">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="infoObject.notification"
|
||||
style="width: 100%"
|
||||
mode="multiple"
|
||||
:options="devicePointData"
|
||||
show-search
|
||||
:allowClear="true"
|
||||
placeholder="请选择通知方式"
|
||||
:filter-option="filterDevicePoint" />
|
||||
</a-form-item>
|
||||
<a-form-item label="启用规则" name="enableRules">
|
||||
<a-switch
|
||||
:checked="infoObject.enableRules === 1 ? true : false"
|
||||
:class="{
|
||||
'blue-background': infoObject.enableRules === 1 ? true : false,
|
||||
'grey-background': infoObject.enableRules === 1 ? false : true,
|
||||
}"
|
||||
@click="clickSwitch" />
|
||||
</a-form-item>
|
||||
<a-form-item label="通知用户" name="user">
|
||||
<a-cascader
|
||||
v-model:value="infoObject.user"
|
||||
style="width: 100%"
|
||||
multiple
|
||||
:max-tag-count="1"
|
||||
:options="options"
|
||||
:load-data="loadData"
|
||||
placeholder="请选择通知用户"
|
||||
:show-checked-strategy="Cascader.SHOW_CHILD" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-table :dataSource="dataSource" :columns="columns" :pagination="false" />
|
||||
</div>
|
||||
</ns-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { Cascader } from 'ant-design-vue';
|
||||
|
||||
import { NsMessage } from '/nerv-lib/component';
|
||||
import { http } from '/nerv-lib/util';
|
||||
|
||||
// import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
|
||||
|
||||
//table 数据
|
||||
const columns = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'address',
|
||||
customRender: (text: any) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '通知名单',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
];
|
||||
const dataSource = [
|
||||
{
|
||||
name: '运维>运维1部>张三',
|
||||
},
|
||||
{
|
||||
name: '运维>运维1部>李四',
|
||||
},
|
||||
];
|
||||
const visible = ref(false);
|
||||
//表单数据
|
||||
const infoObject = ref({
|
||||
enableRules: 0,
|
||||
});
|
||||
//设备点位搜索
|
||||
const filterDevicePoint = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
//开关
|
||||
const clickSwitch = () => {
|
||||
if (infoObject.value.enableRules === 1) {
|
||||
infoObject.value.enableRules = 0;
|
||||
} else {
|
||||
infoObject.value.enableRules = 1;
|
||||
}
|
||||
};
|
||||
// 通知信息
|
||||
const devicePointData = ref([
|
||||
{ label: '站内信息', value: 1 },
|
||||
{ label: '邮件', value: 2 },
|
||||
]);
|
||||
//通知用户
|
||||
const options = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: 'Zhejiang',
|
||||
isLeaf: false,
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'Jiangsu',
|
||||
isLeaf: false,
|
||||
},
|
||||
]);
|
||||
//加载用户
|
||||
const loadData = (selectedOptions: any) => {
|
||||
const targetOption = selectedOptions[selectedOptions.length - 1];
|
||||
targetOption.loading = true;
|
||||
// load options lazily
|
||||
setTimeout(() => {
|
||||
targetOption.loading = false;
|
||||
console.log(targetOption, '数据');
|
||||
targetOption.children = [
|
||||
{
|
||||
label: `${targetOption.label} Dynamic 1`,
|
||||
value: 3,
|
||||
isLeaf: false,
|
||||
},
|
||||
{
|
||||
label: `${targetOption.label} Dynamic 2`,
|
||||
value: 4,
|
||||
isLeaf: false,
|
||||
},
|
||||
];
|
||||
options.value = [...options.value];
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const rules = {
|
||||
notification: [{ required: true, message: '请选择站点', trigger: 'change' }],
|
||||
enableRules: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
|
||||
user: [{ required: true, message: '请选择通知人', trigger: 'change' }],
|
||||
abnormalDescription: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入异常描述',
|
||||
trigger: 'blur',
|
||||
validator: (rules: any, abnormalDescription: any, cbfn: any) => {
|
||||
if (abnormalDescription.trim() !== '') {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('告警标题不能为空');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
|
||||
number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
|
||||
};
|
||||
const formRef = ref();
|
||||
const emit = defineEmits(['editObject']);
|
||||
const toggle = (value: any) => {
|
||||
//判断 是新增 还是修改
|
||||
if (value) {
|
||||
// infoObject.value = value;
|
||||
infoObject.value = {};
|
||||
} else {
|
||||
infoObject.value = {
|
||||
enableRules: 0,
|
||||
};
|
||||
}
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
|
||||
const btnClick = () => {
|
||||
console.log(infoObject.value);
|
||||
//表单校验
|
||||
formRef.value.validate().then(() => {
|
||||
//调用接口
|
||||
// http.post(deviceAlarms.addOrUpNewData, infoObject.value).then(() => {
|
||||
// NsMessage.success('操作成功');
|
||||
// visible.value = false;
|
||||
// emit('editObject', null);
|
||||
// });
|
||||
});
|
||||
};
|
||||
const handleClose = () => {
|
||||
// 清楚校验错误信息
|
||||
formRef.value.resetFields();
|
||||
visible.value = false;
|
||||
options.value = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
isLeaf: false,
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
isLeaf: false,
|
||||
},
|
||||
];
|
||||
};
|
||||
defineExpose({
|
||||
toggle,
|
||||
handleClose,
|
||||
formRef,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.drawerContainer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.blue-background.ant-switch-checked {
|
||||
background-color: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.grey-background.ant-switch {
|
||||
background-color: grey !important;
|
||||
}
|
||||
|
||||
.blue-background.ant-switch-checked .ant-switch-handle {
|
||||
background-color: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.grey-background.ant-switch .ant-switch-handle {
|
||||
background-color: grey !important;
|
||||
}
|
||||
/deep/ .ant-form-item-label {
|
||||
z-index: 20;
|
||||
text-align: right;
|
||||
width: 23%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user