快速开始
在线演示
你可以点击下列链接地址，在线体验演示DEMO 飞椽4合一网络图。在线申请应用秘钥 进入秘钥申请。
安装
方式一：npm
NetworkGraph 可以单独使用，也可以安装到现有项目中。这两种情况下，你都可安装：
sh
$ npm install bimcc-network-graph
$ npm install
$ npm run devsh
$ yarn add bimcc-network-graph
$ yarn install
$ yarn dev安装完成之后，使用 import 或 require 进行引用。
js
import { NetworkGraph } from 'bimcc-network-graph';开始使用
接下来我们就一起来创建一个最简单的甘特图（Gantt）应用。
Step 1 准备秘钥 APP_KEY, SECRET_KEY
你可以点击下列链接地址，在线申请应用秘钥 进入秘钥申请。
Step 2 创建容器（展示异常请设置容器高度）
html
<div id="container"></div>Step 3 准备数据
js
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),
actual_start: new Date(currentDate.getFullYear(), 2, 10),
actual_end: new Date(currentDate.getFullYear(),2, 20),
color: 'success',
children: []
},
{
id: 2,
parent_id: 0,
name: "预制场预制锁型预制块",
level: 1,
duration: 30,
progress: 25,
type: "task",
hideChildren: true,
dependencies: ["1"],
datas: [
{"id": "1", "type": "FS"}
],
start: new Date(currentDate.getFullYear(), 2, 25),
end: new Date(currentDate.getFullYear(),3, 24),
actual_start: new Date(currentDate.getFullYear(), 2, 25),
actual_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"],
datas: [
{"id": "1", "type": "FS"}
],
start: new Date(currentDate.getFullYear(), 2, 25),
end: new Date(currentDate.getFullYear(),3, 29),
actual_start: new Date(currentDate.getFullYear(), 2, 25),
actual_end: new Date(currentDate.getFullYear(),3, 29),
color: 'warning',
children: []
},
{
id: 4,
parent_id: 0,
name: "堤防清基、土方开挖",
level: 1,
duration: 25,
progress: 25,
type: "task",
hideChildren: true,
dependencies: ["2","3"],
datas: [
{"id": "2", "type": "FS"},
{"id": "3", "type": "FS"},
],
start: new Date(currentDate.getFullYear(), 3, 29),
end: new Date(currentDate.getFullYear(),4, 24),
actual_start: new Date(currentDate.getFullYear(), 3, 29),
actual_end: new Date(currentDate.getFullYear(),4, 24),
color: 'error',
children: []
},
{
id: 5,
parent_id: 0,
name: "狮山涵拆出重建工程",
level: 1,
duration: 55,
progress: 25,
type: "task",
hideChildren: true,
dependencies: ["2","3"],
datas: [
{"id": "2", "type": "FS"},
{"id": "3", "type": "FS"},
],
start: new Date(currentDate.getFullYear(), 3, 29),
end: new Date(currentDate.getFullYear(),5, 23),
actual_start: new Date(currentDate.getFullYear(), 3, 29),
actual_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"],
datas: [
{"id": "2", "type": "FS"},
{"id": "3", "type": "FS"},
],
start: new Date(currentDate.getFullYear(), 3, 29),
end: new Date(currentDate.getFullYear(),6, 18),
actual_start: new Date(currentDate.getFullYear(), 3, 29),
actual_end: new Date(currentDate.getFullYear(),6, 18),
color: 'success',
children: []
},
{
id: 7,
parent_id: 0,
name: "土方回填碾压",
level: 1,
duration: 18,
progress: 25,
type: "task",
hideChildren: true,
dependencies: ["4"],
datas: [
{"id": "4", "type": "FS"},
],
start: new Date(currentDate.getFullYear(), 4, 24),
end: new Date(currentDate.getFullYear(),5, 11),
actual_start: new Date(currentDate.getFullYear(), 4, 24),
actual_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"],
datas: [
{"id": "7", "type": "FS"},
],
start: new Date(currentDate.getFullYear(), 5, 11),
end: new Date(currentDate.getFullYear(),6, 16),
actual_start: new Date(currentDate.getFullYear(), 5, 11),
actual_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"],
datas: [
{"id": "7", "type": "FS"},
],
start: new Date(currentDate.getFullYear(), 5, 11),
end: new Date(currentDate.getFullYear(),6, 11),
actual_start: new Date(currentDate.getFullYear(), 5, 11),
actual_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"],
datas: [
{"id": "5", "type": "FS"},
{"id": "8", "type": "FS"},
{"id": "9", "type": "FS"},
],
start: new Date(currentDate.getFullYear(), 6, 16),
end: new Date(currentDate.getFullYear(),7, 6),
actual_start: new Date(currentDate.getFullYear(), 6, 16),
actual_end: new Date(currentDate.getFullYear(),7, 6),
color: 'success',
children: []
},
{
id: 11,
parent_id: 0,
name: "草皮护坡工程",
level: 1,
duration: 20,
progress: 25,
type: "task",
hideChildren: true,
dependencies: ["5","8","9"],
datas: [
{"id": "5", "type": "FS"},
{"id": "8", "type": "FS"},
{"id": "9", "type": "FS"},
],
start: new Date(currentDate.getFullYear(), 6, 16),
end: new Date(currentDate.getFullYear(),7, 5),
actual_start: new Date(currentDate.getFullYear(), 6, 16),
actual_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"],
datas: [
{"id": "6", "type": "FS"},
{"id": "10", "type": "FS"},
{"id": "11", "type": "FS"},
],
start: new Date(currentDate.getFullYear(), 7, 6),
end: new Date(currentDate.getFullYear(),7, 24),
actual_start: new Date(currentDate.getFullYear(), 7, 6),
actual_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:"actual_start", label:"实际开始时间", align: "center", width: 120},
{name:"actual_end", label:"实际结束时间", align: "center", width: 120},
{name:"model_info", label:"模型绑定", align: "center", width: 120, template:(task) => {
// html string 或 dom
const element = document.createElement('span')
element.className = 'nw-btn-action'
element.textContent = '模型绑定'
element.onclick = () => {
console.log(task, 1223333)
}
// const element = '<span class="nw-btn-action">模型绑定</span>'
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) => {
if(eventName === 'del' && netGraph){
netGraph.deleteTask(task.id)
} else if(eventName === 'add' && netGraph){
netGraph.addTask( {
id: 1,
parent_id: 2,
name: "施工准备",
level: task.level,
duration: 2,
progress: 25,
type: "task",
hideChildren: true,
start: new Date('2023-12-18'),
end: new Date('2023-12-20'),
children: []
}, task.id)
}
}
},
]Step 4 渲染画布
js
import { NeworkGraph,ViewMode,ScaleMode } from 'bimcc-network-graph';
const taskData = []
const netGraph = new NeworkGraph({
container: document.getElementById('container'),
appKey: '2743d58f-c738-e8c4-a0b7-**********',
secretKey: '*********************',
task: taskData,
columns: columns,
viewMode: ViewMode.GanttViewer,
scaleMode: ScaleMode.Day,
});方式二：CDN
js
<link rel="stylesheet" href="/style.css" />
<script src="/network-graph.umd.js"></script>
const netGraph = new NetGraph.NetworkGraph({
container: el,
appKey: '2743d58f-****-****-****-********',
secretKey: '****************************',
tasks: tasks,
columns: columns,
viewMode: NetGraph.ViewMode.GanttViewer,
scaleMode: NetGraph.ScaleMode.Day,
hideRight: false,
tooltip: {
enabled: true,
template: 'gantt'
},
})