@bos-alpha/progress/lib/components/simulate/index.js

进度管理

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);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Row, Col, Table } from 'antd';
import dayjs from 'dayjs';
import styled from '@emotion/styled';
import { prefixCls } from '@bos-alpha/common';
import { Model3d } from '../model3d';
import { Gantt } from '../gantt';
import { ProgressPlay } from '../progress-play';
import { getListBeyondLevel, loopQuery, getAllKeys } from '../manage';
// 进度模拟 3D模型 + 进度播放 + 任务表格 + 甘特图
export var Simulate = function (_a) {
    var isLoading = _a.isLoading, tableData = _a.tableData;
    // 模块显隐
    var _b = useState(['model3d', 'tasks', 'gantt']), modules = _b[0], setModules = _b[1];
    // 进度模拟时 甘特图播放的天数（偏移量）
    var _c = useState(0), days = _c[0], setDays = _c[1];
    // 进度模拟时 当前时间节点
    var _d = useState(0), curSimuTime = _d[0], setCurSimuTime = _d[1];
    // 展开的key
    var _e = useState([]), expandedRowKeys = _e[0], setExpandedRowKeys = _e[1];
    // 所有任务key
    var _f = useState([]), allKeys = _f[0], setAllKeys = _f[1];
    // 当前可见的表格任务数据 前端分页
    var _g = useState([]), taskList = _g[0], setTaskList = _g[1];
    useEffect(function () {
        var allKeys = getAllKeys(tableData);
        // 任务数超过1000才特殊处理
        if (allKeys.length > 1000) {
            var list = getListBeyondLevel(tableData, 1);
            var level0Keys = list.map(function (item) { return item.key; });
            setTaskList(list);
            setExpandedRowKeys(level0Keys);
        }
        else {
            setTaskList(tableData);
            setExpandedRowKeys(allKeys);
        }
        setAllKeys(allKeys);
    }, [tableData]); // eslint-disable-line
    var time2date = function (time) {
        return time ? dayjs(Number(time)).format('YYYY/MM/DD') : '';
    };
    var columns = [
        {
            title: '任务名称',
            dataIndex: 'name'
        },
        {
            title: '编号',
            dataIndex: 'code'
        },
        {
            title: '完成进度',
            dataIndex: 'progress',
            render: function (progress) { return (progress ? progress : ''); }
        },
        {
            title: '计划开始时间',
            dataIndex: 'planStartTime',
            render: function (time) { return time2date(time); }
        },
        {
            title: '计划结束时间',
            dataIndex: 'planEndTime',
            render: function (time) { return time2date(time); }
        },
        {
            title: '实际开始时间',
            dataIndex: 'startTime',
            inputType: 'datePicker',
            editable: true,
            render: function (time) { return time2date(time); }
        },
        {
            title: '实际结束时间',
            dataIndex: 'endTime',
            inputType: 'datePicker',
            editable: true,
            render: function (time) { return time2date(time); }
        }
    ];
    // 展开树
    var onExpand = function (expanded, record) {
        // 总任务数小于1000时，不作特殊处理
        if (allKeys.length < 1000) {
            var keys_1 = expanded
                ? __spreadArray(__spreadArray([], expandedRowKeys, true), [record.key], false) : expandedRowKeys.filter(function (key) { return record.key !== key; });
            setExpandedRowKeys(keys_1);
            return;
        }
        // 收集所有被关闭的子节点key
        var closedKeys = [];
        if (!expanded && record.children) {
            var loop_1 = function (list) {
                return list.forEach(function (item) {
                    if (item.children) {
                        closedKeys.push(item.key);
                        loop_1(item.children);
                    }
                });
            };
            closedKeys.push(record.key);
            loop_1(record.children);
        }
        // 展开时，关闭同级节点
        // 关闭时，关闭所有子节点树
        var keys = [];
        if (expanded) {
            keys = __spreadArray(__spreadArray([], expandedRowKeys, true), [record.key], false);
            var curLevel = parseInt(record.level);
            if (curLevel > 0) {
                // 兄弟同级keys
                var sameLevelKeys_1 = getAllKeys(tableData, curLevel).filter(function (key) { return key !== record.key; });
                keys = keys.filter(function (key) { return sameLevelKeys_1.indexOf(key) < 0; });
            }
        }
        else {
            keys = expandedRowKeys.filter(function (key) { return closedKeys.indexOf(key) < 0; });
        }
        // 只获取下两级节点
        var curItem = loopQuery(tableData, record.key);
        var loop = function (list) {
            return list.map(function (el) {
                if (el.key === record.key) {
                    return __assign(__assign({}, el), { children: getListBeyondLevel(curItem === null || curItem === void 0 ? void 0 : curItem.children, parseInt(curItem.level) + (expanded ? 1 : 0)) });
                }
                if (el.children) {
                    return __assign(__assign({}, el), { children: loop(el.children) });
                }
                return el;
            });
        };
        setTaskList(loop(taskList));
        setExpandedRowKeys(keys);
    };
    return (_jsxs("div", { children: [_jsx(Model3d, { tableData: tableData, curSimuTime: curSimuTime, onPanelChange: function (panelKeys) { return setModules(panelKeys); } }, void 0), _jsx(ProgressPlay, { tableData: tableData, onChange: function (daysNum, curTime) {
                    setDays(daysNum);
                    setCurSimuTime(curTime);
                } }, void 0), _jsxs(Row, { children: [_jsx(Col, __assign({ span: 16 }, { children: _jsx(TableContent, __assign({ style: {
                                display: modules.indexOf('tasks') < 0 ? 'none' : 'block'
                            } }, { children: _jsx(Table, { rowKey: "key", size: "small", bordered: true, columns: columns, loading: isLoading, dataSource: taskList, expandable: {
                                    expandedRowKeys: expandedRowKeys,
                                    onExpand: onExpand
                                }, scroll: {
                                    x: 'max-content',
                                    y: 480
                                }, pagination: false }, void 0) }), void 0) }), void 0), _jsx(Col, __assign({ span: 8, style: {
                            display: modules.indexOf('gantt') < 0 ? 'none' : 'block'
                        } }, { children: _jsx(Gantt, { pageMode: "simulate", tableData: tableData, days: days }, void 0) }), void 0)] }, void 0)] }, void 0));
};
var TableContent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .", "-table {\n        color: rgba(0, 0, 0, 0.65);\n        font-size: 14px;\n        font-variant: tabular-nums;\n        line-height: 1.5;\n    }\n    .", "-table .cell {\n        white-space: nowrap;\n    }\n    .", "-table-thead > tr > th {\n        white-space: nowrap;\n        color: rgba(0, 0, 0, 0.85);\n        font-weight: 400;\n        background: #fafafa;\n        border-bottom: 1px solid #e8e8e8;\n        -webkit-transition: background 0.3s ease;\n        transition: background 0.3s ease;\n    }\n    .", "-table-thead > tr > th,\n    .", "-table-tbody > tr > td {\n        min-width: 70px;\n    }\n    .", "-table-body::-webkit-scrollbar {\n        -webkit-appearance: none;\n    }\n    .", "-table-body::-webkit-scrollbar:vertical {\n        width: 6px;\n    }\n    .", "-table-body::-webkit-scrollbar:horizontal {\n        height: 6px;\n    }\n    .", "-table-body::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        border: 6px solid rgba(255, 255, 255, 0.4);\n        background-color: rgba(0, 0, 0, 0.5);\n    }\n"], ["\n    .", "-table {\n        color: rgba(0, 0, 0, 0.65);\n        font-size: 14px;\n        font-variant: tabular-nums;\n        line-height: 1.5;\n    }\n    .", "-table .cell {\n        white-space: nowrap;\n    }\n    .", "-table-thead > tr > th {\n        white-space: nowrap;\n        color: rgba(0, 0, 0, 0.85);\n        font-weight: 400;\n        background: #fafafa;\n        border-bottom: 1px solid #e8e8e8;\n        -webkit-transition: background 0.3s ease;\n        transition: background 0.3s ease;\n    }\n    .", "-table-thead > tr > th,\n    .", "-table-tbody > tr > td {\n        min-width: 70px;\n    }\n    .", "-table-body::-webkit-scrollbar {\n        -webkit-appearance: none;\n    }\n    .", "-table-body::-webkit-scrollbar:vertical {\n        width: 6px;\n    }\n    .", "-table-body::-webkit-scrollbar:horizontal {\n        height: 6px;\n    }\n    .", "-table-body::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        border: 6px solid rgba(255, 255, 255, 0.4);\n        background-color: rgba(0, 0, 0, 0.5);\n    }\n"])), prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls);
var templateObject_1;