调整连线

src/components/Adult/phonePreview/Ligature.vue

@@ -10,7 +10,7 @@
     "
   >
     <div class="main">
-      <div :style="{ textAlign: center, fontSize: baseSizePhone + 2 + 'px' }">
+      <div :style="{ textAlign: 'center', fontSize: baseSizePhone + 2 + 'px' }">
         {{ curQue.title }}
       </div>
       <div :id="'container' + number" class="container">
@@ -26,6 +26,7 @@
               :class="[judgeAnswer + 'left' + index + number]"
               v-for="(item, index) in curQue.con"
               :key="'left' + index"
+              @mousedown="mouseDown($event, item.nodeId)"
             >
               <!--             :style="{
               background:
@@ -33,7 +34,12 @@
                   ? '#F0F0F0'
                   : '',
             }" -->
-              <div>
+              <div
+                :class="[
+                  clickItem.indexOf(item.nodeId) > -1 ? 'active' : '',
+                  YouranswerClass(index, 'left', item)
+                ]"
+              >
                 <img
                   v-if="item.img_list.length > 0"
                   :src="item.img_list[0].id"
@@ -46,10 +52,7 @@
                  -->
                 <div
                   class="text"
-                  :class="[
-                    'left' + index,
-                    YouranswerClass(index, 'left', item)
-                  ]"
+                  :class="['left' + index]"
                   v-if="
                     item.detail.wordsList.length > 0 || item.detail.sentence
                   "
@@ -173,6 +176,7 @@
               :class="[judgeAnswer + 'right' + index + number]"
               v-for="(item, index) in curQue.option"
               :key="'right' + index"
+              @mousedown="mouseDown($event, item.nodeId)"
             >
               <!--             :style="{
               background:
@@ -201,7 +205,18 @@
                 }"
                 >{{ item.Number }}</span
               >
-              <div>
+              <div
+                :class="[
+                  clickItem.indexOf(item.nodeId) > -1 ? 'active' : '',
+                  YouranswerClass(
+                    index,
+                    'right',
+                    item,
+                    judgeAnswer + item.nodeId
+                  )
+                ]"
+                :id="judgeAnswer + item.nodeId"
+              >
                 <img
                   v-if="item.img_list.length > 0"
                   :src="item.img_list[0].id"
@@ -214,10 +229,7 @@
                  -->
                 <div
                   class="text"
-                  :class="[
-                    'right' + index,
-                    YouranswerClass(index, 'right', item)
-                  ]"
+                  :class="['right' + index]"
                   v-if="
                     item.detail.wordsList.length > 0 || item.detail.sentence
                   "
@@ -339,7 +351,14 @@ export default {
         data: []
       },
       allimgnumber: 0,
-      lodimgnumber: 0
+      lodimgnumber: 0,
+      clickItem: [],
+      curItem: "",
+      pos: {
+        pageX: 0,
+        pageY: 0
+      },
+      dataNew: []
     };
   },
   //计算属性 类似于data概念
