例句排序 和字高亮。

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

@@ -98,38 +98,48 @@
                   :class="[lijuIndex == 0 ? 'sele' : '']"
                 >
                   <span> 全部 </span>
-                  <span>
-                    {{ list1.length + list2.length + list3.length }}
+                  <span
+                    v-if="
+                      list1.sentence_list &&
+                      list2.sentence_list &&
+                      list3.sentence_list
+                    "
+                  >
+                    {{
+                      list1.sentence_list.length +
+                      list2.sentence_list.length +
+                      list3.sentence_list.length
+                    }}
                   </span>
                 </div>
                 <div
                   @click="cutLiju(1)"
-                  v-if="list1 && list1.length > 0"
+                  v-if="list1.sentence_list && list1.sentence_list.length > 0"
                   :class="[lijuIndex == 1 ? 'sele' : '']"
                 >
                   <span> 本课例句 </span>
-                  <span>{{ list1.length }} </span>
+                  <span>{{ list1.sentence_list.length }} </span>
                 </div>
                 <div
                   @click="cutLiju(2)"
-                  v-if="list2 && list2.length > 0"
+                  v-if="list2.sentence_list && list2.sentence_list.length > 0"
                   :class="[lijuIndex == 2 ? 'sele' : '']"
                 >
                   <span> 本书例句 </span>
                   <span>
-                    {{ list2.length }}
+                    {{ list2.sentence_list.length }}
                   </span>
                 </div>
                 <div
                   @click="cutLiju(3)"
-                  v-if="list3 && list3.length > 0"
+                  v-if="list3.sentence_list && list3.sentence_list.length > 0"
                   :class="[lijuIndex == 3 ? 'sele' : '']"
                 >
                   <span>本套例句</span>
-                  <span>{{ list3.length }}</span>
+                  <span>{{ list3.sentence_list.length }}</span>
                 </div>
               </div>
-              <!-- <div class="right">
+              <div class="right">
                 <div
                   @click="cutPattern(0)"
                   :class="[lijuPatternIndex == 0 ? 'sele' : '']"
@@ -142,26 +152,25 @@
                 >
                   KWIC模式
                 </div>
-              </div> -->
+              </div>
             </div>
             <div :class="['liju', lijuPatternIndex == 1 ? 'KWIC_liju' : '']">
-              <div
-                v-if="lijuPatternIndex == 1"
-                class="sort_dv"
-                @click="sortEvent(0)"
-              >
-                <span :class="['sort', sortIndex == 0 ? 'sele' : '']">
+              <div v-if="lijuPatternIndex == 1" class="sort_dv">
+                <span
+                  :class="['sort', sortIndex == 0 ? 'sele' : '']"
+                  @click="sortEvent(0, 'sentence_list_sort_left')"
+                >
                   <img src="../../../../assets/NPC/analys-left.png" alt="" />
                 </span>
                 <span
                   :class="['sort', sortIndex == 1 ? 'sele' : '']"
-                  @click="sortEvent(1)"
+                  @click="sortEvent(1, 'sentence_list_sort_mid')"
                 >
                   <img src="../../../../assets/NPC/analys-center.png" alt="" />
                 </span>
                 <span
                   :class="['sort', sortIndex == 2 ? 'sele' : '']"
-                  @click="sortEvent(2)"
+                  @click="sortEvent(2, 'sentence_list_sort_right')"
                 >
                   <img src="../../../../assets/NPC/analys-right.png" alt="" />
                 </span>
@@ -181,7 +190,7 @@
                         {{ item.source_courseware_name_path }}
                       </p>
                     </el-tooltip>
-                    <p class="p2" v-html="item.res"></p>
+                    <p class="p2" v-html="item.resArr"></p>
                   </template>
                   <template v-else>
                     <p v-html="item.res"></p>
@@ -375,7 +384,8 @@ export default {
       lijuIndex: 0,
       lijuPatternIndex: 0,
       CurrentList: [],
-      sortIndex: 0,
+      sortIndex: null,
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
     };
   },
   //计算属性 类似于data概念
