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)}
-
+
)}
);