cunkebao_v3/Cunkebao/src/pages/pc/ckbox/monitoring/index.tsx

import React from 'react';
import { Card, Row, Col, Statistic, Progress, Table, Tag } from 'antd';
import {
  UserOutlined,
  MessageOutlined,
  TeamOutlined,
  TrophyOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined
} from '@ant-design/icons';
import styles from './index.module.scss';

interface MonitoringProps {
  // 预留接口属性
}

const Monitoring: React.FC<MonitoringProps> = () => {
  // 模拟数据
  const statsData = [
    {
      title: '在线设备数',
      value: 128,
      prefix: <UserOutlined />,
      suffix: '台',
      valueStyle: { color: '#3f8600' },
    },
    {
      title: '今日消息量',
      value: 2456,
      prefix: <MessageOutlined />,
      suffix: '条',
      valueStyle: { color: '#1890ff' },
    },
    {
      title: '活跃群组',
      value: 89,
      prefix: <TeamOutlined />,
      suffix: '个',
      valueStyle: { color: '#722ed1' },
    },
    {
      title: '成功率',
      value: 98.5,
      prefix: <TrophyOutlined />,
      suffix: '%',
      valueStyle: { color: '#f5222d' },
    },
  ];

  const tableColumns = [
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      key: 'deviceName',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === '在线' ? 'green' : 'red'}>{status}</Tag>
      ),
    },
    {
      title: '消息数',
      dataIndex: 'messageCount',
      key: 'messageCount',
    },
    {
      title: '最后活跃时间',
      dataIndex: 'lastActive',
      key: 'lastActive',
    },
  ];

  const tableData = [
    {
      key: '1',
      deviceName: '设备001',
      status: '在线',
      messageCount: 245,
      lastActive: '2024-01-15 14:30:25',
    },
    {
      key: '2',
      deviceName: '设备002',
      status: '离线',
      messageCount: 156,
      lastActive: '2024-01-15 12:15:10',
    },
    {
      key: '3',
      deviceName: '设备003',
      status: '在线',
      messageCount: 389,
      lastActive: '2024-01-15 14:28:45',
    },
  ];

  return (
    <div className={styles.monitoring}>
      <div className={styles.header}>
        <h2>数据监控看板</h2>
        <p>实时监控系统运行状态和数据指标</p>
      </div>

      {/* 统计卡片 */}
      <Row gutter={[16, 16]} className={styles.statsRow}>
        {statsData.map((stat, index) => (
          <Col xs={24} sm={12} md={6} key={index}>
            <Card className={styles.statCard}>
              <Statistic
                title={stat.title}
                value={stat.value}
                prefix={stat.prefix}
                suffix={stat.suffix}
                valueStyle={stat.valueStyle}
              />
            </Card>
          </Col>
        ))}
      </Row>

      {/* 进度指标 */}
      <Row gutter={[16, 16]} className={styles.progressRow}>
        <Col xs={24} md={12}>
          <Card title="系统负载" className={styles.progressCard}>
            <div className={styles.progressItem}>
              <span>CPU使用率</span>
              <Progress percent={65} status="active" />
            </div>
            <div className={styles.progressItem}>
              <span>内存使用率</span>
              <Progress percent={45} />
            </div>
            <div className={styles.progressItem}>
              <span>磁盘使用率</span>
              <Progress percent={30} />
            </div>
          </Card>
        </Col>
        <Col xs={24} md={12}>
          <Card title="实时指标" className={styles.metricsCard}>
            <div className={styles.metricItem}>
              <span>消息处理速度</span>
              <div className={styles.metricValue}>
                <span>1,245</span>
                <ArrowUpOutlined style={{ color: '#3f8600' }} />
              </div>
            </div>
            <div className={styles.metricItem}>
              <span>错误率</span>
              <div className={styles.metricValue}>
                <span>0.2%</span>
                <ArrowDownOutlined style={{ color: '#3f8600' }} />
              </div>
            </div>
            <div className={styles.metricItem}>
              <span>响应时间</span>
              <div className={styles.metricValue}>
                <span>125ms</span>
                <ArrowDownOutlined style={{ color: '#3f8600' }} />
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 设备状态表格 */}
      <Row className={styles.tableRow}>
        <Col span={24}>
          <Card title="设备状态" className={styles.tableCard}>
            <Table
              columns={tableColumns}
              dataSource={tableData}
              pagination={false}
              size="middle"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Monitoring;