xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix:配置设备告警 联系方式

Browse Source
This commit is contained in:
zhaohy
2024-07-15 16:00:08 +08:00
parent 4526da936e
commit 098b4f29fd
10 changed files with 613 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
hx-ai-intelligent/src/api/alarmSettings/energyAlarm.ts
View File

@@ -2,8 +2,8 @@ export enum energyAlarms {
getTableList = '/carbon-smart/api/AlarmEnergyConsumption/selectAlarmEnergyConsumption', //能耗告警分页
addOrUpNewData = '/carbon-smart/api/AlarmEnergyConsumption/creatOrUpdate', //能耗告警添加 修改
del = '/carbon-smart/api/AlarmEnergyConsumption/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', //配置设备告警删除
configGetTableList = '/carbon-smart/api/AlarmEnergyConsumptionRule/selectAlarmEnergyConsumptionRule', //配置设备告警分页
configAddOrUpNewData = '/carbon-smart/api/AlarmEnergyConsumptionRule/creatOrUpdate', //配置设备告警添加 修改
configFindById = '/carbon-smart/api/AlarmEnergyConsumptionRule/findById', //配置设备告警 查询详情
configDel = '/carbon-smart/api/AlarmEnergyConsumptionRule/delete', //配置设备告警删除
}

109
hx-ai-intelligent/src/view/alarmManagement/alarmOverview/index.vue
View File

