@bos-alpha/progress
Version:
进度管理
162 lines (161 loc) • 8.76 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, DatePicker, Row, Col, Slider } from 'antd';
import dayjs from 'dayjs';
import moment from 'moment';
import styled from '@emotion/styled';
import { Icon, prefixCls } from '@bos-alpha/common';
var Option = Select.Option;
/**
* 进度模拟播放 1.对3D模型当前时间节点高亮构件 2.对甘特图进行操作（按天滚动）
* @param tableData 进度模拟表格数据
*/
export var ProgressPlay = function (_a) {
var tableData = _a.tableData, onChange = _a.onChange;
// 甘特图时间节段数
var _b = useState(1), stepUnit = _b[0], setStepUnit = _b[1];
// 时间区间
var _c = useState(0), timeStart = _c[0], setTimeStart = _c[1];
var _d = useState(0), timeEnd = _d[0], setTimeEnd = _d[1];
// 滑块下标
var _e = useState({}), sliderMarks = _e[0], setSliderMarks = _e[1];
// 滑块每段时间数值跨度 步长 【此数值必须可被 (max - min) 整除 不然Slider会卡死】
var _f = useState(1), perStep = _f[0], setPerStep = _f[1];
// 当前步级 值为时间戳
var _g = useState(0), curStep = _g[0], setCurStep = _g[1];
// 正在模拟中
var _h = useState(false), playing = _h[0], setPlaying = _h[1];
// 定时器
var timer = useRef(0);
// 计算出时间轴最小最大值
useEffect(function () {
var initRange = getRange(tableData, 10445241600000, 0);
var start = initRange[0];
var end = initRange[1];
setTimeStart(start);
setTimeEnd(end);
setCurStep(start);
setPerStep(end - start);
onChange && onChange(0, start);
}, [tableData]); // eslint-disable-line react-hooks/exhaustive-deps
// 根据任务进度 获取时间最小最大
var getRange = function (list, min, max) {
var _min = min;
var _max = max;
if (list.length === 0) {
_min = dayjs().valueOf();
_max = dayjs().add(1, 'day').valueOf();
}
else {
list.forEach(function (task) {
if (task.planStartTime < _min)
_min = task.planStartTime;
if (task.startTime < _min)
_min = task.startTime;
if (task.planEndTime > _max)
_max = task.planEndTime;
if (task.endTime > _max)
_max = task.endTime;
if (task.children) {
var _range = getRange(task.children, _min, _max);
if (_range[0] < _min)
_min = _range[0];
if (_range[1] > _max)
_max = _range[1];
}
});
}
return [_min, _max];
};
// 时间区间变化 重置每步时间跨度 和 每步底部时间节点 和 时间节段数
useEffect(function () {
if (timeStart === 0)
return;
setStepUnit(1);
setSliderInfo(1);
return function () { return clearInterval(timer.current); };
}, [timeStart, timeEnd]); // eslint-disable-line
// 设置跨度和marks
var setSliderInfo = function (unit) {
var perSteps = Math.floor((timeEnd - timeStart) / unit);
var marks = {};
for (var i = timeStart; i <= timeEnd; i += perSteps) {
marks[i] = dayjs(i).format('YYYY-MM-DD');
}
setPerStep(perSteps);
setSliderMarks(marks);
};
// 设置时间节段数
var onStepUnitChange = function (val) {
setStepUnit(val);
setSliderInfo(val);
};
// 步级发生变化，计算天数 通知甘特图滚动
useEffect(function () {
if (timeStart === 0)
return;
var days = dayjs(curStep).diff(timeStart, 'day');
onChange && onChange(days, curStep);
}, [curStep]); // eslint-disable-line
// 暂停播放
var onPlayPause = function () {
setPlaying(false);
if (timer.current)
clearInterval(timer.current);
};
// 开始播放
var onPlayStart = function () {
if (timer.current)
clearInterval(timer.current);
var startTime = curStep;
timer.current = window.setInterval(function () {
if (startTime >= timeEnd) {
clearInterval(timer.current);
// 回到起点
setCurStep(timeStart);
setPlaying(false);
}
else {
// 注意 此处引用需要用函数获取最新state
setCurStep(function (curS) {
startTime = curS + perStep;
return startTime;
});
}
}, 1000);
setPlaying(true);
};
// 日期区间发生变化
var onDateChange = function (ranges) {
if (!ranges)
return;
var start = ranges[0], end = ranges[1];
setTimeStart(start.valueOf());
setTimeEnd(end.valueOf());
};
// 时间跨度的天数 用于限制分段选项
var rangeDays = dayjs(timeEnd).diff(timeStart, 'day');
return (_jsxs(Container, { children: [_jsx("div", { className: "grey-blank" }, void 0), _jsxs(Row, { children: [_jsx(Col, __assign({ span: 8 }, { children: _jsx("div", __assign({ className: "play-btn" }, { children: playing ? (_jsx(CustomIcon, { type: "iconicon_pauseupload-01", onClick: onPlayPause }, void 0)) : (_jsx(CustomIcon, { type: "iconicon_function", onClick: onPlayStart }, void 0)) }), void 0) }), void 0), _jsxs(Col, __assign({ span: 8 }, { children: [_jsx("span", { children: "\u6A21\u62DF\u65F6\u6BB5\uFF1A" }, void 0), timeStart ? (
// @ts-ignore
_jsx(DatePicker.RangePicker, { disabled: playing, defaultValue: [moment(timeStart), moment(timeEnd)], onChange: onDateChange }, void 0)) : null] }), void 0), _jsxs(Col, __assign({ span: 8 }, { children: [_jsx("span", { children: "\u65F6\u95F4\u8282\u6BB5\u6570\u9009\u62E9\uFF1A" }, void 0), _jsx(Select, __assign({ disabled: playing, value: stepUnit, onChange: onStepUnitChange }, { children: [1, 5, 10, 20, 30].map(function (item) { return (_jsx(Option, __assign({ value: item, disabled: rangeDays < item }, { children: item }), item)); }) }), void 0)] }), void 0)] }, void 0), _jsx("div", __assign({ className: "slider" }, { children: timeStart > 0 && perStep > 0 ? (_jsx(Slider, { dots: true, min: timeStart, max: timeEnd, step: perStep, marks: sliderMarks, tipFormatter: function (date) {
return dayjs(date).format('YYYY-MM-DD');
}, value: curStep, onChange: function (value) { return setCurStep(value); } }, void 0)) : null }), void 0)] }, void 0));
};
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-top: 20px;\n .grey-blank {\n height: 4px;\n background-color: #eee;\n margin-bottom: 20px;\n }\n .play-btn {\n text-align: center;\n .anticon {\n display: flex;\n align-items: center;\n }\n }\n .slider {\n padding: 0 40px 50px;\n .", "-slider-mark-text {\n white-space: nowrap;\n }\n }\n"], ["\n padding-top: 20px;\n .grey-blank {\n height: 4px;\n background-color: #eee;\n margin-bottom: 20px;\n }\n .play-btn {\n text-align: center;\n .anticon {\n display: flex;\n align-items: center;\n }\n }\n .slider {\n padding: 0 40px 50px;\n .", "-slider-mark-text {\n white-space: nowrap;\n }\n }\n"])), prefixCls);
var CustomIcon = styled(Icon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: inherit;\n justify-content: center;\n font-size: 24px;\n height: 34px;\n cursor: pointer;\n"], ["\n color: inherit;\n justify-content: center;\n font-size: 24px;\n height: 34px;\n cursor: pointer;\n"])));
var templateObject_1, templateObject_2;