识别测试交互完成

src/views/papers/cutPaper.vue

@@ -8,16 +8,16 @@
     </div>
     <el-row :gutter="20" style="margin-bottom:10px;">
       <el-col :span="18">
-          <el-steps :active="stepNum" simple>
-            <el-step title="定标准点" icon="el-icon-edit"></el-step>
-            <el-step title="考号区域" icon="el-icon-upload"></el-step>
-            <el-step title="客观题" icon="el-icon-picture"></el-step>
-          </el-steps>
+        <el-steps :active="stepNum" simple>
+          <el-step title="定标准点" icon="el-icon-edit"></el-step>
+          <el-step title="考号区域" icon="el-icon-upload"></el-step>
+          <el-step title="客观题" icon="el-icon-picture"></el-step>
+        </el-steps>
       </el-col>
       <el-col :span="6">
-          <el-button size="mini" type="primary" v-if="stepNum > 1" @click="stepNum-=1">上一步</el-button>
-          <el-button size="mini" type="primary" v-if="stepNum < 3" @click="stepNum+=1">下一步</el-button>
-          <el-button size="mini" type="success" v-if="stepNum == 3" @click="updatePaperRecInfo">保存</el-button>
+        <el-button size="mini" type="primary" v-if="stepNum > 1" @click="stepNum-=1">上一步</el-button>
+        <el-button size="mini" type="primary" v-if="stepNum < 3" @click="stepNum+=1">下一步</el-button>
+        <el-button size="mini" type="success" v-if="stepNum == 3" @click="updatePaperRecInfo">保存</el-button>
       </el-col>
     </el-row>
     <el-row>
@@ -47,14 +47,17 @@
             <div slot="header" class="clearfix">
               <span>标注客观题</span>
             </div>
-            <div 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)"  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;" width="100%" :src="item" :preview-src-list="[item]"></el-image>
-              
+            <div 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)"
+                  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;" width="100%" :src="item"
+                :preview-src-list="[item]"></el-image>
+
             </div>
           </el-card>
         </div>
@@ -62,11 +65,11 @@
     </el-row>
     <!-- 客观题设置 -->
     <el-dialog title="客观题设置" :visible.sync="open" width="90%" append-to-body>
-        <el-row :gutter="20">
-            
-            <el-col :span="12">
-                <h4>题目设置</h4>
-                <!-- <div class="tag-group">
+      <el-row :gutter="20">
+
+        <el-col :span="12">
+          <h4>分数设置</h4>
+          <!-- <div class="tag-group">
                   <span class="tag-group__title">填涂选项：</span>
                   <el-tag
                     v-for="item in ansOptionList"
@@ -78,82 +81,125 @@
                     {{ item.label }}
                   </el-tag>
                 </div> -->
