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.
 
 
 
 
 
 

301 lines
9.7 KiB

<!-- 配置设备告警 -->
<template>
<ns-view-list-table v-if="show" ref="mainRef" class="table" v-bind="tableConfig">
<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({ enableRules: record.enableRules, record: record })" />
</template>
<template v-if="column.dataIndex === 'equipmentInfo'">
{{
record?.enableRules
? record.enableRules + '>' + record.deviceType + '>' + record.deviceName
: '-'
}}
</template>
</template>
</ns-view-list-table>
<!-- 新增or编辑界面 -->
<editConfigureEnergyAlarm ref="editConfigureEnergyAlarms" />
</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 { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { device } from '/@/api/deviceManage';
export default {
components: { editConfigureEnergyAlarm },
setup() {
//能源告警配置
const configureEnergyAlarmsData = ref({});
const show = ref(false);
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 clickSwitch = (data: any) => {
NsModal.confirm({
title: '启用状态',
icon: createVNode(ExclamationCircleOutlined),
content: '确定' + (data.record.enableRules === 1 ? '关闭' : '启用') + '规则吗?',
onOk: () => {
http
.post(deviceAlarms.addOrUpNewData, {
id: data.record.id,
enableRules: data.record.enableRules === 1 ? 0 : 1,
})
.then(() => {
NsMessage.success(data.record.enableRules === 1 ? '规则已关闭' : '规则已启用');
mainRef.value?.nsTableRef.reload();
});
},
});
};
const doWnload = (url: any) => {
const a = document.createElement('a');
document.body.appendChild(a);
a.href = encodeURI(url);
//设置下载的文件名
// a.download = fileName.value;
//触发a标签的点击事件,进行下载
a.click();
};
const setconfigureDeviceAlarmsData = (value: any) => {
configureEnergyAlarmsData.value = value;
show.value = true;
tableConfig.value = {
title: '告警规则',
api: deviceAlarms.getTableList,
value: mockData.value,
headerActions: [
{
label: '新增',
name: 'RoleTypeAdd',
type: 'primary',
handle: () => {
editConfigureEnergyAlarms.value.toggle(null, configureEnergyAlarmsData.value);
},
},
{
label: '导入',
name: 'groupImport',
type: 'primary',
extra: {
// api: props.postImportApi, // 导入接口名
title: '设备信息', // 弹窗title
templateName: 'whiteListUser', // 所使用的文件名称
indexName: '设备id', // 匹配类型字段
message: [
{ label: '1、若必填项未填写,则不能进行导入操作' },
{ label: `2、当重复时,则更新数据。` },
{ label: '3、数据将从模版的第五行进行导入。' },
{ label: '4、文件导入勿超过5MB。' },
],
},
},
{
label: '导出',
name: 'groupExports',
type: 'primary',
handle: () => {
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
},
},
{
label: '批量删除',
type: 'primary',
name: 'userBatchDel',
dynamicDisabled: (data: any) => {
return data.list.length === 0;
},
confirm: true,
isReload: true,
isClearCheck: true,
// api: origanizemanage.batchDel,
dynamicParams: { userIds: 'userId[]' },
},
],
columns: [
{
title: '序号',
dataIndex: 'address',
customRender: (text: any) => {
return text.index + 1;
},
},
{
title: '规则id',
dataIndex: 'ruleId',
},
{
title: '设备信息/节点信息',
dataIndex: 'equipmentInfo',
},
{
title: '对比类型',
dataIndex: 'comparisonType',
},
{
title: '告警点位',
dataIndex: 'devicePoint',
},
{
title: '判断条件',
dataIndex: 'ruleType',
},
{
title: '异常描述',
dataIndex: 'abnormalDescription',
textEllipsis: true,
},
{
title: '启用通知',
dataIndex: 'enableRules',
},
],
// rowSelection: null, 选择按钮
columnActions: {
title: '操作',
actions: [
{
label: '编辑',
name: 'FeedBackDetail',
dynamicParams: ['uuid', 'appealType'],
handle: (data: any) => {
editConfigureEnergyAlarms.value.toggle(data, configureEnergyAlarmsData.value);
},
},
{
label: '删除',
name: 'FeedBackDetail',
dynamicParams: ['uuid', 'appealType'],
confirm: true,
handle: () => {
// mockData.value.splice(0, 1);
},
},
],
},
formConfig: {
title: value.errorCode,
schemas: [
{
field: 'deviceName',
label: '设备名称',
component: 'nsSelectApi',
componentProps: {
api: device.queryDevicePage,
params: {
orgId: orgId.value,
pageNum: 1,
pageSize: 99,
},
placeholder: '请选择设备名称',
resultField: 'data.records',
labelField: 'deviceName',
valueField: 'id',
autoAddLink: true, //默认添加联动
},
},
{
field: 'devicePoint',
label: '设备点位',
component: 'nsSelectApi',
dynamicParams: {
id: 'deviceName', //帮定上级联动数据
},
componentProps: {
api: device.queryDevicePoint,
resultField: 'data',
placeholder: '请选择设备点位',
labelField: 'code',
valueField: 'id',
dependency: 'deviceName',
},
},
{
field: 'payWay',
label: '启用状态',
component: 'NsSelect',
componentProps: {
placeholder: '请选择启用状态',
options: [
{
label: '启用',
value: '1',
},
{
label: '关闭',
value: '0',
},
],
},
},
{
field: 'provider',
label: '异常描述',
component: 'NsInput',
componentProps: {
placeholder: '请输入异常描述关键字',
},
},
],
},
params: { id: value.id },
// pagination: { pageSizeOptions: false },
rowKey: 'id',
};
};
return {
configureEnergyAlarmsData,
show,
clickSwitch,
doWnload,
orgId,
tableConfig,
editConfigureEnergyAlarms,
setconfigureDeviceAlarmsData,
};
},
};
</script>
<style lang="less" scoped>
.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;
}
</style>