update

src/views/papers/cutPaper.vue

@@ -8,7 +8,7 @@
     </div>
     <el-row :gutter="20" style="margin-bottom:10px;">
       <el-col :span="18">
-        <el-steps :active="stepNum" simple >
+        <el-steps :active="stepNum" simple>
           <el-step title="定标准点" icon="el-icon-edit" @click.native="stepNum=1"></el-step>
           <el-step title="考号区域" icon="el-icon-upload" @click.native="stepNum=2"></el-step>
           <el-step title="客观题" icon="el-icon-picture" @click.native="stepNum=3"></el-step>
@@ -23,8 +23,9 @@
     </el-row>
     <el-row>
       <el-col :span="4">
-        <div style="padding:0px 10px;">
-          <img width="100%" :src="curPaperImg" />
+        <div v-for="(item,index) in paperImgs" class="paperItem" @click="activaPaper(index)"
+          :class="{'activePaper':curPaperIndex==index}">
+          <img width="100%" :src="item" />
         </div>
       </el-col>
       <el-col :span="14" style="background:#ccc;">
@@ -36,16 +37,17 @@
             <div slot="header" class="clearfix">
               <span>选取标准点(试卷标题)</span>
             </div>
-              阈值：<el-input-number size="mini" v-model="stdThreshVal" :min="1" :max="5" label="描述文字"></el-input-number>
-            <el-image style="margin-top:20px 0px;border:1px solid #ccc;" height="60px" width="100%" :src="stdPointImg" :preview-src-list="[stdPointImg]"></el-image>
+            阈值：<el-input-number size="mini" v-model="stdThreshVal" :min="1" :max="5" label="描述文字"></el-input-number>
+            <el-image style="margin-top:20px 0px;border:1px solid #ccc;" height="60px" width="100%" :src="stdPointImg"
+              :preview-src-list="[stdPointImg]"></el-image>
           </el-card>
           <el-card class="box-card" v-if="stepNum==2">
             <div slot="header" class="clearfix">
               <span>标注考号区域</span>
             </div>
             <div>
-                <el-radio v-model="khType" :label="2" :value="2">条码</el-radio>
-                <el-radio v-model="khType" :label="1" :value="1">涂点</el-radio>
+              <el-radio v-model="khType" :label="2" :value="2">条码</el-radio>
+              <el-radio v-model="khType" :label="1" :value="1">涂点</el-radio>
             </div>
             <div v-if="snoImg">
               <div style="margin-bottom:10px;" v-if="khType==1">
@@ -53,7 +55,8 @@
                   style="float:right;color:blue;margin-right:20px;cursor: pointer;"></i>
                 <div class="clear"></div>
               </div>
-              <el-image style="margin-bottom:20px 0px;border:1px solid #ccc;" height="60px" width="100%" :src="snoImg" :preview-src-list="[snoImg]"></el-image>
+              <el-image style="margin-bottom:20px 0px;border:1px solid #ccc;" height="60px" width="100%" :src="snoImg"
+                :preview-src-list="[snoImg]"></el-image>
             </div>
           </el-card>
           <!-- 客观题 -->
@@ -61,8 +64,8 @@
             <div slot="header" class="clearfix">
               <span>标注客观题</span>
             </div>
-            <div v-if="ansCardImgList.length>0"  v-for="(item,index) in ansCardImgList">
-              <div style="margin-bottom:10px;" >
+            <div v-if="ansCardImgList.length>0" v-for="(item,index) in ansCardImgList">
+              <div style="margin-bottom:10px;">
                 <i class="el-icon-delete" @click="ansCardImgList.splice(index,1)"
                   style="float:right;color:red;cursor: pointer;"></i>
                 <i class="el-icon-edit" @click="editAnsCard(item,curPaperId)"
@@ -78,8 +81,8 @@
             <div slot="header" class="clearfix">
               <span>切割主观题</span>
             </div>
