zhgdyun/src/views/projectFront/scheduleManage/ganttwo.vue

<template>
  <div style="height: 900px">
    <div ref="gantt" style="height: 100%" v-loading="ganttLoading"></div>
  </div>
</template>
  <script>
import { gantt } from "dhtmlx-gantt";
import moment from "moment";
import {getProgressListDataApi} from "@/assets/js/api/scheduleInfo";
export default {
  name: "gantt",
//   props: {
//     tasks: {
//       type: Object,
//       default() {
//         return { data: [], links: [] };
//       },
//     },
//   },
  data() {
    return {
      title: "",
      width: 800,
      visible: false,
      disablesubmit: false,
      ganttLoading: false,
      tasks: {
        data: [],
        links: []
      },
      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 = 500;
    //取消连线
    gantt.config.drag_links = false;
    //只读
    gantt.config.readonly = false;
    //右侧显示列名
    gantt.config.date_scale = "%Y-%m-%d";
    //自动调整图表坐标轴区间用于适配task的长度
    gantt.config.fit_tasks = true;
    //弹窗宽
    gantt.config.wide_form = false;
    //汉化
    gantt.locale = {
      date: {
        month_full: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
        ],
        month_short: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        day_full: [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ],
        day_short: ["日", "一", "二", "三", "四", "五", "六"],
      },
      labels: {
        dhx_cal_today_button: "今天",
        day_tab: "日",
        week_tab: "周",
        month_tab: "月",
        new_event: "新建日程",
        icon_save: "保存",
        icon_cancel: "关闭",
        icon_details: "详细",
        icon_edit: "编辑",
        icon_delete: "删除",
        confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
        confirm_deleting: "是否删除计划?",
        section_description: "描述:",
        section_time: "时间范围:",
        section_type: "类型",
        section_text: "计划名称:",
        section_color: "颜色:",

        /* grid columns */

        column_text: "计划名称",
        column_start_date: "开始时间",
        column_duration: "持续时间",
        column_add: "",

        /* link confirmation */

        link: "关联",
        confirm_link_deleting: "将被删除",
        link_start: " (开始)",
        link_end: " (结束)",

        type_task: "任务",
        type_project: "项目",
        type_milestone: "里程碑",

        minutes: "分钟",
        hours: "小时",
        days: "天",
        weeks: "周",
        months: "月",
        years: "年",
      },
    };
    //左侧显示列名
    gantt.config.columns = [
      { name: "text", 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: "progressRatio",
        label: "进度",
        align: "center",
        template: function (obj) {
          return Math.floor(obj.progress * 100).toString() + "%";
        },
      },
      { name: "add", label: "" },
    ];
    //弹出层
    gantt.config.lightbox.sections = [
      {
        name: "text",
        height: 70,
        map_to: "text",
        type: "textarea",
        focus: true,
        width: 200,
      },
      {
        name: "time",
        height: 30,
        map_to: "auto",
        type: "time",
        time_format: ["%Y", "%m", "%d"],
      },
      {
        name: "color",
        height: 30,
        map_to: "color",
        type: "select",
        options: [
          { key: "#3db9d3", label: "蓝色" },
          { key: "#33cc33", label: "绿色" },
          { key: "#FF8247", label: "橙色" },
          { key: "#ff6633", label: "红色" },
        ],
      },
      {
        name: "description",
        height: 70,
        map_to: "description",
        type: "textarea",
      },
    ];
    //弹窗标题 日期范围
    gantt.templates.task_time = function (start, end, task) {
      return (
        moment(start).format("YYYY-MM-DD") +
        " - " +
        moment(end).format("YYYY-MM-DD")
      );
    };
    //弹窗标题 计划名称
    gantt.templates.task_text = function (start, end, task) {
      return task.text;
    };
    gantt.init(this.$refs.gantt);
    gantt.parse(this.tasks);
    let this_ = this;
    //添加后触发
    gantt.attachEvent("onAfterTaskAdd", function (id, item) {
      console.log("添加后触发");
      this_.changeTask();
    });
    //移动进度后触发
    gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
      console.log("移动进度后触发");
      this_.changeTask();
    });
    //移动任务后触发
    gantt.attachEvent("onAfterTaskMove", function (id, parent, tindex) {
      console.log("移动任务后触发");
      this_.changeTask();
    });
    //删除任务后触发
    gantt.attachEvent("onAfterTaskDelete", function (id, item) {
      console.log("删除任务后触发");
      this_.changeTask();
    });
    //修改任务后触发
    gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
      console.log("修改任务后触发");
      this_.changeTask();
    });
    //保存验证
    gantt.attachEvent("onLightboxSave", function (id, item) {
      if (!item.text) {
        gantt.message({ type: "error", text: "请填写计划名称!" });
        return false;
      }
      return true;
    });
  },
  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() {
      const taskCount = gantt.getTaskCount();
      console.log('看一下',taskCount)
      let taskData = [];
      let openTask = [];
      for (let i = 0; i < taskCount; i++) {
        let taskOne = {};
        const obj = gantt.getTaskByIndex(i);
        //打开状态继续打开
        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.duration = obj.duration;
        taskOne.progress = obj.progress;
        taskOne.description = obj.description;
        taskOne.color = obj.color;
        if (obj.parent) {
          taskOne.parent = obj.parent;
        }
        taskData.push(taskOne);
      }
      this.tasks.data = taskData;
      //清空数据
      gantt.clearAll();
      //加载
      gantt.parse(this.tasks);
      //遍历打开，使之前打开的父级继续打开
      openTask.forEach((id) => {
        gantt.open(id);
      });
    },
  },
};
</script>
   
  <style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>