连线例子 标题问题

src/components/Adult/common/LigatureModule.vue

@@ -34,6 +34,13 @@
             />
           </div> -->
           <div class="adult-book-input-item">
+            <span class="adult-book-lable">例子：</span>
+            <el-radio-group v-model="curQueItem.Isexample">
+              <el-radio :label="true">是</el-radio>
+              <el-radio :label="false">不是</el-radio>
+            </el-radio-group>
+          </div>
+          <div class="adult-book-input-item">
             <span class="adult-book-lable">序号：</span>
             <el-input
               type="textarea"
@@ -103,6 +110,13 @@
             />
           </div> -->
           <div class="adult-book-input-item">
+            <span class="adult-book-lable">例子：</span>
+            <el-radio-group v-model="curQueItem.Isexample">
+              <el-radio :label="true">是</el-radio>
+              <el-radio :label="false">不是</el-radio>
+            </el-radio-group>
+          </div>
+          <div class="adult-book-input-item">
             <span class="adult-book-lable">序号：</span>
             <el-input
               type="textarea"

src/components/Adult/inputModules/Ligature.vue

@@ -135,6 +135,7 @@ export default {
               wordsList: [],
             },
             number: "",
+            Isexample: false, //是不是例子
           },
           {
             mp3_list: [],
@@ -149,6 +150,7 @@ export default {
               seg_words: "",
               wordsList: [],
             },
+            Isexample: false, //是不是例子
           },
         ],
         option: [
@@ -165,6 +167,7 @@ export default {
               seg_words: "",
               wordsList: [],
             },
+            Isexample: false, //是不是例子
           },
           {
             con: "",
@@ -179,6 +182,7 @@ export default {
               seg_words: "",
               wordsList: [],
             },
+            Isexample: false, //是不是例子
           },
         ],
         correct: [

src/components/Adult/preview/Ligature.vue

@@ -1,201 +1,209 @@
 <template>
   <div class="JoinLine">
-    <div :id="'container' + number" class="container">
-      <div class="left">
-        <ul>
-          <div>{{ curQue.conTitle }}</div>
-          <li
-            :class="'left' + index + number"
-            v-for="(item, index) in curQue.con"
-            :key="'left' + index"
-          >
-            <!--             :style="{
+    <div class="main">
+      <div style="text-align: center">{{ curQue.title }}</div>
+      <div :id="'container' + number" class="container">
+        <div class="left">
+          <ul>
+            <div>{{ curQue.conTitle }}</div>
+            <li
+              :class="'left' + index + number"
+              v-for="(item, index) in curQue.con"
+              :key="'left' + index"
+            >
+              <!--             :style="{
               background:
                 JSON.stringify(data).indexOf(item.nodeId) != -1
                   ? '#F0F0F0'
                   : '',
             }" -->
-            <div>
+              <div>
+                <img
+                  v-if="item.img_list.length > 0"
+                  :src="item.img_list[0].id"
+                  alt=""
+                  @load="conImageload"
+                />
+                <div
+                  class="text"
+                  :class="'left' + index"
+                  v-if="
+                    item.detail.wordsList.length > 0 || item.detail.sentence
+                  "
+                >
+                  <!-- 大于0就说明分词了 -->
+                  <template v-if="item.detail.wordsList.length > 0">
+                    <div
+                      v-for="(it, wordIndex) in item.detail.wordsList"
+                      :key="'word' + wordIndex"
+                    >
+                      <template v-if="item.detail.pyPosition == 'top'">
+                        <p
+                          style="
+                            font-family: 'GB-PINYINOK-B';
+                            font-size: 14px;
+                            line-height: 20px;
+                          "
+                        >
+                          {{ it.pinyin }}
+                        </p>
+                        <p
+                          style="
+                            font-family: 'FZJCGFKTK';
+                            font-size: 20px;
+                            line-height: 150%;
+                          "
+                        >
+                          {{ it.chs }}
+                        </p>
+                      </template>
+                      <template v-else>
+                        <p
+                          style="
+                            font-family: 'FZJCGFKTK';
+                            font-size: 20px;
+                            line-height: 150%;
+                          "
+                        >
+                          {{ it.chs }}
+                        </p>
+                        <p
+                          style="
+                            font-family: 'GB-PINYINOK-B';
+                            font-size: 14px;
+                            line-height: 20px;
+                          "
+                        >
+                          {{ it.pinyin }}
+                        </p>
+                      </template>
+                    </div>
+                  </template>
+                  <template v-else>
+                    {{ item.detail.sentence }}
+                  </template>
+                </div>
+              </div>
+              <span>{{ item.Number }}</span>
               <img
