|
@@ -381,6 +381,7 @@ export default {
|
|
|
];
|
|
|
},
|
|
|
async mounted() {
|
|
|
+ debugger;
|
|
|
await this.init();
|
|
|
await this.leftClick(0);
|
|
|
this.getDetail();
|
|
@@ -409,23 +410,43 @@ export default {
|
|
|
},
|
|
|
initList() {
|
|
|
if (this.paperInfo.questions.length > 0) {
|
|
|
- this.list = this.paperInfo.questions.map((item) => {
|
|
|
- return {
|
|
|
- id: item.id,
|
|
|
- order: item.qno,
|
|
|
- name: item.sqno,
|
|
|
- // page: item.page,
|
|
|
- ele: item.points.map((point) => {
|
|
|
- return {
|
|
|
- sqno: item.sqno,
|
|
|
- img: this.getDetailCutImage(point),
|
|
|
- imgCss: this.getDetailCutImageCss(point, item.page),
|
|
|
- point: point,
|
|
|
- page: item.page,
|
|
|
- };
|
|
|
- }),
|
|
|
- };
|
|
|
- });
|
|
|
+ if (this.list.length <= 1) {
|
|
|
+ this.list = this.paperInfo.questions.map((item) => {
|
|
|
+ return {
|
|
|
+ id: item.id,
|
|
|
+ order: item.qno,
|
|
|
+ name: item.sqno,
|
|
|
+ // page: item.page,
|
|
|
+ ele: item.points.map((point) => {
|
|
|
+ return {
|
|
|
+ sqno: item.sqno,
|
|
|
+ img: this.getDetailCutImage(point),
|
|
|
+ imgCss: this.getDetailCutImageCss(point, item.page),
|
|
|
+ point: point,
|
|
|
+ page: item.page,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.list = this.list.map((item) => {
|
|
|
+ return {
|
|
|
+ id: item.id,
|
|
|
+ order: item.qno,
|
|
|
+ name: item.sqno,
|
|
|
+ // page: item.page,
|
|
|
+ ele: item.points.map((point) => {
|
|
|
+ return {
|
|
|
+ sqno: item.sqno,
|
|
|
+ img: this.getDetailCutImage(point),
|
|
|
+ imgCss: this.getDetailCutImageCss(point, item.page),
|
|
|
+ point: point,
|
|
|
+ page: item.page,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
this.list = this.formatResData(this.list);
|
|
|
this.list.push({
|
|
@@ -442,13 +463,15 @@ export default {
|
|
|
name: "answer",
|
|
|
ele: [
|
|
|
{
|
|
|
- sqno:0,
|
|
|
+ sqno: 0,
|
|
|
img: this.getDetailCutImage(this.paperInfo.ans_points),
|
|
|
- imgCss: this.getDetailCutImageCss(this.paperInfo.ans_points,0),
|
|
|
+ imgCss: this.getDetailCutImageCss(
|
|
|
+ this.paperInfo.ans_points,
|
|
|
+ this.curLeftIndex
|
|
|
+ ),
|
|
|
point: this.paperInfo.ans_points,
|
|
|
page: 0,
|
|
|
- }
|
|
|
-
|
|
|
+ },
|
|
|
],
|
|
|
},
|
|
|
];
|
|
@@ -477,21 +500,8 @@ export default {
|
|
|
getDetailCutImageCss(point, pageIndex) {
|
|
|
var ratio = 326 / 1040; // 显示宽度/左边切图区域宽度
|
|
|
var ratio2 = (point.w * ratio) / 326; // 同比例扩大右边的预览图
|
|
|
- let standardPoint = this.paperInfo.points[this.curLeftIndex][0]; // 标准点
|
|
|
- // if (point.w * ratio > 340) {
|
|
|
- // return {
|
|
|
- // backgroundImage: `url(${this.leftImgs[pageIndex]})`,
|
|
|
- // width: `${(point.w * ratio) / 1.9}px`,
|
|
|
- // height: `${(point.h * ratio) / 1.9}px`,
|
|
|
- // backgroundSize: `${(this.naturalWidth * ratio) / 1.9}px`,
|
|
|
- // backgroundPositionX: `-${
|
|
|
- // ((point.x + standardPoint.x) * ratio) / 1.9
|
|
|
- // }px`,
|
|
|
- // backgroundPositionY: `-${
|
|
|
- // ((point.y + standardPoint.y) * ratio) / 1.9
|
|
|
- // }px`,
|
|
|
- // };
|
|
|
- // } else {
|
|
|
+ let standardPoint = this.paperInfo.points[0][0]; // 标准点
|
|
|
+
|
|
|
return {
|
|
|
backgroundImage: `url(${this.leftImgs[pageIndex]})`,
|
|
|
width: `${(point.w * ratio) / ratio2}px`,
|
|
@@ -742,7 +752,7 @@ export default {
|
|
|
addImg(ImgType) {
|
|
|
var imgType = ImgType ? 1 : 0;
|
|
|
let cropData = this.myCropper.getCropBoxData();
|
|
|
- let standardPoint = this.paperInfo.points[this.curLeftIndex][0];
|
|
|
+ let standardPoint = this.paperInfo.points[0][0];
|
|
|
let point = {
|
|
|
x: cropData.left / this.imgSize - standardPoint.x,
|
|
|
y: cropData.top / this.imgSize - standardPoint.y,
|
|
@@ -805,6 +815,7 @@ export default {
|
|
|
this.isDragging = false;
|
|
|
},
|
|
|
enter(item, img, css) {
|
|
|
+ debugger;
|
|
|
if (!img) {
|
|
|
this.previewIMG = "";
|
|
|
this.previewTop = "25%";
|
|
@@ -817,7 +828,9 @@ export default {
|
|
|
return;
|
|
|
}
|
|
|
if (!this.previewTop) {
|
|
|
- this.previewTop = "25%";
|
|
|
+ this.previewCss ={};
|
|
|
+ this.previewCss.transform = "scale(1.1)";
|
|
|
+ this.previewTop = "40%";
|
|
|
this.previewIMG = img;
|
|
|
}
|
|
|
},
|