feature/甘特图实现

index.html

@@ -57,7 +57,11 @@
       animation: inherit;
       animation-direction: reverse;
     }
-
+    /* 甘特图样式控制 */
+    .gantt_task_line {
+      border-radius: 15px !important;
+      border: 0px solid black;
+    }
     @keyframes l19 {
       100% {
         transform: rotate(360deg);

package.json

@@ -49,9 +49,11 @@
     "@wangeditor/editor-for-vue": "5.1.10",
     "animate.css": "^4.1.1",
     "axios": "^1.6.7",
+    "dhtmlx-gantt": "8.0.9",
     "echarts": "^5.5.0",
     "element-plus": "^2.6.0",
     "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.1",
     "lodash-es": "^4.17.21",
     "net": "^1.0.2",
     "nprogress": "^0.2.0",
@@ -71,6 +73,7 @@
     "vue-qrcode": "^2.2.2",
     "vue-router": "^4.3.0",
     "vue3-pdfjs": "^0.1.6",
+    "vue3-print-nb": "^0.1.4",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "@/router";
+import print from "vue3-print-nb";
 import { setupStore } from "@/store";
 import { setupDirective } from "@/directive";
 import { setupElIcons, setupI18n, setupPermission } from "@/plugins";
@@ -31,6 +32,6 @@ setupPermission();
 
 setupEleAvue(app);
 
-app.component('vue-qrcode', VueQrcode)
+app.component("VueQrcode", VueQrcode);
 
-app.use(router).mount("#app");
+app.use(router).use(print).mount("#app");

src/styles/index.scss

@@ -3,7 +3,6 @@
 .app-container {
   padding: 10px;
 }
-
 .search-container {
   padding: 18px 0 0 10px;
   margin-bottom: 10px;

src/utils/htmlPDF.js

@@ -0,0 +1,133 @@
+// 页面导出为pdf格式 //title表示为下载的标题，html表示document.querySelector('#myPrintHtml')
+import html2Canvas from "html2canvas";
+import JsPDF from "jspdf";
+var noTableHeight = 0; //table外的元素高度
+
+export const htmlPdf = (title, html, fileList, type) => {
+  // type传有效值pdf则为横版
+  if (fileList) {
+    const pageHeight = Math.floor((277 * html.scrollWidth) / 190) + 20; //计算pdf高度
+    for (let i = 0; i < fileList.length; i++) {
+      //循环获取的元素
+      const multiple = Math.ceil(
+        (fileList[i].offsetTop + fileList[i].offsetHeight) / pageHeight
+      ); //元素的高度
+      if (isSplit(fileList, i, multiple * pageHeight)) {
+        //计算是否超出一页
+        var _H = ""; //向pdf插入空白块的内容高度
+        if (fileList[i].localName !== "tr") {
+          //判断是不是表格里的内容
+          _H =
+            multiple * pageHeight -
+            (fileList[i].offsetTop + fileList[i].offsetHeight);
+        } else {
+          _H =
+            multiple * pageHeight -
+            (fileList[i].offsetTop + fileList[i].offsetHeight + noTableHeight) +
+            20;
+        }
+        var newNode = getFooterElement(_H); //向pdf插入空白块的内容
+        const divParent = fileList[i].parentNode; // 获取该div的父节点
+        const next = fileList[i].nextSibling; // 获取div的下一个兄弟节点
+        // 判断兄弟节点是否存在
+        if (next) {
+          // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
+          divParent.insertBefore(newNode, next);
+        } else {
+          // 否则向节点添加最后一个子节点
+          divParent.appendChild(newNode);
+        }
+      }
+    }
+  }
+  html2Canvas(html, {
+    allowTaint: false,
+    taintTest: false,
+    logging: false,
+    useCORS: true,
+    dpi: window.devicePixelRatio * 1,
+    scale: 1, // 按比例增加分辨率
+  }).then((canvas) => {
+    var pdf = new JsPDF("l", "mm", "a4"); // A4纸，纵向
+    var ctx = canvas.getContext("2d");
+    var a4w = type ? 277 : 190;
+    var a4h = type ? 190 : 277; // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
+    var imgHeight = Math.floor((a4h * canvas.width) / a4w); // 按A4显示比例换算一页图像的像素高度
+    var renderedHeight = 0;
+    while (renderedHeight < canvas.height) {
+      var page = document.createElement("canvas");
+      page.width = canvas.width;
+      page.height = Math.min(imgHeight, canvas.height - renderedHeight); // 可能内容不足一页
+
+      // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
+      page
+        .getContext("2d")
+        .putImageData(
+          ctx.getImageData(
+            0,
+            renderedHeight,
+            canvas.width,
+            Math.min(imgHeight, canvas.height - renderedHeight)
+          ),
+          0,
+          0
+        );
+      pdf.addImage(
+        page.toDataURL("image/jpeg", 1.0),
+        "JPEG",
+        10,
+        10,
+        a4w,
+        Math.min(a4h, (a4w * page.height) / page.width)
+      ); // 添加图像到页面，保留10mm边距
+
+      renderedHeight += imgHeight;
+      if (renderedHeight < canvas.height) {
+        pdf.addPage(); // 如果后面还有内容，添加一个空页
+      }
+      // delete page;
+    }
+    // 保存文件
+    pdf.save(title + ".pdf");
+  });
+};
+// pdf截断需要一个空白位置来补充
+const getFooterElement = (remainingHeight, fillingHeight = 0) => {
+  const newNode = document.createElement("div");
+  newNode.style.background = "#ffffff";
+  newNode.style.width = "calc(100% + 8px)";
+  newNode.style.marginLeft = "-4px";
+  newNode.style.marginBottom = "0px";
+  newNode.classList.add("divRemove");
+  newNode.style.height = remainingHeight + fillingHeight + "px";
+  return newNode;
+};
+const isSplit = (nodes, index, pageHeight) => {
+  // 判断是不是tr 如果不是高度存起来
+  // 表格里的内容要特殊处理
+  // tr.offsetTop 是tr到table表格的高度
+  // 所以计算高速时候要把表格外的高度加起来
+  // 生成的pdf没有表格了这里可以不做处理 直接计算就行
+  if (nodes[index].localName !== "tr") {
+    //判断元素是不是tr
+    noTableHeight += nodes[index].clientHeight;
+  }
+
+  if (nodes[index].localName !== "tr") {
+    return (
+      nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight &&
+      nodes[index + 1] &&
+      nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
+    );
+  } else {
+    return (
+      nodes[index].offsetTop + nodes[index].offsetHeight + noTableHeight <
+        pageHeight &&
+      nodes[index + 1] &&
+      nodes[index + 1].offsetTop +
+        nodes[index + 1].offsetHeight +
+        noTableHeight >
+        pageHeight
+    );
+  }
+};

src/views/report/productionScheduling/line/index.vue

@@ -6,8 +6,15 @@
       @search-change="searchChange"
       @search-reset="resetChange"
     />
-    <div class="my-gantt">
-      <div id="gantt_here" class="gantt-container"></div>
+    <div class="btns">
+      <el-button type="params" @click="exportToPNG">导出PNG图片</el-button>
+      <el-button type="params" @click="exportToPDF">导出PDF文件</el-button>
+      <!-- <el-button type="params" v-print="printObj" @click="toPrint"
+        >打印</el-button
+      > -->
+    </div>
+    <div class="main-content">
+      <div ref="ganttRef" id="gantt_here" class="gantt-container"></div>
     </div>
   </div>
 </template>
@@ -15,12 +22,42 @@
 <script setup>
 import { gantt } from "dhtmlx-gantt";
 import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
+import html2canvas from "html2canvas";
+import { htmlPdf } from "@/utils/htmlPDF.js";
 import { useCrud } from "@/hooks/userCrud";
+const ganttRef = ref(null);
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
-    src: "/api/v1/process/census/queryApsResultGant",
+    src: "/api/v1/process/census/productLineApsResultGant",
     pageStr: "no",
   });
+const exportToPDF = () => {
+  var fileName = "甘特图pdf";
+  const fileList = document.getElementsByClassName("gantt_here");
+  htmlPdf(fileName, document.querySelector("#gantt_here"), fileList, 1111);
+};
+const exportToPNG = async () => {
+  const chartContainer = ganttRef.value;
+  const canvas = await html2canvas(chartContainer);
+  const img = canvas.toDataURL("image/png");
+  const a = document.createElement("a");
+  a.href = img;
+  a.download = "甘特图.png";
+  a.click();
+};
+// const printUrl = ref("");
+// const toPrint = async () => {
+//   const chartContainer = ganttRef.value;
+//   const canvas = await html2canvas(chartContainer);
+//   const img = canvas.toDataURL("image/png");
+//   printUrl.value = img;
+// };
+// const printObj = ref({
+//   id: "gantt_here",
+//   preview: true,
+//   popTitle: "甘特图",
+//   url: printUrl.value,
+// });
 const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
   Methords;
 option.value = Object.assign(option.value, {
@@ -58,7 +95,7 @@ option.value = Object.assign(option.value, {
       prop: "timeType",
       search: true,
       type: "select",
-      searchValue: "0",
+      searchValue: "1",
       dicData: [
         {
           dictLabel: "小时",
@@ -134,99 +171,105 @@ const demoData = {
     {
       id: 11,
       text: "Project #1",
-      start_date: "28-07-2024",
+      start_date: "2024-07-01 08:00:00",
+      endTime: "2024-09-30 09:00:00",
+      startTime: "2024-07-30 08:00:00",
       duration: "11",
-      progress: 1,
-      open: true,
-    },
-    {
-      id: 1,
-      text: "Project #2",
-      start_date: "01-07-2024",
-      duration: "18",
-      progress: 0.4,
-      open: true,
-    },
-
-    {
-      id: 2,
-      text: "Task #1",
-      start_date: "02-07-2024",
-      duration: "8",
-      parent: "1",
-      progress: 0.5,
-      open: true,
-    },
-    {
-      id: 3,
-      text: "Task #2",
-      start_date: "11-07-2024",
-      duration: "8",
-      parent: "1",
-      progress: 0.6,
+      progress: 0.8,
       open: true,
     },
+  ],
+};
+//初始化甘特图
+const initGantt = (type) => {
+  gantt.plugins({
+    tooltip: true,
+    marker: true,
+    critical_path: true,
+    export_api: true,
+  });
+  gantt.templates.task_text = function (start, end, task) {
+    return (
+      "<span style='padding:0 5px;color: #000; display: inline-block;width: 100%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; '>" +
+      task.text +
+      "</span>"
+    );
+  };
+  gantt.templates.progress_text = function (start, end, task) {
+    return (
+      "<span style='text-align:left;'>" +
+      Math.round(task.progress * 100) +
+      "% </span>"
+    );
+  };
+  gantt.templates.task_class = function (start, end, task) {
+    return "taskClass";
+  };
+  if (type) {
+    gantt.config.duration_unit = type;
+  }
+  gantt.config.show_today = true;
+  gantt.config.grid_width = 350;
+  gantt.config.add_column = false;
+  gantt.config.duration_step = 1;
+  gantt.config.drag_resize = true;
+  gantt.config.columns = [
     {
-      id: 4,
-      text: "Task #3",
-      start_date: "13-07-2024",
-      duration: "6",
-      parent: "1",
-      progress: 0.5,
-      open: true,
+      tree: true,
+      name: "text",
+      label: "订单名称",
+      width: "240",
     },
     {
-      id: 5,
-      text: "Task #1.1",
-      start_date: "02-07-2024",
-      duration: "7",
-      parent: "2",
-      color: "red",
-      progress: 0.6,
-      open: true,
+      name: "startTime",
+      label: "开始时间",
+      align: "center",
+      width: "160",
+      template(task) {
+        return task.startTime;
+      },
     },
     {
-      id: 6,
-      text: "Task #1.2",
-      start_date: "03-07-2024",
-      duration: "7",
-      parent: "2",
-      progress: 0.6,
-      open: true,
+      name: "endTime",
+      label: "结束时间",
+      align: "center",
+      width: "160",
+      template(task) {
+        return task.endTime;
+      },
     },
-  ],
-};
-const event = ref([]);
-//初始化甘特图
-const initGantt = () => {
-  gantt.config.grid_width = 350;
-  gantt.config.add_column = false; //添加符号
-
-  //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
-  gantt.config.autofit = false;
-  gantt.config.row_height = 60;
-  gantt.config.bar_height = 34;
-  // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
-  gantt.config.auto_types = true; //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
-  gantt.config.xml_date = '%d-%m-%Y' //甘特图时间格式
+  ];
+  gantt.config.autofit = true;
+  gantt.config.resize_rows = true;
+  gantt.config.row_height = 40;
+  gantt.config.bar_height = 30;
+  gantt.config.min_column_width = 60;
+  gantt.config.xml_date = "%Y-%m-%d %H:%i:%s"; //甘特图时间格式
   gantt.config.readonly = true; //是否只读
   gantt.i18n.setLocale("cn"); //设置语言
-  gantt.plugins({ tooltip: true });
-  gantt.init("gantt_here"); //初始化
   gantt.templates.tooltip_text = function (start, end, task) {
     const text = `名称: ${task.text}<br/>总数: ${task.num}<br/>完成进度: ${task.progress * 100}%`;
-    return task?.id?.startsWith?.(NODE_PREFIX)
-      ? `${text}<br/>交期时间: ${this.tooltip_date_format(end)}`
-      : `${text}<br/>计划开始时间: ${this.tooltip_date_format(start)}<br/>计划结束时间: ${this.tooltip_date_format(end)}`; // eslint-disable-line
+    return !task.parent
+      ? `${text}<br/>交期时间: ${task.deliverWhen}`
+      : `${text}<br/>计划开始时间: ${task.startTime}<br/>计划结束时间: ${task.endTime}`; // eslint-disable-line
   };
-  gantt.parse(demoData); //填充数据
+  const dateToStr = gantt.date.date_to_str(gantt.config.task_date);
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+  gantt.addMarker({
+    start_date: today,
+    css: "today",
+    text: "今日",
+    title: `Today: ${dateToStr(today)}`,
+  });
+  gantt.init("gantt_here"); //初始化
 };
 const setTime = () => {
   search.value = {
     searchTime: getCurrentMonthStartAndEndDates(),
-    timeType: "0",
+    timeType: "1",
   };
 };
+
 function convertDateString1(str) {
   // 将输入的日期字符串转换为 Date 对象
   let date = new Date(str);
@@ -252,86 +295,108 @@ function convertDateString2(str) {
 
   return formattedDate;
 }
-onBeforeMount(() => {});
+// watchEffect(() => {
+//   //此api后续弃用
+//   // gantt.parse({ data: data.value });
+//   gantt.parse(demoData);
+// });
+const setGantt = () => {
+  if (search?.value.searchTime) {
+    gantt.config.start_date = convertDateString1(search?.value.searchTime[0]);
+    gantt.config.end_date = convertDateString2(search?.value.searchTime[1]);
+    gantt.config.show_tasks_outside_timescale = true;
+  }
+  switch (search.value.timeType) {
+    case "0":
+      gantt.config.duration_unit = "hour";
+      gantt.config.scale_height = 28 * 4;
+      gantt.config.scales = [
+        { unit: "year", step: 1, format: "%Y年" },
+        { unit: "month", step: 1, format: "%m月" },
+        {
+          unit: "day",
+          step: 1,
+          format: "%d日",
+        },
+        {
+          unit: "hour",
+          step: 1,
+          format: "%H时",
+        },
+      ];
+      gantt.init("gantt_here");
+      gantt.render();
+      gantt.parse({ data: useData.value });
+      break;
+    case "1":
+      gantt.config.scale_height = 28 * 4;
+      gantt.config.scales = [
+        { unit: "year", step: 1, format: "%Y年" },
+        { unit: "month", step: 1, format: "%m月" },
+        {
+          unit: "day",
+          step: 1,
+          format: "%d日",
+        },
+      ];
+      gantt.config.duration_unit = "day";
+
+      gantt.init("gantt_here");
+      gantt.render();
+      gantt.parse({ data: useData.value });
+      break;
+    case "2":
+      // initGantt("month");
+      gantt.config.scale_height = 28 * 4;
+      gantt.config.scales = [
+        { unit: "year", step: 1, format: "%Y年" },
+        { unit: "month", step: 1, format: "%m月" },
+      ];
+      gantt.config.duration_unit = "month";
+      gantt.init("gantt_here");
+      gantt.parse({ data: useData.value });
+      gantt.render();
+      break;
+  }
+};
+const useData = ref([]);
+const setUseData = (data) => {
+  const data1 = [...data];
+  data1.forEach((element) => {
+    element.start_date = element.startTime;
+    if (element.progress != 1) {
+      element.color = "orange";
+    } else {
+      element.color = "green";
+    }
+  });
+  const data2 = JSON.parse(JSON.stringify(data1));
+  useData.value = data2;
+};
 onMounted(() => {
   setTime();
-  initGantt();
   dataList();
+  initGantt();
 });
 watch(
-  search,
-  (val) => {
-    switch (val.timeType) {
-      case "0":
-        gantt.config.scale_height = 28 * 4;
-        gantt.config.subscales = [
-          {
-            unit: "year",
-            step: 1,
-            date: "%Y年",
-          },
-          {
-            unit: "month",
-            step: 1,
-            date: "%F",
-          },
-          {
-            unit: "day",
-            step: 1,
-            date: "%d日",
-          },
-        ];
-        gantt.config.scale_unit = "hour";
-        gantt.config.date_scale = "%H时";
-        gantt.render();
-        break;
-      case "1":
-        gantt.config.scale_height = 28 * 4;
-        gantt.config.subscales = [
-          {
-            unit: "year",
-            step: 1,
-            date: "%Y年",
-          },
-          {
-            unit: "month",
-            step: 1,
-            date: "%F",
-          },
-        ];
-        gantt.config.scale_unit = "day";
-        gantt.config.date_scale = "周%D,%d日";
-        gantt.render();
-        break;
-      case "2":
-        gantt.config.subscales = [
-          {
-            unit: "year",
-            step: 1,
-            date: "%Y年",
-          },
-        ];
-        gantt.config.scale_unit = "month";
-        gantt.config.date_scale = "%F";
-        gantt.config.scale_height = 28 * 2;
-        gantt.render();
-        break;
-    }
-    if (search?.value.searchTime) {
-      gantt.config.start_date = convertDateString1(search?.value.searchTime[0]);
-      gantt.config.end_date = convertDateString2(search?.value.searchTime[1]);
-      gantt.config.show_tasks_outside_timescale = true;
+  () => data.value,
+  () => {
+    if (data.value) {
+      setUseData(data.value);
+      setGantt();
     }
   },
-
   { immediate: true, deep: true }
 );
 </script>
 <style scoped lang="scss">
+.btns {
+  margin: 7px 0;
+}
 :deep(.avue-crud__body) {
   display: none;
 }
-.my-gantt {
+.main-content {
   width: 100%;
   height: 600px;
   .gantt-container {
@@ -339,4 +404,7 @@ watch(
     height: 100%;
   }
 }
+.ganttStyle {
+  border-radius: 50%;
+}
 </style>

src/views/report/productionScheduling/order/index.vue

@@ -6,8 +6,15 @@
       @search-change="searchChange"
       @search-reset="resetChange"
     />
+    <div class="btns">
+      <el-button type="params" @click="exportToPNG">导出PNG图片</el-button>
+      <el-button type="params" @click="exportToPDF">导出PDF文件</el-button>
+      <!-- <el-button type="params" v-print="printObj" @click="toPrint"
+        >打印</el-button
+      > -->
+    </div>
     <div class="main-content">
-      <div id="gantt_here" class="gantt-container"></div>
+      <div ref="ganttRef" id="gantt_here" class="gantt-container"></div>
     </div>
   </div>
 </template>
@@ -15,12 +22,42 @@
 <script setup>
 import { gantt } from "dhtmlx-gantt";
 import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
+import html2canvas from "html2canvas";
+import { htmlPdf } from "@/utils/htmlPDF.js";
 import { useCrud } from "@/hooks/userCrud";
+const ganttRef = ref(null);
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
     src: "/api/v1/process/census/queryApsResultGant",
     pageStr: "no",
   });
+const exportToPDF = () => {
+  var fileName = "甘特图pdf";
+  const fileList = document.getElementsByClassName("gantt_here");
+  htmlPdf(fileName, document.querySelector("#gantt_here"), fileList, 1111);
+};
+const exportToPNG = async () => {
+  const chartContainer = ganttRef.value;
+  const canvas = await html2canvas(chartContainer);
+  const img = canvas.toDataURL("image/png");
+  const a = document.createElement("a");
+  a.href = img;
+  a.download = "甘特图.png";
+  a.click();
+};
+// const printUrl = ref("");
+// const toPrint = async () => {
+//   const chartContainer = ganttRef.value;
+//   const canvas = await html2canvas(chartContainer);
+//   const img = canvas.toDataURL("image/png");
+//   printUrl.value = img;
+// };
+// const printObj = ref({
+//   id: "gantt_here",
+//   preview: true,
+//   popTitle: "甘特图",
+//   url: printUrl.value,
+// });
 const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
   Methords;
 option.value = Object.assign(option.value, {
@@ -145,7 +182,29 @@ const demoData = {
 };
 //初始化甘特图
 const initGantt = (type) => {
-  gantt.plugins({ tooltip: true, marker: true, critical_path: true });
+  gantt.plugins({
+    tooltip: true,
+    marker: true,
+    critical_path: true,
+    export_api: true,
+  });
+  gantt.templates.task_text = function (start, end, task) {
+    return (
+      "<span style='padding:0 5px;color: #000; display: inline-block;width: 100%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; '>" +
+      task.text +
+      "</span>"
+    );
+  };
+  gantt.templates.progress_text = function (start, end, task) {
+    return (
+      "<span style='text-align:left;'>" +
+      Math.round(task.progress * 100) +
+      "% </span>"
+    );
+  };
+  gantt.templates.task_class = function (start, end, task) {
+    return "taskClass";
+  };
   if (type) {
     gantt.config.duration_unit = type;
   }
@@ -153,6 +212,7 @@ const initGantt = (type) => {
   gantt.config.grid_width = 350;
   gantt.config.add_column = false;
   gantt.config.duration_step = 1;
+  gantt.config.drag_resize = true;
   gantt.config.columns = [
     {
       tree: true,
@@ -179,22 +239,20 @@ const initGantt = (type) => {
       },
     },
   ];
-  gantt.templates.progress_text = function (start, end, task) {
-    return (
-      "<span style='text-align:left;'>" +
-      Math.round(task.progress * 100) +
-      "% </span>"
-    );
-  };
-  gantt.config.autofit = false;
+  gantt.config.autofit = true;
   gantt.config.resize_rows = true;
-  gantt.config.row_height = 60;
-  gantt.config.bar_height = 34;
-  gantt.config.min_column_width = 30;
+  gantt.config.row_height = 40;
+  gantt.config.bar_height = 30;
+  gantt.config.min_column_width = 60;
   gantt.config.xml_date = "%Y-%m-%d %H:%i:%s"; //甘特图时间格式
   gantt.config.readonly = true; //是否只读
   gantt.i18n.setLocale("cn"); //设置语言
-
+  gantt.templates.tooltip_text = function (start, end, task) {
+    const text = `名称: ${task.text}<br/>总数: ${task.num}<br/>完成进度: ${task.progress * 100}%`;
+    return !task.parent
+      ? `${text}<br/>交期时间: ${task.deliverWhen}`
+      : `${text}<br/>计划开始时间: ${task.startTime}<br/>计划结束时间: ${task.endTime}`; // eslint-disable-line
+  };
   const dateToStr = gantt.date.date_to_str(gantt.config.task_date);
   const today = new Date(new Date().setHours(0, 0, 0, 0));
   gantt.addMarker({
@@ -204,12 +262,6 @@ const initGantt = (type) => {
     title: `Today: ${dateToStr(today)}`,
   });
   gantt.init("gantt_here"); //初始化
-  gantt.templates.tooltip_text = function (start, end, task) {
-    const text = `名称: ${task.text}<br/>总数: ${task.num}<br/>完成进度: ${task.progress * 100}%`;
-    return !task.parent
-      ? `${text}<br/>交期时间: ${task.deliverWhen}`
-      : `${text}<br/>计划开始时间: ${task.startTime}<br/>计划结束时间: ${task.endTime}`; // eslint-disable-line
-  };
 };
 const setTime = () => {
   search.value = {
@@ -338,6 +390,9 @@ watch(
 );
 </script>
 <style scoped lang="scss">
+.btns {
+  margin: 7px 0;
+}
 :deep(.avue-crud__body) {
   display: none;
 }
@@ -349,4 +404,7 @@ watch(
     height: 100%;
   }
 }
+.ganttStyle {
+  border-radius: 50%;
+}
 </style>