Forráskód Böngészése

增加液位量液模块(历时液位数据,手动量液,量液图形)

chenwen 1 éve
szülő
commit
fbe3550690
2 módosított fájl, 205 hozzáadás és 0 törlés
  1. 21 0
      src/api/liquidMeasure.js
  2. 184 0
      src/pages/analysis/LiquidMeasure.vue

+ 21 - 0
src/api/liquidMeasure.js

@@ -0,0 +1,21 @@
+import request from '../utils/request';
+
+const api={}
+
+api.loadYield=(wellId,startTime,endTime)=>{
+	return request({
+	    url: '/liquid/measure/loadYieldForChart',
+	    method: 'post',
+		data:  {wellId,startTime,endTime}
+	});
+}
+
+api.calcYield=(wellId,liquidId)=>{
+	return request({
+	    url: '/liquid/measure/measureCalc',
+	    method: 'post',
+		data:  {wellId,liquidId}
+	});
+}
+
+export  default api

+ 184 - 0
src/pages/analysis/LiquidMeasure.vue

@@ -0,0 +1,184 @@
+<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="/liquid/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="liquidTime" label="液面时间" width="160" />
+					<el-table-column prop="flowPressDiff" label="流动压力(KPa)" width="120" />
+					<el-table-column prop="depthDiff" label="深度差(m)" width="100" />
+					<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" />
+					<el-table-column prop="liquidPressIndex" label="采油指数(m^3/d.MPa)" width="180" />
+					<el-table-column prop="liquidDepthIndex" label="采油指数(m^3/d.m)" width="160" />
+					<el-table-column prop="oilPressIndex" label="产油指数(m^3/d.MPa)" width="180" />
+					<el-table-column prop="oilDepthIndex" label="产油指数(m^3/d.m)" width="160" />
+					<el-table-column prop="waterPressIndex" label="产水指数(m^3/d.MPa)" width="180" />
+					<el-table-column prop="waterDepthIndex" label="产水指数(m^3/d.m)" width="160" />
+					  
+					<el-table-column prop="note" label="备注" width="240" />
+					<el-table-column prop="oper" label="操作" width="160" fixed="right">
+						<template #default="scope">
+							<div class="tool-column">
+								<el-button type="primary" icon="edit" size="small" @click="calcYield(scope.row)">计算产量</el-button>
+							</div>
+							
+						</template>				
+					</el-table-column>
+			  </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/liquidMeasure.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 calcYield=(row)=>{
+		console.log(row)
+		api.calcYield(queryForm.wellId,row.liquidIdStr).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg || '计算液量失败')
+				return
+			}
+			ElMessage.success('计算液量成功')
+			queryHandle()
+		}).catch(err=>{
+			console.log(err)
+			ElMessage.error('计算液量出错')
+		})
+	}
+	
+	const loadStepLineDatas=(wellId,startTime,endTime)=>{
+		if(!stepLineInited){
+			stepLineRef.value.init()
+			stepLineInited=true
+		}
+		stepLineDatas.value=[]
+		
+		api.loadYield(wellId,startTime,endTime).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg || '加载阶梯折线图数据失败')
+				return
+			}
+			let series1=[],series2=[],series3=[]
+			resp.data.forEach(item=>{
+				series1.push([item.liquidTime,item.liquidYield])
+				series2.push([item.liquidTime,item.oilYield])
+				series3.push([item.liquidTime,item.waterYield])
+			})
+			
+			stepLineDatas.value=[{name:'液量',data:series1},{name:'油量',data:series2},{name:'水量',data:series3}]
+			
+		}).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 
+			//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>