stmms-web/src/features/mark/Mark.vue

<template>
  <div class="my-container">
    <mark-header />
    <div class="tw-flex tw-gap-1">
      <mark-history show-search show-order :get-history="getHistoryTask" />
      <mark-body @error="removeBrokenTask" />
      <mark-board-track
        v-if="showMarkBoardTrack"
        @submit="saveTaskToServer"
        @allZeroSubmit="allZeroSubmit"
        @unselectiveSubmit="unselectiveSubmit"
      />
      <mark-board-key-board
        v-if="showMarkBoardKeyBoard"
        @submit="saveTaskToServer"
        @allZeroSubmit="allZeroSubmit"
        @unselectiveSubmit="unselectiveSubmit"
      />
      <mark-board-mouse
        v-if="showMarkBoardMouse"
        @submit="saveTaskToServer"
        @allZeroSubmit="allZeroSubmit"
        @unselectiveSubmit="unselectiveSubmit"
      />
    </div>
  </div>
  <AnswerModal />
  <PaperModal />
  <MinimapModal />

  <AllPaperModal />
  <SheetViewModal />
  <SpecialTagModal />
</template>

<script setup lang="ts">
import { computed, onMounted, watch } from "vue";
import {
  clearMarkTask,
  getGroup,
  getSetting,
  getStatus,
  getTask,
  saveTask,
  updateUISetting,
  doUnselectiveType,
} from "@/api/markPage";
import { store } from "@/store/store";
import MarkHeader from "./MarkHeader.vue";
import MarkBody from "./MarkBody.vue";
import { useTimers } from "@/setups/useTimers";
import MarkHistory from "./MarkHistory.vue";
import MarkBoardTrack from "./MarkBoardTrack.vue";
import { ModeEnum } from "@/types";
import type { Setting, Task, RichTextQuestion } from "@/types";
import MarkBoardKeyBoard from "./MarkBoardKeyBoard.vue";
import MarkBoardMouse from "./MarkBoardMouse.vue";
import { debounce, isEmpty, isNumber } from "lodash";
import { message } from "ant-design-vue";
import AnswerModal from "./AnswerModal.vue";
import PaperModal from "./PaperModal.vue";
import MinimapModal from "./MinimapModal.vue";
import AllPaperModal from "./AllPaperModal.vue";
import SheetViewModal from "./SheetViewModal.vue";
import SpecialTagModal from "./SpecialTagModal.vue";
import { preDrawImage } from "@/utils/utils";
import { getJSON, getPaper } from "@/api/jsonMark";
import EventBus from "@/plugins/eventBus";
import { getHistoryTask } from "@/api/markPage";

const { addInterval } = useTimers();

async function updateMarkTask() {
  await clearMarkTask();
}

async function updateSetting() {
  const settingRes = await getSetting();
  // 初次使用时，重置并初始化uisetting
  if (isEmpty(settingRes.data.uiSetting)) {
    settingRes.data.uiSetting = {
      "answer.paper.scale": 1,
      "score.board.collapse": false,
      "normal.mode": "keyboard",
      "score.fontSize.scale": 1,
    } as Setting["uiSetting"];
  }
  store.setting = settingRes.data;
  if (store.setting.subject?.answerUrl) {
    store.setting.subject.answerUrl =
      store.setting.fileServer + store.setting.subject?.answerUrl;
  }
  if (store.setting.subject?.paperUrl) {
    store.setting.subject.paperUrl =
      store.setting.fileServer + store.setting.subject?.paperUrl;

    if (!store.isScanImage) {
      await getPaper(store);
    }
  }
}

async function updateStatus() {
  const res = await getStatus();
  if (res.data.valid) Object.assign(store.status, res.data);
}
async function updateGroups() {
  const res = await getGroup();
  store.groups = res.data;
}

let preDrawing = false;
async function updateTask() {
  const res = await getTask();
  if (res.data.libraryId) {
    let rawTask = res.data as Task;
    rawTask.sliceUrls = rawTask.sliceUrls?.map(
      (s) => store.setting.fileServer + s
    );
    rawTask.sheetUrls = rawTask.sheetUrls?.map(
      (s) => store.setting.fileServer + s
    );
    rawTask.jsonUrl = store.setting.fileServer + rawTask.jsonUrl;
    //         for (const sliceUrl of (res.data as Task).sliceUrls) {
    //   fetch(store.setting.fileServer + sliceUrl);
    // }
    store.tasks.push(res.data);
    if (!store.historyOpen) {
      // 在正评中，才能替换task
      // TODO: 疑似替换多次引起重新渲染
      if (store.currentTask?.studentId !== store.tasks[0].studentId)
        store.currentTask = store.tasks[0];
    }

    // 如果是评完后，再取到的任务，则此时要更新一下status
    if (store.status.totalCount - store.status.markedCount === 0) {
      await updateStatus();
    }

    // prefetch sliceUrls image
    if (store.tasks.length > 1) {
      // 如果不是当前任务，则先等3秒再去取任务，以免和其他请求争夺网络资源
      await new Promise((resolve) => setTimeout(resolve, 3000));
    }
    // for (const sliceUrl of (res.data as Task).sliceUrls) {
    //   fetch(sliceUrl);
    // }
    try {
      preDrawing = true;
      if (store.isScanImage) {
        await preDrawImage(res.data);
      }
    } finally {
      preDrawing = false;
    }
  } else {
    store.message = res.data.message;
  }
}

