首页 > 其他分享 >gantt-elastic(vue甘特图)

gantt-elastic(vue甘特图)

时间:2024-11-07 14:19:08浏览次数:7  
标签:24 vue elastic 甘特图 label 60 task id getDate

安装gantt-elastic与gantt-elastic-header

npm install --save gantt-elastic
npm install --save gantt-elastic-header
//项目里面没有安装dayjs的话还需要安装一下,因为他官网的例子用到了
npm install dayjs --save

//项目里面安了less-loader可能会报错
//less-loader版本不能太高,3.0.0版本一下(可能)
 npm install [email protected] --save

//(有参考别的帖子,原贴:
https://blog.csdn.net/qq_41579104/article/details/125613089?ops_request_misc=&request_id=&biz_id=102&utm_term=gantt-elastic%E8%BF%9E%E7%BA%BF&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-125613089.142^v100^pc_search_result_base4&spm=1018.2226.3001.4187)

官网案例

<template>
  <q-page class="q-pa-sm">
      <gantt-elastic :options="options" :tasks="tasks" @tasks-changed="tasksUpdate" @options-changed="optionsUpdate" @dynamic-style-changed="styleUpdate">
          <gantt-header slot="header"></gantt-header>
      </gantt-elastic>
      <div class="q-mt-md" />
      <q-btn @click="addTask" icon="mdi-plus" label="Add task" />
  </q-page>
</template>

<style>
</style>

<script>
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();
  return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
}
let tasks = [
  {
      id: 1,
      label: "大任务1",
      // user:
      //     '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
      start: getDate(-24 * 5),
      duration: 15 * 24 * 60 * 60 * 1000,
      percent: 85,
      type: "project"
      //collapsed: true,
  },
  {
      id: 2,
      label: "With great power comes great responsibility",
      // user:
      //     '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
      parentId: 1,
      start: getDate(-24 * 4),
      duration: 4 * 24 * 60 * 60 * 1000,
      percent: 50,
      type: "milestone",
      collapsed: true,
      style: {
          base: {
              fill: "#1EBC61",
              stroke: "#0EAC51"
          }
      }
  },
  {
      id: 3,
    //   dependentOn: [2],
      label: "Courage is being scared to death, but saddling up anyway.",
      user:
          '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
      parentId: 2,
      start: getDate(-24 * 3),
      duration: 2 * 24 * 60 * 60 * 1000,
      percent: 100,
      type: "task"
  },
  {
      id: 4,
      label: "Put that toy AWAY!",
      user:
          '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
      start: getDate(-24 * 2),
      duration: 2 * 24 * 60 * 60 * 1000,
      percent: 50,
      type: "task",
      dependentOn: [3]
  },
  {
      id: 5,
      label:
          "One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.",
      user:
          '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',
      parentId: 4,
      start: getDate(0),
      duration: 2 * 24 * 60 * 60 * 1000,
      percent: 10,
      type: "milestone",
      style: {
          base: {
              fill: "#0287D0",
              stroke: "#0077C0"
          }
      }
  },
  {
      id: 6,
      label: "Butch Mario and the Luigi Kid",
      user:
          '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',
      parentId: 5,
      start: getDate(24),
      duration: 1 * 24 * 60 * 60 * 1000,
      percent: 50,
      type: "task",
      collapsed: true,
      style: {
          base: {
              fill: "#8E44AD",
              stroke: "#7E349D"
          }
      }
  },
  {
      id: 7,
      label: "Devon, the old man wanted me, it was his dying request",
      user:
          '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',
      parentId: 2,
      dependentOn: [6],
      start: getDate(24 * 2),
      duration: 4 * 60 * 60 * 1000,
      percent: 20,
      type: "task",
      collapsed: true
  },
  {
      id: 8,
      label: "Hey, Baby! Anybody ever tell you I have beautiful eyes?",
      user:
          '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',
      parentId: 7,
      dependentOn: [7],
      start: getDate(24 * 3),
      duration: 1 * 24 * 60 * 60 * 1000,
      percent: 0,
      type: "task"
  },
  {
      id: 9,
      label:
          "This better be important, woman. You are interrupting my very delicate calculations.",
      user:
          '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',
      parentId: 8,
      dependentOn: [8, 7],
      start: getDate(24 * 4),
      duration: 4 * 60 * 60 * 1000,
      percent: 20,
      type: "task",
      style: {
          base: {
              fill: "#8E44AD",
              stroke: "#7E349D"
          }
      }
  },
  {
      id: 10,
      label: "current task",
      user:
          '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
      start: getDate(24 * 5),
      duration: 24 * 60 * 60 * 1000,
      percent: 0,
      type: "task"
  },
  {
      id: 11,
      label: "test task",
      user:
          '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
      start: getDate(24 * 6),
      duration: 24 * 60 * 60 * 1000,
      percent: 0,
      type: "task"
  },
  {
      id: 12,
      label: "test task",
      user:
          '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
      start: getDate(24 * 7),
      duration: 24 * 60 * 60 * 1000,
      percent: 0,
      type: "task",
      parentId: 11
  },
  {
      id: 13,
      label: "test task",
      user:
          '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
      start: getDate(24 * 8),
      duration: 24 * 60 * 60 * 1000,
      percent: 0,
      type: "task"
  },
  {
      id: 14,
      label: "test task",
      user:
          '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
      start: getDate(24 * 9),
      duration: 24 * 60 * 60 * 1000,
      percent: 0,
      type: "task"
  },
  {
      id: 15,
      label: "test task",
      user:
          '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
      start: getDate(24 * 16),
      duration: 24 * 60 * 60 * 1000,
      percent: 0,
      type: "task"
  }
];
let options = {
  taskMapping: {
      progress: "percent"
  },
  maxRows: 100,
  maxHeight: 500,
  title: {
      label: "Your project title as html (link or whatever...)",
      html: false
  },
  row: {
      height: 24
  },
  calendar: {
      hour: {
          display: true
      }
  },
  chart: {
      progress: {
          bar: false
      },
      expander: {
          display: true
      }
  },
  taskList: {
      expander: {
          straight: false
      },
//控制表格的列
      columns: [
          {
              id: 1,
              label: "ID",
              value: "id",
              width: 40
          },
          {
              id: 2,
              label: "Description",
              value: "label",
              width: 200,
              expander: true,
              html: true,
              events: {
                  click({ data, column }) {
                      alert("description clicked!\n" + data.label);
                  }
              }
          },
          {
              id: 3,
              label: "Assigned to",
              value: "user",
              width: 130,
              html: true
          },
          {
              id: 3,
              label: "Start",
              value: task => dayjs(task.start).format("YYYY-MM-DD"),
              width: 78
          },
          {
              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: "Now",
      "X-Scale": "Zoom-X",
      "Y-Scale": "Zoom-Y",
      "Task list width": "Task list",
      "Before/After": "Expand",
      "Display task list": "Task list"
  }
};
export default {
  name: "Gantt",
  components: {
      GanttElastic,
      GanttHeader
  },
  data() {
      return {
          tasks,
          options,
          dynamicStyle: {},
          lastId: 16
      };
  },
  methods: {
      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>

可参考文档

文档地址:https://jianguoht.github.io/gantt-elastic-h/doc.html#options-chart

标签:24,vue,elastic,甘特图,label,60,task,id,getDate
From: https://blog.csdn.net/zero_er/article/details/143592725

相关文章

  • 基于SpringBoot+Vue的网上超市设计与实现
    前言网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。因此超市商品销售信息的管理计算机化,系统化是必要的。设计开发网上超......
  • 基于springboot+vue的毕业生实习与就业管理系统的设计与实现
    前言使用旧方法对毕业生实习与就业管理系统的信息进行系统化管理已经不再让人们信赖了,把现在的网络信息技术运用在毕业生实习与就业管理系统的管理上面可以解决许多信息管理上面的难题,比如处理数据时间很长,数据存在错误不能及时纠正等问题。这次开发的毕业生实习与就业管理......
  • ssm066农家乐信息平台的设计与实现+vue(论文+源码)_kaic
    毕业设计(论文)题目:农家乐信息平台的设计与实现      摘 要互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对农家乐信息管理混乱,出错率高,信息安......
  • 前端Vue自定义个性化三级联动自定义简洁中国省市区picker选择器
    一、 前端组件概述前端组件开发在现代前端开发中占据着至关重要的地位。随着互联网的快速发展,前端应用的规模和复杂性不断增加,传统的开发方式已经难以满足需求。前端组件开发应运而生,成为提高开发效率、代码可维护性和可复用性的关键手段。二、 组件化的重要性通过将复......
  • 基于SpringBoot + Vue的在线考试系统(角色:学生、教师、管理员)
    文章目录前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论五、项目代码参考六、数据库代码参考七、项目论文示例结语前言......
  • (开题报告)django+vue天天鲜超市线上购物系统源码+论文
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容选题背景关于线上购物系统的研究,现有研究主要以综合性大型电商平台为主,专门针对天天鲜超市这种特定场景下的线上购物系统的研究较少。在国内外,线上......
  • 从 vue 源码看问题 — vue 中的 render helper 是什么?
    前言前面的文章中提到组件更新时,需要先执行编译器生成的渲染函数得到组件的vnode,而渲染函数生成vnode则是通过其中的_c、_l、、_v、_s等方法实现的.比如:普通节点被编译成了可执行_c函数v-for节点被编译成了可执行的_l函数…那么下面就一起来了解一下,什么......
  • 从 vue 源码看问题 — vue 编译器如何生成渲染函数?
    前言前两篇主要了解了vue编译器的解析和优化:将组件的html模版解析成AST对象基于AST语法树进行静态标记,首先标记每个节点是否为静态节点,然后进一步标记出静态根节点,便于在后续更新中跳过静态根节点的更新,从而提高性能下面就了解一下vue编译器是如何从AST......
  • 基于 Go + Vue3!一款开源的 Nginx 管理 Web 工具!
    大家好,我是Java陈序员。Nginx由于其强大的性能,常常被用于企业开发中!今天,给大家介绍一款开源的Nginx管理Web工具,支持通过界面完成Nginx的配置!关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。项目介绍NginxUI——一个......
  • springboot+vue新闻微信小程序 毕业设计源码06401
    摘要在数字化浪潮的推动下,我们紧跟时代步伐,借助SpringBoot强大的后端开发能力和Vue.js前端框架的灵活性,结合微信小程序的广泛用户基础,精心打造了一款新颖的新闻微信小程序。这款小程序不仅提供了实时、便捷的新闻资讯服务,还通过其用户友好的界面和丰富的社交功能,为用户带......