Merge branch 'master' into NPC-lhd

package.json

@@ -20,6 +20,7 @@
     "core-js": "3.6.5",
     "element-ui": "^2.13.2",
     "he-tree-vue": "^2.0.10",
+    "html2canvas": "^1.4.1",
     "jquery": "^3.6.0",
     "js-audio-recorder": "^0.5.7",
     "js-base64": "^3.6.1",

src/components/Adult/preview/components/WordPhraseDetail.vue

@@ -160,7 +160,7 @@
                   :class="['sort', sortIndex == 0 ? 'sele' : '']"
                   @click="sortEvent(0, 'sentence_list_sort_left')"
                 >
-                  <img src="../../../../assets/NPC/analys-left.png" alt="" />
+                  <img src="../../../../assets/NPC/analys-right.png" alt="" />
                 </span>
                 <span
                   :class="['sort', sortIndex == 1 ? 'sele' : '']"
@@ -172,32 +172,42 @@
                   :class="['sort', sortIndex == 2 ? 'sele' : '']"
                   @click="sortEvent(2, 'sentence_list_sort_right')"
                 >
-                  <img src="../../../../assets/NPC/analys-right.png" alt="" />
+                  <img src="../../../../assets/NPC/analys-left.png" alt="" />
                 </span>
-                <span class="down">
+                <span class="down" @click="downloadImage">
                   <img src="../../../../assets/NPC/download.png" alt="" />
                 </span>
               </div>
-              <div v-for="(item, i) in CurrentList" :key="i">
-                <div>{{ i + 1 }}.</div>
-                <div>
-                  <template v-if="lijuPatternIndex == 1">
-                    <el-tooltip effect="dark" placement="bottom">
-                      <div slot="content">
-                        {{ item.source_courseware_name_path }}
+              <div class="liju_main">
+                <div v-for="(item, i) in CurrentList" :key="i">
+                  <div>{{ i + 1 }}.</div>
+                  <div>
+                    <template v-if="lijuPatternIndex == 1">
+                      <el-tooltip effect="dark" placement="bottom">
+                        <div slot="content">
+                          {{ item.source_courseware_name_path }}
+                        </div>
+                        <p class="p1">
+                          {{ item.source_courseware_name_path }}
+                        </p>
+                      </el-tooltip>
+                      <div class="p2">
+                        <div v-for="(txt, indexs) in item.resArr">
+                          <span
+                            v-for="(txts, indexs) in txt"
+                            v-html="txts"
+                          ></span>
+                        </div>
                       </div>
-                      <p class="p1">
+                      <!-- <p class="p2" v-html="item.resArr"></p> -->
+                    </template>
+                    <template v-else>
+                      <p v-html="item.res"></p>
+                      <p class="p2">
                         {{ item.source_courseware_name_path }}
                       </p>
-                    </el-tooltip>
-                    <p class="p2" v-html="item.resArr"></p>
-                  </template>
-                  <template v-else>
-                    <p v-html="item.res"></p>
-                    <p class="p2">
-                      {{ item.source_courseware_name_path }}
-                    </p>
-                  </template>
+                    </template>
+                  </div>
                 </div>
               </div>
             </div>
@@ -334,6 +344,7 @@
         :type="type"
       />
     </div>
+    <div class="cut-area" style="display: none"></div>
   </div>
 </template>
 
@@ -342,6 +353,7 @@ import Strockplayredline from "./Strockplayredline.vue";
 import Audio from "./AudioRed.vue";
 import Intp from "./Intp.vue";
 import { getContent, getHZChineseInfo } from "../../../../api/ajax";
+import html2canvas from "html2canvas";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -384,7 +396,7 @@ export default {
       lijuIndex: 0,
       lijuPatternIndex: 0,
       CurrentList: [],
-      sortIndex: null,
+      sortIndex: 0,
       chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
     };
   },
