兵马未动 粮草先行

This commit is contained in:
RISE
2026-02-08 23:47:50 +08:00
parent 00a005e65f
commit 2670340af3
47 changed files with 3909 additions and 257 deletions

View File

@@ -0,0 +1,227 @@
<template>
<div class="modern-page-container">
<div class="page-wrapper">
<!-- 筛选 -->
<el-card class="search-card" shadow="never">
<template #header>
<div class="card-header">
<span class="card-title">
<el-icon class="title-icon"><Search /></el-icon>
统计条件
</span>
</div>
</template>
<el-form :model="queryForm" :inline="true" class="search-form">
<el-form-item label="毕业年份" prop="graduYear">
<el-select
v-model="queryForm.graduYear"
placeholder="请选择毕业年份"
clearable
style="width: 160px">
<el-option
v-for="y in graduYearOptions"
:key="y"
:label="y + '年'"
:value="y" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="loadStatistics">查询统计</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 汇总卡片 -->
<el-row :gutter="16" class="summary-row">
<el-col :span="6">
<el-card shadow="hover" class="stat-card">
<div class="stat-label">毕业生总数</div>
<div class="stat-value">{{ summary.total }}</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="stat-card stat-success">
<div class="stat-label">确认毕业</div>
<div class="stat-value">{{ summary.confirmed }}</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="stat-card stat-warning">
<div class="stat-label">待确认</div>
<div class="stat-value">{{ summary.pending }}</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="stat-card stat-danger">
<div class="stat-label">不可毕业</div>
<div class="stat-value">{{ summary.rejected }}</div>
</el-card>
</el-col>
</el-row>
<!-- 按学院统计表格 -->
<el-card class="content-card" shadow="never">
<template #header>
<div class="card-header">
<span class="card-title">
<el-icon class="title-icon"><Document /></el-icon>
按学院统计
</span>
</div>
</template>
<el-table
:data="deptStats"
v-loading="loading"
stripe
border
class="modern-table">
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="deptName" label="学院" min-width="140" show-overflow-tooltip />
<el-table-column prop="total" label="应毕业人数" width="110" align="center" />
<el-table-column prop="pending" label="待确认" width="90" align="center" />
<el-table-column prop="confirmed" label="确认毕业" width="100" align="center" />
<el-table-column prop="rejected" label="不可毕业" width="100" align="center" />
<el-table-column prop="completionRate" label="完成率" width="100" align="center">
<template #default="scope">
<span :class="completionRateClass(scope.row.completionRate)">
{{ scope.row.completionRate }}
</span>
</template>
</el-table-column>
</el-table>
<template #empty>
<el-empty description="请选择毕业年份并点击「查询统计」" :image-size="100" />
</template>
</el-card>
</div>
</div>
</template>
<script setup lang="ts" name="GradustuAnalyse">
import { reactive, ref, computed, onMounted } from 'vue'
import { useMessage } from '/@/hooks/message'
import { fetchListForAnalyse } from '/@/api/stuwork/gradustu'
import { Search, Document } from '@element-plus/icons-vue'
const queryForm = reactive({
graduYear: ''
})
const loading = ref(false)
const rawList = ref<any[]>([])
const graduYearOptions = computed(() => {
const y = new Date().getFullYear()
return Array.from({ length: 11 }, (_, i) => y - 5 + i)
})
// 汇总:总人数、确认毕业、待确认、不可毕业
const summary = computed(() => {
const list = rawList.value
let pending = 0
let confirmed = 0
let rejected = 0
list.forEach((item: any) => {
const s = String(item.status ?? '')
if (s === '0') pending++
else if (s === '1') confirmed++
else if (s === '-1') rejected++
})
return {
total: list.length,
pending,
confirmed,
rejected
}
})
// 按学院聚合
const deptStats = computed(() => {
const list = rawList.value
const map: Record<string, { deptCode: string; deptName: string; total: number; pending: number; confirmed: number; rejected: number }> = {}
list.forEach((item: any) => {
const code = item.deptCode || '未知'
const name = item.deptName || item.deptCode || '未知'
if (!map[code]) {
map[code] = { deptCode: code, deptName: name, total: 0, pending: 0, confirmed: 0, rejected: 0 }
}
const row = map[code]
row.total++
const s = String(item.status ?? '')
if (s === '0') row.pending++
else if (s === '1') row.confirmed++
else if (s === '-1') row.rejected++
})
return Object.values(map).map((row) => ({
...row,
completionRate: row.total > 0 ? ((row.confirmed / row.total) * 100).toFixed(1) + '%' : '0%'
}))
})
const completionRateClass = (rate: string) => {
const num = parseFloat(rate)
if (num >= 100) return 'rate-high'
if (num >= 80) return 'rate-mid'
return 'rate-low'
}
const loadStatistics = async () => {
if (!queryForm.graduYear) {
useMessage().warning('请选择毕业年份')
return
}
loading.value = true
try {
const list = await fetchListForAnalyse(queryForm.graduYear)
rawList.value = list
} catch (err: any) {
useMessage().error(err.msg || '获取数据失败')
rawList.value = []
} finally {
loading.value = false
}
}
onMounted(() => {
queryForm.graduYear = String(new Date().getFullYear())
})
</script>
<style scoped lang="scss">
@import '/@/assets/styles/modern-page.scss';
.summary-row {
margin-bottom: 16px;
}
.stat-card {
text-align: center;
.stat-label {
font-size: 14px;
color: var(--el-text-color-secondary);
}
.stat-value {
font-size: 24px;
font-weight: 600;
margin-top: 8px;
}
&.stat-success .stat-value {
color: var(--el-color-success);
}
&.stat-warning .stat-value {
color: var(--el-color-warning);
}
&.stat-danger .stat-value {
color: var(--el-color-danger);
}
}
.rate-high {
color: var(--el-color-success);
font-weight: 500;
}
.rate-mid {
color: var(--el-color-warning);
}
.rate-low {
color: var(--el-color-danger);
}
</style>