使用GoJS构建项目管理流程图表的Vue组件

最终效果图：

在现代项目管理中，可视化工具是帮助团队理解任务依赖关系、关键路径和时间表的重要手段。本文将介绍如何使用GoJS库在Vue.js中构建一个项目管理图表组件，展示任务的早期开始时间、持续时间、早期完成时间、延迟开始时间、延迟完成时间以及任务的松弛时间。

1. 项目背景

GoJS是一个功能强大的JavaScript库，专门用于构建交互式图表和数据可视化。它支持多种图表类型，包括流程图、组织结构图、网络图等。在本文中，我们将使用GoJS来构建一个项目管理图表，展示任务之间的依赖关系以及每个任务的时间属性。

2. 代码分析

2.1 模板部分

<template>
  <div
    ref="myDiagramDiv"
    style="width:1400px; height:600px; background-color: #DAE4E4;"
  />
</template>

在Vue组件的模板部分，我们定义了一个div元素，用于承载GoJS图表。ref属性用于在Vue组件中引用这个DOM元素，以便在脚本部分对其进行操作。图表的宽度和高度分别设置为1400px和600px，背景颜色为#DAE4E4。

2.2 脚本部分

<script>
import * as go from 'gojs'
let $ = go.GraphObject.make
export default {
  name: 'SupervisorControl',
  data() {
    return {
      myDiagram: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      var blue = '#0288D1'
      var pink = '#ccc'
      var pinkfill = '#ccc'
      var bluefill = '#B3E5FC'
      this.myDiagram =
      $(go.Diagram, this.$refs.myDiagramDiv,
        {
          initialAutoScale: go.Diagram.Uniform,
          layout: $(go.LayeredDigraphLayout)
        })
      this.myDiagram.nodeTemplate =
      $(go.Node, 'Auto',
        $(go.Shape, 'Rectangle',
          { fill: 'white', strokeWidth: 2 },
          new go.Binding('fill', 'critical', function(b) { return (b ? pinkfill : bluefill) }),
          new go.Binding('stroke', 'critical', function(b) { return (b ? pink : blue) })),
        $(go.Panel, 'Table',
          { padding: 0.5 },
          $(go.RowColumnDefinition, { column: 1, separatorStroke: 'black' }),
          $(go.RowColumnDefinition, { column: 2, separatorStroke: 'black' }),
          $(go.RowColumnDefinition, { row: 1, separatorStroke: 'black', background: 'white', coversSeparators: true }),
          $(go.RowColumnDefinition, { row: 2, separatorStroke: 'black' }),
          $(go.TextBlock, // earlyStart
            new go.Binding('text', 'earlyStart'),
            { row: 0, column: 0, margin: 5, textAlign: 'center' }),
          $(go.TextBlock, new go.Binding('text', 'length'),
            { row: 0, column: 1, margin: 5, textAlign: 'center' }),
          $(go.TextBlock, // earlyFinish
            new go.Binding('text', '',			 function(d) { return (d.earlyStart + d.length).toFixed(2) }),
            { row: 0, column: 2, margin: 5, textAlign: 'center' }),
          $(go.TextBlock,
            new go.Binding('text', 'text'),
            {
              row: 1, column: 0, columnSpan: 3, margin: 5,
              textAlign: 'center', font: 'bold 14px sans-serif'
            }),
          $(go.TextBlock, // lateStart
            new go.Binding('text', '',				 function(d) { return (d.lateFinish - d.length).toFixed(2) }),
            { row: 2, column: 0, margin: 5, textAlign: 'center' }),
          $(go.TextBlock, // slack
            new go.Binding('text', '',				 function(d) { return (d.lateFinish - (d.earlyStart + d.length)).toFixed(2) }),
            { row: 2, column: 1, margin: 5, textAlign: 'center' }),
          $(go.TextBlock, // lateFinish
            new go.Binding('text', 'lateFinish'),
            { row: 2, column: 2, margin: 5, textAlign: 'center' })
        )
      )
      function linkColorConverter(linkdata, elt) {
        var link = elt.part
        if (!link) return blue
        var f = link.fromNode
        if (!f || !f.data || !f.data.critical) return blue
        var t = link.toNode
        if (!t || !t.data || !t.data.critical) return blue
        return pink
      }

      this.myDiagram.linkTemplate =
      $(go.Link,
        { toShortLength: 6, toEndSegmentLength: 30 },
        $(go.Shape,
          { strokeWidth: 2 },
          new go.Binding('stroke', '', linkColorConverter)),
        $(go.Shape, // arrowhead
          { toArrow: 'Triangle', stroke: null, scale: 1 },
          new go.Binding('fill', '', linkColorConverter))
      )
      var nodeDataArray = [
        { key: 1, text: 'Start', length: 0, earlyStart: 0, lateFinish: 0, critical: true },
        { key: 2, text: 'a', length: 4, earlyStart: 0, lateFinish: 4, critical: true },
        { key: 3, text: 'b', length: 5.33, earlyStart: 0, lateFinish: 9.17, critical: false },
        { key: 4, text: 'c', length: 5.17, earlyStart: 4, lateFinish: 9.17, critical: true },
        { key: 5, text: 'd', length: 6.33, earlyStart: 4, lateFinish: 15.01, critical: false },
        { key: 6, text: 'e', length: 5.17, earlyStart: 9.17, lateFinish: 14.34, critical: true },
        { key: 7, text: 'f', length: 4.5, earlyStart: 10.33, lateFinish: 19.51, critical: false },
        { key: 8, text: 'g', length: 5.17, earlyStart: 14.34, lateFinish: 19.51, critical: true },
        { key: 9, text: 'Finish', length: 0, earlyStart: 19.51, lateFinish: 19.51, critical: true }
      ]
      var linkDataArray = [
        { from: 1, to: 2 },
        { from: 1, to: 3 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 6 },
        { from: 4, to: 6 },
        { from: 5, to: 7 },
        { from: 6, to: 8 },
        { from: 7, to: 9 },
        { from: 8, to: 9 }
      ]
      this.myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)
      this.myDiagram.add(
        $(go.Node, 'Auto',
          $(go.Shape, 'Rectangle', { fill: bluefill }),
          $(go.Panel, 'Table',
            $(go.RowColumnDefinition, { column: 1, separatorStroke: 'black' }),
            $(go.RowColumnDefinition, { column: 2, separatorStroke: 'black' }),
            $(go.RowColumnDefinition, { row: 1, separatorStroke: 'black', background: bluefill, coversSeparators: true }),
            $(go.RowColumnDefinition, { row: 2, separatorStroke: 'black' }),
            $(go.TextBlock, 'Early Start', { row: 0, column: 0, margin: 5, textAlign: 'center' }),
            $(go.TextBlock, 'Length', { row: 0, column: 1, margin: 5, textAlign: 'center' }),
            $(go.TextBlock, 'Early Finish', { row: 0, column: 2, margin: 5, textAlign: 'center' }),
            $(go.TextBlock, 'Activity Name', {
              row: 1, column: 0, columnSpan: 3, margin: 5,
              textAlign: 'center', font: 'bold 14px sans-serif'
            }),
            $(go.TextBlock, 'Late Start', { row: 2, column: 0, margin: 5, textAlign: 'center' }),
            $(go.TextBlock, 'Slack', { row: 2, column: 1, margin: 5, textAlign: 'center' }),
            $(go.TextBlock, 'Late Finish', { row: 2, column: 2, margin: 5, textAlign: 'center' })
          )
        ))
    }
  }
}
</script>

在脚本部分，我们首先导入了GoJS库，并定义了一个Vue组件。组件的data函数返回一个对象，其中包含一个myDiagram属性，用于存储GoJS图表的实例。

在mounted生命周期钩子中，我们调用了init方法，该方法负责初始化GoJS图表。init方法中，我们定义了节点的模板和链接的模板，并设置了图表的布局和自动缩放选项。

节点的模板使用了go.Node和go.Shape来定义节点的外观，并使用go.Panel和go.TextBlock来显示任务的时间属性和名称。链接的模板使用了go.Link和go.Shape来定义链接的外观，并根据任务的关键路径设置链接的颜色。

最后，我们定义了一个节点数据数组和一个链接数据数组，并将它们传递给go.GraphLinksModel来创建图表的数据模型。

3. 总结

通过本文的介绍，我们了解了如何使用GoJS库在Vue.js中构建一个项目管理图表组件。该组件能够展示任务的早期开始时间、持续时间、早期完成时间、延迟开始时间、延迟完成时间以及任务的松弛时间。通过这种方式，团队可以更直观地理解项目的进度和任务之间的依赖关系，从而更好地进行项目管理和决策。

GoJS的强大功能使得构建复杂的图表变得简单，而Vue.js的组件化开发方式则使得代码更加模块化和易于维护。希望本文能够帮助你在实际项目中应用这些技术，提升项目管理的效率和可视化效果。