CSDN

vue 甘特图（附件）：甘特图附件

2023-11-14 16:42 由 根号九九 发表于 #软件工程

甘特图样式：

.gantt_container {
  border-color: transparent !important;
  .gantt_right {
    top: 0% !important;
    display: flex !important;
  }
  .gantt_side_content {
    overflow: visible !important;
  }
  .weekend {
    background: #ff9e2f;
    color: #fff !important;
  }
  // .gantt_selected {
  //   background: #f4f5fe !important;
  // }
  .gantt_grid_data .gantt_row.gantt_selected {
    background: #f4f5fe !important;
  }
  .gantt_task_row.gantt_selected {
    background: #f4f5fe !important;
  }
  .gantt_grid_data .gantt_row.odd:hover,
  .gantt_grid_data .gantt_row:hover {
    background: #f4f5fe !important;
  }
  .gantt_task_line.gantt_selected {
    box-shadow: 0 0 5px #f4f5fe;
  }
  .gantt_grid_scale .gantt_grid_head_cell {
    font-size: 14px;
    font-weight: 400;
    color: rgba(28, 28, 28, 0.76);
  }
  .gantt_task .gantt_task_scale .gantt_scale_cell {
    font-size: 12px;
    font-weight: 400;
    color: rgba(28, 28, 28, 0.76);
  }
  .gantt_side_content.gantt_right {
    padding-left: 5px;
    top: 20%;
  }
  .gantt_task_line.gantt_project {
    background: #656bff;
    border: none;
  }
  .gantt_task_line {
    border-radius: 5px;
    background: #b0bdff;
    border: none;
  }
  .gantt_task_content {
    color: #fff;
  }
  .gantt_task_progress {
    display: none;
  }
  .gantt_selected .weekend {
    background: #2f51ff;
  }
  .weekend-border-bottom {
    border-bottom: 1px solid rgba(217, 217, 217, 1);
  }
  .gantt_grid_scale .gantt_grid_head_cell {
    border-right: 1px solid #d9d9d9 !important;
    &:nth-last-child(1) {
      border-right: none !important;
    }
  }
  .gantt_row,
  .gantt_task_row {
    border-bottom: none;
  }
  .gantt_task_cell {
    border-right-color: rgba(28, 28, 28, 0.1);
  }
  .gantt_row_task {
    border-bottom: 1px solid rgba(217, 217, 217, 1);
  }
  .gantt_row_project {
    border-bottom: 1px solid rgba(217, 217, 217, 1) !important;
  }
  .gantt_cell {
    border-right: 1px solid rgba(217, 217, 217, 1) !important;
  }
  .gantt_last_cell {
    border-right: none !important;
  }
  // .day-item{
  //   width: 60px !important;
  // }、
  .gantt_marker {
    z-index: 99;
    background: #ff4141;
  }
  .gantt_tree_icon {
    width: 21px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    margin-right: 5px;
  }
  .gantt_folder_open {
    background-image: url('./../img/gante/gantt_folder_open.png') !important;
    margin-right: 4px;
  }
  .gantt_folder_closed {
    background-image: url('./../img/gante/gantt_folder_closed.png') !important;
    margin-right: 4px;
  }
  .gantt_file {
    background-image: url('./../img/gante/gantt_file.png') !important;
    margin-right: 4px;
  }
  .gantt_close {
    width: 12px !important;
    background-image: url('./../img/gante/gantt_close.png') !important;
    margin-right: 6px;
  }
  .gantt_open {
    width: 12px !important;
    background-image: url('./../img/gante/gantt_close.png') !important;
    transform: rotate(-90deg);
  }
  .dont-show {
    display: none;
    height: 0 !important;
  }
  .gantt_task_line{
    min-width: 21px;
  }
  .gongxu{
    background-image: url('./../img/gante/gongxu.png') !important;
  }
}
.gantt-error {
  display: none !important;
}

.shadow-right {
  box-shadow: 1px 0px 4px 0px rgba(0, 0, 0, 0.15);
}

.lag-advane {
  display: flex;
  align-items: center;
  position: absolute;
  top: -50% !important;
  z-index: 12;
  // left: -100%;
  .icon {
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 2px;
  }
  .lag {
    background-image: url('./../../assets/img/manage/icon_lag.png');
  }
  .lag-value {
    color: #ff4141;
  }
  .advane {
    background-image: url('./../../assets/img/manage/icon_advance.png');
  }
  .advane-value {
    color: #14cf20;
  }
}

//员工任务详情
.myself-project-bar {
  display: flex;
  align-items: center;
  .bar-right-item {
    width: 90px;
    height: 21px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
  }
  .myself-project-progress {
    position: absolute;
    left: 6px;
    width: 40px;
    text-align: center;
    color: #fff;
  }
  .myself-project-overTime {
    position: absolute;
    left: 71px;
    text-align: center;
    color: #000000;
  }
  .task-lag {
    background-image: url('./../img/gante/task_lag.png');
  }
  .task-finish {
    background-image: url('./../img/gante/task_finish.png');
  }
}

// 项目总视图
.tooltip-box {
  .project-name {
    font-size: 14px;
  }
}

.bar-right-item {
  display: flex;
  align-items: center;
  align-content: center;
}

// manage 页面 样式
.finish-state-icon {
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.finish-progress {
  width: 54px;
  height: 21px;
  line-height: 24px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
}
.finish-schedule {
  display: flex;
  align-items: center;
  margin-left: 4px;
}
.finish-finish {
  .finish-schedule {
    display: none;
  }
}
//任务超前右侧样式
.finish-advance {
  .finish-state-icon {
    background-image: url('./../../assets/img/manage/icon_finish.png');
  }
  .finish-progress {
    background-image: url('./../../assets/img/manage/back_advance.png');
  }
  .finish-schedule {
    color: #14cf20;
    .finish-schedule-icon {
      background-image: url('./../../assets/img/manage/icon_advance.png');
    }
  }
}
//滞后右侧样式
.finish-lag {
  .finish-state-icon {
    background-image: url('./../../assets/img/manage/icon_error.png');
  }
  .finish-progress {
    background-image: url('./../../assets/img/manage/back_lag.png');
  }
  .finish-schedule {
    color: #ff4141;
    .finish-schedule-icon {
      background-image: url('./../../assets/img/manage/icon_lag.png');
    }
  }
}
.finish-schedule-icon {
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-right: 2px;
}
.special-item {
  background: rgba(203, 212, 255, 0.5);
  border: 1px dashed #b0bdff;
  border-radius: 4px;
  padding: 0 4px;
  color: rgba(51, 51, 51, 1);
}
.task-progress-line {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 999;
  height: 6px;
  background: #eeeeee;
  .line-bar {
    position: absolute;
    left: 0;
    height: 6px;
    background: #2f51ff;
  }

  .value {
    position: absolute;
    right: 2px;
    bottom: 7px;
    font-size: 12px;
    font-weight: 400;
    color: #979797;
    line-height: 1;
  }
}

数据模板：

demoData: {
    data: [
      {
        id: 520,
        projectName: '项目1',
        startTime: '2023-09-25',
        endTime: '2023-10-31',
        showEndTime: '2023-11-01',
        projectStatus: '暂无任务',
        projectProgress: 0,
        projectRatio: '',
        projectTotalTime: 0,
        projectUsedTime: 0,
        functionName: '',
        xmdj: '2',
        cityName: '成都',
        name: '1',
        projectMap: {},
        parent: 0,
        start_date: '2023-09-24 16:00:00.000',
        end_date: '2023-10-31 16:00:00.000',
        progress: 0.5,
        duration: 37
      },
      {
        id: 517,
        projectName: '项目2',
        startTime: '2023-09-18',
        endTime: '2023-10-23',
        showEndTime: '2023-10-24',
        projectStatus: '暂无任务',
        projectProgress: 0,
        projectRatio: '',
        projectTotalTime: 0,
        projectUsedTime: 0,
        functionName: '',
        xmdj: '0',
        cityName: '深圳',
        name: '2',
        projectMap: {},
        parent: 0,
        start_date: '2023-09-17 16:00:00.000',
        end_date: '2023-10-23 16:00:00.000',
        progress: 0.2
      },
      {
        id: 505,
        projectName: '项目3',
        startTime: '2023-09-04',
        endTime: '2023-09-30',
        showEndTime: '2023-10-01',
        projectStatus: '滞后',
        projectProgress: 0.76,
        projectRatio: 0.12,
        projectTotalTime: 3267.6,
        projectUsedTime: 2477.7,
        functionName: '现状还原',
        xmdj: '3',
        cityName: '成都',
        name: '3',
        projectMap: {},
        parent: 0,
        start_date: '2023-09-03 16:00:00.000',
        end_date: '2023-09-30 16:00:00.000',
        progress: 0.1
      },
      {
        id: 508,
        projectName: '项目4',
        startTime: '2023-09-04',
        endTime: '2023-10-20',
        showEndTime: '2023-10-21',
        projectStatus: '滞后',
        projectProgress: 0.57,
        projectRatio: 0.04,
        projectTotalTime: 3582.5,
        projectUsedTime: 2033.2,
        functionName: '测试功能',
        xmdj: '1',
        cityName: '成都',
        name: '4',
        projectMap: {},
        parent: 0,
        start_date: '2023-09-03 16:00:00.000',
        end_date: '2023-10-20 16:00:00.000',
        progress: 0.15
      },
      {
        id: 511,
        projectName: '项目5',
        startTime: '2023-09-01',
        endTime: '2023-10-31',
        showEndTime: '2023-11-01',
        projectStatus: '滞后',
        projectProgress: 0.07,
        projectRatio: 0.03,
        projectTotalTime: 2150.5,
        projectUsedTime: 140,
        functionName: '悬浮球',
        xmdj: '1',
        cityName: '成都',
        name: '5',
        projectMap: {},
        parent: 0,
        start_date: '2023-07-31 16:00:00.000',
        end_date: '2023-10-31 16:00:00.000',
        progress: 0.28
      },
      {
        id: 507,
        projectName: '项目6',
        startTime: '2023-08-28',
        endTime: '2023-10-01',
        showEndTime: '2023-10-02',
        projectStatus: '滞后',
        projectProgress: 0.48,
        projectRatio: 0.21,
        projectTotalTime: 4957,
        projectUsedTime: 2367,
        functionName: '产品原型图',
        xmdj: '1',
        cityName: '三亚',
        name: '6',
        projectMap: {
          部门1: 1
        },
        parent: 0,
        start_date: '2023-07-27 16:00:00.000',
        end_date: '2023-10-01 16:00:00.000',
        progress: 0.33
      },
      {
        id: 1,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '超前',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 2,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 3,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 4,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 5,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 6,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 7,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 8,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 9,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      }
    ]
  }
View Code

时间切换数据模板：

const zoomConfig = {
  levels: [
    {
      name: 'day',
      scale_height: 60,
      scales: [{ unit: 'day', step: 1, format: '%d %M' }]
    },
    {
      name: 'week',
      scale_height: 60,
      scales: [
        {
          unit: 'week',
          step: 1,
          format: function (date) {
            let dateToStr = gantt.date.date_to_str('%m-%d')
            let endDate = gantt.date.add(date, -6, 'day')
            let weekNum = gantt.date.date_to_str('%W')(date) //第几周
            return dateToStr(endDate) + ' 至 ' + dateToStr(date)
          }
        },
        {
          unit: 'day',
          step: 1,
          format: '%d', // + "周%D"
          css: function (date) {
            if (date.getDay() == 0 || date.getDay() == 6) {
              return 'day-item weekend weekend-border-bottom'
            } else {
              return 'day-item'
            }
          }
        }
      ]
    },
    {
      name: 'month',
      scale_height: 60,
      min_column_width: 18,
      scales: [
        { unit: 'month', format: '%Y-%m' },
        {
          unit: 'day',
          step: 1,
          format: '%d',
          css: function (date) {
            if (date.getDay() == 0 || date.getDay() == 6) {
              return 'day-item weekend weekend-border-bottom'
            } else {
              return 'day-item'
            }
          }
        }
      ]
    },
    {
      name: 'quarter',
      height: 60,
      min_column_width: 110,
      scales: [
        {
          unit: 'quarter',
          step: 1,
          format: function (date) {
            let yearStr = new Date(date).getFullYear() + '年'
            let dateToStr = gantt.date.date_to_str('%M')
            let endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day')
            return yearStr + dateToStr(date) + ' - ' + dateToStr(endDate)
          }
        },
        {
          unit: 'week',
          step: 1,
          format: function (date) {
            let dateToStr = gantt.date.date_to_str('%m-%d')
            let endDate = gantt.date.add(date, 6, 'day')
            let weekNum = gantt.date.date_to_str('%W')(date)
            return dateToStr(date) + ' 至 ' + dateToStr(endDate)
          }
        }
      ]
    },
    {
      name: 'year',
      scale_height: 50,
      min_column_width: 150,
      scales: [
        { unit: 'year', step: 1, format: '%Y年' },
        { unit: 'month', format: '%Y-%m' }
      ]
    }
  ]
}
View Code

 

热门相关：韩娱之影帝   娇妻太甜：老公，要抱抱   娇妻太甜：老公，要抱抱   至尊剑皇   星界游民