瀏覽代碼

计量数据,增加导入功能

chenwen 4 天之前
父節點
當前提交
9e05626529
共有 4 個文件被更改,包括 192 次插入3 次删除
  1. 29 0
      src/api/wellMeasure.js
  2. 54 2
      src/pages/base/WellMeasure.vue
  3. 108 0
      src/pages/base/WellMeasureUpload.vue
  4. 1 1
      src/pages/single/WellMeasureHis.vue

+ 29 - 0
src/api/wellMeasure.js

@@ -1,4 +1,5 @@
 import request from '../utils/request';
+import dwnloadRequest from '../utils/dwnloadRequest';
 
 const api={}
 
@@ -21,4 +22,32 @@ api.save= (jsonData) => {
 	    });
 }
 
+api.getBasePath=()=>{
+	return request.defaults.baseURL
+}
+
+api.download=()=>{
+	return dwnloadRequest({
+	    url: '/analysis/produce/downloadMeasureXlsTmp',
+	    method: 'post',
+		responseType:'blob',
+		data: {_num:Math.random()}
+	});
+}
+
+api.getExcelImportConfig=()=>{
+	return {
+		sheet:0,  //被导入的数据的sheet索引从0开始,默认为0
+		start:"A2",  //区块格子 起始格  数据区域的最左上角单元格索引,以excel中的命名方式
+		end:"G10000",
+		block:[   //导入列定义  一维区块
+			{id:"A1",name:"startTime",title:"测量日期",dataType:"date",fmt:"yyyy-MM-dd HH:mm:ss",require:true},
+			{id:"B1",name:"wellName",title:"井名",dataType:"string",require:true},
+			{id:"C1",name:"waterRatio",title:"含水率",dataType:"string",require:true},
+			{id:"D1",name:"meteredLiquidYield",title:"计量液量",dataType:"string",require:true}
+		]
+			         
+	}
+}
+
 export  default api

+ 54 - 2
src/pages/base/WellMeasure.vue

@@ -34,6 +34,8 @@
 			  <template #toolGroup>
 				<el-button type="primary" icon="plus" @click="addNewRow">新增</el-button>
 				<el-button type="success" icon="select" @click="save">保存</el-button>
+				<el-button type="warning" icon="Tickets" @click="download">Excel模板下载</el-button>
+				<el-button type="primary" icon="Tickets" @click="dialogCtr.show=true">Excel导入</el-button>
 				 
 			  </template>
 			  <template #tabColumns={indexGenerate}>
@@ -54,7 +56,7 @@
 				  		<template #default="scope">
 							<div style="display: flex;align-items: center;">
 								<el-input v-model="scope.row.wellName" :controls="false" :precision="2" :disabled="true"/>
-								<el-icon :size="20" @click="setWellForInput(scope.row)"><HelpFilled/></el-icon>
+								<el-icon :size="20" @click="setWellForInput(scope.row)" title="点击填入井名"><HelpFilled/></el-icon>
 							</div>
 				  			
 				  		</template>				
@@ -86,17 +88,31 @@
 				
 			</CrudTable>
 		</div>
+		
+		<el-dialog v-model="dialogCtr.show" :title="dialogCtr.title" :close-on-click-modal="false"
+		:destroy-on-close="true"   draggable align-center
+		>
+			<component :is="dialogCtr.subComp" @acceptMsg="acceptCompMsg"></component> <!--@acceptMsg="acceptCompMsg"-->
+			<template #footer>
+			    <span class="dialog-footer">
+			        <el-button @click="dialogCtr.show=false">关闭</el-button>
+			    </span>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
 <script setup>
-	import {reactive,ref,watch,isRef,toRaw,onMounted, nextTick} from 'vue'
+	import {reactive,ref,watch,isRef,toRaw,onMounted, nextTick,markRaw} from 'vue'
 	import CrudTable from '../../components/crudtable/CrudTable.vue'
 	import {ElMessageBox,ElMessage} from 'element-plus'
 	import { storeToRefs } from 'pinia'
 	import { useHomeStore } from '../../store/home.js'
 	
+	import WellMeasureUploader from './WellMeasureUpload.vue'
+	
 	import api from "../../api/wellMeasure.js"
+	import app from '../../utils/app.js'
 	
 	const crudTable=ref(null)
 	
@@ -110,6 +126,18 @@
 	  dataTime:null
 	})
 	
+	const dialogCtr=reactive({
+		subComp:markRaw(WellMeasureUploader),
+		show:false,
+		title:'计量数据导入'
+	})
+	
+	const acceptCompMsg=(msg)=>{
+		if(msg=="tabQuery"){
+			queryHandle()
+		}
+	}
+	
 	const store=useHomeStore()
 	const  {currentTreeNode} = storeToRefs(store)
 	watch(currentTreeNode,(newNode, oldNode)=>{
@@ -121,6 +149,30 @@
 	},{ immediate: true })
 	
 	
