511 lines
15 KiB
TypeScript
511 lines
15 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import {
|
||
Button, Table, Space,
|
||
Form, Input, Select, message, Modal, Badge,
|
||
Popconfirm, Tag, Card
|
||
} from 'antd';
|
||
import 'dayjs/locale/zh-cn';
|
||
import type { InferResponseType, InferRequestType } from 'hono/client';
|
||
// 从share/types.ts导入所有类型，包括MapMode
|
||
|
||
import {
|
||
AlertLevel, NotifyType,
|
||
AlertLevelNameMap,
|
||
NotifyTypeNameMap,
|
||
} from '@/share/monitorTypes';
|
||
|
||
import {
|
||
EnableStatus, EnableStatusNameMap,
|
||
} from '@/share/types';
|
||
|
||
import { getEnumOptions } from '../utils';
|
||
|
||
import { deviceInstancesClient, userClient, alertNotifyConfigClient } from '@/client/api';
|
||
|
||
// 定义类型
|
||
type AlertNotifyConfig = InferResponseType<typeof alertNotifyConfigClient.$get, 200>['data'][0];
|
||
type CreateAlertNotifyConfigRequest = InferRequestType<typeof alertNotifyConfigClient.$post>['json'];
|
||
type UpdateAlertNotifyConfigRequest = InferRequestType<typeof alertNotifyConfigClient[':id']['$put']>['json'];
|
||
type DeviceInstance = InferResponseType<typeof deviceInstancesClient.$get, 200>['data'][0];
|
||
type User = InferResponseType<typeof userClient.$get, 200>['data'][0];
|
||
|
||
|
||
// 告警通知配置页面
|
||
export const AlertNotifyConfigPage = () => {
|
||
const [loading, setLoading] = useState(false);
|
||
const [configData, setConfigData] = useState<AlertNotifyConfig[]>([]);
|
||
const [pagination, setPagination] = useState({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
});
|
||
const [deviceOptions, setDeviceOptions] = useState<{label: string, value: number}[]>([]);
|
||
const [userOptions, setUserOptions] = useState<{label: string, value: number}[]>([]);
|
||
const [modalVisible, setModalVisible] = useState(false);
|
||
const [modalTitle, setModalTitle] = useState('新增告警通知配置');
|
||
const [currentRecord, setCurrentRecord] = useState<AlertNotifyConfig | null>(null);
|
||
const [formRef] = Form.useForm();
|
||
const [modalForm] = Form.useForm<CreateAlertNotifyConfigRequest>();
|
||
|
||
useEffect(() => {
|
||
fetchDeviceOptions();
|
||
fetchUserOptions();
|
||
fetchConfigData();
|
||
}, [pagination.current, pagination.pageSize]);
|
||
|
||
const fetchDeviceOptions = async () => {
|
||
try {
|
||
const res = await deviceInstancesClient.$get({
|
||
query:{
|
||
pageSize: 500
|
||
}
|
||
});
|
||
if (res.status === 200) {
|
||
const data = await res.json();
|
||
const options = data.data.map((device) => ({
|
||
label: device.zichanInfo?.assetName || `设备${device.id}`,
|
||
value: device.id
|
||
}));
|
||
setDeviceOptions(options);
|
||
} else {
|
||
const data = await res.json();
|
||
throw new Error(data.message || '获取设备列表失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('获取设备列表失败:', error);
|
||
message.error(error instanceof Error ? error.message : '获取设备列表失败');
|
||
}
|
||
};
|
||
|
||
const fetchUserOptions = async () => {
|
||
try {
|
||
const res = await userClient.$get({
|
||
query: {
|
||
pageSize: 100
|
||
}
|
||
});
|
||
if (res.status === 200) {
|
||
const data = await res.json();
|
||
const options = data.data.map((user) => ({
|
||
label: user.nickname || user.username,
|
||
value: user.id
|
||
}));
|
||
setUserOptions(options);
|
||
} else {
|
||
const data = await res.json();
|
||
throw new Error(data.message || '获取用户列表失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('获取用户列表失败:', error);
|
||
message.error(error instanceof Error ? error.message : '获取用户列表失败');
|
||
}
|
||
};
|
||
|
||
const fetchConfigData = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const values = formRef.getFieldsValue();
|
||
const params = {
|
||
page: pagination.current,
|
||
pageSize: pagination.pageSize,
|
||
deviceId: values.deviceId,
|
||
alertLevel: values.alertLevel,
|
||
notifyType: values.notifyType,
|
||
isEnabled: values.isEnabled,
|
||
};
|
||
|
||
const res = await alertNotifyConfigClient.$get({
|
||
query: params
|
||
});
|
||
|
||
if (res.status === 200) {
|
||
const data = await res.json();
|
||
setConfigData(data.data || []);
|
||
setPagination({
|
||
...pagination,
|
||
total: data.pagination?.total || 0,
|
||
});
|
||
} else {
|
||
const data = await res.json();
|
||
throw new Error(data.message || '获取告警通知配置失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('获取告警通知配置失败:', error);
|
||
message.error(error instanceof Error ? error.message : '获取告警通知配置失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleSearch = (values: any) => {
|
||
setPagination({
|
||
...pagination,
|
||
current: 1,
|
||
});
|
||
fetchConfigData();
|
||
};
|
||
|
||
const handleTableChange = (newPagination: any) => {
|
||
setPagination({
|
||
...pagination,
|
||
current: newPagination.current,
|
||
pageSize: newPagination.pageSize,
|
||
});
|
||
};
|
||
|
||
const handleAdd = () => {
|
||
setModalTitle('新增告警通知配置');
|
||
setCurrentRecord(null);
|
||
modalForm.resetFields();
|
||
setModalVisible(true);
|
||
};
|
||
|
||
const handleEdit = (record: AlertNotifyConfig) => {
|
||
setModalTitle('编辑告警通知配置');
|
||
setCurrentRecord(record);
|
||
|
||
// 将用户ID列表转为数组
|
||
const formData = {
|
||
...record,
|
||
notifyUsers: record.notifyUsers || [],
|
||
deviceId: record.deviceId,
|
||
alertLevel: record.alertLevel,
|
||
notifyType: record.notifyType,
|
||
notifyTemplate: record.notifyTemplate,
|
||
isEnabled: record.isEnabled,
|
||
};
|
||
|
||
modalForm.setFieldsValue(formData);
|
||
setModalVisible(true);
|
||
};
|
||
|
||
const handleDelete = async (id: number) => {
|
||
try {
|
||
const res = await alertNotifyConfigClient[':id'].$delete({
|
||
param: { id: id }
|
||
});
|
||
|
||
if (res.status === 200) {
|
||
message.success('删除成功');
|
||
fetchConfigData();
|
||
} else {
|
||
const data = await res.json();
|
||
throw new Error(data.message || '删除失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('删除失败:', error);
|
||
message.error(error instanceof Error ? error.message : '删除失败');
|
||
}
|
||
};
|
||
|
||
const handleModalSubmit = async () => {
|
||
try {
|
||
const values = await modalForm.validateFields();
|
||
|
||
// 根据通知类型处理提交数据
|
||
const submitData = {
|
||
...values,
|
||
notifyUsers: values.notifyType === NotifyType.SMS ? [] : values.notifyUsers,
|
||
};
|
||
|
||
if (currentRecord) {
|
||
// 更新
|
||
const res = await alertNotifyConfigClient[':id'].$put({
|
||
param: { id: currentRecord.id },
|
||
json: submitData
|
||
});
|
||
|
||
if (res.status === 200) {
|
||
message.success('更新成功');
|
||
setModalVisible(false);
|
||
fetchConfigData();
|
||
} else {
|
||
const data = await res.json();
|
||
throw new Error(data.message || '更新失败');
|
||
}
|
||
} else {
|
||
// 新增
|
||
const res = await alertNotifyConfigClient.$post({
|
||
json: submitData
|
||
});
|
||
|
||
if (res.status === 200) {
|
||
message.success('添加成功');
|
||
setModalVisible(false);
|
||
fetchConfigData();
|
||
} else {
|
||
const data = await res.json();
|
||
throw new Error(data.message || '添加失败');
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('操作失败:', error);
|
||
message.error(error instanceof Error ? error.message : '操作失败');
|
||
}
|
||
};
|
||
|
||
const alertLevelOptions = getEnumOptions(AlertLevel, AlertLevelNameMap);
|
||
|
||
const notifyTypeOptions = getEnumOptions(NotifyType, NotifyTypeNameMap);
|
||
|
||
const enableStatusOptions = getEnumOptions(EnableStatus, EnableStatusNameMap);
|
||
|
||
const getAlertLevelTag = (level: AlertLevel) => {
|
||
switch (level) {
|
||
case AlertLevel.MINOR:
|
||
return <Tag color="blue">次要</Tag>;
|
||
case AlertLevel.NORMAL:
|
||
return <Tag color="green">一般</Tag>;
|
||
case AlertLevel.IMPORTANT:
|
||
return <Tag color="orange">重要</Tag>;
|
||
case AlertLevel.URGENT:
|
||
return <Tag color="red">紧急</Tag>;
|
||
default:
|
||
return <Tag>未知</Tag>;
|
||
}
|
||
};
|
||
|
||
const columns = [
|
||
{
|
||
title: '配置ID',
|
||
dataIndex: 'id',
|
||
key: 'id',
|
||
width: 80,
|
||
},
|
||
{
|
||
title: '设备',
|
||
dataIndex: 'deviceId',
|
||
key: 'deviceId',
|
||
render: (id: number) => {
|
||
const device = deviceOptions.find(opt => opt.value === id);
|
||
return device ? device.label : id;
|
||
},
|
||
},
|
||
{
|
||
title: '告警等级',
|
||
dataIndex: 'alertLevel',
|
||
key: 'alertLevel',
|
||
render: (level: AlertLevel) => getAlertLevelTag(level),
|
||
},
|
||
{
|
||
title: '通知类型',
|
||
dataIndex: 'notifyType',
|
||
key: 'notifyType',
|
||
render: (type: NotifyType) => NotifyTypeNameMap[type] || type,
|
||
},
|
||
{
|
||
title: '通知模板',
|
||
dataIndex: 'notifyTemplate',
|
||
key: 'notifyTemplate',
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: '通知用户',
|
||
dataIndex: 'notifyUsers',
|
||
key: 'notifyUsers',
|
||
render: (users: number[]) => {
|
||
if (!users || users.length === 0) return '无';
|
||
|
||
return users.map(id => {
|
||
const user = userOptions.find(opt => opt.value === id);
|
||
return user ? user.label : id;
|
||
}).join(', ');
|
||
},
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'isEnabled',
|
||
key: 'isEnabled',
|
||
render: (status: EnableStatus) => (
|
||
status === EnableStatus.ENABLED ?
|
||
<Badge status="success" text="启用" /> :
|
||
<Badge status="default" text="禁用" />
|
||
),
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
render: (_: any, record: AlertNotifyConfig) => (
|
||
<Space size="middle">
|
||
<Button size="small" type="primary" onClick={() => handleEdit(record)}>
|
||
编辑
|
||
</Button>
|
||
<Popconfirm
|
||
title="确定删除此配置?"
|
||
onConfirm={() => handleDelete(record.id)}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Button size="small" danger>
|
||
删除
|
||
</Button>
|
||
</Popconfirm>
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<Card title="告警通知配置" style={{ marginBottom: 16 }}>
|
||
<Form
|
||
form={formRef}
|
||
layout="inline"
|
||
onFinish={handleSearch}
|
||
style={{ marginBottom: 16 }}
|
||
>
|
||
<Form.Item name="deviceId" label="设备">
|
||
<Select
|
||
placeholder="选择设备"
|
||
style={{ width: 200 }}
|
||
allowClear
|
||
options={deviceOptions}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="alertLevel" label="告警等级">
|
||
<Select
|
||
placeholder="选择告警等级"
|
||
style={{ width: 120 }}
|
||
allowClear
|
||
options={alertLevelOptions}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="notifyType" label="通知类型">
|
||
<Select
|
||
placeholder="选择通知类型"
|
||
style={{ width: 120 }}
|
||
allowClear
|
||
options={notifyTypeOptions}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="isEnabled" label="状态">
|
||
<Select
|
||
placeholder="选择状态"
|
||
style={{ width: 100 }}
|
||
allowClear
|
||
options={enableStatusOptions}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item>
|
||
<Button type="primary" htmlType="submit">
|
||
查询
|
||
</Button>
|
||
</Form.Item>
|
||
<Form.Item>
|
||
<Button type="primary" onClick={handleAdd}>
|
||
新增
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
|
||
<Table
|
||
columns={columns}
|
||
dataSource={configData}
|
||
rowKey="id"
|
||
pagination={pagination}
|
||
loading={loading}
|
||
onChange={handleTableChange}
|
||
/>
|
||
</Card>
|
||
|
||
<Modal
|
||
title={modalTitle}
|
||
open={modalVisible}
|
||
onOk={handleModalSubmit}
|
||
onCancel={() => setModalVisible(false)}
|
||
width={600}
|
||
>
|
||
<Form
|
||
form={modalForm}
|
||
layout="vertical"
|
||
>
|
||
<Form.Item
|
||
name="deviceId"
|
||
label="设备"
|
||
rules={[{ required: true, message: '请选择设备' }]}
|
||
>
|
||
<Select
|
||
placeholder="选择设备"
|
||
options={deviceOptions}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="alertLevel"
|
||
label="告警等级"
|
||
rules={[{ required: true, message: '请选择告警等级' }]}
|
||
>
|
||
<Select
|
||
placeholder="选择告警等级"
|
||
options={alertLevelOptions}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="notifyType"
|
||
label="通知类型"
|
||
rules={[{ required: true, message: '请选择通知类型' }]}
|
||
>
|
||
<Select
|
||
placeholder="选择通知类型"
|
||
options={notifyTypeOptions}
|
||
onChange={(value) => {
|
||
if (value === NotifyType.SMS) {
|
||
modalForm.setFieldsValue({ notifyUsers: [] });
|
||
}
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="notifyTemplate"
|
||
label="通知模板"
|
||
rules={[{ required: true, message: '请输入通知模板' }]}
|
||
>
|
||
<Input.TextArea rows={3} placeholder="输入通知模板，可使用{{变量}}格式插入动态内容" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
noStyle
|
||
shouldUpdate={(prevValues, currentValues) => prevValues.notifyType !== currentValues.notifyType}
|
||
>
|
||
{({ getFieldValue }) =>
|
||
getFieldValue('notifyType') === NotifyType.SMS ? (
|
||
<Form.Item
|
||
name="phone"
|
||
label="手机号码"
|
||
rules={[{ required: true, message: '请输入手机号码' }]}
|
||
>
|
||
<Input placeholder="请输入接收短信的手机号码" />
|
||
</Form.Item>
|
||
) : (
|
||
<Form.Item
|
||
name="notifyUsers"
|
||
label="通知用户"
|
||
rules={[{ required: true, message: '请选择通知用户' }]}
|
||
>
|
||
<Select
|
||
placeholder="选择通知用户"
|
||
mode="multiple"
|
||
options={userOptions}
|
||
/>
|
||
</Form.Item>
|
||
)
|
||
}
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="isEnabled"
|
||
label="状态"
|
||
initialValue={EnableStatus.ENABLED}
|
||
>
|
||
<Select
|
||
placeholder="选择状态"
|
||
options={enableStatusOptions}
|
||
/>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}; |