vitesse-yitisheng-web/src/components/school/HistoricalScores.vue

<script setup lang="ts">
import { ref } from 'vue'

interface ScoreData {
  year: number
  province: string
  category: string
  minScore: number
  avgScore: number
  maxScore: number
  rank: number
}

const selectedYear = ref(2024)
const selectedProvince = ref('山东')
const selectedCategory = ref('理科')

const years = [2024, 2023, 2022, 2021, 2020]
const provinces = ['山东', '北京', '上海', '江苏', '浙江', '广东', '四川']
const categories = ['理科', '文科', '综合']

const scoreData: ScoreData[] = [
  { year: 2024, province: '山东', category: '理科', minScore: 580, avgScore: 600, maxScore: 620, rank: 15000 },
  { year: 2024, province: '山东', category: '文科', minScore: 560, avgScore: 580, maxScore: 600, rank: 8000 },
  { year: 2023, province: '山东', category: '理科', minScore: 575, avgScore: 595, maxScore: 615, rank: 16000 },
  { year: 2023, province: '山东', category: '文科', minScore: 555, avgScore: 575, maxScore: 595, rank: 8500 },
  { year: 2022, province: '山东', category: '理科', minScore: 570, avgScore: 590, maxScore: 610, rank: 17000 },
  { year: 2022, province: '山东', category: '文科', minScore: 550, avgScore: 570, maxScore: 590, rank: 9000 },
]

const filteredScores = computed(() => {
  return scoreData.filter(
    item =>
      item.year === selectedYear.value &&
      item.province === selectedProvince.value &&
      item.category === selectedCategory.value,
  )
})
</script>

<template>
  <div class="rounded-lg bg-white p-5 shadow-sm dark:bg-slate-800">
    <div class="mb-4 flex items-center justify-between">
      <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
        历年分数
      </h2>
    </div>

    <!-- 筛选条件 -->
    <div class="mb-5 flex flex-wrap gap-3">
      <select
        v-model="selectedYear"
        class="rounded border border-gray-200 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
      >
        <option v-for="year in years" :key="year" :value="year">
          {{ year }}年
        </option>
      </select>
      <select
        v-model="selectedProvince"
        class="rounded border border-gray-200 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
      >
        <option v-for="province in provinces" :key="province" :value="province">
          {{ province }}
        </option>
      </select>
      <select
        v-model="selectedCategory"
        class="rounded border border-gray-200 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
      >
        <option v-for="category in categories" :key="category" :value="category">
          {{ category }}
        </option>
      </select>
    </div>

    <!-- 分数表格 -->
    <div class="overflow-x-auto">
      <table class="w-full text-left text-sm">
        <thead class="bg-gray-50 text-xs text-gray-500 dark:bg-slate-700 dark:text-gray-400">
          <tr>
            <th class="px-4 py-3">
              年份
            </th>
            <th class="px-4 py-3">
              省份
            </th>
            <th class="px-4 py-3">
              科类
            </th>
            <th class="px-4 py-3">
              最低分
            </th>
            <th class="px-4 py-3">
              平均分
            </th>
            <th class="px-4 py-3">
              最高分
            </th>
            <th class="px-4 py-3">
              省排位
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-slate-700">
          <tr
            v-for="(item, idx) in filteredScores"
            :key="idx"
            class="hover:bg-gray-50 dark:hover:bg-slate-700/50"
          >
            <td class="px-4 py-3 text-gray-900 dark:text-white">
              {{ item.year }}
            </td>
            <td class="px-4 py-3 text-gray-600 dark:text-gray-300">
              {{ item.province }}
            </td>
            <td class="px-4 py-3 text-gray-600 dark:text-gray-300">
              {{ item.category }}
            </td>
            <td class="px-4 py-3 text-orange-600 font-medium dark:text-orange-400">
              {{ item.minScore }}
            </td>
            <td class="px-4 py-3 text-gray-900 dark:text-white">
              {{ item.avgScore }}
            </td>
            <td class="px-4 py-3 text-gray-900 dark:text-white">
              {{ item.maxScore }}
            </td>
            <td class="px-4 py-3 text-gray-600 dark:text-gray-300">
              {{ item.rank.toLocaleString() }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 数据为空提示 -->
    <div v-if="filteredScores.length === 0" class="py-8 text-center text-gray-500 dark:text-gray-400">
      暂无数据
    </div>

    <!-- 图表说明 -->
    <div class="mt-4 rounded-lg bg-orange-50 p-4 text-xs text-gray-600 dark:bg-slate-700/30 dark:text-gray-300">
      <p class="mb-1 font-bold">
        💡 数据说明：
      </p>
      <ul class="list-inside list-disc space-y-1">
        <li>数据来源于官方招生办，仅供参考</li>
        <li>点击年份可查看不同年份的录取数据</li>
        <li>建议结合省排位进行志愿填报</li>
      </ul>
    </div>
  </div>
</template>