功图量液增加阶梯折线图显示

src/api/diagramMeasure.js

@@ -0,0 +1,13 @@
+import request from '../utils/request';
+
+const api={}
+
+api.load=(wellId,startTime,endTime)=>{
+	return request({
+	    url: '/diagram/measure/query',
+	    method: 'post',
+		data:  {wellId,startTime,endTime,currentPage:1,pageSize:100000}
+	});
+}
+
+export  default api

src/components/ECStepLineChart.vue

@@ -0,0 +1,132 @@
+<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' }
+		},
+		legend:{
+			right:30
+		},
+		grid:{
+			left: 30,
+			right: 30,
+			bottom: 10,
+			containLabel: true
+		},
+		xAxis: {
+			splitLine:{
+				show:true
+			},
+			type:'time',
+		    axisTick: {
+		   		alignWithLabel: false
+		   	},
+			axisLabel:{
+				
+				//formatter: '{dd} {HH}:00'
+			}
+		},
+		yAxis: {
+			name:props.yUnit||'',
+			nameTextStyle:{
+				align:'left'
+			},
+		    type: 'value',
+			axisLine:{
+				show:true
+			}
+		},
+		series: [
+		 
+		]
+	}
+	
+	
+	let chartInstance=null
+	
+	const init=()=>{
+		const canvasDiv=document.getElementById(props.id)
+		chartInstance = echarts.init(canvasDiv)
+		defOpts.series=buildSeries(props.chartData)
+		chartInstance.setOption(defOpts);
+	}
+	
+	const buildSeries=(chartData)=>{
+		if(chartData==null){
+			return []
+		}
+		return  chartData.map(item=>{
+			return {type:'line',step:'end',showSymbol:true,name:item.name,data:item.data}
+		})
+	}
+	
+	onMounted(()=>{
+		
+	})
+	
+	onUnmounted(()=>{
+		if(chartInstance){
+			console.log('dispose')
+			chartInstance.dispose()
+			chartInstance=null
+		}
+	})
+	
+	
+	watch(()=>props.chartData,(newData,oldData)=>{
+			//console.log(newData)
+			let opt=chartInstance.getOption()  //与初始化的opt有差别
+			opt.series=buildSeries(newData)
+			chartInstance.setOption(opt)
+			
+	},{deep:true})
+	
+	
+	
+	defineExpose({
+		init
+	}) 
+		
+</script>
+
+<style scoped>
+</style>

src/pages/analysis/DiagramMeasure.vue

@@ -0,0 +1,171 @@
+<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.timeRange" 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">
+			<CrudTable 
+			ref="crudTable"
+			page-info-opts="total, prev, pager, next,sizes"
+			url="/diagram/measure/query"
+			:pageSize="20"
+			:autoLoad="false"
+			>
+			 
+			  <template #tabColumns={indexGenerate}>
+				  <el-table-column type="index" :index="indexGenerate" label="序号" width="60" align="center" fixed/>
+				  <el-table-column prop="gatherTime" label="功图时间" width="160" />
+				  <el-table-column prop="conclusion" label="诊断结论" width="200" />
+				  <el-table-column prop="fillCoe" label="充满度(%)" width="120" />
+				  <el-table-column prop="comPumpEff" label="综合泵效" width="90" />
+				  <el-table-column prop="stroke" label="冲程(m)" width="80" />
+				  <el-table-column prop="freq" label="冲次(rpm)" width="90" />
+				  <el-table-column prop="liquidYield" label="产液量(m^3/d)" width="120" />
+				  <el-table-column prop="oilYield" label="产油量(m^3/d)" width="120" />
+				  <el-table-column prop="waterYield" label="产水量(m^3/d)" width="120" />
+				 
+				 
+			  </template>
+				
+			</CrudTable>
+		</div>
+		
+		<div class="echart-container">
+			<ECStepLineChart ref="stepLineRef"  id="diagram_measure_step_line" height="100%" width="100%" yUnit="产量(m^3/d)" :title="queryForm.wellName+'功图量液曲线'" :chartData="stepLineDatas"/>
+		</div>
+		
+		
+		
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch,onMounted} from 'vue'
+	import CrudTable from "../../components/crudtable/CrudTable.vue"
+	import DiagnoseStandardEdit from './DiagnoseStandardEdit.vue'
+	import diagnoseStandardAPI from "../../api/diagnoseStandard.js"
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import ECStepLineChart from '../../components/ECStepLineChart.vue'
+	
+	import {storeToRefs} from 'pinia'
+	import {useHomeStore} from '../../store/home.js'
+	
+	import api from "../../api/diagramMeasure.js"
+	
+	const crudTable=ref(null)
+	
+	const stepLineRef=ref(null)
+	
+	const stepLineDatas=ref([])
+	
+	let stepLineInited=false
+	
+	const isQuerying=ref(false)
+	
+	
+	const queryForm = reactive({
+	  wellName: '',
+	  wellId:null,
+	  timeRange:null
+	})
+	
+	const queryHandle=()=>{
+		isQuerying.value=true
+		let {wellId,timeRange}=queryForm
+		let [startTime,endTime]=timeRange||[]
+		crudTable.value.query({wellId,startTime,endTime}).then(resp=>{
+			isQuerying.value=false
+		})
+		
+		loadStepLineDatas(wellId,startTime,endTime)
+	}
+	
+	const loadStepLineDatas=(wellId,startTime,endTime)=>{
+		if(!stepLineInited){
+			stepLineRef.value.init()
+			stepLineInited=true
+		}
+		stepLineDatas.value=[]
+		
+		api.load(wellId,startTime,endTime).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg || '加载阶梯折线图数据失败')
+				return
+			}
+			let series1=[],series2=[],series3=[]
+			resp.data.data.forEach(item=>{
+				series1.push([item.gatherTime,item.liquidYield])
+				series2.push([item.gatherTime,item.oilYield])
+				series3.push([item.gatherTime,item.waterYield])
+			})
+			
+			stepLineDatas.value=[{name:'液量',data:series1},{name:'油量',data:series2},{name:'水量',data:series3}]
+			
+		}).catch(err=>{
+			ElMessage.error('加载阶梯折线图数据出错')
+			console.log(err)
+		})
+	}
+	
+	
+	
+	
+	/* onMounted(()=>{
+		setTimeout(()=>{
+			stepLineRef.value.init()
+			stepLineDatas.value=[
+				{
+					name:'液量',
+					data:[['2023-09-14',16],['2023-10-14',26],['2023-11-14',46],['2023-12-14',36]]
+				}
+			]
+		},100)
+	}) */
+	
+	
+	
+	
+	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 
+			//queryHandle()
+		}
+		
+	},{ immediate: true })
+	
+	
+	
+	
+	
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	
+	.edit-form-item{
+		width:260px;
+	}
+	
+	.qpage-body{
+		height: 300px;
+	}
+	
+	.echart-container{
+		height:calc(100% - 350px)
+	}
+</style>