2021-06-10日期默认显示当前时间,且可以查询下面的船舶信息,且相同船名合并单元格

页面显示部分:

                 

                 

                       

                        

                     

                 

                 

                       

                        

                     

                 

                 

                       

                        

                     

                    

             

             

                 汇总

                  航次数:{{sumData.Sum_Voyage ? sumData.Sum_Voyage : " "}} 艘次

                 {{sumData.Sum_VEL_TEU ? sumData.Sum_VEL_TEU : " "}}

                

                        

                

                 

                        

                 

                  

                        

                  

             

             

        

        

             进口

             

                   

             :data="ImportData"

             style="width:96%;margin-top:34px;margin-left: 10px;"

             :row-class-name="tableClassName"

            :span-method="arraySpanMethod"

             >

                 

                 

                 

                 

                     

                        

                     

                 

                 

                       

                        

                     

                 

                 

                       

                        

                     

                 

                 

                       

                        

                     

                 

             

             

                 汇总

              航次数:{{SumData.Sum_Voyage ? SumData.Sum_Voyage : " "}} 艘次

                 {{SumData.Sum_VEL_TEU ? SumData.Sum_VEL_TEU : " "}}

                

                        

                

                 

                        

                 

                  

                        

                  

             

             

        

    

js部分:

样式部分:

    .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;

            }

                }

            }

        }

        }

    }

展示效果部分:


你可能感兴趣的:(2021-06-10日期默认显示当前时间,且可以查询下面的船舶信息,且相同船名合并单元格)