NetPlanGraph

配置可选项

选项	类型	必选	默认值	描述
container	HTMLElement	是		网络图容器
columns	Array	是		任务栏目列
taskData	Array	是		任务数据
viewMode	string	是		视图模式
scaleMode	string	是		时标刻度模式
sideWidth	number	否	475	任务树宽度
hideRight	boolean	否	false	隐藏右侧面板
editable	boolean	否	true	是否可编辑
predict	boolean	否	true	是否开启工期预测
autoResize	boolean	否	true	是否监听容器大小改变，并自动更新画布大小
scales	Array	否		时标刻度缩放配置
tooltip	boolean(object)	否	false	提示框
panning	boolean(object)	否	false	画布是否可以拖动
history	boolean(object)	否	false	撤销/重做，默认禁用。
clipboard	boolean(object)	否	false	剪切板，默认禁用。
keyboard	boolean(object)	否	false	键盘快捷键，默认禁用。
mousewheel	boolean(object)	否	false	鼠标滚轮缩放，默认禁用。
draggable	boolean(object)	否	false	拖拽，默认禁用。
layout	string	否		布局 (预留功能，暂未开放)
theme	string	否		主题 (预留功能，暂未开放)
baseline	boolean	否		基线对比 (预留功能，暂未开放)
workTime	boolean	否		工作时间 (预留功能，暂未开放)
durationUnit	string	否		工期单位 (预留功能，暂未开放)
toolbar	boolean(object)	否	false	工具栏定制 (预留功能，暂未开放)
dialog	boolean(object)	否	false	任务详情弹窗 (预留功能，暂未开放)
selecting	boolean(object)	否	false	框选 (预留功能，暂未开放)
highliting	boolean(object)	否	false	高亮选项 (预留功能，暂未开放)
watermark	boolean(object)	否	false	水印配置 (预留功能，暂未开放)
minimap	boolean(object)	否	false	小地图 (预留功能，暂未开放)

最小实例

javascript

