vue3+dhtmlx-gantt实现甘特图

红烧肉数分

于 2024-08-28 02:36:07 发布

阅读量137

点赞数

文章标签：甘特图 vue.js elementui 前端 javascript

引入依赖

npm install dhtmlx-gantt@7.1.7

页面代码

<template>
  <div class="ganttShow">
    <div class="common-query">
      <div class="common-query-demo">
        <span>产品名称</span>
        <el-input placeholder="请输入产品名称" v-model="query.orderName"></el-input>
      </div>
  
      <div class="common-query-demo">
        <span>交货期</span>
        <el-date-picker v-model="query.deliDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels></el-date-picker>
      </div>
      <div class="common-query-demo">
        <el-button icon="el-icon-search" @click="queryEdit">查询</el-button>
      </div>
    </div>
    <div class="ganttShow-body">
      <div class="common-btn">
        <span>试算时间：2020-05-29 12:25:30</span>
        <el-button type="primary" @click="HungCommenced">挂起/开工</el-button>
      </div>
      <div class="ganttShow-box" :style="ganttStyle">
        <div id="gantt_here" style="height: 100%"></div>
      </div>
      <div class="ganttShow-foot">
        <div class="ganttShow-foot-desc">
          <img src="@assets/img/normal.png" />
          <span>排程正常</span>
        </div>
        <div class="ganttShow-foot-desc">
          <img src="@assets/img/overtime.png" />
          <span>产生加班</span>
        </div>
        <div class="ganttShow-foot-desc">
          <img src="@assets/img/warring.png" />
          <span>不满足交期</span>
        </div>
        <div class="ganttShow-foot-desc">
          <img src="@assets/img/shelve.png" />
          <span>挂起</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, onUnmounted } from 'vue'
import { gantt } from 'dhtmlx-gantt' // 引入模块
import '@gantt/skins/dhtmlxgantt_meadow.css' // 皮肤
import '@gantt/locale/locale_cn' // 本地化
import { ganttShowData } from '@api/pplant/ganttShow'
import { ElMessage } from 'element-plus'

export default {
  name: 'ganttShow',
  setup() {
    // 定义的变量
    const state = reactive({
      query: {
        orderName: '',
        number: '',
        deliDate: ''
      },
      ganttStyle: {
        height: ''
      },
      tableData: [],
      optioms: [],
      tasks: {
        data: []
      }
    })

    // 表格数据请求
    function getGanttShowData() {
      ganttShowData().then(res => {
        state.tasks.data = res.data
        state.optioms = res.options
        Init()
      })
    }

    function Init() {
      // 当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
      gantt.config.fit_tasks = true
      // 禁止用户拖动条形图来改变位置
      gantt.config.drag_move = false
      // 禁止用户推拽条形图上用来调整进度百分比的小按钮
      gantt.config.show_progress = false
      // 禁止通过拖拽的方式新增任务依赖的线条
      gantt.config.show_links = false
      // 允许用户通过拖拽任务的条形图的两端来改变工期
      gantt.config.drag_resize = false
      // 设置左侧表格的宽度
      gantt.config.grid_width = 300
      // 时间轴列的最小宽度
      gantt.config.min_column_width = 25
      // 时间轴图表中，任务条形图的高度
      gantt.config.bar_height = 10
      // 时间轴图表中，包头部分的高度
      gantt.config.scale_height = 50
      // 时间轴图表中，甘特图的高度
      gantt.config.row_height = 20
      // // 定义弹出框select选择内容
      var opts = state.optioms
      // 定义lightbox弹出框
      gantt.locale.labels.section_cause = '修改原因' // 自定义字段
      gantt.locale.labels.section_remark = '备注' // 自定义字段
      gantt.config.lightbox.sections = [
        {
          name: 'description',
          height: 38,
          map_to: 'text',
          type: 'template'
        },
        {
          name: 'cause',
          height: 28,
          map_to: 'cause',
          type: 'select',
          options: opts
        },
        {
          name: 'remark',
          height: 38,
          map_to: 'remark',
          type: 'textarea',
          focus: true
        },
        {
          name: 'time',
          height: 38,
          type: 'time',
          map_to: 'auto',
          time_format: ['%Y', '%m', '%d', '%H:%i']
        }
      ]
      // 弹框的日期格式处理
      gantt.config.date_format = '%Y-%m-%d %H:%i'
      gantt.config.task_date = '%Y-%m-%d %H:%i'
      // 工期计算的基本单位
      gantt.config.duration_unit = 'minute'
      gantt.config.duration_step = 1
      // 设置x轴日期
      gantt.config.scale_unit = 'month'
      gantt.config.step = 1
      gantt.config.date_scale = '%Y-%m'
      // 设置时间以分钟为单位
      gantt.config.time_step = 1
      // 在时间线上增加一行显示日
      gantt.config.subscales = [
        {
          unit: 'day',
          step: 1,
          date: '%d'
        }
      ]
      // 显示到进度条上的文本为空
      gantt.templates.task_text = function () {
        return null
      }
      // 自定义按钮
      gantt.attachEvent('onGanttReady', function () {
        gantt.config.buttons_left = ['gantt_save_btn']
      })
      gantt.attachEvent('onGanttReady', function () {
        gantt.config.buttons_right = ['gantt_cancel_btn']
      })
      // 初始化列 (自定义的时候需要更改源码匹配自己新增name字段 否则undefined)
      gantt.config.columns = [
        {
          name: 'text', // 自定义字段
          label: '订单名称', // 用于界面展示的名称
          tree: true // 当前列节点是否带图标
        }
      ]
      // 鼠标经过时弹出框提示
      gantt.plugins({
        tooltip: true
      })
      // 设置父任务条形图颜色与子任务区别
      gantt.templates.task_class = function (start, end, item) {
        return item.$level == 0 ? 'gantt_project' : ''
      }
      // 设置父任务ID不可操作
      gantt.attachEvent('onBeforeLightbox', function (id) {
        var task = gantt.getTask(id)
        if (task.progress == 1) {
          return false
        }
        return true
      })
      // 悬浮提示框内容设置
      gantt.templates.tooltip_text = function (start, end, task) {
        // alert(task.start_date)
        // alert(start)
        return (task.text + '<br /><b>开始时间:</b>' + task.start_date + '<br /><b>结束时间:</b>' + task.end_date)
      }
      // 突出周末
      gantt.templates.timeline_cell_class = function (item, date) {
        // debugger
        if (date.getDay() == 0 || date.getDay() == 6) {
          return 'weekend'
        }
      }
      // 显示当天
      gantt.plugins({
        marker: true
      })

      // 显示交货期
      var dateToStr = gantt.date.date_to_str(gantt.config.task_date)
      // js获取时间月份减去1
      var start = new Date(2020, 4, 5, 18, 0, 0) // 实际交货期为5-6
      gantt.addMarker({
        start_date: start,
        css: 'today',
        text: '交货期',
        title: '交货期: ' + dateToStr(start)
      })

      // 显示当天
      var today = new Date()
      gantt.addMarker({
        start_date: today,
        css: 'today',
        text: '今天'
        // title: '今天: ' + dateToStr(today),
      })
      // 设置请求时间格式
      gantt.config.xml_date = '%Y-%m-%d %H:%i'
      // 初始化
      gantt.init('gantt_here')
      // 数据解析
      gantt.parse(state.tasks)
    }

    function HungCommenced() {
      ElMessage.error('暂定！')
    }

    // 查询
    function queryEdit() {
      ElMessage.success('恭喜您，查询成功！')
    }

    function getHeight() {
      state.ganttStyle.height = window.innerHeight - 332 + 'px'
    }

    // 页面加载时调用函数
    onMounted(() => {
      // 请求表格数据
      getGanttShowData()
      // 注册监听器
      window.addEventListener('resize', getHeight)
      // 调用函数
      getHeight()
    })

    onUnmounted(() => {
      // 注销监听器
      window.removeEventListener('resize', getHeight)
    })

    return {
      ...toRefs(state),
      HungCommenced,
      queryEdit
    }
  }
}
</script>

<style lang='scss'>
.ganttShow {
  width: 100%;
  height:100%;

  .ganttShow-body {
    height: calc(100% - 120px);
    margin-top: 20px;
    box-shadow: $box-shadow;
    background: #fff;
    padding: 20px;

    .ganttShow-box{
      margin-top:20px;
    }

    .ganttShow-foot{
      margin-top:20px;
      display: flex;

      .ganttShow-foot-desc{
        margin:0 20px;

        span{
          margin-left:20px;
        }
      }

      .ganttShow-foot-desc:first-child{
        margin-left:0;
      }
    }
  }
}
</style>