@pangsui/vue3-resource-gantt

快速上手

npm install @pangsui/vue3-resource-gantt

全局使用

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

import store from './store/index'
import Gantt from '@pangsui/vue3-resource-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|statusDictionary|状态字典，详细配置见下面字典配置参数|Object||{} 6|tasks|任务列表|Array||[] 7|rows|左侧行数据|Array||[] 8|titleGroups|左侧分组数据,详细配置见下面分组配置参数｜Array||[]

字典配置参数

序号|参数|说明|类型|可选值|默认值 -|-|-|-|-|-| 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任务、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||

titleGroups数据配置参数

序号|参数|说明|类型|可选值|默认值 -|-|-|-|-|-| 1|title|标题|String||| 2|length|长度（分组标题占的数量总和）|Number||

计算两个时间相差的天数

// 计算两个时间相差的天数
/**
 * @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
      ref="gantt"
      :days="60"
      :o-day-box-width="30"
      :start-time="'2023-11-10'"
      :status-dictionary="statusDictionary"
      :tasks="tasks"
      :rows="rows"
      :title-groups="titleGroups"
    />in-tasks="originTasks"
    />

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

export default {
  setup() {
    const vueConfig = reactive({
        rows: [
          {
            id: 1,
            name: 'A1'
          },
          {
            id: 2,
            name: 'A2'
          },
          {
            id: 3,
            name: 'A3'
          },
          {
            id: 4,
            name: 'A4'
          },
          {
            id: 5,
            name: 'A5'
          },
          {
            id: 6,
            name: 'A6'
          },
          {
            id: 7,
            name: 'A7'
          },
          {
            id: 8,
            name: 'A8'
          },
          {
            id: 9,
            name: 'A9'
          },
          {
            id: 10,
            name: 'A10'
          },
          {
            id: 11,
            name: 'A11'
          },
          {
            id: 12,
            name: 'A12'
          },
          {
            id: 13,
            name: 'A13'
          },
          {
            id: 14,
            name: 'A14'
          },
          {
            id: 15,
            name: 'A15'
          },
          {
            id: 16,
            name: 'A16'
          },
          {
            id: 17,
            name: 'A17'
          },
          {
            id: 18,
            name: 'A18'
          },
          {
            id: 19,
            name: 'A19'
          },
          {
            id: 20,
            name: 'A20'
          },
          {
            id: 21,
            name: 'A21'
          }
        ],
        titleGroups: [
          {
            title: '南车间',
            length: 5
          },
          {
            title: '北车间',
            length: 4
          },
          {
            title: '二车间',
            length: 6
          },
          {
            title: '三车间',
            length: 6
          }
        ],
        tasks: 
          [
            {
              task_id: 1,
              text: '测试项目',
              row_index: 0,
              start_date: '2023-12-11 12:00:00',
              duration: 10,
              theme: 'lightpurple',
              is_lock: false,
              progress: 100, // 进度
            },
            {
              task_id: 2,
              text: '测试项目1',
              row_index: 3,
              start_date: '2023-12-09 12:06:00',
              duration: 12,
              theme: 'purple',
              progress: 70, // 进度
              is_lock: true,
            },
            {
              task_id: 3,
              text: '测试项目2',
              row_index: 4,
              end_date: '2023-12-01 21:01:25',
              start_date: '2023-12-11 22:00:00',
              duration: 10,
              theme: 'mediumpurple',
              progress: 86, // 进度
              is_lock: false,
            },
            {
              task_id: 13,
              text: '测试项目3',
              row_index: 4,
              start_date: '2023-12-08 21:01:25',
              duration: 5,
              theme: 'pink',
              progress: 0, // 进度
              is_lock: false,
            },
            {
              task_id: 4,
              text: '测试项目4',
              row_index: 9,
              start_date: '2023-12-12 12:00:00',
              duration: 4.8,
              progress: 40, // 进度
              theme: 'cyan',
              is_lock: false,
            },
            {
              task_id: 5,
              text: '测试项目5',
              row_index: 1,
              start_date: '2023-11-10 10:46:00',
              duration: 5.9,
              progress: 90, // 进度
              theme: 'red',
              is_lock: true,
            },
            {
              task_id: 6,
              text: '测试项目6',
              row_index: 9,
              start_date: '2023-11-10 12:00:00',
              duration: 10,
              theme: 'skyblue',
              progress: 100, // 进度
              is_lock: false
            },
            {
              task_id: 7,
              text: '测试项目7',
              row_index: 8,
              start_date: '2023-11-15 12:00:00',
              duration: 22,
              progress: 100, // 进度
              theme: 'orange',
              is_lock: false
            },
            {
              task_id: 8,
              text: '测试项目8',
              row_index: 10,
              start_date: '2023-11-15 16:00:00',
              duration: 30,
              progress: 95, // 进度
              theme: 'blue',
              is_lock: false,
            },
            {
              task_id: 9,
              text: '测试项目9',
              row_index: 5,
              start_date: '2023-12-09 12:00:00',
              duration: 11,
              progress: 0, // 进度
              theme: 'lightpink',
              is_lock: false,
            },
            {
              task_id: 10,
              text: '测试项目10',
              row_index: 11,
              start_date: '2023-11-18 03:00:00',
              duration: 8,
              progress: 100, // 进度
              theme: 'yellow',
            },
            {
              task_id: 11,
              text: '测试项目11',
              row_index: 3,
              start_date: '2023-11-16 00:00:00',
              duration: 40,
              progress: 50, // 进度
              theme: 'gray',
              is_lock: true,
            }
          ],
        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' }
        }
      }
    })
    return {
      ...toRefs(vueConfig)
    }
  }

#####示例图片