-                v-if="item.img_list.length > 0"
-                :src="item.img_list[0].id"
+                v-if="JSON.stringify(data).indexOf(item.nodeId) == -1"
+                name="source"
+                :id="item.nodeId"
+                src="../../../assets/adult/LineImg.png"
                 alt=""
-                @load="conImageload"
               />
-              <div
-                class="text"
-                :class="'left' + index"
-                v-if="item.detail.wordsList.length > 0 || item.detail.sentence"
-              >
-                <!-- 大于0就说明分词了 -->
-                <template v-if="item.detail.wordsList.length > 0">
-                  <div
-                    v-for="(it, wordIndex) in item.detail.wordsList"
-                    :key="'word' + wordIndex"
-                  >
-                    <template v-if="item.detail.pyPosition == 'top'">
-                      <p
-                        style="
-                          font-family: 'GB-PINYINOK-B';
-                          font-size: 14px;
-                          line-height: 20px;
-                        "
-                      >
-                        {{ it.pinyin }}
-                      </p>
-                      <p
-                        style="
-                          font-family: 'FZJCGFKTK';
-                          font-size: 20px;
-                          line-height: 150%;
-                        "
-                      >
-                        {{ it.chs }}
-                      </p>
-                    </template>
-                    <template v-else>
-                      <p
-                        style="
-                          font-family: 'FZJCGFKTK';
-                          font-size: 20px;
-                          line-height: 150%;
-                        "
-                      >
-                        {{ it.chs }}
-                      </p>
-                      <p
-                        style="
-                          font-family: 'GB-PINYINOK-B';
-                          font-size: 14px;
-                          line-height: 20px;
-                        "
-                      >
-                        {{ it.pinyin }}
-                      </p>
-                    </template>
-                  </div>
-                </template>
-                <template v-else>
-                  {{ item.detail.sentence }}
-                </template>
-              </div>
-            </div>
-            <span>{{ item.Number }}</span>
-            <img
-              v-if="JSON.stringify(data).indexOf(item.nodeId) == -1"
-              name="source"
-              :id="item.nodeId"
-              src="../../../assets/adult/LineImg.png"
-              alt=""
-            />
-            <img
-              v-else
-              :id="item.nodeId"
-              name="target"
-              src="../../../assets/adult/LineImg-select.png"
-              alt=""
-            />
-          </li>
-        </ul>
-      </div>
-      <div class="right">
-        <ul>
-          <div>{{ curQue.optionTitle }}</div>
-          <li
-            :class="'right' + index + number"
-            v-for="(item, index) in curQue.option"
-            :key="'right' + index"
-          >
-            <!--             :style="{
+              <img
+                v-else
+                :id="item.nodeId"
+                name="target"
+                src="../../../assets/adult/LineImg-select.png"
+                alt=""
+              />
+            </li>
+          </ul>
+        </div>
+        <div class="right">
+          <ul>
+            <div>{{ curQue.optionTitle }}</div>
+            <li
+              :class="'right' + index + number"
+              v-for="(item, index) in curQue.option"
+              :key="'right' + index"
+            >
+              <!--             :style="{
               background:
                 JSON.stringify(data).indexOf(item.nodeId) != -1
                   ? '#F0F0F0'
                   : '',
             }" -->
-            <img
-              v-if="JSON.stringify(data).indexOf(item.nodeId) == -1"
-              name="source"
-              :id="item.nodeId"
-              src="../../../assets/adult/LineImg.png"
-              alt=""
-            />
-            <img
-              v-else
-              :id="item.nodeId"
-              name="target"
-              src="../../../assets/adult/LineImg-select.png"
-              alt=""
-            />
-            <span>{{ item.Number }}</span>
-            <div>
               <img
-                v-if="item.img_list.length > 0"
-                :src="item.img_list[0].id"
+                v-if="JSON.stringify(data).indexOf(item.nodeId) == -1"
+                name="source"
+                :id="item.nodeId"
+                src="../../../assets/adult/LineImg.png"
                 alt=""
-                @load="conImageload"
               />
