甘特图Vue3 | 原生绘制

甘特图

vue3加原生三件套绘制，轻量且易扩展

源代码甘特图组件

<template><div class="gantt-container"><div class="gantt-table-wrapper"><table class="gantt-table"><thead><tr><th rowspan="2" style="width: 3%;">序号</th><th rowspan="2" style="width: 8%;">编号</th><th rowspan="2" style="width: 5%;">申请单位</th><th rowspan="2" style="width: 10%;">检修主题</th><th rowspan="2" style="width: 6%;">开始时间</th><th rowspan="2" style="width: 6%;">结束时间</th><th rowspan="2" style="width: 4%;">工期(天)</th><th :colspan="daysInMonth" class="month-header">{{ currentYear }}年{{ currentMonth }}月</th></tr><tr><th v-for="day in daysInMonth" :key="day" style="min-width: 20px; white-space: nowrap;">{{ day }}</th></tr></thead><tbody><tr v-for="(task, index) in tableData" :key="task.id" :title="`#工作内容\n${task['工作内容']}`"><td>{{ index + 1 }}</td><td>{{ task.bianhao }}</td><td>{{ task['申请单位'] }}</td><td :title="task.name" class="ellipsis">{{ task.name }}</td><td>{{ formatDate(task.start) }}</td><td>{{ formatDate(task.end) }}</td><td>{{ calculateDuration(task.start, task.end) }}</td><tdv-for="day in daysInMonth":key="day":class="{'highlight': isDateInRange(day, task.start, task.end),'first-day': isFirstDay(day, task.start),'last-day': isLastDay(day, task.end)}":style="{ color: (isFirstDay(day, task.start) || isLastDay(day, task.end)) ? 'white' : '' }">{{isFirstDay(day, task.start) ? formatDateMD(task.start) : (isLastDay(day, task.end) ? formatDateMD(task.end) : '')}}</td></tr></tbody></table></div></div>
</template><script setup>
import {computed, defineProps} from 'vue';
import {dayjs} from 'element-plus'
import * as XLSX from "xlsx-js-style";const props = defineProps({tableData: {type: Array,required: true},yearMonth: {type: String,required: true}
});// 当前月份处理
const currentYear = computed(() => parseInt(props.yearMonth.split('-')[0]));
const currentMonth = computed(() => parseInt(props.yearMonth.split('-')[1]));
const daysInMonth = computed(() => dayjs(`${currentYear.value}-${currentMonth.value}`).daysInMonth());// 日期格式化
const formatDate = (date) => dayjs(date).format('YYYY-MM-DD');
//日前格式化M-D
const formatDateMD = (date) => dayjs(date).format('M-D');
//计算工期，结束时间减去（day）开始时间+1
const calculateDuration = (start, end) => {const startDate = dayjs(start);const endDate = dayjs(end);return endDate.diff(startDate, 'day') + 1;
};// 判断日期是否在范围内
const isDateInRange = (day, start, end) => {const yearMonth = props.yearMonth.split('-');const currentDate = new Date(yearMonth[0], yearMonth[1] - 1, day);const startDate = new Date(start);const endDate = new Date(end);// 设置时间为0时0分0秒currentDate.setHours(0, 0, 0, 0);startDate.setHours(0, 0, 0, 0);endDate.setHours(0, 0, 0, 0);return currentDate >= startDate && currentDate <= endDate;
};// 判断是否是任务的第一天
const isFirstDay = (day, start) => {const startDate = dayjs(start);return startDate.date() === day && startDate.month() + 1 === currentMonth.value;
};// 判断是否是任务的最后一天
const isLastDay = (day, end) => {const endDate = dayjs(end);return endDate.date() === day && endDate.month() + 1 === currentMonth.value;
};
const exportToExcel = () => {const title = `甘特图${currentYear.value}年${currentMonth.value}月`const ws = XLSX.utils.aoa_to_sheet([[{v: title, t: "s", s: {alignment: {vertical: 'center', horizontal: 'center'}, font: {sz: 16, bold: true}}}],['序号', '编号', '申请单位', '检修主题', '开始时间', '结束时间', '工期(天)', ...Array.from({length: daysInMonth.value}, (_, i) => i + 1)],...props.tableData.map((task, index) => [index + 1,task.bianhao,task['申请单位'],task.name,formatDate(task.start),formatDate(task.end),calculateDuration(task.start, task.end),...Array.from({length: daysInMonth.value}, (_, day) =>isDateInRange(day + 1, task.start, task.end)? {v: isFirstDay(day + 1, task.start) ? formatDateMD(task.start) : (isLastDay(day + 1, task.end) ? formatDateMD(task.end) : ''),t: "s",s: {fill: {fgColor: {rgb: "0A938E"}},font: {color: {rgb: "FFFFFF"}},border: {top: {style: "thin"}, bottom: {style: "thin"}}}} : '')])]);const wb = XLSX.utils.book_new();ws['!cols'] = [{wch: 5}, // 序号{wch: 18}, // 编号{wch: 10}, // 申请单位{wch: 15}, // 检修主题{wch: 12}, // 开始时间{wch: 12}, // 结束时间{wch: 8},  // 工期(天)];ws["!merges"] = [{s: {r: 0, c: 0}, e: {r: 0, c: 6 + daysInMonth.value}},];for (let i = 8; i < 8 + daysInMonth.value; i++) {ws['!cols'].push({wch: 4});}XLSX.utils.book_append_sheet(wb, ws, '甘特图');XLSX.writeFile(wb, `甘特图${props.yearMonth}.xlsx`);
}
//暴露导出excel方法
defineExpose({exportToExcel
})
</script><style scoped>
.gantt-container {width: 100%;overflow-x: auto;
}.gantt-table {width: 100%;border-collapse: collapse;table-layout: fixed;
}.gantt-table th,
.gantt-table td {border: 1px solid #ddd;text-align: center;
}.month-header {background-color: #f2f2f2;font-weight: bold;
}.highlight {background-color: #0A938E;position: relative;padding: 10px 0;
}.highlight.first-day::before {position: absolute;left: 2px;color: white;
}.highlight.last-day::after {position: absolute;right: 2px;color: white;
}tbody tr:nth-child(even) {background-color: #f9f9f9;
}tbody tr:hover {background-color: #f1f1f1;
}.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
</style>

使用甘特图示例，二次封装成弹窗dialog

<template><el-dialogv-model="dialogVisible"title="月度甘特图-流转中"width="90%"draggable><div class="wh-100 container"><div class="query-box"><label style="font-weight: bold">编号</label><el-input v-model="queryParams.bianhao" size="small" clearable style="width: 150px;margin: 0 10px"placeholder="请输入编号"></el-input><label style="font-weight: bold">检修主题</label><el-input v-model="queryParams.topic" size="small" clearable style="width: 150px;margin: 0 10px"placeholder="请输入检修主题"></el-input><label style="font-weight: bold">工作内容</label><el-input v-model="queryParams.content" size="small" clearable style="width: 150px;margin: 0 10px"placeholder="请输入工作内容"></el-input><label style="font-weight: bold">申请单位</label><el-input v-model="queryParams.applyUnit" size="small" clearable style="width: 150px;margin: 0 10px"placeholder="请输入申请单位"></el-input><label style="font-weight: bold">审核处室</label><el-select v-model="queryParams.checkDep" placeholder="请选择" size="small" clearable style="width: 120px;margin: 0 10px"><el-optionv-for="item in dicCheckDepOption":key="item":label="item":value="item"/></el-select><label style="font-weight: bold">年月</label><el-date-pickerv-model="queryParams.month"type="month"@change="getList"value-format="YYYY-MM"style="width: 120px;margin: 0 10px"placeholder="选择年月"/><el-button type="primary" size="small" :icon="Search" @click="getList" :loading="loading">搜索</el-button><el-button type="primary" size="small" :icon="Download" @click="ExportExcelGantt" :loading="loadingDown">导出excel</el-button></div><div class="query-table"><gantt ref="ganttRef" v-loading="loading" :table-data="tableDataComputed" :year-month="queryParams.month"/></div></div></el-dialog>
</template><script setup>
import {computed, ref} from "vue";
import {monthlzz} from "@/api/monthFlow.js";
import gantt from "@/components/Gantt/index.vue"
import {Download, Search} from "@element-plus/icons-vue";
import {dayjs} from 'element-plus'
import {dicCheckDepOption} from "@/utils/dicc.js";
// 弹窗显示控制
const dialogVisible = ref(false)
const ganttRef = ref()const queryParams = ref({bianhao: '',applyUnit: '',checkDep:'',current: 1,size: 100,content: '',month: dayjs().add(1, 'month').format("YYYY-MM"),topic: '',total: 0
})
const loading = ref(false)
const loadingDown = ref(false)
const tableData = ref([])
//查询
const getList = (() => {loading.value = truemonthlzz(queryParams.value).then(res => {if (res.data) {tableData.value = res.data.recordsqueryParams.value.total = res.data.totalloading.value = false}})
})
getList()
// 打开弹窗
const openGanttDialog = () => {dialogVisible.value = truegetList() // 打开时自动查询
}const ExportExcelGantt = () => {loadingDown.value = trueganttRef.value.exportToExcel()loadingDown.value = false
}
const tableDataComputed = computed(() => {return tableData.value.map((item) => {return {id: item['business_id'],start: item['开工时间'],end: item['完工时间'],name: item['检修主题'],bianhao: item['编号'], ...item}})
});// 暴露方法给父组件
defineExpose({openGanttDialog
})
</script><style scoped>
.container {height: 600px;.query-box {display: flex;align-items: center;background-color: white;padding-left: 10px;width: 100%;height: 50px;}.query-table {width: 100%;height: calc(100% - 100px);overflow-y: scroll;}.query-page {display: flex;width: 100%;height: 50px;padding-left: 10px;background-color: #F1F4F6;}
}
</style>

前端导出甘特图为excel基于xlsx-js-style

第一步:安装xlsx-js-style

npm install xlsx-js-style

第二步:绘制表格

xlsx-js-style官网仓库xlsx-js-style
使用文档SheetJS 中文网

源代码

const exportToExcel = () => {const title = `甘特图${currentYear.value}年${currentMonth.value}月`const ws = XLSX.utils.aoa_to_sheet([[{v: title, t: "s", s: {alignment: {vertical: 'center', horizontal: 'center'}, font: {sz: 16, bold: true}}}],['序号', '编号', '申请单位', '检修主题', '开始时间', '结束时间', '工期(天)', ...Array.from({length: daysInMonth.value}, (_, i) => i + 1)],...props.tableData.map((task, index) => [index + 1,task.bianhao,task['申请单位'],task.name,formatDate(task.start),formatDate(task.end),calculateDuration(task.start, task.end),...Array.from({length: daysInMonth.value}, (_, day) =>isDateInRange(day + 1, task.start, task.end)? {v: isFirstDay(day + 1, task.start) ? formatDateMD(task.start) : (isLastDay(day + 1, task.end) ? formatDateMD(task.end) : ''),t: "s",s: {fill: {fgColor: {rgb: "0A938E"}},font: {color: {rgb: "FFFFFF"}},border: {top: {style: "thin"}, bottom: {style: "thin"}}}} : '')])]);const wb = XLSX.utils.book_new();ws['!cols'] = [{wch: 5}, // 序号{wch: 18}, // 编号{wch: 10}, // 申请单位{wch: 15}, // 检修主题{wch: 12}, // 开始时间{wch: 12}, // 结束时间{wch: 8},  // 工期(天)];ws["!merges"] = [{s: {r: 0, c: 0}, e: {r: 0, c: 6 + daysInMonth.value}},];for (let i = 8; i < 8 + daysInMonth.value; i++) {ws['!cols'].push({wch: 4});}XLSX.utils.book_append_sheet(wb, ws, '甘特图');XLSX.writeFile(wb, `甘特图${props.yearMonth}.xlsx`);
}