GanttElastic的使用

https://blog.csdn.net/yangxiaoman123/article/details/107855727

<template>
  <!-- <q-page class="q-pa-sm"> -->
  <div v-if="tasks.length > 0">
    <gantt-elastic
      :options="options"
      :tasks="tasks"
      @tasks-changed="tasksUpdate"
      @options-changed="optionsUpdate"
      @dynamic-style-changed="styleUpdate"
    >
      <gantt-header class="gantt" :options="options" slot="header"
        >13224437</gantt-header
      >
    </gantt-elastic>
    <!--任务详细信息模态框-->
    <el-dialog
      :title="taskName"
      width="870px"
      :visible.sync="taskInfoDialogFormVisible"
      @closed="reloadGantInfo"
      :close-on-click-modal="false"
    >
      <TaskDetailDialog :taskId="taskId"></TaskDetailDialog>
    </el-dialog>
  </div>
</template>

<style>
</style>

<script>
import TaskDetailDialog from "@/common/TaskDetailDialog";
import GanttElastic from "gantt-elastic";
import GanttHeader from "gantt-elastic-header";
import dayjs from "dayjs";

// just helper to get current dates
function getDate(hours) {
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth();
  const currentDay = currentDate.getDate();
  const timeStamp = new Date(
    currentYear,
    currentMonth,
    currentDay,
    0,
    0,
    0
  ).getTime();
  var date = new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
  // console.log(date);
  return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
}
var vue_self = "";
function getVueSelf(data) {
  //得到vue中this
  vue_self = data;
  // console.log("vue_self", vue_self);
}
let options = {
  taskMapping: {
    progress: "percent",
  },
  maxRows: 100,
  // maxHeight: 480,
  title: {
    label: "Your project title as html (link or whatever...)",
    html: false,
  },
  times: {
    //设置时间尺度timeZoom: 20,//设置右侧甘特图进度的列宽
    timeZoom: 21,
    // timeZoom: 20,
    // timeScale: 60 * 1000,
  },
  scope: {
    before: 10,
    after: 10,
  },
  row: {
    height: 24,
  },
  calendar: {
    hour: {
      display: false,
    },
  },
  chart: {
    progress: {
      bar: false,
    },
    expander: {
      display: true,
    },
  },
  title: {
    label: "任务视角",
    html: false,
  },

  taskList: {
    expander: {
      straight: false,
    },
    columns: [
      // {
      //   id: 1,
      //   label: "ID",
      //   value: "id",
      //   width: 40,
      // },
      {
        id: 2,
        label: "名称",
        value: "label",
        width: 180,
        expander: true,
        html: true,
        events: {
          click({ data, column }) {
            if (data.parent) {
              vue_self.taskInfoDialogFormVisible = true;

              vue_self.taskId = data.id;
              vue_self.taskName = data.label;
            }
          },
        },
      },
      {
        id: 3,
        label: "负责人",
        value: "user",
        width: 60,
        html: true,
      },
      {
        id: 3,
        label: "Start",
        value: (task) => dayjs(task.start).format("YYYY-MM-DD"),
        width: 80,
      },
      {
        id: 4,
        label: "End",
        value: (task) =>
          task.end == "无" ? task.end : dayjs(task.end).format("YYYY-MM-DD"),
        width: 80,
      },
      // {
      //   id: 4,
      //   label: "Type",
      //   value: "type",
      //   width: 68,
      // },
      // {
      //   id: 5,
      //   label: "%",
      //   value: "progress",
      //   width: 35,
      //   style: {
      //     "task-list-header-label": {
      //       "text-align": "center",
      //       width: "100%",
      //     },
      //     "task-list-item-value-container": {
      //       "text-align": "center",
      //       width: "100%",
      //     },
      //   },
      // },
    ],
  },
  locale: {
    name: "en",
    Now: "当前时间",
    "X-Scale": "宽",
    "Y-Scale": "高",
    "Task list width": "列头宽度",
    "Before/After": "时间跨度",
    "Display task list": "显示列头",
    weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    months: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月",
    ],
  },
};

