mark-web/src/components/mark/Mark.vue

<template>
  <div class="my-container" @dblclick="saveTaskToServer">
    <mark-header />
    <div class="flex gap-1">
      <mark-history />
      <mark-body />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, watch } from "vue";
import {
  clearMarkTask,
  getGroup,
  getSetting,
  getStatus,
  getTask,
  saveTask,
  updateUISetting,
} from "@/api/markPage";
import { store } from "./store";
import MarkHeader from "./MarkHeader.vue";
import MarkBody from "./MarkBody.vue";
import { useTimers } from "@/setups/useTimers";
import MarkHistory from "./MarkHistory.vue";

export default defineComponent({
  name: "Mark",
  components: {
    MarkHeader,
    MarkBody,
    MarkHistory,
  },
  setup: () => {
    const { addInterval } = useTimers();

    async function updateMarkTask() {
      const settingRes = await clearMarkTask();
    }

    async function updateSetting() {
      const settingRes = await getSetting();
      settingRes.data.uiSetting["answer.paper.scale"] ||= 1;
      store.setting = settingRes.data;
    }
    async function updateStatus() {
      const res = await getStatus();
      store.status = res.data;
    }
    async function updateGroups() {
      const res = await getGroup();
      store.groups = res.data;
    }
    async function updateTask() {
      const res = await getTask();
      if (res.data.libraryId) {
        store.tasks.push(res.data);
        store.currentTask = store.tasks[0];
      }
    }

    // 5秒更新一次tasks
    addInterval(() => {
      // console.log("get task", store.tasks);
      if (store.tasks.length < 3) {
        updateTask();
      }
    }, 5 * 1000);
    addInterval(() => {
      updateStatus();
    }, 30 * 1000);

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

    watch(
      () => store.setting.uiSetting,
      () => {
        updateUISetting(undefined, store.setting.uiSetting);
      },
      { deep: true }
    );

    const saveTaskToServer = async () => {
      console.log("save task to server");
      const res = (await saveTask()) as any;
      updateStatus();
      if (res.data.success && store.currentTask) {
        let { libraryId, studentId } = store.currentTask;
        const i = store.markResults.findIndex(
          (s) => s.libraryId === libraryId && s.studentId === studentId
        );
        store.markResults.splice(i, 1);
        store.currentTask = undefined;
        store.tasks.shift();
      } else {
        console.log(res.data.message);
      }
    };

    function scoreKeyInput(event: KeyboardEvent) {
      console.log(event);
    }

    onMounted(() => {
      document.addEventListener("keypress", scoreKeyInput);
    });
    onUnmounted(() => {
      document.removeEventListener("keypress", scoreKeyInput);
    });

    return { store, saveTaskToServer, scoreKeyInput };
  },
});
</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>