633 lines
16 KiB
Vue
633 lines
16 KiB
Vue
<template>
|
|
<view class="app">
|
|
<head-info :navIndex="0"></head-info>
|
|
<view class="container">
|
|
<view class="content">
|
|
<view class="form">
|
|
<view class="end">
|
|
<!-- <superwei-combox class="input" :candidates="tradeList" :isJSON="true" keyName="name"
|
|
placeholder="请选择贸易类型" v-model="tradeName" @select="tradeSelect"></superwei-combox> -->
|
|
<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyShip"
|
|
placeholder="请选择船名/航次" v-model="vvyShip" @select="shipSelect"
|
|
@input="shipInput"></superwei-combox>
|
|
<button class="btn" @click="onSearch">搜索</button>
|
|
</view>
|
|
<view class="rightInput" @click="screen">
|
|
<p>贸易类型<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
|
<p>计划状态<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
|
<p>计划靠泊时间<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
|
</view>
|
|
</view>
|
|
<view class="itemList">
|
|
<template v-if="itemList.length > 0">
|
|
<view v-for="(item, index) in itemList" :key="index" class="item">
|
|
<view @click="toDetails(item)">
|
|
<view class="title">
|
|
<view class="titleft">
|
|
<image src="../../static/images/ship.png" mode="widthFix"></image>
|
|
<view class="name">
|
|
{{item.spmIdDesc}}
|
|
</view>
|
|
</view>
|
|
<view class="status">
|
|
<p v-if="item.vvyStatus==0" class="dfs">{{item.vvyStatusName}}</p>
|
|
<p v-if="item.vvyStatus==1" class="zyz">{{item.vvyStatusName}}</p>
|
|
<p v-if="item.vvyStatus==2" class="ywc">{{item.vvyStatusName}}</p>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="nitem">
|
|
航次: <text>{{item.vvyName}}</text>
|
|
</view>
|
|
<view class="nitem">
|
|
贸易类型: <text>{{item.tradeType}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="nitem">
|
|
进出口: <text>{{item.importExportFlag}}</text>
|
|
</view>
|
|
<view class="nitem">
|
|
泊位: <text>{{item.actualBerthageDesc}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<template v-if="isMore">
|
|
<uni-load-more iconType="circle" status="loading" style="width: 100%;" />
|
|
</template>
|
|
</template>
|
|
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
|
</view>
|
|
<!-- <view class="pageBox" v-if="itemList.length > 0">
|
|
<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
|
|
@change="changePage" />
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<uni-drawer ref="showRight" mode="right" :mask-click="false">
|
|
<view class="scroll-view">
|
|
<scroll-view class="scroll-view-box" scroll-y="true">
|
|
<view class="drawerTop" @click="back">
|
|
<image src="../../static/images/leftJt.png" mode=""></image>
|
|
<text>返回</text>
|
|
</view>
|
|
<view class="drawerTitle">
|
|
贸易类型
|
|
</view>
|
|
<superwei-combox class="input" :candidates="tradeList" :isJSON="true" keyName="name"
|
|
placeholder="贸易类型" v-model="tradeName" @select="tradeSelect"></superwei-combox>
|
|
<view class="drawerTitle">
|
|
计划状态
|
|
</view>
|
|
<superwei-combox :candidates="dcList" :isJSON="true" keyName="name" placeholder="计划状态"
|
|
v-model="vvyStatus"></superwei-combox>
|
|
<view class="drawerTitle">
|
|
计划靠泊时间
|
|
</view>
|
|
<view class="timeBox">
|
|
<view class="time" :class="[oneFlag ? 'check' : '']" @click="goTime(0)">今天</view>
|
|
<view class="time" :class="[twoFlag ? 'check' : '']" style="margin: 0 10px;" @click="goTime(1)">近三天</view>
|
|
<view class="time" :class="[threeFlag ? 'check' : '']" @click="goTime(2)">近五天</view>
|
|
</view>
|
|
<uni-datetime-picker v-model="operationDate" type="daterange" :clear-icon="false" @change="changeLog"
|
|
:border="false" />
|
|
<view class="bottomBtn">
|
|
<view class="btn czBtn" @click="reset">
|
|
重置
|
|
</view>
|
|
<view class="btn qrBtn" @click="confirm">
|
|
确认
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</uni-drawer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeadInfo from '@/components/head-info/head-info';
|
|
import api from "../../common/api.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
loginObj: {},
|
|
itemList: [],
|
|
tradeName: "外贸",
|
|
tradeType: "W",
|
|
tradeItem: {},
|
|
tradeList: [{
|
|
value: "1",
|
|
name: "外贸"
|
|
},
|
|
{
|
|
value: "2",
|
|
name: "内贸"
|
|
}
|
|
],
|
|
vvyShip: "",
|
|
vvyId: "",
|
|
shipId: "",
|
|
shipName: '',
|
|
shipValue: "",
|
|
shipList: [],
|
|
|
|
// 分页
|
|
total: 0,
|
|
pageSize: 12,
|
|
current: 1,
|
|
|
|
// 港区信息
|
|
portObj: {},
|
|
|
|
isMore: false,
|
|
dcList:[
|
|
{
|
|
value: "0",
|
|
name: "待作业"
|
|
},
|
|
{
|
|
value: "1",
|
|
name: "作业中"
|
|
},
|
|
{
|
|
value: "2",
|
|
name: "已完成"
|
|
},
|
|
],
|
|
vvyStatus:'待作业',
|
|
operationDate:'',
|
|
startDate:'',
|
|
endDate:'',
|
|
oneFlag:false,
|
|
twoFlag:false,
|
|
threeFlag:false
|
|
}
|
|
},
|
|
components: {
|
|
HeadInfo,
|
|
},
|
|
onReachBottom() {
|
|
this.current++
|
|
this.initData()
|
|
this.isMore = true
|
|
},
|
|
onLoad() {
|
|
this.portObj = uni.getStorageSync('portObj')
|
|
this.loginObj = uni.getStorageSync('loginObj')
|
|
this.getShip()
|
|
},
|
|
onBackPress(options) {
|
|
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
|
if (options.from == 'backbutton') {
|
|
return true;
|
|
} else if (options.from == 'navigateBack') {
|
|
return false;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
// 切换贸易类型
|
|
tradeSelect(e) {
|
|
this.tradeItem = e
|
|
this.tradeName = e.name
|
|
this.shipId = ""
|
|
this.shipName = ""
|
|
this.vvyId = ""
|
|
this.vvyShip = ""
|
|
this.getShip()
|
|
},
|
|
// 选择船
|
|
shipSelect(e) {
|
|
this.shipId = e.spmId
|
|
this.shipName = e.vslCnname
|
|
this.vvyId = e.vvyId
|
|
this.vvyShip = e.vvyShip
|
|
this.getShip()
|
|
},
|
|
// 选择船输入框
|
|
shipInput(e) {
|
|
this.shipValue = e
|
|
if (e == "") {
|
|
this.vvyId = ""
|
|
this.vvyShip = ""
|
|
this.shipId = ""
|
|
this.shipName = ""
|
|
}
|
|
this.getShip()
|
|
},
|
|
// 获取船舶
|
|
getShip() {
|
|
if (this.tradeName == '外贸') {
|
|
this.tradeType = "W"
|
|
} else {
|
|
this.tradeType = "N"
|
|
}
|
|
let ieType = "E"
|
|
let key = ""
|
|
let spmId = ""
|
|
uni.request({
|
|
url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${this.shipValue}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`,
|
|
header: {
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|
},
|
|
method: 'GET', //请求方式，必须为大写
|
|
success: (res) => {
|
|
if (res.data.status == "200") {
|
|
this.shipList = res.data.data
|
|
this.shipList.forEach(v => {
|
|
let vvyShip = `${v.vslCnname}/${v.vvyName}`
|
|
this.$set(v, "vvyShip", vvyShip)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 点击搜索
|
|
onSearch() {
|
|
this.current = 1
|
|
this.itemList = []
|
|
this.initData()
|
|
},
|
|
initData() {
|
|
let url = ""
|
|
var vvyStatusCode = ''
|
|
this.dcList.forEach(item => {
|
|
if(item.name == this.vvyStatus) {
|
|
vvyStatusCode = item.value
|
|
}
|
|
})
|
|
if (this.tradeName == '内贸') {
|
|
url =
|
|
`${this.$local}/api/domestic/load/command/queryLoadVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&size=${this.pageSize}¤t=${this.current}&vvyStatus=${vvyStatusCode}&startDate=${this.startDate}&endDate=${this.endDate}`
|
|
} else if (this.tradeName == '外贸') {
|
|
if(vvyStatusCode == '') {
|
|
url =
|
|
`${this.$local}/api/shipInstructions/queryStowageVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&tradeType=${this.tradeType}&size=${this.pageSize}¤t=${this.current}&startDate=${this.startDate}&endDate=${this.endDate}`
|
|
} else {
|
|
url =
|
|
`${this.$local}/api/shipInstructions/queryStowageVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&tradeType=${this.tradeType}&size=${this.pageSize}¤t=${this.current}&vvyStatus=${vvyStatusCode}&startDate=${this.startDate}&endDate=${this.endDate}`
|
|
}
|
|
}
|
|
uni.request({
|
|
url: url,
|
|
header: {
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|
},
|
|
method: 'GET', //请求方式，必须为大写
|
|
success: (res) => {
|
|
this.isMore = false
|
|
this.total = res.data.data.total
|
|
this.itemList.push(...res.data.data.records)
|
|
}
|
|
})
|
|
},
|
|
// 点击分页
|
|
changePage(e) {
|
|
this.current = e.current;
|
|
this.initData()
|
|
},
|
|
toDetails(item) {
|
|
let obj = {
|
|
shipInfo: item,
|
|
}
|
|
const params = encodeURIComponent(JSON.stringify(obj));
|
|
if (this.tradeName == '外贸') {
|
|
uni.navigateTo({
|
|
url: '/pages/index/instruct?params=' + params
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/index/domesticTrade?params=' + params
|
|
})
|
|
}
|
|
},
|
|
// 点击筛选
|
|
screen() {
|
|
this.$refs.showRight.open();
|
|
},
|
|
// 重置
|
|
reset() {
|
|
this.vvyStatus = ''
|
|
this.operationDate = ''
|
|
this.startDate = ''
|
|
this.endDate = ''
|
|
this.oneFlag = false
|
|
this.twoFlag = false
|
|
this.threeFlag = false
|
|
},
|
|
// 筛选确认
|
|
confirm() {
|
|
this.onSearch()
|
|
this.$refs.showRight.close();
|
|
},
|
|
//返回
|
|
back() {
|
|
this.$refs.showRight.close();
|
|
},
|
|
//切换时间
|
|
changeLog(e) {
|
|
if(e.length) {
|
|
this.oneFlag = false
|
|
this.twoFlag = false
|
|
this.threeFlag = false
|
|
this.startDate = `${e[0]} 00:00:00`
|
|
this.endDate = `${e[1]} 00:00:00`
|
|
}
|
|
},
|
|
// 选择时间
|
|
goTime(time) {
|
|
switch (time) {
|
|
case 0:
|
|
this.oneFlag = true
|
|
this.twoFlag = false
|
|
this.threeFlag = false
|
|
this.startDate = this.getNextDate(new Date(),0)
|
|
this.endDate = this.getNextDate(new Date(),0)
|
|
break;
|
|
case 1:
|
|
this.oneFlag = false
|
|
this.twoFlag = true
|
|
this.threeFlag = false
|
|
this.startDate = this.getNextDate(new Date(),-3)
|
|
this.endDate = this.getNextDate(new Date(),0)
|
|
break;
|
|
case 2:
|
|
this.oneFlag = false
|
|
this.twoFlag = false
|
|
this.threeFlag = true
|
|
this.startDate = this.getNextDate(new Date(),-5)
|
|
this.endDate = this.getNextDate(new Date(),0)
|
|
break;
|
|
}
|
|
},
|
|
getNextDate(date, day) {
|
|
var dd = new Date(date);
|
|
dd.setDate(dd.getDate() + day);
|
|
var y = dd.getFullYear();
|
|
var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
|
|
var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
|
|
return y + "-" + m + "-" + d + ' 00:00:00';
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.content {
|
|
padding: 20px;
|
|
min-height: calc(100vh - 68px - 40px);
|
|
margin-top: 66px;
|
|
margin-bottom: 20px;
|
|
|
|
.form {
|
|
width: 100%;
|
|
height: 50px;
|
|
background: #f5f6fa;
|
|
display: flex;
|
|
position: fixed;
|
|
top: 66px;
|
|
right: 0;
|
|
z-index: 995;
|
|
padding-left: 20px;
|
|
|
|
.end {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.input {
|
|
width: 200px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
padding-left: 10px;
|
|
margin: 10px 15px 0 0;
|
|
}
|
|
|
|
.btn {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
margin-left: 0;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
background-color: #0067CF;
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
.rightInput {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p {
|
|
margin-left: 10px;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itemList {
|
|
width: 100%;
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
margin-top: 40px;
|
|
padding-bottom: 50px;
|
|
|
|
/deep/.o-empty {
|
|
width: 100%;
|
|
}
|
|
|
|
.item {
|
|
width: calc(33.3% - 16px);
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
position: relative;
|
|
margin-bottom: 16px;
|
|
margin-right: 16px;
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 24px;
|
|
|
|
.titleft {
|
|
display: flex;
|
|
}
|
|
|
|
image {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.name {
|
|
margin-top: 5px;
|
|
font-size: 16px;
|
|
color: #23262E;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 16px;
|
|
margin-bottom: 12px;
|
|
|
|
.nitem {
|
|
width: 49%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: #999;
|
|
|
|
text {
|
|
color: #23262e;
|
|
}
|
|
}
|
|
}
|
|
|
|
.status {
|
|
font-size: 16px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 23px;
|
|
|
|
p {
|
|
padding: 5px;
|
|
border-radius: 13px 0 0 13px;
|
|
}
|
|
|
|
.dfs {
|
|
color: #0067CF;
|
|
background: #F1F8FF;
|
|
}
|
|
|
|
.zyz {
|
|
color: #04B578;
|
|
background: #E8FFF7;
|
|
}
|
|
|
|
.ywc {
|
|
color: #666666;
|
|
background: #F7F7F7;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.pageBox {
|
|
width: 100%;
|
|
height: 50px;
|
|
background-color: #fff;
|
|
margin-top: 20px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
// 右侧抽屉筛选
|
|
/deep/.uni-drawer__content {
|
|
width: 320px;
|
|
}
|
|
.scroll-view {
|
|
/* #ifndef APP-NVUE */
|
|
width: 100%;
|
|
height: 100%;
|
|
/* #endif */
|
|
flex: 1
|
|
}
|
|
// 处理抽屉内容滚动
|
|
.scroll-view-box {
|
|
flex: 1;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 0 16px 80px;
|
|
|
|
.drawerTop {
|
|
display: flex;
|
|
margin-top: 24px;
|
|
margin-bottom: 30px;
|
|
|
|
image {
|
|
width: 10px;
|
|
height: 14px;
|
|
margin-right: 10px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
text {
|
|
font-size: 20px;
|
|
color: #23262E;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.drawerTitle {
|
|
font-size: 14px;
|
|
color: #23262E;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.bottomBtn {
|
|
width: 100%;
|
|
height: 60px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
|
position: fixed;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
|
|
.btn {
|
|
width: 116px;
|
|
height: 36px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
line-height: 36px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.czBtn {
|
|
color: #0067CF;
|
|
border: 1px solid #0067CF;
|
|
}
|
|
|
|
.qrBtn {
|
|
color: #fff;
|
|
background: #0067CF;
|
|
}
|
|
}
|
|
.timeBox {
|
|
display: flex;
|
|
.time {
|
|
padding: 9px 24px;
|
|
border: 1px solid #EEEEEE;
|
|
border-radius: 4px;
|
|
}
|
|
.check {
|
|
background: rgba(114, 132, 245, 0.1);
|
|
color: #0267CF;
|
|
}
|
|
}
|
|
}
|
|
</style> |