npm package: @pangsui/vue3-resource-gantt
Description: #### 快速上手 ``` npm install @pangsui/vue3-resource-gantt ```
Author: pangsui
Latest version: 0.0.7

# @pangsui/vue3-resource-gantt

#### 快速上手
```
npm install @pangsui/vue3-resource-gantt
```

#### 全局使用
##### main.js中引入并注册，由于组件也用到了vuex，所以在注册时也要将vuex传给组件，没有vuex的记得安装一下vuex
```
import store from './store/index'
import ResourceGantt from '@pangsui/vue3-resource-gantt'

const app = createApp(App)
app.use(ResourceGantt, { 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
}
```

##### 使用案例
界面中引入
```
<ResourceGantt
      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)
    }
  }
}
```
#####示例图片

![示例图片](packages/Gantt/src/assets/example.png)