0.1.3 • Published 1 month ago
react-gantt-lightweight v0.1.3
react-gantt-lightweight
react 轻量级甘特图 目前只能精确到日,月 后期年会加上
Install
npm i react-gantt-lightweight
或者
yarn add react-gantt-lightweight
demo
https://react-gantt.vercel.app/
import { useRef } from "react";
import {
Gantt,
GanttDataProps,
GanttHeadProps,
GanttPropsRefProps,
} from "react-gantt-lightweight";
const list: GanttDataProps[] = [
{
startTime: "2024-03-10 00:00:00",
endTime: "2024-03-30 00:00:00",
finishTime: null,
dept: "技术部",
num: "2人",
time: "2天",
start: false,
time2: "结束时间",
renderHead: () => <div>略略略</div>,
renderoBar: (width, activeWidth, surplusWidth, overtimeWidth) => {
console.log(width + "进度条宽度");
console.log(activeWidth + "选中进度条宽度");
console.log(surplusWidth + "剩余进度条宽度");
console.log(overtimeWidth + "超出的宽度");
return <div></div>;
},
},
{
startTime: "2024-03-11 00:00:00",
endTime: "2024-03-25 12:00:00",
finishTime: null,
dept: "技术部",
num: "2人",
time: "2天",
start: true,
time2: "结束时间",
children: [
{
start: false,
startTime: "2024-03-22 00:00:00",
endTime: "2024-04-20 12:00:00",
finishTime: null,
dept: "前端",
num: "2人",
time: "2天",
time2: "结束时间",
},
],
},
{
startTime: "2024-03-11 00:00:00",
endTime: "2024-03-25 12:00:00",
finishTime: "2024-03-22 00:00:00",
dept: "技术部",
num: "2人",
time: "2天",
start: true,
time2: "结束时间",
},
{
startTime: "2024-03-07 00:00:00",
endTime: "2024-03-27 12:00:00",
finishTime: null,
dept: "技术部",
num: "2人",
time: "2天",
start: true,
time2: "结束时间",
},
{
startTime: "2024-03-11 00:00:00",
endTime: "2024-03-25 12:00:00",
finishTime: "2024-03-27 00:00:00",
dept: "技术部",
num: "2人",
time: "2天",
start: true,
time2: "结束时间",
renderoBar: (width) => {
return (
<div
style={{
fontSize: "12px",
color: "#fff",
paddingLeft: "10px",
width: width + "px",
}}
>
自定义任务内容-哈哈哈哈哈
</div>
);
},
children: [
{
start: true,
startTime: "2024-03-12 00:00:00",
endTime: "2024-03-19 12:00:00",
finishTime: "2024-03-15 12:00:00",
renderHeadChild: () => <div>自定义render</div>,
renderoBar: () => {
return <div> 任务标题</div>;
},
dept: "前端",
num: "2人",
time: "2天",
time2: "结束时间",
},
{
start: true,
startTime: "2024-03-13 00:00:00",
endTime: "2024-03-24 17:00:00",
finishTime: "2024-03-29 12:00:00",
dept: "前端",
num: "2人",
time: "2天",
time2: "结束时间",
},
{
start: true,
startTime: "2024-04-13 09:00:00",
endTime: "2024-04-15 17:00:00",
finishTime: null,
dept: "前端",
num: "2人",
time: "2天",
time2: "结束时间",
renderoBar: () => {
return <div> 任务标题</div>;
},
},
{
start: false,
startTime: "2024-04-13 09:00:00",
endTime: "2024-04-15 17:00:00",
finishTime: null,
dept: "前端手收尸",
num: "2人",
time: "2天",
time2: "结束时间",
},
],
},
];
const head: GanttHeadProps[] = [
{
title: "部门",
key: "dept",
},
{
title: "人数",
key: "num",
},
{
title: "已用工时",
},
{
title: "任务时间",
},
];
function App() {
const ganttRef = useRef < GanttPropsRefProps > null;
return (
<div>
<Gantt height="400px" data={list} head={head} ref={ganttRef} />
<button
onClick={() => {
ganttRef.current?.initGantt();
}}
>
刷新
</button>
</div>
);
}
export default App;