dq-enms/src/pages/business_dataCollection/basic.js

import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
import styles from './basic.less';

import Cjgl from './components/Cjgl';
import Zdcj from './components/Zdcj';
import Sglr from './components/Sglr';
import Sjjy from './components/Sjjy';
import Cjrz from './components/Cjrz';


const SafeMajorHazardList = () => {
    const [activeModule, setActiveModule] = useState('Cjgl');

    const handleModuleClick = (module) => {
        setActiveModule(module)
    }


    const renderModule = () => {
        switch (activeModule) {
            case 'Cjgl':
                return <Cjgl />;
            case 'Zdcj':
                return <Zdcj />;
            case 'Sglr':
                return <Sglr />;
            case 'Sjjy':
                return <Sjjy />;
            case 'Cjrz':
                return <Cjrz />;
            default:
                return <Cjgl />;
        }
    };


    return (
        <div className={styles.container}>
            <div className={styles.TopButton}>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "Cjgl" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("Cjgl")}
                >采集概览
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "Zdcj" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("Zdcj")}
                >自动采集
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "Sglr" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("Sglr")}
                >手工录入
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "Sjjy" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("Sjjy")}
                >数据校验
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "Cjrz" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("Cjrz")}
                >采集日志
                </Button>
            </div>
            <div className={styles.content}>
                {renderModule()}
            </div>
        </div>
    );
};

export default SafeMajorHazardList;