飞椽4合一网络图引擎

Appearance

快速开始 ​

在线演示 ​

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

安装 ​

方式一：npm ​

NetworkGraph 可以单独使用，也可以安装到现有项目中。这两种情况下，你都可安装：

sh
$ npm install bimcc-network-graph

$ npm install

$ npm run dev
sh
$ 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 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 columns: Column[] = [
  {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_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: 'IhnvBFKOKZpbNzvpiQO************',
  tasks: tasks,
  columns: columns,
  viewMode: NetGraph.ViewMode.GanttViewer,
  scaleMode: NetGraph.ScaleMode.Day,
  hideRight: false,
  tooltip: {
    enabled: true,
    template: 'gantt'
  },
})

源码目录结构 ​

.
├─ docs                             //文档目录
│  ├─ .vitepress                    //配置文件
│  │  └─ config.js                  //文档配置
│  └─ index.md                      //文档入口
├─ public                           //公共目录(文件夹里面的资源打包后会在根目录下)
├─ src
│  ├─ assets                        //静态资源
│  │  ├─ images                     //图片目录   
│  │  ├─ themes                     //主题样式文件
│  │  ├─ svg-icon                   //本地svg图标
│  │  └─ font                       //字体文件
│  ├─ config                        
│  │  └─ Config.ts                  //全局常量配置
│  ├─ common                        //公共类      
│  │  ├─ BaseCoast.ts               //基础类
│  │  ├─ Event.ts                   //事件绑定触发封装
│  ├─ constants                     //常量配置
│  │  ├─ Constant.ts                //全局常量
│  │  └─ Enum.ts                    //枚举常量
│  ├─ graph                         //网络图核心
│  │  ├─ Base.ts                    //核心基类 
│  │  ├─ Clipboard.ts               //剪切板管理类
│  │  ├─ Graph.ts                   //网络图主类
│  │  ├─ Hook.ts                    //类管理容器钩子
│  │  ├─ Options.ts                 //网络图配置选项
│  │  └─ index.ts
│  ├─ interface                     //接口类型定义
│  ├─ layouts                       //布局
│  ├─ locales                       //国际化配置
│  ├─ model                         //节点基类
│  │  ├─ Model.ts                   //核心基类 
│  │  ├─ Cell.ts                    //任务节点连线抽象类
│  │  ├─ Node.ts                    //任务类 
│  │  ├─ Edge.ts                    //连线类 
│  │  ├─ TaskBar.ts                 //甘特图横道类
│  │  ├─ LinkLine.ts                //甘特图连线类
│  │  ├─ ArrowCircel.ts             //双代号序号类
│  │  ├─ ArrowLine.ts               //双代号箭线类
│  │  ├─ DashedLine.ts              //虚活动类
│  │  ├─ PertCircel.ts              //Pert活动类
│  │  ├─ PertLine.ts                //Pert连线类
│  ├─ plugins                       //插件
│  │  ├─ Clipboard.ts               //剪切板类
│  │  ├─ Draggable.ts               //拖动类
│  │  ├─ Highlight.ts               //高亮类
│  │  ├─ History.ts                 //历史操作类
│  │  ├─ Keyboard.ts                //快捷键类
│  │  ├─ Marker.ts                  //标记类
│  │  ├─ Minimap.ts                 //小地图类
│  │  ├─ Mousewheel.ts              //鼠标滚动类
│  │  ├─ Selection.ts               //框选类
│  │  ├─ Toolbar.ts                 //工具栏
│  │  ├─ Tooltip.ts                 //提示  
│  │  ├─ Dialog.ts                  //弹窗
│  │  ├─ Overlay.ts                 //叠加层级
│  │  ├─ Watermark.ts               //水印
│  │  ├─ Scurve.ts                  //s曲线
│  │  └─ index.ts
│  ├─ utils                         //常用工具
│  │  └─ index.ts
│  ├─ themes                        //主题
│  │  └─ index.ts
│  ├─ view                         //视图
│  │  ├─ NetGraphView.ts           //主视图
│  │  ├─ GanttGraphView.ts         //甘特图视图
│  │  ├─ AdmOrTimeGraphView.ts     //双代号与时标网络图视图
│  │  ├─ PdmGraphView.ts           //PERT视图
│  ├─ widget                       
│  │  ├─ component                 //常用组件
│  └─ index.ts
├─ tsconfig.json                    //typescirpt配置
├─ README.md                        
├─ package.json                     //依赖管理
└─ vite.config.js                   //Vite打包配置

Released under the MIT License.

Copyright © 2022 - present 重庆市筑云科技有限责任公司