uniapp、vue实现时间轴和刻度尺显示相关行程

<template>
	<view class="time-line">
		<block v-for="(v, k) in timeNewArr">
			<view class="timelineItem" :key="k">
				<view class="timeItem">
					<view style="display: flex;width: 120rpx;">
						<view class="leftTime" :style="{ opacity: k%6 === 0 || v.isShow ? 1 : 0 }">
							<text>{{ v.time }}</text>
						</view>
						<view class="scale"><text :style="{ width: k%6 === 0 ? '16rpx' : '8rpx' }"></text></view>
					</view>
					<view class="line"></view>
					<view class="rightContent" :style="{ borderTop: k%6 === 0 ? '1px dashed #D9D9D9' : '' }">
						<block v-for="(m,n) in listInfo" :key="n" v-if="scheduleFmt(v, m)">
							<view v-if="v.time === m.startTime" class="tripItem"
								:style="{background: m.isClash ? '#ff0' : '', opacity: m.isClash ? 0.4 : 1}">
								{{ m.scheduleTitle }}</view>
						</block>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			// listInfo: {
			// 	type: Array,
			// 	default: () => []
			// }
		},
		data() {
			return {
				timeArr: [],
				timeNewArr: [],
				listInfo: [{
						"scheduleId": "366471527434162177",
						"leadUserId": 18375156497,
						"startScheduleDate": "2022-09-29 09:00",
						"endScheduleDate": "2022-09-29 10:00",
						"startTime": "09:10",
						"endTime": "12:50",
						"scheduleTitle": "省委常委会1",
						"scheduleContent": "研究疫情防控和复工复产",
						"scheduleAddr": "省委常委会议室",
						"scheduleStatus": 300,
						"scheduleType": 100,
						"trainType": 0,
						"isUrgentDiscuss": false,
						"isClash": false,
						"clashNum": 0
					},
					{
						"scheduleId": "367522536147259393",
						"leadUserId": 18375156497,
						"startScheduleDate": "2022-09-29 09:00",
						"endScheduleDate": "2022-09-29 12:00",
						"startTime": "09:20",
						"endTime": "10:20",
						"scheduleTitle": "临时会议2",
						"scheduleContent": "临时会议，工作安排",
						"scheduleAddr": "4楼2号会议室",
						"scheduleStatus": 100,
						"scheduleType": 100,
						"trainType": 0,
						"isUrgentDiscuss": false,
						"isClash": true,
						"clashNum": 0
					},
					{
						"scheduleId": "366471860604506113",
						"leadUserId": 18375156497,
						"startScheduleDate": "2022-09-29 10:30",
						"endScheduleDate": "2022-09-29 12:00",
						"startTime": "10:50",
						"endTime": "11:00",
						"scheduleTitle": "交易中心调研3",
						"scheduleContent": "市场交易情况",
						"scheduleAddr": "交易中心",
						"scheduleStatus": 300,
						"scheduleType": 500,
						"trainType": 0,
						"isUrgentDiscuss": true,
						"isClash": false,
						"clashNum": 0
					},
					{
						"scheduleId": "367525320485638145",
						"leadUserId": 18375156497,
						"startScheduleDate": "2022-09-29 12:00",
						"endScheduleDate": "2022-09-29 12:05",
						"startTime": "12:00",
						"endTime": "12:25",
						"scheduleTitle": "测试4",
						"scheduleContent": "测试",
						"scheduleAddr": "3楼6号会议室",
						"scheduleStatus": 300,
						"scheduleType": 100,
						"trainType": 0,
						"isUrgentDiscuss": false,
						"isClash": true,
						"clashNum": 1
					},
					{
						"scheduleId": "366472591017381889",
						"leadUserId": 18375156497,
						"startScheduleDate": "2022-09-29 14:30",
						"endScheduleDate": "2022-09-29 15:30",
						"startTime": "14:30",
						"endTime": "15:30",
						"scheduleTitle": "2022年第3次安全生产委员会5",
						"scheduleContent": "部署工作",
						"scheduleAddr": "4楼扇形会议室",
						"scheduleStatus": 100,
						"scheduleType": 100,
						"trainType": 0,
						"isUrgentDiscuss": false,
						"isClash": false,
						"clashNum": 0
					}
				]
			}
		},
		watch: {
			timeArr: {
				immediate: true,
				handler(arr) {
					this.timeNewArr = arr.map((v, k) => {
						this.listInfo.forEach((t, i) => {
							if (v.time === t.startTime) {
								this.timeArr[k].isShow = true
							}
						})
						return {
							...v
						}
					})
					console.log(this.timeNewArr, 'this.timeNewArr');
				}
			}
		},
		created() {
			this.timeFun()
		},
		methods: {
			scheduleFmt(v, m) {
				return v.time >= m.startTime && v.time < m.endTime
			},
			timeFun(minute = 5) {
				var seconds = minute * 60;
				let len = (60 * 24 * 60) / seconds; //数组长度
				for (var i = 0, total = 0, newArr = []; i < len; i++) {
					var h = parseInt(total / 3600),
						min = parseInt(total % 3600 / 60);
					let t = this.tateFmt(h) + ':' + this.tateFmt(min)
					if (t >= '08:30' && t < '18:30') {
						newArr.push({
							time: this.tateFmt(h) + ':' + this.tateFmt(min),
							value: i
						});
					}
					total += seconds;
				}
				this.timeArr = newArr
			},
			tateFmt(n) {
				return n < 10 ? '0' + n : n
			}
		}
	}
</script>

<style scoped lang="less">
	.time-line {
		padding-bottom: 120rpx;

		.timelineItem {
			height: 28rpx;

			.timeItem {
				display: flex;

				.leftTime {
					width: 100%;
					text-align: right;
					font-size: 24rpx;
					color: #999999;
					margin-right: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.scale {
					width: 20rpx;
					display: flex;
					justify-content: right;
					text-align: right;

					text {
						border-top: 2rpx solid #c2c2c2;
					}
				}

				.line {
					width: 1rpx;
					background: rgba(204, 204, 204, 1);
					position: relative;
				}

				.rightContent {
					padding: 0 20rpx;
					flex: 1;
					height: 2rpx;

					.tripItem {
						height: 140rpx;
						padding: 20rpx 30rpx;
						box-sizing: border-box;
						background: rgba(255, 255, 255, 1);
						border-radius: 0rpx 4rpx, 4rpx, 0rpx;
						z-index: 1;
					}
				}
			}
		}
	}
</style>

效果图如下所示：