feat: 前端页面开发
JINGYJ
1 year 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