bimcc-network-graph

飞椽4合一网络图引擎（更懂工程人的进度引擎）-- Gantt图+时标网络图+双代号（箭线图）+PERT图（单代号前导图），更直观便捷的让您随时随地掌控项目进度，给您不一样的进度管理体验

在线演示  |
飞椽零代码 |
4合一引擎演示 |
码云仓库 |
Github仓库

$3

``
获取 APP_KEY 和 APP_SECRET
`

你可以点击下列链接地址，在线申请应用秘钥 飞椽4合一网络图。

- #### 安装使用
`
npm i network-graph

import 'network-graph/dist/style.css'

netGraph = new Graph({
container: el,
appKey: '2743d58f-*---*',
secretKey: 'IhnvBFKOKZpbNzvpiQON**',
tasks: tasks,
columns: columns,
viewMode: ViewMode.GanttViewer,
scaleMode: ScaleMode.Day,
hideRight: false,
tooltip: {
enabled: true,
template: 'gantt'
},
})
`
####

`js
const Tasks = [
{
id: 1,
parent_id: 0,
name: "施工准备",
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: "预制场预制锁型预制块",
duration: 30,
progress: 25,
type: "task",
hideChildren: true,
dependencies: ["1"],
color: "success",
start: new Date(currentDate.getFullYear(), 2, 25),
end: new Date(currentDate.getFullYear(),3, 24),
children: []
},
{
id: 3,
parent_id: 0,
name: "河道清理工程",
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: "堤防清基、土方开挖",
duration: 25,
progress: 25,
type: "task",
hideChildren: true,
dependencies: ["2","3"],
color: "error",
start: new Date(currentDate.getFullYear(), 3, 29),
end: new Date(currentDate.getFullYear(),4, 24),
children: []
},
{
id: 5,
parent_id: 0,
name: "狮山涵拆出重建工程",
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: "小毛河桥拆除重建工程",
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: "土方回填碾压",
duration: 18,
progress: 25,
type: "task",
hideChildren: true,
dependencies: ["4"],
color: "warning",
start: new Date(currentDate.getFullYear(), 4, 24),
end: new Date(currentDate.getFullYear(),5, 11),
children: []
},
{
id: 8,
parent_id: 0,
name: "预制块护坡工程",
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: "浆砌石基脚、压顶、隔埂工程",
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: "新建泥结石防汛道路工程",
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: "草皮护坡工程",
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: "整理资料、完工清场",
duration: 18,
progress: 25,
type: "task",
hideChildren: true,
dependencies: ["6","10","11"],
color: "error",
start: new Date(currentDate.getFullYear(), 7, 6),
end: new Date(currentDate.getFullYear(),7, 24),
children: []
},
]
const columData = [
{
type: "selection",
title: "任务名称",
field: "name",
width: 260,
align: "left"
},
{
title: "计划工期",
field: "duration",
width: 100,
align: "center"
},
{
title: "实际进度",
field: "progress",
width: 100,
align: "center"
},
]
`

$3

`





window.onload = () => {
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},
]
const el = document.getElementById("container")
const netGraph = new NetGraph.NetworkGraph({
container: el,
appKey: '2743d58f-*---*',
secretKey: 'IhnvBFKOKZpbNz',
tasks: tasks,
columns: columns,
viewMode: NetGraph.ViewMode.GanttViewer,
scaleMode: NetGraph.ScaleMode.Day,
hideRight: false,
tooltip: {
enabled: true,
template: 'gantt'
},
})
}
``

$3

- - [x] 完美兼容Project数据标准，支持project数据导入导出、PNG、PDF导出

- - [x] 任意自主设计网络图、节点拖动、箭线调整等、一键逆向生成Gantt图、时标网络图、双代号、PERT图

- - [x] 任务自定义告警等级颜色以及告警规则

- - [x] 无限级任务树，支持大量数据虚拟滚动加载优化

- - [x] 自定义网络图样式（一键换肤、内置多套皮肤）

- - [x] 日、周、月、季、年、时六级切换

- - [x] 进度bar任务概览

- - [x] 基线对比，实际与计划进度对比，预计提前与滞后工程量计算

- - [x] 进度计划拖拽调整、前置后置连线联动

- - [x] 里程碑标识节点

- - [x] 自定义字段，任务字段宽度拖拽调整

- - [x] 任务栏与进度栏区域调整，任务栏显示隐藏

- - [x] 自动生成WBS字段

- - [x] 灵活的事件扩展机制

- - [x] 前置后置关系（SS、SF、FS、FF）

- - [x] 周六日非工作时间标识

- - [x] 日期进度调整联动修改

- - [x] 任务快捷添加、编辑、升级、降级、删除（Tab、Enter、DELETE）

- - [x] 进度检查点标记线

- - [x] 检查点进度前锋线

- - [x] 关键路径自动计算（甘特图、时标、单双代号），关键路径特殊颜色标识

- - [x] 任务进度S曲线

- - [x] 人、机、资源分配及消息提醒

- - [x] 甘特图、时标网络图、单代号（前导图、PERT图、七格图）、双代号（箭线图）

- - [x] 4合一引擎，数据互通无缝切换

- - [x] 日历任务待办视图转换（日程转化）

$3