mirror of https://gitee.com/cf-fz/WebCAD.git
!2459 新增: 线程执行运算时添加进度条
张子涵
11 months ago
committed by
ChenX
parent
31449f394c
commit
9ba89592cc
@ -0,0 +1,96 @@
|
||||
.TaskState {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.task_process {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
cursor: default;
|
||||
|
||||
.gap {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.color_red {
|
||||
color: #f00;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.color_green {
|
||||
color: #0c5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.abstract {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
background: #456;
|
||||
color: #eee;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.expand {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.expand:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
overflow-y: auto;
|
||||
width: 400px;
|
||||
max-height: 300px;
|
||||
background: #eee;
|
||||
color: #333;
|
||||
|
||||
.task {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
background: #dfe;
|
||||
border-bottom: 1px solid #5b5;
|
||||
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.stop {
|
||||
cursor: pointer;
|
||||
padding: 2px 5px;
|
||||
background: #d44;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.stop:hover {
|
||||
background: #f55;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.queue {
|
||||
background: #fed;
|
||||
border-color: #f55;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import TaskState from './TaskState';
|
||||
|
||||
export default class TaskStateManage
|
||||
{
|
||||
private _TaskStateContainer: HTMLElement;
|
||||
constructor()
|
||||
{
|
||||
this._TaskStateContainer = document.createElement('div');
|
||||
this._TaskStateContainer.id = 'TaskState';
|
||||
document.getElementById('Webgl').appendChild(this._TaskStateContainer);
|
||||
}
|
||||
|
||||
RenderTaskState()
|
||||
{
|
||||
ReactDOM.render(<TaskState />, this._TaskStateContainer);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,128 @@
|
||||
import { observable } from "mobx";
|
||||
import { end } from "xaop";
|
||||
import { Task } from "../../../Common/ThreadPool/Task";
|
||||
import { WORKER_POOL } from "../../../Common/ThreadPool/WorkerPool";
|
||||
|
||||
export interface TaskItem
|
||||
{
|
||||
id: any;
|
||||
name: string;
|
||||
time: number;
|
||||
}
|
||||
|
||||
export default class TaskStore
|
||||
{
|
||||
/** 正在执行的列表 */
|
||||
@observable workerList = [] as TaskItem[];
|
||||
/** 剩余任务的列表 */
|
||||
@observable taskList = [] as TaskItem[];
|
||||
/** 定时器 */
|
||||
timed;
|
||||
/** 是否关闭 */
|
||||
isClose = true;
|
||||
|
||||
/** 更新运行时间 */
|
||||
UpdateTime = () =>
|
||||
{
|
||||
if (this.timed) clearInterval(this.timed);
|
||||
if (this.isClose) return;
|
||||
this.timed = setInterval(() =>
|
||||
{
|
||||
this.workerList = this.workerList.map(e =>
|
||||
{
|
||||
return {
|
||||
...e,
|
||||
time: ++e.time
|
||||
};
|
||||
});
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
/** 获取任务列表 */
|
||||
GetTaskList = (task?: Task) =>
|
||||
{
|
||||
// 1.拿到线程池中的任务列表
|
||||
const taskList = WORKER_POOL.Pool.filter(e => !!e.task).map(e => e.task);
|
||||
// 2.映射成监视器所需的数据
|
||||
const workerList = taskList.map(task =>
|
||||
{
|
||||
const item = this.workerList.find(e => e.id.key === task.key && e.id.workerCtor === task.workerCtor);
|
||||
return {
|
||||
id: {
|
||||
key: task.key,
|
||||
workerCtor: task.workerCtor,
|
||||
},
|
||||
name: task.key.Name as string,
|
||||
// 同步运行时间
|
||||
time: item ? item.time : 0,
|
||||
};
|
||||
});
|
||||
this.workerList = workerList;
|
||||
// 更换任务时，重置时间
|
||||
if (task)
|
||||
{
|
||||
const item = this.workerList.find(e => e.id.key === task.key && e.id.workerCtor === task.workerCtor);
|
||||
if (item) item.time = 0;
|
||||
}
|
||||
// 剩余任务
|
||||
const taskQueue = WORKER_POOL.TaskQueue.map(task =>
|
||||
{
|
||||
return {
|
||||
id: {
|
||||
key: task.key,
|
||||
workerCtor: task.workerCtor,
|
||||
},
|
||||
name: task.key.Name as string,
|
||||
time: 0,
|
||||
};
|
||||
});
|
||||
this.taskList = taskQueue;
|
||||
// 开始计时
|
||||
this.UpdateTime();
|
||||
// 没任务了，倒计时关闭
|
||||
if (this.workerList.length === 0 && this.taskList.length === 0)
|
||||
{
|
||||
setTimeout(() =>
|
||||
{
|
||||
if (this.workerList.length === 0 && this.taskList.length === 0)
|
||||
this.isClose = true;
|
||||
}, 1000);
|
||||
}
|
||||
else this.isClose = false;
|
||||
};
|
||||
|
||||
private static _SingleInstance: TaskStore;
|
||||
static GetInstance(): TaskStore
|
||||
{
|
||||
if (this._SingleInstance) return this._SingleInstance;
|
||||
this._SingleInstance = new TaskStore();
|
||||
return this._SingleInstance;
|
||||
}
|
||||
}
|
||||
|
||||
// 注入
|
||||
end(WORKER_POOL.AppendEvent, (task: Task) =>
|
||||
{
|
||||
const taskStore = TaskStore.GetInstance();
|
||||
taskStore.GetTaskList();
|
||||
});
|
||||
end(WORKER_POOL.ExecuteEvent, (task: Task) =>
|
||||
{
|
||||
const taskStore = TaskStore.GetInstance();
|
||||
taskStore.GetTaskList();
|
||||
});
|
||||
end(WORKER_POOL.UpdateEvent, (task: Task) =>
|
||||
{
|
||||
const taskStore = TaskStore.GetInstance();
|
||||
taskStore.GetTaskList(task);
|
||||
});
|
||||
end(WORKER_POOL.StopEvent, (task: Task) =>
|
||||
{
|
||||
const taskStore = TaskStore.GetInstance();
|
||||
taskStore.GetTaskList();
|
||||
});
|
||||
end(WORKER_POOL.CloseEvent, (task: Pick<Task, "key" | "workerCtor">) =>
|
||||
{
|
||||
const taskStore = TaskStore.GetInstance();
|
||||
taskStore.GetTaskList();
|
||||
});
|
||||
Loading…
Reference in new issue