d8d-admin-mobile-starter-public/client/admin/pages_device_alert_rule.tsx

import React, { useState, useEffect } from 'react';
import { 
  Button, Table, Space,
  Form, Input, Select, message, Modal,
  Card, Row, Col, Switch, 
  Popconfirm, Tag, Collapse, 
} from 'antd';
import 'dayjs/locale/zh-cn';
// 从share/types.ts导入所有类型，包括MapMode
import type { 
  ZichanInfo,  DeviceAlertRule,
} from '../share/monitorTypes.ts';

import {
  AlertLevel, MetricType,
  AlertLevelNameMap, MetricTypeNameMap
} from '../share/monitorTypes.ts';

import {
  EnableStatus, EnableStatusNameMap, 
} from '../share/types.ts';

import { getEnumOptions } from './utils.ts';

import { DeviceInstanceAPI,  DeviceAlertRuleAPI} from './api/index.ts';



// 设备告警规则页面
export const DeviceAlertRulePage = () => {
    const [loading, setLoading] = useState(false);
    const [ruleData, setRuleData] = useState<DeviceAlertRule[]>([]);
    const [pagination, setPagination] = useState({
      current: 1,
      pageSize: 10,
      total: 0,
    });
    const [deviceOptions, setDeviceOptions] = useState<{label: string, value: number}[]>([]);
    const [modalVisible, setModalVisible] = useState(false);
    const [modalTitle, setModalTitle] = useState('新增告警规则');
    const [currentRecord, setCurrentRecord] = useState<DeviceAlertRule | null>(null);
    const [formRef] = Form.useForm();
    const [modalForm] = Form.useForm();
    
    useEffect(() => {
      fetchDeviceOptions();
      fetchRuleData();
    }, [pagination.current, pagination.pageSize]);
  
    const fetchDeviceOptions = async () => {
      try {
        const response = await DeviceInstanceAPI.getDeviceInstances();
        if (response && response.data) {
          const options = response.data.map((device: ZichanInfo) => ({
            label: device.asset_name || `设备${device.id}`,
            value: device.id
          }));
          setDeviceOptions(options);
        }
      } catch (error) {
        console.error('获取设备列表失败:', error);
        message.error('获取设备列表失败');
      }
    };
  
    const fetchRuleData = async () => {
      setLoading(true);
      try {
        const values = formRef.getFieldsValue();
        const params = {
          page: pagination.current,
          pageSize: pagination.pageSize,
          device_id: values.device_id,
          metric_type: values.metric_type,
          alert_level: values.alert_level,
          is_enabled: values.is_enabled,
        };
        
        const response = await DeviceAlertRuleAPI.getDeviceAlertRules(params);
        
        if (response) {
          setRuleData(response.data || []);
          setPagination({
            ...pagination,
            total: response.total || 0,
          });
        }
      } catch (error) {
        console.error('获取告警规则失败:', error);
        message.error('获取告警规则失败');
      } finally {
        setLoading(false);
      }
    };
  
    const handleSearch = (values: any) => {
      setPagination({
        ...pagination,
        current: 1,
      });
      fetchRuleData();
    };
  
    const handleTableChange = (newPagination: any) => {
      setPagination({
        ...pagination,
        current: newPagination.current,
        pageSize: newPagination.pageSize,
      });
    };
  
    const handleAdd = () => {
      setModalTitle('新增告警规则');
      setCurrentRecord(null);
      modalForm.resetFields();
      setModalVisible(true);
    };
  
    const handleEdit = (record: DeviceAlertRule) => {
      setModalTitle('编辑告警规则');
      setCurrentRecord(record);
      modalForm.setFieldsValue(record);
      setModalVisible(true);
    };
  
    const handleDelete = async (id: number) => {
      try {
        await DeviceAlertRuleAPI.deleteDeviceAlertRule(id);
        message.success('删除成功');
        fetchRuleData();
      } catch (error) {
        console.error('删除失败:', error);
        message.error('删除失败');
      }
    };
  
    const handleEnableChange = async (record: DeviceAlertRule, enabled: boolean) => {
      try {
        await DeviceAlertRuleAPI.updateDeviceAlertRule(record.id, {
          is_enabled: enabled ? EnableStatus.ENABLED : EnableStatus.DISABLED
        });
        message.success(`${enabled ? '启用' : '禁用'}成功`);
        fetchRuleData();
      } catch (error) {
        console.error('操作失败:', error);
        message.error('操作失败');
      }
    };
  
    const handleModalSubmit = async () => {
      try {
        const values = await modalForm.validateFields();
        
        if (currentRecord) {
          // 更新
          await DeviceAlertRuleAPI.updateDeviceAlertRule(currentRecord.id, values);
          message.success('更新成功');
        } else {
          // 新增
          await DeviceAlertRuleAPI.createDeviceAlertRule(values);
          message.success('添加成功');
        }
        
        setModalVisible(false);
        fetchRuleData();
      } catch (error) {
        console.error('操作失败:', error);
        message.error('操作失败');
      }
    };
  
    const metricTypeOptions = getEnumOptions(MetricType, MetricTypeNameMap);
  
    const alertLevelOptions = getEnumOptions(AlertLevel, AlertLevelNameMap);
  
    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: 'device_id',
        key: 'device_id',
        render: (id: number) => {
          const device = deviceOptions.find(opt => opt.value === id);
          return device ? device.label : id;
        },
      },
      {
        title: '监控指标',
        dataIndex: 'metric_type',
        key: 'metric_type',
        render: (text: string) => {
          const option = metricTypeOptions.find(opt => opt.value === text);
          return option ? option.label : text;
        },
      },
      {
        title: '最小阈值',
        dataIndex: 'min_value',
        key: 'min_value',
      },
      {
        title: '最大阈值',
        dataIndex: 'max_value',
        key: 'max_value',
      },
      {
        title: '持续时间(秒)',
        dataIndex: 'duration_seconds',
        key: 'duration_seconds',
      },
      {
        title: '告警等级',
        dataIndex: 'alert_level',
        key: 'alert_level',
        render: (level: AlertLevel) => getAlertLevelTag(level),
      },
      {
        title: '状态',
        dataIndex: 'is_enabled',
        key: 'is_enabled',
        render: (status: EnableStatus, record: DeviceAlertRule) => (
          <Switch
            checked={status === EnableStatus.ENABLED}
            onChange={(checked) => handleEnableChange(record, checked)}
            checkedChildren="启用"
            unCheckedChildren="禁用"
          />
        ),
      },
      {
        title: '操作',
        key: 'action',
        render: (_: any, record: DeviceAlertRule) => (
          <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="device_id" label="设备">
              <Select
                placeholder="选择设备"
                style={{ width: 200 }}
                allowClear
                options={deviceOptions}
              />
            </Form.Item>
            <Form.Item name="metric_type" label="监控指标">
              <Select
                placeholder="选择监控指标"
                style={{ width: 150 }}
                allowClear
                options={metricTypeOptions}
              />
            </Form.Item>
            <Form.Item name="alert_level" label="告警等级">
              <Select
                placeholder="选择告警等级"
                style={{ width: 120 }}
                allowClear
                options={alertLevelOptions}
              />
            </Form.Item>
            <Form.Item name="is_enabled" 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={ruleData}
            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="device_id"
              label="设备"
              rules={[{ required: true, message: '请选择设备' }]}
            >
              <Select
                placeholder="选择设备"
                options={deviceOptions}
              />
            </Form.Item>
            
            <Form.Item
              name="metric_type"
              label="监控指标"
              rules={[{ required: true, message: '请选择监控指标' }]}
            >
              <Select
                placeholder="选择监控指标"
                options={metricTypeOptions}
              />
            </Form.Item>
            
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="min_value"
                  label="最小阈值"
                  tooltip="指标值低于此阈值时触发告警，例如CPU使用率低于5%时告警。如不需要可留空。"
                >
                  <Input type="number" placeholder="输入最小阈值，例如：温度5、湿度20" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="max_value"
                  label="最大阈值"
                  tooltip="指标值高于此阈值时触发告警，例如CPU使用率高于90%时告警。如不需要可留空。"
                >
                  <Input type="number" placeholder="输入最大阈值，例如：温度30、CPU使用率90" />
                </Form.Item>
              </Col>
            </Row>
               
            <Collapse defaultActiveKey={[]} style={{ marginBottom: 16 }}>
              <Collapse.Panel 
                header="阈值参考 (点击展开查看)"
                key="1"
              >
                <div>
                  <p>常见阈值参考：</p>
                  <ul>
                    <li>温度(temperature)：最大阈值建议设为 30-35℃</li>
                    <li>湿度(humidity)：最小阈值20%，最大阈值80%</li>
                    <li>CPU使用率(cpu_usage)：最大阈值建议设为 85-95%</li>
                    <li>内存使用率(memory_usage)：最大阈值建议设为 85-95%</li>
                    <li>磁盘使用率(disk_usage)：最大阈值建议设为 85-95%</li>
                    <li>Ping时间(ping_time)：最大阈值建议设为 100-200ms</li>
                    <li>丢包率(packet_loss)：最大阈值建议设为 2-5%</li>
                    <li>连接状态(connection_status)：最大阈值建议设为 0（0表示已连接，大于0表示未连接）</li>
                  </ul>
                  <p>注意：最小值或最大值必须至少填写一项。</p>
                </div>
              </Collapse.Panel>
            </Collapse>
            
            <Form.Item
              name="duration_seconds"
              label="持续时间(秒)"
              rules={[{ required: true, message: '请输入持续时间' }]}
              initialValue={60}
            >
              <Input type="number" placeholder="输入持续时间" />
            </Form.Item>
            
            <Form.Item
              name="alert_level"
              label="告警等级"
              rules={[{ required: true, message: '请选择告警等级' }]}
            >
              <Select
                placeholder="选择告警等级"
                options={alertLevelOptions}
              />
            </Form.Item>
            
            <Form.Item
              name="alert_message"
              label="告警消息模板"
            >
              <Input.TextArea rows={3} placeholder="输入告警消息模板，可使用{{变量}}格式插入动态内容" />
            </Form.Item>
            
            <Form.Item
              name="is_enabled"
              label="状态"
              initialValue={EnableStatus.ENABLED}
            >
              <Select
                placeholder="选择状态"
                options={enableStatusOptions}
              />
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  };