动液面曲线图改为弹窗显示

src/components/ECLiquidChart.vue

@@ -99,6 +99,9 @@
 	
 	watch(()=>props.chartData,(newData,oldData)=>{
 			//console.log(newData)
+			if(!chartInstance){
+				return
+			}
 			let opt=chartInstance.getOption()  //与初始化的opt有差别
 			//opt.xAxis.data=[]
 			//console.log(opt)

src/components/liquidCurve/LiquidCurve.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="zr-app" style="width:5000px;">
-		<div  :id="id" class="zr-container"></div>
+		<div  :id="id" class="zr-container" :style="{height:containerH}"></div>
 		<div class="context-menu" @mouseover="menuOverHandle" @mouseout="menuOutHandle" :style="{left:(ctxMenuConfig?.x+'px'),top:(ctxMenuConfig?.y+'px')}" v-show="ctxMenuConfig?.show">
 			<div class="menu-item" @click="setMark('wellHead')">设为井口位置</div>
 			<div class="menu-item" @click="setMark('liquid')">设为液面位置</div>
@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-	import {onMounted,onUnmounted,ref,watch} from 'vue'
+	import {onMounted,onUnmounted,ref,reactive,watch,computed} from 'vue'
 	
 	import {LiquidCurve} from './lib/liquidCurve'
 	
@@ -20,6 +20,10 @@
 	
 	const  refComputeMode=ref(props.computeMode)
 	
+	const containerH=computed(()=>{
+		return props.height+'px'
+	})
+	
 	const props=defineProps({
 		id:{
 			type:String,
@@ -30,6 +34,10 @@
 		},
 		data:{
 			type:Object
+		},
+		height:{
+			type:Number,
+			default:400
 		}
 	})
 	
@@ -38,12 +46,16 @@
 	let liquidCurve=null
 	let zrbox=null
 	onMounted(()=>{
-		liquidCurve=new LiquidCurve(props.id,ctxMenuConfig,eventBus)
+		//liquidCurve=new LiquidCurve(props.id,ctxMenuConfig,eventBus)
 		//liquidCurve.build()
 		//liquidCurve.setData(props.data)
 		//zrbox=document.querySelector('.zr-app').getBoundingClientRect()
 	})
 	
+	const init=()=>{
+		liquidCurve=new LiquidCurve(props.id,ctxMenuConfig,eventBus)
+	}
+	
 	const eventBus=(args)=>{
 		if(args=="markChange"){
 			emit("markChange")
@@ -155,6 +167,7 @@
 		setData,
 		setInitData,
 		getMarkPos,
+		init,
 		initResize,
 		reset,
 		refreshDepthRule,
@@ -167,7 +180,7 @@
 		position: relative;
 		width: 5000px;
 		min-width:1000px;
-		height: 352px;
+		min-height: 352px;
 	}
 	.zr-container {
 	  width:100%;

src/pages/single/Liquid.vue

@@ -2,7 +2,7 @@
 	<div class="liquid-page">
 		
 		<div class="page-body">
-			<div class="liquid-tab">
+			
 				<CrudTable
 				ref="crudTable"
 				page-info-opts="total, prev, pager, next,sizes"
@@ -28,7 +28,7 @@
 					</div>
 					<el-button type="primary" style="margin-left:10px;" @click="tabQuery">检索</el-button>
 					<el-button type="warning" style="margin-left:10px;" @click="showDialog('setting')">远程设置</el-button>
-					<el-button type="success" style="margin-left:10px;" @click="showDialog('curve')">回放</el-button>
+					<el-button type="success" style="margin-left:10px;" @click="showDialog('depthcurve')">回放</el-button>
 				</template>
 				<template #tabColumns={indexGenerate}>
 					<el-table-column type="index" :index="indexGenerate" label="序号" width="60" align="center" fixed/>
@@ -52,96 +52,23 @@
 						<template #default="scope">
 							
 							
-							<el-button type="primary" icon="edit" size="small" @click="loadLiquid(scope.row.dataId)">手动计算</el-button>
+							<el-button type="primary" icon="edit" size="small" @click="showDialog('wavecurve',scope.row.dataId)">手动计算</el-button>
 							<el-button type="warning" icon="tools" size="small" @click="setStaticCalcTag(scope.row)">测静液面</el-button>
 						    
 						</template>				
 					</el-table-column>
 				</template>
 				</CrudTable>
-			</div>
 			
-			<div class="curve-body">
-				<div style="flex:1;width:100%;overflow: auto;">
-					<!-- <div class="liquid-curve">
-						<LiquidCurve ref="liquidCurve"/>
-					</div> -->
-					<LiquidCurve ref="liquidCurve" @markChange="markChangeHandle"/>
-				</div>
-				<div class="curve-toolbar">
-					<el-form :inline="false" :model="toolForm" class="query-form-inline"  label-width="auto">
-						<el-form-item label="">
-							<el-icon color="#409EFC" :size="25" @click="liquidCurve.zoom('zoomin')" title="放大"><ZoomIn/></el-icon>
-							<el-icon color="#409EFC" :size="25" @click="liquidCurve.zoom('zoomout')" title="缩小"><ZoomOut/></el-icon>
-							<el-icon color="#409EFC" :size="24" @click="liquidCurve.zoom()" title="还原"><Aim/></el-icon>
-							
-							<el-button type="primary" @click="calculateDepth" size="small">开始计算</el-button>
-							<el-button type="success" @click="saveLiquid" :loading="isSaving" size="small">保存</el-button>
-						</el-form-item>
-						
-						<el-form-item label="计算方式">
-							<el-select v-model="toolForm.computeMode"  placeholder="计算方式"  @change="computeModeChange" style="width:100px;">
-								<el-option label="接箍法" value="hoop"/>
-								<el-option label="音速法" value="sound_speed"/>
-								<el-option label="音标法" value="sound_mark"/>
-							</el-select>
-						</el-form-item>
-						
-						<el-form-item label="计算深度(m)">
-						  <el-input v-model="toolForm.liquidDepth"  :controls="false" placeholder=""  class="tool-input" readonly/>
-						</el-form-item>
-						<el-form-item label="井口位号">
-						  <el-input v-model="toolForm.wellHeadPos"  :controls="false" placeholder=""  class="tool-input" readonly/>
-						</el-form-item>
-						<el-form-item label="液面位号">
-						  <el-input v-model="toolForm.liquidSufacePos"  :controls="false" placeholder=""  class="tool-input" readonly/>
-						</el-form-item>
-						
-						<el-form-item label="起始接箍位号" v-show="toolForm.computeMode=='hoop'">
-						  <el-input v-model="toolForm.hoopStartPos"  :controls="false" placeholder=""  class="tool-input" readonly/>
-						</el-form-item>
-						<el-form-item label="截止接箍位号" v-show="toolForm.computeMode=='hoop'">
-						  <el-input v-model="toolForm.hoopEndPos"  :controls="false" placeholder=""  class="tool-input" readonly/>
-						</el-form-item>
-						<el-form-item label="接箍数" v-show="toolForm.computeMode=='hoop'">
-						  <el-input-number v-model="toolForm.hoopCount"  :controls="false"  :min="1"  class="tool-input" clearable/>
-						</el-form-item>
-						<el-form-item label="平均管长" v-show="toolForm.computeMode=='hoop'">
-						  <el-input-number v-model="toolForm.avgLengthPipe"  :controls="false"   :min="5" class="tool-input" clearable/>
-						</el-form-item>
-						
-						<el-form-item label="音标深度(m)" v-show="toolForm.computeMode=='sound_mark'">
-						  <el-input-number v-model="toolForm.soundMarkDepth"  :controls="false" placeholder="音标深度" :min="1" class="tool-input" clearable/>
-						</el-form-item>
-						<el-form-item label="音标位号" v-show="toolForm.computeMode=='sound_mark'">
-						  <el-input v-model="toolForm.soundMarkPos"  :controls="false" placeholder=""  class="tool-input" readonly/>
-						</el-form-item>
-						
-						<el-form-item label="音速(m/s)" v-show="toolForm.computeMode=='sound_speed'">
-						  <el-input-number v-model="toolForm.soundSpeed"  :controls="false" placeholder="音速" :min="1" class="tool-input" clearable @blur="cacheInput"/>
-						</el-form-item>
-						<el-form-item label="计算系数" v-show="toolForm.computeMode=='sound_speed'">
-						  <el-input-number v-model="toolForm.soundSpeedFactor"  :controls="false" placeholder="系数"  class="tool-input" clearable/>
-						</el-form-item>
-						<el-form-item label="计算音速(m/s)" v-show="toolForm.computeMode=='hoop' || toolForm.computeMode=='sound_mark'">
-						  <el-input v-model="toolForm.soundSpeedCalc"  class="tool-input" readonly/>
-						</el-form-item>
-						
-						
-						
-						
-					</el-form>
-				</div>
-				
-				
-			</div>
+			
+			
 		</div>
 		
 		
 		<el-dialog v-model="dialogCtr.show" :title="dialogCtr.title" :close-on-click-modal="false"
-		:destroy-on-close="true" width="75%"
+		:destroy-on-close="true" width="85%"  draggable align-center
 		>
-			<component :is="dialogCtr.subComp" :wellId="queryForm.wellId" :dataTime="queryForm.dataTime"></component>
+			<component :is="dialogCtr.subComp" :wellId="queryForm.wellId" :dataTime="queryForm.dataTime" :liquidId="dialogCtr.liquidId"></component>
 		</el-dialog>
 	</div>
 </template>
@@ -159,18 +86,23 @@
 	
 	import LiquidConfig from './LiquidConfig.vue'
 	import LiquidDepthCurve from './LiquidDepthCurve.vue'
+	import LiquidWaveCurve from './LiquidWaveCurve.vue'
 	
 	//弹窗动态组件配置
 	const dialogCtr=reactive({
 		subComp:null,
 		show:false,
-		title:'查看窗口'
+		title:'查看窗口',
+		liquidId:null
 	})
 	
-	const showDialog=(type)=>{
-		dialogCtr.subComp=type=="setting"?markRaw(LiquidConfig):markRaw(LiquidDepthCurve)
+	const showDialog=(type,liquidId)=>{
+		let compMap={"setting":markRaw(LiquidConfig),"depthcurve":markRaw(LiquidDepthCurve),"wavecurve":markRaw(LiquidWaveCurve)}
+		let titMap={"setting":"远程设置","depthcurve":"深度曲线回放","wavecurve":"动液面曲线"}
+		dialogCtr.liquidId=liquidId
+		dialogCtr.subComp=compMap[type]
 		dialogCtr.show=true
-		dialogCtr.title=type=="setting"?"远程设置":"深度曲线回放"
+		dialogCtr.title=titMap[type]
 	}
 	//弹窗动态组件配置-结束
 	
@@ -185,23 +117,7 @@
 		dataTime:null
 	})
 	
-	const toolForm=reactive({
-		dataId:null,
-		computeMode:null,
-		wellHeadPos:null,
-		liquidSufacePos:null,
-		hoopStartPos:null,
-		hoopEndPos:null,
-		hoopCount:null,
-		avgLengthPipe:null,
-		soundMarkPos:null,
-		soundMarkDepth:null,
-		soundSpeed:null,
-		soundInterval:null,
-		liquidDepth:null,
-		soundSpeedFactor:1.0,
-		soundSpeedCalc:null
-	})
+	
 	
 	const rowClassCtr=({row,rowIndex})=>{
 		return row.staticCalcIf?'static-row':''
@@ -223,148 +139,6 @@
 	}
 	
 	
-	
-	
-	const liquidCurve=ref(null)
-	
-	const isSaving=ref(false)
-	
-	
-	const markChangeHandle=()=>{
-		let posData=liquidCurve.value.getMarkPos()
-		Object.assign(toolForm,posData)
-	}
-	
-	//缓存输入音速下次使用
-	const cacheInput=()=>{
-		if(toolForm.soundSpeed){
-			app.putSetting('preSoundSpeed',toolForm.soundSpeed)
-		}
-		
-	}
-	
-	const loadLiquid=(dataId)=>{
-		liquidCurve.value.reset()
-		wellLiquidAPI.getLiquid(dataId).then(resp=>{
-			if(resp.code!=0){
-				ElMessage.error(resp.msg||'获取动液面数据失败')
-				return
-			}
-			//console.log(resp.data)
-			utils.copyAttr(resp.data,toolForm)
-			if(toolForm.soundSpeedFactor==null){
-				toolForm.soundSpeedFactor=1.0
-			}
-			if(!toolForm.soundInterval){
-				toolForm.soundInterval=0.0045 
-			}
-			
-			let datas={hoopDatas:resp.data.hoopDatas.split(','),liquidDatas:resp.data.liquidDatas.split(',')}
-			let {computeMode,liquidDepth,wellHeadPos,liquidSufacePos,soundMarkPos,hoopStartPos,hoopEndPos}=resp.data
-			datas.initData={computeMode,liquidDepth,wellHeadPos,liquidSufacePos,soundMarkPos,hoopStartPos,hoopEndPos}
-			liquidCurve.value.setData(datas)
-		}).catch(err=>{
-			console.log('get liquid data occur:',err)
-			ElMessage.error('获取动液面数据出错')
-		})
-	}
-	
-	//动液面深度计算
-	const calculateDepth=()=>{
-		let calMode=toolForm.computeMode
-		let marks=liquidCurve.value.getMarkPos()
-		let offset=marks.liquidSufacePos-marks.wellHeadPos
-		let depth=null,calcSoundSpeed=null
-		if(offset<=0){
-			ElMessage.error('请正确设置井口、液面位置')
-			return
-		}
-		if(calMode=="sound_speed"){
-			if(!toolForm.soundSpeed || toolForm.soundSpeed<=0){
-				ElMessage.error('请正确设置音速')
-				return
-			}
-			depth=toolForm.soundSpeedFactor*toolForm.soundSpeed*offset*toolForm.soundInterval*0.5
-			
-		}
-		else if(calMode=="sound_mark"){
-			let smarkOffset=marks.soundMarkPos-marks.wellHeadPos
-			if(smarkOffset<=0 || marks.soundMarkPos>marks.liquidSufacePos){
-				ElMessage.error('请正确设置音标位置')
-				return
-			}
-			if(!toolForm.soundMarkDepth || toolForm.soundMarkDepth<=0){
-				ElMessage.error('请正确设置音标深度')
-				return
-			}
-			depth=(offset/smarkOffset)*toolForm.soundMarkDepth
-			
-			calcSoundSpeed=(toolForm.soundMarkDepth*2)/(smarkOffset*toolForm.soundInterval)
-		}
-		
-		else if(calMode=="hoop"){
-			let hoopOffset=Math.abs(marks.hoopEndPos-marks.hoopStartPos)
-			if(marks.hoopEndPos<marks.wellHeadPos || marks.hoopEndPos>marks.liquidSufacePos || marks.hoopStartPos<marks.wellHeadPos || marks.hoopStartPos>marks.liquidSufacePos){
-				ElMessage.error('请正确设置接箍位置')
-				return
-			}
-			if(!toolForm.avgLengthPipe || toolForm.avgLengthPipe<=0){
-				ElMessage.error('请正确设置平均管长')
-				return
-			}
-			if(!toolForm.hoopCount || toolForm.hoopCount<=0){
-				ElMessage.error('请正确设置接箍数')
-				return
-			}
-			depth=toolForm.avgLengthPipe*toolForm.hoopCount
-			depth=(offset/hoopOffset)*depth
-			
-			calcSoundSpeed=(toolForm.avgLengthPipe*toolForm.hoopCount*2)/(hoopOffset*toolForm.soundInterval)
-		}
-		
-		
-		if(depth && depth>0){
-			toolForm.liquidDepth=depth.toFixed(2)
-			liquidCurve.value.refreshDepthRule(parseFloat(toolForm.liquidDepth))
-		}
-		
-		if(calcSoundSpeed){
-			toolForm.soundSpeedCalc=calcSoundSpeed.toFixed(2)
-		}
-	}
-	
-	
-	
-	const computeModeChange=(val)=>{
-		toolForm.liquidDepth=null
-		
-		if(!toolForm.soundSpeed){
-			toolForm.soundSpeed=app.takeSetting('preSoundSpeed') || 340
-		}
-		
-		setTimeout(()=>{liquidCurve.value.setInitData(toolForm)},1)
-		
-	}
-	
-	const saveLiquid=()=>{
-		isSaving.value=true
-		let posData=liquidCurve.value.getMarkPos()
-		let formData=toRaw(toolForm)
-		Object.assign(formData,posData)
-		wellLiquidAPI.saveLiquid(formData).then(resp=>{
-			isSaving.value=false
-			if(resp.code!=0){
-				ElMessage.error(resp.msg || '数据保存失败')
-				return
-			}
-			ElMessage.success('操作成功')
-			tabQuery()
-		}).catch(err=>{
-			isSaving.value=false
-			console.log(err)
-		})
-	}
-	
 	//测算静液面操作
 	const setStaticCalcTag=(row)=>{
 		
@@ -391,11 +165,7 @@
 			})
 	}
 	
-	onMounted(()=>{
-		setTimeout(()=>{
-			liquidCurve.value.initResize()
-		},10)
-	})
+	
 	
 	const store = useHomeStore()
 	const {currentTreeNode} = storeToRefs(store)
@@ -414,7 +184,8 @@
 <style scoped>
 	.liquid-page{
 		width:100%;
-		/* height: 100%; */
+		height: 100%;
+		padding:5px;
 		box-sizing: border-box;
 		display: flex;
 		flex-flow:column nowrap;
@@ -426,49 +197,13 @@
 	} */
 	
 	.page-body{
-		flex:1;
-		display: flex;
-		flex-flow:column nowrap;
-	}
-	.liquid-tab{
-		height: calc(100vh - 515px);
-	}
-	
-	.curve-body{
-		display: flex;
-		flex-flow: row nowrap;
+		height: calc(100% - 5px);
 	}
 	
-	.curve-toolbar{
-		width:220px;
-		height:auto;
-		line-height: 30px;
-		padding:5px;
-		background-color:#f0f9ff;
-		font-size: 14px;
-		
-	}
 	
-	.curve-toolbar .el-form-item{
-		margin-bottom:5px;
-		justify-content:flex-start;
-	}
-	
-	.curve-toolbar .el-icon{
-		cursor: pointer;
-		margin-right:3px;
-	}
 	
 	
 	
-	.tool-input{
-		width:100px;
-		text-align: left;
-	}
-	.tool-input-unit{
-		color:#999;
-		font-size: 12px;
-	}
 	.liquid-page:deep(.el-table .static-row td:not(.el-table-fixed-column--right)) {
 		background-color: #44a632 !important;
 		color:#000;

src/pages/single/LiquidWaveCurve.vue

@@ -0,0 +1,299 @@
+<template>
+	<div class="liquid-curve">
+				<div style="flex:1;width:100%;overflow: auto;">
+					<LiquidCurve ref="liquidCurve" @markChange="markChangeHandle" :height="curveCompH"/>
+				</div>
+				<div class="curve-toolbar">
+					<el-form :inline="false" :model="toolForm" class="query-form-inline"  label-width="auto">
+						<el-form-item label="">
+							<el-icon color="#409EFC" :size="25" @click="liquidCurve.zoom('zoomin')" title="放大"><ZoomIn/></el-icon>
+							<el-icon color="#409EFC" :size="25" @click="liquidCurve.zoom('zoomout')" title="缩小"><ZoomOut/></el-icon>
+							<el-icon color="#409EFC" :size="24" @click="liquidCurve.zoom()" title="还原"><Aim/></el-icon>
+							
+							<el-button type="primary" @click="calculateDepth" size="small">开始计算</el-button>
+							<el-button type="success" @click="saveLiquid" :loading="isSaving" size="small">保存</el-button>
+						</el-form-item>
+						
+						<el-form-item label="计算方式">
+							<el-select v-model="toolForm.computeMode"  placeholder="计算方式"  @change="computeModeChange" style="width:100px;">
+								<el-option label="接箍法" value="hoop"/>
+								<el-option label="音速法" value="sound_speed"/>
+								<el-option label="音标法" value="sound_mark"/>
+							</el-select>
+						</el-form-item>
+						
+						<el-form-item label="计算深度(m)">
+						  <el-input v-model="toolForm.liquidDepth"  :controls="false" placeholder=""  class="tool-input" readonly/>
+						</el-form-item>
+						<el-form-item label="井口位号">
+						  <el-input v-model="toolForm.wellHeadPos"  :controls="false" placeholder=""  class="tool-input" readonly/>
+						</el-form-item>
+						<el-form-item label="液面位号">
+						  <el-input v-model="toolForm.liquidSufacePos"  :controls="false" placeholder=""  class="tool-input" readonly/>
+						</el-form-item>
+						
+						<el-form-item label="起始接箍位号" v-show="toolForm.computeMode=='hoop'">
+						  <el-input v-model="toolForm.hoopStartPos"  :controls="false" placeholder=""  class="tool-input" readonly/>
+						</el-form-item>
+						<el-form-item label="截止接箍位号" v-show="toolForm.computeMode=='hoop'">
+						  <el-input v-model="toolForm.hoopEndPos"  :controls="false" placeholder=""  class="tool-input" readonly/>
+						</el-form-item>
+						<el-form-item label="接箍数" v-show="toolForm.computeMode=='hoop'">
+						  <el-input-number v-model="toolForm.hoopCount"  :controls="false"  :min="1"  class="tool-input" clearable/>
+						</el-form-item>
+						<el-form-item label="平均管长" v-show="toolForm.computeMode=='hoop'">
+						  <el-input-number v-model="toolForm.avgLengthPipe"  :controls="false"   :min="5" class="tool-input" clearable/>
+						</el-form-item>
+						
+						<el-form-item label="音标深度(m)" v-show="toolForm.computeMode=='sound_mark'">
+						  <el-input-number v-model="toolForm.soundMarkDepth"  :controls="false" placeholder="音标深度" :min="1" class="tool-input" clearable/>
+						</el-form-item>
+						<el-form-item label="音标位号" v-show="toolForm.computeMode=='sound_mark'">
+						  <el-input v-model="toolForm.soundMarkPos"  :controls="false" placeholder=""  class="tool-input" readonly/>
+						</el-form-item>
+						
+						<el-form-item label="音速(m/s)" v-show="toolForm.computeMode=='sound_speed'">
+						  <el-input-number v-model="toolForm.soundSpeed"  :controls="false" placeholder="音速" :min="1" class="tool-input" clearable @blur="cacheInput"/>
+						</el-form-item>
+						<el-form-item label="计算系数" v-show="toolForm.computeMode=='sound_speed'">
+						  <el-input-number v-model="toolForm.soundSpeedFactor"  :controls="false" placeholder="系数"  class="tool-input" clearable/>
+						</el-form-item>
+						<el-form-item label="计算音速(m/s)" v-show="toolForm.computeMode=='hoop' || toolForm.computeMode=='sound_mark'">
+						  <el-input v-model="toolForm.soundSpeedCalc"  class="tool-input" readonly/>
+						</el-form-item>
+						
+						
+						
+						
+					</el-form>
+				</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch,onMounted, toRaw,markRaw,useAttrs,nextTick} from 'vue'
+	import LiquidCurve from '../../components/liquidCurve/LiquidCurve.vue'
+	import wellLiquidAPI from '../../api/wellLiquid.js'
+	import utils from '../../utils/utils.js'
+	import app from '../../utils/app.js'
+	
+	const attrs = useAttrs()
+	
+	const toolForm=reactive({
+			dataId:null,
+			computeMode:null,
+			wellHeadPos:null,
+			liquidSufacePos:null,
+			hoopStartPos:null,
+			hoopEndPos:null,
+			hoopCount:null,
+			avgLengthPipe:null,
+			soundMarkPos:null,
+			soundMarkDepth:null,
+			soundSpeed:null,
+			soundInterval:null,
+			liquidDepth:null,
+			soundSpeedFactor:1.0,
+			soundSpeedCalc:null
+		})
+		
+		const liquidCurve=ref(null)
+		
+		const isSaving=ref(false)
+		
+		const curveCompH=ref(400)
+		const calPageHeight=()=>{
+			let rect=document.querySelector('.liquid-curve').getBoundingClientRect()
+			curveCompH.value=(rect.height || 420)-20
+		}
+		
+		onMounted(()=>{
+			setTimeout(()=>{
+				calPageHeight()
+				nextTick(()=>{
+					liquidCurve.value.init()
+					liquidCurve.value.initResize()
+					loadLiquid(attrs.liquidId)
+				})
+				
+				
+			},10)
+			
+			
+		})
+		
+		const markChangeHandle=()=>{
+			let posData=liquidCurve.value.getMarkPos()
+			Object.assign(toolForm,posData)
+		}
+		
+		//缓存输入音速下次使用
+		const cacheInput=()=>{
+			if(toolForm.soundSpeed){
+				app.putSetting('preSoundSpeed',toolForm.soundSpeed)
+			}
+			
+		}
+		
+		const loadLiquid=(dataId)=>{
+			liquidCurve.value.reset()
+			wellLiquidAPI.getLiquid(dataId).then(resp=>{
+				if(resp.code!=0){
+					ElMessage.error(resp.msg||'获取动液面数据失败')
+					return
+				}
+				//console.log(resp.data)
+				utils.copyAttr(resp.data,toolForm)
+				if(toolForm.soundSpeedFactor==null){
+					toolForm.soundSpeedFactor=1.0
+				}
+				if(!toolForm.soundInterval){
+					toolForm.soundInterval=0.0045 
+				}
+				
+				let datas={hoopDatas:resp.data.hoopDatas.split(','),liquidDatas:resp.data.liquidDatas.split(',')}
+				let {computeMode,liquidDepth,wellHeadPos,liquidSufacePos,soundMarkPos,hoopStartPos,hoopEndPos}=resp.data
+				datas.initData={computeMode,liquidDepth,wellHeadPos,liquidSufacePos,soundMarkPos,hoopStartPos,hoopEndPos}
+				liquidCurve.value.setData(datas)
+			}).catch(err=>{
+				console.log('get liquid data occur:',err)
+				ElMessage.error('获取动液面数据出错')
+			})
+		}
+		
+		//动液面深度计算
+		const calculateDepth=()=>{
+			let calMode=toolForm.computeMode
+			let marks=liquidCurve.value.getMarkPos()
+			let offset=marks.liquidSufacePos-marks.wellHeadPos
+			let depth=null,calcSoundSpeed=null
+			if(offset<=0){
+				ElMessage.error('请正确设置井口、液面位置')
+				return
+			}
+			if(calMode=="sound_speed"){
+				if(!toolForm.soundSpeed || toolForm.soundSpeed<=0){
+					ElMessage.error('请正确设置音速')
+					return
+				}
+				depth=toolForm.soundSpeedFactor*toolForm.soundSpeed*offset*toolForm.soundInterval*0.5
+				
+			}
+			else if(calMode=="sound_mark"){
+				let smarkOffset=marks.soundMarkPos-marks.wellHeadPos
+				if(smarkOffset<=0 || marks.soundMarkPos>marks.liquidSufacePos){
+					ElMessage.error('请正确设置音标位置')
+					return
+				}
+				if(!toolForm.soundMarkDepth || toolForm.soundMarkDepth<=0){
+					ElMessage.error('请正确设置音标深度')
+					return
+				}
+				depth=(offset/smarkOffset)*toolForm.soundMarkDepth
+				
+				calcSoundSpeed=(toolForm.soundMarkDepth*2)/(smarkOffset*toolForm.soundInterval)
+			}
+			
+			else if(calMode=="hoop"){
+				let hoopOffset=Math.abs(marks.hoopEndPos-marks.hoopStartPos)
+				if(marks.hoopEndPos<marks.wellHeadPos || marks.hoopEndPos>marks.liquidSufacePos || marks.hoopStartPos<marks.wellHeadPos || marks.hoopStartPos>marks.liquidSufacePos){
+					ElMessage.error('请正确设置接箍位置')
+					return
+				}
+				if(!toolForm.avgLengthPipe || toolForm.avgLengthPipe<=0){
+					ElMessage.error('请正确设置平均管长')
+					return
+				}
+				if(!toolForm.hoopCount || toolForm.hoopCount<=0){
+					ElMessage.error('请正确设置接箍数')
+					return
+				}
+				depth=toolForm.avgLengthPipe*toolForm.hoopCount
+				depth=(offset/hoopOffset)*depth
+				
+				calcSoundSpeed=(toolForm.avgLengthPipe*toolForm.hoopCount*2)/(hoopOffset*toolForm.soundInterval)
+			}
+			
+			
+			if(depth && depth>0){
+				toolForm.liquidDepth=depth.toFixed(2)
+				liquidCurve.value.refreshDepthRule(parseFloat(toolForm.liquidDepth))
+			}
+			
+			if(calcSoundSpeed){
+				toolForm.soundSpeedCalc=calcSoundSpeed.toFixed(2)
+			}
+		}
+		
+		
+		
+		const computeModeChange=(val)=>{
+			toolForm.liquidDepth=null
+			
+			if(!toolForm.soundSpeed){
+				toolForm.soundSpeed=app.takeSetting('preSoundSpeed') || 340
+			}
+			
+			setTimeout(()=>{liquidCurve.value.setInitData(toolForm)},1)
+			
+		}
+		
+		const saveLiquid=()=>{
+			isSaving.value=true
+			let posData=liquidCurve.value.getMarkPos()
+			let formData=toRaw(toolForm)
+			Object.assign(formData,posData)
+			wellLiquidAPI.saveLiquid(formData).then(resp=>{
+				isSaving.value=false
+				if(resp.code!=0){
+					ElMessage.error(resp.msg || '数据保存失败')
+					return
+				}
+				ElMessage.success('操作成功')
+				tabQuery()
+			}).catch(err=>{
+				isSaving.value=false
+				console.log(err)
+			})
+		}
+</script>
+
+<style scoped>
+	.liquid-curve{
+		min-height: calc(100vh - 220px);
+		display: flex;
+		flex-flow: row nowrap;
+	}
+	
+	.curve-toolbar{
+		width:220px;
+		height:auto;
+		line-height: 30px;
+		padding:5px;
+		background-color:#f0f9ff;
+		font-size: 14px;
+		
+	}
+	
+	.curve-toolbar .el-form-item{
+		margin-bottom:5px;
+		justify-content:flex-start;
+	}
+	
+	.curve-toolbar .el-icon{
+		cursor: pointer;
+		margin-right:3px;
+	}
+	.tool-input{
+		width:100px;
+		text-align: left;
+	}
+	.tool-input-unit{
+		color:#999;
+		font-size: 12px;
+	}
+	.liquid-page:deep(.el-table .static-row td:not(.el-table-fixed-column--right)) {
+		background-color: #44a632 !important;
+		color:#000;
+	}
+</style>