写一个遍历已完成和未完成任务

已于 2022-07-19 15:18:45 修改
阅读量112 收藏
点赞数
文章标签： 前端 typescript react
于 2022-07-19 14:33:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45639351/article/details/125871256
版权

写一个遍历已完成和未完成任务

效果图
在这里插入图片描述
封装一个自动耗时

import { RunStatus } from '@/enums/RunStatus';
import { useEffect, useState } from '@alipay/bigfish/react';
import moment from 'moment';

/**
 * 自动输出任务执行耗时
 * @param runHistory
 */
export const useTaskDuration = (
  runHistory: { GmtCreateTime?: string; Status?: RunStatus } = {},
) => {
  const [countUp, setCountUp] = useState<number>(0);

  // 设置时间(获得的是当时的时间)
  useEffect(() => {
    if (runHistory.GmtCreateTime) {
      setCountUp(new Date(runHistory.GmtCreateTime).getTime());
    }
  }, [runHistory.GmtCreateTime]);

  // 如果状态是运行中, 启动定时器
  useEffect(() => {
    if (runHistory.Status === RunStatus.Running) {
      const timer = window.setInterval(() => {
        setCountUp((prevState) => prevState + 1);
      }, 1000);

      return () => window.clearInterval(timer);
    }
    return;
  }, [runHistory.Status]);
  // console.log('moment',moment());
  const duration = moment.duration(moment().diff(moment(countUp)));

  return `${duration.hours() !== 0 ? duration.hours() + '小时' : ''} ${duration.minutes()}分${duration.seconds()}秒`;
};

封装一个TaskDetail

const TaskDetail = (props: { row: RunHistory; stopCB?: CallableFunction }) => {
  const runHistory = props.row;
  const durationText = useTaskDuration(runHistory);

  return (
    <Row
      className={CX([styles.row, runHistory.RunMode === RunMode.DEBUG && styles.clickable])}
      onClick={() => onDetailClick(runHistory)}
      align={'middle'}
      justify={'space-between'}
    >
      <Col style={{ display: 'flex' }}>
        <Tag color={runHistory.RunMode === RunMode.ROUNDED ? 'blue' : 'magenta'}>
          {getRunHistoryTypeName(runHistory)}
        </Tag>
        <SingleLineWrap title={runHistory.Name} width={150} />
      </Col>
      <Col style={{ display: 'flex', alignItems: 'center' }}>
        {runHistory.Status === RunStatus.Running && (
          <>
            <LoadingOutlined style={{ color: '#1890ff', marginRight: 8 }} />
            <span style={{ color: '#1890ff' }}>{durationText}</span>
            <Popconfirm
              okText={'确认'}
              cancelText={'取消'}
              onConfirm={() => {
                RunService.StopRun(runHistory.Id).then(() => {
                  message.success('终止运行成功');
                  props.stopCB?.();
                });
              }}
              title={'您确定要终止运行任务吗？这个操作一旦执行就不能撤回。'}
            >
              <Button
                type={'text'}
                className={styles.hoverButton}
                danger
                onClick={(event) => event.stopPropagation()}
                icon={<CloseOutlined />}
              />
            </Popconfirm>
          </>
        )}
        {runHistory.Status === RunStatus.Success && (
          <Badge {...statusValueBadge[RunStatus.Success]} />
        )}
        {runHistory.Status === RunStatus.Failed && (
          <Badge {...statusValueBadge[RunStatus.Failed]} />
        )}
      </Col>
    </Row>
  );
};

导出

在这里插入代码片

