评分

src/views/bookShelf/components/PracticeModel.vue

@@ -512,7 +512,7 @@
     >
       <RecordsScoreInfo
         :sentData="resArr.wordsList[playSentIndex]"
-        :scoreInfo="scoreInfo"
+        :scoreAllInfo="scoreInfo"
         @closeScoreInfo="closeScoreInfo"
         :wordFontsize="wordFontsize"
       ></RecordsScoreInfo>
@@ -1027,7 +1027,7 @@ export default {
         this.score = JSON.parse(
           res.data.current.rec_rate_info
         ).score_result.average_score;
-        this.scoreInfo = JSON.parse(res.data.current.rec_rate_info);
+        this.scoreInfo = res.data;
         if (this.repeatAfter) {
           if (
             this.autoNextSent &&

src/views/bookShelf/components/RecordsScoreInfo.vue

@@ -27,12 +27,11 @@
           class="word-score-item"
           v-for="(item, index) in sentDataList"
           :key="index"
-          :class="[item.tokens[9] === '' ? 'marginRight' : '']"
         >
           <label v-if="item.score !== null" :style="bgStyle(item.score)">{{
             item.score
           }}</label>
-          <p :style="wordStyle(item.score)">{{ item.tokens[2] }}</p>
+          <p :style="wordStyle(item.score)">{{ item.word }}</p>
         </div>
       </div>
     </div>
@@ -45,12 +44,13 @@
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
-  props: ["sentData", "scoreInfo", "wordFontsize"],
+  props: ["sentData", "scoreAllInfo", "wordFontsize"],
   data() {
     //这里存放数据
     return {
       speed: 0,
       sentDataList: JSON.parse(JSON.stringify(this.sentData)),
+      scoreInfo: JSON.parse(this.scoreAllInfo.current.rec_rate_info),
     };
   },
   //计算属性 类似于data概念
@@ -100,26 +100,45 @@ export default {
       this.$emit("closeScoreInfo");
     },
     handleData() {
-      // console.log(this.scoreInfo);
-      // console.log(this.sentDataList);
-      let lemmerIndex = 0;
       let json_result = this.scoreInfo.json_result;
       this.speed = Math.floor(
         (this.scoreInfo.json_result.length / this.scoreInfo.audio_time) * 60
       );
-      this.sentDataList.forEach((item) => {
-        if (
-          json_result[lemmerIndex] &&
-          (item.tokens[3].toLowerCase() === json_result[lemmerIndex].word ||
-            item.tokens[4] === json_result[lemmerIndex].word ||
-            item.tokens[5] === json_result[lemmerIndex].word)
-        ) {
-          item.score = json_result[lemmerIndex].score;
-          lemmerIndex += 1;
-        } else {
-          item.score = null;
+      let result = [];
+      let idx = 0;
+      let sentText = this.sentDataList[0].text;
+
+      json_result.forEach((scoreNode) => {
+        // 寻找当前单词在sentText中的位置，忽略大小写
+        let wordStart = sentText
+          .toLowerCase()
+          .indexOf(scoreNode.word.toLowerCase(), idx);
+        if (wordStart >= idx) {
+          // 添加前面的非单词部分（空格和标点）
+          if (wordStart > idx) {
+            result.push({
+              word: sentText.substring(idx, wordStart),
+              score: null,
+            });
+          }
+          // 添加当前单词及其得分
+          result.push({
+            word: sentText.substring(
+              wordStart,
+              wordStart + scoreNode.word.length
+            ),
+            score: scoreNode.score,
+          });
+          // 更新idx为当前单词之后的位置
+          idx = wordStart + scoreNode.word.length;
         }
       });
+
+      // 处理最后一个单词后可能的标点符号或空格
+      if (idx < sentText.length) {
+        result.push({ word: sentText.substring(idx), score: null });
+      }
+      this.sentDataList = result;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -211,11 +230,7 @@ export default {
       row-gap: 8px;
       .word-score-item {
         text-align: center;
-        padding: 0 3px;
 
-        &.marginRight {
-          padding-right: 0;
-        }
         > label {
           color: #fff;
           font-size: 12px;
@@ -230,6 +245,7 @@ export default {
           font-weight: 700;
           line-height: 36px;
           margin: 0;
+          white-space: pre;
         }
       }
     }