|
|
@@ -3,7 +3,7 @@
|
|
|
<div class="question_header">
|
|
|
<div class="item_title">
|
|
|
<div class="item_step">1</div>
|
|
|
- 扫描标准答案：<el-button type="primary" style="width: 88px;">开始扫描</el-button>
|
|
|
+ 扫描标准答案：<el-button type="primary" @click="GotoScan()" :loading="scanLoading" style="width: 88px;">开始扫描</el-button>
|
|
|
<!-- <span class="preview_btn">预览</span> -->
|
|
|
<!-- <el-button style="margin-left: 10px;width: 116px;">引用试题结构</el-button> -->
|
|
|
</div>
|
|
|
@@ -138,6 +138,28 @@
|
|
|
</div>
|
|
|
<ChooseTemplate v-model="showChooseTemplate"></ChooseTemplate>
|
|
|
<EditorQuestion ref="enterStandardEdit" @AnswerEnter="EditorAnswerEnter"></EditorQuestion>
|
|
|
+ <div class="page_dialog">
|
|
|
+ <el-dialog title="扫描答案预览" v-model="showScanAnswer" width="940px" @close="CloseScanAnswer()">
|
|
|
+ <div class="max_height_650">
|
|
|
+ <div class="dialog_center">
|
|
|
+ <div class="pic_item_list">
|
|
|
+
|
|
|
+ <div v-for="(image, index) in imageFilesList" :key="index" class="pic_item_img_detail">
|
|
|
+
|
|
|
+
|
|
|
+ <img :src="image.url" />
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" style="width: 96px;" :loading="scanAnswerLoading" @click="EnterSubmit()">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
@@ -149,8 +171,8 @@ import EditorQuestion from './components/EditorQuestion.vue';
|
|
|
|
|
|
import { ElMessageBox,ElMessage } from 'element-plus'
|
|
|
import { getSmartQuestionList,getTemplateInfo,setQuestion,saveQuestion,deleteAllQuestion,deleteSingleQuestion} from '@/api/exam'
|
|
|
-
|
|
|
-
|
|
|
+import scanCommon from '@/utils/scanCommon.ts'
|
|
|
+import { useThrottleFn } from '@vueuse/core';
|
|
|
|
|
|
// 实例化 Store
|
|
|
const examStore = useExamStore()
|
|
|
@@ -188,7 +210,13 @@ const tableHeight = ref(400)// 表格高度
|
|
|
const answerList=['A','B','C','D','E','F','G','H','I','J','K']//答案列表
|
|
|
const tflist=['T','F']//判断题列表
|
|
|
|
|
|
-
|
|
|
+//扫描答案
|
|
|
+const scanLoading=ref(false);//开始扫描答案
|
|
|
+const uploadUrl=ref('');//扫描答案的上传的图片地址
|
|
|
+const examSubjectCode=ref('');//扫描答案的科目编号
|
|
|
+const showScanAnswer=ref(false);//扫描答案预览
|
|
|
+const imageFilesList=ref<any[]>([]);//扫描答案的图片列表
|
|
|
+const scanAnswerLoading=ref(false);//确定扫描答案loading
|
|
|
// 考试科目 ID
|
|
|
const examSubjectId = computed(() => {
|
|
|
return examStore.currentExam?.id
|
|
|
@@ -258,6 +286,11 @@ const TypeChange=(item:any)=>{
|
|
|
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+//确定扫描答案
|
|
|
+const EnterSubmit=()=>{
|
|
|
+
|
|
|
+}
|
|
|
//单选点击事件
|
|
|
const SingleClick=(item:any,answer:any)=>{
|
|
|
console.log("打印单选点击",item,answer)
|
|
|
@@ -400,6 +433,126 @@ const EditorSingle=(item:any)=>{
|
|
|
console.log("打印编辑单个题目",item)
|
|
|
enterStandardEdit.value.InitData(item);
|
|
|
}
|
|
|
+// 打开扫描仪器
|
|
|
+const GotoScan = useThrottleFn(() => {
|
|
|
+// showSelectType.value = 'scan';
|
|
|
+ scanLoading.value = true;
|
|
|
+// showScanAnswer.value=true;
|
|
|
+ StartScan();
|
|
|
+}, 5000);
|
|
|
+
|
|
|
+// 启动扫描
|
|
|
+const StartScan = () => {
|
|
|
+ scanCommon.init(async (res:any) => {
|
|
|
+ console.log("打印扫描返回的res", res);
|
|
|
+
|
|
|
+ if (res.action === 'scanTemplate') {
|
|
|
+ const img = new Image();
|
|
|
+ img.crossOrigin = 'Anonymous';
|
|
|
+
|
|
|
+ img.onload = () => {
|
|
|
+ console.log('图片宽度:', img.width);
|
|
|
+ console.log('图片高度:', img.height);
|
|
|
+
|
|
|
+ const paperInfo = {
|
|
|
+ width: img.width,
|
|
|
+ height: img.height
|
|
|
+ };
|
|
|
+
|
|
|
+ // 创建 canvas 来获取图片数据并转换为 File 对象
|
|
|
+ const canvas = document.createElement('canvas');
|
|
|
+ canvas.width = img.width;
|
|
|
+ canvas.height = img.height;
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+ console.log("加载图片ctx", ctx);
|
|
|
+ if (ctx) {
|
|
|
+ ctx.drawImage(img, 0, 0);
|
|
|
+
|
|
|
+ canvas.toBlob(async (blob) => {
|
|
|
+ if (blob) {
|
|
|
+ // 创建 File 对象
|
|
|
+ const file = new File([blob], res.name, {
|
|
|
+ type: blob.type || 'image/jpeg'
|
|
|
+ });
|
|
|
+
|
|
|
+ // 创建预览 URL
|
|
|
+ const imageUrl = URL.createObjectURL(file);
|
|
|
+
|
|
|
+ const fileObj = {
|
|
|
+ url: imageUrl,
|
|
|
+ file: file,
|
|
|
+ name: res.name,
|
|
|
+ pageInfo: JSON.stringify(paperInfo),
|
|
|
+ rotateAngle: 0
|
|
|
+ };
|
|
|
+
|
|
|
+ // 更新响应式数据
|
|
|
+ imageFilesList.value.push(fileObj);
|
|
|
+ showScanAnswer.value=true;
|
|
|
+ // paperInfoStr.value = JSON.stringify(paperInfo); // 假设你有一个 ref 叫 paperInfoStr
|
|
|
+ console.log("打印 imageFilesList", imageFilesList.value);
|
|
|
+ scanLoading.value = false;
|
|
|
+ }
|
|
|
+ }, 'image/jpeg');
|
|
|
+ } else {
|
|
|
+ ElMessage.error('无法获取画布上下文');
|
|
|
+ scanLoading.value = false;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ img.onerror = (error) => {
|
|
|
+ console.error('图片加载失败:', error);
|
|
|
+ ElMessage.error('图片加载失败');
|
|
|
+ scanLoading.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ img.src = res.url;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if (res.action === 'startScanTemplate') {
|
|
|
+ if (res.code === 502) {
|
|
|
+
|
|
|
+ scanLoading.value = false;
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if (res.code === 200) {
|
|
|
+ ElMessage.success("扫描仪启动成功");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }); // 跟扫描仪插件 websocket 连接
|
|
|
+
|
|
|
+ console.log("打印 VUE_APP_BASE_API", import.meta.env.VITE_APP_BASE_API); // Vue3/Vite 环境变量获取方式
|
|
|
+ console.log("打印上传图片地址", uploadUrl.value);
|
|
|
+
|
|
|
+ let json = {
|
|
|
+ "action": "scanTemplate", // scanTemplate 扫描模板指令
|
|
|
+ "batchNumber": 'template', // 模板信息
|
|
|
+ "subjectCode": examSubjectCode.value, // 科目编号
|
|
|
+ "paperSchema": 1, // 默认单面
|
|
|
+ "token": '', // token 信息
|
|
|
+ "dpi": 150, // dpi 参数
|
|
|
+ "useDriveUI": 0, // 默认不弹窗
|
|
|
+ "uploadUrl": '', // 图片上传地址
|
|
|
+ "jsonParam": '', // 后端使用的参数
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log("打印参数", json);
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log("打印发送的 send 参数", json);
|
|
|
+ // scanLoading.value = false;
|
|
|
+ scanCommon.send(JSON.stringify(json));
|
|
|
+ }, 2500);
|
|
|
+};
|
|
|
+
|
|
|
+//关闭扫描答案预览
|
|
|
+const CloseScanAnswer=()=>{
|
|
|
+ showScanAnswer.value = false;
|
|
|
+}
|
|
|
+
|
|
|
// 4. 计算高度的函数
|
|
|
const CalculateTableHeight = () => {
|
|
|
|
|
|
@@ -660,4 +813,7 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</style>
|
