From 628daf4cd1e92f5f11014376ec0bd0ce9694db38 Mon Sep 17 00:00:00 2001 From: zhoux Date: Fri, 8 Dec 2023 18:00:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96=E5=88=86?= =?UTF-8?q?=E5=B8=83=E5=BC=8F=E8=AE=BE=E5=A4=87=E7=8A=B6=E6=80=81=E6=A8=A1?= =?UTF-8?q?=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/DCSDevice.ts | 111 +++ src/enums/status.ts | 30 + src/locales/zh-CN.ts | 39 +- src/locales/zh-CN/DCSDevice.ts | 16 +- src/locales/zh-CN/pages.ts | 1 + .../DeviceStatus/components/ColumnDrawer.tsx | 41 - .../DeviceStatus/components/Columns.tsx | 62 -- .../DeviceStatus/components/CreateForm.tsx | 233 ----- .../components/DetailInfoCard.tsx | 175 ++++ .../components/DeviceStatusCard.tsx | 115 +++ .../DeviceStatus/components/UpdateForm.tsx | 272 ------ .../DeviceStatus/components/VideoModal.tsx | 53 -- src/pages/DCSDevice/DeviceStatus/index.tsx | 878 ++++-------------- 13 files changed, 666 insertions(+), 1360 deletions(-) create mode 100644 mock/DCSDevice.ts create mode 100644 src/enums/status.ts delete mode 100644 src/pages/DCSDevice/DeviceStatus/components/ColumnDrawer.tsx delete mode 100644 src/pages/DCSDevice/DeviceStatus/components/Columns.tsx delete mode 100644 src/pages/DCSDevice/DeviceStatus/components/CreateForm.tsx create mode 100644 src/pages/DCSDevice/DeviceStatus/components/DetailInfoCard.tsx create mode 100644 src/pages/DCSDevice/DeviceStatus/components/DeviceStatusCard.tsx delete mode 100644 src/pages/DCSDevice/DeviceStatus/components/UpdateForm.tsx delete mode 100644 src/pages/DCSDevice/DeviceStatus/components/VideoModal.tsx diff --git a/mock/DCSDevice.ts b/mock/DCSDevice.ts new file mode 100644 index 0000000..b72112f --- /dev/null +++ b/mock/DCSDevice.ts @@ -0,0 +1,111 @@ +import { Request, Response } from 'express'; +import moment from 'moment'; +import { parse } from 'url'; + +// mock tableListDataSource +const genList = (current: number, pageSize: number) => { + const tableListDataSource: API.RuleListItem[] = []; + + for (let i = 0; i < pageSize; i += 1) { + const index = (current - 1) * 10 + i; + tableListDataSource.push({ + key: index, + disabled: i % 6 === 0, + href: 'https://ant.design', + avatar: [ + 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', + 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png', + ][i % 2], + name: `TradeCode ${index}`, + owner: '曲丽丽', + desc: '这是一段描述', + callNo: Math.floor(Math.random() * 1000), + status: Math.floor(Math.random() * 10) % 4, + updatedAt: moment().format('YYYY-MM-DD'), + createdAt: moment().format('YYYY-MM-DD'), + progress: Math.ceil(Math.random() * 100), + }); + } + tableListDataSource.reverse(); + return tableListDataSource; +}; + +let tableListDataSource = genList(1, 100); + +function getDCSDeviceStatusList(req: Request, res: Response, u: string) { + let realUrl = u; + if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') { + realUrl = req.url; + } + const { current = 1, pageSize = 10 } = req.query; + const params = parse(realUrl, true).query as unknown as API.PageParams & + API.RuleListItem & { + sorter: any; + filter: any; + }; + + let dataSource = [...tableListDataSource].slice( + ((current as number) - 1) * (pageSize as number), + (current as number) * (pageSize as number), + ); + if (params.sorter) { + const sorter = JSON.parse(params.sorter); + dataSource = dataSource.sort((prev, next) => { + let sortNumber = 0; + (Object.keys(sorter) as Array).forEach((key) => { + let nextSort = next?.[key] as number; + let preSort = prev?.[key] as number; + if (sorter[key] === 'descend') { + if (preSort - nextSort > 0) { + sortNumber += -1; + } else { + sortNumber += 1; + } + return; + } + if (preSort - nextSort > 0) { + sortNumber += 1; + } else { + sortNumber += -1; + } + }); + return sortNumber; + }); + } + if (params.filter) { + const filter = JSON.parse(params.filter as any) as { + [key: string]: string[]; + }; + if (Object.keys(filter).length > 0) { + dataSource = dataSource.filter((item) => { + return (Object.keys(filter) as Array).some((key) => { + if (!filter[key]) { + return true; + } + if (filter[key].includes(`${item[key]}`)) { + return true; + } + return false; + }); + }); + } + } + + if (params.name) { + dataSource = dataSource.filter((data) => data?.name?.includes(params.name || '')); + } + const result = { + data: dataSource, + total: tableListDataSource.length, + success: true, + pageSize, + current: parseInt(`${params.current}`, 10) || 1, + }; + + return res.json(result); +} + + +export default { + 'GET /api/mock/getDCSDeviceStatusList': getDCSDeviceStatusList, +}; diff --git a/src/enums/status.ts b/src/enums/status.ts new file mode 100644 index 0000000..7df08ba --- /dev/null +++ b/src/enums/status.ts @@ -0,0 +1,30 @@ + + + +export const deviceStatusEnums : Record = { + 'allStatus': { + miniName: '全部', + value: '', + color: '' + }, + 'onlineStatus': { + miniName: '在线', + value: '', + color: 'success' + }, + 'outlineStatus': { + miniName: '离线', + value: '', + color: 'default' + }, + 'processingStatus': { + miniName: '运行中', + value: '', + color: 'warning' + }, + 'errorStatus': { + miniName: '故障', + value: '', + color: 'error' + } +} \ No newline at end of file diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 50fc6f0..018d018 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -2,10 +2,28 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-11-01 13:56:33 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-11-30 17:10:53 + * @LastEditTime: 2023-12-08 16:03:40 * @FilePath: \general-ai-platform-web\src\locales\zh-CN.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ +import * as DCSDevice from '@/locales/zh-CN/DCSDevice'; +import * as analysisZh from '@/locales/zh-CN/analysis'; +import * as deviceZh from '@/locales/zh-CN/device'; +import * as errorTypesZh from '@/locales/zh-CN/errorTypes'; +import * as projectZh from '@/locales/zh-CN/project'; +import * as resourceZh from '@/locales/zh-CN/resource'; +import { + api, + department, + dynamic_menu, + interface_api, + operation_record, + post, + role, + user, +} from '@/locales/zh-CN/system'; +import app from './zh-CN/app'; +import common from './zh-CN/common'; import component from './zh-CN/component'; import globalHeader from './zh-CN/globalHeader'; import menu from './zh-CN/menu'; @@ -13,14 +31,7 @@ import pages from './zh-CN/pages'; import pwa from './zh-CN/pwa'; import settingDrawer from './zh-CN/settingDrawer'; import settings from './zh-CN/settings'; -import common from './zh-CN/common'; -import app from './zh-CN/app'; -import {interface_api, dynamic_menu, api, role, user, post, department, operation_record} from "@/locales/zh-CN/system"; -import * as analysisZh from "@/locales/zh-CN/analysis"; -import * as errorTypesZh from "@/locales/zh-CN/errorTypes"; -import * as deviceZh from "@/locales/zh-CN/device"; -import * as resourceZh from "@/locales/zh-CN/resource"; -import * as projectZh from "@/locales/zh-CN/project"; + export default { 'navBar.lang': '语言', 'layout.user.link.help': '帮助', @@ -38,7 +49,14 @@ export default { ...pwa, ...common, ...component, - ...interface_api, ...dynamic_menu, ...api, ...role, ...user, ...post, ...department, ...operation_record, + ...interface_api, + ...dynamic_menu, + ...api, + ...role, + ...user, + ...post, + ...department, + ...operation_record, ...app, ...Object.assign({}, ...Object.values(analysisZh)), @@ -46,4 +64,5 @@ export default { ...Object.assign({}, ...Object.values(deviceZh)), ...Object.assign({}, ...Object.values(resourceZh)), ...Object.assign({}, ...Object.values(projectZh)), + ...Object.assign({}, ...Object.values(DCSDevice)), }; diff --git a/src/locales/zh-CN/DCSDevice.ts b/src/locales/zh-CN/DCSDevice.ts index 8d86d06..fc3cb8d 100644 --- a/src/locales/zh-CN/DCSDevice.ts +++ b/src/locales/zh-CN/DCSDevice.ts @@ -2,7 +2,7 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-12-08 10:26:34 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-12-08 10:27:48 + * @LastEditTime: 2023-12-08 17:59:48 * @FilePath: \general-ai-platform-web\src\locales\zh-CN\DCSDevice.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -22,8 +22,14 @@ export const DCSDevice_list: { [key: string]: string } = { 'DCSDeviceList.device.table.list.name': '设备名称' } - +// 设备状态 export const DCSDevice_status: { [key: string]: string } = { - - -} \ No newline at end of file + 'DCSDeviceList.deviceStatus.detailModel.name': '设备详情', + 'DCSDeviceList.deviceStatus.detailModel.baseInfo': '设备信息', + 'DCSDeviceList.deviceStatus.detailModel.log': '设备日志', + 'DCSDeviceList.deviceStatus.detailModel.logTable.deviceName': '设备名称', + 'DCSDeviceList.deviceStatus.detailModel.logTable.deviceID': '设备ID', + 'DCSDeviceList.deviceStatus.detailModel.logTable.deviceCat': '设备类别', + 'DCSDeviceList.deviceStatus.detailModel.logTable.deviceIP': '设备IP', + 'DCSDeviceList.deviceStatus.detailModel.logTable.deviceTime': '运行时长', +} \ No newline at end of file diff --git a/src/locales/zh-CN/pages.ts b/src/locales/zh-CN/pages.ts index f38c701..a37eec9 100644 --- a/src/locales/zh-CN/pages.ts +++ b/src/locales/zh-CN/pages.ts @@ -28,6 +28,7 @@ export default { 'pages.admin.subPage.alertMessage': 'umi ui 现已发布，欢迎使用 npm run ui 启动体验。', 'pages.searchTable.createForm.newRule': '新建规则', 'pages.searchTable.detail': '详情', + 'pages.searchTable.reOpen': '重启', 'pages.searchTable.update': '更新', 'pages.searchTable.destroy': '删除', 'pages.searchTable.create_son_menu': '添加子菜单', diff --git a/src/pages/DCSDevice/DeviceStatus/components/ColumnDrawer.tsx b/src/pages/DCSDevice/DeviceStatus/components/ColumnDrawer.tsx deleted file mode 100644 index 9561cd6..0000000 --- a/src/pages/DCSDevice/DeviceStatus/components/ColumnDrawer.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react"; -import {Drawer} from "antd"; -import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components"; - -export type ColumnDrawProps = { - handleDrawer: (id?: any)=>void; - isShowDetail: boolean; - columns: ProColumns[]; - currentRow: API.Device | undefined; -}; - - -const ColumnDrawer: React.FC = (props) => { - - return ( - { - props.handleDrawer(); - }} - closable={true} - > - {props.currentRow?.id && ( - - column={2} - title={props.currentRow?.id} - request={async () => ({ - data: props.currentRow || {}, - })} - params={{ - id: props.currentRow?.id, - }} - columns={props.columns as ProDescriptionsItemProps[]} - /> - )} - - ) -} -export {ColumnDrawer} - diff --git a/src/pages/DCSDevice/DeviceStatus/components/Columns.tsx b/src/pages/DCSDevice/DeviceStatus/components/Columns.tsx deleted file mode 100644 index 028dcf7..0000000 --- a/src/pages/DCSDevice/DeviceStatus/components/Columns.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { FormattedMessage} from '@umijs/max'; -export const DeviceColumns = [{ - title: (), - dataIndex: "id", - },{ - title: (), - dataIndex: "name", - },{ - title: (), - dataIndex: "code", - },{ - title: (), - dataIndex: "position", - },{ - title: (), - dataIndex: "param", - },{ - title: (), - dataIndex: "spec", - },{ - title: (), - dataIndex: "category_fk_id", - },{ - title: (), - dataIndex: "group_fk_id", - },{ - title: (), - dataIndex: "is_enable", - },{ - title: (), - dataIndex: "remark", - },{ - title: (), - dataIndex: "create_time", - },{ - title: (), - dataIndex: "update_time", - },] diff --git a/src/pages/DCSDevice/DeviceStatus/components/CreateForm.tsx b/src/pages/DCSDevice/DeviceStatus/components/CreateForm.tsx deleted file mode 100644 index f4d8289..0000000 --- a/src/pages/DCSDevice/DeviceStatus/components/CreateForm.tsx +++ /dev/null @@ -1,233 +0,0 @@ -import { postDeviceCreateDevice } from '@/services/device/Device'; -import { postDeviceCategoryGetDeviceCategoryFkSelect } from '@/services/device/DeviceCategory'; -import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup'; -import { - ModalForm, - ProForm, - ProFormSelect, - ProFormSwitch, - ProFormText, -} from '@ant-design/pro-components'; -import { FormattedMessage, useIntl } from '@umijs/max'; -import { Form, Switch, message } from 'antd'; -import React, { useState } from 'react'; -import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm'; -export type FormValueType = { - target?: string; - template?: string; - type?: string; - time?: string; - frequency?: string; -} & Partial; - -export type CreateFormProps = { - createModalOpen: boolean; - handleModal: () => void; - values: Partial; - reload: any; -}; -const CreateForm: React.FC = (props) => { - const intl = useIntl(); - const [isAuto, setIsAuto] = useState(true); - const [form] = Form.useForm(); - - return ( - - width={proFormModelWidth} - title={intl.formatMessage({ - id: 'device.device.table.list.add', - defaultMessage: '$$$', - })} - open={props.createModalOpen} - form={form} - autoFocusFirstInput - modalProps={{ - destroyOnClose: true, - onCancel: () => props.handleModal(), - }} - submitTimeout={2000} - onFinish={async (values) => { - postDeviceCreateDevice(values) - .then(() => { - message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); - props.reload(); - }) - .catch(() => { - message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); - }); - props.handleModal(); - return true; - }} - > - - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ id: 'device.device.table.list.name', defaultMessage: '$$$' })}`} - required={true} - rules={[ - { - required: true, - message: ( - - ), - }, - ]} - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_select', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.groupFkId', - defaultMessage: '$$$', - })}`} - required={false} - showSearch - debounceTime={1000} - request={async (keyWord) => { - const resp = await postDeviceGroupGetDeviceGroupFkSelect({ - keyword: keyWord?.keyWords || '', - }); - return resp.data.list.map((v: any) => { - return { - label: v.name, - value: v.id, - }; - }); - }} - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ id: 'device.device.table.list.code', defaultMessage: '$$$' })}`} - required={!isAuto} - initialValue="" - disabled={isAuto} - rules={ - isAuto - ? [] - : [ - { - required: true, - message: ( - - ), - }, - ] - } - addonAfter={ - } - unCheckedChildren={} - onChange={setIsAuto} - /> - } - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.position', - defaultMessage: '$$$', - })}`} - required={false} - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.param', - defaultMessage: '$$$', - })}`} - required={false} - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ id: 'device.device.table.list.spec', defaultMessage: '$$$' })}`} - required={false} - /> - - } - placeholder={`${intl.formatMessage({ - id: 'common.please_select', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.categoryFkId', - defaultMessage: '$$$', - })}`} - required={false} - showSearch - debounceTime={1000} - request={async (keyWord) => { - const resp = await postDeviceCategoryGetDeviceCategoryFkSelect({ - keyword: keyWord?.keyWords || '', - }); - return resp.data.list.map((v: any) => { - return { - label: v.name, - value: v.id, - }; - }); - }} - /> - - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.remark', - defaultMessage: '$$$', - })}`} - required={false} - /> - } - initialValue={true} - /> - - - ); -}; -export default CreateForm; diff --git a/src/pages/DCSDevice/DeviceStatus/components/DetailInfoCard.tsx b/src/pages/DCSDevice/DeviceStatus/components/DetailInfoCard.tsx new file mode 100644 index 0000000..0ab8b61 --- /dev/null +++ b/src/pages/DCSDevice/DeviceStatus/components/DetailInfoCard.tsx @@ -0,0 +1,175 @@ +import { Modal, Tabs } from 'antd'; +import { proFormMaxModelWidth } from '../../../../../config/defaultForm'; + +import { ProColumns, ProTable } from '@ant-design/pro-components'; +import { FormattedMessage, useIntl } from '@umijs/max'; +import React, { useState } from 'react'; + +// 设备信息 + +const DeviceBaseInfo: React.FC = () => { + return ( +
    +
  • 基础信息
    • +
