exam/exam-06173-vue/src/views/admin/stat/total/detailBm.vue

<template>
  <div>
    <el-alert
      :title="`当前正在查看：${user.deptName} 详情`"
      type="info"
      v-if="user.deptName"
    />
    <el-tabs v-model="tabActive" @tab-click="reLayoutTable">
      <el-tab-pane label="培训记录" name="px">
        <el-table
          ref="archivesTableRef-px"
          :data="pxTableData"
          border
          height="520"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
          />
          <el-table-column prop="title" label="课程名称" align="center" />
          <el-table-column prop="passedName" label="是否完成" align="center" />
          <el-table-column
            prop="periods"
            label="课时"
            width="120"
            align="center"
          />
          <el-table-column prop="createTime" label="创建时间" align="center" />
          <el-table-column label="进度" width="200" align="center">
            <template slot-scope="scope">
              <el-progress
                :percentage="
                  parseInt((scope.row.passUser / scope.row.actualUser) * 100) >
                  100
                    ? 100
                    : parseInt(
                        (scope.row.passUser / scope.row.actualUser) * 100
                      )
                "
              ></el-progress>
            </template>
          </el-table-column>
          <!-- <el-table-column label="是否关联考试" align="center">
            <template slot-scope="scope">
              <span :style="`${scope.row.sfglks ? 'color:#1890ff;' : ''}`">{{
                scope.row.sfglks ? "是" : "否"
              }}</span>
            </template>
          </el-table-column> -->
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="viewQuestion(scope.row)"
                >查看课程</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="考试记录" name="ks">
        <el-table
          ref="archivesTableRef-ks"
          :data="ksTableData"
          border
          height="520"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
          />
          <el-table-column prop="title" label="试卷名称" align="center" />
          <el-table-column prop="startTime" label="开考时间" align="center" />
          <el-table-column prop="endTime" label="结束时间" align="center" />
          <el-table-column prop="minScore" label="最低成绩" align="center" />
          <el-table-column prop="maxScore" label="最高成绩" align="center" />
          <el-table-column prop="jgl" label="及格率" align="center" />
          <el-table-column label="是否关联考试" align="center">
            <template slot-scope="scope">
              <span :style="`${scope.row.associate ? 'color:#1890ff;' : ''}`">{{
                scope.row.associate ? "是" : "否"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="viewPaper(scope.row)"
                >查看试卷</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getDepartPxDetail, getDepartKsDetail } from "@/api/archives/index";
export default {
  data() {
    return {
      user: {},
      tabActive: "px",
      pxTableData: [],
      ksTableData: [],
    };
  },

  mounted() {
    this.user = this.$route.params.id
      ? this.$route.params
      : JSON.parse(localStorage.getItem("examLocalStorage"));
    this.getPxData();
    this.getKsData();
  },

  methods: {
    // 获取培训记录
    getPxData() {
      getDepartPxDetail({
        statDateL: this.user._date[0],
        statDateR: this.user._date[1],
        q: this.user.deptCode,
      }).then((res) => {
        res.data.forEach((ele) => {
          ele.passedName = ele.passed ? "是" : "否";
        });
        this.pxTableData = res.data;
      });
    },

    // 获取考试记录
    getKsData() {
      getDepartKsDetail({
        statDateL: this.user._date[0],
        statDateR: this.user._date[1],
        q: this.user.deptCode,
      }).then((res) => {
        res.data.forEach((ele) => {
          ele.jgl = `${this.renderNumber(ele.passed, ele.actualUser)}`;
        });
        this.ksTableData = res.data;
      });
    },

    // 过滤数字，规避 0/0 的情况
    renderNumber(num1, num2, renderChart) {
      if (!num1 && !num2) {
        return renderChart ? 0 : "0%";
      } else {
        if (!(num1 / num2)) {
          return renderChart ? 0 : "0%";
        } else {
          return `${
            renderChart
              ? parseInt((num1 / num2) * 100)
              : ((num1 / num2) * 100).toFixed(2) + "%"
          }`;
        }
      }
    },

    // 查看课程
    viewQuestion(item) {
      this.$router.push({ path: `/web/course/view/${item.id}` });
    },

    // 查看试卷
    viewPaper(item) {
      this.$router.push({ path: `/admin/tmpl/preview/${item.tmplId}` });
    },

    // 重置表格布局
    reLayoutTable() {
      this.$nextTick(() => {
        this.$refs[`archivesTableRef-${this.tabActive}`].doLayout();
      });
    },
  },
};
</script>