Gantt-network NPM

使用说明

组件安装

npm i gantt-network

// 按需引入
import {GanttNetwork} from "gantt-network";
import "../node_modules/gantt-network/dist/style.css";
const app= createApp(App)
app.use(GanttNetwork)

// 全量引入
import GanttTools from "gantt-network";
import "../node_modules/gantt-network/dist/style.css";
const app= createApp(App)
app.use(GanttTools)

组件使用

<GanttNetwork
  :taskData="taskData"
  :columData="columData"
  :scaleMode="scaleMode"
  :viewMode="viewMode"
  :columnWidth="columnWidth"
  :customField="customField"
/>

属性说明	类型	必选	可选值
taskData	Array	是
columData	Object	是
scaleMode	String	是	Day、Week、Month
viewMode	String	是	Gantt 、Time（时标）、ADM（双代号）、PDM（PERT）
columnWidth	Number	是	Day：36 Week：144 Month：260
customField	Object	是

const PdmTasks = [
  {
    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"
  },
]
const customField = {
  id: 'id',
  parent_id: 'parent_id',
  children: 'children',
  open: 'hideChildren',
  checked: 'checked'
}