feat: 前端页面开发
JINGYJ
2 years ago
parent
00d943021b
commit
310471c1bb
@ -0,0 +1,130 @@
|
|||||||
|
import { Request, Response } from 'express';
|
||||||
|
|
||||||
|
const getMenus = (req: Request, res: Response) => {
|
||||||
|
const result = {
|
||||||
|
code: 0,
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
"path": "/welcome",
|
||||||
|
"key": "",
|
||||||
|
"name": "welcome",
|
||||||
|
"icon": "HomeOutlined",
|
||||||
|
"access": "",
|
||||||
|
"component": "Welcome",
|
||||||
|
"title": "首页",
|
||||||
|
"routes": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/device",
|
||||||
|
"key": "",
|
||||||
|
"name": "device",
|
||||||
|
"icon": "DesktopOutlined",
|
||||||
|
"access": "",
|
||||||
|
"component": "",
|
||||||
|
"title": "设备管理",
|
||||||
|
"routes": [
|
||||||
|
{
|
||||||
|
"path": "/device/device-list",
|
||||||
|
"key": "12",
|
||||||
|
"name": "device-list",
|
||||||
|
"icon": "",
|
||||||
|
"access": "",
|
||||||
|
"component": "Device/DeviceList",
|
||||||
|
"title": "设备列表",
|
||||||
|
"routes": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/device/device-category-list",
|
||||||
|
"key": "13",
|
||||||
|
"name": "device-category-list",
|
||||||
|
"icon": "",
|
||||||
|
"access": "",
|
||||||
|
"component": "Device/DeviceCategoryList",
|
||||||
|
"title": "设备类别",
|
||||||
|
"routes": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/device/device-group-list",
|
||||||
|
"key": "14",
|
||||||
|
"name": "device-group-list",
|
||||||
|
"icon": "",
|
||||||
|
"access": "",
|
||||||
|
"component": "Device/DeviceGroupList",
|
||||||
|
"title": "设备组",
|
||||||
|
"routes": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/alarm",
|
||||||
|
"key": "",
|
||||||
|
"name": "alarm",
|
||||||
|
"icon": "WarningOutlined",
|
||||||
|
"access": "",
|
||||||
|
"component": "",
|
||||||
|
"title": "告警管理",
|
||||||
|
"routes": [
|
||||||
|
{
|
||||||
|
"path": "/alarm/alarm-list",
|
||||||
|
"key": "50",
|
||||||
|
"name": "alarm-list",
|
||||||
|
"icon": "",
|
||||||
|
"access": "",
|
||||||
|
"component": "Alarm/AlarmList",
|
||||||
|
"title": "告警列表",
|
||||||
|
"routes": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/alarm/alarm-setting",
|
||||||
|
"key": "51",
|
||||||
|
"name": "alarm-setting",
|
||||||
|
"icon": "",
|
||||||
|
"access": "",
|
||||||
|
"component": "Alarm/AlarmSetting",
|
||||||
|
"title": "告警设置",
|
||||||
|
"routes": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/alarm/alarm-ways",
|
||||||
|
"key": "55",
|
||||||
|
"name": "alarm-ways",
|
||||||
|
"icon": "",
|
||||||
|
"access": "",
|
||||||
|
"component": "Alarm/AlarmWays",
|
||||||
|
"title": "告警方式",
|
||||||
|
"routes": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "alarm_rules",
|
||||||
|
"key": "",
|
||||||
|
"name": "alarm_rules",
|
||||||
|
"icon": "OrderedListOutlined",
|
||||||
|
"access": "",
|
||||||
|
"component": "Hidden",
|
||||||
|
"title": "告警规则",
|
||||||
|
"routes": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "interfaceManage",
|
||||||
|
"key": "",
|
||||||
|
"name": "interfaceManage",
|
||||||
|
"icon": "BranchesOutlined",
|
||||||
|
"access": "",
|
||||||
|
"component": "Hidden",
|
||||||
|
"title": "接口管理",
|
||||||
|
"routes": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
msg: "获取成功"
|
||||||
|
}
|
||||||
|
return res.json(result);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
'POST /api/mock/getMenus': getMenus,
|
||||||
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
:global {
|
||||||
|
.ant-form-item-control-input-content {
|
||||||
|
.ant-space-gap-col-small {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,233 @@
|
|||||||
|
import AlarmLevelBox from '@/components/DictionaryBox/alarmLevel';
|
||||||
|
import TableActionCard from '@/components/TableActionCard';
|
||||||
|
import IsDelete from '@/components/TableActionCard/isDelete';
|
||||||
|
import { alarmLevelStatusEnum } from '@/enums/status';
|
||||||
|
import {
|
||||||
|
deleteDeviceCategoryDeleteDeviceCategory,
|
||||||
|
postDeviceCategoryGetDeviceCategoryList,
|
||||||
|
} from '@/services/device/DeviceCategory';
|
||||||
|
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||||
|
import { PageContainer, ProTable } from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import { Button, Space, Tag, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { proTablePaginationOptions } from '../../../../config/defaultTable';
|
||||||
|
import { proIconForTableActionStyle } from '../../../../config/defaultIcon';
|
||||||
|
import { EditOutlined } from '@ant-design/icons';
|
||||||
|
import UpdateForm from './components/UpdateForm';
|
||||||
|
const AlarmRulesList: React.FC = () => {
|
||||||
|
/**
|
||||||
|
* @en-US International configuration
|
||||||
|
* @zh-CN 国际化配置
|
||||||
|
* */
|
||||||
|
const intl = useIntl();
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
// 动态设置每页数量
|
||||||
|
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
||||||
|
|
||||||
|
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 [currentRow, setCurrentRow] = useState<API.DeviceCategory>();
|
||||||
|
// 编辑弹框
|
||||||
|
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const handleUpdateModal = () => {
|
||||||
|
if (updateModalOpen) {
|
||||||
|
setUpdateModalOpen(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setUpdateModalOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAlarmRulesList = async () => {
|
||||||
|
return {
|
||||||
|
code: 0,
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"createTime": "2023-10-17T02:35:41.14308Z",
|
||||||
|
"updateTime": "2023-10-17T02:35:41.14308Z",
|
||||||
|
"name": "单人徘徊告警",
|
||||||
|
"status": "已启用",
|
||||||
|
"isEnabled": true,
|
||||||
|
"remark": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"createTime": "2023-10-17T02:40:28.292883Z",
|
||||||
|
"updateTime": "2023-10-26T03:02:51.356036Z",
|
||||||
|
"name": "多人聚集告警",
|
||||||
|
"status": "未启用",
|
||||||
|
"isEnabled": false,
|
||||||
|
"remark": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"createTime": "2023-12-12T02:54:52.204957Z",
|
||||||
|
"updateTime": "2023-12-12T02:54:52.204957Z",
|
||||||
|
"name": "敏感时间段告警",
|
||||||
|
"status": "未启用",
|
||||||
|
"isEnabled": false,
|
||||||
|
"remark": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"total": 3,
|
||||||
|
"page": 1,
|
||||||
|
"pageSize": 10
|
||||||
|
},
|
||||||
|
msg: "获取成功"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns: ProColumns<API.DeviceCategory>[] = [
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="alarm_rules.page.name" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'name',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="alarm_rules.page.id" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'id',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="alarm_rules.page.status" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'status',
|
||||||
|
hideInSearch: true,
|
||||||
|
render: (dom) => {
|
||||||
|
return (
|
||||||
|
<Tag bordered={false} color={dom === '已启用'? "success": ""} style={{
|
||||||
|
color: dom === '已启用'? '#52C41A': "#999"
|
||||||
|
}}>
|
||||||
|
{dom}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="alarm_rules.page.updateTime" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'updateTime',
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
fixed: 'right',
|
||||||
|
render: (_, record) => [
|
||||||
|
<TableActionCard
|
||||||
|
key="TableActionCardRef"
|
||||||
|
renderActions={[
|
||||||
|
{
|
||||||
|
key: 'update',
|
||||||
|
renderDom: (
|
||||||
|
<Button
|
||||||
|
key="update"
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
style={{
|
||||||
|
color:"#081FA8",
|
||||||
|
|
||||||
|
}}
|
||||||
|
icon={<EditOutlined style={{
|
||||||
|
marginRight: 3
|
||||||
|
}} />}
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateModalOpen(true);
|
||||||
|
setCurrentRow(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormattedMessage id="common.edit" defaultMessage="Update" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'destroy',
|
||||||
|
renderDom: (
|
||||||
|
<IsDelete
|
||||||
|
deleteApi={() => {
|
||||||
|
handleDestroy(record).then(() => {});
|
||||||
|
}}
|
||||||
|
></IsDelete>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
></TableActionCard>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<PageContainer>
|
||||||
|
<ProTable<API.DeviceCategory>
|
||||||
|
cardProps={{
|
||||||
|
bodyStyle: {
|
||||||
|
padding: 20
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
options={{ fullScreen: false, setting: false, density: false, reload: false }}
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="key"
|
||||||
|
search={false}
|
||||||
|
pagination={{
|
||||||
|
...proTablePaginationOptions,
|
||||||
|
pageSize: currentPageSize,
|
||||||
|
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: 'device_category_list',
|
||||||
|
persistenceType: 'localStorage',
|
||||||
|
}}
|
||||||
|
request={async (params = {}, sort) => {
|
||||||
|
const { current, ...rest } = params;
|
||||||
|
const reqParams = {
|
||||||
|
page: current,
|
||||||
|
desc: false,
|
||||||
|
orderKey: '',
|
||||||
|
...rest,
|
||||||
|
};
|
||||||
|
if (sort && Object.keys(sort).length) {
|
||||||
|
reqParams.orderKey = Object.keys(sort)[0];
|
||||||
|
let sort_select = sort[reqParams.orderKey];
|
||||||
|
reqParams.desc = sort_select === 'descend';
|
||||||
|
}
|
||||||
|
// let resp = await postDeviceCategoryGetDeviceCategoryList({ ...reqParams });
|
||||||
|
let resp = await getAlarmRulesList();
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
<UpdateForm
|
||||||
|
updateModalOpen={updateModalOpen}
|
||||||
|
values={currentRow || {}}
|
||||||
|
handleModal={handleUpdateModal}
|
||||||
|
reload={actionRef.current?.reload}
|
||||||
|
/>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AlarmRulesList;
|
||||||
@ -0,0 +1,191 @@
|
|||||||
|
/**
|
||||||
|
* 接口管理新建弹框
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import { postBusinessImageCreateBusinessImage } from '@/services/resource/BusinessImage';
|
||||||
|
import { ModalForm, ProForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import { Button, 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<API.BusinessImage>;
|
||||||
|
|
||||||
|
export type CreateFormProps = {
|
||||||
|
createModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.BusinessImage>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [form] = Form.useForm<API.BusinessImage>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalForm<API.BusinessImage>
|
||||||
|
width={proFormModelWidth}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.add',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
open={props.createModalOpen}
|
||||||
|
form={form}
|
||||||
|
autoFocusFirstInput
|
||||||
|
modalProps={{
|
||||||
|
destroyOnClose: true,
|
||||||
|
onCancel: () => props.handleModal(),
|
||||||
|
}}
|
||||||
|
submitTimeout={2000}
|
||||||
|
onFinish={async (values) => {
|
||||||
|
postBusinessImageCreateBusinessImage(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;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
fontWeight: 600,
|
||||||
|
marginBottom: 12
|
||||||
|
}}>
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.parameter" defaultMessage="$$$" />
|
||||||
|
</span>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="name"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.name" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.name',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.name"
|
||||||
|
defaultMessage="name is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="userName"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.userName"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.userName',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.userName"
|
||||||
|
defaultMessage="version is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="ip"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.ip" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.ip',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="password"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.password"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.password',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="defaultPort"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.defaultPort"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.defaultPort',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormTextArea
|
||||||
|
width={proFormItemStyleProps.width}
|
||||||
|
name="publicKeyString"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.publicKeyString" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.publicKeyString',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<Button type="primary" ghost><FormattedMessage id="resource.server_status.table.list.connectivityTesting" defaultMessage="$$$" /></Button>
|
||||||
|
</ProForm.Group>
|
||||||
|
</ModalForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default CreateForm;
|
||||||
@ -0,0 +1,169 @@
|
|||||||
|
/*
|
||||||
|
* @Author: zhoux zhouxia@supervision.ltd
|
||||||
|
* @Date: 2023-11-01 13:56:33
|
||||||
|
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||||
|
* @LastEditTime: 2023-12-26 15:01:08
|
||||||
|
* @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 { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
|
||||||
|
import { ModalForm, ProForm, ProFormFieldSet, ProFormSelect, ProFormSwitch, 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';
|
||||||
|
export type FormValueType = {
|
||||||
|
target?: string;
|
||||||
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
|
} & Partial<API.DeviceCategory>;
|
||||||
|
|
||||||
|
export type UpdateFormProps = {
|
||||||
|
updateModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.DeviceCategory>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [form] = Form.useForm<API.DeviceCategory>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalForm<any>
|
||||||
|
width={proFormSmallModelWidth}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'alarm_rules.page.form.title',
|
||||||
|
defaultMessage: `编辑${props.values.name}`,
|
||||||
|
})}
|
||||||
|
open={props.updateModalOpen}
|
||||||
|
form={form}
|
||||||
|
autoFocusFirstInput
|
||||||
|
modalProps={{
|
||||||
|
destroyOnClose: true,
|
||||||
|
onCancel: () => props.handleModal(),
|
||||||
|
}}
|
||||||
|
submitTimeout={2000}
|
||||||
|
onFinish={async (values) => {
|
||||||
|
console.log(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;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProForm.Group>
|
||||||
|
{/* <ProFormText
|
||||||
|
width={proFormSmallItemStyleProps.width}
|
||||||
|
name="name"
|
||||||
|
label={<FormattedMessage id="alarm_rules.page.form.enabled" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'alarm_rules.page.form.enabled',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.enabled}
|
||||||
|
disabled={false}
|
||||||
|
/> */}
|
||||||
|
<ProFormSwitch
|
||||||
|
width={proFormSmallItemStyleProps.column2Width}
|
||||||
|
name="isEnable"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="alarm_rules.page.form.isEnabled"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
checkedChildren="启用"
|
||||||
|
unCheckedChildren="关闭"
|
||||||
|
initialValue={props.values.isEnabled}
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormSmallItemStyleProps.width}
|
||||||
|
name="name"
|
||||||
|
label={<FormattedMessage id="alarm_rules.page.form.name" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'alarm_rules.page.form.name',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={true}
|
||||||
|
initialValue={props.values.name}
|
||||||
|
disabled={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="alarm_rules.page.rule.required.name"
|
||||||
|
defaultMessage="name is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
{/* <ProFormSelect
|
||||||
|
width={proFormSmallItemStyleProps.width}
|
||||||
|
name="level"
|
||||||
|
label={<FormattedMessage id="alarm.setting.table.list.level" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_select',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'alarm.setting.table.list.level',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
// TODO 在types中增加类型注释
|
||||||
|
initialValue={props.values?.level}
|
||||||
|
debounceTime={1000}
|
||||||
|
request={async () => {
|
||||||
|
// TODO 此处需要使用告警级别接口联调
|
||||||
|
const resp = await postDeviceGroupGetDeviceGroupFkSelect({});
|
||||||
|
return resp.data.list.map((v: any) => {
|
||||||
|
return {
|
||||||
|
label: v.name,
|
||||||
|
value: v.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/> */}
|
||||||
|
{/* <ProFormText
|
||||||
|
width={proFormSmallItemStyleProps.width}
|
||||||
|
name="triggerConditions"
|
||||||
|
label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'alarm_rules.page.form.triggerConditions',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.triggerConditions}
|
||||||
|
disabled={false}
|
||||||
|
/> */}
|
||||||
|
|
||||||
|
</ProForm.Group>
|
||||||
|
</ModalForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default UpdateForm;
|
||||||
@ -0,0 +1,240 @@
|
|||||||
|
import AlarmLevelBox from '@/components/DictionaryBox/alarmLevel';
|
||||||
|
import TableActionCard from '@/components/TableActionCard';
|
||||||
|
import IsDelete from '@/components/TableActionCard/isDelete';
|
||||||
|
import { alarmLevelStatusEnum } from '@/enums/status';
|
||||||
|
import {
|
||||||
|
deleteDeviceCategoryDeleteDeviceCategory,
|
||||||
|
postDeviceCategoryGetDeviceCategoryList,
|
||||||
|
} from '@/services/device/DeviceCategory';
|
||||||
|
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||||
|
import { PageContainer, ProTable } from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import { Button, Space, Tag, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { proTablePaginationOptions } from '../../../../config/defaultTable';
|
||||||
|
import { proIconForTableActionStyle } from '../../../../config/defaultIcon';
|
||||||
|
import { EditOutlined } from '@ant-design/icons';
|
||||||
|
import UpdateForm from './components/UpdateForm';
|
||||||
|
const InterfaceManageList: React.FC = () => {
|
||||||
|
/**
|
||||||
|
* @en-US International configuration
|
||||||
|
* @zh-CN 国际化配置
|
||||||
|
* */
|
||||||
|
const intl = useIntl();
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
// 动态设置每页数量
|
||||||
|
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
||||||
|
|
||||||
|
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 [currentRow, setCurrentRow] = useState<API.DeviceCategory>();
|
||||||
|
// 编辑弹框
|
||||||
|
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const handleUpdateModal = () => {
|
||||||
|
if (updateModalOpen) {
|
||||||
|
setUpdateModalOpen(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setUpdateModalOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAlarmRulesList = async () => {
|
||||||
|
return {
|
||||||
|
code: 0,
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"createTime": "2023-10-17T02:35:41.14308Z",
|
||||||
|
"updateTime": "2023-10-17T02:35:41.14308Z",
|
||||||
|
"name": "单人徘徊告警",
|
||||||
|
"address": "https://xxxx%E5%BC%80%E5%85%B3",
|
||||||
|
"isEnabled": true,
|
||||||
|
"remark": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"createTime": "2023-10-17T02:40:28.292883Z",
|
||||||
|
"updateTime": "2023-10-26T03:02:51.356036Z",
|
||||||
|
"name": "多人聚集告警",
|
||||||
|
"address": "https://xxxx%E5%BC%80%E5%85%B3",
|
||||||
|
"isEnabled": false,
|
||||||
|
"remark": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"createTime": "2023-12-12T02:54:52.204957Z",
|
||||||
|
"updateTime": "2023-12-12T02:54:52.204957Z",
|
||||||
|
"name": "敏感时间段告警",
|
||||||
|
"address": "https://xxxx%E5%BC%80%E5%85%B3",
|
||||||
|
"isEnabled": false,
|
||||||
|
"remark": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"total": 3,
|
||||||
|
"page": 1,
|
||||||
|
"pageSize": 10
|
||||||
|
},
|
||||||
|
msg: "获取成功"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns: ProColumns<API.DeviceCategory>[] = [
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.interface_manage.table.list.name" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'name',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.interface_manage.table.list.address" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'address',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.interface_manage.table.list.createTime" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
fixed: 'right',
|
||||||
|
render: (_, record) => [
|
||||||
|
<TableActionCard
|
||||||
|
key="TableActionCardRef"
|
||||||
|
renderActions={[
|
||||||
|
{
|
||||||
|
key: 'update',
|
||||||
|
renderDom: (
|
||||||
|
<Button
|
||||||
|
key="update"
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
style={{
|
||||||
|
color:"#081FA8",
|
||||||
|
|
||||||
|
}}
|
||||||
|
icon={<EditOutlined style={{
|
||||||
|
marginRight: 3
|
||||||
|
}} />}
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateModalOpen(true);
|
||||||
|
setCurrentRow(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormattedMessage id="common.edit" defaultMessage="Update" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'destroy',
|
||||||
|
renderDom: (
|
||||||
|
<IsDelete
|
||||||
|
deleteApi={() => {
|
||||||
|
handleDestroy(record).then(() => {});
|
||||||
|
}}
|
||||||
|
></IsDelete>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
></TableActionCard>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
title={false}
|
||||||
|
content={
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: 20,
|
||||||
|
color: '#333'
|
||||||
|
}}>接口管理</div>
|
||||||
|
<Button type="primary"
|
||||||
|
onClick={() => {
|
||||||
|
// setCreateModalOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.add" defaultMessage="add" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ProTable<API.DeviceCategory>
|
||||||
|
cardProps={{
|
||||||
|
bodyStyle: {
|
||||||
|
padding: 20
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
options={{ fullScreen: false, setting: false, density: false, reload: false }}
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="key"
|
||||||
|
search={false}
|
||||||
|
pagination={{
|
||||||
|
...proTablePaginationOptions,
|
||||||
|
pageSize: currentPageSize,
|
||||||
|
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: 'device_category_list',
|
||||||
|
persistenceType: 'localStorage',
|
||||||
|
}}
|
||||||
|
request={async (params = {}, sort) => {
|
||||||
|
const { current, ...rest } = params;
|
||||||
|
const reqParams = {
|
||||||
|
page: current,
|
||||||
|
desc: false,
|
||||||
|
orderKey: '',
|
||||||
|
...rest,
|
||||||
|
};
|
||||||
|
if (sort && Object.keys(sort).length) {
|
||||||
|
reqParams.orderKey = Object.keys(sort)[0];
|
||||||
|
let sort_select = sort[reqParams.orderKey];
|
||||||
|
reqParams.desc = sort_select === 'descend';
|
||||||
|
}
|
||||||
|
// let resp = await postDeviceCategoryGetDeviceCategoryList({ ...reqParams });
|
||||||
|
let resp = await getAlarmRulesList();
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
<UpdateForm
|
||||||
|
updateModalOpen={updateModalOpen}
|
||||||
|
values={currentRow || {}}
|
||||||
|
handleModal={handleUpdateModal}
|
||||||
|
reload={actionRef.current?.reload}
|
||||||
|
/>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InterfaceManageList;
|
||||||
Loading…
Reference in New Issue