-            <div v-if="subImgList.length>0"  v-for="(item,index) in subImgList">
-              <div style="margin-bottom:10px;" >
+            <div v-if="subImgList.length>0" v-for="(item,index) in subImgList">
+              <div style="margin-bottom:10px;">
                 <el-input size="mini" v-model="item.qno"></el-input>
                 <i class="el-icon-delete" @click="subImgList.splice(index,1)"
                   style="float:right;color:red;cursor: pointer;"></i>
@@ -94,7 +97,7 @@
     </el-row>
     <!-- 涂点考号 -->
     <el-dialog title="考号设置" :visible.sync="khOpen" width="65%" append-to-body>
-        <canvasDrawer v-if="khOpen" :srcImg="snoImg" :curId="curPaperId" :khType="khType" @close="khOpen=false" />
+      <canvasDrawer v-if="khOpen" :srcImg="snoImg" :curId="curPaperId" :khType="khType" @close="khOpen=false" />
     </el-dialog>
     <!-- 客观题设置 -->
     <el-dialog title="客观题设置" :visible.sync="open" width="90%" append-to-body>
@@ -147,34 +150,23 @@
               <el-table-column label="题号" prop="qno"></el-table-column>
               <el-table-column label="分数" prop="score"></el-table-column>
               <el-table-column label="题型" prop="qtype">
-                  <template slot-scope="scope">
-                    <span v-if="scope.row.qtype==1">单选</span>
-                    <span v-if="scope.row.qtype==2">多选</span>
-                  </template>
+                <template slot-scope="scope">
+                  <span v-if="scope.row.qtype==1">单选</span>
+                  <span v-if="scope.row.qtype==2">多选</span>
+                </template>
               </el-table-column>
               <el-table-column label="标准答案" prop="stdAns" width="240px">
                 <template slot-scope="scope">
-                  <el-tag
-                    v-for="item in ansOptionList"
-                    :key="item.label"
-                    type="success"
-                    :effect="scope.row.stdAns.indexOf(item.value)==-1?'plain':'dark'"
-                    @click="setStdAns(scope.row,item)"
-                    size="mini"
-                    >
+                  <el-tag v-for="item in ansOptionList" :key="item.label" type="success"
+                    :effect="scope.row.stdAns.indexOf(item.value)==-1?'plain':'dark'" @click="setStdAns(scope.row,item)"
+                    size="mini">
                     {{ item.label }}
                   </el-tag>
                 </template>
               </el-table-column>
             </el-table>
-            <el-pagination
-              background
-              layout="prev, pager, next"
-              :page-sizes="[10,20,30,50]"
-              :page-size="pageSize"
-              @current-change="handleCurrentChange"
-              :current-page.sync="currentPage"
-              :total="stdQueList.length">
+            <el-pagination background layout="prev, pager, next" :page-sizes="[10,20,30,50]" :page-size="pageSize"
+              @current-change="handleCurrentChange" :current-page.sync="currentPage" :total="stdQueList.length">
             </el-pagination>
           </div>
         </el-col>
@@ -235,7 +227,8 @@
             </el-col>
           </el-row>
           <div style="border:1px solid #ddd;position:relative;" v-loading="ansImgLoading">
-            <img v-if="recCurAnsImg || stdChoiceList.length>0" id="ansImage" ref="ansImage" width="100%" :src="recCurAnsImg" />
+            <img v-if="recCurAnsImg || stdChoiceList.length>0" id="ansImage" ref="ansImage" width="100%"
+              :src="recCurAnsImg" />
             <img v-else id="ansImage" ref="ansImage" width="100%" :src="curAnsImg" />
             <!-- 题号 -->
             <!-- <div :style="'display:inline-block;color:red;border:1px solid red;left:'+(item[0].x)+'px;top:'+(item[0].y)+'px;position:absolute;font-size:18px;'" v-for="(item,index) in stdQnoPoints" :key="index">{{item[0].qno}}</div> -->
@@ -277,45 +270,45 @@
         stepNum: 1,
         stdPointImg: "",
         snoImg: "",