@@ -30,7 +30,9 @@
style="flex: 1; height: 100%; background-color: white; border-radius: 4px; padding: 12px">
<div ref="echartPieOne" style="width: 100%; height: 100%"></div>
</div>
<div style="flex: 1; height: 100%; background-color: white; border-radius: 4px"> xxxx </div>
<div style="flex: 1; height: 100%; background-color: white; border-radius: 4px">
<div ref="echartPieTow" style="width: 100%; height: 100%"></div>
</div>
</div>
<!-- 告警矩形 echarts -->
<div style="flex: 4; width: 100%; background-color: white; border-radius: 4px; padding: 12px">
@@ -49,8 +51,10 @@
const info = ref({});
let chartInstance: echarts.ECharts | null = null;
let chartInstanceOne: echarts.ECharts | null = null;
let chartInstanceTow: echarts.ECharts | null = null;
const graphChart = ref(null);
const echartPieOne = ref(null);
const echartPieTow = ref(null);
const getGraphChart = () => {
let dayData = [];
let energyAlarm = [];
@@ -294,7 +298,7 @@
},
textAlign: 'center',
x: '44.3%',
y: '46%',
y: '43%',
},
],
tooltip: {
@@ -327,9 +331,10 @@
clockwise: false, //饼图的扇区是否是顺时针排布
avoidLabelOverlap: false,
label: {
show: true,
normal: {
show: true,
position: 'outter',
position: 'outside',
textStyle: {
fontSize: 14,
fontWeight: 'bold',
@@ -342,7 +347,7 @@
labelLine: {
show: true, // 控制标签线是否显示
length: 10, // 标签线长度
length2: 20, // 标签线引出部分长度
length2: 0, // 标签线引出部分长度
// 其他样式属性，如 lineStyle 等
},
data: m2R2Data,
@@ -352,11 +357,107 @@
chartInstanceOne = echarts.init(echartPieOne.value);
chartInstanceOne.setOption(option);
};
const getEchartPieTow = () => {
if (chartInstanceTow) {
chartInstanceTow.dispose();
}
chartInstanceTow = echarts.init(echartPieTow.value);
var m2R2Data = [
{ value: 335, name: '紧急', itemStyle: { color: '#F56E53' } },
{ value: 310, name: '重要', itemStyle: { color: '#F7C122' } },
{ value: 234, name: '一般', itemStyle: { color: '#3BC27F' } },
];
const option = {
title: [
{
text: '优先级 / 近30天',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
color: '#aaaaaa',
},
left: '2%',
top: '2%',
},
{
text: '优先级',
subtext: 12312 + '个',
textStyle: {
fontSize: 24,
color: 'black',
},
subtextStyle: {
fontSize: 24,
fontWeight: '700',
color: 'black',
},
textAlign: 'center',
x: '44.3%',
y: '43%',
},
],
tooltip: {
trigger: 'item',
formatter: function (parms) {
var str = parms.marker + ' :' + parms.data.value;
return str;
},
},
legend: {
// 设置图例靠右，上下居中，垂直排列
right: 50,
top: 'center',
orient: 'vertical',
// 图例图标设置为圆形
icon: 'circle',
itemWidth: 12,
itemHeight: 12,
itemGap: 16,
textStyle: {
fontSize: 14,
},
},
series: [
{
name: '优先级',
type: 'pie',
center: ['45%', '50%'],
radius: ['50%', '70%'],
clockwise: false, //饼图的扇区是否是顺时针排布
avoidLabelOverlap: false,
label: {
show: true,
normal: {
show: true,
position: 'outside',
textStyle: {
fontSize: 14,
fontWeight: 'bold',
},
formatter: function (parms) {
return '[ ' + parms.data.name + ' ] : ' + parms.data.value;
},
},
},
labelLine: {
show: true, // 控制标签线是否显示
length: 10, // 标签线长度
length2: 0, // 标签线引出部分长度
// 其他样式属性，如 lineStyle 等
},
data: m2R2Data,
},
],
};
chartInstanceTow = echarts.init(echartPieTow.value);
chartInstanceTow.setOption(option);
};
onMounted(() => {
//渲染第三个图表
getGraphChart();
//优先级
getEchartPieOne();
getEchartPieTow();
});
</script>
<style lang="less" scoped>

175
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/configureEnergyAlarms.vue
View File

@@ -11,27 +11,23 @@
}"
@click="clickSwitch({ enableRules: record.enableRules, record: record })" />
</template>
<template v-if="column.dataIndex === 'equipmentInfo'">
{{
record?.enableRules
? record.enableRules + '>' + record.deviceType + '>' + record.deviceName
: '-'
}}
<template v-if="column.dataIndex === 'comparisonType'">
{{ getcomparisonType(record) }}
</template>
</template>
</ns-view-list-table>
<!-- 新增or编辑界面 -->
<editConfigureEnergyAlarm ref="editConfigureEnergyAlarms" />
<editConfigureEnergyAlarm ref="editConfigureEnergyAlarms" @editObject="editObject" />
</template>
<script lang="ts">
import { ref, createVNode } from 'vue';
import { http } from '/nerv-lib/util';
import data from '../notificationManagementMock.json';
import { NsMessage, NsModal } from '/nerv-lib/component';
import editConfigureEnergyAlarm from './editConfigureEnergyAlarm.vue';
import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
import { energyAlarms } from '/@/api/alarmSettings/energyAlarm';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { device } from '/@/api/deviceManage';
import { dict } from '/@/api';
export default {
components: { editConfigureEnergyAlarm },
@@ -43,11 +39,37 @@
const tableConfig = ref({});
const mainRef = ref({});
const editConfigureEnergyAlarms = ref({});
const mockData = ref(data.listData);
//组织树
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
//获取对比类型
const getcomparisonType = (data: any) => {
let datas = data.comparisonType.split(',');
if (datas[0] === '1') {
switch (datas[1]) {
case '1':
return '数值>输入数值';
case '2':
return '数值>同比';
case '3':
return '数值>环比';
case '4':
return '数值>对比基准';
}
} else {
switch (datas[1]) {
case '1':
return '比例>输入比例';
case '2':
return '比例>同比';
case '3':
return '比例>环比';
case '4':
return '比例>对比基准';
}
}
};
const clickSwitch = (data: any) => {
NsModal.confirm({
title: '启用状态',
@@ -55,7 +77,7 @@
content: '确定' + (data.record.enableRules === 1 ? '关闭' : '启用') + '规则吗?',
onOk: () => {
http
.post(deviceAlarms.addOrUpNewData, {
.post(energyAlarms.configAddOrUpNewData, {
id: data.record.id,
enableRules: data.record.enableRules === 1 ? 0 : 1,
})
@@ -80,8 +102,7 @@
show.value = true;
tableConfig.value = {
title: '告警规则',
api: deviceAlarms.getTableList,
value: mockData.value,
api: energyAlarms.configGetTableList,
headerActions: [
{
label: '新增',
@@ -120,14 +141,24 @@
label: '批量删除',
type: 'primary',
name: 'userBatchDel',
confirm: true,
dynamicDisabled: (data: any) => {
return data.list.length === 0;
},
confirm: true,
isReload: true,
isClearCheck: true,
// api: origanizemanage.batchDel,
dynamicParams: { userIds: 'userId[]' },
handle: (data: any) => {
let ids = [];
data.list.forEach((item) => {
ids.push(item.id);
});
data.list = [];
http.post(energyAlarms.configDel, { ids: ids.toString() }).then(() => {
NsMessage.success('告警规则删除成功');
//清空选中
mainRef.value.nsTableRef.clearCheck();
//刷新表单
mainRef.value?.nsTableRef.reload();
});
},
},
],
columns: [
@@ -144,7 +175,7 @@
},
{
title: '设备信息/节点信息',
dataIndex: 'equipmentInfo',
dataIndex: 'deviceInfo',
},
{
title: '对比类型',
@@ -152,11 +183,11 @@
},
{
title: '告警点位',
dataIndex: 'devicePoint',
dataIndex: 'devicePointName',
},
{
title: '判断条件',
dataIndex: 'ruleType',
dataIndex: 'conditionalJudgment',
},
{
title: '异常描述',
@@ -185,8 +216,12 @@
name: 'FeedBackDetail',
dynamicParams: ['uuid', 'appealType'],
confirm: true,
handle: () => {
// mockData.value.splice(0, 1);
handle: (data: any) => {
http.post(energyAlarms.configDel, { ids: data.id }).then(() => {
NsMessage.success('告警规则删除成功');
//刷新表单
mainRef.value?.nsTableRef.reload();
});
},
},
],
@@ -194,78 +229,106 @@
formConfig: {
title: value.errorCode,
schemas: [
// {
// field: 'deviceNode',
// label: '设备名称',
// component: 'nsSelectApi',
// componentProps: {
// api: device.queryDevicePage,
// allowClear: true,
// params: {
// orgId: orgId.value,
// pageNum: 1,
// pageSize: 99,
// },
// placeholder: '请选择设备名称',
// resultField: 'data.records',
// labelField: 'deviceName',
// valueField: 'id',
// showSearch: true,
// filterOption: (input: string, option: any) => {
// return option.deviceName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
// },
// // autoAddLink: true, //默认添加联动
// },
// },
{
field: 'deviceName',
label: '设备名称',
component: 'nsSelectApi',
label: '设备信息/节点信息',
component: 'NsInput',
componentProps: {
api: device.queryDevicePage,
params: {
orgId: orgId.value,
pageNum: 1,
pageSize: 99,
allowClear: true,
placeholder: '请输入设备信息/节点信息关键字',
},
},
{
field: 'dataSourcesType',
label: '告警点位',
component: 'nsSelectApi',
// dynamicParams: {
// id: 'deviceName', //帮定上级联动数据
// },
componentProps: {
api: () => dict({ params: { dicKey: 'ENERGY_TYPE' } }),
immediate: true,
allowClear: true,
labelField: 'cnValue',
valueField: 'id',
placeholder: '请选择告警点位',
showSearch: true,
filterOption: (input: string, option: any) => {
return option.cnValue.toLowerCase().indexOf(input.toLowerCase()) >= 0;
},
placeholder: '请选择设备名称',
resultField: 'data.records',
labelField: 'deviceName',
valueField: 'id',
autoAddLink: true, //默认添加联动
// autoSelectFirst: true,
},
},
{
field: 'devicePoint',
label: '设备点位',
component: 'nsSelectApi',
dynamicParams: {
id: 'deviceName', //帮定上级联动数据
},
componentProps: {
api: device.queryDevicePoint,
resultField: 'data',
placeholder: '请选择设备点位',
labelField: 'code',
valueField: 'id',
dependency: 'deviceName',
},
},
{
field: 'payWay',
field: 'enableRules',
label: '启用状态',
component: 'NsSelect',
componentProps: {
allowClear: true,
placeholder: '请选择启用状态',
options: [
{
label: '启用',
value: '1',
value: 1,
},
{
label: '关闭',
value: '0',
value: 0,
},
],
},
},
{
field: 'provider',
field: 'abnormalDescription',
label: '异常描述',
component: 'NsInput',
componentProps: {
allowClear: true,
placeholder: '请输入异常描述关键字',
},
},
],
},
params: { id: value.id },
params: { equipmentAlarmId: value.id },
// pagination: { pageSizeOptions: false },
rowKey: 'id',
};
};
// 编辑或添加成功 刷新列表
const editObject = () => {
mainRef.value?.nsTableRef.reload();
};
return {
configureEnergyAlarmsData,
show,
clickSwitch,
doWnload,
mainRef,
editObject,
getcomparisonType,
orgId,
tableConfig,
editConfigureEnergyAlarms,

136
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue
View File

@@ -27,9 +27,9 @@
}"
tree-node-filter-prop="orgName" />
</a-form-item>
<a-form-item label="数据来源" name="sbtype">
<a-form-item label="数据来源" name="dataSources">
<a-cascader
v-model:value="infoObject.sbtype"
v-model:value="infoObject.dataSources"
:options="deviceTypeTreeData"
:field-names="{
children: 'children',
@@ -45,16 +45,19 @@
v-model:value="infoObject.deviceNode"
style="width: 100%"
placeholder="请选择设备节点"
:disabled="!infoObject.sbtype"
:disabled="!infoObject.dataSources"
:tree-line="true && { showLeafIcon: false }"
:tree-data="jdTreeData"
:field-names="{
children: 'children',
label: infoObject.sbtype && infoObject.sbtype[1] === 1 ? 'deviceName' : 'pointName',
label:
infoObject.dataSources && infoObject.dataSources[1] === 1
? 'deviceName'
: 'pointName',
value: 'id',
}" />
</a-form-item>
<a-form-item label="启用规则" name="enableRules">
<a-form-item label="启用规则">
<a-switch
:checked="infoObject.enableRules === 1 ? true : false"
:class="{
@@ -67,6 +70,7 @@
<a-textarea
v-model:value="infoObject.abnormalDescription"
style="height: 32px"
placeholder="请输入异常描述"
:autoSize="{ minRows: 1, maxRows: 1 }"
show-count
:maxlength="30" />
@@ -152,10 +156,11 @@
deviceNode: null,
ruleType: null,
abnormalDescription: null,
sbtype: null,
dataSources: null,
enableRules: 0,
alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }],
});
const emit = defineEmits(['editObject']);
//删除的逻辑列表
const delAlarmList = ref([]);
//对比类型
@@ -271,19 +276,24 @@
const toggle = async (value: any, info: any) => {
// 数据来源
let energyType = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
energyType.data.data.forEach((item: any) => {
item.children = [
{
id: 1,
cnValue: '设备',
},
{
id: 2,
cnValue: '节点',
},
];
});
deviceTypeTreeData.value = energyType.data.data;
if (energyType.data.data) {
energyType.data.data.forEach((item: any) => {
item.children = [
{
id: 1,
cnValue: '设备',
},
{
id: 2,
cnValue: '节点',
},
];
});
deviceTypeTreeData.value = energyType.data.data;
} else {
deviceTypeTreeData.value = [];
}
//能源告警
energyAlarm.value = info;
// 获取站点数据
@@ -294,16 +304,29 @@
});
//判断 是新增 还是修改
if (value) {
value.ruleType = value.ruleType + '';
value.comparisonType = value.comparisonType.split(',');
value.sbtype = [value.dataSourcesType, value.dataSourcesWay];
delete value.dataSourcesType;
delete value.dataSourcesWay;
infoObject.value = value;
//获取设备/节点
deviceTypeTreeData.value.forEach((item: any) => {
if (item.id === infoObject.value.sbtype[0]) {
selectDeviceType(infoObject.value.sbtype, [{ ...item }]);
await http.post(energyAlarms.configFindById, { id: value.id }).then((res) => {
if (res.msg === 'success') {
infoObject.value = res.data;
// 拼凑成 修改回显形式
infoObject.value.dataSources = [
infoObject.value.dataSourcesType,
infoObject.value.dataSourcesWay,
];
delete infoObject.value.dataSourcesType;
delete infoObject.value.dataSourcesWay;
infoObject.value.comparisonType = infoObject.value.comparisonType.split(',');
infoObject.value.ruleType = infoObject.value.ruleType + '';
infoObject.value.alarmList = infoObject.value.hxAlarmRuleLogicList || [];
delete infoObject.value.hxAlarmRuleLogicList;
//获取设备/节点
if (deviceTypeTreeData && deviceTypeTreeData.value.length > 0) {
deviceTypeTreeData.value.forEach((item: any) => {
if (item.id === infoObject.value.dataSources[0]) {
selectDeviceType(infoObject.value.dataSources, [{ ...item }]);
}
});
}
}
});
} else {
@@ -313,7 +336,7 @@
deviceNode: null,
ruleType: null,
abnormalDescription: null,
sbtype: null,
dataSources: null,
enableRules: 0,
alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }],
};
@@ -324,8 +347,7 @@
//表单 判断规格
const rules = {
site: [{ required: true, message: '请选择站点', trigger: 'change' }],
sbtype: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
enableRules: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
dataSources: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
deviceNode: [{ required: true, message: '请选择设备名称', trigger: 'change' }],
sbAdress: [{ required: true, message: '请选择设备点位', trigger: 'change' }],
comparisonType: [{ required: true, message: '请选择对比类型', trigger: 'change' }],
@@ -344,12 +366,9 @@
},
},
],
logic: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
num: [{ required: true, message: '请输入数值', trigger: 'blur' }],
};
// 确认按钮
const btnClick = () => {
console.log(infoObject.value, '数据');
infoObject.value.alarmList.forEach((item) => {
if (item.logic === null || item.num === null) {
return;
@@ -361,17 +380,16 @@
}
//数据是否验证通过
formRef.value.validate().then(() => {
console.log(energyAlarm.value, '数据');
//处理数据
let data = { ...infoObject.value };
//关联能耗告警id
data.equipmentAlarmId = energyAlarm.value.id;
data.errorCode = energyAlarm.value.errorCode;
data.dataSourcesType = data.sbtype[0];
data.dataSourcesWay = data.sbtype[1];
data.dataSourcesType = data.dataSources[0];
data.dataSourcesWay = data.dataSources[1];
delete data.dataSources;
data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
data.comparisonType = data.comparisonType.toString;
data.comparisonType = data.comparisonType.toString();
data.hxAlarmRuleLogicList.forEach((item) => {
const num = Number(item.num);
if (!isNaN(num)) {
@@ -382,24 +400,24 @@
});
data.ruleType = Number(data.ruleType);
delete data.alarmList;
// http
// .post(energyAlarms.configAddOrUpNewData, data)
// .then((res) => {
// if (res.msg === 'success') {
// // 操作成功时的处理
// if (data.id) {
// NsMessage.success('告警规则编辑成功');
// } else {
// NsMessage.success('告警规则新增成功');
// }
// emit('editObject', null);
// handleClose();
// }
// })
// .catch((error) => {
// // 错误处理
// console.error('请求失败：', error);
// });
http
.post(energyAlarms.configAddOrUpNewData, data)
.then((res) => {
if (res.msg === 'success') {
// 操作成功时的处理
if (data.id) {
NsMessage.success('告警规则编辑成功');
} else {
NsMessage.success('告警规则新增成功');
}
emit('editObject', null);
handleClose();
}
})
.catch((error) => {
// 错误处理
console.error('请求失败：', error);
});
});
};
//取消按钮
@@ -413,7 +431,7 @@
ruleType: null,
deviceNode: null,
abnormalDescription: null,
sbtype: null,
dataSources: null,
enableRules: 0,
alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }],
};

