基于vue3和element plus实现甘特图

<template>
	<div class="gantt">
		<div class="legend">
			<!-- 渲染图例 -->
			<i class="plan"></i>
			<label>计划</label>
			<i class="actuality"></i>
			<label>实际</label>
		</div>
		<el-table :data="data">
			<!-- 渲染表格 -->
			<el-table-column 
				v-for="(column, index) in columnsconfig" 
				:key="index"
				v-bind="column"
			></el-table-column>
			<el-table-column
				v-for="monthitem in monthdata"
				:key="monthitem.month"
				align="center"
				min-width="80"
				:prop="monthitem.month"
				:label="monthitem.month"
			>
				<template #header>
					<span>{{ monthitem.month.substring(5) + '月' }}</span>
				</template>
				<el-table-column
					v-for="day in monthitem.dayarray"
					:key="day"
					align="center"
					:width="50"
					:prop="day"
				>
					<template #header>
						<span>{{ day.substring(8) }}</span>
					</template>
					<template #default="scope">
						<i class="plan" v-if="showplan(scope)"></i>
						<i class="empty" v-else></i>
						<i class="actuality" v-if="showactuality(scope)"></i>
						<i class="empty" v-else></i>
					</template>
				</el-table-column>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineprops({
	data: {
		type: array,
		default: []
	},
	columnsconfig: {
		type: array,
		default: []
	},
	ganttconfig: {
		type: object,
		default: {
			planbegincolumn: 'planbegin',
			planendcolumn: 'planend',
			actualitybegincolumn: 'actualitybegin',
			actualityendcolumn: 'actualityend'
		}
	}
})

const monthdata = ref({})

const init = () => {
	let mindate = undefined
	let maxdate = undefined
	
	props.data.foreach((row, index) => {
		let current = new date(row[props.ganttconfig.planbegincolumn])
		if (mindate) {
			mindate = mindate.gettime() < current.gettime() ? mindate : current
		} else {
			mindate = current
		}
		current = new date(row[props.ganttconfig.planendcolumn])
		if (maxdate) {
			maxdate = maxdate.gettime() > current.gettime() ? maxdate : current
		} else {
			maxdate = current
		}
		current = props.ganttconfig.actualitybegincolumn || row[props.ganttconfig.actualitybegincolumn] ? new date(row[props.ganttconfig.actualitybegincolumn]) : undefined
		if (current) {
			mindate = mindate.gettime() < current.gettime() ? mindate : current
		}
		current = props.ganttconfig.actualityendcolumn || row[props.ganttconfig.actualityendcolumn] ? new date(row[props.ganttconfig.actualityendcolumn]) : undefined
		if (current) {
			maxdate = maxdate.gettime() > current.gettime() ? maxdate : current
		}
	})
	
	// 甘特图前后各放宽2天
	mindate = new date(mindate.gettime() - 2 * 24 * 60 * 60 * 1000)
	maxdate = new date(maxdate.gettime() + 2 * 24 * 60 * 60 * 1000)
	let current = new date(format(mindate))
	while(!isafter(current, maxdate)) {
		const month = formatyearmonth(current)
		const day = format(current)
		if (monthdata.value[month]) {
			monthdata.value[month].dayarray.push(day)
		} else {
			monthdata.value[month] = {
				month: month,
				dayarray: [day]
			}
		}
		// 加一天
		current = after(current)
	}
}
/**
 * 格式化 yyyy-mm-dd
 */
const format = (date) => {
	const day = string(date.getdate()).padstart(2, '0')
	return formatyearmonth(date) + '-' + day
}
/**
 * 格式化 yyyy-mm
 */
const formatyearmonth = (date) => {
	const year = date.getfullyear()
	const month = string(date.getmonth() + 1).padstart(2, '0')
	return year + '-' + month
}
/**
 * 加一天
 */
const after = (date) => {
	return new date(date.gettime() + 24 * 60 * 60 * 1000)
}
/**
 * date1是否大于等于date2
 */
const isafter = (date1, date2) => {
	return date1.gettime() >= date2.gettime()
}
/**
 * 显示计划进度
 */
const showplan = ({row, column}) => {
	const currentday = new date(column.property)
	const begin = new date(row[props.ganttconfig.planbegincolumn])
	const end = new date(row[props.ganttconfig.planendcolumn])
	return currentday.gettime() >= begin.gettime() && currentday.gettime() <= end.gettime()
}
/**
 * 显示实际进度
 */
const showactuality = ({row, column}) => {
	const currentday = new date(column.property)
	const begin = props.ganttconfig.actualitybegincolumn || row[props.ganttconfig.actualitybegincolumn] ? new date(row[props.ganttconfig.actualitybegincolumn]) : undefined
	const end = props.ganttconfig.actualityendcolumn || row[props.ganttconfig.actualityendcolumn] ? new date(row[props.ganttconfig.actualityendcolumn]) : undefined
	return begin && end && currentday.gettime() >= begin.gettime() && currentday.gettime() <= end.gettime()
}
init()
</script>

<style scoped>
	.plan {
		display: flex;
		width: calc(100% + 24px);
		height: 16px;
		background-color: limegreen;
		margin: 0 -12px;
	}
	.actuality {
		display: flex;
		width: calc(100% + 24px);
		height: 16px;
		background-color: yellow;
		margin: 0 -12px;
	}
	.empty {
		display: flex;
		width: calc(100% + 24px);
		height: 16px;
		margin: 0 -12px;
	}
	.legend {
		display: flex;
		line-height: 40px;
		flex-direction: row;
		justify-content: right;
		align-items: center;
		padding: 0 20px;
		
		* {
			margin: 0 5px;
		}
		
		i {
			width: 32px;
			height: 16px;
		}
	}
</style>

<script setup>
	import gantt from '@/components/gantt/index.vue'
	const data = ref([
		{
			title: '第一阶段',
			planbegin: '2022-01-01',
			planend: '2022-01-09',
			actualitybegin: '2022-01-02',
			actualityend: '2022-01-10'
		},
		{
			title: '第二阶段',
			planbegin: '2022-01-09',
			planend: '2022-01-15',
			actualitybegin: '2022-01-09',
			actualityend: '2022-01-18'
		}
	])
	const columnsconfig = ref([
		{
			label: '事项',
			prop: 'title',
			fixed: 'left',
			align: 'center',
			'min-width': 120
		},
		{
			label: '开始',
			prop: 'planbegin',
			fixed: 'left',
			align: 'center',
			'min-width': 120
		},
		{
			label: '结束',
			prop: 'planend',
			fixed: 'left',
			align: 'center',
			'min-width': 120
		}
	])
</script>

<template>
	<div>
		<gantt 
			:data="data" 
			:columnsconfig="columnsconfig" 
			:ganttconfig ="{
				planbegincolumn: 'planbegin',
				planendcolumn: 'planend',
				actualitybegincolumn: 'actualitybegin',
				actualityendcolumn: 'actualityend'
			}"
		/>
	</div>
</template>

<style scoped>
</style>