featï: mock更新

develop
chunquansang 1 year ago
parent 654a944ec4
commit 3e821d2888

@ -100,13 +100,17 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
setFileList([...curFile]); setFileList([...curFile]);
}; };
// todo disabled: !v?.defaultVersionFkId,设置 暂时设置为false 创建成功后报error
const getModelData = () => { const getModelData = () => {
postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: '' }).then((res) => { postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: '' }).then((res) => {
console.log(66666, res.data)
let result = (res.data?.list || []).map((v: any) => { let result = (res.data?.list || []).map((v: any) => {
console.log(v)
return { return {
key: v.id, key: v.id,
title: v.name, title: v.name,
chosen: false, chosen: false,
disabled: false,
}; };
}); });
setModalData(result); setModalData(result);
@ -341,7 +345,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
name="model" name="model"
title="关联算法模型" title="关联算法模型"
stepProps={{ stepProps={{
description: '选择算法模型', description: '请先为模型设置默认版本',
}} }}
onFinish={async () => { onFinish={async () => {
return true; return true;

@ -13,7 +13,7 @@ export const AlgorithmModelColumns = [{
title: (<FormattedMessage title: (<FormattedMessage
id="resource.algorithm_model.table.list.categoryFkId" id="resource.algorithm_model.table.list.categoryFkId"
defaultMessage="$$$"/>), defaultMessage="$$$"/>),
dataIndex: "category_fk_id", dataIndex: "categoryFkId",
},{ },{
title: (<FormattedMessage title: (<FormattedMessage
id="resource.algorithm_model.table.list.remark" id="resource.algorithm_model.table.list.remark"
@ -23,10 +23,13 @@ export const AlgorithmModelColumns = [{
title: (<FormattedMessage title: (<FormattedMessage
id="resource.algorithm_model.table.list.createTime" id="resource.algorithm_model.table.list.createTime"
defaultMessage="$$$"/>), defaultMessage="$$$"/>),
dataIndex: "create_time", dataIndex: "createTime",
valueType: 'dateTime',
},{ },{
title: (<FormattedMessage title: (<FormattedMessage
id="resource.algorithm_model.table.list.updateTime" id="resource.algorithm_model.table.list.updateTime"
defaultMessage="$$$"/>), defaultMessage="$$$"/>),
dataIndex: "update_time", dataIndex: "updateTime",
valueType: 'dateTime',
},] },]

@ -1,4 +1,7 @@
import { postAlgorithmModelGetAlgorithmModelById } from '@/services/resource/AlgorithmModel'; import {
postAlgorithmModelGetAlgorithmModelById,
putAlgorithmModelUpdateAlgorithmModel
} from '@/services/resource/AlgorithmModel';
import { deleteModelVersionDeleteModelVersion, postModelVersionGetModelVersionList } from '@/services/resource/ModelVersion'; import { deleteModelVersionDeleteModelVersion, postModelVersionGetModelVersionList } from '@/services/resource/ModelVersion';
import { ArrowLeftOutlined, PlusOutlined } from '@ant-design/icons'; import { ArrowLeftOutlined, PlusOutlined } from '@ant-design/icons';
import { import {
@ -17,7 +20,9 @@ import MyCreateForm from '../ModelVersionList/components/MyCreateForm';
import TableActionCard from '@/components/TableActionCard'; import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete'; import IsDelete from '@/components/TableActionCard/isDelete';
import UpdateForm from '../ModelVersionList/components/UpdateForm'; import UpdateForm from '../ModelVersionList/components/UpdateForm';
import {proTableCommonOptions} from "../../../../config/defaultTable";
import {AlgorithmModelColumns} from "./components/Columns"
import IsConfirmAction from "@/components/TableActionCard/isConfirmAction";
/**styles */ /**styles */
const detailStylesProps = { const detailStylesProps = {
@ -67,13 +72,6 @@ const AlgorithmModelDetail: React.FC = () => {
sorter: true, sorter: true,
}, },
{
title: (
<FormattedMessage id="resource.model_version.table.list.modelFkId" defaultMessage="$$$" />
),
dataIndex: 'modelFkId',
hideInSearch: false,
},
{ {
title: <FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" />, title: <FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" />,
@ -87,14 +85,6 @@ const AlgorithmModelDetail: React.FC = () => {
hideInSearch: true, hideInSearch: true,
}, },
{
title: (
<FormattedMessage id="resource.model_version.table.list.startCode" defaultMessage="$$$" />
),
dataIndex: 'startCode',
hideInSearch: true,
},
{ {
title: ( title: (
<FormattedMessage id="resource.model_version.table.list.isEnable" defaultMessage="$$$" /> <FormattedMessage id="resource.model_version.table.list.isEnable" defaultMessage="$$$" />
@ -152,6 +142,32 @@ const AlgorithmModelDetail: React.FC = () => {
<TableActionCard <TableActionCard
key="TableActionCardRef" key="TableActionCardRef"
renderActions={[ renderActions={[
{
key: 'default',
renderDom: (
<IsConfirmAction
title="设为默认"
buttonText="设为默认"
confirmAction={() => {
// setPublishModalOpen(true);
putAlgorithmModelUpdateAlgorithmModel({
id: record.modelFkId,
defaultVersionFkId: record.id,
})
.then(() => {
message.success(
intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }),
);
})
.catch(() => {
message.error(
intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }),
);
});
}}
></IsConfirmAction>
),
},
{ {
key: 'update', key: 'update',
renderDom: ( renderDom: (
@ -243,7 +259,7 @@ const AlgorithmModelDetail: React.FC = () => {
column={4} column={4}
title="模型详细信息" title="模型详细信息"
tooltip="包含了模型详细信息" tooltip="包含了模型详细信息"
columns={columns} columns={AlgorithmModelColumns}
request={async () => { request={async () => {
console.log(routeParams, 'id'); console.log(routeParams, 'id');
const resp = await postAlgorithmModelGetAlgorithmModelById({ const resp = await postAlgorithmModelGetAlgorithmModelById({
@ -284,6 +300,9 @@ const AlgorithmModelDetail: React.FC = () => {
actionRef={actionRef} actionRef={actionRef}
tableStyle={{ paddingTop: 15, paddingBottom: 15 }} tableStyle={{ paddingTop: 15, paddingBottom: 15 }}
columns={columns} columns={columns}
scroll={{
x: proTableCommonOptions.scrollX,
}}
cardBordered cardBordered
toolBarRender={() => [ toolBarRender={() => [

@ -4,6 +4,7 @@ import {
ModalForm, ModalForm,
ProForm, ProForm,
ProFormDependency, ProFormDependency,
ProFormTextArea,
ProFormSelect, ProFormSelect,
ProFormText, ProFormText,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
@ -53,12 +54,12 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
return false; return false;
} }
if (!isValidIPv4(form.getFieldValue('IP'))) { if (!isValidIPv4(form.getFieldValue('ip'))) {
message.warning('无效的服务器地址'); message.warning('无效的服务器地址');
return; return;
} }
if (!isValidPort(form.getFieldValue('IPPort'))) { if (!isValidPort(form.getFieldValue('ipPort'))) {
message.warning('无效的端口'); message.warning('无效的端口');
return; return;
} }
@ -66,7 +67,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
setIsFlag(true); setIsFlag(true);
} }
const handleResponse = (data) => { const handleResponse = (data: any) => {
console.log(data, 'handleResponse'); console.log(data, 'handleResponse');
// 对返回的数据进行处理 // 对返回的数据进行处理
}; };
@ -74,15 +75,16 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
async function postCurrentIP() { async function postCurrentIP() {
// http://192.168.10.96:5003/v2/_catalog // http://192.168.10.96:5003/v2/_catalog
const resp = await axios.get( const resp = await axios.get(
`http://${form.getFieldValue('IP')}:${form.getFieldValue('IPPort')}/v2/_catalog`, `http://${form.getFieldValue('ip')}:${form.getFieldValue('ipPort')}/v2/_catalog`,
); );
console.log(resp, 'resp'); console.log(resp, 'resp');
return resp?.data; return resp?.data;
} }
async function doChangeUseIPPort() { async function doChangeUseipPort() {
form.setFieldValue('imageVersion', null)
const resp = await axios.get( const resp = await axios.get(
`http://${form.getFieldValue('IP')}:${form.getFieldValue('IPPort')}/v2/${form.getFieldValue('useIPPort')}/tags/list`, `http://${form.getFieldValue('ip')}:${form.getFieldValue('ipPort')}/v2/${form.getFieldValue('imageName')}/tags/list`,
); );
let finalData = resp?.data?.tags?.map((v: any) => { let finalData = resp?.data?.tags?.map((v: any) => {
return { return {
@ -108,7 +110,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
} }
return ( return (
<ModalForm<API.ModelImage> <ModalForm<API.ModelImage & {imageName?: string, imageVersion?: string, ip?: string, ipPort?: string }>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'resource.model_image.table.list.add', id: 'resource.model_image.table.list.add',
@ -123,6 +125,9 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
}} }}
submitTimeout={2000} submitTimeout={2000}
onFinish={async (values) => { onFinish={async (values) => {
console.log(4444, values)
// let imageId = `${values.ip}:${values.ipPort}/${values.imageName}:${values.imageVersion}`
// console.log(5555, imageId)
postModelImageCreateModelImage(values) postModelImageCreateModelImage(values)
.then(() => { .then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
@ -162,40 +167,10 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
}, },
]} ]}
/> />
<ProFormSelect
width={proFormItemStyleProps.column2Width}
name="modelVersionFkId"
label={
<FormattedMessage
id="resource.model_image.table.list.modelVersionFkId"
defaultMessage="$$$"
/>
}
placeholder={`${intl.formatMessage({
id: 'common.please_select',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_image.table.list.modelVersionFkId',
defaultMessage: '$$$',
})}`}
required={true}
showSearch
debounceTime={1000}
request={async (keyWord) => {
const resp = await postModelVersionGetModelVersionFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => {
return {
label: v.name,
value: v.id,
};
});
}}
/>
<ProFormText <ProFormText
width={proFormItemStyleProps.column2Width} width={proFormItemStyleProps.column2Width}
name="path" name="path"
tooltip={'请在下方填入镜像服务器地址'}
label={ label={
<FormattedMessage id="resource.model_image.table.list.path" defaultMessage="$$$" /> <FormattedMessage id="resource.model_image.table.list.path" defaultMessage="$$$" />
} }
@ -206,37 +181,19 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
id: 'resource.model_image.table.list.path', id: 'resource.model_image.table.list.path',
defaultMessage: '$$$', defaultMessage: '$$$',
})}`} })}`}
required={false} required={true}
/> disabled={true}
<ProFormText rules={[
width={proFormItemStyleProps.column2Width} {
name="startCode" required: true,
label={ message: (
<FormattedMessage id="resource.model_image.table.list.startCode" defaultMessage="$$$" /> <FormattedMessage
} id="resource.model_image.table.rule.required.path"
placeholder={`${intl.formatMessage({ defaultMessage="path is required"
id: 'common.please_input', />
defaultMessage: '$$$', ),
})}${intl.formatMessage({ },
id: 'resource.model_image.table.list.startCode', ]}
defaultMessage: '$$$',
})}`}
required={false}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="remark"
label={
<FormattedMessage id="resource.model_image.table.list.remark" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_image.table.list.remark',
defaultMessage: '$$$',
})}`}
required={false}
/> />
{/* {/*
@ -252,22 +209,24 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
<Space> <Space>
<ProFormText <ProFormText
width={180} width={180}
name="IP" name="ip"
label={'IP地址'} label={'IP地址'}
initialValue={"192.168.10.60"}
placeholder={'请输入IP地址'} placeholder={'请输入IP地址'}
required={false} required={false}
onChange={() => { fieldProps={{onChange: () => {
setIsFlag(false); setIsFlag(false)}
}} }}
/> />
<ProFormText <ProFormText
width={110} width={110}
name="IPPort" name="ipPort"
label={'端口号'} label={'端口号'}
placeholder={'请输入端口号'} placeholder={'请输入端口号'}
initialValue={"5000"}
required={false} required={false}
onChange={() => { fieldProps={{onChange: () => {
setIsFlag(false); setIsFlag(false)}
}} }}
/> />
<Button style={{ marginTop: 15 }} type="primary" onClick={() => doFindIPNext()}> <Button style={{ marginTop: 15 }} type="primary" onClick={() => doFindIPNext()}>
@ -276,14 +235,14 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
</Space> </Space>
{isFlag ? ( {isFlag ? (
<> <>
<ProFormDependency name={['IP']}> <ProFormDependency name={['ip']}>
{({ IP }) => { {({ ip }) => {
if (IP) { if (ip) {
return ( return (
<ProFormSelect <ProFormSelect
width={175} width={175}
name="useIPPort" name="imageName"
label="选择1" label="镜像名称"
debounceTime={1000} debounceTime={1000}
request={async () => { request={async () => {
const resp = await postCurrentIP(); const resp = await postCurrentIP();
@ -294,21 +253,25 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
}; };
}); });
}} }}
onChange={() => doChangeUseIPPort()} onChange={() => doChangeUseipPort()}
/> />
); );
} }
return <></>; return <></>;
}} }}
</ProFormDependency> </ProFormDependency>
<ProFormDependency name={['useIPPort']}> <ProFormDependency name={['imageName', 'ip', 'ipPort', 'imageName']}>
{({ useIPPort }) => { {({ imageName, ip, ipPort }) => {
if (useIPPort) { if (imageName) {
return ( return (
<ProFormSelect <ProFormSelect
width={175} width={175}
name="useMode2" onChange={(value) =>{
label="选择2" console.log(`${ip}:${ipPort}/${imageName}:${value}`)
form.setFieldValue('path', `${ip}:${ipPort}/${imageName}:${value}`)
}}
name="imageVersion"
label="镜像版本"
debounceTime={1000} debounceTime={1000}
options={mode2Options} options={mode2Options}
/> />
@ -319,9 +282,40 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
</ProFormDependency> </ProFormDependency>
</> </>
) : ( ) : (
'' <></>
)} )}
</ProForm.Group> </ProForm.Group>
<ProFormTextArea
width={proFormItemStyleProps.column2Width}
name="startCode"
label={
<FormattedMessage id="resource.model_image.table.list.startCode" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_image.table.list.startCode',
defaultMessage: '$$$',
})}`}
required={false}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="remark"
label={
<FormattedMessage id="resource.model_image.table.list.remark" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_image.table.list.remark',
defaultMessage: '$$$',
})}`}
required={false}
/>
</ProForm.Group> </ProForm.Group>
</ModalForm> </ModalForm>
); );

@ -24,10 +24,14 @@ import { Form, Modal, UploadFile, message } from 'antd';
import yaml from 'js-yaml'; import yaml from 'js-yaml';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { import {
proFormItemStyleProps,
proFormMaxItemStyleProps, proFormMaxItemStyleProps,
proFormMaxModelWidth, proFormMaxModelWidth,
proFormStepsFormProps, proFormStepsFormProps,
} from '../../../../../config/defaultForm'; } from '../../../../../config/defaultForm';
import {beforeUploadFile} from "@/utils/common";
// @ts-ignore
import cookie from 'react-cookies';
export type FormValueType = { export type FormValueType = {
target?: string; target?: string;
@ -89,6 +93,7 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const formRef = useRef<ProFormInstance>(); const formRef = useRef<ProFormInstance>();
const [configData, setConfigData] = useState<ProjectConfig>({ params: [] }); const [configData, setConfigData] = useState<ProjectConfig>({ params: [] });
const [filePath, setFilePath] = useState('');
@ -203,61 +208,51 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
required={false} required={false}
/> />
<ProFormText {/*<ProFormText*/}
width={proFormMaxItemStyleProps.column2Width} {/* width={proFormMaxItemStyleProps.column2Width}*/}
name="startCode" {/* name="startCode"*/}
label={ {/* label={*/}
<FormattedMessage {/* <FormattedMessage*/}
id="resource.model_version.table.list.startCode" {/* id="resource.model_version.table.list.startCode"*/}
defaultMessage="$$$" {/* defaultMessage="$$$"*/}
/> {/* />*/}
} {/* }*/}
placeholder={`${intl.formatMessage({ {/* placeholder={`${intl.formatMessage({*/}
id: 'common.please_input', {/* id: 'common.please_input',*/}
defaultMessage: '$$$', {/* defaultMessage: '$$$',*/}
})}${intl.formatMessage({ {/* })}${intl.formatMessage({*/}
id: 'resource.model_version.table.list.startCode', {/* id: 'resource.model_version.table.list.startCode',*/}
defaultMessage: '$$$', {/* defaultMessage: '$$$',*/}
})}`} {/* })}`}*/}
required={false} {/* required={false}*/}
/> {/*/>*/}
<ProFormSwitch
width={proFormMaxItemStyleProps.column2Width} {/*<ProFormText*/}
name="isEnable" {/* width={proFormMaxItemStyleProps.column2Width}*/}
label={ {/* name="path"*/}
<FormattedMessage {/* label={*/}
id="resource.model_version.table.list.isEnable" {/* <FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />*/}
defaultMessage="$$$" {/* }*/}
/> {/* placeholder={`${intl.formatMessage({*/}
} {/* id: 'common.please_input',*/}
initialValue={true} {/* defaultMessage: '$$$',*/}
/> {/* })}${intl.formatMessage({*/}
<ProFormText {/* id: 'resource.model_version.table.list.path',*/}
width={proFormMaxItemStyleProps.column2Width} {/* defaultMessage: '$$$',*/}
name="path" {/* })}`}*/}
label={ {/* required={true}*/}
<FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" /> {/* rules={[*/}
} {/* {*/}
placeholder={`${intl.formatMessage({ {/* required: true,*/}
id: 'common.please_input', {/* message: (*/}
defaultMessage: '$$$', {/* <FormattedMessage*/}
})}${intl.formatMessage({ {/* id="resource.model_version.table.rule.required.path"*/}
id: 'resource.model_version.table.list.path', {/* defaultMessage="path is required"*/}
defaultMessage: '$$$', {/* />*/}
})}`} {/* ),*/}
required={true} {/* },*/}
rules={[ {/* ]}*/}
{ {/*/>*/}
required: true,
message: (
<FormattedMessage
id="resource.model_version.table.rule.required.path"
defaultMessage="path is required"
/>
),
},
]}
/>
<ProFormText <ProFormText
width={proFormMaxItemStyleProps.column2Width} width={proFormMaxItemStyleProps.column2Width}
name="remark" name="remark"
@ -276,8 +271,53 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
})}`} })}`}
required={false} required={false}
/> />
<ProFormSwitch
width={proFormMaxItemStyleProps.column2Width}
name="isEnable"
label={
<FormattedMessage
id="resource.model_version.table.list.isEnable"
defaultMessage="$$$"
/>
}
initialValue={true}
/>
</ProForm.Group> </ProForm.Group>
</StepsForm.StepForm> </StepsForm.StepForm>
<StepsForm.StepForm<{
project_file: string;
}>
name="project_file"
title="上传模型文件"
style={{ width: proFormItemStyleProps.width }}
stepProps={{
description: '上传模型文件格式为(.zip,.tar.gz)',
}}
onFinish={async (values: any) => {
if ('projectFilePath' in values && values['projectFilePath'].length > 0) {
let projectFilePath = values['projectFilePath'][0]?.response?.data?.path || '';
setFilePath(projectFilePath);
}
return true;
}}
>
<ProFormUploadDragger
label={<span className='h3 gn'></span>}
name="projectFilePath"
action="/api/v1/file/uploadFile"
max={1}
fieldProps={{
name: 'file',
// beforeUpload: beforeUploadFile,
data: { path: `models/${Date.now()}` },
headers: {
'X-CSRFToken': cookie.load('csrftoken'),
Authorization: `Bearer ${localStorage.getItem('access') || ''}`,
},
}}
/>
</StepsForm.StepForm>
<StepsForm.StepForm<{ <StepsForm.StepForm<{
config: string; config: string;
}> }>
@ -292,6 +332,9 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
if (formData?.modelFkId) { if (formData?.modelFkId) {
await waitTime(500); await waitTime(500);
formData.modelConfig = { params: values?.params || [] }; formData.modelConfig = { params: values?.params || [] };
if (filePath) {
formData.path = filePath
}
postModelVersionCreateModelVersion(formData) postModelVersionCreateModelVersion(formData)
.then(() => { .then(() => {
message.success( message.success(

@ -80,7 +80,7 @@ const AlgorithmSetting: React.FC = () => {
{ {
title: ( title: (
<FormattedMessage id="device.device_group.table.list.createTime" defaultMessage="$$$" /> <FormattedMessage id="device.device_group.table.list.createTime" defaultMessage="$$$" />
), ),
dataIndex: 'createTime', dataIndex: 'createTime',
sorter: true, sorter: true,
@ -90,7 +90,7 @@ const AlgorithmSetting: React.FC = () => {
{ {
title: ( title: (
<FormattedMessage id="device.device_group.table.list.updateTime" defaultMessage="$$$" /> <FormattedMessage id="device.device_group.table.list.updateTime" defaultMessage="$$$" />
), ),
dataIndex: 'updateTime', dataIndex: 'updateTime',
sorter: true, sorter: true,
@ -126,38 +126,38 @@ const AlgorithmSetting: React.FC = () => {
console.log(resp.data.list); console.log(resp.data.list);
let model_data = ([...v?.models] || []).map((item: any) => ({ let model_data = ([...v?.models] || []).map((item: any) => ({
content: ( content: (
<ProCard <ProCard
style={{ backgroundColor: 'rgba(21, 91, 212, 0.03)' }} style={{ backgroundColor: 'rgba(21, 91, 212, 0.03)' }}
bodyStyle={{ margin: 0, padding: 0 }} bodyStyle={{ margin: 0, padding: 0 }}
>
<div
style={{
display: 'flex',
alignItems: 'center',
padding: 15,
justifyContent: 'space-between',
}}
> >
<div> <div
<img src="/images/icons/logo.svg" alt="" style={{ width: '64px' }} /> style={{
</div> display: 'flex',
<Button alignItems: 'center',
type="link" padding: 15,
size="small" justifyContent: 'space-between',
key={item.configId} }}
style={{ padding: 0, fontWeight: 700 }}
onClick={() => {
setProjectData(item);
console.log(item, 'setProjectData_item', projectData);
setProjectConfigId(item.configId);
handleUpdateModal();
}}
> >
<div>
</Button> <img src="/images/icons/logo.svg" alt="" style={{ width: '64px' }} />
</div> </div>
<ProjectCard info={item}></ProjectCard> <Button
</ProCard> type="link"
size="small"
key={item.configId}
style={{ padding: 0, fontWeight: 700 }}
onClick={() => {
setProjectData(item);
console.log(item, 'setProjectData_item', projectData);
setProjectConfigId(item.configId);
handleUpdateModal();
}}
>
</Button>
</div>
<ProjectCard info={item}></ProjectCard>
</ProCard>
), ),
})); }));
setModelData(model_data); setModelData(model_data);
@ -184,34 +184,34 @@ const AlgorithmSetting: React.FC = () => {
subTitle: <Tag color="#5BD8A6"></Tag>, subTitle: <Tag color="#5BD8A6"></Tag>,
avatar: 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',
content: ( content: (
<ProCard bodyStyle={{ margin: 0, padding: 0 }}> <ProCard bodyStyle={{ margin: 0, padding: 0 }}>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
padding: 15, padding: 15,
justifyContent: 'space-between', justifyContent: 'space-between',
}} }}
>
<div>
<div>{JSON.stringify(item.configId)}</div>
<img src="/images/model.png" alt="" style={{ width: '64px' }} />
</div>
<Button
type="link"
size="small"
key={item.configId}
style={{ padding: 0 }}
onClick={() => {
setProjectConfigId(item.configId);
handleUpdateModal();
}}
> >
<div>
</Button> <div>{JSON.stringify(item.configId)}</div>
</div> <img src="/images/model.png" alt="" style={{ width: '64px' }} />
<ProjectCard info={item}></ProjectCard> </div>
</ProCard> <Button
type="link"
size="small"
key={item.configId}
style={{ padding: 0 }}
onClick={() => {
setProjectConfigId(item.configId);
handleUpdateModal();
}}
>
</Button>
</div>
<ProjectCard info={item}></ProjectCard>
</ProCard>
), ),
}; };
}); });
@ -227,180 +227,175 @@ const AlgorithmSetting: React.FC = () => {
} }
useEffect(() => { useEffect(() => {
postDeviceGroupGetDeviceGroupTree() postDeviceGroupGetDeviceGroupTree()
.then((resp) => { .then((resp) => {
setNodeTreeData(resp.data.tree); setNodeTreeData(resp.data.tree);
setHasInit(true); setHasInit(true);
}) })
.catch(() => { .catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
}); });
}, []); }, []);
return ( return (
<PageContainer className="algorithmSetting_project_box gn"> <PageContainer className="algorithmSetting_project_box gn">
<TreeAndTableList <TreeAndTableList
leftCard={ leftCard={
{ {
title: '网点选择', title: '网点选择',
} as ProCardTypeProps } as ProCardTypeProps
} }
leftDom={ leftDom={
hasInit && ( hasInit && (
<Tree <Tree
checkable={false} checkable={false}
defaultExpandAll={true} defaultExpandAll={true}
selectedKeys={selectNodes} selectedKeys={selectNodes}
treeData={nodeTreeData} treeData={nodeTreeData}
onSelect={(selectKeys, info) => { onSelect={(selectKeys, info) => {
// TODO_1 此处接口需要重新联调 // TODO_1 此处接口需要重新联调
console.log(info.node, 'onSelect_info'); console.log(info.node, 'onSelect_info');
setSelectNodes(selectKeys); setSelectNodes(selectKeys);
fetchProjectInfoByGroupId(info?.node); fetchProjectInfoByGroupId(info?.node);
fetchProjectByGroupId(info?.node); fetchProjectByGroupId(info?.node);
actionRef.current?.reload(); actionRef.current?.reload();
}} }}
checkStrictly={false} checkStrictly={false}
/> />
) )
} }
rightDom={ rightDom={
<>
<ProCard
title="网点详细信息"
headStyle={{ borderBottom: '1px solid #E0E0E0', padding: '0px 16px 16px' }}
style={{ background: 'transparent', paddingTop: 16 }}
bodyStyle={{ padding: '16px 16px 0px' }}
colSpan="80%"
>
<ProDescriptions
column={3}
dataSource={currentRow}
columns={columns}
></ProDescriptions>
</ProCard>
{tabs?.length ? (
<> <>
<Tabs <ProCard
activeKey={tab} title="网点详细信息"
items={tabs} headStyle={{ borderBottom: '1px solid #E0E0E0', padding: '0px 16px 16px' }}
onChange={(key) => { style={{ background: 'transparent', paddingTop: 16 }}
setActiveMode('1'); // 重置到项目详情 bodyStyle={{ padding: '16px 16px 0px' }}
changeProjectTab(key); colSpan="80%"
}} >
></Tabs> <ProDescriptions
<ProCard bodyStyle={{ padding: 0, margin: 0 }} style={{ padding: 0, margin: 0 }}> column={3}
<ul dataSource={currentRow}
className="algorithmSetting_mode_box" columns={columns}
style={{ display: 'flex', padding: '0 16px', margin: 0 }} ></ProDescriptions>
> </ProCard>
{tabModeList.map((item) => { {tabs?.length ? (
// TODO 统一使用button默认效果 'primary' : 'default' <>
return ( <Tabs
<li activeKey={tab}
key={item.value} items={tabs}
className={item.value === activeMode ? 'active' : ''} onChange={(key) => {
onClick={() => changeMode(item)} setActiveMode('1'); // 重置到项目详情
style={{ changeProjectTab(key);
padding: '16px 12px 0 0',
}} }}
></Tabs>
<ProCard bodyStyle={{ padding: 0, margin: 0 }} style={{ padding: 0, margin: 0 }}>
<ul
className="algorithmSetting_mode_box"
style={{ display: 'flex', padding: '0 16px', margin: 0 }}
> >
<Button type="default">{item.label}</Button> {tabModeList.map((item) => {
</li> return (
); <li
})} key={item.value}
</ul> className={item.value === activeMode ? 'active' : ''}
onClick={() => changeMode(item)}
style={{
padding: '16px 12px 0 0',
}}
>
<Button type="default">{item.label}</Button>
</li>
);
})}
</ul>
{/* 项目 */} {/* 项目 */}
{activeMode === '1' ? ( {activeMode === '1' ? (
<> <>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
padding: '16px 16px 3px', padding: '16px 16px 3px',
}} }}
> >
<span style={{ fontSize: 16, fontWeight: 700 }}></span> <span style={{ fontSize: 16, fontWeight: 700 }}></span>
{/* // TODO 需要对接接口 */} {/* // TODO 需要对接接口 */}
{false ? ( {(
<Button type="primary" danger> <Button type="primary">
<PauseOutlined style={{ fontSize: 14, lineHeight: 1.5 }} /> <CaretRightOutlined style={{fontSize: 14, lineHeight: 1.5}}/>
</Button> </Button>
)}
</div>
<ProList<any>
actionRef={actionRef}
style={{
padding: '0px 16px 16px',
}}
className="gn"
ghost={true}
itemCardProps={{
ghost: true,
bodyStyle: { padding: 0, margin: 0 },
}}
pagination={{
defaultPageSize: 6,
showSizeChanger: false,
}}
showActions="hover"
grid={{ gutter: 8, xs: 1, md: 2, xl: 3, xxl: 4 }}
metas={{
type: {},
content: {},
actions: {
cardActionProps: 'extra',
},
}}
dataSource={modelData}
/>
</>
) : ( ) : (
<Button type="primary"> <div style={{ padding: 16 }}>
<CaretRightOutlined style={{ fontSize: 14, lineHeight: 1.5 }} /> <AlarmSetForm
currentRow={{
</Button> type: '2',
ways: [
{
label: '短信',
value: [],
isChecked: [],
},
{
label: '邮件',
value: [],
isChecked: [],
},
],
}}
></AlarmSetForm>
</div>
)} )}
</div> </ProCard>
<ProList<any>
style={{
padding: '0px 16px 16px',
}}
className="gn"
ghost={true}
itemCardProps={{
ghost: true,
bodyStyle: { padding: 0, margin: 0 },
}}
pagination={{
defaultPageSize: 6,
showSizeChanger: false,
}}
showActions="hover"
grid={{ gutter: 8, xs: 1, md: 2, xl: 3, xxl: 4 }}
metas={{
type: {},
content: {},
actions: {
cardActionProps: 'extra',
},
}}
dataSource={modelData}
/>
</> </>
) : ( ) : (
<div style={{ padding: 16 }}> <>
<AlarmSetForm <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
currentRow={{ </>
type: '2', )}
ways: [
{
label: '短信',
value: [],
isChecked: [],
},
{
label: '邮件',
value: [],
isChecked: [],
},
],
}}
></AlarmSetForm>
</div>
)}
</ProCard>
</>
) : (
<>
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</> </>
)} }
</> ></TreeAndTableList>
} <UpdateForm
></TreeAndTableList> projectData={projectData as Record<string, any>}
<UpdateForm updateModalOpen={updateModalOpen}
projectData={projectData as Record<string, any>} handleModal={handleUpdateModal}
updateModalOpen={updateModalOpen} groupId={currentRow?.id || 0}
handleModal={handleUpdateModal} reload={actionRef.current?.reload}
groupId={currentRow?.id || 0} projectModelConfigId={projectConfigId}
reload={actionRef.current?.reload} />
projectModelConfigId={projectConfigId} </PageContainer>
/>
</PageContainer>
); );
}; };

@ -18,6 +18,7 @@ import { useIntl } from '@umijs/max';
import { Modal, message } from 'antd'; import { Modal, message } from 'antd';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { proFormMaxItemStyleProps, proFormMaxModelWidth } from '../../../../config/defaultForm'; import { proFormMaxItemStyleProps, proFormMaxModelWidth } from '../../../../config/defaultForm';
import {postModelImageGetModelImageFkSelect} from "@/services/resource/ModelImage";
/**styles */ /**styles */
const modelParamsFormItemProps = { const modelParamsFormItemProps = {
@ -226,12 +227,12 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
return ( return (
// eslint-disable-next-line react/jsx-key // eslint-disable-next-line react/jsx-key
<div <div
key={index}
style={{ style={{
width: modelParamsFormItemProps.width, width: modelParamsFormItemProps.width,
}} }}
> >
<ProFormSwitch <ProFormSwitch
key={index}
name={item.name} name={item.name}
label={item.name} label={item.name}
initialValue={item.value} initialValue={item.value}
@ -250,8 +251,6 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
tooltip={item.remark} tooltip={item.remark}
/> />
); );
} else {
return <></>;
} }
})} })}
</div> </div>
@ -261,6 +260,50 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
</ProForm.Group> </ProForm.Group>
</> </>
</StepsForm.StepForm> </StepsForm.StepForm>
<StepsForm.StepForm<{
config: string;
}>
name="image"
title="镜像配置"
stepProps={{
description: '镜像选择',
}}
onFinish={async (values: any) => {
configResult.imageFkId = values.imageFkId;
return true;
}}
>
<>
<ProForm.Group>
{renderProjectItems()}
{isInit && projectModelConfig.modelFkId && projectModelConfig.modelFkId !== 0 && (
<ProFormSelect
width={proFormMaxItemStyleProps.width}
name="imageFkId"
label={
<>
<span className="gn h4"> </span>
<span className="gn des_1"> ()</span>
</>
}
onChange={handleSelectChange}
initialValue={projectModelConfig.imageFkId}
// dependencies 的内容会注入 request 中
request={async () => {
let resp = await postModelImageGetModelImageFkSelect({
});
return resp.data.list.map((v: any) => {
return {
label: v.name,
value: v.id,
};
});
}}
/>
)}
</ProForm.Group>
</>
</StepsForm.StepForm>
<StepsForm.StepForm<{ <StepsForm.StepForm<{
config: string; config: string;
}> }>
@ -404,7 +447,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
</> </>
</StepsForm.StepForm> </StepsForm.StepForm>
{/* 关联算法模型 */} {/* 设备关联配置 */}
<StepsForm.StepForm<{ <StepsForm.StepForm<{
config: string; config: string;
@ -415,7 +458,9 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
description: '设备关联配置', description: '设备关联配置',
}} }}
onFinish={async () => { onFinish={async () => {
console.log(targetKeys, 'targetKeys')
configResult.devices = targetKeys.join(','); configResult.devices = targetKeys.join(',');
console.log(configResult.devices, 'targetKeys')
configResult.id = props.projectModelConfigId; configResult.id = props.projectModelConfigId;
putProjectModelConfigUpdateProjectModelConfig(configResult) putProjectModelConfigUpdateProjectModelConfig(configResult)
.then(() => { .then(() => {
@ -424,7 +469,8 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
props.reload(); props.reload();
return true; return true;
}) })
.catch(() => { .catch((err) => {
console.log(err)
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
return false; return false;
}); });

@ -298,7 +298,7 @@ const OperationRecordList: React.FC = () => {
},]; },];
return ( return (
<PageContainer> <PageContainer>
<ProTable<API.OperationRecord, API.ApiListResponse> <ProTable<API.OperationRecord>
headerTitle={intl.formatMessage({ headerTitle={intl.formatMessage({
id: 'pages.searchTable.title', id: 'pages.searchTable.title',
defaultMessage: '$$$', defaultMessage: '$$$',

@ -18,10 +18,10 @@ const { useState } = React;
// static data 静态数据 // static data 静态数据
const data = [ const data = [
{ rank: 1, keyword: '网点一', users: 1000, range: 37, status: 1 }, { rank: 1, keyword: '产线A01', users: 100, range: 37, status: 1 },
{ rank: 2, keyword: '网点二', users: 800, range: 62, status: 1 }, { rank: 2, keyword: '产线A02', users: 80, range: 62, status: 1 },
{ rank: 3, keyword: '网点三', users: 1500, range: 20, status: 0 }, { rank: 3, keyword: '产线A03', users: 150, range: 20, status: 0 },
{ rank: 4, keyword: '网点四', users: 1200, range: 36, status: 0 }, { rank: 4, keyword: '产线A04', users: 120, range: 36, status: 0 },
// 添加更多数据项 // 添加更多数据项
]; ];
@ -88,9 +88,9 @@ const trendItemHeadStyle = { padding: 0 };
/**state 初始化数据 */ /**state 初始化数据 */
const offendingTrendData: Record<string, any>[] = [ const offendingTrendData: Record<string, any>[] = [
{ label: '玩手机', value1: 11093, value2: '17.1', status: 0 }, { label: '表面缺陷', value1: 204, value2: '17.1', status: 0 },
{ label: '打瞌睡', value1: 26, value2: '27.1', status: 1 }, { label: '抽烟检测', value1: 26, value2: '27.1', status: 1 },
{ label: '离岗', value1: 145, value2: '37.1', status: 1 }, { label: '划痕检测', value1: 145, value2: '37.1', status: 1 },
]; ];
/**methods 事件交互 */ /**methods 事件交互 */
@ -158,7 +158,7 @@ const DonutChart: React.FC = () => {
legend: { legend: {
orient: 'vertical', orient: 'vertical',
left: 10, left: 10,
data: ['玩手机', '打瞌睡', '离岗'], data: ['表面缺陷', '划痕检测', '抽烟检测'],
}, },
series: [ series: [
{ {
@ -182,9 +182,9 @@ const DonutChart: React.FC = () => {
show: false, show: false,
}, },
data: [ data: [
{ value: 235, name: '玩手机'}, { value: 235, name: '表面缺陷'},
{ value: 510, name: '打瞌睡' }, { value: 510, name: '划痕检测' },
{ value: 134, name: '离岗' }, { value: 134, name: '抽烟检测' },
], ],
}, },
], ],
@ -232,7 +232,7 @@ const FootInfoCard: React.FC = () => {
<ProCard key="resize-observer" wrap gutter={24} bodyStyle={{ marginTop: 40, padding: 0 }}> <ProCard key="resize-observer" wrap gutter={24} bodyStyle={{ marginTop: 40, padding: 0 }}>
<ProCard <ProCard
gutter={24} gutter={24}
title="线上热门搜索" title="车间异常汇总"
headStyle={footItemHeadStyleProps} headStyle={footItemHeadStyleProps}
colSpan={footItemColSpanProps} colSpan={footItemColSpanProps}
bodyStyle={{ margin: 0, padding: 0 }} bodyStyle={{ margin: 0, padding: 0 }}

@ -130,7 +130,7 @@ const NavInfoCardList: React.FC = () => {
gutter={24} gutter={24}
wrap wrap
ghost ghost
title="覆盖网点" title="覆盖车间"
headStyle={topItemHeadStyle} headStyle={topItemHeadStyle}
extra={ extra={
<> <>
@ -146,7 +146,7 @@ const NavInfoCardList: React.FC = () => {
<StatisticCard <StatisticCard
bodyStyle={{ padding: 0, backgroundColor: '#F5F3FD' }} bodyStyle={{ padding: 0, backgroundColor: '#F5F3FD' }}
statistic={{ statistic={{
value: 3048, value: 40,
style:chartsStyle, style:chartsStyle,
description: ( description: (
<> <>

@ -43,6 +43,7 @@ declare namespace API {
}; };
type ProjectModelConfig = { type ProjectModelConfig = {
imageFkId?: number;
createTime?: string; createTime?: string;
/** 设备是一个 以,隔开的存储device id的字符例如 1,2 */ /** 设备是一个 以,隔开的存储device id的字符例如 1,2 */
devices?: string; devices?: string;

Loading…
Cancel
Save