@@ -347,6 +366,12 @@ export default {
   //监控data中数据变化
   watch: {
     curQue(val, oldval) {
+      if (!this.judgeAnswer) {
+        this.handleData();
+      } else {
+        this.dataNew = JSON.parse(JSON.stringify(this.data.data));
+      }
+
       this.$forceUpdate(); //触发更新函数更新高度
     },
     baseSizePhone(val, oldval) {
@@ -374,12 +399,11 @@ export default {
   //方法集合
   methods: {
     // 判断对错
-    YouranswerClass(index, type, item) {
+    YouranswerClass(index, type, item, id) {
       let clss = "";
       if (
         this.judgeAnswer == "studentAnswer" ||
-        this.judgeAnswer == "userAnswer" ||
-        this.judgeAnswer == "standardAnswer"
+        this.judgeAnswer == "userAnswer"
       ) {
         let items = this.data.data[index];
 
@@ -392,35 +416,50 @@ export default {
             }
           }
         } else {
-          this.curQue.con.forEach(itemss => {
-            if (
-              Object.prototype.toString
-                .call(itemss.AnswerList)
-                .indexOf("Number") != -1
-            ) {
-              if (itemss.AnswerList == index) {
-                clss = "error";
+          if (
+            document.getElementById(id) &&
+            !document.getElementById(id).getAttribute("class")
+          ) {
+            let _this = this;
+            this.$nextTick(() => {
+              for (let i = 0; i < _this.data.data.length; i++) {
+                let dItems = _this.data.data[i];
+                if (item.nodeId == dItems.target && !clss) {
+                  if (dItems.correct) {
+                    clss = "correct";
+                  } else if (dItems.error) {
+                    clss = "error";
+                  }
+                  document.getElementById(id).setAttribute("class", clss);
+                }
               }
-            }
-          });
 
-          for (let i = 0; i < this.data.data.length; i++) {
-            let dItems = this.data.data[i];
-            if (item.nodeId == dItems.target) {
-              if (dItems.correct) {
-                clss = "correct";
-              } else if (dItems.error) {
-                clss = "error";
+              if (items && items.Isexample) {
+                clss = "example";
               }
-              break;
-            }
-          }
-
-          if (items && items.Isexample) {
-            clss = "example";
+              // if (!clss) {
+              //   _this.curQue.con.forEach(itemss => {
+              //     if (
+              //       Object.prototype.toString
+              //         .call(itemss.AnswerList)
+              //         .indexOf("Number") != -1
+              //     ) {
+              //       console.log(itemss.AnswerList === index);
+              //       if (itemss.AnswerList === index) {
+              //         clss = "error";
+              //       }
+              //     }
+              //   });
+              //   console.log(clss);
+              // }
+            });
           }
         }
       }
+      if (this.judgeAnswer == "standardAnswer") {
+        clss = "correct";
+      }
+
       return clss;
     },
     //   清除所有连线
@@ -521,6 +560,7 @@ export default {
               this.$set(this.data.data[i], "target", null);
             }
           });
+          this.clickItem = [];
           this.changeAllCorrect();
           let node = document.getElementById(conn.sourceId);
           this.jsPlumb.removeAllEndpoints(node);
@@ -548,6 +588,18 @@ export default {
                 this.$set(this.data.data[i], "target", conn.targetId);
               }
             });
+            this.curQue.option.forEach((item, i) => {
+              if (conn.sourceId == item.nodeId) {
+                let index = 0;
+                this.curQue.con.forEach((element, indexs) => {
+                  if (element.nodeId === conn.targetId) {
+                    index = indexs;
+                  }
+                });
+                this.$set(this.data.data[index], "target", conn.sourceId);
+                this.$set(this.data.data[index], "source", conn.targetId);
+              }
+            });
             this.changeAllCorrect();
             sessionStorage.setItem("LineData", JSON.stringify(this.data));
             this.$set(
@@ -556,12 +608,13 @@ export default {
               JSON.parse(JSON.stringify(this.data))
             );
           }
+          this.clickItem = [];
         });
       }
 
       //右键触发
       this.jsPlumb.bind("contextmenu", (conn, originalEvent) => {
-        console.log(conn, originalEvent);
+        // console.log(conn, originalEvent);
       });
     },
     //  初始化规则使其可以连线、拖拽
@@ -672,88 +725,73 @@ export default {
           this.data.userAnswerJudge = "";
         }
       }
