| | |
| | | <el-divider /> |
| | | <div class="stat-item"> |
| | | <span class="label">已完成培训</span> |
| | | <span class="value">{{ userInfo.completedTrainings }} 次</span> |
| | | <span class="value">{{ statistics.completedTrainings }} 次</span> |
| | | </div> |
| | | <div class="stat-item"> |
| | | <span class="label">待参加培训</span> |
| | | <span class="value">{{ userInfo.pendingTrainings }} 次</span> |
| | | <span class="value">{{ statistics.pendingTrainings }} 次</span> |
| | | </div> |
| | | <div class="stat-item"> |
| | | <span class="label">平均考核分数</span> |
| | | <span class="value">{{ userInfo.avgScore }} 分</span> |
| | | <span class="value">{{ statistics.avgScore }} 分</span> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :span="18"> |
| | | <el-tabs v-model="activeTab" type="border-card"> |
| | | <el-tab-pane label="我的学习记录" name="records"> |
| | | <PIMTable :column="recordColumns" :tableData="recordList" :page="recordPage" @pagination="changeRecordPage" /> |
| | | </el-tab-pane> |
| | | |
| | | <el-tab-pane label="考核报告" name="reports"> |
| | | <PIMTable :column="reportColumns" :tableData="reportList" :page="reportPage" @pagination="changeReportPage" /> |
| | | </el-tab-pane> |
| | | |
| | | <el-tab-pane label="在线测评" name="assessment"> |
| | | <div class="assessment-list"> |
| | | <el-card v-for="item in assessmentList" :key="item.id" class="assessment-card"> |
| | | <div class="assessment-header"> |
| | | <h4>{{ item.title }}</h4> |
| | | <el-tag :type="item.status === '待测评' ? 'warning' : 'success'">{{ item.status }}</el-tag> |
| | | </div> |
| | | <p class="assessment-desc">{{ item.description }}</p> |
| | | <div class="assessment-footer"> |
| | | <span>截止时间:{{ item.deadline }}</span> |
| | | <el-button type="primary" size="small" :disabled="item.status !== '待测评'" @click="startAssessment(item)"> |
| | | {{ item.status === '待测评' ? '开始测评' : '已完成' }} |
| | | </el-button> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <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 } from "vue"; |
| | | 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 activeTab = ref("records"); |
| | | const userStore = useUserStore(); |
| | | |
| | | const userInfo = reactive({ |
| | | name: "张三", |
| | | dept: "生产部", |
| | | post: "操作工", |
| | | avatar: "", |
| | | completedTrainings: 12, |
| | | pendingTrainings: 3, |
| | | avgScore: 85, |
| | | 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: "trainingTime", align: "center" }, |
| | | { label: "培训时长", prop: "duration", align: "center" }, |
| | | { label: "完成时间", prop: "completeTime", align: "center" }, |
| | | { label: "学习时长", prop: "duration", align: "center" }, |
| | | { label: "培训方式", prop: "method", align: "center" }, |
| | | { label: "完成状态", prop: "status", 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 reportList = ref([]); |
| | | const reportPage = reactive({ current: 1, size: 10, total: 0 }); |
| | | const reportColumns = [ |
| | | { label: "考核名称", prop: "name", align: "center" }, |
| | | { label: "考核时间", prop: "assessTime", align: "center" }, |
| | | { label: "得分", prop: "score", align: "center" }, |
| | | { label: "等级", prop: "grade", align: "center" }, |
| | | { label: "是否合格", prop: "qualified", align: "center" }, |
| | | ]; |
| | | |
| | | // 在线测评 |
| | | const assessmentList = ref([ |
| | | { id: 1, title: "安全操作规程测评", description: "考核员工对安全操作规程的掌握程度", deadline: "2026-05-30", status: "待测评" }, |
| | | { id: 2, title: "应急处置能力测评", description: "考核员工应急处置能力", deadline: "2026-06-15", status: "已完成" }, |
| | | ]); |
| | | |
| | | const changeRecordPage = ({ page, limit }) => { recordPage.current = page; recordPage.size = limit; }; |
| | | const changeReportPage = ({ page, limit }) => { reportPage.current = page; reportPage.size = limit; }; |
| | | const startAssessment = (item) => {}; |
| | | // 计算统计数据 |
| | | 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> |
| | |
| | | } |
| | | } |
| | | |
| | | .assessment-list { |
| | | .assessment-card { |
| | | margin-bottom: 15px; |
| | | .assessment-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | h4 { |
| | | margin: 0; |
| | | } |
| | | } |
| | | .assessment-desc { |
| | | color: #666; |
| | | margin: 10px 0; |
| | | } |
| | | .assessment-footer { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | span { |
| | | color: #999; |
| | | font-size: 12px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |