uniapp-仿钉钉时间刻度轴(可进一步完善)

在Dcloud插件市场找到了与钉钉相类似的时间刻度轴,但是还是与我的需求不太相符,所以我进行了二开,但是还不是很完善,等有了时间会完善一下

附原作链接(感谢!!!):
DCloud 插件市场DCloud 插件市场https://ext.dcloud.net.cn/publisher?id=250496
以下就是我二开的代码了:

  引用组件:

<template>
  <view>
    <time-slot :nums="nums" :current-day="currentDay" :dis-time-arr="disTimeArr"></time-slot>
  </view>
</template>

<script>
import timeSlot from '@/components/time-slot/time-slot.vue'
export default {
  components: {
    timeSlot
  },
  data() {
    return {
      nums: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
      currentDay: '',
      disTimeArr: [
        { begin_time: '2023-11-23 09:12:00', end_time: '2023-11-23 12:14:00' },
        { begin_time: '2023-11-23 14:12:00', end_time: '2023-11-23 15:14:00' },
        { begin_time: '2023-11-24 10:12:00', end_time: '2023-11-24 12:14:00' },
        { begin_time: '2023-11-22 09:12:00', end_time: '2023-11-22 20:14:00' },
        { begin_time: '2023-11-25 09:12:00', end_time: '2023-11-25 12:14:00' },
        { begin_time: '2023-11-25 14:12:00', end_time: '2023-11-25 15:14:00' }
      ]
    }
  }
}
</script>

 

 time-slot.vue组件

<template>
  <view>
    <view class="all" :style="{backgroundColor: canColor}">
      <view class="leftLine" :style="leftTimeStyle"></view>
      <view v-for="(item,index) in disArr" :key="index" class="line" :style="item"></view>
      <view class="kedu">
        <view v-for="num in 24" :key="num" class="kedu-line"></view>
      </view>
    </view>
    <view class="nums">
      <view v-for="(num,index) in nums" :key="index" class="num">
        {{ num }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'time-slot',
  props: {
    leftColor: {
      type: String,
      default: '#E93A3A'
    },
    lineColor: {
      type: String,
      default: '#31B179'
    },
    canColor: {
      type: String,
      default: '#CAD1CE'
    },
    currentDay: {
      type: String,
      default: ''
    },
    beginTimeKey: {
      type: String,
      default: 'begin_time'
    },
    endTimeKey: {
      type: String,
      default: 'end_time'
    },
    disTimeArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    nums: {
      type: Array,
      default: () => {
        return [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]
      }
    }
  },
  data() {
    return {
      // nums: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]
    }
  },
  computed: {
    curDay() {
      return this.currentDay ? this.currentDay : this.getCurrentDay()
    },
    disArr() {
      const zeroTime = this.get_unix_time(this.curDay + ' 0' + this.nums[0] + ':00:00')
      const totalDuration = (this.nums[this.nums.length - 1] - this.nums[0]) * 36
      let leftWidth = 0
      let owerWidth = 0
      return this.disTimeArr.map(e => {
        leftWidth = this.get_unix_time(e[this.beginTimeKey]) - zeroTime
        owerWidth = this.get_unix_time(e[this.endTimeKey]) - zeroTime - leftWidth
        return {
          left: leftWidth / totalDuration + '%',
          width: owerWidth / totalDuration + '%',
          backgroundColor: this.lineColor
        }
      })
    },
    leftTimeStyle() {
      const newstr = (this.curDay + ' 0' + this.nums[0] + ':00:00').replace(/-/g, '/')
      let date = ''
      let redwidth = 0
      if (Number(this.get_unix_time(this.curDay + ' ' + this.nums[this.nums.length - 1] + ':00:00')) < Number(new Date().getTime().toString().substr(0, 10))) {
        date = new Date(newstr)
        redwidth = this.get_unix_time(this.curDay + ' ' + this.nums[this.nums.length - 1] + ':00:00') - date.getTime().toString().substr(0, 10)
        console.log(1)
      } else {
        date = new Date()
        console.log(2)
        redwidth = date.getTime().toString().substr(0, 10) - this.get_unix_time(this.curDay + ' 0' + this.nums[0] + ':00:00')
      }
      if (redwidth <= 0) {
        redwidth = 0
      }
      const totalDuration = (this.nums[this.nums.length - 1] - this.nums[0]) * 36
      console.log(redwidth)
      return {
        left: 0,
        width: redwidth / totalDuration + '%',
        backgroundColor: this.leftColor
      }
    }
  },
  methods: {
    get_unix_time(dateStr) {
      const newstr = dateStr.replace(/-/g, '/')
      const date = new Date(newstr)
      const timeStr = date.getTime().toString()
      return timeStr.substr(0, 10)
    },
    getCurrentDay() {
      const strFormat = (str) => {
        return str < 10 ? `0${str}` : str
      }
      const myDate = new Date()
      const y = myDate.getFullYear()
      const m = myDate.getMonth() + 1
      const d = myDate.getDate()
      return y + '-' + strFormat(m) + '-' + strFormat(d)
    }
  }
}
</script>

<style lang="scss" scoped>
.all {
  position: relative;
  width: 100%;
  height: 20rpx;
  background-color: #cad1ce;
  .line {
    position: absolute;
    height: 20rpx;
    width: 200rpx;
    top: 0;
    left: 50%;
    background-color: #31b179;
    z-index: 3;
  }
  .leftLine {
    position: absolute;
    height: 20rpx;
    // width: 200rpx;
    top: 0;
    left: 50%;
    background-color: #e93a3a;
    z-index: 2;
  }
}

.kedu {
  display: flex;
  position: absolute;
  align-items: flex-end;
  width: 100%;
  bottom: 0;
  left: 1px;
  z-index: 4;
  .kedu-line {
    width: 4.1%;
    height: 6rpx;
    border-right: 1px solid #fff;
  }
  .kedu-line:nth-child(2n) {
    height: 12rpx;
  }
}
.nums {
  width: 108.2%;
  display: flex;
  margin-left: -4.1%;
  .num {
    width: 8.2%;
    font-size: 12rpx;
    text-align: center;
  }
}
.tip {
  display: flex;
  .tip-block {
    display: flex;
    align-items: center;
    padding: 10rpx;
    justify-content: center;
    .tip-color {
      width: 20rpx;
      height: 20rpx;
    }
    .tip-text {
      margin-left: 10rpx;
      font-size: 22rpx;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #999999;
    }
  }
}
</style>