vue使用dhtmlx-gantt

最新推荐文章于 2024-05-24 17:24:56 发布
最新推荐文章于 2024-05-24 17:24:56 发布
阅读量5.0k 收藏 31
点赞数 8
文章标签： vue.js javascript 前端 vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42619759/article/details/121805529
版权

在这里插入图片描述
根据需求制作甘特图，绘制两时间段，相交地方为深颜色，没找到可以直接用的插件，于是就靠自己手动计算时间差与时间比例，但所得结果有部分误差，有更好组件欢迎交流
安装

npm install dhtmlx-gantt --save

index.js

<template>
  <div>
    <div class="legend">
      <div class="legendBox">
        <div class="legendSml legendColor1"></div>
        <div>计划时间</div>
      </div>
      <div class="legendBox">
        <div class="legendSml legendColor2"></div>
        <div>相交时间</div>
      </div>
      <div class="legendBox">
        <div class="legendSml legendColor3"></div>
        <div>实际时间</div>
      </div>
    </div>


    <div ref="gantt" class="left-container" />
  </div>
</template>
<script>
import moment from 'moment' // moment格式化时间
import gantt from "dhtmlx-gantt"; // 引入模块
import "dhtmlx-gantt/codebase/dhtmlxgantt.css"; //皮肤

export default {
  name: "gantt",
  data() {
    return {
      tasks: {
        data: [],
      },
    };
  },
  mounted() {
    this.initData();

    gantt.config.show_progress = false;
    function percenToString(num) {
      return Math.floor(num * 100) + "%";
    }

    // 设置每一部分的颜色
    function renderLabel(progress, type, state) {
      var relWidth = progress * 100;
      var cssClass = "custom_progress ";
      if (type === 1) {
        cssClass += "nearly_done";
      } else if (type === 2) {
        if (state) {
          cssClass += "in_progress";
        } else {
          cssClass += "in_progress_w";
        }
      } else {
        cssClass += "idle";
      }
      return (
        "<div class='" +
        cssClass +
        "' style='width:" +
        relWidth +
        "%'>" +
        percenToString(progress) +
        "</div>"
      );
    }

    // 根据定义类型判断颜色顺序
    gantt.templates.task_text = function(start, end, task) {
      let colorType = task.colorType
      if (colorType === 'j12' || colorType === 'one') {
        return (
          renderLabel(task.progress1, 1, task.state) +
          renderLabel(task.progress2, 2, task.state) +
          renderLabel(task.progress3, 3, task.state)
        );
      } else if (colorType === 'j21') {
        return (
          renderLabel(task.progress1, 3, task.state) +
          renderLabel(task.progress2, 2, task.state) +
          renderLabel(task.progress3, 1, task.state)
        );
      } else if (colorType === 'b12') {
        return (
          renderLabel(task.progress1, 1, task.state) +
          renderLabel(task.progress2, 2, task.state) +
          renderLabel(task.progress3, 1, task.state)
        );
      } else if (colorType === 'b21') {
        return (
          renderLabel(task.progress1, 3, task.state) +
          renderLabel(task.progress2, 2, task.state) +
          renderLabel(task.progress3, 3, task.state)
        );
      } else if (colorType === 'l12') {
        return (
          renderLabel(task.progress1, 1, task.state) +
          renderLabel(task.progress2, 2, task.state) +
          renderLabel(task.progress3, 3, task.state)
        );
      } else if (colorType === 'l21') {
        return (
          renderLabel(task.progress1, 3, task.state) +
          renderLabel(task.progress2, 2, task.state) +
          renderLabel(task.progress3, 1, task.state)
        );
      } else {
        return (
          renderLabel(task.progress1, 1, task.state) +
          renderLabel(task.progress2, 2, task.state) +
          renderLabel(task.progress3, 3, task.state)
        );
      }
    };
    gantt.plugins({ marker: true, tooltip: true }); // 开启marker插件 
    var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
    var today = new Date();
    // 添加固定时间线
    gantt.addMarker({
      start_date: today,
      css: 'today',
      text: '今日:' + moment(new Date()).format('YYYY-MM-DD'),
      title: 'Today: ' + dateToStr(today)
    });
    // 提示框内容
    gantt.templates.tooltip_text = function(start, end, task){
      return "<b>任务内容:</b>" + task.text +
      "<br/><b>计划开始:</b> " + task.planStart +
      "<br/><b>计划结束:</b> " + task.planEnd +
      "<br/><b>实际开始:</b> " + task.actualStart +
      "<br/><b>实际结束:</b> " + task.actualEnd
    };

    gantt.config.scale_unit = "year";
    gantt.config.step = 1;
    gantt.config.date_scale = "%Y";
    //当右侧不止显示年份时，可以添加展示月日，添加一个就加一行
    gantt.config.subscales = [
      { unit: "month", step: 1, date: "%m" },
    ];
    //甘特图右侧表头的高度
    gantt.config.scale_height = 80;
    //使用中文
    gantt.i18n.setLocale("cn");
    //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
    gantt.config.autosize = true;
    //只读模式
    gantt.config.readonly = true;
    //是否显示左侧树表格
    gantt.config.show_grid = true;
    //表格列设置
    gantt.config.columns = [
      { name: "text", label: "任务内容", width: "120", align: "center" },
      { name: "planStart", label: "计划开始", width: "100", align: "center" },
      { name: "planEnd", label: "计划结束", width: "100", align: "center" },
      { name: "actualStart", label: "实际开始", width: "100", align: "center" },
      { name: "actualEnd", label: "实际结束", width: "100", align: "center" },
    ];
    //任务条上的文字大小 以及取消border自带样式
    gantt.templates.task_class = function() {
      return "firstLevelTask"
    };
    // 初始化
    gantt.init(this.$refs.gantt);
    // 数据解析
    gantt.parse(this.tasks);
  },
  methods: {
    initData() {
      // 处理数据
      let arr = [{
        id: '1',
        task: '12相交',
        planStart: '2021-09-01',
        planEnd: '2021-12-01',
        actualStart: '2021-10-01',
        actualEnd: '2022-02-01',
      }, {
        id: '2',
        task: '21相交',
        planStart: '2021-10-01',
        planEnd: '2022-02-01',
        actualStart: '2021-09-01',
        actualEnd: '2021-12-01',
      }, {
        id: '3',
        task: '1包含2',
        planStart: '2021-09-01',
        planEnd: '2022-05-01',
        actualStart: '2021-12-01',
        actualEnd: '2022-02-01',
      }, {
        id: '4',
        task: '2包含1',
        planStart: '2021-12-01',
        planEnd: '2022-02-01',
        actualStart: '2021-09-01',
        actualEnd: '2022-05-01',
      }, {
        id: '5',
        task: '12相离',
        planStart: '2021-09-01',
        planEnd: '2021-12-01',
        actualStart: '2022-02-01',
        actualEnd: '2022-05-01',
      }, {
        id: '6',
        task: '21相离',
        planStart: '2022-02-01',
        planEnd: '2022-05-01',
        actualStart: '2021-09-01',
        actualEnd: '2021-12-01',
      }, {
        id: '7',
        task: '1包含2',
        planStart: '2021-09-01',
        planEnd: '2022-05-01',
        actualStart: '2021-09-01',
        actualEnd: '2022-02-01',
      }, {
        id: '8',
        task: '1包含2',
        planStart: '2021-09-01',
        planEnd: '2022-05-01',
        actualStart: '2021-12-01',
        actualEnd: '2022-05-01',
      }, {
        id: '9',
        task: '2包含1',
        planStart: '2021-09-01',
        planEnd: '2022-02-01',
        actualStart: '2021-09-01',
        actualEnd: '2022-05-01',
      }, {
        id: '10',
        task: '2包含1',
        planStart: '2021-12-01',
        planEnd: '2022-05-01',
        actualStart: '2021-09-01',
        actualEnd: '2022-05-01',
      }, {
        id: '11',
        task: '12相等',
        planStart: '2021-09-01',
        planEnd: '2022-05-01',
        actualStart: '2021-09-01',
        actualEnd: '2022-05-01',
      }];

      let newArr = []
      arr.forEach((item, index) => {
        let obj = this.getDate(item.planStart, item.planEnd, item.actualStart, item.actualEnd)
        newArr.push({
          id: item.id,
          text: item.task,
          start_date: new Date(moment(obj.minTime).format("YYYY-MM-DD")),
          progress1: Math.abs(obj.progress1),
          progress2: Math.abs(obj.progress2),
          progress3: Math.abs(obj.progress3),
          duration: obj.duration,

          planStart: item.planStart,
          planEnd: item.planEnd,
          actualStart: item.actualStart,
          actualEnd: item.actualEnd,
          state: obj.state,
          colorType: obj.colorType
        })
      });
      this.tasks.data = newArr
    },

    // 时间计算
    getDate(Atime, Btime, Ctime, Dtime) {
      let obj = {};
      let arr = [Atime, Btime, Ctime, Dtime];
      let timeArr = [];
      arr.forEach((item) => {
        timeArr.push(new Date(item));
      });
      let minTime = moment(Math.min(...timeArr)).format("MM-DD-YYYY");
      let maxTime = moment(Math.max(...timeArr)).format("YYYY-MM-DD");
      let duration = this.difference(minTime, maxTime);

      let progress1 = 0;
      let progress2 = 0;
      let progress3 = 0;
      let state = true;
      let colorType = true;

      if (Atime < Ctime && Ctime < Btime &&  Btime < Dtime) {
        // console.log('12相交', index)
        colorType = 'j12'
        progress2 = (this.difference(Ctime, Btime) / duration)
        progress1 = (this.difference(Atime, Ctime) / duration)
        progress3 = (this.difference(Btime, Dtime) / duration)
      } else if (Btime > Ctime && Btime >= Dtime && Ctime >= Atime && Dtime > Atime) {
        // console.log('1包含2', index)
        colorType = 'b12'
        state = true
        progress2 = (this.difference(Ctime, Dtime) / duration)
        progress1 = (this.difference(Atime, Ctime) / duration)
        progress3 = (this.difference(Dtime, Btime) / duration)
      } else if (Dtime >= Btime && Dtime > Atime && Atime >= Ctime && Btime > Ctime) {
        // console.log('2包含1', index)
        colorType = 'b21'
        state = true
        progress2 = (this.difference(Atime, Btime) / duration)
        progress1 = (this.difference(Ctime, Atime) / duration)
        progress3 = (this.difference(Btime, Dtime) / duration)
      } else if (Btime > Dtime && Dtime > Atime && Atime > Ctime) {
        // console.log('21相交', index)
        colorType = 'j21'
        state = true
        progress2 = (this.difference(Atime, Dtime) / duration)
        progress1 = (this.difference(Ctime, Atime) / duration)
        progress3 = (this.difference(Dtime, Btime) / duration)
      } else if (Btime < Ctime) {
        // console.log('12相离')
        colorType = 'l12'
        state = false
        progress2 = (this.difference(Btime, Ctime) / duration)
        progress1 = (this.difference(Atime, Btime) / duration)
        progress3 = (this.difference(Ctime, Dtime) / duration)
      } else if (Dtime < Atime) {
        // console.log('21相离')
        colorType = 'l21'
        state = false
        progress2 = (this.difference(Dtime, Atime) / duration)
        progress3 = (this.difference(Atime, Btime) / duration)
        progress1 = (this.difference(Ctime, Dtime) / duration)
      } else {
        colorType = 'one'
        console.log('状态错误')
      }
      obj = {
        state: state,
        minTime: minTime,
        duration: duration * 1,
        progress1: progress1 * 1,
        progress2: progress2 * 1,
        progress3: progress3 * 1,
        colorType: colorType,
      };
      return obj;
    },
    difference(beginTime, Dtime) {
      var dateBegin = new Date(beginTime);
      var dateEnd = new Date(Dtime);
      var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
      return dayDiff;
    }
  }
}
</script>
<style lang="scss">
html,
body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

