页面显示部分：
<template>
<div class="information">
<div class="infor-top">
<el-date-picker
v-model="value"
type="date"
placeholder="日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
<button class="btn" @click="getTime">查询</button>
</div>
<div class="infor-left">
<div class="inforTop"><div class="information"><div class="size">出口</div></div></div>
<div class="tableLeft">
<el-table
:data="escData"
style="width:96%;margin-top:34px;margin-left: 10px;"
:row-class-name="tableClassName"
:span-method="arraySpanMethod"
>
<el-table-column label="船名/航次" prop="CM" width="180"></el-table-column>
<el-table-column label="方案" prop="BERTH_TER"></el-table-column>
<el-table-column label="箱量" prop="VEL_TEU" ></el-table-column>
<el-table-column label="舱位记载率">
<template slot-scope="scope">
<el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.VEL_BOOKRATE" color="#3ad1c1" class="shipping"></el-progress>
</template>
</el-table-column>
<el-table-column label="转码头率">
<template slot-scope="scope">
<el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.VEL_TRANRATE" color="#fedb6f" class="terminal"></el-progress>
</template>
</el-table-column>
<el-table-column label="泊位利用率" prop="">
<template slot-scope="scope">
<el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.Utilization" color="#40daff" class="berth"></el-progress>
</template>
</el-table-column>
<el-table-column label="紧急程度" prop="">
<template slot-scope="scope">
<el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.Emergency" color="#fc9c55" class="elProgress"></el-progress>
</template>
</el-table-column>
</el-table>
<div class="sumlist">
<div class="list1">汇总</div>
<div class="list2">航次数:{{sumData.Sum_Voyage ? sumData.Sum_Voyage : " "}} 艘次</div>
<div class="list3">{{sumData.Sum_VEL_TEU ? sumData.Sum_VEL_TEU : " "}}</div>
<div class="list4">
<el-progress :text-inside="true" :stroke-width="26" :percentage="sumData.Sum_VEL_BOOKRATE" color="#3ad1c1" class="shipping4"></el-progress>
</div>
<div class="list5">
<el-progress :text-inside="true" :stroke-width="26" :percentage="sumData.Sum_VEL_TRANRATE" color="#fedb6f" class="terminal5"></el-progress>
</div>
<div class="list6">
<el-progress :text-inside="true" :stroke-width="26" :percentage="sumData.Sum_The_berth" color="#40daff" class="berth6"></el-progress>
</div>
</div>
</div>
</div>
<div class="infor-right">
<div class="inforTop"><div class="information"><div class="size">进口</div></div></div>
<div class="tableLeft">
<el-table
:data="ImportData"
style="width:96%;margin-top:34px;margin-left: 10px;"
:row-class-name="tableClassName"
:span-method="arraySpanMethod"
>
<el-table-column label="船名/航次" prop="CM" width="180"></el-table-column>
<el-table-column label="方案" prop="BERTH_TER"></el-table-column>
<el-table-column label="箱量" prop="VEL_TEU" ></el-table-column>
<el-table-column label="舱位记载率">
<template slot-scope="scope">
<el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.VEL_BOOKRATE" color="#3ad1c1" class="shipping"></el-progress>
</template>
</el-table-column>
<el-table-column label="转码头率">
<template slot-scope="scope">
<el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.VEL_TRANRATE" color="#fedb6f" class="terminal"></el-progress>
</template>
</el-table-column>
<el-table-column label="泊位利用率" prop="">
<template slot-scope="scope">
<el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.Utilization" color="#40daff" class="berth"></el-progress>
</template>
</el-table-column>
<el-table-column label="紧急程度" prop="">
<template slot-scope="scope">
<el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.Emergency" color="#fc9c55" class="elProgress"></el-progress>
</template>
</el-table-column>
</el-table>
<div class="sumlist" >
<div class="list1">汇总</div>
<div class="list2">航次数:{{SumData.Sum_Voyage ? SumData.Sum_Voyage : " "}} 艘次</div>
<div class="list3">{{SumData.Sum_VEL_TEU ? SumData.Sum_VEL_TEU : " "}}</div>
<div class="list4">
<el-progress :text-inside="true" :stroke-width="26" :percentage="SumData.Sum_VEL_BOOKRATE" color="#3ad1c1" class="shipping4"></el-progress>
</div>
<div class="list5">
<el-progress :text-inside="true" :stroke-width="26" :percentage="SumData.Sum_VEL_TRANRATE" color="#fedb6f" class="terminal5"></el-progress>
</div>
<div class="list6">
<el-progress :text-inside="true" :stroke-width="26" :percentage="SumData.Sum_The_berth" color="#40daff" class="berth6"></el-progress>
</div>
</div>
</div>
</div>
</div>
</template>
js部分：
<script>
import Api from "@/api/information/index.js"; //引入接口文档文件(以项目文件路径为准)
export default {
name:"information",
data () {
return {
// 日期
value: "",
escData:[],
sumData:[],
ImportData:[],
SumData:[],
}
},
created(){this.getNowTime()},
mounted() {},
methods:{
//获取当前时间并赋值给日期选择的value上面
getNowTime() {
let now = new Date();
let year = now.getFullYear(); //得到年份
let month = now.getMonth()+1; //得到月份
let date = now.getDate(); //得到日期
return this.value = year+"-"+month+"-"+date;
},
// 查询时间
getTime(){
this.getExit()
this.getImport()
},
// 合并单元格后只展示下边框
tableClassName ({row, rowIndex}) {
if (row.colSpan) {
return 'border_top'
}
},
// 合并单元格
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (row.colSpan) {
return [row.colSpan, 1]
} else {
return [0, 0]
}
}
},
// 出口信息
getExit(){
let that=this
Api.GetExit(this.value).then((res)=>{
that.escData=res.data.data.listData
if(!res.data.data.SummaryData){
that.sumData=[]
}else{
that.sumData=res.data.data.SummaryData
}
// 合并单元格
let perName=that.escData[0] ? that.escData[0].CM : ' '
let diffIndex = 0
let sum = 0
that.escData.push({CM:null})
that.escData.forEach((item,index)=>{
if(item.CM !== perName){
that.escData[diffIndex].colSpan = sum
perName = item.CM
diffIndex = index
sum = 1
}else{
sum++
}
})
that.escData.pop()
})
},
// 进口信息
getImport(){
Api.GetImport(this.value).then((res)=>{
this.ImportData = res.data.data.listData
if(!res.data.data.SummaryData){
this.SumData=[]
}else{
this.SumData=res.data.data.SummaryData
}
// 合并单元格
let perName = this.ImportData[0] ? this.ImportData[0].CM : ' '
let diffIndex = 0
let sum = 0
this.ImportData.push({CM:null})
this.ImportData.forEach((item,index)=>{
if(item.CM !== perName){
this.ImportData[diffIndex].colSpan = sum
perName = item.CM
diffIndex = index
sum = 1
}else{
sum++
}
})
this.ImportData.pop()
})
}
}
}
</script>
样式部分：
<style lang="scss" scoped>
.information {
display: flex;
position: relative;
width: 100%;
height: 100vh;
background: #000000 url('~@/assets/images/integrated/bg.png') no-repeat;
background-size: 100% 100%;
.infor-top{
position: absolute;
top: 4%;
left: 4%;
width: 20%;
height: 7%;
border: 1px solid #3ed3f7;
.btn{
width: 150px;
height: 60px;
margin: auto 20px;
align-content: center;
background-color: #3ed3f7;
font-size: 30px;
color: #ffffff;
}
}
.infor-top /deep/ .el-input__inner {
margin: 5%;
width: 65%;
height: 70px;
color: #ffffff;
font-size: 35px;
border-radius: 30px;
border:1px solid #3ed3f7;
background: #002e3c;
@include placeholder()
}
.infor-top /deep/ .el-input__suffix {
position: absolute;
left: 150px;
top: 2px;
transition: all .3s;
}
.infor-top /deep/ .el-input__prefix {
display: none;
}
.infor-left{
margin: 2%;
margin-left: 1%;
position: absolute;
top: 12%;
width: 48%;
height: 83%;
border: 1px solid #1489b4;
.inforTop{
position: absolute;
top: -49px;
left: 100px;
width: 250px;
height: 100px;
.information{
width: 350px;
height: 100px;
line-height: 100px;
background: url('~@/assets/images/monitoring/path.png') no-repeat;
background-size: 100% 100%;
.size {
color: #fff;
margin-left: 130px;
font-size: 35px;
text-align: center;
align-items: center;
}
}
}
.tableLeft /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td{
background: transparent;
}
.tableLeft /deep/ .el-table::before {
width: 0;
height: 0;
}
.tableLeft /deep/ .el-table th.is-leaf {
border-bottom: none;
}
.tableLeft /deep/ .el-table th, .el-table tr {
width: 100%;
background: #1489b4;
color: #cde6ef;
}
.tableLeft /deep/ .el-table__body-wrapper {
background: #002b3c;
color: #fff;
}
.tableLeft /deep/ .el-table__row {
background-color: #002b3c;
}
.tableLeft /deep/ .el-table td, .el-table th .is-leaf {
border-bottom: none;
}
.tableLeft /deep/ .border_top {
&:not(:first-child) {
td {
border-top: 1px solid #00516b;
}
}
}
.tableLeft{
.shipping{
border-radius: 38px;
background: #002e3c;
}
.shipping /deep/ .el-progress-bar__outer {
border: 1px solid #3ad1c1;
height: 46px !important;
background: #002e3c;
}
.shipping /deep/ .el-progress-bar__innerText {
color: #000;
}
// 转码头率
.terminal{
border-radius: 38px;
background: #002e3c;
}
.terminal /deep/ .el-progress-bar__outer {
border: 1px solid #fedb6f;
height: 46px !important;
background: #002e3c;
}
.terminal /deep/ .el-progress-bar__innerText {
color: #000;
}
// 泊位利用率
.berth{
border-radius: 38px;
background: #002e3c;
}
.berth /deep/ .el-progress-bar__outer {
border: 1px solid #40daff;
height: 46px !important;
background: #002e3c;
}
.berth /deep/ .el-progress-bar__innerText {
color: #000;
}
// 紧急程度
.elProgress{
border-radius: 38px;
background: #002e3c;
}
.elProgress /deep/ .el-progress-bar__outer {
border: 1px solid #fc9c55;
height: 46px !important;
background: #002e3c;
}
.elProgress /deep/ .el-progress-bar__innerText {
color: #000;
}
.sumlist{
display: flex;
width: 96%;
height: 100px;
margin-left: 1%;
background: #005974;
.list1{
width: 7%;
height: 100%;
font-size: 35px;
line-height: 100px;
text-align: center;
align-items: center;
margin-right: 150px;
}
.list2{
width: 12%;
height: 100%;
font-size: 35px;
line-height: 100px;
text-align: center;
align-items: center;
margin-right: 20px;
}
.list3{
width: 15%;
height: 100%;
font-size: 40px;
line-height: 100px;
text-align: center;
align-items: center;
margin-right: 20px;
}
.list4{
width: 12%;
height: 100%;
font-size: 40px;
line-height: 100px;
margin-left: 80px;
margin-top: 20px;
.shipping4{
border-radius: 38px;
background: #002e3c;
}
.shipping4 /deep/ .el-progress-bar__outer {
border: 1px solid #3ad1c1;
height: 46px !important;
background: #002e3c;
}
.shipping4 /deep/ .el-progress-bar__innerText {
color: #000;
}
}
.list5{
width: 12%;
height: 100%;
font-size: 40px;
line-height: 100px;
margin-left: 40px;
margin-top: 20px;
// 转码头率
.terminal5{
border-radius: 38px;
background: #002e3c;
}
.terminal5 /deep/ .el-progress-bar__outer {
border: 1px solid #fedb6f;
height: 46px !important;
background: #002e3c;
}
.terminal5 /deep/ .el-progress-bar__innerText {
color: #000;
}
}
.list6{
width: 12%;
height: 100%;
font-size: 40px;
line-height: 100px;
margin-left: 50px;
margin-top: 20px;
// 泊位利用率
.berth6{
border-radius: 38px;
background: #002e3c;
// text-align: center;
// align-items: center;
}
.berth6 /deep/ .el-progress-bar__outer {
border: 1px solid #40daff;
height: 46px !important;
background: #002e3c;
}
.berth6 /deep/ .el-progress-bar__innerText {
color: #000;
}
}
}
}
}
.infor-right{
margin-left: 51%;
position: absolute;
margin-right: 1%;
margin-top: 2%;
top: 12%;
width: 48%;
height: 83%;
border: 1px solid #1489b4;
.inforTop{
position: absolute;
top: -49px;
left: 100px;
width: 250px;
height: 100px;
.information{
width: 350px;
height: 100px;
line-height: 100px;
background: url('~@/assets/images/monitoring/path.png') no-repeat;
background-size: 100% 100%;
.size {
color: #fff;
margin-left: 130px;
text-align: center;
font-size: 35px;
align-items: center;
}
}
}
.tableLeft /deep/ .border_top {
&:not(:first-child) {
td {
border-top: 1px solid #00516b;
}
}
}
.tableLeft /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td{
background: transparent;
}
.tableLeft /deep/ .el-table::before {
width: 0;
height: 0;
}
.tableLeft /deep/ .el-table th.is-leaf {
border-bottom: none;
}
.tableLeft /deep/ .el-table th, .el-table tr {
width: 100%;
background: #1489b4;
color: #cde6ef;
}
.tableLeft /deep/ .el-table__body-wrapper {
background: #002b3c;
color: #fff;
}
.tableLeft /deep/ .el-table__row {
background-color: #002b3c;
}
.tableLeft /deep/ .el-table td, .el-table th.is-leaf {
border-bottom: none;
}
.tableLeft{
.shipping{
border-radius: 38px;
background: #002e3c;
}
.shipping /deep/ .el-progress-bar__outer {
border: 1px solid #3ad1c1;
height: 46px !important;
background: #002e3c;
}
.shipping /deep/ .el-progress-bar__innerText {
color: #000;
}
// 转码头率
.terminal{
border-radius: 38px;
background: #002e3c;
}
.terminal /deep/ .el-progress-bar__outer {
border: 1px solid #fedb6f;
height: 46px !important;
background: #002e3c;
}
.terminal /deep/ .el-progress-bar__innerText {
color: #000;
}
// 泊位利用率
.berth{
border-radius: 38px;
background: #002e3c;
}
.berth /deep/ .el-progress-bar__outer {
border: 1px solid #40daff;
height: 46px !important;
background: #002e3c;
}
.berth /deep/ .el-progress-bar__innerText {
color: #000;
}
// 紧急程度
.elProgress{
border-radius: 38px;
background: #002e3c;
}
.elProgress /deep/ .el-progress-bar__outer {
border: 1px solid #fc9c55;
height: 46px !important;
background: #002e3c;
}
.elProgress /deep/ .el-progress-bar__innerText {
color: #000;
}
.sumlist{
display: flex;
width: 96%;
height: 100px;
margin-left: 1%;
background: #005974;
.list1{
width: 10%;
height: 100%;
font-size: 35px;
line-height: 100px;
text-align: center;
align-items: center;
margin-right: 130px;
}
.list2{
width: 12%;
height: 100%;
font-size: 35px;
line-height: 100px;
text-align: center;
align-items: center;
margin-right: 5px;
}
.list3{
width: 15%;
height: 100%;
font-size: 40px;
line-height: 100px;
text-align: center;
align-items: center;
margin-right: 29px;
}
.list4{
width: 12%;
height: 100%;
font-size: 40px;
line-height: 100px;
margin-left: 60px;
margin-top: 20px;
.shipping4{
border-radius: 38px;
background: #002e3c;
}
.shipping4 /deep/ .el-progress-bar__outer {
border: 1px solid #3ad1c1;
height: 46px !important;
background: #002e3c;
}
.shipping4 /deep/ .el-progress-bar__innerText {
color: #000;
}
}
.list5{
width: 12%;
height: 100%;
font-size: 40px;
line-height: 100px;
margin-left: 40px;
margin-top: 20px;
// 转码头率
.terminal5{
border-radius: 38px;
background: #002e3c;
}
.terminal5 /deep/ .el-progress-bar__outer {
border: 1px solid #fedb6f;
height: 46px !important;
background: #002e3c;
}
.terminal5 /deep/ .el-progress-bar__innerText {
color: #000;
}
}
.list6{
width: 12%;
height: 100%;
font-size: 40px;
line-height: 100px;
margin-left: 40px;
margin-top: 20px;
// 泊位利用率
.berth6{
border-radius: 38px;
background: #002e3c;
// text-align: center;
// align-items: center;
}
.berth6 /deep/ .el-progress-bar__outer {
border: 1px solid #40daff;
height: 46px !important;
background: #002e3c;
}
.berth6 /deep/ .el-progress-bar__innerText {
color: #000;
}
}
}
}
}
}
</style>
展示效果部分：
