mark-web/src/features/mark/MarkBoardTrack.vue

<template>
  <div
    v-if="store.setting.uiSetting['score.board.collapse']"
    @mouseover="handleMouseOverWithBoard"
  >
    <div
      class="tw-self-start tw-cursor-pointer tw-pb-10"
      @mouseover.stop="() => true"
    >
      <!-- <ArrowLeftOutlined
        style="font-size: 30px"
        @click="collapseSideBar"
        @mouseover="(e) => e.stopPropagation()"
      /> -->
      <a-switch
        v-model:checked="store.setting.uiSetting['score.board.collapse']"
      />
    </div>
  </div>
  <div
    v-if="store.currentTask"
    class="mark-board-track-container"
    :class="store.setting.uiSetting['score.board.collapse'] && 'hide-board'"
    @mouseover="handleMouseOverWithBoard"
    @mouseout="handleMouseOutWithBoard"
  >
    <div class="tw-flex">
      <div class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200">
        <!-- <ArrowRightOutlined style="font-size: 30px" @click="collapseSideBar" /> -->
        <a-switch
          v-model:checked="store.setting.uiSetting['score.board.collapse']"
        />
      </div>
      <h1 class="tw-text-3xl tw-text-center tw-flex-grow">
        总分：{{ store.currentMarkResult?.markerScore || 0 }}
      </h1>
    </div>
    <div class="tw-mb-2 tw-flex tw-place-content-center">
      <a-popconfirm
        v-if="store.setting.enableAllZero"
        title="确定给全零分？"
        ok-text="确定"
        cancel-text="取消"
        @confirm="$emit('allZeroSubmit')"
      >
        <a-button
          type="primary"
          shape="round"
          size="large"
          style="margin-right: 20px !important"
        >
          全零分
        </a-button>
      </a-popconfirm>

      <qm-button type="primary" shape="round" size="large" @click="submit">
        提交
      </qm-button>
    </div>

    <div
      style="
        height: calc(100vh - 41px - 160px);
        overflow: hidden;
        user-select: none;
      "
    >
      <div
        v-if="store.currentTask && store.currentTask.questionList"
        class="tw-flex tw-gap-1 tw-flex-wrap tw-justify-between tw-overflow-scroll tw-content-start"
        style="min-height: 20% !important"
        :style="{ height: `${topPercent}%` }"
      >
        <template
          v-for="(question, index) in store.currentTask?.questionList"
          :key="index"
        >
          <div
            @click="chooseQuestion(question)"
            class="question tw-rounded tw-p-1"
            style="height: 70px"
            :class="isCurrentQuestion(question) && 'current-question'"
          >
            <div style="border-bottom: 1px solid grey">
              {{ question.title }} {{ question.mainNumber }}-{{
                question.subNumber
              }}
            </div>
            <div class="tw-text-center tw-font-medium tw-text-3xl">
              <!-- 特殊的空格符号 -->
              {{ question.score ?? " " }}
            </div>
          </div>
        </template>
      </div>

      <div
        style="
          width: 100%;
          height: 4px;
          border: 2px solid grey;
          cursor: row-resize;
        "
        ref="dragSpliter"
      ></div>
      <div
        class="tw-flex tw-gap-1 tw-flex-wrap tw-mt-5 tw-overflow-scroll tw-content-start"
        style="padding-bottom: 40px"
        :style="{ height: `${100 - topPercent}%` }"
      >
        <div
          v-for="(s, i) in questionScoreSteps"
          :key="i"
          @click="chooseScore(s)"
          class="single-score"
          :class="isCurrentScore(s) && 'current-score'"
        >
          {{ s }}
        </div>
      </div>
    </div>
    <div
      class="tw-flex tw-justify-between tw-mt-4"
      style="position: relative; bottom: 10px; right: 0px; width: 230px"
    >
      <qm-button
        type="primary"
        shape="round"
        size="large"
        :clickTimeout="300"
        @click="clearLatestMarkOfCurrentQuetion"
      >
        回退
      </qm-button>

      <qm-button
        type="primary"
        shape="round"
        size="large"
        :clickTimeout="300"
        @click="clearAllMarksOfCurrentQuetion"
      >
        清除本题
      </qm-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Question } from "@/types";