-    }
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    this.allimgnumber = 0;
-    let flag = false;
-    if (!this.curQue.Bookanswer) {
-      flag = true;
-      // sData = JSON.parse(sessionStorage.getItem("LineData"));
-      let isanswer = false;
-      this.curQue.con.forEach(con => {
-        if (
-          Object.prototype.toString.call(con.AnswerList).indexOf("Number") != -1
-        ) {
-          isanswer = true;
+    },
+    mouseDown(e, index) {
+      this.curItem = index;
+      this.pos = {
+        pageX: e.pageX,
+        pageY: e.pageY
+      };
+    },
+    mock(e) {
+      if (
+        Math.abs(e.pageX - this.pos.pageX) <= 10 &&
+        Math.abs(e.pageY - this.pos.pageY) <= 10
+      ) {
+        if (this.clickItem.length > 0) {
+          if (this.clickItem.indexOf(this.curItem) === -1) {
+            let str = this.clickItem[0].split("_")[0];
+            let str1 = this.curItem.split("_")[0];
+            // 如果最新点击的点和之前保存的为同一侧则替换 不同侧则连线
+            if (str !== str1) {
+              this.clickItem.push(this.curItem);
+              this.jsPlumb.connect({
+                source: this.clickItem[0],
+                target: this.clickItem[1]
+              });
+            } else {
+              this.clickItem[0] = this.curItem;
+            }
+          }
+        } else {
+          this.clickItem.push(this.curItem);
         }
-      });
-      if (isanswer) {
-        this.data.userAnswerJudge = "[JUDGE##F##JUDGE]";
       } else {
-        this.data.userAnswerJudge = "";
-      }
-      this.curQue.Bookanswer = this.data;
-    } else {
-      this.data = JSON.parse(JSON.stringify(this.curQue.Bookanswer));
-    }
-    this.curQue.con.forEach((item, i) => {
-      let nodeId = item.Isexample
-        ? "left_" + i + this.number + "Isexample" + this.judgeAnswer
-        : "left_" + i + this.number + this.judgeAnswer;
-      item.nodeId = nodeId;
-      if (item.img_list.length > 0) {
-        this.allimgnumber++;
+        this.clickItem = [];
       }
-      if (flag) {
-        if (item.Isexample) {
-          this.data.data.push({
-            source: item.nodeId,
-            target: "right_" + item.AnswerList + this.number + this.judgeAnswer,
-            index: i,
-            answer: item.AnswerList
-          });
+    },
+    handleData() {
+      this.allimgnumber = 0;
+      let flag = false;
+      if (!this.curQue.Bookanswer) {
+        flag = true;
+        // sData = JSON.parse(sessionStorage.getItem("LineData"));
+        let isanswer = false;
+        this.curQue.con.forEach(con => {
+          if (
+            Object.prototype.toString.call(con.AnswerList).indexOf("Number") !=
+            -1
+          ) {
+            isanswer = true;
+          }
+        });
+        if (isanswer) {
+          this.data.userAnswerJudge = "[JUDGE##F##JUDGE]";
+        } else {
+          this.data.userAnswerJudge = "";
         }
+        this.curQue.Bookanswer = this.data;
+      } else {
+        this.data = JSON.parse(JSON.stringify(this.curQue.Bookanswer));
       }
-    });
-    this.curQue.option.forEach((item, i) => {
-      let nodeId = item.Isexample
-        ? "right_" + i + this.number + "Isexample" + this.judgeAnswer
-        : "right_" + i + this.number + this.judgeAnswer;
-      item.nodeId = nodeId;
-      if (item.img_list.length > 0) {
-        this.allimgnumber++;
-      }
-    });
-    if (flag) {
-      this.curQue.con.forEach((item, i) => {
-        if (!item.Isexample) {
-          this.data.data.push({
-            answer: item.AnswerList,
-            index: i,
-            source: null,
-            target: null
-            // userAnswerJudge:
-            //   Object.prototype.toString.call(item.AnswerList).indexOf("Number") ==
-            //   -1
-            //     ? ""
-            //     : "[JUDGE##F##JUDGE]",
-          });
-        }
-      });
-    }
-
-    if (
-      this.judgeAnswer == "studentAnswer" ||
-      this.judgeAnswer == "userAnswer"
-    ) {
-      let conData = JSON.parse(JSON.stringify(this.curQue));
       this.curQue.con.forEach((item, i) => {
         let nodeId = item.Isexample
           ? "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 (flag) {
           if (item.Isexample) {
             this.data.data.push({
@@ -771,10 +809,64 @@ 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));
+      if (flag) {
+        this.curQue.con.forEach((item, i) => {
+          if (!item.Isexample) {
+            this.data.data.push({
+              answer: item.AnswerList,
+              index: i,
+              source: null,
+              target: null
+              // userAnswerJudge:
+              //   Object.prototype.toString.call(item.AnswerList).indexOf("Number") ==
+              //   -1
+              //     ? ""
+              //     : "[JUDGE##F##JUDGE]",
+            });
+          }
+        });
+      }
+
+      if (
+        this.judgeAnswer == "studentAnswer" ||
+        this.judgeAnswer == "userAnswer"
+      ) {
+        let conData = JSON.parse(JSON.stringify(this.curQue));
+        this.curQue.con.forEach((item, i) => {
+          let nodeId = item.Isexample
+            ? "left_" + i + this.number + "Isexample" + this.judgeAnswer
+            : "left_" + i + this.number + this.judgeAnswer;
+          item.nodeId = nodeId;
+          if (flag) {
+            if (item.Isexample) {
+              this.data.data.push({
+                source: item.nodeId,
+                target:
+                  "right_" + item.AnswerList + this.number + this.judgeAnswer,
+                index: i,
+                answer: item.AnswerList
+              });
+            }
+          }
+        });
+        this.curQue.option.forEach((item, i) => {
+          let nodeId = item.Isexample
+            ? "right_" + i + this.number + "Isexample" + this.judgeAnswer
+            : "right_" + i + this.number + this.judgeAnswer;
+          item.nodeId = nodeId;
+        });
+        this.curQue = JSON.parse(JSON.stringify(conData));
+      }
     }
   },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.handleData();
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.showPlumb();
@@ -865,6 +957,7 @@ export default {
         });
       });
     }
+    document.addEventListener("mouseup", this.mock);
   },
   //生命周期-创建之前
   beforeCreated() {},
@@ -875,7 +968,9 @@ export default {
   //生命周期-更新之后
   updated() {},
   //生命周期-销毁之前
-  beforeDestory() {},
+  beforeDestory() {
+    document.removeEventListener("mouseup", this.mock);
+  },
   //生命周期-销毁完成
   destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
@@ -949,6 +1044,12 @@ export default {
             font-size: 16px;
             line-height: 150%;
             color: #000000;
+            flex: 1;
+            text-align: right;
+            padding: 2px;
+            &.active {
+              background: #dcdbdd;
+            }
             img {
               max-width: 100%;
               height: 78px;
@@ -1046,6 +1147,11 @@ export default {
             font-size: 16px;
             line-height: 150%;
             color: #000000;
+            flex: 1;
+            padding: 2px;
+            &.active {
+              background: #dcdbdd;
+            }
             img {
               max-width: 100%;
               height: 78px;

src/components/Adult/phonePreview/NewWordShow.vue

@@ -378,7 +378,6 @@ export default {
         this.enMargin =
           (Number(730 / (Number(this.curQue.numberList.con) + 1)) - 64) / 2;
       });
-      console.log(this.curQue);
     },
     changePraShow() {
       this.isPraShow = false;

src/components/Adult/preview/Ligature.vue

@@ -19,6 +19,7 @@
               :class="[judgeAnswer + 'left' + index + number]"
               v-for="(item, index) in curQue.con"
               :key="'left' + index"
+              @mousedown="mouseDown($event, item.nodeId)"
             >
               <!--             :style="{
               background:
@@ -26,7 +27,12 @@
                   ? '#F0F0F0'
                   : '',
             }" -->
-              <div>
+              <div
+                :class="[
+                  clickItem.indexOf(item.nodeId) > -1 ? 'active' : '',
+                  YouranswerClass(index, 'left', item)
+                ]"
+              >
                 <img
                   v-if="item.img_list.length > 0"
                   :src="item.img_list[0].id"
@@ -39,10 +45,7 @@
                  -->
                 <div
                   class="text"
-                  :class="[
-                    'left' + index,
-                    YouranswerClass(index, 'left', item)
-                  ]"
+                  :class="['left' + index]"
                   v-if="
                     item.detail.wordsList.length > 0 || item.detail.sentence
                   "
@@ -155,6 +158,7 @@
               :class="[judgeAnswer + 'right' + index + number]"
               v-for="(item, index) in curQue.option"
               :key="'right' + index"
+              @mousedown="mouseDown($event, item.nodeId)"
             >
               <!--             :style="{
               background:
@@ -177,7 +181,18 @@
                 alt=""
               />
               <span v-if="item.Number">{{ item.Number }}</span>
-              <div>
+              <div
+                :class="[
+                  clickItem.indexOf(item.nodeId) > -1 ? 'active' : '',
+                  YouranswerClass(
+                    index,
+                    'right',
+                    item,
+                    judgeAnswer + item.nodeId
+                  )
+                ]"
+                :id="judgeAnswer + item.nodeId"
+              >
                 <img
                   v-if="item.img_list.length > 0"
                   :src="item.img_list[0].id"
@@ -190,10 +205,7 @@
                  -->
                 <div
                   class="text"
-                  :class="[
-                    'right' + index,
-                    YouranswerClass(index, 'right', item)
-                  ]"
+                  :class="['right' + index]"
                   v-if="
                     item.detail.wordsList.length > 0 || item.detail.sentence
                   "
