|
@@ -70,9 +70,11 @@
|
|
|
{{ store.currentQuestion?.mainNumber }}-{{
|
|
|
store.currentQuestion?.subNumber
|
|
|
}}({{
|
|
|
- store.currentTask?.markResult?store.currentTask?.markResult.scoreList[
|
|
|
- store.currentQuestion?.__index || 0
|
|
|
- ] : " "
|
|
|
+ store.currentTask?.markResult
|
|
|
+ ? store.currentTask?.markResult.scoreList[
|
|
|
+ store.currentQuestion?.__index || 0
|
|
|
+ ]
|
|
|
+ : " "
|
|
|
}})
|
|
|
</div>
|
|
|
<div class="text">
|
|
@@ -99,7 +101,7 @@ import "viewerjs/dist/viewer.css";
|
|
|
import Viewer from "viewerjs";
|
|
|
import ZoomPaper from "@/components/ZoomPaper.vue";
|
|
|
import { message } from "ant-design-vue";
|
|
|
-
|
|
|
+import EventBus from "@/plugins/eventBus";
|
|
|
type MakeTrack = (
|
|
|
event: MouseEvent,
|
|
|
item: SliceImage,
|
|
@@ -180,6 +182,14 @@ let sliceImagesWithTrackList: SliceImage[] = reactive([]);
|
|
|
let maxSliceWidth = 0; // 最大的裁切块宽度,图片容器以此为准
|
|
|
let theFinalHeight = 0; // 最终宽度,用来定位轨迹在第几张图片,不包括image-seperator高度
|
|
|
|
|
|
+watch(
|
|
|
+ () => sliceImagesWithTrackList,
|
|
|
+ () => {
|
|
|
+ EventBus.emit("draw-change", sliceImagesWithTrackList);
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+);
|
|
|
+
|
|
|
async function processSliceConfig() {
|
|
|
if (!store.currentTask) return;
|
|
|
let markResult = store.currentTask.markResult;
|
|
@@ -203,7 +213,7 @@ async function processSliceConfig() {
|
|
|
const image = await loadImage(url);
|
|
|
images[sliceConfig.i] = image;
|
|
|
const { x, y, w, h } = sliceConfig;
|
|
|
-
|
|
|
+
|
|
|
if (sliceConfig.w === 0 && sliceConfig.h === 0) {
|
|
|
// 选择整图时,w/h 为0
|
|
|
sliceConfig.w = image.naturalWidth;
|
|
@@ -211,12 +221,11 @@ async function processSliceConfig() {
|
|
|
}
|
|
|
|
|
|
if (x < 1 && y < 1 && w < 1 && h < 1) {
|
|
|
- sliceConfig.x = (image.naturalWidth * x);
|
|
|
- sliceConfig.y = (image.naturalHeight * y);
|
|
|
- sliceConfig.w = (image.naturalWidth * w);
|
|
|
- sliceConfig.h = (image.naturalHeight * h);
|
|
|
+ sliceConfig.x = image.naturalWidth * x;
|
|
|
+ sliceConfig.y = image.naturalHeight * y;
|
|
|
+ sliceConfig.w = image.naturalWidth * w;
|
|
|
+ sliceConfig.h = image.naturalHeight * h;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
theFinalHeight = store.currentTask.sliceConfig
|
|
@@ -257,9 +266,9 @@ async function processSliceConfig() {
|
|
|
(t) => t.offsetIndex === indexInSliceUrls
|
|
|
);
|
|
|
|
|
|
- const sliceImageRendered = await loadImage(dataUrl!);
|
|
|
+ const sliceImageRendered = await loadImage(dataUrl);
|
|
|
tempSliceImagesWithTrackList.push({
|
|
|
- url: dataUrl!,
|
|
|
+ url: dataUrl,
|
|
|
indexInSliceUrls: sliceConfig.i,
|
|
|
// 通过positionY来定位是第几张slice的还原,并过滤出相应的track
|
|
|
trackList: thisImageTrackList.filter(
|
|
@@ -405,9 +414,9 @@ async function processSplitConfig() {
|
|
|
const thisImageTagList = tagLists.filter(
|
|
|
(t) => t.offsetIndex === indexInSliceUrls
|
|
|
);
|
|
|
- const sliceImageRendered = await loadImage(dataUrl!);
|
|
|
+ const sliceImageRendered = await loadImage(dataUrl);
|
|
|
tempSliceImagesWithTrackList.push({
|
|
|
- url: dataUrl!,
|
|
|
+ url: dataUrl,
|
|
|
indexInSliceUrls: store.currentTask.sliceUrls.indexOf(url) + 1,
|
|
|
trackList: thisImageTrackList.filter(
|
|
|
(t) =>
|
|
@@ -460,8 +469,8 @@ async function processSplitConfig() {
|
|
|
// should not render twice at the same time
|
|
|
let renderLock = false;
|
|
|
const renderPaperAndMark = async () => {
|
|
|
- console.log('renderPagerAndMark=>store.curTask:',store.currentTask);
|
|
|
-
|
|
|
+ console.log("renderPagerAndMark=>store.curTask:", store.currentTask);
|
|
|
+
|
|
|
if (!store.currentTask) return;
|
|
|
if (!store.isScanImage) return;
|
|
|
if (renderLock) {
|
|
@@ -515,7 +524,7 @@ const renderPaperAndMark = async () => {
|
|
|
watch(
|
|
|
() => store.currentTask,
|
|
|
() => {
|
|
|
- setTimeout(renderPaperAndMark,50)
|
|
|
+ setTimeout(renderPaperAndMark, 50);
|
|
|
}
|
|
|
);
|
|
|
//#endregion : 计算裁切图和裁切图上的分数轨迹和特殊标记轨迹
|
|
@@ -525,9 +534,7 @@ const answerPaperScale = $computed(() => {
|
|
|
// 放大、缩小不影响页面之前的滚动条定位
|
|
|
let percentWidth = 0;
|
|
|
let percentTop = 0;
|
|
|
- const container = document.querySelector(
|
|
|
- ".mark-body-container"
|
|
|
- ) as HTMLDivElement;
|
|
|
+ const container = document.querySelector(".mark-body-container");
|
|
|
if (container) {
|
|
|
const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
|
|
|
percentWidth = scrollLeft / scrollWidth;
|
|
@@ -657,9 +664,7 @@ function giveScoreCicle(event: KeyboardEvent) {
|
|
|
// 接收currentScore间隔时间外才会进入此事件
|
|
|
if (event.key === " " && typeof store.currentScore === "number") {
|
|
|
// topKB--;
|
|
|
- const circleElement = document.querySelector(
|
|
|
- ".kb-circle"
|
|
|
- ) as HTMLDivElement;
|
|
|
+ const circleElement = document.querySelector(".kb-circle");
|
|
|
let { top, left } = circleElement.getBoundingClientRect();
|
|
|
top = top + 45;
|
|
|
left = left + 45;
|
|
@@ -684,7 +689,7 @@ function giveScoreCicle(event: KeyboardEvent) {
|
|
|
if (eles[0].tagName == "IMG") {
|
|
|
ele = eles[0];
|
|
|
}
|
|
|
- if (ele!) {
|
|
|
+ if (ele) {
|
|
|
ele.dispatchEvent(me);
|
|
|
}
|
|
|
}
|