hujunpeng
4 months ago
commit
079c6c5a2b
5 changed files with 325 additions and 4 deletions
@ -0,0 +1,276 @@ |
|||||||
|
import React, { useEffect, useState, useRef } from 'react'; |
||||||
|
import { Row, Col, Select, Table, Card } from 'antd'; |
||||||
|
import ReactECharts from 'echarts-for-react'; |
||||||
|
import {examStatisticsInit, getIndustryList} from "api/exam-online/index"; // 修改接口为获取带详情的试卷列表
|
||||||
|
|
||||||
|
const { Option } = Select; |
||||||
|
|
||||||
|
const examTableColumns = [ |
||||||
|
{ |
||||||
|
title: '考试次数', |
||||||
|
dataIndex: 'examTimes', |
||||||
|
key: 'examTimes', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '参与人数', |
||||||
|
dataIndex: 'participants', |
||||||
|
key: 'participants', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '平均用时（分钟）', |
||||||
|
dataIndex: 'averageTime', |
||||||
|
key: 'averageTime', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '合格率', |
||||||
|
dataIndex: 'passRate', |
||||||
|
key: 'passRate', |
||||||
|
}, |
||||||
|
]; |
||||||
|
type initData = { |
||||||
|
questionCount: number; |
||||||
|
paperCount: number; |
||||||
|
examCount: number; |
||||||
|
industryDimensionData: { value: number; name: string }[]; |
||||||
|
aqServiceDimensionData: { value: number; name: string }[]; |
||||||
|
examTableData: { |
||||||
|
key: string; |
||||||
|
examTimes: number; |
||||||
|
participants: number; |
||||||
|
averageTime: number; |
||||||
|
passRate: string; |
||||||
|
}[]; |
||||||
|
scoreDistributionData: { value: number; name: string }[]; |
||||||
|
paperDistributionData: { value: number; name: string }[]; |
||||||
|
}; |
||||||
|
// 模拟题型占比数据
|
||||||
|
const questionTypeDistributionData = [ |
||||||
|
{ value: 25, name: '选择题' }, |
||||||
|
{ value: 25, name: '填空题' }, |
||||||
|
{ value: 25, name: '判断题' }, |
||||||
|
{ value: 25, name: '简答题' }, |
||||||
|
]; |
||||||
|
|
||||||
|
const Dashboard: React.FC = () => { |
||||||
|
const industrySelectRef = useRef<HTMLSelectElement>(null); |
||||||
|
|
||||||
|
// 定义状态来存储从后台获取的数据
|
||||||
|
const [questionCount, setQuestionCount] = useState(0); |
||||||
|
const [paperCount, setPaperCount] = useState(0); |
||||||
|
const [examCount, setExamCount] = useState(0); |
||||||
|
const [industryOptions, setIndustryOptions] = useState<{ value: string; label: string }[]>([]); |
||||||
|
const [industryDimensionData, setIndustryDimensionData] = useState<{ value: number; name: string }[]>([]); |
||||||
|
const [aqServiceDimensionData, setAqServiceDimensionData] = useState<{ value: number; name: string }[]>([]); |
||||||
|
const [examTableData, setExamTableData] = useState<{ |
||||||
|
key: string; |
||||||
|
examTimes: number; |
||||||
|
participants: number; |
||||||
|
averageTime: number; |
||||||
|
passRate: string; |
||||||
|
}[]>([]); |
||||||
|
const [scoreDistributionData, setScoreDistributionData] = useState<{ value: number; name: string }[]>([]); |
||||||
|
const [paperDistributionData, setPaperDistributionData] = useState<{ value: number; name: string }[]>([]); |
||||||
|
|
||||||
|
// 新增状态来控制显示的数据
|
||||||
|
const [showIndustryDimension, setShowIndustryDimension] = useState(true); |
||||||
|
const [showAQServiceDimension, setShowAQServiceDimension] = useState(true); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
// 模拟从后台获取数据
|
||||||
|
const fetchData = async () => { |
||||||
|
try { |
||||||
|
// 获取监管行业列表
|
||||||
|
const industryResponse = await getIndustryList(); |
||||||
|
setIndustryOptions(industryResponse.map((item: any) => ({ value: item.industry_id, label: item.industry_name }))); |
||||||
|
// 这里可以替换为实际的 API 请求
|
||||||
|
const response:initData = await examStatisticsInit(); |
||||||
|
// 更新状态
|
||||||
|
setQuestionCount(response.questionCount); |
||||||
|
setPaperCount(response.paperCount); |
||||||
|
setExamCount(response.examCount); |
||||||
|
|
||||||
|
setIndustryDimensionData(response.industryDimensionData); |
||||||
|
setAqServiceDimensionData(response.aqServiceDimensionData); |
||||||
|
setExamTableData(response.examTableData); |
||||||
|
setScoreDistributionData(response.scoreDistributionData); |
||||||
|
setPaperDistributionData(response.paperDistributionData); |
||||||
|
} catch (error) { |
||||||
|
console.error('数据获取失败:', error); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
fetchData(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
// 可以在这里添加下拉框选择变化的监听逻辑
|
||||||
|
if (industrySelectRef.current) { |
||||||
|
industrySelectRef.current.addEventListener('change', () => { |
||||||
|
// 处理选择变化逻辑
|
||||||
|
}); |
||||||
|
} |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleSelectChange = (value: string) => { |
||||||
|
console.log('Selected value:', value); |
||||||
|
if (value === '') { |
||||||
|
// 选择“全部”
|
||||||
|
setShowIndustryDimension(true); |
||||||
|
setShowAQServiceDimension(true); |
||||||
|
} else { |
||||||
|
// 选择其他选项
|
||||||
|
setShowIndustryDimension(false); |
||||||
|
setShowAQServiceDimension(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// 环状图配置项生成函数
|
||||||
|
const getRingChartOption = (data: { value: number; name: string }[]) => ({ |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)', |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
orient: 'vertical', |
||||||
|
right: 10, |
||||||
|
top: 'center', |
||||||
|
data: data.map(item => item.name), |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '占比', |
||||||
|
type: 'pie', |
||||||
|
radius: ['30%', '50%'], // 设置为环状图
|
||||||
|
center: ['40%', '50%'], |
||||||
|
data, |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
const getPieChartOption = (data: { value: number; name: string }[]) => ({ |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)', |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
orient: 'vertical', |
||||||
|
right: 10, |
||||||
|
top: 'center', |
||||||
|
data: data.map(item => item.name), |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '占比', |
||||||
|
type: 'pie', |
||||||
|
radius: '50%', |
||||||
|
center: ['40%', '50%'], |
||||||
|
data, |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div style={{ padding: 20 }}> |
||||||
|
{/* 第一行：试题数、试卷数、考试次数 */} |
||||||
|
<Row gutter={16}> |
||||||
|
<Col span={8}> |
||||||
|
<div style={{ textAlign: 'center', background: '#DCE4F8', height: 60 }}> |
||||||
|
<p>试题{questionCount}条</p> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
<Col span={8}> |
||||||
|
<div style={{ textAlign: 'center', background: '#DCE4F8', height: 60 }}> |
||||||
|
<p>试卷{paperCount}套</p> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
<Col span={8}> |
||||||
|
<div style={{ textAlign: 'center', background: '#DCE4F8', height: 60 }}> |
||||||
|
<p>考试{examCount}次</p> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
|
||||||
|
{/* 下面分为左右两部分 */} |
||||||
|
<Row gutter={16} style={{ marginTop: 20 }}> |
||||||
|
{/* 左半区：题库情况 */} |
||||||
|
<Col span={12}> |
||||||
|
<Card |
||||||
|
title={( |
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> |
||||||
|
<span>题库情况</span> |
||||||
|
<span> |
||||||
|
监管行业： |
||||||
|
<Select placeholder="请选择监管行业" onChange={handleSelectChange} style={{ width: 180 }} defaultValue=""> |
||||||
|
<Option key="" value="">全部</Option> |
||||||
|
{industryOptions.map(option => ( |
||||||
|
<Option key={option.value} value={option.value}> |
||||||
|
{option.label} |
||||||
|
</Option> |
||||||
|
))} |
||||||
|
</Select> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
> |
||||||
|
{/* 监管行业维度统计环状图 */} |
||||||
|
{showIndustryDimension && ( |
||||||
|
<div style={{ marginBottom: 20 }}> |
||||||
|
<h3>监管行业维度统计</h3> |
||||||
|
<ReactECharts option={getRingChartOption(industryDimensionData)} /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{!showIndustryDimension && ( |
||||||
|
<div style={{ marginBottom: 20 }}> |
||||||
|
<h3>AQ 服务类型维度统计</h3> |
||||||
|
<ReactECharts option={getRingChartOption(aqServiceDimensionData)} /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<hr style={{ border: '1px solid #e8e8e8', marginBottom: 20 }} /> |
||||||
|
{/* AQ 服务类型维度统计环状图 */} |
||||||
|
{showAQServiceDimension && ( |
||||||
|
<div> |
||||||
|
<h3>AQ 服务类型维度统计</h3> |
||||||
|
<ReactECharts option={getRingChartOption(aqServiceDimensionData)} /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{!showAQServiceDimension && ( |
||||||
|
<div> |
||||||
|
<h3>题型占比</h3> |
||||||
|
<ReactECharts option={getRingChartOption(questionTypeDistributionData)} /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
{/* 右半区：考试情况和试卷情况 */} |
||||||
|
<Col span={12}> |
||||||
|
{/* 考试情况 */} |
||||||
|
<Card |
||||||
|
title={( |
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> |
||||||
|
<span>考试情况</span> |
||||||
|
<a>{('详情>>')}</a> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
> |
||||||
|
{/* 考试情况表格 */} |
||||||
|
<Table columns={examTableColumns} dataSource={examTableData} pagination={false} /> |
||||||
|
<ReactECharts option={getPieChartOption(scoreDistributionData)} /> |
||||||
|
</Card> |
||||||
|
{/* 试卷情况环状图 */} |
||||||
|
<Card |
||||||
|
title={( |
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> |
||||||
|
<span>试卷情况</span> |
||||||
|
<a>{('详情>>')}</a> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
style={{ marginTop: 20 }} |
||||||
|
> |
||||||
|
<ReactECharts option={getRingChartOption(paperDistributionData)} /> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Dashboard; |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import Dashboard from "./compoents/ExamStatisticsPage"; |
||||||
|
|
||||||
|
interface States { |
||||||
|
resData: any |
||||||
|
visible: boolean |
||||||
|
title: string |
||||||
|
current: any |
||||||
|
} |
||||||
|
|
||||||
|
class ExamStatistics extends Component<any, States> { |
||||||
|
constructor(props: any) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
resData: undefined, |
||||||
|
visible: false, |
||||||
|
title: '新增公告', |
||||||
|
current: {} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount() { |
||||||
|
// this.getList()
|
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className="container"> |
||||||
|
<Dashboard /> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default ExamStatistics; |
||||||
Loading…
Reference in new issue