import React from 'react';  // ======== 导入React库，用于创建React组件 ========
import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Result组件 ========

const OnlineMonitoring = () => {  // ======== 定义在线监测预警组件函数 ========
    return (  // ======== 返回JSX结构 ========
        <div style={{ padding: '24px' }}>  // ======== 外层容器，设置24px内边距 ========
            <Card title="在线监测预警" style={{ height: '100%' }}>  // ======== Card组件，标题为"在线监测预警"，高度为父级100% ========
                <Result  // ======== Result组件，用于显示状态页面 ========
                    status="info"  // ======== 设置状态为info（信息类型） ========
                    title="在线监测预警模块"  // ======== 设置标题 ========
                    subTitle="此功能正在开发中，敬请期待..."  // ======== 设置副标题，提示开发中 ========
                />  // ======== Result组件结束 ========
            </Card>  // ======== Card组件结束 ========
        </div>  // ======== 外层容器结束 ========
    );  // ======== return语句结束 ========
};  // ======== 组件函数结束 ========

export default OnlineMonitoring;  // ======== 导出组件供其他文件使用 ========