zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:生产管理6、7、10车间gantt随着上面的表格数据变动

This commit is contained in:
shijing 2024-03-26 09:31:58 +08:00
parent 70df6c3837
commit 149f985707
4 changed files with 205 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

340
src/components/GanttComponent.vue
View File

@ -1,164 +1,200 @@
<template> <template>
<div ref="ganttContainer"></div> <div ref="ganttContainer"></div>
</template> </template>
<script> <script>
import { gantt } from 'dhtmlx-gantt'; import { gantt } from "dhtmlx-gantt";
export default { export default {
props: { props: {
tasks: { tasks: {
type: Object, type: Object,
default() { default() {
return { return {
data: [], data: [],
links: [], links: [],
} };
} },
}, },
start_date: { start_date: {
type: String, type: String,
default() { default() {
return '' return "";
} },
}, },
end_date: { end_date: {
type: String, type: String,
default() { default() {
return '' return "";
} },
}, },
}, },
mounted: function () { mounted: function () {
let that = this; let that = this;
gantt.clearAll();// 清空之前的配置 gantt.clearAll(); // 清空之前的配置
gantt.i18n.setLocale('cn'); // 设置中文 gantt.i18n.setLocale("cn"); // 设置中文
gantt.config.date_format = "%Y-%m-%d"; gantt.config.date_format = "%Y-%m-%d";
gantt.config.date_grid = "%Y/%m/%d"; gantt.config.date_grid = "%Y/%m/%d";
gantt.config.readonly = true; // 设置中文 gantt.config.readonly = true; // 设置中文
gantt.config.autosize = true;//自适应尺寸 gantt.config.autosize = true; //自适应尺寸
gantt.plugins({ tooltip: true }); gantt.plugins({ tooltip: true });
gantt.config.bar_height = 20; //task高度 gantt.config.bar_height = 20; //task高度
gantt.config.duration_unit = "day";// 设置时间单位为天 gantt.config.duration_unit = "day"; // 设置时间单位为天
//今天标志 //今天标志
// gantt.plugins({marker: true}); // gantt.plugins({marker: true});
// gantt.addMarker({start_date: new Date(),text: '今日'}); // gantt.addMarker({start_date: new Date(),text: '今日'});
//工作日设置 //工作日设置
// gantt.config.work_time = true; // gantt.config.work_time = true;
// gantt.setWorkTime({ hours:["20:00-20:00"] }); // gantt.setWorkTime({ hours:["20:00-20:00"] });
// gantt.setWorkTime({ day:7, hours:false }); // gantt.setWorkTime({ day:7, hours:false });
// gantt.setWorkTime({ hours:["0-24"] }); // gantt.setWorkTime({ hours:["0-24"] });
// gantt.config.start_date = new Date(2023, 9, 1); // gantt.config.start_date = new Date(2023, 9, 1);
// gantt.config.end_date = new Date(2023, 9, 10); // gantt.config.end_date = new Date(2023, 9, 10);
//更改父项图标 //更改父项图标
// gantt.templates.grid_folder = (item) => { return "" } // gantt.templates.grid_folder = (item) => { return "" }
//更改子项图标 //更改子项图标
// gantt.templates.grid_file = (item) => { return "" } // gantt.templates.grid_file = (item) => { return "" }
gantt.config.columns = [ gantt.config.columns = [
{ name: 'number', label: '任务编号', tree: true, width: '200', align: 'left' }, {
{ name: 'material_name', label: '产品名称', width: '70', align: 'left' }, name: "number",
{ name: 'material_specification', label: '规格', width: '70', align: 'left' }, label: "任务编号",
{ name: 'material_model', label: '型号', width: '70', align: 'left' }, tree: true,
{ name: 'count', label: '任务量', width: '50', align: 'center' } width: "200",
]; align: "left",
gantt.attachEvent('onGanttReady', function () { },
gantt.templates.tooltip_text = function (start, end, task) { {
let endTime = end.getTime()-24*60*60*1000; name: "material_name",
let end_date = new Date(endTime); label: "产品名称",
return task.number + width: "70",
'<br/>任务量：' + task.count + align: "left",
'<br/>当日产量：' + task.count_real + },
'<br/>合格数：' + task.count_ok + {
'<br/>开工时间：' + gantt.templates.tooltip_date_format(start) + name: "material_specification",
'<br/>完工时间：' + gantt.templates.tooltip_date_format(end_date); label: "规格",
}; width: "70",
}); align: "left",
gantt.attachEvent("onTaskClick", async function(id, e) { },
var task = gantt.getTask(id); {
console.log(task) name: "material_model",
if(task.type=="utask"){ label: "型号",
that.$API.pm.mtask.list.req({ utask: id, page: 0, ordering: 'start_date,mgroup__process__sort' }).then(res => { width: "70",
let data = []; align: "left",
res.forEach(item => { },
let obj = {}; { name: "count", label: "任务量", width: "50", align: "center" },
obj.id = item.id; ];
obj.type = 'task'; gantt.attachEvent("onGanttReady", function () {
obj.parent = id; gantt.templates.tooltip_text = function (start, end, task) {
obj.number = item.number; let endTime = end.getTime() - 24 * 60 * 60 * 1000;
obj.text = item.mgroup_name; let end_date = new Date(endTime);
obj.state = item.state; return (
obj.start = item.start_date; task.number +
obj.start_date = item.start_date; "<br/>任务量：" +
obj.duration = 1; task.count +
obj.progress = item.count_real / item.count; "<br/>当日产量：" +
obj.count = item.count; task.count_real +
obj.count_ok = item.count_ok; "<br/>合格数：" +
obj.count_real = item.count_real; task.count_ok +
obj.count_notok = item.count_notok; "<br/>开工时间：" +
obj.state = item.state; gantt.templates.tooltip_date_format(start) +
obj.utask = item.utask; "<br/>完工时间：" +
obj.mgroup_name = item.mgroup_name; gantt.templates.tooltip_date_format(end_date)
data.push(obj) );
}) };
// 数据解析:将数据解析到gantt列数据中 });
gantt.attachEvent("onTaskClick", async function (id, e) {
let childTasks = data var task = gantt.getTask(id);
gantt.parse({ data: childTasks }); console.log(task);
// 刷新数据 if (task.type == "utask") {
gantt.refreshData(); 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.config.autosize = true; // 刷新数据
// gantt.config.open_split_tasks = true; gantt.refreshData();
});
}
});
//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
// gantt.config.autosize = true;
// gantt.config.open_split_tasks = true;
// gantt.config.scale_unit = "day"; // gantt.config.scale_unit = "day";
// gantt.config.step = 1; // gantt.config.step = 1;
// gantt.config.date_scale = " %Y/%m/%d"; // gantt.config.date_scale = " %Y/%m/%d";
//时间轴样式 //时间轴样式
var yearScaleCss = function () { var yearScaleCss = function () {
return 'yearScaleStyle'; return "yearScaleStyle";
}; };
var monthScaleCss = function () { var monthScaleCss = function () {
return 'monthScaleStyle'; return "monthScaleStyle";
}; };
gantt.config.scales = [ gantt.config.scales = [
{ unit: 'year', step: 1, format: " %Y年", css: yearScaleCss }, { unit: "year", step: 1, format: " %Y年", css: yearScaleCss },
{ unit: 'day', step: 1, format: " %m月%d日", css: monthScaleCss } { unit: "day", step: 1, format: " %m月%d日", css: monthScaleCss },
]; ];
gantt.config.duration_step = 1; gantt.config.duration_step = 1;
// 初始化甘特图 // 初始化甘特图
gantt.init(this.$refs.ganttContainer); gantt.init(this.$refs.ganttContainer);
gantt.parse(this.$props.tasks); gantt.parse(this.$props.tasks);
}, },
// methods:{ beforeDestoryed: function () {
// setBarColor() { console.log("beforeDestroyed");
// this.tasks.map(v => { gantt.clearAll();
// var newObj = {}; },
// if (v.status === "CJ") { // methods:{
// newObj = Object.assign(v, { // setBarColor() {
// 'color': '#aaa8eb' // this.tasks.map(v => {
// }); // var newObj = {};
// } else if (v.status === "SX") { // if (v.status === "CJ") {
// newObj = Object.assign(v, { // newObj = Object.assign(v, {
// 'color': '#7cbbff' // 'color': '#aaa8eb'
// }); // });
// } // } else if (v.status === "SX") {
// return newObj; // newObj = Object.assign(v, {
// }); // 'color': '#7cbbff'
// }, // });
// }, // }
} // return newObj;
// });
// },
// },
};
</script> </script>
<style> <style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css"; @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
.gantt_task_line{ .gantt_task_line {
background-color: #c7c9c9; background-color: #c7c9c9;
border: 1px solid #adb1b2; border: 1px solid #adb1b2;
} }
.gantt_task_progress{ .gantt_task_progress {
color: #148dff; color: #148dff;
} }
</style> </style>

6
src/views/pm/utask_dept10.vue
View File

@ -201,6 +201,7 @@
class="left-container" class="left-container"
v-if="ganntVisit" v-if="ganntVisit"
:tasks="tasks" :tasks="tasks"
:key="timeStamp"
:start_date="start_date" :start_date="start_date"
> >
</GanttComponent> </GanttComponent>
@ -247,6 +248,7 @@ export default {
dateValue: "", dateValue: "",
apiUtask: null, apiUtask: null,
apiObj: null, apiObj: null,
timeStamp: "",
ganntVisit: true, ganntVisit: true,
visibleRecord: false, visibleRecord: false,
currentDept: { id: 0 }, currentDept: { id: 0 },
@ -289,7 +291,8 @@ export default {
let data = []; let data = [];
that.ganntVisit = false; that.ganntVisit = false;
that.tasks.data = []; that.tasks.data = [];
console.log("tableData", tableData); let date = new Date();
that.timeStamp = date.getTime();
if (tableData.length > 0) { if (tableData.length > 0) {
tableData.forEach((item) => { tableData.forEach((item) => {
let start_date = item.start_date; let start_date = item.start_date;
@ -328,7 +331,6 @@ export default {
that.tasks.data = data; that.tasks.data = data;
that.ganntVisit = true; that.ganntVisit = true;
gantt.parse(that.tasks); gantt.parse(that.tasks);
// 刷新数据
gantt.refreshData(); gantt.refreshData();
}, },
getGantt() { getGantt() {

8
src/views/pm/utask_dept6.vue
View File

@ -212,6 +212,7 @@
class="left-container" class="left-container"
v-if="ganntVisit" v-if="ganntVisit"
:tasks="tasks" :tasks="tasks"
:key="timeStamp"
:start_date="start_date" :start_date="start_date"
> >
</GanttComponent> </GanttComponent>
@ -258,6 +259,7 @@ export default {
start_date: "", start_date: "",
end_date: "", end_date: "",
}, },
timeStamp: "",
ganntVisit: true, ganntVisit: true,
dateValue: "", dateValue: "",
apiUtask: null, apiUtask: null,
@ -304,7 +306,8 @@ export default {
let data = []; let data = [];
that.ganntVisit = false; that.ganntVisit = false;
that.tasks.data = []; that.tasks.data = [];
console.log("tableData", tableData); let date = new Date();
that.timeStamp = date.getTime();
if (tableData.length > 0) { if (tableData.length > 0) {
tableData.forEach((item) => { tableData.forEach((item) => {
let start_date = item.start_date; let start_date = item.start_date;
@ -341,9 +344,8 @@ export default {
}); });
} }
that.tasks.data = data; that.tasks.data = data;
that.ganntVisit = true;
gantt.parse(that.tasks); gantt.parse(that.tasks);
// 刷新数据 that.ganntVisit = true;
gantt.refreshData(); gantt.refreshData();
}, },
getGantt() { getGantt() {

15
src/views/pm/utask_dept7.vue
View File

@ -45,7 +45,6 @@
stripe stripe
:params="paramsUtask" :params="paramsUtask"
:query="queryUtask" :query="queryUtask"
@row-click="rowclick"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
@dataChange="updateCount" @dataChange="updateCount"
> >
@ -233,6 +232,7 @@
<GanttComponent <GanttComponent
class="left-container" class="left-container"
:tasks="tasks" :tasks="tasks"
:key="timeStamp"
v-if="ganntVisit" v-if="ganntVisit"
:start_date="start_date" :start_date="start_date"
> >
@ -277,6 +277,7 @@ export default {
tasks: { tasks: {
data: [], data: [],
}, },
timeStamp: "",
ganntVisit: true, ganntVisit: true,
dateValue: [], dateValue: [],
apiUtask: null, apiUtask: null,
@ -300,6 +301,8 @@ export default {
}, },
mounted() { mounted() {
this.initDept(); this.initDept();
let date = new Date();
this.timeStamp = date.getTime();
}, },
methods: { methods: {
initDept() { initDept() {
@ -310,9 +313,7 @@ export default {
if (res.length == 1) { if (res.length == 1) {
that.currentDept = res[0]; that.currentDept = res[0];
that.paramsUtask.belong_dept = that.currentDept.id; that.paramsUtask.belong_dept = that.currentDept.id;
// that.paramsObj.belong_dept = that.currentDept.id;
that.apiUtask = that.$API.pm.utask.list; that.apiUtask = that.$API.pm.utask.list;
// that.getGantt();
} else { } else {
that.$message.error("未找到车间"); that.$message.error("未找到车间");
} }
@ -322,9 +323,10 @@ export default {
let that = this; let that = this;
this.count = res.count; this.count = res.count;
let data = []; let data = [];
that.ganntVisit = false;
that.tasks.data = []; that.tasks.data = [];
console.log("tableData", tableData); that.ganntVisit = false;
let date = new Date();
that.timeStamp = date.getTime();
if (tableData.length > 0) { if (tableData.length > 0) {
tableData.forEach((item) => { tableData.forEach((item) => {
let start_date = item.start_date; let start_date = item.start_date;
@ -361,9 +363,8 @@ export default {
}); });
} }
that.tasks.data = data; that.tasks.data = data;
that.ganntVisit = true;
gantt.parse(that.tasks); gantt.parse(that.tasks);
// 刷新数据 that.ganntVisit = true;
gantt.refreshData(); gantt.refreshData();
}, },
utaskDepuse() { utaskDepuse() {