client-admin/src/render/views/Audit/Main/index.vue

<template>
  <div class="home audit">
    <div class="home-head">
      <div>
        <a-space v-if="userStore.curExam" :size="6">
          <span class="head-no">No.{{ userStore.curExam.id }}</span>
          <a-tag class="head-mode" color="blue"
            >{{ userStore.curExam.mode }}模式</a-tag
          >
          <h3 class="head-name">{{ userStore.curExam.name }}</h3>
        </a-space>
      </div>
      <div>
        <a-button @click="onSwitchExam">
          <template #icon><SwapOutlined /></template>切换考试
        </a-button>
      </div>
    </div>
    <div class="home-body">
      <template v-if="overviewData">
        <div class="audit-box">
          <div class="audit-box-head">
            <h4>实时审核</h4>
          </div>
          <div class="audit-box-body">
            <div class="audit-card">
              <div class="audit-card-icon audit-wait"></div>
              <div class="audit-card-content">
                <p>待审核</p>
                <p>{{ overviewData.verifyTask.todoCount }}</p>
              </div>
              <div class="audit-card-action" @click="toPage('IntimeAudit')">
                进入 <RightOutlined />
              </div>
            </div>
          </div>
        </div>

        <div class="audit-box">
          <div class="audit-box-head">
            <h4>
              复核校验<span style="font-weight: normal">（人工绑定审核）</span>
            </h4>
          </div>
          <div class="audit-box-body">
            <div class="audit-card">
              <div class="audit-card-icon audit-wait"></div>
              <div class="audit-card-content">
                <p>待审核</p>
                <p>{{ overviewData.assignedCheck.todoCount }}</p>
              </div>
              <div class="audit-card-action" @click="toPage('ReviewAudit')">
                进入 <RightOutlined />
              </div>
            </div>
          </div>
        </div>

        <div class="audit-box img-check">
          <div class="audit-box-head">
            <h4>图片抽查</h4>
          </div>
          <div class="audit-box-body">
            <div class="audit-card">
              <div class="audit-card-icon audit-done"></div>
              <div class="audit-card-content">
                <p>已审核</p>
                <p>{{ overviewData.imageCheckTask.finishCount }}</p>
              </div>
            </div>

            <div class="audit-card">
              <div class="audit-card-icon audit-wait"></div>
              <div class="audit-card-content">
                <p>待审核</p>
                <p>{{ overviewData.imageCheckTask.todoCount }}</p>
              </div>
              <div class="audit-card-action" @click="toPage('ImageCheckAudit')">
                进入 <RightOutlined />
              </div>
            </div>
          </div>
          <div class="audit-box-foot">
            <a-tag :bordered="false">
              <template #icon><PieChartFilled /></template>抽查比例：{{
                overviewData.imageCheckTask.checkRatio * 100
              }}%
            </a-tag>
            <a-space :size="8">
              <span>轮播时间配置:</span>
              <a-input-number
                v-model:value="imageCheckLoopTime"
                :min="0"
                :max="999"
                :controls="false"
              ></a-input-number>
              <span>秒/张</span>
              <a-button type="primary" @click="onSetLoopTime">设置</a-button>
            </a-space>
          </div>
        </div>
      </template>
    </div>
  </div>

  <!-- SelectExamDialog -->
  <SelectExamDialog ref="selectExamDialogRef" />
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import {
  SwapOutlined,
  RightOutlined,
  PieChartFilled,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

import { examOverview } from "@/ap/audit";
import { ExamOverviewResult } from "@/ap/types/audit";

import { useRouter } from "vue-router";
import { useUserStore } from "@/store";
import SelectExamDialog from "./SelectExamDialog.vue";

defineOptions({
  name: "Audit",
});

const router = useRouter();
const userStore = useUserStore();

const overviewData = ref<ExamOverviewResult | null>(null);

async function getOverviewData() {
  if (!userStore.curExam) return;

  const res = await examOverview({ examId: userStore.curExam.id });
  overviewData.value = res || null;
}

function toPage(name: string) {
  router.push({ name });
}

const selectExamDialogRef = ref();
function onSwitchExam() {
  selectExamDialogRef.value?.open();
}

const imageCheckLoopTime = ref(userStore.imageCheckLoopTime || 1);
if (!userStore.imageCheckLoopTime) {
  userStore.setImageCheckLoopTime(1);
}
function onSetLoopTime() {
  if (!imageCheckLoopTime.value) {
    message.error("请输入轮播时间");
    return;
  }

  userStore.setImageCheckLoopTime(imageCheckLoopTime.value);
  message.success("设置成功！");
}

watch(
  () => userStore.curExam,
  (val) => {
    if (!val) return;
    getOverviewData();
  },
  { immediate: true }
);
</script>