From e51acef3aa4b75580aac2ebd64e45a0daa42503a Mon Sep 17 00:00:00 2001 From: chunquansang <916920620@è¯@qq.com> Date: Thu, 9 Nov 2023 16:51:27 +0800 Subject: [PATCH] =?UTF-8?q?feat=20=E9=A1=B9=E7=9B=AE=E9=83=A8=E7=BD=B2?= =?UTF-8?q?=E4=BB=A3=C3=A7=C2=A0=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Setting/AlgorithmSetting.tsx | 18 +- src/pages/Setting/components/ProjectCard.tsx | 6 +- .../Setting/components/TableTransfer.tsx | 230 ++++++++++ src/pages/Setting/components/UpdateForm.tsx | 433 ++++++++++++++---- 4 files changed, 596 insertions(+), 91 deletions(-) create mode 100644 src/pages/Setting/components/TableTransfer.tsx diff --git a/src/pages/Setting/AlgorithmSetting.tsx b/src/pages/Setting/AlgorithmSetting.tsx index cd900a6..6d01905 100644 --- a/src/pages/Setting/AlgorithmSetting.tsx +++ b/src/pages/Setting/AlgorithmSetting.tsx @@ -49,6 +49,7 @@ const AlgorithmSetting: React.FC = () => { const [cardActionProps, setCardActionProps] = useState<'actions' | 'extra'>('extra'); const [modelVersionData, setModelVersionData] = useState([]); const [projectData, setProjectData] = useState({}); + const [targetKeys, setTargetKeys] = useState([]); const handleUpdateModal = () => { if (updateModalOpen) { @@ -170,7 +171,9 @@ const AlgorithmSetting: React.FC = () => { // console.log('clickTreeNode', projectCardListRef.current) postGetProjectByGroupId({ id: record.id }).then((resp) => { let tab_data = (resp?.data?.list || []).map((v: any) => { - let model_data = ([...v?.models] || []).map((item: any) => ({ + let model_data = ([...v?.models] || []).map((item: any) => + ( + { title: ( <> @@ -185,12 +188,15 @@ const AlgorithmSetting: React.FC = () => { handleUpdateModal(); }} > - 连接 + 配置 , ], content: , - - })); + + }) + + + ); // console.log(88, model_data); // setProjectData({...projectData, [v.id]: v}) return { @@ -198,7 +204,7 @@ const AlgorithmSetting: React.FC = () => { key: v.id, children: ( - + ghost={true} itemCardProps={{ ghost: true, @@ -361,7 +367,7 @@ const AlgorithmSetting: React.FC = () => { }) => {
苏胜天算法模型 经典算法 -
+
  • 模型名称： -

    {info.name}很多文字很多文字很多文字很多文字很多文字很多文字

    +

    {info.modelName}

  • 版本号： -

    {info.remark || 'v0.01'}

    +

    {info.version || ''}

  • 更新时间： diff --git a/src/pages/Setting/components/TableTransfer.tsx b/src/pages/Setting/components/TableTransfer.tsx new file mode 100644 index 0000000..722ecb5 --- /dev/null +++ b/src/pages/Setting/components/TableTransfer.tsx @@ -0,0 +1,230 @@ +import React, { useState } from 'react'; +import { Space, Switch, Table, Tag, Transfer } from 'antd'; +import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface'; +import type { TransferItem, TransferProps } from 'antd/es/transfer'; +import difference from 'lodash/difference'; +import {randomInt} from "@antv/xflow-extension"; +import {ProTable} from "@ant-design/pro-components"; + +interface RecordType { + key: string; + title: string; + description: string; + tag: string; + age: number; +} + +interface DataType { + key: string; + title: string; + description: string; + tag: string; + age: number; +} + + +const tableListDataSource = []; +const valueEnum = { + 0: 'close', + 1: 'running', + 2: 'online', + 3: 'error', +}; + +const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某']; + +for (let i = 0; i < 5; i += 1) { + tableListDataSource.push({ + key: i, + name: 'AppName', + containers: Math.floor(Math.random() * 20), + creator: creators[Math.floor(Math.random() * creators.length)], + status: valueEnum[((Math.floor(Math.random() * 10) % 4) + '') as '0'], + createdAt: Date.now() - Math.floor(Math.random() * 100000), + memo: + i % 2 === 1 + ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴' + : '简短备注文案', + }); +} +console.log(tableListDataSource) +const columns1 = [ + { + title: '应用名称', + width: 80, + dataIndex: 'name', + }, + { + title: '容器数量', + dataIndex: 'containers', + }, + { + title: '状态', + width: 80, + dataIndex: 'status', + }, + { + title: '创建者', + width: 80, + dataIndex: 'creator', + }, +]; + +interface TableTransferProps extends TransferProps { + dataSource: DataType[]; + leftColumns: ColumnsType; + rightColumns: ColumnsType> +} + +// Customize Table Transfer +const TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransferProps) => ( + + {({ + direction, + filteredItems, + onItemSelectAll, + onItemSelect, + selectedKeys: listSelectedKeys, + disabled: listDisabled, + }) => { + const columns = direction === 'left' ? leftColumns : rightColumns; + + const rowSelection: TableRowSelection = { + getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }), + // onSelectAll(selected, selectedRows) { + // console.log(4545, selected) + // const treeSelectedKeys = selectedRows + // .filter((item) => !item.disabled) + // .map(({ key }) => key); + // const diffKeys = selected + // ? difference(treeSelectedKeys, listSelectedKeys) + // : difference(listSelectedKeys, treeSelectedKeys); + // onItemSelectAll(diffKeys as string[], selected); + // }, + onChange(selected, selectedRows, info) { + // console.log(4545, selected, info) + + if (info.type == 'all') { + const treeSelectedKeys = selectedRows + .filter((item) => !item.disabled) + .map(({ key }) => key); + const diffKeys = selected + ? difference(treeSelectedKeys, listSelectedKeys) + : difference(listSelectedKeys, treeSelectedKeys); + console.log(45678, diffKeys) + onItemSelectAll(diffKeys as string[], true); + } + }, + onSelect({ key }, selected) { + console.log(890, key) + onItemSelect(key as string, selected); + }, + selectedRowKeys: listSelectedKeys, + }; + + + + return ( + + + rowSelection={rowSelection} + columns={columns} + dataSource={filteredItems} + size="small" + style={{ pointerEvents: listDisabled ? 'none' : undefined, width: 500 }} + onRow={({ key, disabled: itemDisabled }) => ({ + onClick: () => { + if (itemDisabled || listDisabled) return; + onItemSelect(key as string, !listSelectedKeys.includes(key as string)); + }, + })} + /> + ); + }} + +); + +const mockTags = ['cat', 'dog', 'bird']; + +const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({ + key: i.toString(), + title: `监控1`, + description: `DEVICE1002`, + tag: "走廊123", + age: "rtsp://129.12.12.12:90001" +})); + +const originTargetKeys = mockData + .filter((item) => Number(item.key) % 3 > 1) + .map((item) => item.key); + +const leftTableColumns: ColumnsType = [ + { + dataIndex: 'title', + title: '名称', + }, + { + dataIndex: 'tag', + title: '位置', + }, + { + dataIndex: 'description', + title: '编码', + }, + { + dataIndex: 'age', + title: '参数', + }, +]; + +const rightTableColumns: ColumnsType> = [ + { + dataIndex: 'title', + title: '名称', + }, + { + dataIndex: 'tag', + title: '位置', + }, + { + dataIndex: 'description', + title: '编码', + }, + { + dataIndex: 'age', + title: '参数', + }, +]; + +export type UpdateFormProps = { + targetKeys: string[]; + setTargetKeys: (data: string[])=>void; +}; + +const TableTransferList: React.FC = (props) => { + const [showSearch, setShowSearch] = useState(false); + + const onChange = (nextTargetKeys: string[]) => { + props.setTargetKeys(nextTargetKeys); + }; + const triggerShowSearch = (checked: boolean) => { + setShowSearch(checked); + }; + + return ( + <> + + + ); +}; + +export default TableTransferList; diff --git a/src/pages/Setting/components/UpdateForm.tsx b/src/pages/Setting/components/UpdateForm.tsx index e792e96..ca21a84 100644 --- a/src/pages/Setting/components/UpdateForm.tsx +++ b/src/pages/Setting/components/UpdateForm.tsx @@ -1,17 +1,38 @@ -import {ModalForm,ProForm} from '@ant-design/pro-components'; +import { + ModalForm, ProCard, + ProForm, ProFormDependency, ProFormDigit, ProFormList, ProFormSelect, + ProFormSwitch, + ProFormText, + ProFormUploadDragger, + StepsForm +} from '@ant-design/pro-components'; import {FormattedMessage, useIntl} from '@umijs/max'; -import React, {useEffect, useState} from 'react'; -import {Button, Form, message} from 'antd'; +import React, {useEffect, useRef, useState} from 'react'; +import {Button, Form, message, Modal, Switch, Tree} from 'antd'; import { Table, Transfer } from 'antd'; import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface'; import type { TransferItem, TransferProps } from 'antd/es/transfer'; import {TransferDirection} from "antd/es/transfer"; import {postAlgorithmModelGetAlgorithmModelFkSelect} from "@/services/resource/AlgorithmModel"; -import {postDeviceGetDeviceFkSelect} from "@/services/device/Device"; +import {postDeviceGetDeviceFkSelect, postDeviceGetDeviceList} from "@/services/device/Device"; import {postDeviceGroupGetDeviceGroupTree} from "@/services/device/DeviceGroup"; import {putRoleUpdateDevicesInGroupModel} from "@/services/device/DeviceModelInGroup"; +import {postProjectCreateProject} from "@/services/project/Project"; +import {beforeUploadFile} from "@/utils/common"; +import yaml from "js-yaml"; +import {CloseOutlined, SnippetsOutlined} from "@ant-design/icons"; +import {FormListActionType, ProFormDatePicker} from "@ant-design/pro-form/lib"; +import {postModelVersionGetModelVersionById} from "@/services/resource/ModelVersion"; +import difference from 'lodash/difference'; +import TableTransferList from "@/pages/Setting/components/TableTransfer"; + + +const formContainerWidth: number = 755; +const stepFormItemStyleProps: Record = { + width: formContainerWidth, +}; interface RecordType { key: string; title: string; @@ -42,95 +63,343 @@ export type FormValueType = { frequency?: string; } & Partial; - export type UpdateFormProps = { - updateModalOpen: boolean; - handleModal: () => void; - values: Partial; - reload: any; - }; +export type UpdateFormProps = { + updateModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; + +const genFormFields = (type: number)=>{ + return ( + <> + + + + ) +} +const dataSource = [ + { + key: '1', + name: '胡彦斌', + age: 32, + address: '西湖区湖底公园1号', + }, + { + key: '2', + name: '胡彦祖', + age: 42, + address: '西湖区湖底公园1号', + }, +]; +const columns = [ + { + title: '姓名', + dataIndex: 'name', + key: 'name', + }, + { + title: '年龄', + dataIndex: 'age', + key: 'age', + }, + { + title: '住址', + dataIndex: 'address', + key: 'address', + }, +]; const UpdateForm: React.FC = (props) => { const intl = useIntl(); const [form] = Form.useForm(); - const [modalData, setModalData] = useState([]); - const [targetKeys, setTargetKeys] = useState([]); + const [modalData, setModalData] = useState([]); + const [targetKeys, setTargetKeys] = useState([]); + const [current, setCurrent] = useState(0); + const [configData, setConfigData] = useState([]); - const getModelData = () => { - postDeviceGetDeviceFkSelect({keyword: ''}).then((res)=>{ - let result = (res.data?.list || []).map((v: any)=>{ - return { - key: v.id, - title: v.name, - chosen: false, - } - }) - setModalData(result); - }) - // setMockData(tempMockData); - // setTargetKeys(tempTargetKeys); - }; - useEffect(() => { - setTargetKeys([]) - if (props.updateModalOpen) { - getModelData(); - } else { - } - }, [props.updateModalOpen]) - const handleChange = (newTargetKeys: string[]) => { - setTargetKeys(newTargetKeys); - }; - const handleSearch = (dir: TransferDirection, value: string) => { - postDeviceGetDeviceFkSelect({keyword: value}).then((res)=>{ - let result = (res.data?.list || []).map((v: any)=>{ - return { - key: v.id, - title: v.name, - chosen: false, - } - }) - setModalData(result); - }) - }; + const [addrValue, setAddr] = useState('') + + const handleSelectChange = (value)=>{ + postModelVersionGetModelVersionById({ id: value }).then((resp) => { + let data = resp.data.modelVersion.modelConfig?.params || []; + setConfigData(data); // 更新状态 + }); + } + + useEffect(() => { + if (addrValue) { + postModelVersionGetModelVersionById({ id: 23 }).then((resp) => { + let data = resp.data.modelVersion.modelConfig?.params || []; + setConfigData(data); // 更新状态 + }); + } + }, [addrValue]); + + const actionFormListRef = useRef< + FormListActionType<{ + name: string; + }> + >(); + const getModelData = () => { + postDeviceGetDeviceFkSelect({keyword: ''}).then((res)=>{ + let result = (res.data?.list || []).map((v: any)=>{ + return { + key: v.id, + title: v.name, + chosen: false, + } + }) + setModalData(result); + }) + // setMockData(tempMockData); + // setTargetKeys(tempTargetKeys); + }; + useEffect(() => { + setTargetKeys([]) + setConfigData([]) + if (props.updateModalOpen) { + getModelData(); + + postDeviceGetDeviceList({groupFkId: 2, page: 1, pageSize:10}).then((resp)=>{ + console.log(111, resp) + }) + } else { + } + }, [props.updateModalOpen]) + const handleChange = (newTargetKeys: string[]) => { + setTargetKeys(newTargetKeys); + }; + const handleSearch = (dir: TransferDirection, value: string) => { + postDeviceGetDeviceFkSelect({keyword: value}).then((res)=>{ + let result = (res.data?.list || []).map((v: any)=>{ + return { + key: v.id, + title: v.name, + chosen: false, + } + }) + setModalData(result); + }) + }; return ( - - title={intl.formatMessage({ - id: 'common.modal.table.update.title', - defaultMessage: '$$$', - })} - open={props.updateModalOpen} - form={form} - autoFocusFirstInput - modalProps={{ - destroyOnClose: true, - onCancel: () => props.handleModal(), + + + stepsProps={{ + labelPlacement: 'vertical', }} - submitTimeout={2000} - onFinish={async (values:any) => { - console.log(4444, props.values) - putRoleUpdateDevicesInGroupModel({groupId: props.values.groupFkId, modelId: props.values.modelFkId, deviceIds: values?.devices || []}).then(()=>{ - props.handleModal(); - message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) - }).catch(()=>{ - message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'})) - }) + current={current} + onCurrentChange={setCurrent} + onFinish={async () => { + return true; }} + formProps={{ + validateMessages: { + required: '此项为必填项', + }, + }} + stepsFormRender={(dom, submitter) => { + return ( + { + setCurrent(0); + props.handleModal(); + }} + open={props.updateModalOpen} + footer={submitter} + destroyOnClose + > + {dom} + + ); + }} > - - item.title} - /> - - -)} + + + name="config3" + title="设备配置" + stepProps={{ + description: '业务参数配置', + }} + onFinish={async (values: any) => { + console.log(targetKeys) + return true; + }} + > + <> + + + + + {/* 关联算法模型 */} + + name="config" + title="模型参数配置" + stepProps={{ + description: '业务参数配置', + }} + onFinish={async (values: any) => { + return true; + }} + > + <> + [ + { label: 'V1.0', value: 22 }, + { label: 'V1.2', value: 23 }, + ]} + /> + { + configData.map((item:any, index)=> { + console.log(typeof item.default) + if (typeof item.default === 'number') { + return () + } else if (typeof item.default === 'boolean') { + return () + } else { + return () + } + } + ) + } + + + + {/* 业务参数配置 */} + + name="config1" + title="项目参数配置" + stepProps={{ + description: '业务参数配置', + }} + onFinish={async (values: any) => { + return true; + }} + > + <> + + { + configData.map((item:any, index)=> { + console.log(typeof item.default) + if (typeof item.default === 'number') { + return () + } else if (typeof item.default === 'boolean') { + return () + } else { + return () + } + } + ) + } + + + + + + + + +// +// title={intl.formatMessage({ +// id: 'common.modal.table.update.title', +// defaultMessage: '$$$', +// })} +// open={props.updateModalOpen} +// form={form} +// autoFocusFirstInput +// modalProps={{ +// destroyOnClose: true, +// onCancel: () => props.handleModal(), +// }} +// submitTimeout={2000} +// onFinish={async (values:any) => { +// console.log(4444, props.values) +// putRoleUpdateDevicesInGroupModel({groupId: props.values.groupFkId, modelId: props.values.modelFkId, deviceIds: values?.devices || []}).then(()=>{ +// props.handleModal(); +// message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) +// }).catch(()=>{ +// message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'})) +// }) +// return true; +// }} +// > +// +// item.title} +// /> +// +// +// + + )} export default UpdateForm;