vue中利用dhtmlx-gantt实现甘特图

置顶 已于 2024-03-07 15:57:32 修改
阅读量1.6k 收藏 16
点赞数 11
分类专栏： vue 文章标签： 甘特图
于 2024-02-29 10:43:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zh626678/article/details/136363332
版权

亲测有效！！！！！！！！！！！！！！话不多直接上代码！！！！！！！！！！

成品展示

使用说明

1.引入依赖(注意版本号）

npm install dhtmlx-gantt@6.3.7

2.引入组件

<template>
    <div>
        <div ref="gantt" style="height:500px;" />
    </div>
</template>

3.引入dhtmlx-gantt

import gantt from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'

4.甘特图数据配置

注意： 数据格式类似于树形组件，子级需要父级的id

  • 父级时间是根据子级start_date以及duration自动计算
  • progress：完成度的最大值为1
  • open：是否展开文件
  • parent：父级id
  • start_date：开始时间（日月年）
  • text：左边数据展示文件名称（可以自定义添加展示字段，在后面列配置项可以配置）
tasks: {
                data: [
                    //     {
                    //         id: 11,
                    //         text: 'Project #1',
                    //         // type: gantt.config.types.project,
                    //         progress: 0.5,//完成度
                    //         open: true,//默认打开
                    //         number: '20240227',//显示字段
                    //     },
                    //     {
                    //         toolTipsTxt: '任务#101-001',
                    //         id: 12,//任务id
                    //         text: '任务#1',//任务名称
                    //         start_date: '03-04-2022',//开始时间 日月年
                    //         duration: '5',//任务时常
                    //         parent: '11',//父级id
                    //         progress: 1,//完成度
                    //         open: true,//默认打开
                    //     },
                    //     {
                    //         id: 13,
                    //         text: '任务#2',
                    //         start_date: '03-04-2022',
                    //         // type: gantt.config.types.project,
                    //         parent: '11',
                    //         progress: 0.255,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 14,
                    //         text: '任务#3',
                    //         start_date: '01-04-2022',
                    //         duration: '6',
                    //         parent: '11',
                    //         progress: 0.8,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 15,
                    //         text: '任务#4',
                    //         // type: gantt.config.types.project,
                    //         parent: '11',
                    //         progress: 0.2,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 16,
                    //         text: 'Final milestone',
                    //         start_date: '15-04-2022',
                    //         // type: gantt.config.types.milestone,
                    //         parent: '11',
                    //         progress: 0,
                    //         open: true,
                    //     },

                    //     {
                    //         id: 17,
                    //         text: '任务#2.1',
                    //         start_date: '03-04-2022',
                    //         duration: '2',
                    //         parent: '13',
                    //         progress: 1,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 18,
                    //         text: '任务#2.2',
                    //         start_date: '06-04-2022',
                    //         duration: '3',
                    //         parent: '13',
                    //         progress: 0.8,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 19,
                    //         text: '任务#2.3',
                    //         start_date: '10-04-2022',
                    //         duration: '4',
                    //         parent: '13',
                    //         progress: 0.2,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 20,
                    //         text: '任务#2.4',
                    //         start_date: '10-04-2022',
                    //         duration: '4',
                    //         parent: '13',
                    //         progress: 0,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 21,
                    //         text: '任务#4.1',
                    //         start_date: '03-04-2022',
                    //         duration: '4',
                    //         parent: '15',
                    //         progress: 0.5,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 22,
                    //         text: '任务#4.2',
                    //         start_date: '03-04-2022',
                    //         duration: '4',
                    //         parent: '15',
                    //         progress: 0.1,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 23,
                    //         text: 'Mediate milestone',
                    //         start_date: '14-04-2022',
                    //         // type: gantt.config.types.milestone,
                    //         parent: '15',
                    //         progress: 0,
                    //         open: true,
                    //     },
                ],

5.tasks 中link连线配置

tasks: {
                // #字段解释
                // 格式 id:数据id   
                //     source:开始链接的项目id  ----为tasks.data中数据的id
                //     target:要链接项目的id  ----为tasks.data中数据的id
                //     type: 0--进行-开始  `尾部链接头部`  
                //           1--开始-开始  `头部链接头部`
                //           2--进行-进行  `尾部链接尾部`
                //           3--开始-进行  `头部链接尾部`
                // 任务之间连接
                links: [
                    { id: '10', source: '11', target: '12', type: '1' },
                    { id: '11', source: '11', target: '13', type: '1' },
                    { id: '12', source: '11', target: '14', type: '1' },
                    { id: '13', source: '11', target: '15', type: '1' },
                    { id: '14', source: '23', target: '16', type: '0' },
                    { id: '15', source: '13', target: '17', type: '1' },
                    { id: '16', source: '17', target: '18', type: '0' },
                    { id: '17', source: '18', target: '19', type: '0' },
                    { id: '18', source: '19', target: '20', type: '0' },
                    { id: '19', source: '15', target: '21', type: '2' },
                    { id: '20', source: '15', target: '22', type: '2' },
                    { id: '21', source: '15', target: '23', type: '0' },
                ],
            },

6.初始化配置

注意：其中值得一提的就是更新数据，需要清空旧数

弹窗汉化

gantt.locale.labels = {
                dhx_cal_today_button: "今天",
                day_tab: "日",
                week_tab: "周",
                month_tab: "月",
                new_event: "新建日程",
                icon_save: "保存",
                icon_cancel: "关闭",
                icon_details: "详细",
                icon_edit: "编辑",
                icon_delete: "删除",
                confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
                confirm_deleting: "是否删除计划?",
                section_description: "描述:",
                section_time: "时间范围:",
                section_type: "类型:",
                section_text: "计划名称:",
                section_test: "测试:",
                section_projectClass: "项目类型:",
                taskProjectType_0: "项目任务",
                taskProjectType_1: "普通任务",
                section_head: "负责人:",
                section_priority: '优先级:',
                taskProgress: '任务状态',
                taskProgress_0: "未开始",
                taskProgress_1: "进行中",
                taskProgress_2: "已完成",
                taskProgress_3: "已延期",
                taskProgress_4: "搁置中",
                section_template: 'Details',
                /* grid columns */
                column_text: "计划名称",
                column_start_date: "开始时间",
                column_duration: "持续时间",
                column_add: "",
                column_priority: "难度",
                /* link confirmation */
                link: "关联",
                confirm_link_deleting: "将被删除",
                message_ok: '确定',
                message_cancel: '取消',
                link_start: " (开始)",
                link_end: " (结束)",

                type_task: "任务",
                type_project: "项目",
                type_milestone: "里程碑",
                minutes: "分钟",
                hours: "小时",
                days: "天",
                weeks: "周",
                months: "月",
                years: "年"
            }

gantt.clearAll(); // 清空旧数据
// 初始化
        init() {
            // 格式化日期
            gantt.locale.date = {
                month_full: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                day_short: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
            }

            console.log(gantt);
            //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
            gantt.config.autosize = true
            //只读模式
            gantt.config.readonly = false
            //是否显示左侧树表格
            gantt.config.show_grid = true
            // //表格列设置
            gantt.config.columns = [
                { name: 'text', label: '阶段名字', tree: true, width: '150', align: 'center', },
                // { name: 'number', label: '工单号', tree: false, width: '120', align: 'center', },
                {
                    name: 'duration',
                    label: '工时',
                    align: 'center',
                    template: function (obj) {
                        return obj.duration + '天'
                    },
                },
                /*{name:"start_date", label:"开始时间", align: "center" },
        
                {name:"end_date",   label:"结束时间",   align: "center" },*/
            ]
            // 自动延长时间刻度
            gantt.config.fit_tasks = true
            // 允许拖放
            gantt.config.drag_project = true
            // 定义时间格式
            gantt.config.scales = [
                { unit: 'month', step: 1, date: ' %Y,%F' },
                { unit: 'day', step: 1, date: ' %D ,%j' },
            ]
            // //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
            gantt.config.fit_tasks = true
            // 添加弹窗属性
            gantt.config.lightbox.sections = [
                {
                    name: 'description',
                    height: 70,
                    map_to: 'text',
                    type: 'textarea',
                    focus: true,
                },
                { name: 'type', type: 'typeselect', map_to: 'type' },
                { name: 'time', type: 'duration', map_to: 'auto' },
            ];
            console.log(this.tasks.data, '检查任务数据'); // 检查任务数据
            // 初始化
            gantt.init(this.$refs.gantt)
            /* *******重点******* */
            gantt.clearAll(); // 清空旧数据
            /* ****************** */
            // 数据解析
            gantt.parse(this.tasks)
        },

7.更新数据

loadData(arg) {
            if (!this.url.list) {
                this.$message.error("请设置url.list属性!")
                return
            }
            //加载数据 若传入参数1则加载第一页的内容
            let params = {
                planId: this.planId,
            }
            this.loading = true;
            this.tasks.data = []
            getAction(this.url.list, params).then((res) => {
                if (res.success) {
                    console.log(res, '甘特图数据');

                    res.result.forEach(obj => {
                        obj.open = false
                    })
                    this.tasks.data = res.result
                    this.init()
                }
                if (res.code === 510) {
                    this.$message.warning(res.message)
                }
                this.loading = false;
            })
        },

更多配置

更多配置

完整代码


<template>
    <div>
        <div ref="gantt" style="height:500px;" />
    </div>
</template>
  
<script>
import gantt from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, putAction } from '@/api/manage'
export default {
    props: {
        planId: {
            type: String,
            required: true,
        }
    },
    // mixins: [JeecgListMixin],
    data() {
        return {
            // 甘特图配置
            tasks: {
                data: [
                    //     {
                    //         id: 11,
                    //         text: 'Project #1',
                    //         // type: gantt.config.types.project,
                    //         progress: 0.5,//完成度
                    //         open: true,//默认打开
                    //         number: '20240227',//显示字段
                    //     },
                    //     {
                    //         toolTipsTxt: '任务#101-001',
                    //         id: 12,//任务id
                    //         text: '任务#1',//任务名称
                    //         start_date: '03-04-2022',//开始时间 日月年
                    //         duration: '5',//任务时常
                    //         parent: '11',//父级id
                    //         progress: 1,//完成度
                    //         open: true,//默认打开
                    //     },
                    //     {
                    //         id: 13,
                    //         text: '任务#2',
                    //         start_date: '03-04-2022',
                    //         // type: gantt.config.types.project,
                    //         parent: '11',
                    //         progress: 0.255,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 14,
                    //         text: '任务#3',
                    //         start_date: '01-04-2022',
                    //         duration: '6',
                    //         parent: '11',
                    //         progress: 0.8,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 15,
                    //         text: '任务#4',
                    //         // type: gantt.config.types.project,
                    //         parent: '11',
                    //         progress: 0.2,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 16,
                    //         text: 'Final milestone',
                    //         start_date: '15-04-2022',
                    //         // type: gantt.config.types.milestone,
                    //         parent: '11',
                    //         progress: 0,
                    //         open: true,
                    //     },

                    //     {
                    //         id: 17,
                    //         text: '任务#2.1',
                    //         start_date: '03-04-2022',
                    //         duration: '2',
                    //         parent: '13',
                    //         progress: 1,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 18,
                    //         text: '任务#2.2',
                    //         start_date: '06-04-2022',
                    //         duration: '3',
                    //         parent: '13',
                    //         progress: 0.8,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 19,
                    //         text: '任务#2.3',
                    //         start_date: '10-04-2022',
                    //         duration: '4',
                    //         parent: '13',
                    //         progress: 0.2,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 20,
                    //         text: '任务#2.4',
                    //         start_date: '10-04-2022',
                    //         duration: '4',
                    //         parent: '13',
                    //         progress: 0,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 21,
                    //         text: '任务#4.1',
                    //         start_date: '03-04-2022',
                    //         duration: '4',
                    //         parent: '15',
                    //         progress: 0.5,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 22,
                    //         text: '任务#4.2',
                    //         start_date: '03-04-2022',
                    //         duration: '4',
                    //         parent: '15',
                    //         progress: 0.1,
                    //         open: true,
                    //     },
                    //     {
                    //         id: 23,
                    //         text: 'Mediate milestone',
                    //         start_date: '14-04-2022',
                    //         // type: gantt.config.types.milestone,
                    //         parent: '15',
                    //         progress: 0,
                    //         open: true,
                    //     },
                ],
                // #字段解释
                // 格式 id:数据id   
                //     source:开始链接的项目id  ----为tasks.data中数据的id
                //     target:要链接项目的id  ----为tasks.data中数据的id
                //     type: 0--进行-开始  `尾部链接头部`  
                //           1--开始-开始  `头部链接头部`
                //           2--进行-进行  `尾部链接尾部`
                //           3--开始-进行  `头部链接尾部`
                // 任务之间连接
                links: [
                    { id: '10', source: '11', target: '12', type: '1' },
                    { id: '11', source: '11', target: '13', type: '1' },
                    { id: '12', source: '11', target: '14', type: '1' },
                    { id: '13', source: '11', target: '15', type: '1' },
                    { id: '14', source: '23', target: '16', type: '0' },
                    { id: '15', source: '13', target: '17', type: '1' },
                    { id: '16', source: '17', target: '18', type: '0' },
                    { id: '17', source: '18', target: '19', type: '0' },
                    { id: '18', source: '19', target: '20', type: '0' },
                    { id: '19', source: '15', target: '21', type: '2' },
                    { id: '20', source: '15', target: '22', type: '2' },
                    { id: '21', source: '15', target: '23', type: '0' },
                ],
            },

            url: {
                list: "/projectManage/projectPlan/queryProjectPlanGTT",
                // delete: "/projectManage/projectModule/delete",
                // deleteBatch: "/projectManage/projectModule/deleteBatch",
                // exportXlsUrl: "/projectManage/projectModule/exportXls",
                // importExcelUrl: "/projectManage/projectModule/importExcel",
                // budgetExportXlsUrl: "/projectManage/projectModule/budgetExportXls",
                // budgetImportUrl: "/projectManage/projectModule/budgetImportExcel",
            },

        }
    },
    watch: {
        
    },
    created() {
        console.log(this.planId, '参数');

    },
    mounted() {
        this.loadData();
    },
    methods: {
        // 初始化
        init() {
            // 格式化日期
            gantt.locale.date = {
                month_full: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                day_short: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
            }

gantt.locale.labels = {
                dhx_cal_today_button: "今天",
                day_tab: "日",
                week_tab: "周",
                month_tab: "月",
                new_event: "新建日程",
                icon_save: "保存",
                icon_cancel: "关闭",
                icon_details: "详细",
                icon_edit: "编辑",
                icon_delete: "删除",
                confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
                confirm_deleting: "是否删除计划?",
                section_description: "描述:",
                section_time: "时间范围:",
                section_type: "类型:",
                section_text: "计划名称:",
                section_test: "测试:",
                section_projectClass: "项目类型:",
                taskProjectType_0: "项目任务",
                taskProjectType_1: "普通任务",
                section_head: "负责人:",
                section_priority: '优先级:',
                taskProgress: '任务状态',
                taskProgress_0: "未开始",
                taskProgress_1: "进行中",
                taskProgress_2: "已完成",
                taskProgress_3: "已延期",
                taskProgress_4: "搁置中",
                section_template: 'Details',
                /* grid columns */
                column_text: "计划名称",
                column_start_date: "开始时间",
                column_duration: "持续时间",
                column_add: "",
                column_priority: "难度",
                /* link confirmation */
                link: "关联",
                confirm_link_deleting: "将被删除",
                message_ok: '确定',
                message_cancel: '取消',
                link_start: " (开始)",
                link_end: " (结束)",

                type_task: "任务",
                type_project: "项目",
                type_milestone: "里程碑",
                minutes: "分钟",
                hours: "小时",
                days: "天",
                weeks: "周",
                months: "月",
                years: "年"
            }


            console.log(gantt);
            //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
            gantt.config.autosize = true
            //只读模式
            gantt.config.readonly = false
            //是否显示左侧树表格
            gantt.config.show_grid = true
            // //表格列设置
            gantt.config.columns = [
                { name: 'text', label: '阶段名字', tree: true, width: '150', align: 'center', },
                // { name: 'number', label: '工单号', tree: false, width: '120', align: 'center', },
                {
                    name: 'duration',
                    label: '工时',
                    align: 'center',
                    template: function (obj) {
                        return obj.duration + '天'
                    },
                },
                /*{name:"start_date", label:"开始时间", align: "center" },
        
                {name:"end_date",   label:"结束时间",   align: "center" },*/
            ]
            // 自动延长时间刻度
            gantt.config.fit_tasks = true
            // 允许拖放
            gantt.config.drag_project = true
            // 定义时间格式
            gantt.config.scales = [
                { unit: 'month', step: 1, date: ' %Y,%F' },
                { unit: 'day', step: 1, date: ' %D ,%j' },
            ]
            // //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
            gantt.config.fit_tasks = true
            // 添加弹窗属性
            gantt.config.lightbox.sections = [
                {
                    name: 'description',
                    height: 70,
                    map_to: 'text',
                    type: 'textarea',
                    focus: true,
                },
                { name: 'type', type: 'typeselect', map_to: 'type' },
                { name: 'time', type: 'duration', map_to: 'auto' },
            ];
            console.log(this.tasks.data, '检查任务数据'); // 检查任务数据
            // 初始化
            gantt.init(this.$refs.gantt)
            /* *******重点******* */
            gantt.clearAll(); // 清空旧数据
            /* ****************** */
            // 数据解析
            gantt.parse(this.tasks)
        },
        loadData(arg) {
            if (!this.url.list) {
                this.$message.error("请设置url.list属性!")
                return
            }
            //加载数据 若传入参数1则加载第一页的内容
            let params = {
                planId: this.planId,
            }
            this.loading = true;
            this.tasks.data = []
            getAction(this.url.list, params).then((res) => {
                if (res.success) {
                    console.log(res, '甘特图数据');

                    res.result.forEach(obj => {
                        obj.open = false
                    })
                    this.tasks.data = res.result
                    this.init()
                }
                if (res.code === 510) {
                    this.$message.warning(res.message)
                }
                this.loading = false;
            })
        },
    },
}
</script>
  
<style lang="less" scoped>
.firstLevelTask {
    border: none;

    .gantt_task_content {
        // font-weight: bold;
        font-size: 13px;
    }
}

.secondLevelTask {
    border: none;
}

.thirdLevelTask {
    border: 2px solid #da645d;
    color: #da645d;
    background: #da645d;
}

.milestone-default {
    border: none;
    background: rgba(0, 0, 0, 0.45);
}

.milestone-unfinished {
    border: none;
    background: #5692f0;
}

.milestone-finished {
    border: none;
    background: #84bd54;
}

.milestone-canceled {
    border: none;
    background: #da645d;
}

html,
body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    overflow: hidden;
}

