|
@@ -621,53 +621,35 @@
|
|
|
<div id="distribution" style="width: 100%;height: 300px;"></div>
|
|
|
</div>
|
|
|
<div style="width: 100%;margin: 20px auto;float: left">
|
|
|
- <div style="width: 49%;float: left">
|
|
|
- <el-table
|
|
|
- :data="bookingData"
|
|
|
- style="width: 100%">
|
|
|
- <el-table-column
|
|
|
- prop="acc"
|
|
|
- align="center"
|
|
|
- label="船名航次">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="bcc"
|
|
|
- align="center"
|
|
|
- label="开船日期">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="caa"
|
|
|
- align="center"
|
|
|
- label="预装TEU">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="baa"
|
|
|
- align="center"
|
|
|
- label="装载TEU">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div style="width: 47%;float: right">
|
|
|
- <el-table
|
|
|
- :data="bookingData"
|
|
|
- style="width: 100%">
|
|
|
- <el-table-column
|
|
|
- prop="acc"
|
|
|
- align="center"
|
|
|
- label="船名航次">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="bcc"
|
|
|
- align="center"
|
|
|
- label="开船日期">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="bcc"
|
|
|
- align="center"
|
|
|
- label="到港日期">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
+ <el-table :data="bookingData">
|
|
|
+ <el-table-column prop="fName" align="center" label="船名"/>
|
|
|
+ <el-table-column prop="fNo" align="center" label="航次"/>
|
|
|
+ <el-table-column prop="portofloadName" align="center" label="起运港"/>
|
|
|
+ <el-table-column prop="distinationName" align="center" label="目的港"/>
|
|
|
+ <el-table-column prop="fWeight" align="center" label="容量TEU"/>
|
|
|
+ <el-table-column prop="boxNumber" align="center" label="实装TEU"/>
|
|
|
+ <el-table-column prop="fETD" align="center" label="预计开船">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.fETD?scope.row.fETD.slice(0, 10):'' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="fETA" align="center" label="预计到港">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.fETA?scope.row.fETA.slice(0, 10):'' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="fATD" align="center" label="实际开船">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.fATD?scope.row.fATD.slice(0, 10):'' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="fATA" align="center" label="实际到港">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.fATA?scope.row.fATA.slice(0, 10):'' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="fDays" align="center" label="航程"/>
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
<div style="width: 100%;">
|
|
|
<div style="width: 49%;float: left">
|
|
@@ -777,6 +759,9 @@
|
|
|
<div style="width: 100%;margin: 10px auto;float: left">
|
|
|
<div id="bookingRanking" style="width: 100%;height: 300px;"></div>
|
|
|
</div>
|
|
|
+ <div style="width: 100%;margin: 10px auto;float: left">
|
|
|
+ <div id="bookingRankingTwo" style="width: 100%;height: 300px;"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -789,18 +774,17 @@ import {
|
|
|
information,
|
|
|
warehouse,
|
|
|
inquiry,
|
|
|
+ boxDistribution,
|
|
|
+ shipDynamics,
|
|
|
+ bookingSpace,
|
|
|
+ locationRanking
|
|
|
} from "../../src/api/index";
|
|
|
import Cookies from "js-cookie";
|
|
|
export default {
|
|
|
name: "index",
|
|
|
data() {
|
|
|
return {
|
|
|
- bookingData:[
|
|
|
- {acc:'T00345',bcc:'2020-5-12',caa:'BUGASD',baa:'ECCC-099897'},
|
|
|
- {acc:'T00345',bcc:'2020-5-02',caa:'BUGASD',baa:'ECCC-099897'},
|
|
|
- {acc:'T00345',bcc:'2020-5-05',caa:'BUGASD',baa:'ECCC-099897'},
|
|
|
- {acc:'T00345',bcc:'2020-5-09',caa:'BUGASD',baa:'ECCC-099897'}
|
|
|
- ],
|
|
|
+ bookingData:[],
|
|
|
editModel: {},
|
|
|
// 版本号
|
|
|
version: "3.2.1",
|
|
@@ -808,6 +792,16 @@ export default {
|
|
|
text: "",
|
|
|
dialogVisible: false,
|
|
|
tableData: [],
|
|
|
+ dataList:{
|
|
|
+ addressName:[],
|
|
|
+ boxNumber:[],
|
|
|
+ bookingRanking:{
|
|
|
+ text:[],
|
|
|
+ textTwo:[],
|
|
|
+ data:[],
|
|
|
+ dataTwo:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
chart: [],
|
|
|
warehouse: [],
|
|
|
master: [],
|
|
@@ -871,9 +865,48 @@ export default {
|
|
|
this.getList();
|
|
|
this.warehouses();
|
|
|
this.inquiry();
|
|
|
+ this.dataList.addressName = []
|
|
|
+ this.dataList.boxNumber = []
|
|
|
+ this.dataList.bookingRanking.text = []
|
|
|
+ this.dataList.bookingRanking.textTwo = []
|
|
|
+ this.dataList.bookingRanking.data = []
|
|
|
+ this.dataList.bookingRanking.dataTwo = []
|
|
|
if (Number(this.sysType) === 3){
|
|
|
- this.boxDistribution()
|
|
|
- this.ranking()
|
|
|
+ boxDistribution().then(res =>{
|
|
|
+ res.data.forEach(item =>{
|
|
|
+ this.dataList.addressName.push(item.addressName)
|
|
|
+ this.dataList.boxNumber.push(item.boxNumber)
|
|
|
+ })
|
|
|
+ this.boxDistribution()
|
|
|
+ })
|
|
|
+ bookingSpace().then(res=>{
|
|
|
+ res.data.forEach(item =>{
|
|
|
+ this.dataList.bookingRanking.text.push(item.corpName)
|
|
|
+ this.dataList.bookingRanking.data.push({
|
|
|
+ name: item.corpName,
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ data: [item.January, item.February, item.March, item.April, item.May, item.June, item.July,item.August,item.September,item.October,item.November,item.December]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.ranking()
|
|
|
+ })
|
|
|
+ locationRanking().then(res=>{
|
|
|
+ res.data.forEach(item =>{
|
|
|
+ this.dataList.bookingRanking.textTwo.push(item.corpName)
|
|
|
+ this.dataList.bookingRanking.dataTwo.push({
|
|
|
+ name: item.corpName,
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ data: [item.January, item.February, item.March, item.April, item.May, item.June, item.July,item.August,item.September,item.October,item.November,item.December]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.rankingTwo()
|
|
|
+ })
|
|
|
+ shipDynamics().then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ this.bookingData = res.data
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -884,20 +917,67 @@ export default {
|
|
|
// 绘制图表
|
|
|
myChart.setOption({
|
|
|
title: {
|
|
|
- text: "订舱排名",
|
|
|
- left: "center",
|
|
|
+ text: '订舱排名(前十)',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'right',
|
|
|
+ data: this.dataList.bookingRanking.text
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '20%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['中国国贸集团', '赛轮集团', '金宇集团', '利群集团', '中华集团', '腾讯集团', '网易公司']
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
- series: [{
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
- type: 'line'
|
|
|
- }]
|
|
|
+ series: this.dataList.bookingRanking.data
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //箱分布图表
|
|
|
+ rankingTwo() {
|
|
|
+ // 基于准备好的dom,初始化echarts实例,所以只能在mounted中调用
|
|
|
+ let myChart = this.$echarts.init(document.getElementById("bookingRankingTwo"));
|
|
|
+ // 绘制图表
|
|
|
+ myChart.setOption({
|
|
|
+ title: {
|
|
|
+ text: '应收款排名(前十)',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'right',
|
|
|
+ data: this.dataList.bookingRanking.textTwo
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '20%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: this.dataList.bookingRanking.dataTwo
|
|
|
});
|
|
|
},
|
|
|
//箱分布图表
|
|
@@ -912,7 +992,7 @@ export default {
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['北京', '上海', '天津', '青岛', '深圳', '西安', '甘肃']
|
|
|
+ data: this.dataList.addressName
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
@@ -926,7 +1006,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
series: [{
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
+ data: this.dataList.boxNumber,
|
|
|
type: 'line'
|
|
|
}]
|
|
|
});
|