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