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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user