export default {
  name: "Gantt",
  components: {
    GanttElastic,
    GanttHeader,
    TaskDetailDialog,
  },
  // props: {
  //   theTask: Array,
  // },
  inject: ["reload"],
  data() {
    return {
      dateArr: [],
      //任务详细信息模态框的显示
      taskInfoDialogFormVisible: false,
      options,
      dynamicStyle: {},
      lastId: 16,
      tasks: [
        {
          duration: 604800000,
          start: 1605196800000,
          style: {
            base: {
              fill: "#6E86D6",
              stroke: "#5FA1E0",
            },
          },
          end: 1605715200000,
          label: "已完成",
          id: 171,
          type: "milestone",
          user: " ",
          percent: 0,
        },
        {
          duration: 518400000,
          start: 1605196800000,
          style: {
            base: {
              fill: "#54B3E8",
              stroke: "#48C5EE",
            },
          },
          end: 1605628800000,
          id: 10000283,
          label: "修改易拉宝设计",
          type: "milestone",
          user: "蔡素妮",
          percent: 0,
          parentId: 171,
        },
        {
          duration: 604800000,
          start: 1605196800000,
          style: {
            base: {
              fill: "#54B3E8",
              stroke: "#48C5EE",
            },
          },
          end: 1605715200000,
          id: 10000284,
          label: "ppt内容修改制作",
          type: "milestone",
          user: "蔡素妮",
          percent: 0,
          parentId: 171,
        },
        {
          duration: 604800000,
          start: 1605196800000,
          style: {
            base: {
              fill: "#6E86D6",
              stroke: "#5FA1E0",
            },
          },
          end: 1605715200000,
          label: "已完成",
          id: "z-172",
          type: "milestone",
          user: " ",
          percent: 0,
        },
        {
          duration: 518400000,
          start: 1605196800000,
          style: {
            base: {
              fill: "#54B3E8",
              stroke: "#48C5EE",
            },
          },
          end: 1605628800000,
          id: "10000287",
          label: "修改易拉宝设计",
          type: "milestone",
          user: "蔡素妮",
          percent: 0,
          parentId: "z-172",
        },
        {
          duration: 604800000,
          start: 1605196800000,
          style: {
            base: {
              fill: "#54B3E8",
              stroke: "#48C5EE",
            },
          },
          end: 1605715200000,
          id: 10000289,
          label: "ppt内容修改制作",
          type: "milestone",
          user: "蔡素妮",
          percent: 0,
          parentId: "z-172",
        },
      ],
      //任务详细信息
      taskId: 1,
      taskName: "",
      taskStatus: "",
    };
  },
  mounted() {
    getVueSelf(this);
  },
  methods: {
    reloadGantInfo() {
      this.$emit("updateGantInfo");
    },
    showTaskInfo(item) {},
    addTask() {
      this.tasks.push({
        id: this.lastId++,
        label:
          '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Yeaahh! you have added a task bro!</a>',
        user:
          '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Awesome!</a>',
        start: getDate(24 * 3),
        duration: 1 * 24 * 60 * 60 * 1000,
        percent: 50,
        type: "project",
      });
    },
    tasksUpdate(tasks) {
      this.tasks = tasks;
    },
    optionsUpdate(options) {
      this.options = options;
    },
    styleUpdate(style) {
      this.dynamicStyle = style;
    },
  },
};
</script>
<style scoped>
.gantt >>> .gantt-elastic__header-btn-recenter {
  font-size: 14px !important;
  background-color: #ffffff !important;
  color: #606266 !important;
  border: 1px solid #dcdfe6 !important;
  padding: 5px 10px !important;
}
.gantt >>> .gantt-elastic__header-btn-recenter:hover {
  background-color: #ecf5ff !important;
  border: 1px solid #b6d8fa !important;
}
.gantt >>> .gantt-elastic__header-title {
  display: none;
}
.gantt >>> .gantt-elastic__header-label {
  font-size: 16px;
  color: #303133;
}
.gantt >>> .gantt-elastic__header-task-list-switch--wrapper {
  font-size: 16px;
  color: #303133;
}
.gantt >>> .vue-switcher-theme--default.vue-switcher-color--default div {
  background-color: #409eff;
}
.gantt
  >>> .vue-switcher-theme--default.vue-switcher-color--default.vue-switcher--unchecked
  div {
  background-color: #dcdfe6;
}
.gantt >>> .vue-switcher-theme--default.vue-switcher-color--default div:after {
  background-color: #fff;
  box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
}
</style>