diff --git a/src/components/TableActionCard/index.tsx b/src/components/TableActionCard/index.tsx index 8729d05..84b0442 100644 --- a/src/components/TableActionCard/index.tsx +++ b/src/components/TableActionCard/index.tsx @@ -2,7 +2,7 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-11-14 15:49:36 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-11-16 15:10:41 + * @LastEditTime: 2023-12-11 10:30:54 * @FilePath: \general-ai-platform-web\src\components\TableActionCard\index.tsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -14,11 +14,12 @@ import React from 'react'; //TODO 表单的操作按钮集合 key的报错未解决 type actionsProps = { key: string; - renderDom: any + renderDom: any; } export type TableActionItemProps = { renderActions: actionsProps[]; + listType?: 'proTable' | 'proList' }; const TableActionCard: React.FC = (props) => { @@ -43,10 +44,10 @@ const TableActionCard: React.FC = (props) => { }); } return ( -
+
{prevActions.map((item) => { return ( - + {item.renderDom} ); diff --git a/src/components/TableActionCard/isConfirmAction.tsx b/src/components/TableActionCard/isConfirmAction.tsx index fea2ee7..2bc4a5d 100644 --- a/src/components/TableActionCard/isConfirmAction.tsx +++ b/src/components/TableActionCard/isConfirmAction.tsx @@ -2,7 +2,7 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-11-16 14:30:15 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-11-16 16:22:15 + * @LastEditTime: 2023-12-11 15:20:25 * @FilePath: \general-ai-platform-web\src\components\BatchOperation\isBatchDelete.tsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -18,6 +18,8 @@ type isConfirmActionProps = { description?: string; buttonText?: string; buttonFormatText?: string; + buttonType?: 'link' | 'text' | 'default' | 'primary' | 'dashed' | undefined; + danger?: boolean }; const IsConfirmAction: React.FC = (props) => { @@ -35,7 +37,8 @@ const IsConfirmAction: React.FC = (props) => { cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} >
+ ); +}; // 设备信息 const DeviceBaseInfo: React.FC = () => { + const baseColumns: ProColumns[]> = [ + { + title: '设备组', + dataIndex: 'label1', + }, + { + title: '设备分类', + dataIndex: 'label2', + }, + { + title: '设备名称', + dataIndex: 'label3', + }, + { + title: '设备ID', + dataIndex: 'label4', + }, + { + title: '设备IP', + dataIndex: 'label5', + }, + // TODO 这边根据对应状态使用不同颜色字体 + { + title: '设备状态', + dataIndex: 'label8', + render(dom, entity, index, action, schema) { + return {dom}; + }, + }, + { + title: '备注', + dataIndex: 'label7', + }, + ]; + // 基本信息测试数据 + const testBaseData: Record = { + label1: '设备组001', + label2: '区域监控', + label3: '设备001', + label4: '001001', + label5: '192.168.192.168', + label8: '在线', + label7: '这是备注这是备注这是备注这是备注这是备注', + }; + // 硬件信息测试数据 + const chartList: Record[] = [ + { + title: 'CPU', + type: 0, + chartOptions: [ + { + name: '已占用', + value: 123, + color: '#FFAB00', + }, + { + name: '未占用', + color: '#477BFF', + value: 233, + }, + ], + }, + { + title: '内存', + type: 1, + chartOptions: [ + { + name: '已占用', + value: 160, + color: '#00C45A', + }, + { + name: '未占用', + color: '#FF8110', + value: 40, + }, + ], + }, + { + title: '存储', + type: 2, + chartOptions: [ + { + name: '已占用', + value: 60, + color: '#FF8110', + }, + { + name: '未占用', + color: '#47A3FF', + value: 140, + }, + ], + }, + { + title: 'GPU', + type: 3, + chartOptions: [ + { + name: '已占用', + value: 60, + color: '#FFAB00', + }, + { + name: '未占用', + color: '#477BFF', + value: 140, + }, + ], + }, + ]; + // 当前任务 + const taskList: Record[] = [ + { + id: '001', + modelName: '模型名称1', + version: '版本号1', + updateTime: '2023-12-12 10:10:56', + }, + { + id: '001', + modelName: '模型名称2', + version: '版本号1', + updateTime: '2023-12-12 10:10:56', + }, + { + id: '001', + modelName: '模型名称3', + version: '版本号1', + updateTime: '2023-12-12 10:10:56', + }, + { + id: '001', + modelName: '模型名称4', + version: '版本号1', + updateTime: '2023-12-12 10:10:56', + }, + ]; + return (
    -
  • 基础信息
    • +
  • +

    + 基础信息 +

    + +
    • +
  • +

    + 硬件信息 +

    +
    + {chartList.map((item, index) => { + return ( + + ); + })} +
    +
    • +
  • +

    + 当前任务 +

    +
    + {taskList.map((item, index) => { + return ( +
    + +
    +
    + +
    +
    + +     +
    + ); + })} +
    +
); }; @@ -18,6 +306,8 @@ const DeviceBaseInfo: React.FC = () => { // 设备信息 const DeviceLogInfo: React.FC = () => { + // 动态设置每页数量 + const [currentPageSize, setCurrentPageSize] = useState(10); const columns: ProColumns[]> = [ { title: ( @@ -75,6 +365,7 @@ const DeviceLogInfo: React.FC = () => { hideInSearch: true, }, ]; + let testData: Record[] = []; for (let i = 0; i < 8; i++) { testData.push({ @@ -93,32 +384,43 @@ const DeviceLogInfo: React.FC = () => { search={false} options={{ fullScreen: false, setting: false, density: false, reload: false }} rowKey="key" - request={async () => { - // 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 getSysOperationRecordGetOperationRecordList({...reqParams}) + 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'; + } + // TODO 联调查询设备日志接口 + // let resps = await postDeviceGroupGetDeviceGroupList({ ...reqParams }); let resp = { success: true, + data: { + list: testData, + total: 8, + page: 1, + pageSize: 8, + }, }; return { - data: testData, + data: resp.data.list, success: resp.success, - // total: resp.data.total, - // current: resp.data.page, - // pageSize: resp.data.pageSize + total: resp.data.total, + current: resp.data.page, + pageSize: resp.data.pageSize, }; }} - pagination={false} + pagination={{ + ...proTablePaginationOptions, + pageSize: currentPageSize, + onChange: (page, pageSize) => setCurrentPageSize(pageSize), + }} columns={columns} > ); @@ -153,7 +455,7 @@ const DetailInfoCard: React.FC = (props) => { { key: 'deviceInfo', label: intl.formatMessage({ - id: 'pages.login.accountLogin.tab', + id: 'DCSDeviceList.deviceStatus.detailModel.baseInfo', defaultMessage: '设备信息', }), }, diff --git a/src/pages/DCSDevice/DeviceStatus/components/DeviceStatusCard.tsx b/src/pages/DCSDevice/DeviceStatus/components/DeviceStatusCard.tsx index 396912c..12caec7 100644 --- a/src/pages/DCSDevice/DeviceStatus/components/DeviceStatusCard.tsx +++ b/src/pages/DCSDevice/DeviceStatus/components/DeviceStatusCard.tsx @@ -2,7 +2,7 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-11-06 16:12:17 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-12-08 14:05:45 + * @LastEditTime: 2023-12-11 16:12:17 * @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 */ @@ -21,9 +21,9 @@ const listItemStyle = { display: 'flex', fontSize: 14, color: '#333333', - maxWidth: '22vh', + width: '100%', alignItems: 'center', - padding: '5px 0', + padding: '8px 0 0', }; const listItemLabelStyle = { @@ -48,7 +48,7 @@ type DeviceItemProgress = { }; // 进度条 - +// TODO 进度条的边框圆角调整为矩形 const DeviceItemProgress: React.FC = (props) => { let strokeColor = 'rgb(243,48,5)'; switch (props.label) { @@ -61,15 +61,15 @@ const DeviceItemProgress: React.FC = (props) => { case '存储': strokeColor = 'rgb(33,169,122)'; break; - case 'NPU': + case 'GPU': strokeColor = 'rgb(250,173,20)'; break; } return ( -
+
{props.label} - +
); }; @@ -94,7 +94,7 @@ const DeviceStatusCard: React.FC = ({ 苏胜天算法模型 经典算法
*/} -
    +
      • @@ -105,7 +105,7 @@ const DeviceStatusCard: React.FC = ({
    • - +
diff --git a/src/pages/DCSDevice/DeviceStatus/index.tsx b/src/pages/DCSDevice/DeviceStatus/index.tsx index f774ea0..746b398 100644 --- a/src/pages/DCSDevice/DeviceStatus/index.tsx +++ b/src/pages/DCSDevice/DeviceStatus/index.tsx @@ -2,19 +2,20 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-12-08 10:11:54 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-12-08 16:01:26 + * @LastEditTime: 2023-12-11 17:15:39 * @FilePath: \general-ai-platform-web\src\pages\DCSDevice\DeviceStatus\index.tsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ import TableActionCard from '@/components/TableActionCard'; import IsConfirmAction from '@/components/TableActionCard/isConfirmAction'; import { deviceStatusEnums } from '@/enums/status'; -import { PageContainer, ProCard, ProList } from '@ant-design/pro-components'; +import { PageContainer, ProCard, ProColumns, ProList } from '@ant-design/pro-components'; import { FormattedMessage } from '@umijs/max'; import { Button, Tag } from 'antd'; import React, { useState } from 'react'; -import DeviceStatusCard from './components/DeviceStatusCard'; +import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable'; import DetailInfoCard from './components/DetailInfoCard'; +import DeviceStatusCard from './components/DeviceStatusCard'; /** * @交互说明 @@ -30,185 +31,275 @@ const tabOptions: Record = { errorStatus: 20, }; - - const DeviceStatus: React.FC = () => { const [cardActionProps, setCardActionProps] = useState<'actions' | 'extra'>('extra'); const [detailModalOpen, setDetailModalOpen] = useState(false); - const [currentRow, setCurrentRow] = useState>({}); - + const [currentRow, setCurrentRow] = useState>({}); + // 动态设置每页数量 + const [currentPageSize, setCurrentPageSize] = useState(8); const [activeTabIndex, setActiveTabIndex] = useState(0); - const [ghost, setGhost] = useState(false); - - const handleDetailModal = () => { if (detailModalOpen) { setDetailModalOpen(false); setCurrentRow({}); } else { setDetailModalOpen(true); - } }; - const data = [{status: '在线'},{status: '在线'}, {status: '故障'},{status: '故障'},{status: '运行中'},{status: '在线'},{status: '在线'}, {status: '离线'}].map( - (record, index) => { - let currColor = 'default'; - switch (record.status) { - case '在线': - currColor = 'success'; - break; - case '故障': - currColor = 'error'; - break; - case '运行中': - currColor = 'warning'; - break; - default: - currColor = 'default'; - break; - } - return { - content: ( - -
-
- {record.status} - 控制设备控制设备{index + 1} -
- { - // 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: '$$$' }), - // ); - // }); - }} - > - ), - }, - { - key: 'detail', - renderDom: ( - - ), - }, - ]} - > + const dataTestList = [ + { status: '在线' }, + { status: '在线' }, + { status: '故障' }, + { status: '故障' }, + { status: '运行中' }, + { status: '在线' }, + { status: '在线' }, + { status: '离线' }, + ].map((record, index) => { + let currColor = 'default'; + switch (record.status) { + case '在线': + currColor = 'success'; + break; + case '故障': + currColor = 'error'; + break; + case '运行中': + currColor = 'warning'; + break; + default: + currColor = 'default'; + break; + } + return { + content: ( + +
+
+ {record.status} +

控制设备控制设备{index + 1}

- {' '} - - ), - }; + { + // 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: '$$$' }), + // ); + // }); + }} + > + ), + }, + { + key: 'detail', + renderDom: ( + + ), + }, + ]} + > +
+ {' '} + + ), + }; + }); + + const columns: ProColumns>[] = [ + { + title: '123', + dataIndex: 'status', + // hideInSearch: true, }, - ); + ]; return ( - -
- {Object.keys(tabOptions).map((item, index) => { - // eslint-disable-next-line react/jsx-key - return ( - - ); - })} -
- - className="gn" - ghost={true} - itemCardProps={{ - ghost: true, - bodyStyle: { padding: 0, margin: 0 }, - }} - pagination={{ - defaultPageSize: 8, - showSizeChanger: false, - }} - showActions="hover" - rowSelection={false} - grid={{ gutter: 16, xs: 1, md: 2, lg: 3, xl: 4, xxl: 4 }} - metas={{ - type: {}, - content: {}, - actions: { - cardActionProps, + + className="gn" + ghost={true} + itemCardProps={{ + ghost: true, + bodyStyle: { padding: 0, margin: 0 }, + }} + search={{ + labelWidth: proTableCommonOptions.searchLabelWidth, + }} + headerTitle={ + <> +
+ {Object.keys(tabOptions).map((item, index) => { + // eslint-disable-next-line react/jsx-key + return ( + + ); + })} +
+ + } + cardProps={{ + bodyStyle: { + background: 'white', + padding: '8px 16px 16px', + borderRadius: 8 + } + }} + pagination={{ + ...proTablePaginationOptions, + pageSize: currentPageSize, + onChange: (page, pageSize) => setCurrentPageSize(pageSize), + }} + showActions="hover" + rowSelection={false} + grid={{ gutter: 16, xs: 1, md: 2, lg: 3, xl: 4, xxl: 4 }} + metas={{ + type: { + hideInSearch: true, + }, + content: { + hideInSearch: true, + }, + actions: { + cardActionProps, + }, + status1: { + // 自己扩展的字段，主要用于筛选，不在列表中显示 + title: '设备组', + valueType: 'select', + valueEnum: { + '0': { text: '全部设备分组', status: '0' }, + '1': { + text: '设备分组1', + status: '1', + }, + '2': { + text: '设备分组2', + status: '2', + }, + '3': { + text: '设备分组3', + status: '3', + }, }, - }} - headerTitle="" - // toolBarRender={(action, rows) => { - // console.log(action, rows, 'toolBarRender'); - // // TODO 需要对接接口 - // const isProcess: boolean = false; - // return isProcess ? ( - // - // ) : ( - // - // ); - // }} - dataSource={data} - /> - - - - - - + }, + status2: { + // 自己扩展的字段，主要用于筛选，不在列表中显示 + title: '分类', + valueType: 'select', + valueEnum: { + '0': { text: '全部分类', status: '0' }, + '1': { + text: '外围监控', + status: '1', + }, + '2': { + text: '室内监控', + status: '2', + }, + '3': { + text: '违规监控', + status: '3', + }, + }, + }, + }} + 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'; + } + // TODO 联调查询设备状态接口 + // let resps = await postDeviceGroupGetDeviceGroupList({ ...reqParams }); + let resp = { + success: true, + data: { + list: dataTestList, + total: 8, + page: 1, + pageSize: 8, + }, + }; + return { + data: resp.data.list, + success: resp.success, + total: resp.data.total, + current: resp.data.page, + pageSize: resp.data.pageSize, + }; + }} + /> + ); };