diff --git a/src/pages/Home/index.vue b/src/pages/Home/index.vue index fdcf3bb..aa75b48 100644 --- a/src/pages/Home/index.vue +++ b/src/pages/Home/index.vue @@ -145,7 +145,7 @@ }} - + @@ -361,7 +361,7 @@
- 得分： + 每题分数：
- 得分： + 每题分数：
({ otherData: [], }); const isLock = ref(false); +const currentNavListIndex = ref(3); // 画布相关 const ctx = ref(null); const fabricGroup = ref(null); @@ -726,11 +727,12 @@ const currentFabric = ref(null); onMounted(() => { GetOcrDetail(router.currentRoute.value.query.mid as string).then((res: any) => { if (res.code === 200) { - templateInfo.name = res.data.mainName; - templateInfo.hasPosition = res.data.hasPosition; - templateInfo.type = res.data.paperType === 1 ? "A3" : "A4"; - templateInfo.otherData = res.data.detail; - res.data.detail.forEach((item: any, index: number) => { + const { mainName, hasPosition, paperType, detail } = res.data; + 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 @@ -747,31 +749,37 @@ onMounted(() => { } setQuestionList(); //回显试题 showFabricData(); //回显画布 + setStepClick(currentNavListIndex.value, false); //设置步骤 setNavTitle(); //设置导航栏文字 }); } }); }); + watch( () => templateInfo, (_new, _old) => { if (!_new.headList[2].point.length && !_new.tailsList[2].point.length) { isLock.value = true; + currentNavListIndex.value = 2; return; } if (!_new.headList[1].point.length && !_new.tailsList[1].point.length) { isLock.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) { isLock.value = true; + currentNavListIndex.value = 0; return; } } else { if (_new.headList[0].point.length !== 4) { isLock.value = true; + currentNavListIndex.value = 0; return; } } @@ -1094,14 +1102,18 @@ const createText = ( text: string, left: number, top: number, - backgroundColor: string = "rgba(0,0,0,0.5)" + 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: 16, - fill: "white", + fontSize, + fill, backgroundColor, + fontWeight, fabricId: cteatedNumber(), }); }; @@ -1177,13 +1189,14 @@ const createFabric = (): any[] => { case 1: case 5: return [titleText, deleteText]; + case 3: + return [deleteText, editText]; default: return [titleText, deleteText, editText]; } }; - // 切换步骤 -const setStepClick = (index: number): void => { +const setStepClick = (index: number, isElMessage: boolean = true): void => { if (navListIndex.value === index) { return; } @@ -1222,7 +1235,7 @@ const setStepClick = (index: number): void => { checkTemplateInfo(index); if (msg) { - ElMessage.error(msg); + if (isElMessage) ElMessage.error(msg); return; } if (index === 1) { @@ -1263,6 +1276,9 @@ const saveFabricData = (): void => { type: "text", text: child.get("text"), backgroundColor: child.get("backgroundColor"), + fill: child.get("fill"), + fontSize: child.get("fontSize"), + fontWeight: child.get("fontWeight"), ...childItem, }); } else { @@ -1566,11 +1582,12 @@ const showFabricData = (): void => { top: item.top, width: item.width, height: item.height, - fontSize: 16, - fill: "white", 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); @@ -1715,7 +1732,8 @@ const changeFabricPosition = (value: number, str: string): void => { maxRect.set("top", value / 2 - value); currentFabric.value.target.set(str, value + textList[0].height * 2); } - let rectWidth, rectHeight; + let rectWidth = 0, + rectHeight = 0; switch (navListIndex.value) { // 考号 case 2: @@ -1745,17 +1763,25 @@ const changeFabricPosition = (value: number, str: string): void => { // 客观题 let questionNumber = currentFabric.value.target.customFrom.questionNumber; let optionNumber = currentFabric.value.target.customFrom.optionNumber; - rectWidth = maxRect.get("width") / optionNumber; - rectHeight = maxRect.get("height") / questionNumber; + 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 % optionNumber) * rectWidth, + left: + maxRect.get("left") + + (index % (range ? questionNumber : optionNumber)) * rectWidth, top: maxRect.get("top") + - getOffsetTop(optionNumber, questionNumber, index, rectHeight), + getOffsetTop( + range ? questionNumber : optionNumber, + range ? optionNumber : questionNumber, + index, + rectHeight + ), stroke: "red", strokeWidth: 1, fill: "transparent", @@ -1765,6 +1791,35 @@ const changeFabricPosition = (value: number, str: string): void => { }) ); } + // 修改题号位置 + 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: // 主观题 @@ -1998,12 +2053,11 @@ const changeFabricInfo = (bool: boolean): void => { case 3: // 客观题 // 生成小格子 - function createdObjectiveRect(): void { - let rect = fabricItem - .getObjects() - .find((row: any) => row.get("type") === "rect"); - let rectWidth = rect.get("width") / drawerForm.objective.optionNumber; - let rectHeight = rect.get("height") / drawerForm.objective.questionNumber; + function createdObjectiveRect( + rect: any, + rectWidth: number, + rectHeight: number + ): void { for ( let index = 0; index < @@ -2014,12 +2068,20 @@ const changeFabricInfo = (bool: boolean): void => { new fabric.Rect({ left: rect.get("left") + - (index % drawerForm.objective.optionNumber) * rectWidth, + (index % + (drawerForm.objective.range + ? drawerForm.objective.questionNumber + : drawerForm.objective.optionNumber)) * + rectWidth, top: rect.get("top") + getOffsetTop( - drawerForm.objective.optionNumber, - drawerForm.objective.questionNumber, + drawerForm.objective.range + ? drawerForm.objective.questionNumber + : drawerForm.objective.optionNumber, + drawerForm.objective.range + ? drawerForm.objective.optionNumber + : drawerForm.objective.questionNumber, index, rectHeight ), @@ -2037,11 +2099,21 @@ const changeFabricInfo = (bool: boolean): void => { ElMessage.error("题目重复！"); return; } else { - deleteSmallRect(); - createdObjectiveRect(); - textTitle.set({ - text: `${drawerForm.objective.questionBefore}-${drawerForm.objective.questionAfter}`, - }); + 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, @@ -2054,6 +2126,7 @@ const changeFabricInfo = (bool: boolean): void => { ...obj, }, }); + objectiveNumber(fabricItem, rect, rectWidth, rectHeight); } break; @@ -2157,8 +2230,72 @@ const getOffsetTop = ( return offsetTop * top; }; +// 客观题生成题号 +const objectiveNumber = ( + fabricItem: any, + rect: any, + rectWidth: number, + rectHeight: number +): void => { + // 边距 + const obj = { + fontSize: 14, + fill: "black", + fontWeight: "bold", + fabricId: cteatedNumber(), + backgroundColor: "rgba(255,255,255,0.7)", + }; + 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 = (): void => { +const deleteSmallRect = (index?: number): void => { if (currentFabric.value) { const maxRect = currentFabric.value.target .getObjects() @@ -2172,6 +2309,19 @@ const deleteSmallRect = (): void => { 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; + } } };