|
|
@@ -1,228 +1,230 @@
|
|
|
-<template>
|
|
|
- <div
|
|
|
- v-if="store.currentTask"
|
|
|
- class="mark-board-track-container"
|
|
|
- :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
|
|
|
- >
|
|
|
- <div class="top-container tw-flex-shrink-0 tw-flex tw-items-center">
|
|
|
- <div class="tw-flex tw-flex-col tw-flex-1 tw-text-center">
|
|
|
- <div class="tw-flex tw-justify-center">
|
|
|
- <img
|
|
|
- src="../../mark/images/totalscore.png"
|
|
|
- style="width: 13px; height: 16px"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div>试卷总分</div>
|
|
|
- </div>
|
|
|
- <div class="tw-flex-1" style="font-size: 40px">
|
|
|
- {{ markerScore > 0 ? markerScore : 0 }}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="star"
|
|
|
- :class="props.tagged ? 'star-yes' : 'star-no'"
|
|
|
- @click="makeTag(!props.tagged)"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-if="groups" class="tw-flex-grow tw-overflow-auto tw-my-5">
|
|
|
- <template v-for="(groupNumber, index) in groups" :key="index">
|
|
|
- <div class="tw-mb-4 tw-bg-white tw-p-4 tw-pl-5 tw-pr-3">
|
|
|
- <div
|
|
|
- class="tw-flex tw-justify-between tw-place-items-center hover:tw-bg-gray-200"
|
|
|
- @mouseover="addFocusTrack(groupNumber, undefined, undefined)"
|
|
|
- @mouseleave="removeFocusTrack"
|
|
|
- >
|
|
|
- <span class="secondary-text">分组 {{ groupNumber }}</span>
|
|
|
- </div>
|
|
|
- <div v-if="questions">
|
|
|
- <template v-for="(question, index2) in questions" :key="index2">
|
|
|
- <div
|
|
|
- v-if="question.groupNumber === groupNumber"
|
|
|
- class="question tw-flex tw-place-items-center tw-mb-1 tw-font-bold hover:tw-bg-gray-200"
|
|
|
- :class="{ uncalculate: question.uncalculate }"
|
|
|
- @mouseover="
|
|
|
- addFocusTrack(
|
|
|
- undefined,
|
|
|
- question.mainNumber,
|
|
|
- question.subNumber
|
|
|
- )
|
|
|
- "
|
|
|
- @mouseleave="removeFocusTrack"
|
|
|
- >
|
|
|
- <a-tooltip placement="left">
|
|
|
- <template #title>
|
|
|
- <span>未计入总分</span>
|
|
|
- </template>
|
|
|
- <MinusCircleFilled class="uncalculate-icon" />
|
|
|
- </a-tooltip>
|
|
|
- <span class="question-title">
|
|
|
- {{ question.title }} {{ question.mainNumber }}-{{
|
|
|
- question.subNumber
|
|
|
- }}
|
|
|
- </span>
|
|
|
- <span class="tw-text-center question-score">
|
|
|
- {{ question.score === -1 ? "未选做" : question.score || 0 }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="tw-flex tw-flex-shrink-0 tw-justify-center tw-gap-4">
|
|
|
- <a-button
|
|
|
- type="primary"
|
|
|
- class="full-width-btn"
|
|
|
- :disabled="props.isFirst"
|
|
|
- @click="fetchTask(false)"
|
|
|
- >
|
|
|
- 上一个
|
|
|
- </a-button>
|
|
|
- <a-button
|
|
|
- type="primary"
|
|
|
- class="full-width-btn"
|
|
|
- :disabled="props.isLast"
|
|
|
- @click="fetchTask(true)"
|
|
|
- >下一个</a-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
-import type { Question } from "@/types";
|
|
|
-import { reactive, watch } from "vue";
|
|
|
-import { store } from "@/store/store";
|
|
|
-import {
|
|
|
- addFocusTrack,
|
|
|
- removeFocusTrack,
|
|
|
-} from "@/features/mark/use/focusTracks";
|
|
|
-import { MinusCircleOutlined, MinusCircleFilled } from "@ant-design/icons-vue";
|
|
|
-
|
|
|
-const emit = defineEmits(["makeTag", "fetchTask"]);
|
|
|
-const props = defineProps<{
|
|
|
- tagged: boolean;
|
|
|
- isFirst: boolean;
|
|
|
- isLast: boolean;
|
|
|
-}>();
|
|
|
-let checkedQuestions: Question[] = reactive([]);
|
|
|
-
|
|
|
-watch(
|
|
|
- () => store.currentTask,
|
|
|
- () => {
|
|
|
- checkedQuestions.splice(0);
|
|
|
- }
|
|
|
-);
|
|
|
-const groups = $computed(() => {
|
|
|
- const gs = (store.currentTaskEnsured?.questionList || []).map(
|
|
|
- (q) => q.groupNumber
|
|
|
- );
|
|
|
- return [...new Set(gs)].sort((a, b) => a - b);
|
|
|
-});
|
|
|
-
|
|
|
-const questions = $computed(() => {
|
|
|
- const qs = store.currentTaskEnsured.questionList;
|
|
|
- return qs;
|
|
|
-});
|
|
|
-
|
|
|
-const markerScore = $computed(() => store.currentTaskEnsured.markerScore || 0);
|
|
|
-
|
|
|
-function fetchTask(next: boolean) {
|
|
|
- emit("fetchTask", next);
|
|
|
-}
|
|
|
-
|
|
|
-function makeTag(isTag: boolean) {
|
|
|
- emit("makeTag", isTag);
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.mark-board-track-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- max-width: 290px;
|
|
|
- min-width: 290px;
|
|
|
- max-height: calc(100vh - 56px);
|
|
|
- padding: 20px;
|
|
|
- z-index: 1001;
|
|
|
- transition: margin-right 0.5s;
|
|
|
- color: var(--app-small-header-text-color);
|
|
|
-}
|
|
|
-.mark-board-track-container.show {
|
|
|
- margin-right: 0;
|
|
|
-}
|
|
|
-.mark-board-track-container.hide {
|
|
|
- margin-right: -290px;
|
|
|
-}
|
|
|
-
|
|
|
-.top-container {
|
|
|
- background-color: var(--app-container-bg-color);
|
|
|
- height: 86px;
|
|
|
- border-radius: 5px;
|
|
|
-
|
|
|
- color: white;
|
|
|
- background-color: var(--app-primary-button-bg-color);
|
|
|
-}
|
|
|
-.question {
|
|
|
- min-width: 80px;
|
|
|
- background-color: var(--app-container-bg-color);
|
|
|
-}
|
|
|
-.question-title {
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-.question-score {
|
|
|
- flex-basis: 56px;
|
|
|
- padding: 0 3px;
|
|
|
-}
|
|
|
-
|
|
|
-.question.uncalculate {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.question .uncalculate-icon {
|
|
|
- display: none;
|
|
|
- color: red;
|
|
|
- position: absolute;
|
|
|
- font-size: 15px;
|
|
|
- left: -16px;
|
|
|
- top: 0.3em;
|
|
|
-}
|
|
|
-
|
|
|
-.question.uncalculate .uncalculate-icon {
|
|
|
- display: block;
|
|
|
-}
|
|
|
-
|
|
|
-.full-width-btn {
|
|
|
- width: 100%;
|
|
|
- border-radius: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.star {
|
|
|
- margin-top: -30px;
|
|
|
- margin-right: 20px;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- clip-path: polygon(
|
|
|
- 50% 0%,
|
|
|
- 61% 35%,
|
|
|
- 98% 35%,
|
|
|
- 68% 57%,
|
|
|
- 79% 91%,
|
|
|
- 50% 70%,
|
|
|
- 21% 91%,
|
|
|
- 32% 57%,
|
|
|
- 2% 35%,
|
|
|
- 39% 35%
|
|
|
- );
|
|
|
-}
|
|
|
-
|
|
|
-.star.star-yes {
|
|
|
- background-color: yellowgreen;
|
|
|
-}
|
|
|
-.star.star-no {
|
|
|
- background-color: white;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ v-if="store.currentTask"
|
|
|
+ class="mark-board-track-container"
|
|
|
+ :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
|
|
|
+ >
|
|
|
+ <div class="top-container tw-flex-shrink-0 tw-flex tw-items-center">
|
|
|
+ <div class="tw-flex tw-flex-col tw-flex-1 tw-text-center">
|
|
|
+ <div class="tw-flex tw-justify-center">
|
|
|
+ <img
|
|
|
+ src="../../mark/images/totalscore.png"
|
|
|
+ style="width: 13px; height: 16px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>试卷总分</div>
|
|
|
+ </div>
|
|
|
+ <div class="tw-flex-1" style="font-size: 40px">
|
|
|
+ {{ markerScore > 0 ? markerScore : 0 }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="star"
|
|
|
+ :class="props.tagged ? 'star-yes' : 'star-no'"
|
|
|
+ @click="makeTag(!props.tagged)"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="groups" class="tw-flex-grow tw-overflow-auto tw-my-5">
|
|
|
+ <template v-for="(groupNumber, index) in groups" :key="index">
|
|
|
+ <div class="tw-mb-4 tw-bg-white tw-p-4 tw-pl-5 tw-pr-3">
|
|
|
+ <div
|
|
|
+ class="tw-flex tw-justify-between tw-place-items-center hover:tw-bg-gray-200"
|
|
|
+ @mouseover="addFocusTrack(groupNumber, undefined, undefined)"
|
|
|
+ @mouseleave="removeFocusTrack"
|
|
|
+ >
|
|
|
+ <span class="secondary-text">分组 {{ groupNumber }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="questions">
|
|
|
+ <template v-for="(question, index2) in questions" :key="index2">
|
|
|
+ <div
|
|
|
+ v-if="question.groupNumber === groupNumber"
|
|
|
+ class="question tw-flex tw-place-items-center tw-mb-1 tw-font-bold hover:tw-bg-gray-200"
|
|
|
+ :class="{ uncalculate: question.uncalculate }"
|
|
|
+ @mouseover="
|
|
|
+ addFocusTrack(
|
|
|
+ undefined,
|
|
|
+ question.mainNumber,
|
|
|
+ question.subNumber
|
|
|
+ )
|
|
|
+ "
|
|
|
+ @mouseleave="removeFocusTrack"
|
|
|
+ >
|
|
|
+ <a-tooltip placement="left">
|
|
|
+ <template #title>
|
|
|
+ <span>{{
|
|
|
+ `选做题组${question.selectiveIndex}-方向${question.selectivePart}未计入总分`
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ <MinusCircleFilled class="uncalculate-icon" />
|
|
|
+ </a-tooltip>
|
|
|
+ <span class="question-title">
|
|
|
+ {{ question.title }} {{ question.mainNumber }}-{{
|
|
|
+ question.subNumber
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ <span class="tw-text-center question-score">
|
|
|
+ {{ question.score === -1 ? "未选做" : question.score || 0 }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tw-flex tw-flex-shrink-0 tw-justify-center tw-gap-4">
|
|
|
+ <a-button
|
|
|
+ type="primary"
|
|
|
+ class="full-width-btn"
|
|
|
+ :disabled="props.isFirst"
|
|
|
+ @click="fetchTask(false)"
|
|
|
+ >
|
|
|
+ 上一个
|
|
|
+ </a-button>
|
|
|
+ <a-button
|
|
|
+ type="primary"
|
|
|
+ class="full-width-btn"
|
|
|
+ :disabled="props.isLast"
|
|
|
+ @click="fetchTask(true)"
|
|
|
+ >下一个</a-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import type { Question } from "@/types";
|
|
|
+import { reactive, watch } from "vue";
|
|
|
+import { store } from "@/store/store";
|
|
|
+import {
|
|
|
+ addFocusTrack,
|
|
|
+ removeFocusTrack,
|
|
|
+} from "@/features/mark/use/focusTracks";
|
|
|
+import { MinusCircleOutlined, MinusCircleFilled } from "@ant-design/icons-vue";
|
|
|
+
|
|
|
+const emit = defineEmits(["makeTag", "fetchTask"]);
|
|
|
+const props = defineProps<{
|
|
|
+ tagged: boolean;
|
|
|
+ isFirst: boolean;
|
|
|
+ isLast: boolean;
|
|
|
+}>();
|
|
|
+let checkedQuestions: Question[] = reactive([]);
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => store.currentTask,
|
|
|
+ () => {
|
|
|
+ checkedQuestions.splice(0);
|
|
|
+ }
|
|
|
+);
|
|
|
+const groups = $computed(() => {
|
|
|
+ const gs = (store.currentTaskEnsured?.questionList || []).map(
|
|
|
+ (q) => q.groupNumber
|
|
|
+ );
|
|
|
+ return [...new Set(gs)].sort((a, b) => a - b);
|
|
|
+});
|
|
|
+
|
|
|
+const questions = $computed(() => {
|
|
|
+ const qs = store.currentTaskEnsured.questionList;
|
|
|
+ return qs;
|
|
|
+});
|
|
|
+
|
|
|
+const markerScore = $computed(() => store.currentTaskEnsured.markerScore || 0);
|
|
|
+
|
|
|
+function fetchTask(next: boolean) {
|
|
|
+ emit("fetchTask", next);
|
|
|
+}
|
|
|
+
|
|
|
+function makeTag(isTag: boolean) {
|
|
|
+ emit("makeTag", isTag);
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.mark-board-track-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ max-width: 290px;
|
|
|
+ min-width: 290px;
|
|
|
+ max-height: calc(100vh - 56px);
|
|
|
+ padding: 20px;
|
|
|
+ z-index: 1001;
|
|
|
+ transition: margin-right 0.5s;
|
|
|
+ color: var(--app-small-header-text-color);
|
|
|
+}
|
|
|
+.mark-board-track-container.show {
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+.mark-board-track-container.hide {
|
|
|
+ margin-right: -290px;
|
|
|
+}
|
|
|
+
|
|
|
+.top-container {
|
|
|
+ background-color: var(--app-container-bg-color);
|
|
|
+ height: 86px;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ color: white;
|
|
|
+ background-color: var(--app-primary-button-bg-color);
|
|
|
+}
|
|
|
+.question {
|
|
|
+ min-width: 80px;
|
|
|
+ background-color: var(--app-container-bg-color);
|
|
|
+}
|
|
|
+.question-title {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.question-score {
|
|
|
+ flex-basis: 56px;
|
|
|
+ padding: 0 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.question.uncalculate {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.question .uncalculate-icon {
|
|
|
+ display: none;
|
|
|
+ color: red;
|
|
|
+ position: absolute;
|
|
|
+ font-size: 15px;
|
|
|
+ left: -16px;
|
|
|
+ top: 0.3em;
|
|
|
+}
|
|
|
+
|
|
|
+.question.uncalculate .uncalculate-icon {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.full-width-btn {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.star {
|
|
|
+ margin-top: -30px;
|
|
|
+ margin-right: 20px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ clip-path: polygon(
|
|
|
+ 50% 0%,
|
|
|
+ 61% 35%,
|
|
|
+ 98% 35%,
|
|
|
+ 68% 57%,
|
|
|
+ 79% 91%,
|
|
|
+ 50% 70%,
|
|
|
+ 21% 91%,
|
|
|
+ 32% 57%,
|
|
|
+ 2% 35%,
|
|
|
+ 39% 35%
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+.star.star-yes {
|
|
|
+ background-color: yellowgreen;
|
|
|
+}
|
|
|
+.star.star-no {
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+</style>
|
刘洋