msyj-admin-org/src/modules/main/WorkOverview.vue

<template>
  <div class="overview">
    <div class="overview-head" v-if="overviewInfo.workName">
      <h1 class="overview-title">{{ overviewInfo.workName }}</h1>
      <div class="overview-infos">
        <ul class="overview-list">
          <li>
            <p>考生总数</p>
            <p>{{ overviewInfo.stuTotalCount }}</p>
          </li>
          <li>
            <p>缺考数量</p>
            <p>{{ overviewInfo.stuAbsentCount }}</p>
          </li>
          <li>
            <p>试卷总数</p>
            <p>{{ overviewInfo.paperCount }}</p>
          </li>
          <li>
            <p>评卷员总数</p>
            <p>{{ overviewInfo.markerCount }}</p>
          </li>
          <li>
            <p>试题套数</p>
            <p>{{ overviewInfo.questionCount }}</p>
          </li>
        </ul>
      </div>
      <div class="overview-actions">
        <Button
          type="primary"
          icon="md-download"
          @click="download(exportGradeScoreUrl)"
          >导出档位成绩</Button
        >
        <Button
          type="primary"
          icon="md-download"
          @click="download(exportScoreUrl)"
          >导出分数成绩</Button
        >
      </div>
    </div>
    <div class="overview-body">
      <div
        class="overview-subject"
        v-for="(subject, index) in overviewInfo.subjectOverviews"
        :key="index"
      >
        <div class="subject-content">
          <h2 class="subject-name">{{ subject.subjectName }}</h2>
          <div class="subject-infos">
            <ul class="overview-list">
              <li>
                <p>已上传</p>
                <p>{{ subject.uploadedCount }}</p>
              </li>
              <li>
                <p>未采集</p>
                <p>{{ subject.leftCount }}</p>
              </li>
              <li>
                <p>进度</p>
                <p>{{ subject.progress }}</p>
              </li>
            </ul>
          </div>
          <div class="subject-actions">
            <p>当前阶段</p>
            <p>{{ subject.markStageName }}</p>
            <div class="subject-actions-detail">
              <Button
                icon="md-download"
                @click="download(subject.exportAbsentDataUrl)"
                >导出缺考名单</Button
              >
              <Button @click="toCommit(subject)">评卷管理</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { workOverviewDetail } from "@/api";
import { SUBJECT_STAGE } from "@/constants/enumerate";

export default {
  name: "overview",
  data() {
    return {
      workId: this.$route.params.workId,
      SUBJECT_STAGE,
      exportGradeScoreUrl: "",
      exportScoreUrl: "",
      overviewInfo: {
        subjectOverviews: []
      }
    };
  },
  mounted() {
    this.getDetail();
    this.exportGradeScoreUrl = `${this.GLOBAL.domain}/export/score/exportLevelResult?workId=${this.workId}`;
    this.exportScoreUrl = `${this.GLOBAL.domain}/export/score/exportScoreResult?workId=${this.workId}`;
  },
  methods: {
    async getDetail() {
      const data = await workOverviewDetail(this.workId);
      data.subjectOverviews.map(item => {
        item.markStageName = SUBJECT_STAGE[item.markStage];
        item.exportAbsentDataUrl = `${this.GLOBAL.domain}/export/users/${this.workId}/${item.subject}/export`;
        item.progress =
          item.uploadedCount + item.leftCount
            ? (
                (100 * item.uploadedCount) /
                (item.uploadedCount + item.leftCount)
              ).toFixed(1) + "%"
            : "0.0%";
      });
      this.overviewInfo = data;
    },
    download(url) {
      window.open(url);
    },
    toCommit(subject) {
      const routerName = subject.markStage === "LEVEL" ? "Grading" : "Mark";
      this.$router.push({
        name: routerName,
        params: { workId: this.workId, subjectId: subject.subjectId }
      });
    }
  }
};
</script>