单井单参数历史曲线绘制

src/api/paramHis.js

@@ -0,0 +1,15 @@
+import request from '../utils/request';
+
+const api={}
+
+api.loadHis=(data)=>{
+	data=data||{}
+	data['isCurve']=true
+	return request({
+	    url: '/paramdata/queryHisCurve',
+	    method: 'post',
+		data:  data
+	});
+}
+
+export  default api

src/components/ECLineChart.vue

@@ -0,0 +1,122 @@
+<template>
+	<div :id="id" :ref="id" :style="{width: width,height:height}"></div>
+</template>
+
+<script setup>
+	import {reactive,ref,onMounted,onUnmounted,toRaw,watch,getCurrentInstance, nextTick } from 'vue'
+	import * as echarts from 'echarts'
+	
+	const props=defineProps({
+		id:{
+			type:String,
+			required:true,
+			default:'linebox'
+		},
+		width:{
+			type:String,
+			default:'800px'
+		},
+		height:{
+			type:String,
+			default:'300px'
+		},
+		chartData:{
+			type:Object,   //{x:[],y:[]}
+			required:true
+		},
+		title:{
+			type:String
+		},
+		yUnit:{
+			type:String,
+			default:'v'
+		}
+	})
+	
+	let defOpts={
+		title: {
+		    text: props.title||"曲线",
+		    left: 'center',
+		    top: 0
+		},
+		tooltip: {
+			trigger: 'axis',
+			//axisPointer: { type: 'cross' }
+		},
+		
+		xAxis: {
+			splitLine:{
+				show:true
+			},
+			type:'time',
+		    axisTick: {
+		   		alignWithLabel: false
+		   	},
+			axisLabel:{
+				
+				//formatter: '{dd} {HH}:00'
+			}
+		},
+		yAxis: {
+			name:props.yUnit||'',
+		    type: 'value',
+			axisLine:{
+				show:true
+			}
+		},
+		series: [
+		  {
+		    data: [],
+		    type: 'line',
+			showSymbol:false
+		  }
+		]
+	}
+	
+	
+	let chartInstance=null
+	
+	onMounted(()=>{
+		//const pageInstance = getCurrentInstance()
+		const canvasDiv=document.getElementById(props.id) //pageInstance.refs[props.id]
+		//console.log(props.id)
+		nextTick(()=>{
+			
+		})
+		
+		chartInstance = echarts.init(canvasDiv)
+		//defOpts.xAxis.data=props.chartData.x
+		//console.log(props.title)
+		//defOpts.title.text=props.title
+		//defOpts.yAxis.name='yUnit'
+		//defOpts.series[0].data=props.chartData
+		chartInstance.setOption(defOpts);
+	})
+	
+	onUnmounted(()=>{
+		if(chartInstance){
+			console.log('dispose')
+			chartInstance.dispose()
+			chartInstance=null
+		}
+	})
+	
+	
+	watch(()=>props.chartData,(newData,oldData)=>{
+			//console.log(newData)
+			let opt=chartInstance.getOption()  //与初始化的opt有差别
+			//opt.xAxis.data=[]
+			//console.log(opt)
+			opt.yAxis[0].name=props.yUnit
+			opt.series[0].data=newData
+			//defOpts.series[0].data=newData
+			chartInstance.setOption(opt)
+			
+	},{deep:true})
+		
+	
+		
+</script>
+
+<style scoped>
+</style>

src/pages/single/ParamHisCurve.vue

@@ -0,0 +1,93 @@
+<template>
+	<div class="page-container">
+		<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+		  <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"
+		    />
+		  </el-form-item>
+		  
+		  <el-form-item>
+		    <el-button type="primary" :loading="isQuerying" @click="queryHandle">检索</el-button>
+		  </el-form-item>
+		</el-form>
+		<ECLineChart :chartData="chartData" id="line1" :yUnit="yUnit" :title="$attrs['ctxObj']['paramName']" height="400px" width="1000px"/>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,toRaw,onMounted,useAttrs} from 'vue'
+	import * as echarts from 'echarts'
+	import ECLineChart from '../../components/ECLineChart.vue'
+	import paramHisAPI from '../../api/paramHis.js'
+	import wellParamAPI from '../../api/wellParam.js'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	
+	const attrs = useAttrs()
+	
+	const chartData=ref([])
+	
+	const yUnit=ref('')
+	
+	const isQuerying=ref(false)
+	const queryForm = reactive({
+		dataTime:null
+	}) 
+	
+	
+	const queryHandle=()=>{
+		isQuerying.value=true
+		let formdata=toRaw(queryForm)
+		let startDate=formdata.dataTime?formdata.dataTime[0]:null
+		let endDate=formdata.dataTime?formdata.dataTime[1]:null
+		paramHisAPI.loadHis({startDate,endDate,wellId:attrs['ctxObj']['wellId'],paramCode:attrs['ctxObj']['paramCode']}).then(resp=>{
+			isQuerying.value=false
+			console.log(resp)
+			if(resp.code!=0){
+				ElMessage.error(resp.msg)
+				return
+			}
+			
+			chartData.value=buildCurveData(resp.data.data)
+			
+		}).catch(err=>{
+			isQuerying.value=false
+		})
+		
+		
+		
+	}
+	
+	
+	
+	const buildCurveData=(datas)=>{  //[{gatherTime,dispDataVal}]
+		let curveDatas=[]
+		datas.forEach(data=>{
+			curveDatas.push([data.gatherTime,data.dispDataVal||data.dataVal])
+		})
+		//console.log(curveDatas)
+		return curveDatas
+	}
+	
+	onMounted(()=>{
+		
+		wellParamAPI.getByWellAndParam(attrs['ctxObj']['wellId'],attrs['ctxObj']['paramCode']).then(resp=>{
+			console.log(resp)
+			if(resp.code==0&&resp.data){
+				yUnit.value=resp.data.displayUnit
+			}
+			queryHandle()
+		}).catch(err=>{
+			
+		})
+	})
+</script>
+
+<style scoped>
+</style>