transport_integrated_app/pages/portShipping/pilotStation/form.vue

<template>
	<!-- 引航站报送 -->
	<view class="edit_box">
		<view class="top_box">
			<view class="top_title">
				<view class="top_txt">如有填报问题，请咨询公共服务中心</view>
				<view class="bot_txt">中心值班电话：<text @click="call(mobile)" class="tel">{{mobile}}</text></view>
			</view>
			<view class="content_box">
				<view class="basic_box">
					<view class="con_tit">基本信息</view>
					<view class="edit_item">
						<p class="left">统计日期</p>
						<view class="right">
							<picker mode="date" :value="form.reportDate" @change="bindDateChange">
								<text class="picker_select"
									:style="form.reportDate?'color:#333;':''">{{form.reportDate?form.reportDate:'请选择'}}</text>
								<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
							</picker>
						</view>
					</view>
					<view class="edit_item">
						<p class="left">统计时段</p>
						<view class="right">
							<picker @change="bindPickerChange" :value="index" :range="roadTime" range-key="dictLabel">
								<view class="right_txt_box">
									<p class="right_txt">{{timeName ? timeName : '请选择统计时段'}}</p>
									<uni-icons type="right" size="16"  color="#D4D4D4"></uni-icons>
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="basic_box .data_box">
					<view class="con_tit">引航站数据</view>
					<view class="edit_item input">
						<p class="left">引航站每日引航艘次数:</p>
						<view class="right">
							<uni-easyinput @blur="getYoyMom"   @clear="getYoyMom" type="number" maxlength="20" v-model="form.dailyPilotCount" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view>
					<view class="per_con" :class="form.dailyPilotCount && form.dailyPilotCount == form.yestPilotCount ? 'danger' : ''">
						<view class="content top">
							<view class="left">每日引航艘次数环比</view>
							<view class="right">{{form.dailyPilotMom === 0 ? form.dailyPilotMom : form.dailyPilotMom ? formatDigit(form.dailyPilotMom) : '--'}}%</view>
						</view>
						<view class="content">
							<view class="left">每日引航艘次数同比</view>
							<view class="right">{{form.dailyPilotYoy === 0 ? form.dailyPilotYoy : form.dailyPilotYoy ? formatDigit(form.dailyPilotYoy) : '--'}}%</view>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">青岛港区引航量:</p>
						<view class="right">
							<uni-easyinput @blur="getYoyMom" @clear="getYoyMom" type="number" maxlength="20" v-model="form.qdPortPilot" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view>
					<view class="per_con" :class="form.qdPortPilot && form.qdPortPilot == form.yestQdPilot ? 'danger' : ''">
						<view class="content top">
							<view class="left">港区引航量环比</view>
							<view class="right">{{form.qdPortPilotMom === 0 ? form.qdPortPilotMom : form.qdPortPilotMom ? formatDigit(form.qdPortPilotMom) : '--'}}%</view>
						</view>
						<view class="content">
							<view class="left">港区引航量同比</view>
							<view class="right">{{form.qdPortPilotYoy === 0 ? form.qdPortPilotYoy : form.qdPortPilotYoy ? formatDigit(form.qdPortPilotYoy) : '--'}}%</view>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">董家口港区引航量:</p>
						<view class="right">
							<uni-easyinput @blur="getYoyMom" @clear="getYoyMom" type="number" maxlength="20" v-model="form.djkPortPilot" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view>
					<view class="per_con" :class="form.djkPortPilot && form.djkPortPilot == form.yestDjkPilot ? 'danger' : ''">
						<view class="content top">
							<view class="left">董家口港区引航量环比</view>
							<view class="right">{{form.djkPortPilotMom === 0 ? form.djkPortPilotMom : form.djkPortPilotMom ? formatDigit(form.djkPortPilotMom) : '--'}}%</view>
						</view>
						<view class="content">
							<view class="left">董家口港区引航量同比</view>
							<view class="right">{{form.djkPortPilotYoy === 0 ? form.djkPortPilotYoy : form.djkPortPilotYoy ? formatDigit(form.djkPortPilotYoy) : '--'}}%</view>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">套泊热接组次:</p>
						<view class="right">
							<uni-easyinput type="number" @blur="overCount" @clear="overCount" v-model="form.berthingHeatConnectionCount" placeholder="请输入" placeholderStyle="color:#d4d4d4;" maxlength="20"></uni-easyinput>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">套泊热接艘次:</p>
						<view class="right">
							<uni-easyinput type="number" v-model="form.berthingHeatConnectionShipsCount" placeholder="请输入" placeholderStyle="color:#d4d4d4;" maxlength="20"></uni-easyinput>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">推近一海里(艘次):</p>
						<view class="right">
							<uni-easyinput type="number" v-model="form.seaMilesPerPropulsion" placeholder="请输入" placeholderStyle="color:#d4d4d4;" maxlength="20"></uni-easyinput>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">深水航槽直靠(艘次):</p>
						<view class="right">
							<uni-easyinput type="number" v-model="form.deepWaterChannelDirectBerthingCount" placeholder="请输入" placeholderStyle="color:#d4d4d4;" maxlength="20"></uni-easyinput>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">15万吨级油轮全潮时靠泊(艘次):</p>
						<view class="right">
							<uni-easyinput type="number" v-model="form.berthingCountDuringHighTideFor150kTonTanker" placeholder="请输入" placeholderStyle="color:#d4d4d4;" maxlength="20"></uni-easyinput>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">20万吨级矿船满载主航道夜航(艘次):</p>
						<view class="right">
							<uni-easyinput type="number" v-model="form.nightNavigationCountFor200kTonLoadedBulkCarrier" placeholder="请输入" placeholderStyle="color:#d4d4d4;" maxlength="20"></uni-easyinput>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">低能见度情况下完成船舶雾航(艘次):</p>
						<view class="right">
							<uni-easyinput type="number" v-model="form.shipFogNavigationCountUnderLowVisibility" placeholder="请输入" placeholderStyle="color:#d4d4d4;" maxlength="20"></uni-easyinput>
						</view>
					</view>
					<view class="remark_item">
						<p class="left">备注</p>
						<view class="right">
							<!-- <uni-easyinput v-model="roadData.remarks" placeholder="请输入备注" placeholderStyle="color:#d4d4d4;"></uni-easyinput> -->
							<uni-easyinput v-model="form.remarks"
								placeholderStyle="color: #D4D4D4;font-size:28rpx;" placeholder="请输入备注信息" type="textarea" maxlength="200"
								autoHeight></uni-easyinput>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_box">
			<!-- <p class="btn_item" @click="cancelEdit">取消</p> -->
			<p class="btn_item confirm" v-if="pageType == 'add'" @click="handleConfirm">保存</p>
			<p class="btn_item confirm" v-if="pageType == 'edit'" @click="handleConfirm">修改并保存</p>
		</view>
	</view>
</template>

<script>
import { calcMom, calcYoy, checkNotEmpty, getDateStr } from '../../../common/util'
	export default {
		data() {
			return {
				isShowTitle:false,
				form:{
					reportDate:'', //填报日期
					statPeriod:'', //统计时段
					dailyPilotCount:'', //引航站每日引航艘次数
					dailyPilotMom:'', //引航站每日环比
					dailyPilotYoy:'', //引航站每日同比
					lyPilotCount:'', //去年同期引航站每日引航艘次数
					yestPilotCount:'', //昨日引航站每日引航艘次数
					
					djkPortPilot:'', //董家口港区引航量
					djkPortPilotMom:'', //董家口港区引航量环比
					djkPortPilotYoy:'', //董家口港区引航量同比
					lyDjkPilot:'', //去年同期董家口港区引航量
					yestDjkPilot:'', //昨日董家口港区引航量
					
					qdPortPilot:'', //青岛港区引航量
					qdPortPilotMom:'', //青岛港区引航量环比
					qdPortPilotYoy:'', //青岛港区引航量同比
					lyQdPilot:'', //去年同期青岛港区引航量
					yestQdPilot:'', //昨日青岛港区引航量
					
					berthingHeatConnectionCount:'',
					berthingHeatConnectionShipsCount:'',
					seaMilesPerPropulsion:'',
					deepWaterChannelDirectBerthingCount:'',
					berthingCountDuringHighTideFor150kTonTanker:'',
					nightNavigationCountFor200kTonLoadedBulkCarrier:'',
					shipFogNavigationCountUnderLowVisibility:'',
					remarks:''
				},
				roadTime:[],
				timeName:'',
				index:'',
				pageType:'',
				mobile: getApp().globalData.mobile
			}
		},
		onLoad(options) {
			if(options.type == 'add'){
				this.pageType = 'add';
				let now =  new Date();
				this.form.reportDate = getDateStr(now, -1);//默认前一天
				this.getRoadTime()
			}else if(options.type == 'edit'){
				this.pageType = 'edit'
				let item = JSON.parse(options.item);
				
				this.getDetail(item.id)
				
			}
		},
		methods: {
			formatDigit(data) {
				return (data+'').indexOf('.') > -1 && (data+'').substring((data+'').indexOf('.')).length > 2 ? data.toFixed(2) : data;
			},
			call(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
			// 根据套泊热接组次计算艘次
			overCount(){
				console.log(this.form.berthingHeatConnectionCount)
				this.form.berthingHeatConnectionShipsCount = this.form.berthingHeatConnectionCount ? this.form.berthingHeatConnectionCount * 2 : '';
				console.log(this.form)
			},
			getDetail(id){
				this.$request(getApp().globalData.baseUrl + '/api/biz/bizPilotData/getById/' + id,{},"GET").then(res =>{
					console.log(res)
					this.form = res.data;
					this.getRoadTime()
				})
			},
			// 获取时段
			getRoadTime(){
				this.$request(getApp().globalData.baseUrl + '/api/dict/dictList?dictType=airport_time&_t=1693372307694',"GET").then(res =>{
					this.roadTime = res.data;
					if(this.pageType == 'edit'){
						this.roadTime.map((item,index) =>{
							if(item.dictValue == this.form.statPeriod){
								this.index = index;
								this.timeName = item.dictLabel
							}
						})
						this.getYoyMom()
					}else if(this.pageType == 'add'){
						let now = new Date();
						// let dateStr = getDateStr(now,0);
						let dateStr = getDateStr(now, 0).replaceAll('-','/');
						if(new Date(dateStr + ' 11:00').getTime() < new Date().getTime() && new Date().getTime() < new Date(dateStr + ' 13:30').getTime()) {
							this.form.statPeriod = "0012";
							this.index = this.roadTime.findIndex(item => item.dictValue == "0012")
							this.timeName = this.roadTime.find(item => item.dictValue == "0012").dictLabel
						}else{
							this.form.statPeriod = "03";
							this.index = this.roadTime.findIndex(item => item.dictValue == "03")
							this.timeName = this.roadTime.find(item => item.dictValue == "03").dictLabel
						}
						this.getYoyMom()
					}
					
				})
			},
			// 计算同比环比
			getYoyMom(){
				let params = {
					statDate:this.form.reportDate,
					statPeriod:this.form.statPeriod
				}
				this.$request(getApp().globalData.baseUrl + '/api/biz/bizPilotData/getYoyMom',params,"GET").then(res =>{
					console.log('同环比===>',res)
					let yesterdayData = res.data.yesterdayData;
					let lastYearData = res.data.lastYearData;
					this.form.lyDjkPilot = lastYearData.djkPortPilot
					this.form.yestDjkPilot = yesterdayData.djkPortPilot
					
					this.form.lyPilotCount = lastYearData.dailyPilotCount
					this.form.yestPilotCount = yesterdayData.dailyPilotCount
					
					this.form.lyQdPilot = lastYearData.qdPortPilot
					this.form.yestQdPilot = yesterdayData.qdPortPilot
					
					// 同比计算
					this.form.dailyPilotMom = calcMom(this.form.dailyPilotCount,yesterdayData.dailyPilotCount);
					this.form.djkPortPilotMom = calcMom(this.form.djkPortPilot,yesterdayData.djkPortPilot);
					this.form.qdPortPilotMom = calcMom(this.form.qdPortPilot,yesterdayData.qdPortPilot);
					
					// 环比计算
					this.form.dailyPilotYoy = calcYoy(this.form.dailyPilotCount,lastYearData.dailyPilotCount);
					this.form.djkPortPilotYoy = calcYoy(this.form.djkPortPilot,lastYearData.djkPortPilot);
					this.form.qdPortPilotYoy = calcYoy(this.form.qdPortPilot,lastYearData.qdPortPilot);
					
					console.log('form ===>',this.form)
				})
			},
			// 切换统计日期
			bindDateChange(e){
				this.form.reportDate = e.detail.value;
				this.getYoyMom()
			},
			bindPickerChange(e){
				let index = e.target.value   //取其下标
				var selected = this.roadTime[index]           //获取选中的数组
				this.form.statPeriod = selected.dictValue;
				this.timeName = selected.dictLabel;
				this.getYoyMom()
			},
			//保存
			handleConfirm(){
				if(!this.form.reportDate){
					uni.showToast({
						title: '统计日期不能为空',
						icon: 'none'
					})
					return;
				}
				if(!this.form.statPeriod){
					uni.showToast({
						title: '统计时段不能为空',
						icon: 'none'
					})
					return;
				}
				uni.showModal({
					title:'提示',
					content: this.form.id == undefined ? '您确认提交该条报送数据?' : '您确认将该条数据进行修改?',
					success: (res) => {
						if(res.confirm){
							uni.showLoading({
								title: '提交中...',
								mask: true
							})
							console.log(this.form)
							this.$request(getApp().globalData.baseUrl + '/api/biz/bizPilotData/saveOrUpdate', this.form,"POST").then(res =>{
								uni.hideLoading();
								if (res.code == 200) {
									uni.showToast({
										title: '报送提交成功',
										icon: 'none',
										success: () => {
											if (this.form.id == undefined) {
												setTimeout(() => {
													uni.redirectTo({
														url:"/pages/portShipping/pilotStation/list"
													})
												}, 300)
											} else {
												uni.navigateBack();
											}
										}
									})
								}
							}).catch(() =>{
								uni.hideLoading()
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.edit_box{
		padding: 30rpx 30rpx 195rpx;
		
		.top_box{
			// margin-top: 30rpx;
			// height:88%;
			// overflow-y: auto;
			
			.top_title{
				width: 690rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #666;
				font-size: 26rpx;
				line-height: 40rpx;
				margin-bottom: 20rpx;
				
				.bot_txt{
					.tel {
						color: #2D8CF0;
						font-weight: bold;
					}
				}
			}
			
			.content_box{
				display: flex;
				flex-direction: column;
				.basic_box{
					width: 630rpx;
					padding: 30rpx 30rpx;
					margin: 0 auto;
					background-color: #fff;
					border-radius: 30rpx;
					
					&.data_box{
						margin-top: 30rpx;
					}
					
					.con_tit{
						width: 100%;
						margin-top: 10rpx;
						font-size: 30rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 9rpx;
					}
					
					.remark_item{
						// color: #333;
						margin-top: 30rpx;
						margin-bottom: 30rpx;
						
						
						.left{
							color: #333333;
							line-height: 42rpx;
							font-size: 30rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							margin-bottom: 30rpx;
						}
						
						.right{
							font-size: 28rpx;
							/deep/ .is-input-border{
								border-radius: 20rpx !important;
								border: 1px solid #c1c1c1 !important;
							}
						}
					}
					.edit_item{
						width: 100%;
						display: flex;
						justify-content: space-between;
						margin-top: 30rpx;
						align-items: center;
						
						// &.input{
						// 	margin-top: 5rpx;
						// }
						
						.left{
							// margin-left: 30rpx;
							// min-width: 400rpx;
							color: #666;
							font-size: 26rpx;
						}
						.right{
							// margin-right: 30rpx;
							display: flex;
							align-items: center;
							
							
							
							.right_txt{
								color: #333;
								font-size: 28rpx;
							}
							
							.right_txt_box{
								display: flex;
								align-items: center;
								
							}
							
							/deep/ .uni-date-editor{
								display: flex;
								align-items: center;
							}
							/deep/ .uni-easyinput__content-input{
								font-size: 28rpx !important;
								text-align: right;
								color: #333;
							}
							
							/deep/ .is-input-border {
								border: none;
							}
							
							/deep/ .content-clear-icon{
								padding: 0 !important;
							}
						}
					}
					
					.per_con{
						width: 630rpx;
						margin: 0 auto;
						background-color: #F6F6F6;
						border: 1px solid #F6F6F6;
						border-radius: 30rpx;
						margin-top: 30rpx;
						
						&.danger {
							background-color: #FEF6F3;
							border-color: #F0622D;
						}
						
						
						.content{
							width: 576rpx;
							padding: 34rpx 0 30rpx 0;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin: 0 auto;
							
							&.top{
								border-bottom: 1rpx solid #dfdfdf;
							}
							
							
							.left{
								font-size: 24rpx;
								color: #666;
							}
							.right{
								color: #333;
								font-size: 28rpx;
							}
						}
					}
				}
			}
		}
		.bottom_box{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			padding: 40rpx 30rpx;
			background-color: #f5f5f5;
			z-index: 99;
			
			
			.btn_item{
				width: 690rpx;
				height: 90rpx;
				background: #F6F6F6;
				border: 1rpx solid #C1C1C1;
				color: #666;
				line-height: 88rpx;
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 400;
				border-radius: 100rpx;
				
				&.confirm {
					background: #2D8CF0;
					border: 1rpx solid #2D8CF0;
					color: #FFFFFF;
				}
			}
		}
	}
</style>