feat: 分类更新统一添加，节点设置外层交互完成
parent
49bfe975bc
commit
1eb526d45d
@ -0,0 +1,159 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-04-30 10:02:29
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-04-30 10:37:48
|
||||
* @FilePath: \general-ai-platform-web\src\pages\Business\DeviceGroup\components\alarmSetForm.tsx
|
||||
* @Description: 告警设置
|
||||
* @交互说明
|
||||
* 1、通知方式选择
|
||||
* 2、通知频次选择
|
||||
*/
|
||||
import {
|
||||
ProForm,
|
||||
ProFormCheckbox,
|
||||
ProFormDependency,
|
||||
ProFormGroup,
|
||||
ProFormList,
|
||||
ProFormRadio,
|
||||
ProFormSelect,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Form } from 'antd';
|
||||
import { useEffect } from 'react';
|
||||
type AlarmSetFormProps = {
|
||||
currentRow: Record<string, any>;
|
||||
};
|
||||
const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
|
||||
const [form] = Form.useForm<API.DeviceCategory>();
|
||||
|
||||
// const [initialValues, setInitialValues] = useState<Record<string, any>>({});
|
||||
|
||||
function fetchInitialValues() {
|
||||
// setInitialValues({
|
||||
// type: '2',
|
||||
// ways: [
|
||||
// {
|
||||
// label: '短信',
|
||||
// value: [],
|
||||
// isChecked: [],
|
||||
// },
|
||||
// {
|
||||
// label: '邮件',
|
||||
// value: [],
|
||||
// isChecked: [],
|
||||
// },
|
||||
// ]
|
||||
// });
|
||||
}
|
||||
useEffect(() => {
|
||||
fetchInitialValues();
|
||||
}, []);
|
||||
return (
|
||||
<ProForm
|
||||
style={{ paddingBottom: 70 }}
|
||||
submitter={{
|
||||
searchConfig: {
|
||||
submitText: '保存', // 在这里设置提交按钮文案
|
||||
},
|
||||
}}
|
||||
form={form}
|
||||
initialValues={props.currentRow}
|
||||
onFinish={async (values) => {
|
||||
// TODO 提交告警设置调用api
|
||||
console.log('onFinish_values', values);
|
||||
// postProjectCreateProject(values)
|
||||
// .then(() => {
|
||||
// message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||
// props.reload();
|
||||
// })
|
||||
// .catch(() => {
|
||||
// message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||
// });
|
||||
// props.reload();
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<ProFormGroup>
|
||||
<ProFormGroup title="通知方式" titleStyle={{ margin: '0 0 8px' }}>
|
||||
<ProFormList
|
||||
className="innerFormList_box"
|
||||
name={['ways']}
|
||||
creatorButtonProps={false}
|
||||
copyIconProps={false}
|
||||
deleteIconProps={false}
|
||||
style={{ padding: 0, margin: 0 }}
|
||||
>
|
||||
{(f, index, action) => {
|
||||
console.log('isChecked_value', f, index, action);
|
||||
return (
|
||||
<div className="form_checkBox_wrap">
|
||||
<ProFormGroup key="group">
|
||||
<ProFormCheckbox.Group
|
||||
name="isChecked"
|
||||
options={[
|
||||
{
|
||||
label: form.getFieldValue('ways')[index].label,
|
||||
value: '1',
|
||||
},
|
||||
]}
|
||||
></ProFormCheckbox.Group>
|
||||
<ProFormDependency name={['isChecked']}>
|
||||
{({ isChecked }) => {
|
||||
console.log(isChecked, 'isChecked');
|
||||
return (
|
||||
<ProFormSelect
|
||||
width={'lg'}
|
||||
mode="multiple"
|
||||
name="value"
|
||||
debounceTime={1000}
|
||||
disabled={!isChecked?.length}
|
||||
request={async () => {
|
||||
// const resp = await postCurrentIP();
|
||||
const resp = ['test001', 'test002', 'test003'];
|
||||
return resp?.map((v: any) => {
|
||||
return {
|
||||
label: v,
|
||||
value: v,
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</ProFormDependency>
|
||||
</ProFormGroup>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</ProFormList>
|
||||
</ProFormGroup>
|
||||
</ProFormGroup>
|
||||
<ProFormGroup title="通知频次" titleStyle={{ margin: '0 0 8px' }}>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
initialValue={props.values?.type || '0'}
|
||||
options={[
|
||||
{
|
||||
label: '每次',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
label: '每天',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '每周',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '每月',
|
||||
value: '3',
|
||||
},
|
||||
]}
|
||||
></ProFormRadio.Group>
|
||||
</ProFormGroup>
|
||||
</ProForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlarmSetForm;
|
||||
@ -0,0 +1,158 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-04-30 10:02:29
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-04-30 17:01:59
|
||||
* @FilePath: \general-ai-platform-web\src\pages\Business\DeviceGroup\components\modelSetting.tsx
|
||||
* @Description: 业务模型部署
|
||||
* @交互说明
|
||||
* 1、业务模型部署列表的分页展示
|
||||
* 2、配置参数功能
|
||||
*/
|
||||
import TableActionCard from '@/components/TableActionCard';
|
||||
import { getBusinessModelList } from '@/services/testApi/businessModel';
|
||||
import { ExclamationCircleFilled } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { ProTable } from '@ant-design/pro-components';
|
||||
import { FormattedMessage } from '@umijs/max';
|
||||
import { Button } from 'antd';
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
proTableCommonOptions,
|
||||
proTablePaginationOptions,
|
||||
} from '../../../../../config/defaultTable';
|
||||
// import CreateForm from './components/createForm';
|
||||
|
||||
const ModelSetting: React.FC = () => {
|
||||
// const intl = useIntl();
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
// const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
||||
// const [categoryFkIdIds, setCategoryFkIdIds] = useState([]);
|
||||
// 动态设置每页数量
|
||||
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
||||
// const [currentRow, setCurrentRow] = useState<Record<string, any>>({});
|
||||
|
||||
/**配置参数 */
|
||||
|
||||
// function reloadList() {
|
||||
// actionRef.current?.reload();
|
||||
// }
|
||||
|
||||
// 业务模型列表信息
|
||||
const columns: ProColumns<Record<string, any>>[] = [
|
||||
{
|
||||
title: <FormattedMessage id="business_model.table.list.name" defaultMessage="业务模型名称" />,
|
||||
dataIndex: 'name',
|
||||
hideInSearch: true,
|
||||
key: 'fixedName',
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="business_model.table.list.status" defaultMessage="部署状态" />,
|
||||
dataIndex: 'status',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage id="business_model.table.list.createTime" defaultMessage="创建时间" />
|
||||
),
|
||||
dataIndex: 'createTime',
|
||||
hideInSearch: true,
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
{
|
||||
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
key: 'option',
|
||||
render: () => [
|
||||
<TableActionCard
|
||||
key="TableActionCardRef"
|
||||
renderActions={[
|
||||
{
|
||||
key: 'updateDetail',
|
||||
renderDom: (
|
||||
<Button
|
||||
key="updateDetail"
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
// TODO 编辑在新增联调后实现
|
||||
// setCurrentRow(record);
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="pages.searchTable.updateDetail" defaultMessage="配置参数" />
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
]}
|
||||
></TableActionCard>,
|
||||
],
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="modelSetting_page">
|
||||
<div
|
||||
className="pb-[12px]"
|
||||
style={{
|
||||
color: '#FAAD14',
|
||||
}}
|
||||
>
|
||||
<ExclamationCircleFilled />
|
||||
<span className="pl-[8px]">配置参数需关联具体设备请先至设备列表添加设备后再进行配置</span>
|
||||
</div>
|
||||
<ProTable
|
||||
className="gn_pro_table"
|
||||
cardProps={{
|
||||
bodyStyle: { padding: 0 },
|
||||
}}
|
||||
// 标题栏
|
||||
search={false}
|
||||
scroll={{ y: proTableCommonOptions.commscrollY }}
|
||||
options={{ fullScreen: false, setting: false, density: false, reload: false }}
|
||||
actionRef={actionRef}
|
||||
rowKey="key"
|
||||
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 getBusinessModelList({ ...reqParams });
|
||||
console.log(resp, 'getModelVersionList_resp');
|
||||
return {
|
||||
data: resp.data?.results.map((v: Record<string, any>) => {
|
||||
return { ...v, key: v.id };
|
||||
}),
|
||||
success: resp.success,
|
||||
total: resp.data.count,
|
||||
current: current,
|
||||
pageSize: currentPageSize,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModelSetting;
|
||||
Loading…
Reference in New Issue