-                <div style="margin-top:10px;">
-                  <span class="tag-group__title">选项方向：</span>
-                  <el-radio v-model="optionDir" :label="1" :value="1">横向</el-radio>
-                  <el-radio v-model="optionDir" :label="2" :value="2">纵向</el-radio>
-                </div>
-                <div style="margin-top:10px;">
-                  <span class="tag-group__title">题号方向：</span>
-                  <el-radio v-model="queDir" :label="1" :value="1">横向</el-radio>
-                  <el-radio v-model="queDir" :label="2" :value="2">纵向</el-radio>
-                </div>
-                <div style="margin-top:10px;" class="setScoreForm">
-                  <span class="tag-group__title">分数设置：</span>
-                  <el-form :inline="true" v-model="addQueForm">
-                    <el-form-item label="题号">
-                      <el-input size="mini" v-model="addQueForm.fQno"></el-input>
-                    </el-form-item>
-                    <el-form-item label="至">
-                        <el-input size="mini" v-model="addQueForm.tQno"></el-input>
-                    </el-form-item>
-                    <el-form-item label="分数">
-                        <el-input size="mini" v-model="addQueForm.score"></el-input>
-                    </el-form-item>
-                    <el-form-item label="题型">
-                        <el-select size="mini" v-model="addQueForm.qtype">
-                          <el-option label="单选" value="单选">单选</el-option>
-                          <el-option label="多选" value="多选">多选</el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button size="mini" type="primary" @click="addQues">添加</el-button>
-                    </el-form-item>
-                  </el-form>
-                  <el-row :gutter="20">
-                    <el-col :span="4">题号</el-col>
-                    <el-col :span="4">分数</el-col>
-                    <el-col :span="4">题型</el-col>
-                    <el-col :span="10">标准答案</el-col>
-                  </el-row>
+          <div style="margin-top:10px;" class="setScoreForm">
+            <el-form :inline="true" v-model="addQueForm">
+              <el-form-item label="题号">
+                <el-input size="mini" v-model="addQueForm.fQno"></el-input>
+              </el-form-item>
+              <el-form-item label="至">
+                <el-input size="mini" v-model="addQueForm.tQno"></el-input>
+              </el-form-item>
+              <el-form-item label="分数">
+                <el-input size="mini" v-model="addQueForm.score"></el-input>
+              </el-form-item>
+              <el-form-item label="题型">
+                <el-select size="mini" v-model="addQueForm.qtype">
+                  <el-option label="单选" value="单选">单选</el-option>
+                  <el-option label="多选" value="多选">多选</el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button size="mini" type="primary" @click="addQues">添加</el-button>
+              </el-form-item>
+            </el-form>
+            <el-row :gutter="20">
+              <el-col :span="4">题号</el-col>
+              <el-col :span="4">分数</el-col>
+              <el-col :span="4">题型</el-col>
+              <el-col :span="10">标准答案</el-col>
+            </el-row>
 
-                  <el-row :gutter="20" v-for="(item,index) in stdQueList">
-                    <el-col :span="4">
-                        <el-input size="mini" v-model="item.qno"></el-input>
-                    </el-col>
-                    <el-col :span="4">
-                        <el-input size="mini" v-model="item.score"></el-input>
-                    </el-col>
-                    <el-col :span="4">
-                        <el-select size="mini" v-model="item.qtype">
-                            <el-option label="单选" value="单选">单选</el-option>
-                            <el-option label="多选" value="多选">多选</el-option>
-                          </el-select>
-                    </el-col>
-                    <el-col :span="4">
-                        <div class="tag-group">
-                            <el-select size="mini" v-model="item.stdAns">
-                                <el-option :label="item.label" :value="item.value" v-for="(item,index) in $const.ansOptionList"></el-option>
-                            </el-select>
-                          </div>
-                    </el-col>
-                    <el-col :span="4">
-                      <el-button type="danger" size="mini" @click="stdQueList.splice(1,1)">删除</el-button>
-                    </el-col>
-                  </el-row>
+            <el-row :gutter="20" v-for="(item,index) in stdQueList">
+              <el-col :span="4">
+                <el-input size="mini" v-model="item.qno"></el-input>
+              </el-col>
+              <el-col :span="4">
+                <el-input size="mini" v-model="item.score"></el-input>
+              </el-col>
+              <el-col :span="4">
+                <el-select size="mini" v-model="item.qtype">
+                  <el-option label="单选" value="单选">单选</el-option>
+                  <el-option label="多选" value="多选">多选</el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="4">
+                <div class="tag-group">
+                  <el-select size="mini" v-model="item.stdAns">
+                    <el-option :label="item.label" :value="item.value" v-for="(item,index) in $const.ansOptionList">
+                    </el-option>
+                  </el-select>
                 </div>
+              </el-col>
+              <el-col :span="4">
+                <el-button type="danger" size="mini" @click="stdQueList.splice(1,1)">删除</el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <h4>答题卡预览</h4>
+          <!-- <el-image v-else :src="curAnsImg" v-loading="ansImgLoading"></el-image> -->
+          <el-row>
+            <el-col :span="12">
+              <div style="margin-top:10px;">
+                <span class="tag-group__title">选项方向：</span>
+                <el-radio v-model="optionDir" :label="1" :value="1">横向</el-radio>
+                <el-radio v-model="optionDir" :label="2" :value="2">纵向</el-radio>
+              </div>
             </el-col>
             <el-col :span="12">
