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

import { Card, message, Table, Tree } from 'antd'
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import styled from 'styled-components'
import { getLogInfo } from '../services/index'
import moment from 'moment'

const LogWrapper = styled.div`
  padding: 20px;
  display: flex;
  height: 100vh;
  column-gap: 20px;
  .job-list {
    flex: 1;
  }
  .log-info {
    width: 920px;
  }
  .log {
    background-color: #012b36;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    color: #638691;
    padding: 8px 10px;
    ::-webkit-scrollbar {
      display: none;
    }
  }

  .node_list {
    width: 100%;
    height: 100%;
  }
  .node_table {
    overflow: auto;
    height: 650px
    ::-webkit-scrollbar {
      display: none;
    }
  }
  .ant-table-selection-column {
    display: none !important;
  }
`

const { DirectoryTree } = Tree

const TaskLogWatcher = () => {
  const { state } = useLocation()
  const [logData, setLogData] = useState('暂无日志')
  // 初始化节点列表
  const [jobList, setJobList] = useState([])
  // 选中的作业
  const [selectJob, setSelectJob] = useState(null)
  // 单/多作业类型
  // const [taskType, setTaskType] = useState(null)

  const [treeData, setTreeData] = useState([])

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
    },
    {
      title: '执行时间',
      dataIndex: 'executeTime',
      key: 'executeTime',
    },
    {
      title: '执行结果',
      dataIndex: 'handleResult',
      key: 'handleResult',
      render: code => (
        <span
          style={{
            color: code === 0 ? '#FF4D4F' : code === 1 ? '#52C41A' : '#4A4A4A',
          }}>
          {code === 0 ? '失败' : code === 1 ? '成功' : '无'}
        </span>
      ),
    },
  ]

  const fetchOnceJoblog = async () => {
    const { data } = await getLogInfo(state.id)
    if (data.code === 200) {
      // setTaskType(data.data.job_type)
      // if (data.data.job_type === '单作业离线任务')
      //   formatSingleTask(data.data.logs)
      // if (data.data.job_type === '多作业离线任务')
      //   formatMultiTask(data.data.logs)
      formatSingleTask(data.data)
    } else {
      message.error(data.msg)
    }
  }

  const formatSingleTask = data => {
    console.log(data)
    const list = data.map((item, index) => ({
      key: index,
      id: item.id,
      index: index + 1,
      executeTime: moment(Number(item.execute_time) * 1000).format(
        'YYYY.MM.DD HH:MM'
      ),
      log: item.log,
      handleResult: item.execute_result,
    }))
    setJobList(list)
    onClickTableNode(list[0])
  }

  const formatMultiTask = data => {
    const list = data.map((item, index) => {
      const children = item.nodes.map((node, i) => {
        return {
          title: node.node_name,
          key: `${index}-${i}`,
          uri: node.job_log_uri,
          isLeaf: true,
        }
      })
      return {
        title: item.homework_name,
        key: String(index),
        children,
      }
    })
    setTreeData(list)
    setLogData('请选择节点查看任务')
  }

  const onClickTableNode = record => {
    setSelectJob(record.key)
    setLogData(record.log)
  }

  const onClickTreeNode = (_, info) => {}

  useEffect(() => {
    fetchOnceJoblog()
  }, [state])

  const singleTable = (
    <Table
      columns={columns}
      dataSource={jobList}
      showHeader={false}
      className="node_table"
      pagination={{ position: ['none', 'none'] }}
      onRow={record => {
        return {
          onClick: () => onClickTableNode(record),
        }
      }}
      rowSelection={{
        type: 'radio',
        columnWidth: '0',
        selectedRowKeys: [selectJob],
      }}
    />
  )
  const multiTree = (
    <DirectoryTree onSelect={onClickTreeNode} treeData={treeData} />
  )

  return (
    <LogWrapper>
      {/* <pre className="log">{logData}</pre> */}
      <div className="job-list">
        <Card
          size="small"
          title="节点列表"
          bordered={false}
          className="node_list"
          headStyle={{
            padding: '10px 15px',
            fontSize: '14px',
            fontWeight: '700',
          }}>
          {/* {taskType === '单作业离线任务' ? singleTable : multiTree} */}
          {singleTable}
        </Card>
      </div>
      <div className="log-info">
        <Card
          bordered={false}
          style={{ height: '100%', width: '100%' }}
          bodyStyle={{ height: '100%', width: '100%' }}>
          <pre className="log">{logData}</pre>
        </Card>
      </div>
    </LogWrapper>
  )
}

export default TaskLogWatcher