| @@ -2,12 +2,16 @@ import ServiceImg1 from '@/assets/img/home/service1.png'; | |||||
| import ServiceImg2 from '@/assets/img/home/service2.png'; | import ServiceImg2 from '@/assets/img/home/service2.png'; | ||||
| import ServiceImg3 from '@/assets/img/home/service3.png'; | import ServiceImg3 from '@/assets/img/home/service3.png'; | ||||
| import ServiceImg4 from '@/assets/img/home/service4.png'; | import ServiceImg4 from '@/assets/img/home/service4.png'; | ||||
| import { type ServiceData } from '@/pages/ModelDeployment/types'; | |||||
| import { getAssetPublicCountReq } from '@/services/home'; | |||||
| import { to } from '@/utils/promise'; | |||||
| import { useNavigate } from '@umijs/max'; | import { useNavigate } from '@umijs/max'; | ||||
| import { Flex } from 'antd'; | import { Flex } from 'antd'; | ||||
| import { useEffect, useState } from 'react'; | |||||
| import BlockTitle from '../BlockTitle'; | import BlockTitle from '../BlockTitle'; | ||||
| import styles from './index.less'; | import styles from './index.less'; | ||||
| const serviceData = [ | |||||
| const serviceData1 = [ | |||||
| { | { | ||||
| id: 1, | id: 1, | ||||
| img: ServiceImg1, | img: ServiceImg1, | ||||
| @@ -41,6 +45,40 @@ const serviceData = [ | |||||
| function ServiceBlock() { | function ServiceBlock() { | ||||
| const navigate = useNavigate(); | const navigate = useNavigate(); | ||||
| const [serviceData, setServiceData] = useState<ServiceData[]>([]); | |||||
| useEffect(() => { | |||||
| const getAssetPublicCount = async () => { | |||||
| const [res] = await to(getAssetPublicCountReq()); | |||||
| if (res && res.data) { | |||||
| const { dataset, image, model, codeConfig, service } = res.data; | |||||
| const items = [ | |||||
| { | |||||
| title: '数据集', | |||||
| value: dataset, | |||||
| }, | |||||
| { | |||||
| title: '模型', | |||||
| value: model, | |||||
| }, | |||||
| { | |||||
| title: '镜像', | |||||
| value: image, | |||||
| }, | |||||
| { | |||||
| title: '代码配置', | |||||
| value: codeConfig, | |||||
| }, | |||||
| { | |||||
| title: '服务', | |||||
| value: service, | |||||
| }, | |||||
| ]; | |||||
| //setServiceData(items); | |||||
| } | |||||
| }; | |||||
| getAssetPublicCount(); | |||||
| }, []); | |||||
| return ( | return ( | ||||
| <div className={styles.service}> | <div className={styles.service}> | ||||
| <BlockTitle | <BlockTitle | ||||
| @@ -49,7 +87,7 @@ function ServiceBlock() { | |||||
| onClick={() => navigate('/dataset/modelDeployment')} | onClick={() => navigate('/dataset/modelDeployment')} | ||||
| ></BlockTitle> | ></BlockTitle> | ||||
| <Flex align="center" justify="space-between" style={{ width: '100%' }}> | <Flex align="center" justify="space-between" style={{ width: '100%' }}> | ||||
| {serviceData.map((item) => { | |||||
| {serviceData1.map((item) => { | |||||
| return ( | return ( | ||||
| <div className={styles['service__item']} key={item.id}> | <div className={styles['service__item']} key={item.id}> | ||||
| <div className={styles['service__item__image-container']}> | <div className={styles['service__item__image-container']}> | ||||
| @@ -3,46 +3,63 @@ import DatasetIcon from '@/assets/img/home/dataset.png'; | |||||
| import ImageIcon from '@/assets/img/home/image.png'; | import ImageIcon from '@/assets/img/home/image.png'; | ||||
| import ModelIcon from '@/assets/img/home/model.png'; | import ModelIcon from '@/assets/img/home/model.png'; | ||||
| import ServiceIcon from '@/assets/img/home/service.png'; | import ServiceIcon from '@/assets/img/home/service.png'; | ||||
| import { getAssetPublicCountReq } from '@/services/home'; | |||||
| import { to } from '@/utils/promise'; | |||||
| import { useEffect, useState } from 'react'; | |||||
| import styles from './index.less'; | import styles from './index.less'; | ||||
| const dataList = [ | |||||
| { | |||||
| icon: DatasetIcon, | |||||
| name: '数据集', | |||||
| count: 30, | |||||
| }, | |||||
| { | |||||
| icon: ModelIcon, | |||||
| name: '模型', | |||||
| count: 30, | |||||
| }, | |||||
| { | |||||
| icon: ImageIcon, | |||||
| name: '镜像', | |||||
| count: 30, | |||||
| }, | |||||
| { | |||||
| icon: CodeIcon, | |||||
| name: '代码', | |||||
| count: 30, | |||||
| }, | |||||
| { | |||||
| icon: ServiceIcon, | |||||
| name: '服务', | |||||
| count: 30, | |||||
| }, | |||||
| ]; | |||||
| function StatisticsBlock() { | function StatisticsBlock() { | ||||
| const [assetCounts, setAssetCounts] = useState<{ title: string; value: number; icon: string }[]>( | |||||
| [], | |||||
| ); | |||||
| useEffect(() => { | |||||
| const getAssetPublicCount = async () => { | |||||
| const [res] = await to(getAssetPublicCountReq()); | |||||
| if (res && res.data) { | |||||
| const { dataset, image, model, codeConfig, service } = res.data; | |||||
| const items = [ | |||||
| { | |||||
| title: '数据集', | |||||
| value: dataset, | |||||
| icon: DatasetIcon, | |||||
| }, | |||||
| { | |||||
| title: '模型', | |||||
| value: model, | |||||
| icon: ModelIcon, | |||||
| }, | |||||
| { | |||||
| title: '镜像', | |||||
| value: image, | |||||
| icon: ImageIcon, | |||||
| }, | |||||
| { | |||||
| title: '代码配置', | |||||
| value: codeConfig, | |||||
| icon: CodeIcon, | |||||
| }, | |||||
| { | |||||
| title: '服务', | |||||
| value: service, | |||||
| icon: ServiceIcon, | |||||
| }, | |||||
| ]; | |||||
| setAssetCounts(items); | |||||
| } | |||||
| }; | |||||
| getAssetPublicCount(); | |||||
| }, []); | |||||
| return ( | return ( | ||||
| <div className={styles['statistics']}> | <div className={styles['statistics']}> | ||||
| {dataList.map((item) => { | |||||
| {assetCounts.map((item) => { | |||||
| return ( | return ( | ||||
| <div key={item.name} className={styles['statistics__item']}> | |||||
| <div key={item.title} className={styles['statistics__item']}> | |||||
| <img src={item.icon} draggable={false} className={styles['statistics__item__icon']} /> | <img src={item.icon} draggable={false} className={styles['statistics__item__icon']} /> | ||||
| <div> | <div> | ||||
| <div className={styles['statistics__item__count']}>{item.count}</div> | |||||
| <div className={styles['statistics__item__name']}>{item.name}</div> | |||||
| <div className={styles['statistics__item__count']}>{item.value}</div> | |||||
| <div className={styles['statistics__item__name']}>{item.title}</div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| ); | ); | ||||
| @@ -0,0 +1,17 @@ | |||||
| /* | |||||
| * @Author: 赵伟 | |||||
| * @Date: 2025-07-21 14:29:44 | |||||
| * @Description: 首页 | |||||
| */ | |||||
| import { request } from '@umijs/max'; | |||||
| // 获取公开的资源数量 | |||||
| export function getAssetPublicCountReq() { | |||||
| return request('/api/mmp/workspace/assetPublicCount', { | |||||
| method: 'GET', | |||||
| headers: { | |||||
| isToken: false, | |||||
| }, | |||||
| }); | |||||
| } | |||||