增加多井诊断模块

src/components/diagram/Diagram.vue

@@ -8,6 +8,8 @@
 	
 	import {Diagram} from './lib/diagram.js'
 	
+	const emit=defineEmits(['loadSuccess'])
+	
 	const props=defineProps({
 		id:{
 			type:String,
@@ -77,7 +79,7 @@
 			diagramInst.setData(resp.data)
 			diagramInst.showMask(false)
 			
-			
+			emit('loadSuccess',resp.data,reqParam)
 		}
 		catch(err){
 			console.log(err)

src/pages/analysis/MultiDiagramDiagnose.vue

@@ -0,0 +1,372 @@
+<template>
+	<div class="page-mdd">
+		<div class="diagnose-row" v-for="(well,index) in wells" :key="index">
+			<div class="diagram-box multi">
+				<div class="multi-header">
+					<label>{{well.wellName}}</label>
+					<div class="multi-tool">
+						<el-icon :size="24" title="前一点数据" @click="diagramCtr(well.wellId,'pre')"><CaretLeft /></el-icon>
+						<el-icon :size="24" title="后一点数据" @click="diagramCtr(well.wellId,'next')"><CaretRight /></el-icon>
+					</div>
+					
+				</div>
+				<div class="multi-body">
+					<Diagram :id="well.wellId" :width="480" :height="220"  :ref="well.wellId+'_diagram'" :ctx="{wellId:well.wellId,paramCode:'diagram_load'}"
+					:data="loadDiagramData"
+					:intervalSec="0"
+					@loadSuccess="diagramLoadSuccess"
+					/>
+				</div>
+			</div>
+			<el-form :model="well.diagnose" :ref="'formcomp_'+well.wellId" label-width="98px"   :show-message="false"  style="flex:1;">
+				<div class="diagnose-box">
+					<div class="diagnose-header">
+						<div style="flex:1;font-size: 14px;"></div>
+						<el-button type="warning" plain @click="startDiagnose(well.wellId)" size="small"><el-icon><Aim /></el-icon>诊断</el-button>
+						
+						<el-button type="success" plain  @click="saveDiagnose(well.wellId)" size="small"><el-icon><Select /></el-icon>保存</el-button>
+					</div>
+					<div class="diagnose-body">
+						
+							
+							<div class="param-block" style="grid-column:span 2 ">
+								<el-form-item label="诊断结论" prop="conclusion" :rules="commRule('诊断结论')">
+									<el-input v-model="well.diagnose.conclusion" :controls="false"/>
+								</el-form-item>
+							</div>
+							
+							<div class="param-block">
+								<el-form-item label="弹性系数" prop="elasticCoe" :rules="commRule('弹性系数')">
+									<el-input-number v-model="well.diagnose.elasticCoe" :controls="false"/>
+								</el-form-item>
+							</div>
+							<div class="param-block">
+								<el-form-item label="充满度" prop="fillCoe" :rules="commRule('充满度')">
+									<el-input-number v-model="well.diagnose.fillCoe" :controls="false"/>
+								</el-form-item>
+								<div class="param-unit">%</div>
+							</div>
+							<div class="param-block">
+								<el-form-item label="漏失系数" prop="leakCoe" :rules="commRule('漏失系数')">
+									<el-input-number v-model="well.diagnose.leakCoe" :controls="false"/>
+								</el-form-item>
+							</div>
+							<div class="param-block">
+								<el-form-item label="气体影响">
+									<el-input v-model="well.diagnose.gasEffect" :controls="false"/>
+								</el-form-item>
+							</div>
+							<div class="param-block">
+								<el-form-item label="排出系数" prop="dischargeCoe" :rules="commRule('排出系数')">
+									<el-input-number v-model="well.diagnose.dischargeCoe" :controls="false"/>
+								</el-form-item>
+							</div>
+							<div class="param-block">
+								<el-form-item label="排出漏失系数">
+									<el-input-number v-model="well.diagnose.dischargeLeakCoe" :controls="false"/>
+								</el-form-item>
+							</div>
+							<div class="param-block">
+								<el-form-item label="吸入漏失系数">
+									<el-input-number v-model="well.diagnose.inhaleLeakCoe" :controls="false"/>
+								</el-form-item>
+							</div>
+							<div class="param-block">
+								<el-form-item label="油管漏失系数">
+									<el-input-number v-model="well.diagnose.pipeLeakCoe" :controls="false"/>
+								</el-form-item>
+							</div>
+							<div class="param-block">
+								<el-form-item label="出砂程度">
+									<el-input-number v-model="well.diagnose.sandDegree" :controls="false"/>
+								</el-form-item>
+							</div>
+							<div class="param-block">
+								<el-form-item label="结蜡程度">
+									<el-input-number v-model="well.diagnose.waxDegree" :controls="false"/>
+								</el-form-item>
+							</div>
+							<div class="param-block">
+								<el-form-item label="活塞脱出程度">
+									<el-input-number v-model="well.diagnose.pistonSlipDegree" :controls="false"/>
+								</el-form-item>
+							</div>
+							<div class="param-block">
+								<el-form-item label="下行碰泵程度">
+									<el-input-number v-model="well.diagnose.pumpDownBump" :controls="false"/>
+								</el-form-item>
+							</div>
+							
+							
+							
+							<div class="param-block">
+								<el-form-item label="综合泵效">
+									<el-input-number v-model="well.diagnose.comPumpEff" :controls="false" disabled/>
+								</el-form-item>
+							</div>
+							<div class="param-block">
+								<el-form-item label="功图液量">
+									<el-input-number v-model="well.diagnose.liquidYield" :controls="false" disabled/>
+								</el-form-item>
+								<div class="param-unit">m^3/d</div>
+							</div>
+							<div class="param-block">
+								<el-form-item label="功图油量">
+									<el-input-number v-model="well.diagnose.oilYield" :controls="false" disabled/>
+								</el-form-item>
+								<div class="param-unit">m^3/d</div>
+							</div>
+							<div class="param-block">
+								<el-form-item label="功图水量">
+									<el-input-number v-model="well.diagnose.waterYield" :controls="false" disabled/>
+								</el-form-item>
+								<div class="param-unit">m^3/d</div>
+							</div>
+							
+							
+					</div>
+				</div>
+			</el-form>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch,onMounted, nextTick,getCurrentInstance,toRaw} from 'vue'
+	import Diagram from '../../components/diagram/Diagram.vue'
+	import { storeToRefs } from 'pinia'
+	import { useHomeStore } from '../../store/home.js'
+	import {ElMessage} from 'element-plus'
+	import multiDiagramAPI from '../../api/multiDiagram.js'
+	import wellPatrolAPI from '../../api/wellPatrol.js'
+	import diagnoseAPI from '../../api/diagramDiagnose.js'
+	
+	let {proxy} = getCurrentInstance()
+	
+	const crtOrg=reactive({})
+	
+	const wells=ref([])
+	
+	let wellIdx={}
+	
+	const commRule=(tit)=>{
+		return {
+			required:true,
+			message:`${tit}还未填写`,
+			trigger:'blur'
+		}
+	}
+	
+	let formValiding=false  //整体验证
+	
+	const formValidHandler=(prop,isValid,message)=>{
+		if(!isValid && !formValiding){
+			ElMessage.error(message)
+		}
+	}
+	
+	const loadWells=(orgId)=>{
+		multiDiagramAPI.loadWells(orgId).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg)
+				return
+			}
+			resp.data.data.forEach((well,index)=>{
+				well['diagnose']={}
+				wellIdx[well.wellId]=index
+			})
+			wells.value=resp.data.data
+			
+		}).catch(err=>{
+			console.log(err)
+		})
+	}
+	
+	const loadDiagramData=(reqData)=>{  //reqData中也有paramCode，但此处的Diagram组件ctx属性未设置paramCode,就用queryForm中的
+		//reqData.paramCode=queryForm.paramCode
+		return wellPatrolAPI.loadDiagram(reqData)
+	}
+	
+	const diagramLoadSuccess=(diagramData,diagramCtx)=>{
+		//只要功图加载成功即初始化诊断数据
+		let wellObj=wells.value[wellIdx[diagramCtx.wellId]]
+		wellObj['diagramTime']=diagramData.serial.smpTime
+		wellObj['diagnose']={diagramId:diagramData.serial.dataId}
+		
+		loadDiagnose(wellObj)
+		
+	}
+	
+	//加载指定功图的诊断信息
+	const loadDiagnose=(wellObj)=>{
+		let diagramId=wellObj['diagnose'].diagramId
+		diagnoseAPI.getDiagnose(diagramId).then(resp=>{
+			if(resp.code==0 && resp.data){
+				wellObj['diagnose']=resp.data  
+				//诊断结果中的diagramId为Long,覆盖默认设置的diagramData.serial.dataId，long类型在js会丢失精度，重置为字符类型
+				wellObj['diagnose']['diagramId']=diagramId
+			}
+		}).catch(err=>{
+			console.log(err)
+		})
+	}
+	
+	const diagramCtr=(wellId,action)=>{
+		let compref=wellId+'_diagram'
+		let diagramIns=proxy.$refs[compref] 
+		if('next'==action){
+			diagramIns.next()
+		}
+		else if('pre'==action){
+			diagramIns.pre()
+		}
+		else if('last'==action){
+			diagramIns.last()
+		}
+		
+	}
+	
+	const startDiagnose=(wellId)=>{
+		let wellObj=wells.value[wellIdx[wellId]]
+		if(!wellObj.diagramTime){
+			ElMessage.error('没有对应功图')
+			return 
+		}
+		diagnoseAPI.startDiagnose(wellObj.wellId,wellObj.diagramTime).then(resp=>{
+			if(resp.code!=0 || resp.data==null){
+				ElMessage.error(resp.msg || '功图诊断失败')
+				return
+			}
+			wellObj['diagnose']=resp.data
+				
+		}).catch(err=>{
+			ElMessage.error('功图诊断出错')
+			console.log(err)
+		})
+	}
+	
+	const saveDiagnose=(wellId)=>{
+		let wellObj=wells.value[wellIdx[wellId]]
+		if(!wellObj.diagramTime){
+			ElMessage.error('没有对应功图')
+			return 
+		}
+		
+		let formcomp=proxy.$refs['formcomp_'+wellId] 
+		formcomp.validate((isValid,invalidObj) => {
+			if(!isValid){
+				ElMessage.error('还有数据不符合要求,请先修改再继续')
+				return
+			}
+			
+			
+			let saveData=toRaw(wellObj['diagnose'])
+			saveData['wellId']=wellObj.wellId
+			diagnoseAPI.saveDiagnose(saveData).then(resp=>{
+				if(resp.code!=0){
+					ElMessage.error(resp.msg || '保存数据失败')
+					return
+				}
+				ElMessage.success('保存数据成功')
+				loadDiagnose(wellObj)
+			}).catch(err=>{
+				ElMessage.error('保存数据出错')
+				console.log(err)
+			})
+		})
+		
+		
+	}
+	
+	onMounted(()=>{
+		if(!crtOrg.id){
+			ElMessage.error('还未选择井站')
+		}
+	})
+	
+	const store=useHomeStore()
+	const  {currentTreeNode} = storeToRefs(store)
+	watch(currentTreeNode,(newNode, oldNode)=>{
+			if(newNode&&newNode.nodeType=='org'){
+				crtOrg.id=newNode.id
+				crtOrg.name=newNode.name
+				loadWells(newNode.id)
+			}
+	},{ immediate: true })
+</script>
+
+<style scoped>
+	@import url('../../assets/css/wellPatrol.css');
+	.multi{
+		width:490px;
+		height:290px;
+		position: relative;
+		margin:10px;
+	}
+	.diagnose-row{
+		padding:10px 30px;
+		display: flex;
+		flex-flow: row nowrap;
+	}
+	
+	.diagnose-row .diagnose-box{
+		flex:1;
+		
+		margin:10px;
+		border:1px solid #e3f1f8;
+	}
+	
+	.diagnose-box .diagnose-header{
+		height:30px;
+		background-color: #f0f9ff;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		padding:0px 10px;
+	}
+	
+	.diagnose-box .diagnose-body{
+		flex:1;
+		padding:10px;
+		box-sizing: border-box;
+		display: grid;
+		grid-template-columns: repeat(3,200px);
+		grid-template-rows: repeat(auto-fill,30px);
+		grid-gap:10px 35px;
+		/* justify-items: center; */
+		justify-content: center;
+	}
+	
+	.param-block{
+		font-size:14px;
+		vertical-align:baseline;
+		display: flex;
+		flex-flow:row nowrap;
+		align-items: center;
+		color:#555;
+		height: 32px;
+		box-sizing: border-box;
+	}
+	.param-block  .param-unit{
+		background-color: #f2f2f2;
+		padding:8px 0px;
+		border:1px solid #e4e4e4;
+		border-left:0px;
+		font-size: 12px;
+		height: 100%;
+		width:46px;
+		box-sizing: border-box;
+		text-align: center;
+		border-top-right-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
+	
+	.param-block:deep(.el-form-item){
+		margin-bottom: 0px;
+		flex:1;
+	}
+	.param-block:deep(.el-input-number){
+		flex:1;
+		width:auto;
+	}
+</style>