增加单井多参数历史曲线

src/api/wellParam.js

@@ -12,7 +12,7 @@ api.save = (data) => {
 	    return request({
 	        url: url,
 	        method: 'post',
-			params:  data
+			data:  data
 	    });
 }
 
@@ -20,7 +20,7 @@ api.del = (data) => {
 	    return request({
 	        url: '/base/wellparam/delete',
 	        method: 'post',
-			params:  data
+			data:  data
 	    });
 }
 
@@ -34,7 +34,16 @@ api.getByWellAndParam=(wellId,paramCode)=>{
 	return request({
 	    url: '/base/wellparam/getByWellAndParam',
 	    method: 'post',
-		params:  {wellId,paramCode}
+		data:  {wellId,paramCode}
+	});
+}
+
+
+api.loadWellParam = (wellId)=>{
+	return request({
+	    url: '/base/wellparam/loadByWell',
+		method: 'post',
+	    data:  {wellId}
 	});
 }
 

src/components/ECLineChart.vue

@@ -24,6 +24,9 @@
 			type:Object,   //{x:[],y:[]}
 			required:true
 		},
+		dataLoad:{
+			type:Function
+		},
 		title:{
 			type:String
 		},
@@ -113,8 +116,15 @@
 			chartInstance.setOption(opt)
 			
 	},{deep:true})
-		
 	
+	
+	/* const startLoad=()=>{
+		
+	}
+		
+	defineExpose({
+		startLoad
+	}) */
 		
 </script>
 

src/pages/single/WellHisCurve.vue

@@ -0,0 +1,122 @@
+<template>
+	<div class="qpage">
+		<el-form :inline="true" :model="queryForm" class="query-form-inline" label-width="auto">
+			<el-form-item label="井名:">
+				<div style="width:150px;">{{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" />
+			</el-form-item>
+
+			<el-form-item>
+				<el-button type="primary" :loading="isQuerying" @click="queryHandle">检索</el-button>
+			</el-form-item>
+		</el-form>
+		<div class="qpage-body">
+			<el-scrollbar>
+				<ECLineChart v-for="(param,index) in params" :key="index" :chartData="chartDataMap[param.paramCode]||[]" :id="'chart'+index"
+					:yUnit="param.displayUnit" :title="param.paramName" height="400px" width="100%" />
+			</el-scrollbar>
+		</div>
+
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch,toRaw} from 'vue'
+	import {storeToRefs} from 'pinia'
+	import {useHomeStore} from '../../store/home.js'
+	import wellParamAPI from '../../api/wellParam.js'
+	import paramHisAPI from '../../api/paramHis.js'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import ECLineChart from '../../components/ECLineChart.vue'
+
+	const isQuerying = ref(false)
+	const queryForm = reactive({
+		wellId: null,
+		wellName: null,
+		dataTime: null
+	})
+
+	const params = ref([])
+
+	const chartDataMap =reactive({})
+
+	const queryHandle = () => {
+		loadWellCurveData()
+	}
+
+	const store = useHomeStore()
+	const {currentTreeNode} = storeToRefs(store)
+
+	//加载该井的参数配置信息
+	const loadWellParam = () => {
+		wellParamAPI.loadWellParam(queryForm.wellId).then(resp => {
+			//console.log(resp)
+			if (resp.code != 0) {
+				ElMessage.error(resp.msg)
+				return
+			}
+			params.value = resp.data.data.filter(param=>param.paramCode.indexOf('diagram')<0)
+			
+			loadWellCurveData()
+		}).catch(err => {
+			console.log(err)
+		})
+	}
+	
+	//循环加载该井的所有参数的历史曲线数据
+	const loadWellCurveData=()=>{
+		params.value.forEach(param=>{
+			loadParamCurveData(param.paramCode)
+		})
+	} 
+	
+	//加载单个曲线图数据
+	const loadParamCurveData=(paramCode)=>{
+		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:formdata.wellId,paramCode}).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg)
+				return
+			}
+			
+			/* if(!chartDataMap[paramCode]){
+				chartDataMap[paramCode]=ref([])
+			} */
+			chartDataMap[paramCode]=buildCurveData(resp.data.data)
+			
+			
+		}).catch(err=>{
+			
+		})
+	}
+	
+	//远程获取的数据转为曲线组件要求的格式
+	const buildCurveData=(datas)=>{  //[{gatherTime,dispDataVal}]
+		let curveDatas=[]
+		datas.forEach(data=>{
+			curveDatas.push([data.gatherTime,data.dispDataVal||data.dataVal])
+		})
+		return curveDatas
+	}
+
+	watch(currentTreeNode, (newNode, oldNode) => {
+		if (newNode != null && newNode.nodeType == 'well') {
+			queryForm.wellId = newNode.id
+			queryForm.wellName = newNode.name
+			loadWellParam()
+		}
+
+	}, {
+		immediate: true
+	})
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+</style>