12
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/configureDeviceAlarms.vue
View File

@@ -188,9 +188,9 @@
name: 'FeedBackDetail',
dynamicParams: ['uuid', 'appealType'],
confirm: true,
handle: () => {
handle: (data: any) => {
http.post(deviceAlarms.configDel, { ids: data.id }).then(() => {
NsMessage.success('规则删除成功');
NsMessage.success('告警规则删除成功');
mainRef.value?.nsTableRef.reload();
});
},
@@ -216,6 +216,10 @@
resultField: 'data.records',
labelField: 'deviceName',
valueField: 'id',
showSearch: true,
filterOption: (input: string, option: any) => {
return option.deviceName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
},
autoAddLink: true, //默认添加联动
},
},
@@ -234,6 +238,10 @@
labelField: 'code',
valueField: 'id',
dependency: 'deviceName',
showSearch: true,
filterOption: (input: string, option: any) => {
return option.code.toLowerCase().indexOf(input.toLowerCase()) >= 0;
},
},
},
{

2
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
View File

@@ -85,6 +85,7 @@
<a-textarea
v-model:value="infoObject.abnormalDescription"
style="height: 32px"
placeholder="请输入异常描述"
:autoSize="{ minRows: 1, maxRows: 1 }"
show-count
:maxlength="30" />
@@ -323,7 +324,6 @@
delete infoObject.value.hxAlarmRuleLogicList;
infoObject.value.deviceType = selectDevice;
infoObject.value.ruleType = infoObject.value.ruleType + '';
console.log(infoObject.value, '数据');
}
});
} else {

10
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/index.vue
View File

@@ -40,11 +40,17 @@
</template>
<template v-if="column.dataIndex === 'monitor'">
{{
record?.monitorTime && record?.monitorTimeUnit
? record?.monitorTime + '' + record?.monitorTimeUnit
record.monitorTime && record.monitorTimeUnit
? record.monitorTime + '' + record.monitorTimeUnit.label
: '-'
}}
</template>
<template v-if="column.dataIndex === 'repetition'">
{{ record.repetitions.label }}
</template>
<template v-if="column.dataIndex === 'prioritys'">
{{ record.priority.label }}
</template>
</template>
</ns-view-list-table>
<a-button

335
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/index.vue
View File

@@ -1,15 +1,15 @@
<template>
<ns-drawer
v-model:visible="visible"
width="520"
:title="' '"
width="600"
: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">
<div style="width: 100%; overflow: hidden; overflow-y: hidden; height: 100%">
<a-form ref="formRef" :model="infoObject" :rules="rules" style="width: 80%">
<a-form-item ref="notification" label="通知方式" name="notification">
<a-select
ref="select"
@@ -22,7 +22,7 @@
placeholder="请选择通知方式"
:filter-option="filterDevicePoint" />
</a-form-item>
<a-form-item label="启用规则" name="enableRules">
<a-form-item label="启用规则">
<a-switch
:checked="infoObject.enableRules === 1 ? true : false"
:class="{
@@ -31,28 +31,57 @@
}"
@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 style="width: 100%; height: 765px; overflow-y: auto">
<div style="margin-bottom: 8px">
<div style="width: 100%; display: flex; position: relative">
<div
style="
border-width: 0px;
position: absolute;
left: 0px;
top: 5px;
width: 5px;
height: 15px;
background: inherit;
background-color: rgba(251, 156, 67, 1);
border: none;
border-radius: 5px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
"></div>
<span style="margin-left: 24px; color: #333333">联系人名单</span>
</div>
<img
style="width: 100%; margin-top: -10px"
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
</div>
<div style="margin-bottom: 16px">
<a-button type="primary" @click="chengUser">选择联系人 </a-button>
</div>
<a-table
:dataSource="dataSource"
:columns="columns"
:scroll="{ x: 800, y: 700 }"
:pagination="pagination">
<template #bodyCell="{ record, column }">
<template v-if="column.dataIndex === 'operation'">
<a style="color: rgb(210, 0, 5)" @click="remove(record)">移除</a>
</template>
</template>
</a-table>
</div>
</div>
<linkPeople v-show="visibleModel" ref="linkPeoples" @handleCancel="handleCancel" />
</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 { NsMessage } from '/nerv-lib/component';
// import { http } from '/nerv-lib/util';
// import { number } from 'vue-types';
import linkPeople from './linkPeople/index.vue';
// import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
@@ -61,25 +90,191 @@
{
title: '序号',
dataIndex: 'address',
width: 80,
fixed: 'left',
customRender: (text: any) => {
return text.index + 1;
},
},
{
title: '通知名单',
title: '姓名',
dataIndex: 'name',
width: 80,
fixed: 'left',
key: 'name',
},
];
const dataSource = [
{
name: '运维>运维1部>张三',
title: '性别',
dataIndex: 'sex',
width: 80,
key: 'sex',
},
{
name: '运维>运维1部>李四',
title: '组织关系',
dataIndex: 'site',
key: 'site',
},
{
title: '部门',
dataIndex: 'department',
key: 'department',
},
{
title: '操作',
width: 80,
dataIndex: 'operation',
fixed: 'right',
},
];
const visibleModel = ref(false);
const dataSource = ref([
{
id: 1,
name: '张三1',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 2,
name: '张三2',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 3,
name: '张三3',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 4,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 5,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 6,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 7,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 8,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 9,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 10,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 11,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 12,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 13,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 14,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 15,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 16,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
{
id: 17,
name: '张三',
sex: '男',
site: '济阳站',
department: '济阳站/产品/产品经理',
},
]);
const visible = ref(false);
const linkPeoples = ref(null);
const handleChangePage = (current: number, pageSize: number) => {
pagination.value.current = current;
pagination.value.pageSize = pageSize;
};
const pagination = ref({
total: 0,
size: 'small',
current: 1,
pageSize: 10,
showQuickJumper: true,
showLessItems: true,
// showSizeChanger: true,
showTotal: (total: number, range: any) =>
total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
onChange: handleChangePage,
});
//点击联系人
const chengUser = () => {
visibleModel.value = true;
linkPeoples.value.getData();
};
//取消弹窗
const handleCancel = () => {
visibleModel.value = false;
};
//表单数据
const infoObject = ref({
enableRules: 0,
@@ -101,63 +296,10 @@
{ 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' }],
notification: [{ 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']);
@@ -165,7 +307,9 @@
//判断 是新增 还是修改
if (value) {
// infoObject.value = value;
infoObject.value = {};
infoObject.value = {
enableRules: 0,
};
} else {
infoObject.value = {
enableRules: 0,
@@ -173,7 +317,15 @@
}
visible.value = !visible.value;
};
//移除数据
const remove = (data: any) => {
dataSource.value.forEach((item, index) => {
if (item.id === data.id) {
dataSource.value.splice(index, 1);
}
});
dataSource.value = [...dataSource.value];
};
const btnClick = () => {
console.log(infoObject.value);
//表单校验
@@ -190,22 +342,13 @@
// 清楚校验错误信息
formRef.value.resetFields();
visible.value = false;
options.value = [
{
value: 'zhejiang',
label: 'Zhejiang',
isLeaf: false,
},
{
value: 'jiangsu',
label: 'Jiangsu',
isLeaf: false,
},
];
visibleModel.value = false;
};
defineExpose({
toggle,
handleClose,
handleCancel,
handleChangePage,
formRef,
});
</script>
@@ -240,7 +383,7 @@
}
/deep/ .ant-form-item-label {
z-index: 20;
text-align: right;
width: 23%;
text-align: left;
width: 20%;
}
</style>

45
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<a-modal
v-model:visible="show"
width="1000px"
style="top: 50%; transform: translateY(-50%)"
title="添加联系人"
@ok="handleOk"
@cancel="handleCancel">
<div style="width: 100%; height: 100%">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</div>
</a-modal>
</template>
<script lang="ts">
import { ref } from 'vue';
import { defineComponent } from 'vue';
export default defineComponent({
setup(props, { emit }) {
const handleOk = () => {
// 处理确定按钮的逻辑
console.log('点击了确定按钮');
};
const getData = () => {
show.value = true;
};
const show = ref(false);
const handleCancel = () => {
// 处理取消按钮的逻辑
console.log('点击了取消按钮');
emit('handleCancel', null);
show.value = false;
};
return {
handleOk,
show,
getData,
handleCancel,
};
},
});
</script>

8
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/ts/equipmentAlarmConfig.ts
View File

@@ -14,7 +14,7 @@ const tableKeyMap = [
},
{
title: '优先级',
dataIndex: 'priority',
dataIndex: 'prioritys',
},
{
title: '告警标题',
@@ -26,8 +26,7 @@ const tableKeyMap = [
},
{
title: '重复次数',
dataIndex: 'repetitions',
textEllipsis: true,
dataIndex: 'repetition',
},
{
title: '监测时长',
@@ -104,6 +103,9 @@ export const equipmentAlarmTableConfig = (
name: 'FeedBackDetail',
dynamicParams: ['uuid', 'appealType'],
handle: (data: any) => {
data.priority = data.priority.value;
data.repetitions = data.repetitions.value;
data.monitorTimeUnit = data.monitorTimeUnit.value;
editEquipmentAlarm.value.toggle(data);
},
},