export const RunningTaskList: React.FC = () => {
  const { data, refresh, mutate } = useRequest(RunService.ListUserScriptRun);
  console.log('useRequest(RunService.ListUserScriptRun)',useRequest(RunService.ListUserScriptRun));

  useEffect(() => {
    const timmer = window.setInterval(() => {
      if (getWorkspaceId()) {
        refresh();
      }
    }, 10_000);

    return () => window.clearInterval(timmer);
  }, [getWorkspaceId(), refresh]);

  const { TabPane } = Tabs;
  const content = (
    <Tabs className={styles.tabs} defaultActiveKey="1" style={{ width: 500 }}>
      <TabPane tab="进行中" key="1">
        {data?.RunningScripts?.map((row, index) => (
          <TaskDetail
            key={row.Id}
            row={row}
            stopCB={() => {
              data.RunningScripts[index].Status = RunStatus.Failed;
              mutate({
                ...data,
              });
            }}
          />
        ))}
      </TabPane>
      <TabPane tab="已完成" key="2">
        {data?.RecentFinished?.map((row) => (
          <TaskDetail row={row} key={row.Id} />
        ))}
      </TabPane>
    </Tabs>
  );

  return (
    <span style={{ paddingRight: '8px' }}>
      <Badge count={data?.RunningScripts?.length || 0} style={{ background: '#1890ff' }}>
        <Popover
          placement="bottomRight"
          content={content}
          overlayClassName={styles.popup}
          trigger="click"
        >
          <Button size="small" className={styles.TaskCountBtn}>
            <UnorderedListOutlined />
          </Button>
        </Popover>
      </Badge>
    </span>
  );
};

全部代码

import { SingleLineWrap } from '@/components/SingleLineWrap';
import { RunsPath, StrategyBacktestPath } from '@/constants/paths';
import { DevMode } from '@/enums/DevMode';
import { RunMode } from '@/enums/RunMode';
import { RunStatus } from '@/enums/RunStatus';
import { statusValueBadge } from '@/enums/StatusValueBadge';
import { RunService } from '@/services/Run/RunService';
import type { RunHistory } from '@/typings/RunHistory';
import { getWorkspaceId } from '@/utils/url';
import { useTaskDuration } from '@/utils/useTaskDuration';
import { history, useRequest } from '@alipay/bigfish';
import { Badge, Button, message, Popconfirm, Popover, Tabs, Tag } from '@alipay/bigfish/antd';
import { LoadingOutlined, UnorderedListOutlined } from '@alipay/bigfish/icons';
import { CloseOutlined } from '@alipay/tech-ui/icons';
import { Col, Row } from 'antd';
import CX from 'classnames';
import React, { useEffect } from 'react';
import styles from './index.less';

const getRunHistoryTypeName = (row: RunHistory) => {
  switch (row.DevMode) {
    default:
      if (row.RunMode === RunMode.ROUNDED) {
        return '完整运行';
      } else {
        return '调试运行';
      }
    case DevMode.Strategy:
      if (row.RunMode === RunMode.ROUNDED) {
        return '回测';
      } else {
        return '调试运行';
      }
  }
};

const onDetailClick = (row: RunHistory) => {
  if (row.RunMode === RunMode.DEBUG) {
    return;
  }
  switch (row.DevMode) {
    case DevMode.DataScript:
    case DevMode.Standard:
    case DevMode.Free:
      history.push(RunsPath(row.Id));
      break;
    case DevMode.Strategy:
      history.push(StrategyBacktestPath(row.ScriptCode, row.Id));
  }
};

const TaskDetail = (props: { row: RunHistory; stopCB?: CallableFunction }) => {
  const runHistory = props.row;
  const durationText = useTaskDuration(runHistory);

  return (
    <Row
      className={CX([styles.row, runHistory.RunMode === RunMode.DEBUG && styles.clickable])}
      onClick={() => onDetailClick(runHistory)}
      align={'middle'}
      justify={'space-between'}
    >
      <Col style={{ display: 'flex' }}>
        <Tag color={runHistory.RunMode === RunMode.ROUNDED ? 'blue' : 'magenta'}>
          {getRunHistoryTypeName(runHistory)}
        </Tag>
        <SingleLineWrap title={runHistory.Name} width={150} />
      </Col>
      <Col style={{ display: 'flex', alignItems: 'center' }}>
        {runHistory.Status === RunStatus.Running && (
          <>
            <LoadingOutlined style={{ color: '#1890ff', marginRight: 8 }} />
            <span style={{ color: '#1890ff' }}>{durationText}</span>
            <Popconfirm
              okText={'确认'}
              cancelText={'取消'}
              onConfirm={() => {
                RunService.StopRun(runHistory.Id).then(() => {
                  message.success('终止运行成功');
                  props.stopCB?.();
                });
              }}
              title={'您确定要终止运行任务吗？这个操作一旦执行就不能撤回。'}
            >
              <Button
                type={'text'}
                className={styles.hoverButton}
                danger
                onClick={(event) => event.stopPropagation()}
                icon={<CloseOutlined />}
              />
            </Popconfirm>
          </>
        )}
        {runHistory.Status === RunStatus.Success && (
          <Badge {...statusValueBadge[RunStatus.Success]} />
        )}
        {runHistory.Status === RunStatus.Failed && (
          <Badge {...statusValueBadge[RunStatus.Failed]} />
        )}
      </Col>
    </Row>
  );
};

