精华内容
下载资源
问答
  • 甘特图vue查看方式

    千次阅读 2018-07-06 15:17:30
    甘特图查看方式:按天查看,按月查看,按年查看,按周查看 <el-select v-model="value6" size="mini" placeholder="请选择" style="width:110px;" @change="...

    甘特图查看方式:按天查看,按月查看,按年查看,按周查看

    <el-select v-model="value6" size="mini" placeholder="请选择" style="width:110px;" @change="chakan">
    <el-option value="按天查看" class="scale"></el-option>
    <el-option value="按周查看" class="scale"></el-option>
    <el-option value="按月查看" class="scale"></el-option>
    <el-option value="按年查看" class="scale"></el-option>
    </el-select>


    data() {
    return {
    value6: '',//按天查看,按月查看,按年查看
    }
    },

    chakan(){
    if(this.value6=='按天查看'){
    gantt.config.scale_unit = "day";
    gantt.config.step = 1;
    gantt.config.date_scale = "%d";//设置日期
    gantt.config.subscales = [
    {unit: "year", step: 1, date: "%Y"},
    {unit: "month", step: 1, date: "%M"}
    ];
    gantt.config.scale_height = 70;
    gantt.templates.date_scale = null;
    }else if(this.value6=='按周查看'){
    var weekScaleTemplate = function (date) {
    var dateToStr = gantt.date.date_to_str("%M %d");
    var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
    return dateToStr(date) + " - " + dateToStr(endDate);
    };
    gantt.config.scale_unit = "week";
    gantt.templates.date_scale = weekScaleTemplate;
    gantt.config.step = 1;
    gantt.config.subscales = [
    {unit: "day", step: 1, date: "%D"}
    ];
    gantt.config.scale_height = 70;
    }else if(this.value6=='按月查看'){
    gantt.config.scale_unit = "month";
    gantt.config.date_scale = "%Y, %F";
    gantt.config.step = 1;
    gantt.config.subscales = [
    {unit: "week", step: 1, date: "%W"}
    ];
    gantt.config.scale_height = 70;
    gantt.templates.date_scale = null;
    }else if(this.value6=='按年查看'){
    gantt.config.scale_unit = "year";
    gantt.config.step = 1;
    gantt.config.date_scale = "%Y";
    gantt.config.min_column_width = 50;
    gantt.config.scale_height = 70;
    gantt.templates.date_scale = null;
    gantt.config.subscales = [
    {unit: "month", step: 1, date: "%M"}
    ];
    }
    },

    展开全文
  • 甘特弹性-Javascript甘特图(可编辑,响应式) 适用于vue,jquery,vanilla js和其他框架的Javascript Gantt Chart 项目已作为下一个主要版本移至 甘特弹性 是vue组件,但可以在其他框架中使用,甚至可以与jQuery...
  • vue.js 甘特图_带有vue.js的弹性甘特图

    千次阅读 2020-07-27 17:49:03
    vue.js 甘特图 甘特弹性 (gantt-elastic) Elastic javascript Gantt Chart. 弹性javascript甘特图。 Gantt-elastic is a vue component but it could be used in other frameworks or even with jQuery (vue is ...

    vue.js 甘特图

    甘特弹性 (gantt-elastic)

    Elastic javascript Gantt Chart.

    弹性javascript甘特图。

    Gantt-elastic is a vue component but it could be used in other frameworks or even with jQuery (vue is kind of elastic and lightweight framework).

    甘特弹性是vue组件,但可以在其他框架中使用,甚至可以与jQuery一起使用(vue是一种弹性轻量级的框架)。

    Gantt-elastic is not fully finished yet and may change (but if you really wan't you can fork this repo or download current version - do not use npm right now)

    Gantt-elastic尚未完全完成,并且可能会更改(但是,如果您确实不愿意,则可以分叉此存储库或下载当前版本-请勿立即使用npm)

    Gantt-elastic

    elastigantt

    安装 (install)

    npm install --save gantt-elastic or download zip from github

    npm install --save gantt-elastic或从github下载zip

    独立使用(更多信息/文档即将发布) (standalone usage (more info / documentation soon))

    index.html (index.html)

    <!DOCTYPE html>
    <html charset="utf-8">
    <head>
      <meta charset="UTF-8">
      <title>gantt-elastic demo</title>
    </head>
    <body>
      <div class="container-fluid">
        <div id="app" style="width:100%;height:100%;"></div>
      </div>
      <script src="../dist/bundle.js"></script>
      <script src="app.js"></script>
    </body>
    </html>

    app.js (app.js)

    // override components - copy component from src directory change it to object or compile *.vue to *.js
    // more info about components you can find here : https://vuejs.org/v2/guide/index.html
    // You can change anything! You have full control of components templates, events, data ... and so on!
    //Elastigantt.component.components.EgMain.components.TopHeader = CustomHeader;
    
    // just helper to get current dates
    function getDate(hours) {
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      const currentMonth = currentDate.getMonth() + 1;
      const currentDay = currentDate.getDate();
      const timeStamp = new Date(`${currentYear}-${currentMonth}-${currentDay} 00:00:00`).getTime();
      return new Date(timeStamp + hours * 60 * 60 * 1000);
    }
    
    const tasks = [
      {
        id: 1,
        label: 'Make some noise',
        user: '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
        start: getDate(-24 * 5),
        duration: 5 * 24 * 60 * 60,
        progress: 85,
        type: 'project'
      }, {
        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,
        progress: 50,
        type: 'milestone',
        style: {
          fill: '#1EBC61',
          stroke: '#0EAC51'
        },
        progressBarStyle: {
          bar: {
            fill: '#0EAC51'
          }
        }
      }, {
        id: 3,
        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,
        progress: 100,
        type: 'task'
      },
      /* ... */
    ];
    
    const options = {
      title: {
        label: 'Your project title as html (link or whatever...)',
        html: false,
        style: {
          'font-size': '20px',
          'vertical-align': 'middle',
          'font-weight': '400',
          'line-height': '35px',
          'padding-left': '22px',
          'letter-spacing': '1px'
        }
      },
      taskList: {
        columns: [
          {
            id: 1,
            label: 'ID',
            value: 'id',
            width: 40
          }, {
            id: 2,
            label: 'Description',
            value: 'label',
            width: 200,
            expander: true
          }, {
            id: 3,
            label: 'Assigned to',
            value: 'user',
            width: 130,
            html: true
          }, {
            id: 3,
            label: 'Start',
            value: (task) => task.startDate.format('YYYY-MM-DD'),
            width: 78
          }, {
            id: 4,
            label: 'Type',
            value: 'type',
            width: 68
          }, {
            id: 5,
            label: '%',
            value: 'progress',
            width: 35,
            styles: {
              label: {
                'text-align': 'center',
                'width': '100%'
              },
              value: {
                'text-align': 'center',
                'width': '100%'
              }
            }
          }
        ]
      },
      locale: {
        code: 'en',
        'Now': 'Now',
        'X-Scale': 'Zoom-X',
        'Y-Scale': 'Zoom-Y',
        'Task list width': 'Task list',
        'Before/After': 'Expand',
        'Display task list': 'Task list'
      },
      /*locale:{
        code:'pl'
        name: 'pl', // name String
        weekdays: 'Poniedziałek_Wtorek_Środa_Czwartek_Piątek_Sobota_Niedziela'.split('_'), // weekdays Array
        weekdaysShort: 'Pon_Wto_Śro_Czw_Pią_Sob_Nie'.split('_'), // OPTIONAL, short weekdays Array, use first three letters if not provided
        weekdaysMin: 'Pn_Wt_Śr_Cz_Pt_So_Ni'.split('_'), // OPTIONAL, min weekdays Array, use first two letters if not provided
        months: 'Styczeń_Luty_Marzec_Kwiecień_Maj_Czerwiec_Lipiec_Sierpień_Wrzesień_Październik_Listopad_Grudzień'.split('_'), // months Array
        monthsShort: 'Sty_Lut_Mar_Kwi_Maj_Cze_Lip_Sie_Wrz_Paź_Lis_Gru'.split('_'), // OPTIONAL, short months Array, use first three letters if not provided
        ordinal: n => `${n}`, // ordinal Function (number) => return number + output
        relativeTime: { // relative time format strings, keep %s %d as the same
          future: 'za %s', // e.g. in 2 hours, %s been replaced with 2hours
          past: '%s temu',
          s: 'kilka sekund',
          m: 'minutę',
          mm: '%d minut',
          h: 'godzinę',
          hh: '%d godzin', // e.g. 2 hours, %d been replaced with 2
          d: 'dzień',
          dd: '%d dni',
          M: 'miesiąc',
          MM: '%d miesięcy',
          y: 'rok',
          yy: '%d lat'
        }
      }*/
    };
    
    const elastigantt = Elastigantt.mount({
      el: '#app', // <- your container id
      tasks: tasks,
      options: options
    });
    // listen to events
    elastigantt.$on('elastigantt.tree.scroll',(ev)=>{
      console.log('scroll');
    });

    作为Vue应用/组件 (as Vue app / component)

    import GanttElastic from 'gantt-elastic';
    
    let gantt = new Vue({
      components: {
        ganttElastic: GanttElastic
      },
      el: '#gantt',
      template: `<gantt-ellastic :tasks="tasks" :options="options"></gantt-elastic>`,
      data: {
        tasks,
        options
      }
    });
    import GanttElastic from 'gantt-elastic';
    
    export default {
      components:{
        ganttElastic: GanttElastic
      },
      props:['tasks','options'],
      template:`<gantt-elastic :tasks="tasks" :options="options"></gantt-elastic>`,
      data(){
        return {};
      }
    }

    翻译自: https://vuejsexamples.com/elastic-gantt-chart-with-vue-js/

    vue.js 甘特图

    展开全文
  • Vue 甘特图

    千次阅读 热门讨论 2020-10-12 14:07:11
    vue甘特图,先大致介绍下核心功能: (1)横轴、纵轴拖拽; (2)自定义监听点击事件(双击、右键等)(3)任务之间显示父子层级关系;(4)左侧列表信息,右侧时间轴表示任务;(5)每个任务可以订制样式,并且...

    vue做甘特图,先大致介绍下核心功能: (1)横轴、纵轴拖拽; (2)自定义监听点击事件(双击、右键等)(3)任务之间显示父子层级关系;(4)左侧列表信息,右侧时间轴表示任务;(5)每个任务可以订制样式,并且可以动态修改样式;(6)自定义时间粒度显示(小时、天、星期、月、年);(7)支持大批量数据渲染;(8) 支持同行多节点渲染;(9)支持选中,以及批量选中;(9)优秀的扩展性,支持第三方插件。等等还有其他的一些功能。这里先看一下效果图:

     

     

     

     

      接下来会介绍用什么实现的,怎么使用,怎么添加拖拽、点击等各种功能,我以vue为例进行开发。

    1、使用GSTC做甘特图开发

      Git项目地址:https://github.com/neuronetio/gantt-schedule-timeline-calendar#weekendhighlight-plugin

      官方vue实例:https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar

      npm指令: npm i gantt-schedule-timeline-calendar

      官方做了 3 大主流框架的封装,具体看Git链接,这里我也附上了vue版本的 npm 包地址。

      基本使用如下:  ps:文章末尾我会贴一个完整的代码,如果是vue项目可以直接复制查看效果。下边这个是个极度阉割的。

    <template>
        <GSTC :config="config" />
    </template>
    <script>
    import GSTC from "vue-gantt-schedule-timeline-calendar";
    export default {
      data(){
        return {
          config: {
            height: 500,
            list: {
              rows: {
                "1": { id: "1", order: '订单1', },
              },
              columns: {
                data: {
                  id: { id: "id", data: "id", width: 50, header: { content: "序号" } },
                }
              }
            },
            chart: {
              items: {
                "1": { id: "1", rowId: "1", time: { start: new Date().getTime() + 1 * 24 * 60 * 60 * 1000, end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000 } }
              }
            },
          },
          subs: []
        }
      },
      beforeDestroy() { this.subs.forEach(unsub => unsub()); }
    }
    </script>
    <style lang="less" scoped>
      .wrapper .gantt-elastic__grid-line-time {
        display: none;
      }
    </style>
    
     

     

    基础使用已经贴代码了,不做赘述,不清楚的查看官方示例,接下来主要说核心功能如何配置,这方面官方描述的不是很清楚,但是Git的 issues 好多问题都关闭了,基本大部分问题都可以查到。

    1、基础展示,左侧多列表格展示

            

     

     

     这个主要配置config中的 list 属性,

      rows 代表左侧表格的行属性,key值是每行的id,多个key就有多行,通常都以数字做key值, 内部 具体属性是列信息。比如 order label line 等都是列信息,这个会一一对应到指定列。

        parentID 是父节点配置,一般配置了父节点,就会在 甘特图 中展示出父子层级来。

        expanded 是展开属性,默认false,父子层级是合上的,折叠隐藏子节点。如果想默认展示需要每个节点都加上这个属性。

      columns 代表左侧表格的列属性,key唯一就是列关键字。

        data 属性,是列,可以有多个属性,每个代表一列

          id 当前列的id

          data 列标识,和rows中每行的数据的字段唯一对应,比如  order、line 等

          isHTML 是否要展示HTML,默认false。  这个直接关系到content、html字段用哪个

          width 当前列宽度

          expander 是否显示层级,默认false不展示,设置为true,会展示出父子层级来,一般我们仅设置一列,当然设置多列也行。

          header 配置表头内容的

            content 表头想显示的内容

            html 写HTML,用来订制表头样式的,内容就是HTML,行内css

        percent 是左侧表格总宽度占甘特图的百分比,0就直接隐藏表格

        minWidth:是左侧表格的最小宽度

    list: {
              rows: {
                "1": {
                  id: "1",
                  order: '订单1',
                  label: "压缩机",
                  line: '线体1',
                  expanded: true
                },
                "3": {
                  id: "3",
                  order: '订单3',
                  label: "箱体",
                  line: '线体3',
                  parentId: '2',
                }
              },
              columns: {
                data: {
                  id: {
                    id: "id",
                    data: "id",
                    width: 50,
                    expander: true,
                    header: { content: "序号" }
                  },
                  order: {
                    id: "order",
                    data: "order",
                    header: { content: "生产订单" }
                  },
                  label: {
                    id: "label",
                    data: "label",
                    header: { content: "描述" }
                  }
                }
              }
            }

     

    2、右侧任务排列显示(包括订制样式)

          

     

    这个主要配置config中的 chart 属性,

       time 配置时间轴

        from 左侧开始时间,填写毫秒数

        to 右侧结束时间,填写毫秒数

        zoom 显示层级,10-22,越大,时间粒度展示的越大,越小,显示越精细,最小到5分钟

      items 任务快配置,注意这个可以同行若干任务展示

        id 当前任务的id

        rowId 左侧表格 rows 的id,通过这个关联,渲染到某一行

        label 当前任务的名称,会默认展示在任务中

        time 任务的开始、结束时间

          start 开始时间,填写毫秒数

          end 结束时间, 填写毫秒数

        style 订制样式,是个对象,写过jsx写法,写过react 、vue jsx 的应该都不默认,这里举个简单的例子,订制任务div的背景色 圆角等样式  { background: 'red', borderRadius: '3px' }

    chart: {
              time: {
                from: new Date().getTime() - 2 * 24 * 60 * 60 * 1000,
                to: new Date().getTime() + 8 * 24 * 60 * 60 * 1000,
                zoom: 22,    
              },
              items: {
                "1": {
                  id: "1",
                  rowId: "1",
                  label: "Item 1",
                  time: {
                    start: new Date().getTime() + 1 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000
                  },
                  style: {  // 每个块的样式
                    background: 'blue'
                  }
                },
                "21": {
                  id: "21",
                  rowId: "2",
                  label: "Item 2-1",
                  time: {
                    start: new Date().getTime() + 2 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 3 * 24 * 60 * 60 * 1000
                  }
                }
              }
            }

     

    3、配置右侧横轴的时间显示

         

     

     这个主要配置config中的 locale 属性,时间的语言环境配置,这里看文档详细些,下面只详说2个属性,

      weekdays 配置 每周显示的文案   主要是做国际化用的

      months 配置月的,也是做国际化的

    locale: {
              name: "zh",
              Now: "Now",
              weekdays:["周日","周一","周二","周三","周四","周五","周六"],
              months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
            }

     

    4、监听鼠标右击事件

          

     

     这个主要配置config中的 actions 属性,他是对象,以下是他所有能监听dom,很多,这篇博客就只介绍人物块的事件监听,其他的不做一一赘述了

    • main
    • list
    • list-column
    • list-column-header
    • list-column-header-resizer
    • list-column-header-resizer-dots
    • list-column-row
    • list-column-row-expander
    • list-column-row-expander-toggle
    • list-toggle
    • chart
    • chart-calendar
    • chart-calendar-date
    • chart-timeline
    • chart-timeline-grid
    • chart-timeline-grid-row
    • chart-timeline-grid-row-block
    • chart-timeline-items
    • chart-timeline-items-row
    • chart-timeline-items-row-item

      这个监听函数会接收2个参数,element  和 data ,一个是dom,另一个是 任务节点的数据。根据官方要求,监听函数必须返回一个对象,此对象必须包含 update  destroy 2个方法,分别是位置更新和销毁时需要执行的方法。具体写法请见如下代码:

    actions: {
          'chart-timeline-items-row-item': [this.addListenClick] // 监听右击事件
    }
    
    methods:{
        addListenClick(element, data) {
          const onClick = (e) => {
            e.preventDefault()
            // console.log(data)
            this.modal = {
              visible: true,
              title: data.item.label,
              data
            }
            return false
          }
          element.addEventListener('contextmenu', onClick);
          return {
            update(element, newData) {
              data = newData;
            },
            destroy(element, data) {
              element.removeEventListener('click', onClick);
            }
          };
        },
        closeModal() {
          this.modal = {
            visible: false,
            title: '',
            data: {}
          }
        }
      },

    5、任务的横轴、纵轴拖动

           

     

     

    这个主要配置config中的 plugins 属性,

      ItemMovement 插件,这个是官方开发的用来拖拽任务的插件。这个包的插件系统做的很好,官方提供了几种不错的插件,同时还支持其他的第三方插件,有兴趣的可以自己试试,这里先介绍拖拽插件,

         moveable 拖拽的方向, x 支持横轴拖拽;   y 支持纵轴拖拽;  true 横轴、纵轴都可以拖拽; false 禁止拖拽

        resizeable 是否可以拖拽,true开启拖拽

        resizerContent 拖拽的图标,直接写HTML,可以自己定制拖拽图标的样式

        collisionDetection: 拖拽过程中是否允许元素重叠, true 不允许重叠

        ghostNode  false 不展示重影节点

        snapStart 拖拽开始时间点回调,这个比较机制特殊,拖拽位置的时候触发这个方法,参数接收开始时间  时间变化 当前节点数据,默认是毫秒级的刷新,会卡,我们做if判断1小时拖拽

        snapEnd 拖拽结束时间点回调,这个是拖动任务块大小时触发,接收结束时间 时间段。用法同上。具体请看如下代码:

    plugins: [
              // 拖动 x 横向, y 纵向
              ItemMovement({
                moveable: 'x',
                resizerContent: '<div class="resizer">-></div>',
                ghostNode: false,
                snapStart(time, diff, item) {
                  if(Math.abs(diff) > 14400000) {
                    return time + diff
                  }
                  return time
                },
                snapEnd(time, diff, item) {
                  if(Math.abs(diff) > 14400000) {
                    return time + diff
                  }
                  return time
                }
              })
            ]

     

    6、选中任务

          

     

     

    这个主要配置config中的 plugins 属性,

      Selection插件,单个选中、批量选中插件。

        grid 能否选中单元格

        items  能否选中任务

        rows  能否选中行

        rectStyle 矩形样式

        selected 选中的回调

        deselected  取消选中的回调

        canSelected  可选中的的回调,用来过滤哪些可以选中

        canDeselected 可取消选中的回调,用来过滤哪些可以取消选中

    plugins: [
              Selection({
                items: false,
                rows: false,
                grid: true,
                rectStyle: { opacity: '0.0' }, 
                canSelect(type, currentlySelecting) {
                  if (type === 'chart-timeline-grid-row-block') {
                    return currentlySelecting.filter(selected => {
                      if (!selected.row.canSelect) return false;
                      for (const item of selected.row._internal.items) {
                        if (
                          (item.time.start >= selected.time.leftGlobal && item.time.start <= selected.time.rightGlobal) ||
                          (item.time.end >= selected.time.leftGlobal && item.time.end <= selected.time.rightGlobal) ||
                          (item.time.start <= selected.time.leftGlobal && item.time.end >= selected.time.rightGlobal)
                        ) {
                          return false;
                        }
                      }
                      return true;
                    });
                  }
                  return currentlySelecting;
                },
                canDeselect(type, currently, all) {
                  if (type === 'chart-timeline-grid-row-blocks') {
                    return all.selecting['chart-timeline-grid-row-blocks'].length ? [] : currently;
                  }
                  return [];
                }
              })
            ]

    小结:

      以上就是整个甘特图的使用了,这是我用过最符合项目需求的甘特图,他的开发团队也在持续的维护这个项目,很赞。

      最后贴一段完整的 vue 示例代码:

    <template>
      <div class="wrapper">
        <GSTC :config="config" />
        <infor-modal
          :visible="modal.visible"
          :title="modal.title"
          :dataSource="modal.data"
          @handleModal="closeModal"
        />
      </div>
    </template>
    
    <script>
    import GSTC from "vue-gantt-schedule-timeline-calendar";
    import ItemMovement from "gantt-schedule-timeline-calendar/dist/ItemMovement.plugin.js"
    import Selection from "gantt-schedule-timeline-calendar/dist/Selection.plugin.js"
    import inforModal from "./inforModal"
    
    export default {
      components:{
        GSTC,
        inforModal
      },
      props:{},
      data(){
        return {
          config: {
            height: 500,
            list: {
              // 行属性
              rows: {
                "1": {
                  id: "1",
                  order: '订单1',
                  label: "压缩机",
                  line: '线体1',
                  expanded: true
                },
                "3": {
                  id: "3",
                  order: '订单3',
                  label: "箱体",
                  line: '线体3',
                  parentId: '2',
                },
                "4": {
                  id: "4",
                  order: '订单4',
                  label: "空调总装",
                  line: '线体4',
                },
                "2": {
                  id: "2",
                  order: '订单2',
                  label: "门体",
                  parentId: '1',
                  line: '线体2',
                  expanded: true
                },
                "5": {
                  id: "5",
                  order: '订单5',
                  label: "冰箱总装",
                  line: '线体5',
                },
                "6": {
                  id: "6",
                  order: '订单6',
                  label: "洗衣机总装",
                  line: '线体6',
                },
              },
              // 列定义
              columns: {
                data: {
                  id: {
                    id: "id",
                    data: "id",
                    width: 50,
                    header: {
                      content: "序号"
                    }
                  },
                  order: {
                    id: "order",
                    data: "order",
                    width: 120,
                    header: {
                      content: "生产订单"
                    }
                  },
                  label: {
                    id: "label",
                    data: "label",
                    width: 120,
                    expander: true,
                    header: {
                      content: "描述"
                    }
                  },
                  line: {
                    id: "line",
                    data: "line",
                    width: 120,
                    header: {
                      content: "线体"
                    }
                  },
                }
              }
            },
            chart: {
              time: {  // 时间轴开始截至,
                from: new Date().getTime() - 2 * 24 * 60 * 60 * 1000,
                to: new Date().getTime() + 8 * 24 * 60 * 60 * 1000,
                zoom: 22,    // 10-22 缩放,默认 Shift + 滚轮, 默认缩放展示时间粒度, 一共有 小时、天、周、月、年
              },
              items: {
                "1": {
                  id: "1",
                  rowId: "1",
                  label: "Item 1",
                  time: {
                    start: new Date().getTime() + 1 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000
                  },
                  style: {  // 每个块的样式
                    background: 'blue'
                  }
                },
                "21": {
                  id: "21",
                  rowId: "2",
                  label: "Item 2-1",
                  time: {
                    start: new Date().getTime() + 2 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 3 * 24 * 60 * 60 * 1000
                  }
                },
                "22": {
                  id: "22",
                  rowId: "2",
                  label: "Item 2-2",
                  time: {
                    start: new Date().getTime() + 3 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 4 * 24 * 60 * 60 * 1000
                  }
                },
                "3": {
                  id: "3",
                  rowId: "3",
                  label: "Item 3",
                  time: {
                    start: new Date().getTime() + 3 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000
                  }
                },
                "4": {
                  id: "4",
                  rowId: "4",
                  label: "Item 4",
                  time: {
                    start: new Date().getTime() + 2 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000
                  }
                },
                "5": {
                  id: "5",
                  rowId: "5",
                  label: "Item 5",
                  time: {
                    start: new Date().getTime() + 3 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000
                  }
                },
                "6": {
                  id: "6",
                  rowId: "6",
                  label: "Item 6",
                  time: {
                    start: new Date().getTime() + 5 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 6 * 24 * 60 * 60 * 1000
                  }
                },
              }
            },
            locale: {
              name: "zh",
              Now: "Now",
              weekdays:["周日","周一","周二","周三","周四","周五","周六"],
              months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
            },
            actions: {
              'chart-timeline-items-row-item': [this.addListenClick] // 监听右击事件
            },
            plugins: [
              // 拖动 x 横向, y 纵向
              ItemMovement({
                moveable: 'x',
                resizerContent: '<div class="resizer">-></div>',
                ghostNode: false,
                collisionDetection: false,
                snapStart(time, diff, item) {
                  if(Math.abs(diff) > 14400000) {
                    return time + diff
                  }
                  return time
                },
                snapEnd(time, diff, item) {
                  if(Math.abs(diff) > 14400000) {
                    return time + diff
                  }
                  return time
                }
              }),
              Selection({
                items: false,
                rows: false,
                grid: true,
                rectStyle: { opacity: '0.0' }, 
                canSelect(type, currentlySelecting) {
                  if (type === 'chart-timeline-grid-row-block') {
                    return currentlySelecting.filter(selected => {
                      if (!selected.row.canSelect) return false;
                      for (const item of selected.row._internal.items) {
                        if (
                          (item.time.start >= selected.time.leftGlobal && item.time.start <= selected.time.rightGlobal) ||
                          (item.time.end >= selected.time.leftGlobal && item.time.end <= selected.time.rightGlobal) ||
                          (item.time.start <= selected.time.leftGlobal && item.time.end >= selected.time.rightGlobal)
                        ) {
                          return false;
                        }
                      }
                      return true;
                    });
                  }
                  return currentlySelecting;
                },
                canDeselect(type, currently, all) {
                  if (type === 'chart-timeline-grid-row-blocks') {
                    return all.selecting['chart-timeline-grid-row-blocks'].length ? [] : currently;
                  }
                  return [];
                }
              })
            ]
          },
          modal: {
            visible: false,
            title: '',
            data: {}
          },
          subs: []
        }
      },
      watch:{},
      computed:{},
      methods:{
        addListenClick(element, data) {
          const onClick = (e) => {
            e.preventDefault()
            // console.log(data)
            this.modal = {
              visible: true,
              title: data.item.label,
              data
            }
            return false
          }
          element.addEventListener('contextmenu', onClick);
          return {
            update(element, newData) {
              data = newData;
            },
            destroy(element, data) {
              element.removeEventListener('click', onClick);
            }
          };
        },
        closeModal() {
          this.modal = {
            visible: false,
            title: '',
            data: {}
          }
        }
      },
      created(){},
      mounted(){
      },
      beforeDestroy() {
        this.subs.forEach(unsub => unsub());
      }
    }
    </script>
    <style lang="less" scoped>
      .wrapper .gantt-elastic__grid-line-time {
        display: none;
      }
    </style>

    转自:https://www.cnblogs.com/pengfei-nie/p/13092159.html

    展开全文
  • vue甘特图

    千次阅读 2018-07-06 15:11:44
    npm install dhtmlx-gantt --save安装甘特图到自己的项目内之后可以创建一个vue文件&lt;template&gt; &lt;div ref="gantt"&gt;&lt;/div&gt; &lt;/template&gt; &...

    npm install dhtmlx-gantt --save

    安装甘特图到自己的项目内

    之后可以创建一个vue文件

    <template>
      <div ref="gantt"></div>
    </template>
    
    <script>
    import 'dhtmlx-gantt'
    export default {
      name: 'gantt',
      props: {
        tasks: {
          type: Object,
          default () {
            return {data: [], links: []}
          }
        }
      },
    
      mounted: function () {
        gantt.init(this.$refs.gantt)
        gantt.parse(this.$props.tasks)
      }
    }
    </script>
    
    <style>
        @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
    </style>

    打开App.vue并添加以下代码

    <template>
      <div class="container">
        <gantt class="left-container" :tasks="tasks"></gantt>
      </div>
    </template>

    <script>
    import Gantt from './components/Gantt.vue';

    export default {
      name: 'app',
      components: {Gantt},
      data () {
        return {
          tasks: {
            data: [
              {id: 1, text: 'Task #1', start_date: '15-04-2017', duration: 3, progress: 0.6},
              {id: 2, text: 'Task #2', start_date: '18-04-2017', duration: 3, progress: 0.4}
            ],
            links: [
              {id: 1, source: 1, target: 2, type: '0'}
            ]
          },
        }
      }
    }
    </script>

    我们应该在页面上能够看到带有预定义任务的甘特图,如果没有可以在标签上添加高度


    展开全文
  • 关键字:[甘特图,javascript甘特图,打字稿甘特图,项目经理,js甘特图,js计划程序,js时间轴,javascript时间线,javascript计划,js计划程序,javascript日历] 永远记住,留下一颗 :star: 特征 弹性-您几乎...
  • Vue 2手写甘特图

    2020-11-09 18:16:59
    Vue 手写甘特图
  • https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar 具体的Demo案例:https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar-example 2、vue甘特图,先大致介绍下核心功能: (1...
  • Vue+dhtmlx前端甘特图

    2020-11-24 15:11:09
    Vue+dhtmlx前端甘特图
  • vue插件之甘特图

    万次阅读 2019-05-15 15:23:57
    vue插件之甘特图 下载包 npm install dhtmlx-gantt --save 创建Gantt.vue文件 <template> <div ref="gantt"></div> </template> <script> import 'dhtmlx-gantt' export ...
  • vue 甘特图插件

    千次阅读 2019-06-17 11:18:25
    官网地址:https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/
  • 基于vue实现甘特图实现上下拖拽,达到排班的要求,之前困于没有好的方案,在我研究两周后最终实现甘特图的拖拽效果
  • vue甘特图上调接口

    2018-07-17 15:05:30
    vue甘特图单击‘’+‘’是创建任务,双击任务栏是更新,在图上操作也会识别, 链接的线双击会出现删除提示   gantt.attachEvent('onAfterTaskAdd', (id, task) =&gt; {//创建任务 this.$emit('task-updated...
  • 我在使用highCharts的曲线图,柱状图时,都没有任何问题,但是在使用甘特图时,控制台报错 missingModuleFor: xrange" 很明显是缺少甘特图的文件,问题是该怎么引入呢? 引入特殊图表,解决办法来自于这篇博客:参考...
  • vue echart甘特图

    2019-10-04 23:35:28
    let _this = this; let data = [ { list: [ { colorNum: 0, endTime: "2019-10-10 00:00:00", item: "墙柱", ...
  • vue中展示甘特图

    千次阅读 2020-11-16 17:29:36
    今天分享一篇关于查看任务的甘特图的文章 首先,用的插件是dhtmlx-gantt,官网地址https://docs.dhtmlx.com/gantt/ 官网的Getting started模块是查看甘特图的各种配置 废话不多说,上代码详细说明 子组件模板 <...
  • 基于vue cli3实现甘特图拖拽

    千次阅读 2019-11-14 17:27:31
    基于vue cli3实现甘特图拖拽 因为工作中要用到甘特图,所以我在网上搜索可以用的甘特图,搜索了好多,但是网上搜到大多数都很鸡肋,不能直接使用,最后我在github上搜索到一个相对成熟的甘特图。附上链接...
  • vue + element 甘特图

    千次阅读 2020-09-03 09:12:56
    App.vue <template> <div id="app"> <wlGantt ref="wl-gantt-demo" lazy use-real-time use-check-column use-index-column end-date="2020-01-01" start-date="2019-09-01" date-type=...
  • vue中echarts实现甘特图

    千次阅读 2018-12-24 19:55:10
    vue中使用echarts实现甘特图,在网上找了很多代码都不完整,大家可以尝试下面这个从官网搬运过来的阶梯瀑布图,做了小更改 效果如下: &lt;template&gt; &lt;div id="myChart" ref=&...
  • echarts vue 甘特图实现

    2018-09-30 11:08:00
    厂家机型故障分析 ...--柱状为例 --> <script src="/static/js/component/dateType.js"></script> <script src="/static/js/component/chart-wrapper.js"></script> ...
  • Vue.js的简单易用的甘特图组件 主页 安装 您可以使用npm在项目中安装和使用Vue-Ganttastic: npm install vue-ganttastic 是Vue-Ganttastic的对等依赖项。 为了使Vue-Ganttastic正常工作,您需要在项目中安装它:...
  • 偶然间发现这个可以做甘特图,进官网一看发现图挺美观的,而且官方还提供了多种甘特图实例,还集成了不同的前端框架,真是天助我也! FusionCharts官网:https://www.fusioncharts.com/ API:http
  • 基于Vue-Gantt-chart组件实现可拖拽甘特图甘特图需求总结甘特图组件评估(含github地址)收费免费评估总结甘特图可拖拽可拉伸拖拽demo实现高级拖拽动画的思路:拉伸demo甘特图最终效果 甘特图需求总结 项目中要用到...
  • vue实现甘特图,动态展示数据

    千次阅读 2019-10-14 11:08:59
    1.在开发一个后台系统时,遇到一个甘特图的需求 2.通过特定的数据结构和vue的循环判断加上table原生表格的合并行列实现需求 效果 <template> <div class="hello"> <!--Echarts图表盒子--> &...
  • Vue.JS】纯 Vue.js 制作甘特图

    千次阅读 2019-08-18 22:18:28
    效果 Vue.js 引入 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> CSS 代码 <style> table { border-collapse: collapse; border-width: 1; } p ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 543
精华内容 217
关键字:

甘特图vue

vue 订阅