<template>
|
<div class="app-container">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-card class="user-card">
|
<div class="user-info">
|
<el-avatar :size="80" :src="userInfo.avatar" />
|
<h3>{{ userInfo.name }}</h3>
|
<p>{{ userInfo.dept }} - {{ userInfo.post }}</p>
|
</div>
|
<el-divider />
|
<div class="stat-item">
|
<span class="label">已完成培训</span>
|
<span class="value">{{ statistics.completedTrainings }} 次</span>
|
</div>
|
<div class="stat-item">
|
<span class="label">待参加培训</span>
|
<span class="value">{{ statistics.pendingTrainings }} 次</span>
|
</div>
|
<div class="stat-item">
|
<span class="label">平均考核分数</span>
|
<span class="value">{{ statistics.avgScore }} 分</span>
|
</div>
|
</el-card>
|
</el-col>
|
|
<el-col :span="18">
|
<el-card>
|
<template #header>
|
<span>我的学习记录</span>
|
</template>
|
<PIMTable :column="recordColumns" :tableData="recordList" :page="recordPage" @pagination="changeRecordPage" :tableLoading="recordLoading" />
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, computed } from "vue";
|
import PIMTable from "@/components/PIMTable/PIMTable.vue";
|
import useUserStore from "@/store/modules/user";
|
import {
|
getRecordList
|
} from "@/api/safetyManagement/trainingManage.js";
|
import { ElMessage } from "element-plus";
|
|
defineOptions({
|
name: "员工学习",
|
});
|
|
const userStore = useUserStore();
|
|
const userInfo = computed(() => ({
|
name: userStore.name || "-",
|
dept: userStore.currentFactoryName || "-",
|
post: userStore.roleName || "-",
|
avatar: userStore.avatar || "",
|
}));
|
|
const statistics = reactive({
|
completedTrainings: 0,
|
pendingTrainings: 0,
|
avgScore: 0,
|
});
|
|
// 学习记录（来自培训完成记录）
|
const recordList = ref([]);
|
const recordPage = reactive({ current: 1, size: 10, total: 0 });
|
const recordLoading = ref(false);
|
const recordColumns = [
|
{ label: "培训内容", prop: "content", align: "center" },
|
{ label: "完成时间", prop: "completeTime", align: "center" },
|
{ label: "学习时长", prop: "duration", align: "center" },
|
{ label: "培训方式", prop: "method", align: "center" },
|
{ label: "分数", prop: "score", align: "center" },
|
{
|
label: "考核结果",
|
prop: "result",
|
align: "center",
|
dataType: "tag",
|
formatType: (val) => {
|
if (val === '通过') return 'success';
|
if (val === '未通过') return 'danger';
|
return 'info';
|
},
|
formatData: (val) => val || '-'
|
}
|
];
|
|
|
|
// 计算统计数据
|
const calculateStatistics = (records) => {
|
const completedTrainings = records.filter(r => r.status === 1).length;
|
const pendingTrainings = records.filter(r => r.status === 0).length;
|
const scores = records.filter(r => r.score > 0).map(r => r.score);
|
const avgScore = scores.length > 0 ? (scores.reduce((a, b) => a + b, 0) / scores.length).toFixed(1) : 0;
|
|
statistics.completedTrainings = completedTrainings;
|
statistics.pendingTrainings = pendingTrainings;
|
statistics.avgScore = avgScore;
|
};
|
|
// 学习记录方法（查询当前用户的完成记录）
|
const getRecordData = async () => {
|
recordLoading.value = true;
|
try {
|
const res = await getRecordList({
|
pageNum: recordPage.current,
|
pageSize: recordPage.size,
|
employeeId: userStore.userId // 只查询当前用户的数据
|
});
|
if (res.code === 200) {
|
recordList.value = res.data.rows || res.data.records || [];
|
recordPage.total = res.data.total || 0;
|
// 根据查询到的数据计算统计
|
calculateStatistics(recordList.value);
|
}
|
} catch (error) {
|
ElMessage.error('获取学习记录失败');
|
} finally {
|
recordLoading.value = false;
|
}
|
};
|
|
const changeRecordPage = ({ page, limit }) => {
|
recordPage.current = page;
|
recordPage.size = limit;
|
getRecordData();
|
};
|
|
onMounted(() => {
|
getRecordData();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.user-card {
|
.user-info {
|
text-align: center;
|
h3 {
|
margin: 15px 0 5px;
|
}
|
p {
|
color: #666;
|
font-size: 14px;
|
}
|
}
|
.stat-item {
|
display: flex;
|
justify-content: space-between;
|
padding: 10px 0;
|
.label {
|
color: #666;
|
}
|
.value {
|
font-weight: bold;
|
color: #409eff;
|
}
|
}
|
}
|
|
</style>
|
