@bos-alpha/progress
Version:
进度管理
107 lines (106 loc) • 5.38 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { Select } from 'antd';
import dayjs from 'dayjs';
import FrappeGantt from 'frappe-gantt-bigdata';
import styled from '@emotion/styled';
import 'frappe-gantt-bigdata/dist/gantt.css';
// 甘特图svg横向滚动条移动一天偏移38px
var GANTT_DAY_STEP = 38;
/**
*
* 甘特图 按计划时间
进度管理时模型按年 可手动调整
进度模拟时只能按天 通过scrollLeft按天滚动预览
* @returns
*/
export var Gantt = function (_a) {
var pageMode = _a.pageMode, tableData = _a.tableData, _b = _a.days, days = _b === void 0 ? 0 : _b;
var ganttCon = useRef();
var ganttRef = useRef();
var _c = useState([]), tasks = _c[0], setTasks = _c[1];
// 页面使用类型 进度管理 or 进度模拟，进度模拟没有时间模式选择
var _d = useState(pageMode === 'manage' ? 'Year' : 'Day'), viewMode = _d[0], setviewMode = _d[1];
// 初始化时容器scrollLeft值 用于后期按天向右滚动
var initScrollLeft = useRef(0);
useEffect(function () {
setTasks(loopParse(tableData));
}, [tableData]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(function () {
ganttInit();
}, [tasks, viewMode]); // eslint-disable-line react-hooks/exhaustive-deps
// table数据转甘特图数据
var loopParse = function (list) {
var listData = [];
list.forEach(function (item) {
listData.push({
id: item.key,
name: item.name,
start: dayjs(item.planStartTime).format('YYYY-MM-DD'),
end: dayjs(item.planEndTime).format('YYYY-MM-DD'),
dependencies: item.parentId && item.parentId.replace(/^wbses\//, ''),
progress: item.progress ? item.progress : 0
});
if (item.children) {
var chilList = loopParse(item.children);
listData.push.apply(listData, chilList);
}
});
return listData;
};
var ganttInit = function () {
if (tasks.length === 0) {
ganttRef.current.innerHTML = '';
return;
}
ganttCon.current = new FrappeGantt(ganttRef.current, tasks, {
header_height: 50,
column_width: 30,
step: 24,
view_modes: ['Week', 'Month', 'Quarter Day'],
bar_height: 20,
bar_corner_radius: 3,
arrow_curve: 5,
padding: 18,
view_mode: viewMode,
language: 'zh'
});
initScrollLeft.current = ganttRef.current.parentNode.scrollLeft;
};
// days变化时，设置scrollLeft滚动甘特图
useEffect(function () {
ganttRef.current.parentNode.scrollLeft =
initScrollLeft.current + days * GANTT_DAY_STEP;
}, [days]); // eslint-disable-line react-hooks/exhaustive-deps
return (_jsxs(Container, { children: [pageMode === 'manage' ? (_jsxs("div", __assign({ className: "mode-select" }, { children: ["\u9009\u62E9\u7518\u7279\u56FE\u5C55\u793A\u65B9\u5F0F\uFF1A", _jsx(Select, { className: "select", defaultValue: "Year", options: [
{
value: 'Year',
label: '年'
},
{
value: 'Month',
label: '月'
},
{
value: 'Week',
label: '周'
}
], onChange: function (mode) { return setviewMode(mode); } }, void 0)] }), void 0)) : null, _jsx("div", __assign({ className: "gantt-content" }, { children: _jsx("svg", { ref: ganttRef }, void 0) }), void 0)] }, void 0));
};
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .mode-select {\n text-align: right;\n padding-bottom: 20px;\n color: #555;\n .select {\n width: 80px;\n }\n }\n .gantt-content {\n max-height: 523px;\n overflow: auto;\n .gantt-container::-webkit-scrollbar {\n display: none;\n }\n }\n"], ["\n .mode-select {\n text-align: right;\n padding-bottom: 20px;\n color: #555;\n .select {\n width: 80px;\n }\n }\n .gantt-content {\n max-height: 523px;\n overflow: auto;\n .gantt-container::-webkit-scrollbar {\n display: none;\n }\n }\n"])));
var templateObject_1;