-                <h4>答题卡预览</h4>
-                <el-image v-if="recCurAnsImg" :src="recCurAnsImg" v-loading="ansImgLoading"></el-image>
-                <el-image v-else :src="curAnsImg" v-loading="ansImgLoading"></el-image>
-                <el-button style="float:right;margin-top:20px;" type="primary" @click="tryRecPaper" size="mini">识别测试</el-button>
-              </el-col>
-        </el-row>
-        <div slot="footer" class="dialog-footer">
-            <el-button @click="open = false">取 消</el-button>
-            <el-button type="primary" @click="updatePaperRecInfo">保 存</el-button>
-        </div>
+              <div style="margin-top:10px;">
+                <span class="tag-group__title">题号方向：</span>
+                <el-radio v-model="queDir" :label="1" :value="1" disabled>横向</el-radio>
+                <el-radio v-model="queDir" :label="2" :value="2" disabled>纵向</el-radio>
+              </div>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <div style="margin-top:10px;margin-bottom:10px;">
+                <span class="tag-group__title">识别模式：</span>
+                <el-radio v-model="choiceType" :label="2" :value="2">手动</el-radio>
+                <el-radio v-model="choiceType" :label="1" :value="1">自动</el-radio>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div style="margin-top:10px;margin-bottom:10px;">
+                <span class="tag-group__title">阈值调节：</span>
+                <el-input-number size="mini" v-model="threshVal" :min="6" :max="9" label="描述文字"></el-input-number>
+              </div>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <div style="margin-top:10px;margin-bottom:10px;" v-if="choiceType==2">
+                <span class="tag-group__title">选项框：</span>
+                <div>
+                  <div v-for="(item,index) in stdChoiceList" style="display:inline-block;position:relative;">
+                    <i class="el-icon-close delChoice" @click="stdChoiceList.splice(index,1)"></i>
+                    <el-image class="choiceImg" :src="item"></el-image>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <el-button style="float:right;margin-top:20px;" type="primary" @click="tryRecPaper" size="mini">识别测试
+              </el-button>
+            </el-col>
+          </el-row>
+          <div style="border:1px solid #ddd;" v-loading="ansImgLoading">
+            <!-- <el-image v-if="recCurAnsImg" :src="recCurAnsImg" v-loading="ansImgLoading"></el-image> -->
+            <img v-if="recCurAnsImg" id="ansImage" ref="ansImage" width="100%" :src="recCurAnsImg" />
+            <img v-else id="ansImage" ref="ansImage" width="100%" :src="curAnsImg" />
+          </div>
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="open = false">取 消</el-button>
+        <el-button type="primary" @click="updatePaperRecInfo">保 存</el-button>
+      </div>
     </el-dialog>
   </section>
 </template>
@@ -181,39 +227,80 @@
         doctorList: [],
         rules: {},
         stepNum: 3,
