weixin_43858949
陈小洋
2019-05-30 15:37
采纳率: 0%
浏览 1.3k

react怎么开发甘特图?

公司要开发一个工程中心,所以要求在后台管理系统中添加一个甘特图,添加三级子事件那种,我在网上也找到了不少开发甘特图的插件:https://linux.ctolib.com/guiqui-react-timeline-gantt.html#articleHeader7 ,现在项目里使用的就是这个,但是这个插件无法添加子事件,更别说三级子事件了,下面是我代码,和展示效果,和上面网站几乎是一样的,不过它会在你修改事件标题后报错,导致无法移动,所以我在up事件中做了if判断,禁用了修改标题,求求好心大佬,指点一下,有没有好用的甘特图插件!!!!图片说明

/**
 * Created by GYL on 2018/8/24
 */
import React, { Component } from 'react';
import TimeLine from "react-gantt-timeline";
import "./styles.css";
class Gantetu extends Component {

    constructor(props) {
        super(props);
        let d1 = new Date();
        let d2 = new Date();
        d2.setDate(d2.getDate() + 2);
        let d3 = new Date();
        d3.setDate(d3.getDate() + 3);
        let d4 = new Date();
        d4.setDate(d4.getDate() + 4);
        console.log('d1:',d1,'d2:',d2,'d3:',d3,'d4:',d4)
        let data = [
          {
            id: 1,
            start: d1,
            end: d2,
            name: "Demo Task 1"
          },
          {
            id: 2,
            start: d3,
            end: d4,
            name: "Demo Task 2",
            color: "orange"
          },

        ];

        this.state = { data: data, links: [] };
      }
      genID() {
        function S4() {
          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }
        return (
          S4() +
          S4() +
          "-" +
          S4() +
          "-4" +
          S4().substr(0, 3) +
          "-" +
          S4() +
          "-" +
          S4() +
          S4() +
          S4()
        ).toLowerCase();
      }
      createLink(start, end) {
        console.log(start, end,'createLink')
        return {
          id: this.genID(),
          start: start.task.id,
          startPosition: start.position,
          end: end.task.id,
          endPosition: end.position
        };
      }
      onUpdateTask = (item, props) => {

        console.log('onUpdateTask',item, props)
        if(!props.start) {
            return
        }
        item.start = props.start;
        item.end = props.end;
        this.setState({ data: [...this.state.data] });
      };
      onCreateLink = item => {
          console.log('onCreateLink',item,this.createLink(item.start, item.end))
        let newLink = this.createLink(item.start, item.end);
        this.setState({ links: [...this.state.links, newLink] });
      };

    render() {



        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '76vh';
        let tableHeight = 310;
        if (width > 1367) {
            tableHeight = 380;
            containerHeight = '83vh';
        }


        return (
            <div className="app-container">
                <h1>Getting Started Demo</h1>
                {/* DayWidth<input type="range" min="30" max="500" value={this.state.daysWidth} onChange={this.handleDayWidth} step="1"/>
       Item Height<input type="range" min="30" max="500" value={this.state.itemheight} onChange={this.handleItemHeight} step="1"/> */}
                <div className="time-line-container">
                    <TimeLine
                        data={this.state.data}
                        links={this.state.links}
                        onUpdateTask={this.onUpdateTask}
                        onCreateLink={this.onCreateLink}
                    />
                </div>
            </div>
        );


    }
}
export default Gantetu;



  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

相关推荐