+ ); +}; + +// 设备信息 + +const DeviceLogInfo: React.FC = () => { + const columns: ProColumns[]> = [ + { + title: ( + + ), + dataIndex: 'deviceName', + // width: 120, + hideInSearch: true, + }, + { + title: ( + + ), + dataIndex: 'deviceID', + // width: 120, + hideInSearch: true, + }, + { + title: ( + + ), + dataIndex: 'deviceCat', + // width: 120, + hideInSearch: true, + }, + { + title: ( + + ), + dataIndex: 'deviceIP', + // width: 120, + hideInSearch: true, + }, + { + title: ( + + ), + dataIndex: 'deviceTime', + // width: 120, + hideInSearch: true, + }, + ]; + let testData: Record[] = []; + for (let i = 0; i < 8; i++) { + testData.push({ + deviceName: '设备' + (i + 1), + deviceID: '123456', + deviceCat: '外围监控', + deviceIP: '192.168.1.10', + deviceTime: '22:00:00', + }); + } + return ( + { + // 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}) + let resp = { + success: true, + }; + return { + data: testData, + success: resp.success, + // total: resp.data.total, + // current: resp.data.page, + // pageSize: resp.data.pageSize + }; + }} + pagination={false} + columns={columns} + > + ); +}; + +export type DetailInfoCardProps = { + detailModalOpen: boolean; + handleDetailModal: () => void; +}; + +const DetailInfoCard: React.FC = (props) => { + const intl = useIntl(); + + const [type, setType] = useState('deviceInfo'); + + return ( + + setType(activeKey)} + items={[ + { + key: 'deviceInfo', + label: intl.formatMessage({ + id: 'pages.login.accountLogin.tab', + defaultMessage: '设备信息', + }), + }, + { + key: 'deviceLog', + label: intl.formatMessage({ + id: 'DCSDeviceList.deviceStatus.detailModel.log', + defaultMessage: '设备日志', + }), + }, + ]} + > + {type === 'deviceInfo' && } + {type === 'deviceLog' && } + + ); +}; + +export default DetailInfoCard; diff --git a/src/pages/DCSDevice/DeviceStatus/components/DeviceStatusCard.tsx b/src/pages/DCSDevice/DeviceStatus/components/DeviceStatusCard.tsx new file mode 100644 index 0000000..396912c --- /dev/null +++ b/src/pages/DCSDevice/DeviceStatus/components/DeviceStatusCard.tsx @@ -0,0 +1,115 @@ +/* + * @Author: zhoux zhouxia@supervision.ltd + * @Date: 2023-11-06 16:12:17 + * @LastEditors: zhoux zhouxia@supervision.ltd + * @LastEditTime: 2023-12-08 14:05:45 + * @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 { Progress } from 'antd'; +// import { postModelVersionGetModelVersionListByIds } from '@/services/resource/ModelVersion'; + +// const [tabs, setTabs] = useState([]); +// const [projectData, setProjectData] = useState({}); +// const [tab, setTab] = useState(''); +// const [modelVersionData, setModelVersionData] = useState([]); + +/**styles */ +const listItemStyle = { + display: 'flex', + fontSize: 14, + color: '#333333', + maxWidth: '22vh', + alignItems: 'center', + padding: '5px 0', +}; + +const listItemLabelStyle = { + fontSize: 14, + color: '#666666', + minWidth: 40, +}; + +const listItemTextStyle = { + fontSize: 14, + margin: 0, +}; +// 卡片 +export type UpdateProjectProps = { + info: Record; + // reload: any; +}; + +type DeviceItemProgress = { + label: string; + percent: number; +}; + +// 进度条 + +const DeviceItemProgress: React.FC = (props) => { + let strokeColor = 'rgb(243,48,5)'; + switch (props.label) { + case 'CPU': + strokeColor = 'rgb(243,48,5)'; + break; + case '内存': + strokeColor = 'rgb(33,169,122)'; + break; + case '存储': + strokeColor = 'rgb(33,169,122)'; + break; + case 'NPU': + strokeColor = 'rgb(250,173,20)'; + break; + } + + return ( +
+ {props.label} + +
+ ); +}; + +const DeviceStatusCard: React.FC = ({ + info, +}: { + info: Record; +}) => { + return ( +
+ {/*
+ 苏胜天算法模型 + 经典算法 +
*/} +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ ); +}; + +export default DeviceStatusCard; diff --git a/src/pages/DCSDevice/DeviceStatus/components/UpdateForm.tsx b/src/pages/DCSDevice/DeviceStatus/components/UpdateForm.tsx deleted file mode 100644 index c386ae9..0000000 --- a/src/pages/DCSDevice/DeviceStatus/components/UpdateForm.tsx +++ /dev/null @@ -1,272 +0,0 @@ -import { putDeviceUpdateDevice } from '@/services/device/Device'; -import { postDeviceCategoryGetDeviceCategoryFkSelect } from '@/services/device/DeviceCategory'; -import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup'; -import { - ModalForm, - ProForm, - ProFormDateTimePicker, - ProFormSelect, - ProFormSwitch, - ProFormText, -} from '@ant-design/pro-components'; -import { FormattedMessage, useIntl } from '@umijs/max'; -import { Form, message } from 'antd'; -import React from 'react'; -import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm'; -export type FormValueType = { - target?: string; - template?: string; - type?: string; - time?: string; - frequency?: string; -} & Partial; - -export type UpdateFormProps = { - updateModalOpen: boolean; - handleModal: () => void; - values: Partial; - reload: any; -}; -const UpdateForm: React.FC = (props) => { - const intl = useIntl(); - const [form] = Form.useForm(); - - return ( - - width={proFormModelWidth} - title={intl.formatMessage({ - id: 'device.device.table.list.update', - defaultMessage: '$$$', - })} - open={props.updateModalOpen} - form={form} - autoFocusFirstInput - modalProps={{ - destroyOnClose: true, - onCancel: () => props.handleModal(), - }} - submitTimeout={2000} - onFinish={async (values) => { - putDeviceUpdateDevice(values) - .then(() => { - message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); - props.reload(); - }) - .catch(() => { - message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); - }); - - props.handleModal(); - return true; - }} - > - - - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ id: 'device.device.table.list.name', defaultMessage: '$$$' })}`} - required={true} - initialValue={props.values.name} - disabled={false} - rules={[ - { - required: true, - message: ( - - ), - }, - ]} - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ id: 'device.device.table.list.code', defaultMessage: '$$$' })}`} - required={true} - initialValue={props.values.code} - disabled={false} - rules={[ - { - required: true, - message: ( - - ), - }, - ]} - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.position', - defaultMessage: '$$$', - })}`} - required={false} - initialValue={props.values.position} - disabled={false} - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.param', - defaultMessage: '$$$', - })}`} - required={false} - initialValue={props.values.param} - disabled={false} - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ id: 'device.device.table.list.spec', defaultMessage: '$$$' })}`} - required={false} - initialValue={props.values.spec} - disabled={false} - /> - - } - placeholder={`${intl.formatMessage({ - id: 'common.please_select', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.categoryFkId', - defaultMessage: '$$$', - })}`} - required={false} - initialValue={props.values.categoryFkId} - showSearch - debounceTime={1000} - request={async (keyWord) => { - const resp = await postDeviceCategoryGetDeviceCategoryFkSelect({ - keyword: keyWord?.keyWords || '', - }); - return resp.data.list.map((v: any) => { - return { - label: v.name, - value: v.id, - }; - }); - }} - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_select', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.groupFkId', - defaultMessage: '$$$', - })}`} - required={false} - initialValue={props.values.groupFkId} - showSearch - debounceTime={1000} - request={async (keyWord) => { - const resp = await postDeviceGroupGetDeviceGroupFkSelect({ - keyword: keyWord?.keyWords || '', - }); - return resp.data.list.map((v: any) => { - return { - label: v.name, - value: v.id, - }; - }); - }} - /> - - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.remark', - defaultMessage: '$$$', - })}`} - required={false} - initialValue={props.values.remark} - disabled={false} - /> - } - initialValue={props.values.isEnable} - disabled={false} - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.createTime', - defaultMessage: '$$$', - })}`} - required={false} - initialValue={props.values.createTime} - disabled={true} - /> - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'device.device.table.list.updateTime', - defaultMessage: '$$$', - })}`} - required={false} - initialValue={props.values.updateTime} - disabled={true} - /> - - - ); -}; -export default UpdateForm; diff --git a/src/pages/DCSDevice/DeviceStatus/components/VideoModal.tsx b/src/pages/DCSDevice/DeviceStatus/components/VideoModal.tsx deleted file mode 100644 index b1bcd83..0000000 --- a/src/pages/DCSDevice/DeviceStatus/components/VideoModal.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import {useIntl} from '@umijs/max'; -import React, {useState, useRef, useCallback, useEffect} from 'react'; -import {Form, Modal} from 'antd'; - -import WebRTCStreamer from "@/components/WebRtcPlayer"; -export type FormValueType = { - target?: string; - template?: string; - type?: string; - time?: string; - frequency?: string; -} & Partial; - -export type VideoModalProps = { - modalOpen: boolean; - handleModal: () => void; - values: Partial; - reload: any; - videoServerParam: API.RtspRes; -}; - -const VideoModal: React.FC = (props) => { - - const intl = useIntl(); - const [form] = Form.useForm(); - - const [videoInit, setVideoInit] = useState(false); - - - useEffect(()=>{ - setVideoInit(false) - if (props.modalOpen) { - setVideoInit(true) - - } else { - console.log('***********') - setVideoInit(false) - } - - }, [props.modalOpen]) - - - return ( - - {videoInit && ()} - - - ) -} -export default VideoModal; diff --git a/src/pages/DCSDevice/DeviceStatus/index.tsx b/src/pages/DCSDevice/DeviceStatus/index.tsx index c55ff1a..f774ea0 100644 --- a/src/pages/DCSDevice/DeviceStatus/index.tsx +++ b/src/pages/DCSDevice/DeviceStatus/index.tsx @@ -1,706 +1,216 @@ -import IsBatchDelete from '@/components/BatchOperation/isBatchDelete'; +/* + * @Author: zhoux zhouxia@supervision.ltd + * @Date: 2023-12-08 10:11:54 + * @LastEditors: zhoux zhouxia@supervision.ltd + * @LastEditTime: 2023-12-08 16:01:26 + * @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 IsDelete from '@/components/TableActionCard/isDelete'; -import TreeAndTableList, { ProCardTypeProps } from '@/layouts/treeAndTableList'; -import { ColumnDrawer as DeviceCategoryColumnDrawer } from '@/pages/Device/DeviceCategoryList/components/ColumnDrawer'; -import { DeviceCategoryColumns } from '@/pages/Device/DeviceCategoryList/components/Columns'; -import { ColumnDrawer as DeviceGroupColumnDrawer } from '@/pages/Device/DeviceGroupList/components/ColumnDrawer'; -import { DeviceGroupColumns } from '@/pages/Device/DeviceGroupList/components/Columns'; -import { - deleteDeviceDeleteDevice, - deleteDeviceDeleteDeviceByIds, - postDeviceCloseRtspCamera, - postDeviceGetDeviceList, - postDeviceOpenRtspCamera, -} from '@/services/device/Device'; -import { - postDeviceCategoryGetDeviceCategoryById, - postDeviceCategoryGetDeviceCategoryFkSelect, - postDeviceCategoryGetDeviceCategoryNames, -} from '@/services/device/DeviceCategory'; -import { - postDeviceGroupGetDeviceGroupById, - postDeviceGroupGetDeviceGroupFkSelect, - postDeviceGroupGetDeviceGroupNames, - postDeviceGroupGetDeviceGroupTree, -} from '@/services/device/DeviceGroup'; -import { PlusOutlined, RedoOutlined } from '@ant-design/icons'; -import type { ActionType, ProColumns } from '@ant-design/pro-components'; -import { PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components'; -import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max'; -import { Button, Tree, message } from 'antd'; -import { DataNode } from 'antd/es/tree'; -import React, { useEffect, useRef, useState } from 'react'; -import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable'; -import { ColumnDrawer } from './components/ColumnDrawer'; -import CreateForm from './components/CreateForm'; -import UpdateForm from './components/UpdateForm'; -import VideoModal from './components/VideoModal'; +import IsConfirmAction from '@/components/TableActionCard/isConfirmAction'; +import { deviceStatusEnums } from '@/enums/status'; +import { PageContainer, ProCard, 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 DetailInfoCard from './components/DetailInfoCard'; + +/** + * @交互说明 + * 1、列表选择栏位 + * 2、卡片比照UI效果图 + * 3、详情弹框 + */ +const tabOptions: Record = { + allStatus: 90, + onlineStatus: 20, + outlineStatus: 20, + processingStatus: 10, + errorStatus: 20, +}; -const DeviceList: React.FC = () => { - /** - * @en-US Pop-up window of new window - * @zh-CN 新建窗口的弹窗 - * */ - const [videoModalOpen, setVideoModalOpen] = useState(false); - const [createModalOpen, setCreateModalOpen] = useState(false); - /** - * @en-US The pop-up window of the distribution update window - * @zh-CN 分布更新窗口的弹窗 - * */ - const [updateModalOpen, setUpdateModalOpen] = useState(false); - const [showDetail, setShowDetail] = useState(false); - /** - * @en-US International configuration - * @zh-CN 国际化配置 - * */ - const access = useAccess(); - const intl = useIntl(); - const actionRef = useRef(); - // 动态设置每页数量 - const [currentPageSize, setCurrentPageSize] = useState(10); - const [currentRow, setCurrentRow] = useState(); - const [selectedRowsState, setSelectedRows] = useState([]); - const [category_fk_id_open, set_category_fk_id_open] = useState(false); - const [category_fk_id, set_category_fk_id] = useState(); - const [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false); - const [categoryFkIdIds, setCategoryFkIdIds] = useState([]); - const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({}); - const [group_fk_id_open, set_group_fk_id_open] = useState(false); - const [group_fk_id, set_group_fk_id] = useState(); - const [group_fk_id_column_open, set_group_fk_id_column_open] = useState(false); - const [groupFkIdIds, setGroupFkIdIds] = useState([]); - const [groupFkIdMap, setGroupFkIdMap] = useState<{ [key: number]: string }>({}); - const [hasInit, setHasInit] = useState(false); - const [nodeTreeData, setNodeTreeData] = React.useState([]); - const [selectNodes, setSelectNodes] = React.useState([]); - const [videoOpening, setVideoOpening] = useState(false); - const [videoServerParam, setVideoServerParam] = useState({}); - useEffect(() => { - postDeviceGroupGetDeviceGroupTree() - .then((resp) => { - setNodeTreeData(resp.data.tree); - setHasInit(true); - }) - .catch(() => { - message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); - }); - }, []); - const handleVideoModal = () => { - if (videoModalOpen) { - setVideoModalOpen(false); - if (videoServerParam?.pid || 0) { - postDeviceCloseRtspCamera({ pid: videoServerParam.pid }).then((resp) => { - console.log(resp); - }); - } - setCurrentRow(undefined); - setVideoServerParam({}); - } else { - setVideoModalOpen(true); - } - }; - const handle_category_fk_id = (id: any) => { - if (category_fk_id_open) { - set_category_fk_id(undefined); - set_category_fk_id_open(false); - } else { - postDeviceCategoryGetDeviceCategoryById({ id: id }).then((resp) => { - set_category_fk_id(resp.data.deviceCategory); - set_category_fk_id_open(true); - }); - } - }; - const handle_category_fk_id_column_open = () => { - if (category_fk_id_column_open) { - set_category_fk_id_column_open(false); - } else { - postDeviceCategoryGetDeviceCategoryNames({ ids: categoryFkIdIds }).then((resp) => { - let a: any = {}; - resp.data.list.forEach((v: any) => { - if (v.id) { - a[v.id] = v.name; - } - }); - setCategoryFkIdMap(a); - }); - set_category_fk_id_column_open(true); - } - }; - const handle_group_fk_id = (id: any) => { - if (group_fk_id_open) { - set_group_fk_id(undefined); - set_group_fk_id_open(false); - } else { - postDeviceGroupGetDeviceGroupById({ id: id }).then((resp) => { - set_group_fk_id(resp.data.deviceGroup); - set_group_fk_id_open(true); - }); - } - }; - const handle_group_fk_id_column_open = () => { - if (group_fk_id_column_open) { - set_group_fk_id_column_open(false); - } else { - postDeviceGroupGetDeviceGroupNames({ ids: groupFkIdIds }).then((resp) => { - let a: any = {}; - resp.data.list.forEach((v: any) => { - if (v.id) { - a[v.id] = v.name; - } - }); - setGroupFkIdMap(a); - }); - set_group_fk_id_column_open(true); - } - }; +const DeviceStatus: React.FC = () => { + const [cardActionProps, setCardActionProps] = useState<'actions' | 'extra'>('extra'); + const [detailModalOpen, setDetailModalOpen] = useState(false); + const [currentRow, setCurrentRow] = useState>({}); - const handleUpdateModal = () => { - if (updateModalOpen) { - setUpdateModalOpen(false); - setCurrentRow(undefined); - } else { - setUpdateModalOpen(true); - } - }; - const handleCreateModal = () => { - if (createModalOpen) { - setCreateModalOpen(false); - setCurrentRow(undefined); - } else { - setCreateModalOpen(true); - } - }; - const handleColumnDrawer = () => { - if (showDetail) { - setShowDetail(false); - setCurrentRow(undefined); - } else { - setShowDetail(true); - } - }; - const handleDestroy = async (selectedRow: API.Device) => { - deleteDeviceDeleteDevice({ id: selectedRow.id }) - .then(() => { - message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); - actionRef.current?.reload(); - }) - .catch(() => { - message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); - }); - }; - - const columns: ProColumns[] = [ - { - title: , - dataIndex: 'name', - width: '150', - sorter: true, - render: (dom, entity) => { - return ( - { - setCurrentRow(entity); - setShowDetail(true); - }} - > - {dom} - - ); - }, - // renderFormItem: () => { - // return ( - // <> - // - // - // ); - // }, - key: 'fixedName', - fixed: 'left', - }, - // { - // title: , - // dataIndex: 'name', - // hideInSearch: true, - // }, + const [activeTabIndex, setActiveTabIndex] = useState(0); - { - title: , - dataIndex: 'code', - hideInSearch: true, - }, - - { - title: , - dataIndex: 'position', - hideInSearch: true, - }, + const [ghost, setGhost] = useState(false); - { - title: , - dataIndex: 'param', - hideInSearch: true, - }, - { - title: , - dataIndex: 'spec', - hideInSearch: true, - }, + const handleDetailModal = () => { + if (detailModalOpen) { + setDetailModalOpen(false); + setCurrentRow({}); + } else { + setDetailModalOpen(true); - { - title: , - dataIndex: 'categoryFkId', - hideInSearch: false, - render: (text, record) => { - if (category_fk_id_column_open) { - return ( - { - handle_category_fk_id(record.categoryFkId); - }} - > - {record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined} - - ); - } else { - return ( - { - handle_category_fk_id(record.categoryFkId); - }} - > - {record.categoryFkId} - - ); - } - }, - renderFormItem: () => { - return ( - // value 和 onchange 会通过 form 自动注入。 - { - const resp = await postDeviceCategoryGetDeviceCategoryFkSelect({ - keyword: keyWord?.keyWords || '', - }); - return resp.data.list.map((v: any) => { - return { - label: v.name, - value: v.id, - }; - }); - }} - /> - ); - }, - }, + } + }; - { - title: , - dataIndex: 'groupFkId', - hideInSearch: false, - render: (text, record) => { - if (group_fk_id_column_open) { - return ( - { - handle_group_fk_id(record.groupFkId); - }} - > - {record?.groupFkId ? groupFkIdMap[record.groupFkId] : undefined} - - ); - } else { - return ( - { - handle_group_fk_id(record.groupFkId); + 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.groupFkId} - - ); - } - }, - renderFormItem: () => { - return ( - // value 和 onchange 会通过 form 自动注入。 - { - const resp = await postDeviceGroupGetDeviceGroupFkSelect({ - keyword: keyWord?.keyWords || '', - }); - return resp.data.list.map((v: any) => { - return { - label: v.name, - value: v.id, - }; - }); - }} - /> - ); - }, - }, - - { - 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', - }, - - { - title: , - dataIndex: 'option', - valueType: 'option', - fixed: 'right', - render: (_, record) => [ - { - setUpdateModalOpen(true); - setCurrentRow(record); - }} - > - - - ), - }, - { - key: 'destroy', - renderDom: ( - { - handleDestroy(record).then(() => {}); - }} - > - ), - }, - { - key: 'video', - renderDom: ( - - ), - }, - ]} - >, - ], + // doToDetail(record); + // setShowDetail(true); + }} + > + + + ), + }, + ]} + > +
+ {' '} + + ), + }; }, - ]; + ); return ( - - - - ), - } as ProCardTypeProps - } - leftDom={ - hasInit && ( - { - setSelectNodes(selectKeys); - actionRef.current?.reload(); - }} - checkStrictly={false} - /> - ) - } - rightDom={ - - headerTitle={intl.formatMessage({ - id: 'pages.searchTable.title', - defaultMessage: '$$$', - })} - loading={{ - tip: intl.formatMessage({ - id: 'common.video_opening', - defaultMessage: '$$$', - }), - spinning: videoOpening, - }} - options={{ fullScreen: true, setting: true, density: true, reload: true }} - actionRef={actionRef} - rowKey="key" - scroll={{ x: 2000, y: proTableCommonOptions.commscrollY }} - search={{ - labelWidth: proTableCommonOptions.searchLabelWidth, - }} - onDataSourceChange={(data) => { - let CategoryFkIdIds: any = data.map((v) => { - return v.categoryFkId; - }); - setCategoryFkIdIds(CategoryFkIdIds); - - let GroupFkIdIds: any = data.map((v) => { - return v.groupFkId; - }); - setGroupFkIdIds(GroupFkIdIds); - }} - pagination={{ - ...proTablePaginationOptions, - pageSize: currentPageSize, - onChange: (page, pageSize) => setCurrentPageSize(pageSize), - }} - columnsState={{ - persistenceKey: 'device_list', - persistenceType: 'localStorage', - }} - tableAlertOptionRender={() => { - return ( - <> - {selectedRowsState?.length > 0 && ( - { - // TODO 需联调批量删除接口 - deleteDeviceDeleteDeviceByIds({ - ids: selectedRowsState.map((v: API.Device) => { - return v.id as number; - }), - }).then(() => { - actionRef.current?.reloadAndRest?.(); - }); - }} - /> - )} - - ); - }} - toolBarRender={() => [ - +
+ {Object.keys(tabOptions).map((item, index) => { + // eslint-disable-next-line react/jsx-key + return ( + - - - - - , - ]} - request={async (params = {}, sort) => { - const { current, ...rest } = params; - const reqParams: any = { - page: current, - desc: false, - orderKey: '', - ...rest, - }; - if (selectNodes.length) { - reqParams.groupFkId = selectNodes[0]; - } - 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 postDeviceGetDeviceList({ ...reqParams }); - return { - data: resp.data.list.map((v: API.Device) => { - return { ...v, key: v.id }; - }), - success: resp.success, - total: resp.data.total, - current: resp.data.page, - pageSize: resp.data.pageSize, - }; - }} - columns={columns} - rowSelection={{ - onChange: (_, selectedRows) => { - setSelectedRows(selectedRows); - }, - }} - /> - } - > - - - - - - - + {Object.keys(deviceStatusEnums).includes(item) + ? deviceStatusEnums[item].miniName + : ''} + 状态（{tabOptions[item]}） + + ); + })} +
+ + 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, + }, + }} + headerTitle="" + // toolBarRender={(action, rows) => { + // console.log(action, rows, 'toolBarRender'); + // // TODO 需要对接接口 + // const isProcess: boolean = false; + // return isProcess ? ( + // + // ) : ( + // + // ); + // }} + dataSource={data} + /> + + + + + + ); }; -export default DeviceList; +export default DeviceStatus;