mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/portal.git
synced 2026-08-26 16:04:23 +00:00
omair saleh
267 lines
12 KiB
Vue
267 lines
12 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row align-items-center">
|
|
<div class="col bg-master-light rounded padding-20 m-l-10 m-r-10">
|
|
<div class="row d-flex justify-content-between align-items-center">
|
|
<div class="col-auto">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="bold m-b-0">{{container.container_reference}}</h5>
|
|
<p>{{container.container_number}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="m-t-0">Container Type: {{container.container_type}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-b-0 large-text normal l-20">total cbm</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-t-0 large-text">{{ (Math.ceil((container.packing_lists.reduce((total, obj) => total + obj.packages.reduce((total, obj) => obj.cbm + total, 0), 0)) * 1000) / 1000).toFixed(3) }}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-b-0 large-text normal l-20">ETD</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-t-0 large-text">{{container.transport.current_schedule.etd}}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-b-0 large-text normal l-20">ETA</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-t-0 large-text">{{container.transport.current_schedule.eta}}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-b-0 large-text normal l-20">Loading Place</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-t-0 large-text">SHANGHAI, CHINA</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-b-0 large-text normal l-20">Destination port</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-t-0 large-text">PORT KLANG NORTH PORT, MALAYSIA</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto p-r-50">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-b-0 large-text normal l-20">Status</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-t-0 large-text">{{container.status}}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-20">
|
|
<div class="col bg-master-light rounded m-l-10 m-r-10">
|
|
<div class="row align-items-center p-t-10 p-b-10 padding-10">
|
|
<div class="col-auto">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="bold m-b-0">Package List</h5>
|
|
<p>(Total 77 Package in this container)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<p class="m-b-0">{{ containerFilledPercentage }}%</p>
|
|
</div>
|
|
<div class="batteryContainer">
|
|
<div class="batteryOuter">
|
|
<div id="batteryLevel" :style="{ width: svgLenght + 'px' }"></div>
|
|
</div>
|
|
<div class="batteryBump"></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="btn btn-default">
|
|
Add Package
|
|
</div>
|
|
<div class="btn btn-default">
|
|
Export List
|
|
</div>
|
|
<div class="btn btn-default">
|
|
Print Custom
|
|
</div>
|
|
</div>
|
|
<div class="col-auto p-r-30">
|
|
<h5 class="m-b-0 large-text normal l-20">Custom Declaration Status</h5>
|
|
<h5 class="m-t-0 text-right">__</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col padding-20 p-l-40 p-r-50">
|
|
<div class="row" v-for="packingList in container.packing_lists">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row b-a b-grey bg-master-lightest rounded align-items-center m-b-15 p-t-10 p-b-10" v-for="package_item in packingList.packages">
|
|
<div class="col">{{package_item.description}}</div>
|
|
<div class="col">Quantity: {{package_item.quantity}}</div>
|
|
<div class="col">cbm:{{ package_item.cbm }}</div>
|
|
<div class="col">Remark</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-10">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col" style="height: 300px;">
|
|
<div class="row h-100">
|
|
<div class="col">
|
|
<h5 class="m-b-5 large-text bold l-20">Timeline:</h5>
|
|
<div class="row h-100 p-l-10 p-r-10">
|
|
<div class="col rounded bg-master-lighter padding-15">
|
|
Timeline
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-b-5 large-text bold l-20">Comments:</h5>
|
|
<div class="row p-l-10 p-r-10">
|
|
<div class="col rounded bg-master-lighter padding-15">
|
|
Comments
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-15">
|
|
<div class="col">
|
|
<div class="row p-l-10 p-r-10">
|
|
<div class="col">
|
|
<h5 class="m-b-5 large-text bold l-20">Related documents:</h5>
|
|
</div>
|
|
<div class="co-auto">
|
|
<div class="btn justify-content bg-master-light">
|
|
<i class="fa fa-upload m-r-10" ></i>Upload Documents
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row p-l-10 p-r-10">
|
|
<div class="col rounded bg-master-lighter padding-15">
|
|
documents
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: Number,
|
|
required: true,
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
section: 'containerPofileSection',
|
|
isLoading: true,
|
|
container: null,
|
|
expanded: false,
|
|
totalCBM: 6,
|
|
CBMcapacity: 30,
|
|
svgLenght: 0,
|
|
svgLenghtSquare: 0,
|
|
confirmLanding: false,
|
|
}
|
|
},
|
|
computed: {
|
|
pendingQueue () {
|
|
return this.$store.getters.isInCompleteQueue(this.section);
|
|
},
|
|
containerFilledPercentage() {
|
|
this.svgLenght = this.totalCBM / this.CBMcapacity * 25;
|
|
this.svgLenghtSquare = this.totalCBM / this.CBMcapacity * 100 -2;
|
|
return this.totalCBM / this.CBMcapacity * 100;
|
|
}
|
|
// totalCbm () {
|
|
// let totalCbm = 0;
|
|
|
|
// return this.container.packing_lists.map(function(packing_list){
|
|
// totalCbm += packing_list.packages.reduce((total, obj) => obj.quantity + total, 0);
|
|
// })
|
|
// }
|
|
},
|
|
watch: {
|
|
pendingQueue(inComplete){
|
|
if(inComplete){
|
|
this.fetchCompany();
|
|
}
|
|
}
|
|
},
|
|
created(){
|
|
this.$store.dispatch('updateListQueue', {'name': this.section});
|
|
},
|
|
methods: {
|
|
fetchCompany(){
|
|
this.isLoading = true;
|
|
this.submit(route('api.packing_list.container.show', this.id), 'get', this.section, false, false)
|
|
},
|
|
successHandler(response){
|
|
this.$store.dispatch('completeList', {'name': this.section, 'data': []});
|
|
this.isLoading = false;
|
|
this.container = response.payload.data;
|
|
},
|
|
confirmStatus(){
|
|
this.confirmLanding = true;
|
|
console.log(this.confirmLanding);
|
|
}
|
|
}
|
|
}
|
|
</script> |