.container {
    height: 900px;

    .left-container {
        height: 100%;
    }
}

.left-container {
    height: 600px;
}

.gantt_scale_line {
    border-top: 0;
}

.weekend {
    //background:#f4f7f4!important;
    color: #000000 !important;
}

.gantt_selected .weekend {
    background: #f7eb91 !important;
}

.gantt_task_content {
    text-align: left;
    padding-left: 10px;
}

//上面任务条样式
.gantt_task_scale {
    height: 45px !important;
}

.gantt_task .gantt_task_scale .gantt_scale_cell {
    line-height: 30px !important;
    height: 28px !important;
}
</style>

张大炮er
关注
  • 11
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【dhtmlxGant(甘特图)】常用功能
德仔
11-10 5060
本文将介绍如何使用使用 dhtmlxGantt 在页面中创建基本的甘特图，并且能够将数据保存/更新至数据库(例如服务器上的数据库)。本文中最终的代码可以作为创建甘特图应用的基础样例代码。
VUE - Gantt dhtmlx-gantt 使用
Max's Note
04-25 1万+
VUE - Gantt dhtmlx-gantt 使用 Max.Bai 2020-04 记录VUE中使用dhtmlx-gantt组件 dhtmlx-gantt组件免费，高级功能收费
dhtmlxGantt最新版,甘特图,源码,示例,例子,资料齐全
05-25
dhtmlxGantt最新版本，甘特图的标准包，license是免费的，例子比较齐全，项目中可以继承使用，个人比较推荐。另外手里还有其他甘特图源码，需要的可以要我要。
Dhtmlx日程-图表-甘特图实例
08-23
这里Dhtmlx日程实例，图表实例，甘特图实例，并结合了数据库进行交互，希望参帮助更多的菜鸟
Dhtmlx Gantt部分属性详解
最新发布
live_loves的博客
05-11 1244
针对dhtmlxGantt的一些属性方法的解释
Vue-Gantt-chart:使用Vue做数据控制的Gantt图表
08-05
vue-gantt-chart 基于 Vue 实现的 gantt-like 图表 ,用于排班展示 Catalog template code script code data Slot block 容器块slot 有 两种 需要注意 :star: customGenerateBlocks 为 false（默认值） 的情况 :star: customGenerateBlocks 为 true 的情况 left 行名slot markline 时间标记线slot timeline 行名slot title 标题slot API Param Method Event Run Demo Caution Update License Feature 虚拟列表，快速渲染可视区域，支持大量数据渲染 可变时间轴，1 分钟，2 分钟，3 分钟，4 分钟~~~到一天 可变单元格 标记线 支持自定义描述和容器块 Screen
vue 实现项目进度甘特图
chensi_07的博客
04-26 2498
实现以1天、7天、30天为周期（周期根据筛选条件选择），展示每个项目不同里程碑任务进度。以上就是实现甘特图的全部过程，欢迎大佬们指教。有需要的小伙伴也可以直接引入插件，自己修改。引入插件（我是全局引入的）
【vue库应用】 - 甘特图 dhtmlx-gantt
star_3344的博客
07-05 3852
甘特图是一种项目管理工具，以直观的方式显示项目的时间轴和任务计划。 dhtmlx-gantt库是一个用于创建交互式和可自定义甘特图的js库。本文对该库进行简单应用，包括安装、引用、初始化及配置
vue2实现可拖拽甘特图（结合element-ui的gantt图）
11-07
接到公司需求，要做一个可拖拽的甘特图来实现排期需求，官方的插件要付费还没有中文的官方文档可以看，就去找了各种开源的demo来看，功能上都不是很齐全，于是总结了很多demo，合在一起组成了一版较为完整的满足需求的甘特图。 1.拖拽 拖拽功能是甘特图的主要功能，该demo实现了甘特图时间块上、下、左、右拖拽功能。 2.排序 拖拽后时间块进行排序，计算重叠区域大小确定插入位置。 3.时间选择 结合element-ui的日期时间选择器来确定时间轴。 4.搜索 搜索已存在的时间块，并定位到相应位置。 5.新建排期任务 使用element-ui的弹框以及表单 新建成功的排期列表添加到排期任务中。 6.右键菜单 右击时间块，可以进行查看、删除、修改等操作。 7.撤回 每删除或移动时间块后，增加一条操作记录，点击撤回可撤回当前操作。 8.批量操作 在批量操作后点击保存，才向后端存储数据。
vue使用甘特图插件dhtmlx-gantt（ 简单版）
MELANCHOLY ❤ ◁ ❚❚ ▷
08-25 1万+
甘特图 dhtmlx-gantt
Dhtmlx Gantt 常用方法及基本配置合集(持续更新)
热门推荐
weixin_46221897的博客
05-13 1万+
甘特图基本配置 甘特图扩展功能 gantt.plugins({ tooltip: true, quick_info: true,// 快速信息框 // multiselect: true,// 激活多任务选择 }); 甘特图任务悬浮框位置 gantt.config.tooltip_offset_x = 10; gantt.config.tooltip_offset_y = 30; 激活列表展开（折叠）功能 gantt.config.open_
dhtmlx gantt甘特图标准库及例子
09-27
开源dhtmlx gantt甘特图标准库及例子，非专业付费版本
vue制作甘特图项目源码
06-08
本项目主要面向需要使用vue来实现甘特图需求的开发者，项目实现了节点的拖拽，并用导航线连接各个节点，实现甘特图进度动态更改，导航线可以随着节点的拖拽动态变换位置，并可以新增、删除和修改任务 本项目只提供了...
wl-gantt:wl-gantt：一个简单易用且高度可配置的甘特图进度计划项目管理插件。An easy-to-use gantt plug-in for the vue framework
05-05
甘特图（Gantt chart）又称为横道图、条状图(Bar chart)、生产计划进度图。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·劳伦斯·甘特（Henry Laurence ...
Gantt - config配置信息
Ariel_tilamisu的博客
12-14 4062
Gantt - config配置信息
项目管理工具dhtmlxGantt甘特图入门教程（十）：服务器端数据集成（上）
励志做最业余的专业博主，控件产品可以私我~
02-17 531
因此，您可以使用DataProcessor将数据保存在localStorage或任何其他未链接到某个URL的存储中，或者如果有两个不同的服务器(URL)负责创建和删除对象。除了“POST”、“GET”、“REST”和“JSON”事务模式，甘特数据处理器也可以用于“REST-JSON”模式。是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足应用程序的所有需求，是完善的甘特图图表库。1)调用load方法，其中作为参数指定以JSON格式返回甘特图数据的URL。
Vue3项目使用甘特图技术（vue-ganttastic）
JarryNeverGiveup的博客
01-05 5225
一个具备拖拽、行内多个bar、调整bar大小、调整画布的时间轴精度功能的甘特图插件
vue+element实现甘特图
weixin_45817240的博客
02-07 2734
vue+element-ui 使用el-table实现甘特图
基于dhtmlx-gantt和vue开发的甘特图
yke1213的博客
12-11 2610
我当时公司需求是要求在甘特图上能显示任务情况的，即显示开始和结束时间，和实际任务开始和结束时间，还有请假，出差，加班，节假日情况，在网上找了一圈发现dhtmlx-gantt，dhtmlx-gantt付费不能完全能满足需求，但是小人不敢提，结果摸索后发现这是使用html生成的图表，修改起来很方便，所以我来分享一下免费版的，又满足要求的甘特图。
vue dhtmlx-gantt 导出excel甘特图 详细教程
07-14
当涉及到 Vue DHTMLX-Gantt 导出甘特图到 Excel 的详细教程时，以下是一步一步的指南： 1. 确保您的项目中已经安装了 Vue 和 DHTMLX-Gantt。如果尚未安装，请使用以下命令进行安装： ```bash npm install vue dhtmlx-gantt ``` 2. 在您的 Vue 组件中引入所需的库和样式： ```javascript import 'dhtmlx-gantt'; import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; import * as XLSX from 'xlsx'; import FileSaver from 'file-saver'; ``` 3. 创建一个 Vue 组件，并在模板中添加一个 Gantt 图表和一个按钮： ```html <template> <div ref="ganttContainer" style="width: 100%; height: 600px;"></div> <button @click="exportGantt">导出 Excel</button> </template> <script> export default { mounted() { const ganttContainer = this.$refs.ganttContainer; gantt.init(ganttContainer); // 设置 Gantt 图表的配置和数据 // 示例数据 const tasks = [ { id: 1, text: '任务1', start_date: '2022-01-01', duration: 5, progress: 0.5 }, { id: 2, text: '任务2', start_date: '2022-01-06', duration: 4, progress: 0.2 }, // 其他任务... ]; gantt.parse({ data: tasks }); }, methods: { exportGantt() { const gantt = this.$refs.ganttContainer.$gantt; const data = gantt.serialize(); const worksheet = XLSX.utils.json_to_sheet(data); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Gantt Data'); const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); const excelData = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); FileSaver.saveAs(excelData, 'gantt_data.xlsx'); }, }, }; </script> <style> /* 可选的样式 */ </style> ``` 4. 在上述示例代码中，需要注意以下部分： - 在 `mounted` 钩子中，使用 `gantt.init(ganttContainer)` 初始化 Gantt 图表，并根据您的需求设置其配置和数据。 - `exportGantt` 方法用于将 Gantt 图表数据导出到 Excel。确保在 `exportGantt` 方法中的 `this.$refs.ganttContainer.$gantt` 是对 Gantt 图表组件的正确引用。 - 点击 "导出 Excel" 按钮时，将会生成一个名为 `gantt_data.xlsx` 的 Excel 文件，其中包含了 Gantt 图表的数据。 这就是使用 Vue DHTMLX-Gantt 导出甘特图到 Excel 的详细教程。希望对您有所帮助！如果您有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值