清除分数轨迹

src/components/mark/MarkBoardTrack.vue

@@ -49,6 +49,11 @@
         {{ s }}
       </div>
     </div>
+
+    <div class="tw-flex tw-justify-between">
+      <div @click="clearLatestMarkOfCurrentQuetion">回退</div>
+      <div @click="clearAllMarksOfCurrentQuetion">清除本题</div>
+    </div>
   </div>
 </template>
 
@@ -128,6 +133,44 @@ export default defineComponent({
       document.removeEventListener("keydown", numberKeyListener);
     });
 
+    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
+      );
+      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
+      );
+      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) => {
@@ -149,6 +192,8 @@ export default defineComponent({
       isCurrentScore,
       chooseScore,
       questionScoreSteps,
+      clearLatestMarkOfCurrentQuetion,
+      clearAllMarksOfCurrentQuetion,
       submit,
     };
   },

src/components/mark/MarkBody.vue

@@ -26,13 +26,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, ref, watchEffect } from "vue";
+import { computed, defineComponent, reactive, watch, watchEffect } from "vue";
 import { findCurrentTaskMarkResult, store } from "./store";
 import filters from "@/filters";
 import MarkDrawTrack from "./MarkDrawTrack.vue";
 import { Track } from "@/types";
 import { useTimers } from "@/setups/useTimers";
 import { loadImage } from "@/utils/utils";
+import { groupBy, sortBy } from "lodash";
 
 interface SliceImage {
   url: string;
@@ -236,11 +237,18 @@ export default defineComponent({
         }
       }
     }
