评卷质量

src/api/qualityPage.ts

@@ -0,0 +1,22 @@
+import { httpApp } from "@/plugins/axiosApp";
+import { Question } from "@/types";
+
+/** 批量仲裁历史 */
+export async function getQualityHistory({
+  markerId,
+  markerScore,
+  pageNumber = 1,
+  pageSize = 10,
+}: {
+  markerId: string;
+  markerScore: string;
+  pageNumber?: number; // 从1开始
+  pageSize?: number;
+}) {
+  const form = new FormData();
+  markerId && form.append("markerId", markerId);
+  markerScore && form.append("markerScore", markerScore);
+  form.append("pageNumber", pageNumber + "");
+  form.append("pageSize", pageSize + "");
+  return httpApp.post("/admin/exam/quality/history", form);
+}

src/features/library/quality/MarkBody.vue

@@ -0,0 +1,26 @@
+<template>
+  <CommonMarkBody
+    v-if="store"
+    :useMarkResult="false"
+    :store="store"
+    uniquePropName="studentId"
+    @error="$emit('error')"
+  />
+</template>
+
+<script lang="ts">
+import CommonMarkBody from "@/features/mark/CommonMarkBody.vue";
+import { defineComponent, watch } from "vue";
+import { store } from "@/features/mark/store";
+
+export default defineComponent({
+  name: "MarkBody",
+  components: { CommonMarkBody },
+  emits: ["error"],
+  setup() {
+    return { store };
+  },
+});
+</script>
+
+<style scoped></style>

src/features/library/quality/MarkHeader.vue

