devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue中利用dhtmlx-gantt实现甘特图_vue2甘特图数据结构怎么自定义字段

作者：羊村懒王 | 2024-04-28 00:38:09

赞

踩

vue2甘特图数据结构怎么自定义字段

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

成品展示

使用说明

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

npm install dhtmlx-gantt@6.3.7

2.引入组件

  1. <template>
  2.     <div>
  3.         <div ref="gantt" style="height:500px;" />
  4.     </div>
  5. </template>

3.引入dhtmlx-gantt

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

4.甘特图数据配置

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

  • 父级时间是根据子级start_date以及duration自动计算
  • progress：完成度的最大值为1
  • open：是否展开文件
  • parent：父级id
  • start_date：开始时间（日月年）
  • text：左边数据展示文件名称（可以自定义添加展示字段，在后面列配置项可以配置）
  1. tasks: {
  2.                 data: [
  3.                     //     {
  4.                     //         id: 11,
  5.                     //         text: 'Project #1',
  6.                     //         // type: gantt.config.types.project,
  7.                     //         progress: 0.5,//完成度
  8.                     //         open: true,//默认打开
  9.                     //         number: '20240227',//显示字段
  10.                     //     },
  11.                     //     {
  12.                     //         toolTipsTxt: '任务#101-001',
  13.                     //         id: 12,//任务id
  14.                     //         text: '任务#1',//任务名称
  15.                     //         start_date: '03-04-2022',//开始时间 日月年
  16.                     //         duration: '5',//任务时常
  17.                     //         parent: '11',//父级id
  18.                     //         progress: 1,//完成度
  19.                     //         open: true,//默认打开
  20.                     //     },
  21.                     //     {
  22.                     //         id: 13,
  23.                     //         text: '任务#2',
  24.                     //         start_date: '03-04-2022',
  25.                     //         // type: gantt.config.types.project,
  26.                     //         parent: '11',
  27.                     //         progress: 0.255,
  28.                     //         open: true,
  29.                     //     },
  30.                     //     {
  31.                     //         id: 14,
  32.                     //         text: '任务#3',
  33.                     //         start_date: '01-04-2022',
  34.                     //         duration: '6',
  35.                     //         parent: '11',
  36.                     //         progress: 0.8,
  37.                     //         open: true,
  38.                     //     },
  39.                     //     {
  40.                     //         id: 15,
  41.                     //         text: '任务#4',
  42.                     //         // type: gantt.config.types.project,
  43.                     //         parent: '11',
  44.                     //         progress: 0.2,
  45.                     //         open: true,
  46.                     //     },
  47.                     //     {
  48.                     //         id: 16,
  49.                     //         text: 'Final milestone',
  50.                     //         start_date: '15-04-2022',
  51.                     //         // type: gantt.config.types.milestone,
  52.                     //         parent: '11',
  53.                     //         progress: 0,
  54.                     //         open: true,
  55.                     //     },
  56.  
  57.                     //     {
  58.                     //         id: 17,
  59.                     //         text: '任务#2.1',
  60.                     //         start_date: '03-04-2022',
  61.                     //         duration: '2',
  62.                     //         parent: '13',
  63.                     //         progress: 1,
  64.                     //         open: true,
  65.                     //     },
  66.                     //     {
  67.                     //         id: 18,
  68.                     //         text: '任务#2.2',
  69.                     //         start_date: '06-04-2022',
  70.                     //         duration: '3',
  71.                     //         parent: '13',
  72.                     //         progress: 0.8,
  73.                     //         open: true,
  74.                     //     },
  75.                     //     {
  76.                     //         id: 19,
  77.                     //         text: '任务#2.3',
  78.                     //         start_date: '10-04-2022',
  79.                     //         duration: '4',
  80.                     //         parent: '13',
  81.                     //         progress: 0.2,
  82.                     //         open: true,
  83.                     //     },
  84.                     //     {
  85.                     //         id: 20,
  86.                     //         text: '任务#2.4',
  87.                     //         start_date: '10-04-2022',
  88.                     //         duration: '4',
  89.                     //         parent: '13',
  90.                     //         progress: 0,
  91.                     //         open: true,
  92.                     //     },
  93.                     //     {
  94.                     //         id: 21,
  95.                     //         text: '任务#4.1',
  96.                     //         start_date: '03-04-2022',
  97.                     //         duration: '4',
  98.                     //         parent: '15',
  99.                     //         progress: 0.5,
  100.                     //         open: true,
  101.                     //     },
  102.                     //     {
  103.                     //         id: 22,
  104.                     //         text: '任务#4.2',
  105.                     //         start_date: '03-04-2022',
  106.                     //         duration: '4',
  107.                     //         parent: '15',
  108.                     //         progress: 0.1,
  109.                     //         open: true,
  110.                     //     },
  111.                     //     {
  112.                     //         id: 23,
  113.                     //         text: 'Mediate milestone',
  114.                     //         start_date: '14-04-2022',
  115.                     //         // type: gantt.config.types.milestone,
  116.                     //         parent: '15',
  117.                     //         progress: 0,
  118.                     //         open: true,
  119.                     //     },
  120.                 ],

5.tasks 中link连线配置

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

6.初始化配置

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

弹窗汉化

  1. gantt.locale.labels = {
  2.                 dhx_cal_today_button: "今天",
  3.                 day_tab: "日",
  4.                 week_tab: "周",
  5.                 month_tab: "月",
  6.                 new_event: "新建日程",
  7.                 icon_save: "保存",
  8.                 icon_cancel: "关闭",
  9.                 icon_details: "详细",
  10.                 icon_edit: "编辑",
  11.                 icon_delete: "删除",
  12.                 confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
  13.                 confirm_deleting: "是否删除计划?",
  14.                 section_description: "描述:",
  15.                 section_time: "时间范围:",
  16.                 section_type: "类型:",
  17.                 section_text: "计划名称:",
  18.                 section_test: "测试:",
  19.                 section_projectClass: "项目类型:",
  20.                 taskProjectType_0: "项目任务",
  21.                 taskProjectType_1: "普通任务",
  22.                 section_head: "负责人:",
  23.                 section_priority: '优先级:',
  24.                 taskProgress: '任务状态',
  25.                 taskProgress_0: "未开始",
  26.                 taskProgress_1: "进行中",
  27.                 taskProgress_2: "已完成",
  28.                 taskProgress_3: "已延期",
  29.                 taskProgress_4: "搁置中",
  30.                 section_template: 'Details',
  31.                 /* grid columns */
  32.                 column_text: "计划名称",
  33.                 column_start_date: "开始时间",
  34.                 column_duration: "持续时间",
  35.                 column_add: "",
  36.                 column_priority: "难度",
  37.                 /* link confirmation */
  38.                 link: "关联",
  39.                 confirm_link_deleting: "将被删除",
  40.                 message_ok: '确定',
  41.                 message_cancel: '取消',
  42.                 link_start: " (开始)",
  43.                 link_end: " (结束)",
  44.  
  45.                 type_task: "任务",
  46.                 type_project: "项目",
  47.                 type_milestone: "里程碑",
  48.                 minutes: "分钟",
  49.                 hours: "小时",
  50.                 days: "天",
  51.                 weeks: "周",
  52.                 months: "月",
  53.                 years: "年"
  54.             }

gantt.clearAll(); // 清空旧数据
  1. // 初始化
  2.         init() {
  3.             // 格式化日期
  4.             gantt.locale.date = {
  5.                 month_full: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
  6.                 month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
  7.                 day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
  8.                 day_short: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
  9.             }
  10.  
  11.             console.log(gantt);
  12.             //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
  13.             gantt.config.autosize = true
  14.             //只读模式
  15.             gantt.config.readonly = false
  16.             //是否显示左侧树表格
  17.             gantt.config.show_grid = true
  18.             // //表格列设置
  19.             gantt.config.columns = [
  20.                 { name: 'text', label: '阶段名字', tree: true, width: '150', align: 'center', },
  21.                 // { name: 'number', label: '工单号', tree: false, width: '120', align: 'center', },
  22.                 {
  23.                     name: 'duration',
  24.                     label: '工时',
  25.                     align: 'center',
  26.                     template: function (obj) {
  27.                         return obj.duration + '天'
  28.                     },
  29.                 },
  30.                 /*{name:"start_date", label:"开始时间", align: "center" },
  31.         
  32.                 {name:"end_date",   label:"结束时间",   align: "center" },*/
  33.             ]
  34.             // 自动延长时间刻度
  35.             gantt.config.fit_tasks = true
  36.             // 允许拖放
  37.             gantt.config.drag_project = true
  38.             // 定义时间格式
  39.             gantt.config.scales = [
  40.                 { unit: 'month', step: 1, date: ' %Y,%F' },
  41.                 { unit: 'day', step: 1, date: ' %D ,%j' },
  42.             ]
  43.             // //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
  44.             gantt.config.fit_tasks = true
  45.             // 添加弹窗属性
  46.             gantt.config.lightbox.sections = [
  47.                 {
  48.                     name: 'description',
  49.                     height: 70,
  50.                     map_to: 'text',
  51.                     type: 'textarea',
  52.                     focus: true,
  53.                 },
  54.                 { name: 'type', type: 'typeselect', map_to: 'type' },
  55.                 { name: 'time', type: 'duration', map_to: 'auto' },
  56.             ];
  57.             console.log(this.tasks.data, '检查任务数据'); // 检查任务数据
  58.             // 初始化
  59.             gantt.init(this.$refs.gantt)
  60.             /* *******重点******* */
  61.             gantt.clearAll(); // 清空旧数据
  62.             /* ****************** */
  63.             // 数据解析
  64.             gantt.parse(this.tasks)
  65.         },

7.更新数据

  1. loadData(arg) {
  2.             if (!this.url.list) {
  3.                 this.$message.error("请设置url.list属性!")
  4.                 return
  5.             }
  6.             //加载数据 若传入参数1则加载第一页的内容
  7.             let params = {
  8.                 planId: this.planId,
  9.             }
  10.             this.loading = true;
  11.             this.tasks.data = []
  12.             getAction(this.url.list, params).then((res) => {
  13.                 if (res.success) {
  14.                     console.log(res, '甘特图数据');
  15.  
  16.                     res.result.forEach(obj => {
  17.                         obj.open = false
  18.                     })
  19.                     this.tasks.data = res.result
  20.                     this.init()
  21.                 }
  22.                 if (res.code === 510) {
  23.                     this.$message.warning(res.message)
  24.                 }
  25.                 this.loading = false;
  26.             })
  27.         },

更多配置

更多配置

完整代码

  1.  
  2. <template>
  3.     <div>
  4.         <div ref="gantt" style="height:500px;" />
  5.     </div>
  6. </template>
  7.   
  8. <script>
  9. import gantt from 'dhtmlx-gantt'
  10. import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
  11. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  12. import { getAction, putAction } from '@/api/manage'
  13. export default {
  14.     props: {
  15.         planId: {
  16.             type: String,
  17.             required: true,
  18.         }
  19.     },
  20.     // mixins: [JeecgListMixin],
  21.     data() {
  22.         return {
  23.             // 甘特图配置
  24.             tasks: {
  25.                 data: [
  26.                     //     {
  27.                     //         id: 11,
  28.                     //         text: 'Project #1',
  29.                     //         // type: gantt.config.types.project,
  30.                     //         progress: 0.5,//完成度
  31.                     //         open: true,//默认打开
  32.                     //         number: '20240227',//显示字段
  33.                     //     },
  34.                     //     {
  35.                     //         toolTipsTxt: '任务#101-001',
  36.                     //         id: 12,//任务id
  37.                     //         text: '任务#1',//任务名称
  38.                     //         start_date: '03-04-2022',//开始时间 日月年
  39.                     //         duration: '5',//任务时常
  40.                     //         parent: '11',//父级id
  41.                     //         progress: 1,//完成度
  42.                     //         open: true,//默认打开
  43.                     //     },
  44.                     //     {
  45.                     //         id: 13,
  46.                     //         text: '任务#2',
  47.                     //         start_date: '03-04-2022',
  48.                     //         // type: gantt.config.types.project,
  49.                     //         parent: '11',
  50.                     //         progress: 0.255,
  51.                     //         open: true,
  52.                     //     },
  53.                     //     {
  54.                     //         id: 14,
  55.                     //         text: '任务#3',
  56.                     //         start_date: '01-04-2022',
  57.                     //         duration: '6',
  58.                     //         parent: '11',
  59.                     //         progress: 0.8,
  60.                     //         open: true,
  61.                     //     },
  62.                     //     {
  63.                     //         id: 15,
  64.                     //         text: '任务#4',
  65.                     //         // type: gantt.config.types.project,
  66.                     //         parent: '11',
  67.                     //         progress: 0.2,
  68.                     //         open: true,
  69.                     //     },
  70.                     //     {
  71.                     //         id: 16,
  72.                     //         text: 'Final milestone',
  73.                     //         start_date: '15-04-2022',
  74.                     //         // type: gantt.config.types.milestone,
  75.                     //         parent: '11',
  76.                     //         progress: 0,
  77.                     //         open: true,
  78.                     //     },
  79.  
  80.                     //     {
  81.                     //         id: 17,
  82.                     //         text: '任务#2.1',
  83.                     //         start_date: '03-04-2022',
  84.                     //         duration: '2',
  85.                     //         parent: '13',
  86.                     //         progress: 1,
  87.                     //         open: true,
  88.                     //     },
  89.                     //     {
  90.                     //         id: 18,
  91.                     //         text: '任务#2.2',
  92.                     //         start_date: '06-04-2022',
  93.                     //         duration: '3',
  94.                     //         parent: '13',
  95.                     //         progress: 0.8,
  96.                     //         open: true,
  97.                     //     },
  98.                     //     {
  99.                     //         id: 19,
  100.                     //         text: '任务#2.3',
  101.                     //         start_date: '10-04-2022',
  102.                     //         duration: '4',
  103.                     //         parent: '13',
  104.                     //         progress: 0.2,
  105.                     //         open: true,
  106.                     //     },
  107.                     //     {
  108.                     //         id: 20,
  109.                     //         text: '任务#2.4',
  110.                     //         start_date: '10-04-2022',
  111.                     //         duration: '4',
  112.                     //         parent: '13',
  113.                     //         progress: 0,
  114.                     //         open: true,
  115.                     //     },
  116.                     //     {
  117.                     //         id: 21,
  118.                     //         text: '任务#4.1',
  119.                     //         start_date: '03-04-2022',
  120.                     //         duration: '4',
  121.                     //         parent: '15',
  122.                     //         progress: 0.5,
  123.                     //         open: true,
  124.                     //     },
  125.                     //     {
  126.                     //         id: 22,
  127.                     //         text: '任务#4.2',
  128.                     //         start_date: '03-04-2022',
  129.                     //         duration: '4',
  130.                     //         parent: '15',
  131.                     //         progress: 0.1,
  132.                     //         open: true,
  133.                     //     },
  134.                     //     {
  135.                     //         id: 23,
  136.                     //         text: 'Mediate milestone',
  137.                     //         start_date: '14-04-2022',
  138.                     //         // type: gantt.config.types.milestone,
  139.                     //         parent: '15',
  140.                     //         progress: 0,
  141.                     //         open: true,
  142.                     //     },
  143.                 ],
  144.                 // #字段解释
  145.                 // 格式 id:数据id   
  146.                 //     source:开始链接的项目id  ----为tasks.data中数据的id
  147.                 //     target:要链接项目的id  ----为tasks.data中数据的id
  148.                 //     type: 0--进行-开始  `尾部链接头部`  
  149.                 //           1--开始-开始  `头部链接头部`
  150.                 //           2--进行-进行  `尾部链接尾部`
  151.                 //           3--开始-进行  `头部链接尾部`
  152.                 // 任务之间连接
  153.                 links: [
  154.                     { id: '10', source: '11', target: '12', type: '1' },
  155.                     { id: '11', source: '11', target: '13', type: '1' },
  156.                     { id: '12', source: '11', target: '14', type: '1' },
  157.                     { id: '13', source: '11', target: '15', type: '1' },
  158.                     { id: '14', source: '23', target: '16', type: '0' },
  159.                     { id: '15', source: '13', target: '17', type: '1' },
  160.                     { id: '16', source: '17', target: '18', type: '0' },
  161.                     { id: '17', source: '18', target: '19', type: '0' },
  162.                     { id: '18', source: '19', target: '20', type: '0' },
  163.                     { id: '19', source: '15', target: '21', type: '2' },
  164.                     { id: '20', source: '15', target: '22', type: '2' },
  165.                     { id: '21', source: '15', target: '23', type: '0' },
  166.                 ],
  167.             },
  168.  
  169.             url: {
  170.                 list: "/projectManage/projectPlan/queryProjectPlanGTT",
  171.                 // delete: "/projectManage/projectModule/delete",
  172.                 // deleteBatch: "/projectManage/projectModule/deleteBatch",
  173.                 // exportXlsUrl: "/projectManage/projectModule/exportXls",
  174.                 // importExcelUrl: "/projectManage/projectModule/importExcel",
  175.                 // budgetExportXlsUrl: "/projectManage/projectModule/budgetExportXls",
  176.                 // budgetImportUrl: "/projectManage/projectModule/budgetImportExcel",
  177.             },
  178.  
  179.         }
  180.     },
  181.     watch: {
  182.         
  183.     },
  184.     created() {
  185.         console.log(this.planId, '参数');
  186.  
  187.     },
  188.     mounted() {
  189.         this.loadData();
  190.     },
  191.     methods: {
  192.         // 初始化
  193.         init() {
  194.             // 格式化日期
  195.             gantt.locale.date = {
  196.                 month_full: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
  197.                 month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
  198.                 day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
  199.                 day_short: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
  200.             }
  201.  
  202. gantt.locale.labels = {
  203.                 dhx_cal_today_button: "今天",
  204.                 day_tab: "日",
  205.                 week_tab: "周",
  206.                 month_tab: "月",
  207.                 new_event: "新建日程",
  208.                 icon_save: "保存",
  209.                 icon_cancel: "关闭",
  210.                 icon_details: "详细",
  211.                 icon_edit: "编辑",
  212.                 icon_delete: "删除",
  213.                 confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
  214.                 confirm_deleting: "是否删除计划?",
  215.                 section_description: "描述:",
  216.                 section_time: "时间范围:",
  217.                 section_type: "类型:",
  218.                 section_text: "计划名称:",
  219.                 section_test: "测试:",
  220.                 section_projectClass: "项目类型:",
  221.                 taskProjectType_0: "项目任务",
  222.                 taskProjectType_1: "普通任务",
  223.                 section_head: "负责人:",
  224.                 section_priority: '优先级:',
  225.                 taskProgress: '任务状态',
  226.                 taskProgress_0: "未开始",
  227.                 taskProgress_1: "进行中",
  228.                 taskProgress_2: "已完成",
  229.                 taskProgress_3: "已延期",
  230.                 taskProgress_4: "搁置中",
  231.                 section_template: 'Details',
  232.                 /* grid columns */
  233.                 column_text: "计划名称",
  234.                 column_start_date: "开始时间",
  235.                 column_duration: "持续时间",
  236.                 column_add: "",
  237.                 column_priority: "难度",
  238.                 /* link confirmation */
  239.                 link: "关联",
  240.                 confirm_link_deleting: "将被删除",
  241.                 message_ok: '确定',
  242.                 message_cancel: '取消',
  243.                 link_start: " (开始)",
  244.                 link_end: " (结束)",
  245.  
  246.                 type_task: "任务",
  247.                 type_project: "项目",
  248.                 type_milestone: "里程碑",
  249.                 minutes: "分钟",
  250.                 hours: "小时",
  251.                 days: "天",
  252.                 weeks: "周",
  253.                 months: "月",
  254.                 years: "年"
  255.             }
  256.  
  257.  
  258.             console.log(gantt);
  259.             //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
  260.             gantt.config.autosize = true
  261.             //只读模式
  262.             gantt.config.readonly = false
  263.             //是否显示左侧树表格
  264.             gantt.config.show_grid = true
  265.             // //表格列设置
  266.             gantt.config.columns = [
  267.                 { name: 'text', label: '阶段名字', tree: true, width: '150', align: 'center', },
  268.                 // { name: 'number', label: '工单号', tree: false, width: '120', align: 'center', },
  269.                 {
  270.                     name: 'duration',
  271.                     label: '工时',
  272.                     align: 'center',
  273.                     template: function (obj) {
  274.                         return obj.duration + '天'
  275.                     },
  276.                 },
  277.                 /*{name:"start_date", label:"开始时间", align: "center" },
  278.         
  279.                 {name:"end_date",   label:"结束时间",   align: "center" },*/
  280.             ]
  281.             // 自动延长时间刻度
  282.             gantt.config.fit_tasks = true
  283.             // 允许拖放
  284.             gantt.config.drag_project = true
  285.             // 定义时间格式
  286.             gantt.config.scales = [
  287.                 { unit: 'month', step: 1, date: ' %Y,%F' },
  288.                 { unit: 'day', step: 1, date: ' %D ,%j' },
  289.             ]
  290.             // //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
  291.             gantt.config.fit_tasks = true
  292.             // 添加弹窗属性
  293.             gantt.config.lightbox.sections = [
  294.                 {
  295.                     name: 'description',
  296.                     height: 70,
  297.                     map_to: 'text',
  298.                     type: 'textarea',
  299.                     focus: true,
  300.                 },
  301.                 { name: 'type', type: 'typeselect', map_to: 'type' },
  302.                 { name: 'time', type: 'duration', map_to: 'auto' },
  303.             ];
  304.             console.log(this.tasks.data, '检查任务数据'); // 检查任务数据
  305.             // 初始化
  306.             gantt.init(this.$refs.gantt)
  307.             /* *******重点******* */
  308.             gantt.clearAll(); // 清空旧数据
  309.             /* ****************** */
  310.             // 数据解析
  311.             gantt.parse(this.tasks)
  312.         },
  313.         loadData(arg) {
  314.             if (!this.url.list) {
  315.                 this.$message.error("请设置url.list属性!")
  316.                 return
  317.             }
  318.             //加载数据 若传入参数1则加载第一页的内容
  319.             let params = {
  320.                 planId: this.planId,
  321.             }
  322.             this.loading = true;
  323.             this.tasks.data = []
  324.             getAction(this.url.list, params).then((res) => {
  325.                 if (res.success) {
  326.                     console.log(res, '甘特图数据');
  327.  
  328.                     res.result.forEach(obj => {
  329.                         obj.open = false
  330.                     })
  331.                     this.tasks.data = res.result
  332.                     this.init()
  333.                 }
  334.                 if (res.code === 510) {
  335.                     this.$message.warning(res.message)
  336.                 }
  337.                 this.loading = false;
  338.             })
  339.         },
  340.     },
  341. }
  342. </script>
  343.   
  344. <style lang="less" scoped>
  345. .firstLevelTask {
  346.     border: none;
  347.  
  348.     .gantt_task_content {
  349.         // font-weight: bold;
  350.         font-size: 13px;
  351.     }
  352. }
  353.  
  354. .secondLevelTask {
  355.     border: none;
  356. }
  357.  
  358. .thirdLevelTask {
  359.     border: 2px solid #da645d;
  360.     color: #da645d;
  361.     background: #da645d;
  362. }
  363.  
  364. .milestone-default {
  365.     border: none;
  366.     background: rgba(0, 0, 0, 0.45);
  367. }
  368.  
  369. .milestone-unfinished {
  370.     border: none;
  371.     background: #5692f0;
  372. }
  373.  
  374. .milestone-finished {
  375.     border: none;
  376.     background: #84bd54;
  377. }
  378.  
  379. .milestone-canceled {
  380.     border: none;
  381.     background: #da645d;
  382. }
  383.  
  384. html,
  385. body {
  386.     margin: 0px;
  387.     padding: 0px;
  388.     height: 100%;
  389.     overflow: hidden;
  390. }
  391.  
  392. .container {
  393.     height: 900px;
  394.  
  395.     .left-container {
  396.         height: 100%;
  397.     }
  398. }
  399.  
  400. .left-container {
  401.     height: 600px;
  402. }
  403.  
  404. .gantt_scale_line {
  405.     border-top: 0;
  406. }
  407.  
  408. .weekend {
  409.     //background:#f4f7f4!important;
  410.     color: #000000 !important;
  411. }
  412.  
  413. .gantt_selected .weekend {
  414.     background: #f7eb91 !important;
  415. }
  416.  
  417. .gantt_task_content {
  418.     text-align: left;
  419.     padding-left: 10px;
  420. }
  421.  
  422. //上面任务条样式
  423. .gantt_task_scale {
  424.     height: 45px !important;
  425. }
  426.  
  427. .gantt_task .gantt_task_scale .gantt_scale_cell {
  428.     line-height: 30px !important;
  429.     height: 28px !important;
  430. }
  431. </style>
  432.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/499534
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号