| @@ -156,4 +156,5 @@ export default defineConfig({ | |||||
| }, | }, | ||||
| javascriptEnabled: true, | javascriptEnabled: true, | ||||
| }, | }, | ||||
| valtio: {}, | |||||
| }); | }); | ||||
| @@ -5,10 +5,7 @@ | |||||
| padding: 20px @content-padding; | padding: 20px @content-padding; | ||||
| background-color: white; | background-color: white; | ||||
| border: 1px solid @border-color-base; | border: 1px solid @border-color-base; | ||||
| border-top: none; | |||||
| border-radius: 0 0 4px 4px; | border-radius: 0 0 4px 4px; | ||||
| &&--scroll { | |||||
| padding: 0; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| @@ -4,21 +4,27 @@ import './index.less'; | |||||
| type InfoGroupProps = { | type InfoGroupProps = { | ||||
| title: string; | title: string; | ||||
| contentScroll?: boolean; // 内容是否需要滚动,如果可以滚动,则取消 padding | |||||
| height?: string | number; // 如果要纵向滚动,需要设置高度 | |||||
| width?: string | number; // 如果要横向滚动,需要设置宽度 | |||||
| className?: string; | className?: string; | ||||
| style?: React.CSSProperties; | style?: React.CSSProperties; | ||||
| children?: React.ReactNode; | children?: React.ReactNode; | ||||
| }; | }; | ||||
| function InfoGroup({ title, contentScroll = false, className, style, children }: InfoGroupProps) { | |||||
| function InfoGroup({ title, height, width, className, style, children }: InfoGroupProps) { | |||||
| const contentStyle: React.CSSProperties = {}; | |||||
| if (height) { | |||||
| contentStyle.height = height; | |||||
| contentStyle.overflowY = 'auto'; | |||||
| } | |||||
| if (width) { | |||||
| contentStyle.width = width; | |||||
| contentStyle.overflowX = 'auto'; | |||||
| } | |||||
| return ( | return ( | ||||
| <div className={classNames('kf-info-group', className)} style={style}> | <div className={classNames('kf-info-group', className)} style={style}> | ||||
| <InfoGroupTitle title={title} /> | <InfoGroupTitle title={title} /> | ||||
| <div | |||||
| className={classNames('kf-info-group__content', { | |||||
| 'kf-info-group__content--scroll': contentScroll, | |||||
| })} | |||||
| > | |||||
| <div style={contentStyle} className={'kf-info-group__content'}> | |||||
| {children} | {children} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -1,15 +1,28 @@ | |||||
| /* | |||||
| * @Author: 赵伟 | |||||
| * @Date: 2024-10-10 08:51:41 | |||||
| * @Description: 资源规格 hook | |||||
| */ | |||||
| import { getComputingResourceReq } from '@/services/pipeline'; | import { getComputingResourceReq } from '@/services/pipeline'; | ||||
| import computingResourceState, { setComputingResource } from '@/state/computingResourceStore'; | |||||
| import { ComputingResource } from '@/types'; | import { ComputingResource } from '@/types'; | ||||
| import { to } from '@/utils/promise'; | import { to } from '@/utils/promise'; | ||||
| import { type SelectProps } from 'antd'; | import { type SelectProps } from 'antd'; | ||||
| import { useCallback, useEffect, useState } from 'react'; | import { useCallback, useEffect, useState } from 'react'; | ||||
| import { useSnapshot } from 'umi'; | |||||
| // 获取资源规格 | // 获取资源规格 | ||||
| export function useComputingResource() { | export function useComputingResource() { | ||||
| const [resourceStandardList, setResourceStandardList] = useState<ComputingResource[]>([]); | const [resourceStandardList, setResourceStandardList] = useState<ComputingResource[]>([]); | ||||
| const computingResourceSnap = useSnapshot(computingResourceState); | |||||
| useEffect(() => { | useEffect(() => { | ||||
| getComputingResource(); | |||||
| if (computingResourceSnap.computingResource.length > 0) { | |||||
| setResourceStandardList(computingResourceSnap.computingResource as ComputingResource[]); | |||||
| } else { | |||||
| getComputingResource(); | |||||
| } | |||||
| }, []); | }, []); | ||||
| // 获取资源规格列表数据 | // 获取资源规格列表数据 | ||||
| @@ -22,6 +35,7 @@ export function useComputingResource() { | |||||
| const [res] = await to(getComputingResourceReq(params)); | const [res] = await to(getComputingResourceReq(params)); | ||||
| if (res && res.data && res.data.content) { | if (res && res.data && res.data.content) { | ||||
| setResourceStandardList(res.data.content); | setResourceStandardList(res.data.content); | ||||
| setComputingResource(res.data.content); | |||||
| } | } | ||||
| }, []); | }, []); | ||||
| @@ -25,10 +25,6 @@ | |||||
| } | } | ||||
| &__text { | &__text { | ||||
| width: 100%; | |||||
| height: 420px; | |||||
| padding: 20px @content-padding; | |||||
| overflow: auto; | |||||
| white-space: pre-wrap; | white-space: pre-wrap; | ||||
| } | } | ||||
| @@ -37,7 +37,7 @@ function ExperimentResult({ fileUrl, imageUrl, modelPath }: ExperimentResultProp | |||||
| return ( | return ( | ||||
| <div className={styles['experiment-result']}> | <div className={styles['experiment-result']}> | ||||
| <InfoGroup title="实验结果" contentScroll> | |||||
| <InfoGroup title="实验结果" height={420} width="100%"> | |||||
| <div className={styles['experiment-result__text']}>{result}</div> | <div className={styles['experiment-result__text']}>{result}</div> | ||||
| </InfoGroup> | </InfoGroup> | ||||
| <InfoGroup title="可视化结果" style={{ margin: '16px 0' }}> | <InfoGroup title="可视化结果" style={{ margin: '16px 0' }}> | ||||
| @@ -235,7 +235,7 @@ const UserTableList: React.FC = () => { | |||||
| const columns: ProColumns<API.System.User>[] = [ | const columns: ProColumns<API.System.User>[] = [ | ||||
| { | { | ||||
| title: <FormattedMessage id="system.user.user_id" defaultMessage="用户编号" />, | title: <FormattedMessage id="system.user.user_id" defaultMessage="用户编号" />, | ||||
| dataIndex: 'deptId', | |||||
| dataIndex: 'userId', | |||||
| valueType: 'text', | valueType: 'text', | ||||
| }, | }, | ||||
| { | { | ||||
| @@ -0,0 +1,16 @@ | |||||
| import { ComputingResource } from '@/types'; | |||||
| import { proxy } from 'umi'; | |||||
| type ComputingResourceStore = { | |||||
| computingResource: ComputingResource[]; | |||||
| }; | |||||
| const state = proxy<ComputingResourceStore>({ | |||||
| computingResource: [], | |||||
| }); | |||||
| export const setComputingResource = (computingResource: ComputingResource[]) => { | |||||
| state.computingResource = computingResource; | |||||
| }; | |||||
| export default state; | |||||