Timeline components

Timeline component ：

<template>
  <div class="timeline-container">
    <h5> Package details </h5>
    <div style="display: inline-block">
      <!--  Event axis  -->
      <div class="scaleline-container">
        <div class="year-container" v-for="(item,indexYear) in lineData.length" :key="indexYear">
          <!-- {
    {
    `${
      minYear + indexYear} year `}} -->
          <div class="m-container">
           <div class="month-container" v-for="(item,index) in loopYear(item)" :key="index">
            <div class="name">{
    {
    `${
      minYear + indexYear} year ${
      index +1} month `}}</div>
            <div class="name1">
              <div v-for="(item,index) in item" class="line" :key="index"></div>
            </div>
           </div>
          </div>
        </div>
      </div>
      <!--  Edge line  -->
      <div class="margin-container">
        <div class="no-active" :style="{width: '30%'}"></div>
        <div class="active" :style="{width: '70%'}"></div>
      </div>
      <!--  today  -->
      <div class="today-container">
        <div class="before" :style="{width: today+'%'}"></div>
        <div class="triangle"></div>
        <div class="text">{
    {
    ' today '}}</div>
      </div>
      <!--  package  -->
      <div class="package-container" v-for="(item,index) in packageList" :key="index">
        <div class="prefix-container" :style="{width: item.before+'%'}"></div>
        <div class="content-container">
          <span class="title">
            <span>{
    {
    ` total : ${
      item.channelNum}`}}</span>
          <span>{
    {
    `(${
      item.startTime}&nbsp;&nbsp;${
      item.endTime})`}}</span>
          </span>
          
        </div>
        <div class="suffix-container" :style="{width: item.after+'%'}"></div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
const DAY31 = [30,28,30,29,31,29,31,31,29,31,29,31];
const DAY30 = [30,27,30,30,31,30,31,31,30,31,30,31];
const COMPONENT_NAME = 'timeLine';
export default {
    
  name: COMPONENT_NAME,
  props: {
    
     packageDetail: {
    
      type: Array,
      default: () => ([
        {
    
          channelNum: 999999,
          endTime: 1678530041000,
          packageType: 3,
          startTime: 1617287134582,
          status: 0
        },
        {
    
        channelNum: 50,
        endTime: 1657849440428,
        packageType: 3,
        startTime: 1655257440428,
        status: 2
       },
       {
    
        channelNum: 8,
        endTime: 4102329600000,
        packageType: 1,
        startTime: 1655256659902,
        status: 0
       },{
    
        channelNum: 50,
        endTime: 1657849440428,
        packageType: 3,
        startTime: 1655257440428,
        status: 2
       },
       {
    
        channelNum: 8,
        endTime: 4102329600000,
        packageType: 1,
        startTime: 1655256659902,
        status: 0
       },{
    
        channelNum: 50,
        endTime: 1657849440428,
        packageType: 3,
        startTime: 1655257440428,
        status: 2
       },
       {
    
        channelNum: 8,
        endTime: 4102329600000,
        packageType: 1,
        startTime: 1655256659902,
        status: 0
       },
       {
    
        channelNum: 50,
        endTime: 1657849440428,
        packageType: 3,
        startTime: 1655257440428,
        status: 2
       },
       {
    
        channelNum: 8,
        endTime: 4102329600000,
        packageType: 1,
        startTime: 1655256659902,
        status: 0
       }
      ])
    },
  },
  data() {
    
    return {
    
      //  package 
      packageList: [],
      //  Maximum date 
      maxDate: '',
      maxYear: 0,
      maxMonth: 0,
      maxDay: 0,
      //  Minimum date 
      minDate: '',
      minYear: 0,
      minMonth: 0,
      minDay: 0,
      //  How many years ？
      manyYear: 0,
      //  Tick mark data 
      lineData: [],
      //  Chief, 
      total: 0,
      //  today 
      today: new Date().getTime()
    };
  },
  computed: {
     
      
  },
  watch: {
    
      
  },
  created() {
    
    this.handleData();
    this.handleScaleLine()
  },
  methods: {
    
    handleData() {
    
      let max = this.packageDetail[0]['endTime'];
      let min = this.packageDetail[0]['startTime'];
      this.packageDetail.forEach( item => {
    
        if(item['endTime'] > max ) {
    
          max = item['endTime']
        }
        if(item['startTime'] < min) {
    
          min = item['startTime']
        }
       this.packageList.push({
    
        channelNum: item.channelNum,
        endTime: moment(item['endTime']).format('YYYY-MM-DD HH:mm'),
        packageType: item.packageType,
        startTime: moment(item['startTime']).format('YYYY-MM-DD HH:mm'),
        status: item.status
       });
      })
      
      this.maxDate = moment(max).format('YYYYMMDD')
      this.maxYear = Number(this.maxDate.slice(0,4))
      this.maxMonth = Number(this.maxDate.slice(4,6))
      this.maxDay =  Number(this.maxDate.slice(6,8))

      this.minDate = moment(min).format('YYYYMMDD')
      this.minYear = Number(this.minDate.slice(0,4))
      this.minMonth = Number(this.minDate.slice(4,6))
      this.minDay =  Number(this.minDate.slice(6,8))

      this.total = new Date(`${
      this.maxYear}-12-31`).getTime() - new Date(`${
      this.minYear}-01-01`).getTime()
      this.today =  ((new Date().getTime() - new Date(`${
      this.minYear}-01-01`)) / this.total) * 100

      this.manyYear = (this.maxYear - this.minYear) + 1
      this.handlePackage()
    },
    //  Runpingnian ？
    howYear(year) {
    
      if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    
        return true //  Leap year 
      }
      return false //  Ordinary year 
    },
    //  Calibration line 
    handleScaleLine() {
    
      for (let index = 0; index < this.manyYear; index++) {
    
        this.lineData.push(this.howYear(this.minYear+index))
     }
    },
    //  Cycle the months of that year 
    loopYear(flag) {
    
      return flag ? DAY31: DAY30
    },
    //  Add proportion to each set meal 
    handlePackage() {
    
      this.packageList.forEach(item => {
    
        item.before = ((new Date(item.startTime.slice(0,10)).getTime() - new Date(`${
      this.minYear}-01-01`).getTime()) / this.total ) * 100
        item.after = ((new Date(`${
      this.maxYear}-12-31`).getTime() - new Date(item.endTime.slice(0,10)).getTime() ) / this.total ) * 100
      })
    }
  }
  
};
</script>
<style scoped lang="less">
.timeline-container {
    
  width: 800px;
  height: 200px;
  border: 1px solid #000;
  overflow: auto;
  h5 {
    
    margin: 0;
    opacity: 0.7;
    font-family: MicrosoftYaHeiUI;
    font-size: 14px;
    color: #000000;
    letter-spacing: 0;
    line-height: 20px;
    font-weight: 400;
  }
  .scaleline-container {
    
    display: inline-block !important;
    height: 28px;
    white-space: nowrap;
    .year-container {
    
      display: inline-block !important;
      height: 28px;
      .m-container {
    
        display: inline-block !important;
        height: 28px;
      }
      .month-container {
    
        height: 28px;
        display: inline-block !important;
        // background-color: antiquewhite;
        border-left: 0.67px solid rgba(151,151,151,1);
        margin-left: 3.5px;
        &:first-child {
    
          margin-left: 0;
        }
        .name {
    
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: rgba(0,0,0,.3);
          text-align: center;
          // background-color: aqua;
        }
        .name1 {
    
          height: 12px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: rgba(0,0,0,.3);
          // background-color: red;
        }
        .line {
    
          display: inline-block;
          height: 100%;
          width: 1px;
          margin-left: 3.5px;
          background-color: rgba(151,151,151,0.3);
        }
      }
      &:last-child {
    
       .month-container:last-child {
    
        border-right: 0.67px solid rgba(151,151,151,1);
        .line:last-child {
    
          display: none;
        }        
       }
      }
    }
  }
  .margin-container {
    
      margin-top: -5px;
      height: 10px;
      display: flex;
      .no-active {
    
        background: #CACACA;
      }
      .active {
    
        background: #9CBDE6;
      }
  }
  .today-container {
    
     height: 16px;
     display: flex;
    .before {
    
      // background: #f60;
    }
    .triangle {
    
      margin-left: -6px;
      width: 12px;
      height: 12px;
      box-sizing: border-box;
      border-top:  6px solid transparent;
      border-left:  6px solid transparent;
      border-right:  6px solid transparent;
      border-bottom:  6px solid rgb(0, 0, 0);
    }
    .text {
    
      margin-left: 4px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #000000;
      letter-spacing: 0;
      font-weight: 400;
    }
  }
  .package-container {
    
    height: 24px;
    margin-top: 9px;
    display: flex;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0;
    font-weight: 400;
    &:first-child {
    
      margin-top: 19px;
    }
    .content-container {
    
      flex: 1;
      width: 2px;
      line-height: 24px;
      padding-left: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow:ellipsis;
      background: #455EEC;
      .title {
    
        span:last-child {
    
        margin-left: 8px;
      }
      }
    }
  }
}
</style>