+	onMounted(()=>{
+		queryHandle()
+	})
+	
+	const download=()=>{
+		api.download().then(resp=>{
+			const fileReader = new FileReader();
+			fileReader.readAsText(resp.data)
+			fileReader.onload = (event) => {
+				try{
+					const data = JSON.parse(event.target.result)
+					if(data.code!=0){
+						ElMessage.error(data.msg || '下载文件失败')
+					}
+				}
+				catch(err){
+					app.parseDownloadFile(resp)
+				}
+			}
+		}).catch(err=>{
+			console.log(err)
+			ElMessage.error('下载文件出现网络错误')
+		})
+	}
 	
 	const queryHandle=()=>{
 		isQuerying.value=true

+ 108 - 0
src/pages/base/WellMeasureUpload.vue

@@ -0,0 +1,108 @@
+<template>
+	<div class="wmupload-page">
+		<div style="margin:10px 0px;">
+			<p style="margin:10px 0px;">计量数据文件<span style="font-size:12px;color:#999;">(大小不超过5M)</span></p>
+			<el-upload
+			   v-model:file-list="fileList"
+			   :action="api.getBasePath()+'/analysis/produce/importMeasure'"
+			   :headers="{token:app.getToken()}"
+			   :data="{config:JSON.stringify(api.getExcelImportConfig())}"
+			   list-type="text"
+			   :limit="1"
+			   :on-preview="handleUploadPreview"
+			   :on-remove="handleUploadRemove"
+			   :before-upload="beforeAvatarUpload"
+			   :on-exceed="handleUploadExceed"
+			   :on-success="handleUploadSuccess"
+			   :on-error="handleUploadError"
+			   
+			 >
+			   <el-icon><Plus /></el-icon>
+			   
+			 </el-upload>
+		</div>
+		
+		<div class="upload-result-show">
+			<p v-for="(msg,index) in importedMsg" :key="index">{{msg}}</p>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,onMounted,toRaw} from 'vue'
+	import app from '@/utils/app.js'
+	import api from '../../api/wellMeasure.js'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	
+	const emit=defineEmits(['acceptMsg'])
+	
+	const importedMsg=ref(null)
+	
+	//上传组件配置
+	
+	const fileList = ref([])
+	
+	const handleUploadPreview=(uploadFile)=>{
+		//previewImageUrl.value = uploadFile.url
+		//previewDialogShow.value = true
+	}
+	
+	const handleUploadRemove=(uploadFile, uploadFiles)=>{
+		//console.log(uploadFile, uploadFiles)
+		importedMsg.value=null
+	}
+	
+	const handleUploadExceed=(files,uploadFiles)=>{
+		ElMessage.error('每次只能上传1个文件');
+	}
+	
+	const handleUploadSuccess=(resp,uploadFile,uploadFiles)=>{
+		if(resp.code!=0){
+			//ElMessage.error(resp.msg);
+			importedMsg.value=[resp.msg]
+		}
+		else{
+			
+			let html=[`导入成功:${resp.data.successCount}条`]
+			if(resp.data.validateError&&resp.data.validateError.length>0){
+				html.push(`格式不符合要求:${resp.data.validateError}`)
+			}
+			if(resp.data.checkIgnor&&resp.data.checkIgnor.length>0){
+				html.push(`系统内无对应井名:${resp.data.checkIgnor}`)
+			}
+			
+			importedMsg.value=html
+			
+			if(resp.data.successCount){
+				emit("acceptMsg","tabQuery")
+			}
+		}
+		
+	}
+	
+	const handleUploadError=(error,uploadFile,uploadFiles)=>{
+		ElMessage.error('上传文件出错');
+	}
+	
+	const beforeAvatarUpload=(rawFile)=>{
+		if (rawFile.name.indexOf('xls') < 0 && rawFile.name.indexOf('xlsx') < 0) {
+			ElMessage.error('请上传Excel文件!')
+			return false
+		}
+		else if(rawFile.size / 1024 /1024  > 5){
+			ElMessage.error('单张图片不能超过5M!')
+			return false
+		}
+		
+		return true
+		
+	}
+	//上传组件配置结束
+</script>
+
+<style scoped>
+	.upload-result-show{
+		height:100px;
+		overflow-y: auto;
+	}
+</style>

+ 1 - 1
src/pages/single/WellMeasureHis.vue

@@ -29,7 +29,7 @@
 			  
 			  <template #tabColumns={indexGenerate}>
 				  <el-table-column type="index" :index="indexGenerate" label="序号" width="60" align="center" fixed/>
-				  <el-table-column prop="createTime" label="创建时间" width="160" fixed/>
+				  <el-table-column prop="startTime" label="测量日期" width="160" fixed/>
 				  <el-table-column prop="mixLiquidDensity" label="混液密度(kg/l)" width="120" />
 				  <el-table-column prop="crudeOilDensity" label="原油密度(kg/l)" width="120" />
 				  <el-table-column prop="waterDensity" label="水密度(kg/l)" width="120" />