-              <div
-                class="text"
-                :class="'right' + index"
-                v-if="item.detail.wordsList.length > 0 || item.detail.sentence"
-              >
-                <!-- 大于0就说明分词了 -->
-                <template v-if="item.detail.wordsList.length > 0">
-                  <div
-                    v-for="(it, wordIndex) in item.detail.wordsList"
-                    :key="'word' + wordIndex"
-                  >
-                    <template v-if="item.detail.pyPosition == 'top'">
-                      <p
-                        style="
-                          font-family: 'GB-PINYINOK-B';
-                          font-size: 14px;
-                          line-height: 20px;
-                        "
-                      >
-                        {{ it.pinyin }}
-                      </p>
-                      <p
-                        style="
-                          font-family: 'FZJCGFKTK';
-                          font-size: 20px;
-                          line-height: 150%;
-                        "
-                      >
-                        {{ it.chs }}
-                      </p>
-                    </template>
-                    <template v-else>
-                      <p
-                        style="
-                          font-family: 'FZJCGFKTK';
-                          font-size: 20px;
-                          line-height: 150%;
-                        "
-                      >
-                        {{ it.chs }}
-                      </p>
-                      <p
-                        style="
-                          font-family: 'GB-PINYINOK-B';
-                          font-size: 14px;
-                          line-height: 20px;
-                        "
-                      >
-                        {{ it.pinyin }}
-                      </p>
-                    </template>
-                  </div>
-                </template>
-                <template v-else>
-                  {{ item.detail.sentence }}
-                </template>
+              <img
+                v-else
+                :id="item.nodeId"
+                name="target"
+                src="../../../assets/adult/LineImg-select.png"
+                alt=""
+              />
+              <span>{{ item.Number }}</span>
+              <div>
+                <img
+                  v-if="item.img_list.length > 0"
+                  :src="item.img_list[0].id"
+                  alt=""
+                  @load="conImageload"
+                />
+                <div
+                  class="text"
+                  :class="'right' + index"
+                  v-if="
+                    item.detail.wordsList.length > 0 || item.detail.sentence
+                  "
+                >
+                  <!-- 大于0就说明分词了 -->
+                  <template v-if="item.detail.wordsList.length > 0">
+                    <div
+                      v-for="(it, wordIndex) in item.detail.wordsList"
+                      :key="'word' + wordIndex"
+                    >
+                      <template v-if="item.detail.pyPosition == 'top'">
+                        <p
+                          style="
+                            font-family: 'GB-PINYINOK-B';
+                            font-size: 14px;
+                            line-height: 20px;
+                          "
+                        >
+                          {{ it.pinyin }}
+                        </p>
+                        <p
+                          style="
+                            font-family: 'FZJCGFKTK';
+                            font-size: 20px;
+                            line-height: 150%;
+                          "
+                        >
+                          {{ it.chs }}
+                        </p>
+                      </template>
+                      <template v-else>
+                        <p
+                          style="
+                            font-family: 'FZJCGFKTK';
+                            font-size: 20px;
+                            line-height: 150%;
+                          "
+                        >
+                          {{ it.chs }}
+                        </p>
+                        <p
+                          style="
+                            font-family: 'GB-PINYINOK-B';
+                            font-size: 14px;
+                            line-height: 20px;
+                          "
+                        >
+                          {{ it.pinyin }}
+                        </p>
+                      </template>
+                    </div>
+                  </template>
+                  <template v-else>
+                    {{ item.detail.sentence }}
+                  </template>
+                </div>
               </div>
-            </div>
-          </li>
-        </ul>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
+
     <!-- 清除所有连线及连线的状态 -->
     <div class="fuwei" :class="[TaskModel == 'ANSWER' ? 'notAllow' : '']">
       <div @click="clearLine">
