<script setup name="pwrAlarmParams">
|
import { ref, reactive, computed, watch, onMounted } from 'vue';
|
|
import useElement from "@/hooks/useElement.js";
|
const { $loading, $message, $confirm } = useElement();
|
|
import {
|
setPwrAlmParam,
|
} from '@/api/alarm.js';
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
type: {
|
type: [String, Number],
|
validate: (val) => [0, 1, 2, '0', '1', '2'].includes(val),
|
default: 0
|
},
|
info: {
|
type: Object,
|
default: () => ({})
|
}
|
});
|
|
const emit = defineEmits(['update:visible', 'change']);
|
|
const initFlag = ref(false);
|
|
const layout = {
|
gutter: 16,
|
span: 8,
|
}
|
|
const opt0 = {
|
alarmLimithUpper: '上上限告警阈值',
|
alarmLimithUpperLevel: '上上限告警等级',
|
alarmLimithUpperEn: '上上限制告警使能',
|
alarmLimith: '上限告警阈值',
|
alarmLimithLevel: '上限告警等级',
|
alarmLimithEn: '上限告警等级使能',
|
};
|
|
const opt1 = {
|
alarmLimitl: '下限告警阈值',
|
alarmLimitlLevel: '下限告警等级',
|
alarmLimitlEn: '下限告警使能',
|
alarmLimitlLower: '下下限告警阈值',
|
alarmLimitlLowerLevel: '下下限告警等级',
|
alarmLimitlLowerEn: '下下限告警使能',
|
};
|
|
|
|
let option = {};
|
switch (props.type) {
|
case 0:
|
case '0':
|
option = {
|
...opt0,
|
...opt1,
|
almDelayTime: '告警延时时长',
|
};
|
break;
|
case 1:
|
case '1':
|
option = {
|
...opt0,
|
almDelayTime: '告警延时时长',
|
};
|
break;
|
case 2:
|
case '2':
|
option = {
|
...opt1,
|
almDelayTime: '告警延时时长',
|
};
|
break;
|
}
|
|
let option1 = {
|
...opt0,
|
...opt1,
|
almDelayTime: '告警延时时长',
|
};
|
|
|
const form1 = reactive({});
|
|
const almId = ref('');
|
|
Object.keys(option).forEach(key => {
|
form1[key] = '';
|
});
|
|
|
const alarmLevels = [
|
{
|
label: '一级告警',
|
value: 1,
|
},
|
{
|
label: '二级告警',
|
value: 2,
|
},
|
{
|
label: '三级告警',
|
value: 3,
|
},
|
{
|
label: '四级告警',
|
value: 4,
|
},
|
];
|
|
async function submit() {
|
// console.log(obj, '=============');
|
let loading = $loading();
|
let res = await setPwrAlmParam([form1]);
|
let { code, data } = res;
|
if (code && data) {
|
$message.success('操作成功');
|
emit('update:visible', false);
|
emit('change');
|
} else {
|
$message.error('操作失败');
|
}
|
loading.close();
|
}
|
|
function close() {
|
emit('update:visible', false);
|
}
|
|
onMounted(() => {
|
Object.keys(option1).forEach(key => {
|
form1[key] = props.info[key];
|
});
|
form1.almId = props.info.almId;
|
form1.powerId = props.info.powerId;
|
form1.alarmType = props.info.alarmType;
|
form1.alarmSource = props.info.alarmSource;
|
form1.alarmEnNode = props.info.alarmEnNode;
|
initFlag.value = true;
|
});
|
</script>
|
|
<template>
|
<div class="alarm-form">
|
<!-- 表单区域 -->
|
<div class="content">
|
<el-form ref="formRef" :model="form1" label-width="10em" :key="initFlag">
|
<el-row :gutter="layout.gutter">
|
<el-col
|
:span="layout.span"
|
v-for="(item, idx) in Object.keys(option)"
|
:key="'list1_' + idx"
|
>
|
<el-form-item :label="option[item]" :prop="item">
|
<el-checkbox
|
:checked="form1[item] == 1"
|
@change="(v) => form1[item] = v ? 1 : 0"
|
v-if="/En$/.test(item)"
|
></el-checkbox>
|
<el-select
|
v-else-if="/Level/.test(item)"
|
v-model="form1[item]"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="(item, key) in alarmLevels"
|
:key="'list3_' + idx + '_' + key"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
<el-input v-else v-model="form1[item]"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="footer">
|
<el-button @click="close">关闭</el-button>
|
<el-button type="primary" @click="submit">提交</el-button>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.search-container {
|
margin-bottom: 10px;
|
padding-left: 20px;
|
display: flex;
|
align-items: center;
|
|
.label {
|
margin-right: 10px;
|
font-size: 20px;
|
font-family: 'YouSheBiaoTiHei';
|
}
|
|
.el-select {
|
width: 200px;
|
}
|
}
|
|
.footer {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 8px;
|
}
|
</style>
|
