日期数组时间轴显示

• 日期数组时间轴显示

• 效果图
  

   <template>
      <div>
        <div class="time-line">
          <span>小时的时间轴显示</span>
          <div class="time-box">
            <div v-for="(item,index) in dateList"
                class="time-flex"
                :key="index">
              <div class="time-left"
                  style="font-size: 12px;">
                {{ item.date }}
              </div>
              <div class="time-main">
                <div class="time-bg">
                  <div :class="item.timeList && item.timeList.length > 0 ? 'time-row' : ''"
                      v-for="(time,timeIndex) in item.timeList"
                      :style="getDistance(item,time)"
                      :key="timeIndex"></div>
                </div>
                <table>
                  <td v-for="(hour,tmpIndex) in 25"
                      :key="tmpIndex"
                      width="1">
                    <span style="font-size: 12px;"
                          v-if="[0,6,12,18,24].includes(tmpIndex)">
                      {{ tmpIndex }}:00
                    </span>
                  </td>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  
    <script lang="ts">
      import { Component, Vue } from "vue-property-decorator";
      @Component({ name: "", components: {} })
      export default class extends Vue {
  
        dateList = [
          {
            date: "8/26(Mon)",
            today: "2024-08-26",
            timeList: [
              {
                start: "2024-08-26 08:30",
                end: "2024-08-26 11:00",
              },
              {
                start: "2024-08-26 22:30",
                end: "2024-08-26 24:00",
              },
            ],
          },
          {
            date: "8/27(Tue)",
            today: "2024-08-27",
            timeList: [
              {
                start: "2024-08-27 04:00",
                end: "2024-08-27 06:00",
              },
              {
                start: "2024-08-27 13:30",
                end: "2024-08-27 15:30",
              },
            ],
          },
          {
            date: "8/28(Wed)",
            today: "2024-08-28",
            timeList: [],
          },
          {
            date: "8/29(Thu)",
            today: "2024-08-29",
            timeList: [],
          },
          {
            date: "8/30(Fn)",
            today: "2024-08-30",
            timeList: [],
          },
          {
            date: "8/31(Sat)",
            today: "2024-08-31",
            timeList: [],
          },
          {
            date: "9/1(Sun)",
            today: "2024-09-01",
            timeList: [],
          },
        ];
        getDistance(item, time) {
          // 计算left
          const tmpLeft = this.$moment(time.start).diff(item.today, "m"); // 传入的时间与固定时间的时间差
          const diffTime = (25 - 0) * 60; // 总分钟的时间差
          const left = (tmpLeft / diffTime) * 100 + "%"; // 时间差除以总分钟等于到左边的距离
          const tmpWidth = this.$moment(time.end).diff(time.start, "m"); // 传入的结束时间-传入的开始时间
          const width = (tmpWidth / diffTime) * 100 + "%"; // 占用的宽度
          return { left: left, width: width };
        }
      }
    </script>
  
    <style lang="scss" scoped>
      .time-line {
        width: 100%;
        box-sizing: border-box;
        .time-box {
          width: 100%;
          .time-bg {
            position: relative;
            width: 100%;
            height: 15px;
            background: #eee;
            border-radius: 20px;
            .time-row {
              position: absolute;
              left: 0px;
              top: 0;
              bottom: 0;
              width: 50px;
              height: 15px;
              background: pink;
              border-radius: 20px;
            }
          }
        }
  
        table {
          width: 100%;
          table-layout: fixed;
          td {
            background: yellowgreen;
          }
        }
      }
      .time-flex {
        display: flex;
        width: 100%;
        align-items: center;
        .time-left {
          width: 20px;
        }
        .time-main {
          width: calc(100% - 20px);
        }
      }
    </style>