@@ -315,7 +327,14 @@ export default {
         data: []
       },
       allimgnumber: 0,
-      lodimgnumber: 0
+      lodimgnumber: 0,
+      clickItem: [],
+      curItem: "",
+      pos: {
+        pageX: 0,
+        pageY: 0
+      },
+      dataNew: []
     };
   },
   //计算属性 类似于data概念
@@ -323,18 +342,23 @@ export default {
   //监控data中数据变化
   watch: {
     curQue(val, oldval) {
+      if (!this.judgeAnswer) {
+        this.handleData();
+      } else {
+        this.dataNew = JSON.parse(JSON.stringify(this.data.data));
+      }
+
       this.$forceUpdate(); //触发更新函数更新高度
     }
   },
   //方法集合
   methods: {
     // 判断对错
-    YouranswerClass(index, type, item) {
+    YouranswerClass(index, type, item, id) {
       let clss = "";
       if (
         this.judgeAnswer == "studentAnswer" ||
-        this.judgeAnswer == "userAnswer" ||
-        this.judgeAnswer == "standardAnswer"
+        this.judgeAnswer == "userAnswer"
       ) {
         let items = this.data.data[index];
 
@@ -347,35 +371,49 @@ export default {
             }
           }
         } else {
-          this.curQue.con.forEach(itemss => {
-            if (
-              Object.prototype.toString
-                .call(itemss.AnswerList)
-                .indexOf("Number") != -1
-            ) {
-              if (itemss.AnswerList == index) {
-                clss = "error";
+          if (
+            document.getElementById(id) &&
+            !document.getElementById(id).getAttribute("class")
+          ) {
+            let _this = this;
+            this.$nextTick(() => {
+              for (let i = 0; i < _this.data.data.length; i++) {
+                let dItems = _this.data.data[i];
+                if (item.nodeId == dItems.target && !clss) {
+                  if (dItems.correct) {
+                    clss = "correct";
+                  } else if (dItems.error) {
+                    clss = "error";
+                  }
+                  document.getElementById(id).setAttribute("class", clss);
+                }
               }
-            }
-          });
 
-          for (let i = 0; i < this.data.data.length; i++) {
-            let dItems = this.data.data[i];
-            if (item.nodeId == dItems.target) {
-              if (dItems.correct) {
-                clss = "correct";
-              } else if (dItems.error) {
-                clss = "error";
+              if (items && items.Isexample) {
+                clss = "example";
               }
-              break;
-            }
-          }
-
-          if (items && items.Isexample) {
-            clss = "example";
+              // if (!clss) {
+              //   _this.curQue.con.forEach(itemss => {
+              //     if (
+              //       Object.prototype.toString
+              //         .call(itemss.AnswerList)
+              //         .indexOf("Number") != -1
+              //     ) {
+              //       console.log(itemss.AnswerList === index);
+              //       if (itemss.AnswerList === index) {
+              //         clss = "error";
+              //       }
+              //     }
+              //   });
+              //   console.log(clss);
+              // }
+            });
           }
         }
       }
+      if (this.judgeAnswer == "standardAnswer") {
+        clss = "correct";
+      }
       return clss;
     },
     //   清除所有连线
@@ -476,6 +514,8 @@ export default {
               this.$set(this.data.data[i], "target", null);
             }
           });
+          this.clickItem = [];
+
           this.changeAllCorrect();
           let node = document.getElementById(conn.sourceId);
           this.jsPlumb.removeAllEndpoints(node);
@@ -503,6 +543,19 @@ export default {
                 this.$set(this.data.data[i], "target", conn.targetId);
               }
             });
