bimcc-network-graph
v1.2.0
Published
bimcc-network-graph
Downloads
2
Readme
使用说明
获取 `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'
},
})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"
},
]CDN引入
<link rel="stylesheet" href="目录/style.css" />
<script src="目录/network-graph.umd.js"></script>
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'
},
})
}功能速览
- [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] 日历任务待办视图转换（日程转化）