组件

甘特图

demo 地址

安装

npm i cls-gantt

用法

import Tools from "cls-gantt"
Vue.use(Tools)

// 局部使用
import { varForm } from "./index"
Vue.use(varForm)

Props

start_time string 日历列表开始时间

days number 默认 10, 日历列表的总长度

oDayBoxHeight number 40 每一行的高度

oDayBoxWidth nunmber 60 每一天的宽度，18 及以下时为周视图

titles obj[] 按行分组，title 展示名，length 行数

titles = [
    {
        title: "1#",
        length: 5,
    },
]

tasks obj[] 任务贴片

task = [
    {
        task_id: 1, // 唯一识别，不可重复
        text: "螺纹HRB400|Φ20|12000mm,5000吨,完成率60%", // 展示文字
        row_index: 0, // 第几行
        start_date: "2023-01-01 12:00:00", // 开始日期
        duration: 0.5, // 持续时间
        theme: "blue", // 主题色
        is_lock: false, // 锁定状态
        data: { // 其他数据
            hello: 'hello hello hello'
        },
        // 页面操作后产生的值
        // is_selected: true, // 是否选中
        // end_date: "2023-01-13 06:22:00", // 结束事件，拖拽尾部后产生
        // is_drag_changed: true, // 是否被拖拽过，拖拽后产生
        // is_row_index_changed: true,// 是否被拖到其他行
        // row_info: {} // 被拖拽到其他时，新行的行信息
    },
]

themeType 可选的色彩主题

// ("blue", #365BE4, #365BE4),
// ("green", #39C235, #39C235),
// ("red", #F5222D, #F5222D),
// ("orange", #FF9C1C, #FF9C1C)

rows

export default [
    {
        id: 1,
        name: "1#小棒",
    },
    {
        id: 2,
        name: "2#小棒",
    },
    {
        id: 3,
        name: "3#小棒",
    },
    {
        id: 4,
        name: "4#小棒",
    },
    {
        id: 5,
        name: "5#小棒",
    },
]

adsorbType: number 吸附类型: 0 不吸附, 1 小时吸附，2 按天吸附

assistLine: boolean 拖拽辅助线

rightMenulists 右键菜单

rightMenulists: [
    {
        fnName: "heBing",
        params: {},
        icoName: "el-icon-download",
        btnName: "合 并",
        type: 'default',
        // divided: true,
        // disabled: true,
        // children: [],
    },
]

events

task-dbclick (task) => void

// 被点击的任务
handleTaskClick(task) {
    console.log('双击任务:  ', task)
}

task-change (task, origin_task) => void

// 将要改变为，原来的任务item
handleTaskChange(task, origin_task) {
    console.log('改变任务', task, origin_task)
}

task-change-error (task, origin_task, type) => void

// 将要改变为，原来的，错误类型
handleTaskChangeError(task, origin_task, type) {
    console.log('error ' + type, task, origin_task)
}

methods

getData (onlyChanged) => Task[] , onlyChanged 默认 true，获取的数组是否为改变过后的数据

getData() {
    // 默认变化过的
    const data = this.$refs.gantt.getData(true)
    console.log(data)
    // data 数据结构为 Task[]
}

setDayBoxWidth (width: number) => void 设置每天宽度

setBoxWidth(width = 60) {
    this.$refs.gantt.setDayBoxWidth(width)
}