检测轨迹数量的显示是否和数据一致

src/features/mark/CommonMarkBody.vue

@@ -79,7 +79,7 @@
 import { onMounted, onUnmounted, reactive, watch, watchEffect } from "vue";
 import { store } from "@/store/store";
 import MarkDrawTrack from "./MarkDrawTrack.vue";
-import type { SliceImage, SpecialTag, Track } from "@/types";
+import type { SliceImage } from "@/types";
 import { useTimers } from "@/setups/useTimers";
 import {
   getDataUrlForSliceConfig,
@@ -91,6 +91,7 @@ import MultiMediaMarkBody from "./MultiMediaMarkBody.vue";
 import "viewerjs/dist/viewer.css";
 import Viewer from "viewerjs";
 import ZoomPaper from "@/components/ZoomPaper.vue";
+import { message } from "ant-design-vue";
 
 type MakeTrack = (
   event: MouseEvent,
@@ -200,6 +201,14 @@ async function processSliceConfig() {
   // 用来保存sliceImage在整个图片容器中(不包括image-seperator)的高度范围
   let accumTopHeight = 0;
   let accumBottomHeight = 0;
+  const trackLists = hasMarkResultToRender
+    ? markResult.trackList
+    : store.currentTask.questionList.map((q) => q.trackList).flat();
+
+  const tagLists = hasMarkResultToRender
+    ? markResult.specialTagList ?? []
+    : store.currentTask.specialTagList ?? [];
+
   const tempSliceImagesWithTrackList = [] as Array<SliceImage>;
   for (const sliceConfig of store.currentTask.sliceConfig) {
     accumBottomHeight += sliceConfig.h;
@@ -214,24 +223,10 @@ async function processSliceConfig() {
       url
     );
 
-    let trackLists = [] as Array<Track>;
-    if (hasMarkResultToRender) {
-      trackLists = markResult.trackList;
-    } else {
-      trackLists = store.currentTask.questionList
-        .map((q) => q.trackList)
-        .flat();
-    }
     const thisImageTrackList = trackLists.filter(
       (t) => t.offsetIndex === indexInSliceUrls
     );
 
-    let tagLists = [] as Array<SpecialTag>;
-    if (hasMarkResultToRender) {
-      tagLists = markResult.specialTagList ?? [];
-    } else {
-      tagLists = store.currentTask.specialTagList ?? [];
-    }
     const thisImageTagList = tagLists.filter(
       (t) => t.offsetIndex === indexInSliceUrls
     );
@@ -262,6 +257,17 @@ async function processSliceConfig() {
     });
     accumTopHeight = accumBottomHeight;
   }
+
+  // 测试是否所有的track和tag都在待渲染的tempSliceImagesWithTrackList中
+  const numOfTrackAndTagInData = trackLists.length + tagLists.length;
+  const numOfTrackAndTagInTempSlice = tempSliceImagesWithTrackList
+    .map((v) => v.trackList.length + v.tagList.length)
+    .reduce((p, c) => p + c);
+  if (numOfTrackAndTagInData !== numOfTrackAndTagInTempSlice) {
+    console.warn({ tagLists, trackLists, tempSliceImagesWithTrackList });
+    void message.warn("渲染轨迹数量与实际数量不一致");
+  }
+
   // console.log("render: ", store.currentTask.secretNumber);
   if (sliceImagesWithTrackList.length === 0) {
     // 初次渲染，不做动画
@@ -329,6 +335,12 @@ async function processSplitConfig() {
   let accumTopHeight = 0;
   let accumBottomHeight = 0;
   const tempSliceImagesWithTrackList = [] as Array<SliceImage>;
+  const trackLists = hasMarkResultToRender
+    ? markResult.trackList
+    : (store.currentTask.questionList || []).map((q) => q.trackList).flat();
+  const tagLists = hasMarkResultToRender
+    ? markResult.specialTagList ?? []
+    : store.currentTask.specialTagList ?? [];
   for (const url of store.currentTask.sliceUrls) {
     for (const config of splitConfigPairs) {
       const indexInSliceUrls = store.currentTask.sliceUrls.indexOf(url) + 1;
@@ -350,25 +362,10 @@ async function processSplitConfig() {
         url
       );
 
-      let trackLists = [] as Array<Track>;
-      if (hasMarkResultToRender) {
-        trackLists = markResult.trackList;
-      } else {
-        // 成绩查询 questionList 可能为空
-        trackLists = (store.currentTask.questionList || [])
-          .map((q) => q.trackList)
-          .flat();
-      }
       const thisImageTrackList = trackLists.filter(
         (t) => t.offsetIndex === indexInSliceUrls
       );
 
-      let tagLists = [] as Array<SpecialTag>;
-      if (hasMarkResultToRender) {
-        tagLists = markResult.specialTagList ?? [];
-      } else {
-        tagLists = store.currentTask.specialTagList ?? [];
-      }
       const thisImageTagList = tagLists.filter(
         (t) => t.offsetIndex === indexInSliceUrls
       );
@@ -403,6 +400,17 @@ async function processSplitConfig() {
       }
     }
   }
+
+  // 测试是否所有的track和tag都在待渲染的tempSliceImagesWithTrackList中
+  const numOfTrackAndTagInData = trackLists.length + tagLists.length;
+  const numOfTrackAndTagInTempSlice = tempSliceImagesWithTrackList
+    .map((v) => v.trackList.length + v.tagList.length)
+    .reduce((p, c) => p + c);
+  if (numOfTrackAndTagInData !== numOfTrackAndTagInTempSlice) {
+    console.warn({ tagLists, trackLists, tempSliceImagesWithTrackList });
+    void message.warn("渲染轨迹数量与实际数量不一致");
+  }
+
   rotateBoard = 1;
   addTimeout(() => {
     sliceImagesWithTrackList.splice(0);