// 5秒更新一次tasks
addInterval(() => {
  // console.log("get task", store.tasks);
  // 正在预绘制中，则不要再取任务，以免拖慢当前任务的绘制
  if (!preDrawing) {
    if (store.tasks.length < (store.setting.prefetchCount ?? 3)) {
      // 回看打开时，停止取任务
      if (!store.historyOpen) updateTask();
    }
  }
}, 5 * 1000);

// 不需要
// addInterval(() => {
//   updateStatus();
// }, 5 * 60 * 1000);

onMounted(async () => {
  await updateMarkTask();
  await updateSetting();
  await updateStatus();
  await updateGroups();
  await updateTask();
});

const __debounceUpdate = debounce(() => {
  updateUISetting(store.setting.mode, store.setting.uiSetting);
}, 3000);
watch(
  () => [store.setting.uiSetting, store.setting.mode],
  () => {
    __debounceUpdate();
  },
  { deep: true }
);

// 切换currentTask
watch(
  () => store.currentTask,
  () => {
    // 重置当前选择的quesiton和score
    store.currentQuestion = undefined;
    store.currentScore = undefined;
  }
);

const showMarkBoardTrack = computed(() => {
  return store.setting.mode === ModeEnum.TRACK;
});

const showMarkBoardKeyBoard = computed(() => {
  return (
    store.setting.mode === ModeEnum.COMMON &&
    store.setting.uiSetting["normal.mode"] === "keyboard"
  );
});

const showMarkBoardMouse = computed(() => {
  return (
    store.setting.mode === ModeEnum.COMMON &&
    store.setting.uiSetting["normal.mode"] === "mouse"
  );
});

const removeBrokenTask = () => {
  store.currentTask = undefined;

  if (store.historyOpen) {
    // store.currentTask = store.historyTasks[0];
    // 避免无限加载
    store.message = "加载失败，请重新选择。";
  } else {
    store.tasks.shift();
  }
};

const allZeroSubmit = async () => {
  const markResult = store.currentTask?.markResult;
  if (!markResult) return;

  const { markerScore, scoreList, trackList, specialTagList } = markResult;
  markResult.markerScore = 0;
  const ss = new Array(store.currentTask?.questionList.length);
  markResult.scoreList = ss.fill(0);
  markResult.trackList = [];

  try {
    await saveTaskToServer();
  } catch (error) {
    console.log("error restore");
  } finally {
    // console.log({ markerScore, scoreList, trackList });
    markResult.markerScore = markerScore;
    markResult.scoreList = scoreList;
    markResult.trackList = trackList;
    markResult.specialTagList = specialTagList;
  }
};

const unselectiveSubmit = async () => {
  const markResult = store.currentTask?.markResult;
  if (!markResult) return;

  try {
    const res = await doUnselectiveType();
    if (res?.data.success) {
      message.success({ content: "未选做处理成功", duration: 3 });
      const removeSubmitedTask = () => {
        if (!store.historyOpen) {
          store.currentTask = undefined;
          store.tasks.shift();
          store.currentTask = store.tasks[0];
        }
      };
      removeSubmitedTask();
      if (store.historyOpen) {
        EventBus.emit("should-reload-history");
      }
      updateStatus();
    } else {
      message.error({ content: res?.data.message || "错误", duration: 5 });
    }
  } catch (error) {
    console.log("未选做处理失败", error);
    message.error({ content: "网络异常", duration: 5 });
    await new Promise((res) => setTimeout(res, 1500));
    window.location.reload();
  }
};
const saveTaskToServer = async () => {
  const markResult = store.currentTask?.markResult;
  if (!markResult) return;

  if (
    markResult.scoreList.length !== store.currentTask?.questionList.length ||
    !markResult.scoreList.every((s) => isNumber(s))
  ) {
    console.error("markResult格式不正确，缺少分数");
    return;
  }

  if (store.setting.mode !== ModeEnum.TRACK) {
    markResult.trackList = [];
  } else {
    const trackScores =
      markResult.trackList
        .map((q) => Math.round((q.score || 0) * 100))
        .reduce((acc, s) => acc + s, 0) / 100;
    if (trackScores !== markResult.markerScore) {
      message.error({
        content: "轨迹分与总分不一致，请检查。",
        duration: 3,
      });
      return;
    }
  }
  if (store.setting.forceSpecialTag) {
    if (
      markResult.trackList.length === 0 &&
      markResult.specialTagList.length === 0
    ) {
      message.error({
        content: "强制标记已开启，请至少使用一个标记。",
        duration: 5,
      });
      return;
    }
  }
  console.log("save task to server");
  const mkey = "save_task_key";
  message.loading({ content: "保存评卷任务...", key: mkey });
  const res = (await saveTask()) as any;
  updateStatus();
  if (res.data.success && store.currentTask) {
    message.success({ content: "保存成功", key: mkey, duration: 2 });
    if (!store.historyOpen) {
      store.currentTask = undefined;
      store.tasks.shift();
      store.currentTask = store.tasks[0];
    } else {
      EventBus.emit("should-reload-history");
    }
  } else if (res.data.message) {
    console.log(res.data.message);
    message.error({ content: res.data.message, key: mkey, duration: 10 });
  } else if (!store.currentTask) {
    message.warn({ content: "暂无新任务", key: mkey, duration: 10 });
  }
};
</script>

<style scoped>
.my-container {
  width: 100%;
  overflow: clip;
}
</style>