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中时间轴固定不变,超出时间轴部分不显示