uniapp、vue實現(xiàn)時間軸和刻度尺顯示相關(guān)行程

<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": "研究疫情防控和復(fù)工復(fù)產(chǎn)","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": "交易中心調(diào)研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次安全生產(chǎn)委員會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; //數(shù)組長度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>

效果圖如下所示：

?

總結(jié)

以上是生活随笔為你收集整理的uniapp、vue实现时间轴和刻度尺显示相关行程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。