vue 时间百分比进度条

html结构

<div class="floor_list_container">
              <div class="floor_list_item" v-for="(item, index) in floorMeetingList" :key="index">
                <!-- 颜色 -->
                <!-- <i :style="{ background: item.color }"></i> -->
                <i :style="{ width: '5px', height: '100%', background: colorList[index] }"></i>
                <div class="scale">
                  <div class="scale_text">
                    <span>{{ item.floor }} {{ item.name }}</span>
                    <span>{{ item.time }}</span>
                  </div>
                  <!-- 时间-宽度比例 -->
                  <div class="scale_bar">
                    <a-tooltip :key="idx" v-for="(bar, idx) in item.timeList">
                      <template slot="title"> {{ bar.value }} </template>
                      <div
                        class="scale_bar_item"
                        :style="{
                          height: '20px',
                          cursor: 'pointer',
                          width: `${bar.percentage}%`,
                          background: bar.status === 1 ? '#999999' : bar.status === 2 ? '#f2c737' : '#7abbff',
                        }"
                      ></div>
                    </a-tooltip>
                  </div>
                  <div class="scale_bar_item_tip">
                    <span style="left: -18px">00:00</span>
                    <span style="left: calc(33.3% - 18px)">08:00</span>
                    <span style="left: calc(66.6% - 18px)">16:00</span>
                    <span style="left: calc(100% - 18px)">24:00 </span>
                  </div>
                </div>
                  <!-- 按钮 -->
                <div class="button">
                  <a-button @click="handleMeetingClick(item)" type="primary" icon="plus">预约</a-button>
                </div>
              </div>
            </div>

数据结构：

// 楼层列表数据 status: 1为不可预约 2为已预约 3为可预约
      floorMeetingList: [
        {
          floor: '1楼',
          name: '党员会议室',
          time: '00: 00 ~ 23: 59',
          timeList: [
            {
              status: 1,
              value: '00:00-08:00',
            },
            {
              status: 2,
              value: '08:00-10:40',
            },
            {
              status: 2,
              value: '10:40-14:00',
            },
            {
              status: 2,
              value: '14:00-16:00',
            },
            {
              status: 3,
              value: '16:00-24:00',
            },
          ],
        },
        {
          floor: '1楼',
          name: '大会议室',
          time: '00: 00 ~ 23: 59',
          timeList: [
            {
              status: 1,
              value: '00:00-08:00',
            },
            {
              status: 2,
              value: '08:00-10:30',
            },
            {
              status: 3,
              value: '10:30-11:00',
            },
            {
              status: 2,
              value: '11:00-14:00',
            },
            {
              status: 3,
              value: '14:00-24:00',
            },
          ],
        },
        {
          floor: '2楼',
          name: '会议室',
          time: '00: 00 ~ 23: 59',
          timeList: [
            {
              status: 1,
              value: '00:00-08:00',
            },
            {
              status: 2,
              value: '08:00-15:45',
            },
            {
              status: 2,
              value: '15:45-17:00',
            },
            {
              status: 3,
              value: '17:00-24:00',
            },
          ],
        },
        {
          floor: '3楼',
          name: '会议室',
          time: '00: 00 ~ 23: 59',
          timeList: [
            {
              status: 1,
              value: '00:00-08:00',
            },
            {
              status: 2,
              value: '08:00-13:30',
            },
            {
              status: 3,
              value: '13:30-24:00',
            },
          ],
        },
        {
          floor: '4楼',
          name: '会议室',
          time: '00: 00 ~ 23: 59',
          timeList: [
            {
              status: 1,
              value: '00:00-08:00',
            },
            {
              status: 2,
              value: '08:00-10:00',
            },
            {
              status: 3,
              value: '10:00-12:00',
            },
            {
              status: 2,
              value: '12:00-24:00',
            },
          ],
        },
      ],

 数据处理：

this.floorMeetingList.forEach((item, index) => {
      item.timeList.forEach((i, idx) => {
        // 时间
        let [startTime, endTime] = i.value.split('-')
        // 小时 分钟
        let [startHour, startMinute] = startTime.split(':')
        let [endHour, endMinute] = endTime.split(':')

        // 将分钟处理成百分比数值 例：60分钟为100
        startMinute = (startMinute * 100) / 60
        endMinute = (endMinute * 100) / 60

        // 重新拼接为完整时间
        startTime = `${startHour}.${Number(startMinute).toFixed(0)}`
        endTime = `${endHour}.${Number(endMinute).toFixed(0)}`

        // 24小时
        const totalHours = 24
        // 时间间隔，即每个时间段的小时数
        const timeInterval = 1

        // 计算时间区间占24小时比例
        let percentage = (((endTime - startTime) / timeInterval) * 100) / totalHours
        i.percentage = percentage.toFixed(1)
      })
    })