@@ -408,6 +420,29 @@ export default {
   },
   //方法集合
   methods: {
+    downloadImage() {
+      var cutArea = $(".cut-area");
+      let dom = $(".liju_main");
+      let dataURL = "";
+      html2canvas(dom[0]).then((canvas) => {
+        {
+          // 将生成的 canvas 放入到 dom 中, 这里可以做画布操作
+          console.log(canvas);
+          cutArea.append(canvas);
+
+          // 将操作完成的画布转化为 base64 编码的文件
+          dataURL = canvas.toDataURL("image/png");
+
+          // 将文件设置到下载区, 点击就能下载了
+          const a = document.createElement("a");
+          a.download = "例句.png";
+          a.href = dataURL;
+          a.click();
+          window.URL.revokeObjectURL(dataURL);
+          a.remove();
+        }
+      });
+    },
     sortEvent(index, key) {
       this.sortIndex = index;
       if (this.lijuIndex == 0) {
@@ -426,10 +461,15 @@ export default {
         return;
       }
       this.lijuPatternIndex = index;
+      if (this.lijuPatternIndex == 1) {
+        this.sortEvent(0, "sentence_list_sort_left");
+      } else {
+        this.cutLiju(this.lijuIndex, true);
+      }
     },
     // 切换 例句
-    cutLiju(index) {
-      if (index == this.lijuIndex) {
+    cutLiju(index, type) {
+      if (index == this.lijuIndex && !type) {
         return;
       }
       this.lijuIndex = index;
@@ -520,14 +560,17 @@ export default {
           if (res.sentence_list.length > 0) {
             this.list1.sentence_list = this.handleExample(res.sentence_list);
             this.list1.sentence_list_sort_left = this.handleExample(
-              res.sentence_list_sort_left
+              res.sentence_list_sort_left,
+              "left"
             );
             this.list1.sentence_list_sort_mid = this.handleExample(
-              res.sentence_list_sort_mid
+              res.sentence_list_sort_mid,
+              "mid"
             );
 
             this.list1.sentence_list_sort_right = this.handleExample(
-              res.sentence_list_sort_right
+              res.sentence_list_sort_right,
+              "right"
             );
 
             this.allList.sentence_list = this.allList.sentence_list.concat(
@@ -561,13 +604,16 @@ export default {
                   res.sentence_list
                 );
                 this.list2.sentence_list_sort_left = this.handleExample(
-                  res.sentence_list_sort_left
+                  res.sentence_list_sort_left,
+                  "left"
                 );
                 this.list2.sentence_list_sort_mid = this.handleExample(
-                  res.sentence_list_sort_mid
+                  res.sentence_list_sort_mid,
+                  "mid"
                 );
                 this.list2.sentence_list_sort_right = this.handleExample(
-                  res.sentence_list_sort_right
+                  res.sentence_list_sort_right,
+                  "right"
                 );
                 this.allList.sentence_list = this.allList.sentence_list.concat(
                   this.list2.sentence_list
@@ -599,13 +645,16 @@ export default {
                       res.sentence_list
                     );
                     this.list3.sentence_list_sort_left = this.handleExample(
-                      res.sentence_list_sort_left
+                      res.sentence_list_sort_left,
+                      "left"
                     );
                     this.list3.sentence_list_sort_mid = this.handleExample(
-                      res.sentence_list_sort_mid
+                      res.sentence_list_sort_mid,
+                      "mid"
                     );
                     this.list3.sentence_list_sort_right = this.handleExample(
-                      res.sentence_list_sort_right
+                      res.sentence_list_sort_right,
+                      "right"
                     );
 
                     this.allList.sentence_list =
@@ -695,68 +744,96 @@ export default {
     //   });
     //   return list;
     // },
-    handleExample(list) {
+    handleExample(list, type) {
       if (list.length > 0) {
         list = list.map((item, index) => {
-          let sentence = JSON.parse(JSON.stringify(item.sentence));
-          let arr = sentence.split("");
-          arr.forEach((items, indexs) => {
-            if (indexs == item.begin_position) {
-              arr[indexs] = `<span style=color:#DE4444;>${arr[indexs]}</span>`;
-            }
-          });
-          let data = this.changefiveword(arr, item.begin_position);
-          item.resArr = data;
-          let newsentence = JSON.parse(JSON.stringify(item.sentence));
-          let res = "";
-          for (let i = 0; i < item.position_list.length; i++) {
-            let part1 = "";
-            let part2 = "";
-            let part3 = "";
-            if (item.position_list.length > 1) {
-              if (i == 0) {
+          if (type == "left") {
+            let sentence = JSON.parse(JSON.stringify(item.sentence));
+            let arr = sentence.split("");
+            arr.forEach((items, indexs) => {
+              if (indexs == item.begin_position) {
+                arr[
+                  indexs
+                ] = `<span style=color:#DE4444;>${arr[indexs]}</span>`;
+              }
+            });
+            let data = this.changefiveword(arr, item.begin_position, type);
+            item.resArr = data;
+          } else if (type == "right") {
+            let sentence = JSON.parse(JSON.stringify(item.sentence));
+            let arr = sentence.split("");
+            arr.forEach((items, indexs) => {
+              if (indexs == item.begin_position) {
+                arr[
+                  indexs
+                ] = `<span style=color:#DE4444;>${arr[indexs]}</span>`;
+              }
+            });
+            let data = this.changefiveword(arr, item.begin_position, type);
+            item.resArr = data;
+          } else if (type == "mid") {
+            let sentence = JSON.parse(JSON.stringify(item.sentence));
+            let arr = sentence.split("");
+            arr.forEach((items, indexs) => {
+              if (indexs == item.begin_position) {
+                arr[
+                  indexs
+                ] = `<span style=color:#DE4444;>${arr[indexs]}</span>`;
+              }
+            });
+            let data = this.changefiveword(arr, item.begin_position, type);
+            item.resArr = data;
+          } else {
+            let newsentence = JSON.parse(JSON.stringify(item.sentence));
+            let res = "";
+            for (let i = 0; i < item.position_list.length; i++) {
+              let part1 = "";
+              let part2 = "";
+              let part3 = "";
+              if (item.position_list.length > 1) {
+                if (i == 0) {
+                  part1 = newsentence.substring(0, item.position_list[i].begin);
+                  part2 = newsentence.substring(
+                    item.position_list[i].begin,
+                    item.position_list[i].end
+                  );
+                  part3 = newsentence.substring(
+                    item.position_list[i].end,
+                    item.position_list[i + 1].begin
+                  );
+                } else if (i == item.position_list.length - 1) {
+                  part2 = newsentence.substring(
+                    item.position_list[i].begin,
+                    item.position_list[i].end
+                  );
+                  part3 = newsentence.substring(item.position_list[i].end);
+                } else {
+                  part2 = newsentence.substring(
+                    item.position_list[i].begin,
+                    item.position_list[i].end
+                  );
+                  part3 = newsentence.substring(
+                    item.position_list[i].end,
+                    item.position_list[i + 1].begin
+                  );
+                }
+              } else {
                 part1 = newsentence.substring(0, item.position_list[i].begin);
                 part2 = newsentence.substring(
                   item.position_list[i].begin,
                   item.position_list[i].end
                 );
-                part3 = newsentence.substring(
-                  item.position_list[i].end,
-                  item.position_list[i + 1].begin
-                );
-              } else if (i == item.position_list.length - 1) {
-                part2 = newsentence.substring(
-                  item.position_list[i].begin,
-                  item.position_list[i].end
-                );
                 part3 = newsentence.substring(item.position_list[i].end);
-              } else {
-                part2 = newsentence.substring(
-                  item.position_list[i].begin,
-                  item.position_list[i].end
-                );
-                part3 = newsentence.substring(
-                  item.position_list[i].end,
-                  item.position_list[i + 1].begin
-                );
               }
-            } else {
-              part1 = newsentence.substring(0, item.position_list[i].begin);
-              part2 = newsentence.substring(
-                item.position_list[i].begin,
-                item.position_list[i].end
-              );
-              part3 = newsentence.substring(item.position_list[i].end);
+              res +=
+                part1 +
+                '<span style="color:#DE4444;">' +
+                part2 +
+                "</span>" +
+                part3;
             }
-            res +=
-              part1 +
-              '<span style="color:#DE4444;">' +
-              part2 +
-              "</span>" +
-              part3;
+            item.res = res;
           }
-          item.res = res;
-
           return item;
         });
         return list;
@@ -764,27 +841,70 @@ export default {
         return [];
       }
     },
-    changefiveword(arr, index) {
+    changefiveword(arr, index, type) {
+      // arr.forEach((item, i) => {
+      //   if (this.chsFhList.indexOf(item) != -1) {
+      //     arr[i - 1] = arr[i - 1] + arr[i];
+      //     arr[i] = "";
+      //   }
+      // });
+      // arr.forEach((item, i) => {
+      //   if (item == "") {
+      //     arr.splice(i, 1);
+      //   }
+      // });
+      // arr.forEach((item, i) => {
+      //   if (item.indexOf("color") != -1) {
+      //     index = i;
+      //   }
+      // });
       let str = "";
       let num = 6;
-      let colorIndex = 0
+      let colorIndex = 0;
       let colorList = ["#4D7EFF", "#1DAA91", "#A4430F", "#FF5757", "#9031AA"];
       for (let i = 1; i < num; i++) {
-        if (index - i >= 0) {
-          if (this.chsFhList.indexOf(arr[index - i]) == -1) {
-            arr[index - i] = `<span style=color:${colorList[colorIndex]};>${
-              arr[index - i]
-            }</span>`;
-            colorIndex++;
-          } else {
-            num++;
+        if (type == "left") {
+          if (index - i >= 0) {
+            if (this.chsFhList.indexOf(arr[index - i]) == -1) {
+              arr[index - i] = `<span style=color:${colorList[colorIndex]};>${
+                arr[index - i]
+              }</span>`;
+              colorIndex++;
+            } else {
+              num++;
+            }
+          }
+        } else if (type == "right") {
+          if (index + i <= arr.length - 1) {
+            if (this.chsFhList.indexOf(arr[index + i]) == -1) {
+              arr[index + i] = `<span style=color:${colorList[colorIndex]};>${
+                arr[index + i]
+              }</span>`;
+              colorIndex++;
+            } else {
+              num++;
+            }
           }
         }
       }
-      arr.forEach((item) => {
+      let newarr = [];
+      let arr1 = [];
+      let arr2 = [];
+      let arr3 = [];
+      arr.forEach((item, i) => {
+        if (i < index) {
+          arr1.push(item);
+        } else if (i == index) {
+          arr2.push(item);
+        } else {
+          arr3.push(item);
+        }
         str += item;
       });
-      return str;
+      newarr.push(arr1);
+      newarr.push(arr2);
+      newarr.push(arr3);
+      return newarr;
       //       arr[indexs - 1] = `<span style=color:#4D7EFF;>${
       //   arr[indexs - 1]
       // }</span>`;
@@ -1044,6 +1164,7 @@ export default {
           animation-timing-function: linear;
         }
       }
+
       .liju {
         padding-bottom: 16px;
         padding-right: 24px;
@@ -1051,29 +1172,31 @@ export default {
         border: 1px solid rgba(0, 0, 0, 0.1);
         border-top: none;
         border-radius: 0 0 4px 4px;
-        > div {
-          padding-top: 16px;
-          margin-left: 8px;
-          display: flex;
+        .liju_main {
+          > div {
+            padding-top: 16px;
+            margin-left: 8px;
+            display: flex;
 
-          > :nth-child(1) {
-            text-align: right;
-            margin-right: 6px;
-            line-height: 24px;
-            font-family: "FZJCGFKTK";
-          }
-          p {
-            margin: 0;
-            line-height: 24px;
-            font-size: 16px;
-            color: rgba(0, 0, 0, 0.85);
-            font-family: "FZJCGFKTK";
-          }
-          .p2 {
-            font-size: 12px;
-            line-height: 20px;
-            color: rgba(0, 0, 0, 0.85);
-            opacity: 0.3;
+            > :nth-child(1) {
+              text-align: right;
+              margin-right: 6px;
+              line-height: 24px;
+              font-family: "FZJCGFKTK";
+            }
+            p {
+              margin: 0;
+              line-height: 24px;
+              font-size: 16px;
+              color: rgba(0, 0, 0, 0.85);
+              font-family: "FZJCGFKTK";
+            }
+            .p2 {
+              font-size: 12px;
+              line-height: 20px;
+              color: rgba(0, 0, 0, 0.85);
+              opacity: 0.3;
+            }
           }
         }
       }
@@ -1128,8 +1251,13 @@ export default {
           }
         }
         .KWIC_liju {
+          padding-top: 16px;
+          > div {
+            margin-left: 24px;
+          }
           .sort_dv {
             margin-left: 24px;
+            display: flex;
             span {
               display: inline-block;
               width: 28px;
@@ -1158,10 +1286,13 @@ export default {
               }
             }
           }
-          > div {
-            margin-left: 24px;
+
+          .liju_main {
             > div {
               display: flex;
+              > div {
+                display: flex;
+              }
               .p1 {
                 width: 117px;
                 white-space: nowrap;
@@ -1170,14 +1301,35 @@ export default {
                 margin-left: 16px;
               }
               .p2 {
+                font-family: "FZJCGFKTK";
                 width: 469px;
+                height: 22px;
                 margin-left: 16px;
-                text-align: center;
                 font-weight: 400;
                 font-size: 14px;
                 line-height: 22px;
                 color: #000000;
                 opacity: 1;
+                display: flex;
+                justify-content: center;
+                overflow: hidden;
+                white-space: nowrap;
+                > :nth-child(1) {
+                  direction: rtl;
+                  unicode-bidi: plaintext;
+                  text-align: right;
+                  width: 227.5px;
+                  white-space: nowrap;
+                  overflow: hidden;
+                }
+                > :nth-child(3) {
+                  direction: ltr;
+                  unicode-bidi: plaintext;
+                  text-align: left;
+                  width: 227.5px;
+                  white-space: nowrap;
+                  overflow: hidden;
+                }
               }
             }
           }