fix:生产管理6、7、10车间gantt随着上面的表格数据变动
This commit is contained in:
parent
70df6c3837
commit
149f985707
|
|
@ -2,7 +2,7 @@
|
|||
<div ref="ganttContainer"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { gantt } from 'dhtmlx-gantt';
|
||||
import { gantt } from "dhtmlx-gantt";
|
||||
export default {
|
||||
props: {
|
||||
tasks: {
|
||||
|
|
@ -11,26 +11,26 @@ export default {
|
|||
return {
|
||||
data: [],
|
||||
links: [],
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
start_date: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
}
|
||||
return "";
|
||||
},
|
||||
},
|
||||
end_date: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
}
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
let that = this;
|
||||
gantt.clearAll(); // 清空之前的配置
|
||||
gantt.i18n.setLocale('cn'); // 设置中文
|
||||
gantt.i18n.setLocale("cn"); // 设置中文
|
||||
gantt.config.date_format = "%Y-%m-%d";
|
||||
gantt.config.date_grid = "%Y/%m/%d";
|
||||
gantt.config.readonly = true; // 设置中文
|
||||
|
|
@ -54,34 +54,68 @@ export default {
|
|||
//更改子项图标
|
||||
// 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' }
|
||||
{
|
||||
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.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);
|
||||
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)
|
||||
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 => {
|
||||
that.$API.pm.mtask.list
|
||||
.req({
|
||||
utask: id,
|
||||
page: 0,
|
||||
ordering: "start_date,mgroup__process__sort",
|
||||
})
|
||||
.then((res) => {
|
||||
let data = [];
|
||||
res.forEach(item => {
|
||||
res.forEach((item) => {
|
||||
let obj = {};
|
||||
obj.id = item.id;
|
||||
obj.type = 'task';
|
||||
obj.type = "task";
|
||||
obj.parent = id;
|
||||
obj.number = item.number;
|
||||
obj.text = item.mgroup_name;
|
||||
|
|
@ -97,19 +131,17 @@ export default {
|
|||
obj.state = item.state;
|
||||
obj.utask = item.utask;
|
||||
obj.mgroup_name = item.mgroup_name;
|
||||
data.push(obj)
|
||||
})
|
||||
data.push(obj);
|
||||
});
|
||||
// 数据解析:将数据解析到gantt列数据中
|
||||
|
||||
let childTasks = data
|
||||
let childTasks = data;
|
||||
gantt.parse({ data: childTasks });
|
||||
// 刷新数据
|
||||
gantt.refreshData();
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
});
|
||||
//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
|
||||
// gantt.config.autosize = true;
|
||||
// gantt.config.open_split_tasks = true;
|
||||
|
|
@ -119,20 +151,24 @@ export default {
|
|||
// gantt.config.date_scale = " %Y/%m/%d";
|
||||
//时间轴样式
|
||||
var yearScaleCss = function () {
|
||||
return 'yearScaleStyle';
|
||||
return "yearScaleStyle";
|
||||
};
|
||||
var monthScaleCss = function () {
|
||||
return 'monthScaleStyle';
|
||||
return "monthScaleStyle";
|
||||
};
|
||||
gantt.config.scales = [
|
||||
{ unit: 'year', step: 1, format: " %Y年", css: yearScaleCss },
|
||||
{ unit: 'day', step: 1, format: " %m月%d日", css: monthScaleCss }
|
||||
{ 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 => {
|
||||
|
|
@ -150,7 +186,7 @@ export default {
|
|||
// });
|
||||
// },
|
||||
// },
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue