vue使用甘特图dhtmlxgantt + gantt.addTaskLayer

效果图：

甘特图
  • 官网地址

gantt安装与使用

vue版---部分功能收费

  1. 安装gantt  或  引入文件

    npm install dhtmlx-gantt -save

或

import gantt from "/public/static/dhtmlxgantt/dhtmlxgantt.js";
import "/public/static/dhtmlxgantt/locale/locale_cn.js";

  2. 引入---组件

<template>
#节点高度要给，gantt不根据内容撑开
 <div ref="gantt" class="gantt-container" style="min-height: calc(85vh - 100px); width: 100%; overflow: hidden"></div>
</template>
<script>
 import gantt from "/public/static/dhtmlxgantt/dhtmlxgantt";
 import "/public/static/dhtmlxgantt/locale/locale_cn.js";
</script>

 借鉴

  1. css文件地址 examples/dhtmlx_gantt/dhtmlxgantt.css · 残星落影/博客 - 码云 - 开源中国 (gitee.com)
  2. js文件地址 examples/dhtmlx_gantt/dhtmlx · 残星落影/博客 - 码云 - 开源中国 (gitee.com)

定义渲染数据 

let tasks = ref({
  data: [
    {
      id: 1,
      text: "计划#1",
      start_date: "2023-09-28",
      end_date: "2023-10-28",
      sj_start_date: "2023-09-29",
      sj_end_date: "2023-10-25",
      open: true,
    },
    {
      id: 2,
      text: "已完成",
      start_date: "2023-09-28",
      end_date: "2023-10-28",
      sj_start_date: "2023-09-29",
      sj_end_date: "2023-10-25",
      parent: 1,
    },
    {
      id: 3,
      text: "计划#2",
      start_date: "2023-03-10",
      end_date: "2023-5-20",
      sj_start_date: "2023-03-10",
      sj_end_date: "2023-5-18",
      open: true,
    },
    {
      id: 4,
      text: "已完成",
      start_date: "2023-03-10",
      end_date: "2023-5-20",
      sj_start_date: "2023-03-10",
      sj_end_date: "2023-5-18",
      parent: 3,
    },
  ],
});

 完整代码

