增加功图样本收集功能（用于模型训练）

src/api/diagnoseModel.js

@@ -0,0 +1,53 @@
+import request from '../utils/diagnoseRequest';
+
+const api={}
+
+api.saveDiagramSample=(sample)=>{
+	return request({
+	    url: '/api/sample/add',
+	    method: 'post',
+		headers:{
+			'Content-Type':'application/json'
+		},
+		data: sample
+	});
+}
+
+
+api.loadDiagram=(reqData)=>{
+	return request({
+	    url: '/api/sample/getDrawData',
+	    method: 'post',
+		data:  reqData
+	});
+}
+
+api.delSample=(sampleId)=>{
+	return request({
+	    url: '/api/sample/del',
+	    method: 'post',
+		data:  sampleId
+	});
+}
+
+api.trainModel=(modelParam)=>{
+	return request({
+	    url: '/api/sample/train',
+	    method: 'post',
+		data:  modelParam
+	});
+}
+
+api.modelDiagnose=(diagram)=>{
+	return request({
+	    url: '/api/diagram/diagnose',
+	    method: 'post',
+		headers:{
+			'Content-Type':'application/json'
+		},
+		data:  diagram
+	});
+}
+
+
+export  default api

src/components/diagram/Diagram.vue

@@ -133,6 +133,9 @@
 		},
 		showOnlyCurve:()=>{
 			diagram.showOnlyCurve()
+		},
+		getLine:()=>{
+			return diagram.getLine()
 		}
 	})
 	

src/pages/analysis/DiagramDiagnose.vue

@@ -44,6 +44,7 @@
 					   <Diagram :id="scope.row.wellParam+scope.row.gatherTime"  :key="scope.row.wellParam+''+scope.row.gatherTime" :width="480" :height="210"  :ctx="{wellId:queryForm.wellId,refTime:scope.row.gatherTime,action:'exact'}"
 					   :data="loadDiagramData"
 					   :intervalSec="0"
+					   :ref="scope.row.dataIdStr+scope.row.gatherTime"
 					   />
 				   </template>
 					
@@ -55,6 +56,7 @@
 			<div class="diagnose-box">
 				<div class="diagnose-header">
 					<div style="flex:1;font-size: 14px;">功图时间：{{queryForm.diagramTime}}</div>
+					<el-button type="warning" plain @click="modelDiagnose"><el-icon><Help /></el-icon>模型诊断</el-button>
 					<el-button type="warning" plain @click="startDiagnose"><el-icon><Aim /></el-icon>诊断</el-button>
 					<el-button type="success" plain  @click="saveDiagnose"><el-icon><Select /></el-icon>保存</el-button>
 					<el-button type="primary" plain @click="saveAsStd"><el-icon><Finished /></el-icon>存为标准</el-button>
@@ -176,7 +178,7 @@
 </template>
 
 <script setup>
-	import {reactive,ref,watch,watchEffect,toRaw,onMounted, nextTick,useAttrs} from 'vue'
+	import {reactive,ref,watch,watchEffect,toRaw,onMounted, nextTick,useAttrs,getCurrentInstance} from 'vue'
 	import {storeToRefs} from 'pinia'
 	import {useHomeStore} from '../../store/home.js'
 	import wellPatrolAPI from '../../api/wellPatrol.js'
@@ -186,6 +188,9 @@
 	import Diagram from '../../components/diagram/Diagram.vue'
 	
 	import diagnoseAPI from "../../api/diagramDiagnose.js"
+	import diagnoseModelAPI from "../../api/diagnoseModel.js"
+	
+	let {proxy} = getCurrentInstance()
 	
 	const attrs = useAttrs()
 	
@@ -282,6 +287,10 @@
 		cleanFormModel()
 		diagnoseAPI.getDiagnose(diagramId).then(resp=>{
 			if(resp.code==0 && resp.data){
+				resp.data['waxDegree']=parseFloat(resp.data['waxDegree'])
+				resp.data['pistonSlipDegree']=parseFloat(resp.data['pistonSlipDegree'])
+				resp.data['pumpDownBump']=parseFloat(resp.data['pumpDownBump'])
+				resp.data['sandDegree']=parseFloat(resp.data['sandDegree'])
 				Object.assign(formModel,resp.data)
 			}
 		}).catch(err=>{
@@ -367,6 +376,30 @@
 		})
 	}
 	
