vue3-ganttchart v1.0.3

安装

npm install vue3-ganttchart

使用实例

<template>
  <div class="">
    <GanttChart :rows="rows" />
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { v4 as uuidv4 } from 'uuid'
import GanttChart from 'vue3-ganttchart/GanttChart.vue'

const rows = [
  {
    label: '自定义标题',
    highlightOnHover: true,
    bars: [
      {
        beginDate: dayjs().hour(1).startOf('hour').format('YYYY-MM-DD HH:mm'),
        endDate: dayjs().add(2, 'day').hour(19).startOf('hour').format('YYYY-MM-DD HH:mm'),
        ganttBarConfig: {
          id: uuidv4(),
          // label: "I'm in a bundle",
          bundle: 'bundle2',
          html: '<h5>作为科技</h5>',
          hasHandles: true,
        },
        // drop: (e) => {
        //   console.log(e)
        // },
      },
    ],
  },
  {
    label: '自定义标题2',
    highlightOnHover: true,
    bars: [
      {
        beginDate: dayjs().hour(1).startOf('hour').format('YYYY-MM-DD HH:mm'),
        endDate: dayjs().add(2, 'day').hour(19).startOf('hour').format('YYYY-MM-DD HH:mm'),
        ganttBarConfig: {
          id: uuidv4(),
          label: '遥遥领先',
          bundle: 'bundle2',
          hasHandles: true,
          style: {
            background: '#ccc',
          },
        },
        // drop: (e) => {
        //   console.log(1111, e)
        // },
      },
      {
        beginDate: dayjs().add(4, 'day').hour(0).startOf('hour').format('YYYY-MM-DD HH:mm'),
        endDate: dayjs().add(6, 'day').hour(19).startOf('hour').format('YYYY-MM-DD HH:mm'),
        ganttBarConfig: {
          id: uuidv4(),
          label: 'Lorem ipsum dolor',
          hasHandles: true,
          style: {
            background: '#b74b52',
          },
        },
      },
      {
        beginDate: dayjs().add(7, 'day').hour(4).startOf('hour').format('YYYY-MM-DD HH:mm'),
        endDate: dayjs().add(9, 'day').hour(16).startOf('hour').format('YYYY-MM-DD HH:mm'),
        ganttBarConfig: {
          id: uuidv4(),
          label: 'Oh hey',
          style: {
            background: '#69e064',
            borderRadius: '15px',
            color: 'blue',
            fontSize: '10px',
          },
        },
      },
    ],
  },
  {
    label: '自定义标题3',
    highlightOnHover: true,
    bars: [
      {
        beginDate: dayjs().add(1, 'day').hour(5).startOf('hour').format('YYYY-MM-DD HH:mm'),
        endDate: dayjs().add(3, 'day').hour(10).startOf('hour').format('YYYY-MM-DD HH:mm'),
        ganttBarConfig: {
          id: uuidv4(),
          label: 'Oh hey',
          style: {
            background: '#69e064',
            borderRadius: '15px',
            color: 'blue',
            fontSize: '10px',
          },
        },
      },
      {
        beginDate: '2024-1-15 08:30',
        endDate: '2024-2-20 16:45',
        ganttBarConfig: {
          id: uuidv4(),
          label: 'Updated Bundle',
          bundle: 'bundle3',
          style: {
            background: 'cyan',
          },
        },
      },
      {
        beginDate: '20.02.2024 12:00',
        endDate: '10.03.2024 18:30',
        ganttBarConfig: {
          id: uuidv4(),
          label: 'New Task',
          hasHandles: true,
          style: {
            background: '#f79466',
          },
        },
      },
      {
        beginDate: '25.04.2024 09:15',
        endDate: '30.04.2024 21:00',
        ganttBarConfig: {
          id: uuidv4(),
          label: 'Greetings',
          style: {
            background: '#aabbcc',
            borderRadius: '8px',
            color: 'white',
            fontSize: '12px',
          },
        },
      },
    ],
  },
]
</script>

<style lang="scss" scoped></style>