<script>
onMounted(() => {
  gantt.config.autosize = true;
  // 只读模式
  gantt.config.readonly = true;
  //是否显示左侧树表格
  gantt.config.show_grid = true;
  //表格列设置
  gantt.config.columns = [
    {
      name: "id",
      label: "编号",
      align: "center",
      tree: false,
      width: "50",
    },
    {
      name: "text",
      label: "计划名称",
      tree: true,
      width: "240",
    },
    {
      name: "start_date",
      label: "计划开始",
      align: "center",
      tree: false,
      width: "100",
    },
    {
      name: "end_date",
      label: "计划完成",
      align: "center",
      tree: false,
      width: "100",
    },
    {
      name: "sj_start_date",
      label: "实际开始",
      align: "center",
      tree: false,
      width: "100",
    },
    {
      name: "sj_end_date",
      label: "实际完成",
      align: "center",
      tree: false,
      width: "100",
    },
  ];
  gantt.config.subscales = [
    {
      unit: "day",
      step: 1,
      format: "%d日",
    },
  ];
  gantt.attachEvent("onGanttReady", function () {
    gantt.templates.tooltip_text = function (start: any, end: any, task: any) {
      return (
        task.toolTipsTxt +
        "<br/>" +
        "阶段：" +
        task.text +
        "<br/>" +
        gantt.templates.tooltip_date_format(start)
      );
    };
  });
  //任务条显示内容
  gantt.templates.task_text = function (start: any, end: any, task: any) {
    return (
      "<div style='text-align:center;color:#fff'>" +
      task.text +
      "(" +
      task.duration +
      "天)" +
      "</div>"
    );
  };
  //任务条上的文字大小 以及取消border自带样式
  gantt.templates.task_class = function (start: any, end: any, item: any) {
    return item.$level == 0 ? "firstLevelTask" : "secondLevelTask";
  };
  gantt.templates.timeline_cell_class = function (item: any, date: any) {
    if (date.getDay() == 0 || date.getDay() == 6) {
      return "weekend";
    }
  };
  gantt.config.layout = {
    //拖拽布局
    css: "gantt_container",
    rows: [
      {
        cols: [
          {
            view: "grid",
            id: "grid",
            scrollX: "scrollHor",
            scrollY: "scrollVer",
          },
          { resizer: true, width: 1 },
          {
            view: "timeline",
            id: "timeline",
            scrollX: "scrollHor",
            scrollY: "scrollVer",
          },
          { view: "scrollbar", scroll: "y", id: "scrollVer" },
        ],
      },
      { view: "scrollbar", scroll: "x", id: "scrollHor", height: 20 },
    ],
  };
  //时间轴图表中，任务条形图的高度
  //   gantt.config.task_height = 28;
  gantt.config.task_height = 16;
  gantt.config.row_height = 40;
  //时间轴图表中，甘特图的高度
  //   gantt.config.row_height = 36;
  //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  gantt.config.show_task_cells = true;
  //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
  gantt.config.fit_tasks = true;
  gantt.config.min_column_width = 40;
  gantt.config.auto_types = true;
  gantt.config.xml_date = "%Y-%m-%d";
  gantt.config.scale_unit = "month";
  gantt.config.step = 1;
  gantt.config.date_scale = "%Y年%M";
  gantt.config.start_on_monday = true;
  gantt.config.scale_height = 90;
  gantt.config.autoscroll = true;
  gantt.config.readonly = true;
  // gantt.i18n.setLocale("cn");
  gantt.attachEvent("onTaskLoading", function (task: any) {
    task.sj_start_date = gantt.date.parseDate(task.sj_start_date, "xml_date");
    task.sj_end_date = gantt.date.parseDate(task.sj_end_date, "xml_date");
    return true;
  });
  // 初始化
  gantt.init(proxy.$refs.gantt);
  // 数据解析
  gantt.parse(tasks.value);
  addTaskLayer();
});

// 渲染方法
function addTaskLayer() {
  gantt.addTaskLayer({
    renderer: {
      render: function draw_planned(task: any) {
        // console.log(task);
        if (task.sj_start_date && task.sj_end_date) {
          var sizes = gantt.getTaskPosition(
            task,
            task.sj_start_date,
            task.sj_end_date
          );
          // console.log(sizes);
          var el = document.createElement("div");
          el.className = "baseline";
          el.style.left = sizes.left + "px";
          el.style.width = sizes.width + "px";
          el.style.top = sizes.top + gantt.config.task_height + 17 + "px";
          // console.log(el);
          return el;
        }
        return false;
      },
      getRectangle: function (task: any, view: any) {
        if (task.start_date && task.end_date) {
          return gantt.getTaskPosition(task, task.start_date, task.end_date);
        }
        return null;
      },
    },
  });
}

