client-admin/src/render/views/CurExam/index.vue

<template>
  <div class="cur-exam h-full">
    <div class="operate-box flex items-center justify-between">
      <div class="lf h-full flex items-center" v-if="curExam">
        <span class="no">No.{{ curExam?.id }}</span>
        <qm-button type="primary" ghost size="small"
          >{{ curExam?.mode }}模式</qm-button
        >
        <div class="exam-name">{{ curExam?.name }}</div>
      </div>
      <div v-else></div>
      <div class="rt h-full flex items-center">
        <qm-button :icon="h(SwapOutlined)" @click="showExamListModal = true"
          >切换考试</qm-button
        >
        <qm-button
          class="ml-10px"
          :icon="h(EditOutlined)"
          @click="editExam"
          :disabled="!curExam"
          >编辑</qm-button
        >
        <qm-button
          class="ml-10px"
          :icon="h(PlusCircleOutlined)"
          type="primary"
          @click="addExam"
          >新建</qm-button
        >
      </div>
    </div>
    <div class="page-main">
      <div v-if="!curExam" class="flex justify-center items-center h-full">
        <div class="none-center text-center">
          <img src="../../assets/imgs/none_data.png" />
          <p>当前没有考试，请新建考试</p>
          <qm-button
            :icon="h(PlusCircleOutlined)"
            type="primary"
            @click="addExam"
            >新建</qm-button
          >
        </div>
      </div>
      <div v-else class="cur-exam-box h-full">
        <div class="row row1">
          <div class="module">
            <div class="head">
              <div class="flex items-center">
                <div class="tag" :style="{ color: token.colorPrimary }">
                  步骤一
                </div>
                <div class="title">基础数据配置</div>
              </div>
              <div
                class="flex items-center cursor-pointer"
                :style="{ color: token.colorPrimary }"
                @click="toPage('BaseDataConfig')"
              >
                <span>进入</span>
                <RightOutlined />
              </div>
            </div>
            <div class="body">
              <div class="option">
                科目数量：{{ allData.basic?.subjectCount }}
              </div>
              <div class="option">卡格式：{{ allData.basic?.cardCount }}</div>
              <div class="option">
                考生人数：{{ allData.basic?.studentCount }}
              </div>
            </div>
          </div>
          <div class="module">
            <div class="head">
              <div class="flex items-center">
                <div class="tag" :style="{ color: token.colorPrimary }">
                  步骤二
                </div>
                <div class="title">扫描管理</div>
              </div>
              <div
                class="flex items-center cursor-pointer"
                :style="{ color: token.colorPrimary }"
                @click="toPage('ScanManage')"
              >
                <span>进入</span>
                <RightOutlined />
              </div>
            </div>
            <div class="body">
              <div class="option">
                扫描进度：
                <p>
                  已扫描：{{ allData.scan?.scannedCount }}，未扫描：{{
                    allData.scan?.unexistCount
                  }}，完成比：{{ allData.scan?.scannedRate }}%
                </p>
              </div>
              <div class="option">
                图片抽查：
                <p>
                  已完成：{{ allData.scan?.imageCheckCount }}，未完成：{{
                    allData.scan?.imageCheckTodoCount
                  }}，完成比：{{ allData.scan?.imageCheckRate }}%
                </p>
              </div>
            </div>
          </div>
          <div class="module">
            <div class="head">
              <div class="flex items-center">
                <div class="tag" :style="{ color: token.colorPrimary }">
                  步骤三
                </div>
                <div class="title">复核校验</div>
              </div>
              <div
                class="flex items-center cursor-pointer"
                :style="{ color: token.colorPrimary }"
                @click="toPage('Review')"
              >
                <span>进入</span>
                <RightOutlined />
              </div>
            </div>
            <div class="body">
              <div class="option">
                审核员<span style="font-weight: normal">（第一遍审核）</span>
                <p>
                  已完成：{{
                    allData.assignedCheck?.auditorFinishCount
                  }}，待完成：{{
                    allData.assignedCheck?.auditorTodoCount
                  }}，完成比：{{ allData.assignedCheck?.auditorFinishRate }}%
                </p>
              </div>
              <div class="option">
                管理员<span style="font-weight: normal">（第二遍审核）</span>
                <p>
                  已完成：{{
                    allData.assignedCheck?.adminFinishCount
                  }}，待完成：{{
                    allData.assignedCheck?.adminTodoCount
                  }}，完成比：{{ allData.assignedCheck?.adminFinishRate }}%
                </p>
              </div>
            </div>
          </div>
          <div class="module">
            <div class="head">
              <div class="flex items-center">
                <div class="tag" :style="{ color: token.colorPrimary }">
                  步骤四
                </div>
                <div class="title">识别对照</div>
              </div>
              <div
                class="flex items-center cursor-pointer"
                :style="{ color: token.colorPrimary }"
                @click="toPage('RecognizeCheck')"
              >
                <span>进入</span>
                <RightOutlined />
              </div>
            </div>
            <div class="body">
              <div class="option">
                识别嫌疑
                <p>
                  待处理：{{ allData.omr?.suspectTodoCount }}，已处理：{{
                    allData.omr?.suspectFinishCount
                  }}，完成比：{{ allData.omr?.suspectFinishRate }}%
                </p>
              </div>
              <div class="option">
                自定义
                <p>
                  待处理：{{ allData.omr?.customizeTodoCount }}，已处理：{{
                    allData.omr?.customizeFinishCount
                  }}，完成比：{{ allData.omr?.customizeFinishRate }}%
                </p>
                <p>待生成：</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row row2">
          <div class="module">
            <div class="head">
              <div class="flex items-center">
                <div class="tag" :style="{ color: token.colorPrimary }">
                  步骤五
                </div>
                <div class="title">缺考校验</div>
              </div>
              <div
                class="flex items-center cursor-pointer"
                :style="{ color: token.colorPrimary }"
                @click="toPage('AbsentCheck')"
              >
                <span>进入</span>
                <RightOutlined />
              </div>
            </div>
            <div class="body">
              <div class="option">
                正常数量：{{ allData.absentCheck?.okCount }}
              </div>
              <div class="option">
                缺考：{{ allData.absentCheck?.absentCount }}
              </div>
              <div class="option">
                缺考待确认数量：{{ allData.absentCheck?.todoCount }}
              </div>
            </div>
          </div>
          <div class="module">
            <div class="head">
              <div class="flex items-center">
                <div class="tag" :style="{ color: token.colorPrimary }">
                  步骤六
                </div>
                <div class="title">数据检查</div>
              </div>
              <div
                class="flex items-center cursor-pointer"
                :style="{ color: token.colorPrimary }"
                @click="toPage('DataCheck')"
              >
                <span>进入</span>
                <RightOutlined />
              </div>
            </div>
          </div>
          <div class="module">
            <div class="head">
              <div class="flex items-center">
                <div class="tag" :style="{ color: token.colorPrimary }">
                  步骤七
                </div>
                <div class="title">图片检查</div>
              </div>
              <div
                class="flex items-center cursor-pointer"
                :style="{ color: token.colorPrimary }"
                @click="toPage('ImageCheck')"
              >
                <span>进入</span>
                <RightOutlined />
              </div>
            </div>
          </div>
          <div class="module">
            <div class="head">
              <div class="flex items-center">
                <div class="tag" :style="{ color: token.colorPrimary }">
                  步骤八
                </div>
                <div class="title">结果导出</div>
              </div>
              <div
                class="flex items-center cursor-pointer"
                :style="{ color: token.colorPrimary }"
                @click="toPage('ResultExport')"
              >
                <span>进入</span>
                <RightOutlined />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <my-modal
      v-model:open="showExamListModal"
      v-if="showExamListModal"
      title="切换考试"
      @ok="chooseExamHandler"
      :width="450"
    >
      <a-radio-group v-model:value="choosedExamId" class="exam-modal-body">
        <a-radio
          :style="radioStyle"
          v-for="item in examList"
          :key="item.id"
          :value="item.id"
        >
          <div class="flex-1 flex items-center justify-between">
            <span class="sub1">No.{{ item?.id }}</span>
            <span class="sub2">{{ item?.name }}</span>
            <span class="sub3">{{ item?.mode }}模式</span>
          </div>
        </a-radio>
      </a-radio-group>
    </my-modal>
    <AddExamDialog
      v-model="showAddDialog"
      v-if="showAddDialog"
      :curRow="curRow"
      @addSuccess="addSuccess"
    ></AddExamDialog>
  </div>
</template>
<script name="CurExam" lang="ts" setup>
import { onMounted, ref, computed, h, watch, reactive } from "vue";
import { getExamList } from "@/ap/exam";
import { useUserStore } from "@/store";
import AddExamDialog from "./AddExamDialog.vue";
import { useRouter } from "vue-router";
import {
  SwapOutlined,
  EditOutlined,
  PlusCircleOutlined,
  RightOutlined,
} from "@ant-design/icons-vue";
import { getExamOverview } from "@/ap/exam";
import useToken from "@/hooks/useToken";

const { token } = useToken();
const router = useRouter();
const toPage = (name: string) => {
  router.push({ name });
};

const showAddDialog = ref(false);

const radioStyle = reactive({
  display: "flex",
  alignItems: "center",
  justifyContent: "between",
  marginBottom: "8px",
});

const userStore = useUserStore();
const curExam = computed(() => {
  return userStore.curExam;
});
const choosedExamId = ref();
const allData = ref<any>({});
const getAllCardData = () => {
  getExamOverview({ examId: curExam.value.id }).then((res: any) => {
    allData.value = res || {};
  });
};
if (curExam.value?.id) {
  choosedExamId.value = curExam.value.id;
  getAllCardData();
}
watch(curExam, (exam: Exam | null) => {
  choosedExamId.value = exam?.id;
  getAllCardData();
});

