|
@@ -0,0 +1,84 @@
|
|
|
+<template>
|
|
|
+ <div ref="ganttContainer"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { gantt } from "dhtmlx-gantt";
|
|
|
+import { formatDate, formatHour, formatTime } from "@/util";
|
|
|
+const timeUnits = {
|
|
|
+ year: [{ unit: "year", step: 1, format: "%Y" }],
|
|
|
+ month: [{ unit: "month", step: 1, format: "%Y年%M" }],
|
|
|
+ day: [
|
|
|
+ { unit: "month", step: 1, format: "%Y年%M" },
|
|
|
+ { unit: "day", step: 1, format: "%j" },
|
|
|
+ ],
|
|
|
+ hour: [
|
|
|
+ { unit: "day", step: 1, format: "%j" },
|
|
|
+ {
|
|
|
+ unit: "hour",
|
|
|
+ step: 1,
|
|
|
+ format: (date) => {
|
|
|
+ return formatHour(date);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+};
|
|
|
+export default {
|
|
|
+ name: "orderGantt",
|
|
|
+ props: ["tasks", "timeUnit"],
|
|
|
+ watch: {
|
|
|
+ tasks: {
|
|
|
+ handler(newValue) {
|
|
|
+ gantt.parse(newValue);
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ timeUnit(val) {
|
|
|
+ gantt.config.scales = timeUnits[val];
|
|
|
+ gantt.parse(this.tasks);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted: function () {
|
|
|
+ gantt.config.date_format = "%YY-%mm-%dd";
|
|
|
+ gantt.i18n.setLocale("cn");
|
|
|
+ gantt.config.drag_lightbox = false;
|
|
|
+ gantt.config.details_on_dblclick = false;
|
|
|
+ gantt.config.drag_links = false;
|
|
|
+ gantt.config.drag_move = false;
|
|
|
+ gantt.config.drag_multiple = false;
|
|
|
+ gantt.config.drag_progress = false;
|
|
|
+ gantt.config.drag_resize = false;
|
|
|
+ gantt.config.scales = timeUnits[this.timeUnit];
|
|
|
+ gantt.config.columns = [
|
|
|
+ { name: "text", label: "订单名称", tree: true, width: 120 },
|
|
|
+ {
|
|
|
+ name: "start_date",
|
|
|
+ label: "开始时间",
|
|
|
+ align: "center",
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ { name: "end_date", label: "结束时间", align: "center", width: 150 },
|
|
|
+ ];
|
|
|
+
|
|
|
+ gantt.plugins({
|
|
|
+ tooltip: true,
|
|
|
+ });
|
|
|
+ gantt.templates.tooltip_text = function (start, end, task) {
|
|
|
+ return (
|
|
|
+ "<b>任务名称:</b> " +
|
|
|
+ task.text +
|
|
|
+ "<br/><b>订单时间:</b> " +
|
|
|
+ `${formatDate(start)} ${formatTime(start)} 至 ${formatDate(
|
|
|
+ end
|
|
|
+ )} ${formatTime(end)}`
|
|
|
+ );
|
|
|
+ };
|
|
|
+ gantt.init(this.$refs.ganttContainer);
|
|
|
+ gantt.parse(this.tasks);
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
|
|
|
+</style>
|