|
|
@@ -1,29 +1,37 @@
|
|
|
<template>
|
|
|
<div class="system-edit-dic-container">
|
|
|
- <el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '告警'" v-model="isShowDialog" width="50%">
|
|
|
- <el-form :model="ruleForm" ref="formRef" :rules="rules" v-if="isShowDialog" label-width="110px">
|
|
|
- <el-form-item label="名称" prop="name">
|
|
|
- <el-input v-model="ruleForm.name" placeholder="请输入名称" />
|
|
|
+ <!-- 编辑告警/新增告警 -->
|
|
|
+ <el-dialog :title="ruleForm.id !== 0 ? $t('message.alarmCenter.alarmConfig.editAlarm') : $t('message.alarmCenter.alarmConfig.addAlarm')" v-model="isShowDialog" width="60%">
|
|
|
+ <el-form :model="ruleForm" ref="formRef" :rules="rules" v-if="isShowDialog" label-width="118px">
|
|
|
+ <!-- 名称 -->
|
|
|
+ <el-form-item :label="$t('message.alarmCenter.labels.name')" prop="name">
|
|
|
+ <!-- 请输入名称 -->
|
|
|
+ <el-input v-model="ruleForm.name" :placeholder="$t('message.alarmCenter.placeholders.pleaseInputName')" />
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="告警级别" prop="level">
|
|
|
+ <!-- 告警级别 -->
|
|
|
+ <el-form-item :label="$t('message.alarmCenter.labels.level')" prop="level">
|
|
|
<el-radio-group v-model="ruleForm.level">
|
|
|
<el-radio :label="Number(item.value)" v-for="item in alarm_type" :key="item.value">{{ item.label }}</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="选择产品" prop="productKey">
|
|
|
- <el-select v-model="ruleForm.productKey" filterable placeholder="请选择产品" @change="setType()">
|
|
|
+ <!-- 选择产品 -->
|
|
|
+ <el-form-item :label="$t('message.alarmCenter.labels.productKey')" prop="productKey">
|
|
|
+ <!-- 请选择产品 -->
|
|
|
+ <el-select v-model="ruleForm.productKey" filterable :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectProduct')" @change="setType()">
|
|
|
<el-option v-for="item in productData" :key="item.key" :label="item.name" :value="item.key">
|
|
|
<span style="float: left">{{ item.name }}</span>
|
|
|
<span style="float: right; font-size: 13px">{{ item.key }}</span>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="选择设备" prop="deviceKey">
|
|
|
- <el-select v-model="ruleForm.deviceKey" filterable placeholder="请选择设备">
|
|
|
- <el-option label="全部" value="all">全部</el-option>
|
|
|
+ <!-- 选择设备 -->
|
|
|
+ <el-form-item :label="$t('message.alarmCenter.labels.deviceKey')" prop="deviceKey">
|
|
|
+ <!-- 请选择设备 -->
|
|
|
+ <el-select v-model="ruleForm.deviceKey" filterable :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectDevice')">
|
|
|
+ <!-- 全部 -->
|
|
|
+ <el-option label="全部" value="all">{{ $t('message.alarmCenter.alarmConfig.all') }}</el-option>
|
|
|
<el-option v-for="item in sourceData" :key="item.key" :label="item.name" :value="item.key">
|
|
|
<span style="float: left">{{ item.name }}</span>
|
|
|
<span style="float: right; font-size: 13px">{{ item.key }}</span>
|
|
|
@@ -31,14 +39,17 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="触发方式" prop="triggerType" v-if="ruleForm.productKey">
|
|
|
+ <!-- 触发方式 -->
|
|
|
+ <el-form-item :label="$t('message.alarmCenter.labels.triggerType')" prop="triggerType" v-if="ruleForm.productKey">
|
|
|
<el-radio-group v-model="ruleForm.triggerType" @change="getRadio()">
|
|
|
<el-radio :label="item.type" v-for="item in typeData" :key="item.type">{{ item.title }}</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="选择事件" prop="eventKey" v-if="ruleForm.triggerType === 4">
|
|
|
- <el-select v-model="ruleForm.eventKey" filterable placeholder="请选择事件" @change="eventTypeChange">
|
|
|
+ <!-- 选择事件 -->
|
|
|
+ <el-form-item :label="$t('message.alarmCenter.labels.eventKey')" prop="eventKey" v-if="ruleForm.triggerType === 4">
|
|
|
+ <!-- 请选择事件 -->
|
|
|
+ <el-select v-model="ruleForm.eventKey" filterable :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectEventKey')" @change="eventTypeChange">
|
|
|
<el-option v-for="item in eventList" :key="item.key" :label="item.name" :value="item.key"></el-option>
|
|
|
</el-select>
|
|
|
|
|
|
@@ -46,18 +57,23 @@
|
|
|
|
|
|
|
|
|
<div v-if="ruleForm.triggerType > 2">
|
|
|
- <el-divider content-position="left">触发条件</el-divider>
|
|
|
+ <!-- 触发条件 -->
|
|
|
+ <el-divider content-position="left">{{ $t('message.alarmCenter.labels.requestParams') }}</el-divider>
|
|
|
<div class="box-content">
|
|
|
<div v-for="(item, index) in requestParams" :key="index">
|
|
|
- <div style="text-align: center" v-if="index > 0">
|
|
|
+ <div style="text-align: center" v-if="index > 0" >
|
|
|
<el-icon>
|
|
|
<Top />
|
|
|
</el-icon>
|
|
|
<div>
|
|
|
- <el-select v-model="item.andOr" placeholder="选择条件关系">
|
|
|
- <el-option label="无" :value="0" />
|
|
|
- <el-option label="并且" :value="1" />
|
|
|
- <el-option label="或" :value="2" />
|
|
|
+ <!-- 选择条件关系 -->
|
|
|
+ <el-select v-model="item.andOr" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectRelation')">
|
|
|
+ <!-- 无 -->
|
|
|
+ <el-option :label="$t('message.alarmCenter.alarmConfig.noRelation')" :value="0" />
|
|
|
+ <!-- 并且 -->
|
|
|
+ <el-option :label="$t('message.alarmCenter.alarmConfig.andRelation')" :value="1" />
|
|
|
+ <!-- 或 -->
|
|
|
+ <el-option :label="$t('message.alarmCenter.alarmConfig.orRelation')" :value="2" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<el-icon>
|
|
|
@@ -79,7 +95,8 @@
|
|
|
</div>
|
|
|
|
|
|
<div style="display: flex">
|
|
|
- <el-divider content-position="left">参数设置</el-divider>
|
|
|
+ <!-- 参数设置 -->
|
|
|
+ <el-divider content-position="left">{{ $t('message.alarmCenter.labels.paramSetting') }}</el-divider>
|
|
|
</div>
|
|
|
|
|
|
<div v-for="(aaa, bbb) in item.filters" :key="bbb">
|
|
|
@@ -88,10 +105,14 @@
|
|
|
<Top />
|
|
|
</el-icon>
|
|
|
<div>
|
|
|
- <el-select v-model="aaa.andOr" placeholder="选择条件关系" style="width: 150px">
|
|
|
- <el-option label="无" :value="0" />
|
|
|
- <el-option label="并且" :value="1" />
|
|
|
- <el-option label="或" :value="2" />
|
|
|
+ <!-- 选择条件关系 -->
|
|
|
+ <el-select v-model="aaa.andOr" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectRelation')" style="width: 150px">
|
|
|
+ <!-- 无 -->
|
|
|
+ <el-option :label="$t('message.alarmCenter.alarmConfig.noRelation')" :value="0" />
|
|
|
+ <!-- 并且 -->
|
|
|
+ <el-option :label="$t('message.alarmCenter.alarmConfig.andRelation')" :value="1" />
|
|
|
+ <!-- 或 -->
|
|
|
+ <el-option :label="$t('message.alarmCenter.alarmConfig.orRelation')" :value="2" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<el-icon>
|
|
|
@@ -99,13 +120,16 @@
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
<div class="content-f">
|
|
|
- <el-select v-model="aaa.key" :placeholder="ruleForm.triggerType === 4 && !ruleForm.eventKey ? '请先选择事件' : '选择参数'" style="width: 320px">
|
|
|
+ <!-- 请选择事件/请选择参数 -->
|
|
|
+ <el-select v-model="aaa.key" :placeholder="ruleForm.triggerType === 4 && !ruleForm.eventKey ? $t('message.alarmCenter.placeholders.pleaseSelectEventKey') : $t('message.alarmCenter.placeholders.pleaseSelectRequestParam')" style="width: 320px">
|
|
|
<el-option v-for="a in triData" :key="a.paramKey" :label="a.title" :value="a.paramKey" />
|
|
|
</el-select>
|
|
|
- <el-select v-model="aaa.operator" placeholder="选择操作符" style="width: 320px">
|
|
|
+ <!-- 选择操作符 -->
|
|
|
+ <el-select v-model="aaa.operator" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectOperator')" style="width: 320px">
|
|
|
<el-option v-for="b in operData" :key="b.type" :label="b.title" :value="b.type" />
|
|
|
</el-select>
|
|
|
- <el-input v-model="aaa.value[0]" placeholder="请输入条件值" style="width: 320px" />
|
|
|
+ <!-- 请输入条件值 -->
|
|
|
+ <el-input v-model="aaa.value[0]" :placeholder="$t('message.alarmCenter.placeholders.pleaseInputConditionValue')" style="width: 320px" />
|
|
|
|
|
|
<div class="conicon">
|
|
|
<el-icon @click="delParamss(index, bbb)">
|
|
|
@@ -114,18 +138,20 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <el-button type="primary" text bg class="addbutton" @click="addParams(index)">增加条件</el-button>
|
|
|
+ <!-- 增加条件 -->
|
|
|
+ <el-button type="primary" text bg class="addbutton" @click="addParams(index)">{{ $t('message.alarmCenter.actions.addCondition') }}</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-button type="success" text bg class="addbutton" @click="addParamss">增加分组</el-button>
|
|
|
+ <!-- 增加分组 -->
|
|
|
+ <el-button type="success" text bg class="addbutton" @click="addParamss">{{ $t('message.alarmCenter.actions.addGroup') }}</el-button>
|
|
|
</div>
|
|
|
|
|
|
- <el-divider content-position="left">执行动作</el-divider>
|
|
|
+ <!-- 执行动作 -->
|
|
|
+ <el-divider content-position="left">{{ $t('message.alarmCenter.labels.executeAction') }}</el-divider>
|
|
|
<div class="box-content">
|
|
|
<div v-for="(item, index) in action" :key="index">
|
|
|
- <div style="
|
|
|
+ <div class="notify-item-wrap" style="
|
|
|
padding: 10px;
|
|
|
border: 1px solid var(--next-border-color-light);
|
|
|
background-color: var(--next-border-color-light);
|
|
|
@@ -139,23 +165,28 @@
|
|
|
</div>
|
|
|
|
|
|
<div style="display: flex">
|
|
|
- <el-divider content-position="left">消息通知</el-divider>
|
|
|
+ <!-- 消息通知 -->
|
|
|
+ <el-divider content-position="left">{{ $t('message.alarmCenter.labels.messageNotification') }}</el-divider>
|
|
|
</div>
|
|
|
|
|
|
<div class="content-f">
|
|
|
- <el-select v-model="item.sendGateway" placeholder="请选择通知方式" style="width: 320px" @change="getNode(item.sendGateway, index)">
|
|
|
+ <!-- 请选择通知方式 -->
|
|
|
+ <el-select v-model="item.sendGateway" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectNotificationWay')" style="width: 320px" @change="getNode(item.sendGateway, index)">
|
|
|
<el-option v-for="a in notice_send_gateway" :key="a.value" :label="a.label" :value="a.value" />
|
|
|
</el-select>
|
|
|
- <el-select v-model="item.noticeConfig" placeholder="请选择通知配置" style="width: 320px" @change="getTem(item.noticeConfig, index)">
|
|
|
+ <!-- 请选择通知配置 -->
|
|
|
+ <el-select v-model="item.noticeConfig" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectNotificationConfiguration')" style="width: 320px" @change="getTem(item.noticeConfig, index)">
|
|
|
<el-option v-for="b in sendGatewayData[index]" :key="b.id" :label="b.title" :value="b.id" />
|
|
|
</el-select>
|
|
|
- <el-select v-model="item.noticeTemplate" placeholder="请选择通知模板" style="width: 320px">
|
|
|
+ <!-- 请选择通知模板 -->
|
|
|
+ <el-select v-model="item.noticeTemplate" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectNotificationTemplate')" style="width: 320px">
|
|
|
<el-option v-for="c in noticeConfigData[index]" :key="c.id" :label="c.title" :value="c.id" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div style="display: flex; margin-bottom: 10px" v-for="(ph, phindex) in item.addressee" :key="phindex">
|
|
|
- <el-input v-model="ph.phone" placeholder="请输入接收人信息" style="width: 320px" />
|
|
|
+ <!-- 请输入接收人信息 -->
|
|
|
+ <el-input v-model="ph.phone" :placeholder="$t('message.alarmCenter.placeholders.pleaseInputRecipientInformation')" style="width: 320px" />
|
|
|
<el-icon style="width: 32px; height: 32px; font-size: 24px" v-if="phindex == 0" @click="AddPhone(index)">
|
|
|
<CirclePlus />
|
|
|
</el-icon>
|
|
|
@@ -167,12 +198,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-button type="success" text bg class="addbutton" @click="addAction">增加执行</el-button>
|
|
|
+ <!-- 增加执行 -->
|
|
|
+ <el-button type="success" text bg class="addbutton" @click="addAction">{{ $t('message.alarmCenter.actions.addExecution') }}</el-button>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
|
- <el-button @click="onCancel">取 消</el-button>
|
|
|
- <el-button type="primary" @click="onSubmit">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
|
|
|
+ <!-- 取消 -->
|
|
|
+ <el-button @click="onCancel">{{ $t('message.alarmCenter.actions.cancel') }}</el-button>
|
|
|
+ <!-- 编辑/新增 -->
|
|
|
+ <el-button type="primary" @click="onSubmit">{{ ruleForm.id !== 0 ? $t('message.alarmCenter.actions.edit') : $t('message.alarmCenter.actions.add') }}</el-button>
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
@@ -180,11 +214,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance, watch } from 'vue';
|
|
|
+import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance, watch, computed } from 'vue';
|
|
|
import api from '/@/api/datahub';
|
|
|
import iotapi from '/@/api/device';
|
|
|
import alarm from '/@/api/alarm';
|
|
|
import notice from '/@/api/notice';
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+
|
|
|
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
import { Delete, CircleClose, Top, Bottom, CirclePlus, Remove } from '@element-plus/icons-vue';
|
|
|
@@ -204,7 +240,7 @@ interface DicState {
|
|
|
id: number;
|
|
|
isShowDialog: boolean;
|
|
|
ruleForm: RuleFormState;
|
|
|
- rules: any;
|
|
|
+ // rules: any;
|
|
|
sourceData: any;
|
|
|
productData: any;
|
|
|
typeData: any;
|
|
|
@@ -223,6 +259,18 @@ export default defineComponent({
|
|
|
components: { Delete, CircleClose, Top, Bottom, CirclePlus, Remove },
|
|
|
|
|
|
setup(prop, { emit }) {
|
|
|
+ const { t, locale } = useI18n();
|
|
|
+
|
|
|
+ const rules = computed(() => ({
|
|
|
+ // 告警名称不能为空
|
|
|
+ name: [{ required: true, message: t('message.alarmCenter.validate.name'), trigger: 'change' }],
|
|
|
+ // 告警级别不能为空
|
|
|
+ level: [{ required: true, message: t('message.alarmCenter.validate.level'), trigger: 'change' }],
|
|
|
+ // 请选择产品
|
|
|
+ productKey: [{ required: true, message: t('message.alarmCenter.validate.productKey'), trigger: 'change' }],
|
|
|
+ // 请选择设备
|
|
|
+ deviceKey: [{ required: true, message: t('message.alarmCenter.validate.deviceKey'), trigger: 'change' }],
|
|
|
+ }))
|
|
|
const myRef = ref<HTMLElement | null>(null);
|
|
|
const formRef = ref<HTMLElement | null>(null);
|
|
|
const { proxy } = getCurrentInstance() as any;
|
|
|
@@ -238,7 +286,6 @@ export default defineComponent({
|
|
|
typeData: [],
|
|
|
triData: [],
|
|
|
operData: [],
|
|
|
- levelData: [],
|
|
|
sendGatewayData: [],
|
|
|
noticeConfigData: [],
|
|
|
eventList: [],
|
|
|
@@ -296,13 +343,7 @@ export default defineComponent({
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
- },
|
|
|
- rules: {
|
|
|
- name: [{ required: true, message: '告警名称不能为空', trigger: 'change' }],
|
|
|
- level: [{ required: true, message: '告警级别不能为空', trigger: 'change' }],
|
|
|
- productKey: [{ required: true, message: '请选择产品', trigger: 'change' }],
|
|
|
- deviceKey: [{ required: true, message: '请选择设备', trigger: 'change' }],
|
|
|
- },
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
// 打开弹窗
|
|
|
@@ -437,6 +478,17 @@ export default defineComponent({
|
|
|
gettriData()
|
|
|
};
|
|
|
|
|
|
+ // // 监听语言变化，重新验证表单
|
|
|
+ // watch(locale, () => {
|
|
|
+ // // 延迟执行确保翻译更新完成
|
|
|
+ // setTimeout(() => {
|
|
|
+ // const formWrap = unref(formRef) as any;
|
|
|
+ // if (formWrap) {
|
|
|
+ // formWrap.clearValidate(); // 清除当前验证状态
|
|
|
+ // }
|
|
|
+ // }, 100);
|
|
|
+ // });
|
|
|
+
|
|
|
watch(() => state.ruleForm.productKey, (productKey) => {
|
|
|
if (!productKey) return
|
|
|
// 切换产品时候重新获取事件列表，清空之前选中的事件
|
|
|
@@ -466,14 +518,16 @@ export default defineComponent({
|
|
|
if (state.ruleForm.id !== 0) {
|
|
|
//修改
|
|
|
alarm.common.edit(state.ruleForm).then(() => {
|
|
|
- ElMessage.success('告警修改成功');
|
|
|
+ // 告警编辑成功
|
|
|
+ ElMessage.success(t('message.alarmCenter.messages.editSuccess'));
|
|
|
closeDialog(); // 关闭弹窗
|
|
|
emit('dataList');
|
|
|
});
|
|
|
} else {
|
|
|
//添加
|
|
|
alarm.common.add(state.ruleForm).then(() => {
|
|
|
- ElMessage.success('告警添加成功');
|
|
|
+ // 告警新增成功
|
|
|
+ ElMessage.success(t('message.alarmCenter.messages.addSuccess'));
|
|
|
closeDialog(); // 关闭弹窗
|
|
|
emit('dataList');
|
|
|
});
|
|
|
@@ -608,6 +662,8 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
return {
|
|
|
+ locale,
|
|
|
+ rules,
|
|
|
alarm_type,
|
|
|
getRadio,
|
|
|
gettriData,
|
|
|
@@ -637,6 +693,11 @@ export default defineComponent({
|
|
|
});
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
+[data-theme="dark"] {
|
|
|
+ .notify-item-wrap {
|
|
|
+ background-color: transparent!important;;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
.inline {
|
|
|
display: inline-flex;
|
