diff --git a/config/routes.ts b/config/routes.ts index 2f4c003..6a15dfe 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -45,7 +45,6 @@ export default [ ], }, - { path: '/system', @@ -99,133 +98,151 @@ export default [ { name: 'device', path: '/device', - routes: [{ - 'name': 'device-list', - 'path': '/device/device-list', - 'component': 'Device/DeviceList', - 'access': 'canReadMenu' - }, { - 'name': 'device-category-list', - 'path': '/device/device-category-list', - 'component': 'Device/DeviceCategoryList', - 'access': 'canReadMenu' - }, { - 'name': 'device-group-list', - 'path': '/device/device-group-list', - 'component': 'Device/DeviceGroupList', - 'access': 'canReadMenu' - }, { - 'name': 'device-relation-list', - 'path': '/device/device-relation-list', - 'component': 'Device/DeviceRelationList', - 'access': 'canReadMenu' - }], - + routes: [ + { + name: 'device-list', + path: '/device/device-list', + component: 'Device/DeviceList', + access: 'canReadMenu', + }, + { + name: 'device-category-list', + path: '/device/device-category-list', + component: 'Device/DeviceCategoryList', + access: 'canReadMenu', + }, + { + name: 'device-group-list', + path: '/device/device-group-list', + component: 'Device/DeviceGroupList', + access: 'canReadMenu', + }, + { + name: 'device-relation-list', + path: '/device/device-relation-list', + component: 'Device/DeviceRelationList', + access: 'canReadMenu', + }, + ], }, { name: 'DCSDevice', path: '/DCSDevice', - routes: [{ - 'name': 'DCSDevice-device-group-list', - 'path': '/DCSDevice/device-group-list', - 'component': 'DCSDevice/DeviceGroupList', - 'access': 'canReadMenu' - },{ - 'name': 'DCSDevice-device-category-list', - 'path': '/DCSDevice/device-category-list', - 'component': 'DCSDevice/DeviceCategoryList', - 'access': 'canReadMenu' - },{ - 'name': 'DCSDevice-device-list', - 'path': '/DCSDevice/device-list', - 'component': 'DCSDevice/DeviceList', - 'access': 'canReadMenu' - }, { - 'name': 'DCSDevice-device-status', - 'path': '/DCSDevice/device-status', - 'component': 'DCSDevice/DeviceStatus', - 'access': 'canReadMenu' - }], - + routes: [ + { + name: 'DCSDevice-device-group-list', + path: '/DCSDevice/device-group-list', + component: 'DCSDevice/DeviceGroupList', + access: 'canReadMenu', + }, + { + name: 'DCSDevice-device-category-list', + path: '/DCSDevice/device-category-list', + component: 'DCSDevice/DeviceCategoryList', + access: 'canReadMenu', + }, + { + name: 'DCSDevice-device-list', + path: '/DCSDevice/device-list', + component: 'DCSDevice/DeviceList', + access: 'canReadMenu', + }, + { + name: 'DCSDevice-device-status', + path: '/DCSDevice/device-status', + component: 'DCSDevice/DeviceStatus', + access: 'canReadMenu', + }, + ], }, { name: 'resource', path: '/resource', - routes: [{ - 'name': 'algorithm-model-list', + routes: [ + { + name: 'algorithm-model-list', - 'path': '/resource/algorithm-model-list', - 'component': 'Resource/AlgorithmModelList', - 'access': 'canReadMenu', - }, { - 'name': 'algorithm-model-detail', - 'path': '/resource/algorithm-model-detail/:id', - 'component': 'Resource/AlgorithmModelList/detail', - 'access': 'canReadMenu', - "isHideTab": true, - }, { - 'name': 'business-image-list', + path: '/resource/algorithm-model-list', + component: 'Resource/AlgorithmModelList', + access: 'canReadMenu', + }, + { + name: 'algorithm-model-detail', + path: '/resource/algorithm-model-detail/:id', + component: 'Resource/AlgorithmModelList/detail', + access: 'canReadMenu', + isHideTab: true, + }, + { + name: 'business-image-list', - 'path': '/resource/business-image-list', - 'component': 'Resource/BusinessImageList', - 'access': 'canReadMenu' - }, { - 'name': 'model-category-list', + path: '/resource/business-image-list', + component: 'Resource/BusinessImageList', + access: 'canReadMenu', + }, + { + name: 'model-category-list', - 'path': '/resource/model-category-list', - 'component': 'Resource/ModelCategoryList', - 'access': 'canReadMenu' - }, { - 'name': 'model-image-list', - 'path': '/resource/model-image-list', - 'component': 'Resource/ModelImageList', - 'access': 'canReadMenu' - }, { - 'name': 'model-version-list', - 'path': '/resource/model-version-list', - 'component': 'Resource/ModelVersionList', - 'access': 'canReadMenu' - },{ - 'name': 'resource-device-status', // 2 - 'path': '/resource/resource-device-status', - 'component': 'Resource/ResourceDeviceStatus', - 'access': 'canReadMenu' - }] + path: '/resource/model-category-list', + component: 'Resource/ModelCategoryList', + access: 'canReadMenu', + }, + { + name: 'model-image-list', + path: '/resource/model-image-list', + component: 'Resource/ModelImageList', + access: 'canReadMenu', + }, + { + name: 'model-version-list', + path: '/resource/model-version-list', + component: 'Resource/ModelVersionList', + access: 'canReadMenu', + }, + { + name: 'resource-device-status', + path: '/resource/resource-device-status', + component: 'Resource/ResourceDeviceStatus', + access: 'canReadMenu', + }, + ], }, { name: 'analysis', path: '/analysis', routes: [ { - 'name': 'action-detection-list', - 'path': '/analysis/action-detection-list', - 'component': 'Analysis/ActionDetectionList', - 'access': 'canReadMenu' - } - ] - + name: 'action-detection-list', + path: '/analysis/action-detection-list', + component: 'Analysis/ActionDetectionList', + access: 'canReadMenu', + }, + ], }, { name: 'project', path: '/project', - routes: [{ - 'name': 'project-list', + routes: [ + { + name: 'project-list', - 'path': '/project/project-list', - 'component': 'Project/ProjectList', - 'access': 'canReadMenu' - }] + path: '/project/project-list', + component: 'Project/ProjectList', + access: 'canReadMenu', + }, + ], }, { name: 'Contact', path: '/Contact', - routes: [{ - 'name': 'Contact-contact-list', - 'path': '/Contact/contact-list', - 'component': 'Contact/ContactList', - 'access': 'canReadMenu' - }], - + routes: [ + { + name: 'Contact-contact-list', + path: '/Contact/contact-list', + component: 'Contact/ContactList', + access: 'canReadMenu', + }, + ], }, { name: 'task', @@ -249,7 +266,20 @@ export default [ { name: 'alarm', path: '/alarm', - component: 'Hidden', + routes: [ + { + name: 'alarm-list', + path: '/alarm/alarm-list', + component: 'Alarm/AlarmList', + access: 'canReadMenu', + }, + { + name: 'alarm-setting', + path: '/alarm/alarm-setting', + component: 'Alarm/AlarmSetting', + access: 'canReadMenu', + }, + ], }, { name: 'logging', @@ -267,11 +297,13 @@ export default [ { name: 'fabricView', path: '/fabricView', - routes: [{ - 'name': 'fabricView-room', - 'path': '/fabricView/room', - 'component': 'FabricView/Room', - 'access': 'canReadMenu' - }] + routes: [ + { + name: 'fabricView-room', + path: '/fabricView/room', + component: 'FabricView/Room', + access: 'canReadMenu', + }, + ], }, ]; diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 558f199..ebe45fb 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -2,12 +2,13 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-11-01 13:56:33 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-12-08 16:03:40 + * @LastEditTime: 2023-12-18 16:38:59 * @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 contactZh from '@/locales/zh-CN/contact'; import * as DCSDevice from '@/locales/zh-CN/DCSDevice'; +import * as alarmLangs from '@/locales/zh-CN/alarm'; import * as analysisZh from '@/locales/zh-CN/analysis'; import * as deviceZh from '@/locales/zh-CN/device'; import * as errorTypesZh from '@/locales/zh-CN/errorTypes'; @@ -67,4 +68,5 @@ export default { ...Object.assign({}, ...Object.values(projectZh)), ...Object.assign({}, ...Object.values(DCSDevice)), ...Object.assign({}, ...Object.values(contactZh)), + ...Object.assign({}, ...Object.values(alarmLangs)), }; diff --git a/src/locales/zh-CN/alarm.ts b/src/locales/zh-CN/alarm.ts new file mode 100644 index 0000000..c604e0f --- /dev/null +++ b/src/locales/zh-CN/alarm.ts @@ -0,0 +1,29 @@ +/* + * @Author: zhoux zhouxia@supervision.ltd + * @Date: 2023-12-18 16:36:36 + * @LastEditors: zhoux zhouxia@supervision.ltd + * @LastEditTime: 2023-12-18 17:46:05 + * @FilePath: \general-ai-platform-web\src\locales\zh-CN\alarm.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ + +// 设备列表 +export const alarm_list: { [key: string]: string } = { + 'alarm.list.table.list.id': 'ID', +} + +// 设备状态 +export const alarm_setting: { [key: string]: string } = { + 'alarm.setting.table.list.name': '告警名称', + 'alarm.setting.table.list.code': '告警代码', + 'alarm.setting.table.list.category': '告警分类', + 'alarm.setting.table.list.level': '告警级别', + 'alarm.setting.table.list.createTime': '创建时间', + 'alarm.setting.table.list.remark': '备注', + 'alarm.setting.table.list.setting': '告警等级设置', + 'alarm.setting.table.list.add': '新建告警项', + 'alarm.setting.table.model.title': '告警等级', + 'alarm.setting.table.list.update': '编辑告警项', + 'alarm.setting.table.rule.required.code': '类别代码为必填项', + +} \ No newline at end of file diff --git a/src/pages/Alarm/AlarmList/components/ColumnDrawer.tsx b/src/pages/Alarm/AlarmList/components/ColumnDrawer.tsx new file mode 100644 index 0000000..208d446 --- /dev/null +++ b/src/pages/Alarm/AlarmList/components/ColumnDrawer.tsx @@ -0,0 +1,41 @@ +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.DeviceCategory | 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/Alarm/AlarmList/components/Columns.tsx b/src/pages/Alarm/AlarmList/components/Columns.tsx new file mode 100644 index 0000000..90f714b --- /dev/null +++ b/src/pages/Alarm/AlarmList/components/Columns.tsx @@ -0,0 +1,32 @@ +import { FormattedMessage} from '@umijs/max'; +export const DeviceCategoryColumns = [{ + title: (), + dataIndex: "id", + },{ + title: (), + dataIndex: "name", + },{ + title: (), + dataIndex: "code", + },{ + title: (), + dataIndex: "remark", + },{ + title: (), + dataIndex: "create_time", + },{ + title: (), + dataIndex: "update_time", + },] diff --git a/src/pages/Alarm/AlarmList/components/CreateForm.tsx b/src/pages/Alarm/AlarmList/components/CreateForm.tsx new file mode 100644 index 0000000..137116e --- /dev/null +++ b/src/pages/Alarm/AlarmList/components/CreateForm.tsx @@ -0,0 +1,143 @@ +import { postDeviceCategoryCreateDeviceCategory } from '@/services/device/DeviceCategory'; +import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components'; +import { FormattedMessage, useIntl } from '@umijs/max'; +import { Form, Switch, message } from 'antd'; +import React, { useState } from 'react'; +import { + proFormSmallItemStyleProps, + proFormSmallModelWidth, +} 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={proFormSmallModelWidth} + title={intl.formatMessage({ + id: 'DCSDeviceList.device_category.table.list.add', + defaultMessage: '$$$', + })} + open={props.createModalOpen} + form={form} + autoFocusFirstInput + modalProps={{ + destroyOnClose: true, + onCancel: () => props.handleModal(), + }} + submitTimeout={2000} + onFinish={async (values) => { + postDeviceCategoryCreateDeviceCategory(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: 'DCSDeviceList.device_category.table.list.name', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'DCSDeviceList.device_category.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: 'DCSDeviceList.device_category.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + /> + + + ); +}; +export default CreateForm; diff --git a/src/pages/Alarm/AlarmList/components/UpdateForm.tsx b/src/pages/Alarm/AlarmList/components/UpdateForm.tsx new file mode 100644 index 0000000..64ea0c0 --- /dev/null +++ b/src/pages/Alarm/AlarmList/components/UpdateForm.tsx @@ -0,0 +1,187 @@ +/* + * @Author: zhoux zhouxia@supervision.ltd + * @Date: 2023-11-01 13:56:33 + * @LastEditors: zhoux zhouxia@supervision.ltd + * @LastEditTime: 2023-11-17 10:12:53 + * @FilePath: \general-ai-platform-web\src\pages\Device\DeviceCategoryList\components\UpdateForm.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ +import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory'; +import { ModalForm, ProForm, ProFormDateTimePicker, ProFormText } from '@ant-design/pro-components'; +import { FormattedMessage, useIntl } from '@umijs/max'; +import { Form, message } from 'antd'; +import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm'; +import React from 'react'; +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: 'DCSDeviceList.device_category.table.list.update', + defaultMessage: '$$$', + })} + open={props.updateModalOpen} + form={form} + autoFocusFirstInput + modalProps={{ + destroyOnClose: true, + onCancel: () => props.handleModal(), + }} + submitTimeout={2000} + onFinish={async (values) => { + putDeviceCategoryUpdateDeviceCategory(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: 'DCSDeviceList.device_category.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: 'DCSDeviceList.device_category.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: 'DCSDeviceList.device_category.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + initialValue={props.values.remark} + disabled={false} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'DCSDeviceList.device_category.table.list.createTime', + defaultMessage: '$$$', + })}`} + required={false} + initialValue={props.values.createTime} + disabled={true} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'DCSDeviceList.device_category.table.list.updateTime', + defaultMessage: '$$$', + })}`} + required={false} + initialValue={props.values.updateTime} + disabled={true} + /> + + + ); +}; +export default UpdateForm; diff --git a/src/pages/Alarm/AlarmList/index.tsx b/src/pages/Alarm/AlarmList/index.tsx new file mode 100644 index 0000000..ef5fa17 --- /dev/null +++ b/src/pages/Alarm/AlarmList/index.tsx @@ -0,0 +1,291 @@ +import IsBatchDelete from '@/components/BatchOperation/isBatchDelete'; +import TableActionCard from '@/components/TableActionCard'; +import IsDelete from '@/components/TableActionCard/isDelete'; +import { + deleteDeviceCategoryDeleteDeviceCategory, + deleteDeviceCategoryDeleteDeviceCategoryByIds, + postDeviceCategoryGetDeviceCategoryList, +} from '@/services/device/DeviceCategory'; +import { PlusOutlined } from '@ant-design/icons'; +import type { ActionType, ProColumns } from '@ant-design/pro-components'; +import { PageContainer, ProTable } from '@ant-design/pro-components'; +import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max'; +import { Button, message } from 'antd'; +import React, { 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'; +const DeviceCategoryList: React.FC = () => { + /** + * @en-US Pop-up window of new window + * @zh-CN 新建窗口的弹窗 + * */ + 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 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.DeviceCategory) => { + deleteDeviceCategoryDeleteDeviceCategory({ 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: 'id', + // sorter: true, + // render: (dom, entity) => { + // return ( + // { + // setCurrentRow(entity); + // setShowDetail(true); + // }} + // > + // {dom} + // + // ); + // }, + // }, + + { + title: , + dataIndex: 'name', + hideInSearch: false, + }, + + { + title: , + dataIndex: 'code', + hideInSearch: true, + }, + + { + 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(() => {}); + }} + > + ), + }, + ]} + >, + ], + }, + ]; + return ( + + + headerTitle={intl.formatMessage({ + id: 'pages.searchTable.title', + defaultMessage: '$$$', + })} + options={{ fullScreen: true, setting: true, density: true, reload: true }} + actionRef={actionRef} + rowKey="key" + search={{ + labelWidth: proTableCommonOptions.searchLabelWidth, + }} + onDataSourceChange={(data) => {}} + pagination={{ + ...proTablePaginationOptions, + pageSize: currentPageSize, + onChange: (page, pageSize) => setCurrentPageSize(pageSize), + }} + columnsState={{ + persistenceKey: 'device_category_list', + persistenceType: 'localStorage', + }} + tableAlertOptionRender={() => { + return ( + <> + {selectedRowsState?.length > 0 && ( + { + // TODO 需要；联调删除接口 + deleteDeviceCategoryDeleteDeviceCategoryByIds({ + ids: selectedRowsState.map((v: API.DeviceCategory) => { + return v.id as number; + }), + }).then(() => { + actionRef.current?.reloadAndRest?.(); + }); + }} + /> + )} + + ); + }} + toolBarRender={() => [ + + + , + ]} + 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 postDeviceCategoryGetDeviceCategoryList({ ...reqParams }); + return { + data: resp.data.list.map((v: API.DeviceCategory) => { + 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); + }, + }} + /> + + + + + + + ); +}; + +export default DeviceCategoryList; diff --git a/src/pages/Alarm/AlarmSetting/components/ColumnDrawer.tsx b/src/pages/Alarm/AlarmSetting/components/ColumnDrawer.tsx new file mode 100644 index 0000000..208d446 --- /dev/null +++ b/src/pages/Alarm/AlarmSetting/components/ColumnDrawer.tsx @@ -0,0 +1,41 @@ +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.DeviceCategory | 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/Alarm/AlarmSetting/components/Columns.tsx b/src/pages/Alarm/AlarmSetting/components/Columns.tsx new file mode 100644 index 0000000..90f714b --- /dev/null +++ b/src/pages/Alarm/AlarmSetting/components/Columns.tsx @@ -0,0 +1,32 @@ +import { FormattedMessage} from '@umijs/max'; +export const DeviceCategoryColumns = [{ + title: (), + dataIndex: "id", + },{ + title: (), + dataIndex: "name", + },{ + title: (), + dataIndex: "code", + },{ + title: (), + dataIndex: "remark", + },{ + title: (), + dataIndex: "create_time", + },{ + title: (), + dataIndex: "update_time", + },] diff --git a/src/pages/Alarm/AlarmSetting/components/CreateForm.tsx b/src/pages/Alarm/AlarmSetting/components/CreateForm.tsx new file mode 100644 index 0000000..c04ccd6 --- /dev/null +++ b/src/pages/Alarm/AlarmSetting/components/CreateForm.tsx @@ -0,0 +1,159 @@ +import { postDeviceCategoryCreateDeviceCategory } from '@/services/device/DeviceCategory'; +import { ModalForm, ProForm, ProFormSelect, ProFormText } from '@ant-design/pro-components'; +import { FormattedMessage, useIntl } from '@umijs/max'; +import { Form, message } from 'antd'; +import React, { useState } from 'react'; +import { + proFormSmallItemStyleProps, + proFormSmallModelWidth, +} from '../../../../../config/defaultForm'; +import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup'; +// TODO 需要根据接口替换API.DeviceCategory +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={proFormSmallModelWidth} + title={intl.formatMessage({ + id: 'alarm.setting.table.list.add', + defaultMessage: '$$$', + })} + open={props.createModalOpen} + form={form} + autoFocusFirstInput + modalProps={{ + destroyOnClose: true, + onCancel: () => props.handleModal(), + }} + submitTimeout={2000} + onFinish={async (values) => { + postDeviceCategoryCreateDeviceCategory(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: 'alarm.setting.table.list.name', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'alarm.setting.table.list.code', + defaultMessage: '$$$', + })}`} + required={!isAuto} + initialValue="" + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + // addonAfter={ + // } + // unCheckedChildren={} + // onChange={setIsAuto} + // /> + // } + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_select', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'alarm.setting.table.list.level', + defaultMessage: '$$$', + })}`} + required={false} + debounceTime={1000} + request={async (keyWord) => { + // TODO 此处需要使用告警级别接口联调 + const resp = await postDeviceGroupGetDeviceGroupFkSelect({}); + 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: 'alarm.setting.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + /> + + + ); +}; +export default CreateForm; diff --git a/src/pages/Alarm/AlarmSetting/components/UpdateForm.tsx b/src/pages/Alarm/AlarmSetting/components/UpdateForm.tsx new file mode 100644 index 0000000..a275039 --- /dev/null +++ b/src/pages/Alarm/AlarmSetting/components/UpdateForm.tsx @@ -0,0 +1,170 @@ +/* + * @Author: zhoux zhouxia@supervision.ltd + * @Date: 2023-11-01 13:56:33 + * @LastEditors: zhoux zhouxia@supervision.ltd + * @LastEditTime: 2023-12-18 17:47:49 + * @FilePath: \general-ai-platform-web\src\pages\Device\DeviceCategoryList\components\UpdateForm.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ +import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory'; +import { + ModalForm, + ProForm, + ProFormDateTimePicker, + ProFormSelect, + ProFormText, +} from '@ant-design/pro-components'; +import { FormattedMessage, useIntl } from '@umijs/max'; +import { Form, message } from 'antd'; +import React from 'react'; +import { + proFormSmallItemStyleProps, + proFormSmallModelWidth, +} from '../../../../../config/defaultForm'; +import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup'; +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={proFormSmallModelWidth} + title={intl.formatMessage({ + id: 'alarm.setting.table.list.update', + defaultMessage: '$$$', + })} + open={props.updateModalOpen} + form={form} + autoFocusFirstInput + modalProps={{ + destroyOnClose: true, + onCancel: () => props.handleModal(), + }} + submitTimeout={2000} + onFinish={async (values) => { + putDeviceCategoryUpdateDeviceCategory(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: 'alarm.setting.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: 'alarm.setting.table.list.code', + defaultMessage: '$$$', + })}`} + required={true} + initialValue={props.values.code} + disabled={false} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_select', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'alarm.setting.table.list.level', + defaultMessage: '$$$', + })}`} + required={false} + initialValue={props.values.level} + debounceTime={1000} + request={async (keyWord) => { + // TODO 此处需要使用告警级别接口联调 + const resp = await postDeviceGroupGetDeviceGroupFkSelect({}); + 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: 'alarm.setting.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + initialValue={props.values.remark} + disabled={false} + /> + + + + ); +}; +export default UpdateForm; diff --git a/src/pages/Alarm/AlarmSetting/index.tsx b/src/pages/Alarm/AlarmSetting/index.tsx new file mode 100644 index 0000000..3553a3a --- /dev/null +++ b/src/pages/Alarm/AlarmSetting/index.tsx @@ -0,0 +1,284 @@ +import IsBatchDelete from '@/components/BatchOperation/isBatchDelete'; +import TableActionCard from '@/components/TableActionCard'; +import IsDelete from '@/components/TableActionCard/isDelete'; +import { + deleteDeviceCategoryDeleteDeviceCategory, + deleteDeviceCategoryDeleteDeviceCategoryByIds, + postDeviceCategoryGetDeviceCategoryList, +} from '@/services/device/DeviceCategory'; +import { PlusOutlined, SettingOutlined } from '@ant-design/icons'; +import type { ActionType, ProColumns } from '@ant-design/pro-components'; +import { PageContainer, ProTable } from '@ant-design/pro-components'; +import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max'; +import { Button, message } from 'antd'; +import React, { 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'; +const DeviceCategoryList: React.FC = () => { + /** + * @en-US Pop-up window of new window + * @zh-CN 新建窗口的弹窗 + * */ + 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([]); + + + /** + // TODO + 1. 告警级别设置 + 2. 告警列表-告警级别渲染 + 3. 项目部署-告警模块 + */ + + 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.DeviceCategory) => { + deleteDeviceCategoryDeleteDeviceCategory({ 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', + hideInSearch: false, + }, + + { + title: , + dataIndex: 'code', + hideInSearch: true, + }, + { + title: ( + + ), + dataIndex: 'category', + hideInSearch: true, + }, + { + title: ( + + ), + dataIndex: 'level', + hideInSearch: true, + }, + { + title: ( + + ), + dataIndex: 'createTime', + 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(() => {}); + }} + > + ), + }, + ]} + >, + ], + }, + ]; + return ( + + + headerTitle={intl.formatMessage({ + id: 'pages.searchTable.title', + defaultMessage: '$$$', + })} + options={{ fullScreen: true, setting: true, density: true, reload: true }} + actionRef={actionRef} + rowKey="key" + search={{ + labelWidth: proTableCommonOptions.searchLabelWidth, + }} + onDataSourceChange={() => {}} + pagination={{ + ...proTablePaginationOptions, + pageSize: currentPageSize, + onChange: (page, pageSize) => setCurrentPageSize(pageSize), + }} + columnsState={{ + persistenceKey: 'device_category_list', + persistenceType: 'localStorage', + }} + tableAlertOptionRender={() => { + return ( + <> + {selectedRowsState?.length > 0 && ( + { + // TODO 需要；联调删除接口 + deleteDeviceCategoryDeleteDeviceCategoryByIds({ + ids: selectedRowsState.map((v: API.DeviceCategory) => { + return v.id as number; + }), + }).then(() => { + actionRef.current?.reloadAndRest?.(); + }); + }} + /> + )} + + ); + }} + toolBarRender={() => [ + + + + , + ]} + 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 postDeviceCategoryGetDeviceCategoryList({ ...reqParams }); + return { + data: resp.data.list.map((v: API.DeviceCategory) => { + 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); + }, + }} + /> + + + + + + + ); +}; + +export default DeviceCategoryList; diff --git a/tsconfig.json b/tsconfig.json index 9c05082..a9ad888 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,7 +18,9 @@ "paths": { "@/*": ["./src/*"], "@@/*": ["./src/.umi/*"], - "@@test/*": ["./src/.umi-test/*"] + "@@test/*": ["./src/.umi-test/*"], + "@umijs/max": ["./src/.umijs/max"], + } }, "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx"]