|  | @@ -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'
 | 
	
		
			
				|  |  |          }]
 | 
	
		
			
				|  |  |        });
 |