+            this.curQue.option.forEach((item, i) => {
+              if (conn.sourceId == item.nodeId) {
+                let index = 0;
+                this.curQue.con.forEach((element, indexs) => {
+                  if (element.nodeId === conn.targetId) {
+                    index = indexs;
+                  }
+                });
+                this.$set(this.data.data[index], "target", conn.sourceId);
+                this.$set(this.data.data[index], "source", conn.targetId);
+              }
+            });
+
             this.changeAllCorrect();
             sessionStorage.setItem("LineData", JSON.stringify(this.data));
             this.$set(
@@ -511,6 +564,7 @@ export default {
               JSON.parse(JSON.stringify(this.data))
             );
           }
+          this.clickItem = [];
         });
       }
 
@@ -627,88 +681,73 @@ export default {
           this.data.userAnswerJudge = "";
         }
       }
-    }
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    this.allimgnumber = 0;
-    let flag = false;
-    if (!this.curQue.Bookanswer) {
-      flag = true;
-      // sData = JSON.parse(sessionStorage.getItem("LineData"));
-      let isanswer = false;
-      this.curQue.con.forEach(con => {
-        if (
-          Object.prototype.toString.call(con.AnswerList).indexOf("Number") != -1
-        ) {
-          isanswer = true;
+    },
+    mouseDown(e, index) {
+      this.curItem = index;
+      this.pos = {
+        pageX: e.pageX,
+        pageY: e.pageY
+      };
+    },
+    mock(e) {
+      if (
+        Math.abs(e.pageX - this.pos.pageX) <= 10 &&
+        Math.abs(e.pageY - this.pos.pageY) <= 10
+      ) {
+        if (this.clickItem.length > 0) {
+          if (this.clickItem.indexOf(this.curItem) === -1) {
+            let str = this.clickItem[0].split("_")[0];
+            let str1 = this.curItem.split("_")[0];
+            // 如果最新点击的点和之前保存的为同一侧则替换 不同侧则连线
+            if (str !== str1) {
+              this.clickItem.push(this.curItem);
+              this.jsPlumb.connect({
+                source: this.clickItem[0],
+                target: this.clickItem[1]
+              });
+            } else {
+              this.clickItem[0] = this.curItem;
+            }
+          }
+        } else {
+          this.clickItem.push(this.curItem);
         }
-      });
-      if (isanswer) {
-        this.data.userAnswerJudge = "[JUDGE##F##JUDGE]";
       } else {
-        this.data.userAnswerJudge = "";
+        this.clickItem = [];
       }
-      this.curQue.Bookanswer = this.data;
-    } else {
-      this.data = JSON.parse(JSON.stringify(this.curQue.Bookanswer));
-    }
-    this.curQue.con.forEach((item, i) => {
-      let nodeId = item.Isexample
-        ? "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 (flag) {
-        if (item.Isexample) {
-          this.data.data.push({
-            source: item.nodeId,
-            target: "right_" + item.AnswerList + this.number + this.judgeAnswer,
-            index: i,
-            answer: item.AnswerList
-          });
+    },
+    handleData() {
+      this.allimgnumber = 0;
+      let flag = false;
+      if (!this.curQue.Bookanswer) {
+        flag = true;
+        // sData = JSON.parse(sessionStorage.getItem("LineData"));
+        let isanswer = false;
+        this.curQue.con.forEach(con => {
+          if (
+            Object.prototype.toString.call(con.AnswerList).indexOf("Number") !=
+            -1
+          ) {
+            isanswer = true;
+          }
+        });
+        if (isanswer) {
+          this.data.userAnswerJudge = "[JUDGE##F##JUDGE]";
+        } else {
+          this.data.userAnswerJudge = "";
         }
+        this.curQue.Bookanswer = this.data;
+      } else {
+        this.data = JSON.parse(JSON.stringify(this.curQue.Bookanswer));
       }
-    });
-    this.curQue.option.forEach((item, i) => {
-      let nodeId = item.Isexample
-        ? "right_" + i + this.number + "Isexample" + this.judgeAnswer
-        : "right_" + i + this.number + this.judgeAnswer;
-      item.nodeId = nodeId;
-      if (item.img_list.length > 0) {
-        this.allimgnumber++;
-      }
-    });
-    if (flag) {
-      this.curQue.con.forEach((item, i) => {
-        if (!item.Isexample) {
-          this.data.data.push({
-            answer: item.AnswerList,
-            index: i,
-            source: null,
-            target: null
-            // userAnswerJudge:
-            //   Object.prototype.toString.call(item.AnswerList).indexOf("Number") ==
-            //   -1
-            //     ? ""
-            //     : "[JUDGE##F##JUDGE]",
-          });
-        }
-      });
-    }
-
-    if (
-      this.judgeAnswer == "studentAnswer" ||
-      this.judgeAnswer == "userAnswer"
-    ) {
-      let conData = JSON.parse(JSON.stringify(this.curQue));
       this.curQue.con.forEach((item, i) => {
         let nodeId = item.Isexample
           ? "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 (flag) {
           if (item.Isexample) {
             this.data.data.push({
@@ -726,10 +765,64 @@ 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));
+      if (flag) {
+        this.curQue.con.forEach((item, i) => {
+          if (!item.Isexample) {
+            this.data.data.push({
+              answer: item.AnswerList,
+              index: i,
+              source: null,
+              target: null
+              // userAnswerJudge:
+              //   Object.prototype.toString.call(item.AnswerList).indexOf("Number") ==
+              //   -1
+              //     ? ""
+              //     : "[JUDGE##F##JUDGE]",
+            });
+          }
+        });
+      }
+
+      if (
+        this.judgeAnswer == "studentAnswer" ||
+        this.judgeAnswer == "userAnswer"
+      ) {
+        let conData = JSON.parse(JSON.stringify(this.curQue));
+        this.curQue.con.forEach((item, i) => {
+          let nodeId = item.Isexample
+            ? "left_" + i + this.number + "Isexample" + this.judgeAnswer
+            : "left_" + i + this.number + this.judgeAnswer;
+          item.nodeId = nodeId;
+          if (flag) {
+            if (item.Isexample) {
+              this.data.data.push({
+                source: item.nodeId,
+                target:
+                  "right_" + item.AnswerList + this.number + this.judgeAnswer,
+                index: i,
+                answer: item.AnswerList
+              });
+            }
+          }
+        });
+        this.curQue.option.forEach((item, i) => {
+          let nodeId = item.Isexample
+            ? "right_" + i + this.number + "Isexample" + this.judgeAnswer
+            : "right_" + i + this.number + this.judgeAnswer;
+          item.nodeId = nodeId;
+        });
+        this.curQue = JSON.parse(JSON.stringify(conData));
+      }
     }
   },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.handleData();
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.showPlumb();
@@ -820,6 +913,7 @@ export default {
         });
       });
     }
+    document.addEventListener("mouseup", this.mock);
   },
   //生命周期-创建之前
   beforeCreated() {},
@@ -830,7 +924,9 @@ export default {
   //生命周期-更新之后
   updated() {},
   //生命周期-销毁之前
-  beforeDestory() {},
+  beforeDestory() {
+    document.removeEventListener("mouseup", this.mock);
+  },
   //生命周期-销毁完成
   destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
@@ -904,6 +1000,11 @@ export default {
             font-size: 16px;
             line-height: 150%;
             color: #000000;
+            padding: 2px;
+            &.active {
+              background: #dcdbdd;
+            }
+
             img {
               max-width: 238px;
               height: 158px;
@@ -999,6 +1100,11 @@ export default {
             font-size: 16px;
             line-height: 150%;
             color: #000000;
+            padding: 2px;
+            &.active {
+              background: #dcdbdd;
+            }
+
             img {
               max-width: 238px;
               height: 158px;

src/components/Adult/preview/NewWordShow.vue

@@ -479,7 +479,6 @@ export default {
         this.enMargin =
           (Number(730 / (Number(this.curQue.numberList.con) + 1)) - 64) / 2;
       });
-      console.log(this.curQue);
     },
     changePraShow() {
       this.isPraShow = false;