zhaohy
5 months ago
11 changed files with 790 additions and 402 deletions
@ -1,5 +1,9 @@ |
|||||
export enum deviceAlarms { |
export enum deviceAlarms { |
||||
getTableList = '/carbon-smart/api/AlarmEquipment/selectAlarmEquipment', //设备告警分页
|
getTableList = '/carbon-smart/api/AlarmEquipment/selectAlarmEquipment', //设备告警分页
|
||||
addOrUpNewData = '/carbon-smart/api/AlarmEquipment/creatOrUpdate', //设备告警添加 修海
|
addOrUpNewData = '/carbon-smart/api/AlarmEquipment/creatOrUpdate', //设备告警添加 修改
|
||||
del = '/carbon-smart/api/AlarmEquipment/delete', //设备告警删除
|
del = '/carbon-smart/api/AlarmEquipment/delete', //设备告警删除
|
||||
|
configGetTableList = '/carbon-smart/api/AlarmEquipmentRule/selectAlarmEquipmentRule', //配置设备告警分页
|
||||
|
configAddOrUpNewData = '/carbon-smart/api/AlarmEquipmentRule/creatOrUpdate', //配置设备告警添加 修改
|
||||
|
configFindById = '/carbon-smart/api/AlarmEquipmentRule/findById', //配置设备告警 查询详情
|
||||
|
configDel = '/carbon-smart/api/AlarmEquipmentRule/delete', //配置设备告警删除
|
||||
} |
} |
||||
|
|||||
@ -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> |
||||
Loading…
Reference in new issue