.legend {
  padding: 10px;
  display: flex;

  .legendBox {
    display: flex;
    align-items: center;
    margin-right: 20px;

    .legendSml {
      width: 30px;
      height: 16px;
      border-radius: 5px;
      margin-right: 4px;
    }

    .legendColor1 {
      background: #01aff4;
    }
    .legendColor2 {
      background: #0169bd;
    }
    .legendColor3 {
      background: rgb(1, 105 , 189, 50%);
    }
  }
}

.gantt_task_content {
  display: flex;
}

.gantt_task_line {
  background: #fff;
}

.custom_progress {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  height: 100%;
}
.nearly_done {
  background-color: #01aff4 !important;
}

.in_progress {
  background-color: #0169bd !important;
}

.in_progress_w {
  background-color: #FFF !important;
}

.idle {
  background-color: rgb(1, 105 , 189, 50%) !important;
}
.firstLevelTask {
  border: none;
}

.secondLevelTask {
  border: none;
}

.left-container {
  height: 600px;
}
</style>
发根强劲
关注
  • 8
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
Vue+DHTMLX Gantt创建甘特图如何实现页面上时间单位的选择
weixin_63194072的博客
06-25 349
levels: [scales:[},scales:[}},},scales:[},scales:[},scales:[})i++) {zoomConfig中设置显示单位1.初始化缩放功能：gantt.ext.zoom.init(zoomConfig);2.设置默认缩放级别3.添加缩放后的事件监听器})当甘特图缩放后，此事件监听器将被触发。level（缩放级别）和config（缩放配置）。在事件处理函数中，它使用。
【甘特图】vue3.x + DHTMLX
咫尺天涯的专栏
09-13 5349
vue3.x项目需要显示甘特图，经学习研究，目前应用比较多的甘特图技术是dhtmlx，这篇文章将简单的介绍其在vue3.x中的应用。 1.下载安装 npm install dhtmlx-gantt 或 yarn add dhtmlx-gantt 2.编写Gantt组件 <template> <div ref="ganttRef"></div> </template> import { onMounted, ref } from 'vue' imp.
超详细的vue3+ts+dhtmlx甘特图免费版组件使用方法,支持事件内自定义和样式修改
PhoenixGuangyu的博客
10-23 4650
这个组件比较古老，对vue的兼容性很不友好。2.创建Gantt.vue 组件。1.安装dhtmlx 甘特图。
【vue库应用】 - 甘特图 dhtmlx-gantt
star_3344的博客
07-05 4016
甘特图是一种项目管理工具，以直观的方式显示项目的时间轴和任务计划。 dhtmlx-gantt库是一个用于创建交互式和可自定义甘特图的js库。本文对该库进行简单应用，包括安装、引用、初始化及配置
一文搞定dhtmlx-gantt调度界面，vue下使用dhtmlxgantt进行项目甘特图模块设计开发（前端界面显示篇（1））
weixin_44979308的博客
03-17 6635
(1) dhtmlxgantt是进行甘特图开发过程中所用到的插件库，用于跨浏览器和跨平台应用程序的功能较为齐全的Gantt图表。其祖家组件为一个JavaScript库，提供了一套完整的Ajax驱动的UI组件。其中支持文本字样可编辑、日期点击弹出日历可选择日期、不同任务选择不同颜色，自动显示进度，进度条总工期和当下进展用深浅色显示。本文基于在较为成熟完整的项目，进行甘特图模块开发的内容。（2）引用font-awesome.min.css图标,为了显示各种图表插件。(3)关于css样式渲染甘特图界面。
使用Vue3绘制甘特图
weixin_63194072的博客
05-24 828
map_to与columns里的name对应name - (string)节的名称(根据该名称，dhtmlxGantt将从区域设置中获取节的标签)。标签集合)。例如，对于时间部分，dhtmlxGantt将获取存储为gantt.locale.labels.section_time的标签。Map_to - (string)将映射到节的数据属性的名称。Type -(字符串)节控件(编辑器)的类型。height-(数字)部分的高度。不用于复选框和单选部分。
vue.js中使用甘特图（gantt-elastic）的使用
热门推荐
yangxiaoman123的博客
08-07 2万+
在vue中使用甘特图（gantt-elastic）做进度跟踪 公司要使用甘特图插件来跟踪任务的进度 ，在使用这个插件的过程中踩了太多的坑了，很多配置都没有文档的 连英文文档都没有，然后就看了源码研究了下具体的配置，具体的配置我都在下面的文章中截图有备注了。如果说有什么问题给我留言 我这边会在看到的第一时间回复。 一、首先要安装gantt-elastic这个插件 在npm官网上下载 https://www.npmjs.com/package/gantt-elastic npm install --save g
dhtmlxGantt 介绍以及使用说明
最新发布
07-09
下面是一个简单的 Vue.js 组件示例，展示了如何在 Vue 项目中使用 dhtmlxGantt： ```javascript <div ref="gantt"> import 'dhtmlx-gantt'; export default { name: 'gantt', props: { tasks: { type: ...
wl-gantt:wl-gantt：一个简单易用且高度可配置的甘特图进度计划项目管理插件。An easy-to-use gantt plug-in for the vue framework
05-05
wl-gantt 简介 甘特图（Gantt chart）又称为横道图、条状图(Bar chart)、生产计划进度图。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关系随着时间进展...wl-gantt出现的背景就是笔者在公司的Vue项
dhtmlx gantt甘特图标准库及例子
09-27
下面我们将详细探讨dhtmlx Gantt的核心特性、如何使用以及它的示例。 1. **核心特性** - **自定义布局**：dhtmlx Gantt允许用户自定义任务条形图的样式，包括颜色、宽度和高度，以满足不同项目的视觉需求。 - **...
dhtmlxGantt最新版,甘特图,源码,示例,例子,资料齐全
05-25
描述中提到，这个包包含一个免费的license，这意味着个人和商业开发者都可以在他们的项目中使用dhtmlxGantt，而无需支付额外费用。此外，“例子比较齐全”表明压缩包内有各种示例代码，帮助开发者快速上手并理解如何...
一款不错的甘特图JS＋XML组件
06-24
在B/S上实现的一款关于甘特图的组件，通过XML，生成树结点，然后填充到HTML页的DIV中即可。
Dhtmlx日程-图表-甘特图实例
08-23
在这个“Dhtmlx日程-图表-甘特图实例”中，我们将会探讨如何使用Dhtmlx Suite来创建高效的时间管理和项目管理工具。 首先，Dhtmlx日程组件提供了一个灵活的日历解决方案，可以用于安排会议、任务和事件。它支持多...
vue dhtmlx-gantt(甘特图-拖拽)
丶凉雨拾忆
11-15 1147
2、创建demo.vue。
vue中使用gantt-elastic实现可拖拽甘特图
蜗牛~~
07-07 5330
gantt-elastic插件在vue中的使用
2、Gantt 入门 （vue3 + ts）
beauty_600的博客
05-07 2335
首先把 gantt 官网下载的相关文件放入 resource 文件中。 下载地址：https://dhtmlx.com/docs/products/dhtmlxGantt/download.shtml 在html文件中引入 创建一个gantt components，此框架是vue3 + ts + ant design。 <template> <div ref="ganttRef"></div> </template> <script&gt.
vue使用甘特图(实现树形结构/一条数据显示双时间轴)
qq_36566924的博客
08-17 5782
1.引用甘特图: impot gantt from “dhtmlx-gantt” 这里引用7.0.7版本本 2.在mounted里面initGanttConfig()〈初始化配置数据〉和getGanttData()〈放入数据〉 3.initGanttConfig为:
DHTMLX-VUE中引入DHTMLX Gantt的方式
qq_19331985的博客
04-18 1919
1. 安装 npm install dhtmlx-gantt 2. 创建组件 2.1 组件创建 <template> <div ref="gantt"></div> </template> //中文语言 <script src="dhtmlx-gantt/codebase/locale/locale_cn.js"></script> <script> import {gantt} from 'dhtmlx-gan
frappe-gantt在vue中的使用
weixin_44244924的博客
04-14 3041
frappe-gantt在vue中的使用
在vue使用dhtmlx-gantt添加滚动条
07-27
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; ``` 3. 在Vue组件的template部分添加一个容器元素用于显示Gantt图，并为该元素设置一个唯一的id： ```html <div id="gantt-container"> ``` 4. 在Vue...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值