Browse Source

连线带图片等高问题,

qinpeng 2 years ago
parent
commit
0515cae491
2 changed files with 25 additions and 30 deletions
  1. 23 28
      src/components/Adult/preview/Ligature.vue
  2. 2 2
      src/views/courseView.vue

+ 23 - 28
src/components/Adult/preview/Ligature.vue

@@ -30,7 +30,7 @@
           <ul>
             <div>{{ curQue.conTitle }}</div>
             <li
-              :class="['left' + index + number]"
+              :class="[judgeAnswer + 'left' + index + number]"
               v-for="(item, index) in curQue.con"
               :key="'left' + index"
             >
@@ -134,7 +134,7 @@
           <ul>
             <div>{{ curQue.optionTitle }}</div>
             <li
-              :class="['right' + index + number]"
+              :class="[judgeAnswer + 'right' + index + number]"
               v-for="(item, index) in curQue.option"
               :key="'right' + index"
             >
@@ -276,18 +276,22 @@ export default {
     // 判断对错
     YouranswerClass(item, type) {
       if (this.judgeAnswer == "studentAnswer") {
-        let clss = "error";
+        let clss = "";
         this.data.data.forEach((items) => {
           if (type == "left") {
             if (items.source == item.nodeId) {
               if (items.correct) {
                 clss = "correct";
+              } else if (items.error) {
+                clss = "error";
               }
             }
           } else {
             if (items.target == item.nodeId) {
               if (items.correct) {
                 clss = "correct";
+              } else if (items.error) {
+                clss = "error";
               }
             }
           }
@@ -331,7 +335,10 @@ export default {
       this.jsPlumb = this.$jsPlumb.getInstance({
         Container: "container" + this.number + this.judgeAnswer, // 选择器id
         EndpointStyle: { radius: 1, fill: "#74B5CA" }, // 端点样式
-        PaintStyle: { stroke: "#DE4444", strokeWidth: 2 }, // 绘画样式,默认8px线宽  #456
+        PaintStyle: {
+          stroke: "#DE4444",
+          strokeWidth: 2,
+        }, // 绘画样式,默认8px线宽  #456
         HoverPaintStyle: { stroke: "#18A0FB", strokeWidth: null }, // 默认悬停样式  默认为null
         ConnectionOverlays: [
           //   // 此处可以设置所有箭头的样式
@@ -467,10 +474,10 @@ export default {
         _this.curQue.option.forEach((item, index) => {
           for (let i = 0; i < this.curQue.con.length; i++) {
             let nodeleft = document.getElementsByClassName(
-              `left${i + this.number}`
+              this.judgeAnswer + `left${i + this.number}`
             )[0];
             let noderight = document.getElementsByClassName(
-              `right${index + this.number}`
+              this.judgeAnswer + `right${index + this.number}`
             )[0];
             if (nodeleft.offsetHeight > noderight.offsetHeight) {
               noderight.style.height = nodeleft.offsetHeight + "px";
@@ -480,7 +487,9 @@ export default {
           }
         });
       }
-      this.clearLine();
+      this.jsPlumb.deleteEveryConnection(); //清除连线方法
+
+      this.$forceUpdate();
       if (this.data.data.length > 0) {
         this.data.data.forEach((item) => {
           this.jsPlumb.connect({
@@ -525,6 +534,7 @@ export default {
   },
   //生命周期 - 创建完成(可以访问当前this实例)
   created() {
+    this.allimgnumber = 0;
     if (!this.curQue.Bookanswer) {
       // sData = JSON.parse(sessionStorage.getItem("LineData"));
     } else {
@@ -579,9 +589,7 @@ export default {
           ? "left_" + i + this.number + "Isexample" + this.judgeAnswer
           : "left_" + i + this.number + this.judgeAnswer;
         item.nodeId = nodeId;
-        if (item.img_list.length > 0) {
-          this.allimgnumber++;
-        }
+
         if (item.Isexample) {
           this.data.data.push({
             source: item.nodeId,
@@ -596,9 +604,6 @@ export default {
           ? "right_" + i + this.number + "Isexample" + this.judgeAnswer
           : "right_" + i + this.number + this.judgeAnswer;
         item.nodeId = nodeId;
-        if (item.img_list.length > 0) {
-          this.allimgnumber++;
-        }
       });
       this.curQue = JSON.parse(JSON.stringify(conData));
     }
@@ -610,10 +615,10 @@ export default {
     if (this.allimgnumber == 0) {
       for (let i = 0; i < this.curQue.con.length; i++) {
         let nodeleft = document.getElementsByClassName(
-          `left${i + this.number}`
+          this.judgeAnswer + `left${i + this.number}`
         )[this.judgeAnswer == "standardAnswer" ? 1 : 0];
         let noderight = document.getElementsByClassName(
-          `right${i + this.number}`
+          this.judgeAnswer + `right${i + this.number}`
         )[this.judgeAnswer == "standardAnswer" ? 1 : 0];
         if (nodeleft && noderight) {
           if (nodeleft.offsetHeight > noderight.offsetHeight) {
@@ -654,6 +659,8 @@ export default {
             ) {
               if (item.target == this.curQue.option[con.AnswerList].nodeId) {
                 item.correct = true;
+              } else {
+                item.error = true;
               }
             }
           }
@@ -677,19 +684,7 @@ export default {
   //生命周期-更新之前
   beforUpdate() {},
   //生命周期-更新之后
-  updated() {
-    for (let i = 0; i < this.curQue.con.length; i++) {
-      let nodeleft = document.getElementsByClassName(`left${i}`)[0];
-      let noderight = document.getElementsByClassName(`right${i}`)[0];
-      if (nodeleft && noderight) {
-        if (nodeleft.offsetHeight > noderight.offsetHeight) {
-          noderight.style.height = nodeleft.offsetHeight + "px";
-        } else {
-          nodeleft.style.height = noderight.offsetHeight + "px";
-        }
-      }
-    }
-  },
+  updated() {},
   //生命周期-销毁之前
   beforeDestory() {},
   //生命周期-销毁完成

+ 2 - 2
src/views/courseView.vue

@@ -56,7 +56,7 @@
           :is-show-title="true"
           :book-answer-content="bookAnswerContent"
           :task-model="TaskModel"
-          :is-show-save="true"
+          :is-show-save="false"
           @finishTaskMaterial="finishTaskMaterial"
         />
       </div>
@@ -109,7 +109,7 @@ export default {
           ],
         },
       ],
-      bookAnswerContent: '[{"table_list":[[{"data":{"Bookanswer":[{"input":{"input":[{"value":"picture","userAnswerJudge":"[JUDGE##T##JUDGE]"}]},"judge":[],"single":[],"checkBox":[],"recordList":[]}]}}],[{"data":{"Bookanswer":[{"input":{"input":[{"value":"","userAnswerJudge":""}]},"judge":[],"single":[],"checkBox":[],"recordList":[]}]}}],[{"data":{"Bookanswer":[{"input":{"input":[{"value":"","userAnswerJudge":"[JUDGE##F##JUDGE]"}]},"judge":[],"single":[],"checkBox":[],"recordList":[]}]}}],[{"data":{"Bookanswer":[{"input":{"input":[{"value":"您","userAnswerJudge":"[JUDGE##T##JUDGE]"},{"value":"不好","userAnswerJudge":"[JUDGE##F##JUDGE]"}]},"judge":[],"single":[],"checkBox":[],"recordList":[]}]}}]]}]',
+      bookAnswerContent: ``,
       TaskModel: "", // TEST 考试模式; PRACTICE 练习模式; ANSWER 查看答案模式; 空 预览模式
       category: "",
       FatherTreeData: null,