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

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

interface PlanData {
  year: number
  province: string
  category: string
  totalQuota: number
  majors: {
    name: string
    quota: number
    category: string
  }[]
}

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

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

const planData: PlanData[] = [
  {
    year: 2024,
    province: '山东',
    category: '理科',
    totalQuota: 800,
    majors: [
      { name: '石油工程', quota: 120, category: '本科' },
      { name: '地质学', quota: 80, category: '本科' },
      { name: '化学工程与工艺', quota: 100, category: '本科' },
      { name: '机械设计制造及其自动化', quota: 90, category: '本科' },
      { name: '计算机科学与技术', quota: 70, category: '本科' },
      { name: '土木工程', quota: 85, category: '本科' },
      { name: '油气储运工程', quota: 75, category: '本科' },
      { name: '应用化学', quota: 60, category: '本科' },
      { name: '勘查技术与工程', quota: 65, category: '本科' },
      { name: '安全工程', quota: 55, category: '本科' },
    ],
  },
  {
    year: 2024,
    province: '山东',
    category: '文科',
    totalQuota: 200,
    majors: [
      { name: '英语', quota: 50, category: '本科' },
      { name: '工商管理', quota: 60, category: '本科' },
      { name: '会计学', quota: 55, category: '本科' },
      { name: '市场营销', quota: 35, category: '本科' },
    ],
  },
  {
    year: 2023,
    province: '山东',
    category: '理科',
    totalQuota: 750,
    majors: [
      { name: '石油工程', quota: 115, category: '本科' },
      { name: '地质学', quota: 75, category: '本科' },
      { name: '化学工程与工艺', quota: 95, category: '本科' },
      { name: '机械设计制造及其自动化', quota: 85, category: '本科' },
      { name: '计算机科学与技术', quota: 65, category: '本科' },
    ],
  },
]

const filteredPlan = computed(() => {
  return planData.find(
    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 v-if="filteredPlan" class="mb-5 rounded-lg bg-blue-50 p-4 dark:bg-slate-700/30">
      <div class="flex items-center justify-between">
        <span class="text-sm text-gray-600 dark:text-gray-300">
          {{ selectedYear }}年 {{ selectedProvince }} {{ selectedCategory }}总计划：
        </span>
        <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">
          {{ filteredPlan.totalQuota }}
        </span>
      </div>
    </div>

    <!-- 专业列表 -->
    <div v-if="filteredPlan && filteredPlan.majors.length > 0" 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="w-10 px-4 py-3 text-center">
              序号
            </th>
            <th class="px-4 py-3">
              专业名称
            </th>
            <th class="w-24 px-4 py-3 text-center">
              学历层次
            </th>
            <th class="w-24 px-4 py-3 text-center">
              计划数
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-slate-700">
          <tr
            v-for="(major, idx) in filteredPlan.majors"
            :key="idx"
            class="hover:bg-gray-50 dark:hover:bg-slate-700/50"
          >
            <td class="px-4 py-3 text-center text-gray-600 dark:text-gray-400">
              {{ idx + 1 }}
            </td>
            <td class="px-4 py-3 text-gray-900 font-medium dark:text-white">
              {{ major.name }}
            </td>
            <td class="px-4 py-3 text-center">
              <span class="rounded bg-gray-100 px-2 py-1 text-xs dark:bg-slate-600 dark:text-gray-300">
                {{ major.category }}
              </span>
            </td>
            <td class="px-4 py-3 text-center text-orange-600 font-medium dark:text-orange-400">
              {{ major.quota }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 数据为空提示 -->
    <div v-else 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>