|
|
@@ -51,7 +51,7 @@
|
|
|
<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)"
|
|
|
+ <i class="el-icon-edit" @click="editAnsCard(item,curPaperId)"
|
|
|
style="float:right;color:blue;margin-right:20px;cursor: pointer;"></i>
|
|
|
<div class="clear"></div>
|
|
|
</div>
|
|
|
@@ -98,42 +98,24 @@
|
|
|
<el-option label="多选" value="多选">多选</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="标准答案">
|
|
|
+ <el-select size="mini" v-model="addQueForm.stdAns" multiple>
|
|
|
+ <el-option :label="item.label" :value="item.value" v-for="(item,index) in $const.ansOptionList"
|
|
|
+ :key="index"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button size="mini" type="primary" @click="addQues">添加</el-button>
|
|
|
+ <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-table :data="stdQueList">
|
|
|
+ <el-table-column label="序号" prop="qno"></el-table-column>
|
|
|
+ <el-table-column label="题号" prop="qno"></el-table-column>
|
|
|
+ <el-table-column label="分数" prop="score"></el-table-column>
|
|
|
+ <el-table-column label="题型" prop="qtype"></el-table-column>
|
|
|
+ <el-table-column label="标准答案" prop="stdAns"></el-table-column>
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
@@ -160,8 +142,8 @@
|
|
|
<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>
|
|
|
+ <el-radio v-model="choiceType" :label="2" :value="2">自动</el-radio>
|
|
|
+ <el-radio v-model="choiceType" :label="1" :value="1" disabled>智能</el-radio>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
@@ -184,15 +166,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-button style="float:right;margin-top:20px;" type="primary" @click="tryRecPaper" size="mini">识别测试
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-button @click="autoSetScore" style="float:right;margin-left:10px;" type="warning" size="mini">设置分值
|
|
|
</el-button>
|
|
|
+ <el-button style="float:right;" 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> -->
|
|
|
+ <div style="border:1px solid #ddd;position:relative;" v-loading="ansImgLoading">
|
|
|
<img v-if="recCurAnsImg" 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>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -283,21 +269,28 @@
|
|
|
optionDir: 1,
|
|
|
queDir: 2,
|
|
|
addQueForm: {},
|
|
|
- stdQueList: [
|
|
|
- // {qno:"",score:1,qtype:"单选",stdAns:""}
|
|
|
- ],
|
|
|
+ stdQueList: [{
|
|
|
+ no: "",
|
|
|
+ qno: "",
|
|
|
+ score: 1,
|
|
|
+ qtype: "单选",
|
|
|
+ stdAns: ""
|
|
|
+ }],
|
|
|
stdQnoPoints: [],
|
|
|
curPaperImg: "",
|
|
|
recCurAnsImg: "",
|
|
|
choiceType: 2,
|
|
|
- threshVal: 6,
|
|
|
+ threshVal: 7,
|
|
|
stdChoiceList: [],
|
|
|
- myCropper:null,
|
|
|
- myAnsCropper:null
|
|
|
+ myCropper: null,
|
|
|
+ myAnsCropper: null,
|
|
|
+ dragMode: "crop",
|
|
|
+ ansDragMode: "crop",
|
|
|
+ curPaperId:null
|
|
|
};
|
|
|
},
|
|
|
- watch:{
|
|
|
- optionDir(newVal,oldVal){
|
|
|
+ watch: {
|
|
|
+ optionDir(newVal, oldVal) {
|
|
|
this.queDir = oldVal;
|
|
|
}
|
|
|
},
|
|
|
@@ -332,6 +325,7 @@
|
|
|
let params = {
|
|
|
id: this.$route.query.id
|
|
|
};
|
|
|
+ this.curPaperId = this.$route.query.id;
|
|
|
this.$api.getPaperInfo(params).then((res) => {
|
|
|
let imgs = JSON.parse(res.data.data.imgs);
|
|
|
this.curPaperImg = imgs[0];
|
|
|
@@ -347,7 +341,7 @@
|
|
|
this.form = {};
|
|
|
// this.initCropper();
|
|
|
},
|
|
|
- editAnsCard(item) {
|
|
|
+ editAnsCard(item,curPaperId) {
|
|
|
this.open = true;
|
|
|
this.curAnsImg = item;
|
|
|
this.recCurAnsImg = null;
|
|
|
@@ -355,6 +349,16 @@
|
|
|
this.addQueForm = {};
|
|
|
this.stdChoiceList = [];
|
|
|
this.ansImgLoading = false;
|
|
|
+ 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];
|
|
|
+ this.snoImg = res.data.data.khPoints;
|
|
|
+ if(res.data.data.stdChoices){
|
|
|
+ this.stdChoiceList = JSON.parse(res.data.data.stdChoices);
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
this.initAnsCropper();
|
|
|
},
|
|
|
updatePaperRecInfo() {
|
|
|
@@ -370,7 +374,8 @@
|
|
|
id: this.$route.query.id,
|
|
|
stdQnoPoints: this.stdQnoPoints,
|
|
|
khPoints: this.snoImg,
|
|
|
- ansPoints: this.ansCardImgList[0]
|
|
|
+ ansPoints: this.ansCardImgList[0],
|
|
|
+ stdChoices: this.stdChoiceList
|
|
|
}
|
|
|
this.$api.updatePaperInfo(params).then(res => {
|
|
|
this.msgSuccess("成功!");
|
|
|
@@ -398,33 +403,37 @@
|
|
|
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.myCropper.setDragMode("move");
|
|
|
+ that.dragMode = "move"
|
|
|
+ e.preventDefault();
|
|
|
}
|
|
|
})
|
|
|
document.addEventListener('keyup', function (e) {
|
|
|
if (e.keyCode == 32) {
|
|
|
that.myCropper.setDragMode("crop");
|
|
|
- // that.myCropper.clear()
|
|
|
+ that.dragMode = "crop"
|
|
|
+ e.preventDefault();
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
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) {
|
|
|
- that.stdPointImg = cropperImgData;
|
|
|
- }
|
|
|
- if (that.stepNum == 2) {
|
|
|
- that.snoImg = cropperImgData;
|
|
|
- }
|
|
|
- if (that.stepNum == 3) {
|
|
|
- that.ansCardImgList.push(cropperImgData);
|
|
|
+ if (that.dragMode == "crop") {
|
|
|
+ // let cropData = that.myCropper.getCropBoxData();
|
|
|
+ let cropperImgData = this.cropper.getCroppedCanvas({
|
|
|
+ width: 1310
|
|
|
+ }).toDataURL("image/jpeg");
|
|
|
+ if (that.stepNum == 1) {
|
|
|
+ that.stdPointImg = cropperImgData;
|
|
|
+ }
|
|
|
+ if (that.stepNum == 2) {
|
|
|
+ that.snoImg = cropperImgData;
|
|
|
+ }
|
|
|
+ if (that.stepNum == 3) {
|
|
|
+ that.ansCardImgList.push(cropperImgData);
|
|
|
+ }
|
|
|
}
|
|
|
that.myCropper.clear()
|
|
|
},
|
|
|
@@ -436,7 +445,7 @@
|
|
|
},
|
|
|
initAnsCropper() {
|
|
|
let that = this;
|
|
|
- if(that.myAnsCropper){
|
|
|
+ if (that.myAnsCropper) {
|
|
|
that.myAnsCropper.destroy();
|
|
|
}
|
|
|
this.$nextTick(function () {
|
|
|
@@ -449,7 +458,7 @@
|
|
|
// aspectRatio: 1,
|
|
|
preview: '.before',
|
|
|
background: false,
|
|
|
- autoCropArea: 0.6,
|
|
|
+ // autoCropArea: 0.6,
|
|
|
zoomOnWheel: true,
|
|
|
cropBoxResizable: true,
|
|
|
movable: true,
|
|
|
@@ -460,22 +469,25 @@
|
|
|
document.addEventListener('keydown', function (e) {
|
|
|
if (e.keyCode == 32) {
|
|
|
that.myAnsCropper.setDragMode("move");
|
|
|
+ that.ansDragMode = "move"
|
|
|
+ e.preventDefault();
|
|
|
}
|
|
|
})
|
|
|
document.addEventListener('keyup', function (e) {
|
|
|
if (e.keyCode == 32) {
|
|
|
that.myAnsCropper.setDragMode("crop");
|
|
|
- // that.myCropper.clear()
|
|
|
+ that.ansDragMode = "crop"
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
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)
|
|
|
+ if(that.ansDragMode=="crop"){
|
|
|
+ let cropperImgData = this.cropper.getCroppedCanvas({
|
|
|
+ width: 1310
|
|
|
+ }).toDataURL("image/jpeg");
|
|
|
+ that.stdChoiceList.push(cropperImgData)
|
|
|
+ }
|
|
|
that.myAnsCropper.clear()
|
|
|
},
|
|
|
crop() {
|
|
|
@@ -494,15 +506,16 @@
|
|
|
threshVal: this.threshVal,
|
|
|
stdChoiceList: this.stdChoiceList
|
|
|
}).then(res => {
|
|
|
- if(!res.data.code){
|
|
|
+ if (!res.data.code) {
|
|
|
this.recCurAnsImg = res.data.data.recImg;
|
|
|
this.stdQnoPoints = res.data.data.ansCnts;
|
|
|
+ console.log(this.stdQnoPoints,44444444444444444)
|
|
|
this.myAnsCropper.destroy();
|
|
|
this.initAnsCropper();
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.msgError("识别错误,请仔细检查!")
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
this.ansImgLoading = false;
|
|
|
})
|
|
|
},
|
|
|
@@ -510,13 +523,30 @@
|
|
|
let fQno = parseInt(this.addQueForm.fQno);
|
|
|
let tQno = parseInt(this.addQueForm.tQno);
|
|
|
for (var i = fQno; i < tQno + 1; i++) {
|
|
|
+ this.stdQueList.forEach((item, index) => {
|
|
|
+ if (item.qno == String(i)) {
|
|
|
+ // item.score = this.addQueForm.score
|
|
|
+ // item.qtype = this.addQueForm.qtype
|
|
|
+ this.stdQueList[index].score = this.addQueForm.score
|
|
|
+ this.stdQueList[index].qtype = this.addQueForm.qtype
|
|
|
+ this.stdQueList[index].stdAns = this.addQueForm.stdAns.join(",")
|
|
|
+ this.$set(this.stdQueList[index], "score", this.addQueForm.score)
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ autoSetScore() {
|
|
|
+ this.stdQueList = [];
|
|
|
+ this.stdQnoPoints.forEach((item, index) => {
|
|
|
let queRow = {
|
|
|
- qno: i,
|
|
|
- score: this.addQueForm.score,
|
|
|
- qtype: this.addQueForm.qtype
|
|
|
+ qno: item[0].qno,
|
|
|
+ score: null,
|
|
|
+ qtype: "",
|
|
|
+ stdAns: ""
|
|
|
}
|
|
|
this.stdQueList.push(queRow)
|
|
|
- }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
created() {
|
Your Name