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

src/assets/js/api/scheduleInfo.js

@@ -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);// 所有进度甘特图， 以父子节点形式呈现
+

src/views/projectFront/scheduleManage/ganttwo.vue

@@ -1,67 +1,53 @@
 <template>
-  <div style="height: 900px">
+  <div style="height: 100%">
-    <div ref="gantt" style="height: 100%" v-loading="ganttLoading"></div>
+    <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: {
+  props: {
-//     tasks: {
+    tasks: {
-//       type: Object,
+      type: Object,
-//       default() {
+      default() {
-//         return { data: [], links: [] };
+        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,
+      projectSn: "", //项目sn
-      tasks: {
+      dataList:[],//
-        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:''
     };
   },
-  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_status: "完成状态:",
-        section_actualStartDate: "实际开始时间",
+        section_progress: "进度比例:",
-        section_actualFinishDate: "实际结束时间",
+        section_taskmode: "任务模式:",
-        section_progressRatio: "进度比例",
+        section_taskduration: "任务工期:",
-        section_remark: "备注",
-        
 
         /* 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: "id", label: "id", width: "160", align: "center" },
-      { 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: "progressRatio",
+        name: "text",
-        label: "进度",
+        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: "text",
-    {name: "actualFinishDate", height: 40, map_to: "auto",type:"time",  time_format: ["%Y", "%m", "%d"], focus: true},
+        height: 30,
-    {name: "progressRatio", height: 40, map_to: "text", type: "textarea", focus: true},
+        map_to: "text",
-    {name: "remark", height: 40, map_to: "text", type: "textarea", focus: true},
+        type: "textarea",
-    {name: "time",height: 30,map_to: "auto",type: "time",time_format: ["%Y", "%m", "%d"]},
+        focus: true,
-    {name: "color",height: 30,map_to: "color",type: "select",options: [
+        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) {
+    gantt.templates.task_text = function (start, end, task) {
-        console.log('start, end, task',start, end, task,a,b,c,d)
       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) {
+      setTimeout(function () {
-        gantt.message({ type: "error", text: "请填写计划名称!" });
+        console.log("保存验证,", item);
-        return false;
+        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.text = obj.taskName || obj.text;
-        taskOne.start_date = moment(obj.start_date).format("YYYY-MM-DD");
+        if (obj.start_date) {
-        taskOne.end_date = moment(obj.end_date).format("YYYY-MM-DD");
+          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.progress = obj.progressRatio;
-        taskOne.description = obj.description;
+        taskOne.description = obj.remark;
-        taskOne.color = obj.color;
+        taskOne.predecessorIds = obj.predecessorIds;
-        if (obj.parent) {
+        taskOne.parent = obj.parent
-          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>
-