VUE-任务进程（时间轴）

VUE-任务进程（时间轴）

	最近，
	废话不多说，上图上代码

进程Demo图

代码片

// GanttProgress.vue
<template>
  <div class="divMain">
    <GanttChartHeader
      v-bind:style="{ width: width + 'px', height: '50px' }"
      v-bind:colQty="colQty"
      v-bind:mainwidth="width"
      v-bind:offSetColQty="offSetColQty"
    ></GanttChartHeader>
    <div style="width: 100%; height: 840px">
      <div class="divScrollBar">
        <el-scrollbar class="testt" style="height: 100%">
          <div
            v-for="(room, index) in roomsCount"
            :key="room.id"
            v-bind:style="{
              height: '50px',
              'background-color': index % 2 === 0 ? '#E7F3F6' : '#fff',
            }"
          >
            <GanttBarItem
              v-bind:itemNo="room.id"
              v-bind:roomTasks="room.roomTasks"
              v-bind:offSetColQty="offSetColQty"
              v-bind:nowTimeWidth="nowTimeWidth"
            ></GanttBarItem>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

源代码

链接: link.

备注：该demo遗留问题：超出工作时间的任务显示。该版本Demo中时间轴固定不变，超出时间轴部分不显示