From 9f49af1c109959f85b413a154d4cde05b180bceb Mon Sep 17 00:00:00 2001 From: zhoux Date: Tue, 7 Nov 2023 14:47:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E6=B5=8B=E8=AF=95=E6=95=B0=E6=8D=AEtestData,=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8=E4=B8=9A=E5=8A=A1=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E4=B8=8E=E9=9D=99=E6=80=81=E7=BB=84=E4=BB=B6=E9=9A=94?= =?UTF-8?q?=E7=A6=BB=E5=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Device/DeviceList/index.tsx | 25 +- src/pages/Setting/AlgorithmSetting.tsx | 803 +++++++++---------- src/pages/Setting/components/ProjectCard.tsx | 49 ++ src/testData/SettingAIgorithm.tsx | 41 + src/testData/testData.md | 11 + 5 files changed, 506 insertions(+), 423 deletions(-) create mode 100644 src/pages/Setting/components/ProjectCard.tsx create mode 100644 src/testData/SettingAIgorithm.tsx create mode 100644 src/testData/testData.md diff --git a/src/pages/Device/DeviceList/index.tsx b/src/pages/Device/DeviceList/index.tsx index 1461d97..e4fd113 100644 --- a/src/pages/Device/DeviceList/index.tsx +++ b/src/pages/Device/DeviceList/index.tsx @@ -24,7 +24,7 @@ import { FooterToolbar, PageContainer, ProTable, - ProFormSelect, ProCard, + ProFormSelect, ProCard, ProFormText, } from '@ant-design/pro-components'; import {FormattedMessage, useIntl, useAccess, Access, history} from '@umijs/max'; import {Button, message, Tree} from 'antd'; @@ -205,6 +205,23 @@ const DeviceList: React.FC = () => { ); }, + renderFormItem: () => { + return ( + <> + + + ); + }, }, { @@ -273,6 +290,9 @@ const DeviceList: React.FC = () => { return ( // value 和 onchange 会通过 form 自动注入。 { @@ -311,6 +331,9 @@ const DeviceList: React.FC = () => { return ( // value 和 onchange 会通过 form 自动注入。 { diff --git a/src/pages/Setting/AlgorithmSetting.tsx b/src/pages/Setting/AlgorithmSetting.tsx index faa4e68..36e7811 100644 --- a/src/pages/Setting/AlgorithmSetting.tsx +++ b/src/pages/Setting/AlgorithmSetting.tsx @@ -1,435 +1,394 @@ import { - postDeviceGroupGetDeviceGroupList, - postDeviceGroupGetDeviceGroupTree + postDeviceGroupGetDeviceGroupList, + postDeviceGroupGetDeviceGroupTree, } from '@/services/device/DeviceGroup'; -import {PlusOutlined, RedoOutlined} from '@ant-design/icons'; -import type {ActionType} from '@ant-design/pro-components'; +import { postGetProjectByGroupId } from '@/services/project/Project'; +import { postModelVersionGetModelVersionListByIds } from '@/services/resource/ModelVersion'; +import { FormattedMessage } from '@@/exports'; +import { RedoOutlined } from '@ant-design/icons'; +import type { ActionType } from '@ant-design/pro-components'; import { - PageContainer, ProCard, ProColumns, ProDescriptions, ProList, ProTable + PageContainer, + ProCard, + ProColumns, + ProDescriptions, + ProList, + ProTable, } from '@ant-design/pro-components'; -import {useIntl, useAccess} from '@umijs/max'; -import {Button, message, Tag, Tree} from 'antd'; -import React, {useEffect, useRef, useState} from 'react'; -import {DataNode} from "antd/es/tree"; -import {Access, FormattedMessage, history} from "@@/exports"; -import {postGetProjectByGroupId} from "@/services/project/Project"; -import {postModelVersionGetModelVersionListByIds} from "@/services/resource/ModelVersion"; -import {dateFormat} from "@/utils/common"; -import UpdateForm from "./components/UpdateForm"; - +import { useAccess, useIntl } from '@umijs/max'; +import { Button, Tag, message } from 'antd'; +import { DataNode } from 'antd/es/tree'; +import React, { useEffect, useRef, useState } from 'react'; +import ProjectCard from './components/ProjectCard'; +import UpdateForm from './components/UpdateForm'; const AlgorithmSetting: React.FC = () => { - /** - * @en-US Pop-up window of new window - * @zh-CN 新建窗口的弹窗 - * */ - - /** - * @en-US International configuration - * @zh-CN 国际化配置 - * */ - const access = useAccess(); - const intl = useIntl(); - const actionRef = useRef(); - const [updateModalOpen, setUpdateModalOpen] = useState(false); - - - const [hasInit, setHasInit] = useState(false) - const [nodeTreeData, setNodeTreeData] = React.useState([]); - const [selectNodes, setSelectNodes] = React.useState([]); - const [currentRow, setCurrentRow] = useState(); - const [currentCard, setCurrentCard] = useState(); - - const [selectedRowsState, setSelectedRows] = useState([]); - const [tabs, setTabs] = useState([]); - const [cardActionProps, setCardActionProps] = useState<'actions' | 'extra'>( - 'extra', - ); - const [modelVersionData, setModelVersionData] = useState([]); - const [projectData, setProjectData] = useState({}); - - const handleUpdateModal = ()=>{ - if (updateModalOpen) { - setUpdateModalOpen(false) - setCurrentCard(undefined) - } else { - setUpdateModalOpen(true) - } + /** + * @en-US Pop-up window of new window + * @zh-CN 新建窗口的弹窗 + * */ + + /** + * @en-US International configuration + * @zh-CN 国际化配置 + * */ + const access = useAccess(); + const intl = useIntl(); + const projectCardListRef = useRef(null); + const actionRef = useRef(); + const [updateModalOpen, setUpdateModalOpen] = useState(false); + const [hasInit, setHasInit] = useState(false); + const [nodeTreeData, setNodeTreeData] = React.useState([]); + const [selectNodes, setSelectNodes] = React.useState([]); + const [currentRow, setCurrentRow] = useState(); + const [currentCard, setCurrentCard] = useState(); + + const [selectedRowsState, setSelectedRows] = useState([]); + const [tabs, setTabs] = useState([]); + const [cardActionProps, setCardActionProps] = useState<'actions' | 'extra'>('extra'); + const [modelVersionData, setModelVersionData] = useState([]); + const [projectData, setProjectData] = useState({}); + + const handleUpdateModal = () => { + if (updateModalOpen) { + setUpdateModalOpen(false); + setCurrentCard(undefined); + } else { + setUpdateModalOpen(true); } - - const data = [ - '苏胜天人物识别算法', - '苏胜天交警识别识别', - '苏胜天车牌识别算法', - '苏胜天语音识别算法', - '苏胜天轨迹识别算法', - ].map((item) => ({ - title: '苏胜天算法模型', - subTitle: 经典算法, - actions: [模型版本选择], - avatar: - 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg', - content: ( -
(''); + const columns1: ProColumns[] = [ + { + title: , + dataIndex: 'name', + hideInSearch: true, + }, + ]; + + const columns = [ + { + title: , + dataIndex: 'id', + sorter: true, + }, + + { + title: , + dataIndex: 'name', + hideInSearch: true, + }, + + { + title: , + dataIndex: 'code', + hideInSearch: true, + }, + + { + title: , + dataIndex: 'address', + hideInSearch: true, + }, + + { + title: ( + + ), + dataIndex: 'telephone', + hideInSearch: true, + }, + + { + title: , + dataIndex: 'lon', + hideInSearch: true, + }, + + { + title: , + dataIndex: 'lat', + hideInSearch: true, + }, + + { + title: ( + + ), + dataIndex: 'managerName', + hideInSearch: true, + }, + + { + title: ( + + ), + dataIndex: 'managerPhone', + hideInSearch: true, + }, + + { + title: , + dataIndex: 'isEnable', + filters: true, + onFilter: true, + hideInSearch: true, + valueType: 'switch', + }, + + { + title: , + dataIndex: 'remark', + hideInSearch: true, + }, + + { + title: ( + + ), + dataIndex: 'createTime', + sorter: true, + hideInSearch: true, + valueType: 'dateTime', + }, + + { + title: ( + + ), + dataIndex: 'updateTime', + sorter: true, + hideInSearch: true, + valueType: 'dateTime', + }, + ]; + + // TODO 操作左侧网点数据节点， 项目列表数据变更 + function fetchProjectByGroupId(record: Record) { + // 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,...v?.models,...v?.models,...v?.models] || []).map((item: any) => ({ + title: ( + <> + + + ), + actions: [ +
- ), - })); - - const [tab, setTab] = useState(''); - const columns1: ProColumns[] = [ - { - title: (), - dataIndex: "name", - hideInSearch: true, - }, - - ]; - - const columns = [ - - { - title: (), - dataIndex: "id", - sorter: true, - }, - - { - title: (), - dataIndex: "name", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "code", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "address", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "telephone", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "lon", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "lat", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "managerName", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "managerPhone", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "isEnable", - filters: true, onFilter: true, - hideInSearch: true, - valueType: 'switch', - }, - - { - title: (), - dataIndex: "remark", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "createTime", - sorter: true, - hideInSearch: true, - valueType: 'dateTime', - }, - - - { - title: (), - dataIndex: "updateTime", - sorter: true, - hideInSearch: true, - valueType: 'dateTime', - }, - ]; - - - useEffect(() => { - - - postDeviceGroupGetDeviceGroupTree().then((resp) => { - setNodeTreeData(resp.data.tree) - setHasInit(true) - }).catch(() => { - message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'})) - }) - }, []) - - - - return ( - - - } onClick={() => { - setSelectNodes([]); - actionRef.current?.reload() - }}>重置}> - - headerTitle={intl.formatMessage({ - id: 'pages.searchTable.title', - defaultMessage: '$$$', - })} - options={{search: true, fullScreen: false, setting: false, density: false, reload: false}} - actionRef={actionRef} - search={false} - rowKey="key" - onRow={(record) => { - return { - onClick: () => { - if (record.id) { - setCurrentRow(record); - - postGetProjectByGroupId({id: record.id}).then((resp) => { - let tab_data = (resp?.data?.list || []).map((v: any) => { - let model_data = (v?.models || []).map((item: any) => ({ - title: '苏胜天算法模型', - subTitle: 经典算法, - actions: [{ - setCurrentCard({groupFkId: record.id, modelFkId: item.id}) - handleUpdateModal() - }}>绑定设备], - avatar: - 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg', - - content: ( -
-
{item.name}
-
-
版本：{item.remark}
-
更新时间：{dateFormat(item.updateTime)}
-
- ) - })); - console.log(88, model_data, data) - // setProjectData({...projectData, [v.id]: v}) - return { - label: `项目：${v.name}`, - key: v.id, - children: ( - ghost={true} - itemCardProps={{ - ghost: true, - }} - pagination={{ - defaultPageSize: 8, - showSizeChanger: false, - }} - showActions="hover" - grid={{ gutter: 8, column: 4 }} - metas={{ - title: {}, - subTitle: {}, - type: {}, - avatar: {}, - content: {}, - actions: { - cardActionProps, - }, - }} - headerTitle="项目模型列表" - dataSource={model_data} - />), - - - } - }) - if (tab_data.length) { - setTab(tab_data[0].key) - } - setTabs(tab_data) - }) - } - }, - }; - }} - pagination={{ - showSizeChanger: false, - pageSize: 10, - }} - columnsState={{ - persistenceKey: 'device_group_list', - persistenceType: 'localStorage' - }} - request={async (params = {}, sort) => { - const {current, ...rest} = params - const reqParams = { - page: 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 postDeviceGroupGetDeviceGroupList({...reqParams, name: params?.keyword || ''}) - return { - data: resp.data.list.map((v: API.DeviceGroup)=>{ - return {...v, key: v.id} - }), - success: resp.success, - total: resp.data.total, - current: resp.data.page, - pageSize: resp.data.pageSize - }; - - }} - columns={columns1} - rowSelection={{ - onChange: (_, selectedRows) => { - // setSelectedRows(selectedRows); - }, - }} - /> - - - - - - - - { - let model_ids = projectData[key]?.inferConfig?.models || [] - postModelVersionGetModelVersionListByIds({ids: model_ids}).then((resp)=>{ - let version_model_data = (resp?.data?.list || []).map((item) => { - return { - title: '苏胜天算法模型', - subTitle: 经典算法, - actions: [{handleUpdateModal()}}>模型版本选择], - avatar: - 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg', - content: ( -
-
{item}
-
-
版本：V1.2.4
-
更新时间：2022-12-12
-
- ), - } - }); - setModelVersionData(version_model_data) - console.log(99, modelVersionData) - }) - setTab(key); - }, - }} - > - - - - , + ], + content: , + + })); + // console.log(88, model_data); + // setProjectData({...projectData, [v.id]: v}) + return { + label: `项目：${v.name}`, + key: v.id, + children: ( + + + ghost={true} + itemCardProps={{ + ghost: true, + // headStyle: {background: 'red', padding: 0, margin: 0}, + bodyStyle: {padding: 0, margin: 0}, + }} + pagination={{ + defaultPageSize: 6, + showSizeChanger: false, + }} + showActions="hover" + grid={{gutter: 8, xs: 1, md: 2, xl: 3, xxl: 4}} + metas={{ + title: {}, + type: {}, + content: {}, + actions: { + cardActionProps, + }, + }} + headerTitle="项目模型列表" + dataSource={model_data} /> - - ); + ), + }; + }); + if (tab_data.length) { + setTab(tab_data[0].key); + } + setTabs(tab_data); + }); + } + + // TODO 操作项目列表数据类别切换， 项目列表数据变更 + function changeProjectTab(key: React.SetStateAction) { + let model_ids = projectData[key]?.inferConfig?.models || []; + postModelVersionGetModelVersionListByIds({ ids: model_ids }).then((resp) => { + let version_model_data = (resp?.data?.list || []).map((item: Record) => { + return { + title: '苏胜天算法模型', + subTitle: 经典算法, + actions: [ + , + ], + avatar: 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg', + content: , + }; + }); + setModelVersionData(version_model_data); + console.log(99, modelVersionData); + }); + setTab(key); + } + + useEffect(() => { + postDeviceGroupGetDeviceGroupTree() + .then((resp) => { + setNodeTreeData(resp.data.tree); + setHasInit(true); + }) + .catch(() => { + message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); + }); + }, []); + + return ( + + + } + onClick={() => { + setSelectNodes([]); + actionRef.current?.reload(); + }} + > + 重置 + + } + > + + headerTitle={intl.formatMessage({ + id: 'pages.searchTable.title', + defaultMessage: '$$$', + })} + options={{ + search: true, + fullScreen: false, + setting: false, + density: false, + reload: false, + }} + actionRef={actionRef} + search={false} + rowKey="key" + onRow={(record) => { + return { + onClick: () => { + if (record.id) { + setCurrentRow(record); + fetchProjectByGroupId(record); + } + }, + }; + }} + pagination={{ + showSizeChanger: false, + pageSize: 10, + }} + columnsState={{ + persistenceKey: 'device_group_list', + persistenceType: 'localStorage', + }} + request={async (params = {}, sort) => { + const { current, ...rest } = params; + const reqParams = { + page: 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 postDeviceGroupGetDeviceGroupList({ + ...reqParams, + name: params?.keyword || '', + }); + return { + data: resp.data.list.map((v: API.DeviceGroup) => { + return { ...v, key: v.id }; + }), + success: resp.success, + total: resp.data.total, + current: resp.data.page, + pageSize: resp.data.pageSize, + }; + }} + columns={columns1} + rowSelection={{ + onChange: (_, selectedRows) => { + // setSelectedRows(selectedRows); + }, + }} + /> + + + + + + { + changeProjectTab(key); + }, + }} + > + + + + + ); }; export default AlgorithmSetting; diff --git a/src/pages/Setting/components/ProjectCard.tsx b/src/pages/Setting/components/ProjectCard.tsx new file mode 100644 index 0000000..ae7d8b2 --- /dev/null +++ b/src/pages/Setting/components/ProjectCard.tsx @@ -0,0 +1,49 @@ +/* + * @Author: zhoux zhouxia@supervision.ltd + * @Date: 2023-11-06 16:12:17 + * @LastEditors: zhoux zhouxia@supervision.ltd + * @LastEditTime: 2023-11-07 14:32:41 + * @FilePath: \general-ai-platform-web\src\pages\Setting\components\ProjectCardList.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ +import React from 'react'; + +import { dateFormat } from '@/utils/common'; +import { Tag } from 'antd'; +// import { postModelVersionGetModelVersionListByIds } from '@/services/resource/ModelVersion'; + +// const [tabs, setTabs] = useState([]); +// const [projectData, setProjectData] = useState({}); +// const [tab, setTab] = useState(''); +// const [modelVersionData, setModelVersionData] = useState([]); + +// 卡片 + +const ProjectCard: React.FC = ({ info }: { info: Record }) => { + return ( +
+
+ {info.name} + 经典算法 +
+
+ 版本： + {info.remark} +
+
+ 更新时间： + {dateFormat(info.updateTime)} +
+
+ ); +}; + +export default ProjectCard; diff --git a/src/testData/SettingAIgorithm.tsx b/src/testData/SettingAIgorithm.tsx new file mode 100644 index 0000000..54c91c3 --- /dev/null +++ b/src/testData/SettingAIgorithm.tsx @@ -0,0 +1,41 @@ +/* + * @Author: zhoux zhouxia@supervision.ltd + * @Date: 2023-11-07 10:57:28 + * @LastEditors: zhoux zhouxia@supervision.ltd + * @LastEditTime: 2023-11-07 10:57:32 + * @FilePath: \general-ai-platform-web\src\testData\SettingAIgorithm.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ +const data = [ + '苏胜天人物识别算法', + '苏胜天交警识别识别', + '苏胜天车牌识别算法', + '苏胜天语音识别算法', + '苏胜天轨迹识别算法', + ].map((item) => ({ + title: '苏胜天算法模型', + subTitle: 经典算法, + actions: [模型版本选择], + avatar: 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg', + content: ( +
+
{item}
+
+ +
+
+ 版本：V1.2.4 +
+
+ 更新时间：2022-12-12 +
+
+ ), + })); \ No newline at end of file diff --git a/src/testData/testData.md b/src/testData/testData.md new file mode 100644 index 0000000..3684c11 --- /dev/null +++ b/src/testData/testData.md @@ -0,0 +1,11 @@ + +### 测试数据 + +