页面显示部分:
v-model="value" type="date" placeholder="日期" value-format="yyyy-MM-dd" >
:data="escData" style="width:96%;margin-top:34px;margin-left: 10px;" :row-class-name="tableClassName" :span-method="arraySpanMethod" >
:data="ImportData" style="width:96%;margin-top:34px;margin-left: 10px;" :row-class-name="tableClassName" :span-method="arraySpanMethod" >
js部分:
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()
})
}
}
}
样式部分:
.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;
}
}
}
}
}
}
展示效果部分: