question 1: there are dots if you realize the intersection of working hours and vertical axis
question 2: some working hours will be divided into two periods if they cross dates (for example, 18:00 to 3 a.m. on the 12th is equivalent to 18:00-0:00 on the 12th, 0:00 to 03:00 on the 13th)

the data returned is in the following format:

scheduleTime:[
        {date:"2018-07-10", startDate:"00:00", endDate:"1:00", kt:0},
        {date:"2018-07-10", startDate:"10:30", endDate:"12:00", kt:0},
        {date:"2018-07-10", startDate:"12:30", endDate:"18:00", kt:0},
        {date:"2018-07-11", startDate:"6:00", endDate:"6:50", kt:0},
        {date:"2018-07-11", startDate:"09:30", endDate:"11:00", kt:0},
        {date:"2018-07-12", startDate:"6:00", endDate:"12:50", kt:0},
        {date:"2018-07-13", startDate:"09:30", endDate:"11:00", kt:0}
      ]

<template>
  <div id="app">
    <div id="box">
      <div class="date" v-for="(item, index) in this.transformTimeArr" :key="index">
        <!-- 
{{this.currentDate.date}}
 -->
        
{{dateArr[index]}}
        <div class="time">
          <span class="cross" v-for="(d, i) in item[dateArr[index]]" :key="i" :style="{ left: d.startDate, right: d.endDate }"></span>
          <!--  -->
          <span class="column" v-for="(d, x) in 24" :style="{ left: 4*d + "%"}" :key="x">
            <!-- <i>{{transformTime(x)}}</i> -->
          </span>
        </div>
         <div class="upDown">aaa</div>
      </div>
    </div>
   
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return{
      newTimeArray: [], // 
      transformTimeArr: [], // 
      scheduletimeObject: {},
      dateArr: [], // 
      scheduleTime:[
        {date:"2018-07-10", startDate:"00:00", endDate:"1:00", kt:0},
        // {date:"2018-07-10", startDate:"10:30", endDate:"12:00", kt:0},
        // {date:"2018-07-10", startDate:"12:30", endDate:"18:00", kt:0},
        // {date:"2018-07-11", startDate:"6:00", endDate:"6:50", kt:0},
        // {date:"2018-07-11", startDate:"09:30", endDate:"11:00", kt:0},
        // {date:"2018-07-12", startDate:"6:00", endDate:"12:50", kt:0},
        // {date:"2018-07-13", startDate:"09:30", endDate:"11:00", kt:0}
      ]
    }
  },
  mounted(){
    this.scheduleTime.map((item, index) => {
      // 
      let obj = {
        "date": item.date,
        "startDate": ((item.startDate.split(":")[0]*60 + item.startDate.split(":")[1])/1440).toFixed(2) + "%",
        "endDate": 100 - ((item.endDate.split(":")[0]*60 + item.endDate.split(":")[1])/1440).toFixed(2) + "%",
        "kt": item.kt
      }
      this.newTimeArray.push(obj);
    })
    console.log(this.newTimeArray);
    this.transform()
  },
  methods:{
    transform() {
    let count = -1;
    this.newTimeArray.map((v,i) => {
      if(this.scheduletimeObject[v.date] || this.scheduletimeObject[v.date] == 0){
        console.log(!Array.isArray(this.transformTimeArr[this.scheduletimeObject[v.date]][v.date]),"--------");
        if(!Array.isArray(this.transformTimeArr[this.scheduletimeObject[v.date]][v.date])){
          this.transformTimeArr[this.scheduletimeObject[v.date]][v.date] = [
            this.transformTimeArr[this.scheduletimeObject[v.date]][v.date],
            {
                startDate:v.startDate,
                endDate:v.endDate,
                kt:v.kt
            }
          ]
        }else{
          this.transformTimeArr[this.scheduletimeObject[v.date]][v.date] = [
            ...this.transformTimeArr[this.scheduletimeObject[v.date]][v.date],
            {
                startDate:v.startDate,
                endDate:v.endDate,
                kt:v.kt
            }
          ]
        }
      }else{
        countPP;
        this.dateArr.push(v.date);
        this.scheduletimeObject[v.date] = count;
        this.transformTimeArr.push( {
          [v.date]:[{
            startDate:v.startDate,
            endDate:v.endDate,
            kt:v.kt
          }]
        })
      }
    })
    console.log(this.dateArr);
    console.log(this.scheduletimeObject);
    console.log(this.transformTimeArr);
    },
    transformTime(value){
      return value + ":00"
    }
  }
}
</script>
<style>
html,body{
  margin:0;
  padding: 0
}
.box{
  width: 100%;
  height: 80px; 
}
.date{
  height: 50px; 
}
.date p{
  line-height: 40px;
  padding: 0;
  margin: 0;
  height: 40;
  float: left;
  width: 3.3%
}
.time{
  height: 100%; 
  width: 92.7%;
  background: -sharp1b527d;
  position:relative;
  float: left;
  
}
.time span{
  position: absolute;
  height: 3px;
  display: inline-block;
  margin-top: 20px;
}
.time .cross {
  background: white;
}
.time .column {
  display: inline-block;
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  margin-top: 0;
  font-size: 12px;
  background: -sharp777;
}
.time .column i {
  display: inline-block;
  width: 32px;
  position: absolute;
  bottom: -15px;
  font-style: normal;
}
.upDown{
  width: 4%;
  height: 100%;
}
</style>