export const RunningTaskList: React.FC = () => {
  const { data, refresh, mutate } = useRequest(RunService.ListUserScriptRun);
  console.log('useRequest(RunService.ListUserScriptRun)',useRequest(RunService.ListUserScriptRun));

  useEffect(() => {
    const timmer = window.setInterval(() => {
      if (getWorkspaceId()) {
        refresh();
      }
    }, 10_000);

    return () => window.clearInterval(timmer);
  }, [getWorkspaceId(), refresh]);

  const { TabPane } = Tabs;
  const content = (
    <Tabs className={styles.tabs} defaultActiveKey="1" style={{ width: 500 }}>
      <TabPane tab="进行中" key="1">
        {data?.RunningScripts?.map((row, index) => (
          <TaskDetail
            key={row.Id}
            row={row}
            stopCB={() => {
              data.RunningScripts[index].Status = RunStatus.Failed;
              mutate({
                ...data,
              });
            }}
          />
        ))}
      </TabPane>
      <TabPane tab="已完成" key="2">
        {data?.RecentFinished?.map((row) => (
          <TaskDetail row={row} key={row.Id} />
        ))}
      </TabPane>
    </Tabs>
  );

  return (
    <span style={{ paddingRight: '8px' }}>
      <Badge count={data?.RunningScripts?.length || 0} style={{ background: '#1890ff' }}>
        <Popover
          placement="bottomRight"
          content={content}
          overlayClassName={styles.popup}
          trigger="click"
        >
          <Button size="small" className={styles.TaskCountBtn}>
            <UnorderedListOutlined />
          </Button>
        </Popover>
      </Badge>
    </span>
  );
};
weixin_45639351
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python——列表的遍历操作
m0_73622195的博客
09-01 713
拆包 列表推导式
遍历列表python_python列表的遍历与循环
weixin_39719042的博客
11-23 370
在游戏中，可能需要将每个界面元素平移相同的距离；对于包含数字的列表，可能需要对每个元素执行相同的统计运算；在网站中，可能需要显示文章列表中的每个标题。经常需要遍历列表的所有元素，对每个元素执行相同的操作。需要对列表中的每个元素都执行相同的操作时，可使用Python中的for循环。遍历整个列表假设有一个魔术师名单，需要将其中每个魔术师的名字都打印出来。为此，可以分别获取名单中的每个名字，但这种做法会...
力扣 5856. 完成任务的最少工作时间段
csdn_muxin的博客
08-29 366
题目来源：https://leetcode-cn.com/problems/minimum-number-of-work-sessions-to-finish-the-tasks/ 大致题意： 给定一个任务耗时数组和一个任务周期。 一个任务只能在一个任务周期中完成，如何分配任务可以得到最少的任务周期。任务周期大于等于单个任务耗时的最大值。 思路 状态DP 令 n 为总任务个数。 使用一个长度为 n 的二进制数来表示分配方案，其中从低位到高位，第 i 位 若为 1，则代表 task[i] 在当前方案中。
无序链表(unordered list)—python实现
Z__legend的博客
08-17 2157
无序链表需要实现的操作： UnorderList()：创建一个空表 add(item)：在表头位置添加一个新的数据项 isEmpty()：是否为空表，返回一个布尔值 size()：返回链表中数据项的个数 search(item)：查找链表中是否存在某个数据项，返回一个布尔值 remove(item)：移除链表中的某个指定数据项，若该数据项不存在，抛出异常 append(item)：在链表末尾的位置添加数据项 insert(position, item)：在指定位置插入数据项，若指定位置大于链表长度，则默认
【数据结构与算法学习笔记-UnorderedList】
floating_heart的博客
04-06 949
本文为学习笔记，感兴趣的读者可在MOOC中搜索《数据结构与算法Python版》或阅读《数据结构（C语言版）》（严蔚敏）。 本文包括无序表Unordered List数据结构的实现。
052803shell未完成1
08-08
3. **退出状态**：在Shell脚本中，`exit`命令用于结束脚本执行，同时可以指定一个状态码，表示脚本的运行结果。通常，0代表成功，非零值表示错误。 4. **位置参数变量**：在Shell脚本中，`$0`到`$9`用于存储命令行...
PHP网站开发项目式教程任务3.pptx
11-13
根据当前页码，这些链接的状态会动态调整，如在第一页时禁用"首页"和"上页"，在最后一页时禁用"下页"和"尾页"。 - **技术实现**：使用`LIMIT` SQL语句来获取每页指定数量的邮件，结合`mysqli_fetch_array()`函数...
数据结构-c语言-带main函数-图7.3-图的遍历-深度优先搜索-递归方法-邻接矩阵-有向图。
06-24
标题提及的“带main函数”表明这是一个完整的C程序，包含了主函数`main()`，它是程序的入口点，负责调用其他函数来完成指定任务。 首先，我们需要了解图数据结构。在这个程序中，图使用邻接矩阵表示。邻接矩阵是一...
图的遍历 数据结构课程设计
06-08
**深度优先搜索（DFS）** 是一种递归的遍历策略，从起始顶点开始，沿着某条路径深入探索，直到达到一个未访问过的顶点，然后回溯到上一个顶点，再选择未访问的邻接顶点进行探索。DFS通常使用栈来辅助实现，标记已...
用链表做一个拥有查找、插入、删除、排序的功能程序
01-06
在这个程序设计任务中，我们使用链表来实现一个具备查找、插入、删除和排序功能的程序。下面将详细阐述各个知识点。 1. **链表结构**： 链表由一系列节点组成，每个节点包含数据和指向下一个节点的指针。在C语言中...
React实现Todolist
playerz的博客
01-25 861
react.js实现todo list
React实现todos
weixin_41105030的博客
04-29 1311
TodoMVC 官网实例 git clone https://github.com/tastejs/todomvc-app-template.git --depth 1 React的配置 可以使用脚手架 cnpm install -g create-react-app create-react-app todos # 支持es6，加上 cnpm install --save-dev babe...
React复习（5）：模块化项目-待办事项表
愤怒的小火柴人
03-03 764
1）可以显示所有代办事项 2）选择显示完成事项 3）选择显示未完成事项 4）点击删除，删除当前事项 5）点击待办事项内容，可以在完成和未完成间转换，画了横线表示完成了 6）上方可以添加代办事项
Visionpro如何编写工具块(ToolBlock)脚本
钢铁男儿
09-23 4175
在脚本中添加相应代码便可显示相应字符： VisionPro中添加如下工具并建立链接： 脚本中添加变量Radius、CogFindCircleToolObject、myCircle如下： #region Private Member Variables private Cognex.VisionPro.ToolBlock.CogToolBlock mToolBlock; private double Radius = 0; pri
VisionPro初始化 - C#
weixin_42252652的博客
12-26 1453
private void InitialVison() { try { string iniDir = System.Windows.Forms.Application.StartupPath; //"E:\\Cognex\\test\\bin\\x86\\Debug" ...
日常工作记录目录
与海
06-21 722
EasyExcel实现二维码下载与展示
前端 CSS 经典：文字描边
weixin_64684095的博客
06-24 368
文字描边有两种实现方式。
SPECweb2009调优指南
最新发布
developersupport的博客
06-25 858
 SPECweb2009 是衡量 Web 服务器性能和能效的标准化基准，可以对 Web 服务器的并发数进行性能测试，评测 Web 服务器能够支持的最大同时连接数的客户端/服务器（每秒能够响应的最大请求数）。为充分利用服务器性能，提升SPECweb2009测试结果，可通过增大系统进程数、优化服务器软件参数、绑核以及优化参数等。
风水研究会官网源码系统-可展示自己的领域内容-商品售卖等
haojiehero123的博客
06-23 404
整洁大气，非常漂亮，前端内容均可通过后台修改。
写一个react代办列表
03-28
每个任务都有一个删除按钮和一个完成按钮，可以将任务标记为已完成或未完成。完成的任务将带有删除线。 我们使用`map`函数来遍历任务列表，并为每个任务呈现一个`li`元素。我们还使用`key`属性来确保React可以更快...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值