-        stdPointImg:"",
-        snoImg:"",
-        ansCardImgList:[],
-        curAnsImg:"",
-        curRecAnsImg:"",
-        ansOptionList:[
-            {label:"A",value:0},
-            {label:"B",value:1},
-            {label:"C",value:0},
-            {label:"D",value:0},
-            {label:"E",value:0},
-            {label:"F",value:0},
-            {label:"G",value:0}
+        stdPointImg: "",
+        snoImg: "",
+        ansCardImgList: [],
+        curAnsImg: "",
+        curRecAnsImg: "",
+        ansOptionList: [{
+            label: "A",
+            value: 0
+          },
+          {
+            label: "B",
+            value: 1
+          },
+          {
+            label: "C",
+            value: 0
+          },
+          {
+            label: "D",
+            value: 0
+          },
+          {
+            label: "E",
+            value: 0
+          },
+          {
+            label: "F",
+            value: 0
+          },
+          {
+            label: "G",
+            value: 0
+          }
         ],
-        stdAnsOptionList:[
-            {label:"A",value:0},
-            {label:"B",value:1},
-            {label:"C",value:0},
-            {label:"D",value:0}
+        stdAnsOptionList: [{
+            label: "A",
+            value: 0
+          },
+          {
+            label: "B",
+            value: 1
+          },
+          {
+            label: "C",
+            value: 0
+          },
+          {
+            label: "D",
+            value: 0
+          }
         ],
-        radio:1,
-        ansImgLoading:false,
-        optionDir:1,
-        queDir:2,
-        addQueForm:{},
-        stdQueList:[
+        radio: 1,
+        ansImgLoading: false,
+        optionDir: 1,
+        queDir: 2,
+        addQueForm: {},
+        stdQueList: [
           // {qno:"",score:1,qtype:"单选",stdAns:""}
         ],
-        stdQnoPoints:[],
-        curPaperImg:"",
-        recCurAnsImg:""
+        stdQnoPoints: [],
+        curPaperImg: "",
+        recCurAnsImg: "",
+        choiceType: 2,
+        threshVal: 6,
+        stdChoiceList: [],
+        myCropper:null,
+        myAnsCropper:null
       };
     },
+    watch:{
+      optionDir(newVal,oldVal){
+        this.queDir = oldVal;
+      }
+    },
     methods: {
       del(id) {
         this.$confirm("确认删除?", "提示", {
@@ -242,7 +329,9 @@
       },
       getData() {
         this.loading = true;
-        let params = {id:this.$route.query.id};
+        let params = {
+          id: this.$route.query.id
+        };
         this.$api.getPaperInfo(params).then((res) => {
           let imgs = JSON.parse(res.data.data.imgs);
           this.curPaperImg = imgs[0];
@@ -261,26 +350,29 @@
       editAnsCard(item) {
         this.open = true;
         this.curAnsImg = item;
-        this.recCurAnsImg = "";
+        this.recCurAnsImg = null;
         this.stdQueList = [];
         this.addQueForm = {};
+        this.stdChoiceList = [];
+        this.ansImgLoading = false;
+        this.initAnsCropper();
       },
-      updatePaperRecInfo(){
-        if(!this.snoImg){
+      updatePaperRecInfo() {
+        if (!this.snoImg) {
           this.msgError("请标注考号区域!")
           return
         }
-        if(!this.ansCardImgList.length){
+        if (!this.ansCardImgList.length) {
           this.msgError("请标注客观题区域!")
           return
         }
         let params = {
-          id:this.$route.query.id,
-          stdQnoPoints:this.stdQnoPoints,
-          khPoints:this.snoImg,
-          ansPoints:this.ansCardImgList[0]
+          id: this.$route.query.id,
+          stdQnoPoints: this.stdQnoPoints,
+          khPoints: this.snoImg,
+          ansPoints: this.ansCardImgList[0]
         }
-        this.$api.updatePaperInfo(params).then(res=>{
+        this.$api.updatePaperInfo(params).then(res => {
           this.msgSuccess("成功!");
           this.getData();
           this.open = false;
@@ -288,6 +380,7 @@
       },
       initCropper() {
         let that = this;
+        that.myCropper = null;
         this.$nextTick(function () {
           let imgObj = this.$refs.image;
           that.myCropper = new Cropper(imgObj, {
@@ -321,14 +414,16 @@
             cropstart: function (e) {},
             cropend: function (e) {
               // let cropData = that.myCropper.getCropBoxData();
-              let cropperImgData = this.cropper.getCroppedCanvas({ width: 1310 }).toDataURL("image/jpeg");
-              if(that.stepNum==1){
+              let cropperImgData = this.cropper.getCroppedCanvas({
+                width: 1310
+              }).toDataURL("image/jpeg");
+              if (that.stepNum == 1) {
                 that.stdPointImg = cropperImgData;
               }
-              if(that.stepNum==2){
+              if (that.stepNum == 2) {
                 that.snoImg = cropperImgData;
               }
-              if(that.stepNum==3){
+              if (that.stepNum == 3) {
                 that.ansCardImgList.push(cropperImgData);
               }
               that.myCropper.clear()
@@ -339,19 +434,87 @@
           })
         })
       },
-      tryRecPaper(){
+      initAnsCropper() {
+        let that = this;
+        if(that.myAnsCropper){
+          that.myAnsCropper.destroy();
+        }
+        this.$nextTick(function () {
+          let imgObj = this.$refs.ansImage;
+          that.myAnsCropper = new Cropper(imgObj, {
+            viewMode: 0,
+            dragMode: "crop",
+            autoCrop: false,
+            initialAspectRatio: 1,
+            // aspectRatio: 1,
+            preview: '.before',
+            background: false,
+            autoCropArea: 0.6,
+            zoomOnWheel: true,
+            cropBoxResizable: true,
+            movable: true,
+            ready: function () {
+              // self.croppable = true;
+              // this.cropperCutImg = this.cropper.getCroppedCanvas({ width: 1310 }).toDataURL("image/jpeg")
+              // console.log(this.cropperCutImg,333333333)
+              document.addEventListener('keydown', function (e) {
+                if (e.keyCode == 32) {
+                  that.myAnsCropper.setDragMode("move");
+                }
+              })
+              document.addEventListener('keyup', function (e) {
+                if (e.keyCode == 32) {
+                  that.myAnsCropper.setDragMode("crop");
+                  // that.myCropper.clear()
+                }
+              })
+            },
+            cropstart: function (e) {},
+            cropend: function (e) {
+              // let cropData = that.myCropper.getCropBoxData();
+              let cropperImgData = this.cropper.getCroppedCanvas({
+                width: 1310
+              }).toDataURL("image/jpeg");
+              that.stdChoiceList.push(cropperImgData)
+              that.myAnsCropper.clear()
+            },
+            crop() {
+              let cropData = that.myAnsCropper.getCropBoxData();
+            }
+          })
+        })
+      },
+      tryRecPaper() {
         this.ansImgLoading = true;
-        this.$api.tryRecPaper({img:this.curAnsImg,optionDir:this.optionDir,queDir:this.queDir}).then(res=>{
-          this.recCurAnsImg = res.data.data.recImg;
-          this.stdQnoPoints = res.data.data.ansCnts;
+        this.$api.tryRecPaper({
+          img: this.curAnsImg,
+          optionDir: this.optionDir,
+          queDir: this.queDir,
+          choiceType: this.choiceType,
+          threshVal: this.threshVal,
+          stdChoiceList: this.stdChoiceList
+        }).then(res => {
+          if(!res.data.code){
+            this.recCurAnsImg = res.data.data.recImg;
+            this.stdQnoPoints = res.data.data.ansCnts;
+            this.myAnsCropper.destroy();
+            this.initAnsCropper();
+          }else{
+            this.msgError("识别错误,请仔细检查!")
+          }
+          
           this.ansImgLoading = false;
         })
       },
-      addQues(){
+      addQues() {
         let fQno = parseInt(this.addQueForm.fQno);
         let tQno = parseInt(this.addQueForm.tQno);
-        for(var i=fQno;i<tQno+1;i++){
-          let queRow = {qno:i,score:this.addQueForm.score,qtype:this.addQueForm.qtype}
+        for (var i = fQno; i < tQno + 1; i++) {
+          let queRow = {
+            qno: i,
+            score: this.addQueForm.score,
+            qtype: this.addQueForm.qtype
+          }
           this.stdQueList.push(queRow)
         }
       }
@@ -367,13 +530,24 @@
   };
 </script>
 <style lang="scss" scoped>
-  .el-tag{
-    cursor: pointer!important;
-    margin-left:10px;
+  .el-tag {
+    cursor: pointer !important;
+    margin-left: 10px;
+  }
+
+  /deep/.el-input--mini .el-input__inner {
+    width: 85px !important;
   }
 
-  /deep/.el-input--mini .el-input__inner{
-    width:85px!important;
+  .choiceImg {
+    margin-right: 15px;
   }
 
+  .delChoice {
+    position: absolute;
+    z-index: 10;
+    right: 0px;
+    color: red;
+    cursor: pointer;
+  }
 </style>