@@ -398,8 +408,17 @@ export default {
   },
   //方法集合
   methods: {
-    sortEvent(index) {
+    sortEvent(index, key) {
       this.sortIndex = index;
+      if (this.lijuIndex == 0) {
+        this.CurrentList = JSON.parse(JSON.stringify(this.allList[key]));
+      } else if (this.lijuIndex == 1) {
+        this.CurrentList = JSON.parse(JSON.stringify(this.list1[key]));
+      } else if (this.lijuIndex == 2) {
+        this.CurrentList = JSON.parse(JSON.stringify(this.list2[key]));
+      } else if (this.lijuIndex == 3) {
+        this.CurrentList = JSON.parse(JSON.stringify(this.list3[key]));
+      }
     },
     // 切换模式
     cutPattern(index) {
@@ -414,14 +433,44 @@ export default {
         return;
       }
       this.lijuIndex = index;
-      if (index == 0) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.allList));
-      } else if (index == 1) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.list1));
-      } else if (index == 2) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.list2));
-      } else if (index == 3) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.list3));
+      if (this.lijuPatternIndex == 0) {
+        if (index == 0) {
+          this.CurrentList = JSON.parse(
+            JSON.stringify(this.allList.sentence_list)
+          );
+        } else if (index == 1) {
+          this.CurrentList = JSON.parse(
+            JSON.stringify(this.list1.sentence_list)
+          );
+        } else if (index == 2) {
+          this.CurrentList = JSON.parse(
+            JSON.stringify(this.list2.sentence_list)
+          );
+        } else if (index == 3) {
+          this.CurrentList = JSON.parse(
+            JSON.stringify(this.list3.sentence_list)
+          );
+        }
+      } else {
+        let key = "";
+        if (this.sortIndex == 0) {
+          key = "sentence_list_sort_left";
+        } else if (this.sortIndex == 1) {
+          key = "sentence_list_sort_min";
+        } else if (this.sortIndex == 2) {
+          key = "sentence_list_sort_right";
+        } else {
+          key = "sentence_list";
+        }
+        if (index == 0) {
+          this.CurrentList = JSON.parse(JSON.stringify(this.allList[key]));
+        } else if (index == 1) {
+          this.CurrentList = JSON.parse(JSON.stringify(this.list1[key]));
+        } else if (index == 2) {
+          this.CurrentList = JSON.parse(JSON.stringify(this.list2[key]));
+        } else if (index == 3) {
+          this.CurrentList = JSON.parse(JSON.stringify(this.list3[key]));
+        }
       }
     },
     playAudio() {},
