|
|
|
|
@ -1,3 +1,227 @@
|
|
|
|
|
<template>
|
|
|
|
|
rollingNomination
|
|
|
|
|
<div class="main">
|
|
|
|
|
<a-spin :spinning="spinning">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="LeftHead">
|
|
|
|
|
<p>
|
|
|
|
|
<i class="icon-PC_gangkou iconfont"
|
|
|
|
|
style="color: orange;margin-right: 10px;font-size: 16px"></i>
|
|
|
|
|
Rolling Nomination({{ taskData.carrier }})
|
|
|
|
|
</p>
|
|
|
|
|
<p>时间：{{ taskData.createTime }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main-box" v-for="(item, index) in taskData.fromToList" :key="index">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="box-title">
|
|
|
|
|
原船
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="row">
|
|
|
|
|
船名/航次：{{ item.fromShip.vessel }} /
|
|
|
|
|
{{ item.fromShip.voyNo }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
{{ item.fromShip.port }}ETD：{{ item.fromShip.etd }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
{{ item.fromShip.terminal }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="middle">换船</div>
|
|
|
|
|
<div v-for="(toData, index1) in item.toShipList" :key="index1"
|
|
|
|
|
style="display: flex;align-items: center;">
|
|
|
|
|
<div class="middleOr" v-if="index1 !== 0">或</div>
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="box-title">
|
|
|
|
|
新船{{ index1 + 1 }}
|
|
|
|
|
VslCode:{{ toData.vslCode }} String:{{ toData.shipString }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="row">
|
|
|
|
|
船名/航次：{{ toData.vessel }} / {{
|
|
|
|
|
toData.voyNo }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
{{ toData.port }}
|
|
|
|
|
ETD：{{
|
|
|
|
|
toData.etd ? toData.etd : '-' }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
{{ toData.terminal }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</a-spin>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
|
import { GetInfoByTaskIdNotice } from '../api'
|
|
|
|
|
import { useMessage } from '../../../hooks/web/useMessage'
|
|
|
|
|
const { createMessage } = useMessage()
|
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const spinning = ref(false)
|
|
|
|
|
const taskData = ref({}) as any
|
|
|
|
|
const taskPKId = ref(route.query.taskPKId)
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
// getInfo()
|
|
|
|
|
taskData.value = {
|
|
|
|
|
"planType": "Rolling",
|
|
|
|
|
"carrierId": "MSK",
|
|
|
|
|
"confirmDeadLine": "2024-07-25 14:30:00",
|
|
|
|
|
"createTime": "2024-07-25 11:53:38",
|
|
|
|
|
"rollingPlanList": [
|
|
|
|
|
"*Nominated cargoes will be rolled to [",
|
|
|
|
|
"GSL Maria T5F-432S",
|
|
|
|
|
"],\r\n with ETA delay of [7] days.",
|
|
|
|
|
""
|
|
|
|
|
],
|
|
|
|
|
"from": [
|
|
|
|
|
{
|
|
|
|
|
"shipType": "From",
|
|
|
|
|
"shipString": "DRAGON",
|
|
|
|
|
"vslCode": "C4D",
|
|
|
|
|
"vessel": "GSL MELITA",
|
|
|
|
|
"voyNo": "431S",
|
|
|
|
|
"port": "Qingdao",
|
|
|
|
|
"terminal": "Qingdao Qianwan Container Co Ltd",
|
|
|
|
|
"groupIndx": 0,
|
|
|
|
|
"pkId": "08dcac5d-5e6f-476f-80f6-be148cb414ab"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"to": [
|
|
|
|
|
{
|
|
|
|
|
"shipType": "To",
|
|
|
|
|
"shipString": "DRAGON",
|
|
|
|
|
"vslCode": "T5F",
|
|
|
|
|
"vessel": "GSL MARIA",
|
|
|
|
|
"voyNo": "432S",
|
|
|
|
|
"port": "Qingdao",
|
|
|
|
|
"terminal": "Qingdao Qianwan Container Co Ltd",
|
|
|
|
|
"groupIndx": 0,
|
|
|
|
|
"pkId": "08dcac5d-5e70-430e-8415-fedd8d0be840"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"fromToList": [
|
|
|
|
|
{
|
|
|
|
|
"fromShip": {
|
|
|
|
|
"shipType": "From",
|
|
|
|
|
"shipString": "DRAGON",
|
|
|
|
|
"vslCode": "C4D",
|
|
|
|
|
"vessel": "GSL MELITA",
|
|
|
|
|
"voyNo": "431S",
|
|
|
|
|
"port": "Qingdao",
|
|
|
|
|
"terminal": "Qingdao Qianwan Container Co Ltd",
|
|
|
|
|
"groupIndx": 0,
|
|
|
|
|
"pkId": "08dcac5d-5e6f-476f-80f6-be148cb414ab"
|
|
|
|
|
},
|
|
|
|
|
"toShipList": [
|
|
|
|
|
{
|
|
|
|
|
"shipType": "To",
|
|
|
|
|
"shipString": "DRAGON",
|
|
|
|
|
"vslCode": "T5F",
|
|
|
|
|
"vessel": "GSL MARIA",
|
|
|
|
|
"voyNo": "432S",
|
|
|
|
|
"port": "Qingdao",
|
|
|
|
|
"terminal": "Qingdao Qianwan Container Co Ltd",
|
|
|
|
|
"groupIndx": 0,
|
|
|
|
|
"pkId": "08dcac5d-5e70-430e-8415-fedd8d0be840"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"preBillList": [
|
|
|
|
|
{
|
|
|
|
|
"batchId": "08dcac5d-5e7b-41ff-800a-0b3fb13cb4c8",
|
|
|
|
|
"status": "WAIT",
|
|
|
|
|
"bookedby": "QINGDAO SHISONGXINGYUAN LOGISTICS TECHNOLOGY CO.,LTD",
|
|
|
|
|
"contractualName": "QINGDAO SHISONGXINGYUAN LOGISTICS TECHNOLOGY CO.,LTD",
|
|
|
|
|
"shipment": "242294826",
|
|
|
|
|
"placeOfReceipt": "Qingdao",
|
|
|
|
|
"loadPortName": "Qingdao",
|
|
|
|
|
"dischargePortName": "Melbourne",
|
|
|
|
|
"placeOfDelivery": "Melbourne",
|
|
|
|
|
"ctnStat": "20GP*1",
|
|
|
|
|
"isUserManual": false,
|
|
|
|
|
"isSend": false,
|
|
|
|
|
"confirmDeadLine": "2024-07-25 16:30:00",
|
|
|
|
|
"groupName": "",
|
|
|
|
|
"ctnNote": ""
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"batchId": "08dcac5d-5e7b-41ff-800a-0b3fb13cb4c8",
|
|
|
|
|
"status": "WAIT",
|
|
|
|
|
"bookedby": "QINGDAO SHISONGXINGYUAN LOGISTICS TECHNOLOGY CO.,LTD",
|
|
|
|
|
"contractualName": "QINGDAO SHISONGXINGYUAN LOGISTICS TECHNOLOGY CO.,LTD",
|
|
|
|
|
"shipment": "242294826",
|
|
|
|
|
"placeOfReceipt": "Qingdao",
|
|
|
|
|
"loadPortName": "Qingdao",
|
|
|
|
|
"dischargePortName": "Melbourne",
|
|
|
|
|
"placeOfDelivery": "Melbourne",
|
|
|
|
|
"ctnStat": "20GP*1",
|
|
|
|
|
"isUserManual": false,
|
|
|
|
|
"isSend": false,
|
|
|
|
|
"confirmDeadLine": "2024-07-25 16:30:00",
|
|
|
|
|
"groupName": "",
|
|
|
|
|
"ctnNote": ""
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"loadDetailList": [],
|
|
|
|
|
"totalPreBillCtnStat": "20GP*2",
|
|
|
|
|
"nominationId": "08dcac5d-5e6e-4d02-8e1e-f10f5bd65220"
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
function getInfo() {
|
|
|
|
|
spinning.value = true
|
|
|
|
|
const ApiData = {
|
|
|
|
|
taskPKId: taskPKId.value
|
|
|
|
|
}
|
|
|
|
|
GetInfoByTaskIdNotice(ApiData).then(res => {
|
|
|
|
|
if (res.succeeded) {
|
|
|
|
|
taskData.value = res.data
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
spinning.value = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
function loadingStart() {
|
|
|
|
|
spinning.value = true
|
|
|
|
|
}
|
|
|
|
|
function loadingStop() {
|
|
|
|
|
spinning.value = false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
@import url('./taskStyle.less');
|
|
|
|
|
|
|
|
|
|
.main-box {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
.box-title {
|
|
|
|
|
background: rgba(37, 122, 250, 1);
|
|
|
|
|
color: white;
|
|
|
|
|
height: 26px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
padding-left: 16px;
|
|
|
|
|
}
|
|
|
|
|
.content{
|
|
|
|
|
background: rgba(245, 249, 252, 1);
|
|
|
|
|
padding-left: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
