vue3 vue-ganttastic 使用

简介

vue3 原生开源甘特图：地址：https://zunnzunn.github.io/vue-ganttastic/
功能相对简单；做项目进度展示，会议室预定展示还可以；不支持复杂粒度控制；

1、安装

pnpm install @infectoone/vue-ganttastic

2、配置

src/main.js 配置

import { createApp } from "vue"
import App from "./App.vue"
...
import ganttastic from '@infectoone/vue-ganttastic'
...
createApp(App)
  .use(ganttastic)
  .mount('#app')

官方样例：https://zunnzunn.github.io/vue-ganttastic/examples.html

3、使用

element-pluis +vue-ganttastic 静态使用样例

效果图：

4、常用属性介绍

4.1 g-gantt-chart 主属性介绍

来源：https://zunnzunn.github.io/vue-ganttastic/GGanttChart.html

1）chart-start、chart-start ，图标时间范围
2）precision：最小单位，枚举：hour, day, date, week and month
3）date-format：传入的时间格式："YYYY-MM-DD HH:mm:ss"
4）bar-start、bar-end 甘特图的开始结束指向的字段
5）color-scheme：配色方案，可每个区域指定颜色，见官方文档
6）push-on-overlap：false，拖动和重叠时条不“相互推动”
7）no-overlap：true，不允许进度条覆盖
8）grid：网格是否显示
9）row-height：行高
10）label-column-title：该属性不为空，则左侧列独立成列
11）label-column-width：指定label-column-title的宽度
12）支持事件：
click-bar：点击进度条
drag-bar：拖拽进度条中
dragend-bar 拖动进度条结束后：可拿到时间范围；
mouseenter-bar：鼠标覆盖事件；还支持单击、双击进度条；不支持点击空白区域；


 

4.2 插槽

常用插槽

1）g-gantt-chart 的 upper-timeunit ：时间轴显示日期的部分
2）g-gantt-chart 的 timeunit ：时间轴上的刻度部分
3）g-gantt-chart 的 label-column-row ：g-gantt-chart 的 label-column-title属性不为空，标题列的插槽；假设 label-column-title 属性为空，则插槽为：label-column-title
4）g-gantt-row 的 bar-label：甘特图进度条的插槽
注：g-gantt-row 的 label 可以把整个对象传递过去，来控制 g-gantt-chart 的 label-column-row 的接受label对象；


  
  

  

  
	
  

5、动态增行

给在 meetingRoomRequestStatusList.value 中 某个会议室的 rowBarList 添加一个进度条属性即可

// 添加会议室单行
const addGanttRow = () => {
  editMeetingRoomRequestStatus.value.rowBarList.push({
    startTime: formData.value.startTime,
    endTime: formData.value.endTime,
    ganttBarConfig: {
      id: formData.value.id,
      label: '当前',
      hasHandles: true,
      immobile: false,
      style: {
        background: "#00ff00",
        borderRadius: "20px",
        color: "black"
      }
    }
  })
}

6 判断点击了哪个会议室的几点

handleChartClick 为实际点击事件，但为了防止拖拽事件和点击事件的冲突
所以： 使用变量 isDragging + 3个事件，来避免误判；