【页面案例汇总】微信小程序成绩统计分析页面

以下是示例代码：

<template>
  <view class="container">
    <!-- 学期选择器 -->
    <picker :range="{{ semesters }}" @change="handleSemesterChange">
      <view class="picker">
        {{ selectedSemester }}
        <icon type="arrow-down" size="14" color="#999"></icon>
      </view>
    </picker>

    <!-- 学科选择器 -->
    <picker :range="{{ subjects }}" @change="handleSubjectChange">
      <view class="picker">
        {{ selectedSubject }}
        <icon type="arrow-down" size="14" color="#999"></icon>
      </view>
    </picker>

    <!-- 成绩表格 -->
    <table class="score-table">
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(score, index) in filteredScores" :key="index">
          <td>{{ score.studentId }}</td>
          <td>{{ score.name }}</td>
          <td>{{ score.score }}</td>
        </tr>
      </tbody>
    </table>

    <!-- 分析结果 -->
    <view class="analysis-result">
      <view class="result-item">
        <text class="result-title">平均分：</text>
        <text class="result-value">{{ averageScore }}</text>
      </view>
      <view class="result-item">
        <text class="result-title">最高分：</text>
        <text class="result-value">{{ maxScore }}</text>
      </view>
      <view class="result-item">
        <text class="result-title">最低分：</text>
        <text class="result-value">{{ minScore }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      semesters: ['2022年春季', '2021年秋季', '2021年春季'], // 学期列表
      selectedSemester: '2022年春季', // 当前选中的学期
      subjects: ['语文', '数学', '英语'], // 学科列表
      selectedSubject: '语文', // 当前选中的学科
      scores: [
        { studentId: '20211101', name: '张三', subject: '语文', semester: '2022年春季', score: 89 },
        { studentId: '20211102', name: '李四', subject: '语文', semester: '2022年春季', score: 78 },
        { studentId: '20211103', name: '王五', subject: '数学', semester: '2022年春季', score: 95 },
        { studentId: '20211104', name: '赵六', subject: '数学', semester: '2022年春季', score: 86 },
        { studentId: '20211105', name: '小明', subject: '英语', semester: '2022年春季', score: 92 },
        { studentId: '20211106', name: '小红', subject: '英语', semester: '2022年春季', score: 80 }
      ] // 成绩列表
    }
  },
  computed: {
    // 根据当前选中的学期和学科筛选出对应的成绩列表
    filteredScores() {
      return this.scores.filter(score => score.semester === this.selectedSemester && score.subject === this.selectedSubject)
    },
    // 计算平均分
    averageScore() {
      const filteredScores = this.filteredScores
      if (filteredScores.length === 0) {
        return 0
      }
      const totalScore = filteredScores.reduce((accumulator, currentValue) => accumulator + currentValue.score, 0)
      return (totalScore / filteredScores.length).toFixed(2)
    },
    // 计算最高分
    maxScore() {
      const filteredScores = this.filteredScores
      if (filteredScores.length === 0) {
        return 0
      }
      return Math.max(...filteredScores.map(score => score.score))
    },
    // 计算最低分
    minScore() {
      const filteredScores = this.filteredScores
      if (filteredScores.length === 0) {
        return 0
      }
      return Math.min(...filteredScores.map(score => score.score))
    }
  },
  methods: {
    // 当学期选择器的值改变时更新当前选中的学期
    handleSemesterChange(event) {
      this.selectedSemester = this.semesters[event.detail.value]
    },
    // 当学科选择器的值改变时更新当前选中的学科
    handleSubjectChange(event) {
      this.selectedSubject = this.subjects[event.detail.value]
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.picker {
  display: flex;
  align-items: center;
  margin: 20rpx 0;
}

.score-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20rpx;
}

.score-table th,
.score-table td {
  border: 1rpx solid #eee;
  padding: 10rpx;
  text-align: center;
}

.analysis-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16rpx;
}

.result-item {
  display: flex;
  margin-bottom: 10rpx;
}

.result-title {
  color: #999;
}

.result-value {
  font-weight: bold;
  margin-left: 10rpx;
}
</style>

微信小程序成绩统计分析页面