|
@@ -9,6 +9,7 @@
|
|
}"
|
|
}"
|
|
>
|
|
>
|
|
<img ref="imgRef" src="./data/paper.jpg" alt="p" @load="initImageSize" />
|
|
<img ref="imgRef" src="./data/paper.jpg" alt="p" @load="initImageSize" />
|
|
|
|
+ <!-- <img ref="imgRef" :src="curPage?.sheetUri" alt="原图" @load="initImageSize" /> -->
|
|
<div class="img-recogs">
|
|
<div class="img-recogs">
|
|
<div
|
|
<div
|
|
v-for="(item, index) in recogBlocks"
|
|
v-for="(item, index) in recogBlocks"
|
|
@@ -40,7 +41,16 @@
|
|
<li @click="onSetRecogStyle"><BgColorsOutlined /></li>
|
|
<li @click="onSetRecogStyle"><BgColorsOutlined /></li>
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
- <div class="img-change" @click="onChangeImage"><PictureFilled /></div>
|
|
|
|
|
|
+ <import-btn
|
|
|
|
+ upload-url="/api/admin/scan/answer/sheet/update"
|
|
|
|
+ :format="['jpg', 'png', 'jpeg']"
|
|
|
|
+ :upload-data="updateSheetData"
|
|
|
|
+ @upload-success="updateSheetSuccess"
|
|
|
|
+ >
|
|
|
|
+ <a-button class="img-change">
|
|
|
|
+ <template #icon><PictureFilled /></template>
|
|
|
|
+ </a-button>
|
|
|
|
+ </import-btn>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- FillAreaSetDialog -->
|
|
<!-- FillAreaSetDialog -->
|
|
@@ -63,14 +73,22 @@ import {
|
|
RightOutlined,
|
|
RightOutlined,
|
|
PictureFilled,
|
|
PictureFilled,
|
|
} from "@ant-design/icons-vue";
|
|
} from "@ant-design/icons-vue";
|
|
-import { computed, nextTick, ref, watch } from "vue";
|
|
|
|
|
|
+import { computed, nextTick, ref } from "vue";
|
|
import { objAssign } from "@/utils/tool";
|
|
import { objAssign } from "@/utils/tool";
|
|
import { vEleMoveDirective } from "@/directives/eleMove";
|
|
import { vEleMoveDirective } from "@/directives/eleMove";
|
|
-import { ImageRecogData, RecogBlock } from "@/utils/recog/recog";
|
|
|
|
-import { useUserStore } from "@/store";
|
|
|
|
|
|
+import {
|
|
|
|
+ parseRecogData,
|
|
|
|
+ parseDetailSize,
|
|
|
|
+ RecognizeArea,
|
|
|
|
+ RecogBlock,
|
|
|
|
+} from "@/utils/recog/recog";
|
|
|
|
+import { useUserStore, useDataCheckStore } from "@/store";
|
|
|
|
|
|
import FillAreaSetDialog from "./FillAreaSetDialog.vue";
|
|
import FillAreaSetDialog from "./FillAreaSetDialog.vue";
|
|
import RecogEditDialog from "./RecogEditDialog.vue";
|
|
import RecogEditDialog from "./RecogEditDialog.vue";
|
|
|
|
+import ImportBtn from "@/components/ImportBtn/index.vue";
|
|
|
|
+
|
|
|
|
+import { objAssign } from "@/utils/tool";
|
|
|
|
|
|
import { omit } from "lodash-es";
|
|
import { omit } from "lodash-es";
|
|
|
|
|
|
@@ -78,14 +96,20 @@ defineOptions({
|
|
name: "ScanImage",
|
|
name: "ScanImage",
|
|
});
|
|
});
|
|
|
|
|
|
-const props = defineProps<{
|
|
|
|
- imgSrc: string;
|
|
|
|
- recogData: ImageRecogData[];
|
|
|
|
-}>();
|
|
|
|
-
|
|
|
|
-const emit = defineEmits(["recogBlockModified", "next", "prev"]);
|
|
|
|
|
|
+const emit = defineEmits(["next", "prev"]);
|
|
|
|
|
|
const userStore = useUserStore();
|
|
const userStore = useUserStore();
|
|
|
|
+const dataCheckStore = useDataCheckStore();
|
|
|
|
+
|
|
|
|
+const curPage = computed(() => dataCheckStore.curPage);
|
|
|
|
+const updateSheetData = computed(() => {
|
|
|
|
+ if (!curPage.value) return {};
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+ paperId: curPage.value.paperId,
|
|
|
|
+ pageIndex: curPage.value.pageIndex,
|
|
|
|
+ };
|
|
|
|
+});
|
|
|
|
|
|
const elRef = ref();
|
|
const elRef = ref();
|
|
const imgRef = ref();
|
|
const imgRef = ref();
|
|
@@ -125,7 +149,7 @@ function initImageSize() {
|
|
imageSize.value = objAssign(imageSize.value, imgSize);
|
|
imageSize.value = objAssign(imageSize.value, imgSize);
|
|
|
|
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
- parseRecogBlocks();
|
|
|
|
|
|
+ updateRecogList();
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
@@ -174,6 +198,35 @@ function getImageSizePos({
|
|
return imageSize;
|
|
return imageSize;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+// recog data
|
|
|
|
+const recogList = ref<RecognizeArea[]>([]);
|
|
|
|
+function updateRecogList() {
|
|
|
|
+ if (!dataCheckStore.curPage) return;
|
|
|
|
+
|
|
|
|
+ const regdata = parseRecogData(dataCheckStore.curPage.recogData);
|
|
|
|
+ if (!regdata) return;
|
|
|
|
+
|
|
|
|
+ recogList.value = [] as RecognizeArea[];
|
|
|
|
+ let index = 0;
|
|
|
|
+ regdata.question.forEach((gGroup) => {
|
|
|
|
+ gGroup.fill_result.forEach((qRecog) => {
|
|
|
|
+ const result = dataCheckStore.curPage.question[index - 1] || "";
|
|
|
|
+ qRecog.index = ++index;
|
|
|
|
+ // TODO: 解析其他数据
|
|
|
|
+
|
|
|
|
+ const fileResult = result ? result.split("") : [];
|
|
|
|
+ const recogItem = parseDetailSize(
|
|
|
|
+ qRecog,
|
|
|
|
+ "question",
|
|
|
|
+ qRecog.index,
|
|
|
|
+ fileResult
|
|
|
|
+ );
|
|
|
|
+ recogList.value.push(recogItem);
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ parseRecogBlocks();
|
|
|
|
+}
|
|
// recogBlocks
|
|
// recogBlocks
|
|
const recogBlocks = ref<RecogBlock[]>([]);
|
|
const recogBlocks = ref<RecogBlock[]>([]);
|
|
const curRecogBlock = ref<RecogBlock | null>(null);
|
|
const curRecogBlock = ref<RecogBlock | null>(null);
|
|
@@ -185,7 +238,7 @@ function parseRecogBlocks() {
|
|
userStore.recogFillSet;
|
|
userStore.recogFillSet;
|
|
const curBorderWidth = Math.max(1, borderWidth * rate);
|
|
const curBorderWidth = Math.max(1, borderWidth * rate);
|
|
|
|
|
|
- recogBlocks.value = props.recogData.map((item) => {
|
|
|
|
|
|
+ recogBlocks.value = recogList.value.map((item) => {
|
|
const nitem: RecogBlock = { ...item };
|
|
const nitem: RecogBlock = { ...item };
|
|
nitem.areaImg = "";
|
|
nitem.areaImg = "";
|
|
|
|
|
|
@@ -228,18 +281,29 @@ function parseRecogBlocks() {
|
|
|
|
|
|
// area click
|
|
// area click
|
|
const recogEditDialogRef = ref();
|
|
const recogEditDialogRef = ref();
|
|
-async function onAreaClick(data: RecogBlock) {
|
|
|
|
|
|
+function onAreaClick(data: RecogBlock) {
|
|
curRecogBlock.value = data;
|
|
curRecogBlock.value = data;
|
|
// TODO:build area src img
|
|
// TODO:build area src img
|
|
- await nextTick();
|
|
|
|
- recogEditDialogRef.value?.open();
|
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
+ recogEditDialogRef.value?.open();
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
|
|
async function onRecogEditConfirm(result: string[]) {
|
|
async function onRecogEditConfirm(result: string[]) {
|
|
if (!curRecogBlock.value) return;
|
|
if (!curRecogBlock.value) return;
|
|
|
|
|
|
- curRecogBlock.value.result = result;
|
|
|
|
- emit("recogBlockModified", curRecogBlock.value);
|
|
|
|
|
|
+ const data = curRecogBlock.value;
|
|
|
|
+
|
|
|
|
+ if (data.type === "question") {
|
|
|
|
+ const index = data.index - 1;
|
|
|
|
+ dataCheckStore.curPage.question.splice(index, 1, data.result.join(""));
|
|
|
|
+ await dataCheckStore.updateField({
|
|
|
|
+ field: data.type,
|
|
|
|
+ value: dataCheckStore.curPage.question,
|
|
|
|
+ });
|
|
|
|
+ curRecogBlock.value.result = result;
|
|
|
|
+ }
|
|
|
|
+ // TODO:
|
|
}
|
|
}
|
|
|
|
|
|
// img action
|
|
// img action
|
|
@@ -277,8 +341,13 @@ function onNext() {
|
|
}
|
|
}
|
|
|
|
|
|
// change image
|
|
// change image
|
|
-function onChangeImage() {
|
|
|
|
- // TODO:
|
|
|
|
|
|
+function updateSheetSuccess(data: { url: string }) {
|
|
|
|
+ if (!curPage.value) return;
|
|
|
|
+ dataCheckStore.modifySheetUri({
|
|
|
|
+ paperIndex: curPage.value.paperIndex,
|
|
|
|
+ pageIndex: curPage.value.pageIndex,
|
|
|
|
+ uri: data.url,
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
|
|
// set recog style
|
|
// set recog style
|
|
@@ -286,14 +355,6 @@ const fillAreaSetDialogRef = ref();
|
|
function onSetRecogStyle() {
|
|
function onSetRecogStyle() {
|
|
fillAreaSetDialogRef.value?.open();
|
|
fillAreaSetDialogRef.value?.open();
|
|
}
|
|
}
|
|
-
|
|
|
|
-// watch
|
|
|
|
-watch(
|
|
|
|
- () => props.recogData,
|
|
|
|
- (val) => {
|
|
|
|
- if (val && imgRef.value) parseRecogBlocks();
|
|
|
|
- }
|
|
|
|
-);
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|