语料库 例句接口调试及数据处理页面渲染

src/views/corpus/Result.vue

@@ -138,23 +138,28 @@
                     alt=""
                   />
                   <img
-                    v-else
+                    v-else-if="sort == 'up'"
                     src="../../assets/teacherdev/ylk-sort-up.png"
                     alt=""
                   />
+                  <img
+                    v-else
+                    src="../../assets/teacherdev/ylk-sort-no.png"
+                    alt=""
+                  />
                 </div>
               </template>
               <div class="refresh" @click="handleRefresh">
                 <img src="../../assets/teacherdev/refresh.png" alt="" />
               </div>
               <template v-if="patternIndex == 0">
-                <el-switch
+                <!-- <el-switch
                   v-model="pinyinShow"
                   active-text="拼音"
                   active-color="#424242"
                   style="margin-left: 24px"
                 >
-                </el-switch>
+                </el-switch> -->
                 <el-switch
                   v-model="shiyiShow"
                   active-text="释义"
@@ -181,70 +186,55 @@
             <div class="list">
               <template v-if="patternIndex == 0">
                 <div
-                  v-for="(item, i) in showData"
+                  v-for="(item, i) in ShowList"
                   :key="i + 'sentence'"
                   class="one"
                 >
                   <div class="top">
-                    <div
-                      class="number"
+                    <!-- 
                       :class="['number-' + sizeIndex + '-' + pinyinShow]"
-                    >
-                      {{ item.number }}.
-                    </div>
-                    <img
-                      src="../../assets/teacherdev/speaker-one.png"
-                      alt=""
+                     -->
+                    <div class="number">{{ item.number }}.</div>
+                    <!-- 
                       :class="['speaker-' + sizeIndex + '-' + pinyinShow]"
-                    />
-                    <div class="words">
-                      <div
-                        v-for="(items, indexs) in item.wordsList"
-                        :key="indexs + 'con'"
-                      >
-                        <div
-                          class="pinyin"
-                          :style="{
-                            fontSize: pinyinSize + 'px',
-                          }"
-                          v-if="pinyinShow"
-                        >
-                          {{ items.pinyin }}
-                        </div>
-                        <div
-                          class="con"
-                          :style="{
-                            fontSize: conSize + 'px',
-                            lineHeight: conSize + 8 + 'px',
-                          }"
-                          v-html="items.con"
-                        ></div>
-                      </div>
-                      <div
-                        class="shiyi"
-                        :class="['shiyi-' + sizeIndex]"
-                        v-if="shiyiShow"
+                     -->
+                    <img src="../../assets/teacherdev/speaker-one.png" alt="" />
+                    <div class="words" v-html="item.res"></div>
+                    <!-- 
+                      :class="['shiyi-' + sizeIndex]"
+                     -->
+                    <div
+                      class="shiyi"
+                      v-if="shiyiShow && item.word_definition_list.length > 0"
+                    >
+                      （
+                      <span
+                        v-for="(items, indexs) in item.word_definition_list"
+                        :key="indexs"
                       >
-                        （{{ item.shiyi }}）
-                      </div>
+                        {{ items }}
+                      </span>
+                      ）
                     </div>
                   </div>
-                  <div class="bottom">{{ item.laiyuan }}</div>
+                  <div class="bottom">
+                    {{ item.source_courseware_name_path }}
+                  </div>
                 </div>
               </template>
               <template v-else>
                 <div
-                  v-for="(item, index) in KWICData"
+                  v-for="(item, index) in ShowList"
                   :key="'kwic' + index"
                   class="kwic_one"
                 >
                   <div class="number">{{ item.number }}</div>
                   <el-tooltip effect="dark" placement="bottom">
                     <div slot="content">
-                      {{ item.laiyuan }}
+                      {{ item.source_courseware_name_path }}
                     </div>
                     <div class="laiyuan">
-                      {{ item.laiyuan }}
+                      {{ item.source_courseware_name_path }}
                     </div>
                   </el-tooltip>
                   <div
@@ -265,14 +255,16 @@
               </template>
             </div>
             <div class="page">
-              <span class="text"> 共 196 条 命中 213 次 </span>
+              <span class="text">
+                共 {{ CurrentList.length }} 条 命中 {{ scoreAHitNumber }} 次
+              </span>
               <el-pagination
                 background
                 @current-change="handleCurrentChange"
                 :current-page.sync="page"
