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

页面显示部分：

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

展示效果部分：


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,393评论 5赞 467
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,790评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,391评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,703评论 1赞 270
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,613评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,003评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,507评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,158评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,300评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,984评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,569评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2赞 345
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2赞 339

推荐阅读更多精彩内容