增加报警模板管理

src/api/alarmDefine.js

@@ -13,7 +13,7 @@ api.loadAlarmDefine = (alarmSource)=>{
 	return request({
 	    url: '/base/alarmdefine/loadBySource',
 	    method: 'post',
-		params:  {alarmSource}
+		data:  {alarmSource}
 	});
 }
 
@@ -21,10 +21,19 @@ api.loadAlarmDefByParamCode = (wellId,paramCode)=>{
 	return request({
 	    url: '/base/alarmdefine/loadByParamCode',
 	    method: 'post',
-		params:  {wellId,paramCode}
+		data:  {wellId,paramCode}
 	});
 }
 
+api.loadAlarmDefByTmpId = (tmpId)=>{
+	return request({
+	    url: '/base/alarmdefine/loadByTmpId',
+	    method: 'post',
+		data:  {tmpId}
+	});
+}
+
+
 api.save=(data)=>{
 	let url='/base/alarmdefine/add'
 	if(data.alarmId){
@@ -49,4 +58,25 @@ api.del = (data) => {
 	    });
 }
 
+api.saveForTmp=(data)=>{
+	
+	return request({
+	    url: '/base/alarmdefine/saveForTmp',
+	    method: 'post',
+		data: data,
+		headers:{
+			'Content-Type':'application/json'
+		}
+	});
+	
+}
+
+api.deleteForTmp=(alarmId)=>{
+	return request({
+	    url: '/base/alarmdefine/deleteForTmp',
+	    method: 'post',
+		data:  {alarmId}
+	});
+}
+
 export  default api

src/api/alarmTemplate.js

@@ -0,0 +1,37 @@
+import request from '../utils/request';
+
+const api={}
+
+api.loadAllTemplate=()=>{
+	return request({
+	    url: '/base/alarm/template/loadAll',
+		method: 'get'
+	});
+}
+
+
+api.addTemplate = (formdata) => {
+	    return request({
+	        url: '/base/alarm/template/add',
+	        method: 'post',
+			data:  formdata
+	    });
+}
+
+api.updateTemplate = (formdata) => {
+	    return request({
+	        url: '/base/alarm/template/update',
+	        method: 'post',
+			data:  formdata
+	    });
+}
+
+api.delTemplate = (tmpId) => {
+	    return request({
+	        url: '/base/alarm/template/delete',
+	        method: 'post',
+			data:  {tmpId}
+	    });
+}
+
+export  default api

src/pages/alarm/AlarmTemplate.vue

@@ -0,0 +1,460 @@
+<template>
+	<div class="page-container">
+		<div class="page-side">
+			<el-card class="box-card" style="height: 100%;min-width:180px;">
+			    <template #header>
+			      <div class="card-header">
+			        <span>报警模板</span>
+					<el-icon size="20" style="cursor: pointer;" @click="addTmp" title="增加新模板"><CirclePlus /></el-icon>
+			      </div>
+			    </template>
+				<el-scrollbar>
+					<div v-for="(item,index) in tmpList" :key="index" class="side-item" :class="{'side-item-active':activeItemIdx==index}" @click="handleParamSelect(item,index)">
+					 <div>{{ item.tmpName }}</div>
+					 <el-icon size="20" @click="editTmp(item)" title="编辑模板"><Edit /></el-icon>
+					 
+					 <el-icon size="20" @click="delTmp(item)" title="删除模板"><CircleClose /></el-icon>
+					</div>
+				</el-scrollbar>
+			    
+			  </el-card>
+			
+		</div>
+		<div class="page-main">
+			<el-table :data="alarmList" style="height:200px;" @row-click="handleAlarmRowClick">
+			    <el-table-column prop="alarmSource" label="报警源" width="180" />
+			    <el-table-column prop="expressDesc" label="报警条件"  />
+				<el-table-column prop="alarmModeName" label="报警方式" width="160" />
+				<el-table-column prop="alarmGradeName" label="报警等级" width="100" />
+				<el-table-column prop="usingIf" label="状态" width="80">
+					<template #default="scope">
+						<div>{{scope.row.usingIf?'启用':'禁用'}}</div>
+					</template>
+				</el-table-column>
+					
+				<el-table-column prop="modifyTime" label="更新时间"  width="160"/>
+			</el-table>
+			<div class="edit-box">
+				<el-form :model="formModel" ref="formcomp"  label-position="right" label-width="100" :inline="false" :rules="rules" :inline-message="true">
+					
+					<el-form-item label="报警等级">
+						<el-select v-model="formModel.alarmGrade" placeholder="报警等级" style="width:120px">
+						    <el-option label="高" value="3"/>
+							<el-option label="中" value="2"/>
+							<el-option label="低" value="1"/>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="状态">
+					  <el-switch
+					      v-model="formModel.usingIf"
+						  inline-prompt
+						  size="large"
+					      active-text="启用"
+					      inactive-text="禁用"
+						  
+					    />
+					</el-form-item>
+					<el-form-item label="报警方式">
+						<el-checkbox-group v-model="formModel.alarmMode">
+						    <el-checkbox label="color">颜色标识</el-checkbox>
+						    <el-checkbox label="sound">声音报警</el-checkbox>
+						</el-checkbox-group>
+						
+					</el-form-item>
+					
+					<el-form-item label="报警内容">
+					  <el-input v-model="formModel.alarmDesc" autocomplete="off" placeholder="请输入报警内容"  clearable/>
+					</el-form-item>
+					
+					<el-form-item label="报警条件">
+						
+							<CondExpressGroup v-model="formModel.conditions" :paramOpts="condParamsOpt"></CondExpressGroup>
+							
+						
+					</el-form-item>
+					
+					
+					
+					
+					<el-form-item label=" " style="margin-top:30px">
+						<el-button type="primary" @click="saveSubmit('update')" v-if="formModel.alarmId">保存</el-button>
+						<el-button type="success" @click="saveSubmit('add')">新增</el-button>
+						<el-button  @click="delSubmit" v-if="formModel.alarmId">删除</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,toRaw,onMounted} from 'vue'
+	
+	import alarmDefineAPI from "../../api/alarmDefine.js"
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import CondExpressGroup from '@/components/CondExpressGroup.vue'
+	
+	import api from "../../api/alarmTemplate.js"
+	import paramAPI from "../../api/paramMgr.js"
+	
+	
+	const activeItemIdx=ref(null)
+	
+	const alarmList=ref([])
+	
+
+	const tmpList=ref([])
+	
+
+	const condParamsOpt=ref([])
+	
+	const  formModel=reactive({
+			alarmId:null,
+			alarmSource:null,
+			alarmGrade:null,
+			alarmMode:[],
+			usingIf:true,
+			alarmDesc:null,
+			expressDesc:null,
+			alarmExpress:null,
+			conditions:[]
+	})
+	
+	const rules =reactive({
+	})
+	
+	onMounted(()=>{
+		loadTmp()
+		loadParamCodes()
+	})
+	
+	const loadTmp=()=>{
+		api.loadAllTemplate().then(resp=>{
+			if(resp.code!=0){
+				console.log(resp.msg)
+				return
+			}
+			tmpList.value=resp.data
+		}).catch(err=>{
+			console.log(err)
+		})
+	}
+	
+	const addTmp=()=>{
+		ElMessageBox.prompt('创建新模板',null,{
+		   		   showCancelButton:true,
+		   		   showInput:true,
+				   inputType:'text',
+				   inputPlaceholder:'请输入模板名称',
+				   inputPattern:/\S+/,
+				   inputErrorMessage:'模板名称不能为空',
+				   closeOnClickModal:false
+				}).then(({value})=>{
+					api.addTemplate({tmpName:value}).then(resp=>{
+						if(resp.code!=0){
+							ElMessage.error(resp.msg||'操作失败')
+						}
+						else{
+							ElMessage.success('操作成功')
+							loadTmp()
+						}
+					})
+					
+				})
+				.catch(err => {
+					console.log('cancel add template '+err)
+				})
+	}
+	
+	const editTmp=(tmp)=>{
+		ElMessageBox.prompt('编辑模板',null,{
+		   		   showCancelButton:true,
+		   		   showInput:true,
+				   inputType:'text',
+				   inputPlaceholder:'请输入模板名称',
+				   inputPattern:/\S+/,
+				   inputErrorMessage:'模板名称不能为空',
+				   closeOnClickModal:false,
+				   inputValue:tmp.tmpName
+				}).then(({value})=>{
+					api.updateTemplate({tmpName:value,tmpId:tmp.tmpId}).then(resp=>{
+						if(resp.code!=0){
+							ElMessage.error(resp.msg||'操作失败')
+						}
+						else{
+							ElMessage.success('操作成功')
+							loadTmp()
+						}
+					})
+					
+				})
+				.catch(err => {
+					console.log('cancel add template '+err)
+				})
+	}
+	
+	const delTmp=(tmp)=>{
+		
+		ElMessageBox.confirm(
+			'确定要删除该模板吗?',
+			'操作确认',
+			{
+				confirmButtonText:'确定',
+				cancelButtonText:'取消',
+				type: 'warning'
+			}
+		).then(()=>{
+			api.delTemplate(tmp.tmpId).then(resp=>{
+				if(resp.code!=0){
+					ElMessage.error(resp.msg||'操作失败')
+				}
+				else{
+					ElMessage.success('操作成功')
+					loadTmp()
+				}
+			}).catch(err=>{
+				console.log(err)
+				ElMessage.error('操作出现错误')
+				
+			})
+		}).catch(()=>{
+			console.log('cancel del')
+		})
+		
+		
+	}
+	
+	//加载通用参数编码
+	const loadParamCodes=()=>{
+		paramAPI.loadAll().then(resp=>{
+			if(resp.code!=0){
+				console.log(resp.msg)
+				return
+			}
+			let optParams=[]
+			resp.data.forEach(param=>{
+				if(param.paramCode.indexOf('diagram')<0){
+					param['paramId']=param.paramCode
+					optParams.push(param)
+				}
+			})
+			
+			condParamsOpt.value=optParams
+			
+		}).catch(err=>{
+			console.log(err)
+		})
+	}
+	
+	
+	const loadAlarmDefine=(tmpId)=>{
+		alarmDefineAPI.loadAlarmDefByTmpId(tmpId).then(resp=>{
+			if(resp.code==0){
+				alarmList.value=resp.data
+			}
+		})
+	}
+	
+	//选择左侧模板后
+	const handleParamSelect=(tmp,index)=>{
+		activeItemIdx.value=index
+		loadAlarmDefine(tmp.tmpId)
+		initForm()
+	}
+	
+	//报警定义列表中选择了一个记录
+	const handleAlarmRowClick=(row, column, event)=>{
+		let {alarmId,alarmSource,alarmGrade,usingIf,alarmDesc,expressDesc,alarmMode,alarmExpress}=row
+		let conditions=alarmExpress?JSON.parse(alarmExpress):[{}]
+		alarmMode=alarmMode?alarmMode.split("|"):[],
+		initForm({alarmId,alarmSource,alarmGrade,usingIf,alarmDesc,expressDesc,alarmMode,conditions})
+	}
+	
+	const initForm=(initData)=>{
+		if(!initData){
+			let [alarmId,alarmSource,alarmGrade,usingIf,alarmDesc,expressDesc,alarmMode,conditions]=[null,null,null,true,null,null,[],[{param:null,symbol:null,val:null}]]
+			Object.assign(formModel,{alarmId,alarmSource,alarmGrade,usingIf,alarmDesc,expressDesc,alarmMode,conditions})
+		}
+		else{
+			let {alarmId,alarmSource,alarmGrade,usingIf,alarmDesc,expressDesc,alarmMode,conditions}=initData
+			Object.assign(formModel,{alarmId,alarmSource,alarmGrade,usingIf,alarmDesc,expressDesc,alarmMode,conditions})
+			console.log(formModel.conditions)
+			
+		}
+		
+	}
+	
+	const processFormData=(formData)=>{
+		if(!formData.conditions||formData.conditions.length==0){
+			ElMessage.error('没有设定报警条件')
+			return false
+		}
+		formData.expressDesc=""
+		let validCondition=[]
+		formData.conditions.forEach((item,index)=>{
+			if(!item.param||item.param==""||!item.symbol||item.symbol==""||!item.val||item.val==""){
+				return true
+			}
+			validCondition.push(item)
+			formData.expressDesc+=`${index==0?'当':'且'}${item.label}${item.symbol}${item.val}`
+		})
+		
+		formData.alarmExpress=validCondition.length>0?JSON.stringify(validCondition):null
+		
+		delete formData.conditions
+		
+		formData.alarmMode=formData.alarmMode?formData.alarmMode.join("|"):null
+		
+		return true
+	}
+	
+	const saveSubmit=(tag)=>{
+		let {alarmId,alarmSource,alarmGrade,usingIf,alarmDesc,alarmMode,conditions}=formModel
+		let formData={alarmId,alarmSource,alarmGrade,usingIf,alarmDesc,alarmMode,conditions}
+		if(!processFormData(formData)){
+			return
+		}
+		
+		let crtTmp=tmpList.value[activeItemIdx.value]
+		formData['tmpId']=crtTmp.tmpId
+		
+		if(tag=='add'){
+			formData.alarmId=null
+			formData.alarmSource=crtTmp.tmpName
+		}
+		alarmDefineAPI.saveForTmp(formData).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg)
+				return
+			}
+			ElMessage.success('操作成功')
+			loadAlarmDefine(crtTmp.tmpId)
+			initForm()
+			
+		}).catch(err=>{
+			ElMessage.error(err||'操作失败')
+		})
+	}
+	
+	
+	
+	const delSubmit=()=>{
+		if(!formModel.alarmId){
+			ElMessage.error("请先选择一个报警设置，再继续");
+			return;
+		}
+		ElMessageBox.confirm(
+			'确定要删除吗?',
+			'操作确认',
+			{
+				confirmButtonText:'确定',
+				cancelButtonText:'取消',
+				type: 'warning'
+			}
+		).then(()=>{
+			alarmDefineAPI.deleteForTmp(formModel.alarmId).then(resp=>{
+				if(resp.code!=0){
+					ElMessage.error(resp.msg)
+					return
+				}
+				ElMessage.success('操作成功')
+				let crtTmp=tmpList.value[activeItemIdx.value]
+				loadAlarmDefine(crtTmp.tmpId)
+				initForm()
+				
+			}).catch(err=>{
+				ElMessage.error(err||'操作失败')
+			})
+			
+		}).catch(()=>{
+			console.log('cancel del')
+		})
+	}
+	
+</script>
+
+<style scoped>
+	 .page-container{
+		 height:100%;
+		 box-sizing: border-box;
+		 display: flex;
+		 flex-flow: row nowrap;
+		 align-items: flex-start;
+	 }
+	 .page-side{
+		 width:200px;
+		 height:100%;
+		 padding:0px 5px 5px;
+		 box-sizing: border-box;
+	 }
+	 .page-main{
+		 flex:1;
+		 height:100%;
+		 box-sizing: border-box;
+		 padding:0px 5px 5px;
+	 }
+	 
+	 .page-side .card-header{
+		 width:145px;
+		 padding:5px 5px;
+		 display: flex;
+		 justify-content: space-between;
+		 align-items: center;
+		 border-left:4px solid #ffffff;
+	 }
+	 
+	 .page-side .side-item{
+		 font-size: 14px;
+		 margin-bottom: 5px;
+		 padding:8px 5px;
+		 cursor:pointer;
+		 display: flex;
+		 justify-content: space-between;
+		 align-items: center;
+		 border-left:4px solid #ffffff;
+	 }
+	 .page-side .side-item>div{
+		 width:90px
+	 }
+	 .page-side .side-item .el-icon{
+		 display: none;
+	 }
+	 
+	 .page-side .side-item:hover{
+		 color:#00aaff;
+		 border-left:4px solid #ff7b4f;
+	 }
+	 
+	 .page-side .side-item:hover .el-icon{
+		 display:block
+	 }
+	 
+	 
+	 .page-side .side-item-active{
+	 		 color:#0000ff;
+	 		 border-left:4px solid #ff0000;
+	 }
+	 
+	 .page-side:deep(.el-card__body){
+		height: calc(100% - 60px);
+		box-sizing: border-box;
+		padding:10px 5px 10px 10px;
+	 }
+	 .page-side:deep(.el-card__header){
+		 padding-left:10px;
+	 }
+	 
+	 .edit-box{
+		 min-height:200px;
+		 height:calc(100% - 205px);
+		 border:1px solid #f2f2f2;
+		 margin-top:5px;
+		 box-sizing: border-box;
+		 padding:10px;
+		 overflow:auto;
+	 }
+	 
+	 .edit-form-item{
+		 width:240px;
+	 }
+</style>