factory_web/src/components/GanttComponent.vue

<template>
	<div ref="ganttContainer"></div>
</template>
<script>
import { gantt } from "dhtmlx-gantt";
export default {
	props: {
		tasks: {
			type: Object,
			default() {
				return {
					data: [],
					links: [],
				};
			},
		},
		start_date: {
			type: String,
			default() {
				return "";
			},
		},
		end_date: {
			type: String,
			default() {
				return "";
			},
		},
	},
	mounted: function () {
		let that = this;
		gantt.clearAll(); // 清空之前的配置
		gantt.i18n.setLocale("cn"); // 设置中文
		gantt.config.date_format = "%Y-%m-%d";
		gantt.config.date_grid = "%Y/%m/%d";
		gantt.config.readonly = true; // 设置中文
		gantt.config.autosize = true; //自适应尺寸
		gantt.plugins({ tooltip: true });
		gantt.config.bar_height = 20; //task高度
		gantt.config.duration_unit = "day"; // 设置时间单位为天
		//今天标志
		// gantt.plugins({marker: true});
		// gantt.addMarker({start_date: new Date(),text: '今日'});

		//工作日设置
		// gantt.config.work_time = true;
		// gantt.setWorkTime({ hours:["20:00-20:00"] });
		// gantt.setWorkTime({ day:7, hours:false });
		// gantt.setWorkTime({ hours:["0-24"] });
		// gantt.config.start_date = new Date(2023, 9, 1);
		// gantt.config.end_date = new Date(2023, 9, 10);
		//更改父项图标
		// gantt.templates.grid_folder = (item) => { return "" }
		//更改子项图标
		// gantt.templates.grid_file = (item) => { return "" }
		gantt.config.columns = [
			{
				name: "number",
				label: "任务编号",
				tree: true,
				width: "200",
				align: "left",
			},
			{
				name: "material_name",
				label: "产品名称",
				width: "70",
				align: "left",
			},
			{
				name: "material_specification",
				label: "规格",
				width: "70",
				align: "left",
			},
			{
				name: "material_model",
				label: "型号",
				width: "70",
				align: "left",
			},
			{ name: "count", label: "任务量", width: "50", align: "center" },
		];
		gantt.attachEvent("onGanttReady", function () {
			gantt.templates.tooltip_text = function (start, end, task) {
				let endTime = end.getTime() - 24 * 60 * 60 * 1000;
				let end_date = new Date(endTime);
				return (
					task.number +
					"<br/>任务量：" +
					task.count +
					"<br/>当日产量：" +
					task.count_real +
					"<br/>合格数：" +
					task.count_ok +
					"<br/>开工时间：" +
					gantt.templates.tooltip_date_format(start) +
					"<br/>完工时间：" +
					gantt.templates.tooltip_date_format(end_date)
				);
			};
		});
		gantt.attachEvent("onTaskClick", async function (id, e) {
			var task = gantt.getTask(id);
			console.log(task);
			if (task.type == "utask") {
				that.$API.pm.mtask.list
					.req({
						utask: id,
						page: 0,
						ordering: "start_date,mgroup__process__sort",
					})
					.then((res) => {
						let data = [];
						res.forEach((item) => {
							let obj = {};
							obj.id = item.id;
							obj.type = "task";
							obj.parent = id;
							obj.number = item.number;
							obj.text = item.mgroup_name;
							obj.state = item.state;
							obj.start = item.start_date;
							obj.start_date = item.start_date;
							let oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
							let firstDate = new Date(item.start_date);
							let secondDate = new Date(item.end_date);
							let timeDiff = Math.abs(
								secondDate.getTime() - firstDate.getTime()
							);
							let daysDiff = Math.ceil(timeDiff / oneDay);
							console.log("daysDiff", daysDiff + 1);
							obj.duration = daysDiff + 1;
							obj.progress = item.count_real / item.count;
							obj.count = item.count;
							obj.count_ok = item.count_ok;
							obj.count_real = item.count_real;
							obj.count_notok = item.count_notok;
							obj.state = item.state;
							obj.utask = item.utask;
							obj.mgroup_name = item.mgroup_name;
							data.push(obj);
						});
						// 数据解析:将数据解析到gantt列数据中

						let childTasks = data;
						gantt.parse({ data: childTasks });
						// 刷新数据
						gantt.refreshData();
					});
			}
		});
		//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
		// gantt.config.autosize = true;
		// gantt.config.open_split_tasks = true;

		// gantt.config.scale_unit = "day";
		// gantt.config.step = 1;
		// gantt.config.date_scale = " %Y/%m/%d";
		//时间轴样式
		var yearScaleCss = function () {
			return "yearScaleStyle";
		};
		var monthScaleCss = function () {
			return "monthScaleStyle";
		};
		gantt.config.scales = [
			{ unit: "year", step: 1, format: " %Y年", css: yearScaleCss },
			{ unit: "day", step: 1, format: " %m月%d日", css: monthScaleCss },
		];
		gantt.config.duration_step = 1;
		// 初始化甘特图
		gantt.init(this.$refs.ganttContainer);
		gantt.parse(this.$props.tasks);
	},
	beforeDestoryed: function () {
		console.log("beforeDestroyed");
		gantt.clearAll();
	},
	// methods:{
	//     setBarColor() {
	//         this.tasks.map(v => {
	//         var newObj = {};
	//         if (v.status === "CJ") {
	//             newObj = Object.assign(v, {
	//             'color': '#aaa8eb'
	//             });
	//         } else if (v.status === "SX") {
	//             newObj = Object.assign(v, {
	//             'color': '#7cbbff'
	//             });
	//         }
	//         return newObj;
	//         });
	//     },
	// },
};
</script>
<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
.gantt_task_line {
	background-color: #c7c9c9;
	border: 1px solid #adb1b2;
}
.gantt_task_progress {
	color: #148dff;
}
</style>