ccic-web/packages/examination/src/views/exam-online/compoents/ExamPaperAnalysisPage.tsx

import React, { useState, useEffect } from 'react';
import { Row, Col, Input, Select, Button, Table, Space } from 'antd';
import { withRouter, RouteComponentProps } from 'react-router-dom'; // 引入 withRouter 和 RouteComponentProps
import {
    getExamPaperAnalysisPageList,
    getIndustryList,
    getPaperAnalysisData, getScoreDistribution
} from 'api/exam-online/index';
import ESBreadcrumbComponent from "./ESBreadcrumbComponent"; // 假设的接口导入

const { Option } = Select;

// 定义表格数据项的类型
export type PaperAnalysisDataItem = {
    key: string;
    paperId: string;
    paperName: string;
    industry: string;
    useCount: number;
    participantCount: number;
    accuracyRate: string;
};

const ExamPaperAnalysisPage: React.FC<RouteComponentProps> = ({history}) => {
    const [paperName, setPaperName] = useState('');
    const [industry, setIndustry] = useState('');
    const [industryOptions, setIndustryOptions] = useState<{ value: string; label: string }[]>([]);
    const [tableData, setTableData] = useState<PaperAnalysisDataItem[]>([]);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: tableData.length,
    });
    const [totalCount, setTotalCount] = useState(0);
    const [usedCount, setUsedCount] = useState(0);
    const [disabledCount, setDisabledCount] = useState(0);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const industryResponse = await getIndustryList();
                setIndustryOptions(industryResponse.map((item: any) => ({ value: item.industry_id, label: item.industry_name })));

                const paperAnalysisResponse = await getPaperAnalysisData();
                setTotalCount(paperAnalysisResponse.totalCount);
                setUsedCount(paperAnalysisResponse.usedCount);
                setDisabledCount(paperAnalysisResponse.disabledCount);
                handleSearch();
            } catch (error) {
                console.error('数据获取失败:', error);
            }
        };
        fetchData();
    }, []);

    const handleReset = () => {
        setPaperName('');
        setIndustry('');
        setTableData(tableData);
        setPagination({
            ...pagination,
            current: 1,
        });
    };

    const handleShowScoreDistribution = async (paperId: string) => {
        try {
            // const response = await getScoreDistribution(paperId);
            sessionStorage.setItem("paperId",paperId)
            history.push("/exam_paper_analysis_detail");
        } catch (error) {
            console.error('获取成绩分布数据失败:', error);
        }
    };

    const handleSearch = () => {
        const param = {
            paperName:paperName,
            industry:industry,
        }
        const fetchData = async () => {
            try {
                const resultData = await getExamPaperAnalysisPageList(param)
                setTableData(resultData);
                setPagination({
                    ...pagination,
                    current: 1,
                    total: resultData.length,
                });
            } catch (error) {
                console.error('数据获取失败:', error);
            }
        };
        fetchData();
    };

    const handleTableChange = (newPagination: any) => {
        setPagination(newPagination);
    };

    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            render: (text: any, record: PaperAnalysisDataItem, index: number) => (pagination.current - 1) * pagination.pageSize + index + 1,
        },
        {
            title: '试卷名称',
            dataIndex: 'paperName',
        },
        {
            title: '监管行业',
            dataIndex: 'industry',
        },
        {
            title: '使用次数',
            dataIndex: 'useCount',
        },
        {
            title: '参与人数',
            dataIndex: 'participantCount',
        },
        {
            title: '准确率',
            dataIndex: 'accuracyRate',
            render: (text:any, record: PaperAnalysisDataItem) =>{
                if(record.accuracyRate){
                    return record.accuracyRate+"%";
                }else{
                    return "";
                }
            }
        },
        {
            title: '查看',
            dataIndex: 'view',
            render: (text:any, record: PaperAnalysisDataItem) => <a onClick={()=>{handleShowScoreDistribution(record.paperId)}}>题目正确率分析</a>,
        },
    ];

    return (
        <div style={{ padding: 20 }}>
            {/* 检索条件行 */}
            <Row gutter={16}>
                <Col span={6}>
                    <span style={{ marginRight: 8 }}>试卷名称:</span>
                    <Input
                        placeholder="试卷名称"
                        value={paperName}
                        onChange={(e) => setPaperName(e.target.value)}
                        style={{ width: 'calc(100% - 100px)' }}
                    />
                </Col>
                <Col span={6}>
                    <span style={{ marginRight: 8 }}>监管行业:</span>
                    <Select
                        placeholder="监管行业"
                        value={industry}
                        onChange={(value) => setIndustry(value)}
                        style={{ width: 150 }}
                    >
                        <Option key="" value="">全部</Option>
                        {industryOptions.map((option) => (
                            <Option key={option.value} value={option.value}>
                                {option.label}
                            </Option>
                        ))}
                    </Select>
                </Col>
                <Col span={4}>
                    <Space>
                        <Button onClick={handleReset}>重置</Button>
                        <Button type="primary" onClick={handleSearch}>查询</Button>
                    </Space>
                </Col>
            </Row>
            {/* 试卷数量行 */}
            <Row gutter={16} style={{ marginTop: 20 }}>
                <Col span={6}>
                    <div style={{ backgroundColor: '#DCE4F8', padding: 10, textAlign: 'center' }}>
                        <span style={{ color: 'black' }}>总计</span>
                        <span style={{ color: '#86A3E7' }}>{totalCount}</span>
                        <span style={{ color: 'black' }}>套</span>
                    </div>
                </Col>
                <Col span={6}>
                    <div style={{ backgroundColor: '#DCE4F8', padding: 10, textAlign: 'center' }}>
                        <span style={{ color: 'black' }}>已使用</span>
                        <span style={{ color: '#86A3E7' }}>{usedCount}</span>
                        <span style={{ color: 'black' }}>套</span>
                    </div>
                </Col>
                <Col span={6}>
                    <div style={{ backgroundColor: '#DCE4F8', padding: 10, textAlign: 'center' }}>
                        <span style={{ color: 'black' }}>停用</span>
                        <span style={{ color: '#86A3E7' }}>{disabledCount}</span>
                        <span style={{ color: 'black' }}>套</span>
                    </div>
                </Col>
            </Row>
            {/* 表格 */}
            <div style={{ marginTop: 20 }}>
                <h3>已使用试卷分析</h3>
                <Table
                    columns={columns}
                    dataSource={tableData}
                    pagination={pagination}
                    bordered={true}
                    size={'small'}
                    onChange={handleTableChange}
                />
            </div>
        </div>
    );
};

export default withRouter(ExamPaperAnalysisPage);