@@ -460,9 +509,43 @@ export default {
         is_contain_word_variants: false,
       })
         .then((res) => {
+          this.allList = {
+            sentence_list: [],
+            sentence_list_sort_left: [],
+            sentence_list_sort_mid: [],
+            sentence_list_sort_right: [],
+          };
           this.loading1 = false;
-          this.list1 = this.handleExample(res.sentence_list);
-          this.allList = this.allList.concat(this.list1);
+          this.list1 = res;
+          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
+            );
+            this.list1.sentence_list_sort_mid = this.handleExample(
+              res.sentence_list_sort_mid
+            );
+
+            this.list1.sentence_list_sort_right = this.handleExample(
+              res.sentence_list_sort_right
+            );
+
+            this.allList.sentence_list = this.allList.sentence_list.concat(
+              this.list1.sentence_list
+            );
+            this.allList.sentence_list_sort_left =
+              this.allList.sentence_list_sort_left.concat(
+                this.list1.sentence_list_sort_left
+              );
+            this.allList.sentence_list_sort_mid =
+              this.allList.sentence_list_sort_mid.concat(
+                this.list1.sentence_list_sort_mid
+              );
+            this.allList.sentence_list_sort_right =
+              this.allList.sentence_list_sort_right.concat(
+                this.list1.sentence_list_sort_right
+              );
+          }
           console.log(this.list1);
           getContent(Mname, {
             courseware_id: this.currentTreeID, // 课件id
@@ -472,8 +555,36 @@ export default {
           })
             .then((res) => {
               this.loading2 = false;
-              this.list2 = this.handleExample(res.sentence_list);
-              this.allList = this.allList.concat(this.list2);
+              this.list2 = res;
+              if (res.sentence_list.length > 0) {
+                this.list2.sentence_list = this.handleExample(
+                  res.sentence_list
+                );
+                this.list2.sentence_list_sort_left = this.handleExample(
+                  res.sentence_list_sort_left
+                );
+                this.list2.sentence_list_sort_mid = this.handleExample(
+                  res.sentence_list_sort_mid
+                );
+                this.list2.sentence_list_sort_right = this.handleExample(
+                  res.sentence_list_sort_right
+                );
+                this.allList.sentence_list = this.allList.sentence_list.concat(
+                  this.list2.sentence_list
+                );
+                this.allList.sentence_list_sort_left =
+                  this.allList.sentence_list_sort_left.concat(
+                    this.list2.sentence_list_sort_left
+                  );
+                this.allList.sentence_list_sort_mid =
+                  this.allList.sentence_list_sort_mid.concat(
+                    this.list2.sentence_list_sort_mid
+                  );
+                this.allList.sentence_list_sort_right =
+                  this.allList.sentence_list_sort_right.concat(
+                    this.list2.sentence_list_sort_right
+                  );
+              }
 
               getContent(Mname, {
                 courseware_id: this.currentTreeID, // 课件id
@@ -482,11 +593,43 @@ export default {
                 is_contain_word_variants: false,
               })
                 .then((res) => {
-                  this.loading3 = false;
-                  this.list3 = this.handleExample(res.sentence_list);
-                  this.allList = this.allList.concat(this.list3);
-                  this.CurrentList = JSON.parse(JSON.stringify(this.allList));
+                  this.list3 = res;
+                  if (res.sentence_list.length > 0) {
+                    this.list3.sentence_list = this.handleExample(
+                      res.sentence_list
+                    );
+                    this.list3.sentence_list_sort_left = this.handleExample(
+                      res.sentence_list_sort_left
+                    );
+                    this.list3.sentence_list_sort_mid = this.handleExample(
+                      res.sentence_list_sort_mid
+                    );
+                    this.list3.sentence_list_sort_right = this.handleExample(
+                      res.sentence_list_sort_right
+                    );
+
+                    this.allList.sentence_list =
+                      this.allList.sentence_list.concat(
+                        this.list3.sentence_list
+                      );
+                    this.allList.sentence_list_sort_left =
+                      this.allList.sentence_list_sort_left.concat(
+                        this.list3.sentence_list_sort_left
+                      );
+                    this.allList.sentence_list_sort_mid =
+                      this.allList.sentence_list_sort_mid.concat(
+                        this.list3.sentence_list_sort_mid
+                      );
+                    this.allList.sentence_list_sort_right =
+                      this.allList.sentence_list_sort_right.concat(
+                        this.list3.sentence_list_sort_right
+                      );
+                  }
+                  this.CurrentList = JSON.parse(
+                    JSON.stringify(this.allList.sentence_list)
+                  );
                   console.log(this.allList);
+                  this.loading3 = false;
                 })
                 .catch((err) => {
                   this.loading3 = false;
@@ -500,59 +643,164 @@ export default {
           this.loading1 = false;
         });
     },
+    // handleExample(list) {
+    //   // let list1Ora = JSON.parse(JSON.stringify(_this.data.list1))
+    //   list = list.map((item, index) => {
+    //     let sentence = 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 = sentence.substring(0, item.position_list[i].begin);
+    //           part2 = sentence.substring(
+    //             item.position_list[i].begin,
+    //             item.position_list[i].end
+    //           );
+    //           part3 = sentence.substring(
+    //             item.position_list[i].end,
+    //             item.position_list[i + 1].begin
+    //           );
+    //         } else if (i == item.position_list.length - 1) {
+    //           part2 = sentence.substring(
+    //             item.position_list[i].begin,
+    //             item.position_list[i].end
+    //           );
+    //           part3 = sentence.substring(item.position_list[i].end);
+    //         } else {
+    //           part2 = sentence.substring(
+    //             item.position_list[i].begin,
+    //             item.position_list[i].end
+    //           );
+    //           part3 = sentence.substring(
+    //             item.position_list[i].end,
+    //             item.position_list[i + 1].begin
+    //           );
+    //         }
+    //       } else {
+    //         part1 = sentence.substring(0, item.position_list[i].begin);
+    //         part2 = sentence.substring(
+    //           item.position_list[i].begin,
+    //           item.position_list[i].end
+    //         );
+    //         part3 = sentence.substring(item.position_list[i].end);
+    //       }
+    //       res +=
+    //         part1 + '<span style="color:#DE4444;">' + part2 + "</span>" + part3;
+    //     }
+    //     item.res = res;
+    //     return item;
+    //   });
+    //   return list;
+    // },
     handleExample(list) {
-      // let list1Ora = JSON.parse(JSON.stringify(_this.data.list1))
-      list = list.map((item, index) => {
-        let sentence = 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 = sentence.substring(0, item.position_list[i].begin);
-              part2 = sentence.substring(
-                item.position_list[i].begin,
-                item.position_list[i].end
-              );
-              part3 = sentence.substring(
-                item.position_list[i].end,
-                item.position_list[i + 1].begin
-              );
-            } else if (i == item.position_list.length - 1) {
-              part2 = sentence.substring(
-                item.position_list[i].begin,
-                item.position_list[i].end
-              );
-              part3 = sentence.substring(item.position_list[i].end);
+      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) {
+                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 {
-              part2 = sentence.substring(
+              part1 = newsentence.substring(0, item.position_list[i].begin);
+              part2 = newsentence.substring(
                 item.position_list[i].begin,
                 item.position_list[i].end
               );
-              part3 = sentence.substring(
-                item.position_list[i].end,
-                item.position_list[i + 1].begin
-              );
+              part3 = newsentence.substring(item.position_list[i].end);
             }
+            res +=
+              part1 +
+              '<span style="color:#DE4444;">' +
+              part2 +
+              "</span>" +
+              part3;
+          }
+          item.res = res;
+
+          return item;
+        });
+        return list;
+      } else {
+        return [];
+      }
+    },
+    changefiveword(arr, index) {
+      let str = "";
+      let num = 6;
+      let colorIndex = 0
+      let colorList = ["#4D7EFF", "#1DAA91", "#A4430F", "#35776B", "#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 {
-            part1 = sentence.substring(0, item.position_list[i].begin);
-            part2 = sentence.substring(
-              item.position_list[i].begin,
-              item.position_list[i].end
-            );
-            part3 = sentence.substring(item.position_list[i].end);
+            num++;
           }
-          res +=
-            part1 + '<span style="color:#DE4444;">' + part2 + "</span>" + part3;
         }
-        item.res = res;
-        return item;
+      }
+      arr.forEach((item) => {
+        str += item;
       });
-      return list;
+      return str;
+      //       arr[indexs - 1] = `<span style=color:#4D7EFF;>${
+      //   arr[indexs - 1]
+      // }</span>`;
+      // arr[indexs - 2] = `<span style=color:#1DAA91;>${
+      //   arr[indexs - 2]
+      // }</span>`;
+      // arr[indexs - 3] = `<span style=color:#A4430F;>${
+      //   arr[indexs - 3]
+      // }</span>`;
+      // arr[indexs - 4] = `<span style=color:#DE4444;>${
+      //   arr[indexs - 4]
+      // }</span>`;
+      // arr[indexs - 5] = `<span style=color:#DE4444;>${
+      //   arr[indexs - 5]
+      // }</span>`;
     },
-
     initData() {
       this.viewIntp();
     },