|
|
|
|
@ -1,12 +1,13 @@
|
|
|
|
|
/* eslint-disable eqeqeq */
|
|
|
|
|
/* eslint-disable react/no-unknown-property */
|
|
|
|
|
import { isSuccessApi } from '@/utils/forApi';
|
|
|
|
|
import { ProCard } from '@ant-design/pro-components';
|
|
|
|
|
import { ProCard, ProList } from '@ant-design/pro-components';
|
|
|
|
|
import { Image } from 'antd';
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
|
|
|
|
|
// type
|
|
|
|
|
import { postPowerGroup, postPowerPoolsList } from '@/services/testApi/computePower';
|
|
|
|
|
import { isArrayAndNotEmpty } from '@/utils/is';
|
|
|
|
|
import ComputePowerCube from './components/computePowerCube';
|
|
|
|
|
import ComputePowerType from './components/computePowerType';
|
|
|
|
|
import './index.less';
|
|
|
|
|
@ -20,6 +21,24 @@ const ComputePowerAllocation: React.FC = () => {
|
|
|
|
|
const [groupList, setGroupList] = useState([]);
|
|
|
|
|
// const [showEdit, setShowEdit] = useState(false);
|
|
|
|
|
|
|
|
|
|
// 将数据组装成reactDom
|
|
|
|
|
function toListDomByData(record) {
|
|
|
|
|
let startList = [...record];
|
|
|
|
|
let finalList = startList.map((v) => ({
|
|
|
|
|
content: (
|
|
|
|
|
<div>
|
|
|
|
|
<div className="flex items-center baner_group_content px-[16px]">
|
|
|
|
|
<div className={`cp_bg_logo_icon cp_bg_logo_icon_${v.type}`} />
|
|
|
|
|
<span className="cp_label p1 two-line">{v.label}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={`bg_banner_group_logo bg_banner_group_logo_${v.type}`} />
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
}));
|
|
|
|
|
setGroupList(finalList);
|
|
|
|
|
console.log(finalList, 'toListDomByData_finalList');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function fetchPowerData() {
|
|
|
|
|
const resp = await postPowerPoolsList();
|
|
|
|
|
if (isSuccessApi(resp) && resp?.data) {
|
|
|
|
|
@ -32,7 +51,7 @@ const ComputePowerAllocation: React.FC = () => {
|
|
|
|
|
const resp = await postPowerGroup();
|
|
|
|
|
if (isSuccessApi(resp) && resp?.data) {
|
|
|
|
|
console.log('fetchGroupData_res', resp);
|
|
|
|
|
setGroupList(resp.data.splice(0, 4));
|
|
|
|
|
toListDomByData(resp.data.splice(0, 5));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -49,83 +68,97 @@ const ComputePowerAllocation: React.FC = () => {
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="home_container computePowerCenterIndex_page">
|
|
|
|
|
<ProCard
|
|
|
|
|
title="算力资源池"
|
|
|
|
|
style={{ background: 'white' }}
|
|
|
|
|
headStyle={{ padding: 20, borderBottom: '1px solid #E0E0E0' }}
|
|
|
|
|
bodyStyle={{
|
|
|
|
|
paddingLeft: 20,
|
|
|
|
|
paddingRight: 20,
|
|
|
|
|
paddingTop: 0,
|
|
|
|
|
paddingBottom: 0,
|
|
|
|
|
margin: 0,
|
|
|
|
|
}}
|
|
|
|
|
gutter={24}
|
|
|
|
|
wrap
|
|
|
|
|
ghost
|
|
|
|
|
>
|
|
|
|
|
{/* 占比信息 */}
|
|
|
|
|
<ul className="computePowerAllocation_body">
|
|
|
|
|
<li>
|
|
|
|
|
<div className="flex items-center head_info mt16px">
|
|
|
|
|
<div className="bg_header_logo">
|
|
|
|
|
<Image
|
|
|
|
|
width={80}
|
|
|
|
|
src={'/images/computePowerCenter/banner.png'}
|
|
|
|
|
placeholder={
|
|
|
|
|
<Image
|
|
|
|
|
preview={false}
|
|
|
|
|
src={'/images/computePowerCenter/banner.png'}
|
|
|
|
|
width={80}
|
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<div className="gn_head_card">
|
|
|
|
|
<ProCard
|
|
|
|
|
className="gn_card_wrap"
|
|
|
|
|
title={<span className="head2">算力资源池</span>}
|
|
|
|
|
style={{ background: 'white' }}
|
|
|
|
|
headStyle={{ padding: 20, borderBottom: '1px solid #E0E0E0' }}
|
|
|
|
|
bodyStyle={{
|
|
|
|
|
paddingLeft: 20,
|
|
|
|
|
paddingRight: 20,
|
|
|
|
|
paddingTop: 0,
|
|
|
|
|
paddingBottom: 0,
|
|
|
|
|
margin: 0,
|
|
|
|
|
}}
|
|
|
|
|
gutter={24}
|
|
|
|
|
wrap
|
|
|
|
|
ghost
|
|
|
|
|
>
|
|
|
|
|
{/* 占比信息 */}
|
|
|
|
|
<ul className="computePowerAllocation_body">
|
|
|
|
|
<li className="head_box">
|
|
|
|
|
<div className="flex items-center head_info">
|
|
|
|
|
<div className="bg_header_logo">
|
|
|
|
|
<Image
|
|
|
|
|
width={80}
|
|
|
|
|
height={80}
|
|
|
|
|
src={'/images/computePowerCenter/banner.png'}
|
|
|
|
|
placeholder={
|
|
|
|
|
<Image
|
|
|
|
|
preview={false}
|
|
|
|
|
src={'/images/computePowerCenter/banner.png'}
|
|
|
|
|
width={80}
|
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="head_info_item">
|
|
|
|
|
<span className="head3">苏胜天算力资源池</span>
|
|
|
|
|
<div className="p1 pt-[8px]">算力资源999Tops</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="head_info_item">
|
|
|
|
|
<h6 className="font-bold pf-1">苏胜天算力资源池</h6>
|
|
|
|
|
<p className="pf-2">算力资源999Tops</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li className="mt16px">
|
|
|
|
|
<h3>硬件组成</h3>
|
|
|
|
|
{/* // TODO 重新设计*/}
|
|
|
|
|
<ul className="flex justify-between banner_group">
|
|
|
|
|
{groupList.map((v, k) => {
|
|
|
|
|
return (
|
|
|
|
|
<li key={k} className="flex items-center mb16px">
|
|
|
|
|
<div className="flex items-center px16px">
|
|
|
|
|
<div className={`cp_bg_logo_icon cp_bg_logo_icon_${v.type}`} />
|
|
|
|
|
<span className="cp_label pf-2 two-line">{v.label}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={`bg_banner_group_logo bg_banner_group_logo_${v.type}`} />
|
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li className="mt16px">
|
|
|
|
|
<h3>算力配置</h3>
|
|
|
|
|
<div className="mt16px">
|
|
|
|
|
<ComputePowerCube list={poolsData} />
|
|
|
|
|
<ul className="flex flex-wrap items-center computePower_footer mt16px">
|
|
|
|
|
{poolsData.map((v, k) => {
|
|
|
|
|
return (
|
|
|
|
|
<li key={k} className="flex items-center justify-center">
|
|
|
|
|
<ComputePowerType info={v} />
|
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
{/* <div>
|
|
|
|
|
</li>
|
|
|
|
|
<li className="mt-[16px]">
|
|
|
|
|
<div className="head3 mb-[12px]">硬件组成</div>
|
|
|
|
|
<ProList<any>
|
|
|
|
|
className="gn_pro_list"
|
|
|
|
|
ghost={true}
|
|
|
|
|
rowKey={'id'}
|
|
|
|
|
itemCardProps={{
|
|
|
|
|
ghost: true,
|
|
|
|
|
bodyStyle: { padding: 0, margin: 0 },
|
|
|
|
|
}}
|
|
|
|
|
cardProps={{
|
|
|
|
|
bodyStyle: {
|
|
|
|
|
background: 'transparent',
|
|
|
|
|
margin: '-4px 0',
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
rowSelection={false}
|
|
|
|
|
grid={{ gutter: 16, xs: 1, md: 2, lg: 3, xl: 4, xxl: 5 }}
|
|
|
|
|
metas={{
|
|
|
|
|
content: {},
|
|
|
|
|
}}
|
|
|
|
|
dataSource={groupList}
|
|
|
|
|
/>
|
|
|
|
|
</li>
|
|
|
|
|
<li className="pb-[16px]">
|
|
|
|
|
<div className="head3">算力配置</div>
|
|
|
|
|
{isArrayAndNotEmpty(poolsData) && (
|
|
|
|
|
<div className="mt-[12px]">
|
|
|
|
|
<ComputePowerCube list={poolsData} />
|
|
|
|
|
<ul className="flex flex-wrap items-center computePower_footer mt-[12px]">
|
|
|
|
|
{poolsData.map((v, k) => {
|
|
|
|
|
return (
|
|
|
|
|
<li key={k} className="flex items-center justify-center">
|
|
|
|
|
<ComputePowerType info={v} />
|
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{/* <div>
|
|
|
|
|
<Button type="primary" onClick={editComputePower}>
|
|
|
|
|
编辑算力配置
|
|
|
|
|
</Button>
|
|
|
|
|
</div> */}
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</ProCard>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</ProCard>
|
|
|
|
|
</div>
|
|
|
|
|
{/* <UpdatePowerForm modalOpen={showEdit} poolsData={poolsData}></UpdatePowerForm> */}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
