新增告警添加修改删除启用，未完善

src/api/alarm/index.ts

@@ -0,0 +1,19 @@
+import { get, post, del, put } from '/@/utils/request';
+
+export default {
+  common: {
+    levelall: (id: number) => get('/alarm/level/all', { id }),
+    trigger_type: (productKey: number) => get('/alarm/rule/trigger_type', { productKey }),
+    trigger_param: (productKey: number) => get('/alarm/rule/trigger_param', { productKey }),
+    operator: (productKey: number) => get('/alarm/rule/operator', { productKey }),
+    getList: (params: object) => get('/alarm/rule/list', params),
+    add: (data: object) => post('/alarm/rule/add', data),
+    delete: (id: number) => del('/alarm/rule/del', { id }),
+    edit: (data: object) => put('/alarm/rule/edit', data),
+    detail: (id: number) => get('/alarm/rule/detail', { id }),
+    deploy: (data: object) => post('/alarm/rule/deploy', data),
+    undeploy: (data: object) => post('/alarm/rule/undeploy', data),
+
+
+    },
+}

src/views/system/notifications/setting/component/edit.vue

@@ -0,0 +1,397 @@
+<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" size="default" label-width="110px">
+				<el-form-item label="名称" prop="name">
+					<el-input v-model="ruleForm.name" placeholder="请输入名称" />
+				</el-form-item>
+
+				<el-form-item label="告警级别" prop="level">
+					<el-radio-group v-model="ruleForm.level">
+						<el-radio :label="item.level" v-for="item in levelData">{{ item.name }}</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-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id">
+							<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 v-for="item in sourceData" :key="item.id" :label="item.name" :value="item.id">
+							<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="triggerType" v-if="ruleForm.productKey">
+					<el-radio-group v-model="ruleForm.triggerType">
+						<el-radio :label="item.type" v-for="item in typeData">{{ item.title }}</el-radio>
+					</el-radio-group>
+				</el-form-item>
+
+				<el-divider content-position="left">触发条件</el-divider>
+				<div class="box-content">
+					<div v-for="(item, index) in requestParams" :key="index">
+						<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>
+							</div>
+							<el-icon><Bottom /></el-icon>
+						</div>
+
+						<div style="padding: 10px; border: 1px solid var(--next-border-color-light);background-color: var(--next-border-color-light); margin-bottom: 10px; position: relative">
+							<div class="conicon" style="width: 100%; text-align: right; position: absolute; right: -8px; top: -8px; color: red">
+								<el-icon @click="delParams(index)"><CircleClose /></el-icon>
+							</div>
+
+							<div style="display: flex">
+								<el-divider content-position="left">参数设置</el-divider>
+							</div>
+
+							<div v-for="(aaa, bbb) in item.filters" :key="bbb">
+								<div style="text-align: center" v-if="bbb > 0">
+									<el-icon><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>
+									</div>
+									<el-icon><Bottom /></el-icon>
+								</div>
+								<div class="content-f">
+									<el-select v-model="aaa.key" placeholder="选择参数" 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-option v-for="b in operData" :key="b.type" :label="b.title" :value="b.type" />
+									</el-select>
+									<el-input v-model="aaa.value" placeholder="请输入条件值" style="width: 320px" />
+
+									<div class="conicon">
+										<el-icon @click="delParamss(index, bbb)"><Delete /></el-icon>
+									</div>
+								</div>
+							</div>
+
+							<el-button type="primary" class="addbutton" @click="addParams(index)">增加条件</el-button>
+						</div>
+					</div>
+				</div>
+
+				<el-button type="success" class="addbutton" @click="addParamss">增加分组</el-button>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
+import api from '/@/api/datahub';
+import iotapi from '/@/api/device';
+import alarm from '/@/api/alarm';
+
+import { ElMessage } from 'element-plus';
+import { Delete, Plus, CircleClose, Top, Bottom, Minus, Right } from '@element-plus/icons-vue';
+
+interface RuleFormState {
+	id: number;
+	name: string;
+	triggerType: number;
+	level: string;
+	productKey: string;
+	deviceKey: string;
+	triggerCondition:string;
+	
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+	rules: {};
+	sourceData: [];
+	productData: [];
+	typeData: [];
+	triData:[];
+	operData:[];
+	levelData: [];
+	requestParams: [];
+}
+
+export default defineComponent({
+	name: 'Edit',
+	components: { Delete, Plus, CircleClose, Minus, Right, Top, Bottom },
+
+	setup(prop, { emit }) {
+		const myRef = ref<HTMLElement | null>(null);
+		const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DicState>({
+			id: 0,
+			isShowDialog: false,
+			sourceData: [],
+			productData: [],
+			typeData: [],
+			triData:[],
+			operData:[],
+			levelData: [],
+			requestParams: [
+				{
+					andOr: '',
+					filters: [
+						{
+							key: '',
+							operator: '',
+							value: '',
+							andOr: 0,
+						},
+					],
+				},
+			],
+			ruleForm: {
+				id: 0,
+				name: '',
+				triggerType: 1,
+				level: '',
+				productKey: '',
+				deviceKey: '',
+				triggerCondition:[{
+					andOr: '',
+					filters: [
+						{
+							key: '',
+							operator: '',
+							value: '',
+							andOr: 0,
+						},
+					],
+				}]
+			},
+			rules: {
+				name: [{ required: true, message: '告警名称不能为空', trigger: 'blur' }],
+				level: [{ required: true, message: '告警级别不能为空', trigger: 'blur' }],
+				productKey: [{ required: true, message: '请选择产品', trigger: 'blur' }],
+				deviceKey: [{ required: true, message: '请选择设备', trigger: 'blur' }],
+			},
+		});
+
+		// 打开弹窗
+		const openDialog = (row: RuleFormState | null) => {
+			resetForm();
+			getDevData();
+			if (row) {
+				alarm.common.detail(row.id).then((res: any) => {
+					state.requestParams = res.data.condition.triggerCondition;
+					state.ruleForm = res.data;
+					setType();
+				});
+			}
+			state.isShowDialog = true;
+		};
+
+		//获取设备列表
+		const getDevData = () => {
+			api.common.getdevList({}).then((res: any) => {
+				state.sourceData = res.device;
+			});
+
+			iotapi.product.getLists({ status: 1 }).then((res: any) => {
+				state.productData = res.product || [];
+			});
+			alarm.common.levelall('').then((res: any) => {
+				state.levelData = res.list || [];
+			});
+			alarm.common.operator('').then((res: any) => {
+				state.operData = res.list || [];
+			});
+			
+		};
+
+		const resetForm = () => {
+			state.requestParams= [
+				{
+					andOr: '',
+					filters: [
+						{
+							key: '',
+							operator: '',
+							value: '',
+							andOr: 0,
+						},
+					],
+				},
+			],
+			state.ruleForm = {
+				id: 0,
+				name: '',
+				triggerType: 1,
+				level: '',
+				productKey: '',
+				deviceKey: '',
+				triggerCondition:[{
+					andOr: '',
+					filters: [
+						{
+							key: '',
+							operator: '',
+							value: '',
+							andOr: 0,
+						},
+					],
+				}]
+			};
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+
+		// 新增
+		const onSubmit = () => {
+			const formWrap = unref(formRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					state.ruleForm.triggerCondition = state.requestParams;
+					1
+					if (state.ruleForm.id !== 0) {
+						//修改
+						alarm.common.edit(state.ruleForm).then(() => {
+							ElMessage.success('告警修改成功');
+							closeDialog(); // 关闭弹窗
+							emit('typeList');
+						});
+					} else {
+						//添加
+						alarm.common.add(state.ruleForm).then(() => {
+							ElMessage.success('告警添加成功');
+							closeDialog(); // 关闭弹窗
+							emit('dataList');
+						});
+					}
+				}
+			});
+		};
+
+		const delParams = (index) => {
+			state.requestParams.splice(index, 1);
+		};
+
+		const delParamss = (index, bbb) => {
+			state.requestParams[index].filters.splice(bbb, 1);
+		};
+
+		const addParamss = () => {
+			state.requestParams.push({
+				andOr: '',
+				filters: [
+					{
+						key: '',
+						operator: '',
+						value: '',
+						andOr: '',
+					},
+				],
+			});
+		};
+		const addParams = (index) => {
+			state.requestParams[index].filters.push({
+				key: '',
+				operator: '',
+				value: '',
+				andOr: '',
+			});
+		};
+
+		const setType=()=>{
+	
+			alarm.common.trigger_type(state.ruleForm.productKey).then((res: any) => {
+				state.typeData = res.list || [];
+			});
+
+			alarm.common.trigger_param(state.ruleForm.productKey).then((res: any) => {
+				state.triData = res.list || [];
+			});
+
+
+		}
+
+		return {
+			setType,
+			addParams,
+			addParamss,
+			delParamss,
+			delParams,
+			openDialog,
+			closeDialog,
+			getDevData,
+			onCancel,
+			onSubmit,
+			formRef,
+			myRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+<style>
+.inline {
+	display: inline-flex;
+}
+.el-input__wrapper {
+	width: 98%;
+}
+
+.box-content {
+	border: 1px solid #e8e8e8;
+	margin: 10px;
+	padding: 10px;
+}
+
+.content-f {
+	display: flex;
+	margin-bottom: 10px;
+}
+.content-f .el-input__wrapper {
+	margin-right: 5px;
+}
+.addbutton {
+	width: 100%;
+	margin-top: 10px;
+	background: #fff;
+	border: 1px solid #d1d1d1;
+	color: #8d8b8b;
+}
+.conicon {
+	width: 55px;
+	height: 25px;
+
+	font-size: 28px;
+	line-height: 28px;
+	cursor: pointer;
+}
+.jv-node {
+	margin-left: 25px;
+}
+</style>