diff --git a/src/pages/instance/index.tsx b/src/pages/instance/index.tsx index 7ee9b99..d5baef6 100644 --- a/src/pages/instance/index.tsx +++ b/src/pages/instance/index.tsx @@ -12,7 +12,7 @@ import { IconExclamationCircle, IconEye } from '@arco-design/web-react/icon'; -import { formatInstanceStatus, formatInstanceType, formatTimestamp } from '@/utils/common'; +import { formatInstanceStatus, formatInstanceType, formatTimestamp, formatSeconds } from '@/utils/common'; import { getInstances } from '@/api/appIns'; import { getOverviewApp } from '@/api/overview'; import { getMyAppList } from '@/api/apps'; @@ -48,7 +48,7 @@ const columns: TableColumnProps[] = [ dataIndex: 'duration', render: (col, record, index) => ( - {record.duration}毫秒 + {record.duration > 1000 ? formatSeconds(`${record.duration / 1000}`) : `${record.duration} 毫秒`} ) }, @@ -124,9 +124,17 @@ const Instance = () => { const Selector = () => { return ( - - {searchOptions.map((option, index) => ( - + option.props.children.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0} + onChange={(value) => handleSearchParamChange('appId', value || '')} + > + {searchOptions.map((option: any, index) => ( + {option.name} ))} @@ -162,7 +170,13 @@ const Instance = () => { } ]; return ( - + handleSearchParamChange('state', value || '')} + > {stateList.map((option, index) => ( {option.label} @@ -174,10 +188,6 @@ const Instance = () => { const Type = () => { const typeDict = [ - // { - // label: 'HOOK', - // value: 'HOOK', - // }, { label: '定时任务', value: 'TIMER' @@ -192,7 +202,13 @@ const Instance = () => { } ]; return ( - + handleSearchParamChange('type', value || '')} + > {typeDict.map((option, index) => ( {option.label} @@ -202,16 +218,31 @@ const Instance = () => { ); }; + // 处理搜索参数变化 + const handleSearchParamChange = (field: string, value: string | boolean) => { + const newSearchParams = { + ...searchParams, + [field]: value + }; + setSearchParams(newSearchParams); + + // 重置到第一页并重新获取数据 + fetchData({ + ...newSearchParams, + currPage: 1 + }); + }; + // 获取实例列表和概览数据 const fetchData = async (params: any = {}) => { const requestParams: any = { - appId: searchParams.appId, - state: searchParams.state, - type: searchParams.type, + appId: params.appId !== undefined ? params.appId : searchParams.appId, + state: params.state !== undefined ? params.state : searchParams.state, + type: params.type !== undefined ? params.type : searchParams.type, currPage: params.currPage || instanceData.currentPage, pageSize: params.pageSize || instanceData.pageSize, total: 0, - durationDesc: searchParams.durationDesc + durationDesc: params.durationDesc !== undefined ? params.durationDesc : searchParams.durationDesc }; if (!requestParams.state) delete requestParams.state; @@ -274,7 +305,10 @@ const Instance = () => { 运行时长倒序: - + handleSearchParamChange('durationDesc', checked)} + />