shell/pages/index/maintenance.vue

<template>
	<view class="content">
	  <view class="tabbox">
		  <view class="tabline" @click="tabindex=1">
			  <view class="tabName" :class="{'tabActive':tabindex==1}">保养计划</view> 
			  <view class="tabHx" v-if="tabindex==1"></view>
		  </view>
		  <view class="tabline" @click="tabindex=2">
			  <view class="tabName " :class="{'tabActive':tabindex==2}">原厂配件参数</view> 
		      <view class="tabHx" v-if="tabindex==2"></view>
		  </view>
	  </view>
	  
	  <view class="" v-if="tabindex==1">
	  	<scroll-view scroll-y="true" scroll-x="true" :scroll-top="scrollTop" :scroll-left="scrollTop" @scroll="scroll">
	  	
	  		<!-- 内容 -->
	  		<view class="teamContent" :style="{width:HN_width}">
	  			<view v-for="(itemRow,indexRow) in itemData" :key="indexRow">
	  				<view class="row" :class="{grayColor:indexRow==0}">
	  					<view v-for="(itemCol,indexCol) in itemRow" :key="indexCol" class="colBg"  :class="{grayColor:indexCol==0}">
	  						<view class="col" v-if="indexCol==0">{{itemCol}}</view>
	  						<view class="col" v-else-if="indexRow==0">{{itemCol}}</view>
	  						<view class="redCol" v-else-if="indexRow!=0 && indexCol!=0 && itemCol==1"></view>
	  						<view class="grayCol" v-else-if="indexRow!=0 && indexCol!=0 && itemCol==0"></view>
	  						
	  					</view>
	  				</view>
	  			</view>
	  		</view>
	  		
	  		
	  	
	  	</scroll-view>
	  </view>
	  <view class="" v-if="tabindex==2">
	  	<view class="pjTitleBox">
			<view class="pjTitle">保养计划</view>
			<view class="pjTitle">规格型号</view>
			<view class="pjTitle">参考用量</view>
		</view>
		<view class="pjlineBox">
			<view class="pjline" v-for="(item,index) in pjList">
				<view class="pjitem">{{item[0]}}</view>
				<view class="pjitem">{{item[1]}}</view>
				<view class="pjitem">{{item[2]}}</view>
			</view>
		</view>
	  </view>
	  
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				tabindex:1,
				liyangId :'',
				itemData:[],
				noMoreShow: false,
				mileage: '',
				liyangId: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				leftData:[],
				pjList:[]
			}
		},
		onLoad(opt) {
			 this.optdata=opt;
             this.queryPlan();
			  this.queryOilInfoByGroupID()
		},
		computed: {
			HN_width() {
				var MaxLength = 2;
				var Row_Materials = this.itemData[0];
				if (Row_Materials != null && Row_Materials.length > 0) {
					MaxLength = Row_Materials.length * (180 + 40)
				}
		
				return MaxLength + 'rpx';
		
			},
		},
		methods: {
           queryPlan(){
			   uni.showLoading({ title: '加载中'});
			   this.$http('matchingByOpen/queryPlan', {
			     mileage:'0',
			     liyangId:this.optdata.nLevelID,
			     
			    },'POST').then(res => {
					uni.hideLoading();
					this.itemData = res.data
					
					// 首列数据
					for (var i = 0; i < res.data.length; i++) {
						var leftArr = res.data[i]
						this.leftData.push(leftArr[0])
					}   
			   })
		   },
		   queryOilInfoByGroupID(){
			   this.$http('matchingByOpen/queryOilInfoByGroupID', {
			    // mileage:'30000',
			     groupId:this.optdata.id,
			     
			    },'POST').then(res => {
			   		this.pjList=res.data
			   })
		   },
		   scroll: function(e) {
		   	  this.old.scrollTop = e.detail.scrollTop
		   },
		}
	}
</script>

<style scoped>
.tabbox{
	display: flex;
}
.tabline{
	width: 50%;
}
.tabHx{
	width: 40rpx;
	height: 4rpx;
	background: #FF4F00;
	margin: 0 auto;
}
.tabName{
	font-weight: 400;font-size: 30rpx;
	color: #1A1A1A;
	line-height: 42rpx;
	padding-top: 23rpx;padding-bottom: 8rpx;
	text-align: center;
}
.tabActive{
	color: #FF4F00;
}
.scroll-view {
		white-space: nowrap;
		height: 1000;

	}

	.teamContent {
		width: 100%;
		align-items: center;
	}

	.row {
		display: flex;
		justify-content: space-around;
		width: 100%;
		
	}
	.colBg{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		width: 180rpx;
		border: 1rpx #EEEEEE solid;
		
		
	}
	.col {
		color: #333333;
		font-size: 28rpx;
		
	}
	.redCol,
	.grayCol{
		width: 24rpx;
		height: 24rpx;
		background-color: #FF4F00;
		border-radius: 12rpx;
		
	}
	.grayCol{
		background-color: #DDDDDD;
	}
	.grayColor{
		background-color: #F7F7F7;
	}
	.leftView{
		display: flex;
		justify-content: space-around;
		flex-flow: column;
		
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		background-color: #FFFFFF;
		z-index: 99;
		
	}
	
	.leftTitleBg{
		
		padding: 20rpx;
		width: 180rpx;
		background-color: #F7F7F7;
		border: 1rpx #EEEEEE solid;
	}
	.leftTitle{
		color: #333333;
		font-size: 28rpx;
	}
	.firstRow{
		height: 80rpx;
	}
	.pjTitle{
		width: 33.3%;text-align: center;font-weight: 400;
color: #1A1A1A;font-size: 26rpx;
	}
	.pjTitleBox{
		display: flex;
		justify-content: space-between;
		background: #F7F7F7;
		line-height: 93rpx;
	}
	.pjline{
		display: flex;justify-content: space-between;padding: 20rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}
	.pjitem{
		width: 33.3%;text-align: center;font-weight: 400;
		color: #1A1A1A;font-size: 26rpx;
	}
</style>