1.提交

loulijun2021

2023-02-15 557334431db09d85b7bb54e3f2a2226d46d323a5

 src/lib/v-gantt-chart/lib/components/time-line/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,175 @@
<template>
  <div
    class="gantt-timeline"
    :style="{'margin-left':-cellWidth/2+'px'}"
  >
    <div
      v-for="(day,index) in getDays"
      :key="index"
      class="gantt-timeline-block"
      :style="{width:getTimeScales(day).length*cellWidth+'px'}"
    >
      <div
        class="gantt-timeline-day "
        :style="heightStyle"
      >
        {{ day.format('YYYY-MM-DD') }}
        {{ getDayMy(day.format('YYYY-MM-DD')) }}
      </div>
      <div
        class="gantt-timeline-scale"
        :style="heightStyle"
        style="border-right: 1px solid #eee"
      >
        <div
          v-for="(hour,ind) in getTimeScales(day)"
          :key="ind"
          :style="cellWidthStyle"
        >
          {{ hour }}
          <!-- <span v-if="hour !='01' ">{{hour}}</span> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getBeginTimeOfTimeLine } from '../../utils/timeLineUtils.js'

const START_DAY = Symbol()
const MIDDLE_DAY = Symbol()
const END_DAY = Symbol()

function isSameDay(one, two) {
  return one.isSame(two, 'day')
}

export default {
  name: 'Timeline',

  props: {
    start: {
      type: dayjs
    },
    end: {
      type: dayjs
    },
    cellWidth: {
      type: Number
    },
    titleHeight: {
      type: Number
    },
    scale: {
      type: Number
    }
  },

  computed: {
    /**
     * å¤©åˆ—表
     * @returns {[dayjs]} è¯¥data中所有需要渲染的数据
     */
    getDays() {
      const temp = []
      let { start, end } = this

      for (; !isSameDay(start, end); start = start.add(1, 'day')) {
        temp.push(start)
      }
      temp.push(start)

      return temp
    },
    cellWidthStyle() {
      return {
        width: `${this.cellWidth}px`
      }
    },
    heightStyle() {
      return {
        height: this.titleHeight + 'px',
        'line-height': this.titleHeight + 'px'
      }
    }
  },

  methods: {
    // ç®—出星期
    getDayMy(day) {
      const weekArray = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六')
      return weekArray[new Date(day).getDay()]
    },
    /**
     * èŽ·å–时间刻度数组
     *
     * @param {dayjs} date
     * @returns {[string]} è¯¥data中所有需要渲染的数据
     */
    getTimeScales(date) {
      const { start, end } = this
      if (isSameDay(date, start)) {
        return this.generateTimeScale(START_DAY)
      } else if (isSameDay(date, end)) {
        return this.generateTimeScale(END_DAY)
      } else {
        return this.generateTimeScale(MIDDLE_DAY)
      }
    },
    /**
     * ç”Ÿæˆæ—¶é—´åˆ»åº¦æ•°ç»„
     *
     * @param {Symbol} type
     * @returns {[string]} è¯¥data中所有需要渲染的数据
     */
    generateTimeScale(type) {
      const totalblock = []
      const { start, end, scale } = this
      let a, b
      switch (type) {
        case START_DAY: // å’Œstart同一天
          a = getBeginTimeOfTimeLine(start, scale)
          // start和end同一天特殊处理
          if (isSameDay(start, end)) {
            b = end
          } else {
            b = start.endOf('day')
          }
          break
        case END_DAY: // å’Œend åŒä¸€å¤©
          a = end.startOf('day')
          b = end
          break
        case MIDDLE_DAY: // start和end中间的天
          a = start.startOf('day')
          b = start.endOf('day')
          break
        default:
          throw new TypeError('错误的计算类型')
      }
      while (!a.isAfter(b)) {
        // if (scale >= 60) {
        //   totalblock.push(a.format('HH'))
        // } else {
        totalblock.push(a.format('HH:mm'))
        // }
        a = a.add(scale, 'minute')
      }
      // console.log(1, totalblock)
      return totalblock
    }
  }
}
</script>
<style lang="scss" scoped>
.gantt-timeline-day {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  //background: rgb(245, 245, 245);
  background: #fff;
  color: #909399;
  font-size: 14px;
}
</style>