// 切换日月周季
function setScaleConfig(value: any) {
  dayIndex.value = value;
  if (value == "1") {
    gantt.templates.timeline_cell_class = function (item: any, date: any) {
      if (date.getDay() == 0 || date.getDay() == 6) {
        return "weekend";
      }
    };
  } else {
    gantt.templates.timeline_cell_class = function (item: any, date: any) {
      if (date.getDay() == 0 || date.getDay() == 6) {
        return "";
      }
    };
  }
  switch (value) {
    case "1": //日
      gantt.config.xml_date = "%Y-%m-%d";
      gantt.config.scale_unit = "month";
      gantt.config.step = 1;
      gantt.config.date_scale = "%Y年%M";
      gantt.config.subscales = [
        {
          unit: "day",
          step: 1,
          date: "%d日",
        },
      ];
      gantt.render();
      break;
    case "2": //周
      gantt.config.scale_unit = "week";
      gantt.config.step = 1;
      gantt.config.date_scale = "%Y年%M";
      gantt.templates.date_scale = null;
      gantt.config.subscales = [
        {
          unit: "week",
          step: 1,
          date: "第%W周",
        },
        {
          unit: "day",
          step: 1,
          date: "%d日",
        },
      ];
      gantt.render();
      break;
    case "3": //月
      gantt.config.scale_unit = "month";
      gantt.config.step = 1;
      gantt.config.date_scale = "%Y年";
      gantt.templates.date_scale = null;
      gantt.config.subscales = [
        {
          unit: "month",
          step: 1,
          date: "%M",
        },
      ];
      gantt.render();
      break;
    case "4": //季
      gantt.config.scale_unit = "year";
      gantt.config.step = 1;
      gantt.config.date_scale = "%Y年";
      gantt.config.subscales = [
        {
          unit: "month",
          step: 1,
          date: "%M",
        },
        {
          unit: "quarter",
          step: 1,
          format: function (date: any) {
            var dateToStr = gantt.date.date_to_str("%M");
            var endDate = gantt.date.add(
              gantt.date.add(date, 3, "month"),
              -1,
              "day"
            );
            return dateToStr(date) + " - " + dateToStr(endDate);
          },
        },
      ];
      gantt.render();
      break;
  }
}
</script>

css样式

<style lang="scss" scoped>
@import "/public/static/dhtmlxgantt/dhtmlxgantt.css";

:deep(.gantt_task_line, .gantt_line_wrapper) {
  margin-top: -9px;
}

:deep(.gantt_task_line) {
  background-color: #3b97fe;
  border: #3b97fe;
  height: 15px !important;
  border-radius: 100px;
  border-radius: 100px;
}

:deep(.gantt_task_line) {
  margin-bottom: 10px !important;
}

:deep(.gantt_task_progress) {
  background: #ffd180;
  border-top-right-radius: 100px;
  border-radius: 100px;
}
:deep(.baseline) {
  position: absolute;
  border-radius: 100px;
  margin-top: -12px;
  height: 15px;
  background: #67dd23;
}
:deep(.gantt_grid_scale .gantt_grid_head_cell) {
  color: black !important;
}
:deep(.gantt_task .gantt_task_scale .gantt_scale_cell) {
  color: black !important;
}
:deep(.gantt_layout_cell) {
  ::-webkit-scrollbar {
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #f5f5f5;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #b9b9b9;
  }
}