+    // 供回退和清除使用
+    // let trackLen = store.currentMarkResult?.trackList.length;
     const renderPaperAndMark = async () => {
       // check if have MarkResult for currentTask
       let markResult = findCurrentTaskMarkResult();
 
       if (!markResult || !store.currentTask) return;
+      // console.log(markResult.trackList.length);
+      // if (markResult.trackList.length !== trackLen) {
+      //   sliceImagesWithTrackList.splice(0);
+      //   trackLen = markResult.trackList.length;
+      // }
 
       // reset sliceImagesWithTrackList ，当切换任务时，要重新绘制图片和轨迹
       if (_studentId !== store.currentTask.studentId) {
@@ -292,7 +300,7 @@ export default defineComponent({
       const track = {} as Track;
       track.mainNumber = store.currentQuestion?.mainNumber;
       track.subNumber = store.currentQuestion?.subNumber;
-      track.number = Date.now();
+      track.number = (Date.now() - new Date(2010, 0, 0).valueOf()) / 10e7;
       track.score = store.currentScore;
       track.offsetIndex = item.indexInSliceUrls;
       track.offsetX = Math.round(
@@ -316,6 +324,82 @@ export default defineComponent({
       item.trackList.push(track);
     };
 
+    // 清除分数轨迹
+    watchEffect(() => {
+      for (const track of store.removeScoreTracks) {
+        for (const sliceImage of sliceImagesWithTrackList) {
+          sliceImage.trackList = sliceImage.trackList.filter(
+            (t) =>
+              !(
+                t.mainNumber === track.mainNumber &&
+                t.subNumber === track.subNumber &&
+                t.number === track.number
+              )
+          );
+        }
+      }
+    });
+
+    // 轨迹模式下，添加轨迹，更新分数
+    watch(
+      () => store.currentMarkResult?.trackList,
+      () => {
+        const markResult = findCurrentTaskMarkResult();
+        if (markResult && store.currentMarkResult) {
+          const scoreGroups = groupBy(
+            markResult.trackList,
+            (obj) =>
+              (obj.mainNumber + "").padStart(10, "0") +
+              obj.subNumber.padStart(10, "0")
+          );
+          const questionWithScore = Object.entries(scoreGroups);
+          const questionWithTotalScore = questionWithScore.map((v) => [
+            v[0],
+            v[1].reduce((acc, c) => (acc += c.score), 0),
+          ]);
+          const questionWithTotalScoreSorted = sortBy(
+            questionWithTotalScore,
+            (obj) => obj[0]
+          );
+          const scoreList = questionWithTotalScoreSorted.map((s) => s[1]);
+          // console.log(
+          //   scoreGroups,
+          //   questionWithScore,
+          //   questionWithTotalScore,
+          //   questionWithTotalScoreSorted,
+          //   scoreList
+          // );
+          const cq = store.currentQuestion;
+          if (cq) {
+            cq.score =
+              markResult.trackList
+                .filter(
+                  (v) =>
+                    v.mainNumber === cq.mainNumber &&
+                    v.subNumber === cq.subNumber
+                )
+                .map((v) => v.score)
+                .reduce((acc, v) => (acc += v * 100), 0) / 100;
+          }
+          markResult.scoreList = scoreList as number[];
+          // const sortScore = orderBy(markResult.trackList, ['mainNumber', 'subNumber', 'score']);
+          // markResult.scoreList = sortScore.reduce((acc, pre) => {
+          //   if(pre.mainNumber === cur.mainNumber && pre.subNumber === cur.subNumber) {
+          //     acc[acc.length-1] += cur.score
+          //   }
+          // }, [0])
+          markResult.markerScore =
+            markResult.scoreList
+              .filter((v): v is number => v !== null)
+              .reduce((acc, v) => (acc += v * 100), 0) / 100;
+
+          // console.log(markResult.scoreList, markResult.markerScore);
+          // renderPaperAndMark();
+        }
+      },
+      { deep: true }
+    );
+
     return {
       store,
       sliceImagesWithTrackList,

src/components/mark/store.ts

@@ -1,6 +1,5 @@
-import { ModeEnum, Setting, MarkStore, Task, MarkResult, Track } from "@/types";
-import { groupBy, sortBy } from "lodash";
-import { reactive, watch } from "vue";
+import { Setting, MarkStore, Task, MarkResult, Track } from "@/types";
+import { reactive } from "vue";
 
 const obj = {
   setting: {
@@ -39,6 +38,7 @@ const obj = {
   historyOpen: false,
   MarkBoardTrackCollapse: false,
   historyTasks: [],
+  removeScoreTracks: [],
 } as MarkStore;
 
 /** 如果currentTask不存在，则返回undefined; 如果currentMarkResult不存在，则创建一个对应的markResult并返回 */
@@ -101,65 +101,3 @@ export function removeCurrentMarkResult() {
 }
 
 export const store = reactive(obj);
-
-// 轨迹模式下，添加轨迹，更新分数
-watch(
-  () => store.currentMarkResult?.trackList,
-  () => {
-    const markResult = findCurrentTaskMarkResult();
-    if (
-      markResult &&
-      store.currentMarkResult &&
-      store.currentMarkResult.trackList.length > 0
-    ) {
-      const scoreGroups = groupBy(
-        markResult.trackList,
-        (obj) =>
-          (obj.mainNumber + "").padStart(10, "0") +
-          obj.subNumber.padStart(10, "0")
-      );
-      const questionWithScore = Object.entries(scoreGroups);
-      const questionWithTotalScore = questionWithScore.map((v) => [
-        v[0],
-        v[1].reduce((acc, c) => (acc += c.score), 0),
-      ]);
-      const questionWithTotalScoreSorted = sortBy(
-        questionWithTotalScore,
-        (obj) => obj[0]
-      );
-      const scoreList = questionWithTotalScoreSorted.map((s) => s[1]);
-      // console.log(
-      //   scoreGroups,
-      //   questionWithScore,
-      //   questionWithTotalScore,
-      //   questionWithTotalScoreSorted,
-      //   scoreList
-      // );
-      const cq = store.currentQuestion;
-      if (cq) {
-        cq.score =
-          markResult.trackList
-            .filter(
-              (v) =>
-                v.mainNumber === cq.mainNumber && v.subNumber === cq.subNumber
-            )
-            .map((v) => v.score)
-            .reduce((acc, v) => (acc += v * 100), 0) / 100;
-      }
-      markResult.scoreList = scoreList as number[];
-      // const sortScore = orderBy(markResult.trackList, ['mainNumber', 'subNumber', 'score']);
-      // markResult.scoreList = sortScore.reduce((acc, pre) => {
-      //   if(pre.mainNumber === cur.mainNumber && pre.subNumber === cur.subNumber) {
-      //     acc[acc.length-1] += cur.score
-      //   }
-      // }, [0])
-      markResult.markerScore =
-        markResult.scoreList
-          .filter((v): v is number => v !== null)
-          .reduce((acc, v) => (acc += v * 100), 0) / 100;
-
-      // console.log(markResult.scoreList, markResult.markerScore);
-    }
-  },
-  { deep: true }
-);

src/types/index.ts

@@ -17,6 +17,7 @@ export interface MarkStore {
   historyOpen: boolean; // 是否打开回评侧边栏
   MarkBoardTrackCollapse: boolean; // 是否收缩评分版
   historyTasks: Array<Task>;
+  removeScoreTracks: Array<Track>;
 }
 
 export interface Setting {