From 149f9857072b74f32fb9e9f8852cd42bbe3fef33 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 26 Mar 2024 09:31:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=94=9F=E4=BA=A7=E7=AE=A1=E7=90=866?=
 =?UTF-8?q?=E3=80=817=E3=80=8110=E8=BD=A6=E9=97=B4gantt=E9=9A=8F=E7=9D=80?=
 =?UTF-8?q?=E4=B8=8A=E9=9D=A2=E7=9A=84=E8=A1=A8=E6=A0=BC=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=8F=98=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GanttComponent.vue | 340 +++++++++++++++++-------------
 src/views/pm/utask_dept10.vue     |   6 +-
 src/views/pm/utask_dept6.vue      |   8 +-
 src/views/pm/utask_dept7.vue      |  15 +-
 4 files changed, 205 insertions(+), 164 deletions(-)

diff --git a/src/components/GanttComponent.vue b/src/components/GanttComponent.vue
index 587b7f6f..cc6b0865 100644
--- a/src/components/GanttComponent.vue
+++ b/src/components/GanttComponent.vue
@@ -1,164 +1,200 @@
 <template>
-    <div ref="ganttContainer"></div>
+	<div ref="ganttContainer"></div>
 </template>
 <script>
-import { gantt } from 'dhtmlx-gantt';
+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: '今日'});
+	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;
-                    obj.duration = 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.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;
+							obj.duration = 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列数据中
 
-        })
-        //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
-        // gantt.config.autosize = true;
-        // gantt.config.open_split_tasks = true;
+						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);
-    },
-    // 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;
-    //         });
-    //     },
-    // },
-}
+		// 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_line {
+	background-color: #c7c9c9;
+	border: 1px solid #adb1b2;
 }
-.gantt_task_progress{
-    color: #148dff;
+.gantt_task_progress {
+	color: #148dff;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/pm/utask_dept10.vue b/src/views/pm/utask_dept10.vue
index e2a1d8e9..9f56047c 100644
--- a/src/views/pm/utask_dept10.vue
+++ b/src/views/pm/utask_dept10.vue
@@ -201,6 +201,7 @@
 				class="left-container"
 				v-if="ganntVisit"
 				:tasks="tasks"
+				:key="timeStamp"
 				:start_date="start_date"
 			>
 			</GanttComponent>
@@ -247,6 +248,7 @@ export default {
 			dateValue: "",
 			apiUtask: null,
 			apiObj: null,
+			timeStamp: "",
 			ganntVisit: true,
 			visibleRecord: false,
 			currentDept: { id: 0 },
@@ -289,7 +291,8 @@ export default {
 			let data = [];
 			that.ganntVisit = false;
 			that.tasks.data = [];
-			console.log("tableData", tableData);
+			let date = new Date();
+			that.timeStamp = date.getTime();
 			if (tableData.length > 0) {
 				tableData.forEach((item) => {
 					let start_date = item.start_date;
@@ -328,7 +331,6 @@ export default {
 			that.tasks.data = data;
 			that.ganntVisit = true;
 			gantt.parse(that.tasks);
-			// 刷新数据
 			gantt.refreshData();
 		},
 		getGantt() {
diff --git a/src/views/pm/utask_dept6.vue b/src/views/pm/utask_dept6.vue
index 30d526c2..49f25b72 100644
--- a/src/views/pm/utask_dept6.vue
+++ b/src/views/pm/utask_dept6.vue
@@ -212,6 +212,7 @@
 						class="left-container"
 						v-if="ganntVisit"
 						:tasks="tasks"
+						:key="timeStamp"
 						:start_date="start_date"
 					>
 					</GanttComponent>
@@ -258,6 +259,7 @@ export default {
 				start_date: "",
 				end_date: "",
 			},
+			timeStamp: "",
 			ganntVisit: true,
 			dateValue: "",
 			apiUtask: null,
@@ -304,7 +306,8 @@ export default {
 			let data = [];
 			that.ganntVisit = false;
 			that.tasks.data = [];
-			console.log("tableData", tableData);
+			let date = new Date();
+			that.timeStamp = date.getTime();
 			if (tableData.length > 0) {
 				tableData.forEach((item) => {
 					let start_date = item.start_date;
@@ -341,9 +344,8 @@ export default {
 				});
 			}
 			that.tasks.data = data;
-			that.ganntVisit = true;
 			gantt.parse(that.tasks);
-			// 刷新数据
+			that.ganntVisit = true;
 			gantt.refreshData();
 		},
 		getGantt() {
diff --git a/src/views/pm/utask_dept7.vue b/src/views/pm/utask_dept7.vue
index d41a8c9a..52fe466a 100644
--- a/src/views/pm/utask_dept7.vue
+++ b/src/views/pm/utask_dept7.vue
@@ -45,7 +45,6 @@
 						stripe
 						:params="paramsUtask"
 						:query="queryUtask"
-						@row-click="rowclick"
 						@selection-change="handleSelectionChange"
 						@dataChange="updateCount"
 					>
@@ -233,6 +232,7 @@
 			<GanttComponent
 				class="left-container"
 				:tasks="tasks"
+				:key="timeStamp"
 				v-if="ganntVisit"
 				:start_date="start_date"
 			>
@@ -277,6 +277,7 @@ export default {
 			tasks: {
 				data: [],
 			},
+			timeStamp: "",
 			ganntVisit: true,
 			dateValue: [],
 			apiUtask: null,
@@ -300,6 +301,8 @@ export default {
 	},
 	mounted() {
 		this.initDept();
+		let date = new Date();
+		this.timeStamp = date.getTime();
 	},
 	methods: {
 		initDept() {
@@ -310,9 +313,7 @@ export default {
 					if (res.length == 1) {
 						that.currentDept = res[0];
 						that.paramsUtask.belong_dept = that.currentDept.id;
-						// that.paramsObj.belong_dept = that.currentDept.id;
 						that.apiUtask = that.$API.pm.utask.list;
-						// that.getGantt();
 					} else {
 						that.$message.error("未找到车间");
 					}
@@ -322,9 +323,10 @@ export default {
 			let that = this;
 			this.count = res.count;
 			let data = [];
-			that.ganntVisit = false;
 			that.tasks.data = [];
-			console.log("tableData", tableData);
+			that.ganntVisit = false;
+			let date = new Date();
+			that.timeStamp = date.getTime();
 			if (tableData.length > 0) {
 				tableData.forEach((item) => {
 					let start_date = item.start_date;
@@ -361,9 +363,8 @@ export default {
 				});
 			}
 			that.tasks.data = data;
-			that.ganntVisit = true;
 			gantt.parse(that.tasks);
-			// 刷新数据
+			that.ganntVisit = true;
 			gantt.refreshData();
 		},
 		utaskDepuse() {