const examList = ref<Exam[]>([]);
const showExamListModal = ref(false);
const _getExamList = () => {
  getExamList({ enable: true, pageNumber: 1, pageSize: 10000 }).then(
    (res: any) => {
      if (res?.result?.length) {
        examList.value = res.result || [];
      } else {
        examList.value = [];
        userStore.setCurExam(null);
      }
      if (!userStore.curExam && examList.value.length === 1) {
        userStore.setCurExam(examList.value[0]);
      }
    }
  );
};
const addSuccess = () => {
  getExamList({ enable: true, pageNumber: 1, pageSize: 10000 }).then(
    (res: any) => {
      if (res?.result?.length) {
        userStore.setCurExam(res.result[res.result.length - 1]);
      }
    }
  );
};
const chooseExamHandler = () => {
  let exam = examList.value.find((item: any) => item.id == choosedExamId.value);
  !!exam && userStore.setCurExam(exam);
  showExamListModal.value = false;
};
const curRow = ref();
const addExam = () => {
  curRow.value = null;
  showAddDialog.value = true;
};
const editExam = () => {
  curRow.value = curExam.value;
  showAddDialog.value = true;
};
onMounted(() => {
  _getExamList();
});
watch(showExamListModal, (val: boolean) => {
  if (val) {
    _getExamList();
    if (curExam.value?.id) {
      choosedExamId.value = curExam.value.id;
    }
  }
});
</script>
<style lang="less" scoped>
.cur-exam {
  background-color: #fff;
  .none-center {
    & > img {
      height: 70px;
      margin-bottom: 6px;
    }
    & > p {
      color: @text-color3;
      margin-bottom: 16px;
    }
  }
  .exam-modal-body {
    width: 100%;
    :deep(.ant-radio-wrapper > span:last-child) {
      width: 100%;
      display: flex;
    }
    .sub1,
    .sub2 {
      color: @text-color1;
    }
    .sub3 {
      color: @text-color3;
    }
  }
  .page-main {
    height: calc(100% - 54px);
    .cur-exam-box {
      background: url(../../assets/imgs/cur_exam_bg.png) 0 0 no-repeat;
      background-size: 100% 100%;
      padding: 100px 34px 20px 34px;
      overflow: auto;
      .row {
        &:after {
          content: "";
          display: block;
          clear: both;
        }
        .module {
          float: left;
          width: calc((100% - 60px) / 4);
          background: linear-gradient(to top, #ffffff 0%, #f1f6ff 100%);
          border-radius: 8px;
          border: 1px solid #e5e6eb;
          padding: 15px;
          .body {
            padding: 20px 4px;
            height: 170px;
            .option {
              position: relative;
              color: @text-color1;
              font-weight: bold;
              padding-left: 14px;
              font-size: 14px;
              line-height: 24px;
              & > p {
                color: @text-color2;
                font-weight: normal;
              }
              &:not(:first-child) {
                margin-top: 10px;
              }
              &:after {
                content: "";
                position: absolute;
                z-index: 1;
                width: 6px;
                height: 6px;
                border-radius: 3px;
                top: 8px;
                left: 0;
                background: #4080ff;
              }
            }
          }
          &:not(:first-child) {
            margin-left: 20px;
          }
          .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .tag {
              width: 52px;
              height: 24px;
              background: #ffffff;
              border-radius: 4px;
              border: 1px solid #bedaff;
              font-size: 12px;
              line-height: 22px;
              text-align: center;
              color: var(--primary-color);
            }
            .title {
              font-size: 16px;
              color: @text-color1;
              margin-left: 5px;
              font-weight: bold;
            }
          }
        }
      }
      .row2 {
        margin-top: 55px;
      }
    }
  }
  .operate-box {
    height: 54px;
    padding: 0 16px;
    border-bottom: 1px solid #e5e6eb;
    .lf {
      .no {
        min-width: 70px;
        padding: 0 5px;
        height: 24px;
        background: linear-gradient(135deg, #fdd62d 0%, #faad14 100%);
        border-radius: 4px;
        border: 1px solid #ffc53d;
        color: #fff;
        margin-right: 6px;
        text-align: center;
        line-height: 22px;
      }
      .exam-name {
        color: @text-color1;
        font-size: 16px;
        font-weight: bold;
        margin-left: 6px;
      }
    }
    .rt {
    }
  }
}
</style>