add:对接设备告警 对接设备告警 设备类型 设备名称 设备点位
This commit is contained in:
zhaohy
@@ -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>
|
||||
Reference in New Issue
Block a user