xuziqiang
5 months ago
19 changed files with 2275 additions and 780 deletions
@ -0,0 +1,5 @@ |
|||
export enum deviceAlarms { |
|||
getTableList = '/carbon-smart/api/AlarmEquipment/selectAlarmEquipment', //设备告警分页
|
|||
addOrUpNewData = '/carbon-smart/api/AlarmEquipment/creatOrUpdate', //设备告警添加 修海
|
|||
del = '/carbon-smart/api/AlarmEquipment/delete', //设备告警删除
|
|||
} |
|||
@ -1,170 +0,0 @@ |
|||
<template> |
|||
<a-form class="ns-form"> |
|||
<div class="ns-form-title ns-title-extra-box"> |
|||
<span>查询</span> |
|||
<a-button type="link" class="ns-operate-expand" @click="expandAll = !expandAll"> |
|||
<template v-if="expandAll"> |
|||
收起筛选 |
|||
<UpOutlined /> |
|||
</template> |
|||
<template v-else> |
|||
展开筛选 |
|||
<DownOutlined /> |
|||
</template> |
|||
</a-button> |
|||
</div> |
|||
<template v-if="expandAll"> |
|||
<a-row :gutter="24"> |
|||
<a-col :span="6"> |
|||
<a-select v-model:value="select.yx" style="width: 100%" placeholder="请选择告警优先级"> |
|||
<a-select-option v-for="(val, index) in 60" :key="index" :value="index">{{ |
|||
index |
|||
}}</a-select-option> |
|||
</a-select> |
|||
</a-col> |
|||
<a-col :span="6"> |
|||
<a-input v-model:value="select.tilte" placeholder="请输入告警标题关键字" /> |
|||
</a-col> |
|||
<a-col :span="6"> |
|||
<a-input v-model:value="select.tilte" placeholder="请输入告警标题关键字" /> |
|||
</a-col> |
|||
<a-col :span="6"> |
|||
<a-select |
|||
v-model:value="select.yx" |
|||
style="width: 100%" |
|||
:autoClearSearchValue="true" |
|||
placeholder="请选择启用状态"> |
|||
<a-select-option :key="1" :value="1"> 启用 </a-select-option> |
|||
<a-select-option :key="0" :value="0"> 关闭 </a-select-option> |
|||
</a-select> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :span="24"> |
|||
<a-col :span="24" class="ns-operate"> |
|||
<a-button @click="reset">重置</a-button> |
|||
<a-button type="primary" @click="search">搜索</a-button> |
|||
</a-col> |
|||
</a-row> |
|||
</template> |
|||
</a-form> |
|||
<div class="ns-table-header"> |
|||
<div class="ns-table-title ns-title-extra-box">告警规则</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { computed, defineComponent, nextTick, provide, ref, toRefs, watch } from 'vue'; |
|||
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'; |
|||
export default { |
|||
components: { DownOutlined, UpOutlined }, |
|||
setup() { |
|||
const expandAll = ref(true); |
|||
const loading = ref(false); |
|||
const select = ref({ |
|||
title: '', |
|||
yx: null, |
|||
}); |
|||
const reset = () => { |
|||
console.log(select); |
|||
}; |
|||
const search = () => { |
|||
console.log(select); |
|||
}; |
|||
return { |
|||
expandAll, |
|||
select, |
|||
loading, |
|||
search, |
|||
reset, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="less" scoped> |
|||
@gap: 16px; |
|||
.ns-form { |
|||
padding: 16px; |
|||
background-color: white; |
|||
// border-radius: 8px; |
|||
border-bottom-left-radius: 12px; |
|||
border-bottom-right-radius: 12px; |
|||
.ant-row { |
|||
flex: 1; |
|||
} |
|||
.ns-operate { |
|||
text-align: right; |
|||
margin-left: auto; |
|||
margin-top: 16px; |
|||
|
|||
.ns-operate-expand { |
|||
display: inline-block; |
|||
padding: 4px 2px; |
|||
border: unset !important; |
|||
.anticon { |
|||
margin-left: 4px; |
|||
} |
|||
&:hover { |
|||
border: unset !important; |
|||
} |
|||
&:focus { |
|||
border: unset !important; |
|||
} |
|||
} |
|||
.ant-btn { |
|||
margin-left: 6px; |
|||
} |
|||
} |
|||
.ns-form-title { |
|||
text-align: left; |
|||
height: 22px; |
|||
// line-height: 32px; |
|||
//font-size: 16px; |
|||
font-weight: bold; |
|||
user-select: text; |
|||
margin-bottom: calc(@gap - 0px); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
:deep(.ant-btn) { |
|||
padding: 0; |
|||
} |
|||
} |
|||
} |
|||
.ns-table-header { |
|||
min-width: fit-content; |
|||
user-select: none; |
|||
// padding: 16px 0; |
|||
padding-top: 16px; |
|||
text-align: right; |
|||
position: relative; |
|||
height: 48px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 20px; |
|||
padding: 0 16px; |
|||
display: flex; |
|||
.ns-table-header::before { |
|||
position: absolute; |
|||
top: -20px; /* 与 margin-top 的值相反，以覆盖 margin-top 的区域 */ |
|||
left: 0; |
|||
width: 100%; |
|||
height: 20px; /* 与 margin-top 的值相同 */ |
|||
background-color: gray; /* 设置灰色背景 */ |
|||
} |
|||
.ns-table-title { |
|||
text-align: left; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
//font-size: 16px; |
|||
font-weight: bold; |
|||
user-select: text; |
|||
} |
|||
|
|||
.ant-btn { |
|||
margin-left: 6px; |
|||
} |
|||
:first-child.ant-btn { |
|||
margin-left: 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,287 @@ |
|||
<!-- 配置设备告警 --> |
|||
<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'; |
|||
|
|||
export default { |
|||
components: { editConfigureEnergyAlarm }, |
|||
|
|||
setup() { |
|||
//设备告警数据 |
|||
const configureDeviceAlarmsData = ref({}); |
|||
const show = ref(false); |
|||
const tableConfig = ref({}); |
|||
const mainRef = ref({}); |
|||
const editConfigureEnergyAlarms = ref({}); |
|||
const mockData = ref(data.listData); |
|||
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('操作成功'); |
|||
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) => { |
|||
configureDeviceAlarmsData.value = value; |
|||
show.value = true; |
|||
tableConfig.value = { |
|||
title: '告警规则', |
|||
api: deviceAlarms.getTableList, |
|||
value: mockData.value, |
|||
headerActions: [ |
|||
{ |
|||
label: '新增', |
|||
name: 'RoleTypeAdd', |
|||
type: 'primary', |
|||
handle: () => { |
|||
editConfigureEnergyAlarms.value.toggle(); |
|||
}, |
|||
}, |
|||
{ |
|||
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: 'valueType', |
|||
}, |
|||
{ |
|||
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); |
|||
}, |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
name: 'FeedBackDetail', |
|||
dynamicParams: ['uuid', 'appealType'], |
|||
confirm: true, |
|||
handle: () => { |
|||
// mockData.value.splice(0, 1); |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
formConfig: { |
|||
title: value.errorCode, |
|||
schemas: [ |
|||
{ |
|||
field: 'provider', |
|||
label: '设备名称', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入设备名称', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'provider', |
|||
label: '设备点位', |
|||
component: 'nsSelectApi', |
|||
componentProps: { |
|||
api: '/api/community/objs/DictItem', |
|||
params: { |
|||
pageSize: 100, |
|||
code: 'MZ', |
|||
}, |
|||
placeholder: '请选择设备点位', |
|||
resultField: 'data', |
|||
labelField: 'dictName', |
|||
valueField: 'dictValue', |
|||
immediate: true, |
|||
autoSelectFirst: false, |
|||
}, |
|||
}, |
|||
{ |
|||
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 { |
|||
configureDeviceAlarmsData, |
|||
show, |
|||
clickSwitch, |
|||
doWnload, |
|||
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> |
|||
@ -0,0 +1,421 @@ |
|||
<template> |
|||
<ns-drawer |
|||
v-model:visible="visible" |
|||
width="520" |
|||
:title="infoObject?.id ? '编辑告警规则' : '新增告警规则'" |
|||
:footer-style="{ textAlign: 'right' }" |
|||
:ok="btnClick" |
|||
:cancel="handleClose" |
|||
placement="right"> |
|||
<div style="padding: 18px; width: 100%; overflow: hidden"> |
|||
<a-form ref="formRef" :model="infoObject" :rules="rules"> |
|||
<a-form-item ref="site" label="站点" name="site"> |
|||
<a-tree-select |
|||
v-model:value="infoObject.site" |
|||
show-search |
|||
style="width: 100%" |
|||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" |
|||
placeholder="请选择站点" |
|||
allow-clear |
|||
tree-default-expand-all |
|||
:tree-data="zdTreeData" |
|||
tree-node-filter-prop="label"> |
|||
<!-- 特殊处理情况 --> |
|||
<!-- <template #title="{ value: val, label }"> |
|||
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b> |
|||
<template v-else>{{ label }}</template> |
|||
</template> --> |
|||
</a-tree-select> |
|||
</a-form-item> |
|||
<a-form-item label="数据来源" name="sbtype"> |
|||
<a-cascader |
|||
v-model:value="infoObject.sbtype" |
|||
:options="sbOptions" |
|||
:show-search="{ filter }" |
|||
placeholder="请选择数据来源" /> |
|||
</a-form-item> |
|||
<a-form-item label="设备节点" name="jdDevice"> |
|||
<a-tree-select |
|||
v-model:value="infoObject.jdDevice" |
|||
style="width: 100%" |
|||
placeholder="请选择设备节点" |
|||
:tree-line="true && { showLeafIcon: false }" |
|||
:tree-data="jdTreeData" /> |
|||
</a-form-item> |
|||
<a-form-item label="启用规则" name="delivery"> |
|||
<a-switch |
|||
v-model:checked="infoObject.delivery" |
|||
:class="{ |
|||
'blue-background': infoObject.delivery, |
|||
'grey-background': !infoObject.delivery, |
|||
}" /> |
|||
</a-form-item> |
|||
<a-form-item label="异常描述" name="desc"> |
|||
<a-textarea |
|||
v-model:value="infoObject.desc" |
|||
style="height: 32px" |
|||
:autoSize="{ minRows: 1, maxRows: 1 }" |
|||
show-count |
|||
:maxlength="30" /> |
|||
</a-form-item> |
|||
<a-form-item label="规则类型" name="resource"> |
|||
<a-radio-group v-model:value="infoObject.resource"> |
|||
<a-radio value="1">且 (and) </a-radio> |
|||
<a-radio value="2">或 (or) </a-radio> |
|||
</a-radio-group> |
|||
</a-form-item> |
|||
<a-form-item label="对比类型1" name="qzType"> |
|||
<a-cascader |
|||
v-model:value="infoObject.sbtype" |
|||
:options="sbOptions" |
|||
placeholder="请选择数据来源" /> |
|||
</a-form-item> |
|||
<template v-for="index in infoObject.alarmList?.length" :key="index"> |
|||
<div style="width: 100%; display: flex; margin-left: 42px; padding: 12px"> |
|||
<span style="line-height: 32px">{{ `逻辑${index}:` }}</span> |
|||
<a-select |
|||
v-model:value="infoObject.alarmList[index - 1].logic" |
|||
style="width: 70px; margin-left: 12px" |
|||
:options="ljOptions" |
|||
@change="handleQzChange" /> |
|||
<span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span> |
|||
<a-input |
|||
style="width: 65px; margin-left: 6px" |
|||
type="number" |
|||
v-model:value="infoObject.alarmList[index - 1].num" /> |
|||
<div |
|||
style="width: 70px; align-items: center; cursor: pointer" |
|||
@click="deleteAlarmList(index - 1)"> |
|||
<img |
|||
style="width: 14px; margin: 0 12px" |
|||
src="https://files.axshare.com/gsc/4T0UQR/5a/e6/81/5ae6813d499c422383c7a15dd956523f/images/设备规则/u72.svg?pageId=cbce6e61-bc6a-4283-802d-993fce6151c0" /> |
|||
</div> |
|||
</div> |
|||
<div |
|||
v-if=" |
|||
infoObject.alarmList[index - 1].num === null || |
|||
infoObject.alarmList[index - 1].logic === null |
|||
" |
|||
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px"> |
|||
请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }} |
|||
</div> |
|||
</template> |
|||
<div |
|||
v-if="infoObject.alarmList?.length < 2" |
|||
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px"> |
|||
逻辑至少2条 |
|||
</div> |
|||
<div style="width: 100%; margin-top: 12px; display: flex; justify-content: flex-end"> |
|||
<a-button type="primary" @click="addAlarmList"> 新增</a-button> |
|||
</div> |
|||
</a-form> |
|||
</div> |
|||
</ns-drawer> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { NsMessage } from '/nerv-lib/component'; |
|||
import { ref, toRaw } from 'vue'; |
|||
import type { CascaderProps, TreeSelectProps, SelectProps } from 'ant-design-vue'; |
|||
import type { ShowSearchType } from 'ant-design-vue/es/cascader'; |
|||
import { device } from '/@/api/deviceManage'; |
|||
import { http } from '/nerv-lib/util'; |
|||
|
|||
import type { Rule } from 'ant-design-vue/es/form'; |
|||
|
|||
const visible = ref(false); |
|||
//表单数据 |
|||
const infoObject = ref({ |
|||
id: null, |
|||
site: null, |
|||
jdDevice: null, |
|||
resource: null, |
|||
desc: null, |
|||
sbtype: null, |
|||
delivery: null, |
|||
alarmList: [{ logic: null, num: null }], |
|||
}); |
|||
//删除的逻辑列表 |
|||
const delAlarmList = ref([]); |
|||
const formRef = ref(); |
|||
//站点数 |
|||
const zdTreeData = ref<TreeSelectProps['treeData']>([ |
|||
{ |
|||
label: '铁路总局(T01)', |
|||
value: 'T01', |
|||
children: [ |
|||
{ |
|||
label: '济阳站(T0101)', |
|||
value: 'T0101', |
|||
}, |
|||
], |
|||
}, |
|||
]); |
|||
//设备类型树 |
|||
const sbOptions: CascaderProps['options'] = [ |
|||
{ |
|||
value: '3', |
|||
label: '3.电梯', |
|||
children: [ |
|||
{ |
|||
value: '301', |
|||
label: '301.扶梯', |
|||
}, |
|||
{ |
|||
value: '302', |
|||
label: '301.直梯', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
value: '4', |
|||
label: '4.冷热源', |
|||
children: [ |
|||
{ |
|||
value: '401', |
|||
label: '402.冷水机组', |
|||
}, |
|||
{ |
|||
value: '402', |
|||
label: '403.热泵机组', |
|||
}, |
|||
{ |
|||
value: '403', |
|||
label: '403.锅炉', |
|||
}, |
|||
{ |
|||
value: '404', |
|||
label: '404.水处理机组', |
|||
}, |
|||
{ |
|||
value: '405', |
|||
label: '405.板式热交换机组', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
//节点数据 |
|||
const jdTreeData = ref([ |
|||
{ |
|||
title: 'parent 1', |
|||
value: 'parent 1', |
|||
children: [ |
|||
{ |
|||
title: 'parent 1-0', |
|||
value: 'parent 1-0', |
|||
children: [ |
|||
{ |
|||
title: 'my leaf', |
|||
value: 'leaf1', |
|||
}, |
|||
{ |
|||
title: 'your leaf', |
|||
value: 'leaf2', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
title: 'parent 1-1', |
|||
value: 'parent 1-1', |
|||
}, |
|||
], |
|||
}, |
|||
]); |
|||
//设备点位 |
|||
const dwOptions = ref<SelectProps['options']>([ |
|||
{ value: '电压 (U)', label: '电压 (U)', code: '1' }, |
|||
{ value: '电流 (I)', label: '电流 (I)', code: '2' }, |
|||
{ value: '电流 (I)', label: 'a相电流 (Ia)', code: '3' }, |
|||
]); |
|||
const filter: ShowSearchType['filter'] = (inputValue: any, path: any) => { |
|||
return path.some( |
|||
(option: any) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1, |
|||
); |
|||
}; |
|||
//取值类型 |
|||
const qzOptions = ref<SelectProps['options']>([ |
|||
{ value: '实时值', label: '实时值', code: '1' }, |
|||
{ value: '平均值', label: '平均值', code: '2' }, |
|||
]); |
|||
//逻辑 |
|||
const ljOptions = ref<SelectProps['options']>([ |
|||
{ value: '1', label: '≥' }, |
|||
{ value: '2', label: '>' }, |
|||
{ value: '3', label: '≤' }, |
|||
{ value: '4', label: '<' }, |
|||
{ value: '5', label: '=' }, |
|||
]); |
|||
//设备点位方法 |
|||
const filterOption = (input: string, option: any) => { |
|||
console.log('搜索', option.value); |
|||
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0; |
|||
}; |
|||
const handleFocus = () => { |
|||
console.log('点击'); |
|||
}; |
|||
const handleChange = (value: string) => { |
|||
console.log(`selected ${value}`); |
|||
console.log('选择', infoObject.value.sbAdress); |
|||
//获得code |
|||
dwOptions.value.forEach((item) => { |
|||
if (item.value === value) { |
|||
console.log('符合', item.code); |
|||
} |
|||
}); |
|||
}; |
|||
const handleQzChange = (value: string) => { |
|||
//获得code |
|||
qzOptions.value.forEach((item) => { |
|||
if (item.value === value) { |
|||
console.log('符合', item.code); |
|||
} |
|||
}); |
|||
}; |
|||
const emit = defineEmits(['editObject']); |
|||
//父调子 页面显示方法 |
|||
const toggle = (value: any) => { |
|||
//获取设备类型 |
|||
http.post(device.queryDeviceTree, null).then((res) => { |
|||
console.log(res, '请求出来的数据'); |
|||
NsMessage.success('操作成功'); |
|||
}); |
|||
//判断 是新增 还是修改 |
|||
if (value) { |
|||
infoObject.value = value; |
|||
} else { |
|||
infoObject.value = { |
|||
id: null, |
|||
site: null, |
|||
jdDevice: null, |
|||
resource: null, |
|||
desc: null, |
|||
sbtype: null, |
|||
delivery: null, |
|||
alarmList: [{ logic: null, num: null }], |
|||
}; |
|||
} |
|||
|
|||
visible.value = !visible.value; |
|||
}; |
|||
//表单 判断规格 |
|||
const rules: Record<string, Rule[]> = { |
|||
site: [{ required: true, message: '请选择站点', trigger: 'change' }], |
|||
sbtype: [{ required: true, message: '请选择设备类型', trigger: 'change' }], |
|||
delivery: [{ required: true, message: '请选择启用规则', trigger: 'change' }], |
|||
jdDevice: [{ required: true, message: '请选择设备名称', trigger: 'change' }], |
|||
sbAdress: [{ required: true, message: '请选择设备点位', trigger: 'change' }], |
|||
qzType: [{ required: true, message: '请选择取值类型', trigger: 'change' }], |
|||
resource: [{ required: true, message: '请选择规则类型', trigger: 'change' }], |
|||
desc: [{ required: true, message: '请输入异常描述', trigger: 'blur' }], |
|||
alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }], |
|||
number: [{ required: true, message: '请输入数值', trigger: 'blur' }], |
|||
}; |
|||
// 开关选择 |
|||
const changeSwitch = () => { |
|||
console.log(infoObject.value.selectSwitch, '开关'); |
|||
}; |
|||
// 确认按钮 |
|||
const btnClick = () => { |
|||
console.log(infoObject.value, '数据'); |
|||
|
|||
infoObject.value.alarmList.forEach((item) => { |
|||
if (item.logic === null || item.num === null) { |
|||
// NsMessage.error('请选择逻辑和数值'); |
|||
return; |
|||
} |
|||
}); |
|||
if (infoObject.value.alarmList.length < 2) { |
|||
NsMessage.error('请选择逻辑和数值'); |
|||
return; |
|||
} |
|||
//数据是否验证通过 |
|||
formRef.value.validate().then(() => { |
|||
console.log('values', infoObject, toRaw(infoObject)); |
|||
delAlarmList.value = []; |
|||
}); |
|||
//调用接口 |
|||
// http |
|||
// .post(props.api, data) |
|||
// .then(() => { |
|||
// isLoading.value = false; |
|||
// NsMessage.success('操作成功', 1, () => { |
|||
// navigateBack(); |
|||
// }); |
|||
// }) |
|||
// .catch(() => { |
|||
// isLoading.value = false; |
|||
// }); |
|||
}; |
|||
//取消按钮 |
|||
const handleClose = () => { |
|||
// 清楚校验错误信息 |
|||
formRef.value.resetFields(); |
|||
//对象清空 |
|||
infoObject.value = { |
|||
id: null, |
|||
site: null, |
|||
resource: null, |
|||
desc: null, |
|||
sbtype: null, |
|||
delivery: null, |
|||
alarmList: [{ alarm: null, number: null }], |
|||
}; |
|||
visible.value = false; |
|||
delAlarmList.value = []; |
|||
}; |
|||
// 新增逻辑列表 |
|||
const addAlarmList = () => { |
|||
if (infoObject.value.alarmList) { |
|||
infoObject.value.alarmList.push({ logic: null, num: null }); |
|||
} else { |
|||
infoObject.value.alarmList = [{ logic: null, num: null }]; |
|||
} |
|||
}; |
|||
// 删除 逻辑列表、 |
|||
const deleteAlarmList = (index: number) => { |
|||
if (infoObject.value.alarmList[index]?.id) { |
|||
delAlarmList.value.push(infoObject.value.alarmList[index]); |
|||
} |
|||
infoObject.value.alarmList.splice(index, 1); |
|||
}; |
|||
defineExpose({ |
|||
toggle, |
|||
handleClose, |
|||
dwOptions, |
|||
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> |
|||
@ -0,0 +1,235 @@ |
|||
<template> |
|||
<ns-drawer |
|||
v-model:visible="visible" |
|||
width="520" |
|||
:title="infoObject?.id ? '修改能源告警' : '新增能源告警'" |
|||
:footer-style="{ textAlign: 'right' }" |
|||
:ok="btnClick" |
|||
:cancel="handleClose" |
|||
placement="right"> |
|||
<ns-form ref="formRef" :schemas="schemas" :model="infoObject" formLayout="vertical" /> |
|||
<div style="margin-left: 52px"> |
|||
应用规则: |
|||
<a-switch |
|||
:checked="infoObject?.enableRules === 1 ? true : false" |
|||
:class="{ |
|||
'blue-background': infoObject?.enableRules === 1 ? true : false, |
|||
'grey-background': infoObject?.enableRules === 1 ? false : true, |
|||
}" |
|||
style="margin-left: 6px" |
|||
@change="changeSwitch" /> |
|||
</div> |
|||
</ns-drawer> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue'; |
|||
import { NsMessage } from '/nerv-lib/component'; |
|||
import { http } from '/nerv-lib/util'; |
|||
// import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms'; |
|||
|
|||
const visible = ref(false); |
|||
//表单数据 |
|||
const infoObject = ref({ |
|||
id: null, |
|||
accountNo: null, |
|||
enableRules: 0, |
|||
}); |
|||
const formRef = ref(); |
|||
const emit = defineEmits(['editObject']); |
|||
const toggle = (value: any) => { |
|||
//判断 是新增 还是修改 |
|||
if (value) { |
|||
infoObject.value = value; |
|||
} else { |
|||
infoObject.value = { |
|||
id: null, |
|||
accountNo: null, |
|||
enableRules: 0, |
|||
}; |
|||
} |
|||
visible.value = !visible.value; |
|||
}; |
|||
const schemas = [ |
|||
{ |
|||
field: 'basicInfo', |
|||
label: '', |
|||
displayFormItem: false, |
|||
class: 'ns-form-item-full', |
|||
component: 'NsChildForm', |
|||
componentProps: { |
|||
schemas: [ |
|||
{ |
|||
field: 'alarmTitle', |
|||
label: '告警标题', |
|||
component: 'NsInput', |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: '告警标题不能为空', |
|||
trigger: 'change', |
|||
}, |
|||
], |
|||
componentProps: { |
|||
placeholder: '请输入告警标题', |
|||
maxLength: 20, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'repetitions', |
|||
label: '重复次数', |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: '重复次数不能为空', |
|||
trigger: 'change', |
|||
}, |
|||
], |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
allowClear: true, |
|||
placeholder: '请选择重复次数', |
|||
|
|||
options: [ |
|||
{ |
|||
label: '单次', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: '重复', |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: '累计', |
|||
value: 3, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'priority', |
|||
label: '优先级', |
|||
component: 'NsSelect', |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: '优先级不能为空', |
|||
trigger: 'change', |
|||
}, |
|||
], |
|||
componentProps: { |
|||
allowClear: true, |
|||
placeholder: '请选择优先级', |
|||
options: [ |
|||
{ |
|||
label: '紧急', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: '重要', |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: '一般', |
|||
value: 3, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'priority', |
|||
label: '监测频率', |
|||
component: 'NsSelect', |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: '监测频率不能为空', |
|||
trigger: 'change', |
|||
}, |
|||
], |
|||
componentProps: { |
|||
allowClear: true, |
|||
placeholder: '请选择监测频率', |
|||
componentProps: { |
|||
api: '/api/community/objs/DictItem', |
|||
params: { |
|||
pageSize: 100, |
|||
code: 'MZ', |
|||
}, |
|||
placeholder: '请选择设备点位', |
|||
resultField: 'data', |
|||
labelField: 'dictName', |
|||
valueField: 'dictValue', |
|||
immediate: true, |
|||
autoSelectFirst: false, |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]; |
|||
//开关 |
|||
const changeSwitch = () => { |
|||
switch (infoObject.value.enableRules) { |
|||
case 1: |
|||
infoObject.value.enableRules = 0; |
|||
break; |
|||
case 0: |
|||
infoObject.value.enableRules = 1; |
|||
break; |
|||
} |
|||
}; |
|||
const btnClick = () => { |
|||
//表单校验 |
|||
formRef.value.triggerSubmit().then(() => { |
|||
//调用接口 |
|||
// http.post(deviceAlarms.addOrUpNewData, infoObject.value).then(() => { |
|||
// NsMessage.success('操作成功'); |
|||
// visible.value = false; |
|||
// emit('editObject', null); |
|||
// }); |
|||
}); |
|||
}; |
|||
const handleClose = () => { |
|||
// 清楚校验错误信息 |
|||
formRef.value.formElRef.clearValidate(); |
|||
console.log(infoObject.value); |
|||
visible.value = false; |
|||
NsMessage.success('操作成功'); |
|||
}; |
|||
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; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,197 @@ |
|||
import data from '../notificationManagementMock.json'; |
|||
import { http } from '/nerv-lib/util'; |
|||
import { NsMessage } from '/nerv-lib/component'; |
|||
import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms'; |
|||
|
|||
import { ref } from 'vue'; |
|||
const tableKeyMap = [ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'address', |
|||
customRender: (text: any) => { |
|||
return text.index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '优先级', |
|||
dataIndex: 'priority', |
|||
}, |
|||
{ |
|||
title: '告警标题', |
|||
dataIndex: 'alarmTitle', |
|||
}, |
|||
{ |
|||
title: '错误码', |
|||
dataIndex: 'errorCode', |
|||
}, |
|||
{ |
|||
title: '重复次数', |
|||
dataIndex: 'repetitions', |
|||
textEllipsis: true, |
|||
}, |
|||
{ |
|||
title: '监测时长', |
|||
dataIndex: 'monitor', |
|||
}, |
|||
{ |
|||
title: '是否启用', |
|||
dataIndex: 'enableRules', |
|||
}, |
|||
]; |
|||
const mockData = ref(data.listData); |
|||
const doWnload = (url: any) => { |
|||
const a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.href = encodeURI(url); |
|||
//设置下载的文件名
|
|||
// a.download = fileName.value;
|
|||
//触发a标签的点击事件，进行下载
|
|||
a.click(); |
|||
}; |
|||
|
|||
export const energyAlarmConfigs = ( |
|||
editeEnergyAlarm: any, |
|||
mainRefEquipmentAlarm: any, |
|||
energyAlarm: any, |
|||
configureDeviceAlarms: any, |
|||
) => { |
|||
return { |
|||
title: '告警规则', |
|||
api: deviceAlarms.getTableList, |
|||
value: mockData.value, |
|||
headerActions: [ |
|||
{ |
|||
label: '新增', |
|||
name: 'RoleTypeAdd', |
|||
type: 'primary', |
|||
handle: () => { |
|||
editeEnergyAlarm.value.toggle(); |
|||
}, |
|||
}, |
|||
{ |
|||
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'); |
|||
}, |
|||
}, |
|||
], |
|||
columns: tableKeyMap, |
|||
// rowSelection: null, 选择按钮
|
|||
columnActions: { |
|||
title: '操作', |
|||
actions: [ |
|||
{ |
|||
label: '编辑', |
|||
name: 'FeedBackDetail', |
|||
dynamicParams: ['uuid', 'appealType'], |
|||
handle: (data: any) => { |
|||
editeEnergyAlarm.value.toggle(data); |
|||
}, |
|||
}, |
|||
{ |
|||
label: '配置', |
|||
name: 'FeedBackDetail', |
|||
dynamicParams: ['uuid', 'appealType'], |
|||
handle: (data: any) => { |
|||
energyAlarm.value = !energyAlarm.value; |
|||
configureDeviceAlarms.value.setconfigureDeviceAlarmsData(data); |
|||
}, |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
name: 'FeedBackDetail', |
|||
dynamicParams: ['uuid', 'appealType'], |
|||
confirm: true, |
|||
handle: (data: any) => { |
|||
http.post(deviceAlarms.del, { id: data.id }).then(() => { |
|||
NsMessage.success('操作成功'); |
|||
mainRefEquipmentAlarm.value?.nsTableRef.reload(); |
|||
}); |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
|
|||
formConfig: { |
|||
schemas: [ |
|||
{ |
|||
field: 'priority', |
|||
label: '告警优先级', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
placeholder: '请选择告警优先级', |
|||
options: [ |
|||
{ |
|||
label: '紧急', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: '重要', |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: '一般', |
|||
value: 3, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'alarmTitle', |
|||
label: '告警标题', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入告警标题关键字', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'errorCode', |
|||
label: '错误码', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入告警错误码', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'enableRules', |
|||
label: '启用状态', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
placeholder: '请选择启用状态', |
|||
options: [ |
|||
{ |
|||
label: '启用', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: '关闭', |
|||
value: 0, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
// pagination: { pageSizeOptions: false },
|
|||
rowKey: 'id', |
|||
}; |
|||
}; |
|||
@ -0,0 +1,81 @@ |
|||
<!-- eslint-disable vue/multi-word-component-names --> |
|||
<template> |
|||
<a-row type="flex"> |
|||
<a-col :span="4"> |
|||
<div style="padding: 0 20px; width: 100%; height: 100%"> |
|||
<tree ref="treeRef" /> |
|||
</div> |
|||
</a-col> |
|||
<a-col :span="20"> |
|||
<div style="width: 100%; height: 100%"> |
|||
<div class="ns-right-title"> |
|||
<span>历史数据</span> |
|||
<div class="button"> |
|||
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" /> |
|||
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" /> |
|||
</div> |
|||
</div> |
|||
<graph ref="graphRef" v-if="isGraph" /> |
|||
<environment-table ref="tableRef" v-else /> |
|||
</div> |
|||
</a-col> |
|||
</a-row> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue'; |
|||
import tree from './tree/index.vue'; |
|||
import graph from './graph/index.vue'; |
|||
import environmentTable from './table/index.vue'; |
|||
|
|||
const iconName = ref('biaoge'); |
|||
|
|||
const treeRef = ref(); |
|||
const graphRef = ref(); |
|||
const tableRef = ref(); |
|||
|
|||
let isGraph = ref(true); |
|||
|
|||
defineOptions({ |
|||
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效 |
|||
}); |
|||
|
|||
const downloadChart = () => { |
|||
if (isGraph.value) { |
|||
if (graphRef.value) { |
|||
graphRef.value.downloadChart(); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
function change() { |
|||
isGraph.value = !isGraph.value; |
|||
if (iconName.value == 'biaoge') { |
|||
iconName.value = 'bingtu'; |
|||
} else { |
|||
iconName.value = 'biaoge'; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.ns-right-title { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
user-select: text; |
|||
margin-bottom: 5px; |
|||
padding-bottom: 10px; |
|||
padding-top: 10px; |
|||
border-bottom: 1px solid #e9e9e9; |
|||
|
|||
> span { |
|||
padding-left: 10px; |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
.button { |
|||
display: inline-block; |
|||
padding-right: 10px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue