甘特图的应用

可以使用这个类库：

gantt-schedule-timeline-calendar

在 vue 项目中引入这个类库

创建 vue 项目

vue create vueapp

安装

npm i gantt-schedule-timeline-calendar

基本上，您需要创建一些配置，从中创建gstc状态，初始化组件并将其装载到DOM。

<template>
    <div ref="test"></div>
</template>
<script>
import GSTC from "gantt-schedule-timeline-calendar";

export default {
    data() {
        return {
            ganttSate: null,
            sc: null,
            rowsFromDB: [
                {
                    id: 1,
                    label: "Row 1",
                },
                {
                    id: 2,
                    label: "Row 2",
                },
            ]
        }
    },
    methods: {
        initGantt() {
            const config = {
                /* ... */
            };
            // 从配置对象生成GSTC状态
            this.ganttSate = GSTC.api.stateFromConfig(config);
            // 安装组件
            const app = GSTC({
                element: this.$refs.test,
                state: this.ganttSate,
            });
        }
    },
    mounted() {
        this.initGantt();
        this.initSocket();

    }
}
</script>

一个例子

<template>
    <div ref="test"></div>
</template>
<script>
import 'gantt-schedule-timeline-calendar/dist/style.css'
import GSTC from "gantt-schedule-timeline-calendar";

export default {
    data() {
        return {
            ganttSate: null,
            sc: null,
            rowsFromDB: [
                {
                    id: 1,
                    label: "Row 1",
                },
                {
                    id: 2,
                    label: "Row 2",
                },
            ]
        }
    },
    mounted() {
        this.initGantt();
    },
    beforeUnmount() {
        this.sc.close();
    },
    methods: {
        initGantt() {
            const itemsFromDB = [
                {
                    id: "1",
                    label: "Item 1",
                    rowId: "1",
                    time: {
                        start: GSTC.api.date("2020-01-01").startOf("day").valueOf(),
                        end: GSTC.api.date("2020-01-05").endOf("day").valueOf(),
                    },
                },
                {
                    id: "2",
                    label: "Item 2",
                    rowId: "1",
                    time: {
                        start: GSTC.api.date("2020-02-01").startOf("day").valueOf(),
                        end: GSTC.api.date("2020-02-03").endOf("day").valueOf(),
                    },
                },
                {
                    id: "3",
                    label: "Item 3",
                    rowId: "1",
                    time: {
                        start: GSTC.api.date("2020-01-15").startOf("day").valueOf(),
                        end: GSTC.api.date("2020-01-20").endOf("day").valueOf(),
                    },
                },
            ];
            const columnsFromDB = [
                {
                    id: "id",
                    label: "ID",
                    data: ({ row }) => GSTC.api.sourceID(row.id),
                    sortable: ({ row }) => Number(GSTC.api.sourceID(row.id)),
                    width: 80,
                    header: {
                        content: "ID",
                    },
                },
                {
                    id: "label",
                    data: "label",
                    sortable: "label",
                    isHTML: false,
                    width: 150,
                    header: {
                        content: "标题",
                    },
                },
            ];
            const config = {
                licenseKey: "你的密钥",
                list: {
                    columns: {
                        data: GSTC.api.fromArray(columnsFromDB),
                    },
                    rows: GSTC.api.fromArray(this.rowsFromDB),
                },
                chart: {
                    items: GSTC.api.fromArray(itemsFromDB),
                },
            };
            this.ganttSate = GSTC.api.stateFromConfig(config);
            const app = GSTC({
                element: this.$refs.test,
                state: this.ganttSate,
            });
        },
    },
}
</script>
<style lang="scss"></style>
  

运行效果：

要获得您的域的免费密钥，请访问 :

https://gstc.neuronet.io/free-key

新增一项任务可以通过 state.update('config.list.rows', ()=>{})  ：

<template>
  <div ref="test"></div>
  <button @click="add">新增一个任务</button>
  <button @click="test">test</button>
</template>
<script>
import 'gantt-schedule-timeline-calendar/dist/style.css'
import GSTC from "gantt-schedule-timeline-calendar";
import { nanoid } from 'nanoid'
import { io } from "socket.io-client";

const GSTCID = GSTC.api.GSTCID;
export default {
  data() {
    return {
      ganttSate: null,
      sc: null,
      rowsFromDB: [
        {
          id: 1,
          label: "Row 1",
        },
        {
          id: 2,
          label: "Row 2",
        },
      ]
    }
  },
  mounted() {
    this.initGantt();
    this.initSocket();
  },
  beforeUnmount() {
    this.sc.close();
  },
  methods: {
    add() {
      // console.log('this.ganttSate', this.ganttSate)
      const uuid = nanoid();
      const newRowId = GSTCID(uuid);
      // console.log('newRowId', newRowId)
      this.rowsFromDB.push({
        id: newRowId,
        label: 'row' + uuid
      })
      this.sc.emit('addnewrow', this.rowsFromDB);
      this.ganttSate.update('config.list.rows', () => {
        return GSTC.api.fromArray([...this.rowsFromDB])
      })
    },
    test() {
      const rowId = GSTCID("1");
      this.ganttSate.update("config.list.rows." + rowId + ".label", (oldLabel) => {
        return "new label";
      });
    },
    initGantt() {
      const itemsFromDB = [
        {
          id: "1",
          label: "Item 1",
          rowId: "1",
          time: {
            start: GSTC.api.date("2020-01-01").startOf("day").valueOf(),
            end: GSTC.api.date("2020-01-05").endOf("day").valueOf(),
          },
        },
        {
          id: "2",
          label: "Item 2",
          rowId: "1",
          time: {
            start: GSTC.api.date("2020-02-01").startOf("day").valueOf(),
            end: GSTC.api.date("2020-02-03").endOf("day").valueOf(),
          },
        },
        {
          id: "3",
          label: "Item 3",
          rowId: "1",
          time: {
            start: GSTC.api.date("2020-01-15").startOf("day").valueOf(),
            end: GSTC.api.date("2020-01-20").endOf("day").valueOf(),
          },
        },
      ];
      const columnsFromDB = [
        {
          id: "id",
          label: "ID",
          data: ({ row }) => GSTC.api.sourceID(row.id), // 显示原始id（不是内部GSTCID）
          sortable: ({ row }) => Number(GSTC.api.sourceID(row.id)), // 按转换为数字的id排序
          width: 80,
          header: {
            content: "ID",
          },
        },
        {
          id: "label",
          data: "label",
          sortable: "label",
          isHTML: false,
          width: 150,
          header: {
            content: "标题",
          },
        },
      ];
      // 配置对象
      const config = {
        // 要获得您的域的免费密钥，请访问 https://gstc.neuronet.io/free-key
        // 如果您需要商业许可证，请访问 https://gantt-schedule-timeline-calendar.neuronet.io/pricing
        licenseKey: "密钥或许可证",
        list: {
          columns: {
            data: GSTC.api.fromArray(columnsFromDB),
          },
          rows: GSTC.api.fromArray(this.rowsFromDB),
        },
        chart: {
          items: GSTC.api.fromArray(itemsFromDB),
        },
      };
      // 从配置对象生成GSTC状态
      this.ganttSate = GSTC.api.stateFromConfig(config);
      // 安装组件
      const app = GSTC({
        element: this.$refs.test,
        state: this.ganttSate,
      });
    },
    initSocket() {
      this.sc = io('http://127.0.0.1:3000');
      this.sc.on('connect', () => {
        // console.log('与socket服务器通讯成功')
      });
      this.sc.on('rowchange', (rowsFromDB) => {
        if (this.ganttSate) {
          this.ganttSate.update('config.list.rows', () => {
            return GSTC.api.fromArray([...rowsFromDB])
          })
        }
      })
    }
  },
}
</script>
<style lang="scss"></style>