feat: 模型管理整体优化

develop2
donghao
parent cd86b64789
commit be7474ac77

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-04-19 17:10:21
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-04-24 17:03:58
* @LastEditTime: 2024-05-14 09:46:12
* @FilePath: \general-ai-platform-web\mock\pools\businessProjectData.ts
* @Description:
*/
@ -29,6 +29,7 @@ export const mockGetBusinessProjectData = {
deviceCount: 1, // 设备数量
create_time: '2024-01-22T10:59:37',
update_time: '2024-04-01T17:53:40',
validity_period: '2012-01-01 ~ 2042-12-31',
},
{
id: '2',
@ -39,6 +40,7 @@ export const mockGetBusinessProjectData = {
deviceCount: 3,
create_time: '2024-01-22T10:59:37',
update_time: '2024-04-01T17:53:54',
validity_period: '2022-01-01 ~ 2030-12-31',
},
{
id: '3',
@ -54,6 +56,7 @@ export const mockGetBusinessProjectData = {
address: '雨花台区软件大道新华汇B4栋4楼', // 公司地址
contacts: '张三', // 联系人
contactWay: '17755551234', // 联系方式
validity_period: '2016-01-01 ~ 2099-12-31',
remark:
'南京苏胜天信息科技有限公司成立于2016年拥有专业计算机视觉和深度学习方面的技术团队助力制造业工业检测实现智能化实现企业降本增效。公司核心技术是机器视觉算法致力于自动化成套视觉检测设备。 ',
},
@ -66,6 +69,7 @@ export const mockGetBusinessProjectData = {
deviceCount: 1, // 设备数量
create_time: '2024-01-22T10:59:37',
update_time: '2024-04-01T17:53:40',
validity_period: '2018-01-01 ~ 2099-12-31',
},
{
id: '5',
@ -76,6 +80,7 @@ export const mockGetBusinessProjectData = {
deviceCount: 3,
create_time: '2024-01-22T10:59:37',
update_time: '2024-04-01T17:53:54',
validity_period: '2016-01-01 ~ 2049-12-31',
},
{
id: '6',
@ -86,6 +91,7 @@ export const mockGetBusinessProjectData = {
deviceCount: 1,
create_time: '2024-01-22T10:58:57',
update_time: '2024-04-01T17:54:01',
validity_period: '2018-01-01 ~ 2039-12-31',
},
{
id: '7',
@ -96,6 +102,7 @@ export const mockGetBusinessProjectData = {
deviceCount: 3,
create_time: '2024-01-22T10:59:37',
update_time: '2024-04-01T17:53:54',
validity_period: '2021-01-01 ~ 2035-12-31',
},
],
},

@ -1,6 +1,33 @@
import { generateRandomString } from '../utils/mockHash';
import { generateRandomDateTimeByYear } from '../utils/mockMoment';
const generatrModelRuntimeLib = () => {
const currList: Record<string, any>[] = [];
const count = 31;
const nameArr = [
'玻璃表面缺陷检测',
'管材表面缺陷检测',
'锂电池底壳焊工位检测',
'气泡检测',
'明火烟雾识别',
];
for (let i = 0; i < count; i++) {
currList.push({
id: i + '1',
createTime: generateRandomDateTimeByYear(2022),
updateTime: generateRandomDateTimeByYear(2023),
name: nameArr[i % 5], // 设备名称
path: '192.168.10.60:5000/ubuntu:v1',
startCode: '',
remark: '',
});
}
return {
count,
results: currList,
};
};
// 模型列表
export const mockGetModelListData = {
data: {
@ -3150,54 +3177,7 @@ export const mockGetModelListData = {
// 模型运行库列表
export const mockGetModelRuntimeLibListData = {
data: {
count: 5,
results: [
{
id: 1,
createTime: '2023-12-28T10:53:15.871746+08:00',
updateTime: '2023-12-28T16:17:04.871746+08:00',
name: '玻璃表面缺陷检测',
path: '192.168.10.60:5000/ubuntu:v1',
startCode: '',
remark: '',
},
{
id: 2,
createTime: '2024-03-02T11:05:31.871746+08:00',
updateTime: '2024-03-02T12:37:08.871746+08:00',
name: '管材表面缺陷检测',
path: '192.168.10.60:5000/ubuntu:v1',
startCode: '',
remark: '',
},
{
id: 3,
createTime: '2024-03-06T17:25:31.871746+08:00',
updateTime: '2024-04-01T09:13:44.871746+08:00',
name: '锂电池底壳焊工位检测',
path: '192.168.10.60:5000/ubuntu:v1',
startCode: '',
remark: '',
},
{
id: 4,
createTime: '2024-03-14T13:07:31.871746+08:00',
updateTime: '2024-04-12T09:51:02.871746+08:00',
name: '气泡检测',
path: '192.168.10.60:5000/ubuntu:v1',
startCode: '',
remark: '',
},
{
id: 5,
createTime: '2024-04-10T12:39:10.871746+08:00',
updateTime: '2024-04-14T14:03:55.871746+08:00',
name: '明火烟雾识别',
path: '192.168.10.60:5000/ubuntu:v1',
startCode: '',
remark: '',
},
],
...generatrModelRuntimeLib(),
},
};

@ -157,7 +157,22 @@
color: #cccccc;
}
.ant-form-item .anticon {
color: #cccccc !important;
color: #cccccc;
}
.ant-modal .ant-modal-title {
color: #333333;
}
.ant-modal .ant-modal-close {
color: #666666;
}
.ant-modal .ant-tag {
color: #333333;
}
.ant-modal .ant-tag-close-icon {
color: #666666;
}
.ant-modal .anticon-plus {
color: #154ddd;
}
/* 自定义组件 */
.gn_list_card_title {
@ -230,3 +245,62 @@
border-radius: 2px;
}
/* 灰屏效果 */
/* 分类更新 */
.gn_categorize_update .ant-form-item-label {
margin-top: 4px;
}
/* Descriptions 描述展示 */
.gn_descriptions {
padding: 16px 16px 0;
background: #ffffff;
border: 1px solid rgba(21, 77, 221, 0.1);
border-radius: 4px;
}
.gn_descriptions .ant-descriptions-item-label {
color: #333333;
font-weight: bold;
}
.gn_descriptions .ant-descriptions-item-content {
color: #333333;
}
.gn_active_descriptions {
background: #ebf3ff;
}
.gn_active_descriptions .ant-descriptions-item-label {
color: #666666;
font-weight: normal;
}
.gn_active_descriptions .ant-descriptions-item-content {
color: #333333;
}
/* 表单组件 */
.gn_form .ant-radio-button-wrapper {
margin-right: 12px;
border-radius: 4px;
border-inline-start-width: 1px;
color: #666666;
height: 28px;
line-height: 26px;
}
.gn_form .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before {
background-color: transparent;
}
.gn_form .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
color: #ffffff;
background: transparent;
border-color: transparent;
}
.gn_form .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
background-color: transparent;
}
.gn_form .ant-radio-button-wrapper:not(:first-child)::before {
background-color: transparent;
}
.gn_form .ant-radio-button-checked {
border-radius: 4px;
color: #ffffff;
background: #154ddd;
}
.gn_form .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
color: #ffffff;
}

@ -179,7 +179,25 @@
color: @gray_color_1;
}
.anticon {
color: @gray_color_1 !important;
color: @gray_color_1;
}
}
// 通用弹窗
.ant-modal {
.ant-modal-title {
color: @text_color_1;
}
.ant-modal-close {
color: @text_color_2;
}
.ant-tag {
color: @text_color_1;
}
.ant-tag-close-icon {
color: @text_color_2;
}
.anticon-plus {
color: @primary_color;
}
}
@ -276,3 +294,70 @@
filter: gray;
filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
/* 分类更新 */
.gn_categorize_update {
.ant-form-item-label {
margin-top: 4px;
}
}
/* Descriptions 描述展示 */
.gn_descriptions {
padding: 16px 16px 0;
background: #ffffff;
border: 1px solid rgba(21, 77, 221, 0.1);
border-radius: 4px;
.ant-descriptions-item-label {
color: @text_color_1;
font-weight: bold;
}
.ant-descriptions-item-content {
color: @text_color_1;
}
}
.gn_active_descriptions {
background: #ebf3ff;
.ant-descriptions-item-label {
color: @text_color_2;
font-weight: normal;
}
.ant-descriptions-item-content {
color: @text_color_1;
}
}
/* 表单组件 */
.gn_form {
.ant-radio-button-wrapper {
height: 28px;
margin-right: 12px;
color: @text_color_2;
line-height: 26px;
border-radius: 4px;
border-inline-start-width: 1px;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before {
background-color: transparent;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
color: #ffffff;
background: transparent;
border-color: transparent;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
background-color: transparent;
}
.ant-radio-button-wrapper:not(:first-child)::before {
background-color: transparent;
}
.ant-radio-button-checked {
color: #ffffff;
background: @primary_color;
border-radius: 4px;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
color: #ffffff;
}
}

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-04-07 14:02:00
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-04-30 14:57:45
* @LastEditTime: 2024-05-14 15:31:03
* @FilePath: \general-ai-manage\src\components\CategorizeUpdate\index.tsx
* @Description:
* @
@ -107,12 +107,12 @@ const CategorizeUpdate: React.FC<CategorizeUpdateProps> = (props) => {
background: '#FFFFFF',
border: '1px solid #154DDD',
color: '#154DDD',
borderStyle: 'dashed',
// borderStyle: 'dashed',
};
return (
<ModalForm<Record<string, any>>
className="gn_form"
className="gn_form gn_categorize_update"
width={proFormSmallModelWidth}
{...props?.modalFormProps?.categorizeModelProps}
open={props.visible}
@ -130,7 +130,7 @@ const CategorizeUpdate: React.FC<CategorizeUpdateProps> = (props) => {
}}
>
<ProForm.Item {...props?.modalFormProps?.categorizeFormProps}>
<Flex gap="8px 0" wrap="wrap">
<Flex gap="16px 0" wrap="wrap">
{tags.map<React.ReactNode>((tag, index) => {
if (editInputIndex === index) {
return (

@ -73,7 +73,7 @@ ol {
padding: 16px 16px 0;
}
.gn_head_card {
padding: 0 20px;
padding: 0 24px;
overflow: hidden;
border-radius: 8px;
}
@ -183,13 +183,6 @@ ol {
background: url('../public/home/business_arrow.svg') no-repeat;
background-size: cover;
}
/* Descriptions */
.gn_active_descriptions {
padding: 16px 16px 0;
background: #ffffff;
border: 1px solid rgba(21, 77, 221, 0.1);
border-radius: 8px;
}
/* ProTable ProList */
.gn_pro_table .ant-table-wrapper .ant-table-thead > tr > th,
.gn_pro_table .ant-table-wrapper .ant-table-thead > tr > td {
@ -209,8 +202,8 @@ ol {
padding: 0;
}
.gn_pro_list .ant-pro-checkcard {
border: none !important;
background: transparent;
border: none !important;
}
.gn_pro_list .ant-pro-checkcard-content {
padding-inline: 0;

@ -91,7 +91,7 @@ ol {
}
}
.gn_head_card {
padding: 0 20px;
padding: 0 24px;
overflow: hidden;
border-radius: 8px;
border-radius: 8px;
@ -226,15 +226,6 @@ ol {
}
}
/* Descriptions */
// 描述展示
.gn_active_descriptions {
padding: 16px 16px 0;
background: #ffffff;
border: 1px solid rgba(21, 77, 221, 0.1);
border-radius: 8px;
}
/* ProTable ProList */
.gn_pro_table {
.ant-table-wrapper .ant-table-thead > tr > th,

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-04-09 15:08:13
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-05-13 15:20:28
* @LastEditTime: 2024-05-14 10:08:24
* @FilePath: \general-ai-manage\src\locales\zh-CN\businessProject.ts
* @Description:
*/
@ -23,10 +23,11 @@ export const business_list: { [key: string]: string } = {
'business.list.table.form.rule.required.contacts': '请填写联系人',
'business.list.table.form.contactWay': '联系方式',
'business.list.table.form.rule.required.contactWay': '请填写联系方式',
'business.list.table.form.remark': '简介',
'business.list.table.form.rule.required.remark': '请填写简介',
'business.list.table.form.remark': '公司简介',
'business.list.table.form.rule.required.remark': '请填写公司简介',
'business.list.table.form.logo': '企业logo',
'business.list.table.form.rule.required.logo': '请上传企业logo',
'business.list.table.form.validity_period': '服务有效期',
'business.list.table.action.edit': '资料编辑',
'business.list.table.action.destroy': '删除项目',

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-04-10 17:21:34
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-05-10 17:18:57
* @LastEditTime: 2024-05-14 16:40:35
* @FilePath: \general-ai-manage\src\locales\zh-CN\model.ts
* @Description:
*/
@ -33,6 +33,8 @@ export const model_index: { [key: string]: string } = {
'model_index.create.form.rule.required.industry': '请选择行业分类',
'model_index.create.form.remark': '备注',
'model_index.create.form.rule.required.remark': '请填写备注',
// 'model_detail.version.table.list.action.defaultVersion': '设为默认'
};
// 模型运行库
export const model_runtimeLib: { [key: string]: string } = {
@ -75,6 +77,10 @@ export const model_version: { [key: string]: string } = {
'model_detail.version.form.required.name': '请填写版本号',
'model_detail.version.form.remark': '备注',
'model_detail.version.list.table.form.rule.required.name': '请填写版本号',
'model_detail.version.table.list.tag.defaultVersion': '默认版本',
'model_detail.version.table.list.title': '版本列表',
'model_detail.version.table.list.action.add': '新建版本信息',
};
// 业务模型

@ -271,7 +271,7 @@ const DetailDeviceState: React.FC<DetailDeviceStateProps> = ({ info, detailOpen,
defaultMessage="设备参数"
/>
</p>
<div className="my-[8px] gn_active_descriptions bg_active_4">
<div className="my-[8px] gn_active_descriptions gn_descriptions bg_active_4">
<ProDescriptions
column={4}
columns={ModelDetailColumns}

@ -280,7 +280,7 @@ const DetailServerState: React.FC<DetailServerStateProps> = ({ info, detailOpen,
defaultMessage="服务器参数"
/>
</p>
<div className="my-[8px] gn_active_descriptions bg_active_4">
<div className="my-[8px] gn_active_descriptions gn_descriptions bg_active_4">
<ProDescriptions
column={5}
columns={ModelDetailColumns}

@ -53,7 +53,7 @@ const BaseInfo: React.FC<BaseInfoProps> = ({ info }) => {
},
];
return (
<div className="gn_active_descriptions bg_active_4">
<div className="gn_active_descriptions gn_descriptions bg_active_4">
<ProDescriptions column={3} columns={DeviceDetailColumns} dataSource={info}></ProDescriptions>
</div>
);

@ -128,7 +128,7 @@ const ModelDeployConfig: React.FC<ModelDeployConfigProps> = ({ info, detailOpen,
cancelText={<FormattedMessage id="pages.modelForm.cancelText" defaultMessage="取消" />}
>
<ProCard className="gn_card" bodyStyle={{ padding: 0 }}>
<div className="my-[8px] gn_active_descriptions bg_active_4">
<div className="my-[8px] gn_active_descriptions gn_descriptions bg_active_4">
<ProDescriptions column={1} columns={detailColumns} dataSource={info}></ProDescriptions>
</div>
<div className="head4 py-[8px]">

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-04-08 10:36:06
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-05-13 10:44:32
* @LastEditTime: 2024-05-14 17:02:41
* @FilePath: \general-ai-manage\src\pages\Model\ModelDetail\index.tsx
* @Description:
* @
@ -11,13 +11,14 @@
* 3
*/
import InnerPageBack from '@/components/Back/innerPageBack';
import { CommButton } from '@/components/Button';
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
import { getModelDetail, getModelVersionList } from '@/services/testApi/model';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProCard, ProDescriptions, ProTable } from '@ant-design/pro-components';
import { Access, FormattedMessage, history, useAccess, useParams } from '@umijs/max';
import { FormattedMessage, useParams } from '@umijs/max';
import { Button } from 'antd';
import { useRef, useState } from 'react';
import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
@ -25,7 +26,7 @@ import CreateForm from './components/createForm';
const ModelDetail: React.FC = () => {
const routeParams = useParams(); // 路由参数读取
const access = useAccess();
// const access = useAccess();
// const intl = useIntl();
const actionRef = useRef<ActionType>();
@ -102,7 +103,10 @@ const ModelDetail: React.FC = () => {
}}
className="default_version_tag"
>
<FormattedMessage
id="model_detail.version.table.list.tag.defaultVersion"
defaultMessage="默认版本"
/>
</span>
)}
</span>
@ -149,7 +153,9 @@ const ModelDetail: React.FC = () => {
{
key: 'setDefault',
renderDom: record.isEnable ? (
<span style={{ color: '#ccc' }}></span>
<span style={{ color: '#ccc' }}>
<FormattedMessage id="pages.searchTable.setDefault" defaultMessage="设为默认" />
</span>
) : (
<Button
key="setDefault"
@ -208,7 +214,7 @@ const ModelDetail: React.FC = () => {
bodyStyle={{ padding: 0, margin: 0, backgroundColor: 'transparent' }}
>
<InnerPageBack title=""></InnerPageBack>
<div className="gn_active_descriptions mb-[20px]">
<div className="gn_descriptions mb-[20px]">
<ProDescriptions
column={3}
columns={ModelDetailColumns}
@ -226,68 +232,82 @@ const ModelDetail: React.FC = () => {
}}
></ProDescriptions>
</div>
<ProTable
className="gn_pro_table"
headerTitle={<span></span>}
// 标题栏
toolBarRender={() => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<div className="my-[16px]">
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined />
<FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</div>
</Access>,
]}
search={false}
scroll={{ y: proTableCommonOptions.commscrollY, 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: (page, pageSize) => setCurrentPageSize(pageSize),
}}
columnsState={{
persistenceKey: 'algorithm_model_list',
persistenceType: 'localStorage',
}}
request={async (params = {}) => {
const { current, ...rest } = params;
const reqParams = {
page: current,
...rest,
};
let resp = await getModelVersionList({ ...reqParams });
console.log(resp, 'getModelVersionList_resp');
return {
data: resp.data?.results,
success: resp.success,
total: resp.data.count,
current: current,
pageSize: currentPageSize,
};
}}
columns={columns}
/>
<div className="gn_head_card" style={{ padding: 0 }}>
<ProCard
className="gn_card"
title={
<span className="head3">
<FormattedMessage
id="model_detail.version.table.list.title"
defaultMessage="版本列表"
/>
</span>
}
extra={
<CommButton
type="primary"
buttonLabel={
<FormattedMessage
id="model_detail.version.table.list.action.add"
defaultMessage="新建版本信息"
/>
}
onClick={() => {
handleCreateModal();
}}
></CommButton>
}
>
<ProTable
className="gn_pro_table"
cardProps={{
bodyStyle: { padding: 0 },
}}
// 标题栏
search={false}
scroll={{
y: 420,
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: (page, pageSize) => setCurrentPageSize(pageSize),
}}
columnsState={{
persistenceKey: 'algorithm_model_list',
persistenceType: 'localStorage',
}}
request={async (params = {}) => {
const { current, ...rest } = params;
const reqParams = {
page: current,
...rest,
};
let resp = await getModelVersionList({ ...reqParams });
console.log(resp, 'getModelVersionList_resp');
return {
data: resp.data?.results,
success: resp.success,
total: resp.data.count,
current: current,
pageSize: currentPageSize,
};
}}
columns={columns}
/>
</ProCard>
</div>
</ProCard>
<CreateForm
createModalOpen={createModalOpen}

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-04-23 17:00:00
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-05-09 16:52:13
* @LastEditTime: 2024-05-14 10:20:13
* @FilePath: \general-ai-platform-web\src\pages\Project\BusinessInfo\components\baseInfo.tsx
* @Description:
*
@ -18,13 +18,6 @@ type BaseInfoProps = {
const BaseInfo: React.FC<BaseInfoProps> = ({ info }) => {
// 模型基本信息
const ModelDetailColumns = [
{
title: <FormattedMessage id="business.list.table.form.address" defaultMessage="公司地址" />,
dataIndex: 'address',
render: (_, record) => {
return record?.province + record?.city + record.address;
},
},
{
title: <FormattedMessage id="business.list.table.form.industry" defaultMessage="所属行业" />,
dataIndex: 'industryName',
@ -39,13 +32,31 @@ const BaseInfo: React.FC<BaseInfoProps> = ({ info }) => {
),
dataIndex: 'contactWay',
},
{
title: (
<FormattedMessage
id="business.list.table.form.validity_period"
defaultMessage="服务有效期"
/>
),
dataIndex: 'validity_period',
},
{
title: <FormattedMessage id="business.list.table.form.address" defaultMessage="公司地址" />,
dataIndex: 'address',
render: (_, record) => {
return record?.province + record?.city + record.address;
},
span: 4,
},
{
title: <FormattedMessage id="business.list.table.form.remark" defaultMessage="公司简介" />,
dataIndex: 'remark',
span: 4,
},
];
return (
<div className="gn_active_descriptions bg_active_4">
<div className="gn_active_descriptions gn_descriptions bg_active_4">
<ProDescriptions column={4} columns={ModelDetailColumns} dataSource={info}></ProDescriptions>
</div>
);

@ -8,7 +8,7 @@ import { innerMenuRoutes } from '../../../../config/routes';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {
LoginForm,
LoginFormPage,
ProConfigProvider,
ProFormCheckbox,
ProFormText,
@ -37,7 +37,6 @@ import './login.less';
// },
// };
// });
// return (
// <>
// <AlipayCircleOutlined key="AlipayCircleOutlined" className={langClassName} />
@ -101,8 +100,8 @@ const Login: React.FC = () => {
flexDirection: 'column',
height: '100vh',
overflow: 'auto',
backgroundImage:
"url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
// backgroundImage:
// "url('https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr')",
backgroundSize: '100% 100%',
};
});
@ -219,13 +218,13 @@ const Login: React.FC = () => {
className="loginFrom"
>
<div className="loginBox">
<div className="loginLeft">
{/* <div className="loginLogo"></div> */}
{/* <div className="loginLeft">
<div className="loginBanner"></div>
</div>
</div> */}
<div className="loginRight">
<ProConfigProvider>
<LoginForm
<LoginFormPage
backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
form={form}
containerStyle={{
maxWidth: 496,
@ -352,7 +351,7 @@ const Login: React.FC = () => {
</a>
</div>
</LoginForm>
</LoginFormPage>
</ProConfigProvider>
</div>
</div>

@ -4,38 +4,28 @@
justify-content: space-between;
width: 100%;
height: 100%;
background-image: url('../../../../public/login/login_bg@2x.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.loginFrom .loginLeft {
width: 56.67vw;
height: 100%;
padding-top: 72px;
padding-left: 120px;
}
.loginFrom .loginLeft .loginLogo {
width: 362px;
height: 70px;
background-image: url('../../../../public/login/login_logo@2x.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.loginFrom .loginLeft .loginBanner {
width: 35.36vw;
height: 39.5vw;
margin-top: 63px;
background-image: url('../../../../public/login/login_banner@2x.png');
background: url('https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.loginFrom .loginRight {
width: 43.33vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: white;
width: 100%;
height: 100%;
}
.loginFrom .loginRight .ant-pro-form-login-page-container {
position: fixed;
top: 50%;
left: 50%;
margin-left: -248px;
margin-top: -283px;
border-radius: 16px;
background-color: rgba(255, 255, 255, 0.6);
}
.loginFrom .loginRight .ant-pro-form-login-page-title {
padding-bottom: 32px;
}
.loginFrom .ant-pro-form-login-container .ant-pro-form-login-title {
padding-bottom: 32px;

@ -5,43 +5,61 @@
justify-content: space-between;
width: 100%;
height: 100%;
background-image: url('../../../../public/login/login_bg@2x.png');
background: url('https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.loginLeft {
// background-image: url('../../../../public/login/login_banner@2x.png');
// background-repeat: no-repeat;
width: 56.67vw;
height: 100%;
// .loginLeft {
// // background-image: url('../../../../public/login/login_banner@2x.png');
// // background-repeat: no-repeat;
// width: 56.67vw;
// height: 100%;
padding-top: 72px;
padding-left: 120px;
// background-size: 100% 100%;
.loginLogo {
width: 362px;
height: 70px;
background-image: url('../../../../public/login/login_logo@2x.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.loginBanner {
width: 35.36vw;
height: 39.5vw;
margin-top: 63px;
background-image: url('../../../../public/login/login_banner@2x.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
// padding-top: 72px;
// padding-left: 120px;
// // background-size: 100% 100%;
// .loginLogo {
// width: 362px;
// height: 70px;
// // background-image: url('../../../../public/login/login_logo@2x.png');
// background-repeat: no-repeat;
// background-size: 100% 100%;
// }
// .loginBanner {
// width: 35.36vw;
// height: 39.5vw;
// margin-top: 63px;
// // background-image: url('../../../../public/login/login_banner@2x.png');
// background-repeat: no-repeat;
// background-size: 100% 100%;
// }
// }
.loginRight {
display: flex;
align-items: center;
justify-content: center;
width: 43.33vw;
width: 100%;
height: 100%;
background: white;
.ant-pro-form-login-page-container {
position: fixed;
top: 50%;
left: 50%;
margin-top: -283px;
margin-left: -248px;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 16px;
}
.ant-pro-form-login-page-title {
padding-bottom: 32px;
}
// width: 31.2vw;
// border-radius: 8px;
// margin-right: 10vw;
// width: 43.33vw;
// height: 100%;
// background: red;
}
.ant-pro-form-login-container {
// background: red !important;

Loading…
Cancel
Save