const currentDate = new Date();
const tasks = [
  {
    id: 1,
    parent_id: 0,
    name: '施工准备',
    level: 1,
    duration: 11,
    progress: 25,
    type: 'task',
    hideChildren: true,
    start: new Date(currentDate.getFullYear(), 2, 14),
    end: new Date(currentDate.getFullYear(), 2, 25),
    children: []
  },
  {
    id: 2,
    parent_id: 0,
    name: '预制场预制锁型预制块',
    level: 1,
    duration: 30,
    progress: 25,
    type: 'task',
    hideChildren: true,
    dependencies: ['1'],
    start: new Date(currentDate.getFullYear(), 2, 25),
    end: new Date(currentDate.getFullYear(), 3, 24),
    children: []
  },
  {
    id: 3,
    parent_id: 0,
    name: '河道清理工程',
    level: 1,
    duration: 35,
    progress: 25,
    type: 'task',
    hideChildren: true,
    dependencies: ['1'],
    start: new Date(currentDate.getFullYear(), 2, 25),
    end: new Date(currentDate.getFullYear(), 3, 29),
    children: []
  },
  {
    id: 4,
    parent_id: 0,
    name: '堤防清基、土方开挖',
    level: 1,
    duration: 25,
    progress: 25,
    type: 'task',
    hideChildren: true,
    dependencies: ['2', '3'],
    start: new Date(currentDate.getFullYear(), 3, 29),
    end: new Date(currentDate.getFullYear(), 4, 24),
    children: []
  },
  {
    id: 5,
    parent_id: 0,
    name: '狮山涵拆出重建工程',
    level: 1,
    duration: 55,
    progress: 25,
    type: 'task',
    hideChildren: true,
    dependencies: ['2', '3'],
    start: new Date(currentDate.getFullYear(), 3, 29),
    end: new Date(currentDate.getFullYear(), 5, 23),
    children: []
  },
  {
    id: 6,
    parent_id: 0,
    name: '小毛河桥拆除重建工程',
    level: 1,
    duration: 80,
    progress: 25,
    type: 'task',
    hideChildren: true,
    dependencies: ['2', '3'],
    start: new Date(currentDate.getFullYear(), 3, 29),
    end: new Date(currentDate.getFullYear(), 6, 18),
    children: []
  },
  {
    id: 7,
    parent_id: 0,
    name: '土方回填碾压',
    level: 1,
    duration: 18,
    progress: 25,
    type: 'task',
    hideChildren: true,
    dependencies: ['4'],
    start: new Date(currentDate.getFullYear(), 4, 24),
    end: new Date(currentDate.getFullYear(), 5, 11),
    children: []
  },
  {
    id: 8,
    parent_id: 0,
    name: '预制块护坡工程',
    level: 1,
    duration: 35,
    progress: 25,
    type: 'task',
    hideChildren: true,
    dependencies: ['7'],
    start: new Date(currentDate.getFullYear(), 5, 11),
    end: new Date(currentDate.getFullYear(), 6, 16),
    children: []
  },
  {
    id: 9,
    parent_id: 0,
    name: '浆砌石基脚、压顶、隔埂工程',
    level: 1,
    duration: 30,
    progress: 25,
    type: 'task',
    hideChildren: true,
    dependencies: ['7'],
    start: new Date(currentDate.getFullYear(), 5, 11),
    end: new Date(currentDate.getFullYear(), 6, 11),
    children: []
  },
  {
    id: 10,
    parent_id: 0,
    name: '新建泥结石防汛道路工程',
    level: 1,
    duration: 21,
    progress: 25,
    type: 'task',
    hideChildren: true,
    dependencies: ['5', '8', '9'],
    start: new Date(currentDate.getFullYear(), 6, 16),
    end: new Date(currentDate.getFullYear(), 7, 6),
    children: []
  },
  {
    id: 11,
    parent_id: 0,
    name: '草皮护坡工程',
    level: 1,
    duration: 20,
    progress: 25,
    type: 'task',
    hideChildren: true,
    dependencies: ['5', '8', '9'],
    start: new Date(currentDate.getFullYear(), 6, 16),
    end: new Date(currentDate.getFullYear(), 7, 5),
    children: []
  },
  {
    id: 12,
    parent_id: 0,
    name: '整理资料、完工清场',
    level: 1,
    duration: 18,
    progress: 25,
    type: 'task',
    hideChildren: true,
    dependencies: ['6', '10', '11'],
    start: new Date(currentDate.getFullYear(), 7, 6),
    end: new Date(currentDate.getFullYear(), 7, 24),
    children: []
  }
];
const columns = [
  // {name:"wbs", label:"WBS", width: 120, align: "left",}, // WBS编码列
  { name: 'name', label: '任务名称', align: 'left', tree: true, width: 240 },
  { name: 'duration', label: '工期', align: 'center', width: 80 },
  { name: 'start', label: '开始时间', align: 'center', width: 120 },
  { name: 'end', label: '结束时间', align: 'center', width: 120 },
  {
    name: 'model',
    label: '模型绑定',
    align: 'center',
    width: 120,
    template: (task) => {
      // html string 或 dom
      // const element = '<span class="nw-btn-action">模型绑定</span>'
      const element = document.createElement('span');
      element.className = 'nw-btn-action';
      element.textContent = '模型绑定';
      element.onclick = () => {
        console.log(task, 1223333);
      };
      return element;
    }
  },
  {
    name: 'action',
    label: '操作',
    align: 'center',
    width: 180,
    btnList: [
      { name: '新增', event: 'add' },
      { name: '详情', event: 'detail' },
      { name: '编辑', event: 'edit' },
      { name: '删除', event: 'del', className: 'btn-action-del' }
    ],
    callback: (eventName, task) => {
      console.log(eventName, task, 11111);
    }
  }
];
const netGraph  = new NetworkGraph({
  container: container,
  tasks: taskData,
  columns: columns,
  viewMode: ViewMode.GanttViewer,
  scaleMode: ScaleMode.Month,
  tooltip: {
    enabled: true,
    template: 'gantt'
  }
});

添加任务 `netGraph.addTask`

javascript

// task 任务数据
// taskId 在哪个任务id之后添加 如需添加下级（子集），需更改parent_id与level(父级level+1)
netGraph.addTask({
    id: 1,
    parent_id: taskId,
    name: '施工准备',
    level: 1,
    duration: 11,
    progress: 25,
    type: 'task',
    hideChildren: true,
    start: new Date(currentDate.getFullYear(), 2, 14),
    end: new Date(currentDate.getFullYear(), 2, 25),
    children: []
  },
  taskId,
)

