228 lines
6.8 KiB
Vue
228 lines
6.8 KiB
Vue
<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>
|