jp-railway/pages/oawork/data1.vue

<template>
	<view>
		<u-navbar title="数据明细">
		</u-navbar>
		<u-calendar v-model="show" mode="date" @change="change2"></u-calendar>

		<view class="mainHead">
			<view class="headO headOindex" @click="btnHead(-1)">
				<u-icon name="arrow-left" size="20"></u-icon>
			</view>
			<view  @click="show = true">
				{{time}}<u-icon  style="margin-left: 6px;" name="arrow-down"></u-icon>
			</view>
			<view class="headO"  @click="btnHead(1)" :class="{
				headOindex:nowtime!=time
			}" >
				<u-icon name="arrow-right" size="20" ></u-icon>
			</view>
		</view>
		
		<view class="mainBody">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="table">
				
				<view class="tableHead"  :style="'top:'+top">
					<table>
						<tr :style="data1style1" >
							<td :style="data1style2">
								单位
							</td>
						</tr>
						<tr v-for="(item,i) in  list[current].list" :key="i" :style="item.data1style1" >
							<td  >
								{{item.a}}
							</td>
						</tr>
					</table>
				
				</view>
				<view class="tableBody">
					<scroll-view  class="scroll-view_H"  scroll-x="true" style="white-space: nowrap;">
						<table>
							<tr class="tabbleHeadTr">
								<td rowspan="3" class="get_td_top" >
									单位
								</td>
								<td  rowspan="3">
									本月完成
								</td>
								<td  rowspan="3">
									累计完成
								</td>
								<td  rowspan="3">
									同期
								</td>
								<td  rowspan="3">
									增幅
								</td>
								<td  rowspan="1" colspan="12">
									其中
								</td>
							</tr>
							<tr class="tabbleHeadTr">
								<td colspan="2">
									增值税
								</td>
								<td  rowspan="2" >
									增幅
								</td><td  colspan="2">
									企业所得税
								</td><td  rowspan="2">
									增幅
								</td><td  colspan="2">
									个人所得税
								</td><td  rowspan="2">
									增幅
								</td><td  colspan="2">
									城建税
								</td><td  rowspan="2">
									增幅
								</td>
							</tr>
							
							<tr class="tabbleHeadTr">
								<td >
									本年
								</td>
								<td >
									上年
								</td>
								
								<td >
									本年
								</td>
								<td >
									上年
								</td>
								
								<td >
									本年
								</td>
								<td >
									上年
								</td>
								
								<td >
									本年
								</td>
								<td >
									上年
								</td>
							</tr>
							
							<tr v-for="(item,i) in  list[current].list" :key="i" class="tabbleBodyTr">
								<td :class="'get_td get_td_i_'+i">
									{{item.a}}
								</td>
								<td >
									{{item.b}}
								</td>
								<td >
									{{item.c}}
								</td>
								<td >
									{{item.d}}
								</td>
							</tr>
						</table>
					</scroll-view>
					
				</view>
				
			</view>
			
			 
		</view>
		
		
		
	</view>
</template>

<script>
	import {
		newDate,
		currentTimeStamp,
		parseUnixTime,
		afterTimeStamp,
	} from '@/apis/utils'
	
	export default {
		data() {
			return {
				nowtime:"",
				show:false,
				time:"",
				data1style:"",
				 top: '0px',
				current:0,
				list:[{
					name:"车务段",
					list:[
						{a:"223223223223223223223223223223223223223223",b:"222222222222",c:"223",d:"qwe223"},
						{a:"123",b:"223",c:"223",d:"tda223tda223tda223tda223tda223tda223tda223tda223"}
					]
				},{
					name:"机务段"
				},
				
				
				]
			}
		},
		onLoad(){
			this.nowtime=parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
			
			this.time=parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.tableBody').boundingClientRect(data => {
			  ("得到布局位置信息" + JSON.stringify(data));
			 // //("节点离页面顶部的距离为" + data.top);
			  this.top=data.top+"px"
			}).exec();
			
			query.select('.get_td_top').boundingClientRect(data => {
			  //(".get_td得到布局位置信息" + JSON.stringify(data));
				this.data1style1="height:"+data.height+"px"
				this.data1style2="width:"+(data.width-2)+"px;text-align: center;"
				
			}).exec();
			
			query.selectAll('.get_td').boundingClientRect(data => {
			  (".get_td得到布局位置信息" + JSON.stringify(data));
			  (".get_td节点离页面顶部的距离为" + data.top);
			  for(var i in  data){
				  var style="width:"+data[i].width+"px;height:"+data[i].height+"px"
				  this.list[this.current].list[i].data1style1=style
			  }
			
			}).exec();
		},
		methods: {
			btnHead(a){
					if(a>0){
						if(this.nowtime==this.time){
							return
						}else{
							
						}
					}else{
						
					}
					this.time=parseUnixTime(afterTimeStamp(a,newDate(this.time)), '{y}-{m}-{d}');
					
			},
			
			change2(e) {
							this.time=e.result;
						},
			change(index) {
							this.current = index;
						}
		}
	}
</script>

<style   lang="scss" scoped  >
	.headO{
		color:#D4D6D9 ;
		border: 1px solid #D4D6D9 ;
		border-radius: 58px;
		width: 20px;
		height: 20px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
	}
	.headOindex{
		color:#1677FF  ;
		border: 1px solid #1677FF  ;
	}
	.mainHead{
		background-color: rgba(255, 255, 255, 1);
		margin: 12px 16px;
		border-radius: 8px;
		    display: flex;
		    justify-content: space-around;
			padding: 14px 0;
	}
	.scroll-Y {
		height: 300rpx;
	}
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	
	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	
	.scroll-view-item_H {
		display: inline-block;
		//width: 85%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	
	
	.table{
		 //   display: flex;
		table{
			border-top: 1px solid #dbdbdb;
			border-spacing:0;
			td{
				border-right: 1px solid #dbdbdb;
				border-bottom: 1px solid #dbdbdb;
				line-height: 20px;
				background-color: rgba(255, 255, 255, 1);
				
				max-width: 140px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				white-space: pre-line;
				padding :0 3px;
				
			}
			.tabbleHeadTr td{
				width: 80px;
				min-width: 80px;
				
				text-align: center;
				//height: 60px;
				
				//color: rgba(255, 255, 255, 1);
				
			}
			.tabbleBodyTr td{
				height: 60px;
				
			
			}
		}
	}
	.tableHead{
		position: relative;
		    position: absolute;
		   
		    z-index: 99;
	}
	.mainBody{
		.mainItem{
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			line-height: 20px;
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			margin: 16px;
			padding: 12px 16px;
			
			.name{
				
			}
			
			.left{
				
			}
		}
	}
</style>