You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

351 lines
13 KiB

<template>
<div class="box">
<a-tabs default-active-key="1">
<a-tab-pane key="1" tab="通知管理">
<ns-view-list-table v-bind="notificationConfig" ref="mainRef">
<template #bodyCell="{ record, column }">
<template v-if="column.dataIndex === 'enableNotifications'">
<a-switch
:checked="record.enableNotifications === 1 ? true : false"
:class="{
'blue-background': record.enableNotifications === 1 ? true : false,
'grey-background': record.enableNotifications === 1 ? false : true,
}"
@change="
clickSwitch({ type: 1, enableRules: record.enableRules, record: record })
" />
</template>
<template v-if="column.dataIndex === 'prioritys'">
{{ record.priority ? record.priority.label : '' }}
</template>
<template v-if="column.dataIndex === 'notificationMethod'">
{{ getNotificationMethod(record.notificationMethod) }}
</template>
</template>
</ns-view-list-table>
<!-- 联系方式 -->
<notificationManagement ref="notificationManagements" @updNotification="updNotification" />
</a-tab-pane>
<a-tab-pane key="2" tab="设备告警" force-render>
<ns-view-list-table
v-show="equipmentAlarm"
ref="mainRefEquipmentAlarm"
class="table"
v-bind="equipmentAlarmConfig">
<template #bodyCell="{ record, column }">
<template v-if="column.dataIndex === 'enableRules'">
<a-switch
:checked="record.enableRules === 1 ? true : false"
:class="{
'blue-background': record.enableRules === 1 ? true : false,
'grey-background': record.enableRules === 1 ? false : true,
}"
@change="
clickSwitch({ type: 2, enableRules: record.enableRules, record: record })
" />
</template>
<template v-if="column.dataIndex === 'monitor'">
{{
record.monitorTime && record.monitorTimeUnit
? record.monitorTime + '' + record.monitorTimeUnit.label
: ''
}}
</template>
<template v-if="column.dataIndex === 'prioritys'">
{{ record.priority ? record.priority.label : '' }}
</template>
<template v-if="column.dataIndex === 'alarmFrequency'">
{{ record.alarmFrequency ? record.alarmFrequency.label : '' }}
</template>
<template v-if="column.dataIndex === 'repetitions'">
{{
record.repetitions && record.alarmFrequency.value === 2 ? record.repetitions : '-'
}}
</template>
<template v-if="column.dataIndex === 'interval'">
{{
record.intervalDuration &&
(record.alarmFrequency.value === 2 || record.alarmFrequency.value === 3)
? record.intervalDuration + '' + record.intervalDurationUnit.label
: '-'
}}
</template>
</template>
</ns-view-list-table>
<a-button
v-if="!equipmentAlarm"
type="primary"
style="position: absolute; right: 130px; z-index: 3; top: 80px; height: 30px"
@click="backequipmentAlarm"
>返回</a-button
>
<!-- 新增 或 编辑 设备告警 -->
<editeEquipmentAlarm ref="editEquipmentAlarm" @editObject="editObject" />
<!-- 配置设备告警-->
<configureDeviceAlarms v-show="!equipmentAlarm" ref="configureDeviceAlarms" />
</a-tab-pane>
<a-tab-pane key="3" tab="能碳告警">
<ns-view-list-table
v-bind="energyAlarmConfig"
v-show="energyAlarm"
ref="mainEnergyAlarmConfig"
class="table">
<template #bodyCell="{ record, column }">
<template v-if="column.dataIndex === 'enableRules'">
<a-switch
:checked="record.enableRules === 1 ? true : false"
:class="{
'blue-background': record.enableRules === 1 ? true : false,
'grey-background': record.enableRules === 1 ? false : true,
}"
@click="
clickSwitch({ type: 3, enableRules: record.enableRules, record: record })
" />
</template>
<template v-if="column.dataIndex === 'monitorFrequency'">
{{ record.monitorFrequency.label }}
</template>
<template v-if="column.dataIndex === 'alarmFrequency'">
{{ record.alarmFrequency ? record.alarmFrequency.label : '' }}
</template>
<template v-if="column.dataIndex === 'priority'">
{{ record.priority ? record.priority.label : '' }}
</template>
<template v-if="column.dataIndex === 'repetitions'">
{{
record.repetitions && record.alarmFrequency.value === 2 ? record.repetitions : '-'
}}
</template>
<template v-if="column.dataIndex === 'interval'">
{{
record.intervalDuration && record.alarmFrequency.value !== 1
? record.intervalDuration + '' + record.intervalDurationUnit.label
: '-'
}}
</template>
</template>
</ns-view-list-table>
<a-button
v-if="!energyAlarm"
type="primary"
style="position: absolute; right: 130px; z-index: 3; top: 80px; height: 30px"
@click="backenergyAlarm"
>返回</a-button
>
<!-- 新增 或 编辑 能耗告警 -->
<editeEnergyAlarm ref="editeEnergyAlarm" @editObject="editeEnergyAlarmInfo" />
<!-- 配置能源告警-->
<configureEnergyAlarms v-show="!energyAlarm" ref="configureEnergyAlarms" />
</a-tab-pane>
</a-tabs>
</div>
</template>
<script lang="ts">
import { notificationtableConfig } from './ts/notificationManagementConfig';
import { equipmentAlarmTableConfig } from './ts/equipmentAlarmConfig';
import { energyAlarmConfigs } from './ts/energyAlarmConfig';
import { ref, createVNode } from 'vue';
import { http } from '/nerv-lib/util';
import { NsMessage, NsModal } from '/nerv-lib/component';
import editeEquipmentAlarm from './equipmentAlarm/editeEquipmentAlarm.vue';
import editeEnergyAlarm from './energyAlarm/editeEnergyAlarm.vue';
import notificationManagement from './notificationManagement/index.vue';
import configureEnergyAlarms from './energyAlarm/configureEnergyAlarms.vue';
import configureDeviceAlarms from './equipmentAlarm/configureDeviceAlarms.vue';
import { deviceAlarms } from '/@/api/alarmManagement/alarmSettings/deviceAlarms';
import { energyAlarms } from '/@/api/alarmManagement/alarmSettings/energyAlarm';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { notificationManagementApi } from '/@/api/alarmManagement/alarmSettings/notificationManagements';
export default {
name: 'AlarmSettingsIndex',
components: {
editeEquipmentAlarm,
configureDeviceAlarms,
configureEnergyAlarms,
notificationManagement,
editeEnergyAlarm,
},
setup() {
const mainRef = ref();
const mainRefEquipmentAlarm = ref();
const mainEnergyAlarmConfig = ref();
const editEquipmentAlarm = ref();
const notificationManagements = ref();
const editeEnergyAlarm = ref();
const configureDeviceAlarms = ref();
const configureEnergyAlarms = ref();
const equipmentAlarm = ref(true);
const energyAlarm = ref(true);
const notificationConfig = notificationtableConfig(notificationManagements);
//获取 通知方式
const getNotificationMethod = (data: any) => {
if (!data) return '';
const methods: any = [];
const notifications = data.split(',');
notifications.forEach((notification: any) => {
if (notification === '1') {
methods.push('站内信息');
} else if (notification === '2') {
methods.push('短信');
}
});
return methods.join('/');
};
//能源告警配置
const energyAlarmConfig = energyAlarmConfigs(
editeEnergyAlarm,
mainEnergyAlarmConfig,
energyAlarm,
configureEnergyAlarms,
mainRef,
);
//设备告警配置
const equipmentAlarmConfig = equipmentAlarmTableConfig(
editEquipmentAlarm,
mainRefEquipmentAlarm,
equipmentAlarm,
configureDeviceAlarms,
mainRef,
);
//返回设备告警
const backequipmentAlarm = () => {
equipmentAlarm.value = !equipmentAlarm.value;
configureDeviceAlarms.value.show = false;
};
const backenergyAlarm = () => {
energyAlarm.value = !energyAlarm.value;
configureEnergyAlarms.value.show = false;
};
//通知 修改成功
const updNotification = () => {
mainRef.value?.nsTableRef.reload();
};
const clickSwitch = (data: any) => {
NsModal.confirm({
title: '启用状态',
icon: createVNode(ExclamationCircleOutlined),
content:
'确定' +
(data.record.enableRules === 1 ? '关闭' : '启用') +
(data.type === 1 ? '通知' : '告警') +
'吗?',
onOk: () => {
if (data.type === 1) {
//通知方式
http
.post(notificationManagementApi.upData, {
id: data.record.id,
orgId: data.record.orgId,
enableNotifications: data.record.enableNotifications === 1 ? 0 : 1,
})
.then(() => {
NsMessage.success(
data.record.enableNotifications === 1 ? '通知已关闭' : '通知已启用',
);
mainRef.value?.nsTableRef.reload();
});
}
//设备告警
if (data.type === 2) {
http
.post(deviceAlarms.addOrUpNewData, {
id: data.record.id,
orgId: data.record.orgId,
enableRules: data.record.enableRules === 1 ? 0 : 1,
})
.then(() => {
NsMessage.success(data.record.enableRules === 1 ? '告警已关闭' : '告警已启用');
mainRefEquipmentAlarm.value?.nsTableRef.reload();
});
}
//能源告警
if (data.type === 3) {
http
.post(energyAlarms.addOrUpNewData, {
id: data.record.id,
orgId: data.record.orgId,
enableRules: data.record.enableRules === 1 ? 0 : 1,
})
.then(() => {
NsMessage.success(data.record.enableRules === 1 ? '告警已关闭' : '告警已启用');
mainEnergyAlarmConfig.value?.nsTableRef.reload();
});
}
},
});
};
// 设备告警 编辑或添加成功 刷新列表
const editObject = () => {
mainRefEquipmentAlarm.value?.nsTableRef.reload();
mainRef.value?.nsTableRef.reload();
};
// 能源告警 编辑或添加成功 刷新列表
const editeEnergyAlarmInfo = () => {
mainEnergyAlarmConfig.value?.nsTableRef.reload();
mainRef.value?.nsTableRef.reload();
};
return {
notificationConfig,
energyAlarmConfig,
equipmentAlarmConfig,
editObject,
editeEnergyAlarm,
updNotification,
getNotificationMethod,
clickSwitch,
editEquipmentAlarm,
notificationManagements,
editeEnergyAlarmInfo,
configureDeviceAlarms,
configureEnergyAlarms,
equipmentAlarm,
energyAlarm,
backequipmentAlarm,
backenergyAlarm,
mainRef,
mainRefEquipmentAlarm,
mainEnergyAlarmConfig,
};
},
};
</script>
<style lang="less" scoped>
.box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.full-height {
height: 100%; /* 设置高度为父容器高度 */
}
.blue-background.ant-switch-checked {
background-color: linear-gradient(
180deg,
rgba(1, 206, 255, 1) 0%,
rgba(57, 215, 187, 1) 100%
) !important;
}
.grey-background.ant-switch {
background-color: rgba(238, 238, 238, 1) !important;
}
.blue-background.ant-switch-checked .ant-switch-handle {
background-color: linear-gradient(
180deg,
rgba(1, 206, 255, 1) 0%,
rgba(57, 215, 187, 1) 100%
) !important;
}
.ant-switch-checked {
background-color: rgba(57, 215, 187, 1) !important;
}
.grey-background.ant-switch .ant-switch-handle {
background-color: rgba(238, 238, 238, 1) !important;
}
</style>