+	const modelDiagnose=()=>{
+		let refKey=queryForm.diagramId+queryForm.diagramTime
+		let diagramInst=proxy.$refs[refKey]
+		if(diagramInst==null){
+			ElMessage.error('请先选择一个功图')
+			return
+		}
+		
+		let lineObj=diagramInst.getLine()
+		let diagramData={disps:lineObj.xProjs,loads:lineObj.yProjs}
+		
+		
+		diagnoseModelAPI.modelDiagnose(diagramData).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg || '诊断功图失败')
+				return
+			}
+			ElMessage.success(resp.data.conclusion)
+		}).catch(err=>{
+			ElMessage.error('诊断功图出错')
+			console.log(err)
+		})
+	}
+	
 	const store = useHomeStore()
 	const {currentTreeNode} = storeToRefs(store)
 	watch(currentTreeNode, (newNode, oldNode) => {

src/pages/analysis/DiagramSampleCollect.vue

@@ -0,0 +1,331 @@
+<template>
+	<div class="qpage">
+		<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+			<el-form-item label="井名">
+				<div style="width:140px;">{{queryForm.wellName}}</div>
+			</el-form-item>
+			<el-form-item label="时间">
+				<el-date-picker
+				        v-model="queryForm.dataTime"
+				        type="datetimerange"
+						range-separator="至"
+				        start-placeholder="开始时间"
+				        end-placeholder="截止时间"
+				        :unlink-panels="true"
+						value-format="YYYY-MM-DD HH:mm:ss"
+						@change="queryHandle"/>
+			</el-form-item>
+			
+			
+			  
+			<el-form-item>
+				<el-button type="primary"  @click="queryHandle(true)">检索</el-button>
+			</el-form-item>
+		</el-form>
+		<div class="qpage-body">
+			<CrudTable
+			ref="crudTable"
+			page-info-opts="total, prev, pager, next,sizes"
+			url="/diagram/queryByWell"
+			:pageSize="10"
+			:autoLoad="false"
+			@row-dblclick="selectDiagram"
+			style="flex:1;"
+			highlight-current-row
+			>
+			<template #toolMid>
+				<div style="font-size: 14px;">双击数据行选择</div>
+			</template>
+			<template #tabColumns={indexGenerate}>
+				<el-table-column type="index" :index="indexGenerate" label="序号" width="60" align="center" fixed/>
+				<el-table-column prop="gatherTime" label="时间" width="160"  fixed/>
+				<el-table-column prop="diagram"  label="图形" width="500">
+				   <template #default="scope">
+					   <Diagram :id="scope.row.wellParam+scope.row.gatherTime"  :key="scope.row.wellParam+''+scope.row.gatherTime" :width="480" :height="210"  :ctx="{wellId:queryForm.wellId,refTime:scope.row.gatherTime,action:'exact'}"
+					   :data="loadDiagramData"
+					   :intervalSec="0"
+					   :ref="scope.row.wellParam+scope.row.gatherTime"
+					   />
+				   </template>
+					
+				</el-table-column>  
+			</template>
+			</CrudTable>
+			
+			<el-form :model="formModel" ref="formcomp" label-width="100px"   :show-message="false" @validate="formValidHandler" style="width:600px;box-sizing: border-box;">
+			<div class="diagnose-box">
+				<div class="diagnose-header">
+					<el-button type="primary" plain @click="saveAsStd"><el-icon><CopyDocument /></el-icon>加入样本集</el-button>
+				</div>
+				
+				<div class="diagnose-body">
+						<div class="param-block">
+							<el-form-item label="已选功图">
+								{{queryForm.diagramTime?(queryForm.wellName+'-'+queryForm.diagramTime):''}}
+							</el-form-item>
+						
+						</div>
+						<div class="param-block">
+							<el-form-item label="诊断结论" prop="diagnoseId" :rules="commRule('诊断结论')">
+								<el-select v-model="formModel.diagnoseId" style="width:100%;">
+									<el-option  v-for="(item,index) in conclusionOpts" :key="index" :label="item.conclusion" :value="item.diagnoseId"></el-option>
+								</el-select>
+							</el-form-item>
+						</div>
+						
+						
+						
+						
+						
+						
+						
+						<div class="param-block">
+							<el-form-item label="样本类型">
+								<el-select v-model="formModel.sampleType" style="width:100%;">
+									<el-option label="训练集(模型构建)" value="train"></el-option>
+									<el-option label="验证集(模型构建)" value="valid"></el-option>
+									<el-option label="测试集" value="test"></el-option>
+								</el-select>
+							</el-form-item>
+						</div>
+						
+						
+						
+				</div>
+			</div>
+			</el-form>
+		</div>
+		
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch,watchEffect,toRaw,onMounted, nextTick,useAttrs,getCurrentInstance} from 'vue'
+	import {storeToRefs} from 'pinia'
+	import {useHomeStore} from '../../store/home.js'
+	import wellPatrolAPI from '../../api/wellPatrol.js'
+	import diagnoseStandardAPI from '../../api/diagnoseStandard.js'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import CrudTable from '../../components/crudtable/CrudTable.vue'
+	import Diagram from '../../components/diagram/Diagram.vue'
+	
+	import diagnoseModelAPI from "../../api/diagnoseModel.js"
+	
+	let {proxy} = getCurrentInstance()
+	
+	let crtDiagramInst=null
+	
+	const attrs = useAttrs()
+	
+	const isQuerying = ref(false)
+	
+	const crudTable=ref(null)
+	
+	const queryForm = reactive({
+		wellId: null,
+		wellName: null,
+		dataTime: null,
+		paramCode:'diagram_load',
+		diagramTime:null,
+		diagramId:null
+	})
+	
+	const formModel=reactive({
+		diagramId:null,
+		wellId:null,
+		conclusion :null,
+		diagnoseId:null,
+		sampleType:'train'
+	})
+	
+	const conclusionOpts=ref([])
+	
+	const queryHandle=(valiTip)=>{
+		
+		
+		let {wellId,paramCode}=queryForm
+		let [startTime,endTime]=queryForm.dataTime||[]
+		
+		if(valiTip && (wellId==null || wellId=='')){
+			
+		}
+		isQuerying.value=true
+		crudTable.value.query({wellId,paramCode,startTime,endTime}).then(resp=>{
+			isQuerying.value=false
+		})
+		
+	}
+	
+	const formcomp=ref(null)
+	
+	const commRule=(tit)=>{
+		return {
+			required:true,
+			message:`${tit}还未填写`,
+			trigger:'blur'
+		}
+	}
+	
+	let formValiding=false  //整体验证
+	
+	const formValidHandler=(prop,isValid,message)=>{
+		if(!isValid && !formValiding){
+			ElMessage.error(message)
+		}
+	}
+	
+	onMounted(()=>{
+		loadDiagnoseStds()
+	})
+	
+	const loadDiagramData=(reqData)=>{
+		reqData.paramCode=queryForm.paramCode
+		reqData.action='exact'
+		return wellPatrolAPI.loadDiagram(reqData)
+	}
+	
+	const selectDiagram=(row, column, event)=>{
+		queryForm.diagramTime=row.gatherTime
+		queryForm.diagramId=row.dataIdStr
+		crtDiagramInst=proxy.$refs[row.wellParam+row.gatherTime]
+		//console.log(diagramDOM.getLine())
+	}
+	
+	const cleanFormModel=()=>{
+		let [diagramId,wellId,conclusion,diagnoseId,sampleType]=[null,null,null,null,'train']
+		Object.assign(formModel,{diagramId,wellId,conclusion,diagnoseId,sampleType})
+	}
+	
+	const loadDiagnoseStds=()=>{
+		diagnoseStandardAPI.loadStds().then(resp=>{
+			if(resp.code==0 && resp.data){
+				conclusionOpts.value=resp.data.data
+			}
+		}).catch(err=>{
+			console.log(err)
+		})
+	}
+	
+	const  saveAsStd=()=>{
+		if(queryForm.diagramTime==null){
+			ElMessage.error('还未选择功图')
+			return 
+		}
+		formValiding=true
+		formcomp.value.validate((isValid,invalidObj) => {  //validate会再次逐个form-item验证一次
+			formValiding=false
+			if(!isValid){
+				ElMessage.error('还有数据不符合要求,请先修改再继续')
+				return
+			}
+			let saveData={}
+			saveData['wellName']=queryForm.wellName
+			saveData['diagramTime']=queryForm.diagramTime
+			saveData['diagnoseId']=formModel.diagnoseId
+			saveData['sampleType']=formModel.sampleType
+			
+			let lineObj=crtDiagramInst.getLine()
+			saveData['disps']=lineObj.xProjs
+			saveData['loads']=lineObj.yProjs
+			diagnoseModelAPI.saveDiagramSample(saveData).then(resp=>{
+				if(resp.code!=0){
+					ElMessage.error(resp.msg || '保存数据失败')
+					return
+				}
+				ElMessage.success(resp.data || '操作成功,请在功图诊断标准中查看详情')
+			}).catch(err=>{
+				ElMessage.error('保存数据出错')
+				console.log(err)
+			})
+		})
+	}
+	
+	const store = useHomeStore()
+	const {currentTreeNode} = storeToRefs(store)
+	watch(currentTreeNode, (newNode, oldNode) => {
+		if (newNode != null && newNode.nodeType == 'well') {
+			queryForm.wellId = newNode.id
+			queryForm.wellName = newNode.name
+			cleanFormModel()
+			setTimeout(()=>{queryHandle()},100)
+		}
+	
+	}, {
+		immediate: true
+	})
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	
+	.qpage-body{
+		height: calc(100% - 50px);
+		display: flex;
+		flex-flow: row nowrap;
+	}
+	.qpage-body:deep(.el-input-number.is-without-controls .el-input__wrapper){
+		padding:1px 8px;
+	}
+	
+	.diagnose-box{
+		margin-left:2px;
+		width:auto;
+		height:100%;
+		border:1px solid #e3f1f8;
+		display: flex;
+		flex-flow: column nowrap; 
+	}
+	.diagnose-box .diagnose-header{
+		height:50px;
+		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(1,350px);
+		grid-template-rows: repeat(auto-fill,30px);
+		grid-gap:15px 50px;
+		/* 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>