修改任务 `netGraph.updateTask`

javascript

// taskId 任务id
// task 任务数据
netGraph.updateTask(taskId, 
    {
      id: taskId,
      parent_id: taskId,
      name: '施工准备',
      level: 1,
      duration: 11,
      progress: 25,
      type: 'task',
      hideChildren: true,
      start: new Date(currentDate.getFullYear(), 2, 14),
      end: new Date(currentDate.getFullYear(), 2, 25),
      children: []
    }
)

删除任务 `netGraph.deleteTask`

javascript

// taskId 任务id
netGraph.deleteTask(taskId)

添加连线 `netGraph.addLink`

javascript

// taskId 任务id
netGraph.addLink({source, target})

删除连线 `netGraph.deleteLink`

javascript

// taskId 任务id
netGraph.deleteLink(source, target)

重新渲染 `netGraph.render`

javascript

netGraph.render()

切换视图 `netGraph.changeViewMode`

javascript

// 甘特图视图：ViewMode.GanttViewer
// 时标网络图：ViewMode.TimeViewer
// 双代号网络图：ViewMode.AdmViewer
// PERT图：ViewMode.PdmViewer
netGraph.changeViewMode(ViewMode.GanttViewer)

日周月视图切换 `netGraph.changeScaleMode`

javascript

// 日视图：ScaleMode.Day
// 周视图：ScaleMode.Week
// 月视图：ScaleMode.Month
netGraph.changeViewMode(ScaleMode.Day)

添加前锋线 `netGraph.addForwardLine`

javascript

// 参数为日期 yyyy-MM-DD
netGraph.addForwardLine('2024-01-03')

移除前锋线 `netGraph.removeForwardLine`

javascript

// 参数为日期 yyyy-MM-DD
netGraph.removeForwardLine()

关键路径显示隐藏切换 `netGraph.toggleCriticalPath`

javascript

netGraph.toggleCriticalPath()

改变任务树标题列`netGraph.changeGridColumn`

javascript

const newColumns = [
    {name:"wbs", label:"WBS", width: 120, align: "left",}, // WBS编码列
    {name:"name", label:"任务名称", align: "left", tree:true, width: 240 },
    {name:"duration", label:"工期", align: "center", width: 80},
    {name:"start", label:"开始时间", align: "center", width: 120},
    {name:"end", label:"结束时间", align: "center", width: 120},
]
netGraph.changeGridColumn(newColumns)

显示隐左侧任务树`netGraph.showHideTaskGrid`

javascript

// show : true false
netGraph.showHideTaskGrid(show)

显示隐藏右侧网络图`netGraph.showHideTaskData`

javascript

// show : true false
netGraph.showHideTaskData(show)

获取标记线 `netGraph.getMarker`

javascript

netGraph.getMarker(markerId)

添加标记线 `netGraph.addMarker`

javascript

const markerId = netGraph.addMarker({
  date: new Date('2023-11-18'),
  text: '2023-11-18',
  color: '#00B3B2'
})

修改标记线 `netGraph.updateMarker`

javascript

netGraph.updateMarker(markerId, {
  date: new Date('2023-11-18'),
  text: '关键节点',
  color: '#00B3B2'
})

移除标记线 `netGraph.removeMarker`

javascript

netGraph.removeMarker(markerId)

显示隐藏标记线 `netGraph.hideShowMarkers`

javascript

netGraph.hideShowMarkers(markerId)

NetPlanGraph ​

配置可选项 ​

最小实例 ​

添加任务 netGraph.addTask ​

修改任务 netGraph.updateTask ​

删除任务 netGraph.deleteTask ​

添加连线 netGraph.addLink ​

删除连线 netGraph.deleteLink ​

重新渲染 netGraph.render ​

切换视图 netGraph.changeViewMode ​

日周月视图切换 netGraph.changeScaleMode ​

添加前锋线 netGraph.addForwardLine ​

移除前锋线 netGraph.removeForwardLine ​

