jinna
2 years ago
parent
e397be61c5
commit
e833356752
4 changed files with 1061 additions and 82 deletions
@ -1,22 +1,504 @@ |
|||||||
<template> |
<template> |
||||||
<view> |
<!-- 引航站报送 --> |
||||||
|
<view class="edit_box"> |
||||||
|
<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"> |
||||||
|
<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"></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" type="digit" 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" type="digit" 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" type="digit" 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 v-model="form.capacityShuttle" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="edit_item input"> |
||||||
|
<p class="left">推近一海里(艘次):</p> |
||||||
|
<view class="right"> |
||||||
|
<uni-easyinput type="digit" v-model="form.capacityShuttle" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="edit_item input"> |
||||||
|
<p class="left">深水航槽直靠(艘次):</p> |
||||||
|
<view class="right"> |
||||||
|
<uni-easyinput type="digit" v-model="form.capacityShuttle" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="edit_item input"> |
||||||
|
<p class="left">15万吨级油轮全潮时靠泊(艘次):</p> |
||||||
|
<view class="right"> |
||||||
|
<uni-easyinput type="digit" v-model="form.capacityShuttle" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="edit_item input"> |
||||||
|
<p class="left">20万吨级矿船满载主航道夜航(艘次):</p> |
||||||
|
<view class="right"> |
||||||
|
<uni-easyinput type="digit" v-model="form.capacityShuttle" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="edit_item input"> |
||||||
|
<p class="left">低能见度情况下完成船舶雾航(艘次):</p> |
||||||
|
<view class="right"> |
||||||
|
<uni-easyinput type="digit" v-model="form.capacityShuttle" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></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 type="textarea" autoHeight v-model="roadData.remarks" placeholder="请备注信息"></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> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
import { calcMom, checkNotEmpty, getDateStr } from '../../../common/util' |
||||||
export default { |
export default { |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
|
isShowTitle:false, |
||||||
|
form:{ |
||||||
|
reportDate:'', //填报日期 |
||||||
|
statPeriod:'', //统计时段 |
||||||
|
dailyPilotCount:'', //引航站每日引航艘次数 |
||||||
|
dailyPilotMom:'', //引航站每日环比 |
||||||
|
dailyPilotYoy:'', //引航站每日同比 |
||||||
|
lyPilotCount:'', //去年同期引航站每日引航艘次数 |
||||||
|
yestPilotCount:'', //昨日引航站每日引航艘次数 |
||||||
|
|
||||||
|
djkPortPilot:'', //董家口港区引航量 |
||||||
|
djkPortPilotMom:'', //董家口港区引航量环比 |
||||||
|
djkPortPilotYoy:'', //董家口港区引航量同比 |
||||||
|
lyDjkPilot:'', //去年同期董家口港区引航量 |
||||||
|
yestDjkPilot:'', //昨日董家口港区引航量 |
||||||
|
|
||||||
|
qdPortPilot:'', //青岛港区引航量 |
||||||
|
qdPortPilotMom:'', //青岛港区引航量环比 |
||||||
|
qdPortPilotYoy:'', //青岛港区引航量同比 |
||||||
|
lyQdPilot:'', //去年同期青岛港区引航量 |
||||||
|
yestQdPilot:'', //昨日青岛港区引航量 |
||||||
|
}, |
||||||
|
roadTime:[], |
||||||
|
timeName:'', |
||||||
|
index:'', |
||||||
|
pageType:'', |
||||||
|
} |
||||||
|
}, |
||||||
|
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' |
||||||
|
this.form = JSON.parse(options.item); |
||||||
|
this.getRoadTime() |
||||||
} |
} |
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
|
formatDigit(data) { |
||||||
|
return (data+'').indexOf('.') > -1 && (data+'').substring((data+'').indexOf('.')).length > 2 ? data.toFixed(2) : data; |
||||||
|
}, |
||||||
|
// 获取时段 |
||||||
|
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.getRatio() |
||||||
|
}else if(this.pageType == 'add'){ |
||||||
|
let now = new Date(); |
||||||
|
let dateStr = getDateStr(now,0); |
||||||
|
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 = calcMom(this.form.dailyPilotCount,lastYearData.dailyPilotCount); |
||||||
|
this.form.djkPortPilotYoy = calcMom(this.form.djkPortPilot,lastYearData.djkPortPilot); |
||||||
|
this.form.qdPortPilotYoy = calcMom(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 |
||||||
|
}) |
||||||
|
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> |
</script> |
||||||
|
|
||||||
<style> |
<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; |
||||||
|
} |
||||||
|
|
||||||
|
.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; |
||||||
|
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; |
||||||
|
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: 15rpx; |
||||||
|
|
||||||
|
&.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> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue