@pangsui/vue3-plan-gantt

快速上手

npm install @pangsui/vue3-plan-gantt

全局使用

main.js中引入并注册，由于组件也用到了vuex，所以在注册时也要将vuex传给组件，没有vuex的记得安装一下vuex

import store from './store/index'
import Gantt from '@pangsui/vue3-plan-gantt'

const app = createApp(App)
app.use(Gantt, { store })

文档

属性参数

序号|参数|说明|类型|可选值|默认值 -|-|-|-|-|-| 1|days|要渲染的天数|Number||30 2|oDayBoxHeight|表格高度|Number||40 3|oDayBoxWidth|表格宽度|Number||60 4|startTime|渲染时间列表的开始时间|String||2024-01-01 5|leftTableConfig|左侧可收缩的表格配置，详细配置见下面左侧表格配置参数|Object||{} 6|tasks|任务列表|Array||[] 7|rows|左侧行数据|Array||[] 8|originTasks|原任务数据|Array||[]

左侧表格配置参数

序号|参数|说明|类型|可选值|默认值 -|-|-|-|-|-| 1|thead|表格配置，详细配置见下方表格配置|Array||[] 2|maxWidth|表格宽度最大值，表格配置width宽度和|Number||0 3|minWidth|表格宽度最小值，允许折叠列的width宽度和|Number||0 4|statusDictionary|状态字典，包含中文名和主题两个字段，具体见下方表格字典配置|Object||{}

表格配置参数

序号|参数|说明|类型|可选值|默认值 -|-|-|-|-|-| 1|prop|属性值|String||| 2|type|类型|String|span或tag，目前tag只有状态字段使用|span 3|name|表头名称|String|| 4|width|宽度，要带着px|String||2024-01-01 5|collapse|是否为折叠列|Boolean|true或false|false

表格字典配置参数

序号|参数|说明|类型|可选值|默认值 -|-|-|-|-|-| 1|name|名称|String||| 2|theme|主题|String|'default','deepgreen','green','lightgreen','lightpurple','purple','mediumpurple','red','pink','lightpink','blue','skyblue','cyan','yellow','lightyellow','greenyellow','orange','lightgray','gray'|'default'

tasks任务、originTasks原任务、rows左侧行数据配置参数

序号|参数|说明|类型|可选值|默认值 -|-|-|-|-|-| 1|task_id|任务id|Number||| 2|text|任务名称|String|| 3|row_index|行下标，不重复且从1开始累加|Number|| 4|start_date|开始时间 yyyy-MM-dd hh:mm:ss|String|| 5|end_date|结束时间 yyyy-MM-dd hh:mm:ss|String|| 6|duration|持续时间，单位天|String|| 7|progress|进度|String|1-100| 8|status|状态|String|| 9|is_lock|是否锁定|Boolean|true或false| 10|is_collapse|是否折叠|Boolean|true或false| 11|is_parent|是否父节点|Boolean|true或false| 12|status|状态|String||

以上是必须的字段，其余的字段可以根据左侧菜单配置自由添加

计算两个时间相差的天数

// 计算两个时间相差的天数
/**
 * @param {Date} date1 开始时间
 * @param {Date} date2 结束时间
 */
export function calculateDuration(date1, date2) {
  const oneDay = 24 * 60 * 60 * 1000 // 每天的毫秒数
  const diffDays = Math.round(Math.abs((date2 - date1) / oneDay))
  return diffDays
}

使用案例

界面中引入

<Gantt
      :days="60"
      :o-day-box-width="120"
      :start-time="'2024-08-08'"
      :left-table-config="leftTableConfig"
      :tasks="tasks"
      :rows="rows"
      :origin-tasks="originTasks"
    />

<script>
import { cloneDeep } from 'lodash'
import { onMounted, reactive, toRefs, ref } from 'vue'

export default {
  setup() {
    const vueConfig = reactive({
      rows: [],
      tasks: [],
      originTasks: [],
      startTime: '', // 开始时间
      leftTableConfig: { // 左侧表格配置
        thead: [
          { prop: 'code', type: 'span', name: '编号', width: '120px', collapse: false },
          { prop: 'name', type: 'span', name: '名称', width: '120px', collapse: false },
          { prop: 'start_date', type: 'span', name: '开始时间', width: '160px', collapse: true },
          { prop: 'end_date', type: 'span', name: '结束时间', width: '160px', collapse: true },
          { prop: 'plan_qty', type: 'span', name: '计划数', width: '80px', collapse: true },
          { prop: 'finish_qty', type: 'span', name: '完成数', width: '80px', collapse: true },
          { prop: 'state', type: 'tag', name: '状态', width: '120px', collapse: true }
        ],
        maxWidth: 840,
        minWidth: 240,
        statusDictionary: {
          'draft': { name: '草稿', theme: 'gray' },
          'unfold': { name: '展开', theme: 'cyan' },
          'progress': { name: '进行中', theme: 'blue' },
          'confirm': { name: '已确认', theme: 'lightpurple' },
          'suspend': { name: '暂停', theme: 'yellow' },
          'finish': { name: '已完成', theme: 'lightgreen' },
          'cancel': { name: '已取消', theme: 'red' }
        },
        testData: [
        {
          'task_id': 1,
          'code': 'GD1001',
          'text': '2024年第一次测试项目',
          'name': 'PC',
          'row_index': 0,
          'start_date': '2024-08-08 21:01:25',
          'end_date': '2024-08-25 18:00:15',
          'duration': 17,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'is_collapse': false,
          'is_parent': true,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 1,
          'code': 'WO1001',
          'text': '第一道工序',
          'name': '组装-1#',
          'row_index': 1,
          'start_date': '2024-08-08 21:01:25',
          'end_date': '2024-08-10 18:00:15',
          'duration': 2,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 1,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 2,
          'code': 'WO1002',
          'text': '第二道工序',
          'name': '组装-2#',
          'row_index': 2,
          'start_date': '2024-08-10 19:00:15',
          'end_date': '2024-08-12 18:00:15',
          'duration': 2,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 1,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 3,
          'code': 'WO1003',
          'text': '第三道工序',
          'name': '组装-3#',
          'row_index': 3,
          'start_date': '2024-08-12 20:00:15',
          'end_date': '2024-08-16 18:00:15',
          'duration': 4,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 1,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 4,
          'code': 'WO1004',
          'text': '第四道工序',
          'name': '组装-4#',
          'row_index': 4,
          'start_date': '2024-08-16 18:00:15',
          'end_date': '2024-08-20 18:00:15',
          'duration': 4,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 1,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 5,
          'code': 'WO1005',
          'text': '第五道工序',
          'name': '组装-5#',
          'row_index': 5,
          'start_date': '2024-08-20 18:00:15',
          'end_date': '2024-08-25 18:00:15',
          'duration': 5,
          'progress': 0,
          'theme': 'gray',
          'is_lock': true,
          'parent_id': 1,
          'plan_qty': 20,
          'finish_qty': 0,
          'state': 'draft'
        },
        {
          'task_id': 2,
          'code': 'GD1001',
          'text': '2024年第二次测试项目',
          'name': '手机',
          'row_index': 6,
          'start_date': '2024-08-12 21:01:25',
          'end_date': '2024-08-30 18:00:15',
          'duration': 18,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'is_collapse': false,
          'is_parent': true,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 1,
          'code': 'WO1006',
          'text': '第一道工序',
          'name': '组装-1#',
          'row_index': 7,
          'start_date': '2024-08-12 21:01:25',
          'end_date': '2024-08-14 18:00:15',
          'duration': 2,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 2,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 2,
          'code': 'WO1007',
          'text': '第二道工序',
          'name': '组装-2#',
          'row_index': 8,
          'start_date': '2024-08-14 19:00:15',
          'end_date': '2024-08-16 18:00:15',
          'duration': 2,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 2,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 3,
          'code': 'WO1008',
          'text': '第三道工序',
          'name': '组装-3#',
          'row_index': 9,
          'start_date': '2024-08-16 20:00:15',
          'end_date': '2024-08-18 18:00:15',
          'duration': 2,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 2,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 4,
          'code': 'WO1009',
          'text': '第四道工序',
          'name': '组装-4#',
          'row_index': 10,
          'start_date': '2024-08-18 18:00:15',
          'end_date': '2024-08-22 18:00:15',
          'duration': 4,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 2,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 5,
          'code': 'WO1010',
          'text': '第五道工序',
          'name': '组装-5#',
          'row_index': 11,
          'start_date': '2024-08-22 18:00:15',
          'end_date': '2024-08-30 18:00:15',
          'duration': 8,
          'progress': 0,
          'theme': 'gray',
          'is_lock': true,
          'parent_id': 2,
          'plan_qty': 20,
          'finish_qty': 0,
          'state': 'draft'
        },
        {
          'task_id': 3,
          'code': 'GD1001',
          'text': '2024年第三次测试项目',
          'name': '手机',
          'row_index': 12,
          'start_date': '2024-08-12 21:01:25',
          'end_date': '2024-08-30 18:00:15',
          'duration': 18,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'is_collapse': false,
          'is_parent': true,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 1,
          'code': 'WO1006',
          'text': '第一道工序',
          'name': '组装-1#',
          'row_index': 13,
          'start_date': '2024-08-12 21:01:25',
          'end_date': '2024-08-14 18:00:15',
          'duration': 2,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 3,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 2,
          'code': 'WO1007',
          'text': '第二道工序',
          'name': '组装-2#',
          'row_index': 14,
          'start_date': '2024-08-14 19:00:15',
          'end_date': '2024-08-16 18:00:15',
          'duration': 2,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 3,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 3,
          'code': 'WO1008',
          'text': '第三道工序',
          'name': '组装-3#',
          'row_index': 15,
          'start_date': '2024-08-16 20:00:15',
          'end_date': '2024-08-18 18:00:15',
          'duration': 2,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 3,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 4,
          'code': 'WO1009',
          'text': '第四道工序',
          'name': '组装-4#',
          'row_index': 16,
          'start_date': '2024-08-18 18:00:15',
          'end_date': '2024-08-22 18:00:15',
          'duration': 4,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 3,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 5,
          'code': 'WO1010',
          'text': '第五道工序',
          'name': '组装-5#',
          'row_index': 17,
          'start_date': '2024-08-22 18:00:15',
          'end_date': '2024-08-30 18:00:15',
          'duration': 8,
          'progress': 0,
          'theme': 'gray',
          'is_lock': true,
          'parent_id': 3,
          'plan_qty': 20,
          'finish_qty': 0,
          'state': 'draft'
        },
        {
          'task_id': 4,
          'code': 'GD1001',
          'text': '2024年第四次测试项目',
          'name': '手机',
          'row_index': 18,
          'start_date': '2024-08-12 21:01:25',
          'end_date': '2024-08-30 18:00:15',
          'duration': 18,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'is_collapse': false,
          'is_parent': true,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 1,
          'code': 'WO1006',
          'text': '第一道工序',
          'name': '组装-1#',
          'row_index': 19,
          'start_date': '2024-08-12 21:01:25',
          'end_date': '2024-08-14 18:00:15',
          'duration': 2,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 4,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 2,
          'code': 'WO1007',
          'text': '第二道工序',
          'name': '组装-2#',
          'row_index': 20,
          'start_date': '2024-08-14 19:00:15',
          'end_date': '2024-08-16 18:00:15',
          'duration': 2,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 4,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 3,
          'code': 'WO1008',
          'text': '第三道工序',
          'name': '组装-3#',
          'row_index': 21,
          'start_date': '2024-08-16 20:00:15',
          'end_date': '2024-08-18 18:00:15',
          'duration': 2,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 4,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 4,
          'code': 'WO1009',
          'text': '第四道工序',
          'name': '组装-4#',
          'row_index': 22,
          'start_date': '2024-08-18 18:00:15',
          'end_date': '2024-08-22 18:00:15',
          'duration': 4,
          'progress': 50,
          'theme': 'blue',
          'is_lock': true,
          'parent_id': 4,
          'plan_qty': 20,
          'finish_qty': 10,
          'state': 'progress'
        },
        {
          'task_id': 5,
          'code': 'WO1010',
          'text': '第五道工序',
          'name': '组装-5#',
          'row_index': 23,
          'start_date': '2024-08-22 18:00:15',
          'end_date': '2024-08-30 18:00:15',
          'duration': 8,
          'progress': 0,
          'theme': 'gray',
          'is_lock': true,
          'parent_id': 4,
          'plan_qty': 20,
          'finish_qty': 0,
          'state': 'draft'
        }
      ]
      }
    })

    onMounted(() => {
      // 开始时间
      vueConfig.startTime = '2024-08-01'
      vueConfig.rows = cloneDeep(vueConfig.testData)
      vueConfig.tasks = cloneDeep(vueConfig.testData)
      vueConfig.originTasks = cloneDeep(vueConfig.testData)
    })

    return {
      ...toRefs(vueConfig)
    }
  }

#####示例图片