import { useState, useEffect, useRef, useMemo } from 'react';
import { Row, Col, Button, Table, Select, Timeline, Empty, Spin, Tag, Form, Space, Modal, Image, Input, Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { useInViewport, useScroll } from 'ahooks';
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import Echarts from "@/components/Echarts";
import Echarts2 from '@/pages/report/components/Echarts';
import StudentGroup from '@/components/StudentGroup';
import StudentModal from '@/components/StudentModal';
import TeacherGroup from '@/components/TeacherGroup';
import ScreenPage from "@/components/ScreenPage";
import SchoolChoice from '@/components/SchoolChoice';
import ScoreLineSelect from '@/components/ScoreLineSelect';
import Flex from "@/components/Flex";
import Common from "@/utils/Common";
import {
    getSchoolAnalysis, getSchoolPercentAnalysis, getTeacherAnalysis, getOnlineAnalysis,
    getTopStudentAnalysis, getTeacherSort, getCriticalStudentAnalysis, getBadSubjectStudentAnalysis, getRashStudentAnalysis, getTeacherTrace,
    getTeacherGrade, getSubjectDistribution, getCombinationDistribution, getLittleQuestion, getKnowledgePoint, getSchoolParams, getSingleTeacherZ
    , getOnlineScoreAnalysis
} from '@/apis/leader';
import { getExamRanking, getPercentageRanking, getPercentageRankingView, getParamsRanking, getKnowledgeRanking, getKnowledgeRankingAnalysis } from '@/apis/exam';
import { getExam, getPercent, getParamsType, getSubjectListAll, getSubjectList, getSort, getDataExplain } from '@/apis/common';
import { getPersonalReport, getTemplateDetail } from '@/apis/report';
import { downloadTableData } from '@/apis/download';
import { downloadExcelFile } from '@/utils/file';
import { buildEchartData, removeEmptyChildren, buildBarAndPieOption } from '@/utils/table';
import useCurrentExam from '@/stores/useCurrentExam';
import useUserStore from '@/stores/useUserStore';
import upSrc from "@/assets/image/up.png";
import downSrc from "@/assets/image/down.png";
import editSrc from '@/assets/icon/edit.png';
import downloadSrc from '@/assets/icon/download.png';
import navIconSrc from '@/assets/icon/analysis-navigation-icon.png';
import sectionSrc1 from '@/assets/icon/analysis-catalogue-1.png';
import sectionSrc2 from '@/assets/icon/analysis-catalogue-2.png';
import sectionSrc3 from '@/assets/icon/analysis-catalogue-3.png';
import sectionSrc4 from '@/assets/icon/analysis-catalogue-4.png';
import sectionSrc5 from '@/assets/icon/analysis-catalogue-5.png';
import sectionSrc6 from '@/assets/icon/analysis-catalogue-6.png';
import sectionSrc7 from '@/assets/icon/analysis-catalogue-7.png';
import memoir1Src from '@/assets/image/memoir1.png';
import memoir2Src from '@/assets/image/memoir2.png';
import memoir3Src from '@/assets/image/memoir3.png';
import styles from './index.less';



const AnalysisPage = () => {


    const { setExamName } = useCurrentExam();
    const { user } = useUserStore();

    const [isShow, setIsShow] = useState(false);
    const [params, setParams] = useState({});
    const [subtitle, setSubtitle] = useState('');


    const [expandedKeys, setExpandedKeys] = useState([]);

    const [dataSource, setDataSource] = useState([]);
    const [columns, setColumns] = useState([]);
    const [loading, setLoading] = useState(false);
    const [echartData, setEchartData] = useState({});
    const [lengButton, setLengButton] = useState([]);


    const [expandedKeys1, setExpandedKeys1] = useState([]);

    const [dataSource1, setDataSource1] = useState([]);
    const [columns1, setColumns1] = useState([]);
    const [loading1, setLoading1] = useState(false);
    const [echartData1, setEchartData1] = useState({});
    const [lengButton1, setLengButton1] = useState([]);


    const [dataSource2, setDataSource2] = useState([]);
    const [columns2, setColumns2] = useState([]);
    const [loading2, setLoading2] = useState(false);


    const [dataSource3, setDataSource3] = useState([]);
    const [columns3, setColumns3] = useState([]);
    const [loading3, setLoading3] = useState(false);
    const [echartData3, setEchartData3] = useState({});
    const [lengButton3, setLengButton3] = useState([]);

    const selectButton = ["临界生", "优生劣科"];
    const [activeButtons, setActiveButtons] = useState(selectButton[0]);
    const [selected, setSelected] = useState('critical');

    const [dataSource4, setDataSource4] = useState([]);
    const [columns4, setColumns4] = useState([]);
    const [loading4, setLoading4] = useState(false);
    const [echartData4, setEchartData4] = useState({});
    const [lengButton4, setLengButton4] = useState([]);

    const examRef = useRef(null);
    const examPercentRef = useRef(null);
    const teacherRef = useRef(null);
    const topStudentRef = useRef(null);
    const otherStudentRef = useRef(null);
    const contentRef = useRef(null);
    const comparisonRef = useRef(null);
    const [examInViewport] = useInViewport(examRef);
    const [examPercentInViewport] = useInViewport(examPercentRef);
    const [teacherInViewport] = useInViewport(teacherRef);
    const [topStudentInViewport] = useInViewport(topStudentRef);

    const [otherStudentInViewport] = useInViewport(otherStudentRef);

    const [comparisonInViewport] = useInViewport(comparisonRef);

    const [scoreList, setScoreList] = useState([]);

    // useScroll(contentRef);



    const [isShowExamComparison, setIsShowExamComparison] = useState(false);

    let chartInstance = null;
    const [isShowExamRanking, setIsShowExamRanking] = useState(false);
    const [examList, setExamList] = useState([]);
    const [dataSource5, setDataSource5] = useState([]);
    const [columns5, setColumns5] = useState([]);
    const [loading5, setLoading5] = useState(false);
    const [expandedRowKeys5, setExpandedRowKeys5] = useState([]);
    const [limit, setLimit] = useState(50);
    const chartRef = useRef(null);



    const [tags, setTags] = useState([]);
    const [selectedTags, setSelectedTags] = useState([]);
    const [echartXData, setEchartXData] = useState([]);

    const [mockChartData, setMockChartData] = useState([]);



    let chartInstance2 = null;
    const [expandedRowKeys6, setExpandedRowKeys6] = useState([]);
    const [selectedNavTag, setSelectedNavTag] = useState('');

    const [tags2, setTags2] = useState([]);
    const chartRef2 = useRef(null);
    const [selectedTags2, setSelectedTags2] = useState([]);
    const [echartXData2, setEchartXData2] = useState([]);
    const [mockChartData2, setMockChartData2] = useState([]);

    const [dataSource6, setDataSource6] = useState([]);
    const [columns6, setColumns6] = useState([]);
    const [loading6, setLoading6] = useState(false);

    const [rateList, setRateList] = useState([]);
    const [rate, setRate] = useState();
    const [spin, setSpin] = useState(false);

    let chartInstance3 = null;
    const [tags3, setTags3] = useState([]);
    const chartRef3 = useRef(null);
    const [selectedTags3, setSelectedTags3] = useState('');
    const [echartXData3, setEchartXData3] = useState([]);
    const [mockChartData3, setMockChartData3] = useState([]);

    const [chartTagList, setChartTagList] = useState([]);
    const [chartTag, setChartTag] = useState('');
    const [type, setType] = useState();
    const [spin2, setSpin2] = useState(false);

    const [paramsTypeList, setParamsTypeList] = useState([]);
    const [paramsType, setParamsType] = useState();

    const [rateList2, setRateList2] = useState([]);
    const [rate2, setRate2] = useState();

    const [expandedRowKeys7, setExpandedRowKeys7] = useState([]);

    const [selectedNavTag2, setSelectedNavTag2] = useState('');
    const [selectedNavTag3, setSelectedNavTag3] = useState('');

    const [dataSource7, setDataSource7] = useState([]);
    const [columns7, setColumns7] = useState([]);
    const [loading7, setLoading7] = useState(false);

    const [dataSource8, setDataSource8] = useState([]);
    const [columns8, setColumns8] = useState([]);
    const [loading8, setLoading8] = useState(false);

    const [subjectId8, setSubjectId8] = useState();
    const [subjectName8, setSubjectName8] = useState(null);

    const [echartData8, setEchartData8] = useState({});
    const [lengButton8, setLengButton8] = useState([]);

    const [expandedRowKeys8, setExpandedRowKeys8] = useState([]);


    //选考科目分布分析
    const [dataSource10, setDataSource10] = useState([]);
    const [columns10, setColumns10] = useState([]);
    const [loading10, setLoading10] = useState(false);
    const [echartData10, setEchartData10] = useState({});
    const [echartData11, setEchartData11] = useState({});
    const [lengButton10, setLengButton10] = useState([]);
    const [expandedRowKeys10, setExpandedRowKeys10] = useState([]);
    const [allEchartData, setAllEchartData] = useState({});
    const [selectedNavTag10, setSelectedNavTag10] = useState('');
    const [navTags10, setNavTags10] = useState([]);
    const [selectTag10, setSelectTag10] = useState('');
    const echartRef10 = useRef();


    //选考组合分布分析 
    const [dataSource11, setDataSource11] = useState([]);
    const [columns11, setColumns11] = useState([]);
    const [loading11, setLoading11] = useState(false);
    const [echartData12, setEchartData12] = useState({});
    const [lengButton11, setLengButton11] = useState([]);
    const [expandedRowKeys11, setExpandedRowKeys11] = useState([]);
    const [allEchartData1, setAllEchartData1] = useState({});
    const [navTags11, setNavTags11] = useState([]);
    const [selectTag11, setSelectTag11] = useState('');
    const [echartData17, setEchartData17] = useState({});
    const echartRef11 = useRef();
    const [selectedNavTag11, setSelectedNavTag11] = useState('');


    //考试试卷参数分析 
    const [dataSource12, setDataSource12] = useState([]);
    const [columns12, setColumns12] = useState([]);
    const [loading12, setLoading12] = useState(false);
    const [echartData13, setEchartData13] = useState({});
    const [lengButton12, setLengButton12] = useState([]);
    const [echartData18, setEchartData18] = useState({});
    const [expandedRowKeys12, setExpandedRowKeys12] = useState([]);
    //  const [allEchartData1, setAllEchartData1] = useState({});
    // const [selectedNavTag10, setSelectedNavTag10] = useState('');
    //  const [navTags11, setNavTags11] = useState([]);
    // const [selectTag10, setSelectTag10] = useState('');
    const echartRef12 = useRef();
    //  const [selectedNavTag12, setSelectedNavTag12] = useState('');
    const echartRef18 = useRef();
    const [subjectId12, setSubjectId12] = useState('');
    const [subjectName12, setSubjectName12] = useState(null);



    //考试知识点分析
    const [dataSource13, setDataSource13] = useState([]);
    const [columns13, setColumns13] = useState([]);
    const [loading13, setLoading13] = useState(false);
    const [echartData14, setEchartData14] = useState({});
    const [lengButton13, setLengButton13] = useState([]);
    const [expandedRowKeys13, setExpandedRowKeys13] = useState([]);
    const echartRef13 = useRef();
    const [subjectId13, setSubjectId13] = useState('');
    const [subjectName13, setSubjectName13] = useState(null);



    //知识点对比
    const [dataSource14, setDataSource14] = useState([]);
    const [columns14, setColumns14] = useState([]);
    const [loading14, setLoading14] = useState(false);
    const [subjectId14, setSubjectId14] = useState('');
    const [subjectName14, setSubjectName14] = useState(null);

    const [visible, setVisible] = useState(false);
    const [modalLoading, setModalLoading] = useState(false);
    const [totalDataSource, setTotalDataSource] = useState([]);
    const [originData, setOriginData] = useState([]);


    // 选择模板
    const [templateOpen, setTemplateOpen] = useState(false);
    const [selectTemplate, setSelectTemplate] = useState(null);
    const [selectTemplateName, setSelectTemplateName] = useState(null);
    const [templateList, setTemplateList] = useState([]);
    const [form] = Form.useForm();
    const [showPageList, setShowPageList] = useState([]);


    //对比考试排名区县选择
    const [typeList1, setTypeList1] = useState([]);
    const [selectType1, setSelectType1] = useState('');
    const [allEchartDataRanking, setAllEchartDataRanking] = useState({});

    //对比考试百分比区县选择
    const [typeList2, setTypeList2] = useState([]);
    const [selectType2, setSelectType2] = useState('');
    const [allEchartDataPercent, setAllEchartDataPercent] = useState({});

    //对比考试参数区县选择
    const [typeList3, setTypeList3] = useState([]);
    const [selectType3, setSelectType3] = useState('');
    const [allEchartDataParams, setAllEchartDataParams] = useState({});


    //学校筛选

    const [schoolIds1, setSchoolIds1] = useState([]);
    const [schoolIds2, setSchoolIds2] = useState([]);
    const [schoolIds3, setSchoolIds3] = useState([]);

    //上线情况学校筛选
    const [schoolIds4, setSchoolIds4] = useState([]);
    //教师群体分析学校筛选
    const [schoolIds5, setSchoolIds5] = useState([]);
    //尖子生学校筛选
    const [schoolIds6, setSchoolIds6] = useState([]);
    //其他学生学校筛选
    const [schoolIds7, setSchoolIds7] = useState([]);

    //选考科目分布分析学校筛选
    const [schoolIds8, setSchoolIds8] = useState([]);
    //选考组合分布分析学校筛选
    const [schoolIds9, setSchoolIds9] = useState([]);

    //考试各小题学校筛选
    const [schoolIds10, setSchoolIds10] = useState([]);
    //选考学科知识点分析学校筛选
    const [schoolIds11, setSchoolIds11] = useState([]);

    //对比考试排名情况分析学校筛选
    const [schoolIds12, setSchoolIds12] = useState([]);
    //对比考试百分比情况分析学校筛选
    const [schoolIds13, setSchoolIds13] = useState([]);
    //对比考试参数情况分析学校筛选
    const [schoolIds14, setSchoolIds14] = useState([]);
    //对比考试知识点情况分析学校筛选
    const [schoolIds15, setSchoolIds15] = useState([]);

    //学校参数情况分析
    const [dataSource16, setDataSource16] = useState([]);
    const [columns16, setColumns16] = useState([]);
    const [loading16, setLoading16] = useState(false);

    const [subjectId16, setSubjectId16] = useState('');
    const [subjectName16, setSubjectName16] = useState(null);

    const [echartData16, setEchartData16] = useState({});
    const [lengButton16, setLengButton16] = useState([]);
    const [expandedRowKeys16, setExpandedRowKeys16] = useState([]);
    const echartRef16 = useRef();
    const [responseData16, setResponseData16] = useState({});



    const teacherGroupRef = useRef();

    const [teacherGroupParams, setTeacherGroupParams] = useState({});


    useEffect(() => {
        if (selectType1) {
            if (selectType1 === '人数') {
                setMockChartData(() => {
                    return allEchartDataRanking.num?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                return;
            }
            if (selectType1 === '增长人数') {
                setMockChartData(() => {
                    return allEchartDataRanking?.incr?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                return;
            }
            if (selectType1 === '增幅') {
                setMockChartData(() => {
                    return allEchartDataRanking?.rate?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                return;
            }
        }

    }, [selectType1]);



    useEffect(() => {
        if (selectType2) {
            setMockChartData2(() => {
                return allEchartDataPercent?.[selectType2]?.map(item => {
                    return {
                        name: item?.lineName || '',
                        data: item?.data || [],
                    }
                })
            });

        }

    }, [selectType2]);


    useEffect(() => {
        if (selectType3) {
            if (selectType3 === chartTag) {
                setMockChartData3(() => {
                    return allEchartDataParams.num?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                return;
            }
            if (selectType3 === '增幅数') {
                setMockChartData3(() => {
                    return allEchartDataParams?.incr?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                return;
            }
            if (selectType3 === '增幅') {
                setMockChartData3(() => {
                    return allEchartDataParams?.rate?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                return;
            }
        }

    }, [selectType3]);

    useEffect(() => {


        if (!selectedNavTag11) {
            return;
        }
        const obj = {
            num: allEchartData1?.num?.filter(item => item?.lineName === selectedNavTag11),
            rate: allEchartData1?.rate?.filter(item => item?.lineName === selectedNavTag11),

        };
        setEchartData12(() => {
            return {
                xAxis: {
                    name: "",
                    type: "category",
                    axisTick: { show: false },
                    data: obj.num?.[0]?.xdata,
                },
                yAxis: {
                    name: "",
                },
                tooltip: {
                    show: true,
                },
                yChartData: [
                    {
                        name: '人数',
                        data: obj.num?.[0]?.data
                    }
                ]
            }
        });

        setEchartData17(() => {
            return {
                xAxis: {
                    name: "",
                    type: "category",
                    axisTick: { show: false },
                    data: obj.rate?.[0]?.xdata,
                },
                yAxis: {
                    name: "人数占比",
                },
                tooltip: {
                    show: true,
                },
                yChartData: [
                    {
                        name: '人数占比',
                        data: obj.rate?.[0]?.data
                    }
                ]
            }
        });
    }, [selectedNavTag11]);




    useEffect(() => {
        if (!selectedNavTag10) {
            return;
        }

        const obj = {
            num: allEchartData?.num?.filter(item => item?.lineName === selectedNavTag10),
            rate: allEchartData?.rate?.filter(item => item?.lineName === selectedNavTag10),

        };

        setEchartData10(() => {
            return {
                xAxis: {
                    name: "",
                    type: "category",
                    axisTick: { show: false },
                    data: obj.num?.[0]?.xdata,
                },
                yAxis: {
                    name: "",
                },
                tooltip: {
                    show: true,
                },
                yChartData: [
                    {
                        name: '人数',
                        data: obj.num?.[0]?.data
                    }
                ]
            }
        });

        setEchartData11(() => {
            return {
                xAxis: {
                    name: "",
                    type: "category",
                    axisTick: { show: false },
                    data: obj.rate?.[0]?.xdata,
                },
                yAxis: {
                    name: "人数占比",
                },
                tooltip: {
                    show: true,
                },
                yChartData: [
                    {
                        name: '人数占比',
                        data: obj.rate?.[0]?.data
                    }
                ]
            }
        });
    }, [selectedNavTag10]);








    const studentGroupRef = useRef();


    const [title, setTitle] = useState('');

    const [studentGroupParams, setStudentGroupParams] = useState({});



    const [rankingList, setRankingList] = useState([]);
    const [selectRaking, setSelectRaking] = useState();


    const [limit2, setLimit2] = useState(50);
    const [rateOn, setRateOn] = useState(5);
    const [rateUnder, setRateUnder] = useState(5);

    const [up, setUp] = useState(610);
    const [down, setDown] = useState(600);


    const [subjectName, setSubjectName] = useState('');

    const echartRef1 = useRef();
    const echartRef2 = useRef();
    const echartRef3 = useRef();
    const echartRef4 = useRef();

    const echartRef8 = useRef();

    const [echartImg, setEchartImg] = useState();


    const studentRef = useRef();
    const [studentParams, setStudentParams] = useState({});

    const mockDataSource = [
        {
            id: 1,
            name: "王斌",
            area: "丽水中学",
            avg: 86.5,
            ranking: 1
        },
        {
            id: 2,
            name: "李倩",
            area: "青田中学",
            avg: 85,
            ranking: 2
        }
    ];

    const mockColumns = [
        {
            title: "教师姓名",
            dataIndex: 'name',
            key: 'name',
            align: "center",
            render(value, record) {
                return (<Button type='link' style={{ color: "#4ABB6A" }} onClick={() => {
                    setOpen(true);
                    setRecord(record);

                }}>{value}</Button>)
            }
        },
        {
            title: "所属学校",
            dataIndex: 'area',
            key: 'area',
            align: "center",
        },
        {
            title: "所属学生均分",
            dataIndex: 'avg',
            key: 'avg',
            align: "center",
        },
        {
            title: "所属学生均分排名",
            dataIndex: 'ranking',
            key: 'ranking',
            align: "center",
        }
    ];


    const [open, setOpen] = useState(false);


    const [record, setRecord] = useState({});


    const [memoirList, setMemoirList] = useState([
        {
            id: 1,
            text: '高一上*语文*沁园春 长沙',
            url: memoir1Src,
        },
        {
            id: 2,
            text: '高一上*语文*鸿门宴',
            url: memoir2Src,
        },
        {
            id: 3,
            text: '高一下*语文*赤壁赋',
            url: memoir3Src,
        }
    ]);

    const [selectMemoirId, setSelectMemoirId] = useState(1);

    const timer = useRef(null);

    const [allSubjectList, setAllSubjectList] = useState([]);

    const [subjectId1, setSubjectId1] = useState("");
    const [subjectId2, setSubjectId2] = useState("");
    const [subjectId3, setSubjectId3] = useState("");
    const [subjectId4, setSubjectId4] = useState("");
    const [subjectId5, setSubjectId5] = useState("");
    const [subjectId6, setSubjectId6] = useState("");


    const [subjectName1, setSubjectName1] = useState(null);
    const [subjectName2, setSubjectName2] = useState(null);
    const [subjectName3, setSubjectName3] = useState(null);
    const [subjectName4, setSubjectName4] = useState(null);
    const [subjectName5, setSubjectName5] = useState(null);
    const [subjectName6, setSubjectName6] = useState(null);

    const [isShowExamName, setIsShowExamName] = useState(true);

    const [singleSubjectList, setSingleSubjectList] = useState([]);
    const [subjectId7, setSubjectId7] = useState("");
    const [subjectName7, setSubjectName7] = useState(null);

    const [sortList, setSortList] = useState([]);
    const [selectSort, setSelectSort] = useState();


    const [sortParamsList, setSortParamsList] = useState([]);
    const [selectSortParams, setSelectSortParams] = useState();
    const [paramsLimit, setParamsLimit] = useState();

    const [dataExplanation, setDataExplanation] = useState([]);


    const [topStudentLimit, setTopStudentLimit] = useState(50);


    const [examSortList, setExamSortList] = useState([]);
    const [examSelectSort, setExamSelectSort] = useState();

    const [criticalScore, setCriticalScore] = useState();



    //导出表格相关
    const [responseData1, setResponseData1] = useState({});
    const [responseData2, setResponseData2] = useState({});
    const [responseData3, setResponseData3] = useState({});
    const [responseData4, setResponseData4] = useState({});
    const [responseData5, setResponseData5] = useState({});
    const [responseData6, setResponseData6] = useState({});
    const [responseData7, setResponseData7] = useState({});
    const [responseData8, setResponseData8] = useState({});
    const [responseData9, setResponseData9] = useState({});
    const [responseData10, setResponseData10] = useState({});
    const [responseData11, setResponseData11] = useState({});
    const [responseData12, setResponseData12] = useState({});
    const [responseData13, setResponseData13] = useState({});
    const [responseData14, setResponseData14] = useState({});

    const selectMemoir = useMemo(() => {
        return memoirList.find(item => item.id === selectMemoirId);
    }, [selectMemoirId])

    const intersectionData = useMemo(() => {
        return mockChartData?.filter((item) =>
            selectedTags.includes(item.name),
        );
    }, [selectedTags, mockChartData]);


    const intersectionData2 = useMemo(() => {
        return mockChartData2?.filter((item) =>
            selectedTags2.includes(item.name),
        );
    }, [selectedTags2, mockChartData2]);

    const intersectionData3 = useMemo(() => {
        return mockChartData3?.filter((item) =>
            selectedTags3.includes(item.name),
        );
    }, [selectedTags3, mockChartData3]);

    const labelOption = {
        show: true,
        position: 'top',
        distance: 24,
        align: 'center',
        verticalAlign: 'middle',
        formatter: (params) => {
            return `${params.value}`
        },
        fontSize: 12,
        rich: {
            name: {}
        }
    };


    const commonSeries = {
        type: 'line',
        barGap: 0,
        label: labelOption,
        emphasis: {
            focus: 'series'
        },
    };

    const handleTagClick = (tag) => {
        if (selectedTags.includes(tag)) {
            // 如果 Tag 已经选中，则移除
            setSelectedTags((prev) => {
                if (prev.length === 1) {
                    return prev;
                }
                return selectedTags.filter((item) => item !== tag)
            });


        } else {
            // 如果 Tag 未选中，则添加
            setSelectedTags([...selectedTags, tag]);
        }

    };


    const handleNavTagClick = (tag) => {
        setSelectedNavTag(tag?.label || '');
        setRate(tag?.value || '');

    };

    const handleTagClick2 = (tag) => {
        if (selectedTags2.includes(tag)) {
            // 如果 Tag 已经选中，则移除
            setSelectedTags2((prev) => {
                if (prev.length === 1) {
                    return prev;
                }
                return selectedTags2.filter((item) => item !== tag)
            });

        } else {
            // 如果 Tag 未选中，则添加
            setSelectedTags2([...selectedTags2, tag]);
        }

    };



    const handleNavTagClick2 = (tag) => {
        setSelectedNavTag2(tag?.label || '');
        setParamsType(tag?.value || '');

    };

    const handleNavTagClick3 = (tag) => {
        setSelectedNavTag3(tag?.label || '');
        setRate2(tag?.value || '');

    };

    const handleNavTagClick4 = (tag) => {
        setChartTag(tag?.label || '');
        setType(tag?.value || '');

    };


    const handleRakingClick = (item) => {
        setSelectRaking(item?.value);
        setLimit(item?.value);

    };

    useEffect(() => {
        percentListInit();
        paramsTypeInit();
        allSubjectInit();
        singleSubjectInit();
        getSortInit();
        getPersonalReportInit();

        return () => {
            clearTimeout(timer.current);
        };
    }, []);

    const handleTagClick3 = (tag) => {
        // setSelectedTags3(tag);
        if (selectedTags3.includes(tag)) {
            // 如果 Tag 已经选中，则移除
            setSelectedTags3((prev) => {
                if (prev.length === 1) {
                    return prev;
                }
                return selectedTags3.filter((item) => item !== tag)
            });

        } else {
            // 如果 Tag 未选中，则添加
            setSelectedTags3([...selectedTags3, tag]);
        }

    };


    useEffect(() => {
        if (!echartXData.length) {
            return;
        }
        if (chartRef.current) {
            // 初始化图表
            chartInstance = echarts.init(chartRef.current);

            // 设置配置项
            const option = {
                // dataZoom: [
                //     {
                //         type: 'slider', // 滑动条型数据区域缩放组件
                //         show: true,
                //         start: 0, // 初始起点
                //         end: 30, // 初始终点
                //         handleSize: 8,
                //         xAxisIndex: [0]
                //     },
                // ],
                title: {
                    // 添加标题配置
                    text: `${subtitle}${subjectName4}*对比考试排名情况分析-图表`,
                    left: 'center',
                    top: 0,
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold',
                    },
                },
                axisLabel: {
                    rotate: 35,
                    interval: 0,
                    fontSize: 9,
                    autoSkip: true,
                },
                barGap: '10%',
                barWidth: "10%",
                xAxis: {
                    name: '考试',
                    type: 'category',
                    axisTick: { show: false },
                    data: echartXData,
                    axisLabel: {
                        rotate: echartData?.length > 6 ? 45 : 0,
                        interval: 0,
                        textStyle: {
                            fontSize: 10,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 16,
                    }
                },
                grid: {
                    containLabel: true,
                    top: "20%"
                },
                yAxis: {
                    name: "",
                    axisLabel: {
                        textStyle: {
                            fontSize: 16,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 16,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    type: "scroll",
                    data: tags,
                    right: 10, // 设置右侧边距
                    top: 16, // 设置顶部边距
                    selectedMode: false,
                    textStyle: {
                        fontSize: 12
                    }
                },
                series: intersectionData.map((item) => ({
                    ...commonSeries,
                    name: item?.name || '',
                    data: item?.data || [],

                }))
            };

            chartInstance.setOption(option);

            // 响应式调整
            const resizeHandler = () => chartInstance?.resize();
            window.addEventListener('resize', resizeHandler);

            // 清理函数
            return () => {
                window.removeEventListener('resize', resizeHandler);
                chartInstance?.dispose();
            };
        }
    }, [selectedTags, echartXData, mockChartData]);



    useEffect(() => {
        if (!echartXData2.length) {
            return;
        }
        if (chartRef2.current) {

            // 初始化图表
            chartInstance2 = echarts.init(chartRef2.current);

            // 设置配置项
            const option = {
                // dataZoom: [
                //     {
                //         type: 'slider', // 滑动条型数据区域缩放组件
                //         show: true,
                //         start: 0, // 初始起点
                //         end: 30, // 初始终点
                //         handleSize: 8,
                //         xAxisIndex: [0]
                //     },
                // ],
                title: {
                    // 添加标题配置
                    text: `${subtitle}${subjectName5}*对比考试百分比情况分析-图表`,
                    left: 'center',
                    top: 0,
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold',
                    },
                },
                axisLabel: {
                    rotate: 35,
                    interval: 0,
                    fontSize: 9,
                    autoSkip: true,
                },
                barGap: '10%',
                barWidth: "10%",
                xAxis: {
                    name: '考试',
                    type: 'category',
                    axisTick: { show: false },
                    data: echartXData2,
                    axisLabel: {
                        rotate: echartXData2?.length > 6 ? 45 : 0,
                        interval: 0,
                        textStyle: {
                            fontSize: 10,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 16,
                    }
                },
                grid: {
                    containLabel: true,
                },
                yAxis: {
                    name: "人",
                    axisLabel: {
                        textStyle: {
                            fontSize: 16,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 16,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    type: "scroll",
                    data: tags2,
                    right: 10, // 设置右侧边距
                    top: 24, // 设置顶部边距
                    selectedMode: false,
                    textStyle: {
                        fontSize: 16
                    }
                },
                series: intersectionData2?.map((item) => ({
                    ...commonSeries,
                    name: item.name,
                    data: item.data,
                }))
            };

            chartInstance2.setOption(option);

            // 响应式调整
            const resizeHandler = () => chartInstance2?.resize();
            window.addEventListener('resize', resizeHandler);

            // 清理函数
            return () => {
                window.removeEventListener('resize', resizeHandler);
                chartInstance2?.dispose();
            };
        }
    }, [selectedTags2, echartXData2, mockChartData2]);


    useEffect(() => {

        if (!echartXData3.length) {
            return;
        }
        if (chartRef3.current) {
            // 初始化图表
            chartInstance3 = echarts.init(chartRef3.current);

            // 设置配置项
            const option = {
                // dataZoom: [
                //     {
                //         type: 'slider', // 滑动条型数据区域缩放组件
                //         show: true,
                //         start: 0, // 初始起点
                //         end: 30, // 初始终点
                //         handleSize: 8,
                //         xAxisIndex: [0]
                //     },
                // ],
                title: {
                    // 添加标题配置
                    text: `${subtitle}${subjectName6}*对比考试参数情况分析-图表`,
                    left: 'center',
                    top: 0,
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold',
                    },
                },
                axisLabel: {
                    rotate: 35,
                    interval: 0,
                    fontSize: 9,
                    autoSkip: true,
                },
                xAxis: {
                    name: '考试',
                    type: 'category',
                    axisTick: { show: false },
                    data: echartXData3,
                    axisLabel: {
                        rotate: echartXData3?.length > 6 ? 45 : 0,
                        interval: 0,
                        textStyle: {
                            fontSize: 10,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 16,
                    }
                },
                grid: {
                    containLabel: true,
                },
                yAxis: {
                    name: "",
                    axisLabel: {
                        textStyle: {
                            fontSize: 16,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 16,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    type: "scroll",
                    data: tags3,
                    right: 10, // 设置右侧边距
                    top: 24, // 设置顶部边距
                    selectedMode: false,
                    textStyle: {
                        fontSize: 12
                    }
                },
                barGap: '10%',
                barWidth: "10%",
                series: intersectionData3.map((item) => ({
                    ...commonSeries,
                    name: item.name,
                    data: item.data,
                }))
            };

            chartInstance3.setOption(option);

            // 响应式调整
            const resizeHandler = () => chartInstance3?.resize();
            window.addEventListener('resize', resizeHandler);

            // 清理函数
            return () => {
                window.removeEventListener('resize', resizeHandler);
                chartInstance3?.dispose();
            };
        }
    }, [selectedTags3, echartXData3, mockChartData3]);


    useEffect(() => {
        if (params?.examId) {
            getDataExplainInit();
        }
    }, [params?.examId])

    useEffect(() => {

        if (!Object.values(params).length > 0 || !subjectId8) {
            return;
        }
        onlineInit();

    }, [params?.examId, schoolIds4, subjectId8, scoreList]);

    useEffect(() => {

        if (!Object.values(params).length > 0 || !subjectId1) {
            return;
        }
        init();

    }, [params?.examId, schoolIds1, subjectId1]);


    useEffect(() => {

        if (!Object.values(params).length > 0 || !subjectId2) {
            return;
        }
        percentInit();

    }, [params?.examId, schoolIds2, subjectId2]);

    useEffect(() => {

        if (!Object.values(params).length > 0 || !subjectId3) {
            return;
        }
        schoolParamsInit();

    }, [params?.examId, schoolIds3, subjectId3]);

    useEffect(() => {

        if (!Object.values(params).length > 0 || !subjectId7) {
            return;
        }
        teacherInit();

    }, [params?.examId, schoolIds5, subjectId7, selectSort]);


    useEffect(() => {

        if (!Object.values(params).length > 0 || !subjectId3) {
            return;
        }
        topStudentInit();

    }, [params?.examId, schoolIds6, subjectId3, topStudentLimit]);


    useEffect(() => {
        if (!Object.values(params).length > 0 || !subjectId3) {
            return;
        }
        otherStudentInit();

    }, [params?.examId, schoolIds7, subjectId3, selected, limit2, rateOn, rateUnder, up, down]);



    useEffect(() => {
        if (!Object.values(params).length > 0 || !examList.length > 0 || !subjectId4) {
            return;
        }
        rankingExamInit();

    }, [params?.examId, schoolIds12, subjectId4, examList, examSelectSort]);


    useEffect(() => {
        if (!Object.values(params).length > 0 || !examList.length > 0 || !subjectId5) {
            return;
        }
        examPercentInit();

    }, [params?.examId, schoolIds13, examList, limit, rate, subjectId5]);



    useEffect(() => {
        if (!Object.values(params).length > 0 || !examList.length > 0 || !subjectId5) {
            return;
        }
        viewInit();

    }, [params?.examId, subjectId5, schoolIds13, examList, limit]);


    useEffect(() => {
        if (!Object.values(params).length > 0 || !examList.length > 0 || !subjectId6) {
            return;
        }
        examParamsInit();

    }, [params?.examId, subjectId6, schoolIds14, examList, paramsLimit, rate2, paramsType]);

    useEffect(() => {
        if (type || subjectId6) {
            charInit();
        }

    }, [params?.examId, subjectId6, schoolIds14, examList, paramsLimit, type]);

    useEffect(() => {
        if (!Object.values(params).length > 0) {
            return;
        }
        selectedSubjectInit();

    }, [params?.examId, schoolIds8]);

    useEffect(() => {
        if (!Object.values(params).length > 0) {
            return;
        }
        combinationInit();

    }, [params?.examId, schoolIds9]);
    useEffect(() => {
        if (!Object.values(params).length > 0 || !subjectId12) {
            return;
        }
        littleQuestionInit();

    }, [params?.examId, schoolIds10, subjectId12]);


    useEffect(() => {
        if (!Object.values(params).length > 0 || !subjectId13) {
            return;
        }
        knowledgePointInit();

    }, [params?.examId, schoolIds11, subjectId13]);

    useEffect(() => {
        if (!subjectId14 || !params?.examId) {
            return;
        }
        knowledgeRankingInit();

    }, [examList, subjectId14, params?.examId, schoolIds15]);


    useEffect(() => {

        if (visible) {
            getKnowledgeRankingAnalysisDetail();
        } else {
            setTotalDataSource([]);
            setModalLoading(false);
            setOriginData([]);
        }

    }, [visible, record?.type, record?.value]);

    useEffect(() => {
        if (!selectTemplate) {
            return;
        }

        selectCurrentTemplate();

    }, [selectTemplate]);



    const selectCurrentTemplate = async () => {
        try {
            const res = await getTemplateDetail({ id: selectTemplate });
            if (res.code === 200) {
                setShowPageList(res?.data?.reportItemList || []);

            }
        } catch (error) {
            console.log(error, 'select-current-template-error');

        }
    };

    const init = async () => {
        try {
            setLoading(true);
            const res = await getSchoolAnalysis({
                ...params,
                subjectId: subjectId1,
                schools: schoolIds1
            });
            if (res?.code === 200) {
                setLoading(false);
                setResponseData2(res);
                const list = removeEmptyChildren(res.data);
                setDataSource(list);
                if (!res?.columnDiagramResult?.num?.length || !res?.columnDiagramResult) {
                    return;
                }
                const data = buildEchartData(res?.columnDiagramResult?.num);
                setExpandedKeys([res?.data?.[0]?.id]);
                setEchartData(data);
                setLengButton(res?.columnDiagramResult?.num?.map(item => item?.lineName));
                setColumns(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: item?.label === '区县' ? 300 : 200,
                            children: item?.children?.map(element => {
                                if (element?.label === '人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                setTitle(text?.typeDisc);
                                                studentGroupRef.current?.openModal();
                                                setStudentGroupParams({
                                                    examId: params?.examId,
                                                    students: text?.data
                                                });

                                            }}>{text?.value}</Button>
                                        ),
                                    }
                                }
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })

                        }
                    })

                });
            }
            setLoading(false);
        } catch (error) {
            setLoading(false);
            console.log(error, 'init-error');

        }
    };


    const percentInit = async () => {
        try {
            setLoading1(true);
            const res = await getSchoolPercentAnalysis({
                ...params,
                subjectId: subjectId2, schools: schoolIds2

            });
            if (res?.code === 200) {
                setLoading1(false);
                setResponseData3(res);
                setExpandedKeys1([res?.data?.[0]?.id]);
                const list = removeEmptyChildren(res.data);
                setDataSource1(list);
                const data = buildEchartData(res?.columnDiagramResult?.num);
                setEchartData1(data);
                setLengButton1(res?.columnDiagramResult?.num?.map(item => item?.lineName) || []);
                setColumns1(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 300,
                            children: item?.children?.map(element => {
                                if (element?.label === '人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        width: 100,
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                setTitle(text?.typeDisc);
                                                studentGroupRef.current?.openModal();
                                                setStudentGroupParams({
                                                    examId: params?.examId,
                                                    students: text?.data
                                                });
                                            }}>{text?.value}</Button>
                                        ),
                                    }
                                }
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    width: element?.label === '人数排名' ? 100 : 150,
                                    align: "center",
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })
                        }
                    })

                });
            }
            setLoading1(false);
        } catch (error) {
            setLoading1(false);
            console.log(error, 'init-error');

        }
    };


    const schoolParamsInit = async () => {
        try {
            setLoading16(true);
            const res = await getSchoolParams({
                ...params,
                subjectId: subjectId16,
                schools: schoolIds3
            });
            if (res?.code === 200) {
                setLoading16(false);
                setResponseData16(res);

                const data = {
                    xAxis: {
                        name: "地区",
                        type: "category",
                        axisTick: { show: false },
                        data: res?.columnDiagramResult?.avg?.[0]?.xdata,
                    },
                    tooltip: {
                        show: true,
                    },
                    yAxis: { name: "" },
                    yChartData: Object.entries(res?.columnDiagramResult).map(([_, items]) => ({
                        name: items?.[0]?.lineName,
                        data: items?.[0].data
                    })),
                }

                setEchartData16(data);
                setLengButton16(() => {
                    return Object.entries(res?.columnDiagramResult).map(([_, items]) => (items?.[0]?.lineName))
                });
                setExpandedRowKeys16([res?.data?.[0]?.id]);
                setColumns16(() => {
                    return res?.columns?.map(item => {


                        if (item?.label === '考试人数') {
                            return {
                                title: item?.label,
                                dataIndex: item?.prop,
                                width: 140,
                                align: "center",
                                render: (_, record) => (
                                    <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                        setTitle(record?.num?.typeDisc);
                                        studentGroupRef.current?.openModal();
                                        setStudentGroupParams({
                                            examId: params?.examId,
                                            students: record?.num?.data
                                        });
                                    }}>{record?.num?.value}</Button>
                                ),
                            }
                        }
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: item?.label === '区县' ? 300 : 140,
                            sorter: item?.label !== '区县' ? (a, b) => a[item?.prop] - b[item?.prop] : false
                        }
                    })
                });
                setDataSource16(res?.data);


                return;
            }
            setLoading16(false);
        } catch (error) {
            setLoading16(false);
            console.log(error, 'paramInit-error');

        }
    };

    const teacherInit = async () => {
        setLoading2(true);
        try {
            const res = await getTeacherSort({
                ...params,
                // limit: 200,
                subjectId: subjectId7,
                limitStudent: selectSort,
                schools: schoolIds5
            });
            if (res.code === 200) {
                setResponseData4(res);
                setLoading2(false);
                setDataSource2(res?.data || []);
                setColumns2(() => {
                    return res?.columns?.map(item => {
                        if (item?.label === '教师姓名') {
                            return {
                                title: item?.label,
                                dataIndex: item?.prop,
                                align: "center",
                                render: (_, record) => {
                                    return (<Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                        // console.log(record, 'record');
                                        // updateModal(record, { ...params, subjectId: subjectId7 });
                                        setTeacherGroupParams({
                                            ...params,
                                            subjectId: subjectId7
                                        });
                                        setRecord(record);
                                        teacherGroupRef.current?.openModal();

                                    }}>{record?.name}</Button>)
                                }
                            }
                        }
                        if (['教师姓名', '所属学校'].includes(item?.label)) {
                            return {
                                title: item?.label,
                                dataIndex: item?.prop,
                                align: "center",
                            }
                        }
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            sorter: (a, b) => a[item?.prop] - b[item?.prop],
                        }
                    })
                })
            }
            setLoading2(false);
        } catch (error) {
            setLoading2(false);
            console.log(error, 'teacher-error');
        }

    };


    const topStudentInit = async () => {

        try {
            setLoading3(true);
            const res = await getTopStudentAnalysis({
                ...params,
                subjectId: subjectId3,
                limit: topStudentLimit,
                schools: schoolIds6
            });
            if (res.code === 200) {
                setLoading3(false);
                setResponseData5(res);
                setLengButton3([res?.columnDiagramResult?.rate?.[0]?.lineName, res?.columnDiagramResult?.num?.[0]?.lineName]);
                const option = buildBarAndPieOption(res?.columnDiagramResult);
                setEchartData3(option);

                setDataSource3(res?.data || []);
                setColumns3(() => {
                    return res?.columns?.map(item => {
                        if (item?.label === '学生姓名') {
                            return {
                                title: item?.label,
                                dataIndex: item?.prop,
                                align: "center",
                                width: 120,
                                render: (value, record) => {


                                    return <Button type="link" onClick={() => {
                                        setStudentParams({
                                            studentName: record?.name,
                                            studentId: record?.studentId,
                                            examId: params?.examId,
                                            school: record?.school
                                        });
                                        timer.current = setTimeout(() => {
                                            studentRef?.current?.openModal();
                                        }, 0);


                                    }} style={{ color: '#4ABB6A' }}>{value}</Button>
                                }
                            }
                        }
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 140,
                            children: item?.children?.map(element => {
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    width: 70,
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })
                        }
                    })
                })

            }
            setLoading3(false);

        } catch (error) {
            setLoading3(false);
            console.log(error, 'student-error');
        }
    };

    const otherStudentInit = async () => {
        const API = {
            critical: getCriticalStudentAnalysis,
            badSubject: getBadSubjectStudentAnalysis,
            rash: getRashStudentAnalysis,
        };

        try {
            setLoading4(true);
            const res = await API?.[selected]({
                ...params,
                limit: limit2,
                rateOn: selected === 'critical' ? rateOn : up,
                rateUnder: selected === 'critical' ? rateUnder : down,
                subjectId: subjectId3,
                schools: schoolIds7
                // ...otherParams
            });
            if (res?.code === 200) {
                if (selected === 'critical') {
                    setCriticalScore(res?.name);
                }
                setResponseData6(res);
                setLoading4(false);
                setLengButton4([res?.columnDiagramResult?.rate?.[0]?.lineName, res?.columnDiagramResult?.num?.[0]?.lineName])
                const option = buildBarAndPieOption(res?.columnDiagramResult);
                setEchartData4(option);
                setDataSource4(res?.data || []);
                setColumns4(() => {

                    return res?.columns?.map(item => {
                        if (item?.label === '学生姓名') {
                            return {
                                title: item?.label,
                                dataIndex: item?.prop,
                                align: "center",
                                width: 120,
                                render: (value, record) => {


                                    return <Button type="link" onClick={() => {
                                        setStudentParams({
                                            studentName: record?.name,
                                            studentId: record?.studentId,
                                            examId: params?.examId,
                                            school: record?.school
                                        });
                                        timer.current = setTimeout(() => {
                                            studentRef?.current?.openModal();
                                        }, 0);


                                    }} style={{ color: '#4ABB6A' }}>{value}</Button>
                                }
                            }
                        }
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 140,
                            children: item?.children?.map(element => {
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    width: 100,
                                    sorter: element?.label !== "标签" ? (a, b) => a[element?.prop] - b[element?.prop] : false,
                                }
                            })
                        }
                    })
                })

            }
            setLoading4(false);

        } catch (error) {
            console.log(error, 'student-error');
        }
    };

    const rankingExamInit = async () => {
        setLoading5(true);
        try {
            const res = await getExamRanking({
                ...params,
                examIds: examList.map(item => item.id),
                limit: examSelectSort,
                subjectId: subjectId4,
                schools: schoolIds12
            });
            if (res.code === 200) {
                setResponseData11(res);
                setLoading5(false);
                setDataSource5(res?.data || []);
                setExpandedRowKeys5([res?.data?.[0]?.id]);
                setTags(res?.columnDiagramResult?.num?.map(item => item?.lineName) || []);
                setSelectedTags([res?.columnDiagramResult?.num?.[0]?.lineName || '']);
                setTypeList1(['人数', '增长人数', '增幅']);
                setSelectType1('人数');
                setEchartXData(res?.columnDiagramResult?.num?.[0]?.xdata || []);
                setAllEchartDataRanking(res?.columnDiagramResult);
                setMockChartData(() => {

                    return res?.columnDiagramResult?.num?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                setColumns5(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: item.label === "考试人数" ? 80 : item?.label === "区县" ? 300 : 240,
                            children: item?.children?.map(element => {
                                if (element?.label === '人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        width: 120,
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                const examId = element?.prop?.split('-')[1];
                                                setTitle(text?.typeDisc);
                                                studentGroupRef.current?.openModal();
                                                setStudentGroupParams({
                                                    examId,
                                                    students: text?.data
                                                });

                                            }}>{text?.value}</Button>
                                        ),
                                    }
                                }
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    width: 120,
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })

                        }
                    })
                })
                return;
            }
            setLoading(false);

        } catch (error) {
            setLoading5(false);
            console.log(error, 'exam-ranking-error');

        }
    };


    const percentListInit = async () => {
        try {
            const percent = await getPercent();
            if (percent.code === 200) {
                setRateList(percent?.data || []);
                setRate(percent?.data?.[0]?.value || '');
                setSelectedNavTag(percent?.data?.[0]?.label || '');
                setRateList2(percent?.data || []);
                setRate2(percent?.data?.[0]?.value || '');
                setSelectedNavTag3(percent?.data?.[0]?.label || '')
            }
        } catch (error) {
            console.log(error, 'percent-init-error');

        }
    };

    const paramsTypeInit = async () => {
        try {
            const params = await getParamsType();
            if (params.code === 200) {
                setParamsTypeList(params?.data || []);
                setParamsType(params?.data?.[0]?.value || '');
                setSelectedNavTag2(params?.data?.[0]?.label || '');
                setChartTagList(params?.data || []);
                setChartTag(params?.data?.[0]?.label || '');
                setType(params?.data?.[0]?.value || '')

            }
        } catch (error) {
            console.log(error, 'params-init-error');
        }
    };




    const examPercentInit = async () => {
        setLoading6(true);
        try {
            const res = await getPercentageRanking({
                ...params,
                examIds: examList.map(item => item.id),
                limit,
                rate,
                subjectId: subjectId5,
                schools: schoolIds13
            });

            if (res.code === 200) {
                setResponseData12(res);
                setLoading6(false);
                setDataSource6(res?.data || []);
                setExpandedRowKeys6([res?.data?.[0]?.id]);
                setColumns6(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: item?.label === '人数' ? 80 : item?.label === '区县' ? 300 : 200,
                            children: item?.children?.map(element => {
                                if (element?.label === '人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        width: 80,
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                const examId = element?.prop?.split('-')[1];
                                                setTitle(text?.typeDisc);
                                                studentGroupRef.current?.openModal();
                                                setStudentGroupParams({
                                                    examId,
                                                    students: text?.data
                                                });

                                            }}>{text?.value}</Button>
                                        ),
                                    }
                                }
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    width: 80,
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })

                        }
                    })
                })
                return;
            }
            setLoading6(false);

        } catch (error) {
            setLoading6(false);
            console.log(error, 'exam-ranking-error');

        }
    };


    const viewInit = async () => {
        setSpin(true);
        try {

            const res = await getPercentageRankingView({
                ...params,
                examIds: examList.map(item => item.id),
                limit,
                subjectId: subjectId5,
                schools: schoolIds13
            });
            if (res.code === 200) {
                setSpin(false);
                let list = Object.keys(res?.columnDiagramResult || {});
                setTypeList2(list);
                setSelectType2(list?.[0]);
                setAllEchartDataPercent(res?.columnDiagramResult || {});
                const element = res?.columnDiagramResult?.[list?.[0]];
                const label = element?.map(item => item?.lineName);
                setTags2(label);
                setSelectedTags2([label?.[0]]);
                setEchartXData2(element?.[0]?.xdata || []);


                setMockChartData2(() => {
                    return element?.map(item => {
                        return {
                            name: item?.lineName,
                            data: item?.data
                        }
                    });
                })
                // setTags2(list);
                // setSelectedTags2([list?.[0]]);
                // const list2 = Object.values(res?.columnDiagramResult || {}).filter((item) => item != null);
                // if (list2.length > 0) {
                //     setEchartXData2(list2?.[0]?.[0]?.xdata);
                //     setMockChartData2(() => {
                //         return Object.entries(res?.columnDiagramResult || {}).map(([name, items]) => ({
                //             name,
                //             data: items[0].data
                //         }));
                //     });


                // }
            }
            setSpin(false);

        } catch (error) {
            setSpin(false);
            console.log(error, 'ranking-view-init-error');

        }
    }

    const examParamsInit = async () => {
        setLoading7(true);
        try {
            const res = await getParamsRanking({
                ...params,
                examIds: examList.map(item => item.id),
                limit: paramsLimit,
                // rate: rate2,
                type: paramsType,
                subjectId: subjectId6,
                schools: schoolIds14

            });

            if (res.code === 200) {
                setResponseData13(res);
                setLoading7(false);
                setDataSource7(res?.data || []);
                setExpandedRowKeys7([res?.data?.[0]?.id]);
                setColumns7(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: item?.label === '平均分' ? 90 : item?.label === '区县' ? 300 : 180,
                            children: item?.children?.map(element => {
                                if (element?.label === '人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        width: 80,
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                const examId = element?.prop?.split('-')[1];
                                                setTitle(text?.typeDisc);
                                                studentGroupRef.current?.openModal();
                                                setStudentGroupParams({
                                                    examId,
                                                    students: text?.data
                                                });

                                            }}>{text?.value}</Button>
                                        ),
                                    }
                                }
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    width: 80,
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })

                        }
                    })
                })
                return;
            }
            setLoading7(false);

        } catch (error) {
            setLoading7(false);
            console.log(error, 'exam-ranking-error');

        }
    }


    const charInit = async () => {
        setSpin2(true);
        try {
            const res = await getParamsRanking({
                ...params,
                examIds: examList.map(item => item.id),
                limit: paramsLimit,
                // rate: 100,
                type,
                subjectId: subjectId6,
                schools: schoolIds14
            });
            if (res.code === 200) {
                setSpin2(false);
                if (Object.values(res?.columnDiagramResult)?.length) {
                    setAllEchartDataParams(res?.columnDiagramResult || {});

                    setTypeList3([chartTag, '增幅数', '增幅']);
                    setSelectType3(chartTag);
                    setTags3(res?.columnDiagramResult?.num?.map(item => item?.lineName));
                    setSelectedTags3([res?.columnDiagramResult?.num?.[0]?.lineName]);
                    setEchartXData3(res?.columnDiagramResult?.num?.[0]?.xdata);

                    setMockChartData3(() => {
                        return res?.columnDiagramResult?.num?.map(item => {
                            return {
                                name: item?.lineName,
                                data: item?.data,
                            }
                        });
                    });
                }
            }
        } catch (error) {
            setSpin2(false);
            console.log(error, 'exam-ranking-error');
        }
    }

    const allSubjectInit = async () => {
        try {
            const res = await getSubjectListAll();
            if (res?.code === 200) {
                setSubjectId1(res?.data?.[0]?.id || '');
                setSubjectId2(res?.data?.[0]?.id || '');
                setSubjectId3(res?.data?.[0]?.id || '');
                setSubjectId4(res?.data?.[0]?.id || '');
                setSubjectId5(res?.data?.[0]?.id || '');
                setSubjectId6(res?.data?.[0]?.id || '');
                setSubjectId8(res?.data?.[0]?.id || '');
                setSubjectName1(res?.data?.[0]?.cname || null);
                setSubjectName2(res?.data?.[0]?.cname || null);
                setSubjectName3(res?.data?.[0]?.cname || null);
                setSubjectName4(res?.data?.[0]?.cname || null);
                setSubjectName5(res?.data?.[0]?.cname || null);
                setSubjectName6(res?.data?.[0]?.cname || null);
                setSubjectName8(res?.data?.[0]?.cname || null);
                setSubjectId16(res?.data?.[0]?.id || '');
                setSubjectName16(res?.data?.[0]?.cname || null);
                setAllSubjectList(() => {
                    return res?.data?.map(item => {
                        return {
                            label: item?.cname,
                            value: item?.id
                        }
                    })
                })
            }

        } catch (error) {
            console.log(error, 'singleSubjectInit-error');

        }
    };

    const singleSubjectInit = async () => {
        try {
            const res = await getSubjectList();
            if (res?.code === 200) {
                const element = res?.data?.find(item => item?.cname === '数学');
                setSubjectId7(res?.data?.[0]?.id || '');
                setSubjectName7(res?.data?.[0]?.cname || null);
                setSubjectId12(element?.id || '');
                setSubjectName12(element?.cname || null);
                setSubjectId13(element?.id || '');
                setSubjectName13(element?.cname || null);
                setSubjectId14(element?.id || '');
                setSubjectName14(element?.cname || null);
                setSingleSubjectList(() => {
                    return res?.data?.map(item => {
                        return {
                            label: item?.cname,
                            value: item?.id
                        }
                    })
                })
            }

        } catch (error) {
            console.log(error, 'singleSubjectInit-error');

        }
    };

    const getSortInit = async () => {
        try {
            const res = await getSort();
            if (res?.code === 200) {
                console.log(res.data, '排名');

                setSortList(res?.data || []);
                setSelectSort(res?.data?.[0]?.value);

                setExamSortList(res?.data || []);
                setExamSelectSort(res?.data?.[0]?.value);

                setSelectSortParams(999999);
                setParamsLimit(999999);
                setSortParamsList(() => {
                    return [{ label: "全部", value: 999999 }, ...res?.data];
                });

            }

        } catch (error) {
            console.log(error, 'get-sort-init-error');

        }
    };

    const getDataExplainInit = async () => {
        try {
            const res = await getDataExplain({
                id: params?.examId
            });
            if (res?.code === 200) {
                if (!res?.data) {
                    return;
                }
                setDataExplanation(() => {
                    return res?.data?.split('\n');
                });
            }

        } catch (error) {
            console.log(error, 'get-data-explain-init-error');

        }
    }

    const onlineInit = async () => {
        try {
            setLoading8(true);
            const res = await getOnlineScoreAnalysis({
                ...params,
                subjectId: subjectId8,
                schools: schoolIds4,
                scoreList,
            });
            if (res?.code === 200) {
                setResponseData1(res);
                setLoading8(false);
                const list = removeEmptyChildren(res.data);
                setDataSource8(list);
                const data = buildEchartData(res?.columnDiagramResult?.numDistrict);
                setExpandedRowKeys8([res?.data?.[0]?.id]);
                setEchartData8(data);
                setLengButton8(res?.columnDiagramResult?.numDistrict?.map(item => item?.lineName));
                setColumns8(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 240,
                            children: item?.children?.map(element => {
                                if (element?.label === '人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        width: 80,
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                setTitle(text?.typeDisc);
                                                studentGroupRef.current?.openModal();
                                                setStudentGroupParams({
                                                    examId: params?.examId,
                                                    students: text?.data
                                                });

                                            }}>{text?.value}</Button>
                                        ),
                                    }
                                }
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    width: 120,
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })

                        }
                    })

                });
            }
            setLoading(false);
        } catch (error) {
            setLoading(false);
            console.log(error, 'online-init-error');

        }
    };


    const selectedSubjectInit = async () => {
        setLoading10(true);
        try {
            const res = await getSubjectDistribution({
                ...params,
                schools: schoolIds8
            });
            if (res?.code === 200) {
                setLoading10(false);
                setResponseData7(res);
                setExpandedRowKeys10([res?.data?.[0]?.id || '']);
                setDataSource10(res?.data || []);
                setColumns10(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 150,
                            sorter: item?.sortable ? (a, b) => a[item?.prop] - b[item?.prop] : false,
                            children: item?.children?.map(element => {
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    width: 160,
                                    sorter: element?.sortable ? (a, b) => a[element?.prop] - b[element?.prop] : false
                                }
                            })
                        }
                    });
                });

                if (!res?.columnDiagramResult || !res?.columnDiagramResult?.num?.length > 0 || !res?.columnDiagramResult?.rate?.length > 0) {
                    return;
                }

                const selectedName = res?.columnDiagramResult?.num?.map(item => item?.lineName)[0];
                setNavTags10(res?.columnDiagramResult?.num?.map(item => item?.lineName));
                setSelectedNavTag10(selectedName);
                setLengButton10(['人数', '人数占比']);
                setSelectTag10('人数');

                setAllEchartData(res?.columnDiagramResult);

                const obj = {
                    num: res?.columnDiagramResult?.num?.filter(item => item?.lineName === selectedName),
                    rate: res?.columnDiagramResult?.rate?.filter(item => item?.lineName === selectedName),
                };

                setEchartData10(() => {
                    return {
                        xAxis: {
                            name: "",
                            type: "category",
                            axisTick: { show: false },
                            data: obj.num?.[0]?.xdata,
                        },
                        yAxis: {
                            name: "人数",
                        },
                        tooltip: {
                            show: true,
                        },
                        yChartData: [
                            {
                                name: '人数',
                                data: obj.num?.[0]?.data
                            }
                        ]
                    }
                });
                setEchartData11(() => {
                    return {
                        xAxis: {
                            name: "",
                            type: "category",
                            axisTick: { show: false },
                            data: obj.rate?.[0]?.xdata,
                        },
                        yAxis: {
                            name: "人数占比",
                        },
                        tooltip: {
                            show: true,
                        },
                        yChartData: [
                            {
                                name: '人数占比',
                                data: obj.rate?.[0]?.data
                            }
                        ]
                    }
                });
            }
            setLoading10(false);
        } catch (error) {
            setLoading10(false);
            console.log(error, 'paramsInit-error');

        }
    };

    const combinationInit = async () => {

        setLoading11(true);
        try {
            const res = await getCombinationDistribution({
                ...params,
                schools: schoolIds9
            });

            if (res?.code === 200) {
                setLoading11(false);
                setResponseData8(res);
                setExpandedRowKeys11([res?.data?.[0]?.id || '']);
                setDataSource11(res?.data || []);
                setColumns11(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 150,
                            sorter: item?.sortable ? (a, b) => a[item?.prop] - b[item?.prop] : false,
                            children: item?.children?.map(element => {
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    width: 160,
                                    sorter: element?.sortable ? (a, b) => a[element?.prop] - b[element?.prop] : false
                                }
                            })
                        }
                    });
                });
                if (!res?.columnDiagramResult || !res?.columnDiagramResult?.num?.length > 0 || !res?.columnDiagramResult?.rate?.length > 0) {
                    return;
                }

                const selectedName = res?.columnDiagramResult?.num?.map(item => item?.lineName)?.[0];

                setNavTags11(res?.columnDiagramResult?.num?.map(item => item?.lineName));
                setSelectedNavTag11(selectedName);
                setLengButton11(['人数', '人数占比']);
                setSelectTag11('人数');
                setAllEchartData1(res?.columnDiagramResult);

                const obj = {
                    num: res?.columnDiagramResult?.num?.filter(item => item?.lineName === selectedName),
                    rate: res?.columnDiagramResult?.rate?.filter(item => item?.lineName === selectedName),
                };

                setEchartData12(() => {
                    return buildBarAndPieOption(obj);
                });
            }
            setLoading11(false);
        } catch (error) {
            setLoading11(false);
            console.log(error, 'anserRateInit-error');

        }

    };

    const littleQuestionInit = async () => {
        setLoading12(true);
        try {
            const res = await getLittleQuestion({
                ...params,
                subjectId: subjectId12,
                schools: schoolIds10
            });
            if (res?.code === 200) {
                setLoading12(false);
                setResponseData9(res);
                setDataSource12(res?.data || []);
                setColumns12(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: item?.label === '区县' ? 220 : 120,
                            sorter: item?.sortable ? (a, b) => a[item?.prop] - b[item?.prop] : false
                        }
                    })
                });

                if (!res?.columnDiagramResult?.difficult?.[0]?.data?.length || !res?.columnDiagramResult?.difficult?.[0]?.xdata?.length) {
                    return;
                }
                setLengButton12([res?.columnDiagramResult?.difficult?.[0]?.lineName]);
                setEchartData13(() => {
                    return {
                        radarText: {
                            indicator: res?.columnDiagramResult?.difficult?.[0]?.xdata?.map(item => {
                                return {
                                    name: item,
                                    max: 1
                                }
                            }),
                            yChartData: [
                                {
                                    name: res?.columnDiagramResult?.difficult?.[0]?.lineName,
                                    data: res?.columnDiagramResult?.difficult?.[0]?.data,
                                },
                            ],
                        },
                    }
                });
                setEchartData18(() => {
                    return {
                        xAxis: {
                            name: "",
                            type: "category",
                            axisTick: { show: false },
                            data: res?.columnDiagramResult?.difficult?.[0]?.xdata,
                        },
                        yAxis: {
                            name: '',
                        },
                        tooltip: {
                            show: true,
                        },
                        yChartData: [
                            {
                                name: res?.columnDiagramResult?.difficult?.[0]?.lineName,
                                data: res?.columnDiagramResult?.difficult?.[0]?.data
                            }
                        ],
                    }
                })

            }
            setLoading12(false);
        } catch (error) {
            setLoading12(false);
            console.log(error, 'littleQuestionInit-error');

        }
    };

    const knowledgePointInit = async () => {
        setLoading13(true);
        try {
            const res = await getKnowledgePoint({
                ...params,
                subjectId: subjectId13,
                schools: schoolIds11
            });
            if (res?.code === 200) {
                setLoading13(false);
                setResponseData10(res);
                setDataSource13(res?.data || []);
                setColumns13(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 300,
                            sorter: item?.sortable ? (a, b) => a[item?.prop] - b[item?.prop] : false
                        }
                    })
                });

                if (!res?.columnDiagramResult?.difficult?.[0]?.data?.length || !res?.columnDiagramResult?.difficult?.[0]?.xdata?.length) {
                    return;
                }
                console.log(res?.columnDiagramResult?.difficult?.[0]?.lineName, '小题图表数据');

                setLengButton13(res?.columnDiagramResult?.difficult?.map(item => item?.lineName));
                console.log(res?.columnDiagramResult?.difficult?.map(item => item?.lineName), '筛选标签');

                setEchartData14(() => {
                    return {
                        xAxis: {
                            name: "",
                            type: "category",
                            axisTick: { show: false },
                            data: res?.columnDiagramResult?.difficult?.[0]?.xdata,
                        },
                        yAxis: {
                            name: '',
                        },
                        tooltip: {
                            show: true,
                        },
                        yChartData: res?.columnDiagramResult?.difficult?.map(item => {
                            return {
                                name: item?.lineName,
                                data: item?.data
                            }
                        }),
                        radarText: {
                            indicator: res?.columnDiagramResult?.difficult?.[0]?.xdata?.map(item => {
                                return {
                                    name: item,
                                }
                            }),
                            yChartData: res?.columnDiagramResult?.difficult?.map(item => {
                                return {
                                    name: item?.lineName,
                                    data: item?.data
                                }
                            })
                        },
                    }
                });
            }
            setLoading13(false);
        } catch (error) {
            setLoading13(false);
            console.log(error, 'knowledge-error');

        }
    };

    const knowledgeRankingInit = async () => {
        setLoading14(true);
        try {
            const res = await getKnowledgeRanking({
                subjectId: subjectId14,
                examIds: [params?.examId, ...examList.map(item => item.id)],
                schools: schoolIds15
            });
            if (res.code === 200) {
                setResponseData14(res);
                setLoading14(false);
                setDataSource14(res?.data || []);
                setColumns14(() => {
                    return res?.columns?.map(item => {

                        if (item?.label === '题目序号') {
                            return {
                                title: item?.label,
                                dataIndex: item?.prop,
                                align: "center",
                                width: 90
                            }
                        }
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            ellipsis: {},
                            render(value, record) {

                                return record?.[item?.prop]?.map(element => {
                                    return (<Space>
                                        <span style={{ cursor: "pointer", color: "#4ABB6A" }} onClick={() => {
                                            setVisible(true);
                                            setModalLoading(true);
                                            setTitle(`知识点对比情况：${element}`);
                                            setRecord({ ...record, subjectId: subjectId14, });
                                        }}>
                                            {element}
                                        </span>
                                    </Space>)
                                })

                                // return (<span style={{ cursor: "pointer", color: "#4ABB6A" }} onClick={() => {
                                //     setVisible(true);
                                //     setModalLoading(true);
                                //     setTitle(`知识点对比情况：${value?.join('')}`);
                                //     setRecord(record);
                                // }}>
                                //     {value?.join('')}
                                // </span>)
                            }

                        }
                    })
                })
                return;
            }
            setLoading14(false);

        } catch (error) {
            setLoading14(false);
            console.log(error, 'exam-ranking-error');

        }

    };

    const getKnowledgeRankingAnalysisDetail = async () => {



        try {
            const res = await getKnowledgeRankingAnalysis({
                examIds: [params?.examId, ...examList?.filter(item => item?.id !== params?.examId)?.map(item => item?.id)],
                schools: params?.schools,
                subjectId: subjectId14,
                type: record.type,
                knowLedge: record?.exam?.[0]

            });
            if (res?.code === 200) {
                setModalLoading(false);
                setOriginData(res?.data);
                const list = res?.data?.map(item => {
                    return {
                        name: item?.name || '',
                        columns: item?.columns?.map(element => {
                            return {
                                title: element?.label,
                                dataIndex: element?.prop,
                                align: "center",
                                sorter: element?.sortable ? (a, b) => a[element?.prop] - b[element?.prop] : false,
                                children: element?.children?.map(child => {
                                    return {
                                        title: child?.label,
                                        dataIndex: child?.prop,
                                        align: "center",
                                        sorter: child?.sortable ? (a, b) => a[child?.prop] - b[child?.prop] : false,
                                    }
                                })
                            }
                        }) || [],
                        data: item?.data || []
                    }
                });
                setTotalDataSource(list || []);
            }

        } catch (error) {
            setModalLoading(false);
            console.log(error, 'getKnowledgeRankingAnalysisDetail-error');

        }

    };


    const getPersonalReportInit = async () => {
        try {
            const res = await getPersonalReport();
            if (res?.code === 200) {
                const roleType = localStorage.getItem('userRoleType');
                console.log(typeof +roleType, '用户');


                console.log(res?.data, '123');
                const list = res?.data?.filter(item => item?.reportType === +roleType);
                console.log(list, '模板列表');

                setTemplateList(() => {
                    return res?.data?.filter(item => item?.reportType === +roleType);

                });
            }
        } catch (error) {
            console.log(error, 'personal-report-error');

        }
    };
    const scrollToSection = (ref) => {
        ref.current?.scrollIntoView({ behavior: 'smooth' });
    };
    const expandableConfig = {
        expandedRowKeys: expandedKeys,
        defaultExpandedRowKeys: [dataSource[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedKeys([...expandedKeys, record.id]);
            } else {
                setExpandedKeys(expandedKeys.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig1 = {
        expandedRowKeys: expandedKeys1,
        defaultExpandedRowKeys: [dataSource1?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedKeys1([...expandedKeys1, record.id]);
            } else {
                setExpandedKeys1(expandedKeys1?.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig5 = {
        expandedRowKeys: expandedRowKeys5,
        defaultExpandedRowKeys: [dataSource5?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys5([...expandedRowKeys5, record.id]);
            } else {
                setExpandedRowKeys5(expandedRowKeys5?.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig6 = {
        expandedRowKeys: expandedRowKeys6,
        defaultExpandedRowKeys: [dataSource6?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys6([...expandedRowKeys6, record.id]);
            } else {
                setExpandedRowKeys6(expandedRowKeys6?.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig7 = {
        expandedRowKeys: expandedRowKeys7,
        defaultExpandedRowKeys: [dataSource7?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys7([...expandedRowKeys7, record.id]);
            } else {
                setExpandedRowKeys7(expandedRowKeys7?.filter((k) => k !== record.id));
            }
        },
    };
    const expandableConfig8 = {
        expandedRowKeys: expandedRowKeys8,
        defaultExpandedRowKeys: [dataSource8?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys8([...expandedRowKeys8, record.id]);
            } else {
                setExpandedRowKeys8(expandedRowKeys8?.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig10 = {
        expandedRowKeys: expandedRowKeys10,
        defaultExpandedRowKeys: [dataSource10?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys10([...expandedRowKeys10, record.id]);
            } else {
                setExpandedRowKeys10(expandedRowKeys10?.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig11 = {
        expandedRowKeys: expandedRowKeys11,
        defaultExpandedRowKeys: [dataSource11?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys11([...expandedRowKeys11, record.id]);
            } else {
                setExpandedRowKeys11(expandedRowKeys11?.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig12 = {
        expandedRowKeys: expandedRowKeys12,
        // defaultExpandedRowKeys: [dataSource12?.[0]?.id],
        expandIconColumnIndex: 2,
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys12([...expandedRowKeys12, record.id]);
            } else {
                setExpandedRowKeys12(expandedRowKeys12?.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig13 = {
        expandedRowKeys: expandedRowKeys13,
        defaultExpandedRowKeys: [dataSource13?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys13([...expandedRowKeys13, record.id]);
            } else {
                setExpandedRowKeys13(expandedRowKeys13?.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig16 = {
        expandedRowKeys: expandedRowKeys16,
        defaultExpandedRowKeys: [dataSource16?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys16([...expandedRowKeys16, record.id]);
            } else {
                setExpandedRowKeys16(expandedRowKeys16?.filter((k) => k !== record.id));
            }
        },
    };

    const tableCommonProps = {
        style: { height: 520 },
        rowKey: "id",
        scroll: { x: 1500, y: 440 },
        sticky: true,
        pagination: false,
        size: "small",
    };

    const timelineItems = [
        {
            color: 'green',
            children: (
                <>
                    <p className={styles.timeline_title}>考试分析</p>
                    <section className={styles.timeline_text} onClick={() => {
                        scrollToSection(examRef);
                    }}>考试排名分析</section>
                    <section className={styles.timeline_text} onClick={() => {
                        scrollToSection(examPercentRef);
                    }}>考试排名百分比分析</section>
                </>
            ),
        },
        {
            color: 'green',
            children: (
                <>
                    <p className={styles.timeline_title}>教师分析</p>
                    <section className={styles.timeline_text} onClick={() => {
                        scrollToSection(teacherRef);
                    }}>教师群体分析</section>
                    {/* <section className={styles.timeline_text}>教师绩效Z值分析</section> */}
                </>
            ),
        },
        {
            color: 'green',
            children: (
                <>
                    <p className={styles.timeline_title}>学生分析</p>
                    <section className={styles.timeline_text} onClick={() => {
                        scrollToSection(topStudentRef);
                    }}>尖子生分析</section>
                    <section className={styles.timeline_text} onClick={() => {
                        scrollToSection(otherStudentRef);
                    }}>临界生/冒进生分析</section>
                </>
            ),
        },
        {
            color: 'green',
            children: (
                <>
                    <p className={styles.timeline_title}>整体分析与反思</p>
                    <section className={styles.timeline_text}>整体分析与反思</section>
                    <section className={styles.timeline_text}>后续措施</section>
                </>
            ),
        },

    ];

    const explainTextList = [
        '1.统计范围:温州市普通高中2022届高三学生，缺考考生和零分考生不参与统计;',
        '2.统计方法:按考生学籍所在学校进行统计;',
        '3.选考科目赋分办法:先参照2021届首考成绩划定20个等第，再采用一分一赋的方法进行赋分;',
        '4.如果没有特别说明，本报告中与“率”和“平均分”相关的数据均以统计人数为基数;',
        '5.本次分析仅针对文化科成绩，不区分报考类别;',
        '6.由于部分学生缺考和无法区分报考类别等原因，本报告中的所有参数不代表某所学校或区域的办学水平仅供内部指导教学时使用，切勿外传，更不得用于招生宣传。'
    ];


    const catalogueList = [
        {
            title: '上线情况分析',
            // text1: '考试排名分析',
            // text2: '考试排名百分比分析',
            icon: sectionSrc1,
            left: 0
        },
        {
            title: '学校对比分析',
            // text1: '教师群体分析',
            // text2: '教师绩效Z值分析',
            icon: sectionSrc2,
            left: 0
        },
        {
            title: '教师群体分析',
            // text1: '整体分析',
            // text2: '后续措施',
            icon: sectionSrc4,
            left: 0
        },
        {
            title: '学生群体分析',
            // text1: '尖子生分析',
            // text2: '临界生/冒进生分析',
            icon: sectionSrc3,
            left: 0
        },
        {
            title: '选考分布分析',
            // text1: '尖子生分析',
            // text2: '临界生/冒进生分析',
            icon: sectionSrc5,
            left: 0
        },
        {
            title: '学科小题分析',
            // text1: '尖子生分析',
            // text2: '临界生/冒进生分析',
            icon: sectionSrc6,
            left: 0
        },

        {
            title: '学科知识点分析',
            // text1: '尖子生分析',
            // text2: '临界生/冒进生分析',
            icon: sectionSrc7,
            left: 0
        },



    ];


    // 导出图片
    const exportChart = (ref) => {
        const instance = echarts.getInstanceByDom(ref?.current);
        if (instance) {
            const base64 = instance?.getDataURL({
                type: "png",
                pixelRatio: 2, // 导出的图片分辨率比例
                backgroundColor: "#fff", // 导出图片的背景色
            });

            setEchartImg(base64);
        }
    };

    //下载图片
    const downloadImg = () => {
        const link = document.createElement("a");
        link.download = `图表_${new Date().getTime()}.png`;
        link.href = echartImg;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        setEchartImg("");
    };


    const handleSortClick = (item) => {
        setSelectSort(item?.value);
    };

    const handleSortClick2 = (item) => {
        setExamSelectSort(item?.value);
    };

    const handleRakingClick100 = (item) => {
        setSelectSortParams(item?.value);
        setParamsLimit(item?.value);

    };


    const handleDownload1 = async () => {
        try {
            const res = await downloadTableData(responseData1);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName8}上线情况排名分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };
    const handleDownload2 = async () => {
        try {
            const res = await downloadTableData(responseData2);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName1}学校对比排名分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };
    const handleDownload3 = async () => {
        try {
            const res = await downloadTableData(responseData3);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName2}学校排名百分比分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };

    const handleDownload4 = async () => {
        try {
            const res = await downloadTableData(responseData4);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName7}教师群体分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };


    const handleDownload5 = async () => {
        try {
            const res = await downloadTableData(responseData5);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName3}尖子生情况分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };

    const handleDownload6 = async () => {
        try {
            const res = await downloadTableData(responseData6);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${activeButtons === '临界生' ? subjectName3 : ''}${activeButtons}情况分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };


    const handleDownload7 = async () => {
        try {
            const res = await downloadTableData(responseData7);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${selectedNavTag10}选考科目分布分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };

    const handleDownload8 = async () => {
        try {
            const res = await downloadTableData(responseData8);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${selectedNavTag11}选考组合分布分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };

    const handleDownload9 = async () => {
        try {
            const res = await downloadTableData(responseData9);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName12}考试各小题分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };

    const handleDownload10 = async () => {
        try {
            const res = await downloadTableData(responseData10);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName13}学科知识点分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };

    const handleDownload11 = async () => {
        try {
            const res = await downloadTableData(responseData11);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName4}对比考试排名情况分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };

    const handleDownload12 = async () => {
        try {
            const res = await downloadTableData(responseData12);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName5}对比考试百分比情况分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };

    const handleDownload13 = async () => {
        try {
            const res = await downloadTableData(responseData13);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName6}对比考试参数分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };

    const handleDownload14 = async () => {
        try {
            const res = await downloadTableData(responseData14);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName14}对比考试知识点分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };


    const handleDownload15 = async (index, name) => {
        try {
            const element = originData?.[index];
            const res = await downloadTableData(element);
            if (res?.status === 200) {
                downloadExcelFile(res, name || 'excel');
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };


    const handleDownload16 = async () => {
        try {
            const res = await downloadTableData(responseData16);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${subjectName16}当前考试参数情况分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };


    return (
        <div className={styles.analysis}>


            <Row gutter={16}>
                <Col span={24}>
                    <section className={styles.analysis_content} ref={contentRef}>
                        <section style={{ boxSizing: "border-box", padding: 8, backgroundColor: "#fff", display: isShow ? "block" : "none" }} >
                            <ScreenPage
                                isShow={isShow}
                                isShowSubject={false}
                                isShowSchool={false}
                                onChange={(e) => {
                                    setSubjectName(e?.currentDiscipline?.[0]?.name || '');

                                    setSubtitle(`${[e?.currentGrade?.[0]?.name, e?.currentSemester?.[0]?.name, e?.currentExamination?.[0]?.name,].filter(item => !!item).join("*")}*`);


                                    setExamName(`${[e?.currentGrade?.[0]?.name, e?.currentSemester?.[0]?.name, e?.currentExamination?.[0]?.name,].filter(item => !!item).join("*")}*`);

                                    setParams({
                                        examId: e?.examId,
                                        // schools: e?.currentSchool?.[0]?.schoolList?.map(item => item?.id) || e?.currentSchool?.map(item => item?.id),
                                    });
                                }}
                                saveshow={(e) => {
                                    setIsShowExamName(false);
                                    setIsShow(e);
                                }}
                            />
                        </section>
                        <section className={styles.title}>


                            <section style={{ display: "flex", alignItems: "center" }}>
                                {subtitle ? (<span style={{ fontSize: 24 }}>
                                    {isShowExamName ? "当前默认最新一次考试：" : '当前考试：'}{subtitle?.slice(0, -1)}
                                </span>) : null}
                                <Flex
                                    style={{
                                        padding: "4px 8px",
                                        border: "1px solid #666",
                                        borderRadius: 5,
                                        cursor: "pointer",
                                        width: '200px',
                                        // marginTop: 8
                                        marginLeft: 8
                                    }}
                                    justify='center'
                                    alignItems="center"
                                    onClick={() => {
                                        setIsShow(!isShow);
                                    }}
                                >
                                    选择考试
                                    <img
                                        src={isShow ? upSrc : downSrc}
                                        width={14}
                                        height={12}
                                        style={{ marginLeft: 5 }}
                                    />
                                </Flex>
                                <Tooltip title="如果需要看其他考试与学科，请按”选择考试”">
                                    <QuestionCircleOutlined style={{ fontSize: 18, marginLeft: 8 }} />
                                </Tooltip>
                            </section>

                            <Flex
                                style={{
                                    padding: "4px 8px",
                                    border: "1px solid #666",
                                    borderRadius: 5,
                                    cursor: "pointer",
                                    width: '200px',
                                    marginTop: 8
                                }}
                                justify='center'
                                alignItems="center"
                                onClick={() => {
                                    setTemplateOpen(true);
                                }}
                            >
                                选择报告模板
                                <img
                                    src={editSrc}
                                    width={14}
                                    height={12}
                                    style={{ marginLeft: 5 }}
                                />
                            </Flex>

                        </section>
                        <section className={styles.analysis_content_home}>
                            <section className={styles.analysis_content_home_title}>
                                <span>{subtitle}</span>
                                <span>整体分析报告</span>
                            </section>

                            <section className={styles.analysis_content_home_bottom}>
                                <section className={styles.analysis_content_home_bottom_editor}>
                                    <span style={{ fontSize: 24 }}>报告人：{user?.userName}</span>
                                    <span style={{ fontSize: 24 }}>报告时间：{dayjs()?.format('YYYY年MM月DD日')}</span>
                                </section>
                                <section className={styles.analysis_content_home_bottom_source}>
                                    <span style={{ fontSize: 24 }}>来源：**市学业大数据分析系统</span>
                                </section>
                            </section>
                        </section>

                        <section className={styles.analysis_content_explain}>
                            <section className={styles.analysis_content_explain_title}>
                                <section className={styles.page_title}>
                                    <img src={navIconSrc} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>数据说明</span>
                                </section>
                            </section>
                            <section className={styles.analysis_content_explain_content}>
                                {dataExplanation?.map((item, index) => {
                                    return (<p key={index} className={styles.analysis_content_explain_content_text}>{item}</p>)
                                })}
                            </section>
                        </section>

                        <section className={styles.analysis_content_catalogue}>
                            <section className={styles.analysis_content_catalogue_title}>
                                <section className={styles.page_title}>
                                    <img src={navIconSrc} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>目录</span>
                                </section>
                            </section>
                            <section className={styles.analysis_content_catalogue_content}>

                                {catalogueList.map((item, index) => {
                                    return (<section className={styles.analysis_content_catalogue_section} key={index} style={{ marginLeft: item?.left }}>
                                        <img src={item.icon} className={styles.analysis_content_catalogue_section_img} />
                                        <section className={styles.analysis_content_catalogue_section_description}>
                                            <span className={styles.analysis_content_catalogue_section_title}>{item?.title}</span>
                                            {/* <span className={styles.analysis_content_catalogue_section_text}>{item?.text1}&nbsp;&nbsp;&nbsp;&nbsp;{item?.text2}</span> */}
                                        </section>
                                    </section>)
                                })}
                            </section>
                        </section>

                        <section className={styles.analysis_content_chart} ref={examRef}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc1} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}上线情况分析-图表</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={allSubjectList}
                                            value={subjectName8}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            allowClear
                                            onChange={(value, option) => {
                                                if (!value) {
                                                    setSubjectName8(null);
                                                    setSubjectId8("");
                                                    return;
                                                }
                                                setSubjectName8(option?.label);

                                                setSubjectId8(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds4(value);
                                        }} />
                                    </Space>
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef8?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <ScoreLineSelect onChange={(list) => {
                                    setScoreList(list);
                                }} />
                                <Spin spinning={loading8} tip='计算中，请稍后'>
                                    {lengButton8?.length > 0 ? (<Echarts
                                        ref={echartRef8}
                                        hasTable={false}
                                        hasExport={false}
                                        data={echartData8}
                                        type={"bar"}
                                        isShow={true}
                                        text={`${subtitle}${subjectName8}*上线情况分析-图表`}
                                        lengButton={lengButton8}

                                    />) : <Empty description={"暂无图表数据"} />}
                                </Spin>
                            </section>
                        </section>

                        <section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc1} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}上线情况分析-表格</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={allSubjectList}
                                            value={subjectName8}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            allowClear
                                            onChange={(value, option) => {
                                                if (!value) {
                                                    setSubjectName8(null);
                                                    setSubjectId8("");
                                                    return;
                                                }
                                                setSubjectName8(option?.label);

                                                setSubjectId8(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds4(value);
                                        }} />
                                    </Space>
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload1}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource8}
                                    columns={columns8}
                                    locale={{ emptyText: loading8 ? "计算中，请稍后" : "暂无数据" }}
                                    loading={{ spinning: loading8, tip: "计算中，请稍后" }}
                                    expandable={expandableConfig8}
                                >
                                </Table>
                            </section>
                        </section>

                        <section className={styles.analysis_content_chart} ref={examRef}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc2} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}学校对比排名分析-图表</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={allSubjectList}
                                            value={subjectName1}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            allowClear
                                            onChange={(value, option) => {
                                                if (!value) {
                                                    setSubjectName1(null);
                                                    setSubjectId1("");
                                                    return;
                                                }
                                                setSubjectName1(option?.label);

                                                setSubjectId1(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds1(value);
                                        }} />
                                    </Space>

                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef1?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Spin spinning={loading} tip='计算中，请稍后'>
                                    {lengButton?.length > 0 ? (<Echarts
                                        ref={echartRef1}
                                        hasTable={false}
                                        hasExport={false}
                                        data={echartData}
                                        type={"bar"}
                                        isShow={true}
                                        text={`${subtitle}${subjectName1}*学校对比排名分析-图表`}
                                        lengButton={lengButton}

                                    />) : <Empty description={"暂无图表数据"} />}
                                </Spin>
                            </section>
                        </section>

                        <section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc2} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}学校对比排名分析-表格</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={allSubjectList}
                                            value={subjectName1}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            allowClear
                                            onChange={(value, option) => {
                                                if (!value) {
                                                    setSubjectName1(null);
                                                    setSubjectId1("");
                                                    return;
                                                }
                                                setSubjectName1(option?.label);

                                                setSubjectId1(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds1(value);
                                        }} />
                                    </Space>
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload2}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource}
                                    columns={columns}
                                    locale={{ emptyText: loading ? "计算中，请稍后" : "暂无数据" }}
                                    loading={{ spinning: loading, tip: "计算中，请稍后" }}
                                    expandable={expandableConfig}
                                >
                                </Table>
                            </section>
                        </section>

                        <section className={styles.analysis_content_chart} ref={examPercentRef}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc2} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}学校排名百分比分析-图表</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={allSubjectList}
                                            value={subjectName2}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            allowClear
                                            onChange={(value, option) => {
                                                if (!value) {
                                                    setSubjectName2(null);
                                                    setSubjectId2("");
                                                    return;
                                                }
                                                setSubjectName2(option?.label);

                                                setSubjectId2(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds2(value);
                                        }} />
                                    </Space>
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef2?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Spin spinning={loading1} tip='计算中，请稍后'>
                                    {lengButton1?.length > 0 ? (<Echarts
                                        hasTable={false}
                                        ref={echartRef2}
                                        hasExport={false}
                                        data={echartData1}
                                        type={"bar"}
                                        isShow={true}
                                        text={`${subtitle}${subjectName2}*学校排名百分比分析-图表`}
                                        lengButton={lengButton1}

                                    />) : <Empty description={"暂无图表数据"} />}
                                </Spin>
                            </section>
                        </section>

                        <section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc2} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}学校排名百分比分析-表格</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={allSubjectList}
                                            value={subjectName2}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            allowClear
                                            onChange={(value, option) => {
                                                if (!value) {
                                                    setSubjectName2(null);
                                                    setSubjectId2("");
                                                    return;
                                                }
                                                setSubjectName2(option?.label);

                                                setSubjectId2(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds2(value);
                                        }} />
                                    </Space>
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload3}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource1}
                                    columns={columns1}
                                    locale={{ emptyText: loading1 ? "计算中，请稍后" : "暂无数据" }}
                                    loading={{ spinning: loading1, tip: "计算中，请稍后" }}
                                    expandable={expandableConfig1}
                                >
                                </Table>
                            </section>
                        </section>

                        <section className={styles.analysis_content_chart} ref={examPercentRef}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc2} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}当前考试参数情况分析-图表</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={allSubjectList}
                                            value={subjectName16}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            allowClear
                                            onChange={(value, option) => {
                                                if (!value) {
                                                    setSubjectName16(null);
                                                    setSubjectId16("");
                                                    return;
                                                }
                                                setSubjectName16(option?.label);

                                                setSubjectId16(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds3(value);
                                        }} />
                                    </Space>
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef16?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Spin spinning={loading16} tip='计算中，请稍后'>
                                    {lengButton16?.length > 0 ? (<Echarts
                                        hasTable={false}
                                        ref={echartRef16}
                                        hasExport={false}
                                        data={echartData16}
                                        type={"bar"}
                                        isShow={true}
                                        text={`${subtitle}${subjectName16}*当前考试参数情况分析-图表`}
                                        lengButton={lengButton16}

                                    />) : <Empty description={"暂无图表数据"} />}
                                </Spin>
                            </section>
                        </section>

                        <section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc2} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}当前考试参数情况分析-表格</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={allSubjectList}
                                            value={subjectName16}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            allowClear
                                            onChange={(value, option) => {
                                                if (!value) {
                                                    setSubjectName16(null);
                                                    setSubjectId16("");
                                                    return;
                                                }
                                                setSubjectName16(option?.label);

                                                setSubjectId16(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds3(value);
                                        }} />
                                    </Space>
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload16}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource16}
                                    columns={columns16}
                                    locale={{ emptyText: loading16 ? "计算中，请稍后" : "暂无数据" }}
                                    loading={{ spinning: loading16, tip: "计算中，请稍后" }}
                                    expandable={expandableConfig16}
                                >
                                </Table>
                            </section>
                        </section>

                        <section className={styles.analysis_content_table} ref={teacherRef}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc3} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}教师群体分析</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={singleSubjectList}
                                            value={subjectName7}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            onChange={(value, options) => {
                                                if (!value) {
                                                    return;
                                                }
                                                setSubjectName7(options?.label);
                                                setSubjectId7(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds5(value);
                                        }} />
                                    </Space>
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload4}>导出表格</Button>
                            </section>
                            <Space style={{ marginBottom: 8 }}>
                                {sortList.length > 0 ? (
                                    sortList.map((item, index) => {
                                        const isSelected = item?.value === selectSort;
                                        return (
                                            <Tag
                                                onClick={() => handleSortClick(item)}
                                                color={isSelected ? 'green' : 'default'}
                                                key={index}
                                                style={{
                                                    cursor: 'pointer',
                                                }}
                                            >
                                                {item?.label}
                                            </Tag>
                                        );
                                    })
                                ) : null}
                            </Space>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource2}
                                    columns={columns2}
                                    // dataSource={mockDataSource}
                                    // columns={mockColumns}
                                    loading={loading2}
                                    expandable={expandableConfig}
                                >
                                </Table>
                            </section>
                        </section>

                        <section className={styles.analysis_content_chart} ref={topStudentRef}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc4} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}尖子生情况分析-图表</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={allSubjectList}
                                            value={subjectName3}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            allowClear
                                            onChange={(value, option) => {
                                                if (!value) {
                                                    setSubjectName3(null);
                                                    setSubjectId3("");
                                                    return;
                                                }
                                                setSubjectName3(option?.label);

                                                setSubjectId3(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds6(value);
                                        }} />
                                    </Space>
                                    <section style={{ display: "flex", alignItems: "center", marginLeft: 16 }}>
                                        全市前&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            placeholder="请输入"
                                            value={topStudentLimit}
                                            type="number"
                                            onChange={(e) => {
                                                if (!e?.target?.value) {
                                                    return;
                                                }
                                                setTopStudentLimit(+e.target.value);
                                            }}
                                        />&nbsp;
                                        名
                                    </section>
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef3?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Spin spinning={loading3} tip='计算中，请稍后'>
                                    {lengButton3?.length > 0 ? (<Echarts2
                                        hasTable={false}
                                        hasExport={false}
                                        ref={echartRef3}
                                        needTab={true}
                                        data={echartData3}
                                        type={"bar"}
                                        lengButton={lengButton3}
                                        text={`${subtitle}${subjectName3}*尖子生情况分析-图表`}

                                    />) : <Empty description={"暂无图表数据"} />}
                                </Spin>

                            </section>
                        </section>

                        <section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc4} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}尖子生情况分析-表格</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={allSubjectList}
                                            value={subjectName3}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            allowClear
                                            onChange={(value, option) => {
                                                if (!value) {
                                                    setSubjectName3(null);
                                                    setSubjectId3("");
                                                    return;
                                                }
                                                setSubjectName3(option?.label);

                                                setSubjectId3(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds6(value);
                                        }} />
                                    </Space>
                                    <section style={{ display: "flex", alignItems: "center", marginLeft: 16 }}>
                                        全市前&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            placeholder="请输入"
                                            value={topStudentLimit}
                                            type="number"
                                            onChange={(e) => {
                                                if (!e?.target?.value) {
                                                    return;
                                                }
                                                setTopStudentLimit(+e.target.value);
                                            }}
                                        />&nbsp;
                                        名
                                    </section>
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload5}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource3}
                                    columns={columns3}
                                    locale={{ emptyText: loading3 ? "计算中，请稍后" : "暂无数据" }}
                                    loading={{ spinning: loading3, tip: "计算中，请稍后" }}
                                >
                                </Table>
                            </section>
                        </section>

                        <section className={styles.analysis_content_chart} ref={otherStudentRef}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc4} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}{activeButtons}情况分析-图表</span>
                                    <Space>
                                        {selected !== 'badSubject' ? (
                                            <Select
                                                placeholder="请选择学科"
                                                options={allSubjectList}
                                                value={subjectName3}
                                                style={{ marginLeft: 20, width: "120px" }}
                                                allowClear
                                                onChange={(value, option) => {
                                                    if (!value) {
                                                        setSubjectName3(null);
                                                        setSubjectId3("");
                                                        return;
                                                    }
                                                    setSubjectName3(option?.label);

                                                    setSubjectId3(value);
                                                }}
                                            />
                                        ) : null}
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds7(value);
                                        }} />
                                    </Space>

                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef4?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <Flex alignItems="center" style={{ marginRight: 12 }}>
                                {selected === "critical" && (
                                    <>
                                        全市前&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            max={5}
                                            placeholder="请输入"
                                            value={limit2}
                                            type="number"
                                            onChange={(e) => {
                                                setLimit2(+ e.target.value);
                                            }}
                                        />&nbsp;
                                        名
                                        &nbsp;{criticalScore ? `分数为${criticalScore}分` : ''}，上限浮动&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            max={5}
                                            placeholder="请输入"
                                            value={rateOn}
                                            type="number"
                                            onChange={(e) => {
                                                setRateOn(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;分， 下限浮动&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            placeholder="请输入"
                                            value={rateUnder}
                                            type="number"
                                            onChange={(e) => {
                                                setRateUnder(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;分
                                    </>
                                )}

                                {selected === 'badSubject' && (
                                    <>
                                        总分分数段区间设置为上限&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            max={1000}
                                            placeholder="请输入"
                                            value={up}
                                            type="number"
                                            onChange={(e) => {
                                                setUp(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;分，
                                        下限&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            max={1000}
                                            placeholder="请输入"
                                            value={down}
                                            type="number"
                                            onChange={(e) => {
                                                setDown(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;分。<Tooltip title="在该区间的学生群体中，个别学生的学科分数低于区间内学生群体平均分的标记为劣科。">
                                            <QuestionCircleOutlined />
                                        </Tooltip>

                                    </>
                                )}

                            </Flex>
                            <section style={{ marginTop: 8 }}>
                                {selectButton.map((but, index) => {
                                    return (
                                        <Button
                                            size={"small"}
                                            key={index}
                                            style={{
                                                marginRight: 10,
                                                backgroundColor: activeButtons == but ? "#e9f7ee" : "",
                                                color: activeButtons == but ? "#3eb463" : "",
                                                borderColor: activeButtons == but ? "#e9f7ee" : "",
                                            }}
                                            onClick={() => {
                                                setActiveButtons(but);
                                                if (but === '临界生') {
                                                    setSelected('critical');
                                                    return;
                                                }
                                                if (but === '优生劣科') {
                                                    setSelected('badSubject');
                                                    return;
                                                }
                                                if (but === '冒进生') {
                                                    setSelected('rash');
                                                    return;
                                                }
                                            }}
                                        >
                                            {but}
                                        </Button>
                                    );
                                })}
                            </section>
                            <section className={styles.analysis_content_chart_content} style={{ marginTop: -4 }}>
                                <Spin spinning={loading4} tip='计算中，请稍后'>
                                    {lengButton4?.length > 0 ? (<Echarts2
                                        hasTable={false}
                                        ref={echartRef4}
                                        hasExport={false}
                                        needTab={true}
                                        data={echartData4}
                                        type={"bar"}
                                        lengButton={lengButton4}
                                        text={`${subtitle}${subjectName3}*${activeButtons}情况分析-图表`}

                                    />) : <Empty description={"暂无图表数据"} />}
                                </Spin>
                            </section>
                        </section>

                        <section className={styles.analysis_content_table} >
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc4} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}{activeButtons}情况分析-表格</span>
                                    <Space>
                                        {selected !== 'badSubject' ? (
                                            <Select
                                                placeholder="请选择学科"
                                                options={allSubjectList}
                                                value={subjectName3}
                                                style={{ marginLeft: 20, width: "120px" }}
                                                allowClear
                                                onChange={(value, option) => {
                                                    if (!value) {
                                                        setSubjectName3(null);
                                                        setSubjectId3("");
                                                        return;
                                                    }
                                                    setSubjectName3(option?.label);

                                                    setSubjectId3(value);
                                                }}
                                            />
                                        ) : null}
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds7(value);
                                        }} />
                                    </Space>

                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload6}>导出表格</Button>
                            </section>
                            <Flex alignItems="center" style={{ marginRight: 12 }}>
                                {selected === "critical" && (
                                    <>
                                        全市前&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            max={5}
                                            placeholder="请输入"
                                            value={limit2}
                                            type="number"
                                            onChange={(e) => {
                                                setLimit2(+ e.target.value);
                                            }}
                                        />&nbsp;
                                        名
                                        &nbsp;{criticalScore ? `分数为${criticalScore}分` : ''}，上限浮动&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            max={5}
                                            placeholder="请输入"
                                            value={rateOn}
                                            type="number"
                                            onChange={(e) => {
                                                setRateOn(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;分, 下限浮动&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            placeholder="请输入"
                                            value={rateUnder}
                                            type="number"
                                            onChange={(e) => {
                                                setRateUnder(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;分
                                    </>
                                )}

                                {selected === 'badSubject' && (
                                    <>
                                        总分分数段区间设置为上限&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            max={1000}
                                            placeholder="请输入"
                                            value={up}
                                            type="number"
                                            onChange={(e) => {
                                                setUp(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;分，
                                        下限&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            max={1000}
                                            placeholder="请输入"
                                            value={down}
                                            type="number"
                                            onChange={(e) => {
                                                setDown(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;分。<Tooltip title="在该区间的学生群体中，个别学生的学科分数低于区间内学生群体平均分的标记为劣科。">
                                            <QuestionCircleOutlined />
                                        </Tooltip>

                                    </>
                                )}
                            </Flex>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource4}
                                    columns={columns4}
                                    locale={{ emptyText: loading4 ? "计算中，请稍后" : "暂无数据" }}
                                    loading={{ spinning: loading4, tip: "计算中，请稍后" }}
                                >
                                </Table>
                            </section>
                        </section>

                        {/* 选考科目分布分析 */}
                        <section className={styles.analysis_content_chart}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc5} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}选考科目分布分析-图表</span>
                                    <SchoolChoice onChange={(value) => {
                                        setSchoolIds8(value);
                                    }} />
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef10?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Space style={{ marginBottom: 8 }}>
                                    {navTags10?.map((item, index) => {
                                        return (
                                            <Button
                                                key={index}
                                                type={item === selectedNavTag10 ? 'primary' : 'default'}
                                                size="small"
                                                onClick={() => {
                                                    setSelectedNavTag10(item);
                                                }}
                                            >
                                                {item}
                                            </Button>
                                        )
                                    })}
                                </Space>
                                <Spin spinning={loading10} tip='计算中，请稍后'>
                                    {lengButton10?.length > 0 ? (
                                        <Space>
                                            {lengButton10?.map((item, index) => {
                                                return (
                                                    <Button
                                                        key={index}
                                                        type={item === selectTag10 ? 'primary' : 'default'}
                                                        size="small"
                                                        onClick={() => {
                                                            setSelectTag10(item);
                                                        }}
                                                    >
                                                        {item}
                                                    </Button>
                                                )
                                            })}
                                        </Space>

                                    ) : null}
                                    {selectTag10 === '人数' ? (<Echarts
                                        isShow={false}
                                        data={echartData10}
                                        hasExport={false}
                                        ref={echartRef10}
                                        type='bar'
                                        text={`选考科目分布分析*${subtitle}${selectedNavTag10}*人数`}
                                        lengButton={['人数']}
                                        hasTable={false}
                                    />) : null}
                                    {selectTag10 === '人数占比' ? (<Echarts
                                        isShow={false}
                                        type="bar"
                                        data={echartData11}
                                        ref={echartRef10}
                                        hasTable={false}
                                        hasExport={false}
                                        text={`选考科目分布分析*${subtitle}${selectedNavTag10}*人数占比`}
                                        lengButton={['人数占比']}
                                    />) : null}
                                </Spin>
                            </section>
                        </section>

                        <section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc5} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}选考科目分布分析-表格</span>
                                    <SchoolChoice onChange={(value) => {
                                        setSchoolIds8(value);
                                    }} />
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload7}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource10}
                                    columns={columns10}
                                    locale={{ emptyText: loading10 ? "计算中，请稍后" : "暂无数据" }}
                                    loading={{ spinning: loading10, tip: "计算中，请稍后" }}
                                    expandable={expandableConfig10}
                                >
                                </Table>
                            </section>
                        </section>
                        {/* 选考科目分布分析 */}
                        {/* 选考组合分布分析 */}
                        <section className={styles.analysis_content_chart}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc5} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}选考组合分布分析-图表</span>
                                    <SchoolChoice onChange={(value) => {
                                        setSchoolIds9(value);
                                    }} />
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef11?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Space style={{ marginBottom: 8 }}>
                                    {navTags11?.map((item, index) => {
                                        return (
                                            <Button
                                                key={index}
                                                type={item === selectedNavTag11 ? 'primary' : 'default'}
                                                size="small"
                                                onClick={() => {
                                                    setSelectedNavTag11(item);
                                                }}
                                            >
                                                {item}
                                            </Button>
                                        )
                                    })}
                                </Space>
                                <Spin spinning={loading11} tip='计算中，请稍后'>

                                    {lengButton11?.length > 0 ? (
                                        <Space>
                                            {lengButton11?.map((item, index) => {
                                                return (
                                                    <Button
                                                        key={index}
                                                        type={item === selectTag11 ? 'primary' : 'default'}
                                                        size="small"
                                                        onClick={() => {
                                                            setSelectTag11(item);
                                                        }}
                                                    >
                                                        {item}
                                                    </Button>
                                                )
                                            })}
                                        </Space>

                                    ) : null}
                                    {selectTag11 === '人数' ? (<Echarts
                                        isShow={false}
                                        data={echartData12}
                                        hasExport={false}
                                        ref={echartRef11}
                                        type='bar'
                                        text={`选考组合分布分析*${subtitle}${selectedNavTag11}*人数`}
                                        lengButton={['人数']}
                                        hasTable={false}
                                    />) : null}
                                    {selectTag11 === '人数占比' ? (<Echarts
                                        isShow={false}
                                        type="bar"
                                        data={echartData17}
                                        ref={echartRef11}
                                        hasTable={false}
                                        hasExport={false}
                                        text={`选考组合分布分析*${subtitle}${selectedNavTag11}*人数占比`}
                                        lengButton={['人数占比']}
                                    />) : null}
                                    {/* <Echarts2
                                        text={`选考组合分布分析*${subtitle}${selectedNavTag11}`}
                                        data={echartData12}
                                        ref={echartRef11}
                                        needTab={true}
                                        lengButton={lengButton11}
                                        hasExport={false}
                                        hasTable={false}
                                    /> */}
                                </Spin>
                            </section>
                        </section>

                        <section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc5} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}选考组合分布分析-表格</span>
                                    <SchoolChoice onChange={(value) => {
                                        setSchoolIds9(value);
                                    }} />
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload8}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource11}
                                    columns={columns11}
                                    locale={{ emptyText: loading11 ? "计算中，请稍后" : "暂无数据" }}
                                    loading={{ spinning: loading11, tip: "计算中，请稍后" }}
                                    expandable={expandableConfig11}
                                >
                                </Table>
                            </section>
                        </section>
                        {/* 选考组合分布分析 */}

                        {/* 考试各小题分析 */}
                        <section className={styles.analysis_content_chart}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc6} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}考试各小题分析-图表</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={singleSubjectList}
                                            value={subjectName12}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            onChange={(value, options) => {
                                                if (!value) {
                                                    return;
                                                }
                                                setSubjectName12(options?.label);
                                                setSubjectId12(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds10(value);
                                        }} />
                                    </Space>


                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef12?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Spin spinning={loading12} tip='计算中，请稍后'>
                                    <Echarts
                                        text={`学科小题分析*${subtitle}${subjectName12}*雷达图`}
                                        data={echartData13}
                                        ref={echartRef12}
                                        isShow={false}
                                        type={"radar"}
                                        needTab={true}
                                        lengButton={lengButton12}
                                        hasExport={false}
                                        hasTable={false}
                                    />
                                </Spin>
                            </section>
                        </section>
                        <section className={styles.analysis_content_chart}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc6} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}考试各小题分析-图表</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={singleSubjectList}
                                            value={subjectName12}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            onChange={(value, options) => {
                                                if (!value) {
                                                    return;
                                                }
                                                setSubjectName12(options?.label);
                                                setSubjectId12(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds10(value);
                                        }} />
                                    </Space>


                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef12?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Spin spinning={loading12} tip='计算中，请稍后'>
                                    <Echarts
                                        text={`学科小题分析*${subtitle}${subjectName12}*折线图`}
                                        data={echartData18}
                                        ref={echartRef18}
                                        isShow={false}
                                        type={"line"}
                                        needTab={true}
                                        lengButton={lengButton12}
                                        hasExport={false}
                                        hasTable={false}
                                    />
                                </Spin>
                            </section>
                        </section>

                        <section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc6} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}考试各小题分析-表格</span>
                                    <SchoolChoice onChange={(value) => {
                                        setSchoolIds10(value);
                                    }} />
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload9}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource12}
                                    columns={columns12}
                                    locale={{ emptyText: loading12 ? "计算中，请稍后" : "暂无数据" }}
                                    loading={{ spinning: loading12, tip: "计算中，请稍后" }}
                                    expandable={expandableConfig12}
                                >
                                </Table>
                            </section>
                        </section>
                        {/* 考试各小题分析 */}

                        {/* 学科知识点分析 */}
                        <section className={styles.analysis_content_chart}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc7} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}学科知识点分析-雷达图</span>
                                    <Space>
                                        <Select
                                            placeholder="请选择学科"
                                            options={singleSubjectList}
                                            value={subjectName13}
                                            style={{ marginLeft: 20, width: "120px" }}
                                            onChange={(value, options) => {
                                                if (!value) {
                                                    return;
                                                }
                                                setSubjectName13(options?.label);
                                                setSubjectId13(value);
                                            }}
                                        />
                                        <SchoolChoice onChange={(value) => {
                                            setSchoolIds11(value);
                                        }} />
                                    </Space>


                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef13?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Spin spinning={loading13} tip='计算中，请稍后'>
                                    <Echarts
                                        text={`学科知识点分析*${subtitle}${subjectName13}*雷达图`}
                                        data={echartData14}
                                        ref={echartRef13}
                                        type={"radar"}
                                        lengButton={lengButton13}
                                        hasExport={false}
                                        hasTable={false}
                                    />
                                </Spin>
                            </section>
                        </section>
                        <section className={styles.analysis_content_chart}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc7} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}学科知识点分析-折线图</span>
                                    {/* <Select
                                        placeholder="请选择学科"
                                        options={singleSubjectList}
                                        value={subjectName13}
                                        style={{ marginLeft: 20, width: "120px" }}
                                        onChange={(value, options) => {
                                            if (!value) {
                                                return;
                                            }
                                            setSubjectName13(options?.label);
                                            setSubjectId13(value);
                                        }}
                                    /> */}

                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                    echartRef13?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Spin spinning={loading13} tip='计算中，请稍后'>
                                    <Echarts
                                        text={`学科知识点分析*${subtitle}${subjectName13}*折线图`}
                                        data={echartData14}
                                        ref={echartRef13}
                                        type={"line"}
                                        lengButton={lengButton13}
                                        hasExport={false}
                                        hasTable={false}
                                    />
                                </Spin>
                            </section>
                        </section>

                        <section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={sectionSrc7} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}学科知识点分析-表格</span>
                                    <SchoolChoice onChange={(value) => {
                                        setSchoolIds11(value);
                                    }} />
                                </section>
                                <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload10}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource13}
                                    columns={columns13}
                                    locale={{ emptyText: loading13 ? "计算中，请稍后" : "暂无数据" }}
                                    loading={{ spinning: loading13, tip: "计算中，请稍后" }}
                                    expandable={expandableConfig13}
                                >
                                </Table>
                            </section>
                        </section>

                        {/* 学科知识点分析 */}
                        {!isShowExamComparison ? (
                            <section className={styles.analysis_tip}>
                                <section>
                                    {subtitle}整体分析报告中“当前考试分析”部分已结束，您可以点击 <Button type="link" style={{ color: "#4ABB6A", textDecoration: "underline", fontSize: 18 }} onClick={() => {
                                        setIsShowExamComparison(true);
                                        timer.current = setTimeout(() => scrollToSection(comparisonRef), 0);
                                    }}>考试对比</Button> 查看当前考试与历届历次考试的对比分析
                                </section>
                            </section>
                        ) : null}

                        {isShowExamComparison ? (<section className={styles.exam} ref={comparisonRef}>

                            <section className={styles.exam_ranking}>
                                <Flex>
                                    <Flex
                                        style={{
                                            display: "flex",
                                            alignItems: "center",
                                            color: "#8a8a8a",
                                        }}
                                    >
                                        {" "}
                                        当前考试 : &nbsp;
                                        <h3
                                            style={{
                                                color: "black",
                                            }}
                                        >
                                            {subtitle?.slice(0, -1)}
                                        </h3>
                                    </Flex>
                                </Flex>
                                <section className={styles.ranking}>
                                    <div className={styles.ranking_title}>对比考试: &nbsp;</div>
                                    <section className={styles.ranking_content}>
                                        {examList?.filter(item => item?.id !== params?.examId)?.map((item) => {
                                            return (
                                                <Tag
                                                    key={item.id}
                                                    // closeIcon
                                                    // onClose={(e) => {
                                                    //     e.preventDefault();
                                                    //     setExamList((prev) => {
                                                    //         return prev.filter((i) => i?.id !== item?.id)
                                                    //     });
                                                    // }}
                                                    style={{
                                                        color: "black",
                                                        fontWeight: "bold",
                                                        fontSize: 14,
                                                        marginTop: 4
                                                    }}
                                                >
                                                    {`${item?.term}*${item?.semester}*${item?.examName}`}
                                                </Tag>
                                            );
                                        })}
                                        <div
                                            className={styles.ranking_select}
                                            onClick={() => {
                                                setIsShowExamRanking(!isShowExamRanking);
                                            }}
                                        >
                                            选择考试
                                            <img
                                                src={isShowExamRanking ? upSrc : downSrc}
                                                width={14}
                                                height={12}
                                                style={{ marginLeft: 5 }}
                                            />
                                        </div>
                                    </section>
                                </section>
                                <ScreenPage
                                    isShow={isShowExamRanking}
                                    isSingle={false}
                                    isShowSubject={false}
                                    isShowSchool={false}
                                    // onSendSortList={(list = []) => {
                                    //     setSelectRaking(list?.[0]?.value || 200);
                                    //     setLimit(list?.[0]?.value || 200);
                                    //     setRankingList(list || []);

                                    // }}
                                    onChange={(e) => {

                                        if (!isShowExamRanking) {
                                            return;
                                        }

                                        setParams({
                                            ...params,
                                            schools: e?.currentSchool?.[0]?.schoolList?.map(item => item?.id) || e?.currentSchool?.map(item => item?.id),
                                        });
                                        const term = e?.currentGrade?.map(item => item?.name);
                                        const semester = e?.currentSemester?.map(item => item?.name);
                                        const examName = e?.currentExamination?.map(item => item?.name);
                                        getExam({
                                            term,
                                            semester,
                                            examName,
                                        }).then(res => {
                                            if (res.code === 200) {
                                                setExamList(res.data || []);
                                            }

                                        }).catch(error => {
                                            console.log(error, 'get-exam-error');

                                        })
                                    }}
                                    saveshow={(e) => {
                                        setIsShowExamRanking(e);
                                    }}
                                />
                            </section>
                            <section className={styles.analysis_content_chart} >
                                <section className={styles.analysis_content_chart_title}>
                                    <section className={styles.page_title} >
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}对比考试排名情况分析-图表</span>
                                        <Space>
                                            <Select
                                                placeholder="请选择学科"
                                                options={allSubjectList}
                                                value={subjectName4}
                                                style={{ marginLeft: 20, width: "120px" }}
                                                allowClear
                                                onChange={(value, option) => {
                                                    if (!value) {
                                                        setSubjectName4(null);
                                                        setSubjectId4("");
                                                        return;
                                                    }
                                                    setSubjectName4(option?.label);

                                                    setSubjectId4(value);
                                                }}
                                            />

                                            <SchoolChoice onChange={(value) => {
                                                setSchoolIds12(value);
                                            }} />
                                        </Space>
                                    </section>
                                    <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                        exportChart(chartRef)
                                    }}>导出图表</Button>
                                </section>
                                <Space style={{ marginBottom: 8 }}>
                                    {examSortList.length > 0 ? (
                                        examSortList.map((item, index) => {
                                            const isSelected = item?.value === examSelectSort;
                                            return (
                                                <Tag
                                                    onClick={() => handleSortClick2(item)}
                                                    color={isSelected ? 'green' : 'default'}
                                                    key={index}
                                                    style={{
                                                        cursor: 'pointer',
                                                    }}
                                                >
                                                    {item?.label}
                                                </Tag>
                                            );
                                        })
                                    ) : null}
                                </Space>
                                <section>
                                    <Space >
                                        {typeList1.length > 0 ? (
                                            typeList1.map((item, index) => {
                                                const isSelected = selectType1 === item;
                                                return (
                                                    <Tag
                                                        onClick={() => setSelectType1(item)}
                                                        color={isSelected ? 'green' : 'default'}
                                                        key={index}
                                                        style={{
                                                            cursor: 'pointer',
                                                        }}
                                                    >
                                                        {item}
                                                    </Tag>
                                                );
                                            })
                                        ) : null}
                                    </Space>
                                </section>
                                <section style={{ marginTop: 8 }}>

                                    <Space >
                                        {tags.length > 0 ? (
                                            tags.map((item, index) => {
                                                const isSelected = selectedTags.includes(item);
                                                return (
                                                    <Tag
                                                        onClick={() => handleTagClick(item)}
                                                        color={isSelected ? 'green' : 'default'}
                                                        key={index}
                                                        style={{
                                                            cursor: 'pointer',
                                                        }}
                                                    >
                                                        {item}
                                                    </Tag>
                                                );
                                            })
                                        ) : null}
                                    </Space>
                                </section>
                                <section className={styles.analysis_content_chart_content} >
                                    <Spin spinning={loading5} tip='计算中，请稍后'>
                                        <div ref={chartRef} style={{ width: '100%', height: '460px' }}></div>
                                    </Spin>
                                </section>
                            </section>

                            <section className={styles.analysis_content_table}>
                                <section className={styles.analysis_content_table_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}对比考试排名情况分析-表格</span>
                                        <Space>
                                            <Select
                                                placeholder="请选择学科"
                                                options={allSubjectList}
                                                value={subjectName4}
                                                style={{ marginLeft: 20, width: "120px" }}
                                                allowClear
                                                onChange={(value, option) => {
                                                    if (!value) {
                                                        setSubjectName4(null);
                                                        setSubjectId4("");
                                                        return;
                                                    }
                                                    setSubjectName4(option?.label);

                                                    setSubjectId4(value);
                                                }}
                                            />
                                            <SchoolChoice onChange={(value) => {
                                                setSchoolIds12(value);
                                            }} />
                                        </Space>
                                    </section>
                                    <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload11}>导出表格</Button>
                                </section>
                                <section className={styles.analysis_content_table_content}>
                                    <Table
                                        {...tableCommonProps}
                                        dataSource={dataSource5}
                                        columns={columns5}
                                        locale={{ emptyText: loading5 ? "计算中，请稍后" : "暂无数据" }}
                                        loading={{ spinning: loading5, tip: "计算中，请稍后" }}
                                        expandable={expandableConfig5}
                                    >
                                    </Table>
                                </section>
                            </section>
                            <section className={styles.analysis_content_chart}>
                                <section className={styles.analysis_content_chart_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}对比考试百分比情况分析-图表</span>
                                        <Space>
                                            <Select
                                                placeholder="请选择学科"
                                                options={allSubjectList}
                                                value={subjectName5}
                                                style={{ marginLeft: 20, width: "120px" }}
                                                allowClear
                                                onChange={(value, option) => {
                                                    if (!value) {
                                                        setSubjectName5(null);
                                                        setSubjectId5("");
                                                        return;
                                                    }
                                                    setSubjectName5(option?.label);

                                                    setSubjectId5(value);
                                                }}
                                            />
                                            <SchoolChoice onChange={(value) => {
                                                setSchoolIds13(value);
                                            }} />
                                        </Space>

                                    </section>
                                    <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                        exportChart(chartRef2)
                                    }}>导出图表</Button>
                                </section>

                                <Space>
                                    {rankingList.length > 0 ? (
                                        rankingList.map((item, index) => {
                                            const isSelected = selectRaking === item?.value;
                                            return (
                                                <Tag
                                                    onClick={() => handleRakingClick(item)}
                                                    color={isSelected ? 'green' : 'default'}
                                                    key={index}
                                                    style={{
                                                        cursor: 'pointer',
                                                    }}
                                                >
                                                    {item?.label}
                                                </Tag>
                                            );
                                        })
                                    ) : null}
                                </Space>
                                <Space style={{ marginTop: 8, width: '100%' }}>
                                    {typeList2?.length > 0 ? (
                                        typeList2.map((item, index) => {
                                            const isSelected = selectType2 === item;
                                            return (
                                                <Tag
                                                    onClick={() => setSelectType2(item)}
                                                    color={isSelected ? 'green' : 'default'}
                                                    key={index}
                                                    style={{
                                                        cursor: 'pointer',
                                                    }}
                                                >
                                                    {item}
                                                </Tag>
                                            );
                                        })
                                    ) : null}
                                </Space>
                                <Space style={{ marginTop: 8, width: '100%' }}>
                                    {tags2?.length > 0 ? (
                                        tags2?.map((item, index) => {
                                            const isSelected = selectedTags2.includes(item);
                                            return (
                                                <Tag
                                                    onClick={() => handleTagClick2(item)}
                                                    color={isSelected ? 'green' : 'default'}
                                                    key={index}
                                                    style={{
                                                        cursor: 'pointer',
                                                    }}
                                                >
                                                    {item}
                                                </Tag>
                                            );
                                        })
                                    ) : null}
                                </Space>
                                <section className={styles.analysis_content_chart_content}>
                                    <Spin spinning={loading6} tip='计算中，请稍后'>
                                        <div ref={chartRef2} style={{ width: '100%', height: '460px' }}></div>
                                    </Spin>
                                </section>
                            </section>

                            <section className={styles.analysis_content_table}>
                                <section className={styles.analysis_content_table_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}对比考试百分比情况分析-表格</span>
                                        <Space>
                                            <Select
                                                placeholder="请选择学科"
                                                options={allSubjectList}
                                                value={subjectName5}
                                                style={{ marginLeft: 20, width: "120px" }}
                                                allowClear
                                                onChange={(value, option) => {
                                                    if (!value) {
                                                        setSubjectName5(null);
                                                        setSubjectId5("");
                                                        return;
                                                    }
                                                    setSubjectName5(option?.label);

                                                    setSubjectId5(value);
                                                }}
                                            />
                                            <SchoolChoice onChange={(value) => {
                                                setSchoolIds13(value);
                                            }} />
                                        </Space>
                                    </section>
                                    <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload12}>导出表格</Button>
                                </section>
                                <Space>
                                    {rateList?.length > 0 ? (
                                        rateList?.map((item, index) => {
                                            const isSelected = selectedNavTag === item?.label;
                                            return (
                                                <Tag
                                                    onClick={() => handleNavTagClick(item)}
                                                    color={isSelected ? 'green' : 'default'}
                                                    key={index}
                                                    style={{
                                                        cursor: 'pointer',
                                                        fontSize: 16,
                                                    }}
                                                >
                                                    {item?.label}
                                                </Tag>
                                            );
                                        })
                                    ) : null}
                                </Space>
                                <section className={styles.analysis_content_table_content}>
                                    <Table
                                        {...tableCommonProps}
                                        dataSource={dataSource6}
                                        columns={columns6}
                                        locale={{ emptyText: loading6 ? "计算中，请稍后" : "暂无数据" }}
                                        loading={{ spinning: loading6, tip: "计算中，请稍后" }}
                                        expandable={expandableConfig6}
                                    >
                                    </Table>
                                </section>
                            </section>

                            <section className={styles.analysis_content_chart}>
                                <section className={styles.analysis_content_chart_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}对比考试参数情况分析-图表</span>
                                        <Space>
                                            <Select
                                                placeholder="请选择学科"
                                                options={allSubjectList}
                                                value={subjectName6}
                                                style={{ marginLeft: 20, width: "120px" }}
                                                allowClear
                                                onChange={(value, option) => {
                                                    if (!value) {
                                                        setSubjectName6(null);
                                                        setSubjectId6("");
                                                        return;
                                                    }
                                                    setSubjectName6(option?.label);

                                                    setSubjectId6(value);
                                                }}
                                            />
                                            <SchoolChoice onChange={(value) => {
                                                setSchoolIds14(value);
                                            }} />
                                        </Space>
                                    </section>
                                    <Button type='primary' style={{ fontSize: 16 }} onClick={() => {
                                        exportChart(chartRef3)
                                    }}>导出图表</Button>
                                </section>

                                <Space>
                                    {sortParamsList?.length > 0 ? (
                                        sortParamsList?.map((item, index) => {
                                            const isSelected = selectSortParams === item?.value;
                                            return (
                                                <Tag
                                                    onClick={() => handleRakingClick100(item)}
                                                    color={isSelected ? 'green' : 'default'}
                                                    key={index}
                                                    style={{
                                                        cursor: 'pointer',
                                                    }}
                                                >
                                                    {item?.label}
                                                </Tag>
                                            );
                                        })
                                    ) : null}
                                </Space>
                                <Space>
                                    {rankingList?.length > 0 ? (
                                        rankingList?.map((item, index) => {
                                            const isSelected = selectRaking === item?.value;
                                            return (
                                                <Tag
                                                    onClick={() => handleRakingClick(item)}
                                                    color={isSelected ? 'green' : 'default'}
                                                    key={index}
                                                    style={{
                                                        cursor: 'pointer',
                                                    }}
                                                >
                                                    {item?.label}
                                                </Tag>
                                            );
                                        })
                                    ) : null}
                                </Space>

                                <Space style={{ marginTop: 8, width: '100%' }}>
                                    {chartTagList?.length > 0 ? (
                                        chartTagList?.map((item, index) => {
                                            const isSelected = chartTag === item?.label;
                                            return (
                                                <Tag
                                                    onClick={() => handleNavTagClick4(item)}
                                                    color={isSelected ? 'green' : 'default'}
                                                    key={index}
                                                    style={{
                                                        cursor: 'pointer',
                                                    }}
                                                >
                                                    {item?.label}
                                                </Tag>
                                            );
                                        })
                                    ) : null}
                                </Space>
                                <Space style={{ marginTop: 8, width: '100%' }}>
                                    {typeList3.length > 0 ? (
                                        typeList3.map((item, index) => {
                                            const isSelected = selectType3 === item;
                                            return (
                                                <Tag
                                                    onClick={() => setSelectType3(item)}
                                                    color={isSelected ? 'green' : 'default'}
                                                    key={index}
                                                    style={{
                                                        cursor: 'pointer',
                                                    }}
                                                >
                                                    {item}
                                                </Tag>
                                            );
                                        })
                                    ) : null}
                                </Space>
                                <section style={{ marginTop: 8 }}>
                                    <Space>
                                        {tags3?.length > 0 ? (
                                            tags3?.map((item, index) => {
                                                const isSelected = selectedTags3.includes(item);
                                                return (
                                                    <Tag
                                                        onClick={() => handleTagClick3(item)}
                                                        color={isSelected ? 'green' : 'default'}
                                                        key={index}
                                                        style={{
                                                            cursor: 'pointer',
                                                        }}
                                                    >
                                                        {item}
                                                    </Tag>
                                                );
                                            })
                                        ) : null}
                                    </Space>
                                </section>
                                <section className={styles.analysis_content_chart_content}>
                                    <Spin spinning={loading7} tip='计算中，请稍后'>
                                        <div ref={chartRef3} style={{ width: '100%', height: '460px' }}></div>
                                    </Spin>
                                </section>
                            </section>

                            <section className={styles.analysis_content_table}>
                                <section className={styles.analysis_content_table_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}对比考试参数情况分析-表格</span>
                                        <Space>
                                            <Select
                                                placeholder="请选择学科"
                                                options={allSubjectList}
                                                value={subjectName6}
                                                style={{ marginLeft: 20, width: "120px" }}
                                                allowClear
                                                onChange={(value, option) => {
                                                    if (!value) {
                                                        setSubjectName6(null);
                                                        setSubjectId6("");
                                                        return;
                                                    }
                                                    setSubjectName6(option?.label);

                                                    setSubjectId6(value);
                                                }}
                                            />

                                            <SchoolChoice onChange={(value) => {
                                                setSchoolIds14(value);
                                            }} />
                                        </Space>
                                    </section>
                                    <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload13}>导出表格</Button>
                                </section>

                                <section>
                                    <Space style={{ marginTop: 8 }}>
                                        {sortParamsList.length > 0 ? (
                                            sortParamsList.map((item, index) => {
                                                const isSelected = selectSortParams === item?.value;
                                                return (
                                                    <Tag
                                                        onClick={() => handleRakingClick100(item)}
                                                        color={isSelected ? 'green' : 'default'}
                                                        key={index}
                                                        style={{
                                                            cursor: 'pointer',
                                                        }}
                                                    >
                                                        {item?.label}
                                                    </Tag>
                                                );
                                            })
                                        ) : null}
                                    </Space>
                                </section>
                                <Space style={{ marginTop: 8 }}>
                                    {paramsTypeList.length > 0 ? (
                                        paramsTypeList.map((item, index) => {
                                            const isSelected = selectedNavTag2 === item?.label;
                                            return (
                                                <Tag
                                                    onClick={() => handleNavTagClick2(item)}
                                                    color={isSelected ? 'green' : 'default'}
                                                    key={index}
                                                    style={{
                                                        cursor: 'pointer',
                                                    }}
                                                >
                                                    {item?.label}
                                                </Tag>
                                            );
                                        })
                                    ) : null}
                                </Space>


                                {/* <section style={{ marginTop: 8 }}>
                                    <Space>
                                        {rateList2.length > 0 ? (
                                            rateList2.map((item, index) => {
                                                const isSelected = selectedNavTag3 === item?.label;
                                                return (
                                                    <Tag
                                                        onClick={() => handleNavTagClick3(item)}
                                                        color={isSelected ? 'green' : 'default'}
                                                        key={index}
                                                        style={{
                                                            cursor: 'pointer',
                                                            fontSize: 16,
                                                        }}
                                                    >
                                                        {item?.label}
                                                    </Tag>
                                                );
                                            })
                                        ) : null}
                                    </Space>
                                </section> */}
                                <section className={styles.analysis_content_table_content}>
                                    <Table
                                        {...tableCommonProps}
                                        dataSource={dataSource7}
                                        columns={columns7}
                                        locale={{ emptyText: loading7 ? "计算中，请稍后" : "暂无数据" }}
                                        loading={{ spinning: loading7, tip: "计算中，请稍后" }}
                                        expandable={expandableConfig7}
                                    >
                                    </Table>
                                </section>
                            </section>
                            <section className={styles.analysis_content_table}>
                                <section className={styles.analysis_content_table_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}对比考试知识点分析-表格</span>
                                        <Space>
                                            <Select
                                                placeholder="请选择学科"
                                                options={singleSubjectList}
                                                value={subjectName14}
                                                style={{ marginLeft: 20, width: "120px" }}
                                                onChange={(value, options) => {
                                                    if (!value) {
                                                        return;
                                                    }
                                                    setSubjectName14(options?.label);
                                                    setSubjectId14(value);
                                                }}
                                            />
                                            <SchoolChoice onChange={(value) => {
                                                setSchoolIds15(value);
                                            }} />
                                        </Space>
                                    </section>
                                    <Button type='primary' style={{ fontSize: 16 }} onClick={handleDownload14}>导出表格</Button>
                                </section>
                                <section className={styles.analysis_content_table_content}>
                                    <Table
                                        {...tableCommonProps}
                                        dataSource={dataSource14}
                                        columns={columns14}
                                        locale={{ emptyText: loading14 ? "计算中，请稍后" : "暂无数据" }}
                                        loading={{ spinning: loading14, tip: "计算中，请稍后" }}
                                    >
                                    </Table>
                                </section>
                            </section>
                        </section>) : null}
                        <section className={styles.download}>
                            <Flex
                                style={{
                                    padding: "4px 8px",
                                    border: "1px solid #666",
                                    borderRadius: 5,
                                    cursor: "pointer",
                                    width: '200px',
                                    marginTop: 8
                                }}
                                justify='center'
                                alignItems="center"
                            >
                                下载报告
                                <img
                                    src={downloadSrc}
                                    width={14}
                                    height={12}
                                    style={{ marginLeft: 5 }}
                                />
                            </Flex>
                        </section>

                        <section style={{ height: 32 }}></section>

                        {echartImg && (
                            <Modal
                                title="导出图表"
                                width={'80vw'}
                                className="custom-modal"
                                open={true}
                                okText="下载"
                                onCancel={() => {
                                    setEchartImg("");
                                }}
                                onOk={downloadImg}
                            >
                                <Flex style={{ height: "100%" }} alignItems="center" justify="center">
                                    <Image src={echartImg} width={"100%"} />
                                </Flex>
                            </Modal>
                        )}
                    </section>
                </Col>
                {/* <Col span={4}>
                    <section className={styles.analysis_navigation}>
                        <section className={styles.analysis_navigation_action}>
                            <Flex
                                style={{
                                    padding: "4px 8px",
                                    border: "1px solid #666",
                                    borderRadius: 5,
                                    cursor: "pointer",
                                    width: '200px',
                                    marginTop: 8
                                }}
                                justify='center'
                                alignItems="center"
                                onClick={() => {
                                    setIsShow(!isShow);
                                }}
                            >
                                选择考试和学校
                                <img
                                    src={isShow ? upSrc : downSrc}
                                    width={14}
                                    height={12}
                                    style={{ marginLeft: 5 }}
                                />
                            </Flex>
                            <Flex
                                style={{
                                    padding: "4px 8px",
                                    border: "1px solid #666",
                                    borderRadius: 5,
                                    cursor: "pointer",
                                    width: '200px',
                                    marginTop: 8
                                }}
                                justify='center'
                                alignItems="center"
                            >
                                报告模板：整体报告
                                <img
                                    src={editSrc}
                                    width={14}
                                    height={12}
                                    style={{ marginLeft: 5 }}
                                />
                            </Flex>
                            <Flex
                                style={{
                                    padding: "4px 8px",
                                    border: "1px solid #666",
                                    borderRadius: 5,
                                    cursor: "pointer",
                                    width: '200px',
                                    marginTop: 8
                                }}
                                justify='center'
                                alignItems="center"
                            >
                                下载报告
                                <img
                                    src={downloadSrc}
                                    width={14}
                                    height={12}
                                    style={{ marginLeft: 5 }}
                                />
                            </Flex>
                        </section>
                        <section className={styles.analysis_navigation_timeline}>
                            <Timeline
                                items={timelineItems}
                            />
                        </section>
                    </section>
                </Col> */}
            </Row>
            <StudentGroup
                ref={studentGroupRef}
                params={studentGroupParams}
                title={title}
            />
            <StudentModal ref={studentRef} params={studentParams} />

            <Modal
                title={`${record?.name}老师课程实录`}
                open={open}
                width={'80vw'}
                styles={{ body: { height: "80vh" } }}
                onOk={() => setOpen(false)}
                onCancel={() => setOpen(false)}
                centered
                destroyOnClose
                maskClosable={false}
            >
                <section style={{ display: 'flex', flexDirection: 'column' }}>
                    <header className={styles.memoir}>
                        <Space>
                            {memoirList.map(item => {
                                return (<Button size="large" type={item.id === selectMemoirId ? "primary" : "default"} onClick={() => {
                                    setSelectMemoirId(item.id);
                                }} >{item?.text}</Button>)
                            })}
                        </Space>
                    </header>
                    <main className={styles.memoir_courseware} style={{ backgroundImage: `url(${selectMemoir.url})` }}>

                    </main>
                </section>
            </Modal>


            <Modal
                width={'80vw'}
                title={title}
                open={visible}
                loading={modalLoading}
                styles={{ body: { height: "80vh", overflowY: "scroll" } }}
                onCancel={() => setVisible(false)}
                maskClosable={false}
                onOk={() => {
                    setVisible(false);

                }}
                destroyOnClose
                centered
            >
                {totalDataSource?.length > 0 ? (
                    totalDataSource?.map((item, index) => {
                        if (item.data?.length === 0) {
                            return;
                        }
                        return (
                            <section className={styles.modal_content} key={index}>
                                <span style={{ fontSize: 16, fontWeight: "bold" }}>{item?.name}</span>
                                <section style={{ overflow: "auto" }}>
                                    <Table
                                        bordered={true}
                                        dataSource={item?.data}
                                        columns={item?.columns}
                                        scroll={{ x: 1500 }}
                                        // height={460}
                                        pagination={false}
                                        sticky={true}
                                        rowKey="id"
                                    // expandable={{
                                    //     defaultExpandedRowKeys: [item?.data?.[0]?.id],
                                    // }}
                                    >
                                    </Table>
                                </section>
                                <Button
                                    type="primary"
                                    style={{ marginTop: 16 }}
                                    disabled={!dataSource?.length}
                                    onClick={() => handleDownload15(index, item?.name)}
                                >
                                    导出表格
                                </Button>
                            </section>
                        )
                    })
                ) : <Empty />}


            </Modal>

            <Modal
                title='报告模板选择'
                centered
                open={templateOpen}
                destroyOnClose
                width={600}
                maskClosable={false}
                onCancel={() => {
                    setTemplateOpen(false);
                    setSelectTemplate('');
                }}
                onOk={() => {
                    setTemplateOpen(false);
                }}
            >
                <Form
                    form={form}
                >
                    <Form.Item label="报告模板">
                        <Select placeholder="请选择报告模板" value={selectTemplateName} allowClear onChange={(value, option) => {
                            setSelectTemplate(value);
                            setSelectTemplateName(option.label);
                        }} options={templateList?.map(item => {
                            return {
                                value: item.id,
                                label: item.title
                            }
                        })} style={{ width: '100%' }} />
                    </Form.Item>
                </Form>
            </Modal>

            <TeacherGroup ref={teacherGroupRef} params={teacherGroupParams} record={record} />
        </div>
    )
};


export default AnalysisPage;