采油井日报表基本布局

src/pages/rpt/OilDailyRpt.vue

@@ -0,0 +1,221 @@
+<template>
+	<div class="rpt-page"  ref="rpt_page">
+		<div class="rpt-title" ref="rpt_title">
+			<div class="main-title">采油厂稀油井站采油井生产日报表</div>
+			<div class="sub-title">
+				<div>采油厂</div>
+				<div>2023年11月15日</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 rowspan="3"><div class="rpt-table-cell rpttab-cell-0">井号</div></td>
+						<td rowspan="3"><div class="rpt-table-cell rpttab-cell-1">生产方式</div></td>
+						<td colspan="5"><div class="rpt-table-cell colspan-center">工作制度</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><div class="rpt-table-cell rpttab-cell-5">巡检时间</div></td>
+						<td colspan="3"><div class="rpt-table-cell colspan-center">压力(MPa)</div></td>
+						<td colspan="4"><div class="rpt-table-cell colspan-center">温度(℃)</div></td>
+						<td colspan="3"><div class="rpt-table-cell">伴热</div></td>
+						<td colspan="5"><div class="rpt-table-cell">计量	</div></td>
+						<td colspan="2"><div class="rpt-table-cell">电流(A)	</div></td>
+						<td rowspan="3"><div class="rpt-table-cell rpttab-cell-9">备注</div></td>
+						<td  patch><div class="rpt-table-cell rpt-patch-cell"></div></td>		
+					</tr>
+					
+					<tr>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">油嘴(mm)</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">冲程(m)</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">冲次(rpm)</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">泵径(mm)</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">泵深(m)</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">h:min</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">h:min</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">h:min</div></td>
+						
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">油压</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">套压</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">回压</div></td>
+						
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">井口</div></td>
+						<td colspan="2"><div class="rpt-table-cell colspan-center">加热炉</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">进站</div></td>
+						
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">方式</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">配参量(m3/d)</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">实参量(m3/d)</div></td>
+						
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">量油标高/罐位(cm)</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">计量起止时间      h:min-h:min</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">平均量油时间(s)</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">计量液量(t/d)</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">计量气量(m3/d)</div></td>
+						
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">上行</div></td>
+						<td rowspan="2"><div class="rpt-table-cell rpttab-cell-4">下行</div></td>
+					</tr>
+					
+					<tr>
+						<td><div class="rpt-table-cell rpttab-cell-4">进口</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">出口</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">  
+					<tr class="dataRow dbl-line" v-for=" d in 15 ">
+						<td><div class="rpt-table-cell rpttab-cell-0">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-1">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-2">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-3">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">d</div></td>
+					</tr>
+					<tr class="tab-foot-tr">
+						<td><div class="rpt-table-cell rpttab-cell-0">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-1">d</div></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">巡检人：</div></td>
+						<td ><div class="rpt-table-cell edit-able-cell">dd</div></td>
+						<td></td>
+						<td><div class="rpt-table-cell rpttab-cell-4">计量人：</div></td>
+						<td><div class="rpt-table-cell edit-able-cell">dd</div></td>
+					</tr>
+				</table>
+				
+				
+			</div>
+			
+			<div class="rpt-table-fixed">
+				<div class="rpt-table-header" ref="fixed_header">
+				    <table cellpadding="0" cellspacing="0" class="rpt-table" align="center">
+				       <tr>
+				    	<td rowspan="3"><div class="rpt-table-cell rpttab-cell-0">井号2</div></td>
+				    	<td rowspan="3"><div class="rpt-table-cell rpttab-cell-1">生产方式2</div></td>
+				       </tr>
+				    </table>    
+				</div>
+				<div class="rpt-table-body" ref="fixed_body">
+					<table cellpadding="0" cellspacing="0"  class="rpt-table" align="center">
+						<tr class="dataRow dbl-line" v-for=" d in 15 ">
+							<td><div class="rpt-table-cell rpttab-cell-0">d</div></td>
+							<td><div class="rpt-table-cell rpttab-cell-1">d</div></td>
+						</tr>
+						<tr class="tab-foot-tr">
+							<td><div class="rpt-table-cell rpttab-cell-0">&nbsp;</div></td>
+						</tr>
+					</table>
+				</div>
+			</div>
+			
+			
+			
+			
+			
+		</div>
+		
+		
+	</div>
+	
+</template>
+
+<script setup>
+	import {reactive,ref,onMounted} from 'vue'
+	
+	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)=>{
+		//console.log(evn.target.scrollTop)
+		//console.log(fixed_body.value)
+		fixed_body.value.scrollTop=evn.target.scrollTop
+		rpt_header.value.scrollLeft=evn.target.scrollLeft
+	}
+	
+	onMounted(()=>{
+		setTimeout(()=>{
+			console.log(rpt_body.value.clientHeight,rpt_body.value.offsetHeight)
+			console.log(rpt_page.value.offsetHeight)
+			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')
+		console.log(hdtab.rows[0].cells[0].clientHeight)
+		
+		let fixedHdtab=fixed_header.value.querySelector('table')
+		fixedHdtab.rows[0].cells[0].style.height=(hdtab.rows[0].cells[0].clientHeight+0.5)+'px'
+	}
+</script>
+
+<style scoped>
+	@import url('rpt.css');
+	
+	.rpt-page{
+		height: 100%;
+	}
+	.sub-title{
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-between;
+	}
+	
+	.rpttab-cell-0{width:120px;}
+	.rpttab-cell-1{width:100px;}
+	.rpttab-cell-2{width:100px;}
+	.rpttab-cell-3{width:100px;}
+	.rpttab-cell-4{width:100px;}
+	.rpttab-cell-5{width:100px;}
+	.rpttab-cell-6{width:100px;}
+	.rpttab-cell-7{width:100px;}
+	.rpttab-cell-8{width:100px;}
+	.rpttab-cell-9{width:100px;}
+	.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');
+	}
+</style>