FE-lab-xcx/pages_safetyEducationExamination/views/home/component/academicYearStats.vue

<!-- 学年数据统计 -->
<template>
	<view class="academicYearStats-component">
		<view class="card">
			<view class="card-header">
				<text class="card-title">📊 学年数据统计</text>
				<view class="btn-outline" @click="examElLabEduRelationGraduationReport">成绩报告</view>
			</view>
			<view class="card-body">
				<view class="year-row" v-for="(item, index) in yearStatsList" :key="index">
					<text class="year-label">{{ item.year }}</text>
					<text :class="['year-status', item.statusClass]">{{ item.statusText }}</text>
				</view>
				<view v-if="!yearStatsList.length" class="empty-tip">暂无统计数据</view>
			</view>
		</view>
		<dataStatisticsReport v-if="dialogType" :dataStatisticsReportPropsData="dataStatisticsReportPropsData"></dataStatisticsReport>
	</view>
</template>

<script>
	import { 
		examElLabEduRelationAcademicYearProgress, 
		examElLabEduRelationGraduationReport,
	} from '@/pages_safetyEducationExamination/api/index.js'
	import { dataStatisticsReport } from './dataStatisticsReport'
	export default {
		components: {
			dataStatisticsReport,
		},
		data() {
			return {
				yearStatsList: [],
				dataStatisticsReportPropsData:{},
				dialogType:false,
			}
		},
		created() {

		},
		mounted() {
			this.examElLabEduRelationAcademicYearProgress();
		},
		methods: {
			//年度数据
			async examElLabEduRelationAcademicYearProgress() {
				try {
					const { data } = await examElLabEduRelationAcademicYearProgress();
					if (data.code === 200) {
						this.yearStatsList = (data.data || []).map(item => ({
							year: item.academicYear,
							statusText: item.statusCode == '0' ? `未开始` : (item.statusCode == '2' ? `通过 · `+item.score+` 分` : (item.statusCode == '1' ? `进行中` : '未通过')),
							statusClass: item.statusCode == '2' ? 'year-status-pass' : (item.statusCode == '1' ? 'year-status-going' : 'year-status-text')
						}));
					}
				} catch (e) { console.error('获取学年统计失败', e); }
			},
			async examElLabEduRelationGraduationReport() {
				try {
					const { data } = await examElLabEduRelationGraduationReport({});
					if(data.data.studyHoursList[0]&&data.data.examPassRecords[0]){
						this.$set(this, 'dataStatisticsReportPropsData', data.data);
						this.$set(this,'dialogType',true);
					}else{
						uni.showToast({
							title: '请完成至少一次课程学习与考试',
							icon:"none",
							mask:true,
							duration: 2000
						});
					}
				} catch (e) { console.error('获取成绩报表失败', e); }
			},
		},

	}
</script>

<style lang="stylus" scoped>
	.academicYearStats-component {
		margin:0 32rpx 32rpx;
		.card {
			background: #fff;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
			border: 1px solid #dde3ed;
		}

		.card-header {
			background: #f4f6fa;
			padding: 20rpx 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.card-title {
				font-size: 28rpx;
				font-weight: 700;
				color: #333;
			}
			.btn-outline{
				height: 56rpx;
				line-height:56rpx;
				font-size: 24rpx;
				padding: 0 20rpx;
				border-radius: 12rpx;
				color: #1857d4;
				border: 1px solid rgba(24, 87, 212, .3);
			}

			.header-link {
				font-size: 24rpx;
				color: #1857d4;
			}
		}
		
		.card-body {
			padding: 16rpx 28rpx 24rpx;
			
			// 学年统计样式
			.year-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 12rpx 0;
				border-bottom: 1px solid #f4f6fa;
				&:last-child { border-bottom: none; }
			}
			.year-label { font-size: 26rpx; color: #333; font-weight: 500; }
			.year-status { font-size: 24rpx; font-weight: 500; }
			.year-status-pass { color: #0d8f6f;font-weight:600; }
			.year-status-going { color: #1857d4; }
			.year-status-text { color: #333; }
			.empty-tip { text-align: center; padding: 30rpx 0; color: #ccc; font-size: 24rpx; }
		}
	}
</style>