-        snoImgW:0,
-        snoImgH:0,
+        snoImgW: 0,
+        snoImgH: 0,
         ansCardImgList: [],
         curAnsImg: "",
         curRecAnsImg: "",
         ansOptionList: [{
             label: "A",
             value: "A",
-            flag:0
+            flag: 0
           },
           {
             label: "B",
             value: "B",
-            flag:0
+            flag: 0
           },
           {
             label: "C",
             value: "C",
-            flag:0
+            flag: 0
           },
           {
             label: "D",
             value: "D",
-            flag:0
+            flag: 0
           },
           {
             label: "E",
             value: "E",
-            flag:0
+            flag: 0
           },
           {
             label: "F",
             value: "F",
-            flag:0
+            flag: 0
           },
           {
             label: "G",
             value: "G",
-            flag:0
+            flag: 0
           }
         ],
         stdAnsOptionList: [{
@@ -339,29 +332,34 @@
         ansImgLoading: false,
         optionDir: 1,
         queDir: 2,
-        addQueForm: {score:0},
+        addQueForm: {
+          score: 0
+        },
         stdQueList: [],
         stdQnoPoints: [],
+        paperImgs: [],
         curPaperImg: "",
         recCurAnsImg: "",
         choiceType: 2,
         threshVal: 7,
-        stdThreshVal:3,
+        stdThreshVal: 3,
         stdChoiceList: [],
-        myCropper: null,
+        myCropper: {},
         myAnsCropper: null,
         dragMode: "crop",
         ansDragMode: "crop",
-        curPaperId:null,
-        currentPage:1,
-        pageSize:10,
-        khType:1,
-        khLength:6,
-        khOpen:false,
-        stdPoints:null,
-        khPointsCrop:{},
-        ansPointsCrop:{},
-        subImgList:[]
+        curPaperId: null,
+        currentPage: 1,
+        pageSize: 10,
+        khType: 1,
+        khLength: 6,
+        khOpen: false,
+        stdPoints: null,
+        khPointsCrop: {},
+        ansPointsCrop: {},
+        subImgList: [],
+        activePaper: true,
+        curPaperIndex: 0
       };
     },
     watch: {
@@ -399,27 +397,28 @@
         this.loading = true;
         let params = {
           id: this.$route.query.id,
-          ptype:this.stepNum
+          ptype: this.stepNum
         };
         this.curPaperId = this.$route.query.id;
         this.$api.getPaperInfo(params).then((res) => {
           let imgs = JSON.parse(res.data.data.imgs);
           let paperPieces = res.data.data.paperPieces;
           this.curPaperImg = imgs[0];
+          this.paperImgs = imgs;
           this.stdPointImg = res.data.data.stdPointsImg;
-          this.stdPoints = res.data.data.stdPoints?JSON.parse(res.data.data.stdPoints):{};
+          this.stdPoints = res.data.data.stdPoints ? JSON.parse(res.data.data.stdPoints) : {};
           this.snoImg = res.data.data.khPoints;
-          this.khPointsCrop = res.data.data.khPointsCrop?JSON.parse(res.data.data.khPointsCrop):{};
-          this.ansCardImgList = res.data.data.ansPoints?JSON.parse(res.data.data.ansPoints):[];
-          this.ansPointsCrop = res.data.data.ansPointsCrop?[res.data.data.ansPointsCrop]:[];
+          this.khPointsCrop = res.data.data.khPointsCrop ? JSON.parse(res.data.data.khPointsCrop) : {};
+          this.ansCardImgList = res.data.data.ansPoints ? JSON.parse(res.data.data.ansPoints) : [];
+          this.ansPointsCrop = res.data.data.ansPointsCrop ? [res.data.data.ansPointsCrop] : [];
           this.khType = res.data.data.khType;
           this.khLength = res.data.data.khLength;
           let subQueImgList = [];
-          paperPieces.forEach((item,index)=>{
+          paperPieces.forEach((item, index) => {
             subQueImgList.push({
-              qno:item.qno,
-              qimg:item.imgs,
-              point:JSON.parse(item.imgs_points)
+              qno: item.qno,
+              qimg: item.imgs,
+              point: JSON.parse(item.imgs_points)
             })
           })
           this.subImgList = subQueImgList;
@@ -433,10 +432,15 @@
         this.form = {};
         // this.initCropper();
       },
-      editKhCard(item,curPaperId){
+      editKhCard(item, curPaperId) {
         this.khOpen = true;
       },
-      editAnsCard(item,curPaperId) {
+      activaPaper(index) {
+        this.curPaperIndex = index
+        this.curPaperImg = this.paperImgs[index];
+        this.initCropper();
+      },
+      editAnsCard(item, curPaperId) {
         this.open = true;
         this.curAnsImg = item;
         this.recCurAnsImg = null;
@@ -444,15 +448,17 @@
         this.addQueForm = {};
         this.stdChoiceList = [];
         this.ansImgLoading = false;
-        this.$api.getPaperInfo({id:curPaperId}).then((res) => {
+        this.$api.getPaperInfo({
+          id: curPaperId
+        }).then((res) => {
           let imgs = JSON.parse(res.data.data.imgs);
           this.curPaperImg = imgs[0];
-          this.ansCardImgList = res.data.data.ansPoints?JSON.parse(res.data.data.ansPoints):[];
+          this.ansCardImgList = res.data.data.ansPoints ? JSON.parse(res.data.data.ansPoints) : [];
           this.snoImg = res.data.data.khPoints;
-          if(res.data.data.stdChoices){
+          if (res.data.data.stdChoices) {
             this.stdChoiceList = JSON.parse(res.data.data.stdChoices);
           }
-          if(res.data.data.stdQueList){
+          if (res.data.data.stdQueList) {
             this.stdQueList = JSON.parse(res.data.data.stdQueList);
           }
           this.loading = false;
@@ -478,11 +484,11 @@
           khPoints: this.snoImg,
           ansPoints: this.ansCardImgList,
           stdChoices: this.stdChoiceList,
-          stdQueList:this.stdQueList,
-          khType:this.khType,
-          khLength:this.khLength,
-          ansPointsCrop:this.ansPointsCrop,
-          subImgList:this.subImgList
+          stdQueList: this.stdQueList,
+          khType: this.khType,
+          khLength: this.khLength,
+          ansPointsCrop: this.ansPointsCrop,
+          subImgList: this.subImgList
         }
         this.$api.updatePaperInfo(params).then(res => {
           this.msgSuccess("成功!");
@@ -509,9 +515,9 @@
           khPoints: this.snoImg,
           ansPoints: this.ansCardImgList,
           stdChoices: this.stdChoiceList,
-          stdQueList:this.stdQueList,
-          khType:this.khType,
-          khLength:this.khLength,
+          stdQueList: this.stdQueList,
+          khType: this.khType,
+          khLength: this.khLength,
         }
         this.$api.updatePaperInfo(params).then(res => {
           this.msgSuccess("成功!");
@@ -565,28 +571,30 @@
                 if (that.stepNum == 1) {
                   that.stdPointImg = cropperImgData;
                   that.$api.tryRecArray({
-                            sx:cropData.x,
-                            sy:cropData.y,
-                            yz: that.stdThreshVal,
-                            img: that.stdPointImg,
-                            khLength: 15
+                    sx: cropData.x,
+                    sy: cropData.y,
+                    yz: that.stdThreshVal,
+                    img: that.stdPointImg,
+                    khLength: 15
                   }).then(res => {
-                      let oneRect = res.data.data.oneRect;
-                      let b64img = res.data.data.img;
-                      that.stdPointImg = b64img;
-                      that.stdPoints = oneRect;
+                    let oneRect = res.data.data.oneRect;
+                    let b64img = res.data.data.img;
+                    that.stdPointImg = b64img;
+                    that.stdPoints = oneRect;
                   })
                   // that.stdPoints = {"x":cropData.x,"y":cropData.y,"w":cropData.width,"h":cropData.height};
                 }
                 // 考号区域
                 if (that.stepNum == 2) {
                   let khPointsCrop = {
-                    x:cropData.x,y:cropData.y,
-                    w:cropData.width,h:cropData.height
-                    }
-                  khPointsCrop["x"] = khPointsCrop["x"]-that.stdPoints["x"];
-                  
-                  khPointsCrop["y"] = khPointsCrop["y"]-that.stdPoints["y"];
+                    x: cropData.x,
+                    y: cropData.y,
+                    w: cropData.width,
+                    h: cropData.height
+                  }
+                  khPointsCrop["x"] = khPointsCrop["x"] - that.stdPoints["x"];
+
+                  khPointsCrop["y"] = khPointsCrop["y"] - that.stdPoints["y"];
 
                   that.khPointsCrop = khPointsCrop;
                   that.snoImg = cropperImgData;
@@ -596,28 +604,36 @@
                 // 客观题
                 if (that.stepNum == 3) {
                   let khPointsCrop = {
-                    x:cropData.x,y:cropData.y,
-                    w:cropData.width,h:cropData.height
-                    }
-                  
-                  khPointsCrop["x"] = khPointsCrop["x"]-that.stdPoints["x"];
-                  khPointsCrop["y"] = khPointsCrop["y"]-that.stdPoints["y"];
+                    x: cropData.x,
+                    y: cropData.y,
+                    w: cropData.width,
+                    h: cropData.height
+                  }
+
+                  khPointsCrop["x"] = khPointsCrop["x"] - that.stdPoints["x"];
+                  khPointsCrop["y"] = khPointsCrop["y"] - that.stdPoints["y"];
 
                   that.ansPointsCrop = khPointsCrop;
                   that.ansCardImgList.push(cropperImgData);
                 }
                 // 主观题
-                if(that.stepNum == 4){
+                if (that.stepNum == 4) {
                   let khPointsCrop = {
-                    x:cropData.x,y:cropData.y,
-                    w:cropData.width,h:cropData.height
-                    }
-                  
-                  khPointsCrop["x"] = khPointsCrop["x"]-that.stdPoints["x"];
-                  khPointsCrop["y"] = khPointsCrop["y"]-that.stdPoints["y"];
+                    x: cropData.x,
+                    y: cropData.y,
+                    w: cropData.width,
+                    h: cropData.height
+                  }
+
+                  khPointsCrop["x"] = khPointsCrop["x"] - that.stdPoints["x"];
+                  khPointsCrop["y"] = khPointsCrop["y"] - that.stdPoints["y"];
 
                   that.ansPointsCrop = khPointsCrop;
-                  let imgItem = {qno:null,qimg:cropperImgData,point:khPointsCrop};
+                  let imgItem = {
+                    qno: null,
+                    qimg: cropperImgData,
+                    point: khPointsCrop
+                  };
                   that.subImgList.push(imgItem);
                 }
               }
@@ -666,7 +682,7 @@
             },
             cropstart: function (e) {},
             cropend: function (e) {
-              if(that.ansDragMode=="crop"){
+              if (that.ansDragMode == "crop") {
                 let cropperImgData = this.cropper.getCroppedCanvas({
                   width: 1310
                 }).toDataURL("image/jpeg");
@@ -731,42 +747,44 @@
           this.stdQueList.push(queRow)
         })
       },
-      setStdAns(row,item){
+      setStdAns(row, item) {
         let orgAns = row.stdAns.split(",")
-        orgAns = orgAns.filter((item)=>{return item.length>0})
-        if(orgAns.indexOf(item.value)==-1){
+        orgAns = orgAns.filter((item) => {
+          return item.length > 0
+        })
+        if (orgAns.indexOf(item.value) == -1) {
           orgAns.push(item.value)
-        }else{
-          orgAns.splice(orgAns.indexOf(item.value),1)
+        } else {
+          orgAns.splice(orgAns.indexOf(item.value), 1)
         }
         row.stdAns = orgAns.join(",")
       },
-      handleCurrentChange(val){
-        this.currentPage=val
+      handleCurrentChange(val) {
+        this.currentPage = val
       },
-      nextStep(){
-        if(this.stepNum==1&&!this.stdPointImg){
+      nextStep() {
+        if (this.stepNum == 1 && !this.stdPointImg) {
           this.msgError("请框选标准点,一般建议框选试卷标题!");
-          return 
+          return
         }
-        if(this.stepNum==2&&!this.snoImg){
+        if (this.stepNum == 2 && !this.snoImg) {
           this.msgError("请框选考号区域!");
           return
         }
         // 标准点
-        if(this.stepNum==1){
+        if (this.stepNum == 1) {
           let params = {
             id: this.$route.query.id,
             stdPointsImg: this.stdPointImg,
-            stdPoints:this.stdPoints
+            stdPoints: this.stdPoints
           }
           this.$api.updatePaperInfo(params).then(res => {
-            if(!res.data.code&&res.data.data.stdPoints){
+            if (!res.data.code && res.data.data.stdPoints) {
               let stdPoints = JSON.parse(res.data.data.stdPoints)
-              if(stdPoints.x < 10 || stdPoints.y < 10 ||stdPoints.w<10 ||stdPoints.h<10){
+              if (stdPoints.x < 10 || stdPoints.y < 10 || stdPoints.w < 10 || stdPoints.h < 10) {
                 this.msgError("标准点识别错误!");
-                return 
-              }else{
+                return
+              } else {
                 this.getData();
                 this.stepNum += 1;
               }
@@ -774,25 +792,25 @@
           })
         }
         // 考号
-        if(this.stepNum==2){
+        if (this.stepNum == 2) {
           let params = {
             id: this.$route.query.id,
-            khPoints:this.snoImg,
-            khPointsCrop:this.khPointsCrop
+            khPoints: this.snoImg,
+            khPointsCrop: this.khPointsCrop
           }
           this.$api.updatePaperInfo(params).then(res => {
             let rst = res.data;
-            if(!rst.code&&rst.data.khPointsCrop&&rst.data.khPoints){
+            if (!rst.code && rst.data.khPointsCrop && rst.data.khPoints) {
               let khPointsCrop = JSON.parse(rst.data.khPointsCrop)
               let stdKhList = JSON.parse(rst.data.stdKhList);
               let khLength = rst.data.khLength;
               // if(khPointsCrop.x < 10 || khPointsCrop.y < 10 ||khPointsCrop.w<50 
               //   ||khPointsCrop.h<50||stdKhList.length!=khLength){
-              if(khPointsCrop.x < 10 || khPointsCrop.y < 10 ||khPointsCrop.w<50 
-                ||khPointsCrop.h<50){
+              if (khPointsCrop.x < 10 || khPointsCrop.y < 10 || khPointsCrop.w < 50 ||
+                khPointsCrop.h < 50) {
                 this.msgError("考号识别错误,请重编辑考号区域!");
-                return 
-              }else{
+                return
+              } else {
                 this.getData();
                 this.stepNum += 1;
               }
@@ -800,11 +818,11 @@
           })
         }
         // 客观题
-        if(this.stepNum==3){
+        if (this.stepNum == 3) {
           let params = {
             id: this.$route.query.id,
-            ansPoints:this.ansCardImgList,
-            khPointsCrop:this.khPointsCrop
+            ansPoints: this.ansCardImgList,
+            khPointsCrop: this.khPointsCrop
           }
           this.$api.updatePaperInfo(params).then(res => {
             this.getData();
@@ -812,12 +830,12 @@
           this.stepNum += 1
         }
         // 主观题
-        if(this.stepNum==4){
+        if (this.stepNum == 4) {
           let params = {
             id: this.$route.query.id,
-            ansPoints:this.ansCardImgList,
-            khPointsCrop:this.khPointsCrop,
-            subImgList:this.subImgList
+            ansPoints: this.ansCardImgList,
+            khPointsCrop: this.khPointsCrop,
+            subImgList: this.subImgList
           }
           this.$api.updatePaperInfo(params).then(res => {
             this.getData();
@@ -857,10 +875,18 @@
     cursor: pointer;
   }
 
-  .setScoreForm{
-    .el-pagination{
-      margin-top:20px;
-      float:right;
+  .setScoreForm {
+    .el-pagination {
+      margin-top: 20px;
+      float: right;
     }
   }
+
+  .paperItem {
+    padding: 10px;
+  }
+
+  .activePaper {
+    background: #FFE6E6;
+  }
 </style>