|
@@ -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>
|