feat: 初始化算力中心
parent
c427830ef6
commit
9f81eed868
@ -0,0 +1,30 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-25 13:34:56
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-03-11 13:55:06
|
||||
* @FilePath: \general-ai-platform-web\mock\modelCategory.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
/**模型类别模块 mock */
|
||||
|
||||
import { powerGroupListData, powerPoolsListData } from './pools/computePowerData';
|
||||
import { successMockApiProps } from './typing';
|
||||
import { fetchMockSuccessFullByOther } from './utils/apiMock';
|
||||
export default {
|
||||
// 算力分配类别
|
||||
'POST /api/v1/compute_power/getPowerGroupList': async (req: Request, res: Response) => {
|
||||
const resData: successMockApiProps = {
|
||||
...fetchMockSuccessFullByOther(powerGroupListData),
|
||||
};
|
||||
res.send(resData);
|
||||
},
|
||||
|
||||
// 算力分配池
|
||||
'POST /api/v1/compute_power/getPowerPoolsList': async (req: Request, res: Response) => {
|
||||
const resData: successMockApiProps = {
|
||||
...fetchMockSuccessFullByOther(powerPoolsListData),
|
||||
};
|
||||
res.send(resData);
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,122 @@
|
||||
export type ComputePowerPoolItem = {
|
||||
name: string;
|
||||
type: number; // 类别
|
||||
color?: string; //
|
||||
proportion: number;
|
||||
pretreatmentEfficiency?: number;
|
||||
bgColor?: string;
|
||||
};
|
||||
|
||||
const groupList: Record<string, any>[] = [
|
||||
{
|
||||
label: 'NVIDIA GeForce 4090',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
label: '瑞芯微 RK3566',
|
||||
type: 0,
|
||||
},
|
||||
{
|
||||
label: '瑞芯微 RK3566',
|
||||
type: 0,
|
||||
},
|
||||
{
|
||||
label: 'NVIDIA GeForce 4090',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
label: 'NVIDIA GeForce 4090',
|
||||
type: 1,
|
||||
},
|
||||
];
|
||||
|
||||
const poolsData: ComputePowerPoolItem[] = [
|
||||
{
|
||||
name: '焊线颜色检测',
|
||||
type: 9,
|
||||
proportion: 7,
|
||||
pretreatmentEfficiency: 20,
|
||||
color: '#014BE6',
|
||||
bgColor: 'linear-gradient(180deg, #015DE6 0%, #4881F6 100%)',
|
||||
},
|
||||
{
|
||||
name: '螺纹缺陷检测',
|
||||
type: 8,
|
||||
proportion: 8,
|
||||
pretreatmentEfficiency: 20,
|
||||
color: '#FAA90B',
|
||||
bgColor: 'linear-gradient(180deg, #E64601 0%, #F6A648 100%)',
|
||||
},
|
||||
{
|
||||
name: 'PIN间距测量',
|
||||
type: 7,
|
||||
proportion: 4,
|
||||
pretreatmentEfficiency: 15,
|
||||
color: '#EA1281',
|
||||
bgColor: 'linear-gradient(180deg, #E60161 0%, #F648E5 100%)',
|
||||
},
|
||||
{
|
||||
name: '螺纹无牙缺陷检测',
|
||||
type: 6,
|
||||
proportion: 7,
|
||||
pretreatmentEfficiency: 20,
|
||||
color: '#FA8616',
|
||||
bgColor: 'linear-gradient(180deg, #FA8316 0%, #FAAD16 100%)',
|
||||
},
|
||||
{
|
||||
name: '压板缺陷检测',
|
||||
type: 5,
|
||||
proportion: 32,
|
||||
pretreatmentEfficiency: 38,
|
||||
color: '#F9DB18',
|
||||
bgColor: 'linear-gradient(180deg, #FFC56F 0%, #F9E006 100%)',
|
||||
},
|
||||
{
|
||||
name: '划伤缺陷检测',
|
||||
type: 4,
|
||||
proportion: 8,
|
||||
pretreatmentEfficiency: 38,
|
||||
color: '#1CCCFA',
|
||||
bgColor: 'linear-gradient(180deg, #6FFFFF 0%, #06BEF9 100%)',
|
||||
},
|
||||
{
|
||||
name: '披锋（毛刺）缺陷检测',
|
||||
type: 3,
|
||||
proportion: 12,
|
||||
pretreatmentEfficiency: 38,
|
||||
color: '#9E26EE',
|
||||
bgColor: 'linear-gradient(180deg, #FF2494 0%, #8D27FF 100%)',
|
||||
},
|
||||
{
|
||||
name: '工件尺寸测量',
|
||||
type: 2,
|
||||
proportion: 7,
|
||||
pretreatmentEfficiency: 38,
|
||||
color: '#6F50F6',
|
||||
bgColor: 'linear-gradient(180deg, #6B55F6 0%, #8C38F8 100%)',
|
||||
},
|
||||
{
|
||||
name: '打孔不良检测',
|
||||
type: 1,
|
||||
proportion: 5,
|
||||
pretreatmentEfficiency: 38,
|
||||
color: '#24ED75',
|
||||
bgColor: 'linear-gradient(180deg, #43EA80 0%, #38F8D4 100%)',
|
||||
},
|
||||
{
|
||||
name: '空闲算力',
|
||||
type: 0,
|
||||
proportion: 10,
|
||||
pretreatmentEfficiency: 0,
|
||||
color: '#DCDCDC',
|
||||
bgColor: 'linear-gradient(90deg, #7B7979 0%, #C1C1C1 100%)',
|
||||
},
|
||||
];
|
||||
|
||||
export const powerGroupListData = {
|
||||
data: groupList,
|
||||
};
|
||||
|
||||
export const powerPoolsListData = {
|
||||
data: poolsData,
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 660 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 463 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 4.1 MiB |
|
Before Width: | Height: | Size: 384 KiB After Width: | Height: | Size: 384 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 290 B After Width: | Height: | Size: 290 B |
|
Before Width: | Height: | Size: 289 B After Width: | Height: | Size: 289 B |
@ -0,0 +1,27 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M12 22C14.7614 22 17.2614 20.8807 19.0711 19.0711C20.8807 17.2614 22 14.7614 22 12C22 9.2386 20.8807 6.7386 19.0711 4.92893C17.2614 3.11929 14.7614 2 12 2C9.2386 2 6.7386 3.11929 4.92893 4.92893C3.11929 6.7386 2 9.2386 2 12C2 14.7614 3.11929 17.2614 4.92893 19.0711C6.7386 20.8807 9.2386 22 12 22Z"
|
||||
stroke="#FAAD14"
|
||||
stroke-width="2"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12 18.5C12.6904 18.5 13.25 17.9404 13.25 17.25C13.25 16.5597 12.6904 16 12 16C11.3097 16 10.75 16.5597 10.75 17.25C10.75 17.9404 11.3097 18.5 12 18.5Z"
|
||||
fill="#FAAD14"
|
||||
/>
|
||||
<path
|
||||
d="M12 6V14"
|
||||
stroke="#FAAD14"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 869 B |
@ -0,0 +1,24 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.948 8.7975V7.3675C9.08911 7.35702 9.23051 7.35102 9.372 7.3495C13.294 7.2255 15.865 10.7235
|
||||
15.865 10.7235C15.865 10.7235 13.091 14.5745 10.115 14.5745C9.72158 14.5753 9.33059 14.5128 8.957
|
||||
14.3895V10.0435C10.485 10.2285 10.794 10.9005 11.704 12.4285L13.744 10.7145C13.744 10.7145 12.252
|
||||
8.7625 9.744 8.7625C9.47818 8.75656 9.21227 8.76826 8.948 8.7975ZM8.948 4.0625V6.2005L9.372
|
||||
6.1735C14.822 5.9885 18.382 10.6435 18.382 10.6435C18.382 10.6435 14.302 15.6075 10.052
|
||||
15.6075C9.68491 15.6063 9.31858 15.5739 8.957 15.5105V16.8355C9.257 16.8705 9.567 16.8975 9.867
|
||||
16.8975C13.824 16.8975 16.687 14.8745 19.46 12.4895C19.919 12.8605 21.8 13.7525 22.19 14.1415C19.557
|
||||
16.3495 13.418 18.1255 9.937 18.1255C9.602 18.1255 9.284 18.1075 8.966
|
||||
18.0725V19.9365H24V4.0625H8.948ZM8.948 14.3885V15.5195C5.291 14.8655 4.275 11.0595 4.275
|
||||
11.0595C4.275 11.0595 6.033 9.1155 8.948 8.7975V10.0345H8.94C7.412 9.8485 6.21 11.2795 6.21
|
||||
11.2795C6.21 11.2795 6.89 13.6915 8.949 14.3895M2.456 10.8995C2.456 10.8995 4.62 7.7025 8.956
|
||||
7.3665V6.2005C4.153 6.5895 0 10.6525 0 10.6525C0 10.6525 2.35 17.4545 8.948 18.0725V16.8355C4.108
|
||||
16.2355 2.456 10.8995 2.456 10.8995Z"
|
||||
fill="#76B900"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,76 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-03-07 14:01:13
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-06-07 09:40:25
|
||||
* @FilePath: \general-ai-platform-web\src\pages\ComputePowerAllocation\components\updatePowerForm.tsx
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import type { ProDescriptionsActionType } from '@ant-design/pro-components';
|
||||
import { ProDescriptions } from '@ant-design/pro-components';
|
||||
import { Modal } from 'antd';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
export type UpdatePowerFormProps = {
|
||||
modalOpen: boolean;
|
||||
poolsData: Record<string, any>[];
|
||||
};
|
||||
const UpdatePowerForm: React.FC<UpdatePowerFormProps> = (props) => {
|
||||
const actionRef = useRef<ProDescriptionsActionType>();
|
||||
// const [state, setState] = useState<PicSearcherState>({
|
||||
// loading: false,
|
||||
// modalOpen: false,
|
||||
// popoverVisible: false,
|
||||
// icons: [],
|
||||
// fileList: [],
|
||||
// error: false,
|
||||
// modelLoaded: false,
|
||||
// });
|
||||
const [formList, setFormList] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setFormList(() => props.poolsData);
|
||||
}, [props.poolsData]);
|
||||
return (
|
||||
<Modal width={761} title={'编辑算力配置'} open={props.modalOpen}>
|
||||
<ProDescriptions
|
||||
actionRef={actionRef}
|
||||
editable={{
|
||||
onSave: async (keypath, newInfo, oriInfo) => {
|
||||
console.log(keypath, newInfo, oriInfo);
|
||||
return true;
|
||||
},
|
||||
}}
|
||||
>
|
||||
{formList.map((item, index) => {
|
||||
return (
|
||||
<ProDescriptions.Item
|
||||
key={index}
|
||||
label={
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
style={{ width: 12, height: 12, marginRight: 8, background: item.bgColor }}
|
||||
></span>
|
||||
<span>{item.name}</span>
|
||||
</div>
|
||||
}
|
||||
formItemProps={{
|
||||
fieldId: index,
|
||||
initialValue: item.proportion,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '此项为必填项',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
{item.proportion}
|
||||
</ProDescriptions.Item>
|
||||
);
|
||||
})}
|
||||
</ProDescriptions>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdatePowerForm;
|
||||
@ -0,0 +1,168 @@
|
||||
.pf-1 {
|
||||
color: #333;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
/* 157.143% */
|
||||
}
|
||||
.pf-2 {
|
||||
color: #666;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.mr16px {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.mt16px {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.mb16px {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.px16px {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.pl8px {
|
||||
padding-left: 8px;
|
||||
}
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
.computePowerAllocation_body {
|
||||
/* header */
|
||||
/* banner */
|
||||
/* footer */
|
||||
}
|
||||
.computePowerAllocation_body h3 {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
line-height: 19px;
|
||||
}
|
||||
.computePowerAllocation_body .head_info .bg_header_logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.computePowerAllocation_body .head_info .head_info_item {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.computePowerAllocation_body .banner_group {
|
||||
padding-top: 24px;
|
||||
}
|
||||
.computePowerAllocation_body .banner_group > li {
|
||||
width: 24%;
|
||||
height: 88px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.computePowerAllocation_body .banner_group > li .cp_label {
|
||||
width: 100%;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.computePowerAllocation_body .banner_group > li .cp_bg_logo_icon {
|
||||
min-width: 24px;
|
||||
height: 26px;
|
||||
background: url('/images/computePowerCenter/type1.svg') no-repeat 0 0;
|
||||
}
|
||||
.computePowerAllocation_body .banner_group > li .cp_bg_logo_icon_0 {
|
||||
width: 44px;
|
||||
height: 16px;
|
||||
background: url('/images/computePowerCenter/ruiyinweilogo1.svg') no-repeat 0 0;
|
||||
}
|
||||
.computePowerAllocation_body .banner_group > li .bg_banner_group_logo {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
position: absolute;
|
||||
background: url('/images/computePowerCenter/guoqi.svg') no-repeat 100% 0%;
|
||||
background-size: cover;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.computePowerAllocation_body .banner_group > li .bg_banner_group_logo_1 {
|
||||
background: url('/images/computePowerCenter/NVIDIA.svg') no-repeat 100% 0%;
|
||||
}
|
||||
.computePowerAllocation_body .computePower_footer li {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.computePowerCube_wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.computePowerCube_wrap .tip_icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: cover;
|
||||
}
|
||||
.computePowerCube_wrap .bg_body_logo {
|
||||
/* width: 358.886px;
|
||||
height: 343.026px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
left: -48px;
|
||||
background: url("@/assets/computePower/bgLogo.svg") no-repeat 50% 50%;
|
||||
opacity: 0.02; */
|
||||
}
|
||||
.computePowerCube_wrap .cube_info {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
/* background-color: red; */
|
||||
border: 2px solid rgba(21, 77, 221, 0.4);
|
||||
}
|
||||
.computePowerCube_wrap .cube_info > li .bg_cube {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.computePowerCube_wrap .cube_info_line {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
bottom: 14px;
|
||||
height: 4px;
|
||||
width: calc(100% - 36px);
|
||||
/* height: 401px; */
|
||||
background: #ffffff;
|
||||
filter: blur(4px);
|
||||
}
|
||||
.computePowerCube_wrap .cube_body {
|
||||
/* margin-left: 30px; */
|
||||
width: 100%;
|
||||
border: 2px solid #b8b8b8;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.computePowerCube_wrap .bg_line {
|
||||
height: 56px;
|
||||
width: 2px;
|
||||
background-color: black;
|
||||
}
|
||||
.computePowerType_wrap {
|
||||
position: relative;
|
||||
}
|
||||
.computePowerType_wrap .bg_square_box {
|
||||
padding-top: 6px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.computePowerType_wrap .bg_square {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
@ -0,0 +1,193 @@
|
||||
@web_font1: #333;
|
||||
@web_font2: #666;
|
||||
// TODO 整体向tainwind合并
|
||||
.pf-1 {
|
||||
color: @web_font1;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-family: 'PingFang SC';
|
||||
font-style: normal;
|
||||
line-height: 22px;
|
||||
/* 157.143% */
|
||||
}
|
||||
|
||||
.pf-2 {
|
||||
color: @web_font2;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-family: 'PingFang SC';
|
||||
font-style: normal;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.mr16px {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.mt16px {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.mb16px {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.px16px {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.pl8px {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.computePowerAllocation_body {
|
||||
h3 {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
}
|
||||
/* header */
|
||||
.head_info {
|
||||
// font-size: 28px;
|
||||
.bg_header_logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.head_info_item {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
/* banner */
|
||||
.banner_group {
|
||||
padding-top: 24px;
|
||||
& > li {
|
||||
position: relative;
|
||||
width: 24%;
|
||||
height: 88px;
|
||||
overflow: hidden;
|
||||
background-color: rgba(256, 256, 256, 0.1);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.cp_label {
|
||||
width: 100%;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.cp_bg_logo_icon {
|
||||
min-width: 24px;
|
||||
height: 26px;
|
||||
background: url('/images/computePowerCenter/type1.svg') no-repeat 0 0;
|
||||
}
|
||||
.cp_bg_logo_icon_0 {
|
||||
width: 44px;
|
||||
height: 16px;
|
||||
background: url('/images/computePowerCenter/ruiyinweilogo1.svg') no-repeat 0 0;
|
||||
}
|
||||
|
||||
.bg_banner_group_logo {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
background: url('/images/computePowerCenter/guoqi.svg') no-repeat 100% 0%;
|
||||
background-size: cover;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.bg_banner_group_logo_1 {
|
||||
background: url('/images/computePowerCenter/NVIDIA.svg') no-repeat 100% 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* footer */
|
||||
.computePower_footer {
|
||||
li {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.computePowerCube_wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.tip_icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
// background: url("@/assets/computePower/tipIcon.svg") no-repeat;
|
||||
background-size: cover;
|
||||
// tipIcon.svg
|
||||
}
|
||||
.bg_body_logo {
|
||||
/* width: 358.886px;
|
||||
height: 343.026px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
left: -48px;
|
||||
background: url("@/assets/computePower/bgLogo.svg") no-repeat 50% 50%;
|
||||
opacity: 0.02; */
|
||||
}
|
||||
.cube_info {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
/* background-color: red; */
|
||||
border: 2px solid rgba(21, 77, 221, 0.4);
|
||||
border-radius: 2px;
|
||||
& > li {
|
||||
.bg_cube {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cube_info_line {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 18px;
|
||||
width: calc(100% - 36px);
|
||||
height: 4px;
|
||||
/* height: 401px; */
|
||||
background: rgba(255, 255, 255, 1);
|
||||
filter: blur(4px);
|
||||
}
|
||||
.cube_body {
|
||||
/* margin-left: 30px; */
|
||||
width: 100%;
|
||||
border: 2px solid #b8b8b8;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.bg_line {
|
||||
width: 2px;
|
||||
height: 56px;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.computePowerType_wrap {
|
||||
position: relative;
|
||||
.bg_square_box {
|
||||
padding-top: 6px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.bg_square {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
// .type_info{
|
||||
// line-height: 1
|
||||
// }
|
||||
}
|
||||
@ -0,0 +1,134 @@
|
||||
/* eslint-disable eqeqeq */
|
||||
/* eslint-disable react/no-unknown-property */
|
||||
import { isSuccessApi } from '@/utils/forApi';
|
||||
import { ProCard } from '@ant-design/pro-components';
|
||||
import { Image } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
// type
|
||||
import { postPowerGroup, postPowerPoolsList } from '@/services/testApi/computePower';
|
||||
import ComputePowerCube from './components/computePowerCube';
|
||||
import ComputePowerType from './components/computePowerType';
|
||||
import './index.less';
|
||||
|
||||
/**
|
||||
* @算力资源池页面组件
|
||||
* @returns
|
||||
*/
|
||||
const ComputePowerAllocation: React.FC = () => {
|
||||
const [poolsData, setPoolsData] = useState([]);
|
||||
const [groupList, setGroupList] = useState([]);
|
||||
// const [showEdit, setShowEdit] = useState(false);
|
||||
|
||||
async function fetchPowerData() {
|
||||
const resp = await postPowerPoolsList();
|
||||
if (isSuccessApi(resp) && resp?.data) {
|
||||
console.log('fetchPowerData_res', resp);
|
||||
setPoolsData(resp.data);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchGroupData() {
|
||||
const resp = await postPowerGroup();
|
||||
if (isSuccessApi(resp) && resp?.data) {
|
||||
console.log('fetchGroupData_res', resp);
|
||||
setGroupList(resp.data.splice(0, 4));
|
||||
}
|
||||
}
|
||||
|
||||
// 算力配置
|
||||
// function editComputePower() {
|
||||
// setShowEdit(true);
|
||||
// console.log(111, 'editComputePower');
|
||||
// }
|
||||
|
||||
useEffect(() => {
|
||||
fetchGroupData();
|
||||
fetchPowerData();
|
||||
}, []);
|
||||
|
||||
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>
|
||||
<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>
|
||||
<Button type="primary" onClick={editComputePower}>
|
||||
编辑算力配置
|
||||
</Button>
|
||||
</div> */}
|
||||
</li>
|
||||
</ul>
|
||||
</ProCard>
|
||||
{/* <UpdatePowerForm modalOpen={showEdit} poolsData={poolsData}></UpdatePowerForm> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComputePowerAllocation;
|
||||
@ -0,0 +1,7 @@
|
||||
export interface ComputePowerPoolItem {
|
||||
name: string;
|
||||
type: number; // 类别
|
||||
color?: string; //
|
||||
proportion: number;
|
||||
PretreatmentEfficiency?: number;
|
||||
}
|
||||
@ -0,0 +1,221 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-04-07 14:02:00
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-06-07 13:57:07
|
||||
* @FilePath: \general-ai-manage\src\pages\Log\index.tsx
|
||||
* @Description: 系统日志
|
||||
* @交互说明
|
||||
* 1. 系统日志分页展示、账号日期检索
|
||||
*
|
||||
*/
|
||||
import { CommButton } from '@/components/Button';
|
||||
import { apiModelList } from '@/services/business/model';
|
||||
import { isSuccessApi } from '@/utils/forApi';
|
||||
import { ReactComponent as ResetIcon } from '/public/home/reset_icon.svg';
|
||||
import { ReactComponent as SearchIcon } from '/public/home/search_icon.svg';
|
||||
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { ProCard, ProForm, ProFormText, ProTable } from '@ant-design/pro-components';
|
||||
import { FormattedMessage } from '@umijs/max';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { proTableCommonOptions, proTablePaginationOptions } from '../../../config/defaultTable';
|
||||
|
||||
// import './index.less';
|
||||
const LogIndex: React.FC = () => {
|
||||
// const access = useAccess();
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
// const intl = useIntl();
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [querysData, setQuerysData] = useState<Record<string, any>>({}); // 列表查询参数
|
||||
|
||||
// 动态设置每页数量
|
||||
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
||||
const [form] = ProForm.useForm(); // form 对象
|
||||
|
||||
function reloadList() {
|
||||
actionRef.current?.reload();
|
||||
}
|
||||
// const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
const columns: ProColumns<Record<string, any>>[] = [
|
||||
{
|
||||
title: <FormattedMessage id="model_index.table.list.name" defaultMessage="$$$" />,
|
||||
dataIndex: 'name',
|
||||
hideInSearch: true,
|
||||
key: 'fixedName',
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="model_index.table.list.type" defaultMessage="$$$" />,
|
||||
dataIndex: 'model_type',
|
||||
hideInSearch: true,
|
||||
render: (dom, record) => {
|
||||
let activeName = 'active_primary';
|
||||
switch (record.model_type) {
|
||||
case '机器学习':
|
||||
activeName = 'active3';
|
||||
break;
|
||||
default:
|
||||
activeName = 'active_primary';
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<div className={`gn_list_type_tag flex items-center justify-center ${activeName}`}>
|
||||
<span className="dot"></span>
|
||||
<span>{dom}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="model_index.table.list.industry" defaultMessage="$$$" />,
|
||||
dataIndex: 'classification_name',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage id="model_index.table.list.defaultVersionFkId" defaultMessage="$$$" />
|
||||
),
|
||||
dataIndex: 'default_version',
|
||||
hideInSearch: true,
|
||||
},
|
||||
|
||||
{
|
||||
title: <FormattedMessage id="model_index.table.list.updateTime" defaultMessage="$$$" />,
|
||||
dataIndex: 'update_time',
|
||||
hideInSearch: true,
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
];
|
||||
|
||||
// 筛选查询
|
||||
useEffect(() => {
|
||||
if (actionRef) {
|
||||
reloadList();
|
||||
}
|
||||
}, [actionRef, querysData]);
|
||||
|
||||
return (
|
||||
<div className="log_page home_container gn_table_card_wrap">
|
||||
<ProCard
|
||||
className="gn_card"
|
||||
style={{ backgroundColor: 'white' }}
|
||||
title={
|
||||
<div className="gn_form gn_table_query_filter">
|
||||
<ProForm
|
||||
className="gn_search_from"
|
||||
form={form}
|
||||
layout="horizontal"
|
||||
submitter={{
|
||||
render: () => (
|
||||
<div style={{ textAlign: 'center', marginLeft: 12 }}>
|
||||
<CommButton
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
prevIcon={<SearchIcon />}
|
||||
buttonLabel={
|
||||
<FormattedMessage id="pages.searchTable.search" defaultMessage="查询" />
|
||||
}
|
||||
></CommButton>
|
||||
<CommButton
|
||||
style={{ marginLeft: 12 }}
|
||||
htmlType="button"
|
||||
prevIcon={<ResetIcon />}
|
||||
buttonLabel={
|
||||
<FormattedMessage id="pages.searchTable.reset" defaultMessage="重置" />
|
||||
}
|
||||
onClick={() => {
|
||||
form.resetFields(); // 点击重置按钮时重置表单数据
|
||||
setQuerysData(() => {}); // 清空筛选项
|
||||
}}
|
||||
></CommButton>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
onFinish={async (values) => {
|
||||
console.log(values, 'filter_finish_values');
|
||||
setQuerysData(() => values);
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<ProFormText
|
||||
label={
|
||||
<FormattedMessage id="model_index.table.list.name" defaultMessage="模型名称" />
|
||||
}
|
||||
labelClassName="label_set_1"
|
||||
fieldProps={{
|
||||
style: {
|
||||
width: 280,
|
||||
},
|
||||
prefix: <SearchOutlined style={{ color: 'rgba(0,0,0,.25)' }} />,
|
||||
}}
|
||||
name="name"
|
||||
placeholder="请输入模型名称"
|
||||
/>
|
||||
</ProForm>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{/* // TODO 需要控制表格溢出滚动高度 */}
|
||||
<ProTable
|
||||
className="gn_pro_table"
|
||||
cardProps={{
|
||||
bodyStyle: {
|
||||
padding: '0',
|
||||
},
|
||||
}}
|
||||
search={false}
|
||||
scroll={{ x: proTableCommonOptions.commscrollX }}
|
||||
options={{ fullScreen: false, setting: false, density: false, reload: false }}
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
onDataSourceChange={(data) => {
|
||||
console.log(data, 'onDataSourceChange_data');
|
||||
// let CategoryFkIdIds: any = data.map((v) => {
|
||||
// return v.categoryFkId;
|
||||
// });
|
||||
// setCategoryFkIdIds(CategoryFkIdIds);
|
||||
}}
|
||||
pagination={{
|
||||
...proTablePaginationOptions,
|
||||
pageSize: currentPageSize,
|
||||
onChange: (pageNo, pageSize) => setCurrentPageSize(pageSize),
|
||||
}}
|
||||
columnsState={{
|
||||
persistenceKey: 'algorithm_model_list',
|
||||
persistenceType: 'localStorage',
|
||||
}}
|
||||
request={async (params = {}, sort) => {
|
||||
const { current, ...rest } = params;
|
||||
const reqParams = {
|
||||
pageNo: current,
|
||||
desc: false,
|
||||
orderKey: '',
|
||||
...rest,
|
||||
};
|
||||
if (sort && Object.keys(sort).length) {
|
||||
reqParams.orderKey = Object.keys(sort)[0];
|
||||
let sort_select = sort[reqParams.orderKey];
|
||||
reqParams.desc = sort_select === 'descend';
|
||||
}
|
||||
let resp = await apiModelList({ ...reqParams, ...querysData });
|
||||
if (!isSuccessApi(resp)) {
|
||||
return { data: [], success: true };
|
||||
}
|
||||
return {
|
||||
data: resp.data.data,
|
||||
success: resp.success,
|
||||
total: resp.data.count,
|
||||
current: current,
|
||||
pageSize: currentPageSize,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
</ProCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogIndex;
|
||||
@ -0,0 +1,35 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-03-11 14:06:18
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-06-07 10:23:17
|
||||
* @FilePath: \general-ai-platform-web\src\services\testApi\computePower.ts
|
||||
* @Description: 算力mock数据映射
|
||||
*/
|
||||
// @ts-ignore
|
||||
/* eslint-disable */
|
||||
import { request } from '@umijs/max';
|
||||
|
||||
/** 算力分配类别 */
|
||||
export async function postPowerGroup(body: any, options?: { [key: string]: any }) {
|
||||
return request<API.Response & { msg?: string }>(`/api/v1/compute_power/getPowerGroupList`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: body,
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 算力分配类别 */
|
||||
export async function postPowerPoolsList(body: any, options?: { [key: string]: any }) {
|
||||
return request<API.Response & { msg?: string }>(`/api/v1/compute_power/getPowerPoolsList`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: body,
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue