增加油井监测班报（查询，填报）

src/api/monitorDutyRpt.js

@@ -0,0 +1,26 @@
+import request from '../utils/request';
+
+const api={}
+
+api.load = (formData) => {
+	    return request({
+	        url: '/rpt/monitor/load',
+	        method: 'post',
+			data:  formData
+	    });
+}
+
+
+
+api.saveRpt = (jsonData)=>{
+	return request({
+	    url: '/rpt/monitor/save',
+	    method: 'post',
+		data:  jsonData,
+		headers:{
+			'Content-Type':'application/json'
+		}
+	});
+}
+
+export  default api

src/pages/rpt/MonitorDutyRpt.vue

@@ -0,0 +1,374 @@
+<template>
+	<div class="out-page">
+		<div class="out-top">
+			<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+			    <el-form-item label="井站">
+				  <div style="width:140px;">{{queryForm.orgName}}</div>
+				</el-form-item>
+				<el-form-item label="日期">
+					<el-date-picker
+							v-model="queryForm.dutyDate"
+							type="date"
+							placeholder="请选择班报日期"
+						    value-format="YYYY-MM-DD"
+						  />
+				</el-form-item>
+				<el-form-item label="班次">
+					<el-select v-model="queryForm.dutyTime">
+						<el-option v-for="dt in dutyTimes" :key="dt" :label="dt" :value="dt"/>
+					</el-select>
+				</el-form-item>
+				  
+				<el-form-item>
+					<el-button type="primary" :loading="btnStatTag==1" :disabled="btnStatTag>0"  @click="queryHandle">检索</el-button>
+				</el-form-item>
+				
+				<el-form-item>
+					<el-button type="warning" :loading="btnStatTag==3" :disabled="btnStatTag>0" @click="saveRpt">保存</el-button>
+				</el-form-item>
+				<el-form-item>
+					<!-- <el-button type="primary" plain icon="Edit">导出</el-button> -->
+				</el-form-item>
+			</el-form>
+		</div>
+		
+		<div class="rpt-page"  ref="rpt_page">
+			<el-form :model="rptDatas" :show-message="false" @validate="formValidHandler" ref="rptform">
+			<div class="rpt-title" ref="rpt_title">
+				<div class="main-title">{{queryForm.orgName}}监测班报表</div>
+				<div class="sub-title">
+					<div>日期：{{dailyDatefmt}}</div>
+					<div>班次：{{queryForm.dutyTime}}</div>
+					<div><span>值班人：</span><el-input v-model="queryForm.dutyBy"/></div>
+					<div><span>审核人：</span><el-input v-model="queryForm.auditor"/></div>
+				</div>
+			</div>
+			
+			<div class="rpt-box">
+				<div class="rpt-table-header" ref="rpt_header">
+					<table cellpadding="0" cellspacing="0" class="rpt-table" align="center">
+						<tr>
+							<td><div class="rpt-table-cell rpttab-cell-0">项目</div></td>
+							<td><div class="rpt-table-cell rpttab-cell-1 ">井号</div></td>
+							<td><div class="rpt-table-cell rpttab-cell-2">现象</div></td>
+							<td><div class="rpt-table-cell rpttab-cell-3">结论</div></td>
+							<td><div class="rpt-table-cell rpttab-cell-4 ">处理情况</div></td>
+							<td  patch><div class="rpt-table-cell rpt-patch-cell"></div></td>		
+						</tr>
+					</table>
+				</div>
+				
+				<div class="rpt-table-body" @scroll="rptboxScrollHandler" ref="rpt_body">
+					
+						<table cellpadding="0" cellspacing="0"  class="rpt-table" align="center"> 
+							<template  v-if="rptDatas && rptDatas.length>0">
+								<tr class="dataRow">
+									<td :rowspan="rptDatas.length"><div class="rpt-edit-cell rpttab-cell-0">油<br>井<br>工<br>况</div></td>
+									<td><div class="rpt-edit-cell rpttab-cell-1">{{rptDatas[0].wellName}}</div></td>
+									<td><div class="rpt-edit-cell rpttab-cell-2"><el-input v-model="rptDatas[0].situation"/></div></td>
+									<td><div class="rpt-edit-cell rpttab-cell-3"><el-input v-model="rptDatas[0].conclusion"/></div></td>
+									<td><div class="rpt-edit-cell rpttab-cell-4"><el-input v-model="rptDatas[0].dealWith"/></div></td>
+								</tr>
+							
+								<tr class="dataRow" v-for="(duty,index) in rptDatas.slice(1) " :key="index">
+									<td><div class="rpt-edit-cell rpttab-cell-1">{{duty.wellName}}</div></td>
+									<td><div class="rpt-edit-cell rpttab-cell-2"><el-input v-model="duty.situation"/></div></td>
+									<td><div class="rpt-edit-cell rpttab-cell-3"><el-input v-model="duty.conclusion"/></div></td>
+									<td><div class="rpt-edit-cell rpttab-cell-4"><el-input v-model="duty.dealWith"/></div></td>
+								</tr>
+							</template>
+							
+							<template  v-if="rptOthDatas && rptOthDatas.length>0">
+								<tr class="dataRow">
+									<td rowspan="3"><div class="rpt-edit-cell rpttab-cell-0">其<br>它</div></td>
+									<td colspan="4"><el-input v-model="rptOthDatas[0].other"/></td>
+								</tr>
+								<tr class="dataRow" v-for="(oth,index) in rptOthDatas.slice(1)" :key="index">
+									<td colspan="4"><el-input v-model="oth.other"/></td>
+								</tr>
+							</template>
+							
+						</table>
+					
+				</div>
+				
+				<div class="rpt-table-fixed" style="display: none;">
+					<div class="rpt-table-header" ref="fixed_header">
+					    <table cellpadding="0" cellspacing="0" class="rpt-table" align="center">
+					       <tr>
+					    	<td><div class="rpt-table-cell rpttab-cell-0">项目</div></td>
+					    	<td><div class="rpt-table-cell rpttab-cell-1">井号</div></td>
+					       </tr>
+					    </table>    
+					</div>
+					<div class="rpt-table-body" ref="fixed_body">
+						<table cellpadding="0" cellspacing="0"  class="rpt-table" align="center">
+							
+						</table>
+					</div>
+				</div>
+			</div>
+			</el-form>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,onMounted,watch,toRaw,nextTick,computed} from 'vue'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import { storeToRefs } from 'pinia'
+	import { useHomeStore } from '../../store/home.js'
+	import rptAPI from '../../api/monitorDutyRpt.js'
+	
+	const queryForm=reactive({
+		dutyDate:null,
+		dutyTime:null,
+		orgId:null,
+		orgName:null,
+		auditor:null,
+		dutyBy:null
+	})
+	
+	const dailyDatefmt=computed(()=>{
+		if(queryForm.dutyDate){
+			let ds=queryForm.dutyDate.split('-')
+			return `${ds[0]}年${ds[1]}月${ds[2]}日`
+		}
+		return null
+	})
+	
+	const btnStatTag=ref(0)
+	
+	const dutyTimes=ref(['08:00-16:00','16:00-00:00','00:00-08:00'])
+	const rptDatas=ref(null)
+	const rptOthDatas=ref(null)
+	
+	const clearRpt=()=>{
+		rptDatas.value=null
+		Object.assign(queryForm,{dutyBy:null,auditor:null})
+	}
+	
+	const queryHandle=()=>{
+		
+		if(queryForm.dutyDate==null || queryForm.dutyTime==null || queryForm.orgId==null){
+			ElMessage.error('请选择井站、日期、班次后再继续')
+			return
+		}
+		clearRpt()
+		
+		btnStatTag.value=1
+		rptAPI.load(toRaw(queryForm)).then(resp=>{
+			btnStatTag.value=0
+			if(resp.code!=0){
+				ElMessage.error(resp.msg || "加载数据失败")
+				return 
+			}
+			
+			if(!resp.data || resp.data.length==0){
+				ElMessage.error("未找到对应数据")
+				return 
+			}
+			
+			let {dutyBy,auditor}=resp.data[0]
+			Object.assign(queryForm,{dutyBy,auditor})
+			
+			rptDatas.value=resp.data.filter(d=>d.otherHolder==null)
+			
+			rptOthDatas.value=resp.data.filter(d=>d.otherHolder!=null)
+			
+			//默认3行
+			if(!rptOthDatas.value || rptOthDatas.value.length==0){
+				rptOthDatas.value=[{other:null,otherHolder:queryForm.orgId},
+				{other:null,otherHolder:queryForm.orgId},
+				{other:null,otherHolder:queryForm.orgId},
+				]
+			}
+			
+			nextTick(()=>{
+				initSize()
+			})
+			
+		}).catch(err=>{
+			btnStatTag.value=0
+			ElMessage.error('加载数据出错')
+			console.log(err)
+		})
+	}
+	
+	const rptform=ref(null)
+	const rpt_page=ref(null)
+	const rpt_title=ref(null)
+	const rpt_body=ref(null)
+	const rpt_header=ref(null)
+	const fixed_body=ref(null)
+	const fixed_header=ref(null)
+	const rptBodyH=ref(300)
+	const fixedBodyH=ref(283)
+	
+	const rptboxScrollHandler=(evn)=>{
+		fixed_body.value.scrollTop=evn.target.scrollTop
+		rpt_header.value.scrollLeft=evn.target.scrollLeft
+	}
+	
+	const ruleStrLen=(msg)=>{
+		return {
+			min:0,
+			max:200,
+			message:`${msg}字符数不能超过200`,
+			trigger:'blur'
+		}
+	}
+	
+	let formValiding=false  //整体验证
+	
+	const formValidHandler=(prop,isValid,message)=>{
+		if(!isValid && !formValiding){
+			ElMessage.error(message)
+		}
+	}
+	
+	const saveRpt=()=>{
+		if(!rptOthDatas.value || rptOthDatas.value.length==0){
+			ElMessage.error('没有数据可保存')
+			return
+		}
+		formValiding=true
+		rptform.value.validate((isValid,invalidObj) => {
+			formValiding=false
+			if(!isValid){
+				ElMessage.error('还有数据不符合要求,请先修改再继续')
+				return
+			}
+			btnStatTag.value=3
+			let {dutyDate,dutyTime,dutyBy,auditor}=queryForm
+			let rptExtra={dutyDate,dutyTime,dutyBy,auditor}
+			let saveData=toRaw(rptDatas.value)
+			saveData.forEach(data=>{
+				Object.assign(data,rptExtra)
+			})
+			let othData=toRaw(rptOthDatas.value)
+			othData.forEach(data=>{
+				Object.assign(data,rptExtra)
+			})
+			
+			saveData=saveData.concat(othData)
+			
+			
+			
+			rptAPI.saveRpt(JSON.stringify(saveData)).then(resp=>{
+				btnStatTag.value=0
+				if(resp.code!=0){
+					ElMessage.error(resp.msg || '保存失败')
+					return
+				}
+				ElMessage.success('保存成功')
+				
+			}).catch(err=>{
+				btnStatTag.value=0
+				console.error(err)
+			})
+		})
+		
+		
+	}
+	
+	
+	onMounted(()=>{
+		setTimeout(()=>{
+			initSize()
+		},100)
+		
+	})
+	
+	const initSize=()=>{
+		
+		//报表内容区高度设置
+		rptBodyH.value=rpt_page.value.clientHeight-rpt_title.value.offsetHeight-rpt_header.value.offsetHeight-5
+		let diffH=rpt_body.value.offsetHeight-rpt_body.value.clientHeight
+		fixedBodyH.value=rptBodyH.value-diffH-1
+		
+		//固定列首格高度设置
+		let hdtab=rpt_header.value.querySelector('table')
+		let fixedHdtab=fixed_header.value.querySelector('table')
+		fixedHdtab.rows[0].cells[0].style.height=(hdtab.rows[0].cells[0].clientHeight+0.5)+'px'
+		
+		//报表标题宽度同步
+		//rpt_title.value.style.width=(rpt_body.value.offsetWidth-16)+'px'
+		rpt_page.value.style.width=(rpt_header.value.offsetWidth-16)+'px' //rpt_title.value.style.width
+	}
+	
+	const store=useHomeStore()
+	const  {currentTreeNode} = storeToRefs(store)
+	watch(currentTreeNode,(newNode, oldNode)=>{
+		if(newNode!=null && newNode.nodeType=='org'){
+			queryForm.orgId=newNode.id 
+			queryForm.orgName=newNode.name 
+		}
+		
+	},{ immediate: true })
+</script>
+
+<style scoped>
+	@import url('rpt.css');
+	.out-page{
+		height: 100%;
+		box-sizing: border-box;
+	}
+	.out-top{
+		height:60px;
+		padding:10px 20px;
+		border-bottom: 1px solid #e8e8e8;
+		box-sizing: border-box;
+	}
+	.rpt-page{
+		height: calc(100% - 60px);
+		width:auto;
+		margin:0px auto;
+	}
+	.rpt-title{
+		margin:0px;
+		box-sizing: border-box;
+	}
+	.sub-title{
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-between;
+	}
+	
+	.sub-title .el-input{
+		display: inline-block;
+		width: 140px;
+	}
+	.rpt-box{
+		width:auto;
+	}
+	
+	.rpttab-cell-0{width:120px;}
+	.rpttab-cell-1{width:150px;}
+	.rpttab-cell-2{width:260px;}
+	.rpttab-cell-3{width:300px;}
+	.rpttab-cell-4{width:350px;}
+	
+	.dblh-cell{height:56px;}
+	.colspan-center{text-align: center;}
+	
+	.rpt-table-body {
+		height: v-bind(rptBodyH+'px');
+	}
+	.rpt-table-fixed .rpt-table-body{
+		height: v-bind(fixedBodyH+'px');
+	}
+	
+	.rpt-table-body .el-form-item{
+		margin:0px;
+	}
+	
+	.el-input.rpt-table-cell{
+		height: 127px;
+		padding:0px;
+	}
+	
+	.el-input.rpt-table-cell:deep(.el-input__inner){
+		height:100%;
+	}
+</style>

src/pages/rpt/rpt.css

@@ -70,6 +70,10 @@ html,body{
 	
 }
 
+.rpt-edit-cell{
+	text-align:center;
+}
+
 .el-input.rpt-table-cell{
 	height: 100%;
 }