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

vue2实现甘特图_基于vue的开源甘特图控件

作者：我家小花儿 | 2024-04-28 00:44:08

赞

踩

基于vue的开源甘特图控件

Vue2使用DHTMLX Gantt

甘特图

成品展示

gantt安装与使用

vue2版---部分功能收费

  1. 安装gantt

    1. npm install dhtmlx-gantt -save
    2. 复制代码

  2. 引入---组件

    1. `引入`
    2. <template>
    3.     <div ref="gantt" class="container" />
    4. </template>
    5. <script>
    6.   import { gantt } from 'dhtmlx-gantt'
    7. </script>
    8. 复制代码

  3. 使用

    使用需要很多配置项，在原生版进行详情介绍，vue版只做基本使用

    功能（收费）文档链接简要说明
    动态加载Dynamic loading能通过接口更新甘特数据,gantt支持的接口方法
    时间刻度隐藏Ability to hide time units on the time scale右边视图刻度可以不显示某时间内容
    工作时间精度Assigning Calendar to Project精确工作时间到小时或小数点天数
    自动调度Auto scheduling使甘特图能够根据任务之间的关系自动安排任务，自动调度时间
    页面多个甘特图Enterprise and Ultimate licenses)单个页面创建多个甘特图
    关键任务计算Critical path calculation关键任务不可延迟，项目标红，计算项目可预算时间
    水平拖拽多个任务Decimal units for tasks durations可以同时修改多个任务的时间
    项目，里程碑，任务类型Projects and Milestones task types区别显示图标，里程碑（菱形图案）---原生版可用
    将项目拆分子任务Projects and Milestones task types项目收缩显示子任务 -----原生版可用
    分组任务Tasks grouping细化数据分类，不做汇总分区基本用不上

    以上内容只是部分收费内容，并非全部收费内容

原生版---推荐使用

引入

  1. `页面部分` ----#节点高度要给，gantt不根据内容撑开
  2. <div style="min-height:calc(78vh - 50px - 5px );width: 100%;overflow: hidden;" ref="gantt">
  3.  </div>
  4. ​
  5. `引入部分`
  6. import {
  7.   gantt
  8. } from '@/assets/js/dhtmlx';
  9. import "@/assets/css/dhtmlxgantt.css";
  10. 复制代码
  1. css文件地址 examples/dhtmlx_gantt/dhtmlxgantt.css · 残星落影/博客 - 码云 - 开源中国 (gitee.com)
  2. js文件地址 examples/dhtmlx_gantt/dhtmlx · 残星落影/博客 - 码云 - 开源中国 (gitee.com)

使用

gantt加载数据格式

  1. `定义数据格式` 
  2. data(){
  3.   return {
  4.     tasks: {
  5.             data: [],//数据
  6.             links: [],//关联项目数据
  7.           },
  8.     }
  9. }
  10. `甘特数据载入`
  11.  gantt.parse(this.tasks);//parse方法加载数据
  12.  gantt.render();//建议每一次修改配置项调用一次render方法
  13. 复制代码

tasks.data数据格式

  1. data=[
  2.   { 
  3.     id: 1,//必填
  4.     text: "标题",//必填 
  5.     type: "task",// 项目类型 task任务 project项目  milestone里程碑  
  6.     start_date: "2023/3/15",
  7.     duration: 5,//任务持续时间
  8.     parent: 11,//存在这个属性说明此数据为子任务数据，父任务id为11
  9.     progress: 0.3,//项目任务滑块的进度
  10.     open: true,//是否展开显示
  11.     ....
  12.   },
  13.   { 
  14.     id: 2,
  15.     text: "标题2", 
  16.     start_date: "2023/3/15",
  17.     duration: 5,
  18.     progress: 0,
  19.     open: true
  20.     ....
  21.   },
  22. ]
  23. # data中有些数据可以直接被读取，其余数据都可以定义在左侧表格columns数据显示
  24. `甘特可直接读取属性
  25.     type  parent  progress open ...
  26. `
  27. 复制代码

tasks.links数据格式

  1. links=[
  2.   {
  3.     id:'111',//数据id
  4.     source:'1'
  5.     target:'2'
  6.     type:'0'
  7.   },//
  8.   {
  9.     id:'222'
  10.     source:'2'
  11.     target:'1'
  12.     type:'1'
  13.   },//数据说明 滑块任务2 的头部 指向滑块任务1的头部
  14. ]
  15. #字段解释
  16. 格式 id:数据id   
  17.     source:开始链接的项目id  ----为tasks.data中数据的id
  18.     target:要链接项目的id  ----为tasks.data中数据的id
  19.     type: 0--进行-开始  `尾部链接头部`  
  20.           1--开始-开始  `头部链接头部`
  21.           2--进行-进行  `尾部链接尾部`
  22.           3--开始-进行  `头部链接尾部`
  23. 复制代码

图例

配置项

  • 基础config

    1.  gantt.config.branch_loading = true; // 启用动态加载
    2.  gantt.config.xml_date = "%Y-%m-%d"; //日期格式化
    3.  gantt.config.order_branch = true;
    4.  gantt.config.order_branch_free = true;
    5.  gantt.config.autofit = true;//左侧是否自适应
    6.  gantt.config.drag_links = true;//连线
    7.  gantt.config.readonly = false;  //只读
    8.  gantt.config.smart_scales = true;
    9.  gantt.config.date_scale = "%m月%d日"; //右侧显示列名
    10.  gantt.config.layout = {//拖拽布局
    11.         css: "gantt_container",
    12.         rows: [
    13.           {
    14.             cols: [
    15.               { view: "grid", id: "grid", scrollX: "scrollHor", scrollY: "scrollVer" },
    16.               { resizer: true, width: 1 },
    17.               { view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
    18.               { view: "scrollbar", scroll: "y", id: "scrollVer" }
    19.             ]
    20.           },
    21.           { view: "scrollbar", scroll: "x", id: "scrollHor", height: 20 }
    22.         ]
    23.       };
    24. gantt.config.start_on_monday = true;//是否从周一显示起始时间---右侧条形图
    25. gantt.config.work_time = true;//显示工作时间
    26. gantt.config.fit_tasks = true;   //自动调整图表坐标轴区间用于适配task的长度
    27. 复制代码

  • local---本地汉化

    说明

    (1)直接引入dhtmlx甘特实现的图表操作描述全是英文的，所以要对现有的属性数据显示要进行汉化文字代替

    (2)汉化分三种

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

    （4）图例注释

  • 表格(左)配置

    属性说明
    name在tasks.data中定义的属性数据，add为例外,add为新增数据项触发gantt新增弹窗，显示为一个加号
    label标记描述
    align文字格式
    resize布尔值，可以拉伸内容宽度
    width宽度，可写max _width min_width
    height高度, 可写max _height min_height
    editor将表格内容设置为可编辑状态，官网描述
    template自定义渲染内容
    1.   //左侧显示列名
    2.       gantt.config.columns = [
    3.         //{ name: "add", width: 44 }
    4.         { name: "text", min_width:100,max_width:200, label:"任务", align: "left",resize: true,  tree: true, editor: { type: 'text', map_to: 'text' } },
    5.         { name: "id", label: "", hide: true },
    6.         { name: "start_date", label: "开始时间", width: 120, resize: true, align: "left" },
    7.         {
    8.           name: "head", width: 110, height: 40, label: "负责人",resize: true, align: "left",
    9.           // editor: {
    10.           //   map_to: "head_id", type: "select", options: gantt.serverList("staff"),
    11.           // },
    12.           #这里的template渲染的是任务头像跟名称，this.genttDealById 是在methods定义的方法根据id获取名称，gantt.serverList()是甘特图获取数据集分发
    13.           template: (item) => {
    14.             if (this.ganttDealById(gantt.serverList('staff'), item.head_id)) {
    15.               return `<span class='userIcon' style='background-color:${item.color ? item.color : "#6666"}'>${this.ganttDealById(gantt.serverList('staff'), item.head_id).slice(0, 1)}</span>${this.ganttDealById(gantt.serverList('staff'), item.head_id)}`
    16.             }
    17.           }
    18.         },
    19.         // { name: "end_date", label: "结束时间", align: "center" },
    20.         {
    21.           name: "taskProgress", label: "任务状态", align: "center", width: 130,editor: {
    22.             type: "select", map_to: "taskProgress", options: [
    23.               #这里的labels.taskProgress_0属性是自定义汉化属性描述
    24.               { key: "0", label: gantt.locale.labels.taskProgress_0 },
    25.               { key: "1", label: gantt.locale.labels.taskProgress_1 },
    26.               { key: "2", label: gantt.locale.labels.taskProgress_2 },
    27.               { key: "3", label: gantt.locale.labels.taskProgress_3 },
    28.               { key: "4", label: gantt.locale.labels.taskProgress_4 },
    29.             ],
    30.           },
    31.             #obj形参是单个的tasks.data中的数据
    32.           template: function (obj) {
    33.             let re = '';
    34.             switch (obj.taskProgress) {
    35.               case "0":
    36.                 #这里的样式类名只能通过css读取，写在less scss无法读取
    37.                 re = `<div class='taskProgress color_bg_1' >未开始</div>`
    38.                 break;
    39.               case "1":
    40.                 re = `<div class='taskProgress color_bg_2' >进行中</div>`
    41.                 break;
    42.               case "2":
    43.                 re = `<div class='taskProgress color_bg_3'  >已完成</div>`
    44.                 break;
    45.               case "3":
    46.                 re = `<div  class='taskProgress color_bg_4'>已延期</div>`
    47.                 break;
    48.               case "4":
    49.                 re = `<div  class='taskProgress color_bg_5' >搁置中</div>`
    50.                 break;
    51.             }
    52.             return re
    53.           }
    54.         },
    55. ​
    56.       ];
    57. 复制代码

  • 弹窗表单----见汉化图例

    1.   //弹出层
    2.       gantt.config.lightbox.sections = [        { name: "text", height: 70, map_to: "text", type: "textarea", focus: true, width: "*" },        {          name: "time", height: 40, map_to: "auto", type: "duration",          time_format: ["%Y", "%m", "%d"],
    3.         },
    4.         {
    5.           name: "projectClass", height: 30, map_to: "proTemplate", type: "template",
    6.          
    7.         },
    8.         {
    9.           name: "head", height: 22, map_to: "head_id", type: "select", options: gantt.serverList('staff',[]),
    10.         },
    11.         { name: "description", height: 70, map_to: "description", type: "textarea" },
    12.         {
    13.           name: "priority", height: 40, map_to: "priority", type: "radio", options: gantt.serverList("priority")
    14.         },
    15. ​
    16.       ];
    17. 复制代码

  • gantt功能插件挂载

    1.  gantt.plugins({
    2.         click_drag: true,
    3.         drag_timeline: true,// 拖动图
    4.         marker: true,// 时间标记
    5.         fullscreen: true,// 全屏
    6.         tooltip: true,// 鼠标经过时信息
    7.         undo: true // 允许撤销
    8.       })
    9. 复制代码

    收费的甘特图功能一般在这放开

常用事件

事件参数说明 （参数：id:数据id,item:当个数据对象,mode:拖拽模式,e:事件event）
onGanttReady无在 dhtmlx甘特图初始化完成后触发，但甘特图尚未在页面上呈现
onBeforeLightboxid打开弹窗之前修改
onAfterTaskAddid, item在用户将任务添加到甘特图后触发
onAfterTaskUpdateid, item在用户将修改甘特图任务后触发
onAfterTaskDeleteid, item在用户删除甘特图任务后触发
onAfterTaskDragid, mode, e在用户完成拖动并释放鼠标按钮后触发,移动滑块
onAfterLinkDeleteid, item删除连接任务的联系
onAfterLinkUpdateid, item修改连接项目关系
onBeforeLinkAddid, item新增连接项目关系
onLightboxSaveid, item弹窗新增修改

甘特图常用API方法

方法用例说明
gantt.serverList(‘数据集名称’,'数据集')gantt,serverList("数据集名称") 返回的数据集在甘特实例定义数据集，方便在甘特配置修改是调用
gantt.updateCollection('数据集名称',更新数据)gantt.updateCollection("staff", staffArr);更新数据集数据
gantt.render()更新gantt配置
gantt.clearAll()清空gantt配置
gantt.detachEvent(’事件名)重点因为切换页面甘特不会销毁，调用销毁后阻止事件反复调用
gantt.scrollTo(x,y)定位今日线功能需要，定位到某个位置
gantt.init()gantt.init(this.$refs.gantt);gantt初始化挂载节点
gantt.parse()gantt.parse({ data: [],links: [] })gantt挂载数据
gantt.getTask()gantt.getTask(id)gantt获取单个数据

甘特图功能

今日线与定位

  1.   // 今日线
  2.  createTodayLine() {
  3.       var dateToStr = gantt.date.date_to_str("%Y年%M%d日");
  4.       var markerId = gantt.addMarker({
  5.         id: 'markerLine',
  6.         start_date: new Date(),
  7.         css: "today",
  8.         text: "今日",
  9.         title: dateToStr(new Date()) 
  10.       });
  11.       gantt.updateMarker(markerId);
  12.     }
  13. //定位到今日线
  14.  changeToday() {
  15.       this.$nextTick(() => {
  16.         let ganTT = document.getElementsByClassName('gantt_marker today')
  17.         gantt.scrollTo(ganTT[0].offsetLeft-300, null);
  18.       })
  19.  },
  20. 复制代码

全屏(类F11)

  1. // 是否全屏
  2. changeFull() {
  3.    gantt.ext.fullscreen.toggle();
  4.  },
  5. 复制代码

搜索功能

  1. //
  2. <a-input allowClear v-model="searchTitle" placeholder="请输入任务名称"></a-input>
  3. <a-button icon="search" type="primary" @click="searchDataClick">搜索</a-button>
  4.  //点击按钮搜索
  5. #methods
  6. // 搜索判断数据
  7.     hasSubstr(parentId,type){
  8.       let task = gantt.getTask(parentId);
  9.       if(type=='tilte'){
  10.         if(task.text.toLowerCase().indexOf(this.searchTitle) !== -1)
  11.           return true;
  12.       }
  13.       // }  
  14.     },
  15.     searchDataClick(){
  16.       if(this.searchTitle  ){
  17.         this.ganttEvent.onBeforeTaskDisplay=gantt.attachEvent("onBeforeTaskDisplay", (id, task)=>{
  18.           if (this.hasSubstr(id,'tilte') ){ return true;}
  19.             return false;
  20.           });
  21.           gantt.refreshData()
  22.           gantt.render()
  23.       }else{
  24.         this.ganttEvent.onBeforeTaskDisplay=gantt.attachEvent("onBeforeTaskDisplay", (id, task)=>{
  25.          return true
  26.         })
  27.         gantt.refreshData()
  28.         gantt.render()
  29.       }
  30.     },
  31. 复制代码

日期切换

  1.  // 切换 年 季 月 周 日视图 
  2.     ganttChangeDateView(type) {
  3.       switch (type) {
  4.         case 'y':
  5.           gantt.config.scale_unit = "year";
  6.           gantt.config.step = 1;
  7.           gantt.config.subscales = null;
  8.           gantt.config.date_scale = "%Y年";
  9.           gantt.templates.date_scale = null;
  10.           break;
  11. ​
  12.         case 'm':
  13.           gantt.config.scale_unit = 'month';
  14.           gantt.config.step = 1;
  15.           gantt.config.date_scale = "%m月";
  16.           gantt.templates.date_scale = null;
  17.         
  18.           break;
  19.         case 'w':
  20.           gantt.config.scale_unit = 'week';
  21.           gantt.config.step = 1;
  22.           gantt.config.date_scale = "第%w周";
  23.           gantt.templates.date_scale = null;
  24.        
  25.           break;
  26.         case 'd':
  27.           gantt.config.scale_unit = 'day';
  28.           gantt.config.step = 1;
  29.           gantt.config.date_scale = "%m月%d日";
  30.           gantt.templates.date_scale = null;
  31.           gantt.config.subscales = null;
  32.           
  33.           break;
  34.       }
  35.       gantt.render();
  36.     },
  37. 复制代码

图例

完整代码

  1. <template>
  2.   <div style="height: 100%; width: 100%">
  3.     <a-layout>
  4.       <div class="content">
  5.         <div style="margin: -5px 0px 5px;display: flex;justify-content: space-between;">
  6.             <a-input allowClear v-model="searchTitle" placeholder="请输入任务名称"></a-input>
  7.             <a-button icon="search" type="primary" @click="searchDataClick">搜索</a-button>
  8.         </div>
  9.         <!-- 中间 内容 -->
  10.         <div class="centerContent">
  11.           <!-- 甘特图 -->
  12.           <div class="selectDate">
  13.             <a-button @click="changeToday">今</a-button>
  14.             <!-- 日期切换 -->
  15.             <a-select  default-value="d" style="width: 55px;margin-left: 5px;" @change="ganttChangeDateView">
  16.               <a-select-option value="y">年</a-select-option>
  17.               <a-select-option value="m">月</a-select-option>
  18.               <a-select-option value="w">周</a-select-option>
  19.               <a-select-option value="d">日</a-select-option>
  20.             </a-select>
  21.             <a-button style="margin-left: 5px;" @click="changeFull"><a-icon type="fullscreen" /></a-button>
  22.           </div>
  23.           <div class="rightGatt" style="min-height:calc(78vh - 50px - 5px );width: 100%;overflow: hidden;" ref="gantt">
  24.           </div>
  25.         </div>
  26.       </div>
  27.     </a-layout>
  28.   </div>
  29. </template>
  30. <script>
  31. ​
  32. import {
  33.   gantt
  34. } from '@/assets/js/dhtmlx';
  35. import "@/assets/css/dhtmlxgantt.css";
  36. import { util } from "@/components/utils/util.js"
  37. import moment from 'moment'
  38. ​
  39. export default {
  40.   name: "ganttChart",
  41.   data() {
  42.     return {
  43.       moment,
  44.       timer: null,//定时
  45.       item: {},//单行数据
  46.       searchTitle: "",//搜索标题
  47.       tasks: {
  48.         data: [],//数据
  49.         links: [],//关联项目数据
  50.       },
  51.       savetasks: {
  52.         data: [],
  53.         links: []
  54.       },//暂存空数据
  55.       ganttServerStaff:[],//设置gantt成员数据
  56.       selectStaff: [],//下拉成员
  57.       staff: [],//成员
  58.       ganttEvent: {//销毁事件
  59.       },
  60.       urls: {
  61.         staff: "",//项目成员
  62.         tasklinks: '',//gantt数据
  63.         linksEdit: '',//修改和新增连接
  64.         linksDelete: '',//删除连接
  65.         addTask: '',//新增项目PUT
  66.         editTask: '',//编辑项目put请求 tid 
  67.         deleteTask: '',//删除项目delete tid
  68.       }
  69.     }
  70.   },
  71.   watch: {
  72.     searchTitle(newVal,oldVal){
  73.       this.searchTitle = newVal;
  74.     }
  75.   },
  76.   mounted() {
  77.     this.axios.get(this.urls.staff, {
  78.         params: { projectId:  this.$store.state.project_data.id },
  79.       }).then(res => {
  80.         let staffArr = [];
  81.         res.data.code = 200 && res.data.result.forEach((item, index) => {
  82.           staffArr[index] = {};
  83.           staffArr[index].key = item.id;
  84.           staffArr[index].label = item.realname;
  85.         })
  86.         this.selectStaff = res.data.result;
  87.         // 补充gantt数据
  88.         this.ganttServerStaff=staffArr;
  89.        
  90.       })
  91.     this.$nextTick(()=>{
  92.       this.ganttChangeEvent();//交互事件
  93.       this.initGantt();//初始化
  94.       
  95.       this.createTodayLine();//今日线
  96.       this.ganttServerList();//服务数据
  97.     })
  98.     this.onQuery();//查询数据
  99.     this.ganttChangeDateView("d");//默认日格式
  100.   },
  101.   methods: {
  102.     /*
  103.       甘特图 
  104.      */
  105.     // 初始化gantt
  106.     initGantt() {
  107.       // 清空之前的配置
  108.       // gantt.clearAll();
  109.    
  110.       // 启用动态加载
  111.       gantt.config.branch_loading = true
  112.       //日期格式化
  113.       gantt.config.xml_date = "%Y-%m-%d";
  114.       gantt.config.order_branch = true;
  115.       gantt.config.order_branch_free = true;
  116.       //左侧是否自适应
  117.       gantt.config.autofit = true;
  118.       gantt.config.drag_links = true;//连线
  119.       gantt.config.readonly = false;  //只读
  120.       gantt.config.date_scale = "%m月%d日"; //右侧显示列名
  121.       gantt.config.layout = {//拖拽布局
  122.         css: "gantt_container",
  123.         rows: [
  124.           {
  125.             cols: [
  126.               { view: "grid", id: "grid", scrollX: "scrollHor", scrollY: "scrollVer" },
  127.               { resizer: true, width: 1 },
  128.               { view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
  129.               { view: "scrollbar", scroll: "y", id: "scrollVer" }
  130.             ]
  131.           },
  132.           { view: "scrollbar", scroll: "x", id: "scrollHor", height: 20 }
  133.         ]
  134.       };
  135.       gantt.config.start_on_monday = true;
  136.       gantt.config.work_time = true;
  137.       gantt.config.fit_tasks = true;   //自动调整图表坐标轴区间用于适配task的长度
  138.     
  139. ​
  140.       //汉化
  141.       gantt.locale = {
  142.         date: {
  143.           month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
  144.           month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
  145.           day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
  146.           day_short: ["日", "一", "二", "三", "四", "五", "六"]
  147.         },
  148.         labels: {
  149.           dhx_cal_today_button: "今天",
  150.           day_tab: "日",
  151.           week_tab: "周",
  152.           month_tab: "月",
  153.           new_event: "新建日程",
  154.           icon_save: "保存",
  155.           icon_cancel: "关闭",
  156.           icon_details: "详细",
  157.           icon_edit: "编辑",
  158.           icon_delete: "删除",
  159.           confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
  160.           confirm_deleting: "是否删除计划?",
  161.           section_description: "描述:",
  162.           section_time: "时间范围:",
  163.           section_type: "类型:",
  164.           section_text: "计划名称:",
  165.           section_test: "测试:",
  166.           section_projectClass: "项目类型:",
  167.           taskProjectType_0: "项目任务",
  168.           taskProjectType_1: "普通任务",
  169.           section_head: "负责人:",
  170.           section_priority: '优先级:',
  171.           taskProgress: '任务状态',
  172.           taskProgress_0: "未开始",
  173.           taskProgress_1: "进行中",
  174.           taskProgress_2: "已完成",
  175.           taskProgress_3: "已延期",
  176.           taskProgress_4: "搁置中",
  177.           section_template: 'Details',
  178.           /* grid columns */
  179.           column_text: "计划名称",
  180.           column_start_date: "开始时间",
  181.           column_duration: "持续时间",
  182.           column_add: "",
  183.           column_priority: "难度",
  184.           /* link confirmation */
  185.           link: "关联",
  186.           confirm_link_deleting: "将被删除",
  187.           message_ok:'确定',
  188.           message_cancel:'取消',
  189.           link_start: " (开始)",
  190.           link_end: " (结束)",
  191. ​
  192.           type_task: "任务",
  193.           type_project: "项目",
  194.           type_milestone: "里程碑",
  195. ​
  196.           minutes: "分钟",
  197.           hours: "小时",
  198.           days: "天",
  199.           weeks: "周",
  200.           months: "月",
  201.           years: "年"
  202.         }
  203.       }
  204.       gantt.serverList("priority", [
  205.         { key: 0, label: "最高" },
  206.         { key: 1, label: "较高" },
  207.         { key: 2, label: "普通" },
  208.         { key: 3, label: "较低" },
  209.         { key: 4, label: "最低" },
  210.       ]);
  211.       //左侧显示列名
  212.       gantt.config.columns = [
  213.         { name: "text", min_width:100,max_width:200, label:"任务", align: "left",resize: true,  tree: true, editor: { type: 'text', map_to: 'text' } },
  214.         { name: "id", label: "", hide: true },
  215.         { name: "start_date", label: "开始时间", width: 120, resize: true, align: "left" },
  216.         {
  217.           name: "head", min_width: 100, height: 40, label: "负责人",resize: true, align: "left",
  218.           // editor: {
  219.           //   map_to: "head_id", type: "select", options: gantt.serverList("staff"),
  220.           // },
  221.           template: (item) => {
  222.             if (this.ganttDealById(gantt.serverList('staff'), item.head_id)) {
  223.               return `<span class='userIcon' style='background-color:${item.color ? item.color : "#6666"}'>${this.ganttDealById(gantt.serverList('staff'), item.head_id).slice(0, 1)}</span>${this.ganttDealById(gantt.serverList('staff'), item.head_id)}`
  224.             }
  225.           }
  226.         },
  227.         // { name: "end_date", label: "结束时间", align: "center" },
  228.         {
  229.           name: "taskProgress", label: "任务状态", align: "center", min_width: 110,editor: {
  230.             type: "select", map_to: "taskProgress", options: [
  231.               { key: "0", label: gantt.locale.labels.taskProgress_0 },
  232.               { key: "1", label: gantt.locale.labels.taskProgress_1 },
  233.               { key: "2", label: gantt.locale.labels.taskProgress_2 },
  234.               { key: "3", label: gantt.locale.labels.taskProgress_3 },
  235.               { key: "4", label: gantt.locale.labels.taskProgress_4 },
  236.             ],
  237.           },
  238.           template: function (obj) {
  239.             let re = '';
  240.             switch (obj.taskProgress) {
  241.               case "0":
  242.                 re = `<div class='taskProgress color_bg_1' >未开始</div>`
  243.                 break;
  244.               case "1":
  245.                 re = `<div class='taskProgress color_bg_2' >进行中</div>`
  246.                 break;
  247.               case "2":
  248.                 re = `<div class='taskProgress color_bg_3'  >已完成</div>`
  249.                 break;
  250.               case "3":
  251.                 re = `<div  class='taskProgress color_bg_4'>已延期</div>`
  252.                 break;
  253.               case "4":
  254.                 re = `<div  class='taskProgress color_bg_5' >搁置中</div>`
  255.                 break;
  256.             }
  257.             return re
  258. ​
  259.           }
  260.         },
  261. ​
  262.       ];
  263. ​
  264.       //弹出层
  265.       gantt.config.lightbox.sections = [
  266.         { name: "text", height: 70, map_to: "text", type: "textarea", focus: true, width: "*" },
  267.         {
  268.           name: "time", height: 40, map_to: "auto", type: "duration",
  269.           time_format: ["%Y", "%m", "%d"],
  270.         },
  271.         {
  272.           name: "projectClass", height: 30, map_to: "proTemplate", type: "template",
  273.          
  274.         },
  275.         {
  276.           name: "head", height: 22, map_to: "head_id", type: "select", options: gantt.serverList('staff',[]),
  277.         },
  278.         { name: "description", height: 70, map_to: "description", type: "textarea" },
  279.         {
  280.           name: "priority", height: 40, map_to: "priority", type: "radio", options: gantt.serverList("priority")
  281.         },
  282. ​
  283.       ];
  284. ​
  285.       gantt.config.smart_scales = true;
  286.       gantt.plugins({
  287.         click_drag: true,
  288.         drag_timeline: true,// 拖动图
  289.         marker: true,// 时间标记
  290.         fullscreen: true,// 全屏
  291.         tooltip: true,// 鼠标经过时信息
  292.         undo: true // 允许撤销
  293.       })
  294.       gantt.init(this.$refs.gantt);
  295.      
  296.     },
  297.   
  298.   
  299.     // gantt数据服务列表
  300.     ganttServerList() {
  301.       this.getProjectStaff();//获取项目成员
  302.       // 项目难度
  303.       gantt.serverList("priority", [
  304.         { key: 0, label: "最高" },
  305.         { key: 1, label: "较高" },
  306.         { key: 2, label: "普通" },
  307.         { key: 3, label: "较低" },
  308.         { key: 4, label: "最低" },
  309.       ]);
  310.    
  311.     },
  312.     // gantt交互事件注册
  313.     ganttChangeEvent() {
  314.       // gantt渲染
  315.       this.ganttEvent.onGanttReady= gantt.attachEvent("onGanttReady", ()=>{
  316.          
  317.           //弹窗标题 日期范围
  318.           gantt.templates.task_time = function (start, end, task) {
  319.             return "周期：" + moment(start).format('YYYY-MM-DD') + " 至 " + moment(end).format('YYYY-MM-DD');
  320.           };
  321.           // 浮窗
  322.           gantt.templates.tooltip_text = (start, end, task) => {
  323.             return "<b>项目名称:</b> " + task.text + "<br><b>负责人:</b>" + task.head + "<br/><b>开始时间:</b> "
  324.               + moment(start).format('YYYY-MM-DD')
  325.               + "<br/><b>结束时间:</b> "
  326.               + moment(new Date(end).valueOf() - 1000*60*60*24 ).format('YYYY-MM-DD');
  327.           }
  328.           //弹窗标题 计划名称
  329.           gantt.templates.task_text = function (start, end, task) {
  330.             return task.text;
  331.           };
  332.           gantt.templates.timeline_cell_class = function (task, date) {
  333.             if (!gantt.isWorkTime({ task: task, date: date })) {
  334.               return "weekend";
  335.             } else {
  336.               return 'weekday'
  337.             }
  338.           };
  339.           gantt.templates.task_end_date = (date)=>{
  340.             return gantt.templates.task_date(this.moment(new Date(date.valueOf() - 1000*60*60*24)).format("YYYY-MM-DD")); 
  341.           };
  342.           gantt.templates.grid_date_format = (date, column)=>{
  343.             if(column === "end_date"){
  344.                 return this.moment(new Date(date.valueOf() - 1000*60*60*24)).format("YYYY-MM-DD"); 
  345.             }else{
  346.                 return this.moment(date).format("YYYY-MM-DD"); 
  347.             }
  348.           }
  349.       });
  350.       // 修改默认弹窗
  351.       gantt.attachEvent("onBeforeLightbox",  (id)=> {
  352.         var task = gantt.getTask(id);
  353.         task.proTemplate = `${gantt.locale.labels.taskProjectType_0}`
  354.         return true;
  355.       });
  356. ​
  357.       //添加后触发
  358.       this.ganttEvent.onAfterTaskAdd = gantt.attachEvent("onAfterTaskAdd", (id, item) => {
  359.         clearTimeout(this.timer)
  360.         this.timer = setTimeout(() => {
  361.           this.dealProject("add",item)
  362.         }, 500)
  363. ​
  364.       });
  365.       // 修改任务
  366.       this.ganttEvent.onAfterTaskUpdate = gantt.attachEvent("onAfterTaskUpdate", (id, data) => {
  367.         clearTimeout(this.timer)
  368.         this.timer = setTimeout(() => {
  369.           this.dealProject("edit", data);
  370.           gantt.render()
  371.         }, 500)
  372. ​
  373.       });
  374.       // 删除项目
  375.       this.ganttEvent.onAfterTaskDelete = gantt.attachEvent("onAfterTaskDelete", (id, data) => {
  376.         clearTimeout(this.timer)
  377.         this.timer = setTimeout(() => {
  378.   
  379.           this.dealProject("delete", data);
  380.           gantt.render();
  381.         }, 500)
  382.       });
  383.       // 移动项目
  384.       this.ganttEvent.onAfterTaskDrag = gantt.attachEvent("onAfterTaskDrag", (id, mode, e) => {
  385.         clearTimeout(this.timer)
  386.         this.timer = setTimeout(() => {
  387.           var task = gantt.getTask(id);
  388.           this.dealProject("edit", task);
  389.           gantt.render()
  390.         }, 500)
  391.       });
  392.       // 用户完成拖动并释放鼠标
  393.       this.ganttEvent.onAfterTaskChanged = gantt.attachEvent("onAfterTaskChanged", (id, mode, task) => {
  394.         clearTimeout(this.timer)
  395.         this.timer = setTimeout(() => {
  396.           gantt.render();
  397.         }, 500)
  398.       });
  399. ​
  400.       // 删除连接项目关系
  401.       this.ganttEvent.onAfterLinkDelete = gantt.attachEvent("onAfterLinkDelete", (id, item) => {
  402.         clearTimeout(this.timer)
  403.         this.timer = setTimeout(() => {
  404.       
  405.           let param = Object.assign({}, { projectId:this.$store.state.project_data.id }, item)
  406.           this.axios.$delete(this.urls.linksDelete, param).then(res => {
  407.             res.code == 200 && this.$message.success("解除成功!")
  408.             res.code != 200 && this.$message.error("解除失败!")
  409.           })
  410.           gantt.render();
  411.         }, 500)
  412.       });
  413.       // 修改连接项目关系
  414.       this.ganttEvent.onAfterLinkUpdate = gantt.attachEvent("onAfterLinkUpdate", (id, item) => {
  415.         clearTimeout(this.timer)
  416.         this.timer = setTimeout(() => {
  417. ​
  418.           let param = Object.assign({}, { projectId:this.$store.state.project_data.id }, item)
  419.           this.axios.$put(this.urls.linksEdit, param).then(res => {
  420.             res.code == 200 && this.$message.success("关联成功!")
  421.             res.code != 200 && this.$message.error("关联失败!")
  422. ​
  423.           })
  424.           gantt.render()
  425.         }, 500)
  426.       });
  427.       // 新增连接项目关系
  428.       this.ganttEvent.onBeforeLinkAdd = gantt.attachEvent("onBeforeLinkAdd", (id, item) => {
  429.         this.timer = setTimeout(() => {
  430.           clearTimeout(this.timer)
  431.           let param = Object.assign({}, { projectId: this.$store.state.project_data.id }, item)
  432.           this.axios.$put(this.urls.linksEdit, param).then(res => {
  433.             res.code == 200 && this.$message.success("关联成功!");
  434.             res.code != 200 && this.$message.error("关联失败!");
  435.            
  436.           })
  437.           gantt.render()
  438.         }, 20)
  439. ​
  440.       });
  441.       // 保存新增
  442.       this.ganttEvent.onLightboxSave = gantt.attachEvent("onLightboxSave", (id, item) => {
  443.         if (!item.text) {
  444.           this.$message.error("请填写计划名称!");
  445.           return false;
  446.         }
  447.         return true;
  448.       });
  449. ​
  450.     },
  451.     // 处理id 对应名称label
  452.     ganttDealById(list, id) {
  453.       for (let i = 0; i < list.length; i++) {
  454.         if (list[i].key == id)
  455.           return list[i].label ;
  456.       }
  457.       return "";
  458.     },
  459.     // 切换 年 季 月 周 日视图 
  460.     ganttChangeDateView(type) {
  461.       switch (type) {
  462.         case 'y':
  463.           gantt.config.scale_unit = "year";
  464.           gantt.config.step = 1;
  465.           gantt.config.subscales = null;
  466.           gantt.config.date_scale = "%Y年";
  467.           gantt.templates.date_scale = null;
  468.           break;
  469. ​
  470.         case 'm':
  471.           gantt.config.scale_unit = 'month';
  472.           gantt.config.step = 1;
  473.           gantt.config.date_scale = "%m月";
  474.           gantt.templates.date_scale = null;
  475.         
  476.           break;
  477.         case 'w':
  478.           gantt.config.scale_unit = 'week';
  479.           gantt.config.step = 1;
  480.           gantt.config.date_scale = "第%w周";
  481.           gantt.templates.date_scale = null;
  482.        
  483.           break;
  484.         case 'd':
  485.           gantt.config.scale_unit = 'day';
  486.           gantt.config.step = 1;
  487.           gantt.config.date_scale = "%m月%d日";
  488.           gantt.templates.date_scale = null;
  489.           gantt.config.subscales = null;
  490.           
  491.           break;
  492.       }
  493.       gantt.render();
  494.     },
  495.     // 今日线
  496.     createTodayLine() {
  497.       var dateToStr = gantt.date.date_to_str("%Y年%M%d日");
  498.       var markerId = gantt.addMarker({
  499.         id: 'markerLine',
  500.         start_date: new Date(),
  501.         css: "today",
  502.         text: "今日",
  503.         title: dateToStr(new Date()) 
  504.       });
  505.       gantt.updateMarker(markerId);
  506.     },
  507.     // 是否全屏
  508.     changeFull() {
  509.       gantt.ext.fullscreen.toggle();
  510.     },
  511.     // 定位到今日线
  512.     changeToday() {
  513.       this.$nextTick(() => {
  514.         let ganTT = document.getElementsByClassName('gantt_marker today')
  515.         gantt.scrollTo(ganTT[0].offsetLeft-300, null);
  516.       })
  517.     },
  518.     /* 
  519.     操作 
  520.     */
  521.     //  获取项目成员
  522.     getProjectStaff(projectID) {
  523.       this.axios.get(this.urls.staff, {
  524.         params: { projectId: projectID ? projectID : this.$store.state.project_data.id },
  525.       }).then(res => {
  526.         let staffArr = [];
  527.         res.data.code = 200 && res.data.result.forEach((item, index) => {
  528.           staffArr[index] = {};
  529.           staffArr[index].key = item.id;
  530.           staffArr[index].label = item.realname;
  531.         })
  532.         this.selectStaff = res.data.result;
  533.         // 补充gantt数据
  534.         this.ganttServerStaff=staffArr;
  535.         gantt.updateCollection("staff", staffArr);
  536.         gantt.render()
  537.       })
  538.     },
  539.     //计算进度
  540.     evalProgess(start,end,update) {
  541.       if (start && end && update) {
  542.         let start_date = this.moment(start).format("YYYY-MM-DD");
  543.         let end_date = this.moment(end).format("YYYY-MM-DD");
  544.         let update_date = this.moment(update).format("YYYY-MM-DD");
  545.         
  546.         if((new Date(end_date) - new Date(update_date)>0)){
  547.           let process= (new Date(update_date) - new Date(start_date)) / (new Date(end_date) - new Date(start_date));
  548.           return process.toFixed(2)
  549.         }else {
  550.           return 0
  551.         }
  552.       }
  553. ​
  554.       return 0
  555.     },
  556.     // 获取数据
  557.     onQuery(param) {
  558.       gantt.clearAll();
  559.       gantt.parse(this.savetasks);
  560.       gantt.render();
  561.       param = Object.assign({}, { projectId: 
  562.         this.$store.state.project_data.id ? this.$store.state.project_data.id :'1'
  563.       }, param)
  564.       this.axios.get(this.urls.tasklinks, {
  565.         params: param
  566.       }).then(res => {
  567.         let result = res.data.result["taskList"];
  568.         let pushArr = [];
  569.         this.tasks.links = res.data.result["ganttchartList"];//连接项目
  570.         this.tasks.data = [];
  571.         result.forEach((item, index) => {
  572.           this.tasks.data[index] = {};
  573.           this.tasks.data[index].id = item.tid ? item.tid : '';//项目id
  574.           this.tasks.data[index].text = item.title ? item.title : '空标题';//标题
  575.           this.tasks.data[index].start_date = item.startTime;//开始时间
  576.           // 负责人--成员
  577.           this.tasks.data[index].head_id = item.headRole?.id?item.headRole?.id:'';//负责人id
  578.           this.tasks.data[index].head = item.headRole?.realname ? item.headRole?.realname : '';//负责人
  579.           this.tasks.data[index].progress = this.evalProgess(item.startTime,item.endTime,item.updateTime)//项目进展
  580.           // 后台时间加一天 显示减一天 处理条形图时间左闭右开
  581.           this.tasks.data[index].end_date = this.moment(new Date(item.endTime).valueOf() + 1000*60*60*24).format("YYYY-MM-DD");//结束时间
  582.           // this.tasks.data[index].end_date = item.endTime;//结束时间
  583.           this.tasks.data[index].priority = item.priority ? item.priority : '';//任务优先级
  584.           this.tasks.data[index].projectClass = item.type ? item.type : '';//类型 0项目任务 1 普通任务
  585. ​
  586.           this.tasks.data[index].taskProgress = item.taskStatus.toString();//任务状态
  587.           this.tasks.data[index].description = item.describe ? item.describe : '';//描述
  588.           this.tasks.data[index].color = item.stateDictionary.color ? item.stateDictionary.color : '';//颜色
  589.           if (item.taskList && item.taskList.length != 0) {
  590.             this.tasks.data[index].render = "split";//显示在单行
  591.             this.tasks.data[index].open = true;//展开
  592.             item.taskList.forEach((_item) => {
  593.               pushArr.push(
  594.                 {
  595.                   id: _item.tid,
  596.                   text: _item.title ? _item.title : '空标题',
  597.                   start_date: _item.startTime,
  598.                   end_date: _item.endTime,
  599.                   head_id: _item.headId,
  600.                   head: _item.head,
  601.                   priority: _item.priority,
  602.                   projectClass: _item.type,
  603.                   taskProgress: _item.taskStatus.toString(),
  604.                   description: _item.describe,
  605.                   parent: _item.mainTaskId,
  606.                 }
  607.               );
  608.             })
  609.           }
  610.         });
  611.         this.tasks.data = this.tasks.data.concat(pushArr)
  612.        
  613.         this.$nextTick(() => {
  614.           gantt.parse(this.tasks);
  615.           gantt.render();
  616.           gantt.refreshData();
  617.         })
  618. ​
  619.       })
  620.     },
  621. ​
  622.     // 项目新增 修改tid  删除tid
  623.     dealProject(type, data) {
  624.       let param = {};
  625.       if (type != 'add') {
  626.         param.tid = data.id;
  627.         param.title = data.text;
  628.         param.startTime = this.moment(data.start_date).format("YYYY-MM-DD");
  629.         param.endTime = this.moment(data.end_date).format("YYYY-MM-DD");
  630.       
  631.         param.describe = data.description;
  632.         param.priority = data.priority;
  633.       
  634.         param.head = data.head_id;
  635.         param.taskStatus = data.taskProgress;
  636.         param.projectId = this.$store.state.project_data.id;
  637.       } else {
  638.        
  639.         param.title = data.text;
  640.         param.startTime = this.moment(data.start_date).format("YYYY-MM-DD");
  641.         param.endTime = this.moment(data.end_date).format("YYYY-MM-DD");
  642.         
  643.         param.describe = data.description;
  644.         param.priority = data.priority;
  645.       
  646.         param.head = data.head_id;
  647.         param.taskStatus = data.taskProgress;
  648.         param.projectId = this.$store.state.project_data.id;
  649.       }
  650.       let formdata=new FormData();
  651.       for(let i in param){
  652.         formdata.append(i,param[i])
  653.       }
  654.       switch (type) {
  655.         case "add"://新增
  656.           this.axios.put(this.urls.addTask, formdata).then(res => {
  657.            
  658.             res.data.code == 200 && this.$message.success("新增成功!")
  659.             res.data.code != 200 && this.$message.error("新增失败!")
  660.           }).catch(err => {
  661.             this.$message.error("请求失败!")
  662.           })
  663.           break;
  664.         case "edit":
  665.           this.axios.put(this.urls.editTask, formdata).then(res => {
  666.             res.data.code == 200 && this.$message.success("修改成功!")
  667.             res.data.code != 200 && this.$message.error("修改失败!")
  668.           }).catch(err => {
  669.             this.$message.error("请求失败!")
  670.           })
  671.           break;
  672.         case "delete":
  673.           this.axios.delete(this.urls.deleteTask, formdata).then(res => {
  674.             res.data.code == 200 && this.$message.success("删除成功!")
  675.             res.data.code != 200 && this.$message.error("删除失败!")
  676.           }).catch(err => {
  677.             this.$message.error("请求失败!")
  678.           })
  679.           break;
  680. ​
  681.       }
  682.     },
  683.     selecthead(val){
  684.       
  685.       this.searchHead=val;//id
  686.     },
  687.     // 搜索判断数据
  688.     hasSubstr(parentId,type){
  689.       let task = gantt.getTask(parentId);
  690.       if(type=='tilte'){
  691.         if(task.text.toLowerCase().indexOf(this.searchTitle) !== -1)
  692.           return true;
  693.       }
  694.       // }  
  695.     },
  696.     //点击按钮搜索
  697.     searchDataClick(){
  698.   
  699.       if(this.searchTitle  ){
  700.         this.ganttEvent.onBeforeTaskDisplay=gantt.attachEvent("onBeforeTaskDisplay", (id, task)=>{
  701.           if (this.hasSubstr(id,'tilte') ){ return true;}
  702.             return false;
  703.           });
  704.           gantt.refreshData()
  705.           gantt.render()
  706.       }else{
  707.         this.ganttEvent.onBeforeTaskDisplay=gantt.attachEvent("onBeforeTaskDisplay", (id, task)=>{
  708.          return true
  709.         })
  710.         gantt.refreshData()
  711.         gantt.render()
  712.       }
  713.     },
  714.     // 提交弹框
  715.     handleOk() {
  716. ​
  717.       if (this.modalTitle === 1) {
  718.         this.editForm.validateFields((err, values) => {
  719.           if (!err) {
  720.             Array.isArray(values.participants) && (values.participants = values.participants.join());
  721.             values = util.transformFields(values);
  722.             let formdata = new FormData();
  723.             for (let key in values) {
  724.               formdata.append(key, values[key] ? values[key] : '');
  725.             }
  726.             this.axios.put(this.urls.addTask, formdata).then((res) => {
  727.               if (res.data.code === 200) {
  728.                 this.visible = false;
  729.                 let msg = res.data.message
  730.                 this.$message.success(msg)
  731.                 this.editForm.resetFields()
  732.                 this.onQuery();
  733.               }
  734.             })
  735.           }
  736.         })
  737.       }
  738.     },
  739.   },
  740. ​
  741.   destroyed() {
  742.     // 销毁gantt事件
  743.     for (let i in this.ganttEvent) {
  744.       gantt.detachEvent(this.ganttEvent[i])
  745.     }
  746.    gantt.ext.tooltips.tooltip.hide();
  747.   }
  748. }
  749. </script>
  750. <style scoped lang="less">
  751. @import url(./gantt.css);
  752. .ant-layout {
  753.   background: #f8f9f9;
  754. }
  755. ​
  756. .ant-layout-header {
  757.   background: #fdffff;
  758.   color: rgb(29, 28, 28);
  759.   border: 1px solid #dee0e0;
  760. }
  761. ​
  762. .header {
  763.   // position: fixed;
  764.   display: flex;
  765.   justify-content: space-between;
  766.   align-items: center;
  767. }
  768. ​
  769. .content {
  770.   background: #fdffff;
  771.   height: 99vh;
  772. }
  773. ​
  774. // 中间
  775. .centerContent {
  776.   position: relative;
  777.   background: #fdffff;
  778.   width: 100%;
  779.   overflow-y: auto;
  780.   display: flex;
  781.   justify-content: space-between;
  782.   .selectDate {
  783.     width: 100px;
  784.     position: fixed;
  785.     top: 18%;
  786.     right: 9%;
  787.     z-index: 99;
  788.     display: flex;
  789.     justify-content: space-between;
  790.   }
  791. }
  792. </style>
  793. 复制代码

自定义修改gantt样式文件

  1. .weekend {
  2.   background: #fafafa !important;
  3. }
  4. .weekday{
  5.   background: #fff;
  6. }
  7. .gantt_resource_task .gantt_task_content {
  8.   color: inherit;
  9. }
  10. ​
  11. .gantt_resource_task .gantt_task_progress {
  12.   background-color: rgba(33, 33, 33, 0.3);
  13. }
  14. .gantt_tree_content{
  15.   color: #808080;
  16. }
  17. .gantt_cell:nth-child(1) .gantt_tree_content {
  18.   border-radius: 16px;
  19.   width: 100%;
  20.   height: 80%;
  21.   margin: 5% 0;
  22.   line-height: 230%;
  23. }
  24. /* 今日线 */
  25. .gantt_marker.today{
  26.   background: #ffb121;
  27. }
  28. .gantt_cell,.gantt_grid_head_cell,.gantt_grid_data,.gantt_data_area,.gantt_scale_cell{
  29.   background-color:#fff ;
  30. }
  31. /* 滑块 */
  32. .gantt_task_content{
  33.   color: #fff;
  34.   font-size: 13px;
  35.   font-weight: bold;
  36.   outline: none;
  37. }
  38. /* 右边单元格 */
  39. .gantt_task_line,.gantt_task_inline_color{
  40.   border-radius: 10px;
  41.   box-sizing: border-box;
  42.   border-color: #fff !important;
  43. }
  44. .gantt_task_scale .gantt_scale_line{
  45.   /* border-bottom: 1px solid #e6ebf2; */
  46. }
  47. .gantt_row, .gantt_task_row{
  48.   /* border-bottom: none; */
  49. }
  50. /* 覆盖进度条 */
  51. .gantt_task_line.gantt_task_inline_color .gantt_task_progress{
  52.   opacity: none;
  53.   /* background: repeating-linear-gradient(70deg, #666 0px, #666 10px, #fff 0px,#fff 20px); */
  54.   /* animation: ani 1.5s ease-in-out 6; */
  55. }
  56. @keyframes ani {
  57.     0%{
  58.       background: repeating-linear-gradient(70deg, #666 0px, #666 10px, #fff 0px,#fff 20px);
  59.     }
  60.     100%{
  61.       background: repeating-linear-gradient(70deg, #fff 0px, #fff 10px, #666 0px,#666 20px);
  62.     }
  63. }
  64. .taskProgress{
  65.   margin: 0 auto;
  66.   margin-top: 5px;
  67.   height: 24px;
  68.   width: 65px;
  69.   font-size: 12px;
  70.   line-height: 24px;
  71.   font-weight: bold;
  72.   color: #f7fbfe;
  73.   border-radius: 20px;
  74. }
  75. .color_bg_1{
  76.   background-color:#60a3bc ;
  77. }
  78. .color_bg_2{
  79.   background-color:#079992 ;
  80. }
  81. .color_bg_3{
  82.   background-color:#78e08f ;
  83. }
  84. .color_bg_4{
  85.   background-color:#e55039 ;
  86. }
  87. .color_bg_5{
  88.   background-color:#f6b93b ;
  89. }
  90. .gantt_task_row .gantt_task_cell,.weekday{
  91.   outline: none;
  92. }
  93. .gantt_grid_scale{
  94.   background-color: #f7fbfe !important;
  95. }
  96. .gantt_task_row .gantt_selected .gantt_task_cell{
  97.   background-color: none;
  98.   border-right-color:none;
  99. }
  100. .gantt_grid_scale .gantt_grid_head_cell{
  101.   font-weight: bold;
  102.   font-size: 14px;
  103.   border: none;
  104.   color:#506270;
  105. }
  106. /* 滑动栏 */
  107. /* 项目icon标 */
  108. .gantt_tree_icon{
  109.   width: 14px;
  110.   margin-right: 2px;
  111.   margin-left: -8px;
  112. }
  113. .gantt_tree_icon.gantt_file {
  114.   /* 文件icon */
  115.   background-image: url(../../assets/img/file.png);
  116. }
  117. ​
  118. .gantt_tree_icon.gantt_folder_open{
  119.   /* 文件夹icon */
  120.   background-image: none;
  121. }
  122. ​
  123. .gantt_tree_icon.gantt_open{
  124.   /* 加号 */
  125.   background-image: url(../../assets//img/project.png);
  126. }
  127. ​
  128. .gantt_tree_icon.gantt_close{
  129.   /* 减号 */
  130.   background-image: none;
  131. }
  132. ​
  133. .userIcon{
  134.   display: inline-block;
  135.   width: 25px;
  136.   height: 25px;
  137.   margin-right: 5px;
  138.   text-align: center;
  139.   line-height: 25px;
  140.   color: #fafafa;
  141.   border-radius: 50%;
  142. }
  143. #search{
  144.   margin-left: 10px;
  145.   outline: none;
  146.   border: none;
  147.   font-size: 12px;
  148.   color: #666666;
  149. }
  150. /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  151. *::-webkit-scrollbar {
  152.   width: 10px;
  153.   height: 10px;
  154.   background-color: rgba(255, 255, 255, 0);
  155. }
  156. ​
  157. /*定义滚动条的轨道，内阴影及圆角*/
  158. *::-webkit-scrollbar-track {
  159.   border-radius: 10px;
  160.   background-color: rgba(230, 230, 230, 0.05);
  161. }
  162. ​
  163. *:hover::-webkit-scrollbar-track {
  164.   background-color: rgba(230, 230, 230, 0.5);
  165. }
  166. ​
  167. /*定义滑块，内阴影及圆角*/
  168. ​
  169. *::-webkit-scrollbar-thumb {
  170.   height: 20px;
  171.   border-radius: 10px;
  172.   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  173.   background-color: rgba(216, 216, 216, 0.4);
  174.   transition: background-color 1s;
  175. }
  176. ​
  177. *:hover::-webkit-scrollbar-thumb {
  178.   background-color: rgba(216, 216, 216, 1);
  179. }
  180. ​
  181. *::-webkit-scrollbar-thumb:hover {
  182.   background-color: rgba(190, 190, 190, 1);
  183. }
  184. ​
  185. *::-webkit-scrollbar-thumb:active {
  186.   background-color: rgba(160, 160, 160, 1);
  187. }

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

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

  

闽ICP备14008679号