zouyu
2026-05-26 b8da78824e4c67632abb65302f01ccf74d5a1096
src/views/safetyManagement/employeeLearning/index.vue
@@ -11,103 +11,128 @@
          <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>
@@ -136,30 +161,4 @@
  }
}
.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>