transport_integrated_app/pages/roadTransport/transportData/detail.vue

<template>
	<!-- 查看详情页面 -->
	<view class="detail_con">
		<view class="detail_box">
			<view class="top_box">
				<view class="top_item">
					<view class="unit_left">
						<view class="unit">管理单位</view>
						<view class="unit_name">{{roadData.reportingUnitId}}</view>
					</view>
					<view class="unit_time">{{roadData.statisticalDate || ''}} {{roadData.reportPhaseValue}}</view>
				</view>
				<view class="top_bot">
					<view class="all_item first">
						<view class="all_left">负责人</view>
						<view class="all_right">{{roadData.responsiblePersonId  || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">联系电话</view>
						<view class="all_right">{{roadData.contactNumber  || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">营运收入</view>
						<view class="all_right">{{roadData.operatingRevenue  || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">定线通勤包车(辆)：</view>
						<view class="all_right">{{roadData.regularCommuteCharter == 0 ? 0 : roadData.regularCommuteCharter || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">运送农民工包车(辆)：</view>
						<view class="all_right">{{roadData.migrantWorkersCharter == 0  ? 0 : roadData.migrantWorkersCharter ||''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">除定线、农民工包车辆</view>
						<view class="all_right" >{{roadData.otherCharter == 0 ? 0 :  roadData.otherCharter || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">投放运力：包车数</view>
						<view class="all_right" >{{roadData.capacityCharter == 0 ? 0 :  roadData.capacityCharter || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">投放运力：班车数</view>
						<view class="all_right" >{{roadData.capacityShuttle == 0 ? 0 :  roadData.capacityShuttle || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">投放运力：总客车数</view>
						<view class="all_right" >{{roadData.capacityTotalBus == 0 ? 0 :  roadData.capacityTotalBus || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">定线通勤班次</view>
						<view class="all_right" >{{roadData.regularCommuteTrips == 0 ? 0 :  roadData.regularCommuteTrips || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">运送农民工班次</view>
						<view class="all_right" >{{roadData.migrantWorkersTrips == 0 ? 0 :  roadData.migrantWorkersTrips || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">除定线通勤包车、农民工包车班次</view>
						<view class="all_right">{{roadData.otherTrips == 0 ? 0 :  roadData.otherTrips || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">投放运力：包车班次</view>
						<view class="all_right">{{roadData.capacityCharterTrips == 0 ? 0 :  roadData.capacityCharterTrips || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">投放运力：班车班次</view>
						<view class="all_right">{{roadData.capacityShuttleTrips == 0 ? 0 :  roadData.capacityShuttleTrips || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">投放运力：班次</view>
						<view class="all_right">{{roadData.capacityTotalTrips == 0 ? 0 :  roadData.capacityTotalTrips || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">定线通勤包车客运量</view>
						<view class="all_right">{{roadData.regularCommutePassengerVolume == 0 ? 0 :  roadData.regularCommutePassengerVolume || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">运送农民工包车客运量(万)</view>
						<view class="all_right">{{roadData.migrantWorkersPassengerVolume == 0 ? 0 :  roadData.migrantWorkersPassengerVolume || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">除定线通勤包车、农民工包车以外的客运量</view>
						<view class="all_right">{{roadData.otherPassengerVolume == 0 ? 0 :  roadData.otherPassengerVolume || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">包车客运量(万)</view>
						<view class="all_right">{{roadData.charterPassengerVolume == 0 ? 0 :  roadData.charterPassengerVolume || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">班车客运量(万)</view>
						<view class="all_right">{{roadData.shuttlePassengerVolume == 0 ? 0 :  roadData.shuttlePassengerVolume || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">完成客运量(万)</view>
						<view class="all_right">{{roadData.totalPassengerVolume == 0 ? 0 :  roadData.totalPassengerVolume || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">总客位数(座)</view>
						<view class="all_right">{{roadData.totalSeatCapacity == 0 ? 0 :  roadData.totalSeatCapacity || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">去年同期客运量(万)</view>
						<view class="all_right">{{roadData.passengerVolumeLastYear == 0 ? 0 :  roadData.passengerVolumeLastYear || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">去年总客车量(辆)</view>
						<view class="all_right" >{{roadData.totalBusLastYear == 0 ? 0 :  roadData.totalBusLastYear || ''}}</view>
					</view>
					<view class="persent_box">
						<view class="content top">
							<view class="left">客运量与去年同期比率(%)</view>
							<view class="right" :class="roadData.passengerVolumeRatio > 0 ? 'green' : roadData.passengerVolumeRatio < 0 ? 'red' : ''">{{roadData.passengerVolumeRatio ? roadData.passengerVolumeRatio + '%' :  roadData.passengerVolumeRatio == 0 ? 0 : ''}}</view>
						</view>
						<view class="content">
							<view class="left">客车总量同比上升(%)</view>
							<view class="right" :class="roadData.totalBusIncreaseRatio > 0 ? 'green' : roadData.totalBusIncreaseRatio < 0 ? 'red' : ''">{{roadData.totalBusIncreaseRatio ? roadData.totalBusIncreaseRatio + '%' : roadData.totalBusIncreaseRatio == 0 ? 0 : ''}}</view>
						</view>
					</view>
					<view class="all_item">
						<view class="all_left">定制客运量(万人)</view>
						<view class="all_right" >{{roadData.customizedPassengerVolume == 0 ? 0 :  roadData.customizedPassengerVolume || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">投放运力：加班数</view>
						<view class="all_right" >{{roadData.overtimeTrips == 0 ? 0 :  roadData.overtimeTrips || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">较大以上安全事故次数</view>
						<view class="all_right" >{{roadData.significantAccidents == 0 ? 0 :  roadData.significantAccidents || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">联网售票张数(万张)</view>
						<view class="all_right" >{{roadData.onlineTicketSales == 0 ? 0 :  roadData.onlineTicketSales || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">当日人员伤者数(人)</view>
						<view class="all_right" >{{roadData.dailyInjuredPersons == 0 ? 0 :  roadData.dailyInjuredPersons || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">交通运行情况</view>
						<view class="all_right" >{{roadData.trafficSituationReport == 0 ? 0 :  roadData.trafficSituationReport || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">当日人员亡者数(人)</view>
						<view class="all_right" >{{roadData.dailyFatalities == 0 ? 0 :  roadData.dailyFatalities || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">应急情况报告</view>
						<view class="all_right" >{{roadData.emergencySituationReport == 0 ? 0 :  roadData.emergencySituationReport || ''}}</view>
					</view>
					<view class="all_item">
						<view class="all_left">备注</view>
						<view class="all_right" >{{roadData.remarks == 0 ? 0 :  roadData.remarks || ''}}</view>
					</view>
				</view>
			</view>
			<view class="bottom_box">
				<p class="edit_btn" @click="handleEdit">编辑</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roadData:{},
			}
		},
		onLoad(options){
			let item = JSON.parse(options.item)
			console.log(item)
			// let item1 = JSON.parse(JSON.stringify(item))
			// if(item1.highwaySubDataList.length != 0){
			// 	item1.highwaySubDataList[0].isSpread = true; //显示展开收起按钮，false时为收起，true为展开
			// }
			this.roadData = item
			// this.getDetail()
		},
		methods: {
			//点击收起按钮
			clickPack(item){
				this.$set(item,"isSpread",false)
			},
			handleSpread(item){
				this.$set(item,"isSpread",true)
			},
			// 点击编辑按钮
			handleEdit(){
				uni.navigateTo({
					url:"/pages/roadTransport/transportData/form?pageFrom=edit&item=" + JSON.stringify(this.roadData)
				})
			},
			getDetail(){
				this.$request(getApp().globalData.baseUrl + '/api/biz/highSpeedOperationController/selectById/' + '8A47103EE00000018772BC97AE50FFB7',"GET").then(res =>{
					console.log(res)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail_con{
		width: 100%;
		height: 100%;
		overflow-y: auto;
		
		.detail_box{
			width: 690rpx;
			background: #fff;
			border-radius: 30rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom: 50rpx;
			
			.top_box{
				width: 630rpx;
				padding: 38rpx 30rpx 0rpx;
				display: flex;
				flex-direction: column;
				
				.top_item{
					width: 100%;
					// margin-top: 38rpx;
					margin-bottom: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					
					.unit_left{
						width: 100%;
						display: flex;
						.unit{
							width: 102rpx;
							height: 37rpx;
							background: #FFF7E4;
							border-radius: 10rpx;
							border: 1rpx solid #EF9A4F;
							font-size: 20rpx;
							color: #E37616;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						
						.unit_name{
							font-size: 30rpx;
							color: #333;
							font-weight: bold;
							line-height: 48rpx;
							margin-left: 20rpx;
						}
					}
					.unit_time{
						margin-top: 30rpx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #999999;
					}
				}
				.top_bot{
					width: 100%;
					.persent_box{
						width: 630rpx;
						margin: 0 auto;
						background-color: #F6F6F6;
						border-radius: 30rpx;
						margin-top: 30rpx;
						
						
						.content{
							width: 576rpx;
							padding: 34rpx 32rpx 30rpx 22rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							&.top{
								border-bottom: 1rpx solid #FFFFFF;
							}
							
							
							.left{
								font-size: 24rpx;
								color: #666;
							}
							.right{
								color: #333;
								font-size: 28rpx;
								
								&.green{
									color: #1ECE5F;
								}
								
								&.red{
									color: #EB4747;
								}
							}
						}
					}
				
					.all_item{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 32rpx;
						
						&.first{
							margin-top: 0rpx;
						}
						
						&.last{
							margin-bottom: 30rpx;
						}
						
						.all_left{
							color: #666666;
							font-size: 26rpx;
						}
						
						.all_right{
							font-size: 28rpx;
							color: #333;
						}
					}
				}
				
				
				.con_item{
					width: 570rpx;
					background: #F8F8F8;
					border-radius: 30rpx;
					margin: 0 auto;
					margin-top: 30rpx;
					padding: 30rpx 30rpx;
					
					.spread_box{
						width: 100%;
						.item_con{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 32rpx;
							
							&.first{
								margin-top: 0rpx;
							}
							
							.left{
								color: #666666;
								font-size: 26rpx;
							}
							.right{
								font-size: 28rpx;
								color: #333;
							}
						}
						
						.item_content{
							width: 570rpx;
							margin: 0 auto;
							background-color: #fff;
							border-radius: 30rpx;
							margin-top: 30rpx;
							
							
							.content{
								width: 516rpx;
								padding: 34rpx 32rpx 30rpx 22rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								
								&.top{
									border-bottom: 1rpx solid #F2F2F2;
								}
								
								
								.left{
									font-size: 24rpx;
									color: #666;
								}
								.right{
									color: #333;
									font-size: 28rpx;
									
									&.green{
										color: #1ECE5F;
									}
									
									&.red{
										color: #EB4747;
									}
								}
							}
						}
						
						.expand_box{
							width: 100%;
							display: flex;
							margin-top: 30rpx;
							align-items: center;
							justify-content: center;
							
							.img{
								width: 40rpx;
								height: 40rpx;
							}
							.tit{
								color: #2D8CF0;
								font-size: 24rpx;
								margin-left: 12rpx;
							}
						}
					}
					
					.no_spread{
						width: 100%;
						background: #F8F8F8;
						border-radius: 30rpx;
						.item_con{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 32rpx;
							
							&.first{
								margin-top: 0rpx;
							}
							
							.left{
								color: #666666;
								font-size: 26rpx;
							}
							.right{
								font-size: 28rpx;
								color: #333;
							}
						}
					}
				}
			}
		
			.bottom_box{
				width: 100%;
				padding: 40rpx 0;
				display: flex;
				justify-content: flex-end;
				
				.edit_btn{
					width: 180rpx;
					height: 70rpx;
					background: #2D8CF0;
					border-radius: 100rpx;
					color: #fff;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>