@@ -273,9 +281,24 @@ export default {
     //   清除所有连线
     clearLine() {
       if (!this.TaskModel || this.TaskModel != "ANSWER") {
+        let arr = [];
+        this.data.forEach((item) => {
+          if (item.source.indexOf("Isexample") != -1) {
+            arr.push(item);
+          }
+        });
         this.jsPlumb.deleteEveryConnection(); //清除连线方法
         this.data = [];
-        sessionStorage.removeItem("LineData");
+        this.$set(this.curQue, "Bookanswer", JSON.stringify(this.data));
+        if (arr.length > 0) {
+          this.data = JSON.parse(JSON.stringify(arr));
+          this.data.forEach((item) => {
+            this.jsPlumb.connect({
+              source: item.source,
+              target: item.target,
+            });
+          });
+        }
       }
     },
     showPlumb() {
@@ -326,6 +349,10 @@ export default {
       this.setjsPlumb(true, true);
       //点击连线
       this.jsPlumb.bind("click", (conn, originalEvent) => {
+        let index = conn.sourceId.indexOf("Isexample");
+        if (index != -1) {
+          return;
+        }
         if (!this.TaskModel || this.TaskModel != "ANSWER") {
           // 删除点击的线
           this.data.forEach((item, i) => {
@@ -427,13 +454,27 @@ export default {
       this.data = sData;
     }
     this.curQue.con.forEach((item, i) => {
-      item.nodeId = "left_" + i + this.number;
+      let nodeId = item.Isexample
+        ? "left_" + i + this.number + "Isexample"
+        : "left_" + i + this.number;
+      item.nodeId = nodeId;
       if (item.img_list.length > 0) {
         this.allimgnumber++;
       }
+      if (item.Isexample) {
+        this.data.push({
+          source: item.nodeId,
+          target: "right_" + item.AnswerList + this.number,
+          index: i,
+          answer: item.AnswerList,
+        });
+      }
     });
     this.curQue.option.forEach((item, i) => {
-      item.nodeId = "right_" + i + this.number;
+      let nodeId = item.Isexample
+        ? "right_" + i + this.number + "Isexample"
+        : "right_" + i + this.number;
+      item.nodeId = nodeId;
       if (item.img_list.length > 0) {
         this.allimgnumber++;
       }
@@ -452,8 +493,6 @@ export default {
           `right${i + this.number}`
         )[0];
         if (nodeleft && noderight) {
-          console.log(nodeleft);
-          console.log(noderight);
           if (nodeleft.offsetHeight > noderight.offsetHeight) {
             noderight.style.height = nodeleft.offsetHeight + "px";
           } else {
@@ -464,7 +503,6 @@ export default {
     }
     setTimeout(() => {
       if (this.data.length > 0) {
-        console.log(this.data);
         this.data.forEach((item) => {
           this.jsPlumb.connect({
             source: item.source,
@@ -506,15 +544,17 @@ export default {
 /* @import url(); 引入css类 */
 .JoinLine {
   width: 100%;
-  .container {
+  .main {
     background: #f7f7f7;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 8px;
+    padding: 24px 40px;
+  }
+  .container {
     position: relative;
     display: flex;
     justify-content: center;
-    padding: 24px 40px;
     ul {
       list-style: none;
       li {

src/components/Adult/preview/Voicefullscreen-ly.vue

@@ -533,6 +533,7 @@
           <div class="big_dv2">
             <div
               @mousewheel="mousewheelEvent"
+              @mousemove="mouseoverEvent"
               id="waveform_big"
               ref="waveform_big"
             />
@@ -1307,6 +1308,15 @@ export default {
       this.pCanvas = document.getElementById("playChart");
       this.pCtx = this.pCanvas.getContext("2d");
     },
+    mouseoverEvent() {
+      let arr = this.wavesurfer_big.mediaContainer.textContent.split(":");
+      let number = "";
+      arr.forEach((item) => {
+        number += item;
+      });
+      number = (number * 1) / 1000;
+      this.zoomTime = number;
+    },
     // 鼠标滚动放大缩小
     mousewheelEvent(e) {
       let that = this;
@@ -1321,7 +1331,7 @@ export default {
       } else {
         that.zoomNumber = that.zoomNumber + 100;
       }
-      that.wavesurfer_big.zoom(Number(that.zoomNumber));
+      that.wavesurfer_big.zoom(Number(that.zoomNumber), this.zoomTime);
     },
     // 录音鼠标滚动放大缩小
     LYmousewheelEvent(e) {
@@ -1337,7 +1347,7 @@ export default {
       } else {
         that.lyzoomNumber = that.lyzoomNumber + 100;
       }
-      that.wavesurfer_ly.zoom(Number(that.lyzoomNumber));
+      that.wavesurfer_ly.zoom(Number(that.lyzoomNumber), this.zoomTime);
     },
     // 初始化声波
     initaudioImage(audioRate, isPlaying) {

vue.config.js

@@ -44,8 +44,8 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: `https://gcls.utschool.cn/`,
-        target: `https://gcls.helxsoft.cn/`,
-        // target: `https://chinesedu.blcup.com/`,
+        // target: `https://gcls.helxsoft.cn/`,
+        target: `https://chinesedu.blcup.com/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''