+                :page-size="pageSize"
                 layout="prev, pager, next"
-                :total="1000"
-                :pager-count="5"
+                :total="CurrentList.length"
               >
               </el-pagination>
             </div>
@@ -310,13 +302,13 @@
             >
               <div>
                 <span></span>
-                <span>{{ item.name }}</span>
+                <span>{{ item.book_name }}</span>
               </div>
               <div>
-                <span>{{ item.value }}</span>
+                <span>{{ item.count }}</span>
               </div>
               <div>
-                <span>{{ item.ratio * 100 }}%</span>
+                <span>{{ item.percent }}%</span>
               </div>
             </div>
             <div class="one all">
@@ -363,6 +355,7 @@ export default {
     //这里存放数据
     return {
       page: 1,
+      pageSize: 8,
       shiyiShow: true,
       pinyinShow: true,
       JFIndex: 0,
@@ -374,381 +367,17 @@ export default {
       patternIndex: 0,
       rightTopIndex: 0,
       sizeIndex: 1,
-      sort: "down",
-      rightList: [
-        {
-          name: "good",
-          value: "4",
-          ratio: "0.4",
-        },
-        {
-          name: "OK",
-          value: "3",
-          ratio: "0.3",
-        },
-        {
-          name: "nice",
-          value: "2",
-          ratio: "0.2",
-        },
-        {
-          name: "yes",
-          value: "1",
-          ratio: "0.1",
-        },
-      ],
+      sort: "",
+      rightList: [],
       KWIC_sortIndex: 0,
       allNumber: 0,
-      showData: [
-        {
-          number: 1,
-          mp3: "",
-          wordsList: [
-            {
-              pinyin: "dà",
-              con: "大",
-            },
-            {
-              pinyin: "wéi",
-              con: "为",
-            },
-            {
-              pinyin: "hǎo",
-              con: "好",
-            },
-            {
-              pinyin: "ma",
-              con: "吗",
-            },
-            {
-              pinyin: "",
-              con: "？",
-            },
-          ],
-          shiyi: "good, ok",
-          laiyuan: "《轻松学中文1》  Unit 1  课文一  P16",
-        },
-        {
-          number: 2,
-          mp3: "",
-          wordsList: [
-            {
-              pinyin: "wǒ",
-              con: "我",
-            },
-            {
-              pinyin: "hěn",
-              con: "很",
-            },
-            {
-              pinyin: "hǎo",
-              con: "好",
-            },
-            {
-              pinyin: "",
-              con: "。",
-            },
-          ],
-          shiyi: "good, ok",
-          laiyuan: "《轻松学中文1》  Unit 1  课文一  P16",
-        },
-        {
-          number: 3,
-          mp3: "",
-          wordsList: [
-            {
-              pinyin: "jīn",
-              con: "今",
-            },
-            {
-              pinyin: "tiān",
-              con: "天",
-            },
-            {
-              pinyin: "yī",
-              con: "一",
-            },
-            {
-              pinyin: "qǐ",
-              con: "起",
-            },
-            {
-              pinyin: "qù",
-              con: "去",
-            },
-            {
-              pinyin: "kàn",
-              con: "看",
-            },
-            {
-              pinyin: "diàn",
-              con: "电",
-            },
-            {
-              pinyin: "yǐng",
-              con: "影",
-            },
-            {
-              pinyin: "hǎo",
-              con: "好",
-            },
-            {
-              pinyin: "ma",
-              con: "吗",
-            },
-            {
-              pinyin: "",
-              con: "？",
-            },
-          ],
-          shiyi: "good, ok",
-          laiyuan: "《轻松学中文1》  Unit 1  课文一  P16",
-        },
-        {
-          number: 4,
-          mp3: "",
-          wordsList: [
-            {
-              pinyin: "zhè",
-              con: "这",
-            },
-            {
-              pinyin: "lǐ",
-              con: "里",
-            },
-            {
-              pinyin: "yǐ",
-              con: "已",
-            },
-            {
-              pinyin: "jīng",
-              con: "经",
-            },
-            {
-              pinyin: "hěn",
-              con: "很",
-            },
-            {
-              pinyin: "jiǔ",
-              con: "久",
-            },
-            {
-              pinyin: "hěn",
-              con: "很",
-            },
-            {
-              pinyin: "jiǔ",
-              con: "久",
-            },
-            {
-              pinyin: "hěn",
-              con: "很",
-            },
-            {
-              pinyin: "jiǔ",
-              con: "久",
-            },
-            {
-              pinyin: "měi",
-              con: "没",
-            },
-            {
-              pinyin: "yǒu",
-              con: "有",
-            },
-            {
-              pinyin: "guò",
-              con: "过",
-            },
-            {
-              pinyin: "zhè",
-              con: "这",
-            },
-            {
-              pinyin: "me",
-              con: "么",
-            },
-            {
-              pinyin: "hǎo",
-              con: "好",
-            },
-            {
-              pinyin: "de",
-              con: "的",
-            },
-            {
-              pinyin: "tiān",
-              con: "天",
-            },
-            {
-              pinyin: "qì",
-              con: "气",
-            },
-            {
-              pinyin: "le",
-              con: "了",
-            },
-            {
-              pinyin: "",
-              con: "。",
-            },
-          ],
-          shiyi: "good, ok",
-          laiyuan: "《轻松学中文1》  Unit 1  课文一  P16",
-        },
-        {
-          number: 5,
-          mp3: "",
-          wordsList: [
-            {
-              pinyin: "jīn",
-              con: "今",
-            },
-            {
-              pinyin: "tiān",
-              con: "天",
-            },
-            {
-              pinyin: "yī",
-              con: "一",
-            },
-            {
-              pinyin: "qǐ",
-              con: "起",
-            },
-            {
-              pinyin: "qù",
-              con: "去",
-            },
-            {
-              pinyin: "kàn",
-              con: "看",
-            },
-            {
-              pinyin: "diàn",
-              con: "电",
-            },
-            {
-              pinyin: "yǐng",
-              con: "影",
-            },
-            {
-              pinyin: "hǎo",
-              con: "好",
-            },
-            {
-              pinyin: "ma",
-              con: "吗",
-            },
-            {
-              pinyin: "jīn",
-              con: "今",
-            },
-            {
-              pinyin: "tiān",
-              con: "天",
-            },
-            {
-              pinyin: "yī",
-              con: "一",
-            },
-            {
-              pinyin: "qǐ",
-              con: "起",
-            },
-            {
-              pinyin: "qù",
-              con: "去",
-            },
-            {
-              pinyin: "kàn",
-              con: "看",
-            },
-            {
-              pinyin: "diàn",
-              con: "电",
-            },
-            {
-              pinyin: "yǐng",
-              con: "影",
-            },
-            {
-              pinyin: "hǎo",
-              con: "好",
-            },
-            {
-              pinyin: "ma",
-              con: "吗",
-            },
-            {
-              pinyin: "jīn",
-              con: "今",
-            },
-            {
-              pinyin: "tiān",
-              con: "天",
-            },
-            {
-              pinyin: "yī",
-              con: "一",
-            },
-            {
-              pinyin: "qǐ",
-              con: "起",
-            },
-            {
-              pinyin: "qù",
-              con: "去",
-            },
-            {
-              pinyin: "kàn",
-              con: "看",
-            },
-            {
-              pinyin: "diàn",
-              con: "电",
-            },
-            {
-              pinyin: "yǐng",
-              con: "影",
-            },
-            {
-              pinyin: "hǎo",
-              con: "好",
-            },
-            {
-              pinyin: "ma",
-              con: "吗",
-            },
-            {
-              pinyin: "",
-              con: "？",
-            },
-          ],
-          shiyi: "good, ok",
-          laiyuan: "《轻松学中文1》  Unit 1  课文一  P16",
-        },
-      ],
-      KWICData: [
-        {
-          number: 1,
-          laiyuan: "《轻松学中文1》  Unit 1  课文一  P16",
-          resArr: [
-            ["你"],
-            [
-              "<span style='color:red;background:#FFEFEF;padding:2px'>好</span>",
-            ],
-            ["吗"],
-          ],
-        },
-      ],
       conSize: 20,
       pinyinSize: 12,
-      list1: [],
-      list2: [],
-      list3: [],
       allList: [],
       CurrentList: [],
+      ShowList: [],
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
+      scoreAHitNumber: 0,
     };
   },
   //计算属性 类似于data概念
@@ -759,18 +388,24 @@ export default {
   methods: {
     handleCurrentChange(val) {
       this.page = val;
+      this.padingEvetn();
     },
     // KWIC排序
     KWICsortEvent(index, type) {
+      if (this.KWIC_sortIndex == index) return;
       this.KWIC_sortIndex = index;
+      this.CurrentList = this.allList[type];
+      this.padingEvetn();
     },
     // 排序
     sortEvent() {
-      if (this.sort == "down") {
-        this.sort = "up";
-      } else {
+      if (this.sort == "up" || !this.sort) {
         this.sort = "down";
+      } else {
+        this.sort = "up";
       }
+      this.getdata();
+      this.page = 1;
     },
     // 修改大小
     cutSize(index) {
@@ -803,11 +438,34 @@ export default {
     },
     // 切换模式
     cutPattern(index) {
+      if (this.patternIndex == index) {
+        return;
+      }
       this.patternIndex = index;
+      if (this.patternIndex == 0) {
+        this.CurrentList = JSON.parse(
+          JSON.stringify(this.allList.sentence_list)
+        );
+      } else {
+        this.CurrentList = JSON.parse(
+          JSON.stringify(this.allList.sentence_list_sort_left)
+        );
+      }
+      this.padingEvetn();
+      this.page = 1;
     },
     // 切换释义来源
     cutsyly(index) {
+      if (this.rightTopIndex == index) {
+        return;
+      }
       this.rightTopIndex = index;
+      if (this.rightTopIndex == 0) {
+        this.rightList = this.allList.stat_list_sentence_source_book;
+      } else {
+        this.rightList = this.allList.stat_list_word_definition;
+      }
+      this.inityuan();
     },
     updownHz() {
       this.unfold = !this.unfold;
@@ -868,12 +526,13 @@ export default {
       this.allNumber = 0;
       let newdata = JSON.parse(JSON.stringify(this.rightList));
       newdata.forEach((item) => {
-        this.allNumber += item.value * 1;
-        let percent = item.ratio * 100;
+        this.allNumber += item.count;
+        let percent = item.percent;
+        item.value = item.count;
         if (percent % 1 == 0) {
-          item.name = item.name + " " + percent + "%";
+          item.name = item.book_name + " " + percent + "%";
         } else {
-          item.name = item.name + " " + percent.toFixed(2) + "%";
+          item.name = item.book_name + " " + percent.toFixed(2) + "%";
         }
       });
       option = {
@@ -958,19 +617,27 @@ export default {
       this.sort = "down";
       this.KWIC_sortIndex = 0;
       this.cutSize(1);
+      this.getdata();
+      this.page = 1;
     },
-    getdata() {
+    getdata(flag) {
       this.loading = true;
       let Mname =
         "book-courseware_manager-GetCoursewareWordExampleSentenceList";
       let data = {
-        courseware_id: "003-20211012-17-BDUZ1JVCAN",
+        // courseware_id: "003-20211012-17-BDUZ1JVCAN",
+        courseware_id: "",
         // word: this.$route.query.keyword, // 单词
-        word: "我",
-        search_scope: 2, // 检索范围 0 【本章】，1【本教材】，2【本套教材】，3【系统所有教材】
+        word: this.$route.query.keyword,
+        search_scope: 3, // 检索范围 0 【本章】，1【本教材】，2【本套教材】，3【系统所有教材】
         // 本章：同一本教材下，归属同一个第一级章节下的所有课件为同一章。
         is_contain_word_variants: false, // 是否包含单词变体例句
-        // is_contain_stat_data: true, // 
+        is_contain_stat_data: true, //
+        sentence_length_sort_mode: this.sort
+          ? this.sort == "down"
+            ? "DESCENT"
+            : "ASCENT"
+          : "NO",
       };
       BookgetContent(Mname, data)
         .then((res) => {
@@ -979,8 +646,13 @@ export default {
             sentence_list_sort_left: [],
             sentence_list_sort_mid: [],
             sentence_list_sort_right: [],
+            stat_list_sentence_source_book: res.stat_list_sentence_source_book,
+            stat_list_word_definition: res.stat_list_word_definition,
           };
-          this.rightList = res.stat_list_sentence_source_book
+          // 清理脏数据
+          this.removeRubbishData(res);
+          this.rightList = res.stat_list_sentence_source_book;
+          this.getrightListdata();
           if (res.sentence_list.length > 0) {
             this.allList.sentence_list = this.handleExample(res.sentence_list);
             this.allList.sentence_list_sort_left = this.handleExample(
@@ -996,19 +668,28 @@ export default {
               "right"
             );
           }
-          this.loading = false;
+
+          this.CurrentList = JSON.parse(
+            JSON.stringify(this.allList.sentence_list)
+          );
+          this.padingEvetn();
+          if (this.$route.query.keyword && flag) {
+            this.changehzdata();
+          } else {
+            this.loading = false;
+          }
         })
         .catch((err) => {
-          this.loading3 = false;
+          this.loading = false;
         });
     },
     handleExample(list, type) {
       if (list.length > 0) {
         list = list.map((item, index) => {
+          item.number = index + 1;
           let str = item.source_courseware_name_path;
           item.show_source_courseware_name_path = str.slice(0, 8) + "...";
           if (type == "left") {
-            let sentence = JSON.parse(JSON.stringify(item.sentence));
             let arr = JSON.parse(JSON.stringify(item.sentence_fc_list));
             arr.forEach((items, indexs) => {
               if (indexs == item.sentence_fc_list_word_index) {
@@ -1056,6 +737,7 @@ export default {
             );
             item.resArr = data;
           } else {
+            this.scoreAHitNumber += item.position_list.length;
             let newsentence = JSON.parse(JSON.stringify(item.sentence));
             let res = "";
             for (let i = 0; i < item.position_list.length; i++) {
@@ -1160,17 +842,36 @@ export default {
       newarr.push(arr3);
       return newarr;
     },
+    // 处理分页
+    padingEvetn() {
+      let arr = JSON.parse(JSON.stringify(this.CurrentList));
+      let newarr = arr.splice((this.page - 1) * this.pageSize, this.pageSize);
+      this.ShowList = JSON.parse(JSON.stringify(newarr));
+    },
+    // 删除脏数据
+    removeRubbishData(data) {
+      for (let i = data.sentence_list_sort_left.length - 1; i--; ) {
+        if (data.sentence_list_sort_left[i].sentence_fc_list.length <= 1) {
+          data.sentence_list_sort_left.splice(i, 1);
+        }
+      }
+      for (let i = data.sentence_list_sort_mid.length - 1; i--; ) {
+        if (data.sentence_list_sort_mid[i].sentence_fc_list.length <= 1) {
+          data.sentence_list_sort_mid.splice(i, 1);
+        }
+      }
+      for (let i = data.sentence_list_sort_right.length - 1; i--; ) {
+        if (data.sentence_list_sort_right[i].sentence_fc_list.length <= 1) {
+          data.sentence_list_sort_right.splice(i, 1);
+        }
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    if (this.$route.query.keyword) {
-      this.changehzdata();
-      this.getdata();
-    }
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.getrightListdata();
+    this.getdata(true);
   },
   //生命周期-创建之前
   beforeCreated() {},
@@ -1458,8 +1159,8 @@ export default {
             margin-bottom: 8px;
             .top {
               display: flex;
-              align-items: flex-start;
-              flex-flow: wrap;
+              align-items: center;
+              // flex-flow: wrap;
               width: 100%;
               .number {
                 width: 22px;
@@ -1469,7 +1170,6 @@ export default {
                 text-align: right;
                 color: rgba(0, 0, 0, 0.3);
                 margin-right: 8px;
-                margin-top: 19px;
                 &-1-false {
                   margin-top: 3px;
                 }
@@ -1491,7 +1191,6 @@ export default {
                 height: 16px;
                 cursor: pointer;
                 margin-right: 8px;
-                margin-top: 22px;
                 &.speaker-1-false {
                   margin-top: 6px;
                 }
@@ -1509,10 +1208,10 @@ export default {
                 }
               }
               .words {
-                display: flex;
-                align-items: flex-end;
-                flex: 1;
-                flex-flow: wrap;
+                // display: flex;
+                // align-items: flex-end;
+                // flex: 1;
+                // flex-flow: wrap;
                 > div {
                   .pinyin {
                     font-family: "GB-PINYINOK-B";
@@ -1708,7 +1407,7 @@ export default {
   .el-switch__core:after {
     width: 8px;
     height: 8px;
-    top: 2px;
+    top: 3px;
   }
   .el-switch.is-checked .el-switch__core::after {
     margin-left: -10px;