diff --git a/src/pages/ideContainer/components/runTimeData.tsx b/src/pages/ideContainer/components/runTimeData.tsx new file mode 100644 index 0000000..e8da0c1 --- /dev/null +++ b/src/pages/ideContainer/components/runTimeData.tsx @@ -0,0 +1,101 @@ +import React, { useEffect, useState } from 'react'; +import dayjs from 'dayjs'; +import { Tabs, Table, TableColumnProps, Input } from '@arco-design/web-react'; +import { IconCheckCircleFill, IconLoading, IconCloseCircleFill } from '@arco-design/web-react/icon'; +import { formatSeconds } from '@/utils/common'; + +const TabPane = Tabs.TabPane; + +const columns: TableColumnProps[] = [ + { + title: '节点', + dataIndex: 'name' + }, + { + title: '时间', + render: (_: any, record) => ( + <> + 开始{dayjs(record.startTime).format('YYYY-MM-DD HH:mm:ss')} +

+ {record.endTime > 0 && 结束{dayjs(record.endTime).format('YYYY-MM-DD HH:mm:ss')}} + + ) + }, + { + title: '耗时', + dataIndex: 'duration', + render: (_: any, record) => ( + record.duration > 1000 ? + {formatSeconds((record.duration / 1000).toString())} : + {record.duration}毫秒 + ) + }, + { + title: '状态', + dataIndex: 'state', + render: (_: any, record) => ( + <> + {record.state === 1 && } + {record.state === 0 && } + {record.state === -1 && } + + ) + }, + { + title: '输入参数', + dataIndex: 'input', + render: (_: any, record) => ( + {JSON.stringify(record.input)} + ) + }, + { + title: '输出参数', + dataIndex: 'output', + render: (_: any, record) => ( + {JSON.stringify(record.output)} + ) + } +]; + +const RunTimeData = ({ logData }) => { + const [currentTab, setCurrentTab] = useState('0'); + const [tabList, setTabList] = useState([]); + const [keyMap, setKeyMap] = useState({}); + const [data, setData] = useState([]); + + const onTabChange = (key) => { + setCurrentTab(key); + setData(keyMap[key]); + }; + + useEffect(() => { + const tempMap = {}; + const list = logData.map((item, index) => { + tempMap[index] = item.nodes; + return { + key: index, + title: item.parent + }; + }); + setKeyMap(tempMap); + setTabList(list); + }, [logData]); + + useEffect(() => { + if (tabList.length > 0) { + setData(keyMap[0]); + onTabChange(0); // 默认选中第一个 + } + }, [tabList]); + + return ( + <> + + {tabList.map((item) => ())} + + + + ); +}; + +export default RunTimeData; \ No newline at end of file diff --git a/src/pages/ideContainer/logBar.tsx b/src/pages/ideContainer/logBar.tsx index a36aeef..3b6744c 100644 --- a/src/pages/ideContainer/logBar.tsx +++ b/src/pages/ideContainer/logBar.tsx @@ -3,7 +3,8 @@ import { ResizeBox, Tabs } from '@arco-design/web-react'; import styles from './style/logBar.module.less'; import { updateLogBarStatus } from '@/store/ideContainer'; import { useSelector, useDispatch } from 'react-redux'; -import { getNodeData } from '@/api/appIns'; // 添加导入 +import { getNodeData } from '@/api/appIns'; +import RunTimeData from './components/runTimeData'; const TabPane = Tabs.TabPane; @@ -50,15 +51,14 @@ const LogBar: React.FC = () => { const [tabs] = useState(data); const [activeTab, setActiveTab] = useState('1'); const resizeBoxRef = useRef(null); // 引用 ResizeBox 容器 - const { logBarStatus, appRuntimeData } = useSelector((state: any) => state.ideContainer); - const dispatch = useDispatch(); const [validationLogs, setValidationLogs] = useState([]); const [runtimeLogs, setRuntimeLogs] = useState([]); // 添加运行时日志状态 const [logContainerHeight, setLogContainerHeight] = useState('250px'); // 添加日志容器高度状态 - const { currentAppData } = useSelector((state: any) => state.ideContainer); - // 添加运行数据状态 - const [runtimeData, setRuntimeData] = useState({}); + const [runtimeData, setRuntimeData] = useState({}); // 添加运行数据状态 const [loading, setLoading] = useState(false); + const { logBarStatus, appRuntimeData, currentAppData } = useSelector((state: any) => state.ideContainer); + + const dispatch = useDispatch(); // 处理 Tab 点击事件 const handleTabClick = (key: string) => { @@ -113,7 +113,7 @@ const LogBar: React.FC = () => { setValidationLogs(prev => [...prev, newLog]); // 自动切换到校验日志tab并展开logBar - setActiveTab('2'); + // setActiveTab('2'); dispatch(updateLogBarStatus(true)); } // 如果是运行时日志 @@ -128,7 +128,6 @@ const LogBar: React.FC = () => { setRuntimeLogs(prev => [...prev, newLog]); // 自动切换到运行日志tab并展开logBar - setActiveTab('1'); dispatch(updateLogBarStatus(true)); // 同时将日志添加到当前应用的运行日志中 @@ -159,11 +158,11 @@ const LogBar: React.FC = () => { let intervalId: NodeJS.Timeout | null = null; // 只有在当前tab是运行数据且有当前应用时才开始轮询 - if (activeTab === '3' && currentAppData?.id && logBarStatus) { + if (activeTab === '3' && currentAppData?.id && logBarStatus && appRuntimeData[currentAppData.id]?.runId) { const fetchRuntimeData = async () => { try { setLoading(true); - const response = await getNodeData(currentAppData.id); + const response = await getNodeData(appRuntimeData[currentAppData.id].runId); setRuntimeData(prev => ({ ...prev, [currentAppData.id]: response.data @@ -245,17 +244,10 @@ const LogBar: React.FC = () => { return (
- {loading ? ( -

加载中...

- ) : !currentAppData?.id ? ( -

请选择应用

- ) : !currentAppDataContent ? ( + {!currentAppDataContent ? (

暂无运行数据

) : ( -
-

应用: {currentAppData.name}

-
{JSON.stringify(currentAppDataContent, null, 2)}
-
+ )}
);