@@ -0,0 +1,193 @@
+<template>
+  <div
+    class="
+      tw-flex tw-gap-4 tw-justify-between tw-items-center
+      header-container
+      tw-px-1
+    "
+    v-if="store.setting"
+  >
+    <div>
+      {{ store.setting.subject.code + "-" + store.setting.subject.name }}
+    </div>
+    <div class="tw-flex tw-gap-1">
+      <div>
+        编号<span class="highlight-text">{{
+          store.currentTask?.secretNumber
+        }}</span>
+      </div>
+    </div>
+    <ul class="tw-flex tw-gap-2 tw-mb-0">
+      <li @click="upScale" title="放大">
+        <ZoomInOutlined
+          class="icon-font icon-font-size-20 tw-cursor-pointer"
+          :style="{
+            color: greaterThanOneScale ? 'red' : 'white',
+          }"
+        />
+      </li>
+      <li @click="downScale" title="缩小">
+        <ZoomOutOutlined
+          class="icon-font icon-font-size-20 tw-cursor-pointer"
+          :style="{
+            color: lessThanOneScale ? 'red' : 'white',
+          }"
+        />
+      </li>
+      <li @click="normalScale" title="适应">
+        <FullscreenOutlined
+          class="icon-font icon-font-size-20 tw-cursor-pointer"
+        />
+      </li>
+    </ul>
+    <!-- <div @click="toggleHistory" v-if="!isSingleStudent" title="回看">
+      <HistoryOutlined class="icon-font icon-font-size-20" />
+    </div> -->
+    <div class="tw-flex tw-place-items-center">
+      <UserOutlined class="icon-font icon-with-text" />{{
+        store.setting.userName
+      }}
+    </div>
+    <div
+      class="tw-flex tw-place-items-center tw-cursor-pointer"
+      @click="closeWindow"
+    >
+      <PoweroffOutlined class="icon-font icon-with-text" />关闭
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref } from "vue";
+import { store } from "@/features/mark/store";
+import {
+  ZoomInOutlined,
+  ZoomOutOutlined,
+  FullscreenOutlined,
+  HistoryOutlined,
+  UserOutlined,
+  PoweroffOutlined,
+  AlertOutlined,
+  QuestionCircleOutlined,
+} from "@ant-design/icons-vue";
+import { useRoute } from "vue-router";
+import { clearInspectedTask } from "@/api/libraryInspectPage";
+
+export default defineComponent({
+  name: "MarkHeader",
+  components: {
+    ZoomInOutlined,
+    ZoomOutOutlined,
+    FullscreenOutlined,
+    HistoryOutlined,
+    UserOutlined,
+    PoweroffOutlined,
+    AlertOutlined,
+    QuestionCircleOutlined,
+  },
+  setup() {
+    const route = useRoute();
+    let isSingleStudent = ref(false);
+    isSingleStudent.value = !!route.query.studentId;
+    const { studentId, subjectCode, groupNumber } = route.query as {
+      studentId: string;
+      subjectCode: string;
+      groupNumber: string;
+    };
+
+    const upScale = () => {
+      const s = store.setting.uiSetting["answer.paper.scale"];
+      if (s < 3)
+        store.setting.uiSetting["answer.paper.scale"] = +(s + 0.2).toFixed(1);
+    };
+    const downScale = () => {
+      const s = store.setting.uiSetting["answer.paper.scale"];
+      if (s > 0.2)
+        store.setting.uiSetting["answer.paper.scale"] = +(s - 0.2).toFixed(1);
+    };
+    const normalScale = () => {
+      store.setting.uiSetting["answer.paper.scale"] = 1;
+    };
+    const toggleHistory = () => {
+      store.historyOpen = !store.historyOpen;
+    };
+    const greaterThanOneScale = computed(() => {
+      return store.setting.uiSetting["answer.paper.scale"] > 1;
+    });
+    const lessThanOneScale = computed(() => {
+      return store.setting.uiSetting["answer.paper.scale"] < 1;
+    });
+
+    async function updateHistoryTask({
+      pageNumber = 1,
+      pageSize = 10,
+    }: {
+      pageNumber: number; // 从1开始
+      pageSize: number;
+    }) {
+      // const res = await getInspectedHistory({
+      //   pageNumber,
+      //   pageSize,
+      //   subjectCode,
+      // });
+      // if (res.data) {
+      //   store.historyTasks.push(res.data);
+      // }
+    }
+
+    async function updateClearTask() {
+      await clearInspectedTask(subjectCode, groupNumber);
+    }
+
+    const closeWindow = async () => {
+      await updateClearTask();
+      window.close();
+    };
+
+    onMounted(() => {
+      // 不确定是否一定能在关闭页面时调用
+      window.addEventListener("beforeunload", () => {
+        updateClearTask();
+      });
+    });
+
+    return {
+      store,
+      isSingleStudent,
+      upScale,
+      downScale,
+      normalScale,
+      greaterThanOneScale,
+      lessThanOneScale,
+      updateHistoryTask,
+      toggleHistory,
+      closeWindow,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.header-container {
+  /* z-index: 10000; */
+  position: relative;
+  font-size: 16px;
+  height: 40px;
+
+  background-color: #5d6d7d;
+  color: white;
+}
+.highlight-text {
+  color: #ffe400;
+}
+.icon-font {
+  display: block;
+}
+.icon-font-size-20 {
+  font-size: 20px;
+}
+.icon-with-text {
+  font-size: 18px;
+  line-height: 18px;
+}
+</style>

src/features/library/quality/MarkHistory.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="history-container tw-px-1">
+    <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
+      <div class="tw-text-xl">回评</div>
+      <a-button
+        class="tw-content-end"
+        shape="circle"
+        @click="store.historyOpen = false"
+      >
+        <template #icon><CloseOutlined /></template>
+      </a-button>
+    </div>
+    <div class="tw-mt-1 tw-mb-1 tw-flex"></div>
+    <div class="tw-flex tw-justify-between">
+      <div>编号</div>
+      <div>时间</div>
+      <div>分数</div>
+    </div>
+    <a-spin :spinning="loading" size="large" tip="Loading...">
+      <div v-for="(task, index) of store.historyTasks" :key="index">
+        <div
+          @click="replaceCurrentTask(task)"
+          class="
+            tw-flex
+            tw-justify-between
+            tw-h-6
+            tw-place-items-center
+            tw-rounded
+            tw-cursor-pointer
+          "
+          :class="store.currentTask === task && 'current-task'"
+        >
+          <div>{{ task.secretNumber }}</div>
+          <div>
+            {{ task.markTime && $filters.datetimeFilter(task.markTime) }}
+          </div>
+          <div style="width: 30px; text-align: center">
+            {{ task.markerScore }}
+          </div>
+        </div>
+      </div>
+    </a-spin>
+    <div class="tw-flex tw-justify-between tw-place-content-center tw-mt-2">
+      <a-button @click="previousPage">上一页</a-button>
+      <div style="line-height: 30px">第{{ currentPage }}页</div>
+      <a-button @click="nextPage">下一页</a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { MarkStore, Task } from "@/types";
+import { defineComponent, ref, watch, watchEffect } from "vue";
+import { useRoute } from "vue-router";
+import { store } from "@/features/mark/store";
+import { CloseOutlined } from "@ant-design/icons-vue";
+import { cloneDeep } from "lodash";
+import { getQualityHistory } from "@/api/qualityPage";
+
+export default defineComponent({
+  name: "MarkHistory",
+  components: { CloseOutlined },
+  emits: ["reload"],
+  setup(props, { emit }) {
+    const route = useRoute();
+    const { markerId, markerScore } = route.query as {
+      markerId: string;
+      markerScore: string;
+    };
+
+    watchEffect(async () => {
+      if (store.historyOpen) {
+        replaceCurrentTask(undefined);
+        await updateHistoryTask({});
+        replaceCurrentTask(store.historyTasks[0]);
+      } else {
+        emit("reload");
+      }
+    });
+
+    const secretNumberInput = ref(null);
+    const loading = ref(false);
+    const currentPage = ref(1);
+
+    async function updateHistoryTask({
+      pageNumber = 1,
+      pageSize = 10,
+    }: {
+      pageNumber?: number; // 从1开始
+      pageSize?: number;
+    }) {
+      loading.value = true;
+      const res = await getQualityHistory({
+        markerId,
+        markerScore,
+        pageNumber,
+        pageSize,
+      });
+      loading.value = false;
+      if (res.data) {
+        let data = cloneDeep(res.data) as Array<Task>;
+        data = data.map((t) => {
+          t.sliceUrls = t.sliceUrls.map((s) => store.setting.fileServer + s);
+          t.sheetUrls = t.sheetUrls?.map((s) => store.setting.fileServer + s);
+          t.jsonUrl = store.setting.fileServer + t.jsonUrl;
+
+          return t;
+        });
+        store.historyTasks = data;
+      }
+    }
+
+    function replaceCurrentTask(task: Task | undefined) {
+      store.currentTask = task;
+      if (task?.subject) {
+        store.setting.subject = task.subject as MarkStore["setting"]["subject"];
+      }
+    }
+
+    function previousPage() {
+      if (currentPage.value > 1) {
+        currentPage.value -= 1;
+        updateHistoryTask({ pageNumber: currentPage.value });
+      }
+    }
+    function nextPage() {
+      if (store.historyTasks.length >= 10) {
+        currentPage.value += 1;
+        updateHistoryTask({ pageNumber: currentPage.value });
+      }
+    }
+
+    return {
+      store,
+      loading,
+      secretNumberInput,
+      updateHistoryTask,
+      replaceCurrentTask,
+      currentPage,
+      previousPage,
+      nextPage,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.history-container {
+  min-width: 250px;
+  border-right: 1px solid grey;
+}
+.current-task {
+  background-color: aqua;
+}
+</style>

src/features/library/quality/Quality.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="my-container">
+    <mark-header />
+    <div class="tw-flex tw-gap-1">
+      <mark-history />
+      <mark-body />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from "vue";
+import { store } from "@/features/mark/store";
+import MarkHeader from "./MarkHeader.vue";
+import { useRoute } from "vue-router";
+import MarkBody from "./MarkBody.vue";
+import MarkHistory from "./MarkHistory.vue";
+import { MarkStore, Question, Task } from "@/types";
+import { getInspectedSetting } from "@/api/inspectPage";
+
+export default defineComponent({
+  name: "Quality",
+  components: {
+    MarkHeader,
+    MarkBody,
+    MarkHistory,
+  },
+  setup: () => {
+    const route = useRoute();
+    const { markerId, markerScore } = route.query as {
+      markerId: string;
+      markerScore: string;
+    };
+
+    async function updateSetting() {
+      const settingRes = await getInspectedSetting();
+      store.setting.fileServer = settingRes.data.fileServer;
+      store.setting.userName = settingRes.data.userName;
+      store.setting.uiSetting = {
+        "answer.paper.scale": 1,
+        "score.board.collapse": false,
+      } as MarkStore["setting"]["uiSetting"];
+      store.setting.splitConfig = settingRes.data.splitConfig;
+    }
+
+    const shouldReloadHistory = ref(0);
+
+    onMounted(async () => {
+      await updateSetting();
+      store.historyOpen = true;
+      // await updateClearTask();
+      // fetchTask(); // mark-header 会调用 (watchEffect)
+    });
+
+    return {
+      store,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.my-container {
+  width: 100%;
+}
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

src/router/index.ts

@@ -21,8 +21,12 @@ const routes = [
     component: () => import("@/features/student/studentTrack/StudentTrack.vue"),
   },
   {
-    path: "/admin/exam/track/library",
-    component: () => import("@/features/library/libraryTrack/LibraryTrack.vue"),
+    path: "/admin/exam/quality",
+    component: () => import("@/features/library/quality/Quality.vue"),
+  },
+  {
+    path: "/admin/exam/library/inspected/start",
+    component: () => import("@/features/library/inspect/LibraryInspect.vue"),
   },
   {
     path: "/:pathMatch(.*)*",