transport_integrated_app/pages/roadTransport/quantitySent/form.vue

<template>
	<!-- 编辑综合运输 -->
	<view class="edit_synth">
		<view class="top_box">
			<view class="top_title" v-if="isShowTitle">
				<view class="top_txt">如有填报问题，请咨询公共服务中心</view>
				<view class="bot_txt">中心值班电话：<span style="color: #2D8CF0;">66007587</span></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">
							<!-- <uni-datetime-picker type="date" v-model="synthData.reportDate">
								<p class="right_txt">{{synthData.reportDate ? synthData.reportDate : '请选择日期'}}</p>
								<uni-icons type="right" size="16"></uni-icons>
							</uni-datetime-picker> -->
							<picker mode="date" :value="synthData.reportDate" @change="bindDateChange">
								<text class="picker_select"
									:style="synthData.reportDate?'color:#333;':''">{{synthData.reportDate?synthData.reportDate:'请选择'}}</text>
								<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
							</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="calcYoyMom" v-model="synthData.shifts" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view>
					<view class="per_con" v-if="pageType == 'edit'">
						<view class="content top">
							<view class="left">班次环比(%)</view>
							<view class="right" :class="synthData.shiftMom > 0 ? 'green' : synthData.shiftMom < 0 ? 'red' : ''">{{synthData.shiftMom ? synthData.shiftMom.toFixed(2) + '%' :  synthData.shiftMom == 0 ? 0 : ''}}</view>
						</view>
						<view class="content">
							<view class="left">班次同比(%)</view>
							<view class="right" :class="synthData.shiftYoy > 0 ? 'green' : synthData.shiftYoy < 0 ? 'red' : ''">{{synthData.shiftYoy ? synthData.shiftYoy.toFixed(2) + '%' : synthData.shiftYoy == 0 ? 0 : ''}}</view>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">人数</p>
						<view class="right">
							<uni-easyinput @blur="calcYoyMom" v-model="synthData.people" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view>
					<view class="per_con" v-if="pageType == 'edit'">
						<view class="content top">
							<view class="left">人数环比(%)</view>
							<view class="right" :class="synthData.peopleMom > 0 ? 'green' : synthData.peopleMom < 0 ? 'red' : ''">{{synthData.peopleMom ? synthData.peopleMom.toFixed(2) + '%' :  synthData.peopleMom == 0 ? 0 : ''}}</view>
						</view>
						<view class="content">
							<view class="left">人数同比(%)</view>
							<view class="right" :class="synthData.peopleYoy > 0 ? 'green' : synthData.peopleYoy < 0 ? 'red' : ''">{{synthData.peopleYoy ? synthData.peopleYoy.toFixed(2) + '%' : synthData.peopleYoy == 0 ? 0 : ''}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_box">
			<p class="btn_item" @click="cancelEdit">取消</p>
			<p class="btn_item confirm" @click="confirmRoad">确认</p>
		</view>
	</view>
</template>

<script>
	import { checkNotEmpty, getDateStr } from '../../../common/util'
	export default {
		data() {
			return {
				isShowTitle:false,
				roadTime:[],
				unitData:[],
				synthData:{
					shifts:'', //班次
					reportDate:'', //填报日期
					people:'' //人数
				},
				pageType:'',
				yoymom:{},
			}
		},
		onLoad(options) {
			// this.getRoadTime()
			if(options.type == 'edit'){
				this.pageType = 'edit'
				let row = JSON.parse(options.item);
				this.synthData = row;
				this.getYoYMoM();
				// this.synthData.reportDate = this.synthData.reportDate ? this.synthData.reportDate.substring(0,10) : ''
			}else if(options.type == 'add'){
				this.pageType = 'add'
				let now =  new Date();
				this.synthData.reportDate = getDateStr(now, -1);//默认前一天
				this.getYoYMoM();
			}
			
			
		},
		methods: {
			//选择统计日期
			bindDateChange(e) {
				this.synthData.reportDate = e.detail.value;
				this.getYoYMoM();
			},
			// 获取同比环比
			getYoYMoM(){
				this.$request(getApp().globalData.baseUrl + '/api/biz/bizTransportData/getYoyMom?statDate=' + this.synthData.reportDate + '&_t=' + Date.parse(new Date()),"GET").then(res =>{
					console.log('同比环比===>',res)
					this.yoymom = res.data;
					this.calcYoyMom(); //同步更新环比同比
				})
			},
			// 计算同比环比
			calcYoyMom(){
				console.log('计算同比环比')
				// 环比
				if(this.yoymom.yesterdayData){
					
					
					// this.synthData.shiftMom = this.yoymom.yesterdayData.shifts && this.synthData.shifts ? (
					// parseInt(this.synthData.shifts) - this.yoymom.yesterdayData.shifts) / this.yoymom.yesterdayData.shifts * 100 : '';
					
					this.synthData.shiftMom = !checkNotEmpty(this.yoymom.yesterdayData.shifts) || this.yoymom.yesterdayData.shifts === 0 ? 100 : this.synthData.shifts ? (parseInt(this
							.synthData.shifts) - this.yoymom.yesterdayData.shifts) / this.yoymom.yesterdayData.shifts *
						100 : '';
					
					// this.synthData.peopleMom = this.yoymom.yesterdayData.people && this.synthData.people ? (
					// this.synthData.people - this.yoymom.yesterdayData.people) / this.yoymom.yesterdayData.people * 100 : ''
					this.synthData.peopleMom = !checkNotEmpty(this.yoymom.yesterdayData.people) || this.yoymom.yesterdayData.people === 0 ? 100 : this.synthData.people ? (parseInt(this
							.synthData.people) - this.yoymom.yesterdayData.people) / this.yoymom.yesterdayData.people *
						100 : '';
				}
				// 同比
				if(this.yoymom.lastYearData){
					// this.synthData.shiftYoy = this.yoymom.lastYearData.shifts && this.synthData.shifts ? (
					// parseInt(this.synthData.shifts) - this.yoymom.lastYearData.shifts) / this.yoymom.lastYearData.shifts * 100 : '';
					this.synthData.shiftYoy = !checkNotEmpty(this.yoymom.lastYearData.shifts) || this.yoymom.lastYearData.shifts === 0 ? 100 : this.synthData.shifts ? (parseInt(this
							.synthData.shifts) - this.yoymom.lastYearData.shifts) / this.yoymom.lastYearData.shifts *
						100 : '';
					
					// this.synthData.peopleYoy = this.yoymom.lastYearData.people && this.synthData.people ? (
					// this.synthData.people - this.yoymom.lastYearData.people) / this.yoymom.lastYearData.people * 100 : ''
					
					this.synthData.peopleYoy = !checkNotEmpty(this.yoymom.lastYearData.people) || this.yoymom.lastYearData.people === 0 ? 100 : this.synthData.people ? (parseInt(this
							.synthData.people) - this.yoymom.lastYearData.people) / this.yoymom.lastYearData.people *
						100 : '';
				}
			},
			// 获取时段
			getRoadTime(){
				this.$request(getApp().globalData.baseUrl + '/api/dict/dictList?dictType=airport_time&_t=1693372307694',"GET").then(res =>{
					this.roadTime = res.data
					if(this.pageType == 'add'){
						let now = new Date();
						let dateStr = getDateStr(now,0);
						console.log(new Date().getTime())
						if(new Date(dateStr + ' 11:00').getTime() < new Date().getTime() < new Date(dateStr + ' 13:30').getTime()){
							this.roadData.reportPhase = "0012";
							this.index = this.roadTime.findIndex(item => item.dictValue == "0012")
							this.timeName = this.roadTime.find(item => item.dictValue == "0012").dictLabel
						}else{
							this.roadData.reportPhase = "03";
							this.index = this.roadTime.findIndex(item => item.dictValue == "03")
							this.timeName = this.roadTime.find(item => item.dictValue == "03").dictLabel
						}
					}
				})
			},
			// 点击确认按钮
			confirmRoad(){
				let params = this.synthData;
				console.log(params)
				if(params.reportDate == ''){
					uni.showToast({
						title:"请选择填报日期",
						icon:"none"
					})
				}else{
					uni.showModal({
						title:"提示",
						content:"您确定，提交报送吗？",
						success:(res) =>{
							if(res.confirm){
								this.$request(getApp().globalData.baseUrl + '/api/biz/bizTransportData/saveOrUpdate',params,'POST').then(res =>{
									if(res.code == 200){
										uni.showToast({
											title:'报送成功',
											icon:"none"
										});
										uni.navigateBack()
									}
								})
							}else if(res.cancel){}
						}
					})
				}
				
			},
			// 点击取消按钮
			cancelEdit(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.edit_synth{
		width: 100%;
		height: 100%;
		
		.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;
			}
			
			.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: 40rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 9rpx;
					}
					
					.remark_item{
						color: #333;
						font-size: 30rpx;
						font-weight: bold;
						
						.left{
							margin-top: 20rpx;
							margin-bottom: 30rpx;
						}
						
						.right{
							/deep/ .is-input-border{
								border: 1rpx solid #c1c1c1 !important;
								border-radius: 30rpx !important;
							}
						}
					}
					.edit_item{
						width: 100%;
						display: flex;
						justify-content: space-between;
						margin-top: 32rpx;
						align-items: center;
						
						&.input{
							margin-top: 5rpx;
						}
						
						.left{
							// margin-left: 30rpx;
							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-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;
								}
							}
						}
					}
				}
			}
		}
		.bottom_box{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			background-color: #F8F8F8;
			padding: 0rpx 0rpx 20px;
			
			.btn_item{
				width: 329rpx;
				height: 90rpx;
				background: #F6F6F6;
				border: 1rpx solid #C1C1C1;
				color: #666;
				width: 329rpx;
				height: 90rpx;
				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>