兵马未动 粮草先行
This commit is contained in:
227
src/views/stuwork/gradustu/analyse.vue
Normal file
227
src/views/stuwork/gradustu/analyse.vue
Normal 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>
|
||||
Reference in New Issue
Block a user