vue实现时间进度条，可以封成组件

最近工作需求做一个时间条，如下图。是在uniapp小程序项目中做的，记录一下思路和成果，本人脑子不聪明，如果有更好的方法欢迎告诉我。

1.思路：刚开始接到这个需求想到的就是用时间段数组定位来实现。每一个时间段都是一个数组，多次遍历定位到背景的bar上。

2.template代码

<view class="time_bar">
						<view class="flex align-center justify-between">
							<view v-for="(items) in timeBarList" :key="items" class="time_bar_num">{{items}}
							</view>
						</view>
						<view class="time_bar_bar">
							<view class="time_bar_piece" v-for="(itemss,indexss) in item.showTimeArr" :key="indexss"
								:style="{ width: itemss.duringTime, left: itemss.passTime }">
							</view>
						</view>
					</view>

下划线的class是我自己定义的，其他的flex等class是使用了color-ui；

3.css代码

.time_bar {
				margin-top: 26rpx;
				overflow: auto;
 
				.time_bar_num {
					width: 21rpx;
					height: 20rpx;
					line-height: 20rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #C7C7C7;
					// text-align: center;
				}
 
				.time_bar_bar {
					width: 653rpx;
					height: 20rpx;
					background: #D2E7FF;
					border-radius: 6rpx;
					margin-top: 9rpx;
					position: relative;
					overflow: hidden;
 
					.time_bar_piece {
						position: absolute;
						top: 0;
						background-color: #1A84FF;
						height: 20rpx;
					}
				}
			}

4.js代码

getList(){
const morningTime = new Date();
					//开始时间需要在这改
					morningTime.setHours(7, 0, 0, 0); // 设置小时、分钟、秒和毫秒为0
					this.meetingList.forEach((v) => {
						if (Array.isArray(v.timeArr) && v.timeArr.length > 0) {
							if (!v.showTimeArr) {
								v.showTimeArr = [];
							}
							// 计算每个数组中第一个时间与当前时间的差值（以小时为单位）  
							v.timeArr.forEach((timeArray) => {
								const startTime = timeArray[0].replace(/\-/g, '/');
								const endTime = timeArray[1].replace(/\-/g, '/');
								const firstTime = new Date(startTime);
								const secondTime = new Date(endTime);
								let passTime = (firstTime - morningTime) / (1000 * 60 * 60); // 转换为小时  
								let duringTime = (secondTime - firstTime) / (1000 * 60 * 60); // 转换为小时  
								//改完时间这里需要改用100除以时间段多少个
								passTime = (passTime * 667) / 100
								duringTime = (duringTime * 667) / 100
								v.showTimeArr.push({
									"passTime": `${passTime}%`,
									"duringTime": `${duringTime}%`
								})
							});
						}
					})
				}
 
}

需要的数据格式是 [[],[],[],[],[],[],[],[],[]] 背面背景的条的刻度、开始时间、结束时间也可以后台配置。我这里都写死的。