|
|
@@ -4,14 +4,23 @@
|
|
|
<el-aside width="260px" class="hide_scrollbar">
|
|
|
<div class="side_list">
|
|
|
<div class="side_title">待练习知识点</div>
|
|
|
- <div :class="['side_item',{'active':item.exerciseId == exerciseId}]" v-for="item in waitList" :key="item.exerciseId" @click="ChangeKnowledge(item)">
|
|
|
+ <div
|
|
|
+ :class="['side_item', { active: item.exerciseId == exerciseId }]"
|
|
|
+ v-for="item in waitList"
|
|
|
+ :key="item.exerciseId"
|
|
|
+ @click="ChangeKnowledge(item)"
|
|
|
+ >
|
|
|
<div class="item_name">
|
|
|
{{ item.knowledgeName }}
|
|
|
</div>
|
|
|
<div class="item_content">
|
|
|
<div class="content_left">
|
|
|
- <div class="content_type">{{ item.exerciseType == 1?'自主练习':'指定练习' }}</div>
|
|
|
- <div class="content_num">题量：{{ item?.questionNum || '0' }}</div>
|
|
|
+ <div class="content_type">
|
|
|
+ {{ item.exerciseType == 1 ? "自主练习" : "指定练习" }}
|
|
|
+ </div>
|
|
|
+ <div class="content_num">
|
|
|
+ 题量：{{ item?.questionNum || "0" }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="ai_explain">
|
|
|
<img class="ai_icon" src="@/assets/icon_ai.png" />
|
|
|
@@ -38,43 +47,70 @@
|
|
|
v-for="(item, index) in questionList"
|
|
|
:key="item.questionId"
|
|
|
>
|
|
|
- <QuestionItem :question="item" :index="index+1"></QuestionItem>
|
|
|
- <div :class="['question_footer', { img_list: index == 1 }]">
|
|
|
+ <QuestionItem :index="index + 1" :question="item"></QuestionItem>
|
|
|
+ <!-- 客观题->选择、判断。主观题->上传图片 -->
|
|
|
+ <!-- isObjective 是否客观题 1是 0否 isJudge 是否判断题 1是 0否 -->
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'question_footer',
|
|
|
+ { img_list: Number(item.isObjective) === 0 },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
<span class="footer_title">我的作答：</span>
|
|
|
- <template v-if="index == 1">
|
|
|
- <div class="upload_answer">
|
|
|
- <el-upload
|
|
|
- class="img_uploader"
|
|
|
- list-type="picture-card"
|
|
|
- :auto-upload="false"
|
|
|
- :show-file-list="false"
|
|
|
- multiple
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- >
|
|
|
- <el-button slot="default" class="upload_btn" plain
|
|
|
- >拍照/上传答案</el-button
|
|
|
- >
|
|
|
- </el-upload>
|
|
|
- <div
|
|
|
- class="upload_list_item"
|
|
|
- v-for="(item, index) in fileList"
|
|
|
- :key="index"
|
|
|
- @click="handlePictureCardPreview(item)"
|
|
|
+ <div
|
|
|
+ v-if="Number(item.isObjective) === 1"
|
|
|
+ class="upload_answer"
|
|
|
+ >
|
|
|
+ <!-- 判断题 -->
|
|
|
+ <el-radio-group
|
|
|
+ class="radio_group"
|
|
|
+ v-if="Number(item.isJudge) === 1"
|
|
|
+ v-model="item.answer"
|
|
|
+ @input="HandleJudgeChange(item)"
|
|
|
+ >
|
|
|
+ <el-radio label="√">√</el-radio>
|
|
|
+ <el-radio label="×">×</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <!-- 选择题 -->
|
|
|
+ <el-checkbox-group
|
|
|
+ class="checkbox_group"
|
|
|
+ v-else
|
|
|
+ v-model="item.answer"
|
|
|
+ @change="HandleCheckChange(item)"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ v-for="num in item.optionsNum"
|
|
|
+ :key="num"
|
|
|
+ :label="optionsData[num - 1]"
|
|
|
+ ></el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <div v-else class="upload_answer">
|
|
|
+ <el-upload
|
|
|
+ class="img_uploader"
|
|
|
+ list-type="picture-card"
|
|
|
+ :auto-upload="false"
|
|
|
+ :show-file-list="false"
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ multiple
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ >
|
|
|
+ <el-button slot="default" class="upload_btn" plain
|
|
|
+ >拍照/上传答案</el-button
|
|
|
>
|
|
|
- <img :src="item.url" />
|
|
|
- <i
|
|
|
- @click.stop="handleRemove(file)"
|
|
|
- class="el-icon-error upload_list_item_delete"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
+ </el-upload>
|
|
|
+ <div
|
|
|
+ class="upload_list_item"
|
|
|
+ v-for="(item, index) in fileList"
|
|
|
+ :key="index"
|
|
|
+ @click="handlePictureCardPreview(item)"
|
|
|
+ >
|
|
|
+ <img :src="item.url" />
|
|
|
+ <i
|
|
|
+ @click.stop="handleRemove(file)"
|
|
|
+ class="el-icon-error upload_list_item_delete"
|
|
|
+ ></i>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <div v-else class="upload_answer">
|
|
|
- <el-radio-group class="radio_group" v-model="radio">
|
|
|
- <el-radio :label="3">备选项</el-radio>
|
|
|
- <el-radio :label="6">备选项</el-radio>
|
|
|
- <el-radio :label="9">备选项</el-radio>
|
|
|
- </el-radio-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -136,9 +172,38 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
waitList: [], //待练习知识点
|
|
|
- exerciseId: '', // 练习id
|
|
|
- knowledgeName:'',//知识点名称
|
|
|
+ exerciseId: "", // 练习id
|
|
|
+ knowledgeName: "", //知识点名称
|
|
|
questionList: [],
|
|
|
+ optionsData: [
|
|
|
+ "A",
|
|
|
+ "B",
|
|
|
+ "C",
|
|
|
+ "D",
|
|
|
+ "E",
|
|
|
+ "F",
|
|
|
+ "G",
|
|
|
+ "H",
|
|
|
+ "I",
|
|
|
+ "J",
|
|
|
+ "K",
|
|
|
+ "L",
|
|
|
+ "M",
|
|
|
+ "N",
|
|
|
+ "O",
|
|
|
+ "P",
|
|
|
+ "Q",
|
|
|
+ "R",
|
|
|
+ "S",
|
|
|
+ "T",
|
|
|
+ "U",
|
|
|
+ "V",
|
|
|
+ "W",
|
|
|
+ "X",
|
|
|
+ "Y",
|
|
|
+ "Z",
|
|
|
+ ],
|
|
|
+ checkbox: [],
|
|
|
fileList: [
|
|
|
{
|
|
|
name: "food.jpeg",
|
|
|
@@ -149,10 +214,10 @@ export default {
|
|
|
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
|
|
},
|
|
|
],
|
|
|
- dialogImageUrl: "",//图片预览
|
|
|
- dialogVisible: false,//图片预览
|
|
|
- dialogPaperVisible: false,//下载试卷
|
|
|
- radio: 3,//下载试卷
|
|
|
+ dialogImageUrl: "", //图片预览
|
|
|
+ dialogVisible: false, //图片预览
|
|
|
+ dialogPaperVisible: false, //下载试卷
|
|
|
+ radio: 3, //下载试卷
|
|
|
};
|
|
|
},
|
|
|
watch: {},
|
|
|
@@ -170,36 +235,65 @@ export default {
|
|
|
.then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
this.waitList = res?.data || [];
|
|
|
- if(this.waitList.length > 0){
|
|
|
- this.exerciseId = this.waitList?.[0]?.exerciseId || '';
|
|
|
- this.knowledgeName = this.waitList?.[0]?.knowledgeName || '';
|
|
|
- this.GetStudentTargeExerciseQuestion();
|
|
|
+ if (this.waitList.length > 0) {
|
|
|
+ this.exerciseId = this.waitList?.[0]?.exerciseId || "";
|
|
|
+ this.knowledgeName = this.waitList?.[0]?.knowledgeName || "";
|
|
|
+ this.GetStudentTargeExerciseQuestion();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 查询试题列表（type 1待练习的列表 2已练习的列表）
|
|
|
- GetStudentTargeExerciseQuestion(){
|
|
|
- this.$api.target
|
|
|
+ GetStudentTargeExerciseQuestion() {
|
|
|
+ this.$api.target
|
|
|
.studentTargeExerciseQuestion({
|
|
|
- exerciseId: this.exerciseId, // 练习id
|
|
|
+ exerciseId: this.exerciseId, // 练习id
|
|
|
type: 1, // 1待练习的列表 2已练习的列表
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
- this.questionList = res?.data || [];
|
|
|
- }else{
|
|
|
+ // 客观题->选择、判断。主观题->上传图片
|
|
|
+ // isObjective 是否客观题 1是 0否 isJudge 是否判断题 1是 0否
|
|
|
+ const questionList = res?.data || [];
|
|
|
+ questionList.forEach((item) => {
|
|
|
+ if (Number(item.isObjective) === 1) {
|
|
|
+ //客观题
|
|
|
+ let answer = "";
|
|
|
+ if (Number(item.isJudge) === 1) {
|
|
|
+ //判断题
|
|
|
+ answer = item.answer || "";
|
|
|
+ } else {
|
|
|
+ //选择题
|
|
|
+ answer = Array.isArray(item.answer) ? item.answer : [];
|
|
|
+ }
|
|
|
+ item.answer = answer;
|
|
|
+ } else {
|
|
|
+ item.answer = Array.isArray(item.answer) ? item.answer : [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.questionList = questionList;
|
|
|
+ } else {
|
|
|
this.questionList = [];
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//切换知识点
|
|
|
- ChangeKnowledge(item) {
|
|
|
- console.log("打印切换知识点",item);
|
|
|
- this.exerciseId = item.exerciseId || '';
|
|
|
- this.knowledgeName = item.knowledgeName || '';
|
|
|
+ ChangeKnowledge(item) {
|
|
|
+ if (this.exerciseId == item.exerciseId) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.exerciseId = item.exerciseId || "";
|
|
|
+ this.knowledgeName = item.knowledgeName || "";
|
|
|
this.GetStudentTargeExerciseQuestion();
|
|
|
},
|
|
|
+ //判断题改变
|
|
|
+ HandleJudgeChange(item) {
|
|
|
+ item.answer = item.answer || "";
|
|
|
+ },
|
|
|
+ //选择题改变
|
|
|
+ HandleCheckChange(item) {
|
|
|
+ item.answer = item.answer || [];
|
|
|
+ },
|
|
|
//删除图片
|
|
|
handleRemove(file) {
|
|
|
console.log(file);
|
|
|
@@ -251,9 +345,10 @@ export default {
|
|
|
padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
cursor: pointer;
|
|
|
- &:active {
|
|
|
- background: rgba(46,100,250,0.1);
|
|
|
- border: 1px solid #2E64FA;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: rgba(46, 100, 250, 0.1);
|
|
|
+ border: 1px solid #2e64fa;
|
|
|
}
|
|
|
|
|
|
.item_name {
|
|
|
@@ -313,6 +408,7 @@ export default {
|
|
|
.main_body {
|
|
|
padding: 0 0 0 10px;
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
.content_main {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -322,6 +418,7 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
background-color: #ffffff;
|
|
|
border-radius: 10px;
|
|
|
+
|
|
|
.content_title {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
@@ -329,6 +426,7 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.title_name {
|
|
|
font-weight: 500;
|
|
|
font-size: 16px;
|
|
|
@@ -339,22 +437,28 @@ export default {
|
|
|
text-overflow: ellipsis;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+
|
|
|
.button {
|
|
|
display: flex;
|
|
|
+
|
|
|
:deep(.el-button) {
|
|
|
padding: 10px 20px;
|
|
|
}
|
|
|
+
|
|
|
.download_btn {
|
|
|
color: #666666;
|
|
|
+
|
|
|
&:hover {
|
|
|
border-color: #dcdfe6;
|
|
|
}
|
|
|
+
|
|
|
&:focus {
|
|
|
border-color: #dcdfe6;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.question_list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -363,40 +467,50 @@ export default {
|
|
|
overflow: auto;
|
|
|
box-sizing: border-box;
|
|
|
flex: 1;
|
|
|
+
|
|
|
.question_item {
|
|
|
background: #ffffff;
|
|
|
border-radius: 10px 10px 10px 10px;
|
|
|
border: 1px solid #dcdfe6;
|
|
|
+
|
|
|
:deep(.question_preview) {
|
|
|
padding: 16px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
&:first-child {
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
+
|
|
|
margin-top: 20px;
|
|
|
+
|
|
|
.question_footer {
|
|
|
padding: 20px 16px;
|
|
|
background-color: #f8f8f9;
|
|
|
border-top: 1px solid #dcdfe6;
|
|
|
display: flex;
|
|
|
+
|
|
|
// align-items: center;
|
|
|
&.img_list {
|
|
|
padding: 16px;
|
|
|
+
|
|
|
.footer_title {
|
|
|
line-height: 48px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.footer_title {
|
|
|
font-weight: 500;
|
|
|
font-size: 14px;
|
|
|
color: #333333;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
+
|
|
|
.upload_answer {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+
|
|
|
.img_uploader {
|
|
|
// display: flex;
|
|
|
// flex-direction: row-reverse;
|
|
|
@@ -412,6 +526,7 @@ export default {
|
|
|
border: 1px solid #ebeef5;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-upload--picture-card) {
|
|
|
background-color: transparent;
|
|
|
border: 0;
|
|
|
@@ -421,6 +536,7 @@ export default {
|
|
|
border-radius: 0;
|
|
|
margin-right: 22px;
|
|
|
}
|
|
|
+
|
|
|
.upload_btn {
|
|
|
border: 1px solid #2e64fa;
|
|
|
font-weight: 400;
|
|
|
@@ -429,6 +545,7 @@ export default {
|
|
|
padding: 9px 15px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.upload_list_item {
|
|
|
width: 64px;
|
|
|
height: 48px;
|
|
|
@@ -440,11 +557,13 @@ export default {
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
+
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
+
|
|
|
.upload_list_item_delete {
|
|
|
position: absolute;
|
|
|
top: 3px;
|
|
|
@@ -455,6 +574,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.radio_group {
|
|
|
:deep(.el-radio) {
|
|
|
line-height: 24px;
|
|
|
@@ -462,18 +582,22 @@ export default {
|
|
|
font-size: 14px;
|
|
|
color: #333333;
|
|
|
margin-right: 20px;
|
|
|
+
|
|
|
.el-radio__input {
|
|
|
&.is-checked + .el-radio__label {
|
|
|
color: #333333;
|
|
|
}
|
|
|
+
|
|
|
&.is-checked .el-radio__inner {
|
|
|
border-color: #2e64fa;
|
|
|
background-color: #ffff;
|
|
|
}
|
|
|
+
|
|
|
.el-radio__inner {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
border-color: rgba(0, 0, 0, 0.2);
|
|
|
+
|
|
|
&::after {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
@@ -481,36 +605,78 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.el-radio__label {
|
|
|
padding-left: 4px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .checkbox_group {
|
|
|
+ //多选
|
|
|
+ :deep(.el-checkbox) {
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ .is-checked + .el-checkbox__label {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .is-checked .el-checkbox__inner {
|
|
|
+ border-color: #2e64fa;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox__input {
|
|
|
+ .el-checkbox__inner {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-color: rgba(0, 0, 0, 0.2);
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox__label {
|
|
|
+ padding-left: 4px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.dialog_img {
|
|
|
height: 70vh;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
+
|
|
|
.dialog_paper {
|
|
|
padding: 8px 4px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 20px;
|
|
|
+
|
|
|
.dialog_paper_item {
|
|
|
height: 36px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.dialog_paper_title {
|
|
|
font-weight: 400;
|
|
|
font-size: 14px;
|
|
|
color: #303133;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+
|
|
|
.radio_group {
|
|
|
:deep(.el-radio) {
|
|
|
line-height: 24px;
|
|
|
@@ -518,18 +684,22 @@ export default {
|
|
|
font-size: 14px;
|
|
|
color: #333333;
|
|
|
margin-right: 40px;
|
|
|
+
|
|
|
.el-radio__input {
|
|
|
&.is-checked + .el-radio__label {
|
|
|
color: #333333;
|
|
|
}
|
|
|
+
|
|
|
&.is-checked .el-radio__inner {
|
|
|
border-color: #2e64fa;
|
|
|
background-color: #ffff;
|
|
|
}
|
|
|
+
|
|
|
.el-radio__inner {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
border-color: rgba(0, 0, 0, 0.2);
|
|
|
+
|
|
|
&::after {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
@@ -537,6 +707,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.el-radio__label {
|
|
|
padding-left: 4px;
|
|
|
}
|
