3520 lines
101 KiB
Vue
3520 lines
101 KiB
Vue
<template>
|
|
<div class="warp">
|
|
<div class="warp-title">{{ templateInfo.name || "无" }}</div>
|
|
<div class="warp-nav">
|
|
<div class="warp-nav-tab">
|
|
<div class="warp-nav-tab-list">
|
|
<div
|
|
v-for="item in navList"
|
|
@click="setStepClick(item.index)"
|
|
:title="item.title"
|
|
>
|
|
<el-icon
|
|
:size="20"
|
|
style="margin: 2px 4px 0 0"
|
|
:color="'#2D8CF0'"
|
|
v-if="item.index < 3"
|
|
>
|
|
<SuccessFilled v-if="showImage(item.index)" />
|
|
<CircleClose v-else />
|
|
</el-icon>
|
|
<span :class="item.index === navListIndex ? 'active' : ''">{{
|
|
item.title
|
|
}}</span>
|
|
<img src="@/assets/image/icon1.png" alt="" v-if="item.index !== 5" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="warp-nav-tab-delete"
|
|
title="清空全部痕迹"
|
|
@click="clearFabricGroup"
|
|
v-if="!isLockStatus"
|
|
>
|
|
<img src="@/assets/image/icon2.png" alt="" />
|
|
<span>清空全部痕迹</span>
|
|
</div>
|
|
</div>
|
|
<div class="warp-nav-title">
|
|
<div class="warp-nav-title-text">
|
|
<span>{{ placeholderText }}</span>
|
|
<span style="margin: 0 10px" v-if="operationText">|</span>
|
|
<span
|
|
style="color: red; font-weight: bold; border-bottom: 1px red solid"
|
|
v-if="operationText"
|
|
>{{ operationText }}</span
|
|
>
|
|
<el-radio-group v-model="otherType" v-if="navListIndex === 5">
|
|
<el-radio :value="1">缺考标记</el-radio>
|
|
<el-radio :value="2">屏蔽区标记</el-radio>
|
|
<el-radio :value="3">反面文字识别定位</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="warp-nav-title-operation">
|
|
<div class="warp-nav-title-operation-btn" v-if="templateInfo.imgSrc.length > 1">
|
|
<div :class="{ active: imgSrcIndex === 0 }" @click="changeImgSrcIndex(0)">
|
|
正面
|
|
</div>
|
|
<div :class="{ active: imgSrcIndex === 1 }" @click="changeImgSrcIndex(1)">
|
|
反面
|
|
</div>
|
|
</div>
|
|
<div class="warp-nav-title-operation-other" v-if="navListIndex !== 1">
|
|
<div @click="changeZoom()">恢复大小</div>
|
|
</div>
|
|
<div class="warp-nav-title-operation-icon" v-if="navListIndex !== 1">
|
|
<img
|
|
src="@/assets/image/icon4.png"
|
|
alt=""
|
|
@click="changeZoom(true)"
|
|
title="放大画布"
|
|
/>
|
|
<img
|
|
src="@/assets/image/icon3.png"
|
|
alt=""
|
|
@click="changeZoom(false)"
|
|
title="缩小画布"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="warp-content">
|
|
<div class="warp-content-left">
|
|
<div class="warp-content-left-box" @click="contextmenu = null">
|
|
<div :class="templateInfo.type" @contextmenu.prevent="onContextmenu">
|
|
<div id="zoom-div">
|
|
<div
|
|
class="border-gray"
|
|
v-if="setBoderLine()"
|
|
:style="setBoderLine()"
|
|
></div>
|
|
<div class="menu-button" v-if="contextmenu">
|
|
<div title="置顶" @click="changeZindex(true)">置顶</div>
|
|
<div title="置底" @click="changeZindex(false)">置底</div>
|
|
</div>
|
|
<img
|
|
:src="templateInfo.imgSrc[imgSrcIndex]"
|
|
alt=""
|
|
id="picture-img"
|
|
style="user-select: none"
|
|
@load="canvasLoad"
|
|
/>
|
|
<canvas id="picture"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="warp-content-right">
|
|
<div class="warp-content-right-info">
|
|
<div class="warp-content-right-info-fb">
|
|
定位点：<span>{{ templateInfo.hasPosition ? "有" : "无" }}</span>
|
|
</div>
|
|
<div class="warp-content-right-info-fb">
|
|
纸张类型：<span>{{ templateInfo.type }}</span>
|
|
</div>
|
|
<div class="warp-content-right-info-fb">试题列表：</div>
|
|
<div class="warp-content-right-info-table">
|
|
<el-table
|
|
:data="templateInfo.questionList"
|
|
stripe
|
|
border
|
|
size="small"
|
|
max-height="540px"
|
|
>
|
|
<el-table-column label="题型" width="60px" align="center">
|
|
<template #default="scope">
|
|
{{ scope.row.fabricType === 3 ? "客观题" : "主观题" }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="题号" width="60px" align="center">
|
|
<template #default="scope">
|
|
{{ scope.row.customFrom.questionBefore }}-{{
|
|
scope.row.customFrom.questionAfter
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="排列" width="50px" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.customFrom.range === 0">横向</span>
|
|
<span v-else-if="scope.row.customFrom.range === 1">竖向</span>
|
|
<span v-else>无</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="题量" width="50px" align="center">
|
|
<template #default="scope">
|
|
{{
|
|
scope.row.fabricType === 3
|
|
? scope.row.customFrom.questionNumber
|
|
: scope.row.customFrom.questionAfter -
|
|
scope.row.customFrom.questionBefore +
|
|
1
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="每题分数" align="center">
|
|
<template #default="scope">
|
|
{{ scope.row.customFrom.score }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="warp-content-right-info-btn">
|
|
<el-button
|
|
type="primary"
|
|
size="large"
|
|
@click="setStepClick(navListIndex + 1)"
|
|
v-if="navListIndex !== 5"
|
|
>下一步</el-button
|
|
>
|
|
<el-button type="primary" size="large" @click="btnClick('save')"
|
|
>保 存</el-button
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
size="large"
|
|
@click="btnClick('lock')"
|
|
:disabled="isLockStatus || isLockDisabled"
|
|
>{{ isLockStatus ? "已锁定" : "锁 定" }}</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 框选学科 -->
|
|
<el-drawer
|
|
:modal="false"
|
|
v-model="drawerList.subjectDrawer"
|
|
title="请选择出学科字样(没有学科选择其他字样)"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:show-close="false"
|
|
class="drawer-custom-style"
|
|
>
|
|
<div class="drawer-custom-style-body">
|
|
<div class="drawer-custom-style-body-content">
|
|
<el-check-tag
|
|
:checked="item.checked"
|
|
type="primary"
|
|
v-for="item in textList"
|
|
@change="item.checked = !item.checked"
|
|
style="margin: 0 10px 10px 0"
|
|
>
|
|
{{ item.text }}
|
|
</el-check-tag>
|
|
</div>
|
|
<div class="drawer-custom-style-body-footer">
|
|
<el-button type="primary" @click="changeFabricInfo(true)">确认</el-button>
|
|
<el-button @click="changeFabricInfo(false)">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
<!-- 框选考号-->
|
|
<el-drawer
|
|
:modal="false"
|
|
v-model="drawerList.examIdDrawer"
|
|
title="编辑属性"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:show-close="false"
|
|
class="drawer-custom-style"
|
|
>
|
|
<div class="drawer-custom-style-body">
|
|
<div class="drawer-custom-style-body-content examId">
|
|
<div>
|
|
<span>考试类型：</span>
|
|
<div>
|
|
<el-check-tag
|
|
type="primary"
|
|
:checked="drawerForm.examId.examType === 1"
|
|
style="margin: 0 10px 0 0"
|
|
@change="changeExamType(1)"
|
|
>填涂式</el-check-tag
|
|
>
|
|
<el-check-tag
|
|
type="primary"
|
|
@change="changeExamType(2)"
|
|
:checked="drawerForm.examId.examType === 2"
|
|
>条码式</el-check-tag
|
|
>
|
|
</div>
|
|
</div>
|
|
<div v-if="drawerForm.examId.examType === 1">
|
|
<span>考号长度：</span>
|
|
<div>
|
|
<el-input-number
|
|
:disabled="isLockStatus"
|
|
:min="4"
|
|
:max="12"
|
|
v-model="drawerForm.examId.examIdLength"
|
|
:step-strictly="true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- <div>
|
|
暂时不需要
|
|
<span>考号样式：</span>
|
|
<div>
|
|
<el-radio-group v-model="drawerForm.examId.examIdStyle">
|
|
<el-radio :value="1">0 1 2 3 4 5 6 7 8 9</el-radio>
|
|
<el-radio :value="2">1 2 3 4 5 6 7 8 9 0</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div> -->
|
|
<div class="full-filling" v-if="drawerForm.examId.examType === 1">
|
|
<span>示意图</span>
|
|
<div>
|
|
<div v-for="item in 10">
|
|
<span v-for="row in drawerForm.examId.examIdLength" :name="row">{{
|
|
item - 1
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bar-code" v-else>
|
|
<span>示意图</span>
|
|
<div>
|
|
<div>贴条形码区</div>
|
|
</div>
|
|
</div>
|
|
<FabricSize
|
|
:change="changeFabricPositionNumber"
|
|
ref="FabricSizeRef"
|
|
v-if="currentFabric"
|
|
/>
|
|
</div>
|
|
<div class="drawer-custom-style-body-footer">
|
|
<el-button type="primary" @click="changeFabricInfo(true)">确认</el-button>
|
|
<el-button @click="changeFabricInfo(false)">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
<!-- 框选客观题 -->
|
|
<el-drawer
|
|
:modal="false"
|
|
v-model="drawerList.objectiveDrawer"
|
|
title="编辑属性"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:show-close="false"
|
|
class="drawer-custom-style"
|
|
>
|
|
<div class="drawer-custom-style-body">
|
|
<div class="drawer-custom-style-body-content objective">
|
|
<div>
|
|
<span>题型：</span>
|
|
<div>
|
|
<el-check-tag
|
|
:checked="drawerForm.objective.questionTypeValue === item.value"
|
|
type="primary"
|
|
v-for="item in drawerForm.objective.questionTypeList"
|
|
@change="changeObjectiveQuestionType(item)"
|
|
style="margin: 0 10px 0 0"
|
|
>
|
|
{{ item.title }}
|
|
</el-check-tag>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span>排列：</span>
|
|
<div>
|
|
<el-radio-group
|
|
v-model="drawerForm.objective.range"
|
|
:disabled="isLockStatus"
|
|
>
|
|
<el-radio :value="0">横向</el-radio>
|
|
<el-radio :value="1">竖向</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span>选项个数：</span>
|
|
<div>
|
|
<el-input-number
|
|
style="width: 164px"
|
|
v-model="drawerForm.objective.optionNumber"
|
|
:min="2"
|
|
:disabled="drawerForm.objective.questionTypeValue === 2 || isLockStatus"
|
|
:step-strictly="true"
|
|
:max="24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span>题量：</span>
|
|
<div>
|
|
<el-input-number
|
|
:disabled="isLockStatus"
|
|
style="width: 164px"
|
|
v-model="drawerForm.objective.questionNumber"
|
|
:min="1"
|
|
:step-strictly="true"
|
|
@change="changeQuestion()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span>题号：</span>
|
|
<div>
|
|
<el-input-number
|
|
:disabled="isLockStatus"
|
|
v-model="drawerForm.objective.questionBefore"
|
|
:min="1"
|
|
:controls="false"
|
|
style="width: 60px"
|
|
@input="changeQuestion($event)"
|
|
/>
|
|
——
|
|
<el-input-number
|
|
v-model="drawerForm.objective.questionAfter"
|
|
:controls="false"
|
|
disabled
|
|
style="width: 60px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span>每题分数：</span>
|
|
<div>
|
|
<el-input-number
|
|
:disabled="isLockStatus"
|
|
style="width: 164px"
|
|
v-model="drawerForm.objective.score"
|
|
:min="0"
|
|
:precision="1"
|
|
:step="0.1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div :class="drawerForm.objective.range === 0 ? 'syt-row' : 'syt-column'">
|
|
<span>示意图</span>
|
|
<div v-if="drawerForm.objective.questionBefore % 1 === 0">
|
|
<div v-for="item in drawerForm.objective.questionNumber">
|
|
<span>{{ item - 1 + drawerForm.objective.questionBefore }}</span>
|
|
<span v-for="row in drawerForm.objective.optionNumber" :name="item">{{
|
|
drawerForm.objective.questionTypeValue === 2
|
|
? ["T", "F"][row - 1]
|
|
: drawerForm.objective.optionEnglish[row - 1]
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div v-for="item in drawerForm.objective.questionNumber">
|
|
<span>
|
|
{{ drawerForm.objective.questionBefore.toString().split(".")[0] }}
|
|
.{{
|
|
Number(drawerForm.objective.questionBefore.toString().split(".")[1]) +
|
|
(item - 1)
|
|
}}
|
|
</span>
|
|
<span v-for="row in drawerForm.objective.optionNumber" :name="item">{{
|
|
drawerForm.objective.questionTypeValue === 2
|
|
? ["T", "F"][row - 1]
|
|
: drawerForm.objective.optionEnglish[row - 1]
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<FabricSize
|
|
:change="changeFabricPositionNumber"
|
|
ref="FabricSizeRef"
|
|
v-if="currentFabric"
|
|
/>
|
|
</div>
|
|
<div class="drawer-custom-style-body-footer">
|
|
<el-button
|
|
type="primary"
|
|
@click="changeFabricInfo(true)"
|
|
:disabled="!drawerForm.objective.questionBefore"
|
|
>确认</el-button
|
|
>
|
|
<el-button @click="changeFabricInfo(false)">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
<!-- 框选主观题 -->
|
|
<el-drawer
|
|
:modal="false"
|
|
v-model="drawerList.subjectiveDrawer"
|
|
title="编辑属性"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:show-close="false"
|
|
class="drawer-custom-style"
|
|
>
|
|
<div class="drawer-custom-style-body">
|
|
<div class="drawer-custom-style-body-content subjective">
|
|
<div>
|
|
<span>题型：</span>
|
|
<div>
|
|
<el-check-tag
|
|
:checked="drawerForm.subjective.questionTypeValue === item.value"
|
|
type="primary"
|
|
v-for="item in drawerForm.subjective.questionTypeList"
|
|
@change="changeObjectiveQuestionType(item)"
|
|
style="margin: 0 10px 0 0"
|
|
>
|
|
{{ item.title }}
|
|
</el-check-tag>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span>题号：</span>
|
|
<div>
|
|
<el-input-number
|
|
v-model="drawerForm.subjective.questionBefore"
|
|
:disabled="isLockStatus"
|
|
:min="1"
|
|
:controls="false"
|
|
:step-strictly="true"
|
|
style="width: 54px"
|
|
@change="
|
|
drawerForm.subjective.questionAfter =
|
|
drawerForm.subjective.questionBefore
|
|
"
|
|
/>
|
|
——
|
|
<el-input-number
|
|
v-model="drawerForm.subjective.questionAfter"
|
|
:disabled="isLockStatus"
|
|
:min="1"
|
|
:controls="false"
|
|
:step-strictly="true"
|
|
style="width: 54px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span>每题分数：</span>
|
|
<div>
|
|
<el-input-number
|
|
v-model="drawerForm.subjective.score"
|
|
:disabled="isLockStatus"
|
|
style="width: 152px"
|
|
:min="0"
|
|
:precision="1"
|
|
:step="0.1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<FabricSize
|
|
:change="changeFabricPositionNumber"
|
|
ref="FabricSizeRef"
|
|
v-if="currentFabric"
|
|
/>
|
|
</div>
|
|
<div class="drawer-custom-style-body-footer">
|
|
<el-button
|
|
type="primary"
|
|
@click="changeFabricInfo(true)"
|
|
:disabled="
|
|
drawerForm.subjective.questionBefore >
|
|
drawerForm.subjective.questionAfter ||
|
|
!drawerForm.subjective.questionBefore ||
|
|
!drawerForm.subjective.questionAfter
|
|
"
|
|
>确认</el-button
|
|
>
|
|
<el-button @click="changeFabricInfo(false)">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
<!-- 锁定 -->
|
|
<LockList ref="LockListRef" :change="lock" />
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, reactive, ref, nextTick, watch } from "vue";
|
|
import { fabric } from "fabric";
|
|
import { createWorker } from "tesseract.js";
|
|
import html2canvas from "html2canvas";
|
|
import { GetViewSize, GetOcrDetail, PostSave, GetLock } from "@/api/Home";
|
|
import FabricSize from "@/pages/Home/components/FabricSize.vue";
|
|
import LockList from "@/pages/Home/components/LockList.vue";
|
|
import { useRouter } from "vue-router";
|
|
const router = useRouter();
|
|
const FabricSizeRef = ref<any>(null);
|
|
const LockListRef = ref<any>(null);
|
|
const firstPosition = ref<any>(null);
|
|
const contextmenu = ref<any>(null);
|
|
const navList = reactive<any[]>([
|
|
{
|
|
title: "框选定位点",
|
|
index: 0,
|
|
},
|
|
{
|
|
title: "框选学科",
|
|
index: 1,
|
|
},
|
|
{
|
|
title: "框选考号",
|
|
index: 2,
|
|
},
|
|
{
|
|
title: "框选客观题",
|
|
index: 3,
|
|
},
|
|
{
|
|
title: "框选主观题",
|
|
index: 4,
|
|
},
|
|
{
|
|
title: "框选其他标记(缺考、屏蔽区、反面定位点)",
|
|
index: 5,
|
|
},
|
|
]);
|
|
const navListIndex = ref<number>(0);
|
|
const placeholderText = ref<string>("");
|
|
const operationText = ref<string>("");
|
|
const scale = ref<number>(0);
|
|
const imgDom = ref<any>(null);
|
|
const otherType = ref<number>(1);
|
|
const textFabricList = ref<string[]>(["删除", "编辑属性"]);
|
|
const positionTitle = ref<string[]>(["左上角", "右上角", "左下角", "右下角"]);
|
|
const disabledMove = ref<number[]>([0, 1]);
|
|
const drawerList = ref<{
|
|
subjectDrawer: boolean;
|
|
examIdDrawer: boolean;
|
|
objectiveDrawer: boolean;
|
|
subjectiveDrawer: boolean;
|
|
}>({
|
|
subjectDrawer: false,
|
|
examIdDrawer: false,
|
|
objectiveDrawer: false,
|
|
subjectiveDrawer: false,
|
|
});
|
|
const drawerForm = reactive<any>({
|
|
examId: {
|
|
examType: 1,
|
|
examIdLength: 8,
|
|
examIdStyle: 1,
|
|
},
|
|
objective: {
|
|
questionTypeList: [
|
|
{
|
|
title: "单选题",
|
|
value: 0,
|
|
},
|
|
{
|
|
title: "多选题",
|
|
value: 1,
|
|
},
|
|
{
|
|
title: "判断题",
|
|
value: 2,
|
|
},
|
|
],
|
|
questionTypeValue: 0,
|
|
optionNumber: 4,
|
|
optionEnglish: [
|
|
"A",
|
|
"B",
|
|
"C",
|
|
"D",
|
|
"E",
|
|
"F",
|
|
"G",
|
|
"H",
|
|
"I",
|
|
"J",
|
|
"K",
|
|
"L",
|
|
"M",
|
|
"N",
|
|
"O",
|
|
"P",
|
|
"Q",
|
|
"R",
|
|
"S",
|
|
"T",
|
|
"U",
|
|
"V",
|
|
"W",
|
|
"X",
|
|
"Y",
|
|
"Z",
|
|
],
|
|
questionNumber: 5,
|
|
questionBefore: 1,
|
|
questionAfter: 5,
|
|
range: 0,
|
|
score: 0,
|
|
},
|
|
subjective: {
|
|
questionTypeList: [
|
|
{
|
|
title: "填空题",
|
|
value: 0,
|
|
},
|
|
{
|
|
title: "解答题",
|
|
value: 1,
|
|
},
|
|
{
|
|
title: "语文作文",
|
|
value: 2,
|
|
},
|
|
{
|
|
title: "英文作文",
|
|
value: 3,
|
|
},
|
|
],
|
|
questionTypeValue: 0,
|
|
questionBefore: 1,
|
|
questionAfter: 1,
|
|
score: 0,
|
|
},
|
|
fabricPosition: {
|
|
top: 0,
|
|
left: 0,
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
});
|
|
const textList = ref<any[]>([]);
|
|
const imgSrcIndex = ref<number>(0);
|
|
const templateInfo = reactive<any>({
|
|
name: "",
|
|
hasPosition: true,
|
|
type: "A3",
|
|
imgSrc: [],
|
|
headList: [
|
|
{
|
|
//定位点
|
|
point: [],
|
|
},
|
|
{
|
|
//学科
|
|
point: [],
|
|
},
|
|
{
|
|
//考号
|
|
point: [],
|
|
},
|
|
{
|
|
//客观题
|
|
point: [],
|
|
},
|
|
{
|
|
//主观题
|
|
point: [],
|
|
},
|
|
{
|
|
//其他
|
|
point: [],
|
|
},
|
|
],
|
|
tailsList: [
|
|
{
|
|
//定位点
|
|
point: [],
|
|
},
|
|
{
|
|
//学科
|
|
point: [],
|
|
},
|
|
{
|
|
//考号
|
|
point: [],
|
|
},
|
|
{
|
|
//客观题
|
|
point: [],
|
|
},
|
|
{
|
|
//主观题
|
|
point: [],
|
|
},
|
|
{
|
|
//其他
|
|
point: [],
|
|
},
|
|
],
|
|
questionList: [],
|
|
otherData: [],
|
|
});
|
|
const isLockStatus = ref<boolean>(false);
|
|
const isLockDisabled = ref<boolean>(false);
|
|
const currentNavListIndex = ref<number>(3);
|
|
// 画布相关
|
|
const ctx = ref<any>(null);
|
|
const fabricGroup = ref<any>(null);
|
|
const fabricRect = ref<any>(null);
|
|
const currentFabric = ref<any>(null);
|
|
|
|
onMounted(() => {
|
|
GetOcrDetail(router.currentRoute.value.query.mid as string).then((res: any) => {
|
|
if (res.code === 200) {
|
|
const { mainName, hasPosition, paperType, detail, isLock } = res.data;
|
|
isLockStatus.value = isLock;
|
|
templateInfo.name = mainName;
|
|
templateInfo.hasPosition = hasPosition;
|
|
templateInfo.type = paperType === 1 ? "A3" : "A4";
|
|
templateInfo.otherData = detail.sort((a: any, b: any) => a.pageIndex - b.pageIndex);
|
|
templateInfo.otherData.forEach((item: any, index: number) => {
|
|
templateInfo.imgSrc.push(item.tempPicture64);
|
|
if (item.tempData) {
|
|
index === 0
|
|
? (templateInfo.headList = JSON.parse(JSON.parse(item.tempData).tempData))
|
|
: (templateInfo.tailsList = JSON.parse(JSON.parse(item.tempData).tempData));
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
watch(
|
|
() => templateInfo,
|
|
(_new, _old) => {
|
|
if (!_new.headList[2].point.length && !_new.tailsList[2].point.length) {
|
|
isLockDisabled.value = true;
|
|
currentNavListIndex.value = 2;
|
|
return;
|
|
}
|
|
if (!_new.headList[1].point.length && !_new.tailsList[1].point.length) {
|
|
isLockDisabled.value = true;
|
|
currentNavListIndex.value = 1;
|
|
return;
|
|
}
|
|
if (_new.hasPosition) {
|
|
if (_new.imgSrc.length === 2) {
|
|
if (_new.headList[0].point.length !== 4 || _new.tailsList[0].point.length !== 4) {
|
|
isLockDisabled.value = true;
|
|
currentNavListIndex.value = 0;
|
|
return;
|
|
}
|
|
} else {
|
|
if (_new.headList[0].point.length !== 4) {
|
|
isLockDisabled.value = true;
|
|
currentNavListIndex.value = 0;
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
isLockDisabled.value = false;
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
// 图片加载完成
|
|
const canvasLoad = (): void => {
|
|
if (!ctx.value) {
|
|
initCanvas();
|
|
navListIndex.value = templateInfo.hasPosition ? 0 : 1; //无定位点默认起始下标为1
|
|
if (!templateInfo.hasPosition) {
|
|
//无定位点去除第一项
|
|
navList.splice(0, 1);
|
|
}
|
|
setQuestionList(); //回显试题
|
|
showFabricData(); //回显画布
|
|
setStepClick(currentNavListIndex.value, false); //设置步骤
|
|
setNavTitle(); //设置导航栏文字
|
|
}
|
|
};
|
|
|
|
// 初始化画布并添加事件
|
|
const initCanvas = (): void => {
|
|
imgDom.value = document.getElementById("picture-img");
|
|
ctx.value = new fabric.Canvas("picture", {
|
|
width: imgDom.value.clientWidth,
|
|
height: imgDom.value.clientHeight,
|
|
});
|
|
ctx.value.on("mouse:down", (e: any) => {
|
|
if (isLockStatus.value && !e.target) {
|
|
ElMessage.error("已锁定，无法新增！");
|
|
return;
|
|
}
|
|
const templateInfoItem = getTemplateInfo(true);
|
|
if (templateInfoItem[0].point.length === 4) {
|
|
if (isMoveOutView()) {
|
|
if (
|
|
getCanvasMousePos(e.e).x < getCalculateRectangleSize().left ||
|
|
getCanvasMousePos(e.e).y < getCalculateRectangleSize().top ||
|
|
getCanvasMousePos(e.e).x >
|
|
getCalculateRectangleSize().width + getCalculateRectangleSize().left ||
|
|
getCanvasMousePos(e.e).y >
|
|
getCalculateRectangleSize().height + getCalculateRectangleSize().top
|
|
) {
|
|
ElMessage.error("鼠标位置不在画布内！");
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
if (e.target) {
|
|
setStepClick(e.target.get("fabricType"));
|
|
}
|
|
canvasMouseDown(e.e, e.target, e.subTargets);
|
|
});
|
|
ctx.value.on("mouse:move", (e: any) => {
|
|
canvasMouseMove(e.e);
|
|
});
|
|
ctx.value.on("mouse:up", () => {
|
|
canvasMouseUp();
|
|
});
|
|
ctx.value.on("selection:created", (e: any) => {
|
|
if (e.selected.length > 1) {
|
|
ctx.value.discardActiveObject();
|
|
}
|
|
});
|
|
ctx.value.on("object:moving", (_e: any) => {
|
|
if (disabledMove.value.includes(navListIndex.value)) {
|
|
return;
|
|
}
|
|
isDragOutCanvas(isMoveOutView());
|
|
});
|
|
document.addEventListener("keydown", (e: any) => {
|
|
const keyCodeList = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
|
if (ctx.value.getActiveObject()) {
|
|
const allDrawerStatus = [
|
|
drawerList.value.subjectDrawer,
|
|
drawerList.value.examIdDrawer,
|
|
drawerList.value.objectiveDrawer,
|
|
drawerList.value.subjectiveDrawer,
|
|
];
|
|
if (keyCodeList.includes(e.key) && !allDrawerStatus.find((item: boolean) => item)) {
|
|
e.preventDefault();
|
|
let obj = ctx.value.getActiveObject();
|
|
switch (e.key) {
|
|
case "ArrowUp":
|
|
obj.set("top", obj.get("top") - 1);
|
|
break;
|
|
case "ArrowDown":
|
|
obj.set("top", obj.get("top") + 1);
|
|
break;
|
|
case "ArrowLeft":
|
|
obj.set("left", obj.get("left") - 1);
|
|
break;
|
|
case "ArrowRight":
|
|
obj.set("left", obj.get("left") + 1);
|
|
break;
|
|
}
|
|
isDragOutCanvas(isMoveOutView());
|
|
saveFabricData();
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
// 获取坐标
|
|
const getCanvasMousePos = (e: MouseEvent): { x: number; y: number } => {
|
|
const rect = imgDom.value.getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) * imgDom.value.width) / rect.width;
|
|
const y = ((e.clientY - rect.top) * imgDom.value.height) / rect.height;
|
|
return {
|
|
x: x,
|
|
y: y,
|
|
};
|
|
};
|
|
|
|
// 鼠标按下
|
|
const canvasMouseDown = (e: MouseEvent, target: any, subTargets: any): void => {
|
|
const mousePos = getCanvasMousePos(e);
|
|
firstPosition.value = mousePos;
|
|
if ((!target || !subTargets.length) && isDisabledDraw()) {
|
|
fabricRect.value = new fabric.Rect({
|
|
left: mousePos.x,
|
|
top: mousePos.y,
|
|
stroke: "red",
|
|
strokeWidth: 1,
|
|
fill: "transparent",
|
|
fabricId: cteatedNumber(),
|
|
});
|
|
}
|
|
// 鼠标按下显示功能文字
|
|
ctx.value
|
|
.getObjects()
|
|
.filter((item: any) => item.fabricType === navListIndex.value)
|
|
.forEach((item: any) => {
|
|
item.forEachObject((row: any) => {
|
|
if (textFabricList.value.includes(row.get("text"))) {
|
|
if (target) {
|
|
const itemTarget = target
|
|
.getObjects()
|
|
.find((i: any) => i.fabricId === row.fabricId);
|
|
if (itemTarget && row.fabricId === itemTarget.fabricId) {
|
|
if (isLockStatus.value && itemTarget.get("text") === "删除") {
|
|
row.set({ visible: false });
|
|
} else {
|
|
itemTarget.set({ visible: true });
|
|
}
|
|
} else {
|
|
row.set({ visible: false });
|
|
}
|
|
} else {
|
|
row.set({ visible: false });
|
|
}
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
// 鼠标移动
|
|
const canvasMouseMove = (e: MouseEvent): void => {
|
|
const mousePos = getCanvasMousePos(e);
|
|
if (fabricRect.value) {
|
|
const width = mousePos.x - fabricRect.value.left;
|
|
const height = mousePos.y - fabricRect.value.top;
|
|
const obj = {
|
|
height:
|
|
fabricRect.value.top + height >= imgDom.value.clientHeight
|
|
? imgDom.value.clientHeight - fabricRect.value.top
|
|
: height,
|
|
width:
|
|
fabricRect.value.left + width >= imgDom.value.clientWidth
|
|
? imgDom.value.clientWidth - fabricRect.value.left
|
|
: width,
|
|
};
|
|
if (isMoveOutView()) {
|
|
const templateInfoItem = getTemplateInfo(true);
|
|
if (templateInfoItem[0].point.length === 4) {
|
|
if (
|
|
obj.width + firstPosition.value.x - getCalculateRectangleSize().left >
|
|
getCalculateRectangleSize().width
|
|
) {
|
|
obj.width =
|
|
getCalculateRectangleSize().width -
|
|
firstPosition.value.x +
|
|
getCalculateRectangleSize().left;
|
|
}
|
|
if (
|
|
obj.height + firstPosition.value.y - getCalculateRectangleSize().top >
|
|
getCalculateRectangleSize().height
|
|
) {
|
|
obj.height =
|
|
getCalculateRectangleSize().height -
|
|
firstPosition.value.y +
|
|
getCalculateRectangleSize().top;
|
|
}
|
|
}
|
|
}
|
|
fabricRect.value.set({
|
|
...obj,
|
|
});
|
|
}
|
|
};
|
|
|
|
// 鼠标抬起
|
|
const canvasMouseUp = async (): Promise<void> => {
|
|
// 绘制图形
|
|
function addFabric(_type: string, data: any, itemFabricRect?: any) {
|
|
const group = [
|
|
fabricRect.value,
|
|
...(itemFabricRect ? [itemFabricRect, ...createFabric()] : createFabric()),
|
|
];
|
|
fabricGroup.value = new fabric.Group(group, {
|
|
hasControls: false,
|
|
subTargetCheck: true,
|
|
borderColor: "transparent",
|
|
selectionBackgroundColor: "red",
|
|
fabricType: navListIndex.value,
|
|
fabricId: cteatedNumber(),
|
|
}).on("mousemove", (e: any) => {
|
|
if (
|
|
!disabledMove.value.includes(navListIndex.value) &&
|
|
e.target.fabricType === navListIndex.value
|
|
) {
|
|
e.target.set("selectable", e.subTargets.length ? true : false);
|
|
}
|
|
});
|
|
// 功能添加文字事件
|
|
fabricGroup.value.forEachObject((obj: any) => {
|
|
if (textFabricList.value.includes(obj.get("text"))) {
|
|
obj.on("mousedown", (e: any) => {
|
|
addEventClick(e);
|
|
});
|
|
// 隐藏功能文字
|
|
obj.set({ visible: false });
|
|
}
|
|
});
|
|
fabricGroup.value.set("customFrom", data);
|
|
ctx.value.add(fabricGroup.value);
|
|
}
|
|
if (fabricRect.value && fabricRect.value.get("width") > 10) {
|
|
const obj = {
|
|
left: fabricRect.value.get("left"),
|
|
top: fabricRect.value.get("top"),
|
|
width: fabricRect.value.get("width"),
|
|
height: fabricRect.value.get("height"),
|
|
};
|
|
if (navListIndex.value === 0) {
|
|
await GetViewSize({
|
|
X: Math.round(fabricRect.value.get("left")),
|
|
Y: Math.round(fabricRect.value.get("top")),
|
|
Width: Math.round(fabricRect.value.get("width")),
|
|
Height: Math.round(fabricRect.value.get("height")),
|
|
ImageUrl: templateInfo.imgSrc[imgSrcIndex.value],
|
|
ImageWidth: imgDom.value.clientWidth,
|
|
ImageHeight: imgDom.value.clientHeight,
|
|
}).then((res) => {
|
|
if (res.code === 200) {
|
|
const rectTitle = ["右上角", "右下角"];
|
|
const rectFooterTitle = ["左下角", "右下角"];
|
|
if (rectTitle.includes(getCurrentText())) {
|
|
res.data.x = res.data.x + res.data.width;
|
|
}
|
|
if (rectFooterTitle.includes(getCurrentText())) {
|
|
res.data.y = res.data.y - res.data.height;
|
|
}
|
|
addFabric(
|
|
"rect",
|
|
{ ...obj, title: getTextTitle(), rectPosition: res.data },
|
|
new fabric.Rect({
|
|
left: rectTitle.includes(getCurrentText())
|
|
? res.data.x - res.data.width
|
|
: res.data.x,
|
|
top: rectFooterTitle.includes(getCurrentText())
|
|
? res.data.y + res.data.height
|
|
: res.data.y,
|
|
width: res.data.width,
|
|
height: res.data.height,
|
|
stroke: "red",
|
|
strokeWidth: 1,
|
|
fill: "transparent",
|
|
fabricId: cteatedNumber(),
|
|
rectPosition: res.data,
|
|
})
|
|
);
|
|
}
|
|
});
|
|
} else if (navListIndex.value === 5) {
|
|
addFabric("other", { type: otherType.value, ...obj });
|
|
} else {
|
|
addFabric("default", {
|
|
...obj,
|
|
});
|
|
}
|
|
}
|
|
//保存数据
|
|
saveFabricData();
|
|
// 各个类型框选过后的操作
|
|
boxSelectAfter();
|
|
};
|
|
|
|
// 功能文字添加事件
|
|
const addEventClick = (obj: any) => {
|
|
switch (obj.subTargets[0].get("text")) {
|
|
case "删除":
|
|
changeFabricCanvas(obj).delete();
|
|
break;
|
|
case "编辑属性":
|
|
changeFabricCanvas(obj).edit();
|
|
break;
|
|
}
|
|
saveFabricData();
|
|
};
|
|
|
|
// 画布按钮操作
|
|
const changeFabricCanvas = (obj: any): { delete: () => void; edit: () => void } => {
|
|
return {
|
|
delete: () => {
|
|
ctx.value.remove(obj.target);
|
|
ctx.value.discardActiveObject();
|
|
},
|
|
edit: () => {
|
|
currentFabric.value = obj;
|
|
changeDrawer(true);
|
|
},
|
|
};
|
|
};
|
|
|
|
//清除画布
|
|
const clearFabricGroup = (): void => {
|
|
ElMessageBox.confirm("确定清除所有框选的信息吗？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
templateInfo.tailsList.forEach((item: any) => {
|
|
item.point = [];
|
|
});
|
|
templateInfo.headList.forEach((item: any) => {
|
|
item.point = [];
|
|
});
|
|
templateInfo.questionList = [];
|
|
ctx.value.clear();
|
|
navListIndex.value = 0;
|
|
setNavTitle();
|
|
ElMessage.success("清除成功！");
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
|
|
// 生成其他图形文字辅助函数
|
|
const createText = (
|
|
text: string,
|
|
left: number,
|
|
top: number,
|
|
backgroundColor: string = "rgba(0,0,0,0.5)",
|
|
fill: string = "white",
|
|
fontSize: number = 16,
|
|
fontWeight: string = "normal"
|
|
): any => {
|
|
return new fabric.Text(text, {
|
|
left,
|
|
top,
|
|
fontSize,
|
|
fill,
|
|
backgroundColor,
|
|
fontWeight,
|
|
fabricId: cteatedNumber(),
|
|
});
|
|
};
|
|
|
|
// 获取当前标题
|
|
const getCurrentText = (): string => {
|
|
const fabricItem = getFabricItem();
|
|
const fabricPositionTitle = [] as string[];
|
|
fabricItem.forEach((row: any) => {
|
|
row.forEachObject((item: any) => {
|
|
if (positionTitle.value.includes(item.get("text"))) {
|
|
fabricPositionTitle.push(item.get("text"));
|
|
}
|
|
});
|
|
});
|
|
return findFirstMissingValue(fabricPositionTitle);
|
|
};
|
|
|
|
// 设置标题
|
|
const getTextTitle = (bool?: boolean): string => {
|
|
switch (navListIndex.value) {
|
|
case 0:
|
|
if (bool) {
|
|
ElMessage.success(
|
|
`${imgSrcIndex.value ? "反面" : "正面"}${getCurrentText()}框选完成`
|
|
);
|
|
}
|
|
return getCurrentText();
|
|
case 1:
|
|
return "标题";
|
|
case 5:
|
|
let msg = "";
|
|
switch (otherType.value) {
|
|
case 1:
|
|
msg = "缺考";
|
|
break;
|
|
case 2:
|
|
msg = "屏蔽区";
|
|
break;
|
|
case 3:
|
|
msg = "反面定位点";
|
|
break;
|
|
}
|
|
return msg;
|
|
default:
|
|
return "无";
|
|
}
|
|
};
|
|
|
|
// 生成其他图形文字
|
|
const createFabric = (): any[] => {
|
|
const titleText = createText(
|
|
getTextTitle(true),
|
|
fabricRect.value.left,
|
|
fabricRect.value.top - (navListIndex.value ? 20 : 0),
|
|
"rgba(255,0,0,0.5)"
|
|
);
|
|
const deleteText = createText(
|
|
"删除",
|
|
fabricRect.value.left + (navListIndex.value ? fabricRect.value.width - 32 : 0),
|
|
fabricRect.value.top +
|
|
fabricRect.value.height -
|
|
(navListIndex.value ? fabricRect.value.height + 20 : 20)
|
|
);
|
|
const editText = createText(
|
|
"编辑属性",
|
|
fabricRect.value.left,
|
|
fabricRect.value.top + fabricRect.value.height
|
|
);
|
|
switch (navListIndex.value) {
|
|
case 0:
|
|
return [titleText, deleteText];
|
|
case 1:
|
|
case 5:
|
|
return [titleText, deleteText];
|
|
case 3:
|
|
return [deleteText, editText];
|
|
default:
|
|
return [titleText, deleteText, editText];
|
|
}
|
|
};
|
|
// 切换步骤
|
|
const setStepClick = (index: number, isElMessage: boolean = true): void => {
|
|
if (navListIndex.value === index) {
|
|
return;
|
|
}
|
|
let msg = "";
|
|
|
|
function checkTemplateInfo(index: number): void {
|
|
if (index > navListIndex.value) {
|
|
if (index >= 2) {
|
|
if (index >= 3) {
|
|
if (
|
|
!templateInfo.headList[2].point.length &&
|
|
!templateInfo.tailsList[2].point.length
|
|
) {
|
|
msg = "考号未框选！";
|
|
}
|
|
}
|
|
if (
|
|
!templateInfo.headList[1].point.length &&
|
|
!templateInfo.tailsList[1].point.length
|
|
) {
|
|
msg = "学科未框选！";
|
|
}
|
|
}
|
|
templateInfo.hasPosition &&
|
|
(index === 1 || index === 2 || index === 3 || index === 4 || index === 5
|
|
? templateInfo.headList[0].point.length !== 4
|
|
? ((msg = "正面定位点未框选完成！"), changeImgSrcIndex(0))
|
|
: templateInfo.tailsList[0].point.length !== 4 &&
|
|
templateInfo.imgSrc.length > 1
|
|
? ((msg = "反面定位点未框选完成！"), changeImgSrcIndex(1))
|
|
: null
|
|
: null);
|
|
}
|
|
}
|
|
|
|
checkTemplateInfo(index);
|
|
|
|
if (msg) {
|
|
if (isElMessage) ElMessage.error(msg);
|
|
return;
|
|
}
|
|
if (index === 1) {
|
|
changeZoom();
|
|
}
|
|
navListIndex.value = index;
|
|
changeImgSrcIndex(0);
|
|
ctx.value.discardActiveObject();
|
|
ctx.value.renderAll();
|
|
};
|
|
|
|
//保存图形
|
|
const saveFabricData = (): void => {
|
|
const templateInfoItem = getTemplateInfo();
|
|
templateInfoItem.point = [];
|
|
const ctxObjects = ctx.value
|
|
.getObjects()
|
|
.filter((item: any) => item.fabricType === navListIndex.value);
|
|
ctxObjects.forEach((item: any, index: number) => {
|
|
templateInfoItem.point.push({
|
|
left: item.left,
|
|
top: item.top,
|
|
width: item.width,
|
|
height: item.height,
|
|
fabricType: item.fabricType,
|
|
customFrom: item.customFrom,
|
|
children: [],
|
|
});
|
|
item.forEachObject((child: any) => {
|
|
const childItem = {
|
|
left: child.left,
|
|
top: child.top,
|
|
width: child.width,
|
|
height: child.height,
|
|
};
|
|
if (child.get("type") === "text") {
|
|
templateInfoItem.point[index].children.push({
|
|
type: "text",
|
|
text: child.get("text"),
|
|
backgroundColor: child.get("backgroundColor"),
|
|
fill: child.get("fill"),
|
|
fontSize: child.get("fontSize"),
|
|
fontWeight: child.get("fontWeight"),
|
|
...childItem,
|
|
});
|
|
} else {
|
|
templateInfoItem.point[index].children.push({
|
|
type: "rect",
|
|
rectPosition: child.get("rectPosition"),
|
|
...childItem,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// 设置题目列表
|
|
setQuestionList();
|
|
//设置导航栏文字
|
|
setNavTitle();
|
|
// 禁用其他图形
|
|
disabledFabricData();
|
|
// 更新画布
|
|
ctx.value.renderAll();
|
|
};
|
|
|
|
// 禁用其他图形
|
|
const disabledFabricData = (): void => {
|
|
const ctxObjects = ctx.value.getObjects();
|
|
ctxObjects.forEach((item: any) => {
|
|
item.set("hoverCursor", "default");
|
|
if (disabledMove.value.includes(item.fabricType)) {
|
|
item.forEachObject((row: any) => {
|
|
item.set("selectable", false);
|
|
if (row.get("type") === "rect") {
|
|
row.set("hoverCursor", "not-allowed");
|
|
} else {
|
|
if (textFabricList.value.includes(row.get("text"))) {
|
|
row.set(
|
|
"hoverCursor",
|
|
item.fabricType === navListIndex.value ? "pointer" : "not-allowed"
|
|
);
|
|
} else {
|
|
row.set(
|
|
"hoverCursor",
|
|
item.fabricType === navListIndex.value ? "default" : "not-allowed"
|
|
);
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
item.forEachObject((row: any) => {
|
|
item.set("selectable", item.fabricType === navListIndex.value);
|
|
if (row.get("type") === "rect") {
|
|
row.set(
|
|
"hoverCursor",
|
|
item.fabricType === navListIndex.value ? "move" : "not-allowed"
|
|
);
|
|
} else {
|
|
if (textFabricList.value.includes(row.get("text"))) {
|
|
row.set(
|
|
"hoverCursor",
|
|
item.fabricType === navListIndex.value ? "pointer" : "not-allowed"
|
|
);
|
|
} else {
|
|
row.set(
|
|
"hoverCursor",
|
|
item.fabricType === navListIndex.value ? "default" : "not-allowed"
|
|
);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// 各个类型框选过后的操作
|
|
const boxSelectAfter = async (): Promise<void> => {
|
|
if (fabricRect.value && fabricRect.value.get("width") > 10) {
|
|
async function ocrImage(): Promise<void> {
|
|
const loading = ElLoading.service({
|
|
lock: true,
|
|
text: `识别中...`,
|
|
background: "rgba(0, 0, 0, 0.7)",
|
|
body: true,
|
|
});
|
|
const canvas = await html2canvas(imgDom.value, {
|
|
scale: 4,
|
|
width: fabricRect.value.width,
|
|
height: fabricRect.value.height,
|
|
x: fabricGroup.value.left,
|
|
y: fabricGroup.value.top + 20,
|
|
useCORS: true,
|
|
});
|
|
const img = new Image();
|
|
img.src = canvas.toDataURL("image/png");
|
|
img.onload = async () => {
|
|
const worker = (await createWorker("chi_sim", 1, {
|
|
workerPath: "/src/assets/js/worker.min.js",
|
|
corePath: "/src/assets/js/tesseract-core.wasm.js",
|
|
})) as any;
|
|
await worker.recognize(img).then((res: any) => {
|
|
textList.value = res.data.words.map((item: any) => {
|
|
return {
|
|
...item,
|
|
checked: false,
|
|
};
|
|
});
|
|
changeDrawer(true);
|
|
loading.close();
|
|
});
|
|
};
|
|
}
|
|
switch (navListIndex.value) {
|
|
case 0:
|
|
// 定位点
|
|
isShowElMessageBox();
|
|
break;
|
|
case 1:
|
|
// 学科
|
|
ocrImage();
|
|
break;
|
|
case 2:
|
|
case 3:
|
|
case 4:
|
|
// 考号 客观题 主观题
|
|
changeDrawer(true);
|
|
break;
|
|
case 5:
|
|
// 其他
|
|
if (otherType.value === 3) {
|
|
ocrImage();
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
fabricRect.value = null;
|
|
fabricGroup.value = null;
|
|
};
|
|
|
|
// 是否禁止禁止绘制
|
|
const isDisabledDraw = (): boolean => {
|
|
let isDisabledDrawStatus = true;
|
|
let msg = "";
|
|
const fabricItem = getFabricItem();
|
|
switch (navListIndex.value) {
|
|
case 0:
|
|
// 定位点
|
|
isDisabledDrawStatus = fabricItem.length < 4;
|
|
if (!isDisabledDrawStatus)
|
|
msg = `${imgSrcIndex.value === 0 ? "正面" : "反面"}定位点已框选完毕！`;
|
|
break;
|
|
case 1:
|
|
// 学科
|
|
isDisabledDrawStatus = fabricItem.length === 0;
|
|
if (!isDisabledDrawStatus) msg = "学科已框选！";
|
|
break;
|
|
case 2:
|
|
// 考号
|
|
isDisabledDrawStatus = fabricItem.length !== 2;
|
|
if (!isDisabledDrawStatus) msg = "考号最多只能框选两个！";
|
|
break;
|
|
case 5:
|
|
// 其他
|
|
const hasQueKao = [] as any;
|
|
if (otherType.value === 1) {
|
|
fabricItem.forEach((item: any) => {
|
|
let row = item.getObjects().filter((obj: any) => obj.get("text") === "缺考");
|
|
if (row) {
|
|
hasQueKao.push(...row);
|
|
}
|
|
});
|
|
isDisabledDrawStatus = hasQueKao.length === 0;
|
|
if (!isDisabledDrawStatus) msg = "缺考标记已框选！";
|
|
}
|
|
|
|
if (otherType.value === 3) {
|
|
if (imgSrcIndex.value === 1) {
|
|
fabricItem.forEach((item: any) => {
|
|
let row = item
|
|
.getObjects()
|
|
.filter(
|
|
(obj: any) =>
|
|
obj.get("text") && obj.get("text").indexOf("反面定位点") >= 0
|
|
);
|
|
if (row.length) {
|
|
hasQueKao.push(...row);
|
|
}
|
|
});
|
|
isDisabledDrawStatus = hasQueKao.length === 0;
|
|
if (!isDisabledDrawStatus) msg = "反面定位点标记已框选！";
|
|
} else {
|
|
msg = "反面定位点只能在反面框选！";
|
|
isDisabledDrawStatus = false;
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
if (msg) {
|
|
ElMessage.success(msg);
|
|
}
|
|
return isDisabledDrawStatus;
|
|
};
|
|
|
|
// 是否需要弹窗提示
|
|
const isShowElMessageBox = () => {
|
|
const fabricItem = getFabricItem();
|
|
switch (navListIndex.value) {
|
|
case 0:
|
|
if (templateInfo.imgSrc.length > 1) {
|
|
if (
|
|
templateInfo.headList[navListIndex.value].point.length === 4 &&
|
|
templateInfo.tailsList[navListIndex.value].point.length === 4
|
|
) {
|
|
ElMessageBox.confirm("定位点已框选完毕，是否切换到框选学科？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
setStepClick(1);
|
|
})
|
|
.catch(() => {});
|
|
} else if (
|
|
templateInfo.headList[navListIndex.value].point.length === 4 &&
|
|
imgSrcIndex.value !== 1
|
|
) {
|
|
ElMessageBox.confirm("正面已框选完毕,是否切换到反面？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
changeImgSrcIndex(1);
|
|
})
|
|
.catch(() => {});
|
|
} else if (
|
|
templateInfo.tailsList[navListIndex.value].point.length === 4 &&
|
|
imgSrcIndex.value !== 0
|
|
) {
|
|
ElMessageBox.confirm("反面已框选完毕,是否切换到正面？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
changeImgSrcIndex(0);
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
} else {
|
|
if (templateInfo.headList[navListIndex.value].point.length === 4) {
|
|
ElMessageBox.confirm("定位点已框选完毕，是否切换到框选学科？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
setStepClick(1);
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
}
|
|
break;
|
|
case 1:
|
|
if (fabricItem.length !== 0) {
|
|
ElMessageBox.confirm("学科已框选完毕,是否切换到框选考号？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
setStepClick(2);
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
// 回显画布
|
|
const showFabricData = (): void => {
|
|
const templateInfoItem = getTemplateInfo(true);
|
|
function createFabricChildren(children: any) {
|
|
const textArr = [] as any;
|
|
const rectArr = [] as any;
|
|
children.forEach((item: any) => {
|
|
if (item.type === "rect") {
|
|
rectArr.push(
|
|
new fabric.Rect({
|
|
left: item.left,
|
|
top: item.top,
|
|
width: item.width,
|
|
height: item.height,
|
|
stroke: "red",
|
|
strokeWidth: 1,
|
|
fill: "transparent",
|
|
fabricId: cteatedNumber(),
|
|
rectPosition: item.rectPosition,
|
|
})
|
|
);
|
|
} else {
|
|
textArr.push(
|
|
new fabric.Text(item.text, {
|
|
left: item.left,
|
|
top: item.top,
|
|
width: item.width,
|
|
height: item.height,
|
|
backgroundColor: item.backgroundColor,
|
|
fill: item.fill || "white",
|
|
fontSize: item.fontSize || 16,
|
|
fabricId: cteatedNumber(),
|
|
visible: !textFabricList.value.includes(item.text),
|
|
fontWeight: item.fontWeight || "normal",
|
|
}).on("mousedown", (e: any) => {
|
|
if (textFabricList.value.includes(item.text)) {
|
|
addEventClick(e);
|
|
}
|
|
})
|
|
);
|
|
}
|
|
});
|
|
return [...rectArr, ...textArr];
|
|
}
|
|
templateInfoItem.forEach((row: any) => {
|
|
row.point.forEach((item: any) => {
|
|
ctx.value.add(
|
|
new fabric.Group([...createFabricChildren(item.children)], {
|
|
hasControls: false,
|
|
subTargetCheck: true,
|
|
borderColor: "transparent",
|
|
selectionBackgroundColor: "rgba(255,0,0,0.1)",
|
|
fabricType: item.fabricType,
|
|
left: item.left,
|
|
top: item.top,
|
|
width: item.width,
|
|
height: item.height,
|
|
fabricId: cteatedNumber(),
|
|
customFrom: item.customFrom,
|
|
}).on("mousemove", (e: any) => {
|
|
if (
|
|
!disabledMove.value.includes(navListIndex.value) &&
|
|
e.target.fabricType === navListIndex.value
|
|
) {
|
|
e.target.set("selectable", e.subTargets.length ? true : false);
|
|
}
|
|
})
|
|
);
|
|
});
|
|
});
|
|
// 禁用其他图形
|
|
disabledFabricData();
|
|
};
|
|
|
|
// 获取某一项所有图形
|
|
const getFabricItem = (): any => {
|
|
return ctx.value.getObjects().filter((item: any) => {
|
|
return item.fabricType === navListIndex.value;
|
|
});
|
|
};
|
|
|
|
// 设置图片正反面
|
|
const changeImgSrcIndex = (index: number): void => {
|
|
imgSrcIndex.value = index;
|
|
ctx.value.clear();
|
|
showFabricData();
|
|
setNavTitle();
|
|
};
|
|
|
|
// 获取当前是哪面的数据
|
|
const getTemplateInfo = (bool?: boolean): any => {
|
|
if (bool) {
|
|
return imgSrcIndex.value === 0 ? templateInfo.headList : templateInfo.tailsList;
|
|
} else {
|
|
return imgSrcIndex.value === 0
|
|
? templateInfo.headList[navListIndex.value]
|
|
: templateInfo.tailsList[navListIndex.value];
|
|
}
|
|
};
|
|
|
|
// 放大缩小画布
|
|
const changeZoom = (bool?: boolean): void => {
|
|
const dom = document.getElementById("zoom-div") as HTMLElement;
|
|
if (typeof bool === "boolean") {
|
|
bool ? (scale.value += 0.1) : (scale.value -= 0.1);
|
|
} else {
|
|
ElMessage.success("画布恢复默认值成功");
|
|
scale.value = 1;
|
|
}
|
|
scale.value = Math.max(scale.value, 1);
|
|
dom.style.transform = `scale(${scale.value})`;
|
|
};
|
|
|
|
// 生成随机数
|
|
const cteatedNumber = (): string => {
|
|
return `${Math.floor(Math.random() * 100000000)}+${+new Date()}`;
|
|
};
|
|
|
|
// 修改尺寸数字
|
|
const changeFabricPositionNumber = (value: number | boolean, str: string): void => {
|
|
let number = 0;
|
|
if (typeof value === "boolean") {
|
|
number = JSON.parse(JSON.stringify(currentFabric.value.target.get(str)));
|
|
if (value) {
|
|
number--;
|
|
} else {
|
|
number++;
|
|
}
|
|
} else {
|
|
number = value;
|
|
}
|
|
changeFabricPosition(number, str);
|
|
};
|
|
|
|
// 编辑尺寸
|
|
const changeFabricPosition = (value: number, str: string): void => {
|
|
if (value) {
|
|
let maxRect = currentFabric.value.target
|
|
.getObjects()
|
|
.filter((item: any) => item.get("type") === "rect")
|
|
.reduce(function (currentMax: any, obj: any) {
|
|
return obj.get("width") > currentMax.get("width") ? obj : currentMax;
|
|
}, currentFabric.value.target.getObjects()[0]);
|
|
let textList = currentFabric.value.target
|
|
.getObjects()
|
|
.filter((item: any) => item.get("type") == "text");
|
|
function changeTextPosition(): void {
|
|
for (let index = 0; index < textList.length; index++) {
|
|
switch (textList[index].get("text")) {
|
|
case "删除":
|
|
if (str === "width") {
|
|
textList[index].set("left", value / 2 - textList[index].get("width"));
|
|
} else {
|
|
textList[index].set(
|
|
"top",
|
|
value / 2 - value - textList[index].get("height")
|
|
);
|
|
}
|
|
break;
|
|
case "编辑属性":
|
|
if (str === "width") {
|
|
textList[index].set("left", value / 2 - value);
|
|
} else {
|
|
textList[index].set("top", value / 2);
|
|
}
|
|
break;
|
|
default:
|
|
if (str === "width") {
|
|
textList[index].set("left", value / 2 - value);
|
|
} else {
|
|
textList[index].set(
|
|
"top",
|
|
value / 2 - value - textList[index].get("height")
|
|
);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
switch (str) {
|
|
case "top":
|
|
case "left":
|
|
currentFabric.value.target.set(str, value);
|
|
break;
|
|
case "width":
|
|
case "height":
|
|
maxRect.set(str, value);
|
|
if (str === "width") {
|
|
maxRect.set("left", value / 2 - value);
|
|
currentFabric.value.target.set(str, value);
|
|
} else {
|
|
maxRect.set("top", value / 2 - value);
|
|
currentFabric.value.target.set(str, value + textList[0].height * 2);
|
|
}
|
|
let rectWidth = 0,
|
|
rectHeight = 0;
|
|
switch (navListIndex.value) {
|
|
// 考号
|
|
case 2:
|
|
let examIdLength = currentFabric.value.target.customFrom.examIdLength;
|
|
rectWidth = maxRect.get("width") / examIdLength;
|
|
rectHeight = maxRect.get("height") / 10;
|
|
changeTextPosition();
|
|
deleteSmallRect();
|
|
for (let index = 0; index < examIdLength * 10; index++) {
|
|
currentFabric.value.target.add(
|
|
new fabric.Rect({
|
|
left: maxRect.get("left") + (index % examIdLength) * rectWidth,
|
|
top:
|
|
maxRect.get("top") +
|
|
getOffsetTop(examIdLength, 10, index, rectHeight),
|
|
stroke: "red",
|
|
strokeWidth: 1,
|
|
fill: "transparent",
|
|
fabricId: cteatedNumber(),
|
|
width: rectWidth,
|
|
height: rectHeight,
|
|
})
|
|
);
|
|
}
|
|
break;
|
|
case 3:
|
|
// 客观题
|
|
let questionNumber = currentFabric.value.target.customFrom.questionNumber;
|
|
let optionNumber = currentFabric.value.target.customFrom.optionNumber;
|
|
let range = currentFabric.value.target.customFrom.range;
|
|
rectWidth = maxRect.get("width") / (range ? questionNumber : optionNumber);
|
|
rectHeight = maxRect.get("height") / (range ? optionNumber : questionNumber);
|
|
changeTextPosition();
|
|
deleteSmallRect();
|
|
for (let index = 0; index < optionNumber * questionNumber; index++) {
|
|
currentFabric.value.target.add(
|
|
new fabric.Rect({
|
|
left:
|
|
maxRect.get("left") +
|
|
(index % (range ? questionNumber : optionNumber)) * rectWidth,
|
|
top:
|
|
maxRect.get("top") +
|
|
getOffsetTop(
|
|
range ? questionNumber : optionNumber,
|
|
range ? optionNumber : questionNumber,
|
|
index,
|
|
rectHeight
|
|
),
|
|
stroke: "red",
|
|
strokeWidth: 1,
|
|
fill: "transparent",
|
|
fabricId: cteatedNumber(),
|
|
width: rectWidth,
|
|
height: rectHeight,
|
|
})
|
|
);
|
|
}
|
|
// 修改题号位置
|
|
const questionNumberList = currentFabric.value.target
|
|
.getObjects()
|
|
.filter(
|
|
(item: any) =>
|
|
item.get("type") === "text" &&
|
|
!textFabricList.value.includes(item.get("text"))
|
|
);
|
|
questionNumberList.forEach((item: any, index: number) => {
|
|
if (range) {
|
|
item.set({
|
|
left:
|
|
maxRect.get("left") +
|
|
rectWidth * index +
|
|
rectWidth / 2 -
|
|
(questionNumber + 1),
|
|
top: maxRect.get("top") + 4,
|
|
});
|
|
} else {
|
|
item.set({
|
|
top:
|
|
maxRect.get("top") +
|
|
rectHeight * index +
|
|
rectHeight / 2 -
|
|
(questionNumber + 1),
|
|
left: maxRect.get("left") + 4,
|
|
});
|
|
}
|
|
});
|
|
break;
|
|
case 4:
|
|
// 主观题
|
|
changeTextPosition();
|
|
break;
|
|
}
|
|
break;
|
|
}
|
|
isDragOutCanvas(isMoveOutView());
|
|
}
|
|
saveFabricData();
|
|
};
|
|
|
|
// 编辑尺寸状态
|
|
const changeFabricPositionDraw = (): void => {
|
|
nextTick(() => {
|
|
let maxRect = currentFabric.value.target
|
|
.getObjects()
|
|
.filter((item: any) => item.get("type") === "rect")
|
|
.reduce(function (currentMax: any, obj: any) {
|
|
return obj.get("width") > currentMax.get("width") ? obj : currentMax;
|
|
}, currentFabric.value.target.getObjects()[0]);
|
|
drawerForm.fabricPosition.top = currentFabric.value.target.get("top");
|
|
drawerForm.fabricPosition.left = currentFabric.value.target.get("left");
|
|
drawerForm.fabricPosition.width = maxRect.get("width");
|
|
drawerForm.fabricPosition.height = maxRect.get("height");
|
|
FabricSizeRef.value.setSize(
|
|
drawerForm.fabricPosition,
|
|
imgDom.value.width,
|
|
imgDom.value.height
|
|
);
|
|
});
|
|
};
|
|
|
|
// 修改drawer
|
|
const changeDrawer = (bool: boolean): void => {
|
|
let item = "" as any;
|
|
if (currentFabric.value) {
|
|
item = currentFabric.value.target;
|
|
}
|
|
switch (navListIndex.value) {
|
|
case 1:
|
|
// 学科
|
|
drawerList.value.subjectDrawer = bool;
|
|
break;
|
|
case 2:
|
|
// 考号
|
|
if (bool && item) {
|
|
drawerForm.examId.examType = item.customFrom.fabricAttribute;
|
|
if (drawerForm.examId.examType === 1) {
|
|
drawerForm.examId.examIdLength = item.customFrom.examIdLength;
|
|
}
|
|
}
|
|
drawerList.value.examIdDrawer = bool;
|
|
if (bool && item) {
|
|
changeFabricPositionDraw();
|
|
}
|
|
break;
|
|
case 3:
|
|
// 客观题
|
|
if (bool && item) {
|
|
drawerForm.objective.questionTypeValue = item.customFrom.fabricAttribute;
|
|
drawerForm.objective.questionBefore = item.customFrom.questionBefore;
|
|
drawerForm.objective.questionAfter = item.customFrom.questionAfter;
|
|
drawerForm.objective.range = item.customFrom.range;
|
|
drawerForm.objective.questionNumber = item.customFrom.questionNumber;
|
|
drawerForm.objective.optionNumber = item.customFrom.optionNumber;
|
|
drawerForm.objective.score = item.customFrom.score;
|
|
} else {
|
|
drawerForm.objective.questionBefore = getQuestionNumer();
|
|
drawerForm.objective.questionAfter =
|
|
drawerForm.objective.questionBefore + drawerForm.objective.questionNumber - 1;
|
|
}
|
|
drawerList.value.objectiveDrawer = bool;
|
|
if (bool && item) {
|
|
changeFabricPositionDraw();
|
|
}
|
|
break;
|
|
case 4:
|
|
// 主观题
|
|
if (bool && currentFabric.value) {
|
|
drawerForm.subjective.questionTypeValue = item.customFrom.fabricAttribute;
|
|
drawerForm.subjective.questionBefore = item.customFrom.questionBefore;
|
|
drawerForm.subjective.questionAfter = item.customFrom.questionAfter;
|
|
drawerForm.subjective.score = item.customFrom.score;
|
|
} else {
|
|
drawerForm.subjective.questionBefore = getQuestionNumer();
|
|
drawerForm.subjective.questionAfter = drawerForm.subjective.questionBefore;
|
|
}
|
|
drawerList.value.subjectiveDrawer = bool;
|
|
if (bool && currentFabric.value) {
|
|
changeFabricPositionDraw();
|
|
}
|
|
break;
|
|
case 5:
|
|
// 其他
|
|
drawerList.value.subjectDrawer = bool;
|
|
break;
|
|
}
|
|
};
|
|
|
|
// 修改图形
|
|
const changeFabricInfo = (bool: boolean): void => {
|
|
const fabricItem = currentFabric.value
|
|
? currentFabric.value.target
|
|
: getFabricItem().reduce(function (currentMax: any, obj: any) {
|
|
return obj.fabricId.split("+")[1] > currentMax.fabricId.split("+")[1]
|
|
? obj
|
|
: currentMax;
|
|
}, getFabricItem()[0]);
|
|
if (fabricItem) {
|
|
const textTitle = fabricItem
|
|
.getObjects()
|
|
.find(
|
|
(item: any) =>
|
|
item.get("text") && !textFabricList.value.includes(item.get("text"))
|
|
);
|
|
const obj = {
|
|
left: fabricItem.get("customFrom").left,
|
|
top: fabricItem.get("customFrom").top,
|
|
width: fabricItem.get("customFrom").width,
|
|
height: fabricItem.get("customFrom").height,
|
|
};
|
|
if (bool) {
|
|
switch (navListIndex.value) {
|
|
case 1:
|
|
// 学科
|
|
if (textList.value.filter((item) => item.checked).length) {
|
|
textTitle.set({
|
|
text: textList.value
|
|
.filter((item) => item.checked)
|
|
.map((item) => item.text)
|
|
.join(""),
|
|
});
|
|
fabricItem.set({
|
|
customFrom: {
|
|
title: textList.value
|
|
.filter((item) => item.checked)
|
|
.map((item) => item.text)
|
|
.join(""),
|
|
...obj,
|
|
},
|
|
});
|
|
} else {
|
|
ElMessage.error("请选择文字！");
|
|
return;
|
|
}
|
|
isShowElMessageBox();
|
|
break;
|
|
case 2:
|
|
// 考号
|
|
function isRepeat() {
|
|
let tx = 0,
|
|
tm = 0,
|
|
msg;
|
|
getFabricItem().forEach((item: any) => {
|
|
if (item.getObjects().find((row: any) => row.get("text") === "填涂式")) {
|
|
tx++;
|
|
}
|
|
if (item.getObjects().find((row: any) => row.get("text") === "条码式")) {
|
|
tm++;
|
|
}
|
|
});
|
|
if (drawerForm.examId.examType === 1 && tx) {
|
|
msg = "填涂式已存在";
|
|
}
|
|
if (drawerForm.examId.examType === 2 && tm) {
|
|
msg = "条码式已存在";
|
|
}
|
|
return msg;
|
|
}
|
|
if (currentFabric.value) {
|
|
if (
|
|
currentFabric.value.target.customFrom.fabricAttribute !==
|
|
drawerForm.examId.examType
|
|
) {
|
|
let errorMsg = isRepeat();
|
|
if (errorMsg) {
|
|
ElMessage.error(errorMsg);
|
|
return;
|
|
}
|
|
}
|
|
} else {
|
|
let errorMsg = isRepeat();
|
|
if (errorMsg) {
|
|
ElMessage.error(errorMsg);
|
|
return;
|
|
}
|
|
}
|
|
function createdExamIdRect(): void {
|
|
let rect = fabricItem
|
|
.getObjects()
|
|
.find((row: any) => row.get("type") === "rect");
|
|
let rectWidth = rect.get("width") / drawerForm.examId.examIdLength;
|
|
let rectHeight = rect.get("height") / 10;
|
|
for (let index = 0; index < drawerForm.examId.examIdLength * 10; index++) {
|
|
fabricItem.add(
|
|
new fabric.Rect({
|
|
left:
|
|
rect.get("left") +
|
|
(index % drawerForm.examId.examIdLength) * rectWidth,
|
|
top:
|
|
rect.get("top") +
|
|
getOffsetTop(drawerForm.examId.examIdLength, 10, index, rectHeight),
|
|
stroke: "red",
|
|
strokeWidth: 1,
|
|
fill: "transparent",
|
|
fabricId: cteatedNumber(),
|
|
width: rectWidth,
|
|
height: rectHeight,
|
|
})
|
|
);
|
|
}
|
|
}
|
|
deleteSmallRect();
|
|
if (drawerForm.examId.examType === 1) {
|
|
createdExamIdRect();
|
|
}
|
|
textTitle.set({
|
|
text: drawerForm.examId.examType === 1 ? "填涂式" : "条码式",
|
|
});
|
|
fabricItem.set({
|
|
customFrom: {
|
|
fabricAttribute: drawerForm.examId.examType,
|
|
examIdLength: drawerForm.examId.examIdLength,
|
|
...obj,
|
|
},
|
|
});
|
|
isShowElMessageBox();
|
|
break;
|
|
case 3:
|
|
// 客观题
|
|
// 生成小格子
|
|
function createdObjectiveRect(
|
|
rect: any,
|
|
rectWidth: number,
|
|
rectHeight: number
|
|
): void {
|
|
for (
|
|
let index = 0;
|
|
index <
|
|
drawerForm.objective.optionNumber * drawerForm.objective.questionNumber;
|
|
index++
|
|
) {
|
|
fabricItem.add(
|
|
new fabric.Rect({
|
|
left:
|
|
rect.get("left") +
|
|
(index %
|
|
(drawerForm.objective.range
|
|
? drawerForm.objective.questionNumber
|
|
: drawerForm.objective.optionNumber)) *
|
|
rectWidth,
|
|
top:
|
|
rect.get("top") +
|
|
getOffsetTop(
|
|
drawerForm.objective.range
|
|
? drawerForm.objective.questionNumber
|
|
: drawerForm.objective.optionNumber,
|
|
drawerForm.objective.range
|
|
? drawerForm.objective.optionNumber
|
|
: drawerForm.objective.questionNumber,
|
|
index,
|
|
rectHeight
|
|
),
|
|
stroke: "red",
|
|
strokeWidth: 1,
|
|
fill: "transparent",
|
|
fabricId: cteatedNumber(),
|
|
width: rectWidth,
|
|
height: rectHeight,
|
|
})
|
|
);
|
|
}
|
|
}
|
|
if (isQuestionNumerRepeat()) {
|
|
ElMessage.error("题目重复！");
|
|
return;
|
|
} else {
|
|
let rect = fabricItem
|
|
.getObjects()
|
|
.find((row: any) => row.get("type") === "rect");
|
|
let rectWidth =
|
|
rect.get("width") /
|
|
(drawerForm.objective.range
|
|
? drawerForm.objective.questionNumber
|
|
: drawerForm.objective.optionNumber);
|
|
let rectHeight =
|
|
rect.get("height") /
|
|
(drawerForm.objective.range
|
|
? drawerForm.objective.optionNumber
|
|
: drawerForm.objective.questionNumber);
|
|
deleteSmallRect(navListIndex.value);
|
|
createdObjectiveRect(rect, rectWidth, rectHeight);
|
|
fabricItem.set({
|
|
customFrom: {
|
|
fabricAttribute: drawerForm.objective.questionTypeValue,
|
|
range: drawerForm.objective.range,
|
|
optionNumber: drawerForm.objective.optionNumber,
|
|
questionNumber: drawerForm.objective.questionNumber,
|
|
questionBefore: drawerForm.objective.questionBefore,
|
|
questionAfter: drawerForm.objective.questionAfter,
|
|
score: drawerForm.objective.score,
|
|
...obj,
|
|
},
|
|
});
|
|
objectiveNumber(fabricItem, rect, rectWidth, rectHeight);
|
|
}
|
|
|
|
break;
|
|
case 4:
|
|
// 主观题
|
|
if (isQuestionNumerRepeat()) {
|
|
ElMessageBox.confirm("题目重复，是否设置为分页题目。", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
let numberIndex = getIndex();
|
|
textTitle.set({
|
|
text: `${drawerForm.subjective.questionBefore}-${drawerForm.subjective.questionAfter}-${numberIndex}`,
|
|
});
|
|
fabricItem.set({
|
|
customFrom: {
|
|
fabricAttribute: drawerForm.objective.questionTypeValue,
|
|
questionBefore: drawerForm.subjective.questionBefore,
|
|
questionAfter: drawerForm.subjective.questionAfter,
|
|
score: drawerForm.subjective.score,
|
|
isPage: numberIndex,
|
|
...obj,
|
|
},
|
|
});
|
|
saveFabricData();
|
|
changeDrawer(false);
|
|
})
|
|
.catch(() => {});
|
|
return;
|
|
} else {
|
|
textTitle.set({
|
|
text: `${drawerForm.subjective.questionBefore}-${drawerForm.subjective.questionAfter}`,
|
|
});
|
|
fabricItem.set({
|
|
customFrom: {
|
|
fabricAttribute: drawerForm.objective.questionTypeValue,
|
|
questionBefore: drawerForm.subjective.questionBefore,
|
|
questionAfter: drawerForm.subjective.questionAfter,
|
|
score: drawerForm.subjective.score,
|
|
isPage: -1,
|
|
...obj,
|
|
},
|
|
});
|
|
}
|
|
break;
|
|
case 5:
|
|
// 其他
|
|
if (textList.value.filter((item) => item.checked).length) {
|
|
textTitle.set({
|
|
text: `${textList.value
|
|
.filter((item) => item.checked)
|
|
.map((item) => item.text)
|
|
.join("")}-反面定位点`,
|
|
});
|
|
fabricItem.set({
|
|
customFrom: {
|
|
title: textList.value
|
|
.filter((item) => item.checked)
|
|
.map((item) => item.text)
|
|
.join(""),
|
|
...obj,
|
|
},
|
|
});
|
|
} else {
|
|
ElMessage.error("请选择文字！");
|
|
return;
|
|
}
|
|
break;
|
|
}
|
|
changeDrawer(false);
|
|
} else {
|
|
if (!currentFabric.value) {
|
|
ctx.value.remove(fabricItem);
|
|
}
|
|
changeDrawer(false);
|
|
}
|
|
saveFabricData();
|
|
changeImgSrcIndex(imgSrcIndex.value);
|
|
}
|
|
currentFabric.value = null;
|
|
};
|
|
|
|
// 获取距离
|
|
const getOffsetTop = (
|
|
xNumber: number,
|
|
yNumber: number,
|
|
index: number,
|
|
top: number
|
|
): number => {
|
|
let offsetTop = 0;
|
|
const allNumber = [...Array(xNumber * yNumber).keys()];
|
|
Array.from({ length: Math.ceil(allNumber.length / xNumber) }, (_v: any, i) =>
|
|
allNumber.slice(i * xNumber, i * xNumber + xNumber)
|
|
).forEach((item: number[], itemIndex: number) => {
|
|
if (item.includes(index)) {
|
|
offsetTop = itemIndex;
|
|
}
|
|
});
|
|
return offsetTop * top;
|
|
};
|
|
|
|
// 客观题生成题号
|
|
const objectiveNumber = (
|
|
fabricItem: any,
|
|
rect: any,
|
|
rectWidth: number,
|
|
rectHeight: number
|
|
): void => {
|
|
// 边距
|
|
const obj = {
|
|
fontSize: 12,
|
|
fill: "black",
|
|
fontWeight: "normal",
|
|
fabricId: cteatedNumber(),
|
|
backgroundColor: "transparent",
|
|
};
|
|
if (drawerForm.objective.range) {
|
|
// 竖向
|
|
for (let index = 0; index < drawerForm.objective.questionNumber; index++) {
|
|
let textNumber = 0 as any;
|
|
if (drawerForm.objective.questionBefore % 1 === 0) {
|
|
textNumber = drawerForm.objective.questionBefore++;
|
|
} else {
|
|
let before = drawerForm.objective.questionBefore.toString().split(".")[0] * 1;
|
|
let after = drawerForm.objective.questionBefore.toString().split(".")[1] * 1;
|
|
textNumber = `${before}.${after + index}`;
|
|
}
|
|
fabricItem.add(
|
|
new fabric.Text(`${textNumber}`, {
|
|
left:
|
|
rect.get("left") +
|
|
rectWidth * index +
|
|
rectWidth / 2 -
|
|
(drawerForm.objective.questionNumber + 1),
|
|
top: rect.get("top") + 4,
|
|
...obj,
|
|
})
|
|
);
|
|
}
|
|
} else {
|
|
// 横向
|
|
for (let index = 0; index < drawerForm.objective.questionNumber; index++) {
|
|
let textNumber = 0 as any;
|
|
if (drawerForm.objective.questionBefore % 1 === 0) {
|
|
textNumber = drawerForm.objective.questionBefore++;
|
|
} else {
|
|
let before = drawerForm.objective.questionBefore.toString().split(".")[0] * 1;
|
|
let after = drawerForm.objective.questionBefore.toString().split(".")[1] * 1;
|
|
textNumber = `${before}.${after + index}`;
|
|
}
|
|
fabricItem.add(
|
|
new fabric.Text(`${textNumber}`, {
|
|
left: rect.get("left") + 4,
|
|
top:
|
|
rect.get("top") +
|
|
rectHeight * index +
|
|
rectHeight / 2 -
|
|
(drawerForm.objective.questionNumber + 1),
|
|
...obj,
|
|
})
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
// 清空小矩形
|
|
const deleteSmallRect = (index?: number): void => {
|
|
if (currentFabric.value) {
|
|
const maxRect = currentFabric.value.target
|
|
.getObjects()
|
|
.reduce(function (currentMax: any, obj: any) {
|
|
return obj.get("width") > currentMax.get("width") ? obj : currentMax;
|
|
}, currentFabric.value.target.getObjects()[0]);
|
|
const deleteRectArr = currentFabric.value.target
|
|
.getObjects()
|
|
.filter(
|
|
(item: any) =>
|
|
item.get("type") === "rect" && item.get("fabricId") !== maxRect.get("fabricId")
|
|
);
|
|
currentFabric.value.target.remove(...deleteRectArr);
|
|
switch (index) {
|
|
case 3:
|
|
// 客观题删除题号
|
|
const allDelText = currentFabric.value.target
|
|
.getObjects()
|
|
.filter(
|
|
(item: any) =>
|
|
item.get("type") === "text" &&
|
|
!textFabricList.value.includes(item.get("text"))
|
|
);
|
|
currentFabric.value.target.remove(...allDelText);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
const getIndex = (): number => {
|
|
function findFirstNonSequentialFromOne(arr: number[]) {
|
|
arr.sort((a: number, b: number) => a - b);
|
|
if (arr[0] !== 1) {
|
|
return 1;
|
|
}
|
|
let expected = 1;
|
|
for (let i = 0; i < arr.length; i++) {
|
|
if (arr[i] === expected) {
|
|
expected++;
|
|
} else if (arr[i] > expected) {
|
|
return expected;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
let numberList = getAllQuestionNumerPage().map((item: any) => {
|
|
return item.customFrom.isPage;
|
|
});
|
|
let index = 1 as number | null;
|
|
if (findFirstNonSequentialFromOne(numberList)) {
|
|
index = findFirstNonSequentialFromOne(numberList);
|
|
} else {
|
|
index = numberList.length ? numberList[numberList.length - 1] + 1 : 1;
|
|
}
|
|
return index || 1;
|
|
};
|
|
|
|
// 获取所有主观题(必须是分页题)
|
|
const getAllQuestionNumerPage = (): any => {
|
|
let allQuestion = [] as any;
|
|
function appendFabricQuestions(list: any, index: number): void {
|
|
allQuestion.push(
|
|
...list[index].point.filter(
|
|
(row: any) => row.customFrom && row.customFrom.isPage >= 0
|
|
)
|
|
);
|
|
}
|
|
appendFabricQuestions(templateInfo.headList, 4);
|
|
appendFabricQuestions(templateInfo.tailsList, 4);
|
|
return allQuestion;
|
|
};
|
|
|
|
// 获取所有题目(不包含分页题)
|
|
const getAllQuestionNumer = (): any => {
|
|
let allQuestion = [] as any;
|
|
function appendFabricQuestions(list: any, index: number): void {
|
|
allQuestion.push(
|
|
...list[index].point.filter(
|
|
(row: any) =>
|
|
row.customFrom && (!row.customFrom.isPage || row.customFrom.isPage === -1)
|
|
)
|
|
);
|
|
}
|
|
appendFabricQuestions(templateInfo.headList, 3);
|
|
appendFabricQuestions(templateInfo.headList, 4);
|
|
appendFabricQuestions(templateInfo.tailsList, 3);
|
|
appendFabricQuestions(templateInfo.tailsList, 4);
|
|
return allQuestion;
|
|
};
|
|
|
|
// 获取当前最大题号
|
|
const getQuestionNumer = (): number => {
|
|
let allQuestionNumer = getAllQuestionNumer().filter((item: any) => {
|
|
return (item.customFrom.questionBefore * 1) % 1 === 0;
|
|
});
|
|
return allQuestionNumer.length
|
|
? Math.max(
|
|
...allQuestionNumer.map((item: any) => item.customFrom.questionAfter * 1)
|
|
) + 1
|
|
: 1;
|
|
};
|
|
|
|
// 判断客观题主观题题目是否重复
|
|
const isQuestionNumerRepeat = (): boolean => {
|
|
let allQuestionNumer = getAllQuestionNumer().map((item: any) => {
|
|
return {
|
|
start: item.customFrom.questionBefore * 1,
|
|
end: item.customFrom.questionAfter * 1,
|
|
};
|
|
});
|
|
|
|
// 题号是否重叠
|
|
function hasOverlap(ranges: any): boolean {
|
|
function isOverlapping(range1: any, range2: any) {
|
|
const { start: start1, end: end1 } = range1;
|
|
const { start: start2, end: end2 } = range2;
|
|
return Math.max(start1, start2) <= Math.min(end1, end2);
|
|
}
|
|
for (let i = 0; i < ranges.length; i++) {
|
|
for (let j = i + 1; j < ranges.length; j++) {
|
|
if (isOverlapping(ranges[i], ranges[j])) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// 题号是否重复
|
|
function hasIdenticalObjects(arrayOfObjects: any): boolean {
|
|
const objectHashes = new Map();
|
|
for (const obj of arrayOfObjects) {
|
|
const jsonString = JSON.stringify(obj);
|
|
if (objectHashes.has(jsonString)) {
|
|
return true;
|
|
}
|
|
objectHashes.set(jsonString, true);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
if (currentFabric.value) {
|
|
let item = currentFabric.value.target;
|
|
let itemQuestionNumerIndex = allQuestionNumer.findIndex(
|
|
(row: any) =>
|
|
row.start === item.customFrom.questionBefore &&
|
|
row.end === item.customFrom.questionAfter
|
|
);
|
|
allQuestionNumer.splice(itemQuestionNumerIndex, 2, {
|
|
start:
|
|
navListIndex.value === 3
|
|
? drawerForm.objective.questionBefore
|
|
: drawerForm.subjective.questionBefore,
|
|
end:
|
|
navListIndex.value === 3
|
|
? drawerForm.objective.questionAfter
|
|
: drawerForm.subjective.questionAfter,
|
|
});
|
|
} else {
|
|
allQuestionNumer.push({
|
|
start:
|
|
navListIndex.value === 3
|
|
? drawerForm.objective.questionBefore
|
|
: drawerForm.subjective.questionBefore,
|
|
end:
|
|
navListIndex.value === 3
|
|
? drawerForm.objective.questionAfter
|
|
: drawerForm.subjective.questionAfter,
|
|
});
|
|
}
|
|
|
|
if (hasOverlap(allQuestionNumer) || hasIdenticalObjects(allQuestionNumer)) {
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
// 修改考试类型
|
|
const changeExamType = (type: number): void => {
|
|
if (isLockStatus.value) {
|
|
ElMessage.error("已锁定，无法修改！");
|
|
return;
|
|
}
|
|
drawerForm.examId.examType = type;
|
|
};
|
|
|
|
// 修改默认题号
|
|
const changeQuestion = (e?: any): void => {
|
|
if (typeof e === "number") {
|
|
if (e % 1 === 0) {
|
|
drawerForm.objective.questionAfter =
|
|
(e || 1) + drawerForm.objective.questionNumber - 1;
|
|
} else {
|
|
let decimalPointBeforeNumber = Number(e.toString().split(".")[1]);
|
|
let decimalPointAfterNumber = Number(e.toString().split(".")[0]);
|
|
drawerForm.objective.questionAfter = Number(
|
|
decimalPointAfterNumber +
|
|
"." +
|
|
(decimalPointBeforeNumber + drawerForm.objective.questionNumber - 1)
|
|
);
|
|
}
|
|
} else {
|
|
if (drawerForm.objective.questionBefore % 1 === 0) {
|
|
drawerForm.objective.questionAfter =
|
|
drawerForm.objective.questionBefore + drawerForm.objective.questionNumber - 1;
|
|
} else {
|
|
let decimalPointBeforeNumber = Number(
|
|
drawerForm.objective.questionBefore.toString().split(".")[1]
|
|
);
|
|
let decimalPointAfterNumber = Number(
|
|
drawerForm.objective.questionBefore.toString().split(".")[0]
|
|
);
|
|
drawerForm.objective.questionAfter = Number(
|
|
decimalPointAfterNumber +
|
|
"." +
|
|
(decimalPointBeforeNumber + drawerForm.objective.questionNumber - 1)
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
// 修改客观题题型
|
|
const changeObjectiveQuestionType = (item: { value: number; text: string }): void => {
|
|
if (isLockStatus.value) {
|
|
ElMessage.error("已锁定，无法修改！");
|
|
return;
|
|
}
|
|
if (navListIndex.value === 3) {
|
|
drawerForm.objective.questionTypeValue = item.value;
|
|
drawerForm.objective.optionNumber =
|
|
item.value === 2 ? 2 : drawerForm.objective.optionNumber;
|
|
} else {
|
|
drawerForm.subjective.questionTypeValue = item.value;
|
|
}
|
|
};
|
|
|
|
// 设置导航栏文字
|
|
const setNavTitle = (): void => {
|
|
const fabricItem = getFabricItem();
|
|
switch (navListIndex.value) {
|
|
case 0:
|
|
const fabricPositionTitle = [] as string[];
|
|
fabricItem.forEach((row: any) => {
|
|
row.forEachObject((item: any) => {
|
|
if (positionTitle.value.includes(item.get("text"))) {
|
|
fabricPositionTitle.push(item.get("text"));
|
|
}
|
|
});
|
|
});
|
|
let str = findFirstMissingValue(fabricPositionTitle),
|
|
msg = "";
|
|
placeholderText.value = `提示：请确保框选区域略大于定位点黑色图块，每面均需框选。`;
|
|
if (templateInfo.imgSrc.length > 1) {
|
|
if (
|
|
templateInfo.headList[navListIndex.value].point.length === 4 &&
|
|
templateInfo.tailsList[navListIndex.value].point.length === 4
|
|
) {
|
|
msg = "定位点已框选完毕。";
|
|
}
|
|
} else {
|
|
if (templateInfo.headList[navListIndex.value].point.length === 4) {
|
|
msg = "定位点已框选完毕。";
|
|
}
|
|
}
|
|
operationText.value = str
|
|
? `当前需框选：${imgSrcIndex.value ? "反面" : "正面"}${str}。`
|
|
: msg
|
|
? msg
|
|
: `${imgSrcIndex.value ? "反面" : "正面"}定位点已框选。`;
|
|
break;
|
|
case 1:
|
|
placeholderText.value = `提示：请框选一行较长的文字，每面均需框选。`;
|
|
operationText.value = `${
|
|
!fabricItem.length ? "当前需框选：学科。" : "学科已框选。"
|
|
}`;
|
|
break;
|
|
case 2:
|
|
placeholderText.value = `提示：请框选完整的考号区域，仅正面需要框选。`;
|
|
operationText.value = `${
|
|
!fabricItem.length ? "当前需框选：考号。" : "考号已框选。"
|
|
}`;
|
|
break;
|
|
case 3:
|
|
placeholderText.value = `提示：请框选题号;不同小块(一般为5题)，不同题型分开框选。`;
|
|
operationText.value = ``;
|
|
break;
|
|
case 4:
|
|
placeholderText.value = `提示：请确保框选区域略大于作答区域。`;
|
|
operationText.value = ``;
|
|
break;
|
|
case 5:
|
|
placeholderText.value = ``;
|
|
operationText.value = ``;
|
|
break;
|
|
}
|
|
};
|
|
|
|
// 获取定位胆标题
|
|
const findFirstMissingValue = (arr: string[]): string => {
|
|
const setArr2 = new Set(arr);
|
|
for (const value of positionTitle.value) {
|
|
if (!setArr2.has(value)) {
|
|
return value;
|
|
}
|
|
}
|
|
return "";
|
|
};
|
|
|
|
// 按钮状态
|
|
const showImage = (index: number): boolean => {
|
|
const headList = templateInfo.headList[index].point.length;
|
|
const tailsList = templateInfo.tailsList[index].point.length;
|
|
switch (index) {
|
|
case 0:
|
|
if (templateInfo.imgSrc.length > 1) {
|
|
if (headList === 4 && tailsList === 4) {
|
|
return true;
|
|
}
|
|
} else {
|
|
if (headList === 4) {
|
|
return true;
|
|
}
|
|
}
|
|
break;
|
|
case 1:
|
|
case 2:
|
|
if (headList > 0 || tailsList > 0) {
|
|
return true;
|
|
}
|
|
break;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
// 获取画布允许拖拽的范围
|
|
const getCalculateRectangleSize = () => {
|
|
function calculateRectangleSize(pointA: any, pointB: any, pointC: any): any {
|
|
// 定义点的坐标
|
|
let x1 = Math.min(pointA.x, pointB.x);
|
|
let x2 = Math.max(pointA.x, pointB.x);
|
|
let y1 = Math.min(pointA.y, pointC.y);
|
|
let y2 = Math.max(pointA.y, pointC.y);
|
|
// 计算矩形的宽度和高度
|
|
let width = x2 - x1;
|
|
let height = y2 - y1 + 20;
|
|
return { width, height, left: pointA.x, top: pointA.y };
|
|
}
|
|
const templateInfoItem = getTemplateInfo(true);
|
|
const rectPositionArr = [] as any;
|
|
templateInfoItem[0].point.forEach((item: any) => {
|
|
let rectPosition = item.children.find((row: any) => {
|
|
return row.rectPosition;
|
|
}).rectPosition;
|
|
let textPosition = item.children.find((row: any) => {
|
|
return positionTitle.value.includes(row.text);
|
|
}).text;
|
|
if (rectPosition) {
|
|
rectPositionArr.push({
|
|
rectPosition,
|
|
textPosition,
|
|
});
|
|
}
|
|
});
|
|
|
|
const sortedArray = [] as any;
|
|
for (let index = 0; index < positionTitle.value.length; index++) {
|
|
const item = positionTitle.value[index];
|
|
const rectPostItem = rectPositionArr.find(
|
|
(item1: any) => item1.textPosition === item
|
|
);
|
|
if (rectPostItem) {
|
|
sortedArray.push(rectPostItem);
|
|
}
|
|
}
|
|
return calculateRectangleSize(
|
|
sortedArray[0].rectPosition,
|
|
sortedArray[1].rectPosition,
|
|
sortedArray[2].rectPosition
|
|
);
|
|
};
|
|
|
|
// 设置边框线
|
|
const setBoderLine = (): any => {
|
|
const templateInfoItem = getTemplateInfo(true);
|
|
if (templateInfoItem[0].point.length === 4) {
|
|
const size = getCalculateRectangleSize();
|
|
return {
|
|
border: "1px dashed red",
|
|
width: `${size.width}px`,
|
|
height: `${size.height}px`,
|
|
top: `${size.top}px`,
|
|
left: `${size.left}px`,
|
|
position: "absolute",
|
|
zIndex: 1,
|
|
};
|
|
}
|
|
return false;
|
|
};
|
|
|
|
// 右键添加菜单
|
|
const onContextmenu = (e: any): void => {
|
|
const target = ctx.value.findTarget(e);
|
|
const mousePos = getCanvasMousePos(e);
|
|
contextmenu.value = target;
|
|
if (target) {
|
|
nextTick(() => {
|
|
const contextmenuDom = document.getElementsByClassName(
|
|
"menu-button"
|
|
)[0] as HTMLElement;
|
|
contextmenuDom.style.left = `${mousePos.x}px`;
|
|
contextmenuDom.style.top = `${mousePos.y}px`;
|
|
});
|
|
}
|
|
};
|
|
|
|
// 设置层级
|
|
const changeZindex = (bool: boolean): void => {
|
|
if (bool) {
|
|
ctx.value.bringToFront(contextmenu.value);
|
|
} else {
|
|
ctx.value.sendToBack(contextmenu.value);
|
|
}
|
|
ctx.value.discardActiveObject();
|
|
ctx.value.renderAll();
|
|
contextmenu.value = null;
|
|
ElMessage.success("设置成功");
|
|
};
|
|
|
|
// 是否可以移出视图
|
|
const isMoveOutView = (): boolean => {
|
|
let row = [],
|
|
bool = true;
|
|
if (ctx.value.getActiveObject()) {
|
|
row = ctx.value
|
|
.getActiveObject()
|
|
.getObjects()
|
|
.filter(
|
|
(obj: any) => obj.get("text") && obj.get("text").indexOf("反面定位点") >= 0
|
|
);
|
|
}
|
|
if (row.length || (otherType.value === 3 && !ctx.value.getActiveObject())) {
|
|
bool = false;
|
|
} else {
|
|
bool = true;
|
|
}
|
|
return (
|
|
(![0, 1, 5].includes(navListIndex.value) || (navListIndex.value === 5 && bool)) &&
|
|
templateInfo.hasPosition
|
|
);
|
|
};
|
|
|
|
// 图形移动限制操作
|
|
const isDragOutCanvas = (bool: boolean): void => {
|
|
let obj = ctx.value.getActiveObject();
|
|
if (bool) {
|
|
const restrictedArea = {
|
|
...getCalculateRectangleSize(),
|
|
};
|
|
const newX = Math.max(
|
|
restrictedArea.left,
|
|
Math.min(obj.left, restrictedArea.left + restrictedArea.width - obj.width)
|
|
);
|
|
const newY = Math.max(
|
|
restrictedArea.top,
|
|
Math.min(obj.top, restrictedArea.top + restrictedArea.height - obj.height)
|
|
);
|
|
if (newX !== obj.left || newY !== obj.top) {
|
|
obj.set({ left: newX, top: newY });
|
|
}
|
|
} else {
|
|
if (obj.left < 0) {
|
|
obj.left = 0;
|
|
}
|
|
if (obj.top < 0) {
|
|
obj.top = 0;
|
|
}
|
|
if (obj.left + obj.width > 0 + ctx.value.getWidth()) {
|
|
obj.left = ctx.value.getWidth() - obj.width;
|
|
}
|
|
if (obj.top + obj.height > 0 + ctx.value.getHeight()) {
|
|
obj.top = ctx.value.getHeight() - obj.height;
|
|
}
|
|
}
|
|
};
|
|
|
|
// 设置题目列表
|
|
const setQuestionList = (): void => {
|
|
templateInfo.questionList = [];
|
|
let allQuestion = [] as any;
|
|
function appendFabricQuestions(list: any, index: number): void {
|
|
allQuestion.push(
|
|
...list[index].point.filter(
|
|
(row: any) => row.customFrom && (row.fabricType === 3 || row.fabricType === 4)
|
|
)
|
|
);
|
|
}
|
|
appendFabricQuestions(templateInfo.headList, 3);
|
|
appendFabricQuestions(templateInfo.headList, 4);
|
|
appendFabricQuestions(templateInfo.tailsList, 3);
|
|
appendFabricQuestions(templateInfo.tailsList, 4);
|
|
templateInfo.questionList.push(...allQuestion);
|
|
};
|
|
|
|
// 修改数据
|
|
const changeData = (): any => {
|
|
function divideByTwoProperties(array: any, property1Key: string, property2Key: string) {
|
|
const categoriesMap = new Map();
|
|
array.forEach((item: any) => {
|
|
const value1 = item[property1Key];
|
|
const value2 = item[property2Key];
|
|
const key = `${value1}-${value2}`;
|
|
|
|
if (!categoriesMap.has(key)) {
|
|
categoriesMap.set(key, []);
|
|
}
|
|
categoriesMap.get(key).push(item);
|
|
});
|
|
|
|
return Array.from(categoriesMap.values());
|
|
}
|
|
const data = [] as any;
|
|
templateInfo.otherData.forEach((item: any, index: number) => {
|
|
data.push({
|
|
id: item.id,
|
|
index: index + 1,
|
|
width: imgDom.value.clientWidth,
|
|
height: imgDom.value.clientHeight,
|
|
tempData: index === 0 ? templateInfo.headList : templateInfo.tailsList,
|
|
from: {
|
|
positioningPoint: {},
|
|
subjectPoint: {},
|
|
examIDPoint: {},
|
|
objectiveQuestionsPoint: {},
|
|
subjectiveQuestionsPoint: {},
|
|
otherPoint: {},
|
|
},
|
|
});
|
|
});
|
|
data.forEach((item: any) => {
|
|
item.tempData[0].point = item.tempData[0].point.sort((a: any, b: any) => {
|
|
return (
|
|
positionTitle.value.indexOf(a.customFrom.title) -
|
|
positionTitle.value.indexOf(b.customFrom.title)
|
|
);
|
|
});
|
|
item.from.positioningPoint = item.tempData[0].point.map((row: any) => {
|
|
return row.customFrom;
|
|
});
|
|
item.from.subjectPoint =
|
|
item.tempData[1].point.length == 1 ? item.tempData[1].point[0].customFrom : {};
|
|
item.from.examIDPoint = item.tempData[2].point.map((row: any) => {
|
|
return {
|
|
...row.customFrom,
|
|
width: row.width,
|
|
height: row.height - 36.16,
|
|
top: row.top + 19,
|
|
left: row.left,
|
|
};
|
|
});
|
|
item.from.objectiveQuestionsPoint = item.tempData[3].point.map((row: any) => {
|
|
return {
|
|
...row.customFrom,
|
|
width: row.width,
|
|
height: row.height - 36.16,
|
|
top: row.top + 19,
|
|
left: row.left,
|
|
};
|
|
});
|
|
item.from.subjectiveQuestionsPoint = item.tempData[4].point.map((row: any) => {
|
|
return {
|
|
...row.customFrom,
|
|
width: row.width,
|
|
height: row.height - 36.16,
|
|
top: row.top + 19,
|
|
left: row.left,
|
|
};
|
|
});
|
|
item.from.otherPoint = item.tempData[5].point.map((row: any) => {
|
|
return {
|
|
...row.customFrom,
|
|
width: row.width,
|
|
height: row.height - 36.16 / 2,
|
|
top: row.top + 19,
|
|
left: row.left,
|
|
};
|
|
});
|
|
divideByTwoProperties(
|
|
item.from.subjectiveQuestionsPoint,
|
|
"questionAfter",
|
|
"questionBefore"
|
|
).forEach((row: any) => {
|
|
if (row.length > 1) {
|
|
let findItem = row.find((i: any) => i.isPage === -1);
|
|
findItem.isPage = 0;
|
|
} else {
|
|
row[0].isPage = -1;
|
|
}
|
|
});
|
|
});
|
|
return data;
|
|
};
|
|
|
|
// 保存
|
|
const btnClick = (str: string): void => {
|
|
const data = changeData().map((item: any) => {
|
|
return {
|
|
...item,
|
|
tempData: JSON.stringify(item.tempData),
|
|
};
|
|
});
|
|
let msg = "";
|
|
if (templateInfo.hasPosition) {
|
|
if (templateInfo.imgSrc.length === 2) {
|
|
if (
|
|
templateInfo.headList[0].point.length !== 4 ||
|
|
templateInfo.tailsList[0].point.length !== 4
|
|
) {
|
|
msg = "定位点框选完成才能保存！";
|
|
}
|
|
} else {
|
|
if (templateInfo.headList[0].point.length !== 4) {
|
|
msg = "定位点框选完成才能保存！";
|
|
}
|
|
}
|
|
}
|
|
if (msg) {
|
|
ElMessage.error(msg);
|
|
return;
|
|
}
|
|
if (str === "save") {
|
|
save(true);
|
|
} else {
|
|
LockListRef.value.getData(data);
|
|
}
|
|
};
|
|
|
|
// 锁定
|
|
const lock = async (): Promise<void> => {
|
|
await save();
|
|
GetLock(router.currentRoute.value.query.mid as string).then((res: any) => {
|
|
if (res.code === 200) {
|
|
ElMessage.success("锁定成功");
|
|
isLockStatus.value = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// 保存
|
|
const save = async (isShow: boolean = false): Promise<void> => {
|
|
const data = changeData().map((item: any) => {
|
|
return {
|
|
...item,
|
|
tempData: JSON.stringify(item.tempData),
|
|
};
|
|
});
|
|
PostSave({
|
|
templateData: data,
|
|
mid: router.currentRoute.value.query.mid,
|
|
}).then((res: any) => {
|
|
if (res.code === 200) {
|
|
if (isShow) {
|
|
ElMessage.success("保存成功");
|
|
}
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@mixin flexAlignCenter($align-center: "center") {
|
|
display: flex;
|
|
align-items: #{$align-center};
|
|
}
|
|
|
|
.warp {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: auto;
|
|
min-width: 1200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&-title {
|
|
background-color: #2d8cf0;
|
|
line-height: 60px;
|
|
height: 60px;
|
|
padding: 0 40px;
|
|
box-sizing: border-box;
|
|
color: white;
|
|
font-size: var(--ft20);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&-nav {
|
|
flex-shrink: 0;
|
|
z-index: 1;
|
|
|
|
&-tab {
|
|
@include flexAlignCenter();
|
|
justify-content: space-between;
|
|
height: 60px;
|
|
padding: 0 40px;
|
|
background-color: white;
|
|
box-shadow: 0px 0px 6px 0px #0000001a;
|
|
|
|
&-list {
|
|
@include flexAlignCenter();
|
|
|
|
> div {
|
|
@include flexAlignCenter();
|
|
cursor: pointer;
|
|
|
|
> span {
|
|
color: #727272;
|
|
font-size: var(--ft16);
|
|
}
|
|
|
|
> img {
|
|
margin: 0 17px;
|
|
}
|
|
|
|
.active {
|
|
font-weight: bold;
|
|
color: #2d8cf0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-delete {
|
|
@include flexAlignCenter();
|
|
cursor: pointer;
|
|
|
|
> span {
|
|
color: #ff6565;
|
|
font-size: var(--ft16);
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
@include flexAlignCenter();
|
|
border-bottom: 1px solid #e1e1e1;
|
|
padding: 10px 40px;
|
|
box-sizing: border-box;
|
|
flex-shrink: 0;
|
|
|
|
&-text {
|
|
color: #767676;
|
|
font-size: var(--ft14);
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&-operation {
|
|
flex-shrink: 0;
|
|
margin-left: 10px;
|
|
@include flexAlignCenter();
|
|
|
|
$color: #2d8cf0;
|
|
|
|
&-btn {
|
|
@include flexAlignCenter();
|
|
|
|
> div {
|
|
font-weight: bold;
|
|
font-size: var(--ft14);
|
|
width: 80px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
margin-right: 10px;
|
|
background-color: lighten($color, 10%);
|
|
color: #fff;
|
|
|
|
&:hover {
|
|
background-color: darken($color, 1%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: darken($color, 6%);
|
|
}
|
|
|
|
&:last-child {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background-color: darken($color, 8%);
|
|
}
|
|
}
|
|
|
|
&-other {
|
|
margin: 0 20px;
|
|
|
|
> div {
|
|
font-weight: bold;
|
|
font-size: var(--ft14);
|
|
line-height: 30px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
background-color: darken($color, 8%);
|
|
color: #fff;
|
|
padding: 0 20px;
|
|
|
|
&:hover {
|
|
background-color: lighten($color, 10%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: darken($color, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-icon {
|
|
@include flexAlignCenter();
|
|
|
|
> img:nth-child(1) {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
> img {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
flex-grow: 1;
|
|
background-color: rgb(242, 242, 242);
|
|
@include flexAlignCenter("flex-start");
|
|
|
|
&-left {
|
|
flex-grow: 1;
|
|
width: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
|
|
&-box {
|
|
height: 78vh;
|
|
width: 100%;
|
|
overflow: auto;
|
|
|
|
@mixin isPageType($type) {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
> #zoom-div {
|
|
margin: 0 auto;
|
|
@if $type == "A3" {
|
|
width: 1570px;
|
|
} @else {
|
|
width: 1200px;
|
|
}
|
|
|
|
height: auto;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
transform-origin: left top;
|
|
position: relative;
|
|
|
|
.menu-button {
|
|
border: 1px reds solid;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px #ccc solid;
|
|
background-color: white;
|
|
|
|
> div {
|
|
padding: 0 30px;
|
|
border-bottom: 1px #ccc solid;
|
|
cursor: pointer;
|
|
line-height: 30px;
|
|
font-size: var(--ft14);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
> img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
:deep(.canvas-container) {
|
|
position: absolute !important;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.A4 {
|
|
@include isPageType("A4");
|
|
}
|
|
|
|
.A3 {
|
|
@include isPageType("A3");
|
|
}
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
background-color: white;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 300px;
|
|
height: 100%;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
|
|
&-info {
|
|
flex-grow: 1;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&-fb {
|
|
color: #8b8b8b;
|
|
font-size: var(--ft16);
|
|
margin-bottom: 12px;
|
|
|
|
> span {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
&-table {
|
|
margin: 0 0 40px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
> :deep(.el-button) {
|
|
margin: 0 4px 0 0;
|
|
|
|
&:last-child {
|
|
margin: 0 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.drawer-custom-style) {
|
|
.drawer-custom-style-body {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
&-content {
|
|
height: 90%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
&-footer {
|
|
@include flexAlignCenter();
|
|
justify-content: center;
|
|
height: 8%;
|
|
}
|
|
|
|
.examId {
|
|
> div {
|
|
@include flexAlignCenter();
|
|
margin-bottom: 10px;
|
|
|
|
> span {
|
|
color: #727272;
|
|
font-size: var(--ft14);
|
|
}
|
|
}
|
|
|
|
.full-filling {
|
|
flex-direction: column;
|
|
|
|
> div {
|
|
border: 1px #727272 solid;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
|
|
> div {
|
|
@include flexAlignCenter();
|
|
justify-content: center;
|
|
|
|
> span {
|
|
border: 1px #727272 solid;
|
|
width: 30px;
|
|
text-align: center;
|
|
font-size: var(--ft14);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bar-code {
|
|
flex-direction: column;
|
|
|
|
> div {
|
|
border: 1px #727272 dashed;
|
|
box-sizing: border-box;
|
|
padding: 40px;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
|
|
> div {
|
|
border: 1px #727272 dashed;
|
|
height: 200px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
line-height: 200px;
|
|
background-color: #e1e1e1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.objective {
|
|
> div {
|
|
@include flexAlignCenter();
|
|
margin-bottom: 10px;
|
|
|
|
> span {
|
|
color: #727272;
|
|
font-size: var(--ft14);
|
|
text-align: right;
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
.syt-row {
|
|
flex-direction: column;
|
|
|
|
> span {
|
|
text-align: center;
|
|
}
|
|
|
|
> div {
|
|
border: 1px #727272 solid;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
overflow-x: auto;
|
|
|
|
> div {
|
|
@include flexAlignCenter();
|
|
justify-content: center;
|
|
|
|
> span {
|
|
&:first-child {
|
|
font-size: var(--ft12);
|
|
margin: 0 8px 4px 0;
|
|
width: 30px;
|
|
text-align: right;
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
border: 1px #727272 solid;
|
|
width: 14px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
font-size: var(--ft12);
|
|
margin: 0 4px 4px 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.syt-column {
|
|
flex-direction: column;
|
|
|
|
> span {
|
|
text-align: center;
|
|
}
|
|
|
|
> div {
|
|
border: 1px #727272 solid;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
overflow-x: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: start;
|
|
|
|
> div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: 0 4px 4px 0;
|
|
|
|
> span {
|
|
&:first-child {
|
|
font-size: var(--ft12);
|
|
text-align: center;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
border: 1px #727272 solid;
|
|
width: 14px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
font-size: var(--ft12);
|
|
margin: 4px 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.subjective {
|
|
> div {
|
|
@include flexAlignCenter();
|
|
margin-bottom: 10px;
|
|
|
|
> span {
|
|
color: #727272;
|
|
font-size: var(--ft14);
|
|
text-align: right;
|
|
width: 80px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|