关键路径显示隐藏切换 netGraph.toggleCriticalPath ​

改变任务树标题列netGraph.changeGridColumn ​

显示隐左侧任务树netGraph.showHideTaskGrid ​

显示隐藏右侧网络图netGraph.showHideTaskData ​

获取标记线 netGraph.getMarker ​

添加标记线 netGraph.addMarker ​

修改标记线 netGraph.updateMarker ​

移除标记线 netGraph.removeMarker ​

显示隐藏标记线 netGraph.hideShowMarkers ​

netGraph.isTooltipEnabled ​

netGraph.enableTooltip ​

netGraph.disableTooltip ​

netGraph.toggleTooltip ​

netGraph.isMarkerEnabled ​

netGraph.enableMarker ​

netGraph.disableMarker ​

netGraph.toggleMarker ​

netGraph.isHistoryEnabled ​

netGraph.enableHistory ​

netGraph.disableHistory ​

netGraph.toggleHistory ​

netGraph.undo ​

netGraph.undoAndCancel ​

netGraph.redo ​

netGraph.canUndo ​

netGraph.canRedo ​

netGraph.cleanHistory ​

netGraph.isClipboardEnabled ​

netGraph.enableClipboard ​

netGraph.disableClipboard ​

netGraph.toggleClipboard ​

netGraph.isClipboardEmpty ​

netGraph.getTasksInClipboard ​

netGraph.cleanClipboard ​

netGraph.copy ​

netGraph.cut ​

netGraph.paste ​

netGraph.isKeyboardEnabled ​

netGraph.enableKeyboard ​

netGraph.disableKeyboard ​

netGraph.toggleKeyboard ​

netGraph.bindKey ​

netGraph.unbindKey ​

netGraph.isDragEnabled ​

netGraph.enableDrag ​

netGraph.disableDrag ​

netGraph.toggleDrag ​

NetPlanGraph

配置可选项

最小实例

添加任务 `netGraph.addTask`

修改任务 `netGraph.updateTask`

删除任务 `netGraph.deleteTask`

添加连线 `netGraph.addLink`

删除连线 `netGraph.deleteLink`

重新渲染 `netGraph.render`

切换视图 `netGraph.changeViewMode`

日周月视图切换 `netGraph.changeScaleMode`

添加前锋线 `netGraph.addForwardLine`

移除前锋线 `netGraph.removeForwardLine`

关键路径显示隐藏切换 `netGraph.toggleCriticalPath`

改变任务树标题列`netGraph.changeGridColumn`

显示隐左侧任务树`netGraph.showHideTaskGrid`

显示隐藏右侧网络图`netGraph.showHideTaskData`

获取标记线 `netGraph.getMarker`

添加标记线 `netGraph.addMarker`

修改标记线 `netGraph.updateMarker`

移除标记线 `netGraph.removeMarker`

显示隐藏标记线 `netGraph.hideShowMarkers`

`netGraph.isTooltipEnabled`

`netGraph.enableTooltip`

`netGraph.disableTooltip`

`netGraph.toggleTooltip`

`netGraph.isMarkerEnabled`

`netGraph.enableMarker`

`netGraph.disableMarker`

`netGraph.toggleMarker`

`netGraph.isHistoryEnabled`

`netGraph.enableHistory`

`netGraph.disableHistory`

`netGraph.toggleHistory`

`netGraph.undo`

`netGraph.undoAndCancel`

`netGraph.redo`

`netGraph.canUndo`

`netGraph.canRedo`

`netGraph.cleanHistory`

`netGraph.isClipboardEnabled`

`netGraph.enableClipboard`

`netGraph.disableClipboard`

`netGraph.toggleClipboard`

`netGraph.isClipboardEmpty`

`netGraph.getTasksInClipboard`

`netGraph.cleanClipboard`

`netGraph.copy`

`netGraph.cut`

`netGraph.paste`

`netGraph.isKeyboardEnabled`

`netGraph.enableKeyboard`

`netGraph.disableKeyboard`

`netGraph.toggleKeyboard`

`netGraph.bindKey`

`netGraph.unbindKey`

`netGraph.isDragEnabled`

`netGraph.enableDrag`

`netGraph.disableDrag`

`netGraph.toggleDrag`