ai-proj-demo/src/module/tasklog/component/LogTable.jsx

import React, { useState, useEffect } from 'react'
import { Table, Space, message } from 'antd'
import moment from 'moment'
import { useNavigate, useLocation } from 'react-router-dom'
import { getLogList, refreshLogsStatus } from '../services/index'
import styled from 'styled-components'

const LogList = styled.div``

const LogTable = () => {
  // 初始化日志列表
  const [logList, setLogList] = useState([])
  // 表格Loading状态
  const [dataLoading, setDataLoading] = useState(false)

  const [currentPage, setCurrentPage] = useState(1)
  const [currentPageSize, setCurrentPageSize] = useState(10)
  const [dataTotal, setDataTotal] = useState(0)

  const navigate = useNavigate()

  const { state } = useLocation()

  const changeTask = () => {
    message.success('终止成功')
  }
  const checkLog = id => {
    navigate('/task-log/log-watcher', {
      state: { id },
    })
  }
  const columns = [
    {
      title: '任务名称',
      dataIndex: 'jobName',
      key: 'jobName',
    },
    {
      title: '任务类型',
      dataIndex: 'taskType',
      key: 'taskType',
    },
    {
      title: '任务标签',
      dataIndex: 'taskTag',
      key: 'taskTag',
    },
    {
      title: '调度时间',
      dataIndex: 'triggerTime',
      key: 'triggerTime',
    },
    {
      title: '调度结果',
      dataIndex: 'triggerResult',
      key: 'triggerResult',
      render: code => (
        <span
          style={{
            color: code === 0 ? '#FF4D4F' : code === 1 ? '#52C41A' : '#4A4A4A',
          }}>
          {code === 0 ? '失败' : code === 1 ? '成功' : '无'}
        </span>
      ),
    },
    {
      title: '执行时间',
      dataIndex: 'handleTime',
      key: 'handleTime',
    },
    {
      title: '执行结果',
      dataIndex: 'handleResult',
      key: 'handleResult',
      render: code => (
        <span
          style={{
            color: code === 3 ? '#FF4D4F' : code === 2 ? '#52C41A' : '#4A4A4A',
          }}>
          {code === 3
            ? '失败'
            : code === 2
            ? '成功'
            : code === 1
            ? '运行中'
            : code === 0
            ? '队列中'
            : '暂无'}
        </span>
      ),
    },
    {
      title: '操作',
      key: 'operation',
      render: (_, record) => (
        <Space size="middle">
          <span
            onClick={() => {
              checkLog(record.key)
            }}
            style={{ color: '#1881DA', cursor: 'pointer' }}>
            查看
          </span>
          {/* <span
            onClick={() => {
              changeTask(record.key)
            }}
            style={{ color: '#1881DA', cursor: 'pointer' }}>
            终止任务
          </span> */}
        </Space>
      ),
    },
  ]

  const fetchJoblog = async (page = 1, pageSize = 10) => {
    setDataLoading(true)
    const { data } = await getLogList({
      page: page,
      size: pageSize,
      id: state?.id,
    })
    if (data.code === 200) {
      setDataTotal(data.data.extra_data.total)
      setCurrentPage(data.data.extra_data.page)
      setCurrentPageSize(data.data.extra_data.size)
      const refreshLogs = []
      const list = data.data.item.map(item => {
        if ([0, 1].includes(item.execute_result)) {
          refreshLogs.push(item.id)
        }
        return {
          key: item.id,
          jobName: item.job_name,
          triggerTime: moment(Math.round(item.trigger_time) * 1000).format(
            'YYYY.MM.DD HH:mm:ss'
          ),
          triggerResult: item.trigger_result,
          handleTime: moment(Math.round(item.execute_time) * 1000).format(
            'YYYY.MM.DD HH:mm:ss'
          ),
          handleResult: item.execute_result,
          taskType: item.job_type,
          taskTag: item.job_tag,
          afJobId: item.af_job_id,
          runId: item.run_id,
        }
      })
      setLogList(list)
      refreshStatus(refreshLogs)
    }
    setDataLoading(false)
  }

  const refreshStatus = async refreshLogs => {
    if (refreshLogs.length !== 0) {
      const { data } = await refreshLogsStatus(refreshLogs.toString())
      if (data.code === 200) {
        const list = []
        let logs = []
        console.log(data.data)
        const keys = Object.keys(data.data)
        keys.forEach(item => {
          if ([2, 3].includes(data.data[item])) {
            logs = logList.map(logData => {
              if (logData.id === item) {
                logData.execute_result = data.data[item]
              }
              return logData
            })
          } else {
            list.push(item)
          }
        })
        if (logs.length !== 0) {
          setLogList(logs)
        }
        setTimeout(() => {
          refreshStatus(list)
        }, 10000)
      } else {
        message.error(data.msg)
      }
    }
  }

  const pageChange = (page, pageSize) => {
    fetchJoblog(page, pageSize)
  }

  useEffect(() => {
    fetchJoblog()
  }, [])

  return (
    <LogList>
      <Table
        columns={columns}
        dataSource={logList}
        bordered
        loading={dataLoading}
        pagination={{
          current: currentPage,
          total: dataTotal,
          pageSize: currentPageSize,
          onChange: pageChange,
        }}
      />
    </LogList>
  )
}

export default LogTable