feat: 初始化算力中心
@ -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,
|
||||||
|
};
|
After Width: | Height: | Size: 660 KiB |
After Width: | Height: | Size: 463 KiB |
After Width: | Height: | Size: 4.1 MiB |
Before Width: | Height: | Size: 384 KiB After Width: | Height: | Size: 384 KiB |
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 || {}),
|
||||||
|
});
|
||||||
|
}
|