admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

进度管理-（甘特图）页面

Browse Source
This commit is contained in:
骆乐 2022-11-22 16:31:07 +08:00
parent 98f4621d26
commit ac241956ea
2 changed files with 252 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/js/api/scheduleInfo.js
View File

@ -28,3 +28,11 @@ export const getTaskAlarmApi = data => get('/progressTaskAlarm/selectPage', data
//分布详情--组件
export const getDetailInfoApi = data => post('/xmgl/progressItem/getProjectProgressItemDetail', data);// 获取详情信息
export const addPlanInfoApi = data => post('/xmgl/progressItemFeedback/add', data);// 新增进度反馈
//甘特图-页面
export const addProgressTaskApi = data => post('/xmgl/progressTask/addProgressTask', data);// 新增进度甘特图
export const deleteTaskAlarmApi = data => get('/xmgl/progressTask/deleteById', data);// 根据id删除进度甘特图
export const editProgressTaskApi = data => post('/xmgl/progressTask/updateProgressTask', data);// 修改进度甘特图
export const getParentChildListApi = data => get('/xmgl/progressTask/getParentChildList', data);// 所有进度甘特图， 以父子节点形式呈现

364
src/views/projectFront/scheduleManage/ganttwo.vue
View File

@ -1,67 +1,53 @@
<template>
<div style="height: 900px">
<div ref="gantt" style="height: 100%" v-loading="ganttLoading"></div>
<div style="height: 100%">
<div ref="gantt" style="height: 100%"></div>
</div>
</template>
<script>
<script>
import {
addProgressTaskApi, //增加
deleteTaskAlarmApi, //删除
editProgressTaskApi, //编辑
getParentChildListApi, //查询
} from "@/assets/js/api/scheduleInfo";
import { gantt } from "dhtmlx-gantt";
import moment from "moment";
import {getProgressListDataApi} from "@/assets/js/api/scheduleInfo";
import { Model } from "echarts";
export default {
name: "gantt",
// props: {
// tasks: {
// type: Object,
// default() {
// return { data: [], links: [] };
// },
// },
// },
props: {
tasks: {
type: Object,
default() {
return {
data: [],
links: [
{ source: 1, target: 2, type: "1" }, //source关联前置任务id；target解析predecessorIds，以","分割
{ source: 2, target: 3, type: "0" },
],
};
},
},
},
data() {
return {
title: "",
width: 800,
visible: false,
disablesubmit: false,
ganttLoading: false,
tasks: {
data: [],
links: []
// data: [
// {
// id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10,
// progress: 0.4, open: true
// },
// {
// id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10,
// progress: 0.6, parent: 1
// },
// {
// id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20,
// progress: 0.6, parent: 1
// }
// ],
// links: [
// {id: 1, source: 1, target: 2, type: "1"},
// {id: 2, source: 2, target: 3, type: "0"}
// ]
},
projectSn:''
projectSn: "", //项目sn
dataList:[],//
};
},
created(){
this.projectSn = this.$store.state.projectSn;
this.getProgressListData()
},
mounted: function () {
//日期格式化
gantt.config.xml_date = "%Y-%m-%d";
//左侧是否自适应
gantt.config.autofit = true;
//左侧宽
gantt.config.grid_width = 800;
gantt.config.grid_width = 850;
//取消连线
gantt.config.drag_links = false;
gantt.config.drag_links = true;
//只读
gantt.config.readonly = false;
//右侧显示列名
@ -125,18 +111,16 @@ export default {
icon_delete: "删除",
confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
confirm_deleting: "是否删除计划?",
section_description: "描述:",
section_description: "备注:",
section_time: "时间范围:",
section_type: "类型",
section_text: "计划名称:",
section_text: "任务名称:",
section_color: "颜色:",
section_duration: "工期",
section_actualStartDate: "实际开始时间",
section_actualFinishDate: "实际结束时间",
section_progressRatio: "进度比例",
section_remark: "备注",
//-----
section_status: "完成状态:",
section_progress: "进度比例:",
section_taskmode: "任务模式:",
section_taskduration: "任务工期:",
/* grid columns */
@ -144,9 +128,11 @@ export default {
column_start_date: "开始时间",
column_duration: "持续时间",
column_add: "",
// 添加看看
column_id: "",
column_predecessors: "",
column_actual_start_date: "",
column_actual_end_date: "",
column_duration: "",
/* link confirmation */
@ -167,18 +153,59 @@ export default {
years: "年",
},
};
//配置左侧的表各项
//左侧显示列名
gantt.config.columns = [
{ name: "taskName", label: "计划名称", tree: true, width: "*" },
{ name: "startDate", label: "预计开始时间", align: "center" },
{ name: "finishDate", label: "预计结束时间", align: "center" },
{ name: "actualStartDate", label: "实际开始时间", align: "center" },
{ name: "actualFinishDate", label: "实际结束时间", align: "center" },
{ name: "duration", label: "工期", align: "center" },
{ name: "id", label: "id", width: "160", align: "center" },
{
name: "progressRatio",
label: "进度",
name: "text",
label: "任务名称",
tree: true,
width: "120",
align: "center",
resize: true,
},
{
name: "predecessorIds",
label: "前置任务",
width: "100",
align: "center",
resize: true,
},
{
name: "start_date",
label: "计划开始日期",
align: "center",
width: "100",
resize: true,
},
{
name: "end_date",
label: "计划完成日期",
align: "center",
width: "100",
resize: true,
},
{
name: "actual_start_date",
label: "实际开始日期",
align: "center",
width: "100",
resize: true,
},
{
name: "actual_end_date",
label: "实际完成日期",
align: "center",
width: "100",
resize: true,
},
{ name: "duration", label: "任务工期", align: "center" },
{
name: "duration",
label: "进度比例",
align: "center",
resize: true,
template: function (obj) {
return Math.floor(obj.progress * 100).toString() + "%";
},
@ -187,50 +214,115 @@ export default {
];
//弹出层
gantt.config.lightbox.sections = [
{name: "text",height: 70,map_to: "text",type: "textarea",focus: true, width: 200,}, //计划名称
{name: "duration",height: 70,map_to: "text",type: "text",focus: true, width: 200,},
{name: "actualStartDate", height: 40, map_to: "auto",type:"time", time_format: ["%Y", "%m", "%d"], focus: true},
{name: "actualFinishDate", height: 40, map_to: "auto",type:"time", time_format: ["%Y", "%m", "%d"], focus: true},
{name: "progressRatio", height: 40, map_to: "text", type: "textarea", focus: true},
{name: "remark", height: 40, map_to: "text", type: "textarea", focus: true},
{name: "time",height: 30,map_to: "auto",type: "time",time_format: ["%Y", "%m", "%d"]},
{name: "color",height: 30,map_to: "color",type: "select",options: [
//工程名称
{
name: "text",
height: 30,
map_to: "text",
type: "textarea",
focus: true,
width: 200,
},
//时间范围
{
name: "time",
height: 30,
map_to: "start_date",
type: "time",
time_format: ["%Y", "%m", "%d"],
},
// 完成状态
{
name: "status",
height: 30,
map_to: "status",
type: "select",
options: [
{ value: 0, label: "未开始" },
{ value: 1, label: "进行中" },
{ value: 2, label: "已完成" },
],
},
//任务模式
{
name: "taskmode",
height: 30,
map_to: "taskTypeId",
type: "select",
options: [
{ value: 0, label: "手动" },
{ value: 1, label: "自动" },
],
},
//任务工期
{
name: "taskduration",
height: 30,
map_to: "duration",
type: "textarea",
focus: true,
},
//进度
{
name: "progress",
height: 30,
map_to: "progress",
type: "textarea",
focus: true,
},
//颜色
{
name: "color",
height: 30,
map_to: "color",
type: "select",
options: [
{ key: "#3db9d3", label: "蓝色" },
{ key: "#33cc33", label: "绿色" },
{ key: "#3299CC", label: "天蓝色" },
{ key: "#FF8247", label: "橙色" },
{ key: "#ff6633", label: "红色" },
],
},
//备注
{
name: "description",
height: 40,
map_to: "remark",
type: "textarea",
},
];
//弹窗标题 日期范围
gantt.templates.task_time = function (start, end, task) {
return (
moment(start).format("YYYY-MM-DD") +
moment(task.startDate).format("YYYY-MM-DD") +
" - " +
moment(end).format("YYYY-MM-DD")
moment(task.finishDate).format("YYYY-MM-DD")
);
};
//弹窗标题 计划名称
gantt.templates.task_text = function (start, end, task,a,b,c,d) {
console.log('start, end, task',start, end, task,a,b,c,d)
gantt.templates.task_text = function (start, end, task) {
return task.text;
};
gantt.init(this.$refs.gantt);
gantt.parse(this.tasks);
gantt.parse(this.$props.tasks);
let this_ = this;
//添加后触发
gantt.attachEvent("onAfterTaskAdd", function (id, item) {
console.log("添加后触发");
console.log("添加后触发", item);
// addProgressTaskApi(this.dataList).then((res) => {
// console.log("添加的数据",res);
// });
this_.changeTask();
});
//移动进度后触发
gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
console.log("移动进度后触发");
console.log("移动进度后触发mode", mode);
this_.changeTask();
});
//移动任务后触发
gantt.attachEvent("onAfterTaskMove", function (id, parent, tindex) {
console.log("移动任务后触发");
console.log("移动任务后触发", mode);
this_.changeTask();
});
//删除任务后触发
@ -243,79 +335,111 @@ export default {
console.log("修改任务后触发");
this_.changeTask();
});
//拖拽任务后触发
gantt.attachEvent("onTaskDrag", function (id, mode, task, original) {
// console.log("拖拽任务后触发",id, mode, task, original);
});
//保存验证
gantt.attachEvent("onLightboxSave", function (id, item) {
if (!item.text) {
gantt.message({ type: "error", text: "请填写计划名称!" });
return false;
}
setTimeout(function () {
console.log("保存验证,", item);
if (!item.taskName) {
gantt.message({ type: "error", taskName: "请填写任务名称!" });
return false;
}
}, 2000);
return true;
});
},
created() {
this.projectSn = this.$store.state.projectSn;
this.getParentChildList();
},
methods: {
//获取列表数据
getProgressListData() {
this.ganttLoading= true;
this.tasks.data = [];
let data = {
projectSn: this.projectSn,
};
getProgressListDataApi(data).then((res) => {
if (res.code == 200) {
console.log("获取到的列表", res);
this.tasks.data = res.result;
// 数据解析:将数据解析到gantt列数据中
gantt.parse(this.tasks);
console.log('获取到的列表',this.tasks)
// 刷新数据
gantt.refreshData();
this.ganttLoading= false;
}else{
this.$message.error('查询失败！');
}
});
},
//数据格式整理
changeTask() {
// return
const taskCount = gantt.getTaskCount();
let taskData = [];
let openTask = [];
for (let i = 0; i < taskCount; i++) {
let taskOne = {};
const obj = gantt.getTaskByIndex(i);
console.log('======obj',obj)
console.log("整理数据的 ", obj);
taskOne.taskName = obj.taskName;
//打开状态继续打开
if (obj.$open == true) {
openTask.push(obj.id);
}
//整理数据格式
taskOne.id = obj.id;
taskOne.text = obj.text;
taskOne.start_date = moment(obj.start_date).format("YYYY-MM-DD");
taskOne.end_date = moment(obj.end_date).format("YYYY-MM-DD");
taskOne.text = obj.taskName || obj.text;
if (obj.start_date) {
taskOne.start_date = moment(obj.start_date).format("YYYY-MM-DD");
}
if (obj.end_date) {
taskOne.end_date = moment(obj.end_date).format("YYYY-MM-DD");
}
if (obj.startDate != null) {
console.log(111111111111111111);
taskOne.start_date = moment(obj.startDate).format("YYYY-MM-DD");
}
if (obj.finishDate != null) {
taskOne.end_date = moment(obj.finishDate).format("YYYY-MM-DD");
}
if (obj.actualStartDate != null) {
taskOne.actual_start_date = moment(obj.actualStartDate).format(
"YYYY-MM-DD"
);
}
if (obj.actualFinishDate != null) {
taskOne.actual_end_date = moment(obj.actualFinishDate).format(
"YYYY-MM-DD"
);
}
taskOne.duration = obj.duration;
taskOne.progress = obj.progress;
taskOne.description = obj.description;
taskOne.color = obj.color;
if (obj.parent) {
taskOne.parent = obj.parent;
taskOne.progress = obj.progressRatio;
taskOne.description = obj.remark;
taskOne.predecessorIds = obj.predecessorIds;
taskOne.parent = obj.parent
taskOne.color = "#3db9d3";
if (obj.parentId) {
taskOne.parent = obj.parentId;
}
taskData.push(taskOne);
}
this.tasks.data = taskData;
this.$props.tasks.data = taskData;
console.log(this.$props.tasks);
console.log(this.$props.tasks);
//清空数据
gantt.clearAll();
//加载
gantt.parse(this.tasks);
gantt.parse(this.$props.tasks);
//遍历打开，使之前打开的父级继续打开
openTask.forEach((id) => {
gantt.open(id);
});
},
//获取甘特图父子节点数据
getParentChildList() {
getParentChildListApi({ projectSn: this.projectSn }).then((res) => {
this.tasks.data = res.result;
this.dataList=res.result
console.log("甘特图列表数据", this.tasks.data);
console.log(" this.dataList", this.dataList);
gantt.parse(this.$props.tasks);
this.changeTask();
});
},
},
};
</script>
<style>
<style lang="less" scoped>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>