<script setup name="alarmParams">
|
import { ref, reactive, computed, watch, onMounted } from 'vue';
|
|
import useElement from "@/hooks/useElement.js";
|
const { $loading, $message, $confirm } = useElement();
|
|
import {
|
setBattAlmParam,
|
} from '@/api/alarm.js';
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
info: {
|
type: Object,
|
default: () => ({})
|
}
|
});
|
|
const emit = defineEmits(['update:visible', 'change']);
|
|
const initFlag = ref(false);
|
|
const layout = {
|
gutter: 16,
|
span: 8,
|
}
|
const option = {
|
// almId: '告警ID',
|
// almName: '电池告警名称',
|
almHighCoeUpper: '上上限告警阈值',
|
almHighLevelUpper: '上上限告警等级',
|
almHighCoeUpperEn: '上上限制告警使能',
|
almHighCoe: '上限告警阈值',
|
almHighLevel: '上限告警等级',
|
almHighEn: '上限告警等级使能',
|
almLowCoe: '下限告警阈值',
|
almLowLevel: '下限告警等级',
|
almLowEn: '下限告警使能',
|
almLowCoeLower: '下下限告警阈值',
|
almLowLevelLower: '下下限告警等级',
|
almLowCoeLowerEn: '下下限告警使能',
|
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 setBattAlmParam([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(option).forEach(key => {
|
form1[key] = props.info[key];
|
});
|
form1.almId = props.info.almId;
|
form1.battgroupId = props.info.battgroupId;
|
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>
|