// 周末 区分
:deep(.weekend) {
  background: #f4f7f4;
}
:deep(.gantt_selected .weekend) {
  background: #f7eb91;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/228363.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

为“异常”努力是值得的

为“异常”努力是值得的

异常是OO语言处理错误的方式,在C中&#xff0c;鼓励使用异常。侯捷再书中谈起异常&#xff0c;“十年前撰写“未将异常考虑在内的”函数是为一种美好实践&#xff0c;而今我们致力于写出“异常安全码”。”可见异常安全的重要。 说起异常安全&#xff0c;首先就要是异常的出现…
阅读更多...
MOS管防护电路解析

MOS管防护电路解析

功率MOS管自身拥有众多优点&#xff0c;但是MOS管具有较脆弱的承受短时过载能力&#xff0c;特别是在高频的应用场合&#xff0c;所以在应用功率MOS管对必须为其设计合理的保护电路来提高器件的可靠性。 功率MOS管保护电路主要有以下几个方面&#xff1a; 1&#xff09;防止栅…
阅读更多...
苹果 macOS 14.1.2 正式发布 更新了哪些内容？

苹果 macOS 14.1.2 正式发布 更新了哪些内容？

苹果今日向 Mac 电脑用户推送了 macOS 14.1.2 更新&#xff08;内部版本号&#xff1a;23B92 | 23B2091&#xff09;&#xff0c;本次更新距离上次发布隔了 28 天。 需要注意的是&#xff0c;因苹果各区域节点服务器配置缓存问题&#xff0c;可能有些地方探测到升级更新的时间略…
阅读更多...
销售技巧培训之女装销售技巧

销售技巧培训之女装销售技巧

销售技巧培训之女装销售技巧 一、了解目标客户 在销售女装时&#xff0c;了解目标客户是非常重要的。不同年龄段、不同职业、不同收入的女性对女装的需求和偏好都不同。因此&#xff0c;在销售女装时&#xff0c;需要先了解目标客户的特点和需求&#xff0c;以便更好地推荐适…
阅读更多...
《opencv实用探索·十四》VideoCapture播放视频和视像头调用

《opencv实用探索·十四》VideoCapture播放视频和视像头调用

1、VideoCapture播放视频 #include <opencv2/opencv.hpp> #include <iostream>using namespace std; using namespace cv;int main() {// 定义相关VideoCapture对象VideoCapture capture;// 打开视频文件capture.open("1.avi");// 判断视频流读取是否正…
阅读更多...
OpenCL学习笔记（一）开发环境搭建（win10+vs2019）

OpenCL学习笔记（一）开发环境搭建（win10+vs2019）

前言 异构编程开发&#xff0c;在高性能编程中有重要的&#xff0c;笔者本次只简单介绍下&#xff0c;如何搭建简单的开发环境&#xff0c;可以供有需要的小伙伴们开发测试使用 一、获取opencl的sdk库 1.使用cuda库 若本机有Nvidia的显卡&#xff0c;在安装cuda库后&#x…
阅读更多...
spring boot学习第五篇:spring boot与JPA结合

spring boot学习第五篇:spring boot与JPA结合

1、准备表&#xff0c;创建表语句如下 CREATE TABLE girl (id int(11) NOT NULL AUTO_INCREMENT,cup_Size varchar(100) COLLATE utf8mb4_bin DEFAULT NULL,age int(11) DEFAULT NULL,PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT4 DEFAULT CHARSETutf8mb4 COLLATEutf8mb4…
阅读更多...
《ReactJS实践入门》：引领JavaScript前端开发的革新之旅

《ReactJS实践入门》：引领JavaScript前端开发的革新之旅

在当今的软件开发世界中&#xff0c;ReactJS无疑是最为引人注目的JavaScript库之一。对于初学者来说&#xff0c;如何深入理解并掌握这一强大的前端工具&#xff0c;进而应用到实际开发中&#xff0c;一直是他们所面临的问题。而《ReactJS实践入门》一书&#xff0c;正是为了解…
阅读更多...
西部再添“芯”增长极 | 海辰储能重庆基地正式投产

西部再添“芯”增长极 | 海辰储能重庆基地正式投产

12月7日&#xff0c;海辰储能重庆基地一期一阶段项目投产仪式在重庆铜梁举行。此次重庆基地项目的投产&#xff0c;是海辰储能实施三大基地协同发展战略的重要里程碑&#xff0c;将进一步整合内部资源、发挥规模化生产优势、完善产业链布局&#xff0c;成为海辰储能持续迈向高质…
阅读更多...
第二十一章

第二十一章

这一章 基本分为三个部分 网络基础概念和TCP,UDP这三个部分主要如下&#xff1a; 计算机网络实现了堕胎计算机间的互联&#xff0c;使得它们彼此之间能够进行数据交流。网络应用程序就是再已连接的不同计算机上运行的程序&#xff0c;这些程序借助于网络协议&#xff0c;相互…
阅读更多...
如何切换用户和更改用户密码

如何切换用户和更改用户密码

https://blog.csdn.net/u012759006/article/details/89681615 https://blog.csdn.net/Z_CAIGOU/article/details/120925716 1、sudo su 切换到root用户 2、passwd 用户名 之后输入你修改后的密码两次&#xff0c;成功。 文章知识点与官方知识档案匹配&#xff0c;可 一般情…
阅读更多...
DDD架构思想专栏一《初识领域驱动设计DDD落地》

DDD架构思想专栏一《初识领域驱动设计DDD落地》

引言 最近准备给自己之前写的项目做重构&#xff0c;这是一个单体架构的小项目&#xff0c;后端采用的是最常见的三层架构。因为项目比较简单&#xff0c;其实采用三层架构就完全够了。但是呢&#xff0c;小编最近在做DDD架构的项目&#xff0c;于是就先拿之前写的一个老项目试…
阅读更多...
【ET8】1.ET8入门-运行指南

【ET8】1.ET8入门-运行指南

主要学习网址 论坛地址为&#xff1a;https://et-framework.cn Git地址为&#xff1a;GitHub - egametang/ET: Unity3D Client And C# Server Framework 官方QQ群 : 474643097 项目检出 检出项目切换到release8.0分支 GitHub地址&#xff1a;GitHub - egametang/ET: Unity…
阅读更多...
2023-12-08面试

2023-12-08面试

1、自我介绍 面试官你好&#xff0c;我叫平明博&#xff0c;来自河南郑州&#xff0c;19年毕业&#xff0c;所学专业软件工程&#xff0c;之前任职于南京华苏科技&#xff0c;担任开发工程师一职&#xff0c;在职期间主要对省间现货相关项目进行研发&#xff0c;核心就是从多平…
阅读更多...
nvidia安装出现7-zip crc error解决办法

nvidia安装出现7-zip crc error解决办法

解决办法&#xff1a;下载network版本&#xff0c;重新安装。&#xff08;选择自己需要的版本&#xff09; 网址&#xff1a;CUDA Toolkit 12.3 Update 1 Downloads | NVIDIA Developer 分析原因&#xff1a;local版本的安装包可能在下载过程中出现损坏。 本人尝试过全网说的…
阅读更多...
crmeb本地开发配置代理

crmeb本地开发配置代理

crmeb 是一个开源的商城系统&#xff0c; v5 版本是一个前后端分离的项目&#xff0c; 我们从git仓库中下载下来的是一个文件夹&#xff0c;其结构是这样的 我的系统没有使用docker &#xff0c;使用的是 laragon 的系统 所以首先我们要在 nginx 中配置 之后&#xff0c; 我们…
阅读更多...
钒电解液回收提钒树脂

钒电解液回收提钒树脂

#钒电解液回收提钒树脂 钒是一种重要的战略金属具有硬度大、抗拉强度强、熔点高等优点主要应用于冶金、电池、核材料、航空航天及能源等领域。 钒电池全称全钒氧化还原液流电池具有环境友好、循环寿命长、能量效率较高等优点&#xff0c;钒电解液是钒电池的关键部分由钒离子和硫…
阅读更多...
阿里云国际基于CentOS系统镜像快速部署Apache服务

阿里云国际基于CentOS系统镜像快速部署Apache服务

阿里云轻量应用服务器提供了Windows Server系统镜像和主流的Linux系统镜像&#xff0c;您可以通过该类镜像创建纯净、安全、稳定的运行环境。本文以CentOS 7.6系统镜像为例&#xff0c;介绍如何快速配置Apache服务。 背景信息 注意&#xff0c;阿里云国际通过corebyt注册并充…
阅读更多...
【小白专用】MySQL入门（详细总结）

【小白专用】MySQL入门（详细总结）

3. 创建数据库 使用 create database 数据库名; 创建数据库。 create database MyDB_one; create database DBAliTest; 创建数据库成功后&#xff0c;数据库的数量变成了6个&#xff0c;多了刚才创建的 dbalitest 。 4. 创建数据库时设置字符编码 使用 create database 数据…
阅读更多...
(六) python观察者设计模式

(六) python观察者设计模式

6.1行为型模式简介 观察者设计模式是最简单的行为型模式之一,所以我们先简单了解一下行为型模式 创建型模式的工作原理是基于对象的创建机制的。由于这些模式隔离了对象的创建细 节&#xff0c;所以使得代码能够与要创建的对象的类型相互独立。结构型模式用于设计对象和类的结…
阅读更多...
最新文章

Copyright @ 2022~2023