import { isNumber } from "lodash";
import { computed, defineComponent, onMounted, onUnmounted, watch } from "vue";
import { store } from "./store";
import { autoChooseFirstQuestion } from "./use/autoChooseFirstQuestion";
import { message } from "ant-design-vue";
import { dragSplitPane } from "./use/splitPane";
import { ArrowRightOutlined, ArrowLeftOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "MarkBoardTrack",
  emits: ["submit", "allZeroSubmit"],
  components: { ArrowRightOutlined, ArrowLeftOutlined },
  setup(props, { emit }) {
    const { dragSpliter, topPercent } = dragSplitPane();

    const { chooseQuestion } = autoChooseFirstQuestion();

    const questionScoreSteps = computed(() => {
      const question = store.currentQuestion;
      if (!question) return [];

      const remainScore =
        Math.round(question.maxScore * 100 - (question.score || 0) * 100) / 100;
      const steps = [];
      for (
        let i = 0;
        i <= remainScore;
        i = Math.round(i * 100 + question.intervalScore * 100) / 100
      ) {
        steps.push(i);
      }
      if (
        Math.round(remainScore * 100) %
          Math.round(question.intervalScore * 100) !==
        0
      ) {
        steps.push(remainScore);
      }

      return steps;
    });

    function isCurrentQuestion(question: Question) {
      return (
        store.currentQuestion?.mainNumber === question.mainNumber &&
        store.currentQuestion?.subNumber === question.subNumber
      );
    }
    watch(
      () => store.currentQuestion,
      () => {
        store.currentScore = undefined;
      }
    );

    function isCurrentScore(score: number) {
      return store.currentScore === score;
    }
    function chooseScore(score: number) {
      if (store.currentScore === score) {
        store.currentScore = undefined;
      } else {
        store.currentScore = score;
        store.currentSpecialTag = undefined;
      }
    }

    let keyPressTimestamp = 0;
    let keys: string[] = [];
    function numberKeyListener(event: KeyboardEvent) {
      // console.log(event);
      if (!store.currentQuestion) return;

      function indexOfCurrentQuestion() {
        return store.currentTask?.questionList.findIndex(
          (q) =>
            q.mainNumber === store.currentQuestion?.mainNumber &&
            q.subNumber === store.currentQuestion.subNumber
        );
      }

      // tab 循环答题列表
      if (event.key === "Tab") {
        const idx = indexOfCurrentQuestion() as number;
        if (idx >= 0 && store.currentTask) {
          const len = store.currentTask.questionList.length;
          chooseQuestion(store.currentTask.questionList[(idx + 1) % len]);
          event.preventDefault();
        }
        return;
      }

      if (event.timeStamp - keyPressTimestamp > 1 * 1000) {
        keys = [];
      }
      keyPressTimestamp = event.timeStamp;
      keys.push(event.key);
      if (isNaN(parseFloat(keys.join("")))) {
        keys = [];
      }
      if (event.key === "Escape") {
        keys = [];
      }
      const score = parseFloat(keys.join(""));
      if (isNumber(score) && questionScoreSteps.value.includes(score)) {
        chooseScore(score);
      }
    }

    onMounted(() => {
      document.addEventListener("keydown", numberKeyListener);
    });
    onUnmounted(() => {
      document.removeEventListener("keydown", numberKeyListener);
    });

    const collapseSideBar = () => {
      store.setting.uiSetting["score.board.collapse"] = !!!store.setting
        .uiSetting["score.board.collapse"];
    };

    const handleMouseOverWithBoard = () => {
      if (store.setting.uiSetting["score.board.collapse"]) {
        const container = document.querySelector(".mark-board-track-container");
        if (container) {
          container.classList.add("show-board");
        }
      }
    };

    const handleMouseOutWithBoard = () => {
      if (store.setting.uiSetting["score.board.collapse"]) {
        const container = document.querySelector(".mark-board-track-container");
        if (container) {
          container.classList.remove("show-board");
        }
      }
    };

    function clearLatestMarkOfCurrentQuetion() {
      if (!store.currentMarkResult || !store.currentQuestion) return;

      const ts = store.currentMarkResult?.trackList.filter(
        (q) =>
          q.mainNumber === store.currentQuestion?.mainNumber &&
          q.subNumber === store.currentQuestion?.subNumber
      );
      if (ts.length === 0) return;
      const maxNumber = Math.max(...ts.map((q) => q.number));
      const idx = store.currentMarkResult.trackList.findIndex(
        (q) =>
          q.mainNumber === store.currentQuestion?.mainNumber &&
          q.subNumber === store.currentQuestion?.subNumber &&
          q.number === maxNumber
      );
      if (idx >= 0)
        store.removeScoreTracks = store.currentMarkResult.trackList.splice(
          idx,
          1
        );
    }

    function clearAllMarksOfCurrentQuetion() {
      if (!store.currentMarkResult || !store.currentQuestion) return;

      store.removeScoreTracks = store.currentMarkResult?.trackList.filter(
        (q) =>
          q.mainNumber === store.currentQuestion?.mainNumber &&
          q.subNumber === store.currentQuestion?.subNumber
      );
      store.currentMarkResult.trackList = store.currentMarkResult?.trackList.filter(
        (q) =>
          !(
            q.mainNumber === store.currentQuestion?.mainNumber &&
            q.subNumber === store.currentQuestion?.subNumber
          )
      );
    }

    function submit() {
      const errors: any = [];
      store.currentTask?.questionList.forEach((question, index) => {
        if (!isNumber(question.score)) {
          errors.push({
            question,
            index,
            error: `${question.mainNumber}-${question.subNumber} 没有赋分不能提交。`,
          });
        }
      });
      if (errors.length === 0) {
        emit("submit");
      } else {
        console.log(errors);
        message.error({
          content: errors.map((e: any) => `${e.error}`).join("\n"),
          duration: 10,
        });
      }
    }

    return {
      store,
      isCurrentQuestion,
      chooseQuestion,
      isCurrentScore,
      chooseScore,
      questionScoreSteps,
      clearLatestMarkOfCurrentQuetion,
      clearAllMarksOfCurrentQuetion,
      dragSpliter,
      topPercent,
      collapseSideBar,
      handleMouseOverWithBoard,
      handleMouseOutWithBoard,
      submit,
    };
  },
});
</script>

<style scoped>
.mark-board-track-container {
  max-width: 250px;
  min-width: 250px;
  border-left: 1px solid grey;
  padding-left: 6px;
  padding-right: 6px;
  max-height: calc(100vh - 41px);
  overflow: scroll;
}
.hide-board {
  display: none;
}
.show-board {
  position: absolute;
  background-color: white;
  right: 0px;
  display: block;
}
.question {
  min-width: 100px;
  border: 1px solid grey;
}
.current-question {
  border: 1px solid yellowgreen;
  background-color: lightblue;
}
.single-score {
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;

  border: 1px solid black;
  border-radius: 5px;
}
.current-score {
  border: 1px solid yellowgreen;
  background-color: lightblue;
}
</style>